/* ══════════════════════════════════════════════════════════════════════════
   Crew Social — Schedule tab (Builder B)
   Restyles the schedule surfaces into the Crew Social vocabulary (DESIGN-LANGUAGE
   §4-Schedule). Loads AFTER dashboard.css, so these rules win at equal specificity.
   Tokens only — no hardcoded colors. Scoped to schedule-exclusive classes (+ .sc-h)
   so nothing bleeds into other builders' tabs.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section headers: font-round bold ink, not the old uppercase-muted label ── */
h2.section.sc-h {
  font-family: var(--font-round); font-size: 16.5px; font-weight: 800;
  text-transform: none; letter-spacing: -.01em; color: var(--ink);
  margin: 2px 2px 12px;
}
/* "Up for grabs" card gets a warm coral accent marker on its header. */
.grabs-card .sc-h { display: flex; align-items: center; gap: 8px; }
.grabs-card .sc-h::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* ── Week nav: friendly rounded pill row ── */
.sched-nav { gap: 10px; }
.sched-nav .navbtn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink);
}
.sched-nav .navbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border-color: var(--accent); color: var(--accent); }
.sched-nav .navbtn:active { transform: scale(.94); }
.sched-nav .wk b { font-family: var(--font-round); font-weight: 900; font-size: 17px; }
.sched-nav .wk .sub { font-weight: 600; }

/* ── Week strip: story-circle-adjacent rounded day chips ── */
.sched-week-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 13px;
  margin: 0 -2px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sched-week-strip::-webkit-scrollbar { display: none; }
.daychip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer; width: 48px;
}
.daychip .dc-wd {
  font-family: var(--font-round); font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.daychip .dc-dd {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  font-family: var(--font-round); font-weight: 900; font-size: 17px; color: var(--ink);
  font-variant-numeric: tabular-nums; transition: transform .12s ease, box-shadow .12s ease;
}
.daychip:hover .dc-dd { border-color: var(--accent); }
.daychip:active .dc-dd { transform: scale(.93); }
.daychip.today .dc-wd { color: var(--accent); }
.daychip.today .dc-dd {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent);
}

/* ── Day cards ── */
.sched-grid { gap: 13px; }
.sched-day {
  border-radius: 20px; padding: 14px 15px;
  border-color: var(--border); box-shadow: var(--shadow);
}
.sched-day.today {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.sched-day-head { align-items: center; margin-bottom: 11px; }
.sched-day-head .dl { font-family: var(--font-round); font-weight: 900; font-size: 15px; }
.sched-day.today .sched-day-head .dl { color: var(--accent); }
.sched-day-head .dd { font-weight: 600; }
.sched-day-head .dh {
  font-weight: 800; background: var(--surface-2); color: var(--muted);
  padding: 2px 9px; border-radius: 999px; font-size: 10.5px;
}
.sched-day > .muted { font-family: var(--font-round); font-weight: 700; opacity: .7; }

/* ── Shift cards: avatar + time hero + name + soft role chip ── */
.shift-chip {
  align-items: center; gap: 10px; padding: 10px 12px; border-radius: 15px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 4px solid var(--chip-color, var(--muted)); margin-bottom: 9px;
  transition: transform .1s ease;
}
.shift-chip:active { transform: scale(.99); }
.sc-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-family: var(--font-round); font-weight: 800; font-size: 12.5px;
  letter-spacing: -.02em;
}
.sc-av.open {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
}
.sc-av.open svg { width: 17px; height: 17px; }
.sc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.shift-chip .tm {
  font-family: var(--font-round); font-weight: 800; font-size: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.shift-chip .who {
  font-weight: 600; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; flex: none; }
.shift-chip .rc {
  font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #fff;
  white-space: nowrap; letter-spacing: .02em;
}
.shift-chip.open {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  border-left-color: var(--accent);
}
.shift-chip.open .who { color: var(--accent); font-style: normal; font-weight: 700; }
.shift-chip.draft { border-style: dashed; background: transparent; }
.shift-chip.draft.open { border-left-style: solid; }

.draft-pill {
  font-size: 9px; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn);
}
.addshift {
  margin-top: 9px; border-radius: 999px; border: 1.5px dashed var(--border);
  color: var(--muted); font-family: var(--font-round); font-weight: 700; padding: 9px;
}
.addshift:hover { border-color: var(--accent); color: var(--accent); }

