/* Wycombe Abbey design system — VENDORED from App-13 Keystone Support
   (frontend/src/global.css), copied unmodified so the two apps stay visually identical.
   Do not edit this file. Monkey Mail's own rules belong in styles.css, which loads after it.
   Re-sync by copying that file over this one. */

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Wycombe Abbey International brand tokens (Brand Guidelines, Aug 2026) */
  --navy: #1b2034;
  --navy-90: #2a2f44;
  --navy-70: #4b5066;
  --navy-50: #7c8093;
  --navy-20: #c8cad2;
  --navy-10: #e5e6eb;
  --grey: #e6ddcb;
  --grey-warm: #d8cfbc;
  --grey-soft: #f1ece0;
  --gold: #deac35;
  --gold-deep: #b7892a;
  --gold-soft: #ebc976;
  --saffron-light: #fdf3d9;
  --skye-light: #e6f2dc;
  --info-blue: #3f7fbf;
  --info-blue-light: #e3eefa;
  --lilac-light: #f3e8f2;
  --rose-light: #f7ece7;
  --pink-light: #fceef3;
  --paper: #faf7f1;
  --white: #ffffff;

  /* WAS Brand Guidelines secondary/data palette — the actual bright colors, not tonal
     tints of the primary palette. Previously --sienna was the only one of these defined
     correctly, and --green (#52715d) was a made-up muted color that isn't in the brand
     guide at all — kept as a legacy alias below so nothing breaks, now pointing at Skye. */
  --lilac: #cea3cc;
  --indigo: #384373;
  --sienna: #c85e45;
  --olive: #a1bf56;
  --saffron: #fad200;
  --scarlett: #cc1a18;
  --skye: #318600;
  --violet: #ac61a3;
  --ruby: #e66894;
  --rose: #d8a994;
  --clementine: #f18d00;
  --green: var(--skye);
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Semantic aliases used throughout the app */
  --bg: var(--paper);
  --surface: var(--white);
  --border: var(--navy-10);
  --text: var(--navy);
  --text-muted: var(--navy-50);
  --danger: var(--scarlett);
  --warning: var(--gold-deep);
  --success: var(--green);

  /* A-/A/A+ text-size control (masthead, next to the signed-in user). 2px is the new
     default (bumped up from the original design), so "A" in the control means +2px, not 0. */
  --font-boost: 2px;

  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 300;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4 {
  font-weight: 300;
  letter-spacing: 0.01em;
}

a {
  color: var(--navy);
}

button {
  font-family: inherit;
  cursor: pointer;
}

.eyebrow {
  font-size: calc(12px + var(--font-boost));
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  font-weight: 700;
  margin: 0;
}

.gold-rule {
  width: 56px;
  height: 1px;
  background: var(--gold);
  border: none;
  margin: 8px 0 16px;
}

/* Masthead — compact by default; sized for a 13" laptop first, not a marketing hero */
.sticky-header-group {
  position: sticky;
  top: 0;
  z-index: 45;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--navy);
  border-top: 4px solid var(--gold);
  padding: 10px 20px;
}

.masthead .menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
}

.masthead .menu-toggle:hover {
  background: var(--navy-90);
}

.masthead .logo-mark {
  width: 83px;
  height: 83px;
  flex-shrink: 0;
  background-color: var(--grey);
  -webkit-mask-image: url('/brand/wycombe-abbey-bangkok.png');
  mask-image: url('/brand/wycombe-abbey-bangkok.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.masthead .title-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  min-width: 0;
}

.masthead .title-block .eyebrow {
  color: var(--gold);
  font-size: calc(10px + var(--font-boost));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead .title-block h1 {
  margin: 0;
  font-size: calc(16px + var(--font-boost));
  font-weight: 400;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A blocking "you must fill this in before it saves" prompt (status/priority reason) — was
   plain gray-on-white before and got missed entirely; now impossible to mistake for
   background chrome. */
.reason-required-box {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--saffron-light);
  border: 2px solid var(--scarlett);
  border-radius: 8px;
}

.reason-required-heading {
  font-weight: 700;
  color: var(--scarlett);
  font-size: calc(13px + var(--font-boost));
  margin-bottom: 6px;
}

/* Visible-but-calm — a ticket filed on someone's behalf is theirs in every practical sense
   (My Tickets, notifications, replies); this just makes the "who actually typed this" fact
   findable at a glance rather than hidden, without turning it into the focal point. */
.on-behalf-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--skye-light);
  border-left: 3px solid var(--skye);
  border-radius: 6px;
  font-size: calc(13px + var(--font-boost));
  color: var(--navy-70);
}

/* Big, colorful "tile" fields for the New Ticket form — plenty of room on this page, so
   fields get real presence instead of reading as a plain gray-bordered form. Each color
   variant is just a different accent; the layout/sizing rules are shared. */
.field-tile {
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.field-tile > label,
.field-tile-label {
  display: block;
  font-size: calc(16px + var(--font-boost));
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--navy);
}

.field-tile input,
.field-tile select,
.field-tile textarea {
  font-size: calc(16px + var(--font-boost));
  padding: 14px 16px;
  border-radius: 10px;
  border-width: 2px;
  background: var(--white);
}

.field-tile-hint {
  font-size: calc(12px + var(--font-boost));
  color: var(--navy-70);
  margin-top: 8px;
}

.field-tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.field-tile-row > .field-tile {
  flex: 1 1 240px;
  margin-top: 0;
}

.field-tile-blue { background: var(--info-blue-light); border-color: var(--info-blue); }
.field-tile-gold { background: var(--saffron-light); border-color: var(--gold); }
.field-tile-green { background: var(--skye-light); border-color: var(--skye); }
.field-tile-lilac { background: var(--lilac-light); border-color: var(--violet); }
.field-tile-rose { background: var(--rose-light); border-color: var(--rose); }

.field-tile-blue input, .field-tile-blue select, .field-tile-blue textarea { border-color: var(--info-blue); }
.field-tile-gold input, .field-tile-gold select, .field-tile-gold textarea { border-color: var(--gold); }
.field-tile-green input, .field-tile-green select, .field-tile-green textarea { border-color: var(--skye); }
.field-tile-lilac input, .field-tile-lilac select, .field-tile-lilac textarea { border-color: var(--violet); }
.field-tile-rose input, .field-tile-rose select, .field-tile-rose textarea { border-color: var(--rose); }

/* Kenny's step-by-step wizard */
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.wizard-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: calc(12px + var(--font-boost));
  font-weight: 700;
  color: var(--navy-50);
}

.wizard-step-pill .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy-10);
  color: var(--navy-70);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11px + var(--font-boost));
}

.wizard-step-pill.current {
  border-color: var(--gold);
  background: var(--saffron-light);
  color: var(--navy);
}

.wizard-step-pill.current .num {
  background: var(--gold);
  color: var(--navy);
}

.wizard-step-pill.done {
  border-color: var(--skye);
  color: var(--navy-70);
}

.wizard-step-pill.done .num {
  background: var(--skye);
  color: var(--white);
}

.wizard-connector {
  width: 18px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

/* Review step — each field recap gets its own rounded, colored card, mirroring the tile
   colors used while collecting it, so the summary reads as a receipt of the same journey. */
.review-card {
  border-radius: 16px;
  border: 2px solid var(--border);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.review-card-title {
  font-weight: 700;
  font-size: calc(14px + var(--font-boost));
  color: var(--navy);
}

.review-card-body {
  font-size: calc(14px + var(--font-boost));
  color: var(--navy-70);
  white-space: pre-wrap;
}

.pre-release-badge {
  flex-shrink: 0;
  background: var(--gold-deep);
  color: var(--navy);
  font-size: calc(10px + var(--font-boost));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 10px;
}

.masthead .spacer {
  flex: 1;
}

.font-size-control {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  border: 1px solid var(--navy-70);
  border-radius: 6px;
  overflow: hidden;
}

.font-size-control button {
  background: transparent;
  color: var(--grey);
  border: none;
  padding: 6px 9px;
  font-size: calc(12px + var(--font-boost));
  font-weight: 700;
  line-height: 1;
}

.font-size-control button:hover {
  background: var(--navy-90);
  color: var(--white);
}

.font-size-control button.active {
  background: var(--gold);
  color: var(--navy);
}

@media (max-width: 900px) {
  .font-size-control {
    display: none;
  }
}

.masthead .user-summary {
  text-align: right;
  color: var(--grey);
  font-size: calc(12px + var(--font-boost));
  line-height: 1.4;
  white-space: nowrap;
}

.masthead .user-summary strong {
  color: var(--white);
  font-weight: 700;
}

.masthead .sign-out {
  background: transparent;
  color: var(--grey);
  border: 1px solid var(--navy-70);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: calc(13px + var(--font-boost));
  margin-left: 12px;
  flex-shrink: 0;
}

.masthead .sign-out:hover {
  border-color: var(--gold);
  color: var(--white);
}

/* App shell: sidebar + content, below the masthead */
.app-shell {
  display: flex;
  min-height: calc(100vh - 54px);
  position: relative;
}

.sidebar {
  width: 172px;
  background: var(--navy-90);
  padding: 16px 10px;
  flex-shrink: 0;
}

.sidebar nav a {
  display: block;
  color: var(--navy-20);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 2px;
  font-size: calc(13px + var(--font-boost));
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

.sidebar nav a.active,
.sidebar nav a:hover {
  background: var(--navy);
  color: var(--white);
}

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--navy-50);
  margin: 10px 4px;
}

.sidebar-section-label {
  color: var(--navy-20);
  font-weight: 700;
  font-size: calc(11px + var(--font-boost));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  margin-bottom: 2px;
}

.sidebar-backdrop {
  display: none;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 24px 28px;
  /* Fits a 13" laptop at 100% zoom (~1200px available after the sidebar) without feeling
     cramped, but stretches to use the room on a 24"+ monitor instead of stopping at a fixed
     cap and leaving big empty margins. */
  max-width: 1800px;
}

/* Tablet (iPad portrait and similar) — trim further, drawer kicks in below this */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 60;
    width: 240px;
    padding-top: 70px;
    transform: translateX(-100%);
    transition: transform 220ms var(--ease);
    overflow-y: auto;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  }

  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 50;
  }

  .masthead .menu-toggle {
    display: inline-flex;
  }

  .masthead {
    padding: 8px 14px;
  }

  .main {
    padding: 18px 16px;
  }
}

@media (max-width: 640px) {
  .masthead .user-summary {
    display: none;
  }

  .masthead .title-block .eyebrow {
    display: none;
  }
}

/* Footer */
.site-footer {
  background: var(--navy);
  color: var(--grey);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .site-footer p {
    margin-left: 0;
    width: 100%;
  }
}

.site-footer .logo-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: var(--grey);
  -webkit-mask-image: url('/brand/wycombe-abbey-bangkok.png');
  mask-image: url('/brand/wycombe-abbey-bangkok.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
  opacity: 0.85;
}

.site-footer .footer-title {
  display: flex;
  flex-direction: column;
  font-size: calc(13px + var(--font-boost));
}

.site-footer .footer-title strong {
  color: var(--white);
  font-weight: 700;
  font-size: calc(14px + var(--font-boost));
}

.site-footer p {
  margin: 0 0 0 auto;
  font-size: calc(12px + var(--font-boost));
  color: var(--navy-20);
}

/* Cards, buttons, forms */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.ticket-meta-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 14px 0 8px;
}

/* Flex-wrap, not a grid of equal columns — a short fact ("tech", "Rolly") doesn't need the
   same width as a full name+email or a duration sentence, and packing short cells together
   (rather than stretching everything to match the widest row) reads as considered instead of
   just "a form." */
.ticket-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Each field is its own small card now, not just bare text floating in a grid — matches the
   bordered-card treatment used for the routing/composer panels elsewhere on this page, so the
   ticket's facts read as distinct, scannable chips instead of a loose two-line list. */
.ticket-meta-cell {
  background: var(--grey-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  flex: 0 1 auto;
  min-width: 110px;
}

/* Longer content (a name+email, a full category name, a duration sentence) gets real room to
   breathe and can wrap onto a second line, instead of squeezing into the same narrow column
   as "Team" or "Assigned to" above. */
.ticket-meta-cell-wide {
  flex: 1 1 240px;
  max-width: 340px;
}

.ticket-meta-label {
  font-size: calc(10px + var(--font-boost));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 3px;
}

.ticket-meta-value {
  font-size: calc(13px + var(--font-boost));
  color: var(--navy);
  font-weight: 600;
  word-break: break-word;
}

.btn {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: calc(14px + var(--font-boost));
  font-weight: 700;
  transition: background-color 140ms var(--ease);
}

.btn:hover {
  background: var(--navy-90);
}

.btn.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 400;
}

