/* ============================================================
   Tripwires (Protection) — page styles, ported from the v7 Tripwires handoff.
   Extracted from the CSS-in-JS string in sections/tripwires.js: the section is a
   god-file size-ratchet target (scripts/architecture-budgets.json, 430 lines with
   one line of headroom) and the architecture rule says to split along the seams
   rather than grow it. Linked from public/dashboard/index.html so the tab paints
   styled on first open.

   Cards are the shared .glass kit (chrome.css). Anything duplicated here — .dstat,
   .chip, .vbtn, .seg, .fbtn/.ffly — is a verbatim copy of the handoff's rules and is
   byte-identical to the copies in usage.js / api.js, so the sections can't drift.
   ============================================================ */

/* page shell */
.tw-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.tw-head{display:flex;align-items:center;gap:18px}
.tw-head h1{font-size:1.5rem;margin:0}
.tw-head p{font-size:.84rem;color:var(--dim);margin-top:2px}
.tw-head .grow{flex:1}
.btn-plus{display:inline-flex;align-items:center;gap:9px}
.btn-plus .pl{font-size:1.05rem;line-height:1;margin-top:-1px}

/* stat strip — .dstat lives in the shared dash-kit.css */
.tw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* toolbar: tabs | search | filter | sort. overflow:visible + z-index so the
   flyouts can escape the bar instead of being clipped by it. */
.tw-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;flex-wrap:wrap;overflow:visible;z-index:5;position:relative}
.tw-search{flex:1;min-width:150px;height:36px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03)}
.tw-search svg{width:14px;height:14px;color:var(--faint);flex:0 0 auto}
.tw-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font-family:var(--sans);font-size:.84rem}
.tw-search input::placeholder{color:var(--faint)}
/* .seg/.fbtn/.ffly/.fwrap/.fcount/.f-lbl2/.fpills/.tpill/.fopt/.fchk2 are the
   shared primitives (/assets/shared/dash-kit.css). The search-toolbar tab shape
   (36px / 11px track / 8px inset active fill) is canonical there too under
   `.tw-bar .seg` — not redeclared here. */

/* wire list */
.tw-list{padding:4px 0 6px}
.tw-scroll{display:flex;flex-direction:column;max-height:436px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.tw-lh{display:flex;align-items:baseline;gap:12px;padding:13px 18px 9px}
.tw-lh h2{font-size:1.02rem;margin:0}
.tw-sub{font-size:.72rem;color:var(--faint)}
.tw-row{display:flex;align-items:center;gap:13px;padding:11px 18px;border-top:1px solid rgba(255,255,255,.045)}
.tw-row:hover{background:rgba(255,255,255,.028)}
.tw-row.fired{background:color-mix(in srgb,var(--danger) 4%,transparent)}
.tav{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:.86rem;color:#fff;background:linear-gradient(135deg,#a855f7,#3b82f6)}
.tw-who{flex:1;min-width:0}
.tw-who b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--head)}
.tw-who .sub{display:block;font-size:.72rem;color:var(--faint);margin-top:2px}
.tw-who .sub em{font-style:normal}
.tw-who .sub em.bad{color:var(--danger);font-weight:600}
/* .chip base lives in the shared dash-kit.css; tripwire-specific modifiers stay here */
.chip.on-c{color:var(--t2);border:1px solid color-mix(in srgb,var(--a2) 40%,transparent)}
.chip.api-c{color:var(--t3);border:1px solid color-mix(in srgb,var(--a3) 40%,transparent)}
.tw-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 20px 42px;text-align:center}
.tw-empty.slim{padding:26px 20px}
.tw-empty.slim span{font-size:.84rem;color:var(--faint)}
.tw-eic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--a1) 14%,transparent);color:var(--t1)}
.tw-eic svg{width:19px;height:19px}
.tw-empty b{font-size:.94rem;color:var(--head)}
.tw-empty span{font-size:.8rem;color:var(--faint);max-width:340px;line-height:1.5}

/* feed + routing rail */
.tw-feedgrid{display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:start}
.tw-feed{padding:13px 18px 12px}
.tw-feed .tw-lh{padding:0 0 10px;align-items:center}
.tw-feed .tw-lh .grow{flex:1}
.hp-div{height:1px;background:var(--border);margin-bottom:4px}
.act-scroll{max-height:322px;overflow-y:auto;overflow-x:hidden;padding-right:8px}
.act-scroll::-webkit-scrollbar{width:7px}
.act-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
.act-scroll::-webkit-scrollbar-track{background:transparent}
.act-list{display:flex;flex-direction:column}
.act-item{display:flex;align-items:baseline;gap:11px;padding:10px 0;border-top:1px solid rgba(255,255,255,.05)}
.act-item:first-child{border-top:0}
.act-tag{flex:0 0 auto;font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.12em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.act-tag.danger{color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 42%,transparent)}
.act-tag.gold{color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 42%,transparent)}
.act-tag.cyan{color:var(--t3);border:1px solid color-mix(in srgb,var(--a3) 36%,transparent)}
.act-tag.blue{color:var(--t2);border:1px solid color-mix(in srgb,var(--a2) 40%,transparent)}
.act-txt{flex:1;min-width:0;font-size:.84rem;color:var(--dim)}
.act-txt b{color:var(--text);font-family:var(--mono);font-size:.78rem}
.act-when{font-size:.68rem;color:var(--faint);white-space:nowrap}

