/* v2 restyle: v8's parts in Madar's live look. Every value is a Nazem design-system token; this file
   only re-dresses v8's class names (panel, statcell, dialog, toast, …) in the system's parts.
   ds-allow: D2 — the prototype's own adapter; colours come only from tokens */

/* `hidden` must win over the system's display rules (the app sits behind the login otherwise) */
[hidden]{display:none!important}

/* the page column */
#view{display:flex;flex-direction:column;gap:var(--page-gap)}
#view>*{margin-block:0}
.fresh{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.fresh .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.protosel{display:flex;align-items:center;gap:8px;padding:2px 4px 2px 10px;font-size:12px;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r-control);background:var(--surface-2)}
.protosel .in{width:auto;min-height:34px;padding-inline-end:34px}

/* v8's blocks become Madar's card */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1)}
.pagehead h1,.secthead h2,.panelhead h2,.dhead h2{font-family:var(--font-display)}
.pagehead h1{font-weight:800;font-size:25px}
.statcell .v,.statcell .hv{font-variant-numeric:tabular-nums}
.warnbox{background:var(--warn-tint);color:var(--warn);border:0;border-radius:var(--r-panel)}
.okbox{background:var(--ok-tint);color:var(--ok);border:0;border-radius:var(--r-panel)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.danger:hover{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-tint)}
.link{color:var(--link)}

/* dialogs: Madar's modal over the scrim; a sheet on a phone */
.overlay{background:var(--scrim);backdrop-filter:blur(2px)}
.dialog{border-radius:var(--r-dialog);box-shadow:var(--shadow-3);border:1px solid var(--line);padding:0;gap:0}
.dialog>.dh,.dialog>.dhead{padding:18px 22px 10px}
.dialog>.db{padding:6px 22px 16px;display:flex;flex-direction:column;gap:14px}
.dialog>.df{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;position:sticky;bottom:0;background:var(--surface)}
.dialog:not(:has(>.dh)){padding:20px 22px;gap:16px}
.conseq{background:var(--surface-2);border-radius:var(--r-panel);padding:12px 14px;font-size:13.5px;color:var(--ink-2)}

/* the toast: v8 shows it with [hidden]; Madar's starts transparent */
.toast{opacity:1;transform:translate(50%,0);inset-inline-start:50%;left:auto;background:var(--ink);color:var(--ground);border-radius:var(--r-control);box-shadow:var(--shadow-2)}

/* the change bar reaches both edges of the page column, as the system draws it */
@media (min-width:861px){.page .impactbar{margin-inline:calc(-1 * var(--page-gutter))}}

/* the selected segment keeps its count readable */
.seg button[aria-pressed="true"] b{color:inherit;opacity:.85}

/* v2 — states the live app has (live.js) */
.srcwarn{display:block;flex-basis:100%;font-size:12px;color:var(--warn);background:var(--warn-tint);border-radius:var(--r-xs);padding:3px 9px;margin-top:4px}
.choice{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.copyval{display:inline-flex;gap:10px;align-items:center;font-size:17px;font-weight:700;padding:10px 14px;border:1px dashed var(--line-2);border-radius:var(--r-control);background:var(--surface-2);color:var(--ink);cursor:pointer}
.protostrip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;padding:8px 10px;border:1px dashed var(--line-2);border-radius:var(--r-control);background:var(--surface-2);font-size:12px;color:var(--muted)}
.protostrip button{font:inherit;font-size:12px;color:var(--link);background:none;border:0;padding:4px 6px;cursor:pointer;min-height:32px}
.login .alert{margin:0}

