/* ============================================
   Uniform Outlet HQ — styles
   Base: web-brand tokens (app-build/web-brand/templates/tokens.css).
   Per-client values below come from clients/uniform-outlet/brand-kit.md —
   never Stein defaults, never invented.
   ============================================ */

:root {
  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radius scale — --radius from brand-kit corner style */
  /* Their storefront buttons are hard-edged uppercase bold — --radius-btn
     keeps that exactly. Cards get 4px so an all-day internal tool does not
     read like a checkout page. See brand-kit.md "Shape & feel". */
  --radius-btn: 0px;
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);

  /* Readable-width caps (MANDATORY — do not remove) */
  --readable-text: 720px;
  --readable-ui: 900px;

  /* Gutters */
  --gutter-mobile: 12px; --gutter-tablet: 24px; --gutter-desktop: 32px;

  /* Brand — from brand-kit.md. Admin Settings > Branding overrides at runtime. */
  --primary: #013b85;
  --primary-dark: #012a60;
  --accent: #333333;
  --bg: #f6f6f6;
  --surface: #FFFFFF;
  --text: #333333;
  --text-muted: #787878;
  --success: #27AE60;
  --error: #C0392B;
  --font: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sidebar-w: 240px;
  --topbar-h: 60px;
  /* Shell content cap. Wider than --readable-ui because a dashboard holds data
     tables, not prose — the sidebar already eats 240px. Prose inside stays
     capped at --readable-text via .page-intro and .card-text (see below), so
     the readable-width rule is honored where it actually matters: line length. */
  --shell-max: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--primary); }

.readable { max-width: var(--readable-text); margin: 0 auto; padding: 0 var(--gutter-desktop); width: 100%; }
.readable-wide { max-width: var(--readable-ui); margin: 0 auto; padding: 0 var(--gutter-desktop); width: 100%; }
@media (max-width: 900px) { .readable, .readable-wide { padding: 0 var(--gutter-tablet); } }
@media (max-width: 600px) { .readable, .readable-wide { padding: 0 var(--gutter-mobile); } }

button, a.btn, [role="button"] { min-height: 44px; min-width: 44px; }

/* ---------- Header ---------- */
.topbar {
  height: var(--topbar-h);
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-md);
}
.topbar-logo {
  height: 34px; width: auto; border-radius: var(--radius-sm);
  /* The Uniform Outlet mark is royal blue, the same blue as this header, so it
     reads as a smudge until it is knocked out to white. */
  filter: brightness(0) invert(1);
}
.topbar-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-who { font-size: 13px; opacity: 0.85; white-space: nowrap; }
@media (max-width: 600px) { .topbar-who { display: none; } }
.hamburger { display: none; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
.btn-ghost { background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; border-radius: var(--radius-sm); padding: 6px 14px; font-family: var(--font); font-size: 13px; cursor: pointer; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ---------- Layout ---------- */
.layout { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid rgba(0,0,0,0.07);
  padding: var(--sp-5) 0;
  display: flex; flex-direction: column;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  flex-shrink: 0;
}
.nav-list { list-style: none; flex: 1; }
.nav-list a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  color: var(--text); text-decoration: none; font-size: 14.5px;
  border-left: 3px solid transparent;
}
.nav-list a:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.nav-list a.active {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  font-weight: 600; color: var(--primary);
}

.sidebar-contact {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: var(--sp-4) var(--sp-5) 0;
}
.contact-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: var(--sp-2); }
.contact-link {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13.5px; color: var(--primary); text-decoration: none;
  padding: var(--sp-2) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font); text-align: left; width: 100%;
}
.contact-link:hover { color: var(--accent); }

.sidebar-scrim { display: none; }

/* ---------- Content ---------- */
.content { padding: var(--sp-6) var(--gutter-desktop); flex: 1; max-width: var(--shell-max); margin: 0 auto; width: 100%; }
/* Text-only cards keep prose at a readable line length. Data cards (tables,
   scoreboards, forms) use the full width. */
