:root {
    /* Xfinity.com light aesthetic — white, airy, purple accents */
    --purple:#6138F5; --purple-d:#4A22C7; --purple-l:#8B6DFF;
    --wash:#F2EEFE; --wash-line:#DED4FB;
    --ink:#0A0A0F; --text:#33333B; --muted:#76767F; --faint:#9C9CA5;
    --line:#EAEAF0; --line-2:#F3F3F7;
    --bg:#F5F5F8; --card:#FFFFFF;
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  button { touch-action:manipulation; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { margin:0; background:var(--bg); font-family:'Inter',system-ui,sans-serif; color:var(--text); -webkit-font-smoothing:antialiased; }
  body.capture { background:#fff; }

  /* ── Pill title (the look the old tab bar had) ───────────── */
  .seg-wrap { display:flex; justify-content:center; padding:16px 16px 0; }
  .seg-title { position:relative; display:inline-grid; background:#EAEAF0; border-radius:999px; padding:4px; }
  .seg-title .seg-thumb { position:absolute; top:4px; bottom:4px; left:4px; right:4px; background:#fff; border-radius:999px; box-shadow:0 1px 5px rgba(10,10,20,.16); }
  .seg-title .seg-lbl { position:relative; z-index:1; padding:8px 26px; font-size:13px; font-weight:700; color:var(--purple); font-family:inherit; }
  .chrome-bar { padding-top:12px; }

  /* ── Toolbar ─────────────────────────────────────────────── */
  .chrome-bar { max-width:960px; margin:0 auto; padding:22px 16px 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  /* Store selector — placeholder until multi-store sessions land */
  .store-btn { display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--purple); background:var(--purple); border-radius:999px; padding:8px 15px; cursor:pointer; font-family:'Jost',sans-serif; font-weight:700; font-size:14px; color:#fff; letter-spacing:-.01em; box-shadow:0 2px 10px rgba(97,56,245,.24); transition:background .15s, border-color .15s; }
  .store-btn:hover { background:var(--purple-d); border-color:var(--purple-d); }
  .store-btn:active { transform:scale(.96); }
  .store-btn svg { color:#fff; flex-shrink:0; }
  .save-state { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--muted); }
  .save-state::before { content:''; width:7px; height:7px; border-radius:50%; background:#00a870; }
  .save-state.dirty { color:var(--purple); }
  .save-state.dirty::before { background:#f5a300; }
  .spacer { flex:1; }
  button, input[type=date] { font-family:inherit; }
  .btn { border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:9px 17px; font-size:13px; font-weight:700; cursor:pointer; transition:border-color .15s, background .15s, color .15s, opacity .15s; }
  .btn.busy { opacity:.55; }
  /* every control compresses under the finger — nothing feels dead on touch */
  .btn:active,
  .today-chip:active, .bn-close:active, .bn-color-btn:active, .bn-sw:active,
  .cap-btn:active, .db-del:active, .add-row:active, .rm:active { transform:scale(.94); }
  .cellSel:active { filter:brightness(.96); }
  .mp-item:active, .gf-row:active { background:var(--wash-line); }
  button:focus-visible { outline:2px solid var(--purple-l); outline-offset:2px; }
  /* ── TEMPORARY skin: aurora border for Capture mode ──────────────
     The plain button (.btn.primary) stays fully intact; this whole look
     turns on/off with CAPTURE_AURORA in the script. Engine: two curtain
     conic-gradients counter-rotating at different speeds while the
     gradient center drifts — four cycles (16/26/9/7s) that never line
     up, so the pattern never repeats the same way twice. */
  @property --giro-linea { syntax:'<angle>'; initial-value:0deg; inherits:true; }
  @property --giro-halo { syntax:'<angle>'; initial-value:180deg; inherits:true; }
  @property --cx { syntax:'<percentage>'; initial-value:50%; inherits:true; }
  .aur {
    /* curtain stops built ONLY from the app's own palette:
       note-lilac ink, purple-d, purple, the two hero-gradient purples,
       purple-l and wash-line as the brightest pastel */
    --noche:#241432; --uva:#4A22C7; --purpura:#6138F5; --electrico:#6d3ff7;
    --orquidea:#9350ff; --lavanda:#8B6DFF; --lila:#DED4FB;
    --grosor:2px; --difuminado:4px;
    --cortinas: var(--noche) 0%, var(--uva) 8%, var(--purpura) 16%, var(--lavanda) 24%,
      var(--lila) 30%, var(--orquidea) 37%, var(--uva) 48%, var(--purpura) 58%,
      var(--electrico) 66%, var(--lila) 72%, var(--lavanda) 79%, var(--noche) 90%, var(--noche) 100%;
    position:relative; padding:0; border:none; background:none; border-radius:999px; cursor:pointer; font-family:inherit;
    animation:girar-linea 16s linear infinite, girar-halo 26s linear infinite, derivar 9s ease-in-out infinite alternate;
    transition:transform .25s ease;
  }
  .aur::before { /* ambient halo — breathes slowly; own compositor layer */
    content:''; position:absolute; inset:calc(var(--grosor) * -1); border-radius:999px;
    background:conic-gradient(from var(--giro-halo) at calc(100% - var(--cx)) 50%, var(--cortinas));
    filter:blur(20px) saturate(1.4); opacity:.35;
    animation:respirar 7s ease-in-out infinite alternate;
    transition:filter .3s ease;
    will-change:filter, opacity;
  }
  .aur::after { /* the light line itself, outer edge melted */
    content:''; position:absolute; inset:calc(var(--grosor) * -1); border-radius:999px;
    background:conic-gradient(from var(--giro-linea) at var(--cx) 50%, var(--cortinas));
    filter:blur(var(--difuminado)) saturate(1.3);
    opacity:.75;
    transition:filter .3s ease, opacity .3s ease;
    will-change:filter;
  }
  .aur .cara { /* opaque face covers the blur's inner bleed — center stays white */
    position:relative; z-index:1; display:inline-flex; align-items:center; height:38px; padding:0 18px;
    border-radius:999px; background:#fff; color:var(--purple); font-size:13px; font-weight:700; letter-spacing:.2px;
    transition:color .25s ease;
  }
  @keyframes girar-linea { to { --giro-linea:360deg; } }
  @keyframes girar-halo { to { --giro-halo:-180deg; } }
  @keyframes derivar { from { --cx:42%; } to { --cx:58%; } }
  @keyframes respirar { from { opacity:.25; } to { opacity:.45; } }
  .aur:hover, .aur:focus-visible { transform:translateY(-1px); }
  .aur:hover .cara, .aur:focus-visible .cara { color:var(--purple-d); }
  .aur:hover::after, .aur:active::after { filter:blur(var(--difuminado)) saturate(1.6) brightness(1.2); opacity:1; }
  .aur:hover::before, .aur:active::before { filter:blur(20px) saturate(1.7) brightness(1.3); }
  .aur:active { transform:translateY(0) scale(.97); }
  .aur:disabled { opacity:.6; cursor:default; }
  .aur:focus-visible { outline:2px solid var(--purple-l); outline-offset:4px; }
  @media (prefers-reduced-motion: reduce) { .aur, .aur::before { animation:none !important; } }
  .btn:hover { border-color:#d3d3de; }
  .btn.primary { border:1.5px solid var(--purple); background:var(--purple); color:#fff; box-shadow:0 2px 10px rgba(97,56,245,.24); }
  .btn.primary:hover { background:var(--purple-d); border-color:var(--purple-d); }
  .btn.on { background:var(--wash); border-color:var(--wash-line); color:var(--purple); }
  input[type=date] { border:1.5px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; background:#fff; color:var(--ink); }
  /* Day paging: the calendar picks, the arrows flip (also ← / → keys) */
  .btn.day-nav { padding:8px 13px; font-size:16px; line-height:1.1; font-weight:800; color:var(--purple); }

  /* First load: a quiet shimmer where the table will land, instead of a
     blank sheet — cleared the moment the first render arrives */
  body.booting #tbl, body.booting .cards-view { display:none; }
  body.booting .scroll::before { content:""; display:block; height:300px; margin:20px 28px 24px;
    border-radius:14px;
    background:
      linear-gradient(100deg, transparent 20%, rgba(255,255,255,.85) 50%, transparent 80%) 0 0/55% 100% no-repeat,
      repeating-linear-gradient(#F4F3F9 0 42px, #fff 42px 54px);
    animation:skeleton 1.1s ease-in-out infinite; }
  @keyframes skeleton { from { background-position:-60% 0, 0 0; } to { background-position:160% 0, 0 0; } }
  @media (prefers-reduced-motion: reduce) { body.booting .scroll::before { animation:none; } }

  /* Editable rows whisper it on hover (read-only past days stay quiet) */
  body:not(.pastday) tr.data:hover td { background-image:linear-gradient(rgba(97,56,245,.035),rgba(97,56,245,.035)); }


  /* ── Roster drawer ───────────────────────────────────────── */
  .drawer { max-width:960px; margin:14px auto 0; padding:0 16px; }
  .drawer-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); box-shadow:0 6px 22px rgba(10,10,20,.05); }
  .rl-title { font-family:'Jost',sans-serif; font-weight:700; font-size:13px; letter-spacing:-.01em; color:var(--ink); margin-bottom:11px; }
  .chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; max-height:150px; overflow-y:auto; }
  .chip { background:var(--wash); border:1px solid var(--wash-line); color:var(--purple); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; white-space:nowrap; }
  .chip.small { font-size:11px; background:#F4F4F8; border-color:var(--line); color:var(--text); }
  .chipX { cursor:pointer; margin-left:6px; opacity:.5; }
  .chipX:hover { opacity:1; }
  .rl-add { display:flex; gap:6px; }
  .rl-add input { flex:1; border:1.5px solid var(--line); border-radius:999px; padding:8px 14px; font-size:12.5px; }
  .rl-add input:focus { outline:none; border-color:var(--purple); }
  .rl-add button { border:none; background:var(--purple); color:#fff; border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:700; cursor:pointer; }

  /* ── Sheet (light card) ──────────────────────────────────── */
  .sheet-wrap { max-width:960px; margin:18px auto 40px; padding:0 16px 40px; }
  body.capture .sheet-wrap { margin:0 auto; padding:12px; }
  .sheet { background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 1px 2px rgba(10,10,20,.04), 0 22px 50px -18px rgba(10,10,20,.18); overflow:hidden; }
  .incentive-bar { background:linear-gradient(135deg,#6d3ff7,#9350ff); padding:14px 28px 16px; display:flex; flex-direction:column; gap:3px; }
  .inc-eyebrow { font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.72); }
  .inc-input { border:none; background:transparent; color:#fff; font-family:inherit; font-size:18px; font-weight:700; letter-spacing:-.01em; padding:2px 0; width:100%; }
  .inc-input::placeholder { color:rgba(255,255,255,.6); font-weight:600; }
  .inc-input:focus { outline:none; }
  body.capture .sheet { box-shadow:none; }

  /* ── Masthead (light) ────────────────────────────────────── */
  .masthead { padding:24px 28px 0; }
  .mh-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .wordmark { font-family:'Jost',sans-serif; font-weight:700; font-size:27px; line-height:1; letter-spacing:-.03em; color:var(--ink); }
  .wordmark-img { height:30px; width:auto; display:block; }
  .date-pill { background:var(--wash); color:var(--purple); border:1px solid var(--wash-line); border-radius:999px; padding:7px 15px; font-size:12px; font-weight:700; white-space:nowrap; }
  .mh-head { margin-top:18px; }
  .sched-title { font-family:'Jost',sans-serif; font-weight:700; font-size:27px; line-height:1.05; letter-spacing:-.025em; color:var(--ink); }
  .store-label { margin-top:6px; font-size:13px; font-weight:600; color:var(--muted); }
  .mh-rule { height:1px; background:var(--line); margin-top:20px; }
  .rule, .rule-b { display:none; }

  /* ── Table ───────────────────────────────────────────────── */
  .scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { border-collapse:collapse; width:100%; min-width:900px; table-layout:fixed; font-feature-settings:'tnum' 1; }
  .c-rep{width:170px} .c-time{width:100px} .c-task{width:auto} .c-stn{width:78px} .c-ghl{width:100px} .c-lunch{width:96px} .rm-col{width:34px}
  th { background:#fff; color:var(--faint); padding:16px 8px 9px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-align:center; white-space:nowrap; }
  th.l { text-align:left; padding-left:28px; }
  .sec-row td { background:#fff; color:var(--ink); padding:18px 28px 9px; font-family:'Jost',sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap; }
  .sec-row .sub { color:var(--muted); font-weight:600; font-size:12.5px; letter-spacing:0; margin-left:3px; }
  tr.data { height:48px; border-top:1px solid var(--line-2); }
  tr.data.dark { background:#F8F5FE; }
  tr.data.washed { background:#FAFAFB; }
  tr.data.zebra { background:#fff; }
  td { padding:0 4px; }
  td.name-cell { padding:0 6px 0 28px; }
  /* Sticky Rep column on mobile scroll */
  thead th:first-child, td.name-cell { position:sticky; left:0; z-index:2; }
  thead th:first-child { z-index:3; background:#fff; }
  td.name-cell { background:#fff; box-shadow:1px 0 0 var(--line-2); }
  tr.zebra  td.name-cell { background:#fff; }
  tr.washed td.name-cell { background:#FAFAFB; }
  tr.dark   td.name-cell { background:#F8F5FE; }
  .cellSel { appearance:none; -webkit-appearance:none; border:1px solid transparent; background:transparent; border-radius:8px; height:34px; padding:0 8px; width:100%; font-weight:600; font-size:13.5px; color:var(--text); cursor:pointer; font-family:inherit; transition:background .12s, border-color .12s; }
  input.cellSel { cursor:text; }
  .cellSel:hover { border-color:var(--line); background:rgba(255,255,255,.72); }
  .cellSel:focus { outline:2px solid var(--purple); outline-offset:-1px; background:#fff; color:var(--ink); }
  .cellSel.center { text-align:center; text-align-last:center; }
  .cellSel.name { font-size:14.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
  /* Station number → light purple pill (Xfinity filter-pill motif) */
  .cellSel.station { display:block; width:52px; max-width:52px; height:28px; margin:0 auto; text-align:center; text-align-last:center; font-weight:700; font-size:14px; color:var(--purple); background:transparent; border-radius:999px; }
  .cellSel.station.filled { background:var(--wash); border:1px solid var(--wash-line); }
  .rm { opacity:0; transition:opacity .12s; cursor:pointer; font-weight:700; font-size:15px; color:var(--faint); display:block; text-align:center; }
  tr:hover .rm { opacity:.55; }
  .rm:hover { opacity:1 !important; color:var(--purple); }
  .add-row td { padding:8px 28px; background:#fff; border-top:1px solid var(--line-2); }
  .add-row.dark td, .add-row.washed td { background:#fff; }
  .add-btn { border:none; background:transparent; color:var(--muted); font-size:12.5px; font-weight:700; cursor:pointer; padding:3px 0; }
  .add-btn:hover { color:var(--purple); }
  .hint { font-size:12px; color:var(--muted); margin-top:14px; line-height:1.5; text-align:center; }
  .exit-cap { position:fixed; bottom:16px; right:16px; z-index:50; border:none; background:var(--purple); color:#fff; border-radius:999px; padding:11px 20px; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 6px 20px rgba(97,56,245,.4); }
  body.capture .chrome { display:none; }
  /* Builder note banner (edit-only messages for the schedule maker) */
  .builder-note { background:var(--bn-bg,#FFF8E6); border:1px solid var(--bn-border,#F3E2AC); border-radius:16px; padding:13px 18px; margin-bottom:16px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 1px 2px rgba(20,20,40,.05); }
  .bn-icon { font-size:19px; line-height:1.5; }
  .bn-body { flex:1; min-width:0; }
  .bn-top { display:flex; align-items:center; gap:10px; margin-bottom:3px; }
  .bn-label { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--bn-label,#B7860B); }
  .bn-color { position:relative; margin-left:auto; }
  .bn-color-btn { width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.85); box-shadow:0 0 0 1px rgba(0,0,0,.12); cursor:pointer; padding:0; background:var(--bn-sw,#F2C14E); }
  .bn-pop { position:absolute; top:31px; right:0; z-index:20; display:none; gap:8px; padding:9px 10px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 26px rgba(10,10,20,.16); }
  .bn-pop.open { display:flex; }
  .bn-sw { width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid #fff; padding:0; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
  .bn-sw.on { box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.4); }
  .bn-close { border:none; background:transparent; cursor:pointer; padding:2px 5px; margin:-2px -6px 0 0; line-height:1; border-radius:8px; font-size:14px; font-weight:700; color:var(--bn-ph,#CBAE5E); transition:color .15s; }
  .bn-close:hover { color:var(--bn-text,#5B4A15); }
  /* dismiss = animated collapse; nothing is stored, so the note is back
     the next time the page opens — that's the intended flow */
  .builder-note.bn-closing { overflow:hidden; opacity:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-top-width:0; border-bottom-width:0;
    transition:height .22s cubic-bezier(.4,0,.2,1), margin-bottom .22s cubic-bezier(.4,0,.2,1), padding .22s cubic-bezier(.4,0,.2,1), border-width .22s cubic-bezier(.4,0,.2,1), opacity .16s ease; }
  .bn-input { display:block; width:100%; border:none; background:transparent; resize:none; overflow:hidden; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--bn-text,#5B4A15); line-height:1.45; }
  .bn-input:focus { outline:none; }
  .bn-input::placeholder { color:var(--bn-ph,#CBAE5E); font-weight:500; }
  body.capture .cellSel { pointer-events:none; border-color:transparent !important; background:transparent !important; }
  body.capture .cellSel.station.filled { background:var(--wash) !important; border:1px solid var(--wash-line) !important; }
  body.capture select.cellSel { text-indent:1px; }
  body.capture .rm, body.capture .add-row, body.capture th.rm-col, body.capture td.rm-col { display:none; }
  body.capture col.rm-col { width:0 !important; }
  @media print { .chrome { display:none !important; } body { background:#fff; } .sheet { box-shadow:none; border:none; } }

  /* ── Mobile ──────────────────────────────────────────────── */
  @media (max-width:640px){
    .chrome-bar { padding:16px 12px 0; gap:8px; }
    .store-btn { font-size:13px; padding:7px 12px; gap:6px; }
    .btn { padding:9px 15px; font-size:12.5px; }
    input[type=date] { padding:8px 13px; font-size:12.5px; }
    .drawer { padding:0 12px; }
    .drawer-card { padding:18px; gap:18px; grid-template-columns:1fr; }
    .sheet-wrap { padding:0 10px 32px; margin-top:14px; }
    .masthead { padding:20px 20px 0; }
    .wordmark { font-size:24px; }
    .wordmark-img { height:26px; }
    .sched-title { font-size:24px; }
    table { min-width:720px; }
    .c-rep{width:130px} .c-time{width:78px} .c-stn{width:60px} .c-ghl{width:80px} .c-lunch{width:74px}
    th.l { padding-left:20px; }
    .sec-row td { padding:16px 20px 8px; }
    td.name-cell { padding-left:20px; }

    /* Phone capture → compact native board that fits the screen (no scaling) */
    body.capture .scroll { overflow:hidden; }
    body.capture table { min-width:0; width:100%; }
    body.capture .c-rep{width:70px} body.capture .c-time{width:50px} body.capture .c-stn{width:30px} body.capture .c-ghl{width:48px} body.capture .c-lunch{width:52px !important}
    body.capture th { font-size:5.5px; letter-spacing:0; padding:7px 0 4px; }
    body.capture .hp { font-size:5.5px; padding:2px 3px; }
    body.capture .sec-row td { font-size:9.5px; padding:9px 8px 4px; }
    body.capture .sec-row .sub { font-size:8px; }
    body.capture .cellSel { font-size:7.5px; height:auto; padding:1px; }
    body.capture .cellSel.center { padding:0; }
    body.capture .cellSel.name { font-size:8px; }
    body.capture .cellSel.station { font-size:8.5px; width:20px; height:14px; }
    body.capture .taskbox { font-size:7.5px; min-height:0; padding:2px 3px; gap:1px 3px; line-height:1.25; }
    body.capture td.name-cell { padding-left:8px; }
    body.capture .masthead { padding:14px 14px 0; }
    body.capture .wordmark-img { height:18px; }
    body.capture .sched-title { font-size:17px; }
    body.capture .store-label { font-size:10px; }
    body.capture .date-pill { font-size:10px; padding:6px 11px; }
  }

  /* ── Capture cards (mobile, light) ───────────────────────── */
  .cards-view { display:none; padding:6px 16px 20px; }
  .cg { margin-bottom:22px; }
  .cg:last-child { margin-bottom:0; }
  .cg-hdr { font-family:'Jost',sans-serif; font-weight:700; font-size:16px; color:var(--ink); letter-spacing:-.01em; padding:0 2px 11px; display:flex; align-items:baseline; gap:8px; border-bottom:2px solid var(--purple); margin-bottom:13px; }
  .cg-hdr span { font-weight:600; font-size:12.5px; color:var(--muted); }
  .pc { background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:10px; box-shadow:0 1px 2px rgba(10,10,20,.04); }
  .pc:last-child { margin-bottom:0; }
  .pc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .pc-name { font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
  .pc-stn { flex-shrink:0; min-width:34px; height:27px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center; background:var(--wash); border:1px solid var(--wash-line); color:var(--purple); font-weight:700; font-size:14px; border-radius:999px; }
  .pc-shift { margin-top:7px; font-size:14px; font-weight:700; color:var(--ink); }
  .pc-task { margin-top:3px; font-size:14px; font-weight:500; color:var(--text); }
  .pc-meta { margin-top:10px; padding-top:9px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:5px 18px; font-size:12.5px; color:var(--muted); }
  .pc-meta b { color:var(--ink); font-weight:700; margin-right:4px; }
  .cg-boh .pc { background:#FAFAFB; }
  .cg-mod .pc { background:#F8F5FE; border-color:var(--wash-line); }

  .hp { display:inline-block; padding:4px 12px; border-radius:999px; background:var(--wash); color:var(--purple); }
  th { padding:14px 8px 10px !important; }

  /* V3: purple gradient top */
  .masthead { background:linear-gradient(135deg,#6d3ff7,#9350ff); }
  .sched-title { color:#fff; }
  .store-label { color:rgba(255,255,255,.78); }
  .mh-rule { background:rgba(255,255,255,.2); }
  .date-pill { background:rgba(255,255,255,.92); color:var(--purple); border-color:transparent; }


  /* En capas: contacto + ambiente (estilo Xfinity) */
  .sheet { box-shadow:0 1px 3px rgba(24,20,50,.07), 0 22px 46px -16px rgba(24,20,50,.24); }
  body.capture .sheet { box-shadow:0 1px 3px rgba(24,20,50,.07), 0 22px 46px -16px rgba(24,20,50,.24); }
  body.capture .sheet-wrap { padding:30px 26px 40px; }


  /* base2: bigger type + section tints + task wrap */
  .hp { font-size:12px; padding:5px 14px; letter-spacing:.05em; }
  .date-pill { font-size:14px; padding:9px 18px; }
  th { padding:15px 8px 11px !important; }
  .sec-row td { font-size:16.5px; padding:19px 28px 10px; }
  .sec-row .sub { font-size:13.5px; }
  .cellSel { font-size:14px; height:36px; }
  .cellSel.name { font-size:15.5px; }
  .cellSel.station { font-size:15px; width:46px; height:30px; }
  tr.data { height:50px; }
  td.name-cell { padding-left:28px; }
  td { vertical-align:middle; }
  /* section tints (variables set per option) */
  /* Rows carry the full wash; every second row steps toward white inside the
     same hue, so long rows stay traceable without breaking the color block */
  .sec-floor.data { --row:var(--t-floor); }
  .sec-boh.data   { --row:var(--t-boh); }
  .sec-mod.data   { --row:var(--t-mod); }
  tr.data { --rowz:var(--row,#fff); background:var(--rowz); }
  tbody tr.data:nth-child(odd) { --rowz:color-mix(in srgb, var(--row,#fff) 55%, #fff); }
  tr.data td.name-cell { background:var(--rowz); }
  .add-row.sec-floor td { background:var(--t-floor); }
  .add-row.sec-boh td   { background:var(--t-boh); }
  .add-row.sec-mod td   { background:var(--t-mod); }
  /* Task cell — click to open the multi-task picker */
  .task-cell { padding:0; }
  .taskbox { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-height:36px; padding:6px 8px; cursor:pointer; border-radius:8px; border:1px solid transparent; font-size:13.5px; font-weight:600; color:var(--text); line-height:1.35; }
  .taskbox:hover { border-color:var(--line); background:rgba(255,255,255,.72); }
  .tadd { color:var(--muted); font-weight:600; }
  /* señal tasks (Open · Kiosk) get a mini-chip, same language as the header chips */
  .tpill { display:inline-block; padding:3px 9px; border-radius:999px; font-weight:800; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
  .tpill { background:#fff; box-shadow:inset 0 0 0 1.5px currentColor; }
  .p-open { color:#1E874A; }
  .p-kiosk { color:var(--purple); }
  .tjoin { margin:0 6px 0 0; color:var(--faint); font-weight:800; }
  /* the · separator has no space before its task, so it always travels with it;
     long task names wrap word-by-word instead of overflowing into Station */
  .tunit { overflow-wrap:break-word; min-width:0; }
  body.capture .taskbox { cursor:default; border-color:transparent !important; background:transparent !important; }
  body.capture .tadd { display:none; }
  body.capture .tpill { font-size:6px; padding:1.5px 5px; }
  body.capture .tjoin { margin-right:3px; }
  body.capture tr.data { height:auto; }
  /* Task picker modal */
  .tp-overlay { position:fixed; inset:0; z-index:120; background:rgba(12,12,22,.42); display:none; align-items:center; justify-content:center; padding:18px; }
  .tp-overlay.on { display:flex; }
  .tp-card { background:#fff; width:100%; max-width:400px; max-height:82vh; border-radius:22px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.32); }
  .tp-head { font-family:'Jost',sans-serif; font-weight:700; font-size:17px; color:var(--ink); padding:18px 20px 14px; display:flex; align-items:baseline; gap:8px; border-bottom:1px solid var(--line); }
  .tp-head span { font-size:13px; color:var(--muted); font-weight:600; }
  .tp-list { overflow-y:auto; padding:8px; }
  .tp-item { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--ink); }
  .tp-item:hover { background:#F6F4FD; }
  .tp-item.on { background:var(--wash); color:var(--purple); }
  .tp-item input { width:19px; height:19px; accent-color:var(--purple); flex-shrink:0; }
  .tp-add { display:flex; gap:6px; padding:12px; border-top:1px solid var(--line); }
  .tp-add input { flex:1; border:1.5px solid var(--line); border-radius:999px; padding:10px 15px; font-size:13.5px; font-family:inherit; }
  .tp-add input:focus { outline:none; border-color:var(--purple); }
  .tp-add button { border:none; background:var(--ink); color:#fff; border-radius:999px; padding:10px 17px; font-weight:700; font-size:13px; cursor:pointer; }
  .tp-done { margin:0 12px 14px; border:none; background:var(--purple); color:#fff; border-radius:999px; padding:13px; font-weight:700; font-size:14.5px; cursor:pointer; }

  :root { --t-floor:#FFFFFF; --t-boh:#FFFFFF; --t-mod:#FFFFFF; --b-floor:#EFECF9; --b-boh:#EFECF9; --b-mod:#EFECF9; }
  /* Role colors live on the section bands (treatment D): the title row wears
     its group's wash + deep ink; data rows stay clean white */
  .sec-row.sec-floor td { background:var(--sec-floor-bg,#fff); color:var(--sec-floor-ink,var(--ink)); }
  .sec-row.sec-boh td   { background:var(--sec-boh-bg,#fff);   color:var(--sec-boh-ink,var(--ink)); }
  .sec-row.sec-mod td   { background:var(--sec-mod-bg,#fff);   color:var(--sec-mod-ink,var(--ink)); }
  .sec-row td .sub { color:inherit; opacity:.72; }
  .sec-row td { box-shadow:inset 0 -1px 0 rgba(20,20,40,.05); }
  body:not(.capture) .sec-row td { cursor:pointer; }
  body:not(.capture) .sec-row:hover td { filter:brightness(.975); }
  #secPop { min-width:0; max-width:none; padding:9px 11px; }
  #secPop.on { display:flex; gap:8px; align-items:center; }
  #secPop .bn-sw.sec-none { background:#fff; border:2px dashed #C9C9D2; box-shadow:none; }
  /* Phone cards follow the band colors; card faces stay white */
  .cg-floor .cg-hdr { border-color:var(--sec-floor-ink,var(--purple)); }
  .cg-boh .cg-hdr   { border-color:var(--sec-boh-ink,var(--purple)); }
  .cg-mod .cg-hdr   { border-color:var(--sec-mod-ink,var(--purple)); }
  .cg-floor .pc { background:var(--t-floor,#fff); border-color:var(--b-floor,var(--line)); }
  .cg-boh .pc { background:var(--t-boh,#fff); border-color:var(--b-boh,var(--line)); }
  .cg-mod .pc { background:var(--t-mod,#fff); border-color:var(--b-mod,var(--line)); }

  /* soft per-section separator lines (bg color, a touch darker) */
  .sec-floor.data { border-top:1px solid var(--b-floor); }
  .sec-boh.data   { border-top:1px solid var(--b-boh); }
  .sec-mod.data   { border-top:1px solid var(--b-mod); }

  /* refined header pills + lunch fix */
  .hp { padding:5px 13px; font-size:11.5px; font-weight:700; letter-spacing:.06em; background:var(--wash); color:var(--purple); }
  th { padding:15px 8px 12px !important; }
  .c-lunch { width:114px !important; }

  /* composition polish v2: no overflow, times fit, aligned left edges */
  .chrome-bar, .drawer, .sheet-wrap { max-width:930px; }
  table { min-width:880px; }
  .c-rep{width:152px} .c-time{width:106px} .c-stn{width:74px} .c-ghl{width:96px} .c-lunch{width:110px !important} .rm-col{width:28px}
  .cellSel { padding:0 6px; }
  .cellSel.center { padding:0 3px; }
  td.name-cell { padding-left:20px; }
  th.l { padding-left:28px !important; }
  .sec-row td { padding-left:28px; }

  /* breathing room around the board in capture */
  body.capture .sheet-wrap { padding:18px 16px 22px; }
  @media (max-width:640px){ body.capture .sheet-wrap { padding:16px 14px 20px; } }

  /* Capture = a generated PNG of the board, shown full-screen (reliable everywhere) */
  .cap-overlay { position:fixed; inset:0; z-index:200; background:#0c0d12; display:none; flex-direction:column; }
  .cap-overlay.on { display:flex; }
  .cap-bar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; background:#16171d; }
  .cap-lbl { color:rgba(255,255,255,.6); font-size:12.5px; font-weight:700; }
  .cap-spacer { flex:1; }
  .cap-btn { border:none; background:rgba(255,255,255,.15); color:#fff; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
  .cap-step { min-width:46px; text-align:center; padding:9px 12px; }
  #capSave { background:var(--purple); }
  .cap-view { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; padding:14px; }
  .cap-view img { width:100%; max-width:1000px; height:auto; border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.55); display:block; }

  /* ── Builder checks: low-coverage alert + data validations (edit view only) ── */
  .warnchip { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; color:#B7860B; background:#FFF4E0; border:1px solid #F0D9A8; border-radius:999px; padding:4px 10px; }
  .covC-wrap { padding:12px 28px 0; display:flex; flex-wrap:wrap; gap:8px; }
  .covC { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#8A5A0B; background:#FFF4E8; border:1px solid #F3DBB6; border-radius:999px; padding:6px 13px; }
  .cellSel.err { border:1.5px solid #E84A4A !important; background:#FDECEC !important; color:#C42525 !important; }
  .cellSel.station.dup { border:1.5px solid #E8A13A !important; background:#FFF4E0 !important; color:#B7860B !important; }
  .cellSel.misslunch { border:1.5px dashed #E8A13A !important; background:#FFFBF2 !important; }

  /* ── Every date is its own sheet: the calendar is the navigation ── */
  .today-chip { display:none; align-items:center; border:1.5px solid var(--wash-line); background:var(--wash); color:var(--purple); border-radius:999px; padding:9px 15px; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; animation:popIn .18s cubic-bezier(0,0,.2,1); }
  .today-chip:hover { border-color:var(--purple); }
  body.offtoday .today-chip { display:inline-flex; }
  .empty-day { display:none; max-width:520px; margin:10px auto 0; background:#fff; border:1px solid var(--line); border-radius:22px; padding:38px 30px; text-align:center; box-shadow:0 1px 3px rgba(24,20,50,.07), 0 22px 46px -16px rgba(24,20,50,.18); animation:cardIn .22s cubic-bezier(.2,.9,.3,1); }
  body.emptyday .sheet, body.emptyday .builder-note, body.emptyday .hint { display:none; }
  body.emptyday .empty-day { display:block; }
  .ed-ico { font-size:34px; }
  .ed-title { font-family:'Jost',sans-serif; font-weight:700; font-size:18px; color:var(--ink); margin-top:10px; }
  .ed-sub { font-size:12.5px; font-weight:600; color:var(--muted); margin-top:5px; line-height:1.5; }
  .ed-btns { display:flex; gap:9px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
  .ed-btns:empty { display:none; }

  /* ── Site-native cell menus ── */
  button.cellSel { display:flex; align-items:center; justify-content:flex-start; }
  button.cellSel.center { justify-content:center; }
  button.cellSel.station { display:flex; align-items:center; justify-content:center; }
  .menu-pop { position:fixed; z-index:320; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 48px rgba(10,10,20,.24); min-width:132px; max-width:230px; max-height:48vh; overflow-y:auto; padding:4px; display:none; }
  .menu-pop.on { display:block; }
  .mp-item { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; border:none; background:transparent; border-radius:7px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; font-family:inherit; white-space:nowrap; }
  .mp-item:hover:not(:disabled), .mp-item:focus-visible { background:var(--wash); }
  .mp-item.on { color:var(--purple); font-weight:800; background:var(--wash); }
  .mp-item.on::after { content:'✓'; }
  .mp-item:disabled { color:#C9C9D2; cursor:default; background:none; }
  .mp-item.clear { color:var(--muted); border-top:1px solid var(--line-2); border-radius:0 0 7px 7px; margin-top:3px; }

  /* ── Day banners: past (read-only), editing a past day, planning ahead ── */
  .day-banner { max-width:960px; margin:0 auto 16px; padding:11px 14px 11px 16px; border-radius:16px; display:flex; gap:11px; align-items:center; flex-wrap:wrap; font-size:12.5px; font-weight:700; box-shadow:0 1px 2px rgba(20,20,40,.05); animation:riseIn .22s cubic-bezier(0,0,.2,1); }
  .db-ico { font-size:17px; }
  .db-txt { flex:1; min-width:170px; display:flex; flex-direction:column; gap:1px; }
  .db-txt b { font-size:13.5px; font-weight:800; }
  .db-txt span { font-size:11.5px; font-weight:600; opacity:.78; }
  .db-btns { display:flex; gap:8px; align-items:center; }
  .day-banner .btn { padding:7px 13px; font-size:12px; }
  .db-del { border:none; background:transparent; cursor:pointer; font-size:15px; opacity:.5; padding:4px 6px; transition:opacity .15s; }
  .db-del:hover { opacity:1; }
  .db-past { background:#F4F2EE; border:1px solid #E3DFD6; color:#6B6357; }
  .db-plan { background:var(--wash); border:1px solid var(--wash-line); color:var(--purple-d); }
  .db-edit { background:#FFF8E6; border:1px solid #F3E2AC; color:#8A5A0B; }
  body.pastday .sheet { filter:saturate(.65) contrast(.99); }
  body.pastday .cellSel, body.pastday .taskbox, body.pastday .inc-input, body.pastday .bn-input { pointer-events:none; }
  body.pastday .add-row { visibility:hidden; }
  body.pastday .rm { display:none; }
  body.pastday #rosterBtn { pointer-events:none; opacity:.45; }

  /* ── Toast + site-style confirm ── */
  .toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:#16171d; color:#fff; border-radius:999px; padding:12px 20px; font-size:13px; font-weight:700; box-shadow:0 12px 34px rgba(0,0,0,.4); z-index:500; display:none; white-space:nowrap; max-width:calc(100vw - 32px); }
  .toast.on { display:flex; align-items:center; }
  .toast em { font-style:normal; color:#7DE2A8; margin-right:7px; }
  .toast button { border:none; background:rgba(255,255,255,.18); color:#fff; border-radius:999px; padding:5px 13px; margin-left:11px; font-weight:800; font-size:12px; cursor:pointer; font-family:inherit; }
  .toast button:hover { background:rgba(255,255,255,.3); }
  .cf-overlay { position:fixed; inset:0; background:rgba(12,12,22,.42); z-index:400; display:none; align-items:center; justify-content:center; padding:18px; }
  .cf-overlay.on { display:flex; }
  .cf-card { background:#fff; border-radius:20px; max-width:380px; width:100%; padding:22px 22px 18px; box-shadow:0 24px 60px rgba(0,0,0,.32); }
  .cf-title { font-family:'Jost',sans-serif; font-weight:700; font-size:17.5px; color:var(--ink); margin-bottom:8px; }
  .cf-body { font-size:13px; font-weight:500; color:var(--text); line-height:1.55; margin-bottom:16px; }
  .cf-row { display:flex; justify-content:flex-end; gap:8px; }
  #cfOk.danger { background:#C42525; border-color:#C42525; box-shadow:0 2px 10px rgba(196,37,37,.24); }
  #cfOk.danger:hover { background:#A81E1E; border-color:#A81E1E; }

  /* ── Multi-store: request form + pending gate ── */
  .st-in { display:block; width:100%; border:1.5px solid var(--line); border-radius:11px; padding:10px 13px; font-size:13.5px; font-family:inherit; margin-bottom:9px; }
  .st-in:focus { outline:none; border-color:var(--purple); }
  .st-err { color:#C42525; font-size:12px; font-weight:600; margin:2px 0 10px; }
  /* while this store waits for approval, only the tabs and the store button stay */
  body.storepending .chrome-bar :is(.btn, input[type=date], .today-chip, .save-state) { display:none !important; }
  body.storepending :is(.sheet-wrap, .drawer, .hint) { display:none !important; }

  /* ── Motion: everything eases in AND out — nothing pops or vanishes ── */
  @keyframes popIn { from { opacity:0; transform:translateY(-8px) scale(.95); } to { opacity:1; transform:none; } }
  @keyframes popInUp { from { opacity:0; transform:translateY(8px) scale(.95); } to { opacity:1; transform:none; } }
  @keyframes popOut { to { opacity:0; transform:translateY(-6px) scale(.96); } }
  @keyframes popOutUp { to { opacity:0; transform:translateY(6px) scale(.96); } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  @keyframes fadeOut { to { opacity:0; } }
  @keyframes cardIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
  @keyframes cardOut { to { opacity:0; transform:translateY(10px) scale(.97); } }
  @keyframes riseIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
  @keyframes riseOut { to { opacity:0; transform:translateY(-8px); } }
  .menu-pop { transform-origin:top center; }
  .menu-pop.up { transform-origin:bottom center; }
  .menu-pop.on { animation:popIn .2s cubic-bezier(0,0,.2,1); }
  .menu-pop.up.on { animation:popInUp .2s cubic-bezier(0,0,.2,1); }
  .menu-pop.closing { animation:popOut .13s cubic-bezier(.4,0,1,1) forwards; }
  .menu-pop.up.closing { animation:popOutUp .13s cubic-bezier(.4,0,1,1) forwards; }
  .bn-pop { transform-origin:top right; }
  .bn-pop.open { animation:popIn .18s cubic-bezier(0,0,.2,1); }
  .bn-pop.closing { animation:popOut .13s cubic-bezier(.4,0,1,1) forwards; }
  .tp-overlay.on { animation:fadeIn .18s ease-out; }
  .tp-overlay.on .tp-card { animation:cardIn .22s cubic-bezier(0,0,.2,1); }
  .tp-overlay.closing { animation:fadeOut .15s ease forwards; }
  .tp-overlay.closing .tp-card { animation:cardOut .15s ease forwards; }
  .cf-overlay.on { animation:fadeIn .18s ease-out; }
  .cf-overlay.on .cf-card { animation:cardIn .22s cubic-bezier(0,0,.2,1); }
  .cf-overlay.closing { animation:fadeOut .15s ease forwards; }
  .cf-overlay.closing .cf-card { animation:cardOut .15s ease forwards; }
  .cap-overlay.on { animation:fadeIn .2s ease-out; }
  .cap-overlay.on .cap-view img { animation:cardIn .26s cubic-bezier(0,0,.2,1); }
  .cap-overlay.closing { animation:fadeOut .16s ease forwards; }
  .drawer-card { animation:riseIn .22s cubic-bezier(0,0,.2,1); }
  .drawer-card.closing { animation:riseOut .14s cubic-bezier(.4,0,1,1) forwards; }
  .warnchip, .covC-wrap { animation:fadeIn .28s ease-out; }
  .mp-item { transition:background .12s; }
  /* toast slides up and out (transition covers both directions) */
  .toast { display:flex; align-items:center; opacity:0; pointer-events:none; transform:translate(-50%,14px); transition:opacity .22s ease, transform .22s cubic-bezier(0,0,.2,1); white-space:normal; text-align:center; border-radius:16px; max-width:min(92vw, 480px); }
  .toast.on { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
  .toast .warn { font-style:normal; color:#FF8A8A; margin-right:7px; }
  /* soft swap of the whole board on big transitions (New day, view, copy) */
  .sheet { transition:opacity .11s ease; }
  .sheet.swap-out { opacity:0; }
  .sheet.swap-in { animation:cardIn .22s ease; }
  @media (prefers-reduced-motion: reduce) {
    .menu-pop.on, .bn-pop.open, .tp-overlay.on, .tp-overlay.on .tp-card,
    .cf-overlay.on, .cf-overlay.on .cf-card, .cap-overlay.on, .cap-overlay.on .cap-view img,
    .drawer-card, .day-banner, .empty-day, .today-chip, .warnchip, .covC-wrap, .toast, .sheet, .sheet.swap-in,
    .promo-body, .promo-body-in, .promo-head, .promo-card, .promo-view, .ph-chev, .pv-pen { animation:none !important; transition:none !important; }
  }

  /* ── Promos: one shared free-text card per store ──────────────
     Wide screens seat it beside the board (the dead space); narrow
     screens let it fall below the sheet. It's chrome — the capture
     never includes it. */
  .promo-rail { margin-top:14px; }
  /* The card grows with its text, capped by the screen and by the builder */
  .promo-card { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 1px 3px rgba(24,20,50,.07), 0 14px 32px -14px rgba(24,20,50,.16); display:flex; flex-direction:column; max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); transition:border-color .2s, box-shadow .2s; }
  .promo-card.editing { border-color:var(--purple); box-shadow:0 0 0 3px var(--wash-line), 0 14px 32px -14px rgba(24,20,50,.16); }
  /* Header = the show/hide button. The meta (Saving… / Saved ✓ / Updated …)
     lives here so freshness stays visible even while the card is folded. */
  .promo-head { width:100%; border:none; cursor:pointer; text-align:left; font-family:inherit; background:var(--wash); border-bottom:1px solid var(--wash-line); padding:9px 14px 9px 11px; display:flex; align-items:center; gap:9px; flex-shrink:0; transition:border-color .28s; }
  .promo-head:active { filter:brightness(.97); }
  .ph-ico { width:25px; height:25px; border-radius:50%; background:#fff; border:1px solid var(--wash-line); display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
  .ph-lbl { font-family:'Jost',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
  .ph-meta { margin-left:auto; font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ph-meta.busy { color:var(--purple); }
  .ph-chev { color:var(--purple); font-size:11px; line-height:1; flex-shrink:0; transition:transform .28s cubic-bezier(.4,0,.2,1); }
  .promo-card.collapsed .promo-head { border-bottom-color:transparent; }
  .promo-card.collapsed .ph-chev { transform:rotate(-90deg); }
  /* Body folds up into the header and unfolds back down, content cross-fading */
  .promo-body { display:grid; grid-template-rows:1fr; transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1); min-height:0; }
  .promo-card.collapsed .promo-body { grid-template-rows:0fr; }
  .promo-body-in { display:flex; flex-direction:column; min-height:0; overflow:hidden; opacity:1; transition:opacity .18s ease .05s; }
  .promo-card.collapsed .promo-body-in { opacity:0; transition:opacity .12s ease; }
  .promo-scroll { overflow-y:auto; min-height:0; }
  .promo-scroll::-webkit-scrollbar { width:9px; }
  .promo-scroll::-webkit-scrollbar-thumb { background:var(--wash-line); border-radius:99px; border:2.5px solid #fff; }
  .promo-scroll::-webkit-scrollbar-thumb:hover { background:#C9B8F5; }
  /* Reading view: the pasted block, lightly typeset for scanning. ALL-CAPS
     lines become section headings, -/• lines become bullets, URLs turn into
     links — the stored text stays exactly as pasted. */
  .promo-view { position:relative; padding:11px 16px 13px; cursor:text; transition:background .15s; }
  .promo-view:hover { background:#FBFAFE; }
  .pv-pen { position:absolute; top:9px; right:10px; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); color:var(--muted); font-size:12px; opacity:.55; transition:opacity .15s, color .15s, border-color .15s; }
  .promo-view:hover .pv-pen { opacity:1; color:var(--purple); border-color:var(--wash-line); }
  .pv-h { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); margin:13px 0 3px; }
  .pv-h:first-of-type { margin-top:2px; }
  .pv-p { font-size:13px; font-weight:500; color:var(--text); line-height:1.55; margin:1px 0; overflow-wrap:break-word; }
  .pv-p a { color:var(--purple); font-weight:600; }
  .pv-li { display:flex; gap:8px; font-size:13px; font-weight:500; color:var(--text); line-height:1.55; margin:2px 0; }
  .pv-li::before { content:'•'; color:var(--purple-l); font-weight:800; }
  .pv-lib { min-width:0; overflow-wrap:break-word; }
  .pv-date { color:var(--faint); font-weight:600; }
  .pv-gap { height:7px; }
  .pv-empty { font-size:13px; font-weight:500; color:var(--faint); line-height:1.6; padding:4px 22px 2px 0; }
  /* Edit mode: same typography as the view, plus an autosave hint + Done */
  .promo-txt { display:block; width:100%; border:none; background:transparent; resize:none; overflow:hidden; font-family:inherit; font-size:13px; font-weight:500; color:var(--text); line-height:1.6; padding:12px 16px 10px; min-height:96px; }
  .promo-txt:focus { outline:none; }
  .promo-txt::placeholder { color:var(--faint); }
  /* Maintenance: the body sits blurred and inert behind a badge */
  .promo-maint { display:none; }
  body.promos-maint .promo-body-in { position:relative; }
  body.promos-maint .promo-scroll { filter:blur(5px) saturate(.75); pointer-events:none; user-select:none; min-height:150px; }
  body.promos-maint .promo-view:hover { background:transparent; }
  body.promos-maint .pv-pen { display:none; }
  body.promos-maint .promo-maint { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:absolute; inset:0; z-index:2; text-align:center; padding:16px; }
  .promo-maint .pm-ico { font-size:22px; }
  .promo-maint b { font-family:'Jost',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); }
  .promo-maint .pm-sub { font-size:11.5px; font-weight:600; color:var(--muted); }

  .promo-editbar { display:flex; align-items:center; gap:10px; padding:8px 12px 11px 16px; flex-shrink:0; border-top:1px solid var(--line-2); }
  .pe-hint { flex:1; font-size:10.5px; font-weight:600; color:var(--faint); line-height:1.35; }
  .pe-done { border:none; background:var(--purple); color:#fff; border-radius:999px; padding:7px 16px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
  .pe-done:active { transform:scale(.95); }
  /* From tablets-in-landscape up, the card sits beside the board and widens
     with the screen (280 → 380 → 460px). The rail overlays its column without
     adding page height, so the card is boxed by the builder itself: it grows
     downward with the text but can never pass the board's bottom edge — the
     rest scrolls inside. From 1280px up the board keeps its exact 898px. */
  /* The whole promos section only exists while the feature is on — with it
     off, the layout is exactly the original centered board */
  body:not(.has-promos) .promo-rail { display:none !important; }
  @media (min-width:1000px){
    body.has-promos:not(.capture) .sheet-wrap { position:relative; max-width:1224px; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:0 14px; align-items:start; }
    body.has-promos:not(.capture) .sheet-wrap > :not(.promo-rail) { grid-column:1; }
    body.has-promos:not(.capture) .promo-rail { position:absolute; top:0; bottom:88px; right:16px; width:280px; margin-top:0; pointer-events:none; }
    body.has-promos:not(.capture) .promo-card { position:sticky; top:14px; max-height:calc(100vh - 28px); max-height:min(calc(100dvh - 28px), 100%); pointer-events:auto; }
    body.has-promos:not(.capture) table { min-width:820px; }
  }
  @media (min-width:1280px){
    body.has-promos:not(.capture) .sheet-wrap { max-width:1326px; grid-template-columns:minmax(0,1fr) 380px; gap:0 16px; }
    body.has-promos:not(.capture) .promo-rail { width:380px; }
  }
  @media (min-width:1440px){
    body.has-promos:not(.capture) .sheet-wrap { max-width:1406px; grid-template-columns:minmax(0,1fr) 460px; }
    body.has-promos:not(.capture) .promo-rail { width:460px; }
  }

  .pip-lock { max-width:380px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 26px; display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; box-shadow:0 1px 3px rgba(24,20,50,.07), 0 22px 46px -16px rgba(24,20,50,.24); }
  .pl-icon { font-size:30px; }
  .pl-title { font-family:'Jost',sans-serif; font-weight:700; font-size:17.5px; color:var(--ink); }
  .pl-sub { font-size:12px; font-weight:600; color:var(--muted); line-height:1.5; }
  /* ── Windows-panel contrast: interactive controls get a firmer border than
     the decorative hairlines — washed-out store monitors were erasing the
     date field and buttons into the white ── */
  :root { --ctl-line:#D6D6E1; }
  .btn, input[type=date], .rl-add input, .tp-add input, .st-in { border-color:var(--ctl-line); }
  .btn:hover { border-color:#B7B7C7; }
  .cellSel:hover, .taskbox:hover { border-color:var(--ctl-line); }

  /* Task cell: real feedback — press, keyboard focus, and a persistent mark
     on the cell whose picker is open */
  .taskbox:active { filter:brightness(.96); }
  .taskbox:focus-visible { outline:2px solid var(--purple-l); outline-offset:2px; }
  .taskbox.editing { outline:2px solid var(--purple); outline-offset:-1px; background:#fff; border-radius:8px; }

  html { scrollbar-gutter:stable; }