/* KEVIN OS 4.0 — a material / type / rhythm system, not ten recolors. */
:root {--v4-chrome:color-mix(in srgb,var(--surface) 48%,transparent);--v4-sheet:color-mix(in srgb,var(--surface) 72%,transparent);--v4-radius:20px}
.topbar,.bottom-nav.liquid-dock {background:var(--v4-chrome);backdrop-filter:blur(18px) saturate(1.22);-webkit-backdrop-filter:blur(18px) saturate(1.22);box-shadow:0 8px 28px var(--glass-shadow),inset 0 1px 0 var(--glass-rim)}
dialog,html[data-theme="dark"] dialog {background:var(--v4-sheet);backdrop-filter:blur(28px) saturate(1.16);-webkit-backdrop-filter:blur(28px) saturate(1.16);border:1px solid var(--glass-rim)}
dialog::backdrop {background:rgba(12,18,30,.24);backdrop-filter:none}
.side-drawer {background:color-mix(in srgb,var(--surface) 60%,transparent);backdrop-filter:blur(20px) saturate(1.12);-webkit-backdrop-filter:blur(20px) saturate(1.12)}
dialog :is(.manual-form input,.manual-form textarea,.manual-form select) {background:color-mix(in srgb,var(--surface) 52%,transparent);font-size:14px}
dialog .manual-form {gap:16px}
dialog .manual-form label {font-size:14px;line-height:1.4}
.file-preview,.pdf-reader {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important}
.attachment-row[aria-pressed="true"] {background:var(--accent-soft);color:var(--accent-text)}
.os-hero {height:218px!important}.os-hero h1 {font-size:clamp(48px,5.8vw,78px);font-weight:650}
.home-greeting {margin:20px 2px}.home-greeting h2 {font-size:22px}
.auto-card {min-height:108px}.auto-card small {font-size:12px}
.overline,.side-foot small {font-size:12px}.side-tools b {font-size:14px}
.page-title h1 {font-size:clamp(30px,3.4vw,40px);letter-spacing:-.04em}
:is(.trend-card,.resource-row,.learning-list>article,.review-list>article,.quick-notes-list) {border-radius:var(--v4-radius)}
.bottom-nav.liquid-dock,.bottom-nav.liquid-dock button {touch-action:none!important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.liquid-dock button {min-height:52px;transition:color 90ms ease;background:transparent}
.liquid-dock .liquid-indicator {background:color-mix(in srgb,var(--surface) 34%,transparent);border-color:var(--glass-rim);filter:none!important;box-shadow:inset 0 1px 0 var(--glass-rim),0 3px 8px var(--glass-shadow)}
.liquid-dock button.is-preview {color:var(--accent-text)}
html:not([data-motion="off"]) button.is-pressed:not(.bottom-nav button) {transform:scale(.98);transition:transform 65ms ease-out,background-color 90ms ease}
.liquid-dock.glass-dragging button.active:not(.is-preview) {color:var(--muted)}
.media-player {display:grid;gap:12px;padding:18px;background:var(--surface-alt);color:var(--text)}
.media-player.video {padding:0;background:#080a0e}.media-player video {width:100%;max-height:58svh;display:block}.media-player audio {width:100%}
.media-player-label {display:flex;align-items:center;gap:14px;font-size:14px}.media-player-label>span {border-radius:12px;padding:15px;background:var(--accent-soft);color:var(--accent-text);font-size:16px;font-weight:650}
.preview-text {margin:0;padding:20px;max-height:55svh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);color:var(--text);font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}
.preview-fallback {padding:28px;display:grid;justify-items:center;gap:12px;text-align:center;color:var(--muted)}
.preview-fallback b {font-size:16px;color:var(--text)}.preview-fallback p {font-size:14px;max-width:40ch}
.preview-caption {gap:12px;flex-wrap:wrap}.preview-caption>div {display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.workspace-conflict {position:sticky;top:96px;z-index:35;margin:12px 0;padding:12px 16px;background:var(--surface);border:1px solid var(--danger);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.workspace-conflict button {background:var(--text);color:var(--surface);padding:9px 14px;border-radius:8px;white-space:nowrap}
.side-foot[data-save-state="conflict"]>i {background:var(--danger)}
.side-foot[data-save-state="saving"]>i {background:#c79235}
.draft-recovery {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:var(--accent-soft);font-size:13px}
.draft-recovery button {padding:8px 12px;border-radius:8px;background:var(--surface);color:var(--accent-text)}

/* Appearance is an actual design gallery, separate from decorative Hero effects. */
dialog:has(.appearance-workspace) {width:min(950px,calc(100vw - 36px))}
.appearance-workspace {min-height:410px;display:block!important}
.appearance-workspace>.detail-section {margin-top:16px}
.appearance-toolbar {display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:22px}
.appearance-tabs {display:flex;gap:3px;min-width:0;padding:4px;border:1px solid var(--glass-line);border-radius:12px;background:color-mix(in srgb,var(--surface) 40%,transparent)}
.appearance-tabs button {min-height:40px;padding:10px 16px;border-radius:9px;font-size:14px;background:transparent;color:var(--muted);white-space:nowrap}
.appearance-tabs button[aria-selected="true"] {background:var(--surface);color:var(--text);box-shadow:0 2px 6px var(--glass-shadow);font-weight:600}
.current-design {display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.current-design b {color:var(--text);font-size:14px}
.design-gallery-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.design-gallery-head h3 {font-size:18px}.design-gallery-head>span {font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:2px 7px}
.appearance-workspace[data-appearance-tab="theme"]>:not(.appearance-toolbar):not(.design-gallery),.appearance-workspace[data-appearance-tab="effects"]>:not(.appearance-toolbar):not(#hero-theme-settings),.appearance-workspace[data-appearance-tab="custom"]>:is(.design-gallery,#hero-theme-settings) {display:none!important}
.appearance-workspace[data-appearance-tab="effects"] .hero-effect-settings>summary {display:none}.appearance-workspace .theme-choices {grid-template-columns:repeat(5,minmax(0,1fr))}.appearance-workspace .theme-sample {height:74px}

@media(max-width:760px) {
 .os-hero {height:198px!important}.os-hero h1 {font-size:55px!important}.os-hero-content {padding:24px}
 .appearance-toolbar {display:block}.appearance-tabs {width:100%}.appearance-tabs button {flex:1;padding:9px 7px;font-size:13px}.current-design {margin:14px 2px 0}
 .design-choices {grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.design-sample {height:95px}
 .appearance-workspace .theme-choices {grid-template-columns:repeat(3,minmax(0,1fr))}
 dialog:has(.appearance-workspace) {width:calc(100vw - 24px)}
 .workspace-conflict {top:100px;align-items:flex-start;flex-direction:column}.preview-caption .text-button {font-size:13px;min-height:40px}
}
@media(max-width:420px) {.design-choices {grid-template-columns:repeat(2,minmax(0,1fr))}.design-sample {height:104px}.appearance-tabs button {font-size:12px}.os-hero h1 {font-size:48px!important}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important}.design-choice {transition:none}.liquid-dock .liquid-indicator {will-change:auto}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {html[data-design] :is(.topbar,.side-drawer,dialog,.bottom-nav.liquid-dock) {background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:var(--line)!important}dialog :is(input,textarea,select) {background:var(--surface)!important}.os-hero {background:var(--surface)!important}}
/* Maintenance: native touch controls, attachment selection is app-owned. */
.manual-form .attachment-native-input{display:none}
.attachment-heading{display:block;margin:0 0 12px;font-weight:600}
.attachment-selection{display:flex;gap:14px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.manual-form .attachment-choose-button,.manual-form .attachment-paste-button{min-height:44px;padding:10px 15px;border-radius:13px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.attachment-selection-count{font-size:14px;color:var(--muted)}
.upload-file b,.task-attachment-list b{font-size:14px}
.upload-file>button{min-width:44px;min-height:44px;touch-action:manipulation}
.manual-form .clipboard-paste-target{font-size:16px;min-height:52px;padding:14px;border:1px solid var(--line);border-radius:13px;outline:none;white-space:pre-wrap}
.clipboard-paste-target:empty:before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}
.clipboard-paste-target:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.task-preview .task-attachments{grid-column:1/-1}
.task-attachment-list{display:grid;gap:8px;margin-top:10px}
.task-attachment-list>button{text-align:left;width:100%;min-width:0;min-height:52px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px}
.task-attachment-list>button>span:last-child{flex:0 0 auto}
#task-file-preview{margin-top:14px}
.calendar-day,.week-day-select{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.calendar-month-actions .calendar-quick-add{color:var(--accent);min-width:44px;min-height:44px}
@media(pointer:coarse){
  .calendar-day{position:relative}
  .calendar-day:active,.week-day-select:active{background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .attachment-tools{flex-wrap:wrap;gap:10px}
}