/* Inazda Ops Pro: workflow components for operations apps (stock, documents, cases, accounts).
   Built on the Inazda tokens in ../inazda.css. Every colour below is an alias of a kit token or a
   new --iz-ops-* token declared in this block; components never use raw values. */

:root{
  /* lifecycle hues: dark enough for 3:1 icons on light, light enough on dark (plain values: color-mix
     over light-dark() picks the wrong hue in current Chromium) */
  --iz-ops-draft: oklch(.52 .012 270);
  --iz-ops-review: oklch(.58 .14 68);
  --iz-ops-review-ink: oklch(.49 .12 62);
  --iz-ops-approved: oklch(.5 .12 158);
  --iz-ops-active: oklch(.5 .1 222);
  --iz-ops-deprecated: oklch(.52 .07 62);
  --iz-ops-rejected: oklch(.53 .19 27);
  --iz-ops-archived: oklch(.5 .025 250);
  --iz-ops-void: oklch(.47 .17 18);
  --iz-ops-paper: oklch(.993 .006 88);
  --iz-ops-sheet: oklch(.993 .006 88);
  --iz-ops-sheet-line: oklch(.2 .02 80 / .16);
  --iz-ops-paper-fg: oklch(.22 .015 80);
  --iz-ops-paper-edge: oklch(.88 .012 85);
  --iz-ops-danger-ink: var(--iz-destructive);
  --iz-ops-ok-ink: var(--iz-success);
  --iz-ops-hair:       color-mix(in oklch, var(--iz-fg) 9%, transparent);
  --iz-ops-hair-strong:color-mix(in oklch, var(--iz-fg) 16%, transparent);
  --iz-ops-sunk:       color-mix(in oklch, var(--iz-fg) 3.5%, var(--iz-card));
  --iz-ops-lift:       0 1px 1px oklch(.2 .02 270 / .05), 0 6px 18px -8px oklch(.2 .03 270 / .22);
  --iz-ops-float:      0 1px 2px oklch(.2 .02 270 / .08), 0 18px 48px -16px oklch(.2 .03 270 / .38), 0 0 0 1px var(--iz-ops-hair-strong);
  --iz-ops-tint-1: var(--iz-dye-sungai);
  --iz-ops-tint-2: var(--iz-dye-kunyit);
  --iz-ops-tint-3: var(--iz-dye-daun);
  --iz-ops-tint-4: var(--iz-dye-mengkudu);
  --iz-ops-tint-5: var(--iz-dye-tanggui);
  --iz-ops-tint-6: oklch(.55 .015 260);
  --iz-ops-spring-soft: cubic-bezier(.34, 1.26, .64, 1);
  --iz-ops-lift: 0 1px 1px oklch(0 0 0 / .3), 0 8px 22px -10px oklch(0 0 0 / .6);
  --iz-ops-float: 0 1px 2px oklch(0 0 0 / .35), 0 22px 56px -18px oklch(0 0 0 / .75), 0 0 0 1px var(--iz-ops-hair-strong);
  --iz-ops-lift: 0 1px 1px oklch(0 0 0 / .3), 0 8px 22px -10px oklch(0 0 0 / .6);
  --iz-ops-float: 0 1px 2px oklch(0 0 0 / .35), 0 22px 56px -18px oklch(0 0 0 / .75), 0 0 0 1px var(--iz-ops-hair-strong);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --iz-ops-draft: oklch(.78 .012 270);
  --iz-ops-review: oklch(.83 .13 78);
  --iz-ops-review-ink: oklch(.85 .12 80);
  --iz-ops-approved: oklch(.79 .13 158);
  --iz-ops-active: oklch(.79 .1 222);
  --iz-ops-deprecated: oklch(.79 .07 70);
  --iz-ops-rejected: oklch(.76 .15 27);
  --iz-ops-archived: oklch(.77 .025 250);
  --iz-ops-void: oklch(.74 .15 18);
  --iz-ops-paper: oklch(.235 .01 80);
  --iz-ops-sheet: oklch(.84 .012 85);
  --iz-ops-paper-fg: oklch(.95 .008 85);
  --iz-ops-paper-edge: oklch(.33 .012 80);
  --iz-ops-danger-ink: oklch(.76 .15 27);
  --iz-ops-ok-ink: var(--iz-success);
  --iz-ops-lift: 0 1px 1px oklch(0 0 0 / .3), 0 8px 22px -10px oklch(0 0 0 / .6);
  --iz-ops-float: 0 1px 2px oklch(0 0 0 / .35), 0 22px 56px -18px oklch(0 0 0 / .75), 0 0 0 1px var(--iz-ops-hair-strong);
}}
:root[data-theme="dark"]{
  --iz-ops-draft: oklch(.78 .012 270);
  --iz-ops-review: oklch(.83 .13 78);
  --iz-ops-review-ink: oklch(.85 .12 80);
  --iz-ops-approved: oklch(.79 .13 158);
  --iz-ops-active: oklch(.79 .1 222);
  --iz-ops-deprecated: oklch(.79 .07 70);
  --iz-ops-rejected: oklch(.76 .15 27);
  --iz-ops-archived: oklch(.77 .025 250);
  --iz-ops-void: oklch(.74 .15 18);
  --iz-ops-paper: oklch(.235 .01 80);
  --iz-ops-sheet: oklch(.84 .012 85);
  --iz-ops-paper-fg: oklch(.95 .008 85);
  --iz-ops-paper-edge: oklch(.33 .012 80);
  --iz-ops-danger-ink: oklch(.76 .15 27);
  --iz-ops-ok-ink: var(--iz-success);
  --iz-ops-lift: 0 1px 1px oklch(0 0 0 / .3), 0 8px 22px -10px oklch(0 0 0 / .6);
  --iz-ops-float: 0 1px 2px oklch(0 0 0 / .35), 0 22px 56px -18px oklch(0 0 0 / .75), 0 0 0 1px var(--iz-ops-hair-strong);
}

/* ---------- shared ---------- */
.op-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.op-mono{font-family:var(--iz-mono);font-variant-numeric:tabular-nums}
.op-num{font-variant-numeric:tabular-nums}
.op-card{background:var(--iz-card);border-radius:var(--iz-radius);box-shadow:0 0 0 1px var(--iz-ops-hair-strong), var(--iz-ops-lift);color:var(--iz-fg)}
.op-ticket{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font:500 12px/1 var(--iz-mono);letter-spacing:.02em;
  color:var(--iz-fg);background:var(--iz-ops-sunk);box-shadow:inset 0 0 0 1px var(--iz-ops-hair-strong);
  -webkit-mask:radial-gradient(circle 3.5px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 3.5px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 3.5px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 3.5px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.op-btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.op-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in oklch,currentColor 35%,transparent);text-underline-offset:3px}
.op-link:hover{text-decoration-color:currentColor}
.op-link:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px;border-radius:4px}
.op-field{display:grid;gap:6px;min-width:0}
.op-field > label,.op-label{font:600 13.5px/1.2 var(--iz-font)}
.op-field .op-hint{font:400 12.5px/1.4 var(--iz-font);color:var(--iz-muted-fg);margin:0}
.op-field .op-err{font:500 12.5px/1.4 var(--iz-font);color:var(--iz-ops-danger-ink);margin:0;display:flex;gap:6px;align-items:flex-start}
.op-field .op-err[hidden]{display:none}
.op-field .op-err .iz-i{font-size:14px;margin-top:1px}
.op-input,.op-select,.op-textarea{width:100%;min-width:0;height:40px;padding:0 12px;border:0;border-radius:var(--iz-radius-sm);background:var(--iz-card);color:var(--iz-fg);
  font:400 14.5px/1.3 var(--iz-font);box-shadow:inset 0 0 0 1px var(--iz-ops-hair-strong);transition:box-shadow .18s var(--iz-ease)}
.op-textarea{height:auto;min-height:84px;padding:10px 12px;resize:vertical;line-height:1.45}
.op-select{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.op-input:hover,.op-select:hover,.op-textarea:hover{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--iz-fg) 30%,transparent)}
.op-input:focus-visible,.op-select:focus-visible,.op-textarea:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--iz-ring),0 0 0 3px color-mix(in oklch,var(--iz-ring) 26%,transparent)}
.op-input[aria-invalid="true"],.op-select[aria-invalid="true"],.op-textarea[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--iz-ops-danger-ink)}
.op-input[readonly],.op-input:disabled,.op-select:disabled,.op-textarea:disabled{background:var(--iz-ops-sunk);cursor:not-allowed}
.op-input::placeholder,.op-textarea::placeholder{color:var(--iz-muted-fg)}
.op-pw{position:relative;display:flex;align-items:center}
.op-pw .op-input{padding-right:46px}
.op-pw-eye{position:absolute;right:4px;width:36px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--iz-muted-fg);cursor:pointer;display:grid;place-items:center}
.op-pw-eye:hover{color:var(--iz-fg);background:color-mix(in oklch,var(--iz-fg) 7%,transparent)}
.op-pw-eye:focus-visible{outline:2px solid var(--iz-ring);outline-offset:0}
.op-pw-eye .iz-i{font-size:17px}
.op-check{display:inline-flex;align-items:center;gap:9px;font:500 14px/1.3 var(--iz-font);cursor:pointer;user-select:none}
.op-check input{appearance:none;margin:0;width:18px;height:18px;flex:none;border-radius:5px;background:var(--iz-card);box-shadow:inset 0 0 0 1.5px color-mix(in oklch,var(--iz-fg) 40%,transparent);
  display:grid;place-items:center;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.op-check input::after{content:"";width:9px;height:5px;border:2px solid var(--iz-primary-fg);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .22s var(--iz-spring)}
.op-check input:checked{background:var(--iz-primary);box-shadow:none}
.op-check input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.op-check input:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.op-check input:disabled{opacity:.5;cursor:not-allowed}
.op-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;font:400 14px/1.45 var(--iz-font);
  background:color-mix(in oklch,var(--tone,var(--iz-ring)) 9%,var(--iz-card));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tone,var(--iz-ring)) 30%,transparent)}
