/* FAI Legal, the new design (Atelier). Loaded only by app-next.html (scripts/build-app-next.mjs); every rule is
   scoped under html.fai-next. Colours come only from the live tokens (--c-*), so the 10 palettes, night mode and
   the interface sizes keep working. State classes are the ones app.js toggles (.nav-active, .active, .on ...). */

html.fai-next{
  --n-bg:rgb(var(--c-cream)); --n-card:rgb(var(--c-paper)); --n-line:rgb(var(--c-hair));
  --n-ink:rgb(var(--c-charcoal)); --n-head:rgb(var(--c-heading)); --n-muted:rgb(var(--c-muted));
  --n-acc:rgb(var(--c-brass)); --n-onacc:rgb(var(--c-onacc)); --n-side:rgb(var(--c-navy));
  --n-soft:color-mix(in srgb, rgb(var(--c-charcoal)) 6%, rgb(var(--c-paper)));
  --n-accsoft:color-mix(in srgb, rgb(var(--c-brass)) 16%, transparent);
  --n-shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 32px -18px rgba(15,23,42,.35);
  --n-ease:cubic-bezier(.2,.9,.25,1);
}
html.fai-next[data-appearance="night"]{ --n-shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -16px rgba(0,0,0,.7); }
html.fai-next body{
  background:
    radial-gradient(900px 520px at 0% 0%, color-mix(in srgb, rgb(var(--c-brass)) 10%, transparent), transparent 62%),
    var(--n-bg);
}

/* ============================== SIDEBAR (desktop card, phone drawer) ============================== */
html.fai-next #app-sidebar{
  background:color-mix(in srgb, var(--n-card) 94%, transparent);
  color:var(--n-ink);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
}
html.fai-next #app-sidebar [class*="text-white"]{ color:inherit !important; }
@media (min-width:768px){
  html.fai-next #app-sidebar{
    margin:12px 0 12px 12px; height:calc(100% - 24px) !important; border-radius:26px;
    box-shadow:var(--n-shadow), 0 0 0 1px var(--n-line);
  }
}
html.fai-next #sidebar-brand{ border-bottom:0; padding-bottom:10px; }
html.fai-next #sidebar-brand .font-serif{ color:var(--n-head); font-size:16px; }
html.fai-next #sidebar-brand .text-\[10px\]{ color:var(--n-muted) !important; }
html.fai-next #brand-mark{ border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px rgb(var(--c-brass)); }
html.fai-next #mobile-drawer-close{ background:var(--n-soft); color:var(--n-muted); }

/* New chat: its own full-width row under the brand (moved there by the build) */
html.fai-next .nx-newrow{ padding:0 12px 6px; flex-shrink:0; }
html.fai-next #new-chat-btn{
  width:100%; justify-content:center; gap:7px; padding:7px 12px !important; border-radius:999px !important;
  font-size:12.5px !important; font-weight:600;
  background:var(--n-side) !important; color:#fff !important;
  box-shadow:0 10px 22px -12px var(--n-side), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .15s var(--n-ease), box-shadow .2s;
}
html.fai-next #new-chat-btn svg{ color:var(--n-acc); }
html.fai-next #new-chat-btn:active{ transform:scale(.97); }

html.fai-next .side-search{ background:var(--n-soft); border:0; border-radius:999px; color:var(--n-muted); height:36px; }
html.fai-next .side-search input{ color:var(--n-ink); font-size:13px; }
html.fai-next .side-search input::placeholder{ color:var(--n-muted); }
html.fai-next .side-search input:-webkit-autofill{ -webkit-text-fill-color:var(--n-ink); -webkit-box-shadow:0 0 0 40px var(--n-soft) inset; }
html.fai-next .side-ttl{ color:var(--n-muted); font-weight:700; letter-spacing:.08em; font-size:10.5px; text-transform:none; }
html.fai-next .side-ttl:not(.side-plan-row){ text-transform:uppercase; }

html.fai-next .navlink{
  color:var(--n-muted); border-radius:14px; padding:4px 10px 4px 6px; gap:10px; margin:1px 0;
  transition:background-color .2s, color .2s, box-shadow .25s;
}
html.fai-next .navlink::before{ display:none; }
html.fai-next .navlink:hover{ background:var(--n-soft); color:var(--n-ink); }
html.fai-next .navlink svg.nav-ico, html.fai-next .navlink .nav-ico{
  box-sizing:content-box; width:15px; height:15px; padding:5px; border-radius:9px;
  background:var(--n-soft); color:var(--n-muted); transition:background-color .25s, color .25s, transform .3s var(--n-ease);
}
html.fai-next .navlink.nav-active{ background:var(--n-card); color:var(--n-head); font-weight:600; box-shadow:var(--n-shadow), 0 0 0 1px var(--n-line); }
html.fai-next .navlink.nav-active .nav-ico{ background:var(--n-acc); color:var(--n-onacc); transform:scale(1.04); }
html.fai-next .side-count{ background:var(--n-soft); color:var(--n-muted); }
html.fai-next .side-count:empty{ display:none; }

html.fai-next .chatitem{ color:var(--n-muted); font-size:13px; padding:7px 10px; border:0; }
html.fai-next .chatitem::before{ content:""; width:5px; height:5px; border-radius:50%; flex:none; background:color-mix(in srgb, var(--n-acc) 70%, transparent); }
html.fai-next .chatitem:hover{ background:var(--n-soft); color:var(--n-ink); }
html.fai-next .chatitem.active{ background:var(--n-accsoft); color:var(--n-head); border:0; font-weight:600; }
html.fai-next .chatitem .del{ color:var(--n-muted); opacity:.55; }
html.fai-next .chatitem:hover .del{ opacity:1; background:transparent; }

html.fai-next .side-appear{ background:var(--n-soft); border-radius:999px; }
html.fai-next .side-appear button{ color:var(--n-muted); border-radius:999px; }
html.fai-next .side-appear button[aria-pressed="true"]{ background:var(--n-card); color:var(--n-head); box-shadow:var(--n-shadow); }

/* The plan: a soft card */
html.fai-next #side-status{ margin:8px 10px 0; padding:10px 12px !important; border-radius:18px; background:var(--n-soft); }
html.fai-next #side-status .side-ttl{ padding:0 0 6px; color:var(--n-head); font-size:12.5px; letter-spacing:0; }
html.fai-next #upgrade-btn{ text-transform:none; letter-spacing:0; font-size:11px; font-weight:600; border-radius:999px; padding:3px 10px; }
html.fai-next .side-meter{ padding:0; color:var(--n-muted); gap:3px 12px; font-size:11.5px; }
html.fai-next .side-meter svg{ color:var(--n-muted) !important; }
html.fai-next .side-foot{ border-top:0; color:var(--n-ink); padding:10px 14px 14px; }
html.fai-next #logout-btn{ color:var(--n-muted); }

/* ============================== MAIN ============================== */
html.fai-next main{ background:transparent; }
html.fai-next .vhead{
  height:auto; background:transparent !important; border-bottom:0 !important; padding:14px 28px 4px !important;
}
html.fai-next .vhead .nav-ico{ display:none; }
html.fai-next .vhead span.font-serif{ font-size:22px; line-height:1.05; letter-spacing:-.015em; color:var(--n-head); font-weight:400; }
html.fai-next .vhead > span, html.fai-next .vhead .text-muted{ font-size:12px; }

