/* Balboa Bunkers portal skin, over the core's structure. Panels on night blue,
   squared tags and mono fingerprints; the two critical papers carry an amber
   edge. Tokens are in skin.css. */

:root {
  --pc-mono: var(--mono);
  --pc-ok: var(--ok);
  --pc-warn: var(--amber);
  --pc-bad: var(--bad);
}

.pc-app { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.pc-app h1 { font: 700 clamp(2.25rem, 4.6vw, 3.25rem)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 .75rem; text-wrap: balance; }
.pc-app h2 { font: 700 1.625rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 1rem; }
.pc-app a { text-underline-offset: .2em; }
.pc-app a:hover { color: var(--amber); }

/* Notice and header */
.pc-sample { background: var(--amber); color: var(--on-amber); border: 0; text-align: center; font-weight: 600; }
.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.5rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.pc-app .pc-brand { color: var(--ink); }
.pc-app .pc-brand:hover { color: var(--amber); }
.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(--amber); color: var(--ink); }
.pc-app .pc-nav a[aria-current="page"] { border-bottom-color: var(--amber); font-weight: 600; }
.pc-who { color: var(--ink-soft); }
.pc-link { color: var(--ink); text-decoration-color: var(--amber); text-decoration-thickness: 2px; }

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

/* Buttons */
.pc-button { font: 700 1rem var(--body); letter-spacing: .02em; background: var(--amber); color: var(--on-amber); border: 2px solid var(--amber); padding: .65rem 1.25rem; transition: background .15s, border-color .15s; }
.pc-button:hover { filter: none; background: var(--amber-dark); border-color: var(--amber-dark); }
.pc-button:disabled { opacity: 1; background: var(--panel-high); color: var(--ink-soft); border-color: var(--line); }

/* Sign-in: a panel 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(--line); border-top: 4px solid var(--amber); background: var(--panel); }
.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: 1px solid var(--line); padding-top: 1rem; }
.pc-lane h2 { font: 500 .8125rem var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); margin-bottom: 1rem; }
.pc-doc { background: var(--panel); border: 1px solid var(--line); gap: .375rem; padding: .875rem 1rem; }
.pc-doc a { font: 600 1.125rem/1.3 var(--body); color: var(--ink); }
.pc-doc-critical { border-left: 6px solid var(--amber); background: var(--panel-high); }
.pc-critical { font: 500 .6875rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.pc-doc small { color: var(--pc-warn); font-weight: 600; }
.pc-attention ul { padding-left: 1.25rem; }

/* States are squared tags */
.pc-state { justify-self: start; display: inline-block; font: 500 .6875rem var(--mono); 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(--amber); }

/* 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: 500 .6875rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); border-bottom: 2px solid var(--ink-soft); padding-bottom: .5rem; }
.pc-table tbody th { font-weight: 600; }
.pc-table code { font-size: .875rem; }

/* A document is a panel with an amber margin */
.pc-body { max-width: 40rem; background: var(--panel); border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--amber); padding: .75rem 1.25rem .75rem 1.5rem; font: .9375rem/1.8 var(--pc-mono); color: var(--ink); }
.pc-fp .pc-hash { display: inline-block; font: 500 1.125rem var(--pc-mono); letter-spacing: .06em; color: var(--amber); background: var(--panel-high); padding: .35rem .75rem; margin-bottom: .75rem; }

/* Forms */
.pc-text, .pc-input { font: 400 1rem var(--body); background: var(--panel); color: var(--ink); border: 1px solid var(--ink-soft); 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; } }