.op-banner > .iz-i{flex:none;font-size:18px;margin-top:1px;color:var(--tone-ink,var(--tone,var(--iz-ring)))}
.op-banner b{font-weight:600}
.op-banner p{margin:2px 0 0;color:var(--iz-muted-fg)}
.op-banner .op-btn-row{margin-top:10px}
.op-banner[data-tone="danger"]{--tone:var(--iz-destructive);--tone-ink:var(--iz-ops-danger-ink)}
.op-banner[data-tone="warn"]{--tone:var(--iz-ops-review)}
.op-banner[data-tone="ok"]{--tone:var(--iz-ops-approved)}
.op-banner[data-tone="info"]{--tone:var(--iz-ops-active)}
.op-banner:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.op-spin{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in oklch,currentColor 25%,transparent);border-top-color:currentColor;animation:iz-spin .7s linear infinite;flex:none}
.op-skel{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--iz-ops-hair) 0 40%,var(--iz-ops-hair-strong) 50%,var(--iz-ops-hair) 60% 100%);background-size:300% 100%;animation:op-shimmer 1.5s linear infinite}
@keyframes op-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes iz-spin{to{transform:rotate(360deg)}}
.op-kbd{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;font:500 11.5px/1 var(--iz-mono);color:var(--iz-muted-fg);box-shadow:inset 0 0 0 1px var(--iz-ops-hair-strong)}
.op-avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;font:600 11px/1 var(--iz-font);letter-spacing:.02em;
  background:color-mix(in oklch,var(--av,var(--iz-ops-active)) 18%,var(--iz-card));color:var(--iz-fg);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--av,var(--iz-ops-active)) 35%,transparent)}
.op-avatar[data-c="1"]{--av:var(--iz-ops-tint-1)}.op-avatar[data-c="2"]{--av:var(--iz-ops-tint-2)}.op-avatar[data-c="3"]{--av:var(--iz-ops-tint-3)}.op-avatar[data-c="4"]{--av:var(--iz-ops-tint-4)}.op-avatar[data-c="5"]{--av:var(--iz-ops-tint-5)}
.op-empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:34px 18px;color:var(--iz-muted-fg);font:400 14px/1.45 var(--iz-font)}
.op-empty b{color:var(--iz-fg);font-weight:600;font-size:15px}
.op-empty svg.op-empty-art{width:84px;height:64px;margin-bottom:4px}

/* ---------- 1. LifecycleBadge ---------- */
.op-badge{--h:26px;display:inline-flex;align-items:center;gap:6px;height:var(--h);padding:0 10px 0 8px;border-radius:999px;white-space:nowrap;
  font:600 12.5px/1 var(--iz-font);letter-spacing:.005em;color:var(--iz-fg);
  background:color-mix(in oklch,var(--hue) 13%,var(--iz-card));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--hue) 34%,transparent);
  transition:background-color .35s var(--iz-ease),box-shadow .35s var(--iz-ease)}
