/* ==========================================================================
   UnitMailer design system
   --------------------------------------------------------------------------
   Implements the approved Claude Design direction: a warm light ground, white
   surfaces, a muted navy accent and a calm premium B2B character.

   Every token here is taken from the approved prototype (UnitMailer.dc.html),
   not invented. The prototype expresses them as repeated inline styles; this
   file is the same system stated once.

   Nothing loads from a CDN. Fonts are self-hosted in /static/fonts, so a
   self-hosted installation with no outbound internet access renders exactly
   the same as one with it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts. Latin1 carries ASCII and the common accents; Latin2 carries Latin
   Extended-A, which is where Polish ą ć ę ł ń ś ź ż live. A build that ships
   only Latin1 renders Polish text in a fallback face, so both are required.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-Regular-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-Medium-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-SemiBold-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-Bold-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-Bold-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-Regular-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-Medium-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
    U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground and surfaces */
  --um-ground: #F5F4F1;
  --um-surface: #FFFFFF;
  --um-surface-2: #FAFAF8;
  --um-surface-3: #FCFBF9;
  --um-rail: #EFEEEA;
  --um-fill: #EDECE8;
  --um-fill-2: #F2F1ED;

  /* Lines */
  --um-line: #E2E1DC;
  --um-line-soft: #EDECE8;
  --um-line-strong: #D3D2CD;
  --um-line-stronger: #C9C8C3;

  /* Ink */
  --um-ink: #16191C;
  --um-ink-2: #4B5158;
  --um-muted: #6B7076;
  --um-faint: #8A9096;
  --um-fainter: #A0A6AC;
  --um-glyph: #7C848C;

  /* Accent */
  --um-accent: #23508E;
  --um-accent-deep: #1D4478;
  --um-accent-deeper: #173A6B;
  --um-accent-tint: #EAF0F8;
  --um-accent-line: #C6D5EA;
  --um-accent-wash: #FAFCFF;

  /* Status: READY */
  --um-ready-ink: #10543C;
  --um-ready-ink-deep: #0F4A35;
  --um-ready-solid: #16694C;
  --um-ready-tint: #E6F2EC;
  --um-ready-line: #BFDDD0;

  /* Status: WARNING */
  --um-warn-ink: #8A5A00;
  --um-warn-ink-deep: #7A5000;
  --um-warn-tint: #FBF1DE;
  --um-warn-line: #E4D3AC;
  --um-warn-wash: #FFFDF6;
  --um-warn-chip: #F6ECD3;

  /* Status: BLOCKED */
  --um-block-ink: #8A2318;
  --um-block-solid: #A32B1E;
  --um-block-tint: #FAEAE7;
  --um-block-line: #EBC4BE;
  --um-block-wash: #FDF5F3;

  /* Status: UNKNOWN. Deliberately its own hue, never folded into an error. */
  --um-unknown-ink: #4E4193;
  --um-unknown-ink-deep: #3B3175;
  --um-unknown-tint: #EEEBF7;
  --um-unknown-line: #CFC8EA;

  /* Elevation */
  --um-shadow-1: 0 1px 2px rgba(20, 25, 30, .04);
  --um-shadow-2: 0 1px 2px rgba(20, 25, 30, .05);
  --um-shadow-3: 0 2px 6px rgba(20, 25, 30, .06);
  --um-shadow-pop: 0 10px 30px rgba(20, 25, 30, .12);

  /* Radii */
  --um-r-xs: 4px;
  --um-r-sm: 6px;
  --um-r-md: 8px;
  --um-r-lg: 12px;
  --um-r-pill: 99px;

  /* Type scale */
  --um-fs-micro: 10px;
  --um-fs-label: 11px;
  --um-fs-sm: 12px;
  --um-fs-base: 13px;
  --um-fs-md: 14px;
  --um-fs-lg: 15px;
  --um-fs-h4: 17px;
  --um-fs-h3: 19px;
  --um-fs-h2: 22px;
  --um-fs-h1: 26px;
  --um-fs-display: 30px;

  --um-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --um-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --um-rail-w: 254px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--um-ground);
  color: var(--um-ink);
  font-family: var(--um-sans);
  font-size: var(--um-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--um-accent); text-decoration: none; }
a:hover { color: var(--um-accent-deeper); text-decoration: underline; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* A visible focus ring is a requirement, not a preference: keyboard operation
   of the wizard and the calendar is unusable without it. */
:focus-visible {
  outline: 2px solid var(--um-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -.2px; }

.um-h1 { font-size: var(--um-fs-h1); letter-spacing: -.5px; }
.um-h2 { font-size: var(--um-fs-h2); letter-spacing: -.4px; }
.um-h3 { font-size: var(--um-fs-h3); letter-spacing: -.3px; }
.um-h4 { font-size: var(--um-fs-h4); letter-spacing: -.2px; }

.um-mono { font-family: var(--um-mono); }
.um-num { font-variant-numeric: tabular-nums; }

.um-muted { color: var(--um-muted); }
.um-faint { color: var(--um-faint); }
.um-sm { font-size: var(--um-fs-sm); }
.um-label {
  font-size: var(--um-fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--um-faint);
  text-transform: uppercase;
}

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

.um-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--um-surface);
  border: 1px solid var(--um-accent);
  border-radius: var(--um-r-md);
  font-weight: 600;
}
.um-skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Application shell
   -------------------------------------------------------------------------- */
.um-shell { display: flex; min-height: 100vh; align-items: stretch; }

.um-rail {
  width: var(--um-rail-w);
  flex: 0 0 var(--um-rail-w);
  background: var(--um-rail);
  border-right: 1px solid var(--um-line);
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.um-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 0;
  color: var(--um-ink);
}
.um-brand:hover { text-decoration: none; color: var(--um-ink); }
.um-brand-mark {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  display: block;
  object-fit: contain;
}
.um-brand-name { font-size: var(--um-fs-lg); font-weight: 600; letter-spacing: -.2px; }

.um-nav { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.um-nav-group { display: flex; flex-direction: column; gap: 2px; }
.um-nav-group-label {
  font-size: var(--um-fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--um-faint);
  padding: 0 10px 6px;
}

.um-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--um-r-md);
  font-size: var(--um-fs-md);
  font-weight: 500;
  color: var(--um-ink);
  cursor: pointer;
  text-align: left;
}
.um-nav-item:hover { background: rgba(255, 255, 255, .55); text-decoration: none; color: var(--um-ink); }
.um-nav-item > * { position: relative; }

.um-nav-item[aria-current="page"] {
  background: var(--um-surface);
  border: 1px solid var(--um-line);
  box-shadow: var(--um-shadow-2);
  padding: 8px 9px;
}
.um-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -10px; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--um-accent);
}

/* The three nav glyph shapes double as a non-colour distinction between the
   nav groups, which matters at the smallest text size. */