.btn.secondary:hover {
  border-color: var(--navy-50);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.danger {
  background: var(--danger);
  color: white;
}

.btn.danger:hover {
  filter: brightness(0.92);
}

.btn.success {
  background: var(--success);
  color: white;
}

.btn.success:hover {
  filter: brightness(0.92);
}

input,
textarea,
select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: calc(14px + var(--font-boost));
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
}

.formatting-toolbar {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--grey-soft);
  padding: 4px;
}

.formatting-toolbar button {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 5px 8px;
  color: var(--navy-70);
  display: inline-flex;
  align-items: center;
}

.formatting-toolbar button:hover {
  background: var(--white);
  color: var(--navy);
}

.formatting-toolbar + textarea {
  border-radius: 0 0 6px 6px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold-deep);
}

/* The ticket's current status/priority/assignee — the three things that most need to be
   seen at a glance in the Actions panel, so they get their own pink tint (same ruby/pink-light
   pairing used for agent chat bubbles) instead of blending into every other plain dropdown
   on the page. */
.ticket-key-select-label {
  font-size: calc(10px + var(--font-boost));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-70);
}

.ticket-key-select {
  background: var(--pink-light);
  border-color: var(--ruby);
  font-weight: 700;
}

.ticket-key-select:focus {
  border-color: var(--ruby);
}

label {
  display: block;
  font-size: calc(13px + var(--font-boost));
  font-weight: 700;
  margin-bottom: 4px;
  margin-top: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  font-size: calc(14px + var(--font-boost));
}

th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: calc(11px + var(--font-boost));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

tr:hover td {
  background: var(--grey-soft);
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: calc(12px + var(--font-boost));
  font-weight: 700;
}

/* Solid, saturated brand-secondary fills rather than washed-out tints — a status badge is
   meant to be spotted at a glance across a crowded Queue table. Closed stays deliberately
   muted/neutral: that's the one status meant to read as "done, no longer needs attention". */
.badge.status-new {
  /* Not part of the brand secondary palette (nothing in it is a sky blue — Skye is green)
     — this is the original light-blue family, just more saturated/vivid than the old
     pastel #cfe8fb so it's easier to spot. */
  background: #4fb3f0;
  color: var(--white);
}
.badge.status-acknowledged {
  background: var(--saffron);
  color: var(--navy);
}
.badge.status-in_progress {
  /* Was Gold — too close to Acknowledged's Saffron at a glance. Ruby reads distinctly. */
  background: var(--ruby);
  color: var(--white);
}
.badge.status-waiting_on_requester {
  background: var(--violet);
  color: var(--white);
}
.badge.status-on_hold {
  background: var(--clementine);
  color: var(--white);
}
.badge.status-resolved {
  background: var(--skye);
  color: var(--white);
}
.badge.status-closed {
  background: var(--navy-10);
  color: var(--navy-50);
}

.badge.priority-urgent {
  background: var(--scarlett);
  color: var(--white);
}
.badge.priority-high {
  background: var(--sienna);
  color: var(--white);
}
.badge.priority-normal {
  background: var(--navy-20);
  color: var(--navy-90);
}
.badge.priority-low {
  background: var(--grey-soft);
  color: var(--navy-50);
}

/* A visually distinct "conversation area" — inset panel, own background — so the thread
   reads as its own zone within the ticket page instead of floating loose inside the same
   plain white card as the rest of the ticket's details. */
.message-thread-panel {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}

/* The conversation is a real flex column so individual messages can float left/right like a
   chat app — agent bubbles pinned left, requester bubbles pinned right — while internal notes
   and system announcements (not "spoken" by either side) stretch full-width as plain cards. */
.message-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Caps the thread to a sane chat-column width regardless of how wide .main stretches on a
     large monitor (up to 1800px) — without this, a right-aligned requester bubble at 74%
     max-width leaves a huge empty gap before it on a wide screen. */
  max-width: 680px;
}

/* A centered date label whenever the calendar day changes between messages — a classic chat
   convention that makes a multi-day silence (very common on "waiting on requester" tickets)
   visible at a glance instead of reading identically to two replies sent seconds apart. */
.message-day-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: var(--text-muted);
  font-size: calc(11px + var(--font-boost));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.message-day-divider::before,
.message-day-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* "Read more" clamp for a very long message (most often a submitter pasting in a whole
   forwarded email thread) — the fade blends into whatever bubble it's sitting in, so each
   message type points --fade-color at its own actual background instead of one fixed color. */
.message-body-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--fade-color, var(--surface)));
  pointer-events: none;
}

.message.from-agent .message-body-fade {
  --fade-color: var(--pink-light);
}

.message.from-requester .message-body-fade {
  --fade-color: var(--saffron-light);
}

.message.internal .message-body-fade {
  --fade-color: var(--note-bg, var(--grey-soft));
}

.message.system-announcement .message-body-fade {
  --fade-color: var(--saffron-light);
}

.message-body-toggle {
  display: block;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  font-size: calc(12px + var(--font-boost));
  font-weight: 700;
  color: var(--navy-70);
  text-decoration: underline;
  cursor: pointer;
}

.message-body-toggle:hover {
  color: var(--navy);
}

.message {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

/* Internal notes ARE a conversation too — just a side one, between staff, hence their own
   clementine-shade-per-author tail (same left-pointing shape as an agent bubble, tinted with
   whatever shade noteColors.ts assigned that author) rather than a plain flat card. System
   announcements stay a plain card (no tail) since nobody's "speaking" — it's a system event
   both sides see. Neither stretches edge-to-edge like a divider — sized to their own content,
   same as the public bubbles, just capped a little wider since a note often runs longer. */
.message-thread .message.internal {
  align-self: flex-start;
  max-width: 78%;
  position: relative;
  border: none;
  border-radius: 4px 14px 14px 14px;
  box-shadow: 0 2px 5px rgba(27, 32, 52, 0.16);
}

.message.internal::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -11px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 12px 10px 0;
  border-color: transparent var(--note-border, var(--grey-warm)) transparent transparent;
  filter: drop-shadow(-1px 1px 1px rgba(27, 32, 52, 0.14));
}

.message.internal::after {
  content: '';
  position: absolute;
  top: 13px;
  left: -9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 10px 9px 0;
  border-color: transparent var(--note-bg, var(--grey-soft)) transparent transparent;
}

.message-thread .message.system-announcement {
  align-self: center;
  max-width: 82%;
}

@media (max-width: 600px) {
  .message-thread .message.internal,
  .message-thread .message.system-announcement {
    max-width: 92%;
  }
}

/* Agent and requester replies are true speech bubbles — rounded, floated to their own side,
   with a prominent triangular tail pointing back toward that side (agent tail points further
   left, requester tail points further right) so the two parties read unmistakably even
   scrolling fast, the way a familiar chat app does. The flattened corner nearest the tail is
   what sells the "speech bubble" shape instead of just a floated rounded rectangle.
   Both the bubble and its tail get a visible stroke, not just a background tint — the pastel
   fills are close enough in lightness to the card's white background that an unstroked tail
   all but disappeared. The tail is drawn as two stacked triangles (a slightly larger
   border-colored one behind, a smaller fill-colored one in front) so the stroke wraps the
   pointer the same way it wraps the bubble body, plus its own drop-shadow (a triangle can't
   take a normal box-shadow — that shadows the invisible bounding box, not the visible shape). */
.message-thread .message.from-agent,
.message-thread .message.from-requester {
  position: relative;
  max-width: 74%;
  box-shadow: 0 2px 5px rgba(27, 32, 52, 0.16);
}

.message.from-agent {
  align-self: flex-start;
  background: var(--pink-light);
  border: 1px solid #ecaec8;
  border-radius: 4px 14px 14px 14px;
}

.message.from-agent::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -11px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 12px 10px 0;
  border-color: transparent #ecaec8 transparent transparent;
  filter: drop-shadow(-1px 1px 1px rgba(27, 32, 52, 0.14));
}

.message.from-agent::after {
  content: '';
  position: absolute;
  top: 13px;
  left: -9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 10px 9px 0;
  border-color: transparent var(--pink-light) transparent transparent;
}

.message.from-requester {
  align-self: flex-end;
  background: var(--saffron-light);
  border: 1px solid #e8d270;
  border-radius: 14px 4px 14px 14px;
}

.message.from-requester::before {
  content: '';
  position: absolute;
  top: 12px;
  right: -11px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  border-color: transparent transparent transparent #e8d270;
  filter: drop-shadow(1px 1px 1px rgba(27, 32, 52, 0.14));
}

.message.from-requester::after {
  content: '';
  position: absolute;
  top: 13px;
  right: -9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 10px;
  border-color: transparent transparent transparent var(--saffron-light);
}

@media (max-width: 600px) {
  .message-thread .message.from-agent,
  .message-thread .message.from-requester {
    max-width: 88%;
  }
}

/* System announcements (estimated-completion-date changes, etc.) — deliberately loud so
   they can't be mistaken for a normal reply and skimmed past; both sides see these. */
.message.system-announcement {
  background: var(--saffron-light);
  border: 1px solid var(--gold-deep);
  border-left: 4px solid var(--scarlett);
  font-weight: 700;
}

.message.system-announcement .meta {
  color: var(--navy);
  font-weight: 700;
}

.message.internal {
  background: var(--grey-soft);
  border-color: var(--grey-warm);
}

.message .meta {
  font-size: calc(12px + var(--font-boost));
  color: var(--text-muted);
  margin-bottom: 6px;
}

.message-edit-link {
  display: inline;
  margin-left: 8px;
  padding: 0;
  border: none;
  background: none;
  font-size: inherit;
  color: var(--navy-70);
  text-decoration: underline;
  cursor: pointer;
}

.message-edit-link:hover {
  color: var(--navy);
}

.message-edit-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: calc(14px + var(--font-boost));
}

.message-body {
  white-space: pre-wrap;
  font-size: calc(14px + var(--font-boost));
  font-weight: 400;
}

/* Rendering a stored rich reply (message.body_html) and the live editor share this look —
   tables/blockquotes/images need real styling since they're actual HTML now, not the
   lightweight plain-text markdown FormattedText handles everywhere else. */
.message-body-rich,
.rich-editor-content.ProseMirror {
  font-size: calc(14px + var(--font-boost));
  line-height: 1.5;
}

.message-body-rich p,
.rich-editor-content p {
  margin: 0 0 8px;
}

.message-body-rich blockquote,
.rich-editor-content blockquote {
  margin: 8px 0;
  padding: 4px 14px;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}

.message-body-rich img,
.rich-editor-content img {
  max-width: 100%;
  border-radius: 6px;
}

/* Manual resize while composing — horizontal-only so height keeps following the image's own
   aspect ratio instead of letting a corner-drag stretch/squash it. Browser support (Chrome/
   Edge) draws a small drag handle at the bottom-right; the fixed-size presets in the toolbar
   are the reliable cross-browser path, this is the "manual" option alongside them. Not
   applied to .message-body-rich — a sent message is read-only, no resize handle there. */
.rich-editor-content img {
  resize: horizontal;
  overflow: hidden;
  display: inline-block;
}

.message-body-rich table,
.rich-editor-content table {
  border-collapse: collapse;
  margin: 8px 0;
  width: auto;
}

.message-body-rich td,
.message-body-rich th,
.rich-editor-content td,
.rich-editor-content th {
  border: 1px solid var(--border);
  padding: 6px 10px;
}

.message-body-rich th,
.rich-editor-content th {
  background: var(--grey-soft);
  font-weight: 700;
}

.rich-editor {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  position: relative;
}

.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--border);
  background: var(--grey-soft);
  border-radius: 8px 8px 0 0;
}

.rich-editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.rich-editor-btn:hover {
  background: var(--navy-10);
}

.rich-editor-btn.active {
  background: var(--navy-10);
  border-color: var(--navy-50);
}

.rich-editor-select {
  height: 28px;
  font-size: calc(12px + var(--font-boost));
  padding: 0 4px;
  width: auto;
}

.rich-editor-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.rich-editor-table-menu {
  position: relative;
}

.rich-editor-table-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(27, 32, 52, 0.15);
  min-width: 180px;
  padding: 4px;
}

.rich-editor-table-menu:hover .rich-editor-table-dropdown,
.rich-editor-table-menu:focus-within .rich-editor-table-dropdown {
  display: block;
}

.rich-editor-table-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  font-size: calc(12px + var(--font-boost));
  color: var(--navy);
  cursor: pointer;
}

.rich-editor-table-dropdown button:hover {
  background: var(--grey-soft);
}

