/* ==========================================================================
   app.css — Carbon UI Shell and the operational screens.
   Built on the tokens and primitives in carbon.css.
   ========================================================================== */

/* ==========================================================================
   UI Shell
   Carbon's shell is a 48px dark header spanning the full width, with the side
   nav docked beneath it on the left.
   ========================================================================== */

.shell-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  height: var(--header-h);
  background-color: var(--background-inverse);
  border-bottom: 1px solid var(--n-700);
  color: var(--text-inverse);
}

.shell-header__menu {
  display: none;
  place-items: center;
  width: var(--header-h);
  height: var(--header-h);
  flex: none;
  color: var(--text-inverse);
  transition: background-color var(--dur-fast-01) var(--ease);
}
.shell-header__menu:hover { background-color: var(--n-700); }

.shell-header__brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-03);
  height: var(--header-h);
  padding: 0 var(--sp-05);
  color: var(--text-inverse);
  white-space: nowrap;
  line-height: var(--header-h);
}
.shell-header__brand:hover { text-decoration: none; color: var(--text-inverse); }
.shell-header__brand:focus-visible { outline: 2px solid var(--focus-inset); outline-offset: -2px; }

.shell-header__org { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16px; }
.shell-header__role { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; color: var(--n-400); }

.shell-header__page {
  display: none;
  margin-left: var(--sp-05);
  padding-left: var(--sp-05);
  border-left: 1px solid var(--n-700);
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  color: var(--n-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 42rem) { .shell-header__page { display: block; } }

.shell-header__actions { margin-left: auto; display: flex; align-items: center; height: 100%; }

/* Carbon header actions are 48x48 squares that invert on hover. */
.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--header-h);
  height: var(--header-h);
  flex: none;
  color: var(--text-inverse);
  transition: background-color var(--dur-fast-01) var(--ease);
}
.icon-btn:hover { background-color: var(--n-700); color: var(--text-inverse); text-decoration: none; }
.icon-btn:focus-visible { outline: 2px solid var(--focus-inset); outline-offset: -2px; }
.icon-btn[aria-expanded='true'] { background-color: var(--n-700); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }

.icon-btn__count {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background-color: var(--support-error);
  color: var(--text-on-color);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* One short pulse when something genuinely new arrives. */
.icon-btn.is-pulsing::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--support-error);
  opacity: 0;
  animation: bell-pulse 900ms var(--ease) 2;
}

@keyframes bell-pulse {
  0%   { opacity: .45; }
  100% { opacity: 0; }
}

/* --- user menu ------------------------------------------------------------ */

.usermenu { position: relative; height: 100%; }

.usermenu__trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-03);
  height: var(--header-h);
  padding: 0 var(--sp-05);
  color: var(--text-inverse);
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  transition: background-color var(--dur-fast-01) var(--ease);
}
.usermenu__trigger:hover { background-color: var(--n-700); }
.usermenu__trigger:focus-visible { outline: 2px solid var(--focus-inset); outline-offset: -2px; }
.usermenu__trigger[aria-expanded='true'] { background-color: var(--n-700); }

.usermenu__panel {
  position: absolute;
  top: var(--header-h);
  right: 0;
  z-index: calc(var(--z-header) + 1);
  width: 15rem;
  padding: 0;
  background-color: var(--layer-01);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.usermenu__head {
  padding: var(--sp-05);
  border-bottom: 1px solid var(--border-subtle);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  width: 100%;
  min-height: var(--size-md);
  padding: var(--sp-03) var(--sp-05);
  color: var(--text-primary);
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  text-align: left;
  transition: background-color var(--dur-fast-01) var(--ease);
}
.menu__item:hover { background-color: var(--background-hover); color: var(--text-primary); text-decoration: none; }
.menu__item--critical { color: var(--text-error); }
.menu__item--critical:hover { background-color: var(--notification-error-bg); }
.menu__item svg { flex: none; width: 1rem; height: 1rem; }

/* ==========================================================================
   Side nav
   ========================================================================== */

.app { display: block; min-height: 100vh; padding-top: var(--header-h); }

.app-rail {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  z-index: var(--z-rail);
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  background-color: var(--layer-01);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rail__nav { padding: var(--sp-05) 0; flex: 1; }

.rail__section {
  padding: var(--sp-04) var(--sp-05) var(--sp-03);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-helper);
}

.rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  min-height: var(--size-md);
  padding: var(--sp-03) var(--sp-05);
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  transition: background-color var(--dur-fast-01) var(--ease),
              color var(--dur-fast-01) var(--ease);
}