/* ── Sub-nav: pill segmented control ── */
.sched-subnav { gap: 7px; background: var(--surface-2); padding: 4px; border-radius: 999px; }
.sched-subnav button.btn {
  border-radius: 999px; padding: 9px 4px; font-family: var(--font-round); font-weight: 800;
  font-size: 13px; box-shadow: none;
}
.sched-subnav button.btn.secondary { background: transparent; border-color: transparent; color: var(--muted); }
.sched-subnav button.btn.secondary:hover { color: var(--ink); }

/* ── Toolbar buttons ── */
.sched-toolbar .tbtn { border-radius: 999px; font-family: var(--font-round); font-weight: 800; }
.sched-toolbar select { border-radius: 999px; }
.pub-badge { border-radius: 999px; padding: 4px 11px; }

/* ── Open shifts + "Up for grabs" (inviting coral) ── */
.os-rail { gap: 12px; }
.os-card {
  width: 190px; border-radius: 20px; padding: 15px; border-left: 4px solid var(--chip-color, var(--muted));
}
.grab-card {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  border-left: 4px solid var(--accent);
}
.os-card .osd { font-family: var(--font-round); font-weight: 900; font-size: 15px; }
.grab-card .gst, .os-card .ost { margin-top: 6px; }
.os-card .btn, .grab-card .btn {
  margin-top: 13px; padding: 12px; border-radius: 999px; min-height: 44px;
  font-family: var(--font-round); font-weight: 800; font-size: 14px;
}
.grab-wait { border-radius: 999px; font-family: var(--font-round); }

/* ── Crew "My week" rows: own shifts, accent-tinted cards ── */
.mw-day { margin: 18px 2px 9px; }
.mw-day .wd { font-family: var(--font-round); font-weight: 900; font-size: 16px; }
.mw-row {
  gap: 11px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 16px;
  border-left: 4px solid var(--chip-color, var(--muted)); margin-bottom: 9px; box-shadow: var(--shadow);
}
.mw-row:last-child { border-bottom: 1px solid var(--border); }
.mw-row.mine {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}
.mw-row .grow .tm { font-family: var(--font-round); font-weight: 800; font-size: 14.5px; color: var(--ink); }
.mw-row .grow .mt { font-size: 12px; }
.mw-row .sc-swap {
  margin: 0; border-radius: 999px; font-family: var(--font-round); font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
}
.mw-row .sc-swap svg { width: 15px; height: 15px; }

/* ── Crew availability editor ── */
.av-row { gap: 11px; padding: 12px 0; }
.av-row .avd { font-family: var(--font-round); font-weight: 900; }
.av-toggle {
  border-radius: 999px; font-family: var(--font-round); font-weight: 800; min-height: 36px;
}
.av-toggle.on {
  background: color-mix(in srgb, var(--basil) 16%, var(--surface-2));
  border-color: var(--basil); color: var(--basil);
}
.av-row .times input { border-radius: 999px; }

/* ── Time-off + swap + approval rows ── */
.toff-item, .swap-item { gap: 12px; padding: 13px 0; }
.toff-item .avatar, .swap-item .avatar { border-radius: 50%; }
.toff-item .grow .dr, .swap-item .grow .sw-t { font-family: var(--font-round); font-weight: 800; font-size: 14px; }
.toff-item .grow .who, .swap-item .grow .sw-s { font-size: 12.5px; }
.toff-acts button, .swap-acts button {
  border-radius: 999px; font-family: var(--font-round); font-weight: 800;
}
.btn.approve { background: var(--basil); }
.btn.deny { background: color-mix(in srgb, var(--bad) 12%, var(--surface-2)); }
.approval-hint, .kind-pill { border-radius: 999px; }
.approval-hint { font-family: var(--font-round); }

/* ── Warnings: soft mozz/coral cards, never browser-alert-looking ── */
.warn-banner {
  border-radius: 16px; padding: 12px 14px; font-weight: 600; line-height: 1.45;
  background: color-mix(in srgb, var(--warn) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--border));
  color: color-mix(in srgb, var(--warn) 72%, var(--ink));
}
.warn-banner svg { color: var(--warn); }

/* ── Blackout dates ── */
.blk-banner { border-left: 4px solid var(--warn); border-radius: 20px; }
.blk-row .grow b { font-family: var(--font-round); font-weight: 800; }
.blk-dot { width: 10px; height: 10px; background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }

/* ── Imported (WAAG) provenance + pills ── */
.sched-prov {
  background: var(--surface-2); border-radius: 999px; padding: 7px 13px; margin: -2px 2px 13px;
  align-items: center;
}
.oc-pill { border-radius: 999px; padding: 2px 8px; }
.nd-pill {
  background: var(--surface-2); border-radius: 999px; padding: 1px 6px; font-weight: 800;
}

