/* panes.css — the shared classes of the pane library.
   ============================================================================

   A pane is one drawing of a console screen, shown on the Solutions pages,
   the hub and the homepage (solutions-src/panes/, tools/solutions/panes.mjs).
   The handoff drew every pane with inline styles; the panes written after it
   use these classes instead, so the console look is declared once. Values are
   the handoff README's "console" tokens: bg #000 · panel #0A0A0A · card
   #121212 · border #262626 · rule #1C1C1C · ring #383838; text #fff · #E3E3E3
   · #A6A6A6 · #8F8F8F · #616161; verdict positive #4FC79E · warning #E2A65E
   · negative #E67E6E; accent on dark #EC6B4C · light #F5906F.

   Dimming is opacity only. A blur that animates makes text shimmer, which is
   what the owner saw as "glitches when replays happen". Every box a cycle
   rewrites carries a floor height (.pn-detail, .pn-ag-msg), so the page never
   shifts while a focus walks. */

.pn-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #262626; background: #000; color: #E3E3E3; box-shadow: 0 50px 90px -50px rgba(0,0,0,.6); display: flex; flex-direction: column; min-width: 0; font-family: "Instrument Sans", system-ui, sans-serif; }
.pn-frame.pn-on-dark { background: #0A0A0A; box-shadow: none; }
.pn-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #262626; min-width: 0; }
.pn-title { font-weight: 600; font-size: 15px; color: #EC6B4C; letter-spacing: -.01em; white-space: nowrap; }
.pn-tabs { display: flex; gap: 2px; padding: 2px; background: #121212; border: 1px solid #262626; border-radius: 8px; overflow-x: auto; scrollbar-width: none; opacity: .5; min-width: 0; }
.pn-tabs::-webkit-scrollbar { display: none; }
.pn-tabs span { padding: 5px 11px; border-radius: 6px; color: #A6A6A6; font-size: 11.5px; line-height: 1; white-space: nowrap; }
.pn-tabs span.on { background: #262626; color: #fff; font-weight: 500; }
.pn-ctx { margin-left: auto; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: #8F8F8F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pn-body { padding: 18px 20px 0; display: flex; flex-direction: column; min-width: 0; }
.pn-foot { padding: 14px 20px 18px; }
.pn-mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.pn-lead { font-size: 16px; line-height: 1.35; color: #fff; font-weight: 500; }
.pn-dim { opacity: .5; }
.pn-verbs { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pn-verbs .pn-verb { font-size: 10.5px; padding: 5px 9px; }

/* KPI tiles: a grouped strip divided by 1px of border colour. */
.pn-tiles { display: grid; gap: 1px; background: #262626; border: 1px solid #262626; border-radius: 10px; overflow: hidden; margin-top: 14px; }
.pn-tile { padding: 12px 14px; background: #121212; min-width: 0; opacity: 1; transition: background .3s ease; }
.pn-tile.on { background: #1A1A1A; box-shadow: inset 0 2px 0 #EC6B4C; }
.pn-tile-k { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; color: #8F8F8F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-tile-v { font-weight: 600; font-size: 26px; line-height: 1; margin-top: 8px; color: #fff; letter-spacing: -.02em; white-space: nowrap; }
.pn-tile-v small { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 400; font-size: 10px; color: #8F8F8F; margin-left: 6px; letter-spacing: 0; }
.pn-tile-v.ok { color: #4FC79E; }
.pn-tile-v.warn { color: #E2A65E; }
.pn-tile-s { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #8F8F8F; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.pn-tile { appearance: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }

/* The three figures over a table (Sources), each a door in the console. */
.pn-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; border-radius: 10px; overflow: hidden; margin: 0 0 14px; }
.pn-fig { padding: 12px 14px; background: #121212; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pn-fig .k { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; color: #8F8F8F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-fig .v { font-weight: 600; font-size: 22px; line-height: 1; color: #fff; letter-spacing: -.02em; white-space: nowrap; }
.pn-fig .v small { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 400; font-size: 10px; color: #8F8F8F; margin-left: 6px; letter-spacing: 0; }
.pn-fig .v.warn { color: #E2A65E; }
.pn-fig .v.bad { color: #E67E6E; }

/* Rows: one grid per row, fixed tracks, the focused row carries the accent bar. */
.pn-cols { display: grid; gap: 0 12px; padding: 0 0 8px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #8F8F8F; border-bottom: 1px solid #262626; opacity: .5; }
.pn-cols .r, .pn-row .r { text-align: right; }
.pn-row { display: grid; gap: 0 12px; align-items: center; width: 100%; text-align: left; border: 0; padding: 10px 0; background: transparent; color: inherit; border-bottom: 1px solid #1C1C1C; opacity: .5; transition: opacity .35s ease, background .3s ease; font: inherit; min-width: 0; }
.pn-row.on { opacity: 1; background: #121212; box-shadow: inset 2px 0 0 #EC6B4C; padding-left: 10px; }
.pn-row.lit { opacity: 1; }
button.pn-row { cursor: pointer; }
.pn-row > span { min-width: 0; }
.pn-row .t { display: block; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-row .s { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: #8F8F8F; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-row .m { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: #A6A6A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-num { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: #E3E3E3; text-align: left; white-space: nowrap; }
/* Search demand, drawn: twelve weeks of five topics, the picked one lit and
   the rest holding their shape behind it. Opacity only — a cycling highlight
   must never move a line or resize the box. */
.pn-chart { padding: 4px 0 2px; }
.pn-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pn-chart-x { display: flex; justify-content: space-between; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: #6E6E6E; margin-top: 6px; }
.pn-chart-note { font-size: 11.5px; line-height: 1.5; color: #6E6E6E; margin-top: 10px; }
.pn-leg { display: grid; gap: 1px; margin-top: 10px; }
.pn-leg-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; gap: 0 10px;
  width: 100%; padding: 7px 0; border: 0; border-top: 1px solid #1C1C1C; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: opacity .35s ease; }
.pn-leg-row .sw { width: 14px; height: 3px; border-radius: 2px; }
.pn-leg-row .nm { font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-leg-row .bk { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #8F8F8F; white-space: nowrap; }
.pn-leg-row .dt { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; white-space: nowrap; min-width: 44px; text-align: right; }
.pn-leg-row .dt.up { color: #4FC79E; }
.pn-leg-row .dt.down { color: #E67E6E; }

/* A homepage pane is a glimpse of a screen, not the screen: the content runs
   past the frame and dissolves at the bottom, which reads as depth rather than
   as a screenshot cut off with a ruler. The rows underneath stay legible
   enough to say "there is more", and no further. */
.pn-frame.pn-lite .pn-body,
.pn-frame.pn-lite .pn-ag-msg {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .55) 82%, rgba(0, 0, 0, .12) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .55) 82%, rgba(0, 0, 0, .12) 94%, transparent 100%);
}
/* The Agent's reply, on the homepage: one line naming the screens it read,
   in place of the facts table. The table is the product; the line is the
   promise. */
.pn-ag-src { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #8F8F8F; }
.pn-ag-src b { color: #F5906F; font-weight: 400; }
.pn-ag-next { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px;
  border: 1px solid #262626; border-radius: 12px; font-size: 13px; color: #A6A6A6; }

/* A leverage reading is sometimes a sentence ("cited in 33 · named as fallback").
   In the queue it wraps inside its own column instead of spilling over the verb
   beside it; everywhere else .pn-num is a figure and stays on one line. */
.pn-frame[data-pane="actions"] .pn-num { white-space: normal; }
.pn-num.ok { color: #4FC79E; }
.pn-num.warn { color: #E2A65E; }
.pn-num.bad { color: #E67E6E; }
.pn-num.mute { color: #616161; }

/* Word chips: verdicts and states in the console's vocabulary. */
.pn-chip { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; white-space: nowrap; border-radius: 999px; padding: 3px 8px; border: 1px solid #383838; color: #A6A6A6; justify-self: start; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pn-chip.ok { color: #4FC79E; border-color: rgba(79,199,158,.4); }
.pn-chip.warn { color: #E2A65E; border-color: rgba(226,166,94,.4); }
.pn-chip.bad { color: #E67E6E; border-color: rgba(230,126,110,.4); }
.pn-chip.mute { color: #8F8F8F; border-color: #262626; }
.pn-chip.accent { color: #F5906F; border-color: rgba(245,144,111,.5); }
.pn-chip.on { color: #fff; background: #262626; border-color: #383838; }
.pn-layer { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: #8F8F8F; border: 1px solid #262626; border-radius: 5px; padding: 3px 6px; white-space: nowrap; justify-self: start; }

/* The detail box under a list: a floor height, never a layout shift. */
.pn-detail { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 9px; background: #121212; border: 1px solid #262626; min-height: 118px; }
.pn-detail .t { font-size: 13px; line-height: 1.5; color: #fff; }
.pn-detail .s { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; line-height: 1.5; color: #8F8F8F; }
.pn-detail .s.accent { color: #F5906F; letter-spacing: .06em; }
.pn-detail .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.pn-band { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; color: #8F8F8F; padding: 14px 0 6px; border-bottom: 1px solid #262626; display: flex; justify-content: space-between; gap: 12px; }
.pn-band.accent { color: #F5906F; }
.pn-band.first { padding-top: 0; }
.pn-band .n { color: #616161; letter-spacing: 0; }

/* Pills and verbs. */
.pn-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-pill { appearance: none; border: 0; cursor: default; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; padding: 5px 10px; border-radius: 7px; color: #A6A6A6; background: transparent; box-shadow: inset 0 0 0 1px #262626; transition: all .2s ease; text-align: left; white-space: nowrap; }
.pn-pill.on { color: #fff; background: #262626; box-shadow: inset 0 0 0 1px #383838; }
.pn-pill .n { color: #616161; margin-left: 5px; }
.pn-verb { appearance: none; cursor: default; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; padding: 6px 11px; border-radius: 7px; border: 1px solid #383838; background: transparent; color: #E3E3E3; white-space: nowrap; display: inline-block; }
.pn-verb.primary { border-color: #EC6B4C; background: rgba(236,107,76,.12); color: #F5906F; }
.pn-set { appearance: none; border: 0; cursor: default; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: #fff; background: #DE5A38; white-space: nowrap; font-family: inherit; }
.pn-price { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #8F8F8F; white-space: nowrap; }
.pn-bar { position: relative; height: 5px; border-radius: 999px; background: #262626; overflow: hidden; }
.pn-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #616161; }
.pn-bar i.ok { background: #4FC79E; }
.pn-bar i.warn { background: #E2A65E; }
.pn-bar i.bad { background: #E67E6E; }
.pn-bar i.accent { background: #EC6B4C; }

/* A quoted answer, with the sentence that counts marked. */
.pn-quote { font-size: 13.5px; line-height: 1.55; color: #fff; }
.pn-quote mark { background: rgba(236,107,76,.16); color: #fff; border-bottom: 1px dashed #EC6B4C; padding: 0 2px; }
.pn-quote mark.ok { background: rgba(79,199,158,.14); border-bottom-color: #4FC79E; }
.pn-quote mark.bad { background: rgba(230,126,110,.16); border-bottom-color: #E67E6E; }

/* A run-by-run trend: bars whose height is the rate. */
.pn-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-top: 14px; }
.pn-bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 5px; height: 100%; min-width: 0; }
.pn-bars .b i { display: block; border-radius: 3px 3px 0 0; background: #383838; transition: background .3s ease; }
.pn-bars .b.on i { background: #EC6B4C; }
.pn-bars .b span { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; color: #8F8F8F; text-align: center; white-space: nowrap; }

/* A life, drawn as states in a line: the correction's, a run's. */
.pn-life { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pn-life .st { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid #262626; color: #616161; white-space: nowrap; }
.pn-life .st.done { color: #4FC79E; border-color: rgba(79,199,158,.4); }
.pn-life .st.now { color: #fff; background: #262626; border-color: #383838; }
.pn-life .ln { width: 10px; height: 1px; background: #383838; flex: none; }

/* Numbered steps: a report's sections, onboarding's beats. */
.pn-steps { display: flex; flex-direction: column; }
.pn-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid #1C1C1C; opacity: .5; transition: opacity .35s ease; text-align: left; background: transparent; border-left: 0; border-right: 0; border-top: 0; color: inherit; font: inherit; width: 100%; }
.pn-step.on { opacity: 1; }
button.pn-step { cursor: pointer; }
.pn-step .n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #8F8F8F; padding-top: 3px; }
.pn-step .t { display: block; font-size: 13.5px; color: #fff; }
.pn-step .s { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #8F8F8F; margin-top: 4px; line-height: 1.5; }

/* A score: the free tools' verdicts. */
.pn-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pn-score .v { font-weight: 600; font-size: 40px; line-height: 1; color: #fff; letter-spacing: -.03em; }
.pn-score .of { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: #8F8F8F; }
.pn-score .s { font-size: 13.5px; color: #E3E3E3; }

/* The Agent: a conversation, not a table. */
.pn-ag { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.pn-ag-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 6px 0 2px; }
.pn-ag-mark { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; }
.pn-ag-mark i { display: block; width: 4px; border-radius: 2px; background: #fff; }
.pn-ag-mark i:nth-child(1) { height: 8px; } .pn-ag-mark i:nth-child(2) { height: 16px; } .pn-ag-mark i:nth-child(3) { height: 12px; } .pn-ag-mark i:nth-child(4) { height: 22px; background: #EC6B4C; }
.pn-ag-h { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: #fff; margin: 0; }
.pn-ag-sub { font-size: 13px; color: #8F8F8F; }
.pn-ag-starters { display: grid; gap: 6px; }
.pn-ag-st { appearance: none; text-align: left; border: 1px solid #262626; background: #0A0A0A; color: #E3E3E3; border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 13px; cursor: pointer; opacity: .55; transition: opacity .35s ease, border-color .3s ease; }
.pn-ag-st.on { opacity: 1; border-color: #383838; }
.pn-ag-bar { display: flex; align-items: center; gap: 10px; border: 1px solid #383838; border-radius: 12px; padding: 10px 12px; background: #0A0A0A; box-shadow: 0 0 0 4px rgba(236,107,76,.06); }
.pn-ag-bar .q { flex: 1; font-size: 13.5px; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-ag-msg { display: flex; flex-direction: column; gap: 10px; min-height: 250px; }
.pn-ag-who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #E3E3E3; }
.pn-facts { border: 1px solid #262626; border-radius: 9px; overflow: hidden; background: #121212; }
.pn-facts .hd { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; color: #8F8F8F; border-bottom: 1px solid #262626; }
.pn-facts .hd .src { letter-spacing: 0; color: #616161; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #1C1C1C; font-size: 12.5px; }
.pn-fact:last-child { border-bottom: 0; }
.pn-fact .k { color: #A6A6A6; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-fact .v { color: #fff; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; white-space: nowrap; }
.pn-fact .go { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #F5906F; white-space: nowrap; }
.pn-bub { font-size: 13.5px; line-height: 1.55; color: #E3E3E3; }
.pn-bub b { color: #fff; font-weight: 600; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pn-ctl { display: flex; gap: 14px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: #8F8F8F; }

@media (prefers-reduced-motion: reduce) { .pn-row, .pn-pill, .pn-step, .pn-ag-st, .pn-tile { transition: none; } }
/* Phones: a row declares its own narrow layout (`--sm`) and marks the columns
   that step aside (data-sm="hide"); the head wraps so the context line gets
   its own row under the tabs. */
@media (max-width: 640px) {
  /* The strip scrolls when it cannot fit; the fade says so rather than
     leaving a tab sliced down the middle at the frame edge. */
  .pn-tabs { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .pn-head { flex-wrap: wrap; }
  .pn-ctx { flex-basis: 100%; margin-left: 0; order: 3; }
  .pn-cols, .pn-row { grid-template-columns: var(--sm, minmax(0, 1fr) auto) !important; }
  .pn-cols > [data-sm="hide"], .pn-row > [data-sm="hide"] { display: none; }
  .pn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pn-figs { grid-template-columns: 1fr; }
  .pn-detail { min-height: 0 !important; }
}