/* ==========================================================================
   app.css - palletfreightclass.com
   Palette (fangan.md section 7.1, WCAG AA on light background):
     primary #1e3a8a (10.5:1) | text #0f172a (15.5:1)
     muted   #475569 (5.8:1)  | accent #b91c1c (7.0:1)
     bg #f8fafc / surface #ffffff
   System font stack only. Zero external resources.
   ========================================================================== */

:root {
  --color-primary: #1e3a8a;
  --color-primary-dark: #172d6b;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-accent: #b91c1c;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #cbd5e1;
  --color-focus: #1e3a8a;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  --wrap: 980px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Screen-reader-only utility (WCAG: visually hidden, programmatically exposed) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: first focusable element, visible on keyboard focus only */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus {
  top: 0;
}

/* Keyboard focus must never be killed: high-contrast focus ring everywhere */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ header */
/* Compact industrial header (skill.md 8.6 revised, Option A): PC locks the
   whole bar to 56px (52-58px window, logo left + nav right, single row).
   Mobile locks a 48px single row (brand left, SVG hamburger right) and the
   menu becomes a smooth-expanding drawer below the bar - no horizontally
   truncated chip rail anywhere. */
.site-header {
  position: relative;
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: var(--shadow);
}
.header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 56px;
  padding-block: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  background: #ffffff;
  color: var(--color-primary);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 800;
}
.primary-nav .nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav a {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  color: #ffffff;
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  white-space: nowrap;
}
.primary-nav a:hover { background: var(--color-primary-dark); }
.primary-nav a[aria-current="page"] {
  background: #ffffff;
  color: var(--color-primary);
  font-weight: 700;
}
/* Hamburger exists only on mobile; PC shows the plain horizontal row. */
.nav-toggle { display: none; }
@media (max-width: 991px) {
  .header-inner {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    height: 48px;
    padding-block: 0;
  }
  .brand { font-size: 1rem; }
  .brand-mark { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    background: transparent;
    color: #ffffff;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
  }
  .nav-toggle:hover { background: var(--color-primary-dark); }
  /* Drawer: collapsed by default, anchored under the 48px bar, smooth
     max-height expand driven by aria-expanded + .nav-open (app.js). */
  .primary-nav .nav-list {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 90;
    margin: 0;
    padding: 0 1.25rem;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: var(--color-primary);
    box-shadow: var(--shadow);
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
  }
  .primary-nav.nav-open .nav-list {
    max-height: 70vh;
    overflow-y: auto;
    visibility: visible;
    padding-block: 0.5rem 0.75rem;
    transition: max-height 0.25s ease;
  }
  .primary-nav a { display: block; padding: 0.6rem 0.75rem; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav .nav-list { transition: none; }
}

/* -------------------------------------------------------------------- main */
/* Same wrap geometry as header/footer so the content column never goes
   full-bleed on wide screens. */
.site-main {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-block: 2rem 3rem;
  padding-inline: 1.25rem;
}

.hero {
  margin-bottom: 1.5rem;
}
.hero h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.hero .lede {
  margin: 0;
  font-size: 1.08rem;
  color: var(--color-muted);
}

/* Golden two-column companion layout (skill.md 8.6 revised, rev.3 10/27):
   the taller RIGHT tool column (h1 + intro + calculator card + result
   board + insight) simply defines the row height; the LEFT 360px sidebar
   stacks the formula card FIRST and the 300x250 ad slot right below it,
   so the sidebar never opens with an ad and a taller calculator can never
   push the ad below the fold.
   360 + 30 gap + 580 (auto) = 970 = exact content column.
   Below 992px the same DOM reflows into the legal vertical order:
   h1 -> intro -> calculator -> result -> ad -> formula card (never ads first). */
.hero-grid { display: flex; flex-direction: column; }
.calculator-column { min-width: 0; }
.sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 992px) {
  .hero-grid {
    display: grid;
    /* PC (webmaster 10/27 rev.3): formula card leads the LEFT column, the
       300x250 ad slot sits right below it - the first item in the sidebar
       is never an ad. The calculator still spans both rows on the right,
       so its height never moves the ad out of view.
       DOM stays calculator-first so the mobile flow never changes. */
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-areas:
      "side calc"
      "ad calc";
    gap: 30px;
    align-items: start;
  }
  /* Sidebar copy one step smaller: h2, formulas and text stay single-line,
     so ad slot + formula card both fit the first screen. */
  .sidebar-column .card p { font-size: 0.92rem; }
  .calculator-column { grid-area: calc; }
  .sidebar-column { grid-area: side; }
  .hero-grid .responsive { grid-area: ad; width: 300px; margin: 0; }
}
@media (max-width: 991px) {
  .hero { margin-bottom: 1.25rem; }
  .hero h1 { font-size: 1.45rem; margin-bottom: 0.4rem; }
  .hero .lede { font-size: 0.95rem; }
  /* Mobile keeps the 300x250 unit: 300px centered, flex-ordered right after
     the result board (order 2) and before the formula card (order 3), even
     though the slot is the last child in the DOM. */
  .hero-grid .responsive { order: 2; width: 300px; margin: 1rem auto; }
  .sidebar-column { order: 3; }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
}
.card h2 {
  margin-top: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.4rem; }

/* ------------------------------------------------------------------- forms */
.field-group { margin-bottom: 0.7rem; }

/* Desktop: L/W/H/Weight pair up two per row (webmaster 10/27). The heading
   and the full-width submit button span both tracks; mobile stays 1 column. */
@media (min-width: 992px) {
  #fc-form,
  #bp-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.9rem;
    row-gap: 0;
  }
  #fc-form h2,
  #bp-form h2,
  #fc-form .btn,
  #bp-form .btn,
  #fc-form .field-span {
    grid-column: 1 / -1;
  }
}
.field-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.field-hint { color: var(--color-muted); font-size: 0.9rem; }
/* Smart optimization insight: a neutral info banner under the result
   (distinct from the red .pitfall warning tone). */
.insight {
  background: #e8edf8;
  border-left: 4px solid var(--color-primary);
  padding: 0.8rem 1rem;
  margin-top: 0.9rem;
  font-size: 0.95rem;
}
.insight a { color: var(--color-primary); font-weight: 700; }
/* Copy-to-BOL: small inline action button (NOT .btn, which is locked
   to full-width block by the audit gate for form submits). */
.btn-copy {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.45rem 0.95rem;
  background: #ffffff;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
}
.btn-copy:hover { background: #e8edf8; }
.btn-copy:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.field-input {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.field-input:hover { border-color: var(--color-muted); }

.btn {
  display: block;
  width: 100%;
  padding: 0.65rem 1.3rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  color: #ffffff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-dark); }
.btn-secondary {
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
}
.btn-secondary:hover { background: #e8edf8; }
.btn-remove {
  color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
}

/* ----------------------------------------------------------------- results */
.result-board {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: #e8edf8;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
}
.result-board:empty { display: none; }
.result-class {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
}
.result-steps {
  margin: 0;
  padding-left: 1.3rem;
  color: var(--color-text);
}
.result-steps li { margin-block: 0.25rem; }
.result-note {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.formula {
  margin: 0.5rem 0;
  padding: 0.55rem 0.75rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  overflow-x: auto;
}

/* ------------------------------------------------------------------ tables */
.table-scroll { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--color-surface);
}
.data-table caption {
  text-align: left;
  font-weight: 700;
  padding-block: 0.6rem;
  color: var(--color-text);
}
.data-table th,
.data-table td {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.data-table thead th { background: #e8edf8; }
.data-table tbody tr:nth-child(even) { background: var(--color-bg); }

/* ------------------------------------------------------------------ pallet */
.pallet-row {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.pallet-row legend {
  font-weight: 700;
  padding-inline: 0.3rem;
}
.pallet-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.pallet-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.pallet-actions .btn { flex: 1; }

/* ------------------------------------------------------------------ alerts */
.pitfall {
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
}
.pitfall strong { color: var(--color-accent); }

/* ----------------------------------------------------------------- footer */
.site-footer {
  background: var(--color-primary);
  color: #ffffff;
  padding-block: 2rem 1.2rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.footer-heading {
  font-size: 1rem;
  margin: 0 0 0.6rem;
}
.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links li { margin-block: 0.3rem; }
.footer-links a { color: #ffffff; }
.footer-note { font-size: 0.9rem; color: #dbe3f4; margin: 0 0 0.8rem; }
.footer-note a { color: #ffffff; }
.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.9rem;
  color: #dbe3f4;
}
.footer-bottom p { margin: 0; }

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

/* ==========================================================================
   Ad slot: exactly ONE bare container per page, <div class="responsive"></div>.
   Tool pages place it directly below the calculator + result board; content
   pages after the first content block. No min-height reservation while the
   site is pre-AdSense (webmaster decision 2026-10-27): the empty slot stays silent and collapsed,
   so the page must look finished with or without an injected unit.
   ========================================================================== */
.responsive {
  margin: 1.25rem 0;
}

/* Desktop geometry (skill.md 8.6.1): 980px frame, content column exactly
   970px (padding-inline capped at 5px above the 992px breakpoint). */
@media (min-width: 992px) {
  .wrap,
  .site-main {
    padding-inline: 5px;
  }
}