/* Elena Bridge · the shell and the shared parts. Lane styles are lanes.css,
 * the week view is calendar.css. Classes follow the Bridge's names where the
 * part is the same part: g-pane, g-seg, g-btn, g-face, g-pill, g-tile. Values
 * for surfaces, motion and floaters are the Bridge's, copied by value. */

*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{
  background:var(--wall); background-attachment:fixed; color:var(--t1);
  font:400 13px/18px var(--sans);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--tint-ink); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--tint); outline-offset:2px}
[hidden]{display:none !important}
h1,h2,h3,h4,p{margin:0}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.n, .num, .g-stat b{font-variant-numeric:tabular-nums}
.t2{color:var(--t2)} .t3{color:var(--t3)}
.spacer{flex:1}
.nowrap{white-space:nowrap}
.ell{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
kbd{font:500 11px/16px var(--mono); color:var(--t3)}

/* every glyph of the set draws 1.5px at any size */
svg.gi :is(path,circle,rect,ellipse,line,polyline,polygon){vector-effect:non-scaling-stroke}

/* ================================================================ motion */
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.994)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes palin{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes landed{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes leaveup{to{opacity:0;transform:translateY(-8px)}}
@keyframes shimmer{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes sweep{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent)}100%{box-shadow:0 0 0 7px color-mix(in srgb, var(--red) 0%, transparent)}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent)}100%{box-shadow:0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes arrive{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes chipin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes cellin{from{opacity:0}to{opacity:1}}
@keyframes nowdot{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent)}100%{box-shadow:0 0 0 6px color-mix(in srgb, var(--red) 0%, transparent)}}
@keyframes selin{from{background-color:transparent}to{background-color:var(--tint-soft)}}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none!important; transition:none!important}
}

::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--fill); border-radius:10px; border:3px solid transparent; background-clip:padding-box}
::selection{background:var(--tint-fill); color:var(--accent-on)}

/* ================================================================== shell */
.app{height:100vh; height:100dvh; display:flex; min-height:0; padding:10px; gap:10px}
.g-pane{position:relative; min-height:0; overflow:hidden; border-radius:var(--r-pane);
  border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow)}
