/* Skin for the uw-base family of demo sites (cambre, wa, andor, asbury, ccsls, clc, lou, uw, duke, 603, aww, fb, fh, fl).
   Those pages share one dark theme built on CSS variables (--cream text on --espresso ground, Cormorant headings).
   This skin flips them onto the demos.lawdie.co design: warm ground, dark ink, Playfair headings, frosted surfaces,
   the segmented module switch. It only re-maps variables and restyles the page chrome; the simulated app frames
   (Outlook, Clio, browser mockups inside #stage) keep their own product colours on purpose.
   Loaded after the page's own styles, so plain selectors win on specificity ties; !important only where the base uses it. */

:root {
  /* ground and ink: the dark theme's names, the hub's values */
  --espresso0: #f3ede4;
  --espresso: #f9f6f2;
  --espresso2: #f4efe7;
  --espresso3: #ece4d8;
  --cream: #3D3731;
  --cream2: #5F544A;
  --cream-soft: rgba(61, 55, 49, .62);
  --cream-dim: rgba(61, 55, 49, .42);
  --ink: #3D3731;
  --ink-soft: rgba(61, 55, 49, .55);
  --hairline-dark: rgba(107, 81, 56, .16);
  --hairline-light: rgba(107, 81, 56, .16);
  /* accent: the firm's own hue stays (set by the page); brighten/soften map to the hub's sand */
  --accent-bright: var(--accent, #6B5138);
  --accent-soft: rgba(201, 168, 118, .22);
  --amber: var(--accent, #6B5138);
  --amber-bright: var(--accent, #6B5138);
  --amber-soft: rgba(201, 168, 118, .22);
  --green: #4F6F4C;
  --green-soft: rgba(94, 139, 90, .14);
  --red: #A8402F;
  --red-soft: rgba(168, 64, 47, .12);
  /* type */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html { background: var(--ground, #f9f6f2); color-scheme: light; }
body { background: var(--ground, #f9f6f2) !important; color: var(--ink) !important; font-family: var(--sans); -webkit-font-smoothing: antialiased; }

/* drifting light fields, as on the hub */
body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; animation: ld-drift 15s ease-in-out infinite alternate; }
body::before { top: -28vmax; left: -16vmax; height: 72vmax; width: 72vmax; background: radial-gradient(closest-side, rgba(139,92,42,.16), rgba(107,81,56,0) 70%); }
body::after { bottom: -26vmax; right: -14vmax; height: 66vmax; width: 66vmax; background: radial-gradient(closest-side, rgba(199,154,75,.20), rgba(201,168,118,0) 70%); animation-delay: -8s; }
@keyframes ld-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vmax,-3vmax,0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

/* headings */
h1, h2, h3, .display, .sec-head .display, #stageTitle { font-family: var(--serif); color: var(--ink); letter-spacing: -.01em; }
h1 em, .display em { font-style: normal; color: var(--accent, #6B5138); }
.eyebrow, .kicker, .lbl, .tlab, .vert-lbl, .sec-label { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8B7355); }

/* site navigation (the pitch pages show it; the 603 builds hide it) */
#nav { background: linear-gradient(180deg, rgba(249,246,242,.92), rgba(249,246,242,.72)) !important; border-bottom: 1px solid var(--hairline-dark) !important;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: var(--ink) !important; box-shadow: none !important; }
#nav a, #nav button { color: var(--ink) !important; }
#nav .btn, #nav a.btn { background: var(--accent, #6B5138) !important; color: #fff !important; border-radius: 12px !important; }
#nav svg, #nav img { filter: none; }
html.embed-mode #nav, html.embed-mode #top, html.embed-mode #kiwiBuddy { display: none !important; }

/* the demo section and its grid */
#demo { background: transparent !important; }
#demo .wrap { max-width: 1400px; }
.demo-grid { gap: 14px; }
#demoIntro, #modeHint, #inboxNote { color: var(--cream-soft); }

/* module switch: frosted segmented control */
.vert-bar { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.7) !important; background: rgba(255,255,255,.55) !important;
  box-shadow: 0 1px 2px rgba(31,31,31,.04), 0 4px 12px rgba(61,55,49,.05), inset 0 1px 0 rgba(255,255,255,.9) !important; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); max-width: 100%; }
.vert-btn .vnum, .vert-btn .num, .vert-btn i { color: var(--cream-dim) !important; }
.vert-btn { font-family: var(--sans); font-weight: 500; color: var(--muted, #8B7355) !important; background: transparent !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; }
.vert-btn:hover { color: var(--ink) !important; }
.vert-btn.active, .vert-btn[aria-selected="true"] { background: rgba(255,255,255,.95) !important; color: var(--accent, #6B5138) !important;
  box-shadow: 0 1px 2px rgba(31,31,31,.06), 0 6px 16px -8px rgba(61,55,49,.3), inset 0 1px 0 #fff !important; }
.vert-btn .vsub { color: var(--cream-dim); }

/* Today / Lawdie mode switch */
.mode-switch { border-radius: 999px !important; border: 1px solid rgba(255,255,255,.7) !important; background: rgba(255,255,255,.55) !important;
  box-shadow: 0 1px 2px rgba(31,31,31,.04), 0 4px 12px rgba(61,55,49,.05), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.mode-btn { border-radius: 999px !important; color: var(--muted, #8B7355) !important; }
.mode-btn.active, .mode-btn[aria-pressed="true"], .mode-btn.on { background: rgba(255,255,255,.95) !important; color: var(--accent, #6B5138) !important; box-shadow: 0 1px 2px rgba(31,31,31,.06), 0 6px 16px -8px rgba(61,55,49,.3) !important; }
.mode-switch .thumb, .mode-switch .knob, .mode-thumb { background: rgba(255,255,255,.95) !important; box-shadow: 0 1px 2px rgba(31,31,31,.06), 0 6px 16px -8px rgba(61,55,49,.3) !important; border-radius: 999px !important; }
/* some sites patch the switch late in <body> with !important (dark thumb, white labels): out-specify them */
html body #demo .mode-switch, html body .mode-switch { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.7) !important; border-radius: 999px !important; padding: 4px !important; }
html body .mode-switch .thumb, html body .mode-switch .mode-thumb, html body .mode-switch [class*="thumb"], html body .mode-switch [class*="pill"] { background: rgba(255,255,255,.96) !important; border-radius: 999px !important; box-shadow: 0 1px 2px rgba(31,31,31,.06), 0 6px 16px -8px rgba(61,55,49,.3) !important; }
html body .mode-switch .mode-btn { color: var(--cream-soft) !important; border-radius: 999px !important; }
html body .mode-switch .mode-btn .mb-sub { color: var(--cream-dim) !important; opacity: 1 !important; }
html body .mode-switch[data-mode="learn"] .mode-btn[data-m="learn"], html body .mode-switch[data-mode="lawdie"] .mode-btn[data-m="lawdie"] { color: var(--accent, #6B5138) !important; }
html body .mode-switch[data-mode="learn"] .mode-btn[data-m="learn"] .mb-sub, html body .mode-switch[data-mode="lawdie"] .mode-btn[data-m="lawdie"] .mb-sub { color: rgba(107,81,56,.7) !important; }
/* overview tiles (andor, asbury, lou): frosted, not the dark band */
html body .ov { background: transparent !important; }
html body .ov-grid { gap: 12px; }
html body .ov-tile { border: 1px solid rgba(255,255,255,.7) !important; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.60) 50%, rgba(255,255,255,.76)) !important;
  box-shadow: 0 1px 2px rgba(31,31,31,.04), 0 4px 12px rgba(61,55,49,.05), inset 0 1px 0 rgba(255,255,255,.9) !important; color: var(--ink) !important; border-radius: 16px !important; }
html body .ov-tile:hover, html body .ov-tile.active, html body .ov-tile[aria-pressed="true"] { box-shadow: 0 2px 4px rgba(31,31,31,.04), 0 18px 40px -18px rgba(61,55,49,.35), inset 0 1px 0 rgba(255,255,255,.95) !important; transform: translateY(-2px); }
html body .ov-tile .ov-n { color: var(--accent, #6B5138) !important; font-family: var(--mono); }
html body .ov-tile .ov-t, html body .ov-tile b, html body .ov-tile strong { color: var(--ink) !important; }
html body .ov-tile .ov-s, html body .ov-tile small, html body .ov-tile .ov-time { color: var(--cream-dim) !important; }
html body .ov-eyebrow { color: var(--muted, #8B7355) !important; }
html body .ov-title { color: var(--ink) !important; font-family: var(--serif); }
/* the two mode buttons and their sublabels: ink on the frosted track, accent on the white thumb, never cream-on-white */
.mode-switch button, #modeLearnBtn, #modeLawdieBtn { color: var(--cream-soft) !important; background: transparent !important; }
.mode-switch button *, #modeLearnBtn *, #modeLawdieBtn * { color: inherit !important; opacity: 1; }
.mode-switch button.active, .mode-switch button[aria-pressed="true"], .mode-switch button.on, #modeLearnBtn.active, #modeLawdieBtn.active, #modeLearnBtn[aria-pressed="true"], #modeLawdieBtn[aria-pressed="true"] { color: var(--accent, #6B5138) !important; }
.mode-switch button small, .mode-switch button .sub, .mode-switch button span:last-child { color: var(--cream-dim) !important; }

/* inbox column and the stage: frosted glass */
#inboxHead, #inboxList, .inbox, .mail-col, .demo-frame, .stage, #stage, .learn-watch, .lf, .card, .panel {
  border: 1px solid rgba(255,255,255,.6); background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.60) 50%, rgba(255,255,255,.76));
  box-shadow: 0 1px 2px rgba(31,31,31,.04), 0 4px 12px rgba(61,55,49,.05), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); color: var(--ink); }
.demo-frame { border-radius: 20px; }
.stage, #stage { border-radius: 16px; overflow: hidden; }
.rail { border-bottom: 1px solid var(--hairline-dark); }
.rail .step, .rail .dot { color: var(--cream-dim); }
.rail .step.on, .rail .step.done, .rail .dot.on { color: var(--accent, #6B5138); }
.mi, .mail-item { border-color: var(--hairline-dark) !important; color: var(--ink); }
.mi.active, .mail-item.active, .mi.on { background: rgba(201,168,118,.18) !important; }
.mi .sj, .mi .nm { color: var(--ink); }
.mi .tm, .mi .fr { color: var(--cream-dim); }
.lf-time b { color: var(--accent, #6B5138) !important; }

/* buttons */
.btn, button.btn, a.btn { border-radius: 12px !important; font-family: var(--sans); font-weight: 600; }
.btn.primary, .btn-primary, .btn.solid { background: var(--accent, #6B5138) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 24px -12px rgba(86,65,44,.7), inset 0 1px 0 rgba(255,255,255,.18) !important; }
.btn.ghost, .btn.outline, .btn.secondary, #pauseBtn, #replayBtn { background: rgba(255,255,255,.75) !important; color: var(--accent, #6B5138) !important; border: 1px solid rgba(107,81,56,.2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important; }
#dropBtn { background: rgba(255,255,255,.75) !important; color: var(--accent, #6B5138) !important; border: 1px dashed rgba(107,81,56,.35) !important; border-radius: 12px !important; }

/* pills, tags, badges */
.tag, .pill, .badge, .chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.72); color: #6F6154; }
.tag.ok, .pill.ok, .badge.ok, .tag.live, .pill.live { color: var(--green); background: var(--green-soft); border-color: rgba(94,139,90,.22); }
.tag.hold, .pill.hold, .badge.hold, .tag.red, .pill.red { color: var(--red); background: var(--red-soft); border-color: rgba(168,64,47,.2); }

/* the pitch-page sections (fb, fh, fl, aww): warm ground, ink text, frosted cards */
#top, #statement, #race, #lands, #security, #book, section, footer { background: transparent !important; color: var(--ink); }
#top h1, #statement h2, #race h2, #lands h2, #security h2, #book h2 { color: var(--ink); }
.card, .land, .step-card, .feature, .quote { border-radius: 20px; }
footer, .foot { color: var(--muted, #8B7355); border-top: 1px solid var(--hairline-dark); }
hr { border-color: var(--hairline-dark); }

/* the kiwi helper bubble */
#kiwiSay, #kiwiText { background: rgba(255,255,255,.9); color: var(--ink); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 4px 12px rgba(61,55,49,.08); border-radius: 14px; }

/* focus and selection */
:focus-visible { outline: 2px solid var(--sand, #C9A876); outline-offset: 2px; }
::selection { background: rgba(201,168,118,.35); }

/* small screens: the module switch scrolls, the grid stacks */
@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr !important; }
  .vert-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vert-bar::-webkit-scrollbar { display: none; }
  .mode-switch .mode-btn { min-width: 0 !important; }
}