.um-nav-glyph { width: 8px; height: 8px; background: var(--um-glyph); flex: 0 0 8px; }
.um-nav-glyph--square { border-radius: 2px; }
.um-nav-glyph--round { border-radius: 50%; }
.um-nav-glyph--diamond { transform: rotate(45deg); }

.um-nav-label { flex: 1; }
.um-nav-count { font-size: var(--um-fs-sm); font-variant-numeric: tabular-nums; color: var(--um-muted); }

.um-rail-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--um-line); padding-top: 14px; }

.um-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.um-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: rgba(245, 244, 241, .9);
  border-bottom: 1px solid var(--um-line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}
.um-topbar-spacer { flex: 1; min-width: 0; }
.um-topbar-rule { width: 1px; height: 26px; background: var(--um-line); flex: 0 0 1px; }

.um-user { display: flex; align-items: center; gap: 9px; }
.um-avatar {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: #DCD9D2;
  color: var(--um-ink-2);
  font-size: var(--um-fs-label);
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.um-rail-version {
  padding: 8px 10px 0;
  font-size: var(--um-fs-micro);
  color: var(--um-fainter);
  font-variant-numeric: tabular-nums;
}

.um-content { padding: 24px 26px 48px; display: flex; flex-direction: column; gap: 20px; }
.um-content--narrow { max-width: 960px; }

.um-page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.um-page-head-text { flex: 1; min-width: 260px; }
.um-page-head p { margin: 6px 0 0; font-size: var(--um-fs-md); color: var(--um-muted); }

/* --------------------------------------------------------------------------
   Workspace switcher
   -------------------------------------------------------------------------- */
.um-ws { position: relative; flex: 0 0 auto; }
.um-ws-button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 8px;
  background: var(--um-surface);
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-md);
  font-size: var(--um-fs-base);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.um-ws-button:hover { border-color: var(--um-line-strong); }
.um-ws-chip {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border-radius: 5px;
  background: var(--um-accent);
  color: #fff;
  font-size: var(--um-fs-micro);
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.um-ws-text { display: flex; flex-direction: column; line-height: 1.2; }
.um-ws-name { font-size: var(--um-fs-base); font-weight: 600; white-space: nowrap; }
.um-ws-sub { font-size: var(--um-fs-micro); color: var(--um-muted); white-space: nowrap; }
.um-caret {
  width: 6px; height: 6px;
  flex: 0 0 6px;
  border-right: 1.5px solid var(--um-faint);
  border-bottom: 1.5px solid var(--um-faint);
  transform: rotate(45deg);
  margin: -4px 0 0 4px;
}
.um-ws-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--um-accent); flex: 0 0 8px; }
.um-ws-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: var(--um-surface);
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-lg);
  box-shadow: var(--um-shadow-pop);
  padding: 6px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.um-ws-menu[hidden] { display: none; }
.um-ws-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--um-r-sm);
  background: transparent;
  font-size: var(--um-fs-base);
  text-align: left;
  cursor: pointer;
  color: var(--um-ink);
  width: 100%;
}
.um-ws-option:hover { background: var(--um-fill-2); text-decoration: none; color: var(--um-ink); }
.um-ws-option[aria-current="true"] { background: var(--um-accent-tint); font-weight: 600; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.um-card {
  background: var(--um-surface);
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-lg);
  box-shadow: var(--um-shadow-1);
  overflow: hidden;
}
.um-card--flush { overflow: visible; }
.um-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--um-line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}
.um-card-title { font-size: var(--um-fs-lg); font-weight: 600; }
.um-card-sub { font-size: var(--um-fs-sm); color: var(--um-muted); margin-top: 2px; }
.um-card-body { padding: 18px 20px; }
.um-card-foot {
  padding: 13px 20px;
  background: var(--um-surface-2);
  border-top: 1px solid var(--um-line-soft);
  font-size: var(--um-fs-sm);
  color: var(--um-muted);
}

.um-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.um-grid > .um-card { flex: 1 1 300px; min-width: 280px; }
/* Two cards that belong side by side and wrap together, rather than three
   across at an accidental width. */
.um-grid--halves > .um-card { flex: 1 1 380px; }

/* A colour, shown beside its value and never instead of it. */
.um-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: var(--um-r-xs);
  border: 1px solid var(--um-line);
  vertical-align: -2px;
  margin-right: 6px;
}

.um-nowrap { white-space: nowrap; }

/* A diagnostic and the buttons that run it, on one line until there is no room. */
.um-test-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--um-line-soft);
}
.um-test-group:first-child { border-top: 0; }

/* A form that sits inline in a table cell: an input and its button. */
.um-inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.um-input--sm { padding: 5px 9px; font-size: var(--um-fs-sm); min-height: 28px; width: auto; min-width: 150px; }

/* Statistic tiles */
.um-stat { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.um-stat-label { font-size: var(--um-fs-sm); color: var(--um-muted); }
.um-stat-value {
  font-size: var(--um-fs-h2);
  font-weight: 600;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
}
.um-stat-value--lg { font-size: var(--um-fs-display); letter-spacing: -1px; }
.um-stat-row { display: flex; flex-wrap: wrap; }
.um-stat-row > .um-stat { flex: 1 1 25%; min-width: 140px; border-right: 1px solid var(--um-line-soft); }
.um-stat-row > .um-stat:last-child { border-right: 0; }

.um-stack { display: flex; flex-direction: column; gap: 14px; }

/* A small capitalised label above a card's headline, carrying the card's
   status. Colour plus a shape plus the word, like every other status. */
.um-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--um-fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--um-muted);
}
.um-eyebrow--ready { color: var(--um-ready-ink); }
.um-eyebrow--warning { color: var(--um-warn-ink); }
.um-eyebrow--blocked { color: var(--um-block-ink); }
.um-eyebrow--unknown { color: var(--um-unknown-ink); }
.um-eyebrow--accent { color: var(--um-accent-deep); }

/* Label/value pairs inside a card. */
.um-facts { margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: var(--um-fs-base); }
.um-facts > div { display: flex; justify-content: space-between; gap: 12px; }
.um-facts dt { color: var(--um-muted); }
.um-facts dd { margin: 0; font-weight: 500; text-align: right; }

/* Readiness checklist */
.um-checklist { display: flex; flex-wrap: wrap; }
.um-checklist-item {
  flex: 1 1 50%;
  min-width: 200px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--um-line-soft);
  border-right: 1px solid var(--um-line-soft);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.um-checklist-item:nth-child(even) { border-right: 0; }
