/* ============================================================
   noti.components.css · Notification layer (3 surfaces)
   Ported from the design handoff. EXTENDS the shipped Atlas
   language (supply.tokens.css + supply.components.css +
   shell.chrome.css + sourcing.components.css). Zero new colour /
   font / radius is minted — every value is a token. Category
   hues REUSE the provenance ladder palette (the brand grammar)
   as scanning accents on icon discs (NOT as provenance chips on
   data — see design_notes §category-hue).
   ------------------------------------------------------------
   Surfaces:
     A · notification center (bell + badge + drawer + rows + states)
     B · preferences grid    (6 category × 4 channel × 3 mode)
     C · deep-link landing    (from-noti banner + focus ring)
   ============================================================ */

/* ============================================================
   A1 · BELL + BADGE — design treatment of the reserved
   .hbtn.bell + .bdot slot. SCOPED to .hbtn.bell so the shipped
   header buttons (lang pill, theme toggle) keep their chrome.
   ============================================================ */
.hbtn.bell{ position:relative; }
.hbtn.bell .ic{ width:18px; height:18px; display:inline-flex; }
.hbtn.bell .ic svg{ width:100%; height:100%; display:block; }
/* unread → brass-charged bell (honest: only when unreadCount() > 0) */
.hbtn.bell.has-unread{ color:var(--brand2); border-color:var(--brand); }
.hbtn.bell.has-unread:hover{ background:var(--brand-soft); }
.hbtn.bell[aria-expanded="true"]{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }

/* the count badge — mono numerals, caps at 9+ */
.bdot{
  position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--r-pill); background:var(--brand); color:#fff; box-sizing:border-box;
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.64rem;
  font-weight:var(--fw-bold); line-height:1; display:grid; place-items:center;
  border:2px solid var(--surface); pointer-events:none;
}
.bdot.zero{ display:none; }

/* A1 · Spine-nav badge — count pill on the notifications nav row.
   Sits right-aligned; a calm brass count (collapses to a dot when rail
   is too narrow via the .navbadge.dot modifier). */
.navitem .navbadge{
  margin-inline-start:auto; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); min-width:19px; height:19px;
  padding:0 5px; border-radius:var(--r-pill); background:var(--brand); color:#fff; box-sizing:border-box;
  display:grid; place-items:center; line-height:1;
}
.navitem[aria-current="page"] .navbadge{ background:var(--brand2); }
.navbadge.dot{ min-width:9px; width:9px; height:9px; padding:0; }

/* ============================================================
   A2 · NOTIFICATION CENTER DRAWER
   REUSES the shipped .drawer / .drawerscrim / .dr-head / .dr-eyebrow /
   .dr-body / .dr-foot grammar (sourcing.components.css) — NOT re-ported.
   These scope the noti drawer to a full-bleed scroll list under a
   top-stacked sticky head.
   ------------------------------------------------------------ */
.drawer.notidrawer .dr-head{ align-items:flex-start; }
.drawer.notidrawer .dr-eyebrow{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:var(--fw-bold); }
.drawer.notidrawer .dr-head h2{ margin:.15rem 0 0; font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.drawer.notidrawer .dr-body{ flex:1; min-height:0; overflow-y:auto; padding:0; gap:0; }

/* head action cluster (mark-all-read + close) */
.dr-headacts{ display:flex; align-items:center; gap:var(--s2); flex:0 0 auto; }
/* the shipped .panelclose is scoped under .panel; the drawer head re-states it */
.drawer .panelclose{ position:static; flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line2); background:var(--surface); color:var(--muted); cursor:pointer;
  display:grid; place-items:center; }
.drawer .panelclose svg{ width:16px; height:16px; display:block; }
.drawer .panelclose:hover{ background:var(--surface2); color:var(--ink); }
.markall{ border:0; background:transparent; color:var(--brand2); cursor:pointer; font:inherit;
  font-size:var(--fs-xs); font-weight:var(--fw-semi); padding:.35rem .55rem; border-radius:var(--r-sm); white-space:nowrap; }
.markall:hover{ background:var(--brand-soft); }
.markall:disabled{ color:var(--muted); background:transparent; cursor:default; }

/* optional category filter strip under the head */
.notifilter{ display:flex; gap:.35rem; flex-wrap:wrap; padding:.6rem var(--s5);
  border-bottom:1px solid var(--line); background:var(--surface2); }
.notifilter .ff{ border:1px solid var(--line2); background:var(--surface); color:var(--ink2);
  border-radius:var(--r-pill); padding:.22rem .6rem; font-size:var(--fs-2xs); font-weight:var(--fw-semi);
  cursor:pointer; white-space:nowrap; }
.notifilter .ff[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---- FUNNEL on-ramp card (NOTI.funnelState → {hd,cta,key}) ---- */
.notifunnel{ margin:var(--s4) var(--s5) var(--s2); padding:var(--s4);
  border:1px solid var(--brand); border-radius:var(--r-lg); background:var(--brand-soft);
  color:var(--brand-ink); display:flex; flex-direction:column; gap:.6rem; }
.notifunnel .nf-top{ display:flex; align-items:center; gap:.5rem; }
.notifunnel .nf-rung{ font-family:var(--mono); font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  letter-spacing:.05em; background:var(--surface); color:var(--brand2); border:1px solid var(--brand);
  border-radius:var(--r-pill); padding:.1rem .5rem; }
.notifunnel .nf-hd{ font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.notifunnel .nf-cta{ align-self:flex-start; }
.notifunnel .nf-steps{ display:flex; align-items:center; gap:.3rem; margin-top:.1rem; }
.notifunnel .nf-steps i{ width:24px; height:4px; border-radius:var(--r-pill); background:var(--brand); opacity:.3; }
.notifunnel .nf-steps i.done{ opacity:.9; }

/* ---- LIST + day groups ---- */
.notiscroll{ display:flex; flex-direction:column; }
.notiday{ position:sticky; top:0; z-index:1; padding:.45rem var(--s5);
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  font-weight:var(--fw-bold); background:color-mix(in srgb,var(--surface2) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(2px); border-bottom:1px solid var(--line); }

/* ---- a notification ROW ---- */
.notirow{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:.7rem;
  align-items:start; padding:.85rem var(--s5) .85rem calc(var(--s5) - 3px);
  border-bottom:1px solid var(--line); border-inline-start:3px solid transparent;
  cursor:pointer; background:var(--surface); transition:background .12s; text-align:start;
  width:100%; border-top:0; font:inherit; color:inherit; }
.notirow:hover{ background:var(--surface2); }
.notirow.unread{ border-inline-start-color:var(--brand); background:color-mix(in srgb,var(--brand-soft) 32%, var(--surface)); }
.notirow.unread:hover{ background:color-mix(in srgb,var(--brand-soft) 50%, var(--surface)); }
.notirow.read .noti-ttl{ font-weight:var(--fw-semi); color:var(--ink2); }
.notirow.read .noti-ic{ opacity:.78; }

/* category icon disc — hue REUSES the provenance ladder palette */
.noti-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center;
  border:1px solid transparent; }
.noti-ic svg{ width:18px; height:18px; display:block; }
.noti-ic.cat-trade{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.noti-ic.cat-security{ background:var(--bad-bg); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 35%,transparent); }
.noti-ic.cat-my_orchard{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.noti-ic.cat-market{ background:var(--pv-official-bg); color:var(--pv-official); border-color:var(--pv-official-ln); }
.noti-ic.cat-finance{ background:var(--pv-private-bg); color:var(--pv-private); border-color:var(--pv-private-ln); }
.noti-ic.cat-ops{ background:var(--pv-stale-bg); color:var(--pv-stale); border-color:var(--pv-stale-ln); }

.noti-main{ min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.noti-ttl{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); line-height:1.35;
  display:flex; align-items:flex-start; gap:.4rem; }
.noti-ttl .udot{ flex:0 0 auto; width:8px; height:8px; margin-top:.4rem; border-radius:50%; background:var(--brand); }
.notirow.read .udot{ display:none; }
.noti-body{ font-size:var(--fs-xs); color:var(--muted); line-height:1.45; }
.noti-meta{ display:flex; align-items:center; gap:.5rem; margin-top:.15rem; flex-wrap:wrap; }
.noti-at{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-2xs); color:var(--muted); }

/* category chip — NEUTRAL (not a .pv provenance chip) */
.noti-cat{ display:inline-flex; align-items:center; gap:.25rem; font-size:var(--fs-2xs);
  font-weight:var(--fw-bold); padding:.08rem .42rem; border-radius:var(--r-pill);
  letter-spacing:.02em; white-space:nowrap; }
.noti-cat.cat-trade{ background:var(--brand-soft); color:var(--brand-ink); }
.noti-cat.cat-security{ background:var(--bad-bg); color:var(--bad); }
.noti-cat.cat-my_orchard{ background:var(--pv-verified-bg); color:var(--pv-verified); }
.noti-cat.cat-market{ background:var(--pv-official-bg); color:var(--pv-official); }
.noti-cat.cat-finance{ background:var(--pv-private-bg); color:var(--pv-private); }
.noti-cat.cat-ops{ background:var(--pv-stale-bg); color:var(--pv-stale); }

/* go chevron (only when deep_link present) */
.noti-go{ align-self:center; color:var(--muted); width:18px; height:18px; flex:0 0 18px; display:grid; place-items:center; }
.noti-go svg{ width:16px; height:16px; display:block; }
.notirow:hover .noti-go{ color:var(--brand2); }
.notirow.nolink{ cursor:default; }
.notirow.nolink:hover{ background:var(--surface); }
.notirow.nolink.unread:hover{ background:color-mix(in srgb,var(--brand-soft) 32%, var(--surface)); }

/* load-more seam (next_before_id) */
.notimore{ padding:var(--s4) var(--s5); display:flex; justify-content:center; }

/* ---- skeleton + empty (reuse .skel / .state from components.css) ---- */
.notiskel{ display:flex; align-items:center; gap:.7rem; padding:.85rem var(--s5); border-bottom:1px solid var(--line); }
.notiskel .sk-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; }
.notiskel .sk-main{ flex:1; display:flex; flex-direction:column; gap:.4rem; }
.notiskel .sk-l{ height:11px; border-radius:var(--r-pill); }
.notiempty{ padding:var(--s7) var(--s5); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.notiempty .ic{ width:44px; height:44px; color:var(--muted); opacity:.7; }
.notiempty .ic svg{ width:100%; height:100%; }
.notiempty h3{ margin:.2rem 0 0; font-size:var(--fs-md); font-weight:var(--fw-bold); }
.notiempty p{ margin:0; color:var(--muted); font-size:var(--fs-sm); max-width:34ch; }

/* ============================================================
   B · PREFERENCES GRID  (surface `settings` → .wbbody)
   6 category rows × 4 channel cols × 3-mode picker
   ============================================================ */
.prefwrap{ display:flex; flex-direction:column; gap:var(--s5); max-width:920px; }

.prefgridwrap{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  box-shadow:var(--sh-sm); }
.prefscroll{ overflow-x:auto; }
.prefgrid{ display:grid; grid-template-columns:minmax(168px,1.4fr) repeat(4, minmax(132px,1fr)); min-width:680px; }
.prefgrid > *{ border-top:1px solid var(--line); border-inline-start:1px solid var(--line); padding:.7rem .8rem; }
.prefgrid > .ph{ border-top:0; }
.prefgrid > .col0{ border-inline-start:0; }

/* header row */
.prefgrid .ph{ background:var(--surface2); display:flex; flex-direction:column; gap:.2rem;
  position:sticky; top:0; z-index:1; }
.prefgrid .ph .chn{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); }
.prefgrid .ph .chsub{ font-size:var(--fs-2xs); color:var(--muted); }
.prefgrid .ph.col0{ justify-content:flex-end; }
.prefgrid .ph .soon{ align-self:flex-start; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  color:var(--pv-est); background:var(--pv-est-bg); border:1px solid var(--pv-est-ln);
  border-radius:var(--r-pill); padding:.02rem .42rem; white-space:nowrap; }

/* category label cell */
.prefgrid .pcat{ display:flex; flex-direction:column; gap:.25rem; justify-content:center;
  background:var(--surface); position:sticky; inset-inline-start:0; z-index:1; }
.prefgrid .pcat .cn{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); }
.prefgrid .pcat .cn .lk{ color:var(--pv-private); font-size:.85em; }
.prefgrid .pcat .chint{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.4; }
.prefgrid .pcat.locked{ background:color-mix(in srgb,var(--pv-private-bg) 30%, var(--surface)); }

/* a mode-picker cell */
.prefgrid .pcell{ display:flex; align-items:center; justify-content:flex-start; }
.prefgrid .pcell.stub{ background:repeating-linear-gradient(135deg,var(--surface2) 0 7px,transparent 7px 14px); }

/* the 3-mode segmented picker */
.modeseg{ display:inline-flex; border:1px solid var(--line2); border-radius:var(--r-pill);
  overflow:hidden; background:var(--surface); }
.modeseg button{ border:0; background:transparent; color:var(--ink2); font:inherit; cursor:pointer;
  font-size:var(--fs-2xs); font-weight:var(--fw-semi); padding:.34rem .5rem; min-width:30px; line-height:1.1;
  border-inline-start:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; gap:.2rem; }
.modeseg button:first-child{ border-inline-start:0; }
.modeseg button[aria-pressed="true"]{ background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-bold); }
/* OFF reads as neutral mute, not an active brand state */
.modeseg button.m-off[aria-pressed="true"]{ background:var(--bg2); color:var(--muted); }
.modeseg button:disabled{ opacity:.4; cursor:not-allowed; }
.modeseg button.m-off.lockoff{ position:relative; }      /* security: off disabled + lock */
.modeseg button.m-off.lockoff::after{ content:"🔒"; font-size:.7em; }