/* ============================== PHONE ============================== */
@media (max-width:767.98px){
  /* top bar: light, translucent, the page shows through */
  html.fai-next #mobile-header{
    background:color-mix(in srgb, var(--n-bg) 78%, transparent) !important; color:var(--n-ink) !important;
    border-bottom:0 !important; box-shadow:none !important; padding:8px 12px 6px 14px !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  }
  html.fai-next #mobile-header [class*="text-white"]{ color:inherit !important; }
  html.fai-next #mobile-menu-btn{ color:var(--n-head) !important; }   /* the menu is back (28 Sep): no tab bar */
  html.fai-next #mobile-header .bg-brass\/15{ display:none !important; }
  html.fai-next #mobile-header .bg-brass\/15 span{ color:var(--n-onacc) !important; }
  html.fai-next #mobile-title{ color:var(--n-head) !important; font-size:16px; }
  html.fai-next #mobile-theme-btn{ color:var(--n-muted) !important; }
  html.fai-next #mobile-new-chat{ background:var(--n-side) !important; color:#fff !important; border-radius:999px; padding:7px 12px; }
  html.fai-next #mobile-new-chat svg{ color:var(--n-acc); }

  /* the tab bar: a floating capsule */
  html.fai-next #nx-tabs{
    position:absolute; left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); z-index:45;
    height:60px; padding:5px; border-radius:24px; display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
    background:color-mix(in srgb, var(--n-card) 82%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:var(--n-shadow), 0 0 0 1px var(--n-line), inset 0 1px 0 rgba(255,255,255,.4);
  }
  html.fai-next .nx-tab{
    display:grid; justify-items:center; align-content:center; gap:2px; margin:0; padding:0 !important;
    border-radius:19px; color:var(--n-muted); font-size:10.5px; font-weight:500; background:none; border:0;
    transition:background-color .25s, color .25s, box-shadow .3s;
  }
  html.fai-next .nx-tab svg{ width:21px; height:21px; padding:0 !important; background:none !important; transition:transform .45s cubic-bezier(.3,1.6,.4,1), color .25s; }
  html.fai-next .nx-tab.nav-active{ background:var(--n-card); color:var(--n-head); font-weight:600; box-shadow:var(--n-shadow); }
  html.fai-next .nx-tab.nav-active svg{ color:var(--n-acc); transform:translateY(-1px) scale(1.06); }
  html.fai-next .nx-tab:active svg{ transform:scale(.86); }

  /* Search: the two searches as big tiles */
  html.fai-next .nx-hub{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 16px 4px; flex-shrink:0; }
  html.fai-next .nx-hub .nx-hub-t{
    display:grid; justify-items:start; gap:2px; padding:12px 14px; margin:0; border-radius:20px;
    background:var(--n-card); color:var(--n-ink); box-shadow:0 0 0 1px var(--n-line); font-weight:400;
  }
  html.fai-next .nx-hub .nx-hub-t svg{ width:18px; height:18px; padding:7px; border-radius:11px; background:var(--n-soft); color:var(--n-muted); box-sizing:content-box; margin-bottom:4px; }
  html.fai-next .nx-hub .nx-hub-t b{ font:400 18px/1.1 'DM Serif Display', Georgia, serif; color:inherit; }
  html.fai-next .nx-hub .nx-hub-t small{ font-size:11.5px; color:var(--n-muted); }
  html.fai-next .nx-hub .nx-hub-t.nav-active{ background:var(--n-side); color:#fff; box-shadow:0 14px 28px -14px var(--n-side); }
  html.fai-next .nx-hub .nx-hub-t.nav-active small{ color:rgba(255,255,255,.72); }
  html.fai-next .nx-hub .nx-hub-t.nav-active svg{ background:rgba(255,255,255,.14); color:var(--n-acc); }

  /* the drawer is a light sheet now */
  html.fai-next #app-sidebar{ border-radius:0 26px 26px 0; }
}
@media (min-width:768px){ html.fai-next #nx-tabs, html.fai-next .nx-hub{ display:none !important; } }

/* ============================== ASK BOX (chat composer + dashboard) ============================== */
html.fai-next #mode-discuss, html.fai-next [data-dash-mode="discuss"]{ display:none !important; }
html.fai-next #composer-box, html.fai-next .askbox{
  border-radius:26px !important; border:0 !important;
  background:color-mix(in srgb, var(--n-card) 90%, transparent) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:var(--n-shadow), 0 0 0 1px var(--n-line), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
html.fai-next #composer-box:focus-within, html.fai-next .askbox:focus-within{
  box-shadow:var(--n-shadow), 0 0 0 1px color-mix(in srgb, var(--n-acc) 55%, var(--n-line)), 0 0 0 5px var(--n-accsoft) !important;
}
html.fai-next #attach-btn, html.fai-next #dash-attach{ border-radius:999px !important; border:0 !important; background:transparent !important; color:var(--n-muted) !important; }
html.fai-next #attach-btn:hover, html.fai-next #dash-attach:hover{ background:var(--n-soft) !important; color:var(--n-ink) !important; }
html.fai-next #send-btn, html.fai-next #dash-go{ border-radius:999px !important; background:var(--n-side) !important; color:#fff !important; box-shadow:0 8px 18px -10px var(--n-side) !important; }
html.fai-next #send-btn:disabled{ background:color-mix(in srgb, var(--n-muted) 45%, transparent) !important; box-shadow:none !important; opacity:1 !important; }
html.fai-next #voice-btn, html.fai-next #dash-voice-btn{ border-radius:999px !important; border:0 !important; background:transparent !important; }
html.fai-next #composer-meta{ border-top:0 !important; }
html.fai-next .cmp-chip{ color:var(--n-muted); }

/* the switch: a quiet track, the chosen one on a white thumb */
html.fai-next #mode-track{ background:var(--n-soft) !important; border-radius:999px !important; padding:3px !important; }
html.fai-next #mode-hl{ background:var(--n-card) !important; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 4px 10px -4px rgba(0,0,0,.18) !important; }
html.fai-next #mode-track .mode-seg{ color:var(--n-muted) !important; opacity:1; font-weight:600; }
html.fai-next #mode-track .mode-seg.on{ color:var(--n-head) !important; }
html.fai-next #mode-track .mode-seg.on svg{ color:var(--n-acc) !important; }
html.fai-next .dash-modes{ background:var(--n-soft); border-radius:999px; padding:3px; gap:2px !important; }
html.fai-next .dash-modes .think-pill{ border:0 !important; background:transparent !important; color:var(--n-muted) !important; border-radius:999px !important; }
html.fai-next .dash-modes .think-pill.on{ background:var(--n-card) !important; color:var(--n-head) !important; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 4px 10px -4px rgba(0,0,0,.18); }
html.fai-next .dash-modes .think-pill.on svg{ color:var(--n-acc) !important; }
html.fai-next #mode-draft.on ~ .mode-menu, html.fai-next .dash-modes [data-dash-mode="draft"].on ~ .mode-menu{ color:var(--n-muted); }

@media (max-width:767.98px){
  /* compact on a phone: the switch sits small on the left, not as a full-width bar */
  html.fai-next #mode-track{ order:0 !important; width:auto !important; grid-template-columns:repeat(2, auto) !important; margin-top:2px !important; }
  html.fai-next #mode-track .mode-seg{ height:30px !important; min-height:30px !important; padding:0 12px !important; font-size:12px !important; }
  html.fai-next #mode-track .mode-seg.on{ background:var(--n-card) !important; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 4px 10px -4px rgba(0,0,0,.18) !important; }
  html.fai-next #mode-draft{ padding-right:28px !important; }
  html.fai-next .dash-modes{ width:auto !important; }
  html.fai-next .dash-modes .think-pill{ flex:none !important; min-height:30px !important; padding:0 12px !important; }
  html.fai-next #composer-box{ border-radius:22px !important; }
}
html.fai-next #tpl-browse.hidden{ visibility:hidden; }
html.fai-next #mode-draft, html.fai-next .dash-modes [data-dash-mode="draft"]{ padding-right:32px !important; }
html.fai-next .dash-modes{ flex:none !important; width:auto !important; margin-left:auto; }
html.fai-next .dash-modes .think-pill{ flex:none !important; min-height:30px !important; padding:0 12px !important; font-weight:600; }

/* usage as a share (app.js writes .nx-m when FAI_NEXT) */
html.fai-next .side-meter{ display:grid; gap:7px; }
html.fai-next .side-meter > span{ display:flex; align-items:center; gap:5px; }
html.fai-next .side-meter > span > .nx-m{ flex:1; }
html.fai-next .nx-m{ display:grid !important; gap:4px; }
html.fai-next .nx-mh{ display:flex; justify-content:space-between; font-size:11.5px; }
html.fai-next .nx-mh b{ font-weight:500; color:var(--n-ink); }
html.fai-next .nx-mh em{ font-style:normal; color:var(--n-muted); font-variant-numeric:tabular-nums; }
html.fai-next .nx-mb{ display:block !important; height:5px; border-radius:9px; background:color-mix(in srgb, var(--n-muted) 20%, transparent); overflow:hidden; }
html.fai-next .nx-mb i{ display:block; height:100%; border-radius:inherit; background:var(--n-acc); }
html.fai-next #side-days{ font-size:11px; color:var(--n-muted); }
html.fai-next #side-days{ display:flex !important; align-items:center; gap:5px; }

/* An empty chat lists the member's chats (Chats tab) */
html.fai-next #nx-chatlist{ max-width:680px; margin:22px auto 0; display:grid; gap:0; padding:4px; border-radius:20px; background:var(--n-card); box-shadow:0 0 0 1px var(--n-line); }
html.fai-next #nx-chatlist:empty{ display:none; }
html.fai-next .nx-cl-h{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--n-muted); padding:10px 12px 6px; }
html.fai-next .nx-cl{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; background:none; border-radius:14px; text-align:left; cursor:pointer; color:var(--n-ink); font-size:13.5px; }
html.fai-next .nx-cl{ position:relative; }
html.fai-next .nx-cl + .nx-cl::before{ content:""; position:absolute; left:12px; right:12px; top:0; height:1px; background:var(--n-line); }
html.fai-next .nx-cl:hover{ background:var(--n-soft); }
html.fai-next .nx-cl .ttl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
html.fai-next .nx-cl .when{ font-size:11.5px; color:var(--n-muted); }
html.fai-next #thread:not(:empty) ~ #nx-chatlist{ display:none; }
html.fai-next #empty-state.hidden + #nx-chatlist{ display:none; }
html.fai-next #mode-track #mode-draft{ padding-right:32px !important; }

