/* Self-hosted Cascadia Mono (SIL OFL 1.1), Latin subset via Fontsource (~17KB/weight).
   url()-only src (no local()) so every device renders the identical face, online or off. */
@font-face{font-family:'Cascadia Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cascadia-mono-400.woff2') format('woff2')}
@font-face{font-family:'Cascadia Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cascadia-mono-600.woff2') format('woff2')}
@font-face{font-family:'Cascadia Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/cascadia-mono-700.woff2') format('woff2')}

:root{
  --bg:#0b0e14;
  --line:rgba(255,255,255,.10);   /* UI chrome borders */
  --gridline:rgba(204,204,204,.2); /* grid tile borders */
  --label:2.4ch;          /* header track thickness (overridden per-orientation in JS-friendly vars) */
  --label-day:3.0ch;
  --ink:#e8eaed;
  --muted:#9aa3af;
  /* Self-hosted Cascadia Mono first, with platform mono fallbacks. */
  --font:'Cascadia Mono','Cascadia Code',ui-monospace,'SFMono-Regular',Menlo,'Segoe UI Mono',Consolas,'Roboto Mono',monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  /* keep the grid clear of notches / rounded corners */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Bot screenshot framing (?bot=1) ---------- */
.bot-header,.bot-footer{display:none}
body.bot-render{
  padding:64px 0 34px;
}
body.bot-render .bot-header,
body.bot-render .bot-footer{
  display:flex;
  position:fixed;
  left:0;right:0;
  z-index:20;
  align-items:center;
  background:#0b0e14;
  color:var(--ink);
}
body.bot-render .bot-header{
  top:0;height:64px;
  justify-content:space-between;
  gap:18px;
  padding:0 22px;
  border-bottom:1px solid var(--gridline);
}
body.bot-render .bot-header strong{font-size:27px;letter-spacing:.02em}
body.bot-render .bot-header span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d8dee9;
  font-size:17px;
  font-weight:600;
  text-align:right;
}
body.bot-render .bot-footer{
  bottom:0;height:34px;
  justify-content:space-between;
  padding:0 14px;
  border-top:1px solid var(--gridline);
  color:var(--muted);
  font-size:11px;
}
body.bot-render .corner svg{display:none}
body.bot-render .coach,
body.bot-render .sheet,
body.bot-render .tip,
body.bot-render .legend{display:none!important}

/* ---------- The grid ---------- */
.grid{
  display:grid;
  position:relative;          /* containing block for absolutely-placed day shades */
  width:100%;
  height:100%;
  gap:0;                      /* gridlines are per-tile borders now (see --gridline) */
  background:var(--bg);
  user-select:none;
  touch-action:none;          /* we handle taps/long-press/swipe ourselves */
}
body.desktop-frame .grid{
  position:fixed;
  left:calc(50% - var(--frame-w) / 2);
  top:calc(50% - var(--frame-h) / 2);
  width:var(--frame-w);
  height:var(--frame-h);
  box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);
  cursor:grab;
}
body.desktop-frame .grid.swiping{cursor:grabbing}
/* Desktop carousel panes still sit one frame-width to either side. Mask the
   surrounding desktop so they behave like genuinely off-screen phone panes. */
body.desktop-frame::after{
  content:"";
  position:fixed;
  left:calc(50% - var(--frame-w) / 2);
  top:calc(50% - var(--frame-h) / 2);
  width:var(--frame-w);
  height:var(--frame-h);
  box-shadow:0 0 0 100vmax var(--bg);
  pointer-events:none;
  z-index:8;
}
/* gridlines: right+bottom per tile so each internal line is drawn once (no
   translucent overlap/doubling). Color is the fixed --gridline value. */
.corner,.head,.cell{
  border-right:1px solid var(--gridline);
  border-bottom:1px solid var(--gridline);
}
.grid.snapshot-no-cell-borders{
  --gridline:transparent;
}
.grid.snapshot-no-cell-borders .cell{
  border-color:transparent;
  transform:scale(1.012);
  z-index:0;
}