.um-checklist-title { display: block; font-size: var(--um-fs-base); font-weight: 500; }
.um-checklist-detail { display: block; font-size: var(--um-fs-label); color: var(--um-muted); }
.um-check-mark {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--um-fs-label);
  margin-top: 1px;
}
.um-check-mark--ready { background: var(--um-ready-tint); color: var(--um-ready-ink); }
.um-check-mark--warning { background: var(--um-warn-tint); color: var(--um-warn-ink); }
.um-check-mark--blocked { background: var(--um-block-tint); color: var(--um-block-ink); }
.um-check-mark--unknown { background: var(--um-unknown-tint); color: var(--um-unknown-ink); }
.um-check-mark--neutral { background: var(--um-fill); color: var(--um-muted); }

/* Agenda: the list form of the calendar, used on the dashboard and on phones. */
.um-agenda { display: flex; flex-direction: column; }
.um-agenda-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--um-line-soft);
  color: var(--um-ink);
}
.um-agenda-row:last-child { border-bottom: 0; }
.um-agenda-row:hover { background: var(--um-surface-3); text-decoration: none; color: var(--um-ink); }
.um-agenda-day {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.um-agenda-num { font-size: var(--um-fs-h4); font-weight: 600; font-variant-numeric: tabular-nums; }
.um-agenda-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.um-agenda-title { font-size: var(--um-fs-md); font-weight: 600; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.um-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--um-line-strong);
  background: var(--um-surface);
  color: var(--um-ink);
  font-size: var(--um-fs-base);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  min-height: 34px;
}
.um-btn:hover { border-color: var(--um-line-stronger); background: var(--um-surface-2); text-decoration: none; color: var(--um-ink); }
.um-btn:disabled, .um-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  background: var(--um-fill-2);
}

.um-btn--primary {
  background: var(--um-accent);
  border-color: var(--um-accent);
  color: #fff;
  font-weight: 600;
}
.um-btn--primary:hover { background: var(--um-accent-deep); border-color: var(--um-accent-deep); color: #fff; }
.um-btn--primary:disabled, .um-btn--primary[aria-disabled="true"] {
  background: var(--um-line-strong);
  border-color: var(--um-line-strong);
  color: var(--um-surface);
}

.um-btn--quiet { border-color: transparent; background: transparent; }
.um-btn--quiet:hover { background: var(--um-fill-2); border-color: transparent; }

.um-btn--danger { color: var(--um-block-ink); border-color: var(--um-block-line); background: var(--um-block-tint); font-weight: 600; }
.um-btn--danger:hover { background: var(--um-block-wash); border-color: var(--um-block-line); color: var(--um-block-ink); }

.um-btn--unknown { color: var(--um-unknown-ink-deep); border-color: var(--um-unknown-line); background: var(--um-unknown-tint); font-weight: 600; }
.um-btn--unknown:hover { background: #fff; border-color: var(--um-unknown-line); color: var(--um-unknown-ink-deep); }

.um-btn--sm { padding: 5px 10px; font-size: var(--um-fs-sm); min-height: 28px; border-radius: var(--um-r-sm); }
.um-btn--lg { padding: 11px 20px; font-size: var(--um-fs-md); min-height: 42px; }
.um-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.um-field { display: flex; flex-direction: column; gap: 6px; }
.um-field-label { font-size: var(--um-fs-sm); font-weight: 600; color: var(--um-ink-2); }
.um-field-hint { font-size: var(--um-fs-sm); color: var(--um-muted); }
.um-field-error { font-size: var(--um-fs-sm); color: var(--um-block-ink); font-weight: 500; }

.um-input, .um-select, .um-textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--um-surface);
  border: 1px solid var(--um-line-strong);
  border-radius: 7px;
  font-size: var(--um-fs-base);
  color: var(--um-ink);
  min-height: 36px;
}
.um-input:hover, .um-select:hover, .um-textarea:hover { border-color: var(--um-line-stronger); }
.um-input:focus, .um-select:focus, .um-textarea:focus {
  outline: 2px solid var(--um-accent);
  outline-offset: 1px;
  border-color: var(--um-accent);
}
.um-input[aria-invalid="true"], .um-select[aria-invalid="true"], .um-textarea[aria-invalid="true"] {
  border-color: var(--um-block-line);
  background: var(--um-block-wash);
}
.um-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.um-textarea--code { font-family: var(--um-mono); font-size: var(--um-fs-sm); }

.um-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.um-form-row > .um-field { flex: 1 1 220px; min-width: 180px; }

.um-check { display: flex; align-items: center; gap: 9px; font-size: var(--um-fs-base); cursor: pointer; }
.um-check input { width: 16px; height: 16px; accent-color: var(--um-accent); cursor: pointer; }

/* A choice in a list of mutually exclusive options. The whole row is the
   target, which matters most on a phone. */
.um-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--um-line-soft);
  cursor: pointer;
}
.um-choice:last-child { border-bottom: 0; }
.um-choice:hover { background: var(--um-surface-3); }
.um-choice input[type="radio"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--um-accent); }
.um-choice:has(input:checked) { background: var(--um-accent-wash); }
.um-choice:has(input:focus-visible) { outline: 2px solid var(--um-accent); outline-offset: -2px; }
.um-choice-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.um-choice-title { font-size: var(--um-fs-md); font-weight: 600; }
.um-choice-detail { font-size: var(--um-fs-base); color: var(--um-muted); }
.um-choice--disabled { cursor: default; opacity: .7; background: var(--um-surface-2); }
.um-choice--disabled:hover { background: var(--um-surface-2); }

/* A numbered list of remaining setup work. */
.um-steplist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.um-steplist li { display: flex; gap: 11px; align-items: flex-start; }
.um-steplist--done { opacity: .65; }

