/* =====================================================================================================
   LOOK SAMPLES (not the default). The address chooses one: ?look=camp or ?look=shop. Without it the approved
   look in glass.css is untouched. Both samples keep every layout, control and behaviour; they change only type,
   colour, labels and the browser surfaces, following the anti-template checks in Anthropic's frontend-design skill,
   Impeccable (Paul Bakaus, Apache-2.0) and Taste Skill (Leonxlnx, MIT):
   - no tracked ALL-CAPS kicker above a heading (the step bar already says where you are);
   - no arrow tacked onto button text; labels in sentence case;
   - no Inter, no "premium" serif: one family per sample, chosen for this subject;
   - not the cream + serif + terracotta default: A returns to Vando's first green, B takes the van-build workshop;
   - text selection, caret, scrollbars and keyboard focus are themed, not browser defaults.
   A "camp"  Rubik (rounded, toy-like, Sims-friendly), quiet stone panes, campsite green for the one main action.
   B "shop"  Barlow + Barlow Semi Condensed (road-sign and number-plate lettering), aluminium panes, tape-measure
             yellow for the one main action; signature: sizes read like a tape measure.
   ===================================================================================================== */

/* ---------- shared: what both samples drop or theme ---------- */
html[data-look] .kicker{display:none!important}
html[data-look] .arrow{display:none!important}
html[data-look] .view-title strong,
html[data-look] #panel-content .eyebrow,
html[data-look] #panel-content h2:not(.my-designs h2),
html[data-look] .mm-cap,
html[data-look] .garage-dialog .eyebrow,
html[data-look] #panel-content label:has(input:not([type=checkbox]):not([type=radio])):not(.z1):not(.z2):not(.z3),
html[data-look] #panel-content label:has(select):not(.z1):not(.z2):not(.z3){font:var(--t-label)!important;letter-spacing:0!important;text-transform:none!important;color:var(--mut)!important}
html[data-look] #panel-content .eyebrow,html[data-look] .mm-head .mm-cap,html[data-look] .garage-dialog .eyebrow{color:var(--mut)!important}
html[data-look] .layers h3,html[data-look] .window-slots h2,html[data-look] .item-size dt,html[data-look] .credits-dialog h3{letter-spacing:0!important;text-transform:none!important;font:var(--t-label)!important;color:var(--mut)!important}
html[data-look] #panel-content .dg-lane{letter-spacing:0;text-transform:none}
html[data-look] .frameless-brand::after{letter-spacing:-.02em}
html[data-look] ::selection{background:var(--sel);color:var(--ink)}
html[data-look] input,html[data-look] textarea{caret-color:var(--acc-ink)}
html[data-look] #panel-content,html[data-look] .layers,html[data-look] .garage-dialog,html[data-look] .more-menu{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
html[data-look] :focus-visible,
html[data-look] #panel-content :focus-visible,
html[data-look] .garage-dialog :focus-visible,
html[data-look] #nav button:focus-visible,
html[data-look] .object-bar :focus-visible{outline:2px solid var(--focus)!important;outline-offset:2px!important}
html[data-look] .stepper output,html[data-look] .object-name small,html[data-look] #panel-content .dimension-readout span,html[data-look] .garage-dialog .van-size{font-variant-numeric:tabular-nums}

/* ---------- A: camp ---------- */
html[data-look=camp]{
  --sans:'Rubik',ui-sans-serif,system-ui,sans-serif;--serif:var(--sans);
  --ink:#1d2622;--muted:#56635c;--mut:#56635c;--paper:#f6f7f3;--line:rgba(29,38,34,.13);
  --green:#24574b;--mint:rgba(36,87,75,.12);--acc:#24574b;--acc-ink:#24574b;--on-acc:#f2f8f5;
  --g:rgba(250,251,248,.74);--gs:rgba(250,251,248,.88);--rim:rgba(29,38,34,.08);
  --chip:rgba(255,255,255,.55);--field:rgba(255,255,255,.8);--on:#ffffff;
  --on-sh:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(24,40,33,.12),0 6px 14px -6px rgba(24,40,33,.26);
  --sh:0 10px 28px -12px rgba(24,40,33,.26),0 1px 3px rgba(24,40,33,.06);
  --sel:rgba(36,87,75,.22);--scroll:rgba(29,38,34,.28);--focus:#24574b;
  --t-brand:700 23px/1 var(--sans);--t-title:600 24px/1.15 var(--sans);--t-name:600 16.5px/1.25 var(--sans);--t-head:600 15px/1.3 var(--sans);
  --t-body:400 14px/1.5 var(--sans);--t-tap:500 14px/1.3 var(--sans);--t-meta:400 12.5px/1.45 var(--sans);--t-label:500 12.5px/1.3 var(--sans);
}
html[data-look=camp][data-theme=dark]{
  --ink:#e9efec;--muted:#a3b0a9;--mut:#a3b0a9;--paper:#151a18;--line:rgba(255,255,255,.12);
  --green:#8cc7b0;--mint:rgba(140,199,176,.16);--acc:#8cc7b0;--acc-ink:#8cc7b0;--on-acc:#0f1d17;
  --g:rgba(20,25,23,.74);--gs:rgba(18,23,21,.88);--rim:rgba(255,255,255,.07);
  --chip:rgba(255,255,255,.06);--field:rgba(255,255,255,.07);--on:rgba(255,255,255,.14);
  --on-sh:0 1px 0 rgba(255,255,255,.12) inset,0 6px 14px -6px rgba(0,0,0,.6);--sh:0 10px 28px -12px rgba(0,0,0,.6);
  --sel:rgba(140,199,176,.3);--scroll:rgba(255,255,255,.25);--focus:#8cc7b0;
}
html[data-look=camp] body,html[data-look=camp] #app{font-family:var(--sans)}

