/* =========================================================
   Components (Indigo Field). Area agents compose only from these.
   New shared components go at the end, in a block marked with the area's name.
   ========================================================= */

/* ---------- icons: one set, 1.6 stroke, sized to the text ---------- */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic.s{width:14px;height:14px}
.ic.l{width:22px;height:22px}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-btn);border:0;background:var(--btn-bg);color:var(--btn-fg);font:600 14px/1 var(--sans);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color var(--d-fast) ease,transform .1s ease,box-shadow var(--d-fast) ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn:focus-visible{box-shadow:var(--ring);border-radius:var(--r-btn)}
.btn .ic{width:16px;height:16px}
.btn.sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.btn.text{background:transparent;color:var(--ink);padding:0 10px}
.btn.kola{background:var(--kola);color:#fff;height:48px;padding:0 22px;font-size:15px;box-shadow:0 1px 2px rgba(5,10,32,.25),0 10px 22px -10px rgba(194,81,30,.55)}
.btn.on-band{background:transparent;color:var(--on-band);box-shadow:inset 0 0 0 1.5px rgba(245,240,229,.34)}
.btn.danger{background:var(--err);color:#fff}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.lg{height:48px;padding:0 20px;font-size:15px}
.btn.block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
.btn[aria-busy="true"]{pointer-events:none}
.btn.is-done{background:var(--ok);color:#fff}
@media (hover:hover){
  .btn:hover,.btn.is-hover{background:var(--btn-hi)}
  .btn.sec:hover,.btn.sec.is-hover{background:var(--cotton-2);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
  .btn.text:hover,.btn.text.is-hover{background:var(--cotton-2)}
  .btn.kola:hover,.btn.kola.is-hover{background:var(--kola-hi)}
  .btn.on-band:hover{background:rgba(245,240,229,.06);box-shadow:inset 0 0 0 1.5px rgba(245,240,229,.8)}
  .btn.danger:hover{background:color-mix(in srgb,var(--err) 88%,#000)}
}
.btn.is-hover.sec{background:var(--cotton-2);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
/* text link */
.tlink{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.2 var(--sans);color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);cursor:pointer;background:none;border:0;padding:0}
.tlink.sm{font-size:13px;text-underline-offset:4px}
.tlink .ic{width:14px;height:14px}
@media (hover:hover){.tlink:hover{text-decoration-color:currentColor}}
/* icon button */
.ibtn{width:36px;height:36px;border-radius:var(--r-btn);border:0;background:transparent;color:var(--ink-2);display:inline-grid;place-items:center;cursor:pointer;flex:none;transition:background-color var(--d-fast) ease}
.ibtn.boxed{background:var(--cotton-2)}
.ibtn:active{transform:scale(.96)}
@media (hover:hover){.ibtn:hover{background:var(--cotton-2);color:var(--ink)}}

/* ---------- form controls ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.label{font:600 13px/1.2 var(--sans);color:var(--ink-2)}
.input,.select,.textarea{width:100%;min-width:0;height:44px;border:0;border-radius:var(--r-btn);background:var(--card);color:var(--ink);padding:0 12px;font:500 15px/1.2 var(--sans);box-shadow:inset 0 0 0 1.5px var(--rule-2);transition:box-shadow var(--d-fast) ease}
.textarea{height:auto;min-height:104px;padding:11px 12px;line-height:1.5;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--ink-3);opacity:1}
.input:focus,.select:focus,.textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--in-500),0 0 0 3px color-mix(in srgb,var(--in-500) 25%,transparent)}
@media (hover:hover){.input:hover:not(:focus),.select:hover:not(:focus),.textarea:hover:not(:focus){box-shadow:inset 0 0 0 1.5px var(--ink-3)}}
.select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369739a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
.field-msg{font:500 12.5px/1.4 var(--sans);color:var(--ink-3)}
.field.err .input,.field.err .select,.field.err .textarea,.input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--err)}
.field.err .field-msg{color:var(--err)}
.field.ok .field-msg{color:var(--ok)}
.input-icon{position:relative}
.input-icon .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.input-icon .input{padding-left:38px}
/* radio / checkbox option rows (plain-language audiences, filters) */
.opts{display:flex;flex-direction:column;border-radius:var(--r-m);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.opt{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:start;padding:13px 14px;cursor:pointer;border-top:1px solid var(--rule)}
.opt:first-child{border-top:0}
.opt input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rule-2);background:var(--card);display:grid;place-items:center;cursor:pointer}
.opt input[type="checkbox"]{border-radius:5px}
.opt input:checked{box-shadow:inset 0 0 0 6px var(--btn-bg)}
.opt input[type="checkbox"]:checked{box-shadow:none;background:var(--btn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fffcf6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat}
.opt input:focus-visible{box-shadow:inset 0 0 0 1.5px var(--rule-2),var(--ring)}
.opt b{display:block;font:600 14.5px/1.35 var(--sans)}
.opt span{display:block;font:400 13px/1.4 var(--sans);color:var(--ink-3);margin-top:1px}
.opt .n{font:700 15px/1.3 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink-2);text-align:right}
.opt:has(input:checked){background:color-mix(in srgb,var(--in-50) 55%,var(--card))}
@media (hover:hover){.opt:hover{background:var(--cotton-2)}}
/* switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;font:500 14px/1.3 var(--sans);cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:11px;background:var(--rule-2);position:relative;cursor:pointer;transition:background-color var(--d-fast) ease;flex:none}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--d-fast) var(--e-out)}
.switch input:checked{background:var(--btn-bg)}
.switch input:checked::after{transform:translateX(16px);background:var(--btn-fg)}

/* ---------- segmented tabs (day tabs) ---------- */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--cotton-2);box-shadow:inset 0 0 0 1px var(--rule);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg>a,.seg>button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:0;border-radius:7px;background:none;color:var(--ink-2);font:600 13.5px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--d-fast) ease,color var(--d-fast) ease}
.seg>a small,.seg>button small{font:500 12px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink-3)}
.seg>[aria-selected="true"],.seg>[aria-current="page"],.seg>[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(14,25,64,.1),0 0 0 1px var(--rule)}
@media (hover:hover){.seg>a:hover:not([aria-selected="true"]):not([aria-current="page"]),.seg>button:hover:not([aria-selected="true"]):not([aria-pressed="true"]){color:var(--ink)}}
.seg.big>a,.seg.big>button{height:44px;padding:0 18px;font-size:15px}
/* underline tabs (inside a page) */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.tabs>a,.tabs>button{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;border:0;background:none;color:var(--ink-2);font:600 14px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.tabs>[aria-selected="true"],.tabs>[aria-current="page"]{color:var(--ink)}
.tabs>[aria-selected="true"]::after,.tabs>[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--ink) 0 14px,transparent 14px 16px,var(--ink) 16px)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-s);font:600 12px/1 var(--sans);white-space:nowrap;background:var(--cotton-2);color:var(--ink-2)}
.chip .ic{width:12px;height:12px}
.chip.changed{background:var(--changed-bg);color:var(--changed)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.err{background:var(--err-bg);color:var(--err)}
.chip.ink{background:var(--btn-bg);color:var(--btn-fg)}
.chip.line{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-2)}
.chip.stg{background:var(--st-bg,var(--cotton-2));color:var(--st-ink,var(--ink-2))}
.chip.live{background:var(--ok-bg);color:var(--ok)}
.chip.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* filter chips (toggle) */
.fchip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:17px;border:0;background:var(--card);color:var(--ink-2);font:600 13px/1 var(--sans);box-shadow:inset 0 0 0 1.5px var(--rule-2);cursor:pointer;white-space:nowrap;transition:background-color var(--d-fast) ease,color var(--d-fast) ease}
.fchip .ic{width:15px;height:15px}
.fchip[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:none}
@media (hover:hover){.fchip:hover:not([aria-pressed="true"]){box-shadow:inset 0 0 0 1.5px var(--ink-3);color:var(--ink)}}
.access-flags{display:inline-flex;gap:6px;align-items:center;color:var(--ink-3)}
.access-flags .ic{width:16px;height:16px}
/* count badge */
.count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--btn-bg);color:var(--btn-fg);font:700 11px/1 var(--sans);font-variant-numeric:tabular-nums}
.count.ink{background:var(--btn-bg);color:var(--btn-fg)}
/* on the indigo field, counts are cotton on indigo (kola stays the one page action) */
.top-band .count,.rail .count,.console-top .count{background:var(--on-band);color:var(--band-deep)}

