/* =========================================================================
   12 Matcha · Weekly Builder (Layer 2)
   Design language mirrors the Rotational Scheduler (Layer 3): warm cream
   background, 12 Matcha green accent, ABC Diatype primary, editorial restraint.
   ========================================================================= */

:root{
  /* Base palette — 12 Matcha brand (matches Layer 3 exactly) */
  --bg:              #EEEDE7;
  --bg-alt:          #E5E3DC;
  --surface:         #F6F5F0;
  --surface-raised:  #FFFFFF;
  --border:          #D9D7CE;
  --border-strong:   #BFBDB0;
  --text:            #161613;
  --text-2:          #56544D;
  --muted:           #87857B;

  /* Brand accents */
  --matcha:          #00C900;
  --matcha-dark:     #008E00;
  --matcha-darker:   #006100;
  --matcha-soft:     #D4F4D4;
  --matcha-tint:     #E6F9E6;
  --clay:            #CC7B5C;
  --clay-dark:       #B0613E;
  --clay-soft:       #F1D9CC;

  /* Semantic */
  --ok:              var(--matcha);
  --ok-dark:         var(--matcha-dark);
  --ok-soft:         var(--matcha-soft);
  --warn:            #B64F2C;          /* yellow/orange tier */
  --warn-soft:       #F5DDD2;
  --danger:          #B81F2C;          /* red tier */
  --danger-soft:     #F7D7DA;
  --info:            #3D6E8A;
  --info-soft:       #DAE6EE;

  /* Per-basket tint hues for chips/grid backgrounds */
  --basket-a:        #E8DFC8;          /* warm sand — Mon/Fri */
  --basket-a-edge:   #C9B68A;
  --basket-b:        #D8E5DA;          /* leafy — Sat/Sun */
  --basket-b-edge:   #92B89B;
  --basket-c:        #E0E1D1;          /* dusty olive — Tue/Wed/Thu */
  --basket-c-edge:   #AAAE82;

  /* Typography */
  --font-sans:       "ABC Diatype", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --radius:          6px;
  --radius-lg:       10px;
  --shadow-1:        0 1px 2px rgba(28,26,23,.04), 0 1px 1px rgba(28,26,23,.03);
  --shadow-2:        0 6px 22px rgba(28,26,23,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}

/* ---------- Top bar ---------- */
#topbar{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  display:flex; align-items:center; gap:18px;
  padding:14px 28px 10px;
  max-width:1680px; margin:0 auto; width:100%;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none;
}
.brand-mark{ flex-shrink:0; height:52px; width:auto; display:block }
.brand-divider{ width:1px; height:32px; background:var(--border-strong); margin:0 14px }
.brand-product{ font-size:13px; color:var(--text-2); letter-spacing:.2px; font-weight:500 }
.topbar-spacer{ flex:1 }
.topbar-actions{ display:flex; gap:8px; align-items:center }

#primary-nav{
  display:flex; flex-wrap:wrap; gap:4px;
  padding:0 28px 2px;
  max-width:1680px; margin:0 auto; width:100%;
}
#primary-nav a{
  padding:10px 14px 11px;
  color:var(--text-2);
  text-decoration:none; font-weight:500; font-size:13px;
  border-bottom:2px solid transparent;
  cursor:pointer; transition:color .12s, border-color .12s;
}
#primary-nav a:hover{ color:var(--text) }
#primary-nav a.active{ color:var(--text); border-bottom-color:var(--matcha) }

/* ---------- Main ---------- */
main#view{
  flex:1;
  padding:24px 28px 64px;
  max-width:1680px; margin:0 auto; width:100%;
}

h1.page-title{
  font-weight:600; font-size:26px; line-height:1.15;
  margin:4px 0 4px; letter-spacing:-0.02em;
}
h2.section-title{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); margin:18px 0 8px;
}
p.hint{
  color:var(--text-2); font-size:13px; max-width:64ch; margin:0 0 14px;
}

#footer{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 28px; border-top:1px solid var(--border);
  background:var(--bg); color:var(--muted); font-size:12px;
  max-width:1680px; margin:0 auto; width:100%;
}

.muted{ color:var(--muted) }
.small{ font-size:12px }
.hidden{ display:none !important }