.rail__link:hover { background-color: var(--background-hover); color: var(--text-primary); text-decoration: none; }
.rail__link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Carbon marks the current item with a 3px left bar plus a tinted background. */
.rail__link.is-active {
  background-color: var(--background-selected);
  color: var(--text-primary);
  font-weight: 600;
}

.rail__link.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-color: var(--border-interactive);
}

.rail__link svg { flex: none; width: 1rem; height: 1rem; }

.rail__badge {
  margin-left: auto;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--sp-03);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background-color: var(--support-error);
  color: var(--text-on-color);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rail__badge--quiet { background-color: var(--n-200); color: var(--text-secondary); }

.rail__foot { flex: none; padding: var(--sp-04) 0; border-top: 1px solid var(--border-subtle); }

/* --- main ----------------------------------------------------------------- */

.main { margin-left: var(--rail-w); min-width: 0; display: flex; flex-direction: column; }

.page {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  padding: var(--sp-07) var(--sp-07) var(--sp-10);
}

.page--wide { max-width: none; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-06);
  flex-wrap: wrap;
  margin-bottom: var(--sp-07);
}

.page-head__title { font-size: 1.75rem; line-height: 1.28572; font-weight: 400; color: var(--text-primary); }
.page-head__sub { margin-top: var(--sp-03); font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.16px; color: var(--text-secondary); }
.page-head__actions { display: flex; align-items: center; gap: var(--sp-03); flex-wrap: wrap; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-02);
  min-height: var(--size-sm);
  margin-bottom: var(--sp-05);
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  color: var(--link-primary);
}
.back-link svg { width: 1rem; height: 1rem; }

.section { margin-bottom: var(--sp-08); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-05);
  margin-bottom: var(--sp-05);
}

/* --- responsive ----------------------------------------------------------- */

.mobile-nav { display: none; }

@media (max-width: 66rem) {
  .shell-header__menu { display: grid; }
  .shell-header__brand { padding-left: var(--sp-02); }

  .app-rail {
    transform: translateX(-100%);
    transition: transform var(--dur-moderate-02) var(--ease);
    box-shadow: var(--shadow-lg);
  }

  .app-rail.is-open { transform: translateX(0); }

  /* Touch targets get the full 48px in the mobile drawer. */
  .rail__link { min-height: var(--size-lg); }

  .main { margin-left: 0; }
  .page { padding: var(--sp-05) var(--sp-05) var(--sp-10); }
  .page-head__title { font-size: 1.25rem; line-height: 1.4; }

  /* Bottom tab bar — how a secretary actually moves around on a phone. */
  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-header);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background-color: var(--layer-01);
    border-top: 1px solid var(--border-subtle);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--size-lg);
    padding: var(--sp-03) var(--sp-02);
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    box-shadow: inset 0 2px 0 0 transparent;
    transition: color var(--dur-fast-01) var(--ease), box-shadow var(--dur-fast-01) var(--ease);
  }
  .mobile-nav__item:hover { text-decoration: none; }
  .mobile-nav__item svg { width: 1.25rem; height: 1.25rem; }
  .mobile-nav__item.is-active {
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 0 2px 0 0 var(--interactive);
  }

  .mobile-nav__dot {
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: 6px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background-color: var(--support-error);
    color: var(--text-on-color);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
  }

  .drawer { max-width: none; top: var(--header-h); }
  .modal__body { padding-right: var(--sp-05); }
}

