/* Opportunities (5 Oct): the money queues. app.css tokens only, so both themes follow. */
#tab-opportunities { max-width: 1180px; }
#opp-body { display: grid; gap: 18px; }
.opp-nav { display: grid; gap: 10px; }
.opp-group { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; }
.opp-group-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .opp-group { grid-template-columns: 1fr; gap: 4px; } }
.opp-nav .studio-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; }
.opp-n { font: 600 10.5px var(--mono); padding: 1px 6px; border-radius: 999px; background: var(--bg2); color: var(--soft); font-variant-numeric: tabular-nums; }
.studio-btn.on .opp-n { background: var(--gold); color: var(--on-accent); }
.opp-view { display: grid; gap: 12px; animation: opp-in .35s var(--ease) both; }
.opp-intro { margin: 0; max-width: 75ch; color: var(--soft); line-height: 1.55; }
.opp-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.opp-building::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; border: 2px solid var(--rule2); border-top-color: var(--accent); animation: opp-spin .8s linear infinite; vertical-align: -1px; }

.opp-card { display: grid; gap: 10px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.opp-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.opp-who { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.opp-value { font: 500 24px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opp-meta { margin: 0; font-size: 13px; color: var(--soft); line-height: 1.45; }
.opp-hub { margin: 0; font-size: 13px; font-weight: 600; color: var(--stop); }
.opp-evidence summary { cursor: pointer; font-size: 12.5px; color: var(--soft); }
.opp-evidence p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.opp-draft { width: 100%; resize: vertical; min-height: 64px; padding: 10px 12px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper2); color: var(--ink); font: 400 13.5px/1.5 var(--text); }
.opp-draft:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-soft); }
.opp-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
button.small { height: 32px; padding: 0 14px; border-radius: var(--r); font-size: 12.5px; }

.opp-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--rule2); background: var(--paper2); color: var(--soft); font: 600 11px var(--text); white-space: nowrap; }
.opp-chip.price, .opp-chip.release { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); background: color-mix(in srgb, var(--stop) 9%, var(--paper)); }
.opp-chip.date, .opp-chip.nudge, .opp-chip.lapsed { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--paper)); }
.opp-chip.design, .opp-chip.healed { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 9%, var(--paper)); }
.opp-chip.unfinished, .opp-chip.free { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--paper)); }
.opp-chip.week { color: var(--on-accent); background: var(--gold); border-color: var(--gold); }

.opp-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 14px; border: 1px dashed var(--rule2); border-radius: var(--r-lg); }
.opp-results > div { display: grid; gap: 2px; }
.opp-results strong { font: 500 22px/1 var(--display); font-variant-numeric: tabular-nums; }

.opp-brief { display: grid; gap: 8px; }
.opp-line { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 16px; text-align: left; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); color: var(--ink); font: 500 14.5px var(--text); cursor: pointer; transition: transform .2s var(--ease), border-color .2s; }
.opp-line:hover { transform: translateY(-1px); border-color: var(--gold-line); }
.opp-count { font: 500 30px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--accent); }
.opp-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opp-mini { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); display: grid; gap: 6px; align-content: start; min-width: 0; }
.opp-mini p { margin: 0; font-size: 13px; line-height: 1.45; }

.opp-days { display: flex; flex-wrap: wrap; gap: 6px; }
.opp-cands { display: grid; gap: 8px; }
.opp-cand { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r); background: var(--paper2); }
.opp-cand-draft { margin: 0; font-size: 13px; color: var(--ink2); }

.opp-moves { display: grid; gap: 10px; }
.opp-move { display: grid; grid-template-columns: minmax(0, 16em) minmax(0, 1fr) 4em 8em; gap: 12px; align-items: center; padding: 10px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); font-size: 13.5px; }
.opp-bars { display: grid; gap: 4px; }
.opp-bar { height: 18px; border-radius: 4px; padding: 0 8px; font: 600 11px/18px var(--text); white-space: nowrap; min-width: max-content; transform-origin: left; animation: opp-grow .6s var(--ease) both; }
.opp-bar.with { background: var(--gold-soft); color: var(--accent); }
.opp-bar.without { background: var(--bg2); color: var(--soft); }
.opp-move strong { font: 500 22px var(--display); text-align: right; }
.opp-move strong.up { color: var(--ok); } .opp-move strong.down { color: var(--stop); }