.op-badge svg{width:13px;height:13px;flex:none;color:var(--hue);overflow:visible}
.op-badge[data-size="sm"]{--h:22px;font-size:11.5px;padding:0 8px 0 6px;gap:5px}
.op-badge[data-size="sm"] svg{width:11px;height:11px}
.op-badge[data-size="lg"]{--h:32px;font-size:13.5px;padding:0 13px 0 10px;gap:7px}
.op-badge[data-size="lg"] svg{width:15px;height:15px}
.op-badge[data-icon="false"]{padding:0 10px}
.op-badge[data-status="draft"]{--hue:var(--iz-ops-draft)}
.op-badge[data-status="in-review"]{--hue:var(--iz-ops-review)}
.op-badge[data-status="approved"]{--hue:var(--iz-ops-approved)}
.op-badge[data-status="active"]{--hue:var(--iz-ops-active)}
.op-badge[data-status="deprecated"]{--hue:var(--iz-ops-deprecated)}
.op-badge[data-status="rejected"]{--hue:var(--iz-ops-rejected)}
.op-badge[data-status="archived"]{--hue:var(--iz-ops-archived)}
.op-badge[data-status="void"]{--hue:var(--iz-ops-void)}
.op-badge[data-status="void"] .op-badge-t{text-decoration:line-through;text-decoration-thickness:1.5px}
.op-badge[data-pulse] svg .p{transform-origin:8px 8px;animation:op-pulse 1.8s var(--iz-ease) infinite}
@keyframes op-pulse{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
.op-badge-t{display:inline-block}
.op-badge.is-swapping .op-badge-t,.op-badge.is-swapping svg{animation:op-swap .42s var(--iz-ops-spring-soft)}
@keyframes op-swap{from{opacity:0;transform:translateY(6px) scale(.9)}}
/* stamp variant */
.op-stamp{--hue:var(--iz-ops-approved);position:relative;display:inline-grid;place-items:center;padding:7px 14px 6px;border-radius:7px;rotate:-6deg;
  font:700 15px/1 var(--iz-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hue);
  box-shadow:inset 0 0 0 2.5px var(--hue),inset 0 0 0 5px transparent,inset 0 0 0 6.5px color-mix(in oklch,var(--hue) 60%,transparent);
  -webkit-mask:radial-gradient(circle at 20% 30%,#000 0 1px,#0000 1.4px) 0 0/7px 6px,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:radial-gradient(circle at 20% 30%,#000 0 1px,#0000 1.4px) 0 0/7px 6px exclude,linear-gradient(#000 0 0)}
.op-stamp small{display:block;font:600 9.5px/1 var(--iz-mono);letter-spacing:.08em;margin-top:4px;opacity:.9}
.op-stamp[data-status="void"]{--hue:var(--iz-ops-void)}
.op-stamp[data-status="rejected"]{--hue:var(--iz-ops-rejected)}
.op-stamp[data-status="active"]{--hue:var(--iz-ops-active)}
.op-stamp.is-landing{animation:op-stamp .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes op-stamp{0%{opacity:0;transform:scale(1.9);filter:blur(2px)}55%{opacity:1;transform:scale(.94);filter:none}100%{transform:scale(1)}}
/* lifecycle demo track */
.op-life{display:grid;gap:18px}
.op-life-track{display:flex;flex-wrap:wrap;align-items:center;row-gap:10px;list-style:none;margin:0;padding:0}
.op-life-track li{display:flex;align-items:center;gap:8px;flex:none;font:500 12.5px/1 var(--iz-font);color:var(--iz-muted-fg)}
.op-life-track li + li::before{content:"";width:26px;height:1.5px;margin-right:8px;background:var(--iz-ops-hair-strong);transition:background-color .3s}
.op-life-track li[data-done] {color:var(--iz-fg)}
.op-life-track li[data-done] + li::before,.op-life-track li[data-cur]::before{background:var(--iz-fg)}
.op-life-track i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background-color .3s,transform .4s var(--iz-spring)}
.op-life-track li[data-done] i{background:currentColor}
.op-life-track li[data-cur] i{background:var(--iz-fg);transform:scale(1.35)}
.op-life-track li[data-cur]{color:var(--iz-fg);font-weight:600}

/* ---------- menu engine (RowActions, ContextMenu) ---------- */
.op-ra-trigger{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--iz-muted-fg);cursor:pointer;display:inline-grid;place-items:center;transition:background-color .15s,color .15s}
.op-ra-trigger:hover,.op-ra-trigger[aria-expanded="true"]{background:color-mix(in oklch,var(--iz-fg) 8%,transparent);color:var(--iz-fg)}
.op-ra-trigger:focus-visible{outline:2px solid var(--iz-ring);outline-offset:1px}
.op-ra-trigger .iz-i{font-size:18px}
.op-menu{position:fixed;z-index:9800;min-width:236px;max-width:min(320px,calc(100vw - 24px));padding:6px;border-radius:14px;background:var(--iz-card);color:var(--iz-fg);
  box-shadow:var(--iz-ops-float);font:400 14px/1.2 var(--iz-font);outline:none;transform-origin:var(--ox,top) var(--oy,left)}
.op-menu.is-in{animation:op-menu-in .2s var(--iz-ops-spring-soft)}
@keyframes op-menu-in{from{opacity:0;transform:scale(.95) translateY(-3px)}}
.op-menu.is-out{animation:op-menu-out .12s var(--iz-ease-in) forwards}
@keyframes op-menu-out{to{opacity:0;transform:scale(.97)}}
.op-menu-group{padding:9px 10px 5px;font:600 11.5px/1 var(--iz-font);letter-spacing:.02em;color:var(--iz-muted-fg)}
.op-menu-sep{height:1px;margin:5px 6px;background:var(--iz-ops-hair)}
.op-mi{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:10px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:9px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;outline:none;overflow:hidden}
.op-mi .iz-i{font-size:16px;opacity:.78}
.op-mi-l{min-width:0}
.op-mi-why{grid-column:2 / -1;display:grid;grid-template-rows:0fr;font:400 12.5px/1.35 var(--iz-font);color:var(--iz-muted-fg);transition:grid-template-rows .22s var(--iz-ease)}
.op-mi-why > span{overflow:hidden}
.op-mi:focus .op-mi-why,.op-mi:hover .op-mi-why{grid-template-rows:1fr}
.op-mi:focus .op-mi-why > span,.op-mi:hover .op-mi-why > span{padding-top:3px}
.op-mi kbd{font:400 12px/1 var(--iz-mono);color:var(--iz-muted-fg)}
.op-mi:hover,.op-mi:focus{background:color-mix(in oklch,var(--iz-fg) 7%,transparent)}
.op-mi:focus-visible{box-shadow:inset 0 0 0 2px var(--iz-ring)}
.op-mi[aria-disabled="true"]{cursor:not-allowed}
.op-mi[aria-disabled="true"] .op-mi-l,.op-mi[aria-disabled="true"] .iz-i,.op-mi[aria-disabled="true"] kbd{opacity:.5}
.op-mi[aria-disabled="true"] .op-mi-l::after{content:"";display:inline-block;width:11px;height:11px;margin-left:7px;vertical-align:-1px;opacity:.9;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.op-mi[data-danger]{color:var(--iz-ops-danger-ink)}
.op-mi[data-danger] .iz-i{opacity:1}
.op-mi[data-danger]:hover,.op-mi[data-danger]:focus{background:color-mix(in oklch,var(--iz-destructive) 10%,transparent)}
.op-mi[data-arming]{background:var(--iz-destructive)!important;color:#fff}
.op-mi[data-arming] .iz-i{opacity:1}
.op-mi[data-arming] kbd{color:#fff}
.op-mi-fuse{position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;opacity:.65;transform-origin:left;animation:op-fuse var(--fuse,3.2s) linear forwards}
@keyframes op-fuse{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.op-sheet-back{position:fixed;inset:0;z-index:9790;background:oklch(.15 .01 270 / .38);animation:op-fade .2s var(--iz-ease)}
@keyframes op-fade{from{opacity:0}}
.op-menu[data-sheet]{left:8px!important;right:8px;top:auto!important;bottom:8px;max-width:none;min-width:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));border-radius:20px;
  animation:op-sheet-in .32s var(--iz-ops-spring-soft)}
.op-menu[data-sheet]::before{content:"";display:block;width:38px;height:4px;border-radius:4px;margin:2px auto 8px;background:var(--iz-ops-hair-strong)}
.op-menu[data-sheet] .op-mi{min-height:46px;font-size:15px}
.op-menu[data-sheet].is-out{animation:op-sheet-out .18s var(--iz-ease-in) forwards}
@keyframes op-sheet-in{from{transform:translateY(105%)}}
@keyframes op-sheet-out{to{transform:translateY(105%)}}
.op-menu-head{padding:4px 10px 8px;font:600 14px/1.3 var(--iz-font);border-bottom:1px solid var(--iz-ops-hair);margin-bottom:4px}
.op-menu-head small{display:block;font:400 12.5px/1.3 var(--iz-font);color:var(--iz-muted-fg);margin-top:2px}

/* ---------- 2. RowActions demo table ---------- */
.op-rows{width:100%;border-collapse:separate;border-spacing:0;font:400 14px/1.35 var(--iz-font)}
.op-rows th{font:600 12px/1 var(--iz-font);color:var(--iz-muted-fg);text-align:left;padding:10px 12px;border-bottom:1px solid var(--iz-ops-hair-strong);white-space:nowrap}
.op-rows td{padding:10px 12px;border-bottom:1px solid var(--iz-ops-hair);vertical-align:middle}
.op-rows tr:last-child td{border-bottom:0}
.op-rows tbody tr{transition:background-color .15s}
.op-rows tbody tr:hover,.op-rows tbody tr:focus-within,.op-rows tbody tr[data-menu]{background:color-mix(in oklch,var(--iz-fg) 3.5%,transparent)}
.op-rows tbody tr:focus-visible{outline:2px solid var(--iz-ring);outline-offset:-2px}
.op-rows td:last-child{text-align:right;width:44px}
.op-rows .sub{display:block;font-size:12.5px;color:var(--iz-muted-fg);margin-top:2px}
.op-rows tr[data-gone] td{opacity:.45;text-decoration:line-through}

/* ---------- 3. CommitFlow ---------- */
.op-cf{display:grid;gap:18px;container-type:inline-size}
.op-cf-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0;counter-reset:s}
.op-cf-rail li{display:grid;gap:8px;font:600 12.5px/1 var(--iz-font);color:var(--iz-muted-fg);counter-increment:s}
.op-cf-rail li::before{content:"";height:3px;border-radius:3px;background:var(--iz-ops-hair-strong);background-image:linear-gradient(var(--fill,var(--iz-fg)),var(--fill,var(--iz-fg)));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .5s var(--iz-ease)}
.op-cf-rail li > span::before{content:counter(s) "  ";font-family:var(--iz-mono);font-weight:500;opacity:.7}
.op-cf-rail li[data-done]{color:var(--iz-fg)}
.op-cf-rail li[data-done]::before{background-size:100% 100%}
.op-cf-rail li[data-cur]{color:var(--iz-fg)}
.op-cf-rail li[data-cur]::before{background-size:42% 100%}
.op-cf[data-state="pending"] .op-cf-rail li[data-cur]::before{background-image:linear-gradient(90deg,transparent,var(--iz-fg),transparent);background-size:40% 100%;animation:op-sweep 1.1s var(--iz-ease) infinite}
@keyframes op-sweep{from{background-position:-60% 0}to{background-position:160% 0}}
.op-cf[data-state="error"] .op-cf-rail li[data-cur],.op-cf[data-state="uncertain"] .op-cf-rail li[data-cur]{--fill:var(--iz-ops-review)}
.op-cf[data-state="error"] .op-cf-rail li[data-cur]{--fill:var(--iz-destructive)}
.op-cf-body{display:grid;gap:14px}
.op-cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.op-cf-grid .wide{grid-column:1 / -1}
@container (max-width:520px){.op-cf-grid{grid-template-columns:minmax(0,1fr)}}
.op-cf-summary{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.op-cf-summary a{color:var(--iz-ops-danger-ink);font-weight:500}
.op-cf-review{display:grid;gap:0;margin:0;border-radius:14px;background:var(--iz-ops-sunk);box-shadow:inset 0 0 0 1px var(--iz-ops-hair)}
.op-cf-review > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:11px 14px;border-top:1px solid var(--iz-ops-hair)}
.op-cf-review > div:first-child{border-top:0}
.op-cf-review dt{font:500 13px/1.35 var(--iz-font);color:var(--iz-muted-fg)}
.op-cf-review dd{margin:0;font:500 14.5px/1.35 var(--iz-font)}
.op-cf-review dd .after{font-weight:600}
@container (max-width:460px){.op-cf-review > div{grid-template-columns:minmax(0,1fr);gap:2px}}
.op-cf-lead{font:400 14.5px/1.5 var(--iz-font);margin:0}
.op-cf-lead b{font-weight:600}
.op-cf-delta{width:100%;border-collapse:collapse;font:400 13.5px/1.3 var(--iz-font);margin-top:8px}
.op-cf-delta th,.op-cf-delta td{text-align:left;padding:7px 10px 7px 0;border-top:1px solid var(--iz-ops-hair)}
.op-cf-delta th{font-weight:600;font-size:12px;color:var(--iz-muted-fg);border-top:0}
.op-cf-delta .was{text-decoration:line-through;color:var(--iz-muted-fg)}
.op-cf-delta .now{font-weight:600}
.op-cf[data-state="pending"] .op-cf-body{cursor:progress}
/* receipt */
.op-receipt-slot{position:relative;padding-top:10px}
.op-receipt-slot::before{content:"";position:absolute;left:8%;right:8%;top:0;height:10px;border-radius:6px;background:var(--iz-fg);opacity:.9;
  box-shadow:inset 0 -3px 0 color-mix(in oklch,var(--iz-bg) 30%,transparent)}
.op-receipt{position:relative;margin:-4px auto 0;width:min(84%,380px);padding:18px 18px 26px;background:var(--iz-ops-paper);color:var(--iz-ops-paper-fg);
  font:400 13px/1.55 var(--iz-mono);box-shadow:0 10px 24px -14px oklch(.2 .03 270 / .45),inset 0 8px 10px -8px oklch(.1 .01 270 / .25);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 12px 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 12px 100%}
.op-receipt.is-printing{animation:op-print 1.1s cubic-bezier(.3,.9,.3,1) both;clip-path:inset(0 0 0 0)}
@keyframes op-print{0%{transform:translateY(-100%);clip-path:inset(100% 0 0 0)}60%{transform:translateY(-6%);clip-path:inset(6% 0 0 0)}78%{transform:translateY(2%)}100%{transform:none;clip-path:inset(0 0 0 0)}}
.op-receipt h4{margin:0 0 2px;font:700 13px/1.2 var(--iz-mono);letter-spacing:.08em;text-transform:uppercase}
.op-receipt .rr{display:flex;justify-content:space-between;gap:12px}
.op-receipt .rr span:last-child{text-align:right}
.op-receipt hr{border:0;border-top:1.5px dashed color-mix(in oklch,var(--iz-ops-paper-fg) 30%,transparent);margin:9px 0}
.op-receipt .ok{display:flex;align-items:center;gap:7px;font-weight:600}
.op-receipt .ok svg{width:15px;height:15px;color:var(--iz-ops-approved)}
.op-cf-done{display:grid;gap:14px;justify-items:center}

/* ---------- 4. ChangeReview ---------- */
.op-cr{display:grid;gap:16px;container-type:inline-size}
.op-cr-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.op-cr-head h3{margin:0;font:600 19px/1.2 var(--iz-font);letter-spacing:-.015em;flex-basis:100%}
.op-cr-head p{margin:0;font-size:13.5px;color:var(--iz-muted-fg)}
.op-cr-cols{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch}
.op-cr-arrow{display:grid;place-items:center;color:var(--iz-muted-fg)}
.op-cr-arrow .iz-i{font-size:18px}
.op-cr-side{border-radius:14px;padding:14px;display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--iz-ops-hair-strong);background:var(--iz-card)}
.op-cr-side[data-side="before"]{background:var(--iz-ops-sunk)}
.op-cr-side h4{margin:0;font:600 12px/1 var(--iz-font);letter-spacing:.02em;color:var(--iz-muted-fg)}
.op-cr-val{display:grid;gap:3px;position:relative}
.op-cr-val dt{font:500 12.5px/1.2 var(--iz-font);color:var(--iz-muted-fg)}
.op-cr-val dd{margin:0;font:600 16px/1.3 var(--iz-font);position:relative;justify-self:start}
.op-cr-val dd::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;border-radius:2px;background:var(--iz-ops-danger-ink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--iz-ease)}
.op-cr:is([data-state="done"],[data-state="locked"]) .op-cr-side[data-side="before"] .op-cr-val[data-changed] dd::after{transform:scaleX(1)}
.op-cr-val[data-changed] .op-input,.op-cr-val[data-changed] .op-select{box-shadow:inset 0 0 0 1.5px var(--iz-ops-review)}
.op-cr-val .chg{position:absolute;right:0;top:0;font:600 11px/1 var(--iz-font);color:var(--iz-ops-review-ink);display:none}
.op-cr-val[data-changed] .chg{display:block}
.op-cr-after-v{font:600 16px/1.3 var(--iz-font)}
.op-cr[data-state="done"] .op-cr-side[data-side="after"] .op-cr-val[data-changed] .op-cr-after-v{animation:op-stamp .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:.25s}
.op-cr-void{display:grid;place-items:center;gap:8px;min-height:150px;border-radius:12px;text-align:center;padding:16px;font:500 13.5px/1.45 var(--iz-font);color:var(--iz-muted-fg);
  background:repeating-linear-gradient(-45deg,color-mix(in oklch,var(--iz-ops-void) 9%,transparent) 0 8px,transparent 8px 16px)}
.op-cr-impact{padding:12px 14px;border-radius:12px;background:var(--iz-ops-sunk);font:400 13.5px/1.5 var(--iz-font);box-shadow:inset 3px 0 0 var(--iz-ops-review)}
.op-cr-impact b{display:block;font:600 12.5px/1.3 var(--iz-font);margin-bottom:3px}
.op-cr-impact .delta{font-family:var(--iz-mono);font-weight:600}
.op-cr-count{justify-self:end;font:400 12px/1 var(--iz-mono);color:var(--iz-muted-fg)}
.op-cr-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.op-cr-foot .op-cr-note{margin-left:auto;font-size:12.5px;color:var(--iz-muted-fg)}
.op-cr-result{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px;border-radius:14px;background:var(--iz-ops-sunk);box-shadow:inset 0 0 0 1px var(--iz-ops-hair)}
.op-cr-result p{margin:0;flex:1 1 220px;font:400 13.5px/1.5 var(--iz-font)}
@container (max-width:560px){
  .op-cr-cols{grid-template-columns:minmax(0,1fr);gap:8px}
  .op-cr-arrow{transform:rotate(90deg);height:22px}
  .op-cr-foot .op-cr-note{margin-left:0;flex-basis:100%}
}

/* ---------- 5. TypeToConfirm ---------- */
.op-ttc{display:grid;gap:14px}
.op-ttc h3{margin:0;font:600 17px/1.25 var(--iz-font);letter-spacing:-.01em;display:flex;gap:10px;align-items:center}
.op-ttc h3 .iz-i{color:var(--iz-ops-danger-ink);font-size:20px;flex:none}
.op-ttc-cons{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.op-ttc-cons li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;font:400 13.5px/1.45 var(--iz-font)}
.op-ttc-cons li::before{content:"";width:6px;height:6px;margin:7px 0 0 4px;border-radius:2px;rotate:45deg;background:var(--iz-ops-danger-ink)}
.op-ttc-phrase{display:flex;flex-wrap:wrap;gap:3px;padding:0;margin:0;list-style:none}
.op-ttc-phrase li{display:grid;place-items:center;min-width:19px;height:28px;padding:0 3px;border-radius:5px;font:600 14px/1 var(--iz-mono);
  color:var(--iz-muted-fg);background:var(--iz-ops-sunk);box-shadow:inset 0 -2px 0 var(--iz-ops-hair-strong);transition:background-color .18s,color .18s,transform .3s var(--iz-spring),box-shadow .18s}
.op-ttc-phrase li[data-sp]{background:transparent;box-shadow:none;min-width:9px}
.op-ttc-phrase li[data-ok]{color:var(--iz-card);background:var(--iz-fg);box-shadow:none;transform:translateY(-1px)}
.op-ttc-phrase li[data-bad]{color:var(--iz-ops-danger-ink);box-shadow:inset 0 -2px 0 var(--iz-ops-danger-ink);background:color-mix(in oklch,var(--iz-destructive) 10%,transparent)}
.op-ttc[data-match] .op-ttc-phrase li[data-ok]{background:var(--iz-destructive);color:#fff}
.op-ttc-input.is-shake{animation:op-shake .32s var(--iz-ease)}
@keyframes op-shake{20%{transform:translateX(-4px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}}
.op-ttc-state{font:500 12.5px/1.3 var(--iz-font);color:var(--iz-muted-fg);min-height:1.3em;margin:0}
.op-ttc-state[data-tone="bad"]{color:var(--iz-ops-danger-ink)}
.op-ttc-state[data-tone="ok"]{color:var(--iz-fg)}
.op-ttc-blocked{display:grid;gap:12px}

/* ---------- 6. InspectorPanel ---------- */
.op-insp-demo{min-height:470px;container-type:inline-size;background:var(--iz-bg);border-radius:20px;overflow:hidden;position:relative}
.op-insp-grid{display:grid;grid-template-columns:minmax(0,1fr) 312px;min-height:inherit}
.op-insp-list{padding:16px;display:grid;gap:8px;align-content:start;min-width:0}
.op-insp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 2px 6px}
.op-insp-bar h3{margin:0 auto 0 0;font:600 16px/1.2 var(--iz-font)}
.op-doc{display:grid;grid-template-columns:auto 34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--iz-card);
  box-shadow:0 0 0 1px var(--iz-ops-hair);cursor:pointer;transition:box-shadow .18s,background-color .18s,transform .25s var(--iz-spring)}
.op-doc:hover{box-shadow:0 0 0 1px var(--iz-ops-hair-strong),var(--iz-ops-lift)}
.op-doc[aria-selected="true"]{box-shadow:0 0 0 1.5px var(--iz-fg),var(--iz-ops-lift)}
.op-doc:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.op-doc .ttl{font:600 14px/1.3 var(--iz-font);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-doc .meta{display:block;font:400 12.5px/1.3 var(--iz-font);color:var(--iz-muted-fg)}
.op-doc-ico{width:34px;height:40px;border-radius:5px 9px 5px 5px;background:var(--iz-ops-paper);box-shadow:inset 0 0 0 1px var(--iz-ops-paper-edge),0 2px 4px -2px oklch(.2 .02 270 / .25);position:relative}
.op-doc-ico::before{content:"";position:absolute;inset:11px 7px auto;height:12px;background:repeating-linear-gradient(var(--iz-ops-hair-strong) 0 1.5px,transparent 1.5px 4.5px)}
.op-doc-ico::after{content:attr(data-ext);position:absolute;left:4px;bottom:4px;font:700 7.5px/1 var(--iz-mono);letter-spacing:.04em;color:var(--iz-ops-paper-fg);
  padding:2px 3px;border-radius:2px;background:color-mix(in oklch,var(--ext,var(--iz-ops-active)) 26%,var(--iz-ops-paper))}
.op-insp{display:flex;flex-direction:column;min-width:0;background:var(--iz-card);box-shadow:-1px 0 0 var(--iz-ops-hair-strong);position:relative}
.op-insp-top{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--iz-ops-hair)}
.op-insp-top h3{margin:0 auto 0 0;font:600 14px/1 var(--iz-font)}
.op-insp-body{padding:16px 18px 20px;display:grid;gap:18px;align-content:start;flex:1}
.op-insp-body:focus-visible{outline:2px solid var(--iz-ring);outline-offset:-2px}
.op-insp-sec{display:grid;gap:10px;animation:op-rise .4s var(--iz-ease) both}
.op-insp-sec:nth-child(2){animation-delay:.04s}.op-insp-sec:nth-child(3){animation-delay:.08s}.op-insp-sec:nth-child(4){animation-delay:.12s}.op-insp-sec:nth-child(5){animation-delay:.16s}
@keyframes op-rise{from{opacity:0;transform:translateY(6px)}}
.op-insp-sec + .op-insp-sec{padding-top:16px;border-top:1px solid var(--iz-ops-hair)}
.op-insp-sec h4{margin:0;font:600 12px/1 var(--iz-font);letter-spacing:.02em;color:var(--iz-muted-fg)}
.op-insp-hd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.op-insp-hd b{display:block;font:600 16px/1.25 var(--iz-font);overflow-wrap:anywhere}
.op-insp-hd span{font:400 12.5px/1.35 var(--iz-font);color:var(--iz-muted-fg)}
.op-insp-stats{display:grid;gap:9px}
.op-insp-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;font:500 13px/1.2 var(--iz-font)}
.op-insp-stat b{font:600 13px/1 var(--iz-mono)}
.op-insp-stat i{grid-column:1 / -1;height:5px;border-radius:5px;background:var(--iz-ops-hair);overflow:hidden;display:block}
.op-insp-stat i::before{content:"";display:block;height:100%;width:calc(var(--v) * 100%);border-radius:inherit;background:var(--c,var(--iz-fg));transform-origin:left;animation:op-grow .7s var(--iz-ease) both}
@keyframes op-grow{from{transform:scaleX(0)}}
.op-insp-dl{display:grid;gap:0;margin:0}
.op-insp-dl > div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font:400 13.5px/1.35 var(--iz-font)}
.op-insp-dl dt{color:var(--iz-muted-fg)}
.op-insp-dl dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere}
.op-insp-tags{display:flex;flex-wrap:wrap;gap:6px}
.op-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font:500 12px/1 var(--iz-font);background:var(--iz-ops-sunk);box-shadow:inset 0 0 0 1px var(--iz-ops-hair-strong)}
.op-insp-links{display:grid;gap:2px;list-style:none;margin:0;padding:0}
.op-insp-links button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 2px;border:0;background:transparent;color:inherit;font:500 13.5px/1.2 var(--iz-font);cursor:pointer;border-radius:8px}
.op-insp-links button:hover{background:color-mix(in oklch,var(--iz-fg) 5%,transparent);padding-inline:8px}
.op-insp-links button:focus-visible{outline:2px solid var(--iz-ring)}
.op-insp-links .iz-i{font-size:15px;color:var(--iz-muted-fg)}
.op-insp-acts{display:flex;flex-wrap:wrap;gap:8px}
.op-insp-split{display:flex;height:8px;border-radius:8px;overflow:hidden;gap:2px}
.op-insp-split span{background:var(--hue);flex:var(--n) 0 0;transform-origin:left;animation:op-grow .6s var(--iz-ease) both}
.op-insp-legend{display:flex;flex-wrap:wrap;gap:6px 12px;font:500 12.5px/1.2 var(--iz-font)}
.op-insp-legend span{display:inline-flex;gap:6px;align-items:center}
.op-insp-legend span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--hue)}
.op-insp-rail{display:none}
.op-insp-handle{display:none}
.op-insp-list{grid-template-rows:auto 1fr auto}
.op-insp-demo-out{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px -16px -16px;padding:11px 16px;min-height:42px;border-top:1px solid var(--iz-ops-hair);background:var(--iz-ops-sunk);font:500 12.5px/1.3 var(--iz-mono);color:var(--iz-muted-fg)}
@container (max-width:860px){
  .op-insp-grid{grid-template-columns:minmax(0,1fr) auto}
  .op-insp-demo[data-collapsed] .op-insp{width:56px}
  .op-insp{width:290px;transition:width .35s var(--iz-ease)}
  .op-insp-demo[data-collapsed] .op-insp-body,.op-insp-demo[data-collapsed] .op-insp-top h3{display:none}
  .op-insp-demo[data-collapsed] .op-insp-top{border-bottom:0;padding:12px 10px;justify-content:center}
  .op-insp-collapse{display:inline-grid!important}
}
.op-insp-collapse{display:none!important}
@container (max-width:560px){
  .op-insp-grid{grid-template-columns:minmax(0,1fr)}
  .op-insp-demo{min-height:520px}
  .op-insp-body{overflow:auto}
  .op-insp{position:absolute;left:8px;right:8px;bottom:8px;width:auto!important;max-height:72%;border-radius:20px;box-shadow:var(--iz-ops-float);transform:translateY(calc(100% + 12px));transition:transform .4s var(--iz-ops-spring-soft);z-index:5}
  .op-insp-demo[data-sheet] .op-insp{transform:none}
  .op-insp-handle{display:block;width:38px;height:4px;border-radius:4px;margin:8px auto 0;background:var(--iz-ops-hair-strong)}
  .op-insp-collapse{display:none!important}
  .op-insp-demo[data-collapsed] .op-insp-body,.op-insp-demo[data-collapsed] .op-insp-top h3{display:revert}
  .op-doc{grid-template-columns:auto 30px minmax(0,1fr)}
  .op-doc > .op-badge{grid-column:3;justify-self:start}
}

