/* Tabcat components. The design system ships this file as components/bundle.css,
   so every value here comes from a token; sizes match Tabcat's SwiftUI views
   (main.swift, Mailbox.swift, QuickSwitch.swift, Settings.swift). */

.fl-sr {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:where(.fl-btn, .fl-tab, .fl-icon-btn, .fl-pill, .fl-switch, .fl-segment__option, .fl-frame__window):focus-visible {
  outline: 2px solid var(--ginger-text);
  outline-offset: 2px;
}

/* Button: primary at most once per view, for the thing the page is for. */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-tile);
  background: transparent;
  color: var(--app-ink);
  font: 500 15px/20px var(--font-system);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.fl-btn--primary { background: var(--app-ink); color: var(--app-surface); }
.fl-btn--primary:hover { background: color-mix(in srgb, var(--app-ink) 84%, var(--app-surface)); }
.fl-btn--secondary { border-color: var(--app-control-border); }
.fl-btn--secondary:hover,
.fl-btn--quiet:hover { background: var(--app-fill-quiet); }
.fl-btn:active { background: var(--app-fill-strong); }
.fl-btn--primary:active { background: color-mix(in srgb, var(--app-ink) 72%, var(--app-surface)); }
.fl-btn:disabled,
.fl-btn[aria-disabled="true"] { color: var(--app-ink-muted); background: transparent; border-color: var(--app-hairline-strong); cursor: default; }
.fl-btn svg { width: 16px; height: 16px; }
.fl-btn--small { min-height: 28px; padding: 0 10px; border-radius: var(--radius-cell); font-size: 13px; line-height: 18px; }

/* Text field: same height and corner as a button, so a field and its button sit as one row. */
.fl-input {
  min-height: 40px;
  min-width: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--app-control-border);
  border-radius: var(--radius-tile);
  background: var(--app-surface-raised);
  color: var(--app-ink);
  font: 400 16px/20px var(--font-system);
}
.fl-input::placeholder { color: var(--app-ink-muted); }
.fl-input:focus-visible { outline: 2px solid var(--ginger-text); outline-offset: 1px; }
.fl-input[aria-invalid="true"] { border-color: var(--app-unread); border-width: 2px; padding: 0 calc(var(--space-3) - 1px); }

/* Keycaps: <kbd> with the symbols shown and the key names for screen readers. */
.fl-keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.fl-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--app-hairline-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-cell);
  background: var(--app-surface-sunken);
  color: var(--app-ink);
  font: 500 13px/1 var(--font-system);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tab: a 40 pt tile and its name, one row of the strip.
   data-state: active (in front), open (running), stopped (not started yet). */
.fl-tab {
  --tile-colour: var(--app-account-none);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: calc(var(--strip-width) - var(--space-2));
  padding: var(--space-1) 0;
  border: 0;
  border-radius: var(--radius-tile);
  background: transparent;
  color: var(--app-ink);
  font-family: var(--font-system);
  transition: background-color 150ms ease-out;
}
button.fl-tab { cursor: pointer; }
.fl-tab__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: var(--radius-tile);
  font: 700 17px/1 var(--font-system);
  transition: transform 250ms ease-out, box-shadow 250ms ease-out, background-color 180ms ease-out;
}
.fl-tab__tile svg { width: 18px; height: 18px; }
.fl-tab[data-state="active"] .fl-tab__tile { background: var(--tile-colour); color: var(--app-on-account); }
.fl-tab[data-state="open"] .fl-tab__tile { background: color-mix(in srgb, var(--tile-colour) 22%, transparent); color: var(--app-ink); }
.fl-tab[data-state="stopped"] .fl-tab__tile { border: 1.5px dashed var(--tile-colour); color: var(--app-ink-muted); }
.fl-tab__name {
  max-width: 100%;
  overflow: hidden;
  color: var(--app-ink-muted);
  font: 400 10px/12px var(--font-system);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-tab[data-state="active"] .fl-tab__name { color: var(--app-ink); font-weight: 600; }
button.fl-tab:hover:not([data-state="active"]) { background: var(--app-fill-quiet); }
button.fl-tab:hover .fl-tab__name { color: var(--app-ink); }
button.fl-tab:hover:not([data-state="active"]) .fl-tab__tile { transform: scale(1.08); box-shadow: var(--app-shadow-lift); }
.fl-tab__dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--app-unread);
  box-shadow: 0 0 0 1.5px var(--app-surface-raised);
}

