/* ============================================================
   The Shift — Intake Dashboard, design prototype (Iris)
   ------------------------------------------------------------
   Rides on ../the-shift-tokens.css. Nothing here invents a color.
   The block below is a proposed LAYER 2 addition: role tokens for
   the app bar, the nav rail, and the status lifecycle. If this
   direction is approved they move into the-shift-tokens.css beside
   the other role tokens, and this file keeps only layout.

   Direction: "the quiet ledger". A dark brand bar over a hairline
   list, one elevated surface on the whole page (the record you
   deliberately opened), sage reserved strictly for resolved-positive
   and amber strictly for waiting. The redaction bar is the signature:
   a referral row states plainly that it is withholding something,
   rather than either hiding the field or leaking it into a list
   that can be read over a shoulder.
   ============================================================ */

:root {
  /* ── App bar ──────────────────────────────────────────────
     Resolved 2026-08-10, Terry ratified #034a76 as the one Primary Blue
     and tokens.css now carries it as --shift-blue. This alias is kept
     only so the app bar reads as a named brand role rather than a raw
     value, and it now points at the token instead of repeating the hex,
     so there is exactly one place the brand blue is defined. */
  --shift-blue-brand:     var(--shift-blue);

  --appbar-bg:            var(--shift-blue-brand);
  --appbar-fg:            #FFFFFF;
  --appbar-fg-soft:       rgba(255, 255, 255, 0.72);
  --appbar-edge:          rgba(255, 255, 255, 0.18);

  /* ── Nav rail ─────────────────────────────────────────────
     One tonal step down from --bg (#F4F8FC), same cool family,
     already a palette member. Not a new color. */
  --rail-bg:              var(--shift-blue-light);
  --rail-active-bg:       var(--surface);

  /* ── Status lifecycle ─────────────────────────────────────── */
  --status-new-fg:        var(--shift-blue);
  --status-new-bg:        var(--shift-blue-light);
  --status-new-edge:      rgba(0, 76, 117, 0.22);

  --status-contacted-fg:    #8A6516;
  --status-contacted-bg:    #FBF3E2;
  --status-contacted-edge:  rgba(184, 138, 46, 0.28);

  --status-scheduled-fg:  var(--shift-green-deep);
  --status-scheduled-bg:  var(--shift-green-light);
  --status-scheduled-edge: rgba(90, 143, 93, 0.28);

  --status-closed-fg:     var(--fg-muted);
  --status-closed-bg:     #EFF2F5;
  --status-closed-edge:   rgba(107, 114, 128, 0.22);

  /* ── Protected-content treatment ─────────────────────────── */
  --redact-bar:           rgba(0, 76, 117, 0.10);
  --redact-hatch:         rgba(0, 76, 117, 0.28);
  --protected-bg:         var(--shift-blue-tint);
  --protected-edge:       rgba(0, 76, 117, 0.14);

  /* ── Layout metrics ───────────────────────────────────────── */
  --appbar-h:             88px;
  --rail-w:               236px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
}

/* ============================================================
   APP BAR
   Sized off the logo, not the other way round. The lockup's
   subtitle line is 18% of its own height, so at 56px the mark
   reads and the bar lands at 88px. See the note in the report:
   a horizontal UI lockup would let this bar get shorter.
   ============================================================ */

.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--appbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  background: var(--appbar-bg);
}

.appbar__brand {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
}
.shift-doc .appbar__brand { text-decoration: none; }
.appbar__brand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.appbar__logo {
  display: block;
  height: 56px;
  width: auto;
}

.appbar__account {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.appbar__email {
  font-size: var(--fs-sm);
  color: var(--appbar-fg-soft);
}

.appbar__signout {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--appbar-fg);
  background: transparent;
  border: 1px solid var(--appbar-edge);
  border-radius: var(--radius);
  padding: 9px 15px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out);
}
.appbar__signout:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}
.appbar__signout:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* Prototype notice. Deliberately plain so it never reads as chrome. */
.proto-flag {
  margin: 0;
  padding: var(--sp-2) var(--sp-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* ============================================================
   SHELL
   ============================================================ */

.shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--appbar-h));
}

/* ── Left nav rail ───────────────────────────────────────── */
.rail {
  flex: none;
  width: var(--rail-w);
  align-self: stretch;
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-4);
  position: sticky;
  top: var(--appbar-h);
}

.rail__group + .rail__group { margin-top: var(--sp-8); }

.rail__title {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
  padding: 0 var(--sp-3);
}