/* ---------- 7. AuditLog ---------- */
.op-al{display:grid;gap:14px;container-type:inline-size}
.op-al-filters{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)) repeat(2,minmax(0,.9fr)) auto;gap:10px;align-items:end}
.op-al-filters .op-field > label{font-size:12.5px;font-weight:500;color:var(--iz-muted-fg)}
.op-al-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.op-al-count{font:500 13px/1.3 var(--iz-font);color:var(--iz-muted-fg);margin-right:auto}
.op-al-count b{color:var(--iz-fg)}
.op-al-filter-btn{display:none!important}
.op-al-list{border-radius:16px;background:var(--iz-card);box-shadow:0 0 0 1px var(--iz-ops-hair-strong);overflow:hidden}
.op-al-day{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;padding:9px 16px;font:600 12px/1 var(--iz-font);letter-spacing:.02em;color:var(--iz-muted-fg);
  background:color-mix(in oklch,var(--iz-ops-sunk) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--iz-ops-hair)}
.op-al-ev{border-bottom:1px solid var(--iz-ops-hair)}
.op-al-ev:last-child{border-bottom:0}
.op-al-row{display:grid;grid-template-columns:56px 28px minmax(0,1fr) auto 20px;gap:12px;align-items:center;width:100%;padding:11px 16px;border:0;background:transparent;color:inherit;text-align:left;font:400 14px/1.35 var(--iz-font);cursor:pointer}
.op-al-row:hover{background:color-mix(in oklch,var(--iz-fg) 3%,transparent)}
.op-al-row:focus-visible{outline:2px solid var(--iz-ring);outline-offset:-2px}
.op-al-row time{font:500 12.5px/1 var(--iz-mono);color:var(--iz-muted-fg)}
.op-al-what b{font-weight:600}
.op-al-what .tgt{text-decoration:underline;text-decoration-color:var(--iz-ops-hair-strong);text-underline-offset:3px}
.op-al-what small{display:block;font-size:12.5px;color:var(--iz-muted-fg);margin-top:2px}
.op-al-row .chev{font-size:16px;color:var(--iz-muted-fg);transition:transform .25s var(--iz-ease)}
.op-al-row[aria-expanded="true"] .chev{transform:rotate(90deg)}
.op-al-ev[data-failed]{box-shadow:inset 3px 0 0 var(--iz-ops-danger-ink);background:color-mix(in oklch,var(--iz-destructive) 4%,transparent)}
.op-al-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--iz-ease)}
.op-al-more > div{overflow:hidden}
.op-al-ev[data-open] .op-al-more{grid-template-rows:1fr}
.op-al-detail{margin:0 16px 14px 112px;padding:12px 14px;border-radius:12px;background:var(--iz-ops-sunk);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;font:400 13px/1.4 var(--iz-font)}
.op-al-detail div{display:grid;gap:2px}
.op-al-detail dt{font-size:12px;color:var(--iz-muted-fg)}
.op-al-detail dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.op-al-detail .wide{grid-column:1 / -1}
.op-al-chg{font-family:var(--iz-mono);font-size:12.5px}
.op-al-chg del{color:var(--iz-muted-fg)}
.op-al-chg ins{text-decoration:none;font-weight:600}
.op-al-load{padding:14px 16px;display:grid;gap:16px}
.op-al-load > div{display:grid;grid-template-columns:56px 28px minmax(0,1fr) 80px;gap:12px;align-items:center}
.op-al-load .op-skel.c{width:28px;height:28px;border-radius:50%}
.op-al-sheet{display:none}
@container (max-width:900px){
  .op-al-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .op-al-filters .op-field:first-child{grid-column:1 / -1}
}
@container (max-width:600px){
  .op-al-filters{display:none}
  .op-al[data-sheet] .op-al-filters{display:grid;grid-template-columns:minmax(0,1fr);padding:16px;border-radius:18px;background:var(--iz-card);box-shadow:var(--iz-ops-float);animation:op-rise .3s var(--iz-ops-spring-soft)}
  .op-al-filter-btn{display:inline-flex!important}
  .op-al-row{grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"what badge chev" "time time time";row-gap:4px;padding:12px 14px}
  .op-al-row time{grid-area:time}
  .op-al-row .op-avatar{display:none}
  .op-al-row .op-al-what{grid-area:what}
  .op-al-row .op-badge,.op-al-row .op-al-ok{grid-area:badge}
  .op-al-row .chev{grid-area:chev}
  .op-al-detail{margin:0 12px 12px;grid-template-columns:minmax(0,1fr)}
  .op-al-load > div{grid-template-columns:minmax(0,1fr) 60px}
  .op-al-load > div > :nth-child(1),.op-al-load > div > :nth-child(2){display:none}
}
.op-al-sheet-head{display:none}
@container (max-width:600px){.op-al[data-sheet] .op-al-sheet-head{display:flex;align-items:center;justify-content:space-between}.op-al-sheet-head b{font:600 16px/1 var(--iz-font)}}

/* ---------- 8. AuthCard ---------- */
.op-auth{width:min(100%,400px);padding:28px 28px 24px;border-radius:22px;background:var(--iz-card);box-shadow:var(--iz-ops-float);display:grid;gap:18px;position:relative;overflow:hidden}
.op-auth-brand{display:flex;align-items:center;gap:10px;font:700 16px/1 var(--iz-font);letter-spacing:-.01em}
.op-auth-brand .mk{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--iz-fg);color:var(--iz-bg)}
.op-auth-brand .mk svg{width:18px;height:18px}
.op-auth-brand small{font:500 12.5px/1 var(--iz-font);color:var(--iz-muted-fg);margin-left:auto}
.op-auth h2,.op-auth h3,.op-auth h4{margin:0;font:600 23px/1.15 var(--iz-font);letter-spacing:-.025em}
.op-auth .lede{margin:6px 0 0;color:var(--iz-muted-fg);font:400 14px/1.45 var(--iz-font)}
.op-auth form{display:grid;gap:14px}
.op-auth .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.op-auth .submit{width:100%;height:44px}
.op-auth-caps{display:flex;align-items:center;gap:6px;font:500 12.5px/1 var(--iz-font);color:var(--iz-ops-review-ink)}
.op-auth-caps[hidden]{display:none}
.op-auth-policy{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.op-auth-policy li{display:flex;gap:9px;align-items:center;font:400 13px/1.3 var(--iz-font);color:var(--iz-muted-fg);transition:color .2s}
.op-auth-policy li i{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px var(--iz-ops-hair-strong);display:grid;place-items:center;transition:background-color .2s,box-shadow .2s,transform .35s var(--iz-spring)}
.op-auth-policy li i svg{width:10px;height:10px;color:var(--iz-card);opacity:0;transform:scale(.4);transition:opacity .15s,transform .3s var(--iz-spring)}
.op-auth-policy li[data-ok]{color:var(--iz-fg)}
.op-auth-policy li[data-ok] i{background:var(--iz-ops-approved);box-shadow:none;transform:scale(1.08)}
.op-auth-policy li[data-ok] i svg{opacity:1;transform:none}
.op-auth-meter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.op-auth-meter i{height:4px;border-radius:4px;background:var(--iz-ops-hair-strong);transition:background-color .3s}
.op-auth-meter[data-v="1"] i:nth-child(-n+1){background:var(--iz-ops-rejected)}
.op-auth-meter[data-v="2"] i:nth-child(-n+2){background:var(--iz-ops-review)}
.op-auth-meter[data-v="3"] i:nth-child(-n+3){background:var(--iz-ops-active)}
.op-auth-meter[data-v="4"] i{background:var(--iz-ops-approved)}
.op-auth-meter-l{display:flex;justify-content:space-between;font:500 12px/1 var(--iz-font);color:var(--iz-muted-fg);margin-top:6px}
.op-auth-lock{display:grid;justify-items:center;text-align:center;gap:12px;padding:6px 0}
.op-auth-lock svg.ring{width:92px;height:92px;rotate:-90deg}
.op-auth-lock svg.ring circle{fill:none;stroke-width:5}
.op-auth-lock svg.ring .bg{stroke:var(--iz-ops-hair-strong)}
.op-auth-lock svg.ring .fg{stroke:var(--iz-fg);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.op-auth-lock .num{position:absolute;font:600 24px/1 var(--iz-mono)}
.op-auth-lock .dial{position:relative;display:grid;place-items:center}
.op-auth-ok{display:grid;justify-items:center;text-align:center;gap:10px;padding:10px 0}
.op-auth-ok .seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklch,var(--iz-ops-approved) 16%,var(--iz-card));color:var(--iz-ops-approved);animation:op-stamp .55s cubic-bezier(.2,1.6,.4,1) both}
.op-auth-ok .seal svg{width:28px;height:28px}
.op-auth-foot{font:400 12.5px/1.4 var(--iz-font);color:var(--iz-muted-fg);text-align:center;border-top:1px dashed var(--iz-ops-hair-strong);padding-top:14px}
.op-auth.is-shake{animation:op-shake .34s var(--iz-ease)}
@media (max-width:420px){.op-auth{padding:22px 18px 18px;border-radius:18px}}

