/* LEMMA-UI-OVERHAUL-1030 (C1/F01, C1/F02, C1/F05, C2/F08, C7/F13): the calm page layer, loaded last on every
   shared-token page (after pages.css and looka.css). Visual only: no content, control or route changes, and nothing is
   hidden except aria-hidden decoration. Tokens only (no literal colours), weights 400-600, no text below 13 px, no new
   stacking layers. Motion is in the last block, inside prefers-reduced-motion: no-preference. */

/* ---------- Page frame and rhythm ---------- */
@media (min-width:721px){.main{padding-top:var(--s6)}}
.top{margin-bottom:var(--s5);gap:var(--s3) var(--s4)}
.top .title{gap:2px}
.subnav{margin-bottom:var(--section-gap)}
#function-banner:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s5);padding:var(--s3) var(--s4);
  background:var(--warn-tint);border-color:transparent;border-radius:var(--r-md);box-shadow:none;color:var(--ink)}
#function-banner b{font-weight:600;color:var(--warn-ink)}

/* Section navigation reads as calm underline tabs on every page (Finance Overview's style); filters stay pills. */
.subnav>nav.seg{display:flex;flex:1 1 auto;min-width:0;gap:var(--s5);padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.subnav>nav.seg>a{flex:none;min-height:var(--control-h);padding:0 1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;
  color:var(--ink-2);font-weight:500;box-shadow:none}
.subnav>nav.seg>a:hover{color:var(--ink);border-bottom-color:var(--line-strong);background:transparent}
.subnav>nav.seg>a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--ink);font-weight:600;background:transparent;box-shadow:none}
.subnav>nav.seg>a:focus-visible{border-radius:var(--r-xs)}
.subnav>nav.seg .count{min-width:20px;height:20px;background:var(--surface-2);color:var(--ink-2)}
.subnav>nav.seg>a[aria-current="page"] .count{background:var(--accent-tint);color:var(--accent-ink)}
@media (max-width:720px){.subnav>nav.seg{gap:var(--s4);overflow-x:auto}.subnav>nav.seg[aria-label="Settings sections"]{column-gap:var(--s4);row-gap:0}}

/* Phone header actions show only their icon, but keep their label for screen readers (it was display:none, no name). */
@media (max-width:720px){
  #page-actions .btn{position:relative}
  #page-actions .btn>span{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}
/* Links that follow a status sentence in a card read as links without relying on colour (WCAG 1.4.1). */
.l9-content>a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.l9-content>a:not(.btn):hover{text-decoration-thickness:2px;text-decoration-color:currentColor}

/* ---------- Empty, loading and error states ---------- */
.empty p{max-width:46ch}
.empty:has([data-retry]) .ic{background:var(--danger-tint);color:var(--danger-ink)}
.skeleton-page,.skeleton-row{gap:var(--s4)}

/* ---------- Sign in: one deep brand band beside the form ---------- */
.login-art{background:var(--band);color:var(--on-band);border-right:0}
.login-art .brand{color:var(--on-band)}
.login-art .brand .mark{background:var(--on-band);color:var(--band)}
.login-big{color:var(--on-band);font-weight:var(--title-weight);max-width:12ch}
.login-art small{color:var(--on-band-2);font-weight:500;letter-spacing:var(--track-eyebrow)}
.login-art::after{content:"λ";position:absolute;right:-.06em;bottom:-.28em;font:400 clamp(16rem,30vw,26rem)/1 var(--f-head);color:var(--on-band);opacity:.07;pointer-events:none}
.login-side{background:var(--bg)}
.login-card{border-radius:var(--r-lg);box-shadow:var(--sh-2);gap:var(--s4)}
.login-card h1{font-weight:var(--title-weight);letter-spacing:var(--track-title)}
.login-foot{font-weight:500;color:var(--ink-2)}
/* Phones: the band shrinks to a brand strip above the form, so the brand stays visible and Enter workspace stays in view. */
@media (max-width:820px){
  .login{grid-template-rows:auto minmax(0,1fr)}
  .login-art{display:flex;flex-direction:row;align-items:center;padding:var(--s4) var(--s5)}
  .login-art .login-copy,.login-art small,.login-art::after{display:none}
  .login-side{min-height:0;padding-top:var(--s5)}
}

/* ---------- Home ---------- */
.who-pick label{background:var(--surface);transition:border-color var(--t-fast),background var(--t-fast)}
.who-pick label:hover{border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.sugg button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);transition:background var(--t-fast),border-color var(--t-fast)}
.sugg button:hover{border-style:solid;border-color:color-mix(in srgb,var(--ink) 22%,transparent);background:var(--surface-3)}
.composer{box-shadow:var(--sh-1);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.todo a:hover{background:var(--surface-hover)}
.feed::before{width:1px;background:var(--line)}

/* ---------- Finance ---------- */
#content[data-section="finance"] .finance-header{background:var(--glass);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
#content[data-section="finance"] .finance-header>[data-finance-tabs]{gap:var(--s5);padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
#content[data-section="finance"] .finance-header>[data-finance-tabs]>a{padding:0 1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--ink-2);font-weight:500;box-shadow:none}
#content[data-section="finance"] .finance-header>[data-finance-tabs]>a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
#content[data-section="finance"] .finance-header>[data-finance-tabs]>a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--ink);font-weight:600;background:transparent;box-shadow:none}
#content[data-section="finance"] .finance-header>[data-finance-tabs] .count{background:var(--accent-tint);color:var(--accent-ink)}
/* Long tables keep their header in view: from 13 rows the table scrolls inside its frame under a sticky header row. */
@media (min-width:720px){
  .table-wrap:has(tbody>tr:nth-child(13)){max-height:min(72vh,860px);overscroll-behavior-y:auto}
}

/* ---------- Assistants: chat ---------- */
.bot-switch{border-radius:var(--r-pill);padding:3px;border:1px solid var(--line)}
.bot-switch a{border-radius:var(--r-pill);font-weight:600}
.tl a{border-radius:var(--r-md);transition:background var(--t-fast)}
.tl a[aria-current]{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent)}
.tl b{font-weight:600}
.tl time,.tl small{font-weight:500}
.pending-link{border-radius:var(--r-md);font-weight:600}
.convo-h small{font-weight:500}
.chatlog{padding:var(--s5) var(--s5) var(--s4)}
.bubble{border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);line-height:1.55}
.bubble.user{border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg)}
.bubble small{font-weight:600}
.ctx h3{font-weight:600;letter-spacing:var(--track-eyebrow)}
.ctx-list li{font-weight:500}

