:root{
  --bg:#e6eaee; --surface:#f6f7f9; --surface-2:#dde3e9; --ink:#17243a; --ink-soft:#4b5a70;
  --line:#c3ccd6; --brass:#946520; --brass-soft:#ecdcc0; --moss:#2f6b43; --moss-soft:#d6e8da;
  --rust:#9c3b28; --rust-soft:#f1dcd5; --focus:#2b5fb4;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121a25; --surface:#1a2431; --surface-2:#223042; --ink:#e4e8ee; --ink-soft:#a3afbf;
    --line:#33445a; --brass:#d6a75a; --brass-soft:#3a3122; --moss:#79c08d; --moss-soft:#1f3527;
    --rust:#e08a74; --rust-soft:#3d2520; --focus:#8fb3f0; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121a25; --surface:#1a2431; --surface-2:#223042; --ink:#e4e8ee; --ink-soft:#a3afbf;
  --line:#33445a; --brass:#d6a75a; --brass-soft:#3a3122; --moss:#79c08d; --moss-soft:#1f3527;
  --rust:#e08a74; --rust-soft:#3d2520; --focus:#8fb3f0; color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Alegreya Sans","Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.5}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:28px 20px 64px}
h1,h2,h3{font-family:Alegreya,Georgia,serif;line-height:1.15;margin:0}
h1{font-size:clamp(2rem,5vw,2.9rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:1.6rem;font-weight:700}
h3{font-size:1.15rem;font-weight:700}
.lede{color:var(--ink-soft);max-width:62ch;margin:.5rem 0 0}
.topbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.me{display:flex;flex-wrap:wrap;gap:8px;align-items:center;white-space:nowrap;font-size:.95rem;color:var(--ink-soft)}
.me select{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.btn{text-decoration:none;white-space:nowrap;display:inline-block;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 14px;cursor:pointer}
.btn:hover{border-color:var(--brass)}
.btn.primary{background:var(--brass);border-color:var(--brass);color:#fff}
:root[data-theme="dark"] .btn.primary{color:#1a1206}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{color:#1a1206}}
.notice{background:var(--surface-2);border-left:3px solid var(--brass);padding:10px 14px;border-radius:4px;margin:0 0 18px;font-size:.95rem}
.notice[hidden]{display:none}

/* Next rendez-vous */
.next{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin-bottom:30px}
.next .lvl{grid-row:span 3;font-family:Alegreya,Georgia,serif;font-weight:800;font-size:4.2rem;line-height:.9;color:var(--brass);text-align:center}
.next .lvl small{display:block;font-family:"Alegreya Sans",sans-serif;font-size:.8rem;font-weight:500;color:var(--ink-soft);margin-top:4px}
.next .where{color:var(--ink-soft)}
.next a.open{justify-self:start;margin-top:4px}

/* The route rail */
.rail{list-style:none;margin:0;padding:0;position:relative}
.rail::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;width:2px;background:var(--line)}
.stop{position:relative;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:10px 0}
.stop .num{position:relative;z-index:1;width:64px;height:44px;display:grid;place-items:center;font-family:Alegreya,Georgia,serif;font-weight:800;font-size:1.45rem;background:var(--bg);border:2px solid var(--line);border-radius:22px;color:var(--ink-soft)}
.stop.done .num{background:var(--brass);border-color:var(--brass);color:var(--bg)}
.stop.is-next .num{border-color:var(--brass);color:var(--brass);box-shadow:0 0 0 4px var(--brass-soft)}
.stop a.title{text-decoration:none;display:block}
.stop a.title:hover h3{text-decoration:underline;text-decoration-color:var(--brass)}
.stop .meta{color:var(--ink-soft);font-size:.92rem}
.stop.done h3{color:var(--ink-soft)}
.dots{display:flex;gap:4px}
.dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line)}
.dot.ok{background:var(--moss);border-color:var(--moss)}
.dot.part{background:linear-gradient(90deg,var(--moss) 50%,transparent 50%);border-color:var(--moss)}
.tag{display:inline-block;font-family:"Alegreya Sans","Segoe UI",system-ui,sans-serif;font-weight:500;font-size:.78rem;padding:1px 7px;border-radius:10px;background:var(--surface-2);color:var(--ink-soft);margin-left:6px;vertical-align:2px}
.tag.warn{background:var(--rust-soft);color:var(--rust)}
.tag.good{background:var(--moss-soft);color:var(--moss)}

/* Detail */
.back{display:inline-block;margin-bottom:14px;color:var(--ink-soft);text-decoration:none}
.back:hover{color:var(--ink)}
.head{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:end;margin-bottom:22px}
.head .lvl{grid-row:span 2;font-family:Alegreya,Georgia,serif;font-weight:800;font-size:5rem;line-height:.85;color:var(--brass)}
.facts{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:26px}
.fact{flex:1 1 210px;background:var(--surface);padding:12px 14px}
.fact dt{font-size:.85rem;color:var(--ink-soft)}
.fact dd{margin:2px 0 0;font-weight:500}
.cols{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:820px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
ul.plain{margin:.5rem 0 0;padding-left:1.1rem}
ul.plain li{margin:.2rem 0}
.empty{color:var(--ink-soft);font-style:italic}
.gridwrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table.check{border-collapse:collapse;width:100%;min-width:520px}
table.check th,table.check td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center}
table.check th:first-child,table.check td:first-child{text-align:left;padding-left:12px}
table.check thead th{font-weight:700;font-size:.9rem;vertical-align:bottom}
table.check thead th.mine{color:var(--brass)}
table.check tbody tr:last-child td{border-bottom:none}
table.check tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:none}
.cell{width:30px;height:30px;border-radius:6px;border:1.5px solid var(--line);background:transparent;cursor:pointer;display:inline-grid;place-items:center;color:#fff;font-weight:700}
.cell.on{background:var(--moss);border-color:var(--moss)}
:root[data-theme="dark"] .cell.on{color:#0f1a12}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cell.on{color:#0f1a12}}
.cell:disabled{cursor:default;opacity:.7}
td.mine{background:var(--brass-soft)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
form.edit{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;margin-top:20px}
form.edit label{display:grid;gap:4px;font-size:.92rem;color:var(--ink-soft)}
form.edit input,form.edit textarea{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px;color:var(--ink)}
form.edit textarea{min-height:92px;resize:vertical}
form.edit .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.chk{display:flex!important;gap:8px;align-items:center;flex-direction:row}
.roster{display:grid;gap:10px;max-width:560px}
.roster .r{display:grid;grid-template-columns:2.5rem 1fr 1fr;gap:10px;align-items:center}
.roster input{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px}
.foot{margin-top:46px;color:var(--ink-soft);font-size:.9rem;max-width:70ch}
@media (max-width:560px){
  .stop{grid-template-columns:52px 1fr}
  .stop .num{width:52px;font-size:1.25rem}
  .rail::before{left:25px}
  .stop .dots{grid-column:2}
  .head .lvl{font-size:3.6rem}
  .next .lvl{font-size:3.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.tabs{display:flex;gap:6px;margin:18px 0 6px}
.tabs button{background:transparent;border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer;color:var(--ink-soft)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);border-color:var(--brass)}
.loginform{display:grid;gap:10px;max-width:420px;margin-top:10px}
.loginform label{display:grid;gap:4px;font-size:.92rem;color:var(--ink-soft)}
.loginform input,.loginform select,.roster input,.roster select{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px;color:var(--ink)}
.hint{font-size:.88rem;color:var(--ink-soft);margin:0}
.ready{background:var(--moss-soft);color:var(--moss);border-left:3px solid var(--moss);padding:10px 14px;border-radius:4px;margin:0 0 18px;font-weight:700}
.players{width:100%;border-collapse:collapse;min-width:620px}
.players th,.players td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.players input:not([type=checkbox]),.players select{min-width:110px;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px;color:var(--ink)}
.section{margin-top:30px}
.adminmark{font-size:.85rem;padding:3px 9px;border-radius:10px;background:var(--brass-soft);color:var(--brass);font-weight:700}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:640px;margin-top:22px}
.btn.pick{font-family:Alegreya,Georgia,serif;font-size:1.35rem;font-weight:700;padding:22px 12px;text-align:center;border-radius:10px}
.btn.pick:hover{border-color:var(--brass);color:var(--brass)}
.grouplist{list-style:none;margin:10px 0 18px;padding:0;display:grid;gap:12px}
.grouplist li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.grouplist a{text-decoration:none;display:block}
.grouplist a:hover h3{text-decoration:underline;text-decoration-color:var(--brass)}
.grouplist .meta{color:var(--ink-soft);font-size:.92rem}
.grouplist .actions a{display:inline-block}
details summary{cursor:pointer;list-style-position:outside}
details[open] summary{margin-bottom:10px}
details .meta{color:var(--ink-soft);font-size:.92rem}