/* ---------- 9. AccountLifecycle ---------- */
.op-acct{container-type:inline-size;border-radius:20px;overflow:hidden;background:var(--iz-bg)}
.op-acct-in{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:520px}
.op-acct-list{padding:14px;display:grid;gap:6px;align-content:start;box-shadow:1px 0 0 var(--iz-ops-hair-strong)}
.op-acct-list .hd{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px}
.op-acct-list .hd b{font:600 14px/1 var(--iz-font)}
.op-acct-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:8px 10px;border:0;border-radius:11px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.op-acct-item:hover{background:color-mix(in oklch,var(--iz-fg) 5%,transparent)}
.op-acct-item[aria-current="true"]{background:var(--iz-card);box-shadow:0 0 0 1px var(--iz-ops-hair-strong),var(--iz-ops-lift)}
.op-acct-item:focus-visible{outline:2px solid var(--iz-ring);outline-offset:1px}
.op-acct-item b{display:block;font:600 13.5px/1.25 var(--iz-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-acct-item small{display:block;font:400 12px/1.25 var(--iz-mono);color:var(--iz-muted-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-acct-item[data-inactive] .op-avatar{filter:grayscale(1)}
.op-acct-item.is-new{animation:op-rise .45s var(--iz-ops-spring-soft)}
.op-acct-main{padding:20px;display:grid;gap:16px;align-content:start;min-width:0}
.op-idcard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px;border-radius:18px;background:var(--iz-card);box-shadow:0 0 0 1px var(--iz-ops-hair-strong),var(--iz-ops-lift);overflow:hidden}
.op-idcard::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--hue,var(--iz-ops-active));transition:background-color .4s}
.op-idcard[data-inactive]{--hue:var(--iz-ops-archived)}
.op-idcard .op-avatar{width:56px;height:56px;font-size:17px}
.op-idcard h3{margin:0;font:600 19px/1.2 var(--iz-font);letter-spacing:-.015em}
.op-idcard p{margin:3px 0 0;font:400 13px/1.35 var(--iz-font);color:var(--iz-muted-fg)}
.op-idcard .stamp-slot{justify-self:end}
.op-scopes{display:flex;flex-wrap:wrap;gap:6px}
.op-acct-acts{display:flex;flex-wrap:wrap;gap:8px}
.op-acct-tl{list-style:none;margin:0;padding:0 0 0 4px;display:grid;gap:0}
.op-acct-tl li{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;padding:7px 0;font:400 13.5px/1.35 var(--iz-font)}
.op-acct-tl li::before{content:"";width:9px;height:9px;border-radius:50%;margin-top:4px;background:var(--iz-card);box-shadow:inset 0 0 0 2px var(--c,var(--iz-fg))}
.op-acct-tl li::after{content:"";position:absolute;left:4px;top:20px;bottom:-6px;width:1px;background:var(--iz-ops-hair-strong)}
.op-acct-tl li:last-child::after{display:none}
.op-acct-tl time{font:400 12px/1.4 var(--iz-mono);color:var(--iz-muted-fg)}
.op-acct-tl li.is-new{animation:op-rise .4s var(--iz-ease)}
.op-otp{display:grid;gap:12px;padding:16px;border-radius:16px;background:var(--iz-ops-paper);color:var(--iz-ops-paper-fg);box-shadow:inset 0 0 0 1.5px var(--iz-ops-paper-edge)}
.op-otp.is-new{animation:op-rise .4s var(--iz-ops-spring-soft)}
.op-otp-val{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.op-otp-val code{flex:1 1 200px;min-width:0;padding:10px 12px;border-radius:10px;background:var(--iz-card);color:var(--iz-fg);font:600 16px/1 var(--iz-mono);letter-spacing:.06em;box-shadow:inset 0 0 0 1px var(--iz-ops-hair-strong);overflow-wrap:anywhere}
.op-otp-warn{display:flex;gap:8px;font:500 13px/1.4 var(--iz-font)}
.op-otp-warn .iz-i{color:var(--iz-ops-review);flex:none;font-size:16px;margin-top:1px}
.op-acct-form{display:grid;gap:14px;padding:18px;border-radius:18px;background:var(--iz-card);box-shadow:0 0 0 1px var(--iz-ops-hair-strong)}
.op-acct-form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.op-acct-form fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.op-acct-form legend{font:600 13.5px/1.2 var(--iz-font);margin-bottom:8px;padding:0}
.op-acct-form .scopes{display:flex;flex-wrap:wrap;gap:10px 18px}
.op-acct-back{display:none!important}
@container (max-width:640px){
  .op-acct-in{grid-template-columns:minmax(0,1fr)}
  .op-acct[data-view="detail"] .op-acct-list{display:none}
  .op-acct[data-view="list"] .op-acct-main{display:none}
  .op-acct-list{box-shadow:none}
  .op-acct-back{display:inline-flex!important}
  .op-idcard{grid-template-columns:auto minmax(0,1fr)}
  .op-idcard .stamp-slot{grid-column:1 / -1;justify-self:start}
  .op-acct-form .two{grid-template-columns:minmax(0,1fr)}
  .op-acct-main{padding:14px}
}

/* ---------- 10. RoleNav ---------- */
.op-rn-demo{min-height:440px;container-type:inline-size;border-radius:20px;overflow:hidden;background:var(--iz-bg);position:relative}
.op-rn-grid{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:inherit}
.op-rn{padding:14px 10px;display:flex;flex-direction:column;gap:2px;box-shadow:1px 0 0 var(--iz-ops-hair-strong);background:var(--iz-card)}
.op-rn-brand{display:flex;align-items:center;gap:9px;padding:4px 10px 14px;font:700 15px/1 var(--iz-font)}
.op-rn-brand .mk{width:26px;height:26px;border-radius:8px;background:var(--iz-fg);color:var(--iz-bg);display:grid;place-items:center}
.op-rn-brand .mk svg{width:15px;height:15px}
.op-rn-group{font:600 11.5px/1 var(--iz-font);letter-spacing:.03em;color:var(--iz-muted-fg);padding:14px 10px 6px;overflow:hidden}
.op-rn-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.op-rn-item{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s var(--iz-ease),opacity .25s}
.op-rn-item > div{overflow:hidden;min-height:0}
.op-rn-item[data-leaving]{grid-template-rows:0fr;opacity:0}
.op-rn-item[data-entering]{animation:op-rn-in .45s var(--iz-ops-spring-soft) both}
@keyframes op-rn-in{from{opacity:0;transform:translateX(-10px)}}
.op-rn-link{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:inherit;font:500 14px/1 var(--iz-font);cursor:pointer;text-align:left}
.op-rn-link .iz-i{font-size:17px;opacity:.8}
.op-rn-link:hover{background:color-mix(in oklch,var(--iz-fg) 6%,transparent)}
.op-rn-link:focus-visible{outline:2px solid var(--iz-ring);outline-offset:-2px}
.op-rn-link[aria-current="page"]{background:color-mix(in oklch,var(--iz-fg) 8%,transparent);font-weight:600}
.op-rn-link[aria-current="page"]::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--iz-fg)}
.op-rn-link[aria-disabled="true"]{color:var(--iz-muted-fg);cursor:not-allowed}
.op-rn-link[aria-disabled="true"] .lock{margin-left:auto;font-size:14px;opacity:.9}
.op-rn-link .count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font:600 11px/1 var(--iz-mono);background:var(--iz-fg);color:var(--iz-bg)}
.op-rn-tip{position:absolute;z-index:20;max-width:240px;padding:8px 10px;border-radius:9px;font:500 12.5px/1.35 var(--iz-font);background:var(--iz-fg);color:var(--iz-bg);pointer-events:none;animation:op-menu-in .18s var(--iz-ops-spring-soft)}
.op-rn-who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 4px;border-top:1px solid var(--iz-ops-hair)}
.op-rn-who b{display:block;font:600 13px/1.2 var(--iz-font)}
.op-rn-who small{font:400 12px/1.2 var(--iz-font);color:var(--iz-muted-fg)}
.op-rn-main{padding:22px;display:grid;gap:10px;align-content:start;justify-items:start;min-width:0}
.op-rn-main h3{margin:0;font:600 22px/1.15 var(--iz-font);letter-spacing:-.02em}
.op-rn-main p{margin:0;color:var(--iz-muted-fg);font-size:14px;max-width:52ch}
.op-rn-tabs{display:none}
@container (max-width:600px){
  .op-rn-grid{grid-template-columns:minmax(0,1fr);padding-bottom:76px}
  .op-rn{display:none}
  .op-rn-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:absolute;left:8px;right:8px;bottom:8px;padding:6px;border-radius:18px;background:var(--iz-card);box-shadow:var(--iz-ops-float);list-style:none;margin:0}
  .op-rn-tab{display:grid;justify-items:center;gap:4px;padding:7px 2px;border:0;border-radius:12px;background:transparent;color:var(--iz-muted-fg);font:500 11px/1 var(--iz-font);cursor:pointer;position:relative}
  .op-rn-tab .iz-i{font-size:20px}
  .op-rn-tab[aria-current="page"]{color:var(--iz-fg);background:color-mix(in oklch,var(--iz-fg) 7%,transparent);font-weight:600}
  .op-rn-tab:focus-visible{outline:2px solid var(--iz-ring)}
  .op-rn-tab .count{position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;height:16px;border-radius:99px;font:600 10px/16px var(--iz-mono);background:var(--iz-fg);color:var(--iz-bg)}
}

