/*
 * Agent_UI layout. Tokens and component styles come from the kit; this file
 * only lays out the three columns and the surfaces the kit does not own.
 */

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--fs-bg);
  color: var(--fs-text);
  font-family: var(--fs-font);
  font-size: var(--fs-text-md);
}

/*
 * Readable by a screen reader, invisible on screen. It deliberately avoids
 * position: absolute: inside a scrolling column an absolutely positioned box
 * resolves against the page and stretches the document instead of staying put.
 */
.visually-hidden {
  display: inline-block;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--fs-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--fs-focus);
  outline-offset: 2px;
}

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Top bar */


/* Three columns */

.chat-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px;
  /* Without this the row grows past the viewport and the columns stop scrolling. */
  grid-template-rows: minmax(0, 1fr);
}

.chat-layout--rail-collapsed {
  grid-template-columns: 64px minmax(0, 1fr) 330px;
}

@media (max-width: 1100px) {
  .chat-layout,
  .chat-layout--rail-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: min-content;
    overflow-y: auto;
  }

  .rail__body,
  .stream__list {
    max-height: 320px;
  }
}

/* Left rail */

.rail {
  border-right: 1px solid var(--fs-border);
  background: var(--fs-surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-2);
  padding: var(--fs-space-3);
  border-bottom: 1px solid var(--fs-border);
}

.rail__title {
  margin: 0;
  font-size: var(--fs-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fs-text-muted);
}

.rail__toggle {
  font: inherit;
  font-size: var(--fs-text-xs);
  background: transparent;
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text-muted);
  padding: 3px 7px;
  cursor: pointer;
}

.rail__body {
  /* flex plus min-height 0 is what makes the column scroll instead of grow. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--fs-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-1);
}

.rail__note,
.rail__error {
  margin: var(--fs-space-2);
  font-size: var(--fs-text-sm);
  color: var(--fs-text-muted);
  line-height: 1.5;
}

.rail__error {
  color: var(--fs-danger);
}

.rail__group-head {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  width: 100%;
  padding: var(--fs-space-2);
  background: transparent;
  border: none;
  border-radius: var(--fs-radius-sm);
  font: inherit;
  font-weight: 600;
  color: var(--fs-text);
  cursor: pointer;
  text-align: left;
}

.rail__group-head:hover {
  background: var(--fs-surface-sunken);
}

.rail__group-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.rail__suite {
  margin: 0 0 var(--fs-space-1) 26px;
  font-size: var(--fs-text-xs);
  color: var(--fs-text-muted);
}

.rail__tools {
  list-style: none;
  margin: 0 0 var(--fs-space-2);
  padding: 0 0 0 var(--fs-space-2);
  border-left: 1px solid var(--fs-border);
  margin-left: 12px;
}

.rail__tool {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--fs-radius-sm);
  padding: 5px var(--fs-space-2);
  font: inherit;
  color: var(--fs-text-muted);
  cursor: pointer;
}

.rail__tool:hover {
  background: var(--fs-surface-sunken);
  color: var(--fs-text);
}

.rail__tool-name {
  display: block;
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-sm);
  color: var(--fs-text);
}

.rail__tool-desc {
  display: block;
  font-size: var(--fs-text-xs);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Centre thread */

.thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Transparent on purpose: the arc behind the app has to show through the
     one area that is mostly empty, otherwise the art may as well not exist. */
  background: transparent;
}

.thread__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--fs-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
}

.bubble {
  align-self: flex-end;
  max-width: min(560px, 85%);
  background: var(--fs-surface-sunken);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-lg);
  padding: var(--fs-space-2) var(--fs-space-3);
}

.bubble__who {
  display: block;
  font-size: var(--fs-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fs-text-muted);
  margin-bottom: 2px;
}

.bubble__text {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tile {
  max-width: 720px;
  width: 100%;
}

.tile__stack {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-2);
}

.tile__note {
  margin: 0;
  font-size: var(--fs-text-sm);
  color: var(--fs-text-muted);
}

.cascade {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--fs-space-2) var(--fs-space-3);
  border-left: 3px solid var(--fs-border-strong);
  background: var(--fs-surface);
  border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
}

.cascade__ran,
.cascade__held {
  margin: 0;
  font-size: var(--fs-text-sm);
  line-height: 1.5;
  color: var(--fs-text-muted);
  overflow-wrap: anywhere;
}

.cascade__held {
  color: var(--fs-text);
}

.reply__text {
  margin: 0;
  line-height: 1.55;
}

.reply__needs {
  margin: 0;
  line-height: 1.55;
  color: var(--fs-text-muted);
}

.reply__choices {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-2);
}

.reply__choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
}

.pending {
  margin: 0;
  color: var(--fs-text-muted);
  line-height: 1.55;
}

.pending__bar {
  height: 3px;
  border-radius: 2px;
  background: var(--fs-surface-sunken);
  overflow: hidden;
}

.pending__bar-fill {
  display: block;
  height: 100%;
  width: 35%;
  background: var(--fs-accent);
  animation: pending-slide 1.6s ease-in-out infinite;
}

@keyframes pending-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pending__bar-fill {
    animation: none;
    width: 100%;
    opacity: 0.4;
  }
}

.note-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.note-tools__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--fs-radius-sm);
  padding: 5px var(--fs-space-2);
  font: inherit;
  font-size: var(--fs-text-sm);
  color: var(--fs-text-muted);
  cursor: pointer;
}

.note-tools__item:hover {
  background: var(--fs-surface-sunken);
}

/* Composer */

.composer {
  flex: none;
  display: flex;
  gap: var(--fs-space-2);
  padding: var(--fs-space-3) var(--fs-space-4);
  border-top: 1px solid var(--fs-border);
  background: var(--fs-surface);
}

.composer__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-text-md);
  padding: 9px 12px;
  border-radius: var(--fs-radius-sm);
  border: 1px solid var(--fs-border-strong);
  background: var(--fs-bg);
  color: var(--fs-text);
}

.composer__context {
  margin: 0;
  padding: 0 var(--fs-space-4) var(--fs-space-2);
  font-size: var(--fs-text-xs);
  color: var(--fs-text-muted);
  background: var(--fs-surface);
}

/* Right stream */

.stream {
  border-left: 1px solid var(--fs-border);
  background: var(--fs-surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.stream__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fs-space-2) var(--fs-space-3);
  border-bottom: 1px solid var(--fs-border);
}

.stream__title {
  margin: 0;
  font-size: var(--fs-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fs-text-muted);
}

.stream__head-actions {
  display: flex;
  align-items: center;
  gap: var(--fs-space-1);
}

.stream__gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text-muted);
  cursor: pointer;
}

.stream__gear:hover {
  background: var(--fs-surface-sunken);
  color: var(--fs-text);
}

