/* The canvas page wears the same memo identity as the rest of Abacus. The shared rules below are
   copied from index.html verbatim (bar, strip, routing block, buttons, inputs, folds, memo rows,
   inline documents, caret). Canvas-specific rules follow in the same register. */
@font-face{font-family:'Geist Mono';src:url('/fonts/GeistMonoVF.woff') format('woff');font-weight:100 900;font-display:swap}
:root{
  --bg:#f9f5eb;--surface:#fbf8f0;--quiet:#f4f0e4;
  --ink:#1b1916;--mute:#5a5449;--faint:#8c8578;
  --border:#c9bfa9;--rule:rgba(27,25,22,.4);--rule-soft:rgba(27,25,22,.16);
  --accent:#2f6fd6;--accent-soft:rgba(47,111,214,.08);--red:#a33b3b;
  --mono:'Geist Mono','Courier New',Courier,monospace;
  --head-h:66px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14.5px/1.85 var(--mono);-webkit-font-smoothing:antialiased}
::selection{background:rgba(47,111,214,.18)}
a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(27,25,22,.28);transition:color .15s ease,text-decoration-color .15s ease}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
button,input,select,textarea{font-family:inherit;border-radius:0}
p{margin:0 0 1.15em}
h1,h2,h3,h4{font-weight:700;margin:0}
strong{font-weight:700}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
::placeholder{color:var(--faint)}