/* corner / gear */
.corner{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--muted);
  appearance:none;padding:0;border-left:0;border-top:0;font:inherit;
  cursor:pointer;
  position:relative;
  z-index:5;                 /* lift the enlarged hit area above neighbouring header cells */
}
/* invisible, oversized touch target so the small gear is hard to miss */
.corner::before{
  content:"";
  position:absolute;
  top:-8px; left:-8px; right:-22px; bottom:-22px;
}
.corner svg{width:60%;height:60%;max-width:26px;max-height:26px;opacity:.85}
.corner:active{color:var(--ink)}

/* headers */
.head{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--muted);
  line-height:1;text-align:center;overflow:hidden;
}
/* font-size is measured to fill the box by fitHeaders(); clamp is the pre-paint fallback */
.head.day{font-weight:600;white-space:nowrap;font-size:var(--dayfs,clamp(8px,1.7vmin,13px))}
.grid.p .head.day{flex-direction:row;gap:.06em}    /* portrait: days are wide cols → Fr19 on one line */
.grid.l .head.day{flex-direction:column;gap:0}      /* landscape: days are tall rows → Fr over 19 */
.head.day .dow{color:var(--ink)}
.head.day .dnum{color:var(--muted);font-weight:400}
.head.today .dow,.head.today .dnum{color:#ffd23f}
.head.hour{font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;font-size:var(--hourfs,clamp(8px,1.7vmin,13px))}

/* cells */
.cell{
  position:relative;
  overflow:hidden;
  background:#11151c;
}
.cell.empty{background:#0e1218}

/* Precipitation particle layer (canvas), aligned over the grid by JS */
.fx{position:fixed;z-index:6;pointer-events:none;left:0;top:0}

/* smooth day/night shade — one gradient overlay spanning each day's hours.
 * position:absolute keeps it out of grid auto-flow (placed only by its grid lines). */
.dayshade{position:absolute;inset:0;pointer-events:none;z-index:1}

/* current-time marker — bright red line in today's column */
.cell .nowline{position:absolute;z-index:4;background:#ff2b2b;box-shadow:0 0 8px 1px rgba(255,43,43,.85);pointer-events:none}
.grid.p .cell .nowline{left:0;right:0;height:2px;top:calc(var(--frac,0) * 100%)}
.grid.l .cell .nowline{top:0;bottom:0;width:2px;left:calc(var(--frac,0) * 100%)}
.cell .nowline::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#ff2b2b;box-shadow:0 0 8px 1px rgba(255,43,43,.85)}
.grid.p .cell .nowline::after{left:0;top:50%;transform:translateY(-50%)}
.grid.l .cell .nowline::after{top:0;left:50%;transform:translateX(-50%)}
.cell .sunmark{
  position:absolute;z-index:5;pointer-events:none;border-radius:999px;
  --sun:#ffbf3f;--glow:rgba(255,191,63,.72);--soft:rgba(255,191,63,.22);
  background:var(--sun);box-shadow:0 0 14px 5px var(--glow);
}
.cell .sunmark.rise{--sun:#ffbf3f;--glow:rgba(255,191,63,.72);--soft:rgba(255,191,63,.22)}
.cell .sunmark.set{--sun:#ff5a2e;--glow:rgba(255,90,46,.72);--soft:rgba(255,90,46,.22)}
.grid.p .cell .sunmark{left:0;right:0;height:1px;top:calc(var(--frac,0) * 100%)}
.grid.l .cell .sunmark{top:0;bottom:0;width:1px;left:calc(var(--frac,0) * 100%)}

.cell .t{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(8px,1.9vmin,15px);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
  pointer-events:none;
  z-index:2;
}
.cell.sel{
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 10px 2px rgba(255,255,255,.75),
    0 0 10px 1px rgba(255,255,255,.55);
  z-index:3;
}

/* loading shimmer — ONE transform-animated overlay (compositable) instead of
   animating background-position on 168 cells, which rasterized the whole
   viewport every frame. */
.grid.loading .cell{background:#11151c}
.grid.loading::after{
  content:"";
  position:absolute;inset:0;
  z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.05) 50%,transparent 66%);
  transform:translateX(-100%);
  animation:sh 1.2s linear infinite;
  will-change:transform;
}
@keyframes sh{to{transform:translateX(100%)}}

/* ---------- Tap readout ---------- */
.tip{
  position:fixed;z-index:40;
  left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + var(--tip-shift,0px));
  transform:translateX(-50%);
  background:rgba(17,21,28,.96);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 14px;
  font-size:13px;line-height:1.35;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  pointer-events:auto;
  touch-action:none;
  cursor:grab;
  user-select:none;
  max-width:min(92vw,420px);
  text-align:center;
}
/* while dragging, skip the backdrop re-blur per frame (mobile GPUs pay for it) */
.tip.dragging{cursor:grabbing;backdrop-filter:none}
/* portrait: float over the wee-hours rows (top) instead of the relevant evening rows */
.tip.top{bottom:auto;top:calc(clamp(64px,11vh,150px) - var(--tip-shift,0px))}
.tip b{font-weight:700}
.tip .tip-place{display:block;font-size:.82em;color:var(--ink);font-weight:700}
.tip .tip-time{display:block;font-size:.82em;color:var(--muted)}
.tip .tip-primary{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:3px}
.tip .tip-primary-label{font-size:.9em;color:var(--muted);font-weight:600}
.tip .tip-primary strong{font-size:1.35em;line-height:1.1;font-weight:700}
.tip .tip-event{display:block;margin-top:4px;color:var(--ink);font-weight:600}
.tip .tip-facts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:4px;color:var(--ink)}
.tip .tip-facts>span+span::before{content:"·";padding:0 6px;color:var(--muted)}
.tip .tip-why{display:block;margin-top:7px;padding-top:6px;border-top:1px solid var(--line);font-size:.78em;line-height:1.5;color:var(--muted);text-align:left;font-variant-numeric:tabular-nums}
.tip .tip-why>span{display:grid;grid-template-columns:minmax(8.5em,1fr) auto 3ch;gap:8px}
.tip .tip-calc-total{margin-top:3px;padding-top:3px;border-top:1px solid rgba(255,255,255,.07);grid-template-columns:1fr 3ch!important}
.tip .tip-why b{color:var(--ink);font-weight:700}
.tip .swatch{display:inline-block;width:.82em;height:.82em;border-radius:2px;align-self:center}

/* ---------- Color legend ---------- */
.legend{
  position:fixed;z-index:55;
  top:90%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:stretch;gap:4px;
  background:rgba(17,21,28,.96);border:1px solid var(--line);
  border-radius:12px;padding:6px 10px 7px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);backdrop-filter:blur(8px);
  pointer-events:auto;
  touch-action:none;
  cursor:grab;
  user-select:none;
}
.legend.dragging{cursor:grabbing;backdrop-filter:none}
.legend[hidden]{display:none}
.legend .legend-place,.legend .legend-title{display:block;width:100%;text-align:center;line-height:1;white-space:nowrap}
.legend .legend-place{overflow:hidden;text-overflow:ellipsis;font-size:11px;color:var(--ink);font-weight:700}
.legend .legend-title{font-size:11px;color:var(--muted);font-weight:600}
.legend .legend-scale{display:flex;align-items:center;gap:8px}
.legend .bar{width:min(46vw,180px);height:10px;border-radius:6px;border:1px solid rgba(255,255,255,.15)}
.legend .lo,.legend .hi{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- First-run coach marks ---------- */
.coach{position:fixed;inset:0;z-index:60;color:var(--ink);animation:coachIn .25s ease}
.coach[hidden]{display:none}
@keyframes coachIn{from{opacity:0}to{opacity:1}}
.coach-bg{position:absolute;inset:0;background:rgba(6,8,12,.74);backdrop-filter:blur(2px)}
/* points at the gear in the top-left corner, where the headers meet */
.coach-gear{position:absolute;top:max(10px,env(safe-area-inset-top));left:14px;font-size:.95rem;color:var(--muted)}
.coach-gear b{color:#7fb0ff;font-weight:700}
.coach-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(360px,86vw);display:flex;flex-direction:column;gap:1.4rem;text-align:center;
}
.coach-head{display:flex;flex-direction:column;gap:.25rem}
.coach-title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:.5px;color:var(--ink)}
.coach-sub{font-size:.95rem;color:var(--muted)}
.coach-center p{margin:0;font-size:1rem;line-height:1.5;color:var(--muted)}
.coach-center b{color:var(--ink);font-weight:700}
.coach-swipe{color:var(--ink)!important}
.sw-arrows{display:inline-block;font-size:1.5rem;color:#7fb0ff;animation:swWig 1.4s ease-in-out infinite}
@keyframes swWig{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
.coach-actions{display:flex;gap:.6rem;align-items:center;justify-content:center;margin-top:.4rem}
.coach-actions .btn{width:auto;padding:.55rem 1.1rem}
.coach-actions .linkbtn{margin-top:0;width:auto;border:0}

/* ---------- Settings sheet ---------- */
.sheet{position:fixed;inset:0;z-index:50}
.sheet[hidden]{display:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.sheet-card{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(560px,100%);
  max-height:92dvh;overflow:auto;
  background:#11151c;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
  animation:rise .22s ease;
}
/* drawer grab-handle — hints that the sheet can be swiped down to dismiss */
.sheet-card::before{
  content:"";display:block;width:38px;height:4px;border-radius:999px;
  background:rgba(255,255,255,.22);margin:-2px auto 12px;cursor:grab;
}
.sheet-card.sheet-dragging{cursor:grabbing;user-select:none}
@keyframes rise{from{transform:translate(-50%,18px);opacity:.4}to{transform:translate(-50%,0);opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.sheet-head h1{font-size:1.3rem;margin:0;letter-spacing:.5px}
.x{background:transparent;border:0;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:.3rem}
.sheet-body{display:flex;flex-direction:column;gap:1.05rem}

.place-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.place-row>div{min-width:0}
.place{font-weight:700;font-size:1.05rem}
.place-sub{color:var(--muted);font-size:.85rem;margin-top:1px}
.share-view{flex:0 0 auto;color:#7fb0ff}
.share-view:disabled{color:var(--muted);opacity:.45;cursor:default}

.share-toast{
  position:fixed;z-index:80;left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  max-width:calc(100vw - 28px);padding:9px 13px;border:1px solid var(--line);border-radius:8px;
  background:rgba(10,14,22,.96);color:var(--ink);box-shadow:0 8px 28px rgba(0,0,0,.45);
  font-size:12px;text-align:center;pointer-events:none;
}

.field>label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.04em}
.btn{
  background:#1b212b;color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:.55rem .8rem;font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap;
}
.btn:active{background:#232b37}

.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.seg button{
  flex:1 1 0;min-width:64px;
  background:#1b212b;color:var(--muted);
  border:1px solid var(--line);border-radius:10px;
  padding:.55rem .4rem;font:inherit;font-size:.9rem;cursor:pointer;
  transition:background .12s,color .12s;
}
.seg button.on{background:#2b7fff;border-color:#2b7fff;color:#fff;font-weight:600}

.placelist{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.5rem}
.place-item{display:flex;align-items:center;gap:.3rem;background:#1b212b;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.place-item.on{border-color:#2b7fff;background:#13233d}
.place-item .pi-name{flex:1;min-width:0;text-align:left;background:transparent;border:0;color:var(--ink);font:inherit;font-size:.92rem;padding:.55rem .7rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place-item.on .pi-name{color:#fff;font-weight:600}
.place-item .pi-del{background:transparent;border:0;color:var(--muted);font-size:.95rem;line-height:1;padding:.45rem .65rem;cursor:pointer}
.place-item .pi-del:active{color:#ff6b6b}

.search{position:relative}
.search-input{
  width:100%;background:#0e1218;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:.6rem 2rem .6rem .7rem;font:inherit;font-size:.95rem;
}
.search-input:focus{outline:none;border-color:#2b7fff}
.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-decoration{display:none}
.search-clear{
  position:absolute;top:.5rem;right:.45rem;width:1.6rem;height:1.6rem;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--muted);font-size:.85rem;cursor:pointer;border-radius:50%;
}
.search-clear:active{color:var(--ink);background:#1b212b}
.results{list-style:none;margin:.4rem 0 0;padding:.25rem;border:1px solid var(--line);border-radius:10px;background:#0e1218;max-height:min(46vh,320px);overflow-y:auto}
.results[hidden]{display:none}
.result{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:8px;cursor:pointer}
.result[aria-selected="true"]{background:#1b2533}
@media (hover:hover){ .result:hover{background:#1b2533} }
.r-flag{font-size:1.15rem;line-height:1;flex:0 0 auto}
.r-text{display:flex;flex-direction:column;min-width:0}
.r-name{font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-name b{color:#7fb0ff;font-weight:700}
.r-sub{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-msg{padding:.6rem;color:var(--muted);font-size:.88rem;text-align:center}

.linkbtn{margin-top:.55rem;width:100%;color:#7fb0ff;border-style:dashed}
.back{background:transparent;border:0;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .3rem}
.hint{color:var(--muted);font-size:.82rem;line-height:1.4;margin:.1rem 0 1rem}

.about-intro{color:var(--ink);font-size:.95rem;line-height:1.55;margin:.1rem 0 1.3rem}
.about-h{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .6rem}
.about-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.about-tips li{position:relative;padding-left:1.1rem;color:var(--muted);font-size:.92rem;line-height:1.5}
.about-tips li::before{content:"";position:absolute;left:.15rem;top:.6em;width:5px;height:5px;border-radius:50%;background:#2b7fff}
.about-tips li b{color:var(--ink);font-weight:600}
.about-tips a{color:#7fb0ff;text-decoration:underline;text-underline-offset:2px}
.install-hint{display:block;margin-top:.35rem;font-size:.85em;opacity:.85}
.about-foot{color:var(--muted);font-size:.8rem;line-height:1.45;margin:1.4rem 0 0;opacity:.85}

.rdim{margin-bottom:1.15rem}
.rdim-label{font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:.3rem}
.rdim-label span{color:var(--muted);font-weight:400}
svg.curve{width:100%;height:auto;display:block;background:#0e1218;border:1px solid var(--line);border-radius:10px;touch-action:none;cursor:pointer}
.curve .guide{stroke:var(--line);stroke-width:1}
.curve .guide.minor{stroke-dasharray:2 3;stroke-opacity:.5}
.curve .guide-l{fill:var(--muted);font-size:7px;dominant-baseline:middle}
.curve .xl{fill:var(--muted);font-size:7px}
.curve .curve-line{fill:none;stroke:#2b7fff;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.curve .knob{fill:#2b7fff;stroke:#0e1218;stroke-width:1.5}
#runReset{width:100%;margin-top:.4rem}

/* live preview: keep the editor to the lower half and don't dim the grid behind it */
#runEditor .sheet-backdrop{background:transparent;backdrop-filter:none}
#runEditor .sheet-card{max-height:62dvh;box-shadow:0 -16px 40px rgba(0,0,0,.6)}

.sheet-foot{display:flex;align-items:center;gap:.4rem;justify-content:center;color:var(--muted);font-size:.78rem;margin-top:1.1rem}
.sheet-foot .dot{opacity:.5}

/* ---------- Reduced motion: still every CSS animation (canvas fx handle this in JS) */
@media (prefers-reduced-motion:reduce){
  .grid.loading::after{animation:none;display:none}
  .sw-arrows{animation:none}
  .coach{animation:none}
  .sheet-card{animation:none}
}