/* ---------- the stamp (signature 3) ---------- */
.stamp{display:block;color:var(--stamp);mix-blend-mode:var(--stamp-blend);width:40px;height:40px}
.stamp.r1{transform:rotate(-7deg)}.stamp.r2{transform:rotate(5deg)}.stamp.r3{transform:rotate(-3deg)}.stamp.r4{transform:rotate(8deg)}.stamp.r5{transform:rotate(-10deg)}
.press{animation:press .22s var(--e-press) both, settle .24s steps(2,end) .22s both}
@keyframes press{0%{scale:1.18;opacity:0}60%{opacity:.7}100%{scale:1;opacity:.82}}
@keyframes settle{from{opacity:.82}to{opacity:1}}
.cell{width:48px;height:48px;display:grid;place-items:center;flex:none;position:relative}
.cell .stamp{width:40px;height:40px}
.cell .ring{width:38px;height:38px;border-radius:50%;border:1.5px dashed var(--rule-2);background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink-3);transition:border-color var(--d-fast) ease,color var(--d-fast) ease,background-color var(--d-fast) ease;padding:0}
.cell .ring .ic{width:13px;height:13px;opacity:0;transition:opacity var(--d-fast) ease}
.cell .ring:active{transform:scale(.96)}
.cell .ring:focus-visible{border-radius:50%}
@media (hover:hover){.cell .ring:hover{border-color:var(--stamp);border-style:solid;color:var(--stamp);background:color-mix(in srgb,var(--stamp) 10%,transparent)}.cell .ring:hover .ic{opacity:1}}
.cell .ring.is-hover{border-color:var(--stamp);border-style:solid;color:var(--stamp);background:color-mix(in srgb,var(--stamp) 10%,transparent)}
.cell .ring.is-hover .ic{opacity:1}
.cell .unpress{position:absolute;inset:0;border:0;background:none;border-radius:50%;cursor:pointer}
.split{position:relative;width:40px;height:40px}
.split .stamp{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.split .a{clip-path:inset(0 50% 0 0);transform:translate(-3px,-2px) rotate(-6deg)}
.split .b{clip-path:inset(0 0 0 50%);transform:translate(3px,3px) rotate(4deg)}
.cell.sm{width:40px;height:40px}
.cell.sm .stamp,.cell.sm .split{width:34px;height:34px}
.cell.sm .ring{width:32px;height:32px}
.credit{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center}
.credit .stamp{width:84px;height:84px}
.credit p{font:400 13px/1.5 var(--sans);color:var(--ink-3)}
.credit i{font:italic 600 15px/1 var(--serif);color:var(--ink)}

/* ---------- set rows (programme list, plan sheet) ---------- */
.srows{position:relative}
.srow{display:grid;grid-template-columns:var(--tm-w,104px) minmax(0,1fr) auto;align-items:center;min-height:76px;border-bottom:1px solid var(--rule);position:relative;background:var(--row-bg,transparent);transition:background-color var(--d-fast) ease}
.srow-tm{font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums lining-nums;font-variation-settings:"opsz" 48;font-size:var(--tm-size,34px);line-height:1;letter-spacing:-.02em;align-self:start;padding-top:18px}
.srow-tm sub{display:block;font:500 13px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;color:var(--ink-3);margin-top:7px;vertical-align:0}
.srow-tm .on{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--sans);letter-spacing:.02em;color:var(--ok);margin-top:8px}
.srow-tm .on::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.srow-info{padding:14px 12px 14px 0;min-width:0}
.srow-title{font:650 17px/1.3 var(--sans);letter-spacing:-.01em;text-decoration:none;color:inherit;display:block}
a.srow-title::after{content:"";position:absolute;inset:0}
.srow-meta{font:400 13.5px/1.4 var(--sans);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.srow-meta em{font:italic 500 14px/1 var(--serif)}
.srow-meta .dot{width:7px;height:7px;border-radius:2px;background:var(--st-ink,var(--ink-3));flex:none;opacity:.85}
.srow-blurb{font:400 13.5px/1.45 var(--sans);color:var(--ink-3);margin-top:4px;max-width:62ch}
.srow-note{display:inline-flex;gap:6px;align-items:center;margin-top:6px;font:600 12px/1.25 var(--sans);color:var(--changed)}
.srow-note s{color:var(--ink-3);font-weight:500}
.srow-note.leave{color:var(--stamp)}
.srow-note .ic{width:13px;height:13px}
.srow-end{display:flex;align-items:center;gap:8px;justify-self:end;position:relative;z-index:1}
.srow .cell{position:relative;z-index:1}
@media (hover:hover){.srow.is-link:hover,.srow.is-hover{--row-bg:color-mix(in srgb,var(--in-50) 55%,transparent)}}
.srow.is-hover{--row-bg:color-mix(in srgb,var(--in-50) 55%,transparent)}
.srow.is-selected{--row-bg:color-mix(in srgb,var(--in-50) 90%,transparent);box-shadow:inset 3px 0 0 -0px transparent}
.srow.is-selected .srow-title{color:var(--ink)}
.srow.is-changed{--row-bg:color-mix(in srgb,var(--changed) 7%,transparent)}
.srow.is-clash{--row-bg:color-mix(in srgb,var(--changed) 7%,transparent)}
.srow.is-past .srow-tm,.srow.is-past .srow-info{opacity:.5}
.srow.is-maybe .srow-tm,.srow.is-maybe .srow-info{opacity:.5}
.srow.compact{--tm-w:72px;--tm-size:20px;min-height:60px}
.srow.compact .srow-tm{padding-top:15px}
.srow.compact .srow-info{padding:11px 10px 11px 0}
.srow.compact .srow-title{font-size:15.5px}
.srows-group{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:22px 0 8px;border-bottom:1.5px solid var(--ink)}
.srows-group h3{font:700 20px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.srows-group span{font:500 12.5px/1 var(--sans);color:var(--ink-3)}
@media (max-width:760px){
  .srow{--tm-w:62px;--tm-size:22px;min-height:68px}
  .srow-tm{padding-top:16px}
  .srow-title{font-size:15.5px}
  .srow .cell{width:44px;height:44px}
  .srow .cell .stamp,.srow .split{width:36px;height:36px}
}

/* ---------- signature 2: the overlap resolver ---------- */
.resolver{margin:12px 0 12px var(--tm-w,104px);border-radius:var(--r-m);background:var(--raised);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--changed) 55%,transparent);padding:14px 16px;scroll-margin-top:96px}
.resolver-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.resolver-h b{font:650 15px/1.25 var(--sans);letter-spacing:-.01em}
.resolver-h span{font:600 13px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--changed);white-space:nowrap}
.tl{position:relative;height:60px;margin-bottom:8px}
.tl .bar{position:absolute;height:18px;border-radius:5px;font:600 11px/18px var(--sans);padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);background:var(--in-50);box-shadow:inset 0 0 0 1px var(--in-100);transform-origin:left center}
.tl .b1{top:0}.tl .b2{top:22px}
.tl .ov{position:absolute;top:-4px;height:48px;border-left:1.5px solid var(--changed);border-right:1.5px solid var(--changed);background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--changed) 34%,transparent) 4px 5.5px)}
.tl .ax{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font:500 12px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink-3)}
.resolver.draw .bar{animation:draw .26s var(--e-out) both}
.resolver.draw .b2{animation-delay:.08s}
.resolver.draw .ov{animation:fade .2s ease both .3s}
@keyframes draw{from{transform:scaleX(0)}}
.resolver p{font:400 13.5px/1.5 var(--sans);color:var(--ink-2);margin-bottom:12px}
.resolver .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.resolver .acts small{margin-left:auto;font:500 12px/1.3 var(--sans);color:var(--ink-3)}
.resolver.flash{animation:flash .32s ease-out both}
@keyframes flash{from{background-color:color-mix(in srgb,var(--changed) 10%,var(--raised))}to{background-color:var(--raised)}}
.resolver.in-sheet{margin:0;box-shadow:none;padding:0;background:none}
/* resolved line */
.sorted{display:flex;gap:12px;align-items:center;margin:12px 0 12px var(--tm-w,104px);padding:12px 14px;border-radius:var(--r-m);background:var(--stamp-tint)}
.sorted .stamp{width:34px;height:34px;flex:none}
.sorted b{display:block;font:700 18px/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.sorted span{font:500 13px/1.35 var(--sans);color:var(--ink-2)}
@media (max-width:760px){.resolver,.sorted{margin-left:0}.resolver .acts small{margin-left:0;flex-basis:100%}}

/* ---------- signature 1: the resting card ---------- */
.rest{position:relative;z-index:3;background:var(--card);color:var(--ink);border-radius:var(--r-m);box-shadow:var(--sh-rest);padding:18px 20px 16px;animation:restin var(--d-rest) var(--e-out) both .1s}
@keyframes restin{from{transform:translateY(10px);opacity:0}}
.rest-row1{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rest-lead{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--sans);color:var(--ink-2)}
.rest-lead .stamp{width:22px;height:22px}
.rest-time{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums}
.rest-time .now{font-size:46px;line-height:1;font-weight:800;letter-spacing:-.02em}
.rest-time .end{font:600 18px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink-2)}
.rest-time s{margin-left:auto;font:500 14px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink-3)}
.rest h3,.rest-title{margin-top:8px;font:650 17px/1.3 var(--sans);letter-spacing:-.01em}
.rest-title a{text-decoration:none}
@media (hover:hover){.rest-title a:hover{text-decoration:underline;text-underline-offset:3px}}
.rest-where{font:400 14px/1.4 var(--sans);color:var(--ink-2);margin-top:2px}
.rest-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center;margin-top:14px;padding:12px 12px 12px 14px;border-radius:var(--r-btn);background:var(--cotton-2)}
.rest-box p{font:600 14px/1.4 var(--sans);color:var(--ink);grid-column:1/-1}
.rest-box p small{display:block;font:500 12.5px/1.35 var(--sans);color:var(--ink-3);margin-top:2px}
.rest-box .why{min-width:0;font:500 12px/1.3 var(--sans);color:var(--ink-3)}
.rest-box.done{grid-template-columns:auto 1fr}
.rest-box.done p{grid-column:auto}
.rest-box.done .stamp{width:30px;height:30px}
.rest-box .again{grid-column:1/-1;justify-self:start;font-size:13px;color:var(--ink-2)}
@media (max-width:760px){.rest{padding:16px 16px 14px}.rest-time .now{font-size:40px}.rest-box{grid-template-columns:1fr}.rest-box .btn{justify-self:start}.rest-box.done{grid-template-columns:auto 1fr}}

/* ---------- change card (CHANGED, struck old time, reason, source) ---------- */
.chg{position:relative;background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh-card);padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
.chg-top{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chg-top .ago{margin-left:auto;font:500 12.5px/1 var(--sans);color:var(--ink-3)}
.chg-times{display:flex;align-items:baseline;gap:10px;margin-top:6px;font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums}
.chg-times .new{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.chg-times .new.changed{color:var(--changed)}
.chg-times .end{font:600 16px/1 var(--serif);color:var(--ink-2)}
.chg-times s{font:500 15px/1 var(--serif);color:var(--ink-3)}
.chg-title{font:650 16px/1.3 var(--sans);letter-spacing:-.01em;grid-column:1/-1}
.chg-title a{text-decoration:none}
a.chg-title::after,.chg-title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.chg-body{grid-column:1/-1;font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.chg-src{grid-column:1/-1;display:flex;gap:6px;align-items:center;font:500 12.5px/1.3 var(--sans);color:var(--ink-3);padding-top:10px;margin-top:4px;border-top:1px solid var(--rule)}
.chg-src .ic{width:14px;height:14px}
.chg-act{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;position:relative;z-index:1}
.chg.is-new{box-shadow:var(--sh-card),inset 0 0 0 1.5px color-mix(in srgb,var(--changed) 50%,transparent)}
.chg.flat{box-shadow:inset 0 0 0 1px var(--rule)}

/* ---------- cards + panels ---------- */
.card{background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh-card);padding:20px}
.card.raised{border-radius:var(--r-l);box-shadow:var(--sh-raised);padding:28px 32px}
.card.flat{box-shadow:inset 0 0 0 1px var(--rule)}
.card.tint{background:var(--cotton-2);box-shadow:inset 0 0 0 1px var(--rule)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-h h2,.card-h h3{font:700 20px/1.15 var(--serif);letter-spacing:-.01em}
.card-h .aside{font:500 13px/1.3 var(--sans);color:var(--ink-3)}
@media (max-width:760px){.card.raised{padding:18px 14px;border-radius:14px}}
/* key/value list */
.dl{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:0 20px}
.dl dt,.dl dd{padding:10px 0;border-top:1px solid var(--rule);font:400 14px/1.45 var(--sans)}
.dl dt{color:var(--ink-3);font-weight:500}
.dl dd{color:var(--ink)}
.dl .t-time{font-size:16px}
/* data table */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--rule);background:var(--card)}
.tbl{min-width:640px}
.tbl th{position:sticky;top:0;background:var(--card);text-align:left;font:600 12.5px/1.2 var(--sans);color:var(--ink-3);padding:12px 14px;border-bottom:1px solid var(--rule-2);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--rule);font:400 14px/1.4 var(--sans);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.tbl tbody tr{transition:background-color var(--d-fast) ease}
@media (hover:hover){.tbl tbody tr:hover{background:var(--cotton-2)}}
.tbl tr[aria-selected="true"]{background:color-mix(in srgb,var(--in-50) 80%,transparent)}
.tbl th[aria-sort]{cursor:pointer}
.tbl th[aria-sort] .ic{width:12px;height:12px;display:inline-block;vertical-align:-1px;margin-left:4px}
/* notice (inline, not an alert box) */
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-btn);background:var(--cotton-2);font:500 13.5px/1.45 var(--sans);color:var(--ink-2)}
.notice .ic{margin-top:1px;color:var(--ink-3)}
.notice.changed{background:var(--changed-bg);color:var(--ink)}
.notice.changed .ic{color:var(--changed)}
.notice.ok{background:var(--ok-bg);color:var(--ink)}
.notice.ok .ic{color:var(--ok)}
.notice.err{background:var(--err-bg);color:var(--ink)}
.notice.err .ic{color:var(--err)}
.held{display:flex;gap:8px;align-items:center;font:600 13px/1.35 var(--sans);color:var(--ok)}
.held .ic{width:15px;height:15px}
/* meter (seen / sent) */
.meter{height:6px;border-radius:3px;background:var(--cotton-3);overflow:hidden}
.meter i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .4s var(--e-out)}
.meter.ok i{background:var(--ok)}