.g-glass{background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
.g-sheetbg{background:var(--sheet); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
/* The sheet is the Bridge's: --sheet and no blur, the same tone as the lane
   menu beside it, so the two read as one surface. The inspector keeps glass. */
.g-sheet, .lane > .sheet.g-pane{background:var(--sheet); -webkit-backdrop-filter:none; backdrop-filter:none}

/* the rail: 76px, every label under its mark */
.rail{flex:0 0 var(--rail-mini); width:var(--rail-mini); display:flex; flex-direction:column; overflow:clip}
.rail .brand{display:flex; justify-content:center; padding:12px 0 6px}
/* The brand mark: the product's line cut into the glass, no tile, no letter.
   A lip of light under it, the wall, the line; brighter under the pointer. */
.bmark{display:grid; place-items:center; width:48px; height:34px; border-radius:12px; color:inherit;
  text-decoration:none !important; transition:transform var(--d-press) var(--ease-press), background var(--d-state) var(--spring)}
.bmark:hover{background:var(--fill3)}
.bmark:active{transform:scale(.94)}
.bmark.lg{width:auto; height:auto; justify-content:start; border-radius:0}
.bmark.lg:hover{background:none}
.bm-s{display:block; overflow:visible; filter:var(--bm-fx)}
.bm-s path{transition:stroke var(--d-state) ease}
.bm-s .bm-hi{stroke:var(--bm-hi); stroke-width:1.5; transform:translateY(.38px)}
.bm-s .bm-w{stroke:var(--bm-wall); stroke-width:1.7}
.bm-s .bm-ink{stroke:var(--bm-ink); stroke-width:.95; transform:translateY(.18px)}
.bmark:hover .bm-ink, .bmark:focus-visible .bm-ink{stroke:var(--bm-ink-h)}
.rnav{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:4px 6px; display:flex; flex-direction:column; scrollbar-width:none}
.rnav::-webkit-scrollbar{display:none}
.rnav button{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:44px; padding:2px; margin:0 0 1px; border-radius:12px; color:var(--t2);
  transition:background var(--d-state) var(--spring), color var(--d-seg) var(--spring), transform var(--d-press) var(--ease-press)}
.rnav button:hover{background:var(--fill3); color:var(--t1)}
.rnav button[aria-current="true"]{background:var(--tint-soft); color:var(--tint-ink)}
.rnav .ic{width:26px; height:24px; display:grid; place-items:center}
.rnav .ic > svg.gi{width:18px; height:18px}
.rnav .rl{font:500 10px/12px var(--sans); max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rnav .rc{position:absolute; top:0; left:calc(50% + 12px); min-width:14px; height:14px; padding:0 3px;
  border-radius:var(--r-full); font:600 9px/14px var(--mono); text-align:center; font-variant-numeric:tabular-nums;
  background:var(--card-solid); color:var(--t1); box-shadow:0 0 0 1px var(--glass-line)}
.rnav .rc.hot{background:var(--orange); color:#fff}
.rnav .rc.rolled, .g-stat b.rolled, .rolled{animation:rise 200ms var(--spring) both}
.rnav .sep{height:1px; background:var(--sep); margin:4px 10px 5px}

/* Etch: lane marks engraved in the rail's glass. A body cut is three things:
   its upper wall in shadow, its floor, and the light on its lower lip. A
   hairline is the shallow cut. Under the pointer the cut deepens; the lane
   that's on is lit in the tint over the soft ground. */
.rnav .ic.lk{overflow:visible}
.rnav .ic.lk svg.lk-s{width:22px; height:22px; overflow:visible; fill:none; stroke:none; stroke-width:1.5;
  stroke-linecap:butt; stroke-linejoin:miter; stroke-miterlimit:4; filter:var(--lk-fx)}
.lk-s path{transition:stroke var(--d-state) ease}
.rnav .ic.lk .lk-hi{stroke:var(--lk-hi); transform:translateY(.5px)}
.rnav .ic.lk .lk-hi .lk-f{stroke:var(--lk-hi-f); stroke-width:1}
.rnav .ic.lk .lk-w{stroke:var(--lk-wall)}
.rnav .ic.lk .lk-ink .lk-b{stroke:var(--lk-ink); stroke-width:1; transform:translateY(.25px)}
.rnav .ic.lk .lk-ink .lk-f{stroke:var(--lk-fine); stroke-width:1}
.rnav button:hover .ic.lk{--lk-wall:var(--lk-wall-h); --lk-ink:var(--lk-ink-h); --lk-fine:var(--lk-fine-h)}
.rnav button[aria-current="true"] .ic.lk{--lk-wall:var(--lk-wall-on); --lk-ink:var(--lk-ink-on); --lk-fine:var(--lk-fine-on);
  --lk-hi:var(--lk-hi-on); --lk-hi-f:var(--lk-hi-f-on); --lk-fx:var(--lk-fx-on)}

.rfoot{display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0 12px; border-top:1px solid var(--sep)}
.rfoot .wsbtn{border-radius:10px; padding:2px; transition:background var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
.rfoot .wsbtn:hover{background:var(--fill3)}
.rfoot .wsbtn:active{transform:scale(.94)}
/* the plugin's last refresh: green, breathing while it runs, a red beat when stale */
.fresh{display:block; width:6px; height:6px; border-radius:50%; background:var(--green); flex:0 0 auto}
.fresh.run{animation:ping 1.8s var(--ease-out) infinite}
.fresh.warn{background:var(--orange); animation:breathe 2.6s ease-in-out infinite}
.fresh.cold{background:var(--red); animation:beat 2.6s ease-out infinite}
.fresh.none{background:var(--t3); opacity:.5}
html.woke .fresh{animation:none}
.icbtn{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--t2);
  transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
.icbtn:hover{background:var(--fill3); color:var(--t1)}
.icbtn:active{transform:scale(.94)}
.icbtn svg{width:15px; height:15px}
.icbtn.on{color:var(--tint-ink); background:var(--tint-soft)}

/* the lane area: menu, sheet, inspector, side by side */
.lane{flex:1; min-width:0; min-height:0; display:flex; gap:10px}
/* the body rises on a lane change and on no other paint; the title cross-fades.
   backwards, never both: a transform held after the entrance would trap the
   phone's fixed panes */
.lane.switched .sheet > .scroll, .lane.switched .sheet > .cal-wrap{animation:rise var(--d-arrive) var(--spring) backwards}
.lane.switched .bar > h2, .lane.switched .gcap.title{animation:fadein var(--d-seg) var(--spring) both}
.lane.switched .lm-sc{animation:fadein var(--d-seg) var(--spring) backwards}
.sheet{flex:1; min-width:0; display:flex; flex-direction:column}

/* The toolbar, one line: the name and its key numbers in one glass capsule,
   the lane's controls on the same line. Once the sheet scrolls under it the
   line takes a glass strip and a hairline. */
.bar{flex:0 0 auto; min-height:56px; display:flex; align-items:center; gap:10px; padding:11px 14px 9px 16px;
  min-width:0; position:relative; z-index:4;
  transition:background-color var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring)}
.bar.stuck{background:color-mix(in srgb, var(--glass) 70%, transparent); box-shadow:0 1px 0 var(--sep)}
.bar > h2, .gcap{background:var(--glass); -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar);
  border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-sm)}
.bar > h2{padding:5px 14px; border-radius:13px}
.bar h2{font:600 17px/22px var(--sans); letter-spacing:-.015em; white-space:nowrap; color:var(--t1)}
.gcap.title{display:flex; align-items:baseline; gap:10px; min-width:0; flex:0 1 auto; padding:5px 14px; border-radius:13px}
.gcap.title h2{flex:0 0 auto}
.gcap.title .g-stats, .gcap.title .cnt{font:400 13px/18px var(--sans); color:var(--t2); min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.gcap.title .g-stats:empty{display:none}
.bar .g-stats{flex:0 1 auto; overflow:hidden; flex-wrap:nowrap}
.gcap.search{display:flex; align-items:center; gap:6px; flex:0 0 auto; height:34px; padding:0 8px 0 10px; border-radius:12px;
  color:var(--t2); cursor:pointer; transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring)}
.gcap.search:hover{background:var(--glass2); color:var(--t1)}
.gcap.search svg{width:14px; height:14px}
.gcap.search kbd{color:var(--t3)}
.scroll{flex:1; min-height:0; overflow:auto; position:relative; overscroll-behavior:contain}
.pad{padding:6px 20px 28px}

/* the lane menu: the sheet's own tone, no seam, a glyph per row */
.lm{flex:0 0 var(--lm); width:var(--lm); display:flex; flex-direction:column; min-height:0;
  margin-right:calc(-1 * var(--pane-gap)); border-right:0; border-radius:var(--r-pane) 0 0 var(--r-pane);
  background:var(--sheet); box-shadow:inset 0 1px 0 var(--glass-hi), inset -1px 0 0 var(--sep), var(--shadow)}
.lm + .sheet{border-top-left-radius:0; border-bottom-left-radius:0; border-left-color:transparent}
.lm-sc{flex:1; min-height:0; overflow:auto; padding:10px 8px 12px; display:flex; flex-direction:column; gap:1px}
.lm-h{font:600 11px/16px var(--sans); letter-spacing:.02em; text-transform:uppercase; color:var(--t3); padding:14px 8px 4px}
.lm-h:first-child{padding-top:4px}
.lm-r{display:flex; align-items:center; gap:8px; height:28px; flex:none; padding:0 6px 0 8px; border-radius:8px; color:var(--t1);
  font:500 13px/18px var(--sans); text-align:left; width:100%; text-decoration:none !important;
  transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring)}
.lm-r:hover{background:var(--fill3)}
.lm-r[aria-current="true"], .lm-r[aria-current="true"]:hover{background:var(--tint-soft); color:var(--tint-ink)}
.lm-r:focus-visible{outline:2px solid var(--tint); outline-offset:-2px}
.lm-r .gl{width:18px; height:18px; flex:0 0 18px; display:grid; place-items:center; color:var(--t2)}
.lm-r .gl svg.gi{width:16px; height:16px}
.lm-r .gl .g-chan{width:16px; height:16px}
.lm-r[aria-current="true"] .gl{color:var(--tint-ink)}
.lm-r .lb{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.lm-r .n{margin-left:auto; font:500 11px/16px var(--mono); color:var(--t3)}
.lm-r[aria-current="true"] .n{color:var(--tint-ink)}
.lm-r.zero{color:var(--t3)}
.lm-r.zero .gl{color:var(--t3)}
.lm-r .g-dot{--c:var(--t3)}

/* a lane menu that folds away on a desk too narrow for three columns */
@media (max-width: 1100px) and (min-width: 431px){
  .lane > .lm.fold{display:none}
  .lane > .lm.fold + .sheet{border-radius:var(--r-pane); border-left-color:var(--glass-line)}
}
.lm-sw{display:block; width:8px; height:8px; border-radius:50%; background:var(--c, var(--t3))}

/* the inspector */
.insp{flex:0 0 var(--peek); width:var(--peek); display:flex; flex-direction:column; min-width:0}
.insp.wide{flex-basis:460px; width:460px}
.ihead{display:flex; align-items:center; gap:10px; padding:12px 14px 10px 16px; min-height:56px; border-bottom:1px solid var(--sep)}
.ihead h3{font:600 15px/20px var(--sans); letter-spacing:-.01em}
.ibody{flex:1; min-height:0; overflow:auto; padding:14px 16px 24px; animation:fadein var(--d-seg) var(--spring) both}
.iback{display:none}

/* ================================================================ parts */
.g-seg{display:inline-flex; align-items:center; gap:2px; padding:3px; flex:0 0 auto;
  border-radius:var(--r-ctl); background:var(--fill3); border:1px solid var(--card-line)}
.g-seg > button{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:7px;
  font:500 12px/16px var(--sans); color:var(--t2); white-space:nowrap;
  transition:background var(--d-seg) var(--spring), color var(--d-seg) var(--spring), box-shadow var(--d-seg) var(--spring)}
.g-seg > button:hover{color:var(--t1)}
.g-seg > [aria-pressed="true"]{background:var(--card-solid); box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-hi); color:var(--t1)}
.g-seg .n{font:500 11px/16px var(--mono); color:var(--t3)}

.g-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 12px;
  border-radius:var(--r-btn); background:var(--fill2); color:var(--t1); font:500 12px/16px var(--sans); white-space:nowrap;
  text-decoration:none !important;
  transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring), filter var(--d-state) var(--spring),
    box-shadow var(--d-state) var(--spring), opacity var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