.rail__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg-soft);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  padding: 9px var(--sp-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out);
}
.rail__item + .rail__item { margin-top: 2px; }
.rail__item:hover { background: rgba(255, 255, 255, 0.6); color: var(--cta-bg); }
.rail__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 76, 117, 0.18);
}

.rail__item.is-on {
  background: var(--rail-active-bg);
  border-left-color: var(--cta-bg);
  color: var(--heading-display);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.rail__label { min-width: 0; }

.rail__n {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}
.rail__item.is-on .rail__n { color: var(--cta-bg); }

/* ── Mobile nav (hidden on desktop) ──────────────────────── */
.mobilenav { display: none; }

/* ── Content column ──────────────────────────────────────── */
.content {
  flex: 1;
  min-width: 0;
  max-width: 940px;
  padding: var(--sp-8) var(--sp-8) var(--sp-16);
}

.content__head { margin-bottom: var(--sp-6); }

.content__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--heading-display);
  margin: 0 0 var(--sp-2);
}

.content__note {
  max-width: 70ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 10px 15px;
  cursor: pointer;
  background: none;
  transition: background var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out),
              color var(--dur-base) var(--ease-in-out);
}

.btn--solid { background: var(--cta-bg); color: var(--cta-fg); }
.btn--solid:hover { background: var(--cta-bg-hover); }

.btn--line {
  color: var(--cta-bg);
  border-color: rgba(0, 76, 117, 0.28);
  background: var(--surface);
}
.btn--line:hover { border-color: var(--cta-bg); background: var(--selected-bg); }

/* tokens.css styles `.shift-doc a` at equal-or-higher specificity than
   `.btn`, which silently painted the primary button's label navy-on-navy.
   These overrides exist to beat that, not to restyle anything. */
.shift-doc a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.shift-doc a.btn--solid { color: var(--cta-fg); }
.shift-doc a.btn--solid:hover { color: var(--cta-fg); }
.shift-doc a.btn--line { color: var(--cta-bg); }

/* ============================================================
   THE LEDGER ROWS
   A shared grid gives table alignment without a table, which is
   what lets a row expand in place.
   ============================================================ */

.rows { border-top: 1px solid var(--border); }

.rows__head,
.row__summary {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 108px 28px;
  gap: var(--sp-4);
  align-items: center;
}

.rows__head {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--border);
}
.rows__head span:nth-child(3) { text-align: right; }

.row {
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-base) var(--ease-in-out);
}
.row:hover { background: rgba(255, 255, 255, 0.7); }

/* The one elevated surface on the page. Opening a record is a
   deliberate act, so it lifts off the ledger. */
.row.is-open {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border-bottom-color: transparent;
  box-shadow: var(--shadow-glow);
  margin: var(--sp-2) 0;
}

.row__summary { padding: var(--sp-4); cursor: pointer; }

.row__person { min-width: 0; }

.row__name {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  color: var(--heading-display);
}

.row__gist {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 3px;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* THE SIGNATURE.
   Where a referral's content would sit in the list, a redaction mark
   sits instead. The row admits it is holding something back. The bars
   are hatched, not solid, so they read as deliberately struck out
   rather than as a loading skeleton. */
.redact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.redact span {
  display: block;
  height: 9px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--redact-hatch) 0 1.5px,
      transparent 1.5px 4px
    ),
    var(--redact-bar);
}
.redact span:nth-child(1) { width: 38px; }
.redact span:nth-child(2) { width: 22px; }
.redact span:nth-child(3) { width: 48px; }

.row__covered {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.row__when {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  text-align: right;
}

/* Quiet aging signal. Amber only, never red: a person waiting on a
   reply is not an error state. */
.row__aging {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--status-contacted-fg);
}

/* The real keyboard target for opening a record. The row is clickable
   too, but that is mouse convenience layered on top of a real button. */
.row__chevron {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--fg-faint);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-in-out),
              background var(--dur-base) var(--ease-in-out);
}
.row__chevron svg { width: 18px; height: 18px; }
.row__chevron:focus-visible {
  outline: none;
  color: var(--cta-bg);
  box-shadow: 0 0 0 3px rgba(0, 76, 117, 0.18);
}
.row:hover .row__chevron { color: var(--cta-bg); background: var(--selected-bg); }
.row.is-open .row__chevron { transform: rotate(90deg); color: var(--cta-bg); }

/* ============================================================
   STATUS CONTROL
   A native select wearing a pill. Boring on purpose: it gives Chess
   the keyboard and the native mobile picker for free, and it keeps
   the list quiet where four buttons per row would shout.
   ============================================================ */

.status {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.status__select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-full);
  padding: 8px 26px 8px 12px;
  border: 1px solid;
  cursor: pointer;
  width: 100%;
  transition: box-shadow var(--dur-fast) var(--ease-in-out);
}
.status__select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 76, 117, 0.18);
}

.status__caret {
  position: absolute;
  right: 9px;
  width: 11px;
  height: 11px;
  pointer-events: none;
  opacity: 0.5;
}

.status--new .status__select {
  color: var(--status-new-fg);
  background: var(--status-new-bg);
  border-color: var(--status-new-edge);
}
.status--contacted .status__select {
  color: var(--status-contacted-fg);
  background: var(--status-contacted-bg);
  border-color: var(--status-contacted-edge);
}
.status--scheduled .status__select {
  color: var(--status-scheduled-fg);
  background: var(--status-scheduled-bg);
  border-color: var(--status-scheduled-edge);
}
.status--closed .status__select {
  color: var(--status-closed-fg);
  background: var(--status-closed-bg);
  border-color: var(--status-closed-edge);
}

.status--new .status__caret       { color: var(--status-new-fg); }
.status--contacted .status__caret   { color: var(--status-contacted-fg); }
.status--scheduled .status__caret { color: var(--status-scheduled-fg); }
.status--closed .status__caret    { color: var(--status-closed-fg); }

/* ============================================================
   OPENED RECORD
   ============================================================ */

.record {
  padding: 0 var(--sp-4) var(--sp-5);
  animation: record-in var(--dur-slow) var(--ease-out);
}

@keyframes record-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.record__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border);
}

/* Grid items default to min-width:auto, so an unbreakable string like an
   email address pushes past its column and collides with the next one. */
.field { min-width: 0; }

.field__label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 5px;
}

.field__value {
  font-size: 0.9375rem;
  line-height: var(--lh-normal);
  color: var(--fg);
  overflow-wrap: anywhere;
}

.field__value a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 76, 117, 0.25);
}
.field__value a:hover { border-bottom-color: var(--cta-bg); }

/* The protected block. Same navy family, tinted, edged, and labelled
   for what it is. It never appears anywhere except an opened record. */
.protected {
  background: var(--protected-bg);
  border: 1px solid var(--protected-edge);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.protected__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.protected__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cta-bg);
}

.protected__ttl { font-size: var(--fs-xs); color: var(--fg-muted); }

.protected__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4) var(--sp-6);
}

.protected__body .field--wide { grid-column: 1 / -1; }

.field__value--quote {
  font-size: 0.9375rem;
  line-height: var(--lh-relaxed);
  color: var(--fg);
  border-left: 2px solid var(--status-new-edge);
  padding-left: var(--sp-4);
}

.record__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding-top: var(--sp-5);
}

.record__handoff {
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  margin-left: auto;
}

/* ============================================================
   EMPTY + FOOTER
   ============================================================ */

.rows__empty {
  padding: var(--sp-10) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-align: center;
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-12);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}

/* ============================================================
   MOBILE
   Chess checks this on a phone between clients, so this is a real
   treatment, not a squeeze. The rail's two jobs split by frequency:
   switching lists happens constantly, so it stays on screen as a
   segmented control; changing the status filter is occasional, so it
   moves into a bottom sheet, which sits under the thumb where a
   left-edge drawer would not.
   ============================================================ */

