/* Permission hero figure. Every selector is scoped to .permission-hero / ph-*; no global rules. */
@font-face{font-family:'PH DM Sans';src:url('../assets/fonts/dm-sans-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

.permission-hero{
  --ph-ink:#102725;--ph-soft:#445c58;--ph-muted:#5f706c;--ph-teal:#0b7469;--ph-teal-mid:#3f9a8d;
  --ph-teal-pale:#d4eae4;--ph-coral:#e2603b;--ph-region:#e9f1ef;--ph-rule:#c3d0cc;--ph-guide:#8fa5a0;
  position:relative;width:100%;min-width:0;color:var(--ph-ink)
}
.permission-hero .ph-svg{display:block;width:100%;height:auto;overflow:visible}
.permission-hero .ph-svg.ph-compact{max-width:400px;margin-inline:auto}
.permission-hero :where(.ph-svg text){font-family:var(--sans,'PH DM Sans','DM Sans',ui-sans-serif,system-ui,sans-serif);fill:var(--ph-ink)}

/* Type: wide text is >= 14 viewBox px; compact viewBox is 340 wide, so 14px renders >= 12px at 300px. */
.permission-hero .ph-label{font-size:16px;font-weight:600}
.permission-hero .ph-text{font-size:15px}
.permission-hero .ph-key-text{font-size:14px}
.permission-hero .ph-muted{font-size:14px;fill:var(--ph-muted)}
.permission-hero .ph-soft{fill:var(--ph-muted)}
.permission-hero .ph-small{font-size:14px;fill:var(--ph-muted)}
.permission-hero .ph-strong{font-weight:600}
.permission-hero .ph-tab{font-size:14px;font-weight:600;letter-spacing:.02em;fill:#fff}
.permission-hero .ph-value{font-size:24px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.permission-hero .ph-num{font-size:14px;font-weight:600;fill:var(--ph-teal)}
.permission-hero .ph-use{font-size:14px;font-variant-numeric:tabular-nums}
.permission-hero .ph-use-k{fill:var(--ph-muted)}
.permission-hero .ph-use-v{font-weight:600;fill:var(--ph-ink)}
.permission-hero .ph-verdict{font-size:15px;font-weight:600;fill:var(--ph-teal)}
.permission-hero .ph-verdict.is-crossed{fill:var(--ph-coral)}
.permission-hero .ph-compact .ph-label{font-size:15px}
.permission-hero .ph-compact .ph-text,.permission-hero .ph-compact .ph-verdict{font-size:14px}

/* Objects. */
.permission-hero .ph-region{fill:var(--ph-region)}
.permission-hero .ph-tab-bg{fill:var(--ph-teal)}
.permission-hero .ph-outline{fill:#fff;stroke:var(--ph-ink);stroke-width:2.2;stroke-linejoin:round}
.permission-hero .ph-ink-line{fill:none;stroke:var(--ph-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.permission-hero .ph-accent{fill:var(--ph-teal)}
.permission-hero .ph-hand{fill:var(--ph-ink)}
.permission-hero .ph-chest{fill:var(--ph-teal-pale)}
.permission-hero .ph-code{fill:none;stroke:var(--ph-teal);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.permission-hero .ph-rule{fill:none;stroke:var(--ph-rule);stroke-width:2.6;stroke-linecap:round}
.permission-hero .ph-robot *,.permission-hero .ph-file *{vector-effect:non-scaling-stroke}
.permission-hero .ph-device{fill:#fff;stroke:var(--ph-ink);stroke-width:2}
.permission-hero .ph-key-capacity{fill:#fff;stroke:var(--ph-ink);stroke-width:1.8}
.permission-hero .ph-key-permit{fill:var(--ph-teal-pale);stroke:var(--ph-teal);stroke-width:1.8;stroke-dasharray:4 3}
.permission-hero .ph-connector{fill:none;stroke:var(--ph-guide);stroke-width:2.4;stroke-linecap:round}
.permission-hero .ph-arrowhead{fill:var(--ph-guide)}
.permission-hero .ph-receipt{fill:#fff;stroke:var(--ph-ink);stroke-width:2;stroke-linejoin:round}

/* Owner permission: pale tint under the cells, dashed boundary over them. Two copies crossfade. */
.permission-hero .ph-tint{fill:var(--ph-teal-pale);opacity:0}
.permission-hero .ph-bound{fill:none;stroke:var(--ph-teal);stroke-width:2.2;stroke-dasharray:7 5;stroke-linejoin:round;opacity:0}
.permission-hero .ph-tint.is-on,.permission-hero .ph-bound.is-on{opacity:1}

/* Request units. Exceeding units also carry a slash, so state never relies on color alone. */
.permission-hero .ph-cell-box{stroke-width:1.6}
.permission-hero .ph-slash{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:0}
.permission-hero [data-ph-state=permitted] .ph-cell-box{fill:var(--ph-teal-mid);stroke:var(--ph-teal-mid)}
.permission-hero [data-ph-state=exceeds] .ph-cell-box{fill:var(--ph-coral);stroke:var(--ph-coral)}
.permission-hero [data-ph-state=exceeds] .ph-slash{opacity:1}
.permission-hero [data-ph-state=unused] .ph-cell-box{fill:#fff;stroke:#9fb0ab;stroke-dasharray:3 3}

/* Calls: outline badge on a solid path when permitted; filled badge, dashed ring and dashed path when exceeding. */
.permission-hero .ph-rail{fill:none;stroke:var(--ph-teal);stroke-width:2.6;stroke-linecap:round}
.permission-hero .ph-bracket{fill:none;stroke:var(--ph-guide);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.permission-hero .ph-badge{fill:#fff;stroke:var(--ph-teal);stroke-width:2.2}
.permission-hero .ph-ring{fill:none;stroke:var(--ph-coral);stroke-width:1.6;stroke-dasharray:3 3;opacity:0}
.permission-hero [data-ph-crossed=true] .ph-rail{stroke:var(--ph-coral);stroke-dasharray:7 6}
.permission-hero [data-ph-crossed=true] .ph-bracket{stroke:var(--ph-coral)}
.permission-hero [data-ph-crossed=true] .ph-badge{fill:var(--ph-coral);stroke:var(--ph-coral)}
.permission-hero [data-ph-crossed=true] .ph-num{fill:#fff}
.permission-hero [data-ph-crossed=true] .ph-ring{opacity:1}
.permission-hero [data-ph-crossed=true] .ph-use-v{fill:var(--ph-coral)}

/* History marks: teal circle with check, or coral square with a cross. */
.permission-hero .ph-ok circle{fill:var(--ph-teal)}
.permission-hero .ph-x rect{fill:var(--ph-coral)}
.permission-hero .ph-ok path,.permission-hero .ph-x path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.permission-hero .ph-x,.permission-hero [data-ph-audit=crossed] .ph-ok{opacity:0}
.permission-hero [data-ph-audit=crossed] .ph-x{opacity:1}

/* Motion: only tints and the boundary change. Enabled after first paint; off for reduced motion. */
.permission-hero.ph-animate .ph-tint,.permission-hero.ph-animate .ph-bound{transition:opacity .55s ease}
.permission-hero.ph-animate .ph-cell-box,.permission-hero.ph-animate .ph-badge,.permission-hero.ph-animate .ph-rail,
.permission-hero.ph-animate .ph-bracket,.permission-hero.ph-animate .ph-num,.permission-hero.ph-animate .ph-use-v,
.permission-hero.ph-animate .ph-verdict{transition:fill .45s ease,stroke .45s ease}
.permission-hero.ph-animate .ph-slash,.permission-hero.ph-animate .ph-ring,
.permission-hero.ph-animate .ph-ok,.permission-hero.ph-animate .ph-x{transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){
  .permission-hero.ph-animate *{transition:none!important}
}
@media (max-width:360px){
  .permission-hero .ph-compact .ph-text,.permission-hero .ph-compact .ph-verdict,
  .permission-hero .ph-compact .ph-use,.permission-hero .ph-compact .ph-muted,
  .permission-hero .ph-compact .ph-label{font-size:16px}
  .permission-hero .ph-compact .ph-num{font-size:15px}
}