/* Light's own styles, loaded only on its own pages. pod_api.html links /brand/tenant.css right after
   app.css, and each portal's Caddy block serves /brand/* from that tenant's assets/ folder (huddlespeak.com serves
   an empty huddle-app/brand/tenant.css). Every rule here requires html.tenant-light; moved out of app.css on
   2026-10-23 with its comments, @media wrappers and order kept. They now come after ALL of app.css, so a rule that
   relied on sitting before a later shared rule of equal specificity stayed in app.css.
   Ships with Proxy, or Tenant Admin -> Apply for this tenant; never needs a Page deploy. No ?v=: Caddy sends
   Cache-Control: no-cache, so browsers revalidate it on every load.
   A url() for a file in the web root must start with "/": this sheet is served from /brand/, so a relative url()
   resolves there (only this tenant's own assets/ folder). */

  /* The Light asset includes a second wordmark. Crop its transparent book-and-rays mark
     beside the heading while the title and subtitle stay centered across the header. */
  html.tenant-light.theme-preset-islamic-architecture #topbar .brandrow{
    position:relative; display:flex; justify-content:center; width:100%; max-width:100%;
  }
  html[data-theme="dark"].tenant-light.theme-preset-islamic-architecture #topbar .logo[data-tenant-logo]{ filter:none; }
  html.tenant-light.theme-preset-islamic-architecture #topbar .brandcopy{
    gap:6px; min-width:0; width:max-content; max-width:calc(100vw - 32px); text-align:center;
  }
  html.tenant-light.theme-preset-islamic-architecture #topbar h1{ font-size:20px; line-height:1.15; }

  /* Light uses compact three-seat cards. Keep the speaking portrait's 1.22x expansion clear of the
     advisor name without moving the text when playback starts. */
  html.tenant-light.theme-preset-islamic-architecture .reg .card{ gap:10px; }
  html.tenant-light #tenantGate .light-gate-book{ stroke:#84968c; }
  html.tenant-light #tenantGate .light-gate-rays{ stroke:#a5802c; }
  html.tenant-light #tenantGate .light-gate-banner .light-gate-brand{ gap:12px; color:#fffaf0; }
  html.tenant-light #tenantGate .light-gate-banner .light-gate-symbol{ width:44px; height:33px; }
  html.tenant-light #tenantGate .light-gate-banner .light-gate-wordmark{ font-size:clamp(24px,5vw,28px); }
  html.tenant-light #tenantGate .light-gate-banner .light-gate-book{ stroke:#e0e9df; }
  html.tenant-light #tenantGate .light-gate-banner .light-gate-rays{ stroke:#e4c773; }
  html.tenant-light #tenantGate .light-gate-banner .light-gate-tagline{ margin:6px 0 0; font-size:clamp(10px,2.5vw,12px); color:#e0e9df; }