/* ---------- Buttons ---------- */
button, .btn-ghost{
  font-family:var(--font-sans); font-size:13px; font-weight:500;
  padding:7px 14px;
  background:var(--surface-raised); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  cursor:pointer; transition:background .1s, border-color .1s, color .1s;
  line-height:1.3;
}
button:hover{ border-color:var(--text-2) }
/* primary = the single hero action on a view (solid green) */
button.primary{
  background:var(--matcha); color:#fff; border-color:var(--matcha-dark);
  box-shadow:var(--shadow-1);
}
button.primary:hover{ background:var(--matcha-dark); border-color:var(--matcha-darker) }
/* accent = important-but-secondary on-brand action (outlined green) */
button.accent{
  background:var(--surface-raised); color:var(--matcha-darker);
  border-color:var(--matcha-dark); font-weight:600;
}
button.accent:hover{ background:var(--matcha-tint); border-color:var(--matcha-darker) }
.warn-edge{ box-shadow:0 0 0 2px var(--danger); }
button.danger{
  background:var(--surface-raised); color:var(--danger); border-color:var(--danger);
}
button.danger:hover{ background:var(--danger-soft) }
button.ghost, .btn-ghost{
  background:transparent; border-color:transparent; color:var(--text-2);
  padding:6px 10px;
}
button.ghost:hover, .btn-ghost:hover{ background:rgba(0,0,0,.04); color:var(--text) }
button.small, .btn-ghost.small{ padding:6px 11px; font-size:12px }
button:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none }
button:focus-visible, a:focus-visible{ outline:2px solid var(--clay); outline-offset:2px }

/* ---------- Toolbars / action rows ---------- */
.action-row{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:4px 0 18px;
}
.action-row .spacer{ flex:1 }
.action-row .sep{ width:1px; height:22px; background:var(--border-strong); margin:0 2px }
.action-row .status-note{ font-size:12px; color:var(--muted) }

/* ---------- Form controls ---------- */
input[type=text], input[type=number], input[type=date], select, textarea{
  font-family:var(--font-sans); font-size:13px;
  padding:7px 10px;
  background:var(--surface-raised);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  color:var(--text);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--clay-soft); border-color:var(--clay);
}
label.checkbox{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 6px; border-radius:4px; cursor:pointer;
  user-select:none;
}
label.checkbox input[type=checkbox]{ margin:0 }

/* ---------- Panels ---------- */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:var(--shadow-1);
}
.panel .panel-title{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); margin:0 0 10px;
}

/* ---------- Tables (artisans, debug, etc.) ---------- */
table.tbl{
  border-collapse:separate; border-spacing:0;
  background:var(--surface);
  width:100%;
}
table.tbl th, table.tbl td{
  font-size:13px; padding:8px 12px; text-align:left;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
table.tbl th{
  background:var(--bg-alt);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text);
}
table.tbl tr:last-child td{ border-bottom:none }
table.tbl td.num, table.tbl th.num{ text-align:right; font-variant-numeric:tabular-nums }
table.tbl td.center, table.tbl th.center{ text-align:center }
table.tbl tbody tr:hover td{ background:var(--bg-alt) }

/* Inline numeric inputs in tables: drop spin arrows so narrow cells don't clip */
table.tbl input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
table.tbl input[type=number]::-webkit-outer-spin-button,
table.tbl input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Scroll wrapper for wide tables */
.tbl-scroll{
  overflow:auto; border-radius:var(--radius-lg);
  border:1px solid var(--border); background:var(--surface);
  position:relative;
}
/* Sticky first column keeps the Name in view while scrolling horizontally */
.tbl-sticky th:first-child, .tbl-sticky td:first-child{
  position:sticky; left:0; z-index:1;
  box-shadow:1px 0 0 var(--border);
}
.tbl-sticky thead th:first-child{ z-index:3 }
.tbl-sticky tbody td:first-child{ background:var(--surface) }
.tbl-sticky tbody tr:hover td:first-child{ background:var(--bg-alt) }

