/* ─────────────────────────────────────────────────────────────────────────
   ChatterFix — public / marketing surface
   Light industrial · steel + blueprint

   One stylesheet for every public page outside the app (PM library, equipment
   guides, industry pages, comparisons, tools, legal). Tokens mirror the
   landing page so the whole public surface reads as one site.

   Deliberately light-mode only: this matches public_landing.html, which has no
   theme toggle. The in-app dark mode (lesson #1) applies to authenticated
   pages via base.html and does not reach here.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --paper:     #eef1f5;
    --paper-2:   #e7ebf1;
    --card:      #ffffff;
    --ink:       #1b2430;
    --muted:     #5a6675;
    --faint:     #8b96a5;
    --steel:     #cdd6e1;
    --steel-soft:#dde3ec;
    --grid:      rgba(40,70,120,0.05);
    --amber:     #2563eb;
    --amber-hot: #4785ff;
    --amber-ink: #1b4fb0;
    --amber-dim: rgba(37,99,235,0.12);
    --run:       #16a34a;
    --warn:      #ef8b1a;
    --fault:     #e2483d;
    --data:      #0e9bb5;
    --violet:    #7c5cff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 46px 46px;
}
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.4rem; position: relative; z-index: 1; }
.wrap-narrow { max-width: 820px; }
a { text-decoration: none; color: inherit; }

/* ── shared atoms ── */
.tag {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 500;
    letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted);
}
.led {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--run); box-shadow: 0 0 0 3px rgba(22,163,74,0.14); vertical-align: middle;
}
.led.warn  { background: var(--warn);   box-shadow: 0 0 0 3px rgba(239,139,26,0.14); }
.led.fault { background: var(--fault);  box-shadow: 0 0 0 3px rgba(226,72,61,0.14); }
.led.data  { background: var(--data);   box-shadow: 0 0 0 3px rgba(14,155,181,0.14); }
.led.viol  { background: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,255,0.14); }

.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'Saira Condensed', sans-serif; font-weight: 600; letter-spacing: 0.6px;
    font-size: 1rem; text-transform: uppercase; cursor: pointer; border: none;
    padding: 0.7rem 1.5rem; border-radius: 5px;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-amber {
    background: linear-gradient(180deg, var(--amber-hot), var(--amber)); color: #ffffff;
    box-shadow: 0 8px 22px rgba(37,99,235,0.32), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-amber:hover { box-shadow: 0 12px 30px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-steel { background: var(--card); color: var(--ink); border: 1px solid var(--steel); }
.btn-steel:hover { border-color: var(--amber); color: var(--amber-ink); }
.btn-sm { font-size: 0.86rem; padding: 0.5rem 1.05rem; }

/* ── chrome ── */
.topbar {
    position: sticky; top: 0; z-index: 30; background: rgba(238,241,245,0.82);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--steel);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.4rem; gap: 1rem; }
.brand {
    font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 1.5rem;
    letter-spacing: 0.5px; text-transform: uppercase; display: flex; align-items: center; gap: 0.55rem;
}
.brand .mark {
    width: 28px; height: 28px; border-radius: 6px;
    background: linear-gradient(180deg,var(--amber-hot),var(--amber)); color: #fff;
    display: grid; place-items: center; font-size: 0.85rem; box-shadow: 0 4px 12px rgba(37,99,235,0.35);
}
.topnav { display: flex; gap: 1.4rem; align-items: center; }
.topnav a {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--muted); transition: color 0.18s;
}
.topnav a:hover, .topnav a.on { color: var(--amber-ink); }
.top-actions { display: flex; gap: 0.6rem; align-items: center; }
@media (max-width: 860px) { .topnav { display: none; } }

/* ── breadcrumbs ── */
.crumbs {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--faint); padding: 1.6rem 0 0;
    display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--amber-ink); }
.crumbs .sep { color: var(--steel); }

/* ── page header ── */
.page-head { padding: 2rem 0 2.6rem; position: relative; }
.page-head::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(700px 320px at 20% 0%, rgba(37,99,235,0.09), transparent 62%);
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 {
    font-family: 'Saira Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
    font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 0.98; letter-spacing: 0.5px;
    margin: 0.7rem 0 1rem; max-width: 20ch;
}
.page-head .standfirst {
    font-size: 1.1rem; color: var(--muted); line-height: 1.65; max-width: 62ch; margin: 0;
}
.page-head .standfirst strong { color: var(--ink); font-weight: 600; }

/* ── spec strip (interval / duration / type) ── */
.specs {
    display: flex; flex-wrap: wrap; gap: 0; margin: 2rem 0 0;
    border: 1px solid var(--steel); border-radius: 10px; background: var(--card);
    overflow: hidden; box-shadow: 0 8px 24px rgba(40,60,100,0.06);
}
.specs .spec { padding: 1.1rem 1.5rem; border-right: 1px solid var(--steel-soft); flex: 1 1 170px; }
.specs .spec:last-child { border-right: none; }
.specs .spec .k {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 2px;
    text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 0.45rem;
}
.specs .spec .v {
    font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: 1.5rem;
    text-transform: uppercase; letter-spacing: 0.4px; line-height: 1;
}
.specs .spec .v.accent { color: var(--amber); }

/* ── sections + prose ── */
section { padding: 3.4rem 0; position: relative; z-index: 1; }
section.tight { padding: 2.2rem 0; }
h2.title {
    font-family: 'Saira Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: 0.5px; margin: 0 0 1.1rem;
}
h2.title.center { text-align: center; }
h3.sub {
    font-family: 'Saira Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: 1.2rem; letter-spacing: 0.5px; margin: 2rem 0 0.7rem;
}
p.lede { color: var(--muted); max-width: 700px; line-height: 1.65; font-size: 1.02rem; }
p.lede.center { text-align: center; margin: 0 auto 2.6rem; }
.prose { max-width: 68ch; }
.prose p { color: var(--muted); line-height: 1.75; font-size: 1rem; margin: 0 0 1.1rem; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { color: var(--muted); line-height: 1.75; padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: 0.5rem; }

/* ── callout ── */
.callout {
    border: 1px solid var(--steel); border-left: 4px solid var(--amber); background: var(--card);
    border-radius: 10px; padding: 1.5rem 1.7rem; margin: 1.8rem 0;
    box-shadow: 0 10px 30px rgba(40,60,100,0.06);
}
.callout .k {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 2px;
    text-transform: uppercase; color: var(--amber-ink); display: block; margin-bottom: 0.6rem;
}
.callout p { margin: 0; color: var(--muted); line-height: 1.7; }
.callout.warn { border-left-color: var(--warn); }
.callout.warn .k { color: var(--warn); }

/* ── procedure steps ── */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
    counter-increment: step; position: relative; padding: 1.1rem 1.4rem 1.1rem 3.9rem;
    border: 1px solid var(--steel); border-radius: 9px; background: var(--card);
    margin-bottom: 0.7rem; line-height: 1.6; color: var(--ink);
    box-shadow: 0 5px 16px rgba(40,60,100,0.04);
}
.steps li::before {
    content: counter(step, decimal-leading-zero); position: absolute; left: 1.25rem; top: 1.05rem;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.86rem; font-weight: 600; color: var(--amber);
}

/* ── cards + grids ── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }
.grid.tight { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0.85rem; }
.card {
    background: var(--card); border: 1px solid var(--steel); border-radius: 10px; padding: 1.5rem;
    transition: transform 0.18s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 6px 20px rgba(40,60,100,0.05); display: block;
}
.card:hover { transform: translateY(-5px); border-color: var(--amber); box-shadow: 0 20px 44px rgba(40,60,100,0.14); }
.card h3 {
    font-family: 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.5px;
    font-size: 1.16rem; margin: 0 0 0.5rem; color: var(--ink);
}
.card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.card .meta {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--faint); display: flex; align-items: center;
    gap: 0.5rem; margin-bottom: 0.8rem;
}
.chip {
    display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem;
    letter-spacing: 1px; text-transform: uppercase; color: var(--amber-ink);
    border: 1px solid rgba(37,99,235,0.35); background: var(--amber-dim);
    border-radius: 4px; padding: 0.2rem 0.55rem; margin: 0.85rem 0.3rem 0 0;
}
.chip.plain { color: var(--muted); border-color: var(--steel); background: var(--paper-2); }
.chip.safety { color: var(--fault); border-color: rgba(226,72,61,0.35); background: rgba(226,72,61,0.1); }

/* ── pill list (defects, downtime reasons, parts) ── */
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.pills li {
    background: var(--card); border: 1px solid var(--steel); border-radius: 6px;
    padding: 0.45rem 0.9rem; font-size: 0.88rem; color: var(--ink);
    box-shadow: 0 4px 12px rgba(40,60,100,0.04);
}

/* ── comparison table ── */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.4rem; }
@media (max-width: 780px) { .cmp { grid-template-columns: 1fr; } }
.cmp-col { border: 1px solid var(--steel); border-radius: 10px; background: var(--card); overflow: hidden; box-shadow: 0 8px 24px rgba(40,60,100,0.06); }
.cmp-col > header {
    padding: 1rem 1.4rem; border-bottom: 1px solid var(--steel-soft); background: var(--paper);
    font-family: 'Saira Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem;
}
.cmp-col.us > header { color: var(--amber-ink); }
.cmp-item { padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--steel-soft); }
.cmp-item:last-child { border-bottom: none; }
.cmp-item h4 {
    font-family: 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.4px;
    font-size: 1rem; margin: 0 0 0.4rem;
}
.cmp-item p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

/* ── calculator ── */
.calc {
    border: 1px solid var(--steel); border-radius: 12px; background: var(--card);
    box-shadow: 0 18px 50px rgba(40,60,100,0.1); overflow: hidden; margin: 1.6rem 0;
}
.calc-bar {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.3rem;
    border-bottom: 1px solid var(--steel-soft); background: var(--paper);
    font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--muted);
}
.calc-body { padding: 1.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem 1.4rem; }
.field label {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem;
}
.field .hint { display: block; font-size: 0.76rem; color: var(--faint); margin-top: 0.35rem; line-height: 1.45; letter-spacing: 0; text-transform: none; font-family: 'IBM Plex Sans', sans-serif; }
/* form-light per lesson #24 — explicit light background and dark text so
   values stay readable regardless of any inherited theme. */
.form-light input, .form-light select, .form-light textarea,
.calc input, .calc select {
    width: 100%; background: #ffffff; color: #1b2430;
    border: 1px solid var(--steel); border-radius: 6px; padding: 0.65rem 0.8rem;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.form-light input:focus, .form-light select:focus, .calc input:focus, .calc select:focus {
    outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim);
}
.form-light input::placeholder { color: var(--faint); }
.calc-out {
    border-top: 1px solid var(--steel-soft); background: var(--paper);
    padding: 1.5rem 1.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem;
}
.calc-out .out .k {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 2px;
    text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 0.4rem;
}
.calc-out .out .v {
    font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 2rem;
    line-height: 1; color: var(--amber);
}
.calc-out .out .v.small { font-size: 1.4rem; color: var(--ink); }
.calc-note { padding: 0 1.6rem 1.5rem; font-size: 0.82rem; color: var(--faint); line-height: 1.6; }

/* ── FAQ ── */
.faq { border: 1px solid var(--steel); border-radius: 10px; background: var(--card); overflow: hidden; box-shadow: 0 8px 24px rgba(40,60,100,0.06); }
.faq details { border-bottom: 1px solid var(--steel-soft); }
.faq details:last-child { border-bottom: none; }
.faq summary {
    padding: 1.15rem 1.5rem; cursor: pointer; font-family: 'Saira Condensed', sans-serif;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; font-size: 1.05rem;
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber); font-size: 1.3rem; font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 1.5rem 1.3rem; color: var(--muted); line-height: 1.7; font-size: 0.95rem; }

/* ── CTA band ── */
.cta-band {
    text-align: center; padding: 4.5rem 0; margin-top: 2rem;
    border-top: 1px solid var(--steel-soft);
    background: radial-gradient(680px 340px at 50% 120%, rgba(37,99,235,0.14), transparent 60%);
    position: relative; z-index: 1;
}
.cta-band h2 {
    font-family: 'Saira Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.8rem, 4.2vw, 2.9rem); line-height: 1; letter-spacing: 0.5px; margin: 0 0 0.9rem;
}
.cta-band p { color: var(--muted); margin: 0 auto 2rem; font-size: 1.02rem; max-width: 56ch; line-height: 1.6; }
.cta-band .ctas { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

/* ── footer ── */
footer.site {
    border-top: 1px solid var(--steel); background: var(--paper-2);
    padding: 3rem 0 2.2rem; position: relative; z-index: 1;
}
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
footer.site h4 {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 2px;
    text-transform: uppercase; color: var(--faint); margin: 0 0 0.9rem; font-weight: 500;
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 0.5rem; }
footer.site a { color: var(--muted); font-size: 0.9rem; transition: color 0.18s; }
footer.site a:hover { color: var(--amber-ink); }
footer.site .base {
    margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--steel);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 1px;
    text-transform: uppercase; color: var(--faint);
}

/* ── index / directory listing ── */
.dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; }
.dir a {
    display: flex; justify-content: space-between; align-items: center; gap: 0.9rem;
    padding: 0.95rem 1.2rem; border: 1px solid var(--steel); border-radius: 8px;
    background: var(--card); transition: border-color 0.18s, transform 0.15s, box-shadow 0.2s;
}
.dir a:hover { border-color: var(--amber); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(40,60,100,0.1); }
.dir a .n { font-weight: 500; font-size: 0.96rem; }
.dir a .x {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--faint); flex-shrink: 0;
}

@media (max-width: 600px) {
    .specs .spec { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--steel-soft); }
    .specs .spec:last-child { border-bottom: none; }
    .page-head h1 { max-width: none; }
}