/* az-sheet · hero · /ai-agents/authorization (dark). "The clause lights."
   Product fact: one clause of the agent's ceiling decides each call, before it runs.
   Material: mono policy lines set straight on the band between two 1px hairlines, and one 1px wire that carries calls in.
   No paper, window, gutter, leaders or margin notes. Spec: build/pages/ai-agents-authorization/assets.md §1 and §3.

   Geometry is set once, as custom properties on the stage, so the drawing and the rows share one set of numbers
   and the no-JS markup is exact. Three compositions, chosen by the asset's own width (container queries):
     wide     container ≥ 480px (528 at 1440): 281px tall, clauses mono 16, slot `call · glyph · word` right-aligned on the clause
     compact  container < 480px (348 beside the text at 1100, 358 stacked at 390): 281px, clauses mono 14,
              the call name drops under its clause, the glyph and word stay on the clause's line
     narrow   container < 340px (the 320 check): the header wraps to two lines, everything below it moves down 20px
   The markup is the final frame. .is-live (asset.js) rewinds it; JS writes each frame as a pure function of t.
   The page grid must give the figure a definite column width (container-type:inline-size), e.g. minmax(0,1fr). */
.az-sheet{
  --az-t1:var(--t1,120ms);--az-t2:var(--t2,200ms);
  --az-mono:var(--mono,"Geist Mono",ui-monospace,monospace);--az-sans:var(--sans,"Geist",system-ui,sans-serif);
  --az-w85:var(--w-85,rgba(255,255,255,.85));--az-w60:var(--w-60,rgba(255,255,255,.6));
  --az-line:rgba(255,255,255,.16);   /* hairlines: above white-14 and the 15% floor, never --dk-line (.08) */
  --az-wire:rgba(255,255,255,.2);    /* the wire reads one step above the hairlines it serves */
  /* outcome colours on dark (v4.css --ok-d / --hold-d as RGB) and their rest values.
     Words and glyphs relax toward the text tier, not by opacity: 60% of the status colour mixed with 40% #ddd,
     so contrast rises as the colour relaxes (assets.md §1.2: 10.6:1 at rest; 60% opacity would fail at 4.3:1). */
  --az-ok-rgb:143 209 158;--az-rj-rgb:242 184 75;
  --az-ok-rest:#aed6b7;--az-rj-rest:#eac785;
  container:az-sh / inline-size;
  position:relative;margin:0;color:var(--az-w85);
}
.az-sheet .az-sh-stage{
  /* wide composition (CSS px from the stage's top-left) */
  --H:281px;
  --xr:24px;  /* hairlines start, inset from the wire so the two never touch (a "[" is the approvals bracket) */
  --xt:30px;  /* text column: the band's 6px inset puts every band's left edge on the hairlines' start */
  --xi:24px;  /* incoming call name, on the hairlines' start */
  --yi:20px;  /* incoming call name, centre */
  --ys:10px;  /* the travelling segment's start, centre */
  /* the incoming zone is 56px (the spec's 88 left a long bare lead-in above the sheet at rest) */
  --yt:56px;--yh:84px;--y2:140px;--y3:192px;--y4:244px;--yb:280px;
  --fs:16px;--tl:20px;  /* clause size and the clause's own line box (the band hugs it: 20 + 2 x 3 = 26px) */
  position:relative;height:var(--H);
}

/* the drawing: wire, segment, landing notches, two hairlines */
.az-sheet .az-sh-draw{position:absolute;inset:0;pointer-events:none}
.az-sheet .az-sh-draw i{position:absolute;display:block}
.az-sheet .az-sh-wire{left:0;top:0;width:1px;height:var(--y4);background:var(--az-wire)}   /* ends where the last call lands */
.az-sheet .az-sh-seg{left:0;top:calc(var(--ys) - 7px);width:1.5px;height:14px;background:var(--az-w85);opacity:0;will-change:transform}
.az-sheet .az-sh-notch{left:0;top:calc(var(--y3) - 1px);width:10px;height:1.5px;background:var(--az-w60);transform-origin:0 50%}
.az-sheet .az-sh-notch.is-4{top:calc(var(--y4) - 1px)}
.az-sheet .az-sh-rule{left:var(--xr);right:0;top:var(--yt);height:1px;background:var(--az-line)}
.az-sheet .az-sh-rule.is-bot{top:var(--yb)}

/* the call as it arrives; empty in the final frame */
.az-sheet .az-sh-in{position:absolute;left:var(--xi);top:calc(var(--yi) - 8px);height:16px;margin:0;font:400 12px/16px var(--az-mono);color:var(--az-w85);white-space:nowrap}
.az-sheet .az-sh-in span{position:absolute;left:0;top:0;opacity:0}

/* the ceiling: a header and three clauses */
.az-sheet .az-sh-lines{list-style:none;margin:0;padding:0}
.az-sheet .az-sh-lines>li{position:absolute;left:var(--xt);right:0;white-space:nowrap}
.az-sheet .az-sh-head{top:calc(var(--yh) - 8px);height:16px;font:400 12px/16px var(--az-mono);color:var(--az-w85)}
.az-sheet .az-sh-for{color:var(--az-w60)}
.az-sheet .az-sh-who{font:400 13px/16px var(--az-sans);letter-spacing:-.005em;color:var(--az-w85)}   /* sans: a person */
.az-sheet .az-sh-cl{top:calc(var(--y2) - var(--tl) / 2);display:flex;align-items:center;min-height:var(--tl);font:400 var(--fs)/var(--tl) var(--az-mono);color:var(--az-w85)}
.az-sheet .az-sh-cl.is-3{top:calc(var(--y3) - var(--tl) / 2)}
.az-sheet .az-sh-cl.is-4{top:calc(var(--y4) - var(--tl) / 2)}
.az-sheet .az-sh-t{position:relative;z-index:0;flex:none}

/* the highlighter band (page-owned device, assets.md §1.1): phrase-width, never the row; text colour unchanged */
.az-sheet .az-sh-band{position:absolute;top:-3px;bottom:-3px;left:-6px;right:-6px;z-index:-1;border-radius:2px;background:rgb(var(--az-rgb) / .12)}
.az-sheet [data-o="allow"]{--az-rgb:var(--az-ok-rgb);--az-rest:var(--az-ok-rest)}
.az-sheet [data-o="reject"]{--az-rgb:var(--az-rj-rgb);--az-rest:var(--az-rj-rest)}

/* the answer, right-aligned on the deciding clause: call · 12 · glyph · 6 · word */
.az-sheet .az-sh-out{margin-left:auto;padding-left:24px;display:flex;align-items:center}
.az-sheet .az-sh-call{font:400 12px/16px var(--az-mono);color:var(--az-w60);margin-right:12px}
.az-sheet .az-sh-g{flex:none;display:block;width:10px;height:10px;margin-right:6px;overflow:visible;color:var(--az-rest)}
.az-sheet .az-sh-g path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}   /* 1.8 in a 12 box at 10px = 1.5px */
.az-sheet .az-sh-w{font:500 11px/16px var(--az-mono);letter-spacing:.06em;margin-right:-.06em;color:var(--az-rest)}

/* caption, outside the moment, under the bottom hairline: mono 11px w-60, right-aligned like the page's other two captions */
.az-sheet .az-sh-demo{margin:20px 0 0;font:400 11px/16px var(--az-mono);color:var(--az-w60);text-align:right}

/* rewound first frame (asset.js adds .is-live, then writes every animated value inline) */
.az-sheet.is-live .az-sh-notch{transform:scaleX(0)}
.az-sheet.is-live .az-sh-band{clip-path:inset(0 100% 0 0);background:rgb(var(--az-rgb) / .3)}
.az-sheet.is-live .az-sh-g path{stroke-dasharray:1 1;stroke-dashoffset:1}
.az-sheet.is-live .az-sh-call,.az-sheet.is-live .az-sh-g,.az-sheet.is-live .az-sh-w{opacity:0}

/* compact: recomposed, not shrunk. The call name drops under its clause; the answer keeps the clause's line */
@container az-sh (max-width:479px){
  .az-sheet .az-sh-stage{--H:281px;--xr:16px;--xt:22px;--xi:16px;--yi:22px;--ys:10px;
    --yt:56px;--yh:80px;--y2:128px;--y3:176px;--y4:236px;--yb:280px;--fs:14px;--tl:18px}
  .az-sheet .az-sh-cl.is-dec{flex-wrap:wrap}
  .az-sheet .az-sh-cl.is-dec .az-sh-out{display:contents}
  .az-sheet .az-sh-cl.is-dec .az-sh-g{order:1;margin-left:auto}
  .az-sheet .az-sh-cl.is-dec .az-sh-w{order:2}
  .az-sheet .az-sh-cl.is-dec .az-sh-call{order:3;flex:0 0 100%;margin:3px 0 0;font-size:11px;line-height:16px}   /* centre = clause + 20px */
}
/* narrow (the 320 check): the header wraps as `ag_recon_002` / `for dana@acme.example`; every y below moves 20px */
@container az-sh (max-width:339px){
  .az-sheet .az-sh-stage{--H:301px;--xr:12px;--xt:18px;--xi:12px;--y2:148px;--y3:196px;--y4:256px;--yb:300px;--fs:13px}
  .az-sheet .az-sh-head{top:70px;height:40px;line-height:20px}
  .az-sheet .az-sh-ag{display:block}
  .az-sheet .az-sh-sep{display:none}
}

/* ≤1100 the hero column is 348px, so the compact rule above takes over by itself (it follows the column, not the viewport).
   ≤760 the page stacks the hero; the sheet runs the full wrap width (358 at 390) and carries its own 40px under the CTAs
   (assets.md §3.3), so the page's stacked grid needs no row gap. */
@media (max-width:760px){
  .az-sheet{margin-top:40px}
  .az-sheet .az-sh-demo{margin-top:16px}
}

/* reduced motion and print: the composed final frame, whatever JS has written */
@media (prefers-reduced-motion:reduce){
  .az-sheet .az-sh-seg,.az-sheet .az-sh-in span{opacity:0!important}
  .az-sheet .az-sh-notch{transform:none!important}
  .az-sheet .az-sh-band{clip-path:none!important;background:rgb(var(--az-rgb) / .12)!important}
  .az-sheet .az-sh-g path{stroke-dashoffset:0!important}
  .az-sheet .az-sh-call,.az-sheet .az-sh-g,.az-sheet .az-sh-w{opacity:1!important}
  .az-sheet .az-sh-g,.az-sheet .az-sh-w{color:var(--az-rest)!important}
}
@media print{
  .az-sheet .az-sh-seg,.az-sheet .az-sh-in span{opacity:0!important}
  .az-sheet .az-sh-notch{transform:none!important}
  .az-sheet .az-sh-band{clip-path:none!important}
  .az-sheet .az-sh-g path{stroke-dashoffset:0!important}
  .az-sheet .az-sh-call,.az-sheet .az-sh-g,.az-sheet .az-sh-w{opacity:1!important}
}
@media (forced-colors:active){
  .az-sheet .az-sh-wire,.az-sheet .az-sh-seg,.az-sheet .az-sh-notch,.az-sheet .az-sh-rule{background:CanvasText!important}
  .az-sheet .az-sh-cl.is-dec .az-sh-t{forced-color-adjust:none;color:MarkText}
  .az-sheet .az-sh-band{background:Mark!important}
}