/* ---------- Assistants: memory and channels ---------- */
.source{border-radius:var(--r-md);transition:background var(--t-fast)}
.source b{font-weight:600}
.source[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}
.memory-item>summary{font-weight:500;border-radius:var(--r-sm)}
.meta>summary{font-weight:600}
.account{border:1px solid var(--line)}
/* D20-WA-REMOVE: Remove often wraps to the left edge on a phone; anchor its panel to the action row so it stays on screen. */
.account .actions{position:relative}.account .actions .remove-account{position:static}
.acct-h small,.qr-wrap small,.how{font-weight:500}

/* ---------- WhatsApp workspace ---------- */
#content[data-section="assistants"] .wa-web{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
#content[data-section="assistants"] .wa-toolbar{background:var(--surface);border-bottom:1px solid var(--line)}
#content[data-section="assistants"] .wa-chat{padding:var(--s3) var(--s4);transition:background var(--t-fast)}
#content[data-section="assistants"] .wa-chat:hover{background:var(--surface-hover)}
#content[data-section="assistants"] .wa-chat.selected{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent)}
#content[data-section="assistants"] .wa-preview{color:var(--ink-2)}
#content[data-section="assistants"] .wa-day{border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-2);font-weight:500;padding:4px 12px}
#content[data-section="assistants"] .wa-bubble-body{border-radius:var(--r-xs) var(--r-md) var(--r-md) var(--r-md)}
#content[data-section="assistants"] .wa-bubble.outgoing .wa-bubble-body{border-radius:var(--r-md) var(--r-xs) var(--r-md) var(--r-md)}
#content[data-section="assistants"] .wa-bubble.wa-cont .wa-bubble-body,#content[data-section="assistants"] .wa-bubble.outgoing.wa-cont .wa-bubble-body{border-radius:var(--r-md)}
#content[data-section="assistants"] .wa-meta{color:var(--ink-2)}
#content[data-section="assistants"] .wa-unread-divider{border-radius:var(--r-pill)}
#content[data-section="assistants"] .wa-filter{background:var(--surface);transition:background var(--t-fast),border-color var(--t-fast)}
#content[data-section="assistants"] .wa-filter:hover{border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
#content[data-section="assistants"] .wa-filter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#content[data-section="assistants"] .wa-compose{background:var(--surface)}
#content[data-section="assistants"] .wa-pop{border-radius:var(--r-md);box-shadow:var(--sh-3)}

/* ---------- Approvals ---------- */
#content[data-section="approvals"] .draft .quote{border-radius:var(--r-md);background:var(--surface-hover);border:1px solid var(--line)}
#content[data-section="approvals"] .decide{padding-top:var(--s1)}
.approvals-ops-note a{text-underline-offset:.2em}

/* ---------- Settings ---------- */
.presets{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.preset{border-radius:var(--r-lg);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast) var(--ease)}
.preset:hover{border-color:color-mix(in srgb,var(--ink) 25%,transparent);box-shadow:var(--sh-1)}
.preset-swatch{height:44px;border-radius:var(--r-md)}
.setting-title{font-weight:600}
.range-row output{font-weight:600}
.contrast-row{border-radius:var(--r-md)}
.pv-rail .mark{border-radius:50%}

/* ---------- More (phone) ---------- */
.more-pages .btn{min-height:52px;font-weight:500}

