/* The CRM page: the file of one organization (js/file.js), the cards and the draft sheet of Claude (js/claude.js),
   and the states of a file (a lost file, do not contact; js/states.js). Loaded after lists.css, before marketing.css.
   Research (an RFP) and Parked and lost use the head and the columns of a file too. Use the tokens of ws.css and
   app.css; never a raw color. Dates are Space Grotesk with tabular figures; money in a list of figures is mono. */

/* ===== The file of one organization ===== */
/* The head is a raised band across the top: where it is, the monogram, the name, the status, the track, the tabs on its edge. */
.page-file { padding-top: 0; }
.page-file > :first-child:not(.file-band) { margin-top: 28px; }
.file-band { margin: 0 calc(-1 * var(--pad)); padding: 24px var(--pad) 0; border-bottom: 1px solid var(--line); background: var(--raised); }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 500 var(--t-sm) var(--sans); }
.crumbs > span[aria-hidden] { color: var(--faint); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.file-head { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.file-mono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent); font: 600 17px/1 var(--sans); letter-spacing: .01em; }
.file-name { flex: 1; min-width: 0; }
.file-sub { margin-top: 4px; color: var(--muted); font: 400 var(--t-md) var(--sans); overflow-wrap: anywhere; }
.file-sub > .chip { margin-right: 4px; vertical-align: 1px; }
.file-sub .link { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.file-sub .link:hover { color: var(--ink); text-decoration-color: currentColor; }
.file-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.file-back, .file-status, .file-bar { display: none; }
.owner-btn { display: inline-grid; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.av-btn { padding: 0; border: 0; border-radius: 50%; background: none; }
/* The track: the status and the date of each change */
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 213px)) auto; margin: 32px 0 0 2px; }
.track li { position: relative; min-width: 0; padding-top: 22px; }
.file-band .track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 24px; }
.file-band .track li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding-top: 18px; padding-right: 12px; }
.file-band .track .mono { margin-top: 0; }
.file-band .track .mono:empty { display: none; }
.track li::before { content: ""; position: absolute; top: 4px; right: -4px; left: 4px; height: 2px; border-radius: 1px; background: var(--line); }
.track li:last-child::before { display: none; }
.track li.is-passed::before { background: var(--brand); }
.track li::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.track li.is-next::after { border: 2px solid var(--line-2); background: var(--raised); }
.track li.is-now::after { top: -3px; left: -3px; width: 16px; height: 16px; background: radial-gradient(circle, var(--raised) 0 3px, var(--brand) 3.6px); }
.track b { display: block; font: 500 var(--t-sm) var(--sans); white-space: nowrap; }
.track .is-next b { color: var(--muted); font-weight: 400; }
/* The date of a stop: Space Grotesk with tabular figures, so "Oct 12 · now" never breaks in the middle. */
.track .mono { display: block; min-height: 16px; margin-top: 2px; color: var(--muted); font: 400 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.track .is-now .mono { color: var(--accent); font-weight: 500; }
.track li.is-now b { font-weight: 600; }
.track li.is-end::after { top: -3px; left: -3px; width: 16px; height: 16px; background: var(--brand); }
/* The tick of the last stop: the color of text on the solid color, cut out by a mask (the last stop has no line). */
.track li.is-end::before { display: block; top: -3px; right: auto; left: -3px; z-index: 1; width: 16px; height: 16px; background: var(--on-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.8 2.8L14 7.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.8 2.8L14 7.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.track li.is-end .mono { color: var(--accent); }
.track-s { grid-template-columns: repeat(4, minmax(0, 166px)) auto; margin: 28px 0 0 2px; }
.track-s b { font-size: 13px; line-height: 18px; }
.page-file .ptabs { margin-top: 20px; border-bottom: 0; }
/* The story at the left; the next step and the other cards at the right */
.file-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: none; gap: 16px 24px; margin-top: 24px; }
.file-cols .story, .file-cols .next { grid-column: auto; grid-row: auto; }
.file-cols .side { grid-column: 2; grid-row: auto; }
.file-cols.is-drop { outline: 2px dashed var(--accent); outline-offset: 12px; border-radius: 12px; }
/* The Next step: the one strong card of the page (--strong: Storm on light; on dark a raised Night with an edge). Its
   actions are quiet outlines; only an action that the page marks as the one to take (Yes, it is sent) is filled. Its
   menus float outside it (core.js), so they look like every menu. */
.next { grid-column: 2; grid-row: 1; padding: 20px; border-color: var(--strong-edge); background: var(--strong); color: var(--on-strong); box-shadow: var(--shadow-sm); }
.next.is-overdue { box-shadow: var(--shadow-sm), inset 0 3px 0 var(--late-on-strong); }
.next > .label:first-child { color: var(--on-strong-2); font: 500 var(--t-sm) var(--sans); }
.next > .label.is-late { color: var(--late-on-strong); }
.next > .menu-wrap { position: absolute; top: 16px; right: 16px; }
.next-owner { position: absolute; top: 16px; right: 16px; }
.next-title { margin-top: 8px; padding-right: 40px; font: 600 var(--t-h2) var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.next-sub { margin-top: 6px; color: var(--on-strong-2); font: 400 var(--t-sm) var(--sans); }
.label-due { margin-top: 6px; color: var(--on-strong-2); font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; }
.next .label-due.is-late, .next .next-sub.is-late { color: var(--late-on-strong); font-weight: 500; }
.next .ask-step { color: var(--on-strong); }
.next .actions { margin-top: 16px; gap: 8px; }
.next .btn { border-color: color-mix(in srgb, var(--on-strong) 32%, transparent); background: transparent; color: var(--on-strong); }
.next .btn:hover { border-color: color-mix(in srgb, var(--on-strong) 56%, transparent); background: color-mix(in srgb, var(--on-strong) 8%, transparent); }
.next .actions > .btn:not(.btn-line) { border-color: var(--on-strong); background: var(--on-strong); color: var(--strong); }
.next .actions > .btn:not(.btn-line):hover { background: color-mix(in srgb, var(--on-strong) 88%, var(--strong)); }
.next :focus-visible { outline-color: var(--strong-focus); }
.next .link { color: var(--on-strong); text-decoration: underline; text-underline-offset: 3px; }
.next .av-1 { background: color-mix(in srgb, var(--on-strong) 14%, var(--strong)); color: var(--on-strong); box-shadow: inset 0 0 0 1px var(--on-strong-2); }
.next-form { display: grid; gap: 12px; }
.next-form .next-title { margin-bottom: 6px; }
.next-form .actions { margin-top: 8px; }
.story { grid-column: 1; grid-row: 1 / span 2; min-width: 0; padding-top: 0; }
.story h2 { font: 600 var(--t-h3) var(--sans); }
.story > .card + h2 { margin-top: 28px; }
/* The composer: a raised field; it opens the note sheet. */
.composer { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); color: var(--muted); font: 400 var(--t-md) var(--sans); text-align: left; cursor: text; }
.composer:hover { border-color: var(--line-2); }
.composer-add { display: inline-grid; place-items: center; flex: none; height: 32px; padding: 0 12px; border-radius: var(--r-md); background: var(--tint); color: var(--ink); font: 500 var(--t-sm) var(--sans); }
.story > .card + .composer { margin-top: 16px; }
.note-form { display: grid; gap: 12px; max-width: 804px; margin-top: 18px; }
/* The timeline of the story */
.tl { position: relative; margin-top: 16px; }
.tl li { position: relative; display: grid; grid-template-columns: 64px 20px minmax(0, 1fr); padding-bottom: 16px; }
.tl li + li { padding-top: 16px; border-top: 1px solid var(--line); }
.tl li > :not(time):not(i) { min-width: 0; }
.tl time { padding-top: 1px; color: var(--muted); font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.tl i { width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.tl h3 { font: 500 var(--t-md) var(--sans); overflow-wrap: anywhere; }
.tl p { margin-top: 4px; color: var(--muted); font: 400 var(--t-body) var(--sans); }
.tl p.ink { color: var(--ink); }
.tl li.is-removed h3 { color: var(--muted); text-decoration: line-through; }
.tl li.is-wait i { background: var(--caution); }
.tl li.is-wait h3 { font-weight: 500; }
.tl-more { margin: 0 0 0 84px; font-size: 14px; }
.tl .link, .tl-more .link { font-weight: 500; }
.file-chip { display: inline-block; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--raised); color: var(--ink); font: 400 var(--t-xs) var(--mono); overflow-wrap: anywhere; }
a.file-chip { text-decoration: none; }
a.file-chip:hover { border-color: var(--line-2); background: var(--hover); }
.side { grid-column: 2; grid-row: 2; display: grid; gap: 16px; align-content: start; }
.side .card.pad { padding: 20px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.sec-head h2, h2.sec-gap { font: 600 var(--t-h3) var(--sans); }
.sec-head .link { font: 500 var(--t-sm) var(--sans); }
.sec-gap { margin-top: 36px; }
.sec-head + .label { margin-top: 4px; }
.sec-head + .card { margin-top: 12px; }
/* A link at the foot of a side card ("Price it in Pricing") */
.card-link { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-link .link { font: 500 var(--t-sm) var(--sans); }
/* Where it stands, the people, the facts, the fixed fee */
.stands-text { margin-top: 10px; font: 400 var(--t-body) var(--sans); }
.stands > p:last-child { margin-top: 16px; }
.stands .link, .care .link { font: 500 var(--t-sm) var(--sans); }
.people-card { padding: 20px 20px 12px; }
.whos { margin-top: 8px; }
.who { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.who + .who { margin-top: 0; }
.who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.who .ini-36 { width: 32px; height: 32px; }
.who-av { width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: var(--accent); font: 500 14px/44px var(--sans); text-align: center; }
.who:last-child { border-bottom: 0; }
.who > div { display: grid; gap: 0; margin: 0; min-width: 0; }
.who b { font: 500 var(--t-md) var(--sans); overflow-wrap: anywhere; }
.who > div span, .who a { font: 400 var(--t-sm) var(--sans); }
.who > div span { color: var(--muted); }
.people-card > .quiet { margin: 10px 0 8px; font: 400 var(--t-sm) var(--sans); }
.warnline, .inferred-line { display: flex; align-items: center; gap: 8px; }
.warnline { margin-top: 12px; color: var(--caution); font: 400 var(--t-sm) var(--sans); }
.warnline-row { margin-top: 16px; }
.warnline-row .link { margin-left: 6px; font-weight: 500; }
.inferred-line { margin-top: 12px; color: var(--muted); font-size: 13px; }
.inferred-line .label { margin-left: auto; }
.fee-figure { margin-top: 8px; color: var(--ink); font: 600 var(--t-h2) var(--sans); font-variant-numeric: tabular-nums; }
.fee-figure.is-none { color: var(--muted); font: 500 var(--t-lg) var(--sans); }
.fee-sub { margin-top: 2px; color: var(--muted); font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; }
.facts-card { padding: 20px; overflow: visible; }
.facts { margin-top: 6px; }
.fact { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; padding: 8px 0 7px; border-bottom: 1px solid var(--line); }
.fact:last-child { padding-bottom: 0; border-bottom: 0; }
.fact dt { color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.fact dd { font: 400 var(--t-md) var(--sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fact dd.mono { color: var(--ink); font: 400 var(--t-sm) var(--mono); }
.facts .fact { grid-template-columns: 132px minmax(0, 1fr) auto; column-gap: 0; padding: 8px 0; }
.facts dd.mono { color: var(--ink); }
.facts .dot { align-self: center; margin-left: 8px; }
.fact.is-open { margin: 0 -12px; padding-right: 12px; padding-left: 12px; border-radius: var(--r-sm); background: var(--tint); }
.fact-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.fee-form { display: flex; gap: 8px; }
.facts-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.side .facts dd { text-align: right; }
/* A fact that Claude inferred: the panel to confirm or fix it */
.factpop { position: absolute; top: -140px; right: calc(100% + 24px); z-index: 6; width: 360px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); box-shadow: var(--shadow-md); font: 400 var(--t-body) var(--sans); text-align: left; cursor: default; }
.factpop .card-top b { font: 600 var(--t-h3) var(--sans); }
.factpop .label.gap { margin: 16px 0 4px; }
.factpop .actions { margin-top: 16px; gap: 8px; }
.factpop-fix { display: flex; gap: 8px; margin-top: 10px; }
.factpop-fix .input { height: 36px; }
.factpop .card-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
/* The Care plan */
.care .figure-m + .label { margin-top: 8px; }
.care-covers { margin-top: 12px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 var(--t-body) var(--sans); }
.care > p:last-child { margin-top: 12px; }
.care-add { display: flex; gap: 8px; margin-top: 12px; }
.care-add .input { height: 36px; }
/* The brief */
.brief { padding: 20px 24px 4px; }
.brief-by { display: inline-flex; align-items: center; gap: 10px; }
.brief-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto 24px; column-gap: 0; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.brief-row:first-of-type { margin-top: 8px; }
.brief-label { display: grid; gap: 6px; justify-items: start; padding-top: 1px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.brief-text { font: 400 var(--t-body) var(--sans); }
.brief-text .sub { margin-top: 4px; font-size: 13px; }
.brief-refs { padding: 3px 0 0 16px; }
.brief-row .dot { margin: 7px 0 0 auto; }
.brief-sources { border-bottom: 0; }
.brief-sources ol { display: grid; gap: 8px; grid-column: 2 / -1; padding-top: 2px; }
.brief-sources li { display: flex; gap: 12px; }
.brief-sources b { color: var(--ink); font-weight: 400; }
.t-check { margin-top: 16px; }
.t-check .thead, .t-check .trow { grid-template-columns: 130px minmax(0, 1fr) auto; column-gap: 0; }
.t-check .trow { align-items: center; padding: 12px 0; }
.t-check .trow b { font: 500 var(--t-md) var(--sans); }
.sev { display: flex; align-items: center; gap: 10px; }
.sev i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--tint); font: 500 12px/1 var(--mono); }
.sev .sev-4, .sev .sev-5 { background: var(--late-soft); color: var(--late); }
.sev .sev-3 { background: var(--caution-soft); color: var(--caution); }
/* The proposal and signed work */
.prop { padding: 24px; }
.prop-title { margin-top: 10px; font: 600 var(--t-h2) var(--sans); }
.prop-title .tag { vertical-align: 3px; margin-left: 6px; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.figures-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures .figure-m { font: 600 var(--t-h2) var(--sans); font-variant-numeric: tabular-nums; }
.prop .label.gap, .prop .card-top.gap { margin-top: 20px; }
.scope { display: grid; gap: 10px; margin-top: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.scope li { display: flex; gap: 14px; font: 400 var(--t-body) var(--sans); }
.scope .mono { padding-top: 2px; }
.prop-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 20px; }
.prop-foot .actions { gap: 16px; }
.prop-foot .link { font: 500 var(--t-sm) var(--sans); }
.prop .lines { margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.prop .lines .line:last-child { padding-bottom: 12px; }
.prop .line-date > span:nth-child(2) { font-size: 14px; }
.made-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font: 400 var(--t-body) var(--sans); }
.t-made { margin-top: 16px; border-top: 1px solid var(--line); }
.t-made .trow { grid-template-columns: 420px minmax(0, 1fr); padding: 12px 0; }
.t-made .mono b { color: var(--ink); font-weight: 500; }
.range { position: relative; height: 3px; margin-top: 24px; border-radius: 2px; background: var(--line); }
.range i { position: absolute; top: -5px; width: 2px; height: 13px; background: var(--brand); }
.range-ends { display: flex; justify-content: space-between; margin-top: 12px; }
.est-note { margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font: 400 var(--t-body) var(--sans); }
.rules { display: grid; gap: 12px; margin-top: 12px; }
.rules li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; font: 400 var(--t-body) var(--sans); }
.rules i { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--ink-2); font: 500 12px/22px var(--sans); font-style: normal; text-align: center; }
/* A narrow window: the file is one column. */
@media (max-width: 1099px) {
  .file-cols { display: block; }
  .file-cols > * + * { margin-top: 24px; }
  .file-cols .side { margin-top: 24px; }
  .side { margin-top: 16px; }
  .factpop { position: static; width: auto; margin-top: 12px; grid-column: 1 / -1; }
  /* The file of an organization: the next step first, then the story, then the other cards, as on a phone. */
  .file-band ~ .file-cols { display: flex; flex-direction: column; gap: 16px; }
  .file-band ~ .file-cols > * + * { margin-top: 0; }
  .file-band ~ .file-cols .side { display: contents; }
  .file-band ~ .file-cols .next { order: -2; }
  .file-band ~ .file-cols .story { order: -1; margin-bottom: 8px; }
}
/* The phone: the next step first, then the story, then the other cards (design 8.5), and the actions in a bar at the
   bottom: the main one, and "More actions" for the others. */
@media (max-width: 759px) {
  .page-file { min-height: 100dvh; }
  .file-back { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 -4px 0 -8px; }
  .file-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding-right: 12px; color: var(--ink-2); font: 500 var(--t-md) var(--sans); text-decoration: none; }
  .file-band { padding-top: 8px; }
  .crumbs, .file-actions, .track, .file-mono, .file-sub > .chip, .composer { display: none; }
  .file-head { margin-top: 0; }
  .page-file .ptabs { margin-top: 16px; }
  .file-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .chip-btn { cursor: pointer; }
  .file-status .chip-btn { position: relative; height: 28px; padding: 0 10px; }
  .file-status .chip-btn::after { content: ""; position: absolute; inset: -8px -4px; }
  .file-status .label { font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; }
  .page-file .title { font-size: 24px; line-height: 30px; }
  .file-sub { margin-top: 4px; font-size: 14px; line-height: 20px; }
  .file-role { display: none; }
  .file-cols { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
  .file-cols > * + * { margin-top: 0; }
  .file-cols .side { display: contents; }
  .file-cols .next { order: -2; }
  .file-cols .story { order: -1; }
  .next { padding: 16px; }
  .next > .menu-wrap { display: none; }
  .next-title { padding-right: 36px; font-size: 20px; line-height: 26px; }
  .next .actions { flex-wrap: nowrap; gap: 8px; }
  .next .actions .btn, .next .actions > .menu-wrap { flex: 1 1 0; min-width: 0; }
  .next .actions .btn { height: 44px; padding: 0 8px; }
  .next .actions > .menu-wrap > .btn { width: 100%; }
  .story > h2, .story .prop-title { font-size: 17px; line-height: 22px; }
  .tl::before, .tl i { display: none; }
  .tl li { grid-template-columns: 56px minmax(0, 1fr); padding-bottom: 16px; }
  .tl p { margin-top: 4px; line-height: 20px; }
  .fact { grid-template-columns: 116px minmax(0, 1fr); }
  .facts .fact { grid-template-columns: 116px minmax(0, 1fr) auto; }
  .prop { padding: 16px; }
  .figures, .figures-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief { padding: 16px 16px 4px; }
  .brief-row { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 6px; }
  .brief-row .brief-label { grid-column: 1 / -1; }
  .brief-row .brief-refs { grid-column: 1; padding: 0; }
  .brief-row .dot { grid-column: 2; grid-row: 2; }
  .brief-sources ol { grid-column: 1 / -1; }
  .t-made .trow { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  /* Tap targets of 44px without a change of the layout: the owner of the step and the small links of a card. */
  .owner-btn, .card-top .link, .card-link .link, .warnline-row .link { position: relative; }
  .owner-btn::after { content: ""; position: absolute; inset: -8px; }
  .card-top .link::after, .card-link .link::after, .warnline-row .link::after { content: ""; position: absolute; inset: -12px -8px; }
  .file-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; display: flex; gap: 8px; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--raised); }
  .file-bar > .btn { flex: 1; height: 44px; }
  .file-bar > .menu-wrap { flex: none; }
  .file-bar-more { width: 44px; height: 44px; padding: 0; }
}

/* ===== Claude: the card of a draft or a tip above the story, the draft sheet ===== */
.ccard { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 0; align-items: start; padding: 20px; }
.ccard h3 { margin-top: 4px; font: 600 var(--t-h3) var(--sans); }
.ccard p { margin-top: 4px; max-width: 520px; color: var(--muted); font: 400 var(--t-body) var(--sans); }
.ccard p.label { margin-top: 0; color: var(--muted); font: 500 var(--t-xs) var(--sans); }
.ccard p.label-accent { color: var(--accent); }
.ccard-side { display: grid; justify-items: end; gap: 16px; padding-left: 16px; }
.ccard-side .actions { gap: 16px; }
.ccard-side > .label { font: 400 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ccard-help .ccard-side, .ccard-state .ccard-side { align-self: center; }
.ccard-state h3 { margin-top: 0; font: 600 var(--t-h3) var(--sans); }
.ccard-ic { display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); }
.ccard-ic.is-late { color: var(--late); }
.ccard-state.is-failed { box-shadow: inset 3px 0 0 var(--late); }
.ccard-row { display: flex; align-items: center; gap: 16px; }
.ccard-row .link { font: 500 var(--t-sm) var(--sans); }
.kick-c { display: inline-flex; align-items: center; gap: 8px; }
.sheet-who .chip { vertical-align: 1px; margin-left: 6px; }
.draft-why { margin-top: 8px; font: 400 var(--t-lg) var(--sans); }
.draftbox { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.draftbox.is-edit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.draft-row { display: grid; grid-template-columns: 64px auto minmax(0, 1fr) auto; column-gap: 0; align-items: center; min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--sunken); font: 400 var(--t-sm) var(--sans); }
.draft-row b { margin-right: 10px; font: 500 var(--t-md) var(--sans); }
.draft-text { padding: 16px; font: 400 15px/24px var(--sans); }
.draft-text p + p { margin-top: 12px; }
.draft-edit { display: block; width: 100%; min-height: 150px; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; resize: vertical; }
.draft-orig { margin-top: 8px; color: var(--muted); font: 400 var(--t-body) var(--sans); }
.agenda { display: grid; gap: 10px; }
.agenda li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 60px; column-gap: 0; align-items: baseline; }
.agenda .mono { justify-self: end; grid-column: 3; }
.agenda li > span:nth-child(2) { max-width: 330px; }
.agenda-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tags .tag { padding: 3px 8px; font-size: 12px; line-height: 16px; }
.progress-run { width: 100%; max-width: 500px; margin-top: 12px; }
.progress-run i { width: 38%; }
.ask-step { margin-top: 8px; font: 400 var(--t-md) var(--sans); }
.ask-actions { margin-top: 16px; }
.ask-actions .foot-note { text-align: right; line-height: 17px; }
@media (max-width: 759px) {
  .story .ccard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; }
  .story .ccard > :nth-child(3) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-left: 0; }
}

/* ===== The growth desk on a prospect's file (js/file.js focusCard, the sheets of the hook, the check and Not now) ===== */
/* The Focus card is the Next step card of a prospect: the stage, the grade at the right, the action, why, the five checks
   before outreach, the one solid action, and two quiet ways out. All on the strong ground. */
.focus .focus-grade { position: absolute; top: 18px; right: 20px; display: flex; }
.focus .grade { border-color: color-mix(in srgb, var(--on-strong) 36%, transparent); background: transparent; color: var(--on-strong); box-shadow: none; }
.focus .grade-a1, .focus .grade-a2, .focus .grade-b1 { border-color: var(--on-strong); background: var(--on-strong); color: var(--strong); }
.focus .next-sub { max-width: 34ch; }
.focus-count { margin-top: 18px; color: var(--on-strong-2); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; }
.focus-list { margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--on-strong) 14%, transparent); }
.focus-list li { border-bottom: 1px solid color-mix(in srgb, var(--on-strong) 14%, transparent); }
.focus-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 14px; column-gap: 10px; align-items: center; width: 100%; min-height: 40px; padding: 0;
  border: 0; background: none; color: var(--on-strong); font: 500 var(--t-md) var(--sans); text-align: left; text-decoration: none; }
