/* /create/ live — what the working surface needs beyond the structure variant's "create portal" styles.
   The variant is not edited; this file only adds. Tokens are the variant's (var(--…)). */

/* the study's moment switcher and its account link are not the live page's */
.portal-head .portal-states{display:none}
.portal-actions>a.link[href="#"]{display:none}
.portal-actions{margin-left:auto}
.open-composer .btn[aria-disabled=true]{opacity:.7;pointer-events:none}
/* #kind — the heading row above the field: the title and the link-styled toggle on one line; the question under it */
.open-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px}
.open-title{margin:0;font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.open-swap{padding:0;border:0;background:none;font:inherit;cursor:pointer}
.open-composer .open-ask{display:block;margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--ink);max-width:none}
.open-composer .open-ask+.open-field{margin-top:12px}
.open-kind{margin-top:20px}
.open-have{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
/* /#kind */
.open-note.bad{color:var(--red-text)}

/* the header's file count: the rail, folded, on a phone */
.portal-files{display:none;height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:2px;background:transparent;color:var(--ink-2);font:500 13.5px var(--sans);cursor:pointer}
.portal-files:hover{color:var(--ink);border-color:var(--line-strong)}

/* the surface, three columns from 1000px up (the variant drops the pane at 1100) */
.portal-work.live{height:calc(100vh - 65px);height:calc(100dvh - 65px);min-height:0}
@media (min-width:1000px){
  .portal-work.live{grid-template-columns:216px minmax(360px,1fr) minmax(340px,.95fr)}
  .portal-work.live .portal-doc{display:block}
}
@media (min-width:1280px){.portal-work.live{grid-template-columns:232px minmax(420px,1fr) minmax(400px,.95fr)}}
.portal-work.live .chat-scroll{gap:20px}
.portal-work.live .chat-scroll>.msg{flex:none}
.portal-work.live .msg.bot{max-width:min(100%,46em)}
.portal-work.live .msg.me{max-width:min(86%,40em)}
.portal-work.live .msg p{text-wrap:pretty}
/* a sent message not yet known to have landed */
.portal-work.live .msg.me.flying{opacity:.72}
.portal-work.live .msg.me.flying::after{content:"Sending…";display:block;margin-top:4px;font-size:12.5px;line-height:1.4;opacity:.8}
.rail-head{position:relative}
.rail-part{padding:8px 20px 2px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.rail-part~.rail-row{padding-left:30px}
.rail-sec .rail-row .rail-name{flex:1}
/* #rail — the chip on each rail row saying where its document stands (page.js #rail; row rail-fact-states): the row's
   chip in shape, the site's tokens; Confirmed in the cool accent the compiled chip wears, Draft plain, Missing dashed */
.rail-row .rail-state{flex:none;align-self:flex-start;display:inline-block;padding:0 6px;border:1px solid var(--line-strong);border-radius:2px;font-size:10.5px;line-height:1.5;font-weight:550;color:var(--muted);white-space:nowrap}
.rail-row .rail-state.confirmed{color:var(--cool-text);border-color:var(--cool-line)}
.rail-row .rail-state.missing{border-style:dashed;border-color:var(--line-strong)}
/* /#rail */
.doc-head .chip[hidden]{display:none}
.composer[hidden]{display:none}
.sheet-close{display:none}

/* waiting: a dot, and the sentence the engine declares for the wait */
.msg.bot .say .dot{display:none}
.msg.bot.thinking .say{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:1.55em}
.msg.bot.thinking .say .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cool)}
.msg.bot.thinking.replied .say .dot{display:none}
.msg.bot.thinking .wait{font-size:14.5px;color:var(--muted)}
.msg.bot.thinking .wait:empty{display:none}
.msg.bot.thinking .reply:empty,.msg.bot.thinking .landing:empty{display:none}
.msg.bot.thinking .reply{flex-basis:100%;order:-1}
.landing{flex-basis:100%;display:grid;gap:4px;font-size:14.5px;color:var(--ink-2)}
.landing strong{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:no-preference){.msg.bot.thinking .say .dot{animation:st-pulse 1.2s ease-in-out infinite}}
.msg.bot.note .say{font-size:14.5px;color:var(--muted)}
.msg.bot.failed .say{color:var(--red-text)}
.btn.try{display:flex;margin-top:12px;height:36px;padding:0 14px;font-size:14px}

