/* Gatún Maritime Group portal skin, over the core's structure. A document is a
   clean slip, a state is an outlined tag, and a critical document carries a
   lake-green edge. Tokens are in skin.css. */

:root {
  --pc-mono: var(--mono);
  --pc-ok: #11603f;
  --pc-warn: var(--amber);
  --pc-bad: #a12a1b;
}

.pc-app { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.pc-app h1 { font: 500 clamp(2rem, 4.4vw, 3rem)/1.1 var(--display); letter-spacing: -.015em; margin: 0 0 .75rem; text-wrap: balance; }
.pc-app h2 { font: 600 1.5rem/1.2 var(--display); margin: 0 0 1rem; }
.pc-app a { text-underline-offset: .2em; }
.pc-app a:hover { color: var(--lake); }

/* Notice and header */
.pc-sample { background: var(--ink); color: var(--chart); 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(--hair); gap: .75rem 2rem; }
.pc-brand { font: 600 1.375rem/1 var(--display); color: var(--ink); text-decoration: none; }
.pc-app .pc-brand:hover { color: var(--lake); }
.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(--lake); color: var(--ink); }
.pc-app .pc-nav a[aria-current="page"] { border-bottom-color: var(--lake); font-weight: 600; }
.pc-who { color: var(--ink-soft); }
.pc-link { color: var(--ink); text-decoration-color: var(--lake); 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(--body); background: var(--lake); color: var(--pc-accent-ink); border: 2px solid var(--lake); padding: .65rem 1.25rem; transition: background .15s, border-color .15s; }
.pc-button:hover { filter: none; background: var(--lake-dark); border-color: var(--lake-dark); }
.pc-button:disabled { opacity: 1; background: var(--chart-deep); color: var(--ink-soft); border-color: var(--hair); }

/* 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(--slip); }
.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: 500 .8125rem var(--mono); text-transform: uppercase; letter-spacing: .2em; margin-bottom: 1rem; }
.pc-doc { background: var(--slip); border: 1px solid var(--hair); gap: .375rem; padding: .875rem 1rem; }
.pc-doc a { font: 600 1.125rem/1.3 var(--display); }
.pc-doc-critical { border-left: 6px solid var(--lake); border-color: var(--ink); border-left-color: var(--lake); }
.pc-critical { font: 500 .75rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lake); }
.pc-doc small { color: var(--pc-warn); font-weight: 600; }
.pc-attention ul { padding-left: 1.25rem; }

/* States are outlined tags */
.pc-state { justify-self: start; display: inline-block; font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .12em; border: 1px solid currentColor; border-radius: 2px; padding: .05rem .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(--hair); padding: .625rem .75rem .625rem 0; }
.pc-table thead th { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .14em; 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 slip with a lake-green margin */
.pc-body { max-width: 40rem; background: var(--slip); border: 1px solid var(--ink); box-shadow: inset 4px 0 0 var(--lake); padding: .75rem 1.25rem .75rem 1.5rem; font: .9375rem/1.75 var(--pc-mono); }
.pc-fp .pc-hash { display: inline-block; font: 500 1.25rem var(--pc-mono); letter-spacing: .06em; color: var(--lake-dark); border: 1px dashed var(--lake); padding: .35rem .75rem; margin-bottom: .75rem; }

/* Forms */
.pc-text, .pc-input { font: 400 1rem var(--body); background: var(--slip); 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; } }