button.focus-row { cursor: pointer; }
a.focus-row:hover .focus-name, button.focus-row:hover .focus-name { text-decoration: underline; text-underline-offset: 3px; }
.focus-row .icon-right { color: var(--on-strong-2); }
.focus-mark { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--on-strong-2); border-radius: 50%; color: var(--strong); }
.focus-row.is-done { color: var(--on-strong-2); font-weight: 400; }
.focus-row.is-done .focus-mark { border-color: var(--on-strong); background: var(--on-strong); }
.focus-row.is-done .focus-mark .icon { stroke-width: 2.4; }
.focus-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-note { overflow: hidden; max-width: 150px; color: var(--on-strong-2); font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.focus .actions { margin-top: 18px; }
.focus .actions > .btn { min-width: 160px; }
.focus-links { display: flex; gap: 20px; margin-top: 14px; }
.focus-links .link { color: var(--on-strong-2); font: 500 var(--t-sm) var(--sans); text-decoration: none; }
.focus-links .link:hover { color: var(--on-strong); text-decoration: underline; text-underline-offset: 3px; }
/* While Claude works or outreach waits: a quiet line in place of the button. */
.focus .pwait { color: var(--on-strong-2); font-size: var(--t-md); }
.focus .pwait .cl { background: var(--on-strong); color: var(--strong); }
.focus.is-snoozed .next-title { padding-right: 56px; }
/* The brief: its depth next to the legend. The hooks Claude found under it. */
.brief-marks { display: inline-flex; align-items: center; gap: 12px; }
.card.hooks-card { padding: 0 20px; }
.hooks-card .lines { margin-top: 0; }
.hooks-card .lines .line:last-child { padding-bottom: 12px; }
.story > .ccard-state + .card { margin-top: 12px; }
.line-hook .sub .link-ext, .hook-src .link-ext { color: var(--muted); font-weight: 400; }
.line-hook .sub .link-ext:hover, .hook-src .link-ext:hover { color: var(--ink); }
.line-hook { align-items: flex-start; justify-content: space-between; gap: 16px; }
.line-hook > div { flex: 1; min-width: 0; }
.line-hook b { font-weight: 500; }
.line-hook .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-top: 4px; }
.line-hook .sub .link-ext { font-weight: 400; }
.line-hook > .link, .line-hook > .tag { flex: none; margin-top: 2px; font: 500 var(--t-sm) var(--sans); }
/* Pick the hook: each candidate a radio with its source at the right; "Write your own" opens a field and its source. */
.hook-opts { display: grid; gap: 8px; margin-top: 8px; }
.hook-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.hook-opt:hover { border-color: var(--line-2); }
.hook-opt.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hook-head { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: start; cursor: pointer; }
.hook-head > i { margin-top: 2px; }
.hook-text b { display: block; font: 500 var(--t-md) var(--sans); overflow-wrap: anywhere; }
.hook-text .sub { margin-top: 2px; }
.hook-src { padding-top: 1px; font: 400 var(--t-sm) var(--sans); white-space: nowrap; }
.hook-own { display: grid; gap: 12px; margin-top: 16px; }
/* Check conflicts (rule 2): a row for each founder, the state at the right. */
.checkrows { margin-top: 16px; border-top: 1px solid var(--line); }
.checkrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); }
.checkrow b { font: 500 var(--t-md) var(--sans); overflow-wrap: anywhere; }
.checkrow-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkrow.is-clear .checkrow-state { color: var(--good); font-weight: 500; }
/* The facts of a message by Claude, each with its source. */
.claims { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.claims li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 var(--t-body) var(--sans); }
.claims li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.claims .link-ext { flex: none; }
.held-line { margin-top: 4px; color: var(--ink-2); font-size: var(--t-sm); }
/* An opener in edit: the checks wait for the save (js/claude.js editChecks). */
.pchecks-wait { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.person-facts { margin-top: 16px; }
.person-facts .fact dd { overflow-wrap: anywhere; }
/* Two cards of Claude above the story: the people it found, then a draft. */
.story > .ccard + .ccard { margin-top: 12px; }
@media (max-width: 759px) {
  .focus .focus-grade { top: 14px; right: 16px; }
  .focus .actions > .btn { flex: 1 1 auto; }
  .focus-row { min-height: 44px; }
  .focus-note { max-width: 120px; }
  .focus-links .link { position: relative; }
  .focus-links .link::after { content: ""; position: absolute; inset: -12px -8px; }   /* a 44px tap target */
  .hook-opt { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .hook-src { padding-left: 30px; }
  .claims li { flex-direction: column; gap: 4px; }
}

/* ===== A file that moved or is not here, and do not contact (design 9.5, 9.6) ===== */
.page-lost { justify-content: center; align-items: center; }
.lost { display: grid; justify-items: center; gap: 0; max-width: 480px; padding-bottom: 80px; text-align: center; }
.lost > .file-chip { color: var(--muted); }
.lost .title { margin-top: 16px; }
.lost .lede { margin-top: 6px; }
.lost .actions { justify-content: center; margin-top: 24px; }
.lost > .sub { margin-top: 20px; }
.lost kbd { margin: 0 4px; }
.while { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 3px 0 0 var(--late); }
.while h2 { font: 600 var(--t-h3) var(--sans); }
.while .lines { max-width: 730px; margin-top: 4px; }
.while .line { padding: 8px 0; font: 400 var(--t-body) var(--sans); }
@media (max-width: 759px) {
  .lost { padding-bottom: 0; }
}