/* PolyForm V2 — design tokens + cross-surface base/utilities.
   Loaded FIRST by both base.html (console) and base_public.html (public).
   Split out of the former monolithic pf.css. Contains: :root design tokens,
   the CSS reset/base body, and the genuinely shared utilities used by BOTH
   the console and public surfaces (links, theme toggle, cards/forms, CTAs,
   toast, muted). Surface-specific rules live in console.css / public.css. */

:root {
  /* brand */
  --pf-dark: #0F2030;
  --pf-blue: #004B96;
  --pf-terracotta: #C56630;
  /* surfaces (light) */
  --pf-bg: #FFFFFF;
  --pf-surface: #FAFBFC;
  --pf-border: #E8EEF3;
  --pf-text: #1F2933;
  --pf-muted: #6B7785;
  /* semantic */
  --pf-success: #0F766E;
  --pf-warning: #B45309;
  --pf-alert: #B91C1C;
  /* spacing scale */
  --pf-s-1: 4px;  --pf-s-2: 8px;  --pf-s-3: 12px;
  --pf-s-4: 16px; --pf-s-5: 24px; --pf-s-6: 32px;
  /* radius + tap targets */
  --pf-r-sm: 6px; --pf-r-md: 10px; --pf-r-lg: 14px;
  --pf-tap-min: 44px; --pf-tap-primary: 52px;
  --pf-font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--pf-font);
  background: var(--pf-bg);
  color: var(--pf-text);
  line-height: 1.5;
}

/* shared link + theme toggle (header/nav + sidebar) */
.pf-link, .pf-nav .pf-link {
  background: none; border: 0; color: #cfe0f0; cursor: pointer;
  font: inherit; padding: 0; text-decoration: underline;
}
.pf-theme-toggle { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.1rem; }

.pf-sidebar-tools .pf-theme-toggle,
.pf-sidebar-tools .pf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-s-1);
  color: #D4DEE7;
  font-size: .85rem;
  text-decoration: none;
  min-height: 2.5rem;
  width: 100%;
}
.pf-console-shell:not(.is-sidebar-expanded) .pf-sidebar-tools span {
  display: none;
}

.pf-console-main .pf-link {
  color: var(--pf-blue);
}

/* cards / forms */
.pf-card {
  max-width: 560px; margin: 0 auto;
  background: var(--pf-surface); border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-lg); padding: var(--pf-s-5);
}
.pf-sub { color: var(--pf-muted); margin-top: 0; }
.pf-form { display: grid; gap: var(--pf-s-4); }
.pf-form label { display: grid; gap: var(--pf-s-2); font-weight: 600; font-size: .92rem; }
.pf-form input, .pf-form textarea, .pf-form select {
  font: inherit; padding: var(--pf-s-3);
  border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm);
  background: var(--pf-bg); color: var(--pf-text); min-height: var(--pf-tap-min);
}
.pf-hint { color: var(--pf-muted); font-weight: 400; }
.pf-req { color: var(--pf-terracotta); font-weight: 600; }
.pf-error {
  background: #FEF2F2; color: var(--pf-alert);
  border-left: 4px solid var(--pf-alert); padding: var(--pf-s-3); border-radius: var(--pf-r-sm);
}
.pf-cta {
  background: var(--pf-blue); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; padding: 0 var(--pf-s-5);
  min-height: var(--pf-tap-primary); border-radius: var(--pf-r-md);
}
.pf-cta-sm { min-height: var(--pf-tap-min); display: inline-flex; align-items: center; text-decoration: none; }

/* Button affordances (operator-flow redesign P1): actions look like actions,
   not links. primary = forward/commit · secondary = reverse/quiet · danger. */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pf-s-1);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  min-height: var(--pf-tap-min); padding: 0 var(--pf-s-4);
  border-radius: var(--pf-r-md); border: 1px solid transparent;
}
.pf-btn-primary { background: var(--pf-blue); color: #fff; }
.pf-btn-primary:hover { background: color-mix(in srgb, var(--pf-blue) 88%, #000); }
.pf-btn-secondary { background: transparent; color: var(--pf-text); border-color: var(--pf-border); }
.pf-btn-secondary:hover { border-color: var(--pf-blue); color: var(--pf-blue); }
.pf-btn-danger { background: transparent; color: var(--pf-alert); border-color: color-mix(in srgb, var(--pf-alert) 40%, var(--pf-border)); }
.pf-btn-danger:hover { background: color-mix(in srgb, var(--pf-alert) 8%, transparent); }
.pf-btn-sm { min-height: 2rem; padding: 0 var(--pf-s-3); font-size: .82rem; }

/* One-shot success toast (Nielsen: visibility of system status). Auto-dismissed
   by ui.js; manual dismiss via the × button. */
.pf-toast {
  position: fixed; top: var(--pf-s-4); left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; align-items: center; gap: var(--pf-s-3);
  background: var(--pf-success); color: #fff; font-weight: 600;
  padding: var(--pf-s-3) var(--pf-s-4); border-radius: var(--pf-r-md);
  box-shadow: 0 6px 24px rgba(0,0,0,.18); max-width: 90vw;
  animation: pf-toast-in .18s ease-out;
}
.pf-toast-x { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; opacity: .85; }
.pf-toast-x:hover { opacity: 1; }
.pf-toast-out { opacity: 0; transition: opacity .3s ease; }
@keyframes pf-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pf-confirm h1 { color: var(--pf-success); }
.pf-login { max-width: 360px; }

.pf-muted { color: var(--pf-muted); }