/* ══════════════════════════════════════════════════════════════════
   app.css — Happy Light Notify.

   Same warm-ink token set as the rest of the suite (Traders, Analytics,
   Journal), so theme.js's [data-theme] switch drives this page too.
   Dark is the bare :root; light overrides only what changes. theme.js
   stamps an explicit data-theme before first paint.

   Built sidebar-first: the whole app has to work in a 320–420 px strip
   next to another window. Wider screens get a reading pane; nothing is
   designed for wide first and squeezed down.

   A level is never colour alone: every event also carries a glyph and
   its level word for screen readers. The CSP is style-src 'self' with no
   'unsafe-inline': nothing sets a style attribute in markup.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0a0d; --bg-2:#16131a;
  --panel:rgba(29,25,34,.86); --panel-solid:#1d1922;
  --card:#1d1922;
  --line:rgba(184,175,164,.20); --line-hot:rgba(245,158,11,.45);
  --ink:#f5f1ea; --ink-dim:#b8afa4; --ink-faint:#6b635a;
  --brand:#f59e0b; --brand-2:#a78bfa;
  --ok:#4ee8a5; --warn:#fbbf24; --bad:#f87171;
  --good-text:#0ca30c; --bad-text:#e66767;
  --surf:rgba(43,37,51,.72);
  --field:#141117;
  --shadow:4px 4px 0 rgba(0,0,0,.45);
  --logo-glow:1; --logo-glow-color:#f59e0b; --logo-bulb:#d9a441;
  --logo-glass-hi:#fffdf6; --logo-glass-lo:#f8e3b6; --logo-face:#8a6a3b;
  --font:"Inter Variable","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:12px;

  /* event levels: stripe, glyph and soft fill. Never the only cue. */
  --l-info:#7fb8d8; --l-success:#4ee8a5; --l-warning:#fbbf24; --l-error:#fb7185;
  --l-info-soft:rgba(127,184,216,.10); --l-success-soft:rgba(78,232,165,.09);
  --l-warning-soft:rgba(251,191,36,.10); --l-error-soft:rgba(251,113,133,.11);
  /* colours a rule or the Look dialog can give an event */
  --c-red:#fb7185; --c-orange:#fb923c; --c-yellow:#facc15; --c-green:#4ade80; --c-teal:#2dd4bf;
  --c-blue:#60a5fa; --c-purple:#c084fc; --c-pink:#f472b6; --c-gray:#a8a29e;
}
:root[data-theme="light"]{
  --bg:#f6f2ea; --bg-2:#efe9de;
  --panel:rgba(255,253,247,.92); --panel-solid:#fffdf7;
  --card:#fffdf7;
  --line:rgba(90,74,54,.20); --line-hot:rgba(180,83,9,.42);
  --ink:#241f18; --ink-dim:#5b5145; --ink-faint:#7d7264;
  --brand:#b45309; --brand-2:#6d28d9;
  --ok:#047857; --warn:#8c6510; --bad:#b91c1c;
  --good-text:#006300; --bad-text:#b91c1c;
  --surf:rgba(241,236,226,.80);
  --field:#ffffff;
  --shadow:4px 4px 0 rgba(90,74,54,.18);
  --logo-glow:0; --logo-bulb:#a86f18;
  --logo-glass-hi:#fffaec; --logo-glass-lo:#f2d79c; --logo-face:#6b4d22;

  --l-info:#2b6c8f; --l-success:#047857; --l-warning:#8c6510; --l-error:#b91c1c;
  --l-info-soft:rgba(43,108,143,.10); --l-success-soft:rgba(4,120,87,.10);
  --l-warning-soft:rgba(140,101,16,.12); --l-error-soft:rgba(185,28,28,.09);
  --c-red:#be123c; --c-orange:#c2410c; --c-yellow:#a16207; --c-green:#15803d; --c-teal:#0f766e;
  --c-blue:#1d4ed8; --c-purple:#7e22ce; --c-pink:#be185d; --c-gray:#57534e;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100dvh;
}
body.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
a{color:var(--brand)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel-solid);
  color:var(--ink);padding:.6rem .9rem;z-index:80;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ── header ── */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.6rem;
  padding:.55rem 1rem;background:var(--panel);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.home{text-decoration:none;color:inherit;flex:none}
.wordmark{font-weight:700;letter-spacing:-.03em;line-height:1;
  display:inline-flex;flex-direction:column;align-items:center;gap:.3rem}
.wordmark.small{font-size:1rem}
.wordmark .hl-lockup{height:2em;width:auto;display:inline-block;color:var(--ink);flex:none}
.wm-b{color:var(--ink-dim);font-size:max(.62rem,.16em);font-weight:700;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;line-height:1}

.tabs{display:flex;gap:.25rem;overflow-x:auto;min-width:0;flex:0 1 auto;
  margin-left:.6rem;scrollbar-width:thin;padding:.15rem}
.tab{appearance:none;font:inherit;font-size:.85rem;white-space:nowrap;cursor:pointer;
  color:var(--ink-dim);background:none;border:1px solid transparent;border-radius:999px;
  padding:.3rem .85rem;max-width:16rem;overflow:hidden;text-overflow:ellipsis}
.tab:hover{color:var(--ink);border-color:var(--line)}
.tab[aria-selected="true"]{color:var(--ink);background:var(--surf);border-color:var(--line-hot);font-weight:600}
.top-act{margin-left:auto;display:flex;align-items:center;gap:.45rem;flex:none}

/* ── buttons ── */
.btn{appearance:none;font:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--ink);background:var(--surf);border:1px solid var(--line);
  border-radius:999px;padding:.38rem .9rem}
.btn:hover{border-color:var(--line-hot)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--brand);border-color:transparent;color:#1a1206;font-weight:600}
:root[data-theme="light"] .btn.primary{color:#fff}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
#da-ok.danger{background:var(--bad);color:#fff;border-color:transparent}
.btn.small{font-size:.78rem;padding:.25rem .7rem}
.btn svg,.icon-btn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-btn{appearance:none;flex:none;display:grid;place-items:center;
  width:1.9rem;height:1.9rem;padding:0;border-radius:.45rem;cursor:pointer;font:inherit;
  background:none;border:1px solid transparent;color:var(--ink-dim)}
.icon-btn:hover{color:var(--ink);border-color:var(--line)}
.icon-btn[aria-pressed="true"]{color:var(--brand);border-color:var(--line-hot)}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;background:var(--surf)}
.seg button{appearance:none;background:none;border:0;color:var(--ink-dim);
  font:inherit;font-size:.8rem;padding:.32rem .8rem;cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--brand);color:#1a1206;font-weight:700}
:root[data-theme="light"] .seg button.on{color:#fff}

.notice{position:fixed;left:50%;top:4.2rem;transform:translateX(-50%);z-index:90;
  margin:0;max-width:min(36rem,calc(100vw - 2rem));padding:.55rem .9rem;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:.6rem;
  box-shadow:var(--shadow);font-size:.88rem}
.notice.bad{border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.notice.ok{border-color:color-mix(in srgb,var(--ok) 55%,transparent)}

/* ── dialogs ── */
.dlg{border:1px solid var(--line);border-radius:var(--r);padding:0;color:var(--ink);
  background:var(--panel-solid);box-shadow:var(--shadow);max-height:calc(100dvh - 2rem);
  width:min(30rem,calc(100vw - 2rem))}
.dlg[open]{display:flex;flex-direction:column}
.dlg::backdrop{background:rgba(8,7,10,.6)}
:root[data-theme="light"] .dlg::backdrop{background:rgba(60,50,35,.35)}
.dlg-wide{width:min(64rem,calc(100vw - 2rem))}
.dlg-small{width:min(26rem,calc(100vw - 2rem))}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem .8rem .6rem 1.1rem;border-bottom:1px solid var(--line);flex:none}
.dlg-head h2{margin:0;font-size:1.05rem}
.dlg-foot{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
  padding:.7rem 1.1rem;border-top:1px solid var(--line);flex:none}
.dlg-foot .grow{flex:1}
.da-text{margin:.9rem 1.1rem 0;color:var(--ink-dim);font-size:.9rem}
.da-input{margin:.9rem 1.1rem 0;font:inherit;color:var(--ink);background:var(--field);
  border:1px solid var(--line);border-radius:.45rem;padding:.45rem .6rem}
.dlg-small .dlg-foot{border-top:0}

.fld{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1;margin:0;border:0;padding:0}
.fld>span,.fld>legend{font-size:.75rem;font-weight:600;color:var(--ink-dim);padding:0}
.fld small{font-weight:400;color:var(--ink-faint)}
.fld input,.fld select,.fld textarea,.filter-row select,.filter-row input{
  font:inherit;font-size:.88rem;color:var(--ink);background:var(--field);min-width:0;width:100%;
  border:1px solid var(--line);border-radius:.45rem;padding:.4rem .55rem}
.fld textarea{font-family:var(--mono);font-size:.8rem;resize:vertical;min-height:8rem}
.fld-row{display:flex;gap:.7rem;align-items:flex-end}
.fld-checks{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.85rem}
.fld-checks label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
/* ── bar menu ── same <details>/<summary> pattern as the siblings ── */
.hl-menu{position:relative}
.hl-menu-summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;
  padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--ink-dim);font-size:.8rem;user-select:none}