.g-btn:hover{background:var(--fill)}
.g-btn:active:not([disabled]){transform:scale(.97)}
.g-btn.pri{background:var(--tint-fill); color:var(--accent-on); font-weight:600; box-shadow:var(--shadow-tint)}
.g-btn.pri:hover{filter:brightness(1.08)}
.g-btn.ter{background:var(--tint-soft); color:var(--tint-ink); font-weight:600}
.g-btn.ter:hover{background:var(--tint-fill); color:var(--accent-on)}
.g-btn.plain{background:transparent; color:var(--t2)}
.g-btn.plain:hover{background:var(--fill3); color:var(--t1)}
.g-btn.red{background:var(--red-soft); color:var(--red-ink); font-weight:600}
.g-btn.red:hover{background:var(--red-fill); color:#fff}
/* armed: the one orange glow on the page */
.g-btn.armed, .g-btn.armed:hover{background:var(--orange); color:var(--on-bright); font-weight:700; filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 16px color-mix(in srgb, var(--orange) 40%, transparent);
  animation:pop var(--d-seg) var(--spring) both}
.g-btn.sm{height:26px; padding:0 10px; border-radius:8px}
.g-btn.lg{height:36px; padding:0 16px; border-radius:11px; font-size:13px}
.g-btn.icon{width:30px; padding:0}
.g-btn.icon:active:not([disabled]){transform:scale(.94)}
.g-btn[disabled]{opacity:.45; cursor:default; filter:none}
.g-btn svg{width:14px; height:14px}

.g-chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--r-ctl);
  background:var(--card); border:1px solid var(--card-line); font:500 12px/16px var(--sans); color:var(--t2); white-space:nowrap;
  transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring), border-color var(--d-state) var(--spring)}
.g-chip:hover{background:var(--card-hover); color:var(--t1)}
.g-chip[aria-pressed="true"]{background:var(--tint-soft); color:var(--tint-ink); border-color:var(--tint-line)}

.g-face{--s:28px; display:inline-block; width:var(--s); height:var(--s); border-radius:50%; flex:0 0 auto;
  background-color:var(--fill2); background-size:cover; background-position:center; box-shadow:0 0 0 1px var(--card-line)}
.g-ini{--s:28px; display:inline-grid; place-items:center; width:var(--s); height:var(--s); border-radius:50%; flex:0 0 auto;
  background:var(--fill2); color:var(--t2); font-weight:600; font-size:calc(var(--s) * .36); line-height:1; letter-spacing:.01em}
.g-ini.sq, .g-face.sq{border-radius:calc(var(--s) * .3)}
.g-faces{display:inline-flex; align-items:center}
.g-faces > *{box-shadow:0 0 0 2px var(--card-solid); margin-left:-7px}
.g-faces > :first-child{margin-left:0}
.who{display:inline-flex; align-items:center; gap:8px; min-width:0}
.who .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.g-pill{display:inline-flex; align-items:center; gap:4px; font-size:11px; line-height:16px; font-weight:600;
  padding:1px 7px; border-radius:var(--r-full); background:var(--fill2); color:var(--t2); white-space:nowrap}
.g-pill.tint{background:var(--tint-soft); color:var(--tint-ink)}
.g-pill.red{background:var(--red-soft); color:var(--red-ink)}
.g-pill.orange{background:var(--orange-soft); color:var(--orange-ink)}
.g-pill.green{background:var(--green-soft); color:var(--green-ink)}
.g-pill.mute{background:transparent; color:var(--t3); font-weight:500; padding:1px 0}
.g-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c, var(--t3)); flex:0 0 auto}
.g-dot.glow{box-shadow:0 0 8px var(--c, var(--t3))}
.ch{display:inline-flex; align-items:center; gap:6px; font:500 11px/16px var(--sans); color:var(--t2); white-space:nowrap}
.ch .g-dot{width:7px; height:7px}
/* the channel marks: a 16px tile in the channel's own colour, a white glyph */
.g-chan{display:inline-grid; place-items:center; width:16px; height:16px; flex:0 0 auto; border-radius:4px; color:#fff;
  background:var(--t3); font:700 9px/1 var(--sans); box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.g-chan.li{background:var(--ch-li); font:800 9px/1 Arial, sans-serif; letter-spacing:-.02em; padding-top:1px}
.g-chan.wa{background:var(--ch-wa); border-radius:50%}
.g-chan.tg{background:var(--ch-tg); border-radius:50%}
.g-chan.ml{background:var(--ch-ml)}
.g-chan.ol{background:var(--ch-ol)}
.g-chan svg{display:block}

.g-stat{display:inline; color:var(--t2); white-space:nowrap; font:400 13px/18px var(--sans)}
.g-stat b{font-weight:600; color:var(--t1); display:inline-block}
.g-stat.hot b{color:var(--red-ink)}
.g-stats{display:inline-flex; align-items:baseline; gap:2px 12px; min-width:0}
.delta{display:inline-flex; align-items:center; gap:2px; font:600 11px/16px var(--sans); padding:1px 7px; border-radius:var(--r-full);
  background:color-mix(in srgb, var(--t3) 16%, transparent); color:var(--t2)}
.delta.up{background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green-ink)}
.delta.down{background:color-mix(in srgb, var(--red) 16%, transparent); color:var(--red-ink)}

.g-card{background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-card); box-shadow:inset 0 1px 0 var(--glass-hi)}
.g-panel{background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-panel); box-shadow:inset 0 1px 0 var(--glass-hi); padding:18px 20px; min-width:0}
.g-group{background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-card); box-shadow:inset 0 1px 0 var(--glass-hi); overflow:hidden}
.g-group > .g-row{padding:11px 14px; border-top:1px solid var(--sep); transition:background var(--d-state) var(--spring)}
.g-group > .g-row:first-child{border-top:0}
.g-group > .g-row:hover{background:var(--fill3)}
.g-group > .g-row.hov:hover{cursor:pointer}
.g-h{display:flex; align-items:baseline; gap:10px; margin:28px 4px 10px}
.g-h:first-child{margin-top:6px}
.g-h b{font:700 20px/24px var(--sans); letter-spacing:-.02em}
.g-h .n{font:500 12px/16px var(--mono); color:var(--t3)}
.g-h .more{margin-left:auto}
.g-tile{display:flex; flex-direction:column; gap:0; padding:14px 16px; border-radius:var(--r-card); background:var(--card);
  border:1px solid var(--card-line); box-shadow:inset 0 1px 0 var(--glass-hi); min-width:0; text-align:left}
.g-tile .lab{font-size:12px; line-height:16px; color:var(--t2)}
.g-tile .fig{font:700 28px/32px var(--sans); letter-spacing:-.03em; margin-top:6px; font-variant-numeric:tabular-nums}
.g-tile.sm{padding:12px 14px; border-radius:var(--r-tile); gap:2px}
.g-tile.sm .lab{font-size:11px}
.g-tile.sm .fig{font:700 24px/28px var(--sans); margin-top:0}
button.g-tile{cursor:pointer; transition:transform var(--d-lift) var(--spring), background var(--d-state) var(--spring)}
button.g-tile:hover{background:var(--card-hover); transform:translateY(-2px)}
.empty{padding:22px 16px; color:var(--t3); font-size:13px}
.empty.c{min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; font-size:13px; line-height:18px; color:var(--t2)}
.g-card.empty, .g-group .empty, .g-panel .empty{min-height:0}
.empty .eg{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--fill3); color:var(--t3)}
.empty .eg svg{width:20px; height:20px}
.kv{display:grid; grid-template-columns:110px minmax(0,1fr); gap:6px 12px; font-size:13px}
.kv dt{color:var(--t2)} .kv dd{margin:0; min-width:0; overflow-wrap:anywhere}
.sect{margin-top:20px}
.sect:first-child{margin-top:0}
.sect > .lab{font:600 11px/16px var(--sans); letter-spacing:.02em; text-transform:uppercase; color:var(--t3); margin:0 0 8px 2px; display:flex; gap:8px; align-items:baseline}
.sect > .lab .n{font-family:var(--mono); letter-spacing:0}

/* loading: nothing for the first second, then rows that breathe; never a spinner */
.skel{display:flex; flex-direction:column; animation:fadein var(--d-state) var(--spring) 1000ms both}
.skel .sr{position:static; width:auto; height:38px; overflow:visible; clip:auto; white-space:normal;
  display:grid; grid-template-columns:8px 190px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:0 20px; border-bottom:1px solid var(--sep); animation:shimmer 1750ms var(--spring) infinite}
.skel .sr i{display:block; height:9px; border-radius:4px; background:var(--fill3)}
.skel .sr i.b{background:var(--sep)}
.skin{display:flex; flex-direction:column; gap:10px; padding:16px; animation:fadein var(--d-state) var(--spring) 1000ms both}
.skin i{display:block; height:30px; border-radius:12px;
  background:linear-gradient(90deg, var(--fill3), var(--fill2), var(--fill3)) 0 0/200% 100%; animation:sweep 1.1s linear infinite}

/* a row arrives from above, a row leaves upwards and its slot closes */
.arrive, .arrived{animation:landed var(--d-land) var(--spring) both}
.going{animation:leaveup var(--d-state) var(--spring) both; pointer-events:none}
.gone{max-height:0 !important; opacity:0; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important;
  border-width:0 !important; overflow:hidden;
  transition:max-height var(--d-lift) var(--spring), opacity var(--d-lift) var(--spring), margin var(--d-lift) var(--spring), padding var(--d-lift) var(--spring)}

