/* Softer, friendlier look. Loaded after the main styles, so it only overrides them.
   The printable sheet keeps its card layout but with muted colours and grey grid lines. */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --ink:#1f2933; --muted:#5f6b7a; --line:#e4e8ee;
  --accent:#3b6fb6; --accent-ink:#ffffff; --band:#f7f9fb;
  --bad:#a1332b; --bad-bg:#fbeeed; --warn:#8a5a00; --warn-bg:#fcf3e2; --soon:#7a6400; --soon-bg:#fdf9e9; --good:#2f6b3a; --good-bg:#ecf6ee; --na:#55606e; --na-bg:#f0f2f5;
  --display:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
body{background:var(--bg);color:var(--ink)}
h1,h2,h3{text-transform:none;font-weight:650;letter-spacing:-.01em}
h2{font-size:18px} h3{font-size:16px}

/* Header and tabs */
header.top{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.brand h1{font-size:19px;color:var(--ink)}
.brand .reg{background:#eef3fb;color:#24508f;border:1px solid #d3e0f3;border-radius:8px;font-size:15px;padding:2px 9px}
nav.tabs{gap:4px}
nav.tabs a{color:var(--muted);border-bottom:3px solid transparent;border-radius:8px 8px 0 0}
nav.tabs a:hover{color:var(--ink);background:#f4f6f9}
nav.tabs a[aria-current="page"]{color:#24508f;border-bottom-color:var(--accent);background:transparent}
nav.tabs a .badge{background:#fbeeed;color:var(--bad);border:0}
.who{color:var(--ink);font-weight:600}
.who button.link{border:1px solid #d5dce5;border-radius:8px;background:#fff;color:var(--ink)}
.st{color:var(--muted);font-weight:600}
.st.err{background:#fbeeed;color:var(--bad);border:1px solid #f1c9c5;border-radius:8px}

/* Cards */
section.panel{border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.panel-head{background:#fff;border-bottom:1px solid var(--line);padding:14px 16px}
.panel-head .note,.panel-head .muted{color:var(--muted)}
.viewing{border:1px solid #c9d8ef !important;background:#f3f7fd}
.note{color:var(--muted)}
.empty{color:var(--muted)}

/* Buttons and inputs */
.btn{border:1px solid #d5dce5;border-radius:10px;background:#fff;color:var(--ink);font-weight:600}
.btn:hover{background:#f4f6f9}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:none;background:#325f9d}
.btn.danger{color:var(--bad);border-color:#efc6c2;background:#fff}
.btn.danger:hover{background:#fdf3f2}
.btn.small{border-radius:9px}
.field label{color:var(--ink);font-weight:600}
.field input,.field select,.role-sel{border:1px solid #cfd6df;border-radius:9px;background:#fff}
.field input:focus,.field select:focus{border-color:var(--accent)}
:focus-visible{outline:3px solid rgba(59,111,182,.45);outline-offset:2px}
textarea{border:1px solid #cfd6df;border-radius:9px;background:#fff}

/* Status pills and tallies */
.pill{border:0;border-radius:999px;padding:3px 10px}
.tally div{border-right:1px solid var(--line)}
.tally b{color:var(--ink);font-size:28px;font-weight:650}
.tally span{color:var(--muted);text-transform:none;letter-spacing:0;font-size:13px}
@media (max-width:560px){.tally div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.lbl2{text-transform:none;letter-spacing:0;color:var(--muted);font-size:13px;font-weight:600}
.week{border-left-color:#e3a19b}
.week.done{border-left-color:#8fc49a}
.week .lbl{text-transform:none;letter-spacing:0}
.reg-chip{background:#eef3fb;color:#24508f;border:1px solid #d3e0f3;border-radius:7px;font-size:13px}
.cal-bar{border:1px solid var(--line);border-radius:999px}
.missed{color:var(--bad)}

/* Lists and tables */
ul.list li{border-top:1px solid var(--line)}
ul.list li:nth-child(even){background:#fafbfc}
th,td{border:1px solid var(--line)}
th{background:#f4f6f9;color:var(--muted);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
table:not(.gs) tbody tr:nth-child(even) td{background:#fafbfc}
.hist-week{border-top:1px solid var(--line)}
.hist-week:nth-child(even){background:#fafbfc}
.unit-box{border:1px solid var(--line);border-radius:10px;background:#f7f9fb}

/* Pop-ups and messages */
.modal{background:rgba(16,24,40,.45)}
.sheet{border:0;border-radius:18px 18px 0 0;box-shadow:0 10px 30px rgba(16,24,40,.18)}
@media (min-width:600px){.sheet{border-radius:18px}}
.toast{background:#1f2933;color:#fff;border:0;border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,.25)}
.ie-list{border:1px solid var(--line) !important;border-radius:12px;box-shadow:0 8px 24px rgba(16,24,40,.14) !important}
.ie-list .btn{border-color:transparent;justify-content:flex-start}
.ie-list .btn:hover{background:#f4f6f9}

/* Holiday colours, softened */
.pill.s-hol{background:#dcf5f1;color:#0f6158;border:0}
section.panel.hol{background:#f2fbf9;border-left:5px solid #6ccfc3}
.hol-bar.on{background:#f2fbf9 !important;border:1px solid #bfe9e2 !important;border-left:5px solid #6ccfc3 !important;border-radius:12px}
.hol-btn{background:#dcf5f1 !important;border-color:#bfe9e2 !important;color:#0f6158 !important}

/* The sheet: same layout as the paper card, gentler colours */
.sheet-wrap{border-radius:8px}
table.gs{color:#1f2933}
table.gs td{border-color:#9aa4b1}
table.gs td.nb,table.gs td.title,table.gs td.lab{border:0}
table.gs td.title{color:#1f2933}
table.gs td.hd{background:#dfe8f6}
table.gs td.wc.now{background:#fdf6dc}
table.gs td.add{color:#9aa4b1}
table.gs tr:hover td.edit{outline-color:rgba(59,111,182,.6)}
.legend i{border:1px solid #c3cad3;border-radius:3px}

/* Due-date colours on the sheet and its key: standard green, orange and red (worst colour wins: later rules override) */
table.gs td.d-due30,table.gs tr:has(td.d-due30) td.b,table.gs tr:has(td.d-due30) td.van:not(.missing){background:#00ff00 !important}
table.gs td.d-due7,table.gs tr:has(td.d-due7) td.b,table.gs tr:has(td.d-due7) td.van:not(.missing){background:#ff9900 !important}
table.gs td.d-expired,table.gs tr:has(td.d-expired) td.b,table.gs tr:has(td.d-expired) td.van:not(.missing){background:#ff0000 !important}
.legend span:nth-child(1) i{background:#ff0000 !important}
.legend span:nth-child(2) i{background:#ff9900 !important}
.legend span:nth-child(3) i{background:#00ff00 !important}