/* Structure only. Layout, spacing and state cues for the portal; colour, type
   and character belong to each build, which overrides the variables below and
   adds its own rules. Nothing here should make two builds look alike. */

:root {
  --pc-bg: #fff;
  --pc-ink: #1a1a1a;
  --pc-muted: #5b5b5b;
  --pc-line: #d4d4d4;
  --pc-accent: #1a4d8f;
  --pc-accent-ink: #fff;
  --pc-ok: #1c6b3a;
  --pc-bad: #a12a2a;
  --pc-warn: #8a5a00;
  --pc-font: system-ui, sans-serif;
  --pc-mono: ui-monospace, monospace;
  --pc-radius: 2px;
  --pc-gap: 1rem;
  --pc-measure: 72rem;
}

.pc-app { background: var(--pc-bg); color: var(--pc-ink); font-family: var(--pc-font); line-height: 1.5; min-height: 100vh; }
.pc-app * { box-sizing: border-box; }
.pc-app a { color: var(--pc-accent); }
.pc-app h1, .pc-app h2 { line-height: 1.2; }

.pc-sample { padding: .5rem var(--pc-gap); font-size: .875rem; border-bottom: 1px solid var(--pc-line); color: var(--pc-muted); }

.pc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pc-gap); padding: var(--pc-gap); border-bottom: 1px solid var(--pc-line); }
.pc-brand { font-weight: 700; text-decoration: none; margin-right: auto; }
.pc-nav { display: flex; gap: var(--pc-gap); }
.pc-nav a { text-decoration: none; padding-bottom: .125rem; }
.pc-nav a[aria-current="page"] { border-bottom: 2px solid var(--pc-accent); }
.pc-who { display: flex; gap: .75rem; align-items: center; font-size: .875rem; color: var(--pc-muted); }

.pc-main { max-width: var(--pc-measure); margin: 0 auto; padding: calc(var(--pc-gap) * 1.5) var(--pc-gap) calc(var(--pc-gap) * 3); }
.pc-lead { color: var(--pc-muted); max-width: 60ch; }

.pc-button { font: inherit; cursor: pointer; padding: .5rem 1rem; border: 1px solid var(--pc-accent); background: var(--pc-accent); color: var(--pc-accent-ink); border-radius: var(--pc-radius); }
.pc-button:hover { filter: brightness(1.1); }
.pc-button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.pc-link { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: var(--pc-accent); text-decoration: underline; }
.pc-app :focus-visible { outline: 3px solid var(--pc-accent); outline-offset: 2px; }

.pc-roles { list-style: none; padding: 0; display: grid; gap: var(--pc-gap); max-width: 32rem; }
.pc-roles li { display: grid; gap: .25rem; }
.pc-roles span { color: var(--pc-muted); font-size: .875rem; }

.pc-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pc-gap); margin: var(--pc-gap) 0 calc(var(--pc-gap) * 2); }
@media (max-width: 52rem) { .pc-lanes { grid-template-columns: 1fr; } }
.pc-lane { border-top: 3px solid var(--pc-line); padding-top: .5rem; }
.pc-lane ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.pc-doc { display: grid; gap: .125rem; padding: .75rem; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); }
.pc-doc-critical { border-color: var(--pc-accent); border-left-width: 4px; }
.pc-critical { margin: 0; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-accent); }
.pc-doc small { color: var(--pc-warn); }
.pc-empty { color: var(--pc-muted); }

.pc-state { font-size: .8125rem; font-weight: 600; }
.pc-state-draft { color: var(--pc-muted); }
.pc-state-shared { color: var(--pc-warn); }
.pc-state-confirmed, .pc-state-released { color: var(--pc-ok); }

.pc-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pc-table th, .pc-table td { text-align: left; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--pc-line); vertical-align: top; }
.pc-table [data-outcome="denied"], .pc-table [data-outcome="refused"] { color: var(--pc-bad); }

.pc-body { white-space: pre-wrap; padding: var(--pc-gap); border: 1px solid var(--pc-line); border-radius: var(--pc-radius); max-width: 60ch; }
.pc-hash, .pc-table code { font-family: var(--pc-mono); }
.pc-hash { font-size: 1.125rem; }
.pc-app section { margin-top: calc(var(--pc-gap) * 2); }
.pc-buttons { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.pc-text, .pc-input { display: block; width: 100%; max-width: 60ch; font: inherit; padding: .5rem; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); margin: .5rem 0; background: transparent; color: inherit; }
.pc-message { min-height: 1.5em; }
.pc-ok { color: var(--pc-ok); }
.pc-bad { color: var(--pc-bad); }
.pc-verdict { font-weight: 600; }

/* The intake form. Structure only: the build styles the controls. */
.pc-intake { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pc-gap); }
@media (max-width: 40rem) { .pc-intake { grid-template-columns: 1fr; } }
.pc-field { display: grid; gap: .375rem; align-content: start; }
.pc-wide { grid-column: 1 / -1; }
.pc-control { width: 100%; font: inherit; color: inherit; }
.pc-intake-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--pc-gap); align-items: center; }
.pc-intake-foot p { margin: 0; }
.pc-intake-foot [data-state="ok"] { color: var(--pc-ok); }
.pc-intake-foot [data-state="bad"] { color: var(--pc-bad); }