/* Set pill: the current set at the top of the strip. */
.fl-pill {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 22px;
  padding: 0 var(--space-2);
  border: 1px solid var(--app-hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--app-fill-quiet);
  color: var(--app-ink);
  font: 700 11px/1 var(--font-system);
  white-space: nowrap;
}
button.fl-pill { cursor: pointer; }
button.fl-pill:hover { background: var(--app-fill-strong); }
.fl-pill--current { background: var(--app-ink); border-color: var(--app-ink); color: var(--app-surface); }

/* Icon button: the strip's +, mailbox and gear. + is dashed until hovered. */
.fl-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile-size);
  height: var(--tile-size);
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--radius-tile);
  background: transparent;
  color: var(--app-ink-muted);
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
.fl-icon-btn svg { width: 18px; height: 18px; }
.fl-icon-btn--add { border-style: dashed; border-color: var(--app-control-border); }
button.fl-icon-btn { cursor: pointer; }
button.fl-icon-btn:hover { background: var(--app-fill-quiet); border-style: solid; border-color: var(--app-control-border); color: var(--app-ink); transform: scale(1.06); }
.fl-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--app-unread);
  color: var(--app-on-unread);
  font: 700 10px/15px var(--font-system);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Label: a word or two of status, like "Coming soon". The words carry the meaning. */
.fl-label {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border: 1px solid var(--app-hairline-strong);
  border-radius: var(--radius-pill);
  color: var(--app-ink-muted);
  font: 600 12px/1 var(--font-system);
  white-space: nowrap;
  vertical-align: middle;
}

/* Strip: set pill, tabs, +, then mailbox and gear at the bottom. */
.fl-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-tab);
  width: var(--strip-width);
  padding: var(--space-tab) 0 var(--space-5);
  background: var(--app-surface);
  color: var(--app-ink);
}
.fl-strip__tabs { display: flex; flex-direction: column; align-items: center; gap: var(--space-tab); }
.fl-strip__end { display: flex; flex-direction: column; align-items: center; gap: var(--space-tab); margin-top: auto; }

/* Frame: the strip in front of a window. The window keeps all four 16 pt corners,
   so the strip's colour fills the notch beside its left corners, as Tabcat's stripPath does. */
.fl-frame {
  position: relative;
  display: grid;
  grid-template-columns: var(--strip-width) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius-window);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-window);
  color: var(--app-ink);
  isolation: isolate;
}
.fl-frame[data-inactive] { box-shadow: var(--app-shadow-window-inactive); }
.fl-frame > .fl-strip { background: transparent; }
.fl-frame__window {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-window);
  background: var(--app-surface-raised);
  box-shadow: inset 0 0 0 1px var(--app-hairline);
}
.fl-frame__accent {
  position: absolute;
  top: var(--radius-window);
  bottom: var(--radius-window);
  left: calc(var(--strip-width) - var(--accent-edge));
  z-index: 1;
  width: var(--accent-edge);
  background: var(--accent-colour, transparent);
  transition: background-color 180ms ease-out;
}
.fl-window__bar {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 60px;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--app-hairline);
}
.fl-window__lights { display: flex; gap: var(--space-2); }
.fl-window__lights span { width: 12px; height: 12px; border-radius: 50%; background: var(--app-fill-strong); }
.fl-window__title {
  overflow: hidden;
  color: var(--app-ink-muted);
  font: 600 13px/18px var(--font-system);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-window__body { flex: 1; min-height: 0; padding: var(--space-6); }

/* Account chip: an account's tile and name, with its state in words. */
.fl-chip {
  --tile-colour: var(--app-account-none);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--app-hairline);
  border-radius: var(--radius-tile);
  background: var(--app-surface-raised);
  color: var(--app-ink);
  font: 500 13px/18px var(--font-system);
}
.fl-chip__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-cell);
  background: var(--tile-colour);
  color: var(--app-on-account);
  font: 700 12px/1 var(--font-system);
}
.fl-chip[data-state="stopped"] .fl-chip__tile { border: 1.5px dashed var(--tile-colour); background: transparent; color: var(--app-ink-muted); }
.fl-chip__state { color: var(--app-ink-muted); font-weight: 400; }

