/* Vonit, Design B ("proof ledger"). One meaning per colour: green is only ever
   "proven", orange only ever "needs you", amber "partly / not proven", blue
   "running". Everything else is ink on paper. */
:root {
  --bg: #F4F5F2; --rail: #ECEEE9; --rail-on: #E0E3DC; --card: #FFFFFF; --soft: #FAFBF9;
  --line: #DFE2DB; --line-2: #E6E8E3; --line-3: #EEF0EC; --control: #C9CDC5;
  --ink: #171A17; --ink-2: #3D433C; --muted: #5E645C; --faint: #9AA197; --on-ink: #FFFFFF;
  --proven: #1F7A5C; --proven-bg: #EEF5F1; --proven-line: #BFD8CC;
  --needs: #9A3412; --needs-dot: #C2410C; --needs-bg: #FBEADF;
  --partly: #9A6A12; --partly-bg: #FBF4E4;
  --run: #2B4C7E; --run-bg: #EEF1F6;
  --link: #2B4C7E;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 12px; --rail-w: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121412; --rail: #181B18; --rail-on: #262A25; --card: #1C1F1C; --soft: #1F221F;
    --line: #2C302B; --line-2: #2A2E29; --line-3: #262A25; --control: #3A3F39;
    --ink: #E8EAE6; --ink-2: #C9CDC5; --muted: #9AA197; --faint: #6B7169; --on-ink: #121412;
    --proven: #5FC39A; --proven-bg: #16291F; --proven-line: #2A4A3B;
    --needs: #F0A47A; --needs-dot: #E2733A; --needs-bg: #2E1D14;
    --partly: #E0B060; --partly-bg: #2A2416;
    --run: #8FB0E0; --run-bg: #18202C;
    --link: #8FB0E0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--sans); background: var(--bg); color: var(--ink); }
a { color: var(--link); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.boot { color: var(--muted); padding: 40px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; color: var(--muted); }
.kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.error { color: var(--needs); }
.btn.danger { color: var(--needs); border-color: var(--needs); }

/* ---- shell: the icon rail and the page ---- */
.shell { display: flex; min-height: 100vh; }
.rail { flex: 0 0 var(--rail-w); background: var(--rail); border-right: 1px solid var(--line);
        display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px;
        position: sticky; top: 0; height: 100vh; }
.rail .mark { margin-bottom: 12px; display: flex; }
.rail .spacer { flex: 1; }
.rail-btn { width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent;
            display: flex; align-items: center; justify-content: center; position: relative;
            color: var(--muted); cursor: pointer; text-decoration: none; }
.rail-btn:hover { background: var(--rail-on); color: var(--ink); }
.rail-btn[aria-current="page"] { background: var(--rail-on); color: var(--ink); }
.rail-btn.primary { background: var(--ink); color: var(--on-ink); }
.rail-btn.primary:hover { background: var(--ink); opacity: .9; }
.rail-btn .badge { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
                   border-radius: 8px; background: var(--needs-dot); color: #FFFFFF; font-size: 10px;
                   font-weight: 600; line-height: 16px; text-align: center; border: 2px solid var(--rail); box-sizing: content-box; }
.rail-btn .tip { position: absolute; left: 52px; white-space: nowrap; background: var(--ink); color: var(--on-ink);
                 font-size: 12px; padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none;
                 transition: opacity .12s; z-index: 5; }
.rail-btn:hover .tip, .rail-btn:focus-visible .tip { opacity: 1; }
.page { flex: 1; min-width: 0; }

/* Phones: the rail becomes a bar along the bottom, within thumb reach. */
@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .rail { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row;
          justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
          border-right: 0; border-top: 1px solid var(--line); z-index: 10; }
  .rail .mark, .rail .spacer, .rail .tip { display: none; }
  .page { padding-bottom: 76px; }
}

/* ---- page parts ---- */
.wrap { max-width: 760px; margin: 0 auto; padding: 40px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
.wrap.wide { max-width: 1100px; }
@media (max-width: 720px) { .wrap { padding: 24px 16px 32px; } }
h1.title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.25; }
@media (max-width: 720px) { h1.title { font-size: 25px; } }
.lede { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.card.quiet { background: var(--soft); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.row:first-child { border-top: 0; }

.btn { font: 500 14px var(--sans); border-radius: 8px; padding: 0 16px; min-height: 44px; cursor: pointer;
       border: 1px solid var(--control); background: var(--card); color: var(--ink);
       display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.small { min-height: 34px; font-size: 13px; padding: 0 12px; }
.btn:disabled { opacity: .5; cursor: default; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--ink-2); }
.input { min-height: 46px; border: 1px solid var(--control); border-radius: 10px; padding: 0 14px;
         background: var(--card); width: 100%; }

.pill { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; display: inline-block; }
.pill.proven { background: var(--proven-bg); color: var(--proven); }
.pill.needs { background: var(--needs-bg); color: var(--needs); }
.pill.partly { background: var(--partly-bg); color: var(--partly); }
.pill.run { background: var(--run-bg); color: var(--run); }
.pill.quiet { background: var(--rail); color: var(--muted); }

.notice { background: var(--run-bg); color: var(--ink-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; }

/* ---- sign-in ---- */
.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.signin .box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
.signin .head { text-align: center; }
.signin .head h1 { margin: 12px 0 6px; font-family: var(--serif); font-weight: 500; font-size: 28px; }
.signin form { display: flex; flex-direction: column; gap: 12px; }
.signin .small { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; margin: 0; }

/* ---- home ---- */
.home { gap: 28px; padding-top: 64px; }
@media (max-width: 720px) { .home { padding-top: 28px; } }
.composer { background: var(--card); border: 1px solid var(--ink); border-radius: 14px; padding: 14px;
            display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 24px rgba(23, 26, 23, .06); }
.composer .ask { border: 0; outline: 0; resize: vertical; font: 16px/1.5 var(--sans); background: transparent; padding: 4px; min-height: 72px; }
.composer .pickers { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.composer .grow { flex: 1; }
.composer > .error:empty, .composer > [role="status"]:empty { display: none; }
.chip { font: 13px var(--sans); background: var(--rail); border: 1px solid var(--line); border-radius: 8px;
        padding: 0 10px; min-height: 36px; color: var(--ink); max-width: 100%; }
.more-box textarea, .more-box select { width: 100%; }
.starters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -10px; }
.chip-btn { font: 13px var(--sans); background: var(--card); border: 1px solid var(--line); border-radius: 999px;
            padding: 0 14px; min-height: 36px; color: var(--ink); cursor: pointer; }
.chip-btn:hover { border-color: var(--control); }
.list { margin-top: 6px; display: flex; flex-direction: column; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line-2);
        font-size: 14px; color: var(--ink); text-decoration: none; }
.item:hover { background: var(--soft); }
.item .what { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.item .state { font-size: 12px; font-weight: 600; flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .cost { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.dotmark { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--control); }
.dotmark.needs { background: var(--needs-dot); } .dotmark.proven { background: var(--proven); }
.dotmark.run { background: var(--run); } .dotmark.partly { background: var(--partly); }
.foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 720px) { .item .state { display: none; } }

/* ---- conversations ---- */
.convo { display: flex; min-height: 100vh; }
.cpane { flex: 0 0 260px; border-right: 1px solid var(--line); background: var(--soft); padding: 16px 10px;
         display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.clist { display: flex; flex-direction: column; gap: 1px; }
.citem { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: 14px;
         color: var(--ink-2); text-decoration: none; min-width: 0; }
.citem:hover { background: var(--rail); }
.citem.on { background: var(--rail-on); color: var(--ink); font-weight: 500; }
.citem .ct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.thead { display: flex; align-items: center; gap: 12px; padding: 14px 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.thead h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.thead .back { display: none; font-size: 26px; text-decoration: none; color: var(--ink); width: 36px; }
.thread .scroll { flex: 1; overflow-y: auto; }
.tmenu { position: relative; }
.tmenu > summary { list-style: none; font-size: 20px; }
.tmenu > summary::-webkit-details-marker { display: none; }
.tmenu-panel { position: absolute; right: 0; top: 42px; z-index: 20; min-width: 260px; max-width: 86vw; background: var(--card);
               border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(23, 26, 23, .12);
               display: flex; flex-direction: column; gap: 8px; }
.turns { max-width: 760px; margin: 0 auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.you { align-self: flex-end; max-width: 80%; background: var(--rail-on); border-radius: 14px 14px 4px 14px; padding: 10px 14px;
       font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.atlus { display: flex; gap: 12px; max-width: 92%; }
.atlus .av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); flex-shrink: 0; position: relative; margin-top: 1px; }
.atlus .av::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--proven); }
.atlus .words { font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.lab { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lnk { font: 12px var(--sans); background: transparent; border: 0; color: var(--link); padding: 0; cursor: pointer; text-decoration: underline; }
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-left: 38px; }
.mcard.needs { border-color: var(--ink); }
.mcard .h { padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcard .ttl { font-weight: 600; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.mcard .ask { padding: 0 16px 12px; font-size: 14px; }
.mcard .acts { padding: 10px 16px; border-top: 1px solid var(--line-2); background: var(--soft); display: flex; gap: 8px; flex-wrap: wrap; }
/* A mission that does not need the person: V's answer and one line, no card. */
.mline { margin-left: 38px; display: flex; flex-direction: column; gap: 6px; }
.mline > div:not(.mmeta):not(.error) { padding: 0 !important; }
.mmeta { margin-top: 0; align-items: center; gap: 8px; }
.mmeta .dotmark { width: 8px; height: 8px; }
.bar.mini { flex: 0 0 90px; max-width: 90px; gap: 3px; }
.bar.mini span { height: 5px; }
.empty-state { display: flex; flex-direction: column; gap: 16px; padding-top: 6vh; }
.cbox { max-width: 760px; width: 100%; margin: 0 auto 18px; box-sizing: border-box; background: var(--card); border: 1px solid var(--control);
        border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cbox .ask { border: 0; outline: 0; resize: none; font: 15px/1.5 var(--sans); background: transparent; padding: 4px;
             min-height: 30px; max-height: 200px; overflow-y: auto; }
.cbox .grow { flex: 1; }
.cbox > .error:empty { display: none; }
/* The bar under the message: attach, options, send - one row (2026-11-01). */
.cbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cbar .attach { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cbar .attach .small:empty { display: none; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: var(--muted);
            display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { background: var(--rail); color: var(--ink); }
.send-round { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink); color: var(--on-ink);
              font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.send-round:disabled { opacity: .5; cursor: default; }
.opts { position: relative; }
.opts > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.opts > summary::-webkit-details-marker { display: none; }
.opts-panel { position: absolute; left: 0; bottom: 44px; z-index: 20; width: min(420px, 86vw); max-height: 60vh; overflow-y: auto;
              background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
              box-shadow: 0 10px 30px rgba(23, 26, 23, .12); display: flex; flex-direction: column; gap: 8px; }
.opts-panel .chip { width: 100%; }
.opts-panel .grow { flex: none; }
.mpanel { flex: 0 0 420px; border-left: 1px solid var(--line); height: 100vh; overflow-y: auto; background: var(--soft); }
.mission.compact { display: block; min-height: 0; }
.mission.compact .main { padding: 18px 20px; }
.mission.compact .col { gap: 16px; }
.mission.compact aside { max-width: none; min-height: 0; border-left: 0; border-top: 1px solid var(--line); padding: 18px 20px; }
.mission.compact .outcome .words { font-size: 19px; }
@media (max-width: 1100px) { .cpane { flex-basis: 220px; } }
@media (max-width: 860px) {
  .convo.has-convo .cpane { display: none; }
  .convo:not(.has-convo) .cpane { flex: 1; height: auto; position: static; border-right: 0; }
  .convo:not(.has-convo) .thread { display: none; }
  .thead .back { display: inline-block; }
  .thread { height: calc(100vh - 76px); }
  .turns { padding: 16px; } .thead { padding: 12px 16px; }
  .cbox { margin: 0 12px 12px; width: auto; }
  .mcard, .mline { margin-left: 0; }
}

/* ---- settings ---- */
.settings .split { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.subnav { flex: 0 0 200px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; }
.subnav a { padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.subnav a:hover { background: var(--rail); }
.subnav a.on { background: var(--rail-on); color: var(--ink); font-weight: 500; }
.settings textarea { width: 100%; border: 1px solid var(--control); border-radius: 8px; padding: 8px 10px; background: var(--card); }
@media (max-width: 720px) {
  .subnav { flex: 1 1 100%; flex-direction: row; overflow-x: auto; position: static; }
  .subnav a { white-space: nowrap; }
}

/* ---- menu pages ---- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { font: 500 13px var(--sans); border: 1px solid var(--line); background: var(--card); border-radius: 999px;
       padding: 0 14px; min-height: 34px; color: var(--ink-2); cursor: pointer; }
.tab.needs { color: var(--needs); }
.tab.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.item .when { font-size: 12px; color: var(--muted); flex-shrink: 0; width: 150px; text-align: right; }
.item .who { font-size: 12px; color: var(--muted); flex: 0 0 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item.head { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600;
             border-top: 0; padding-top: 8px; padding-bottom: 8px; }
.item.head:hover { background: none; }
.item.head .what { font-weight: 600; }
.item .cost { width: 64px; text-align: right; }
@media (max-width: 1000px) { .item .who { display: none; } }
@media (max-width: 720px) { .item .when { display: none; } .item.head { display: none; } }
.card .list .item:first-child, .card > .rc:first-child { border-top: 0; }
.tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.tile { flex: 1 1 180px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.rc { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-2); }
.rc .what { color: var(--ink); font-weight: 500; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .rc { grid-template-columns: 10px minmax(0, 1fr) auto; } .rc .btns { grid-column: 2 / -1; } }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.agent { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.switch { width: 42px; height: 24px; border-radius: 12px; border: 0; background: var(--control); position: relative;
          margin-left: auto; cursor: pointer; flex-shrink: 0; }
.switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; transition: left .12s; }
.switch.on { background: var(--proven); }
.switch.on span { left: 21px; }

/* ---- mission page ---- */
.mission { display: flex; flex-wrap: wrap; align-items: flex-start; min-height: 100vh; }
.mission .main { flex: 999 1 520px; min-width: 0; padding: 28px 40px 48px; }
.mission .col { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.mission aside { flex: 1 1 300px; max-width: 360px; min-height: 100vh; border-left: 1px solid var(--line);
                 background: var(--soft); padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1000px) {
  .mission aside { max-width: none; min-height: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) { .mission .main { padding: 20px 16px 28px; } .mission aside { padding: 20px 16px; } }
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs .here { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.crumbs .id { margin-left: auto; font-family: var(--mono); }

.outcome { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.outcome.proven { border-color: var(--proven-line); }
.outcome .status { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.outcome .words { margin: 10px 0 14px; font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.35;
                  overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 720px) { .outcome .words { font-size: 19px; } }
.outcome .headline { margin: -4px 0 14px; font-size: 14px; color: var(--ink-2); }
.bar { display: flex; gap: 4px; flex: 1 1 200px; max-width: 260px; }
.bar span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.bar .proven { background: var(--proven); } .bar .needs { background: var(--needs-dot); }
.bar .run { background: var(--run); } .bar .partly { background: var(--partly); }
.meter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }

.st-proven { color: var(--proven); } .st-needs { color: var(--needs); } .st-partly { color: var(--partly); }
.st-run { color: var(--run); } .st-quiet { color: var(--muted); }

.timeline { display: flex; flex-direction: column; }
.node { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
.node .dot { width: 28px; display: flex; flex-direction: column; align-items: center; }
.node .dot .line { flex: 1; width: 2px; background: var(--line); margin-top: 4px; min-height: 12px; }
.node .body { padding-bottom: 18px; min-width: 0; }
.node:last-child .body { padding-bottom: 0; }
.node .head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.node .name { font-weight: 500; overflow-wrap: anywhere; }
.node .word { font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.node .who { margin-left: auto; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.node .note { font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.proof { margin-top: 8px; font-size: 13px; border-radius: 8px; padding: 8px 12px; line-height: 1.5; color: var(--ink-2); }
.proof.proven { background: var(--proven-bg); } .proof.partly { background: var(--partly-bg); } .proof.run { background: var(--run-bg); }

.decide { background: var(--card); border: 1px solid var(--ink); border-radius: 12px; overflow: hidden; }
.decide > .top { padding: 16px 20px 6px; display: flex; gap: 10px; align-items: center; }
.decide h2 { margin: 0; font-size: 16px; font-weight: 600; }
.decide .facts { padding: 6px 20px 10px; display: grid; grid-template-columns: max-content minmax(0, 1fr);
                 column-gap: 16px; row-gap: 6px; font-size: 14px; margin: 0; }
.decide .facts dt { color: var(--muted); } .decide .facts dd { margin: 0; overflow-wrap: anywhere; }
.decide .text { margin: 4px 20px 12px; padding: 12px 14px; background: var(--soft); border: 1px solid var(--line-2);
                border-radius: 8px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.decide .big { padding: 4px 20px 6px; font-size: 20px; font-weight: 600; }
.decide .flag { margin: 0 20px 8px; color: var(--needs); font-weight: 600; font-size: 14px; }
.decide .more { padding: 0 20px 12px; display: flex; flex-direction: column; gap: 8px; }
.decide .more textarea, .decide .more input, .card textarea, .card select, .fold textarea {
  width: 100%; border: 1px solid var(--control); border-radius: 8px; padding: 8px 10px; background: var(--card); }
.decide .acts { padding: 12px 20px; border-top: 1px solid var(--line-2); background: var(--soft);
                display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.decide .acts .why { margin-left: auto; font-size: 12px; color: var(--muted); max-width: 300px; }
.decide .bound { font-size: 12px; color: var(--muted); }
.warnbox { background: var(--needs-bg); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.partlybox { background: var(--partly-bg); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.okbox { background: var(--proven-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; }

.result { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.result h3 { margin: 0; font-size: 16px; font-weight: 600; }
.result .text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
.result .small { font-size: 13px; color: var(--muted); }
details.fold > summary { cursor: pointer; font-size: 14px; color: var(--ink-2); font-weight: 500; padding: 4px 0; }
details.fold[open] > summary { margin-bottom: 8px; }
.fold ol, .fold ul { margin: 6px 0; padding-left: 20px; }
.fold li { margin: 4px 0; overflow-wrap: anywhere; }
.tablewrap { overflow-x: auto; }
table.plain { border-collapse: collapse; width: 100%; font-size: 13px; }
table.plain th, table.plain td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; overflow-wrap: anywhere; }
table.plain th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
pre.ev { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--mono); background: var(--soft);
         border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.stages { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 4px 0; }
.stages li { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
.stages li.done { color: var(--proven); border-color: var(--proven-line); }
.stages li.now { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }

.rcpt .big { font-family: var(--mono); font-size: 30px; font-weight: 500; }
.rcpt .line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--control); font-size: 13px; }
.rcpt .line:last-child { border-bottom: 1px dashed var(--control); }
.rcpt .line span:last-child { font-family: var(--mono); text-align: right; flex-shrink: 0; }
.rcpt .line span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.facts2 { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px; row-gap: 6px; font-size: 13px; margin: 0; }
.facts2 dt { color: var(--muted); } .facts2 dd { margin: 0; overflow-wrap: anywhere; }
.seal { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--card);
        display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.seal.on { border-color: var(--ink); }
.seal .t { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 500; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Saved workspace: the same records and type as the mission lists. */
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.workspace-controls { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.workspace-widget-control { display:flex; align-items:center; gap:6px; }
.workspace-widget-control label, .work-preferences label { display:inline-flex; align-items:center; gap:6px; }
.workspace-widgets { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; align-items:start; }
.workspace-widget { min-width:0; }
.workspace-widget h2 { margin:0 0 12px; font-size:18px; font-weight:600; }
.workspace-item { display:flex; flex-direction:column; gap:4px; padding:12px 0; border-top:1px solid var(--line-2); text-decoration:none; overflow-wrap:anywhere; }
.workspace-item:hover .what { text-decoration:underline; }
.workspace .btns { margin-top:12px; }
.work-preferences fieldset { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:12px; display:flex; flex-wrap:wrap; gap:12px; }
.work-preferences legend { font-weight:500; padding:0 4px; }
@media (max-width:720px) { .rail { gap:0; padding-left:2px; padding-right:2px; } .rail-btn { flex:1; min-width:0; max-width:44px; } }