/* ===== Houghton 2026 - Metro / Windows Phone UI ===== */
:root{
  --bg:#141414;
  --bg2:#1e1e1e;
  --ink:#ffffff;
  --dim:#a0a0a0;
  --dimmer:#6d6d6d;
  --accent:#f0a30a;      /* amber */
  --accent-ink:#141414;
  --clash:#e51400;
  --line:#2a2a2a;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
body{
  font-family:"Segoe UI","Segoe UI Historic","Helvetica Neue",-apple-system,system-ui,"Roboto",sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--accent);color:var(--accent-ink);}

/* ---- Panorama header ---- */
.panorama{padding:calc(var(--safe-t) + 18px) 0 0 0;}
.suptitle{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  padding:0 20px;font-weight:600;}
.app-title{font-size:46px;line-height:.98;font-weight:300;padding:2px 20px 6px;
  letter-spacing:-.01em;white-space:nowrap;}
.app-title b{font-weight:600;}

/* ---- Pivot tabs ---- */
.pivot{display:flex;gap:22px;padding:6px 20px 2px;overflow-x:auto;scrollbar-width:none;}
.pivot::-webkit-scrollbar{display:none;}
.pivot button{font-size:26px;font-weight:300;color:var(--dimmer);padding:4px 0 8px;
  white-space:nowrap;transition:color .15s;text-transform:lowercase;}
.pivot button.on{color:var(--ink);}

/* ---- Day tabs ---- */
.daytabs{display:flex;gap:0;padding:10px 14px 4px;}
.daytabs button{flex:1;padding:9px 2px 10px;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);border-bottom:3px solid var(--line);}
.daytabs button.on{color:var(--ink);border-bottom-color:var(--accent);}
.daytabs .dnum{display:block;font-size:20px;font-weight:300;letter-spacing:0;margin-top:2px;color:inherit;}

