/* task-112: the app on PCG-UI v1. Every colour here is a library variable (vendor/pcg-ui@1.0.0/dist/tokens.css); light
   and dark come from <html class="pcg-root" data-pcg-theme> (rendered by the server), so no file repeats a colour per theme.
   The app's older names stay as aliases so the screen files keep their layout rules.

   Surface roles (library DESIGN-RULES): canvas = page · panel = top bar and sections · raised = menus, dialogs, the one
   card that stands up (the key verdict) · inset = fields, quiet states. */
.pcg-root{
  /* surfaces */
  --page:var(--pcg-canvas);--well:var(--pcg-inset);--paper:var(--pcg-panel);--raised:var(--pcg-inset);
  /* ink: the library has two; the old third step folds into muted (AA in both themes) */
  --ink:var(--pcg-ink);--ink-2:var(--pcg-muted);--ink-3:var(--pcg-muted);
  --rule:var(--pcg-separator);--rule-2:var(--pcg-border);
  /* roles: PCG red for the one main action; alarms on the library error role */
  --action:var(--pcg-red);--decision:var(--pcg-error);
  --on-accent:var(--pcg-raised); /* text on red or a category fill: the library's white in light */
  --ok:var(--pcg-success);
  --ok-ink:color-mix(in srgb,var(--pcg-success) 55%,var(--pcg-ink));
  --ok-wash:color-mix(in srgb,var(--pcg-success) 12%,var(--pcg-raised));
  --wait:color-mix(in srgb,var(--pcg-category-d) 60%,var(--pcg-ink));
  --wait-wash:color-mix(in srgb,var(--pcg-category-d) 12%,var(--pcg-raised));
  /* geometry: library radii and spacing steps */
  --r1:var(--pcg-radius-control);--r2:var(--pcg-radius-panel);--container:1200px;--paperw:640px;
  --s1:var(--pcg-space-1);--s2:var(--pcg-space-2);--s3:var(--pcg-space-3);--s4:var(--pcg-space-4);
  --s5:var(--pcg-space-6);--s6:var(--pcg-space-8);--s7:var(--pcg-space-12);--s8:64px;
  --inset:clamp(16px,2.4vw,32px);
  /* type: the library faces (Ping body, Aktiv Latin, Sakkal headings only) */
  --ui:var(--pcg-font-body);--display:var(--pcg-font-heading);--latin:var(--pcg-font-latin);
  --ease:cubic-bezier(.16,1,.3,1);
}
.pcg-root[data-pcg-theme="dark"]{--on-accent:var(--pcg-ink)} /* near-white on red in dark too (the library's white, as a role) */

/* Aktiv Grotesk: the library ships Regular only; tabular numbers also use Medium and Bold (app extension of the family). */
@font-face{font-family:"PCG Aktiv";src:url('../fonts/AktivGrotesk-Medium.otf') format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"PCG Aktiv";src:url('../fonts/AktivGrotesk-Bold.otf') format("opentype");font-weight:700;font-display:swap}

html.pcg-root{background:var(--pcg-canvas)}
body{margin:0;min-height:100vh;background:var(--pcg-canvas);color:var(--pcg-ink);font:15px/1.7 var(--pcg-font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* the library sizes h1–h3 for marketing pages (52/40/32); app screens set their own scale */
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0;font-weight:400}
ul,ol{list-style:none}
a:not(.pcg-button){color:inherit}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--pcg-red) 22%,transparent)}
.num,.latin{font-family:var(--latin);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
kbd{font:500 11px/1 var(--latin);border:1px solid var(--pcg-border);border-bottom-width:2px;border-radius:var(--r1);padding:3px 5px;color:var(--pcg-muted);background:var(--pcg-raised)}

/* the staff theme toggle (top bar): library outline button, icon + label; on phones the label is for screen readers only */
.pcg-root .theme-sw.pcg-button{min-height:44px;padding:6px 12px;gap:8px;font-size:13px;white-space:nowrap;align-self:center;flex:none}
.pcg-root .theme-sw .ic{width:18px;height:18px;flex:none}
@media(max-width:720px){.pcg-root .theme-sw .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pcg-root .theme-sw.pcg-button{min-width:44px;padding:0}}

/* the confirm dialog (library dialog-radix look on a native <dialog>; centred in RTL: the library's left:50% +
   translate(-50%) assumes LTR, so the native modal centring is used instead) */
.pcg-root dialog.pcg-dialog{position:fixed;inset:0;margin:auto;transform:none;color:var(--pcg-ink);padding:64px 32px 28px;height:fit-content}
.pcg-root dialog.pcg-dialog::backdrop{background:color-mix(in srgb,var(--pcg-ink) 55%,transparent)}
.pcg-root .pcg-dialog .dlg-t{font:700 24px/1.3 var(--pcg-font-heading);margin:0 0 var(--pcg-space-3)}
.pcg-root .pcg-dialog .dlg-m{color:var(--pcg-ink);font-size:15px;line-height:1.8}
.pcg-root .pcg-dialog .dlg-act{display:flex;flex-wrap:wrap;gap:var(--pcg-space-3);margin-top:var(--pcg-space-6)}
@media(max-width:480px){.pcg-root dialog.pcg-dialog{padding:64px 20px 20px}.pcg-root .pcg-dialog .dlg-act .pcg-button{flex:1 1 100%}}

@media print{.appbar,.theme-sw,.stickybar{display:none!important}body{background:var(--pcg-raised)}}
/* the one ripple (library magic-ripple): the dot is the light text role; the label keeps the button's icon layout */
.pcg-root .magic-ripple .magic-ripple-dot{background:var(--on-accent)}
.pcg-root .magic-ripple .magic-ripple-label{display:inline-flex;align-items:center;gap:8px}

/* screenshots only: a full-page shot draws sticky bars mid-page, so the shooter adds html.shot */
html.shot .stickybar,html.shot .approve-bar,html.shot .sl-bar{position:static}