/* ---------- Basket chips (header strip on Build Week) ---------- */
.basket-row{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px;
  margin:8px 0 6px;
}
.basket-chip{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer; user-select:none;
  transition: border-color .1s, background .1s, box-shadow .1s;
}
.basket-chip:hover{ border-color:var(--text-2) }
.basket-chip .day{
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted);
}
.basket-chip .date{ font-size:12.5px; color:var(--text-2); font-variant-numeric:tabular-nums }
.basket-chip .basket-letter{
  font-size:17px; font-weight:700; letter-spacing:-0.02em;
  margin-top:1px;
}
.basket-chip.basket-A{ background:var(--basket-a); border-color:var(--basket-a-edge) }
.basket-chip.basket-B{ background:var(--basket-b); border-color:var(--basket-b-edge) }
.basket-chip.basket-C{ background:#d2ecea; border-color:#6fbbb4 }   /* LOCAL TEST v2 (rename swap): teal for canonical C (Tue/Wed/Thu default, 72h) */
.basket-chip.basket-C2{ background:#e7defa; border-color:#b9a3e3 }   /* LOCAL TEST v2: distinct lavender for the C2 test variant */
.basket-chip.basket-C3{ background:var(--basket-c); border-color:var(--basket-c-edge) }   /* LOCAL TEST v2 (rename swap): dusty olive for the C3 override variant */
.basket-chip.overridden{ box-shadow: inset 0 0 0 1px var(--clay) }
.basket-chip.overridden::after{
  content:"override"; font-size:9px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--clay-dark); margin-top:1px;
}

/* Per-day mode chips reuse .basket-chip; tint the top edge by mode so the
   weekly mode-mix reads at a glance. */
.basket-chip.mode-soft, .basket-chip.mode-full, .basket-chip.mode-hard{
  border-top-width:3px;
}
.basket-chip.mode-soft{ border-top-color:var(--basket-b-edge) }
.basket-chip.mode-full{ border-top-color:var(--matcha-dark) }
.basket-chip.mode-hard{ border-top-color:var(--clay-dark) }
.basket-chip select{ width:100%; margin-top:2px }

/* ---------- Week grid ---------- */
/* Scroll wrapper so the grid never pushes the side panel off-screen. */
.week-grid-scroll{ overflow-x:auto; padding-bottom:2px; }
.week-grid{
  display:grid; grid-template-columns:auto repeat(7, minmax(146px, 1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  min-width:1040px;
}
.week-grid .cell, .week-grid .head{
  background:var(--surface); padding:8px 10px; font-size:13px;
  min-height:54px;
}
.week-grid .head{
  background:var(--bg-alt); font-weight:700; color:var(--text);
  font-size:11px; text-transform:uppercase; letter-spacing:.6px;
}
.week-grid .row-head{
  background:var(--bg-alt); color:var(--text); font-weight:700;
  font-size:12px; padding:8px 12px;
  font-variant-numeric:tabular-nums;
}
.week-grid .cell.empty{ background:var(--surface-raised) }
.week-grid .cell .shift-label{
  display:block; font-size:11px; color:var(--muted); margin-bottom:4px;
  font-variant-numeric:tabular-nums;
}
.week-grid .cell select{
  width:100%; padding:4px 6px; font-size:13px;
}
.week-grid .cell.basket-A{ background: color-mix(in srgb, var(--basket-a) 26%, var(--surface)) }
.week-grid .cell.basket-B{ background: color-mix(in srgb, var(--basket-b) 26%, var(--surface)) }
.week-grid .cell.basket-C{ background: color-mix(in srgb, #6fbbb4 26%, var(--surface)) }   /* LOCAL TEST v2 (rename swap): teal */
.week-grid .cell.basket-C2{ background: color-mix(in srgb, #b9a3e3 26%, var(--surface)) }   /* LOCAL TEST v2 */
.week-grid .cell.basket-C3{ background: color-mix(in srgb, var(--basket-c) 26%, var(--surface)) }   /* LOCAL TEST v2 (rename swap): dusty olive */
.week-grid .cell.flag-red{ box-shadow: inset 3px 0 0 var(--danger) }
.week-grid .cell.flag-yellow{ box-shadow: inset 3px 0 0 var(--warn) }

/* ---------- Side panel (tallies) ---------- */
.build-layout{
  display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap:20px;
  align-items:start;
}
/* min-width:0 lets the grid track shrink so the side panel stays in view;
   the week grid scrolls inside .week-grid-scroll instead of pushing the page. */
.build-layout > *{ min-width:0 }
.build-layout .build-side{ position:sticky; top:96px }
@media (max-width: 1200px){
  .build-layout{ grid-template-columns: 1fr }
  .build-layout .build-side{ position:static }
}

/* ---------- Flags summary ---------- */
.flag-summary{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.flag-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; font-size:12px; font-weight:500;
  border:1px solid transparent;
}
.flag-pill.red{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger) }
.flag-pill.yellow{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn) }
.flag-pill.ok{ background:var(--ok-soft); color:var(--matcha-darker); border-color:var(--matcha) }

.flag-list{ list-style:none; margin:8px 0 0; padding:0 }
.flag-list li{
  padding:6px 0; border-bottom:1px dotted var(--border);
  font-size:13px; color:var(--text);
}
.flag-list li:last-child{ border-bottom:none }
.flag-list li.red{ color:var(--danger) }
.flag-list li.yellow{ color:var(--warn) }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--text); color:#fff;
  padding:10px 16px; border-radius:999px; box-shadow:var(--shadow-2);
  font-size:13px; font-weight:500;
  z-index:1000;
}

/* ---------- Tallies side panel ---------- */
.tally-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:6px 0; border-bottom:1px dotted var(--border);
  font-size:13px;
}
.tally-row:last-child{ border-bottom:none }
.tally-name{ color:var(--text); font-weight:500 }
.tally-stat{
  font-variant-numeric:tabular-nums;
  color:var(--text-2);
}
.tally-stat.red{ color:var(--danger); font-weight:600 }
.tally-stat.yellow{ color:var(--warn); font-weight:600 }
.tally-stat.ok{ color:var(--matcha-darker) }

.badge{
  display:inline-block; font-size:10px; font-weight:600;
  padding:2px 6px; border-radius:4px;
  letter-spacing:.4px; text-transform:uppercase;
  margin-left:6px;
}
.badge.ft{ background:var(--matcha-tint); color:var(--matcha-darker); border:1px solid var(--matcha-soft) }
.badge.pt{ background:var(--bg-alt); color:var(--text-2); border:1px solid var(--border) }

/* ---------- Empty state ---------- */
.empty-state{
  text-align:center; padding:44px 24px;
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  color:var(--text-2);
  margin:16px 0;
}
.empty-state .empty-title{ font-size:16px; font-weight:600; color:var(--text); margin-bottom:4px }
.empty-state .empty-sub{ font-size:13px; color:var(--text-2) }

/* ---------- Coverage grid (compact) ---------- */
/* width:max-content keeps the grid tight to its columns (easier to scan) rather
   than stretching across the full panel width. */
table.cov-grid{ border-collapse:separate; border-spacing:0; width:max-content; max-width:100% }
/* Bolder grid lines for legibility */
table.cov-grid th, table.cov-grid td{
  border-right:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-strong);
  padding:3px 6px; text-align:center; line-height:1.2;
}
table.cov-grid th:first-child, table.cov-grid td:first-child{
  border-left:1px solid var(--border-strong);
}
table.cov-grid thead tr:first-child th{ border-top:1px solid var(--border-strong) }
/* All header rows bold + full-contrast text */
table.cov-grid thead th{
  background:var(--bg-alt); color:var(--text);
  font-weight:700; font-size:11.5px; text-transform:none; letter-spacing:0;
  padding:4px 6px;
}
/* Position columns are just colour blocks — moderate width (between tight + full) */
table.cov-grid thead th.cov-pos{ min-width:84px; width:90px }
table.cov-grid thead th .cov-sub{
  display:block; font-weight:600; font-size:10.5px; color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
table.cov-grid thead th.cov-meta{ background:var(--bg-alt); min-width:80px }
/* Body slot-time column: bold + dark */
table.cov-grid th.cov-time-head{ text-align:left; min-width:100px }
table.cov-grid td.cov-time{
  text-align:left; white-space:nowrap; font-weight:700;
  color:var(--text); font-variant-numeric:tabular-nums; font-size:12px;
  background:var(--surface); padding-left:10px;
}
/* Coverage cells — no text, colour carries the signal. */
table.cov-grid td.cov-on, table.cov-grid td.cov-gap, table.cov-grid td.cov-off{ height:22px }
table.cov-grid td.cov-on{   background:#5FBE63; border-right-color:var(--matcha-dark) }
table.cov-grid td.cov-gap{  background:var(--warn-soft) }
table.cov-grid td.cov-off{  background:var(--surface) }
table.cov-grid td.cov-bodies{ font-weight:700; font-variant-numeric:tabular-nums; font-size:12px }

/* Jump-to / top pills (in-page scroll, not navigation) */
.jump-pill{
  padding:4px 10px; font-size:12px; font-weight:500;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:999px;
  color:var(--text); cursor:pointer;
}
.jump-pill:hover{ background:var(--surface-raised); border-color:var(--text-2) }

/* ---------- Availability cell (Artisans) — compact chip + inline editor ---------- */
.avail-chip{
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; cursor:pointer; min-width:52px;
  background:var(--surface-raised); border:1px solid var(--border-strong); color:var(--text-2);
}
.avail-chip:hover{ border-color:var(--text-2); color:var(--text) }
.avail-chip.any{ background:var(--matcha-tint); border-color:var(--matcha-soft); color:var(--matcha-darker) }
.avail-chip.win{ background:var(--surface-raised); border-color:var(--border-strong); color:var(--text); font-variant-numeric:tabular-nums }
.avail-chip.off{ background:var(--clay-soft); border-color:var(--clay); color:var(--clay-dark); font-weight:700; letter-spacing:.4px }
.avail-editor{ display:inline-flex; align-items:center; gap:3px }
.avail-editor input[type=time]{ width:80px; font-size:11px; padding:2px 4px }
.avail-editor .avail-dash{ color:var(--muted) }
.avail-off-btn{ padding:2px 8px; font-size:11px; color:var(--clay-dark); border-color:var(--clay) }
.avail-off-btn:hover{ background:var(--clay-soft) }
/* Cell with an open, uncommitted edit (committed via "Update availability") */
td.avail-dirty{ box-shadow: inset 0 0 0 2px var(--clay) }

/* Numeric roster fields (Target h, Shifts, Consec) — green pill → click to edit,
   mirroring the availability "Any" chip. Green = saved, clay ring = pending. */
.num-chip{
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:999px; cursor:pointer; min-width:44px;
  background:var(--matcha-tint); border:1px solid var(--matcha-soft); color:var(--matcha-darker);
  font-variant-numeric:tabular-nums;
}
.num-chip:hover{ border-color:var(--matcha-dark) }
.num-editor{ display:inline-flex; align-items:center; gap:3px }
.num-editor .avail-dash{ color:var(--muted) }

/* ---------- Debug view ---------- */
.debug-baskets{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px }
@media (max-width: 1100px){ .debug-baskets{ grid-template-columns:1fr } }
.debug-curve{ font-family:var(--font-mono); font-size:12px; white-space:pre; color:var(--text-2) }

/* ---------- Reconcile view ---------- */
.rec-banner{ padding:9px 13px; border-radius:8px; font-size:13px; margin:6px 0 10px; border:1px solid var(--border) }
.rec-banner.warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn) }
.rec-banner.info{ background:var(--matcha-tint); color:var(--matcha-darker); border-color:var(--matcha) }
.rec-summary{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:4px 0 16px; padding:10px 12px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:10px }
.rec-chip{ font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--bg); border:1px solid var(--border); color:var(--text-2) }
.rec-chip.tot{ background:var(--matcha); color:#fff; border-color:var(--matcha) }
.rec-chip.res{ background:var(--matcha-soft); color:var(--matcha-darker); border-color:var(--matcha-dark) }
.rec-chip.red{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger) }
.rec-chip.yellow{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn) }
.rec-chip.green{ background:var(--matcha-soft); color:var(--matcha-darker); border-color:var(--matcha-dark) }
.rec-sep{ width:1px; align-self:stretch; background:var(--border-strong); margin:0 4px }
.rec-list{ display:flex; flex-direction:column; gap:8px }
.rec-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg) }
.rec-row.red{ border-left:4px solid var(--danger) }
.rec-row.yellow{ border-left:4px solid var(--warn) }
.rec-row.green{ border-left:4px solid var(--matcha); opacity:.85 }
.rec-row.chosen{ background:var(--matcha-tint); border-color:var(--matcha-dark) }
.rec-meta{ display:flex; flex-direction:column; gap:3px; min-width:340px; flex:1 }
.rec-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.rec-badge{ font-size:13px }
.rec-cat{ font-weight:700; font-size:13px; color:var(--text); text-transform:uppercase; letter-spacing:.03em }
.rec-who{ font-weight:600; font-size:13.5px }
.rec-resolved{ font-size:12px; color:var(--matcha-darker); font-weight:600 }
.rec-detail{ font-size:12.5px; color:var(--text-2); display:flex; gap:6px; flex-wrap:wrap; align-items:baseline }
.rec-arrow{ color:var(--muted) }
.rec-reason{ color:var(--warn); font-style:italic }
.rec-acts{ display:flex; gap:6px; flex-wrap:wrap }
.rec-act{ padding:5px 10px; border-radius:7px; border:1px solid var(--border-strong); background:var(--bg); cursor:pointer; font-weight:500 }
.rec-act:hover{ border-color:var(--matcha-dark) }
.rec-act.sel{ background:var(--matcha); color:#fff; border-color:var(--matcha) }
.rec-act:disabled{ opacity:.4; cursor:not-allowed; border-color:var(--border); background:var(--bg-alt) }
.rec-act:disabled:hover{ border-color:var(--border) }
.rec-allclear{ padding:18px; text-align:center; color:var(--matcha-darker); background:var(--matcha-soft); border-radius:10px; font-weight:600 }
.rec-collapse{ margin-top:14px; border-top:1px solid var(--border); padding-top:10px }
.rec-collapse > summary{ cursor:pointer; font-weight:600; font-size:13px; color:var(--text-2); margin-bottom:8px }
.rec-savebar{ position:sticky; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:18px; padding:12px 14px; background:var(--bg-alt); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 -2px 10px rgba(0,0,0,.04) }
.rec-namemap{ margin:6px 0 14px; padding:12px 14px; background:var(--warn-soft); border:1px solid var(--warn); border-radius:10px }
.rec-namemap-title{ font-weight:600; font-size:13px; color:var(--warn); margin-bottom:10px }
.rec-namemap-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:5px 0 }
.rec-namemap-name{ font-weight:600; font-size:13px; min-width:170px }
.rec-namemap-sel{ padding:5px 8px; border-radius:7px; border:1px solid var(--border-strong); background:var(--bg); font-size:13px; min-width:200px }