.opp-price { display: flex; gap: 10px; flex-wrap: wrap; }
.opp-price input { flex: 1 1 260px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 400 14px var(--text); }
.opp-range { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }
.opp-range > div { display: grid; gap: 4px; }
.opp-range strong { font: 500 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.opp-example { margin: 0; font-size: 13px; color: var(--soft); }

.opp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.opp-day { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); min-width: 0; }
.opp-col { width: 18px; height: 110px; background: var(--bg2); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.opp-col-fill { display: block; width: 100%; background: var(--accent); border-radius: 4px; transform-origin: bottom; animation: opp-rise .6s var(--ease) both; }
.opp-open { font: 600 11px var(--text); color: var(--ok); }
.opp-months { display: grid; gap: 6px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.opp-spark { display: flex; align-items: flex-end; gap: 3px; height: 80px; }
.opp-spark-bar { flex: 1; background: var(--accent); opacity: .8; border-radius: 2px 2px 0 0; min-width: 2px; }

@keyframes opp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes opp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes opp-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes opp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .opp-view, .opp-bar, .opp-col-fill { animation: none; } }

@media (max-width: 760px) {
  .opp-top { grid-template-columns: minmax(0, 1fr); }
  .opp-move { grid-template-columns: minmax(0, 1fr) 4em; }
  .opp-move .opp-bars { grid-column: 1 / -1; grid-row: 2; }
  .opp-move > .side-note { grid-column: 1 / -1; }
  .opp-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .opp-results { grid-template-columns: minmax(0, 1fr); }
  .opp-line { grid-template-columns: 3.5em minmax(0, 1fr); }
  .opp-line .opp-value { grid-column: 2; }
}

/* Demand & Roster Planner */
.opp-advice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.opp-adv { display: grid; gap: 8px; align-content: start; padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.opp-adv h3 { margin: 0; font: 500 21px/1.15 var(--display); }
.opp-adv p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.opp-adv .opp-chip { justify-self: start; }
.opp-chip.premium, .opp-chip.waitlist { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); background: color-mix(in srgb, var(--stop) 9%, var(--paper)); }
.opp-chip.promote, .opp-chip.flash { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--paper)); }
.opp-chip.hire { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 9%, var(--paper)); }
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }
.opp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.opp-table td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; font-variant-numeric: tabular-nums; }
.opp-fill { display: inline-block; width: 60px; height: 6px; margin-right: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; vertical-align: middle; }
.opp-fill span { display: block; height: 100%; background: var(--accent); }

/* Quote Brain in the conversation panel */
.price-guide { display: grid; gap: 2px; margin: 6px 0 10px; padding: 10px 12px; border-radius: var(--r); background: var(--gold-soft); border: 1px solid var(--gold-line); font-size: 13px; }
.price-guide strong { font: 500 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }

/* the reply checked as it is typed, and today's alert in the top bar */
.side-check { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--r); font-size: 12.5px; line-height: 1.45; }
.side-check.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.side-check.confirm { color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.side-check.bad { color: var(--stop); background: color-mix(in srgb, var(--stop) 9%, transparent); border: 1px solid color-mix(in srgb, var(--stop) 35%, transparent); }
.coach-alert { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .18); color: var(--chrome-gold); font: 600 12px var(--text); white-space: nowrap; cursor: pointer; }
.coach-alert:hover { background: rgba(var(--accent-rgb), .3); }
.opp-why { margin: 0; font-size: 12.5px; color: var(--soft); font-style: italic; }
@media (min-width: 761px) {
  /* nine tabs, the deposits box, Bleed and the alert do not fit one row at any desktop width
     (they piled on top of each other from 1640px up): the tabs always take their own row */
  header { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, auto);
           grid-template-areas: "brand totals who" "nav nav nav"; }
  header > nav { justify-self: start; }
}
@media (min-width: 761px) and (max-width: 1320px) {
  /* 30 Oct: between the brand and Bleed the deposits box was squeezed to "SITS / not t…" at
     1024 and 768; up to 1320px it takes a row of its own, as app.css §9 means it to */
  header { grid-template-columns: minmax(0, 1fr) auto;
           grid-template-areas: "brand who" "nav nav" "totals totals"; }
  header > .totals { justify-self: center; }
  /* the tabs scroll inside their row instead of widening the page (927px of tabs at 900) */
  header > nav { justify-self: stretch; min-width: 0; max-width: calc(100vw - 32px); overflow-x: auto;
                 flex-wrap: nowrap; scrollbar-width: none; }
  header > nav::-webkit-scrollbar { display: none; }
  header > nav > button { flex: none; }
}
.opp-results-wrap { display: grid; gap: 6px; }