.stream__settings {
  border-bottom: 1px solid var(--fs-border);
  padding: var(--fs-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  max-height: 45%;
  overflow-y: auto;
  background: var(--fs-surface-sunken);
}

.stream__settings-note {
  margin: 0;
  font-size: var(--fs-text-xs);
  color: var(--fs-text-muted);
  line-height: 1.5;
}

.stream__pref {
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-sm);
  padding: var(--fs-space-2);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--fs-surface-raised);
}

.stream__pref-topic {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-xs);
  color: var(--fs-text);
  padding: 0 4px;
}

.stream__pref-opt {
  display: grid;
  grid-template-columns: auto 60px 1fr;
  align-items: center;
  gap: var(--fs-space-2);
  font-size: var(--fs-text-xs);
}

.stream__pref-name {
  color: var(--fs-text);
}

.stream__pref-help {
  color: var(--fs-text-muted);
}

.stream__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.stream__item {
  border-left: 3px solid transparent;
}

.stream__item--alert {
  border-left-color: var(--fs-warn);
  background: var(--fs-warn-bg);
}

.stream__item--child {
  background: var(--fs-surface-sunken);
}

.stream__note,
.stream__error,
.stream__foot {
  margin: 0;
  padding: var(--fs-space-3);
  font-size: var(--fs-text-sm);
  color: var(--fs-text-muted);
  line-height: 1.5;
}

.stream__error {
  color: var(--fs-danger);
}

.stream__foot {
  flex: none;
  border-top: 1px solid var(--fs-border);
  font-size: var(--fs-text-xs);
}

/* Full views */

.app-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--fs-bg);
}

.app-view__nav {
  display: flex;
  align-items: center;
  gap: var(--fs-space-3);
  padding: var(--fs-space-3) var(--fs-space-5);
  border-bottom: 1px solid var(--fs-border);
  background: var(--fs-surface);
}

.app-view__crumb {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-sm);
  color: var(--fs-text-muted);
  overflow-wrap: anywhere;
}

.app-view__body {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--fs-space-5) var(--fs-space-4) var(--fs-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-4);
}

.search-form {
  display: flex;
  align-items: flex-end;
  gap: var(--fs-space-3);
}

.search-form .fs-field {
  flex: 1;
}

/* Admin */

.admin__lede {
  margin: 0;
  color: var(--fs-text-muted);
  line-height: 1.55;
}

.admin__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-2);
}

.admin__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--fs-space-3);
  padding: var(--fs-space-3);
  border-radius: var(--fs-radius-sm);
  background: linear-gradient(150deg, var(--shift-2) 0%, var(--shift-1) 100%);
  flex-wrap: wrap;
}

.admin__item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin__item-title {
  font-weight: 600;
}

.admin__item-meta {
  font-size: var(--fs-text-sm);
  color: var(--fs-text-muted);
  overflow-wrap: anywhere;
}

.admin__item-actions {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
}

.admin__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fs-space-3);
  align-items: end;
  padding: var(--fs-space-3);
  border-radius: var(--fs-radius-sm);
  background: linear-gradient(150deg, var(--shift-1) 0%, transparent 80%);
}

.admin__probe-ok {
  background: var(--fs-ok-bg);
  color: var(--fs-ok);
}

.admin__matrix td,
.admin__matrix th {
  padding-right: var(--fs-space-4);
}

.admin__matrix-desc {
  font-size: var(--fs-text-xs);
  color: var(--fs-text-muted);
  margin-top: 3px;
  max-width: 420px;
  line-height: 1.4;
}

.admin__radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.admin__legend {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px var(--fs-space-3);
  font-size: var(--fs-text-sm);
}

.admin__legend > div {
  display: contents;
}

.admin__legend dt {
  color: var(--fs-text-muted);
}

.admin__legend dd {
  margin: 0;
}

/* The capability rail was removed from the chat: the nav already lists
   capabilities, and two lists of the same thing squeezed the one column that
   matters. Tools remain reachable by name and under Apps. */
.chat-layout { grid-template-columns: minmax(0, 1fr) 340px !important; }
.chat-layout--rail-collapsed { grid-template-columns: minmax(0, 1fr) 340px !important; }

/* The shell, nav, greeting, status bar and background art are all styled by
   prototype.css now. What remains below is specific to surfaces the prototype
   does not have: the tile thread, the event stream and the admin screens. */

/* ------------------------------------------------------------------
 * Additions the prototype has no equivalent for.
 *
 * The prototype's sidebar is a fixed list of screens. This one also shows the
 * capabilities the kernel actually registered, which is live data, so it
 * needs a few rules of its own. Everything here uses the prototype's tokens
 * so it cannot drift from the rest of the system.
 * ------------------------------------------------------------------ */

.wordmark { text-decoration: none; color: inherit; display: block; }

.nav-caps { min-height: 0; overflow-y: auto; margin-top: 22px; }
.nav-caps-title {
  margin: 0 0 8px;
  padding-left: 13px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav-caps-list { margin: 0; padding: 0; list-style: none; }
.nav-caps-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 13px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.nav-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.nav-count { margin-left: auto; color: var(--faint); font-size: 11px; }

/* The prototype builds suggestions as buttons in a row, not a list. Ours is a
   list for screen readers, so the markers have to go. */
.suggestions { list-style: none; padding: 0; }
.suggestions li { display: contents; }
.suggestion { border: 0; cursor: pointer; font-family: var(--mono); }
.suggestion:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.nav-item { text-decoration: none; }
.chat-empty h1 em { font-style: normal; }

/* The prototype's field is a textarea inside .chat-row; ours is an input, so
   it needs the same reset to sit flush in the pill. */
.chat-field {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13.5px;
  padding: 9px 0;
}
.chat-field::placeholder { color: var(--faint); }
.chat-context {
  max-width: 760px;
  margin: 6px auto 0;
  padding: 0 24px;
  font-size: 11px;
  color: var(--faint);
  text-align: center;
}

/* The prototype's .main is a single scrolling view. Ours holds a two column
   layout (thread plus event stream) that must fill it and scroll internally,
   so the height has to be handed down explicitly. */
.main > .chat-layout,
.main > .app-view { height: 100%; }

.chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: transparent;
}
.thread__scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* Push the theme control to the far end of the strip, as the prototype does
   with its own strip actions. */
.strip { justify-content: space-between; gap: 16px; }

/* ---- the event stream, as a drawer ---- */
.stream-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 48px;
  width: 360px;
  max-width: 92vw;
  z-index: 70;
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: -1px 0 0 var(--hairline), -18px 0 40px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.stream-drawer.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .stream-drawer { transition: none; } }
.stream-drawer .stream { height: 100%; min-height: 0; }

/* ---- strip ---- */
.strip-cap { color: var(--ink-soft); }
.strip-btn.is-on { background: var(--surface); color: var(--ink); }

/* The prototype tints each chip by position with
   `.suggestions .suggestion:nth-child(n)`. Our markup wraps each button in an
   li for screen readers, so the button is no longer an nth child. Re-point the
   same tints at the li. */