/* ---------- page head ---------- */
.ph{padding:44px 0 28px}
.ph .cut{color:var(--ink);margin-bottom:18px}
.ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ph h1{font:800 44px/1 var(--serif);font-variation-settings:"opsz" 60;letter-spacing:-.03em}
.ph .lede{margin-top:10px}
.ph-meta{font:500 13px/1.45 var(--sans);color:var(--ink-3);text-align:right}
.ph-meta b{display:block;font:700 18px/1.15 var(--serif);color:var(--ink);letter-spacing:-.01em}
.ph-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ph .back{display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;font:600 13px/1 var(--sans);color:var(--ink-2);text-decoration:none}
.ph .back .ic{width:14px;height:14px;transform:rotate(180deg)}
@media (hover:hover){.ph .back:hover{color:var(--ink)}}
.ph.compact{padding:28px 0 20px}
.ph.compact h1{font-size:34px}
@media (max-width:760px){.ph{padding:24px 0 18px}.ph h1,.ph.compact h1{font-size:34px}.ph-meta{text-align:left}}
/* section head */
.shead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 24px;margin-bottom:20px}
.shead .cut{grid-column:1/-1;color:var(--ink);margin-bottom:6px}
.shead h2{font:700 26px/1.1 var(--serif);letter-spacing:-.015em}
.shead p{color:var(--ink-2);max-width:56ch;margin-top:8px}
.shead .aside{font:500 13px/1.4 var(--sans);color:var(--ink-3);text-align:right}
@media (max-width:760px){.shead{grid-template-columns:1fr}.shead .aside{text-align:left}}

/* ---------- empty state ---------- */
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:48px 24px;border-radius:var(--r-m);background:var(--cotton-2);box-shadow:inset 0 0 0 1px var(--rule)}
.empty .ring-mark{width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--rule-2);display:grid;place-items:center;color:var(--ink-3);margin-bottom:4px}
.empty .ring-mark .ic{width:22px;height:22px}
.empty h3{font:700 20px/1.2 var(--serif);letter-spacing:-.01em}
.empty p{font:400 14px/1.5 var(--sans);color:var(--ink-2);max-width:40ch}
.empty .btn,.empty .tlink{margin-top:6px}

/* ---------- avatars with role stripe ---------- */
.av{--av:36px;position:relative;width:var(--av);height:var(--av);border-radius:50%;display:inline-grid;place-items:center;flex:none;background:var(--in-50);color:var(--ink);font:700 calc(var(--av) * .36)/1 var(--sans);letter-spacing:.01em;box-shadow:inset 0 0 0 1px var(--rule)}
.av::after{content:"";position:absolute;left:50%;bottom:-3px;width:calc(var(--av) * .5);height:3px;border-radius:2px;transform:translateX(-50%);background:var(--role-c,var(--ink-3));box-shadow:0 0 0 2px var(--av-ring,var(--cotton))}
.av[data-role="attendee"]{--role-c:var(--role-attendee)}
.av[data-role="performer"]{--role-c:var(--role-performer)}
.av[data-role="trader"]{--role-c:var(--role-trader)}
.av[data-role="volunteer"]{--role-c:var(--role-volunteer)}
.av[data-role="organiser"],.av[data-role="crew"]{--role-c:var(--role-organiser)}
.av.sm{--av:28px}
.av.lg{--av:48px}
.av.xl{--av:64px}
.av-who{display:flex;align-items:center;gap:10px;min-width:0}
.av-who b{display:block;color:var(--ink);font:600 14px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-who span:not(.av){display:block;font:400 12.5px/1.3 var(--sans);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-tag{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--sans);color:var(--ink-2)}
.role-tag::before{content:"";width:10px;height:3px;border-radius:2px;background:var(--role-c,var(--ink-3))}
.role-tag[data-role="attendee"]{--role-c:var(--role-attendee)}.role-tag[data-role="performer"]{--role-c:var(--role-performer)}.role-tag[data-role="trader"]{--role-c:var(--role-trader)}.role-tag[data-role="volunteer"]{--role-c:var(--role-volunteer)}.role-tag[data-role="organiser"],.role-tag[data-role="crew"]{--role-c:var(--role-organiser)}

/* ---------- menu (popover) ---------- */
.menu{position:fixed;z-index:var(--z-menu);min-width:248px;max-width:min(320px,calc(100vw - 24px));background:var(--card);color:var(--ink);border-radius:var(--r-m);box-shadow:var(--sh-pop),0 0 0 1px var(--rule);padding:6px;transform-origin:top right;animation:menuin .16s var(--e-out) both}
@keyframes menuin{from{opacity:0;transform:scale(.96) translateY(-4px)}}
.menu-h{padding:10px 10px 12px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.menu-sec{padding:8px 10px 4px;font:600 11px/1.3 var(--sans);letter-spacing:.04em;color:var(--ink-3)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:var(--r-btn);background:none;color:var(--ink);font:500 14px/1.3 var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.menu-item .ic{color:var(--ink-3)}
.menu-item small{margin-left:auto;font:500 12px/1 var(--sans);color:var(--ink-3)}
.menu-item[aria-checked="true"]{font-weight:650}
.menu-item[aria-checked="true"] small{color:var(--ink-2)}
.menu-item:focus-visible{box-shadow:none;background:var(--cotton-2)}
@media (hover:hover){.menu-item:hover{background:var(--cotton-2)}}
.menu-item.is-hover{background:var(--cotton-2)}
.menu hr{border:0;height:1px;background:var(--rule);margin:6px 0}

/* ---------- toast ---------- */
.toasts{position:fixed;z-index:var(--z-toast);left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;width:min(440px,calc(100vw - 24px));pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px 12px 16px;border-radius:var(--r-m);background:var(--band);color:var(--on-band);box-shadow:var(--sh-rest);font:500 14px/1.4 var(--sans);pointer-events:auto;animation:toastin .22s var(--e-out) both}
.toast.out{animation:toastout .18s ease both}
@keyframes toastin{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes toastout{to{opacity:0;transform:translateY(6px)}}
.toast .stamp{width:26px;height:26px;color:#e9a07f;mix-blend-mode:normal}
.toast .ic{color:var(--on-band-2)}
.toast p{flex:1;min-width:0}
.toast .tlink{color:var(--on-band);font-size:14px;white-space:nowrap}
:root[data-theme="dark"] .toast{background:#24316a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .toast{background:#24316a}}
.toast.static{animation:none;position:relative}
@media (max-width:760px){.toasts{bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom))}}

/* ---------- bottom sheet / dialog ---------- */
.scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:rgba(6,11,32,.5);opacity:0;pointer-events:none;transition:opacity var(--d-sheet) ease}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:var(--z-sheet);left:50%;bottom:24px;width:min(var(--sheet-w,460px),calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;background:var(--card);color:var(--ink);border-radius:var(--r-l);box-shadow:var(--sh-rest);transform:translate(-50%,calc(100% + 40px));transition:transform var(--d-sheet) var(--e-out),visibility 0s linear var(--d-sheet);visibility:hidden}
.sheet.on{transform:translate(-50%,0);visibility:visible;transition:transform var(--d-sheet) var(--e-out)}
.sheet-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px 0}
.sheet-h .lead{font:600 13px/1.2 var(--sans);color:var(--ink-2)}
.sheet-x{width:34px;height:34px;border-radius:var(--r-btn);border:0;background:var(--cotton-2);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.sheet-x .ic{width:16px;height:16px}
.sheet-b{padding:8px 22px 22px}
.sheet-b>.h-2:first-child{margin-bottom:6px}
.sheet.static{position:relative;left:auto;bottom:auto;transform:none;visibility:visible;margin:0}
.grabber{display:none}
.qty{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.qty b{display:block;font:650 15px/1.3 var(--sans)}
.qty span{font:500 13px/1.35 var(--sans);color:var(--ink-3)}
.step{display:inline-flex;align-items:center;border-radius:var(--r-btn);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.step button{width:38px;height:38px;border:0;background:none;cursor:pointer;font:600 18px/1 var(--sans);color:var(--ink);border-radius:var(--r-btn)}
.step button[disabled]{color:var(--ink-3);opacity:.5;cursor:not-allowed}
.step output{min-width:28px;text-align:center;font:700 16px/1 var(--serif);font-variant-numeric:tabular-nums}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 18px}
.total span{font:500 13px/1.35 var(--sans);color:var(--ink-2)}
.price{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-size:40px;line-height:1;font-weight:800;letter-spacing:-.03em;text-align:right}
.price small{display:block;font:500 12px/1.2 var(--sans);letter-spacing:0;color:var(--ink-3);margin-top:3px}
.total .price{font-size:34px}
@media (max-width:760px){
  .sheet{bottom:0;width:100vw;border-radius:18px 18px 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom)}
  .sheet.static{width:auto;border-radius:18px}
  .sheet-b{padding:10px 16px 20px}
  .sheet-h{padding:10px 16px 0}
  .grabber{display:block;width:36px;height:4px;border-radius:2px;background:var(--rule-2);margin:8px auto 0}
}

/* ---------- reach card (who a change reaches) ---------- */
.reach{background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh-card);padding:18px 20px}
.reach-n{display:flex;align-items:baseline;gap:10px}
.reach-n b{font:800 44px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em}
.reach-n span{font:500 14px/1.35 var(--sans);color:var(--ink-2)}
.reach ul{margin-top:12px;border-top:1px solid var(--rule)}
.reach li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rule);font:500 14px/1.35 var(--sans);color:var(--ink-2)}
.reach li b{font:700 16px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.reach .warn{margin-top:12px}
.reach .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* ---------- strip lanes (organiser programme: Strip Loom in indigo) ---------- */
.st-main{--st-bg:var(--t-main);--st-ink:var(--t-main-ink)}
.st-lane{--st-bg:var(--t-lane);--st-ink:var(--t-lane-ink)}
.st-griot{--st-bg:var(--t-griot);--st-ink:var(--t-griot-ink)}
.st-family{--st-bg:var(--t-family);--st-ink:var(--t-family-ink)}
.st-film{--st-bg:var(--t-film);--st-ink:var(--t-film-ink)}
.st-makers{--st-bg:var(--t-makers);--st-ink:var(--t-makers-ink)}
.loom{--names-w:168px;position:relative;border-radius:var(--r-m);background:var(--card);box-shadow:var(--sh-card);overflow:hidden}
.loom-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.loom-in{min-width:980px;position:relative}
.loom-ruler{display:grid;grid-template-columns:var(--names-w) 1fr;border-bottom:1px solid var(--rule)}
.loom-ruler .ticks{position:relative;height:32px}
.loom-ruler .ticks span{position:absolute;top:10px;transform:translateX(-50%);font:600 12px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink-3)}
.loom-ruler .ticks span.cf{color:var(--err)}
.lane-row{display:grid;grid-template-columns:var(--names-w) 1fr;min-height:64px}
.lane-row+.lane-row{box-shadow:0 -2px 0 0 var(--card)}
.lane-name{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 14px;background:var(--card);border-right:1px solid var(--rule);position:sticky;left:0;z-index:2}
.lane-name b{display:flex;align-items:center;gap:8px;font:650 13.5px/1.2 var(--sans)}
.lane-name b i{width:10px;height:10px;border-radius:3px;background:var(--st-ink)}
.lane-name span{font:400 12px/1.3 var(--sans);color:var(--ink-3)}
.lane{position:relative;background:var(--st-bg);background-image:repeating-linear-gradient(90deg,transparent 0 calc(var(--hour,10%) - 1px),color-mix(in srgb,var(--st-ink) 12%,transparent) calc(var(--hour,10%) - 1px) var(--hour,10%))}
.lane .after{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--err) 16%,transparent) 5px 6.5px)}
.blk{position:absolute;top:8px;bottom:8px;border-radius:6px;background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(14,25,64,.12),inset 3px 0 0 var(--st-ink);padding:6px 8px 6px 11px;overflow:hidden;cursor:grab;display:flex;flex-direction:column;justify-content:center;gap:2px;transition:box-shadow var(--d-fast) ease;touch-action:none}
.blk b{font:650 12.5px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk .tm{font:600 11.5px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink-3);white-space:nowrap}
.blk.is-plan::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--stamp)}
.blk.is-moved{box-shadow:0 0 0 1.5px var(--changed),0 6px 14px -6px rgba(14,25,64,.35);background:color-mix(in srgb,var(--changed-bg) 70%,var(--card))}
.blk.is-moved .tm{color:var(--changed)}
.blk.is-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--st-ink);opacity:.35;border-style:dashed}
.blk.is-drag{cursor:grabbing;box-shadow:0 0 0 1.5px var(--ink),0 14px 28px -10px rgba(14,25,64,.45);z-index:3}
.blk:focus-visible{box-shadow:var(--ring),inset 3px 0 0 var(--st-ink)}
@media (hover:hover){.blk:hover{box-shadow:0 2px 6px rgba(14,25,64,.18),inset 3px 0 0 var(--st-ink)}}
.loom .now{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid var(--kola);z-index:3;pointer-events:none}
.loom .now em{position:absolute;top:6px;left:4px;font:700 11px/1 var(--serif);font-style:normal;font-variant-numeric:tabular-nums;color:var(--kola);background:var(--card);padding:2px 3px;border-radius:3px}
/* seam: the cut join between lanes */
.lane-row .lane::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--card) 0 64px,transparent 64px 66px,var(--card) 66px);opacity:.0}

/* =========================================================
   Shells
   ========================================================= */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--card);color:var(--ink);padding:10px 14px;border-radius:var(--r-btn);box-shadow:var(--sh-pop);font:600 14px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}
.view{outline:none;display:block}
/* the wordmark */
.mark{display:block;height:30px;width:auto;color:var(--on-band)}
.mark-link{display:inline-flex;border-radius:var(--r-s)}

/* ---- attendee + hub top bar ---- */
.top-band{background:var(--band);color:var(--on-band);position:relative;z-index:var(--z-top)}
.top{display:flex;align-items:center;gap:28px;height:var(--top-h)}
.top-nav{display:flex;gap:2px;margin-left:auto}
.top-nav a{position:relative;display:inline-flex;align-items:center;gap:7px;font:500 14px/1 var(--sans);color:var(--on-band-2);text-decoration:none;padding:10px 12px;border-radius:var(--r-btn)}
.top-nav a .count{position:relative;top:-1px}
@media (hover:hover){.top-nav a:hover{color:var(--on-band);background:rgba(245,240,229,.07)}}
.top-nav a[aria-current="page"]{color:var(--on-band)}
.top-nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1.5px;background:linear-gradient(90deg,currentColor 0 10px,transparent 10px 12px,currentColor 12px)}
.top .plan-top{height:38px;padding:0 15px}
.top .ctx{font:500 13px/1.2 var(--sans);color:var(--on-band-2);padding-left:16px;border-left:1px solid var(--band-line)}
.top .ctx b{display:block;color:var(--on-band);font-weight:600}
.acct{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 4px;border-radius:22px;border:0;background:transparent;color:var(--on-band);cursor:pointer}
.acct .av{--av:32px;--av-ring:var(--band);background:rgba(245,240,229,.12);color:var(--on-band);box-shadow:inset 0 0 0 1px rgba(245,240,229,.2)}
.acct .ic{width:14px;height:14px;color:var(--on-band-2)}
@media (hover:hover){.acct:hover{background:rgba(245,240,229,.07)}}
.signin-link{font:600 14px/1 var(--sans);color:var(--on-band);text-decoration:none;padding:10px 12px;border-radius:var(--r-btn)}
@media (hover:hover){.signin-link:hover{background:rgba(245,240,229,.07)}}
/* attendee footer */
.foot-band{background:var(--band-deep);color:var(--on-band-2);padding:64px 0 40px}
.foot-band .mark{height:44px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}
.fgrid h4{font:650 13px/1.2 var(--sans);color:var(--on-band);margin-bottom:12px}
.fgrid p,.fgrid a{font:400 14px/1.7 var(--sans);color:var(--on-band-2);text-decoration:none;display:block}
@media (hover:hover){.fgrid a:hover{color:var(--on-band)}}
.fgrid .notes p{font-size:13px;line-height:1.55;margin-bottom:10px}
.fgrid .notes i{font:italic 600 14px/1 var(--serif);color:var(--on-band)}
.foot-band .cut{color:var(--on-band);opacity:.35;margin-top:48px}
.legal{display:flex;justify-content:space-between;gap:16px;margin-top:18px;font:500 12px/1.4 var(--sans);color:rgba(188,196,222,.72)}
.foot-slim{padding:28px 0 36px;font:500 12.5px/1.4 var(--sans);color:var(--ink-3)}
.foot-slim .cut{color:var(--ink);opacity:.18;margin-bottom:16px}
.foot-slim .spread{flex-wrap:wrap}

/* ---- bottom tab bar (phone) ---- */
.tabbar{display:none}
@media (max-width:760px){
  .top{gap:10px}
  .mark{height:24px}
  .top-nav,.top .plan-top,.top .ctx{display:none}
  .top .acct,.top .signin-link{margin-left:auto}
  .tabbar{display:grid;grid-template-columns:repeat(var(--tabs,5),minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tab);height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 -1px 0 var(--rule)}
  .shell-attendee,.shell-hub{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
  .fgrid{grid-template-columns:1fr;gap:28px}
  .legal{flex-direction:column}
}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:var(--ink-3);font:600 10.5px/1 var(--sans);letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.tabbar a .ic{width:22px;height:22px}
.tabbar a[aria-current="page"]{color:var(--ink)}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;width:28px;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,currentColor 0 12px,transparent 12px 14px,currentColor 14px)}
.tabbar a .count{position:absolute;top:7px;left:calc(50% + 6px);min-width:16px;height:16px;font-size:10px}
.tabbar.static{display:grid;grid-template-columns:repeat(var(--tabs,5),minmax(0,1fr));position:relative;height:64px;background:var(--card);box-shadow:0 -1px 0 var(--rule);border-radius:0 0 var(--r-m) var(--r-m)}
@media (min-width:1101px){.fgrid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
@media (max-width:1100px) and (min-width:761px){.fgrid{grid-template-columns:1fr 1fr}}

/* ---- console: left rail on the indigo field ---- */
.shell-console{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--band);color:var(--on-band);padding:22px 14px 18px;overflow-y:auto}
.rail .mark{height:24px;margin:2px 8px 0}
.rail-team{margin:18px 8px 18px;padding-bottom:16px;border-bottom:1px solid var(--band-line);font:500 12.5px/1.35 var(--sans);color:var(--on-band-2)}
.rail-team b{display:block;font:650 14px/1.3 var(--sans);color:var(--on-band)}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-nav a{position:relative;display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;border-radius:var(--r-btn);color:var(--on-band-2);text-decoration:none;font:550 14px/1 var(--sans)}
.rail-nav a .ic{width:18px;height:18px}
.rail-nav a .count{margin-left:auto}
.rail-nav a .count.quiet{background:rgba(245,240,229,.14);color:var(--on-band)}
@media (hover:hover){.rail-nav a:hover{background:rgba(245,240,229,.07);color:var(--on-band)}}
.rail-nav a[aria-current="page"]{background:rgba(245,240,229,.1);color:var(--on-band)}
.rail-nav a[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:3px;border-radius:0 2px 2px 0;background:var(--on-band)}
.rail-foot{margin-top:auto;padding:16px 8px 0;border-top:1px solid var(--band-line);display:flex;flex-direction:column;gap:12px}
.clock{display:flex;align-items:baseline;gap:8px}
.clock b{font:800 30px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;color:var(--on-band)}
.clock span{font:500 12.5px/1.3 var(--sans);color:var(--on-band-2)}
.licence{font:500 11.5px/1.45 var(--sans);color:rgba(188,196,222,.75)}
.rail-foot .acct{align-self:stretch;justify-content:flex-start;padding:4px 8px 4px 2px;border-radius:var(--r-btn);height:auto;text-align:left}
.rail-foot .acct .av-who b{color:var(--on-band)}
.rail-foot .acct .av-who span{color:var(--on-band-2)}
.rail-foot .acct>.ic{margin-left:auto}
.console-main{min-width:0;display:flex;flex-direction:column}
.console-top{display:none}
.console-body{flex:1;min-width:0}
.console-body .wrap{--max:1240px}
.theme-btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:var(--r-btn);border:0;background:rgba(245,240,229,.08);color:var(--on-band-2);font:550 12.5px/1 var(--sans);cursor:pointer;align-self:flex-start}
.theme-btn .ic{width:15px;height:15px}
@media (hover:hover){.theme-btn:hover{color:var(--on-band);background:rgba(245,240,229,.14)}}
@media (max-width:1100px){.shell-console{--rail-w:216px}}
@media (max-width:860px){
  .shell-console{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .console-top{display:block;position:sticky;top:0;z-index:var(--z-top);background:var(--band);color:var(--on-band)}
  .console-top .bar{display:flex;align-items:center;gap:12px;height:56px}
  .console-top .mark{height:22px}
  .console-top .clock{margin-left:auto}
  .console-top .clock b{font-size:20px}
  .console-top .clock span{display:none}
  .console-top .acct{height:36px}
  .console-top .acct .av{--av:30px}
  .console-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 var(--gut) 10px;margin:0 calc(var(--gut) * -1)}
  .console-tabs::-webkit-scrollbar{display:none}
  .console-tabs a{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:17px;color:var(--on-band-2);text-decoration:none;font:600 13px/1 var(--sans);white-space:nowrap}
  .console-tabs a .ic{width:15px;height:15px}
  .console-tabs a[aria-current="page"]{background:var(--on-band);color:var(--band)}
}

/* ---- bare shell (sign-in) ---- */
.shell-bare{min-height:100vh}

/* ---- role gate + not found ---- */
.gate{max-width:560px;margin:72px auto;padding:0 var(--gut)}
.gate .card{padding:28px}
.gate h1{font:800 34px/1.05 var(--serif);letter-spacing:-.025em;margin:14px 0 10px}
.gate p{color:var(--ink-2)}
.gate .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* one-tap role cards (sign-in, role menu, gate) */
.roles{display:flex;flex-direction:column;gap:8px}
.role-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;padding:12px 14px;border:0;border-radius:var(--r-m);background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule);text-align:left;cursor:pointer;text-decoration:none;transition:box-shadow var(--d-fast) ease,background-color var(--d-fast) ease}
.role-card b{display:block;font:650 15px/1.3 var(--sans);color:var(--ink)}
.role-card span:not(.av){display:block;font:400 13px/1.35 var(--sans);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role-card>.ic{color:var(--ink-3);transition:transform var(--d-fast) ease}
.role-card:active{transform:scale(.99)}
.role-card[aria-current="true"]{box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover){.role-card:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3);background:color-mix(in srgb,var(--cotton-2) 50%,var(--card))}.role-card:hover>.ic{transform:translateX(2px);color:var(--ink)}}

/* static variants, for the component sheet and for embedding inside views */
.menu.static,.toast.static{position:relative;animation:none;z-index:auto}
.rail.static{position:relative;height:auto;min-height:520px;border-radius:var(--r-m)}