.scrim {
  position: fixed;
  inset: 0;
  top: var(--header-h);
  z-index: calc(var(--z-rail) - 1);
  background-color: var(--overlay);
  animation: overlay-in var(--dur-moderate-01) var(--ease-entrance);
}

/* ==========================================================================
   Reception console
   ========================================================================== */

.console-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-05);
  margin-bottom: var(--sp-07);
}

/* Carbon "clickable tile" — square, flat, with an inset focus ring. */
.console-action {
  display: flex;
  align-items: center;
  gap: var(--sp-05);
  min-height: 5rem;
  padding: var(--sp-05);
  border: 1px solid var(--border-subtle);
  background-color: var(--layer-01);
  color: var(--text-primary);
  text-align: left;
  transition: background-color var(--dur-fast-01) var(--ease),
              border-color var(--dur-fast-01) var(--ease);
}

.console-action:hover { background-color: var(--layer-hover); border-color: var(--border-strong); text-decoration: none; color: var(--text-primary); }
.console-action:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.console-action__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size-lg);
  height: var(--size-lg);
  background-color: var(--indigo-20);
  color: var(--indigo-80);
}
.console-action__mark svg { width: 1.25rem; height: 1.25rem; }

.console-action--primary { border-left: 3px solid var(--interactive); }
.console-action--primary .console-action__mark { background-color: var(--interactive); color: var(--text-on-color); }

.console-action__label { font-size: 1rem; line-height: 1.375; font-weight: 600; }
.console-action__hint  { margin-top: var(--sp-02); font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; color: var(--text-secondary); }

/* --- stat strip ----------------------------------------------------------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin-bottom: var(--sp-07);
  background-color: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}

.stat {
  padding: var(--sp-05);
  background-color: var(--layer-01);
  transition: background-color var(--dur-fast-01) var(--ease);
}

a.stat:hover { background-color: var(--layer-hover); text-decoration: none; }
a.stat:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.stat__value {
  display: block;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.stat__label {
  display: block;
  margin-top: var(--sp-02);
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  color: var(--text-secondary);
}

.stat--attention .stat__value { color: var(--text-error); }
.stat--positive  .stat__value { color: var(--text-success); }

/* ==========================================================================
   Visit rows
   ========================================================================== */

/* Carbon structured list: 1px gaps let the container colour read as rules. */
.visit-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.visit-list:empty { display: none; }

/* An empty state placed inside the list still needs a surface under it. */
.visit-list > .empty { width: 100%; background-color: var(--layer-01); }

.visit {
  display: flex;
  align-items: center;
  gap: var(--sp-05);
  min-height: var(--size-xl);
  padding: var(--sp-04) var(--sp-05);
  background-color: var(--layer-01);
  color: var(--text-primary);
  transition: background-color var(--dur-fast-01) var(--ease);
}

.visit:hover { background-color: var(--layer-hover); text-decoration: none; color: var(--text-primary); }
.visit:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Status is carried by the left bar AND by the tag in the row — never colour alone. */
.visit--overdue  { box-shadow: inset 3px 0 0 0 var(--support-error); }
.visit--priority { box-shadow: inset 3px 0 0 0 var(--rose-60); }
.visit--accepted { box-shadow: inset 3px 0 0 0 var(--support-success); }

.visit__main { flex: 1; min-width: 0; }

.visit__name {
  display: block;
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  font-weight: 600;
  color: var(--text-primary);
}

.visit__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-helper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visit__seeing { color: var(--text-secondary); }
.visit__seeing strong { font-weight: 600; color: var(--text-primary); }

.visit__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-02);
  text-align: right;
}

.visit__actions { flex: none; display: flex; align-items: center; gap: var(--sp-03); }

.visit.is-new { animation: row-in var(--dur-moderate-02) var(--ease-entrance); }

@keyframes row-in { from { opacity: 0; transform: translateY(-0.5rem); } }