/* ---------------------------------------------------------------------------------------
   13 Oct: the atelier pass. Same tokens, same palette, same two typefaces: a quieter frame,
   one ledger instead of a stack of boxes, figures set as figures. Layout only; no view's
   content changes. Both themes follow from app.css.
   --------------------------------------------------------------------------------------- */

/* the queues come first on this tab: the suggestion scores sit on the other tabs */
body:has(#tab-opportunities:not([hidden])) #metric { display: none; }
#tab-opportunities { max-width: 1200px; }
#tab-opportunities .page-intro { margin-bottom: 24px; }
#tab-opportunities .page-intro h2 { text-wrap: balance; }
#opp-body { gap: 22px; }
#tab-opportunities :is(.opp-value, .opp-count, .opp-results strong, .opp-range strong, .opp-move strong) { font-variant-numeric: lining-nums tabular-nums; }

/* the index of queues: one card, a hairline between its rows */
.opp-nav { gap: 0; padding: 4px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.opp-nav::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--gold) 0, var(--gold-hi) 28%, transparent 62%); opacity: .85; }
.opp-group { grid-template-columns: 92px 1fr; gap: 14px; padding: 11px 0; }
.opp-group + .opp-group { border-top: 1px solid var(--rule); }
.opp-group > .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); letter-spacing: .22em; }
.opp-group > .eyebrow::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); opacity: .7; flex: none; }
.opp-group-row { gap: 4px; }
.opp-nav .studio-btn { height: 32px; padding: 0 13px; border-color: transparent; background: transparent; color: var(--soft); font: 500 13px var(--text); letter-spacing: .005em; border-radius: 999px; box-shadow: none; }
.opp-nav .studio-btn:hover { background: var(--bg2); border-color: transparent; color: var(--ink); transform: none; }
.opp-nav .studio-btn.on, .opp-nav .studio-btn.on:hover { background: var(--solid); border-color: var(--solid); color: var(--on-solid); border-radius: 999px; box-shadow: 0 0 0 1px var(--gold-line), 0 8px 18px -12px rgba(0,0,0,.55); }
.opp-nav .studio-btn:focus-visible, .opp-line:focus-visible, .opp-filters .studio-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.opp-n { font: 600 10px var(--text); padding: 2px 7px; background: var(--gold-soft); color: var(--accent); letter-spacing: .02em; }
.opp-nav .studio-btn.on .opp-n { background: rgba(255,255,255,.16); color: var(--on-solid); }

/* a view: its filters, one sentence, then the work */
.opp-view { gap: 16px; }
.opp-filters { gap: 4px; padding: 4px; width: max-content; max-width: 100%; background: var(--bg2); border-radius: 999px; }
.opp-filters .studio-btn { height: 28px; border-color: transparent; background: transparent; }
.opp-filters .studio-btn:hover { background: var(--paper); border-color: transparent; transform: none; }
.opp-filters .studio-btn.on, .opp-filters .studio-btn.on:hover { background: var(--paper); color: var(--ink); border-color: var(--rule); box-shadow: var(--shadow-1); }
.opp-intro { font-size: 14.5px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; padding-left: 14px; border-left: 2px solid var(--gold-line); }
.opp-view > .side-note { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); max-width: 110ch; }

