/* Earl's working look, the product's copy of docs/mockups/earl.css (2026-09-16):
   the palette and type in docs/BRAND.md made into the parts every screen is
   built from. The mockup's file is the sketch; this one is what ships, and
   the two are kept the same by hand when the look changes. Only the image
   paths differ: the dashboard serves the brand images at /brand/. */

/* ---------- Tokens ---------- */
:root{
  --ground:#E9EEEC;
  --surface:#FFFFFF;
  --surface-2:#F4F7F6;
  --ink:#222127;
  --ink-2:#5A5E62;
  --line:#D6DDDA;
  --accent:#1B6B67;
  --accent-hover:#155955;
  --accent-ink:#FFFFFF;
  --accent-soft:#D8EDEA;
  --brass:#A87A2E;
  --brass-soft:#F5E6C3;
  --good:#2C7436;
  --good-soft:#DCEFD8;
  --warn:#8E5400;
  --warn-soft:#FBEACB;
  --focus:#1B6B67;
  --shadow:0 1px 2px rgba(20,30,28,.06),0 8px 24px rgba(20,30,28,.07);
  --lift:0 2px 6px rgba(20,30,28,.10),0 22px 60px rgba(20,30,28,.20);
  --display:"Gabarito","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --scrim:#E9EEEC;
  --panel-mix:89%;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#131417;--surface:#1D1E22;--surface-2:#24262A;--ink:#ECEAE4;--ink-2:#A3A7AA;--line:#34373C;
    --accent:#5DC0B8;--accent-hover:#7ACFC8;--accent-ink:#0C1D1B;--accent-soft:#1B3533;
    --brass:#DDB064;--brass-soft:#352B18;--good:#7FCB87;--good-soft:#1C3120;--warn:#EDB35A;--warn-soft:#382B15;
    --focus:#5DC0B8;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
    --lift:0 2px 6px rgba(0,0,0,.4),0 22px 60px rgba(0,0,0,.5);
    --scrim:#0D0E11;--panel-mix:87%;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#131417;--surface:#1D1E22;--surface-2:#24262A;--ink:#ECEAE4;--ink-2:#A3A7AA;--line:#34373C;
  --accent:#5DC0B8;--accent-hover:#7ACFC8;--accent-ink:#0C1D1B;--accent-soft:#1B3533;
  --brass:#DDB064;--brass-soft:#352B18;--good:#7FCB87;--good-soft:#1C3120;--warn:#EDB35A;--warn-soft:#382B15;
  --focus:#5DC0B8;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --lift:0 2px 6px rgba(0,0,0,.4),0 22px 60px rgba(0,0,0,.5);
  --scrim:#0D0E11;--panel-mix:87%;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--ground);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3,p,ul,ol{margin:0}
[hidden]{display:none !important}

/* ---------- Earl's desk, behind everything ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ground)}
.scene-layer{
  position:absolute;inset:0;
  background-repeat:no-repeat;background-size:cover;
  background-position:64% 32%;              /* keeps Earl in frame */
  transition:opacity .5s ease,filter .5s ease,transform .5s ease;
}
/* One scene for both themes: the room is lamp-lit either way. The source is
   1408px wide, so that is the largest size served. */
.scene-layer{--jpg:url("/brand/earl/web/earl-cat-desk-1024.jpg"); --set:image-set(url("/brand/earl/web/earl-cat-desk-1024.webp") type("image/webp"),url("/brand/earl/web/earl-cat-desk-1024.jpg") type("image/jpeg"))}
@media (min-width:1025px){
  .scene-layer{--jpg:url("/brand/earl/web/earl-cat-desk-1408.jpg"); --set:image-set(url("/brand/earl/web/earl-cat-desk-1408.webp") type("image/webp"),url("/brand/earl/web/earl-cat-desk-1408.jpg") type("image/jpeg"))}
}
.scene-layer{background-image:var(--jpg)}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .scene-layer{background-image:var(--set)}
}

/* No wash over Earl. He stays a person in the room, not a backdrop: anything
   laid on top of him carries its own frosted backing instead. The scrim stays
   for the one case that still needs it, a phone, where the panel and the
   illustration have to share a very narrow screen. */
.scrim{position:absolute;inset:0;background:none;transition:background .5s ease}
@media (max-width:880px){
  .scene-layer{background-position:66% 10%}
  .scrim{background:linear-gradient(to bottom,
      transparent 0%,transparent 28%,
      color-mix(in srgb,var(--scrim) 26%,transparent) 42%,
      color-mix(in srgb,var(--scrim) 78%,transparent) 54%,var(--scrim) 66%)}
}

@media (prefers-reduced-motion:reduce){.scene-layer,.scrim{transition:none}}