.rich-editor-content.ProseMirror {
  padding: 10px 12px;
  outline: none;
}

.rich-editor-placeholder {
  position: absolute;
  top: 46px;
  left: 13px;
  color: var(--text-muted);
  font-size: calc(14px + var(--font-boost));
  pointer-events: none;
}

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Queue's filter bar — several distinct groups of controls (search/scope, people/refine,
   dates) in one compact, lightly-tinted pastel-blue panel. Each group's label sits inline as
   the first chip in its own row instead of on its own heading line, so the whole panel stays
   just a few lines tall rather than stacking a full row per label. */
.filter-panel {
  background: #eef6fc;
  border: 1px solid #cfe3f5;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.filter-row-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--info-blue);
  font-weight: 700;
  white-space: nowrap;
}

.filter-row {
  padding: 6px 0;
}

.filter-row + .filter-row {
  border-top: 1px solid #d7e8f6;
}

.tab-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 110px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: calc(13px + var(--font-boost));
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}

.tab-button:hover {
  border-color: var(--navy-50);
}

.tab-button.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* Admin's grouped tab strip — real underline-style tabs, clustered into named groups (Ticket
   Setup / People & Access / Communications / System) instead of one flat row of tiles, so the
   Admin page reads as a bar with sections rather than a grid of equal-weight buttons. */
.admin-tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.admin-tab-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-tab-group-label {
  font-size: calc(11px + var(--font-boost));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-tab-group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--border);
  border-bottom: 3px solid var(--border);
  margin-bottom: -1px;
  background: var(--surface);
  color: var(--text);
  font-size: calc(13px + var(--font-boost));
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms var(--ease), border-color 140ms var(--ease), background-color 140ms var(--ease);
}

.admin-tab-icon {
  font-size: 15px;
  line-height: 1;
}

.admin-tab:hover {
  border-color: var(--navy-50);
}

.admin-tab.active {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
  border-bottom-color: var(--gold);
}

.error-banner {
  background: #f3ded8;
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: calc(14px + var(--font-boost));
  font-weight: 700;
}

.empty-state {
  color: var(--text-muted);
  font-size: calc(14px + var(--font-boost));
  padding: 24px;
  text-align: center;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.checklist-item.done .text {
  text-decoration: line-through;
  color: var(--text-muted);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 760px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ticket table: full table on desktop, stacked cards on mobile — never sideways scroll */
.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sortable-th:hover {
  color: var(--navy);
}

.sort-arrow {
  color: var(--gold-deep);
  font-size: calc(10px + var(--font-boost));
}

.ticket-table-mobile {
  display: none;
}

@media (max-width: 700px) {
  .ticket-table-desktop {
    display: none;
  }
  .ticket-table-mobile {
    display: block;
  }
}

.ticket-mobile-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: calc(12px + var(--font-boost));
  color: var(--text-muted);
}

.ticket-mobile-sort button {
  background: var(--grey-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: calc(12px + var(--font-boost));
  color: var(--navy);
}

.ticket-mobile-sort button.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* A ticket table's Resolved/Closed divider — deliberately loud, so "still being worked on"
   vs. "done" is unmistakable at a glance, not a subtle gray label easy to miss. */
.ticket-table-divider-row td {
  padding: 0;
  border-bottom: none;
}

.ticket-table-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  margin: 10px 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: calc(13px + var(--font-boost));
  letter-spacing: 0.02em;
  cursor: pointer;
}

.ticket-table-divider:hover {
  background: var(--navy-90);
}

.ticket-table-divider-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-table-divider-label svg {
  flex-shrink: 0;
}

.ticket-table-divider button {
  background: var(--gold);
  border: none;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}

.ticket-table-divider button:hover {
  background: var(--gold-soft);
}

.ticket-mobile-card {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}

.ticket-mobile-card:last-child {
  border-bottom: none;
}

.ticket-mobile-top {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
}

.ticket-mobile-id {
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
  flex-shrink: 0;
}

.ticket-mobile-subject {
  font-weight: 700;
  font-size: calc(14px + var(--font-boost));
  color: var(--navy);
}

.ticket-mobile-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticket-mobile-updated {
  font-size: calc(12px + var(--font-boost));
  color: var(--text-muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.stat-tile .value {
  font-size: calc(28px + var(--font-boost));
  font-weight: 300;
  color: var(--navy);
}

.stat-tile .label {
  font-size: calc(11px + var(--font-boost));
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* Landing page — matches the KEYSTONE App suite's shared entry-page template
   (see new-pupil-announcer.wasbkk.workers.dev) so every KEYSTONE app looks like one family. */
.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing-topbar {
  background: var(--white);
  border-bottom: 1px solid var(--navy-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px max(32px, calc((100vw - 1240px) / 2));
}

.landing-topbar .crest {
  display: flex;
  align-items: center;
  gap: 14px;
}

.landing-topbar .crest-mark {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  background: var(--navy);
  -webkit-mask: url('/brand/wycombe-abbey-bangkok.png') center / contain no-repeat;
  mask: url('/brand/wycombe-abbey-bangkok.png') center / contain no-repeat;
}

.landing-topbar .crest-name {
  font-size: calc(15px + var(--font-boost));
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.landing-topbar .app-id {
  text-align: right;
}

.landing-topbar .app-id .eyebrow {
  font-size: calc(11px + var(--font-boost));
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.landing-topbar .app-id .name {
  font-size: calc(19px + var(--font-boost));
  font-weight: 700;
  color: var(--navy);
  margin-top: 2px;
}

.landing-hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  min-height: 560px;
}

.landing-hero-bg {
  position: absolute;
  inset: 0;
  background: url('/campus-hero.jpg') center 60% / cover no-repeat;
}

.landing-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 32, 52, 0.86) 0%, rgba(27, 32, 52, 0.74) 45%, rgba(27, 32, 52, 0.92) 100%);
}

.landing-hero-content {
  position: relative;
  max-width: 640px;
}

.landing-hero-eyebrow {
  font-size: calc(13px + var(--font-boost));
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 20px;
}

.landing-hero-title {
  font-size: clamp(calc(38px + var(--font-boost)), 6vw, calc(58px + var(--font-boost)));
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.landing-hero-title strong {
  font-weight: 700;
}

.landing-hero-sub {
  font-size: calc(19px + var(--font-boost));
  font-weight: 300;
  color: var(--grey-warm);
  line-height: 1.6;
  margin-bottom: 40px;
}

.landing-hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-hero-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 6px;
  font-size: calc(17px + var(--font-boost));
  font-weight: 700;
  text-decoration: none;
  transition: transform 140ms var(--ease), background 140ms var(--ease);
}

.landing-hero-actions a.primary {
  background: var(--gold);
  color: var(--navy);
}

.landing-hero-actions a.primary:hover {
  background: var(--gold-deep);
  transform: translateY(-2px);
}

.landing-admin-link {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(12px + var(--font-boost));
  font-weight: 600;
  color: var(--grey-warm);
  text-decoration: none;
  opacity: 0.75;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition: opacity 140ms var(--ease), border-color 140ms var(--ease);
}

.landing-admin-link:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.65);
}

.landing-footer {
  background: var(--navy);
  color: var(--grey-warm);
  padding: 26px max(32px, calc((100vw - 1240px) / 2));
  text-align: center;
}

.landing-footer strong {
  display: block;
  color: var(--white);
  font-size: calc(16px + var(--font-boost));
  font-weight: 700;
  margin-bottom: 4px;
}

.landing-footer .address {
  font-size: calc(14px + var(--font-boost));
}

.landing-footer a {
  color: var(--gold-soft);
  text-decoration: none;
  font-size: calc(14px + var(--font-boost));
  font-weight: 700;
}

@media (max-width: 700px) {
  .landing-topbar {
    padding: 14px 20px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .landing-topbar .app-id {
    text-align: left;
  }
  .landing-hero {
    padding: 56px 20px;
    min-height: 480px;
  }
}

/* Fake-data banner — deliberately loud. Only ever shown to the owner, only ever when their
   session is pointed at DB_DEMO, and it never goes away on its own while that's true. */
.fake-data-banner {
  background: repeating-linear-gradient(135deg, var(--gold) 0px, var(--gold) 14px, var(--gold-deep) 14px, var(--gold-deep) 28px);
  color: var(--navy);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: calc(13px + var(--font-boost));
  text-align: center;
}

.fake-data-banner button {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: calc(12px + var(--font-boost));
  font-weight: 700;
}

.fake-data-banner button:hover {
  background: var(--navy-90);
}

/* New-ticket step 1: radio-button type chooser + live examples panel */
.ticket-type-chooser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 960px;
  align-items: start;
}

@media (max-width: 700px) {
  .ticket-type-chooser {
    grid-template-columns: 1fr;
  }
}

.ticket-type-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ticket-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: calc(15px + var(--font-boost));
  color: var(--navy);
  cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}

