/* The CRM page: the board and Next steps (js/daily.js), the first day of the board (js/states.js), and the stage
   buttons of a phone. Loaded after app.css (the core: tokens, controls, the frame, sheets) and before lists.css.
   Use the tokens of ws.css and app.css; never a raw color. */

/* ===== The board ===== */
/* Each status is a lane: the sunken fill with 12px corners, from the head of the page to the shelf. The lane head is one
   line: the dot, the name, the count, and at the right the sum of the fixed fees, so every lane starts at one height. */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; flex: 1 0 auto; margin: 24px 0 16px; }
.col { --c: var(--s-new); display: flex; flex-direction: column; min-width: 0; padding: 4px 8px 8px; border-radius: var(--r-lg); background: var(--sunken); }
.col-contacted { --c: var(--s-contacted); }
.col-call-booked { --c: var(--s-call-booked); }
.col-proposal { --c: var(--s-proposal); }
.col-won { --c: var(--s-won); }
.col-head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px; }
.col-head::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.col-head h2 { min-width: 0; overflow: hidden; color: var(--ink); font: 600 var(--t-sm) var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.col-head .num { flex: none; color: var(--muted); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; }
.col-sum { flex: none; margin-left: auto; color: var(--ink-2); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-cards { display: grid; flex: 1 0 auto; gap: 8px; align-content: start; min-height: 64px; }
.col.is-drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.col-none { padding: 4px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
/* A card: a link to the file (the name covers it), a hairline, 10px corners inside the 12px lane. No lift: the edge darkens. */
.bcard { position: relative; display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); box-shadow: var(--shadow-xs); color: var(--ink); text-decoration: none; }
.bcard:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.bcard.is-ask { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bcard.is-dragged { opacity: .5; }
.bcard[draggable="true"] { cursor: grab; }
.bcard-eyebrow { margin-bottom: 6px; color: var(--accent); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; }
.bcard-eyebrow.is-rfp { color: var(--violet); }
.bcard-org { font: 500 var(--t-md) var(--sans); overflow-wrap: anywhere; }
a.bcard-org { color: inherit; text-decoration: none; }
a.bcard-org::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
a.bcard-org:focus-visible { outline: none; }
a.bcard-org:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.bcard-who { margin-top: 2px; color: var(--muted); font: 400 var(--t-sm) var(--sans); overflow-wrap: anywhere; }
.bcard-msg { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--muted); font: 400 var(--t-sm) var(--sans); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bcard .tag { margin-top: 0; }
.bcard .menu-wrap { z-index: 1; }
/* The top row: the name, and at the right the marks (a draft by Claude, the owner). */
.bcard-top { display: flex; align-items: flex-start; gap: 8px; }
.bcard-top .bcard-org { flex: 1; min-width: 0; }
.bcard-marks { display: flex; flex: none; align-items: center; gap: 4px; }
/* The meta row: the need, and at the right the fixed fee. */
.bcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.bcard-meta .tag { min-width: 0; padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; }
.bcard-fee { flex: none; color: var(--ink); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The plan: the next step, then one line with its date and the status menu. */
.bcard-plan { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.bcard-task { display: -webkit-box; overflow: hidden; color: var(--ink-2); font: 400 var(--t-sm) var(--sans); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bcard-task.is-none { color: var(--late); }
.bcard-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.bcard-when { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--muted); font: 400 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.bcard-when .icon { flex: none; }
.bcard-when.is-late { color: var(--late); font-weight: 500; }
.bcard-ask { color: var(--accent); font: 500 var(--t-sm) var(--sans); }
.bcard-menu { width: 24px; height: 24px; margin: 0 -4px 0 0; border-radius: var(--r-sm); }
.bcard-menu[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
/* With a mouse the menu shows on the card that the pointer or the focus is on; on a touch screen it always shows. */
@media (hover: hover) and (pointer: fine) {
  .bcard .bcard-menu { opacity: 0; }
  .bcard:hover .bcard-menu, .bcard:focus-within .bcard-menu, .bcard-menu[aria-expanded="true"] { opacity: 1; }
}
/* The cards of Marketing (js/marketing.js) use the parts above and this foot. */
.bcard-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.bcard-next { display: grid; gap: 4px; }
.bcard-step { color: var(--ink-2); font: 400 var(--t-sm) var(--sans); overflow-wrap: anywhere; }
.bcard-step.is-ask { color: var(--accent); font-weight: 500; }
.bcard-step.is-none { color: var(--late); }
.bcard-due { color: var(--muted); font: 400 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; }
.bcard-due.is-late { color: var(--late); font-weight: 500; }
/* The shelf below the lanes: Parked and Lost, two links of one style, and the parked work between them. */
.shelf { display: flex; align-items: center; gap: 8px 20px; margin: auto 0 24px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.page > :has(+ .shelf) { margin-bottom: 16px; }
.shelf-link { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 28px; color: var(--ink-2); font: 500 var(--t-sm) var(--sans); text-decoration: none; }
.shelf-link .num { font-size: 12px; }
.shelf-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.shelf-items { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-width: 0; }
.shelf-item { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; color: var(--ink); text-decoration: none; }
.shelf-item b { font: 500 var(--t-sm) var(--sans); }
.shelf-item span:not(.av):not(.chip) { color: var(--muted); font: 400 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shelf-item:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* The same strip on Research and Marketing: a label, the items, and a link at the end. */
.shelf-item .chip { color: var(--c); font: 500 var(--t-xs) var(--sans); }
.shelf > .label { flex: none; color: var(--ink-2); font: 500 var(--t-sm) var(--sans); }
.shelf-lost { margin-left: auto; }
/* The page while the first answer is on its way: bars in place of words */
.sk { display: inline-block; border-radius: 6px; background: var(--line); opacity: .6; animation: sk 1.2s ease-in-out infinite alternate; }
.sk-card { gap: 10px; }
.sk-card:hover { border-color: var(--line); box-shadow: var(--shadow-xs); }
.sk-board .col-head { margin-bottom: 4px; }
.page-head .sk + br + .sk { margin-top: 14px; }
@keyframes sk { to { opacity: .3; } }
/* A narrow window (the rail): the board scrolls sideways, lanes of 184px. */
@media (max-width: 1099px) {
  .board { grid-template-columns: repeat(5, minmax(184px, 1fr)); overflow-x: auto; margin-right: calc(-1 * var(--pad)); margin-left: -2px; padding: 2px var(--pad) 12px 2px; scrollbar-width: thin; }
}
@media (max-width: 759px) {
  .board { display: block; overflow: visible; margin: 0 0 24px; padding: 0; }
  .col { margin-top: 16px; padding: 4px 8px 8px; scroll-margin-top: 64px; }
  .col-cards { min-height: 0; }
  .bcard { padding: 14px; }
  .bcard-menu { position: relative; width: 32px; height: 32px; margin: -4px -8px -4px 0; }
  .bcard-menu::before { content: ""; position: absolute; inset: -6px; }
  .shelf { display: grid; gap: 4px; padding: 8px 16px; }
  .shelf-items { display: grid; gap: 0; }
  .shelf-items:empty { display: none; }
  .shelf-link, .shelf-item { min-height: 44px; }
  .shelf-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 4px 0; }
  .shelf-item span:not(.av):not(.chip) { grid-column: 1; }
  .shelf-lost { margin-left: 0; justify-self: start; }
  .shelf-item .av { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .bcard { transition: border-color .12s var(--ease), box-shadow .12s var(--ease); }
  .bcard-menu { transition: opacity .12s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .sk { transition: none; animation: none; }
}

/* ===== Next steps ===== */
/* Groups (Emails to approve, Prospects to move, Late, Today, This week, Later), each a heading and a list of rows in one card. A row: the circle (a click
   finishes the step), the step and its organization, the status, the date, the owner, in fixed columns so they align. */
.sgroup + .sgroup { margin-top: 28px; }
.sgroup-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink-2); font: 600 var(--t-sm) var(--sans); }
.sgroup-h .num { font-size: 12px; }
.sgroup-h.is-late { color: var(--late); }
.sgroup-h.is-accent { color: var(--accent); }
.srows { padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.srow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 112px 160px 24px; column-gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.srow-main { display: grid; gap: 2px; min-width: 0; }
.srow-title { overflow: hidden; color: var(--ink); font: 500 var(--t-md) var(--sans); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.srow-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.srow-title.link { color: var(--accent); }
.srow-main .sub { overflow: hidden; margin-top: 0; text-overflow: ellipsis; white-space: nowrap; }
.srow .chip { justify-self: start; }
.srow-when { color: var(--muted); font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.srow-when.is-late { color: var(--late); font-weight: 500; }
.srow-own { display: flex; justify-content: flex-end; }
.srow > .srow-ic { display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.srow.is-request > .srow-ic { color: var(--accent); }
.srows-more { display: flex; align-items: center; min-height: 44px; font: 500 var(--t-sm) var(--sans); }
/* The circle: a click finishes the step (the note sheet opens with "This finishes the step"). */
.circle { position: relative; display: block; width: 18px; height: 18px; border: 1.5px solid var(--field-edge); border-radius: 50%; }
.circle:hover { border-color: var(--accent); background: var(--accent-soft); }
.circle.is-empty { border-style: dashed; }
/* A late step: a card with a red bar at the left, the step, the date, then quiet actions. */
.latecards { display: grid; gap: 12px; }
.latecard { padding: 14px 16px 0; overflow: hidden; box-shadow: inset 3px 0 0 var(--late); }
.latecard-top { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 24px; column-gap: 12px; align-items: start; }
.latecard-top .circle { margin-top: 2px; }
.latecard-title { color: var(--ink); font: 600 var(--t-h3) var(--sans); text-decoration: none; overflow-wrap: anywhere; }
.latecard-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.latecard .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.latecard-when { padding-top: 2px; color: var(--late); font: 500 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.latecard-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; margin: 12px -16px 0 0; padding: 8px 16px 8px 40px; border-top: 1px solid var(--line); }
.latecard-foot .actions { flex-wrap: nowrap; gap: 8px; }
.latecard-draft { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font: 400 var(--t-sm) var(--sans); }
.latecard-draft .link { font-weight: 500; }
.digest .line-plain { font-size: 14px; }
/* Prospects to move (the growth desk): the grade, the name and why, and the one control of the next action. */
.sgroup-link { margin-left: auto; font: 500 var(--t-sm) var(--sans); }
.srow.srow-p { grid-template-columns: 36px minmax(0, 1fr) auto; }
.srow-grade { display: flex; }
.srow-do { display: flex; justify-content: flex-end; }
/* A quiet line in place of a button: Claude works on it (the C mark, as on the Pipeline cards), outreach waits for
   clearance, or the other founder checks next. The Focus card uses it too. */
.pwait { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 400 var(--t-sm) var(--sans); white-space: nowrap; }
.pwait .icon { flex: none; }
/* A side line that goes somewhere: Claude is working, Research to decide. */
.line-go { color: var(--ink); text-decoration: none; }
.line-go > div { flex: 1; min-width: 0; }
.line-go:hover b { text-decoration: underline; text-underline-offset: 3px; }
.line-go > .icon-right { flex: none; color: var(--muted); }
.line-ic { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--ink-2); }
/* A narrow main column, not on a phone: the date goes under the title, so the title keeps its room. */
@media (min-width: 760px) {
  @container (max-width: 640px) {
    .srow { grid-template-columns: 28px minmax(0, 1fr) auto 24px; row-gap: 2px; }
    .srow > .circle, .srow > .srow-ic { grid-row: 1 / span 2; }
    .srow > .srow-when { grid-column: 2; grid-row: 2; }
    .srow > .chip { grid-column: 3; grid-row: 1 / span 2; }
    .srow > .srow-own { grid-column: 4; grid-row: 1 / span 2; }
  }
}
@media (max-width: 759px) {
  /* Tap targets: 44px for a done circle (its ::before). */
  .circle, .latecard-top .circle { width: 22px; height: 22px; }
  .circle::before { content: ""; position: absolute; inset: -11px; }
  .srows { padding: 0 12px; }
  .srow { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 2px; min-height: 64px; }
  .srow .chip { display: none; }
  .srow > .circle, .srow > .srow-ic { grid-row: 1 / span 2; }
  .srow > .srow-when { grid-column: 2; grid-row: 2; }
  .srow > .srow-own { grid-column: 3; grid-row: 1 / span 2; }
  .srow-title { white-space: normal; }
  .srows-more .link { display: inline-flex; align-items: center; min-height: 44px; }   /* a 44px tap target */
  /* A prospect to move: the control goes under its why, with a 40px tap height. */
  .srow.srow-p { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; padding: 12px 0; }
  .srow-p > .srow-grade { align-self: start; padding-top: 1px; }
  .srow-p > .srow-do { grid-column: 2; justify-content: flex-start; }
  .srow-p .srow-main .sub { white-space: normal; }
  .srow-p .btn { height: 40px; }
  .srow-p:nth-child(n+4) { display: none; }   /* three on a phone, so the week below stays near; "See the pipeline" has all */
  .latecard { padding: 14px 12px 0; }
  .latecard-top { grid-template-columns: 28px minmax(0, 1fr) 24px; }
  .latecard-top > .latecard-when { grid-column: 2; grid-row: 2; padding-top: 6px; }
  .latecard-top > .av { grid-column: 3; grid-row: 1; }
  /* One full-width column: the buttons share the whole row (the desktop space-between would shrink it to its content). */
  .latecard-foot { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; margin-right: -12px; padding: 12px 12px 12px 0; }
  .latecard-foot > span:empty { display: none; }
  .latecard-foot .actions { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; }
  .latecard-foot .actions > .menu-wrap { display: grid; }
  .latecard-foot .actions .btn { width: 100%; height: 44px; }
}

/* ===== The sheets of the daily loop: Add, a note, the status, a proposal, signed work (js/daily.js) ===== */
/* An error at its field: right under it, so it is in view next to what it is about. */
.form-error.at-field { display: block; min-height: 0; margin-top: 2px; font: 500 var(--t-xs) var(--sans); }
.form-error.at-field:empty { display: none; }
/* The note sheet: the source and the outcome of a touch (a call, an email or a meeting) under the kind. */
.touch .field { margin-top: 16px; }
.touch + .field { margin-top: 20px; }
.touch-qual { margin-top: 12px; }
/* Move the date: the weekday dates at the right of each choice; a picked date shows there too. */
.pop-date { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pop-pick:empty { display: none; }
/* The status dialog: the stages, a line, then Lost and Parked. */
.choices-line { height: 1px; margin: 6px 12px; border: 0; background: var(--line); }
/* "Price it in Pricing", by a fee. */
.pricing-link { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-xs) var(--sans); }
.pricing-link .icon { flex: none; }
.hint .pricing-link { margin-top: 2px; }
/* A touch screen: a 44px tap area around the small link, without moving the layout. */
@media (pointer: coarse) {
  .pricing-link { position: relative; }
  .pricing-link::after { content: ""; position: absolute; top: 50%; right: -8px; left: -8px; height: 44px; transform: translateY(-50%); }
}
/* The PDF row of a proposal or an agreement: the name of the file in mono, or a quiet "No document yet". */
.docrow-name.is-none { color: var(--muted); font: 400 var(--t-sm) var(--sans); }

/* ===== The calm day of Next steps (design 9.7) ===== */
.calm { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.calm-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--good-soft); color: var(--good); }
.calm-ic .icon { stroke-width: 2.2; }
.calm b { font: 600 var(--t-md) var(--sans); }
.calm .sub { margin-top: 2px; }

/* ===== The first day of the board (design 9.1) ===== */
.page-first .board { flex: none; margin-bottom: 32px; }
.col-empty { display: grid; place-items: center; min-height: 160px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 10px; text-align: center; }
.col-empty.is-first { border-color: var(--accent); background: var(--accent-soft); }
.page-first > .label { color: var(--ink-2); font: 600 var(--t-sm) var(--sans); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 32px; }
.way { display: flex; flex-direction: column; }
.way > .label:first-child { color: var(--muted); font: 500 var(--t-xs) var(--sans); }
.way h3 { margin-top: 6px; font: 600 var(--t-h3) var(--sans); }
.way .sub { margin-top: 4px; }
.way .actions { margin-top: auto; padding-top: 16px; }
.way .file-chip { margin-left: 4px; }
@media (max-width: 1099px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  /* The first day: only New, a short box, then the three ways to start. */
  .page-first .col:not(.col-new) { display: none; }
  .page-first .col-empty.is-first { min-height: 96px; }
}

/* The phone: the stage buttons of the board, to jump to one column. */
.stage-jump { display: none; }
@media (max-width: 759px) {
  .stage-jump { display: flex; gap: 8px; margin: 16px calc(-1 * var(--pad)) 0; padding: 4px var(--pad); overflow-x: auto; scrollbar-width: none; }
  .stage-jump::-webkit-scrollbar { display: none; }
  .stage-jump button { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--raised); color: var(--ink-2); font: 500 var(--t-sm) var(--sans); }
  .stage-jump button::before { content: ""; position: absolute; inset: -4px 0; }
  .stage-jump .num { font-size: 12px; }
}