/* Dark base taken over from Connect; the game layer (cards in the board's
   pastel colours, name tags, scores, badges) sits on top of it. */
:root{
  color-scheme:dark;
  --bg:#15171c;
  --fg:#e6e8eb;
  --fg-dim:#a0a6b0;
  --line:#2b2f36;
  --surface:#1d2027;
  --surface-hi:#262a33;
  --accent:#6fb7ff;
  --good:#5fd98a;
  --bad:#ff6b6b;
  --warn:#ffb547;
  --gold:#ffd24a;
  --card-ink:#2b2d33;
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  max-width:960px;margin:0 auto;padding:0 16px 40px;
  background:var(--bg);color:var(--fg);line-height:1.4
}
a{color:var(--accent)}
h1{font-size:1.7em;margin:18px 0 6px}
h2{font-size:1.2em;margin:26px 0 10px}
h3{font-size:1.05em;margin:14px 0 8px}
.dim{color:var(--fg-dim)}
.small{font-size:.85em}
.hidden{display:none !important}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.spread{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.stack{display:flex;flex-direction:column;gap:10px}

/* ---- controls ---- */
button,.btn{
  font:inherit;padding:8px 14px;border-radius:10px;cursor:pointer;
  background:var(--surface-hi);color:var(--fg);border:1px solid var(--line);
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px
}
button:hover,.btn:hover{background:var(--line)}
button:disabled{opacity:.45;cursor:default}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#0d1520;font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.good{background:#1f3a2a;border-color:#2f6b45;color:var(--good)}
button.bad{background:#3a1f22;border-color:#6b2f35;color:var(--bad)}
button.link{background:none;border:none;color:var(--accent);padding:4px 6px}
input,select,textarea{
  font:inherit;padding:8px 10px;border-radius:8px;
  background:var(--surface);color:var(--fg);border:1px solid var(--line)
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input[type=color]{padding:2px;width:44px;height:36px}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--good)}
label{display:inline-flex;align-items:center;gap:6px}

/* Segmented choice: OK / Defect, yes / no. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:none;border-radius:0;background:var(--surface)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on-ok{background:#1f3a2a;color:var(--good);font-weight:600}
.seg button.on-bad{background:#3a1f22;color:var(--bad);font-weight:600}
.seg button.on{background:var(--surface-hi);font-weight:600}

/* ---- header / nav ---- */
.top{display:flex;align-items:center;gap:10px;padding:14px 0 6px;flex-wrap:wrap}
.top .main-nav{margin-left:auto}
.brand{font-weight:800;font-size:1.35em;color:var(--fg);text-decoration:none;letter-spacing:.5px}
.main-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.main-nav a{color:var(--fg-dim);text-decoration:none;padding:8px 10px;border-radius:10px}
.main-nav a.active{color:var(--fg);background:var(--surface-hi)}
.count{
  display:inline-block;min-width:20px;padding:1px 6px;margin-left:4px;border-radius:10px;
  background:var(--bad);color:#fff;font-size:.75em;font-weight:700;text-align:center
}
.menu-wrap{position:relative}
.menu-wrap summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.menu-wrap summary::-webkit-details-marker{display:none}
.menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:220px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;
  display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.45)
}
.menu a,.menu button{text-align:left;justify-content:flex-start;padding:10px 12px;border:none;border-radius:8px;background:none;color:var(--fg);text-decoration:none}
.menu a:hover,.menu button:hover{background:var(--surface-hi)}
.menu hr{border:none;border-top:1px solid var(--line);margin:4px 0}
.menu .lang-row{display:flex;gap:6px;padding:6px 8px}

/* ---- generic cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.msg{min-height:1.2em;font-size:.9em}
.msg.ok{color:var(--good)}
.msg.err{color:var(--bad)}
.banner{border-radius:12px;padding:12px 14px;border:1px solid}
.banner.warn{background:#3a2c14;border-color:#6b5124;color:#ffd79a}
.banner.bad{background:#3a1f22;border-color:#6b2f35;color:#ffb3b3}
.banner.good{background:#1f3a2a;border-color:#2f6b45;color:#b5f0c9}
.banner.info{background:#18263a;border-color:#2c4a70;color:#cfe4ff}

/* ---- person chips (colours of the name tags on the board) ---- */
.chip{
  display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:8px;
  font-weight:700;font-size:.92em;white-space:nowrap;text-decoration:none;
  transform:rotate(-1deg)
}
.chip.big{font-size:1.1em;padding:4px 14px}
.chip.ghost{background:var(--surface-hi);color:var(--fg-dim);transform:none;font-weight:500}

