/* Root-relative so CSSOM consumers such as accessibility tooling retain the
   token sheet's correct origin when they inspect this imported stylesheet. */
@import url("/assets/refera-tokens.css?v=4237986df706");

/* Refera clinical operations identity.
   Loaded last across the licensed console, standalone workspace tools and
   settings so every shipped shell shares one local typeface and token set. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-italic.woff2") format("woff2");
}

:root {
  --paper: var(--refera-color-light-canvas);
  --surface: var(--refera-color-light-surface);
  --surface-2: var(--refera-color-light-surface-muted);
  --ink: var(--refera-color-light-text);
  --ink2: var(--refera-color-light-text-muted);
  --ink3: var(--refera-color-light-text-quiet);
  --ink3-decor: #8B9995;
  --hair: var(--refera-color-light-border);
  --hair-dark: var(--refera-color-light-border-strong);

  --teal: var(--refera-color-light-brand);
  --teal-2: var(--refera-color-light-brand-strong);
  --teal-soft: #5D9584;
  --teal-wash: var(--refera-color-light-brand-wash);
  --teal-edge: var(--refera-color-light-brand-edge);
  --signal: var(--refera-color-light-action);
  --signal-wash: var(--refera-color-light-action-wash);
  --signal-edge: var(--refera-color-light-action-edge);
  --action-fill: var(--refera-color-light-action);
  --attention: var(--refera-color-light-attention);
  --attention-wash: var(--refera-color-light-attention-wash);
  --attention-edge: var(--refera-color-light-attention-edge);

  --amber: var(--refera-color-light-warning);
  --amber-wash: var(--refera-color-light-warning-wash);
  --green: var(--refera-color-light-positive);
  --green-wash: var(--refera-color-light-positive-wash);
  --red: var(--refera-color-light-negative);
  --danger: var(--refera-color-light-negative);
  --red-wash: var(--refera-color-light-negative-wash);
  --danger-wash: var(--refera-color-light-negative-wash);

  --ch-email: #2F67AD;
  --ch-healthlink: #8B651C;
  --ch-fax: #8B5412;
  --ch-upload: #357486;
  --hue-email: #2F67AD;
  --hue-healthlink: #8B651C;
  --hue-fax: #8B5412;
  --hue-upload: #357486;
  --hue-frontdesk: #357486;
  --hue-qr: #257348;

  --bar: #F7F9F8;
  /* Primary fills are the brand accent, never near-black ink - "the brand is
     the only accent that ever fills" (DESIGN-v2 section 1). White on
     #2C5E7A = 7.0:1; white on the #23506B hover = 8.6:1. */
  --pill-bg: var(--teal);
  --pill-fg: #FFFFFF;
  --pill-hover: var(--teal-2);
  --toast-bg: #15211E;
  --toast-fg: #FFFFFF;
  --filters-tint: rgba(255, 255, 255, .96);
  --card-hover-border: #B8C8C2;
  --tone-ok-border: #BBDCC8;
  --tone-warn-border: #E8CF9E;
  --tone-teal-border: #BCD5CD;
  --tone-danger-border: #E8BDBD;

  --glass-tint: rgba(244, 247, 246, .92);
  --glass-tint-strong: rgba(255, 255, 255, .98);
  --glass-tint-teal: rgba(44, 94, 122, .97);
  --glass-specular: inset 0 0 0 .5px rgba(255, 255, 255, .7);
  --glass-hairline: 0 0 0 .5px rgba(21, 33, 30, .08);
  --elev-1: 0 1px 2px rgba(21, 33, 30, .04);
  --elev-lift: 0 6px 18px rgba(21, 33, 30, .07);
  --elev-float: 0 8px 24px rgba(21, 33, 30, .08), 0 1px 2px rgba(21, 33, 30, .04);
  --elev-overlay: 0 16px 48px rgba(21, 33, 30, .18), 0 2px 8px rgba(21, 33, 30, .08);

  --r-input: var(--refera-radius-input);
  --r-chip: var(--refera-radius-chip);
  --r-card: var(--refera-radius-card);
  --r-glass: 10px;
  --r-sheet: var(--refera-radius-sheet);

  --font: var(--refera-font-family-ui);
  --font-ui: var(--refera-font-family-ui);
  --display: var(--refera-font-family-ui);
  --sans: var(--refera-font-family-ui);
}

html[data-theme="dark"],
:root[data-theme="dark"] {
  --paper: var(--refera-color-dark-canvas);
  --surface: var(--refera-color-dark-surface);
  --surface-2: var(--refera-color-dark-surface-muted);
  --ink: var(--refera-color-dark-text);
  --ink2: var(--refera-color-dark-text-muted);
  --ink3: var(--refera-color-dark-text-quiet);
  --ink3-decor: #57655F;
  --hair: var(--refera-color-dark-border);
  --hair-dark: var(--refera-color-dark-border-strong);

  --teal: var(--refera-color-dark-brand);
  --teal-2: var(--refera-color-dark-brand);
  --teal-soft: #4D9A80;
  --teal-wash: var(--refera-color-dark-brand-wash);
  --teal-edge: var(--refera-color-dark-brand-edge);
  --signal: var(--refera-color-dark-action);
  --signal-wash: var(--refera-color-dark-action-wash);
  --signal-edge: var(--refera-color-dark-action-edge);
  --action-fill: #315F97;
  --attention: var(--refera-color-dark-attention);
  --attention-wash: var(--refera-color-dark-attention-wash);
  --attention-edge: var(--refera-color-dark-attention-edge);

  --amber: var(--refera-color-dark-warning);
  --amber-wash: var(--refera-color-dark-warning-wash);
  --green: var(--refera-color-dark-positive);
  --green-wash: var(--refera-color-dark-positive-wash);
  --red: var(--refera-color-dark-negative);
  --danger: var(--refera-color-dark-negative);
  --red-wash: var(--refera-color-dark-negative-wash);
  --danger-wash: var(--refera-color-dark-negative-wash);

  --ch-email: #88B6EA;
  --ch-healthlink: #D8B568;
  --ch-fax: #E5B968;
  --ch-upload: #76B7C7;
  --hue-email: #88B6EA;
  --hue-healthlink: #D8B568;
  --hue-fax: #E5B968;
  --hue-upload: #76B7C7;
  --hue-frontdesk: #76B7C7;
  --hue-qr: #77C4A8;

  --bar: #1C2521;
  /* Dark primaries fill with the accessible dark brand accent; dark canvas
     ink on #85BEDC = 9.1:1 (numeric pass, 21 Jul 2026). */
  --pill-bg: var(--teal);
  --pill-fg: #10151B;
  --pill-hover: color-mix(in srgb, var(--teal) 84%, #FFFFFF);
  --toast-bg: #27322E;
  --toast-fg: #F2F6F4;
  --filters-tint: rgba(23, 30, 27, .95);
  --card-hover-border: #4A5A54;
  --tone-ok-border: rgba(117, 205, 151, .32);
  --tone-warn-border: rgba(229, 185, 104, .34);
  --tone-teal-border: rgba(119, 196, 168, .32);
  --tone-danger-border: rgba(240, 139, 139, .34);

  --glass-tint: rgba(17, 23, 21, .9);
  --glass-tint-strong: rgba(23, 30, 27, .98);
  --glass-tint-teal: rgba(133, 190, 220, .97);
  --glass-specular: inset 0 0 0 .5px rgba(242, 246, 244, .08);
  --glass-hairline: 0 0 0 .5px rgba(242, 246, 244, .08);
  --elev-1: 0 1px 2px rgba(0, 0, 0, .28);
  --elev-lift: 0 6px 18px rgba(0, 0, 0, .3);
  --elev-float: 0 8px 26px rgba(0, 0, 0, .36), 0 1px 2px rgba(0, 0, 0, .24);
  --elev-overlay: 0 18px 52px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
}

html[data-accent="indigo"] {
  --teal: #355F73; --teal-2: #355F73; --teal-wash: #ECF3F6; --teal-edge: #C6D8E0;
}
html[data-accent="harbour"] {
  --teal: #2F5F9A; --teal-2: #2F5F9A; --teal-wash: #EEF4FB; --teal-edge: #C5D6E9;
}
html[data-accent="plum"] {
  --teal: #98473E; --teal-2: #98473E; --teal-wash: #FFF1EF; --teal-edge: #E8C4BF;
}
html[data-accent="graphite"] {
  --teal: #46514E; --teal-2: #46514E; --teal-wash: #EEF1F0; --teal-edge: #CED6D3;
}
html[data-theme="dark"][data-accent="indigo"] {
  --teal: #8FC1D3; --teal-2: #8FC1D3; --teal-wash: rgba(143, 193, 211, .11); --teal-edge: rgba(143, 193, 211, .34);
}
html[data-theme="dark"][data-accent="harbour"] {
  --teal: #88B6EA; --teal-2: #88B6EA; --teal-wash: rgba(136, 182, 234, .11); --teal-edge: rgba(136, 182, 234, .34);
}
html[data-theme="dark"][data-accent="plum"] {
  --teal: #F09A8F; --teal-2: #F09A8F; --teal-wash: rgba(240, 154, 143, .11); --teal-edge: rgba(240, 154, 143, .34);
}
html[data-theme="dark"][data-accent="graphite"] {
  --teal: #B6C1BD; --teal-2: #B6C1BD; --teal-wash: rgba(182, 193, 189, .11); --teal-edge: rgba(182, 193, 189, .34);
}

body {
  background-color: var(--paper);
  background-image: none !important;
  font-family: var(--font, var(--sans));
  font-feature-settings: "cv05" 1, "cv11" 1;
}
/* The router removes this state in the same task that renders the first view. */
html.is-booting .foot,
html.is-booting #ra-root { visibility: hidden; }
body::before { display: none !important; }

h1, h2, h3, h4,
.wordmark, .view-title, .card-title, .drawer-title,
.stat-value, .tile .v, .metric-value, .process-count,
.timing-stat strong, .status-name, .plan-price,
.bill-plan-name, .bill-price-amount, .bill-addon-name,
.bill-group-title, .ai-upsell-title, .trust-hero-title {
  font-family: var(--display) !important;
  letter-spacing: 0 !important;
}

h1, .view-title { font-weight: 600; }
h2, h3, h4, .card-title { font-weight: 600; }
.wordmark { font-weight: 700; }
.stat-value, .tile .v, .metric-value, .process-count,
.timing-stat strong, .plan-price, .bill-price-amount {
  font-variant-numeric: tabular-nums;
}

.brand-mark rect { fill: var(--teal); }
html[data-tenant-brand="confirmed"] .ws-head-mark,
html[data-tenant-brand="confirmed"] .ws-item-avatar {
  background: var(--tenant-brand); border: 1px solid var(--tenant-brand-edge);
}
.card, .stat, .draft-card, .set-capability { border-radius: var(--r-card); }
.card:hover, a.stat:hover, .btn:hover { transform: none; }
.map-loading { background-image: none !important; }

.metric-value { font-size: 2rem !important; line-height: 1.05 !important; }
.process-count { font-size: 1.35rem !important; line-height: 1 !important; }
.timing-stat strong { font-size: 1.55rem !important; line-height: 1 !important; }
.empty-state h2, .error-state h2 { font: 600 1.55rem/1.2 var(--display) !important; }

.free-usage-banner.fu-approaching {
  border-color: var(--attention-edge);
  border-left: 3px solid var(--attention);
}
.topbar .chip-seal {
  font-family: var(--font);
  font-size: 11.5px;
}
.fu-approaching .fu-count {
  color: var(--attention);
  background: var(--attention-wash);
}
.fu-fill.fu-approaching { background: var(--attention); }

/* The one navigation element changes presentation by breakpoint. Reassert the
   desktop segmented rail explicitly so mobile bottom-bar rules can never leak
   into the PC-primary workspace through cascade or generated-sheet ordering. */
@media (min-width: 720px) {
  /* The mobile-first sheet is loaded after the base workspace rules. Restore
     desktop content clearance together with the segmented rail so headings and
     subtitles can never sit underneath the fixed navigation. */
  .view {
    padding-top: calc(var(--safe-top) + var(--topbar-h) + 8px + var(--nav-desktop-h) + 18px) !important;
  }
  /* The demo notice already clears the navigation in normal flow. Do not add
     the full fixed-chrome clearance a second time below it. */
  .demo-banner {
    margin-top: calc(var(--safe-top) + var(--topbar-h) + 8px + var(--nav-desktop-h) + 12px);
  }
  .demo-banner + .view {
    padding-top: 18px !important;
  }
  .tabbar {
    top: calc(var(--safe-top) + var(--topbar-h) + 8px) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: auto !important;
    max-width: none !important;
    height: var(--nav-desktop-h) !important;
    margin: 0 !important;
    padding: 6px !important;
    transform: translateX(-50%) !important;
    border-radius: var(--r-pill) !important;
    background: var(--surface) !important;
  }
  .tabbar > .tab {
    flex: 0 0 auto;
    flex-direction: row;
    min-width: 0;
    min-height: 0;
    padding: 0 18px;
    border-radius: var(--r-pill);
  }
  .tabbar .tab-ico { display: none; }
  .tabbar .tab-pill { border-radius: var(--r-pill); }

  /* The generated base sheet is mobile-first. Reassert the desktop data-plane
     contract here so queue rows, metric grids and controls retain their
     practice-manager density instead of inheriting phone geometry. */
  .practice-name, .brand-sep, .seal-x, .asof { display: initial; }
  .wordmark { display: block; }
  .topbar-right { gap: 10px; flex: none; }
  .topbar .icon-btn, .icon-btn { width: 40px; height: 40px; }
  .chip-seal { min-height: 0; }
  .grid { gap: 16px; }
  .today-stats { gap: 0; }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .queue-row {
    grid-template-columns: minmax(180px, 1.1fr) minmax(0, 1.6fr) auto;
    padding: 10px 20px;
  }
  .q-meta { grid-column: auto; }
  .btn-sm { min-height: 32px; }
  .draft-actions .btn { flex: 0 1 auto; }
  .copy-btn {
    padding: 8px 6px;
    margin: -8px -6px -8px auto;
  }
}

/* The compact command bar lives between the phone shell and the 960px rail.
   Keep that middle state intentionally complete: controls remain touch-sized,
   the workspace retains readable width, and secondary topbar copy collapses
   before it can force either edge off-screen. The same chrome compaction
   protects the first rail widths, where only ~700px remains beside the rail. */
.chip-mode .chip-demo-short { display: none; }

@media (min-width: 720px) and (max-width: 1119px) {
  .topbar-right {
    min-width: 0;
    gap: 6px;
  }
  .topbar .chip-instance {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
    color: var(--ink2);
    background: var(--surface);
    border-color: var(--hair);
  }
  .topbar .chip-instance-text,
  .topbar .asof,
  .topbar .seal-x,
  .topbar .seal-label,
  .topbar .chip-seal #seal-head,
  .topbar .account-name {
    display: none;
  }
  .topbar .chip-seal,
  .topbar .account-chip {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 4px;
  }
  .topbar .ws-switch {
    min-height: 40px;
  }
}

@media (max-width: 719px) {
  .topbar .seal-label { display: none; }
}

@media (min-width: 720px) and (max-width: 959px) {
  :root { --nav-desktop-h: 58px; }

  .topbar {
    gap: 8px;
    padding-inline: 12px;
  }
  .topbar .brand {
    flex: 1 1 auto;
    min-width: 52px;
    overflow: hidden;
  }
  .topbar .ws-switch {
    width: 100%;
    min-width: 44px;
  }
  .topbar .ws-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tabbar > .tab {
    min-height: 44px;
    padding-inline: clamp(10px, 2vw, 18px);
  }
}

/* Active navigation changes must remain readable for every rendered frame.
   Foreground and pill-opacity crossfades briefly produced grey-on-white text;
   switch those two contrast-bearing properties atomically and retain only the
   spatial pill movement. */
.tabbar > .tab { transition: none; }
.tabbar .tab-pill { transition: transform var(--dur) var(--ease-out); }

@media (max-width: 719px) {
  .tabbar {
    border-color: var(--hair-dark);
    background: var(--glass-tint-strong);
    box-shadow: 0 8px 26px rgba(21, 33, 30, .14), 0 1px 3px rgba(21, 33, 30, .08);
  }
  .tabbar > .tab, .tabbar .tab-pill { border-radius: 4px; }
  .metric-value { font-size: 1.75rem !important; }
}

/* Flagship workspace polish. The console stays information-dense, but the
   chrome now communicates place, ownership and hierarchy before status detail. */
@media (min-width: 960px) {
  body .tabbar > .tab {
    justify-content: flex-start;
    gap: 12px;
  }

  body .tabbar .tab-ico {
    display: flex;
    color: currentColor;
  }

  body .tabbar .tab-label {
    font-size: 13.5px;
    font-weight: 600;
  }

  .view-title {
    font-size: 40px;
    line-height: 1.08;
  }

  .today-head {
    margin-bottom: 22px;
  }

  .today-stats {
    border-color: var(--hair-dark);
  }

  .today-stats .stat {
    padding-inline: 17px;
  }

  .today-cols > .card,
  .today-cols > .stack > .card {
    border-color: var(--hair-dark);
  }

  .today-op-columns {
    min-height: 36px;
    background: var(--surface-2);
  }

  .today-op-row {
    min-height: 66px;
  }
}

@media (max-width: 719px) {
  .topbar {
    min-height: calc(56px + var(--safe-top));
    padding-inline: max(10px, var(--safe-left)) max(8px, var(--safe-right));
  }

  .topbar .brand {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .topbar .ws-switch {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    gap: 8px;
  }

  .topbar .ws-name {
    display: block;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .ws-chev {
    display: none;
  }

  .topbar-right {
    flex: 0 0 auto;
    gap: 2px;
  }

  /* DESIGN-v2 §0: demo + seal indicators stay visible at every width.
     Compact forms only - never display:none for chip-mode/chip-seal. */
  .topbar .chip-instance,
  .topbar .asof {
    display: none !important;
  }

  .topbar .chip-mode .chip-demo-full { display: none; }
  .topbar .chip-mode .chip-demo-short { display: inline; }

  .topbar .seal-x,
  .topbar .chip-seal #seal-head {
    display: none;
  }

  .topbar .chip-seal {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 4px;
  }

  .topbar .search-btn,
  .topbar .account-chip {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .view {
    padding-top: calc(var(--safe-top) + var(--topbar-h) + 20px);
  }

  .view-title {
    font-size: 31px;
    line-height: 1.08;
  }

  .today-head {
    margin-bottom: 17px;
  }

  .today-stats,
  .today-cols > .card,
  .today-cols > .stack > .card {
    border-color: var(--hair-dark);
  }

  .set-topbar .brand {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .set-topbar .wordmark {
    line-height: 1.15;
  }

  .set-topbar .set-crumb {
    display: block;
    max-width: calc(100vw - 178px);
    overflow: hidden;
    color: var(--ink2);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar, .tabbar, .set-topbar { background: var(--surface) !important; }
}

@media (forced-colors: active) {
  .brand-mark rect { fill: CanvasText; }
}

/* App support belongs in the existing More sheet at every width. A fixed dock
   can obscure a queue or chart even on a large desktop; the full conversation
   panel still opens from the labelled "Ask Refera support" action. */
#ra-root.ra-support #ra-contact-dock {
  display: none;
}

/* Keep navigation between the console's document-owned tools visually
   continuous. The browser retains normal URLs, history and fail-closed entry
   guards; this only softens the paint handoff. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: refera-view-out 180ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: refera-view-in 260ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes refera-view-out {
  to { opacity: 0; transform: translateY(-3px); }
}

@keyframes refera-view-in {
  from { opacity: 0; transform: translateY(5px); }
}

/* Connection is a single operational journey, not a dashboard of technical
   cards. The primary choice and action stay visually dominant; proof and
   optional permissions remain available one disclosure deeper. */
body[data-page="channels"] .set-main {
  width: min(1040px, 100%);
}

body[data-page="channels"] .view-head {
  max-width: 680px;
  margin-bottom: 30px;
}

body[data-page="channels"] .grid.cols-2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body[data-page="channels"] .m365-lifecycle {
  overflow: clip;
  padding: clamp(22px, 4vw, 38px) clamp(20px, 5vw, 46px) 0;
  border-color: color-mix(in srgb, var(--teal) 23%, var(--hair));
  border-top: 3px solid var(--teal);
  background: var(--surface);
  box-shadow: 0 30px 80px -58px color-mix(in srgb, var(--ink) 72%, transparent);
}

body[data-page="channels"] .m365-heading {
  align-items: flex-start;
}

body[data-page="channels"] .m365-title-group {
  gap: 1px;
}

body[data-page="channels"] .m365-eyebrow {
  margin: 0;
  color: var(--teal-2);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="channels"] .m365-heading .status-name {
  font-size: 28px;
  line-height: 1.1;
}

body[data-page="channels"] .m365-lifecycle > .status-detail {
  max-width: 66ch;
  margin-top: 18px;
  color: var(--ink2);
  font-size: 15px;
}

body[data-page="channels"] .m365-mailbox {
  margin-top: 4px;
  font-size: 13px;
}

body[data-page="channels"] .m365-lifecycle > .set-connection-actions {
  margin: 26px clamp(-46px, -5vw, -20px) 0;
  padding: 24px clamp(20px, 5vw, 46px);
  background: color-mix(in srgb, var(--teal) 5%, var(--paper));
}

body[data-page="channels"] .m365-lifecycle > .set-connection-actions.m365-compact-actions {
  margin-top: 8px;
  padding-block: 0;
  background: transparent;
}

body[data-page="channels"] .m365-mailbox-chooser {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-width: 760px;
}

body[data-page="channels"] .m365-mailbox-chooser label strong {
  font-size: 15px;
}

body[data-page="channels"] .m365-mailbox-chooser label span,
body[data-page="channels"] .m365-mailbox-chooser .hint {
  font-size: 13px;
}

body[data-page="channels"] .m365-mailbox-input {
  min-height: 50px;
  border-color: var(--hair-dark);
  background: var(--surface);
  font-size: 15px;
}

body[data-page="channels"] .m365-actions {
  margin-top: 18px;
}

body[data-page="channels"] .m365-actions .btn-primary {
  min-height: 48px;
  padding-inline: 22px;
}

body[data-page="channels"] .m365-safety-summary {
  gap: 10px 24px;
  margin: 20px 0 24px;
  font-size: 13px;
}

body[data-page="channels"] .set-connection-detail > summary {
  position: relative;
  min-height: 70px;
  padding-right: 28px;
}

body[data-page="channels"] .set-connection-detail > summary::after {
  position: absolute;
  right: 3px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink3);
  border-bottom: 1.5px solid var(--ink3);
  content: "";
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

body[data-page="channels"] .set-connection-detail[open] > summary::after {
  transform: rotate(225deg);
}

body[data-page="channels"] .m365-status {
  border-color: color-mix(in srgb, var(--m365-status) 34%, var(--hair));
  background: color-mix(in srgb, var(--m365-status) 7%, var(--surface));
}

body[data-page="channels"] .grid.cols-2 > .status-card:not(.m365-lifecycle) {
  min-height: 0;
  padding: 18px 20px;
  border-radius: 7px;
  box-shadow: none;
}

body[data-page="channels"] .grid.cols-2 > .status-card:not(.m365-lifecycle) .status-detail {
  margin-bottom: 0;
}

body[data-page="channels"] .grid.cols-2 > .status-card:not(.m365-lifecycle) .status-meta {
  margin-top: 2px;
}

body[data-page="channels"] :is(
  .set-disclosure-copy strong, .set-disclosure-copy span,
  .set-disclosure-action,
  .m365-state-grid dt, .m365-state-grid dd,
  .m365-permissions .status-detail, .m365-permissions .status-meta
) {
  font-size: max(13px, .8125rem);
}

@media (max-width: 720px) {
  body[data-page="channels"] .m365-lifecycle {
    padding: 22px 18px 0;
  }

  body[data-page="channels"] .m365-lifecycle > .set-connection-actions {
    margin-inline: -18px;
    padding-inline: 18px;
  }

  body[data-page="channels"] .m365-heading {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
  }

  body[data-page="channels"] .m365-status {
    grid-column: 2;
    margin: 8px 0 0;
  }

  body[data-page="channels"] .m365-mailbox-chooser {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}

/* Explicit device preference for reception staff who need larger operational
   copy without changing browser zoom. Small labels rise to a 14px floor while
   fixed board, toolbar and mobile-navigation dimensions remain stable. */
html[data-text-size="large"] body {
  font-size: 16px;
  line-height: 1.55;
}

html[data-text-size="large"] :is(
  button, input, select, textarea, td, th, label,
  .hint, .section-label, .chip, .meta, .mono, .nav-label,
  .eyebrow, .kicker, .card-sub, .view-sub, .foot-line
) {
  font-size: max(.875rem, 14px);
}