.card-text { max-width: var(--readable-text); }
.page { display: none; }
.page.active { display: block; }
.page h1 { font-size: 26px; margin-bottom: var(--sp-2); }
.page-intro { color: var(--text-muted); margin-bottom: var(--sp-5); max-width: var(--readable-text); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.card h2 { font-size: 18px; margin-bottom: var(--sp-3); }

.btn-primary {
  background: var(--primary); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 12px 22px;
  font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer;
  width: 100%;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Team page (staff + permissions) ---------- */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-head h2 { margin: 0; }

.invite-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.invite-form input, .invite-form select {
  flex: 1 1 160px; min-width: 0; padding: 10px 12px; font-family: var(--font); font-size: 14px;
  border: 1px solid rgba(0,0,0,0.15); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.btn-inline { width: auto; flex: 0 0 auto; padding: 10px 18px; font-size: 14px; }
.invite-result:not(:empty) { margin-top: var(--sp-3); }
.invite-ok { background: color-mix(in srgb, var(--success) 8%, transparent); border-radius: var(--radius-sm); padding: var(--sp-3); }
.invite-ok p { margin: 0 0 var(--sp-2); font-size: 14px; }
.invite-link { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.invite-link code {
  flex: 1 1 240px; background: var(--surface); border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12.5px; word-break: break-all;
}
.invite-err { color: var(--error); font-size: 13.5px; margin-top: var(--sp-2); }
.fine { font-size: 12.5px; color: var(--text-muted); margin-top: var(--sp-3); line-height: 1.5; }
.login-help { text-align: center; }

.team-row { border-top: 1px solid rgba(0,0,0,0.08); padding: var(--sp-4) 0; }
.team-row:first-child { border-top: 0; padding-top: 0; }
.team-row.is-off { opacity: 0.55; }
.team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.team-name { font-weight: 700; font-size: 15px; }
.team-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.team-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.role-select, .perm-select {
  padding: 8px 10px; font-family: var(--font); font-size: 13px; color: var(--text);
  border: 1px solid rgba(0,0,0,0.15); border-radius: var(--radius-sm); background: var(--surface);
}
.perm-select.is-override { border-color: var(--accent); border-width: 2px; font-weight: 600; }
.tag-off {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
  background: rgba(0,0,0,0.08); color: var(--text-muted); padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}
.btn-danger {
  background: none; border: 1px solid var(--error); color: var(--error);
  border-radius: var(--radius-sm); padding: 8px 14px; font-family: var(--font); font-size: 13px; cursor: pointer;
}
.btn-danger:hover { background: color-mix(in srgb, var(--error) 10%, transparent); }
.btn-link {
  background: none; border: 0; color: var(--primary); text-decoration: underline;
  font-family: var(--font); font-size: 13px; cursor: pointer; padding: 0; min-height: 0; min-width: 0;
}
.invite-pending {
  margin-top: var(--sp-2); font-size: 13px; color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: var(--radius-sm); padding: 8px 11px;
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
}
.team-perms { margin-top: var(--sp-3); }
.team-perms summary { cursor: pointer; font-size: 13px; color: var(--primary); font-weight: 600; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.perm { display: flex; flex-direction: column; gap: 4px; }
.perm-name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.view-only-note {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13.5px; margin-bottom: var(--sp-4);
}
@media (max-width: 600px) {
  .invite-form input, .invite-form select, .btn-inline { flex: 1 1 100%; }
  .team-head { flex-direction: column; }
}

/* ---------- Footer ---------- */
.footer { padding: var(--sp-5); text-align: center; font-size: 12.5px; color: var(--text-muted); }
.stealth-link { color: inherit; text-decoration: none; }

/* ---------- Login page ---------- */
.login-body { justify-content: center; align-items: center; padding: var(--sp-4); }
.login-card {
  background: var(--surface); border-radius: var(--radius-lg);
  border-top: 5px solid var(--accent);
  box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%; padding: var(--sp-7) var(--sp-6);
  text-align: center;
}
.login-logo { max-height: 60px; max-width: 220px; margin-bottom: var(--sp-4); }
.login-card h1 { font-size: 22px; margin-bottom: var(--sp-2); }
.login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: var(--sp-5); }
.login-card input {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: var(--font);
  border: 1px solid rgba(0,0,0,0.15); border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.login-err { color: var(--error); font-size: 13px; min-height: 18px; margin-bottom: var(--sp-2); }
.login-foot { position: fixed; bottom: var(--sp-4); left: 0; right: 0; text-align: center; font-size: 12px; color: var(--text-muted); }

/* ---------- Secure key-drop widget ---------- */
.sdw-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9000;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--primary); color: #fff; border: 2px solid var(--accent);
  font-size: 22px; cursor: pointer; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sdw-fab:hover { transform: translateY(-2px); }
.sdw-fab-tip {
  position: fixed; right: 84px; bottom: 33px; z-index: 9000;
  background: var(--primary); color: #fff; font-size: 12.5px;
  padding: 6px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  font-family: var(--font);
}
.sdw-fab:hover + .sdw-fab-tip { opacity: 1; }
.sdw-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: color-mix(in srgb, var(--primary) 45%, transparent);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.sdw-overlay.open { display: flex; }
.sdw-modal {
  background: var(--surface); border-top: 5px solid var(--accent);
  border-radius: var(--radius); max-width: 480px; width: 100%;
  padding: 24px 26px; font-family: var(--font); color: var(--text);
  box-shadow: var(--shadow-lg); position: relative;
}
.sdw-modal h3 { font-size: 19px; margin: 0 0 8px; }
.sdw-modal p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 14px; }
.sdw-close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 20px; color: var(--text-muted); cursor: pointer; line-height: 1; min-height: 0; min-width: 0; }
.sdw-modal input, .sdw-modal textarea {
  width: 100%; box-sizing: border-box; border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm); padding: 11px 13px; font-family: inherit;
  font-size: 14px; margin-bottom: 10px;
}
.sdw-modal textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.sdw-send {
  width: 100%; padding: 12px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--primary); color: #fff; font-family: var(--font);
  font-size: 15px; font-weight: 600;
}
.sdw-send:hover { background: var(--primary-dark); }
.sdw-send:disabled { opacity: 0.6; cursor: wait; }
.sdw-done { display: none; text-align: center; padding: 10px 0 4px; }
.sdw-done.show { display: block; }
.sdw-done .big { font-size: 34px; }
.sdw-done p { color: var(--success); font-size: 14px; margin-top: 8px; }
.sdw-err { display: none; color: var(--error); font-size: 12.5px; margin: -2px 0 10px; line-height: 1.4; }
.sdw-err.show { display: block; }
.sdw-fine { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.45; }