.ticket-type-option input {
  width: auto;
  accent-color: var(--gold-deep);
}

.ticket-type-option:hover {
  border-color: var(--gold-deep);
}

.ticket-type-option.selected {
  border-color: var(--gold-deep);
  background: var(--grey-soft);
  font-weight: 700;
}

.ticket-type-examples {
  background: var(--grey-soft);
  border: 1px solid var(--grey-warm);
  border-radius: 10px;
  padding: 18px;
  font-size: calc(14px + var(--font-boost));
  color: var(--navy);
  min-height: 88px;
}

.submitter-chip {
  background: var(--grey-soft);
  border: 1px solid var(--grey-warm);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: calc(13px + var(--font-boost));
  color: var(--navy);
}

.file-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.file-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: calc(13px + var(--font-boost));
  border-bottom: 1px solid var(--border);
}

.file-list li span:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-list .file-size {
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
}

.file-list button {
  background: transparent;
  border: none;
  color: var(--danger);
  font-size: calc(16px + var(--font-boost));
  line-height: 1;
  padding: 0 4px;
}

/* Status meanings guide — collapsible, native <details> so it's mobile-friendly for free */
.status-guide {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 8px;
}

.status-guide summary {
  cursor: pointer;
  font-weight: 700;
  font-size: calc(14px + var(--font-boost));
  color: var(--navy);
  list-style: none;
}

.status-guide summary::-webkit-details-marker {
  display: none;
}

.status-guide summary::before {
  content: '▸ ';
  color: var(--gold-deep);
}

.status-guide[open] summary::before {
  content: '▾ ';
}

.status-guide-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-guide-item {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.status-guide-item:first-child {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 700px) {
  .status-guide-item {
    grid-template-columns: 1fr;
  }
}

.status-guide-side p {
  margin: 0 0 4px;
  font-size: calc(13px + var(--font-boost));
}

.status-guide-side-label {
  font-size: calc(11px + var(--font-boost));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
}

.status-guide-example {
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
}

.drag-handle {
  cursor: grab;
  color: var(--text-muted);
  padding: 0 6px;
  user-select: none;
  touch-action: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-row {
  transition: background-color 100ms var(--ease);
}

.drag-row.drag-over {
  background: var(--gold-soft);
  outline: 2px dashed var(--gold-deep);
  outline-offset: -2px;
}

.bulk-action-bar {
  border: 1px solid var(--gold-deep);
  background: var(--gold-soft);
}

.confirm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 32, 52, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.confirm-modal {
  background: var(--paper, #fff);
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 24px;
  max-width: 440px;
  width: 100%;
}

.confirm-modal h4 {
  margin: 0 0 12px;
  color: var(--scarlett, #cc1a18);
  display: flex;
  align-items: center;
  gap: 8px;
}

.confirm-modal p {
  font-size: calc(13px + var(--font-boost));
  color: var(--text-muted);
}

.confirm-modal input {
  width: 100%;
  margin: 8px 0 16px;
  box-sizing: border-box;
}

.confirm-modal .toolbar {
  justify-content: flex-end;
}

.status-guide-action {
  background: var(--gold-soft);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: calc(13px + var(--font-boost));
  margin: 6px 0;
}

.status-guide-action strong {
  /* Was gold-deep on a gold-soft background — two shades of the same hue, so the label
     barely stood out from its own box. Navy gives it real contrast. */
  color: var(--navy);
}

.field-hint {
  margin: -6px 0 4px;
  font-size: calc(12px + var(--font-boost));
  color: var(--text-muted);
}

/* Post-close feedback page (public, unauthenticated) */
.feedback-card {
  width: 100%;
  max-width: 480px;
}

.feedback-toggle {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.feedback-stars {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.feedback-star {
  background: none;
  border: none;
  font-size: 34px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  padding: 2px;
  transition: color 100ms var(--ease), transform 100ms var(--ease);
}

.feedback-star:hover {
  transform: scale(1.1);
}

.feedback-star.filled {
  color: var(--gold-deep);
}

/* Cross-team tag badges on a ticket */
.tag-badge {
  display: flex;
  gap: 8px;
  align-items: baseline;
  background: var(--grey-soft);
  border: 1px solid var(--grey-warm);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: calc(13px + var(--font-boost));
}

.tag-badge-label {
  font-weight: 700;
  color: var(--navy-70);
  white-space: nowrap;
}

/* Per-author pastel tint for internal notes — the flat .message.internal color still applies
   as a base; these override background/border per author via inline style (see noteColors.ts). */
.message.internal {
  background: var(--note-bg, var(--grey-soft));
  border-color: var(--note-border, var(--grey-warm));
}

/* Ticket audit report — a printable document, not app chrome: its own letterhead, colored
   section cards, and print-specific rules (hide the Print button itself, force light bg,
   sensible page margins) rather than reusing .card/.tab-bar styling meant for the live app. */
.audit-report {
  background: var(--navy-10);
  min-height: 100vh;
  padding: 24px 16px 60px;
}

.audit-report-toolbar {
  max-width: 800px;
  margin: 0 auto 16px;
}

.audit-report-page {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 24px rgba(27, 32, 52, 0.12);
}

.audit-report-letterhead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 3px solid var(--gold);
}

.audit-report-crest {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.audit-report-school {
  font-size: calc(13px + var(--font-boost));
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.audit-report-app {
  font-size: calc(22px + var(--font-boost));
  color: var(--navy);
  font-weight: 700;
  margin-top: 2px;
}

.audit-report-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 5px solid var(--navy);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.audit-report-card h3 {
  margin: 0 0 12px;
  font-size: calc(15px + var(--font-boost));
  color: var(--navy);
}

.audit-report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  font-size: calc(13px + var(--font-boost));
}

.audit-report-field-label {
  display: block;
  font-size: calc(11px + var(--font-boost));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 2px;
}

.audit-report-section-title {
  margin: 28px 0 14px;
  font-size: calc(17px + var(--font-boost));
  color: var(--navy);
}

.audit-report-timeline-card {
  padding: 12px 16px;
}

.audit-report-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 700;
  font-size: calc(13px + var(--font-boost));
  color: var(--navy);
}

.audit-report-timeline-date {
  font-weight: 400;
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
  white-space: nowrap;
}

.audit-report-timeline-body {
  margin-top: 6px;
  font-size: calc(13px + var(--font-boost));
  color: var(--text);
  white-space: pre-wrap;
}

.audit-report-tabs {
  display: flex;
  gap: 8px;
}

.audit-report-category {
  margin-bottom: 18px;
}

.audit-report-category-summary {
  cursor: pointer;
  font-size: calc(15px + var(--font-boost));
  color: var(--navy);
  font-weight: 700;
  padding: 8px 0;
  list-style: none;
}

.audit-report-category-summary::-webkit-details-marker {
  display: none;
}

.audit-report-category-summary::before {
  content: '▸ ';
}

.audit-report-category[open] > .audit-report-category-summary::before {
  content: '▾ ';
}

.audit-report-category-count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
}

.audit-report-footer {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: calc(11px + var(--font-boost));
  color: var(--text-muted);
  text-align: center;
}

@media print {
  .no-print {
    display: none !important;
  }
  /* The audit report renders inside the normal app Layout (masthead/sidebar/footer) — hide
     that chrome for print generally, not just on this page, since app navigation printed
     alongside a document is never useful. */
  .sticky-header-group,
  .sidebar,
  .sidebar-backdrop,
  .site-footer {
    display: none !important;
  }
  .app-shell,
  .app-shell .main {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .audit-report {
    background: var(--white);
    padding: 0;
  }
  .audit-report-page {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
  }
  .audit-report-card {
    break-inside: avoid;
  }
}

/* "Add to home screen" nudge — fixed to the bottom of the viewport, mobile-only in practice
   (InstallPrompt.tsx never renders it on desktop), styled like a real native install banner
   rather than another gray form card. */
.install-prompt {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  background: var(--navy);
  color: var(--white);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  max-width: 480px;
  margin: 0 auto;
}

.install-prompt-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--navy-20);
  padding: 4px;
}

.install-prompt-close:hover {
  color: var(--white);
}

.install-prompt-title {
  font-weight: 700;
  font-size: calc(15px + var(--font-boost));
  margin-bottom: 6px;
  padding-right: 24px;
}

.install-prompt-body {
  margin: 0 0 12px;
  font-size: calc(13px + var(--font-boost));
  color: var(--navy-10);
  line-height: 1.5;
}

.install-prompt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.install-prompt-optout {
  background: transparent;
  border: none;
  color: var(--navy-20);
  font-size: calc(12px + var(--font-boost));
  text-decoration: underline;
  margin-left: auto;
  padding: 4px;
}

.install-prompt-optout:hover {
  color: var(--white);
}

@media (max-width: 480px) {
  .install-prompt {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 14px 16px;
  }
}

/* ── Email Studio ─────────────────────────────────────────────────────────────────────────
   Owner-only broadcast composer (Admin → Email Studio). Ported from a sister system's
   reference implementation — original CSS classes/markup kept, styled fresh here with this
   app's own tokens rather than importing an unrelated stylesheet. */
.email-studio-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.email-studio-sender-lock {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.email-studio-sender-lock small {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.email-studio-sender-lock span {
  font-size: calc(12px + var(--font-boost));
  color: var(--text-muted);
}

.email-studio-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .email-studio-layout {
    grid-template-columns: 1fr;
  }
}

.email-studio-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 520px;
  overflow-y: auto;
}

.email-studio-history-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.email-studio-history-item.selected {
  border-color: var(--navy);
  background: var(--grey-soft);
}
.email-studio-history-item small {
  color: var(--text-muted);
  font-size: calc(11px + var(--font-boost));
}

.email-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--grey-soft);
  color: var(--text-muted);
}
.email-status.draft {
  background: var(--saffron-light);
  color: var(--gold-deep);
}
.email-status.sent {
  background: var(--skye-light);
  color: var(--skye);
}
.email-status.archived {
  background: var(--navy-10);
  color: var(--navy-50);
}

.email-studio-record-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.email-studio-record-heading small {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.email-studio-step {
  padding: 16px 0;
}
.email-step-kicker {
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}

.email-fields {
  display: grid;
  gap: 14px;
  max-width: 560px;
}
.email-fields.two-column {
  grid-template-columns: 1fr 1fr;
  max-width: none;
}
.email-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.email-fields label span:first-child {
  font-weight: 600;
  font-size: calc(13px + var(--font-boost));
}
.email-fields label small {
  color: var(--text-muted);
  font-size: calc(11px + var(--font-boost));
}

.email-audience-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
@media (max-width: 700px) {
  .email-audience-options {
    grid-template-columns: 1fr;
  }
}
.email-audience-options button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.email-audience-options button.selected {
  border-color: var(--navy);
  background: var(--grey-soft);
}
.email-audience-options button span {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 0.05em;
}
.email-audience-options button small {
  color: var(--text-muted);
  font-size: calc(11px + var(--font-boost));
}
.email-audience-options button b {
  margin-top: 4px;
  font-size: calc(12px + var(--font-boost));
  color: var(--navy);
}

.email-live-audience {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--skye-light);
  border: 1px solid var(--skye);
  margin-bottom: 10px;
}
.email-live-audience > span {
  color: var(--skye);
  font-weight: 700;
}
.email-live-audience div {
  flex: 1;
}
.email-live-audience small {
  color: var(--text-muted);
  font-size: calc(11px + var(--font-boost));
}

.email-audience-review {
  margin-bottom: 10px;
}
.email-audience-review summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 600;
  font-size: calc(12px + var(--font-boost));
}
.email-audience-review div {
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
  display: grid;
  gap: 4px;
}
.email-audience-review p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 4px 8px;
  font-size: calc(12px + var(--font-boost));
  border-bottom: 1px solid var(--border);
}
.email-audience-review span {
  color: var(--text-muted);
}

.email-manual-audience label span:first-child {
  font-weight: 600;
}
.email-manual-member-list {
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--grey-soft);
}
.email-manual-member-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}
.email-manual-member-list input[type='checkbox'] {
  width: auto;
}
.email-manual-member-list small {
  color: var(--text-muted);
  margin-left: 6px;
}
.email-wide-field textarea {
  width: 100%;
}

.email-section-editor {
  display: grid;
  gap: 14px;
  margin: 14px 0;
}
.email-section-editor article {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--surface);
}
.email-section-editor header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.email-section-editor header span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.email-section-order {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.email-section-order button {
  font-size: calc(11px + var(--font-boost));
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.email-section-order button.remove {
  color: var(--scarlett);
  border-color: var(--scarlett);
}
.email-section-heading-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  margin-bottom: 10px;
}
.email-add-section {
  align-self: start;
  padding: 10px 16px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
}

.email-rich-editor {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.email-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--grey-soft);
  border-bottom: 1px solid var(--border);
}
.email-rich-toolbar button,
.email-rich-toolbar label {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: calc(12px + var(--font-boost));
  cursor: pointer;
}
.email-rich-toolbar label input[type='file'] {
  display: none;
}
.email-rich-toolbar label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.email-rich-area {
  min-height: 120px;
  padding: 12px 14px;
  font-size: calc(14px + var(--font-boost));
  line-height: 1.5;
  outline: none;
}
.email-rich-area:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}
.email-rich-area p {
  margin: 0 0 10px;
}
.email-rich-area blockquote {
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--gold);
  background: var(--grey-soft);
  color: var(--text-muted);
}

.email-inline-link-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  background: var(--saffron-light);
  border-bottom: 1px solid var(--border);
}
.email-inline-link-panel label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: calc(11px + var(--font-boost));
  flex: 1;
  min-width: 160px;
}
.email-inline-link-panel button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: white;
  cursor: pointer;
}
.email-inline-link-panel button.quiet {
  background: transparent;
  color: var(--navy);
}
.email-inline-link-panel [role='alert'] {
  color: var(--scarlett);
  font-size: calc(11px + var(--font-boost));
}

.email-inline-image-list {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: var(--grey-soft);
  border-top: 1px solid var(--border);
}
.email-inline-image-list > div {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 10px;
  align-items: start;
}
.email-inline-image-list img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.email-inline-image-list span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.email-inline-image-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.email-inline-image-controls label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: calc(11px + var(--font-boost));
}
.email-inline-image-controls button {
  color: var(--scarlett);
  background: none;
  border: none;
  cursor: pointer;
  font-size: calc(11px + var(--font-boost));
}
.email-image-width {
  min-width: 140px;
}

.email-attachment-editor {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--grey-soft);
}
.email-attachment-editor header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.email-attachment-editor header span {
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
  display: block;
}
.email-attachment-editor label {
  padding: 6px 12px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
}
.email-attachment-editor label input {
  display: none;
}
.email-attachment-editor article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.email-attachment-editor article div {
  flex: 1;
}
.email-attachment-editor article button {
  color: var(--scarlett);
  background: none;
  border: none;
  cursor: pointer;
}

.email-brand-lock {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--navy);
  margin-bottom: 16px;
}
.email-brand-lock img {
  width: 140px;
  height: auto;
}
.email-brand-lock strong {
  color: white;
  display: block;
  margin-bottom: 4px;
}
.email-brand-lock p {
  color: var(--navy-10);
  margin: 0;
  font-size: calc(12px + var(--font-boost));
}
.email-signature-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--grey-soft);
}
.email-signature-card small {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.email-signature-card span {
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
}

.email-preview-frame {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}
.email-preview-frame iframe {
  width: 100%;
  height: 640px;
  border: none;
}
.email-preview-step.preview-mobile .email-preview-frame iframe {
  width: 380px;
  margin: 0 auto;
  display: block;
}

.email-send-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0;
}
@media (max-width: 700px) {
  .email-send-summary {
    grid-template-columns: 1fr;
  }
}
.email-send-summary > div {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.email-send-summary small {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.email-send-summary strong {
  display: block;
  margin: 2px 0;
}
.email-send-summary span {
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
}

.email-test-gate,
.email-final-gate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  background: var(--surface);
}
.email-test-gate p,
.email-final-gate p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: calc(12px + var(--font-boost));
}

.email-send-confirmation {
  padding: 16px;
  border: 1.5px solid var(--scarlett);
  border-radius: 10px;
  background: var(--saffron-light);
  margin-bottom: 12px;
}
.email-send-confirmation p {
  color: var(--navy);
}