/* Lady Liberty — ladyliberty.ai
   Design system v2 (Elijah, 9/26). Clean product UI on a white ground, Inter
   throughout, soft-shadowed cards — with the living city and Liberty worked into
   the hero. No frameworks.

   THE LIVING CITY is four SVG layers plus her:
     .sun        sun.svg     — the sun in the corner, statically drawn
     .clouds     clouds.svg  — three clouds crossing on SMIL — the slowest clock
     .city-far   skyline.svg — the distant city, statically drawn
     .city-move  scene.svg   — the same city with SMIL inside it: four cars
                               driving the street at 17–62s and gulls bobbing
     .mascot-art Liberty herself, standing ON the street line
   She stands on that line because the street sits 32 of the scene's 520 units up
   from its bottom and the scene spans 100% of the hero width — so the ground
   line is always 2% of the hero width above the hero's bottom. That is the 2vw
   in .mascot-art: it keeps her feet planted at every viewport width instead of
   drifting as the city rescales.

   Palette note: --blue and --red are the brand's civic blue and Old Glory red and
   are asserted verbatim by site_check.py. Do not "correct" them. */

/* The hidden attribute must always win: the account forms/cards toggle with it,
   and display rules (e.g. .auth-form { display: grid }) would otherwise override
   the UA default and leak both the signup and login fields onto the page. */
[hidden] { display: none !important; }

:root {
  /* --- palette --- */
  --paper: #FFFFFF;
  --paper-2: #F3F5F9;        /* secondary surface — bands, chips, inputs */
  --ink: #0B0D10;
  --soft: #4A5260;
  --faint: #6B7280;
  --line: #E7E9EE;
  --line-2: #F1F3F6;
  --blue: #4B9CD3;           /* light blue — American civic accent */
  --blue-deep: #2C6A9E;      /* readable blue for links and labels */
  --blue-soft: #EAF3FA;      /* pale blue wash */
  --red: #B31942;            /* old glory red — secondary accent */
  --red-soft: #FBECEF;
  --navy: #1A2B4A;           /* ask-bar send circle — Elijah's 10/1 reference */
  --navy-hover: #14213B;
  --dark: #08090B;
  --dark-line: rgba(255,255,255,.10);
  /* --- form --- */
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(11,13,16,.05), 0 1px 3px rgba(11,13,16,.04);
  --shadow-lg: 0 14px 40px rgba(11,13,16,.10);
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Account-settings gear — one icon, every dashboard (Elijah 10/7). */
.gearBtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line, #e4e4e1); background: #fff; color: #555; text-decoration: none; flex: 0 0 auto; }
.gearBtn:hover { color: #111; border-color: #c9c9c4; }
.nav-inner .gearBtn { margin-left: 10px; }

/* Profile pictures (Elijah 10/7). */
.avaRow { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; }
.avaWrap { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #f1f1ee; border: 1px solid var(--line, #e4e4e1); display: flex; align-items: center; justify-content: center; color: #b9b9b3; flex: 0 0 auto; }
.avaWrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avaBtns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Crop before saving — profile pictures (Elijah 10/7). */
.cropOverlay { position: fixed; inset: 0; z-index: 120; background: rgba(11,13,16,.58); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cropOverlay[hidden] { display: none; }
.cropCard { background: #fff; border-radius: 16px; padding: 18px; width: min(400px, 100%); box-shadow: var(--shadow-lg, 0 14px 40px rgba(11,13,16,.10)); }
.cropTitle { font-size: 17px; margin-bottom: 4px; }
.cropSub { margin-bottom: 12px; }
.cropStage { position: relative; width: min(100%, 56vh); aspect-ratio: 1 / 1; margin: 0 auto 12px; border-radius: 12px; overflow: hidden; background: #eceae5; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cropStage:active { cursor: grabbing; }
.cropStage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; -webkit-user-drag: none; }
.cropZoom { width: 100%; margin: 2px 0 12px; accent-color: var(--red, #B31942); }
.cropBtns { display: flex; justify-content: flex-end; gap: 8px; }
.dash { scroll-margin-top: 90px; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--blue-deep); color: #fff; }

img { max-width: 100%; display: block; }

a { color: var(--blue-deep); text-decoration: none; }
a:hover { color: var(--red); text-decoration: underline; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */

.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-deep); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.dark .eyebrow { color: #8FC3E8; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; }

h1 { font-size: clamp(2.35rem, 5vw, 3.6rem); letter-spacing: -.035em; }
h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--blue), var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 26px; letter-spacing: -.03em; }
h3 { font-weight: 700; letter-spacing: -.02em; }

.lede { font-size: 1.09rem; color: var(--soft); margin: 20px 0 26px; max-width: 56ch; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { border-radius: 7px; }
.brand-name { font-family: var(--font-display); font-size: 1.06rem; letter-spacing: -.02em; font-weight: 800; }
/* The flag. Drawn to spec (13 stripes, union 7/13 of the hoist, 50 stars in 9
   rows of 6/5) so it reads correctly at 26px; the hairline ring keeps the white
   stripes from bleeding into a white page. */
.flag {
  display: inline-block; width: 26px; height: auto; flex: none;
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(11,13,16,.14);
}
.eyebrow .flag { width: 24px; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
  color: var(--soft); font-size: .92rem; font-weight: 500;
  padding: 8px 12px; border-radius: 9px; transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.pill {
  font-size: 12px; font-weight: 600; color: var(--blue-deep);
  background: var(--blue-soft); border: 1px solid #CFE3F6;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}

/* ---------- hero ---------- */

/* The extra bottom padding is the city's stage. It has to clear the tallest
   tower (~220px at desktop widths) plus air for Liberty, or the hero carries a
   dead band of white between the CTA row and the rooflines. */
.hero {
  position: relative; overflow: hidden;
  /* 84/240: the city's stage still clears the tallest tower, and on a laptop the
     whole scene + the strip below it land ABOVE the ask dock (Elijah 10/1 —
     the dock must never clip the city or its caption). */
  padding: 84px 0 240px;
}

.hero-inner { position: relative; z-index: 3; }
/* Centered and quiet, America.gov-clean (Elijah 10/1): the headline is the first
   thing a visitor reads, and the ask bar rides the bottom of the screen. */
.hero-copy { max-width: 800px; margin: 0 auto; text-align: center; }
.hero-copy .lede { max-width: 62ch; margin-left: auto; margin-right: auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-copy .cta-row { justify-content: center; }

.city, .skyline, .scene {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto;
  display: block; pointer-events: none; user-select: none;
}
/* The layering is load-bearing. sun.svg holds only the SUN and clouds.svg only
   the CLOUDS — the sky paints first, so clouds cross the sun and both slide
   behind the buildings — skyline.svg holds only BUILDINGS; scene.svg holds
   only the STREET, the cars and the birds. Liberty is a bust — the art is cut at
   her waist, there is no full-body version — so instead of pretending she has
   feet, the street is drawn IN FRONT of her: her cut lands exactly on the street
   line and is hidden by it, the cars drive past her base, and the buildings stay
   behind her. She reads as standing at street level in the city. */
.city-far  { z-index: 0; opacity: .55; }   /* buildings — behind her */
.city-move { z-index: 2; opacity: .9; }    /* street + cars + birds — in front */
.skyline { z-index: 0; opacity: .55; }
.scene   { z-index: 2; opacity: .9; }
.sun { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; z-index: 0; opacity: .75; }    /* the sun — behind the city */
.clouds { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; z-index: 0; opacity: .65; } /* the clouds — the slowest clock */

/* Liberty stands ON the street line (see the file header for the 2vw maths).
   She is anchored to the text column so her left edge lines up with the headline,
   and at opacity .8 she is darker than every building in the scene (the skyline
   renders at .23–.55 effective through the .55 layer) so she reads as the subject
   rather than dissolving into the rooftops. Her wrapper IS the img box, so the
   wink's percentages land on her eye. */
.mascot-art {
  position: absolute; left: max(24px, calc(50% - 516px)); bottom: 2vw;
  width: 210px; z-index: 1; pointer-events: none; user-select: none;
  /* solid, not translucent: at .8 the skyline read THROUGH her and a row of
     low-rise blocks looked like it cut across her hips. */
  opacity: 1;
}
.mascot, .mascot-art .mascot { width: 100%; height: auto; display: block; }

/* She is drawn as a BUST — the art is cut at her waist, there is no full-body
   mascot — and her interior is already opaque white, so she occludes the buildings
   behind her by herself. (A soft white halo was tried first to stop the skyline
   reading through her; it worked, but it also whited out the whole neighbourhood and
   left her isolated on the left instead of standing among the buildings. Don't
   reintroduce it.) mascot-stand-solid.png is the same art with the enclosed holes
   inside her outline filled, built by scripts/solidify.py. */

/* one-time wink — her left eye (viewer's right), plays once when the page opens */
.wink {
  position: absolute; left: 54.1%; top: 49.15%; width: 4.8%;
  opacity: 0; pointer-events: none; z-index: 2;
  animation: wink 1.15s ease-in-out .75s 1 both;
}
.wink svg { display: block; width: 100%; height: auto; }
@keyframes wink {
  0%, 55% { opacity: 0; }
  63%, 85% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* ---------- the ask dock (bottom of the screen) ---------- */

/* Elijah 10/1: "Simply the front, have the chat box scroll at the bottom of the
   screen with the user ... clean like America.gov but keep the moving city in the
   back." The hero is copy over the city; the ask bar is fixed to the bottom of
   the viewport and stays with the visitor while they scroll. The conversation
   opens above it and scrolls itself — the bar never moves. Only the inner
   elements take pointer events; the dock's padding band is a pass-through. */
.hero-grid { display: block; }
.askdock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.askdock-inner { max-width: 760px; margin: 0 auto; pointer-events: auto; }
.askdock .askrow {
  background: #fff; border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 7px 9px 7px 16px;
}
.askdock-inner .attach-note { margin: 0 0 8px; padding: 0 8px; }
.askdock-panel {
  pointer-events: auto; max-width: 760px; margin: 0 auto 10px;
  max-height: min(56vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 12px 16px 14px;
}
.askdock-panel-head { display: flex; align-items: center; margin: 0 0 2px; }
.askdock-panel-title {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint);
}
.askdock-panel-close {
  margin-left: auto; border: 0; background: transparent; color: var(--faint);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px;
}
.askdock-panel-close:hover { color: var(--ink); background: var(--paper-2); }
.askdock-panel .thread { margin-top: 4px; }
.askdock-panel .ask-response { margin: 12px 0 0; max-width: none; }
.askdock-head-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.askdock-head-tools + .askdock-panel-close { margin-left: 2px; }
.chatbtn {
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
  font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.chatbtn:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.chatlist { margin: 6px 0 2px; max-height: 220px; overflow: auto; }
.chatrow { display: flex; align-items: center; border-top: 1px solid var(--line); }
.chatrow:first-child { border-top: 0; }
.chatrow .cmain {
  flex: 1; display: flex; align-items: center; gap: 8px; background: transparent;
  border: 0; padding: 8px 2px; font: inherit; font-size: .86rem; color: var(--ink);
  text-align: left; cursor: pointer; overflow: hidden; border-radius: 8px;
}
.chatrow .cmain:hover { background: var(--paper-2); }
.chatrow .ct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chatrow .cd { color: var(--faint); font-size: .74rem; flex: none; }
.chatrow .cx {
  border: 0; background: transparent; color: var(--faint); cursor: pointer;
  font-size: 14px; padding: 6px 8px; flex: none;
}
.chatrow .cx:hover { color: #b91c1c; }
.chatempty { padding: 8px 2px; color: var(--faint); font-size: .82rem; }
body.has-askdock { padding-bottom: 108px; }

.heropill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px 6px 7px; font-size: 12.5px; font-weight: 600;
  color: var(--soft); box-shadow: var(--shadow); margin-bottom: 22px;
}
.heropill img {
  width: 22px; height: 12px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(11,13,16,.08);
}
.heropill .live {
  width: 6px; height: 6px; border-radius: 50%; background: #12B76A;
  box-shadow: 0 0 0 3px rgba(18,183,106,.16); margin-left: 2px;
}

.heromicro { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.heromicro span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--faint); font-weight: 500; }
.herotick {
  width: 15px; height: 15px; border-radius: 50%; background: #EAF7F0; color: #0E9F6E;
  font-size: 10px; font-weight: 800; font-style: normal; display: grid; place-items: center; flex: none;
}

.askrow {
  display: flex; gap: 8px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 5px 9px 5px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.askrow:focus-within { border-color: #B9D5EC; box-shadow: var(--shadow-lg); }
.askrow input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 14px; color: var(--ink); padding: 9px 0;
}
.askrow input::placeholder { color: var(--faint); }
.askrow .btn { white-space: nowrap; font-size: 13.5px; padding: 9px 16px; }

.sample-q {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 14px; font-size: 14px; color: var(--ink); margin-top: 14px;
}
.ans { margin-top: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ans-hd { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink); margin-bottom: 9px; }
.ans-badge {
  background: var(--blue-soft); color: var(--blue-deep); border-radius: 6px; padding: 2px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-style: normal;
}
.ans p { font-size: 13.5px; color: var(--soft); line-height: 1.6; }
.ans-cite {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2);
  display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--blue-deep); font-weight: 600;
}
.ans-cite svg { flex: none; }


/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  padding: 12px 22px; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease,
  background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow); }
.btn-primary:hover { background: #22262C; box-shadow: var(--shadow-lg); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #CFD4DD; background: var(--paper-2); }

/* ---------- sources strip ---------- */

.sources { padding-top: 10px; padding-bottom: 0; }
/* The sources label is a lead-in, not a section — 92px of section padding on
   top of it left a dead band between it and the first heading. */
.sources + .section { padding-top: 54px; }
.sources-label {
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}

/* ---------- sections ---------- */

.section { padding-top: 92px; padding-bottom: 92px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-art { margin-bottom: 18px; }
.card-art svg { width: 100%; height: auto; display: block; }
.card-art path, .card-art rect, .card-art circle, .card-art ellipse,
.card-art line, .card-art polyline, .card-art polygon {
  fill: none; stroke: #14181c; stroke-opacity: .88; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.card-art .ac { stroke: var(--blue-deep); }
.card-art .rd { stroke: var(--red); }
.card-art .soft { stroke-opacity: .32; }
.card-art .wash { fill: var(--blue-soft); stroke: none; }
.card h3 { font-size: 1.04rem; margin-bottom: 8px; }
.card p { font-size: .9rem; color: var(--soft); }

/* ---------- dark band (footer) ---------- */

.dark { background: var(--dark); color: #F2F0EA; }

/* ---------- ask ---------- */

.ask-lede { max-width: 62ch; color: var(--soft); margin-bottom: 30px; }

.ask-box {
  display: flex; gap: 10px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 10px; max-width: 780px; box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ask-box:focus-within { border-color: #B9D5EC; box-shadow: var(--shadow-lg); }
.ask-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; padding: 12px 14px; color: var(--ink);
}
.ask-box input::placeholder { color: var(--faint); }
.ask-box .btn { white-space: nowrap; }

.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask-chip {
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--soft);
  background: #fff; border: 1px solid var(--line);
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ask-chip:hover { border-color: #B9D5EC; color: var(--ink); background: var(--paper-2); }
.ask-chips.chips-in { animation: chipsIn .35s ease both; }
@keyframes chipsIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ask-response {
  margin-top: 26px; max-width: 780px;
  background: var(--blue-soft); border: 1px solid #D6E7F5;
  border-radius: var(--radius); padding: 20px 24px;
}
.ask-response p { font-size: .95rem; color: #2B4E6E; }
.ask-response strong { color: var(--ink); }
.ask-response-note { margin-top: 8px; font-size: .88rem !important; opacity: .85; }
.ask-response-link { margin-top: 10px; font-weight: 600; }

/* ---------- live ask (desk) ---------- */

.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-deep); background: var(--blue-soft);
  border: 1px solid #D6E7F5; padding: 3px 10px; border-radius: 999px;
}
.live-badge .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Ask-bar controls (Elijah 10/1, his reference): bare outline paperclip + mic,
   then a filled navy circle with a white arrow. No boxes around the icons. */
.iconbtn {
  flex: 0 0 auto; width: 36px; height: 36px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  transition: background .15s ease;
}
.iconbtn svg {
  width: 21px; height: 21px; fill: none; stroke: var(--navy);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.iconbtn:hover { background: rgba(26, 43, 74, .07); }
.iconbtn.recording { background: var(--red-soft); animation: micpulse 1.4s infinite; }
.iconbtn.recording svg { stroke: var(--red); }
.iconbtn:disabled { opacity: .5; cursor: default; }
.asksend {
  flex: 0 0 auto; width: 38px; height: 38px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--navy); cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.asksend svg {
  width: 19px; height: 19px; fill: none; stroke: #FFFFFF;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.asksend:hover { background: var(--navy-hover); }
.asksend:disabled { opacity: .45; cursor: default; }
.asksend:disabled:hover { background: var(--navy); }
@keyframes micpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 25, 66, .22); }
  50% { box-shadow: 0 0 0 9px rgba(179, 25, 66, 0); }
}

/* Attach pill + the file name riding an asked question (Elijah 10/1) */
.attach-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--soft); }
.attach-note .attach-name { font-weight: 500; }
.attach-note button { border: 0; background: transparent; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.attach-note button:hover { color: var(--ink); background: var(--paper-2); }
.qa .q .qdoc { font-size: 11.5px; color: var(--soft); font-weight: 500; }

.voice-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--soft); font-size: .9rem; }
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .slider { position: absolute; inset: 0; background: #D8DDE5; border-radius: 999px; transition: background .2s ease; }
.switch .slider::before {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(11, 13, 16, .25);
}
.switch input:checked + .slider { background: var(--blue-deep); }
.switch input:checked + .slider::before { transform: translateX(20px); }

.thread { margin-top: 30px; max-width: 780px; }
.qa { padding: 22px 0; border-top: 1px solid var(--line); }
.qa:first-child { border-top: 0; padding-top: 6px; }
.qa .q { font-weight: 600; font-size: .98rem; }
.qa .q::before { content: "You · "; color: var(--faint); font-weight: 500; }
.qa .a { margin-top: 10px; font-size: .96rem; }
.qa .a p { margin: 8px 0; }
.qa .a ul { margin: 8px 0 10px 22px; }
.qa .a a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.qa .a.err { color: #8A3B37; }

.think { display: flex; align-items: center; gap: 5px; color: var(--faint); font-size: .9rem; padding-top: 10px; }
.think .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  animation: blink 1.2s ease-in-out infinite;
}
.think .dot:nth-child(2) { animation-delay: .2s; }
.think .dot:nth-child(3) { animation-delay: .4s; }
.think-label { margin-left: 8px; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.meta { margin-top: 14px; display: flex; align-items: center; gap: 14px; font-size: .8rem; color: var(--faint); }
.voice-state { color: var(--faint); }
.mini {
  font: inherit; font-size: .8rem; background: none; border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 10px; color: var(--soft); cursor: pointer;
}
.mini:hover { border-color: #B9D5EC; color: var(--ink); }

/* ---------- roadmap ---------- */

.steps { list-style: none; margin-top: 10px; }
.step {
  display: grid; grid-template-columns: 28px 1fr; gap: 18px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.step-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--faint); margin-top: 6px; background: var(--paper);
}
.step.current .step-dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); }
.step h3 { font-size: 1.04rem; margin-bottom: 6px; }
.step p { font-size: .92rem; color: var(--soft); }
.tag-now {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  background: var(--red-soft); border-radius: 999px; padding: 3px 10px;
  vertical-align: 3px; margin-left: 8px;
}

/* ---------- footer ---------- */

.footer { padding: 64px 0 48px; }
.footer-grid {
  display: grid; grid-template-columns: 190px 1fr auto;
  gap: 48px; align-items: center;
}
.sticker { width: 180px; }
.footer .brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; gap: 10px; }
.flag-lg { width: 30px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.footer .tag { color: #A9B2B8; font-size: .95rem; margin-top: 4px; }
.footer .tag span { color: #8FC3E8; }
.footer .fine { color: #7B848B; font-size: .8rem; margin-top: 18px; line-height: 1.7; }
.footer .contact-us { color: #A9B2B8; font-size: .92rem; margin-top: 14px; }
.footer .contact-us a { color: #8FC3E8; }
.footer-copy { min-width: 0; }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.footer-links a { color: #A9B2B8; font-size: .9rem; }
.footer-links a:hover { color: #fff; text-decoration: none; }

/* ---------- join ---------- */

.join-lede { max-width: 60ch; color: var(--soft); margin-bottom: 24px; }
.join-box {
  display: flex; gap: 10px; align-items: center; max-width: 560px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.join-box:focus-within { border-color: #B9D5EC; box-shadow: var(--shadow-lg); }
.join-box input[type="email"] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; padding: 12px 14px; color: var(--ink);
}
.join-box input[type="email"]::placeholder { color: var(--faint); }
.join-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join-note { margin-top: 14px; font-size: .93rem; color: var(--blue-deep); font-weight: 500; }
.join-note.err { color: #8A3B37; }
.join-fine { margin-top: 10px; font-size: .8rem; color: var(--faint); }

/* ---------- account (signup / login) ---------- */

.auth-wrap { max-width: 460px; }
.auth-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow);
}
.auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.auth-tab {
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--soft);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 18px; cursor: pointer;
}
.auth-tab:hover { border-color: #B9D5EC; color: var(--ink); }
.auth-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { font-size: .85rem; font-weight: 600; color: var(--soft); display: grid; gap: 6px; }
.auth-form input {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-form input:focus { border-color: #B9D5EC; box-shadow: var(--shadow); }
.auth-form .btn { justify-content: center; margin-top: 4px; }
.auth-note { margin-top: 16px; font-size: .9rem; color: var(--soft); }
.auth-err { color: #8A3B37; }
.auth-ok { color: var(--blue-deep); font-weight: 500; }

/* GitHub OAuth (2026-09-22) */
.auth-gh { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; font-weight: 600; }
.auth-or { text-align: center; color: var(--faint); font-size: .8rem; margin: 14px 0 4px; }

/* --- Account dashboard (2026-09-22) --- */
.dash { max-width: 860px; margin-bottom: 8px; }
.dash-head { margin-bottom: 18px; }
.dash-head h3 { margin: 0 0 6px; }
.dash-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.dash-card h4 { margin: 0 0 8px; }
.dash-sub { margin: 0 0 14px; }
.dash-facts { margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.dash-facts dt { font-weight: 600; color: var(--soft); font-size: .85rem; }
.dash-facts dd { margin: 0; overflow-wrap: anywhere; }
.auth-form select { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; color: var(--ink); width: 100%; }
.auth-form select:focus { border-color: #B9D5EC; box-shadow: var(--shadow); outline: none; }

/* --- our own dropdown menus (lady_dropdown.js, 2026-09-22) ---
   Used everywhere a native <select> used to be. The two select rules above
   stay as the graceful fallback styling if the component ever fails to load. */
.auth-form .auth-field { font-size: .85rem; font-weight: 600; color: var(--soft); display: grid; gap: 6px; }
.ldd { position: relative; }
.ldd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  font: inherit; font-size: 1rem; font-weight: 400;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.ldd-btn:hover { border-color: #B9D5EC; }
.ldd.ldd-open .ldd-btn { border-color: #B9D5EC; box-shadow: var(--shadow); }
.ldd-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldd-val.is-placeholder { color: var(--faint); }
/* The arrow must stay small (Elijah, 9/22 — raised twice): an inline SVG with no
   width/height falls back to the browser's default replaced size and renders huge.
   It is sized here AND on the <svg> itself in lady_dropdown.js, so it cannot blow up
   again even if this stylesheet fails to load. */
.ldd-chev { width: 13px; height: 13px; flex: none; color: var(--faint); transition: transform .15s ease, color .15s ease; }
.ldd.ldd-open .ldd-chev { transform: rotate(180deg); color: var(--soft); }
.ldd-panel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.ldd.ldd-up .ldd-panel { top: auto; bottom: calc(100% + 6px); }
.ldd-search { padding: 10px 10px 8px; border-bottom: 1px solid var(--line); }
.ldd-search input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; outline: none;
}
.ldd-search input:focus { border-color: #B9D5EC; }
.ldd-list { list-style: none; margin: 0; padding: 6px; max-height: 264px; overflow: auto; }
.ldd-opt {
  padding: 9px 10px; border-radius: 8px; font-size: .95rem; font-weight: 400;
  color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ldd-opt.is-active { background: #EEF5FB; }
.ldd-opt[aria-selected="true"] { font-weight: 600; }
.ldd-opt[aria-selected="true"]::after { content: "✓"; font-size: .82rem; color: var(--blue-deep); font-weight: 600; }
.ldd-empty { padding: 10px; font-size: .9rem; color: var(--faint); }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }
.auth-user { display: grid; gap: 10px; }
.auth-user .who { font-weight: 600; }
.auth-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.auth-switch { margin-top: 18px; font-size: .88rem; color: var(--faint); }
.soft-note { font-weight: 500; color: var(--faint); font-size: .78rem; }
.auth-signed { display: none; }
.auth-signed.on { display: block; }
.auth-forms.off { display: none; }
.auth { min-width: 0; }

/* ---------- legal pages ---------- */

.legal-body { max-width: 760px; }
.legal-body h3 { font-size: 1.06rem; margin: 30px 0 10px; }
.legal-body ul { margin: 8px 0 8px 22px; }
.legal-body li { margin: 7px 0; font-size: .95rem; color: var(--soft); }
.legal-body p { font-size: .95rem; color: var(--soft); }
.legal-body strong { color: var(--ink); }
.legal-updated { margin-top: 34px; font-size: .85rem; color: var(--faint); }

/* ---------- anonymous usage nudge + gate ---------- */

.nudge { margin-top: 6px; font-size: 12.5px; color: #8a6a1f; }
.nudge a { color: inherit; font-weight: 600; }
.gatecard { margin-top: 8px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper-2); font-size: 14.5px; line-height: 1.55; }
.gatecard .btn { margin-top: 10px; display: inline-block; }

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  .hero { padding: 44px 0 200px; }
  .hero-copy { max-width: none; }
  .heropill { margin-bottom: 14px; }
  .hero-copy .lede { font-size: 16px; margin-top: 14px; }
  .cta-row { margin-top: 22px; }
  .cta-row .btn { flex: 1 1 auto; }
  .heromicro { margin-top: 18px; gap: 12px; }
  /* On a phone the city is a fixed 190px tall and centred, so it is 585px wide
     with its left edge 292px left of centre; 585px wide it would turn the
     linework to mush if scaled down further, so the sides crop instead.
     max-width:none is load-bearing — the global img{max-width:100%} would
     otherwise cap it at the viewport and squash the aspect ratio flat. */
  .city, .skyline, .scene { height: 190px; width: auto; max-width: none; left: 50%; transform: translateX(-50%); right: auto; }
  .mascot-art { left: 24px; width: 96px; bottom: 12px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-links { flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
  .sticker { width: 130px; }
  /* the sky is full-bleed on phones too — the slice keeps the sun's
     corner in frame, so no nudge is needed */
  .nav-links { display: none; }
}

/* Mobile hamburger (hidden on desktop; zero-JS details/summary) */
.menu-toggle { display: none; }
@media (max-width: 940px) {
  .menu-toggle { display: block; position: relative; }
  .menu-toggle summary { list-style: none; display: flex; align-items: center; cursor: pointer; padding: 6px; border-radius: 8px; }
  .menu-toggle summary::-webkit-details-marker { display: none; }
  .menu-toggle summary:hover { background: var(--paper-2); }
  .mobile-menu { position: absolute; right: 0; top: calc(100% + 10px); background: var(--paper-2);
    border: 1px solid var(--line); border-radius: 12px; padding: 8px;
    display: flex; flex-direction: column; gap: 2px; min-width: 190px;
    box-shadow: 0 10px 28px rgba(0,0,0,.14); z-index: 60; }
  .mobile-menu a { display: block; padding: 9px 12px; border-radius: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--ink); }
  .mobile-menu a:hover { background: var(--paper); color: var(--blue-deep); }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .footer { padding-top: 60px; padding-bottom: 60px; }
  .hero { padding: 40px 0 190px; }
  .ask-box { flex-direction: column; align-items: stretch; }
  .ask-box .btn { justify-content: center; }
  .askdock { padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .askrow { flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; }
  .askrow input { flex: 1 1 100%; padding: 4px 0 10px; }
  .askrow #fileBtn { margin-left: auto; }
  .join-box { flex-direction: column; align-items: stretch; }
  .join-box .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* The cars and the wink stop, but the city itself stays — it is the backdrop,
     not the animation. The live sheet hides .scene for the same reason. The
     clouds ride with the cars; the sun stays — it is sky, not motion. */
  .scene, .city-move, .wink, .clouds { display: none; }
}

/* Provider buttons (Google above GitHub) */
.auth-gh + .auth-gh { margin-top: 8px; }

/* ---- Feed (Elijah 2026-10-01: "Build the feed") ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.topic-chip { font: inherit; font-size: 14px; font-weight: 600; color: var(--soft);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; text-align: left; }
.topic-chip:hover { border-color: var(--blue); color: var(--blue-deep); }
.topic-chip.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-deep); }
.topic-chip small { display: block; font-weight: 400; font-size: 11.5px; color: var(--faint); margin-top: 2px; max-width: 210px; }
.topic-chip.on small { color: var(--blue-deep); opacity: .85; }
.agency-details { margin-top: 10px; }
.agency-details summary { cursor: pointer; }
.agency-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 10px; }
.agency-grid label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--soft); }
.kw-inline { display: flex; gap: 8px; }
.kw-inline input { flex: 1; }
.optin-row { display: flex; gap: 9px; align-items: center; margin-top: 16px; font-size: 14px; color: var(--soft); }
.kw-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--blue-soft);
  border: 1px solid var(--blue); color: var(--blue-deep); border-radius: 999px;
  padding: 5px 7px 5px 12px; font-size: 13.5px; font-weight: 600; }
.kw-x { border: 0; background: transparent; color: var(--blue-deep); font-size: 15px;
  line-height: 1; cursor: pointer; padding: 2px 5px; }
.feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.feed-toolbar h4 { margin: 0; }
.feed-toolbar input { border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
  font: inherit; font-size: 14px; min-width: 190px; background: var(--paper); color: var(--ink); }
.feed-toolbar select { border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px;
  font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); }
.stage-chip { display: inline-block; border: 1px solid var(--blue); background: var(--blue-soft);
  color: var(--blue-deep); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; }
.stage-chip:hover { filter: brightness(.97); }
.video-btn { border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
  font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); cursor: pointer; }
.video-btn.on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep);
  font-weight: 600; }
.feed-item-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 0; }
.feed-item .track-btn { display: inline-block; border: 1px solid var(--line); background: var(--paper);
  color: var(--blue-deep); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; }
.feed-item .track-btn:hover { filter: brightness(.97); }
.feed-item .track-btn.on { border-color: var(--blue); background: var(--blue-soft); }
.feed-list { margin-top: 12px; }
.feed-day { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin: 16px 0 4px; }
.feed-day:first-child { margin-top: 4px; }
.feed-item { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.feed-item:last-child { border-bottom: 0; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent;
  border: 1.5px solid var(--line); margin-top: 7px; flex: none; }
.feed-item.unread .feed-dot { background: var(--blue); border-color: var(--blue); }
.feed-box { min-width: 0; }
.feed-item a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.35; }
.feed-item a:hover { color: var(--blue-deep); }
.feed-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--faint); }
.feed-actions { display: flex; gap: 10px; margin-top: 12px; }
.feed-empty { color: var(--soft); font-size: 14px; padding: 14px 0; }
.auth-note.warn { color: var(--red); }
@media (max-width: 640px) { .agency-grid { grid-template-columns: 1fr; } }

/* ---- Actions (Elijah 2026-10-01: the America.gov "coming in 2027" parallel —
   complete forms, track progress, organize everything in one place) ---- */
.actions-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.actions-toolbar input { border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
  font: inherit; font-size: 14px; min-width: 220px; background: var(--paper); color: var(--ink); }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 980px) { .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .action-grid { grid-template-columns: 1fr; } }
.action-card { text-align: left; font: inherit; cursor: pointer; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.action-card:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(75, 156, 211, .12); }
.action-card.on { border-color: var(--blue); background: var(--blue-soft); }
.action-who { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.action-card h4 { margin: 0; font-size: 16.5px; line-height: 1.3; }
.action-sum { margin: 0; font-size: 13.5px; color: var(--soft); line-height: 1.45; }
.action-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--faint); }
.action-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--blue-deep); }
.detail { margin-top: 18px; }
.detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.detail-head h3 { margin: 0 0 4px; }
.detail-who { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.detail-x { border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; color: var(--soft); }
.detail-x:hover { border-color: var(--red); color: var(--red); }
.detail-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-top: 12px; }
@media (max-width: 780px) { .detail-cols { grid-template-columns: 1fr; } }
.detail-cols h4 { margin: 0 0 8px; font-size: 14.5px; }
.step-list, .need-list { margin: 0; padding: 0; list-style: none; }
.step-list li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--soft); line-height: 1.5; }
.step-list li:last-child, .need-list li:last-child { border-bottom: 0; }
.step-list .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft);
  color: var(--blue-deep); font-size: 12px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; margin-top: 1px; }
.step-list li.done .n { background: var(--blue); color: #fff; }
.step-list li.done .txt { text-decoration: line-through; color: var(--faint); }
.need-list li { display: flex; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--soft); align-items: flex-start; }
.need-list li.done .txt { text-decoration: line-through; color: var(--faint); }
.need-list input, .step-list input { margin-top: 3px; flex: none; }
.detail-facts { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 4px; }
.detail-facts div { font-size: 13px; color: var(--soft); max-width: 320px; }
.detail-facts b { display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.link-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.link-row .btn { font-size: 13.5px; }
.detail-note { font-size: 13.5px; color: var(--soft); background: var(--blue-soft); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.track-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.track-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.track-row label { font-size: 13px; color: var(--faint); font-weight: 600; }
.track-row select, .track-row input[type="date"], .track-row textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: inherit;
  font-size: 13.5px; background: var(--paper); color: var(--ink); }
.track-row textarea { width: 100%; min-height: 54px; resize: vertical; }
.status-pill { display: inline-block; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; }
.status-planned { background: #EEE9E1; color: #6a5f4c; }
.status-preparing { background: #FFF3D6; color: #8a6100; }
.status-submitted { background: var(--blue-soft); color: var(--blue-deep); }
.status-waiting { background: #E8E0FF; color: #4b3d8f; }
.status-done { background: #DDF3E4; color: #1e6b3a; }
.status-stopped { background: #FBE3E3; color: #8f2b2b; }
.prog { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 8px; }
.prog i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.my-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 780px) { .my-list { grid-template-columns: 1fr; } }
.my-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--paper); }
.my-card h4 { margin: 0 0 4px; font-size: 15px; }
.my-meta { font-size: 12.5px; color: var(--faint); margin: 6px 0 0; }
.my-actions-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.actions-disc { font-size: 12.5px; color: var(--faint); margin-top: 26px; line-height: 1.5; }

/* ---- Account online (Elijah 10/7): the dot that says she's signed in; the
   stored-session guard keeps create/sign-in blocks from flashing at visitors
   already signed in. Everything settles in authstatus.js. ---- */
html.ll-hassession:not(.ll-resolved) .auth-forms { visibility: hidden; }
html.ll-hassession:not(.ll-resolved) #account { display: none; }
html.ll-signedin #account { display: none; }
.authdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; vertical-align: middle; background: radial-gradient(circle at 35% 30%, #b9ffd0, #2fd05f 55%, #0e8a3c); box-shadow: 0 0 7px rgba(47, 208, 95, .85), 0 0 0 0 rgba(47, 208, 95, .55); animation: authdot-pulse 2.4s ease-out infinite; }
.authdot.abs { position: absolute; top: 16px; right: 24px; margin-left: 0; }
a.authdot[hidden] { display: none; }
@keyframes authdot-pulse {
  0%   { box-shadow: 0 0 7px rgba(47, 208, 95, .85), 0 0 0 0 rgba(47, 208, 95, .55); }
  70%  { box-shadow: 0 0 7px rgba(47, 208, 95, .85), 0 0 0 9px rgba(47, 208, 95, 0); }
  100% { box-shadow: 0 0 7px rgba(47, 208, 95, .85), 0 0 0 0 rgba(47, 208, 95, 0); }
}
@media (prefers-reduced-motion: reduce) { .authdot { animation: none; } }