.suggestions li:nth-child(1) .suggestion { background: color-mix(in srgb, var(--blue) 9%, var(--mix)); color: var(--blue); }
.suggestions li:nth-child(2) .suggestion { background: color-mix(in srgb, var(--plum) 9%, var(--mix)); color: var(--plum); }
.suggestions li:nth-child(3) .suggestion { background: color-mix(in srgb, var(--gold) 11%, var(--mix)); color: var(--gold); }
.suggestions li:nth-child(4) .suggestion { background: color-mix(in srgb, var(--green) 9%, var(--mix)); color: var(--green); }

/* Each destination carries its own colour through its icon, as the prototype
   does with data-view. */
.nav-item[data-view="chat"] svg { color: var(--blue); }
.nav-item[data-view="search"] svg { color: var(--gold); }
.nav-item[data-view="apps"] svg { color: var(--green); }
.nav-item[data-view="settings"] svg { color: var(--plum); }
.nav-item[data-view="profile"] svg { color: var(--rust); }
.nav-item svg { flex: none; }

/* Apps expands in place, like the prototype's nav-sub. */
.nav-item .chev { margin-left: auto; transition: transform .2s ease; color: var(--faint); }
.nav-item.open .chev { transform: rotate(90deg); }
.nav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.nav-sub.open { max-height: 460px; overflow-y: auto; }
.nav-sub li a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 34px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 9px;
}
.nav-sub li a:hover { background: var(--shift-2); color: var(--ink); }
.nav-sub .nav-count { margin-left: auto; color: var(--faint); font-size: 11px; }

/* A circular send, as the prototype has, rather than a text button. */
.chat-send {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--shift-3);
  color: var(--ink-soft);
  cursor: pointer;
  flex: none;
}
.chat-send:not(:disabled):hover { background: color-mix(in srgb, var(--blue) 22%, var(--mix)); color: var(--blue); }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat-send:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The prototype centres the thread in a 760px column. Ours was full bleed,
   which is why tiles drifted left and lines ran long. */
.thread__scroll > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.thread__scroll { padding: 64px 24px 24px; }
.chat-empty { max-width: none; }

/* The roster is the whole product, grouped by suite, with what is not built
   shown as unavailable rather than hidden. Hiding it would misrepresent the
   stack; a dead link would be worse. */
.nav-sub { max-height: 0; }
/* When open, the accordion grows naturally and the NAV column (below) is
   the one scroll surface. An inner max-height here made a scrollbar inside
   a scrollbar, and together they pushed the page past 100vh. The large cap
   exists only so the height transition still animates. */
.nav-sub.open { max-height: 2400px; }
.nav-sub ul { margin: 0 0 6px; padding: 0; list-style: none; }
.nav-sub-suite {
  margin: 10px 0 4px;
  padding-left: 34px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav-sub-off {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 34px;
  font-size: 12.5px;
  color: var(--faint);
  cursor: not-allowed;
}
.nav-sub-off .nav-dot { opacity: .4; }
.nav-sub-off .nav-count { font-size: 10px; letter-spacing: .04em; }

/* On WorkForce the stream is part of the page, not the drawer, so it needs a
   height of its own rather than the drawer's. */
.wf-stream { min-height: 0; }
.wf-stream .stream {
  height: 62vh;
  min-height: 0;
  background: var(--plate);
  border-radius: var(--radius);
  overflow: hidden;
}
.app-view { height: 100%; overflow-y: auto; }

/* "not built" must never wrap onto two lines, and a long app name should
   ellipsise rather than push the label around. */
.nav-sub .nav-count { white-space: nowrap; flex: none; }
.nav-sub li a > span:nth-child(2),
.nav-sub-off > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-sub li a, .nav-sub-off { gap: 8px; }

/* ── Embedded suite apps (AppFrame) ────────────────────────────────────── */
/* The app fills the canvas the chat normally owns. The bar stays ours: it
   is the only sign the app is running inside FounderStack. */
.app-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app-frame__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  flex: 0 0 auto;
}
.app-frame__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}
.app-frame__status {
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-3, #8a8a90);
  border: 1px solid var(--line, #2a2a30);
  border-radius: 999px;
  padding: 2px 8px;
}
.app-frame__status.is-live {
  color: var(--ok, #63b07e);
  border-color: currentColor;
}
.app-frame__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.app-frame__actions button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.app-frame__actions a { color: inherit; }
.app-frame__frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line, #2a2a30);
  background: #fff;
}
.app-view__shell-link { margin-left: auto; font-size: 12px; }
main.main > .app-frame { height: 100%; }

/* Deep-integrated app sections: visually INSIDE the open app, not more
   apps. A rail in the app's own colour ties the group to its parent row,
   the container is tinted with the same colour, and the active section is
   a filled pill — three cues that this list belongs to Drive, not to the
   suite. */
.nav-app-sub {
  margin: 3px 8px 10px 20px;
  padding: 5px 6px 5px 10px;
  border-left: 2px solid var(--app-colour, var(--faint));
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--app-colour, var(--faint)) 7%, transparent);
}
.nav-app-sub ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.nav-app-sub a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav-app-sub a::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  flex: none;
  background: color-mix(in srgb, var(--app-colour, currentColor) 55%, transparent);
}
.nav-app-sub a:hover { background: var(--shift-2); color: var(--ink); }
.nav-app-sub a.active {
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--app-colour, var(--faint)) 18%, transparent);
}
.nav-app-sub a.active::before { background: var(--app-colour, currentColor); }


/* ── One viewport, always ─────────────────────────────────────────────── */
/* The shell is a fixed 100vh grid; nothing may push the page into a body
   scroll. The nav is the only tall column, so it scrolls internally while
   the wordmark and the user chip stay pinned. */
body { overflow: hidden; }
/* Grid items default to min-height auto, so a tall sidebar quietly stretched
   the 1fr row to its content (1966px on a 720px viewport) and the page
   scrolled. min-height 0 keeps the row at track size. */
.shell > .sidebar, .shell > .main, .shell > .stream-drawer { min-height: 0; }

/* ── Sidebar bands ────────────────────────────────────────────────────── */
/* Primary destinations and the user chip are pinned; the middle band is
   the one scroll surface, holding the two lists that grow without bound:
   chat sessions and the app roster. */
.nav-primary { display: flex; flex-direction: column; gap: 3px; flex: none; }
.nav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  margin-top: 4px;
}

/* Chat sessions */
.nav-chats { margin: 4px 0 10px; }
.nav-chats__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
}
.nav-chats__head .nav-sub-suite { margin-top: 6px; }
.nav-chats__new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 7px;
  padding: 3px 7px;
}
.nav-chats__new:hover { background: var(--shift-2); color: var(--ink); }
.nav-chats ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 1px; }
.nav-chats li {
  display: flex;
  align-items: center;
  border-radius: 8px;
  min-width: 0;
  max-width: 100%;
}
.nav-chats li a {
  flex: 1;
  min-width: 0;
  padding: 5px 8px 5px 34px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 8px;
}
.nav-chats li:hover { background: var(--shift-2); }
.nav-chats li.active { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.nav-chats li.active a { color: var(--ink); font-weight: 600; }
.nav-chats li button {
  flex: none;
  width: 22px; height: 22px;
  margin-right: 6px;
  border: 0;
  background: none;
  color: var(--faint);
  border-radius: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-chats li:hover button { display: inline-flex; }
.nav-chats li button:hover { color: var(--rust, #a8552e); background: var(--shift-2); }
.nav-chats__empty { padding: 5px 8px 5px 34px; font-size: 12px; color: var(--faint); }

/* ── Chat thread, in the demo's language ──────────────────────────────── */
.pending-line { margin: 2px 0 0; font-size: 12px; color: var(--faint); }
.trace-step__how {
  font-size: 10.5px;
  color: var(--faint);
  background: var(--shift-1);
  border-radius: 5px;
  padding: 1px 6px;
}
.msg-agent .reply__text { margin: 0 0 4px; }
/* Messages ride the same 760px spine as the tool tiles: the row takes the
   column, the user bubble right-aligns inside it, Blue speaks from its
   left edge. */
.msg-row { display: flex; width: 100%; }
.msg-row--user { justify-content: flex-end; }
.msg-row .msg-agent { max-width: 92%; }

/* Admin token gate */
.admin-token__hint { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.admin-token__row { display: flex; gap: 10px; align-items: center; max-width: 460px; }
.admin-token__row .fs-input { flex: 1; }

/* ── The door ─────────────────────────────────────────────────────────── */
.login {
  position: relative;
  z-index: 1;
  height: calc(100vh / var(--zoom, 1));
  display: grid;
  place-items: center;
  background: var(--veil);
}
.login__card {
  width: min(360px, calc(100vw - 48px));
  padding: 34px 32px 30px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 40px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
}
.login__lead { margin: 20px 0 14px; font-size: 13.5px; color: var(--muted); }
.login__field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.login__field span {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.login__field input {
  height: 40px;
  border: 1px solid var(--line, rgba(127,127,127,.25));
  border-radius: 10px;
  background: var(--shift-1);
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
}
.login__field input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.login__error { margin: 2px 0 10px; font-size: 12.5px; color: var(--rust, #a8552e); }
.login__card button[type="submit"] {
  height: 40px;
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  cursor: pointer;
}
.login__card button[type="submit"]:disabled { opacity: .5; cursor: default; }

.user-chip__out {
  margin-left: auto;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.user-chip__out:hover { color: var(--rust, #a8552e); background: var(--shift-2); }

.admin__note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.admin__form-actions { display: flex; gap: 10px; align-items: center; }

/* Org tree + usage panels */
.org-tree { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 4px; }
.org-tree li { display: flex; align-items: center; gap: 10px; }
.org-tree__name { font-weight: 600; min-width: 90px; }
.org-tree__email { color: var(--muted); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.org-tree__select { font: inherit; font-size: 12px; background: var(--shift-1); color: inherit; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 7px; padding: 3px 6px; }
.org-usage { margin: 12px 0; }
.org-usage__head { display: flex; align-items: baseline; gap: 10px; }
.org-usage__head span { color: var(--muted); font-size: 12px; }
.org-usage__totals { margin-left: auto; }
.org-usage ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; display: grid; gap: 3px; }
.org-usage li { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.org-usage__model { color: var(--muted); }
.org-usage__nums { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Settings: tabs, in the shell's own language ──────────────────────── */
.settings { max-width: 980px; margin: 0 auto; width: 100%; }
.settings-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  margin: 2px 0 18px;
  border-radius: 13px;
  background: var(--shift-1);
}
.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.settings-tab:hover { background: var(--shift-2); }
.settings-tab.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

/* Blue is blue. The name tag wears the agent's own colour instead of gold. */
.msg-agent .agent-tag { color: var(--blue); }

/* ── Scrollbars that belong to the theme ──────────────────────────────── */
/* The default track read as a bright foreign stripe on the dark canvas.
   Thin, trackless, thumb from the surface tokens, visible on hover. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink-soft) 28%, transparent) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-soft) 22%, transparent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink-soft) 40%, transparent);
  background-clip: content-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ── Thread tiles in the same glass as the user's bubbles ─────────────── */
/* The theme's material is translucency over the background art (--surface
   + backdrop blur); tiles were the one opaque thing in the thread. Same
   pane, capability accent tinting through it, and the mirrored asymmetric
   corner so agent-side panes answer the user's. */
.thread__scroll .fs-panel {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--fs-panel-accent, var(--fs-cap-default)) 13%, var(--surface)) 0%,
    var(--surface) 55%
  );
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-radius: 5px 18px 18px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
    0 0 0 0.5px color-mix(in srgb, var(--fs-panel-accent, var(--fs-cap-default)) 12%, transparent);
}
.thread__scroll .fs-panel .fs-panel {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 12px;
  box-shadow: none;
}

.reply__list { margin: 4px 0; padding-left: 20px; }
.reply__list li { margin: 2px 0; }
.msg-agent a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* Composer attachments */
.chat-attach-btn { background: none; }
.chat-attach { display: flex; gap: 10px; padding: 8px 0 4px; flex-wrap: wrap; }
.chat-attach .thumb { position: relative; display: inline-flex; align-items: center; }
.chat-attach img { height: 52px; border-radius: 10px; display: block; }
.chat-attach__name {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--shift-2);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attach .thumb button {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px;
  border: 0; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.chat-attach .thumb button svg { width: 8px; height: 8px; }
.msg-user img { max-width: 220px; border-radius: 12px; display: block; margin-bottom: 8px; }
.msg-user__file {
  display: inline-block;
  font-size: 12px;
  padding: 3px 8px;
  margin: 0 6px 6px 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}

/* Critical APIs: their own room, with a warning on the door. */
.admin__critical {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border-radius: var(--fs-radius);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--rust, #a8552e) 10%, var(--fs-surface-raised)) 0%,
    var(--fs-surface-raised) 55%);
}
.admin__critical-title {
  margin: 0 0 6px;
  font-size: var(--fs-text-md);
  font-weight: 600;
  color: var(--rust, #a8552e);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin__critical-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.admin__critical-list li { display: flex; align-items: center; gap: 16px; }
.admin__critical-main { flex: 1; min-width: 0; }
.admin__critical-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Write policy, one section per app: a founder asks "what may the agent do
   in Mail?", not "show me every write tool in the stack". */
.admin__app-group { margin: 0 0 22px; }
.admin__app-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: var(--fs-text-md);
  font-weight: 600;
  color: var(--fs-text);
}
.admin__app-count {
  margin-left: auto;
  font-size: var(--fs-text-xs);
  font-weight: 400;
  color: var(--fs-text-muted);
}
.admin__app-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-text-xs);
  color: var(--fs-text-muted);
}
.admin__critical-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--shift-2);
  color: var(--muted);
}
.admin__critical-knob {
  width: 26px; height: 16px;
  border-radius: 999px;
  background: var(--faint);
  position: relative;
  transition: background .15s ease;
}
.admin__critical-knob::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  transition: transform .15s ease;
}
.admin__critical-switch.on { background: color-mix(in srgb, var(--rust, #a8552e) 14%, transparent); color: var(--rust, #a8552e); }
.admin__critical-switch.on .admin__critical-knob { background: var(--rust, #a8552e); }
.admin__critical-switch.on .admin__critical-knob::after { transform: translateX(10px); }

/* ── Command palette (⌘K / Ctrl+K) ─────────────────────────────────────
   The app roster left the sidebar and lives here, where looking for
   something is the point rather than a toll on every navigation. */
.palette {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  background: color-mix(in srgb, var(--fs-bg) 55%, transparent);
  backdrop-filter: blur(3px);
}
.palette__box {
  width: min(560px, 92vw);
  border-radius: var(--fs-radius-lg);
  border: 1px solid var(--fs-border);
  background: var(--fs-surface);
  box-shadow: 0 24px 64px rgb(0 0 0 / 38%);
  overflow: hidden;
}
.palette__input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--fs-border);
  background: transparent;
  color: var(--fs-text);
  font: inherit;
  font-size: var(--fs-text-lg);
  padding: var(--fs-space-3) var(--fs-space-4);
  outline: none;
}
.palette__list { list-style: none; margin: 0; padding: var(--fs-space-1); max-height: 46vh; overflow-y: auto; }
.palette__row {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  width: 100%;
  padding: 9px var(--fs-space-3);
  border: none;
  border-radius: var(--fs-radius-sm);
  background: transparent;
  color: var(--fs-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.palette__row.is-cursor { background: var(--fs-surface-sunken); }
.palette__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fs-text-muted); }
.palette__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__status { font-size: var(--fs-text-xs); color: var(--fs-text-muted); flex: none; }
.palette__status.is-planned { opacity: 0.6; }
.palette__status.is-shell { color: var(--fs-warning, #c47b2c); }
.palette__empty { padding: var(--fs-space-3); color: var(--fs-text-muted); font-size: var(--fs-text-sm); }
.palette__feet {
  margin: 0;
  padding: 7px var(--fs-space-3);
  border-top: 1px solid var(--fs-border);
  font-size: var(--fs-text-xs);
  color: var(--fs-text-muted);
}
.palette__feet kbd, .wheel__feet kbd {
  font-family: var(--fs-font-mono);
  font-size: 10px;
  border: 1px solid var(--fs-border);
  border-radius: 4px;
  padding: 1px 4px;
  margin: 0 2px;
}
.nav-kbd {
  margin-left: auto;
  font-family: var(--fs-font-mono);
  font-size: 10px;
  color: var(--fs-text-muted);
  border: 1px solid var(--fs-border);
  border-radius: 4px;
  padding: 1px 4px;
}

/* ── Hold-Tab wheel ────────────────────────────────────────────────────
   A disc with sectors cut into it: outer rim, a hole in the middle naming
   what is selected. Whatever you switch between here — an app's own tabs,
   your chat threads, or the apps you use when the app has no tabs.

   Quiet on purpose. The first pass shouted: bold labels at full white, a
   saturated wedge, a stroke around every sector. Three things all saying
   "look here" is the same as none of them saying it. Now the ring is flat,
   the gaps do the separating, and the only emphasis is on the one sector
   you are actually pointing at. */
.wheel {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-3);
  background: color-mix(in srgb, var(--fs-bg) 78%, transparent);
  backdrop-filter: blur(5px);
  animation: wheel-in 120ms ease-out;
}
@keyframes wheel-in { from { opacity: 0; transform: scale(0.98); } }

.wheel__disc {
  /* The kit sizes every bare svg as an icon (18px); this one is furniture. */
  width: 336px;
  height: 336px;
  max-width: 92vw;
  cursor: pointer;
  filter: drop-shadow(0 14px 34px rgb(0 0 0 / 26%));
}

.wheel__sector path {
  /* surface is near-black and translucent in dark, so the disc dissolved
     into the scrim. raised is the elevation token: glass in both themes. */
  fill: var(--fs-surface-raised);
  stroke: none;
  transition: fill 120ms ease;
}
.wheel__sector text {
  fill: var(--fs-text-muted);
  font-family: var(--fs-font);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  pointer-events: none;
  transition: fill 120ms ease;
}
.wheel__sector.is-pick path {
  fill: color-mix(in srgb, var(--fs-accent) 16%, var(--fs-surface-raised));
  stroke: var(--fs-accent);
  stroke-width: 1;
  stroke-opacity: 0.6;
}
/* Weight is the wrong lever for one item among eight: it changes the
   shape of the word. Brightness picks it out without moving anything. */
.wheel__sector.is-pick text { fill: var(--fs-text); }

.wheel__rim {
  fill: none;
  stroke: var(--fs-border-strong);
  stroke-width: 1;
  pointer-events: none;
}

.wheel__hub-title {
  fill: var(--fs-text-muted);
  font-family: var(--fs-font);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  opacity: 0.8;
}
.wheel__hub-pick {
  fill: var(--fs-text);
  font-family: var(--fs-font);
  font-size: 13.5px;
  font-weight: 500;
}
.wheel__feet {
  margin: 0;
  font-size: var(--fs-text-xs);
  color: var(--fs-text-muted);
  opacity: 0.75;
}
.wheel__feet kbd {
  font-family: var(--fs-font-mono);
  font-size: 10px;
  border: 1px solid var(--fs-border);
  border-radius: 4px;
  padding: 1px 4px;
  margin: 0 2px;
}

/* An answer still being written. The caret sits after the last character of
   the last paragraph, so the text reads as in progress without the layout
   shifting when it finishes. */
.reply--writing > :last-child::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--fs-accent, currentColor);
  opacity: 0.7;
  animation: fs-caret 1s steps(1) infinite;
}

@keyframes fs-caret {
  0%, 50% { opacity: 0.7; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reply--writing > :last-child::after { animation: none; }
}

/* ═══ Layout ═══════════════════════════════════════════════════════════
   The main column holds the open route and nothing else: there is no bar
   above it any more, so an app fills it edge to edge. */
.main {
  display: flex;
  flex-direction: column;
}
main.main > .chat-layout,
main.main > .app-view,
main.main > .app-frame {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* ─── The launcher: the whole stack, seen at once ─────────────────────── */
.launcher {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px 6vh;
  background: rgba(10, 10, 11, 0.42);
  backdrop-filter: blur(3px);
}

.launcher__panel {
  width: min(920px, 100%);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--fs-bg);
  border: 1px solid var(--fs-border-strong);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 10, 11, 0.28);
  overflow: hidden;
}
.launcher__panel:focus { outline: none; }

.launcher__head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--fs-border);
}
.launcher__head h2 {
  margin: 0;
  font-family: var(--fs-font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fs-text);
}
.launcher__head p {
  margin: 4px 0 0;
  font-size: var(--fs-text-sm);
  color: var(--fs-text-faint);
}
.launcher__head kbd {
  font: inherit;
  font-size: 10.5px;
  border: 1px solid var(--fs-border-strong);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 0 1px;
  color: var(--fs-text-muted);
}

.launcher__scroll {
  overflow-y: auto;
  padding: 6px 22px 22px;
}
.launcher__suite h3 {
  margin: 18px 0 10px;
  font-size: var(--fs-text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-text-faint);
}
.launcher__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 8px;
}

.launch-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  text-align: left;
  border: 1px solid var(--fs-border);
  border-radius: 10px;
  background: var(--fs-surface-raised);
  font: inherit;
  color: var(--fs-text);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, transform 0.14s;
}
.launch-tile:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--tile-colour) 55%, var(--fs-border));
  background: color-mix(in srgb, var(--tile-colour) 6%, var(--fs-surface-raised));
  transform: translateY(-1px);
}
.launch-tile:disabled {
  cursor: default;
  opacity: 0.5;
}

.launch-tile__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--tile-colour);
  background: color-mix(in srgb, var(--tile-colour) 13%, transparent);
}
.app-icon__mono {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.launch-tile__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.launch-tile__name {
  font-size: var(--fs-text-md);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.launch-tile__use {
  font-size: var(--fs-text-xs);
  color: var(--fs-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.launch-tile__status {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-text-faint);
}

@media (prefers-reduced-motion: reduce) {
  .launch-tile { transition: none; }
  .launch-tile:hover:not(:disabled) { transform: none; }
}

/* ═══ The app sits in the shell like a card, not a pane ═════════════════
   A hard rule across the top made the frame read as a seam between two
   products. The app is a rounded surface with the shell's ground showing
   around it instead. */
.app-frame {
  padding: 0 14px 14px;
}
.app-frame__frame {
  border-top: 0;
  border-radius: var(--fs-radius, 18px);
  background: transparent;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.06);
}
:root[data-theme="dark"] .app-frame__frame,
html.dark .app-frame__frame {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* ═══ The rail steps back while an app is open ══════════════════════════
   An embedded app is the whole reason the window is open, and it brings
   its own navigation. The rail keeps its icons so you can still leave,
   and takes back its width the moment you do. Chat, WorkForce, Search and
   Settings are the shell's own screens, so the rail stays open on those. */
.shell.is-app {
  grid-template-columns: 62px 1fr;
}
.shell.is-app .sidebar {
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
}
.shell.is-app .wordmark-sub,
.shell.is-app .nav-item span,
.shell.is-app .nav-kbd,
.shell.is-app .nav-scroll,
.shell.is-app .user-chip-meta {
  display: none;
}
.shell.is-app .nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.shell.is-app .user-chip {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}
.shell.is-app .user-chip__out { display: none; }
.shell {
  transition: grid-template-columns 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .shell { transition: none; }
}


/* The app is a card on the shell's ground, and the ground has drawings on
   it. Letting them through is the point: the frame stops being a window
   onto somewhere else and becomes a surface in this room. */
.app-frame__frame { background: transparent; }

/* ═══ The rail ═════════════════════════════════════════════════════════
   Everything the shell offers is here now: the mark, where you can go, the
   open app and what you can do to it. There is no bar above the content,
   so an app gets the whole column. */
.rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 22px 13px;
}

.rail-head .wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-decoration: none;
  padding: 0;
}
/* The name has to give way before it reaches the width control. */
.rail-head .wordmark-name {
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wordmark-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--fs-text);
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--fs-accent) 16%, var(--fs-surface-raised)) 0%,
    var(--fs-surface-raised) 70%
  );
  border: 1px solid var(--fs-border);
}
.wordmark-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rail-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--fs-text-faint);
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}
.rail-toggle:hover {
  color: var(--fs-text);
  border-color: var(--fs-border);
}

/* The open app: a rule in its colour, its name, and the two things you can
   do to it. It used to be a bordered card, which at 62px read as a stray
   control floating in the rail rather than part of it. */
.rail-app {
  margin: 14px 12px 4px;
  padding: 12px 0 0;
  border-top: 1px solid var(--fs-border);
}
.rail-app__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 9px;
  border-left: 2px solid var(--app-colour, var(--fs-accent));
  margin-bottom: 9px;
}
.rail-app__label {
  font-size: var(--fs-text-md);
  font-weight: 600;
  color: var(--fs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-app__status {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fs-text-faint);
}
.rail-app__status.is-live { color: var(--fs-ok); }
.rail-app__acts {
  display: flex;
  gap: 6px;
}
.rail-app__acts button,
.rail-app__acts a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--fs-border);
  border-radius: 9px;
  background: var(--fs-surface-raised);
  color: var(--fs-text-faint);
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}
.rail-app__acts button:hover,
.rail-app__acts a:hover {
  color: var(--fs-text);
  border-color: var(--fs-border-strong);
}

/* ─── Narrow ─────────────────────────────────────────────────────────
   At 62px every row is a centred square and nothing carries a label. */
.shell.is-app .rail-head {
  padding: 0 0 18px;
  justify-content: center;
}
.shell.is-app .wordmark { justify-content: center; flex: 0 0 auto; }
.shell.is-app .wordmark-text,
.shell.is-app .rail-app__head { display: none; }
/* The control that widens the rail cannot be one of the things the narrow
   rail hides, or narrow is a one-way door. It stacks under the mark. */
.shell.is-app .rail-head {
  flex-direction: column;
  gap: 10px;
}
.shell.is-app .rail-toggle { margin: 0; }
.shell.is-app .rail-app {
  margin: 12px 12px 4px;
  padding-top: 12px;
}
.shell.is-app .rail-app__acts {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ═══ Say what an icon is, the moment it is pointed at ══════════════════
   The browser's own tooltip arrives about a second late, which is no use
   for a rail that is nothing but icons. This one is instant, sits clear of
   the rail, and never intercepts the pointer. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--fs-border);
  background: var(--fs-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  color: var(--fs-text);
  font-family: var(--fs-font);
  font-size: var(--fs-text-sm);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; }

/* Wide, the rows already carry their labels; only the icon-only controls
   still need telling. */
.shell:not(.is-app) .nav-item[data-tip]::after { content: none; }

/* A tooltip has to be able to leave the rail. */
.sidebar { overflow: visible; }
.shell.is-app .sidebar { overflow: visible; }
.nav-scroll { overflow-x: visible; }

/* ═══ The app is not welded to the top of the window ════════════════════ */
.app-frame { padding: 14px; }

/* The rail draws above the open app, or its tooltips appear behind the
   iframe — which is where they were, and an invisible tooltip is worse
   than none because it looks like the hover did nothing. */
.sidebar {
  position: relative;
  z-index: 50;
}

/* ═══ The guest door ═══════════════════════════════════════════════════ */
.guest { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.guest__card {
  width: min(420px, 100%); padding: 28px 28px 24px; border-radius: var(--fs-radius-lg, 24px);
  background: var(--fs-surface-raised); box-shadow: 0 18px 48px rgba(0,0,0,0.12);
}
.guest__brand { margin: 0 0 18px; font-size: var(--fs-text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fs-text-faint); }
.guest__card h1 { margin: 0 0 6px; font-family: var(--fs-font-display); font-size: 26px; font-weight: 500; color: var(--fs-text); }
.guest__hint { margin: 0 0 18px; font-size: var(--fs-text-sm); color: var(--fs-text-muted); }
.guest__label { display: block; font-size: var(--fs-text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fs-text-faint); margin-bottom: 6px; }
.guest__input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 0; border-radius: 10px; background: var(--fs-surface-sunken); color: var(--fs-text); font: inherit; font-size: var(--fs-text-md); margin-bottom: 14px; }
.guest__btn { width: 100%; padding: 11px 14px; border: 0; border-radius: 10px; background: var(--fs-accent); color: var(--fs-accent-text); font: inherit; font-size: var(--fs-text-md); cursor: pointer; }
.guest__btn:disabled { opacity: .55; cursor: default; }
.guest-frame { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; background: transparent; }
/* The visible viewport on a phone, not the one behind the browser bar. */
@supports (height: 100dvh) { .guest { min-height: 100dvh; } .guest-frame { height: 100dvh; } }