/* ---------- 11. FolderCard ---------- */
.op-fold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px;list-style:none;margin:0;padding:0}
.op-fold{--tint:var(--iz-ops-tint-1);position:relative;display:grid;gap:10px;padding:12px 12px 14px;border-radius:18px;cursor:pointer;outline:none;user-select:none;
  transition:background-color .2s,box-shadow .2s,transform .35s var(--iz-spring)}
.op-fold:hover{background:color-mix(in oklch,var(--iz-fg) 3.5%,transparent)}
.op-fold:focus-visible{box-shadow:0 0 0 2px var(--iz-ring)}
.op-fold[aria-selected="true"]{background:color-mix(in oklch,var(--tint) 10%,var(--iz-card));box-shadow:0 0 0 1.5px color-mix(in oklch,var(--tint) 70%,var(--iz-fg))}
.op-fold[aria-selected="true"]:focus-visible{box-shadow:0 0 0 1.5px color-mix(in oklch,var(--tint) 70%,var(--iz-fg)),0 0 0 4px var(--iz-ring)}
.op-fold-art{position:relative;height:118px;perspective:600px}
.op-fold-back{position:absolute;inset:8px 6px 0;border-radius:6px 12px 12px 12px;background:color-mix(in oklch,var(--tint) 78%,oklch(.2 .02 60));box-shadow:inset 0 1px 0 oklch(1 0 0 / .18)}
.op-fold-back::before{content:"";position:absolute;left:0;top:-8px;width:44%;height:14px;border-radius:6px 9px 0 0;background:inherit;clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
.op-fold-sheet{position:absolute;left:16px;right:16px;top:14px;height:72px;border-radius:5px;background:var(--iz-ops-sheet);box-shadow:0 1px 2px oklch(.2 .02 60 / .25),inset 0 0 0 1px var(--iz-ops-paper-edge);
  transform:translateY(var(--sy,0)) rotate(var(--sr,0deg));transition:transform .45s var(--iz-spring)}
.op-fold-sheet::before{content:"";position:absolute;inset:10px 12px auto;height:22px;background:repeating-linear-gradient(var(--iz-ops-sheet-line) 0 1.5px,transparent 1.5px 6px);opacity:.9}
.op-fold-sheet:nth-of-type(2){--sr:-3deg;left:22px;right:12px;top:18px}
.op-fold-sheet:nth-of-type(3){--sr:2.5deg;left:12px;right:20px;top:22px}
.op-fold-front{position:absolute;left:6px;right:6px;bottom:0;height:74px;border-radius:9px 9px 12px 12px;transform-origin:50% 100%;
  background:linear-gradient(180deg,color-mix(in oklch,var(--tint) 88%,oklch(1 0 0)) 0%,var(--tint) 100%);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .4),inset 0 -10px 18px -10px oklch(.1 .02 60 / .35),0 10px 18px -12px oklch(.15 .03 60 / .55);
  transition:transform .5s var(--iz-ops-spring-soft)}
.op-fold-front::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 70% at 30% 0%,oklch(1 0 0 / .22),transparent 60%);pointer-events:none}
.op-fold-label{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:5px;font:600 11px/1 var(--iz-mono);
  background:var(--iz-ops-paper);color:var(--iz-ops-paper-fg);box-shadow:0 1px 2px oklch(.2 .02 60 / .3)}
.op-fold:hover .op-fold-front,.op-fold:focus-visible .op-fold-front{transform:rotateX(-16deg)}
.op-fold:hover .op-fold-sheet,.op-fold:focus-visible .op-fold-sheet{--sy:-8px}
.op-fold:hover .op-fold-sheet:nth-of-type(2),.op-fold:focus-visible .op-fold-sheet:nth-of-type(2){--sy:-12px}
.op-fold[data-peek] .op-fold-front{transform:rotateX(-16deg)}
.op-fold[data-peek] .op-fold-sheet{--sy:-8px}
.op-fold[data-peek] .op-fold-sheet:nth-of-type(2){--sy:-12px}
.op-fold[data-over]{transform:scale(1.03)}
.op-fold[data-over] .op-fold-front{transform:rotateX(-34deg)}
.op-fold[data-over] .op-fold-sheet{--sy:-16px}
.op-fold[data-over] .op-fold-sheet:nth-of-type(2){--sy:-22px}
.op-fold[data-over]{box-shadow:0 0 0 2px var(--tint),0 0 0 6px color-mix(in oklch,var(--tint) 20%,transparent)}
.op-fold.is-gulp .op-fold-front{animation:op-gulp .55s var(--iz-ops-spring-soft)}
@keyframes op-gulp{30%{transform:rotateX(-38deg)}}
.op-fold-name{display:grid;gap:2px;padding:0 4px;min-width:0}
.op-fold-name b{font:600 14.5px/1.25 var(--iz-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-fold-name span{font:400 12.5px/1.3 var(--iz-font);color:var(--iz-muted-fg)}
.op-fold-name .op-input{height:32px;font-size:14px;padding:0 8px}
.op-fold-check{position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--iz-fg);color:var(--iz-bg);transform:scale(0);transition:transform .35s var(--iz-spring);z-index:2}
.op-fold-check svg{width:12px;height:12px}
.op-fold[aria-selected="true"] .op-fold-check{transform:scale(1)}
.op-fold-more{position:absolute;right:8px;bottom:12px}
.op-fold.is-new{animation:op-fold-in .55s var(--iz-ops-spring-soft)}
@keyframes op-fold-in{from{opacity:0;transform:scale(.6) translateY(16px)}}
.op-fold.is-leaving{animation:op-fold-out .45s var(--iz-ease-in) forwards;pointer-events:none}
@keyframes op-fold-out{to{opacity:0;transform:translate(var(--tx,60px),var(--ty,60px)) scale(.2) rotate(12deg)}}
.op-fold[data-c="2"]{--tint:var(--iz-ops-tint-2)}.op-fold[data-c="3"]{--tint:var(--iz-ops-tint-3)}.op-fold[data-c="4"]{--tint:var(--iz-ops-tint-4)}.op-fold[data-c="5"]{--tint:var(--iz-ops-tint-5)}.op-fold[data-c="6"]{--tint:var(--iz-ops-tint-6)}
.op-fold-ws{display:grid;gap:16px}
.op-fold-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.op-fold-bar .crumb{margin-right:auto;font:500 13.5px/1.3 var(--iz-font);color:var(--iz-muted-fg);min-width:0}
.op-fold-bar .crumb b{color:var(--iz-fg)}
.op-loose{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;border-radius:14px;background:var(--iz-ops-sunk);box-shadow:inset 0 0 0 1px var(--iz-ops-hair);font:500 12.5px/1 var(--iz-font);color:var(--iz-muted-fg)}
.op-chipfile{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 8px;border-radius:9px;background:var(--iz-card);color:var(--iz-fg);font:500 13px/1 var(--iz-font);
  box-shadow:0 0 0 1px var(--iz-ops-hair-strong),var(--iz-ops-lift);cursor:grab;touch-action:none;border:0}
.op-chipfile:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.op-chipfile .ext{font:700 9px/1 var(--iz-mono);padding:3px 4px;border-radius:3px;background:color-mix(in oklch,var(--iz-ops-active) 20%,var(--iz-card))}
.op-chipfile.is-drag{position:fixed;z-index:9900;cursor:grabbing;pointer-events:none;rotate:-4deg;box-shadow:var(--iz-ops-float)}
.op-chipfile.is-ghost{opacity:.35}
.op-trash{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.op-trash-btn{position:relative}
.op-trash-btn .n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;font:600 10.5px/1 var(--iz-mono);background:var(--iz-fg);color:var(--iz-bg)}
.op-trash-btn.is-bump{animation:op-bump .45s var(--iz-spring)}
@keyframes op-bump{40%{transform:scale(1.15) rotate(-6deg)}}
.op-trash-list{list-style:none;margin:0;padding:12px;display:grid;gap:6px;border-radius:14px;background:var(--iz-ops-sunk);box-shadow:inset 0 0 0 1px var(--iz-ops-hair)}
.op-trash-list li{display:flex;align-items:center;gap:10px;justify-content:space-between;font:500 13.5px/1.3 var(--iz-font)}
.op-toast{position:fixed;left:50%;bottom:20px;z-index:9850;translate:-50% 0;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--iz-fg);color:var(--iz-bg);
  font:500 14px/1.3 var(--iz-font);box-shadow:0 18px 40px -16px oklch(.1 .02 270 / .6);animation:op-toast-in .35s var(--iz-ops-spring-soft);max-width:calc(100vw - 24px)}