@media (max-width: 42rem) {
  .visit { flex-wrap: wrap; }
  .visit__side { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; }
  .visit__actions { width: 100%; }
  .visit__actions .btn { flex: 1; }
}

/* ==========================================================================
   Secretary work queue
   ========================================================================== */

.queue-card {
  border: 1px solid var(--border-subtle);
  background-color: var(--layer-01);
}

.queue-card--urgent { border-left: 3px solid var(--support-error); }

.queue-card__flag {
  display: flex;
  align-items: center;
  gap: var(--sp-03);
  min-height: var(--size-md);
  padding: var(--sp-03) var(--sp-05);
  background-color: var(--notification-error-bg);
  color: var(--text-error);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  font-weight: 600;
  text-transform: uppercase;
}

.queue-card__flag svg { flex: none; width: 1rem; height: 1rem; }

.queue-card__body { padding: var(--sp-05); }

.queue-card__name { font-size: 1.25rem; line-height: 1.4; font-weight: 400; color: var(--text-primary); }
.queue-card__org { margin-top: var(--sp-02); font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; color: var(--text-secondary); }

.queue-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-05);
  margin-top: var(--sp-05);
  padding-top: var(--sp-05);
  border-top: 1px solid var(--border-subtle);
}

.fact__label {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-helper);
}
.fact__value { margin-top: var(--sp-02); font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; color: var(--text-primary); }

/* Carbon button set: the three decisions butt together, separated by a rule. */
.decide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.decide .btn { min-height: var(--size-xl); max-width: none; align-items: flex-start; padding-top: var(--sp-05); }
.decide .btn + .btn { box-shadow: inset 1px 0 0 0 var(--button-separator); }
.decide form { display: contents; }

@media (max-width: 42rem) {
  .decide { grid-template-columns: 1fr; }
  .decide .btn + .btn { box-shadow: inset 0 1px 0 0 var(--button-separator); }
}

/* ==========================================================================
   Person picker
   ========================================================================== */

.picker { position: relative; }

.picker__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0;
  background-color: var(--layer-01);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.picker__option {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  width: 100%;
  min-height: var(--size-lg);
  padding: var(--sp-03) var(--sp-05);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  transition: background-color var(--dur-fast-01) var(--ease);
}
.picker__option:last-child { border-bottom: 0; }
.picker__option:hover,
.picker__option.is-highlighted { background-color: var(--background-selected); }

.picker__name { display: block; font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; font-weight: 600; }
.picker__meta { display: block; margin-top: 2px; font-size: 0.75rem; letter-spacing: 0.32px; color: var(--text-helper); }

.picker__empty { padding: var(--sp-05); text-align: center; font-size: 0.875rem; color: var(--text-helper); }

/* The confirmed selection, showing the secretary the visit routes to. */
.picked {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-05);
  padding: var(--sp-05);
  border: 1px solid var(--indigo-20);
  border-left: 3px solid var(--interactive);
  background-color: var(--notification-info-bg);
  animation: row-in var(--dur-moderate-01) var(--ease-entrance);
}

.picked__routing {
  margin-top: var(--sp-04);
  padding-top: var(--sp-04);
  border-top: 1px solid var(--indigo-20);
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  color: var(--indigo-80);
}

.picked__routing strong { font-weight: 600; }

/* Returning-visitor prompt — offered, never applied automatically. */
.recognised {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-05);
  padding: var(--sp-05);
  margin-bottom: var(--sp-06);
  border: 1px solid var(--teal-20);
  border-left: 3px solid var(--support-success);
  background-color: var(--notification-success-bg);
  animation: row-in var(--dur-moderate-01) var(--ease-entrance);
}

/* ==========================================================================
   Notification centre
   ========================================================================== */

.notif {
  position: relative;
  display: flex;
  gap: var(--sp-04);
  width: 100%;
  padding: var(--sp-05);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-align: left;
  transition: background-color var(--dur-fast-01) var(--ease);
}

