/* Industry design system — the source of truth for Troviq's look.
 * Derived from the Industry pack with the steel accent retuned to royal blue.
 * Everything is a wireframe object: square-cornered, hairline-bordered.
 * Retune here rather than overriding per page.
 */
/* Fonts come from the <link> in every page head, not from here: an @import
 * blocks this stylesheet on a second round trip, and this one asked for a
 * narrower set of weights than the pages themselves do.
 */

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #3851B8;
  --color-accent-2: #3851B8;
  --color-danger: #b3261e;
  /* Amber for the waiting states (submitted, pending). The pills carried three
     different ad-hoc ambers before this existed. */
  --color-warn-100: #fdf3e0;
  --color-warn-700: #8a5e10;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps on one shared lightness scale, so the same step of any role
     carries the same visual weight. The accent base sits at step 500; hover
     and pressed states step down to 600 and 700. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #E8ECF9;
  --color-accent-200: #C3CDEE;
  --color-accent-300: #94A3DE;
  --color-accent-400: #6478CC;
  --color-accent-500: #3851B8;
  --color-accent-600: #2F459C;
  --color-accent-700: #253674;
  --color-accent-800: #1B2854;
  --color-accent-900: #121A36;

  /* Mono scheme: the second accent reads as the first. */
  --color-accent-2-100: #E8ECF9;
  --color-accent-2-200: #C3CDEE;
  --color-accent-2-300: #94A3DE;
  --color-accent-2-400: #6478CC;
  --color-accent-2-500: #3851B8;
  --color-accent-2-600: #2F459C;
  --color-accent-2-700: #253674;
  --color-accent-2-800: #1B2854;
  --color-accent-2-900: #121A36;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* Legacy token names still referenced by page-level CSS. */
  --bg: #f2f2f3;
  --surface: #e9e9ea;
  --panel: #ffffff;
  --ink: #1d1f20;
  --muted: #5d5d60;
  --light: #7a7a7d;
  --line: #d4d4d7;
  --acc: #3851B8;
  --accent: #3851B8;
  --acc-deep: #2F459C;
  --acc-soft: #E8ECF9;
  --sidebar: #1B2854;
  --sans: "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 0px;
  --radius: 0px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px;
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ── Blueprint frame ───────────────────────────────────────────────────── */

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* Overlay treatments clip their overlay; the frame draws its marks outside
   the box, so when both share a wrapper the frame has to win. */
.blueprint.duotone, .blueprint.plate, .blueprint.halftone { overflow: visible; }
.blueprint > .corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-accent);
  mix-blend-mode: color;
}

/* ── Stat / detail grids ───────────────────────────────────────────────── */

/* Grid items default to min-width:auto, so a repeat(n,1fr) track can't shrink
   below its content and pushes the page wider than the viewport. Set --cols
   for the desktop count; the breakpoints below own every narrower size. */
.stat-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(var(--cols, 4), 1fr);
}
@media (max-width: 920px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 359px) { .stat-grid { grid-template-columns: 1fr; } }

/* ── Rules ─────────────────────────────────────────────────────────────── */

.hr {
  height: 1px;
  border: 0;
  margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn, .btn-primary, .btn-acc, .btn-accent, .btn-secondary, .btn-ghost, .btn-soft, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
}
.btn svg, .btn-primary svg, .btn-acc svg, .btn-ghost svg { display: block; }
.btn:disabled, .btn-primary:disabled, .btn-acc:disabled, .btn-soft:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary, .btn-acc, .btn-accent {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.btn-primary:hover, .btn-acc:hover, .btn-accent:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active, .btn-acc:active, .btn-accent:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.btn-secondary, .btn-soft { border-color: var(--color-divider); }
.btn-secondary:hover, .btn-soft:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active, .btn-soft:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-ghost { color: var(--color-accent); border-color: transparent; padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

.btn-danger { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }

/* The secondary for a dark band, where .btn-secondary's ink border disappears. */
.btn-invert { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.btn-invert:hover { background: rgba(255,255,255,0.18); }

/* Two deliberate sizes, not a spectrum: the app chrome is dense, while a
   marketing or auth page gives its one CTA room. Reach for a variant rather
   than restating the button in a page stylesheet. */
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-lg { padding: 13px 22px; font-size: 15px; }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; }
/* The lift under a full-width auth CTA, tinted from the accent rather than a
   fixed rgba so a retune of --color-accent carries through. */
.btn-cta { box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--color-accent) 60%, transparent); }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field > label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
/* Matches .btn-lg, so a CTA and the field above it share a vertical rhythm. */
.input-lg { min-height: 46px; padding: 12px 15px; font-size: 15px; }

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.radio .dot {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: 0; }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* iOS Safari zooms the viewport in when a control it is focusing has text
   under 16px, and does not zoom back out afterwards. The pages set these
   sizes inline, so this has to outrank them. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* ── Tags ──────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 0;
}
.tag-accent, .tag-accent-2 { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ── Status pills ──────────────────────────────────────────────────────── */

/* One pill for every status the product shows, so the same state reads the
   same on the admin table, the mentor queue and the student dashboard.
   Weight 700 because Barlow stops there — 800 renders synthetic on any page
   whose font request omits it. */
.pill {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pill-approved, .pill-active, .pill-ok {
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}
.pill-completed {
  background: color-mix(in srgb, var(--color-accent-500) 14%, transparent);
  color: var(--color-accent-800);
}
.pill-submitted, .pill-pending, .pill-wait {
  background: var(--color-warn-100);
  color: var(--color-warn-700);
}
.pill-rejected {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}
.pill-cancelled, .pill-idle {
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
}

/* ── Inline form error ─────────────────────────────────────────────────── */

/* Was a hand-mixed red (#fef2f2/#fecaca/#b91c1c) inlined on the auth pages,
   which read as a different product to --color-danger everywhere else. */
.form-error {
  padding: 10px 13px;
  border-radius: 0;
  font-size: 13.5px;
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* ── Navigation ────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ── Dialog ────────────────────────────────────────────────────────────── */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ── Inline links ──────────────────────────────────────────────────────── */

.link-accent, .link-inline {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.link-accent:hover, .link-inline:hover { text-decoration: underline; }

.back-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-700);
  text-decoration: none;
  transition: color .15s;
}
.back-link:hover { color: var(--color-text); }

/* ── Utilities ─────────────────────────────────────────────────────────── */

/* Pages disagreed on whether this carried !important, so a shown element
   sometimes stayed hidden and vice versa. It wins everywhere now. */
.hidden { display: none !important; }

/* ── Busy spinner ──────────────────────────────────────────────────────── */

/* Four page stylesheets each declared this at a different speed. */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }