/* ==========================================================================
   WeldingEdu.com — stylesheet

   Two deliberate choices:

   1. DARK, COMMITTED. Not theme-aware. Every device shows the same thing,
      which matters for a tool used on a shop floor and on a desk within the
      same hour. No flash of the wrong colours, no OS dependency, no JS.

   2. MOBILE FIRST. Base styles target a phone; wider screens are the
      enhancement. Touch targets are at least 44px, tables reflow into cards
      rather than scrolling sideways, and inputs are 16px so iOS does not
      zoom the page when a field is focused.

   Self-contained: no external fonts or assets, so the strict Content-Security
   Policy in bootstrap.php holds with no exceptions.
   ========================================================================== */

:root {
  /* Dark steel ground, arc-teal accent. */
  --ground:      #0d151c;
  --surface:     #16212b;
  --surface-2:   #1e2b37;
  --ink:         #e8eff5;
  --ink-2:       #b6c6d3;
  --muted:       #8496a5;
  --line:        #27353f;
  --line-2:      #384a57;

  --accent:      #52b8d6;
  --accent-ink:  #06131a;
  --accent-soft: #123039;

  --good:        #6fb890;
  --good-soft:   #16301f;
  --bad:         #ea8a6b;
  --bad-soft:    #38211a;
  --warn:        #ddaa48;
  --warn-soft:   #33280f;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.7);

  /* Touch target floor. 44px is the accessibility minimum; 48 is comfortable
     with a glove on. */
  --tap: 48px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Respect notches and rounded corners on phones. */
  --gut-l: max(16px, env(safe-area-inset-left));
  --gut-r: max(16px, env(safe-area-inset-right));
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);   /* prevents a white flash on overscroll */
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;          /* correct height with mobile browser chrome */
  overflow-wrap: break-word;   /* long part numbers must not widen the page */
}

.wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding-left: var(--gut-l);
  padding-right: var(--gut-r);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Kill the grey tap flash; we provide our own :active states. */
a, button, select, input, summary { -webkit-tap-highlight-color: transparent; }

/* ======================================================================
   HEADER — sticky on mobile, so navigation is always a thumb away
   ====================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 58px;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
  font-size: 1.05rem; letter-spacing: -.01em;
  min-height: var(--tap);
  flex: 0 1 auto; min-width: 0;
}
.brand-text { white-space: nowrap; }
.brand-text strong { color: var(--accent); font-weight: 700; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 4px; flex: none;
  background:
    linear-gradient(135deg, var(--accent) 0%, var(--accent) 46%, transparent 46%),
    linear-gradient(315deg, var(--accent) 0%, var(--accent) 46%, transparent 46%),
    var(--surface-2);
}

.head-nav {
  display: flex; align-items: center; gap: 4px;
  font-size: .95rem;
  flex: 0 0 auto;
}
.head-nav a,
.head-nav button {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  color: var(--ink-2); text-decoration: none;
  border-radius: var(--radius);
}
.head-nav a:active { background: var(--surface-2); }
.head-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* `.head-nav a` (0,1,1) otherwise outranks `.btn-primary` (0,1,0) and the
   button text loses contrast against its filled background. */
.head-nav a.btn-primary,
.head-nav a.btn-primary:hover { color: var(--accent-ink); }

/* The signed-in name is the first thing to go when space is tight. */
.head-nav .who { display: none; }

/* Narrow phones: the brand wordmark is nowrap, so it cannot shrink and would
   collide with the navigation. Drop the word and keep the mark — it is still
   the link home, and the page title already says where you are. */
@media (max-width: 479px) {
  .brand-text { display: none; }
  .head-nav a,
  .head-nav button { padding: 0 9px; font-size: .92rem; }
  .head-inner { gap: 6px; }
}

/* ======================================================================
   MAIN
   ====================================================================== */

main { flex: 1 0 auto; padding: 24px 0 56px; }

h1 {
  font-size: clamp(1.55rem, 6vw, 2.3rem);
  line-height: 1.14; letter-spacing: -.02em;
  margin: 0 0 10px; text-wrap: balance;
}
h2 { font-size: 1.1rem; letter-spacing: -.01em; margin: 0 0 10px; }

.eyebrow {
  margin: 0 0 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.lede { font-size: 1.02rem; color: var(--ink-2); margin: 0; max-width: 58ch; }
.sub { color: var(--muted); margin: 0 0 20px; }

.hero { padding: 8px 0 26px; }
.hero.compact { padding: 4px 0 20px; }

/* ======================================================================
   CARDS — the primary navigation on a phone, so they are big and tappable
   ====================================================================== */

.cards {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
  margin-bottom: 26px;
}

.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
  min-height: 96px;
  transition: border-color .15s, transform .12s, background .15s;
}
.card:active { background: var(--surface-2); transform: scale(.995); }
.card h2 { margin-bottom: 6px; }
.card p { color: var(--ink-2); margin: 0 0 14px; font-size: .94rem; }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 12px;
  border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
}
.card-go { margin-top: auto; color: var(--accent); font-weight: 600; font-size: .92rem; }

/* ======================================================================
   PANELS
   ====================================================================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.panel.narrow { max-width: 460px; margin-inline: auto; }
.panel.note { border-left: 3px solid var(--accent); }
.panel.highlight { border-left: 3px solid var(--warn); }

/* ======================================================================
   FORMS — 16px inputs, generous height, no iOS zoom on focus
   ====================================================================== */

.form { display: flex; flex-direction: column; gap: 4px; }

label {
  font-size: .88rem; font-weight: 600; color: var(--ink-2);
  margin-top: 14px;
}
label .opt { font-weight: 400; color: var(--muted); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], select {
  font-family: inherit;
  font-size: 16px;               /* must stay 16px: smaller triggers iOS zoom */
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 0 13px;
  min-height: var(--tap);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
select {
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input:focus, select:focus { border-color: var(--accent); }
input::placeholder { color: var(--muted); }

.help, .fineprint { font-size: .87rem; color: var(--muted); margin: 8px 0 0; }
.fineprint { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

.form-row { display: flex; flex-direction: column; gap: 0; }
.form-row .field { display: flex; flex-direction: column; }
.form-row .field label { margin-top: 14px; margin-bottom: 5px; }
.form-row .field-submit { margin-top: 18px; }

form.inline { display: inline-block; }

/* ======================================================================
   BUTTONS
   ====================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:active { filter: brightness(.92); }
.btn-quiet {
  background: var(--surface-2); color: var(--ink-2); border-color: var(--line-2);
}
.btn-quiet:active { background: var(--line); }
.btn-block { width: 100%; margin-top: 22px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .9rem; }

/* ======================================================================
   ALERTS
   ====================================================================== */

.alert {
  padding: 13px 16px; border-radius: var(--radius);
  margin: 0 0 18px; font-size: .95rem;
  border: 1px solid transparent;
}
.alert-bad  { background: var(--bad-soft);  color: var(--bad);  border-color: var(--bad); }
.alert-good { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.alert-info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ======================================================================
   TABLES — on a phone these become stacked cards.

   Sideways-scrolling tables are miserable one-handed, and inventory lists
   are exactly where that would hurt. Each cell carries a data-label which
   becomes its heading when the table is stacked.
   ====================================================================== */

.scroller { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }

thead { display: none; }

tbody tr {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
tbody tr:last-child { margin-bottom: 0; }

tbody td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 5px 0;
  border: none;
  color: var(--ink);
  text-align: right;
}
tbody td::before {
  content: attr(data-label);
  flex: 0 0 auto;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  text-align: left;
}
tbody td:empty { display: none; }
/* A cell holding only a control gets the full width. */
tbody td.cell-action { justify-content: flex-end; padding-top: 10px; }
tbody td.cell-action::before { content: none; }

td.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; }

.count {
  display: inline-block; margin-left: 6px;
  background: var(--surface-2); color: var(--muted);
  border-radius: 20px; padding: 1px 9px;
  font-size: .78rem; font-weight: 600; vertical-align: middle;
}

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
}
.pill-good { background: var(--good-soft); color: var(--good); }
.pill-off  { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-2); }

/* ======================================================================
   TOKEN BOX — long links must wrap on a phone, not scroll
   ====================================================================== */

.tokenbox {
  background: var(--ground);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.tokenbox code {
  font-family: var(--mono); font-size: .82rem;
  color: var(--ink);
  word-break: break-all;
}

/* ======================================================================
   FOOTER
   ====================================================================== */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
  flex: none;
}
.site-foot p { margin: 0; font-size: .85rem; color: var(--muted); }

/* ======================================================================
   WIDER SCREENS — progressive enhancement from the phone layout up
   ====================================================================== */

@media (min-width: 560px) {
  :root { --gut-l: max(20px, env(safe-area-inset-left));
          --gut-r: max(20px, env(safe-area-inset-right)); }

  .head-nav { gap: 6px; }
  .head-nav .who {
    display: inline-flex; align-items: center;
    color: var(--muted); font-size: .87rem;
    padding-left: 10px; margin-left: 4px;
    border-left: 1px solid var(--line);
  }

  main { padding: 34px 0 68px; }
  .panel { padding: 24px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
  .card { padding: 22px; }
}

@media (min-width: 720px) {
  /* Enough width for real tables, so restore them. */
  table { min-width: 520px; }
  thead { display: table-header-group; }
  tbody { display: table-row-group; }

  tbody tr {
    display: table-row;
    background: none; border: none; border-radius: 0;
    padding: 0; margin: 0;
  }
  th {
    display: table-cell;
    text-align: left; font-size: .74rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
    padding: 10px 12px; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  tbody td {
    display: table-cell;
    padding: 12px; border-bottom: 1px solid var(--line);
    color: var(--ink-2); text-align: left;
    vertical-align: middle;
  }
  tbody td::before { content: none; }
  tbody td.cell-action { text-align: right; padding-top: 12px; }
  tbody tr:last-child td { border-bottom: none; }
  td.num { white-space: nowrap; }

  .form-row {
    flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  }
  .form-row .field { flex: 1 1 190px; }
  .form-row .field label { margin-top: 0; }
  .form-row .narrow-field { flex: 0 1 158px; }
  .form-row .field-submit { flex: 0 0 auto; margin-top: 0; }
}

@media (min-width: 900px) {
  main { padding: 40px 0 76px; }
  .card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .head-nav a:hover { color: var(--accent); }
}

/* ======================================================================
   Preferences
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Someone has explicitly asked for a light interface. Honour it minimally
   rather than shipping a whole second palette that would need maintaining.
   The design remains dark-first by intent. */
@media print {
  body { background: #fff; color: #000; }
  .site-head, .site-foot, .head-nav { display: none; }
  .panel, .card { border: 1px solid #999; box-shadow: none; }
}