/* Recipient picker. Borders use the same rgba(0,0,0,.15) as .sdw-modal input
   above rather than var(--border), which this stylesheet references further
   down but never actually defines in :root. */
.sdw-label { display: block; font-size: 12.5px; font-weight: 600; margin: 2px 0 5px; }
.sdw-label-hint { font-weight: 400; color: var(--text-muted); }
.sdw-people { border: 1px solid rgba(0,0,0,0.15); border-radius: var(--radius-sm); padding: 4px 2px; margin-bottom: 10px; max-height: 190px; overflow-y: auto; }
.sdw-person { display: flex; align-items: center; gap: 9px; padding: 7px 11px; cursor: pointer; font-size: 13.5px; border-radius: var(--radius-sm); }
.sdw-person:hover { background: rgba(0,0,0,.04); }
.sdw-person input { width: auto; margin: 0; flex: none; }
.sdw-person .sdw-pmail { color: var(--text-muted); font-size: 12px; }
.sdw-group { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); padding: 8px 11px 3px; font-family: var(--font-display); }
.sdw-other { padding: 4px 11px 9px; display: none; }
.sdw-other.show { display: block; }
.sdw-other input { margin-bottom: 7px; }
.sdw-loading { padding: 12px; font-size: 13px; color: var(--text-muted); }
/* Shown only when the email did NOT go out — the sender passes the link on. */
.sdw-handover { background: #fff7e6; border: 1px solid rgba(180,140,40,.45); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; color: #6b5310; margin-top: 10px; text-align: left; line-height: 1.5; }
.sdw-handover code { display: block; word-break: break-all; margin-top: 5px; font-size: 11.5px; }

/* ---------- Responsive: sidebar → hamburger drawer ---------- */
@media (max-width: 900px) {
  .hamburger { display: block; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
    transform: translateX(-100%); transition: transform 0.2s ease;
    z-index: 200; box-shadow: var(--shadow-lg); height: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim {
    display: none; position: fixed; inset: var(--topbar-h) 0 0 0;
    background: rgba(0,0,0,0.35); z-index: 150;
  }
  .sidebar-scrim.show { display: block; }
  .content { padding: var(--sp-5) var(--gutter-tablet); }
}
@media (max-width: 600px) {
  .content { padding: var(--sp-4) var(--gutter-mobile); }
  .sdw-fab { right: 14px; bottom: 14px; }
  .topbar-title { font-size: 15px; }
  /* Phone: the logo already spells out The Uniform Outlet and takes most of the
     width, so the full title was cut to "Uniform Outle..." (7 October 2026).
     Show only "HQ" beside the logo here. If page_title is ever changed in
     config, phones still show "HQ". */
  .topbar { gap: var(--sp-2); padding: 0 12px; }
  .topbar-logo { height: 26px; }
  .topbar-title { font-size: 0; overflow: visible; }
  .topbar-title::after { content: "HQ"; font-size: 17px; }
  .topbar-logout { padding: 6px 10px; white-space: nowrap; }
}

/* ---- Rollout: the lettered builds ------------------------------------ */
.build { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.build:first-of-type { border-top: 0; }
.build-letter {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.build.is-queued .build-letter { background: var(--accent); }
.build.is-backlog .build-letter { background: #b9b3b1; }
.build.is-done .build-letter { background: #e6edf6; color: var(--primary); }
.build-body { min-width: 0; }
.build-body h3 { margin: 4px 0 2px; font-size: 16px; }
.build-body p { margin: 0 0 4px; }
.build-meta { font-size: 13px; color: var(--text-muted); }
.build-meta strong { color: var(--text); font-weight: 600; }
.lane {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px;
}
.lane-primary { background: var(--primary); color: #fff; }
.lane-next { background: var(--accent); color: #fff; }
.lane-then { background: #efe7e5; color: var(--text-muted); }
.lane-done { background: #e6edf6; color: var(--primary); }
.sprint { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.sprint:first-of-type { border-top: 0; }
.sprint-when { flex: 0 0 92px; font-weight: 700; color: var(--primary); white-space: nowrap; }
@media (max-width: 600px) { .build-letter { flex-basis: 28px; height: 28px; font-size: 13px; } }


/* ---------- The Uniform Outlet brand layer ----------
   Added on top of the shared shell. Two things carry their identity:
   Jost for anything that acts as a heading, and hard-edged uppercase
   bold buttons, which is the single most recognizable thing about
   theuniformoutlet.com. Source: clients/uniform-outlet/brand-kit.md
   -------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }

.btn-primary,
.btn-inline,
button[type="submit"] {
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.btn-ghost {
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

/* ---- Owner tools on the Team page (ported from the scaffold, 7 October 2026) ---- */
[hidden] { display: none !important; }
.contacts-group { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.contacts-group input { padding: 6px 10px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: var(--radius-sm); font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.contacts-intro { margin: 0 0 var(--sp-4); }

/* ---- Welcome page (from the scaffold, 7 October 2026) ---- */
.welcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); align-items: start; }
.welcome-grid .card { margin-bottom: 0; }
.welcome-list { padding-left: 1.1em; margin-bottom: var(--sp-4); }
.welcome-list li { margin-bottom: var(--sp-2); line-height: 1.5; }
.welcome-cta { display: inline-block; text-decoration: none; }