/* Independent character preference; the existing theme remains the colour source. */
:root { --character-pattern: url('/assets/structure-khinkali.svg'); --character-ladder: url('/assets/characters/khinkali-ladder.svg'); }
:root[data-artwork="khinkali"] { --character-pattern: url('/assets/structure-khinkali.svg'); --character-ladder: url('/assets/characters/khinkali-ladder.svg'); }
:root[data-artwork="robots"] { --character-pattern: url('/assets/characters/robots-pattern.svg'); --character-ladder: url('/assets/characters/robots-ladder.svg'); }
:root[data-artwork="georgians"] { --character-pattern: url('/assets/characters/georgians-pattern.svg'); --character-ladder: url('/assets/characters/georgians-ladder.svg'); }
:root[data-artwork="apples"] { --character-pattern: url('/assets/characters/apples-pattern.svg'); --character-ladder: url('/assets/characters/apples-ladder.svg'); }
:root[data-artwork="foxes"] { --character-pattern: url('/assets/characters/foxes-pattern.svg'); --character-ladder: url('/assets/characters/foxes-ladder.svg'); }
:root[data-artwork="atoms"] { --character-pattern: url('/assets/characters/atoms-pattern.svg'); --character-ladder: url('/assets/characters/atoms-ladder.svg'); }
:root[data-artwork="none"] { --character-pattern: none; --character-ladder: none; }

/* A quiet evolution scene fills the free header space without covering its controls. */
:root { --character-evolution: url('/assets/characters/khinkali-evolution.svg'); }
:root[data-artwork="robots"] { --character-evolution: url('/assets/characters/robots-evolution.svg'); }
:root[data-artwork="georgians"] { --character-evolution: url('/assets/characters/georgians-evolution.svg'); }
:root[data-artwork="apples"] { --character-evolution: url('/assets/characters/apples-evolution.svg'); }
:root[data-artwork="foxes"] { --character-evolution: url('/assets/characters/foxes-evolution.svg'); }
:root[data-artwork="atoms"] { --character-evolution: url('/assets/characters/atoms-evolution.svg'); }
:root[data-artwork="none"] { --character-evolution: none; }
.header-evolution {
  position: relative; flex: 1 1 300px; min-width: 0; height: 66px; align-self: center; container-type: inline-size;
  pointer-events: none; opacity: 1; translate: 0 0;
  transition: opacity var(--motion-reveal) ease, translate var(--motion-reveal) var(--motion-ease), flex-basis var(--motion-reveal) var(--motion-ease), flex-grow var(--motion-reveal) var(--motion-ease);
}
.header-evolution::before {
  content: ''; position: absolute; inset: 0;
  background: var(--character-evolution) center / contain no-repeat;
  opacity: 0; transition: opacity var(--motion-reveal) ease;
}
@container (min-width: 280px) { .header-evolution::before { opacity: .92; } }
@starting-style { .header-evolution { opacity: 0; translate: 0 5px; } }
.topbar.company-search-open .header-evolution { flex-basis: 0; flex-grow: 0; opacity: 0; translate: 0 -5px; }
html:root[data-artwork="none"] .header-evolution { display: none; }
@media (max-width: 1000px) { .header-evolution { display: none; } }
@media (prefers-reduced-motion: reduce) { .header-evolution, .header-evolution::before { transition: none; } }

:root { --character-empty: url('/assets/calendar-sad-khinkali.png'); }
:root[data-artwork="robots"] { --character-empty: url('/assets/characters/robots-empty.svg'); }
:root[data-artwork="georgians"] { --character-empty: url('/assets/characters/georgians-empty.svg'); }
:root[data-artwork="apples"] { --character-empty: url('/assets/characters/apples-empty.svg'); }
:root[data-artwork="foxes"] { --character-empty: url('/assets/characters/foxes-empty.svg'); }
:root[data-artwork="atoms"] { --character-empty: url('/assets/characters/atoms-empty.svg'); }
:root[data-artwork="none"] { --character-empty: none; }
html:root[data-theme] :is(.calendar-empty,.workspace-empty)::before { background-image: var(--character-empty); }
.workspace-empty { position: relative; isolation: isolate; overflow: hidden; min-height: 410px; margin: 18px 0; padding: 322px 24px 28px; display: grid; place-content: end center; text-align: center; border-radius: 18px; color: var(--text-primary); background: radial-gradient(ellipse at 50% 40%, var(--theme-soft), transparent 72%); }
.workspace-empty::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--character-empty) center top / 340px 340px no-repeat; opacity: .42; pointer-events: none; }
html:root[data-theme="dark"] .workspace-empty::before { opacity: .28; }
.workspace-empty[hidden] { display: none; }
.employee-filter-columns > div { min-width: 0; display: grid; gap: 8px; }
html:root .employee-filter-columns .employee-sort { padding: 4px 0; min-height: 32px; background: transparent; border: 0; box-shadow: none; color: var(--text-primary); text-align: left; display: flex; justify-content: space-between; gap: 8px; }
html:root .employee-filter-columns :is(input,select) { width: 100%; min-width: 0; margin: 0; text-transform: none; letter-spacing: normal; font-size: .82rem; }
.employee-filter-columns #employee-filters-reset { align-self: end; margin-bottom: 0; }
@media(max-width:760px) {
  html:root .employee-columns.employee-filter-columns { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 0; gap: 12px; }
  .employee-filter-columns > div:first-child { grid-column: 1 / -1; }
  .employee-filter-columns #employee-filters-reset { grid-column: 1 / -1; justify-self: end; }
  html:root .employee-filter-columns .employee-sort { min-height: 44px; }
}
html:root[data-artwork="none"] :is(.calendar-empty,.workspace-empty) { min-height: 160px; padding: 36px 24px; justify-content: center; }
@media(max-width:760px) { .workspace-empty { min-height: 345px; padding: 252px 16px 24px; } .workspace-empty::before { background-size: 270px 270px; } }

/* Keep ordinary cards solid: the drawings live on the surrounding canvas. */
html:root[data-theme] :is(.task-detail-stream,.chat-conversation,.assistant-stream,.structure-viewport) {
  background-image: var(--character-pattern),var(--theme-stream);
  background-size: 760px 600px, cover; background-position: center top; background-repeat: repeat,no-repeat;
}
html:root[data-theme][data-character-background="true"]:not([data-artwork="none"]) body {
  background: var(--character-pattern) center top / 760px 600px repeat fixed, var(--theme-stream) fixed;
}
.character-background-option { display:flex; align-items:center; gap:12px; margin:18px 0; padding:16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.character-background-option input { flex:0 0 auto; width:20px; height:20px; }
.character-background-option span { display:grid; gap:5px; }
html:root[data-theme] .task-detail-main { background-image: var(--character-pattern); background-size: 920px auto; }
html:root[data-theme] .task-activity-event.system { background: var(--theme-system); }

/* Compact navigation, with a distinct selected treatment in every theme. */
html:root[data-theme] .sidebar { padding: 0; }
.sidebar-content { display: flex; flex-direction: column; min-width: 0; padding: var(--workspace-top) 12px 0; }
html:root[data-theme] .sidebar-profile { display: none; }
html:root[data-theme] .nav-list { gap: 2px; flex-shrink: 0; }
.nav-primary { display: grid; gap: 2px; min-width: 0; margin-inline: -4px; padding: 4px; border: 1px solid var(--nav-panel-border); border-radius: 18px; background: var(--nav-panel-background); box-shadow: inset 0 1px 0 var(--nav-panel-light), 0 6px 18px #0000000d; }
html:root[data-theme] .nav-item { min-height: 36px; padding: 4px 10px; gap: 9px; font-size: 12.5px; line-height: 1.3; border: 1px solid transparent; border-radius: 11px; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
html:root[data-theme] .nav-item .nav-icon { width: 26px; height: 26px; flex: 0 0 26px; border: none; border-radius: 8px; background: transparent; box-shadow: none; }
html:root[data-theme] .nav-item .ui-icon { width: 20px; height: 20px; }
html:root[data-theme] .nav-item:hover { background: var(--nav-hover); }
html:root[data-theme] .nav-item:focus-visible { outline: 2px solid var(--theme-nav-icon); outline-offset: 1px; }
html:root[data-theme] .nav-item.current { color: var(--nav-selected-text); background: var(--nav-selected); border-color: var(--nav-selected-border); box-shadow: var(--nav-selected-shadow); }
html:root[data-theme] .nav-item.current .nav-icon { color: var(--nav-selected-text); background: var(--nav-icon-selected); }
html:root[data-theme] .nav-item.current::after { content: ''; position: absolute; left: 2px; top: 50%; translate: 0 -50%; width: 3px; height: 16px; border-radius: 3px; background: var(--nav-selected-text); opacity: .65; }
html:root[data-theme] .nav-divider { margin: 12px 8px 6px; }
html:root[data-theme] .nav-group-title { padding: 6px 8px; font-size: 10px; letter-spacing: .025em; }
html:root[data-theme] .nav-subitem { min-height: 27px; padding: 5px 10px 5px 18px; font-size: 11px; font-weight: 500; }
:root { --nav-panel-background: linear-gradient(145deg,#a4bd6f24,#d4dfac08); --nav-panel-border: #c7d5a12e; --nav-panel-light: #e4edc212; --nav-hover: #cfdfae1c; --nav-selected: #d9e5b2; --nav-selected-text: #273b21; --nav-selected-border: #edf4d0; --nav-selected-shadow: inset 0 1px #ffffff66,0 3px 10px #101d1526; --nav-icon-selected: #ffffff30; }
:root[data-theme="dark"] { --nav-panel-background: linear-gradient(145deg,#78cbb324,#b6e5ec06); --nav-panel-border: #92dccc30; --nav-panel-light: #c7f4e91a; --nav-hover: #8ee1cc1c; --nav-selected: #96dcc9; --nav-selected-text: #122e29; --nav-selected-border: #bcf0e3; --nav-selected-shadow: inset 0 1px #ffffff55,0 3px 12px #020d162e; --nav-icon-selected: #ffffff26; }
:root[data-theme="classic"] { --nav-panel-background: #ffffff05; --nav-panel-border: #ffffff0e; --nav-panel-light: transparent; --nav-hover: #ffffff0d; --nav-selected: #dfe6ed; --nav-selected-text: #273746; --nav-selected-border: #f2f5f8; --nav-selected-shadow: none; --nav-icon-selected: transparent; }
:root[data-theme="vibe"] { --nav-panel-background: #ffffff0d; --nav-panel-border: #e1d7ff35; --nav-panel-light: #ffffff21; --nav-hover: #ffffff1a; --nav-selected: #dacbff33; --nav-selected-text: #ffffff; --nav-selected-border: #e4d6ff42; --nav-selected-shadow: inset 0 1px #ffffff26,0 4px 12px #26133d18; --nav-icon-selected: #ffffff18; }
:root[data-theme="courtyard"] { --nav-panel-background: #f6dcca0b; --nav-panel-border: #f1d5ca24; --nav-panel-light: #fff8ed0d; --nav-hover: #f5d8c71a; --nav-selected: #e7eab8; --nav-selected-text: #35332c; --nav-selected-border: #f4f4d2; --nav-selected-shadow: inset 0 1px #ffffff50; --nav-icon-selected: transparent; }
:root[data-theme="macos"] { --nav-panel-background: linear-gradient(145deg,#ffffffb8,#c7d8f03d); --nav-panel-border: #ffffffcc; --nav-panel-light: #ffffffcc; --nav-hover: #ffffffa3; --nav-selected: #0c5eca; --nav-selected-text: #ffffff; --nav-selected-border: #397dd9; --nav-selected-shadow: inset 0 1px #ffffff33,0 3px 10px #245fb62e; --nav-icon-selected: #ffffff1a; }
.sidebar-art { flex: 1 1 auto; min-height: 0; position: relative; pointer-events: none; margin-top: 8px; }
.sidebar-art::before { content: ''; position: absolute; inset: 0; max-height: 346px; background: var(--character-ladder) center top / auto 100% no-repeat; opacity: .87; }
@media(min-width:761px) {
  html:root .app-shell { grid-template-columns: 224px minmax(0,1fr); }
  html:root[data-theme] .sidebar { align-self: stretch; }
  .sidebar-content { position: sticky; top: 0; height: calc(100dvh - 78px); flex-shrink: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--theme-nav-current) transparent; }
}
@media(max-width:760px) {
  .sidebar-content { padding: 10px 12px; }
  .nav-primary { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  html:root[data-theme] .nav-item { min-height: 44px; }
  html:root[data-theme] .nav-subitem { min-height: 36px; }
  .sidebar-art { display: none; }
}

.artwork-heading { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--orero-line); }
.artwork-heading h3 { margin: 0 0 8px; font-size: 18px; }
.artwork-heading p { max-width: 760px; line-height: 1.6; }
.artwork-options { border: 0; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.artwork-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 1px solid var(--orero-line); border-radius: 16px; padding: 16px 10px; margin: 0; cursor: pointer; background: var(--orero-paper); text-align: center; }
.artwork-option:has(input:checked) { border-color: var(--theme-accent); background: var(--theme-soft); box-shadow: inset 0 0 0 1px var(--theme-accent); }
.artwork-option:has(input:focus-visible) { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
.artwork-option > input { position: absolute; top: 9px; right: 9px; width: 15px; height: 15px; min-height: 0; margin: 0; accent-color: var(--theme-accent); }
.artwork-preview { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 26px; background: var(--theme-stream); font-size: 48px; color: var(--theme-accent); }
.artwork-preview img { width: 78px; height: 80px; }
.artwork-option strong { font-size: 12px; }
.artwork-option > span:last-child { color: var(--orero-muted); font-size: 11px; font-weight: normal; line-height: 1.5; }
@media(max-width:420px) { .artwork-options { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { html:root[data-theme] .nav-item { transition: none; } }