.hl-menu-summary::-webkit-details-marker{display:none}
.hl-menu-summary:hover{border-color:var(--line-hot);color:var(--ink)}
.hl-menu-bars{width:.85rem;height:.7rem;flex:none;
  border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.hl-menu-bars::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);
  border-top:2px solid currentColor}
.hl-menu-panel{position:absolute;right:0;top:calc(100% + .35rem);z-index:60;
  min-width:15rem;display:flex;flex-direction:column;padding:.3rem;
  border:1px solid var(--line);border-radius:.6rem;
  background:var(--panel-solid);box-shadow:var(--shadow);max-height:calc(100dvh - 5rem);overflow:auto}
.hl-menu-head{margin:.45rem .55rem .2rem;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint)}
.hl-menu-head:first-child{margin-top:.2rem}
.hl-menu-item{appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  font-size:.85rem;color:var(--ink);text-align:left;text-decoration:none;
  padding:.45rem .55rem;border-radius:.4rem}
.hl-menu-item:hover{background:var(--line)}
.hl-menu-item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.hl-menu-seg{margin:.15rem .55rem .3rem;align-self:flex-start}

/* ── signed-in chip ── same markup and rules in every Happy Light app. ── */
.hl-me{display:inline-flex;align-items:center;gap:.4rem;flex:none;max-width:13rem;
  padding:.15rem .7rem .15rem .15rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));
  background:color-mix(in srgb,var(--ok) 9%,var(--surf,transparent));
  color:var(--ink);font-size:.78rem;font-weight:600;line-height:1.2;
  text-decoration:none;white-space:nowrap}
.hl-me:hover{border-color:color-mix(in srgb,var(--ok) 65%,transparent);
  background:color-mix(in srgb,var(--ok) 16%,var(--surf,transparent))}
.hl-me-avatar{position:relative;display:grid;place-items:center;flex:none;
  width:1.45rem;height:1.45rem;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 10%,transparent)}
.hl-me-ghost{width:.8rem;height:.8rem;fill:currentColor;animation:hl-me-bob 2.4s steps(4) infinite}
.hl-me-dot{position:absolute;right:-1px;bottom:-1px;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--bg)}
.hl-me-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--ok);animation:hl-me-ping 2.4s cubic-bezier(.22,.61,.36,1) infinite}
.hl-me-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
@keyframes hl-me-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes hl-me-ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.4);opacity:0}}
@media (max-width:560px){.hl-me{padding:.15rem}.hl-me-name{display:none}}
@media (prefers-reduced-motion:reduce){.hl-me-ghost,.hl-me-dot::after,.w-status.loading::before{animation:none}}

.gate{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px)}
.gate-card{width:min(26rem,100%);padding:1.4rem 1.3rem;text-align:center;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.gate-msg{margin:0 0 1rem;font-size:.95rem}
.gate-act{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.gate-act:empty{display:none}
.gate-act a.btn{text-decoration:none}


/* ══════════════════════════ Notify ══════════════════════════ */
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grow{flex:1}
.hint{color:var(--ink-dim);font-size:.82rem;margin:.3rem 0}
.dim{color:var(--ink-faint)}
.mono{font-family:var(--mono)}
kbd{font:600 .72rem var(--mono);padding:.05rem .35rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:.3rem;background:var(--surf);color:var(--ink)}
body{font-size:14px}

/* ── header: two compact rows, sticky ── */
.top{flex-direction:column;align-items:stretch;gap:.35rem;padding:.45rem .75rem .4rem}
.top-row{display:flex;align-items:center;gap:.5rem;min-width:0}
.home{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none}
.bulb{width:1.4rem;height:1.9rem;flex:none}
.app-name{font-weight:750;letter-spacing:-.02em;font-size:1.02rem}
.live{display:inline-grid;place-items:center;width:1rem;height:1rem}
.live-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ink-faint)}
.live[data-state="on"] .live-dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.live[data-state="off"] .live-dot{background:var(--warn)}
.hl-menu-summary{padding:.3rem .65rem}
.hl-menu-panel{min-width:14rem}
@media (max-width:480px){.hl-menu-word{display:none}.hl-me{padding:.15rem}.hl-me-name{display:none}}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem;margin:0;padding:.15rem;
  border:1px solid var(--line);border-radius:.6rem;background:var(--surf);overflow:visible}
.tab{display:flex;align-items:center;justify-content:center;gap:.35rem;min-width:0;
  padding:.3rem .35rem;border-radius:.45rem;border:1px solid transparent;font-size:.8rem;
  color:var(--ink-dim);text-decoration:none;max-width:none}
.tab svg{width:.95rem;height:.95rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab:hover{color:var(--ink);border-color:transparent;background:var(--line)}
.tab[aria-current="page"]{color:var(--ink);background:var(--panel-solid);border-color:var(--line-hot);font-weight:650}
.count{display:inline-block;min-width:1.25rem;padding:0 .3rem;border-radius:999px;background:var(--brand);
  color:#1a1206;font-size:.68rem;font-weight:750;line-height:1.25rem;text-align:center;font-variant-numeric:tabular-nums}
:root[data-theme="light"] .count{color:#fff}
@media (max-width:360px){.tab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tab{padding:.4rem .2rem}}

.view{max-width:none;margin:0;padding:.6rem .75rem 2.5rem;outline:none}
.notice{top:auto;bottom:1rem}
.page-head{margin:.2rem 0 .7rem}
.page-head h1{margin:0;font-size:1.15rem;letter-spacing:-.01em}
.loading{color:var(--ink-faint);padding:2rem 0;text-align:center}
.empty{text-align:center;padding:2rem .5rem;color:var(--ink-dim)}
.empty .btn{text-decoration:none}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.6rem}
.row.spread{justify-content:space-between}
.btn{text-decoration:none}
.btn.small{padding:.22rem .6rem;font-size:.76rem;gap:.3rem}
.btn.small svg{width:.85rem;height:.85rem}
.icon-btn{width:1.8rem;height:1.8rem}

/* ── feed ── */
body[data-view="feed"] .view{padding:0}
.feed-layout{display:block}
.feed-bar{position:sticky;top:var(--top-h,5.6rem);z-index:20;display:flex;flex-direction:column;gap:.35rem;
  padding:.45rem .75rem;background:var(--bg);border-bottom:1px solid var(--line)}
.feed-bar-row{display:flex;align-items:center;gap:.35rem;min-width:0}
.search{flex:1;min-width:0;font:inherit;font-size:.85rem;color:var(--ink);background:var(--field);
  border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem}
.chips{flex-wrap:nowrap}
.chip{appearance:none;font:inherit;font-size:.74rem;cursor:pointer;white-space:nowrap;color:var(--ink-dim);
  background:none;border:1px solid var(--line);border-radius:999px;padding:.15rem .55rem;line-height:1.4}
.chip:hover{color:var(--ink);border-color:var(--line-hot)}
.chip[aria-pressed="true"]{color:var(--ink);background:var(--surf);border-color:var(--line-hot);font-weight:650}
.chip-group{display:inline-flex;gap:.2rem}
.chip.lv{width:1.6rem;height:1.6rem;padding:0;display:inline-grid;place-items:center}
.chip.lv .glyph{font-size:.72rem;font-weight:800}
.chip.lv[aria-pressed="true"]{background:var(--lv-soft);border-color:var(--lv)}
.src-sel{flex:1;min-width:0;font:inherit;font-size:.76rem;color:var(--ink);background:var(--field);
  border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem;height:1.6rem}

.lv-info{--lv:var(--l-info);--lv-soft:var(--l-info-soft)}
.lv-success{--lv:var(--l-success);--lv-soft:var(--l-success-soft)}
.lv-warning{--lv:var(--l-warning);--lv-soft:var(--l-warning-soft)}
.lv-error{--lv:var(--l-error);--lv-soft:var(--l-error-soft)}

.feed{list-style:none;margin:0;padding:0;outline:none}
.c-red,.c-orange,.c-yellow,.c-green,.c-teal,.c-blue,.c-purple,.c-pink,.c-gray{--lv-soft:color-mix(in srgb,var(--lv) 12%,transparent)}
.c-red{--lv:var(--c-red)}.c-orange{--lv:var(--c-orange)}.c-yellow{--lv:var(--c-yellow)}.c-green{--lv:var(--c-green)}
.c-teal{--lv:var(--c-teal)}.c-blue{--lv:var(--c-blue)}.c-purple{--lv:var(--c-purple)}.c-pink{--lv:var(--c-pink)}.c-gray{--lv:var(--c-gray)}
.ev{position:relative;cursor:pointer;border-bottom:1px solid var(--line);overflow:hidden;touch-action:pan-y}
.ev-row{position:relative;z-index:1;display:flex;gap:.55rem;padding:.5rem .75rem .5rem .6rem;
  border-left:3px solid var(--lv);background:var(--bg);transition:transform .18s ease-out}
.ev.swiping .ev-row{transition:none}
.ev:hover .ev-row{background:color-mix(in srgb,var(--surf) 60%,var(--bg))}
.ev.active .ev-row{background:color-mix(in srgb,var(--surf) 100%,var(--bg))}
.feed:focus-visible .ev.active .ev-row{box-shadow:inset 0 0 0 2px var(--brand)}
.ev.open .ev-row{background:color-mix(in srgb,var(--lv-soft) 100%,var(--bg))}
.ev.selected .ev-row{background:color-mix(in srgb,var(--brand) 12%,var(--bg))}
.ev.fresh .ev-row{animation:fresh 1.6s ease-out}
@keyframes fresh{from{background:color-mix(in srgb,var(--brand) 22%,var(--bg))}}
@media (prefers-reduced-motion:reduce){.ev.fresh .ev-row{animation:none}.ev-row{transition:none}}
.ev-glyph{flex:none;display:grid;place-items:center;width:1.25rem;height:1.25rem;margin-top:.1rem;border-radius:50%;
  background:var(--lv-soft);color:var(--lv);font-size:.68rem;font-weight:850;padding:0;border:0;font-family:inherit;cursor:pointer}
button.ev-glyph:hover{box-shadow:0 0 0 2px var(--lv)}
button.ev-glyph:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ev-glyph.has-icon{font-size:.82rem;font-weight:400}
.ev-glyph.sel{background:var(--brand);color:#1a1206}
.ev-glyph svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="light"] .ev-glyph.sel{color:#fff}
/* swipe: what lets go of the row shows underneath */
.swipe-hint{position:absolute;inset:0;display:flex;align-items:center;gap:.4rem;padding:0 1rem;font-size:.78rem;font-weight:700;opacity:0}
.swipe-hint svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.swipe-right{justify-content:flex-start;background:color-mix(in srgb,var(--ok) 22%,var(--bg));color:var(--ink)}
.swipe-left{justify-content:flex-end;background:color-mix(in srgb,var(--bad) 24%,var(--bg));color:var(--ink)}
.ev.swiping[data-dir="right"] .swipe-right,.ev.swiping[data-dir="left"] .swipe-left{opacity:.6}
.ev.armed[data-dir="right"] .swipe-right,.ev.armed[data-dir="left"] .swipe-left{opacity:1}
/* hover actions, for a mouse; touch has the swipe and the opened event's buttons */
.ev-quick{position:absolute;right:.45rem;top:.3rem;display:none;gap:.15rem;padding:.1rem;border-radius:.5rem;
  background:var(--panel-solid);border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ev-quick .icon-btn{width:1.6rem;height:1.6rem;border:0}
.ev-quick .icon-btn:hover{background:var(--line)}
@media (hover:hover){.ev:hover .ev-quick,.ev:focus-within .ev-quick{display:flex}}
.feed:focus-visible .ev.active .ev-quick{display:flex}
.ev-main{flex:1;min-width:0}
.ev-meta{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--ink-faint);min-width:0}
.ev-src{font-weight:650;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ev-muted svg{width:.75rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;display:block}
.ev-time{margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
.ev-dot{flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--brand)}
.ev-title{margin:.1rem 0 0;font-size:.86rem;font-weight:700;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ev.read .ev-title{font-weight:500;color:var(--ink-dim)}
.ev.open .ev-title{-webkit-line-clamp:unset}
.ev.muted{opacity:.7}
.ev-body{margin:.1rem 0 0;font-size:.78rem;color:var(--ink-dim);line-height:1.35;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ev-detail{margin-top:.35rem;cursor:auto}
.ev-full{margin:0 0 .4rem;font-size:.82rem;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.ev-when{margin:0 0 .4rem;font-size:.72rem;color:var(--ink-faint)}
.ev-actions{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.raw{margin:.45rem 0 0;max-height:22rem;overflow:auto;font:.72rem/1.45 var(--mono);padding:.5rem .6rem;
  background:var(--field);border:1px solid var(--line);border-radius:.45rem;white-space:pre-wrap;overflow-wrap:anywhere}
.empty-feed{padding:2rem 1rem;text-align:center;color:var(--ink-dim);list-style:none}
.empty-feed .btn{margin-top:.4rem}
.more{display:flex;margin:.8rem auto}
.feed-status:empty{display:none}

/* reading pane beside the list once there is room for both */
.pane{display:none}
@media (min-width:860px){
  .feed-layout{display:grid;grid-template-columns:minmax(22rem,30rem) 1fr;align-items:start}
  .feed-col{border-right:1px solid var(--line);min-height:calc(100dvh - var(--top-h,5.6rem))}
  .pane{display:block;position:sticky;top:var(--top-h,5.6rem);max-height:calc(100dvh - var(--top-h,5.6rem));overflow:auto;padding:1.2rem 1.6rem}
  .pane-in{max-width:46rem}
  .pane-level{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .4rem;font-size:.75rem;font-weight:700;color:var(--lv)}
  .pane-title{margin:0 0 .6rem;font-size:1.2rem;line-height:1.3;overflow-wrap:anywhere}
  .pane .ev-full{font-size:.92rem}
  .pane-empty{color:var(--ink-faint);margin-top:3rem;text-align:center}
}

/* ── cards (sources, rules, settings) ── */
.cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:.7rem;padding:.65rem .75rem;min-width:0}
section.card{margin-bottom:.6rem}
.card h2{margin:0;font-size:.92rem;overflow-wrap:anywhere}
section.card h2{margin-bottom:.4rem}
.card-head{display:flex;align-items:flex-start;gap:.5rem}
.card-title{flex:1;min-width:0}
.card-sub{margin:.1rem 0 0;font-size:.74rem;color:var(--ink-dim);overflow-wrap:anywhere}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:.5rem}
.card.muted{border-style:dashed}
.card.off{opacity:.65}
.add-src{margin-bottom:.7rem}
.add-row{display:flex;flex-wrap:wrap;gap:.35rem}
.add-row input{flex:1 1 10rem;min-width:0}
.add-row input,.add-row select{font:inherit;font-size:.85rem;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:.45rem;padding:.35rem .5rem}
.hook-row{display:flex;gap:.3rem;margin-top:.45rem}
.hook-url{flex:1;min-width:0;font:.74rem var(--mono);color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:.4rem;padding:.3rem .45rem}
.help{margin-top:.45rem;font-size:.8rem;color:var(--ink-dim)}
.help summary{cursor:pointer;font-size:.76rem;color:var(--ink-dim);width:max-content}
.help p,.help ul{margin:.35rem 0}
.help ul{padding-left:1.1rem}
.snippet{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font:.72rem/1.45 var(--mono);padding:.45rem .55rem;background:var(--field);border:1px solid var(--line);border-radius:.4rem;color:var(--ink)}
.pending{margin:.4rem 0 0;font-size:.74rem;color:var(--warn)}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:.35rem 0;border-bottom:1px solid var(--line);margin:0;flex-wrap:nowrap}
.plain li:last-child{border-bottom:0}
.ok-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--ok)}

/* switch */
.switch{position:relative;display:inline-block;flex:none;width:2.2rem;height:1.25rem;cursor:pointer}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.switch-ui{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}
.switch-ui::after{content:"";position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--ink-dim);transition:transform .15s}
.switch input:checked+.switch-ui{background:var(--brand)}
.switch input:checked+.switch-ui::after{transform:translateX(.95rem);background:#fff}
.switch input:focus-visible+.switch-ui{outline:2px solid var(--brand);outline-offset:2px}

/* delivery log */
.log{list-style:none;margin:0;padding:0;font-size:.78rem}
.log li{display:flex;gap:.45rem;align-items:flex-start;padding:.35rem 0;border-bottom:1px solid var(--line)}
.log li:last-child{border-bottom:0}
.log-mark{flex:none;width:1rem;text-align:center;font-weight:800}
.log li.ok .log-mark{color:var(--ok)}
.log li.bad .log-mark{color:var(--bad)}
.log-main{flex:1;min-width:0;overflow-wrap:anywhere}
.log-main small{color:var(--ink-dim)}
.log time{flex:none;color:var(--ink-faint);font-size:.7rem}

/* ── dialogs: a full-height sheet in a sidebar, a centred dialog when wide ── */
.dlg{width:min(34rem,calc(100vw - 1rem))}
.dlg-body{overflow:auto;padding:.7rem 1rem;display:flex;flex-direction:column;gap:.6rem}
.dlg-err{margin:0 1rem;color:var(--bad);font-size:.82rem}
.dlg-err:empty{display:none}
@media (max-width:480px){
  .dlg:not(.dlg-small){width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}
}
.fld-group{border:1px solid var(--line);border-radius:.6rem;padding:.45rem .65rem .65rem;margin:0;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.fld-group legend{font-size:.7rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:0 .3rem}
.fld-group .hint{margin:0}
.fld-row.tight{gap:.3rem}
.fld-row.tight>*{flex:1;min-width:0;font:inherit;font-size:.82rem;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:.45rem;padding:.35rem .45rem}
.checks{display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.check{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;cursor:pointer;padding:.15rem .1rem}
.check.lv-error,.check.lv-warning,.check.lv-success,.check.lv-info{color:var(--lv)}
.win{display:flex;flex-direction:column;gap:.5rem}
.days{display:flex;flex-wrap:wrap;gap:.25rem}
.day{position:relative;cursor:pointer}
.day input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.day{display:inline-grid;place-items:center;min-width:2.4rem;padding:.2rem .35rem;font-size:.76rem;border:1px solid var(--line);border-radius:.4rem;color:var(--ink-dim)}
.day:has(input:checked){background:var(--brand);border-color:transparent;color:#1a1206;font-weight:700}
:root[data-theme="light"] .day:has(input:checked){color:#fff}
.day:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

.keys{display:grid;grid-template-columns:auto 1fr;gap:.4rem .8rem;margin:0;padding:.8rem 1.1rem 1.1rem;font-size:.84rem}
.keys dt{white-space:nowrap}
.keys dd{margin:0;color:var(--ink-dim)}

/* wide: give sections some air, still a single column */
@media (min-width:860px){
  .view{padding:1rem 1.5rem 3rem}
  body:not([data-view="feed"]) .view{max-width:52rem;margin:0 auto}
  .top{flex-direction:row;align-items:center;gap:.6rem;padding:.5rem 1rem}
  .top-row{display:contents}
  .live{order:1}
  .tabs{order:2;display:flex;border:0;background:none;padding:0;margin-left:.6rem;gap:.2rem}
  .tabs .tab{padding:.3rem .8rem;border-radius:999px}
  .top-row .grow{order:3}
  .hl-me{order:4}
  .hl-menu{order:5}
}

/* ── fixes after the first screenshots ── */
.tabs{grid-template-columns:repeat(4,auto);justify-content:space-between}
.tab{position:relative;font-size:.78rem;padding:.3rem .5rem}
.tab .count{min-width:1.05rem;line-height:1.05rem;font-size:.62rem;padding:0 .25rem}
.feed:focus-visible{outline:none}
.fld .check input,.check input,.day input{width:auto;padding:0;border:0;background:none}
.add-row input{flex:1 1 6rem}
.add-row select{flex:0 1 auto;max-width:10rem}

/* ── inbox / archive, selection, threads, links, toast ── */
.box-seg{flex:none}
.box-seg button{font-size:.74rem;padding:.22rem .55rem}
.box-seg button[aria-pressed="true"]{background:var(--brand);color:#1a1206;font-weight:700}
:root[data-theme="light"] .box-seg button[aria-pressed="true"]{color:#fff}
.feed-bar-row .icon-btn{width:1.7rem;height:1.7rem}
.feed-bar-row[hidden]{display:none}
.sel-bar{gap:.3rem;flex-wrap:wrap}
.sel-count{font-size:.78rem;font-weight:700;margin-right:.15rem}
.x-btn svg{transform:rotate(45deg)}
.thread-row{gap:.3rem}
.thread-chip{display:inline-flex;align-items:center;gap:.3rem;min-width:0;max-width:100%;font:.72rem var(--mono);color:var(--ink);
  background:var(--surf);border:1px solid var(--line);border-radius:999px;padding:.12rem .5rem;cursor:pointer;appearance:none}
.thread-row .thread-chip{flex:1;cursor:default}
.thread-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-chip svg{flex:none;width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ev-thread{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:0 0 .45rem}
.ev-link{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:0 0 .45rem}
.ev-link-host{font-size:.72rem;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.links{list-style:none;margin:.45rem 0 0;padding:0;font-size:.74rem}
.links li{display:flex;align-items:center;gap:.3rem;padding:.1rem 0}
.links a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brand)}
.links .icon-btn{width:1.5rem;height:1.5rem}
.toast{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:91;display:flex;align-items:center;gap:.6rem;
  max-width:calc(100vw - 2rem);padding:.45rem .5rem .45rem .85rem;border-radius:.6rem;font-size:.84rem;
  background:var(--panel-solid);border:1px solid var(--line-hot);box-shadow:var(--shadow)}
.toast[hidden]{display:none}
.toast-msg{min-width:0}
.toast:not([hidden])~.notice,.notice:has(~.toast:not([hidden])){bottom:4rem}
.swatches{display:flex;flex-wrap:wrap;gap:.35rem}
.swatch{width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid transparent;background:var(--lv);cursor:pointer;padding:0;appearance:none}
.swatch.none{background:conic-gradient(var(--l-info) 0 25%,var(--l-success) 0 50%,var(--l-warning) 0 75%,var(--l-error) 0)}
.swatch[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg) inset}
.swatch:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.field-rows{display:flex;flex-direction:column;gap:.3rem}
.field-row>.icon-btn{flex:none;padding:0;width:1.8rem;background:none}
.add-check{align-self:flex-start;margin-top:.3rem}
.fresh-token{margin:.5rem 0;padding:.55rem .6rem;border:1px solid var(--line-hot);border-radius:.55rem;background:color-mix(in srgb,var(--brand) 7%,transparent)}
.fresh-token p{margin:.1rem 0 .35rem;font-size:.82rem}
.fresh-token .snippet{margin:.2rem 0 .3rem}
#tokens .add-row{margin-top:.5rem}
#tokens .plain{margin-top:.4rem}
/* ask an AI */
.ai-dlg .dlg-head h2{display:flex;align-items:center;gap:.4rem}
.ai-dlg .dlg-head h2 svg{width:1rem;height:1rem;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linejoin:round}
.ai-dlg .dlg-body{padding-bottom:1rem}
.ai-dlg .card-actions{margin-top:.2rem}
.ai-ask,.ai-paste{width:100%;font:inherit;font-size:.85rem;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:.45rem;padding:.4rem .5rem;resize:vertical}
.ai-paste{margin-top:.4rem;font:.76rem var(--mono)}
.ai-props{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.ai-prop{border:1px solid var(--line-hot);border-radius:.6rem;padding:.5rem .6rem}
.ai-prop-head{margin:0 0 .35rem;font-size:.8rem}
.ai-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.ai-item{display:flex;gap:.45rem;align-items:flex-start;font-size:.8rem}
.ai-op{flex:none;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .35rem;border-radius:.3rem;margin-top:.1rem}
.op-add .ai-op{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.op-change .ai-op{background:color-mix(in srgb,var(--brand) 20%,transparent);color:var(--brand)}
.op-delete .ai-op{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)}
.ai-what{min-width:0;display:flex;flex-direction:column;gap:.1rem;overflow-wrap:anywhere}
.ai-what small{color:var(--ink-dim)}
.has-err .ai-what b{text-decoration:line-through}
.bad-text{color:var(--bad-text)}
/* fixes after the second screenshots */
.ev-quick{top:.25rem;right:.4rem;padding:0}
.ev-quick .icon-btn{width:1.4rem;height:1.4rem}
.ev-quick .icon-btn svg{width:.85rem;height:.85rem}
.sel-bar{flex-wrap:nowrap}
.sel-bar .btn{flex:none}
@media (max-width:440px){.sel-bar .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sel-bar .btn.small{padding:.25rem .45rem}}
@media (max-width:480px){.field-row{flex-wrap:wrap}.field-row>input.mono{flex:1 1 100%}}