/* routing tiles */
.tw-tiles{display:flex;flex-direction:column;gap:14px}
.tw-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:15px 16px 14px;cursor:pointer;text-align:left;text-decoration:none;font-family:var(--sans);transition:border-color .15s,transform .15s}
.tw-tile:hover{transform:translateY(-2px);border-color:var(--border2)}
.tw-tile .tt-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:7px;background:rgba(255,255,255,.05);color:var(--faint);transition:background .15s,color .15s,box-shadow .15s}
.tw-tile .tt-ic svg{width:16px;height:16px}
.tw-tile b{font-size:.9rem;font-weight:600;color:var(--head)}
.tw-tile .tt-sub{font-size:.7rem;color:var(--faint);line-height:1.4;min-height:2.8em}
.tw-tile .tt-st{position:absolute;top:13px;right:14px;font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;color:var(--faint);border:1px solid var(--border);border-radius:999px;padding:3px 9px;transition:color .15s,border-color .15s}
.tw-tile.on{border-color:color-mix(in srgb,var(--a2) 38%,transparent)}
.tw-tile.on .tt-ic{background:color-mix(in srgb,var(--a2) 14%,transparent);color:var(--t3);box-shadow:0 0 14px color-mix(in srgb,var(--a2) 25%,transparent)}
.tw-tile.on .tt-st{color:var(--success);border-color:color-mix(in srgb,var(--success) 42%,transparent)}

/* modal */
.tw-ovl{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px 18px;background:rgba(4,4,10,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-y:auto;animation:twOvlIn .18s ease}
@keyframes twOvlIn{from{opacity:0}to{opacity:1}}
.tw-modal{width:100%;max-width:440px;max-height:calc(100vh - 48px);overflow-y:auto;border-radius:20px;background:rgba(15,15,26,.97);border:1px solid var(--border2);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);position:relative;animation:twModIn .22s ease}
@keyframes twModIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.tw-modal::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad);opacity:.7;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat;mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat}
.tw-mh{display:flex;align-items:flex-start;gap:14px;padding:18px 24px 16px;border-bottom:1px solid var(--border)}
.tw-mh h2{font-size:1.14rem;margin:0}
.tw-mh p{font-size:.8rem;color:var(--dim);margin-top:5px;line-height:1.55}
.tw-mx{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:none;cursor:pointer;color:var(--faint);font-size:.85rem;transition:color .15s,border-color .15s}
.tw-mx:hover{color:var(--text);border-color:var(--border2)}
.tw-mb{display:flex;flex-direction:column;gap:15px;padding:18px 24px 22px}
.tw-fr{display:flex;flex-direction:column;gap:8px}
.tw-lb{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tw-in{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03);color:var(--text);font-family:var(--sans);font-size:.86rem;outline:none;transition:border-color .15s}
.tw-in:focus{border-color:color-mix(in srgb,var(--a2) 55%,transparent)}
.tw-in.mono{font-family:var(--mono);font-size:.8rem}

/* custom gradient checkbox (native input stays in the DOM, visually hidden, so
   reads of :checked and keyboard focus still work) */
.fchk{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.82rem;color:var(--text);font-weight:500}
.fchk b{font-weight:600}
.fchk input{position:absolute;opacity:0;width:0;height:0;margin:0}
.fchk .box{flex:0 0 auto;width:15px;height:15px;border-radius:5px;border:1.5px solid var(--border2);position:relative;transition:border-color .15s,background .15s}
.fchk input:checked + .box{background:var(--grad);border-color:transparent;box-shadow:0 0 8px var(--acc-glow)}
.fchk input:checked + .box::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;font-weight:700}
.fchk input:focus-visible + .box{border-color:color-mix(in srgb,var(--a2) 70%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--a2) 35%,transparent)}

/* outline buttons — .vbtn lives in the shared dash-kit.css */

@media(max-width:1080px){
  .tw-stats{grid-template-columns:1fr 1fr}
  .tw-feedgrid{grid-template-columns:1fr}
  .tw-when{display:none}
}
@media(max-width:560px){.tw-stats{grid-template-columns:1fr}}