/* ── Manager availability overview: rounded cells, no spreadsheet lines ── */
.avg-row { border-radius: 20px; padding: 14px 15px; }
.avg-name { font-family: var(--font-round); font-weight: 900; font-size: 15px; }
.avg-name .avatar { border-radius: 50%; }
.avg-c { padding: 9px 0; }
.avg-c .cd { font-family: var(--font-round); font-weight: 700; }
.avg-c .val.win {
  font-family: var(--font-round); font-weight: 800;
  color: color-mix(in srgb, var(--basil) 78%, var(--ink));
}
.avg-hint {
  background: var(--surface-2); border-radius: 14px; padding: 10px 12px; color: var(--muted);
  font-weight: 600;
}
/* By-day availability wears the same warm card treatment as the by-person rows. */
.avd-day { border-radius: 20px; padding: 14px 15px; }
.avd-head .dw { font-family: var(--font-round); font-weight: 900; }
.avd-p .avatar { border-radius: 50%; }
.avd-p .nm { font-family: var(--font-round); font-weight: 800; }
.avd-p .val.win {
  font-family: var(--font-round); font-weight: 800;
  color: color-mix(in srgb, var(--basil) 78%, var(--ink));
}

/* ── #F20: "Not in Crew App yet" ───────────────────────────────────────────────
   Its own row rather than `.person`, because `.person` is built around a 42px
   avatar and a text column that owns the rest of the line — and this row's whole
   point is a text column NEXT TO an action.

   `.mc-row .btn` is the load-bearing declaration. The base `button.btn` is
   width:100% / margin-top:12px (the full-width form button), so an unqualified
   .btn dropped in here claims the entire row, squeezes `.mc-who` to its minimum
   content width, and wraps a two-word name to one word per line. `.mw-row
   .grabbtn` already makes the identical override; this is not a new idea, it is
   the same one applied at a second call site.

   `min-width: 0` on the text column is the other half: a flex child defaults to
   min-width:auto and refuses to shrink below its longest word, which is what
   pushes the button off the row instead of ellipsing the name. */
