/* Aquon — the site visit module (CR-20260909-001).
 *
 * The artwork is the mix Ravi asked for: mana.clikin.ai's console half — the ground
 * #FBF8F1, white cards, a cool hairline inside a card and a warm one against the
 * ground, tight 6/8/10/12 radii — carried by clikin-tokens.css, plus clikin.ai's
 * brand half declared below: the one gradient, mono kickers, and Schibsted Grotesk
 * on the moments that carry weight. The identity stays Clikin's (D7: Aquon names the
 * site visit module, not the sales surface).
 *
 * Mobile browser is the target, not a breakpoint. The shell is 100dvh and never
 * scrolls; one region inside it owns the overflow, so the recorder bar and the
 * primary action can never be scrolled away from a person holding the phone in one
 * hand. Tap targets are 48px, primary actions 56px and inside thumb reach.
 * From 1024px the desktop layout at the end of this file takes over (two panes).
 */

:root{
  /* clikin.ai's brand half. --accent/--accent-2 from clikin-tokens.css are the
   * console's blues; these are the website's, used only for the gradient and the
   * display face so the two systems stay distinguishable. */
  --aq-blue:#2563EB;
  --aq-violet:#625BFF;
  --aq-purple:#7C4DFF;
  --aq-grad:linear-gradient(135deg,#2563EB 0%,#625BFF 55%,#7C4DFF 100%);
  --aq-font-display:"Schibsted Grotesk","Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* One recorder colour, dark enough to read in sunlight against the beige. */
  --aq-ink-panel:#15121A;
  --aq-live:#C1362B;
  --aq-live-soft:#FEF1EF;
  --aq-wa:#1E9E4F;
  --aq-shadow-card:0 1px 2px rgba(7,10,18,.05), 0 4px 12px -6px rgba(7,10,18,.08);
  --aq-shadow-lift:0 1px 2px rgba(16,24,40,.05), 0 14px 30px -18px rgba(37,99,235,.45);
  --aq-tap:48px;
  --aq-tap-primary:56px;
  --aq-tap-compact:44px;
  /* The console reads --radius-pill from theme.css, which Aquon deliberately does
   * not load. Same value, declared where Aquon can see it. */
  --radius-pill:999px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font:15px/1.45 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:transparent; border:0; cursor:pointer; }
a{ color:var(--accent-deep); text-decoration:none; }
::selection{ background:rgba(59,108,255,.16); }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.aqHidden{ display:none !important; }
.aqSrOnly{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.aqMono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------- shell */
.aqShell{
  height:100dvh;
  width:100%;
  max-width:430px;
  margin:0 auto;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  background:var(--bg);
}
@media (min-width:640px){
  body{ background:var(--bg2); }
  .aqShell{
    background:var(--bg);
    border-left:1px solid var(--ground-line);
    border-right:1px solid var(--ground-line);
  }
}

/* ------------------------------------------------------------------ topbar */
.aqTop{
  display:flex; align-items:center; gap:10px;
  padding:max(10px, env(safe-area-inset-top)) 16px 10px;
  min-height:52px;
}
.aqMark{ display:flex; align-items:center; gap:9px; min-width:0; color:inherit; }
.aqMark__logo{ display:block; flex:none; }
.aqMark__text{ display:block; min-width:0; }
.aqMark b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.015em; line-height:1.1; }
.aqMark__sub{
  display:block; font-family:var(--font-mono); font-size:10px; color:var(--muted);
  letter-spacing:.09em; text-transform:uppercase; line-height:1.2; margin-top:1px;
}
.aqSpacer{ flex:1; }
.aqAvatar{
  width:var(--aq-tap-compact); height:var(--aq-tap-compact); border-radius:50%; flex:none;
  background:var(--aq-grad); color:#fff;
  display:grid; place-items:center; font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.aqIconBtn{
  min-width:var(--aq-tap-compact); min-height:var(--aq-tap-compact);
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
  display:grid; place-items:center; color:var(--muted);
}
.aqIconBtn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* back row, on a visit */
.aqBack{
  display:flex; align-items:center; gap:9px; padding:0 16px 10px; min-width:0;
}
.aqBack__btn{
  width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); display:grid; place-items:center; color:var(--muted); font-size:17px; line-height:1;
}
.aqBack__who{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
}

/* -------------------------------------------------------------- stage rail */
.aqRail{ display:flex; align-items:flex-start; padding:0 16px 12px; }
.aqRail__s{ flex:1; display:flex; flex-direction:column; gap:5px; align-items:center; min-width:0; }
.aqRail__s + .aqRail__s{ margin-left:5px; }
.aqRail__d{ width:100%; height:3px; border-radius:var(--radius-pill); background:var(--line); }
.aqRail__s span{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
}
.aqRail__s.isOn .aqRail__d{ background:var(--aq-grad); }
.aqRail__s.isOn span{ color:var(--aq-blue); font-weight:600; }
.aqRail__s.isDone .aqRail__d{ background:var(--success); opacity:.55; }
.aqRail__s.isDone span{ color:var(--success); }

/* ------------------------------------------------------------ scroll region */
.aqScroll{
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0 16px 16px;
  display:flex; flex-direction:column; gap:10px;
}

/* ------------------------------------------------------------------- cards */
.aqCard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:14px; min-width:0;
}
.aqCard--lift{ border-color:#DCE6FD; box-shadow:var(--aq-shadow-lift); }
.aqCard--warn{ background:var(--warn-soft); border-color:#F3D9B5; }
.aqCard--quiet{ background:var(--surface-3); }
.aqKicker{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--aq-blue); margin:0 0 7px;
}
.aqKicker .aqKicker__r{ color:var(--faint); letter-spacing:.08em; flex:none; }
.aqCard--warn .aqKicker{ color:var(--warn); }
.aqTitle{
  font-family:var(--aq-font-display); font-size:21px; font-weight:600;
  letter-spacing:-.03em; line-height:1.13; margin:0; text-wrap:balance;
}
.aqTitle--sm{ font-size:17px; }
.aqTitle--lg{ font-size:24px; }
.aqSub{ font-size:13px; color:var(--muted); margin:4px 0 0; line-height:1.42; }
.aqNote{ font-size:13.5px; line-height:1.5; margin:0; }
.aqNote b{ font-weight:600; }
.aqHr{ height:1px; background:var(--line-2); margin:12px -14px; }

/* ----------------------------------------------------------------- buttons */
.aqBtn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:var(--aq-tap-primary); border:0; border-radius:var(--radius-lg);
  font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  background:var(--aq-grad); color:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.10), 0 8px 18px -10px rgba(37,99,235,.55);
  transition:transform .12s ease, opacity .12s ease;
}
.aqBtn svg{
  width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.aqBtn:active{ transform:translateY(1px); }
.aqBtn[disabled]{ opacity:.5; box-shadow:none; transform:none; cursor:not-allowed; }
.aqBtn--ghost{ background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:none; }
.aqBtn--warn{ background:var(--surface); color:var(--warn); border:1px solid #F3D9B5; box-shadow:none; }
.aqBtn--danger{ background:var(--surface); color:var(--danger); border:1px solid #F5C9C4; box-shadow:none; }
.aqBtn--sm{ min-height:var(--aq-tap); font-size:14px; }
.aqBtnRow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.aqBtnRow--two{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* the three field verbs: directions, call, WhatsApp */
.aqQuick{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:var(--aq-tap-primary); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); font-size:11.5px; font-weight:600; color:var(--text);
  letter-spacing:-.005em; padding:6px 4px; text-align:center;
}
.aqQuick svg{ width:19px; height:19px; fill:none; stroke:var(--aq-blue); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.aqQuick--wa svg{ stroke:var(--aq-wa); }
.aqQuick i{
  font-style:normal; font-family:var(--font-mono); font-size:9px; color:var(--faint);
  letter-spacing:.05em; text-transform:uppercase;
}
.aqQuick[aria-disabled="true"]{ opacity:.45; }

/* ------------------------------------------------------------------- pills */
.aqPill{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  padding:3.5px 8px; border-radius:var(--radius-pill); line-height:1; white-space:nowrap;
}
/* The colour rule (F7, F11): green means finished, amber means waiting on you,
 * red means live or refused, grey means not yet. Nothing is coloured for existing. */
.aqPill--done{ background:var(--success-soft); color:var(--success); }
.aqPill--wait{ background:var(--warn-soft); color:var(--warn); }
.aqPill--live{ background:var(--aq-live-soft); color:var(--aq-live); }
.aqPill--idle{ background:var(--bg2); color:var(--muted); }
.aqPill--info{ background:var(--accent-soft); color:var(--accent-deep); }
.aqPill--live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#E5484D;
  animation:aqBlip 1.4s infinite;
}
@keyframes aqBlip{ 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion:reduce){ .aqPill--live::before{ animation:none; } }

/* -------------------------------------------------------------- the day list */
.aqRow{
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  padding:12px 0; border-top:1px solid var(--line-2); min-height:var(--aq-tap);
}
.aqRow:first-of-type{ border-top:0; }
.aqRow__t{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--text);
  width:52px; flex:none; padding-top:1px; font-variant-numeric:tabular-nums;
}
.aqRow__m{ flex:1; min-width:0; }
.aqRow__m b{ display:block; font-size:14.5px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.aqRow__m span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35; }
.aqRow__m .aqPill{ display:inline-flex; width:auto; margin-top:5px; }
.aqRow__c{ flex:none; color:var(--faint); font-size:17px; padding-top:2px; }

/* --------------------------------------------------------------- the walk */
.aqRec{
  margin:0 16px 12px; border-radius:var(--radius-lg); padding:13px 14px;
  background:var(--aq-ink-panel); color:#F6F2E9; border:1px solid #2E2A22;
  box-shadow:0 10px 26px -14px rgba(7,10,18,.55);
}
.aqRec__top{ display:flex; align-items:center; gap:10px; }
.aqRec__lab{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:#F0796B; display:flex; align-items:center; gap:5px;
}
.aqRec__lab::before{ content:""; width:6px; height:6px; border-radius:50%; background:#E5484D; animation:aqBlip 1.4s infinite; }
.aqRec.isPaused .aqRec__lab{ color:#E0A44A; }
.aqRec.isPaused .aqRec__lab::before{ background:#E0A44A; animation:none; }
@media (prefers-reduced-motion:reduce){ .aqRec__lab::before{ animation:none; } }
.aqRec__t{
  font-family:var(--font-mono); font-size:25px; font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1; margin-top:3px;
}
.aqRec__b{
  width:40px; height:40px; flex:none; border-radius:var(--radius-md);
  border:1px solid #3A342B; background:#221E19; color:#F6F2E9; display:grid; place-items:center;
}
.aqRec__b svg{ width:15px; height:15px; fill:currentColor; }
.aqRec__b--stop{ background:#7A2620; border-color:#93312A; color:#FFE9E6; }
.aqWave{ display:flex; align-items:flex-end; gap:2px; height:24px; margin-top:9px; }
.aqWave i{
  flex:1; max-width:3.5px; min-height:3px; border-radius:var(--radius-pill);
  background:linear-gradient(180deg,#7E9CFF,#A48CFF); opacity:.9;
  transition:height .12s linear;
}
.aqRec__meta{
  display:flex; justify-content:space-between; gap:10px; margin-top:9px;
  font-family:var(--font-mono); font-size:9.5px; color:#A8A294; letter-spacing:.05em; text-transform:uppercase;
}

.aqPad{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.aqChip{
  min-height:50px; border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--surface); font-size:11.5px; font-weight:600; color:var(--text);
  padding:6px 5px; line-height:1.22; letter-spacing:-.005em; text-align:center;
  display:flex; align-items:center; justify-content:center;
  transition:background .14s ease, border-color .14s ease, transform .1s ease;
}
.aqChip:active{ transform:scale(.97); }
.aqChip.isHit{ background:var(--accent-soft); border-color:var(--aq-blue); color:var(--accent-deep); }

.aqStamp{
  display:flex; gap:10px; align-items:baseline; padding:8px 0;
  border-top:1px solid var(--line-2); font-size:13px;
}
.aqStamp:first-child{ border-top:0; }
.aqStamp b{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; color:var(--faint);
  width:46px; flex:none; font-variant-numeric:tabular-nums;
}
.aqStamp span{ font-weight:600; letter-spacing:-.005em; min-width:0; }

/* A fact row, for the brief. Same rhythm as a stamp, but the label is a word
 * ("REQUIREMENT", "MON, 7 SEPT") rather than a timestamp, so its column has to be
 * able to hold one — in the fixed 46px stamp column the label overlapped the value. */
.aqFact{
  display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; align-items:baseline;
  padding:9px 0; border-top:1px solid var(--line-2); font-size:13px;
}
.aqFact:first-child{ border-top:0; }
.aqFact > b{
  font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--faint);
  letter-spacing:.06em; text-transform:uppercase; line-height:1.35; overflow-wrap:anywhere;
}
.aqFact > span{ font-weight:600; letter-spacing:-.005em; line-height:1.45; min-width:0; }

/* ------------------------------------------------------------ answer chips */
.aqAns{ display:flex; flex-wrap:wrap; gap:6px; }
.aqAns button{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-pill);
  padding:9px 13px; font-size:12.5px; font-weight:600; color:var(--text);
  min-height:38px; letter-spacing:-.005em;
}
.aqAns button.isOn{ background:var(--aq-grad); border-color:transparent; color:#fff; }
.aqAns button.isOn[data-value="hot"]{ background:linear-gradient(135deg,#D9420F,#B42318); }
.aqAns button.isOn[data-value="cold"]{ background:var(--muted); }

.aqField{ display:grid; gap:6px; }
.aqField > span{ font-size:12.5px; font-weight:600; color:var(--muted-2); }
.aqInput,.aqTextarea,.aqSelect{
  width:100%; min-height:var(--aq-tap); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:11px 12px; background:var(--surface);
  color:var(--text); outline:none;
}
.aqTextarea{ min-height:96px; resize:vertical; line-height:1.5; }
.aqInput:focus,.aqTextarea:focus,.aqSelect:focus{ border-color:var(--aq-blue); box-shadow:var(--focus-ring); }
.aqDraft{
  background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:11px 12px; font-size:13.5px; line-height:1.52;
}
.aqDraft em{ font-style:normal; background:var(--accent-soft); border-radius:var(--radius-xs); padding:0 4px; box-shadow:0 0 0 1px #DCE6FD; }

.aqDocs{ display:flex; gap:6px; flex-wrap:wrap; }
.aqDocs span{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  padding:6px 10px; border-radius:var(--radius-pill); background:var(--success-soft); color:var(--success);
}
.aqDocs span.isMissing{ background:var(--bg2); color:var(--muted); }

/* ------------------------------------------------------------- the receipt */
.aqTick{ width:64px; height:64px; border-radius:50%; margin:0 auto; background:var(--aq-grad); display:grid; place-items:center; }
.aqTick svg{ width:31px; height:31px; stroke:#fff; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.aqDid{ display:flex; gap:9px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line-2); font-size:13px; line-height:1.45; }
.aqDid:first-child{ border-top:0; }
.aqDid i{ font-style:normal; color:var(--success); flex:none; padding-top:1px; }
.aqDid b{ font-weight:600; }

/* ------------------------------------------------------------ footer + tabs */
.aqFoot{
  padding:10px 16px max(14px, env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--surface-glass);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:grid; gap:8px;
}
.aqTabs{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); background:var(--surface-glass);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:7px 6px max(11px, env(safe-area-inset-bottom));
}
.aqTab{
  display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
  min-height:var(--aq-tap); justify-content:center;
  font-size:10.5px; font-weight:600; color:var(--faint);
}
.aqTab svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.aqTab.isOn{ color:var(--aq-blue); }
.aqTab__badge{
  position:absolute; top:2px; right:calc(50% - 21px);
  background:var(--danger); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:600;
  min-width:15px; height:15px; border-radius:var(--radius-pill); display:grid; place-items:center; padding:0 3px;
}

/* --------------------------------------------------------------- messages */
.aqStatus{
  padding:10px 12px; border-radius:var(--radius-md); font-size:13px; font-weight:600; line-height:1.35;
  background:var(--accent-soft); color:var(--accent-deep);
}
.aqStatus.isBad{ background:var(--danger-soft); color:var(--danger); }
.aqStatus.isGood{ background:var(--success-soft); color:var(--success); }
.aqEmpty{
  padding:26px 18px; text-align:center; color:var(--muted); font-size:14px; line-height:1.5;
}

/* ------------------------------------------------------------------ login */
.aqLogin{ display:flex; flex-direction:column; gap:14px; padding:8px 16px 24px; }
.aqLogin__hero{ padding:22px 0 6px; }
.aqLogin__hero h1{
  font-family:var(--aq-font-display); font-size:30px; font-weight:600; letter-spacing:-.035em;
  line-height:1.08; margin:12px 0 0; text-wrap:balance;
}
.aqLogin__hero h1 em{
  font-style:italic; background:var(--aq-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; padding-right:.06em;
}
.aqGoogleHost{ display:grid; place-items:center; min-height:44px; }

/* ------------------------------------------------------------------ sheet */
.aqSheet{
  position:fixed; inset:0; z-index:40; display:none;
  background:rgba(7,10,18,.42); align-items:flex-end; justify-content:center;
}
.aqSheet.isOpen{ display:flex; }
.aqSheet__panel{
  width:100%; max-width:430px; background:var(--surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:16px 16px max(16px, env(safe-area-inset-bottom));
  max-height:88dvh; overflow-y:auto; display:grid; gap:12px;
  box-shadow:0 -8px 40px -12px rgba(7,10,18,.35);
}
.aqSheet__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }

/* ---------------------------------------------------------------- desktop
 * Ravi, 21 Sep: "the desktop version shows the full length screens and items are optimized for desktop screen".
 * Two panes from 1024 px: today's visits on the left, the open visit on the right with its cards in two columns,
 * My Day and To-dos in the top bar. Below 1024 px — every phone, and the app — nothing here applies. */
.aqTopNav, .aqList{ display:none; }
@media (min-width:1024px){
  body{ background:var(--bg); }
  .aqShell{
    max-width:none; border:0;
    grid-template-columns:minmax(300px,360px) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:"top top" "list head" "list scroll" "list foot";
  }
  .aqShell[data-view="login"]{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"top" "head" "scroll" "foot";
  }
  .aqTop{ grid-area:top; padding:12px 24px; background:var(--surface); border-bottom:1px solid var(--line); }
  .aqTopNav{ display:flex; gap:4px; margin-left:32px; }
  .aqTopNav .aqTab{
    display:flex; flex-direction:row; align-items:center; gap:8px; position:relative;
    padding:8px 14px; border-radius:var(--radius-pill); font-size:14px; font-weight:600;
  }
  .aqTopNav .aqTab svg{ width:18px; height:18px; }
  .aqTopNav .aqTab.isOn{ background:#EEF3FF; }
  .aqTopNav .aqTab__badge{ position:static; margin-left:2px; }
  .aqTabs{ display:none; }

  .aqList{
    grid-area:list; display:block; overflow-y:auto; min-height:0;
    background:var(--surface); border-right:1px solid var(--line); padding:18px 14px 28px;
  }
  .aqShell[data-view="login"] .aqList{ display:none; }
  .aqList__group{ margin-bottom:18px; }
  .aqList__group > .aqKicker{ padding:0 8px; }
  .aqList .aqRow{ border-radius:var(--radius-md); padding-left:8px; padding-right:8px; }
  .aqList .aqRow:hover{ background:var(--surface-3); }
  .aqList .aqRow.isOn{ background:#EEF3FF; }
  .aqList__empty{ color:var(--muted); padding:8px; }

  #aqHead{ grid-area:head; }
  .aqScroll{ grid-area:scroll; }
  #aqFoot{ grid-area:foot; }
  #aqHead, .aqScroll, #aqFoot{ width:100%; max-width:1180px; justify-self:center; }
  #aqHead{ padding-top:10px; }
  .aqBack, .aqRail{ padding-left:28px; padding-right:28px; }
  .aqScroll{ padding:6px 28px 28px; }
  /* the open visit: its cards flow in two columns, each card whole, inside a wrapper of their own height — the
     pane scrolls down to every one (columns on the fixed-height pane spilled sideways: desktop audit N1) */
  .aqCols{ column-count:2; column-gap:16px; }
  .aqCols > *{ break-inside:avoid; margin:0 0 16px; }
  .aqCols > [data-lead-brief-host]{ column-span:all; }
  .aqShell[data-view="day"] .aqScroll, .aqShell[data-view="todos"] .aqScroll,
  .aqShell[data-view="day"] #aqHead, .aqShell[data-view="todos"] #aqHead{ max-width:760px; }
  /* a lone small action in a row of three: its own width, not a third of the card */
  .aqBtnRow > .aqBtn--sm:only-child{ grid-column:1 / -1; justify-self:start; width:auto; padding:0 18px; }

  .aqFoot{ display:flex; justify-content:flex-end; gap:10px; padding:12px 28px 16px; }
  .aqFoot .aqBtn{ width:auto; min-width:280px; padding:0 28px; }

  .aqSheet{ align-items:center; }
  .aqSheet__panel{ max-width:520px; border-radius:var(--radius-lg); }
  .aqLogin{ max-width:520px; width:100%; margin:0 auto; padding-top:48px; }
}