/* EnemoAi app (/): screens, the conversation, answers, Watchlist, Library, Account, Wallet. Tokens and shared
   components (buttons, cards, forms, dialogs, header, footer) live in ui.css. */

/* ---------- header nav: logo, balance and account stay in the bar; on mobile the pages move into the ☰ menu ---------- */
nav.top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nav-links { display: contents; }
.link { background: none; border: 0; color: var(--fg); cursor: pointer; font: inherit; font-size: .9rem; padding: 6px 9px;
  border-radius: var(--r-sm); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.link:hover { background: var(--panel); color: var(--fg); }
.link[aria-current="page"] { color: var(--blue); font-weight: 650; }
.nav-links .signout { color: var(--muted); }
.nav-links .menu-only { display: none; }
.menu-btn { display: none; position: relative; width: var(--tap); height: var(--tap); border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); cursor: pointer; place-items: center; }
.menu-btn svg path { transition: transform .18s ease, opacity .18s ease; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .l1 { transform: rotate(45deg) translateY(5px); }
.menu-btn[aria-expanded="true"] .l2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .l3 { transform: rotate(-45deg) translateY(-5px); }
.menu-dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #fff; }
#wallet-chip .short { display: none; }
.me-btn { display: inline-flex; align-items: center; gap: var(--s2); background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 4px 3px 10px; cursor: pointer; min-height: var(--tap); }
.me-btn:hover { border-color: var(--blue); }
.me-btn .co-logo { height: 22px; max-width: 72px; object-fit: contain; }
.me-btn .av, .avatar { overflow: hidden; }
.me-btn .av { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.av img, .avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  header.bar { flex-wrap: nowrap; }
  .brand .word { height: 15px; }
  nav.top { flex-wrap: nowrap; gap: var(--s2); }
  .menu-btn { display: grid; }
  .nav-links { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; flex-direction: column; gap: 2px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s2); box-shadow: var(--shadow-lg); }
  .nav-links.open { display: flex; animation: menuIn .16s ease-out; }
  .nav-links .link { text-align: left; font-size: 1.02rem; padding: 0 14px; min-height: 48px; border-radius: 10px; justify-content: space-between; }
  .nav-links .link[aria-current="page"] { background: var(--blue-soft); }
  .nav-links .menu-only { display: flex; }
  .nav-links .menu-sep { border-top: 1px solid var(--line); margin-top: 6px; border-radius: 0 0 10px 10px; }
  .nav-links .signout { color: var(--bad); }
  #wallet-chip { white-space: nowrap; flex-shrink: 1; min-width: 0; }
  #wallet-chip .full { display: none; } #wallet-chip .short { display: inline; }
  .brand { flex-shrink: 0; }   /* the logo keeps its size (#129); the wallet chip gives way, below */
  nav.top { flex: 0 1 auto; min-width: 0; }
  .me-btn, .menu-btn { flex-shrink: 0; }
}
/* On a phone the header holds the logo, language, wallet, account and menu. The logo keeps its width and the chip wraps to two lines if it must (#129). */
@media (max-width: 480px) {
  header.bar { gap: var(--s2); }
  .brand { gap: 6px; }
  nav.top { gap: 6px; }
  #wallet-chip { white-space: normal; text-align: center; line-height: 1.15; text-wrap: balance; padding-inline: 9px; font-size: .75rem; }
  .me-btn { padding: 3px; }
  .me-btn .co-logo { display: none; }
}
@media (max-width: 360px) { .brand .word { display: none; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: var(--r-pill);
  background: var(--bad); color: #fff; font-size: .7rem; font-weight: 800; vertical-align: 1px; }

/* ---------- signed out (#107): one idea per screen ---------- */
.hero { text-align: center; padding-top: clamp(var(--s5), 5vh, 48px); }
.hero-tag[lang="en"] { display: block; color: var(--muted); font-size: var(--t-md); }
.hero-title { font-weight: 600; font-size: clamp(2.5rem, 7.2vw, 3.9rem); line-height: 1.06; letter-spacing: -.022em;
  margin: var(--s5) auto var(--s4); max-width: 20ch; text-wrap: balance; }
.hero-sub { color: var(--muted); font-size: clamp(1.08rem, 2.4vw, 1.28rem); line-height: 1.5; max-width: 34em; margin: 0 auto; text-wrap: pretty; }
.hero-points { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; color: var(--muted); font-size: var(--t-sm); }
.hero-points li + li::before { content: "·"; margin: 0 var(--s2); }
@media (max-width: 640px) { .hero-points { gap: 2px var(--s3); } .hero-points li + li::before { content: none; } }
/* the sign-in is one button, not a card; an invitation (#wp-join) keeps its card */
#view-auth { margin-top: var(--s5); }
#view-auth:has(#wp-auth:not([hidden])) { background: none; border: 0; box-shadow: none; padding: 0; }
#view-auth .wp-btn { min-height: 58px; min-width: min(320px, 100%); font-size: 1.06rem; }
.wp-setup { margin-top: var(--s3); }
.wp-setup > summary { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s2); cursor: pointer; list-style: none; color: var(--blue); font-size: var(--t-sm); font-weight: 500; }
.wp-setup > summary::-webkit-details-marker { display: none; }
.wp-setup[open] { margin-inline: auto; max-width: 540px; padding: 0 var(--s5) var(--s5); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
#auth-disclaimer { background: none; border: 0; padding: 0; margin: var(--s4) auto 0; max-width: 560px; text-align: center; }
.wp-card { text-align: center; }
.wp-card h2, .wp-card h1.h2 { font-weight: 600; font-size: var(--t-lg); margin: var(--s1) 0 6px; }
.wp-card .why { color: var(--muted); max-width: 440px; margin: 0 auto 18px; line-height: 1.5; }
.wp-checks { list-style: none; padding: 0; margin: 0 auto 18px; max-width: 400px; text-align: left; font-size: 14px; }
.wp-checks li { padding: 4px 0 4px 26px; position: relative; }
.wp-checks li::before { content: "✓"; position: absolute; left: 4px; color: var(--blue); font-weight: 700; }
.wp-down { margin: 0 auto var(--s4); max-width: 460px; padding: var(--s3) 14px; border-radius: var(--r); background: var(--amber-bg);
  border: 1px solid var(--amber-line); color: var(--amber); font-size: .92rem; text-align: left; }
.wp-new { display: flex; flex-direction: column; gap: var(--s2); align-items: center; max-width: 460px; margin: 0 auto; }
.wp-new .code-row { display: flex; gap: var(--s2); width: 100%; justify-content: center; flex-wrap: wrap; }
.wp-new .code-row input { flex: 1 1 160px; max-width: 220px; height: var(--tap); padding-block: 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; text-align: left; max-width: 460px; margin: var(--s1) auto 14px; font-size: .8rem;
  line-height: 1.5; color: var(--muted); cursor: pointer; }
.consent-ai { max-width: 460px; margin: var(--s1) auto 0; font-size: .8rem; text-align: start; }
#legal-dialog .consent-ai { margin: var(--s1) 0 0; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; }
.consent a { color: var(--blue); }
.sample { position: relative; margin-top: clamp(64px, 11vw, 112px); scroll-margin-top: 72px; }
.sample-label { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.sample-label .tag { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; border-radius: var(--r-pill);
  padding: 4px 12px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sample .reply { margin-top: 0; }
.sample .you { margin-bottom: var(--s3); }
.sample .sample-note { font-size: var(--t-xs); color: var(--muted); margin: var(--s3) 0 0; }
.sample .deeper button { cursor: pointer; }

/* ---------- signed out: the tour of what EnemoAi does today ---------- */
.tour { margin-top: 0; }
.t-sec { padding: clamp(80px, 14vw, 144px) 0 0; scroll-margin-top: 72px; }
.t-head { text-align: center; margin: 0 auto var(--s6); }
.t-eyebrow { display: inline-block; font-size: 1.02rem; font-weight: 600; color: var(--blue); }
.t-sec h2, .t-end h2 { font-weight: 600; font-size: clamp(2.1rem, 5.8vw, 3.2rem); line-height: 1.08; letter-spacing: -.018em; margin: var(--s2) auto var(--s3); max-width: 19ch; text-wrap: balance; }
.t-sec h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 750; margin: var(--s5) 0 var(--s2); }
.t-lede { font-size: clamp(1.05rem, 2.2vw, 1.2rem); line-height: 1.55; color: var(--muted); max-width: 34em; margin: 0 auto; text-wrap: pretty; }
.t-fine { font-size: var(--t-sm); color: var(--muted); margin: var(--s4) auto 0; max-width: 40em; }
.t-sec > .t-fine { text-align: center; }
.t-list { list-style: none; padding: 0; margin: 0; }
.t-list li { position: relative; padding: 0 0 var(--s3) 26px; line-height: 1.55; }
.t-list li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--blue); font-weight: 800; }
.soon { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 9px; border-radius: var(--r-pill); background: var(--amber-bg);
  border: 1px solid var(--amber-line); color: var(--amber); font-size: .7rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.t-cards { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .t-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .t-more .t-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .t-all .t-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .t-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-cards-2 > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* a link at the end of fine print stays in one piece */
.t-fine a, .sample-note a { display: inline-block; }
@media (min-width: 640px) { .t-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .t-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.t-cards li { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); background: var(--surface); }
.t-cards li b { display: block; font-size: 1.02rem; margin-bottom: var(--s1); }
.t-cards li span:not(.soon) { display: block; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.t-soon li { background: var(--panel); border-style: dashed; border-color: var(--line-strong); }
.t-price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); margin-top: var(--s5);
  padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.t-price p { margin: 0; flex: 1 1 420px; line-height: 1.55; }
.t-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-sm); font-weight: 500; }
.t-links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* forecast sample (single series: brand blue; the week under the floor in the warning color, with a label) */
.t-forecast { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5) var(--s3); background: var(--surface); box-shadow: var(--shadow); }
.t-forecast figcaption b { display: block; font-size: 1.02rem; }
.t-forecast figcaption span { display: block; color: var(--muted); font-size: var(--t-sm); }
.fc-svg { display: block; width: 100%; height: auto; margin-top: var(--s2); }
.fc-grid { stroke: var(--line); stroke-width: 1; }
.fc-ax { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.fc-bar { fill: var(--chart-blue, #7290d8); }
.fc-bar.warn { fill: var(--amber); }
.fc-bar:hover { opacity: .85; }
.fc-range { stroke: var(--ink); stroke-opacity: .35; stroke-width: 2; stroke-linecap: round; }
.fc-floor { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fc-lbl { fill: var(--muted); font-size: 11px; font-weight: 600; font-family: var(--sans); }
.fc-lbl.strong { fill: var(--fg); font-weight: 750; }
.fc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: var(--s2) 0 0; font-size: var(--t-xs); color: var(--muted); }
.fc-key span { display: inline-block; flex: none; }
.fc-key span + span, .fc-key .k-range, .fc-key .k-floor { margin-left: 8px; }
.fc-key .k-bar { width: 10px; height: 10px; border-radius: 2px; background: var(--chart-blue, #7290d8); margin-left: 0; }
.fc-key .k-range { width: 2px; height: 12px; background: var(--ink); opacity: .35; }
.fc-key .k-floor { width: 16px; border-top: 1.5px dashed var(--bad); }
.fc-warn { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--fg); display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }

/* sample alert */
.t-alert { margin-top: 0; box-shadow: var(--shadow); border-left: 4px solid var(--bad); }
.t-alert .reply.brief { margin-top: var(--s3); }
.t-alert .md { font-size: .96rem; }
.t-alert .md h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--blue); margin: var(--s4) 0 var(--s2); font-weight: 750; }
.t-alert .t-for { color: var(--muted); font-size: var(--t-sm); font-style: italic; }
.t-alert .act { min-height: var(--tap); cursor: pointer; }

/* ways to ask: a price list; each row opens */
.t-modes { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.t-modes li { border-bottom: 1px solid var(--line-strong); }
.t-modes .m-top { display: flex; align-items: center; gap: var(--s3); min-height: 60px; cursor: pointer; list-style: none; }
.t-modes .m-top::-webkit-details-marker { display: none; }
.t-modes .m-top b { font-size: 1.12rem; font-weight: 600; margin-inline-end: auto; }
.t-modes .m-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.t-modes .m-top::after { content: "+"; width: 1em; text-align: center; color: var(--muted); font-size: 1.2rem; }
.t-modes details[open] > .m-top::after { content: "−"; }
.t-modes details > :not(summary) { max-width: 40em; }
.t-modes p { color: var(--muted); font-size: .96rem; line-height: 1.55; margin: 0 0 var(--s3); }
.t-modes p.m-legal { color: var(--amber); font-weight: 600; font-size: var(--t-sm); }
.t-modes q { display: block; width: fit-content; quotes: none; background: var(--ink); color: #fff; border-radius: 14px 14px 4px 14px; padding: var(--s2) var(--s3); font-size: .9rem; line-height: 1.45; margin-bottom: var(--s4); }
.t-weigh { text-align: center; }

/* evidence */
.t-stats { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); margin-top: var(--s2); text-align: center; }
/* three equal columns: a long figure may not widen its own */
@media (min-width: 760px) { .t-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t-stats b { white-space: nowrap; font-size: 2rem !important; } }
.t-stats b { display: block; font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.01em; }
.t-stats span { display: block; color: var(--muted); font-size: .92rem; line-height: 1.5; margin-top: var(--s1); }
.t-world { text-align: center; margin-top: var(--s6); }
.t-sources { margin-top: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 var(--s5); background: var(--surface); }
.t-sources summary { cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--blue); min-height: var(--tap); display: flex; align-items: center; }
.t-sources summary { justify-content: space-between; list-style: none; }
.t-sources summary::-webkit-details-marker { display: none; }
.t-sources summary::after, .wp-setup > summary::after { content: "+"; margin-inline-start: var(--s2); }
.t-sources[open] summary::after, .wp-setup[open] > summary::after { content: "−"; }
.t-sources ol { margin: 0 0 var(--s3); padding-inline-start: 2em; columns: 1; }
@media (min-width: 720px) { .t-sources ol { columns: 2; column-gap: var(--s7); } }
.t-sources li { break-inside: avoid; padding: 3px 0; font-size: .94rem; }
.t-sources .t-fine { margin-bottom: var(--s4); margin-inline: 0; max-width: none; }
.t-all .t-fine { margin-inline: 0; max-width: none; }

/* replay */
.t-replay-card { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.t-replay-card .k { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--blue-on-ink); font-weight: 750; }
.t-replay-card b { display: block; font-weight: 600; font-size: 1.35rem; line-height: 1.25; margin: var(--s1) 0 var(--s2); }
.t-replay-card p { margin: 0; color: var(--on-ink-muted); font-size: .94rem; line-height: 1.55; }
.t-outcome { margin: 0; padding-left: 1.3em; }
.t-outcome li { padding: 2px 0 var(--s2); line-height: 1.5; font-size: .95rem; }

/* closing */
.t-end { text-align: center; padding: clamp(80px, 14vw, 144px) 0 var(--s6); }
.t-end p { color: var(--muted); margin: 0 auto var(--s5); }
.t-end .wp-btn { min-height: 58px; min-width: min(320px, 100%); font-size: 1.06rem; }
.t-end .banner { background: none; border: 0; padding: 0; text-align: center; max-width: 560px; margin: var(--s5) auto 0; }
/* the alert's brief, and everything else, one click away */
.t-brief { margin-top: var(--s3); }
.t-brief > summary, .t-all > summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; color: var(--blue); font-weight: 600; }
.t-all { margin-top: clamp(64px, 10vw, 96px); }
.t-all > summary { justify-content: center; list-style: none; font-size: var(--t-sm); font-weight: 500; }
.t-all > summary::-webkit-details-marker { display: none; }
.t-all > summary::after { content: "+"; margin-inline-start: var(--s2); }
.t-all[open] > summary::after { content: "−"; }
.t-all h3 { font-weight: 600; font-size: var(--t-xl); margin: var(--s7) 0 var(--s3); }
.t-all h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 750; margin: var(--s3) 0 var(--s2); }
.t-all .t-cards { margin-top: var(--s4); }
.wp-blur { filter: blur(4px); user-select: none; -webkit-user-select: none; letter-spacing: .04em; }
.wp-from { font-size: .8rem; color: var(--muted); margin-top: var(--s1); }
.wp-from code { font-size: .8rem; color: var(--fg); background: var(--panel); border-radius: 6px; padding: 1px 6px; }
#p-title.pending { color: var(--muted); font-weight: 500; }
#p-name-note { margin: var(--s1) 0 0; }
.hold { margin: 14px auto 0; max-width: 820px; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--amber-bg);
  border: 1px solid var(--amber-line); color: var(--amber); font-size: .92rem; }
.hold a { color: inherit; font-weight: 700; }
#legal-dialog ul { margin: var(--s2) 0 var(--s3); padding-left: 18px; font-size: .9rem; }
#legal-dialog .consent { margin: var(--s1) 0 14px; }

/* one bar: the owl and wordmark, the language, one way in; it stays as you read */
.hdr-signin { display: none; }
html:has(#hero:not([hidden])) { overflow-x: clip; }
body:has(#hero):not(:has(#nav:not([hidden]))) header.bar { position: sticky; top: 0; z-index: 30; padding-block: 0; min-height: 64px; margin-top: calc(var(--s5) * -1); }
body:has(#hero):not(:has(#nav:not([hidden]))) header.bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(5, 8, 23, .06); }
body:has(#view-auth:not([hidden]) #wp-auth:not([hidden])) .hdr-signin { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3); margin-inline-start: 0; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; white-space: nowrap; order: 3; }
.hdr-signin:hover { background: #1b2436; }
body:has(#view-auth:not([hidden]) #wp-auth:not([hidden])) header.bar { flex-wrap: nowrap; gap: var(--s2); }
body:has(#view-auth:not([hidden]) #wp-auth:not([hidden])) .hdr-prefs { margin-inline-start: auto; order: 2; }
body:has(#view-auth:not([hidden]) #wp-auth:not([hidden])) nav.top { display: none; }
@media (max-width: 480px) { body:has(#hero:not([hidden])) .hdr-prefs-cur { display: none; } }
@media (max-width: 640px) { body:has(#view-auth:not([hidden]) #wp-auth:not([hidden])) .hdr-signin, body:has(#hero:not([hidden])) .hdr-prefs-btn { min-height: var(--tap); } }
body:has(#hero:not([hidden])) .foot-prefs { display: none; }
.sample-h { font-weight: 600; font-size: clamp(2.1rem, 5.8vw, 3.2rem); line-height: 1.08; letter-spacing: -.018em; text-align: center; margin: 0 auto var(--s6); text-wrap: balance; }
.t-all-lede { line-height: 1.55; margin: 0 0 var(--s3); }
/* one dark chapter, edge to edge, for the thing no one else can show */
.t-replays::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: linear-gradient(rgba(5, 8, 23, .8), rgba(5, 8, 23, .93)), url(/brand/wall-street-1911.jpg) center 40% / cover no-repeat; }
.t-replays { position: relative; isolation: isolate; margin-top: clamp(80px, 14vw, 144px); padding-block: clamp(72px, 12vw, 120px) var(--s5); background: var(--ink); color: #fff; box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.t-replays .t-eyebrow, .t-replays a, .t-replays .cite { color: var(--blue-on-ink); }
.t-replays .t-lede, .t-replays .t-fine, .t-replays h3, .t-replays .sample-label .hint { color: var(--on-ink-muted); }
.t-replays .sample-label .tag { background: #fff; color: var(--ink); }
.t-replays .photo-credit { color: var(--on-ink-muted); }
.t-replay-card { background: rgba(255, 255, 255, .07); }
/* two real pictures, each one credited like any other source (#108) */
.photo-credit { display: block; width: fit-content; min-height: 24px; padding-block: 3px; margin: var(--s4) auto 0; font-size: var(--t-xs); font-weight: 400; color: var(--on-ink-muted); text-decoration: none; }
.photo-credit:hover { color: #fff; text-decoration: underline; }
.hero-stage:not(:has(#hero:not([hidden]))) .photo-credit { display: none; }
.hero-stage:has(#hero:not([hidden])) { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 64px); padding-block: clamp(var(--s6), 6vh, 64px) var(--s5); }
.hero-stage:has(#hero:not([hidden]))::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(5, 8, 23, .58), rgba(5, 8, 23, .08) 100%), linear-gradient(rgba(5, 8, 23, .16), rgba(5, 8, 23, .42)); }
.hero-stage .hero { padding-top: 0; }
.hero-stage:has(#hero:not([hidden])) { background: url(/brand/video/earth-lights.jpg) center / 100vw auto no-repeat; }
.hero-stage .hero-title { color: #fff; text-shadow: 0 2px 28px rgba(5, 8, 23, .55); }
.hero-stage .hero-sub { color: #e6eaf5 !important; text-shadow: 0 1px 14px rgba(5, 8, 23, .7); }
.hero-stage .hero-tag[lang="en"], .hero-stage .hero-sub { color: var(--on-ink-muted); }
/* #191: the lockup over the film. The wordmark's dark-background version (white Enemo, light-blue Ai, transparent). */
.hero-lockup { margin: 0 auto var(--s4); }
.hero-lockup .l1 { height: clamp(30px, 5vw, 44px); }
.hero-stage .hero-lockup .l3 { color: #fff; font-style: italic; text-shadow: 0 1px 14px rgba(5, 8, 23, .7); }
.hero-stage .hero-lockup .l2 { color: var(--on-ink-muted); text-shadow: 0 1px 10px rgba(5, 8, 23, .7); }
#wp-auth > .hero-points { color: var(--on-ink-muted); }
#wp-auth > .wp-btn { background: #fff; color: var(--ink); }
#wp-auth > .wp-btn:hover { background: var(--blue-soft); }
#wp-auth > .error { background: var(--bad-bg); padding: var(--s2) var(--s3); border-radius: var(--r-sm); width: fit-content; margin-inline: auto; }
.wp-setup > summary { color: #cdd9ff; text-shadow: 0 1px 10px rgba(5, 8, 23, .7); }
.wp-setup[open] > summary { color: var(--blue); text-shadow: none; }
.hero-stage #auth-disclaimer { color: var(--on-ink-muted); }
.hero-stage .photo-credit { margin-top: auto; padding-top: var(--s5); }
.t-evidence { position: relative; isolation: isolate; margin-top: clamp(80px, 14vw, 144px); padding-block: clamp(72px, 12vw, 120px) var(--s5); background: var(--ink); color: #fff; box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.t-evidence::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(5, 8, 23, .55), rgba(5, 8, 23, .1) 100%); }
.t-evidence .t-eyebrow { color: var(--blue-on-ink); }
.t-evidence .t-lede, .t-evidence .t-world, .t-evidence .t-stats span { color: var(--on-ink-muted); }
.t-sources { color: var(--fg); }
/* gentle arrival; nothing moves for anyone who asked for less motion, or in a browser without scroll timelines */
@media (prefers-reduced-motion: no-preference) {
  @keyframes land-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero > *, #view-auth, #auth-disclaimer { animation: land-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-title { animation-delay: .08s; } .hero-sub { animation-delay: .16s; } #view-auth { animation-delay: .24s; } #auth-disclaimer { animation-delay: .32s; }
  @supports (animation-timeline: view()) {
    .t-sec > *:not(.film):not(.film-btn), .sample > *, .t-end > * { animation: land-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 22%; }
  }
}

/* the profile: every group closed until its arrow is opened (#110) */
#view-account > .card { padding-block: 0; margin-top: var(--s3); }
/* One grid for every group, so each arrow sits the same distance from its card's top and right edges (measured in CI). */
.grp-head { display: grid; grid-template-columns: minmax(0, 1fr) 40px; column-gap: var(--s3); align-items: start; padding-block: var(--s3); cursor: pointer; margin: 0; }
.grp-head.card-head { display: grid; margin: 0; }
.grp-head > h2 { margin: 0; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s2); row-gap: 2px; line-height: 1.3; font-size: 1.08rem; font-weight: 650; }
.grp-head.profile-top { display: grid; align-items: start; gap: 0 var(--s4); grid-template-columns: 76px minmax(0, 1fr) 40px; }
.grp-head.profile-top > .pic { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.grp-head.profile-top > .who { grid-column: 2; grid-row: 1; min-width: 0; }
.grp-head.profile-top > .who h2 { min-height: 40px; display: flex; align-items: center; line-height: 1.15; font-size: 1.5rem; font-weight: 650; }
.grp-head.profile-top > .linkish { grid-column: 2; justify-self: start; }
.grp-head.profile-top > .grp-toggle { grid-column: 3; grid-row: 1; }
.grp-toggle { grid-column: 2; grid-row: 1; justify-self: end; width: 40px; height: 40px; padding: 9px; margin: 0; margin-inline-end: -9px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.grp-toggle:hover { background: var(--panel); color: var(--fg); }
.grp-toggle svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.grp-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.grp-body { padding-block: 0 var(--s5); }
.grp-body > :first-child { margin-top: 0; }
.grp-how { margin: var(--s2) 0 var(--s3); }
.grp-body > :last-child, .grp-body > :not([hidden]):has(+ [hidden]:last-child) { margin-bottom: 0; }
/* signed-in screens: one height and weight for controls */
:is(dialog, #view-ask, #view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) :is(button.secondary, button.danger, button.primary) { min-height: 40px; padding: 0 16px; font-size: var(--t-sm); font-weight: 500; }
:is(dialog, #view-ask, #view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) button.primary { font-weight: 600; }
:is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) .act { font-weight: 500; }
:is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) input:not([type="checkbox"], [type="radio"], [type="file"]), :is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) select { height: 44px; padding-block: 0; font-size: .95rem; }
:is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) input[type="file"] { height: 44px; padding: 5px 8px; font-size: var(--t-sm); }
:is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) input[type="file"]::file-selector-button { height: 32px; font: inherit; font-weight: 500; }
#view-account .team-row select { height: 36px; font-size: var(--t-sm); }
#biz-body .chips label.chip { font-size: var(--t-xs); font-weight: 500; }
@media (max-width: 640px) { :is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) input:not([type="checkbox"], [type="radio"], [type="file"]), :is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) select { font-size: 16px; } #view-account .team-row select { height: 44px; } :is(dialog, #view-ask, #view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) :is(button.secondary, button.danger, button.primary) { min-height: var(--tap); } }
/* text lines up with the card's left edge */
:is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) .list li { padding-inline: 0; }
#voices li { padding-inline: var(--s3); border-radius: var(--r); }
:is(#view-account, #view-wallet, #view-watchlist, #view-decisions, #view-library, #view-radar) :is(th, td):first-child { padding-inline-start: 0; }
#view-account .team-row .who-line { flex: 1 1 100%; }
#view-account .stats { grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); margin-top: var(--s3); }
@media (max-width: 640px) { #view-account .stats { grid-template-columns: 1fr 1fr; } #view-account .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
#view-account .stat span { display: block; line-height: 1.3; margin-top: 2px; }
#co-wp:not([hidden]) { margin-top: var(--s4); }
#fate-body .row.start:has(> #fate-horizon) { display: block; }
#fate-body .row.start:has(> #fate-horizon) > label { margin: 0 0 var(--s1); }
#view-account .chip { font-size: var(--t-xs); font-weight: 600; padding: 3px 10px; }
#view-account .profile-top .pic .btns button { min-height: 28px; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--blue); font-size: var(--t-xs); font-weight: 500; }
#view-account .profile-top .pic .btns button:hover { text-decoration: underline; }
#view-account .profile-top .pic .btns { justify-content: center; }
#view-account code:not(#biz-body code) { font-family: inherit; font-size: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .grp-body:not([hidden]) { animation: alive-rise .3s cubic-bezier(.2, .7, .2, 1) both; } }

/* ---------- home ---------- */
#thread { padding-bottom: var(--s6); }
.welcome { text-align: center; padding: 36px 0 var(--s2); animation: rise .6s ease both; }
.welcome > img { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow); }
.welcome h1 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em; margin: 14px 0 6px; }
.welcome > p { color: var(--muted); margin: 0 auto; max-width: 520px; }
.today { text-align: left; margin-top: 26px; }
.today h2.sec { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 750; margin: 30px 0 10px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.today h2.sec span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-size: .78rem; }
.starters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
@media (max-width: 600px) { .starters { grid-template-columns: 1fr; } }
.starter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px var(--s4); cursor: pointer;
  font: inherit; text-align: left; color: var(--fg); transition: border-color .2s, transform .15s, box-shadow .2s; }
.starter:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.starter b { display: block; font-size: .78rem; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s1); }
.feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.fcard { display: flex; flex-direction: column; gap: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px var(--s4); text-align: left; font: inherit; color: var(--fg); cursor: pointer; transition: border-color .2s, transform .15s, box-shadow .2s; animation: rise .45s ease both; }
.fcard:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.fcard .who { font-size: .78rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.fcard .who b { color: var(--fg); }
.fcard .line { font-size: 1.04rem; line-height: 1.4; }
.fcard .go { margin-top: auto; color: var(--blue); font-weight: 650; font-size: .82rem; }
.replay-card { background: var(--ink); color: #fff; border: 0; border-radius: var(--r-lg); padding: var(--s5) 22px; text-align: left; font: inherit;
  cursor: pointer; width: 100%; display: flex; flex-direction: column; gap: var(--s2); transition: transform .15s, box-shadow .2s; }
.replay-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(5,8,23,.28); }
.replay-card .k { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--blue-on-ink); font-weight: 700; }
.replay-card .t { font-size: 1.45rem; line-height: 1.25; }
.replay-card .s { color: var(--on-ink-muted); font-size: .9rem; }
.replay-card .go { color: #fff; font-weight: 650; font-size: var(--t-sm); }
.ledger-due, .home-threat, .home-pitch { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
  border-radius: var(--r-lg); padding: 14px var(--s4); margin-bottom: 10px; }
.ledger-due { background: var(--amber-bg); border: 1px solid var(--amber-line); }
.ledger-due b { color: var(--amber); }
.home-threat { background: var(--bad-bg); border: 1px solid var(--bad-line); }
.home-threat b { color: var(--bad); }
.home-pitch { background: var(--blue-soft); border: 1px solid var(--blue-line); }
.home-pitch b { color: var(--blue); }
.ask-disclaimer { margin: var(--s2) 0 0; }
.lockup.ask-lockup { margin-bottom: 112px; }

/* ---------- a turn: question, then the reply ---------- */
.turn { margin-top: 28px; animation: rise .4s ease both; scroll-margin-top: 92px; }
.you { display: flex; justify-content: flex-end; }
.you p { margin: 0; background: var(--ink); color: #fff; padding: 10px var(--s4); border-radius: 18px; border-end-end-radius: 4px; max-width: 85%; font-size: .98rem; unicode-bidi: plaintext; }
.you .att { display: block; font-size: .78rem; opacity: .8; margin-top: var(--s1); }
.reply { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px var(--s6);
  box-shadow: var(--shadow); position: relative; overflow: hidden; }
.reply::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--blue), #7aa2ff, var(--blue)); background-size: 200% 100%; }
.reply.live::before { animation: sweep 1.4s linear infinite; }
@media (max-width: 560px) { .reply { padding: 18px var(--s4); } }
.reply-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.reply-top:empty { display: none; }
.jump { font-size: var(--t-sm); font-weight: 650; text-decoration: none; padding: 6px 2px; margin: -6px 0 6px auto; }
.mode-tag { display: inline-flex; gap: 6px; align-items: center; background: var(--blue-soft); color: var(--blue); border-radius: var(--r-pill); padding: 3px 12px;
  font-size: var(--t-xs); font-weight: 700; margin: 0 6px 10px 0; text-transform: uppercase; letter-spacing: .06em; }
.replay-tag { display: inline-flex; gap: 6px; align-items: center; background: var(--ink); color: #fff; border-radius: var(--r-pill); padding: 3px 12px;
  font-size: var(--t-xs); font-weight: 650; margin-bottom: 10px; }

/* ---------- the wait: real progress, never a fake percentage (tenet 1) ---------- */
.status { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; color: var(--muted); font-size: .88rem; min-height: 26px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: pulse 1.1s ease-in-out infinite; flex: none; }
.thinking { display: flex; gap: var(--s4); align-items: flex-start; }
.thinking > .body { flex: 1; min-width: 0; }
.owl { position: relative; width: 58px; height: 58px; flex: none; }
.owl img { position: absolute; inset: 5px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.owl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--blue-soft); border-top-color: var(--blue);
  border-right-color: #7aa2ff; animation: spin 1.6s linear infinite; }
.thinking .what { font-weight: 500; color: var(--fg); }
.co { display: inline-block; background: var(--blue-soft); color: var(--blue); border-radius: var(--r-pill); padding: 2px 10px; font-size: .78rem;
  font-weight: 500; animation: pop .35s cubic-bezier(.2,1.4,.4,1) both; margin-block: 2px 0; margin-inline: 0 2px; }
.steps { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.steps li { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--panel); color: var(--muted); border: 1px solid transparent; }
.steps li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: none; }
.steps li.now { background: var(--blue-soft); color: var(--blue); font-weight: 650; border-color: var(--blue-line); }
.steps li.now::before { background: var(--blue); animation: pulse 1.1s ease-in-out infinite; }
.steps li.done { color: var(--fg); }
.steps li.done::before { content: "✓"; width: auto; height: auto; background: none; color: var(--ok); font-weight: 800; font-size: .8rem; }
.steps .t { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.elapsed { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; align-self: center; }
/* Decision #180: the bar, 1-100%, between the step tracker and the status line. An estimate from measured stage times (the label says "about"). */
.pbar { margin: var(--s3) 0; max-height: 72px; overflow: hidden; }
.pbar-top { display: flex; align-items: baseline; gap: 6px; min-height: 1.5em; font-size: .8rem; color: var(--muted); }
.pbar-label, .pbar-eta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar-label { flex: 0 1 auto; color: var(--fg); font-weight: 500; }
.pbar-label:empty { display: none; }
.pbar-eta { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.pbar-label:not(:empty) + .pbar-eta:not(:empty)::before { content: "· "; }
.pbar-num { flex: none; margin-inline-start: auto; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.pbar-track { height: 6px; margin-top: 4px; border-radius: var(--r-pill); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.pbar-fill { width: 0; height: 100%; border-radius: inherit; background: var(--blue); }
.pbar.gone { opacity: 0; max-height: 0; margin-block: 0; }
/* Decision #183: Stop, beside the bar, for the whole time the answer is in progress. A stopped answer's text is kept only
   under its label, set apart from a finished one (no actions, no sharing). */
.pbar-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3); row-gap: 0; }   /* narrow: Stop drops under the bar rather than squeeze its text */
.pbar-row > .pbar { flex: 1 1 auto; min-width: 0; }
.stop-ans { flex: none; margin-inline-start: auto; gap: 7px; font-weight: 500; }
.stop-ans[hidden] { display: none; }
.stop-sq { width: 9px; height: 9px; border-radius: 2px; background: currentColor; flex: none; }
.stopped-label { margin: 0 0 var(--s2); font-size: .8rem; font-weight: 650; color: var(--muted); }
.md.unchecked { color: var(--muted); border-inline-start: 3px dashed var(--line-strong); padding-inline-start: var(--s3); }
.stopped-note { margin: var(--s3) 0 var(--s2); }
@media (max-width: 640px) { .stop-ans { min-height: var(--tap); } }
@media (forced-colors: active) { .stop-sq { background: ButtonText; forced-color-adjust: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pbar-fill { transition: width .8s cubic-bezier(.2, .7, .2, 1); }
  .pbar { transition: opacity .45s ease .7s, max-height .35s ease 1.15s, margin .35s ease 1.15s; }
}
@media (forced-colors: active) {
  .pbar-track { box-shadow: none; border: 1px solid CanvasText; }
  .pbar-fill { background: Highlight; forced-color-adjust: none; }
}
.finds { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.find { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 var(--r) var(--r) 0; padding: 10px 14px; background: var(--panel); animation: rise .5s ease both; }
.find .src { font-size: var(--t-xs); color: var(--muted); }
.find .src a { color: var(--muted); }
.find .q { font-size: 1.02rem; line-height: 1.45; }
.research { margin-top: 6px; }
details.read { margin: 0 0 14px; color: var(--muted); font-size: var(--t-sm); }
/* Instant profiles (#57): the cited first read, quieter than the answer that follows it. */
.first-read { margin: 0 0 var(--s3); padding: var(--s3); background: var(--surface); border-inline-start: 3px solid var(--line); border-radius: var(--r); font-size: var(--t-sm); }
.first-read p { margin: 0 0 6px; }
.first-read ul { margin: 0 0 8px; padding-inline-start: 1.1em; }
.first-read em { color: var(--muted); }
details.read summary { cursor: pointer; padding: 6px 0; }

/* ---------- the answer: a decision memo ---------- */
.md { font-size: 1.02rem; }
.md p { margin: 0 0 var(--s3); }
.md > p:first-child strong:first-child, .md .lead { display: block; font-weight: 600; font-size: 1.6rem; line-height: 1.25;
  letter-spacing: -.005em; margin: 6px 0 14px; color: var(--fg); }
@media (max-width: 560px) { .md > p:first-child strong:first-child, .md .lead { font-size: 1.38rem; } }
.md h2, .md h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--blue); margin: 26px 0 10px; font-weight: 750; }
.md ul, .md ol { margin: 0 0 14px; padding-left: 0; list-style: none; }
.md li { position: relative; padding-left: 34px; margin-bottom: 10px; }
.md ol { counter-reset: n; }
.md ol > li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: var(--t-xs); font-weight: 700; display: grid; place-items: center; }
.md ul > li::before { content: ""; position: absolute; left: 9px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.md strong { font-weight: 700; }
.md .closer { margin-top: 18px; padding: 14px var(--s4); background: var(--blue-soft); border-radius: var(--r); font-weight: 600; }
.caret { display: inline-block; width: 8px; height: 1.05em; background: var(--blue); vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; margin: var(--s1) 0 18px; }
.tile { background: var(--panel); border-radius: var(--r); padding: var(--s3) 14px; animation: pop .4s cubic-bezier(.2,1.3,.4,1) both; }
.tile b { display: block; font-size: 1.45rem; letter-spacing: -.01em; line-height: 1.2; }
.tile span { display: block; color: var(--muted); font-size: var(--t-sm); line-height: 1.4; margin-top: var(--s1); }
.md .against, .md .change { border-radius: var(--r-lg); padding: var(--s1) 18px 6px; margin: 18px 0; }
.md .against { background: var(--amber-bg); border: 1px solid var(--amber-line); }
.md .against h2 { color: var(--amber); }
.md .change { background: var(--blue-soft); border: 1px solid var(--blue-line); }
/* Decision #60: the worked math reads as a ledger of lines; the base-rate line stands out a little. */
.md .math { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s1) 18px 6px; margin: 18px 0; background: var(--surface); }
.md .math li { font-variant-numeric: tabular-nums; }
.md .math code { font-size: .92em; background: var(--panel); border-radius: 6px; padding: 1px 6px; }
.md p.base-rate { border-left: 3px solid var(--blue); padding-left: 12px; }
/* The key-claims ledger (E14, decision #60): one quiet row per claim; a three-step pill says how sure. */
.md ul.ledger > li.claim { padding-left: 0; margin: 0; padding: 12px 0; border-top: 1px solid var(--blue-line); display: grid;
  grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; align-items: baseline; }
.md ul.ledger > li.claim:first-child { border-top: 0; padding-top: 4px; }
.md ul.ledger > li.claim::before { content: none; }
.md .conf { grid-row: span 3; display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .02em; color: var(--blue); background: var(--surface); border: 1px solid var(--blue-line); border-radius: var(--r-pill);
  padding: 2px 9px 2px 7px; white-space: nowrap; }
.md .conf i { width: 4px; height: 10px; border-radius: 2px; background: var(--blue-line); margin-right: 1px; }
.md .conf i:last-of-type { margin-right: 6px; }
.md .conf.hi i, .md .conf.mid i:nth-of-type(-n+2), .md .conf.lo i:first-of-type { background: currentColor; }
.md .conf.mid { color: var(--amber); border-color: var(--amber-line); }
.md .conf.mid i { background: var(--amber-line); }
.md .conf.mid i:nth-of-type(-n+2) { background: currentColor; }
.md .conf.lo { color: var(--muted); border-color: var(--line-strong); }
.md .conf.lo i { background: var(--line-strong); }
.md .conf.lo i:first-of-type { background: currentColor; }
.md .claim .what { font-weight: 650; line-height: 1.4; }
.md .claim .why { grid-column: 2; color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.md .claim .mind { grid-column: 2; font-size: var(--t-sm); line-height: 1.45; }
.md .claim .mind b { font-weight: 650; color: var(--blue); margin-right: 4px; }
@media (max-width: 480px) { .md ul.ledger > li.claim { grid-template-columns: 1fr; } .md .conf { grid-row: auto; justify-self: start; }
  .md .claim .why, .md .claim .mind { grid-column: 1; } }
.challenges { margin-top: var(--s3); display: grid; gap: var(--s2); }
.challenge-line { font-size: var(--t-sm); border-left: 3px solid var(--line-strong); padding: 2px 0 2px 10px; }
.challenge-line p { margin: 4px 0 0; }
.ch-status { font-weight: 700; color: var(--muted); }
.ch-status.reviewing { color: var(--amber); }
.ch-status.resolved { color: var(--green); }
.md .tbl { overflow-x: auto; margin: 6px 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r); }
.md table { font-size: .88rem; min-width: 560px; }
.md th { background: var(--panel); font-weight: 700; }
.md th, .md td { padding: 9px 10px; }
.md tr.pick td { background: var(--blue-soft); }
.md .seat { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2px var(--s4) var(--s2); margin: var(--s3) 0; background: var(--surface); }
.md .seat h2 { color: var(--fg); text-transform: none; letter-spacing: 0; font-size: 1rem; }
.md .seat h2 .who { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--blue); margin-bottom: 2px; }
.md .vote-line { display: inline-block; border-radius: var(--r-pill); padding: 2px 12px; font-size: .8rem; font-weight: 700; }
.md .vote-line.for { background: var(--green-bg); color: var(--green); }
.md .vote-line.against { background: var(--bad-bg); color: var(--bad); }
.md .vote-line.cond { background: var(--amber-bg); color: var(--amber); }
.md .vote { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: var(--s1) 18px var(--s2); margin: 18px 0; }
.md .vote h2 { color: var(--blue-on-ink); }
.md ul.tl { border-left: 2px solid var(--blue-soft); margin-left: var(--s2); padding-left: 0; }
.md ul.tl > li { padding-left: 26px; }
.md ul.tl > li::before { left: -7px; top: .5em; width: 12px; height: 12px; background: var(--surface); border: 3px solid var(--blue); }
.md ul.tl > li strong:first-child { color: var(--blue); font-size: 1.02rem; }
a.cite { color: var(--blue); text-decoration: none; font-weight: 800; font-size: .95em; padding: 0 3px; position: relative; cursor: pointer; }
a.cite:hover { color: var(--blue-deep); }
.tip { position: fixed; z-index: 30; max-width: 340px; background: var(--ink); color: #fff; border-radius: var(--r); padding: var(--s3) 14px;
  font-size: .8rem; line-height: 1.45; box-shadow: 0 12px 32px rgba(5,8,23,.25); pointer-events: none; animation: rise .15s ease both; }
.tip b { display: block; margin-bottom: var(--s1); }
.tip i { color: var(--on-ink-muted); font-style: normal; }

/* evidence line, next steps (tenet 2), actions */
.evidence { margin-top: 22px; padding-top: var(--s4); border-top: 1px solid var(--line); animation: rise .4s ease both; }
.ev-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); color: var(--muted); font-size: .9rem; }
.ev-stat { display: inline-flex; align-items: center; gap: var(--s2); }
.ev-stat b { color: var(--fg); font-weight: 700; }
.ev-cost { margin-left: auto; }
.evidence .big { color: var(--fg); font-weight: 800; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.evidence .check { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: .75rem; flex: none; }
.sources { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 6px; counter-reset: src; }
.sources li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s3); min-height: var(--tap); padding: 8px 14px; border-radius: var(--r);
  background: var(--panel); border-inline-start: 3px solid var(--blue); }
.sources a { display: inline-block; min-height: 24px; color: var(--fg); text-decoration: none; font-size: .92rem; }
.sources a b { font-weight: 750; }
.sources a:hover { color: var(--blue); text-decoration: underline; }
.sources .sec { color: var(--muted); font-size: var(--t-xs); }
details.more-src summary { cursor: pointer; color: var(--blue); font-weight: 500; font-size: var(--t-xs); min-height: var(--tap); display: flex; align-items: center; }
.deeper { margin-top: 18px; padding: var(--s4); border-radius: var(--r-lg); background: var(--panel); animation: rise .5s ease both; scroll-margin-top: 80px; }
.deeper .label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 750; margin-bottom: var(--s2); }
.deeper > button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--s3); text-align: left; min-height: 52px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin-bottom: var(--s2); font: inherit;
  color: var(--fg); cursor: pointer; transition: border-color .2s, transform .15s, background .2s; }
.deeper > button:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateX(3px); }
.deeper > button.best { border: 1.5px solid var(--blue); box-shadow: 0 2px 10px rgba(0,67,249,.12); }
.deeper > button.best .kicker { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); font-weight: 750; margin-bottom: 2px; }
.deeper > button.best .q { font-weight: 600; }
.deeper > button span.go { color: var(--blue); font-weight: 700; white-space: nowrap; font-size: .82rem; }
@media (max-width: 480px) { .deeper > button { flex-direction: column; align-items: flex-start; gap: 4px; } }
.inline-ask { display: flex; align-items: flex-end; gap: var(--s2); margin-top: 10px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 6px 6px 6px 14px; transition: border-color .2s, box-shadow .2s; }
.inline-ask:focus-within { border-color: var(--blue); box-shadow: var(--focus-ring); }
.inline-ask textarea { flex: 1; min-width: 0; background: transparent; border: 0; padding: 10px 0; min-height: var(--tap); max-height: 160px; resize: none; outline: none; font: inherit; font-size: .98rem; }
.inline-ask textarea:focus { outline: none; }
.inline-ask .price { white-space: nowrap; align-self: center; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; position: relative; }
.act { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 5px 13px; min-height: 36px; font: inherit; font-size: .8rem; color: var(--fg); cursor: pointer; text-decoration: none; }
.act:hover { border-color: var(--blue); color: var(--blue); }
.act.live { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.act.log { border-color: var(--blue); color: var(--blue); font-weight: 500; }
.priv { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: 10px; }
.priv button { background: none; border: 0; color: var(--blue); font: inherit; font-weight: 650; cursor: pointer; padding: 8px 0; }
.menu { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 6px; z-index: 6; min-width: 210px; animation: rise .15s ease both; }
.menu.below { bottom: auto; top: calc(100% + 6px); }
.menu button { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 0 12px; min-height: 40px; border-radius: var(--r-sm); font: inherit; font-size: .88rem; cursor: pointer; color: var(--fg); }
.menu button:hover, .menu button:focus-visible { background: var(--blue-soft); color: var(--blue); }
.outcome { margin-top: 18px; background: var(--green-bg); border: 1px solid var(--green-line); border-radius: var(--r-lg); padding: var(--s4) 18px; animation: rise .5s ease both; }
.outcome h3 { margin: 0 0 10px; color: var(--green); font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; }
.outcome ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.outcome li b { color: var(--green); }
.outcome p { margin: 10px 0 0; font-size: var(--t-sm); color: var(--muted); }

/* ---------- composer: out of sight until asked for ---------- */
.composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 28px var(--s4) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(232,239,248,0), var(--bg) 22px); transform: translateY(115%); opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.2,.9,.3,1.15), opacity .2s ease, visibility 0s linear .32s; visibility: hidden; }
.composer > * { max-width: 788px; margin-left: auto; margin-right: auto; }
.composer.open { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.fab { position: fixed; right: max(20px, calc(50% - 410px)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 19; display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: var(--r-pill); background: var(--blue); color: #fff; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 1rem; box-shadow: 0 10px 30px rgba(0,67,249,.35), 0 2px 6px rgba(0,67,249,.25);
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease; }
.fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 36px rgba(0,67,249,.45), 0 2px 6px rgba(0,67,249,.25); }
.fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(0,67,249,.45); animation: beckon 2.6s ease-out infinite; }
.fab.away { transform: translateY(20px) scale(.9); opacity: 0; pointer-events: none; }
@keyframes beckon { 0% { box-shadow: 0 0 0 0 rgba(0,67,249,.45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(0,67,249,0); } }
.box { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow); padding: 10px 10px 10px var(--s4); }
.box:focus-within { border-color: var(--blue); box-shadow: var(--shadow), var(--focus-ring); }
.box textarea { background: transparent; border: 0; padding: 6px 0; min-height: 48px; max-height: 200px; resize: none; outline: none; font-size: 1rem; }
.box textarea:focus { outline: none; }
.box .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.modes { display: flex; gap: var(--s1); flex-wrap: wrap; }
.modes button { background: transparent; border: 1px solid transparent; border-radius: var(--r-pill); padding: 3px 12px; min-height: 34px; font: inherit; font-size: .8rem; cursor: pointer; color: var(--muted); }
.modes button[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); font-weight: 650; background: var(--blue-soft); }
.modes button:not([aria-pressed="true"]):hover { color: var(--fg); background: var(--panel); }
.price { color: var(--muted); font-size: .78rem; }
.right { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.send { width: var(--tap); height: var(--tap); border-radius: var(--r); border: 0; background: var(--blue); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.send:disabled { background: var(--muted); }
.tool { width: var(--tap); height: var(--tap); border-radius: var(--r); border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.tool:hover { background: var(--panel); color: var(--fg); }
.tool.on { background: #ffe9e9; color: var(--bad); animation: pulse 1.1s ease-in-out infinite; }
.drop { outline: 2px dashed var(--blue); outline-offset: 4px; border-radius: 18px; }
.files { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.file { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 2px 4px 2px 10px; font-size: .8rem; max-width: 100%; animation: pop .3s ease both; }
.file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.file button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.1rem; line-height: 1; min-width: 32px; min-height: 32px; }
.file.bad { border-color: var(--bad); color: var(--bad); }

/* ---------- Library, Account, Wallet ---------- */
.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; flex-wrap: wrap; padding: var(--s3) var(--s1); border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list li > .main { flex: 1 1 220px; min-width: 0; }
.list li > .btns { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.list .q { font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: var(--fg); text-align: left; }
.list .q:hover { color: var(--blue); }
.seg { display: inline-flex; background: var(--panel); border-radius: 11px; padding: 3px; gap: 2px; margin: var(--s1) 0 var(--s2); max-width: 100%; }
.seg button { border: 0; background: none; padding: 0 15px; min-height: 38px; border-radius: var(--r-sm); font: inherit; font-size: var(--t-sm); cursor: pointer; color: var(--muted); }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--fg); font-weight: 650; box-shadow: 0 1px 3px rgba(5,8,23,.1); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; margin-top: var(--s2); }
.stat { background: var(--panel); border-radius: var(--r); padding: var(--s3) 14px; }
.stat b { display: block; font-size: 1.3rem; }
.stat span { color: var(--muted); font-size: .78rem; }
.profile-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-top .pic { margin: 0; flex-direction: column; gap: 6px; }
.profile-top .pic .well { width: 76px; height: 76px; font-size: 1.4rem; font-weight: 700; color: var(--muted); }
.profile-top .who { flex: 1; min-width: 190px; }
.profile-top .who h2 { font-weight: 600; font-size: 1.65rem; line-height: 1.15; margin: 0; }
.profile-top .who .mail { color: var(--muted); font-size: .92rem; margin-top: 2px; word-break: break-all; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.edit-panel { border-top: 1px solid var(--line); margin-top: 18px; padding-top: var(--s4); }
.pref { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.pref b { display: block; font-size: .95rem; }
.pref .hint { margin: 2px 0 0; }
.toggle { position: relative; width: 52px; height: var(--tap); flex: none; margin: 0; display: grid; place-items: center; }
.toggle input { opacity: 0; width: 100%; height: 100%; position: absolute; inset: 0; margin: 0; cursor: pointer; }
.toggle span { position: relative; width: 44px; height: 26px; background: var(--line-strong); border-radius: var(--r-pill); transition: background .15s; pointer-events: none; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + span { background: var(--blue); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.pic { display: flex; align-items: center; gap: 14px; margin: 6px 0 var(--s1); }
.pic .well { width: 64px; height: 64px; border-radius: 50%; background: var(--panel); border: 1px dashed var(--line-strong); display: grid; place-items: center;
  overflow: hidden; flex: none; cursor: pointer; color: var(--muted); font-weight: 700; font-size: 1.2rem; padding: 0; font-family: inherit; }
.pic.logo .well { width: 132px; border-radius: var(--r); }
.pic .well img { width: 100%; height: 100%; object-fit: cover; }
.pic.logo .well img { object-fit: contain; padding: 6px; }
.pic .well.has { border-style: solid; background: var(--surface); }
.pic .btns { display: flex; gap: 6px; flex-wrap: wrap; }
.field-label { display: block; font-size: .82rem; color: var(--muted); margin: var(--s3) 0 var(--s1); }
.co-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s4); margin: var(--s3) 0 var(--s1); font-size: .92rem; }
@media (max-width: 420px) { .co-facts { grid-template-columns: 1fr; gap: 0; } .co-facts dd { margin-bottom: var(--s2); } }
.co-facts dt { color: var(--muted); }
.co-facts dd { margin: 0; overflow-wrap: anywhere; }
.standing { display: inline-block; padding: 1px var(--s2); border-radius: var(--r-pill); font-size: .8rem; font-weight: 700; }
.standing.ok { background: var(--blue-soft); color: var(--fg); }
.standing.held { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); }
.team-row .who-line { flex: 1 1 220px; min-width: 0; }
.team-row .ctl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.team-row select { width: auto; min-height: 36px; padding: 4px 10px; }
.sec-log { font-size: .88rem; }
.tbl-wrap { overflow-x: auto; }
.break { word-break: break-all; }
.voice-row { cursor: pointer; }
.voice-row.on { background: var(--blue-soft); border-radius: var(--r); }
.voice-row .pick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.voice-row.on .pick { border: 6px solid var(--blue); }
.voice-row .who { display: flex; align-items: center; gap: var(--s3); }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; }
.meter { height: 12px; background: var(--panel); border-radius: var(--r-pill); overflow: hidden; margin: 10px 0 6px; }
.meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #4f7dff); border-radius: inherit; transition: width .8s ease; }
.stages { display: flex; gap: 6px; margin: var(--s3) 0 var(--s1); flex-wrap: wrap; }
.stages span { font-size: .78rem; padding: 4px 10px; border-radius: var(--r-pill); background: var(--panel); color: var(--muted); }
.stages span.now { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.stages span.done { color: var(--fg); }
.balance { font-size: 2rem; font-weight: 700; }
.amounts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.amounts button { min-width: 72px; }
.custom-amount input { max-width: 240px; flex: 1 1 180px; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: var(--s2) 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
.plus { color: var(--ok); }
.qprice { font-size: 2rem; font-weight: 750; margin: 6px 0; }
#q-searches { margin: 6px 0 4px; padding-left: 18px; }

/* ---------- Watchlist (decision #35) ---------- */
.pitch { background: var(--ink); color: #fff; border-radius: 18px; padding: 26px 26px 22px; margin-top: var(--s5); }
@media (max-width: 560px) { .pitch { padding: 22px 18px; } }
.pitch .tag { display: inline-flex; background: var(--blue); color: #fff; border-radius: var(--r-pill); padding: 3px 12px; font-size: var(--t-xs); font-weight: 650; margin-bottom: 10px; }
.pitch h2 { font-weight: 600; font-size: 1.7rem; line-height: 1.2; margin: 0 0 10px; color: #fff; }
.pitch p, .pitch li { color: var(--on-ink-muted); }
.pitch li b { color: #fff; }
.pitch ul { padding-left: 18px; margin: 10px 0 var(--s4); }
.pitch .price-big { font-size: 1.1rem; color: #fff; font-weight: 700; }
.pitch .fine { font-size: .8rem; color: #a9b1cb; margin-top: var(--s3); }
.pitch .fine a, .pitch a { color: #fff; }
.link[hidden] { display: none; }
#view-radar .radar-sec { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
#view-radar .radar-sec h3 { margin: 0 0 var(--s1); font-size: 1.05rem; font-weight: 650; }
#view-radar .radar-sec > .hint { margin: 0 0 var(--s2); }
#view-radar .radar-empty { margin: var(--s2) 0; }
#view-radar .radar-item .hint { margin: var(--s1) 0 0; }
#view-radar .radar-facts { font-weight: 600; }
#view-radar .radar-offer { margin-top: var(--s3); }
#view-radar .cal-warn { margin: var(--s2) 0; }
#view-radar .sev { text-transform: none; letter-spacing: 0; }
.sev { display: inline-block; border-radius: var(--r-pill); padding: 2px 10px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.sev.critical { background: var(--bad-bg); color: var(--bad); }
.sev.high { background: var(--amber-bg); color: var(--amber); }
.sev.medium { background: var(--blue-soft); color: var(--blue); }
.sev.info { background: var(--panel); color: var(--muted); }
.alert { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px var(--s4); margin-top: 10px; background: var(--surface); }
.alert.unread { border-left: 4px solid var(--bad); }
.alert.unread.medium, .alert.unread.info { border-left-color: var(--blue); }
.alert .top { display: flex; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; align-items: baseline; }
.alert .cname { font-weight: 750; }
.alert .lbl { font-size: 1.08rem; margin: 6px 0 var(--s1); }
.alert .meta { font-size: .8rem; color: var(--muted); }
.alert details { margin-top: var(--s2); }
.alert details summary { cursor: pointer; color: var(--blue); font-weight: 650; font-size: .9rem; padding: 8px 0; }
.alert .reply.brief { margin-top: 10px; box-shadow: none; padding: var(--s4) 18px; }
.alert .reply.brief::before { display: none; }
.assoc { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) 2px; border-bottom: 1px solid var(--line); }
.assoc:last-child { border-bottom: 0; }
.assoc .role { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--blue); font-weight: 750; }
.picker-results { border: 1px solid var(--line); border-radius: var(--r); margin-top: 6px; overflow: hidden; }
.picker-results button { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; gap: 4px 10px; background: var(--surface); border: 0;
  border-bottom: 1px solid var(--line); padding: 10px var(--s3); min-height: var(--tap); font: inherit; text-align: left; cursor: pointer; color: var(--fg); }
.picker-results button:last-child { border-bottom: 0; }
.picker-results button:hover { background: var(--blue-soft); }
.confirm { background: var(--panel); border-radius: var(--r-lg); padding: 14px var(--s4); margin-top: 10px; }
.confirm dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) 14px; margin: var(--s2) 0; font-size: .88rem; }
.confirm dt { color: var(--muted); }
.confirm dd { margin: 0; overflow-wrap: anywhere; }
.brief-card { border-radius: var(--r-lg); padding: 18px var(--s5); background: var(--blue-soft); border: 1px solid var(--blue-line); margin-top: var(--s5); }
.brief-card h2 { margin: 0 0 6px; font-weight: 600; font-size: 1.35rem; line-height: 1.3; }
.brief-card .item { margin-top: 6px; }
.email-prefs { margin-top: 6px; }

/* ---------- Decision Ledger ---------- */
.dec { border-bottom: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.dec:last-child { border-bottom: 0; }
.dec .d { font-weight: 650; }
.dec .when { font-size: .8rem; color: var(--muted); }
.dec .when a { padding: 6px 0; }
.dec .due { color: var(--amber); font-weight: 700; }
.dec .out { background: var(--green-bg); border-radius: 10px; padding: var(--s2) var(--s3); font-size: .9rem; }
.dec form { display: flex; flex-direction: column; gap: var(--s2); }
.dec form[hidden] { display: none; }
.dec .act { align-self: flex-start; }
.dec form .hint { margin: 0; }
#dec-record { margin-top: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
#dec-record .stats { grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); }
#dec-record .stat span { display: block; line-height: 1.3; margin-top: 2px; }
@media (max-width: 640px) { #dec-record .stats { grid-template-columns: 1fr 1fr; } #dec-record .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.contrib-h { margin: var(--s3) 0 var(--s1); font-size: .9rem; font-weight: 600; }
.contrib-list { margin: 0 0 var(--s2); padding-inline-start: 1.2em; font-size: .88rem; color: var(--muted); }
.contrib-link { margin: var(--s2) 0; }
.toggle input:disabled { cursor: not-allowed; }
.toggle input:disabled + span { opacity: .45; }

/* ---------- touch: every control at least 44px tall ---------- */
@media (max-width: 720px), (pointer: coarse) {
  .act, .modes button, .seg button, .link, .team-row select, .linkish, .menu button { min-height: var(--tap); }
  .file button { min-width: var(--tap); min-height: var(--tap); }
  .modes button { padding: 3px 14px; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes blink { to { visibility: hidden; } }
@keyframes sweep { to { background-position: -200% 0; } }
.input-narrow { max-width: 240px; }
.progress { flex-wrap: nowrap; align-items: flex-start; }
.progress .steps { flex: 1; min-width: 0; }
.progress .elapsed { padding-top: 5px; }

/* ---------- refine loop 2026-11-01 (docs/UI-REFINE-LOG.md) ---------- */
/* header: one row on desktop, as wide as the signed-out layout so the logo lines up with the content below it */
@media (min-width: 901px) { header.bar { flex-wrap: nowrap; } nav.top { flex-wrap: nowrap; } }
@media (min-width: 901px) { nav.top { gap: 2px; } .link { padding: 6px 8px; } #wallet-chip { margin-right: 6px; } .me-btn { margin-left: 6px; } }
/* wallet history on phones: what and amount on one line, the date under them */
@media (max-width: 480px) {
  #view-wallet table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #w-history tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "what amt" "date date"; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  #w-history td { border: 0; padding: 0; }
  #w-history td:nth-child(1) { grid-area: date; color: var(--muted); font-size: var(--t-xs); }
  #w-history td:nth-child(2) { grid-area: what; }
  #w-history td:nth-child(3) { grid-area: amt; font-weight: 700; }
}
/* the Ask button steps aside while an answer is written, folds to an icon on phones once a conversation is under way,
   and sits in the right gutter on wide screens so it never covers the answer */
.fab.waiting { transform: translateY(20px) scale(.9); opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  #view-ask:has(.turn) .fab { width: 56px; padding: 0; justify-content: center; }
  #view-ask:has(.turn) .fab .fab-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1240px) { .fab { right: calc(50% - 410px - 200px); } }
.today h2.sec .how { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }
/* touch: helper links and small text buttons get a 44px target */
@media (max-width: 720px), (pointer: coarse) {
  .how, .see-sample, .jump { display: inline-flex; align-items: center; min-height: var(--tap); }
  .jump { margin-top: -10px; margin-bottom: 0; }
  details.read summary, .alert details summary, .biz-weeks summary, #biz-body details summary { min-height: var(--tap); display: flex; align-items: center; }
  .priv button { min-height: var(--tap); }
  .team-row .ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); width: 100%; gap: var(--s2); }
  .team-row .ctl > select { grid-column: 1 / -1; width: 100%; }
  .team-row .ctl > .act { justify-content: center; }
}
details.read summary { list-style-position: inside; }
/* charts: legible axis labels on phones; legend items never split from their swatch */
@media (max-width: 560px) { .fc-ax, .fc-lbl { font-size: 17px; } }
.fc-key .k-item { display: inline-flex; align-items: center; gap: 6px; margin: 0 var(--s3) 0 0; }
.fc-key .k-item > span { margin-left: 0 !important; }
.biz-chart { margin: var(--s4) 0; box-shadow: none; }
.biz-summary { font-size: 1.02rem; line-height: 1.55; }
.biz-weeks { margin: 0 0 var(--s3); }
.biz-weeks summary { cursor: pointer; color: var(--blue); font-weight: 650; font-size: var(--t-sm); padding: 6px 0; }
/* the ways to ask: no empty cell at the end of the grid */
@media (min-width: 640px) and (max-width: 1023px) { .t-modes li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .t-modes li:last-child:nth-child(4n+3) { grid-column: span 2; } }
.sample .tile b { font-size: 1.25rem; }
.team-row > [data-report] { border-color: transparent; color: var(--muted); background: transparent; }
.team-row > [data-report]:hover { color: var(--bad); border-color: var(--bad-line); }
/* no layout shift: the footer starts below the fold until a view fills main, and a view stays invisible (not
   collapsed) for the instant its data takes to arrive */
main { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
.settling { visibility: hidden; }
/* on hold: the Ask button reads as unavailable (solid grey, no beckoning pulse) instead of a see-through glitch */
.fab:disabled { background: var(--muted); opacity: 1; box-shadow: 0 6px 18px rgba(5,8,23,.18); }
.fab:disabled::after { animation: none; }
/* round 2 */
/* headings that carry a chip wrap naturally (balance would split "Your business / data") */
h2:has(.chip), h3:has(.chip), h2:has(.badge) { text-wrap: wrap; }
/* collapsible sections keep a visible disclosure marker */
details.read summary, .alert details summary, .biz-weeks summary, #biz-body details summary { list-style: none; }
details.read summary::-webkit-details-marker, .alert details summary::-webkit-details-marker, .biz-weeks summary::-webkit-details-marker, #biz-body details summary::-webkit-details-marker { display: none; }
details.read summary::before, .alert details summary::before, .biz-weeks summary::before, #biz-body details summary::before {
  content: "▸"; display: inline-block; width: 1em; margin-right: 4px; transition: transform .15s; }
details.read[open] > summary::before, .alert details[open] > summary::before, .biz-weeks[open] > summary::before, #biz-body details[open] > summary::before { transform: rotate(90deg); }
#biz-body details summary { cursor: pointer; color: var(--blue); font-weight: 650; font-size: var(--t-sm); padding: 6px 0; }
/* data-type scope chips: real 44px toggles, the box centered with its label, the chosen ones filled */
#biz-body .chips label.chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: var(--tap); padding: 0 14px 0 12px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); font-weight: 500; cursor: pointer; }
#biz-body .chips label.chip input { margin: 0; }
#biz-body .chips label.chip:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
/* file pickers look like the secondary button */
input[type="file"] { padding: 6px; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; min-height: 32px; margin-right: 12px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--blue); color: var(--blue); }
/* team controls: three equal buttons on one row */
.team-row .ctl > .act { white-space: nowrap; padding-left: 8px; padding-right: 8px; justify-content: center; }
/* the security log reads like the wallet history on phones */
@media (max-width: 480px) {
  #seclog-card table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #seclog tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "what net" "date date"; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  #seclog td { border: 0; padding: 0; }
  #seclog td:nth-child(1) { grid-area: date; color: var(--muted); font-size: var(--t-xs); }
  #seclog td:nth-child(2) { grid-area: what; }
  #seclog td:nth-child(3) { grid-area: net; }
}
/* a reply being written holds a screen of room, so the text grows into it instead of pushing the page (no layout shift) */
.reply.live { min-height: min(70vh, 640px); }
#biz-body .sev { vertical-align: 1px; margin-right: 4px; }
.fc-svg { overflow: visible; }
/* round 3 */
@media (max-width: 560px) { .fc-ax, .fc-lbl { font-size: 20px; } }
@media (max-width: 420px) {
  .co-facts dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: var(--s3); }
  .co-facts dt:first-child { margin-top: 0; }
  .co-facts dd { margin-bottom: 0; }
}
.trail { flex-wrap: nowrap; align-items: flex-start; }
.trail .steps { flex: 1; min-width: 0; }
.trail .elapsed { padding-top: 5px; }
.trail .steps li { background: transparent; border-color: var(--line); }
/* home: the welcome holds the screen while today's filings load, so the disclaimer below never jumps */
.welcome { min-height: calc(100svh - 160px); }
.link { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1100px) { .link { padding: 6px 6px; font-size: .88rem; } }
.ev-cost { flex-wrap: wrap; row-gap: 0; }
.ev-free { color: var(--green); font-size: var(--t-xs); font-weight: 650; }
.inline-ask textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trail .jump { margin: 0 0 0 auto; padding: 4px 0 4px var(--s2); white-space: nowrap; flex: none; }
/* the timer's slot and the Go deeper link share one fixed width, so the steps never re-wrap when the answer finishes */
.progress .elapsed, .trail .elapsed, .trail .jump { flex: 0 0 104px; width: 104px; text-align: right; justify-content: flex-end; margin-left: 0; }
.brief-card .item .hint { white-space: nowrap; }
@media (max-width: 360px) { .inline-ask { padding-left: 12px; } .inline-ask .price { font-size: .72rem; } }
/* Founder tracker: UK, EU and Japan filings beside the SEC download (decisions #63, #66-#69). */
.gl-title { margin: var(--s3) 0 var(--s1); font-size: 1rem; }
.gl-row { padding: var(--s2) 0; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.gl-row p { margin: 2px 0; }

/* ---------- Fate Radar and Path to the top (#53, #70): home, Account → company, inside answers ---------- */
.fr-grid { display: grid; gap: var(--s4); }
.fr-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5) var(--s5) var(--s4);
  box-shadow: var(--shadow); overflow: hidden; text-align: start; }
.fr-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.fr-path::before { background: linear-gradient(90deg, var(--ink), var(--blue)); }
.fr-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.fr-eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 750; color: var(--blue); }
.fr-chip { font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface); }
.fr-chip.fr-strong { color: var(--green); border-color: var(--green-line); background: var(--green-bg); }
.fr-chip.fr-moderate { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
.fr-chip.fr-thin, .fr-chip.fr-too { color: var(--amber); border-color: var(--amber-line); background: var(--amber-bg); }
.fr-title { font-weight: 600; font-size: clamp(1.25rem, 3.6vw, 1.55rem); line-height: 1.22; letter-spacing: -.01em; margin: var(--s3) 0 var(--s1); }
.fr-card h4 { font-size: var(--t-sm); margin: var(--s5) 0 var(--s2); color: var(--fg); }
.fr-sub { color: var(--muted); font-size: var(--t-sm); margin: var(--s1) 0 0; display: block; }
.fr-loose { color: var(--amber); }
.fr-spectrum { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; margin: var(--s4) 0 0; background: var(--panel); }
.fr-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fr-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); grid-template-areas: "lbl bar" "lbl num"; column-gap: var(--s3); row-gap: 2px; align-items: center; }
.fr-lbl { grid-area: lbl; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.fr-bar { grid-area: bar; position: relative; height: 12px; border-radius: var(--r-pill); background: var(--panel); overflow: hidden; }
.fr-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--r-pill); min-width: 2px; }
.fr-ci { position: absolute; inset-block: 0; border-radius: var(--r-pill); opacity: .28; }
.fr-num { grid-area: num; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .fr-row { grid-template-columns: 1fr; grid-template-areas: "lbl" "bar" "num"; } }
.fr-grew .fr-fill, .fr-grew .fr-ci, .fr-spectrum .fr-grew { background: var(--green); }
.fr-surv .fr-fill, .fr-surv .fr-ci, .fr-spectrum .fr-surv { background: #5aa47c; }
.fr-acq .fr-fill, .fr-acq .fr-ci, .fr-spectrum .fr-acq { background: var(--blue); }
.fr-del .fr-fill, .fr-del .fr-ci, .fr-spectrum .fr-del { background: #c98a1a; }
.fr-stop .fr-fill, .fr-stop .fr-ci, .fr-spectrum .fr-stop { background: var(--faint); }
.fr-bk .fr-fill, .fr-bk .fr-ci, .fr-spectrum .fr-bk { background: var(--bad); }
.fr-note { color: var(--muted); font-size: .78rem; margin: var(--s2) 0 0; }
.fr-diffs, .fr-ex, .fr-self ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.fr-diffs li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r); background: var(--blue-soft); }
.fr-diffs li b { font-size: var(--t-sm); }
.fr-diffs li > span { font-size: .8rem; color: var(--muted); }
.fr-p { font-variant-numeric: tabular-nums; }
.fr-assoc { font-size: .78rem; color: var(--muted); margin: var(--s2) 0 0; padding-inline-start: 10px; border-inline-start: 3px solid var(--blue-line); font-style: italic; }
.fr-self { margin-top: var(--s4); padding: var(--s3) 14px; border: 1px dashed var(--line-strong); border-radius: var(--r); }
.fr-self h4 { margin-top: 0; font-weight: 650; color: var(--muted); }
.fr-self li { font-size: .82rem; }
.fr-ex li, .fr-paths li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.fr-co { font-weight: 650; }
.fr-st { font-size: .8rem; font-weight: 650; }
.fr-st.ok { color: var(--green); } .fr-st.bad { color: var(--bad); }
.fr-links { font-size: .8rem; color: var(--muted); }
.fr-links a { font-weight: 600; text-decoration: none; }
.fr-links a:hover { text-decoration: underline; }
.fr-ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.fr-tile { position: relative; background: var(--panel); border-radius: var(--r); padding: var(--s3) var(--s3) 10px; display: grid; gap: 2px; }
.fr-tile b { font-size: clamp(1rem, 3.4vw, 1.25rem); font-variant-numeric: tabular-nums; }
.fr-tile span:last-child { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.fr-step { position: absolute; inset-block-start: 8px; inset-inline-end: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); color: var(--blue);
  font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.fr-paths { list-style: none; margin: 0; padding: 0; counter-reset: lead; }
.fr-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; font-weight: 600; color: var(--fg); }
.fr-moves { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fr-move { font-size: .74rem; padding: 2px 9px; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue); font-weight: 650; }
.fr-src { margin-top: var(--s4); }
.fr-src summary { cursor: pointer; color: var(--blue); font-weight: 650; font-size: var(--t-sm); min-height: var(--tap); display: flex; align-items: center; }
.fr-ev { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s2); text-align: left; }
.fr-ev p { margin: 4px 0 var(--s2); }
.fr-foot { font-size: .74rem; color: var(--muted); margin: var(--s3) 0 0; }
.fr-few .fr-title { font-size: 1.2rem; }
.fr-home { margin-top: var(--s2); }
.fr-home h2.sec a { text-transform: none; }
.fr-tease { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: var(--s6) 22px; margin-top: var(--s5); position: relative; overflow: hidden; }
.fr-tease::after { content: ""; position: absolute; inset-block-start: -40px; inset-inline-end: -40px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,115,255,.55), rgba(61,115,255,0) 70%); pointer-events: none; }
.fr-tease .fr-eyebrow { color: var(--blue-on-ink); }
.fr-tease h2 { font-weight: 600; font-size: clamp(1.35rem, 4vw, 1.7rem); line-height: 1.2; margin: var(--s2) 0; color: #fff; }
.fr-tease p { color: var(--on-ink-muted); margin: 0 0 var(--s4); font-size: .95rem; max-width: 56ch; }
.fr-with { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: var(--t-sm); margin: 0 0 var(--s3); }
.fr-form { margin-bottom: var(--s4); }
.fr-more summary { cursor: pointer; color: var(--blue); font-weight: 500; font-size: var(--t-xs); min-height: var(--tap); display: flex; align-items: center; }
.fr-full { margin-top: var(--s2); }
.fr-answer { margin: var(--s5) 0 var(--s2); }
.fr-answer .fr-card { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .fr-fill { animation: frGrow .7s cubic-bezier(.2,.7,.2,1) both; transform-origin: left; }
  [dir="rtl"] .fr-fill { transform-origin: right; }
  .fr-card { animation: rise .45s ease both; }
}
@keyframes frGrow { from { transform: scaleX(0); } to { transform: none; } }
.fr-more-link { margin: var(--s3) 0 0; font-weight: 500; font-size: var(--t-xs); }
.fr-more-link a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); gap: 6px; }
.fr-tile b { padding-inline-end: 20px; }
@media (max-width: 480px) {
  .fr-ms { grid-template-columns: 1fr; gap: 6px; }
  .fr-tile { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 10px 12px; }
  .fr-step { position: static; }
  .fr-tile b { padding-inline-end: 0; white-space: nowrap; font-size: 1.05rem; }
  .fr-tile span:last-child { font-size: .8rem; }
}

/* The menu keeps its place from page to page: the current page changes colour and gains a line, not width (measured in CI). */
nav [data-go][aria-current="page"], #nav-links [aria-current="page"] { font-weight: inherit !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Text and action links stay small and light on every screen. */
.alert details summary { color: var(--blue); font-size: var(--t-xs); font-weight: 500; }
.custom-amount input { flex: 1 1 280px; width: auto; max-width: 340px; }
.custom-amount button { flex: none; }
.biz-weeks summary, .priv button, .fcard .go, .deeper > button span.go { font-weight: 500; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
@media (max-width: 640px) {
  .custom-amount input { flex: 1 1 100%; max-width: none; }
  .custom-amount button { flex: 1 1 100%; }
  .input-narrow { max-width: none; }
  #question { min-height: calc(2lh + 22px); }
}
/* The answer: links stay small and light; labels sit level with their bars. */
.jump { font-size: var(--t-xs); font-weight: 500; }
.fr-links a { font-weight: 500; }
.fr-src > summary { font-size: var(--t-xs); font-weight: 500; }
.fr-chip { font-weight: 600; }
.fr-lbl { align-self: start; }
.replay-card .t { font-weight: 600; }
/* A replay's title and setup come from the server in English for now: each keeps its own direction, so the full stop stays at the end. */
.replay-card .t, .replay-card .s { unicode-bidi: plaintext; }
/* Part-way through an answer: the steps and the timer sit level; a phone gives the steps the full width, so a step never wraps inside its pill. */
.progress, .trail { align-items: center; margin-bottom: var(--s3); }
.progress .steps, .trail .steps { margin-bottom: 0; }
.progress .elapsed, .trail .elapsed { align-self: center; padding-top: 0; }
bdi.form { white-space: nowrap; }
@media (max-width: 640px) {
  .progress, .trail { flex-wrap: wrap; row-gap: 4px; }
  .progress .steps, .trail .steps { flex: 1 1 100%; }
  .progress .elapsed, .trail .elapsed, .trail .jump { flex: 0 0 auto; width: auto; min-height: 32px; display: inline-flex; align-items: center; margin: 0; margin-inline-start: auto; padding: 0; }
}
/* Dialogs: the edges match, the buttons fill the row, and when they stack the action comes first. */
dialog form > :last-child { margin-bottom: 0; }
dialog .row { flex-wrap: wrap-reverse; }
dialog .row > button { flex: 1 1 auto; }
#quote .mt3 a, .brief-card .item a { font-size: var(--t-xs); font-weight: 500; text-decoration: none; }
#quote .mt3 a:hover, .brief-card .item a:hover { text-decoration: underline; }
#legal-list a { font-size: var(--t-sm); font-weight: 500; }

/* What if (decision #138) */
#whatif h4 { font-size: var(--t-sm); font-weight: 650; margin: var(--s4) 0 var(--s2); color: var(--fg); }
#whatif .grid2 .hint { display: block; margin-top: 4px; }
#wi-fields { margin-top: var(--s2); }
.wi-working { margin: var(--s2) 0 0; padding-inline-start: var(--s5); }
.wi-working li { margin-bottom: 6px; }
#wi-missing ul { margin: var(--s2) 0 0; padding-inline-start: var(--s5); }
#whatif { overflow-wrap: anywhere; }
#whatif .stat { min-width: 0; }
#whatif .stat b { font-size: 1.1rem; }
#whatif .list li > div { flex: 1 1 200px; min-width: 0; }
#whatif details summary { font-weight: 500; }