@media (max-width: 900px) {
  :root { --appbar-h: 64px; }

  .appbar { padding: 0 var(--sp-4); }
  .appbar__logo { height: 40px; }
  .appbar__email { display: none; }

  .proto-flag { padding: var(--sp-2) var(--sp-4); }

  .shell { flex-wrap: wrap; }

  .rail { display: none; }

  .mobilenav {
    display: block;
    position: sticky;
    top: var(--appbar-h);
    z-index: 20;
    width: 100%;
    background: var(--rail-bg);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
  }

  .segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-full);
    padding: 4px;
  }

  .segmented__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-soft);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    padding: 9px 10px;
    min-height: 44px;
    cursor: pointer;
  }
  .segmented__btn.is-on {
    background: var(--surface);
    color: var(--heading-display);
    box-shadow: var(--shadow-xs);
  }
  .segmented__n {
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--fg-faint);
  }
  .segmented__btn.is-on .segmented__n { color: var(--cta-bg); }

  .filterbtn {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    margin-top: var(--sp-2);
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg-soft);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 var(--sp-3);
    cursor: pointer;
  }
  .filterbtn strong { color: var(--heading-display); font-weight: 600; }
  .filterbtn__icon { width: 16px; height: 16px; flex: none; color: var(--cta-bg); }
  .filterbtn__n {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cta-bg);
    background: var(--selected-bg);
    border-radius: var(--radius-full);
    padding: 2px 9px;
  }

  .content {
    max-width: none;
    padding: var(--sp-5) var(--sp-4) var(--sp-16);
  }

  .rows__head { display: none; }

  .row__summary {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "status  chevron"
      "person  person"
      "when    when";
    gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-4) var(--sp-2);
  }
  .row__status  { grid-area: status; justify-self: start; }
  .row__person  { grid-area: person; }
  .row__when    { grid-area: when; text-align: left; }
  .row__gist { white-space: normal; }

  /* Thumb targets. Chess is on a phone between clients, so every control
     he taps clears 44px, the smallest reliable target on a touch screen. */
  .row__chevron {
    grid-area: chevron;
    align-self: center;
    justify-self: end;
    width: 44px;
    height: 44px;
    margin-right: -6px;
  }
  .row__chevron svg { width: 20px; height: 20px; }

  .status__select { padding: 12px 30px 12px 15px; min-height: 44px; }
  .status__caret { right: 11px; }

  .record { padding: 0 var(--sp-2) var(--sp-4); }
  .record__actions { padding-top: var(--sp-4); }
  .record__actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .record__handoff { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================
   MOBILE FILTER SHEET
   ============================================================ */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 42, 71, 0.42);
  animation: fade-in var(--dur-base) var(--ease-out);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-lg);
  max-height: 80vh;
  overflow-y: auto;
  animation: sheet-up var(--dur-slow) var(--ease-out);
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border);
  margin: 0 auto var(--sp-4);
}

.sheet__title {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-2);
}

.sheet__list { display: flex; flex-direction: column; }

.sheet__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 48px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg-soft);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-1);
  cursor: pointer;
}
.sheet__item.is-on { color: var(--heading-display); font-weight: 600; }
.sheet__item .sheet__n {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}
.sheet__item.is-on .sheet__n { color: var(--cta-bg); }

.sheet__checkslot {
  display: grid;
  place-items: center;
  width: 18px;
  flex: none;
}
.sheet__item:not(.is-on) .sheet__checkslot { visibility: hidden; }
.sheet__check { width: 16px; height: 16px; color: var(--cta-bg); }

.sheet__done {
  width: 100%;
  margin-top: var(--sp-5);
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cta-fg);
  background: var(--cta-bg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

@media (min-width: 901px) {
  .scrim, .sheet { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   MERGE ADDITIONS — auth, access denial, pagination.
   Iris's prototype had no auth surface (it rendered invented data with no
   sign-in). These are the pieces the real dashboard needs on top of her
   design, built from her own tokens and button styles rather than a
   second visual vocabulary.
   ============================================================ */

/* Every view/panel toggle in app.js works by setting the `hidden` property.
   The UA's `[hidden] { display: none }` loses to any class rule that sets
   display, which previously left the sign-in card on screen underneath the
   signed-in dashboard. Global on purpose: adding a display rule to another
   toggled element cannot quietly reintroduce it. */
[hidden] { display: none !important; }

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
.auth__card {
  max-width: 26rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 0 var(--sp-8) var(--sp-8);
  box-shadow: var(--shadow-glow);
}

/* The logo asset is the WHITE mark, so it needs a dark ground. Without one it
   sat on the page background (#F4F8FC) at roughly 1.08:1 and was invisible.
   This band reuses --appbar-bg, the same surface the mark sits on once you are
   signed in, so the two can never drift apart. Only the band goes dark: the
   body copy and the navy primary button keep the light surface their colors
   are built for. */
.auth__brand {
  background: var(--appbar-bg);
  margin: 0 calc(var(--sp-8) * -1) var(--sp-5);
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  justify-content: center;
}
.auth__logo {
  width: 99px;
  height: 56px;
  display: block;
}
.auth__error {
  color: var(--danger);
  font-size: var(--fs-sm);
}

/* Signed in, but not on the rules allowlist. This is the expected outcome for
   any Google account that is not Chess's, not an error state to apologise for. */
.shift-doc .denied {
  margin: var(--sp-6) auto;
  max-width: 34rem;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--fg-soft);
}

.more {
  display: block;
  margin: var(--sp-4) auto 0;
}

/* Shown while authentication has resolved but the permission answer has not.
   Deliberately plain: it must not look like a dashboard, because the whole
   point is that we do not yet know whether this person may see one. */
.shift-doc .checking {
  margin: var(--sp-8) auto;
  max-width: 34rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}