:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e2e5ea;
  --text: #1c2230;
  --muted: #64708a;
  --brand: #2f1a6b;
  --brand-dark: #1f1048;
  --brand-tint: #f1eef8;
  --ok: #10795a;
  --ok-tint: #e8f5f0;
  --warn: #9a6200;
  --warn-tint: #fdf3e2;
  --danger: #b3261e;
  --danger-tint: #fdecea;
  --info: #1d4ed8;
  --info-tint: #eaf0fe;
  --radius: 10px;
  /* One gap between cards, however they are laid out: stacked, side by
     side in a grid, or one grid above another. Three different values
     is what produced the inline margin-bottom patches this replaces. */
  --card-gap: 20px;
  --shadow: 0 1px 2px rgba(20, 26, 40, .06), 0 6px 20px rgba(20, 26, 40, .05);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus-ring: 0 0 0 3px rgba(47, 26, 107, .22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--info); }
a:hover { color: #14349a; }

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header .inner,
.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}

.wrap { padding-top: 32px; padding-bottom: 64px; }
.wrap.wide, .site-header .inner.wide { max-width: 1240px; }

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}

.brand {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  white-space: nowrap;
}

.brand-logo {
  height: 26px;
  width: auto;
  display: block;
}

.nav {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; min-width: 0; scrollbar-width: thin;
}
.nav::-webkit-scrollbar { height: 4px; }
.nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.nav a, .nav button {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 7px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex: none;
}

@media (max-width: 640px) {
  .nav { gap: 2px; }
  .nav a, .nav button { padding: 6px 8px; font-size: 13px; }
}
.nav a:hover, .nav button:hover { background: var(--bg); color: var(--text); }
.nav a.active { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }

/* App shell: a persistent left sidebar for the internal dashboard, content
   to its right — replaces the top nav row there entirely. */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }

.sidebar {
  width: 220px; flex: none;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 22px;
  padding: 20px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { padding: 0 8px; }


.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-nav a {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; color: var(--muted); text-decoration: none;
  padding: 9px 11px; border-radius: 8px;
}
.nav-icon { flex: none; color: #9aa1b1; }
.sidebar-nav a:hover .nav-icon, .sidebar-user button:hover .nav-icon { color: var(--text); }
.sidebar-nav a.active .nav-icon { color: var(--brand); }
.sidebar-nav a:hover { background: var(--bg); color: var(--text); }
.sidebar-nav a.active { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }

.sidebar-group { display: flex; flex-direction: column; }
.sidebar-group-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; font-size: 14.5px; color: var(--muted);
  padding: 9px 12px; border-radius: 8px; border: 0; background: none;
  cursor: pointer; font-family: inherit;
}
.sidebar-group-toggle:hover { background: var(--bg); color: var(--text); }
.sidebar-group-toggle .chevron {
  font-size: 11px; color: var(--muted); transition: transform .15s; width: 8px;
}
.sidebar-group.open .sidebar-group-toggle .chevron { transform: rotate(90deg); }

.sidebar-group-items {
  display: none; flex-direction: column; gap: 2px;
  padding-left: 16px; margin-top: 2px;
}
.sidebar-group.open .sidebar-group-items { display: flex; }

.sidebar-user {
  border-top: 1px solid var(--border); padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.sidebar-user form { margin: 0; }
.sidebar-user form button {
  position: relative;
  width: 100%; display: flex; align-items: center; gap: 11px;
  text-align: left; font-size: 14px; color: var(--muted);
  padding: 9px 11px; border-radius: 8px; border: 0; background: none;
  cursor: pointer; font-family: inherit;
}
.sidebar-user form button:hover { background: var(--bg); color: var(--text); }

/* Who is signed in: an initial that survives the collapsed rail, and the
   address beside it when there is room for it. */
.sidebar-identity { display: flex; align-items: center; gap: 9px; padding: 0 3px; }
.sidebar-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-dark);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.sidebar-email {
  min-width: 0; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The per-browser view preferences. One shared look: three controls each
   wearing a different button style is what this cluster used to be. */
.sidebar-prefs { display: flex; flex-direction: column; gap: 4px; }
.sidebar-pref, .sidebar-pref-select {
  width: 100%; font-family: inherit; font-size: 12.5px; color: var(--muted);
  text-align: left; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); cursor: pointer;
}
.sidebar-pref:hover, .sidebar-pref-select:hover { border-color: #c3c8d2; color: var(--text); }
.sidebar-pref[hidden] { display: none; }

.app-main { flex: 1; min-width: 0; }

@media (max-width: 720px) {
  .sidebar { width: 180px; padding: 16px 10px; gap: 16px; }
}

h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.02em; }
h2 { font-size: 19px; margin: 0 0 12px; letter-spacing: -.01em; }
h3 { font-size: 15px; margin: 0 0 8px; }
p { margin: 0 0 14px; }
.lede { color: var(--muted); font-size: 15px; max-width: 62ch; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: var(--card-gap);
}
.card.tight { padding: 16px 18px; }
.card h2:first-child, .card h1:first-child { margin-top: 0; }
.card-link { display: block; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
.card-link:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(47, 26, 107, .12); }

.card.link-card { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.card.link-card:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.card.link-card h2 { font-size: 16.5px; display: flex; align-items: center; gap: 8px; }
.card.link-card p { margin: 0; }

.settings-subnav {
  display: flex; flex-wrap: nowrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px;
  overflow-x: auto; scrollbar-width: none;
  /* Fade the right edge so tabs that run past it read as scrollable. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  padding-right: 28px;
}
.settings-subnav::-webkit-scrollbar { display: none; }
.settings-subnav a {
  padding: 9px 11px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; flex: none; border-radius: 6px 6px 0 0;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.settings-subnav a:hover { background: var(--bg); }
.settings-subnav a:hover { color: var(--text); }
.settings-subnav a.active { color: var(--brand); border-bottom-color: var(--brand); }

.grid { display: grid; gap: var(--card-gap); margin-bottom: var(--card-gap); }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.grid.with-aside { grid-template-columns: 1fr 320px; align-items: stretch; }
@media (max-width: 760px) {
  .grid.two, .grid.three, .grid.four, .grid.with-aside { grid-template-columns: 1fr; }
}

/* --- forms --------------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field { margin-bottom: 18px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* Every text-like input. A type missing from this list does not inherit a
   slightly-off style, it inherits the browser's default one and visibly
   does not match its neighbours -- which is exactly how tel arrived. */
input[type=text], input[type=email], input[type=number], input[type=tel],
select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid #ccd2dc;
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47, 26, 107, .13);
}
textarea { min-height: 110px; resize: vertical; }

/* A card heading with an action beside it. The actions on this card are
   about the case, which is why the menu sits here rather than under the
   comment box, where it read as a way of sending a comment. */
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.card-head > h2 { margin-bottom: 0; }

/* Two short fields on one line. Collapses to a single column on a phone,
   where side-by-side inputs are too narrow to type into comfortably. The
   fields give up their own bottom margin -- the row carries the spacing a
   single .field would have, so the vertical rhythm of the form is unchanged. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  margin-bottom: 18px;
}
.field-row > .field { margin-bottom: 0; }
@media (max-width: 760px) {
  .field-row { grid-template-columns: 1fr; gap: 18px 0; }
}

.radio-group { display: grid; gap: 8px; }
.radio {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  border: 1px solid #ccd2dc;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: border-color .12s, background .12s;
}
.radio:hover { border-color: #9aa5b6; }
.radio input { margin: 3px 0 0; accent-color: var(--brand); }
.radio span { font-size: 14.5px; }
.radio.checked { border-color: var(--brand); background: var(--brand-tint); }

.btn {
  display: inline-block;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
}
.btn:hover { background: var(--brand-dark); color: #fff; }
.btn.secondary { background: #fff; color: var(--text); border-color: #ccd2dc; }
.btn.secondary:hover { background: var(--bg); color: var(--text); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #8f1e17; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

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

.btn.full { display: block; width: 100%; text-align: center; }
.btn.google { background: #1a56db; }
.btn.google:hover { background: #1544ad; }

/* --- standalone auth pages (login/sign-in) — no site header/footer, just a
   centered card, so signing in doesn't compete with site navigation. --- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 32px;
}

.auth-logo { height: 26px; width: auto; display: block; margin-bottom: 22px; }

.auth-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.auth-title { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.auth-lede { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.link-button {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--info); text-decoration: underline; cursor: pointer;
}

/* --- notices ------------------------------------------------------------- */

.notice {
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 14.5px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.notice.error { background: var(--danger-tint); border-color: #f3c8c4; color: #7d1a14; }
.notice.warn { background: var(--warn-tint); border-color: #f0dcb4; color: #6f4700; }
.notice.ok { background: var(--ok-tint); border-color: #bfe3d6; color: #0b5741; }
.notice.info { background: var(--info-tint); border-color: #c8d7fb; color: #17357f; }
.notice strong { display: block; margin-bottom: 3px; }

/* --- badges -------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}
.badge.ok { background: var(--ok-tint); color: var(--ok); border-color: #bfe3d6; }
.badge.warn { background: var(--warn-tint); color: var(--warn); border-color: #f0dcb4; }
.badge.danger { background: var(--danger-tint); color: var(--danger); border-color: #f3c8c4; }
.badge.info { background: var(--info-tint); color: var(--info); border-color: #c8d7fb; }
.badge.brand { background: var(--brand-tint); color: var(--brand-dark); border-color: #d6cfe8; }

/* --- data display -------------------------------------------------------- */

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 9px 18px; font-size: 14.5px; }
.kv dt { color: var(--muted); font-size: 13.5px; }
.kv dd { margin: 0; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 10px; } }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 12px; border-bottom: 1px solid #eef0f4; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
.table-wrap { overflow-x: auto; margin: 0 -22px -22px; padding: 0 22px 4px; }
/* Keep columns readable rather than letting the browser wrap a subject one
   word per line; the wrapper scrolls horizontally when space runs out. */
.table-wrap table { min-width: 720px; }
.table-wrap td:nth-child(2) { min-width: 230px; }

.stat { text-align: left; }
.stat .n { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat .l { font-size: 13px; color: var(--muted); margin-top: 3px; }
.stat.danger .n { color: var(--danger); }
.stat.warn .n { color: var(--warn); }

.clock {
  display: flex; align-items: baseline; gap: 8px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}
.clock .label { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.clock .value { font-size: 15.5px; font-weight: 600; margin-left: auto; text-align: right; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--border); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--surface);
}
.timeline .when { font-size: 12.5px; color: var(--muted); }
.timeline .what { font-size: 14.5px; font-weight: 600; }
.timeline .note { font-size: 14px; color: var(--muted); }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: none; }
.checklist form { display: inline-flex; margin: 0; }
.checklist .title { font-size: 14.5px; }
.checklist .title.done { color: var(--muted); text-decoration: line-through; }
.task-check {
  width: 20px; height: 20px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
}
.task-check.done { background: var(--brand); border-color: var(--brand); color: #fff; }

.permalink {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.permalink code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--brand-dark); overflow-wrap: anywhere;
}

.comment-thread { list-style: none; margin: 0 0 16px; padding: 0; }
.comment-thread li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.comment-thread li:last-child { border-bottom: none; }
.comment-thread .who { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.comment-thread .body { font-size: 14.5px; white-space: pre-wrap; }

.level-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.level-card > summary {
  list-style: none; cursor: pointer; padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
}
.level-card > summary::-webkit-details-marker { display: none; }
.level-card > summary:hover { background: var(--bg); }
.level-summary-main { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.level-summary-main .level-name { font-weight: 600; }
.level-summary-main .chevron {
  display: inline-block; color: var(--muted); font-size: 12px; width: 10px;
  transition: transform .15s;
}
.level-card[open] .level-summary-main .chevron { transform: rotate(90deg); }
.level-summary-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.level-card .level-body { padding: 4px 20px 20px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 18px; }

.bar { height: 8px; border-radius: 4px; background: var(--brand); min-width: 3px; transform-origin: left; animation: bar-grow .6s var(--ease) both; }
.bar-row { display: grid; grid-template-columns: 1fr 70px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.bar-row .track { background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar-row .count { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* A case number set apart from the words around it. It is a reference the
   customer copies, reads back over the phone and matches against an email
   subject, so it wants to look like data rather than prose. Sized in `em` so
   it tracks whatever it sits in -- monospace runs wide, and at 1em beside a
   heading it looks a size too big. */
/* The staff "whose clock am I reading?" switch. Pressed state is a real
   colour change rather than a subtle one: reading a list in someone else's
   timezone is a mode you want to be obvious you are in. */
.time-toggle[aria-pressed="true"] {
  background: var(--brand-tint);
  color: var(--brand-dark);
  border-color: #d6cfe8;
  font-weight: 600;
}

/* The marker on a link that leaves this app for Salesforce (the case_link
   macro). Quiet and small: it is a signpost on a link that already reads as
   one, not a second thing to look at. */
.ext { margin-left: 3px; font-size: .85em; opacity: .65; }

.case-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  letter-spacing: -.01em;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  border: 1px solid #d6cfe8;
}
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.stack > * + * { margin-top: 14px; }
.divider { height: 1px; background: var(--border); margin: 20px 0; border: 0; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; }
.filters input[type=text] { min-width: 230px; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 22px 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

details.help { margin-top: 10px; }
details.help summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }
details.help[open] summary { margin-bottom: 8px; }

/* =========================================================================
   Polish — motion, focus, layout and mobile. Kept in one place so the feel
   of the whole app can be tuned without hunting through the file.
   ========================================================================= */

::selection { background: rgba(47, 26, 107, .16); }
html { -webkit-text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.wrap { width: 100%; }
.site-footer { margin-top: auto; }
.app-shell { flex: 1; }
.app-main { display: flex; flex-direction: column; min-height: 100vh; }

/* Smooth page changes: the browser cross-fades between pages while the
   sidebar / header stay put (where View Transitions are supported); every
   page's content also eases in, so older browsers still feel calm. */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
main.wrap, .auth-card { animation: page-in .28s var(--ease) both; }

/* Interactive elements all ease the same way. */
a, .btn, button, input, select, textarea, .card, .radio, .badge,
.sidebar-nav a, .sidebar-group-toggle, .sidebar-user button, .nav a, .nav button,
.task-check, tbody tr, .level-card > summary {
  transition: color .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease),
              transform .18s var(--ease), opacity .18s var(--ease);
}

.btn { box-shadow: 0 1px 2px rgba(20, 26, 40, .08); }
.btn:hover { box-shadow: 0 4px 12px rgba(47, 26, 107, .18); }
.btn:active { transform: translateY(1px) scale(.99); box-shadow: none; }
.btn.secondary:hover { border-color: #b9c0cc; box-shadow: 0 2px 6px rgba(20, 26, 40, .06); }
.btn.google:hover { box-shadow: 0 4px 12px rgba(26, 86, 219, .22); }
.btn.danger:hover { box-shadow: 0 4px 12px rgba(179, 38, 30, .2); }
.btn[disabled]:hover { box-shadow: none; transform: none; }

a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: 6px;
}
input:focus, select:focus, textarea:focus { box-shadow: var(--focus-ring); }

.card-link:hover, .card.link-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(47, 26, 107, .10); }
tbody tr:hover { background: #f8f7fc; }
th { background: #fafafd; }
thead th:first-child { border-top-left-radius: 8px; }
thead th:last-child { border-top-right-radius: 8px; }

.sidebar-nav a.active, .nav a.active { box-shadow: inset 3px 0 0 var(--brand); }
.nav a.active { box-shadow: none; }
.sidebar-group-items { animation: page-in .2s var(--ease) both; }

.nav-email { padding: 0 8px; }

/* Thin, quiet scrollbars where content scrolls sideways. */
.table-wrap { scrollbar-width: thin; scrollbar-color: #d5d9e0 transparent; }
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: #d5d9e0; border-radius: 3px; }

.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sidebar-menu-toggle { display: none; }

/* --- phones and small tablets ------------------------------------------- */
@media (max-width: 760px) {
  .grid.four { grid-template-columns: 1fr 1fr; }
  .stat .n { font-size: 26px; }
  h1 { font-size: 23px; }
  .wrap { padding-top: 22px; padding-left: 16px; padding-right: 16px; }
  .card { padding: 18px; }
  .table-wrap { margin: 0 -18px -18px; padding: 0 18px 4px; }
  .filters input[type=text] { min-width: 0; width: 100%; }
  .filters .field { flex: 1 1 100%; }
}

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .app-main { min-height: 0; flex: 1; width: 100%; }
  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 20;
    padding: 10px 16px; gap: 0; border-right: 0; border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .sidebar-menu-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 12px; cursor: pointer;
  }
  .sidebar-nav, .sidebar-user { display: none; }
  .sidebar.menu-open { gap: 14px; padding-bottom: 14px; box-shadow: 0 10px 24px rgba(20, 26, 40, .08); }
  .sidebar.menu-open .sidebar-user { display: flex; animation: page-in .2s var(--ease) both; }
  .sidebar.menu-open .sidebar-nav { display: flex; animation: page-in .2s var(--ease) both; }
}

@media (max-width: 640px) {
  .nav-email { display: none; }
  .site-header .inner { padding: 0 12px; gap: 8px; }
  .site-header .brand-logo { height: 20px; }
  .nav { scrollbar-width: none; gap: 0; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a, .nav button { padding: 6px 7px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}

/* Cards inside a grid are spaced by the grid gap, not their own margin. */
.grid > .card { margin-bottom: 0; }

/* --- Settings overview tiles & breadcrumb ------------------------------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--muted); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: #c3c8d2; }
.breadcrumb [aria-current] { color: var(--text); font-weight: 600; }
h1 .badge, h2 .badge { vertical-align: middle; position: relative; top: -2px; }

.card.link-card.settings-tile { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; }
.settings-tile .tile-icon {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.settings-tile .tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.settings-tile .tile-title { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settings-tile .tile-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }
.settings-tile .tile-arrow { flex: none; align-self: center; color: #c3c8d2; transition: transform .18s var(--ease), color .18s var(--ease); }
.settings-tile:hover .tile-icon { background: var(--brand); color: #fff; }
.settings-tile:hover .tile-arrow { color: var(--brand); transform: translateX(3px); }
.settings-tile:hover { border-color: #cfc8e4; }

/* --- "i" button that reveals a timestamp -------------------------------- */
.time-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }
.info-btn {
  width: 17px; height: 17px; padding: 0; border-radius: 50%;
  border: 1.5px solid #b4bac6; background: #fff; color: #7b8498;
  font: italic 700 11px/1 Georgia, "Times New Roman", serif;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.info-btn:hover, .info-btn:focus-visible { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.info-pop {
  position: absolute; left: -6px; top: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: 240px;
  padding: 7px 11px; border-radius: 8px;
  background: #1c2230; color: #fff;
  font: 500 12.5px/1.35 var(--font); letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 20px rgba(20, 26, 40, .22);
  opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.info-pop::before {
  content: ""; position: absolute; left: 12px; top: -4px; width: 8px; height: 8px;
  background: #1c2230; transform: rotate(45deg); border-radius: 1px;
}
.time-info:hover .info-pop, .time-info:focus-within .info-pop { opacity: 1; visibility: visible; transform: none; }
.timeline .what .time-info { margin-left: 6px; }
.time-info.open .info-pop { opacity: 1; visibility: visible; transform: none; }
.info-pop.flip { left: auto; right: -6px; }
.info-pop.flip::before { left: auto; right: 12px; }

/* A timestamp popover that is hidden near the right edge must not make the
   whole page scroll sideways. `clip` (unlike `hidden`) keeps the sticky
   sidebar working. */
html, body { overflow-x: clip; }

/* --- Staff activity path (header of an escalation) ----------------------- *
 * One chevron per level, left to right, then the outcome. The colour deepens
 * with the level (L1 lightest ... L4 strongest), so a glance shows how far up
 * the ladder the case has climbed. Everything that happened at a level sits in
 * its "i" popover.                                                          */
.path-wrap { margin: 0 0 18px; }
.path-label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.path { list-style: none; margin: 0; padding: 0; display: flex; }
.path-step {
  --step-bg: #ebe7f6; --step-fg: #2f1a6b;
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0; max-width: 250px; min-height: 52px; margin-left: -12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 24px 0 28px; color: var(--step-fg);
}
.path-step:first-child { margin-left: 0; padding-left: 18px; }
.path-step::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--step-bg);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.path-step:first-child::before {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  border-radius: 8px 0 0 8px;
}
/* a step with an open popover must sit above its neighbours */
.path-step:hover, .path-step:focus-within, .path-step:has(.time-info.open) { z-index: 40; }

.path-text { display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 0; text-align: center; }
.path-lvl { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.path-status { font-size: 12px; font-weight: 600; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.path-step.current .path-lvl::before { content: "\25CF"; font-size: 9px; margin-right: 5px; vertical-align: 1px; }

.lv-1 { --step-bg: #ebe7f6; --step-fg: #2f1a6b; }
.lv-2 { --step-bg: #c6bbe8; --step-fg: #23114f; }
.lv-3 { --step-bg: #7b67bf; --step-fg: #ffffff; }
.lv-4 { --step-bg: #2f1a6b; --step-fg: #ffffff; }
.kind-resolved  { --step-bg: #bfe9dc; --step-fg: #0b5741; }
.kind-withdrawn { --step-bg: #e3e6ec; --step-fg: #5b6579; }

.path-step .time-info { margin-left: 0; flex: none; }
.lv-3 .info-btn, .lv-4 .info-btn { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.lv-3 .info-btn:hover, .lv-4 .info-btn:hover,
.lv-3 .info-btn:focus-visible, .lv-4 .info-btn:focus-visible { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }
.kind-resolved .info-btn { border-color: #5fb89f; color: #0b5741; }

.step-pop { width: 290px; max-width: 290px; white-space: normal; text-align: left; font-weight: 500; padding: 12px 14px; }
.step-pop .pop-row { display: block; }
.step-pop .pop-row + .pop-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16); }
.step-pop .pop-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.step-pop strong { font-weight: 700; font-size: 13px; }
.step-pop .pop-when { font-size: 12px; opacity: .78; white-space: nowrap; font-variant-numeric: tabular-nums; }
.step-pop .pop-sub { display: block; margin-top: 3px; font-size: 12px; opacity: .85; overflow-wrap: anywhere; }
.step-pop .pop-note {
  display: block; margin-top: 7px; padding: 6px 9px; font-size: 12.5px; line-height: 1.4;
  background: rgba(255,255,255,.1); border-left: 3px solid rgba(255,255,255,.45); border-radius: 0 6px 6px 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .path { flex-direction: column; gap: 6px; }
  .path-step { flex: none; max-width: none; margin-left: 0; padding: 0 18px; min-height: 46px; justify-content: space-between; }
  .path-step::before, .path-step:first-child::before { clip-path: none; border-radius: 8px; }
  .path-text { flex-direction: row; gap: 8px; align-items: baseline; }
}

/* Escalation detail: keep both columns inside the page. A plain 1fr track
   grows to fit its widest unbreakable text (a staff email in Level tasks),
   which pushed the right column off-screen. */
.grid.two.detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detail-grid .checklist li { flex-wrap: wrap; }
.detail-grid .checklist .small { overflow-wrap: anywhere; }
@media (max-width: 760px) { .grid.two.detail-grid { grid-template-columns: 1fr; } }
.detail-grid .kv dd { overflow-wrap: anywhere; }

/* --- Compact fact grids (escalation detail: The case / The escalation) --- *
 * Short fields sit side by side with a small label above the value; long
 * ones (subject, notes) span the full width.                               */
.card.compact { padding: 16px 18px; }
.card.compact h2 { font-size: 16px; margin: 0 0 12px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.fact { min-width: 0; }
.fact dt {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 2px;
}
.fact dd { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: break-word; }
.fact dd .sub { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.fact.wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }
}

/* Narrow key/value list for cards that sit side by side. */
.kv.narrow { grid-template-columns: 112px minmax(0, 1fr); gap: 8px 14px; }

/* Two cards that share a row and match in height (merchant status page). */
.grid.with-aside.paired > .paired-top { display: flex; align-self: stretch; }
.paired-top > .card { flex: 1; margin-bottom: 0; min-width: 0; }

/* A long comment list scrolls inside its card instead of lengthening the page.
   The soft shadows appear only on the side that has more to scroll to. */
.comment-thread.scroll {
  max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 8px 0 0; margin-right: -8px;
  scrollbar-width: thin; scrollbar-color: #cdd2dc transparent;
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) 0 0 / 100% 36px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) 0 100% / 100% 36px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(20,26,40,.16), transparent) 0 0 / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(20,26,40,.16), transparent) 0 100% / 100% 12px no-repeat scroll;
  background-color: #fff;
}
.comment-thread.scroll::-webkit-scrollbar { width: 6px; }
.comment-thread.scroll::-webkit-scrollbar-thumb { background: #cdd2dc; border-radius: 3px; }
.comment-thread.scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

/* Comment lists scroll vertically only. */
.comment-thread.scroll { overflow-x: hidden; }
.comment-thread .body { overflow-wrap: anywhere; }

/* Merchant status page: the Comments card is exactly as tall as the cards beside
   it ("What you told us" + "What we have committed to"), never taller. The list
   inside scrolls; the newest comment is last. */
.grid.with-aside.paired > .fit-source > .card:last-child { margin-bottom: 0; }
.grid.with-aside.paired > .fit-source, .grid.with-aside.paired > .fit-cell { align-self: stretch; }
.fit-cell { position: relative; min-height: 260px; }
.fit-cell > .card { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; }
.fit-cell .comment-thread.scroll { flex: 1; min-height: 0; max-height: none; margin-bottom: 0; }
@media (max-width: 760px) {
  .fit-cell { min-height: 0; }
  .fit-cell > .card { position: static; display: block; }
  .fit-cell .comment-thread.scroll { max-height: 22rem; }
}

/* The time of each comment, tiny, in its bottom-right corner ("3:30 PM"). The
   full date is in the "i" popover next to the name. */
.comment-thread .c-time {
  display: block; text-align: right; margin-top: 3px;
  font-size: 11px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums;
}
.comment-thread li { padding-bottom: 9px; }

/* Day separators between comments, like a chat: a small centred pill. */
.comment-thread li.day-sep { border: 0; padding: 10px 0 2px; text-align: center; }
.comment-thread li.day-sep span {
  display: inline-block; padding: 3px 11px; border-radius: 8px;
  background: #eef0f4; color: var(--muted); font-size: 11.5px; font-weight: 600;
}
.comment-thread li.day-sep:first-child { padding-top: 2px; }

/* Confirmations that remove themselves (data-autohide): fade, then collapse so
   the content below glides up instead of jumping. */
.notice[data-autohide] {
  overflow: hidden;
  transition: opacity .3s ease, max-height .45s var(--ease), margin .45s var(--ease),
              padding .45s var(--ease), border-width .45s var(--ease);
}
.notice.is-hiding {
  opacity: 0; max-height: 0 !important; margin-top: 0; margin-bottom: 0;
  padding-top: 0; padding-bottom: 0; border-width: 0;
}

/* The response box sits under the thread, like a chat. */
.comment-form { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.comment-form textarea { margin-bottom: 12px; }

/* Internal comments (staff only): a tinted bubble on the right of the thread. */
.comment-thread li.internal {
  margin: 8px 0 8px 18%; padding: 10px 14px 9px;
  background: #fdf3e2; border: 1px solid #f0dcb4; border-radius: 12px 12px 3px 12px;
}
.comment-thread li.internal:last-child { border-bottom: 1px solid #f0dcb4; }
.comment-thread li.internal .who { color: #6f4700; }
.comment-thread li.internal .c-time { color: #9a6200; }
.int-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #f6e3b8; color: #6f4700; font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px;
}
.check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.check .muted { font-weight: 400; }

/* The committed resolution time, in the staff Actions card. */
.commitment { padding: 12px 14px; border: 1px solid #bfe3d6; background: var(--ok-tint); border-radius: 10px; margin-bottom: 10px; }
.commitment-hours { font-size: 22px; font-weight: 700; color: #0b5741; line-height: 1.2; }

/* --- Merchant status page: the two countdowns --------------------------- */
.timers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 640px) { .timers { grid-template-columns: 1fr; } }
.timer { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: #fff; }
.timer-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.timer-step {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); color: var(--muted); font-size: 10px; letter-spacing: 0;
}
.timer.is-active { border-color: #c6bbe8; background: #f7f5fc; }
.timer.is-active .timer-head { color: var(--brand); }
.timer.is-active .timer-step { background: var(--brand); color: #fff; }
.timer.is-done { background: var(--ok-tint); border-color: #bfe3d6; }
.timer.is-done .timer-head { color: #0b5741; }
.timer.is-done .timer-step { background: #0b5741; color: #fff; }
.timer.is-waiting { background: var(--bg); border-style: dashed; }
.timer.is-waiting .cd-sub { margin-top: 6px; }
.cd-time {
  margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: .02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--brand);
}
.timer.is-ended .cd-time { color: var(--danger); }
.cd-bar { height: 4px; border-radius: 3px; background: #e6e1f3; margin: 6px 0 4px; overflow: hidden; }
/* Starts full so a page load doesn't animate the bar in from empty. */
.cd-bar span { display: block; height: 100%; width: 100%; background: var(--brand); border-radius: 3px; transition: width 1s linear; }
.timer.is-ended .cd-bar { background: var(--danger-tint); }
.cd-ends { margin-top: 2px; }
.cd-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cd-due { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--danger); }

.timer.is-done .cd-time.cd-met { color: #0b5741; }
.timer.is-done .cd-bar { background: #cfe9df; }
.timer.is-done .cd-bar span { background: #0b5741; transition: none; }
.card-actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.card-actions .actions-title { margin: 0 0 12px; font-size: 16px; }

/* Respond + Action row, and the action drop-down */
.respond-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.action-menu { position: relative; }
.action-list {
  position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 170px; z-index: 20;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 28px rgba(20, 26, 40, .16);
}
.action-list[hidden] { display: none; }
.action-list button {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px;
  padding: 9px 12px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
}
.action-list button:hover { background: var(--bg); }
.action-list button.danger { color: var(--danger); }
/* The action the level is usually here to take. Withdraw is already marked
   in red as the destructive one, so this gets the brand colour rather than
   another warning: it is the expected next step, not a hazard. */
.action-list button.primary { color: var(--brand-dark); font-weight: 600; }
.action-list button.primary::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: 50%; margin-right: 8px;
  background: var(--brand);
}
.action-list button.primary:hover { background: var(--brand-tint); }
.card-actions[hidden] { display: none; }

/* "Magic link sent" confirmation with a drawn tick */
.sent-hero { text-align: center; padding: 6px 0 4px; }
.sent-hero .auth-lede { margin-bottom: 14px; }
.sent-tick { width: 72px; height: 72px; margin: 4px auto 10px; display: block; }
.sent-circle { stroke: #0b5741; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: sent-draw .6s ease-out forwards; }
.sent-check { stroke: #0b5741; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: sent-draw .4s .5s ease-out forwards; }
.sent-tick { animation: sent-pop .35s .9s ease-out; }
@keyframes sent-draw { to { stroke-dashoffset: 0; } }
@keyframes sent-pop { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .sent-circle, .sent-check { animation: none; stroke-dashoffset: 0; }
  .sent-tick { animation: none; }
}
/* Merchant "The case" card: subject on top, then label/value rows like the other cards. */
.case-subject { margin: 0 0 14px; font-size: 14.5px; line-height: 1.4; overflow-wrap: break-word; }
.case-subject .lbl { color: var(--muted); font-size: 13.5px; margin-bottom: 3px; }

/* Case ID that came in with the link: shown, not asked for. */
.case-chip { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; margin-bottom: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-size: 14.5px; }
.case-chip strong { font-size: 16px; letter-spacing: .02em; }
.case-chip a { margin-left: auto; }

/* Shown while the browser is blocking the new-escalation sound. */
.alert-locked { display: block; width: 100%; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #f0dcb4; border-radius: 8px; background: #fdf3e2; color: #6f4700; font-size: 12.5px; line-height: 1.35; text-align: left; cursor: pointer; }
.alert-locked[hidden] { display: none; }

/* "Who owns this level" heading with the Add person button at the right. */
.owners-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.owners-head h3 { margin: 0; }
form[hidden] { display: none; }

/* --- charts --------------------------------------------------------------
   The SVG is drawn by charts.js; everything here is the frame around it.
   Each chart keeps a <details> table beneath: the no-JavaScript fallback,
   the accessible reading, and the relief that lets the palest slices of the
   pie be identified by label rather than by contrast. */
.chart { margin: 4px 0 2px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg.pie { max-width: 260px; margin: 0 auto; }

.pie-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie-wrap .chart-svg.pie { flex: 0 0 auto; }

.chart-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; min-width: 180px; }
.chart-legend li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 3px 0;
}
.chart-legend .swatch {
  width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
}
.chart-legend .legend-label { flex: 1 1 auto; color: var(--text); }
.chart-legend .legend-count { color: var(--muted); font-variant-numeric: tabular-nums; }

/* A pie slice is focusable, so it needs a focus ring that is visible against
   both ends of the ramp. */
.chart-svg.pie [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.chart-table { margin-top: 10px; }
.chart-table > summary {
  cursor: pointer; font-size: 12.5px; color: var(--muted);
  list-style: none; padding: 2px 0;
}
.chart-table > summary::-webkit-details-marker { display: none; }
.chart-table > summary::before { content: "▸ "; }
.chart-table[open] > summary::before { content: "▾ "; }
.chart-table > summary:hover { color: var(--text); }
/* Long periods make long tables; keep the card from growing without limit. */
.chart-table table { margin-top: 8px; }
.chart-table[open] { max-height: 320px; overflow: auto; }

.chart-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: #1c2230; color: #fff; border-radius: 7px;
  padding: 7px 10px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(16, 22, 38, .22);
  max-width: 240px;
}
.chart-tip .t-label { display: block; color: #c7cdda; }
.chart-tip .t-value { display: block; font-weight: 700; font-size: 14px; }
.chart-tip .t-sub { display: block; color: #c7cdda; font-size: 11.5px; }

@media (max-width: 760px) {
  .pie-wrap { justify-content: center; }
}

/* The escalator's own words for why, under the category they picked. Quoted
   and in their voice: it is the one line on these pages that is not ours. */
.reason-detail {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- the escalation ladder, as the customer sees it ----------------------
   Roles and clocks only. The rung the case is on is marked, and the ones it
   has already passed are dimmed, so "where am I" is answered by position
   rather than by reading every line. */
.ladder { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: rung; }
.ladder li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 0 0 16px; position: relative;
}
/* The line joining the rungs, stopping at the last one. */
.ladder li:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--border);
}
.ladder .rung {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border); position: relative; z-index: 1;
}
.ladder li.here .rung {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.ladder li.passed .rung { background: var(--brand-tint); color: var(--brand-dark); border-color: #d6cfe8; }
.ladder .rung-body { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.ladder .rung-name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ladder li.passed .rung-name { color: var(--muted); font-weight: 500; }
.ladder .rung-when { line-height: 1.45; }
/* Why a level lost the case. Darker than the window line it replaces, so it
   reads as the fact on that rung rather than more small print, but not a
   warning colour: this is our own missed clock, stated plainly. */
.ladder .rung-missed { line-height: 1.45; color: var(--text); }
.ladder .rung-missed::before { content: "↑ "; color: var(--muted); }


/* --- Collapsing the sidebar to an icon rail ------------------------------ *
 * Wide layout only. Below 720px the sidebar is already a bar across the top
 * with its own Menu button, and a second way to hide it would just be two
 * toggles fighting over one element.
 *
 * The state lives on <html> rather than on .app-shell so the inline script in
 * base_internal.html can set it before the shell is parsed; set afterwards it
 * would paint wide and snap shut on every page load.                        */
.sidebar-collapse { display: none; }

@media (min-width: 721px) {
  .sidebar { transition: width .18s var(--ease), padding .18s var(--ease); }

  .sidebar-collapse {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px; padding: 0;
    color: #9aa1b1; background: none; border: 0; border-radius: 7px;
    cursor: pointer;
  }
  .sidebar-collapse:hover { background: var(--bg); color: var(--text); }
  .sidebar-collapse svg { transition: transform .18s var(--ease); }

  .sidebar-collapsed .sidebar { width: 64px; padding-left: 10px; padding-right: 10px; }
  .sidebar-collapsed .sidebar .brand { display: none; }
  .sidebar-collapsed .sidebar-top { justify-content: center; }
  .sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

  /* Clipped, not removed: the link keeps its accessible name, and `title`
     gives sighted readers the same words on hover. */
  .sidebar-collapsed .nav-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .sidebar-collapsed .sidebar-nav a,
  .sidebar-collapsed .sidebar-user form button { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  .sidebar-collapsed .sidebar-identity { justify-content: center; padding: 0; }
  .sidebar-collapsed .sidebar-email { display: none; }
  .sidebar-collapsed .sidebar-prefs { display: none; }
}

/* The summary cards on the dashboard open the rows behind their number. */
a.stat-link { display: block; color: inherit; text-decoration: none; }
a.stat-link:hover { border-color: #c6bbe8; box-shadow: 0 4px 14px rgba(47, 26, 107, .12); }
a.stat-link.selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.chip { display: inline-block; padding: 7px 12px; border-radius: 99px; background: #f1eef8; color: #2f1a6b; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid #d9d0ef; }
.chip:hover { background: #e7e1f5; }

/* @-tagging a teammate in an internal comment. */
.mention-wrap { position: relative; }
.mention-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 26, 40, .16); }
.mention-list[hidden] { display: none; }
.mention-list li { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.mention-list li span { color: var(--muted); font-size: 12px; }
.mention-list li.on, .mention-list li:hover { background: #f1eef8; }

/* The tags bell in the sidebar, its badge and its popover. */
.bell-badge { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 99px; background: #d93a2f; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.bell-badge[hidden] { display: none; }
.bell-link.has-unread .nav-icon { color: #d93a2f; animation: bell-ring 1.2s ease-in-out 1; transform-origin: 50% 0; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .bell-link.has-unread .nav-icon { animation: none; } }
.sidebar-collapsed .bell-link .bell-badge { position: absolute; top: 2px; right: 6px; margin: 0; }
.mention-pop { position: fixed; z-index: 60; width: 340px; max-height: 372px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 36px rgba(20, 26, 40, .2); }
.mention-pop[hidden] { display: none; }
.mention-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.mention-pop ul { list-style: none; margin: 0; padding: 0; }
.mention-pop li a { display: block; padding: 10px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid #f0f1f5; }
.mention-pop li a:hover { background: var(--bg); }
.mention-pop li.unread a { background: #f6f3fd; box-shadow: inset 3px 0 0 var(--brand); }
.mention-pop .mp-top { font-size: 13.5px; font-weight: 600; }
.mention-pop .mp-snip { font-size: 13px; color: var(--muted); margin-top: 2px; }
.mention-pop .mp-when { font-size: 11.5px; color: #9aa1b1; margin-top: 3px; }
.mention-pop p { padding: 14px; margin: 0; }

/* The bell, set like a nav item but down by the profile. */
.bell-link { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; font-size: 14.5px; color: var(--muted); text-decoration: none; }
.bell-link:hover { background: var(--bg); color: var(--text); }
.bell-link:hover .nav-icon { color: var(--text); }
@media (min-width: 721px) {
  .sidebar-collapsed .bell-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
}