/* Ad Studio.
 *
 * Ported from design/ad-studio-app/bready/bready.css in the evaluator repo,
 * which was built against these same tokens, so nothing here re-themes the
 * platform. Every rule is scoped to .ad-studio-main and every class carries an
 * ad- prefix, so this file cannot reach any other Bready app.
 *
 * The platform's signature is a hard offset shadow, never a soft blur. */

.ad-studio-main {
  grid-template-rows: auto auto minmax(0, 1fr);
  --ad-good: #3b936d;
  --ad-warn: #c3842f;
  --ad-bad: #a14f4f;
  --ad-serif: Georgia, "Times New Roman", serif;
  --ad-mono: "Cascadia Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  --ad-lift-1: 3px 3px 0 color-mix(in srgb, var(--brown) 13%, transparent);
  --ad-lift-2: 4px 4px 0 color-mix(in srgb, var(--brown) 10%, transparent);
}

/* ---------- stepper ---------- */

.ad-stepper { display:flex; gap:6px; max-width:1360px; width:100%; margin:0 auto; padding:16px clamp(18px,4vw,46px) 0; overflow-x:auto; }
.ad-step { flex:1 1 0; min-width:132px; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid transparent; border-radius:6px; background:transparent; color:color-mix(in srgb, var(--muted) 76%, var(--brown)); font:inherit; font-size:12px; text-align:left; transition:transform .14s ease, box-shadow .14s ease, background .14s ease; }
.ad-step:disabled { opacity:.45; cursor:default; }
.ad-step[aria-current="step"] { border-color:color-mix(in srgb, var(--brown) 26%, var(--rose)); background:var(--paper); color:var(--ink); font-weight:700; box-shadow:var(--ad-lift-1); transform:translate(-1px,-1px); }
.ad-step-num { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:color-mix(in srgb, var(--muted) 3%, var(--line)); color:color-mix(in srgb, var(--ink) 52%, var(--terracotta)); font-size:10px; font-weight:800; }
.ad-step[aria-current="step"] .ad-step-num { background:var(--ink); color:var(--cream); }
.ad-step.done .ad-step-num { background:var(--ad-good); color:#fff; }

/* ---------- sheet ---------- */

.ad-sheet { overflow:auto; max-width:1360px; width:100%; margin:0 auto; padding:20px clamp(18px,4vw,46px) 64px; }
.ad-single { max-width:680px; margin:0 auto; }
.ad-stack { display:flex; flex-direction:column; gap:16px; }
.ad-eyebrow { margin:0 0 6px; color:var(--brown); font-size:10px; font-weight:850; letter-spacing:.18em; }
.ad-card { padding:20px; margin:0; border:1px solid var(--line); border-radius:6px; background:color-mix(in srgb, var(--paper) 94%, transparent); box-shadow:var(--ad-lift-2); }
.ad-card + .ad-card { margin-top:16px; }
.ad-quiet { margin-top:10px; box-shadow:none; background:color-mix(in srgb, var(--paper) 72%, transparent); }
.ad-card-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px; padding-bottom:13px; border-bottom:1px solid color-mix(in srgb, var(--paper) 36%, var(--line)); }
.ad-card-head h2, .ad-card h2 { margin:0; font-family:var(--ad-serif); font-size:22px; font-weight:500; letter-spacing:-.02em; }
.ad-card-head small { color:var(--muted); font-size:11px; text-align:right; }
.ad-error { margin:0 0 16px; padding:12px 15px; border-left:4px solid var(--ad-bad); border-radius:7px; background:color-mix(in srgb, var(--blush) 36%, var(--paper)); color:#7d3a3a; font-size:12.5px; line-height:1.55; }
.ad-note { margin:14px 0 0; padding:12px 15px; border-left:4px solid #a86b45; border-radius:7px; background:color-mix(in srgb, var(--terracotta) 14%, var(--cream)); color:color-mix(in srgb, var(--ink) 55%, var(--rose)); font-size:11.5px; line-height:1.6; }
.ad-note strong { color:color-mix(in srgb, var(--terracotta) 41%, var(--ink)); }
.ad-foot-hint { margin:12px 0 0; color:color-mix(in srgb, var(--muted) 76%, var(--rose)); font-size:11px; }
.ad-notice { display:flex; align-items:flex-start; gap:11px; margin:0 0 18px; padding:13px 16px; border:1px solid var(--line); border-left:4px solid var(--ad-warn); border-radius:6px; background:color-mix(in srgb, var(--paper) 86%, transparent); color:color-mix(in srgb, var(--terracotta) 41%, var(--ink)); font-size:12.5px; line-height:1.55; }
.ad-notice .ad-dot { margin-top:5px; }
/* What was read, shown back. A photo of your own sign is the only reassurance
   that actually reads as "it worked". */
.ad-uploaded { display:flex; align-items:center; gap:16px; padding:14px; margin-bottom:20px; border:1px solid color-mix(in srgb, var(--brown) 26%, var(--rose)); border-radius:10px; background:color-mix(in srgb, var(--blush) 11%, var(--cream)); box-shadow:var(--ad-lift-1); }
.ad-uploaded.dragging { border-style:dashed; background:color-mix(in srgb, var(--rose) 9%, var(--cream)); }
.ad-thumb { flex:0 0 auto; width:74px; height:74px; object-fit:cover; border:1px solid var(--line); border-radius:6px; background:#fff; display:block; }
.ad-thumb-pdf { display:grid; place-items:center; color:var(--brown); font-size:12px; font-weight:850; letter-spacing:.08em; }
.ad-uploaded-about { display:flex; flex-direction:column; gap:5px; min-width:0; flex:1 1 auto; }
.ad-uploaded-about strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-uploaded-about small { color:var(--muted); font-size:11.5px; line-height:1.5; }
.ad-swap { flex:0 0 auto; align-self:center; padding:8px 13px; border:1px solid color-mix(in srgb, var(--brown) 36%, var(--paper)); border-radius:999px; background:#fff; color:color-mix(in srgb, var(--ink) 24%, var(--muted)); font-size:10.5px; font-weight:800; cursor:pointer; white-space:nowrap; }
.ad-swap input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.ad-field label em { float:right; font-style:normal; color:color-mix(in srgb, var(--ink) 32%, var(--line)); font-size:10px; font-weight:650; }
.ad-cost { display:block; margin-top:6px; padding:7px 11px; border-left:3px solid var(--ad-warn); border-radius:5px; background:#fdf3e2; color:#7a5a26; font-size:11px; line-height:1.5; }

.ad-more { display:flex; align-items:center; gap:11px; width:100%; margin:4px 0 18px; padding:11px 14px; border:1px dashed color-mix(in srgb, var(--brown) 36%, var(--paper)); border-radius:6px; background:transparent; color:#6b564d; font:inherit; font-size:12px; text-align:left; }
.ad-more .ad-chev { margin-left:auto; }

.ad-read-note { margin:0 0 10px; padding:9px 13px; border-left:3px solid var(--terracotta); border-radius:5px; background:color-mix(in srgb, var(--blush-soft) 56%, var(--paper)); color:#6b564d; font-size:11.5px; line-height:1.55; }
.ad-hint { display:block; margin-top:6px; color:color-mix(in srgb, var(--muted) 76%, var(--rose)); font-size:10.5px; font-weight:500; line-height:1.5; }

/* ---------- step 1, kept deliberately plain ---------- */

.ad-intro { margin:6px 0 22px; text-align:center; }
.ad-intro h1 { margin:0 0 10px; font-family:var(--ad-serif); font-size:clamp(28px,4vw,42px); font-weight:500; letter-spacing:-.035em; }
.ad-intro p { margin:0 auto; max-width:460px; color:var(--muted); font-size:14px; line-height:1.6; }

/* The upload target is the primary action here, so it gets the most surface. */
.ad-drop { display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px 24px; margin-bottom:20px; border:2px dashed color-mix(in srgb, var(--brown) 19%, var(--line)); border-radius:10px; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); color:var(--brown); text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.ad-drop.dragging { border-color:var(--brown); background:color-mix(in srgb, var(--rose) 9%, var(--cream)); }
.ad-drop.dragging { border-style:solid; }
.ad-drop:focus-within { border-color:var(--brown); box-shadow:0 0 0 3px color-mix(in srgb, var(--brown) 13%, transparent); }
.ad-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ad-drop strong { color:var(--ink); font-size:14px; }
.ad-drop small { max-width:380px; color:var(--muted); font-size:11.5px; line-height:1.55; }
.ad-or { display:flex; align-items:center; gap:14px; margin:0 0 18px; color:color-mix(in srgb, var(--ink) 32%, var(--line)); font-size:11px; font-weight:750; letter-spacing:.06em; }
.ad-or::before, .ad-or::after { content:""; flex:1; height:1px; background:color-mix(in srgb, var(--paper) 36%, var(--line)); }

.ad-field { display:grid; gap:7px; margin-bottom:15px; }
.ad-field-last { margin-bottom:0; }
.ad-field label, .ad-field-label { display:block; color:color-mix(in srgb, var(--ink) 65%, var(--rose)); font-size:11px; font-weight:750; }
.ad-field input, .ad-field textarea { width:100%; padding:12px 13px; border:1px solid color-mix(in srgb, var(--brown) 19%, var(--line)); border-radius:6px; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); color:var(--ink); font-family:inherit; font-size:14px; font-weight:550; line-height:1.45; resize:vertical; }
.ad-field textarea { font-weight:450; font-size:13px; }
.ad-field input:focus, .ad-field textarea:focus { outline:0; border-color:var(--brown); box-shadow:0 0 0 3px color-mix(in srgb, var(--brown) 13%, transparent); }
.ad-pills { display:flex; flex-wrap:wrap; gap:7px; }
.ad-pill { padding:7px 13px; border:1px solid color-mix(in srgb, var(--brown) 36%, var(--paper)); border-radius:999px; background:#fff; color:color-mix(in srgb, var(--ink) 24%, var(--muted)); font:inherit; font-size:10.5px; font-weight:800; }
.ad-pill[aria-pressed="true"] { border-color:#211816; background:#211816; color:#fff; }

.ad-act { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:20px; padding:14px; border:1px solid var(--ink); border-radius:4px; background:var(--ink); color:var(--cream); font:inherit; font-size:14px; font-weight:800; box-shadow:4px 4px 0 color-mix(in srgb, var(--brown) 30%, transparent); transition:transform .14s ease, box-shadow .14s ease; }
.ad-act:active:not(:disabled) { transform:translate(1px,1px); box-shadow:2px 2px 0 color-mix(in srgb, var(--brown) 30%, transparent); }
.ad-act:disabled { opacity:.55; cursor:wait; box-shadow:none; transform:none; }
/* While the judge reads: the seconds beside the disabled action, and a way out beside it. */
.ad-act-row { display:flex; gap:10px; align-items:stretch; margin-top:20px; }
.ad-act-row .ad-act { margin-top:0; flex:1 1 auto; }
.ad-progress { font-variant-numeric:tabular-nums; font-weight:600; opacity:.85; }
.ad-cancel { flex:0 0 auto; padding:14px 18px; border:1px solid color-mix(in srgb, var(--brown) 36%, var(--paper)); border-radius:4px; background:var(--paper); color:var(--ink); font:inherit; font-size:13px; font-weight:800; }

/* A single quiet line rather than a wall of error codes. */
.ad-checks-line { display:flex; align-items:center; gap:11px; width:100%; margin-top:14px; padding:13px 16px; border:1px solid var(--line); border-radius:6px; background:color-mix(in srgb, var(--paper) 80%, transparent); color:var(--ink); font:inherit; font-size:12.5px; text-align:left; }
.ad-chev { margin-left:auto; color:var(--brown); font-size:11px; font-weight:800; }
.ad-dot { flex:0 0 9px; width:9px; height:9px; border-radius:50%; background:var(--brown); }
.ad-dot.good { background:var(--ad-good); } .ad-dot.warn { background:var(--ad-warn); } .ad-dot.bad { background:var(--ad-bad); }
.ad-check { display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--paper) 58%, var(--line)); }
.ad-check:last-of-type { border-bottom:0; }
.ad-check strong { display:block; font-size:12.5px; font-weight:600; }
.ad-hit { display:inline-block; margin-top:6px; padding:2px 7px; border-radius:4px; background:color-mix(in srgb, var(--blush-soft) 93%, var(--brown)); color:#5f2f20; font-family:var(--ad-mono); font-size:10.5px; }

/* What was scored before: one row each, opened with a press. */
.ad-recent { margin-top:16px; }
.ad-recent-row { display:flex; align-items:center; gap:12px; width:100%; padding:10px 6px; border:0; border-bottom:1px solid color-mix(in srgb, var(--paper) 58%, var(--line)); background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.ad-recent-row:last-child { border-bottom:0; }
.ad-recent-score { flex:0 0 52px; text-align:center; padding:5px 0; border-radius:999px; color:#fff; font-size:11px; font-weight:850; letter-spacing:.04em; background:var(--ad-bad); }
.ad-recent-score.good { background:var(--ad-good); } .ad-recent-score.warn { background:var(--ad-warn); }
.ad-recent-about { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.ad-recent-about strong { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-recent-about small { color:var(--muted); font-size:11px; }

/* ---------- step 2: the verdict is the hero ---------- */

.ad-verdict { display:grid; gap:18px; }
@media (min-width:900px) { .ad-verdict { grid-template-columns:290px minmax(0,1fr); } }
.ad-score-slab, .ad-verdict-body { display:flex; flex-direction:column; padding:22px; border:1px solid var(--line); border-radius:6px; background:var(--paper); box-shadow:var(--ad-lift-2); }
.ad-band { align-self:flex-start; padding:5px 11px; border-radius:999px; color:#fff; font-size:9px; font-weight:850; letter-spacing:.15em; background:var(--ad-bad); }
.ad-band.good { background:var(--ad-good); } .ad-band.warn { background:var(--ad-warn); }
.ad-score { margin:18px 0 0; font-family:var(--ad-serif); font-size:96px; font-weight:500; line-height:.86; letter-spacing:-.05em; color:var(--ad-bad); }
.ad-score.good { color:var(--ad-good); } .ad-score.warn { color:var(--ad-warn); }
.ad-score span { font-size:26px; color:color-mix(in srgb, var(--blush-soft) 46%, var(--muted)); letter-spacing:0; }
.ad-score-note { margin:14px 0 0; color:var(--muted); font-size:11.5px; line-height:1.55; }
.ad-gauge { margin-top:auto; padding-top:20px; }
.ad-gauge-rail { position:relative; height:12px; border-radius:999px; background:color-mix(in srgb, var(--brown) 20%, var(--paper)); }
.ad-gauge-fill { position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--ad-bad); transition:width .5s cubic-bezier(.2,.7,.3,1); }
.ad-gauge-fill.good { background:var(--ad-good); } .ad-gauge-fill.warn { background:var(--ad-warn); }
.ad-verdict-body h1 { margin:4px 0 14px; font-family:var(--ad-serif); font-size:clamp(23px,2.6vw,32px); font-weight:500; line-height:1.14; letter-spacing:-.03em; }
.ad-verdict-body p { margin:0 0 16px; color:color-mix(in srgb, var(--ink) 72%, var(--rose)); font-size:13.5px; line-height:1.65; }
.ad-gate-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.ad-gate { display:flex; flex-direction:column; gap:4px; padding:8px 12px; border:1px solid color-mix(in srgb, var(--paper) 4%, var(--line)); border-radius:8px; background:color-mix(in srgb, var(--blush-soft) 56%, var(--paper)); font-size:10.5px; }
.ad-gate code { color:#5f2f20; font-family:var(--ad-mono); font-weight:750; }
.ad-gate em { font-style:normal; color:color-mix(in srgb, var(--muted) 72%, var(--terracotta)); line-height:1.5; }

.ad-law { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) 96px 40px; align-items:center; gap:12px; padding:11px 8px; border:0; border-bottom:1px solid color-mix(in srgb, var(--paper) 58%, var(--line)); border-radius:5px; background:transparent; color:inherit; font:inherit; text-align:left; }
.ad-law[aria-expanded="true"] { background:color-mix(in srgb, var(--blush-soft) 27%, var(--cream)); }
.ad-law-id { color:color-mix(in srgb, var(--ink) 34%, var(--rose)); font-size:10px; font-weight:800; }
.ad-law-name { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-law-rail { height:9px; border-radius:999px; background:color-mix(in srgb, var(--brown) 20%, var(--paper)); overflow:hidden; }
.ad-law-rail span { display:block; height:100%; min-width:3px; border-radius:inherit; background:var(--brown); transition:width .4s ease; }
.ad-law-num { text-align:right; font-family:var(--ad-serif); font-size:15px; }
.ad-law-detail { margin:0; padding:2px 8px 15px 46px; color:#6b564d; font-size:11.5px; line-height:1.6; }
.ad-law-detail code { margin-left:6px; padding:1px 6px; border-radius:4px; background:color-mix(in srgb, var(--blush-soft) 93%, var(--brown)); color:#5f2f20; font-family:var(--ad-mono); font-size:10px; }
.ad-untold-line { margin:12px 0 14px; padding:3px 0 3px 13px; border-left:3px solid var(--terracotta); color:color-mix(in srgb, var(--ink) 72%, var(--rose)); font-size:13.5px; font-style:italic; line-height:1.6; }
.ad-untold { display:flex; flex-direction:column; gap:4px; padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--paper) 58%, var(--line)); }
.ad-untold:last-child { border-bottom:0; }
.ad-untold strong { font-size:12.5px; }
.ad-untold span { color:#6b564d; font-size:11.5px; line-height:1.55; }

/* ---------- step 3: the rewrite ---------- */

.ad-rewrite { border-color:color-mix(in srgb, var(--brown) 26%, var(--rose)); background:color-mix(in srgb, var(--blush) 11%, var(--cream)); }
.ad-rewrite-headline { margin:14px 0 10px; font-family:var(--ad-serif); font-size:clamp(22px,2.4vw,30px); font-weight:500; line-height:1.2; letter-spacing:-.03em; }
.ad-rewrite-body { margin:0 0 10px; color:color-mix(in srgb, var(--ink) 72%, var(--rose)); font-size:14px; line-height:1.65; }
.ad-rewrite-cta { margin:0; color:#6b3f28; font-size:13px; font-weight:750; }
.ad-defect { padding:14px 0; border-bottom:1px solid color-mix(in srgb, var(--paper) 58%, var(--line)); }
.ad-defect:last-child { border-bottom:0; }
.ad-was { margin:0 0 6px; color:color-mix(in srgb, var(--muted) 72%, var(--terracotta)); font-size:12.5px; text-decoration:line-through; }
.ad-now { margin:0 0 8px; color:var(--ink); font-size:14px; font-weight:650; line-height:1.45; }
.ad-why { margin:0 0 8px; color:#6b564d; font-size:11.5px; line-height:1.6; }
.ad-defect code { padding:1px 6px; border-radius:4px; background:color-mix(in srgb, var(--blush-soft) 93%, var(--brown)); color:#5f2f20; font-family:var(--ad-mono); font-size:10px; }
.ad-free-fix { margin:8px 0 0; padding-left:16px; position:relative; color:#6b564d; font-size:12px; line-height:1.6; }
.ad-free-fix::before { content:"·"; position:absolute; left:4px; color:var(--brown); font-weight:800; }

/* ---------- step 4: the result ---------- */

.ad-plan-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid color-mix(in srgb, var(--paper) 58%, var(--line)); }
.ad-plan-row:last-of-type { border-bottom:0; }
.ad-plan-row span { color:color-mix(in srgb, var(--muted) 72%, var(--terracotta)); font-size:11px; font-weight:750; }
.ad-plan-row strong { text-align:right; font-size:12.5px; font-weight:600; }
.ad-record-summary { margin:14px 0 0; padding:12px 15px; border-left:4px solid var(--ad-good); border-radius:7px; background:#eef6f1; color:#33614c; font-size:12.5px; line-height:1.55; }
.ad-result { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid color-mix(in srgb, var(--paper) 58%, var(--line)); }
.ad-result:last-child { border-bottom:0; }
.ad-result div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ad-result strong { font-size:12.5px; }
.ad-result small { color:color-mix(in srgb, var(--muted) 72%, var(--terracotta)); font-size:10.5px; line-height:1.5; }
.ad-result-verdict { flex:0 0 auto; padding:4px 9px; border-radius:999px; color:#fff; font-size:9px; font-weight:850; letter-spacing:.1em; background:var(--ad-warn); }
.ad-result.good .ad-result-verdict { background:var(--ad-good); }
.ad-result.bad .ad-result-verdict { background:var(--ad-bad); }

@media (max-width:860px) {
  .ad-law { grid-template-columns:30px minmax(0,1fr) 40px; }
  .ad-law-rail { display:none; }
  .ad-law-detail { padding-left:42px; }
  .ad-score { font-size:74px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-studio-main *, .ad-studio-main *::before, .ad-studio-main *::after { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ── Phone and iPad pass ─────────────────────────────────────────────────────────────────────
   Fixes from the September 2026 responsive audit, one comment per finding. They sit at the end so
   they win at equal specificity, and each stays inside the band it was judged in. */

/* ad-studio-8: The module's smallest text is also its lightest. Field hints and foot hints (color-mix(in srgb, var(--muted) 76%, var(--rose)) on the paper card) reach only 4.2:1, law ids (color-mix(in srgb, var(--ink) 34%, var(--rose))) 4.0:1, the 'optional */
.ad-hint, .ad-foot-hint, .ad-law-id, .ad-or, .ad-field label em, .ad-gate em { color:var(--muted); }

@media (hover:hover) {
  /* ad-studio-11: All hover styles are unconditional. On touch devices a tap on the upload target or on 'Use a different file' opens the file picker without re-rendering that nod */
  .ad-step:hover:not(:disabled) { background:color-mix(in srgb, var(--cream) 70%, transparent); }
  .ad-swap:hover { border-color:var(--brown); color:var(--ink); }
  .ad-more:hover { border-color:var(--brown); background:color-mix(in srgb, var(--paper) 70%, transparent); }
  .ad-drop:hover { border-color:var(--brown); background:color-mix(in srgb, var(--rose) 9%, var(--cream)); }
  .ad-checks-line:hover { background:var(--paper); border-color:color-mix(in srgb, var(--brown) 26%, var(--rose)); }
  .ad-law:hover { background:color-mix(in srgb, var(--blush-soft) 27%, var(--cream)); }
  .ad-act:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:6px 6px 0 color-mix(in srgb, var(--brown) 34%, transparent); }
}

@media (max-width:1199px) {
  /* ad-studio-3: Every secondary control in the module is sized for a mouse pointer. The twelve channel pills are 28px tall with 7px gaps, 'Use a different file' is 30px, 'A few */
  .ad-pills { gap:8px; }
  .ad-pill { min-height:44px; padding:10px 15px; font-size:11.5px; }
  .ad-swap { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; font-size:11.5px; }
  .ad-more, .ad-checks-line { min-height:48px; }
  .ad-law { min-height:48px; }
  .ad-recent-row { min-height:48px; }
  /* ad-studio-10: Secondary text is set at desktop-monitor sizes and does not change at tablet or phone widths: field hints 10.5px, field labels 11px, result metadata (lift %, pa */
  .ad-hint, .ad-foot-hint, .ad-result small, .ad-gate, .ad-plan-row span, .ad-card-head small { font-size:12px; }
  .ad-field label, .ad-field-label { font-size:12px; }
  .ad-law-id { font-size:11px; }
}

@media (min-width:761px) and (max-width:899px) {
  /* ad-studio-5: The verdict hero only splits into score slab and verdict body from 900px. Now that the sidebar is hidden on iPad portrait, content is 704 to 767px wide, yet the */
  .ad-verdict { grid-template-columns:270px minmax(0,1fr); }
}

@media (orientation:landscape) and (max-height:480px) {
  /* ad-studio-9: At 812x375 the desktop-height topbar (86px) and the stepper (64px) leave a 225px scroll window. The intro alone (32px clamp h1 + 10px margin + a two-line 14px p */
  .ad-stepper { padding-top:10px; }
  .ad-sheet { padding-top:14px; }
  .ad-intro { margin:0 0 14px; }
  .ad-intro h1 { margin-bottom:6px; font-size:26px; }
  .ad-intro p { font-size:13px; }
  .ad-drop { padding:20px 24px; }
}

@media (max-width:760px) {
  /* ad-studio-1: The stepper is a flex row of four steps with min-width:132px inside an overflow-x:auto strip. On phones it overflows the viewport: 4x132 + 3x6 gap + 2x18 paddin */
  .ad-stepper { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; overflow:visible; padding-top:12px; }
  .ad-step { min-width:0; min-height:56px; flex-direction:column; justify-content:center; gap:5px; padding:8px 4px; font-size:11px; line-height:1.2; text-align:center; }
  /* ad-studio-4: On phones the text fields keep font-size 14px (inputs) and 13px (textarea) because the module's `.ad-field input` selector (0,1,1) out-specifies mobile.css's `i */
  .ad-field input, .ad-field textarea { font-size:16px; }
}

@media (max-width:560px) {
  /* ad-studio-2: After a photo is accepted, the confirmation card lays a 74px thumbnail, the file name and read note, and a nowrap 'Use a different file' pill in one flex row. A */
  .ad-uploaded { flex-wrap:wrap; gap:12px 14px; padding:12px; }
  .ad-uploaded-about { flex:1 1 140px; }
  .ad-swap { flex:1 1 100%; }
  /* ad-studio-6: The card head is a flex row with the serif h2 on the left and an 11px right-aligned note on the right. At phone widths the note claims 174 to 208px, so 'The twe */
  .ad-card-head { flex-direction:column; align-items:flex-start; gap:4px; }
  .ad-card-head small { text-align:left; }
  /* ad-studio-7: Each plan row puts an 11px label on the left and a right-aligned bold value on the right with space-between. At phone widths both sides wrap ('The number that / */
  .ad-plan-row { flex-direction:column; align-items:flex-start; gap:3px; padding:10px 0; }
  .ad-plan-row strong { text-align:left; }
}

/* From the second-pass review of Ad Studio. */
/* The drop-zone title no longer leaves one word alone on its second line at 375px. */
.ad-drop strong { text-wrap:balance; }
@media (max-width:1199px) {
  /* Status pills and the explanatory copy come up to the floors the first pass set for hints. */
  .ad-band, .ad-result-verdict { font-size:10px; }
  .ad-law-detail, .ad-why, .ad-untold span, .ad-note, .ad-read-note, .ad-drop small, .ad-score-note, .ad-uploaded-about small { font-size:12.5px; }
}
@media (max-width:932px) and (orientation:landscape) and (max-height:500px) {
  /* A landscape phone: 16px fields so Safari does not zoom on focus, and the notch insets honoured. */
  .ad-field input, .ad-field textarea { font-size:16px; }
  .ad-stepper, .ad-sheet { padding-left:max(32px,env(safe-area-inset-left,0px)); padding-right:max(32px,env(safe-area-inset-right,0px)); }
}