/* Ely home — ported from design/ely-home/ely-lobby.src.html (approved 2026-08-15).
   One stylesheet, no inline style attributes: the shell is served under
   style-src 'self'. Faces and photography come from /assets/ely/. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url(/assets/ely/bricolage.woff2) format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url(/assets/ely/instrument.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url(/assets/ely/jbmono.woff2) format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --blue: #1F4BFF; --blue-dark: #1233C8; --blue-tint: #EAEEFF;
  --orange: #F5610A; --orange-deep: #C2410C; --orange-tint: #FDECE0;
  /* White on #F5610A is 3.2:1 — below the floor for a control's label. The one
     primary action per screen keeps the brand hue at a depth that carries white
     text (4.6:1); #F5610A itself stays on the marks that carry no type. */
  --orange-ink: #CC4A0A; --orange-ink-hover: #B84209;
  --ink: #0A0E14; --deep: #06263B; --steel: #0D4162; --steel-mid: #4B94BC;
  --canvas: #F5F8FA; --card: #FFFFFF; --line: #E4E7EC; --line-soft: #EDF1F4;
  --mut: #576070; --faint: #667080;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --sh-card: 0 1px 2px #0A0E140A, 0 8px 24px #0A0E140F;
  --sh-float: 0 12px 32px #0A0E141F, 0 2px 8px #0A0E140F;
  --sh-orange: 0 4px 14px #F5610A3D;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --disp: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --on-glass: #E9F4FB;
  /* How much room the docked module rail takes at the bottom of a phone
     screen. Zero until the rail actually docks — the 640px block below owns
     both this value and the rail's own box — so anything that has to stay
     clear of it can reserve `var(--nav-h)` at any width without a query. */
  --nav-h: 0px;
}

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

html {
  scrollbar-color: #B9C4CE var(--canvas);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  caret-color: var(--blue);
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 3px;
}
::selection { background: var(--blue-tint); color: var(--blue-dark) }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 5px }
.horizon :focus-visible, .auth-screen :focus-visible, .pick-screen :focus-visible {
  outline-color: #FFFFFF;
}
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit }
[hidden] { display: none !important }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.klabel {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
/* An em-dash is the honest reading when there is no number; it should read as
   a placeholder, not as a rule, so it never carries display weight. */
.dash { color: var(--faint); font-weight: 500 }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--card); color: var(--ink); padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0 }

/* ————————————————— boot ————————————————— */
.boot {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  background: var(--deep);
}
.boot-mark {
  font-family: var(--disp); font-weight: 800; font-size: 40px;
  letter-spacing: -.03em; color: #fff;
  animation: breathe 2.4s ease-in-out infinite;
}
.boot-note { font-size: 10px; font-weight: 600; letter-spacing: .18em; color: #A8CCE4 }

/* ————————————————— horizon ————————————————— */
/* No overflow clip here: the property switcher menu hangs below this header
   and a clip cut it to one and a half hotels in the slim module view. The
   photograph layers pin themselves to the box with `inset: 0` instead. */
.horizon { position: relative }
.horizon.tall { min-height: 600px }
.horizon.slim { min-height: 172px }
.horizon.full { position: fixed; inset: 0; min-height: 100% }
.horizon .ph {
  position: absolute; inset: 0;
  background-position: center 38%; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity .8s ease;
}
.horizon .p-day { background-image: url(/assets/ely/day.jpg) }
.horizon .p-dawn { background-image: url(/assets/ely/dawn.jpg); background-position: center 30% }
.horizon .p-golden { background-image: url(/assets/ely/golden.jpg); background-position: center 42% }
.horizon .p-night { background-image: url(/assets/ely/night.jpg); background-position: center 46% }
.horizon.m-day .p-day,
.horizon.m-dawn .p-dawn,
.horizon.m-golden .p-golden,
.horizon.m-night .p-night { opacity: 1 }
.horizon .wash {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(6,38,59,.90) 0%, rgba(13,65,98,.72) 42%, rgba(18,51,200,.38) 100%);
}
/* The fade is what keeps white type legible where the photograph goes bright.
   On the tall and full-bleed horizons it has to cover the whole lower band,
   because that is where the glass tiles and the picker cards sit. */
.horizon .fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(180deg, transparent, rgba(3,20,32,.38));
}
.horizon.tall .fade, .horizon.full .fade {
  height: 64%;
  background: linear-gradient(180deg, transparent 0%, rgba(3,20,32,.34) 44%, rgba(3,20,32,.64) 100%);
}
.horizon.slim .wash {
  background: linear-gradient(155deg, rgba(6,38,59,.96) 0%, rgba(13,65,98,.88) 55%, rgba(18,51,200,.62) 100%);
}
.horizon.m-dawn .wash { background: linear-gradient(155deg, rgba(6,38,59,.86) 0%, rgba(93,42,68,.52) 42%, rgba(194,65,12,.26) 100%) }
.horizon.m-day .wash { background: linear-gradient(155deg, rgba(6,38,59,.90) 0%, rgba(13,65,98,.72) 42%, rgba(18,51,200,.38) 100%) }
.horizon.m-golden .wash { background: linear-gradient(155deg, rgba(6,38,59,.88) 0%, rgba(13,65,98,.58) 42%, rgba(194,65,12,.28) 100%) }
.horizon.m-night .wash { background: linear-gradient(155deg, rgba(3,16,27,.90) 0%, rgba(6,38,59,.72) 45%, rgba(13,47,166,.38) 100%) }

.hz-inner {
  position: relative; max-width: 1240px; margin: 0 auto; padding: 0 40px;
  display: flex; flex-direction: column; min-height: inherit;
}

/* ————————————————— chrome ————————————————— */
.chrome { display: flex; align-items: center; gap: 14px; padding: 22px 0 0 }
.wordmark {
  font-family: var(--disp); font-weight: 800; font-size: 26px;
  color: #fff; letter-spacing: -.02em; white-space: nowrap;
}
.wordmark small {
  font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .18em;
  color: #DCEEF9; margin-left: 10px; vertical-align: 2px;
}
.chrome .spacer { flex: 1 }

/* ————————————————— brand marks —————————————————
   One mark component in three sizes: the picker card, the switcher pill and
   the switcher menu. A known property renders its bundled SVG glyph (the tile
   corners are drawn into the SVG itself); every other client gets the letter
   tile — brand-blue glass, never a bare dot. White on this gradient holds
   ≥5.9:1 at its lightest stop. */