@media screen {
    html.tenant-light.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait #topbar .brandcopy{
      flex:none; min-width:0; width:max-content; max-width:calc(100vw - 32px);
    }
    html.tenant-light.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait #topbar .logo[data-tenant-logo]{
      left:calc(50% - 88px); top:-7px; width:46px; height:36px; max-width:none;
      object-fit:cover; object-position:left center;
    }
  html.tenant-light #tenantWorkspaceShell {
    --tenant-workspace-accent:#08735c;
    /* Match HH's translucent cream glass so the courtyard stays visible through the blur. */
    --light-workspace-glass:linear-gradient(160deg,rgba(248,244,237,.62) 0%,rgba(244,238,229,.56) 52%,rgba(232,222,210,.62) 100%);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell {
    --light-workspace-glass:var(--chat-gradient);
    --tenant-background-image:url("/HuddleBackgroundDark.webp?v=1");
  }
  html.tenant-light #start { min-width:240px; } /* Keep the established button size with the shorter label. */
  /* Header dropdowns must escape the stage's scroll clip and isolated stack so
     Conversation and Explore a Surah cannot cover them. Keep normal pane scrolling. */
  html.tenant-light #tenantWorkspaceShell>#stage:has(#acctMenu.open,#langMenu.open) {
    overflow:visible; isolation:auto;
  }
  html.tenant-light #tenantWorkspaceShell #topbar:has(#acctMenu.open,#langMenu.open) { z-index:45; }
  html.tenant-light body #tenantWorkspaceShell.workspace-portrait>#stage:has(#acctMenu.open,#langMenu.open) { z-index:7; }   /* over the Surah drawer (5) and its handle (6) */
  html.tenant-light.theme-preset-islamic-architecture[data-theme="light"] body {
    background-image:linear-gradient(rgba(255,252,246,.06),rgba(242,235,225,.10)),var(--tenant-background-image,none);
  }
  html.tenant-light.theme-preset-islamic-architecture[data-theme="dark"] body {
    background-image:linear-gradient(rgba(4,12,12,.68),rgba(4,12,12,.78)),var(--tenant-background-image,none);
  }
  /* Keep the shared foreground FTUE veil above Light's workspace. Its extra research pane and
     desktop glass also defer their own frosting to that veil while onboarding is active. */
  html.tenant-light body.ftue #tenantWorkspaceShell>#stage { isolation:auto; }
  html.tenant-light body.ftue #tenantWorkspaceShell>#lightResearchPanel,
  html.tenant-light body.ftue #tenantWorkspaceShell::after {
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  html.tenant-light #shareBtn { background:#8b9395; border-color:#8b9395; opacity:1; color:#fff; }
  html.tenant-light #shareBtn.ready:hover { background:#1166b7; border-color:#1166b7; }
  html.tenant-light #tenantSources a+a { margin-left:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #topbar #acctMenu { width:min(320px,calc(100vw - 32px)); min-width:0; }
  html.tenant-light #topbar #acctMenu :is(button,a) svg { width:18px; height:18px; }
  html.tenant-light #topbar #lightProfileSettings summary { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 12px; border-radius:7px; font-size:17px; line-height:1.35; color:#34382f; cursor:pointer; list-style:none; }
  html.tenant-light #topbar #lightProfileSettings summary::-webkit-details-marker { display:none; }
  html.tenant-light #topbar #lightProfileSettings summary svg { width:18px; height:18px; flex:none; opacity:.85; }
  html.tenant-light #topbar #lightProfileSettings summary::after { content:''; width:6px; height:6px; margin-left:auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
  html.tenant-light #topbar #lightProfileSettings[open] summary::after { transform:rotate(225deg); }
  html.tenant-light #topbar #lightProfileSettings summary:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
  /* Conversation pages: one scrolling page (the default) or two facing pages (app-light-study.js mountPagesSetting). A small heading
     over two rows, the one in use ticked. Only the desktop is paged, so phones and tablets do not show it. */
  html.tenant-light #topbar #lightPagesMenu { display:flex; flex-direction:column; gap:1px; margin:4px 0; }
  html.tenant-light.tenant-workspace-portrait #topbar #lightPagesMenu { display:none; }
  html.tenant-light #topbar #lightPagesMenu .light-pages-choice[aria-pressed="true"]::after {
    content:''; flex:none; width:5px; height:10px; margin-inline-start:auto; margin-inline-end:3px;
    border:solid currentColor; border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg);
  }
  html.tenant-light #tenantWorkspaceShell #topbar h1 { transform:translateY(3px); }
  html.tenant-light #tenantWorkspaceShell #topbar .metarow { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:6px; margin-top:0; }
  html.tenant-light #tenantWorkspaceShell #topbar #langCorner { grid-column:1; grid-row:1; justify-self:start; }
  html.tenant-light #tenantWorkspaceShell #topbar #topRight { grid-column:3; grid-row:1; justify-self:end; margin-left:0; }
  html.tenant-light #tenantWorkspaceShell #tenantSources { grid-column:2; grid-row:1; margin:0; text-align:center; }
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #topbar :is(#langCorner,#topRight) { grid-row:2; }
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #tenantSources { grid-row:1; }
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) :is(.light-study-picker-label,.light-study-mode-title,.light-conversation-title) { font-size:18px; }
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #chat #log { font-size:calc(16px * var(--light-log-scale,1.125)); }
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) .light-study-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; font-size:15px; }
  html.tenant-light #chat #log:empty::before { font-size:calc(16px * var(--light-log-scale,1.125)); content:"Conversation transcript appears here."; font-style:normal; }
  /* Light in Urdu (app-light-study.js applyLightLanguage sets .light-ui-urdu): the two texts CSS draws itself. */
  html.tenant-light.light-ui-urdu #chat #log:empty::before { content:"گفتگو کی تحریر یہاں نظر آئے گی۔"; direction:rtl; }
  html.tenant-light.light-ui-urdu body:is(.starting-up,.startup-leaving) #statusText::after { content:"شروع ہو رہا ہے…"; direction:rtl; }
  /* Letter-spacing pulls joined Urdu letters apart (Safari draws the gaps), so Urdu drops it everywhere but the
     LIGHT wordmarks, and the account menu grows to fit its longer labels on one line. */
  html.tenant-light.light-ui-urdu body :not(.light-gate-wordmark):not(#tenantHomeLink h1) { letter-spacing:normal !important; }
  /* Urdu in Noto Nastaliq Urdu (loaded by app-light-study.js), after Inter so Latin words stay Inter. Qur'anic and
     classical Arabic is marked lang="ar" and keeps the Naskh it had: Nastaliq is Urdu's script style, not the mushaf's. */
  html.tenant-light.light-ui-urdu { --light-ui-font:Inter,"Noto Nastaliq Urdu","Avenir Next","Segoe UI",sans-serif; }
  html.tenant-light.light-ui-urdu body :is(:lang(ar),.light-surah-chevron) { font-family:Inter,"Avenir Next","Segoe UI",sans-serif !important; }
  html.tenant-light.light-ui-urdu #langBtn .langCap { font-size:10px !important; }
  html.tenant-light.light-ui-urdu #pod .name { font-size:15px !important; line-height:1.55 !important; }
  html.tenant-light.light-ui-urdu #pod :is(.roletext,.roletext-full,.roletext-compact) { font-size:14px !important; line-height:1.55 !important; }
  /* A Nastaliq word starts high and cascades down to the left, so its ink sits about .4em above the line's centre:
     in a pill it pokes out of the top edge. The labels are moved down to centre the ink, not the line box. */
  html.tenant-light.light-ui-urdu #start .startlbl { font-size:16px !important; position:relative; top:.4em; }
  html.tenant-light.light-ui-urdu body #tenantWorkspaceShell #lightStudy .light-study-mode .light-study-action { height:44px !important; min-height:44px !important; font-size:14px !important; padding-top:9px !important; padding-bottom:1px !important; }   /* "سمجھیں" stands taller than 40px allows */
  html.tenant-light.light-ui-urdu #tenantWorkspaceShell:not(.workspace-portrait) { --ld-action-h:44px; }   /* desktop sizes both buttons from this */
  html.tenant-light.light-ui-urdu #topctrls .btnlbl { font-size:13px !important; position:relative; top:.3em; }
  html.tenant-light.light-ui-urdu #tenantWorkspaceShell.workspace-portrait #topctrls .btnlbl { font-size:12px !important; }
  html.tenant-light.light-ui-urdu .tenant-pane-label { font-size:14.5px !important; }
  html.tenant-light.light-ui-urdu #lightFiqhSchools .light-fiqh-school span { font-size:14px !important; }
  html.tenant-light.light-ui-urdu #lightStudy .light-study-clear { font-size:15px !important; }
  html.tenant-light.light-ui-urdu #lightStudy .light-study-options span { font-size:14.5px !important; }
  html.tenant-light.light-ui-urdu #lightStudy :is(.light-study-hint,.light-study-intro) { font-size:14.5px !important; line-height:1.8 !important; }
  html.tenant-light.light-ui-urdu #tenantWorkspaceShell:not(.workspace-portrait) #topbar #acctMenu { width:max-content; }
  /* Light in Arabic (.light-ui-arabic, 2026-10-23): the same two CSS-drawn texts, and no letter-spacing, which pulls
     joined Arabic letters apart as it does Urdu's. Arabic keeps the system's Naskh (as lang="ar" Qur'anic text does),
     so no font is fetched and no size is raised. No italic either: a slanted Arabic is a distortion. */
  html.tenant-light.light-ui-arabic #chat #log:empty::before { content:"سيظهر نص المحادثة هنا."; direction:rtl; }
  html.tenant-light.light-ui-arabic body:is(.starting-up,.startup-leaving) #statusText::after { content:"جارٍ البدء…"; direction:rtl; }
  html.tenant-light.light-ui-arabic body :not(.light-gate-wordmark):not(#tenantHomeLink h1) { letter-spacing:normal !important; }
  html.tenant-light.light-ui-arabic body * { font-style:normal !important; }
  html.tenant-light.light-ui-arabic #tenantWorkspaceShell:not(.workspace-portrait) #topbar #acctMenu { width:max-content; }
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) { grid-template-rows:fit-content(42%) minmax(0,1fr); }
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait)>#stage,
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait)>#lightStudy,
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait)>.tenant-pane-edge-toggle { grid-row:1 / 3; }
  html.tenant-light #lightResearchPanel { grid-column:1; grid-row:1; border-radius:8px 8px 0 0; border-bottom:1px solid var(--border); }
  html.tenant-light #lightStudy { grid-column:3; grid-row:1; border-radius:8px; }
  html.tenant-light #lightStudy { padding:28px 24px; }
  html.tenant-light :is(#lightResearchPanel,#lightStudy) h2,
  html.tenant-light .light-conversation-title { margin:0; font:400 21px/1.25 Georgia,serif; color:var(--text); }
  html.tenant-light .light-conversation-title { padding:10px 18px 2px; flex:none; font-size:21px; }
  html.tenant-light .light-heading-icon { display:inline-flex; flex:none; width:20px; height:20px; }
  html.tenant-light .light-heading-icon svg { display:block; width:100%; height:100%; }
  html.tenant-light .light-study-intro { display:block; font-size:16px; color:var(--muted); line-height:1.45; margin:5px 0 12px; }
  html.tenant-light .light-study-question { display:grid; gap:6px; margin:0 0 8px; }
  html.tenant-light .light-study-search {
    box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:12px; border:1px solid var(--border);
    border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:17px;
  }
  html.tenant-light textarea.light-study-search { resize:vertical; min-height:62px; max-height:140px; }
  html.tenant-light :is(#lightResearchPanel,#lightStudy) button {
    color:var(--text); background:transparent; border:1px solid var(--border); border-radius:8px; cursor:pointer;
    box-shadow:none; font:inherit; white-space:normal; text-transform:none; letter-spacing:normal;
  }
  html.tenant-light :is(#lightResearchPanel,#lightStudy) button:hover { background:color-mix(in srgb,var(--text) 6%,transparent); }
  html.tenant-light :is(#lightResearchPanel,#lightStudy) button:disabled { opacity:.55; cursor:default; }
  html.tenant-light .light-study-examples { display:grid; gap:6px; }
  html.tenant-light .light-study-ask-copy { display:grid; gap:2px; }
  html.tenant-light .light-study-ask-copy strong { font-size:16px; font-weight:600; }
  html.tenant-light .light-study-ask-copy>span { font-size:16px; color:var(--muted); line-height:1.3; }
  html.tenant-light .light-study-arrow { font-size:25px; color:#ac8256; }
  html.tenant-light .light-study-picker { display:grid; gap:10px; margin:18px 0 0; }
  html.tenant-light .light-study-picker-label { font:400 20px/1.3 Georgia,serif; }
  html.tenant-light .light-surah-picker { position:relative; min-width:0; }
  html.tenant-light .light-surah-name { flex:1; min-width:0; overflow-wrap:anywhere; }
  html.tenant-light .light-surah-count { flex:none; margin-left:auto; color:var(--muted); font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; }
  html.tenant-light .light-surah-chevron { flex:none; }
  html.tenant-light .light-surah-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5; display:flex; flex-direction:column; max-height:min(300px,32vh); padding:4px; border:1px solid var(--border); border-radius:8px; background:var(--surface); box-shadow:0 8px 20px rgba(0,0,0,.14); }
  html.tenant-light .light-surah-list { min-height:0; overflow:auto; overscroll-behavior:contain; }
  html.tenant-light .light-surah-dropdown { margin:0; width:auto; max-width:none; color:var(--text); }
  html.tenant-light .light-surah-header { display:none; }
  html.tenant-light .light-surah-empty { margin:8px 10px; color:var(--muted); font-size:16px; }
  html.tenant-light .light-surah-option { display:flex; align-items:center; gap:12px; min-height:40px; box-sizing:border-box; padding:9px 10px; border-radius:4px; font-size:17px; cursor:pointer; }
  html.tenant-light .light-surah-option:is(:hover,.active) { background:color-mix(in srgb,var(--text) 8%,var(--surface)); }
  html.tenant-light .light-surah-option[aria-selected="true"] { font-weight:600; }
  html.tenant-light #tenantWorkspaceShell #lightStudy .light-study-clear {
    justify-self:start; min-height:28px; padding:4px 12px; border-radius:6px; font-size:14px; font-weight:600;
    text-decoration:none; color:var(--ink); background:var(--control-gradient);
  }
  html.tenant-light .light-study-actions { min-width:0; margin-top:4px; }
  html.tenant-light .light-study-mode { display:grid; border-top:1px solid var(--border); padding:22px 0; }
  html.tenant-light .light-study-mode-title { margin:0; font:400 20px/1.25 Georgia,serif; color:var(--text); }
  html.tenant-light :is(#lightResearchPanel,#lightStudy) :is(.light-study-submit,.light-study-action):hover { background:#506c63; color:#fff; }
  html.tenant-light #lightResearchPanel .light-study-submit,
  html.tenant-light #lightStudy .light-study-action { width:190px; justify-self:end; text-transform:uppercase; white-space:nowrap; transition:background .2s,border-color .2s,color .2s; padding-inline:12px; font-size:13px; height:44px; min-height:44px; max-height:44px; flex-shrink:0; line-height:20px; }
  html.tenant-light #lightStudy .light-study-action { margin-top:20px; }
  html.tenant-light #lightStudy input[type="checkbox"]::before { content:""; width:4px; height:8px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-1px) rotate(45deg); opacity:0; }
  html.tenant-light #lightStudy input[type="checkbox"]:checked::before { opacity:1; }
  html.tenant-light #lightStudy input[type="checkbox"]:disabled { cursor:default; }
  html.tenant-light .light-study-mode .light-study-intro { margin:8px 0 14px; }
  html.tenant-light .light-study-mobile-copy { display:none; }
  html.tenant-light .light-study-options { display:grid; gap:20px; font-size:17px; }
  html.tenant-light .light-study-options label { display:flex; align-items:center; gap:10px; min-height:28px; cursor:pointer; }
  html.tenant-light .light-study-options label:has(input:disabled) { opacity:.45; cursor:default; }
  html.tenant-light .light-study-hint { font-size:16px; line-height:1.45; color:var(--muted); margin:12px 0 0; }
  html.tenant-light .light-study-hint:empty { display:none; }
  html.tenant-light #lightStudy .light-study-hint.is-error { padding:12px; border:1px solid #a65329; border-left-width:4px; border-radius:6px; background:#fff1dc; color:#713619; font-size:17px; font-weight:600; }
  html.tenant-light #lightStudy .light-study-fix { display:block; margin-top:8px; padding:3px 0; border:0; border-radius:0; color:inherit; font-weight:700; text-decoration:underline; }
  html.tenant-light #lightStudy .light-surah-trigger[aria-invalid="true"] { border-color:#a65329; }
  html.tenant-light :is(#lightResearchPanel,#lightStudy) :is(button,input,select,textarea):focus-visible { outline:2px solid var(--tenant-workspace-accent); outline-offset:3px; }
  html.tenant-light :is(#lightResearchPanel,#lightStudy) [hidden] { display:none; }
  /* The left column's shared glass fades out with its content, like the right pane. */
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait)::after {
    content:""; display:block; position:relative; inset:auto; width:auto; height:auto;
    grid-column:1; grid-row:1 / 3; min-height:0; border-radius:8px; z-index:0; pointer-events:none;
    background:var(--light-workspace-glass); -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
    opacity:1; visibility:visible; transform:translateX(0);
    transition:opacity .46s ease,transform .58s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;
  }
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait).chat-pane-minimized::after {
    opacity:0; visibility:hidden; transform:translateX(30px) scale(.985);
    transition:opacity .42s ease,transform .58s cubic-bezier(.22,1,.36,1),visibility 0s linear .58s;
  }
  /* Let narrow discussions scroll as one page instead of clipping the question form into a fractional row. */
  html.tenant-light #tenantWorkspaceShell.workspace-portrait { grid-template-rows:max-content max-content minmax(240px,1fr) max-content; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:12px calc(70px + env(safe-area-inset-bottom,0px)); }
  html.tenant-light body.ftue #tenantWorkspaceShell.workspace-portrait { overflow-y:auto; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait[data-pane="study"] { grid-template-rows:max-content minmax(max-content,1fr) max-content; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#lightResearchPanel { grid-column:1; grid-row:2; padding:14px 16px; border-radius:0; overflow:visible; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-examples { display:none; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#chat.log-max,
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#chat.log-max.positioned { grid-row:3; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#lightStudy { grid-column:1; grid-row:2; padding:20px; border-radius:0; overflow:visible; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#tenantPaneTabs { grid-row:4; position:sticky; bottom:0; z-index:4; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait[data-pane="study"]>#tenantPaneTabs { grid-row:3; }
  html.tenant-light body.live #tenantWorkspaceShell.workspace-portrait #mute.jumpin { transform:none; }
  html.tenant-light body.live #tenantWorkspaceShell.workspace-portrait :is(#modeBtn,#mute,#endSession) svg { flex:none; width:1.2em; height:1.2em; }
  html.tenant-light body.live #tenantWorkspaceShell.workspace-portrait #mute .micwave i { width:2px; }
  html.tenant-light body.live #tenantWorkspaceShell.workspace-portrait #topctrls .btncap { margin-top:4px; font-size:clamp(8px,2vw,10px); line-height:1.2; letter-spacing:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-search { font-size:16px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait :is(#lightResearchPanel,#lightStudy) h2 { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  html.tenant-light body #tenantWorkspaceShell:not(.workspace-portrait)>:is(#lightResearchPanel,#chat.log-max),
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait)::after { transition:none !important; }
}
@media (forced-colors:active) {
  html.tenant-light #lightStudy input[type="checkbox"] { appearance:auto; -webkit-appearance:auto; }
  html.tenant-light #lightStudy input[type="checkbox"]::before { display:none; }
}
@media screen {
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #topbar { gap:4px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #topbar #langCorner { grid-column:1; grid-row:1; justify-self:start; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #topbar #topRight { grid-column:3; grid-row:1; justify-self:end; margin-left:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #tenantSources { grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; min-width:0; font-size:16px; line-height:1.35; text-align:center; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #tenantSources a+a { margin-left:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #topbar :is(#langCorner,#topRight) { width:clamp(72px,23vw,110px); min-width:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #topbar #acctCorner { width:100%; }
  html.tenant-light .light-study-selection, html.tenant-light .light-study-field { display:contents; }
  html.tenant-light .light-study-ayah-label { display:none; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#lightResearchPanel { display:none; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-desktop-copy { display:none; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-mobile-copy { display:inline; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-ayah-label { display:block; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-clear:disabled { display:none; }
  html.tenant-light body.ftue #tenantWorkspaceShell.workspace-portrait::before { display:block; }
  html.tenant-light body.ftue #tenantWorkspaceShell.workspace-portrait { overflow:hidden; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #sharebar { display:flex !important; flex:none; padding:10px; border-top:1px solid var(--border); }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #shareInput { box-sizing:border-box; min-height:42px; max-height:86px; padding:9px 38px 9px 13px; line-height:22px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #shareBtn { flex:none; min-width:44px; min-height:44px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #log { display:block !important; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-picker { display:grid; gap:10px; margin:12px 0 0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-selection { position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:end; gap:10px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-field { display:grid; gap:6px; min-width:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-picker-label { font:inherit; font-size:18px; line-height:1.3; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-selection .light-surah-picker { position:static; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-selection .light-surah-trigger>.light-surah-count { display:none; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-selection .light-surah-trigger>.light-surah-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #lightStudyScope { padding-inline:8px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-picker { position:relative; min-width:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-name { flex:1; min-width:0; overflow-wrap:anywhere; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-count { flex:none; margin-left:auto; color:var(--muted); font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-chevron { flex:none; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5; display:flex; flex-direction:column; max-height:min(300px,32vh); padding:4px; border:1px solid var(--border); border-radius:8px; background:var(--surface); box-shadow:0 8px 20px rgba(0,0,0,.14); }
  html.tenant-light .light-surah-dropdown:popover-open::backdrop { background:transparent; pointer-events:none; }
  html.tenant-light .light-surah-dropdown:popover-open .light-surah-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; margin-bottom:12px; }
  html.tenant-light #lightStudy .light-surah-close { min-width:64px; min-height:44px; padding:8px 12px; }
  html.tenant-light .light-surah-dropdown:popover-open .light-surah-list { flex:1; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-list { min-height:0; overflow:auto; overscroll-behavior:contain; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-empty { margin:8px 10px; color:var(--muted); font-size:16px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-option { display:flex; align-items:center; gap:12px; min-height:40px; box-sizing:border-box; padding:9px 10px; border-radius:4px; font-size:17px; cursor:pointer; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-surah-option[aria-selected="true"] { font-weight:600; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-actions { display:grid; gap:12px; min-width:0; margin-top:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-mode { display:grid; gap:6px; min-width:0; border:1px solid var(--border); border-radius:10px; padding:12px; background:color-mix(in srgb,var(--surface) 32%,transparent); }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-mode-title { margin:0; font:400 22px/1.2 Georgia,serif; color:var(--text); }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action { flex-shrink:0; line-height:20px; margin-top:2px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #lightStudy input[type="checkbox"]::before { content:""; width:4px; height:8px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-1px) rotate(45deg); opacity:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #lightStudy input[type="checkbox"]:checked::before { opacity:1; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #lightStudy input[type="checkbox"]:disabled { cursor:default; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-options { display:flex; flex-wrap:wrap; gap:14px 24px; font-size:17px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-options label { display:flex; align-items:center; gap:8px; min-width:0; min-height:32px; cursor:pointer; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-options>.light-study-hint { flex-basis:100%; }
  /* Keep the composer and tabs visible; the transcript and passage scroll independently. */
  html.tenant-light #tenantWorkspaceShell.workspace-portrait { grid-template-rows:minmax(0,max-content) minmax(0,1fr) max-content; overflow:hidden; overscroll-behavior:contain; scroll-padding-block:12px calc(70px + env(safe-area-inset-bottom,0px)); }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#stage { max-height:60dvh; min-height:0; overflow-y:auto; box-sizing:border-box; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait { top:var(--light-viewport-top,0px); bottom:auto; height:var(--light-viewport-height,100dvh); }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait.light-keyboard-open>#tenantPaneTabs { padding-bottom:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait[data-pane="study"] { grid-template-rows:minmax(0,max-content) minmax(0,1fr) max-content; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#chat.log-max,
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#chat.log-max.positioned { grid-row:2; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#lightStudy {
    grid-column:1; grid-row:1 / 3; padding:calc(var(--light-stage-height,0px) + 14px) 12px 14px;
    border-radius:0; overflow:auto; scroll-padding-top:calc(var(--light-stage-height,0px) + 14px);
  }
  html.tenant-light body.ftue #tenantWorkspaceShell.workspace-portrait>#stage #topctrls {
    margin-top:calc(4px + clamp(64px,22dvh,220px)) !important;
  }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait>#tenantPaneTabs { grid-row:3; position:sticky; bottom:0; z-index:4; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait[data-pane="study"]>#tenantPaneTabs { grid-row:3; }
  html.tenant-light body.live #tenantWorkspaceShell.workspace-portrait #mute.jumpin { transform:none; }
  html.tenant-light body.live #tenantWorkspaceShell.workspace-portrait :is(#modeBtn,#mute,#endSession) svg { flex:none; width:1.2em; height:1.2em; }
  html.tenant-light body.live #tenantWorkspaceShell.workspace-portrait #mute .micwave i { width:2px; }
  html.tenant-light body.live #tenantWorkspaceShell.workspace-portrait #topctrls .btncap { margin-top:4px; font-size:clamp(8px,2vw,10px); line-height:1.2; letter-spacing:0; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-study-search { font-size:16px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #lightStudy h2 { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  html.tenant-light body #tenantWorkspaceShell:not(.workspace-portrait)>#chat.log-max,
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait)::after { transition:none !important; }
}
@media (forced-colors:active) {
  html.tenant-light #lightStudy input[type="checkbox"] { appearance:auto; -webkit-appearance:auto; }
  html.tenant-light #lightStudy input[type="checkbox"]::before { display:none; }
}

/* Both Light themes share header typography and spacing. */
html.tenant-light[data-theme="dark"] { background-color:#060d0f; --tenant-background-image:url("/HuddleBackgroundDark.webp?v=1") !important; }
html.tenant-light #topbar .brandcopy { gap:6px; min-width:0; width:max-content; max-width:calc(100vw - 32px); text-align:center; }
html.tenant-light #topbar h1 { padding-left:.22em; font-family:Inter,"Avenir Next","Segoe UI",sans-serif; font-size:20px; font-weight:300; line-height:1.15; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); }
html.tenant-light #topbar .rh-brand-subtitle { max-width:min(540px,86vw); font:500 clamp(8px,1vw,10px)/1.5 Inter,"Avenir Next","Segoe UI",sans-serif; letter-spacing:.17em; text-align:center; color:var(--muted-2); }
html.tenant-light[data-theme="dark"] #topbar .logo[data-tenant-logo] { filter:none; }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell :is(#lightStudy,#lightResearchPanel) :is(.light-study-action,.light-study-submit):hover { background:var(--huddle-dark-start-green-hover); border-color:var(--huddle-dark-start-green-hover); }
@media screen {
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #topbar .logo[data-tenant-logo] { position:static; }
  html.tenant-light #tenantWorkspaceShell #tenantSources a {
    display:flex; gap:6px; min-height:32px; padding:6px 10px; border-radius:7px;
    border:1px solid var(--border); background:var(--control-gradient); box-shadow:0 3px 8px rgba(0,0,0,.15);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #pod .reg {
    border:0; background:var(--control-gradient); box-shadow:0 5px 14px rgba(0,0,0,.32);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #pod .reg.active {
    box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 18px rgba(var(--c),.18);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-study-mode {
    border:0; background:var(--resume-row-bg); box-shadow:0 6px 18px rgba(0,0,0,.3);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell :is(.light-study-search,#lightStudy .light-surah-trigger,#shareInput):focus-visible {
    outline:2px solid var(--focus); outline-offset:2px;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-surah-dropdown {
    border:0; background:var(--dialog-gradient); box-shadow:0 12px 28px rgba(0,0,0,.5);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell #sharebar {
    border:0; background:var(--chat-gradient); box-shadow:0 -6px 18px rgba(0,0,0,.2);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab.active {
    background:var(--control-gradient); box-shadow:0 3px 12px rgba(0,0,0,.28);
  }
  /* Dark mode removes the Islamic preset, but still needs Light's icon crop:
     the full SVG includes a wordmark already rendered by the adjacent heading. */
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #topbar .brandrow {
    position:relative; display:flex; justify-content:center; width:100%; max-width:100%;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #topbar .logo[data-tenant-logo] {
    display:block; position:absolute; left:calc(50% - 102px); top:-7px;
    width:52px; height:40px; max-width:none; margin:0; padding:0;
    object-fit:cover; object-position:left center; background:transparent; border:0; border-radius:0;
  }
  /* Let desktop pane shadows extend into the surrounding background. Pane content
     retains its own scrolling, and the existing collapse animations hide each pane. */
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) { overflow:visible; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>:is(#lightResearchPanel,#chat.log-max) { border:0; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) .light-study-actions { display:grid; gap:14px; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) :is(.light-study-ask,.tenant-pane-edge-toggle):hover { background:var(--resume-row-hover); }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait { --light-reference-green:#45665b; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandrow { position:relative; isolation:isolate; gap:4px; padding-bottom:5px; border-bottom:1px solid #36594f; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandrow::before { content:""; position:absolute; inset:-12px -16px 0; z-index:-1; background:linear-gradient(110deg,#1d2927,#173c34); pointer-events:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandcopy { gap:4px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .logo[data-tenant-logo] { width:40px; height:27px; filter:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .rh-brand-subtitle { font-size:10px; letter-spacing:.12em; line-height:1.5; color:#e3e9df; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .metarow { align-items:center; gap:10px; margin-top:2px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar :is(#langBtn,#acctBtn) { min-height:40px; border:1px solid #e3dfd6; border-radius:12px; background:rgba(255,255,255,.65) !important; box-shadow:0 4px 12px #423d3020; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantSources { gap:2px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #pod { margin-top:12px; gap:9px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #pod .reg { border:1px solid #e4dfd6; border-radius:10px; background:rgba(255,255,255,.6); box-shadow:0 4px 12px #504a3520; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #start::after { content:'›'; margin-left:auto; font-size:24px; line-height:1; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #start .startlbl { font-size:15px; letter-spacing:.08em; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-picker { margin-top:14px; gap:12px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-selection { grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); gap:10px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-picker-label { font-size:14px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #lightStudy :is(.light-surah-trigger,#lightStudyScope) { height:39px; min-height:39px; font-size:14px; padding:9px 12px; border:1px solid #dedbd3; border-radius:7px; background:rgba(255,255,255,.65); }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-actions { gap:10px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode { position:relative; grid-template-columns:52px minmax(0,1fr); gap:4px 12px; padding:12px; border:1px solid #d7ddd3; border-radius:12px; background:linear-gradient(135deg,#f4f6f0,#eff1e9); box-shadow:0 3px 8px #403c3210; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode[data-mode="recite"] { background:linear-gradient(135deg,#fdf9f3,#f7eee2); border-color:#e2dace; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode-icon svg { width:27px; height:27px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode-title { grid-column:2; font:600 16px/1.25 Inter,"Avenir Next",sans-serif; margin-top:1px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode .light-study-mode-caption { grid-column:2; display:block; margin:0 0 3px; font-size:12px; line-height:1.4; color:var(--muted); }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-options { grid-column:1 / -1; gap:10px 16px; font-size:13px; margin-top:5px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-options label { gap:10px; min-height:27px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #lightStudy input[type="checkbox"]::before { display:block; width:5px; height:10px; border-width:0 1.5px 1.5px 0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action { grid-column:1 / -1; justify-self:stretch; width:100%; height:41px; min-height:41px; max-height:none; margin-top:6px; font-size:13px; border-radius:9px; background:var(--light-start-sage); border:0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action::after { content:'›'; margin-left:16px; font-size:22px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab { border-radius:0; background:transparent; color:#777975; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab.active { border-top:3px solid var(--light-reference-green); color:#2c443b; background:transparent; }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode-icon { display:grid; }
  html.tenant-light[data-theme] body.ftue #tenantWorkspaceShell.workspace-portrait #topctrls { margin-top:16px !important; padding-bottom:16px; }
  html.tenant-light[data-theme] body.ftue #tenantWorkspaceShell.workspace-portrait[data-pane="study"]::before { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* Study descriptions belong to the portrait layout in both themes. */
html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) :is(.light-study-mode-caption,.light-study-picker-caption) { display:none; }
@media screen {
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait[data-pane="study"] #lightStudy { display:grid; grid-template-columns:auto minmax(0,1fr); align-content:start; column-gap:10px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-picker { grid-column:1 / -1; }
}

/* One UI font for Light's desktop and mobile layouts, including both themes. */
html.tenant-light { --light-ui-font:Inter,"Avenir Next","Segoe UI",sans-serif; --light-chrome-sage:#4d6d61; --light-desktop-banner:var(--light-chrome-sage); }

/* Larger Light portraits keep the same grid footprint by using their margin reserve. The ring sits 1px out from the
   photo (owner 2026-10-18: at 3px the ring read as too thick), and the photo takes the 2px a side it gave back, so the
   ring's outer edge and the card's layout stay where they were. */
@media screen {
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #pod .portrait {
    width:52px; max-width:52px; margin:2px 0; outline-offset:1px;
  }
}
@media screen and (max-width:560px) {
  html.tenant-light #tenantWorkspaceShell.workspace-portrait #pod .portrait {
    width:calc(clamp(28.6px,7.7vw,41.8px) + 4px); max-width:45.8px;
    margin:calc(4px - clamp(1.3px,.35vw,1.9px)) calc(2px - clamp(1.3px,.35vw,1.9px));
  }
}
@media screen {
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandrow { grid-column:1 / 3; grid-row:1; display:flex; flex-direction:row; justify-content:flex-start; gap:10px; padding:0; border:0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandrow::before { display:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandcopy { width:auto; max-width:100%; align-items:flex-start; text-align:left; gap:3px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .rh-brand-subtitle { color:#777c7b; font-size:9px; line-height:1.35; letter-spacing:.04em; text-align:left; max-width:100%; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .logo[data-tenant-logo] { position:static; flex:none; width:56px; height:42px; filter:brightness(.65) saturate(.85); }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #topRight { grid-column:3; grid-row:1; width:100%; min-width:0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #langCorner { grid-column:1; grid-row:2; width:100%; min-width:0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantSources a:first-child { grid-column:2; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantSources a:nth-child(2) { grid-column:3; }
 html.tenant-light #tenantWorkspaceShell #tenantSources a:not(.light-support-link)::before { content:''; display:block; flex:none; width:16px; height:18px; background:currentColor; mask:var(--light-link-icon) center/contain no-repeat; -webkit-mask:var(--light-link-icon) center/contain no-repeat; }
 html.tenant-light #tenantWorkspaceShell #tenantSources a { --light-link-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2012h8M8%2017h6%22%2F%3E%3C%2Fsvg%3E"); }
 html.tenant-light #tenantWorkspaceShell #tenantSources #tenantSupportLink::before { content:none; display:none; }
 html.tenant-light #topbar #acctMenu #profileSupportLink svg { fill:#dc3545; stroke:#dc3545; opacity:1; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar :is(#langBtn,#acctBtn) { min-height:38px; border-radius:8px; padding-inline:7px; background:rgba(255,255,255,.83) !important; color:#244b45; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn #acctName { font-size:12px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #pod { margin-top:12px; gap:8px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-card { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 12px; margin:0; background:rgba(250,251,245,.9); border:1px solid #d6ddd2; border-radius:15px; box-shadow:0 8px 20px #43544018; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-card::before { content:''; position:absolute; top:0; left:0; right:0; height:45px; background:var(--light-chrome-sage); border-radius:14px 14px 0 0; pointer-events:none; }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #lightStudyTitle::before,
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #lightStudyTitle::before { content:''; width:23px; height:23px; flex:none; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%3E%3Cpath%20d%3D%22M12%205c-3-2-6-2-9-1v15c3-1%206-1%209%201%203-2%206-2%209-1V4c-3-1-6-1-9%201Z%22%2F%3E%3Cpath%20d%3D%22M12%205v15%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%3E%3Cpath%20d%3D%22M12%205c-3-2-6-2-9-1v15c3-1%206-1%209%201%203-2%206-2%209-1V4c-3-1-6-1-9%201Z%22%2F%3E%3Cpath%20d%3D%22M12%205v15%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-picker { grid-column:1 / -1; margin:0; padding:14px 12px; gap:14px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-selection { gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-actions { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:10px; border-top:1px solid #d5dcd3; padding-top:10px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode { display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto auto auto; padding:10px; border:0; border-radius:10px; background:linear-gradient(135deg,#f0f3eb,#edf1e7); box-shadow:none; gap:5px 12px; min-width:0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode[data-mode="recite"] { background:linear-gradient(135deg,#f0f3eb,#edf1e7); border:0; padding:10px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode-icon { width:48px; height:48px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode-title { font:600 15px/1.3 var(--light-ui-font); margin:0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode .light-study-mode-caption { margin:0; font-size:12px; min-height:0; line-height:1.4; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-options { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 10px; font-size:12px; margin:3px 0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode[data-mode="recite"] .light-study-options { justify-content:flex-start; column-gap:28px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-options label { min-height:24px; gap:7px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action { margin-top:3px; min-height:40px; height:40px; font-size:12px; padding:6px 5px; border-radius:9px; white-space:normal; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action::after { flex:none; margin-left:6px; font-size:20px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab.active { box-shadow:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait[data-pane="study"] #lightStudy { display:block; }
}
@media screen and (max-width:360px) {
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar { gap:22px 6px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandrow { gap:6px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .logo[data-tenant-logo] { width:42px; height:32px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar h1 { font-size:16px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .rh-brand-subtitle { font-size:8px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantSources a::before { width:13px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-card { column-gap:6px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-picker-caption { font-size:9px; padding-right:10px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-picker { padding:12px 10px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-actions { gap:8px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode[data-mode="recite"] { padding:10px; }
}
@media screen {
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar :is(#langBtn,#acctBtn) { min-height:40px; height:40px; padding-block:5px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .langCap { font-size:9px; line-height:1.1; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #langLabel { font-size:13px; line-height:1.1; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .langGlobe { width:25px; height:25px; }
}
@media screen {
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait .light-study-mode>.light-study-hint { grid-column:1 / -1; }
}
@media screen {
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #topRight:has(#acctMenu.open),
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #langCorner:has(#langMenu.open) { z-index:60; }
}

/* Short windows must reserve space for Discussion's composer and tabs. */
@media screen {
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait[data-pane="chat"]>#stage {
    max-height:min(60dvh,max(100px,calc(var(--light-viewport-height,100dvh) - 200px)));
  }
}
html.tenant-light #shareInput::placeholder { color:#626b65; opacity:1; }
html.tenant-light[data-theme="dark"] #shareInput::placeholder { color:#b8c4bd; }
@media screen {
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar {
   grid-column:1 / -1; box-sizing:border-box; width:100%; margin:-52px 0 16px; padding:0 16px;
   display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:60px 14px 50px 16px auto;
   background:transparent; isolation:isolate;
 }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar::before { content:""; grid-column:1; grid-row:1 / 5; align-self:stretch; margin:0 -16px; background:var(--light-desktop-banner); border-radius:8px 8px 0 0; z-index:-1; pointer-events:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar .brandrow { grid-column:1; grid-row:1; align-self:center; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantCredit { grid-column:1; grid-row:2; margin:0; align-self:center; text-align:center; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar .metarow { display:contents; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources { grid-column:1; grid-row:5; width:280px; margin:12px 0; align-self:center; justify-self:end; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources a { white-space:nowrap; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar :is(#langCorner,#topRight) { grid-column:1; grid-row:3; margin-top:0; align-self:center; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar .rh-brand-subtitle,
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantCredit,
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantCredit a { color:#e0e9df; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar .logo[data-tenant-logo] { filter:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources a { background:#fff; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #acctBtn { background:#fff !important; color:#244b45; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar :is(#langBtn,#subLangBtn) { background:#fff !important; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #acctBtn .acct-usage-ring::before { background:#fff; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait { --light-start-sage:var(--light-chrome-sage); }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar { isolation:isolate; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar::before { content:""; grid-column:1 / -1; grid-row:1; align-self:stretch; margin:-12px -16px -5px; background:var(--light-chrome-sage); z-index:-1; pointer-events:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .rh-brand-subtitle { color:#e0e9df; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .logo[data-tenant-logo] { filter:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#lightResearchPanel,
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat.log-max { margin-right:8px !important; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)::after { margin-right:8px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#lightStudy { margin-left:8px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightResearchTitle { margin:-20px -20px 12px; padding:8px 20px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudyTitle { margin:-20px -20px 12px; padding:8px 20px; }
}
@media screen {
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs { background:var(--light-chrome-sage); border-top:1px solid #789087; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab { color:#dde7e1; background:transparent; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab.active { color:#fff; border-top-color:#fff; background:transparent; }
}

/* Keep the two header links compact, equal-width and side by side. */
html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #tenantSources {
 display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-column:1 / -1;
 width:min(260px,100%); justify-self:center; gap:8px;
}
html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #tenantSources a::before { width:13px; height:15px; }
html.tenant-light #tenantWorkspaceShell #tenantSources[hidden] { display:none; }
html.tenant-light[data-theme] #tenantWorkspaceShell #topbar #tenantSources:has(>a:only-child) { grid-template-columns:minmax(0,1fr); width:min(120px,100%); }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar { --light-account-width:124px; grid-template-columns:var(--light-account-width) minmax(0,1fr); column-gap:12px; }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandrow { grid-column:1 / -1; width:calc(100% - var(--light-account-width) - 12px); justify-self:start; }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #topRight { grid-column:2; width:var(--light-account-width); justify-self:end; }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #langCorner { width:var(--light-account-width); }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait>#stage>#topbar { row-gap:14px; column-gap:12px; }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar :is(.brandrow,.brandcopy) { min-width:0; }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .brandcopy { flex:1; }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .rh-brand-subtitle { white-space:normal; }
html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #tenantSources a { width:100%; align-self:stretch; }
@media screen {
 /* Keep language and both links together beneath the brand and account row. */
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #tenantSources {
   display:grid; grid-column:2; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(248px,100%); justify-self:end; gap:8px;
 }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #tenantSources a { grid-column:auto; grid-row:1; white-space:nowrap; font-size:12px; min-height:32px; height:32px; max-width:120px; align-self:center; padding:4px 2px; gap:3px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #tenantSources a::before { width:11px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #langBtn { width:100%; min-width:0; padding-inline:4px; gap:3px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn { min-height:44px; height:44px; padding-inline:6px; gap:7px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn .acct-usage-ring { width:28px; height:28px; flex-basis:28px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn .acctIcon svg { width:18px; height:18px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn .acctCaret { flex:none; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar .langGlobe { width:16px; height:20px; font-size:11px; }
}
@media screen and (max-width:360px) {
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar { --light-account-width:112px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #tenantSources a { font-size:11px; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #tenantSources a::before { display:none; }
 /* Beside Sources, the heart no longer fits; it drops like the Sources icon above. */
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #tenantSources a:not(:only-child) svg { display:none; }
}

/* Frosted profile menu, consistent with the Light popup surfaces. */
html.tenant-light #tenantWorkspaceShell #topbar #acctMenu,
html.tenant-light #tenantWorkspaceShell #topbar #langMenu {
 background:color-mix(in srgb,var(--surface) 65%,transparent) !important;
 -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
}

/* Keep mobile recording between the brand and account; dock the live timer in the tabs. */
@media screen {
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #topRight { display:contents; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctCorner { grid-column:2; grid-row:1; justify-self:end; width:var(--light-account-width); z-index:21; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #recCorner {
   grid-column:1 / -1; grid-row:1; justify-self:end; align-self:center; margin-right:calc(var(--light-account-width,104px) + 8px);
   width:72px; min-width:0; height:36px; z-index:21;
 }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #recCorner>button { padding:4px 3px; font-size:10px; min-width:0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #recCorner #recModeBtn { flex:0 0 26px; gap:0; }
 html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #recCorner #recBtn { flex:1; gap:2px; }
 html.tenant-light #tenantWorkspaceShell.workspace-portrait #recModeBtn .recmodeicon svg { width:13px; }
 html.tenant-light #tenantWorkspaceShell.workspace-portrait #recModeBtn .recCaret { width:8px; }
 html.tenant-light #tenantWorkspaceShell.workspace-portrait #recMenu { left:auto; right:0; }
 html.tenant-light[data-theme]:not(.tenant-recording-hidden):not(.recording-disabled) body.live #tenantWorkspaceShell.workspace-portrait #topbar:has(#recCorner:not([hidden])) .brandrow { width:calc(100% - var(--light-account-width,104px) - 88px); }
 html.tenant-light[data-theme]:not(.tenant-recording-hidden):not(.recording-disabled) body.live #tenantWorkspaceShell.workspace-portrait #topbar:has(#recCorner:not([hidden])) .logo[data-tenant-logo] { width:34px; height:25px; }
 html.tenant-light[data-theme]:not(.tenant-recording-hidden):not(.recording-disabled) body.live #tenantWorkspaceShell.workspace-portrait #topbar:has(#recCorner:not([hidden])) h1 { font-size:16px; letter-spacing:.12em; }
 html.tenant-light #tenantWorkspaceShell #topbar:has(#recMenu.open) { z-index:45; }
 html.tenant-light body #tenantWorkspaceShell.workspace-portrait>#stage:has(#recMenu.open) { z-index:5; }
}

/* Desktop source and support links sit below the sage banner. */
@media screen {
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources { display:flex; flex-direction:row; justify-content:center; gap:24px; }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources a:any-link { width:auto; min-height:28px; padding:4px 0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--text); font-size:14px; gap:7px; white-space:nowrap; transition:transform .16s ease; }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources a::before { width:18px; height:20px; }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources a:hover { background:transparent; text-decoration:none; transform:scale(1.08); }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources a:focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:2px; }
}
@media (prefers-reduced-motion:reduce) {
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #topbar #tenantSources a:any-link { transition:none; }
}

/* Desktop study headings reuse the mobile book and recitation icons. */
@media screen {
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #lightStudyTitle { display:flex; align-items:center; gap:10px; }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) .light-study-mode { grid-template-columns:24px minmax(0,1fr); column-gap:10px; }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) .light-study-mode>* { grid-column:1 / -1; }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) .light-study-mode-icon { display:block; grid-column:1; grid-row:1; align-self:center; width:24px; height:24px; color:var(--text); }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) .light-study-mode-icon svg { display:block; width:100%; height:100%; }
 html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) .light-study-mode-title { grid-column:2; grid-row:1; align-self:center; }
}

/* Dark colors for the shared Light layout above. Geometry stays in the shared rules. */
html.tenant-light[data-theme="dark"] {
 --light-chrome-sage:#eeeef3; --light-desktop-banner:linear-gradient(135deg,#fff 0%,#eeeef3 45%,#c6cbd3 100%);
 --light-button-background:#cdd3d7;
 --light-white-gradient:linear-gradient(160deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.02) 45%,rgba(68,78,90,.12) 100%);
 --light-header-background:linear-gradient(135deg,#27363b 0%,#152126 55%,#0c1519 100%);
 --light-accent-ink:#3d474b; --light-accent-hover:#d6dce0;
 --huddle-dark-start-green:#cdd3d7; --huddle-dark-start-green-hover:#d6dce0;
 --huddle-dark-meeting-green:#4d6d61; --huddle-dark-meeting-green-hover:#405d52;
 --huddle-dark-meeting-off-green:#354e44; --huddle-dark-meeting-off-green-hover:#405d52;
}
@media screen {
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #topbar :is(#langBtn,#subLangBtn,#acctBtn),
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #topbar :is(#langBtn,#subLangBtn,#acctBtn) {
   background:var(--light-button-background) var(--light-white-gradient) !important; color:var(--light-accent-ink); border-color:#bac3c9;
 }
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn .acct-usage-ring::before,
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #topbar #acctBtn .acct-usage-ring::before { background:var(--light-button-background); }
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait { --light-reference-green:#eeeef3; --light-start-sage:var(--light-button-background); }
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #pod .reg {
   background:var(--control-gradient); border-color:var(--border); box-shadow:0 4px 12px rgba(0,0,0,.32);
 }
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait .light-study-card {
   background:var(--surface); border-color:var(--border); box-shadow:0 8px 20px rgba(0,0,0,.3);
 }
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #lightStudy :is(.light-surah-trigger,#lightStudyScope) {
   background:var(--control-gradient); color:var(--text); border-color:var(--border);
 }
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait .light-study-actions { border-color:var(--border); }
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait .light-study-mode,
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait .light-study-mode[data-mode="recite"] { background:var(--resume-row-bg); }
 html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs {
   background:var(--light-header-background); border-color:rgba(255,255,255,.16);
   box-shadow:0 -6px 20px rgba(0,0,0,.32),0 -1px 10px rgba(255,255,255,.07);
 }
}

/* Replace Light's green accents with white; retain its existing surfaces and layout. */
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell { --tenant-workspace-accent:#eeeef3; }
html.tenant-light[data-theme="dark"] :is(#start,#mute,#modeBtn) { color:var(--light-accent-ink); }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action:hover { background:var(--light-accent-hover); }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell :is(#lightStudy,#lightResearchPanel) :is(.light-study-action,.light-study-submit):hover,
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action:hover { color:var(--light-accent-ink); }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) :is(#lightResearchTitle,#lightStudyTitle) { background:#4d6d61; color:#fff; }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait :is(#lightStudyTitle,.light-study-picker-caption) { color:#f4f5f7; }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #topbar::before,
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #topbar::before { background:var(--light-header-background); }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #topbar :is(h1,.rh-brand-subtitle,#tenantCredit,#tenantCredit a),
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #topbar :is(h1,.rh-brand-subtitle) { color:#f4f5f7; }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #topbar .logo[data-tenant-logo],
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #topbar .logo[data-tenant-logo] {
 filter:drop-shadow(0 0 4px rgba(255,255,255,.55)) drop-shadow(0 0 12px rgba(255,255,255,.25)) !important;
}
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #topbar h1,
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #topbar h1 { text-shadow:0 0 7px rgba(255,255,255,.55),0 0 20px rgba(255,255,255,.3); }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell #topbar :is(#langLabel,#subLangLabel,.langCap,.langCaret) { color:var(--light-accent-ink); }

/* The account name also receives an inline chat-identity color from paintMyName. */
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell #topbar #acctBtn #acctName { color:var(--light-accent-ink) !important; }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab { color:#f4f5f7; text-shadow:0 0 7px rgba(255,255,255,.35); }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab:hover { background:rgba(255,255,255,.06); }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab.active {
 color:#fff; border-top-color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.10),transparent);
 text-shadow:0 0 6px rgba(255,255,255,.65),0 0 14px rgba(255,255,255,.28);
}
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab svg { filter:drop-shadow(0 0 4px rgba(255,255,255,.35)); }
html.tenant-light[data-theme="dark"] #topbar #acctBtn .acct-usage-ring:not([data-state="warning"]):not([data-state="danger"]) { --usage-color:var(--light-accent-ink); }
html.tenant-light[data-theme="dark"] #liveDot { background:radial-gradient(circle at 38% 34%,#fff,#eeeef3 60%,#b7b9c0); animation-name:lightWhiteLed; }
html.tenant-light[data-theme="dark"] #tenantGate .light-gate-banner { background:var(--light-chrome-sage); }
html.tenant-light[data-theme="dark"] #tenantGate .light-gate-banner .light-gate-book { stroke:var(--light-accent-ink); }
html.tenant-light[data-theme="dark"] #tenantGate :is(.tg-signin,.tg-password button[type="submit"]) { color:var(--light-accent-ink); }
html.tenant-light[data-theme="dark"] #tenantGate :is(.tg-signin,.tg-password button[type="submit"]):hover { border-color:var(--light-chrome-sage); }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait .light-study-card::before { background:none; }
html.tenant-light[data-theme="dark"] #tenantGate .light-gate-banner { background-image:var(--light-desktop-banner); }

/* Continuous dividers beneath the study and conversation section headings. */
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #lightSurahLabel,
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell :is(.light-study-mode-title,.light-conversation-title) {
 border-bottom:1px solid rgba(244,245,247,.38); padding-bottom:8px;
}

/* Keep the Surah selector and its searchable menu white within the dark study pane. */
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-surah-picker {
 --surface:#fff; --text:#3d474b; --ink:#3d474b; --muted:#626a6e; --placeholder-ink:#626a6e;
 --border:#d6d8de; --focus:#626a6e; --tenant-workspace-accent:#626a6e;
 --control-gradient:linear-gradient(160deg,#fff 0%,#eeeef3 45%,#d0d4db 100%);
 --dialog-gradient:#fff; color-scheme:light;
}
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-surah-filter::placeholder { color:var(--muted); opacity:1; }

/* Keep the responsive welcome landscape clear; frost only the inactive UI. */
html.tenant-light body.ftue #tenantWorkspaceShell.workspace-portrait::before {
 -webkit-backdrop-filter:none; backdrop-filter:none;
}
html.tenant-light body.ftue #tenantWorkspaceShell.workspace-portrait:not([data-pane="study"]) :is(#pod,#status,#chat,#tenantPaneTabs) {
 filter:blur(14px) saturate(.78);
}

/* Available Clear selection actions use dark sage in both themes. */
html.tenant-light[data-theme] #tenantWorkspaceShell #lightStudy .light-study-clear:enabled {
 background:#354e44; border-color:#354e44; color:#fff;
}
html.tenant-light[data-theme] #tenantWorkspaceShell #lightStudy .light-study-clear:enabled:hover {
 background:#2b4038; border-color:#2b4038; color:#fff;
}

/* Enabled selectors match the other pale controls in the dark study pane. */
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-surah-trigger:enabled,
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell #lightStudyScope:enabled {
 --surface:var(--light-button-background); --text:#3d474b; --border:#bac3c9;
 --control-gradient:var(--light-button-background) var(--light-white-gradient);
 color-scheme:light;
}

/* Hide the mobile study descriptions while retaining their layout space. */
html.tenant-light #tenantWorkspaceShell.workspace-portrait :is(.light-study-mode-caption,.light-study-picker-caption) {
 visibility:hidden;
}
html.tenant-light[data-theme="dark"] body.live #tenantWorkspaceShell :is(#mute.muted,#modeBtn.texton) {
 background:var(--huddle-dark-meeting-off-green) !important; border-color:var(--huddle-dark-meeting-off-green);
}
html.tenant-light[data-theme="dark"] body.live #tenantWorkspaceShell :is(#mute,#modeBtn):hover {
 background:var(--huddle-dark-meeting-green-hover) !important; border-color:var(--huddle-dark-meeting-green-hover);
}
html.tenant-light[data-theme="dark"] body.live #tenantWorkspaceShell :is(#mute.muted,#modeBtn.texton):hover {
 background:var(--huddle-dark-meeting-off-green-hover) !important; border-color:var(--huddle-dark-meeting-off-green-hover);
}

/* Recorded listening is usable before starting a paid Light discussion. */
html.tenant-light body.ftue #tenantWorkspaceShell>#lightStudy,
html.tenant-light body.ftue #tenantWorkspaceShell>#tenantPaneTabs {
 position:relative; z-index:41; filter:none !important;
}
html.tenant-light body.ftue #tenantWorkspaceShell>#chat:has(.light-free-verse),
html.tenant-light body.ftue #tenantWorkspaceShell.light-free-listening>#chat {
 position:relative; z-index:41 !important; filter:none !important;
}
html.tenant-light[data-theme] body #tenantWorkspaceShell.light-free-listening #stage #topctrls {
 display:flex !important; position:relative; z-index:41; filter:none !important;
 width:min(100%,480px); margin:8px auto 0 !important; padding-bottom:8px;
}
html.tenant-light[data-theme] body #tenantWorkspaceShell.light-free-listening.workspace-portrait>#stage {
 max-height:none;
}
html.tenant-light #tenantWorkspaceShell.light-free-listening #topctrls>:not(#lightListeningPlayer),
html.tenant-light #tenantWorkspaceShell.light-free-listening #status { display:none !important; }
html.tenant-light #tenantWorkspaceShell .light-listening-player {
 flex:1; min-width:0; width:100%; margin:0; padding:0; color:var(--text); text-align:center;
}
html.tenant-light #tenantWorkspaceShell .light-listening-player[hidden],
html.tenant-light #tenantWorkspaceShell .light-listening-player [hidden] { display:none !important; }
html.tenant-light #tenantWorkspaceShell .light-listening-player .light-study-hint { margin:4px 0 8px; font-size:12px; }

/* Same three-column geometry and sage/red controls as the live meeting row. */
html.tenant-light #tenantWorkspaceShell .light-listening-controls {
 display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr); align-items:center; gap:6px;
}
html.tenant-light #tenantWorkspaceShell .light-session-button {
 width:100%; min-width:0; min-height:44px; padding:10px 8px; gap:4px;
 border:1px solid color-mix(in srgb,var(--islamic-accent,#81745d) 44%,transparent); border-radius:10px;
 background:#53685e; color:#fff; box-shadow:0 2px 7px rgba(16,25,29,.18); letter-spacing:0;
}
html.tenant-light #tenantWorkspaceShell .light-session-button .btnlbl { white-space:normal; line-height:1.2; }
html.tenant-light #tenantWorkspaceShell .light-session-button svg { flex:none; width:1.2em; height:1.2em; }

/* The Surah action occupies the Speech On/Off slot at the same size. */
html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) .light-listening-controls {
 grid-template-columns:130px minmax(0,1fr) 130px; zoom:.98;
}
html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-listening-controls { gap:8px; }
html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #lightListeningAskAyah {
 width:130px; height:42px; min-height:0; padding:12px 15px; gap:7px;
}
html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) #lightListeningAskAyah svg { width:16px; height:16px; }
html.tenant-light #tenantWorkspaceShell #lightListeningAskAyah .btnlbl { white-space:nowrap; }
html.tenant-light #tenantWorkspaceShell #lightQuestionStatus { margin:4px 12px; font-size:12px; }
html.tenant-light #tenantWorkspaceShell #lightQuestionStatus[hidden] { display:none; }
html.tenant-light #tenantWorkspaceShell .light-session-button:enabled:hover { background:#62796e; }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-session-button {
 background:var(--huddle-dark-meeting-green); border-color:var(--huddle-dark-meeting-green);
}
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-session-button:enabled:hover { background:var(--huddle-dark-meeting-green-hover); }
html.tenant-light #tenantWorkspaceShell #lightListeningStop {
 background:#9c4038 linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 46%,rgba(0,0,0,.12));
}
html.tenant-light #tenantWorkspaceShell #lightListeningStop:hover { background-color:#b34d44; }
html.tenant-light #tenantWorkspaceShell .light-session-button:disabled { opacity:.45; }
html.tenant-light #tenantWorkspaceShell.workspace-portrait .light-session-button {
 height:44px; font-size:clamp(9px,2.5vw,12px); padding:10px clamp(4px,1vw,8px);
}
html.tenant-light #tenantWorkspaceShell .light-ayah-question {
 display:block; margin-top:6px; padding:4px 10px; font-size:12px; min-height:32px;
 background:#edf3ef; color:#294b3c; border:1px solid #9cb4a5; border-radius:8px; box-shadow:none;
}
html.tenant-light #tenantWorkspaceShell .light-ayah-question:enabled:hover { background:#dce9e0; }
html.tenant-light #tenantWorkspaceShell .light-ayah-question:focus-visible { outline:2px solid #54846b; outline-offset:2px; }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-ayah-question { background:#293e35; color:#e2eee6; border-color:#6d907a; }
html.tenant-light[data-theme="dark"] #tenantWorkspaceShell .light-ayah-question:enabled:hover { background:#395345; }
html.tenant-light #tenantWorkspaceShell .light-listening-player strong { display:block; font-size:13px; }
html.tenant-light #lightStudy .light-listening-cost { grid-column:1 / -1; }

/* Paid study controls stay visible when credits run out; recordings remain usable. */
html.tenant-light .light-out-of-credits .light-study-mode[data-mode="meaning"],
html.tenant-light .light-out-of-credits .light-study-submit { opacity:.45; }
html.tenant-light .light-credits-dialog {
 box-sizing:border-box; width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:24px;
 border:1px solid var(--border); border-radius:16px; background:var(--dialog-gradient,var(--surface)); color:var(--text);
 font:400 14px/1.5 var(--light-ui-font); text-align:start; overflow:auto; box-shadow:0 20px 60px #0006;
}
html.tenant-light .light-credits-dialog::backdrop { background:#0008; }
html.tenant-light .light-credits-dialog h2 { margin:0 0 14px; font-size:20px; }
html.tenant-light .light-credits-dialog .light-credit-balance { margin:0 0 20px; }
html.tenant-light .light-credits-dialog .light-credit-balance > * { display:block; }
html.tenant-light .light-credits-dialog .light-credit-summary { font-weight:600; }
html.tenant-light .light-credits-dialog .light-credit-info,
html.tenant-light .light-credits-dialog .light-credit-renewal { margin-top:12px; }
html.tenant-light .light-credits-close { display:block; margin-inline-start:auto; min-height:40px; padding:8px 16px; background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:8px; font:inherit; }
html.tenant-light .light-credits-dialog .light-credit-own-ai { margin:0 0 20px; padding-top:14px; border-top:1px solid var(--border); }
html.tenant-light .light-credits-dialog .light-credit-own-ai p { margin:0 0 10px; }
html.tenant-light .light-credit-own-ai-button { min-height:40px; padding:8px 16px; background:transparent; color:var(--text); border:1px solid var(--border); border-radius:8px; font:inherit; font-weight:600; cursor:pointer; }
html.tenant-light .light-credit-own-ai-button:hover { background:var(--surface-2); }

/* Schools of law: five checkboxes right above the message box (app-light-study.js), saved on the profile.
   The title has its own line and the five fit one line on a phone. */
html.tenant-light #lightFiqhSchools { display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; flex:none; min-width:0; padding:6px 12px 2px; font-size:13px; line-height:1.3; }
html.tenant-light #lightFiqhSchools .light-fiqh-title { flex-basis:100%; font-weight:600; white-space:nowrap; }
html.tenant-light #lightFiqhSchools .light-fiqh-school { display:inline-flex; align-items:center; gap:4px; min-height:28px; cursor:pointer; white-space:nowrap; }
html.tenant-light #lightFiqhSchools input { width:16px; height:16px; margin:0; accent-color:var(--tenant-workspace-accent,#5d7b71); }
html.tenant-light #lightFiqhSchools .light-fiqh-status { flex-basis:100%; opacity:.8; }

/* A short screen (320x568) leaves ~170px for the whole conversation: two lines here pushed the message box
   under the tab bar. One line that scrolls sideways keeps the box where it was. */
@media (max-height:600px) {
  html.tenant-light #lightFiqhSchools { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-top:4px; }
  html.tenant-light #lightFiqhSchools::-webkit-scrollbar { display:none; }
  html.tenant-light #lightFiqhSchools :is(.light-fiqh-title,.light-fiqh-status) { flex-basis:auto; flex-shrink:0; }
}
@media screen {
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait,
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait[data-pane="study"] {
    --light-drawer-width:min(440px,calc(100% - 44px));
    grid-template-rows:minmax(0,max-content) max-content minmax(0,1fr);
    grid-template-columns:minmax(0,1fr);   /* a band of chips scrolling on one line must not widen the column */
  }
  /* The banner keeps its size with the drawer open, as with the Conversation. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait[data-pane="study"]>#stage {
    max-height:min(60dvh,max(100px,calc(var(--light-viewport-height,100dvh) - 200px)));
  }
  /* Tabs at the top of the conversation area: the active one filled sage, the other cream, icons beside the names. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#tenantPaneTabs {
    grid-row:2; position:relative; bottom:auto; z-index:4; display:flex; align-items:stretch; gap:0;
    margin:0; padding:0; border:0; border-top:1px solid rgba(77,109,97,.28); border-radius:0;   /* edge to edge, square (owner 2026-10-18) */
    background:#f3eee5; overflow:hidden; box-shadow:none;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab {
    flex-direction:row; gap:10px; min-height:46px; padding:0 10px; border:0; border-radius:0; box-shadow:none;
    background:transparent; color:#2c443b; font:600 13px/1 var(--light-ui-font); letter-spacing:.09em; text-transform:uppercase;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab.active {
    background:linear-gradient(180deg,#55776a,#4d6d61); color:#fff; border:0; text-shadow:none;
    box-shadow:inset 0 -2px 0 rgba(246,240,226,.75);   /* a line under the active tab, over the green band below it */
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab svg { flex:none; width:22px; height:22px; filter:none; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#tenantPaneTabs { background:rgba(19,30,34,.96); border-color:rgba(255,255,255,.1); }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab { color:#e3e7ea; text-shadow:none; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab.active { background:linear-gradient(180deg,#4d6d61,#405d52); color:#fff; }
  /* The Conversation always fills the pane, under the drawer too; its tab names it, so no heading. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat:is(.log-max,.log-max.positioned) { grid-row:3; display:flex !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>.light-conversation-title { display:none; }
  /* The desktop's page (owner 2026-10-18): the yellowed paper, inside the illuminated border at three quarters of its
     desktop size. The border is a layer over the scrolling transcript (app-light-study.js placePageFrame), so the text
     passes under it. The right padding also keeps the text clear of the drawer handle (DeepDiveLM lets its handle lie
     over the book, but here it would hide the ends of the panel's lines). */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat #log {
    --ld-paper:#f5ead4; --ld-paper-light:rgba(255,253,247,.35); --log-ink:#403629;
    box-sizing:border-box; margin:8px 10px 6px; padding:38px 50px 38px 38px; border:0; border-radius:6px;
    color:var(--log-ink); background-color:var(--ld-paper);
    background-image:
      linear-gradient(90deg,rgba(126,110,84,.07),transparent 7%,transparent 93%,rgba(126,110,84,.06)),
      radial-gradient(ellipse at 24% 30%,var(--ld-paper-light),transparent 65%),
      radial-gradient(ellipse at 80% 75%,rgba(165,147,116,.06),transparent 60%);
    box-shadow:inset 0 0 18px rgba(126,110,84,.06);
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat #log { --ld-paper:#081010; --ld-paper-light:rgba(240,243,245,.018); --log-ink:#e2e5e7; }
  html.tenant-light #tenantWorkspaceShell .light-page-frame { display:none; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>.light-page-frame:not([hidden]) {
    --frame-scale:.75; --frame-edge:0px;   /* flush with the transcript's box: no rim for scrolling text to show in */
    display:block; position:absolute; z-index:2; margin:0; pointer-events:none;
    top:calc(var(--frame-top,0px) + var(--frame-edge)); left:calc(var(--frame-left,0px) + var(--frame-edge));
    width:calc((var(--frame-width,0px) - 2 * var(--frame-edge)) / var(--frame-scale));
    height:calc((var(--frame-height,0px) - 2 * var(--frame-edge)) / var(--frame-scale));
    transform:scale(var(--frame-scale)); transform-origin:0 0;
    background:url("/light-quran-frame.svg?v=1") 0 0 / 100% 100% no-repeat;
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>.light-page-frame:not([hidden]) { background-image:url("/light-quran-frame-dark.svg?v=1"); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat #log:empty::before {
    padding-left:36px; min-height:26px; line-height:26px;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232c443b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.5%208.5%200%200%201-8.5%208.5H4l-3%202V11.5A8.5%208.5%200%200%201%209.5%203h3a8.5%208.5%200%200%201%208.5%208.5Z%22%2F%3E%3Cpath%20d%3D%22M7%2010h9M7%2014h6%22%2F%3E%3C%2Fsvg%3E") left center/26px no-repeat;
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat #log:empty::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4bec5%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.5%208.5%200%200%201-8.5%208.5H4l-3%202V11.5A8.5%208.5%200%200%201%209.5%203h3a8.5%208.5%200%200%201%208.5%208.5Z%22%2F%3E%3Cpath%20d%3D%22M7%2010h9M7%2014h6%22%2F%3E%3C%2Fsvg%3E"); }
  /* The schools of law: chips on the green band that continues the active tab. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] {
    /* One line of chips (owner 2026-10-18): "Fiqh" and five compact chips fit from 360px up. */
    flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 5px; min-width:0; margin:0; padding:8px 12px 9px;
    border-radius:0; background:linear-gradient(180deg,#4d6d61,#476759); color:#fff; font-size:12px; line-height:1;
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] { background:linear-gradient(180deg,#405d52,#37524a); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-title {
    flex:none; flex-basis:auto; margin-inline-end:2px; padding-inline-start:7px; border-inline-start:1px solid rgba(255,255,255,.4);
    color:#fff; font-size:15px; font-weight:700; letter-spacing:.01em; white-space:nowrap;   /* "Fiqh", read at a glance (owner 2026-10-18) */
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school {
    position:relative; flex:none; display:inline-flex; align-items:center; gap:3px; box-sizing:border-box; height:27px; min-height:27px;
    padding:0 7px 0 5px; border-radius:999px; background:linear-gradient(180deg,#6f9485,#638879); color:#fff; font-weight:500; white-space:nowrap;
    box-shadow:none; cursor:pointer;   /* on: a lighter green with a white tick, as on the desktop and in dark mode (owner 2026-10-19) */
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school::before {
    content:""; flex:none; width:11px; height:11px; background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012.5l5%205L20%206.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012.5l5%205L20%206.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:not(:has(input:checked)) { background:transparent; color:#eef4f0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:not(:has(input:checked))::before { background:transparent; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:has(input:focus-visible) { outline:2px solid #fff; outline-offset:2px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-status { flex-basis:100%; color:#fff; font-size:12.5px; line-height:1.35; opacity:.92; }
  /* The Conversation's text size (owner 2026-10-19): an "Aa" chip in the reading surface's top-right corner, over the
     frame's corner ornament, where the transcript keeps no text (app-light-study.js placeTextSize sets --aa-*). The
     drawer handle's frosted glass, on every layout. */
  html.tenant-light #tenantWorkspaceShell>#chat>.light-text-size:not([hidden]) {
    position:absolute; z-index:3; top:var(--aa-top,8px); left:var(--aa-right,100%); transform:translateX(-100%);
    display:grid; place-items:center; box-sizing:border-box; width:34px; height:30px; min-width:0; min-height:0; margin:0; padding:0;
    border:1px solid rgba(255,255,255,.55); border-radius:8px; color:#283348; cursor:pointer;
    background:linear-gradient(160deg,rgba(251,246,237,.82) 0%,rgba(246,239,228,.76) 52%,rgba(234,223,206,.82) 100%);
    -webkit-backdrop-filter:blur(10px) saturate(1.15); backdrop-filter:blur(10px) saturate(1.15);
    box-shadow:0 3px 10px #14213926,0 1px 3px #14213914; font:600 15px/1 var(--light-ui-font); letter-spacing:0; text-transform:none; text-shadow:none;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell>#chat>.light-text-size:not([hidden]) {
    border-color:rgba(255,255,255,.16); color:#f4f5f7;
    background:linear-gradient(160deg,rgba(20,30,35,.78) 0%,rgba(13,22,26,.72) 52%,rgba(5,10,13,.8) 100%);
  }
  html.tenant-light #tenantWorkspaceShell>#chat>.light-text-size:hover { box-shadow:0 4px 12px #14213933,0 1px 4px #1421391c,inset 0 0 0 30px color-mix(in srgb,currentColor 9%,transparent); }
  html.tenant-light #tenantWorkspaceShell>#chat>.light-text-size:active { transform:translateX(-100%) scale(.96); }
  html.tenant-light #tenantWorkspaceShell>#chat>.light-text-size:focus-visible { outline:2px solid #4d6d61; outline-offset:2px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#lightStudy::-webkit-scrollbar { display:none; }
  /* "Select a Surah" runs edge to edge across the top of the drawer, square (owner 2026-10-18). */
  /* The study card fills the drawer, so its green header band (the card's ::before) meets both edges, square. */
  /* Rows pack at the top: stretched to the drawer's height, the title row outgrew the 45px band (its text sat on the
     band's lower edge) and the picker grew gaps the branch could not span. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy>.light-study-card {
    box-sizing:border-box; min-height:100%; margin:0 !important; padding-bottom:12px; border:0; border-radius:0 !important; box-shadow:none;
    align-content:start;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy>.light-study-card::before { border-radius:0 !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy #lightStudyTitle { grid-column:1 / -1; margin:0 !important; border-radius:0 !important; }
  /* Tighter inside the drawer, so Recite is in view without scrolling on a 390x844 phone (owner 2026-10-18). */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker { padding:10px 10px; gap:10px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode { grid-template-columns:40px minmax(0,1fr); column-gap:10px; padding:8px 10px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-icon { width:40px; height:40px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-icon svg { width:23px; height:23px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options { margin-top:2px; row-gap:6px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options label { min-height:26px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-listening-cost { margin:0; font-size:12px; line-height:1.35; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-title { padding-bottom:3px; }
  /* Surah's branch, as on the desktop (owner 2026-10-18): a node beside "Surah", and from it a line down a 34px gutter
     with a rounded elbow into the icon circle of Meaning & Context and of Recitation. The line is x=21-23px of the
     picker's padding box all the way down (content edge 34px, so -13px from the content and from each card).
     The trunk above the cards spans the grid rows from the fields to the sections (as on the desktop), so it reaches
     the node whatever the fields' height. Rows are spaced by margins, not row-gap, so a hidden row adds nothing. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy { --ld-branch:rgba(85,119,106,.6); }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy { --ld-branch:rgba(255,255,255,.32); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker {
    --lb-gap:10px; position:relative; padding-left:34px;
    grid-template-columns:minmax(0,1fr); grid-template-areas:"fields" "clear" "empty" "actions" "status"; row-gap:0;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-selection { grid-area:fields; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker>.light-study-clear { grid-area:clear; margin-top:var(--lb-gap); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker>.light-study-hint:not(#lightPassageStatus) { grid-area:empty; margin-top:var(--lb-gap); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker>#lightPassageStatus { grid-area:status; margin-top:var(--lb-gap); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker>.light-study-actions {
    grid-area:actions; margin-top:var(--lb-gap); padding-top:var(--lb-gap); border-top-width:1px;
  }
  /* The node: a 12px ring centred on the line (x=22). */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker::after {
    content:""; position:absolute; left:16px; top:14px; box-sizing:border-box; width:12px; height:12px; border-radius:50%;
    box-shadow:inset 0 0 0 2px var(--ld-branch); pointer-events:none;
  }
  /* The trunk: from inside the node's ring (14px into the content box, where the ring ends at 16px) to the top of the
     first card, which is the actions' margin, border and padding below the actions row's start line. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker::before {
    content:""; position:absolute; grid-column:1; grid-row:fields-start / actions-start; left:-13px; width:2px;
    top:14px; bottom:calc(-2 * var(--lb-gap) - 1px); background:var(--ld-branch); pointer-events:none;
  }
  /* Each elbow runs on to its icon circle, level with the circle's centre (card padding 8px + half of 40px), and the
     circle sits over the line's last 2px, so they meet without a seam. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode::after {
    content:""; position:absolute; left:-13px; top:0; box-sizing:border-box; width:25px; height:29px; pointer-events:none;
    border-left:2px solid var(--ld-branch); border-bottom:2px solid var(--ld-branch); border-bottom-left-radius:10px;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-icon { position:relative; z-index:1; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode[data-mode="meaning"]::before {
    content:""; position:absolute; left:-13px; top:0; bottom:-10px; width:2px; background:var(--ld-branch); pointer-events:none;
  }
  /* The study actions are the desktop's teal pills (owner 2026-10-18). */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action {
    border:0 !important; border-radius:999px !important; background:linear-gradient(180deg,#176d8e,#2b8ea9) !important; color:#fff !important;
    box-shadow:0 3px 9px rgba(23,109,142,.24),inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-action:enabled:hover {
    background:linear-gradient(180deg,#135f7c,#247e97) !important; color:#fff !important;
  }
  /* Meaning & Context and Recitation side by side, as in the owner's card mockup (2026-10-18), with the teal pills
     above: in each, icon and title, the description, the action across the card, a rule, then "Include in discussion" /
     "Include with recitation" over the options, one a line. The cards share their rows (subgrid), and so do the options,
     so the actions line up whatever the titles and descriptions wrap to, and the options sit row by row (Tafsir beside
     Translate, and so on). Each option keeps to one line: below 390px of cards the short labels (History,
     Interpretations) stand in, as the drawer's options did before. The DOM keeps the desktop's order (options before the
     action); the rows place them here. The descriptions are the desktop's; the short mobile captions stay hidden.
     The cards take back most of the branch's gutter, stopping just clear of the drawer handle, which rides the
     drawer's edge at the height of the actions. */
  html.tenant-light .light-study-include { display:none; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker>.light-study-actions {
    position:relative; container:light-study-cards / inline-size; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(9,auto); gap:0 6px;
    margin-left:-8px; margin-right:-4px; padding-top:18px; border-top:0;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode {
    grid-row:span 9; grid-template-columns:22px minmax(0,1fr); grid-template-rows:subgrid; grid-template-areas:none;
    gap:0 7px; padding:10px 8px; border:1px solid rgba(85,119,106,.18); border-radius:12px;
    background:rgba(251,250,246,.78); box-shadow:0 2px 8px rgba(64,60,50,.06);
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>* { grid-column:1 / -1; min-width:0; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-icon {
    grid-column:1 !important; grid-row:1; align-self:center; width:22px; height:22px; border-radius:0; background:transparent; color:#2b5a4b;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-icon svg { width:22px; height:22px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-title {
    grid-column:2 !important; grid-row:1; align-self:center; margin:0; padding:0; font:700 15px/1.2 var(--light-ui-font); color:#1f4a3c;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-study-mode-caption { display:none; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-study-intro.light-study-desktop-copy {
    grid-row:2; display:block; margin:6px 0 0; font-size:12px; line-height:1.35; color:#5f6b68;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-study-action {
    grid-row:3; align-self:end; margin-top:8px; padding:4px 8px; white-space:nowrap; font-size:12px; line-height:1.15; letter-spacing:.02em;
  }
  /* The passage status (and, without the meeting controls, the recorded player) moves under the action pressed:
     its own row, so it never lands on another. Empty, it takes no room. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>:is(#lightPassageStatus,.light-listening-player) { grid-row:4; margin:6px 0 0; font-size:12px; line-height:1.35; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>#lightPassageStatus:empty { margin:0; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-study-action::after { margin-left:5px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-include {
    grid-row:5; display:block; margin:10px 0 0; padding-top:8px; border-top:1px solid rgba(85,119,106,.2);
    font:600 12px/1.3 var(--light-ui-font); color:#2f6653;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options {
    grid-row:6 / span 3; display:grid; grid-template-rows:subgrid; justify-content:stretch; gap:0; margin:4px 0 0; font-size:12.5px;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options label { align-items:flex-start; min-height:26px; gap:8px; padding-top:3px; line-height:1.3; color:#3d4a46; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options .light-study-desktop-copy { display:none; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options .light-study-mobile-copy { display:inline; }
  @container light-study-cards (min-width:390px) {
    html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options .light-study-desktop-copy { display:inline; }
    html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options .light-study-mobile-copy { display:none; }
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options>.light-study-hint { margin:2px 0 0; font-size:11.5px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-listening-cost { grid-row:9; margin:6px 0 0; font-size:11.5px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy input[type="checkbox"] { flex:none; width:18px; height:18px; margin:0; border-radius:4px; }
  /* The branch: the trunk from the node runs on to just above the cards and turns along their tops, with a drop into
     the middle of each. The picker's line (x=21-23px of its padding box) is x=-5px of the actions. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker::before { bottom:calc(-1 * var(--lb-gap)); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-picker>.light-study-actions::before {
    content:""; position:absolute; left:-5px; top:0; box-sizing:border-box; width:calc(75% - 2.5px); height:10px; pointer-events:none;
    border-left:2px solid var(--ld-branch); border-bottom:2px solid var(--ld-branch); border-bottom-left-radius:8px;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode[data-mode="meaning"]::before { content:none; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode::after {
    left:calc(50% - 1px); top:-8px; width:2px; height:8px; border:0; border-radius:0; background:var(--ld-branch);
  }
  /* The far card's drop is the line's rounded end; right-to-left, the far card is Meaning. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy:not([dir="rtl"]) .light-study-mode:last-child::after,
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #lightStudy[dir="rtl"] .light-study-mode:first-child::after {
    left:calc(50% - 9px); top:-10px; width:10px; height:10px; background:none;
    border-top:2px solid var(--ld-branch); border-right:2px solid var(--ld-branch); border-top-right-radius:8px;
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode { border-color:rgba(255,255,255,.1); background:var(--resume-row-bg); box-shadow:none; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-icon { color:#e3e7ea; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-title { color:#f4f5f7; border-bottom:0; padding-bottom:0; }   /* the rule over "Include" is the card's only line */
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-study-intro.light-study-desktop-copy { color:#aeb8bd; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-include { color:#9fc9b6; border-top-color:rgba(255,255,255,.12); }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options label { color:#dfe4e6; }
  html.tenant-light.light-ui-urdu body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-include { font-size:14px; line-height:1.7; }
  html.tenant-light.light-ui-urdu body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode-title { font-size:15px; line-height:1.6; }
  html.tenant-light.light-ui-urdu body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-options span { font-size:13.5px !important; line-height:1.7; }
  html.tenant-light.light-ui-urdu body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-study-intro { font-size:13px !important; line-height:1.75 !important; }
  html.tenant-light.light-ui-urdu body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-study-hint { font-size:12.5px !important; line-height:1.7 !important; }
  /* Seek Wisdom, Speech and the mic are the desktop's teal pills too, a deeper teal when off; End its red pill (owner
     2026-10-18). */
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #start,
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #topctrls :is(#modeBtn,#mute) {
    border:0 !important; border-radius:999px !important; background:linear-gradient(180deg,#176d8e,#2b8ea9) !important; color:#fff !important;
    box-shadow:0 3px 9px rgba(23,109,142,.24),inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #start:hover,
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #topctrls :is(#modeBtn,#mute):hover {
    background:linear-gradient(180deg,#135f7c,#247e97) !important; color:#fff !important;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #start .startlbl { color:#fff; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #topctrls :is(#mute.muted,#modeBtn.texton) { background:linear-gradient(180deg,#0f4a61,#1a6378) !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #topctrls :is(#mute.muted,#modeBtn.texton):hover { background:linear-gradient(180deg,#0c4155,#16586b) !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #topctrls #endSession { border-radius:999px !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait[data-pane="study"]>.light-surah-handle { margin-right:calc(var(--light-drawer-width) - 22px); }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait>.light-surah-handle {
    border-color:rgba(255,255,255,.14); color:#f4f5f7;
    background:linear-gradient(160deg,rgba(20,30,35,.66) 0%,rgba(13,22,26,.60) 52%,rgba(5,10,13,.68) 100%);
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait>.light-surah-handle:hover {
    transform:translateY(-1px); box-shadow:0 8px 26px #14213933,0 2px 5px #1421391c,inset 0 0 0 44px color-mix(in srgb,currentColor 10%,transparent);
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait>.light-surah-handle:active { transform:scale(.97); }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait>.light-surah-handle:focus-visible { outline:2px solid #4d6d61; outline-offset:3px; }
  html.tenant-light #tenantWorkspaceShell.workspace-portrait.light-keyboard-open>.light-surah-handle { display:none; }
  html.tenant-light body.ftue #tenantWorkspaceShell.workspace-portrait:not([data-pane="study"])>.light-surah-handle { filter:blur(14px) saturate(.78); }
  /* The account button takes the banner's own colour with a raised pale edge, as DeepDiveLM's header buttons do,
     instead of a white pill (owner's request 2026-10-18). The avatar keeps its pale disc. */
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait {
    --light-acct-fill:linear-gradient(180deg,#58796c 0%,#4a6a5e 100%); --light-acct-edge:rgba(235,244,236,.4); --light-acct-edge-hover:rgba(235,244,236,.7);
    --light-acct-ink:#f5f5f2; --light-acct-disc:#eef2ef; --light-acct-icon:#4d6d61; --light-acct-ring:#e3ede6;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell.workspace-portrait {
    --light-acct-fill:linear-gradient(160deg,#2b3b40 0%,#18252a 100%); --light-acct-edge:rgba(255,255,255,.2); --light-acct-edge-hover:rgba(255,255,255,.42);
    --light-acct-ink:#f4f5f7; --light-acct-disc:#34464c; --light-acct-icon:#e3e7ea; --light-acct-ring:#eeeef3;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn {
    background:var(--light-acct-fill) !important; border:1px solid var(--light-acct-edge) !important; color:var(--light-acct-ink) !important;
    box-shadow:0 2px 5px rgba(12,32,25,.35),inset 0 1px 0 rgba(255,255,255,.12); text-shadow:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn:hover { background:var(--light-acct-fill) !important; border-color:var(--light-acct-edge-hover) !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn:focus-visible { outline:2px solid #e0ede5; outline-offset:3px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn :is(#acctName,.acctCaret) { color:var(--light-acct-ink) !important; font-weight:400; }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn .acct-usage-ring::before { background:var(--light-acct-disc); }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn .acctIcon { color:var(--light-acct-icon); }
  html.tenant-light[data-theme] #tenantWorkspaceShell.workspace-portrait #topbar #acctBtn .acct-usage-ring:not([data-state="warning"]):not([data-state="danger"]) { --usage-color:var(--light-acct-ring); }
  /* Dark mode follows the desktop's (owner 2026-10-19): its refinements were written for the desktop layout only, so
     phones and tablets kept the older pale controls. The desktop's header colour (#35423c to #2b3a34) is the active tab
     and the Fiqh band under it, one gradient across both as the desktop header holds the chips, and the drawer's
     "Select a Surah" band; a school that is on is filled sage with a white tick, one that is off an outline; the
     language, Sources and Support buttons are the drawer handle's frosted glass with white labels; the Surah field is
     dark, a checked box sage, and + the sage the light theme fills it with, not pale grey. */
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab.active { background:linear-gradient(180deg,#35423c,#303e38); }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] { background:linear-gradient(180deg,#303e38,#2b3a34); }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy>.light-study-card::before { background:linear-gradient(180deg,#35423c,#2b3a34); }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-title { color:#e6ebe8; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:has(input:checked) {
    background:linear-gradient(180deg,#5d8072,#527466); color:#fff; box-shadow:none;
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:has(input:checked)::before { background:#fff; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:not(:has(input:checked)) {
    background:transparent; color:#e6ebe8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
  }
  @media (hover:hover) {
    html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:has(input:checked):hover { background:linear-gradient(180deg,#668a7b,#5a7d6f); }
    html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:not(:has(input:checked)):hover { background:rgba(255,255,255,.08); }
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #topbar :is(#langBtn,#subLangBtn),
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #tenantSources a {
    border:1px solid rgba(255,255,255,.14) !important; color:#f4f5f7 !important;
    background:linear-gradient(160deg,rgba(20,30,35,.66) 0%,rgba(13,22,26,.60) 52%,rgba(5,10,13,.68) 100%) !important;
    box-shadow:0 6px 24px #14213926,0 1px 4px #14213914; -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #topbar :is(#langBtn,#subLangBtn):hover,
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #tenantSources a:hover {
    border-color:rgba(255,255,255,.3) !important; box-shadow:0 6px 24px #14213926,0 1px 4px #14213914,inset 0 0 0 60px rgba(255,255,255,.06);
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #topbar :is(#langLabel,#subLangLabel,.langCaret) { color:#f4f5f7 !important; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #topbar .langCap { color:#b4bec5 !important; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy :is(.light-surah-trigger,#lightStudyScope) {
    --surface:#16252a; --text:#e3e7ea; --ink:#e3e7ea; --muted:#b4bec5; --border:rgba(255,255,255,.14);
    --control-gradient:var(--light-dark-field); color-scheme:dark;
    border:1px solid rgba(255,255,255,.14); background:var(--light-dark-field); color:#e3e7ea; box-shadow:none;
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait { --light-dark-field:var(--control-gradient); }   /* the dark field, taken before the surah picker's own white palette */
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy input[type="checkbox"]:not(:checked) { background:transparent; border-color:#8e9ba3; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy input[type="checkbox"]:checked { background:#4d6d61; border-color:#4d6d61; color:#fff; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #sharebar #plusBtn { background:#4d6d61 !important; border-color:#4d6d61; color:#fff; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #sharebar #plusBtn:hover { background:#405d52 !important; border-color:#405d52; }
  /* The message box's surround is the colour of the app's own strip under the page (owner 2026-10-19), so the bar runs
     on into it at the bottom: TenantApp.swift applyPageTheme paints that strip #4d6d61 (light) and #060d0f (dark). The
     field inside is unchanged. On the sage the + is translucent white, as the header's Sources pill is. */
  html.tenant-light[data-theme="light"] body #tenantWorkspaceShell.workspace-portrait #sharebar { background:#4d6d61; border-top:0; box-shadow:none; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #sharebar { background:#060d0f; border-top:1px solid rgba(255,255,255,.07); box-shadow:none; }
  html.tenant-light[data-theme="light"] body #tenantWorkspaceShell.workspace-portrait #sharebar #plusBtn {
    background:rgba(255,255,255,.16) !important; border-color:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
  }
  html.tenant-light[data-theme="light"] body #tenantWorkspaceShell.workspace-portrait #sharebar #plusBtn:hover { background:rgba(255,255,255,.26) !important; }
  /* The field was 76% cream over the cream page; over the sage it would turn grey-green, so it is that same cream, opaque. */
  html.tenant-light[data-theme="light"] body #tenantWorkspaceShell.workspace-portrait #sharebar #shareInput { background-color:#f7f3ec; }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode { background:rgba(255,255,255,.06); }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell.workspace-portrait #lightStudy .light-study-mode>.light-study-intro.light-study-desktop-copy { color:#b4bec5; }
}

/* Phones: the five schools and "Fiqh" stay on one line (owner 2026-10-18), so a chosen school keeps a smaller tick
   (owner 2026-10-19: they need it) and an unchosen one gives its tick's room back; the chips and the band's sides are
   a little tighter to make that room. */
@media screen and (max-width:440px) {
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] { gap:6px 4px; padding-left:9px; padding-right:9px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school { gap:2px; padding:0 6px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:has(input:checked) { padding:0 6px 0 4px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school::before { width:8px; height:8px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-school:not(:has(input:checked))::before { display:none; }
}
@media screen and (max-width:374px) {
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] { gap:6px 3px; padding-left:6px; padding-right:6px; }
}

/* The narrowest phones (320px) keep both tab icons beside their names. */
@media screen and (max-width:360px) {
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab { gap:7px; padding:0 6px; font-size:12px; letter-spacing:.05em; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait #tenantPaneTabs .tenant-pane-tab svg { width:20px; height:20px; }
}

/* A short screen keeps the band to one line that scrolls sideways, as the row above the message box did. */
@media screen and (max-height:600px) {
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"]::-webkit-scrollbar { display:none; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat>#lightFiqhSchools[data-place="band"] .light-fiqh-status { flex-basis:auto; flex-shrink:0; }
}

/* Light desktop reference layout (owner's mockup, 2026-10-18). One banner across the top (brand | advisors |
   links, language, account), then the Conversation on the left and Explore Surah on
   the right, filling the whole window (board.js). Desktop only: every rule needs the non-portrait workspace, so
   phones, tablets in portrait and the iOS app keep their layout. app-light-study.js moves the status line and the
   meeting controls under the message box and the Schools of law row into the Conversation header here, and puts
   them back for the responsive layout. */
@media screen {
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) {
    --ld-green:#55776a; --ld-green-deep:#4d6d61; --ld-green-ink:#4d6d61;   /* Light's sage (owner's request 2026-10-18), not a brighter green */
    --ld-head-1:var(--ld-green); --ld-head-2:var(--ld-green-deep);   /* the card headers' gradient */
    --ld-band:linear-gradient(90deg,rgba(77,109,97,.94) 0%,rgba(85,119,106,.88) 50%,rgba(77,109,97,.94) 100%);
    --ld-panel:linear-gradient(160deg,rgba(251,246,237,.64) 0%,rgba(246,239,228,.56) 52%,rgba(234,223,206,.64) 100%); --ld-sheet:rgba(252,248,241,.93);   /* the panel is the Surah drawer handle's frosted glass */
    --ld-card:#f7f1e8; --ld-card-border:rgba(118,98,66,.14); --ld-card-shadow:0 6px 18px rgba(70,56,34,.08);
    --ld-field:#fff; --ld-field-border:#e3ddd2; --ld-popover:#fffdf9; --ld-soft:#fff;
    --ld-navy:#0b2a70; --ld-ink:#1f3476; --ld-muted:#4e6888; --ld-caption:#475c7e; --ld-hint:#768c99; --ld-text:#2e3439;
    --ld-role:#5f738c; --ld-divider:rgba(31,52,118,.12);
    --ld-blue-1:#176d8e; --ld-blue-2:#2b8ea9; --ld-blue-hover-1:#135f7c; --ld-blue-hover-2:#247e97;   /* owner's teal gradient, 2026-10-18 */
    --ld-mic:#55776a; --ld-mic-hover:#4d6d61; --ld-mic-off:#6f857b; --ld-check:#55776a;
    --ld-action-w:216px; --ld-action-h:40px;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) {
    --ld-green:#4d6d61; --ld-green-deep:#405d52; --ld-green-ink:#e9eef0;
    --ld-head-1:#35423c; --ld-head-2:#2b3a34;   /* darker card headers in dark mode (owner's request 2026-10-19) */
    --ld-band:linear-gradient(90deg,rgba(10,22,24,.90) 0%,rgba(22,40,40,.84) 50%,rgba(10,22,24,.90) 100%);
    --ld-panel:linear-gradient(160deg,rgba(20,30,35,.66) 0%,rgba(13,22,26,.60) 52%,rgba(5,10,13,.68) 100%); --ld-sheet:rgba(7,15,17,.84);
    --ld-card:rgba(19,30,34,.96); --ld-card-border:rgba(255,255,255,.08); --ld-card-shadow:0 10px 26px rgba(0,0,0,.34);
    --ld-field:var(--control-gradient); --ld-field-border:rgba(255,255,255,.14); --ld-popover:#16252a; --ld-soft:rgba(255,255,255,.06);
    --ld-navy:#f4f5f7; --ld-ink:#e3e7ea; --ld-muted:#b4bec5; --ld-caption:#b4bec5; --ld-hint:#97a3ab; --ld-text:#e6e9ec;
    --ld-role:#aab4bb; --ld-divider:rgba(255,255,255,.12);
    --ld-mic:#4d6d61; --ld-mic-hover:#405d52; --ld-mic-off:#354e44; --ld-check:#4d6d61;
  }

  /* Grid: banner, then research over conversation, with Explore Surah beside both. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) {
    grid-template-columns:minmax(0,1fr) minmax(424px,min(28%,520px)); grid-template-rows:auto minmax(0,1fr);
    column-gap:16px; row-gap:14px; overflow:visible; border-radius:0;   /* full window: board.js gives Light's shell the whole viewport */
  }
  /* The cream sheet the cards sit on, attached under the banner (the old left-column glass). */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)::after {
    grid-column:1 / -1; grid-row:2 / -1; margin:-14px 0 0 !important; border:0; border-radius:0;
    background:var(--ld-sheet); box-shadow:0 18px 40px rgba(60,48,30,.12);
    opacity:1 !important; visibility:visible !important; transform:none !important;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>.tenant-pane-edge-toggle-chat { display:none !important; }

  /* ---- Banner ---- */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#stage {
    grid-column:1 / -1 !important; grid-row:1 !important; position:relative; z-index:6; isolation:auto;   /* above the cards, so its dropdowns open over them */
    /* brand | Sources | advisors | language and profile. The band is only as tall as its contents (owner 2026-10-18:
       the taller band left empty sky above them). */
    display:grid !important; grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-rows:clamp(112px,7.4vw,124px) auto; align-items:center; column-gap:12px;
    box-sizing:border-box; height:auto; min-height:104px; margin:0; padding:0 18px 0 20px; overflow:visible;
    border-radius:0; background:transparent !important;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#stage::before {
    content:""; display:block; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    background:var(--ld-band); box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  }
  /* Quiet illustrated hills and mosque silhouettes from the desktop reference. The shallow crop
     follows the skyline while the muted sage palette keeps the header controls prominent. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#stage::before {
    background:linear-gradient(90deg,rgba(24,57,48,.16),transparent 55%),
      url("/light-desktop-banner.webp?v=2") center 44% / cover no-repeat, var(--ld-green-deep);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell:not(.workspace-portrait)>#stage::before {
    background:linear-gradient(90deg,rgba(6,14,14,.72),rgba(8,18,19,.5) 55%,rgba(8,18,19,.6)),
      url("/light-desktop-banner.webp?v=2") center 44% / cover no-repeat, #0b1716;
  }
  /* First run: the brand and account rise above the veil (#topbar z-index 41), so the stage stacks nothing. */
  html.tenant-light[data-theme] body.ftue #tenantWorkspaceShell:not(.workspace-portrait)>#stage { z-index:auto; }
  /* Conversation / Mode / Panel pickers are off for Light; an operator who turns one on gets a second banner row. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#setup { grid-column:1 / -1; grid-row:2; justify-self:center; margin:0 0 10px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#extproc {
    position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); z-index:6; margin:0;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar {
    grid-column:1 / -1 !important; grid-row:1; display:grid !important; grid-template-columns:subgrid; grid-template-rows:1fr auto auto 24px;
    align-items:center; align-self:stretch; width:auto; height:100%; margin:0 !important; padding:0 !important; background:transparent; isolation:auto;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #topbar::before { content:none !important; display:none !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .brandrow {
    grid-column:1; grid-row:2; position:relative; display:flex; align-items:center; justify-content:flex-start; gap:14px;
    width:auto; max-width:none; margin:0; padding:0; border:0; text-decoration:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .logo[data-tenant-logo] {
    display:block; position:static; flex:none; width:68px; height:50px; max-width:none; margin:0; padding:0;
    object-fit:cover; object-position:left center; background:transparent; border:0; border-radius:0;
  }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .logo[data-tenant-logo] { filter:none; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .brandcopy {
    display:flex; flex-direction:column; align-items:flex-start; gap:7px; width:auto; max-width:none; text-align:left;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar h1 { margin:0; padding:0; transform:none; font:300 28px/1 var(--light-ui-font); letter-spacing:.26em; }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar h1 { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.18); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .rh-brand-subtitle {
    max-width:none; margin:0; padding:0; color:#eef4ef; font:500 10.5px/1.3 var(--light-ui-font); letter-spacing:.08em; text-align:left; text-transform:uppercase; white-space:nowrap;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #tenantCredit {
    grid-column:1; grid-row:3; justify-self:start; margin:6px 0 0; padding:0 0 0 82px; text-align:left; white-space:nowrap;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(#tenantCredit,#tenantCredit a) {
    color:#e3ece6; font:500 10.5px/1.3 var(--light-ui-font); letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  }
  /* Support Light stands right of the subtitle in its own column (app-light-study.js placeHeaderLinks moves it out of
     #tenantSources; the brand row is a link, so it cannot go inside). White glass on the forest, like the brand text. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar>#tenantSupportLink {
    grid-column:2; grid-row:2; align-self:end; justify-self:start; display:inline-flex; align-items:center; gap:7px;
    box-sizing:border-box; height:30px; margin:0 0 -9px 14px; padding:0 13px 0 10px; border:1px solid rgba(255,255,255,.55); border-radius:999px;
    background:rgba(255,255,255,.14); color:#fff; font:500 13px/1 var(--light-ui-font); letter-spacing:.01em; text-decoration:none; white-space:nowrap;
    box-shadow:0 2px 8px rgba(10,30,24,.18); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .15s ease;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar>#tenantSupportLink:hover { background:rgba(255,255,255,.26); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar>#tenantSupportLink:focus-visible { outline:2px solid #fff; outline-offset:2px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar>#tenantSupportLink svg { flex:none; width:15px; height:15px; fill:#e8485a; stroke:#e8485a; }
  /* Language and profile stand in from the window's edge (owner 2026-10-18). */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .metarow {
    grid-column:4; grid-row:1 / -1; display:flex !important; align-items:center; align-self:end; padding-bottom:20px; justify-content:flex-end; gap:10px;
    width:auto; max-width:none; margin:0 clamp(40px,4.5vw,120px) 0 0 !important; position:relative;
  }
  /* With Sources and Support moved out, the container is empty on desktop. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #tenantSources:empty { display:none !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #tenantSources {
    order:1; display:flex !important; align-items:center; gap:14px; width:auto !important; margin:0 4px 0 0; padding:0;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #tenantSources a:any-link {
    width:auto; min-height:32px; height:auto; padding:4px 0; gap:8px; border:0; border-radius:0; background:transparent; box-shadow:none;
    color:#fff; font:400 14px/1.2 var(--light-ui-font); white-space:nowrap;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #tenantSources a::before { width:20px; height:22px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #langCorner { order:2; width:auto; height:auto; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #topRight { order:3; display:flex; align-items:center; margin:0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(#langBtn,#acctBtn) { box-sizing:border-box; height:46px; min-height:46px; border-radius:12px !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
  /* Light: white-outlined glass pills on the green band. Dark keeps its pale pills with dark ink. */
  /* Light: the right of the banner photo is pale golden haze, so these are frosted cream pills with sage ink. */
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(#langBtn,#acctBtn) {
    border:1px solid rgba(61,92,81,.32) !important; background:rgba(255,251,242,.62) !important; color:#24413a !important;
    box-shadow:0 2px 8px rgba(60,48,20,.12); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(#langBtn,#acctBtn):hover { background:rgba(255,252,246,.82) !important; }
  /* The pills are wider than the bare links, so the gaps narrow to keep "Quran Historian" whole at 1400px. */
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(.metarow,#tenantSources) { gap:8px; }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #tenantSources a:any-link {
    box-sizing:border-box; height:46px; min-height:46px; padding:0 12px; border:1px solid rgba(61,92,81,.32); border-radius:12px;
    background:rgba(255,251,242,.62); color:#24413a; box-shadow:0 2px 8px rgba(60,48,20,.12);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #tenantSources a:any-link:hover { background:rgba(255,252,246,.82); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #langBtn {
    width:auto !important; min-width:92px !important; padding:0 12px !important; gap:8px;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #langBtn .langGlobe {
    display:block; width:22px; height:22px; flex:none; font-size:0; background:currentColor; border-radius:0;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c2.5%202.6%203.7%205.6%203.7%209S14.5%2018.4%2012%2021c-2.5-2.6-3.7-5.6-3.7-9S9.5%205.6%2012%203Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c2.5%202.6%203.7%205.6%203.7%209S14.5%2018.4%2012%2021c-2.5-2.6-3.7-5.6-3.7-9S9.5%205.6%2012%203Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #langBtn .langCap { display:none; }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(#langLabel,.langCaret,.acctCaret) { color:#24413a !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #langLabel { font:500 16px/1 var(--light-ui-font); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #langBtn .langCaret { align-self:center; margin:0; width:14px; height:14px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn {
    width:auto !important; min-width:118px !important; max-width:178px; padding:0 12px 0 6px !important; gap:9px;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn #acctName { font:500 16px/1.2 var(--light-ui-font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn #acctName { color:#24413a !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn .acct-usage-ring { width:32px; height:32px; flex-basis:32px; }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn .acct-usage-ring::before { background:#fff; }
  html.tenant-light[data-theme="light"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn .acctIcon { color:var(--ld-green-deep); }
  /* Dark: the advisor panel's frosted glass (the drawer handle's), not pale pills (owner 2026-10-18). */
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(#langBtn,#acctBtn) {
    border:1px solid rgba(255,255,255,.14) !important; background:var(--ld-panel) !important; color:#f4f5f7 !important;
    box-shadow:0 6px 24px #14213926,0 1px 4px #14213914; -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(#langBtn,#acctBtn):hover {
    border-color:rgba(255,255,255,.3) !important; box-shadow:0 6px 24px #14213926,0 1px 4px #14213914,inset 0 0 0 46px rgba(255,255,255,.06);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(#langLabel,.langCaret,.acctCaret,#acctName) { color:#f4f5f7 !important; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn .acct-usage-ring::before { background:#34464c; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn .acctIcon { color:#e3e7ea; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar #acctBtn .acct-usage-ring:not([data-state="warning"]):not([data-state="danger"]) { --usage-color:#eeeef3; }   /* the arc, light on the dark glass */

  /* Advisors: one row of portrait | name, role, level, on a cream panel set into the banner. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod {
    grid-column:3 !important; grid-row:1; justify-self:center; align-self:end; position:relative; z-index:2;
    box-sizing:border-box; display:grid !important; grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch; gap:0 !important;   /* equal cards, each as wide as the widest */
    width:auto; max-width:100%; height:90px; min-height:0 !important; margin:0 !important; padding:0 4px;
    border-radius:16px 16px 0 0; background:transparent;
    box-shadow:0 -4px 16px rgba(20,40,30,.10);
  }
  /* Frosted glass over the banner photo, as on the drawer handle. A layer behind the cards rather than a
     backdrop-filter on #pod itself, which would make #pod the containing block of anything fixed inside it. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod::before {
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    border:1px solid rgba(255,255,255,.55); border-bottom:0; background:var(--ld-panel);
    -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod::before { border-color:rgba(255,255,255,.14); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg {
    display:grid !important; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto;
    grid-template-areas:"face name" "face role" "face meter"; align-content:center; align-items:center; column-gap:10px; row-gap:1px;
    flex:1 1 auto; width:auto; min-width:0; max-width:none; height:100%; box-sizing:border-box; margin:0; padding:0 12px 0 10px;
    border:0; border-radius:0; background:transparent; box-shadow:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg+.reg { border-left:1px solid var(--ld-divider); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg :is(.advisor-frame,.rolesel,.rolemenu) { display:none !important; }
  /* The per-advisor mute follows the tenant's setting (off for Light): hidden with it, else a column at the card's end. */
  html.tenant-light.tenant-advisor-mutes-hidden[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg>.toggle { display:none !important; }
  html.tenant-light:not(.tenant-advisor-mutes-hidden)[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg {
    grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"face name toggle" "face role toggle" "face meter meter";
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg>.toggle { grid-area:toggle; align-self:center; margin:0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg .card { display:contents !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .portrait {
    grid-area:face; align-self:center; box-sizing:border-box; width:56px; max-width:56px; margin:0;
    border:1.5px solid #fff; outline:0; box-shadow:0 4px 12px rgba(25,40,35,.24);   /* a fine ring (owner 2026-10-18: 3px read as too thick) */
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .name {
    grid-area:name; align-self:end; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:1;
    color:var(--ld-navy); font:700 16px/1.2 var(--light-ui-font); letter-spacing:0; text-align:left;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolewrap { grid-area:role; align-self:start; min-width:0; opacity:1; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolelabel {
    display:block; height:auto !important; min-height:0; padding:0 !important; border:0; background:transparent !important; box-shadow:none;
    color:var(--ld-role); font:400 12.5px/1.35 var(--light-ui-font); letter-spacing:0; text-transform:none; text-align:left;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolelabel::after { display:none; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolelabel .roletext { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter {
    grid-area:meter; --meter-height:12px; box-sizing:border-box; width:120px; max-width:100%; height:12px; margin:7px 0 0; padding:0;
    border:0; background:transparent; box-shadow:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter::before,
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter::after,
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter :is(.scale,.ticks) { display:none !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter .col { flex-direction:row; width:100%; height:100%; gap:2.5px; }   /* the fill is centre-out, so it reads the same lying flat */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .seg { border-radius:2px; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod { --seg:rgba(255,255,255,.14); }   /* resting segments stay visible on the dark panel */

  /* ---- Cards ---- */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat.log-max {
    grid-column:1 !important; grid-row:2 !important; margin:0 0 16px 16px !important; height:auto !important;   /* stretch to the row, keeping the bottom margin */
    border:1px solid var(--ld-card-border) !important; border-radius:14px !important; background:var(--ld-card) !important; box-shadow:var(--ld-card-shadow) !important;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#lightStudy {
    grid-column:2 !important; grid-row:2 !important; margin:0 16px 16px 0 !important; padding:0 0 14px !important;
    border:1px solid var(--ld-card-border) !important; border-radius:14px !important; background:var(--ld-card) !important; box-shadow:var(--ld-card-shadow) !important;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  /* Green headers across the top of each card. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) :is(#lightStudyTitle,.light-conversation-title) {
    display:flex; align-items:center; gap:12px; box-sizing:border-box; height:50px; min-height:50px; flex:none;
    margin:0 !important; padding:0 18px !important; border:0 !important; border-radius:13px 13px 0 0;
    background:linear-gradient(180deg,var(--ld-head-1),var(--ld-head-2)) !important; color:#fff !important;
    font:500 19px/1.2 var(--light-ui-font) !important; letter-spacing:.005em; text-transform:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title .light-heading-icon { width:24px; height:24px; color:#fff; }
  /* Sources in the Conversation header, just before the schools of law (owner 2026-10-18), a cream chip like theirs.
     Placed as they are, from the pane's right edge, --light-sources-end past their far edge (app-light-study.js
     fitHeaderSources measures it, since their width follows the language). */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title>#tenantSourcesLink {
    position:absolute; top:9px; right:var(--light-sources-end,16px); z-index:3;
    display:inline-flex; align-items:center; gap:7px; box-sizing:border-box; height:32px; margin:0; padding:0 14px 0 11px;
    border-radius:999px; background:rgba(255,255,255,.16); color:#fff; font:500 14px/1 var(--light-ui-font); letter-spacing:0; text-decoration:none; white-space:nowrap;
    box-shadow:none; transition:background .15s ease;   /* a soft translucent pill in both themes (owner 2026-10-19), not a white one */
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title>#tenantSourcesLink:hover { background:rgba(255,255,255,.24); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title>#tenantSourcesLink:focus-visible { outline:2px solid #fff; outline-offset:2px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title>#tenantSourcesLink::before {
    content:""; flex:none; width:15px; height:17px; background:#e6eee9;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2012h8M8%2017h6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2012h8M8%2017h6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  }
  /* Too little room before the schools of law: the icon alone (the text is still there, at size 0, for screen readers). */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title>#tenantSourcesLink.light-link-compact {
    width:32px; padding:0; justify-content:center; gap:0; font-size:0;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudyTitle::before { width:24px; height:24px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudyTitle { position:sticky; top:0; z-index:2; }

  /* ---- Schools of law: chips at the end of the Conversation header (owner's design, 2026-10-18) ----
     Physical right and left, not inline-end/start: the row takes dir="rtl" in Urdu and Arabic, and its own direction
     would put it on the left, over the Conversation title. Sources stands left of the divider in every language. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] {
    position:absolute; top:9px; right:16px; z-index:3; box-sizing:border-box; height:32px; margin:0;
    display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:0 0 0 16px; overflow:visible;
    border-left:1px solid rgba(255,255,255,.34); color:#fff; font-size:14px; line-height:1;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-title { flex:none; flex-basis:auto; margin-inline-end:4px; color:#fff; font-size:15px; font-weight:600; white-space:nowrap; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school {
    position:relative; flex:none; display:inline-flex; align-items:center; gap:7px; box-sizing:border-box; height:32px; min-height:32px;
    padding:0 14px 0 11px; border-radius:999px; background:linear-gradient(180deg,#73988a,#678c7e); color:#fff; font-weight:500;
    box-shadow:none; cursor:pointer; transition:background .15s ease,color .15s ease;   /* on: a lighter green than the header, with a white tick (owner 2026-10-19, as in dark mode) */
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school::before {
    content:""; flex:none; width:15px; height:15px; background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012.5l5%205L20%206.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012.5l5%205L20%206.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  }
  /* Off: an outline chip with no tick. The checkbox itself stays in the page (over the chip) for keyboards and screen readers. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:not(:has(input:checked)) { background:transparent; color:#eef4f0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:not(:has(input:checked))::before { background:transparent; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:has(input:checked):hover { background:linear-gradient(180deg,#7da293,#709586); color:#fff; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:not(:has(input:checked)):hover { background:rgba(255,255,255,.1); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:has(input:focus-visible) { outline:2px solid #fff; outline-offset:2px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
  /* Dark mode (owner's mockup 2026-10-19): Sources is a soft grey pill; a school that is on is filled sage with a
     white tick, one that is off an outline with no fill. Flat, no shadows. */
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title>#tenantSourcesLink {
    background:rgba(255,255,255,.1); color:#dfe5e2; box-shadow:none;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title>#tenantSourcesLink:hover { background:rgba(255,255,255,.17); color:#fff; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) .light-conversation-title>#tenantSourcesLink::before { background:#cfd7d3; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-title { color:#e6ebe8; font-weight:500; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:has(input:checked) {
    background:linear-gradient(180deg,#5d8072,#527466); color:#fff; box-shadow:none;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:has(input:checked):hover { background:linear-gradient(180deg,#668a7b,#5a7d6f); color:#fff; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school::before { background:#fff; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:not(:has(input:checked)) {
    background:transparent; color:#e6ebe8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-school:not(:has(input:checked)):hover { background:rgba(255,255,255,.08); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#lightFiqhSchools[data-place="header"] .light-fiqh-status {
    position:absolute; top:calc(100% + 13px); inset-inline-end:0; flex-basis:auto; max-width:420px; padding:6px 10px; border-radius:8px;
    background:var(--ld-popover); color:var(--ld-ink); font-size:12.5px; line-height:1.35; white-space:normal; opacity:1;
    box-shadow:0 6px 16px rgba(30,30,20,.16);
  }

  /* ---- The primary actions: one width, one height, one teal. ---- */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-action {
    display:inline-flex; align-items:center; justify-content:center; gap:10px; flex:none; box-sizing:border-box;
    width:var(--ld-action-w) !important; min-width:0; max-width:100%; height:var(--ld-action-h) !important; min-height:var(--ld-action-h) !important; max-height:none !important;
    margin:0; padding:0 18px !important; border:0 !important; border-radius:999px !important;
    background:linear-gradient(180deg,var(--ld-blue-1),var(--ld-blue-2)) !important; color:#fff !important;
    font:600 13px/1 var(--light-ui-font) !important; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
    box-shadow:0 3px 9px rgba(23,109,142,.24),inset 0 1px 0 rgba(255,255,255,.18);
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-action:enabled:hover {
    background:linear-gradient(180deg,var(--ld-blue-hover-1),var(--ld-blue-hover-2)) !important; color:#fff !important;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-action::before {
    content:""; flex:none; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-action::after { content:none; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-action { justify-self:center; margin-top:14px; }

  /* ---- Explore Surah ---- */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy>.light-study-card>.light-study-intro { display:none; }
  /* A 22px gutter down the left of the picker carries the branch: its node sits beside "Choose Surah & Ayah" and its
     line runs down past the selection (it spans exactly the rows above the sections, so it fits whatever they hold)
     into Meaning & Context and Recitation (owner's request 2026-10-18). Rows are spaced by margins, not row-gap, so
     an empty row (the hidden index notice) adds no space. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-picker {
    --ld-pick-gap:10px; display:grid; grid-template-columns:22px minmax(0,1fr);
    grid-template-areas:". fields" ". clear" ". empty" "actions actions" ". status"; gap:0; margin:0; padding:16px 22px 0 0;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-selection { grid-area:fields; display:grid; gap:var(--ld-pick-gap); min-width:0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-picker>.light-study-clear { grid-area:clear; margin-top:var(--ld-pick-gap); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-picker>.light-study-hint:not(#lightPassageStatus) { grid-area:empty; margin-top:var(--ld-pick-gap); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-picker>#lightPassageStatus { grid-area:status; margin-top:var(--ld-pick-gap); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-picker::before {
    content:""; grid-row:1 / 4; grid-column:1; justify-self:center; width:2px; margin:11px 0 calc(-1 * (var(--ld-pick-gap) + 8px));
    background:var(--ld-branch); pointer-events:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-picker::after {
    content:""; grid-row:1; grid-column:1; justify-self:center; align-self:start; box-sizing:border-box; width:10px; height:10px; margin-top:6px;
    border-radius:50%; background:var(--ld-card); box-shadow:inset 0 0 0 2px var(--ld-branch); pointer-events:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-picker-label,
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode-title {
    margin:0; padding:0; border:0; color:var(--ld-navy); font:700 18px/1.25 var(--light-ui-font);
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy :is(.light-surah-trigger,#lightStudyScope) {
    box-sizing:border-box; height:46px; min-height:46px; padding:0 16px; border:1px solid var(--ld-field-border); border-radius:12px;
    box-shadow:none; color:var(--ld-muted); font:400 16px/1.2 var(--light-ui-font);
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-surah-trigger { background:var(--ld-field); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy #lightStudyScope {
    -webkit-appearance:none; appearance:none; padding-right:44px;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23315a8c%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") no-repeat right 16px center/16px,var(--ld-field);
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-surah-chevron {
    width:16px; height:16px; font-size:0; background:currentColor; color:#315a8c;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-clear { justify-self:start; }
  /* Clear selection: a pill in both states; with a surah chosen it takes the owner's teal (2026-10-18). */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-clear { min-height:32px; padding:5px 16px; border-radius:999px !important; font:500 14px/1.2 var(--light-ui-font); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-clear:disabled {
    border:0; background:rgba(120,134,150,.13); box-shadow:none; color:#52708f; opacity:1;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-clear:enabled { background:#186f8f; border:1px solid #288aa6; color:#fff; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-clear:enabled:hover { background:#135d78; border-color:#247e97; color:#fff; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-clear:disabled { background:rgba(255,255,255,.08); color:#aab4bb; }
  /* Meaning & Context and Recitation act on the surah chosen above: indented, and joined to it by a branch line
     (the node beside the picker's heading, a trunk down its gutter, and a rounded elbow into each section). */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy { --ld-branch:rgba(85,119,106,.6); }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy { --ld-branch:rgba(255,255,255,.32); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-actions { grid-area:actions; position:relative; display:grid; gap:0; margin:calc(var(--ld-pick-gap) + 8px) 0 0; padding:0; padding-inline-start:63px; border:0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode::after {
    content:""; position:absolute; inset-inline-start:-53px; top:0; width:43px; height:28px; box-sizing:border-box; pointer-events:none;
    border-inline-start:2px solid var(--ld-branch); border-bottom:2px solid var(--ld-branch); border-end-start-radius:12px;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode:not(:last-child)::before {
    content:""; position:absolute; inset-inline-start:-53px; top:0; bottom:0; width:2px; background:var(--ld-branch); pointer-events:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode {
    position:relative; display:grid; grid-template-columns:26px minmax(0,1fr); column-gap:12px; padding:15px 0 8px; margin:0;
    border:0; border-radius:0; background:transparent; box-shadow:none;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode-icon { width:26px; height:26px; color:var(--ld-navy); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode .light-study-intro.light-study-desktop-copy {
    margin:8px 0 12px; color:var(--ld-caption); font-size:14px; line-height:1.45;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-options {
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0; font-size:15px; color:var(--ld-ink);
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-options label { gap:10px; min-height:30px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-options .light-study-desktop-copy { display:none; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-options .light-study-mobile-copy { display:inline; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-options>.light-study-hint { flex-basis:100%; margin:0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-hint { font-size:14px; color:var(--ld-hint); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-listening-cost { margin:10px 0 0; font-style:italic; font-size:13px; line-height:1.45; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy #lightPassageStatus:not(:empty) { margin:10px 0 0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy input[type="checkbox"] {
    width:22px; height:22px; border:1.5px solid #9fb4c3; border-radius:5px; background:#fff;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy input[type="checkbox"]::before { width:5px; height:10px; border-width:0 2px 2px 0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy input[type="checkbox"]:checked { background:var(--ld-check); border-color:var(--ld-check); color:#fff; }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy input[type="checkbox"]:not(:checked) { background:transparent; border-color:#8e9ba3; }
  /* Explore Surah does not fold away (owner 2026-10-18): board.js makes no collapse button for Light and never
     minimizes its study pane; a button made before the tenant was known is hidden here. */
  html.tenant-light #tenantWorkspaceShell>.tenant-pane-edge-toggle-browser { display:none !important; }

  /* ---- Conversation ---- */
  /* The transcript is DeepDiveLM's paper (owner's request 2026-10-18; deepread.css "Ruled notebook paper"): its colour,
     edge shading and soft light, WITHOUT the ruled lines, since Light's transcript also holds source cards, ayah buttons
     and the recitation player, which would throw the ruling out of line. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log {
    --ld-paper:#f5ead4; --ld-paper-light:rgba(255,253,247,.35); --log-ink:#403629;
    box-sizing:border-box; margin:12px 14px 4px; padding:16px 22px 20px; border-radius:6px;
    font-size:calc(16px * var(--light-log-scale,1.125)); line-height:1.65; color:var(--log-ink);
    background-color:var(--ld-paper);
    background-image:
      linear-gradient(90deg,rgba(126,110,84,.07),transparent 7%,transparent 93%,rgba(126,110,84,.06)),
      radial-gradient(ellipse at 24% 30%,var(--ld-paper-light),transparent 65%),
      radial-gradient(ellipse at 80% 75%,rgba(165,147,116,.06),transparent 60%);
    background-attachment:local;
    box-shadow:inset 0 0 18px rgba(126,110,84,.06);
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log {
    --ld-paper:#081010; --ld-paper-light:rgba(240,243,245,.018); --log-ink:#e2e5e7;
  }
  /* ---- The Conversation as an open mushaf (owner's request 2026-10-18; the visitor's choice since 2026-10-19) ----
     Two facing pages with illuminated floral vines, shaped corner pieces, fine gold rules and four medallions,
     paged like DeepDiveLM's book spread: app-light-study.js lightConversationPages adds
     .light-pages and turns by whole spreads. The column gap is the two side paddings added together, so one spread is
     exactly the transcript's width and the frames, backgrounds that do not scroll, always sit around the text. Without
     the script the transcript stays the plain paper above. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-pages {
    --lp-edge:10px; --lp-frame:32px; --lp-inset:12px; --lp-side:calc(var(--lp-edge) + var(--lp-frame) + var(--lp-inset));
    --lp-ornament:url("/light-quran-frame.svg?v=1");
    --lp-binding:linear-gradient(90deg,transparent 0%,rgba(104,70,29,.035) 12%,rgba(104,70,29,.10) 29%,rgba(104,70,29,.21) 43%,
      rgba(86,53,20,.34) 49%,rgba(77,46,17,.46) 50%,rgba(255,246,220,.48) 51%,rgba(255,246,220,.24) 55%,rgba(255,246,220,.08) 68%,transparent 100%);
    --lp-page:calc(50% - 2 * var(--lp-edge)) calc(100% - 2 * var(--lp-edge));
    padding:calc(var(--lp-edge) + var(--lp-frame) + 12px) var(--lp-side) calc(var(--lp-edge) + var(--lp-frame) + 22px);
    border:0; column-count:2; column-gap:calc(2 * var(--lp-side)); column-fill:auto; column-rule:none;
    overflow:hidden; overflow-anchor:none; overscroll-behavior:contain; touch-action:pan-y;
    background-image:var(--lp-ornament),var(--lp-ornament),var(--lp-binding),
      linear-gradient(90deg,rgba(126,110,84,.07),transparent 7%,transparent 93%,rgba(126,110,84,.06)),
      radial-gradient(ellipse at 24% 30%,var(--ld-paper-light),transparent 65%),
      radial-gradient(ellipse at 80% 75%,rgba(165,147,116,.06),transparent 60%);
    background-size:var(--lp-page),var(--lp-page),64px 100%,auto,auto,auto;
    background-position:left var(--lp-edge) top var(--lp-edge),right var(--lp-edge) top var(--lp-edge),center,0 0,0 0,0 0;
    background-repeat:no-repeat; background-attachment:scroll;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-pages {
    --lp-ornament:url("/light-quran-frame-dark.svg?v=1");
    --lp-binding:linear-gradient(90deg,transparent 0%,#0001 16%,#0004 35%,#0008 46%,#000b 50%,#d5eee526 51%,#d5eee512 56%,#d5eee505 70%,transparent 100%);
  }
  /* One page when two would be too narrow to read: same paging, one frame, no binding. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-pages[data-pages="1"] {
    column-count:1; --lp-page:calc(100% - 2 * var(--lp-edge)) calc(100% - 2 * var(--lp-edge));
    background-image:var(--lp-ornament),none,none,
      linear-gradient(90deg,rgba(126,110,84,.07),transparent 7%,transparent 93%,rgba(126,110,84,.06)),
      radial-gradient(ellipse at 24% 30%,var(--ld-paper-light),transparent 65%),
      radial-gradient(ellipse at 80% 75%,rgba(165,147,116,.06),transparent 60%);
  }
  /* The empty right-hand leaf of an odd last spread, so that spread can be turned to (DeepDiveLM's book-spread-odd). */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-pages.light-pages-odd::after { content:""; display:block; break-before:column; height:1px; }
  /* Urdu and Arabic: the right-hand page is filled first, as in a printed Qur'an (owner 2026-10-18). */
  /* Each line aligns to its own direction there: #log's text-align:left would keep an Urdu line on the left edge.
     Every layout, the responsive transcript included (its lines sat on the left until 2026-10-19). */
  html.tenant-light[data-theme] #tenantWorkspaceShell>#chat #log.light-pages-rtl { direction:rtl; text-align:start; }
  html.tenant-light[data-theme] #tenantWorkspaceShell>#chat #log.light-pages-rtl>[data-lp-dir="ltr"] { direction:ltr; }
  /* The empty line reads in its own language: an English one (a right-to-left conversation before the interface
     follows it) stays left to right, and the Urdu or Arabic line's icon goes to its right on the responsive page. */
  html.tenant-light:not(.light-ui-urdu):not(.light-ui-arabic)[data-theme] #tenantWorkspaceShell>#chat #log.light-pages-rtl:empty::before { direction:ltr; text-align:left; }
  html.tenant-light:is(.light-ui-urdu,.light-ui-arabic)[data-theme] body #tenantWorkspaceShell.workspace-portrait>#chat #log:empty::before {
    padding-left:0; padding-right:36px; background-position:right center; text-align:right;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-pages>* { orphans:2; widows:2; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-pages :is(.chat-log-images,.light-batch-question,.light-ayah-question) { break-inside:avoid; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-pages .chat-log-image { max-height:calc(100% - 8px); }
  /* A page turn (app-light-study.js flipTo) is DeepDiveLM's binding turn (deepread.css .book-page-turn): copies of the
     pages, still and turning, over the transcript for 820ms. The copies keep #log's look; nothing in them animates. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-flip {
    position:absolute; z-index:1; margin:0; overflow:hidden; pointer-events:none; user-select:none; perspective-origin:50% 50%;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-flip * { animation:none !important; transition:none !important; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-flip .light-pages-still { position:absolute; inset:0; overflow:hidden; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-flip .light-pages-sheet { position:absolute; top:0; bottom:0; width:50%; transform-style:preserve-3d; will-change:transform; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-flip .light-pages-face { position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-flip .light-pages-back { transform:rotateY(180deg); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-flip .light-pages-light { position:absolute; inset:0; opacity:0; background:linear-gradient(90deg,#0009,#0001 30%,#fff3 62%,#0006); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-flip .light-pages-shadow {
    position:absolute; top:0; bottom:0; left:0; width:50%; transform-origin:50% 50%; opacity:0;
    background:linear-gradient(90deg,transparent,#0009 35%,#000b 65%,transparent); will-change:transform,opacity;
  }
  /* Page numbers sit in medallions on each page's bottom band, with the turn arrows beside them. The row overlaps
     the transcript's foot and gives the space back, so nothing below it moves. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav {
    --lp-gold:#a9843f; --lp-band:#4d6d61; --lp-cream:#f6ecd6;
    position:relative; z-index:1; flex:none; display:grid; grid-template-columns:1fr 1fr; height:26px;
    margin:-35px 14px 9px; pointer-events:none;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav { --lp-gold:#8c7243; --lp-band:#1f302b; --lp-cream:#d9c9a0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav[hidden] { display:none; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav.single-page { grid-template-columns:1fr; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-side { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-page-number {
    box-sizing:border-box; min-width:24px; height:22px; padding:0 7px; border:1.5px solid var(--lp-gold); border-radius:11px;
    background:var(--lp-cream); box-shadow:0 0 0 2px var(--lp-band); color:var(--lp-band);
    font:600 11.5px/19px var(--light-ui-font); text-align:center; font-variant-numeric:tabular-nums; pointer-events:auto;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-page-number { color:#f4ead2; background:var(--lp-band); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-page-number[hidden] { display:inline-block; visibility:hidden; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-turn {
    position:absolute; top:1px; display:grid; place-items:center; box-sizing:border-box; width:24px; height:24px; padding:0;
    border:1.5px solid var(--lp-gold); border-radius:50%; background:var(--lp-band); color:var(--lp-cream);
    box-shadow:0 1px 4px rgba(40,34,20,.22); cursor:pointer; pointer-events:auto;
  }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-prev { inset-inline-end:calc(50% + 22px); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-next { inset-inline-start:calc(50% + 22px); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-turn svg { width:12px; height:12px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-next svg,
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav[dir="rtl"] .light-pages-prev svg { transform:scaleX(-1); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav[dir="rtl"] .light-pages-next svg { transform:none; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-turn:hover:not(:disabled) { background:var(--ld-green); }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-turn:focus-visible { outline:2px solid var(--lp-gold); outline-offset:2px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-turn:disabled { opacity:.32; cursor:default; box-shadow:none; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav.single-spread .light-pages-turn { visibility:hidden; }
  /* New lines arrived on a later page while the reader was turned back. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-pages-nav .light-pages-next.has-new::after {
    content:""; position:absolute; top:-3px; inset-inline-end:-3px; width:8px; height:8px; border-radius:50%;
    background:#d9a441; box-shadow:0 0 0 1.5px var(--lp-cream);
  }
  /* One scrolling page, the default (owner 2026-10-19; Two facing pages is the choice in the profile menu's Settings): the
     phones' framed page at full size. The border is a layer over the transcript's padding box (app-light-study.js
     placePageFrame), so the text scrolls under it as through a window and the scrollbar stays beside it. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-page-scroll {
    padding:44px 46px 44px 44px; scrollbar-width:thin; scrollbar-color:rgba(126,110,84,.45) transparent;
  }
  html.tenant-light[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#chat #log.light-page-scroll { scrollbar-color:rgba(217,201,160,.32) transparent; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-page-frame:not([hidden]) {
    display:block; position:absolute; z-index:2; margin:0; pointer-events:none;
    top:var(--frame-top,0px); left:var(--frame-left,0px); width:var(--frame-width,0px); height:var(--frame-height,0px);
    background:url("/light-quran-frame.svg?v=1") 0 0 / 100% 100% no-repeat;
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>.light-page-frame:not([hidden]) { background-image:url("/light-quran-frame-dark.svg?v=1"); }
  /* ---- end open mushaf ---- */
  /* The status line keeps its usual centred form (text, live light, scanner bar) and sits under the message box. */
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#status { flex:none; margin:2px 16px 0; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #sharebar {
    display:flex !important; align-items:center; gap:10px; flex:none; padding:10px 16px 12px; border:0; background:transparent; box-shadow:none;
  }
  /* The + button: a quiet outline circle at the start of the message box. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #sharebar #plusBtn {
    align-items:center; justify-content:center; box-sizing:border-box; width:44px !important; min-width:44px !important; height:44px; min-height:44px;
    padding:0 !important; border:1px solid var(--ld-field-border) !important; border-radius:50% !important;
    background:var(--ld-soft) !important; color:var(--ld-green-ink) !important; box-shadow:none; font-size:24px; font-weight:400; line-height:1;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #sharebar #plusBtn:hover { border-color:var(--ld-green) !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #sharebar #shareInput {
    box-sizing:border-box; min-height:52px !important; max-height:96px !important; padding:14px 40px 14px 18px;   /* one line, growing to three (app-controls.js) */
    border:1px solid var(--ld-field-border); border-radius:12px; background:var(--ld-field); box-shadow:none;
    color:var(--ld-text); font-size:16px; line-height:22px;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #sharebar #shareInputWrap:has(#shareClear[hidden]) #shareInput { padding-right:18px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #sharebar #liveCaption { inset:15px 18px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #sharebar #shareBtn { flex:none; box-sizing:border-box; width:52px; min-width:52px; height:52px; padding:0; border-radius:12px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #sharebar #shareBtn:not(.ready) { background:#7d958c; border-color:#7d958c; }
  /* Meeting controls: their own row right under the message box (owner's request 2026-10-18). Before the meeting it
     is one wide Seek Wisdom; live, Huddle's own Speech, mic and End buttons at their usual sizes and colours. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls {
    flex:none; flex-wrap:nowrap; justify-content:center; box-sizing:border-box; max-width:none; margin:0 !important; padding:2px 16px 16px !important;
  }
  html.tenant-light[data-theme] body.live #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls { padding:38px 16px 24px !important; }   /* "Listening" / "Muted" floats above the mic; a caption can sit under a button */
  html.tenant-light[data-theme] body:not(.live) #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls>#startwrap { display:flex; justify-content:center; flex:1 1 auto; min-width:0; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls #start { flex:none; width:280px; max-width:100%; min-width:0 !important; height:44px; min-height:44px; justify-content:center; border-radius:999px !important; }
  /* Seek Wisdom: the same teal pill as the study buttons, a little wider than they are. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls #start {
    border:0 !important; background:linear-gradient(180deg,var(--ld-blue-1),var(--ld-blue-2)) !important; color:#fff !important;
    box-shadow:0 3px 9px rgba(23,109,142,.24),inset 0 1px 0 rgba(255,255,255,.18);
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls #start:hover {
    background:linear-gradient(180deg,var(--ld-blue-hover-1),var(--ld-blue-hover-2)) !important; color:#fff !important;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls #start .startlbl { color:#fff; }
  /* Live controls: Speech and the mic in the study teal, End stays red, all three pills (owner's request 2026-10-18).
     Off (muted, or text only) is a deeper teal, so the state still reads at a glance. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls :is(#modeBtn,#mute,#endSession) { border-radius:999px !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls :is(#modeBtn,#mute) {
    border:0 !important; background:linear-gradient(180deg,var(--ld-blue-1),var(--ld-blue-2)) !important; color:#fff !important;
    box-shadow:0 3px 9px rgba(23,109,142,.24),inset 0 1px 0 rgba(255,255,255,.18);
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls :is(#modeBtn,#mute):hover { background:linear-gradient(180deg,var(--ld-blue-hover-1),var(--ld-blue-hover-2)) !important; color:#fff !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls :is(#mute.muted,#modeBtn.texton) { background:linear-gradient(180deg,#0f4a61,#1a6378) !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat>#topctrls :is(#mute.muted,#modeBtn.texton):hover { background:linear-gradient(180deg,#0c4155,#16586b) !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-listening-player { max-width:560px; margin:0 auto; }
  /* The recorded player's buttons match the live controls: Ask Surah and Start conversation teal pills, Stop a red pill. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-listening-player .light-session-button { border-radius:999px !important; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-listening-player .light-session-button:not(#lightListeningStop) {
    border:0 !important; background:linear-gradient(180deg,var(--ld-blue-1),var(--ld-blue-2)) !important; color:#fff !important;
    box-shadow:0 3px 9px rgba(23,109,142,.24),inset 0 1px 0 rgba(255,255,255,.18);
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-listening-player .light-session-button:not(#lightListeningStop):enabled:hover { background:linear-gradient(180deg,var(--ld-blue-hover-1),var(--ld-blue-hover-2)) !important; }
  /* Ask about this ayah / Ask about ayahs in the transcript: a small sage pill with a speech bubble for asking (owner
     2026-10-18: the pale outlined box read as a placeholder; then smaller, in the sage green). */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-ayah-question {
    display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; min-height:26px; margin-top:6px; padding:0 13px 0 11px;
    border:0; border-radius:999px; background:linear-gradient(180deg,#537568,#507064); color:#e6e3e3;
    font:600 11px/1 var(--light-ui-font); letter-spacing:.05em; text-transform:uppercase; box-shadow:0 2px 6px rgba(55,82,72,.22); cursor:pointer;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-ayah-question::before { content:""; flex:none; width:13px; height:13px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5H4l-3 2V11.5A8.5 8.5 0 0 1 9.5 3h3a8.5 8.5 0 0 1 8.5 8.5Z'/%3E%3Cpath d='M7 10h9M7 14h6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5H4l-3 2V11.5A8.5 8.5 0 0 1 9.5 3h3a8.5 8.5 0 0 1 8.5 8.5Z'/%3E%3Cpath d='M7 10h9M7 14h6'/%3E%3C/svg%3E") center/contain no-repeat; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-ayah-question:enabled:hover { background:linear-gradient(180deg,#4a6a5e,#465f55); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-ayah-question:focus-visible { outline:2px solid #507064; outline-offset:2px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat .light-ayah-question:disabled { opacity:.45; cursor:default; box-shadow:none; }
  /* First run: Seek Wisdom keeps its place under the message box and rises above the veil. The pane stops being a
     stacking context (z-index, will-change and the transform an older rule forces) so Start (z-index 41) can pass
     the veil (40); everything else in it stays beneath. */
  html.tenant-light[data-theme] body.ftue #tenantWorkspaceShell:not(.workspace-portrait):not(.light-free-listening)>#chat.log-max:not(:has(.light-free-verse)) {
    z-index:auto !important; will-change:auto !important; transform:none !important;
  }
}

/* Short desktop windows (a 1366x768 laptop leaves ~760px of workspace): the shell's own height decides, since it
   is scaled. The section captions go first (the phone layout hides them too), then the spacing tightens, so
   Recite stays in view without scrolling the study card. */
@media screen {
  html.tenant-light #tenantWorkspaceShell:not(.workspace-portrait) { container:light-desktop / size; }
}
@container light-desktop (max-height:820px) {
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode .light-study-intro.light-study-desktop-copy { display:none; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-options { margin-top:12px; }
}
@container light-desktop (max-height:740px) {
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy :is(.light-surah-trigger,#lightStudyScope) { height:42px; min-height:42px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-picker { --ld-pick-gap:8px; padding-top:12px; }
  html.tenant-light[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode { padding-top:12px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-action { margin-top:10px; }
}

/* Desktop Explore Surah: Meaning & Context and Recitation as two separate cards (owner 2026-10-18: the clarity of
   the responsive cards, not their side-by-side layout). They stay stacked on the branch with their own actions; each
   card is boxed, and "Include in discussion" / "Include with recitation" (.light-study-include) heads its own options,
   so which options go with which action is plain. The credits line follows Recite (`order`), so Recite stays in view
   on a 1366x768 laptop. Placed last, and with `body` in the selector, so it outranks the short-window rules above,
   which still drop the descriptions on a short window. */
@media screen {
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-actions { display:grid; gap:10px; padding-inline-start:48px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode {
    padding:12px; border:1px solid var(--ld-card-border); border-radius:12px;
    background:rgba(255,253,248,.72); box-shadow:0 2px 8px rgba(70,56,34,.06);
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode {
    border-color:rgba(255,255,255,.1); background:var(--ld-soft); box-shadow:none;
  }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode .light-study-intro.light-study-desktop-copy { margin:6px 0 0; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-include {
    display:block; margin:8px 0 6px; padding-top:8px; border-top:1px solid var(--ld-divider);
    color:var(--ld-green-ink); font:600 13.5px/1.3 var(--light-ui-font);
  }
  html.tenant-light[data-theme="dark"] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-include { color:#9fc9b6; border-top-color:rgba(255,255,255,.12); }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-options { margin:0; column-gap:12px; font-size:14px; }   /* one row in the 1400px design's 310px */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-options label { gap:8px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-action { margin-top:12px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode>.light-listening-cost { order:1; margin:6px 0 0; text-align:center; }
  html.tenant-light.light-ui-urdu body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-include { font-size:15px; line-height:1.7; }
  /* The branch's elbows meet each card's edge, level with its icon; the trunk crosses the gap between cards. */
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode::after { inset-inline-start:-38px; width:38px; height:28px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode:not(:last-child)::before { inset-inline-start:-38px; bottom:-10px; }
}

/* A short window (1366x768 and 1280x720 land here) tightens the cards too, so Recite stays in view. */
@container light-desktop (max-height:820px) {
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-actions { gap:6px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode { padding:8px 12px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-include { margin:6px 0 4px; padding-top:6px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-action { margin-top:10px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode::after { height:22px; }
  html.tenant-light[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait) #lightStudy .light-study-mode:not(:last-child)::before { bottom:-6px; }
}