/* Look layer for the test demo: the same three looks as the homepage (Soft, Midway, Green).
   In this file --cream is the card/surface colour and --page is the page colour. */
:root, html[data-palette="mid"] {
  --page: #FDF9EC; --cream: #FFFEF9; --card: var(--cream); --yellow: #FADB6E; --sun: var(--yellow); --butter: #FDE487; --leaf: #C7EACC; --green: #65C289; --lime: #E4F1B0; --mint: #DDF4E2;
  --forest: #2E7252; --deep: #2E7252; --ink: #193324; --edge: #223F32; --mute: #536C5E; --bloom: #FAB2B4; --sand: #F3E7CF;
  --line: 2.5px solid var(--edge); --sh: 4px 4px 0 var(--edge); --sh-lg: 6px 6px 0 var(--edge);
  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif; --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-hand: 'Caveat', 'Comic Sans MS', cursive;
  --r-lg: 30px; --r-md: 20px;
}
html[data-palette="green"] {
  --page: #C9F7D1; --cream: #FFFEF7; --yellow: #FFD84A; --butter: #FFE45C; --leaf: #B4EEC3; --green: #3DBE72; --lime: #DDF58E; --mint: #DDFBE3;
  --forest: #1F7A4D; --deep: #14301F; --ink: #10261A; --edge: #10261A; --mute: #3F5C4B; --bloom: #FFA9B8;
  --line: 3px solid var(--edge); --sh: 5px 5px 0 var(--edge); --sh-lg: 7px 7px 0 var(--edge);
}
body { background: var(--page); font-family: var(--font-body); color: var(--ink); }
h1, h2, h3, .qtext, .msg, .price, .offer b { text-transform: none; letter-spacing: -0.025em; font-weight: 800; line-height: 1.05; }
h1 { font-size: clamp(34px, 6vw, 60px); } h2 { font-size: clamp(28px, 4.4vw, 44px); } h3 { font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.015em; }
.qtext { font-size: clamp(24px, 4.4vw, 36px); } .msg { font-size: clamp(24px, 4.6vw, 36px); }
.scale .opt { font-family: var(--font-display); font-weight: 800; } .tcard .num { font-weight: 800; }
.eyebrow { color: var(--deep); }
.small { color: var(--mute); }
.btn { box-shadow: var(--sh); transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: var(--sh-lg); }
.btn-dark { background: var(--deep); color: #FFFEF9; }
.btn-light, .btn-yellow { box-shadow: var(--sh); } .btn-sm { box-shadow: var(--sh); }
.chip, .tag { border-color: var(--edge); } .tag { background: var(--deep); color: #FFFEF9; }
.appbar { background: var(--yellow); border-bottom: var(--line); }
.logo { position: relative; background: var(--card); border: var(--line); border-radius: 16px; overflow: visible; padding: 7px 14px; gap: 5px; box-shadow: var(--sh); font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; text-transform: capitalize; }
.logo::before { content: ''; position: absolute; left: 50%; top: -12px; width: 34px; height: 12px; transform: translateX(-50%); background: var(--yellow); border: var(--line); border-bottom: none; border-radius: 8px 8px 0 0; }
.logo .l1, .logo .l2 { background: none; color: var(--ink); padding: 0; } .logo .l1 { color: var(--deep); }
.card { border-radius: 30px; } .opt { border-radius: 20px; } .opt.on { background: var(--butter); }
.progress > span { border-right-color: var(--edge); }
.state { background: var(--leaf); } .state.todo { background: var(--butter); }
.checks li::before { background: var(--green); }
.tcard, .rep, .pick { border-radius: 26px; }
.notfault, .card.yellow { background: var(--butter); }
.demo-tools { border-color: var(--mute); }
@media (max-width: 520px) { .appbar .logo { font-size: 14px; padding: 6px 11px; } .appbar .logo::before { width: 28px; top: -11px; } }

/* the colour theme switch in the app bar */
.bar-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: var(--line); border-radius: 999px; background: var(--card); }
.theme-switch button { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: transparent; cursor: pointer; display: grid; place-items: center; min-height: 0; }
.theme-switch button::after { content: ''; position: absolute; inset: -9px -2px; }
.theme-switch i { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--edge); }
.theme-switch [data-p="mid"] i { background: linear-gradient(135deg, #DDF4E2 50%, #FADB6E 50%); }
.theme-switch [data-p="green"] i { background: linear-gradient(135deg, #C9F7D1 50%, #3DBE72 50%); }
html[data-palette="mid"] .theme-switch [data-p="mid"], html[data-palette="green"] .theme-switch [data-p="green"] { border-color: var(--edge); background: var(--butter); }
.theme-switch button { box-sizing: border-box; width: 26px; height: 26px; min-width: 0; min-height: 0; }
@media (max-width: 480px) { .theme-switch button { width: 24px; height: 24px; } }