:root{
  --bg:#F4F7F6; --card:#FFFFFF; --line:#DCE5E3; --line2:#E6ECEB; --ink:#12302E; --muted:#4F6B68;
  --side:#0E2B2A; --side-on:#1C4A47; --side-ink:#DCEDEA; --mint:#7FD9C8;
  --accent:#0B6F66; --accent-ink:#FFFFFF; --soft:#EEF3F2;
  --done-bg:#E3F4EA; --done:#1F6B45; --hold-bg:#FFF1D6; --hold:#7A4B00;
  --fatal-bg:#FDE8E6; --fatal:#9B1C12; --day:#DCE8FB; --day-ink:#1D3F7A;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)} a:hover{color:#084F49}
h1{font-size:26px;margin:4px 0 0} h2{font-size:16px;margin:0} h3{font-size:14px;margin:8px 0 0}
input,select,textarea,button{font:inherit;color:inherit}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{
  width:100%;height:40px;border:1px solid #C9D6D3;border-radius:8px;padding:0 10px;background:#fff}
textarea{height:auto;padding:8px 10px;resize:vertical}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);margin:0;vertical-align:middle}
input[type=color]{width:40px;height:32px;border:1px solid #C9D6D3;border-radius:6px;padding:2px;background:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.shell{display:flex;min-height:100vh}
.side{flex:0 0 208px;background:var(--side);color:var(--side-ink);padding:24px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side a{display:block;padding:11px 12px;border-radius:8px;color:var(--side-ink);text-decoration:none}
.side a:hover{background:#163A38;color:#fff}
.side a.on{background:var(--side-on);color:#fff;font-weight:600}
.brand{padding:0 12px 20px}
.brand-co{font-size:11px;letter-spacing:2px;color:var(--mint);font-weight:600}
.brand-co.dark{color:var(--accent)}
.brand-app{font-size:19px;font-weight:700;color:#fff;margin-top:2px}
.me{margin-top:auto;padding:14px 12px 0;border-top:1px solid #24504C;font-size:13px}
.me-name{color:#fff;font-weight:600}.me-role{color:#9CC4BE}
.me-links{margin-top:6px}.me-links a{display:inline;padding:0;color:var(--mint)}
.main{flex:1 1 auto;min-width:0;padding:24px 28px;display:flex;flex-direction:column;gap:18px}
.solo{max-width:420px;margin:8vh auto;padding:0 16px}

.ph{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.ph-sub{font-size:13px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card.pad,.pad{padding:18px 20px}
.card-head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.narrow{max-width:460px}
.stack{display:flex;flex-direction:column;gap:12px}
.toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.filters .field{min-width:170px}
.field{display:flex;flex-direction:column;gap:5px;margin:0;border:0;padding:0;min-width:0}
.field>span,.field>label,.field>legend{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;padding:0}
.grow{flex:1 1 260px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.row-tight{display:flex;gap:6px;align-items:center}
.split{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.split-main{flex:3 1 520px;min-width:0}
.split-side{flex:2 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:8px;border:1px solid #C9D6D3;background:#fff;font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#095C55}
.btn.ghost{background:transparent}
.btn.dashed{border-style:dashed;border-color:var(--accent);color:var(--accent)}
.btn.small{min-height:32px;padding:0 10px;font-size:13px}
.btn.sq{width:40px;padding:0;font-size:18px}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.icon-btn.danger{color:#8A2A22}
.icon-btn:hover{border-color:currentColor}

.flash{padding:10px 14px;border-radius:8px;border:1px solid;font-size:14px}
.flash.ok{background:var(--done-bg);border-color:#8CCBA8;color:#1B4D33}
.flash.error{background:var(--fatal-bg);border-color:#F3C2BD;color:#7D1A12}
.flash.info{background:#E8F1FB;border-color:#B9D2EE;color:#1D3F7A}
.flash.inset{margin:12px 16px}
.flash.big{font-size:15px}
code.pw{font:600 18px/1 ui-monospace,Consolas,monospace;background:#fff;padding:4px 8px;border-radius:6px;border:1px solid #8CCBA8;user-select:all}

.grid{width:100%;border-collapse:collapse;font-size:13px}
.grid th{background:var(--soft);text-align:left;font-size:11px;letter-spacing:.03em;padding:10px 8px;color:var(--ink);white-space:nowrap}
.grid td{padding:8px;border-top:1px solid var(--line2);vertical-align:middle}
.grid th:first-child,.grid td:first-child{padding-left:14px}
.grid .right{text-align:right}.grid .center,.center{text-align:center}
.scroll-x{overflow-x:auto}
.input-grid{table-layout:fixed}
.input-grid td{padding:6px}
.input-grid select,.input-grid input:not([type=checkbox]){height:38px;padding:0 6px;font-size:13px}
.input-grid .c-flag{text-align:center;padding:6px 0}
.input-grid th.c-flag{padding:10px 0;font-size:10px;text-align:center}
.input-grid .c-by{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-locked{background:#F7F9F9;color:var(--muted)}
.r-locked td{padding:12px 6px}
.r-on{background:#EAF6F4}
.r-off td{color:#8DA19E}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrap{word-break:break-word}
.nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,"JetBrains Mono",Consolas,monospace;font-size:12px}
.strong{font-weight:600}
.muted{color:var(--muted)}
.small{font-size:12px}
.pre{white-space:pre-line}
.fatal-text{color:var(--fatal);font-weight:600}
.danger-text{color:#8A2A22}
select.cat.is-fatal{border-color:#B42318;background:var(--fatal-bg);color:var(--fatal);font-weight:600}

.badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
.badge.done{background:var(--done-bg);color:var(--done)}
.badge.hold{background:var(--hold-bg);color:var(--hold)}
.badge.fatal{background:var(--fatal-bg);color:var(--fatal)}
.chip{display:inline-block;font-size:11px;font-weight:700;background:var(--soft);color:var(--muted);padding:2px 6px;border-radius:5px}

.day-row td{background:var(--day);color:var(--day-ink);font-weight:700;padding:8px 14px}
.day-note{font-weight:500;color:#3A5A8F}
.day-post{float:right;font-weight:500;font-size:12px;color:#3A5A8F}

.posting{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-radius:8px;border:1px solid;text-align:left;width:100%;line-height:1.25}
.posting small{font-size:12px}
.posting.done{background:var(--done-bg);border-color:#8CCBA8;color:var(--done)}
.posting.done .tick{width:20px;height:20px;border-radius:4px;background:var(--done);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.posting.done .btn{margin-left:auto}
.posting.todo{background:#fff;border-color:#C9D6D3;color:var(--ink);cursor:pointer}
.posting.todo:hover{border-color:var(--accent)}
.posting.todo .box{width:20px;height:20px;border:2px solid #9DB3AF;border-radius:4px;flex:none}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.tile-l{font-size:13px;color:var(--muted)}
.tile-n{font-size:34px;font-weight:700;margin-top:2px}
.tile.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.tile.accent .tile-l{color:#D4F0EB}

.site-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:14px}
.site-cell{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;border:1px solid;text-decoration:none}
.site-cell.ok{background:var(--done-bg);border-color:#8CCBA8;color:var(--done)}
.site-cell.todo{background:var(--hold-bg);border-color:#F0D29A;color:var(--hold)}
.site-code{font-weight:700;font-size:13px}
.site-meta{font-size:12px}

.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;font-size:13px;color:var(--muted)}
.notes p,.notes-line{margin:0;font-size:13px}
.notes strong{color:var(--ink)}

.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13px}
.history li{border-left:3px solid var(--line);padding-left:10px}
.site-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;max-height:240px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:10px}

.guide-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px}
.guide-sec.regular .guide-head{background:var(--done-bg);color:#1F5A3B}
.guide-sec.fatal .guide-head{background:var(--fatal-bg);color:#8A1C13}
.guide-head span{font-size:12px;font-weight:700}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--line2)}
.guide-item{background:#fff;padding:14px 18px}
.guide-edit{border-top:1px solid var(--line2);padding-top:12px;display:grid;grid-template-columns:1fr 2fr auto;gap:12px;align-items:start}
.guide-edit.new{background:#F7FBFA;padding:12px;border-radius:8px;border:1px dashed var(--line)}

.login h1{margin:4px 0 16px}

@media (max-width:900px){
  .shell{flex-direction:column}
  .side{position:static;height:auto;flex:none;flex-direction:row;flex-wrap:wrap;padding:12px}
  .brand{width:100%;padding:0 6px 8px}
  .me{width:100%;margin-top:8px}
  .main{padding:16px}
  .grid3,.notes,.grid2,.guide-edit{grid-template-columns:1fr}
  .input-grid{min-width:1100px}
  #f-rows{overflow-x:auto}
}

/* v1.1 guide */
.guide-jump{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.guide-jump a{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--soft);text-decoration:none;color:var(--ink)}
.guide-jump a:hover{background:#DDE8E6}
.guide-sec{scroll-margin-top:16px}
.guide-head h2{font-size:17px}
.guide-grid{gap:0;background:#fff;margin-left:-1px}
.guide-item{border-top:1px solid var(--line2);border-left:1px solid var(--line2)}

/* v1.5 */
.site-hero{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.site-hero-text{flex:1 1 auto;min-width:0}
.site-name{font-size:34px;line-height:1.1;margin:2px 0 2px;letter-spacing:.02em}
.site-date{font-size:15px;font-weight:600;color:var(--accent)}
.site-logo{border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.badge-logo{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border:0;letter-spacing:.02em}
.ph-title{display:flex;align-items:center;gap:10px}
.date-pick{position:relative;flex:1 1 auto;min-width:0}
.pd{position:relative}
.pd-input{position:absolute!important;inset:0;opacity:0;pointer-events:none;width:100%!important;height:100%!important}
.pd-text{width:100%;min-height:38px;border:1px solid #C9D6D3;border-radius:8px;background:#fff;text-align:left;padding:0 8px;font:600 12px/1.2 inherit;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-text.empty{color:var(--muted);font-weight:500}
.pd-text:hover{border-color:var(--accent)}
.date-text{min-height:40px;font-size:14px;text-align:center}
.combo{position:relative}
.combo-input{width:100%}
.combo-list{position:fixed;z-index:60;max-height:260px;overflow-y:auto;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid #C9D6D3;border-radius:8px;box-shadow:0 8px 24px rgba(14,43,42,.12)}
.combo-list li{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-list li.on,.combo-list li:hover{background:#EAF6F4}
.combo-list li.none{color:var(--muted);cursor:default}
.input-grid input[type=checkbox]:disabled{opacity:.35;cursor:not-allowed}
.site-cell .site-logo{width:22px;height:22px;border-radius:6px}
.site-cell-top{display:flex;align-items:center;gap:8px}
.logo-preview{display:flex;align-items:center;gap:14px}

/* v1.6 — logo replaces the site name; BANDING hidden until posted */
.site-name.has-logo{margin:6px 0 6px;line-height:0}
.site-wordmark{display:block;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.ph-title .site-wordmark{margin-right:8px}
.input-grid input.nopost{visibility:hidden}
.wordmark-plate{display:inline-block;background:#12302d;border-radius:10px;padding:6px 12px;line-height:0}
.site-wordmark.on-plate{mix-blend-mode:normal}
.ph-title .wordmark-plate{margin-right:8px}
/* BD column hidden while no row of the day is posted */
.bd-off .c-bd{display:none}

/* v1.11 — themes: Light, Dark, Glass ☀, Glass ☾ (per account) */
html[data-theme=dark]{color-scheme:dark;
  --bg:#0B1514; --card:#13201F; --line:#24403D; --line2:#1D3533; --ink:#E3EFED; --muted:#93AEAA;
  --side:#071110; --side-on:#1C4A47; --side-ink:#CFE5E1; --mint:#7FD9C8;
  --accent:#35B3A3; --accent-ink:#06201D; --soft:#182B29;
  --done-bg:#12342A; --done:#7CD9A8; --hold-bg:#3A2C10; --hold:#F3C56B;
  --fatal-bg:#3D1714; --fatal:#FF9D92; --day:#1A2B47; --day-ink:#AFC8F2;
  --field:#0F1A19; --field-line:#2E4D4A;
}
html[data-theme=dark] a:hover{color:#7FD9C8}
html[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=color]),
html[data-theme=dark] select,html[data-theme=dark] textarea,
html[data-theme=dark] input[type=color],html[data-theme=dark] .pd-text,
html[data-theme=dark] .btn,html[data-theme=dark] .icon-btn,html[data-theme=dark] .posting.todo{background:var(--field);border-color:var(--field-line);color:var(--ink)}
html[data-theme=dark] .btn.ghost{background:transparent}
html[data-theme=dark] .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
html[data-theme=dark] .btn.primary:hover{background:#4CC7B7}
html[data-theme=dark] .btn.dashed{background:transparent;border-color:var(--accent);color:var(--accent)}
html[data-theme=dark] .icon-btn{color:var(--muted)}
html[data-theme=dark] .icon-btn.danger,html[data-theme=dark] .danger-text{color:#FF8A7E}
html[data-theme=dark] .tile,html[data-theme=dark] .guide-item,html[data-theme=dark] .guide-grid{background:var(--card)}
html[data-theme=dark] .tile.accent{background:#0E5E56;border-color:#0E5E56;color:#fff}
html[data-theme=dark] .r-locked{background:#0F1B1A}
html[data-theme=dark] .r-on,html[data-theme=dark] .combo-list li.on,html[data-theme=dark] .combo-list li:hover{background:#1A3B37}
html[data-theme=dark] .r-off td{color:#5E7774}
html[data-theme=dark] .combo-list{background:var(--card);border-color:var(--field-line);box-shadow:0 10px 28px rgba(0,0,0,.5)}
html[data-theme=dark] .flash.ok{border-color:#2B6B4C;color:#9BE3BC}
html[data-theme=dark] .flash.error{border-color:#7A2E27;color:#FFB4AB}
html[data-theme=dark] .flash.info{background:#132841;border-color:#2C4C78;color:#AFC8F2}
html[data-theme=dark] code.pw{background:var(--field);border-color:#2B6B4C}
html[data-theme=dark] .site-cell.ok{border-color:#2B6B4C}
html[data-theme=dark] .site-cell.todo{border-color:#6B5320}
html[data-theme=dark] .posting.done{border-color:#2B6B4C}
html[data-theme=dark] .posting.done .tick{color:#06201D}
html[data-theme=dark] .posting.todo .box{border-color:#5F7F7B}
html[data-theme=dark] .day-note,html[data-theme=dark] .day-post{color:#8FAEDF}
html[data-theme=dark] select.cat.is-fatal{border-color:#C2483D;background:var(--fatal-bg);color:var(--fatal)}
html[data-theme=dark] .guide-jump a:hover{background:#21403C}
html[data-theme=dark] .guide-edit.new{background:#0F1B1A}
html[data-theme=dark] .site-logo{border-color:var(--line)}
/* dark logos need a light card on the dark page */
html[data-theme=dark] .site-wordmark:not(.on-plate){mix-blend-mode:normal;background:#fff;border-radius:10px;padding:6px 12px}

/* ---- theme colour picked by the user (Light / Dark) ---- */
html[data-accent]{--accent:var(--acc1);--mint:var(--acc3)}
html[data-accent][data-theme=dark]{--accent:var(--acc2);--accent-ink:#0B0F1A}
html[data-accent] a:hover{color:var(--acc0)}
html[data-accent][data-theme=dark] a:hover{color:var(--acc3)}
html[data-accent] .btn.primary:hover{background:var(--acc0)}
html[data-accent][data-theme=dark] .btn.primary:hover{background:var(--acc3)}
html[data-accent] .side a.on{background:var(--acc1)}
html[data-accent] .tile.accent{background:var(--acc1);border-color:var(--acc1)}
html[data-accent] .tile.accent .tile-l{color:rgba(255,255,255,.82)}
html[data-accent] .r-on{background:color-mix(in srgb,var(--acc1) 10%,transparent)}

/* ---- Glass (both) ---- */
html[data-theme^=glass] body{background:radial-gradient(900px 600px at 85% 10%,rgba(56,189,248,.35),transparent 60%),radial-gradient(800px 600px at 10% 90%,rgba(168,85,247,.35),transparent 60%),radial-gradient(700px 500px at 60% 70%,rgba(234,179,8,.18),transparent 60%),linear-gradient(135deg,#0B1020,#151B33 50%,#0E1428);background-attachment:fixed}
html[data-theme=glass-light] body{background:radial-gradient(900px 600px at 85% 5%,rgba(125,211,252,.55),transparent 60%),radial-gradient(800px 600px at 5% 95%,rgba(196,181,253,.6),transparent 60%),radial-gradient(700px 500px at 60% 60%,rgba(253,224,171,.5),transparent 60%),linear-gradient(135deg,#EEF2FF,#FDF2F8 50%,#ECFEFF);background-attachment:fixed}
html[data-theme^=glass][data-bg] body{background:var(--ui-bg) center/cover fixed #111}
html[data-theme^=glass] .side,html[data-theme^=glass] .card,html[data-theme^=glass] .tile{backdrop-filter:blur(var(--gblur)) saturate(140%);-webkit-backdrop-filter:blur(var(--gblur)) saturate(140%)}
html[data-theme^=glass] .card,html[data-theme^=glass] .tile{border-radius:20px}
html[data-theme^=glass] .side a{border-radius:999px;padding:11px 16px}
html[data-theme^=glass] .side a.on{background:linear-gradient(90deg,var(--acc1),var(--acc2));color:#fff;box-shadow:0 6px 20px color-mix(in srgb,var(--acc1) 45%,transparent)}
html[data-theme^=glass] .btn,html[data-theme^=glass] .icon-btn{border-radius:999px}
html[data-theme^=glass] .btn.primary{background:linear-gradient(90deg,var(--acc1),var(--acc2));border:0;color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--acc1) 40%,transparent)}
html[data-theme^=glass] .btn.primary:hover{filter:brightness(1.07)}
html[data-theme^=glass] .badge{border-radius:999px;padding:3px 10px}
html[data-theme^=glass] .tile.accent{background:linear-gradient(135deg,var(--acc1),var(--acc0));border:0;color:#fff}
html[data-theme^=glass] .tile.accent .tile-l{color:rgba(255,255,255,.85)}
html[data-theme^=glass] input[type=checkbox]{accent-color:var(--acc1)}
html[data-theme^=glass] .me-links a{padding:0}
html[data-theme^=glass] .day-row td{backdrop-filter:none}

/* ---- Glass tint: the colour of the glass itself (from the theme) ---- */
html[data-theme=glass-light]{--card:rgba(255,255,255,var(--ga));--side:rgba(255,255,255,calc(var(--ga) - .04));--glass-edge:rgba(255,255,255,.6);--glass-shadow:0 16px 40px rgba(30,30,80,.14)}
html[data-theme=glass-dark]{--card:rgba(14,19,38,var(--ga));--side:rgba(12,16,34,calc(var(--ga) + .06));--glass-edge:rgba(255,255,255,.11);--glass-shadow:0 18px 44px rgba(0,0,0,.35)}
html[data-theme^=glass] .card,html[data-theme^=glass] .tile{background:var(--card);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
html[data-theme^=glass] .side{border-right:1px solid var(--glass-edge)}

/* ---- Ink: text colours, chosen automatically from how bright the glass really looks (data-ink) ---- */
/* dark text */
html[data-ink=dark]{color-scheme:light;
  --line:rgba(20,30,60,.12); --line2:rgba(20,30,60,.08);
  --ink:#141933; --muted:#363D5C; --off:#575F7E; --side-on:var(--acc1); --side-ink:#1F2645; --mint:var(--acc0);
  --accent:var(--acc0); --soft:rgba(255,255,255,.4); --day:color-mix(in srgb,var(--acc1) 16%,rgba(255,255,255,.55)); --day-ink:#1E1A47;
  --field:rgba(255,255,255,.78); --field-line:rgba(20,30,60,.18);
  --done-bg:#DDF3E6; --done:#17603E; --hold-bg:#FFEFD0; --hold:#6E4300; --fatal-bg:#FDE4E1; --fatal:#951A10}
/* light text */
html[data-ink=light]{color-scheme:dark;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.08);
  --ink:#F2F4FB; --muted:#D6DCEE; --off:#B4BCD4; --side-on:var(--acc1); --side-ink:#E1E6F5; --mint:var(--acc3);
  --accent:var(--acc3); --accent-ink:#fff; --soft:rgba(255,255,255,.06); --day:color-mix(in srgb,var(--acc1) 26%,rgba(10,14,30,.45)); --day-ink:#ECE8FF;
  --field:rgba(5,8,20,.55); --field-line:rgba(255,255,255,.16);
  --done-bg:rgba(34,197,94,.2); --done:#7CEBAA; --hold-bg:rgba(245,176,65,.2); --hold:#FFD27F; --fatal-bg:rgba(239,68,68,.22); --fatal:#FFADAD}

html[data-ink] .r-off td{color:var(--off)}
html[data-ink] .brand-app,html[data-ink] .me-name{color:var(--ink)}
html[data-ink] .me{border-color:var(--line)} html[data-ink] .me-role{color:var(--muted)}
html[data-ink] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html[data-ink] select,html[data-ink] textarea,html[data-ink] .pd-text,
html[data-ink] .btn:not(.primary),html[data-ink] .icon-btn,html[data-ink] .posting.todo{background:var(--field);border-color:var(--field-line);color:var(--ink)}
html[data-ink] .icon-btn{color:var(--muted)}
html[data-ink] .grid th{color:var(--ink)}
html[data-ink] .btn.dashed{border-color:var(--accent);color:var(--accent)}

html[data-ink=dark] a:hover{color:var(--acc1)}
html[data-ink=dark] .side a:hover{background:rgba(255,255,255,.5);color:#141933}
html[data-ink=dark] .btn.ghost{background:rgba(255,255,255,.6)}
html[data-ink=dark] .btn.dashed{background:rgba(255,255,255,.45)}
html[data-ink=dark] .grid th{background:rgba(255,255,255,.45)}
html[data-ink=dark] .r-locked{background:rgba(255,255,255,.3)}
html[data-ink=dark] .combo-list{background:rgba(255,255,255,.97)}
html[data-ink=dark] .site-wordmark{mix-blend-mode:normal}
html[data-ink=dark] .ui-open{border-color:rgba(20,30,60,.16);background:rgba(255,255,255,.55)}

html[data-ink=light] a:hover{color:#fff}
html[data-ink=light] .side a:hover{background:rgba(255,255,255,.1);color:#fff}
html[data-ink=light] .btn.ghost{background:rgba(5,8,20,.4)}
html[data-ink=light] .btn.dashed{background:rgba(5,8,20,.25)}
html[data-ink=light] .icon-btn.danger,html[data-ink=light] .danger-text{color:#FF9A9A}
html[data-ink=light] .grid th{background:rgba(255,255,255,.06)}
html[data-ink=light] .r-locked{background:rgba(255,255,255,.04)}
html[data-ink=light] .r-on,html[data-ink=light] .combo-list li.on,html[data-ink=light] .combo-list li:hover{background:color-mix(in srgb,var(--acc1) 28%,transparent)}
html[data-ink=light] .combo-list{background:rgba(16,21,40,.97);border-color:var(--field-line);box-shadow:0 10px 28px rgba(0,0,0,.5)}
html[data-ink=light] select.cat.is-fatal{background:rgba(239,68,68,.25);border-color:#C2483D;color:#FFB8B8}
html[data-ink=light] .posting.done{border-color:rgba(110,231,160,.4)} html[data-ink=light] .posting.done .tick{background:#22C55E;color:#06201D}
html[data-ink=light] .posting.todo .box{border-color:#8A93B0}
html[data-ink=light] .flash.ok{border-color:rgba(110,231,160,.45);color:#B4F5CF}
html[data-ink=light] .flash.error{border-color:#7A2E27;color:#FFBDB5}
html[data-ink=light] .flash.info{background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.4);color:#C7ECFF}
html[data-ink=light] .site-cell.ok{border-color:rgba(110,231,160,.4)} html[data-ink=light] .site-cell.todo{border-color:rgba(252,200,107,.4)}
html[data-ink=light] .day-note,html[data-ink=light] .day-post{color:#DAD4FF}
html[data-ink=light] code.pw{background:var(--field)}
html[data-ink=light] .guide-item,html[data-ink=light] .guide-grid{background:transparent}


/* ---- Text straight on the photo (page titles): follows the photo's brightness (data-page-ink) ---- */
html[data-page-ink=dark] .main>.ph,html[data-page-ink=dark] .site-hero{color:#141933;text-shadow:0 0 2px rgba(255,255,255,.9),0 0 14px rgba(255,255,255,.85)}
html[data-page-ink=dark] .main>.ph .ph-sub,html[data-page-ink=dark] .site-hero .ph-sub{color:#2A3150}
html[data-page-ink=dark] .site-date{color:var(--acc0)}
html[data-page-ink=light] .main>.ph,html[data-page-ink=light] .site-hero{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.6)}
html[data-page-ink=light] .main>.ph .ph-sub,html[data-page-ink=light] .site-hero .ph-sub{color:#EEF0F8}
html[data-page-ink=light] .site-date{color:color-mix(in srgb,var(--acc3) 40%,#fff)}

/* ---- 🎨 button + panel ---- */
.ui-open{margin-top:10px;width:100%;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:inherit;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.ui-open:hover{background:rgba(255,255,255,.12)}
.ui-panel{position:fixed;left:220px;bottom:18px;z-index:80;width:340px;max-width:calc(100vw - 24px);max-height:calc(100vh - 36px);overflow-y:auto;padding:16px 18px;border-radius:18px;
  background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.28);font-size:13px}
html[data-theme^=glass] .ui-panel{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
html[data-ink=dark] .ui-panel{background:rgba(255,255,255,.92)}
html[data-ink=light] .ui-panel{background:rgba(14,19,38,.92)}
.ui-head{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:4px}
.ui-x{border:0;background:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7}
.ui-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 0 7px;display:flex;justify-content:space-between}
.ui-lbl b{color:var(--ink)}
.ui-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.ui-seg button{border:0;background:none;color:var(--muted);font-size:12px;font-weight:600;padding:7px 0;border-radius:999px;cursor:pointer}
.ui-seg button[aria-pressed=true]{background:var(--acc1);color:#fff}
.ui-sw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ui-sw .sw{width:28px;height:28px;border-radius:50%;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;position:relative;padding:0}
.ui-sw .sw[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:2px}
.ui-sw .sw.auto{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.ui-sw .sw.custom{border:2px dashed var(--muted);color:var(--muted);overflow:hidden}
.ui-sw .sw.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ui-photo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ui-thumb{width:78px;height:48px;border-radius:10px;background:var(--soft) center/cover;border:2px solid var(--acc1);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted)}
.ui-panel .pill{border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer}
.ui-panel input[type=range]{width:100%;accent-color:var(--acc1);height:auto;padding:0;border:0;background:none}
.ui-note{font-size:11px;color:var(--muted);margin-top:8px}
.ui-note.err{color:var(--fatal)}
html:not([data-theme^=glass]) .ui-glass-only{display:none}
@media (max-width:900px){.ui-panel{left:12px;bottom:12px}}
/* v1.11 touch-ups */
html[data-theme^=glass] .notes,html[data-theme^=glass] .notes-line{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 16px;text-shadow:none;backdrop-filter:blur(var(--gblur));-webkit-backdrop-filter:blur(var(--gblur))}
.ui-sw{gap:6px}.ui-sw .sw{width:26px;height:26px}
.ui-open{justify-content:flex-start;white-space:nowrap}

/* v1.12 — Glass only */
.ui-seg.two{grid-template-columns:repeat(2,1fr)}
.ui-open{overflow:hidden;text-overflow:ellipsis}
.ui-note.auto{color:var(--accent)}
.main>.ph .btn,.site-hero .btn{text-shadow:none}
/* v2.0 archive page */
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
textarea.mono{font-family:ui-monospace,Consolas,monospace;white-space:pre;overflow:auto}
/* v2.0.1 — messages (flash) on Glass: glass box, readable text, status colour as a side stripe */
html[data-theme^=glass][data-ink] .flash,html[data-theme^=glass][data-ink] .flash.ok,html[data-theme^=glass][data-ink] .flash.error,html[data-theme^=glass][data-ink] .flash.info{
  background:var(--card);color:var(--ink);border:1px solid var(--glass-edge);border-left:5px solid #22C55E;border-radius:14px;
  backdrop-filter:blur(var(--gblur)) saturate(140%);-webkit-backdrop-filter:blur(var(--gblur)) saturate(140%);box-shadow:var(--glass-shadow);text-shadow:none}
html[data-theme^=glass][data-ink] .flash.error{border-left-color:#EF4444}
html[data-theme^=glass][data-ink] .flash.info{border-left-color:#38BDF8}
html[data-theme^=glass][data-ink] .flash strong,html[data-theme^=glass][data-ink] .flash a{color:var(--ink)}
html[data-theme^=glass][data-ink] code.pw{background:var(--field);color:var(--ink);border-color:var(--field-line)}

/* With a background photo the page title sits on its own small glass, so it reads on any photo */
html[data-theme^=glass][data-bg] .main>.ph .ph-title>div:last-child,html[data-theme^=glass][data-bg] .site-hero-text{
  background:var(--card);border:1px solid var(--glass-edge);border-radius:16px;padding:8px 16px;box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--gblur)) saturate(140%);-webkit-backdrop-filter:blur(var(--gblur)) saturate(140%)}
html[data-theme^=glass][data-bg] .site-hero-text{flex:0 1 auto}
html[data-theme^=glass][data-bg] .main>.ph,html[data-theme^=glass][data-bg] .site-hero{color:var(--ink);text-shadow:none}
html[data-theme^=glass][data-bg] .main>.ph .ph-sub,html[data-theme^=glass][data-bg] .site-hero .ph-sub{color:var(--muted)}
html[data-theme^=glass][data-bg][data-ink=dark] .site-date{color:var(--acc0)}
html[data-theme^=glass][data-bg][data-ink=light] .site-date{color:var(--acc3)}
.site-hero .ph-right{margin-left:auto}
/* v2.0.4 — company logo: transparent, a version for light and one for dark backgrounds */
.brand{padding:0 6px 18px}
.brand-mark{line-height:0}
.brand-logo{display:block;width:100%;height:auto}
.brand-logo.for-dark{display:none}
html[data-ink=light] .brand-logo.for-light{display:none}
html[data-ink=light] .brand-logo.for-dark{display:block}
.brand .brand-mark{padding:2px 6px;max-width:190px}
.brand .brand-app{margin:12px 8px 0;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.login-logo{margin:2px 0 16px}
@media (max-width:900px){.brand .brand-mark{max-width:220px}}

/* v2.0.7 — site logo straight on the glass, no box; a soft shadow keeps it readable */
html[data-theme^=glass] .site-wordmark{mix-blend-mode:normal;background:none;padding:0}
html[data-ink=dark] .site-wordmark.is-light{filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.35))}
html[data-ink=light] .site-wordmark.is-dark{filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 8px rgba(255,255,255,.55))}
html[data-ink=light] .site-wordmark.is-light{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
/* v2.1 — staff dropdown arrow, LINE report */
.combo .combo-input{padding-right:30px}
.combo-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:28px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1}
.combo-arrow:hover{color:var(--ink)}
.report-text{width:100%;font:13px/1.5 ui-monospace,Consolas,monospace;white-space:pre-wrap;resize:vertical}
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:18px}
.day-doc{align-items:flex-end;flex-wrap:wrap}

/* v2.3.2 — dropdown lists always readable (the red Fatal style no longer leaks into the list) */
select option{background:#FFFFFF;color:#1F2937;font-weight:400}
select option:checked{background:#E5E7EB;color:#111827}
select option[data-fatal="1"]{color:#B42318;font-weight:600}

/* v2.3.2 — saved rows are semi-locked: double-click to edit, link opens on click */
td.lk-link .link-view{display:none}
tr.is-locked td.lk{cursor:default}
tr.is-locked td.lk input,tr.is-locked td.lk select,tr.is-locked td.lk .combo{pointer-events:none}
tr.is-locked td.lk input:not([type=checkbox]),tr.is-locked td.lk select{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-appearance:none;appearance:none}
tr.is-locked td.lk select.cat.is-fatal{color:#E5484D!important;font-weight:700}
tr.is-locked .combo-arrow{visibility:hidden}
tr.is-locked td.lk-link input{display:none}
tr.is-locked td.lk-link .link-view{display:block;height:38px;line-height:38px;padding:0 6px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-view a,.r-locked a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
html[data-ink=light] .link-view a,html[data-ink=light] .r-locked a{color:#9FE8FF}
html[data-ink=dark] .link-view a,html[data-ink=dark] .r-locked a{color:#0B5CAD}
tr.is-locked td.lk:hover{box-shadow:inset 0 0 0 1px rgba(127,127,127,.35);border-radius:8px}

/* v2.3.4 — repeated Chat ID */
td:has(> .dup-badge){position:relative}
.input-grid input.chat-dup{border-color:#F59E0B!important;box-shadow:0 0 0 2px rgba(245,158,11,.35)!important}
td.chat-dup,tr.is-locked td.lk input.chat-dup{color:#B45309!important;font-weight:700}
html[data-ink=light] td.chat-dup,html[data-ink=light] tr.is-locked td.lk input.chat-dup{color:#FCD34D!important}
.dup-badge{position:absolute;top:1px;right:3px;font:700 10px/1 system-ui,sans-serif;padding:2px 5px;border-radius:999px;background:#F59E0B;color:#1F1300;cursor:help;pointer-events:auto}

/* v2.3.5 — more than one link per row (one per line) */
.input-grid textarea.link-input{display:block;width:100%;min-height:38px;height:38px;padding:9px 6px;font-size:13px;line-height:18px;resize:none;overflow:hidden;white-space:pre;overflow-x:hidden}
tr.is-locked td.lk-link textarea{display:none}
tr.is-locked td.lk-link .link-view{height:auto;min-height:38px;line-height:19px;padding:9px 6px;white-space:normal}
.link-view br,.links-ro br{display:none}
.link-view a,.links-ro a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.links-ro{max-width:0}

/* v2.3.6 — several links of one row are numbered 1. 2. 3. */
.link-view,.links-ro{counter-reset:ln}
.link-view a,.links-ro a{counter-increment:ln}
.link-view a:not(:only-of-type)::before,.links-ro a:not(:only-of-type)::before{content:counter(ln) ". ";font-weight:700;display:inline-block;min-width:1.4em;text-decoration:none}

/* v2.4 — Staff Recap table */
.recap-wrap{max-height:72vh;overflow:auto}
.grid.recap{border-collapse:separate;border-spacing:0}
.grid.recap th{white-space:normal;vertical-align:bottom;text-align:center;min-width:74px;max-width:96px;line-height:1.25;position:sticky;top:0;z-index:2}
.grid.recap th span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.grid.recap .r-name{position:sticky;left:0;z-index:1;min-width:230px;text-align:left;white-space:nowrap;font-weight:600;background:var(--card,#fff)}
.grid.recap th.r-name{z-index:3;background:var(--soft)}
.grid.recap .r-num{text-align:center;font-variant-numeric:tabular-nums}
.grid.recap td.r-num{color:var(--muted)}
.grid.recap td.r-num.has{color:var(--ink);font-weight:700}
.grid.recap td.r-fatal.has{color:#E5484D}
.grid.recap th.r-fatal{color:#E5484D}
.grid.recap .r-total{font-weight:800;color:var(--ink)!important;background:rgba(127,127,127,.10)}
.grid.recap tfoot td{font-weight:800;border-top:2px solid rgba(127,127,127,.45);color:var(--ink)}
.grid.recap tr.r-zero .r-name{font-weight:500;color:var(--muted)}
html[data-theme^=glass] .grid.recap .r-name{background:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme^=glass] .grid.recap th{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* v2.5 — when a flag (appeal) was ticked and by whom */
.tick-when{font-size:11px;line-height:1.3;margin-top:3px;opacity:.8;white-space:nowrap}
.badge.move{background:rgba(59,130,246,.16);color:#1D4ED8;font-weight:600;font-size:11px;white-space:nowrap}
html[data-ink=light] .badge.move{background:rgba(96,165,250,.25);color:#BFDBFE}
.hint{margin:-4px 0 2px}
.input-grid .tick-when{font-size:10px;white-space:normal;overflow-wrap:anywhere;cursor:help}

/* v2.6.1 — OPS menu shows the site's logo */
.brand-site .brand-mark{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px}
.brand-site .site-wordmark{display:block;margin:0 auto}
.brand-site-code{font-weight:800;font-size:18px;letter-spacing:.04em;color:var(--ink)}
/* Staff Recap: the sticky name column must hide the numbers scrolling under it */
.grid.recap .r-name,.grid.recap th{background:var(--card)}
html[data-theme=glass-light] .grid.recap .r-name,html[data-theme=glass-light] .grid.recap th{background:rgba(250,250,255,.97)}
html[data-theme=glass-dark] .grid.recap .r-name,html[data-theme=glass-dark] .grid.recap th{background:rgba(22,27,48,.97)}

/* v2.6.3 — Staff Recap: name + TOTAL stay visible when scrolling sideways; notes greyed */
.grid.recap .r-name{width:290px;min-width:290px;max-width:290px;overflow:hidden;text-overflow:ellipsis}
.grid.recap .r-total{position:sticky;left:290px;z-index:1;min-width:78px;box-shadow:inset -2px 0 0 rgba(127,127,127,.35)}
.grid.recap th.r-total{z-index:3}
html[data-theme=glass-light] .grid.recap .r-total{background:rgba(236,236,246,.98)}
html[data-theme=glass-dark] .grid.recap .r-total{background:rgba(34,40,64,.98)}
html:not([data-theme^=glass]) .grid.recap .r-total{background:var(--soft)}
.grid.recap .r-note{opacity:.55}
.grid.recap th.r-note{font-style:italic}
.grid.recap .r-rule{display:block;font-size:9.5px;font-weight:600;opacity:.8;margin-top:2px;letter-spacing:0;text-transform:none}
.grid.recap .r-plus{display:block;font-size:10px;font-weight:700;color:#D97706;line-height:1}
html[data-theme=glass-light] .grid.recap .r-name,html[data-theme=glass-light] .grid.recap th.r-name{background:#F7F7FC;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-theme=glass-dark] .grid.recap .r-name,html[data-theme=glass-dark] .grid.recap th.r-name{background:#161B30;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-theme=glass-light] .grid.recap .r-total{background:#ECECF6}
html[data-theme=glass-dark] .grid.recap .r-total{background:#222840}
.grid.recap .r-bonus{background:rgba(217,119,6,.10);font-weight:700}
.grid.recap td.r-bonus.has{color:#B45309}
html[data-ink=light] .grid.recap td.r-bonus.has{color:#FBBF24}