/* the composer: the quick reply, the field, and the quiet line under it */
.composer .quick[hidden],.composer-foot .stop[hidden]{display:none}
.composer input:disabled{opacity:.5}
.composer .btn:disabled{opacity:.5;cursor:default}
.portal-work.live .composer{margin-bottom:8px}
.composer-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 36px 14px;min-height:20px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.composer-foot .stop{flex:none;padding:0;border:0;background:none;font:inherit;font-size:13.5px;cursor:pointer}
/* #skip — a thread's way out, beside the stop link and drawn as it is */
.composer-foot .skip{flex:none;padding:0;border:0;background:none;font:inherit;font-size:13.5px;cursor:pointer}
.composer-foot .skip[hidden]{display:none}
/* /#skip */
.composer-foot .kept{margin-left:auto;text-align:right}

/* the card, drawn from its declaration */
.ctl-card input:disabled{opacity:.55;cursor:default}
.ctl-preview[hidden]{display:none}
.ctl-preview .line{display:block;min-height:1.5em}
.ctl-preview.writing .line::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--cool);opacity:.7}
@media (prefers-reduced-motion:no-preference){.ctl-preview.writing .line::after{animation:st-pulse 1s steps(2) infinite}}

/* the email, asked at Show me */
.offer-mail{display:grid;gap:8px;margin-top:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);max-width:34em}
.offer-mail label{font-size:14px;line-height:1.5;color:var(--ink-2)}
.offer-mail input{height:44px;padding:0 12px;background:var(--side);border:1px solid var(--line-strong);border-radius:2px;font:inherit;color:var(--ink)}
.offer-mail input:focus-visible{outline:2px solid var(--cool);outline-offset:1px}
.offer-mail input.bad{border-color:var(--red-line)}
.offer-mail.asked label{color:var(--red-text)}
/* #email — the build notes' box under the email (D7): a box beside its line, not a 44px field; never red with the field */
.offer-mail .offer-notes,.take-mail .offer-notes{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.take-mail .offer-notes{margin-top:8px}
.offer-mail.asked .offer-notes{color:var(--ink-2)}
.offer-mail .offer-notes input,.take-mail .offer-notes input{flex:none;width:auto;height:auto;margin:0;padding:0}
.take-mail .take-consent{margin-top:6px}
/* /#email */

/* a file that landed, as a card in the conversation */
.file-card{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);max-width:34em}
.file-card .file-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.file-card .open{margin-left:auto;font-size:13.5px;color:var(--cool-text)}
.file-card:hover{border-color:var(--line-strong)}
.file-card.landed{margin-top:8px;padding:7px 10px}
.file-card.landed+.file-card.landed{margin-top:6px}
@media (min-width:1000px){.file-card.landed{display:none}}