/* the morning brief: a ledger */
.opp-brief { gap: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden; }
.opp-line { position: relative; grid-template-columns: 5.2em minmax(0, 1fr) auto 18px; gap: 18px; padding: 19px 24px; border: 0; border-radius: 0; background: transparent; font: 500 15px var(--text); transition: background .25s var(--ease), padding-left .25s var(--ease); }
.opp-line + .opp-line { border-top: 1px solid var(--rule); }
.opp-line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent-gradient); transform: scaleY(0); transform-origin: top; transition: transform .3s var(--ease); }
.opp-line::after { content: ""; width: 16px; height: 16px; background: var(--muted); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.opp-line:hover { transform: none; background: var(--paper2); }
.opp-line:hover::before { transform: scaleY(1); }
.opp-line:hover::after { opacity: 1; transform: none; }
.opp-count { font: 500 34px/1 var(--display); letter-spacing: -.01em; }
.opp-line .opp-value { font-size: 25px; color: var(--ink); }
.opp-top { gap: 16px; }
.opp-mini { padding: 18px 22px 16px; gap: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
.opp-mini > .eyebrow { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); color: var(--accent); letter-spacing: .22em; }
.opp-mini p { padding: 9px 0; font-size: 13px; line-height: 1.5; color: var(--soft); }
.opp-mini p + p { border-top: 1px dashed var(--rule); }
.opp-mini p strong { color: var(--ink); font-weight: 600; }

/* what happened after: three figures, set like a statement */
.opp-results { gap: 0; padding: 0; border: 1px solid var(--rule); border-style: solid; border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--shadow-1); overflow: hidden; }
.opp-results > div { gap: 6px; padding: 18px 22px; }
.opp-results > div + div { border-left: 1px solid var(--rule); }
.opp-results strong { font: 500 34px/1 var(--display); letter-spacing: -.01em; }
.opp-results .side-note { margin: 0; }

/* a client: name and figure set in the display face, the draft as a sheet of paper */
.opp-card { position: relative; gap: 12px; padding: 22px 24px 18px; border-radius: var(--r-xl); overflow: hidden; transition: box-shadow .3s var(--ease), border-color .3s, transform .3s var(--ease); }
.opp-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent-gradient); opacity: 0; transition: opacity .3s; }
.opp-card:hover { border-color: var(--rule2); box-shadow: var(--shadow-2); }
.opp-card:hover::before, .opp-card:focus-within::before { opacity: 1; }
.opp-card-head { align-items: baseline; gap: 16px; }
.opp-who { gap: 8px 10px; }
.opp-who > strong { font: 600 23px/1.15 var(--display); letter-spacing: 0; margin-right: 2px; }
.opp-card .opp-value { font: 500 30px/1 var(--display); letter-spacing: -.01em; }
.opp-meta { font-size: 12.5px; color: var(--muted); letter-spacing: .005em; }
.opp-evidence { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 9px 0; }
.opp-evidence summary { font: 600 11px var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); transition: color .2s; }
.opp-evidence summary:hover { color: var(--accent); }
.opp-evidence p { margin: 10px 0 2px; padding-left: 14px; border-left: 2px solid var(--gold-line); font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.opp-draft { min-height: 76px; padding: 14px 16px; border-color: var(--rule); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--paper2), color-mix(in srgb, var(--paper2) 70%, var(--paper))); font: 400 14.5px/1.6 var(--text); box-shadow: inset 0 1px 2px rgba(0,0,0,.04); transition: border-color .2s, box-shadow .2s, background .2s; }
.opp-draft:hover { border-color: var(--rule2); }
.opp-draft:focus { background: var(--paper); border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-soft); }
.opp-why { font-size: 12px; color: var(--muted); }
.opp-why::before { content: ""; display: inline-block; width: 14px; height: 1px; margin-right: 8px; background: var(--gold); vertical-align: middle; opacity: .7; }
.opp-actions { gap: 6px 10px; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--rule); }
.opp-actions .primary.small { height: 34px; padding: 0 18px; border-radius: 999px; margin-right: 6px; }
.opp-actions button.link { font-size: 13px; padding: 6px 10px; border-radius: 999px; }
.opp-hub { padding: 8px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--stop) 7%, transparent); }

.opp-chip { height: 22px; padding: 0 10px; font: 600 10.5px var(--text); letter-spacing: .02em; border-color: var(--rule); }

/* winning moves: one ledger, slim bars */
.opp-moves { gap: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden; }
.opp-move { padding: 16px 22px; border: 0; border-radius: 0; background: transparent; gap: 18px; font-size: 14px; transition: background .25s; }
.opp-move + .opp-move { border-top: 1px solid var(--rule); }
.opp-move:hover { background: var(--paper2); }
.opp-bars { gap: 5px; }
.opp-bar { height: 20px; border-radius: 999px; padding: 0 10px; font: 600 10.5px/20px var(--text); letter-spacing: .02em; }
.opp-bar.with { background: var(--accent-gradient); color: var(--on-accent); }
.opp-bar.without { background: var(--bg2); color: var(--soft); }
.opp-move strong { font: 500 27px/1 var(--display); letter-spacing: -.01em; }

