/* 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:#05070c;
  --line:rgba(255,255,255,.10);
  --gridline:rgba(5,8,13,.58);
  --label:2.4ch;
  --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);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Grid ---------- */
.grid{
  display:grid;position:relative;width:100%;height:100%;gap:0;
  background:var(--bg);user-select:none;touch-action:none;
}
body.desktop-frame{
  --frame-left:calc(50% - var(--frame-w) / 2);
  --frame-top:calc(50% - var(--frame-h) / 2);
}
body.desktop-frame .grid{
  position:fixed;
  left:var(--frame-left);
  top:var(--frame-top);
  width:var(--frame-w);
  height:var(--frame-h);
  box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
  cursor:grab;
}
body.desktop-frame .grid.swiping{cursor:grabbing}
body.desktop-frame::after{
  content:"";
  position:fixed;
  left:var(--frame-left);
  top:var(--frame-top);
  width:var(--frame-w);
  height:var(--frame-h);
  box-shadow:0 0 0 100vmax var(--bg);
  pointer-events:none;
  z-index:8;
}
.corner,.head,.cell{border:0}   /* no hour separators — the per-hour sky shift does the separating */
/* Snapshot mode used to widen cells to hide border gaps; with no borders the
   class only needs to exist for the JS hooks. */
.grid.snapshot-no-cell-borders .cell{z-index:0}

.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;
}
.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)}

.head{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--muted);line-height:1;text-align:center;overflow:hidden;
}
.head.day{font-weight:600;white-space:nowrap;font-size:var(--dayfs,clamp(8px,1.7vmin,13px))}
.head.day{flex-direction:column;gap:0}
.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: the sky gradient is set per-cell as the background; the canvas paints the
   black water + chop + precip + stars on top. */
.cell{position:relative;overflow:hidden;background:#0b1020}
.cell.empty{background:#070a11}
.cell[tabindex="0"]{cursor:pointer}
.cell:focus-visible{
  outline:3px solid #fff;
  outline-offset:-3px;
  z-index:7;
}
.grid.ghost{user-select:none;touch-action:none}
.ghost-water{
  position:absolute;left:0;right:0;bottom:0;
  background:#000;
  box-shadow:0 -1px 0 rgba(210,235,255,.18);
  pointer-events:none;
}
/* loading shimmer — ONE transform-animated overlay (compositable) instead of
   animating background-position on 168 cells. */
.grid.loading .cell{background:#0a1526}
.grid.loading::after{
  content:"";
  position:absolute;inset:0;
  z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(160,205,255,.07) 50%,transparent 66%);
  transform:translateX(-100%);
  animation:sh 1.2s linear infinite;
  will-change:transform;
}
@keyframes sh{to{transform:translateX(100%)}}

/* animation overlay */
.fx{position:fixed;z-index:6;pointer-events:none;left:0;top:0}

/* now-line (red, today's column/row) drawn on the canvas — nothing here */

/* ---------- 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(10,14,22,.96);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  padding:8px 14px;font-size:13px;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);max-width:min(92vw,440px);text-align:center;
  pointer-events:auto;touch-action:none;cursor:grab;user-select:none;
}
/* while dragging, skip the backdrop re-blur per frame (mobile GPUs pay for it) */
.tip.dragging{cursor:grabbing;backdrop-filter:none}
.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 .tide-rise{color:#6fd3ff}
.tip .tide-fall{color:#ffb27f}

/* ---------- 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(5,7,12,.76);backdrop-filter:blur(2px)}
.coach-gear{position:absolute;top:max(10px,env(safe-area-inset-top));left:14px;font-size:.95rem;color:var(--muted)}
body.desktop-frame .coach-gear{
  top:calc(var(--frame-top) + 10px);
  left:calc(var(--frame-left) + 14px);
}
.coach-gear b{color:#7fb0ff;font-weight:700}
.coach-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(370px,86vw);display:flex;flex-direction:column;gap:1.35rem;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:.35rem}
.coach-actions .btn{width:auto;padding:.55rem 1.1rem}
.coach-actions .linkbtn{margin-top:0;width:auto;border:0}

/* ---------- Settings sheet (borrowed from 24x7) ---------- */
.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:#0b1018;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;
}
.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(6,10,16,.96);color:var(--ink);box-shadow:0 8px 28px rgba(0,0,0,.5);
  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}
.seg{display:flex;gap:.3rem}
.seg button{flex:1;background:#151c27;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:.55rem .4rem;font:inherit;font-size:.9rem;cursor:pointer}
.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:#151c27;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}
.btn{background:#151c27;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap}
.linkbtn{margin-top:.55rem;width:100%;color:#7fb0ff;border-style:dashed}
.sheet-foot{display:flex;align-items:center;gap:.4rem;justify-content:center;color:var(--muted);font-size:.78rem;margin-top:1.1rem;flex-wrap:wrap}
.sheet-foot .dot{opacity:.5}
.back{background:transparent;border:0;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .3rem}
.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-foot a{color:#7fb0ff;text-decoration:underline;text-underline-offset:2px}
.about-foot{color:var(--muted);font-size:.82rem;line-height:1.45;margin:1.1rem 0 0}

/* ---------- Location search (typeahead, borrowed) ---------- */
.search{position:relative}
.search-input{width:100%;background:#0a0e16;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:#151c27}
.results{list-style:none;margin:.4rem 0 0;padding:.25rem;border:1px solid var(--line);border-radius:10px;background:#0a0e16;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}

/* ---------- 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}
}