/* Berlin Patten Ebling — black slate, brushed silver, white.
   --slate and --silver dress the header and the sign-in backdrop, which stay
   dark in both themes. --trim is the same silver weighted to be visible on
   whichever surface the theme puts under it. */
:root {
  --bg: #f3f3f4;
  --panel: #ffffff;
  --ink: #17171a;
  --muted: #5f636a;
  --line: #dfe0e3;
  --slate: #0f0f11;
  --silver: #c4c6ca;
  --trim: #7d8087;
  --accent: #1b1b1e;
  --accent-ink: #ffffff;
  --good: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --chip: #ececef;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.05);
  --slate-fill:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #1d1d20, #0c0c0e);
  --silver-rule: #5f6165, #f2f2f2 50%, #5f6165;
  --serif: Georgia, "Times New Roman", "Palatino Linotype", serif;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e10;
    --panel: #1a1a1d;
    --ink: #ececee;
    --muted: #a2a5ab;
    --line: #2e2e33;
    --trim: #b9bbc0;
    --accent: #e6e7ea;
    --accent-ink: #111113;
    --chip: #27272b;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.25);
  }
}
::selection { background: var(--accent); color: var(--accent-ink); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }

.app { display: none; min-height: 100vh; }
.app.on { display: block; }

header.top {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 20px 10px;
  background: linear-gradient(90deg, var(--silver-rule)) bottom / 100% 2px no-repeat, var(--slate-fill);
  background-color: var(--slate);
  position: sticky; top: 0; z-index: 10; color: #f1f1f2;
}
header.top nav { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
header.top nav button {
  border: none; background: transparent; color: #c9cacf;
  padding: 8px 12px; border-radius: 8px; font-weight: 500; transition: background .12s, color .12s;
}
header.top nav button:hover { background: rgba(255,255,255,.09); color: #fff; }
header.top nav button.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 -2px 0 var(--silver); }
header.top :is(button, a):focus-visible { outline-color: #e9e9eb; }
header .spacer { flex: 1; }
header .who { color: #c9cacf; font-size: 13px; }
header.top > .btn { background: transparent; border-color: rgba(255,255,255,.3); color: #ececee; }
header.top > .btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); }

/* Berlin Patten Ebling brand: the firm's own emblem and wordmark, as supplied. */
.brand { display: flex; align-items: center; gap: 12px; color: #fff; margin-right: 10px; user-select: none; min-width: 0; }
.brand-emblem { width: 38px; height: 38px; flex: none; display: block; }
.brand-wordmark { height: 30px; width: auto; flex: none; display: block; }
.brand .app-name {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--silver); white-space: nowrap;
  padding-left: 12px; border-left: 1px solid rgba(255,255,255,.22);
}

/* Hover tooltips (data-tip) */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 6px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 400; line-height: 1.35; white-space: nowrap;
  z-index: 60; pointer-events: none; box-shadow: 0 5px 16px rgba(0,0,0,.22);
}
header [data-tip]:hover::after { background: #fff; color: #17171a; }

main { max-width: 1200px; margin: 0 auto; padding: 20px; }
.view { display: none; }
.view.on { display: block; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 12px; font-size: 16.5px; font-family: var(--serif); letter-spacing: .015em; font-weight: 600; }
details.fold > summary b { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.card h3 { margin: 16px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.grid { display: grid; gap: 16px; }
.grid.cols { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }

.btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 8px 14px; font-weight: 500; transition: border-color .12s, background .12s, transform .05s; }
.btn:hover { border-color: var(--trim); background: color-mix(in srgb, var(--chip) 55%, var(--panel)); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.18); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--panel)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 10px rgba(0,0,0,.2); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: .5; cursor: default; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--chip); }
.badge.good { color: var(--good); }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--bad); }

