/* Lá Forms 2.2 — a quieter workspace, clearer actions and honest loading states. */
:root {
  --app-canvas:#f5f7f3;
  --app-surface:#fafbf8;
  --app-surface-raised:#fff;
  --app-surface-alt:#edf3e9;
  --app-sidebar:#f0f4ed;
  --app-text:#233b2f;
  --app-secondary:#526753;
  --app-muted:#687b65;
  --app-border:#d7e1d1;
  --app-soft-border:#e7ece3;
  --app-hover:#e8f0e2;
  --app-shadow:0 8px 28px #263f2e08;
  --green:#39674d;
  --accent:#39674d;
  --ui-radius:12px;
}
html[data-appearance="dark"] {
  --app-canvas:#121c17;
  --app-surface:#1b2921;
  --app-surface-raised:#203027;
  --app-surface-alt:#2a3b2e;
  --app-sidebar:#19271e;
  --app-text:#e8eee3;
  --app-secondary:#c1d0b9;
  --app-muted:#a5b99c;
  --app-border:#3b5140;
  --app-soft-border:#314637;
  --app-hover:#2d4432;
  --app-shadow:0 8px 28px #0002;
}
button,input,select,textarea,a { touch-action:manipulation }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #69935d;
  outline-offset:3px;
}
.btn { min-height:42px; border-radius:8px; font-size:calc(14px * var(--applied-scale)); padding:11px 16px; box-shadow:none }
.btn.primary { box-shadow:0 2px 4px #224a2d10 }
.btn:disabled { cursor:default; opacity:.55 }
.btn:hover,.template-card:hover { transform:none }
.btn:active { transform:translateY(1px) }
.text-link:hover { gap:8px; text-decoration:underline; text-underline-offset:4px }
.icon-btn { min-width:34px; min-height:34px }
.input,.select { min-height:44px; border-radius:8px }
.field-label { color:var(--app-text) }
.field-hint { color:var(--app-secondary) }
/* A calm sidebar with one clearly selected destination. */
.sidebar { padding:25px 15px 18px }
.sidebar>.brand { margin:0 12px 28px }
.brand-mark { border-radius:10px; width:35px; height:35px }
.brand-word { font-size:calc(27px * var(--applied-scale)) }
.brand-word>span { font-size:calc(21px * var(--applied-scale)) }
.workspace-picker { padding:11px; margin:0 4px 27px; border-radius:10px; background:var(--app-surface-raised) }
.workspace-picker strong { color:var(--app-text); font-size:calc(13px * var(--applied-scale)) }
.workspace-picker>div>span { font-size:calc(11px * var(--applied-scale)); line-height:1.6 }
.workspace-symbol { border:0; background:var(--app-surface-alt); color:var(--green); width:31px; height:33px; border-radius:8px }
.nav-label { font-size:calc(10px * var(--applied-scale)); letter-spacing:1.15px; margin-left:13px; color:var(--app-muted) }
.nav-item { min-height:44px; margin:5px 0; padding:10px 13px; font-size:calc(13px * var(--applied-scale)); gap:11px; border-radius:8px; transition:background .12s }
.nav-item.active { box-shadow:inset 3px 0 0 var(--green); background:var(--app-hover); font-weight:700 }
.nav-item.active .icon { color:inherit }
.nav-count { background:var(--app-surface-raised); color:var(--app-secondary); border-color:var(--app-border); font-size:11px }
.nav-dot { background:#75916e }
.sidebar-note { border:0; padding:15px 12px; margin:16px 4px 22px; background:transparent; color:var(--app-secondary) }
.note-icon { margin-bottom:10px; color:var(--app-muted) }
.sidebar-note strong { font-size:calc(12px * var(--applied-scale)); font-weight:600 }
.sidebar-note p { font-size:calc(11px * var(--applied-scale)); margin-top:5px; line-height:1.9 }
.bottom-nav { margin-bottom:13px }
.bottom-nav .nav-item { min-height:41px; font-size:calc(12px * var(--applied-scale)) }
.profile-card { padding-top:17px; padding-left:7px; gap:10px }
.profile-card strong { font-size:calc(12px * var(--applied-scale)) }
.profile-card small { font-size:calc(10px * var(--applied-scale)); line-height:1.6 }
.avatar { border:0; color:var(--green); background:var(--app-surface-alt); font-size:13px }
/* The daily workspace puts surveys and their status before inspiration. */
.workspace-top { height:69px; padding:0 38px; background:var(--app-surface-raised) }
.breadcrumbs { font-size:calc(12px * var(--applied-scale)); gap:10px }
.breadcrumbs strong { color:var(--app-text); font-weight:600 }
.top-actions { gap:15px }
.local-pill { font-size:calc(11px * var(--applied-scale)); border:1px solid var(--app-border); border-radius:20px; padding:6px 10px; background:var(--app-surface) }
.local-pill i { background:#638458 }
.workspace-content { max-width:1320px; padding:34px 38px 0 }
.page-heading,.workspace-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:26px }
.page-heading .eyebrow,.workspace-intro .eyebrow { font-size:calc(10px * var(--applied-scale)); letter-spacing:1.4px; color:var(--app-muted) }
.page-heading h1,.workspace-intro h1 { font-family:var(--font-serif); font-size:calc(29px * var(--applied-scale)); font-weight:400; line-height:1.5; letter-spacing:-.7px; margin:7px 0 5px; color:var(--app-text) }
.page-heading p,.workspace-intro p { font-size:calc(13px * var(--applied-scale)); line-height:1.85; color:var(--app-secondary) }
.page-heading>.btn,.workspace-intro>.btn { min-height:43px; margin:0; font-size:calc(13px * var(--applied-scale)); padding:12px 17px }
.workspace-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 31px }
.overview-card { position:relative; min-width:0; min-height:105px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-surface-raised); padding:17px 19px; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; text-align:left }
.overview-card>small,.overview-card>span:not(.overview-icon) { display:block; font-size:calc(11px * var(--applied-scale)); color:var(--app-secondary); line-height:1.7; grid-column:1; grid-row:1 }
.overview-card>strong { display:block; font-size:calc(29px * var(--applied-scale)); color:var(--app-text); font-weight:600; line-height:1.5; letter-spacing:-.8px; grid-column:1; grid-row:2 }
.overview-card>strong small { font-size:calc(11px * var(--applied-scale)); font-weight:400; letter-spacing:0; margin-left:7px; color:var(--app-muted) }
.overview-icon { display:grid; place-items:center; grid-column:2; grid-row:1 / 3; width:39px; height:39px; border-radius:11px; background:var(--app-surface-alt); color:var(--green) }
.overview-card:nth-child(2) .overview-icon { background:#edf3df; color:#688044 }
.overview-card:nth-child(3) .overview-icon { background:#f6eee1; color:#927644 }
.workspace-overview button.overview-card:hover { border-color:#a7bba0; background:var(--app-surface) }
.section-heading { margin-bottom:15px; gap:14px }
.section-heading h2 { color:var(--app-text); font-size:calc(17px * var(--applied-scale)); letter-spacing:-.2px; line-height:1.6 }
.section-caption { color:var(--app-secondary); font-size:calc(12px * var(--applied-scale)); line-height:1.8 }
.section-heading h2 .section-caption { margin-left:11px }
.section-heading>.text-link { font-size:calc(12px * var(--applied-scale)); white-space:nowrap }
.count-badge { border-radius:6px; height:21px; min-width:23px; font-size:11px; margin-left:6px }
.my-forms-section { padding-top:0; margin-bottom:34px }
.forms-toolbar { margin:16px 0 13px; gap:9px }
.search-field { min-height:43px; border-radius:8px; padding:10px 12px; color:var(--app-muted); background:var(--app-surface-raised) }
.search-field:focus-within { border-color:#7f9d73; box-shadow:0 0 0 3px #7f9d7314 }
.search-field input { font-size:calc(12px * var(--applied-scale)) }
.search-field kbd { font-size:10px; color:var(--app-muted); border-color:var(--app-border); border-radius:4px; background:var(--app-surface) }
.forms-toolbar .select { min-height:43px; font-size:calc(12px * var(--applied-scale)); padding:9px 28px 9px 12px; background-color:var(--app-surface-raised) }
.view-switch { border-radius:7px; padding:3px }
.view-switch button { min-width:32px; min-height:29px; border-radius:4px }
.forms-table { border-radius:11px; border-color:var(--app-border); box-shadow:0 2px 3px #24412c02 }
.forms-table-head,.form-row { grid-template-columns:minmax(200px,1fr) 104px 87px 130px 35px; gap:14px; padding-left:20px; padding-right:18px }
.forms-table-head { height:41px; font-size:calc(9px * var(--applied-scale)); font-weight:600; letter-spacing:.8px; color:var(--app-muted) }
.form-row { min-height:83px; transition:background .12s }
.form-name-cell { gap:13px; min-height:65px }
.form-file-icon { width:35px; height:41px; border-radius:8px; background:var(--accent-light); color:var(--accent) }
.form-file-icon .icon { width:20px }
.form-name-cell strong { font-size:calc(13px * var(--applied-scale)); line-height:1.7; font-weight:600 }
.form-name-cell small { font-size:calc(10px * var(--applied-scale)); line-height:1.8; margin-top:3px }
.form-updated { font-size:calc(10px * var(--applied-scale)); line-height:1.7 }
.status { font-size:calc(10px * var(--applied-scale)); padding:6px 8px; border-radius:6px }
.status-open { background:#e9f2e5; color:#3e6a3d }
.status-draft { background:#f4efdf!important; color:#77633b!important }
.response-count { min-height:40px; justify-content:flex-start; font-size:calc(11px * var(--applied-scale)); border-radius:7px; gap:7px }
.response-count:hover { color:var(--green); text-decoration:underline; text-underline-offset:3px }
.form-row>.icon-btn { opacity:.7; width:35px; min-height:37px }
.form-row:hover>.icon-btn,.form-row>.icon-btn:focus-visible { opacity:1 }
.form-card-grid { gap:15px }
.form-card { border-radius:11px; border-color:var(--app-border); overflow:hidden }
.form-card h3 { font-size:calc(14px * var(--applied-scale)); line-height:1.7 }
.form-card p { font-size:calc(11px * var(--applied-scale)); line-height:1.8 }
.form-card .art-cover { height:122px }
.form-card-main>div:last-child { padding:17px }
.empty-state.small-empty { border:1px dashed var(--app-border); border-radius:12px; background:var(--app-surface-raised); padding:38px 20px }
.empty-state h3 { color:var(--app-text); font-size:calc(18px * var(--applied-scale)) }
.empty-state p { color:var(--app-secondary); font-size:calc(13px * var(--applied-scale)); line-height:1.9 }
.templates-section { margin-bottom:32px }
.template-grid { gap:16px }
.template-card { border-radius:11px; border-color:var(--app-border); transition:border-color .15s,box-shadow .15s }
.template-card:hover { border-color:#98b18d; box-shadow:0 5px 20px #2d4f3210 }
.template-card:hover .cover-art { transform:none }
.template-art { height:134px }
.template-label { top:10px; left:10px; font-size:calc(10px * var(--applied-scale)); border-radius:5px }
.template-use { opacity:1; width:27px; height:27px }
.template-copy { padding:16px }
.template-copy h3 { font-size:calc(13px * var(--applied-scale)); margin-bottom:5px; line-height:1.65 }
.template-copy p { font-size:calc(11px * var(--applied-scale)); line-height:1.8; min-height:0 }
.template-copy>span { font-size:calc(10px * var(--applied-scale)); color:var(--app-muted); margin-top:11px }
.compact-templates { border-top:1px solid var(--app-border); padding-top:25px }
.compact-templates .template-art { height:96px }
.compact-templates .template-copy { padding:14px 15px }
.compact-templates .template-copy p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.compact-templates .category-tabs { display:none }
.category-tabs { gap:7px; margin:16px 0 20px }
.category-tab { min-height:38px; font-size:calc(12px * var(--applied-scale)); padding:9px 13px; border-radius:7px }
.category-tab.active { border-color:var(--app-border); color:var(--app-text); background:var(--app-surface-raised) }
.workspace-footer { padding:22px 0 30px; font-size:calc(10px * var(--applied-scale)); border-top:1px solid var(--app-soft-border) }
.workspace-footer>button { font-size:calc(10px * var(--applied-scale)); min-height:32px }
/* Editors keep a stable frame; save and loading feedback never cover inputs. */
.editor-header { background:var(--app-surface-raised) }
.editor-header-actions .btn { min-height:38px; font-size:calc(12px * var(--applied-scale)) }
.editor-name input { font-size:calc(14px * var(--applied-scale)); font-weight:600 }
.save-state { font-size:calc(10px * var(--applied-scale)); line-height:1.6; max-width:min(400px,55vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cloud-sync-tools { padding:8px 24px; min-height:36px; font-size:calc(10px * var(--applied-scale)); gap:14px; background:var(--app-surface); border-color:var(--app-soft-border) }
.cloud-sync-tools .text-link { font-size:calc(10px * var(--applied-scale)); min-height:24px }
.cloud-sync-tools>div { gap:15px }
.editor-tab { font-size:calc(12px * var(--applied-scale)); min-height:44px; gap:8px }
.editor-tab.active:after { height:3px; border-radius:3px 3px 0 0 }
.editor-tab>span { background:var(--app-surface-alt); color:var(--app-secondary); font-size:10px; min-width:22px; text-align:center }
.editor-storage { font-size:calc(10px * var(--applied-scale)) }
.question-card,.form-intro { border-radius:11px }
.question-card.selected { box-shadow:0 0 0 2px #6d925e55,0 3px 13px #2d4a3205 }
.question-card-footer .icon-btn { min-width:34px; min-height:36px }
.outline-question { min-height:39px }
.outline-question.active { border-radius:7px }
.inspector-heading { color:var(--app-muted) }
.responses-heading h1,.settings-intro h1 { font-family:var(--font-serif); font-weight:400; font-size:calc(28px * var(--applied-scale)); color:var(--app-text) }
.responses-layout { padding-top:30px }
.stats-grid { gap:15px }
.stat-card { padding:20px; border-radius:11px }
.stat-card>span { font-size:calc(12px * var(--applied-scale)) }
.stat-card>strong { color:var(--app-text); font-size:calc(32px * var(--applied-scale)); line-height:1.6; font-weight:600 }
.stat-card>p { font-size:calc(11px * var(--applied-scale)) }
.summary-card,.settings-card,.response-table-wrap { border-radius:11px }
.response-table th { font-size:calc(11px * var(--applied-scale)); text-transform:none; letter-spacing:0 }
.response-table td { font-size:calc(12px * var(--applied-scale)) }
.modal-backdrop { backdrop-filter:none; background:#152b2059 }
.modal { animation:none; border-radius:14px; box-shadow:0 24px 75px #152b202b }
.modal>header h2 { font-size:calc(18px * var(--applied-scale)); font-weight:600 }
.modal>header>.icon-btn { min-height:40px; min-width:40px }
.modal-content { scroll-behavior:auto }
.modal>footer .btn { min-height:42px; font-size:calc(13px * var(--applied-scale)) }
.action-list>button { min-height:48px; font-size:calc(14px * var(--applied-scale)) }
.appearance-trigger { padding:10px 13px; font-size:12px; box-shadow:0 3px 15px #223f2b0e; border-color:var(--app-border); background:var(--app-surface-raised) }
.toast { border-radius:10px; font-size:calc(13px * var(--applied-scale)); line-height:1.7; box-shadow:0 8px 30px #1e3d2920; max-width:min(570px,calc(100vw - 30px)) }
/* Network feedback: visible immediately, still usable while data arrives. */
.route-progress { position:fixed; top:0; left:0; right:0; z-index:90; height:3px; background:var(--app-surface-alt); pointer-events:none }
.route-progress::before { content:''; display:block; width:38%; height:100%; background:#628c54; animation:la-route-progress 1.5s ease-in-out infinite }
.route-progress-label { position:absolute; top:12px; left:50%; transform:translateX(-50%); padding:8px 13px; border-radius:30px; border:1px solid var(--app-border); background:var(--app-surface-raised); color:var(--app-secondary); box-shadow:var(--app-shadow); font-size:12px; line-height:1.6; white-space:nowrap }
.route-skeleton { max-width:1160px; margin:0 auto; padding:35px 38px; color:var(--app-secondary) }
.route-skeleton .skeleton-heading { width:43%; height:31px; margin-bottom:17px }
.route-skeleton .skeleton-copy { width:68%; height:14px; margin-bottom:32px }
.skeleton-block { min-height:18px; background:var(--app-surface-alt); border-radius:8px; position:relative; overflow:hidden }
.skeleton-block::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#ffffff55,transparent); transform:translateX(-100%); animation:la-skeleton 1.6s ease-in-out infinite }
.skeleton-card { min-height:116px; padding:22px; background:var(--app-surface-raised); border:1px solid var(--app-border); border-radius:11px; margin-bottom:15px }
.skeleton-card .skeleton-block { margin-bottom:14px }
.route-skeleton>p { font-size:13px; margin-top:18px; line-height:1.8 }
.inline-loading,.responses-loading { display:flex; align-items:center; gap:11px; padding:15px 18px; border:1px solid var(--app-border); border-radius:9px; background:var(--app-surface-raised); color:var(--app-secondary); font-size:13px; line-height:1.8; margin:15px 0 }
.inline-loading::before,.responses-loading::before { content:''; flex-shrink:0; width:15px; height:15px; border:2px solid var(--app-border); border-top-color:#628c54; border-radius:50%; animation:la-spin .8s linear infinite }
.inline-loading p,.responses-loading p { font-size:inherit; line-height:inherit }
.route-notice { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 18px; padding:13px 17px; margin:0 0 19px; border:1px solid var(--app-border); border-radius:9px; background:var(--app-surface-alt); color:var(--app-secondary); font-size:12px; line-height:1.85 }
.route-notice .btn { font-size:12px; min-height:35px; padding:8px 12px }
.route-notice.error,.route-notice[data-state="error"] { background:#fbf0e8; border-color:#e3c9ac; color:#81592f }
.operation-status { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:110; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 30px); padding:12px 19px; background:var(--app-surface-raised); color:var(--app-text); border:1px solid var(--app-border); border-radius:10px; box-shadow:0 8px 30px #17302324; font-size:13px; line-height:1.7 }
.operation-status::before { content:''; width:15px; height:15px; flex-shrink:0; border:2px solid var(--app-border); border-top-color:#628c54; border-radius:50%; animation:la-spin .8s linear infinite }
.operation-status[data-state="error"] { color:#9d493c; border-color:#dfb6ab }
.operation-status[data-state="success"]::before,.operation-status[data-state="error"]::before { animation:none; border:0; border-radius:50%; width:7px; height:7px; background:currentColor }
[aria-busy="true"].btn::after { content:''; width:12px; height:12px; flex-shrink:0; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; opacity:.8; animation:la-spin .8s linear infinite }
@keyframes la-route-progress { from { transform:translateX(-110%) } to { transform:translateX(365%) } }
@keyframes la-skeleton { to { transform:translateX(100%) } }
@keyframes la-spin { to { transform:rotate(360deg) } }
html[data-appearance="dark"] .overview-icon { background:#304934; color:#c0d3b4 }
html[data-appearance="dark"] .overview-card:nth-child(2) .overview-icon { background:#34462b; color:#c5d8aa }
html[data-appearance="dark"] .overview-card:nth-child(3) .overview-icon { background:#483f2b; color:#e0ce9f }
html[data-appearance="dark"] .status-draft { background:#423d2a!important; color:#dfcf9d!important }
html[data-appearance="dark"] .status-open { background:#2d4a32; color:#c1dbb2 }
html[data-appearance="dark"] .skeleton-block::after { background:linear-gradient(90deg,transparent,#ffffff09,transparent) }
html[data-appearance="dark"] .route-notice.error,html[data-appearance="dark"] .route-notice[data-state="error"] { background:#443727; border-color:#735a37; color:#e4c699 }
html[data-appearance="dark"] .operation-status[data-state="error"] { color:#efbdac; border-color:#895f52 }
html[data-appearance="dark"] .workspace-symbol { color:#c0d3b4 }
@media(min-width:1500px) {
 .workspace-content { padding-top:39px }
 .page-heading h1,.workspace-intro h1 { font-size:calc(33px * var(--applied-scale)) }
}
@media(max-width:1150px) and (min-width:761px) {
 .workspace-content { padding:28px 25px 0 }
 .workspace-top { padding:0 25px }
 .page-heading h1,.workspace-intro h1 { font-size:calc(26px * var(--applied-scale)) }
 .forms-table-head,.form-row { grid-template-columns:minmax(170px,1fr) 86px 65px 85px 30px; gap:9px; padding-left:14px; padding-right:12px }
 .form-updated { font-size:10px }
 .overview-card { padding:15px; min-height:100px }
 .overview-icon { width:33px; height:33px }
 .template-grid { gap:12px }
 .template-copy { padding:13px }
 .editor-storage { display:none }
}
@media(max-width:760px) {
 .sidebar { padding:24px 17px 20px; width:270px }
 .sidebar>.brand { margin-bottom:26px }
 .nav-item { min-height:48px; font-size:14px }
 .bottom-nav .nav-item { min-height:44px; font-size:13px }
 .workspace-picker strong { font-size:14px }
 .workspace-picker>div>span { font-size:12px }
 .profile-card strong { font-size:13px }
 .profile-card small { font-size:11px }
 .workspace-top { height:61px; padding:0 18px }
 .breadcrumbs { font-size:12px; gap:7px }
 .breadcrumbs>span { display:none }
 .mobile-menu { min-width:39px; min-height:39px; margin-left:-6px }
 .top-actions { gap:10px }
 .local-pill { font-size:10px; padding:6px 8px }
 .workspace-content { padding:26px 19px 0 }
 .page-heading,.workspace-intro { display:flex; flex-wrap:wrap; align-items:flex-start; margin-bottom:23px; gap:16px }
 .page-heading>div,.workspace-intro>div { width:100% }
 .page-heading .eyebrow,.workspace-intro .eyebrow { font-size:10px; letter-spacing:1px }
 .page-heading h1,.workspace-intro h1 { font-size:27px; line-height:1.5; margin:6px 0 }
 .page-heading p,.workspace-intro p { font-size:13px; line-height:1.9 }
 .page-heading>.btn,.workspace-intro>.btn { min-height:44px; font-size:13px; margin:0; padding:12px 17px; width:100%; justify-content:center }
 .workspace-overview { gap:8px; margin-bottom:27px }
 .overview-card { min-height:101px; padding:12px 11px; border-radius:9px; display:flex; flex-direction:column; align-items:flex-start; gap:3px }
 .overview-card>small,.overview-card>span:not(.overview-icon) { font-size:10px; line-height:1.65; order:0 }
 .overview-card>strong { font-size:25px; line-height:1.7; order:1 }
 .overview-card>strong small { display:block; font-size:10px; margin:0; line-height:1.5 }
 .overview-icon { display:none }
 .section-heading { gap:9px; margin-bottom:12px; align-items:center }
 .section-heading h2 { font-size:17px }
 .section-caption { font-size:12px; line-height:1.8 }
 .section-heading h2 .section-caption { display:none }
 .section-heading>.text-link { font-size:11px; min-height:38px; gap:5px }
 .my-forms-section { margin-bottom:28px }
 .view-switch button { min-height:35px; min-width:34px }
 .forms-toolbar { flex-wrap:wrap; gap:9px; margin-top:15px }
 .search-field { min-height:44px; width:100%; flex-basis:100%; padding:11px 12px }
 .search-field input { font-size:13px }
 .search-field kbd { display:none }
 .forms-toolbar .select { min-height:42px; width:calc(50% - 5px); max-width:none; font-size:12px; padding:9px 24px 9px 10px }
 .forms-table { border-radius:10px }
 .forms-table-head { display:none }
 .form-row { grid-template-columns:minmax(0,1fr) 74px 32px; gap:4px 7px; padding:12px; min-height:105px }
 .form-name-cell { grid-column:1; grid-row:1/3; min-height:65px; gap:10px; padding:0 }
 .form-file-icon { width:30px; height:36px; border-radius:7px; flex-shrink:0 }
 .form-file-icon>.icon { width:17px }
 .form-name-cell strong { font-size:13px; line-height:1.8; -webkit-line-clamp:2 }
 .form-name-cell small { font-size:10px; line-height:1.8; margin-top:5px }
 .form-row>div { padding-top:0; grid-column:2; grid-row:1; align-self:end; justify-self:start }
 .form-row .status { font-size:10px; padding:6px 7px }
 .form-row>.response-count { grid-column:2; grid-row:2; margin-top:0; min-height:36px; font-size:11px; align-self:start; gap:5px }
 .form-row>.response-count .icon { width:13px; height:13px }
 .form-row>.icon-btn { grid-column:3; grid-row:1/3; min-width:32px; width:32px; min-height:42px; opacity:1 }
 .form-updated { display:none }
 .compact-templates { padding-top:22px }
 .template-grid { grid-template-columns:1fr 1fr; gap:12px }
 .compact-templates .template-grid .template-card:nth-child(3) { display:none }
 .template-art { height:102px }
 .compact-templates .template-art { height:89px }
 .template-copy,.compact-templates .template-copy { padding:12px }
 .template-copy h3 { font-size:12px; line-height:1.8 }
 .template-copy p { font-size:11px; line-height:1.9 }
 .template-copy>span { font-size:10px; line-height:1.7; margin-top:9px }
 .template-label { font-size:9px; padding:4px 6px; left:7px; top:7px }
 .template-use { width:24px; height:24px; right:8px; bottom:8px }
 .category-tab { min-height:42px; font-size:12px }
 .workspace-footer { font-size:10px; line-height:1.8; padding:18px 0 76px; gap:11px }
 .workspace-footer>span { max-width:145px; font-size:10px }
 .workspace-footer>button { max-width:150px; font-size:10px; text-align:right; line-height:1.8 }
 .editor-header { padding:0 12px; height:64px }
 .editor-back { min-width:29px; min-height:39px; width:29px; padding:0 5px 0 0 }
 .editor-header-actions { gap:5px }
 .editor-header-actions .btn { min-height:38px; padding:8px 10px; font-size:12px }
 .editor-header-actions .btn.subtle { min-width:35px }
 .editor-header-actions>.status { display:none }
 .editor-name input { font-size:13px; max-width:38vw }
 .save-state { font-size:10px; max-width:43vw }
 .cloud-sync-tools { padding:8px 14px; gap:6px; align-items:flex-start }
 .cloud-sync-tools>span { font-size:10px; line-height:1.7 }
 .cloud-sync-tools>div { gap:17px; width:100% }
 .cloud-sync-tools .text-link { font-size:11px; min-height:30px }
 .editor-tabbar { top:64px; height:50px; padding:0 13px }
 .editor-tabs { gap:14px; justify-content:space-between; width:100% }
 .editor-tab { font-size:12px; gap:5px; min-height:46px }
 .editor-tab>.icon { width:14px; height:14px }
 .editor-tab>span { font-size:10px; padding:2px 4px }
 .outline-panel { top:114px }
 .builder-main { padding:0 15px 25px }
 .question-card { border-radius:10px; padding-left:19px; padding-right:19px }
 .question-card-footer .icon-btn { width:34px; height:39px; min-height:39px }
 .question-title { font-size:16px }
 .builder-option>input { font-size:15px }
 .outline-question { min-height:44px }
 .responses-layout { padding:25px 18px 40px }
 .responses-heading h1,.settings-intro h1 { font-size:27px }
 .responses-heading>div>p { font-size:12px; line-height:1.9 }
 .responses-actions { gap:8px; flex-wrap:wrap }
 .responses-actions .btn { min-height:42px; font-size:12px; padding:10px 13px }
 .stats-grid { gap:10px }
 .stat-card { padding:15px }
 .stat-card>span { font-size:11px; line-height:1.8 }
 .stat-card>strong { font-size:30px }
 .stat-card>p { font-size:11px }
 .stat-card:last-child { padding:15px; min-width:0 }
 .stat-status>.status { font-size:11px }
 .settings-layout { padding:24px 18px }
 .settings-card { padding:22px 20px }
 .modal-backdrop { padding:12px }
 .modal { max-height:calc(100dvh - 24px); border-radius:12px }
 .modal>header { padding:17px 17px 14px }
 .modal>header h2 { font-size:17px }
 .modal-content { padding:20px 18px 23px }
 .modal>footer { padding:13px 17px; flex-wrap:wrap }
 .modal>footer .btn { min-height:43px; font-size:12px }
 .modal-lead { font-size:14px }
 .appearance-trigger { right:12px; bottom:12px; min-height:44px; min-width:44px; padding:11px }
 .toast { bottom:70px; font-size:13px; padding:12px 15px; min-width:0; width:max-content }
 .route-skeleton { padding:29px 19px }
 .route-skeleton .skeleton-heading { width:68%; height:29px }
 .route-skeleton .skeleton-copy { width:90%; height:13px }
 .skeleton-card { min-height:105px; padding:20px }
 .route-notice { font-size:12px; padding:12px 14px; gap:9px }
 .route-notice .btn { min-height:39px }
 .route-progress-label { max-width:calc(100vw - 30px); font-size:11px; white-space:normal; text-align:center; width:max-content }
 .operation-status { bottom:72px; width:max-content; font-size:12px; padding:11px 15px }
}
@media(prefers-reduced-motion:reduce) {
 .route-progress::before { animation:none; width:100%; opacity:.7 }
 .skeleton-block::after { animation:none; background:none }
 .inline-loading::before,.responses-loading::before,.operation-status::before,[aria-busy="true"].btn::after { animation:none }
 * { scroll-behavior:auto!important }
}
/* Workspace data and nonblocking operation shell. */
.workspace-intro>div:first-child { flex:1; min-width:0 }
.workspace-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-shrink:0 }
.workspace-heading-actions .btn { font-size:calc(12px * var(--applied-scale)); min-height:43px; padding:11px 15px }
.overview-card:has(>div) { display:flex; flex-direction:row; justify-content:space-between; align-items:center }
.overview-card>div { order:1; min-width:0 }
.overview-card>div>small { display:block; font-size:calc(11px * var(--applied-scale)); line-height:1.8; color:var(--app-secondary) }
.overview-card>div>strong { display:block; font-size:calc(29px * var(--applied-scale)); font-weight:600; line-height:1.5; letter-spacing:-.8px; color:var(--app-text); margin-top:3px }
.overview-card>.overview-icon { order:2; flex-shrink:0 }
.route-loading { min-height:75vh; max-width:860px; margin:auto; padding:65px 38px 40px; color:var(--app-text) }
.route-loading>.brand { margin-bottom:34px }
.route-loading>h1 { font-family:var(--font-serif); font-size:calc(28px * var(--applied-scale)); font-weight:400; line-height:1.55; margin-bottom:10px }
.route-loading>p { font-size:calc(13px * var(--applied-scale)); line-height:1.9; color:var(--app-secondary); margin-bottom:29px }
.route-loading>.route-skeleton { padding:0; display:flex; flex-direction:column; gap:15px }
.route-loading>.route-skeleton>.skeleton-block { height:105px; border:1px solid var(--app-border); background:var(--app-surface-alt); border-radius:11px }
.route-loading>.route-skeleton>.skeleton-block:first-child { height:24px; width:65%; border:0; border-radius:6px; margin-bottom:8px }
.editor-loading { min-height:60vh; max-width:900px; padding-top:40px }
.operation-status { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:260px }
.operation-status::before { display:none }
.operation-status>.inline-loading { display:flex; align-items:center; gap:10px; border:0; border-radius:0; background:none; padding:0; margin:0; font-size:13px; font-weight:600; color:var(--app-text) }
.operation-status>small { font-size:11px; color:var(--app-secondary); padding-left:25px; line-height:1.8 }
@media(max-width:900px) and (min-width:761px) {
 .forms-table-head,.form-row { grid-template-columns:minmax(170px,1fr) 83px 65px 32px }
 .forms-table-head>span:nth-child(4),.form-row>.form-updated { display:none }
 .workspace-intro { flex-wrap:wrap }
 .workspace-heading-actions { justify-content:flex-start }
}
@media(max-width:760px) {
 .workspace-heading-actions { width:100%; display:grid; grid-template-columns:auto 1fr; gap:9px }
 .workspace-heading-actions .btn { min-height:44px; font-size:12px; padding:11px 14px }
 .workspace-heading-actions .btn:only-child { grid-column:1 / -1 }
 .overview-card:has(>div) { min-height:99px; padding:13px 11px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:2px }
 .overview-card>div>small { font-size:10px; line-height:1.7; min-height:34px }
 .overview-card>div>strong { font-size:27px; line-height:1.5; margin-top:2px }
 .route-loading { padding:39px 20px; min-height:70vh }
 .route-loading>.brand { margin-bottom:29px }
 .route-loading>h1 { font-size:26px }
 .route-loading>p { font-size:12px }
 .route-loading>.route-skeleton>.skeleton-block { height:110px }
 .route-loading>.route-skeleton>.skeleton-block:first-child { height:23px; width:80% }
 .editor-loading { min-height:60vh; padding-top:29px }
 .operation-status { min-width:0; max-width:calc(100vw - 30px); gap:4px }
 .operation-status>.inline-loading { font-size:12px }
 .operation-status>small { font-size:10px; max-width:250px }
}
/* Keep daily reading comfortable as the layout becomes more compact. */
.nav-item { font-size:calc(14px * var(--applied-scale)) }
.bottom-nav .nav-item { font-size:calc(13px * var(--applied-scale)) }
.form-name-cell strong { font-size:calc(14px * var(--applied-scale)) }
.form-name-cell small { font-size:calc(11px * var(--applied-scale)) }
.form-updated { font-size:calc(11px * var(--applied-scale)) }
.forms-table-head { font-size:calc(10px * var(--applied-scale)) }
.overview-card>div>small { font-size:calc(12px * var(--applied-scale)) }
@media(max-width:760px) {
 .nav-item { font-size:14px }
 .bottom-nav .nav-item { font-size:13px }
 .overview-card>div>small { font-size:10px }
 .form-name-cell strong { font-size:13px }
 .form-name-cell small { font-size:10px }
 .editor-name input,.builder-option>input,.matrix-row input { font-size:16px }
}

/* Versioned questions keep old replies readable after an administrator edits. */
.response-version-panel{display:flex;align-items:center;gap:22px;padding:17px 20px;margin:0 0 24px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-raised)}
.response-version-panel>label{display:flex;flex-direction:column;gap:8px;min-width:245px;font-size:13px;font-weight:600;color:var(--app-text)}
.response-version-panel .select{font-weight:400;min-width:245px;max-width:100%}
.response-version-panel>p{font-size:13px;line-height:1.9;color:var(--app-secondary);margin:0}
.survey-changed,.survey-updated{margin:0 0 20px;display:block}
.survey-changed>strong{display:block;color:var(--app-text);margin-bottom:7px}
.survey-changed p,.survey-updated p{line-height:1.9;margin:0 0 12px}
.survey-changed>div{display:flex;flex-wrap:wrap;gap:9px}
@media(max-width:760px){.response-version-panel{align-items:stretch;flex-direction:column;gap:12px;padding:15px}.response-version-panel>label,.response-version-panel .select{min-width:0;width:100%}.response-version-panel>p{font-size:12px}.survey-changed>div .btn{width:100%}}