/* Dockvi's own presentation layer; semantic status colours stay distinct. */
html[data-theme=midnight] {
  --app-bg: #0b1018; --sidebar: #111925;
  --surface: #131e2c; --surface-raised: #1a293b;
  --surface-soft: #203247; --surface-hover: #2a4058;
  --border: #5d7b98; --border-soft: #344c64;
  --text: #edf3fa; --text-secondary: #c1d0df; --text-muted: #a2b5c8;
  --accent: #85d6ff; --accent-hover: #b1e5ff; --accent-soft: #193b51;
  --info: #85d6ff; --neon-red: #82afd3; --neon-red-soft: #82afd330;
}
html[data-theme=midnight] .cyber-atmosphere {
  background: radial-gradient(ellipse at 90% 0%, #214c7130, transparent 58%), var(--app-bg);
}
html[data-theme=midnight] .cyber-atmosphere::before { opacity: .3; }
html[data-theme=midnight] :is(.topbar,.os-taskbar,.os-window,.os-window-titlebar,.os-workspace-tabs,.os-statusbar,.os-dock,.os-launcher) {
  background: var(--sidebar); border-color: var(--border-soft); box-shadow: none;
}
html[data-theme=midnight] :is(.panel,.stat-card,.item-card,.table-wrap,.settings-sidebar,.brief-command,.command-hero,.brief-box,.inbox-row,.task-row,.weather-card) {
  background: var(--surface); border-color: var(--border-soft); box-shadow: none;
}
html[data-theme=midnight] :is(.os-tab.active,.nav button.active,.settings-sidebar button[aria-current=page]) { background: var(--accent-soft); color: var(--accent); }
html[data-theme=midnight] :is(.page-head h1,.command-line,.command-hero h1) { text-shadow: none; }
html[data-theme=midnight] :is(input,select,textarea,dialog) { background-color: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme=midnight] :is(.button.ghost,.button.subtle):not(.danger) { background: var(--surface-raised); color: var(--text); border-color: var(--border); }
html[data-theme=midnight] :is(.button.ghost,.button.subtle):not(.danger):hover { background: var(--surface-hover); }
html[data-theme=midnight] .button:not(.ghost):not(.subtle):not(.danger):hover { background-image: none; background-color: var(--accent-hover); }
html[data-theme=midnight] .button:not(.danger) { box-shadow: none; }
html[data-theme=midnight] .auth-mark { box-shadow: none; }
.theme-settings-fields { border: 0; margin: 0; padding: 0; }
.theme-choices { border: 0; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; grid-column: 1/-1; }
.theme-choices legend { margin-bottom: 10px; font-size: 16px; color: var(--text-secondary); }
.theme-choices label { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 72px; border: 1px solid var(--border-soft); cursor: pointer; }
.theme-choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.theme-choices input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
.theme-choices label>span:last-child { min-width: 0; display: grid; gap: 5px; }
.theme-choices small { font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.theme-swatch { width: 32px; height: 36px; flex: 0 0 auto; border: 1px solid #9bafc1; }
.theme-swatch-signal { background: linear-gradient(90deg,#170f1b 70%,#f8ef3b 70%); }
.theme-swatch-midnight { background: linear-gradient(90deg,#131e2c 70%,#85d6ff 70%); }

/* Theme tokens. Component coverage for Daylight lives in daylight.css (loaded last). */
html[data-theme=signal], html[data-theme=midnight] { color-scheme: dark; }
html[data-theme=daylight] {
  color-scheme: light;
  --app-bg: #eef3f8; --sidebar: #f8fafd;
  --surface: #ffffff; --surface-raised: #f2f6fb;
  --surface-soft: #e7eef7; --surface-hover: #dce7f5;
  --border: #7c91aa; --border-soft: #c7d3e2;
  --text: #17283d; --text-secondary: #354d68; --text-muted: #50647e;
  --accent: #164fb8; --accent-hover: #103e94; --accent-soft: #e3edff;
  --success: #146843; --warning: #815300; --danger: #b32a3b;
  --success-soft: #e4f5eb; --warning-soft: #fff2d6; --danger-soft: #fff0f2;
  --info-soft: #e3f3f6; --violet: #65429b; --violet-soft: #f0eafa;
  --surface-2: var(--surface-hover); --line: var(--border-soft);
  --muted: var(--text-muted); --text-primary: var(--text); --surface-base: var(--app-bg);
  --shadow-card: 0 3px 12px #243d6408; --shadow-float: 0 16px 48px #243d6426;
  --info: #08657b; --neon-red: #164fb8; --neon-red-soft: #164fb818;
}

.theme-swatch-daylight { background: linear-gradient(90deg,#eef3f8 70%,#164fb8 70%); }
.theme-swatch-system { background: linear-gradient(90deg,#eef3f8 50%,#131e2c 50%); }
.theme-choices label { transition: border-color .15s, background-color .15s; }
.theme-choices label:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .theme-choices label { transition: none; } }

/* Settings state is visible across categories, including narrow layouts. */
.settings-save-overview { margin-bottom: 18px; }
.settings-save-overview h3 { margin-top: 0; font-size: 18px; }
.settings-save-overview p { color: var(--text-muted); line-height: 1.6; }
.settings-pending-links { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-pending-links button { white-space: normal; text-align: left; }
.settings-state-badge { display: block; font-size: 13px; color: var(--accent); margin-top: 6px; }

/* Daily work: always-labelled controls and expandable secondary actions. */
.task-status-control { display: grid; gap: 4px; flex: 0 1 145px; min-width: 120px; max-width: 100%; }
.task-status-control > span { font-size: 16px; font-weight: 700; color: var(--text-muted); }
.task-status-control select { width: 100%; min-width: 0; min-height: 44px; padding: 7px 10px; font-size: 16px; }
.task-status-control small { font-size: 16px; overflow-wrap: anywhere; }
.task-more { min-width: 0; max-width: 100%; }
.task-more > summary { cursor: pointer; padding: 10px 12px; min-height: 44px; border: 1px solid var(--border); color: var(--text); background: var(--surface-raised); }
.task-more[open] { flex-basis: 100%; }
.task-more-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.task-more-actions .button { min-height: 44px; }
.task-row .row-main { min-width: 0; }
.task-title-button, .task-row .row-sub { overflow-wrap: anywhere; }
.editor-choice { display: grid; gap: 8px; min-width: 0; }
.editor-choice-search { font-size: 16px; color: var(--text-muted); }
.editor-choice-search input { margin-top: 5px; width: 100%; }
.editor-choice small, .editor-keyboard-hint { color: var(--text-muted); font-size: 16px; line-height: 1.5; }
#editor [aria-invalid=true] { border-color: var(--danger, #ff9296); outline: 2px solid var(--danger, #ff9296); outline-offset: 1px; }
#editor { max-height: calc(var(--editor-viewport-height, 100dvh) - 20px); }
#editor #editor-content { max-height: calc(var(--editor-viewport-height, 100dvh) - 32px); }
#editor .modal-actions { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
#editor .modal-body { scroll-padding-block: 16px; touch-action: pan-y; }
@media (max-width: 760px) {
  .task-row .task-row-tools { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
  .task-row-tools .task-priority-control, .task-row-tools .task-status-control { min-width: 0; width: 100%; }
  .task-more { grid-column: 1 / -1; }
  #editor .modal-actions .right-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #editor .modal-actions .button, #editor input, #editor select { min-height: 44px; }
  #editor input:not([type=checkbox]), #editor select, #editor textarea { font-size: 16px; min-width: 0; }
}
@media (max-width:760px) {
  .task-row > .task-select { grid-column: 1; grid-row: 1; }
  .task-row > .task-check { grid-column: 1; grid-row: 2; }
  .task-row > .row-main { grid-column: 2; grid-row: 1; }
  .task-row > .task-row-tools { grid-column: 2; grid-row: 2; }
}
.task-row .task-check { background: var(--surface-raised); border-color: var(--border); color: var(--info) !important; }

/* Operator source workspace: readable rows and phone-sized controls. */
.operator-source-finder{border:1px solid var(--border-soft);border-radius:12px;padding:16px;margin:18px 0;background:var(--surface-raised)}
.operator-source-finder form{display:grid;grid-template-columns:minmax(0,2fr) minmax(140px,1fr);gap:12px;align-items:end}
.operator-source-finder label{font-size:16px;min-width:0}
.operator-source-finder input:not([type="checkbox"]),.operator-source-finder select,.operator-source-finder button{min-height:44px;font-size:16px}
.operator-source-finder form .operator-search-done{display:flex;gap:10px;align-items:center;min-height:44px}
.operator-source-finder form .operator-search-done input[type="checkbox"]{width:20px;max-width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--accent)}
.operator-search-results{display:grid;gap:10px;margin-top:12px}
.operator-search-results .profile-session{min-width:0;align-items:center;gap:12px}
.operator-search-results .profile-session>div{min-width:0;overflow-wrap:anywhere}
.operator-search-results strong{font-size:16px}.operator-search-results small{font-size:14px}
@media(max-width:600px){.operator-source-finder{padding:12px}.operator-source-finder form{grid-template-columns:1fr}.operator-search-results .profile-session{display:grid;grid-template-columns:1fr}.operator-search-results button{width:100%}}
.operator-advanced{margin:18px 0;border-top:1px solid var(--border-soft);padding-top:12px}
.operator-advanced summary{min-height:44px;font-size:16px;cursor:pointer;display:flex;align-items:center;gap:8px}
.operator-advanced summary::before{content:'＋';color:var(--accent)}.operator-advanced[open] summary::before{content:'−'}
.operator-skills{margin:12px 0;border:1px solid var(--border-soft);padding:10px 14px;background:var(--surface)}
.operator-skills summary{min-height:44px;cursor:pointer;font-size:16px;line-height:1.5;padding:10px 0}
.operator-skills h5{font-size:16px;margin:16px 0 8px}.operator-skills .button{min-height:44px;white-space:normal;text-align:left}
.operator-current-source{font-size:17px;overflow-wrap:anywhere}.operator-followup p{font-size:17px;line-height:1.6}

/* Operator can be reached while working in any application. */
#operator-workspace{width:min(900px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:24px;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--border)}
.operator-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:-24px;background:var(--surface);z-index:2;padding-block:16px}
.operator-workspace-head h2{margin:0;font-size:24px}
#operator-workspace .operator-actions{margin:0;padding:16px}
#operator-workspace input,#operator-workspace textarea,#operator-workspace select{font-size:16px}
#operator-workspace button{min-height:44px;white-space:normal}
#operator-workspace .profile-session{flex-wrap:wrap;overflow-wrap:anywhere}
#operator-workspace .operator-comparison{grid-template-columns:repeat(2,minmax(0,1fr))}
#operator-workspace::backdrop{background:rgba(0,0,0,.65)}
@media(max-width:600px){#operator-workspace{padding:12px;width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}.operator-workspace-head{top:-12px}#operator-workspace .operator-actions{padding:12px}#operator-workspace .operator-comparison{grid-template-columns:1fr}#operator-workspace .profile-session>div{min-width:0;max-width:100%}}

/* Availability uses account-local times and the shared surface palette. */
.operator-availability .profile-session { margin-block: 8px; }
.operator-availability summary { min-height: 44px; padding-block: 10px; cursor: pointer; }

.operator-reservation-form { display: grid; gap: 12px; margin-block: 18px; padding: 16px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; }
.operator-reservation-form label { display: grid; gap: 6px; min-width: 0; }
.operator-reservation-form input { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }