/* Calm pass: quieter surfaces, one rhythm, colour only where it means something (late red, soon amber, done green).
   Loads last. Only presentation: no layout logic depends on it. Uses the tokens in styles.css :root. */

/* ---------- Shared: page header, tabs, cards ---------- */
.pagehead.ph2 { margin-bottom: var(--sp-3); }
.pagehead .lede { line-height: 1.5; }
.pagehead.ph2 + .tabs, .pagehead.ph2 + .subnav, .pagehead.ph2 + nav.tabs { margin-bottom: var(--sp-5); }
.tab .n, .subnav a .n { font-weight: 500; font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] .n { color: var(--grey-ink); }

/* Cards sit on the page without a shadow; the border is enough. A card inside a card loses its frame. */
.card { box-shadow: none; }
.card .card { border-color: transparent; background: transparent; }

/* Lists: a gentle hover, a clear focus ring */
:focus-visible { outline: 2px solid var(--blue-btn); outline-offset: 2px; }

/* Stat tiles: plain surface, colour only on the number */
.clstat.amber, .clstat.red { background: var(--surface); border-color: var(--divider); }
.statc.t-good, .statc.t-amber, .statc.t-red { background: var(--surface); }

/* Quiet secondary row actions: outline only on hover */
.qact { border-color: transparent; background: transparent; box-shadow: none; color: var(--link); font-weight: 600; }
.qact:hover { border-color: var(--line); background: var(--surface2); }
a.qact { color: var(--link); }

/* ---------- My Day ---------- */
.daymain { gap: var(--sp-5); }
.coach { padding: 0 4px; border: 0; background: none; border-radius: 0; color: var(--grey-ink); }
.coach b { color: var(--muted); }
.wqh { padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.qic, .p-red .qic, .p-amber .qic, .p-blue .qic { background: transparent; border-color: transparent; }
.p-blue .qic { color: var(--muted); }
.qi .qw.qdue { min-width: 150px; justify-content: flex-end; }
.qgrp { list-style: none; padding: var(--sp-3) var(--sp-5) var(--sp-1); border-top: 1px solid var(--divider); }
.qgrp h3 { margin: 0; font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.qgrp + .qi { border-top: 0; }
.wqfree { color: var(--muted); }
.wait { border-color: var(--divider); }

/* ---------- Tasks ---------- */
/* One surface with dividers instead of a stack of separate boxes */
.tklist { gap: 0; padding-bottom: 0; margin-bottom: 72px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.tkrow { border: 0; border-left: 3px solid transparent; border-radius: 0; border-top: 1px solid var(--divider); }
.tklist > .tkrow:first-child { border-top: 0; }
.tkrow:hover { border-color: var(--divider); border-left-color: transparent; background: var(--row-hover); }
.tkrow.urgent, .tkrow.urgent:hover, .tkrow.age-red, .tkrow.age-red:hover { border-left-color: var(--red); }
.tkrow .tkopen::after { border-radius: 0; }
.tksplit .tklist { padding-bottom: 0; }
.tkrow.sel, .tkrow.sel:hover { border-color: var(--divider); border-left-color: var(--blue-btn); box-shadow: none; }
.tkrow.picked { box-shadow: inset 3px 0 0 var(--blue-btn); }
/* The type is a quiet label, not a coloured chip */
.tkkind { padding: 0; background: none; font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.tkpane .tkkind { font-size: var(--fs-13); }
/* Group headings: Follow-ups due, Overdue, Due today, Later, Waiting */
.tkgrp { list-style: none; padding: var(--sp-3) 14px var(--sp-1); background: var(--surface2); border-top: 1px solid var(--divider); }
.tklist > .tkgrp:first-child { border-top: 0; }
.tkgrp h3 { margin: 0; font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tkgrp + .tkrow { border-top: 0; }
/* Type filter: smaller, quieter chips */
.tkkinds { gap: var(--sp-1) var(--sp-2); margin: var(--sp-3) 0; }
.tkchip { min-height: 30px; padding: 0 10px; border-color: transparent; background: transparent; font-size: var(--fs-13); }
.tkchip:hover { background: var(--surface2); border-color: var(--line); }
.tkchip[aria-pressed="true"] { background: var(--blue-tint); border-color: transparent; color: var(--blue-ink); font-weight: 600; }
.tkall { color: var(--muted); }
.tkpane { border-color: var(--line); }
.tkdrop { border-color: var(--divider); }

/* ---------- Stat strips (Claims, CARs, Point of Sale): one frame, hairline dividers, colour only on the number ---------- */
.clstats, .swstats { gap: 1px; background: var(--divider); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.clstat, .clstat.amber, .clstat.red, .swstat { border: 0; border-radius: 0; background: var(--surface); }
.clstat { padding: var(--sp-3) var(--sp-4); }
button.swstat:hover, a.swstat:hover { border-color: transparent; background: var(--row-hover); }
.swstat.on { box-shadow: inset 0 -2px 0 var(--blue-btn); background: var(--surface); }

/* ---------- Claims: the five kinds as one quiet strip ---------- */
.cltypes { gap: 1px; background: var(--divider); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin: 0 0 var(--sp-5); }
.cltype { border: 0; border-radius: 0; background: var(--surface); }
.cltype:hover, .cltype:focus-visible { background: var(--row-hover); border-color: transparent; }
.cltd { color: var(--muted); }

/* ---------- Phones and Logistics: notices are a quiet card with a coloured edge, not a filled block ---------- */
.phwarn { background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--amber-bar); }
.lxbanner { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: inset 3px 0 0 var(--red); border-left-width: 1px; }
.lxbanner b { color: var(--red); }
.lxaddr.lxmissing { border-color: var(--line); box-shadow: inset 3px 0 0 var(--red); }

/* ---------- Reports: the period picker sits on the page, not in its own box ---------- */
.card.pfctl { border-color: transparent; background: transparent; padding: 0; }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .qi .qw.qdue { min-width: 0; justify-content: flex-start; }
  .qgrp { padding: var(--sp-3) 14px var(--sp-1); }
  .daymain { gap: var(--sp-4); }
  /* The five claim kinds scroll sideways instead of stacking into a tall grid */
  .cltypes { display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cltypes::-webkit-scrollbar { display: none; }
  .cltype { flex: 0 0 200px; }
}

/* ---------- Empty sections: just the quiet line, no empty box around it ---------- */
.card:has(> .emptyline:only-child) { background: transparent; border-color: transparent; box-shadow: none; }
.card > .emptyline:only-child { padding: var(--sp-1) 0; text-align: left; justify-content: flex-start; }
.card.pad:has(> .emptyline:only-child) { padding-left: 0; padding-right: 0; }
/* New email in the reading pane */
.mlnewpane { padding: 4px 0 0; }
.mlnewpane .mlback { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.mlnewlist { margin-top: 16px; text-align: left; }
.mlint { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; background: var(--blue-tint); color: var(--blue-ink); vertical-align: 1px; }

/* MCP Assistant switched off in Features (hidden until the setting says otherwise, so it never flashes) */
.noassist .wa-root, .noassist #sideassist { display: none !important; }

/* Tasks: "N waiting to be taken" strip on Action required */
.tkfree { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--blue-bg); border-left: 4px solid var(--blue); }
.tkfree .btn { margin-left: auto; }