/* legend + save state under the grid */
.preflegend{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; font-size:var(--fs-2xs); color:var(--muted); }
.preflegend .lg{ display:inline-flex; align-items:center; gap:.35rem; }
.preflegend .sw{ width:22px; height:14px; border-radius:var(--r-pill); border:1px solid var(--line2); display:inline-block; }
.preflegend .sw.on{ background:var(--brand-soft); border-color:var(--brand); }
.preflegend .sw.off{ background:var(--bg2); }
.savednote{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-xs); color:var(--muted); }
.savednote .ok{ color:var(--pv-verified); font-weight:var(--fw-bold); }
.savednote.flash{ color:var(--pv-verified); }

/* ---- QUIET HOURS ---- */
.quiet{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:var(--s4) var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.quiet .qh-top{ display:flex; align-items:center; gap:.5rem; }
.quiet .qh-ic{ width:20px; height:20px; color:var(--brand2); }
.quiet .qh-ic svg{ width:100%; height:100%; }
.quiet h3{ margin:0; font-size:var(--fs-md); font-weight:var(--fw-bold); }
.quiet .qh-row{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.quiet .qh-field{ display:flex; flex-direction:column; gap:.25rem; }
.quiet .qh-field label{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:var(--fw-bold); }
.quiet input[type="time"]{ font:inherit; font-family:var(--mono); font-size:var(--fs-sm); color:var(--ink);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:.42rem .55rem; background:var(--surface2); }
.quiet .qh-tz{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink2);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:.42rem .55rem; background:var(--surface2); align-self:flex-end; }
.quiet .qh-note{ display:flex; gap:.5rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.45;
  background:var(--pv-est-bg); border:1px solid var(--pv-est-ln); border-radius:var(--r); padding:.55rem .7rem; }
.quiet .qh-note .ic{ color:var(--pv-est); font-weight:var(--fw-bold); }
.quiet .qh-toggle{ margin-inline-start:auto; }

/* a small switch for "quiet hours on/off" (reuse seg look) */
.qswitch{ position:relative; width:42px; height:24px; border-radius:var(--r-pill); border:1px solid var(--line2);
  background:var(--bg2); cursor:pointer; transition:background .14s, border-color .14s; flex:0 0 42px; }
.qswitch::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:18px; height:18px; border-radius:50%;
  background:var(--surface); box-shadow:var(--sh-sm); transition:transform .14s; }
.qswitch[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); }
.qswitch[aria-pressed="true"]::after{ transform:translateX(18px); }

