/* Passport Studios: shared tokens. Layout concept: a quiet working surface in ink and paper,
   one blue accent for actions, status carried by small coloured chips. */
:root {
  --bg: #F3F5F4;
  --surface: #FFFFFF;
  --surface-2: #F8FAF9;
  --ink: #15201E;
  --muted: #5B6967;
  --line: #D9E0DE;
  --line-strong: #B9C4C1;
  --accent: #1F5E8C;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3EEF6;
  --good: #2E7A57;  --good-soft: #DDF0E5;
  --warn: #9A6410;  --warn-soft: #FBEFD8;
  --info: #5A4BA8;  --info-soft: #ECE9FA;
  --bad: #B23A3A;   --bad-soft: #F8E1E1;
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-body); /* no code font in the UI; numbers line up via tabular-nums */
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1413; --surface: #161E1C; --surface-2: #121918; --ink: #E4EBE9; --muted: #98A6A3;
    --line: #26312F; --line-strong: #3A4744; --accent: #7EB2DA; --accent-ink: #0B1A26; --accent-soft: #17283A;
    --good: #7FCBA4; --good-soft: #17301F; --warn: #E6B567; --warn-soft: #33270F;
    --info: #B2A6F0; --info-soft: #241F3D; --bad: #F09A9A; --bad-soft: #3A1B1B;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px; /* keeps last buttons clear of the hosting badge */
}
[hidden] { display: none !important; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Controls */
.btn {
  font: 600 14px/1 var(--font-body); border-radius: var(--radius); padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .seg button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input, select, textarea {
  font: 14px/1.4 var(--font-body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px; width: 100%; min-width: 0;
}
textarea { min-height: 70px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
label.field { display: grid; gap: 5px; font-size: 13px; font-weight: 600; min-width: 0; }
label.field .hint { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.req::after { content: " *"; color: var(--bad); }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; flex-wrap: wrap; }
.seg button { font: 500 13px/1 var(--font-body); background: var(--surface); color: var(--ink); border: 0; padding: 8px 11px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--font-body); letter-spacing: 0.02em;
  padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.draft { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.chip.collecting, .chip.sent, .chip.opened { color: var(--warn); background: var(--warn-soft); }
.chip.review, .chip.submitted { color: var(--info); background: var(--info-soft); }
.chip.published, .chip.approved { color: var(--good); background: var(--good-soft); }
.chip.rejected, .chip.overdue { color: var(--bad); background: var(--bad-soft); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--bad); color: #fff; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.table-scroll { overflow-x: auto; }