/* price check */
.opp-price { gap: 10px; padding: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; box-shadow: var(--shadow-1); }
.opp-price input { height: 42px; padding: 0 18px; border: 0; background: transparent; font-size: 14.5px; }
.opp-price input:focus { outline: none; }
.opp-price:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-1); }
.opp-price button { border-radius: 999px; }
.opp-range { gap: 0; padding: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden; align-items: stretch; }
.opp-range > div { gap: 8px; padding: 20px 26px; }
.opp-range > div + div { border-left: 1px solid var(--rule); }
.opp-range strong { font: 500 38px/1 var(--display); letter-spacing: -.01em; }
.opp-example { padding: 10px 0; border-top: 1px dashed var(--rule); }

/* empty chairs and demand */
.opp-cand { gap: 6px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper2); }
.opp-week { gap: 12px; }
.opp-day { gap: 6px; padding: 16px 6px 14px; border-radius: var(--r-xl); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s; }
.opp-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.opp-col { width: 14px; height: 116px; border-radius: 999px; }
.opp-col-fill { border-radius: 999px; background: var(--accent-gradient); }
.opp-months { padding: 18px 22px; border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
.opp-spark-bar { background: var(--accent-gradient); opacity: .9; border-radius: 3px 3px 0 0; }
.opp-adv { position: relative; gap: 10px; padding: 22px 24px 20px; border-radius: var(--r-xl); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.opp-adv::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--gold), transparent 70%); }
.opp-adv:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.opp-adv h3 { font: 500 24px/1.15 var(--display); text-wrap: balance; }
#tab-opportunities .table-scroll { border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
#tab-opportunities .opp-table { border: 0; box-shadow: none; border-radius: 0; }
#tab-opportunities .opp-table th { padding: 12px 14px; text-align: left; font: 600 10.5px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: var(--paper2); border-bottom: 1px solid var(--rule); white-space: nowrap; }
#tab-opportunities .opp-table td { padding: 12px 14px; }
#tab-opportunities .opp-table tbody tr { transition: background .2s; }
#tab-opportunities .opp-table tbody tr:hover td { background: var(--paper2); }
#tab-opportunities .opp-table tr:last-child td { border-bottom: 0; }
.opp-fill { width: 72px; height: 5px; }
.opp-fill span { background: var(--accent-gradient); border-radius: 999px; }

/* the owner's verdict: a quiet footer, not a second card */
#tab-opportunities .fb-row { margin-top: 10px; border-radius: var(--r-xl); }

@media (prefers-reduced-motion: reduce) {
  .opp-line, .opp-line::before, .opp-line::after, .opp-card, .opp-day, .opp-adv { transition: none; }
  .opp-day:hover, .opp-adv:hover { transform: none; }
}
@media (max-width: 760px) {
  .opp-nav { padding: 2px 14px; border-radius: var(--r-lg); }
  .opp-group { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .opp-line { grid-template-columns: 3.4em minmax(0, 1fr); gap: 4px 12px; padding: 16px 16px; }
  .opp-line::after { display: none; }
  .opp-line .opp-value { grid-column: 2; font-size: 21px; }
  .opp-count { font-size: 28px; }
  .opp-card { padding: 18px 16px 14px; }
  .opp-card-head { flex-direction: column; gap: 8px; }
  .opp-card .opp-value { font-size: 26px; }
  .opp-results > div + div, .opp-range > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .opp-range { flex-direction: column; }
  .opp-filters { width: auto; border-radius: var(--r-lg); }
  .opp-price { border-radius: var(--r-lg); }
}
.opp-who > strong { font-variant-numeric: lining-nums; }
.opp-mini > .eyebrow + p { border-top: 0; }
#opp-body { grid-template-columns: minmax(0, 1fr); }
.opp-view > *, #opp-body > * { min-width: 0; }
.opp-adv h3, .opp-mini p { font-variant-numeric: lining-nums; }