/* ============================== DRAFTING PAGE (#nx-draft, filled by app.js renderDraftPage) ============================== */
html.fai-next #nx-draft-q{ background:var(--n-card); border-color:var(--n-line); color:var(--n-ink); border-radius:14px; }
html.fai-next .nx-dfil{ display:grid; gap:8px; margin:12px 0 14px; }
html.fai-next .nx-chips{ display:flex; flex-wrap:wrap; gap:7px; }
html.fai-next .nx-chip{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:99px; font-size:12.5px; color:var(--n-muted); box-shadow:inset 0 0 0 1px var(--n-line); background:var(--n-card); transition:background-color .2s, color .2s, transform .12s; }
html.fai-next .nx-chip:active{ transform:scale(.95); }
html.fai-next .nx-chip svg{ width:14px; height:14px; }
html.fai-next .nx-chip em{ font-style:normal; opacity:.6; font-size:.9em; }
html.fai-next .nx-chip.on{ background:var(--n-side); color:#fff; box-shadow:none; }
html.fai-next .nx-chips.sub .nx-chip{ height:28px; font-size:12px; }
html.fai-next .nx-auto, html.fai-next .nx-trow{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; }
html.fai-next .nx-auto{ background:var(--n-card); border-radius:18px; box-shadow:var(--n-shadow), 0 0 0 1px var(--n-line); }
html.fai-next .nx-auto .nx-ti{ background:var(--n-side); color:var(--n-acc); }
html.fai-next .nx-ti{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--n-accsoft); color:var(--n-acc); }
html.fai-next .nx-ti svg{ width:16px; height:16px; }
html.fai-next .nx-tx{ flex:1; min-width:0; display:grid; gap:1px; }
html.fai-next .nx-tx b{ font-weight:600; font-size:13.5px; color:var(--n-head); }
html.fai-next .nx-tx small{ font-size:12px; line-height:1.4; color:var(--n-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html.fai-next .nx-auto > svg, html.fai-next .nx-trow > svg{ flex:none; width:16px; height:16px; color:var(--n-muted); }
html.fai-next .nx-secl{ display:flex; justify-content:space-between; align-items:baseline; margin:20px 4px 8px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--n-muted); }
html.fai-next .nx-popular{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
html.fai-next .nx-popc{ display:grid; gap:3px; align-content:start; text-align:left; padding:14px; border-radius:18px; background:var(--n-card); box-shadow:var(--n-shadow), 0 0 0 1px var(--n-line); transition:transform .22s var(--n-ease); }
html.fai-next .nx-popc:hover{ transform:translateY(-3px); }
html.fai-next .nx-popc .nx-ti{ margin-bottom:4px; }
html.fai-next .nx-popc b{ font-size:13px; line-height:1.3; color:var(--n-head); }
html.fai-next .nx-popc small{ font-size:11.5px; color:var(--n-muted); }
html.fai-next .nx-fam{ margin:16px 4px 6px; font:400 17px/1.2 'DM Serif Display', Georgia, serif; color:var(--n-head); }
html.fai-next .nx-fam em{ font:600 11px system-ui, sans-serif; font-style:normal; color:var(--n-muted); margin-left:8px; }
html.fai-next .nx-tlist{ background:var(--n-card); border-radius:18px; box-shadow:var(--n-shadow), 0 0 0 1px var(--n-line); padding:4px; }
html.fai-next .nx-trow{ border-radius:14px; transition:background-color .15s; }
html.fai-next .nx-trow:hover{ background:var(--n-soft); }
html.fai-next .nx-trow + .nx-trow{ box-shadow:0 -1px 0 var(--n-line); }
html.fai-next .nx-link{ color:var(--n-acc); font-weight:600; text-transform:none; letter-spacing:0; font-size:12px; }
html.fai-next .nx-none{ padding:18px; border-radius:18px; background:var(--n-card); color:var(--n-muted); font-size:13px; box-shadow:0 0 0 1px var(--n-line); }

/* Statute results: Offences only + sort (app.js statFilterBar) */
html.fai-next .nx-statbar{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:4px; }

/* Night: the navy New chat button sinks into a dark sidebar; use the accent instead. */
html.fai-next[data-appearance="night"] #new-chat-btn, html.fai-next[data-appearance="night"] #mobile-new-chat{ background:var(--n-acc) !important; color:var(--n-onacc) !important; box-shadow:0 10px 22px -14px var(--n-acc); }
html.fai-next[data-appearance="night"] #new-chat-btn svg, html.fai-next[data-appearance="night"] #mobile-new-chat svg{ color:var(--n-onacc); }
/* Short screens (a laptop at 150%): the sidebar scrolls as one, so the plan card and Sign out stay reachable. */
@media (min-width:768px){
  /* Owner, 28 Sep: no sidebar scrolling at any zoom from 90% to 120%. Recent chats take whatever height is left;
     everything else is sized to fit a 690px-tall window (a 1080p laptop at 120%). */
  html.fai-next #app-sidebar{ overflow:hidden !important; }
  html.fai-next #app-sidebar > .flex-1{ min-height:0; }
  html.fai-next #chat-list{ min-height:0; }
}

/* "Legal advice by FAI": the title over the answer's summary card (app.js presentAnswer, research answers) */
html.fai-next .nx-adv-h{ display:grid; gap:2px; margin-bottom:10px; }
html.fai-next .nx-adv-h b{ font:400 19px/1.2 'DM Serif Display', Georgia, serif; color:var(--n-head); }
html.fai-next .nx-adv-h small{ font-size:11.5px; color:var(--n-muted); }

/* Recent chats: the list scrolls inside the sidebar, so its lower edge fades rather than slicing a row. */
@media (min-width:768px){
  html.fai-next #chat-list{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent); padding-bottom:14px; }
}

/* Phone search screens: every court and year chip visible (they wrap instead of scrolling off the edge),
   and Search + Clear side by side under the box instead of two full-width bars. */
@media (max-width:767px){
  html.fai-next section[data-view="judgments"] .overflow-x-auto:has(.courtchip),
  html.fai-next section[data-view="judgments"] .overflow-x-auto:has(.yearchip){ flex-wrap:wrap; overflow:visible; row-gap:7px; }
  html.fai-next .flex:has(> #jud-input), html.fai-next .flex:has(> #stat-input){ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; }
  html.fai-next #jud-input, html.fai-next #stat-input{ grid-column:1 / -1; }
}

/* Binding / Persuasive badges on the summary card: the navy they use is the page colour at night. */
html.fai-next .pres-badge.binding{ color:var(--n-acc); }
html.fai-next[data-appearance="day"] .pres-badge.binding{ color:rgb(var(--c-navy)); }

/* ============================== ROUND 3: the design's remaining pieces (public/next/next.js) ============================== */
/* Top right (desktop): Search FAI, day or night, you */
html.fai-next main{ position:relative; }
html.fai-next #nx-top{ position:absolute; top:12px; right:22px; z-index:35; display:none; align-items:center; gap:8px; }
@media (min-width:768px){ html.fai-next #nx-top{ display:flex; } html.fai-next .vhead{ padding-right:330px !important; } }
html.fai-next .nx-search{ display:flex; align-items:center; gap:8px; height:36px; padding:0 10px 0 12px; min-width:200px; border-radius:999px; background:var(--n-card); color:var(--n-muted); font-size:12.5px; box-shadow:0 0 0 1px var(--n-line); transition:box-shadow .2s; }
html.fai-next .nx-search:hover{ box-shadow:0 0 0 1px color-mix(in srgb, var(--n-acc) 50%, var(--n-line)); }
html.fai-next .nx-search span{ flex:1; text-align:left; }
html.fai-next kbd{ font:600 10px/1 system-ui, sans-serif; color:var(--n-muted); background:var(--n-soft); border-radius:6px; padding:4px 6px; }
html.fai-next .nx-round{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--n-card); color:var(--n-ink); box-shadow:0 0 0 1px var(--n-line); transition:transform .12s; }
html.fai-next .nx-round:active, html.fai-next .nx-av:active{ transform:scale(.94); }
html.fai-next .nx-av{ width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; flex:none; background:var(--n-side); color:var(--n-acc); font:400 13px/1 'DM Serif Display', Georgia, serif; box-shadow:0 0 0 2px var(--n-card), 0 0 0 3px color-mix(in srgb, var(--n-acc) 60%, transparent); }
html.fai-next .nx-av.sm{ width:26px; height:26px; font-size:10.5px; box-shadow:0 0 0 1.5px color-mix(in srgb, var(--n-acc) 55%, transparent); }
html.fai-next .nx-av.lg{ width:44px; height:44px; font-size:16px; }
html.fai-next[data-appearance="night"] .nx-av{ background:color-mix(in srgb, var(--n-acc) 22%, var(--n-card)); }

/* A small label above each page title, as in the design */
html.fai-next .vhead span.font-serif{ display:inline-block; }
html.fai-next .vhead span.font-serif::before{ display:block; font:600 10px/1 system-ui, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--n-acc); margin-bottom:5px; }
html.fai-next section[data-view="chat"] .vhead span.font-serif::before,
html.fai-next section[data-view="judgments"] .vhead span.font-serif::before,
html.fai-next section[data-view="statute"] .vhead span.font-serif::before,
html.fai-next section[data-view="drafting"] .vhead span.font-serif::before{ content:"Workspace"; }
html.fai-next section[data-view="settings"] .vhead span.font-serif::before{ content:"Your account"; }
html.fai-next section[data-view="admin"] .vhead span.font-serif::before{ content:"Owner"; }

/* The command bar */
html.fai-next #nx-cmd{ position:fixed; inset:0; z-index:120; display:none; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; background:rgba(10,14,22,.36); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
html.fai-next #nx-cmd.on{ display:flex; animation:nxFade .16s ease-out; }
html.fai-next .nx-cmd-card{ width:min(620px, 100%); max-height:70vh; display:flex; flex-direction:column; border-radius:20px; background:var(--n-card); box-shadow:0 30px 80px -20px rgba(0,0,0,.45), 0 0 0 1px var(--n-line); overflow:hidden; animation:nxRise .22s var(--n-ease); }
html.fai-next .nx-cmd-in{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--n-line); color:var(--n-muted); }
html.fai-next .nx-cmd-in input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--n-ink); font-size:15px; }
html.fai-next .nx-cmd-list{ overflow-y:auto; padding:6px; }
html.fai-next .nx-cmd-g{ padding:10px 10px 4px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--n-muted); }
html.fai-next .nx-cmd-i{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:12px; text-align:left; font-size:13.5px; color:var(--n-ink); }
html.fai-next .nx-cmd-i svg{ color:var(--n-muted); flex:none; }
html.fai-next .nx-cmd-i span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.fai-next .nx-cmd-i.on, html.fai-next .nx-cmd-i:hover{ background:var(--n-soft); }
html.fai-next .nx-cmd-i.on svg{ color:var(--n-acc); }
html.fai-next .nx-cmd-none{ padding:18px; text-align:center; color:var(--n-muted); font-size:13px; }
@keyframes nxFade{ from{ opacity:0; } }
@keyframes nxRise{ from{ opacity:0; transform:translateY(10px) scale(.98); } }