/* ============================================================
   C · DEEP-LINK LANDING  (reusable across destinations)
   ============================================================ */
/* host: .content is a flex ROW — this column wrapper holds the banner above the
   destination workbench so the banner is a full-width bar, not a stretched sibling */
.fromnotihost{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.fromnotibar{ padding:var(--s4) var(--s5) 0; flex:0 0 auto; }
.fromnotibar .fromnoti{ margin:0; }
.fromnoti{ display:flex; align-items:center; gap:.6rem; margin:0 0 var(--s4);
  padding:.5rem .6rem .5rem .55rem; border-radius:var(--r-pill);
  background:var(--brand-soft); border:1px solid var(--brand); color:var(--brand-ink); }
.fromnoti .fn-back{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--brand);
  background:var(--surface); color:var(--brand2); cursor:pointer; display:grid; place-items:center; }
.fromnoti .fn-back svg{ width:16px; height:16px; }
.fromnoti .fn-back:hover{ background:var(--surface2); }
.fromnoti .fn-main{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.fromnoti .fn-lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.07em; font-weight:var(--fw-bold); color:var(--brand2); }
.fromnoti .fn-ttl{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--brand-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fromnoti .noti-cat{ flex:0 0 auto; }

/* focus ring on the destination element the deep-link points at */
.noti-focus{ position:relative; outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r); }
.noti-focus::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; }
@keyframes notipulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 50%, transparent); }
  70%{ box-shadow:0 0 0 14px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.noti-focus.pulse{ animation:notipulse 1.5s ease 1; }
@media (prefers-reduced-motion:reduce){ .noti-focus.pulse{ animation:none; } }

/* a simple destination list for the surface-C demo (generic, token-bound) */
.destlist{ display:flex; flex-direction:column; gap:var(--s3); max-width:620px; }
.destrow2{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-sm);
  padding:var(--s4); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.destrow2 .dr-l{ min-width:0; }
.destrow2 .dr-ref{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--muted); }
.destrow2 .dr-nm{ font-size:var(--fs-md); font-weight:var(--fw-bold); margin-top:.1rem; }
.destrow2 .dr-meta{ font-size:var(--fs-xs); color:var(--muted); margin-top:.15rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .prefgrid{ min-width:560px; }
}
@media (pointer:coarse){
  .markall,.modeseg button,.notifilter .ff,.fromnoti .fn-back{ min-height:44px; }
  .modeseg button{ min-width:40px; }
}

/* ============================================================
   ENH-002 · LINE-connect row — FIRST child of .prefwrap, above the
   preferences grid (the grid is untouched). Ported from Claude Design
   line_link.components.css; additive .ll-* only, every value token-bound.
   The ONE literal is the shipped LINE brand green (#06c755), reused as a
   brand mark exactly like .line-cta. 4 honest states — push fires only
   when linked AND followed, so .st-linked never shows a success tick.
   (Unlink uses the shipped confirmAction() gate, not a bespoke sheet.)
   ============================================================ */
.linelink-wrap{ container-type:inline-size; }
.linelink{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:var(--s4) var(--s5); display:flex; flex-direction:column;
  gap:var(--s3); overflow:hidden; margin-bottom:var(--s4); }
.linelink .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }

.linelink .ll-top{ display:flex; align-items:flex-start; gap:var(--s3); }
.linelink .ll-badge{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:grid;
  place-items:center; background:#06c755; color:#fff; }
.linelink .ll-badge svg{ width:24px; height:24px; display:block; }
.linelink.st-conflict .ll-badge{ background:var(--bad-bg); color:var(--bad);
  border:1px solid color-mix(in srgb,var(--bad) 35%,transparent); }
.linelink .ll-head{ min-width:0; flex:1; display:flex; flex-direction:column; gap:.15rem; }
.linelink .ll-ttl{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); line-height:1.3; }
.linelink .ll-sub{ font-size:var(--fs-xs); color:var(--muted); line-height:1.45; }

.linelink .ll-pill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.3rem;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:.02em; white-space:nowrap;
  padding:.18rem .55rem; border-radius:var(--r-pill); border:1px solid transparent; }