/* ---- Memo header ---- */
.memo-head{position:sticky;top:0;z-index:20;background:var(--bg)}
.bar{height:32px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font:700 13px/1 var(--mono);letter-spacing:.06em}
.bar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:9px;outline:none}
.bar .mark{width:21px;height:18px;display:block}
.bar a:hover{color:#fff;text-decoration:underline}
.bar .org{font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
/* The original platform's secondary navigation strip. */
.strip{height:34px;display:flex;align-items:center;gap:22px;padding:0 28px 0 49px;font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.runnav{display:flex;align-items:center;gap:4px;flex:1;min-width:0;height:34px}
.runnav a{color:var(--mute);text-decoration:none;white-space:nowrap;height:34px;padding:0 9px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.runnav a:hover{color:var(--ink)}
.runnav a[aria-current="page"]{color:#fff;background:var(--accent);font-weight:700}
.runnav a[aria-disabled="true"]{color:var(--border);cursor:default;pointer-events:none}
.runnav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:520px){.bar .org{display:none}.strip{padding-left:19px}}
.live-caret,.caret,.pulse{display:inline-block;width:2px;height:.85em;background:var(--accent);vertical-align:-.08em;animation:caret 1.1s step-end infinite;font-size:inherit}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}

/* ---- Body columns ---- */
#app{display:flex;min-height:calc(100vh - var(--head-h));align-items:flex-start}
main{flex:1;min-width:0;padding:44px 28px 120px}
main.home{padding-top:clamp(140px,32vh,380px)}
.sheet{max-width:820px;margin:0 auto}
/* Claims fill the central column. */
#work{padding:0;--composer-width:min(640px,100%)}
#workspace{position:relative;display:flex;align-items:flex-start;min-height:calc(100vh - var(--head-h))}
#main-panel{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;min-height:calc(100vh - var(--head-h))}
.inline-doc{border:1px solid var(--ink);padding:14px 18px 6px;margin:12px 0 8px;background:var(--surface)}

/* ---- Routing block ---- */
.routing{display:grid;grid-template-columns:110px 1fr;row-gap:2px;padding:0 0 18px}
.routing .rk{font-weight:700}
.routing .rv{min-width:0}
.routing .rv.status{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.routing h1{font:700 14.5px/1.85 var(--mono)}
.rule-heavy{height:1.5px;background:var(--ink);width:100%}
.rule-light{height:1px;background:var(--rule);width:100%}
.run-action{display:inline-flex;gap:8px;flex-wrap:wrap;margin-left:auto;align-items:center}
.run-action:empty{display:none}

/* ---- Buttons and inputs ---- */
.go,.ghost{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);background:transparent;padding:9px 20px;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:background-color .15s ease,color .15s ease;text-decoration:none}
.go{background:var(--ink);color:var(--bg)}
.go:hover:not(:disabled){background:transparent;color:var(--ink)}
.ghost:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.go:disabled,.ghost:disabled{opacity:.45;cursor:default}
textarea,input[type=text],input[type=number]{width:100%;border:1px solid var(--ink);background:transparent;padding:8px 11px;font:400 13.5px/1.6 var(--mono);color:var(--ink);outline:none;transition:border-color .15s ease,background-color .15s ease}
textarea{border:1px solid var(--ink);padding:12px 14px;min-height:110px;resize:vertical;line-height:1.7}
input:focus{border-color:var(--accent);background:var(--accent-soft)}
textarea:focus{border-color:var(--ink)}
@keyframes flash{0%,35%{background:var(--accent-soft)}100%{background:transparent}}

/* ---- Home ---- */
textarea.subject{display:block;width:100%;border:0;padding:0;margin:0;min-height:1.85em;background:transparent;font:700 14.5px/1.85 var(--mono);color:var(--ink);resize:none;overflow:hidden}
textarea.subject::placeholder{font-weight:400;color:var(--faint)}
textarea.subject:focus{border:0;background:transparent}
.memo-rows{list-style:none;margin:0;padding:0}
.memo-rows li{display:grid;grid-template-columns:88px 1fr;column-gap:8px;padding:16px 0;border-bottom:1px solid var(--rule);transition:background-color .15s ease}
.memo-rows li:hover{background:rgba(27,25,22,.03)}
.memo-rows .n{font-weight:700}
.memo-rows a{text-decoration:none}
.memo-rows a:hover{text-decoration:underline}
.fold{margin-top:22px}
.fold summary{list-style:none;cursor:pointer;padding:12px 0;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:10px}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:'›';display:inline-block;width:10px;color:var(--mute);transition:transform .336s ease}
.fold[open] summary::before{transform:rotate(90deg)}
.fold .memo-rows{max-height:320px;overflow-y:auto;scrollbar-width:thin}
.fold .memo-rows li{padding:12px 0}

/* ---- Tables (as on the run pages) ---- */
table{width:100%;border-collapse:collapse}
th{font-weight:700;text-align:left;padding:8px 12px 8px 0;border-bottom:1.5px solid var(--ink);font-size:12.5px}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:13.5px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ======================================================================
   Canvas page
   ====================================================================== */
/* The conversation block: one composer, resting at the foot of the page. The addressed component sits
   as a small chip on the top border of the message field. */
#talk{background:var(--bg);padding:10px 14px 12px;font-size:13px;line-height:1.6}
#talk:has(#thread:not([hidden])){background:var(--surface);outline:1px solid var(--rule)}
#paper>#talk{position:sticky;bottom:0;z-index:5;width:var(--composer-width);margin:0 auto;padding-bottom:16px}
#thread{max-height:min(38vh,360px);overflow:auto;border-bottom:1px solid var(--rule);margin-bottom:8px;padding-bottom:6px}
.msg{overflow-wrap:anywhere;font-size:12.5px;line-height:1.7;padding:8px 0}
.message-text>:first-child{margin-top:0}
.message-text>:last-child{margin-bottom:0}
.message-text p{margin:0 0 .75em}
.message-text a{color:#5579a8;text-decoration-color:currentColor}
.message-text a:hover{color:var(--accent)}
.message-text :is(h1,h2,h3,h4,h5,h6){font:700 1em/1.5 var(--mono);margin:1em 0 .4em}
.message-text :is(ul,ol){margin:.5em 0 .75em;padding-left:1.7em;text-align:left}
.message-text li{margin:.2em 0}
.message-text li>p{margin:.2em 0}
.message-text blockquote{margin:.75em 0;padding-left:12px;border-left:2px solid var(--rule-soft);color:var(--mute)}
.message-text code{font:inherit;font-size:.95em;background:var(--quiet);padding:1px 3px}
.message-text pre{max-width:100%;overflow:auto;padding:10px;background:var(--quiet);white-space:pre;text-align:left}
.message-text pre code{padding:0;background:none}
.message-text table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:.75em 0;text-align:left}
.message-text :is(th,td){border:1px solid var(--rule-soft);padding:5px 8px}
.message-text hr{border:0;border-top:1px solid var(--rule-soft);margin:1em 0}
/* The person on the right, the modeller on the left; context dividers span both. */
.msg.user{color:var(--mute);text-align:right;padding-left:18%}
.msg.reply{padding-right:18%}
.context-divider{display:flex;align-items:center;gap:10px;margin:16px 0 6px}
.context-divider:first-child{margin-top:2px}
.context-divider::before,.context-divider::after{content:'';flex:1;min-width:16px;border-top:1px solid var(--rule-soft)}
.chat-context{display:block;max-width:75%;border:0;background:none;padding:0 2px;font:400 10.5px/1.5 var(--mono);color:#5579a8;text-align:center;overflow-wrap:anywhere}
button.chat-context{cursor:pointer}
button.chat-context:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
button.chat-context:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#activity{display:flex;align-items:baseline;gap:8px;padding:0 0 10px;color:var(--mute);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
#activity.failed{color:var(--red)}
#composer{margin:0}
.say-row{display:flex;align-items:flex-end;gap:8px}
.composer-field{position:relative;flex:1;min-width:0}
#talk .fold{position:relative;flex:none;width:22px;height:38px;border:0;background:none;padding:0;margin:0 -2px 0 0;color:var(--mute);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
#talk .fold:hover{color:var(--accent)}
#talk .fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#talk .fold svg{width:12px;height:12px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;transition:transform .336s ease}
#talk.folded .fold svg{transform:rotate(180deg)}
#talk .fold.unread::after{content:'';position:absolute;top:9px;right:1px;width:5px;height:5px;background:var(--accent)}
.panel-moving{overflow:hidden!important;min-height:0!important}
#say,#question{display:block;width:100%;min-height:38px;max-height:160px;padding:8px 42px 8px 10px;font-size:13px;line-height:1.6;resize:none;overflow:auto;background:var(--surface)}
#say,#question{background:var(--bg);border-color:var(--rule);border-style:solid}
#say::placeholder,#question::placeholder{color:var(--mute)}
#say:hover:not(:focus),#question:hover:not(:focus){border-color:var(--mute)}
#say:focus,#question:focus{border-color:var(--accent);border-style:solid;background:#fff}
#composer.scoped #say{padding-top:12px}
/* The chip: the component this message is addressed to, sitting on the field's top border. Its × shows on hover, focus or touch. */
.composer-chips{position:absolute;top:-10px;left:10px;right:10px;z-index:1;display:flex;align-items:center;gap:6px;pointer-events:none}
.composer-chips:not(:has(:not([hidden]))){display:none}
#scope{pointer-events:auto;display:inline-flex;align-items:center;min-width:0;height:19px;padding:0 7px;border:1px solid var(--accent);background:var(--surface);color:var(--accent);font:700 10.5px/17px var(--mono);letter-spacing:.04em;white-space:nowrap}
#scope{flex:0 1 auto;max-width:100%}
#scope .arrow{display:none}
#scope>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#scope button{border:0;background:none;padding:0;margin:0;width:0;overflow:hidden;opacity:0;font:700 13px/1 var(--mono);color:inherit;cursor:pointer;transition:width .12s ease,opacity .12s ease}
#scope:hover button,#scope:focus-within button,#scope button:focus{width:16px;opacity:1;margin-left:4px}
#scope button:hover,#scope button:focus{color:var(--ink)}
#scope button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(hover:none){#scope button{width:16px;opacity:1;margin-left:4px}}
.composer-send{position:absolute;right:3px;bottom:3px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;background:transparent;color:var(--mute);cursor:pointer;transition:color .15s ease}
.composer-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.composer-send:hover:not(:disabled){color:var(--accent)}
.composer-send:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.composer-send:disabled{opacity:.45;cursor:default}

/* ---- Reason: one layer as a readable column of claims ---- */
/* The page scrolls; the heading stays under the header and the composer rests at the foot, as in Numbers. */
#paper{flex:1;display:flex;flex-direction:column;width:100%;max-width:816px;margin:0 auto;padding:0 28px;outline:0}
#work .routing{display:block;position:sticky;top:var(--head-h);z-index:6;background:var(--bg);padding:24px 0 0}
#breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 8px;color:var(--mute);font-size:11px;line-height:1.6}
#breadcrumbs button{padding:2px 0;border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-align:left}
#breadcrumbs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#breadcrumbs [aria-current]{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.headline{position:relative;display:flex;align-items:flex-start;gap:12px;padding-bottom:12px}
.headline h1{flex:1;min-width:0;font:700 14.5px/1.7 var(--mono);overflow-wrap:anywhere}
#copy-claims{flex:none;width:22px;height:25px;border:0;background:none;padding:0;margin:0;color:var(--mute);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
#copy-claims:hover{color:var(--accent)}
#copy-claims:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#copy-claims svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#copy-status{position:absolute;right:34px;top:0;padding:2px 4px;background:var(--bg);color:var(--accent);font:12px/1.6 var(--mono);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(5px);transition:opacity .2s ease,transform .24s ease}
#copy-status.visible{opacity:1;transform:none}
/* A tall heading scrolls with its layer on a short or narrow screen. */
@media(max-width:760px),(max-height:620px){#work .routing{position:static}}

/* An older saved answer, written apart from its components. */
#legacy-answer{margin-top:10px}
#answer ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
#answer li{border-bottom:1px solid var(--rule-soft)}
#answer button{display:grid;grid-template-columns:26px 1fr;column-gap:6px;width:100%;border:0;background:none;padding:11px 2px;font:400 12.5px/1.65 var(--mono);color:var(--ink);text-align:left;cursor:pointer;overflow-wrap:anywhere;transition:background-color .15s ease,color .15s ease}
#answer .n{font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
#answer .text{white-space:pre-wrap}
#answer button:hover{color:var(--accent);background:rgba(27,25,22,.03)}
#answer button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#answer button.here,#answer button.here .n{color:var(--accent)}
#answer button.here{background:var(--accent-soft)}

/* Claims in reading order. The gutter carries the layer's actual connections as in Numbers: faint
   dashes that turn blue and heavier only while a connected claim's text is hovered or focused. */
.claim-tree{position:relative;flex:1;--tree-width:20px;padding:6px 0 48px calc(var(--tree-width) + 12px);font-size:13.5px;line-height:1.75}
.claim-connections{position:absolute;left:0;top:0;width:var(--tree-width);overflow:visible;pointer-events:none;fill:none;stroke:var(--ink);stroke-width:.75;stroke-opacity:.25}
.claim-connections path{stroke-dasharray:4 4}
.claim-connections circle{fill:var(--bg);stroke:var(--ink);stroke-width:1;stroke-opacity:.45}
.claim-connections .active{stroke:var(--accent);stroke-width:1.25;stroke-opacity:1}
#claim-rows{list-style:none;margin:0;padding:0}
.claim-row{border-bottom:1px solid var(--rule-soft);scroll-margin:calc(var(--head-h) + 120px) 0 110px;transition:background-color .15s ease}
.claim-row:last-child{border-bottom:0}
.claim-head{display:flex;align-items:flex-start;gap:8px}
.claim-title{display:flex;align-items:baseline;gap:16px;flex:1;min-width:0;border:0;background:none;padding:17px 0;margin:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:color .15s ease}
.claim-title:hover{color:var(--accent)}
.claim-title:focus-visible,.claim-tool:focus-visible,.claim-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The chevron opens a claim's supporting level: blue when it holds work, neutral while it is blank. */
.claim-open{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:15px -8px 0 0;padding:0;border:0;background:none;color:var(--faint);cursor:pointer;transition:color .15s ease}
.claim-open svg{width:12px;height:12px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.claim-open.populated{color:var(--accent)}
.claim-open:hover{color:var(--ink)}
.claim-text{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.claim-row.named .claim-text{font-weight:700}
.claim-preview{flex:none;max-width:45%;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.claim-preview em{font-size:12px;font-style:normal;font-weight:400;color:var(--mute)}
.claim-row.external .claim-text{color:var(--mute)}
.claim-row.external .claim-title:hover .claim-text{color:inherit}
.claim-row.failed .claim-title{color:var(--red)}
.claim-row.selected .claim-text,.claim-row.cited .claim-text{color:var(--accent)}
.claim-row.working .claim-text::after{content:'';display:inline-block;width:2px;height:.85em;background:var(--accent);margin-left:6px;vertical-align:-.08em;animation:caret 1.1s step-end infinite}
.claim-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:-9px 0 14px;font-size:12px;line-height:1.6;color:var(--mute)}
.claim-tag{display:inline-flex;align-items:baseline;gap:5px}
.claim-tag.wondering{color:var(--accent)}
.claim-tag .question-icon{align-self:center;margin-top:0}
.claim-tool{border:0;background:none;padding:0;min-height:24px;font:inherit;font-size:12px;line-height:1.6;color:#5579a8;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.claim-tool:hover{color:var(--accent)}
.claim-note{margin:-9px 0 14px;font-size:12.5px;line-height:1.6;color:var(--mute);white-space:pre-wrap;overflow-wrap:anywhere}
.claim-note.fail{color:var(--red)}
/* What can be done with a selected claim opens beneath its text. */
#claims-empty{margin:18px 0 0;font-size:12.5px;color:var(--mute)}
.claim-tree:has(#claims-empty:not([hidden])){padding-left:0}
@media(max-width:600px){
  #paper{padding:0 18px}
  .claim-title{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
  .claim-preview{max-width:none;text-align:left}
}
@media(hover:none){.claim-tool{min-height:32px}}

input.saving,textarea.saving{border-color:var(--accent);background:var(--accent-soft);color:var(--mute)}
input.changed,textarea.changed,.prose.changed{animation:flash 1.8s ease-out both}
.changed{animation:flash 1.8s ease-out both}

/* Worksheet rows, used by Numbers. */
.result{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.result:last-child{border-bottom:0}
.result .k{flex:1;min-width:0;font-size:13px}
.result .k em,.use .k em,.own .k em{font-style:normal;color:var(--mute);font-size:12px;margin-left:6px;overflow-wrap:anywhere}
.result .k,.use .k,.own .k{overflow-wrap:anywhere}
.result .v{font-weight:700;font-variant-numeric:tabular-nums;flex:0 1 auto;max-width:56%;text-align:right;overflow-wrap:anywhere}
.result.series{display:block}
.result.text{display:block}
.result.text .v,.use.text .v{display:block;max-width:none;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;font-weight:400;font-size:13px;line-height:1.7;margin-top:3px;font-variant-numeric:normal}
.use.text{display:block}
.use.text .k{display:block}
.result.series .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.result.series .top .v{max-width:50%}
.tbl{max-height:260px;overflow:auto;margin-top:8px}
.tbl table{font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:right;padding:5px 8px;white-space:nowrap;font-size:12.5px}
.tbl th{position:sticky;top:0;background:var(--surface)}
.tbl input{width:84px;padding:3px 6px;text-align:right;font-size:12.5px}
.use,.own{display:block;padding:8px 0;border-bottom:1px solid var(--rule-soft);width:100%;text-align:left;font-size:13px;color:var(--ink);line-height:1.6}
.use{border-top:0;border-left:0;border-right:0;background:none;font-family:inherit;cursor:pointer;display:flex;align-items:baseline;gap:10px}
.use:hover .from{color:var(--accent)}
.use .k,.own .k{flex:1;min-width:0}
.own .basis{display:block;font-size:12px;color:var(--mute);margin-top:1px}
.use .from{display:flex;align-items:baseline;gap:4px;font-size:10.5px;font-weight:400;line-height:1.5;color:#5579a8;margin-top:2px}
.use .from svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.use .v{font-weight:700;font-variant-numeric:tabular-nums;flex:0 1 auto;max-width:56%;text-align:right;overflow-wrap:anywhere}
.use .v em{font-style:normal;font-weight:400;color:var(--mute);font-size:12px}
.own .v{display:flex;align-items:baseline;gap:6px;margin-top:4px;flex-wrap:wrap}
.own .pre{color:var(--mute)}
.own input[type=number],.own input[type=text]{width:auto;flex:0 1 140px;min-width:96px;max-width:100%;padding:5px 9px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.own input[type=checkbox]{accent-color:var(--accent)}
.own .unit{overflow-wrap:anywhere;font-size:12px;color:var(--mute);flex:1 1 60px;min-width:0;line-height:1.4}
.own.wide .say-row{margin-top:6px;flex-direction:column;align-items:flex-end;gap:6px}
.own.wide textarea{width:100%;flex:none;display:block;min-height:72px;padding:10px 12px;font-size:13px;line-height:1.7;resize:none;overflow:hidden;background:var(--surface)}
.own.wide textarea:focus{border-color:var(--accent);background:#fff}
.own.wide .say-row .go{height:auto;padding:7px 12px;font-size:10.5px}
.own.sent textarea{color:var(--mute);background:var(--accent-soft);border-color:var(--accent)}
.own.sent .k::after{content:'';display:inline-block;width:2px;height:.85em;background:var(--accent);margin-left:6px;vertical-align:-.08em;animation:caret 1.1s step-end infinite}
.own a{color:var(--mute)}
.own a:hover{color:var(--accent)}

#notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;border:1px solid var(--ink);background:var(--surface);color:var(--ink);padding:10px 16px;max-width:90vw;font-size:12.5px;line-height:1.6}

@media(max-width:900px){
  .bar{padding:0 18px}
  main{padding:30px 18px 80px}
  #work{padding:0}
  .routing{grid-template-columns:90px 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Home: composer, followed by matching example and past-model disclosures ---- */
.home-sheet{max-width:640px;margin:0 auto}
.home-sheet>.fold{margin-left:14px;margin-right:14px}
.home-composer{background:var(--bg);padding:10px 14px 12px;font-size:13px;line-height:1.6}
.examples{list-style:none;margin:0;padding:0;max-height:190px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.examples li{border-bottom:1px solid var(--rule-soft)}
.examples li:last-child{border-bottom:0}
.examples :is(button,a){display:block;width:100%;text-align:left;background:none;border:0;padding:9px 2px;font:400 13px/1.6 var(--mono);color:var(--ink);cursor:pointer;text-decoration:none}
.examples :is(button,a):hover{color:var(--accent);background:rgba(27,25,22,.03)}
.examples :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.examples :is(button,a)::before{content:'→ ';color:var(--accent)}
@media(max-width:640px){main.home{padding-top:clamp(64px,14vh,140px)}}

.question-icon{color:var(--accent);width:14px;height:14px;flex:none;align-self:flex-start;margin-top:calc((1lh - 14px)/2);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Project sharing uses the same navigation and memo typography. */
.strip .page-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.page-actions ~ .share-note,.page-actions ~ .strip-links{margin-left:0}
.strip .page-action{border:0;background:var(--ink);color:var(--bg);padding:6px 12px;font:600 11.5px/1 var(--mono);letter-spacing:0;text-transform:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease}
.strip .page-action:hover:not(:disabled){background:var(--accent)}
.strip .page-action.quiet{background:none;color:var(--ink);padding:6px 4px}
.strip .page-action.quiet:hover:not(:disabled){background:none;color:var(--accent)}
.strip .page-action:disabled{opacity:.6;cursor:wait}
.share-note{margin-left:auto;color:var(--accent);white-space:nowrap}
.share-note ~ .strip-links{margin-left:0}
.share-url{min-width:0;width:min(320px,45vw);padding:8px;background:var(--bg);border:1px solid var(--rule);color:var(--ink);font:inherit}
.shared-project #talk,.shared-project #action,.shared-project [data-page="history"]{display:none!important}
.shared-project #paper,.shared-project .numbers-sheet{padding-bottom:40px}
.shared-unavailable{margin:40px 28px}
/* Questions, projects and sign-out sit at the right of the strip. */
.strip-links{display:flex;align-items:center;gap:18px;white-space:nowrap;margin-left:auto}
/* The strip's links, behind one button, as in Abacus+ */
.plus-more{position:relative;display:inline-flex}
.strip-links .plus-more-button{border:0;background:var(--bg);color:var(--ink);width:32px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;font:700 16px/1 var(--mono);cursor:pointer}
.strip-links .plus-more-button:hover,.strip-links .plus-more-button[aria-expanded="true"]{color:var(--accent)}
.plus-more-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:50;min-width:170px;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--ink);padding:4px 0}
.plus-more-menu[hidden]{display:none}
.strip-links .plus-more-menu a,.strip-links .plus-more-menu button{display:block;text-align:left;padding:7px 12px;color:var(--ink);text-decoration:none;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;white-space:nowrap}
.strip-links .plus-more-menu a:hover,.strip-links .plus-more-menu button:hover{background:var(--accent-soft)}
.strip-links a,.strip-links button{color:var(--mute);text-decoration:none;border:0;background:none;padding:8px 0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.strip-links a:hover,.strip-links button:hover{color:var(--ink)}


/* Keep working pages together; history is a project utility. */
.runnav a[data-page="history"]:not([aria-current="page"]){display:none}
@media(max-width:520px){.strip{gap:6px;padding-right:10px;overflow-x:auto}.runnav{gap:0;flex:none}.runnav a{padding:0 7px;letter-spacing:.06em}.strip-links{gap:12px}}