/* Chats: the list page */
html.fai-next #nx-chatlist{ width:100%; max-width:760px; margin:18px auto 0; text-align:left; display:block; padding:0; border-radius:0; background:none; box-shadow:none; }
html.fai-next .nx-cl-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
html.fai-next .nx-cl-q{ flex:1 1 220px; display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:999px; background:var(--n-card); color:var(--n-muted); box-shadow:0 0 0 1px var(--n-line); }
html.fai-next .nx-cl-q input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--n-ink); font-size:13.5px; }
html.fai-next .nx-cl-f{ display:flex; gap:4px; padding:3px; border-radius:999px; background:var(--n-soft); }
html.fai-next .nx-cl-f button{ height:30px; padding:0 12px; border-radius:999px; font-size:12.5px; color:var(--n-muted); }
html.fai-next .nx-cl-f button.on{ background:var(--n-side); color:#fff; }
html.fai-next[data-appearance="night"] .nx-cl-f button.on{ background:var(--n-acc); color:var(--n-onacc); }
html.fai-next .nx-cl-bin{ display:flex; align-items:center; gap:6px; height:38px; padding:0 14px; border-radius:999px; background:var(--n-card); color:var(--n-ink); font-size:12.5px; box-shadow:0 0 0 1px var(--n-line); }
html.fai-next .nx-cl-bin em{ font-style:normal; font-size:11px; min-width:18px; padding:1px 6px; border-radius:99px; background:var(--n-accsoft); color:var(--n-acc); }
html.fai-next .nx-cl-bin em:empty{ display:none; }
html.fai-next .nx-cl-rows{ background:var(--n-card); border-radius:18px; box-shadow:var(--n-shadow), 0 0 0 1px var(--n-line); padding:4px; }
html.fai-next .nx-cl-rows .nx-cl{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; cursor:pointer; }
html.fai-next .nx-cl-rows .nx-cl:hover{ background:var(--n-soft); }
html.fai-next .nx-cl-i{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--n-soft); color:var(--n-muted); }
html.fai-next .nx-cl-i.d{ background:var(--n-accsoft); color:var(--n-acc); }
html.fai-next .nx-cl-t{ flex:1; min-width:0; display:grid; gap:1px; }
html.fai-next .nx-cl-t b{ font-weight:600; font-size:13.5px; color:var(--n-head); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.fai-next .nx-cl-t small{ font-size:11.5px; color:var(--n-muted); }
html.fai-next .nx-cl-del{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:var(--n-muted); opacity:.7; }
html.fai-next .nx-cl-del:hover{ opacity:1; background:color-mix(in srgb, #dc2626 12%, transparent); color:#dc2626; }
html.fai-next .nx-cl-none{ padding:18px; text-align:center; font-size:13px; color:var(--n-muted); }

/* Dashboard: the line under the greeting */
html.fai-next #nx-dk-sub{ margin:4px 0 0; font-size:13px; color:var(--n-muted); }

/* Sidebar foot: initials, name, firm */
html.fai-next #side-user{ gap:8px !important; }
html.fai-next #side-user > svg{ display:none; }
html.fai-next .nx-who{ display:grid; min-width:0; line-height:1.25; }
html.fai-next .nx-who b{ font-weight:600; font-size:12.5px; color:var(--n-head); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.fai-next .nx-who small{ font-size:11px; color:var(--n-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Settings tabs */
html.fai-next #nx-settabs{ display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:2px; padding:4px; margin:0 0 14px; border-radius:999px; background:var(--n-card); box-shadow:0 0 0 1px var(--n-line); width:max-content; max-width:100%; }
html.fai-next #nx-settabs button{ flex:none; white-space:nowrap; display:flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:999px; font-size:12.5px; color:var(--n-muted); transition:background-color .2s, color .2s; }
html.fai-next #nx-settabs button.on{ background:var(--n-side); color:#fff; }
html.fai-next[data-appearance="night"] #nx-settabs button.on{ background:var(--n-acc); color:var(--n-onacc); }
html.fai-next .nx-tab-off{ display:none !important; }
@media (max-width:767px){ html.fai-next #nx-settabs{ border-radius:16px; width:100%; } }

/* Admin Console tabs (next.js groupAdmin): the settings tab bar, pinned while a long member list scrolls */
/* pinned flush with the top of the scroll area: sticky stops at the area's padding, so the band starts above it */
html.fai-next .nx-admhead{ position:sticky; top:-16px; z-index:6; margin:-16px -8px 0; padding:16px 8px 12px; background:linear-gradient(var(--n-bg) 72%, transparent); }
@media (min-width:640px){ html.fai-next .nx-admhead{ top:-24px; margin-top:-24px; padding-top:24px; } }
html.fai-next #nx-admtabs{ display:flex; flex-wrap:wrap; gap:2px; padding:4px; margin:0 0 10px; border-radius:999px; background:var(--n-card); box-shadow:0 0 0 1px var(--n-line), 0 10px 24px -18px rgba(0,0,0,.45); width:max-content; max-width:100%; }
html.fai-next #nx-admtabs button{ flex:none; white-space:nowrap; display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px; font-size:12.5px; color:var(--n-muted); transition:background-color .2s, color .2s; }
html.fai-next #nx-admtabs button.on{ background:var(--n-side); color:#fff; }
html.fai-next[data-appearance="night"] #nx-admtabs button.on{ background:var(--n-acc); color:var(--n-onacc); }
@media (hover:hover) and (pointer:fine){ html.fai-next #nx-admtabs button:not(.on):hover{ background:var(--n-soft); color:var(--n-ink); } }
html.fai-next #nx-admtabs .s{ display:none; }
html.fai-next .nx-adesc{ margin:0 0 16px 4px; font-size:13px; color:var(--n-muted); }
html.fai-next #adm-msg:empty{ display:none; }
html.fai-next .nx-apane{ animation:nxFade .18s ease-out; }
@media (min-width:1400px){ html.fai-next section[data-view="admin"] .max-w-\[980px\]{ max-width:1180px; } }
/* Members: the cards, two across, until the table has room for every column; squeezed, it broke each action button into a word a line */
html.fai-next #adm-cards .adm-btn{ white-space:nowrap; }
html.fai-next #adm-cards > div > div:last-child{ display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:6px; }
html.fai-next #adm-cards > div > div:last-child > *{ width:100%; margin:0; justify-content:center; text-align:center; }
@media (min-width:768px) and (max-width:1399px){
  html.fai-next #adm-cards{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:start; }
  html.fai-next #adm-cards > *{ margin:0 !important; }
  html.fai-next section[data-view="admin"] div:has(> table > #adm-rows){ display:none !important; }
}
html.fai-next #adm-rows .adm-btn{ white-space:nowrap; }
/* Plan allowances on a phone, shadcn-style: one card per plan, a label over every box, 40px
   inputs with a focus ring. Labels follow the column order in ADM_PLAN_FIELDS (app.js): queries,
   drafts, judgment searches, statute searches, devices. Inputs are 16px so iOS does not zoom. */
@media (max-width:639px){
  html.fai-next #adm-plans{ background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; }
  html.fai-next #adm-plans > p{ font-size:13px; line-height:1.5; margin-bottom:12px; }
  html.fai-next #adm-plans .overflow-x-auto{ overflow:visible; }
  html.fai-next #adm-plans table, html.fai-next #adm-plans tbody{ display:block; }
  html.fai-next #adm-plans thead{ display:none; }
  html.fai-next #adm-plans-rows{ display:flex !important; flex-direction:column; gap:10px; }
  html.fai-next #adm-plans-rows tr{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;
    padding:14px; border:1px solid var(--n-line) !important; border-radius:12px; background:var(--n-card); box-shadow:0 1px 2px rgba(15,23,42,.05); }
  html.fai-next #adm-plans-rows td{ padding:0 !important; min-width:0; }
  html.fai-next #adm-plans-rows td:first-child{ grid-column:1 / -1; font-size:15px; font-weight:600; color:var(--n-head);
    padding-bottom:10px !important; border-bottom:1px solid var(--n-line); }
  html.fai-next #adm-plans-rows td:not(:first-child)::before{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:500; color:var(--n-ink); }
  html.fai-next #adm-plans-rows td:nth-child(2)::before{ content:"Queries a day"; }
  html.fai-next #adm-plans-rows td:nth-child(3)::before{ content:"Drafts"; }
  html.fai-next #adm-plans-rows td:nth-child(4)::before{ content:"Judgment searches"; }
  html.fai-next #adm-plans-rows td:nth-child(5)::before{ content:"Statute searches"; }
  html.fai-next #adm-plans-rows td:nth-child(6)::before{ content:"Devices"; }
  html.fai-next #adm-plans-rows input{ display:block; width:100% !important; max-width:none !important; height:40px;
    padding:0 12px !important; font-size:16px !important; border:1px solid var(--n-line); border-radius:8px; background:transparent; color:var(--n-ink); }
  html.fai-next #adm-plans-rows input::placeholder{ color:var(--n-muted); opacity:1; }
  html.fai-next #adm-plans-rows input:focus{ outline:none; border-color:var(--n-acc); box-shadow:0 0 0 3px var(--n-accsoft); }
  /* Free's queries are not a box (metered monthly per member): show the word where the box would be */
  html.fai-next #adm-plans-rows td:nth-child(2):not(:has(input)){ font-size:14px; color:var(--n-muted) !important; }
  html.fai-next #adm-plans-rows td:nth-child(2):not(:has(input))::before{ content:"Queries (set per member)"; }
  html.fai-next #adm-plans-rows td:last-child:nth-child(6){ grid-column:1 / -1; }
  html.fai-next #adm-plans-save{ width:100%; justify-content:center; height:44px; font-size:15px !important; border-radius:10px !important;
    background:var(--n-acc) !important; color:var(--n-onacc) !important; }
}
@media (max-width:767px){
  html.fai-next #nx-admtabs{ width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  html.fai-next #nx-admtabs button{ flex:1 0 auto; justify-content:center; padding:0 10px; }
  html.fai-next #nx-admtabs button svg, html.fai-next #nx-admtabs .l{ display:none; }
  html.fai-next #nx-admtabs .s{ display:inline; }
}

/* Phone: the You sheet */
html.fai-next #nx-you-sheet{ position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; background:rgba(10,14,22,0); pointer-events:none; transition:background-color .3s; }
html.fai-next #nx-you-sheet.on{ background:rgba(10,14,22,.38); pointer-events:auto; }
html.fai-next .nx-you-card{ width:100%; max-height:88vh; display:flex; flex-direction:column; border-radius:26px 26px 0 0; background:var(--n-bg); box-shadow:0 -20px 60px -20px rgba(0,0,0,.4); transform:translateY(105%); transition:transform .38s cubic-bezier(.2,.9,.25,1.02); padding-bottom:env(safe-area-inset-bottom, 0); }
html.fai-next #nx-you-sheet.on .nx-you-card{ transform:none; }
html.fai-next .nx-grab{ width:38px; height:5px; border-radius:9px; margin:8px auto 2px; background:color-mix(in srgb, var(--n-muted) 45%, transparent); }
html.fai-next .nx-you-h{ display:flex; align-items:center; justify-content:space-between; padding:4px 16px 8px; touch-action:none; }
html.fai-next .nx-grab{ touch-action:none; }
html.fai-next .nx-you-h b{ font:400 22px/1.1 'DM Serif Display', Georgia, serif; color:var(--n-head); }
html.fai-next .nx-you-body{ overflow-y:auto; padding:0 16px 18px; }
html.fai-next .nx-you-p{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px; background:var(--n-card); box-shadow:0 0 0 1px var(--n-line); }
html.fai-next .nx-you-p .nx-who{ flex:1; }
html.fai-next .nx-you-up{ height:32px; padding:0 14px; border-radius:999px; background:var(--n-acc); color:var(--n-onacc); font-weight:600; font-size:12.5px; }
html.fai-next .nx-you-l{ margin:16px 6px 6px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--n-muted); }
html.fai-next .nx-you-g{ border-radius:18px; background:var(--n-card); box-shadow:0 0 0 1px var(--n-line); overflow:hidden; }
html.fai-next .nx-you-g [data-you-admin][hidden]{ display:none; }
html.fai-next .nx-you-r{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; text-align:left; color:var(--n-ink); }
html.fai-next .nx-you-g > * + *{ box-shadow:0 -1px 0 var(--n-line); }
html.fai-next .nx-you-r > svg:last-child{ color:var(--n-muted); flex:none; }
html.fai-next .nx-you-r .nx-who{ flex:1; }
html.fai-next .nx-you-ti{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--n-accsoft); color:var(--n-acc); }
html.fai-next .nx-you-seg{ display:flex; gap:4px; padding:4px; border-radius:14px; background:var(--n-soft); }
html.fai-next .nx-you-seg button{ flex:1; height:34px; border-radius:10px; font-size:12.5px; color:var(--n-muted); }
html.fai-next .nx-you-seg button.on{ background:var(--n-card); color:var(--n-head); font-weight:600; box-shadow:var(--n-shadow); }
html.fai-next .nx-you-out{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:16px; height:42px; border-radius:14px; background:var(--n-card); color:#dc2626; font-size:13.5px; font-weight:600; box-shadow:0 0 0 1px var(--n-line); }
@media (min-width:768px){ html.fai-next #nx-you-sheet{ display:none; } }
@media (prefers-reduced-motion:reduce){ html.fai-next .nx-you-card, html.fai-next .nx-cmd-card{ transition:none; animation:none; } }

/* Phone top bar: the title stays on one line (the chat title is long) */
@media (max-width:767px){ html.fai-next #mobile-title{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; } }

/* Phone Chats: once there are chats, the list is the screen (the welcome lines give way to it) */
html.fai-next #empty-state:has(+ #nx-chatlist .nx-cl) .es-mode,
html.fai-next #empty-state:has(+ #nx-chatlist .nx-cl) p,
html.fai-next #empty-state:has(+ #nx-chatlist .nx-cl) [id="es-improve"]{ display:none; }
@media (max-width:767px){ html.fai-next .nx-cl-q{ flex-basis:100%; } html.fai-next .nx-cl-bin{ margin-left:auto; } }
html.fai-next .nx-improve{ margin-top:8px; box-shadow:0 0 0 1px var(--n-line) !important; }
html.fai-next .nx-improve .nx-ti{ background:var(--n-accsoft) !important; color:var(--n-acc) !important; }

/* ---------- Sidebar fits without scrolling (90% to 120% zoom) ---------- */
@media (min-width:768px){
  /* Day or night lives in the top-right button; the Recycle Bin on the Chats page and in Ctrl K. */
  html.fai-next #app-sidebar div:has(> #side-appearance){ display:none !important; }
  html.fai-next #recycle-link{ display:none !important; }
  html.fai-next #sidebar-brand{ padding-top:12px !important; padding-bottom:8px; }
  html.fai-next .nx-newrow{ padding:0 12px 4px; }
  html.fai-next #app-sidebar .side-search{ margin-top:0; }
  html.fai-next #app-sidebar .navlink{ padding-top:2px; padding-bottom:2px; margin:0; font-size:13px; }
  html.fai-next #app-sidebar .navlink .nav-ico{ width:14px; height:14px; padding:4px; border-radius:8px; }
  html.fai-next #app-sidebar .side-ttl{ padding-top:6px; padding-bottom:2px; margin:0; }
  html.fai-next #app-sidebar nav{ padding-top:2px !important; padding-bottom:0 !important; }
  html.fai-next .chatitem{ padding:5px 10px; }
  html.fai-next #side-status{ margin:6px 10px 0; padding:8px 10px !important; }
  html.fai-next #side-status .side-ttl{ padding-bottom:4px; }
  html.fai-next .side-meter{ gap:5px !important; }
  html.fai-next .side-foot{ padding:8px 14px 10px; }
}
/* A short window (a laptop at 110-120%): tighter still. */
@media (min-width:768px) and (max-height:760px){
  html.fai-next #sidebar-brand{ padding-top:10px !important; padding-bottom:6px; }
  html.fai-next #new-chat-btn{ padding-top:6px !important; padding-bottom:6px !important; }
  html.fai-next #app-sidebar .navlink .nav-ico{ padding:3px; }
  html.fai-next .nx-mb{ height:4px; }
  html.fai-next #side-days{ display:none !important; }
}

/* ---------- Dashboard fits one screen at 90-120% zoom (owner, 28 Sep) ---------- */
@media (min-width:768px){
  html.fai-next .dk-head{ padding-bottom:8px; }
  html.fai-next .dk-rail{ padding-bottom:10px; }
  html.fai-next .dk-sec{ padding:4px 2px 6px; }
  html.fai-next .dk-open{ padding-top:12px !important; padding-bottom:0 !important; }
  html.fai-next .dk-open h3{ margin:6px 0 3px; }
  html.fai-next .dk-open p{ margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  html.fai-next .dk-open .ft{ padding-top:8px !important; padding-bottom:10px !important; }
  html.fai-next .dk-line{ padding-top:7px !important; padding-bottom:7px !important; align-items:baseline !important; }
  html.fai-next .dk-line .bd{ display:flex; align-items:baseline; gap:12px; }
  html.fai-next .dk-line .bd b{ flex:1; min-width:0; }
  html.fai-next .dk-line .bd span{ flex:none; }
  html.fai-next .dk-more{ padding:6px 2px 4px; }
  html.fai-next section[data-view="dashboard"] .corpus{ display:none !important; }
  html.fai-next .dk-stats{ margin-top:10px !important; }
  html.fai-next .dk-stats div{ padding:7px 8px; }
  html.fai-next .dk-stats b{ font-size:16px; }
  html.fai-next section[data-view="dashboard"] .mt-5.flex.items-start{ margin-top:10px !important; padding-top:7px !important; padding-bottom:7px !important; }
}
@media (min-width:768px) and (max-height:760px){
  html.fai-next .dk-stats{ display:none !important; }
}

/* ---------- Round 5 (28 Sep): result pages and a very short window ---------- */
/* Court and year chips wrap instead of running off the right edge (the owner wants no scrolling at 90-120%). */
@media (min-width:768px){
  html.fai-next section[data-view="judgments"] .overflow-x-auto.scrollbar-none{ flex-wrap:wrap; overflow:visible; row-gap:6px; }
}
/* A 150% laptop at 120% (about 1067x567): drop the "Account" heading and the meter bars (the % stays as text)
   so Recent keeps room for its chats. */
@media (min-width:768px) and (max-height:620px){
  html.fai-next #app-sidebar div:has(> #nav-settings) > .side-ttl{ display:none; }
  html.fai-next .side-meter .nx-mb{ display:none !important; }
  html.fai-next .side-meter{ gap:3px !important; }
  html.fai-next #sidebar-brand{ padding-top:8px !important; padding-bottom:4px; }
}

/* ---------- Round 6 (28 Sep, owner's iPhone) ---------- */
/* Phone: the question field keeps its own full line; the Ask / Draft switch sits under it. On a wide
   iPhone the switch fitted beside the field and Safari squeezed the field to one letter. */
@media (max-width:767.98px){
  html.fai-next #dash-q{ min-width:calc(100% - 144px) !important; }
  html.fai-next .dash-modes{ margin-left:0 !important; }
}
/* The "5 days ago" column stays on one line. */
html.fai-next .dk-line .tm{ white-space:nowrap; }
@media (max-width:767.98px){ html.fai-next .dk-line .tm{ width:auto !important; min-width:46px; margin-right:12px; } }
/* Judgment Search on a phone: one tidy block. Small Judgments / Statutes switch, field with the search
   button beside it, and courts + years folded behind a "Filters" row that says what is chosen. */
html.fai-next #nx-jfilt{ display:none; }
@media (max-width:767.98px){
  html.fai-next .nx-hub{ gap:4px !important; padding:4px !important; border-radius:14px; background:var(--n-soft); margin:12px 16px 4px !important; }
  html.fai-next .nx-hub .nx-hub-t{ display:flex !important; }
  html.fai-next .nx-hub .nx-hub-t svg{ margin:0 !important; }
  html.fai-next .nx-hub .nx-hub-t b{ font-family:inherit !important; font-weight:600 !important; font-size:14px !important; line-height:1.2 !important; }
  html.fai-next .nx-hub-t{ flex-direction:row !important; align-items:center !important; justify-content:center; gap:8px !important; padding:9px 10px !important; min-height:0 !important; border-radius:11px !important; box-shadow:none !important; border:0 !important; }
  html.fai-next .nx-hub-t small{ display:none !important; }
  html.fai-next .nx-hub-t b{ font-size:14px !important; }
  html.fai-next .nx-hub-t svg, html.fai-next .nx-hub-t i{ width:17px !important; height:17px !important; padding:0 !important; background:none !important; }
  html.fai-next .nx-hub-t:not(.nav-active){ background:transparent !important; color:var(--n-muted) !important; }
  html.fai-next .nx-hub-t:not(.nav-active) b{ color:var(--n-muted) !important; }
  html.fai-next div:has(> #jud-input), html.fai-next div:has(> #stat-input){ flex-direction:row !important; align-items:stretch !important; }
  html.fai-next #jud-input, html.fai-next #stat-input{ min-width:0; flex:1 1 auto; }
  html.fai-next #jud-btn, html.fai-next #stat-btn{ padding-left:14px !important; padding-right:14px !important; }
  html.fai-next #jud-clear, html.fai-next #stat-clear{ font-size:0 !important; width:44px; padding:0 !important; }
  html.fai-next #jud-clear svg, html.fai-next #stat-clear svg{ width:17px !important; height:17px !important; }
  html.fai-next #nx-jfilt{ display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--n-line); background:var(--n-card); color:var(--n-ink); font-size:13px; text-align:left; }
  html.fai-next #nx-jfilt span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--n-muted); }
  html.fai-next #nx-jfilt b{ color:var(--n-ink); font-weight:600; margin-right:4px; }
  html.fai-next #nx-jfilt > svg:last-child{ transition:transform .2s var(--n-ease); color:var(--n-muted); }
  html.fai-next.nx-jf-open #nx-jfilt > svg:last-child{ transform:rotate(180deg); }
  html.fai-next .nx-jf-row{ display:none !important; }
  html.fai-next.nx-jf-open .nx-jf-row{ display:flex !important; flex-wrap:wrap; overflow:visible; row-gap:8px; margin-top:10px !important; }
}
/* The "jump to latest" arrow has nothing to jump to on the chat list, and it covered a row's delete button. */
html.fai-next body:has(#empty-state:not(.hidden) + #nx-chatlist .nx-cl) #scroll-down-btn{ display:none !important; }
/* Very short windows: the docket rows and section heads tighten so "Today" plus "Before today" still fit (1067x567). */
@media (min-width:768px) and (max-height:620px){
  html.fai-next .dk-line{ padding-top:4px !important; padding-bottom:4px !important; }
  html.fai-next .dk-sec{ padding-top:2px !important; padding-bottom:3px !important; }
}

/* ============================== THE CHAT DESK ("Ink and Record", the owner's pick, 28 Sep 2026) ==============================
   An empty chat: a greeting, the playable desk (desk.js) and a tip every 12 s (next.js). In a chat the desk sits at the top of
   the Research outline, or above the conversation where there is no outline. Book cloth, wood, leather and paper keep their
   real colours; everything else follows the palette tokens. */
html.fai-next #empty-state{ max-width:760px; margin-top:0; text-align:left; }
html.fai-next #empty-state > .es-icon, html.fai-next #empty-state > h1, html.fai-next #empty-state > p, html.fai-next #empty-state > .es-chips{ display:none !important; }
html.fai-next #nx-home{ display:grid; gap:14px; }
html.fai-next .nx-greet h1{ margin:0; font:400 26px/1.12 'DM Serif Display', Georgia, serif; letter-spacing:-.01em; color:var(--n-head); text-wrap:balance; }
html.fai-next .nx-greet p{ margin:6px 0 0; font:400 15px/1.45 'Source Serif 4', Georgia, serif; color:var(--n-muted); text-wrap:pretty; }
html.fai-next .nx-play{ display:grid; gap:14px; align-items:start; }
@media (min-width:900px){
  html.fai-next .nx-play{ grid-template-columns:minmax(0,1fr) 300px; }
  html.fai-next .nx-play > .nx-desk{ max-width:calc((100dvh - 320px) * 1.5434); }
}
html.fai-next #nx-home > #es-improve{ max-width:none; }
/* a new chat does not scroll (owner rule, 90-120% zoom): the empty thread keeps no room for the composer, and on a
   wide screen Improve my draft sits beside the greeting as one line */
html.fai-next #thread:has(~ #empty-state:not(.hidden)){ padding-bottom:0; }
@media (min-width:900px){
  html.fai-next #nx-home{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"g i" "p p"; align-items:end; column-gap:16px; }
  html.fai-next #nx-home > .nx-greet{ grid-area:g; }
  html.fai-next #nx-home > .nx-play{ grid-area:p; }
  html.fai-next #nx-home > #es-improve{ grid-area:i; width:auto; padding:8px 12px; }
  html.fai-next #nx-home > #es-improve em{ display:none; }
}
/* a short laptop window (1280 x 630 at 150% display scaling, less at 120% zoom): the tip card drops its explanation */
@media (min-width:900px) and (max-height:760px){
  html.fai-next .nx-tip p{ display:none; }
  html.fai-next .nx-tip h2{ margin-top:12px; }
  html.fai-next .nx-greet p{ display:none; }
}
@media (min-width:900px) and (max-height:600px){ html.fai-next .nx-tip-dots{ display:none; } html.fai-next #nx-home{ row-gap:10px; } html.fai-next #scroll:has(#empty-state:not(.hidden)){ padding-top:8px; } }

html.fai-next .nx-desk{ position:relative; width:100%; aspect-ratio:960/622; border-radius:16px; overflow:hidden; background:#2e1c0e url(/next/desk-day.jpg) center/100% 100% no-repeat; box-shadow:0 1px 1px rgba(40,30,12,.14), 0 18px 34px -20px rgba(40,30,12,.65); }
html.fai-next[data-appearance="night"] .nx-desk{ background-image:url(/next/desk-night.jpg); box-shadow:0 1px 1px rgba(0,0,0,.4), 0 18px 34px -18px rgba(0,0,0,.8); }
html.fai-next .nx-desk.compact{ aspect-ratio:960/470; border-radius:14px; }
html.fai-next .nx-desk canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; touch-action:none; cursor:grab; }
html.fai-next .nx-desk-hint{ position:absolute; left:7.5%; top:10.5%; z-index:3; max-width:58%; margin:0; font:500 12.5px/1.3 Inter, system-ui, sans-serif; color:rgba(246,238,219,.85); text-shadow:0 1px 2px rgba(0,0,0,.6); pointer-events:none; transition:opacity .6s ease; }
html.fai-next .nx-desk.compact .nx-desk-hint{ display:none; }
html.fai-next .nx-motion{ position:absolute; right:6.5%; top:9%; z-index:3; height:30px; padding:0 11px; border:0; border-radius:99px; display:none; align-items:center; gap:6px; background:rgba(12,14,12,.46); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:rgba(246,238,219,.95); font:600 12px Inter, system-ui, sans-serif; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
html.fai-next .nx-motion svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
html.fai-next .nx-motion.on{ background:rgba(201,153,79,.4); }
html.fai-next .nx-desk.compact .nx-motion{ top:7%; height:28px; }
/* in a chat: above the conversation, or on top of the outline */
html.fai-next #thread ~ .nx-desk, html.fai-next .nx-desk + #thread{ margin-bottom:14px; }
html.fai-next #outline > .nx-desk{ margin:0 -8px 16px; width:calc(100% + 16px); flex:none; aspect-ratio:960/622; }
/* more room for the desk on the outline (owner, 29 Sep); the answer column keeps its 780px */
@media (min-width:1240px){ html.fai-next .outline{ width:300px; } }
@media (min-width:1480px){ html.fai-next .outline{ width:350px; } }

/* tips: an index card, a new one every 12 s */
html.fai-next .nx-tip-stage{ display:grid; align-items:start; }
html.fai-next .nx-tip-stage > .nx-tip{ grid-area:1/1; }
html.fai-next .nx-tip{ position:relative; display:block; padding:12px 16px 18px 18px; border-radius:8px; background:linear-gradient(rgba(200,70,60,.45), rgba(200,70,60,.45)) 0 42px/100% 1px no-repeat, var(--n-card); box-shadow:0 0 0 1px var(--n-line), var(--n-shadow); touch-action:pan-y; }
html.fai-next .nx-tip-top{ display:flex; align-items:center; gap:7px; height:22px; font:600 12.5px Inter, system-ui, sans-serif; color:rgb(var(--c-accink)); }
html.fai-next .nx-tip-top .n{ margin-left:auto; font-weight:500; color:var(--n-muted); font-variant-numeric:tabular-nums; }
html.fai-next .nx-tip h2{ margin:14px 0 0; font:600 18px/1.3 'Source Serif 4', Georgia, serif; color:var(--n-head); text-wrap:balance; }
html.fai-next .nx-tip p{ margin:4px 0 0; font:400 15px/1.5 'Source Serif 4', Georgia, serif; color:var(--n-muted); text-wrap:pretty; }
html.fai-next .nx-tip-try{ position:relative; display:block; width:100%; margin-top:10px; padding:9px 12px 30px 13px; text-align:left; border:0; border-left:3px solid var(--n-acc); border-radius:0 8px 8px 0; background:var(--n-accsoft); font:italic 500 15px/1.45 'Source Serif 4', Georgia, serif; color:var(--n-ink); cursor:pointer; transition:transform .1s; }
html.fai-next .nx-tip-try:active{ transform:scale(.985); }
html.fai-next .nx-tip-try span{ position:absolute; right:10px; bottom:7px; display:inline-flex; align-items:center; gap:4px; font:600 12.5px Inter, system-ui, sans-serif; font-style:normal; color:rgb(var(--c-accink)); }
html.fai-next .nx-tip-go{ margin-top:10px; height:38px; padding:0 13px; border-radius:99px; border:1px solid var(--n-line); background:none; display:inline-flex; align-items:center; gap:6px; font:600 13px Inter, system-ui, sans-serif; color:var(--n-head); cursor:pointer; }
html.fai-next .nx-tip-bar{ position:absolute; left:18px; right:16px; bottom:8px; height:2px; border-radius:1px; background:var(--n-line); overflow:hidden; }
html.fai-next .nx-tip-bar i{ display:block; height:100%; background:var(--n-acc); transform-origin:0 50%; transform:scaleX(0); }
html.fai-next .nx-tip-dots{ display:flex; justify-content:center; margin-top:4px; }
html.fai-next .nx-tip-dots button{ width:24px; height:24px; display:grid; place-items:center; border:0; background:none; cursor:pointer; }
html.fai-next .nx-tip-dots i{ width:6px; height:6px; border-radius:50%; background:var(--n-line); transition:background-color .25s, transform .25s; }
html.fai-next .nx-tip-dots button[aria-current="true"] i{ background:var(--n-acc); transform:scale(1.35); }
@media (hover:hover) and (pointer:fine){
  html.fai-next .nx-tip-try:hover{ background:color-mix(in srgb, var(--n-acc) 24%, transparent); }
  html.fai-next .nx-tip-go:hover{ background:var(--n-accsoft); }
}
@media (prefers-reduced-motion:reduce){ html.fai-next .nx-tip-try, html.fai-next .nx-desk-hint{ transition:none; } }

/* ============================== THE RECORD LOOK ON TODAY'S ANSWER (owner, 28 Sep 2026) ==============================
   The answer keeps its structure and layout; it takes the record study's materials. While FAI works: the research card is a
   leather blotter with a brass rule and a law report whose pages turn (next.js puts it in), and each judgment found arrives
   as an index card that gets stamped. The answer sits on paper with a double brass rule and small-caps heads. Leather takes
   the palette's own dark surface (navy slot), rules take its accent; paper, card and ink stamps keep their real colours. */
html.fai-next{ --nx-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --nx-hide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 .02 0 0 0 1.3 -.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --nx-lines:repeating-linear-gradient(180deg,transparent 0 5px,rgba(15,42,67,.2) 5px 6px) 10px 24px/40% calc(100% - 34px) no-repeat,repeating-linear-gradient(180deg,transparent 0 5px,rgba(15,42,67,.2) 5px 6px) calc(100% - 10px) 24px/40% calc(100% - 34px) no-repeat; }
html.fai-next[data-appearance="night"]{ --nx-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .88 0 0 0 0 .78 0 0 0 .4 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* the research card: leather, a brass rule, cream type */
html.fai-next .chamber{ position:relative; overflow:hidden; border:0; border-radius:20px; color:#EDE5D2;
  background:radial-gradient(90% 60% at 28% 0%, rgba(255,214,150,.13), transparent 70%), var(--nx-hide), rgb(var(--c-navy));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 34px -20px rgba(0,0,0,.6); }
html.fai-next .chamber::before{ content:""; position:absolute; inset:6px; border:1px solid color-mix(in srgb, rgb(var(--c-brass)) 42%, transparent); border-radius:15px; pointer-events:none; }
html.fai-next .chamber .ch-ttl{ color:color-mix(in srgb, rgb(var(--c-brass)) 62%, #fff); }
html.fai-next .chamber .ch-sub, html.fai-next .chamber .ch-hint, html.fai-next .chamber .ch-time span{ color:rgba(237,229,210,.72); }
html.fai-next .chamber .ch-time b{ color:#F5EEDD; }
html.fai-next .chamber .ch-seal{ color:rgb(var(--c-brass)); }
html.fai-next .chamber .ch-bar{ background:rgba(237,229,210,.16); }
html.fai-next .chamber .ch-bar i{ background:rgb(var(--c-brass)); }
html.fai-next .chamber .ch-item{ background:rgba(255,255,255,.06); border-color:rgba(237,229,210,.14); color:#EDE5D2; }
html.fai-next .chamber .ch-item *:not(svg):not(path):not(circle):not(polyline):not(line){ color:inherit; }
html.fai-next .chamber.overrun .ch-time b{ color:rgba(237,229,210,.8); }
html.fai-next .chamber.overrun .ch-bar i{ background:rgba(237,229,210,.5); }

/* the law report on the card: two leaves turn, one after the other */
html.fai-next .nx-tome-wrap{ height:112px; display:grid; place-items:center; perspective:700px; margin:6px 0 10px; }
html.fai-next .nx-tome{ position:relative; width:200px; height:98px; transform:rotateX(40deg); transform-style:preserve-3d; }
html.fai-next .nx-tome .cv{ position:absolute; inset:-5px -8px -7px; border-radius:5px; background:linear-gradient(90deg,#4d1518,#7a2226 47%,#3a0f12 50%,#7a2226 53%,#4d1518); box-shadow:0 20px 24px -8px rgba(0,0,0,.65); transform:translateZ(-3px); }
html.fai-next .nx-tome .pg{ position:absolute; top:0; width:50%; height:100%; }
html.fai-next .nx-tome .pg.l{ left:0; border-radius:3px 0 0 3px; background:var(--nx-lines), linear-gradient(90deg,#EFE5CD,#FBF6E9 70%,#DCCCA8); }
html.fai-next .nx-tome .pg.r{ right:0; border-radius:0 3px 3px 0; background:var(--nx-lines), linear-gradient(90deg,#DCCCA8,#FBF6E9 30%,#EFE5CD); }
html.fai-next .nx-tome .lf{ position:absolute; top:0; left:50%; width:50%; height:100%; transform-origin:0 50%; transform-style:preserve-3d;
  animation:nxLeaf 2.4s cubic-bezier(.45,.05,.3,1) infinite; animation-delay:var(--t0, 0ms); }
html.fai-next .nx-tome .lf.two{ animation-delay:calc(var(--t0, 0ms) - 1.2s); }
html.fai-next .nx-tome .lf > div{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
html.fai-next .nx-tome .lf .f{ border-radius:0 3px 3px 0; background:linear-gradient(90deg, rgba(0,0,0,.12), transparent 60%), var(--nx-lines), linear-gradient(90deg,#DCCCA8,#FBF6E9 30%,#EFE5CD); }
html.fai-next .nx-tome .lf .b{ transform:rotateY(180deg); border-radius:3px 0 0 3px; background:linear-gradient(270deg, rgba(0,0,0,.12), transparent 60%), var(--nx-lines), linear-gradient(90deg,#EFE5CD,#FBF6E9 70%,#DCCCA8); }
@keyframes nxLeaf{ 0%, 10%{ transform:rotateY(0deg); } 60%, 100%{ transform:rotateY(-180deg); } }

/* each judgment found: an index card, then the stamp */
html.fai-next .auth-card{ border:0; border-radius:4px; color:#0F2A43;
  background:linear-gradient(rgba(200,70,60,.5), rgba(200,70,60,.5)) 0 38px/100% 1px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(58,110,170,.2) 21px 22px) 0 38px/100% calc(100% - 38px) no-repeat, #FFFEF8;
  box-shadow:0 1px 1px rgba(0,0,0,.14), 0 12px 22px -14px rgba(0,0,0,.45); }
html.fai-next[data-appearance="night"] .auth-card{ background-color:#E6DCC7; }
html.fai-next .auth-card:nth-child(odd){ rotate:-.6deg; }
html.fai-next .auth-card:nth-child(even){ rotate:.5deg; }
html.fai-next .auth-card .c{ color:#0F2A43; font-family:'Source Serif 4', Georgia, serif; }
html.fai-next .auth-card .ct{ color:#4A5563; margin-top:8px; }
html.fai-next .auth-card .st{ display:inline-block; max-width:100%; -webkit-line-clamp:unset; margin-top:12px; padding:4px 7px 3px; border:2px solid currentColor; border-radius:4px;
  color:#1F4E8C; font:800 10.5px/1.1 Inter, system-ui, sans-serif; letter-spacing:.14em; text-transform:uppercase; transform:rotate(-7deg); transform-origin:0 50%;
  animation:nxStamp .9s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:inherit; }
html.fai-next .auth-card .st.b{ color:#A8322A; }
@keyframes nxStamp{ 0%, 45%{ opacity:0; transform:rotate(-7deg) scale(1.7); } 75%{ opacity:.95; transform:rotate(-7deg) scale(.93); } 100%{ opacity:.88; transform:rotate(-7deg) scale(1); } }

/* the answer on paper: masthead double rule, small-caps heads with a brass rule */
html.fai-next .fai-turn .memo{ background:var(--nx-grain), var(--n-card); }
html.fai-next .fai-turn .memo-top{ border-bottom:3px double color-mix(in srgb, var(--n-acc) 70%, transparent); }
html.fai-next .pres{ padding:16px 18px 14px; border-radius:6px;
  background:radial-gradient(110% 40% at 12% 0%, color-mix(in srgb, var(--n-acc) 7%, transparent), transparent 70%), var(--nx-grain), var(--n-card);
  box-shadow:0 0 0 1px var(--n-line), 0 2px 4px rgba(0,0,0,.04), 0 18px 34px -26px rgba(0,0,0,.4); }
html.fai-next .pres-lab{ display:flex; align-items:center; gap:10px; font:700 15.5px/1.3 'Source Serif 4', Georgia, serif; font-variant-caps:all-small-caps; letter-spacing:.07em; text-transform:none; color:var(--n-head); }
html.fai-next .pres-lab::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--n-acc), transparent); }
html.fai-next .pres-bottom{ display:block; }
html.fai-next .pres-bottom > .pres-lab{ width:100%; }
html.fai-next .ans-h h2{ font-family:'Source Serif 4', Georgia, serif; font-variant-caps:all-small-caps; letter-spacing:.06em; }
html.fai-next .fai-card, html.fai-next .statute{ background-image:var(--nx-grain); }

/* read aloud: a speaker on each part, Listen for the whole answer */
html.fai-next .nx-spk{ flex:none; display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%; border:1px solid var(--n-line); background:var(--n-card); color:var(--n-muted); cursor:pointer; vertical-align:middle; transition:background-color .2s, color .2s, border-color .2s; }
html.fai-next .ans-h > .nx-spk{ margin-left:auto; }
html.fai-next .ans-h > .ct + .nx-spk{ margin-left:8px; }
html.fai-next .nx-adv-h{ position:relative; padding-right:40px; }
html.fai-next .nx-adv-h > .nx-spk{ position:absolute; right:0; top:0; }
html.fai-next .nx-listen{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--n-line); background:var(--n-card); color:var(--n-head); font:600 12.5px Inter, system-ui, sans-serif; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
html.fai-next .nx-spk svg, html.fai-next .nx-listen svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
html.fai-next .nx-spk.on, html.fai-next .nx-listen.on{ color:var(--n-onacc); background:var(--n-acc); border-color:var(--n-acc); }
html.fai-next .nx-spk.on .w1, html.fai-next .nx-listen.on .w1{ animation:nxWave 1s ease-in-out infinite; }
html.fai-next .nx-spk.on .w2, html.fai-next .nx-listen.on .w2{ animation:nxWave 1s ease-in-out .2s infinite; }
@keyframes nxWave{ 0%, 100%{ opacity:.25; } 50%{ opacity:1; } }
html.fai-next .nx-reading{ outline:2px solid color-mix(in srgb, var(--n-acc) 55%, transparent); outline-offset:4px; border-radius:6px; animation:nxGlow 2.4s ease-in-out infinite; }
@keyframes nxGlow{ 0%,100%{ outline-color:color-mix(in srgb, var(--n-acc) 30%, transparent); } 50%{ outline-color:color-mix(in srgb, var(--n-acc) 70%, transparent); } }
/* the sentence being read (next.js speakNext, CSS Highlight API) */
::highlight(nx-say){ background-color:color-mix(in srgb, rgb(var(--c-brass)) 30%, transparent); color:inherit; }
/* the reading player: Pause/Play, Stop, speed 1x-2x, how far through (demo public/demos/voice-demo.html) */
html.fai-next .nx-player{ position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom, 0px)); z-index:80; transform:translateX(-50%);
  width:min(440px, calc(100vw - 32px)); padding:12px 14px 12px; border-radius:20px; background:var(--n-card); color:var(--n-head);
  box-shadow:0 0 0 1px var(--n-line), 0 22px 50px -20px rgba(20,16,8,.6); animation:nxPlIn .36s cubic-bezier(.3,1.3,.5,1) both; }
html.fai-next .nx-player[hidden]{ display:none; }
@keyframes nxPlIn{ from{ opacity:0; transform:translate(-50%, 14px) scale(.97); } }
html.fai-next .nx-pl-row{ display:flex; align-items:center; gap:12px; }
html.fai-next .nx-pl-t{ flex:1; display:grid; min-width:0; line-height:1.25; }
html.fai-next .nx-pl-t small{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--n-muted); font-weight:700; }
html.fai-next .nx-pl-t b{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.fai-next .nx-pl-row > button{ flex:none; display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; border:1px solid var(--n-line); background:var(--n-card); color:var(--n-head); cursor:pointer; transition:transform .15s; }
html.fai-next .nx-pl-row > button:active{ transform:scale(.92); }
html.fai-next .nx-player .nx-pl-pp{ background:var(--n-acc); border-color:var(--n-acc); color:var(--n-onacc); }
html.fai-next .nx-player svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
html.fai-next .nx-player .pl{ display:none; fill:currentColor; }
html.fai-next .nx-player.paused .ps{ display:none; }
html.fai-next .nx-player.paused .pl{ display:inline; }
html.fai-next .nx-player .nx-pl-stop rect{ fill:currentColor; }
html.fai-next .nx-speed{ display:flex; align-items:flex-start; gap:12px; margin-top:10px; }
html.fai-next .nx-speed label{ padding-top:4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--n-muted); }
html.fai-next .nx-speed output{ padding-top:2px; min-width:40px; text-align:right; font-size:13px; font-weight:700; color:var(--n-head); font-variant-numeric:tabular-nums; }
html.fai-next .nx-track{ flex:1; position:relative; padding-bottom:18px; }
html.fai-next .nx-track input{ width:100%; margin:0; display:block; -webkit-appearance:none; appearance:none; height:22px; background:none; --p:0%; }
html.fai-next .nx-track input::-webkit-slider-runnable-track{ height:6px; border-radius:6px; background:linear-gradient(90deg, var(--n-acc) var(--p), var(--n-line) var(--p)); }
html.fai-next .nx-track input::-moz-range-track{ height:6px; border-radius:6px; background:var(--n-line); }
html.fai-next .nx-track input::-moz-range-progress{ height:6px; border-radius:6px; background:var(--n-acc); }
html.fai-next .nx-track input::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:var(--n-card); box-shadow:0 0 0 2px var(--n-acc), 0 4px 10px rgba(0,0,0,.25); transition:transform .15s; }
html.fai-next .nx-track input:active::-webkit-slider-thumb{ transform:scale(1.18); }
html.fai-next .nx-track input::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--n-card); border:2px solid var(--n-acc); }
html.fai-next .nx-ticks{ position:absolute; left:0; right:0; bottom:0; height:16px; font-size:10.5px; font-weight:600; color:var(--n-muted); }
html.fai-next .nx-ticks button{ position:absolute; left:calc(10px + var(--at) * (100% - 20px)); transform:translateX(-50%); border:0; background:none; padding:1px 5px; border-radius:5px; color:inherit; font:inherit; white-space:nowrap; cursor:pointer; }
html.fai-next .nx-ticks button:hover{ color:var(--n-head); background:var(--n-accsoft); }
html.fai-next .nx-ticks button.on{ color:var(--n-acc); }
html.fai-next .nx-pl-bar{ display:block; height:3px; border-radius:3px; background:var(--n-line); overflow:hidden; margin-top:8px; }
html.fai-next .nx-pl-bar i{ display:block; height:100%; width:0; border-radius:inherit; background:var(--n-acc); transition:width .5s ease; }
html.fai-next .nx-eq{ display:inline-flex; align-items:flex-end; gap:3px; height:20px; }
html.fai-next .nx-eq i{ width:3px; height:100%; border-radius:2px; background:var(--n-acc); transform-origin:bottom; animation:nxEq .9s ease-in-out infinite; }
html.fai-next .nx-eq i:nth-child(2){ animation-delay:-.3s; } html.fai-next .nx-eq i:nth-child(3){ animation-delay:-.6s; } html.fai-next .nx-eq i:nth-child(4){ animation-delay:-.15s; }
@keyframes nxEq{ 0%,100%{ transform:scaleY(.25); } 50%{ transform:scaleY(1); } }
html.fai-next .nx-player.paused .nx-eq i{ animation-play-state:paused; opacity:.55; }
/* English | اردو on every part */
html.fai-next .nx-lang{ flex:none; display:inline-flex; padding:3px; border-radius:10px; background:var(--n-bg); box-shadow:inset 0 0 0 1px var(--n-line); margin-left:auto; vertical-align:middle; }
html.fai-next .ans-h > .nx-lang + .nx-spk, html.fai-next .lab > .nx-lang + .nx-spk{ margin-left:8px; }
html.fai-next .nx-lang button{ height:26px; padding:0 10px; border:0; border-radius:7px; background:none; font-size:12px; font-weight:600; color:var(--n-muted); cursor:pointer; transition:background-color .25s, color .25s; letter-spacing:0; text-transform:none; }
html.fai-next .nx-lang button[lang="ur"]{ font-family:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; font-size:12.5px; line-height:1; }
html.fai-next .nx-lang button[aria-pressed="true"]{ background:var(--n-acc); color:var(--n-onacc); }
html.fai-next .nx-lang.busy button[data-l="ur"]{ background:linear-gradient(90deg, var(--n-accsoft), var(--n-acc), var(--n-accsoft)); background-size:200% 100%; animation:nxBusy 1s linear infinite; color:var(--n-onacc); }
@keyframes nxBusy{ to{ background-position:-200% 0; } }
html.fai-next .nx-adv-h > .nx-lang{ position:absolute; right:38px; top:2px; }
html.fai-next .nx-hid{ display:none !important; }
html.fai-next .nx-ur{ font-family:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; font-size:16.5px; line-height:2.3; color:var(--n-ink); padding:6px 2px 2px; animation:nxUr .35s ease both; }
html.fai-next .nx-ur p{ margin:0 0 .45em; }
html.fai-next .nx-ur .nx-urh{ font-weight:600; color:var(--n-head); margin-top:.3em; }
html.fai-next .nx-ur ul, html.fai-next .nx-ur ol{ margin:0 0 .45em; padding:0; list-style-position:inside; }
html.fai-next .nx-ur ul{ list-style-type:disc; } html.fai-next .nx-ur ol{ list-style-type:arabic-indic; }
html.fai-next .nx-ur li{ margin:0 0 .2em; display:list-item; list-style-position:inside; }
@keyframes nxUr{ from{ opacity:0; transform:translateY(6px); filter:blur(2px); } }
html.fai-next .nx-ur-note{ display:block; margin-top:8px; font:500 11.5px/1.4 Inter, system-ui, sans-serif; color:var(--n-muted); }
html.fai-next .nx-beta{ display:inline-block; margin-left:4px; padding:0 5px; border-radius:6px; font:700 9px/15px Inter, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--n-acc); box-shadow:inset 0 0 0 1px var(--n-acc); vertical-align:1px; }
html.fai-next .nx-toast{ position:fixed; left:50%; top:76px; transform:translateX(-50%); z-index:90; max-width:calc(100vw - 32px); padding:9px 14px; border-radius:12px; background:var(--n-side); color:#fff; font-size:13px; opacity:0; pointer-events:none; transition:opacity .3s; }
html.fai-next .nx-toast.on{ opacity:1; }
#jr .lab{ display:flex; align-items:center; gap:6px; }
#jr .lab > .nx-spk{ width:28px; height:28px; }
@media (prefers-reduced-motion:reduce){ html.fai-next .nx-eq i, html.fai-next .nx-reading, html.fai-next .nx-player{ animation:none; } }
@media (hover:hover) and (pointer:fine){ html.fai-next .nx-spk:not(.on):hover, html.fai-next .nx-listen:not(.on):hover{ background:var(--n-accsoft); color:var(--n-head); } }
@media (prefers-reduced-motion:reduce){
  html.fai-next .nx-tome .lf, html.fai-next .auth-card .st, html.fai-next .nx-spk.on .w1, html.fai-next .nx-spk.on .w2, html.fai-next .nx-listen.on .w1, html.fai-next .nx-listen.on .w2{ animation:none; }
}