/* Ghost UX 2.0 (D54) -- the Start surface.
 *
 * Loaded after every other stylesheet; it refines the "Nachtraum" system, it
 * does not replace it: every colour, radius, space and curve is a token from
 * tokens.css. No glass on these surfaces (glass stays in the dock and sheet),
 * no new typeface, no side stripes, motion only on transform/opacity.
 *
 * Information order (owner order 2026-10-10):
 *   1 Braucht Aufmerksamkeit  2 Ghost + chat  3 Heute  4 Projekte
 *   5 Thematisches (Für dich, Cannabis Radar)  6 System only on demand
 *
 * Desktop (>= 1100px, layout variant B): the day header spans the stage; the
 * right column starts with the attention panel, the strongest surface on the
 * screen, while Ghost keeps the centre. Tablet and phone: one column, attention
 * first -- the rail dissolves (display: contents) so its cards can be ordered
 * around the figure without duplicating any markup.
 *
 * Signal colours stay D29: amber = a decision waits (approvals), cyan = a
 * person wrote (relays), rosé = Ghost or a source has a problem. Priority is
 * light, weight and the level marks -- never an alarm colour.
 */

/* --- Day header --------------------------------------------------------- */

.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: calc(var(--s-3) + var(--safe-top)) var(--s-4) var(--s-2);
}

.day-header__when {
  min-width: 0;
}

.day-header__date {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  color: var(--ink-1);
}

.day-header__date-short {
  display: none;
}

.day-header__data {
  margin-top: 3px;
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.day-header__data[data-tone='aged'] .day-header__hint,
.day-header__data[data-tone='stale'] .day-header__hint,
.day-header__data[data-tone='partial'] .day-header__hint,
.day-header__data[data-tone='failed'] .day-header__hint {
  color: var(--error);
}

.day-header__data[data-tone='stale'] #day-freshness-text,
.day-header__data[data-tone='failed'] #day-freshness-text {
  color: var(--ink-2);
}

.day-header__tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.day-header__refresh {
  width: var(--touch);
  padding: 0;
  border-radius: 50%;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 var(--highlight-top);
  color: var(--ink-2);
}

.day-header__refresh[data-emphasis='on'] {
  color: var(--ink-1);
  box-shadow: inset 0 0 0 1px rgba(var(--light-blue-rgb), 0.55), var(--glow-1);
}

.day-header__refresh[aria-busy='true'] .icon {
  animation: day-refresh-spin 900ms linear infinite;
}

@keyframes day-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- System status: one chip, details on demand ---------------------------- */

.sys-status {
  position: relative;
}

.sys-status__chip {
  gap: var(--s-2);
  padding: 0 var(--s-3) 0 0.75rem;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 var(--highlight-top);
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}

.sys-status__icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ink-3);
}

.sys-status__chip[data-state='ready'] .sys-status__icon {
  color: var(--light-blue);
  filter: drop-shadow(0 0 5px rgba(var(--light-blue-rgb), 0.45));
}

.sys-status__chip[data-state='error'],
.sys-status__chip[data-state='error'] .sys-status__icon {
  color: var(--error);
}

.sys-status__chip[data-state='limited'] .sys-status__icon,
.sys-status__chip[data-state='unknown'] .sys-status__icon {
  color: var(--ink-2);
}

.sys-status__short,
.day-header__short {
  display: none;
}

.sys-status__chev {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--ink-3);
  transform: rotate(90deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.sys-status__chip[aria-expanded='true'] .sys-status__chev {
  transform: rotate(-90deg);
}

.sys-panel {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  z-index: var(--z-sheet);
  width: min(23.5rem, calc(100vw - 2 * var(--s-4)));
  max-height: min(34rem, calc(100dvh - 7rem));
  overflow-y: auto;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  /* solid, not glass: glass stays in the dock/sheet layer (materials rule) */
  background: linear-gradient(180deg, rgba(120, 170, 255, 0.07), rgba(120, 170, 255, 0.02)), var(--night-3);
  box-shadow: inset 0 1px 0 var(--highlight-top), inset 0 0 0 1px var(--hairline-strong), var(--shadow-3);
  transform-origin: top right;
  animation: sys-panel-in 200ms var(--ease-out);
}

.sys-panel[hidden] {
  display: none;
}

@keyframes sys-panel-in {
  from {
    opacity: 0.4;
    transform: translateY(-4px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sys-panel__title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-1);
}

.sys-panel__summary {
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.sys-panel__list {
  list-style: none;
  margin-top: var(--s-3);
}

.sys-row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--s-3);
  padding: 0.625rem 0;
  box-shadow: inset 0 1px 0 var(--hairline);
}

.sys-row:first-child {
  box-shadow: none;
}

.sys-row__icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 2px;
  color: var(--ink-3);
}

.sys-row__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sys-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.sys-row__name {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-1);
}

.sys-row__state {
  flex: none;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-3);
}

.sys-row[data-state='verified'] .sys-row__state {
  color: var(--light-blue);
}

.sys-row[data-state='verified'] .sys-row__icon {
  color: var(--ink-2);
}

.sys-row[data-state='limited'] .sys-row__state {
  color: var(--ink-2);
}

.sys-row[data-state='error'] :is(.sys-row__state, .sys-row__icon) {
  color: var(--error);
}

.sys-row__detail {
  font-size: var(--fs-caption);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.sys-row__connect {
  align-self: flex-start;
  margin-top: 2px;
  font-size: var(--fs-caption);
  font-weight: 600;
}

.sys-panel__legend {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  box-shadow: inset 0 1px 0 var(--hairline);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--ink-3);
}

.sys-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.sys-panel__details {
  min-height: 2.25rem;
  padding: 0 var(--s-3);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.sys-panel__details .icon {
  width: 0.9rem;
  height: 0.9rem;
}

.sys-panel__version {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

/* --- Braucht Aufmerksamkeit -------------------------------------------------- */

.attention {
  position: relative;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(130% 80% at 100% 0%, rgba(var(--light-blue-rgb), 0.17), transparent 62%),
    linear-gradient(180deg, rgba(112, 164, 255, 0.11), rgba(112, 164, 255, 0.04)),
    var(--night-2);
  box-shadow:
    inset 0 1px 0 rgba(200, 225, 255, 0.2),
    inset 0 0 0 1px rgba(var(--light-blue-rgb), 0.3),
    0 26px 60px -34px rgba(var(--light-blue-rgb), 0.55),
    var(--shadow-2);
}

/* A calm or not-yet-loaded panel is still the first thing, but it does not glow. */
.attention:is([data-state='clear'], [data-state='loading'], [data-state='failed'], [data-state='stale']) {
  background: var(--surface-section);
  box-shadow: inset 0 1px 0 var(--highlight-top), inset 0 0 0 1px var(--edge-section);
}

.attention__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.attention__label .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--light-blue);
}

.attention__headline {
  margin-top: var(--s-2);
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink-1);
  text-wrap: balance;
}

.attention:is([data-state='clear'], [data-state='loading']) .attention__headline {
  font-size: var(--fs-lead);
  color: var(--ink-2);
}

.attention__summary {
  margin-top: 3px;
  font-size: var(--fs-small);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.attention__note {
  margin-top: var(--s-3);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--error);
}

.att-group {
  margin-top: var(--s-4);
}

.att-group__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.att-group__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.6875rem;
}

.att-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.att-list__item[hidden],
.att-group[hidden] {
  display: none;
}

.att-card {
  position: relative;
  padding: var(--s-3) var(--s-3) var(--s-3) 0.875rem;
  border-radius: var(--r-md);
  background: var(--surface-card);
  box-shadow: inset 0 1px 0 rgba(200, 225, 255, 0.07), inset 0 0 0 1px var(--edge-card);
}

/* P0: the brightest object on the screen -- light, not alarm. */
.att-card[data-rank='urgent'] {
  background: linear-gradient(180deg, rgba(var(--light-blue-rgb), 0.17), rgba(var(--light-blue-rgb), 0.06));
  box-shadow:
    inset 0 1px 0 rgba(200, 225, 255, 0.22),
    inset 0 0 0 1px rgba(var(--light-blue-rgb), 0.5),
    0 0 30px -8px rgba(var(--light-blue-rgb), 0.45);
}

/* Information steps back: a quiet outline, no fill. */
.att-card[data-need='info'] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.att-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.att-level {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  font-weight: 600;
  color: var(--ink-2);
}

.att-level__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.75rem;
}

.att-level__bars i {
  width: 3px;
  border-radius: 2px;
  background: var(--hairline-strong);
}

.att-level__bars i:nth-child(1) { height: 5px; }
.att-level__bars i:nth-child(2) { height: 8px; }
.att-level__bars i:nth-child(3) { height: 11px; }

.att-level[data-rank='important'] .att-level__bars i:nth-child(-n + 2) {
  background: rgba(var(--light-blue-rgb), 0.6);
}

.att-level[data-rank='urgent'] {
  color: var(--ink-1);
}

.att-level[data-rank='urgent'] .att-level__bars i {
  background: var(--light-blue);
  box-shadow: 0 0 7px rgba(var(--light-blue-rgb), 0.85);
}

.att-level[data-rank='decision'] {
  color: var(--warn);
}

.att-level[data-rank='person'] {
  color: var(--light-cyan);
}

.att-card__project {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 500;
}

.att-card__when {
  flex: none;
  margin-left: auto;
}

.att-card__title {
  margin: 0.375rem 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-1);
  text-wrap: pretty;
}

.att-card[data-rank='urgent'] .att-card__title {
  font-size: var(--fs-lead);
  line-height: 1.32;
}

.att-card__from {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--s-2);
  margin-top: 3px;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.att-card__person {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.att-card__person .icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ink-3);
}

.att-card__person + .att-card__source::before {
  content: '·';
  margin-right: var(--s-2);
  color: var(--ink-3);
}

.att-card__source {
  color: var(--ink-3);
}

.att-card__open {
  display: none;
}

/* One action (an approval, a relay) sits on the reason line; three get their own row. */
.att-card__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-2);
}

.att-card__details > .att-card__why {
  flex: 1 1 12rem;
}

.att-card__details > .att-actions {
  flex: 1 1 100%;
}

.att-card__details > .att-actions:has(> :only-child) {
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: 0.5rem;
}

.att-card__why {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem var(--s-2);
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-2);
}

.att-card__reason {
  min-width: 0;
}

.att-need {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 1.375rem;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.att-need[data-act='true'] {
  color: var(--ink-1);
  background: rgba(200, 225, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

.att-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.att-action {
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0 0.6rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 500;
}

.att-action .icon {
  width: 1rem;
  height: 1rem;
}

.att-action:not(.att-action--primary) .icon {
  display: none;
}

.att-action--primary {
  background: var(--surface-2);
  color: var(--ink-1);
  box-shadow: inset 0 1px 0 var(--highlight-top), inset 0 0 0 1px var(--hairline-strong);
}

.att-action__short {
  display: none;
}

.att-toggle,
.att-more {
  width: 100%;
  justify-content: space-between;
  min-height: 2.5rem;
  margin-top: var(--s-2);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.att-toggle__chev {
  width: 1rem;
  height: 1rem;
  transform: rotate(90deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.att-toggle[aria-expanded='true'] .att-toggle__chev {
  transform: rotate(-90deg);
}

.att-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  text-align: left;
}

.att-more__go {
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.att-more .icon {
  width: 1rem;
  height: 1rem;
  color: var(--ink-3);
}

.att-calm {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.att-calm .icon {
  width: 1rem;
  height: 1rem;
}

/* --- Projekte & Fokus, Cannabis Radar --------------------------------------- */

.ctx-card {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface-section);
  box-shadow: inset 0 1px 0 var(--highlight-top), inset 0 0 0 1px var(--edge-section);
}

.ctx-card[hidden] {
  display: none;
}

.ctx-card__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.ctx-card__title .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ink-3);
}

.projects__focus {
  display: grid;
  gap: 2px;
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(var(--light-violet-rgb), 0.1), rgba(var(--light-violet-rgb), 0.04));
  box-shadow: inset 0 0 0 1px rgba(var(--light-violet-rgb), 0.2);
}

.projects__focus[hidden] {
  display: none;
}

.projects__focus-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-3);
}

.projects__focus-title {
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-1);
}

.projects__focus-meta {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.projects__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s-2);
}

.projects__list[hidden] {
  display: none;
}

.projects__more {
  padding: var(--s-1) 0.75rem 0;
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'head chev' 'facts chev' 'next chev';
  align-items: center;
  justify-items: start;
  gap: 1px var(--s-3);
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem var(--s-2) 0.5rem 0.75rem;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: none;
  text-align: left;
  font-weight: 400;
}

.project-row__head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--s-2);
}

.project-row__name {
  font-weight: 500;
  color: var(--ink-1);
}

.project-row__tier {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.project-row__facts {
  grid-area: facts;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.project-row__next {
  grid-area: next;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.project-row__chev {
  grid-area: chev;
  width: 1rem;
  height: 1rem;
  color: var(--ink-3);
}

.radar__line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s-2);
}

.radar__title {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-1);
}

.radar[data-state='quiet'] .radar__title {
  color: var(--ink-3);
}

.radar__meta {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

/* --- The Heute card: the day, nothing twice -------------------------------- */

/* The date, the data time and the refresh live in the day header; source health in the status menu. */
#daily-brief-date,
#daily-brief-refresh-btn,
.daily-brief-sources {
  display: none;
}

/* Open approvals are part of "Braucht Aufmerksamkeit" now. */
#app-shell[data-view='home'] #approval-strip {
  display: none;
}

/* --- Sidebar: history steps back, system on demand ---------------------------- */

#conversation-list:not([data-expanded='true']):not([data-filtered='true']) > li:nth-child(n + 7):not(.active) {
  display: none;
}

#conversation-list > li.is-filtered {
  display: none;
}

.history-more {
  align-self: flex-start;
  min-height: 2rem;
  margin: 2px var(--s-2) 0;
  padding: 0 var(--s-2);
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.history-more[hidden] {
  display: none;
}

.history-projects {
  flex: 0 0 auto;
}

.history-projects[hidden] {
  display: none;
}

.history-project-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-project {
  width: 100%;
  justify-content: flex-start;
  gap: var(--s-2);
  min-height: 2.25rem;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 400;
}

.history-project .icon {
  width: 1rem;
  height: 1rem;
  color: var(--ink-3);
}

.history-project__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-project__count {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.history-project[aria-pressed='true'] {
  background: var(--surface-2);
  color: var(--ink-1);
  box-shadow: inset 0 1px 0 var(--highlight-top);
}

.system-toggle {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
  text-align: left;
  gap: var(--s-2);
  margin-top: auto;
  padding: 0 var(--s-3);
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
  /* Quiet chrome at the foot of the narrow sidebar: the caption step keeps label and chevron on one line (D66). */
  font-size: var(--fs-caption);
  font-weight: 500;
}

.system-toggle .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.system-toggle .icon--chev {
  margin-left: auto;
  transform: rotate(90deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.system-toggle[aria-expanded='true'] .icon--chev {
  transform: rotate(-90deg);
}

.new-conversation-btn {
  white-space: nowrap;
}

/* A stored token is "eingerichtet", not proof of a working connection: no green light for it. */
.connection-row.status-configured .connection-badge::before {
  background: var(--ink-3);
  box-shadow: none;
}

/* The figure's halo is wider than a phone: it must never make the stage scrollable sideways (a focused
   control near the edge would otherwise scroll #stage horizontally). clip, not hidden: no scroll container. */
@media (max-width: 1099px) {
  #stage > .hero {
    overflow-x: clip;
  }
}

/* Below the desktop grid, Freigaben is one destination: only the approval cards. */
@media (max-width: 1099px) {
  #app-shell[data-view='approvals'] :is(#attention, #projects, #radar) {
    display: none;
  }
}

/* One column (phone + tablet): attention is a list of compact rows that open, so Ghost stays on the
   first screen; the desktop (variant B) shows the full cards in the right column. */
@media (max-width: 1099px) {
  /* Collapsed, the panel is one lead row; the group labels come with "Alle N anzeigen". */
  .attention[data-expanded='false'] .att-group__label {
    display: none;
  }

  .att-group {
    margin-top: var(--s-3);
  }

  /* A compact row that opens: why + actions only on request, so Ghost stays on the first screen. */
  .att-card {
    padding: var(--s-3) 2.75rem var(--s-3) var(--s-3);
  }

  .att-card__open {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    width: 2.75rem;
    height: 4.5rem;
    min-height: var(--touch);
    padding: 0;
    border-radius: 0 var(--r-md) 0 var(--r-md);
    background: transparent;
    box-shadow: none;
    color: var(--ink-3);
  }

  .att-card__open .icon {
    transform: rotate(90deg);
    transition: transform var(--dur-2) var(--ease-out);
  }

  .att-card[data-open='true'] .att-card__open .icon {
    transform: rotate(-90deg);
  }

  .att-card:not([data-open='true']) .att-card__details {
    display: none;
  }

  .att-card__details > .att-actions,
  .att-card__details > .att-actions:has(> :only-child) {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 0.625rem;
  }
}

/* --- Phone: <= 768px -- attention first, one column ---------------------------- */

@media (max-width: 768px) {
  body:has(#app-shell:not(.hidden)) header#topbar {
    display: none;
  }

  /* below the stage's top scroll-edge fade (style.css, 1.75rem), so the date is never dimmed */
  .day-header {
    padding-top: calc(1.75rem + var(--safe-top));
  }

  .day-header__date-long {
    display: none;
  }

  .day-header__date-short {
    display: inline;
  }

  .sys-status__chip {
    min-height: var(--touch);
  }

  /* The menu becomes a full-width card under the header (no horizontal overflow). */
  .sys-panel {
    position: fixed;
    top: calc(var(--safe-top) + 4.25rem);
    right: var(--s-3);
    left: var(--s-3);
    width: auto;
    max-height: calc(100dvh - var(--safe-top) - var(--nav-height) - 6rem);
  }

  .sys-row__connect {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
  }

  #app-shell:not([data-view='home']) .day-header {
    display: none;
  }

  #app-shell[data-view='home'] .rail {
    display: contents;
  }

  #app-shell[data-view='home'] #stage > .day-header {
    order: -4;
  }

  #app-shell[data-view='home'] :is(#connect-notice, #setup-home) {
    order: -3;
  }

  #app-shell[data-view='home'] #attention {
    order: -2;
    margin: var(--s-2) var(--s-4) 0;
  }

  #app-shell[data-view='home'] .hero {
    /* the brand logo row is gone on a signed-in phone (the day header leads), so the figure moves up */
    --hero-top: var(--s-3);
    --orb-size: min(50vw, 22dvh, 13rem);
    order: -1;
  }

  #app-shell[data-view='home'] .tool-buttons {
    order: 1;
  }

  #app-shell[data-view='home'] :is(#daily-brief, #projects, #radar) {
    margin: var(--s-3) var(--s-4) 0;
  }

  #app-shell[data-view='home'] #daily-brief { order: 2; }
  #app-shell[data-view='home'] #projects { order: 3; }
  #app-shell[data-view='home'] #radar { order: 4; }

  .attention {
    padding: var(--s-3);
  }

  .attention__headline {
    margin-top: var(--s-1);
    font-size: var(--fs-lead);
  }

  /* Two columns; the primary takes the first row when there are three actions. */
  .att-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .att-actions:has(> :nth-child(3)) .att-action--primary,
  .att-action:only-child {
    grid-column: 1 / -1;
  }

  .att-action {
    min-height: var(--touch);
    padding: 0 var(--s-3);
  }

  .att-action .icon {
    display: none;
  }

  .att-action__label {
    display: none;
  }

  .att-action__short {
    display: inline;
  }

  .sys-status__label,
  .day-header__text {
    display: none;
  }

  .sys-status__short,
  .day-header__short {
    display: inline;
  }

  .att-toggle,
  .att-more,
  .project-row {
    min-height: var(--touch);
  }

  /* The sheet: each history group keeps its heading. */
  .sheet-body :is(.history-recent, .history-projects, .external-chats) .side-heading {
    display: block;
  }

  .history-more,
  .history-project {
    min-height: var(--touch);
  }

  .system-toggle {
    display: none;
  }
}

/* --- Tablet: 769-1099px -- one centred column, attention first -------------------- */

@media (min-width: 769px) and (max-width: 1099px) {
  #stage > .day-header {
    max-width: 46rem;
    padding: var(--s-2) 0 var(--s-3);
    order: -4;
  }

  #app-shell:not([data-view='home']) .day-header {
    display: none;
  }

  #app-shell[data-view='home'] .rail {
    display: contents;
  }

  #app-shell[data-view='home'] :is(#connect-notice, #setup-home) {
    order: -3;
  }

  #app-shell[data-view='home'] #attention {
    order: -2;
    width: 100%;
    max-width: 46rem;
  }

  #app-shell[data-view='home'] .hero {
    /* attention above it: the figure gives a little room so the voice control stays on the first screen */
    --orb-size: min(34vw, 34dvh, 21rem);
    order: -1;
  }

  #app-shell[data-view='home'] :is(#daily-brief, #projects, #radar) {
    order: 3;
    width: 100%;
    max-width: 46rem;
    margin-top: var(--s-4);
  }
}

/* --- Sidebar on wider screens ------------------------------------------------- */

@media (min-width: 769px) {
  #sidebar {
    overflow-y: auto;
  }

  .history-recent {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #sidebar:not([data-system='open']) #status-panel {
    display: none;
  }

  #status-panel {
    margin-top: 0;
    padding-top: var(--s-2);
  }

  .day-header__date {
    font-size: 1.5rem;
  }
}

/* --- Desktop: >= 1100px -- variant B: attention leads the right column ------------- */

@media (min-width: 1100px) {
  :root {
    --sidebar-width: 14rem;
    --rail-width: 24rem;
    /* the day header's block on a wide screen (padding + date + data line) */
    --day-header-block: 5.25rem;
  }

  #app-shell #stage {
    grid-template-rows: auto 1fr auto auto auto 1fr;
  }

  #app-shell #stage > .day-header {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    max-width: none;
    min-height: var(--day-header-block);
    padding: var(--s-4) 0 var(--s-3);
  }

  .day-header__date {
    font-size: 1.75rem;
    letter-spacing: -0.016em;
  }

  .day-header__data {
    margin-top: 5px;
    font-size: var(--fs-small);
  }

  .day-header__refresh {
    width: 2.5rem;
    min-height: 2.5rem;
  }

  .sys-status__chip {
    min-height: 2.5rem;
  }

  #app-shell #stage > .hero { grid-row: 3; }
  #app-shell #stage > #composer { grid-row: 4; }
  #app-shell #stage > .tool-buttons { grid-row: 5; }

  .hero {
    --orb-size: min(26vw, 36dvh, 24rem);
  }

  #app-shell #stage > .rail {
    grid-row: 2 / -1;
    top: 0;
    min-height: 0;
    max-height: calc(100dvh - var(--day-header-block));
    padding: 0 2px var(--s-5);
    gap: var(--s-3);
  }

  /* Chat: header, band (live voice / work), messages, composer -- the rail keeps attention in view. */
  #app-shell[data-view='chat'] #stage {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding-top: 0;
  }

  #app-shell[data-view='chat'][data-stage='live'] #stage > .hero { grid-row: 2; }
  #app-shell[data-view='chat'] #stage > #chat-view { grid-row: 3; }
  #app-shell[data-view='chat'] #stage > #composer { grid-row: 4; }

  #app-shell[data-view='chat'] #stage > .rail {
    align-self: stretch;
    max-height: none;
  }

  /* Freigaben: the decisions take the centre; attention and the day stay on the right. */
  #app-shell[data-view='approvals'] #stage {
    grid-template-rows: auto auto auto 1fr;
  }

  #app-shell[data-view='approvals'] #approvals {
    grid-row: 2 / -1;
    margin-top: 0;
  }

  #app-shell[data-view='approvals'] #attention {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: stretch;
  }

  #app-shell[data-view='approvals'] #daily-brief {
    grid-row: 3;
    margin-top: var(--s-3);
  }

  #app-shell[data-view='approvals'] :is(#projects, #radar) {
    display: none;
  }
}

@media (min-width: 1280px) {
  :root {
    --rail-width: 28rem;
  }
}

/* A shorter desktop window keeps the composer in view: the figure gives way first. */
@media (min-width: 1100px) and (max-height: 940px) {
  .hero {
    --orb-size: min(24vw, 31dvh, 19rem);
  }
}

@media (min-width: 1600px) {
  :root {
    --sidebar-width: 15rem;
    --rail-width: 29rem;
  }

  .day-header__date {
    font-size: 2rem;
  }
}

@media (min-width: 2200px) {
  :root {
    --rail-width: 31rem;
  }

  .hero {
    --orb-size: min(22vw, 50dvh, 36rem);
  }
}

/* --- Pointer, motion ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .sys-status__chip:hover,
  .day-header__refresh:hover,
  .att-action:hover,
  .att-toggle:hover,
  .att-more:hover,
  .sys-panel__details:hover {
    background: var(--surface-2);
    color: var(--ink-1);
  }

  .att-action--primary:hover {
    background: var(--surface-3);
  }

  .project-row:hover,
  .history-project:hover,
  .history-more:hover,
  .system-toggle:hover {
    background: var(--surface-card-hover);
    color: var(--ink-1);
  }
}

@media (pointer: coarse) {
  .att-action,
  .sys-status__chip,
  .day-header__refresh {
    min-height: var(--touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sys-panel {
    animation: none;
  }

  .day-header__refresh[aria-busy='true'] .icon {
    animation: none;
  }
}