.notif:hover { background-color: var(--layer-hover); text-decoration: none; color: var(--text-primary); }
.notif:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Unread carries a left bar and a dot — obvious without being loud. */
.notif.is-unread { background-color: var(--background-selected); box-shadow: inset 3px 0 0 0 var(--interactive); }
.notif.is-unread:hover { background-color: var(--indigo-20); }

.notif__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.375rem;
  border-radius: 50%;
  background-color: var(--interactive);
}
.notif__dot--urgent { background-color: var(--support-error); }
.notif:not(.is-unread) .notif__dot { background-color: transparent; }

.notif__body { flex: 1; min-width: 0; }
.notif__title { display: block; font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; font-weight: 600; }
.notif__text  { display: block; margin-top: var(--sp-02); font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.16px; color: var(--text-secondary); }
.notif__time  { display: block; margin-top: var(--sp-03); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--text-helper); }

.notif.is-fresh { animation: row-in var(--dur-moderate-02) var(--ease-entrance); }

/* ==========================================================================
   Contextual chat
   ========================================================================== */

.chat {
  display: flex;
  flex-direction: column;
  height: min(40rem, calc(100vh - 16rem));
  border: 1px solid var(--border-subtle);
  background-color: var(--layer-01);
}

.chat__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-04) var(--sp-05);
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--layer-02);
}

.chat__log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-05);
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
  scroll-behavior: smooth;
}

.msg {
  display: flex;
  flex-direction: column;
  max-width: min(80%, 30rem);
  animation: msg-in var(--dur-moderate-01) var(--ease-entrance);
}

@keyframes msg-in { from { opacity: 0; transform: translateY(0.5rem); } }

.msg--mine { align-self: flex-end; align-items: flex-end; }

.msg__who {
  margin-bottom: var(--sp-02);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  font-weight: 600;
  color: var(--text-helper);
}

.msg__bubble {
  padding: var(--sp-04) var(--sp-05);
  border: 1px solid var(--border-subtle);
  background-color: var(--layer-02);
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.msg--mine .msg__bubble {
  background-color: var(--interactive);
  border-color: var(--interactive);
  color: var(--text-on-color);
}

.msg__time { margin-top: var(--sp-02); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--text-helper); }

.chat__compose {
  flex: none;
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.chat__compose .textarea {
  min-height: var(--size-lg);
  max-height: 7.5rem;
  border-bottom: 0;
  resize: none;
}

.chat__compose .btn { flex: none; }

.chat__day {
  align-self: center;
  padding: var(--sp-02) var(--sp-04);
  border-radius: var(--r-pill);
  background-color: var(--layer-accent);
  font-size: 0.75rem;
  letter-spacing: 0.32px;
  color: var(--text-helper);
}

/* --- conversation list ---------------------------------------------------- */

.conv {
  display: flex;
  align-items: center;
  gap: var(--sp-05);
  min-height: var(--size-xl);
  padding: var(--sp-04) var(--sp-05);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: background-color var(--dur-fast-01) var(--ease);
}
.conv:hover { background-color: var(--layer-hover); text-decoration: none; color: var(--text-primary); }
.conv:last-child { border-bottom: 0; }

.conv__preview {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  color: var(--text-helper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv.has-unread { box-shadow: inset 3px 0 0 0 var(--interactive); }
.conv.has-unread .conv__preview { color: var(--text-primary); font-weight: 600; }

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline { position: relative; padding-left: var(--sp-06); }

.timeline::before {
  content: '';
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 3px;
  width: 1px;
  background-color: var(--border-subtle);
}

.timeline__item { position: relative; padding-bottom: var(--sp-06); }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__node {
  position: absolute;
  left: calc(-1 * var(--sp-06));
  top: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--n-400);
}

.timeline__item--positive .timeline__node { background-color: var(--support-success); }
.timeline__item--critical .timeline__node { background-color: var(--support-error); }
.timeline__item--current  .timeline__node { background-color: var(--interactive); }

.timeline__title { font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; font-weight: 600; }
.timeline__meta  { margin-top: var(--sp-02); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--text-helper); }
.timeline__note  { margin-top: var(--sp-02); font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.16px; color: var(--text-secondary); }

/* ==========================================================================
   Detail layout
   ========================================================================== */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--grid-gutter);
  align-items: start;
}

