/* az-ceiling · "a role becomes a ceiling" · /ai-agents/authorization ceiling (dark band, no container). Scoped under .az-ceiling.
   Fact: an agent's ceiling is set from a role the person already has. Spec: build/pages/ai-agents-authorization/assets.md §1.1 and §5.
   Uses v4.css tokens (--w-*, --sans, --mono, --t1…--t7, --ease, --ease-draw) with fallbacks so preview.html works standalone.
   The derivation is pure CSS alignment: a two-column grid puts the ceiling lines exactly under the start of the role, so no JS
   measurement and no connector is needed, and no-JS is exact. White tiers only: nothing is decided, so no outcome colour.
   The markup is the final frame; .is-live (added by asset.js) rewinds it, and asset.js clears its inline styles at the end. */
.az-ceiling{
  --az-t2:var(--t2,200ms);--az-t4:var(--t4,560ms);--az-t5:var(--t5,900ms);
  --az-line:rgba(255,255,255,.15);          /* hairlines on dark: the white-14 floor, rounded up to 15% */
  --az-band-peak:rgba(255,255,255,.18);     /* the neutral highlighter band at its peak (assets.md §1.1) */
  --az-band-rest:var(--w-10,rgba(255,255,255,.1));
  --az-pitch:44px;
  container:az-ceiling / inline-size;position:relative;margin:0;color:#fff
}
.az-ceiling p{margin:0}
.az-ceiling .az-cl-stage{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start}

/* the person and the role they already hold (sans: a person), above the top hairline */
.az-ceiling .az-cl-role{display:contents}
.az-ceiling .az-cl-who,.az-ceiling .az-cl-r{font:400 18px/28px var(--sans);letter-spacing:-.005em;color:var(--w-85);white-space:nowrap}
.az-ceiling .az-cl-who{grid-area:1/1}
.az-ceiling .az-cl-sep{white-space:pre;padding-right:6px;color:var(--w-60)}   /* the band hangs 6px left of the role; this keeps it off the dot */
.az-ceiling .az-cl-r{grid-area:1/2;justify-self:start}
/* the page's highlighter band, neutral variant: phrase-width, behind the words, text colour unchanged */
.az-ceiling .az-cl-rt{position:relative;z-index:0}
.az-ceiling .az-cl-band{position:absolute;z-index:-1;top:-3px;bottom:-3px;left:-6px;right:-6px;border-radius:2px;background:var(--az-band-rest)}

/* hairlines: full width, 1px */
.az-ceiling .az-cl-rule{display:block;grid-column:1/-1;height:1px;background:var(--az-line)}
.az-ceiling .az-cl-rule.is-top{grid-row:2;margin-top:20px}
.az-ceiling .az-cl-rule.is-bot{grid-row:4;margin-top:18px}

/* the ceiling Hawcx sets (mono: policy lines), hanging from the role's left edge */
.az-ceiling .az-cl-lines{grid-area:3/2;min-width:0;margin:17px 0 0;padding:0;list-style:none}
.az-ceiling .az-cl-lines li{display:flex;align-items:center;height:var(--az-pitch);font:400 16px/24px var(--mono);letter-spacing:0;color:var(--w-85);white-space:nowrap}
.az-ceiling .az-cl-ty{display:inline-block}
.az-ceiling .az-cl-q{color:var(--w-60)}

/* the caret: a thin bar that leads the typing, in the lines' own font so 1ch is one character */
.az-ceiling .az-cl-cur{grid-area:3/2;justify-self:start;display:block;width:1.5px;height:18px;margin-top:calc(17px + (var(--az-pitch) - 18px) / 2);
  font:400 16px/24px var(--mono);background:var(--w-60);opacity:0;
  transform:translate(calc(var(--cx,0) * 1ch + 1px),calc(var(--cy,0) * var(--az-pitch)))}

/* caption row, outside the moment */
.az-ceiling .az-cl-cap{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font:400 11px/16px var(--mono);color:var(--w-60)}

/* live: asset.js rewinds (band off, lines untyped) and plays it once */
.az-ceiling.is-live .az-cl-band{clip-path:inset(0 100% 0 0)}
.az-ceiling.is-live .az-cl-ty{clip-path:inset(-4px calc(100% - var(--n,0) * 1ch) -4px 0)}

/* compact (a column under 520px: 486px beside the body at 1100, 358px at 390, 288px at 320): recompose, don't shrink.
   Wide needs about 520px: the who column (~191px) plus the longest line (31ch = 298px) plus air.
   The role drops to its own line at x 0 (band included), so the lines still hang from its edge; mono 14/22 at a 40px pitch. */
@container az-ceiling (max-width:519.98px){
  .az-ceiling .az-cl-stage{grid-template-columns:minmax(0,1fr);--az-pitch:40px}   /* a container can't restyle itself: the pitch is set on the stage */
  .az-ceiling .az-cl-who,.az-ceiling .az-cl-r{font-size:16px;line-height:24px}
  .az-ceiling .az-cl-sep{display:none}
  .az-ceiling .az-cl-r{grid-area:2/1;margin-top:4px}
  .az-ceiling .az-cl-rt{padding-left:6px}          /* the band starts flush with the hairlines at x 0 instead of hanging into the gutter */
  .az-ceiling .az-cl-band{left:0}
  .az-ceiling .az-cl-rule.is-top{grid-row:3}
  .az-ceiling .az-cl-rule.is-bot{grid-row:5;margin-top:14px}
  .az-ceiling .az-cl-lines{grid-area:4/1;margin-top:14px}
  .az-ceiling .az-cl-lines li{font-size:14px;line-height:22px}
  .az-ceiling .az-cl-cur{grid-area:4/1;height:16px;margin-top:calc(14px + (var(--az-pitch) - 16px) / 2);font-size:14px}
}
/* <= 1100 (486px column beside a 470px body): the compact composition, by the container rule above */
@media (max-width:760px){
  .az-ceiling .az-cl-cap{margin-top:16px}
}

@media (prefers-reduced-motion:reduce){
  .az-ceiling *{transition:none!important;animation:none!important}   /* asset.js also never starts: the markup is the final frame */
}
@media (forced-colors:active){
  .az-ceiling .az-cl-rule{forced-color-adjust:none;background:CanvasText}
  .az-ceiling .az-cl-band{forced-color-adjust:none;background:Mark}
  .az-ceiling .az-cl-rt{forced-color-adjust:none;color:MarkText}
  .az-ceiling .az-cl-cur{display:none}
}
@media print{
  .az-ceiling .az-cl-rule,.az-ceiling .az-cl-band{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}