/* =====================================================================
   public/app/shell.css: the frame every screen sits in (the Home redesign, 14 October 2026, from the approved
   design: design-v3/final)

   The page is flat: no rounded panel inside the window any more, a sidebar of its own colour with a hairline at
   its right, and a header of 44px round controls (Ask UNLOOK, the Answering pill, the account's avatar). The
   Light/Dark switch moved from the header to the foot of the sidebar (shell.js); Settings keeps Light, Dark and
   System. Home's own sheet is home.css.

   Loaded after every other sheet, so a rule here wins over the same rule there; where app.css has a rule for the
   folded sidebar (the rail) with the same weight as a rule here, it is said again below with the same selector.
   Every colour is a role in the two theme blocks; nothing outside them is a raw value. The group names, the
   menu's weights and its icons are not touched (the owner, 14 October: menu.css keeps them).
   ===================================================================== */
:root{ /* sizes and corners, both themes */
  --fs-greet:30px;--fs-greet-sm:28px;--fs-kpi:46px;--fs-kpi-sm:38px;--fs-kpi-xs:28px;--fs-ring:38px;--fs-ring-sm:30px;
  --fs-amount:22px;--fs-bubble:16px;--fs-wordmark:25px;--fs-avatar:17px;--fs-day:15px;
  --r-tile:24px;--r-tile-sm:22px;--r-row:16px;--r-item:12px;--r-meter:18px;--r-bubble:12px;
  --h-row-btn:40px;--w-row-btn:146px;
  /* the list system (the owner's "version 3", 14 October): the new surfaces with the old density */
  --h-list-row:56px;--h-list-btn:34px;--h-filter:32px;--h-field:36px;--av-list:32px;--r-btn:10px;--r-row-tint:10px;--r-panel:18px;--h-row-btn-sm:36px;--w-row-btn-sm:128px;--w-row-btn-xs:124px;
}
:root,:root[data-theme="dark"]{
  --bg-glow:radial-gradient(900px 380px at 12% -10%,rgba(255,255,255,.03),rgba(255,255,255,0) 70%);
  --side:#0C0C0E;--side-line:rgba(255,255,255,.06);
  --card-sheen:linear-gradient(152deg,#1C1C1F 0%,#141416 44%,#0F0F11 100%);--card-edge:rgba(255,255,255,.055);
  --card-lift:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.7),0 28px 56px -30px #000;
  --hair:rgba(255,255,255,.055);--hair-2:rgba(255,255,255,.07);--scroll-thumb:rgba(255,255,255,.14);--scroll-thumb-hover:rgba(255,255,255,.26);
  --ink-body:#D1D1D6;--avatar-ink:#E5E5EA;--spark-ink:#E5E5EA;--spark-ok:#7EE2A2;
  --ctl:#111113;--btn-2:#1E1E21;--btn-2-hover:#28282C;--btn-2-ring:rgba(255,255,255,.07);--btn-2-hi:rgba(255,255,255,.06);--icon-hover:rgba(255,255,255,.07);
  --nav-cur:linear-gradient(180deg,#1D1D20 0%,#161618 100%);
  --nav-cur-lift:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.045),0 6px 16px -8px rgba(0,0,0,.9);
  --seg-on:linear-gradient(180deg,#222226,#1A1A1D);--seg-on-lift:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.6);--seg-well:#080809;
  --meter-card:linear-gradient(152deg,#1A1A1D 0%,#101012 100%);
  --avatar:linear-gradient(152deg,#2A2A2E 0%,#151517 100%);--avatar-row:linear-gradient(152deg,#2A2A2E 0%,#161618 100%);
  --tint-1:rgba(255,255,255,.05);--tint-2:rgba(255,255,255,.06);--tile-ring:rgba(255,255,255,.05);
  --chip-on:#E8FF9E;--on-chip-on:#11140A;--chip-on-n:#3A4413;--chip-on-hi:inset 0 1px 0 rgba(255,255,255,.6);
  --chip-off:#1B1B1E;--chip-off-hover:#26262A;--chip-off-ring:rgba(255,255,255,.06);--dot-lead:#F5A524;
  --hero-bg:radial-gradient(120% 90% at 0% 0%,#ECFF9C 0%,rgba(236,255,156,0) 55%),linear-gradient(152deg,#DCFF5C 0%,#D4FF43 45%,#BDEB2C 100%);
  --hero-edge:rgba(240,255,190,.55);
  --hero-lift:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.5),0 16px 36px -22px rgba(212,255,67,.3);
  --on-hero:#0B0B0C;--on-hero-2:#1C2106;--hero-ico:rgba(11,11,12,.09);--hero-ico-ring:rgba(11,11,12,.06);
  --hero-go:#0B0B0C;--on-hero-go:#D4FF43;--hero-pill-ring:#140303;--hero-spark-fill:.14;
  --urgent-row:rgba(255,148,138,.065);--urgent-edge:rgba(255,148,138,.24);--urgent-meta:#C9A19C;--row-hover:rgba(255,255,255,.022);
  --series-phone:#A1A1A6;--series-3:#68686E;
  --chart-grid:rgba(255,255,255,.07);--chart-base:rgba(255,255,255,.1);
  --chart-area:rgba(212,255,67,.2);--chart-area-mid:rgba(212,255,67,.03);--chart-day:rgba(212,255,67,.13);
  --today-col:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 100%);
  --today-col-lift:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.04);
  --today-ring:rgba(255,255,255,.22);--dot-hole:#0B0B0C;
  --tt-sub:#3A3A3F;--bubble-lift:0 10px 24px -8px rgba(0,0,0,.8);--leader:rgba(255,255,255,.16);--ring-base:rgba(255,255,255,.05);
  --bar-dim:.55;
  --glow-logo:0 0 14px rgba(212,255,67,.35);--glow-dot:0 0 8px rgba(212,255,67,.7);
  --glow-status:0 0 0 4px rgba(212,255,67,.13),0 0 12px rgba(212,255,67,.75);
  --glow-line:drop-shadow(0 0 6px rgba(212,255,67,.45));--glow-spark:drop-shadow(0 0 3px rgba(229,229,234,.4));--glow-spark-ok:drop-shadow(0 0 3px rgba(126,226,162,.5));
  --glow-btn:0 8px 22px -10px rgba(212,255,67,.6);--glow-meter:0 0 10px rgba(212,255,67,.55);
  --glow-ok-bar:0 0 10px rgba(126,226,162,.33);--glow-err-bar:0 0 10px rgba(255,148,138,.33);
}
:root[data-theme="light"]{
  --bg-glow:radial-gradient(900px 380px at 12% -10%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%);
  --side:#F8FAF9;--side-line:#E2E8E6;
  --card-sheen:linear-gradient(152deg,#FFFFFF 0%,#FDFEFE 44%,#F7FAF9 100%);--card-edge:rgba(15,31,28,.08);
  --card-lift:0 1px 2px rgba(15,31,28,.06),0 20px 44px -30px rgba(15,31,28,.28);
  --hair:#E2E8E6;--hair-2:#CBD5D1;--scroll-thumb:rgba(15,31,28,.18);--scroll-thumb-hover:rgba(15,31,28,.34);
  --ink-body:#24342F;--avatar-ink:#24342F;--spark-ink:#4B5F59;--spark-ok:#16A34A;
  --ctl:#FFFFFF;--btn-2:#FFFFFF;--btn-2-hover:#F1F5F3;--btn-2-ring:#CBD5D1;--btn-2-hi:rgba(255,255,255,0);--icon-hover:rgba(15,107,102,.08);
  --nav-cur:#FFFFFF;--nav-cur-lift:0 0 0 1px #E2E8E6,0 1px 2px rgba(15,31,28,.06),0 6px 16px -10px rgba(15,31,28,.18);
  --seg-on:#FFFFFF;--seg-on-lift:0 0 0 1px #CBD5D1,0 1px 2px rgba(15,31,28,.08);--seg-well:#EAF0EE;
  --meter-card:#FFFFFF;
  --avatar:linear-gradient(152deg,#FFFFFF 0%,#EAF0EE 100%);--avatar-row:linear-gradient(152deg,#F1F5F3 0%,#E2E8E6 100%);
  --tint-1:#F1F5F3;--tint-2:#F1F5F3;--tile-ring:#E2E8E6;
  --chip-on:#D3EBE8;--on-chip-on:#0B4542;--chip-on-n:#2C6460;--chip-on-hi:inset 0 0 0 1px rgba(15,107,102,.18);
  --chip-off:#F1F5F3;--chip-off-hover:#E6ECEA;--chip-off-ring:#E2E8E6;--dot-lead:#D97706;
  --hero-bg:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 55%),linear-gradient(152deg,#137A74 0%,#0F6B66 45%,#0B5853 100%);
  --hero-edge:rgba(11,88,83,.6);
  --hero-lift:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(15,31,28,.12),0 16px 36px -22px rgba(15,107,102,.45);
  --on-hero:#FFFFFF;--on-hero-2:#FFFFFF;--hero-ico:rgba(4,40,37,.16);--hero-ico-ring:rgba(255,255,255,.12);
  --hero-go:#FFFFFF;--on-hero-go:#0F6B66;--hero-pill-ring:#FFFFFF;--hero-spark-fill:.2;
  --urgent-row:rgba(220,38,38,.05);--urgent-edge:rgba(220,38,38,.28);--urgent-meta:#9A3B33;--row-hover:rgba(15,107,102,.035);
  --series-phone:#6B7F79;--series-3:#7C8F89;
  --chart-grid:rgba(15,31,28,.08);--chart-base:rgba(15,31,28,.16);
  --chart-area:rgba(15,107,102,.14);--chart-area-mid:rgba(15,107,102,.02);--chart-day:rgba(15,107,102,.10);
  --today-col:linear-gradient(180deg,rgba(15,107,102,.08) 0%,rgba(15,107,102,.01) 100%);--today-col-lift:inset 0 0 0 1px rgba(15,107,102,.10);
  --today-ring:rgba(15,31,28,.22);--dot-hole:#FFFFFF;
  --tt-sub:#A9B8B3;--bubble-lift:0 10px 24px -10px rgba(15,31,28,.45);--leader:rgba(15,31,28,.22);--ring-base:#E2E8E6;
  --bar-dim:.45;
  --glow-logo:none;--glow-dot:none;--glow-status:0 0 0 3px var(--live-glow);--glow-line:none;--glow-spark:none;--glow-spark-ok:none;
  --glow-btn:0 8px 22px -12px rgba(15,107,102,.5);--glow-meter:none;--glow-ok-bar:none;--glow-err-bar:none;
}

/* ---------- the frame: flat, a faint light from the top left ---------- */
.main{padding:0}
.inset{min-height:100vh;border:0;border-radius:0;background:var(--bg-glow),var(--frame)}
/* the two strips that stay at the top of a narrow page while it scrolls were painted the old panel's colour */
@media (max-width:1000px){.toc.gtabs,.cu-tabs{background:var(--frame)}}

/* ---------- the sidebar: 240 wide, 224 under 1400px (the design); the rail (app.css: 60, by choice or under 1101px) is said again so it still wins ---------- */
.app{grid-template-columns:240px minmax(0,1fr)}
@media (max-width:1399px){.app{grid-template-columns:224px minmax(0,1fr)}}
@media (max-width:1100px){.app{grid-template-columns:60px minmax(0,1fr)}}
.side{background:var(--side);border-right:1px solid var(--side-line);padding:18px 12px 14px;overflow:hidden auto;scrollbar-width:thin}
.side-top{height:44px;padding:0 0 0 12px;margin-bottom:0}
.side .logo b{font-size:var(--fs-wordmark);font-weight:700;font-stretch:100%;letter-spacing:-.045em}
:root:not([data-lights="off"]) .side .lights i{box-shadow:var(--glow-logo)}
.rail-btn{width:40px;height:40px;border-radius:var(--r-item)}
.nav{margin-top:20px}
.nav a{height:42px;gap:12px;padding:0 12px;border-radius:var(--r-item)}
.nav-pill{border-radius:var(--r-item);background:var(--nav-cur);box-shadow:var(--nav-cur-lift)}
.nav-pill::before{display:none}
.nav a.cur svg.i{color:var(--lime)}
.nav .badge-dot{min-width:22px;height:20px;line-height:20px;padding:0 7px;border-radius:var(--r-pill);font-weight:700}

/* the foot: Get live (until live), the month's messages, Email UNLOOK, the theme */
.side-foot{gap:12px;padding-top:28px}
.side-link{height:42px;gap:12px;padding:0 12px;border-radius:var(--r-item)}
.golive{padding:14px;border-color:var(--hair);border-radius:var(--r-meter);background:var(--meter-card);box-shadow:inset 0 1px 0 var(--btn-2-hi)}
.usage{padding:14px 14px 15px;border:1px solid var(--hair);border-radius:var(--r-meter);background:var(--meter-card);box-shadow:inset 0 1px 0 var(--btn-2-hi)}
@media (hover:hover){.usage:hover{border-color:var(--line-2);box-shadow:inset 0 1px 0 var(--btn-2-hi)}}
.side .usage-t{flex-direction:column;align-items:flex-start;gap:6px}
.usage-t span{font-size:var(--fs-meta);font-weight:500;color:var(--ink-3)}
.usage-t b{font-family:var(--display);font-size:var(--fs-amount);font-weight:700;letter-spacing:-.02em;line-height:1}
.usage-t b small{font-family:var(--sans);font-size:var(--fs-meta);font-weight:400;letter-spacing:0;font-variant-numeric:normal;color:var(--ink-3)} /* plain zeros: the face's tabular zero is slashed */

/* Light / Dark (shell.js): a joined pair, so a press does not shrink one half out of it */
.side-theme{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--seg-well);border:1px solid var(--hair)} /* 10 inside + 4 of padding */
.side-theme button{display:flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 10px;border-radius:10px;color:var(--ink-3);font-size:var(--fs-sm);font-weight:500;transition:color var(--duration-quick) var(--ease-out)}
.side-theme button svg.i{flex:none;width:16px;height:16px}
.side-theme button[aria-pressed="true"]{background:var(--seg-on);box-shadow:var(--seg-on-lift);color:var(--ink);font-weight:600}
@media (hover:hover){.side-theme button[aria-pressed="false"]:hover{color:var(--ink)}}

/* the folded sidebar (by choice, or under 1100px): the same selectors as app.css's, so these win over the rules above */
:root[data-rail="1"] .side{padding:18px 8px 14px}
@media (max-width:1100px){.side{padding:18px 8px 14px}}
:root[data-rail="1"] .side-top{flex-direction:column;height:auto;gap:8px;padding:6px 0 0;margin-bottom:10px}
@media (max-width:1100px){.side-top{justify-content:center;padding:6px 0 0;margin-bottom:10px}}
:root[data-rail="1"] .nav{margin-top:6px}
@media (max-width:1100px){.nav{margin-top:6px}}
:root[data-rail="1"] .nav a,:root[data-rail="1"] .side-link{justify-content:center;padding:0;width:44px;height:44px;margin:0 auto}
@media (max-width:1100px){.nav a,.side-link{justify-content:center;padding:0;width:44px;height:44px;margin:0 auto}}
:root[data-rail="1"] .nav-pill{left:calc(50% - 22px);right:auto;width:44px}
@media (max-width:1100px){.nav-pill{left:calc(50% - 22px);right:auto;width:44px}}
:root[data-rail="1"] .nav-badge.t-badge{top:3px;right:2px}
@media (max-width:1100px){.nav-badge.t-badge{top:3px;right:2px}}
:root[data-rail="1"] .nav .badge-dot{min-width:18px;height:17px;line-height:17px;padding:0 5px}
@media (max-width:1100px){.nav .badge-dot{min-width:18px;height:17px;line-height:17px;padding:0 5px}}
:root[data-rail="1"] .golive{padding:6px;border-radius:var(--r-item)}
@media (max-width:1100px){.golive{padding:6px;border-radius:var(--r-item)}}
:root[data-rail="1"] .side-theme{grid-template-columns:1fr}
@media (max-width:1100px){.side-theme{grid-template-columns:1fr}}
:root[data-rail="1"] .side-theme button{height:40px;padding:0}
@media (max-width:1100px){.side-theme button{height:40px;padding:0}}

/* ---------- the header, on every screen ---------- */
#theme-btn{display:none} /* the switch is at the foot of the sidebar now; the button stays in the page for app.js */
.head{padding:20px 24px 12px}
.ask{flex:0 1 280px;gap:8px;height:44px;padding:0 6px 0 15px;border:1px solid var(--field-line);border-radius:var(--r-pill);background:var(--ctl)}
.ask:has(input:focus-visible){outline:none}
.ask:focus-within{border-color:var(--ink-3);box-shadow:0 0 0 2px var(--focus)}
.ask>svg.i{width:18px;height:18px;color:var(--lime)}
.ask-k{min-width:28px;height:28px;padding:0 8px;border:1px solid var(--hair-2);border-radius:var(--r-pill);background:var(--raise);font-size:var(--fs-meta);font-weight:600;color:var(--ink-3)}
.ask-log,.ask .mic{width:30px;height:30px;border-radius:var(--r-pill)} /* 30 inside a 44 pill, 6 from its edge: round inside round */
@media (pointer:coarse){.ask-log,.ask .mic{width:36px;height:36px}}
.status{gap:10px;height:44px;padding:0 16px 0 15px;border:1px solid var(--hair-2);border-radius:var(--r-pill);background:var(--ctl);font-size:var(--fs-sm);font-weight:600;color:var(--ink);transition:border-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),scale var(--duration-micro) var(--ease-out)}
.status:active{scale:.96}
.dot-live{width:8px;height:8px;box-shadow:var(--glow-status)}

/* the account: a round avatar at the end of the header (its menu opens down from it) */
.head .acct{flex:none}
.head .acct .acct-btn{width:44px;height:44px;padding:0;margin:0;justify-content:center;border:1px solid var(--hair-2);border-radius:50%;background:var(--avatar);box-shadow:inset 0 1px 0 var(--btn-2-hi);transition:border-color var(--duration-quick) var(--ease-out),scale var(--duration-micro) var(--ease-out)}
.head .acct .acct-btn[aria-expanded="true"]{border-color:var(--line-strong)}
@media (hover:hover){.head .acct .acct-btn:hover{border-color:var(--line-strong)}}
.head .acct .acct-btn:active{scale:.96}
.head .acct .av{width:auto;height:auto;border:0;border-radius:0;background:none;font-family:var(--display);font-size:var(--fs-avatar);font-weight:700;color:var(--avatar-ink)}
.head .acct .acct-t,.head .acct .chev{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.head .acct .menu{left:auto;right:0;bottom:auto;top:calc(100% + 6px);width:260px}
@media (pointer:coarse){.head .acct .menu a,.head .acct .menu button{height:var(--h-touch)}}

/* Home's header: the greeting and the day, then what needs you (drawn by home.js) */
body[data-view="home"] .head h1{font-family:var(--display);font-size:var(--fs-greet);font-weight:600;letter-spacing:-.025em;line-height:1.1}
body[data-view="home"] .head-t p{margin-top:6px;font-size:var(--fs-body);color:var(--ink-2)}
.hn-urgent{color:var(--err-ink);font-weight:600}
.hn-dot{margin:0 4px;color:var(--ink-3)}

/* Home under 1180px: the ask bar is its round button, as in the design, so the greeting keeps its line beside the
   controls; "/" opens the assistant there (shell.js). Every other screen keeps the bar, its "/", the mic and Requests.
   (The bar is not narrowed to 220 under 1280px, as the plan had it: at 220 its words are cut to "Ask UNL". It gives
   way by itself, down to app.css's 200, only where the header needs the room.) */
@media (min-width:721px) and (max-width:1179px){
  body[data-view="home"] .ask{display:none}
  body[data-view="home"] .ask+.tools{margin-left:auto}
  body[data-view="home"] .tools .ask-m{display:inline-grid;width:44px;height:44px;border-color:var(--hair-2);border-radius:var(--r-pill);background:var(--ctl);color:var(--lime)}
}

/* ---------- a phone (720px, as app.css): the burger menu (menu.js) holds the account on every screen but Home ---------- */
@media (max-width:720px){
  .head{padding:10px 16px}
  .status{padding:0 12px}
  .tools .ask-m{width:44px;height:44px;border-color:var(--hair-2);border-radius:var(--r-pill);background:var(--ctl);color:var(--lime)}
  .head .bm-btn{border-color:var(--hair-2);border-radius:var(--r-pill);background:var(--ctl)}
  .bm-dot{top:0;inset-inline-end:0;box-shadow:0 0 0 2px var(--frame)} /* on the round button: where its edge is at 45 degrees */
  body:not([data-view="home"]) .head .acct{display:none}
  body[data-view="home"] .head{flex-wrap:wrap;row-gap:12px}
  body[data-view="home"] .head-t{order:9;flex-basis:100%}
  body[data-view="home"] .head-t p:not([hidden]){display:block}
  body[data-view="home"] .head h1{font-size:var(--fs-greet-sm)}
  /* the assistant fills the screen under a header that is 8 taller now (its controls are 44, not 32) */
  body[data-view="assistant"] .as-chat{height:calc(100dvh - 68px - env(safe-area-inset-bottom))}
}

@media (max-width:359px){.status{min-width:var(--h-touch);justify-content:center;padding:0}}

/* the Light / Dark pair again at the foot of the phone's menu (shell.js puts it there each time the menu is drawn) */
.bm .side-theme{grid-template-columns:1fr 1fr;margin-top:6px} /* (the rail's one column, under 1101px, is the sidebar's, not this) */
.bm .side-theme button{height:var(--h-touch);padding:0 10px}
.bm-who small .tnum{font-variant-numeric:normal} /* "0 of 2,000 messages" with plain zeros, as the sidebar's meter */

@media (prefers-reduced-motion:reduce){
  .side-theme button,.status,.head .acct .acct-btn{transition:none}
}

/* scroll bars in our style (the owner, 14 October): thin, round, no track; a little stronger under the pointer */
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--r-pill);background:var(--scroll-thumb);background-clip:padding-box}
@media (hover:hover){::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}}
::-webkit-scrollbar-corner{background:transparent}

/* batch 3 (15 Oct): the page title stays in one place as you switch screens: with or without a subtitle line the title block is the same height (Home draws its own header) */
@media (min-width:721px){body:not([data-view="home"]) .head-t{display:flex;flex-direction:column;justify-content:flex-start;min-height:45px}}

/* a tap on a phone shows no blue box over what was touched (the owner, 16 Oct): each control has its own pressed look, and the keyboard focus ring stays */
html{-webkit-tap-highlight-color:transparent}