/* ---- open apps: kept mounted, one on stage, a call in the corner ---- */
.main { position: relative; }
.app-frame--slot { flex: 1 1 auto; min-height: 0; }
.app-host { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; pointer-events: auto; }
.app-host.is-hidden { display: none; }
.app-host.is-active { z-index: 1; }
.app-host .app-host__frame { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; }
.app-host.is-mini {
  position: fixed;
  inset: auto 16px 62px auto;
  width: min(380px, calc(100vw - 32px));
  height: 250px;
  padding: 0;
  z-index: 200;
  isolation: isolate;
  border-radius: 16px;
  overflow: hidden;
  background: var(--fs-surface-raised, #16171a);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.app-host__minibar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px;
  font-size: 12px;
  color: var(--ink, #eee);
  background: var(--fs-surface-raised, #16171a);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.app-host.is-dragging .app-host__minibar { cursor: grabbing; }
/* A frame eats pointer events, which would end a drag the moment the
   pointer crossed it. Not while carrying the tile. */
.app-host.is-dragging .app-host__frame { pointer-events: none; }
/* Folded: the bar alone. The frame stays mounted, so the call carries on. */
.app-host.is-folded { height: auto; }
.app-host.is-folded .app-host__frame { height: 0; flex: 0 0 0; }
.app-host__minititle { flex: 1; font-weight: 600; }
.app-host__minibtn {
  border: 0; border-radius: 8px; padding: 4px 8px; font-size: 11px; cursor: pointer;
  background: color-mix(in srgb, var(--ink, #fff) 10%, transparent); color: inherit;
}
.app-host__minibtn:hover { background: color-mix(in srgb, var(--ink, #fff) 18%, transparent); }
.app-host.is-mini .app-host__frame { border-radius: 0; box-shadow: none; }

.app-tabs { display: flex; align-items: center; gap: 6px; margin-right: 10px; }
.app-tab { display: inline-flex; align-items: center; border-radius: 10px; background: color-mix(in srgb, var(--ink, #fff) 6%, transparent); }
.app-tab.is-active { background: color-mix(in srgb, var(--tab-colour, var(--ink, #fff)) 16%, transparent); }
.app-tab__go { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; padding: 4px 6px 4px 8px; cursor: pointer; border-radius: 10px; }
.app-tab__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tab-colour, currentColor); }
.app-tab__live { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ok, #63b07e); }
.app-tab__x { border: 0; background: none; color: inherit; opacity: 0.55; cursor: pointer; padding: 2px 8px 2px 2px; font-size: 14px; line-height: 1; }
.app-tab__x:hover { opacity: 1; }

/* ---- what apps off stage have said ---- */
.app-tab__unread { margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; background: var(--fs-app-accent, #e8734a); color: #fff; }
.app-toasts { position: fixed; right: 16px; top: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.app-toast { display: flex; align-items: stretch; border-radius: 14px; background: var(--fs-surface-raised, #16171a); color: var(--ink, #eee); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); border: 1px solid color-mix(in srgb, var(--ink, #fff) 10%, transparent); overflow: hidden; }
.app-toast.is-call { border-color: #10b981; }
.app-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; }
.app-toast__title { font-weight: 700; font-size: 13px; }
.app-toast__text { font-size: 12px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-toast__x { border: 0; background: none; color: inherit; opacity: 0.6; padding: 0 12px; font-size: 18px; cursor: pointer; }
.app-toast__x:hover { opacity: 1; }

/* ---- a call inside an app, on the strip, breathing ---- */
/* The motion lives inside the pill: colour, border and the icon itself,
   so no clipping and no dark strip can hide it. */
@keyframes app-call-breathe {
  0%, 100% { background-color: #065f46; border-color: rgba(110, 231, 183, 0.35); }
  50% { background-color: #10b981; border-color: #ffffff; }
}
@keyframes app-call-icon { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.35); opacity: 1; } }
.app-tab__call { display: inline-flex; align-items: center; gap: 7px; margin-right: 8px; padding: 3px 11px; border-radius: 999px; border: 2px solid rgba(110, 231, 183, 0.35); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: #065f46; animation: app-call-breathe 1.4s ease-in-out infinite; }
.app-tab__call-icon { display: inline-block; color: #fff; font-size: 13px; animation: app-call-icon 1.4s ease-in-out infinite; }
.app-tab__call.is-min { animation-duration: 1s; }
.app-tab__call.is-min .app-tab__call-icon { animation-duration: 1s; }
@media (prefers-reduced-motion: reduce) { .app-tab__call, .app-tab__call-icon { animation-duration: 3s; } }
/* toasts: bottom left, beside the rail's last icon and above the strip,
   clear of every app's header and of the rail itself */
.app-toasts { top: auto; right: auto; left: 76px; bottom: 62px; }

/* ── Settings, Developer ────────────────────────────────────────────────
   The key screen. The secret gets the loudest plate on the page because
   it is shown once and a person has to see it, copy it, and understand
   that it will not come back. */

.fs-alert--warn {
  background: var(--fs-warn-bg);
  color: var(--fs-warn);
}

.fs-hint {
  margin: var(--fs-space-2) 0 0;
  font-size: var(--fs-text-sm);
  color: var(--fs-text-muted);
  max-width: 68ch;
}

.apikey-secret {
  margin: var(--fs-space-3) 0 0;
  padding: var(--fs-space-3) var(--fs-space-4);
  border: 1px solid var(--fs-border-strong);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface-sunken);
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-md);
  /* A key is one long line with no spaces. It must be selectable whole and
     must not be broken by a wrap that a person then copies wrongly. */
  overflow-x: auto;
  white-space: pre;
}

.apikey-actions {
  display: flex;
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-3);
  flex-wrap: wrap;
}

.apikey-fieldset {
  margin: var(--fs-space-3) 0 0;
  padding: var(--fs-space-3);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-sm);
}

.apikey-fieldset legend {
  padding: 0 var(--fs-space-2);
  font-size: var(--fs-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fs-text-faint);
}

.apikey-check {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-2);
  font-size: var(--fs-text-sm);
  line-height: 1.5;
}

.apikey-check input { margin-top: 3px; flex: none; }
.apikey-check small { display: block; color: var(--fs-text-faint); }

.apikey-caps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--fs-space-1) var(--fs-space-4);
  margin-top: var(--fs-space-2);
}

.apikey-expiry {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  margin: var(--fs-space-3) 0;
  font-size: var(--fs-text-sm);
}

.apikey-expiry select {
  font: inherit;
  font-size: var(--fs-text-sm);
  padding: 4px 8px;
  border-radius: var(--fs-radius-sm);
  border: 1px solid var(--fs-border);
  background: var(--fs-bg);
  color: var(--fs-text);
}

/* The strip's link out to the API documentation. */
.strip-btn--docs {
  font-size: var(--fs-text-xs);
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0 8px;
}

/* ═══ Sections hang from the top of the frame, like a browser's tabs ═══
   A browser's tab flares into the bar above it and stands on the page
   below. Ours does the same upside down: it flares into the top edge of
   the app area with a fillet on each side, and its bottom corners are
   rounded where it hangs free. The open tab is a solid surface in the
   app's colour with a lit lip along the edge it hangs from; the others
   are only their names until hovered, with a hairline between them. */
.app-host .app-sections {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: -14px 14px 8px;
  padding: 0 12px;
  flex: 0 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--fs-font);
}
.app-host .app-sections::-webkit-scrollbar { display: none; }
.app-section {
  position: relative;
  appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  height: 36px;
  padding: 0 18px 2px;
  border-radius: 0 0 14px 14px;
  color: color-mix(in srgb, var(--ink, #fff) 58%, transparent);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, background-color 0.12s ease, height 0.12s ease;
}
/* A hairline between two quiet tabs, hidden next to the lit one. */
.app-section + .app-section:not(.is-active)::after {
  content: "";
  position: absolute;
  left: -0.5px; top: 10px; bottom: 12px;
  width: 1px;
  background: color-mix(in srgb, var(--ink, #fff) 14%, transparent);
}
.app-section.is-active + .app-section::after { display: none; }
.app-section:hover {
  color: var(--ink, #fff);
  background: color-mix(in srgb, var(--ink, #fff) 7%, transparent);
}
.app-section.is-active {
  height: 38px;
  padding-bottom: 4px;
  color: var(--ink, #fff);
  background-color: color-mix(in srgb, var(--tab-colour, var(--ink, #fff)) 24%, var(--fs-surface-raised, #16171a));
  /* A slow band of the app's colour drifts across the open tab, the way
     light moves over glass. Never loud: the band is only a little brighter
     than the tab, and it crosses once every few seconds. */
  background-image: linear-gradient(105deg,
    transparent 30%,
    color-mix(in srgb, var(--tab-colour, var(--ink, #fff)) 34%, transparent) 50%,
    transparent 70%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: app-section-sheen 5.5s cubic-bezier(0.45, 0, 0.35, 1) infinite;
  box-shadow: inset 0 2px 0 var(--tab-colour, currentColor), 0 8px 20px -10px color-mix(in srgb, var(--tab-colour, #000) 70%, transparent);
  z-index: 1;
}
@keyframes app-section-sheen {
  0%   { background-position: 140% 0; }
  60%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app-section.is-active { animation: none; background-image: none; }
}
/* The fillets: two small squares outside the tab's top corners, each with
   a quarter circle cut out, so the tab appears to grow out of the edge. */
.app-section.is-active::before {
  content: "";
  position: absolute;
  top: 0; left: -14px;
  width: 14px; height: 14px;
  background: radial-gradient(circle at 0 100%, transparent 13.5px,
    color-mix(in srgb, var(--tab-colour, var(--ink, #fff)) 24%, var(--fs-surface-raised, #16171a)) 14px);
  pointer-events: none;
}
.app-section.is-active > .app-section__fillet {
  position: absolute;
  top: 0; right: -14px;
  width: 14px; height: 14px;
  background: radial-gradient(circle at 100% 100%, transparent 13.5px,
    color-mix(in srgb, var(--tab-colour, var(--ink, #fff)) 24%, var(--fs-surface-raised, #16171a)) 14px);
  pointer-events: none;
}
.app-section:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tab-colour, #fff) 70%, transparent);
  outline-offset: -3px;
}

/* ═══ Settings: the organisation ═══════════════════════════════════════ */
.org-people { display: grid; gap: 4px; margin: 12px 0 18px; font-size: 12.5px; }
.org-people__head, .org-people__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) 90px 150px 190px 130px minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
}
.org-people__head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 0 4px; }
.org-people__row { padding: 4px 0; }
.org-people__who { display: flex; flex-direction: column; min-width: 0; }
.org-people__who .org-tree__email { font-size: 11px; color: var(--muted); }
.org-people__title { min-width: 0; }
.org-ws { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 14px; margin: 12px 0 6px; }
.org-ws__days { display: flex; gap: 4px; }
.org-ws__day {
  font: inherit; font-size: 12px; padding: 5px 0; flex: 1; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--shift-1); color: var(--muted);
}
.org-ws__day.is-on { background: color-mix(in srgb, var(--plum, #7a3d6e) 22%, transparent); color: var(--ink); }
.org-ws__h { margin: 18px 0 4px; font-size: 13px; font-weight: 600; }
.org-holidays { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.org-holidays li { display: flex; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 8px; background: var(--shift-1); }
.org-holidays__date { font-family: var(--fs-font-mono); font-size: 11.5px; color: var(--muted); min-width: 150px; }
.org-holidays__name { flex: 1; }
.org-holidays__src { font-size: 11px; color: var(--muted); }
.org-holidays__x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.org-holidays__x:hover { color: var(--ink); }
.org-pick { margin: 10px 0; display: grid; gap: 8px; }
.org-pick__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: grid; gap: 2px; font-size: 12.5px; }
.org-pick__list label { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.org-pick__list label:hover { background: var(--shift-1); }
.org-pick__list li.is-have label { opacity: 0.5; cursor: default; }
.org-custom { margin-top: 8px; }