/* App shell: sticky rail (expanded / icons), header, phone tab bar, jump box.
   LEMMA-UI-OVERHAUL-1030 (C1/F01): solid calm rail, 500-600 weights; the current page stays neutral (FINOVERVIEW1021). */
.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s4);background:var(--rail-bg);border-right:1px solid var(--line);z-index:50}
.brand{display:flex;align-items:center;gap:10px;padding:0 var(--s2) var(--s5);font:var(--head-weight) 1.35rem var(--f-head);color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:36px;height:36px;display:grid;place-items:center;color:var(--on-accent);background:var(--accent);border-radius:50%;font:600 1.1rem var(--f-head);flex:none}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:var(--control-h);padding:0 14px;border-radius:var(--r-pill);
  color:var(--ink-2);font-weight:500;text-decoration:none;transition:background var(--t-fast) var(--ease),color var(--t-fast)}
.nav a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{font-weight:600}
.nav a[aria-current="page"]{background:var(--surface-3);color:var(--ink);box-shadow:none}
.nav a .count{margin-left:auto}
.nav a[aria-current="page"] .count{background:var(--surface);color:var(--ink)}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-pill);background:transparent;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background var(--t-fast),border-color var(--t-fast)}
.rail-foot:hover{text-decoration:none;background:var(--surface);border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.rail-foot[aria-current="page"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--ink);font:600 .9rem var(--f-head);flex:none}
.rail-foot .who{font-weight:600;font-size:var(--fs-sm);line-height:1.2;min-width:0}
.rail-foot .who small{display:block;color:var(--ink-2);font-weight:500}
.rail-foot>svg{margin-left:auto;color:var(--ink-2)}

.main{min-width:0;padding:var(--s5) clamp(16px,3.2vw,48px) var(--s7);outline:none}
.main-inner{max-width:var(--content-max);margin:0 auto}
.top{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);min-height:44px}
.top .title{display:flex;flex-direction:column;margin-right:auto;min-width:0}
.top h1{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.top .title{flex-shrink:0}
#page-actions{flex-wrap:wrap;min-width:0}
.top .date{color:var(--ink-2);font-weight:500;font-size:var(--fs-sm)}
.top .back{margin-right:-4px}
.search{display:flex;align-items:center;gap:10px;height:var(--control-h);min-width:240px;padding:0 8px 0 16px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;box-shadow:var(--sh-1);cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.search:hover{border-color:color-mix(in srgb,var(--ink) 25%,transparent);box-shadow:var(--sh-2)}
.search kbd{margin-left:auto;font:600 var(--fs-2xs) var(--f-body);padding:2px 8px;border-radius:var(--r-xs);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.tabbar{display:none}
.mobile-only{display:none}

/* Rail labels are visible when expanded, so their tooltips only exist in the icon-only rail. */
@media (min-width:1101px){:root:not([data-rail="icons"]) .nav a>[role="tooltip"],:root:not([data-rail="icons"]) .rail-foot>[role="tooltip"]{display:none!important}}

/* Icon-only rail: chosen in Settings, or automatic on tablets */
@media (min-width:721px){
  :root[data-rail="icons"] .app{grid-template-columns:var(--rail-w-icons) minmax(0,1fr)}
  :root[data-rail="icons"] .brand span,:root[data-rail="icons"] .nav a>span,:root[data-rail="icons"] .rail-foot .who,:root[data-rail="icons"] .rail-foot>svg{display:none}
  :root[data-rail="icons"] .brand{justify-content:center;padding:0 0 var(--s5)}
  :root[data-rail="icons"] .rail{padding-left:var(--s3);padding-right:var(--s3)}
  :root[data-rail="icons"] .nav a{justify-content:center;padding:0}
  :root[data-rail="icons"] .nav a .count{position:absolute;top:-2px;right:0;margin:0;min-width:20px;height:20px;padding:0 5px;border:2px solid var(--surface-2)}
  :root[data-rail="icons"] .rail-foot{justify-content:center;padding:6px;background:transparent;border:0}
  :root[data-rail="icons"] .nav a>[role="tooltip"],:root[data-rail="icons"] .rail-foot>[role="tooltip"]{left:calc(100% + 12px);bottom:auto;top:50%;transform:translate(0,-50%)}
  :root[data-rail="icons"] .nav a>[role="tooltip"]::after,:root[data-rail="icons"] .rail-foot>[role="tooltip"]::after{top:50%;left:auto;right:100%;margin:-6px 0 0;border-top-color:transparent;border-right-color:var(--tip-bg)}
}
@media (min-width:721px) and (max-width:1100px){
  .app{grid-template-columns:var(--rail-w-icons) minmax(0,1fr)}
  .brand span,.nav a>span,.rail-foot .who,.rail-foot>svg{display:none}
  .brand{justify-content:center;padding:0 0 var(--s5)}
  .rail{padding-left:var(--s3);padding-right:var(--s3)}
  .nav a{justify-content:center;padding:0}
  .nav a .count{position:absolute;top:-2px;right:0;margin:0;min-width:20px;height:20px;padding:0 5px;border:2px solid var(--surface-2)}
  .rail-foot{justify-content:center;padding:6px;background:transparent;border:0}
  .nav a>[role="tooltip"],.rail-foot>[role="tooltip"]{left:calc(100% + 12px);bottom:auto;top:50%;transform:translate(0,-50%)}
  .nav a>[role="tooltip"]::after,.rail-foot>[role="tooltip"]::after{top:50%;left:auto;right:100%;margin:-6px 0 0;border-top-color:transparent;border-right-color:var(--tip-bg)}
  .search{min-width:0}
  .search .search-label{display:none}
}

/* Phone: flat full-width tab bar */
@media (max-width:720px){
  .app{display:block}
  .rail,.search,.desk-only{display:none!important}
  .mobile-only{display:inline-grid}
  .main{padding:var(--s4) 16px calc(var(--tabbar-h) + var(--s4) + env(safe-area-inset-bottom))}
  .top{margin-bottom:var(--s4);flex-wrap:wrap}
  #page-actions{max-width:100%;gap:var(--s2)}
  h1{font-size:1.5rem}
  .tabbar{--z-nav:40;position:fixed;z-index:var(--z-nav);left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:var(--tabbar-h);padding:var(--s2) var(--s2) env(safe-area-inset-bottom);border-radius:0;background:var(--surface);border-top:1px solid var(--line);box-shadow:none}
  .tabbar a{position:relative;display:grid;place-items:center;min-height:var(--s7);border-radius:var(--r-lg);color:var(--ink-2);font-size:var(--fs-xs);font-weight:600;text-decoration:none;min-width:0}
  .tabbar a>.i{grid-area:1/1;margin:0}
  .tabbar a[aria-current="page"]{background:var(--surface-3);color:var(--ink)}
  .tabbar .count{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;font-size:var(--fs-xs)}
  .card{padding:var(--s4);border-radius:var(--r-md)}
  .toast{bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom))}
}
/* DOBBY-UIUX-9: 13 px tab labels need ~66 px for "Assistants" in Inter 600; narrow phones get slimmer insets. */
@media (max-width:380px){.tabbar{padding-inline:var(--s1)}}

/* Ctrl K jump box */
.jump{border:0;padding:0;width:min(620px,calc(100vw - 32px));margin:12vh auto auto;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--sh-3);overflow:hidden}
.jump::backdrop{background:var(--scrim)}
.jump[open]{animation:rise var(--t-fast) var(--ease) both}
.jump-field{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.jump-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint),var(--sh-2)}
.jump-field input{border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important;font-size:1.05rem;font-weight:500;min-height:44px;padding:0!important}
.jump-field kbd{font:600 var(--fs-2xs) var(--f-body);padding:2px 8px;border-radius:var(--r-xs);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.jump-list{list-style:none;margin:0;padding:var(--s2);max-height:min(420px,60vh);overflow:auto}
.jump-list li{display:flex;align-items:center;gap:var(--s3);padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;font-weight:500;transition:background var(--t-fast)}
.jump-list li:hover{background:var(--surface-hover)}
.jump-list li small{margin-left:auto;color:var(--ink-2);font-weight:500}
.jump-list li[aria-selected="true"]{background:var(--accent-tint);color:var(--accent-ink)}
.jump-list li .ic{width:32px;height:32px;border-radius:var(--r-sm)}
.jump-group{padding:10px 12px 4px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);letter-spacing:var(--track-eyebrow);text-transform:uppercase;cursor:default!important}
.jump-empty{padding:var(--s5);text-align:center;color:var(--ink-2);font-weight:500}
@media (max-width:720px){
  #page-actions .btn>span{display:none}
  #page-actions .btn{width:var(--control-h);padding:0}
  .actionbar{padding:10px 12px;gap:var(--s2)}
  .actionbar .end{margin-left:0}
}
/* LEMMA-VIEWER-ROLE-1030: read-only sessions hide action controls (cosmetic; the server refuses writes). */
#read-only-badge{display:none;flex-shrink:0}
:root[data-read-only="true"] #read-only-badge{display:inline-flex}
:root[data-read-only="true"] #content :is(.btn.primary,.btn.danger:not(#logout),.btn.danger-solid,button[type=submit],.form-actions:not(.read-only-keep),details.pop,input[type=file],.admin-only,textarea),
:root[data-read-only="true"] #page-actions :is(.btn.primary,.btn.danger,.btn.danger-solid,button[type=submit]){display:none!important}
/* UX-REVIEW-20261031 #7 (C1/F01, C2/F08): a viewer never meets "Not sent · Retry": Home's Ask box and the WhatsApp composer
   tools give way to "Read-only" (cosmetic too; the server still refuses every write). */
/* UX-REVIEW P3 (D24): nor the "Turn on" link beside "WhatsApp sending is off": a viewer cannot switch anything. */
:root[data-read-only="true"] #content :is(.ask>.who-pick,.ask>.composer,.ask>.sugg,.wa-compose>*,.wa-gate-off>a){display:none!important}
:root[data-read-only="true"] #content :is(.ask,.wa-compose)::after{content:"Read-only";display:block;margin-top:auto;padding:var(--s3) 0 0;color:var(--ink-2);font-size:var(--fs-label)}
:root[data-read-only="true"] #content .wa-compose::after{padding:var(--s2) var(--s1);margin:0}