/* ==========================================================================
   Steel Warehouse Calculator — native iOS design system
   --------------------------------------------------------------------------
   Design intent: read as a real UIKit app, not a web artifact.
   The Claude-artifact look we're replacing = translucent frosted cards,
   rounded-2xl on everything, purple gradients, oversized soft shadows.
   Native iOS is the opposite: FLAT OPAQUE surfaces, HAIRLINE separators,
   grouped-inset lists, and blur used ONLY on the nav/tab bars (where iOS
   genuinely uses it) — never on content.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* Steel Warehouse brand — from the Aug 2023 v8 brand guide.
     Standard red is PMS 185C. The guide forbids recoloring the mark. */
  --sw-red: #ed1c24;
  --sw-red-pressed: #c8161d;
  --sw-black: #0b0000;   /* rich black */

  /* iOS system colors (light) */
  --bg: #ffffff;
  --bg-grouped: #f2f2f7;
  --bg-elevated: #ffffff;
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.60);
  --label-3: rgba(60, 60, 67, 0.30);
  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: #c6c6c8;
  --fill-quaternary: rgba(116, 116, 128, 0.08);
  --tint: var(--sw-red);

  /* iOS metrics */
  --navbar-h: 44px;
  --tabbar-h: 49px;
  --radius-card: 10px;   /* iOS grouped list radius — NOT rounded-2xl */
  --hairline: 0.5px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          system-ui, "Segoe UI", Roboto, sans-serif;
  --font-num: ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-grouped: #000000;
    --bg-elevated: #1c1c1e;
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.60);
    --label-3: rgba(235, 235, 245, 0.30);
    --separator: rgba(84, 84, 88, 0.65);
    --separator-opaque: #38383a;
    --fill-quaternary: rgba(118, 118, 128, 0.24);
  }
}

/* ---------- reset / app chrome ---------- */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  /* Hard guard: nothing may push the page wider than the device. A single
     overflowing child otherwise shifts the ENTIRE layout horizontally. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 17px;              /* iOS body */
  line-height: 1.29412;
  letter-spacing: -0.022em;     /* SF optical tracking */
  color: var(--label);
  background: var(--bg-grouped);

  /* Native feel: no tap flash, no rubber-band chaining, no text selection
     on chrome, no callout menus on long-press. */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

/* Text input must stay selectable even though chrome isn't. */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- nav bar (iOS large-title) ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--hairline) solid var(--separator);
}

.navbar__inner {
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.navbar__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0;
}

.navbar__large {
  padding: 0 16px 8px;
}

.navbar__large h1 {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.011em;
  margin: 0;
}

.navbar__logo {
  display: block;
  height: 26px;
  width: auto;
}

/* ---------- content ---------- */
.screen {
  padding: 16px 0 24px;
  display: none;
}
.screen.is-active { display: block; }

/* iOS grouped-inset list — the canonical native container.
   Flat, opaque, hairline-separated. No shadow, no translucency. */
.group {
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  margin: 0 16px 24px;
  overflow: hidden;
}

.group__header {
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--label-2);
  margin: 0 32px 7px;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;             /* Apple HIG minimum tap target */
  padding: 11px 16px;
  position: relative;
}

/* Hairline inset separator, iOS-style: starts at the label, not the edge. */
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: var(--hairline);
  background: var(--separator);
}

.row__label {
  flex: 1 1 auto;
  min-width: 0;                 /* allow shrink; without this, flex items
                                   refuse to go below content width and the
                                   row overflows the viewport */
}
.row__value {
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* ---------- controls ---------- */
.field {
  flex: 1 1 auto;
  min-width: 0;                 /* same reason as .row__label */
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--label);
  text-align: right;
  padding: 0;
  min-height: 28px;
}
.field:focus { outline: none; }
.field::placeholder { color: var(--label-3); }

.btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  background: var(--tint);
  color: #fff;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  cursor: pointer;
  transition: transform 0.08s ease, background-color 0.15s ease, opacity 0.15s;
}
/* Native press: a subtle scale/dim, not a hover state (touch has no hover). */
.btn:active {
  background: var(--sw-red-pressed);
  transform: scale(0.975);
}

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: var(--hairline) solid var(--separator);
}

.tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--label-2);
  font-family: var(--font);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.006em;
  -webkit-tap-highlight-color: transparent;
}

.tab svg {
  width: 26px;
  height: 26px;
  display: block;
}

.tab.is-active { color: var(--tint); }
.tab:active { opacity: 0.55; }

/* ---------- misc ---------- */
.note {
  margin: 0 32px 24px;
  font-size: 13px;
  line-height: 18px;
  color: var(--label-2);
}

.hero {
  text-align: center;
  padding: 32px 24px 8px;
}
.hero img {
  width: 168px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

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