/* The comms hub's tab row: minimal text tabs after the reference top nav.
   No bar fill, no hairline, no plates, no underline. Styling stays inside the
   system's Tabs type contract - body-md, weight 550, secondary text - and
   carries selection with colour and weight alone, the same exception the
   phone TabBar makes where there is no room for a pill. */
/* One measure for the whole hub. Every tab's content and the tab bar itself
   share this cap and this inset, so the bar's edges and every card's edges
   land on one vertical line instead of each route picking its own width. */
.cms-hub {
  --cms-page-max: 1100px;
  --cms-page-inset: var(--space-400);
}

@media (min-width: 48rem) {
  .cms-hub {
    --cms-page-inset: var(--space-800);
  }
}

.cms-page {
  width: 100%;
  max-width: var(--cms-page-max);
  margin-inline: auto;
  padding-inline: var(--cms-page-inset);
  padding-block: var(--space-600);
}

@media (min-width: 48rem) {
  .cms-page {
    padding-block: var(--space-700);
  }
}

.cms-tabs {
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--z-100);
  /* Inline inset matches the route content below, so the bar and the cards
     share one left and right edge. */
  padding: var(--space-400) var(--cms-page-inset) var(--space-200);
  background: var(--color-bg);
}

/* Same shape as the Admin console's view row: the pills sit inside a flush
   surface card, so both top bars read as one component across the OS. */
.cms-tabs__card {
  max-width: calc(var(--cms-page-max) - 2 * var(--cms-page-inset));
  margin-inline: auto;
  padding: var(--space-200) var(--space-300);
  background: var(--color-bg-surface);
  border-radius: var(--radius-300);
  box-shadow: var(--shadow-card);
}

/* The tab row is the top of the panel, so the page's own top padding would
   read as dead space above it. The frame's section gap would also be inserted
   between the tabs and every route outlet, duplicating each page's own inset. */
.lch .as-frame__page:has(> .cms-tabs) {
  padding-top: 0;
  gap: 0;
}

/* One shape for every tab row in the OS: the same pills the FilterBar's saved
   views use under Admin (components/data/data.css .n__view) - control-height,
   --radius-200, medium label, selected on --color-bg-fill-transparent-secondary.
   Horizontal scroll rather than wrapping when the panel narrows: a wrapped tab
   row loses its alignment with the panel edge. */
.cms-tabs .as-tabs {
  gap: var(--space-050);
  /* Centred in the card. Falls back to flush-left the moment the row has to
     scroll, since centring a scrolled row hides the first tabs. */
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 0;
  /* The ring (2px + 1px offset) draws inside the scroll clip instead of being
     sliced off top and bottom. */
  padding-block: var(--space-100);
}
.cms-tabs .as-tabs::-webkit-scrollbar {
  display: none;
}

.cms-tabs .as-tabs__tab {
  flex: 0 0 auto;
  height: var(--control-height);
  padding-inline: var(--space-300);
  border-radius: var(--radius-200);
  font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  transition:
    background-color var(--motion-hover),
    color var(--motion-hover);
}

/* Brand mark ahead of the label: fixed 16px box, tab line-height carries the
   alignment. The mark keeps its own colors; selection still reads on type. */
.cms-tabs .as-tabs__icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-150);
}

.cms-tabs .as-tabs__icon img {
  width: var(--space-400);
  height: var(--space-400);
  object-fit: contain;
  display: block;
}

/* Icon-only tabs: the brand mark stands in for the label, so it carries the
   tab's whole optical weight and drops the label gap. */
.cms-tabs .as-tabs__tab--icon-only .as-tabs__icon {
  margin-right: 0;
}

.cms-tabs .as-tabs__tab--icon-only .as-tabs__icon img {
  width: var(--space-500);
  height: var(--space-500);
}

.cms-tabs .as-tabs__tab:hover {
  background: var(--color-bg-fill-transparent-hover);
  color: var(--color-text);
}

/* The system's own focus ring - a fixed 2px outline with 1px offset
   (tokens/shape.css), not a bespoke one. */
.cms-tabs .as-tabs__tab:focus-visible {
  outline: var(--border-width-050, 2px) solid var(--color-border-focus, var(--color-bg-fill-brand));
  outline-offset: var(--space-050);
  border-radius: var(--radius-200);
}

.cms-tabs .as-tabs__tab.is-selected {
  background: var(--color-bg-fill-transparent-secondary);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.cms-tabs .as-tabs__tab.is-selected::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .cms-tabs .as-tabs__tab {
    transition: none;
  }
}

.cms-source-card {
  min-height: calc(var(--space-1600) + var(--space-800));
  transition:
    box-shadow var(--motion-hover),
    border-color var(--motion-hover);
}

.cms-source-card:hover {
  box-shadow: var(--shadow-card-raised);
}

.cms-source-card__header,
.cms-source-card__footer {
  border-color: var(--color-border-secondary);
}

.cms-source-card__header {
  border-bottom-style: solid;
  border-bottom-width: var(--border-width-025);
}

.cms-source-card__footer {
  background: var(--color-bg-surface-secondary);
  border-top-style: solid;
  border-top-width: var(--border-width-025);
}

.cms-source-card__identity {
  display: grid;
  width: var(--space-800);
  height: var(--space-800);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-transparent-secondary);
}

.cms-toolkit-row + .cms-toolkit-row {
  margin-top: var(--space-100);
}

/* Disconnected reads through hand-picked disabled tokens, never a runtime
   opacity (guidelines/color-interactive-states). The logo image has no colour
   token, so it dims at the package's own disabled-mark value
   (components/auth/auth.css, .as-google:disabled .as-google__mark). */
.cms-toolkit-row.is-disconnected .cms-toolkit-row__icon {
  opacity: 0.38;
}

.cms-toolkit-row.is-disconnected p {
  color: var(--color-text-disabled);
}

/* The app's mono-label role (src/styles.css --type-mono-label): 11/16 medium
   mono, tracked 0.06em - the same face the eyebrow wears. */
.cms-toolkit-row__status {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-275);
  line-height: var(--font-line-height-400);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-status);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.cms-toolkit-row__status.is-active {
  color: var(--color-text-success);
}

.cms-source-card__reconnect {
  border-color: var(--color-border-secondary);
  background: var(--color-bg-surface-secondary);
}

.cms-source-card__capabilities {
  background: var(--color-bg-surface-secondary);
}

.cms-slack-status .as-badge {
  align-self: flex-start;
}

.cms-source-add {
  min-height: calc(var(--space-1600) + var(--space-800));
  border: var(--border-width-025) dashed var(--color-border-hover);
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-transparent);
  transition:
    background-color var(--motion-hover),
    border-color var(--motion-hover);
}

.cms-source-add:hover {
  border-color: var(--color-border-focus);
  background: var(--color-bg-fill-transparent-hover);
}

/* Disabled through hand-picked tokens, never a blanket opacity
   (guidelines/color-interactive-states). */
.cms-source-add:disabled {
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
  background: var(--color-bg-fill-disabled);
  cursor: default;
}

.cms-source-add:disabled .cms-source-add__icon {
  color: var(--color-icon-disabled);
  box-shadow: none;
}

.cms-source-add__icon {
  display: grid;
  width: var(--space-1000);
  height: var(--space-1000);
  place-items: center;
  border: var(--border-width-025) solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-icon-secondary);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-100);
}

.cms-status--inverse {
  background: var(--color-bg-fill-transparent-secondary);
  color: var(--color-text-inverse-secondary);
}

/* A field rendered as one element: the as-input box with the control's type.
   (Putting as-input__control on the same element would zero the border and
   fill that as-input just drew - the control class is written for the inner
   element of the wrapper pair.) */
.cms-field {
  padding-block: var(--space-150);
  border-radius: var(--radius-200);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text);
  outline: none;
}

.cms-field::placeholder {
  color: var(--color-text-disabled);
}

/* iOS Safari zooms the page on focusing any sub-16px field and never zooms
   back; the phone type ramp keeps inputs at 16 (tokens/mobile.css,
   --type-m-input-size: "NEVER lower"). Declared here because this sheet loads
   after the entry stylesheet's identical rule and would otherwise win with
   the 13px desktop size. */
@media (max-width: 767px) {
  .cms-field {
    font-size: var(--type-m-input-size);
  }
}

/* Mail rows: read recedes on the tinted flat surface, hover answers with the
   5% ink wash, a checked row takes the selected surface - every state a
   hand-picked token (guidelines/color-interactive-states). */
.cms-mail-row {
  transition: background-color var(--motion-hover);
}

.cms-mail-row.is-read {
  background: var(--color-bg-surface-secondary);
}

.cms-mail-row:hover {
  background: var(--color-bg-fill-transparent-hover);
}

.cms-mail-row.is-selected,
.cms-mail-row.is-selected:hover {
  background: var(--color-bg-surface-selected);
}

/* The quiet mono action ("REMOVE", "CALENDARS") from the approved Sources
   refinement. States are hand-picked text tokens, never a runtime opacity
   (guidelines/color-interactive-states); the height rides --control-height so
   it grows with the phone touch contract. */
.cms-mono-action {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--control-height);
  padding-inline: var(--space-100);
  font-family: var(--font-mono);
  font-size: var(--font-size-275);
  letter-spacing: var(--tracking-status);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--motion-hover);
}

.cms-mono-action:hover {
  color: var(--color-text);
}

.cms-mono-action:disabled {
  color: var(--color-text-disabled);
}

.cms-mono-action--on-ink {
  color: var(--color-text-inverse-secondary);
}

.cms-mono-action--on-ink:hover {
  color: var(--color-text-inverse);
}

/* ---- Time zones carousel ---------------------------------------------- */

.tz-card {
  --tz-visible: 5;
  --tz-slot: calc(100% / (var(--tz-visible) + 1));
  gap: 0;
  min-height: var(--space-1600);
}

.tz-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
  padding: var(--space-200) var(--card-padding) 0;
}

.tz-band {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-height: 0;
  padding: var(--space-100) var(--card-padding) var(--space-200);
}

.tz-viewport {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--space-400),
    #000 calc(100% - var(--space-800)),
    transparent 100%
  );
}

.tz-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: calc((var(--tz-visible) + 1) / var(--tz-visible) * 100%);
}

.tz-slot {
  display: flex;
  flex: 0 0 var(--tz-slot);
  flex-direction: column;
  align-items: center;
  gap: var(--space-050);
  min-width: 0;
  padding-inline: var(--space-200);
  text-align: center;
  white-space: nowrap;
}

.tz-slot + .tz-slot {
  border-inline-start: var(--border-width-025) solid var(--color-border);
}

.tz-slot__city {
  font-family: var(--font-mono);
  font-size: var(--font-size-275);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.tz-slot__time {
  font-family: var(--font-mono);
  font-size: var(--font-size-450);
  font-weight: 500;
  line-height: 1.05;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.tz-slot__day {
  font-family: var(--font-mono);
  font-size: var(--font-size-275);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .tz-card {
    --tz-visible: 3;
  }
}