.mc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--hair);
}
.mc-row:last-child { border-bottom: none; }
.mc-who { flex: 1; min-width: 0; }
.mc-name { font-weight: 700; overflow-wrap: anywhere; }
.mc-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mc-row .btn {
  margin-top: 0; width: auto; flex: none; padding: 9px 14px; font-size: 13px;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.mc-row .btn svg { width: 15px; height: 15px; }
/* The invited state sits where the button would and must not wrap into it. */
.mc-invited {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.mc-invited svg { width: 14px; height: 14px; flex: none; }

@media (min-width: 980px) {
  /* Shift chips stay legible in the 7-column grid. */
  .shift-chip { gap: 7px; padding: 8px 9px; border-radius: 13px; }
  .sc-av { width: 26px; height: 26px; font-size: 10.5px; }
  .shift-chip .tm { font-size: 12.5px; }
  .shift-chip .who { font-size: 11px; }
  .sc-tags { justify-content: flex-start; width: 100%; }

  /* Availability matrix → rounded token cells, friendly header. */
  .avg-head .avg-name-h { font-family: var(--font-round); text-transform: none; letter-spacing: -.01em; font-size: 13px; color: var(--ink); }
  .avg-head .avg-h .wd { font-family: var(--font-round); font-weight: 900; }
  .avg-row { border-radius: 16px; padding: 10px 8px; margin-bottom: 8px; box-shadow: none; background: var(--surface); }
  .avg-c { border-radius: 12px; min-height: 44px; background: var(--surface-2); }
}

/* ═══ Marketplace: rows grouped by day (Cole's team poll, 2026-08-06) ═══ */
/* Replaces the 190px card in a horizontal rail, which showed TWO shifts on a
   390px phone and hid the rest behind a sideways swipe. The height was never the
   shift data — it was two sentences repeated identically on every card, now two
   coloured words on a line the row already had. */
.mkt-day {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-round); font-weight: 900; font-size: 13px;
  color: var(--ink); margin: 14px 2px 7px;
}
.mkt-day:first-child { margin-top: 2px; }
.mkt-day-n {
  margin-left: auto; font-weight: 700; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mkt-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: 13px;
}
/* The left edge is the KIND, which is the one thing a scanning eye needs before
   it reads anything: red = somebody's shift you'd be taking over, green = an
   open coverage post. */
.mkt-row.grab { border-left-color: var(--pepp); }
.mkt-row.cov { border-left-color: var(--basil); }
.mkt-when {
  flex: none; width: 50px; text-align: center;
  font-family: var(--font-round); line-height: 1.1;
}
.mkt-when b { display: block; font-weight: 900; font-size: 14.5px; }
.mkt-when span {
  display: block; font-size: 10px; color: var(--muted); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* min-width:0 so a long store/role line truncates instead of shoving the action
   button off a 390px screen — the failure where the control still exists and is
   unreachable. */
.mkt-mid { flex: 1; min-width: 0; }
.mkt-t { font-family: var(--font-round); font-weight: 800; font-size: 13.5px; }
.mkt-s {
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The instant-vs-approval tell. Before this existed as a pill, the only signal
   was the button verb and people tapped "Take this shift" believing they had it.
   It is always rendered and always coloured — never an icon on its own. */
.mkt-flowtext { font-weight: 800; }
.mkt-flowtext.approve { color: var(--warn); }
.mkt-flowtext.instant { color: var(--ok); }
.mkt-act { flex: none; display: flex; align-items: center; gap: 6px; }
/* `button.btn` is width:100%, margin-top:12px, min-height:46px. A row action has
   to beat all three, and two classes out-specify element+class. */
.mkt-act .btn {
  width: auto; margin-top: 0; min-height: 38px; padding: 8px 12px;
  font-size: 12.5px; display: flex; align-items: center; gap: 5px;
}
.mkt-act .btn svg { width: 15px; height: 15px; }
.mkt-act .mkt-note {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-style: italic; color: var(--muted);
  max-width: 104px; line-height: 1.25;
}
.mkt-act .mkt-note svg { width: 13px; height: 13px; flex: none; }
/* marketplaceAction's "Taken · waiting for GM" line lands in the action slot.
   Capped narrower than it wants to be so it wraps to two lines rather than
   three — a three-line note made its row twice the height of every other one. */
.mkt-act .grab-wait {
  font-size: 10.5px; max-width: 118px; line-height: 1.3; color: var(--muted);
}
.mkt-act .grab-wait svg { width: 12px; height: 12px; }

/* ═══ Approvals: the one inbox, and the markers it leaves behind ═══ */
/* The pane-level count sits ABOVE the section cards rather than inside one,
   because it counts across all three sources. */
.appr-head { margin: 4px 2px 10px; }

/* The marker on Time-off / Availability. A button, not a card with a link in it:
   the whole strip is the tap target, which is the only thing it does. It carries
   no Approve/Deny on purpose — one place to decide is the entire point. */
button.card.appr-marker {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-family: var(--font-round); font-weight: 700; font-size: 13.5px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); padding: 13px 14px;
}
button.card.appr-marker b { font-weight: 900; font-variant-numeric: tabular-nums; }
button.card.appr-marker > svg { width: 17px; height: 17px; color: var(--warn); flex: none; }
.appr-marker-go { margin-left: auto; display: flex; color: var(--muted); }
.appr-marker-go svg { width: 17px; height: 17px; }
button.card.appr-marker:active { transform: translateY(1px); }
button.card.appr-marker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The per-person version on the availability roster. Deliberately quiet — it is
   context while you read someone's week, not a call to action. */
.appr-chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-family: var(--font-round); font-weight: 800; font-size: 10px;
  color: var(--warn); vertical-align: 1px; white-space: nowrap;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
}

/* ── Start-time asks ("come in early?" / "come in later") ──────────────────
   The sheet a manager gets from a name on today's grid. Two big option rows
   rather than a list of buttons: each one carries what it DOES underneath its
   own label, because the effect is the decision. A refused option stays put and
   goes quiet instead of disappearing — the reason it is unavailable is the
   thing the manager came to find out. */
.sa-opt {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
  font: inherit; cursor: pointer; margin-bottom: 10px; padding: 13px 14px;
  border-radius: 15px; background: var(--surface-2); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); transition: transform .1s ease;
}
.sa-opt:active { transform: scale(.99); }
.sa-opt[disabled] { cursor: default; opacity: .6; border-left-color: var(--border); }
.sa-opt-title {
  font-family: var(--font-round); font-weight: 900; font-size: 15px; color: var(--ink);
}
.sa-opt-effect { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sa-recap {
  font-size: 13px; line-height: 1.45; color: var(--muted);
  margin: -4px 0 12px;
}
/* Quarter-hour slots. A grid rather than a <select>: the whole point of the
   increments is that the choice is small and countable, and a picker that hides
   its options behind a tap makes it feel arbitrary again. */
.sa-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.sa-slot {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  font: inherit; cursor: pointer; padding: 9px 10px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
}
.sa-slot b { font-family: var(--font-round); font-weight: 900; font-size: 13.5px; }
.sa-slot span { font-size: 11px; color: var(--muted); }
.sa-slot.picked {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
}
.sa-slot.picked span { color: var(--ink); }

/* ══ Pre-publish draft check (gm+) ══════════════════════════════════════════
   Tokens only, and the same vocabulary the rest of this tab speaks: a card with a
   4px severity edge (the .shift-chip idiom), round-font weights, pill chips. The
   severity colours are --bad and --warn, so both themes invert with one rule. */
.draft-card { border-left: 4px solid var(--warn); }
.draft-card .draft-lead { font-size: 12.5px; margin: -6px 0 11px; text-wrap: pretty; }
.draft-week {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 15px; background: var(--surface-2); border: 1px solid var(--border);
  margin-bottom: 9px; cursor: pointer; transition: transform .1s ease;
  min-height: 62px;
}
.draft-week:last-child { margin-bottom: 0; }
.draft-week:active { transform: scale(.99); }
.draft-week .dw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.draft-week .dw-when {
  font-family: var(--font-round); font-weight: 900; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.draft-week .dw-store { font-size: 12px; font-weight: 600; color: var(--muted); }
.draft-week > svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.db-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dchip {
  font-family: var(--font-round); font-size: 10.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
}
.dchip.bad { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.dchip.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }

/* ── The review sheet ── */
.draft-sum { margin-bottom: 4px; }
.draft-sum .ds-when { font-size: 12.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.draft-sum .ds-stats { display: flex; gap: 14px; margin-top: 7px; flex-wrap: wrap; }
.draft-sum .ds-stats span { font-size: 12px; color: var(--muted); font-weight: 600; }
.draft-sum .ds-stats b {
  font-family: var(--font-round); font-weight: 900; font-size: 17px; color: var(--ink);
  display: block; line-height: 1.15;
}
h2.section.dsec { margin-top: 16px; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
h2.section.dsec.bad { color: var(--bad); }
h2.section.dsec.warn { color: var(--warn); }
h2.section.dsec.muted { color: var(--muted); }

.draft-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px;
  border-radius: 15px; background: var(--surface-2); border: 1px solid var(--border);
  border-left: 4px solid var(--muted); margin-bottom: 9px; cursor: pointer;
  transition: transform .1s ease;
  /* Comfortably past the 44px floor even at one line of text. */
  min-height: 62px;
}
.draft-row:active { transform: scale(.99); }
.draft-row.violation { border-left-color: var(--bad); }
.draft-row.warning { border-left-color: var(--warn); }
.draft-row.off { opacity: .55; }
.draft-row .dr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.draft-row .dr-when { font-family: var(--font-round); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.draft-row .dr-who { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.draft-row .dr-why { font-size: 12px; font-weight: 600; text-wrap: pretty; }
.draft-row.violation .dr-why { color: var(--bad); }
.draft-row.warning .dr-why { color: var(--warn); }
.draft-row > svg { width: 16px; height: 16px; flex: none; color: var(--muted); margin-top: 12px; }

.draft-unchecked .du-row { display: flex; flex-direction: column; gap: 3px; }
.draft-unchecked .du-row + .du-row { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--hair); }
.draft-unchecked b { font-family: var(--font-round); font-weight: 800; font-size: 14.5px; }
.draft-unchecked .muted { font-size: 12px; text-wrap: pretty; }
.du-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.namechip {
  font-family: var(--font-round); font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--muted);
}
.draft-foot { font-size: 11.5px; display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; }
.draft-foot svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* ── One conflict: the overhang, drawn ── */
.dc-when { font-family: var(--font-round); font-weight: 800; font-size: 15px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dc-why { font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.dc-why.violation { color: var(--bad); }
.dc-why.warning { color: var(--warn); }
.dc-actions { display: flex; gap: 9px; margin-top: 15px; }
.dc-actions .btn { flex: 1; margin-top: 0; }
.dtl {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 15px 16px 13px; margin-top: 14px;
}
.dtl-track { position: relative; height: 12px; }
.dtl-track.tall { height: 24px; margin-top: 13px; }
.dtl-avail {
  position: absolute; top: 1px; height: 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
}
.dtl-shift { position: absolute; top: 0; height: 24px; border-radius: 8px; }
.dtl-legend {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 11px; color: var(--muted); font-weight: 700;
}
.dtl-legend .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dtl-legend .sw.ok { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.dtl-legend .sw.bad { background: var(--bad); }