/* ---- Toolbar (filter/search) ---- */
.toolbar{display:flex;align-items:center;gap:10px;padding:12px 20px 4px;flex-wrap:wrap;}
.chip{font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border:2px solid var(--line);color:var(--dim);}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
/* segmented toggle (stage | time) */
.seg{display:flex;border:2px solid var(--line);}
.seg button{padding:7px 13px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.seg button + button{border-left:2px solid var(--line);}
.seg button.on{background:var(--accent);color:var(--accent-ink);}
.search{flex:1;display:flex;align-items:center;border:2px solid var(--line);}
.search input{flex:1;background:none;border:none;color:var(--ink);font-size:15px;padding:8px 10px;outline:none;}
.search input::placeholder{color:var(--dimmer);}
.search .x{padding:0 12px;color:var(--dim);font-size:18px;}

/* ---- Schedule ---- */
.view{display:none;padding-bottom:calc(40px + var(--safe-b));}
.view.on{display:block;animation:swin .25s ease;}
@keyframes swin{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}

.stagehdr{display:flex;align-items:baseline;gap:10px;padding:22px 20px 6px;}
.stagehdr .sq{width:15px;height:15px;flex:none;align-self:center;}
.stagehdr h2{font-size:24px;font-weight:300;margin:0;text-transform:lowercase;letter-spacing:.01em;}
.stagehdr .cnt{font-size:12px;color:var(--dimmer);margin-left:auto;padding-right:2px;}

/* time-grouped headers */
.timehdr{padding:20px 20px 4px;font-size:20px;font-weight:300;color:var(--accent);text-transform:lowercase;}

.act{position:relative;display:flex;align-items:stretch;gap:0;margin:0 14px 6px;background:var(--bg2);
  text-align:left;width:calc(100% - 28px);
  border-left:5px solid var(--stg,#647687);transition:transform .08s ease;}
.act:active{transform:scale(.975);}
.act .tm{flex:none;width:96px;padding:12px 10px 12px 14px;border-right:1px solid var(--line);}
.act .tm .s{font-size:19px;font-weight:300;line-height:1.05;}
.act .tm .e{font-size:12px;color:var(--dimmer);}
.act .bd{flex:1;padding:11px 12px;min-width:0;}
.act .nm{font-size:17px;font-weight:600;line-height:1.12;word-wrap:break-word;}
.act .meta{font-size:12px;color:var(--dim);margin-top:3px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.act .stg{color:var(--stg,#8aa);}
.act .kind{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);border:1px solid var(--line);padding:1px 5px;}
.act .pick{flex:none;width:52px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--dimmer);}
.act.on{background:var(--accent);border-left-color:#fff;}
.act.on .tm{border-right-color:rgba(0,0,0,.25);}
.act.on .nm,.act.on .tm .s{color:var(--accent-ink);}
.act.on .meta,.act.on .stg,.act.on .tm .e{color:rgba(20,20,20,.72);}
.act.on .kind{color:rgba(20,20,20,.7);border-color:rgba(20,20,20,.3);}
.act.on .pick{color:var(--accent-ink);}

/* friend chips on an act */
.fchips{display:flex;gap:4px;flex-wrap:wrap;}
.fchip{font-size:10px;font-weight:700;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#fff;}
.act.on .fchip{outline:1px solid rgba(20,20,20,.25);}

/* clash marker */
.act.clash .tm{position:relative;}
.act.clash .tm::after{content:"";position:absolute;top:6px;right:5px;width:8px;height:8px;background:var(--clash);}
.act.on.clash .tm::after{background:#141414;}

/* ---- My plan ---- */
.emptymsg{padding:40px 24px;color:var(--dimmer);font-size:16px;font-weight:300;line-height:1.5;}
.planday{padding:24px 20px 4px;font-size:30px;font-weight:300;text-transform:lowercase;}
.clashbanner{margin:8px 14px;padding:10px 12px;background:var(--clash);color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;}

/* ---- Friends ---- */
.card{margin:14px;padding:16px;background:var(--bg2);}
.card h3{margin:0 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;}
/* de-emphasised aside card (sharing, outside the hitsquad) */
.card.aside{margin:28px 14px 0;background:transparent;border:1px solid var(--line);padding:14px;}
.card.aside h3{color:var(--dim);}
.card.aside .tiny{font-size:12px;color:var(--dimmer);line-height:1.5;margin:0 0 12px;}
.card.aside .mbtn{font-size:11px;padding:9px 12px;}
.me-name{display:flex;align-items:center;gap:10px;}
.me-name .dot{width:22px;height:22px;flex:none;}
.me-name input{flex:1;background:none;border:none;border-bottom:2px solid var(--line);color:var(--ink);
  font-size:22px;font-weight:300;padding:4px 0;outline:none;}
.btnrow{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.mbtn{padding:11px 16px;border:2px solid var(--line);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.mbtn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.mbtn:active{transform:scale(.97);}

.friend{display:flex;align-items:center;gap:12px;margin:0 14px 6px;padding:13px 14px;background:var(--bg2);}
.friend .dot{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;}
.friend .fi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.friend .fi .fn{font-size:17px;font-weight:600;}
.friend .fi .fc{font-size:12px;color:var(--dim);}
.friend .eye{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:6px 8px;border:2px solid var(--line);}
.friend .eye.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);}
.friend .del{color:var(--dimmer);font-size:20px;padding:4px 6px;}

/* together list */
.together .act .fchips{margin-top:2px;}

/* ---- Modal ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;z-index:50;
  align-items:flex-end;}
.scrim.on{display:flex;}
.sheet{width:100%;max-height:92vh;overflow-y:auto;background:var(--bg);border-top:3px solid var(--accent);
  padding:20px 20px calc(24px + var(--safe-b));animation:up .22s ease;}
@keyframes up{from{transform:translateY(30px);opacity:.4;}to{transform:none;opacity:1;}}
.sheet h2{font-weight:300;font-size:28px;margin:0 0 4px;text-transform:lowercase;}
.sheet p{color:var(--dim);font-size:14px;line-height:1.5;margin:6px 0 14px;}
.qrwrap{display:flex;justify-content:center;padding:12px 0;}
.qrwrap canvas{width:64vw;max-width:280px;height:auto;image-rendering:pixelated;background:#fff;padding:12px;}
.codebox{width:100%;background:var(--bg2);border:2px solid var(--line);color:var(--dim);
  font-family:ui-monospace,Menlo,monospace;font-size:12px;padding:10px;word-break:break-all;resize:none;min-height:70px;}
.scanvid{width:100%;max-height:52vh;background:#000;object-fit:cover;}
.scanline{font-size:13px;color:var(--dim);margin-top:8px;}
.toast{position:fixed;left:50%;bottom:calc(28px + var(--safe-b));transform:translateX(-50%);
  background:var(--accent);color:var(--accent-ink);padding:10px 18px;font-size:14px;font-weight:600;
  z-index:80;opacity:0;transition:opacity .2s;pointer-events:none;letter-spacing:.02em;}
.toast.on{opacity:1;}

/* misc */
.hint{padding:6px 20px 0;color:var(--dimmer);font-size:12px;}
.spacer{height:24px;}

/* ---- FAQ / help ---- */
.faq .qa{margin:0 14px 6px;padding:15px 16px;background:var(--bg2);border-left:4px solid var(--accent);}
.faq h4{margin:0 0 6px;font-size:16px;font-weight:600;}
.faq p{margin:0;color:var(--dim);font-size:14px;line-height:1.55;}
.faq p b{color:var(--ink);font-weight:600;}

/* ---- "I'm high" mode: big, BOLD, outlined, maximum contrast for low vision ---- */
body.high{--dim:#f0f0f0;--dimmer:#d6d6d6;}
/* size */
body.high .act .tm{width:120px;padding:16px 10px 16px 16px;}
body.high .act .tm .s{font-size:28px;}
body.high .act .tm .e{font-size:15px;}
body.high .act .nm{font-size:26px;line-height:1.15;}
body.high .act .meta{font-size:16px;gap:8px;}
body.high .stagehdr h2,body.high .planday{font-size:33px;}
body.high .timehdr{font-size:27px;}
body.high .pivot button{font-size:33px;}
body.high .daytabs button{font-size:15px;}
body.high .daytabs .dnum{font-size:27px;}
body.high .friend .fn{font-size:22px;}
body.high .clashbanner{font-size:17px;}
body.high .faq h4{font-size:21px;}
body.high .faq p{font-size:17px;color:#fff;}
/* BOLD everything */
body.high .app-title,body.high .app-title b,body.high .pivot button,body.high .nm,
body.high .stagehdr h2,body.high .planday,body.high .timehdr,body.high .tm .s,
body.high .friend .fn,body.high .chip,body.high .seg button,body.high .mbtn,
body.high .daytabs button,body.high .act .meta,body.high .faq h4{font-weight:800;}
/* OUTLINES + high contrast on tiles and controls */
body.high .act{border:3px solid #fff;border-left-width:12px;background:#000;}
body.high .act .tm{border-right:3px solid #fff;}
body.high .act .nm,body.high .act .tm .s,body.high .act .meta,body.high .act .stg,body.high .act .tm .e{color:#fff;}
body.high .act.on{background:var(--accent);border-color:#fff;}
body.high .act.on .nm,body.high .act.on .tm .s,body.high .act.on .meta,body.high .act.on .stg,body.high .act.on .tm .e,body.high .act.on .pick{color:#000;}
body.high .act .pick{border:3px solid #fff;width:56px;font-size:34px;margin:8px;}
body.high .act.on .pick{border-color:#000;}
body.high .chip,body.high .seg button,body.high .mbtn,body.high .search{border-width:3px;color:#fff;}
body.high .seg button.on,body.high .chip.on{color:#000;}
body.high .stagehdr h2,body.high .planday,body.high .timehdr{color:#fff;}
body.high .stagehdr .sq{outline:3px solid #fff;outline-offset:2px;}
body.high .card,body.high .friend{border:3px solid #fff;}
body.high .friend .fn{color:#fff;}
body.high .fchip{outline:2px solid #fff;width:26px;height:26px;font-size:13px;}
body.high .pivot button.on{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:5px;}
body.high .daytabs button.on{border-bottom-width:6px;}
body.high .clashbanner,body.high .highbanner{border:4px solid #fff;font-weight:800;}
body.high input{color:#fff;font-weight:700;}
.highbanner{margin:10px 14px 0;padding:10px 14px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:15px;letter-spacing:.02em;}