.bmark { display: grid; place-items: center; flex-shrink: 0; border-radius: 27%; overflow: hidden; color: #fff; font-family: var(--disp); font-weight: 800 }
.bmark img { width: 100%; height: 100%; display: block }
.bmark.letter {
  background: linear-gradient(150deg, #2F5CFF, #1233C8 82%);
  border: 1px solid #FFFFFF3D;
  box-shadow: inset 0 1px 0 #FFFFFF4D, 0 1px 2px #0A0E1426;
}

.prop {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 8px; border-radius: 999px;
  background: #FFFFFF24; border: 1px solid #FFFFFF2E;
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  color: #fff; transition: background .2s;
}
button.prop:hover { background: #FFFFFF38 }
.prop .dot { width: 26px; height: 26px; font-size: 12.5px }
.prop b { font-weight: 600; font-size: 13.5px; white-space: nowrap }
.prop .prop-chev { stroke: #fff; opacity: .8 }
.prop[aria-expanded="true"] .prop-chev { transform: rotate(180deg) }
.switch-wrap { position: relative }
.prop-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 268px; padding: 6px; border-radius: var(--r-md);
  background: #FFFFFFF2; border: 1px solid #FFFFFF;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--sh-float);
  display: grid; gap: 2px;
  /* Twenty hotels must not run off the bottom of a phone: the menu scrolls. */
  max-height: min(70vh, 520px); overflow-y: auto;
}
.prop-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink);
  font-size: 13.5px; font-weight: 600; transition: background .18s;
}
.prop-menu button:hover { background: var(--canvas) }
.prop-menu button[aria-current="true"] { background: var(--blue-tint); color: var(--blue-dark) }
.prop-menu .mini { width: 24px; height: 24px; font-size: 11px }
.prop-menu .mini-sub {
  display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--faint); margin-top: 2px; text-transform: uppercase;
}
.prop-menu button[aria-current="true"] .mini-sub { color: var(--blue-dark) }
.gear {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: #FFFFFF1F; border: 1px solid #FFFFFF2E;
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  display: grid; place-items: center; transition: background .2s;
}
.gear:hover { background: #FFFFFF38 }
.gear svg { width: 17px; height: 17px; stroke: #fff }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, #4B94BC, #0D4162);
  color: #fff; display: grid; place-items: center;
  font-weight: 600; font-size: 13px; border: 2px solid #FFFFFF66;
}
.who-pill {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--on-glass);
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-glass-sm {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff;
  background: #FFFFFF1F; border: 1px solid #FFFFFF2E;
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  transition: background .2s;
}
.btn-glass-sm:hover { background: #FFFFFF38 }

/* ————————————————— greeting + tiles ————————————————— */
.greet {
  margin-top: 44px; color: #fff;
  opacity: 0; transform: translateY(14px);
  animation: rise .7s var(--ease) .08s forwards;
}
.greet .when { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: #DCEEF9 }
.greet h1 {
  font-family: var(--disp); font-optical-sizing: auto;
  font-size: clamp(34px, 4.6vw, 56px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.04; margin-top: 10px; text-wrap: balance;
}
.greet p { margin-top: 10px; font-size: 15.5px; color: #EAF5FC; max-width: 52ch }
.greet p b { color: #fff; font-weight: 600 }

.hz-grid { display: flex; gap: 20px; align-items: flex-end; margin-top: auto; padding: 34px 0 74px }
.pulse {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; min-width: 0;
  opacity: 0; transform: translateY(14px);
  animation: rise .7s var(--ease) .22s forwards;
}
.tile {
  position: relative; text-align: left;
  /* A <button> centres its content box; the tiles have to top-align so the
     four labels sit on one line whatever their value and detail run to. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  background: #FFFFFF24; border: 1px solid #FFFFFF2E; border-radius: var(--r-md);
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  padding: 16px 18px; color: #fff; transition: background .25s;
}
button.tile:hover { background: #FFFFFF3D }
.tile[aria-disabled="true"] { cursor: default }
.tile[aria-disabled="true"]:hover { background: #FFFFFF24 }
/* Two lines of room, so a label that wraps does not drop its figure below the
   other three. The four numbers are the scan line; they stay on one baseline. */
.tile .klabel { color: #DCEEF9; padding-right: 28px; min-height: 32px }
.tile .v {
  font-family: var(--disp); font-size: 34px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; margin-top: 8px;
}
.tile .v.word { font-size: 24px; letter-spacing: -.015em }
/* A stated known state ("Not connected") runs longer than a one-word value and
   sits on two lines at tile width; it drops a step so the row stays even. */
.tile .v.word.compact { font-size: 19px; line-height: 1.18; letter-spacing: -.01em }
.tile .v small { font-size: 17px; font-weight: 600; color: #DCEEF9 }
.tile .d { font-size: 12.5px; color: #E4F1F9; margin-top: 3px }
.tile .drill-c {
  position: absolute; top: 14px; right: 14px; width: 22px; height: 22px;
  border-radius: 50%; background: #FFFFFF24; display: grid; place-items: center;
  opacity: .75; transition: opacity .2s, background .2s;
}
button.tile:hover .drill-c { opacity: 1; background: #FFFFFF52 }
.tile .drill-c svg { width: 11px; height: 11px; stroke: #fff }

.night {
  width: 340px; flex-shrink: 0; background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--sh-float); padding: 20px;
  opacity: 0; transform: translateY(14px);
  animation: rise .7s var(--ease) .36s forwards;
}
.night .hd { display: flex; align-items: center; gap: 8px }
.night .hd .klabel { color: var(--steel) }
.night .hd .spacer { flex: 1 }
.live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; color: var(--deep);
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: blink 2.4s ease-in-out infinite }
.live.off i { background: #7C8696; animation: none }
/* Bound, but Ely is not answering: the attention hue, no pulse. */
.live.warn { color: var(--orange-deep) }
.live.warn i { background: var(--orange); animation: none }
.night ul { list-style: none; margin-top: 12px; display: grid; gap: 8px }
.night li { background: var(--deep); color: #fff; border-radius: var(--r-sm); padding: 10px 13px; font-size: 13.5px; line-height: 1.45 }
.night li b { font-weight: 600 }
.night li .mono { color: #A8CCE4; font-size: 10.5px; letter-spacing: .08em }
.night li.soft { background: var(--canvas); color: var(--ink) }
.night li.soft .mono { color: var(--steel) }
.night .win { display: flex; justify-content: flex-end; margin-top: 12px }
.badge-o {
  background: var(--orange-ink); color: #fff; font-family: var(--mono);
  font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 8px 14px;
  box-shadow: var(--sh-orange); transition: background .2s, transform .2s;
}
.badge-o:hover { background: var(--orange-ink-hover); transform: translateY(-1px) }

/* ————————————————— rail ————————————————— */
.rail-wrap { position: sticky; top: 0; z-index: 40; margin-top: -36px; padding: 0 40px }
.rail {
  max-width: 1240px; margin: 0 auto;
  background: #FFFFFFC7; border: 1px solid #FFFFFF; box-shadow: var(--sh-card);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: 999px; padding: 6px; display: flex; gap: 2px; overflow-x: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none }
.rail button {
  flex: 1; min-width: 92px; padding: 10px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--mut); white-space: nowrap;
  transition: color .2s, background .2s;
}
.rail button:hover { color: var(--ink) }
.rail button:disabled, .rail button:disabled:hover { color: #8B93A3; cursor: default }
.rail button[aria-current="true"] { background: var(--deep); color: #fff }
.rail .soon { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); margin-left: 7px }
.rail button[aria-current="true"] .soon { color: #A8CCE4 }
.rail-sep { width: 1px; align-self: center; height: 20px; background: var(--line); flex-shrink: 0; margin: 0 4px }
/* LOK-732 U4: the waiting count on the Chat rail button — the same nodes the
   640px block below docks to the bottom of the screen, so this needs no
   separate mobile rule. */
.rail-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 18px; min-width: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--orange-tint); color: var(--orange-deep);
  font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}

/* ————————————————— canvas ————————————————— */
main { max-width: 1240px; margin: 0 auto; padding: 34px 40px 80px }
.view { display: none }
.view.on { display: block }
h2.sec { font-family: var(--disp); font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 38px 0 6px }
h2.sec:first-child { margin-top: 0 }
.sec-sub { color: var(--mut); font-size: 13.5px; margin-bottom: 18px; max-width: 68ch }
.sec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px }
.sec-row .sec { margin-bottom: 0 }
.sec-tag { font-size: 11px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 22px }

.chip {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.chip.live { background: var(--blue-tint); color: var(--blue-dark) }
.chip.need { background: var(--orange-tint); color: var(--orange-deep) }
.chip.soon { background: #EBEFF3; color: #59626F }
.chip.off { background: #EBEFF3; color: #59626F }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: background .2s, transform .2s, box-shadow .2s, color .2s;
}
.btn .ico { width: 17px; height: 17px; flex-shrink: 0 }
.btn-primary { background: var(--orange-ink); color: #fff; box-shadow: var(--sh-orange) }
.btn-primary .ico { stroke: #fff }
.btn-primary:hover { background: var(--orange-ink-hover); transform: translateY(-1px) }
.btn-quiet { background: var(--card); color: var(--ink); border: 1px solid var(--line) }
.btn-quiet .ico { stroke: var(--steel) }
.btn-quiet:hover { background: var(--canvas); border-color: #D3DAE2 }
.btn-danger { background: var(--card); color: var(--orange-deep); border: 1px solid var(--orange-tint) }
.btn-danger:hover { background: var(--orange-tint) }
.btn-full { width: 100% }
.btn[disabled] { cursor: not-allowed; background: #EBEFF3; color: #59626F; box-shadow: none; border-color: transparent }
.btn[disabled] .ico { stroke: #59626F }
.btn[disabled]:hover { transform: none; background: #EBEFF3 }
.btn.is-busy { opacity: .72; pointer-events: none }
.native-action-card .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.native-outbox { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--line-soft); font-size: 13px }
.native-outbox[data-outcome="failed"] { background: var(--orange-tint, var(--line-soft)) }
.native-action-card .btn { margin-top: 8px; }
.native-summary-card .sec { margin: 0 0 6px; }
.native-summary-card .sec-sub { margin-bottom: 10px; }
.native-summary-field { margin-top: 12px; }
.native-summary-field p { margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Errors name the problem in the bold line and the recovery underneath. */
.alert {
  background: var(--card); border-radius: var(--r-md);
  border-left: 1px solid var(--orange);
  padding: 13px 16px; font-size: 13.5px; color: var(--ink);
  box-shadow: var(--sh-card); margin-bottom: 16px;
}
.alert b { display: block; font-weight: 600; margin-bottom: 2px }
.alert span { color: var(--mut) }

.linkish {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--blue-dark); font-weight: 600; font-size: 13.5px;
  text-decoration: underline; text-decoration-color: #1233C840;
  transition: text-decoration-color .2s;
}
.linkish:hover { text-decoration-color: currentColor }
.linkish .ico-sm { stroke: currentColor }
.ico-sm { width: 14px; height: 14px; flex-shrink: 0 }

/* fields */
.field { display: block }
.field + .field { margin-top: 14px }
.field-lbl { display: block; color: var(--faint); margin-bottom: 7px }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px;
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.5 }
.field input::placeholder, .field textarea::placeholder { color: var(--mut); opacity: 1 }
.field input:focus, .field textarea:focus, .field select:focus { background: var(--card); border-color: var(--blue) }
.field select:disabled { color: var(--mut); cursor: not-allowed }
.field-help { font-size: 12.5px; color: var(--mut); margin-top: 8px; max-width: 62ch }

/* ————————————————— signed-out screen ————————————————— */
/* The photo is fixed to the viewport so a short screen can still scroll its
   card without the horizon scrolling out from under it. */
.screen { position: relative; min-height: 100vh; min-height: 100svh; overflow-x: clip }
.auth-inner, .pick-inner {
  position: relative; max-width: 1240px; margin: 0 auto;
  padding: 22px 40px calc(48px + env(safe-area-inset-bottom));
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
.auth-inner { align-items: flex-start }
.auth-card {
  width: min(460px, 100%); margin: auto 0;
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-float);
  padding: 32px;
  opacity: 0; transform: translateY(14px);
  animation: rise .7s var(--ease) .12s forwards;
}
.auth-card h1 {
  font-family: var(--disp); font-size: clamp(30px, 4vw, 38px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.05; text-wrap: balance;
}
.auth-card h2 { font-family: var(--disp); font-size: 25px; font-weight: 700; letter-spacing: -.022em }
.auth-lede { color: var(--mut); font-size: 14.5px; margin-top: 12px; max-width: 44ch }
.auth-form { margin-top: 24px }
.auth-form-tight { margin-top: 14px }
.auth-form .btn { width: 100%; margin-top: 16px }
.auth-or {
  display: flex; align-items: center; gap: 14px; margin: 22px 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line) }
#btn-google { width: 100% }
.ico-g { width: 18px; height: 18px }
.auth-foot { font-size: 12.5px; color: var(--mut); margin-top: 12px; max-width: 46ch }
#btn-have-code { margin-top: 20px; font-size: 13px }
.auth-back { margin-bottom: 16px; font-size: 13px; text-decoration: none }
.auth-glyph {
  width: 46px; height: 46px; border-radius: 50%; background: var(--blue-tint);
  display: grid; place-items: center; margin-bottom: 18px;
}
.auth-glyph svg { width: 22px; height: 22px; stroke: var(--blue-dark) }
.auth-glyph.spin svg { animation: spin 1s linear infinite }
.auth-wait .btn { margin-top: 22px }
/* Inside the card, above the heading — an error the reader cannot scroll past. */
.auth-alert {
  background: var(--orange-tint); border-radius: var(--r-md);
  border-left: 1px solid var(--orange);
  padding: 13px 16px; font-size: 13.5px; color: var(--ink);
  margin-bottom: 22px;
}
.auth-alert b { display: block; font-weight: 600; margin-bottom: 2px }
.auth-alert span { color: #7A4423 }

/* ————————————————— property picker ————————————————— */
.pick-head { margin-top: auto }
.pick-head h1 {
  font-family: var(--disp); font-size: clamp(32px, 4.4vw, 48px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.05; color: #fff; text-wrap: balance;
  opacity: 0; transform: translateY(14px); animation: rise .7s var(--ease) .08s forwards;
}
.pick-head p {
  color: #E4F1F9; font-size: 15px; margin-top: 10px; max-width: 52ch;
  opacity: 0; transform: translateY(14px); animation: rise .7s var(--ease) .16s forwards;
}
.pick-demo-only {
  color: #F8D4C4;
  font-size: 14px;
  margin-top: 8px;
  max-width: 56ch;
}
.pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px; margin: 30px 0 0; max-width: 920px;
  opacity: 0; transform: translateY(14px); animation: rise .7s var(--ease) .28s forwards;
}
.pick-card {
  text-align: left; padding: 20px; border-radius: var(--r-md); color: #fff;
  background: #FFFFFF24; border: 1px solid #FFFFFF2E;
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  transition: background .25s, transform .25s;
  display: flex; flex-direction: column; gap: 14px;
}
.pick-card:hover { background: #FFFFFF3D; transform: translateY(-2px) }
.pick-card .pc-top { display: flex; align-items: center; gap: 11px }
.pick-card .dot { width: 34px; height: 34px; font-size: 15px }
.pick-card .pc-name { font-family: var(--disp); font-size: 18px; font-weight: 700; letter-spacing: -.015em }
.pick-card .pc-meta {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  color: #DCEEF9; text-transform: uppercase; margin-top: 3px;
}
.pick-card .pc-foot { display: flex; align-items: center; gap: 8px; margin-top: auto }
.pick-card .pc-go {
  margin-left: auto; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF24;
}
.pick-card .pc-go svg { width: 11px; height: 11px; stroke: #fff }
.chip.glass-live { background: #FFFFFF38; color: #fff }
.chip.glass-off { background: #FFFFFF1F; color: #DCEEF9 }

/* ————————————————— overview band ————————————————— */
.modband { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px }
.modband-2 { grid-template-columns: 1fr 1fr; margin-top: 14px }
.modband .card { display: flex; flex-direction: column; position: relative; transition: box-shadow .25s, transform .25s }
.card-link { cursor: pointer }
.card-link:hover { box-shadow: var(--sh-float); transform: translateY(-2px) }
.mod-hd { display: flex; align-items: center; gap: 10px }
.mod-hd svg { width: 19px; height: 19px; stroke: var(--steel); flex-shrink: 0 }
.mod-hd h3 { font-family: var(--disp); font-size: 16.5px; font-weight: 700; letter-spacing: -.01em }
.mod-hd .st { margin-left: auto }
.big { font-family: var(--disp); font-size: 38px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-top: 16px }
/* Where a figure would sit if one existed. A known truth is written out in the
   display face at reading size — never a grey em-dash standing in for a value
   nobody is waiting on. */
.said {
  font-family: var(--disp); font-size: 20px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.2; margin-top: 16px; color: var(--ink); max-width: 20ch;
}
.big small { font-size: 18px; color: var(--mut); font-weight: 600 }
.figs-lbl { color: var(--faint); margin-top: 5px }
.card-figs { display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap }
.kv { display: flex; gap: 22px; margin-bottom: 4px }
.kv div .klabel { color: var(--faint) }
.kv div .v { font-family: var(--mono); font-size: 14px; font-weight: 600; margin-top: 4px }
.mod-copy { color: var(--mut); font-size: 13.5px; margin-top: 14px; max-width: 40ch }
.go {
  margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: 600;
  color: var(--blue-dark); display: inline-flex; gap: 7px; align-items: center;
}
.go .ico-sm { stroke: currentColor; transition: transform .25s var(--ease) }
.card-link:hover .go .ico-sm { transform: translateX(3px) }
.go-soon { color: var(--mut) }
.card .mech { margin-top: 14px; background: var(--canvas); border-radius: var(--r-sm); padding: 11px 13px; font-size: 13px; color: var(--mut) }
.card .mech b { color: var(--ink); font-weight: 600 }

/* ————————————————— chat ————————————————— */
.chat-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.chat-top h2 { font-family: var(--disp); font-size: 26px; font-weight: 700; letter-spacing: -.02em }
.chat-top .spacer { flex: 1 }
.tabs { display: flex; background: var(--line-soft); border-radius: 999px; padding: 4px }
.tabs button { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mut) }
.tabs button:hover { color: var(--ink) }
.tabs button[aria-current="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px #0A0E1414 }
.status-line { margin-top: 10px; color: var(--mut); font-size: 13.5px; max-width: 72ch }
/* Module bodies are one reading column; only the overview spends the full grid. */
.chat-pane,
#view-chat .thin-note,
#view-analytics .card,
#view-analytics .sec,
#view-analytics .sec-sub { max-width: 940px }
.chat-pane { margin-top: 30px }

/* ————————————————— chat > overview ————————————————— */
.ov-stack { display: grid; gap: 18px }

.ov-queue-h { font-family: var(--disp); font-size: 18px; font-weight: 700; letter-spacing: -.01em }
.ov-queue-empty { color: var(--mut); font-size: 13.5px; margin-top: 7px; max-width: 60ch }
.ov-queue-list { display: grid; gap: 12px; margin-top: 16px }
.ov-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px 17px;
}
.ov-q { font-family: var(--disp); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3 }
.ov-suggested { color: var(--mut); font-size: 13.5px; margin-top: 7px; max-width: 72ch }
.ov-suggested b { color: var(--ink); font-weight: 600 }
.ov-meta { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; margin-top: 10px }
.ov-item-foot { display: flex; align-items: center; gap: 8px; margin-top: 13px; flex-wrap: wrap }
.ov-edit-form { display: grid; gap: 14px }

.ov-empty-line { color: var(--mut); font-size: 13.5px; margin-top: 4px }

.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 18px; margin-top: 16px }
.ov-stat .klabel { color: var(--faint) }
.ov-stat .v { font-family: var(--disp); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px }

.ov-reasons { display: grid; gap: 14px; margin-top: 16px }
.ov-reason-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px }
.ov-reason-n { color: var(--faint) }
.ov-bar { display: block; width: 100%; height: 6px; margin-top: 7px }
.ov-bar-track { fill: var(--line-soft) }
.ov-bar-fill { fill: var(--steel-mid) }

.ov-leads-note { color: var(--mut); font-size: 13.5px; margin-top: 6px; max-width: 56ch }

/* ————————————————— property essentials + the basics ————————————————— */
.ess-card, .basics-card { margin-bottom: 22px }
.ess-card .mech { margin-bottom: 4px }
.ess-row-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.row.is-editing { flex-direction: column; align-items: stretch; gap: 10px }
.ess-edit-form { display: grid; gap: 12px; width: 100%; margin-top: 2px }
.ess-edit-form .field + .field { margin-top: 0 }
.ess-edit-foot { display: flex; gap: 8px }
.row .row-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
/* LOK-730: the LOKAL-only Chatwoot handoff — a quiet row, its note beneath.
   The pills wrap under the label rather than squeezing it into three lines. */
#row-chatwoot { flex-wrap: wrap; row-gap: 8px }
#chatwoot-rows #inbox-note { margin-top: 2px; font-size: 12.5px }
/* The popup-blocked fallback is the same quiet pill, as a link the member's
   own click opens — an anchor, so nothing is left for a blocker to refuse. */
#chatwoot-fallback { display: inline-flex; align-items: center; text-decoration: none }
.row-v.link-btn {
  color: var(--blue-dark); text-decoration: underline; text-decoration-color: #1233C840;
  transition: text-decoration-color .2s;
}
.row-v.link-btn:hover { text-decoration-color: currentColor }

/* ————————————————— where ely learns from ————————————————— */
.sources-card { margin-top: 26px }

.add-card { margin-bottom: 22px }
.add-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px }
.add-hd h3 { font-family: var(--disp); font-size: 16.5px; font-weight: 700; letter-spacing: -.01em }
.add-grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 14px }
.add-grid .field + .field { margin-top: 0 }
.add-grid + .field { margin-top: 14px }
.add-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap }
.add-foot .field-help { margin-top: 0 }

.know-list { display: grid; gap: 26px }
.know-group > .klabel { color: var(--faint); display: flex; align-items: baseline; gap: 10px }
.know-group > .klabel .gcount { color: var(--steel) }
.know-items { display: grid; gap: 8px; margin-top: 10px }
.know {
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--sh-card);
  padding: 16px 18px; transition: box-shadow .2s;
}
.know:hover { box-shadow: var(--sh-float) }
.know.is-off { background: #FBFCFD; box-shadow: none; border: 1px solid var(--line) }
.know-hd { display: flex; align-items: flex-start; gap: 12px }
.know-q { font-family: var(--disp); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; flex: 1; min-width: 0 }
.know-a { color: var(--mut); font-size: 13.5px; margin-top: 7px; max-width: 72ch; white-space: pre-wrap }
.know.is-off .know-a { color: #667080 }
.know-foot { display: flex; align-items: center; gap: 8px; margin-top: 13px; flex-wrap: wrap }
.know-src {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--faint); text-transform: uppercase; margin-right: auto;
}
.mini-btn {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--mut); background: var(--canvas); border: 1px solid var(--line);
  transition: background .18s, color .18s, border-color .18s;
}
.mini-btn:hover { background: #EAEFF3; color: var(--ink) }
.mini-btn.approve { color: var(--blue-dark); background: var(--blue-tint); border-color: transparent }
.mini-btn.approve:hover { background: #DDE4FF }
.mini-btn.danger { color: var(--orange-deep); background: var(--orange-tint); border-color: transparent }
.mini-btn.danger:hover { background: #FBE0CE }
.know-edit { display: grid; gap: 14px; margin-top: 14px }
.know-edit .field + .field { margin-top: 0 }

.empty {
  text-align: center; padding: 48px 32px; background: var(--card);
  border-radius: var(--r-lg); box-shadow: var(--sh-card);
}
.empty svg { width: 28px; height: 28px; stroke: var(--steel-mid); margin: 0 auto 14px; display: block }
.empty h3 { font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -.015em }
.empty p { color: var(--mut); max-width: 44ch; margin: 8px auto 0; font-size: 13.5px }

.rows { display: grid; gap: 7px; margin-top: 14px }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--canvas); border-radius: var(--r-sm); padding: 11px 14px; font-size: 13.5px;
}
.row .row-l { min-width: 0 }
.row .row-l small { display: block; font-weight: 400; color: var(--mut); font-size: 12px; margin-top: 2px }
.row .row-v {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--steel); text-transform: uppercase; text-align: right; flex-shrink: 0;
}
.row .row-v.on { color: var(--blue-dark) }
.row .row-v.off { color: #59626F }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }

.thin-note { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 18px 22px; flex-wrap: wrap }
.thin-note .ico { width: 20px; height: 20px; stroke: var(--steel-mid); flex-shrink: 0 }
.thin-note p { font-size: 13.5px; color: var(--mut); flex: 1; min-width: 220px }
.thin-note p b { color: var(--ink); font-weight: 600 }

/* ————————————————— analytics ————————————————— */
.stat-card { margin-top: 4px }
.chart-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 14px }
.chart-hd h3 { font-family: var(--disp); font-size: 16.5px; font-weight: 700; letter-spacing: -.01em }
.chart-hd .mono { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint) }
/* Three skeleton tiles read as loading. The week is described in prose until
   there is something counted to put in its place. */
.stat-lede { font-size: 14px; color: var(--mut); margin-top: 14px; max-width: 62ch }

/* ————————————————— coming-soon stubs ————————————————— */
.stub { padding: 56px 40px; text-align: center }
.stub svg { width: 30px; height: 30px; stroke: var(--steel-mid); margin: 0 auto 16px; display: block }
/* The chip rides beside the heading, the way it does in a module card head —
   never stacked above it as an eyebrow. */
.stub-hd { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap }
.stub-hd h3 { font-family: var(--disp); font-size: 21px; font-weight: 700; letter-spacing: -.015em }
.stub-hd .st { flex-shrink: 0 }
.stub p { color: var(--mut); max-width: 46ch; margin: 10px auto 0; font-size: 14px }
.peek {
  margin: 24px auto 0; max-width: 460px; background: var(--canvas);
  border-radius: var(--r-md); padding: 15px 18px; font-size: 13px;
  color: var(--mut); text-align: left;
}
.peek b { color: var(--ink); font-weight: 600 }
.stat-card .peek { margin-left: 0; max-width: 62ch }

.synth {
  margin-top: 34px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; color: var(--faint); text-transform: uppercase;
}

/* ————————————————— sheet ————————————————— */
.scrim {
  position: fixed; inset: 0; background: rgba(6,38,59,.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 60;
}
.scrim.on { opacity: 1; pointer-events: auto }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw);
  background: var(--card); box-shadow: var(--sh-float); z-index: 70;
  transform: translateX(105%); transition: transform .38s var(--ease);
  display: flex; flex-direction: column; border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.sheet.on { transform: none }
.sheet .sh-hd { display: flex; align-items: flex-start; gap: 12px; padding: 24px 24px 0 }
.sheet .sh-hd .klabel { color: var(--faint) }
.sheet .sh-hd h3 { font-family: var(--disp); font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px }
.sheet .close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  background: #F0F3F6; display: grid; place-items: center; flex-shrink: 0; transition: background .2s;
}
.sheet .close:hover { background: var(--line) }
.sheet .close svg { width: 15px; height: 15px; stroke: var(--mut) }
.sheet .sh-bd {
  padding: 20px 24px calc(30px + env(safe-area-inset-bottom));
  overflow-y: auto; scrollbar-color: #C7D0D8 transparent;
}
.sheet h4 { font-family: var(--disp); font-size: 15px; font-weight: 700; margin: 30px 0 8px }
.sh-note { font-size: 12.5px; color: var(--mut); margin-top: 10px; max-width: 56ch }
.snippet {
  margin-top: 12px; background: var(--deep); color: #DCEEF9;
  border-radius: var(--r-md); padding: 14px 16px;
  font-size: 11.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  /* Code has to read as typed: JetBrains Mono ligates <!-- and --> otherwise. */
  font-variant-ligatures: none;
}
.sheet .btn-quiet { margin-top: 12px }
.sh-out { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line) }

/* ————————————————— motion ————————————————— */
@keyframes rise { to { opacity: 1; transform: none } }
@keyframes fadein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes breathe { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ————————————————— responsive ————————————————— */
@media (max-width: 1020px) {
  .pulse { grid-template-columns: repeat(2, 1fr) }
  .hz-grid { flex-direction: column; align-items: stretch }
  .night { width: auto }
  .modband, .modband-2 { grid-template-columns: 1fr }
  .duo { grid-template-columns: 1fr }
  .add-grid { grid-template-columns: 1fr }
  .add-grid .field + .field { margin-top: 14px }
  .hz-inner, .rail-wrap, .auth-inner, .pick-inner { padding-left: 20px; padding-right: 20px }
  main { padding: 26px 20px 60px }
  .horizon.tall { min-height: 0 }
  .greet h1 { font-size: 34px }
}

@media (max-width: 640px) {
  .chrome { gap: 10px; flex-wrap: wrap }
  .wordmark { font-size: 22px }
  .wordmark small { display: none }
  .prop b { max-width: min(26ch, 44vw); overflow: hidden; text-overflow: ellipsis }
  .prop-menu { right: auto; left: 0; min-width: min(300px, calc(100vw - 40px)) }
  .greet { margin-top: 30px }
  .auth-card { padding: 26px 22px; width: 100% }
  .auth-inner, .pick-inner { padding-top: 18px }
  .pick-grid { grid-template-columns: 1fr }

  /* thumb reach: the module rail docks to the bottom of the screen.
     `--nav-h` is the rail's own footprint — the 52px pill plus 10px of air
     above and below it, plus the home bar — and `min-height` holds the rail
     to it, so the token and the box it describes cannot drift apart. */
  :root { --nav-h: calc(72px + env(safe-area-inset-bottom)) }
  .rail-wrap {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0;
    box-sizing: border-box; min-height: var(--nav-h);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(6,38,59,.14));
  }
  .rail button { min-width: auto; flex: none; padding: 9px 13px }
  .rail-sep { display: none }
  .shell { padding-bottom: calc(var(--nav-h) + 12px) }
  .horizon.tall .hz-inner { padding-bottom: 10px }
  .hz-grid { padding-bottom: 26px }
  .chat-top { gap: 10px }
  .chat-top .tabs { order: 3; width: 100% }
  .chat-top .tabs button { flex: 1 }

  /* the settings sheet becomes a bottom sheet */
  .sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 86vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(105%);
  }
  .sheet.on { transform: none }
}

/* Collapsible knowledge cards — the chip carries the state while folded. */
.fold-card > .fold-hd { cursor: pointer; list-style: none; user-select: none }
.fold-card > .fold-hd::-webkit-details-marker { display: none }
.fold-chev { width: 15px; height: 15px; stroke: var(--faint); transition: transform .2s var(--ease); flex-shrink: 0 }
.fold-card[open] .fold-chev { transform: rotate(90deg) }
.fold-card > .fold-hd:hover .fold-chev { stroke: var(--ink) }
.fold-card > .mech, .fold-card > .rows, .fold-card > .sec-sub { margin-top: 14px }

/* Performance date range */
.ov-range-row { display: flex; justify-content: flex-end; margin-bottom: 14px }
.ov-range button { font-family: var(--mono); font-size: 11px; letter-spacing: .04em }
.ov-range button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px #0A0E1414 }

/* First-week welcome card on Performance */
.ov-firstweek h3 { font-family: var(--disp); font-size: 20px; font-weight: 700; letter-spacing: -.015em }
.ov-firstweek p { color: var(--mut); font-size: 13.5px; margin-top: 8px; max-width: 62ch }
.ov-firstweek .q-foot { margin-top: 14px }

/* ————————————————————————— website (LOK-253) ————————————————————————— */
.ws-body { display: grid; gap: 18px }
.ws-card { padding: 22px }
.ws-quiet { background: var(--line-soft); border-color: transparent; box-shadow: none }
.ws-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.ws-sec-title { font-family: var(--disp); font-size: 18px; font-weight: 700; letter-spacing: -.01em }
.ws-gloss { color: var(--mut); font-size: 13.5px; margin-top: 6px; max-width: 74ch }
.ws-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 18px; margin-top: 16px }
.ws-tile .klabel { color: var(--faint) }
.ws-tile-v { font-family: var(--disp); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums }
.ws-tile-sub { color: var(--faint); font-size: 12px; margin-top: 4px }
.ws-delta { font-weight: 700 }
.ws-delta.up { color: #107A45 }
.ws-delta.down { color: #B42318 }
.ws-chart { position: relative; margin-top: 18px; outline-offset: 4px }
.ws-chart-svg { width: 100%; height: auto; display: block }
.ws-area { fill: var(--blue-tint) }
.ws-line { fill: none; stroke: var(--blue); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke }
.ws-guide { stroke: var(--line); stroke-width: 1; transition: opacity .15s var(--ease) }
.ws-dot { fill: var(--blue) }
.ws-tick { fill: var(--faint); font-size: 11px; font-family: var(--mono) }
.ws-tip {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--card); font-family: var(--mono); font-size: 12px;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  box-shadow: var(--sh-card); transition: left .12s var(--ease);
}
.ws-tip[data-chart-tip-position="0"] { left: 0% }
.ws-tip[data-chart-tip-position="1"] { left: 5% }
.ws-tip[data-chart-tip-position="2"] { left: 10% }
.ws-tip[data-chart-tip-position="3"] { left: 15% }
.ws-tip[data-chart-tip-position="4"] { left: 20% }
.ws-tip[data-chart-tip-position="5"] { left: 25% }
.ws-tip[data-chart-tip-position="6"] { left: 30% }
.ws-tip[data-chart-tip-position="7"] { left: 35% }
.ws-tip[data-chart-tip-position="8"] { left: 40% }
.ws-tip[data-chart-tip-position="9"] { left: 45% }
.ws-tip[data-chart-tip-position="10"] { left: 50% }
.ws-tip[data-chart-tip-position="11"] { left: 55% }
.ws-tip[data-chart-tip-position="12"] { left: 60% }
.ws-tip[data-chart-tip-position="13"] { left: 65% }
.ws-tip[data-chart-tip-position="14"] { left: 70% }
.ws-tip[data-chart-tip-position="15"] { left: 75% }
.ws-tip[data-chart-tip-position="16"] { left: 80% }
.ws-tip[data-chart-tip-position="17"] { left: 85% }
.ws-tip[data-chart-tip-position="18"] { left: 90% }
.ws-tip[data-chart-tip-position="19"] { left: 95% }
.ws-tip[data-chart-tip-position="20"] { left: 100% }
.ws-queries { margin-top: 14px; display: grid }
.ws-qrow { display: grid; grid-template-columns: 1fr 74px 82px 62px; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line-soft) }
.ws-qhead { border-top: 0; padding-bottom: 4px }
.ws-qtext { font-weight: 600; font-size: 14px }
.ws-cell { font-size: 13px }
.ws-cell-r { text-align: right }
.ws-cell::before { content: none }
.ws-channels { margin-top: 16px; display: grid; gap: 10px }
.ws-chan { display: grid; grid-template-columns: 128px 1fr 110px; gap: 12px; align-items: center }
.ws-chan-name { font-size: 13.5px; font-weight: 600 }
.ws-bar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; display: block }
.ws-bar i { display: block; height: 100%; border-radius: 999px; background: var(--steel-mid) }
.ws-chan-n { font-size: 12px; color: var(--faint); text-align: right }
@media (max-width: 640px) {
  .ws-card { padding: 18px }
  .ws-tiles { grid-template-columns: repeat(2, 1fr); gap: 14px }
  .ws-qhead { display: none }
  .ws-qrow { grid-template-columns: 1fr; gap: 3px; padding: 12px 0 }
  .ws-qtext { font-size: 15px }
  .ws-cell-r { text-align: left }
  .ws-cell { display: inline; margin-right: 14px; color: var(--mut) }
  .ws-cell::before { content: attr(data-label) ' '; font-family: var(--sans); font-size: 12px; color: var(--faint) }
  .ws-chan { grid-template-columns: 96px 1fr 84px; gap: 8px }
  .ws-chan-n { font-size: 11px }
}

/* ————————————————————————— insights ————————————————————————— */
/* Two panes over one date range. Everything leans on the ws-* grammar —
   same cards, same chart bones — with the range picker, KPI cards, prior-
   period line, legend, and paged tables layered on. */
.ins-range-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px }
.ins-range button { font-size: 12.5px }
.ins-range button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px #0A0E1414 }
.ins-more-wrap { position: relative }
.ins-more {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--mut); background: var(--line-soft); transition: color .18s, background .18s;
}
.ins-more:hover { color: var(--ink) }
.ins-more.on { background: var(--blue-tint); color: var(--blue-dark) }
.ins-more .ico-sm { width: 14px; height: 14px; stroke: currentColor }
.ins-more-menu { min-width: 200px }
.ins-custom { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap }
.ins-custom .field + .field { margin-top: 0 }
.ins-date input { padding: 9px 12px; font-size: 13px }
.ins-custom .btn { padding: 10px 16px }

.ins-body { margin-top: 18px }
.ins-stack { display: grid; gap: 18px }

.ins-summary { padding: 22px }
.ins-summary .klabel { color: var(--faint) }
.ins-summary-text { font-family: var(--disp); font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; margin-top: 10px; max-width: 74ch }
.ins-summary-text b { font-weight: 700 }

.ins-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.ins-kpis-4 { grid-template-columns: repeat(4, 1fr) }
.ins-kpi { padding: 20px 22px }
.ins-kpi .klabel { color: var(--faint) }
.ins-kpi-v { font-family: var(--disp); font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums }
.ins-kpi-v.dash { font-size: 28px }
.ins-kpi-sub { color: var(--faint); font-size: 12px; margin-top: 6px }
.ins-kpi-sub .ws-delta { margin-right: 4px }

.ins-chart { margin-top: 18px }
.ins-line-prior { fill: none; stroke: var(--steel-mid); stroke-width: 1.5; stroke-dasharray: 5 5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75 }
.ins-dot-prior { fill: var(--steel-mid) }
.ins-line-b { fill: none; stroke: var(--blue); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke }
.ins-dot-b { fill: var(--blue) }
.ins-line-imp { fill: none; stroke: var(--steel-mid); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke }
.ins-dot-imp { fill: var(--steel-mid) }

.ins-legend { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap }
.ins-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--faint) }
.ins-legend-item i { width: 18px; height: 0; border-top: 2.5px solid; border-radius: 2px }
.ins-swatch-a { color: var(--blue) }
i.ins-swatch-prior { color: var(--steel-mid); border-top-style: dashed }
.ins-swatch-imp { color: var(--steel-mid) }

.ins-page-path { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ins-page-row { grid-template-columns: 180px 1fr 110px }

.ins-table { margin-top: 14px; display: grid }
.ins-qrow { grid-template-columns: 1fr 92px 84px 96px 84px }
.ins-sort { text-align: right; color: var(--faint); transition: color .18s; justify-self: end; display: inline-flex; align-items: baseline; gap: 4px }
.ins-sort:hover { color: var(--ink) }
.ins-sort.on { color: var(--blue-dark) }
.ins-sort-dir { font-family: var(--mono); font-size: 10px }
.ins-pager { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); margin-top: 4px }
.ins-page-btn { padding: 8px 14px; font-size: 12.5px }
.ins-pager-note { font-size: 11px; color: var(--faint) }

/* Ad Performance is the third Insights pane, so its reporting grammar stays
   deliberately local: the same cards, spacing, KPI grid, chart, and table
   rhythm as Insights/Search, with blue for Google and orange for Meta. */
.ad-report { padding-bottom: 12px }
.ad-coverage {
  display: flex; align-items: center; gap: 10px; min-height: 38px;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #FFFFFF99; color: var(--mut); font-size: 12.5px;
}
.ad-coverage.attention { background: var(--orange-tint); border-color: #F5610A24 }
.ad-coverage-mark { width: 7px; height: 7px; border-radius: 50%; background: #107A45; flex: none }
.ad-coverage.attention .ad-coverage-mark { background: var(--orange) }
.ad-line-meta {
  fill: none; stroke: var(--orange); stroke-width: 2.25; stroke-linejoin: round;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.ad-dot-meta { fill: var(--orange) }
.ad-swatch-meta { color: var(--orange) }

.ad-platform-grid, .ad-budget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px }
.ad-platform, .ad-budget { min-width: 0; padding: 17px; background: var(--canvas); border: 1px solid var(--line-soft); border-radius: var(--r-md) }
.ad-platform-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.ad-platform-title { display: flex; align-items: center; gap: 9px }
.ad-platform-title h4 { font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -.01em }
.ad-provider-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none }
.ad-meta .ad-provider-dot { background: var(--orange) }
.ad-status { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--faint) }
.ad-status.live { color: #107A45 }
.ad-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 12px; margin-top: 17px }
.ad-stat { min-width: 0 }
.ad-stat .klabel { color: var(--faint); font-size: 9.5px; letter-spacing: .1em }
.ad-stat-v { font-family: var(--disp); font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.ad-stat-note { color: var(--faint); font-size: 10.5px; margin-top: 2px }

.ad-budget-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 13px }
.ad-budget-meter {
  display: block; width: 100%; height: 7px; border: 0; border-radius: 999px;
  overflow: hidden; margin-top: 15px; background: var(--line); appearance: none;
}
.ad-budget-meter::-webkit-progress-bar { border-radius: inherit; background: var(--line) }
.ad-budget-meter::-webkit-progress-value { border-radius: inherit; background: var(--blue) }
.ad-budget-meter.meta::-webkit-progress-value { background: var(--orange) }
.ad-budget-meter::-moz-progress-bar { border-radius: inherit; background: var(--blue) }
.ad-budget-meter.meta::-moz-progress-bar { background: var(--orange) }
.ad-budget-used, .ad-budget-note { color: var(--faint); font-size: 11.5px; margin-top: 7px }
.ad-budget-note { line-height: 1.45 }
.ad-budget-total { color: var(--steel); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-top: 14px }

.ad-compare { margin-top: 16px; border-top: 1px solid var(--line-soft) }
.ad-compare-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(105px, 1fr)); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-soft) }
.ad-compare-head { color: var(--faint); font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase }
.ad-compare-label { font-size: 13.5px; font-weight: 600 }
.ad-compare-cell { font-family: var(--mono); font-size: 12px; color: var(--mut); text-align: right; font-variant-numeric: tabular-nums }
.ad-compare-cell.total { color: var(--ink); font-weight: 700 }

.ad-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 14px; margin-top: 20px; padding: 17px; border-radius: var(--r-md); background: var(--canvas) }
.ad-subhead { margin-top: 25px; padding-top: 21px; border-top: 1px solid var(--line-soft) }
.ad-subhead h4 { font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -.01em }
.ad-subhead p { color: var(--mut); font-size: 12.5px; margin-top: 3px }

.ad-campaign-table { display: grid; margin-top: 13px }
.ad-campaign-row { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(6, minmax(72px, .72fr)); gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft) }
.ad-campaign-head { border-top: 0; padding-top: 0; color: var(--faint); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: right }
.ad-campaign-head span:first-child { text-align: left }
.ad-campaign-name { min-width: 0 }
.ad-campaign-name b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ad-campaign-name small { display: block; color: var(--faint); font-size: 10.5px; margin-top: 2px; text-transform: capitalize }
.ad-campaign-cell { color: var(--mut); font-family: var(--mono); font-size: 10.5px; text-align: right; font-variant-numeric: tabular-nums }

.ad-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 18px }
.ad-method-item { padding-top: 13px; border-top: 1px solid var(--line-soft) }
.ad-method-item h4 { font-family: var(--disp); font-size: 14px; font-weight: 700 }
.ad-method-item p { color: var(--mut); font-size: 12.5px; margin-top: 4px }

@media (max-width: 900px) {
  .ins-kpis-4 { grid-template-columns: repeat(2, 1fr) }
  .ad-stat-grid { grid-template-columns: repeat(2, 1fr) }
  .ad-budget-values { grid-template-columns: repeat(2, 1fr) }
  .ad-detail-grid { grid-template-columns: repeat(2, 1fr) }
  .ad-campaign-row { grid-template-columns: minmax(160px, 1.4fr) repeat(6, minmax(64px, .7fr)); gap: 7px }
}
@media (max-width: 640px) {
  .ins-kpis { grid-template-columns: 1fr 1fr; gap: 14px }
  .ins-kpis-4 { grid-template-columns: 1fr 1fr }
  .ins-kpi-v { font-size: 27px }
  .ins-summary-text { font-size: 16.5px }
  .ins-qrow { grid-template-columns: 1fr; gap: 3px; padding: 12px 0 }
  .ins-sort { justify-self: start; text-align: left }
  /* .ws-qhead is display:none on phones: the GSC table drops its header row and
     labels each cell instead. The Insights tables cannot do that — their only
     sorting controls live in that row — so re-show it as a wrapping strip of
     buttons, without the column-name span the data-labels already cover. */
  .ins-qrow.ws-qhead { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 0 0 8px }
  .ins-qrow.ws-qhead > span.klabel { display: none }
  .ins-page-row { grid-template-columns: 110px 1fr 84px }
  .ins-pager { justify-content: space-between }
  .ins-range-row { gap: 8px }
  .ad-platform-grid, .ad-budget-grid { grid-template-columns: 1fr }
  .ad-budget-values { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ad-compare-head { display: none }
  .ad-compare-row { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 13px 0 }
  .ad-compare-label { grid-column: 1 / -1; margin-bottom: 3px }
  .ad-compare-cell { text-align: left }
  .ad-compare-cell::before { display: block; color: var(--faint); font-family: var(--sans); font-size: 10px; font-weight: 400 }
  .ad-compare-cell:nth-child(2)::before { content: 'Google Ads' }
  .ad-compare-cell:nth-child(3)::before { content: 'Meta Ads' }
  .ad-compare-cell:nth-child(4)::before { content: 'Observed total' }
  .ad-compare-cell.total { grid-column: 1 / -1 }
  .ad-campaign-head { display: none }
  .ad-campaign-row { grid-template-columns: 1fr 1fr; gap: 7px 14px; padding: 14px 0 }
  .ad-campaign-name { grid-column: 1 / -1; margin-bottom: 3px }
  .ad-campaign-name b { white-space: normal }
  .ad-campaign-cell { text-align: left }
  .ad-campaign-cell::before { content: attr(data-label) ' '; display: block; color: var(--faint); font-family: var(--sans); font-size: 10px }
  .ad-method-grid { grid-template-columns: 1fr }
}

/* ————————————————— brand (LOK-258) ————————————————— */
/* The module reads as the dossier's kit: identity card up top, then look,
   voice, the read-only guide, locations, and rules — one 940px column. */
#view-brand > .status-line { max-width: 72ch }
#brand-body { max-width: 940px }
#brand-body h2.sec { margin-top: 34px }
.brand-see .soon { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: inherit; margin-left: 7px }

.brand-id-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.brand-id-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); flex-shrink: 0 }
.brand-id-name { font-family: var(--disp); font-size: 16.5px; font-weight: 700; letter-spacing: -.01em }
.brand-id-meta { color: var(--mut); font-size: 13px; margin-top: 2px }
.brand-id-open { margin-left: auto }
.brand-id-fields { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft) }

.brand-group-lbl { color: var(--faint); margin-top: 20px }
.brand-swatches { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap }
.brand-swatch { position: relative; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--card); padding: 8px; width: 108px; cursor: pointer; transition: box-shadow .2s }
.brand-swatch:hover { box-shadow: var(--sh-card) }
.brand-swatch .well { display: block; height: 44px; border-radius: 7px; margin-bottom: 8px; border: 1px solid #0A0E1414 }
.brand-swatch .s-name { display: block; font-size: 12px; font-weight: 600; color: var(--ink) }
.brand-swatch .s-hex { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px }
.brand-swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0 }
.brand-swatch:focus-within { outline: 2px solid var(--blue); outline-offset: 2px }

.brand-tones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap }
.brand-loc-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 16px }
.brand-loc-hd h4 { font-size: 14.5px; font-weight: 600 }
.brand-loc-hd .btn { margin-left: auto }
.brand-loc-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft) }

/* Read-only guide rows open the sheet — the row itself is the affordance. */
button.brand-row-open { width: 100%; text-align: left; cursor: pointer; transition: background .2s }
button.brand-row-open:hover { background: #EDF2F6 }
button.brand-row-open .ico-sm { stroke: var(--faint); margin-left: 10px }
button.brand-row-open:hover .ico-sm { stroke: var(--ink) }
.brand-guide-copy { font-size: 14px; line-height: 1.65; color: var(--ink) }
.brand-guide-copy h4:first-child { margin-top: 8px }
.brand-guide-copy p + p { margin-top: 12px }
.brand-guide-copy ul { margin: 10px 0 0 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--mut) }

.brand-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; flex-wrap: wrap }
/* The resting primary stays in the orange family — a disabled Save must never
   read as the deferred SOON button beside it. */
#brand-save[disabled] { background: var(--orange-tint); color: var(--orange-deep); box-shadow: none }
#brand-save[disabled]:hover { background: var(--orange-tint); transform: none }
#brand-save { transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease) }
#brand-chip { transition: background-color .5s var(--ease), color .5s var(--ease) }

@media (max-width: 640px) {
  #view-brand .chat-top .btn { width: 100%; justify-content: center }
  /* Save (the screen's one primary) outranks the deferred SOON button. */
  #view-brand .chat-top #brand-save { order: 4 }
  #view-brand .chat-top #brand-see { order: 5 }
  .brand-loc-hd .btn { margin-left: 0; width: 100% }
  .brand-swatch { width: calc(33.3% - 7px) }
}
/* Long mono values (addresses) wrap inside the row instead of pushing the page. */
#brand-body .row .row-v { min-width: 0; flex-shrink: 1; overflow-wrap: anywhere }

/* The approve pill — one small loud object that jumps to the review queue.
   It borrows the need-chip palette so "waiting on you" reads the same
   everywhere, and stays fit-content so it never becomes a banner. */
.approve-pill {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  background: var(--orange-tint); color: var(--orange-deep);
  border-radius: 999px; padding: 8px 15px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: filter .2s;
}
.approve-pill:hover { filter: brightness(.96) }
.card .approve-pill { margin-top: 14px }
/* The queue card is a scroll target; keep the landing focus quiet. */
#ov-approve-queue:focus { outline: none }


/* ————————————————————————— Ask Ely (LOK-541) ————————————————————————— */
.ask-fab {
  position: fixed; right: 26px; bottom: 24px; z-index: 55;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 19px 12px 15px; border-radius: 999px;
  background: var(--deep); color: #fff; border: 1px solid #FFFFFF2E;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 26px #06263B47, 0 2px 6px #0A0E141F;
  transition: transform .22s var(--ease), background .22s, box-shadow .22s;
}
.ask-fab[hidden] { display: none }
.ask-fab:hover { background: var(--steel); transform: translateY(-2px) }
.ask-fab svg { width: 16px; height: 16px; stroke: #9EC4FF; flex-shrink: 0 }

.ask-scrim {
  position: fixed; inset: 0; background: rgba(6,38,59,.42);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 60;
}
.ask-scrim.on { opacity: 1; pointer-events: auto }
.ask-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 94vw);
  background: var(--card); box-shadow: var(--sh-float); z-index: 70;
  transform: translateX(105%); transition: transform .38s var(--ease);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.ask-sheet[hidden] { display: none }
.ask-sheet.on { transform: none }
.ask-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 22px 22px 15px; border-bottom: 1px solid var(--line-soft);
}
.ask-hd h3 { font-family: var(--disp); font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 }
.ask-sub {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 5px 0 0;
}
.ask-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--line-soft); display: grid; place-items: center; flex-shrink: 0; transition: background .2s;
}
.ask-close:hover { background: var(--line) }
.ask-close svg { width: 15px; height: 15px; stroke: var(--mut) }
.ask-msgs { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain }
.ask-empty { color: var(--mut); font-size: 13.5px; line-height: 1.5; margin: 0 }
.ask-msg {
  max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Ely's answers are paragraphs and bullet lists (see askAnswerBody). A single
   paragraph must sit exactly where the old textContent bubble put its text,
   so paragraphs carry no margin of their own and only siblings are spaced. */
.ask-msg p { margin: 0 }
.ask-msg > * + * { margin-top: 9px }
.ask-msg .ask-list { margin: 0; padding-left: 17px; list-style: disc }
.ask-msg .ask-list li { margin: 0; padding-left: 2px }
.ask-msg .ask-list li + li { margin-top: 5px }
.ask-msg .ask-list li::marker { color: var(--faint) }
.ask-msg ol.ask-list { list-style: decimal }
.ask-msg strong { font-weight: 650 }
.ask-msg a.ask-link { color: inherit; text-underline-offset: 2px }
.ask-msg.owner { align-self: flex-end; background: var(--deep); color: #fff; border-bottom-right-radius: 6px }
.ask-msg.ely { align-self: flex-start; background: var(--canvas); color: var(--ink); border: 1px solid var(--line-soft); border-bottom-left-radius: 6px }
.ask-meta { align-self: flex-start; font-size: 10.5px; color: var(--faint); margin: -4px 0 0 4px; max-width: 86% }
.ask-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 12px 14px }
.ask-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--steel-mid); animation: ask-blink 1.1s infinite ease-in-out }
.ask-typing i:nth-child(2) { animation-delay: .15s }
.ask-typing i:nth-child(3) { animation-delay: .3s }
@keyframes ask-blink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }
.ask-foot { padding: 0 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft) }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 2px }
.ask-suggest[hidden] { display: none }
.ask-pill {
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; transition: background .2s, border-color .2s;
}
.ask-pill:hover { background: var(--canvas); border-color: var(--steel-mid) }
.ask-form { display: flex; gap: 8px; padding-top: 12px }
.ask-form input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
  font: inherit; font-size: 14px; background: var(--card); color: var(--ink);
}
.ask-form input:focus { outline: 2px solid var(--steel-mid); outline-offset: 1px }
.ask-form input:disabled { color: var(--faint); background: var(--line-soft) }
.ask-note { font-size: 11.5px; color: var(--faint); margin: 10px 0 0; line-height: 1.45 }

@media (max-width: 640px) {
  .ask-fab { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)) }
  .ask-sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 82vh; max-height: 88vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(105%);
  }
  .ask-sheet.on { transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .ask-typing i, .ask-sheet, .ask-scrim, .ask-fab { animation: none; transition: none }
}

/* Managed Settings shares the property shell and its normal page scrolling. */
.settings-page { max-width: 780px; padding: 24px 0 48px; }
.settings-page h2 { font-family: var(--disp); margin: 6px 0 24px; }
.settings-page h3 { font-family: var(--disp); margin: 30px 0 10px; }
.settings-page h4 { margin: 24px 0 8px; }
.settings-page .btn-quiet { margin-top: 12px; }
.managed-launch-form { display: grid; gap: 10px; margin-top: 12px; }
.managed-launch-form .field { margin: 0; }
.managed-check { display: flex; align-items: center; gap: 8px; }
.managed-references { display: grid; gap: 8px; margin-top: 4px; }
.managed-references .field-help { margin: 0; }
.people-form { display:grid; grid-template-columns:minmax(0,1fr) 120px auto; gap:10px; align-items:end; margin:12px 0 6px; }
.people-form .field { margin:0; }
.people-form .btn { margin:0; white-space:nowrap; }
.responder-form { margin-top: 10px; }
.responder-form .btn { width: 100%; }
.chat-hours-fieldset { grid-column: 1 / -1; border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.chat-hours-fieldset .field-help { margin: 0 0 10px; }
.chat-hours-grid { display: grid; gap: 6px; }
.chat-hours-head, .chat-hours-row { display: grid; grid-template-columns: minmax(72px, 1fr) 112px 88px 88px; gap: 8px; align-items: center; }
.chat-hours-head { color: var(--faint); font-size: 11px; }
.chat-hours-row > span { font-size: 13px; }
.chat-hours-row input:disabled { color: var(--faint); background: var(--line-soft); }
@media (max-width:640px) { .chat-hours-head, .chat-hours-row { grid-template-columns: minmax(68px, 1fr) 98px minmax(64px, 1fr) minmax(64px, 1fr); gap: 5px; } }
.people-card { border-top:1px solid var(--line); padding:12px 0; }
.people-card:first-child { border-top:0; }
.people-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.people-email { overflow-wrap:anywhere; }
.people-states { display:grid; gap:4px; margin-top:8px; }
.people-state { display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.people-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.people-actions .btn { margin:0; }
@media (max-width:640px) { .people-form { grid-template-columns:1fr; } .people-form .btn { width:100%; } .people-state { align-items:baseline; } }

/* ————————————————— chat > conversations desk (LOK-552) —————————————————
   An inbox, not a list on a page: two white cards side by side, each filling
   the desk's height, each scrolling its own content. Brand lives in the
   details — mono clocks, the blue-tint disc, one orange accent for a guest
   who is actually waiting. */
#pane-conversations { max-width: none }
.native-desk {
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px;
  height: clamp(520px, calc(100vh - 250px), 840px); margin-top: 14px;
}
.native-desk > * { min-height: 0; padding: 0; overflow: hidden }

/* — the list card — */
.native-desk-list { display: flex; flex-direction: column }
.native-desk-hd { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0 }
.native-desk-hd .sec { margin: 0; font-size: 20px; flex: 1; min-width: 0 }
.native-desk-note {
  padding: 4px 20px 14px; margin: 0; color: var(--mut); font-size: 12.5px; line-height: 1.4;
  border-bottom: 1px solid var(--line-soft);
}
/* Someone is actually waiting: the one place the list raises its voice. */
.native-desk-note[data-waiting="true"] { color: var(--orange-deep); font-weight: 600 }
.native-desk-rows {
  display: block; margin: 0; padding: 10px 12px 14px; overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: #C9D2DA transparent;
}
.native-desk-rows::-webkit-scrollbar { width: 9px }
.native-desk-rows::-webkit-scrollbar-thumb { background: #C9D2DA; border: 3px solid var(--card); border-radius: 999px }
.native-desk-rows::-webkit-scrollbar-thumb:hover { background: #A9B5C0 }

.native-desk-group {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .13em;
  /* Small caps, not text-transform: the label reads as typed to a screen
     reader and to anything that copies it. */
  font-variant-caps: all-small-caps; color: var(--faint);
  margin: 18px 0 6px; padding: 0 8px;
}
.native-desk-group:first-child { margin-top: 2px }

/* — a row — */
.native-desk-row {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr);
  align-items: start; gap: 11px; width: 100%; text-align: left;
  background: transparent; border-radius: var(--r-sm); padding: 10px 11px;
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.native-desk-row + .native-desk-row { margin-top: 2px }
.native-desk-row:hover { background: var(--canvas) }
.native-desk-row:hover .desk-disc { background: #E1E7F8 }
.native-desk-disc, .desk-disc {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  transition: background .18s var(--ease);
}
.desk-top { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.native-desk-row .row-l { min-width: 0; display: block }
.native-desk-row .row-l b { font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--ink) }
.desk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0; align-self: center }
.desk-time {
  margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--faint); letter-spacing: .02em;
}
.native-desk-row .row-l small {
  display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.native-desk-row .row-l small i { font-style: normal; color: var(--faint); font-weight: 500 }
/* Desk labels are prose ("Waiting 7h", "2 unread"), not uppercase metric tokens. */
.native-desk-row .row-v {
  display: inline-block; margin-top: 7px; text-transform: none; letter-spacing: .01em;
  font-size: 10.5px; padding: 3px 8px; border-radius: 999px;
  background: var(--line-soft); color: var(--mut); text-align: left;
}
.native-desk-row .row-v.on { background: var(--orange-tint); color: var(--orange-deep) }

/* The accent is an inset mark inside the row's own radius, not a border on it. */
.native-desk-row[data-kind="waiting"]::before,
.native-desk-row[aria-pressed="true"]::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 999px;
}
.native-desk-row[data-kind="waiting"]::before { background: var(--orange) }
.native-desk-row[data-unread="true"] .row-l b { font-weight: 700 }
.native-desk-row[aria-pressed="true"] { background: var(--blue-tint) }
.native-desk-row[aria-pressed="true"]::before { background: var(--blue) }
.native-desk-row[aria-pressed="true"] .desk-disc { background: #DCE3FB }
.native-desk-row[aria-pressed="true"] .row-l small { color: #4A5468 }

.native-desk-more {
  display: block; width: 100%; margin-top: 14px; padding: 9px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 600; color: var(--blue-dark);
}
.native-desk-more:hover:not(:disabled) { background: var(--blue-tint) }
.native-desk-more:disabled { color: var(--faint) }

.native-desk-aside { margin-top: 14px }

/* — the thread card — */
.native-thread { display: flex; flex-direction: column; overflow-y: auto; scroll-padding-top: 62px }
.native-thread[data-state="empty"] { align-items: center; justify-content: center; overflow: hidden }
.native-thread-hd {
  position: sticky; top: 0; z-index: 2; background: var(--card);
  padding: 16px 22px 12px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.native-thread-hd h3 {
  font-family: var(--disp); font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin: 0;
  min-width: 0; overflow-wrap: anywhere;
}
.native-thread-hd .native-thread-since {
  width: 100%; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .04em; color: var(--faint);
}
.native-thread > :not(.native-thread-hd):not(.native-thread-foot) { margin-left: 22px; margin-right: 22px }
.native-thread > .sec-sub { margin-top: 14px; margin-bottom: 0; font-size: 12.5px }
.native-thread > .alert { margin-top: 14px }
.native-thread > .native-summary-card {
  margin-top: 14px; box-shadow: none; background: var(--canvas);
  border-radius: var(--r-md); padding: 14px 16px; font-size: 13px;
}
.native-thread > .native-summary-card .sec { font-size: 15px }
.native-thread > .native-summary-card .native-summary-field { margin-top: 9px }
.native-thread > .native-summary-card .native-summary-field b { font-size: 12.5px }
.native-thread > .native-summary-card p { font-size: 13px; line-height: 1.45 }

.native-msg {
  max-width: 78%; margin-top: 10px; padding: 10px 13px; border-radius: var(--r-md);
  background: var(--canvas); box-shadow: none; font-size: 13.5px;
}
.native-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45 }
.native-msg > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 9px }
.native-msg .ask-list { margin: 0; padding-left: 17px; list-style: disc }
.native-msg .ask-list li { margin: 0; padding-left: 2px }
.native-msg .ask-list li + li { margin-top: 5px }
.native-msg .ask-list li::marker { color: var(--faint) }
.native-msg ol.ask-list { list-style: decimal }
.native-msg strong { font-weight: 650 }
.native-msg a.ask-link { color: inherit; text-underline-offset: 2px }
.native-msg .native-msg-who {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
  font-size: 11px; font-weight: 600; color: var(--mut);
}
.native-msg .native-msg-at {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .03em;
  font-variant-numeric: tabular-nums; color: var(--faint);
}
.native-thread > .native-msg[data-side="out"] { margin-left: auto; margin-right: 22px }
.native-msg[data-actor="bot"] { background: var(--blue-tint) }
.native-msg[data-actor="bot"] .native-msg-who { color: var(--blue-dark) }
.native-msg[data-actor="bot"] .native-msg-at { color: #5B6FCF }
.native-msg[data-actor="human"] { background: var(--blue); color: #fff }
.native-msg[data-actor="human"] .native-msg-who, .native-msg[data-actor="human"] .native-msg-at { color: #E8ECFF }
.native-msg[data-actor="human"] .sec-sub { color: #E8ECFF }
.native-msg .btn { margin-top: 10px }
.native-msg[data-actor="human"] .btn-quiet { background: #FFFFFF1F; color: #fff; border-color: #FFFFFF3D }
.native-msg[data-actor="human"] .btn-quiet:hover { background: #FFFFFF2E }
.native-thread > .btn-quiet[data-history-direction] { align-self: center; margin-top: 14px }
/* The newest message keeps air above the action shelf it lands against. */
.native-thread > .native-msg:last-of-type { margin-bottom: 14px }

.native-thread-foot {
  position: sticky; bottom: 0; z-index: 2; margin-top: auto; background: var(--card);
  border-top: 1px solid var(--line-soft); padding: 12px 22px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 18px -14px #0A0E1440;
}
.native-thread-foot .native-action-card { box-shadow: none; padding: 0; background: transparent }
.native-thread-foot .sec-sub { margin: 0 0 8px; font-size: 12.5px }
.native-thread-foot .field-lbl { font-size: 11px }
.native-thread-foot textarea { font-size: 13.5px; padding: 9px 11px }
.native-thread-foot .btn { margin-top: 8px; padding: 8px 14px; font-size: 13px }
.native-thread-foot .btn-row { gap: 7px }
/* LOK-729 U1: the shelf's secondary actions — claim, resolve, return to Ely,
   refresh the status. A desk this wide has room for all of them, so the row is
   simply open and the More toggle that collapses it on a phone never shows. */
.native-shelf-more { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px }
.native-shelf-more .mini-btn:disabled { color: var(--faint); background: var(--line-soft); cursor: not-allowed }
.native-shelf-more .mini-btn:disabled:hover { background: var(--line-soft); color: var(--faint) }
/* Scoped to the shelf so it outranks `.btn-ghost`, which comes later. */
.native-thread-foot .native-shelf-more-toggle { display: none }
/* LOK-733 U5: the send chord, said once under the box it applies to. */
.native-thread-foot .field-help { margin-top: 6px; font-size: 11.5px }

/* LOK-733 U5: "Insert an approved answer" and the search it opens. The search
   is only in the shelf while it is open, so a composer at rest costs the
   guest's message one pill of height and nothing more. */
.desk-insert { margin-bottom: 10px }
.desk-insert-search {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; margin-top: 8px;
  transition: border-color .2s, background .2s;
}
.desk-insert-search::placeholder { color: var(--mut); opacity: 1 }
.desk-insert-search:focus { background: var(--card); border-color: var(--blue) }
.desk-insert-results { display: grid; gap: 6px; margin-top: 8px; max-height: 188px; overflow-y: auto }
.desk-insert-results:empty { display: none }
.desk-insert-hit {
  display: grid; gap: 2px; text-align: left; padding: 8px 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: background .18s, border-color .18s;
}
.desk-insert-hit b { font-size: 13px; font-weight: 600; color: var(--ink) }
.desk-insert-hit span { font-size: 12.5px; color: var(--mut); overflow-wrap: anywhere }
.desk-insert-hit:hover { background: var(--canvas) }
.desk-insert-hit[aria-selected="true"] { background: var(--blue-tint); border-color: var(--blue) }
.desk-insert-note { margin: 8px 0 0 }

.native-desk-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px; margin: 0; text-align: center; color: var(--mut);
}
.native-desk-placeholder svg { width: 42px; height: 42px; stroke: #B9C6D2 }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 7px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--mut); transition: background .18s var(--ease), color .18s var(--ease);
}
.btn-ghost .ico-sm { stroke: currentColor }
.btn-ghost:hover { background: var(--canvas); color: var(--ink) }

/* Desktop reads list and thread at once; a phone shows one half at a time. */
.native-thread-hd .native-desk-back { display: none }
@media (max-width: 1080px) {
  .native-desk { grid-template-columns: 320px minmax(0, 1fr) }
}
@media (max-width: 900px) {
  .native-desk { grid-template-columns: 1fr; height: auto; min-height: 0 }
  /* `min-width: 0`, or a grid row's automatic minimum is its own min-content:
     the thread header is one unwrapping row (below), and without this the card
     grows past the screen and takes the page sideways with it. */
  .native-desk > * { overflow: visible; min-width: 0 }
  .native-desk[data-view="thread"] .native-desk-list { display: none }
  .native-desk[data-view="list"] #native-chat-thread { display: none }
  .native-desk-rows { overflow-y: visible; flex: none }
  .native-thread { overflow-y: visible }
  .native-thread[data-state="empty"] { min-height: 220px }
  /* LOK-729 U1: a thread on a phone is the guest's message, not the module
     around it. The Chat title row (title, live chip, tabs) and the module
     lede are about the module and about the list; measured on the audit's
     390x844 capture they take ~430px off the top of the screen, which
     was the whole reason a thread opened with no message on it. While a thread
     is open they stand down and the thread's own header — sticky, one slim row
     — is the top of the screen. `:has()` is read from the pane that is
     actually showing: `data-view` stays on `thread` while the member is on
     another Chat tab, and Performance must keep its title row. */
  #view-chat:has(.chat-pane:not([hidden]) #native-desk[data-view="thread"]) > .chat-top,
  #view-chat:has(.chat-pane:not([hidden]) #native-desk[data-view="thread"]) > #chat-lede { display: none }
  /* The rail floats over the page, so the desk keeps the rail's height of room
     beneath its last line: the list's Load more and the Performance link come
     to rest above the rail rather than under it. Padding, not margin — a
     trailing margin collapses out of the pane's box and takes the reservation
     with it. */
  .native-desk-aside { padding-bottom: var(--nav-h) }
  /* That footnote is about the list's scope; under a thread it is noise, and
     it would push the action shelf off the rail it should be sitting on. */
  #native-desk[data-view="thread"] + .native-desk-aside { display: none }
  /* The action shelf — Claim / Resolve, and since LOK-553 the reply composer —
     sits on the bottom of the screen instead of scrolling under the rail, and
     carries the rail's height as its own bottom padding: its controls sit
     above the rail, and its surface fills the strip behind the translucent
     pill so no message shows through from underneath. The home bar is already
     counted inside `--nav-h`.
     `fixed`, not `sticky`, and this is the whole reason the phone rule differs
     from the desktop one: a sticky box can never be lifted above the top of
     its own containing block, and the thread card starts ~440px down a phone
     page. Sticky therefore pins the shelf to the bottom of the screen only
     while `card top + shelf height <= screen height`; past that it clamps
     against the card's top and the shelf hangs off the bottom of the screen by
     the excess, dropping Send behind the docked rail. The shelf is ~336px of a
     464px screen once a keyboard is up, so that budget was down to two pixels
     on macOS and already spent on CI's Linux Chromium, where the same shelf
     renders ~50px taller: its bottom measured 514.75 on a 464px screen. Fixed
     has no containing block to clamp against, so the pin cannot be outgrown by
     a fallback font, a longer status line, or a larger accessibility text size.
     A fixed shelf no longer reserves the room the newest message needs to
     clear it, so the desk measures the shelf and hands its height back to the
     thread as bottom padding — `--desk-shelf-h`, set in ely-home.js.
     This shelf is the only pinned layer in the thread: it is what puts the
     phone composer on the bottom of the screen, so a second sticky bottom on
     the `.native-action-card` inside it would add nothing and would stack a
     second safe-area inset on this padding. */
  .native-thread-foot {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding-bottom: calc(12px + var(--nav-h));
  }
  .native-thread { padding-bottom: var(--desk-shelf-h, 0px) }
  /* Room for the newest bubble to clear the shelf it lands against. */
  .native-thread > .native-msg:last-of-type { margin-bottom: 18px }
  .native-thread-hd .native-desk-back { display: inline-flex; margin-right: 2px }
  .native-msg { max-width: 88% }
  /* One row, under 56px: Back, the guest, the status chip. It is sticky from
     the desktop rule above — the phone only slims it. */
  .native-thread-hd { padding: 9px 18px; gap: 8px; flex-wrap: nowrap; z-index: 3 }
  .native-thread-hd h3 { font-size: 15px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .native-thread-hd .chip { flex-shrink: 0 }
  /* The wait is already a sentence in the shelf; a second clock here would
     cost the header the extra row it is not allowed to have. */
  .native-thread-hd .native-thread-since { display: none }
  .native-thread > :not(.native-thread-hd):not(.native-thread-foot) { margin-left: 18px; margin-right: 18px }
  .native-thread > .native-msg[data-side="out"] { margin-right: 18px }
  .native-thread-foot { padding-left: 18px; padding-right: 18px }
  /* LOK-729 U1: the shelf is a status line, the composer and Send. The field's
     own label goes — the placeholder says what the box is, and the textarea
     carries the name for a screen reader (ely-home.js) — and two rows of
     composer is what a thumb-written reply needs before it starts scrolling. */
  .native-thread-foot .field-lbl { display: none }
  .native-thread-foot textarea { min-height: 0; height: 58px }
  /* Everything else is one tap away instead of in the way. */
  .native-thread-foot .native-shelf-more-toggle { display: inline-flex }
  .native-shelf-more[data-expanded="false"] { display: none }
}

/* LOK-703: Ely Voice receptionist settings (LOKAL only). Distinct from LOK-686 reply style. */
.voice-switch {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14.5px; margin-bottom: 8px;
}
.voice-did-chips { display: flex; flex-wrap: wrap; gap: 8px }
.voice-did-chips .chip { background: #EBEFF3; color: var(--ink) }
.voice-hours { width: 100%; border-collapse: collapse; margin-top: 12px }
.voice-hours th, .voice-hours td {
  text-align: left; padding: 8px 10px 8px 0; font-size: 13.5px; vertical-align: middle;
}
.voice-hours th[scope="row"] { font-weight: 600; width: 28% }
.voice-hours input {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px;
}
.voice-hours input:focus { background: var(--card); border-color: var(--blue) }

/* LOK-686: typed reply style uses the existing Settings fields and buttons. */
#form-hotel-voice { grid-template-columns: minmax(0, 1fr); }
#voice-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; border: 0; min-width: 0; }
#voice-traits legend { margin-bottom: 8px; }
#voice-traits label { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
#voice-traits input { margin: 0; accent-color: var(--blue); }
#voice-traits:disabled label { opacity: .55; }
/* Controlled-test copy and purpose labels remain readable on narrow screens. */
#form-managed-canary, #form-managed-canary .field { min-width: 0 }
#set-managed-canary .row-v { min-width: 0; flex-shrink: 1; overflow-wrap: anywhere }

/* Hallmark · genre: modern-minimal · design-system: DESIGN.md · designed-as-app
 * Focused task surfaces; existing Ely tokens and motion remain authoritative. */
.knowledge-search { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; margin: 24px 0 16px }
.knowledge-search input, .knowledge-search select { width: 100%; min-height: 44px }
.knowledge-search #knowledge-results { grid-column: 1 / -1; margin: 0 }
.essentials-source { flex-basis: 100% }
html, body { overflow-x: clip }
.settings-group { margin: 12px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); min-width: 0 }
.settings-group > summary, .knowledge-add > summary { min-height: 44px; cursor: pointer; font-family: var(--disp); font-weight: 700; display: list-item; align-content: center }
.settings-group > summary:focus-visible, .know > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px }
.settings-group[open] > summary { margin-bottom: 16px }
.settings-group .rows .row { padding-block: 10px }
.settings-group .people-form { grid-template-columns: minmax(0, 1fr) }
.settings-save { position: sticky; bottom: 0; padding: 12px 0; background: var(--card); z-index: 4 }
.chat-hours-row select, .chat-hours-row input { min-width: 0; width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--canvas); color: var(--ink); font: inherit }
.chat-hours-row select:focus, .chat-hours-row input:focus { background: var(--card); border-color: var(--blue) }
.chat-hours-row { padding-block: 4px }
.chat-hours-fieldset:has(#chat-hours-mode option[value="unset"]:checked) .chat-hours-grid { display: none }
.knowledge-search { margin-bottom: 16px }
.knowledge-add { margin: 16px 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card) }
.knowledge-add .add-card { box-shadow: none; padding: 12px 0 }
.know > summary { cursor: pointer; min-height: 44px; list-style: none; position: relative; padding-right: 24px }
.know > summary::after { content: '+'; position: absolute; right: 0; font-size: 20px; color: var(--muted) }
.know[open] > summary::after { content: '−' }
.know:not([open]) { padding-block: 10px }
.know[open] > summary { margin-bottom: 12px }
.rail-more { display: contents }
#mobile-more-toggle { display: none }
@media (max-width: 768px) {
  .field input:not([type=checkbox]):not([type=radio]), .field textarea, .field select,
  .chat-hours-row input, .chat-hours-row select, .voice-hours input, .native-thread-foot textarea { font-size: 16px; min-height: 44px }
  button, .btn, .mini-btn, .tabs button, .btn-ghost, .linkish, .icon-btn { min-height: 44px }
  /* Keep the thread header compact around its full-size Back touch target. */
  .native-thread-hd { padding-block: 5px }
  .settings-group { padding: 12px; }
  .chat-hours-head { display: none }
  .chat-hours-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line) }
  .chat-hours-row > span { font-weight: 600 }
  .settings-group .row { flex-wrap: wrap; gap: 8px }
  .settings-group .row-v { min-width: 0; overflow-wrap: anywhere }
  .settings-save { bottom: var(--nav-h, 64px) }
}
@media (max-width: 640px) {
  #horizon.slim { min-height: 100px }
  .chat-hours-row:has(select option[value="closed"]:checked) input { display: none }
  #chat-tabs, #ins-tabs { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain }
  #chat-tabs button, #ins-tabs button { flex: 0 0 auto; min-height: 44px }
  .knowledge-search { grid-template-columns: minmax(0, 1fr) }
  #rail { display: flex; width: 100%; overflow: visible; justify-content: space-around; }
  #rail > button { flex: 1; min-width: 0; min-height: 48px; padding-inline: 8px; font-size: 13px; white-space: nowrap }
  #rail > .rail-sep { display: none }
  #mobile-more-toggle { display: block }
  #mobile-more:not(:popover-open) { display: none }
  #mobile-more:popover-open { display: grid; gap: 4px; position: fixed; inset: auto 12px calc(80px + env(safe-area-inset-bottom)); width: auto; max-height: 65dvh; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-float) }
  #mobile-more button { min-height: 48px; text-align: left; width: 100% }
  #mobile-more .rail-sep { display: none }
  #screen-shell:has(#view-chat.on #pane-conversations:not([hidden])) #horizon.slim { min-height: 88px; height: 88px }
  #screen-shell:has(#view-chat.on #pane-conversations:not([hidden])) main { padding-top: 12px }
  .know-hd { align-items: flex-start }
  .know-hd .chip { font-size: 9px; flex-shrink: 0 }
}