/* a closed question: its choices, each with its note and the reason it is suggested */
.choices{display:grid;gap:8px;margin-top:16px}
.choice{display:grid;gap:3px;padding:12px 14px 12px 40px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:2px;color:var(--ink);font:inherit;cursor:pointer;position:relative}
.choice::before{content:"";position:absolute;left:14px;top:15px;width:14px;height:14px;border:1px solid var(--line-strong);border-radius:2px;background:var(--side)}
.choices:not(.multi) .choice::before{border-radius:50%}
.choice.on .choice-name{color:var(--red-text)}
/* the doors after the stand are choices: the site's own .door rules (the home page's doors: padding 0 and a left rule from the second on, no left padding under 760) must not reach them (Steve's walk: the circle over the words on options 2 and 3 at 390) */
.choices.doors .choice{padding:12px 14px 12px 40px;border-left:1px solid var(--line)}
.choices.doors .choice.on{border-left-color:var(--line)}
.choice.on::before{background:var(--red);border-color:var(--red);box-shadow:inset 0 0 0 3px var(--surface)}
.choice:hover:not(:disabled){border-color:var(--line-strong)}
.choice:disabled{cursor:default;opacity:.75}
.choice:disabled:not(.on){display:none}
.choices .more{justify-self:start;padding:4px 0;border:0;background:none;font:inherit;font-size:14px;cursor:pointer}
.choices-rest{display:grid;gap:8px}
.choices-rest[hidden]{display:none}
.choice-name{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600}
.choice-note{font-size:14px;line-height:1.45;color:var(--ink-2)}
.choice-reason{font-size:14px;line-height:1.45;color:var(--ink)}
.choice-reason::before{content:"";display:inline-block;width:9px;height:2px;margin-right:8px;vertical-align:.3em;background:var(--red);transform:rotate(-45deg)}
/* the second tier: what a company like this one usually also has — its own small heading; its reason is not evidence, so its mark is not red */
.choices-tier{margin:6px 0 -2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.choice.usual .choice-reason{color:var(--ink-2)}
.choice.usual .choice-reason::before{background:var(--muted)}
/* #picker — a role's charter on its card (row outcomes-before-roles): each line its label and its words, the labels in one column, quieter than the reason above them; the site's tokens only */
.choice-charter{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45}
.charter-label{color:var(--muted)}
.charter-text{color:var(--ink-2);overflow-wrap:anywhere}
/* /#picker */

/* the pane */
.portal-doc .document pre{margin-top:1em;padding:14px 16px;overflow:auto;background:var(--side);border:1px solid var(--line);font-family:var(--mono);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.portal-doc .document pre code{font-size:inherit}
.portal-doc .document h3{font-size:16.5px;margin-top:1.4em}
details.fm{margin-top:2em;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
details.fm summary{cursor:pointer}
.portal-doc .document:empty::before{content:"";display:block;height:120px}

/* the end */
.take-card .copy{padding:0;border:0;background:none;font:inherit;font-size:13.5px;cursor:pointer}
/* #take — the end screen as ruled (D6 amended, D3, D9; lane exit-card): the offers above the exit paths; one button; the download and the app as text links under it; the copy line under the download; the blocks (the terminal's, the link back) under the note */
.take-offers{flex-basis:100%;display:grid;gap:10px}
.take-offer{margin:0}
.take-offer-check{display:grid;gap:8px;justify-items:start}
.take-offer-task{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.take-checked{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.take-checked[hidden]{display:none}
.take-checked.bad{color:var(--red-text)}
.take-paths{flex-basis:100%;display:grid;gap:8px;justify-items:start;padding-top:14px;border-top:1px solid var(--line)}
.take-paths .btn{white-space:normal;text-align:center;line-height:1.25;padding:10px 16px;height:auto;min-height:44px}
.take-paths .btn[hidden]{display:none}
.take-links{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.take-links>*+*::before{content:"·";display:inline-block;margin-inline:.6em;color:var(--muted);text-decoration:none}
a.take-link{color:var(--cool-text);text-decoration:underline;text-decoration-color:var(--cool-line);text-underline-offset:4px;text-decoration-thickness:1px}
a.take-link:hover{text-decoration-color:var(--cool-text)}
.take-copy,.take-block{flex-basis:100%;min-width:0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--ink-2)}
.take-copy .take-cmd+.take-cmd{margin-top:8px}
/* /#take */
.take-cmd{display:flex;align-items:center;gap:12px;margin-top:6px;padding:8px 12px;background:var(--side);border:1px solid var(--line)}
.take-cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;color:var(--ink);scrollbar-width:none}
.take-cmd code::-webkit-scrollbar{display:none}
.take-cmd .copy{flex:none}
.take-cmd pre{flex:1;min-width:0;margin:0;padding:0;border:0;background:none;overflow-x:auto;scrollbar-width:none}
.take-cmd pre::-webkit-scrollbar{display:none}
.take-cmd pre code{display:block;white-space:pre;line-height:1.7}
.take-git .take-cmd{align-items:flex-start}
.take-mail .btn{height:44px}
/* #github */
/* the end, where the company can go on GitHub: the one button, the consent line under it, the pending line or the sentence saying where it went in its place */
.take-consent{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.take-consent[hidden]{display:none}
.take-status{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.take-status[hidden]{display:none}
.take-status.bad{color:var(--red-text)}
.take-done{margin:0;font-size:16px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.take-done a{color:var(--cool-text);text-decoration:underline;text-underline-offset:.15em}
/* /#github */

/* a phone, and anything narrower than three columns: one column, the rail and the pane as sheets */
@media (max-width:999px){
  .portal-files{display:inline-flex;align-items:center;margin-left:auto}
  .portal-actions{margin-left:0}
  .portal-work.live{grid-template-columns:minmax(0,1fr);position:relative;overflow:hidden}
  .portal-work.live .portal-rail,.portal-work.live .portal-doc{display:block;position:absolute;z-index:6;inset:0;overflow:auto;border:0;background:var(--ground);transform:translateY(102%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
  .portal-work.live .portal-rail.open,.portal-work.live .portal-doc.open{transform:none;visibility:visible;transition:transform .22s ease}
  .portal-work.live .portal-doc{padding:0 16px 28px}
  .portal-work.live .portal-rail{padding-top:16px;background:var(--chrome)}
  .portal-work.live .doc-head{position:sticky;top:0;z-index:1;margin:0 -16px;padding:12px 16px;background:var(--ground);border-bottom:1px solid var(--line)}
  .portal-work.live .doc-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sheet-close{display:inline-flex;align-items:center;margin-left:auto;height:34px;padding:0 14px;border:1px solid var(--line-strong);border-radius:2px;background:transparent;color:var(--ink);font:550 14px var(--sans);cursor:pointer}
  .rail-head .sheet-close{position:absolute;right:16px;top:0}
  .portal-work.live .portal-doc .document{margin-top:16px;padding:24px 20px 28px;font-size:16px}
  .portal-work.live .chat-scroll{padding:20px 16px 14px}
  .portal-work.live .composer{margin:0 16px 8px}
  .chat-chips.open-chips{margin:0 16px 12px}
  .composer-foot{margin:0 16px 12px;flex-direction:column;gap:4px}
  .composer-foot .kept{margin-left:0;text-align:left}
  .portal-work.live .msg.bot{padding-left:12px}
  .portal-work.live .msg.me{max-width:92%}
  .portal-log .log-lines{display:none}
  /* thumb-sized controls */
  .ctl-card{padding:16px 14px}
  .ctl{gap:6px;padding:4px 0}
  .ctl-head{flex-direction:column;gap:0}
  .ctl-row{grid-template-columns:auto 1fr auto}
  .ctl input[type=range]{height:40px}
  .ctl input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-13px}
  .ctl input[type=range]::-moz-range-thumb{width:22px;height:22px}
  .ctl-toggle{min-height:36px;font-size:15px}
  .ctl-toggle input{width:20px;height:20px}
  .ctl-toggles{flex-direction:column;gap:2px}
  .take-card .btn{flex:1 1 100%}
  .take-paths .btn,.take-offer-check .btn{width:100%} /* #take */
}
@media (max-width:520px){.composer .send{display:none}.composer .quick{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.portal-work.live .portal-rail,.portal-work.live .portal-doc{transition:none}}

/* #pack — the application's questions, the band over the compiled application, the readers (page.js #pack) */
/* the count beside the field: digits only, red past the form's limit */
.composer-foot .pack-count{flex:none;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.composer-foot .pack-count[hidden]{display:none}
.composer-foot .pack-count.over{color:var(--red-text);font-weight:600}
/* the band: the verdict's sentence in its three states, or the sentence that says where it runs for now */
.pack-band{margin:0 0 24px;padding:14px 16px;border:1px solid var(--line-strong);border-left-width:4px;background:var(--surface);font-size:15px;line-height:1.5}
.pack-band .pack-said{margin:0;font-weight:600;color:var(--ink)}
.pack-band.pack-ready{border-color:var(--cool-line);border-left-color:var(--cool);background:var(--cool-wash)}
.pack-band.pack-not-yet{border-left-color:var(--muted)}
.pack-band.pack-not-recommended{border-color:var(--red-line);border-left-color:var(--red);background:var(--red-wash)}
.pack-band .pack-gaps{margin:8px 0 0;padding-left:1.2em;font-size:14px;color:var(--ink-2)}
.pack-band .pack-gaps li{margin:2px 0}
/* #band — the gaps made at a terminal: under the ones this page can close, quieter, set off by a rule */
.pack-band .pack-gaps.pack-terminal{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line-strong);color:var(--muted)}
/* /#band */
.pack-ask-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pack-ask-row .btn{height:38px;padding:0 16px;font-size:14px}
.pack-ask-row .btn:disabled{opacity:.55;cursor:default}
.pack-ask-row .pack-note{flex:1 1 16em;font-size:13.5px;line-height:1.45;color:var(--muted)}
@media (max-width:999px){.pack-band{margin-bottom:18px}.pack-ask-row .btn{flex:1 1 100%}}
/* /#pack */
/* #decide — the level chip (page.js packScoreTag; sr-1028-2): the read's own verdict word by its class once it has
   landed, the service's word for a read without a verdict line; never a provisional word, never dashed. Site tokens only. */
.pack-score{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;padding:0 8px;border:1px solid var(--line-strong);border-radius:2px;color:var(--ink-2);background:var(--surface);white-space:nowrap}
/* round two (sr-1028-10): told apart by weight and the cool accent, each with its word, never colour alone — the first
   filled cool, the second an outline in ink, the third a muted outline; no hue scale unless Michael rules one */
.pack-score-advance{border-color:var(--cool-text);color:var(--surface);background:var(--cool-text);font-weight:650}
.pack-score-evidence{color:var(--ink);border-color:var(--line-strong)}
.pack-score-pass{color:var(--muted);border-color:var(--line)}
.pack-score-none{color:var(--muted);border-color:var(--line);border-style:dotted}
/* /#decide */
/* #readers — THE PANEL AND ONE READ AT A TIME (page.js #readers; the /sr round, 28 October, sr-1028-1/3/4/5): the
   pane's heading counts the reads, the legend names the three words; eleven one-line rows in a fixed order that never
   move (the mark at 24, the name, the chip or the row's state); the strip of marks; one read open at a time with its
   head and its parts. Nothing streams into the pane. The site's tokens only, both themes. */
.review-panel .review-heading{margin:0 0 6px;font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.review-panel .pack-legend{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--muted)}
/* the verdict rows (round two, sr-1028-9): three rows by level in a fixed order, the level word, the marks of the
   readers at that level side by side (the name on hover and focus), the count; then the rows for what is not a verdict
   while they have readers. The marks are the sheet's; a press opens the read. */
.portal-doc .document .verdict-rows{list-style:none;margin:16px 0 0;padding:10px 0 0;border-top:1px solid var(--line);display:grid;gap:4px}
.portal-doc .document .verdict-rows>li.verdict-row{display:grid;grid-template-columns:minmax(9em,auto) minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:36px;margin:0;padding:4px 8px;border-radius:2px}
.portal-doc .document .verdict-rows>li::before{content:none}
.verdict-row .pack-score{justify-self:start}
.verdict-marks{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-width:0}
.reader-mark-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--ink);cursor:pointer}
.reader-mark-btn .reader-mark{width:24px;height:24px}
.reader-mark-btn:hover:not(:disabled),.reader-mark-btn:focus-visible{border-color:var(--line-strong)}
.reader-mark-btn.current{border-color:var(--ink);background:var(--select)}
.reader-mark-btn:disabled{color:var(--muted);cursor:default}
.verdict-count{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.verdict-row[data-level=pending] .verdict-count,.verdict-row[data-level=failed] .verdict-count{color:var(--muted)}
.reader-mark{display:inline-flex;flex:none;width:24px;height:24px;color:var(--ink)}
.reader-mark svg{width:100%;height:100%}
.reader-mark.large{width:40px;height:40px}
.reader-mark.small{width:16px;height:16px;color:var(--ink-2)}
.reader-name{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.reader-state{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.reader-state.reading .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cool)}
@media (prefers-reduced-motion:no-preference){.reader-state.reading .dot{animation:st-pulse 1.2s ease-in-out infinite}}
.reader-state.failed{color:var(--red-text)}
/* the strip (round two, sr-1028-11): the eleven marks with the open reader's name under them, PINNED at the top of the
   pane (the pane scrolls; the strip holds its place) so the read scrolls under it and the selector is always in reach.
   A mark whose read has not landed is quiet; a step either way. */
/* the read's panel (Michael, 29 October, note 16): its own scroll region — the strip at its top never moves, the read
   scrolls under it, the panel's height the pane's remainder; on a phone the sheet is the pane */
/* (the live portal's rules above set the pane to block at the same weight; these carry one more class) */
.portal-work.live .portal-doc.readers-pane,.portal-doc.readers-pane{display:flex;flex-direction:column;overflow:hidden}
.portal-work.live .portal-doc.readers-pane .document,.portal-doc.readers-pane .document{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.portal-doc.readers-pane .review-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.read-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:18px}
.read-panel .reader-read{flex:1 1 auto;min-height:0;overflow-y:auto;margin-top:0;padding-top:16px}
.reader-strip{flex:none;margin:0;padding:8px 0 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
/* the strip fits its pane at every width (product's read of round two's shots): the marks shrink together before anything
   scrolls, the steps go at a phone's width */
.reader-strip .strip-row{display:flex;align-items:center;gap:3px;overflow:hidden}
.reader-strip button{display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;height:36px;min-width:26px;max-width:36px;padding:0;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--ink-2);cursor:pointer}
.reader-strip .strip-step{flex:0 0 28px;min-width:28px}
.reader-strip .strip-mark svg{width:22px;height:22px}
@media (max-width:480px){.reader-strip .strip-step{display:none}}
.reader-strip button:hover:not(:disabled){border-color:var(--line-strong);color:var(--ink)}
.reader-strip button:disabled{opacity:.3;cursor:default}
.reader-strip .strip-mark.current{border-color:var(--ink);color:var(--ink);background:var(--select)}
.reader-strip .strip-step{font-size:22px;line-height:1;font-family:var(--sans)}
.reader-strip .strip-step.next{margin-left:auto}
/* the open read: the head once, then the parts */
.reader-read{margin-top:20px}
.read-head{display:flex;align-items:flex-start;gap:14px}
.read-head .reader-mark.large{margin-top:2px}
.portal-doc .document .read-name{margin:0;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink)}
.portal-doc .document .read-lens{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.portal-doc .document .read-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.read-part{margin-top:18px}
.portal-doc .document .read-part-head{margin:0 0 4px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.portal-doc .document .read-part-body p{margin:0}
.portal-doc .document .read-part-body p+p{margin-top:.5em}
.read-part-body ul{padding-left:0}
.read-part-body li::before{content:none}
/* sr-1028-17: the card's close — a bold head, then the two calls side by side (the schedule's link the site's outline
   button, the build the one filled red); on a phone they stack */
.msg.bot.review-done .review-act{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.msg.bot.review-done .review-stronger{margin:0 0 10px;font-size:15px;line-height:1.4;font-weight:600;color:var(--ink)}
.msg.bot.review-done .review-calls{display:flex;flex-wrap:wrap;gap:10px}
.msg.bot.review-done .review-act .btn{height:38px;padding:0 16px;font-size:14px}
.msg.bot .review-intro{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:999px){.msg.bot.review-done .review-calls .btn{flex:1 1 100%}}
@media (max-width:760px){.portal-work.live .portal-doc.readers-pane.open{overflow:hidden}.read-panel .reader-read{padding-top:12px}.portal-doc .document .verdict-rows>li.verdict-row{grid-template-columns:minmax(7em,auto) minmax(0,1fr) auto;column-gap:8px}.reader-mark-btn{width:28px;height:28px}.reader-mark-btn .reader-mark{width:20px;height:20px}}
/* /#readers */
/* #ranked — THE READERS' BLOCK IN THE CONVERSATION (page.js #ranked; sr-1028-6): ONE place in the done card, a bordered
   panel with its heads (never a second left rule): the themes with the marks of the readers who raised them, the
   splits with their two sides, the asks under the answer's label (a link into the application's pane, the answer
   marked there). The site's tokens only, both themes. */
.msg.bot.review-done .review-readers{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--surface)}
.review-readers .readers-head{margin:0;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.review-readers .readers-head+*{margin-top:8px}
.review-readers ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.review-readers ul+.readers-head,.review-readers .readers-ask+.readers-head{margin-top:16px}
.review-readers li{margin:0;padding:0;display:grid;gap:4px}
.review-readers li::before{content:none}
/* one grid for every reader item (round two, sr-1028-8): the mark in column one on the first line, the name in the mono at
   a fixed width in column two, the text in column three wrapping under itself; no hanging indents. A theme's marks take
   the first two columns; a split's sentence and its sides sit in the third. */
.review-readers .reader-item{display:grid;grid-template-columns:16px 11em minmax(0,1fr);column-gap:8px;align-items:baseline}
.review-readers .reader-item .reader-mark.small{grid-column:1;align-self:baseline;position:relative;top:3px}
.review-readers .reader-item .reader-name{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis}
.review-readers .reader-item .theme-text,.review-readers .reader-item .split-text,.review-readers .reader-item .ask-headline{grid-column:3}
.theme-marks{grid-column:1/3;display:inline-flex;flex-wrap:wrap;gap:3px;align-self:baseline;position:relative;top:3px}
.theme-marks .reader-mark.small{position:static;grid-column:auto}
.theme-text,.split-text{font-size:14.5px;line-height:1.5;color:var(--ink)}
.split-sides{grid-column:3;display:flex;flex-wrap:wrap;gap:6px 18px}
.split-side{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.split-side .reader-mark.small{position:static;grid-column:auto}
.split-word{font-weight:600;letter-spacing:.02em;margin-right:3px}
.readers-ask{margin-top:10px}
.ask-answer-row{margin:0 0 6px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.ranked-answer{color:var(--cool-text);text-decoration:underline;text-underline-offset:.15em}
.ask-headline{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.portal-doc .document .ranked-at{background:var(--cool-wash);box-shadow:0 0 0 6px var(--cool-wash);border-left:3px solid var(--cool);padding-left:8px;margin-left:-11px}
/* /#ranked */
/* #apply — the application written for the reader (page.js #apply): each field's slot filling where it sits in the form,
   its source and its count beside it; a field the limit cut, and one not written, said under it in the service's words */
.portal-doc .document .pack-field{margin:0 0 18px;padding:2px 0 2px 12px;border-left:2px solid var(--line-strong)}
.portal-doc .document .pack-field p{margin:0}
.pack-field .pack-field-text{white-space:pre-wrap;min-height:1.5em}
.pack-field.waiting .pack-field-text{background:var(--surface);min-height:3em}
.pack-field.live{border-left-color:var(--cool)}
.pack-field.written{border-left-color:var(--cool-line)}
.pack-field.cut,.pack-field.failed{border-left-color:var(--muted)}
.pack-field .pack-from{margin-top:6px !important;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.pack-field .pack-field-note{margin-top:4px !important;font-size:13px;line-height:1.45;color:var(--ink-2)}
.pack-field-count{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--muted)}
.pack-field-count.over{color:var(--red-text);font-weight:600}
/* /#apply */
/* #documents — the founder's documents (page.js #documents): on the opening the field's "+" (#composer above); in the
   conversation the same "+" in the composer and the files as chips under it (21 October: one affordance for files everywhere) */
.composer .chat-attach{margin-left:2px}
.composer .chat-attach[hidden]{display:none}
.composer.over{border-color:var(--cool);background:var(--cool-wash)}
.chat-chips.open-chips{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0 36px 12px;padding:0}
.chat-chips.open-chips[hidden]{display:none}
.chat-chips .open-chip{max-width:100%}
.chat-chips .chip-application{font-family:var(--sans);font-size:13px;color:var(--ink);border-color:var(--cool-line)}
.chat-attach-note{color:var(--red-text)}
.chat-attach-note[hidden]{display:none}
/* the suggestions on a question: the answer as a quote, its file and passage, the press */
.docs-cited{display:grid;gap:10px;margin-top:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cool);max-width:40em}
.docs-cited-head{margin:0;font-size:13.5px;color:var(--muted)}
.docs-cite{display:grid;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.docs-cite:first-of-type{padding-top:0;border-top:0}
.docs-value{margin:0;padding:0;font-size:15px;line-height:1.5;color:var(--ink);white-space:pre-wrap}
.docs-source{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.docs-source .docs-file{display:block;font-family:var(--mono);font-size:12px;color:var(--muted)}
.docs-source .docs-passage{display:block;margin-top:2px;font-style:italic}
.docs-source .docs-passage::before{content:"“"}
.docs-source .docs-passage::after{content:"”"}
.docs-take,.docs-take-all{justify-self:start;height:36px;padding:0 14px;font-size:14px}
.docs-taken{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
@media (max-width:999px){
  .portal-work.live .docs-box.compact{margin:0 16px 12px}
  .docs-drop{flex-direction:column;align-items:stretch}
  .docs-drop .docs-pick{width:100%}
  .docs-kinds{flex:none} /* in a column the 16em basis would be a height */
  .docs-file .docs-state{margin-left:0;flex-basis:100%}
  .docs-take,.docs-take-all{width:100%;justify-self:stretch}
}
/* /#documents */
/* #reverse — the second door (page.js #reverse): the first screen's file press and custody line under the paste; after
   the readers, the offer's press and the two versions field by field (yours as sent on the left, the offered on the
   right, each with its count and one press), stacked on a phone with yours first. The site's tokens only. */
/* #composer — one composer, two ways in: the field holds the text, a bar with the "+" and the chips, and takes a drop */
.open-field{position:relative;margin-top:16px;background:var(--side);border:1px solid var(--line-strong);border-radius:2px}
.open-field:focus-within{outline:2px solid var(--cool-text);outline-offset:1px}
.open-field.over{border-color:var(--cool);background:var(--cool-wash)}
.open-composer .open-field textarea{margin:0;border:0;background:transparent;border-radius:0;resize:none;overflow:hidden;height:132px;min-height:132px;display:block}
.open-attach[hidden]{display:none}
.open-field-bar{min-height:42px}
.open-composer .open-field textarea:focus-visible{outline:none}
.open-field-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:0 10px 10px}
.open-attach{flex:none;width:32px;height:32px;padding:0;border:1px solid var(--line-strong);border-radius:2px;background:transparent;color:var(--ink-2);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.open-attach:hover{border-color:var(--ink);color:var(--ink);background:var(--hover)}
.open-attach-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.open-chips{display:contents}
.open-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:0 4px 0 8px;border:1px solid var(--line-strong);border-radius:2px;font-family:var(--mono);font-size:12px;line-height:28px;color:var(--ink)}
.open-chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.open-chip-state{color:var(--muted);white-space:nowrap}
.open-chip.bad{border-color:var(--red-line);color:var(--red-text)}
.open-chip.bad .open-chip-state{color:var(--red-text);white-space:normal}
.open-chip-x{padding:0 4px;border:0;background:none;color:var(--muted);font:inherit;font-size:16px;line-height:1;cursor:pointer}
.open-chip-x:hover{color:var(--ink)}
.open-attached{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.open-attached[hidden]{display:none}
/* /#composer */
.open-reverse{display:grid;gap:8px;margin-top:14px}
.open-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.open-file input{font:inherit;font-size:13.5px;color:var(--ink)}
.open-file-name{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.open-custody{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.portal-doc .document .pack-offer{margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.pack-offer .pack-ask-row{margin-top:0;padding-top:0;border-top:0}
.pack-offer-live{display:grid;gap:4px;margin-top:10px}
.review-panel{margin:0 0 28px;padding:0 0 20px;border-bottom:1px solid var(--line)}
.review-panel>.pack-note{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.portal-doc .document .review-panel .pack-reads{margin-top:12px;padding-top:0;border-top:0}
.portal-doc .document .review-panel .pack-offer{margin-top:20px}
.review-act .pack-ask-row{display:grid;gap:12px;justify-items:start}
.pack-checklist{margin:-12px 0 24px;padding:10px 16px;border:1px dashed var(--line-strong);font-size:14px;line-height:1.5;color:var(--ink-2)}
.pack-checklist .pack-check-said{margin:0;font-weight:600;color:var(--ink)}
.portal-doc .document .pack-checklist ul{margin:6px 0 0;padding-left:1.2em}
.review-stronger{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.portal-doc .document .pack-versions{display:grid;gap:14px;margin-top:14px}
.pack-versions-head{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.portal-doc .document .pack-version-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:10px;border-top:1px solid var(--line)}
.portal-doc .document .pack-version-label{grid-column:1/-1;margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.portal-doc .document .pack-version{display:grid;gap:8px;align-content:start;min-width:0;padding:10px 12px;border:1px solid var(--line);background:var(--surface)}
.pack-version.on{border-color:var(--cool-line);background:var(--cool-wash)}
.portal-doc .document .pack-version p{margin:0}
.pack-version-text{white-space:pre-wrap;font-size:14.5px;line-height:1.5;color:var(--ink)}
.pack-version-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.pack-version-foot .btn{height:32px;padding:0 12px;font-size:13.5px}
.pack-version-foot .btn:disabled{opacity:.55;cursor:default}
.portal-doc .document .pack-version-said{margin-top:4px}
@media (max-width:999px){.pack-versions-head{display:none}.portal-doc .document .pack-version-row{grid-template-columns:1fr}.pack-version.mine{order:0}.pack-version.offered{order:1}}
/* /#reverse */
/* #review — both doors on a phone: the field on the first screen, under a shorter headline and lede */
@media (max-width:520px){
  .portal-open .open-hero h1{font-size:38px}
  .portal-open .open-hero .lede{margin-top:14px;font-size:16.5px;line-height:1.5}
  .portal-open .open-grid{margin-top:24px}
  .portal-open .open-composer{padding:16px 16px 14px}
}
/* /#review */
/* #layout — two columns on a wide screen (Michael, 21 October): the composer, with the alternatives under it at its
   width, on the left; "What you leave with" as a narrower column of three stacked items on the right, its top at the
   composer's top edge; one column on a phone: the composer, the outcomes, the alternatives. The same on both doors. */
.open-grid{margin-top:40px}
.open-grid .open-composer{margin-top:0}
.portal-open .open-hero .open-get{max-width:none;margin:0;padding-top:0;border-top:0}
.portal-open .open-hero .open-get::before{display:none}
.open-hero .open-get h2{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.6;font-weight:550;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.open-hero .get-cols{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:18px}
.open-hero .get-cols h3{font-size:16px}
.open-hero .get-cols p{margin-top:4px;font-size:14.5px;line-height:1.5}
@media (min-width:1100px){
  .portal-open .open-hero{max-width:1120px}
  .open-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;align-items:start}
}
@media (max-width:1099px){
  .open-grid{display:flex;flex-direction:column;gap:32px}
  .open-main{display:contents}
  .open-grid .open-composer{order:1}
  .open-hero .open-get{order:2}
  .open-grid .open-kind{order:3;margin-top:0}
}
/* /#layout */
/* #term — a technical word as an expansion (page.js #term): on a wide screen the plain words, underlined dotted, carry
   the technical word as their title; on a phone a details element closed on the plain words, the technical word under
   them on a tap. The site's tokens only. */
.msg.bot .say span.term,.msg.bot .say details.term summary{text-decoration:underline dotted var(--muted);text-decoration-thickness:1px;text-underline-offset:3px}
.msg.bot .say span.term{cursor:help}
.msg.bot .say details.term{display:block}
.msg.bot .say details.term summary{display:block;cursor:pointer;list-style:none}
.msg.bot .say details.term summary::-webkit-details-marker{display:none}
.msg.bot .say details.term .term-technical{display:block;margin-top:4px;color:var(--muted);font-family:var(--mono);font-size:.85em}
/* /#term */