/* PUBLIC smoker diagnostic (dba 2) — P6.
   Layered ON TOP of spot-diagnostic.css, which the Hub tool also loads: this file
   only says what is different about being a customer-facing page inside a theme
   iframe. Everything about how a step, an answer or a warning looks comes from
   the shared sheet, so the two surfaces cannot drift apart visually either.

   TRANSPARENT BACKGROUND, NO CHROME. The storefront supplies the header, the
   footer and the page background; a second set inside the frame reads as a
   website inside a website. */

html, body.spot-diagnose-public {
    margin: 0;
    padding: 0;
    background: transparent;
}

body.spot-diagnose-public {
    /* Slightly larger than the Hub's 13px: this is read by a customer on a phone
       in a kitchen, not by an operator at a desk. */
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #e2e8f0;
    padding: 20px 16px 40px;
}

body.spot-diagnose-public .spot-diag-root {
    font-size: 15px;
    max-width: 720px;
    margin: 0 auto;
}

.sdp-intro { margin-bottom: 22px; }
.sdp-intro h1 {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.2;
    color: #f1f5f9;
}
.sdp-intro p {
    margin: 0;
    color: #94a3b8;
    max-width: 56ch;
}

.sdp-help {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, .2);
    font-size: 13px;
    color: #94a3b8;
}
.sdp-help a { color: #e0a93a; font-weight: 600; }

/* Bigger tap targets throughout — a phone, one-handed, possibly with gloves on. */
body.spot-diagnose-public .sd-answer {
    padding: 15px 16px;
    font-size: 15px;
}
body.spot-diagnose-public .sd-btn {
    padding: 11px 18px;
    font-size: 14px;
}
body.spot-diagnose-public .sd-in,
body.spot-diagnose-public .sd-textarea {
    /* 16px stops iOS Safari zooming the whole page on focus, which on a form
       this long leaves the visitor scrolled somewhere they did not ask to be. */
    font-size: 16px;
    padding: 11px 12px;
}
body.spot-diagnose-public .sd-node .sd-h { font-size: 19px; }
body.spot-diagnose-public .sd-node-body { font-size: 15px; }

/* The step's caution rides the same bump as the step's own text. Left at the
   Hub's 13px it would be the SMALLEST type on a customer's phone — the one
   sentence on the screen that most needs reading set below everything it is
   warning about. It stays a shade heavier than the body, too: it is read once,
   before acting, not followed along. */
body.spot-diagnose-public .sd-notice { padding: 12px 14px; }
body.spot-diagnose-public .sd-notice-l { font-size: 11px; }
body.spot-diagnose-public .sd-notice-b { font-size: 15px; font-weight: 500; }

/* ─── THE CART BRIDGE ───────────────────────────────────────────────────────
   Two mutually exclusive affordances, and only one of them can ever be built:
   the "Add to cart" anchor is rendered from cart_url, which the server sets to
   null for anything unbuyable. There is no styling here for a disabled or broken
   add button because there is no such state. */

.sd-cart {
    margin: 18px 0;
    padding: 16px;
    background: rgba(224, 169, 58, .07);
    border: 1px solid rgba(224, 169, 58, .3);
    border-radius: 8px;
}
.sd-cart-h {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #e0a93a;
    font-weight: 700;
    margin-bottom: 10px;
}
.sd-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
}
.sd-cart-row:last-of-type { border-bottom: 0; }
.sd-cart-info { flex: 1; min-width: 0; }
.sd-cart-n { font-weight: 600; color: #f1f5f9; }
.sd-cart-q { color: #94a3b8; font-weight: 400; }
.sd-cart-p { color: #cbd5e1; font-size: 14px; margin-top: 2px; }
.sd-cart-b { color: #e0a93a; font-size: 12px; margin-top: 2px; }
.sd-cart-why {
    font-size: 12px;
    color: #94a3b8;
    margin: -4px 0 8px;
}

.sd-cart-add,
.sd-cart-call {
    display: inline-block;
    white-space: nowrap;
    padding: 11px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.sd-cart-add {
    background: #e0a93a;
    color: #1e293b;
}
.sd-cart-add:hover { background: #f0bb52; }
/* Deliberately quieter than Add to cart, and deliberately still a real, tappable
   action rather than a greyed-out button: on a phone it dials. */
.sd-cart-call {
    background: transparent;
    border: 1px solid rgba(224, 169, 58, .5);
    color: #e0a93a;
}
.sd-cart-call:hover { background: rgba(224, 169, 58, .12); }

@media (max-width: 520px) {
    .sd-cart-row { flex-direction: column; align-items: stretch; }
    .sd-cart-add, .sd-cart-call { text-align: center; }
}

/* 2026-09-10: measured at 375px inside the storefront iframe (359px wide) — the
   unit inputs and the problem textarea are width:100% PLUS padding and border,
   so their right edge sat 10px past the viewport. border-box keeps 100% meaning
   100%. Scoped to the public page: the staff panel's CSS is untouched. */
body.spot-diagnose-public .sd-in,
body.spot-diagnose-public .sd-textarea {
    box-sizing: border-box;
    max-width: 100%;
}