/* Colón Chandlers portal skin, over the core's structure. Flat white
   documents, hairline rules and square tags; the two critical papers carry a
   signal-red edge. Tokens are in skin.css. */

:root {
  --pc-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pc-ok: #11603f;
  --pc-warn: #7a4a00;
  --pc-bad: var(--signal);
}

.pc-app { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.pc-app h1 { font: 700 clamp(1.875rem, 4vw, 2.625rem)/1.1 var(--font); letter-spacing: -.025em; margin: 0 0 .75rem; text-wrap: balance; }
.pc-app h2 { font: 700 1.375rem/1.2 var(--font); letter-spacing: -.01em; margin: 0 0 1rem; }
.pc-app a { text-underline-offset: .2em; }
.pc-app a:hover { color: var(--signal); }

/* Notice and header */
.pc-sample { background: var(--ink); color: var(--paper); border: 0; text-align: center; }
.pc-head { max-width: calc(var(--pc-measure) + 2.5rem); margin: 0 auto; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--line); gap: .75rem 2rem; }
.pc-brand { font: 700 1.375rem/1 var(--font); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.pc-app .pc-brand { color: var(--ink); }
.pc-app .pc-brand:hover { color: var(--signal); }
.pc-app .pc-doc a { color: var(--ink); }
.pc-app .pc-doc a:hover { color: var(--signal); }
.pc-site { font-size: .9375rem; }
.pc-nav { gap: .5rem 1.5rem; }
.pc-nav a { color: var(--ink); border-bottom: 2px solid transparent; }
.pc-nav a:hover { border-bottom-color: var(--signal); color: var(--ink); }
.pc-app .pc-nav a[aria-current="page"] { border-bottom-color: var(--signal); font-weight: 600; }
.pc-who { color: var(--ink-soft); }
.pc-link { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; }

.pc-main { padding: 2.5rem 1.25rem 4rem; }
.pc-lead { font-size: 1.125rem; }
.pc-app section { margin-top: 2.5rem; }
.pc-back { display: inline-block; margin-bottom: 1rem; }

/* Buttons */
.pc-button { font: 600 1rem var(--font); background: var(--signal); color: var(--pc-accent-ink); border: 2px solid var(--signal); padding: .65rem 1.25rem; transition: background .15s, border-color .15s; }
.pc-button:hover { filter: none; background: var(--signal-dark); border-color: var(--signal-dark); }
.pc-button:disabled { opacity: 1; background: var(--paper-deep); color: var(--ink-soft); border-color: var(--line); }

/* Sign-in: a card for each profile */
.pc-login { max-width: 60rem; }
.pc-roles { max-width: none; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }
.pc-roles li { align-content: space-between; gap: .75rem; padding: 1.25rem; border: 1px solid var(--ink); background: var(--white); }
.pc-roles span { color: var(--ink); font-size: 1rem; order: -1; }
.pc-roles .pc-button { justify-self: start; }

/* Radar */
.pc-lanes { gap: 2rem; }
.pc-lane { border-top: 3px solid var(--ink); padding-top: 1rem; }
.pc-lane h2 { font: 600 .75rem var(--font); text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); margin-bottom: 1rem; }
.pc-doc { background: var(--white); border: 1px solid var(--line); gap: .375rem; padding: .875rem 1rem; }
.pc-doc a { font: 600 1.0625rem/1.3 var(--font); }
.pc-doc-critical { border-color: var(--ink); border-left: 6px solid var(--signal); }
.pc-critical { font: 600 .6875rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.pc-doc small { color: var(--pc-warn); font-weight: 600; }
.pc-attention ul { padding-left: 1.25rem; }

/* States are square tags */
.pc-state { justify-self: start; display: inline-block; font: 600 .6875rem var(--font); text-transform: uppercase; letter-spacing: .12em; border: 1px solid currentColor; padding: .1rem .5rem; }
.pc-state-draft { color: var(--ink-soft); }
.pc-state-shared { color: var(--pc-warn); }

/* Tables are the record */
.pc-table { font-size: 1rem; }
.pc-table th, .pc-table td { border-bottom: 1px solid var(--line); padding: .625rem .75rem .625rem 0; }
.pc-table thead th { font: 600 .6875rem var(--font); text-transform: uppercase; letter-spacing: .12em; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
.pc-table tbody th { font-weight: 600; }
.pc-table code { font-size: .875rem; }

/* A document is a flat white sheet */
.pc-body { max-width: 40rem; background: var(--white); border: 1px solid var(--ink); padding: .75rem 1.25rem; font: .9375rem/1.75 var(--pc-mono); }
.pc-fp .pc-hash { display: inline-block; font: 600 1.125rem var(--pc-mono); letter-spacing: .06em; color: var(--ink); background: var(--paper-deep); padding: .35rem .75rem; margin-bottom: .75rem; }

/* Forms */
.pc-text, .pc-input { font: 400 1rem var(--font); background: var(--white); color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: .625rem .75rem; }
.pc-verdict, .pc-message { font-weight: 600; }
.pc-message:empty { display: none; }
.pc-ok { color: var(--pc-ok); }
.pc-bad { color: var(--pc-bad); }
.pc-table [data-outcome="denied"], .pc-table [data-outcome="refused"] { color: var(--pc-bad); font-weight: 600; }

@media (max-width: 52rem) {
  .pc-lanes { gap: 1.5rem; }
  .pc-table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .pc-button { transition: none; } }