/* Partner cabinet: tokens, type, controls, the field anatomy.
   Spec: docs/superpowers/specs/2026-09-29-partner-cabinet-design.md */
:root {
    --pc-ink: #111214;
    --pc-text: rgba(17, 18, 20, .72);
    --pc-muted: rgba(17, 18, 20, .5);
    --pc-faint: rgba(17, 18, 20, .42);
    --pc-paper: #FAF7F2;
    --pc-surface: #fff;
    --pc-info: #F3EEE5;
    --pc-line: #e2ddd4;
    --pc-line-strong: #cfc7b8;
    --pc-cta: #FF6A00;
    --pc-cta-hover: #e55e00;
    --pc-cta-text: #B84A00;
    --pc-urgent: #9b2c1f;
    --pc-needed: #B84A00;
    --pc-waiting: rgba(17, 18, 20, .5);
    --pc-done: #1f5d3a;
    --pc-radius: 4px;
    --pc-gap: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.pc { margin: 0; background: var(--pc-paper); color: var(--pc-text); font: 400 14px/1.5 'Roboto', sans-serif; }
.pc h1, .pc h2, .pc h3, .pc p { margin: 0; }
.pc h1, .pc h2, .pc h3 { color: var(--pc-ink); }
.pc a { color: var(--pc-ink); }
.pc img { max-width: 100%; }
.pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-skip { position: absolute; left: -9999px; }
.pc-skip:focus { left: 16px; top: 16px; z-index: 50; padding: 8px 12px; background: #fff; }

.pc-icon { flex: 0 0 auto; }

/* Type */
.pc-h1 { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.pc-lede { margin-top: 6px; max-width: 68ch; color: var(--pc-muted); }

/* Buttons: ghost by default; primary only where it is the action. */
.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 16px;
    font: 700 13px/1 'Roboto', sans-serif; letter-spacing: .04em; text-transform: uppercase;
    color: var(--pc-ink); background: transparent;
    border: 1px solid var(--pc-line-strong); border-radius: var(--pc-radius);
    cursor: pointer; text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pc-btn:hover { background: var(--pc-ink); border-color: var(--pc-ink); color: #fff; }
.pc-btn--primary, .pc-btn.is-dirty { background: var(--pc-cta); border-color: var(--pc-cta); color: #fff; }
.pc-btn--primary:hover, .pc-btn.is-dirty:hover { background: var(--pc-cta-hover); border-color: var(--pc-cta-hover); }
.pc-btn--quiet { border-color: transparent; text-transform: none; letter-spacing: 0; font-weight: 500; padding: 8px; }
.pc-btn--quiet:hover { background: rgba(17, 18, 20, .06); color: var(--pc-ink); border-color: transparent; }
.pc-btn:disabled, .pc-btn[aria-busy="true"] { opacity: .5; cursor: progress; }
.pc-btn:focus-visible, .pc-input:focus-visible, .pc a:focus-visible, .pc summary:focus-visible { outline: 2px solid var(--pc-cta); outline-offset: 2px; }

/* Inputs */
.pc-input {
    width: 100%; min-height: 40px; padding: 8px 12px;
    font: 400 14px/1.4 'Roboto', sans-serif; color: var(--pc-ink);
    background: #fff; border: 1px solid var(--pc-line-strong); border-radius: var(--pc-radius);
}
.pc-input--small { min-height: 32px; padding: 4px 8px; width: auto; }
textarea.pc-input { min-height: 120px; resize: vertical; }
.pc-input:disabled { background: var(--pc-paper); color: var(--pc-muted); }
.pc-inline { display: flex; gap: 8px; }
.pc-inline .pc-input { flex: 1 1 auto; }

/* Block: one white surface per topic */
.pc-block { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 16px; scroll-margin-top: 72px; }
.pc-block + .pc-block { margin-top: var(--pc-gap); }
.pc-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pc-block__title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.pc-block__count { margin-left: 6px; color: var(--pc-muted); font-weight: 500; }

/* Field anatomy: label + status, info box, control, answer line */
.pc-field { padding: 12px 0; scroll-margin-top: 72px; border-radius: var(--pc-radius); transition: box-shadow .18s ease; }
.pc-field + .pc-field { border-top: 1px solid var(--pc-line); }
.pc-field__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pc-field__label { font-size: 13px; font-weight: 700; color: var(--pc-ink); }
.pc-field__hint { margin-top: 6px; font-size: 12px; color: var(--pc-muted); }
.pc-field__hint:empty { display: none; }
.pc-field__hint.is-error { color: var(--pc-urgent); }
.pc-field__hint.is-ok { color: var(--pc-done); }
.pc-field.is-target { box-shadow: 0 0 0 2px var(--pc-cta); }

.pc-info {
    display: flex; gap: 8px; margin: 0 0 12px; padding: 8px 12px;
    background: var(--pc-info); border-left: 2px solid var(--pc-ink); border-radius: 0 var(--pc-radius) var(--pc-radius) 0;
    font-size: 12.5px; line-height: 1.45; color: var(--pc-text);
}
.pc-info__icon { color: var(--pc-ink); margin-top: 1px; }
.pc-info p + p { margin-top: 2px; }
.pc-info__k { font-weight: 700; color: var(--pc-ink); }

/* Status scale: colour + icon + word */
.pc-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pc-status--urgent { color: var(--pc-urgent); }
.pc-status--needed { color: var(--pc-needed); }
.pc-status--waiting { color: var(--pc-waiting); }
.pc-status--done { color: var(--pc-done); }

.pc-chip { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 2px; background: var(--pc-info); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.pc-chip .pc-icon { width: 12px; height: 12px; margin-right: 4px; }
.pc-chip--urgent { color: var(--pc-urgent); }
.pc-chip--needed { color: var(--pc-needed); }
.pc-chip--waiting { color: var(--pc-waiting); }

.pc-empty { color: var(--pc-muted); }

@media (min-width: 600px) {
    .pc-block { padding: 24px; }
}
@media (max-width: 599px) {
    .pc-btn { min-height: 44px; }
    .pc-block .pc-btn:not(.pc-btn--quiet) { width: 100%; }
    .pc-inline { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.pc-tour__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; font-size: 13px; color: var(--pc-muted); }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc-faint); }
.pc-dot.is-on { background: var(--pc-done); }
.pc-sep { color: var(--pc-faint); }
