/* Shared reading, containment and loading states for the Production workspace. */
:root { --sidebar:264px; --readable-muted:#b5a9c1; }
:root { --sidebar-hue:#08b9dc; }
html[data-appearance] .sidebar {
  --nav:color-mix(in srgb,var(--sidebar-hue) 30%,#081725);
  --paper:color-mix(in srgb,var(--sidebar-hue) 17%,#081725);
  --ink:#eef9ff; --muted:#c4dfe8;
  --line:color-mix(in srgb,var(--sidebar-hue) 32%,#58707d);
  background:var(--nav); color:var(--ink); border-color:var(--line);
}
html[data-appearance="light"] .sidebar {
  --nav:color-mix(in srgb,var(--sidebar-hue) 60%,white);
  --paper:color-mix(in srgb,var(--sidebar-hue) 20%,white);
  --ink:#102632; --muted:#233d4c;
  --line:color-mix(in srgb,var(--sidebar-hue) 55%,#486573);
}
html[data-appearance] .sidebar :is(.brand strong,.brand-product strong,.nav-link,.side-account strong) { color:var(--ink); }
html[data-appearance] .sidebar :is(.nav-title,.runtime,.side-label,.side-box p,.side-organize,.side-account small,.side-box small) { color:var(--muted); }
html[data-appearance] .sidebar .nav-link .icon { color:currentColor; }
html[data-appearance] .sidebar .nav-link:is(:hover,[aria-current="page"]) { background:var(--paper); color:var(--ink); }
html[data-appearance] .sidebar :is(.side-box select,.side-account,.release-notice,.runtime .badge,.brand-product>span) { background:var(--paper); color:var(--ink); border-color:var(--line); }
html[data-appearance] .sidebar .release-link { color:var(--ink); }
html[data-appearance] .sidebar .theme-dot[aria-pressed="true"] { outline-color:var(--ink); }
.capacity-row .person { min-width:0; width:auto; }
.capacity-row .card-owner .avatar { width:44px; height:44px; }
.absence-filters .kpi { min-height:168px; }
.absence-filters .kpi .kpi-label { max-width:calc(100% - 64px); font-size:.9375rem; }
.absence-filters .kpi .tile-icon { display:grid; place-items:center; width:52px; height:52px; top:18px; right:18px; border-radius:14px; background:color-mix(in srgb,var(--accent) 13%,var(--paper)); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line)); }
.absence-filters .kpi .tile-icon .icon { width:30px; height:30px; stroke-width:1.7; }
.absence-filters .kpi[aria-pressed="true"] .tile-icon { color:var(--accent-contrast); background:var(--accent); border-color:var(--accent); }
.client-brand { display:inline-flex; align-items:center; justify-content:center; flex:none; width:132px; min-height:62px; padding:8px; background:#fff; border:1px solid #d7deea; border-radius:10px; }
.client-brand img { display:block; width:116px; height:48px; max-width:100%; object-fit:contain; }
.client-brand-missing { flex-direction:column; gap:4px; color:#384354; font-size:.75rem; line-height:1.4; text-align:center; }
.client-brand-missing>.icon { width:22px; height:22px; }
.finance-project-row { align-items:center; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:112px; }
html.appearance-changing *,html.appearance-changing *::before,html.appearance-changing *::after { transition:none!important; }
body { font-size:1rem; line-height:1.55; }
h1 { font-size:clamp(1.6rem,2.4vw,2rem); line-height:1.25; letter-spacing:-.035em; }
h2 { font-size:1.125rem; line-height:1.4; }
h3 { font-size:.9375rem; line-height:1.45; }
p,li { overflow-wrap:anywhere; }
small,.small { font-size:.75rem; line-height:1.6; }
button,input,select,textarea { font:inherit; }
button { white-space:normal; overflow-wrap:anywhere; }
input,select,textarea { min-width:0; }
svg.icon { flex-shrink:0; }
img { max-width:100%; }
.main,.panel,.panel-body,.panel-head,.grid-main,.grid-two,.grid-three,.stack,.form-grid,
.field,.row>div,.between>div,.flex>div,.page-actions>div,.conversation-main,.message-area,
.profile-grid>div,.rule-box,.rule-part,.protocol { min-width:0; }
.grid-main>*,.grid-two>*,.grid-three>*,.form-grid>* { min-width:0; }
.material-title,.technical-id,.bubble,.original-body,.note,.file-line,.attachment-link,
.panel-foot,.drawer header h2,.reference-card { overflow-wrap:anywhere; word-break:normal; }
.btn { min-height:40px; font-size:.875rem; line-height:1.4; padding:9px 13px; max-width:100%; }
.btn.icon-btn { width:38px; min-width:38px; min-height:38px; flex:none; }
.badge,.material-card .badge,.runtime .badge { font-size:.75rem; line-height:1.5; height:auto; white-space:normal; max-width:100%; }
.chip { font-size:.8125rem; white-space:normal; }
.field label,.field-label,.filters .field label { font-size:.875rem; line-height:1.5; letter-spacing:0; }
.field input,.field select,.field textarea,
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),select,textarea {
  min-height:42px; font-size:.9375rem; line-height:1.5;
}
.filters input,.filters select { min-height:40px!important; font-size:.875rem!important; }
.filters { flex-wrap:wrap; gap:14px; }
.filters .field { min-width:0; flex:1 1 145px; }
.form-actions,.page-actions { flex-wrap:wrap; }
.form-actions>.btn { min-width:0; }
.panel p,.panel-head p,.note p,.desc,.page-head .desc { font-size:.875rem; line-height:1.65; }
.panel-foot,.note,.empty p { font-size:.875rem; line-height:1.6; }
.panel-head { flex-wrap:wrap; align-items:center; }
.panel-head>div:first-child { flex:1 1 200px; }
.empty strong { font-size:1rem; }
.eyebrow { font-size:.75rem; letter-spacing:.12em; line-height:1.5; }
.row { flex-wrap:wrap; }
.row .grow { min-width:0; flex:1 1 160px; }
.row .material-title,.material-title { font-size:.9375rem; line-height:1.5; }
.row small,.row .right small,.technical-id,.material-card .technical-id { font-size:.75rem; line-height:1.6; letter-spacing:.01em; }
.row .right strong { font-size:.875rem; }
.material-tags,.material-bottom small { font-size:.75rem; line-height:1.6; }
.material-bottom { gap:8px; flex-wrap:wrap; }
.material-card .btn { width:36px; min-width:36px; min-height:36px; }
.material-card .avatar { width:30px; height:30px; font-size:.75rem; }
.kpis { grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); }
.kpi { min-width:0; height:auto; min-height:140px; }
.kpi .kpi-label { font-size:.875rem; line-height:1.45; max-width:calc(100% - 30px); }
.kpi small { font-size:.75rem; line-height:1.5; }
.kpis.stages { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.kpis.stages .kpi { min-height:126px; padding:16px; }
.kpis.stages .kpi-label { font-size:.875rem; min-height:0; max-width:100%; }
.kpis.stages small { font-size:.75rem; line-height:1.5; }
.segmented { flex-wrap:wrap; gap:4px; max-width:100%; }
.segmented button { min-height:36px; font-size:.875rem; line-height:1.4; white-space:normal; }
.tabs button,.drawer .tabs button { font-size:.875rem; min-height:46px; flex-shrink:0; }
.kanban { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
.kanban-col { min-width:0; }
.kanban-col header { font-size:.875rem; line-height:1.5; }
.table-wrap { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
table { min-width:660px; }
th { font-size:.75rem; line-height:1.5; white-space:normal; }
td { font-size:.875rem; line-height:1.6; overflow-wrap:anywhere; }
td small { font-size:.75rem; }
.workflow-caption { flex-wrap:wrap; line-height:1.5; }
.workflow-visual { min-width:0; }
.tower-owner>span:last-child { overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.overview-kpi { min-height:192px; }
.activity-item>div { min-width:0; }
.activity-item strong { font-size:.875rem; }
.queue-hero h2 { line-height:1.35; overflow-wrap:anywhere; }
.queue-hero .between { flex-wrap:wrap; }
.dark-panel p,.queue-hero .chip,.queue-hero .muted { font-size:.875rem; }
.rule-grid,.check-grid,.capabilities-grid,.protocol-meta,.steps { min-width:0; }
.rule-part,.rule-part p,.rule-part li,.check-card p,.provider p,.step p { font-size:.875rem; line-height:1.6; }
.rule-part b,.check-card small,.qa-check small { font-size:.75rem; line-height:1.5; }
.rule-controls { flex-wrap:wrap; }
.protocol-meta>div,.original-body { font-size:.875rem; line-height:1.65; }
.protocol .original-body { overflow-wrap:anywhere; }
.message-meta { flex-wrap:wrap; font-size:.75rem; }
.bubble { font-size:.9375rem; line-height:1.6; }
.composer .flex { align-items:flex-end; }
.composer textarea { flex:1; }
.conversation-left p,.quick-question { font-size:.875rem; line-height:1.6; }
.dropzone { font-size:.875rem; }
.calendar-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-grid .weekday { font-size:.75rem; line-height:1.5; min-width:0; }
.calendar-grid .day { min-width:0; font-size:.875rem; }
.calendar-grid .day .dot { flex:none; }
.drawer { width:50vw; max-width:100%; }
.drawer header h2 { padding-right:35px; }
.drawer-actions { flex-wrap:wrap; gap:8px; }
.modal { max-height:calc(100dvh - 32px); overflow:auto; width:min(660px,100%); }
.modal-head { position:sticky; top:0; z-index:2; gap:16px; align-items:flex-start; }
.modal-head h2 { min-width:0; overflow-wrap:anywhere; }
.modal-head .btn { flex:none; }
.modal .menu-item { min-width:0; }
#toast { max-width:calc(100vw - 32px); overflow-wrap:anywhere; font-size:.875rem; line-height:1.5; }

/* Give navigation its own scroll region even when the workspace grows. */
.sidebar { width:var(--sidebar); max-width:calc(100vw - 36px); }
.brand { flex-shrink:0; padding:22px 22px 14px; }
.brand-product { margin-top:15px; }
.brand-product>span { font-size:.75rem; letter-spacing:.08em; }
.runtime { flex-shrink:0; margin:0 22px 12px; font-size:.75rem; flex-wrap:wrap; }
.nav-scroll { min-height:80px; padding:0 12px 12px; }
.nav-title { font-size:.75rem; letter-spacing:.1em; margin:10px 12px; }
.nav-link { font-size:.875rem; line-height:1.45; min-height:42px; padding:9px 11px; gap:10px; }
.nav-link .icon { width:18px; height:18px; }
.nav-link .count { font-size:.75rem; min-width:24px; min-height:22px; flex:none; }
html[data-appearance] .nav-link[aria-current="page"] .count { color:var(--accent-contrast); background:var(--accent); }
.kpi[aria-pressed="true"]::after { color:var(--accent-contrast); }
.bar-value { font-size:.75rem; line-height:1.5; }
.bar-person,.bar-person span,.bar-person strong,.bar-person small { font-size:.75rem; line-height:1.5; }
.protocol-meta small { font-size:.75rem; line-height:1.5; }
.sidebar-bottom { padding:12px 20px 16px; flex-shrink:0; }
.side-label,.side-box select,.side-organize { font-size:.75rem; line-height:1.5; letter-spacing:0; }
.side-box p,.side-account small { font-size:.75rem; line-height:1.5; }
.side-box select { max-width:100%; min-height:36px; }
.side-account strong { font-size:.875rem; }
.side-account { background:var(--paper); border-color:var(--line); padding:10px 8px; border-radius:10px; }
.side-account>div { min-width:0; flex:1; }
.side-account strong { overflow-wrap:anywhere; }
.filters .clear { color:var(--muted); font-size:.875rem; min-height:40px; }
.notification-button .count { font-size:.75rem; min-width:20px; min-height:20px; }
.notification-button .count { color:var(--accent-contrast); }
.field small,.step .number,.sound-card small { font-size:.75rem; line-height:1.5; }
.sound-card strong { font-size:.875rem; line-height:1.5; color:var(--ink); }
.sound-btn { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; min-width:0; }
.sound-btn>span { min-width:0; }
.sound-btn strong { color:var(--ink); font-size:.875rem; line-height:1.5; overflow-wrap:anywhere; }
.sound-btn small { color:var(--muted); font-size:.75rem; line-height:1.5; }
.drawer-stat small { font-size:.875rem; line-height:1.5; letter-spacing:0; text-transform:none; }
.drawer-stat { height:auto; }
.ribbon,.preview-card .ribbon { font-size:.75rem; line-height:1.4; padding:3px 8px; background:#8bdce5; color:#10333a; }
.preview-card { padding-top:34px; }
.delete-ribbon { font-size:.75rem; line-height:1.4; position:static; display:block; margin:-4px 0 10px; width:fit-content; }
html[data-appearance="light"] .ribbon { background:#b8eaf0; color:#103e47; }
html[data-appearance="light"] .rule-part.condition b { color:var(--day-amber-ink); }
html:not([data-appearance="light"]) .rule-part b { color:#aecdf5; }
html:not([data-appearance="light"]) .rule-part.condition b { color:#efca8a; }
html:not([data-appearance="light"]) .rule-part.action b { color:#dfb9ed; }
.theme-dot { width:20px; height:20px; flex:none; }
.theme-dots { flex-wrap:wrap; }
.topbar { gap:18px; height:auto; min-height:80px; padding:12px 28px; }
.topbar .search { min-width:100px; flex:1 1 200px; max-width:480px; }
.topbar .search input { width:100%; min-width:0; max-width:none; font-size:.875rem; min-height:40px; }
.topbar-right { flex-shrink:0; gap:10px; }
.topbar-user strong { font-size:.875rem; }
.topbar-user small,.sync-badge { font-size:.75rem; }
.main { padding:110px 28px 44px; }
.studio-evaluation { font-size:.75rem; line-height:1.5; flex-wrap:wrap; padding-bottom:20px; }
.appearance-option { min-height:34px; font-size:.8125rem; }
.topbar .icon-btn { min-width:36px; min-height:36px; }

/* The film is framed independently of form height, preserving faces and books. */
.studio-login { grid-template-columns:minmax(400px,46%) minmax(0,54%); align-items:start; }
.studio-login-pane { min-height:100dvh; padding:30px clamp(24px,5vw,84px) 24px; }
.studio-login-top,.studio-login-foot { width:100%; max-width:420px; margin-left:auto; margin-right:auto; }
.studio-login-logo { width:232px; max-width:100%; }
.studio-login-tools { flex-wrap:wrap; gap:10px; margin-top:18px; }
.studio-login-tools .studio-edition { font-size:.75rem; line-height:1.4; letter-spacing:.08em; }
.studio-login-center { max-width:420px; margin:36px auto 28px; }
.studio-login-center>.eyebrow { font-size:.75rem; line-height:1.6; letter-spacing:.04em; margin-bottom:16px; }
.studio-login h1 { font-size:clamp(1.65rem,2.6vw,2.25rem); line-height:1.22; letter-spacing:-.035em; white-space:normal; }
.studio-login-desc { font-size:1rem; line-height:1.6; margin:16px 0 24px; }
.studio-form-heading { padding-top:20px; margin-bottom:12px; }
.studio-form-heading h2 { font-size:1.0625rem; }
.studio-form-heading p { font-size:.875rem; }
.studio-login-form { gap:8px; }
.studio-login-form .between { flex-wrap:wrap; gap:8px; }
.studio-login-form .between label { margin:0; align-self:center; }
.studio-login-form label { font-size:.875rem; line-height:1.5; }
.studio-login-form .login-field { min-height:46px; }
.studio-login-form .login-field input { font-size:1rem; }
.studio-login-form .login-link { font-size:.875rem; line-height:1.5; min-height:28px; }
.studio-login-form .login-password button { min-width:34px; min-height:34px; justify-content:center; }
.studio-login-form .studio-enter,.studio-login-form .google-button { font-size:.9375rem; min-height:46px; line-height:1.4; }
.studio-login-divider { font-size:.75rem; }
.studio-access { padding:14px; }
.studio-access p,.studio-access .badge { font-size:.75rem; line-height:1.6; }
.studio-access select { font-size:.875rem; min-height:40px; }
.studio-login-foot { flex-wrap:wrap; font-size:.75rem; line-height:1.5; gap:8px; }
.studio-login-art.login-reel { position:sticky; top:0; height:100dvh; min-height:540px; }
.reel-media { position:relative; inset:auto; flex:1 1 0; min-height:0; width:100%; }
.reel-video { object-fit:cover; width:100%; height:100%; }
.reel-heading { inset:18px 20px auto; gap:12px; letter-spacing:.06em; }
.reel-heading>span:first-child { max-width:260px; }
.reel-heading>span:last-child { flex:none; align-self:flex-start; }
.reel-controls { padding:16px 22px 14px; }
.reel-controls-top { align-items:center; flex-wrap:wrap; gap:10px; }
.reel-controls-top>[data-reel-label] { flex:1 1 160px; font-size:.875rem; line-height:1.5; }
.reel-motion { display:inline-flex; align-items:center; gap:8px; color:#e4eff7; font-size:.75rem; cursor:pointer; min-height:32px; }
.reel-motion input { appearance:auto; accent-color:#8ddce8; width:16px; height:16px; margin:0; }
.reel-motion input:focus-visible { outline:2px solid #d2f3f8; outline-offset:4px; }
.reel-status:empty { display:none; }
.reel-selectors { grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; margin-top:6px; }
.reel-selectors button { text-align:center; min-height:44px; }
.reel-number { letter-spacing:0; }

/* A single owner for the login-to-home transition; never an intrinsic-size image. */
.login-transition { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; background:var(--bg); color:var(--ink); opacity:1; transition:opacity 180ms ease; }
.login-transition.is-leaving { opacity:0; pointer-events:none; }
.login-transition-content { display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; width:min(100%,360px); }
.login-transition .login-transition-logo { width:min(232px,70vw); max-width:100%; flex:none; }
.login-transition .estilotech-mark img { width:100%; height:auto!important; max-width:100%; object-fit:contain; }
.login-transition-content p { font-size:.875rem; line-height:1.5; color:var(--muted); margin:0; }
.login-transition-line { display:block; width:144px; height:3px; overflow:hidden; border-radius:99px; background:var(--line); }
.login-transition-line i { display:block; width:45%; height:100%; background:var(--accent); animation:studio-loading 1.1s ease-in-out infinite alternate; }
@keyframes studio-loading { from { transform:translateX(-15%); } to { transform:translateX(140%); } }

/* Night text cannot inherit dark daytime-only status colors from legacy panels. */
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:20px; align-items:start; }
.resource-card { border:1px solid var(--line); border-radius:12px; background:var(--bg); min-width:0; }
.resource-card summary { display:flex; gap:12px; align-items:center; cursor:pointer; list-style:none; padding:18px; }
.resource-card summary::-webkit-details-marker { display:none; }
.resource-card summary>.icon { width:16px; height:16px; color:var(--muted); margin-left:auto; }
.resource-card[open] summary>.icon { transform:rotate(180deg); }
.resource-card summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:10px; }
.resource-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent-light); color:var(--accent); flex:none; }
.resource-heading { display:flex; flex-direction:column; gap:7px; align-items:flex-start; min-width:0; }
.resource-heading strong { font-size:.9375rem; line-height:1.45; overflow-wrap:anywhere; }
.resource-heading .badge { font-size:.75rem; }
.resource-body { padding:0 18px 18px; border-top:1px solid var(--line); }
.resource-body ul { padding-left:20px; margin:16px 0; font-size:.875rem; line-height:1.75; }
.resource-body p { color:var(--muted); font-size:.875rem; line-height:1.6; margin-bottom:16px; }
@media(max-width:760px) { .resource-grid { grid-template-columns:minmax(0,1fr); padding:16px; } }
html:not([data-appearance="light"]) :is(.muted,.desc,.page-head .desc,.panel p,.panel-head p,.panel-foot,.note p,.empty,.empty p,.empty strong,.kpi small,.technical-id,.material-tags,.material-card .technical-id,.material-bottom small,.side-box p,.search input::placeholder) { color:var(--readable-muted); }
html:not([data-appearance="light"]) :is(.studio-login-desc,.studio-form-heading p,.studio-access p,.studio-login-form .activate,.studio-login-center>.eyebrow) { color:#bbaac7; }
html:not([data-appearance="light"]) :is(input,textarea)::placeholder { color:#ae9fba; opacity:1; }
html:not([data-appearance="light"]) button:disabled { opacity:1; color:#b5a9c1; background:#28232f; border-color:#53465e; }
html:not([data-appearance="light"]) .attachment-link small { color:#b5a6c3; }
html:not([data-appearance="light"]) .rule-part.condition { color:#eee0cc; }
html:not([data-appearance="light"]) .rule-part.action { color:#dfc6ed; }
html[data-appearance="light"] .history-group summary { background:var(--day-surface); color:var(--ink); border-color:var(--line); }
html[data-appearance="light"] .attachment-link { background:var(--day-blue-bg); color:var(--day-blue-ink); border-color:#bbcee8; }
html[data-appearance="light"] .attachment-link:hover { background:#dce9fa; }
html[data-appearance="light"] .attachment-link small { color:#465674; }
html[data-appearance="light"] .dropzone.selected { background:var(--day-green-bg); color:var(--day-green-ink); border-color:#b2d2bf; }

@media(min-width:1550px) { .main { padding-left:40px; padding-right:40px; } }
@media(max-width:1180px) {
  :root { --sidebar:248px; }
  .grid-main { grid-template-columns:minmax(0,1fr); }
  .topbar .sync-badge { display:none; }
  .studio-login { grid-template-columns:minmax(360px,47%) minmax(0,53%); }
  .studio-login-pane { padding:26px 28px; }
  .reel-selectors { grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px 12px; }
}
@media(max-width:900px) {
  .sidebar { width:280px; }
  .main { margin-left:0; }
  .topbar { left:0; }
  .topbar .search { min-width:0; }
  .studio-login { grid-template-columns:minmax(340px,49%) minmax(0,51%); }
  .studio-login-pane { padding:24px; }
  .studio-login-logo { width:216px; }
}
@media(max-height:800px) and (min-width:901px) {
  .sidebar-bottom .side-box p { display:none; }
  .sidebar-bottom { gap:2px; }
  .brand { padding-top:16px; }
  .brand .estilotech-mark { width:172px; }
}
@media(max-width:760px) {
  .studio-login { display:flex; flex-direction:column; }
  .studio-login-pane { width:100%; min-height:100dvh; padding:26px 24px; }
  .studio-login-center { margin-top:30px; }
  .studio-login-art.login-reel { display:flex; position:relative; width:100%; height:auto; min-height:0; }
  .reel-media { flex:none; aspect-ratio:4/5; min-height:0; max-height:800px; }
  .reel-heading { inset:18px 18px auto; font-size:.75rem; }
  .grid-two,.grid-three,.grid-main { grid-template-columns:minmax(0,1fr); }
  .row>.grow { flex-basis:150px; }
  .capacity-row { flex-wrap:wrap; gap:12px; }
  .steps,.sound-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .table-wrap { border-radius:8px; }
  .panel-head,.panel-body { padding:18px; }
  .page-actions { gap:16px; }
  .banner .btn { font-size:.875rem; }
  .floating-chat { font-size:.875rem; max-width:calc(100vw - 32px); }
}
@media(max-width:650px) {
  .topbar { min-height:108px; padding:10px 16px; gap:8px; align-items:center; }
  .topbar .search { order:3; flex-basis:100%; max-width:none; }
  .topbar .search input { font-size:1rem; min-height:32px; }
  .topbar-right { margin-left:auto; gap:5px; }
  .topbar .appearance-option { font-size:.75rem; min-height:32px; }
  .main { padding:140px 16px 96px; }
  .studio-evaluation { font-size:.75rem; }
  .overview-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-kpi { padding:14px; min-height:182px; }
  .overview-kpi-top { flex-wrap:wrap; }
  .overview-kpi-value { font-size:2rem; }
  .overview-kpi-action { font-size:.75rem; }
  .kpis.stages { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kanban { grid-template-columns:repeat(4,min(290px,85vw)); }
  .filters .field { flex:1 1 125px; min-width:0; }
  .drawer header { padding:24px 18px; }
  .drawer-body { padding:18px; }
  .drawer .tabs { padding:0 14px; }
  .drawer .tabs button { font-size:.875rem; }
  .calendar-grid .day { min-height:46px; height:auto; padding:7px 2px; }
  .calendar-grid .weekday { font-size:.75rem; letter-spacing:0; }
  .modal-body { padding:18px; }
  .form-actions { justify-content:flex-start; }
  .form-actions>.btn { flex:1 1 auto; }
}
@media(max-width:380px) {
  .studio-login-pane { padding:24px 20px; }
  .studio-login h1 { font-size:1.6rem; }
  .overview-kpis { grid-template-columns:1fr; }
  .steps,.sound-grid,.capabilities-grid { grid-template-columns:1fr; }
  .reel-controls { padding:14px 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .login-transition { transition:none; }
  .login-transition-line i { animation:none; width:100%; opacity:.7; }
}

/* Material details occupy half the desktop page; smaller screens use all available width. */
.drawer { overflow-x:hidden; }
.drawer header { padding:22px 16px 18px; }
.drawer header h2 { padding-right:14px; font-size:1.125rem; }
.drawer header>.flex { padding-right:28px; }
.drawer .close { top:16px; right:12px; }
.drawer-body { padding:16px; gap:16px; }
.drawer-tab-options { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:0 20px 12px; }
.drawer-tab-options>span { font-size:.875rem; color:var(--muted); }
.card-tabs-mode[aria-pressed="true"] { color:var(--ink); background:var(--accent-light); border-color:var(--accent); }
.drawer>.tabs {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px; padding:6px 14px; overflow:visible; white-space:normal; align-items:stretch;
  border-bottom:1px solid var(--line);
}
.drawer>.tabs>button {
  position:relative; min-width:0; width:100%; min-height:48px; padding:8px;
  display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:7px;
  font-size:.875rem; line-height:1.45; white-space:normal; overflow-wrap:normal; word-break:normal;
  border:1px solid transparent; border-radius:7px;
}
.drawer>.tabs>button>.icon { width:20px; height:20px; flex:none; }
.card-tab-label { min-width:0; overflow-wrap:anywhere; }
.card-tab-tooltip { display:none; position:absolute; z-index:8; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:max-content; max-width:min(18rem,70vw); padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); box-shadow:0 5px 18px #0003; font-size:.875rem; line-height:1.5; pointer-events:none; }
.drawer[data-tabs-icons-only="true"]>.tabs { grid-template-columns:repeat(8,minmax(0,1fr)); }
.drawer[data-tabs-icons-only="true"]>.tabs>button { justify-content:center; min-height:52px; }
.drawer[data-tabs-icons-only="true"] .card-tab-label { display:none; }
.drawer[data-tabs-icons-only="true"]>.tabs>button>.badge { position:absolute; top:0; right:0; font-size:.75rem; }
.drawer[data-tabs-icons-only="true"]>.tabs>button:is(:hover,:focus-visible)>.card-tab-tooltip { display:block; }
.drawer>.tabs>button:first-child>.card-tab-tooltip { left:0; transform:none; }
.drawer>.tabs>button:last-child>.card-tab-tooltip { left:auto; right:0; transform:none; }
.drawer>.tabs>button[aria-selected="true"] { background:var(--accent-light); border-color:var(--accent); color:var(--ink); }
html[data-appearance="light"] .drawer>.tabs>button[aria-selected="true"] { background:var(--day-purple-bg); color:var(--day-purple-ink); border-color:var(--accent); }
.drawer>.tabs>button>.badge { padding:0 5px; font-size:.75rem; line-height:1.5; min-width:20px; justify-content:center; }
.drawer-body :is(.grid-main,.grid-two,.grid-three,.form-grid) { grid-template-columns:minmax(0,1fr); }
.drawer-grid { gap:8px; }
.drawer-stat { padding:12px; border-radius:10px; min-width:0; }
.drawer-stat small { font-size:.8125rem; }
.drawer :is(.between,.panel-head,.row,.proof-tabs,.flex,.qa-check) { flex-wrap:wrap; min-width:0; }
.drawer :is(.panel-head>div,.row>div,.reference-card) { min-width:0; max-width:100%; }
.drawer .row>.grow { min-width:0; }
.drawer .panel-head { align-items:flex-start; gap:10px; }
.drawer .panel-head,.drawer .panel-body { padding:14px; }
.drawer .panel-head h2,.drawer .panel-body h2 { font-size:1rem; }
.drawer .note { padding:12px; }
.drawer .note .flex { gap:7px; }
.drawer .note .flex strong { flex:1 1 150px; }
.drawer .btn { white-space:normal; overflow-wrap:anywhere; }
.drawer .table-wrap { width:100%; }
@media(max-width:350px) {
  .drawer>.tabs { padding-left:5px; padding-right:5px; gap:2px; }
  .drawer-body { padding:12px; }
}

/* One role-aware work sequence in Summary; all actions reuse their existing handlers. */
.work-guide { min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.work-guide-heading { padding:15px 13px; border-bottom:1px solid var(--line); }
.work-guide-kicker { display:block; color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:.06em; margin-bottom:7px; }
.work-guide-heading h2 { font-size:1rem; line-height:1.5; }
.work-guide p { font-size:.875rem; color:var(--muted); line-height:1.55; margin:8px 0; overflow-wrap:anywhere; }
.work-guide ol { list-style:none; padding:0; margin:0; }
.work-guide-step { padding:14px 12px; border-bottom:1px solid var(--line); min-width:0; }
.work-guide-step:last-child { border:0; }
.work-guide-step-head { display:flex; gap:9px; align-items:flex-start; }
.work-guide-step-head h3 { font-size:.9375rem; line-height:1.5; }
.work-guide-number { width:27px; height:27px; border:1px solid var(--line); border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:.75rem; font-weight:700; }
.work-guide-number .icon { width:17px; height:17px; }
.work-guide-state { display:block; color:var(--muted); font-size:.75rem; line-height:1.5; margin-top:3px; }
.work-guide-step.is-done .work-guide-number { color:var(--sla-finalizing); border-color:var(--sla-finalizing); }
.work-guide-step-body { margin-top:12px; min-width:0; }
.work-guide-actions { display:flex; flex-direction:column; gap:8px; }
.work-guide .btn { width:100%; justify-content:flex-start; min-height:42px; text-align:left; font-size:.875rem; }
.work-guide details { margin:12px 0 0; }
.work-guide summary { cursor:pointer; color:var(--ink); font-size:.875rem; line-height:1.5; padding:5px 0; }
.work-guide details>div { padding-top:10px; }
.work-guide .qa-check { padding:10px 0; gap:8px; }
.work-guide .qa-check .number { display:none; }
.work-guide .qa-check .grow { flex:1 1 150px; }
.work-guide .qa-check h3 { font-size:.875rem; }
.work-guide .qa-check small { font-size:.8125rem; }
.work-guide .qa-check input { flex:none; }
.work-guide .panel { background:transparent; }
.work-guide .panel-body { padding:10px; }
.work-guide .panel-body h3 { font-size:.875rem; }
.work-guide-warning { color:var(--sla-attention)!important; padding:10px; border:1px solid var(--line); border-radius:8px; }
.work-guide-heading+p.work-guide-warning { margin:10px; }

:root { --guide-complete-bg:#332347; --guide-complete-ink:#dfc3ff; --guide-complete-border:#a079cb; }
html[data-appearance="light"] { --guide-complete-bg:#eee4fc; --guide-complete-ink:#5b288e; --guide-complete-border:#9063bf; }
.work-guide-step.is-done .work-guide-number { color:var(--guide-complete-ink); border-color:var(--guide-complete-border); background:var(--guide-complete-bg); }
.work-guide-step.is-done .work-guide-state { color:var(--guide-complete-ink); }
.work-guide .work-guide-completed,.work-guide .work-guide-completed:disabled { color:var(--guide-complete-ink)!important; background:var(--guide-complete-bg)!important; border-color:var(--guide-complete-border)!important; opacity:1; }
.work-guide-step.is-done .work-guide-checklist>summary { background:var(--guide-complete-bg); color:var(--guide-complete-ink); border:1px solid var(--guide-complete-border); border-radius:7px; padding:9px; }
.work-guide .qa-check:has(input:checked) { padding:10px 8px; border-radius:8px; background:var(--guide-complete-bg); border-color:var(--guide-complete-border); }
.work-guide .qa-check:has(input:checked) :is(h3,small) { color:var(--guide-complete-ink); }
.work-guide .qa-check input:checked { accent-color:#8746bd; }
.work-guide .work-guide-completed+.between { margin-top:14px; }

/* Completion uses a fixed semantic purple, independent of the personal accent. */
:root {
  --toggle-off:#4a4255; --toggle-border:#9687a7; --toggle-thumb:#fff;
  --toggle-on:#b59af7; --toggle-on-border:#c4b5fd; --toggle-on-thumb:#241334;
}
html[data-appearance="light"] {
  --toggle-off:#e1e7f0; --toggle-border:#61718a; --toggle-thumb:#334155;
  --toggle-on:#6d28d9; --toggle-on-border:#5b21b6; --toggle-on-thumb:#fff;
}
html[data-appearance] input.toggle {
  appearance:none; width:46px; height:26px; min-height:26px; padding:0;
  border:2px solid var(--toggle-border); border-radius:20px;
  background:var(--toggle-off); opacity:1; flex:none;
}
html[data-appearance] input.toggle::after {
  content:""; display:grid; place-items:center; position:absolute;
  width:18px; height:18px; left:2px; top:2px; border-radius:50%;
  background:var(--toggle-thumb); box-shadow:none; transition:left .15s;
  font:900 13px/1 system-ui;
}
html[data-appearance] input.toggle:checked { background:var(--toggle-on); border-color:var(--toggle-on-border); }
html[data-appearance] input.toggle:checked::after {
  content:"✓"; left:22px; background:var(--toggle-on-thumb); color:var(--toggle-on);
}
html[data-appearance] input.toggle:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
html[data-appearance] input.toggle:disabled { opacity:1; cursor:not-allowed; }
.qa-control { display:flex; flex:none; flex-direction:column; align-items:center; gap:6px; min-width:78px; margin-inline-start:auto; }
.qa-state { color:var(--muted); font-size:.75rem; font-weight:600; line-height:1.4; white-space:nowrap; }
.qa-state-on { display:none; }
.qa-control:has(input:checked) .qa-state-on { display:inline; }
.qa-control:has(input:checked) .qa-state-off { display:none; }
.qa-check:has(.toggle:checked) { background:var(--guide-complete-bg); border-color:var(--guide-complete-border); }
.qa-check:has(.toggle:checked) :is(h3,small,.qa-state) { color:var(--guide-complete-ink); }
@media (prefers-reduced-motion:reduce) { html[data-appearance] input.toggle::after { transition:none; } }
@media (forced-colors:active) {
  html[data-appearance] input.toggle { forced-color-adjust:none; background:Canvas; border-color:ButtonText; }
  html[data-appearance] input.toggle::after { background:ButtonText; }
  html[data-appearance] input.toggle:checked { background:Highlight; border-color:Highlight; }
  html[data-appearance] input.toggle:checked::after { background:HighlightText; color:Highlight; }
}

/* Reserve the leading icon's space so the search placeholder never overlaps it. */
#global-search { padding-left:40px; }
@media(max-width:650px) { #global-search { padding-left:10px; } }
.work-guide-step.is-done :is([data-action="work-guide.tab"],[data-action="material.assign"],[data-action="material.sla"]) { color:var(--guide-complete-ink)!important; background:var(--guide-complete-bg)!important; border-color:var(--guide-complete-border)!important; }
.drawer { container:material / inline-size; }
@media(max-width:760px) { .drawer { width:100vw; } }
@container material (max-width:32rem) {
  .drawer>.tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .drawer[data-tabs-icons-only="true"]>.tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container material (min-width:36rem) {
  .drawer header { padding:26px 24px 20px; }
  .drawer-body { padding:24px; }
  .drawer-body :is(.grid-two,.grid-three,.form-grid),.drawer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container material (max-width:18rem) {
  .drawer-grid { grid-template-columns:minmax(0,1fr); }
  .drawer-body :is(.flex,.between,.row) { flex-wrap:wrap; }
  .drawer-body .grow { flex-basis:100%; min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .drawer-body :is(small,h3,.badge) { overflow-wrap:anywhere; max-width:100%; }
}

/* Plugin activity and the card history read the same event records. */
.corrections-plugin-usage { margin-top:20px; }
.plugin-usage-list { display:grid; gap:14px; margin-top:16px; }
.plugin-usage-event { display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:start; padding-top:14px; border-top:1px solid var(--line); }
.plugin-usage-event .tile-icon { width:36px; height:36px; display:grid; place-items:center; }
.plugin-usage-event .tile-icon .icon { width:22px; height:22px; }
.plugin-usage-event p { margin:6px 0; overflow-wrap:anywhere; }
.plugin-usage-event small { color:var(--muted); }

.drawer-progress { margin-top:16px; padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:10px; }
.drawer-progress .workflow-visual { margin:0; }
.drawer-progress .workflow-caption { color:var(--muted); font-size:.8125rem; }
.drawer-progress .workflow-caption strong { font-size:.875rem; }
.drawer-progress .workflow-total { height:7px; }

/* Account appearance and a desktop icon rail. Mobile keeps its full drawer. */
.appearance-settings-body { display:grid; gap:28px; }
.appearance-setting { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.appearance-setting p,.appearance-hint { margin:6px 0 14px; max-width:65ch; }
.theme-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.theme-choice { display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--paper); text-align:left; font:inherit; cursor:pointer; }
.theme-choice:hover { border-color:var(--accent); }
.theme-choice[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--paper)); }
.theme-swatch { width:22px; height:22px; border-radius:7px; background:var(--swatch); flex:none; border:1px solid #ffffff50; }
.theme-check { margin-left:auto; opacity:0; display:flex; color:var(--accent); }
.theme-choice[aria-pressed="true"] .theme-check { opacity:1; }
.theme-choice:disabled { opacity:.65; cursor:not-allowed; }
.sidebar-heading { position:relative; flex-shrink:0; }
.sidebar-toggle { position:absolute; right:14px; bottom:12px; min-width:36px; min-height:36px; background:color-mix(in srgb,var(--sidebar-hue) 10%,transparent); }
.sidebar-toggle .icon { transform:rotate(180deg); }
.sidebar-symbol,.sidebar-compact-only,.release-rail-icon { display:none; }
.sidebar .nav-link { position:relative; }
.sidebar .nav-label { min-width:0; }
.account-settings { display:flex; padding:0; border:0; background:transparent; cursor:pointer; border-radius:50%; }
.sidebar-tooltip { position:fixed; z-index:400; max-width:min(250px,calc(100vw - 108px)); padding:10px 14px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); box-shadow:0 10px 30px #0003; pointer-events:none; font-size:13px; line-height:1.4; }
.release-link .release-expanded { display:flex; align-items:center; gap:8px; }
@media(min-width:901px) {
  html[data-sidebar-collapsed="true"] { --sidebar:76px; }
  html[data-sidebar-collapsed="true"] .sidebar { width:76px; }
  html[data-sidebar-collapsed="true"] .main { margin-left:76px; }
  html[data-sidebar-collapsed="true"] .topbar { left:76px; }
  html[data-sidebar-collapsed="true"] .sidebar .brand { padding:18px 0 4px; display:flex; justify-content:center; }
  html[data-sidebar-collapsed="true"] .sidebar-symbol { display:block; width:36px; height:36px; object-fit:contain; }
  html[data-sidebar-collapsed="true"] .sidebar-full-brand,
  html[data-sidebar-collapsed="true"] .sidebar .brand-product,
  html[data-sidebar-collapsed="true"] .sidebar .runtime,
  html[data-sidebar-collapsed="true"] .sidebar .nav-title,
  html[data-sidebar-collapsed="true"] .sidebar .nav-label,
  html[data-sidebar-collapsed="true"] .sidebar .sidebar-control-label,
  html[data-sidebar-collapsed="true"] .sidebar .sidebar-expanded-only,
  html[data-sidebar-collapsed="true"] .sidebar .side-account>.grow,
  html[data-sidebar-collapsed="true"] .sidebar .release-expanded { display:none; }
  html[data-sidebar-collapsed="true"] .sidebar-toggle { position:static; display:flex; margin:4px auto 14px; width:44px; height:36px; }
  html[data-sidebar-collapsed="true"] .sidebar-toggle .icon { transform:none; }
  html[data-sidebar-collapsed="true"] .sidebar .nav-scroll { padding:0 10px 12px; scrollbar-width:none; }
  html[data-sidebar-collapsed="true"] .sidebar .nav-scroll::-webkit-scrollbar { display:none; }
  html[data-sidebar-collapsed="true"] .sidebar .nav-link { justify-content:center; padding:12px 0; min-height:46px; gap:0; }
  html[data-sidebar-collapsed="true"] .sidebar .nav-link>.icon { width:21px; height:21px; flex:none; }
  html[data-sidebar-collapsed="true"] .sidebar .nav-link>.count { position:absolute; right:1px; top:1px; font-size:9px; min-width:16px; height:16px; padding:0 3px; }
  html[data-sidebar-collapsed="true"] .sidebar-bottom { padding:10px; gap:4px; }
  html[data-sidebar-collapsed="true"] .sidebar .side-organize { display:flex; justify-content:center; align-items:center; margin:0; padding:10px; min-height:40px; width:100%; }
  html[data-sidebar-collapsed="true"] .sidebar .side-account { flex-direction:column; padding:10px 0 0; gap:8px; border:0; background:transparent; }
  html[data-sidebar-collapsed="true"] .sidebar .release-notice { padding:0; border:0; background:none; }
  html[data-sidebar-collapsed="true"] .sidebar .release-link { display:flex; width:100%; justify-content:center; min-height:40px; padding:8px; background:color-mix(in srgb,var(--sidebar-hue) 18%,transparent); border-radius:10px; }
  html[data-sidebar-collapsed="true"] .sidebar .release-rail-icon { display:flex; }
}
@media(max-width:900px) { .sidebar-toggle { display:none; } }
@media(max-width:650px) { .theme-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .theme-choice { gap:8px; padding:10px; } }

.notification-intro { color:var(--muted); margin-bottom:24px; max-width:60ch; }
.notification-group+.notification-group { margin-top:26px; }
.notification-group>h3 { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; }
.notification-group>h3>span { background:var(--bg); border:1px solid var(--line); border-radius:20px; min-width:24px; padding:1px 6px; text-align:center; }
.notification-group>div { display:grid; gap:8px; }
.notification-item { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px; border-radius:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.notification-item:hover { background:color-mix(in srgb,var(--accent) 8%,var(--paper)); border-color:var(--accent); }
.notification-item.is-emergency,.notification-item.is-overdue { border-left:3px solid var(--danger); }
.notification-item.is-attention { border-left:3px solid var(--amber); }
.notification-item.is-mention { border-left:3px solid var(--accent); }
.notification-symbol { display:grid; place-items:center; flex:none; width:38px; color:var(--accent); }
.notification-symbol>.icon:not(.sla-icon) { width:24px; height:24px; }
.notification-copy { display:grid; gap:4px; min-width:0; flex:1; overflow-wrap:anywhere; }
.notification-copy>strong { font-size:14px; }
.notification-subject { font-weight:600; }
.notification-excerpt { color:var(--muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:13px; }
.notification-copy small { color:var(--muted); margin-top:3px; }
.notification-item>.icon { flex:none; width:16px; }
.conversation-channels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
.conversation-channels>[role="tab"] { display:flex; align-items:center; gap:14px; padding:20px 18px; min-height:102px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); text-align:left; }
.conversation-channels>[aria-selected="true"] { border-color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--paper)); }
.channel-icon { display:flex; color:var(--accent); }
.channel-icon>.icon { width:26px; height:26px; }
.channel-copy { min-width:0; flex:1; display:grid; gap:5px; }
.channel-copy>strong { font-size:15px; }
.channel-copy>small { font-size:12px; color:var(--muted); line-height:1.5; }
.channel-count { border-radius:20px; background:var(--accent); color:var(--accent-contrast); padding:1px 6px; font-size:11px; font-weight:700; }
.rh-mention { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.rh-mention>label { font-size:12px; color:var(--muted); }
.rh-mention>select { flex:1; min-width:0; max-width:280px; }
@media(max-width:1100px) { .conversation-channels>[role="tab"] { padding:16px 12px; gap:10px; } }
@media(max-width:760px) { .conversation-channels { grid-template-columns:1fr; gap:8px; } .conversation-channels>[role="tab"] { min-height:80px; } .notification-item { padding:12px; gap:10px; } }

/* Swatches obey the operational content security policy. */
.theme-choice[data-theme="cyan"] .theme-swatch{--swatch:#08b9dc;}
.theme-choice[data-theme="blue"] .theme-swatch{--swatch:#357fe5;}
.theme-choice[data-theme="purple"] .theme-swatch{--swatch:#8051d0;}
.theme-choice[data-theme="magenta"] .theme-swatch{--swatch:#cf319c;}
.theme-choice[data-theme="teal"] .theme-swatch{--swatch:#0eb893;}
.theme-choice[data-theme="amber"] .theme-swatch{--swatch:#e5a10b;}
.theme-choice[data-theme="orange"] .theme-swatch{--swatch:#ee741d;}
.theme-choice[data-theme="red"] .theme-swatch{--swatch:#e74d6c;}

/* Bounded startup mark, even before session validation completes. */
.loading-brand{position:relative;display:grid;place-items:center;width:88px;height:88px;}
.loading-brand img{width:64px;height:64px;object-fit:contain;}
.loading-ring{position:absolute;inset:0;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1.2s linear infinite;}
@media(prefers-reduced-motion:reduce){.loading-ring{animation:none;}}

/* Reading companions: transparent, locally rendered 3D loading scene. */
.login-reading-scene{width:min(280px,70vw);height:min(260px,35vh);flex:none;overflow:hidden}
.login-reading-scene[hidden]{display:none}
.login-reading-scene img{object-fit:contain;display:block;width:100%;height:100%}
@media(max-height:620px){.login-transition-content{gap:12px}.login-reading-scene{height:28vh;width:220px}}