.linelink .ll-pill .ic{ width:13px; height:13px; display:inline-flex; }
.linelink .ll-pill .ic svg{ width:100%; height:100%; }
.linelink.st-linked   .ll-pill{ background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 38%,transparent); }
.linelink.st-active   .ll-pill{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.linelink.st-conflict .ll-pill{ background:var(--bad-bg); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 35%,transparent); }
.linelink.st-unlinked .ll-pill{ background:var(--bg2); color:var(--muted); border-color:var(--line2); }

.linelink .ll-acct{ display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start;
  white-space:nowrap; font-size:var(--fs-xs); color:var(--ink2); background:var(--surface2);
  border:1px solid var(--line2); border-radius:var(--r-pill); padding:.25rem .6rem; }
.linelink .ll-acct .ll-glyph{ width:15px; height:15px; color:#06c755; display:inline-flex; }
.linelink .ll-acct .ll-glyph svg{ width:100%; height:100%; }
.linelink .ll-acct b{ color:var(--ink); font-weight:var(--fw-bold); }

.linelink .ll-note{ display:flex; gap:.55rem; align-items:flex-start; line-height:1.5;
  font-size:var(--fs-sm); color:var(--ink2); border-radius:var(--r); padding:.6rem .75rem; }
.linelink .ll-note .ic{ flex:0 0 18px; width:18px; height:18px; margin-top:.05rem; }
.linelink .ll-note .ic svg{ width:100%; height:100%; }
.linelink .ll-note b{ color:var(--ink); }
.linelink .ll-note.warn{ background:var(--warn-bg); border:1px solid color-mix(in srgb,var(--warn) 32%,transparent); }
.linelink .ll-note.warn .ic{ color:var(--warn); }
.linelink .ll-note.ok{ background:var(--pv-verified-bg); border:1px solid var(--pv-verified-ln); }
.linelink .ll-note.ok .ic{ color:var(--pv-verified); }
.linelink .ll-note.bad{ background:var(--bad-bg); border:1px solid color-mix(in srgb,var(--bad) 32%,transparent); }
.linelink .ll-note.bad .ic{ color:var(--bad); }
.linelink .ll-oa{ font-family:var(--mono); font-weight:var(--fw-bold); color:var(--ink);
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-sm); padding:.02rem .34rem; }

.linelink .ll-actions{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.linelink .ll-actions .btn{ flex:0 0 auto; }
.linelink .ll-actions .btn.line-cta,
.linelink .ll-actions .btn.grow{ flex:1 1 auto; min-width:180px; }
.linelink .ll-lico{ width:20px; height:20px; display:inline-flex; }
.linelink .ll-lico svg{ width:100%; height:100%; }
.linelink .ll-hint{ display:flex; gap:.4rem; align-items:flex-start; font-size:var(--fs-2xs);
  color:var(--muted); line-height:1.45; }
.linelink .ll-hint .ic{ flex:0 0 14px; width:14px; height:14px; margin-top:.1rem; color:var(--muted); }
.linelink .ll-hint .ic svg{ width:100%; height:100%; }

.linelink .ll-truth{ display:flex; flex-direction:column; gap:.3rem; font-size:var(--fs-2xs);
  color:var(--muted); border-top:1px dashed var(--line2); padding-top:var(--s3); }
.linelink .ll-truth .tr{ display:flex; align-items:center; gap:.45rem; }
.linelink .ll-truth .tr .mk{ flex:0 0 15px; width:15px; height:15px; border-radius:50%; display:grid;
  place-items:center; font-size:.62rem; font-weight:var(--fw-bold); }
.linelink .ll-truth .tr.done .mk{ background:var(--pv-verified-bg); color:var(--pv-verified); }
.linelink .ll-truth .tr.todo .mk{ background:var(--warn-bg); color:var(--warn); }
.linelink .ll-truth .tr b{ color:var(--ink2); font-weight:var(--fw-semi); }

@container (max-width:520px){
  .linelink .ll-top{ flex-wrap:wrap; }
  .linelink .ll-pill{ order:3; }
  .linelink .ll-actions .btn{ flex:1 1 100%; min-width:0; }
}
@media (pointer:coarse){
  .linelink .btn,.linelink .ll-actions .btn{ min-height:44px; }
}