/* the done box (the Bridge's To do, by value) */
.td-ck{position:relative; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; vertical-align:middle; cursor:pointer; flex:0 0 auto}
.td-ck svg{width:20px; height:20px; overflow:visible}
.td-ck .o{fill:none; stroke:var(--t3); stroke-width:1.5; transition:stroke var(--d-state) var(--spring)}
.td-ck .f{fill:var(--green); transform-box:fill-box; transform-origin:center; transform:scale(0)}
.td-ck .k{fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:12; stroke-dashoffset:12; opacity:0; transition:opacity var(--d-state) var(--spring), stroke-dashoffset var(--d-state) var(--spring)}
.td-ck:hover .o, .td-ck:focus-visible .o{stroke:var(--green)}
.td-ck:hover .k{opacity:.55; stroke-dashoffset:0}
.td-ck[disabled]{cursor:default; opacity:.5}
.td-ck::after{content:""; position:absolute; inset:1px; border-radius:50%; pointer-events:none; opacity:0}
.td-ck.on .o, .td-ck.was .o, .td-ck[aria-checked="true"] .o{stroke:var(--green)}
.td-ck.was .f, .td-ck[aria-checked="true"]:not(.on) .f{transform:none}
.td-ck.was .k, .td-ck[aria-checked="true"]:not(.on) .k{stroke:#fff; opacity:1; stroke-dashoffset:0}
.td-ck.on svg{animation:td-pop var(--d-land) var(--spring)}
.td-ck.on .f{animation:td-fill var(--d-row) var(--spring) forwards}
.td-ck.on .k{stroke:#fff; opacity:1; transition:none; animation:td-tick var(--d-seg) var(--d-tap) var(--ease-io) both}
.td-ck.on::after{animation:td-ring 560ms 60ms ease-out}
@keyframes td-pop{0%{transform:scale(1)} 28%{transform:scale(.8)} 62%{transform:scale(1.16)} 100%{transform:scale(1)}}
@keyframes td-fill{from{transform:scale(0)} to{transform:scale(1)}}
@keyframes td-tick{from{stroke-dashoffset:12} to{stroke-dashoffset:0}}
@keyframes td-ring{0%{opacity:1; box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent)}
  100%{opacity:0; box-shadow:0 0 0 11px color-mix(in srgb, var(--green) 0%, transparent)}}
.td-burst{position:absolute; inset:0; pointer-events:none}
.td-burst i{position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%;
  background:var(--green); opacity:0}
.td-ck.on .td-burst i{animation:td-spark 520ms 90ms cubic-bezier(.2,.8,.2,1) forwards}
.td-burst i:nth-child(even){background:var(--tint); width:3px; height:3px; margin:-1.5px 0 0 -1.5px}
@keyframes td-spark{0%{opacity:1; transform:rotate(var(--a)) translateY(-7px) scale(1)}
  100%{opacity:0; transform:rotate(var(--a)) translateY(-19px) scale(.3)}}
/* the line struck through left to right, the row warmed green */
.td-tt{background:linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px;
  -webkit-box-decoration-break:slice; box-decoration-break:slice;
  transition:background-size var(--d-row) 80ms var(--ease-io), color var(--d-seg) var(--spring)}
.ticked{background-color:color-mix(in srgb, var(--green) 8%, transparent) !important}
.ticked .td-tt, .done .td-tt{background-size:100% 1.5px; color:var(--t3)}

/* inputs */
.g-in, .g-sel, .g-ta{height:32px; padding:0 10px; border-radius:9px; background:var(--fill3); border:1px solid var(--card-line);
  color:var(--t1); min-width:0; outline:none; transition:border-color var(--d-state) var(--spring), background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring)}
.g-in:focus, .g-sel:focus, .g-ta:focus{border-color:var(--tint-line); background:var(--fill2); box-shadow:0 0 0 3px var(--tint-soft)}
.g-in::placeholder, .g-ta::placeholder{color:var(--t3)}
.g-sel{appearance:none; padding-right:26px; background-image:linear-gradient(45deg, transparent 50%, var(--t2) 50%), linear-gradient(135deg, var(--t2) 50%, transparent 50%);
  background-position:calc(100% - 13px) 14px, calc(100% - 9px) 14px; background-size:4px 4px; background-repeat:no-repeat}
.g-sel option{background:var(--menu-solid); color:var(--t1)}
.g-ta{height:auto; padding:10px 12px; resize:vertical; line-height:20px; font-size:13.5px; width:100%}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field > span{font-size:12px; color:var(--t2)}
.row{display:flex; align-items:center; gap:8px; min-width:0}
.row.wrap{flex-wrap:wrap}
.search{position:relative; display:flex; align-items:center}
.search svg{position:absolute; z-index:1; left:10px; width:14px; height:14px; color:var(--t3); pointer-events:none}
.search .g-in{padding-left:30px; width:200px; height:32px; border-radius:12px; background:var(--glass);
  -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar); border-color:var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-sm)}

/* menus, the modal, the toast, the palette: glass floaters */
.menu{position:fixed; z-index:200; min-width:240px; max-width:320px; padding:8px; border-radius:14px;
  background:var(--glass2); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-lg);
  transition:opacity var(--d-state) var(--spring), transform var(--d-state) var(--spring)}
.menu.enter{opacity:0; transform:scale(.98) translateY(-4px)}
.menu .mi{display:flex; align-items:center; gap:10px; width:100%; min-height:32px; padding:8px 12px; border-radius:6px; text-align:left; color:var(--t1);
  font:400 13px/18px var(--sans); transition:background var(--d-state) var(--spring)}
.menu .mi:hover{background:var(--tint-soft)}
.menu .mi:focus-visible{background:var(--tint-soft); outline:2px solid var(--tint); outline-offset:-2px}
.menu .mi svg.gi{width:16px; height:16px; color:var(--t2); flex:0 0 auto}
.menu .mi .tick{margin-left:auto; color:var(--tint-ink)}
.menu .mi .tick svg.gi{color:var(--tint-ink)}
.menu .mh{font:600 11px/16px var(--sans); letter-spacing:.02em; text-transform:uppercase; color:var(--t3); padding:6px 12px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu .msep{height:1px; background:var(--sep); margin:6px 4px}
.scrim{position:fixed; inset:0; z-index:150; background:var(--scrim); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:fadein var(--d-state) var(--spring) both}
.modal{position:fixed; z-index:160; left:0; right:0; margin:0 auto; top:12vh; transform:none; width:min(480px, calc(100vw - 32px));
  max-height:76vh; overflow:auto; padding:22px; border-radius:20px;
  background:var(--glass2); -webkit-backdrop-filter:var(--blur-pal); backdrop-filter:var(--blur-pal);
  border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-lg); animation:palin var(--d-lift) var(--spring) both}