.staff { display: flex; flex-direction: column; gap: 6px; }
.staff .person { display: grid; grid-template-columns: 1fr 90px 60px; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.staff .person:hover { background: var(--chip); }
.staff .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff .name small { color: var(--muted); font-weight: 400; }
.meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--good); }
.meter.warn > i { background: var(--warn); }
.meter.bad > i { background: var(--bad); }
.count { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
tr:hover td { background: var(--chip); }
tr.clickable { cursor: pointer; }

.drop {
  border: 2px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center;
  color: var(--muted); transition: border-color .15s;
}
.drop.over { border-color: var(--accent); color: var(--accent); }
.filelist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.filelist li { background: var(--chip); border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.filelist li b { cursor: pointer; margin-left: 6px; color: var(--bad); }

textarea.email { width: 100%; min-height: 110px; resize: vertical; }

.decision { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.decision .pick { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.decision .pick .role { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.decision .pick .who { font-size: 19px; font-weight: 650; margin: 6px 0 2px; }
.decision .pick .sub { color: var(--muted); font-size: 13px; }
.decision .pick.empty .who { color: var(--bad); }

details.tree { margin-top: 10px; }
details.tree summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.treestep { border-left: 3px solid var(--line); margin: 8px 0 8px 4px; padding: 2px 10px; font-size: 13px; }
.treestep .stepname { font-weight: 600; }
.treestep .why { color: var(--muted); }

.apply li { margin: 6px 0; }
.apply .val { font-weight: 600; }
.copy { border: none; background: var(--chip); border-radius: 6px; padding: 2px 8px; font-size: 12px; margin-left: 8px; }

.warnlist { margin: 8px 0; padding-left: 20px; color: var(--warn); font-size: 14px; }
/* Something to look at, not something wrong: the name search prints a list of
   files that share a party, and orange would read as an error. */
.findlist { margin: 8px 0; padding-left: 20px; font-size: 14px; }
.findlist li { margin: 0 0 4px; }
.notes { white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--chip); border-radius: 8px; padding: 12px; }

.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; padding: 32px 16px;
  background:
    radial-gradient(80% 60% at 18% 0%, rgba(255,255,255,.11), transparent 60%),
    radial-gradient(70% 60% at 86% 100%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(160deg, #202023, #09090b);
  background-color: var(--slate);
}
.login-logo { display: block; width: min(460px, 88vw); height: auto; }
.login {
  width: min(380px, 100%); padding: 30px 28px 26px; margin: 0; border: 0;
  background: linear-gradient(90deg, #77797e, #ececed 50%, #77797e) top / 100% 3px no-repeat, var(--panel);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.login h1 { font-size: 21px; margin: 4px 0 4px; text-align: center; font-family: var(--serif); letter-spacing: .04em; }
.login p { color: var(--muted); margin: 0 0 18px; text-align: center; font-size: 13.5px; }
.login .btn { min-height: 42px; }
.login-foot { margin: 0; color: #8f9299; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; text-align: center; }
.login input { width: 100%; margin-bottom: 10px; }
.login .err { color: var(--bad); font-size: 13px; min-height: 18px; }

.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; z-index: 50; }
.modal-back.on { display: flex; }
.modal { background: var(--panel); border-radius: 14px; padding: 20px; width: min(860px, 100%); }

form.stack { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; }
form.stack label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
/* A tickbox belongs beside its label, not above it. `form.stack label` sets
   the column direction every other field wants, so an opt-in row says so. */
form.stack label.tickrow { flex-direction: row; align-items: flex-start; gap: 8px; }
form.stack label.tickrow input { margin-top: 2px; flex: none; }
#pair-settings-form { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
#pair-settings-form .pair-settings-note { grid-column: 1 / -1; margin: 4px 0; line-height: 1.5; }
#pair-settings-form input[type=number] { max-width: 180px; }
#pair-settings-form button { grid-column: 1 / -1; justify-self: start; }
form.stack fieldset.ticks { display: grid; gap: 10px; grid-column: 1 / -1; }
.field-note { color: var(--muted); font-size: 12px; }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.tile .num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.tile.warn .num { color: var(--warn); }
.tile.good .num { color: var(--good); }

/* Filter chips */
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Nav badge */
.navbadge { display: inline-block; min-width: 18px; text-align: center; background: var(--warn); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 5px; margin-left: 4px; }

/* Avatar initials */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chip); color: var(--ink); font-size: 11px; font-weight: 700; flex: none; }

/* Rulebook steps */
.rbstep { display: grid; grid-template-columns: 56px 1fr auto; align-items: start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rbstep .switch { margin-top: 4px; }
.rbstep.off .rules-step { opacity: .6; }
.rbstep.off b { text-decoration: line-through; text-decoration-color: var(--muted); }
.rbstep:last-child { border-bottom: none; }
.rbstep .n { width: max-content; min-width: 32px; height: 32px; padding: 0 7px; border-radius: 999px; background: var(--chip); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rbstep b { display: block; margin-bottom: 2px; }
.rbstep .d { color: var(--muted); font-size: 14px; }
.rules-step { min-width: 0; }
.rules-step > summary { cursor: pointer; padding: 5px 0; }
.rules-step > summary b { display: inline; }
.rules-step .d { padding: 4px 10px 10px 0; line-height: 1.5; }
.rules-step-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.rules-step-control .switch { flex: none; margin: 0; }

/* Settings */
.teststatus { font-size: 13px; }
.teststatus.ok { color: var(--good); }
.teststatus.bad { color: var(--bad); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.code-reveal { background: var(--chip); border: 1px dashed var(--accent); border-radius: 10px; padding: 12px; margin-top: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.audit-row { display: grid; grid-template-columns: 150px 140px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.audit-row .t { color: var(--muted); }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-list span { background: var(--chip); border-radius: 999px; padding: 3px 10px; font-size: 13px; }

/* Setup checklist */
.setup-list { display: grid; gap: 4px; margin-top: 10px; }
.setup-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 7px 8px; border-radius: 10px; align-items: start; }
.setup-item:hover { background: var(--chip); }
.setup-item .dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin-top: 1px; }
.setup-item.done .dot { background: var(--good); color: #fff; }
.setup-item.todo .dot { background: var(--line); color: var(--muted); }
.setup-item.done .lbl { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.setup-item .hint { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.setup-item .detail { color: var(--warn); font-size: 12.5px; }

/* Sync progress */
.syncbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 8px; }
.syncbar > i { display: block; height: 100%; background: var(--accent); transition: width .6s; }
.syncbar.indet > i { width: 30% !important; animation: slide 1.2s ease-in-out infinite alternate; }
@keyframes slide { from { margin-left: 0; } to { margin-left: 70%; } }

/* Log viewer */
.logview { max-height: 420px; overflow: auto; background: var(--chip); border-radius: 10px; padding: 10px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; }
.logline { white-space: pre-wrap; word-break: break-word; }
.logline .lt { color: var(--muted); }
.logline .lc { color: var(--accent); }
.logline.warn { color: var(--warn); }
.logline.error { color: var(--bad); font-weight: 600; }

.toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 10px; opacity: 0; transition: opacity .2s; z-index: 99;
}
.toast.on { opacity: 1; }
.muted { color: var(--muted); }
.right { text-align: right; }
.mt { margin-top: 12px; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Rules page: drag-reorder + inline switches + collapsible sections */
.rules-intro { padding: 20px 22px; }
.rules-intro h2 { font-size: 22px; margin: 2px 0 8px; }
.rules-intro > p.muted { margin: 0 0 16px; max-width: 72ch; line-height: 1.5; }
.rules-eyebrow { margin: 0; color: var(--accent); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.rules-area-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rules-area-tab { text-align: left; min-height: 92px; display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--panel); }
.rules-area-tab b { font-size: 15px; }
.rules-area-tab span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.rules-area-tab:hover, .rules-area-tab:focus-visible { border-color: var(--accent); }
.rules-area-tab.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.rules-area-panel[hidden] { display: none; }
.rules-area-panel > .card:first-child { margin-top: 2px; }
.rules-settings-form { display: grid; gap: 10px; }
.rules-settings-group { border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; min-width: 0; }
.rules-settings-group > summary { cursor: pointer; padding: 12px 0; }
.rules-settings-group > summary b { display: block; font-size: 14px; }
.rules-settings-group > summary span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
.rules-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 8px 0 16px; border-top: 1px solid var(--line); }
.rules-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.rules-fields input, .rules-fields select { width: 100%; font-weight: 400; }
.rules-fields .field-note { font-weight: 400; line-height: 1.4; }
@media (max-width: 850px) { .rules-area-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rules-area-tab { min-height: 104px; padding: 10px; } .rbstep { grid-template-columns: 48px 1fr; } .rules-step-control { grid-column: 2; justify-content: flex-start; } }
.grip { cursor: grab; color: var(--muted); font-size: 15px; user-select: none; width: 24px; }
tr.dragging { opacity: .45; }
tr.ruleoff td { opacity: .55; }
tr.ruleoff .grip, tr.ruleoff .switch { opacity: 1; }
.switch { position: relative; display: inline-block; width: 38px; height: 22px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s; }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--good); }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:disabled + span { opacity: .5; }

details.fold > summary { cursor: pointer; list-style: none; padding: 2px 0; font-size: 16px; }
details.fold > summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform .15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary::-webkit-details-marker { display: none; }

.rbstep.custom { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; }
.rbstep.custom .n { background: var(--accent); color: var(--accent-ink); }

/* English -> rule drafting box */
.draftbox { background: color-mix(in srgb, var(--trim) 9%, transparent); border: 1px solid color-mix(in srgb, var(--trim) 35%, transparent); border-radius: 10px; padding: 10px 12px; margin: 10px 0 4px; font-size: 13.5px; }

/* Roster bulk-edit bar */
.bulkbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--chip); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; margin-bottom: 10px; font-size: 13.5px; }
.bulkbar label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.bulkbar select, .bulkbar input { padding: 4px 8px; font-size: 13px; }

/* Ask the Desk */
#ask-log { display: flex; flex-direction: column; gap: 8px; }
.askmsg { border-radius: 10px; padding: 9px 13px; max-width: 100%; }
.askmsg.q { background: var(--chip); font-weight: 600; align-self: flex-start; }
.askmsg.a { border: 1px solid var(--line); align-self: stretch; }
.askmsg.a pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.55; }
.askmsg .src { font-size: 11px; color: var(--muted); margin-top: 4px; }
.pill-list.clicky span { cursor: pointer; }
.pill-list.clicky span:hover { outline: 1px solid var(--accent); }

p.warn { color: var(--warn); font-size: 13.5px; }

/* Closing-week heat */
#heat-table td.h { text-align: center; font-variant-numeric: tabular-nums; border-radius: 6px; }
#heat-table .name-col { white-space: nowrap; }

.warnCell { background: color-mix(in srgb, var(--warn) 18%, transparent); border-radius: 6px; }

/* Operational history and recipient preview */
.activity-entry { padding: 12px 0; border-bottom: 1px solid var(--border, #64748b55); overflow-wrap: anywhere; }
.activity-entry p { margin: 6px 0; }
.recipient-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.recipient { padding: 10px; border: 1px solid var(--border, #64748b55); border-radius: 8px; overflow-wrap: anywhere; }
#m-recipient-preview { padding: 10px; border-left: 3px solid var(--trim); }
#m-activity { max-height: 560px; overflow-y: auto; }

/* Recipient review remains readable and usable on a narrow phone screen. */
.notice-review { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 18px; }
.notice-choice { display:flex; align-items:flex-start; gap:12px; padding:14px 4px; border-bottom:1px solid var(--line); cursor:pointer; min-height:44px; }
.notice-choice input { flex-shrink:0; margin-top:5px; width:18px; height:18px; }
.notice-choice span { min-width:0; overflow-wrap:anywhere; }
.notice-actions .btn, #m-review-notice { min-height:44px; }
#notice-result { overflow-wrap:anywhere; }
@media(max-width:600px) { .notice-actions { flex-direction:column; align-items:stretch; } .notice-review { padding:12px; } }

/* Keep action controls usable even when a damaged package has many warnings. */
.review-card{border:1px solid #a56d2f;border-radius:12px;background:rgba(180,110,20,.08);padding:16px;color:var(--text)}
.review-card h3{margin-top:0}.review-card li{margin:8px 0;line-height:1.45}
.review-card summary{cursor:pointer;color:var(--muted);padding:8px 0}
.review-details{max-height:240px;overflow:auto;overflow-wrap:anywhere;font-size:13px;line-height:1.5}
.review-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.review-fields label{display:flex;flex-direction:column;gap:5px}.review-fields input{width:100%;min-width:0}
@media(max-width:600px){.review-fields{grid-template-columns:1fr}.review-card{padding:12px}}

/* Role pickers inside Settings (e.g. who receives the forwarded original email). */
.inline-checks { border: 1px solid var(--border, #d7dbe3); border-radius: 8px; padding: 6px 10px; margin: 4px 0 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.inline-checks legend { color: var(--muted); font-size: 12px; padding: 0 4px; }
.inline-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }

/* Emergency stop: obvious in both states, never mistaken for an ordinary setting. */
.stopbox { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-left: 5px solid var(--good); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px; }
.stopbox > :first-child { flex: 1 1 240px; min-width: 200px; }
.stopbox.stopped { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.stopbox .btn { flex: 0 0 auto; }
.helplink { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-color: var(--trim); text-underline-offset: 3px; }
.helplink:hover { text-decoration-color: currentColor; }
.note { background: var(--chip); border-radius: 8px; padding: 8px 12px; font-size: 13px; }

/* Help tab: index on the left, the guide on the right; single column on phones. */
.help-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .help-layout { grid-template-columns: 1fr; } }
.help-index { position: sticky; top: 70px; }
.help-index h3 { margin: 14px 0 6px; }
.help-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; }
.help-item .muted { font-size: 12.5px; }
.help-item:hover { background: var(--chip); }
.help-item.on { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--trim); }
.help-doc { line-height: 1.6; }
.help-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.help-toc a { background: var(--chip); border-radius: 999px; padding: 4px 11px; font-size: 13px; text-decoration: none; color: var(--ink); }
.help-toc a:hover { outline: 1px solid var(--accent); }
.md h1 { font-family: var(--serif); font-size: 24px; margin: 0 0 12px; }
.md h2 { font-family: var(--serif); font-size: 18px; margin: 26px 0 8px; padding-top: 8px; border-top: 1px solid var(--line); text-transform: none; letter-spacing: 0; color: var(--ink); }
.md h3 { font-size: 15px; margin: 18px 0 6px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 650; }
.md h4 { font-size: 14px; margin: 14px 0 4px; }
.md p, .md li { font-size: 14.5px; }
.md ul, .md ol { padding-left: 24px; }
.md li { margin: 4px 0; }
.md code { background: var(--chip); border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.md pre.md-code { background: var(--chip); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.md pre.md-code code { background: none; padding: 0; }
.md blockquote { border-left: 4px solid var(--trim); margin: 12px 0; padding: 6px 14px; color: var(--muted); background: color-mix(in srgb, var(--trim) 8%, transparent); border-radius: 0 8px 8px 0; }
.md .md-table { overflow-x: auto; margin: 10px 0; }
.md table td, .md table th { vertical-align: top; }
.md a { color: var(--accent); }
.md-anchor { opacity: 0; text-decoration: none; margin-left: 6px; font-weight: 400; color: var(--muted); }
.md h2:hover .md-anchor, .md h3:hover .md-anchor { opacity: 1; }

/* Matter view tabs and the work queue */
.mtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mtabs .chip { cursor: pointer; }
/* One queue card alone fills the row (auto-fit collapses the empty track); two sit side by side. */
#matters-queue .grid.cols { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.queue-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.queue-row:last-child { border-bottom: none; }
/* The text column keeps at least 220px; the buttons shrink and wrap instead of
   crushing the address into one letter per line. */
.queue-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; font-size: 14px; }
.queue-main .muted { font-size: 12.5px; overflow-wrap: anywhere; }
.queue-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }
@media (max-width: 640px) { .queue-row { flex-direction: column; align-items: stretch; } .queue-actions { justify-content: flex-start; } }

/* ── Settings: five groups behind a sub-nav instead of a wall of cards ────── */
.card.subnav { position: sticky; top: 58px; z-index: 8; padding: 12px 14px; }
.card.subnav .chip { cursor: pointer; }
.findwrap { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.findwrap input { min-width: 210px; }
.setgroup { display: none; }
.setgroup.on { display: block; }
.groupnote { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; max-width: 74ch; }
/* While a search is running every group is shown and non-matching cards drop out. */
.finding .setgroup { display: block; }
.finding .groupnote { display: none; }
.finding .setgroup:not(:has(.card:not([hidden]))) { display: none; }
.card.wide { grid-column: 1 / -1; }
.card.hit { box-shadow: 0 0 0 2px var(--trim); }

/* A settings card reads as a stack: title, why it exists, the fields, the buttons. */
#view-settings .card > h2 { display: flex; align-items: baseline; gap: 8px; }
#view-settings .card > p:first-of-type { margin-top: 0; }
#view-settings form.stack { margin-top: 12px; }

/* Wide report tables scroll inside their card instead of pushing the page out. */
#report-body, #analytics-body, .tablewrap { overflow-x: auto; }

/* ── Narrow screens: the header used to force the page wider than the phone ──
   The brand, the twelve nav buttons and the sign-out block would not shrink,
   so every tab scrolled sideways. Below 900px the nav takes its own row and
   scrolls on its own axis instead of stretching the page. */
@media (max-width: 900px) {
  header.top { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; gap: 10px; }
  header.top .brand { margin-right: 0; }
  .brand-wordmark { height: 26px; }
  header .spacer { display: none; }
  header.top nav {
    order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  header.top nav::-webkit-scrollbar { display: none; }
  header.top nav button { white-space: nowrap; flex: none; }
  header .who { margin-left: auto; }
  main { padding: 14px 12px; }
  .card { padding: 14px; border-radius: 12px; }
  .card.subnav { position: static; }
  .findwrap { flex: 1 1 100%; }
  .findwrap input { min-width: 0; width: 100%; }
  /* A wide table scrolls inside its own card rather than dragging the page
     sideways — the roster, the PTO list and the report tables all do this. */
  .card { overflow-x: auto; }
  .kv { grid-template-columns: 1fr; }
  .audit-row { grid-template-columns: 1fr; gap: 2px; }
}
/* A long address, URL or file name never widens the page. */
.md p, .md li, .help-doc, .help-item, .md h1, .md h2, .md h3 { overflow-wrap: anywhere; }


/* The average-file-count report. A bar you can read at a glance beats a
   column of numbers you have to compare in your head — the whole reason this
   report was rebuilt was "I don't understand the current one". */
.bigline { margin: 14px 0 4px; font-size: 15px; line-height: 1.65; max-width: 74ch; }
.bigline b { white-space: nowrap; }
.meter { display: inline-block; vertical-align: middle; width: 118px; height: 9px; margin-left: 8px;
         background: var(--chip); border-radius: 5px; overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
table.readable td, table.readable th { padding: 8px 10px; }
table.readable tbody tr:hover { background: var(--chip); }
tr.firmrow { background: var(--chip); }
tr.firmrow td { border-bottom: 2px solid var(--line); }
.legendbox { padding: 12px 14px; background: var(--chip); border-radius: 10px; font-size: 13px; line-height: 1.55; max-width: 88ch; }
.legendbox p { margin: 6px 0 0; color: var(--muted); }
.legendbox p b { color: var(--ink); }
@media (max-width: 900px) { .meter { width: 64px; } }

/* Settings → Reports: which mail carries what, and to whom. */
.reportmap { border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.reportmap td { padding: 5px 14px 5px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.reportmap tr:last-child td { border-bottom: 0; }

/* Click/tap and keyboard-accessible help in availability panels. */
.availability-info { margin: 10px 0; font-size: 13px; }
.availability-info summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.availability-info p { max-width: 78ch; line-height: 1.5; }

.matters-options summary { cursor: pointer; font-size: 13px; }
.matters-options .chips { flex-wrap: wrap; }

/* Coverage Desk: the file search dropdown and the person's-files list. */
.cov-combo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.cov-combo-box { position: relative; }
.cov-combo-box input { width: 100%; box-sizing: border-box; }
.cov-suggest { list-style: none; margin: 0; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-height: 320px; overflow-y: auto; }
.cov-combo-box .cov-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.cov-suggest li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); font-size: 13.5px; }
.cov-suggest li span { font-size: 12px; }
.cov-suggest li[aria-selected="true"], .cov-suggest li:hover { background: var(--chip); }
.cov-suggest li.cov-none { cursor: default; color: var(--muted); }
.cov-suggest li.cov-none:hover { background: none; }
.cov-day { position: relative; min-width: 180px; height: 14px; background: var(--chip); border-radius: 4px; overflow: hidden; }
.cov-day span { position: absolute; top: 0; bottom: 0; background: var(--muted); }
.cov-never { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.cov-never-office { display: flex; flex-direction: column; gap: 4px; }

/* Coverage has two cards; auto-fill reserved an empty third column on wide screens. */
.coverage-grid { grid-template-columns: minmax(360px, 1fr) minmax(0, 1.25fr); align-items: start; }
.coverage-grid > .card { min-width: 0; }
@media (max-width: 1000px) { .coverage-grid { grid-template-columns: minmax(0, 1fr); } }

/* Coverage operations workspace */
#coverage-body [hidden] { display:none !important; }
.cov-heading h2 { font-size:27px; margin:0; }
.cov-eyebrow { font-size:11px;letter-spacing:.14em;margin:0 0 6px; }
.cov-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.cov-metric { text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:var(--ink); }
.cov-metric strong { font-size:28px;font-weight:600; }
.cov-metric span { font-size:13px;color:var(--muted); }
.cov-metric:hover { border-color:var(--accent); }
.cov-nav { margin:0 0 18px; }
.cov-filters { align-items:end; }
.cov-filters label { flex:1;min-width:160px; }
.cov-filters label:first-child { flex:2; }
.cov-request-card { max-width:880px;margin:0 auto 16px; }
.cov-timeline { padding-left:22px;max-height:420px;overflow:auto; }
.cov-timeline li { padding:10px 4px;border-bottom:1px solid var(--line); }
.cov-timeline p { margin:5px 0; }
.cov-change { border:1px solid var(--line);padding:16px;border-radius:10px;margin-top:12px;max-width:680px; }
.cov-change [role=status] { grid-column:1/-1; }
@media(max-width:600px) { .cov-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .cov-nav .btn { flex:1; } .cov-filters label { min-width:100%; } }
.cov-filters label { display:flex;flex-direction:column;align-items:stretch;gap:6px; }
.cov-filters input, .cov-filters select { width:100%; }

/* Coverage: shared hierarchy for the operations workspace, request and settings. */
#coverage-body { --muted:#565a61; }
@media (prefers-color-scheme:dark) { #coverage-body, [data-group=coverage] { --muted:#afb2b8;--good:#6ee7a0;--warn:#e0a458;--bad:#ff9a9a; } }
#coverage-body h2, #coverage-body h3, [data-group=coverage] h2, [data-group=coverage] h3 { font-family:inherit;letter-spacing:normal; }
#coverage-body p, [data-group=coverage] p { line-height:1.55; }
.cov-heading { padding:24px;border-top:3px solid var(--trim); }
.cov-heading > p { margin:10px 0 16px;color:var(--muted); }
.cov-heading details { margin-top:16px;font-size:13px;max-width:85ch; }
.cov-heading summary, .cov-policy summary { cursor:pointer;color:var(--accent);font-weight:600; }
.cov-service-state { display:flex;flex-wrap:wrap;gap:8px; }
.cov-service-state .badge { padding:5px 10px; }
.cov-metrics { grid-template-columns:repeat(6,minmax(0,1fr));gap:10px; }
.cov-metric { padding:16px;min-height:105px;justify-content:space-between; }
.cov-metric strong { font-size:30px;font-variant-numeric:tabular-nums; }
.cov-metric-attention { border-top:3px solid var(--warn); }
.cov-metric-attention strong { color:var(--warn); }
.cov-nav { padding:5px;background:var(--chip);border-radius:12px;gap:4px; }
.cov-nav .btn { border:0;background:transparent;box-shadow:none;min-height:40px;color:var(--muted); }
.cov-nav .btn.primary { background:var(--panel);color:var(--ink);box-shadow:0 1px 4px #0001; }
#coverage-body :is(button,a,summary):focus-visible, [data-group=coverage] :is(button,a,summary):focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.cov-filters { padding:16px;background:var(--bg);border-radius:10px;margin-top:16px; }
.cov-filters label { font-size:12px;font-weight:600; }
.cov-empty { padding:36px 16px;text-align:center;border:1px dashed var(--line);border-radius:12px; }
.cov-empty strong { font-size:17px; }
.cov-empty p { margin:8px 0;color:var(--muted);font-size:13px; }
.cov-request-card { max-width:960px;padding:24px; }
.cov-intro { margin:0 0 20px;font-size:14px; }
#cov-form { display:block; }
.cov-form-section { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid var(--line);min-width:0; }
.cov-section-heading { grid-column:1/-1;display:flex;align-items:center;gap:12px; }
.cov-section-heading > span { display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--chip);color:var(--accent);font-size:12px;font-weight:700; }
#coverage-body .cov-section-heading h3 { margin:0;color:var(--ink);font-size:16px;text-transform:none; }
.cov-section-heading p { margin:4px 0 0;font-size:12px;color:var(--muted); }
#cov-form label { color:var(--ink);gap:7px;line-height:1.45;min-width:0; }
#cov-form :is(input,select) { min-width:0;max-width:100%; }
#cov-form .field-note { font-weight:400;line-height:1.5; }
#cov-form fieldset { min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px; }
#cov-form legend { font-size:13px;font-weight:600;padding:0 5px; }
#cov-form .tickrow:has(input[type=radio]) { padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel); }
#cov-form .tickrow:has(input[type=radio]:checked) { background:var(--chip);border-color:var(--accent); }
#cov-form input:is([type=radio],[type=checkbox]) { accent-color:var(--accent); }
.cov-callout { grid-column:1/-1;margin:0;padding:12px 14px;background:var(--chip);border-radius:10px;font-size:13px;line-height:1.5; }
.cov-policy { grid-column:1/-1;font-size:13px; }
.cov-policy .note { line-height:1.55; }
.cov-form-actions { justify-content:flex-end; }
.cov-form-actions .btn { min-height:44px; }
#coverage-body table.readable td { line-height:1.55; }
#coverage-body table.readable details { padding:10px 12px;background:var(--bg);border-radius:9px; }
#coverage-body table.readable summary { cursor:pointer;font-size:13px; }
.cov-settings-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0; }
.cov-settings-heading h2 { font-size:26px;margin:0; }
.cov-settings-heading p { margin:8px 0; }
[data-group=coverage] .coverage-grid { display:block;max-width:1100px; }
[data-group=coverage] .card { padding:24px; }
.cov-settings-section { grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px 0;border-top:1px solid var(--line);min-width:0; }
[data-group=coverage] .cov-settings-section h3 { grid-column:1/-1;font-size:16px;text-transform:none;color:var(--ink);margin:0 0 4px; }
[data-group=coverage] form.stack label { color:var(--ink);gap:7px;line-height:1.5;min-width:0; }
[data-group=coverage] :is(input,select) { min-width:0;max-width:100%; }
[data-group=coverage] fieldset { min-width:0;border:1px solid var(--line);border-radius:10px;padding:16px; }
[data-group=coverage] legend { font-size:13px;font-weight:600;padding:0 6px; }
[data-group=coverage] .field-note { line-height:1.55; }
#set-cov-travel-routes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px; }
#set-cov-travel-routes label { padding:12px;border-radius:9px;background:var(--bg); }
.cov-never-office { padding:12px;background:var(--bg);border-radius:8px; }
.cov-settings-save { padding-top:16px;border-top:1px solid var(--line); }
@media(max-width:1000px) { .cov-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:650px) {
  .cov-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cov-heading,.cov-request-card,[data-group=coverage] .card { padding:16px; }
  .cov-form-section,.cov-settings-section { grid-template-columns:minmax(0,1fr); }
  #set-cov-travel-routes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cov-settings-heading { align-items:flex-start;flex-direction:column; }
  .cov-form-actions .btn { flex:1; }
  .cov-nav .btn { flex:1 1 auto; }
}
@media(max-width:400px) { #set-cov-travel-routes { grid-template-columns:minmax(0,1fr); } }

@media(min-width:651px) {
  #cov-form fieldset.ticks { grid-column:auto;align-content:start; }
  #cov-form label:has(#cov-closer) { grid-column:1/-1; }
}

/* Unified Desk workspace: clear hierarchy, persistent navigation, broad content. */
@media(min-width:1100px){
 .app.on{display:grid;grid-template-columns:264px minmax(0,1fr);align-items:start}
 header.top{flex-direction:column;align-items:stretch;height:100vh;overflow-y:auto;padding:26px 18px 22px;gap:16px;background:linear-gradient(180deg,var(--silver-rule)) right / 1px 100% no-repeat,var(--slate-fill);background-color:var(--slate)}
 header.top nav{flex-direction:column;gap:4px;flex-wrap:nowrap}
 header.top nav button{text-align:left;padding:10px 14px;border-radius:9px;font-size:13px}
 header.top nav button.on{background:rgba(255,255,255,.13);box-shadow:inset 3px 0 0 var(--silver)}
 header.top .brand{flex-direction:column;align-items:center;gap:12px;margin:0;padding:0 0 18px;border-bottom:1px solid rgba(255,255,255,.13)}.brand-emblem{width:66px;height:66px}.brand-wordmark{width:100%;max-width:220px;height:auto}.brand .app-name{border-left:0;padding-left:0;font-size:9.5px;letter-spacing:.26em}
 header.top .spacer{flex:1}header.top .who{overflow-wrap:anywhere}header.top [data-tip]:hover::after{display:none}
 .app>main{width:100%;max-width:1500px;padding:32px 36px;min-width:0}
}
.nav-group{color:#8f9299;font-size:10px;text-transform:uppercase;letter-spacing:.14em;padding:14px 12px 5px}
.desk-welcome{padding:8px 0 26px;max-width:760px}.desk-eyebrow{color:var(--muted);font-size:11px;letter-spacing:.18em;margin:0 0 10px}.desk-welcome h1{font-family:var(--serif);font-size:clamp(28px,3vw,42px);font-weight:500;margin:0 0 12px;letter-spacing:-.025em}.desk-welcome>p:not(.desk-eyebrow){color:var(--muted);line-height:1.6}.desk-welcome .row{margin-top:20px}.desk-welcome a,.desk-status-card{text-decoration:none}.desk-section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}.desk-section-title h2{margin:0;font-size:20px}.desk-section-title p{font-size:12px;margin:6px 0}.desk-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.desk-status-card{display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--ink)}.desk-status-card:hover{border-color:var(--accent)}.desk-status-card strong{font-size:26px;line-height:1.2}.desk-status-card:first-child strong{font-size:20px}.desk-status-card span,.desk-status-card small{color:var(--muted);font-size:12px;line-height:1.4}.desk-status-card.attention{border-left:4px solid var(--warn)}.desk-service-strip{display:flex;gap:10px 24px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:16px 0}.desk-attention-list{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:24px}.desk-attention-list summary{font-weight:600;cursor:pointer}.desk-attention-list a{display:flex;justify-content:space-between;gap:16px;color:var(--ink);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.desk-attention-list a:last-child{border-bottom:0}.desk-attention-list a b{color:var(--accent);font-size:12px}.mtabs{position:sticky;top:0;background:var(--panel);z-index:2;padding:12px 0}.btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1099px){header.top{flex-wrap:wrap;gap:10px}header.top nav{order:4;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}header.top nav button{flex-shrink:0}.nav-group{display:none}}
@media(max-width:600px){.desk-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.desk-status-card{padding:14px}.desk-status-card strong{font-size:23px}.desk-section-title{align-items:flex-start}.desk-attention-list a{flex-direction:column;gap:5px}.grid.cols{grid-template-columns:minmax(0,1fr)}.desk-welcome{padding-top:0}main{padding:16px}.brand .app-name{font-size:9px}.mtabs{position:static}header.top .who{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:700px){#cov-queue .tablewrap{overflow:visible}#cov-queue table,#cov-queue tbody{display:block;width:100%}#cov-queue thead{display:none}#cov-queue tr[data-coverage-id]{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid var(--line);border-radius:12px 12px 0 0;padding:14px;margin-top:16px}#cov-queue tr[data-coverage-id]>td{border:0;padding:0;min-width:0;overflow-wrap:anywhere}#cov-queue td[data-label="File"],#cov-queue td[data-label="Status"]{grid-column:1/-1}#cov-queue td[data-label]:before{content:attr(data-label);display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}#cov-queue tr:not([data-coverage-id]){display:block;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;padding:10px 14px}#cov-queue tr:not([data-coverage-id])>td{display:block;padding:0!important;width:100%;overflow-wrap:anywhere}}

.matter-modal-header{display:flex;align-items:flex-start;gap:18px;justify-content:space-between}.matter-modal-header h2{margin:0;font-size:22px;line-height:1.3;min-width:0;overflow-wrap:anywhere}.matter-modal-header button{flex-shrink:0}

/* ── Coverage Desk: week board, request cards, settings overview (Nov 6 2026) ── */
.cov-board-card{padding:20px 22px}.cov-board-wrap{overflow:auto;max-width:100%;margin-top:14px;padding-bottom:4px}.cov-board{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px;min-width:1090px}
.cov-day-col{border:1px solid var(--line);border-radius:10px;background:var(--bg);display:flex;flex-direction:column;min-height:120px}.cov-day-today{border-color:var(--trim);box-shadow:inset 0 3px 0 var(--trim)}.cov-day-dim{opacity:.72}
.cov-day-head{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12px;font-weight:650}.cov-day-head strong{font-size:16px}.cov-day-files{display:flex;flex-direction:column;gap:6px;padding:8px}.cov-day-none{color:var(--muted);text-align:center;padding:12px 0}
.cov-chip{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:12px;min-width:0;cursor:pointer}.cov-chip>span:last-child{min-width:0;flex:1}.cov-chip strong{display:block;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cov-chip small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.cov-chip:hover{border-color:var(--trim)}.cov-chip-review{border-left:3px solid #b45309}.cov-chip-review .cov-avatar{background:#fbeaea;color:#9c2a2a}
.cov-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--chip);color:var(--accent);font-size:10px;font-weight:700;flex-shrink:0;margin-right:7px;vertical-align:middle}
.cov-stale-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:10px 14px;background:#fbeaea;color:#9c2a2a;border-radius:10px;font-size:13px}
.cov-cards{display:flex;flex-direction:column;gap:12px}.cov-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--panel)}.cov-card-review{border-left:4px solid #b45309}.cov-card-cancelled{opacity:.75}.cov-card.coverage-highlight{box-shadow:0 0 0 3px var(--trim)}
.cov-card-head{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:start}.cov-card-when strong{display:block;font-size:15px}.cov-card-when span{display:block;font-size:12px;color:var(--muted);margin-top:2px}.cov-card-office{font-weight:650;color:var(--ink)!important}.cov-card-file strong{display:block;font-size:15px;overflow-wrap:anywhere}.cov-card-file span{display:block;font-size:12px;margin-top:2px}.cov-card-file a{display:inline-block;font-size:12px;margin-top:4px}.cov-card-status{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:260px}
.cov-card-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.cov-card-body>div{min-width:0}.cov-card-body>div>span.muted{display:block;font-size:11px;margin-bottom:3px}.cov-card-body>div>strong{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}.cov-card-body>div>span.muted+strong+span{display:block;font-size:12px}.cov-card-next{grid-column:1/-1;padding:10px 12px;background:var(--chip);border-radius:8px}.cov-card-next strong{font-weight:500}
.cov-card-actions{margin-top:12px;align-items:center}.cov-cancel-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;padding:10px 12px;background:var(--bg);border-radius:8px}.cov-cancel-box input{flex:1;min-width:200px}
.cov-card-details{margin-top:10px;padding:10px 12px;background:var(--bg);border-radius:8px;font-size:13px}.cov-card-details summary{cursor:pointer}.cov-assign-panel{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.cov-assign-panel .row{align-items:end}.cov-assign-panel label{display:flex;flex-direction:column;gap:5px;font-size:12px;min-width:0}.cov-assign-panel input,.cov-assign-panel select{width:100%;box-sizing:border-box}
.cov-settings-overview{padding:16px 20px}.cov-pipe{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.cov-pipe-step{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);min-width:120px;background:var(--bg)}.cov-pipe-step b{font-size:12px}.cov-pipe-step small{font-size:11px;color:var(--muted)}.cov-pipe-step.on{border-color:#9ccfb0;background:#e9f2ed}.cov-pipe-step.on b{color:#2b6247}.cov-pipe-step.warn{border-color:#e5c07b;background:#fcf7ec}.cov-pipe-step.warn b{color:#8c641b}.cov-pipe-arrow{color:var(--muted)}
.cov-settings-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.cov-settings-nav .btn{font-size:12px;padding:5px 10px}.cov-settings-flash{animation:covflash 1.2s ease-out}@keyframes covflash{from{background:var(--chip)}to{background:transparent}}
.cov-office-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.cov-office-grid fieldset{min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px}.cov-office-grid legend{font-weight:600;font-size:13px;padding:0 4px}.cov-office-grid textarea,.cov-office-grid input{width:100%;box-sizing:border-box}.cov-office-grid label{display:flex;flex-direction:column;gap:5px;font-size:12px;margin-top:8px}
@media(max-width:900px){.cov-office-grid{grid-template-columns:1fr 1fr}.cov-card-body{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.cov-board{min-width:900px;grid-template-columns:repeat(7,minmax(120px,1fr))}.cov-card-head{grid-template-columns:1fr}.cov-card-status{justify-content:flex-start;max-width:none}.cov-card-body{grid-template-columns:1fr}.cov-office-grid{grid-template-columns:1fr}.cov-assign-panel .row{flex-direction:column;align-items:stretch}.cov-card{padding:14px}}
@media(prefers-color-scheme:dark){.cov-stale-note,.cov-chip-review .cov-avatar{background:#512c28;color:#f1b9b0}.cov-pipe-step.on{background:#203e34;border-color:#2b6247}.cov-pipe-step.on b{color:#aed3be}.cov-pipe-step.warn{background:#453923;border-color:#8c641b}.cov-pipe-step.warn b{color:#ead09b}}

/* Brand finish. Narrow screens keep the emblem and drop the wordmark so the
   first header row never outgrows the phone; tables get a quiet head row. */
@media (max-width: 700px) {
  .brand-wordmark { display: none; }
  .brand .app-name { border-left: 0; padding-left: 0; letter-spacing: .12em; white-space: normal; max-width: 96px; line-height: 1.45; }
  header.top .brand { gap: 9px; }
  header .who { max-width: 25vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 701px) and (max-width: 1099px) { .brand .app-name { display: none; } }
thead th { background: color-mix(in srgb, var(--chip) 60%, var(--panel)); }
thead th:first-child { border-radius: 8px 0 0 0; }
thead th:last-child { border-radius: 0 8px 0 0; }
.chip { transition: border-color .12s, color .12s, background .12s; }
.chip:hover { border-color: var(--trim); color: var(--ink); }
.chip.on:hover { color: var(--accent-ink); }
.desk-status-card { box-shadow: var(--shadow); transition: border-color .12s, transform .12s; }
.desk-status-card:hover { transform: translateY(-1px); }
.desk-welcome h1 { color: var(--ink); }
.modal { box-shadow: 0 24px 80px rgba(0,0,0,.35); border-top: 3px solid var(--accent); }
.toast { box-shadow: 0 8px 28px rgba(0,0,0,.28); }