.op-toast button{height:32px;padding:0 12px;border:0;border-radius:9px;background:color-mix(in oklch,var(--iz-bg) 16%,transparent);color:inherit;font:600 13.5px/1 var(--iz-font);cursor:pointer}
.op-toast button:focus-visible{outline:2px solid var(--iz-bg);outline-offset:1px}
.op-toast.is-out{animation:op-toast-out .2s var(--iz-ease-in) forwards}
@keyframes op-toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes op-toast-out{to{opacity:0;transform:translateY(10px)}}
/* Phones: span the viewport minus 16px gutters (left:50% alone shrink-wraps the toast to half the width), sit above
   the safe-area inset, and show at most two toasts: the older one lifts above the newest, any earlier ones hide. */
@media (max-width:600px){
  body>.op-toast{left:16px;right:16px;width:auto;max-width:none;translate:none;bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
  body>.op-toast:has(~ .op-toast){translate:0 calc(-100% - 8px)}
  body>.op-toast:has(~ .op-toast ~ .op-toast){display:none}
}

/* ---------- 12. Lab Glyphs ---------- */
.op-glyphs{display:grid;gap:14px}
.op-glyph-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.op-glyph-bar .op-input{max-width:260px}
.op-glyph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;list-style:none;margin:0;padding:0}
.op-glyph{display:grid;justify-items:center;gap:10px;padding:16px 8px 12px;width:100%;border:0;border-radius:14px;background:var(--iz-card);color:var(--iz-fg);box-shadow:0 0 0 1px var(--iz-ops-hair);cursor:pointer;
  font:500 12px/1.2 var(--iz-mono);transition:box-shadow .18s,transform .3s var(--iz-spring)}
.op-glyph:hover{box-shadow:0 0 0 1px var(--iz-ops-hair-strong),var(--iz-ops-lift);transform:translateY(-2px)}
.op-glyph:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.op-glyph .g{display:grid;place-items:center;height:72px}
.op-glyph svg{display:block}
.op-glyph span{color:var(--iz-muted-fg)}
.op-glyph[data-copied] span{color:var(--iz-fg)}
.op-lg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.op-lg .f{fill:var(--g-tint,var(--iz-ops-active));stroke:none;opacity:.32}
.op-lg-detail .f{opacity:1}
.op-lg-detail .o{stroke:var(--iz-fg)}
.op-lg-detail .hl{fill:none;stroke:oklch(1 0 0 / .7);stroke-width:.7}


/* ---------- 13. LedgerTable ---------- */
.op-ledger{--row-py:12px;--fs:14px;display:grid;gap:10px;min-width:0}
.op-ledger[data-density="dense"]{--row-py:7px;--fs:13px}
.op-ledger-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 12px/1 var(--iz-font);color:var(--iz-muted-fg)}
.op-ledger-legend span{display:inline-flex;align-items:center;gap:6px}
.op-ledger-legend span::before{content:"";width:12px;height:3px;border-radius:2px;background:var(--k)}
.op-ledger [data-kind="opening"]{--k:var(--iz-ops-archived)}
.op-ledger [data-kind="in"]{--k:var(--iz-ops-approved)}
.op-ledger [data-kind="out"]{--k:var(--iz-ops-review)}
.op-ledger [data-kind="correction"]{--k:var(--iz-ops-active)}
.op-ledger [data-kind="closing"]{--k:var(--iz-fg)}
.op-ledger-scroll{overflow:auto;max-height:var(--ledger-h,560px);border-radius:14px;background:var(--iz-card);box-shadow:0 0 0 1px var(--iz-ops-hair-strong);overscroll-behavior:contain}
.op-ledger-scroll:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.op-ledger-t{width:100%;border-collapse:separate;border-spacing:0;font:400 var(--fs)/1.3 var(--iz-font);font-variant-numeric:tabular-nums}
.op-ledger-t th,.op-ledger-t td{padding:var(--row-py) 14px;border-bottom:1px solid var(--iz-ops-hair);white-space:nowrap;text-align:right;background:var(--iz-card)}
.op-ledger-t .first{text-align:left;position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--iz-ops-hair-strong);max-width:280px;white-space:normal;min-width:180px}
.op-ledger-t tbody .first{font-weight:600}
.op-ledger-t tbody .first a{color:inherit;text-decoration:none}
.op-ledger-t tbody .first a:hover{text-decoration:underline;text-underline-offset:3px}
.op-ledger-t .first small,.op-ledger-t thead small{display:block;font:400 12px/1.3 var(--iz-font);color:var(--iz-muted-fg);margin-top:2px}
.op-ledger-t thead th{position:sticky;top:0;z-index:2;font:600 12px/1.2 var(--iz-font);letter-spacing:.02em;color:var(--iz-muted-fg);background:color-mix(in oklch,var(--iz-ops-sunk) 100%,transparent);box-shadow:inset 0 3px 0 var(--k,transparent),0 1px 0 var(--iz-ops-hair-strong);vertical-align:bottom}
.op-ledger-t thead th.first{z-index:3;box-shadow:inset 0 3px 0 transparent,0 1px 0 var(--iz-ops-hair-strong),1px 0 0 var(--iz-ops-hair-strong)}
.op-ledger-t thead button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:inherit}
.op-ledger-t thead button > span{display:block}
.op-ledger-t thead button:hover{color:var(--iz-fg)}
.op-ledger-t thead button:focus-visible{outline:2px solid var(--iz-ring);outline-offset:3px;border-radius:4px}
.op-ledger-t thead .arr{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s,transform .25s var(--iz-ease)}
.op-ledger-t thead th:hover .arr{opacity:.45}
.op-ledger-t thead [aria-sort="ascending"] .arr{opacity:1;transform:rotate(180deg)}
.op-ledger-t thead [aria-sort="descending"] .arr{opacity:1}
.op-ledger-t thead [aria-sort="ascending"],.op-ledger-t thead [aria-sort="descending"]{color:var(--iz-fg)}
.op-ledger-t td[data-kind="in"]{color:color-mix(in oklch,var(--iz-ops-approved) 80%,var(--iz-fg))}
.op-ledger-t td[data-kind="correction"]{color:color-mix(in oklch,var(--iz-ops-active) 80%,var(--iz-fg))}
.op-ledger-t td[data-kind="closing"]{font-weight:700;background:color-mix(in oklch,var(--iz-fg) 3%,var(--iz-card))}
.op-ledger-t td[data-kind="opening"]{color:var(--iz-muted-fg)}
.op-ledger-t .z{color:var(--iz-muted-fg)}
.op-ledger-t tbody tr:hover th,.op-ledger-t tbody tr:hover td{background:color-mix(in oklch,var(--iz-fg) 4%,var(--iz-card))}
.op-ledger-t tfoot th,.op-ledger-t tfoot td{position:sticky;bottom:0;z-index:2;font-weight:700;border-bottom:0;background:var(--iz-ops-sunk);box-shadow:0 -1px 0 var(--iz-ops-hair-strong)}
.op-ledger-t tfoot .first{z-index:3;box-shadow:0 -1px 0 var(--iz-ops-hair-strong),1px 0 0 var(--iz-ops-hair-strong)}
.op-ledger-t tfoot td[data-kind="closing"]{background:color-mix(in oklch,var(--iz-fg) 7%,var(--iz-ops-sunk))}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  .op-menu.is-in,.op-menu[data-sheet],.op-receipt.is-printing,.op-stamp.is-landing,.op-badge.is-swapping .op-badge-t,.op-badge.is-swapping svg,.op-fold.is-new,.op-fold.is-leaving,
  .op-insp-sec,.op-acct-item.is-new,.op-acct-tl li.is-new,.op-otp,.op-rn-item[data-entering],.op-toast,.op-auth.is-shake,.op-ttc-input.is-shake,.op-auth-ok .seal,
  .op-cr[data-state="done"] .op-cr-side[data-side="after"] .op-cr-val[data-changed] .op-cr-after-v,.op-insp-stat i::before,.op-insp-split span,.op-trash-btn.is-bump,.op-fold.is-gulp .op-fold-front{animation:none!important}
  .op-badge[data-pulse] svg .p,.op-spin,.op-skel,.op-mi-fuse,.op-cf[data-state="pending"] .op-cf-rail li[data-cur]::before{animation:none!important}
  .op-fold-front,.op-fold-sheet,.op-fold,.op-rn-item,.op-insp,.op-al-more,.op-mi-why{transition:none!important}
  .op-fold:hover .op-fold-front,.op-fold:focus-visible .op-fold-front{transform:none}
}
:root[data-motion="reduce"] :is(.op-menu,.op-receipt,.op-stamp,.op-fold,.op-insp-sec,.op-otp,.op-toast,.op-rn-item,.op-auth,.op-ttc-input){animation:none!important}
:root[data-glass="solid"] .op-al-day{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--iz-ops-sunk)}

/* visual-only tick used inside options (no nested control) */
.op-tick{width:18px;height:18px;flex:none;border-radius:5px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px color-mix(in oklch,var(--iz-fg) 40%,transparent);transition:background-color .15s,box-shadow .15s}
.op-tick::after{content:"";width:9px;height:5px;border:2px solid var(--iz-primary-fg);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .22s var(--iz-spring)}
[aria-selected="true"] > .op-tick{background:var(--iz-primary);box-shadow:none}
[aria-selected="true"] > .op-tick::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.op-cr-result:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}