/* ---- score hero ---- */
.hero{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  background:linear-gradient(135deg,#1e2433,#1d2027 60%);border:1px solid var(--line);
  border-radius:18px;padding:18px
}
.hero .score{font-size:3.4em;font-weight:900;line-height:1;letter-spacing:-1px}
.hero .score small{display:block;font-size:.26em;font-weight:500;color:var(--fg-dim);letter-spacing:0;margin-top:4px}
.stats{display:flex;flex-wrap:wrap;gap:8px}
.stat{background:var(--surface-hi);border-radius:10px;padding:6px 10px;font-size:.9em}
.stat b{font-size:1.15em}
.pos{color:var(--good)}
.neg{color:var(--bad)}

/* ---- task cards: the laminated cards of the board ---- */
.task-card{
  background:var(--t,#eee);color:var(--card-ink);border-radius:16px;padding:16px;
  box-shadow:0 2px 0 rgba(0,0,0,.25)
}
.task-card a{color:#1f4f8a}
.task-card h3{margin:0 0 4px;font-size:1.5em;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.task-card .group{font-weight:700;margin:12px 0 4px}
.task-card .item{display:flex;align-items:center;gap:10px;padding:6px 0;min-height:36px}
.task-card .item input{width:22px;height:22px;accent-color:#2f8f57}
.task-card .item.done span{text-decoration:line-through;opacity:.6}
.task-card .status{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.55);font-weight:600}
.task-card .status.bad{background:#fbd5d5;color:#7a1b1b}
.task-card .status.good{background:#d3f2dd;color:#14522c}
.task-card button{background:rgba(255,255,255,.7);color:var(--card-ink);border-color:rgba(0,0,0,.15)}
.task-card button.primary{background:#2b2d33;color:#fff;border-color:#2b2d33}
.task-card select{background:#fff;color:var(--card-ink);border-color:rgba(0,0,0,.2)}

.progress{height:10px;border-radius:6px;background:rgba(0,0,0,.12);overflow:hidden;margin-top:8px}
.progress>span{display:block;height:100%;background:#2f8f57;border-radius:6px;transition:width .35s ease}
.card .progress{background:var(--surface-hi)}
.card .progress>span{background:var(--good)}
.progress.full>span{animation:pulse 1s ease 1}
@keyframes pulse{0%{filter:brightness(1)}50%{filter:brightness(1.6)}100%{filter:brightness(1)}}
.celebrate{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}

/* ---- everyone's tasks ---- */
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mini{background:var(--t);color:var(--card-ink);border-radius:12px;padding:10px 12px;text-decoration:none;display:block}
.mini .name{font-weight:900;text-transform:uppercase;font-size:.95em}
.mini .who{margin:6px 0 2px}
.mini .meta{font-size:.8em;opacity:.8;display:flex;justify-content:space-between;gap:6px}
.mini.me{outline:3px solid var(--accent);outline-offset:2px}

/* ---- ranking ---- */
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:8px;margin:10px 0 18px}
.podium .step{text-align:center;border-radius:14px 14px 4px 4px;padding:10px 6px;background:var(--surface-hi)}
.podium .step .medal{font-size:1.8em}
.podium .step .pts{font-size:1.6em;font-weight:900}
.podium .p1{min-height:150px;background:linear-gradient(#3b331a,#262a33)}
.podium .p2{min-height:120px}
.podium .p3{min-height:100px}
.rank-list{display:flex;flex-direction:column;gap:6px}
.rank-row{
  display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  text-decoration:none;color:var(--fg)
}
.rank-row .place{font-weight:900;font-size:1.2em;text-align:center}
.rank-row .pts{font-size:1.5em;font-weight:900;text-align:right}
.rank-row .detail{font-size:.8em;color:var(--fg-dim);margin-top:3px}
.rank-row.special{border-color:#6b2f35;background:#2a1a1d}
.rank-row.me{border-color:var(--accent)}
.zone{font-size:.75em;font-weight:700;color:var(--bad);text-transform:uppercase;letter-spacing:.5px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tabs button.on{background:var(--accent);color:#0d1520;border-color:var(--accent);font-weight:700}

/* ---- badges ---- */
.badge-row{display:inline-flex;gap:2px;font-size:1.05em}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.badge .icon{font-size:2.2em;line-height:1.2}
.badge .bname{font-weight:700;margin-top:4px}
.badge .bdesc{font-size:.8em;color:var(--fg-dim);margin-top:4px}
.badge.locked{opacity:.4;filter:grayscale(1)}
.badge.earned{border-color:#6b5a24;background:linear-gradient(#2b2716,#1d2027)}

/* ---- tables in their own scroll box, never the page ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9em}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:var(--surface);position:sticky;top:0;font-weight:600}
tr.current td{background:#18263a}
td.cell{text-align:center;padding:4px}
.cellbtn{min-width:64px;min-height:40px;padding:4px 8px;font-size:.85em}
.cellbtn.ok{background:#1f3a2a;color:var(--good);border-color:#2f6b45}
.cellbtn.defect{background:#3a1f22;color:var(--bad);border-color:#6b2f35}
.mark{display:block;font-size:.7em;color:var(--fg-dim);margin-top:2px}
.th-task{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--t);color:var(--card-ink);font-weight:800}

/* ---- supervisor list: one card per week ---- */
.week-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.week-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.week-card.current{border-color:var(--accent)}
.week-card.future{opacity:.55}
.week-card .field{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.week-card .field>span{font-size:.8em;color:var(--fg-dim)}
.pts-pill{font-weight:900;border-radius:8px;padding:2px 8px;background:var(--surface-hi)}
.pts-pill.pos{background:#1f3a2a}
.pts-pill.neg{background:#3a1f22}

/* ---- inbox ---- */
.note{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.note.unread{border-color:var(--accent);background:#18263a}
.note time{display:block;font-size:.75em;color:var(--fg-dim);margin-top:4px}

/* ---- login ---- */
.who-grid{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.who-grid button{font-weight:800;font-size:1.05em;padding:10px 18px;border:3px solid transparent}
.who-grid button.sel{border-color:#fff}
.pin{font-size:1.6em;letter-spacing:.5em;width:7em;text-align:center}

/* ---- rules ---- */
.rules ol,.rules ul{padding-left:1.3em}
.rules li{margin:4px 0}
.rules section{margin-bottom:8px}

footer{margin-top:40px;color:var(--fg-dim);font-size:.8em;text-align:center}

/* ---- Task Master list: one card per week, seven tap targets ---- */
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;margin-top:8px}
.tm-cell{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:76px;padding:8px 10px;
  border-radius:10px;border:1px solid var(--line);border-left:6px solid var(--t);background:var(--surface-hi);text-align:left
}
.tm-cell .tm-task{font-weight:800;font-size:.85em;text-transform:uppercase}
.tm-cell .tm-who{font-size:.8em;color:var(--fg-dim)}
.tm-cell.ok{background:#1f3a2a;color:var(--good)}
.tm-cell.defect{background:#3a1f22;color:var(--bad)}
.tm-cell:disabled{opacity:1;cursor:default}
.tm-current{border-color:var(--accent)}
.tm-future{opacity:.55}

/* ---- labelled form fields that wrap into columns (admin, bonus) ---- */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;align-items:end}
.fld{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0}
.fld>span{font-size:.8em;color:var(--fg-dim)}
.fld input:not([type=checkbox]):not([type=color]),.fld select{width:100%}
.checks{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.admin-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.admin-list .card{display:flex;flex-direction:column;gap:10px}

/* ---- checklist editor: one card per group, items stacked below its heading ---- */
.group-card{border-left:6px solid var(--t)}
.group-card .items{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.item-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border-radius:10px;background:var(--surface-hi)}
.item-row input{flex:1 1 140px;min-width:0}
.item-row .tools{display:flex;gap:4px}
.item-row .tools button{padding:6px 10px}

/* ---- bonus statement: one card per person ---- */
.statement{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.statement .card{display:flex;flex-direction:column;gap:6px}
.statement .total{font-size:1.5em;font-weight:900}

/* Phone: thumb-sized targets via min-height (not padding, so long labels do not
   blow up their row) and 16px inputs so iOS does not zoom in on focus. */
@media (max-width:600px){
  body{padding:0 12px 32px}
  button,.btn,.main-nav a,.menu-wrap summary,select{min-height:44px}
  input,select,textarea{font-size:16px}
  .hero{grid-template-columns:1fr;text-align:left}
  .hero .score{font-size:3em}
  .main-nav a{padding:8px 8px}
  .top .menu-wrap{margin-left:auto}
  .top .main-nav{order:3;flex-basis:100%;margin-left:0}
  .podium .p1{min-height:130px}
  .task-card h3{font-size:1.3em}
  .task-card .item{min-height:44px}
  .tm-grid{grid-template-columns:repeat(2,1fr)}
  .admin-list,.statement{grid-template-columns:1fr}
  .group-card .fields{grid-template-columns:1fr}
}