/* web/employee-home.css
   ButterPop employee home. Local system fonts only; the only external asset is the
   first-party logo and tactile controls served from this app. No CDN, webfont or tracking.
   Layout geometry comes from shared layout-tokens.css (gutters, header, widths).
   Shared logo/header rhythm lives in brand-shell.css. */

@import url("/layout-tokens.css");
@import url("/brand-shell.css");

:root {
  --butter: #FFF6A0;
  --canvas: #F0E8FF;
  --lavender: #E9DEFF;
  --lilac: #D7C5FF;
  --ink: #171717;
  --paper: #FFFFFF;
  --line: 1.5px solid var(--ink);
  --radius: 28px;
  --radius-small: 18px;
  /* HR chat rhythm from the employee-home polish, on the shared spacing scale.
     Page gutters stay --layout-gutter / --layout-gutter-wide. */
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-action: var(--space-3);
  /* Chat head, message log and composer share one inner edge. */
  --chat-gutter: clamp(14px, 3vw, 22px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* A hidden element stays hidden whatever display its own rules ask for. Without
   this the grid and flex panels below keep drawing a hidden workspace, which is
   how a signed-out page could still show its private view. */
[hidden] { display: none !important; }

/* Inert regions stay non-interactive even while a script is mid-flight. */
[inert] { pointer-events: none; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--butter);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 450;
  font-size: 17px;
  line-height: 1.45;
}

a { color: var(--ink); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
textarea:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.small { font-size: 0.85rem; }
.muted { opacity: 0.78; }

/* Empty status copy should not leave a blank line in the compact card. */
.status-state:empty,
.status-card > .small.muted:empty,
.panel-note:empty,
.greeting-company:empty,
.greeting-note:empty,
.composer-note:empty,
.attach-file:empty,
.attach-task:empty,
.attach-state:empty,
.attach-actions:empty,
.leave-state:empty,
.attendance-state:empty,
.attendance-meta:empty,
.voice-state:empty,
.voice-meter:empty,
.voice-actions:empty,
.chat-state:empty { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  font-weight: 700;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--paper);
  border: var(--line);
  border-radius: 999px;
  text-decoration: none;
}

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Header — sizing/alignment from brand-shell.css; Butter Pop colors stay here. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space);
  min-height: var(--layout-header-height);
  padding: var(--layout-header-pad-block) max(var(--layout-gutter), var(--safe-right)) var(--layout-header-pad-block) max(var(--layout-gutter), var(--safe-left));
  padding-top: max(var(--layout-header-pad-block), var(--safe-top));
  background: var(--butter);
  border-bottom: var(--line);
}

.topnav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.navlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-control);
  padding: 0 var(--space-4);
  background: var(--paper);
  border: var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.navlink[aria-current='page'] { background: var(--lilac); }

.person { position: relative; }

.person-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  background: var(--lilac);
  color: var(--ink);
  border: var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.person-button[disabled] {
  opacity: 0.55;
  cursor: default;
}

.person-name {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--paper);
  border: var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
}

.person-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 240px;
  max-width: min(92vw, 320px);
  padding: 14px 16px;
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius-small);
}

.menu-line { margin: 0 0 6px; }

/* Sign out is a real button: it posts the session logout rather than following a
   link, so it keeps button behaviour and button weight. */
.menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 18px;
  margin: 6px 0 0;
  background: var(--lilac);
  color: var(--ink);
  border: var(--line);
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.menu-switch { margin: 8px 0; }
.menu-switch-list { display: flex; flex-direction: column; align-items: flex-start; }

.menu-link[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Gate and company choice — Butter Pop public / landing shells.
   Scoped so signed-in workspace layout stays with the employee-home polish PR. */

.gate,
.choose {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--layout-gate-max);
  margin: 0 auto;
  padding: clamp(20px, 5vw, var(--space-8)) max(var(--layout-gutter), var(--safe-right)) calc(clamp(20px, 5vw, var(--space-8)) + var(--safe-bottom)) max(var(--layout-gutter), var(--safe-left));
}

.gate-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 28rem;
}

.gate-title,
.choose h1 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3.8vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.gate-text { margin: 0 0 20px; max-width: 36ch; }

.choose .small,
.gate-hero > .small { margin: 0 0 20px; max-width: 40ch; }

.gate-actions,
.status-actions,
.card-actions,
.task-actions,
.attach-actions,
.voice-actions,
.attach-tasks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-action);
  margin: 0;
  width: 100%;
}

.gate-actions .button {
  min-width: 8.75rem;
}

.choose-list {
  display: grid;
  gap: 12px;
  margin: 0;
  width: 100%;
}

.choose-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  background: var(--paper);
}

/* Landing-only: brand mark breathes in the topbar; footer shares the hero column. */
.shell:has(#eh-gate:not([hidden])) .topbar,
.shell:has(#eh-choose:not([hidden])) .topbar {
  padding-block: var(--layout-header-pad-block);
  padding-inline: var(--layout-gutter);
}

.shell:has(#eh-gate:not([hidden])) .brand,
.shell:has(#eh-choose:not([hidden])) .brand {
  gap: 14px;
}

.shell:has(#eh-gate:not([hidden])) .brand-name,
.shell:has(#eh-choose:not([hidden])) .brand-name {
  font-size: 1.12rem;
}

.shell-footer {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 1.25rem;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) clamp(1.25rem, 3vw, 1.75rem);
  color: var(--ink);
  opacity: 0.72;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.shell:has(#eh-gate:not([hidden])) .shell-footer,
.shell:has(#eh-choose:not([hidden])) .shell-footer {
  display: flex;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 20px;
  background: var(--lilac);
  color: var(--ink);
  border: var(--line);
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.button[disabled] {
  background: var(--paper);
  opacity: 0.6;
  cursor: not-allowed;
}

.small-button {
  min-height: var(--layout-control);
  padding: 0 14px;
  font-size: 0.85rem;
}

/* Workspace */

.workspace {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space);
  width: 100%;
  max-width: var(--layout-shell-max);
  margin: 0 auto;
  padding: var(--space) max(var(--layout-gutter), var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) max(var(--layout-gutter), var(--safe-left));
  min-height: 0;
}

.topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space);
  align-items: start;
}

.greeting { padding: 0; }

.greeting-text {
  margin: 0;
  font-size: clamp(28px, 7vw, 34px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.greeting-company {
  margin: var(--space-xs) 0 0;
  font-size: 1rem;
}

.greeting-note { margin: var(--space-xs) 0 0; }

.status-card {
  min-width: 0;
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius);
  padding: var(--space);
}

.status-title {
  margin: 0 0 var(--space-xs);
  font-size: 1rem;
  font-weight: 800;
}

.status-state { margin: 0; }

.status-card > .small.muted { margin: var(--space-xs) 0 0; }

.status-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.status-list:empty { margin-top: 0; }

.panel {
  min-width: 0;
  border-top: var(--line);
  padding-top: var(--space-sm);
}

.panel:first-child {
  border-top: 0;
  padding-top: 0;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.panel-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.panel-count {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}

.panel-count.is-unavailable {
  font-size: 13px;
  font-weight: 700;
}

.panel-note { margin: var(--space-xs) 0 0; }

.panel-details { margin-top: var(--space-xs); }

.panel-details > summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.panel-details[open] .task-list {
  max-height: 160px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.task-list {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}

.task {
  background: var(--canvas);
  border: var(--line);
  border-radius: var(--radius-small);
  padding: var(--space-sm) var(--space);
}

.task-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.task-meta { margin: var(--space-xs) 0 0; }

.task-due-soon {
  display: inline-block;
  border: var(--line);
  border-radius: var(--radius-small);
  padding: 0 0.5em;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.task-actions {
  margin: var(--space-xs) 0 0;
}

.task-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-control);
  padding: 0 var(--space-3);
  background: var(--paper);
  border: var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.status-actions { margin: var(--space-sm) 0 0; }

.card-actions { margin: 0 0 10px; }

/* Chat */

.chat {
  display: flex;
  flex-direction: column;
  height: clamp(260px, 52vh, 720px);
  min-height: 260px;
  background: var(--lavender);
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* Composer sits immediately under chat chrome; tighten that pair only. */
  margin-bottom: calc(var(--space-xs) - var(--space));
}

.chat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) var(--chat-gutter);
  border-bottom: var(--line);
  background: var(--lavender);
}

.chat-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.chat-state {
  margin: 0;
  font-size: 0.85rem;
}

.ai-notice {
  padding: var(--space-xs) var(--chat-gutter);
  border-bottom: var(--line);
  background: var(--paper);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ai-notice p { margin: 0; }
.ai-notice p + p { margin-top: var(--space-xs); }

.log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin: 0;
  padding: var(--space) var(--chat-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.entry { display: flex; }
.entry-you { justify-content: flex-end; }
.entry-them { justify-content: flex-start; }

.bubble {
  max-width: min(68ch, 92%);
  padding: var(--space-sm) var(--space);
  border: var(--line);
  border-radius: 22px;
}

.bubble-you {
  background: var(--lilac);
  border-bottom-right-radius: 10px;
}

.bubble-them {
  background: var(--paper);
  border-bottom-left-radius: 10px;
}

.bubble-who {
  margin: 0 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bubble-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  max-width: min(80ch, 100%);
  margin: 0;
  padding: var(--space-sm) var(--space);
  background: var(--butter);
  border: var(--line);
  border-radius: var(--radius-small);
  font-size: 0.9rem;
}

.note-tag {
  padding: 1px 8px;
  background: var(--paper);
  border: var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.note-text { overflow-wrap: anywhere; }

.card {
  width: min(72ch, 100%);
  padding: var(--space);
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius);
}

.card-receipt { background: var(--lilac); }

.card-title {
  margin: 0 0 var(--space-xs);
  font-size: 1.05rem;
  font-weight: 800;
}

.card-lead { margin: 0 0 var(--space-xs); }

.card-task {
  margin: 0 0 var(--space-xs);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.card-text {
  margin: 0 0 var(--space-sm);
  font-size: 0.9rem;
}

.task-quote {
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm) var(--space);
  background: var(--canvas);
  border: var(--line);
  border-radius: var(--radius-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.card-actions {
  margin: 0 0 var(--space-sm);
}

.card-state {
  margin: 0;
  font-size: 0.9rem;
}

/* Composer */

.composer {
  display: grid;
  gap: var(--space-sm);
  margin-top: auto;
  padding: var(--space) var(--chat-gutter);
  padding-bottom: calc(var(--space) + var(--safe-bottom));
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius);
  position: sticky;
  bottom: 0;
  z-index: 15;
}

.composer-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
}

.chip-label {
  padding: 2px 10px;
  background: var(--canvas);
  border: var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chip-value {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

.draft {
  flex: 1;
  min-width: 0;
  min-height: 58px;
  max-height: 30vh;
  resize: vertical;
  padding: var(--space-sm) var(--space);
  background: var(--canvas);
  color: var(--ink);
  border: var(--line);
  border-radius: var(--radius-small);
  font: inherit;
  font-weight: 450;
}

.draft[readonly] { opacity: 0.8; }

.composer-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-action);
}

.round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  background: var(--lilac);
  color: var(--ink);
  border: var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.round[disabled] {
  background: var(--paper);
  opacity: 0.55;
  cursor: not-allowed;
}

.icon {
  display: block;
  width: 22px;
  height: 22px;
}

.send {
  min-height: var(--tap);
  padding: 0 24px;
  background: var(--lilac);
  color: var(--ink);
  border: var(--line);
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.send[disabled] {
  background: var(--paper);
  opacity: 0.6;
  cursor: not-allowed;
}

.stop {
  min-height: var(--tap);
  padding: 0 18px;
  background: var(--paper);
  color: var(--ink);
  border: var(--line);
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.composer-note { margin: 0; }
.composer-hint { margin: 0; }

/* Responsive */

/* Tablet and up: three compact work indicators share one row when they fit. */
@media (min-width: 640px) {
  .status-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .panel {
    border-top: 0;
    padding-top: 0;
    border-left: var(--line);
    padding-left: var(--space);
  }

  .panel:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .panel-label { font-size: 13px; }
  .panel-count { font-size: 22px; }
}

/* Desktop: wide workspace with greeting left and compact indicators right. */
@media (min-width: 1100px) {
  .workspace {
    padding-left: var(--layout-gutter-wide);
    padding-right: var(--layout-gutter-wide);
    gap: var(--space-5);
  }

  .topbar {
    padding-left: var(--layout-gutter-wide);
    padding-right: var(--layout-gutter-wide);
  }

  .topline {
    grid-template-columns: minmax(0, 1fr) minmax(0, 58%);
    gap: var(--space-6);
  }

  .greeting-text {
    font-size: clamp(36px, 4vw, 64px);
    line-height: 1.03;
  }

  .status-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-sm);
    align-items: start;
    padding: var(--space);
  }

  .status-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    align-self: center;
  }

  .status-actions {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
  }

  .status-state {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: var(--space-xs) 0 0;
  }

  .status-list {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--space-sm);
  }

  .status-card > .small.muted {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: var(--space-xs) 0 0;
  }

  .panel-details > summary {
    min-height: 34px;
  }

  .chat {
    height: clamp(360px, 52vh, 720px);
  }
}

@media (max-width: 560px) {
  body { font-size: 16px; }

  /* On a phone the expanded composer can be taller than the visible chat.
     Keep it in the page flow so it cannot cover messages or work controls. */
  .composer { position: static; }

  /* Empty work indicators are a compact glance, leaving the chat in view. */
  .status-list.all-empty {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .status-list.all-empty .panel {
    border-top: 0;
    border-left: var(--line);
    padding: 0 var(--space-xs);
  }
  .status-list.all-empty .panel:first-child { border-left: 0; padding-left: 0; }
  .status-list.all-empty .panel-note { display: none; }
  .status-list.all-empty .panel-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .status-list.all-empty .panel-label { font-size: 0.72rem; }
  .status-list.all-empty .panel-count { font-size: 1.2rem; }

  .topbar {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
  }

  .topnav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .navlink {
    flex: 1;
    justify-content: center;
    min-height: var(--tap);
  }

  .person { margin-left: auto; }

  .person-menu {
    right: 0;
    left: auto;
  }

  .workspace {
    padding-inline: max(var(--layout-gutter), var(--safe-left)) max(var(--layout-gutter), var(--safe-right));
    padding-bottom: calc(var(--space-6) + var(--safe-bottom));
  }

  .gate,
  .choose {
    padding-inline: max(var(--layout-gutter), var(--safe-left)) max(var(--layout-gutter), var(--safe-right));
    padding-block: 1.5rem calc(1rem + var(--safe-bottom));
  }

  .gate-actions .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .shell-footer {
    padding-inline: max(var(--space-3), var(--safe-left)) max(var(--space-3), var(--safe-right));
    align-items: flex-start;
  }

  .composer-row {
    flex-direction: column;
    align-items: stretch;
  }

  .composer-buttons {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-action);
  }

  .send {
    flex: 1 1 auto;
    min-width: 5.5rem;
    justify-content: center;
  }

  .composer-buttons {
    width: 100%;
  }

  .stop {
    flex: 0 0 auto;
  }

  .task-link,
  .small-button { min-height: var(--tap); }

  .panel-details > summary { min-height: 44px; }

  .draft {
    min-height: 72px;
    font-size: 16px;
  }

  .chat { height: clamp(520px, 70vh, 720px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Attachments
   The file step is a small panel inside the composer, drawn from the same tokens
   as the rest of the page. It adds no new colour and no new shape. */

.attach-panel {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-sm) var(--space);
  background: var(--canvas);
  border: var(--line);
  border-radius: var(--radius-small);
}

.attach-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
}

.attach-file {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.attach-task,
.attach-state,
.attach-note {
  margin: 0;
  overflow-wrap: anywhere;
}

.attach-tasks,
.attach-actions {
  margin: 0;
  min-width: 0;
}

.attach-tasks > .small { margin: 0; }

.attach-choice {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-files {
  list-style: none;
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
}

.attach-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
}

.attach-file-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.attach-file-tag {
  padding: 1px 8px;
  background: var(--lilac);
  border: var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.attach-formats { margin: 0; }

@media (max-width: 560px) {
  .attach-actions > .button,
  .attach-tasks > .button { min-height: var(--tap); }

  .attach-choice { max-width: 100%; }
}

/* Leave: the existing chooser and one small private HR entry. */

.leave-panel {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-sm) var(--space);
  background: var(--canvas);
  border: var(--line);
  border-radius: var(--radius-small);
}

.leave-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
}

.leave-state,
.leave-note {
  margin: 0;
  overflow-wrap: anywhere;
}

.private-sick-entry {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius-small);
}

.private-sick-entry > p,
#eh-sick-state { margin: 0; }

.private-sick-fields {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.private-sick-fields label { font-size: 0.85rem; font-weight: 700; }
.private-sick-fields input,
.private-sick-fields textarea {
  width: 100%;
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  border: var(--line);
  border-radius: var(--radius-small);
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
}

.private-sick-fields textarea { resize: vertical; }
.private-sick-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.private-crm-entry { display: grid; gap: var(--space-xs); padding: var(--space-sm); background: var(--paper); border: var(--line); border-radius: var(--radius-small); }
.private-crm-entry > button { justify-self: start; }
.private-crm-fields { display: grid; gap: var(--space-xs); min-width: 0; }
.private-crm-fields #crm-handoff-form { display: grid; gap: var(--space-xs); }
.private-crm-fields label { font-size: 0.85rem; font-weight: 700; }
#eh-private-release-observation { white-space: pre-line; }
.private-crm-fields :is(input, textarea, select) { width: 100%; min-width: 0; padding: var(--space-xs) var(--space-sm); border: var(--line); border-radius: var(--radius-small); background: var(--canvas); color: var(--ink); font: inherit; }
.private-crm-fields textarea { resize: vertical; }
.private-crm-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.private-crm-fields[hidden] { display: none; }
.private-sick-decision { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.private-sick-decision[hidden] { display: none; }
.private-sick-decision p { flex-basis: 100%; margin: 0; }

.leave-list {
  list-style: none;
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.leave-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  min-width: 0;
}

.leave-choice {
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-choice[aria-pressed='true'] { background: var(--butter); }

@media (max-width: 560px) {
  .leave-row > .button { min-height: var(--tap); }

  .leave-choice {
    max-width: 100%;
    white-space: normal;
  }
}

/* Attendance
   One compact line of what the server says about this person's working day, and
   one round control that puts the next message in that context. It adds no new
   colour and no new shape, there is no timer and no map, and nothing here is
   drawn from anything this page decided on its own. */

.attendance-compact {
  min-width: 0;
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-sm);
  border-top: var(--line);
}

.attendance-state {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.attendance-meta {
  margin: var(--space-xs) 0 0;
  overflow-wrap: anywhere;
}

/* Voice notes
   The voice step is the same small panel shape as the file step, drawn from the same
   tokens. It adds no colour, no new shape and no animation, and there is no waveform,
   because this page cannot honestly draw one. */

.voice-panel {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-sm) var(--space);
  background: var(--canvas);
  border: var(--line);
  border-radius: var(--radius-small);
}

.voice-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
}

.voice-state,
.voice-meter,
.voice-note {
  margin: 0;
  overflow-wrap: anywhere;
}

.voice-transcript {
  margin: 0;
  padding: var(--space-sm) var(--space);
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.voice-actions {
  margin: 0;
  min-width: 0;
}

/* The mic and the attendance toggle read as pressed only while they are genuinely
   active; a disabled control never borrows the pressed background. */
.round[aria-pressed='true']:not([disabled]) { background: var(--butter); }

@media (min-width: 1100px) {
  .attendance-compact {
    grid-column: 1 / -1;
    grid-row: 5;
  }
}

@media (max-width: 560px) {
  .voice-actions > .button { min-height: var(--tap); }
}

/* Owner-approved selectable appearance; white is the default before JS runs, 24 September 2026. */
body{--butter:#f4f4f2;--canvas:#eaeae6;--lavender:#f0f0ec;--lilac:#d0d0c8;--ink:#1a1a1a;--paper:#fff;--line:1.5px solid #bbb;--sh:0 2px 12px rgba(0,0,0,.06);background:var(--butter);color:var(--ink)}
body[data-theme='olive']{--butter:#b5c39a;--canvas:#dfe5cf;--lavender:#cdd6b8;--lilac:#96a87a;--ink:#171c12;--paper:#faf7eb;--line:1.5px solid #171c12;--sh:0 2px 12px rgba(23,28,18,.09)}
body[data-theme='lemon']{--butter:#FFF6A0;--canvas:#F0E8FF;--lavender:#E9DEFF;--lilac:#D7C5FF;--ink:#171717;--paper:#FFF;--line:1.5px solid #171717;--sh:0 2px 12px rgba(23,23,23,.08)}
body[data-theme='white']{--butter:#f4f4f2;--canvas:#eaeae6;--lavender:#f0f0ec;--lilac:#d0d0c8;--ink:#1a1a1a;--paper:#fff;--line:1.5px solid #bbb;--sh:0 2px 12px rgba(0,0,0,.06)}
body[data-theme='black']{--butter:#141414;--canvas:#242424;--lavender:#1c1c1c;--lilac:#363636;--ink:#e0e0e0;--paper:#0e0e0e;--line:1.5px solid #444;--sh:0 2px 16px rgba(0,0,0,.3);color-scheme:dark}
html:has(body[data-theme='black']){color-scheme:dark}
body[data-theme='black'] a{color:var(--ink)}
body[data-theme='black'] .brand-logo{content:url('/brand-logo-on-dark.svg');filter:none}
body[data-theme='black'] .draft,
body[data-theme='black'] .private-sick-fields input,
body[data-theme='black'] .private-sick-fields textarea{color:var(--ink)}

.status-card,.person-menu{box-shadow:var(--sh)}
.composer{box-shadow:var(--sh);background:var(--paper);border:none}
.chat{border:none;box-shadow:var(--sh);background:var(--paper)}
.chat-head{background:var(--paper);border-bottom:1px solid rgba(128,128,128,.15)}
.ai-notice{border-bottom:1px solid rgba(128,128,128,.15)}

.greeting-text{font-size:clamp(20px,5vw,26px);font-weight:700}


.eh-theme-fieldset{border:0;padding:0;margin:10px 0 0}
.eh-theme-fieldset legend{font-size:.8rem;font-weight:700;padding:0;margin:0 0 6px}
.eh-theme-options{display:flex;flex-wrap:wrap;gap:6px}
.eh-theme-option{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 10px;border:2px solid transparent;border-radius:999px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.eh-theme-option[aria-pressed='true']{border-color:currentColor;outline:2px solid currentColor;outline-offset:1px}
.eh-theme-option[data-value='olive']{background:#b5c39a;color:#171c12}
.eh-theme-option[data-value='lemon']{background:#FFF6A0;color:#171717}
.eh-theme-option[data-value='white']{background:#f4f4f2;color:#1a1a1a;border-color:#ccc}
.eh-theme-option[data-value='black']{background:#1a1a1a;color:#e0e0e0}
.eh-theme-option:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:560px){.eh-theme-option{min-height:44px;min-width:44px}}

/* Signed-in employee home: one centred column. Work gadgets sit above a single
   conversation card (header, scrolling log, composer). Gadgets use the tinted
   canvas shade; the conversation is paper and is the dominant object. */
body {
  --line: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  --hairline: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  --radius: 22px;
  --radius-small: 14px;
  --surface-shadow: 0 8px 24px rgba(23, 28, 18, .07);
  --home-max: 1120px;
  --home-gutter: clamp(14px, 3.5vw, 32px);
}
body[data-theme='black'] { --surface-shadow: 0 8px 24px rgba(0, 0, 0, .3); }

/* Header: square logo left, quiet profile control right. */
.topbar { position: relative; width: 100%; max-width: var(--home-max); min-height: 72px; margin-inline: auto; padding: max(10px, var(--safe-top)) max(var(--home-gutter), var(--safe-right)) 10px max(var(--home-gutter), var(--safe-left)); gap: 14px; background: transparent; border: 0; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { display: block; flex: none; width: 52px; height: 52px; object-fit: contain; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 700; }
.brand-name:empty, .topnav { display: none; }
.person { flex: none; margin-left: auto; }
.person-button { gap: 8px; min-height: 44px; padding: 0 8px 0 4px; background: transparent; border: 0; border-radius: 999px; font-size: .9rem; font-weight: 650; }
.person-button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.avatar { flex: none; width: 30px; height: 30px; background: var(--ink); color: var(--paper); border: 0; font-size: 12px; font-weight: 700; }
.person-name { max-width: 16ch; }
.person-chevron { font-size: .7rem; opacity: .6; }
.person-menu { padding: 16px; background: var(--paper); border: var(--line); border-radius: var(--radius-small); box-shadow: var(--surface-shadow); }

.workspace { display: flex; flex-direction: column; gap: 14px; max-width: var(--home-max); padding: 4px max(var(--home-gutter), var(--safe-right)) calc(20px + var(--safe-bottom)) max(var(--home-gutter), var(--safe-left)); }
.greeting { padding: 0 2px; }
.greeting-text { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.greeting-company { margin: 2px 0 0; font-size: .9rem; opacity: .72; }
.greeting-note { margin: 4px 0 0; }

/* Conversation: one flex column. Header and composer keep their size; the log scrolls. */
.chat { flex: none; display: flex; flex-direction: column; height: 60vh; height: 60dvh; min-height: 430px; margin: 0; background: var(--paper); border: var(--line); border-radius: var(--radius); box-shadow: var(--surface-shadow); overflow: hidden; }
.chat-head { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 22px 10px; background: transparent; border: 0; border-bottom: var(--hairline); }
.chat-title { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.chat-state { margin-left: auto; font-size: 12px; opacity: .72; }
.log { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 18px 22px; gap: 16px; }
.bubble { max-width: min(68ch, 92%); padding: 0; border: 0; border-radius: 0; }
.bubble-them { background: transparent; }
.bubble-you { max-width: min(58ch, 90%); padding: 10px 14px; background: var(--canvas); border-radius: 16px 16px 6px 16px; }
.bubble-who { font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .62; }
.bubble-text { font-size: 16px; line-height: 1.5; }
.bubble-text.eh-short { font-size: clamp(21px, 2.3vw, 27px); font-weight: 680; line-height: 1.25; letter-spacing: -.02em; max-width: 32ch; text-wrap: balance; }
.bubble-text.eh-medium { font-size: clamp(17px, 1.8vw, 20px); font-weight: 580; line-height: 1.4; letter-spacing: -.01em; max-width: 52ch; }
.bubble-text.eh-long { font-size: 16px; font-weight: 450; line-height: 1.55; max-width: 72ch; }
.bubble-text:dir(rtl) { letter-spacing: normal; line-height: 1.5; }
.log-note { padding: 8px 12px; background: var(--canvas); border: 0; border-radius: 12px; font-size: 12px; }
.note-tag { background: transparent; border: var(--line); font-size: 10px; }
.card { background: var(--paper); border: var(--line); border-radius: 16px; }

/* Composer: last part of the chat card, never a separate panel. Expanded panels
   scroll inside it instead of pushing the log out of view. */
.composer { flex: none; position: static; z-index: auto; display: grid; gap: 8px; max-height: 60%; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 12px 18px calc(14px + var(--safe-bottom)); background: transparent; border: 0; border-top: var(--hairline); border-radius: 0; box-shadow: none; }
.composer > * { min-width: 0; }
.composer :is(.leave-panel, .attach-panel, .voice-panel) { background: var(--canvas); border: var(--hairline); border-radius: var(--radius-small); }
.composer :is(.leave-panel, .attach-panel, .voice-panel) :is(.button, .task-link) { background: var(--paper); }
.chip-value { max-width: min(40ch, 100%); }
.composer-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 14px; background: var(--paper); border: var(--line); border-radius: 16px; }
.composer-row:has(.draft:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.draft { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 180px; padding: 11px 0; background: transparent; border: 0; border-radius: 0; font-size: 16px; line-height: 1.4; resize: vertical; }
.draft:focus-visible { outline: none; }
.draft::placeholder { color: var(--ink); opacity: .55; }
.composer-buttons { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: 2px; width: auto; }
.round { width: 44px; height: 44px; background: transparent; color: var(--ink); border: 0; border-radius: 12px; box-shadow: none; }
.round[disabled] { background: transparent; }
.round:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.round[aria-pressed='true']:not([disabled]) { background: var(--lilac); }
#eh-mic[aria-pressed='true']:not([disabled]) { background: #9a344a; color: #fff; }
.send { flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin-left: 4px; padding: 0; background: var(--lilac); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 12px; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent), 0 1px 3px rgba(0, 0, 0, .08); font-size: 20px; font-weight: 700; line-height: 1; }
.send[disabled] { background: var(--canvas); box-shadow: none; }
.stop { flex: none; min-height: 44px; padding: 0 14px; background: var(--paper); color: var(--ink); border: var(--line); border-radius: 12px; box-shadow: none; font-size: .88rem; font-weight: 700; }
.composer-note { margin: 0 4px; }
.composer-hint { margin: 0 4px; padding: 0; font-size: 12px; }

/* Footer: quiet line with the collapsed privacy disclosure; opened text reads normally. */
.shell-footer { display: flex; opacity: 1; }
.shell-footer > span { opacity: .6; }
.shell:has(#eh-workspace:not([hidden])) .shell-footer { max-width: var(--home-max); padding: 0 max(var(--home-gutter), var(--safe-right)) calc(18px + var(--safe-bottom)) max(var(--home-gutter), var(--safe-left)); }
.ai-notice { max-width: 100%; margin-left: auto; padding: 0; background: transparent; border: 0; border-radius: var(--radius-small); font-size: .75rem; line-height: 1.35; }
.ai-notice > summary { padding: 13px 0; cursor: pointer; opacity: .72; }
.ai-notice[open] { flex-basis: 100%; margin-left: 0; padding: 0 16px 14px; background: var(--paper); border: var(--hairline); }
.ai-notice[open] > summary { opacity: 1; }
.ai-notice > p { max-width: 75ch; margin: 0; font-size: .88rem; font-weight: 450; line-height: 1.55; letter-spacing: normal; text-transform: none; }
.ai-notice > p + p { margin-top: 8px; }

/* Work gadgets: tinted canvas cards above the conversation, on a grid so a
   person with many tools (the CEO has seven) keeps readable card widths:
   one column on phones, two from 640px, three from 1024px. The work summary
   and time card always show; department and CEO cards fold behind one toggle
   row so the chat is not buried. */
.eh-gadgets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.eh-gadgets > :is(.status-card, .eh-gadget) { min-width: 0; padding: 14px 16px; background: var(--canvas); border: var(--hairline); border-radius: 18px; box-shadow: none; overflow-wrap: anywhere; }
.eh-gadgets > :is(.status-card, .eh-gadget-hr, .eh-tools-toggle) { grid-column: 1 / -1; }
.eh-tools-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; min-height: 44px; padding: 8px 16px; background: var(--canvas); color: var(--ink); border: var(--hairline); border-radius: 14px; box-shadow: none; font: inherit; text-align: start; cursor: pointer; }
.eh-tools-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eh-tools-groups { flex: 1 1 12rem; min-width: 0; font-size: .85rem; font-weight: 600; opacity: .78; overflow-wrap: anywhere; }
.eh-tools-chevron { margin-inline-start: auto; transition: transform .13s ease; }
.eh-tools-toggle[aria-expanded='true'] .eh-tools-chevron { transform: rotate(180deg); }
/* Folded: a card with an alert keeps only its title and alert, as one full row. */
.eh-gadgets:not(.is-tools-open) > [data-role-gadget]:not(:has(> .eh-gadget-alert)) { display: none; }
.eh-gadgets:not(.is-tools-open) > [data-role-gadget] { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 10px; }
.eh-gadgets:not(.is-tools-open) > [data-role-gadget] > :not(.eh-gadget-title, .eh-gadget-alert) { display: none; }
.eh-gadgets:not(.is-tools-open) > [data-role-gadget] > :is(.eh-gadget-title, .eh-gadget-alert) { margin: 0; }
.eh-gadgets:not(.is-tools-open) > [data-role-gadget] > .eh-gadget-alert { flex: 1 1 16rem; min-width: 0; }
.status-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 8px; }
.status-card > * { grid-column: 1 / -1; }
.status-title { grid-column: 1; grid-row: 1; align-self: center; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.status-card > .status-actions { grid-column: 2; grid-row: 1; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; width: auto; margin: 0; }
.status-actions .button { min-height: 40px; padding: 0 8px; background: transparent; border: 0; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.status-state { margin: 6px 0 0; }
.status-list, .status-list.all-empty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.status-list.all-empty { display: none; }
.panel, .panel:first-child, .status-list.all-empty .panel { min-width: 0; padding: 10px 12px; background: var(--paper); border: var(--hairline); border-radius: 12px; }
.panel-head { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.panel-label { font-size: 11px; font-weight: 650; opacity: .72; }
.panel-count { font-size: 21px; font-weight: 760; letter-spacing: -.04em; }
.panel-count.is-unavailable { font-size: 12px; letter-spacing: 0; }
.status-list.all-empty .panel-note { display: none; }
.status-card > .small.muted:not(:empty) { margin: 8px 0 0; font-size: .9rem; opacity: .78; }
.panel-details > summary { min-height: 40px; padding: 0; background: transparent; border: 0; border-radius: 0; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.attendance-compact { border-top: var(--hairline); }
.eh-gadget-title { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eh-gadget-status { margin: 0; font-size: .88rem; line-height: 1.45; }
.eh-hr-metrics { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-block: 10px 12px; }
.eh-metric { display: flex; flex-direction: column; gap: 3px; min-width: 72px; }
.eh-metric-value { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 780; line-height: 1; letter-spacing: -.04em; }
.eh-metric-label { font-size: .76rem; line-height: 1.35; opacity: .7; }
.eh-role-links { display: flex; flex-wrap: wrap; gap: 8px; }
.eh-gadget-link { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; padding: 8px 14px; text-align: center; line-height: 1.25; overflow-wrap: anywhere; background: var(--paper); color: var(--ink); border: var(--line); border-radius: 12px; font-size: .82rem; font-weight: 700; text-decoration: none; }
.eh-project-preview { display: grid; gap: 8px; padding: 0; margin: 8px 0; list-style: none; }
.eh-project-preview-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: var(--hairline); }
.eh-project-preview-title { flex: 1 1 100%; overflow-wrap: anywhere; font-size: .85rem; }
.eh-gadget-cue { margin-inline-start: .3em; font-weight: 600; }
.eh-gadget-alert { margin: 0 0 10px; padding: 10px 12px; border: var(--line); border-radius: 12px; }
.eh-gadget-alert.is-urgent { background: var(--ink); color: var(--paper); border-width: 2px; }
.eh-gadget-alert-link { color: inherit; font-size: .88rem; font-weight: 750; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; }

/* Keep secondary controls quiet; physical depth belongs to the primary action. */
.shell :is(.button, .task-link, .choose-button, .menu-link) { background: var(--canvas); color: var(--ink); border: var(--line); border-radius: 12px; box-shadow: none; font-weight: 650; }
.shell :is(.navlink, .ai-notice > summary, .panel-details > summary) { background: transparent; border: 0; box-shadow: none; color: var(--ink); }
.shell .status-actions .button { background: transparent; border: 0; }
.shell .eh-theme-option[data-value] { display: inline-flex; gap: 7px; background: var(--paper); color: var(--ink); border: var(--line); box-shadow: none; }
.shell .eh-theme-option[data-value]::before { content: ''; display: inline-block; width: 12px; height: 12px; flex: none; border: 1px solid #171c1266; border-radius: 50%; background: #b5c39a; }
.shell .eh-theme-option[data-value='lemon']::before { background: #fff6a0; }
.shell .eh-theme-option[data-value='white']::before { background: #f4f4f2; }
.shell .eh-theme-option[data-value='black']::before { background: #171717; }
.shell .eh-theme-option[aria-pressed='true'] { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; }
.shell button:disabled { opacity: .48; cursor: not-allowed; }
.shell :is(button, .button, .task-link, .menu-link, .eh-gadget-link, .panel-details > summary, .ai-notice > summary):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.shell :is(button, .button, .task-link, .menu-link, .eh-gadget-link) { transition: transform .13s ease, box-shadow .13s ease; }
.shell :is(button, .button, .task-link, .menu-link, .eh-gadget-link):hover:not(:disabled) { transform: translateY(-1px); }
.shell :is(button, .button, .task-link, .menu-link, .eh-gadget-link):active:not(:disabled) { transform: translateY(1px); }

body[data-theme='black'] input, body[data-theme='black'] select, body[data-theme='black'] textarea { color-scheme: dark; }

/* Never squeeze every gadget into one row: that collapsed seven CEO cards to
   ~120px with overlapping labels. Columns step up only when cards stay readable. */
@media (min-width: 640px) {
  .eh-gadgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 1024px) {
  .eh-gadgets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eh-gadgets > :is(.status-card, .eh-gadget) { padding: 16px 18px; }
  /* The summary shares its row with the next card so the chat sits higher. */
  .eh-gadgets > .status-card { grid-column: span 2; }
  .eh-gadgets > .eh-gadget-hr { grid-column: auto; }
  .eh-gadgets:has(> .eh-gadget-hr[hidden]) > .status-card { grid-column: 1 / -1; }
}

/* Phone: gadgets stack in one readable column above the chat; composer
   controls drop under the draft behind a hairline. */
@media (max-width: 640px) {
  .topbar { min-height: 64px; padding-block: max(8px, var(--safe-top)) 8px; gap: 10px; }
  .brand-name { display: none; }
  .person-name { max-width: 10ch; }
  .workspace { gap: 10px; }
  .chat { height: 58vh; height: 58dvh; min-height: 380px; border-radius: 18px; }
  .chat-head { padding: 12px 16px 8px; }
  .log { padding: 14px 16px; gap: 14px; }
  .bubble-text.eh-short { font-size: 21px; }
  .bubble-text.eh-medium { font-size: 17px; }
  .composer { padding: 10px 12px calc(12px + var(--safe-bottom)); }
  .composer-row { flex-wrap: wrap; padding: 4px 4px 4px 12px; }
  .draft { flex-basis: 100%; width: 100%; padding-right: 8px; }
  .composer-buttons { width: 100%; justify-content: flex-end; padding-top: 4px; border-top: var(--hairline); }
  .composer-buttons #eh-mic { margin-right: auto; }
  .eh-gadgets { gap: 8px; }
  .eh-gadgets > :is(.status-card, .eh-gadget) { padding: 12px 14px; border-radius: 16px; }
  .eh-gadget-title { margin-bottom: 6px; }
  .status-state { margin-top: 4px; }
  .attendance-compact { margin-top: 8px; padding-top: 8px; }
  .eh-hr-metrics { flex-wrap: nowrap; gap: 14px; margin-block: 6px 8px; }
  .eh-metric { flex: 1 1 0; min-width: 0; }
  .eh-metric-value { font-size: 1.25rem; }
  .status-list, .status-list.all-empty { gap: 6px; }
  .panel, .panel:first-child, .status-list.all-empty .panel { padding: 8px; }
  .panel-label { font-size: 10px; }
  .panel-count { font-size: 18px; }
}
@media (max-width: 370px) {
  .person-name { max-width: 8ch; }
  .panel, .panel:first-child, .status-list.all-empty .panel { padding: 7px; }
  .panel-label { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Actions menu (G06): one "Actions" button above the draft opens every private
   control, grouped by area. Closed controls show only their open buttons; the
   control whose fields are open becomes a full-width card. Existing tokens only. */
.composer-actions { display: grid; gap: 8px; min-width: 0; }
.shell .actions-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.actions-chevron { display: inline-block; font-size: .8em; transition: transform .13s ease; }
.actions-toggle[aria-expanded='true'] .actions-chevron { transform: rotate(180deg); }
.actions-panel { display: grid; gap: 12px; min-width: 0; padding: 12px; background: var(--canvas); border: var(--hairline); border-radius: var(--radius-small); }
.actions-panel[hidden], .actions-group[hidden] { display: none; }
.actions-group { display: grid; gap: 6px; min-width: 0; }
/* A group whose every control is hidden by permission logic disappears too. */
.actions-group:not(:has(.private-crm-entry:not([hidden]))) { display: none; }
.actions-group-title { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.actions-group-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; min-width: 0; }
.actions-group-list > .private-crm-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 1 auto; max-width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; }
.actions-group-list > .private-crm-entry[hidden] { display: none; }
.actions-group-list > .private-crm-entry > .button { max-width: 100%; white-space: normal; text-align: start; }
.actions-group-list > .private-crm-entry > p { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
/* Keep empty status lines in the accessibility tree (live regions) but out of the layout. */
.actions-group-list > .private-crm-entry > p[role='status']:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.actions-group-list > .private-crm-entry > .private-crm-fields { flex: 1 1 100%; }
.actions-group-list > .private-crm-entry:has(> .private-crm-fields:not([hidden])) { flex-basis: 100%; padding: 12px; background: var(--paper); border: var(--line); border-radius: var(--radius-small); }
.actions-group-list > .private-crm-entry > .button { background: var(--paper); }

/* Launch reconcile read shows one fact per line. */
#eh-private-launch-review{white-space:pre-line}