/* ---------- Week Snapshot (import banner + diff modal) ---------- */
.snap-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 12px;
  padding:8px 13px; background:var(--matcha-tint); border:1px solid var(--matcha); border-radius:9px; color:var(--matcha-darker); font-size:13px; font-weight:500 }
.snap-banner-x{ border:none; background:transparent; color:var(--matcha-darker); cursor:pointer; font-size:13px; padding:2px 6px; border-radius:6px }
.snap-banner-x:hover{ background:var(--matcha-soft) }
.snap-overlay{ position:fixed; inset:0; background:rgba(20,24,18,.42); display:flex; align-items:center; justify-content:center; z-index:1000; padding:24px }
.snap-modal{ background:var(--bg); border:1px solid var(--border-strong); border-radius:14px; width:min(620px,100%); max-height:86vh;
  display:flex; flex-direction:column; box-shadow:0 18px 50px rgba(0,0,0,.28); overflow:hidden }
.snap-modal-head{ padding:16px 20px; border-bottom:1px solid var(--border) }
.snap-modal-head h2{ margin:0; font-size:17px }
.snap-modal-body{ padding:16px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:14px }
.snap-week{ font-size:13.5px; display:flex; flex-direction:column; gap:3px }
.snap-roster-title{ font-weight:700; font-size:13.5px; margin-bottom:8px }
.snap-cat{ font-size:13px; padding:3px 0 }
.snap-cat.empty{ color:var(--muted) }
.snap-cat > summary{ cursor:pointer; font-weight:600 }
.snap-cat-list{ margin:6px 0 4px 18px; padding:0; color:var(--text-2); display:flex; flex-direction:column; gap:2px }
.snap-warn{ background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn); border-radius:8px; padding:8px 11px; font-size:12.5px }
.snap-modes{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border); padding-top:12px }
.snap-mode{ display:flex; gap:9px; align-items:flex-start; cursor:pointer; font-size:13px }
.snap-mode-desc{ display:block; color:var(--text-2); font-size:12px; font-weight:400 }
.snap-modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:var(--bg-alt) }

/* ---------- Reconcile Grid view ---------- */
.rec-viewbar{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 14px }
.rec-toggle{ display:inline-flex; border:1px solid var(--border-strong); border-radius:9px; overflow:hidden }
.rec-viewtoggle{ border:none; background:var(--bg); padding:6px 14px; font-weight:600; font-size:13px; cursor:pointer; color:var(--text-2) }
.rec-viewtoggle + .rec-viewtoggle{ border-left:1px solid var(--border) }
.rec-viewtoggle.active{ background:var(--matcha); color:#fff }
.rec-summary.inline{ margin:0; flex:1; justify-content:flex-end }
.recg-filters{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px }
.recg-chiprow{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.recg-chiplabel{ font-size:12px; color:var(--muted); font-weight:600; min-width:42px }
.recg-chip{ padding:4px 10px; border-radius:999px; border:1px solid var(--border-strong); background:var(--bg); cursor:pointer; font-size:12.5px; font-weight:500 }
.recg-chip:hover{ border-color:var(--matcha-dark) }
.recg-chip.active{ background:var(--matcha); color:#fff; border-color:var(--matcha) }
.recg-chip.clear{ border-style:dashed; color:var(--muted) }
/* grid cells */
.recg-table td.recg-cell{ position:relative; min-width:78px; padding:6px 8px; vertical-align:middle }
.recg-shift{ background:var(--matcha-tint); color:var(--matcha-darker) }
.recg-custom{ background:var(--clay-tint, var(--warn-soft)); color:var(--clay-dark, var(--warn)) }
.recg-resolved{ background:var(--matcha-soft) }
.recg-dim{ opacity:.38 }
.recg-click{ cursor:pointer }
.recg-click:hover{ outline:2px solid var(--matcha-dark); outline-offset:-2px }
.recg-main{ font-weight:500; font-size:12.5px }
.recg-sub{ font-size:10px; color:var(--muted) }
.recg-badge{ position:absolute; top:2px; right:2px; width:15px; height:15px; line-height:15px; text-align:center;
  font-size:10px; font-weight:700; border-radius:4px; color:#fff }
.recg-badge.red{ background:var(--danger) }
.recg-badge.yellow{ background:var(--warn); color:#3a2c00 }
.recg-badge.ok{ background:var(--matcha) }
.recg-badge.i{ background:var(--muted) }
/* cell action popover */
.recg-pop{ position:fixed; z-index:1100; width:260px; background:var(--bg); border:1px solid var(--border-strong);
  border-radius:11px; box-shadow:0 10px 32px rgba(0,0,0,.22); padding:12px 14px; font-size:13px }
.recg-pop-head{ font-weight:700; margin-bottom:2px }
.recg-pop-cat{ text-transform:uppercase; letter-spacing:.03em; font-size:11px; font-weight:700; color:var(--text-2); margin-bottom:8px }
.recg-pop-detail{ font-size:12.5px; color:var(--text-2); margin:1px 0 }
.recg-pop-reason{ font-size:11.5px; color:var(--warn); font-style:italic; margin:4px 0 2px }
.recg-pop-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.recg-pop-act{ padding:5px 10px; border-radius:7px; border:1px solid var(--border-strong); background:var(--bg); cursor:pointer; font-weight:500; font-size:12.5px }
.recg-pop-act:hover{ border-color:var(--matcha-dark) }
.recg-pop-act:disabled{ opacity:.4; cursor:not-allowed; border-color:var(--border); background:var(--bg-alt) }