/* v2's own pages */
.perms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.perms .sset{border:0;padding:0}
.perm{display:flex;gap:9px;align-items:center;font-size:13.5px;cursor:pointer;min-height:32px}
.perm input{width:18px;height:18px;margin:0;accent-color:var(--pine);flex:none}
.perm .pill{margin-inline-start:auto}
.perm.locked{cursor:default;color:var(--muted)}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 18px}
.unitin{display:flex;align-items:center;gap:10px}
.unitin .in{max-width:120px;text-align:center}
.danger-zone{border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.picker.help{grid-template-columns:240px minmax(0,1fr);min-height:420px}
.picker.help .pk-detail h2{margin:0 0 8px}
.picker.help .pk-detail p{margin:0;line-height:2}
.main-cell{display:flex;flex-direction:column}
.main-cell .id{font-size:12.5px;color:var(--muted)}

@media (max-width:860px){
  .protosel span{display:none}
  .protosel{padding:0;border:0;background:none}
  /* the two sample controls take their own row under the bar on a phone */
  .bar{flex-wrap:wrap;row-gap:6px}
  .bar .crumbs{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
  .bar .sp{display:none}
  .protosel{order:9;flex:1 1 40%;min-width:0}
  .protosel .in{min-height:44px;width:100%;max-width:none}
  .fresh{display:none}
  .login .pw-eye{width:44px;height:44px;min-height:44px}
  .protostrip button{min-height:44px}
}
@media (max-width:700px){
  .dialog,.dialog.wide{border-radius:var(--r-dialog) var(--r-dialog) 0 0}
  .picker.help{grid-template-columns:1fr}
  .unitin .in{max-width:none;flex:1}
  .perm{min-height:44px}
}

/* ─── added by the panel (everything above is `prototype/nazem-src/nazem.css`, byte for byte) ───
   The prototype's rail items are <button>s that move a JavaScript variable. Here every item goes
   somewhere, so it is a real link (ADR 0021 condition 3), and it wears the system's `.nav button`
   rules exactly. The same for the sign-out button, which sits in a form (it is a POST). */
.nav a{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;font-size:13.5px;min-height:38px;width:100%;color:var(--rail-ink);position:relative}
.nav a:hover{background:var(--rail-hover)}
.nav a:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.nav a[aria-current="page"]{background:var(--rail-active);color:var(--surface);font-weight:600}
.nav a[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-12px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--bronze-2)}
.rail-foot form{margin:0;margin-inline-start:auto}
.rail-foot form button{margin-inline-start:0}
.nav-cta{text-decoration:none}
/* the funnel mark: the brand files draw it with literal colours; the page paints it with the system's */
.mark .node{fill:var(--mark-cream)}
.mark .node.last{fill:var(--bronze-2)}
.mark .wall{stroke:var(--bronze-2)}
/* the gate card: the lock, the reason and the way home, as the prototype's `gate` draws them */
.gate{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.gate p{margin:0;color:var(--ink-2)}
/* the large mark's nodes appear one by one, top row first — the prototype writes each delay inline */
.hm-node:nth-of-type(1){animation-delay:1s}
.hm-node:nth-of-type(2){animation-delay:1.16s}
.hm-node:nth-of-type(3){animation-delay:1.32s}
.hm-node:nth-of-type(4){animation-delay:1.48s}
.hm-node:nth-of-type(5){animation-delay:1.64s}
.hm-node:nth-of-type(6){animation-delay:1.8s}
/* the regions an htmx answer replaces by id take no box (components.css), so what they hold is a
   child of the page column and wears the column's own rule: no margin of v8's (`parts/folderpage.html`) */
#folderhead>*,#folderwarn>*,#folderchange>*,#condtab>*,#folderrows>*{margin-block:0}
/* the role tabs are links, so a tab is a URL; they take the segmented control's own spacing */
.seg a{gap:7px;border-radius:9px;font-weight:500}
/* the system's button segment is 32px of content, not border box; a phone's 44px floor is layout.css's */
@media (min-width:701px){.seg a{min-height:32px;box-sizing:content-box}}
.seg a[aria-pressed="true"]{box-shadow:var(--shadow-1);font-weight:600}
/* the slot bar is a link (§4.4's control), and reads as v3's span does: in the text colour */
a.slotbar{color:inherit}
/* a dialog's own check sits in its column with no room of its own (v3 writes `margin:0` on it) */
.dialog .summary{margin:0}
.seg a b{font-size:11.5px;font-weight:700;opacity:.8}
/* a form whose fields sit one under another, as the dialogs' `.db` does */
form.stack{display:flex;flex-direction:column;gap:14px}
/* a form that is the page's column for its children (`.inl`, display: contents) leaves them the page's own */
#view>.inl>*{margin-block:0}
/* §8.5 — v3's `tr.go`: the whole row opens the person's dialog, the name's link stretched over it */
.t tr.go{position:relative}
.t tr.go .main-cell{color:inherit;text-decoration:none}
.t tr.go .main-cell::after{content:"";position:absolute;inset:0}
/* a box inside a Madar card is the system's `.in`; v8's bare `input[type=…]` (shape.css) is more specific */
.card input.in{font-size:inherit;border-color:var(--line-2);border-radius:var(--r-control);padding:0 12px}