/* Settings: grouped rows like a macOS Form section. */
.fl-settings-group { display: grid; gap: 6px; }
.fl-settings-group__title { margin: 0 0 0 var(--space-3); color: var(--app-ink-muted); font: 600 13px/18px var(--font-system); }
.fl-settings {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--app-hairline);
  border-radius: var(--radius-panel);
  background: var(--app-surface-raised);
  list-style: none;
}
.fl-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  margin: 0 var(--space-3);
  padding: var(--space-2) 0;
}
.fl-setting + .fl-setting { border-top: 1px solid var(--app-hairline); }
.fl-setting--stack { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-block: var(--space-3); }
.fl-setting__text { display: grid; gap: 2px; min-width: 0; }
.fl-setting__label { color: var(--app-ink); font: 400 13px/18px var(--font-system); }
.fl-setting__detail { color: var(--app-ink-muted); font: 400 12px/16px var(--font-system); }
.fl-switch {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--app-control-border);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.fl-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--app-on-accent);
  box-shadow: var(--app-shadow-lift);
  transition: transform 150ms ease-out;
}
.fl-switch[aria-checked="true"] { background: var(--app-accent); }
.fl-switch[aria-checked="true"]::after { transform: translateX(16px); }
.fl-segment {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--app-control-border);
  border-radius: var(--radius-cell);
}
.fl-segment__option {
  min-height: 24px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-key);
  background: transparent;
  color: var(--app-ink);
  font: 400 13px/18px var(--font-system);
  cursor: pointer;
}
.fl-segment__option:hover { background: var(--app-fill-quiet); }
.fl-segment__option[aria-checked="true"] { background: var(--app-ink); color: var(--app-surface); font-weight: 500; }

/* Mailbox: mail from your agents, through yowl. Unread shows as a dot, a bold sender and words. */
.fl-mailbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  border: 1px solid var(--app-hairline);
  border-radius: var(--radius-panel);
  background: var(--app-surface-raised);
  color: var(--app-ink);
  font-family: var(--font-system);
}
.fl-mailbox__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); }
.fl-mailbox__title { margin: 0; font: 600 15px/20px var(--font-system); }
.fl-mailbox__count { color: var(--app-ink-muted); font: 400 12px/16px var(--font-system); }
.fl-mailbox__actions { display: flex; gap: var(--space-1); margin-left: auto; }
.fl-mailbox__list { margin: 0; padding: 0; border-top: 1px solid var(--app-hairline); list-style: none; }
.fl-mail { display: grid; gap: 6px; padding: var(--space-3); }
.fl-mail + .fl-mail { border-top: 1px solid var(--app-hairline); }
.fl-mail__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fl-mail__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--app-accent); }
.fl-mail__sender { overflow: hidden; font: 400 13px/18px var(--font-system); text-overflow: ellipsis; white-space: nowrap; }
.fl-mail[data-unread] .fl-mail__sender { font-weight: 600; }
.fl-mail__asks { padding: 0 6px; border-radius: var(--radius-pill); background: var(--app-asks-fill); color: var(--app-asks); font: 600 11px/16px var(--font-system); }
.fl-mail__time { margin-left: auto; color: var(--app-ink-muted); font: 400 12px/16px var(--font-system); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-mail__body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font: 400 13px/18px var(--font-system);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.fl-mailbox__empty { margin: 0; padding: var(--space-4); border-top: 1px solid var(--app-hairline); color: var(--app-ink-muted); font: 400 13px/18px var(--font-system); }
.fl-mailbox__foot { margin: 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--app-hairline); color: var(--app-ink-muted); font: 400 11px/14px var(--font-system); }

/* Quick switch: the ⌃⌘Tab panel. Always dark, like macOS's own switcher. */
.fl-switcher {
  display: inline-flex;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-hud);
  background: var(--app-hud);
  color: var(--app-on-hud);
}
.fl-switcher__item {
  --tile-colour: var(--app-account-none);
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 80px;
  height: 92px;
  border: 2px solid transparent;
  border-radius: var(--radius-panel);
}
.fl-switcher__item[data-selected] { border-color: var(--tile-colour); background: color-mix(in srgb, var(--tile-colour) 14%, transparent); }
.fl-switcher__tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-panel);
  background: var(--tile-colour);
  color: var(--app-on-account);
  font: 700 22px/1 var(--font-system);
}
.fl-switcher__item[data-state="stopped"] .fl-switcher__tile { border: 2px dashed var(--tile-colour); background: transparent; color: var(--app-on-hud-muted); }
.fl-switcher__name {
  max-width: 72px;
  overflow: hidden;
  font: 400 11px/14px var(--font-system);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-switcher__item[data-selected] .fl-switcher__name { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .fl-btn, .fl-tab, .fl-tab__tile, .fl-icon-btn, .fl-frame__accent, .fl-switch, .fl-switch::after { transition: none; }
  button.fl-tab:hover:not([data-state="active"]) .fl-tab__tile,
  button.fl-icon-btn:hover { transform: none; }
}