/* ---------- B: shop ---------- */
html[data-look=shop]{
  --sans:'Barlow',ui-sans-serif,system-ui,sans-serif;--cond:'Barlow Semi Condensed','Barlow',ui-sans-serif,sans-serif;--serif:var(--cond);
  --ink:#15191c;--muted:#535b62;--mut:#535b62;--paper:#f2f4f5;--line:rgba(21,25,28,.14);
  --green:#8a6400;--mint:rgba(240,179,35,.18);--acc:#f0b323;--acc-ink:#8a6400;--on-acc:#15191c;
  --g:rgba(244,246,247,.76);--gs:rgba(246,247,248,.9);--rim:rgba(21,25,28,.09);
  --chip:rgba(255,255,255,.55);--field:rgba(255,255,255,.82);--on:#ffffff;
  --on-sh:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(20,26,30,.14),0 6px 14px -6px rgba(20,26,30,.28);
  --sh:0 10px 28px -12px rgba(20,26,30,.3),0 1px 3px rgba(20,26,30,.07);
  --sel:rgba(240,179,35,.4);--scroll:rgba(21,25,28,.3);--focus:#15191c;
  --t-brand:700 25px/1 var(--cond);--t-title:600 26px/1.1 var(--cond);--t-name:600 18px/1.2 var(--cond);--t-head:600 15.5px/1.3 var(--sans);
  --t-body:400 14.5px/1.5 var(--sans);--t-tap:500 14.5px/1.3 var(--sans);--t-meta:400 13px/1.4 var(--sans);--t-label:600 13px/1.3 var(--cond);
}
html[data-look=shop][data-theme=dark]{
  --ink:#eef1f3;--muted:#9ba4ac;--mut:#9ba4ac;--paper:#121518;--line:rgba(255,255,255,.12);
  --green:#f0b323;--mint:rgba(240,179,35,.16);--acc:#f0b323;--acc-ink:#f0b323;--on-acc:#15191c;
  --g:rgba(22,26,29,.76);--gs:rgba(20,23,26,.9);--rim:rgba(255,255,255,.07);
  --chip:rgba(255,255,255,.06);--field:rgba(255,255,255,.07);--on:rgba(255,255,255,.14);
  --on-sh:0 1px 0 rgba(255,255,255,.12) inset,0 6px 14px -6px rgba(0,0,0,.6);--sh:0 10px 28px -12px rgba(0,0,0,.6);
  --sel:rgba(240,179,35,.35);--scroll:rgba(255,255,255,.25);--focus:#f0b323;
}
html[data-look=shop] body,html[data-look=shop] #app{font-family:var(--sans)}
/* yellow is a fill, never a text colour on a light pane: chosen states are a yellow chip with dark words */
html[data-look=shop] #nav button.active{background:var(--acc)!important;color:var(--on-acc)!important;box-shadow:0 2px 6px -2px rgba(20,26,30,.3)!important}
html[data-look=shop] #nav button.active i{color:var(--on-acc)!important}
html[data-look=shop] .step-next{background:var(--acc);color:var(--on-acc);border-color:transparent;font-weight:600}
html[data-look=shop] .garage-example{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:3px;text-underline-offset:4px}
html[data-look=shop] #panel-content .colour-tools>button.active,html[data-look=shop] #panel-content .colour-tools>.custom-colour.active{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)!important}
html[data-look=shop][data-input=mouse] .view-tools button.active{background:var(--acc);color:var(--on-acc)}
/* signature: every size reads like a tape measure (millimetre ticks, a longer tick each 5) */
html[data-look=shop] .object-name small,
html[data-look=shop] .stepper output,
html[data-look=shop] #panel-content .dimension-readout span{
  font:600 12.5px/1 var(--cond)!important;color:#15191c!important;letter-spacing:.01em;
  background:
    repeating-linear-gradient(90deg,rgba(21,25,28,.6) 0 1px,transparent 1px 5px) left top/100% 3px no-repeat,
    repeating-linear-gradient(90deg,rgba(21,25,28,.7) 0 1px,transparent 1px 25px) left top/100% 6px no-repeat,
    #f0b323!important;
  padding:8px 7px 4px!important;border-radius:3px!important;border:0!important;display:inline-block}
html[data-look=shop] .object-name small{margin-top:4px}

/* ---------- shared: the trip results page and the build checks ---------- */
html[data-look] #analysis-view h1,html[data-look] #analysis-view h2,html[data-look] #analysis-view h3,html[data-look] #analysis-view strong{font-family:var(--serif)!important;letter-spacing:0}
html[data-look] #analysis-view,html[data-look] #analysis-view p,html[data-look] #analysis-view td,html[data-look] #analysis-view th{font-family:var(--sans)}
html[data-look] #analysis-view td,html[data-look] #analysis-view .metric-strip strong{font-variant-numeric:tabular-nums}
/* a check is a quiet tinted card; its level is the coloured dot in the group heading, not a thick bar down its side */
html[data-look] .check{border:1px solid var(--line)!important;border-radius:12px;background:var(--chip)}
html[data-look] .check.fix{background:color-mix(in srgb,#c0473a 7%,var(--chip))}
html[data-look] .check.check{background:color-mix(in srgb,#d4a23a 9%,var(--chip))}
html[data-look] .notice,html[data-look] .support-note{border-left:0!important;border-radius:12px}