@media (max-width: 66rem) { .detail { grid-template-columns: 1fr; } }

.detail__aside { display: flex; flex-direction: column; gap: var(--sp-05); }

.definition { display: grid; gap: var(--sp-05); }

.definition__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-04); align-items: baseline; }
.definition__key { font-size: 0.75rem; line-height: 1.33333; letter-spacing: 0.32px; color: var(--text-helper); }
.definition__val { font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.16px; color: var(--text-primary); word-break: break-word; }

@media (max-width: 30rem) {
  .definition__row { grid-template-columns: 1fr; gap: var(--sp-02); }
}

/* ==========================================================================
   Filters
   ========================================================================== */

.filters {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-03);
  flex-wrap: wrap;
  margin-bottom: var(--sp-06);
}

.filters .search { flex: 1; min-width: 14rem; }
.filters .select { width: auto; min-width: 10rem; }
.filters .input[type='date'] { width: auto; }

/* ==========================================================================
   Login
   ========================================================================== */

.auth { display: grid; grid-template-columns: 1fr; min-height: 100vh; background-color: var(--background); }

@media (min-width: 66rem) { .auth { grid-template-columns: 1fr 28rem; } }

.auth__pitch {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-10) var(--sp-09);
  background-color: var(--background-inverse);
  color: var(--text-inverse);
}

@media (min-width: 66rem) { .auth__pitch { display: flex; } }

.auth__pitch h1 { font-size: 2rem; line-height: 1.25; font-weight: 300; max-width: 18ch; }
.auth__pitch p  { margin-top: var(--sp-06); font-size: 1rem; line-height: 1.5; color: var(--n-300); max-width: 46ch; }

.auth__flow { margin-top: var(--sp-09); display: flex; flex-direction: column; gap: var(--sp-05); }

.auth__step {
  display: flex;
  align-items: center;
  gap: var(--sp-05);
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--n-300);
}

.auth__step span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--n-500);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-inverse);
}

.auth__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-09) var(--sp-06);
  background-color: var(--layer-01);
}

.auth__inner { width: 100%; max-width: 22rem; margin: 0 auto; }

.auth__mark {
  display: grid;
  place-items: center;
  width: var(--size-lg);
  height: var(--size-lg);
  margin-bottom: var(--sp-07);
  background-color: var(--interactive);
  color: var(--text-on-color);
  font-size: 1rem;
  font-weight: 600;
}

/* ==========================================================================
   Success confirmation
   ========================================================================== */

.confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-05);
  padding: var(--sp-09) var(--sp-06);
  text-align: center;
}

.confirm__mark {
  display: grid;
  place-items: center;
  width: var(--size-xl);
  height: var(--size-xl);
  background-color: var(--notification-success-bg);
  color: var(--support-success);
  animation: confirm-pop var(--dur-moderate-02) var(--ease-entrance);
}
.confirm__mark svg { width: 1.75rem; height: 1.75rem; }

@keyframes confirm-pop {
  0%   { transform: scale(.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   Reports
   ========================================================================== */

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--sp-05);
}

.bar-row { display: grid; grid-template-columns: 1fr 3.5rem; gap: var(--sp-04); align-items: center; padding: var(--sp-03) 0; }
.bar-row__label { font-size: 0.875rem; letter-spacing: 0.16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__track { height: 0.5rem; background-color: var(--layer-accent); overflow: hidden; margin-top: var(--sp-02); }
.bar-row__fill  { height: 100%; background-color: var(--interactive); transition: width var(--dur-slow-01) var(--ease); }
.bar-row__value { text-align: right; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }