/* The working screen: one window, no page scroll. Filters on the left, a virtual grid in the middle, the opened SKU on the right. */
body.wbpage { height: 100dvh; overflow: hidden; }
body.wbpage .foot, body.wbpage .upsell { display: none; }
main.app { flex: 1; min-height: 0; max-width: none; width: 100%; padding: 0 14px 10px; display: flex; flex-direction: column; margin: 0; }
.nav { padding-top: 8px !important; padding-bottom: 8px !important; }

/* ---- start */
.start { overflow: auto; flex: 1; display: grid; place-items: start center; padding-top: 4vh; }
.startcard { width: min(860px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 26px; box-shadow: var(--shadow); }
.startcard h1 { font-size: 1.7rem; margin: 0 0 6px; } .startcard .lead { margin: 0 0 12px; max-width: 70ch; }
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0; } .zone h3 { margin: 0 0 4px; font-size: .98rem; } .zone .opt { font-size: .72rem; font-family: var(--sans); color: var(--mut); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; margin-left: 4px; }
.startcard .jdrop { padding: 16px; margin: 0; }
.preview { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin: 10px 0; } .preview p { margin: 4px 0; } .preview dl { display: grid; grid-template-columns: 130px 1fr; gap: 3px 10px; margin: 6px 0; font-size: .88rem; } .preview dt { color: var(--mut); } .preview dd { margin: 0; } .preview .warn { color: var(--bad); }
.busy { display: flex; align-items: center; gap: 10px; color: var(--mut); } .spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--brand2); border-radius: 50%; animation: sp 0.8s linear infinite; display: inline-block; } @keyframes sp { to { transform: rotate(360deg); } }

/* ---- the workbench frame */
.wb { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.wb[hidden], .start[hidden] { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; font-size: .82rem; white-space: nowrap; }
.filebtn { cursor: pointer; }
.prio { display: flex; gap: 4px; margin-left: auto; align-items: center; } .prio button { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: 4px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.prio button.on { background: var(--btn); color: var(--on-brand); border-color: transparent; }
.ldot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mut); }
.ldot-real { background: var(--ok); } .ldot-estimated { background: var(--brand2); } .ldot-synthetic { background: var(--mut); } .ldot-simulated { background: #c8892b; } .ldot-sandbox { background: #2aa3ad; } .ldot-notbuilt, .ldot-unverified { background: #8a5a9a; }
.fchip .ldot { position: static; }

.wb-work { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; } .wb-work[hidden], .res[hidden] { display: none; }
.wb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 6px; }
.wb-main, .wb-side { background: var(--card); border: 1px solid var(--line); border-radius: 14px; min-height: 0; }
/* ---- above the list */
.wb-strip { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-height: 34px; }
.qcs { display: flex; gap: 6px; flex-wrap: wrap; }
.qc { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 5px 14px; font: inherit; font-size: .9rem; cursor: pointer; }
.qc em { font-style: normal; color: var(--mut); font-variant-numeric: tabular-nums; } .qc.on { background: var(--btn); color: var(--on-brand); border-color: transparent; } .qc.on em { color: inherit; opacity: .85; }
.habit1 { margin: 0; font-size: .92rem; flex: 1; min-width: 260px; } .habit1 .mini { margin-left: 4px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 2px; background: var(--card); }
.seg button { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .92rem; padding: 4px 16px; border-radius: 99px; cursor: pointer; } .seg button.on { background: var(--btn); color: var(--on-brand); font-weight: 600; }
.plabel { align-self: center; color: var(--mut); font-size: .82rem; margin-right: 4px; }

/* ---- the grid */
.wb-main { display: flex; flex-direction: column; overflow: hidden; }
.gh { display: grid; align-items: center; height: 30px; flex: none; border-bottom: 1px solid var(--line); font-size: .76rem; color: var(--mut); padding: 0 6px; }
.gh button { border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; } .gh button.on { color: var(--ink); font-weight: 600; } .gh button:hover { color: var(--ink); }
.gv { flex: 1; min-height: 0; overflow: auto; position: relative; outline: none; } .gs { position: relative; } .gr { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.r { display: grid; align-items: center; height: 32px; padding: 0 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: .84rem; cursor: default; position: relative; }
.r:hover { background: color-mix(in srgb, var(--brand2) 5%, transparent); } .r.focus { background: color-mix(in srgb, var(--brand2) 12%, var(--card)); box-shadow: inset 3px 0 0 var(--brand2); } 
.r.no { opacity: .55; } .r > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding-right: 6px; }
.c-name b { display: block; font-weight: 600; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; } .c-name small { display: block; color: var(--mut); font-size: .72rem; line-height: 1.1; }
.c-ua, .c-stake, .c-gain { font-variant-numeric: tabular-nums; } .c-stake, .c-gain { text-align: right; } .c-gain.pos { color: var(--ok); } .c-gain.neg { color: var(--bad); } .c-amz { color: var(--mut); font-size: .78rem; } .dim { color: var(--mut); font-size: .78rem; }
.ac { display: inline-flex; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 11%, transparent); border-radius: 99px; padding: 1px 8px; font-size: .78rem; white-space: nowrap; color: var(--ink); } .ac i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.flag { color: #c8892b; margin-left: 4px; } .same { color: var(--mut); margin-left: 4px; }
.sd { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 1px solid var(--mut); } .sd.approved, .sd.usual, .sd.changed { background: var(--ok); border-color: var(--ok); } .sd.rejected { background: var(--bad); border-color: var(--bad); }
.r.ghost .sk { display: block; height: 10px; width: 60%; border-radius: 6px; background: var(--line); opacity: .6; }
.none { padding: 30px; text-align: center; color: var(--mut); }

/* ---- the side panel */
.wb-side { display: flex; flex-direction: column; overflow: hidden; }
.tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--line); flex: none; } .tabs button { border: 0; background: transparent; color: var(--mut); font: inherit; font-size: .84rem; padding: 6px 10px; border-radius: 8px 8px 0 0; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand2); } .tabs em { font-style: normal; font-size: .72rem; color: var(--mut); } .tabs .x { margin-left: auto; display: none; font-size: 1.2rem; }
.tabbody { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.pad { padding: 8px 0; }
.item header h3 { margin: 0; font-size: 1.05rem; } .item header p { margin: 2px 0 6px; } .said { font-size: .82rem; font-weight: 600; } .said.ok { color: var(--ok); } .said.no { color: var(--bad); }
.ln { display: grid; grid-template-columns: 86px 1fr; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: .86rem; align-items: baseline; } .ln > b { color: var(--mut); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .ln em { font-style: normal; color: var(--mut); font-size: .82rem; }
.ln.better { background: color-mix(in srgb, var(--ok) 7%, transparent); border-radius: 8px; padding-left: 6px; margin-left: -6px; } .ln.amz { color: var(--mut); } .ln.amz > b { text-transform: none; letter-spacing: 0; }
.gap .pos { color: var(--ok); } .gap .neg { color: var(--bad); } .close { font-size: .76rem; color: #8a5a00; }
.decide { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; } .decide button { border-radius: 99px; padding: 5px 12px; font: inherit; font-size: .84rem; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.decide .ok-btn { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); color: color-mix(in srgb, var(--ok) 70%, #000); } .decide .ok-btn.on { background: var(--ok); color: #fff; } .decide .us-btn.on { background: var(--brand2); color: #fff; } .decide .no-btn.on { background: var(--bad); color: #fff; border-color: var(--bad); }
.chg { font-size: .82rem; color: var(--mut); } .chg select { font: inherit; font-size: .82rem; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.evid { margin-top: 6px; } .evid .opts { font-size: .78rem; } .costq { display: block; margin-top: 8px; font-size: .82rem; } .costq input { width: 56px; font: inherit; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.sum .ib { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: color-mix(in srgb, var(--brand2) 5%, var(--card)); } .sum .ib small { display: block; color: var(--mut); font-size: .76rem; } .sum .ib b { font-family: var(--serif); font-size: 1.5rem; display: block; line-height: 1.15; } .sum .ib em { font-style: normal; color: var(--mut); font-size: .78rem; }
.sum .amz, .sum .habit, .sum .agentnote { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; font-size: .84rem; } .sum .amz { background: color-mix(in srgb, #c8892b 7%, var(--card)); border-color: color-mix(in srgb, #c8892b 40%, var(--line)); } .sum .habit { background: color-mix(in srgb, var(--brand2) 6%, var(--card)); } .sum p { margin: 4px 0; }
.sum .agentnote { border-style: dashed; } .sum .agentnote ul { margin: 4px 0 0; padding-left: 18px; } .sum .agentnote li { margin: 3px 0; }
.kk { display: grid; gap: 6px; } .kk > div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: color-mix(in srgb, var(--brand2) 6%, var(--card)); } .kk small { display: block; color: var(--mut); font-size: .76rem; } .kk b { font-family: var(--serif); font-size: 1.4rem; line-height: 1.15; } .kk b.pos { color: var(--ok); } .kk b.neg { color: var(--bad); } .kk em { display: block; font-style: normal; color: var(--mut); font-size: .76rem; }
.results h4 { margin: 10px 0 6px; font-size: .9rem; } .replay { font-size: .84rem; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 10px; }
.log { list-style: none; padding: 0; margin: 0 0 8px; font-size: .8rem; } .log li { padding: 2px 0; } .log time { color: var(--mut); font-variant-numeric: tabular-nums; margin-right: 6px; }
.jc.wide { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; } .jc h3 { margin: 0 0 4px; font-size: .92rem; } .jc .cnt { font-size: .74rem; background: var(--line); border-radius: 99px; padding: 1px 8px; font-family: var(--sans); } .jc.stopped { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); background: color-mix(in srgb, var(--bad) 6%, var(--card)); }
.plist { list-style: none; margin: 4px 0; padding: 0; font-size: .82rem; } .plist li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); } .plist em { font-style: normal; color: var(--mut); text-align: right; }
.final { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: .84rem; }
.guards li { padding: 3px 0; } .guards b { font-size: .84rem; } .guards p { font-size: .76rem; }

/* ---- the bottom bar and the batch popover */
.wb-bottom { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 5px 12px; font-size: .84rem; }
.wb-bottom .cnt { font-variant-numeric: tabular-nums; } .wb-bottom .keys { color: var(--mut); font-size: .76rem; margin-left: auto; } .wb-bottom .batch { display: flex; gap: 6px; } .wb-bottom .batch button { padding: 4px 12px; font-size: .84rem; border-radius: 99px; }
.pop { position: fixed; inset: 0; background: rgba(15, 25, 50, .35); display: grid; place-items: center; z-index: 50; } .pop[hidden] { display: none; }
.popcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; width: min(440px, 92vw); box-shadow: var(--shadow); } .popcard h3 { margin: 0 0 8px; } .popcard p { margin: 6px 0; } .popcard .cta { margin-top: 12px; display: flex; gap: 8px; }
.lbl { font-size: .72rem; } kbd { font: inherit; font-size: .72rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 4px; color: var(--mut); background: var(--card); }
.mini { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: 2px 10px; font: inherit; font-size: .8rem; cursor: pointer; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; font-size: .82rem; }
details.first { margin: 8px 0 0; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; font-size: .86rem; } details.first summary { cursor: pointer; color: var(--mut); } details.first ol { margin: 6px 0 2px; padding-left: 18px; }

/* ---- smaller windows: the filters and the side panel become panels you open */
@media (max-width: 1180px) { .wb-body { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 820px) {
  .wb-body { grid-template-columns: minmax(0, 1fr); } .wb-side { display: none; } .wb-side.open { display: flex; position: fixed; inset: 56px 0 0 0; z-index: 45; border-radius: 0; } .tabs .x { display: block; }
  .prio { margin-left: 0; } .zones { grid-template-columns: 1fr; } .preview dl { grid-template-columns: 1fr; }
}

/* ---- round 2 of the workbench: nothing clipped, readable sizes, a checkbox that is not a billboard */
.c-better { display: flex; align-items: center; } .flag, .same { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; font-size: .72rem; line-height: 1; flex: none; }
.flag { background: color-mix(in srgb, #c8892b 22%, var(--card)); color: #7a4d00; } .same { background: var(--line); color: var(--ink); }
.c-gain.pos { color: color-mix(in srgb, var(--ok) 62%, #000); } .c-gain.neg { color: color-mix(in srgb, var(--bad) 75%, #000); }
:root[data-theme="dark"] .c-gain.pos { color: var(--ok); } :root[data-theme="dark"] .c-gain.neg { color: var(--bad); }
.c-name small, .gh, .ln > b, .tabs em, kbd, .lbl, .guards p, .guards em, .kk small, .kk em, .sum .ib small, .sum .ib em, .log, .plist, .fchip, .dim, .c-amz, .ac, .evid .opts, .costq, .chg { font-size: max(.75rem, 12px); }
.gap .pos { color: color-mix(in srgb, var(--ok) 62%, #000); } .gap .neg { color: color-mix(in srgb, var(--bad) 75%, #000); }
:root[data-theme="dark"] .gap .pos { color: var(--ok); } :root[data-theme="dark"] .gap .neg { color: var(--bad); }
.mini, .tabs button { min-height: 24px; }
@media (min-width: 1500px) { .wb-body { grid-template-columns: minmax(0, 1fr) 420px; } }

.opts th small { color: color-mix(in srgb, var(--ok) 62%, #000); } :root[data-theme="dark"] .opts th small { color: var(--ok); }

/* ---- a small screen: one line of numbers you can slide, a list of name, value and proposal */
@media (max-width: 820px) {
  .r .c-amz, .r .c-usual, .r .c-gain { display: none; }
  .wb-top { padding: 4px 8px; } main.app { padding: 0 8px 6px; } .nav { padding-top: 4px !important; padding-bottom: 4px !important; }
  .prio button { padding: 3px 10px; font-size: .8rem; white-space: nowrap; }
}

/* ---- bigger type for a room: the work view is read from a distance */
.r { height: 32px; font-size: .9rem; } .c-name small { font-size: .78rem; } .gh { font-size: .82rem; } .ac { font-size: .84rem; }
.lh { margin: 14px 0 4px; font-size: .86rem; }

/* ---- the results view */
.res { flex: 1; min-height: 0; overflow: auto; }
.res-in { max-width: 1180px; margin: 0 auto; padding: 18px 8px 24px; }
.res h2 { font-size: 1.9rem; margin: 0 0 6px; } .res-sub { margin: 0 0 18px; font-size: 1.02rem; color: var(--mut); max-width: 90ch; } .res-sub b { color: var(--ink); }
.res-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rc { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.rc h3 { margin: 0; font-size: 1.15rem; } .rn { margin: 4px 0 14px; color: var(--mut); font-size: .92rem; min-height: 2.6em; }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.pair small { color: var(--mut); font-size: .84rem; margin-bottom: 2px; }
.pair b { font-family: var(--serif); font-size: clamp(1.5rem, 2.1vw, 2.1rem); line-height: 1.05; font-weight: 600; white-space: nowrap; } .pair small { min-height: 2.4em; display: flex; align-items: flex-end; }
.pa b { color: var(--mut); } .pb b { color: var(--ink); } .arrow { font-style: normal; color: var(--mut); font-size: 1.5rem; padding-bottom: 6px; }
.un { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--mut); }
.rd { margin: 14px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl { font-size: 1.15rem; font-weight: 700; border-radius: 99px; padding: 3px 14px; } .dl.pos { color: color-mix(in srgb, var(--ok) 62%, #000); background: color-mix(in srgb, var(--ok) 14%, var(--card)); } .dl.neg { color: color-mix(in srgb, var(--bad) 75%, #000); background: color-mix(in srgb, var(--bad) 12%, var(--card)); }
:root[data-theme="dark"] .dl.pos { color: var(--ok); } :root[data-theme="dark"] .dl.neg { color: var(--bad); }
.res-fees { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 16px; padding: 12px 18px; background: color-mix(in srgb, var(--brand2) 5%, var(--card)); font-size: 1rem; } .res-fees p { margin: 6px 0; }
.res-foot { margin-top: 16px; font-size: .86rem; color: var(--mut); } .res-foot p { margin: 6px 0; } .res-foot .nb { border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; }
@media (max-width: 980px) { .res-cards { grid-template-columns: 1fr; } .pair b { font-size: 1.9rem; } .rn { min-height: 0; } .res h2 { font-size: 1.5rem; } }

/* less chrome: the site menu is not needed on the demo, and the story numbers are repeated in the results view */

.res-in { padding-top: 10px; } .res h2 { font-size: 1.7rem; } .res-sub { margin-bottom: 12px; } .rc { padding: 16px 20px; } .rn { margin-bottom: 8px; min-height: 2.4em; } .rd { margin-top: 10px; }
.gh button { min-height: 28px; }
@media (max-width: 820px) {
  .res-in { padding-left: 2px; padding-right: 2px; }
}

/* ---- connecting an account, and sending to it */
.connect-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid color-mix(in srgb, #2aa3ad 45%, var(--line)); background: color-mix(in srgb, #2aa3ad 7%, var(--card)); border-radius: 16px; padding: 12px 18px; margin: 12px 0; }
.connect-cta p { margin: 2px 0 0; color: var(--mut); font-size: .9rem; } .connect-cta b { font-size: 1.05rem; }
.popcard.wide { width: min(720px, 94vw); } .perms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; } .perms h4 { margin: 0 0 4px; font-size: .86rem; } .perms ul { margin: 0; padding-left: 18px; font-size: .86rem; } .perms li { margin: 3px 0; } .perms .never h4 { color: var(--bad); }
.amzchip { border-color: color-mix(in srgb, #2aa3ad 55%, var(--line)); }
.connectbox { border: 1px solid color-mix(in srgb, #2aa3ad 45%, var(--line)); background: color-mix(in srgb, #2aa3ad 7%, var(--card)); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; } .connectbox p { margin: 4px 0 8px; }
.acct { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: .88rem; }
.mini.stop { border-color: var(--bad); color: color-mix(in srgb, var(--bad) 75%, #000); } .mini.on { background: var(--bad); color: #fff; border-color: var(--bad); }
.mini:disabled, .primary.mini:disabled { opacity: .45; cursor: not-allowed; }
.amzb h3 .sent { background: color-mix(in srgb, var(--ok) 22%, var(--card)); }
.feed { list-style: none; margin: 8px 0; padding: 0; font-size: .86rem; } .feed li { padding: 6px 10px; margin: 4px 0; border-radius: 10px; border: 1px solid var(--line); } .feed li.ok { background: color-mix(in srgb, var(--ok) 9%, var(--card)); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); } .feed li.warn { background: color-mix(in srgb, #c8892b 11%, var(--card)); border-color: color-mix(in srgb, #c8892b 50%, var(--line)); }
details.rcs { margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; font-size: .86rem; } details.rcs summary { cursor: pointer; color: var(--mut); padding: 3px 0; } details.rcs ul { list-style: none; margin: 6px 0; padding: 0; } details.rcs li { padding: 3px 0; border-bottom: 1px dashed var(--line); } details.rcs li em { display: block; font-style: normal; color: var(--mut); font-size: .78rem; }
.rs { font-size: .74rem; border-radius: 99px; padding: 0 7px; border: 1px solid var(--line); } .rs.submitted { color: color-mix(in srgb, var(--ok) 62%, #000); } .rs.refused, .rs.failed { color: color-mix(in srgb, var(--bad) 75%, #000); }
@media (max-width: 820px) { .perms { grid-template-columns: 1fr; } .connect-cta { flex-direction: column; align-items: flex-start; } }


/* ---- one bar: the site header holds the logo, the views, the priority, the data menu, the language and the theme */
body.wbpage .nav { max-width: none; padding: 6px 16px !important; flex-wrap: nowrap; gap: 14px; justify-content: flex-start; }
body.wbpage .nav nav { margin-left: auto; flex-wrap: nowrap; } body.wbpage .nav .brand { flex: none; }
.nav-top { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; justify-content: center; }
.nav-top:empty { display: none; }
.nav-top .prio { margin-left: 0; }
.datamenu { position: relative; } .datamenu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-size: .84rem; background: var(--card); white-space: nowrap; } .datamenu summary::-webkit-details-marker { display: none; } .datamenu summary::after { content: '▾'; color: var(--mut); }
.datamenu .dm { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); display: grid; gap: 8px; } .datamenu .dm p { margin: 0; }
.wb { gap: 6px; padding-top: 6px; }
@media (max-width: 1180px) { .plabel { display: none; } .nav-top { gap: 8px; } }
@media (max-width: 820px) { body.wbpage .nav { flex-wrap: wrap; } .nav-top { order: 3; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; } }
/* a slim bar: smaller logo and buttons, and the data menu is a pill, not a card */


body.wbpage .nav { padding: 4px 16px !important; }
details.datamenu { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }


/* ---- the forecast and the conversation, inside one SKU */
.fc, .chat { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; } .fc h4, .chat h4 { margin: 0 0 2px; font-size: .94rem; }
.fchart { width: 100%; height: auto; display: block; color: var(--ink); } .ft { font-size: 9px; fill: currentColor; opacity: .6; }
.lgs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .lg { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: 2px 9px; font: inherit; font-size: .8rem; cursor: pointer; } .lg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .lg em { font-style: normal; color: var(--mut); } .lg.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-weight: 600; }
.ftab { width: 100%; border-collapse: collapse; font-size: .84rem; } .ftab th, .ftab td { text-align: right; padding: 3px 4px; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; } .ftab th:first-child, .ftab td:first-child { text-align: left; } .ftab th { font-weight: 600; } .ftab small { color: var(--mut); font-size: .72rem; }
.cms { max-height: 230px; overflow: auto; display: grid; gap: 6px; margin: 6px 0; } .cm { max-width: 94%; border-radius: 14px; padding: 6px 10px; font-size: .86rem; line-height: 1.35; } .cm p { margin: 0; } .cm.you { justify-self: end; background: var(--btn); color: var(--on-brand); } .cm.ai { background: color-mix(in srgb, var(--brand2) 8%, var(--card)); border: 1px solid var(--line); } .based { display: block; margin-top: 4px; }
.sugs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .cform { display: flex; gap: 6px; } .cform input { flex: 1; min-width: 0; font: inherit; font-size: .86rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); }
.rulebox { margin: 4px 0; font-size: .84rem; border: 1px solid color-mix(in srgb, #8a5a9a 45%, var(--line)); background: color-mix(in srgb, #8a5a9a 8%, var(--card)); border-radius: 10px; padding: 4px 10px; }
details.evid { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 6px; } details.evid summary { cursor: pointer; color: var(--mut); font-size: .86rem; }

/* ---- Seller Central (practice) */
.cen-in { max-width: 1240px; margin: 0 auto; padding: 10px 8px 24px; } .cen h2 { font-size: 1.5rem; margin: 0 0 2px; } .cen h3 { font-size: 1rem; margin: 12px 0 4px; }
.cen-off { max-width: 640px; margin: 10vh auto; text-align: center; } .cen-off p { color: var(--mut); }
.kts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 10px 0; } .kt { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; } .kt small { display: block; color: var(--mut); font-size: .8rem; } .kt b { font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; } .kt em { display: block; font-style: normal; color: var(--mut); font-size: .76rem; }
.cen-cols { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 14px; } .cen-scroll { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cen-t { width: 100%; border-collapse: collapse; font-size: .88rem; } .cen-t th { position: sticky; top: 0; background: var(--card); text-align: left; font-size: .76rem; color: var(--mut); padding: 6px 8px; border-bottom: 1px solid var(--line); } .cen-t td { padding: 5px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: top; } .cen-t td small { display: block; color: var(--mut); font-size: .72rem; } .cen-t .num { text-align: right; font-variant-numeric: tabular-nums; } .cen-t tr.chg { background: color-mix(in srgb, #c8892b 8%, transparent); } .cen-t s { color: var(--mut); }
.tag { display: inline-block; font-size: .72rem; border-radius: 99px; padding: 0 8px; border: 1px solid var(--line); white-space: nowrap; } .tag.fl { border-color: color-mix(in srgb, var(--brand2) 55%, var(--line)); color: color-mix(in srgb, var(--brand2) 72%, #000); } .tag.ext { border-color: color-mix(in srgb, #c8892b 55%, var(--line)); color: #8a5a00; } .tag.prog { border-color: color-mix(in srgb, #2aa3ad 55%, var(--line)); } .tag.done { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); color: color-mix(in srgb, var(--ok) 62%, #000); }
.cen-l { list-style: none; margin: 4px 0; padding: 0; font-size: .86rem; } .cen-l li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
@media (max-width: 980px) { .kts { grid-template-columns: repeat(2, 1fr); } .cen-cols { grid-template-columns: 1fr; } }

/* ---- the journey in the bottom bar, skipping ahead, and the round report */
.wb-bottom .skip { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; } .wb-bottom .skip .ghost { padding: 3px 10px; }
.ffr .big { font-size: 1.2rem; margin: 4px 0; } .ffr .ftab td.num { text-align: right; } .ffr h4 { margin: 10px 0 2px; } .learned { margin: 2px 0; padding-left: 18px; font-size: .92rem; } .ffr { max-height: 92vh; overflow: auto; }
@media (max-width: 1180px) { .steps { display: none; } }

.learn { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; padding: 12px 18px; background: var(--card); } .learn h3 { margin: 0 0 4px; }
.lbs { display: grid; gap: 6px; margin: 8px 0; } .lb { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 2px 8px; } .lb small { grid-row: span 2; color: var(--mut); } .bar { height: 18px; border-radius: 6px; display: flex; align-items: center; padding: 0 6px; font-size: .78rem; min-width: 34px; } .bar.a { background: color-mix(in srgb, var(--mut) 28%, var(--card)); } .bar.b { background: color-mix(in srgb, var(--ok) 55%, var(--card)); color: #08310f; font-weight: 600; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 3px; } .key.a { background: color-mix(in srgb, var(--mut) 40%, var(--card)); } .key.b { background: color-mix(in srgb, var(--ok) 60%, var(--card)); }

/* ---- the first screen: who it is for, what it does, how to start */
.startcard { width: min(1020px, 100%); } .eyebrow { margin: 0 0 4px; color: var(--brand2); font-weight: 600; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; }
.startcard h1 { font-size: 2.1rem; line-height: 1.15; max-width: 22ch; } .startcard .lead { max-width: 80ch; font-size: 1.02rem; }
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; padding: 0; margin: 12px 0; } .how li { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: color-mix(in srgb, var(--brand2) 5%, var(--card)); } .how b { display: block; } .how span { color: var(--mut); font-size: .86rem; }
.paths { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; align-items: stretch; margin: 12px 0; } .path { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; } .path h3 { margin: 0 0 4px; font-size: 1.05rem; } .path p { margin: 4px 0 10px; color: var(--mut); font-size: .92rem; }
.path.main { border-color: color-mix(in srgb, #2aa3ad 50%, var(--line)); background: color-mix(in srgb, #2aa3ad 7%, var(--card)); display: flex; flex-direction: column; justify-content: space-between; } .path.main .primary { align-self: flex-start; font-size: 1.02rem; padding: 10px 20px; }
.zone h4 { margin: 0 0 4px; font-size: .9rem; }
.who { list-style: none; margin: 4px 0; padding: 0; } .who li { padding: 4px 0; border-bottom: 1px dashed var(--line); } .who p { margin: 2px 0 0; font-size: .8rem; color: var(--mut); }
@media (max-width: 820px) { .how { grid-template-columns: 1fr 1fr; } .paths { grid-template-columns: 1fr; } .startcard h1 { font-size: 1.6rem; } }

/* ---- fixes from the walk: one row for the bar, steps as plain text, a wider side panel */
.nav-top { flex-wrap: nowrap; } .nav-top > * { flex: none; } .seg button { white-space: nowrap; } .prio button { white-space: nowrap; }
@media (max-width: 1500px) { .plabel { display: none; } }
.steps { display: flex; gap: 12px; margin: 0 auto 0 10px; font-size: .84rem; color: var(--mut); } .steps .st { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .steps .st i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: .7rem; background: transparent; }
.steps .st.done { color: var(--ink); } .steps .st.done i { background: var(--ok); border-color: var(--ok); color: #fff; } .steps .st.cur { color: var(--ink); font-weight: 600; } .steps .st.cur i { border-color: var(--brand2); color: var(--brand2); }
@media (min-width: 1240px) { .wb-body { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (min-width: 1500px) { .wb-body { grid-template-columns: minmax(0, 1fr) 460px; } }
.startcard h1 { max-width: 30ch; font-size: 2rem; } .startcard { padding-top: 16px; } .how { margin: 8px 0; } .startcard .lead { margin-bottom: 8px; }
.cen-scroll { max-height: 40vh; } .cen-in { padding-bottom: 40px; }

.via { font-size: .74rem; color: var(--mut); }
/* the opened SKU: tighter, so the forecast is in view without scrolling */
.item .ln { padding: 3px 0; gap: 6px; } .item .ln em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item header h3 { font-size: 1rem; } .item header p { margin: 0 0 2px; } .item .decide { margin: 4px 0; } .item .fc { margin-top: 6px; padding-top: 6px; } .item .fc > p.small:first-of-type { display: none; }
.tabbody { padding: 8px 12px; }
.wb-bottom { padding: 3px 12px; } .wb-bottom .batch button, .wb-bottom .skip .ghost { padding: 2px 10px; }

:root[data-theme="dark"] .flag { background: color-mix(in srgb, #c8892b 45%, var(--card)); color: #ffe2ab; }
.bar.a { color: var(--ink); } :root[data-theme="dark"] .bar.b { color: #04210a; }
@media (max-width: 820px) { .nav-top { flex-wrap: wrap; gap: 6px; justify-content: flex-start; } .nav-top > * { flex: 0 1 auto; } .seg button { padding: 4px 10px; } .prio button { padding: 3px 9px; } }


/* ======== the simple screen: three live numbers, one list with four choices per row, one panel, one button ======== */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: none; }
.tile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 16px 9px; box-shadow: var(--shadow); min-width: 0; }
.tile small { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: .84rem; } .tile b { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1.1; font-weight: 600; white-space: nowrap; } .tile b .un { font-family: var(--sans); font-size: .95rem; font-weight: 500; color: var(--mut); }
.tile em { display: block; font-style: normal; color: var(--mut); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile em b { display: inline; font-family: var(--sans); font-size: inherit; font-weight: 700; } .tile em .pos { color: color-mix(in srgb, var(--ok) 62%, #000); } .tile em .neg { color: color-mix(in srgb, var(--bad) 75%, #000); }
:root[data-theme="dark"] .tile em .pos { color: var(--ok); } :root[data-theme="dark"] .tile em .neg { color: var(--bad); }
.tile.bump b { animation: bump .7s ease-out; } @keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.09); color: var(--ok); } 100% { transform: scale(1); } }
.dchip { position: absolute; right: 14px; top: 8px; font-size: .95rem; font-weight: 700; border-radius: 99px; padding: 1px 10px; animation: rise 2.4s ease-out forwards; } .dchip.pos { color: color-mix(in srgb, var(--ok) 62%, #000); background: color-mix(in srgb, var(--ok) 16%, var(--card)); } .dchip.neg { color: color-mix(in srgb, var(--bad) 75%, #000); background: color-mix(in srgb, var(--bad) 14%, var(--card)); }
:root[data-theme="dark"] .dchip.pos { color: var(--ok); } :root[data-theme="dark"] .dchip.neg { color: var(--bad); }
@keyframes rise { 0% { opacity: 0; transform: translateY(8px); } 12% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

.wb-strip { min-height: 0; } .wb-strip:empty { display: none; } .habit1 { margin: 0; font-size: .9rem; color: var(--mut); } .habit1 b { color: var(--ink); } .habit1 .lbl { vertical-align: middle; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }

.r { height: 36px; } .c-st { display: grid; place-items: center; } .r.ok { background: color-mix(in srgb, var(--ok) 6%, transparent); }
.c-sug { display: flex; align-items: center; } .c-pick { overflow: visible !important; padding-right: 0 !important; }
.pks { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; background: var(--card); }
.pk { border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: .8rem; padding: 4px 10px; cursor: pointer; white-space: nowrap; } .pk:last-child { border-right: 0; }
.pk:hover:not(:disabled):not(.on) { background: color-mix(in srgb, var(--c) 14%, transparent); }
.pk.sug:not(.on) { box-shadow: inset 0 0 0 2px var(--c); border-radius: 99px; font-weight: 600; }
.pk.on { background: var(--c); color: #fff; font-weight: 700; } .pk:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.panelpick { display: none; margin: 8px 0; } .panelpick .pks { display: flex; } .panelpick .pk { flex: 1; padding: 8px 4px; font-size: .9rem; }

/* the header: logo, one options menu, language, theme */
.nav-top { margin-left: auto; justify-content: flex-end; flex: 0 0 auto; }
.datamenu .dm { width: 300px; } .dmrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .86rem; } .dmrow select { font: inherit; font-size: .84rem; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
body.wbpage .nav nav { margin-left: 0; }

/* the bottom: progress and the one next step */
.wb-bottom { padding: 6px 14px; gap: 14px; } .prog { display: inline-flex; align-items: center; gap: 8px; font-size: .94rem; } .prog b { font-size: 1.05rem; } .pb { display: inline-block; width: 150px; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .pb u { display: block; height: 100%; background: var(--ok); transition: width .35s; }
.nexthint { color: var(--mut); font-size: .84rem; margin-left: auto; } .wb-bottom .cta { padding: 9px 22px; font-size: 1rem; border-radius: 99px; }
.wb-bottom .cta[data-cta] { margin-left: 0; }

/* the selected product, one column, no tabs */
.item header { position: relative; } .item header .x { position: absolute; right: 0; top: 0; display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--ink); }
.item .ln > b { min-width: 0; }

/* windows that open over the screen */
.popcard.xwide { width: min(1100px, 96vw); max-height: 92vh; overflow: auto; } .popcard.cen h3, .popcard.safe h3 { display: flex; align-items: center; gap: 8px; } .popcard .x { margin-left: auto; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--ink); line-height: 1; }
.popcard.safe { max-height: 92vh; overflow: auto; } .sendm .tiny { font-size: .82rem; color: var(--mut); margin: 6px 0 0; } .popcard .lh { margin: 12px 0 4px; font-size: .9rem; }
.popcard.cen .cen-scroll { max-height: 36vh; } .popcard.cen .kts { margin: 8px 0; } .popcard.cen h4 { margin: 10px 0 4px; } .popcard.cen h4 small { color: var(--mut); font-weight: 400; }

/* the first screen: shorter */
.startcard h1 { font-size: 2rem; } .startcard .lead { font-size: 1.02rem; max-width: 70ch; } .paths { margin: 14px 0 8px; }

@media (max-width: 1180px) { .tile b { font-size: 1.6rem; } }
@media (max-width: 820px) {
  .tiles { grid-template-columns: 1fr; gap: 6px; } .tile { padding: 6px 12px; } .tile b { font-size: 1.35rem; display: inline; } .tile small { display: inline-flex; margin-right: 8px; } .tile em { display: inline; margin-left: 6px; }
  .r .c-stake, .r .c-pick { display: none; } .panelpick { display: block; } .item header .x { display: block; } .nexthint, .pb { display: none; }
  .nav-top { flex: 0 0 auto; margin-left: auto; } .wb-bottom .cta { width: auto; }
}

.wb-bottom .cta, .wb-bottom button.primary { margin: 0; } .wb-bottom { min-height: 0; align-items: center; }
.habit1 { line-height: 1.35; } .gh { white-space: nowrap; }
.wb { gap: 6px; }


body #pop.pop { position: fixed !important; inset: 0; z-index: 60 !important; overflow: auto; } body #pop.pop[hidden] { display: none; }
.wb-strip { display: block; } .habit1 { display: block; width: 100%; min-width: 0; flex: none; font-size: .86rem; } .habit1 > span { display: inline; } .habit1 .linkbtn { display: inline; margin-left: 8px; white-space: nowrap; }
body.wbpage header.nav { position: relative; z-index: 55; }
@media (max-width: 820px) {
  body.wbpage .nav { flex-wrap: nowrap; gap: 8px; padding: 4px 10px !important; } body.wbpage .nav .fl-art.fk { --h: 36px !important; } body.wbpage .nav .fl-art.wc { --h: 32px !important; }
  body.wbpage .nav nav { flex-wrap: nowrap; gap: 6px; } .nav-top { order: 0; flex: 0 0 auto; margin-left: auto; } .datamenu summary { padding: 3px 10px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .tile { padding: 6px 8px; border-radius: 12px; } .tile small { display: block; font-size: .75rem; line-height: 1.15; } .tile b { display: block; font-size: 1.15rem; margin-top: 2px; } .tile b .un { font-size: .7rem; } .tile em { display: none; } .dchip { right: 6px; top: 4px; font-size: .72rem; padding: 0 6px; }
  .tile small .ldot { display: none; }
}

.startcard .alt { margin: 8px 0; font-size: .92rem; color: var(--mut); } .startcard .alt .linkbtn { display: inline; }

/* ======== the conversation (left) and the decisions (right) ======== */
.cw { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 38%) minmax(0, 1fr); gap: 10px; }
.tabbar { display: none; }
.chatcol { display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.panel { display: flex; flex-direction: column; gap: 6px; min-height: 0; position: relative; min-width: 0; }
.panel .wb-body { grid-template-columns: minmax(0, 1fr) !important; position: relative; flex: 1; min-height: 0; }
.panel .tile b { font-size: clamp(1.35rem, 2.1vw, 1.9rem); }
.panel .tile { padding: 7px 12px 8px; }
.chead { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); flex: none; }
.chead b { font-family: var(--serif); font-size: 1.05rem; }
.chead .mini { margin-left: auto; }
.aipill { font-size: .76rem; border: 1px solid var(--line); border-radius: 99px; padding: 1px 10px; color: var(--mut); }
.aipill::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mut); margin-right: 6px; }
.aipill.on { color: var(--ink); border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); } .aipill.on::before { background: var(--ok); }
.cscroll { flex: 1; min-height: 0; overflow: auto; scroll-behavior: smooth; }
.msgs { padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 10px; }
.mi { min-width: 0; }

.m.u { display: flex; justify-content: flex-end; } .m.u .b { max-width: 88%; background: color-mix(in srgb, var(--ink) 7%, var(--card)); border-radius: 18px 18px 6px 18px; padding: 8px 14px; white-space: pre-wrap; word-break: break-word; }
.about { display: block; font-size: .74rem; color: var(--mut); margin-bottom: 2px; }
.m.a { display: flex; gap: 10px; align-items: flex-start; } .m.a .av { flex: none; width: 24px; height: 24px; border-radius: 8px; background: #1f2b47; color: #d9bb7a; display: grid; place-items: center; font-size: .85rem; margin-top: 2px; }
.m.a .b { min-width: 0; line-height: 1.5; font-size: .95rem; } .m.a .b p { margin: 0 0 6px; } .m.a .b p:last-child { margin-bottom: 0; } .m.a .b ul { margin: 2px 0 6px; padding-left: 20px; } .m.a .b code { font-size: .86em; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 5px; padding: 0 4px; }
.m.a .based { display: block; margin-top: 4px; }
.m.n { font-size: .84rem; color: var(--mut); padding-left: 34px; } .m.n.warn { color: color-mix(in srgb, #c8892b 70%, var(--ink)); } .m.n.okk { color: color-mix(in srgb, var(--ok) 60%, var(--ink)); }

.tr { display: flex; align-items: center; gap: 8px; margin-left: 34px; font-size: .84rem; color: var(--mut); padding: 1px 0; flex-wrap: wrap; }
.tr .tl { color: var(--ink); } .tr em { font-style: normal; } .tr i { width: 16px; display: inline-grid; place-items: center; font-style: normal; font-size: .8rem; flex: none; } .tr i.ok { color: var(--ok); } .tr i.no { color: var(--mut); } .tr i.bad { color: var(--bad); }
.tr .spin { width: 12px; height: 12px; border-width: 2px; }
.tier { font-size: .68rem; border-radius: 99px; padding: 0 7px; border: 1px solid var(--line); color: var(--mut); white-space: nowrap; margin-left: auto; }
.tier.t-reversible { border-color: color-mix(in srgb, #c8892b 55%, var(--line)); color: #8a5a00; } .tier.t-final { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); color: color-mix(in srgb, var(--bad) 80%, #000); } .tier.t-settings { border-color: var(--bad); color: var(--bad); }
:root[data-theme="dark"] .tier.t-reversible { color: #e8b660; } :root[data-theme="dark"] .tier.t-final { color: #f08a8a; }
details.sub { margin-left: 34px; border-left: 3px solid color-mix(in srgb, var(--brand2) 55%, var(--line)); padding: 2px 0 2px 10px; }
details.sub summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: .86rem; flex-wrap: wrap; } details.sub summary::-webkit-details-marker { display: none; }
details.sub .sg { color: var(--brand2); } details.sub summary em { font-style: normal; color: var(--mut); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } details.sub summary i.ok { color: var(--ok); font-style: normal; }
details.sub .subbody { margin-top: 3px; } details.sub .tr { margin-left: 0; }

.card { margin-left: 34px; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--card); box-shadow: var(--shadow); }
.card .ph { display: flex; align-items: center; gap: 8px; } .card .ph b { font-size: .92rem; } .card .pt { margin: 6px 0 2px; font-weight: 600; }
.card .pl { margin: 4px 0; padding-left: 18px; font-size: .86rem; color: var(--mut); } .card .pl li { margin: 2px 0; }
.card .pa { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .card .pa button { border-radius: 99px; padding: 6px 16px; font: inherit; font-size: .88rem; cursor: pointer; }
.card .pa .ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.card .primary.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.card .hint { margin: 8px 0 0; font-size: .76rem; color: var(--mut); }
.card.perm { border-color: color-mix(in srgb, #c8892b 55%, var(--line)); background: color-mix(in srgb, #c8892b 5%, var(--card)); } .card.perm.final { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); background: color-mix(in srgb, var(--bad) 5%, var(--card)); }
.card.ask .opts { display: grid; gap: 6px; margin: 8px 0; } .opt { text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); padding: 8px 12px; font: inherit; cursor: pointer; display: grid; gap: 1px; }
.opt:hover { border-color: var(--brand2); background: color-mix(in srgb, var(--brand2) 6%, var(--card)); } .opt b { font-size: .92rem; } .opt em { font-style: normal; color: var(--mut); font-size: .8rem; } .opt .recd { font-size: .68rem; color: var(--ok); }
.other { display: flex; gap: 6px; } .other input { flex: 1; min-width: 0; font: inherit; font-size: .88rem; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); }
.card.tiers table, .lvtab { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 8px 0 4px; } .card.tiers th, .card.tiers td, .lvtab th, .lvtab td { text-align: left; padding: 5px 6px; border-bottom: 1px dashed var(--line); vertical-align: top; } .card.tiers th, .lvtab th { font-size: .72rem; color: var(--mut); font-weight: 600; }
.card.tiers td small, .lvtab td small { display: block; color: var(--mut); font-size: .72rem; }
tr.lv-settings td:first-child b { color: var(--bad); } tr.lv-final td:first-child b { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }

.welcome { text-align: center; padding: 18px 6px 4px; } .wlogo { width: 44px; height: 44px; border-radius: 14px; background: #1f2b47; color: #d9bb7a; display: grid; place-items: center; margin: 0 auto 8px; font-size: 1.4rem; }
.welcome h2 { font-size: 1.5rem; margin: 0 0 4px; } .welcome p { margin: 0 auto 6px; color: var(--mut); max-width: 44ch; font-size: .94rem; } .welcome .wnote { font-size: .84rem; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; background: color-mix(in srgb, var(--brand2) 5%, var(--card)); color: var(--ink); }
.wcards { display: grid; gap: 8px; margin-top: 12px; text-align: left; } .wcard { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); padding: 10px 14px; font: inherit; cursor: pointer; display: grid; gap: 2px; }
.wcard:hover { border-color: var(--brand2); box-shadow: var(--shadow); } .wcard b { font-size: .96rem; } .wcard span { color: var(--mut); font-size: .82rem; }

.composer { flex: none; padding: 6px 12px 8px; position: relative; }
.cnext { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px 2px; } .cnext:empty { display: none; }
.chipbtn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 5px 14px; font: inherit; font-size: .86rem; cursor: pointer; } .chipbtn:hover { border-color: var(--brand2); background: color-mix(in srgb, var(--brand2) 7%, var(--card)); }
.cbox { position: relative; border: 1px solid var(--line); border-radius: 20px; background: var(--card); padding: 8px 10px 6px 14px; box-shadow: var(--shadow); } .cbox:focus-within { border-color: var(--brand2); } .cbox.flag { border-color: var(--bad); }
.cbox textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: .95rem; line-height: 1.45; max-height: 150px; padding: 2px 0; }
.crow { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .ckeys { color: var(--mut); font-size: .72rem; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--btn); color: var(--on-brand); font-size: 1rem; cursor: pointer; flex: none; } .send.stop { background: var(--bad); color: #fff; font-size: .8rem; }
.modepill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: 3px 10px; font: inherit; font-size: .82rem; cursor: pointer; } .modepill:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--mut); } .mdot.auto { background: var(--ok); } .mdot.manual { background: #c8892b; } .car { color: var(--mut); font-size: .7rem; }
.modemenu { position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 30; width: min(340px, 92%); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px; } .modemenu[hidden] { display: none; }
.mopt { text-align: left; border: 0; background: transparent; color: var(--ink); border-radius: 10px; padding: 8px 10px; font: inherit; cursor: pointer; display: grid; gap: 2px; } .mopt:hover, .mopt.on { background: color-mix(in srgb, var(--brand2) 9%, transparent); } .mopt span { color: var(--mut); font-size: .8rem; }
.mlink { border: 0; background: transparent; color: var(--accent); text-align: left; padding: 6px 10px; font: inherit; font-size: .82rem; cursor: pointer; text-decoration: underline; }
.cctx:empty { display: none; } .cchip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; border: 1px solid var(--line); border-radius: 99px; padding: 1px 4px 1px 10px; margin-bottom: 4px; background: color-mix(in srgb, var(--brand2) 6%, var(--card)); } .cchip button { border: 0; background: transparent; cursor: pointer; color: var(--mut); font-size: 1rem; line-height: 1; }
.cfoot { margin: 5px 0 0; text-align: center; font-size: .72rem; color: var(--mut); }
.gw { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .84rem; border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; } .gw span { display: flex; gap: 6px; }
.gw.bad { border: 1px solid var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--card)); } .gw.warn { border: 1px solid #c8892b; background: color-mix(in srgb, #c8892b 9%, var(--card)); }
.fnote { font-size: .86rem; border-radius: 10px; padding: 6px 10px; background: color-mix(in srgb, var(--brand2) 6%, var(--card)); } .fnote.warn { background: color-mix(in srgb, #c8892b 10%, var(--card)); border: 1px solid color-mix(in srgb, #c8892b 45%, var(--line)); }

/* the selected product opens over the decisions, like a drawer */
.panel .wb-side { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%); z-index: 20; box-shadow: -8px 0 24px rgba(15, 25, 50, .16); }
.panel .wb-side.open { display: flex; }
.panel .wb-side .item header .x { display: block; }
.wb-bottom .cta:disabled { opacity: .5; cursor: progress; }

@media (max-width: 1000px) {
  .cw { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .tabbar { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
  .tabbar button { flex: 1; border: 0; background: transparent; color: var(--ink); border-radius: 99px; padding: 6px 10px; font: inherit; font-size: .9rem; cursor: pointer; } .tabbar button.on { background: var(--btn); color: var(--on-brand); font-weight: 600; } .tabbar em { font-style: normal; opacity: .8; font-size: .8rem; }
  .cw[data-tab="chat"] .panel, .cw[data-tab="panel"] .chatcol { display: none; }
  .panel .wb-side.open { position: fixed; inset: 56px 0 0 0; width: auto; z-index: 45; border-radius: 0; }
  .ckeys { display: none; }
}
.cbox textarea { border: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 26px; padding: 2px 0 !important; border-radius: 0 !important; display: block; }
.cbox textarea::placeholder { color: var(--mut); opacity: 1; }
.panel .tile em { white-space: normal; line-height: 1.25; min-height: 2.5em; }
.panel .tile { overflow: hidden; }
.nwarn { display: block; margin-top: 8px; font-size: .84rem; border: 1px solid color-mix(in srgb, #c8892b 55%, var(--line)); background: color-mix(in srgb, #c8892b 9%, var(--card)); border-radius: 10px; padding: 6px 10px; line-height: 1.4; }
mark.unv { background: color-mix(in srgb, #c8892b 30%, transparent); color: inherit; border-radius: 4px; padding: 0 3px; text-decoration: underline wavy color-mix(in srgb, #c8892b 80%, #000); text-underline-offset: 2px; }

/* ======== the first screen, before a file: a hero like the home page, the upload, the four steps, what is never read ======== */
.start { display: block; overflow: auto; padding: 0 6px 40px; } .start[hidden] { display: none; }
.sx { max-width: 1120px; margin: 0 auto; }
.sx-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: center; padding: 14px 0 6px; }
.sx h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.1; margin: 10px 0 14px; max-width: 18ch; background: linear-gradient(100deg, #0b3a63 0%, #2f6fe4 55%, #a98df2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; letter-spacing: -.01em; }
:root[data-theme="dark"] .sx h1 { background: linear-gradient(100deg, #e9f0fd 0%, #9ccbff 60%, #c9b8ff 100%); -webkit-background-clip: text; background-clip: text; }
.sx .lead { max-width: 60ch; font-size: 1.04rem; line-height: 1.55; margin: 0 0 6px; }
.sx-chip { display: inline-block; font-size: .76rem; padding: 4px 14px; border-radius: 99px; }
.sx-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0 8px; }
.sx-big { padding: 14px 30px !important; font-size: 1.05rem !important; border-radius: 99px; }
.sx-ghost { padding: 13px 24px; border: 1.5px solid var(--line); border-radius: 99px; color: var(--ink); text-decoration: none; font-weight: 600; background: var(--card); } .sx-ghost:hover { border-color: var(--brand2); }
.sx-note { margin: 4px 0 0; color: var(--mut); font-size: .88rem; }
.sx-art { position: relative; min-height: 300px; } .sx-art .ds-hero-art { height: 320px; }
.sx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin: 16px 0; scroll-margin-top: 12px; }
.sx-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 22px 24px; box-shadow: var(--shadow); min-width: 0; }
.sx-card h2 { font: 600 1.45rem var(--serif); margin: 0 0 12px; padding: 0 !important; background: none !important; }
.sx-drop { display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; min-height: 176px; border: 2px dashed color-mix(in srgb, var(--brand2) 55%, var(--line)); border-radius: 20px; background: color-mix(in srgb, var(--brand2) 4%, var(--card)); cursor: pointer; padding: 18px; transition: background .2s, border-color .2s; margin: 0; }
.sx-drop:hover, .sx-drop.over { background: color-mix(in srgb, var(--brand2) 11%, var(--card)); border-color: var(--brand2); }
.sx-drop b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; } .sx-drop em { font-style: normal; color: var(--mut); font-size: .88rem; }
.sx-ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand2) 13%, var(--card)); color: var(--brand2); margin-bottom: 4px; }
.sx-drop.sm { min-height: 96px; padding: 12px; } .sx-drop.sm .sx-ic { display: none; }
.sx-more { margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; } .sx-more summary { cursor: pointer; color: var(--mut); font-size: .9rem; } .sx-more .sx-drop { margin-top: 8px; }
.sx-priv { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--mut); margin: 12px 0 4px; } .sx-priv svg { margin-top: 3px; color: var(--ok); flex: none; } .sx-priv b { color: var(--ink); }
.sx-up .alt { margin: 6px 0 0; }
.sx-chk { color: var(--mut); }
.sx-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.sx-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.sx-n { width: 30px; height: 30px; border-radius: 50%; background: var(--btn); color: var(--on-brand); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.sx-steps b { font-size: .98rem; } .sx-steps p { margin: 2px 0 6px; color: var(--mut); font-size: .88rem; }
.mk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #f4f6f8; border: 1px solid #dde3e8; border-radius: 10px; padding: 8px 10px; color: #1b2b3a; }
.mk-tab { font-size: .76rem; color: #5a6b7a; padding: 2px 8px; border-bottom: 2px solid transparent; } .mk-tab.on { color: #0b6a78; border-bottom-color: #0f8794; font-weight: 700; }
.mk-li { display: block; width: 100%; font-size: .78rem; color: #1b6a86; padding: 2px 8px; border-radius: 4px; } .mk-li.on { background: #d8eaf0; font-weight: 700; }
.mk-btn { font-size: .76rem; color: #fff; padding: 4px 11px; border-radius: 4px; } .mk-btn.csv { background: #0f7f8a; box-shadow: 0 0 0 3px rgba(15, 127, 138, .28); } .mk-btn.txt { background: #3a4654; opacity: .55; text-decoration: line-through; } .mk-btn.dl { background: #3a4654; box-shadow: 0 0 0 3px rgba(58, 70, 84, .25); }
.mk-st { font-size: .76rem; color: #5a6b7a; } .mk-arr { color: #5a6b7a; }
.sx-never { background: color-mix(in srgb, var(--brand2) 5%, var(--card)); border: 1px solid var(--line); border-radius: 20px; padding: 16px 22px; margin: 0 0 18px; } .sx-never h3 { margin: 0 0 2px; font-size: 1.02rem; }
.sx-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 0; } .sx-tags li { border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); border-radius: 99px; padding: 3px 12px 3px 10px; font-size: .86rem; background: var(--card); } .sx-tags li::before { content: '✕'; color: var(--bad); margin-right: 7px; font-size: .75rem; }
@media (max-width: 900px) { .sx-hero, .sx-row { grid-template-columns: minmax(0, 1fr); } .sx-art { min-height: 0; max-width: 420px; margin: 0 auto; width: 100%; } .sx h1 { max-width: none; } }

.sx-up .alt { display: block; margin: 12px 0 0; font-size: .92rem; color: var(--mut); } .sx-up .alt .linkbtn { display: inline; font-size: inherit; }
.sx-up .sx-never { margin: 12px 0 0; padding: 12px 16px; border-radius: 16px; } .sx-up .sx-never h3 { font-size: .96rem; } .sx-up .sx-tags { margin-top: 8px; gap: 6px; } .sx-up .sx-tags li { font-size: .8rem; padding: 2px 10px 2px 8px; }

/* ---- the top of the chat, like Claude: the chat's name on the left, a new chat and the list of earlier chats on the right */
.chead { gap: 8px; position: relative; z-index: 6; }
.ctitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ctitle-b { border: 0; background: transparent; color: var(--ink); font: 600 1.02rem var(--serif); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px; margin-left: -8px; border-radius: 8px; cursor: text; text-align: left; } .ctitle-b:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ctitle-in { width: 100%; font: 600 1rem var(--serif); padding: 3px 8px !important; border-radius: 8px !important; }
.nosave { flex: none; font-size: .7rem; color: var(--mut); border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; }
.chead .aipill { flex: none; }
.newbtn, .histbtn { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 4px 12px; font: inherit; font-size: .84rem; cursor: pointer; white-space: nowrap; } .newbtn:hover, .histbtn:hover { border-color: var(--brand2); }
.hist { position: relative; flex: none; }
.histmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(340px, 86vw); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; } .histmenu[hidden] { display: none; }
.hh { font-size: .74rem; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px 6px; }
.hlist { max-height: 48vh; overflow: auto; display: grid; gap: 2px; }
.hrow { display: flex; align-items: center; gap: 6px; border-radius: 10px; padding: 7px 8px; cursor: pointer; } .hrow:hover, .hrow:focus { background: color-mix(in srgb, var(--brand2) 9%, transparent); outline: none; } .hrow.cur { background: color-mix(in srgb, var(--brand2) 12%, transparent); }
.hrow .ht { flex: 1; min-width: 0; display: grid; } .hrow b { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrow small { color: var(--mut); font-size: .74rem; }
.hx { flex: none; border: 0; background: transparent; color: var(--mut); font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: 6px; padding: 2px 6px; opacity: 0; } .hrow:hover .hx, .hrow:focus .hx { opacity: 1; } .hx:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.hempty { margin: 6px 8px; font-size: .86rem; color: var(--mut); }
.hf { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); margin-top: 6px; padding: 8px 8px 2px; font-size: .74rem; color: var(--mut); }
@media (max-width: 520px) { .chead .aipill { display: none; } }
.hrow b, .hh, .hempty, .hf { font-family: var(--sans); } .hf .mini { white-space: nowrap; flex: none; }

/* ---- the first screen, simpler: a short hero, two equal choices, one line about the sandbox */
.sx-hero { padding: 6px 0 0; } .sx-art .ds-hero-art { height: 250px; } .sx-art { min-height: 240px; } .sx h1 { font-size: clamp(2rem, 3.8vw, 2.8rem); }
.sx .lead { font-size: 1.05rem; max-width: 46ch; }
.sx-pick { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; margin: 8px 0 12px; }
.sx-try { display: flex; flex-direction: column; align-items: flex-start; background: color-mix(in srgb, #2aa3ad 6%, var(--card)); border-color: color-mix(in srgb, #2aa3ad 40%, var(--line)); }
.sx-sub { margin: 0 0 18px; color: var(--mut); } .sx-try .alt { margin: 14px 0 0; font-size: .86rem; }
.sx-up .sx-drop { min-height: 140px; } .sx-up .sx-priv { margin: 10px 0 8px; }
.sx-d { color: var(--mut); font-size: .86rem; } .sx-steps .mk { margin-top: 5px; }
.sx-sandbox { margin: 0 0 24px; text-align: center; color: var(--mut); font-size: .9rem; } .sx-sandbox b { color: var(--ink); }
@media (max-width: 900px) { .sx-pick { grid-template-columns: minmax(0, 1fr); } }
.nav-top:empty + nav { margin-left: auto !important; } /* before a file, the menu sits on the right, as it does once the work screen is open */
.sx-try { align-self: start; }

/* ---- feedback: a thumb under each answer (it shows on hover), a form, and the consent box for your own file */
.rate { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .15s; } .m.a:hover .rate, .rate:focus-within, .rate button.on { opacity: 1; } .rate:has(button.on) { opacity: 1; }
.rate button { border: 0; background: transparent; cursor: pointer; font-size: .9rem; border-radius: 8px; padding: 1px 6px; filter: grayscale(1); opacity: .7; } .rate button:hover:not(:disabled) { filter: none; opacity: 1; background: color-mix(in srgb, var(--ink) 7%, transparent); } .rate button.on { filter: none; opacity: 1; background: color-mix(in srgb, var(--brand2) 14%, transparent); } .rate button:disabled:not(.on) { opacity: .25; cursor: default; }
.fbr { display: flex; gap: 8px; margin: 8px 0; } .fbb { font-size: 1.4rem; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 4px 16px; cursor: pointer; filter: grayscale(.6); } .fbb:hover, .fbb.on { filter: none; border-color: var(--brand2); background: color-mix(in srgb, var(--brand2) 9%, var(--card)); }
#fbtext { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; resize: vertical; }
.sx-share { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--mut); margin: 6px 0 4px; cursor: pointer; } .sx-share input { margin-top: 3px; flex: none; }
.sx-log { margin: -12px 0 24px; text-align: center; color: var(--mut); font-size: .8rem; }
.cfoot .linkbtn { font-size: inherit; }

/* ---- the decisions on the left, the conversation on the right */
.cw > .panel { grid-column: 1; grid-row: 1; }
.cw > .chatcol { grid-column: 2; grid-row: 1; }
.cw { grid-template-columns: minmax(0, 1fr) minmax(340px, 38%); }
@media (max-width: 1000px) {
  .cw { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .cw > .panel, .cw > .chatcol { grid-column: 1; grid-row: 2; }
}


/* ---- the first screen on ONE screen: what it is and the button on the left, your own report on the right; steps and past decisions open in a window */
.start { display: flex; align-items: center; overflow: auto; padding: 0 6px; }
.sx { width: 100%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.sx-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sx h1 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); margin: 0 0 10px; max-width: 16ch; }
.sx .lead { max-width: 40ch; margin: 0 0 14px; }
.sx-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 6px; } .sx-or { color: var(--mut); font-size: .88rem; }
.sx-art { width: 100%; min-height: 0; } .sx-art .ds-hero-art { height: clamp(150px, 26vh, 250px); }
.sx-up .sx-drop { min-height: clamp(110px, 21vh, 170px); }
.sx-links { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .86rem; color: var(--mut); margin: 10px 0 2px; } .sx-links .linkbtn { font-size: inherit; display: inline; }
.sx-up .sx-priv { margin: 8px 0 4px; } .sx-up .sx-share { margin: 4px 0 2px; }
.sx-log { margin: 4px 0 0 !important; text-align: left !important; color: var(--mut); font-size: .76rem; }
.sx-up .preview { margin: 0; } .sx-up .preview .linkbtn { margin-left: 8px; }
@media (max-width: 900px) { .sx { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 8px 0 24px; } .start { align-items: flex-start; } .sx h1 { max-width: none; } .sx-art { max-width: 380px; } }
.sx-links .linkbtn { display: inline; width: auto; margin: 0; padding: 0; min-height: 0; text-align: left; }
.sx-art { margin-top: 6px; } .sx-art .ds-hero-art { height: clamp(150px, 24vh, 210px); }
.sx-art .ds-hero-penguin, .sx-art .ds-flake-big { zoom: .68; }
.exitbtn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 5px 14px; font: inherit; font-size: .86rem; cursor: pointer; white-space: nowrap; } .exitbtn:hover { border-color: var(--brand2); }
.nav-top { gap: 8px; }
.gsteps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gstep { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 12px; background: var(--card); } .gstep .sx-n { position: absolute; left: 10px; top: 10px; } .gstep b { display: block; margin-left: 38px; padding-top: 4px; } .gstep p { margin: 2px 0 8px 38px; color: var(--mut); font-size: .86rem; min-height: 2.4em; }
.gstep img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 700px) { .gsteps { grid-template-columns: 1fr; } }