/* Day toggles for the schedule step */
.um-daypick { display: flex; gap: 6px; flex-wrap: wrap; }
.um-daypick label {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--um-line-strong);
  border-radius: 7px;
  background: var(--um-surface);
  font-size: var(--um-fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.um-daypick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.um-daypick input:checked + span { color: var(--um-accent-deep); }
.um-daypick label:has(input:checked) {
  background: var(--um-accent-tint);
  border-color: var(--um-accent-line);
  font-weight: 600;
}
.um-daypick label:has(input:focus-visible) { outline: 2px solid var(--um-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Status. Every status carries colour AND a shape/glyph AND a word, so it
   survives greyscale printing, colour blindness and a screen reader.
   -------------------------------------------------------------------------- */
.um-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--um-r-sm);
  border: 1px solid var(--um-line-strong);
  background: var(--um-fill-2);
  font-size: var(--um-fs-sm);
  font-weight: 600;
  color: var(--um-ink-2);
  white-space: nowrap;
}
.um-status--pill { border-radius: var(--um-r-pill); padding: 5px 10px; }

.um-status-glyph { flex: 0 0 auto; font-size: var(--um-fs-sm); line-height: 1; }

.um-status--ready { background: var(--um-ready-tint); border-color: var(--um-ready-line); color: var(--um-ready-ink); }
.um-status--warning { background: var(--um-warn-tint); border-color: var(--um-warn-line); color: var(--um-warn-ink); }
.um-status--blocked { background: var(--um-block-tint); border-color: var(--um-block-line); color: var(--um-block-ink); }
.um-status--unknown { background: var(--um-unknown-tint); border-color: var(--um-unknown-line); color: var(--um-unknown-ink); }
.um-status--neutral { background: var(--um-fill-2); border-color: var(--um-line-strong); color: var(--um-muted); }
.um-status--accent { background: var(--um-accent-tint); border-color: var(--um-accent-line); color: var(--um-accent-deep); }

/* Small leading marker used in lists and legends. Shape differs per status. */
.um-dot { width: 9px; height: 9px; flex: 0 0 9px; display: inline-block; }
.um-dot--ready { background: var(--um-ready-solid); border-radius: 50%; }
.um-dot--warning { background: var(--um-warn-ink); border-radius: 2px; }
.um-dot--blocked { background: var(--um-block-solid); transform: rotate(45deg); }
.um-dot--unknown { border: 2px solid var(--um-unknown-ink); border-radius: 50%; background: transparent; }
.um-dot--accent { background: var(--um-accent); border-radius: 2px; }
.um-dot--neutral { background: var(--um-glyph); border-radius: 2px; }

/* Callouts */
.um-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--um-line);
  border-left: 3px solid var(--um-glyph);
  border-radius: 10px;
  background: var(--um-surface-2);
  font-size: var(--um-fs-base);
  line-height: 1.55;
}
.um-note--ready { background: var(--um-ready-tint); border-color: var(--um-ready-line); border-left-color: var(--um-ready-solid); color: var(--um-ready-ink-deep); }
.um-note--warning { background: var(--um-warn-wash); border-color: var(--um-warn-line); border-left-color: var(--um-warn-ink); color: var(--um-warn-ink-deep); }
.um-note--blocked { background: var(--um-block-wash); border-color: var(--um-block-line); border-left-color: var(--um-block-solid); color: var(--um-block-ink); }
.um-note--unknown { background: var(--um-unknown-tint); border-color: var(--um-unknown-line); border-left-color: var(--um-unknown-ink); color: var(--um-unknown-ink-deep); }
.um-note--accent { background: var(--um-accent-wash); border-color: var(--um-accent-line); border-left-color: var(--um-accent); }
.um-note-title { font-weight: 600; }

/* --------------------------------------------------------------------------
   Toolbar and filter chips
   -------------------------------------------------------------------------- */
.um-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.um-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.um-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--um-line-strong);
  border-radius: var(--um-r-pill);
  background: var(--um-surface);
  font-size: var(--um-fs-sm);
  font-weight: 500;
  color: var(--um-ink-2);
  min-height: 32px;
}
.um-chip:hover { border-color: var(--um-line-stronger); text-decoration: none; color: var(--um-ink); }
.um-chip--on {
  background: var(--um-accent-tint);
  border-color: var(--um-accent-line);
  color: var(--um-accent-deep);
  font-weight: 600;
}
.um-chip-count { font-variant-numeric: tabular-nums; color: var(--um-muted); }
.um-chip--on .um-chip-count { color: var(--um-accent-deep); }

.um-input--search { width: auto; min-width: 200px; max-width: 320px; }
/* Fields whose value is machine-shaped -- a slug, a domain, an address, a hex
   colour -- where a fixed pitch makes a typo visible. */
.um-input--mono { font-family: var(--um-mono); }

.um-blocked-text { color: var(--um-block-ink); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
/* A table wide enough to need it scrolls inside its own box, never taking the
   page with it. This is the default and the right answer for secondary and
   diagnostic tables.
   `--responsive` is the other answer: below the phone breakpoint the table is
   replaced by the sibling `.um-cards` list. It is only correct where that
   sibling exists -- without one the table simply disappears -- so it belongs
   to the few screens that carry a card layout as well. */
.um-table-wrap { width: 100%; overflow-x: auto; }
.um-table-wrap--scroll { max-height: 420px; overflow: auto; }
/* A compact table for raw data: file previews, rejected rows, log lines. */
.um-table--dense th, .um-table--dense td { padding: 6px 10px; font-size: var(--um-fs-sm); }
.um-table { width: 100%; border-collapse: collapse; font-size: var(--um-fs-base); }
.um-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--um-surface-2);
  border-bottom: 1px solid var(--um-line);
  font-size: var(--um-fs-sm);
  font-weight: 600;
  color: var(--um-muted);
  white-space: nowrap;
}
.um-table td { padding: 12px 14px; border-bottom: 1px solid var(--um-line-soft); vertical-align: middle; }
.um-table tr:last-child td { border-bottom: 0; }
.um-table tbody tr:hover { background: var(--um-surface-3); }
.um-table .um-num, .um-table .um-right { text-align: right; font-variant-numeric: tabular-nums; }
.um-table-primary { font-weight: 600; color: var(--um-ink); }
.um-table-secondary { font-size: var(--um-fs-sm); color: var(--um-muted); margin-top: 2px; }

/* Facts laid out inline under a page heading. */
.um-inline-facts {
  margin: 10px 0 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: var(--um-fs-base);
}
.um-inline-facts > div { display: flex; gap: 7px; align-items: baseline; }
.um-inline-facts dt { color: var(--um-muted); }
.um-inline-facts dd { margin: 0; font-weight: 500; }

.um-card--unknown { border-color: var(--um-unknown-line); border-left: 3px solid var(--um-unknown-ink); }

.um-plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.um-plain-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 9px 0;
  border-top: 1px solid var(--um-line-soft);
}

/* Sign-in. The only screen without the rail, so it centres against the viewport
   itself rather than against the content column the shell would otherwise
   impose. `place-items` does both axes at once; the previous `margin: 8vh auto`
   only looked centred at one window height and was never centred vertically at
   any of them. `dvh` first, with `vh` behind it for engines that lack it. */
.um-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* An explicit width, not `max-width` with automatic side margins.
   Inside a flex or grid parent those margins switch off stretching, so the
   card sized itself to the width of its own text -- 238px of it, at every
   viewport, whatever the max-width said. `min()` keeps the phone case in the
   same declaration: 400px where there is room, otherwise the width the padding
   above leaves behind. */
.um-login { width: min(400px, 100%); }
.um-login .um-card-body { padding: 28px 26px; gap: 24px; }
.um-login-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.um-login-head h1 { margin: 0; }
.um-login-head p { margin: 0; }
/* Mark + wordmark, centred, the same lockup the sidebar uses at a larger size. */
.um-login-head .um-login-logo {
  margin: 4px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.3px;
  line-height: 1;
  color: var(--um-ink);
}
.um-login-logo img {
  display: block;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 6px 14px rgba(11, 18, 32, .22));
}
.um-login-logo-accent { color: var(--um-accent); }

/* The form's own rhythm. `.um-stack` spaces the card's sections; these are the
   fields inside one of them. */