.modal h3{font:700 17px/22px var(--sans); letter-spacing:-.015em; margin-bottom:14px}
.modal .acts{display:flex; justify-content:flex-end; gap:8px; margin-top:16px}
#toast{position:fixed; z-index:300; left:0; right:0; bottom:26px; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{pointer-events:none; width:max-content; display:flex; align-items:center; gap:14px; padding:10px 16px; border-radius:14px;
  max-width:min(70ch, calc(100vw - 48px)); color:var(--t1); font:400 13px/18px var(--sans);
  background:var(--glass2); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow); animation:pop 400ms var(--spring) both;
  transition:opacity var(--d-state) var(--spring)}
.toast.out{opacity:0}
.toast.hasact{pointer-events:auto; padding:10px 12px 10px 16px}
.toast .tdot{width:8px; height:8px; border-radius:var(--r-full); flex:0 0 auto; background:var(--green)}
.toast .tdot.red{background:var(--red)}
.toast .tdot.orange{background:var(--orange)}
.toast .tmsg{min-width:0}
.toast .tact{flex:none; padding:5px 10px; border-radius:8px; background:var(--fill2); color:var(--t1); font:600 12px/16px var(--sans); white-space:nowrap;
  transition:background var(--d-state) var(--spring)}
.toast .tact:hover{background:var(--fill)}
.toast .tact kbd{font:400 11px/16px var(--mono); color:var(--t2); margin-left:6px}
.toast .g-btn{height:26px}

.pal{position:fixed; z-index:160; left:0; right:0; margin:0 auto; top:14%; width:min(90vw,640px); overflow:hidden;
  border-radius:20px; background:var(--glass2); -webkit-backdrop-filter:var(--blur-pal); backdrop-filter:var(--blur-pal);
  border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-lg); animation:palin var(--d-lift) var(--spring) both}
.pal .pin{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--sep)}
.pal .pin svg{width:18px; height:18px; flex:0 0 auto; color:var(--t2)}
.pal input{flex:1; min-width:0; border:0; background:none; padding:0; outline:none; font:400 19px/24px var(--sans); letter-spacing:-.01em; color:var(--t1)}
.pal input::placeholder{color:var(--t2)}
.pal .res{max-height:380px; overflow-y:auto; padding:8px}
.pal .gl{padding:8px 10px 4px; font:600 11px/16px var(--sans); text-transform:uppercase; letter-spacing:.04em; color:var(--t3)}
.pal .it{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; color:var(--t1); cursor:pointer}
.pal .it[aria-selected="true"]{background:var(--tint-soft)}
.pal .pic{width:24px; height:24px; border-radius:7px; flex:0 0 auto; display:grid; place-items:center; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.pal .pic svg{width:14px; height:14px}
.pal .pl{flex:1; min-width:0; font:400 14px/20px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pal .ps{color:var(--t2); font-size:12px; margin-left:8px}
.pal .it .k{margin-left:auto; flex:0 0 auto; font:500 11px/16px var(--mono); color:var(--t3)}
.pal .pnone{padding:14px 10px; color:var(--t3)}
.pal .pfoot{display:flex; align-items:center; gap:16px; padding:10px 18px; border-top:1px solid var(--sep); font-size:11px; line-height:16px; color:var(--t2)}
.pal .pfoot .spacer{flex:1}
.pal .pfoot kbd{padding:1px 5px; border-radius:4px; background:var(--fill2); color:var(--t2)}

/* sign in and welcome: one card on the wall */
.solo{height:100vh; height:100dvh; overflow:auto; display:grid; place-items:center; padding:24px 16px}
.solo .card{width:min(440px, 100%); padding:28px; border-radius:var(--r-pane); animation:pop 400ms var(--spring) both}
.solo h1{font:700 24px/30px var(--sans); letter-spacing:-.025em; margin:18px 0 18px}
.solo .steps{display:flex; gap:6px; margin-bottom:4px}
.solo .steps i{height:4px; flex:1; border-radius:2px; background:var(--fill2); transition:background var(--d-pill) var(--spring)}
.solo .steps i.on{background:var(--tint)}
.solo form{display:flex; flex-direction:column; gap:14px}
.choice{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.choice button{padding:16px 14px; border-radius:var(--r-tile); background:var(--card); border:1px solid var(--card-line); text-align:left; display:flex; flex-direction:column; gap:8px;
  transition:background var(--d-state) var(--spring), border-color var(--d-state) var(--spring), transform var(--d-lift) var(--spring)}
.choice button:hover{background:var(--card-hover); transform:translateY(-1px)}
.choice button[aria-pressed="true"]{border-color:var(--tint); background:var(--tint-soft)}
.choice b{font-size:14px}
.code{position:relative; font:400 12px/18px var(--mono); padding:10px 40px 10px 12px; border-radius:10px; background:var(--fill3); border:1px solid var(--card-line); overflow-x:auto; white-space:pre}
.code .cp{position:absolute; right:6px; top:6px}
.codes{display:flex; flex-direction:column; gap:8px}
.secret{font:500 13px/20px var(--mono); padding:10px 12px; border-radius:10px; background:var(--tint-soft); color:var(--tint-ink); overflow-wrap:anywhere; border:1px solid var(--tint-line)}

/* ================================================================ hover, press, focus
   Every part that takes a press answers the pointer: a fill or a lift on
   hover, a small give on press, the tint ring on focus. Durations come off
   the ladder in tokens.css. */
a:active{opacity:.8}
.rnav button:active{transform:scale(.96)}
.rnav button{transform-origin:50% 50%}
.rnav button:not([aria-current="true"]):hover .rl{color:var(--t1)}
.rnav button[aria-current="true"]:hover{background:color-mix(in srgb, var(--tint) 24%, transparent)}
.rnav button:hover .rc{box-shadow:0 0 0 1px var(--glass-line), 0 2px 6px rgba(0,0,0,.18)}
.rnav button:focus-visible{outline:2px solid var(--tint); outline-offset:-2px}
.rfoot .fresh{transition:transform var(--d-state) var(--spring)}
.rfoot .fresh:hover{transform:scale(1.5)}
.icbtn:focus-visible, .wsbtn:focus-visible, .bmark:focus-visible{outline:2px solid var(--tint); outline-offset:2px}
.icbtn.on:hover{background:color-mix(in srgb, var(--tint) 26%, transparent)}
.icbtn[disabled], .icbtn[disabled]:hover{opacity:.4; background:none; cursor:default}
.lm-r:active{background:var(--fill2)}
.lm-r:hover .gl{color:var(--t1)}
.lm-r:hover .n{color:var(--t2)}
.lm-r.zero:hover{color:var(--t2)}
.lm-r[aria-current="true"]:active{background:color-mix(in srgb, var(--tint) 26%, transparent)}
.lm-h button{color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; border-radius:6px; padding:0 4px; margin:0 -4px;
  transition:color var(--d-state) var(--spring), background var(--d-state) var(--spring)}
.lm-h button:hover{color:var(--t1); background:var(--fill3)}
.g-seg > button:hover:not([aria-pressed="true"]){background:var(--fill3)}
.g-seg > button:active{transform:scale(.97)}
.g-seg > button{transition:background var(--d-seg) var(--spring), color var(--d-seg) var(--spring), box-shadow var(--d-seg) var(--spring), transform var(--d-press) var(--ease-press)}
.g-seg > button:hover .n{color:var(--t2)}
.g-seg > button:focus-visible{outline:2px solid var(--tint); outline-offset:-1px}
.g-btn:focus-visible{outline:2px solid var(--tint); outline-offset:2px}
.g-btn:hover svg{opacity:1}
.g-btn svg{opacity:.9; transition:opacity var(--d-state) var(--spring)}
.g-btn.pri:active:not([disabled]){filter:brightness(.96)}
.g-btn.ter:active:not([disabled]){filter:brightness(.96)}
.g-btn[disabled]:hover{background:var(--fill2); filter:none}
.g-btn.pri[disabled]:hover{background:var(--tint-fill)}
.g-btn.plain[disabled]:hover{background:transparent}
.g-chip:active{transform:scale(.97)}
.g-chip{transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring), border-color var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
.g-chip[aria-pressed="true"]:hover{background:color-mix(in srgb, var(--tint) 26%, transparent)}
.g-chip:focus-visible{outline:2px solid var(--tint); outline-offset:2px}
a.g-pill, button.g-pill{transition:filter var(--d-state) var(--spring), background var(--d-state) var(--spring)}
a.g-pill:hover, button.g-pill:hover{filter:brightness(1.12); text-decoration:none}
a.who:hover .nm, .who a:hover .nm{text-decoration:underline; text-underline-offset:2px}
a.who{color:inherit; text-decoration:none}
.g-face, .g-ini{transition:box-shadow var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
a:hover > .g-face, button:hover > .g-face, a:hover > .g-ini, button:hover > .g-ini{box-shadow:0 0 0 1px var(--card-line), 0 0 0 3px var(--fill3)}
a.g-card, button.g-card{transition:background var(--d-state) var(--spring), transform var(--d-lift) var(--spring), box-shadow var(--d-lift) var(--spring)}
a.g-card:hover, button.g-card:hover{background:var(--card-hover); transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-sm); text-decoration:none}
.g-group > a.g-row{display:flex; color:var(--t1); text-decoration:none}
.g-group > a.g-row:hover, .g-group > button.g-row:hover{background:var(--fill3); text-decoration:none}
.g-group > .g-row:active{background:var(--fill2)}
.g-panel.hov{transition:background var(--d-state) var(--spring), transform var(--d-lift) var(--spring)}
.g-panel.hov:hover{background:var(--card-hover); transform:translateY(-1px)}
button.g-tile:active{transform:scale(.98)}
button.g-tile:focus-visible{outline:2px solid var(--tint); outline-offset:2px}
.g-h .more{transition:color var(--d-state) var(--spring)}
.g-h .more:hover{color:var(--t1)}
.g-h a:hover{text-decoration:none; color:var(--t1)}
.kv a:hover{text-decoration:underline}
.g-in:hover:not(:focus), .g-sel:hover:not(:focus), .g-ta:hover:not(:focus){border-color:var(--fill); background:var(--fill2)}
.search .g-in:hover:not(:focus){background:var(--glass2); border-color:var(--glass-line)}
.search:hover svg, .search:focus-within svg{color:var(--t2)}
.search svg{transition:color var(--d-state) var(--spring)}
input[type="checkbox"], input[type="radio"]{accent-color:var(--tint); cursor:pointer}
input[type="checkbox"]:hover, input[type="radio"]:hover{filter:brightness(1.1)}
label.field:hover > span{color:var(--t1)}
label.field > span{transition:color var(--d-state) var(--spring)}
.menu .mi:active{background:color-mix(in srgb, var(--tint) 28%, transparent)}
.menu .mi:hover svg.gi{color:var(--t1)}
.menu .mi:hover .g-chan{filter:brightness(1.08)}
.toast.hasact:hover{box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-lg)}
.toast .tact:active{transform:scale(.96)}
.toast .tact{transition:background var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
.toast .tact:hover kbd{color:var(--t1)}
.pal .it{transition:background var(--d-tap) var(--spring)}
.pal .it:hover:not([aria-selected="true"]){background:var(--fill3)}
.pal .it:active{background:color-mix(in srgb, var(--tint) 28%, transparent)}
.pal .it:hover .k{color:var(--t2)}
.pal .pfoot kbd{transition:background var(--d-state) var(--spring)}
.pal .pfoot span:hover kbd{background:var(--fill)}
.choice button:active{transform:scale(.98)}
.choice button[aria-pressed="true"]:hover{background:color-mix(in srgb, var(--tint) 24%, transparent)}
.code .cp{transition:opacity var(--d-state) var(--spring)}
.code:not(:hover) .cp{opacity:.7}
.secret:hover{border-color:var(--tint)}
.secret{transition:border-color var(--d-state) var(--spring)}
.ihead .who:hover b{text-decoration:underline; text-underline-offset:2px}
.td-ck:active svg{transform:scale(.9)}
.td-ck svg{transition:transform var(--d-press) var(--ease-press)}
.td-ck:focus-visible{outline:2px solid var(--tint); outline-offset:2px}
.empty .eg{transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring)}
.empty:hover .eg{background:var(--fill2); color:var(--t2)}
::-webkit-scrollbar-thumb:hover{background:var(--t3); background-clip:padding-box}
@media (min-width: 431px){
  .insp:not([hidden]){animation:slidein var(--d-seg) var(--spring) backwards}
  .lane.switched .insp:not([hidden]){animation:none}
}
.bar .g-stat b{transition:color var(--d-state) var(--spring)}
.bar .g-stat:hover b{color:var(--tint-ink)}

@media (prefers-reduced-motion: reduce){
  /* the rail: nothing gives under a press, the counts don't rise */
  .rnav button:active, .bmark:active, .icbtn:active, .wsbtn:active{transform:none}
  .rnav .rc.rolled, .rolled{animation:none}
}
@media (prefers-reduced-motion: reduce){
  /* lifts become a change of tone only */
  button.g-tile:hover, a.g-card:hover, button.g-card:hover, .g-panel.hov:hover, .choice button:hover{transform:none}
}
@media (prefers-reduced-motion: reduce){
  /* floaters appear where they land */
  .menu.enter{transform:none}
  .modal, .pal, .toast, .scrim, .insp:not([hidden]){animation:none}
}
@media (prefers-reduced-motion: reduce){
  /* loading holds still at half strength instead of breathing */
  .skel, .skin{animation:none; opacity:1}
  .skel .sr{opacity:.7}
  .skin i{background:var(--fill3)}
}
@media (prefers-reduced-motion: reduce){
  /* rows land, move and leave without travel */
  .arrive, .arrived, .going{animation:none}
  .gone{transition:none}
}
@media (prefers-reduced-motion: reduce){
  /* the done box fills and ticks at once, no burst */
  .td-ck.on svg, .td-ck.on .f, .td-ck.on .k, .td-ck.on::after, .td-ck.on .td-burst i{animation:none}
  .td-ck.on .f{transform:none}
  .td-ck.on .k{stroke-dashoffset:0}
  .td-tt{transition:none}
}
@media (prefers-reduced-motion: reduce){
  /* status dots carry their colour, never a pulse */
  .fresh.run, .fresh.warn, .fresh.cold{animation:none}
  .fresh.cold{box-shadow:0 0 0 2px color-mix(in srgb, var(--red) 30%, transparent)}
}
@media (prefers-reduced-motion: reduce){
  /* a lane change cuts, the title doesn't fade */
  .lane.switched .sheet > .scroll, .lane.switched .sheet > .cal-wrap, .lane.switched .gcap.title, .lane.switched .lm-sc{animation:none}
}
@media (prefers-reduced-motion: reduce){
  /* segmented controls, chips and buttons change tone, never scale */
  .g-seg > button:active, .g-chip:active, .g-btn:active:not([disabled]), .g-btn.icon:active:not([disabled]), .toast .tact:active, .choice button:active, button.g-tile:active{transform:none}
}

/* ================================================================ phone */
.tabbar{display:none}
.phonehead{display:none}

@media (max-width: 430px){
  body{overflow:hidden}
  .app{padding:0; gap:0; flex-direction:column; height:100dvh}
  .rail{display:none}
  .phonehead{display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top) + 10px) 16px 8px;
    flex:0 0 auto}
  .phonehead h1{font:700 28px/34px var(--sans); letter-spacing:-.03em; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .lane{flex-direction:column; gap:0; padding:0 0 calc(56px + env(safe-area-inset-bottom)); min-height:0}
  .lane > .g-pane{border-radius:0; border-left:0; border-right:0; box-shadow:none}
  .lane > .sheet.g-pane{border-top:0; border-bottom:0}
  .lm{display:none}
  .lm + .sheet{border-radius:0}
  .sheet{min-height:0}
  .bar{flex:0 0 auto; height:auto; min-height:46px; padding:6px 16px 8px; flex-wrap:wrap; gap:8px}
  .bar > h2, .gcap.title h2{display:none}
  .gcap.title{background:none; border:0; box-shadow:none; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none}
  .bar .g-stats{flex-wrap:wrap; font-size:12px}
  .pad{padding:4px 16px 24px}
  .insp, .insp.wide{position:fixed; inset:0; z-index:120; width:auto; flex:none; border-radius:0; border:0;
    transform:translateX(100%); transition:transform var(--d-lift) var(--spring); background:var(--menu-solid)}
  .insp.open{transform:none}
  .insp:not(.open){visibility:hidden}
  .ihead{padding-top:calc(env(safe-area-inset-top) + 10px)}
  .iback{display:grid}
  .ihead .icbtn[data-act="close"]:not(.iback){display:none}
  .search .g-in{width:100%}
  .search{flex:1}
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:100;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); gap:2px;
    background:var(--glass); -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar); border-top:1px solid var(--sep)}
  .tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; color:var(--t2); position:relative; min-height:44px;
    transition:color var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
  .tabbar button:active{transform:scale(.94)}
  .tabbar button svg{width:22px; height:22px}
  .tabbar button span{font:500 10px/12px var(--sans)}
  .tabbar button[aria-current="true"]{color:var(--tint-ink)}
  .tabbar .rc{position:absolute; top:0; left:calc(50% + 6px); min-width:16px; height:16px; padding:0 4px; border-radius:9px;
    font:600 10px/16px var(--mono); background:var(--red); color:#fff; text-align:center; font-variant-numeric:tabular-nums}
  .menu{left:8px !important; right:8px; max-width:none; bottom:calc(64px + env(safe-area-inset-bottom)); top:auto !important; transform-origin:50% 100% !important}
  .modal{top:auto; bottom:0; left:0; right:0; width:100%; border-radius:20px 20px 0 0; max-height:88vh;
    padding-bottom:calc(20px + env(safe-area-inset-bottom)); animation:pop 400ms var(--spring) both}
  .pal{top:8px; width:calc(100vw - 16px)}
  #toast{bottom:calc(70px + env(safe-area-inset-bottom))}
  .g-in, .g-sel, .g-ta{font-size:16px}
  .g-btn{min-height:36px}
  .solo .card{padding:22px 18px}
  .choice{grid-template-columns:1fr}
  .empty.c{min-height:240px}
}