/* ---------- Page frame ---------- */
.page{position:relative;z-index:1;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;gap:22px;padding:18px clamp(16px,4vw,48px) 22px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
/* No logo. Wherever a logo would go, write the word "Earl". */
.wordmark{font:800 26px/1 var(--display);letter-spacing:-.015em;text-decoration:none;color:var(--ink)}
/* Anything that sits on top of the illustration carries its own frosted
   backing, so it can be read without dimming Earl behind it. */
.over{border-radius:12px;
  background:color-mix(in srgb,var(--surface) 74%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .over{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .over{background:color-mix(in srgb,var(--surface) 92%,transparent)}
}
.top .wordmark{padding:7px 13px}
.top nav{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:3px}
.nav-link{font-size:15px;font-weight:700;color:var(--ink-2);text-decoration:none;padding:7px 11px;border-radius:9px}
.nav-link:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 85%,transparent)}
.trail .nav-link{padding:0;background:none;font:inherit;text-decoration:none}
.trail .nav-link:hover{color:var(--ink);background:none;text-decoration:underline}
main{display:flex;justify-content:flex-start;min-height:0}
@media (max-width:880px){
  .page{gap:14px}
  .panel{gap:18px}
}

/* ---------- The panel the work sits in ---------- */
.panel{
  width:100%;max-width:var(--panel-w,620px);margin-top:auto;
  background:color-mix(in srgb,var(--surface) var(--panel-mix),transparent);
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
  border-radius:20px;box-shadow:var(--lift);
  padding:clamp(22px,3.2vw,32px);
  display:grid;gap:22px;
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .panel{-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .panel{background:var(--surface)}
}
/* Stage 1, the front door: a band across the bottom, the desk in full view. */
body[data-stage="door"] .panel{--panel-w:100%}
/* Stage 2: up and over to the left, now that there is more to show. */
body[data-stage="work"] .panel{--panel-w:min(840px,100%)}
/* Stage 3: it needs another layer of space, so it takes it over the desk. */
body[data-stage="full"] .panel{--panel-w:min(1180px,100%)}

/* The move between stages, played on arrival: in from the right and below. */
@keyframes settle{from{opacity:0;transform:translate(26px,42px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
body[data-stage="door"] .panel{animation:rise .45s cubic-bezier(.22,.7,.3,1) both}
body[data-stage="work"] .panel,
body[data-stage="full"] .panel{animation:settle .5s cubic-bezier(.22,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){.panel{animation:none !important}}

/* ---------- Type ---------- */
h1{font:800 clamp(30px,4.2vw,45px)/1.08 var(--display);letter-spacing:-.02em;text-wrap:balance}
h1 .ask{color:var(--accent);display:block}
h2{font:800 clamp(22px,3vw,30px)/1.15 var(--display);letter-spacing:-.015em;text-wrap:balance}
h3{font:700 17px/1.25 var(--display)}
.eyebrow{font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.subhead{font-size:17px;color:var(--ink-2);max-width:48ch}
.subhead b{color:var(--ink);font-weight:700}
.small{font-size:14px;color:var(--ink-2)}
.address{font:14px var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.head{display:grid;gap:7px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:11px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:700 16px/1 var(--display);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--accent);border-color:var(--accent)}
.btn-quiet{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-quiet:hover{background:color-mix(in srgb,var(--surface) 70%,transparent);border-color:var(--ink-2)}
.btn-small{min-height:40px;padding:0 14px;font-size:15px;border-radius:9px}
.row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.row-end{justify-content:flex-end}
.row-between{justify-content:space-between}

/* ---------- Fields ---------- */
.field{display:flex;flex-wrap:wrap;gap:10px}
.field-url{flex:1 1 15rem;min-width:0;display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:0 12px;min-height:52px}
.field-url:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.field-url .scheme{font:14px var(--mono);color:var(--ink-2);user-select:none}
.field-url input{flex:1;min-width:0;border:0;background:transparent;font:16px var(--mono);padding:10px 0}
.field-url input:focus-visible{outline:0}
.field-text{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px 12px}
.field-text:focus-visible{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
label.lead{font:700 19px/1.2 var(--display)}
.note{font-size:14px;color:var(--ink-2);min-height:1.4em}
.note.is-error{color:var(--brass);font-weight:700}

/* ---------- Small pieces ---------- */
.tick{flex:none;width:17px;height:17px;color:var(--good)}
.promises{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--ink-2)}
.promises li{display:flex;align-items:center;gap:7px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font:500 11px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.pill-good{background:var(--good-soft);color:var(--good)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-accent{background:var(--accent-soft);color:var(--accent)}
.tag{font:500 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 6px;border-radius:4px}

/* Earl speaking. His name always carries the AI tag. */
.said{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;align-items:start}
.said-top{padding-top:20px;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.avatar{width:48px;height:48px;border-radius:50%;display:block;box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 90%,transparent)}
.who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:3px}
.who strong{font:700 16px/1.2 var(--display)}
.said p{font-size:15px;color:var(--ink-2);max-width:58ch}
.said p.plain{color:var(--ink)}

/* Cards */
.card{border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:13px;padding:15px 16px;background:color-mix(in srgb,var(--surface) 70%,transparent);display:grid;gap:9px}
.card-warn{background:var(--warn-soft);border-color:transparent}

/* Steps */
.steps{list-style:none;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:15px;color:var(--ink-2)}
.steps li:first-child{border-top:0}
.steps li[data-state="done"]{color:var(--ink)}
.steps li[data-state="now"]{color:var(--ink);font-weight:700}
.steps li[data-state="next"]{opacity:.42}
.steps time{font:12px var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.mark{width:20px;height:20px;display:grid;place-items:center}
.mark svg{width:18px;height:18px}
.steps li[data-state="done"] .mark{color:var(--good)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.steps li[data-state="now"] .dot{background:var(--accent);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){.steps li[data-state="now"] .dot{animation:none}}

/* Progress */
.bar{height:7px;border-radius:4px;background:color-mix(in srgb,var(--line) 85%,transparent);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--accent);width:10%;transition:width .8s ease}

/* ---------- Footer and the mockup's own controls ---------- */
.foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--ink-2)}
.foot .over{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding:6px 13px}
.foot .wordmark{font-size:18px}
.controls{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:5px 5px 5px 12px;font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.seg{display:inline-flex;padding:3px;border-radius:9px;background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid color-mix(in srgb,var(--line) 75%,transparent);gap:2px}
.seg button{border:0;background:transparent;padding:6px 10px;border-radius:7px;font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.14)}

/* Where we are in the flow */
.trail{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.trail b{color:var(--ink);font-weight:500}
.trail span[aria-hidden]{opacity:.5}