.um-login .um-form { display: flex; flex-direction: column; gap: 18px; }
.um-login .um-field { gap: 7px; }
.um-login .um-field-label { font-size: var(--um-fs-md); }
.um-login .um-input { min-height: 44px; padding: 12px 14px; font-size: var(--um-fs-md); }
.um-login .um-btn { min-height: 44px; padding: 12px 16px; font-size: var(--um-fs-md); }

/* Chromium paints its own background over an autofilled field, which left the
   two most prominent inputs on the product's first screen looking like a
   different design. The inset shadow is the only way to restore the surface
   colour; the focus ring is an `outline` here, so nothing is lost by setting a
   shadow. */
.um-login .um-input:-webkit-autofill,
.um-login .um-input:-webkit-autofill:hover,
.um-login .um-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--um-ink);
  -webkit-box-shadow: 0 0 0 100px var(--um-surface) inset;
  box-shadow: 0 0 0 100px var(--um-surface) inset;
  caret-color: var(--um-ink);
  border-color: var(--um-line-strong);
}
.um-login .um-input:-webkit-autofill:focus { border-color: var(--um-accent); }

.um-btn--block { width: 100%; justify-content: center; }

/* The first-run checklist. Numbered while a step is outstanding and ticked
   once it is done, so the list doubles as a place-marker. */
.um-steps-list { list-style: none; margin: 0; padding: 0; counter-reset: um-step; }
.um-step-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--um-line-soft);
}
.um-step-row:first-child { border-top: 0; }
.um-step-row--done { background: var(--um-surface-2); }
.um-step-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
@media (max-width: 879px) {
  .um-step-row { flex-wrap: wrap; }
  .um-step-row .um-btn { width: 100%; }
}

/* File paths, JSON blobs and other strings with no spaces to break at. Without
   this they force a table wider than the viewport, which is how a diagnostic
   screen ends up scrolling sideways on a phone. */
.um-break { overflow-wrap: anywhere; word-break: break-word; }

/* A list of destinations, each with a sentence saying what it is for. Used by
   system administration, where the old panel offered nine bare menu labels and
   left an operator to remember which was which. */
.um-link-list { list-style: none; margin: 0; padding: 0 20px 6px; }
.um-link-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 0;
  border-top: 1px solid var(--um-line-soft);
}
.um-link-list li:first-child { border-top: 0; }
.um-link-list a { font-weight: 500; }

.um-details {
  background: var(--um-surface);
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-lg);
  box-shadow: var(--um-shadow-1);
  padding: 0;
}
.um-details > summary {
  padding: 14px 20px;
  cursor: pointer;
  font-size: var(--um-fs-base);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.um-details[open] > summary { border-bottom: 1px solid var(--um-line-soft); }
.um-facts--tech { padding: 16px 20px; }
.um-facts--tech dt { font-family: var(--um-mono); font-size: var(--um-fs-sm); }

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */
.um-meter { display: flex; height: 8px; border-radius: var(--um-r-pill); overflow: hidden; background: var(--um-fill); }
.um-meter span { display: block; }
.um-meter-accent { background: var(--um-accent); }
.um-meter-warn { background: var(--um-warn-ink); }
.um-meter-block { background: var(--um-block-solid); }
.um-meter-ready { background: var(--um-ready-solid); }
.um-meter-unknown { background: var(--um-unknown-ink); }

.um-legend { display: flex; flex-direction: column; gap: 9px; font-size: var(--um-fs-base); }
.um-legend-row { display: flex; align-items: center; gap: 9px; }
.um-legend-row .um-legend-label { flex: 1; }
.um-legend-row .um-legend-value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Wizard stepper
   -------------------------------------------------------------------------- */
.um-wizard { display: flex; flex-direction: column; min-height: 100vh; background: var(--um-ground); }
.um-wizard-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 26px;
  background: var(--um-surface);
  border-bottom: 1px solid var(--um-line);
}
.um-wizard-body { flex: 1; padding: 26px; display: flex; flex-direction: column; gap: 20px; }
.um-wizard-inner { width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.um-wizard-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--um-surface);
  border-top: 1px solid var(--um-line);
}

.um-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.um-step { display: flex; align-items: center; gap: 4px; }
.um-step-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--um-r-md);
  background: transparent;
  font-size: var(--um-fs-base);
  font-weight: 500;
  color: var(--um-muted);
  cursor: pointer;
}
.um-step-link:hover:not([aria-disabled="true"]) { background: var(--um-fill-2); text-decoration: none; color: var(--um-ink); }
.um-step-link[aria-disabled="true"] { cursor: not-allowed; color: var(--um-fainter); }
.um-step-num {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  border: 1px solid var(--um-line-strong);
  background: var(--um-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--um-fs-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.um-step--current .um-step-link { color: var(--um-ink); font-weight: 600; background: var(--um-accent-tint); }
.um-step--current .um-step-num { background: var(--um-accent); border-color: var(--um-accent); color: #fff; }
.um-step--done .um-step-num { background: var(--um-ready-tint); border-color: var(--um-ready-line); color: var(--um-ready-ink); }
.um-step--done .um-step-link { color: var(--um-ink-2); }
.um-step-sep { width: 14px; height: 1px; background: var(--um-line-strong); flex: 0 0 14px; }

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */
.um-cal { background: var(--um-surface); border: 1px solid var(--um-line); border-radius: var(--um-r-lg); overflow: hidden; box-shadow: var(--um-shadow-1); }
.um-cal-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--um-line-soft); flex-wrap: wrap; }
.um-cal-title { font-size: var(--um-fs-h4); font-weight: 600; letter-spacing: -.2px; }

.um-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--um-surface-2); border-bottom: 1px solid var(--um-line-soft); }
.um-cal-dow span { padding: 8px 10px; font-size: var(--um-fs-label); font-weight: 600; letter-spacing: .06em; color: var(--um-faint); text-transform: uppercase; }

.um-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.um-cal-cell {
  min-height: 108px;
  border-right: 1px solid var(--um-line-soft);
  border-bottom: 1px solid var(--um-line-soft);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--um-surface);
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.um-cal-cell:nth-child(7n) { border-right: 0; }
.um-cal-cell:hover { background: var(--um-surface-3); }
.um-cal-cell--dim { background: var(--um-surface-2); color: var(--um-fainter); }
.um-cal-cell--weekend { background: var(--um-surface-2); }
.um-cal-daynum { font-size: var(--um-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--um-muted); }
.um-cal-cell--today .um-cal-daynum {
  background: var(--um-accent);
  color: #fff;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}

.um-cal-event {
  display: block;
  width: 100%;
  padding: 5px 7px;
  border-radius: var(--um-r-sm);
  border: 1px solid var(--um-line);
  border-left: 3px solid var(--um-glyph);
  background: var(--um-fill-2);
  font-size: var(--um-fs-label);
  line-height: 1.35;
  text-align: left;
  color: var(--um-ink);
}
.um-cal-event:hover { text-decoration: none; box-shadow: var(--um-shadow-2); }
.um-cal-event-title { font-weight: 600; display: block; }
.um-cal-event-meta { color: var(--um-muted); display: block; }
.um-cal-event--scheduled { background: var(--um-accent-tint); border-color: var(--um-accent-line); border-left-color: var(--um-accent); }
.um-cal-event--sending { background: var(--um-warn-tint); border-color: var(--um-warn-line); border-left-color: var(--um-warn-ink); }
.um-cal-event--done { background: var(--um-ready-tint); border-color: var(--um-ready-line); border-left-color: var(--um-ready-solid); }
.um-cal-event--draft { background: var(--um-fill-2); border-color: var(--um-line-strong); border-left-color: var(--um-glyph); }
.um-cal-event--blocked { background: var(--um-block-tint); border-color: var(--um-block-line); border-left-color: var(--um-block-solid); }
.um-cal-more { font-size: var(--um-fs-label); color: var(--um-muted); padding-left: 2px; }

.um-cal-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-left-width: 3px;
  vertical-align: -1px;
}
.um-cal-row--today { background: var(--um-accent-wash); }
.um-accent { color: var(--um-accent-deep); font-weight: 600; }

.um-cal-week { display: flex; flex-direction: column; }
.um-cal-week-row { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--um-line-soft); }
.um-cal-week-day { flex: 0 0 96px; font-size: var(--um-fs-sm); color: var(--um-muted); font-weight: 600; }
.um-cal-day-row { display: flex; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--um-line-soft); align-items: center; }
.um-cal-day-hour { flex: 0 0 58px; font-family: var(--um-mono); font-size: var(--um-fs-sm); color: var(--um-muted); }
.um-cal-day-row--idle { background: var(--um-surface-2); color: var(--um-fainter); }

/* Message preview. Always framed, never inlined. */
.um-preview { padding: 18px 20px; background: var(--um-fill-2); border-top: 1px solid var(--um-line-soft); }

/* The remote-content decision. Sits above the frame because it describes
   what the frame is currently allowed to fetch, and a person should read it
   before wondering why the pictures are missing. */
.um-remote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto 14px;
  padding: 11px 14px;
  background: var(--um-surface);
  border: 1px solid var(--um-line-soft);
  border-radius: var(--um-r-md);
}
.um-remote--on { border-color: var(--um-warn-line); background: var(--um-warn-wash); }
.um-remote .um-dot { margin-top: 5px; flex: 0 0 auto; }
.um-remote-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.um-remote-title { font-weight: 600; font-size: var(--um-fs-sm); }
.um-remote .um-btn { flex: 0 0 auto; align-self: center; }
@media (max-width: 879px) {
  .um-remote { flex-wrap: wrap; }
  .um-remote .um-btn { width: 100%; }
}
.um-preview-frame {
  width: 100%;
  max-width: 640px;
  height: 520px;
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-md);
  background: #fff;
  display: block;
  margin: 0 auto;
}
.um-preview-text {
  margin: 8px 0 0;
  padding: 14px 16px;
  background: var(--um-surface-2);
  border: 1px solid var(--um-line-soft);
  border-radius: var(--um-r-md);
  font-family: var(--um-mono);
  font-size: var(--um-fs-sm);
  white-space: pre-wrap;
  overflow-x: auto;
}
/* The inspection panes on the preview screen: long enough to read, bounded
   so the page does not become a mile of source. */
.um-preview-text--tall { max-height: 400px; overflow: auto; }

/* --------------------------------------------------------------------------
   Empty / loading / blocked states
   -------------------------------------------------------------------------- */
.um-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}
.um-empty-mark {
  width: 44px; height: 44px;
  border-radius: var(--um-r-lg);
  background: var(--um-fill);
  border: 1px solid var(--um-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--um-glyph);
}
/* The error pages reuse the empty state, with the status code in place of the
   glyph -- so 404 and 500 look like a considered part of the product rather
   than a page the framework produced. */
.um-empty--page { padding: 12vh 24px; }
.um-empty--page .um-empty-mark {
  width: auto;
  min-width: 68px;
  padding: 0 14px;
  font-family: var(--um-mono);
  font-size: var(--um-fs-h4);
  letter-spacing: 1px;
}

.um-empty-title { font-size: var(--um-fs-h4); font-weight: 600; letter-spacing: -.2px; }
.um-empty-text { font-size: var(--um-fs-base); color: var(--um-muted); max-width: 46ch; }

.um-skeleton {
  background: linear-gradient(90deg, var(--um-fill) 25%, var(--um-fill-2) 50%, var(--um-fill) 75%);
  background-size: 200% 100%;
  animation: um-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--um-r-sm);
  height: 12px;
}
@keyframes um-shimmer { to { background-position: -200% 0; } }

.um-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--um-line-strong);
  border-top-color: var(--um-accent);
  border-radius: 50%;
  animation: um-spin .7s linear infinite;
  display: inline-block;
}
@keyframes um-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .um-skeleton, .um-spinner { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */
.um-flash-stack { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------------------
   Templates V2
   -------------------------------------------------------------------------- */
.um-template-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.um-search-field {
  flex: 1 1 320px;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--um-line);
  background: var(--um-surface);
  border-radius: var(--um-r-md);
  padding: 0 12px;
  min-height: 42px;
}
.um-search-field input {
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  font: inherit;
  color: var(--um-ink);
}
.um-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.um-template-card {
  background: var(--um-surface);
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-lg);
  box-shadow: var(--um-shadow-1);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--um-ink);
}
.um-template-card--archived { opacity: .82; }
.um-template-card--new {
  min-height: 250px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  border-style: dashed;
  text-align: center;
}
.um-template-new-mark {
  width: 46px;
  height: 46px;
  border-radius: var(--um-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--um-accent-line);
  background: var(--um-accent-tint);
  color: var(--um-accent-deep);
  font-size: var(--um-fs-h3);
}
.um-template-preview-tile {
  height: 142px;
  background: linear-gradient(180deg, var(--um-surface-2), var(--um-surface));
  border-bottom: 1px solid var(--um-line-soft);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}
.um-template-preview-line {
  height: 8px;
  width: 74%;
  border-radius: var(--um-r-pill);
  background: var(--um-fill-2);
}
.um-template-preview-line--hero { height: 28px; width: 100%; border-radius: var(--um-r-sm); background: var(--um-accent-tint); }
.um-template-preview-line--title { width: 56%; background: var(--um-line-strong); }
.um-template-preview-line--short { width: 42%; }
.um-template-preview-cta {
  width: 86px;
  height: 24px;
  border-radius: var(--um-r-pill);
  background: var(--um-accent);
}
/* Real-content thumbnail: same sandboxed srcdoc iframe the editor's own
   Podgląd panel uses, scaled down and clipped to the tile. Scale (280/600)
   matches the grid's minmax(280px, 1fr) column, so it fills edge-to-edge at
   the narrowest card width and is simply left-aligned on wider ones -- the
   iframe's own white background (see _FRAME_STYLE) makes that seamless. */
.um-template-preview-tile--thumb {
  padding: 0;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.um-template-thumb-scale {
  display: block;
  width: 600px;
  height: 900px;
  transform: scale(0.4667);
  transform-origin: top left;
}
.um-template-thumb-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Purely visual: clicks must pass through to the tile's <a> href. */
  pointer-events: none;
}
.um-template-card-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.um-template-card-title-row,
.um-template-head-actions,
.um-version-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.um-template-card-title { flex: 1 1 160px; font-size: var(--um-fs-lg); font-weight: 600; }
.um-template-card-title a { color: inherit; text-decoration: none; }
.um-template-subject {
  color: var(--um-ink-2);
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}
.um-template-meta,
.um-template-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--um-muted);
  font-size: var(--um-fs-sm);
}
.um-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--um-r-pill);
  border: 1px solid var(--um-line);
  background: var(--um-fill);
  color: var(--um-ink-2);
  font-size: var(--um-fs-sm);
}
.um-template-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.um-template-actions form { margin: 0; }
.um-archive-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--um-line);
  background: var(--um-surface);
  border-radius: var(--um-r-lg);
  padding: 14px 16px;
}
.um-template-create { max-width: 760px; }
.um-form-stack { display: flex; flex-direction: column; gap: 16px; }
.um-breadcrumb {
  margin: 0 0 4px;
  color: var(--um-muted);
  font-size: var(--um-fs-sm);
}
.um-template-editor-head { align-items: flex-start; }
.um-editor-page { display: flex; flex-direction: column; gap: 16px; }
.um-editor-mobile-tabs { display: none; }
.um-editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
.um-editor-main,
.um-editor-side,
.um-preview-panel { min-width: 0; }
.um-editor-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 76px;
}
.um-char-field { min-width: 260px; }
.um-block-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-md);
  background: var(--um-fill);
}
.um-block-editor {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(260px, 1fr);
  gap: 14px;
}
.um-block-list-panel,
.um-block-properties {
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-md);
  background: var(--um-surface);
  padding: 14px;
  min-width: 0;
}
.um-panel-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.um-panel-title-row h3 { font-size: var(--um-fs-md); font-weight: 600; }
.um-block-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.um-block-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-md);
  background: var(--um-fill);
}
.um-block-row--active {
  border-color: var(--um-accent-line);
  background: var(--um-accent-tint);
}
.um-block-select {
  border: 0;
  background: transparent;
  color: var(--um-ink);
  text-align: left;
  cursor: pointer;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
}
.um-block-select span { font-weight: 600; }
.um-block-select small {
  color: var(--um-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-block-actions {
  display: flex;
  gap: 4px;
}
.um-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-sm);
  background: var(--um-surface);
  color: var(--um-ink);
  cursor: pointer;
  font-weight: 600;
}
.um-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.um-variable-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.um-variable-token {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-md);
  background: var(--um-fill);
  color: var(--um-ink);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}
.um-variable-token code,
.um-version-details code {
  font-family: var(--um-mono);
  font-size: var(--um-fs-sm);
  word-break: break-all;
}
.um-fallback-builder {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--um-line-soft);
}
.um-validation-error { display: inline-block; margin-top: 4px; }
.um-preview-device {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 10px;
  background: var(--um-fill);
  border-radius: var(--um-r-md);
}
.um-preview-device--mobile .um-preview {
  width: 375px;
  max-width: 100%;
}
.um-publish-bar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-lg);
  background: color-mix(in srgb, var(--um-surface) 94%, transparent);
  box-shadow: var(--um-shadow-pop);
}
.um-version-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.um-version-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-lg);
  background: var(--um-surface);
  box-shadow: var(--um-shadow-1);
  padding: 16px;
}
.um-version-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.um-version-title-row h2 { font-size: var(--um-fs-h4); font-weight: 600; }
.um-version-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.um-version-actions form { margin: 0; }
.um-version-details summary {
  cursor: pointer;
  color: var(--um-muted);
  font-size: var(--um-fs-sm);
}
.um-version-details dl {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 6px 12px;
  margin-top: 8px;
  font-size: var(--um-fs-sm);
}
.um-version-details dt { color: var(--um-muted); }
.um-version-details dd { margin: 0; min-width: 0; }

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */
.um-dialog {
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-lg);
  box-shadow: var(--um-shadow-pop);
  padding: 0;
  background: var(--um-surface);
  color: var(--um-ink);
  max-width: 520px;
  width: calc(100vw - 32px);
}
.um-dialog::backdrop { background: rgba(22, 25, 28, .42); }
.um-dialog-head { padding: 18px 20px 0; }
.um-dialog-body { padding: 12px 20px 18px; font-size: var(--um-fs-base); color: var(--um-ink-2); line-height: 1.55; }
.um-dialog-foot { padding: 14px 20px; background: var(--um-surface-2); border-top: 1px solid var(--um-line-soft); display: flex; gap: 8px; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.um-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--um-line); flex-wrap: wrap; }
.um-tab {
  padding: 9px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: var(--um-fs-base);
  font-weight: 500;
  color: var(--um-muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.um-tab:hover { color: var(--um-ink); text-decoration: none; }
.um-tab[aria-selected="true"], .um-tab[aria-current="page"] {
  color: var(--um-accent-deep);
  border-bottom-color: var(--um-accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Mobile chrome. Tables become cards rather than shrinking, because a
   1440px eight-column table squeezed to 390px is unreadable at any size.
   -------------------------------------------------------------------------- */
.um-mobile-bar, .um-mobile-nav { display: none; }

.um-cards { display: none; flex-direction: column; gap: 10px; }
.um-card-item {
  background: var(--um-surface);
  border: 1px solid var(--um-line);
  border-radius: var(--um-r-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--um-shadow-1);
}
.um-card-item-head { display: flex; align-items: flex-start; gap: 10px; }
.um-card-item-title { font-size: var(--um-fs-md); font-weight: 600; flex: 1; }
.um-card-item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: var(--um-fs-sm); }
.um-card-item-grid dt { color: var(--um-muted); }
.um-card-item-grid dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 1119px) {
  .um-content { padding: 20px 18px 44px; }
  .um-topbar { padding: 11px 18px; }
}

@media (max-width: 879px) {
  .um-rail { display: none; }
  .um-shell { flex-direction: column; }

  .um-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--um-surface);
    border-bottom: 1px solid var(--um-line);
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .um-topbar { display: none; }
  .um-content { padding: 16px 14px 88px; gap: 16px; }

  .um-mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--um-surface);
    border-top: 1px solid var(--um-line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
  }
  .um-mobile-nav a, .um-mobile-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    min-height: 48px;
    border: 0;
    background: transparent;
    font-size: var(--um-fs-micro);
    color: var(--um-muted);
    cursor: pointer;
    text-decoration: none;
  }
  .um-mobile-nav [aria-current="page"] { color: var(--um-accent-deep); font-weight: 600; }

  /* Off-canvas drawer for the full navigation */
  .um-drawer {
    position: fixed;
    inset: 0;
    background: rgba(22, 25, 28, .5);
    z-index: 50;
    display: flex;
  }
  .um-drawer[hidden] { display: none; }
  .um-drawer-panel {
    width: 280px;
    max-width: 86vw;
    background: var(--um-rail);
    border-right: 1px solid var(--um-line);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
  }

  /* Table -> card switch */
  .um-table-wrap--responsive { display: none; }
  .um-cards { display: flex; }

  .um-page-head { gap: 12px; }
  .um-h1 { font-size: var(--um-fs-h2); }

  .um-cal-grid { grid-template-columns: 1fr; }
  .um-cal-dow { display: none; }
  .um-cal-cell { min-height: 0; border-right: 0; }
  /* An agenda reads better than a 7-across grid on a phone. */
  .um-cal-cell--empty-mobile { display: none; }

  .um-wizard-body { padding: 16px 14px 24px; }
  .um-wizard-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .um-steps { gap: 2px; }
  .um-step-label { display: none; }
  .um-step-sep { width: 8px; flex-basis: 8px; }

  .um-stat-row > .um-stat { flex: 1 1 50%; min-width: 50%; }

  /* Comfortable touch targets */
  .um-btn { min-height: 40px; padding: 10px 16px; }
  .um-btn--sm { min-height: 34px; }
  .um-nav-item { min-height: 44px; }

  .um-template-toolbar { align-items: stretch; }
  .um-search-field,
  .um-template-toolbar .um-select,
  .um-template-toolbar .um-btn { width: 100%; }
  .um-template-grid { grid-template-columns: 1fr; }
  .um-template-actions .um-btn,
  .um-template-actions form { flex: 1 1 42%; }
  .um-template-actions form .um-btn { width: 100%; }
  .um-editor-mobile-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-bottom: 1px solid var(--um-line);
    padding-bottom: 6px;
  }
  .um-editor-mobile-tabs a {
    flex: 1 0 auto;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--um-line);
    border-radius: var(--um-r-pill);
    text-align: center;
    text-decoration: none;
    background: var(--um-surface);
  }
  .um-editor-shell,
  .um-block-editor { grid-template-columns: 1fr; }
  .um-editor-side { position: static; }
  .um-publish-bar {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }
  .um-publish-bar .um-btn-row,
  .um-publish-bar form,
  .um-publish-bar .um-btn { width: 100%; }
  .um-version-card {
    flex-direction: column;
  }
  .um-version-actions {
    justify-content: flex-start;
  }

  /* Measured on a phone rather than assumed. The three rules below each fix
     something a browser reported at 390px: a 16px checkbox and a 20px-tall
     link, both under the 24px minimum target size, and 11px label text that
     stops being readable at arm's length. */
  .um-check input { width: 24px; height: 24px; }
  .um-link-list a { display: inline-block; padding: 4px 0; }
  .um-checklist-detail,
  .um-cal-event-title,
  .um-cal-event-meta { font-size: var(--um-fs-sm); }
}

@media print {
  .um-rail, .um-topbar, .um-mobile-bar, .um-mobile-nav, .um-btn { display: none !important; }
  body { background: #fff; }
  .um-card { box-shadow: none; break-inside: avoid; }
}

/* ── NATURIS field editor ─────────────────────────────────────────────────
   Two columns: named content fields on the left, a live email canvas on the
   right. The canvas is sized to the real email widths (600 px desktop,
   390 px mobile) and given enough height that a whole NATURIS message lays
   out without a second scrollbar inside the page's own. */
.um-naturis-shell {
  display: grid;
  /* 600 px canvas + card padding: the preview column has to be wider than the
     email itself or the "Desktop 600 px" tab quietly shows 550. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
  gap: 20px;
  align-items: start;
}
.um-naturis-fields { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.um-naturis-preview { position: sticky; top: 16px; min-width: 0; }

.um-naturis-canvas {
  background: var(--um-fill);
  border-radius: var(--um-r-md);
  padding: 8px;
  display: flex;
  justify-content: center;
}
.um-naturis-canvas .um-preview { width: 100%; }
.um-naturis-canvas .um-preview-frame {
  width: 100%;
  max-width: 600px;
  /* Tall enough for a whole NATURIS variant (the four sendable layouts render
     2.1k–3.4k px) so the operator scrolls the page once instead of scrubbing a
     520 px porthole. */
  height: 78vh;
  min-height: 560px;
}
.um-naturis-canvas--mobile .um-preview-frame { max-width: 390px; }

.um-naturis-section--off > .um-card-body { opacity: 0.45; }
.um-naturis-section--off > .um-card-body :is(input, textarea, select, button) { pointer-events: none; }

.um-naturis-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--um-fs-sm); white-space: nowrap;
}
.um-naturis-items { display: flex; flex-direction: column; gap: 14px; }
.um-naturis-item {
  border: 1px solid var(--um-line-soft);
  border-radius: var(--um-r-md);
  padding: 14px;
  background: var(--um-surface-2);
}
.um-naturis-item-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.um-naturis-item--off [data-naturis-item-body] { opacity: 0.45; }
.um-naturis-item--off [data-naturis-item-body] :is(input, textarea, select, button) { pointer-events: none; }

.um-naturis-image { display: flex; flex-direction: column; gap: 8px; }
.um-naturis-image-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 8px;
  border: 1px dashed var(--um-line);
  border-radius: var(--um-r-md);
  background: var(--um-surface-2);
}
.um-naturis-image-preview img { max-height: 160px; max-width: 100%; border-radius: 6px; }
.um-select--sm { padding: 6px 10px; font-size: var(--um-fs-sm); }

.um-field--unresolved .um-input,
.um-field--unresolved .um-textarea { border-color: var(--um-warning, #b26b00); }
.um-field-hint--demo { color: var(--um-warning, #b26b00); }
.um-req { color: var(--um-warning, #b26b00); }

@media (max-width: 1100px) {
  .um-naturis-shell { grid-template-columns: minmax(0, 1fr); }
  .um-naturis-preview { position: static; }
  .um-naturis-canvas .um-preview-frame { height: 70vh; }
}

/* The dedicated full preview page: one email-width canvas, tall enough that
   the whole message lays out and the page's own scrollbar is the only one. */
.um-preview-full { padding: 12px; background: var(--um-fill); border-radius: var(--um-r-md); }
.um-preview-full .um-preview-frame { margin: 0 auto; }