/* ---------- Ops queue and owner passkeys ---------- */
.ops-ticket{transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.ops-ticket:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent);box-shadow:var(--sh-1)}
.ops-ticket label{font-weight:600}
.ops-actions{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ops-devices summary{font-weight:600}

/* ---------- UX-REVIEW-20261031 (C1/F01, C2/F08, C7/F13): touch targets and phone layout ---------- */
/* On a touch screen every control is at least 44 px tall. Small buttons, segmented controls and small icon buttons take
   the full control height (Finance's phone Update button was pinned to 24 px); plain disclosure rows, the Home picks,
   action links and switches get a 44 px hit area without changing how they look. Mouse and trackpad are unchanged. */
@media (pointer:coarse){
  :root{--control-h-sm:max(44px,var(--control-h))}
  :is(#content,.ops-main) details>summary:not([class]){min-height:44px;align-content:center}
  .sugg button,.who-pick label,#content[data-section="finance"] .fo-action .btn{min-height:44px}
  :is(.wa-media-link,.link-btn,.approvals-ops-note a,.l9-content>a:not(.btn)){display:inline-flex;align-items:center;min-height:44px}
  .switch::before{content:"";position:absolute;inset:-9px -4px}
}
/* Channels on a phone: a bot card's name and status chips keep a usable width, so Open Telegram wraps below them
   instead of covering "Telegram not set up" (the LOOKA r2 wrap never triggered: .grow could shrink to nothing). */
@media (max-width:720px){#content[data-section="assistants"] .bot>.grow{flex:1 1 12rem}}
/* ---------- UX-REVIEW-20261031 items 6-10 (C1/F01, C1/F05, C2/F08, C7/F13) ---------- */
/* #6: in a mixed-currency Overview the one-line breakdown is the sentence itself, so it reads at the sentence's size. */
#content[data-section="finance"] .fo-sentence .fo-reconcile{font-size:inherit;color:inherit}
/* #8: an empty Approvals section is its heading and a 0; the "sending is off" notice keeps Turn on beside it. */
#content[data-section="approvals"] .approval-group.is-empty{margin-bottom:var(--s3)}
#content[data-section="approvals"] .approval-group.is-empty .section-h{margin:var(--s3) 0 0;color:var(--ink-2)}
.wa-gate-off{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin:var(--s2) 0 0}
/* The card's empty status and recovery slots take no room (they stay rendered, so the status still announces). */
.wa-gate-card{row-gap:0}
.wa-gate-card>div:not(:first-child):not(:empty){margin-top:var(--s3)}
/* #9: Home's one failed-sources line: text and Retry on one row, Retry at the end. */
.todo>li.needs-missing{display:flex;align-items:center;gap:var(--s3)}
/* #10: on a phone an open WhatsApp chat gets the screen above the tab bar; the page title and section tabs step aside
   until ← Chats (its height is in pages.css on the measured --wa-top, so a visible #function-banner still fits).
   The one-time gesture tip is one row between the messages and the composer. */
@media (max-width:700px){
  .main-inner:has(.wa-web.wa-open)>.top,#content:has(>.wa-web.wa-open)>.subnav{display:none}
}
#content[data-section="assistants"] .wa-gesture-hint{display:flex;align-items:center;gap:var(--s2);margin:0;padding:var(--s1) var(--s2) var(--s1) var(--s3);border-top:1px solid var(--line);font-size:var(--fs-label)}

/* D30: a disclosure row with no chevron icon (Insights "Targets and risk thresholds") still shows it opens. */
.disclosure>summary:not(:has(>svg))::before{content:"";flex:none;width:.45em;height:.45em;margin:0 var(--s1);border:solid var(--ink-2);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform var(--t) var(--ease)}
.disclosure[open]>summary:not(:has(>svg))::before{transform:rotate(45deg)}

/* ---------- Motion: slow, subtle and CSS only. Content never starts invisible; reduced motion turns it off. ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t)}
  /* Sheets and popovers settle in; a details body opens smoothly where the browser supports it. */
  @supports (transition-behavior:allow-discrete){
    .pop .pop-panel{transition:transform var(--t-sheet) var(--ease)}
    @starting-style{.pop[open] .pop-panel{transform:translateY(var(--rise))}}
  }
  @supports selector(::details-content){
    details.disclosure::details-content,details.memory-item::details-content{transition:opacity var(--t-sheet) var(--ease),content-visibility var(--t-sheet) allow-discrete;opacity:0}
    details.disclosure[open]::details-content,details.memory-item[open]::details-content{opacity:1}
  }
  /* Cards rise 8 px as they scroll into view (the Clover reveal); anything already on screen is simply there. */
  @supports (animation-timeline:view()){
    :root:not([data-motion="off"]):not([data-motion="reduced"]) :is(#content>.card,#content>section>.card,.lower>.card,.fin-grid>.card,.ops-group){
      animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 18%}
  }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  :root:not([data-motion="off"]) :is(.btn:not(:disabled),.search):hover{transform:translateY(calc(var(--lift) / 2))}
  :root:not([data-motion="off"]) .btn:not(:disabled):active{transform:translateY(0) scale(.98)}
  :root:not([data-motion="off"]) .preset:hover{transform:translateY(var(--lift))}
}