/* ============================================================
   indi — mockup recipes
   Every .screen is authored at the product's real density (13px
   root) with the product's real recipes: 232px white sidebar with
   pill nav, aurora header band, 14px cards with two-layer shadows,
   pill buttons, tinted status badges, Geist Mono for times/ids.
   Prefixed m- so the site styles never collide.
   ============================================================ */

.screen {
  width: 1180px;
  height: 740px;
  background: var(--e-bg);
  color: var(--e-ink);
  font-family: var(--e-font);
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.screen.mobile {
  width: 390px;
  height: 844px;
  flex-direction: column;
}

.screen * { box-sizing: border-box; }

.screen p, .screen h1, .screen h2, .screen h3 { margin: 0; }

/* Scene-step visibility: elements with [data-at] start hidden and rise in when
   the scene reaches their time; [data-out] elements fade back out. */
.screen [data-at] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .5s var(--ease-spring);
}

.screen [data-at].in { opacity: 1; transform: none; }

.screen [data-at].pop { transform: scale(.85); }

.screen [data-at].pop.in { transform: none; }

.screen [data-at].slide-r { transform: translateX(18px); }

.screen [data-at].slide-r.in { transform: none; }

.screen [data-at].slide-l { transform: translateX(-18px); }

.screen [data-at].slide-l.in { transform: none; }

.screen [data-out].out { opacity: 0 !important; transform: translateY(-6px) !important; pointer-events: none; }

.no-anim, .no-anim * { transition: none !important; animation: none !important; }

.tnum { font-variant-numeric: tabular-nums; }

.mono { font-family: var(--e-mono); }

/* --- Sidebar ------------------------------------------------ */
.m-sidebar {
  width: 232px;
  flex: none;
  height: 100%;
  background: var(--e-surface);
  border-right: 1px solid var(--e-line);
  padding: 20px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.m-wordmark {
  padding: 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--e-ink);
  line-height: 1.2;
}

.m-nav { display: flex; flex-direction: column; gap: 2px; }

.m-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--e-ink-2);
  transition: background .15s, color .15s;
}

.m-nav a .ms { font-size: 18px; }

.m-nav a.on {
  background: var(--e-nav-on);
  color: var(--e-accent-ink);
  font-weight: 600;
}

.m-nav a.on .ms { font-variation-settings: 'FILL' 1, 'opsz' 20, 'wght' 400; }

.m-nav a small {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--e-ink-3);
  line-height: 1.25;
}

.m-nav a .m-attn {
  margin-left: auto;
  border-radius: 999px;
  background: var(--e-warn);
  color: #fff;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.m-group-label {
  padding: 0 12px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--e-ink-3);
}

.m-org-chip {
  margin: 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  border: 1px solid var(--e-line);
  background: var(--e-surface-2);
  padding: 6px 10px;
}

.m-org-chip .logo {
  width: 22px; height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--e-violet);
  flex: none;
}

.m-org-chip b { display: block; font-size: 11.5px; font-weight: 600; color: var(--e-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m-org-chip .m-col { min-width: 0; }

.m-org-chip span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--e-ink-3); }

.m-sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

.m-theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--e-ink-2);
}

.m-theme-row .ms { font-size: 18px; }

.m-theme-row .m-switch { margin-left: auto; }

.m-switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 36px; height: 20px;
  padding: 2px;
  border-radius: 999px;
  background: var(--e-line-2);
  transition: background .2s ease;
}

.m-switch > i {
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--e-surface);
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.2);
  transition: transform .2s var(--ease-spring);
}

.m-switch.on { background: var(--e-grad); }

.m-switch.on > i { transform: translateX(16px); }

.m-account {
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid var(--e-line);
  padding-top: 12px;
}

.m-account .who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  padding: 4px;
  border-radius: 12px;
}

.m-account .who b { display: block; font-size: 12.5px; font-weight: 600; color: var(--e-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m-account .who span { display: block; font-size: 10.5px; color: var(--e-ink-3); }

.m-account .out {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--e-ink-3);
}

.m-account .out .ms { font-size: 17px; }

/* Avatars — real portraits in the product; illustrated stand-ins here. */
.m-av {
  width: 32px; height: 32px;
  border-radius: 999px;
  overflow: hidden;
  flex: none;
  background: var(--e-surface-2);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}

.m-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.m-av.xs { width: 18px; height: 18px; font-size: 8px; }

.m-av.sm { width: 24px; height: 24px; font-size: 9px; }

.m-av.lg { width: 40px; height: 40px; }

.m-av.xl { width: 56px; height: 56px; }

/* --- Main column + header band ----------------------------- */
.m-main {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.m-band {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--e-line);
  padding: 22px 32px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

.m-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 90% at 12% 0%, rgba(255, 90, 31, 0.13), transparent 60%),
    radial-gradient(45% 80% at 50% 0%, rgba(255, 46, 126, 0.09), transparent 60%),
    radial-gradient(50% 90% at 92% 20%, rgba(122, 90, 248, 0.11), transparent 60%);
}

.m-band > * { position: relative; }

.m-band .titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.m-overline {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--e-ink-3);
}

.m-h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--e-ink);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.m-h1.lg { font-size: 27px; }

.m-h1 > span:first-child { white-space: nowrap; }

.m-beside { font-size: 13px; font-weight: 500; color: var(--e-ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.m-sub { font-size: 12.5px; color: var(--e-ink-2); display: flex; align-items: center; gap: 6px; }

.m-sub .ms { font-size: 15px; color: var(--e-accent-ink); }

.m-band .actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.m-clock {
  font-family: var(--e-mono);
  font-size: 12px;
  color: var(--e-ink-2);
  font-variant-numeric: tabular-nums;
}

.m-bell {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--e-line-2);
  background: var(--e-surface);
  display: grid;
  place-items: center;
  color: var(--e-ink-2);
}

.m-bell .ms { font-size: 18px; }

.m-bell .pip {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--e-grad);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--e-surface);
  transition: transform .3s var(--ease-spring), opacity .3s;
}

.m-bell .pip.hidden { transform: scale(0); opacity: 0; }

.m-content {
  flex: 1;
  min-height: 0;
  padding: 16px 32px 16px;
  overflow: hidden;
}

/* --- Cards / widgets --------------------------------------- */
.m-card {
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: 14px;
  box-shadow: var(--e-shadow-card);
  padding: 20px;
  min-width: 0;
}

.m-card.tight { padding: 16px; }

.m-wh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.m-ic {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--e-accent-soft);
  color: var(--e-accent-ink);
}

.m-ic .ms { font-size: 17px; }

.m-ic.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.m-ic.violet { background: var(--e-violet-bg); color: var(--e-violet); }

.m-ic.magenta { background: var(--e-magenta-bg); color: var(--e-magenta); }

.m-ic.blue { background: var(--e-blue-bg); color: var(--e-blue); }

.m-ic.teal { background: var(--e-teal-bg); color: var(--e-teal); }

.m-ic.amber { background: var(--e-amber-soft); color: var(--e-amber); }

.m-ic.mute { background: var(--e-mute-bg); color: var(--e-mute); }

.m-wt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--e-ink-3);
}

.m-wa {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--e-accent-ink);
  white-space: nowrap;
}

.m-wa .ms { font-size: 16px; }

/* Grid helpers (12-col bento, 18px gap, as /home) */
.m-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.c3 { grid-column: span 3; }

.c4 { grid-column: span 4; }

.c5 { grid-column: span 5; }

.c6 { grid-column: span 6; }

.c7 { grid-column: span 7; }

.c8 { grid-column: span 8; }

.c12 { grid-column: span 12; }

/* --- Buttons / badges / inputs ------------------------------ */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--e-ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.m-btn .ms { font-size: 16px; }

.m-btn.pri { background: var(--e-grad); color: var(--e-on-accent); box-shadow: var(--e-shadow-accent); }

.m-btn.sec { background: var(--e-surface); border: 1px solid var(--e-line-2); box-shadow: 0 1px 2px rgba(22, 24, 29, 0.06); }

.m-btn.ghost { color: var(--e-ink-2); }

.m-btn.danger { background: var(--e-bad); color: #fff; }

.m-btn.sm { height: 26px; padding: 0 11px; font-size: 11.5px; }

.m-btn.sm .ms { font-size: 14px; }

.m-btn.icon { width: 32px; padding: 0; }

.m-btn.icon.sm { width: 26px; }

.m-btn.block { width: 100%; }

.m-btn.pressed { transform: scale(.96); box-shadow: none; }

.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .3s, color .3s;
}

.m-badge .ms { font-size: 12px; }

.m-badge.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.m-badge.warn { background: var(--e-warn-bg); color: var(--e-warn); }

.m-badge.bad { background: var(--e-bad-bg); color: var(--e-bad); }

.m-badge.mute { background: var(--e-mute-bg); color: var(--e-mute); }

.m-badge.info { background: var(--e-blue-bg); color: var(--e-blue); }

.m-badge.violet { background: var(--e-violet-bg); color: var(--e-violet); }

.m-badge.amber { background: var(--e-amber-bg); color: var(--e-amber-ink); }

.m-badge.brand { background: var(--e-grad); color: var(--e-on-accent); }

.m-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--e-surface-2);
  border: 1px solid var(--e-line);
}

.m-seg span {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--e-ink-2);
}

.m-seg span.on { background: var(--e-grad); color: var(--e-on-accent); box-shadow: var(--e-shadow-accent); }

.m-seg.ink span.on { background: var(--e-ink); color: var(--e-surface); box-shadow: none; }

.m-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--e-line-2);
  background: var(--e-surface);
  font-size: 12.5px;
  color: var(--e-ink);
}

.m-input .ms { font-size: 16px; color: var(--e-ink-3); }

.m-input .ph { color: var(--e-ink-3); }

.m-input.focus { border-color: var(--e-accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.15); }

.m-caret {
  display: inline-block;
  width: 1px; height: 14px;
  background: var(--e-ink);
  margin-left: 1px;
  vertical-align: -2px;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret { 50% { opacity: 0; } }

.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--e-line-2);
  background: var(--e-surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--e-ink-2);
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}

.m-chip.on { background: var(--e-ink); color: var(--e-surface); border-color: var(--e-ink); }

/* --- Tables ------------------------------------------------- */
.m-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.m-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--e-ink-3);
  border-bottom: 1px solid var(--e-line);
  white-space: nowrap;
}

.m-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--e-line);
  vertical-align: middle;
}

.m-table tr:last-child td { border-bottom: 0; }

.m-table td.num, .m-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.m-table .who { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--e-ink); }

/* --- Misc primitives --------------------------------------- */
.m-row { display: flex; align-items: center; gap: 10px; }

.m-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.m-well {
  background: var(--e-surface-2);
  border-radius: 12px;
  padding: 12px 14px;
}

.m-hair { border-top: 1px solid var(--e-line); }

.m-muted { color: var(--e-ink-2); }

.m-faint { color: var(--e-ink-3); }

.m-money { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.m-money.big { font-size: 26px; line-height: 1; }

.m-money.xl { font-size: 32px; line-height: 1; }

.m-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--e-surface-2);
  overflow: hidden;
  display: flex;
}

.m-bar > i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  transition: width 1.1s var(--ease-spring);
}

.m-bar > i.grad { background: var(--e-grad); }

.m-bar > i.violet { background: var(--e-violet); }

.m-bar > i.ok { background: var(--e-ok); }

.m-bar > i.blue { background: var(--e-blue); }

.m-bar > i.light { background: var(--e-blue-light); }

.m-bar > i.amber { background: var(--e-amber-light); }

.m-bar.thin { height: 6px; }

.m-bar.thick { height: 10px; }

/* Donut ring: --p is the percentage (0-100); --c1/--c2 the arc colours. */
.m-ring {
  --p: 0;
  --size: 96px;
  --thick: 12px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--c1, #FF5A1F) 0deg, var(--c2, #FF2E7E) calc(var(--p) * 3.6deg), var(--e-surface-2) 0);
  display: grid;
  place-items: center;
  transition: --p 1.2s var(--ease-spring);
  position: relative;
  flex: none;
}

.m-ring::before {
  content: '';
  position: absolute;
  inset: var(--thick);
  border-radius: 50%;
  background: var(--e-surface);
}

.m-ring > * { position: relative; }

.m-ring .val { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-size: 15px; }

@property --p {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.m-toast {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  box-shadow: var(--e-shadow-pop);
  font-size: 12.5px;
  font-weight: 500;
}

.m-toast .ms { font-size: 18px; color: var(--e-ok); }

.m-skel { background: var(--e-surface-2); border-radius: 6px; height: 10px; }

/* Cursor for scripted interactions */
.m-cursor {
  position: absolute;
  z-index: 20;
  width: 22px; height: 22px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-3px, -2px);
  transition: left .7s var(--ease-spring), top .7s var(--ease-spring), opacity .3s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.m-cursor.show { opacity: 1; }

.m-cursor.click { animation: cursor-click .28s ease; }

@keyframes cursor-click { 50% { transform: translate(-3px, -2px) scale(.82); } }

.m-cursor svg { width: 100%; height: 100%; display: block; }

/* --- Dark feature tile (aurora, as the product's bank card / pay-month bar) */
.m-aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  background: var(--e-surface);
  color: var(--e-ink);
  box-shadow: var(--e-shadow-card);
  border: 1px solid var(--e-line);
}

.m-aurora.dark {
  background: #101218;
  color: #F4F5F9;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--e-shadow-deep);
}

.m-aurora .blobs { opacity: 0.32; }

.m-aurora.dark .blobs { opacity: 1; }

.m-aurora .blobs i { width: 340px; height: 340px; }

.m-aurora .blobs i:nth-child(1) { left: -70px; top: -190px; background: radial-gradient(closest-side, rgba(255, 90, 31, 0.9), transparent); filter: blur(30px); animation: drift1 17s ease-in-out infinite alternate; }

.m-aurora .blobs i:nth-child(2) { left: 34%; top: -230px; background: radial-gradient(closest-side, rgba(255, 46, 126, 0.8), transparent); filter: blur(34px); animation: drift2 21s ease-in-out infinite alternate; }

.m-aurora .blobs i:nth-child(3) { right: -90px; top: -200px; background: radial-gradient(closest-side, rgba(122, 90, 248, 0.85), transparent); filter: blur(32px); animation: drift3 19s ease-in-out infinite alternate; }

.m-aurora > .inner { position: relative; }

.m-aurora .muted { color: rgba(244, 245, 249, 0.68); }

.m-aurora:not(.dark) .muted { color: var(--e-ink-2); }

/* --- Mobile shell ------------------------------------------- */
.m-tabbar {
  flex: none;
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--e-line);
  background: var(--e-surface);
  padding-bottom: 18px;
}

.m-tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--e-ink-2);
}

.m-tabbar a .ms { font-size: 22px; }

.m-tabbar a.on { color: var(--e-accent-ink); font-weight: 600; }

.m-tabbar a.on .ms { font-variation-settings: 'FILL' 1, 'opsz' 20, 'wght' 400; }

.m-statusbar {
  flex: none;
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--e-surface);
}

.m-statusbar .ms { font-size: 15px; }

.screen.mobile .m-band { padding: 16px 18px 14px; }

.screen.mobile .m-content { padding: 16px 16px 20px; }

/* ============================================================
   Home dashboard widgets
   ============================================================ */
.m-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.m-bell .pip.bump { animation: pip-bump .45s var(--ease-spring); }

@keyframes pip-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

.ms.spin { animation: ms-spin 1s linear infinite; }

@keyframes ms-spin { to { transform: rotate(360deg); } }
.m-stats2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }

.m-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--e-surface-2); }

.m-stats2 .m-stat { padding: 8px 10px; }

.m-stat .l { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-ink-3); white-space: nowrap; }

.m-stat .l .m-badge { text-transform: none; letter-spacing: 0.02em; }

.m-stat .v { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--e-ink); }

.m-stat.ok .v { color: var(--e-ok); }

.m-stat.violet { box-shadow: inset 0 0 0 1px var(--e-violet-bg); }
.m-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; border-top: 1px solid var(--e-line); padding-top: 9px; margin-top: 8px; font-size: 10.5px; color: var(--e-ink-3); }

.m-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.m-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.m-legend i.sq { border-radius: 2px; }

.m-legend i.dash { background: repeating-linear-gradient(90deg, var(--e-ok) 0 4px, transparent 4px 6px); height: 3px; width: 14px; border-radius: 2px; }

.m-legend i.hatch { background: repeating-linear-gradient(-45deg, var(--e-ink-3) 0 1.5px, transparent 1.5px 4px); border: 1px dashed var(--e-ink-3); opacity: .7; }

.m-legend .sep { width: 1px; height: 12px; background: var(--e-line); }

/* Bank balance card (the product's light variant: white surface, soft aurora; dark tokens take over in dark mode) */
.m-bank { min-height: 160px; padding: 14px 20px 14px 22px; display: flex; }

.m-bank .blobs i { position: absolute; width: 64%; height: auto; aspect-ratio: 1; border-radius: 999px; }

.m-bank .blobs i:nth-child(1) { left: -20%; top: -46%; right: auto; animation-name: bankDrift1; }

.m-bank .blobs i:nth-child(2) { width: 58%; left: auto; right: -16%; top: -22%; animation-name: bankDrift2; }

.m-bank .blobs i:nth-child(3) { width: 70%; left: 22%; right: auto; top: auto; bottom: -70%; filter: blur(36px); animation-name: bankDrift3; }

[data-theme="dark"] .m-bank .blobs { opacity: 1; }

@keyframes bankDrift1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(16%, 14%) scale(1.18); } 100% { transform: translate(-6%, 6%) scale(0.94); } }

@keyframes bankDrift2 { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-18%, -10%) scale(0.9); } 100% { transform: translate(6%, 12%) scale(1.15); } }

@keyframes bankDrift3 { 0% { transform: translate(0, 0) scale(0.95); } 50% { transform: translate(12%, -18%) scale(1.12); } 100% { transform: translate(-10%, -4%) scale(1); } }

.m-bank .inner { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0; }

.m-bank .top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--e-ink-2); }

.m-bank .top .ms { font-size: 17px; color: var(--e-ink-2); }

.m-bank .top b { font-weight: 600; }

.m-bank .chips { margin-left: auto; display: flex; gap: 6px; }

.m-bank .chip { height: 24px; padding: 0 10px; border-radius: 999px; background: var(--e-surface-2); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; color: var(--e-ink); }

.m-bank .chip.ic { width: 24px; padding: 0; justify-content: center; color: var(--e-ink-2); }

.m-bank .chip .ms { font-size: 14px; }

.m-bank .bal { display: flex; align-items: baseline; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1; margin: 6px 0 4px; }

.m-bank .bal .sym, .m-bank .bal .pence { font-size: 20px; font-weight: 600; color: var(--e-ink-2); }

.m-bank .bal .pounds { font-size: 38px; font-weight: 700; color: var(--e-ink); }

.m-bank .foot { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--e-ink-2); }

.m-bank .foot .mono { font-family: var(--e-mono); letter-spacing: 0.04em; }

.m-bank .status { display: inline-flex; align-items: center; gap: 6px; }

.m-bank .status i { width: 7px; height: 7px; border-radius: 999px; background: var(--e-warn); }

.m-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; mix-blend-mode: overlay; pointer-events: none; z-index: -1; }

/* Combined card: people rail + upcoming-shifts time grid */
.m-combo { display: flex; gap: 20px; padding: 20px; }

.m-combo .rail { flex: 0 0 212px; min-width: 0; border-right: 1px solid var(--e-line); padding-right: 20px; display: flex; flex-direction: column; }

.m-combo .panel { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; }

.m-combo .people { display: flex; flex-direction: column; gap: 4px; }

.m-combo .prow { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 10px; }

.m-combo .prow b { display: block; font-size: 12px; font-weight: 600; color: var(--e-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m-combo .prow span.m-col > span { font-size: 10.5px; color: var(--e-ink-3); }

.m-combo .prow .m-badge { display: block; width: fit-content; max-width: 100%; font-size: 9.5px; padding: 2px 6px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m-combo .rail .more { margin: auto 0 0; font-size: 11.5px; padding-top: 8px; }

.m-tg { display: grid; grid-template-columns: 26px repeat(4, minmax(0, 1fr)); gap: 5px; }

.m-tg .dh { text-align: center; padding-bottom: 2px; }

.m-tg .dh b { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-ink-3); }

.m-tg .dh.today b { color: var(--e-accent-ink); }

.m-tg .dh span { font-size: 13px; font-weight: 600; color: var(--e-ink); }

.m-tg .gut { position: relative; height: var(--h, 136px); }

.m-tg .gut span { position: absolute; left: 0; transform: translateY(-50%); font-size: 8.5px; color: var(--e-ink-3); font-variant-numeric: tabular-nums; }

.m-tg .dc {
  position: relative;
  height: var(--h, 136px);
  border-radius: 7px;
  background-color: var(--e-surface-2);
  background-image: linear-gradient(var(--e-line-2), var(--e-line-2)), linear-gradient(var(--e-line-2), var(--e-line-2));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 33.3%, 0 66.6%;
  background-repeat: no-repeat;
}

.m-tg .dc.today { background-color: var(--e-accent-soft); }

.m-blk {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--e-ink);
  background: var(--tint);
  border-left: 3px solid var(--line);
  overflow: hidden;
  min-height: 12%;
}

.m-blk span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m-blk span + span { opacity: .9; }

.m-blk.pending {
  background: repeating-linear-gradient(-45deg, var(--tint), var(--tint) 5px, transparent 5px, transparent 10px);
  border: 1.5px dashed var(--line);
  border-left-width: 3px;
  opacity: .65;
}

.m-blk.holiday {
  background: repeating-linear-gradient(-45deg, var(--e-ok-bg), var(--e-ok-bg) 5px, transparent 5px, transparent 10px);
  border: 1px solid var(--e-ok);
  color: var(--e-ok);
}

.m-blk.holiday .ms { font-size: 12px; display: block; margin-bottom: 2px; }

.m-blk.cancel { background: repeating-linear-gradient(-45deg, var(--e-accent-soft), var(--e-accent-soft) 5px, transparent 5px, transparent 10px); border: 1px dashed var(--e-accent); border-left-width: 3px; }

.id-violet { --tint: var(--e-violet-bg); --line: #7A5AF8; }

.id-magenta { --tint: var(--e-magenta-bg); --line: #E0257B; }

.id-orange { --tint: var(--e-accent-soft); --line: #F4520B; }

.id-green { --tint: var(--e-ok-bg); --line: #0E8345; }

.id-blue { --tint: var(--e-blue-bg); --line: #3B6FD9; }

.id-teal { --tint: var(--e-teal-bg); --line: #0E8AA8; }

.id-amber { --tint: var(--e-amber-soft); --line: #B4740A; }

.id-fuchsia { --tint: var(--e-fuchsia-bg); --line: #C026D3; }

/* Notifications */
.m-notes .unread { color: var(--e-accent-ink); margin-bottom: 4px; }

.m-nlist { display: flex; flex-direction: column; }

.m-shrink { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .38s var(--ease-spring), opacity .3s ease; }

.m-shrink.gone { grid-template-rows: 0fr; opacity: 0; }

.m-shrink > * { min-height: 0; overflow: hidden; }

.m-nrow { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--e-line); }

.m-nrow .cat { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--e-mute-bg); color: var(--e-mute); }

.m-nrow .cat .ms { font-size: 17px; }

.m-nrow .cat.accent { background: var(--e-accent-soft); color: var(--e-accent-ink); }

.m-nrow .cat.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.m-nrow .cat.blue { background: var(--e-blue-bg); color: var(--e-blue); }

.m-nrow .cat.magenta { background: var(--e-magenta-bg); color: var(--e-magenta); }

.m-nrow .cat.violet { background: var(--e-violet-bg); color: var(--e-violet); }

.m-nrow .cat.bad { background: var(--e-bad-bg); color: var(--e-bad); }

.m-nrow .m-col { flex: 1; }

.m-nrow b { display: block; font-size: 12px; font-weight: 600; color: var(--e-ink); line-height: 1.3; }

.m-nrow .sub { font-size: 11px; color: var(--e-ink-2); }

.m-nrow .ts { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-ink-3); white-space: nowrap; margin-top: 3px; }

.m-nrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--e-accent); flex: none; margin-top: 6px; }

.m-nrow.read { opacity: .6; }

/* Pay-month explainer strip (PA) */
.m-explainer { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--e-line); background: var(--e-surface); box-shadow: var(--e-shadow-card); }

.m-explainer .t { font-size: 13px; font-weight: 600; color: var(--e-ink); }

.m-explainer .d { font-size: 11px; color: var(--e-ink-2); line-height: 1.35; }

.m-explainer .d b { font-weight: 600; color: var(--e-ink); }

.m-explainer .m-wa { flex: none; }

/* This period (PA) */
.m-period .ref { margin-top: 8px; font-size: 10.5px; color: var(--e-ink-2); line-height: 1.35; }

.m-period .ref > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.m-period .ref b { color: var(--e-ink); font-weight: 600; }

/* Requests (PA) */
.m-req-chips { display: flex; gap: 6px; margin-left: 10px; }

.m-success { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 0; margin-bottom: 0; border-radius: 10px; background: var(--e-ok-bg); color: var(--e-ok); font-size: 12px; font-weight: 600; overflow: hidden; transition: height .35s var(--ease-spring), margin .35s var(--ease-spring), opacity .3s; }

.m-success.in { height: 30px; margin-bottom: 8px; }

.m-success .ms { font-size: 16px; }

.m-req-list { border: 1px solid var(--e-line); border-radius: 12px; overflow: hidden; }

.m-req-band { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--e-line); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-ink); }

.m-req-band .ms { font-size: 14px; color: var(--e-accent); }

.m-req-band .n { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--e-ink-3); }

.m-req-seg { display: grid; grid-template-columns: 132px 1fr; }

.m-req-seg .rail { padding: 10px 12px; background: var(--e-blue-bg); display: flex; flex-direction: column; gap: 2px; }

.m-req-seg .rail .t { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-blue); }

.m-req-seg .rail .t .ms { font-size: 15px; }

.m-req-seg .rail .c { font-size: 10.5px; color: var(--e-ink-2); line-height: 1.3; }

.m-req-seg .rail .n { margin-top: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--e-blue); }

.m-req-seg .tray { background: var(--e-surface-2); padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; }

.m-req { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--e-line); border-left: 4px solid var(--e-blue); background: var(--e-surface); }

.m-req .m-av { width: 28px; height: 28px; box-shadow: 0 0 0 2px var(--ring, var(--e-line-2)); }

.m-req .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.m-req .info b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.m-req .info .time { font-size: 11px; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }

.m-req .info .meta { font-size: 10.5px; color: var(--e-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m-req .acts { display: flex; gap: 6px; flex: none; }

.m-req .acts .m-btn { width: 96px; height: 26px; font-size: 11.5px; }

.m-req .acts .m-btn.busy { opacity: .85; }

/* ============================================================
   Calendar
   ============================================================ */
.m-cal { display: flex; flex-direction: column; }

.m-cal-row { display: flex; align-items: flex-start; gap: 13px; }

.m-grid-card { flex: 1; min-width: 0; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 14px; box-shadow: var(--e-shadow-card); overflow: hidden; }

.m-dayhead { display: grid; grid-template-columns: 52px repeat(7, 1fr); border-bottom: 1px solid var(--e-line); }

.m-dayhead .corner { border-right: 1px solid var(--e-line); }

.m-dayhead .dh { border-right: 1px solid var(--e-line); padding: 6px 3px 5px; text-align: center; }

.m-dayhead .dh:last-child { border-right: 0; }

.m-dayhead .dh b { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-ink-3); }

.m-dayhead .dh span { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--e-ink); line-height: 1.2; }

.m-dayhead .dh.today { background: var(--e-today); }

.m-dayhead .dh.today b, .m-dayhead .dh.today span { color: var(--e-accent-ink); font-weight: 700; }

.m-dayhead .dh.wk { background: var(--e-weekend); }

.m-gridbody { display: grid; grid-template-columns: 52px repeat(7, 1fr); height: 528px; overflow: hidden; }

.m-gut { position: relative; border-right: 1px solid var(--e-line); }

.m-gut span { position: absolute; right: 5px; top: calc(var(--i) * 48px); transform: translateY(-50%); font-size: 10px; font-weight: 500; color: var(--e-ink-3); line-height: 1; font-variant-numeric: tabular-nums; }

.m-gut span[style="--i:0"] { transform: translateY(2px); }

.m-dc {
  position: relative;
  border-right: 1px solid var(--e-line);
  background-image: repeating-linear-gradient(to bottom, var(--e-line) 0, var(--e-line) 1px, transparent 1px, transparent 48px);
}

.m-dc:last-child { border-right: 0; }

.m-dc.today { background-color: var(--e-today); }

.m-dc.wk { background-color: var(--e-weekend); }

.m-cb {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 10px;
  padding: 5px 6.5px;
  background: var(--tint);
  border-left: 3px solid var(--line);
  color: var(--e-ink);
  font-size: 9.75px;
  line-height: 1.25;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.m-cb .who { display: flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; min-width: 0; }

.m-cb .who .m-av { flex: none; }

.m-cb .who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.m-cb .who .m-av { box-shadow: 0 0 0 1.5px var(--e-surface); }

.m-cb .tm { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }

.m-cb .hrs { font-size: 11px; opacity: .6; }

.m-cb .hdr, .m-cb .lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }

.m-cb .hdr .ms { font-size: 14px; }

.m-cb .lbl { display: none; color: var(--line); }

.m-cb.pending { border: 1.5px dashed var(--line); border-left-width: 3px; opacity: .65; }

.m-cb.pending .lbl { display: flex; }

.screen .m-cb.pending.in, .screen .m-blk.pending.in { opacity: .65; }
/* A pending block that the scene creates must not show before its step (its .65 opacity used to beat the hidden state) */
.screen [data-at].pending:not(.in) { opacity: 0; }

.m-cb.cancel { background: repeating-linear-gradient(-45deg, var(--e-accent-soft), var(--e-accent-soft) 5px, transparent 5px, transparent 10px); border: 1px dashed var(--e-accent); }

.m-cb.cancel .hdr { color: var(--e-accent-ink); }

.m-cb.holiday { background: repeating-linear-gradient(-45deg, var(--e-ok-bg), var(--e-ok-bg) 5px, transparent 5px, transparent 10px); border: 1px solid var(--e-ok); color: var(--e-ok); }

.m-now { position: absolute; left: 0; right: 0; z-index: 20; display: flex; align-items: center; }

.m-now i { width: 9px; height: 9px; border-radius: 999px; background: var(--e-accent); margin-left: -4px; flex: none; }

.m-now b { height: 2px; flex: 1; background: var(--e-grad); }

.m-ghost {
  position: absolute;
  left: 3px; right: 3px;
  z-index: 10;
  height: 0;
  border-radius: 10px;
  border: 1.5px dashed var(--e-accent);
  background: var(--e-sel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  overflow: hidden;
  transition: height .7s var(--ease-spring), opacity .3s ease;
}

.m-ghost.grow { height: 144px; }

.m-ghost .cap { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--e-accent-ink); }

.m-ghost .t { font-size: 9.75px; font-weight: 600; color: var(--e-accent-ink); font-variant-numeric: tabular-nums; }

.m-gridfoot { display: flex; align-items: center; gap: 13px; padding: 8px 13px; border-top: 1px solid var(--e-line); font-size: 11px; color: var(--e-ink-3); }

.m-gridfoot span { display: inline-flex; align-items: center; gap: 5px; }

.m-gridfoot .sw { width: 9.75px; height: 9.75px; border-radius: 3px; display: inline-block; }

.m-gridfoot .sw.pend { border: 1.5px dashed var(--e-magenta); background: var(--e-magenta-bg); }

.m-gridfoot .sw.hol { border: 1px solid var(--e-ok); background: repeating-linear-gradient(-45deg, var(--e-ok-bg), var(--e-ok-bg) 3px, transparent 3px, transparent 6px); }

.m-gridfoot .hint { margin-left: auto; }

.m-rail { width: 250px; flex: none; }

.m-rrow { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 6.5px 8px; font-size: 13px; color: var(--e-ink); }

.m-rrow.on { background: var(--e-nav-on); color: var(--e-accent-ink); font-weight: 600; }

.m-rrow .all { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--e-line); background: var(--e-surface-2); font-size: 10px; font-weight: 600; color: var(--e-ink-2); display: grid; place-items: center; flex: none; }

.m-rrow .cnt { margin-left: auto; font-size: 9.75px; color: var(--e-ink-3); font-variant-numeric: tabular-nums; }

.m-rrow .flag { font-size: 10.5px; font-weight: 600; color: var(--e-accent-ink); }

/* In-flow booking panel */
.m-grow { display: grid; grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; transition: grid-template-rows .38s var(--ease-spring), opacity .3s ease, margin-bottom .38s var(--ease-spring); }

.m-grow.open { grid-template-rows: 1fr; opacity: 1; margin-bottom: 13px; }

.m-grow > * { min-height: 0; overflow: hidden; }

.m-panel { border-radius: 14px; border: 1px solid var(--e-line); background: var(--e-surface); box-shadow: var(--e-shadow-card); overflow: hidden; }

.m-panel .rule { height: 3px; background: var(--e-grad); }

.m-panel .ph { display: flex; align-items: center; gap: 13px; padding: 9px 22px 8px; border-bottom: 1px solid var(--e-line); }

.m-panel .ph h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }

.m-panel .live { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }

.m-panel .live .ms { font-size: 16px; color: var(--e-accent); }

.m-panel .live b { color: var(--e-ink); font-weight: 600; }

.m-panel .x { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--e-ink-3); }

.m-panel .x .ms { font-size: 18px; }

.m-panel .cols { display: grid; grid-template-columns: 196px 208px minmax(0, 1fr) 244px; }

.m-panel .col { padding: 10px 13px 12px; border-right: 1px solid var(--e-line); display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.m-panel .col:last-child { border-right: 0; background: var(--e-surface-2); }

.m-panel .m-overline { display: flex; align-items: center; gap: 6px; }

.m-panel .m-overline .cnt { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; }

.m-panel .foot { font-size: 10.5px; color: var(--e-ink-3); line-height: 1.35; margin-top: auto; }

.m-person { display: flex; align-items: center; gap: 8px; border: 1px solid var(--e-line); border-radius: 12px; padding: 5px 8px; background: var(--e-surface); }

.m-person.on { border-color: var(--e-accent); background: var(--e-accent-soft); box-shadow: inset 0 0 0 1px var(--e-accent); }

.m-person b { font-size: 12px; font-weight: 600; display: block; color: var(--e-ink); }

.m-person .sub { font-size: 10.5px; color: var(--e-ink-2); display: flex; align-items: center; gap: 4px; }

.m-person .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--e-ok); }

.m-person .dot.warn { background: var(--e-warn); }

.m-person .tick { margin-left: auto; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--e-line-2); display: grid; place-items: center; color: transparent; flex: none; }

.m-person .tick.on { background: var(--e-grad); border-color: transparent; color: #fff; }

.m-person .tick .ms { font-size: 14px; }

.m-mini-nav { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--e-ink); }

.m-mini-nav .ms { font-size: 16px; color: var(--e-ink-3); }

.m-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }

.m-mini span { height: 24px; display: grid; place-items: center; border-radius: 999px; color: var(--e-ink); }

.m-mini .h { font-size: 9.5px; font-weight: 600; color: var(--e-ink-3); height: 16px; }

.m-mini .pri { background: var(--e-grad); color: #fff; font-weight: 700; }

.m-mini .today { box-shadow: inset 0 0 0 1px rgba(255, 90, 31, 0.6); }

.m-mini .off { opacity: .3; }

.m-mini .past { opacity: .35; }

.m-mini-legend { display: flex; gap: 10px; font-size: 10px; color: var(--e-ink-2); }

.m-mini-legend span { display: inline-flex; align-items: center; gap: 4px; }

.m-mini-legend i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }

.m-mini-legend i.pri { background: var(--e-grad); }

.m-mini-legend i.add { background: var(--e-accent); }

.m-mini-legend i.rep { background: var(--e-accent-soft); box-shadow: inset 0 0 0 1.5px var(--e-accent); }

.m-times { display: flex; align-items: flex-end; gap: 7px; }

.m-times label { display: flex; flex-direction: column; gap: 3px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--e-ink-3); }

.m-times .tin { border: 1px solid var(--e-line-2); border-radius: 10px; padding: 5px 8px; font-size: 13px; font-weight: 600; color: var(--e-ink); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; background: var(--e-surface); }

.m-times .len { border: 1px solid var(--e-line); background: var(--e-surface-2); border-radius: 10px; padding: 5px 10px; font-size: 13px; font-weight: 700; color: var(--e-ink); letter-spacing: 0; text-transform: none; }

.m-times > .ms { font-size: 18px; color: var(--e-ink-3); margin-bottom: 7px; }

.m-trow { display: flex; align-items: center; gap: 8px; border: 1px solid var(--e-line); border-radius: 12px; padding: 5px 9px; }

.m-trow .tile { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--e-violet-bg); color: var(--e-violet); flex: none; }

.m-trow .tile .ms { font-size: 17px; }

.m-trow b { font-size: 12px; font-weight: 600; display: block; color: var(--e-ink); }

.m-trow .m-col > span { font-size: 10.5px; color: var(--e-ink-2); }

.m-trow .m-switch { margin-left: auto; }

.m-slider { position: relative; height: 18px; display: flex; align-items: center; }

.m-slider .track { height: 6px; border-radius: 999px; background: var(--e-line-2); flex: 1; }

.m-slider .stops { position: absolute; left: 9px; right: 9px; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; }

.m-slider .stops i { width: 8px; height: 8px; border-radius: 999px; background: var(--e-ink-3); box-shadow: 0 0 0 2px var(--e-surface); }

.m-slider .thumb { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 999px; background: var(--e-surface); border: 2px solid var(--e-ink-3); box-shadow: 0 1px 3px rgba(22, 24, 29, 0.2); }

.m-sum .total { display: flex; align-items: baseline; gap: 8px; }

.m-sum .total b { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--e-ink); line-height: 1; }

.m-sum .total span { font-size: 12.5px; color: var(--e-ink-2); }

.m-sum .rows > div { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 26px; border-bottom: 1px solid var(--e-line-2); font-size: 12px; }

.m-sum .rows span { color: var(--e-ink-2); }

.m-sum .rows b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--e-ink); }

.m-sum .brow { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--e-ink-2); }

.m-sum .brow b { color: var(--e-ok); font-weight: 600; font-variant-numeric: tabular-nums; }

.m-sum .foot { text-align: center; margin-top: 0; }

/* Toast (calendar / detail pages) */
.m-toast2 { position: absolute; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: flex-start; gap: 10px; max-width: 380px; border-radius: 14px; border: 1px solid var(--e-line); background: var(--e-surface); padding: 12px 10px 12px 13px; box-shadow: var(--e-shadow-pop); }

.m-toast2 .ic { width: 30px; height: 30px; border-radius: 999px; background: var(--e-ok-bg); color: var(--e-ok); display: grid; place-items: center; flex: none; }

.m-toast2 .ic .ms { font-size: 18px; }

.m-toast2 b { font-size: 13px; font-weight: 700; color: var(--e-ink); }

.m-toast2 .body { font-size: 12px; color: var(--e-ink-2); line-height: 1.3; margin-top: 2px; }

.m-toast2 .x { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; color: var(--e-ink-3); flex: none; }

.m-toast2 .x .ms { font-size: 16px; }

/* ============================================================
   Budget overview
   ============================================================ */
.m-bud { display: flex; flex-direction: column; gap: 13px; }

.m-bud-row { display: flex; align-items: flex-start; gap: 13px; }

.m-bud-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }

.m-bud-rail { width: 300px; flex: none; display: flex; flex-direction: column; gap: 13px; }

/* Pay-month tile */
.m-pmb { padding: 0 14px; }

.m-pmb .row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 0; }

.m-pmb .chip { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--e-surface-2); color: var(--e-ink-2); flex: none; transition: background .3s, color .3s; }

.m-pmb .chip .ms { font-size: 17px; }

.m-pmb .chip.warn { background: var(--e-warn); color: #fff; }

.m-pmb .nav { display: inline-flex; align-items: center; gap: 4px; }

.m-pmb .nb { width: 28px; height: 28px; border-radius: 999px; background: var(--e-surface-2); display: grid; place-items: center; color: var(--e-ink-2); }

.m-pmb .nb .ms { font-size: 16px; }

.m-pmb .label { display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: var(--e-ink); }

.m-pmb .label::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--e-grad); }

.m-pmb .status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 10px; border-radius: 999px; background: var(--e-surface-2); font-size: 11.5px; font-weight: 600; color: var(--e-ink); white-space: nowrap; transition: color .3s; }

.m-pmb .status i { width: 7px; height: 7px; border-radius: 999px; background: var(--e-ok); transition: background .3s; }

.m-pmb .status.warn { color: var(--e-warn); }

.m-pmb .status.warn i { background: var(--e-warn); }

.m-pmb .sep { width: 1px; height: 20px; background: var(--e-line); }

.m-pmb .hint { flex: 1; min-width: 0; font-size: 12.5px; color: var(--e-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m-pmb .info { width: 30px; height: 30px; border-radius: 999px; background: var(--e-surface-2); display: grid; place-items: center; color: var(--e-ink-2); margin-left: auto; }

.m-pmb .info .ms { font-size: 18px; }

[data-theme="dark"] .m-pmb { background: #101218; color: #F4F5F9; border-color: rgba(255, 255, 255, 0.08); box-shadow: var(--e-shadow-deep); }

[data-theme="dark"] .m-pmb .blobs { opacity: .55; }

[data-theme="dark"] .m-pmb .chip, [data-theme="dark"] .m-pmb .nb, [data-theme="dark"] .m-pmb .status, [data-theme="dark"] .m-pmb .info { background: rgba(255, 255, 255, 0.09); color: #F4F5F9; }

[data-theme="dark"] .m-pmb .label { color: #F4F5F9; }

[data-theme="dark"] .m-pmb .hint { color: rgba(244, 245, 249, 0.68); }

[data-theme="dark"] .m-pmb .sep { background: rgba(255, 255, 255, 0.12); }

.m-legend i.ln { width: 14px; height: 2.5px; border-radius: 999px; }

.m-legend i.ln.dash { height: 0; background: none; border-top: 2.5px dashed var(--e-ok); border-radius: 0; }

.m-legend i.ln.dash.amber { border-top-color: var(--e-amber); }

.m-legend i.ln.dash.mute { border-top: 1px dashed var(--e-ink-3); }
/* Search fields never wrap their placeholder */
.m-input .ph { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-grow.tight.open { margin-bottom: 0; }
/* The scene scrolls the budget page the way a person would: the content slides up inside the clipped frame */
.m-bud .m-scroller { display: flex; flex-direction: column; gap: 13px; transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
/* Transactions rail */
.m-tx { padding: 14px 16px; }

.m-tx .h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--e-ink); }

.m-tx .grp { display: flex; flex-direction: column; }

.m-tx .grp .m-overline { padding: 6px 0 4px; }

.m-tx .txr { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--e-line); }

.m-tx .txr .d { width: 7px; height: 7px; border-radius: 999px; flex: none; }

.m-tx .txr .d.ok { background: var(--e-ok); }

.m-tx .txr .d.bad { background: var(--e-bad); }

.m-tx .txr b { font-size: 12.5px; font-weight: 500; color: var(--e-ink); }

.m-tx .txr .cat { display: flex; gap: 4px; }

.m-tx .txr .cat .m-badge { font-size: 9.5px; padding: 2px 7px; }

.m-tx .txr .amt { margin-left: auto; text-align: right; display: flex; flex-direction: column; }

.m-tx .txr .amt b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.m-tx .txr .amt.ok b { color: var(--e-ok); }

.m-tx .txr .amt span { font-size: 10px; color: var(--e-ink-3); }

/* ============================================================
   Work record
   ============================================================ */
.m-wr-head {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--e-line);
  padding: 20px 30px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: none;
}

.m-wr-head::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 90% at 12% 0%, rgba(255, 90, 31, 0.11), transparent 60%),
    radial-gradient(45% 80% at 50% 0%, rgba(255, 46, 126, 0.07), transparent 60%),
    radial-gradient(50% 90% at 92% 20%, rgba(122, 90, 248, 0.09), transparent 60%);
}

.m-wr-head > * { position: relative; }

.m-wr-head .ov { font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--e-ink-3); }

.m-wr-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin-top: 4px; color: var(--e-ink); }

.m-wr-head .cap { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--e-ink-2); }

.m-wr-head .wr-hero { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

.m-wr-head .hl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-ink-3); }

.m-wr-head .hv { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--e-ink); }

.m-wr-head .hs { font-size: 12.5px; color: var(--e-ink-2); }

.m-wr-head .right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.m-wr-head .state { font-size: 11.5px; padding: 4px 10px; }

.m-wr-head .state .ms { font-size: 14px; }

.m-wr-head .stepper { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--e-line-2); background: var(--e-surface); padding: 4px 8px; font-size: 12.5px; font-weight: 600; box-shadow: var(--e-shadow-card); }

.m-wr-head .stepper .ms { font-size: 17px; color: var(--e-ink-2); }

.m-wr-head .stepper i { width: 8px; height: 8px; border-radius: 999px; background: var(--e-grad); }

.m-wr-head .stepper .lbl { min-width: 128px; text-align: center; font-variant-numeric: tabular-nums; }

.m-wr-filter { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--e-line); padding: 10px 30px; flex: none; }

.m-wr-filter .m-chip .ms { font-size: 14px; }

.m-wr-main { flex: 1; min-height: 0; padding: 16px 30px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }

.m-wr-grid { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }

.m-wr-rail { padding: 0; overflow: hidden; }

.m-wr-rail .rh { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--e-line); padding: 11px 13px; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-ink-3); }

.m-wr-rail .rh span:last-child { font-weight: 400; letter-spacing: 0; text-transform: none; }

.m-wr-rail .rows { padding: 5px; }

.m-wr-rail .r { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; }

.m-wr-rail .r.on { background: var(--e-surface-2); }

.m-wr-rail .r b { font-size: 13px; font-weight: 600; color: var(--e-ink); }

.m-wr-rail .r .sub { display: flex; gap: 8px; font-size: 11px; }

.m-wr-rail .r .sub .ok { color: var(--e-ok); }

.m-wr-rail .r .sub .blue { color: var(--e-blue); }

.m-wr-rail .r .money { margin-left: auto; text-align: right; display: flex; flex-direction: column; }

.m-wr-rail .r .money b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--e-ink); }

.m-wr-rail .r .money span { font-size: 10px; color: var(--e-ink-3); }

.m-wr-tl { padding: 0; overflow: hidden; }

.m-wr-tl .th { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--e-line); padding: 10px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-ink-3); }

.m-wr-tl .pills { display: flex; gap: 6px; }

.m-wr-tl .rows { padding: 5px 8px; }

.m-wr-tl .row { display: grid; grid-template-columns: 28px minmax(150px, 1fr) 52px 86px auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; }

.m-wr-tl .row b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.m-wr-tl .row .src { font-size: 11px; color: var(--e-ink-2); }

.m-wr-tl .row .src .mono { font-family: var(--e-mono); font-size: 10.5px; }

.m-wr-tl .row .h { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--e-ink-2); text-align: right; }

.m-wr-tl .row .mny { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--e-ink); }

.m-wr-tl .row .tag { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 3px 7px; transition: background .3s, color .3s; }

.m-wr-tl .row .tag.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.m-wr-tl .row .tag.info { background: var(--e-blue-bg); color: var(--e-blue); }

.m-wr-tl .now { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-accent-ink); }

.m-wr-tl .now::before, .m-wr-tl .now::after { content: ''; flex: 1; height: 1px; background: var(--e-accent); opacity: .5; }

.m-wr-pay { border-radius: 14px; border: 1px solid var(--e-amber-line); background: var(--e-amber-bg); transition: background .5s, border-color .5s; }

.m-wr-pay.final { border-color: var(--e-green-line); background: var(--e-green-bg); }

.m-wr-pay .ph { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 10px; }

.m-wr-pay .chip { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--e-amber-ink); color: #fff; flex: none; transition: background .5s; }

.m-wr-pay.final .chip { background: var(--e-green-ink); }

.m-wr-pay .chip .ms { font-size: 20px; }

.m-wr-pay h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--e-amber-ink); transition: color .5s; }

.m-wr-pay.final h2 { color: var(--e-green-ink); }

.m-wr-pay p { font-size: 11px; color: var(--e-ink-2); line-height: 1.4; }

.m-payslip { margin: 0 8px 8px; border-radius: 12px; border: 1px solid var(--e-line); border-left: 4px solid var(--e-violet); background: var(--e-surface); padding: 12px 16px; box-shadow: var(--e-shadow-card); }

.m-payslip .head { display: flex; align-items: center; gap: 10px; }

.m-payslip .head b { font-size: 14px; font-weight: 700; color: var(--e-ink); }

.m-payslip .head span.m-col > span { font-size: 11.5px; color: var(--e-ink-3); }

.m-payslip .body { display: grid; grid-template-columns: 1fr 260px; gap: 16px; margin-top: 8px; align-items: start; }

.m-payslip .receipt { display: flex; flex-direction: column; }

.m-payslip .receipt.final { display: none; }

.m-wr-pay.final .receipt.final { display: flex; }

.m-wr-pay.final .receipt:not(.final) { display: none; }

.m-payslip .li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--e-line); padding: 5px 0; font-size: 12.5px; }

.m-payslip .li span { color: var(--e-ink-2); }

.m-payslip .li b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--e-ink); }

.m-payslip .li.sub span { font-weight: 600; color: var(--e-ink); }

.m-payslip .li.note { justify-content: flex-start; gap: 6px; border-bottom: 0; color: var(--e-ok); font-size: 11.5px; font-weight: 600; }

.m-payslip .li.note span { color: var(--e-ok); }

.m-payslip .li.note .ms { font-size: 15px; }

.m-payslip .result { border-radius: 12px; border: 1px solid var(--e-line); background: var(--e-surface-2); padding: 12px; display: flex; flex-direction: column; gap: 4px; }

.m-payslip .result b { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--e-ink); }

.m-payslip .result .m-btn { margin-top: 6px; border: 1px solid var(--e-line-2); }

.m-payslip .result .m-btn.pri { border: 0; }

/* ============================================================
   PA mobile
   ============================================================ */
.m-mob-scroll { display: flex; flex-direction: column; gap: 12px; transition: transform .8s var(--ease-spring); will-change: transform; }

.screen.mobile .m-band .m-sub { font-size: 12px; }

.screen.mobile .m-band .actions { margin-left: auto; }

.m-explainer.compact { padding: 10px 12px; gap: 10px; }

.m-explainer.compact .d { font-size: 11px; }

.m-req-seg.stacked { grid-template-columns: 1fr; }

.m-req-seg.stacked .rail { flex-direction: row; align-items: center; gap: 8px; padding: 7px 12px; }

.m-req-seg.stacked .rail .c { flex: 1; }

.m-req-seg.stacked .rail .n { margin-top: 0; margin-left: auto; font-size: 16px; }

.m-req.wrap { flex-wrap: wrap; }

.m-req.wrap .acts { width: 100%; margin-left: 0; }

.m-req.wrap .acts .m-btn { flex: 1; width: auto; }

.m-tap {
  position: absolute;
  z-index: 30;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 90, 31, 0.35);
  border: 2px solid rgba(255, 90, 31, 0.85);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
}

.m-tap.click { animation: m-tap .55s ease; }

@keyframes m-tap {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

/* ============================================================
   Statutory absence
   ============================================================ */
.m-abs { padding: 20px 32px; display: flex; flex-direction: column; gap: 16px; height: 100%; }

.abs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

.abs-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--e-ink); }

.abs-head p { font-size: 13px; color: var(--e-ink-2); max-width: 640px; margin-top: 6px; line-height: 1.45; }

.abs-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; min-height: 0; }

.abs-rail { background: var(--e-surface); border: 1px solid var(--e-line-2); border-radius: 16px; overflow: hidden; }

.abs-rail .filters { display: flex; gap: 6px; padding: 12px 12px 10px; border-bottom: 1px solid var(--e-line); }

.abs-rail .grp { padding: 8px 0 4px; }

.abs-rail .grp > .m-overline { display: block; padding: 4px 16px 6px; }

.abs-rail .case { display: flex; gap: 10px; padding: 9px 16px; }

.abs-rail .case.on { background: var(--e-violet-soft); box-shadow: inset 3px 0 0 var(--e-violet); }

.abs-rail .case b { font-size: 13px; font-weight: 600; color: var(--e-ink); }

.abs-rail .case .m-col { flex: 1; min-width: 0; }

.abs-rail .case .dt { font-size: 10.5px; color: var(--e-ink-3); text-transform: uppercase; letter-spacing: 0.04em; }

.abs-rail .case .sub { font-size: 11.5px; color: var(--e-ink-2); }

.abs-rail .case .st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--e-ink-2); }

.abs-rail .dot { width: 7px; height: 7px; border-radius: 999px; }

.abs-rail .dot.warn { background: var(--e-warn); }

.abs-rail .dot.ok { background: var(--e-ok); }

.abs-rail .empty { display: none; padding: 4px 16px 8px; font-size: 11.5px; color: var(--e-ink-3); }

.abs-rail .empty.in { display: block; }

.abs-rail .foot { border-top: 1px solid var(--e-line); padding: 10px 16px; font-size: 11px; color: var(--e-ink-3); }

.abs-detail { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 16px; box-shadow: var(--e-shadow-card); padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.abs-detail .dh { display: flex; align-items: center; gap: 12px; }

.abs-detail .dh .tile { width: 40px; height: 40px; border-radius: 12px; background: var(--e-violet-soft); color: var(--e-violet); display: grid; place-items: center; }

.abs-detail .dh .tile .ms { font-size: 22px; }

.abs-detail .dh h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--e-ink); }

.abs-detail .dh .m-badge { margin-left: auto; font-size: 11px; padding: 5px 10px; }

.abs-detail .progress { padding: 4px 0 0; }

.abs-detail .track { height: 4px; border-radius: 999px; background: var(--e-line); margin: 0 10% 10px; overflow: hidden; }

.abs-detail .track i { display: block; height: 100%; width: var(--w); background: var(--e-grad); border-radius: 999px; transition: width .9s var(--ease-spring); }

.abs-detail .steps { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }

.abs-detail .step { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }

.abs-detail .step i { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--e-line-2); background: var(--e-surface); margin-top: -22px; margin-bottom: 4px; display: grid; place-items: center; color: #fff; transition: background .4s, border-color .4s; }

.abs-detail .step i .ms { font-size: 12px; opacity: 0; }

.abs-detail .step.done i { background: var(--e-grad); border-color: transparent; }

.abs-detail .step.done i .ms { opacity: 1; }

.abs-detail .step.cur i { border-color: var(--e-accent); box-shadow: 0 0 0 3px var(--e-accent-soft); }

.abs-detail .step b { font-size: 11.5px; font-weight: 600; color: var(--e-ink); }

.abs-detail .step span { font-size: 10px; color: var(--e-ink-3); }

.abs-detail .strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--e-line); border-radius: 12px; overflow: hidden; }

.abs-detail .strip > div { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--e-line); background: var(--e-surface-2); }

.abs-detail .strip > div:last-child { border-right: 0; }

.abs-detail .strip b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.abs-detail .content { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start; }

.abs-detail .sections { display: flex; flex-direction: column; gap: 12px; }

.abs-detail .asec { display: flex; flex-direction: column; gap: 4px; }

.abs-detail .asec > .m-overline { margin-bottom: 2px; white-space: nowrap; }

.abs-detail .strip .m-overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; letter-spacing: 0.06em; }

.abs-detail .shift { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'dt badge' 'txt badge'; align-items: center; gap: 1px 10px; padding: 6px 0; border-bottom: 1px solid var(--e-line); font-size: 12px; color: var(--e-ink); }

.abs-detail .shift .dt { grid-area: dt; font-size: 10.5px; color: var(--e-ink-3); text-transform: uppercase; letter-spacing: 0.04em; }

.abs-detail .shift > span:nth-child(2) { grid-area: txt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.abs-detail .shift > .m-badge { grid-area: badge; white-space: nowrap; }

.abs-detail .kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--e-line); font-size: 12px; }

.abs-detail .kv span { color: var(--e-ink-2); }

.abs-detail .kv b { font-weight: 600; color: var(--e-ink); }

.abs-detail .doc { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--e-line); }

.abs-detail .doc b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.abs-detail .doc .m-col > span { font-size: 10.5px; color: var(--e-ink-3); }

.abs-detail .doc .m-badge { margin-left: auto; }

.abs-detail .decide { border: 1px solid var(--e-line); border-radius: 14px; background: var(--e-surface-2); padding: 14px; }

.abs-detail .decide .pane { display: none; flex-direction: column; gap: 8px; }

.abs-detail .decide .pane.before { display: flex; }

.abs-detail .decide[data-state="busy"] .pane.before, .abs-detail .decide[data-state="after"] .pane.before { display: none; }

.abs-detail .decide[data-state="busy"] .pane.busy { display: flex; }

.abs-detail .decide[data-state="after"] .pane.after { display: flex; }

.abs-detail .decide p { font-size: 11.5px; color: var(--e-ink-2); line-height: 1.4; }

.abs-detail .est { border-radius: 10px; background: var(--e-surface); border: 1px solid var(--e-line); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }

.abs-detail .est > b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--e-ink); }

.abs-detail .est .cap { font-size: 10.5px; color: var(--e-ink-3); margin-bottom: 4px; }

.abs-detail .est .kv { font-size: 11px; padding: 4px 0; }

.abs-detail .check { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--e-ink); }

.abs-detail .check .box { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--e-ink-3); display: grid; place-items: center; color: #fff; flex: none; transition: background .2s, border-color .2s; }

.abs-detail .check .box .ms { font-size: 12px; opacity: 0; }

.abs-detail .check .box.on { background: var(--e-grad); border-color: transparent; }

.abs-detail .check .box.on .ms { opacity: 1; }

.abs-detail .m-btn.disabled { opacity: .45; }

.abs-detail .textbtn { text-align: center; font-size: 12px; font-weight: 600; color: var(--e-ink-2); padding: 4px; }

/* ============================================================
   Organisation home
   ============================================================ */
.m-payruns .cap { font-size: 10.5px; color: var(--e-ink-3); margin-bottom: 6px; }

.m-payruns .grp { display: flex; justify-content: space-between; padding: 8px 0 4px; font-size: 11px; font-weight: 600; color: var(--e-ink-2); border-bottom: 1px solid var(--e-line); }

.m-payruns .pr { display: grid; grid-template-columns: 28px 112px minmax(0, 1fr) 100px 108px 16px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--e-line); }

.m-payruns .pr .who b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.m-payruns .pr .who > span { font-size: 10.5px; color: var(--e-ink-3); }

.m-payruns .pr .money b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--e-ink); }

.m-payruns .pr .money > span, .m-payruns .pr .stage > span { font-size: 10.5px; color: var(--e-ink-3); }

.m-payruns .pr .stage b { font-size: 12px; font-weight: 600; color: var(--e-ink); }

.m-payruns .pr .stage .warn { color: var(--e-warn); font-weight: 600; }

.m-payruns .pr .chev { font-size: 16px; color: var(--e-ink-3); }

.m-payruns .pr .bar { display: flex; flex-direction: column; gap: 4px; padding-right: 8px; }

.m-payruns .pr .lbls { display: flex; justify-content: flex-end; font-size: 9.5px; color: var(--e-ink-3); white-space: nowrap; }

.m-payruns .pr .lbls span:first-child { display: none; }

.m-pmbar { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--e-surface-2); margin: 6px 8px 4px 0; }

.m-pmbar .fill { position: absolute; left: 0; top: 0; height: 100%; width: var(--w); border-radius: 999px; background: var(--e-grad); transition: width 1s var(--ease-spring); }

.m-pmbar .today { position: absolute; top: 50%; left: var(--t); width: 11px; height: 11px; border-radius: 50%; background: var(--e-accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--e-surface); }

.m-pmbar .payday { position: absolute; top: 50%; right: -8px; width: 17px; height: 17px; border-radius: 50%; background: var(--e-ink); color: var(--e-surface); font-size: 9px; font-weight: 700; font-style: normal; display: grid; place-items: center; transform: translateY(-50%); }

.m-orgbud .rings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.m-orgbud .rt { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--e-line); border-radius: 12px; padding: 10px 8px; text-align: center; }

.m-orgbud .rt b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.m-orgbud .rt .cap { font-size: 10.5px; color: var(--e-ink-3); }

.m-orgbud .m-ring .val { font-size: 14px; }

.m-orgbud .foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--e-line); font-size: 11.5px; color: var(--e-ink-2); }

.m-orgreq .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

.m-orgreq .mc { border: 1px solid var(--e-line); border-radius: 12px; padding: 10px 12px; }

.m-orgreq .mh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.m-orgreq .mh b { font-size: 13px; font-weight: 600; color: var(--e-ink); }

.m-orgreq .rq { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'kind acts' 'info acts' 'age acts'; align-items: center; gap: 3px 12px; padding: 8px 0; border-top: 1px solid var(--e-line); }

.m-orgreq .rq .kind { grid-area: kind; justify-self: start; white-space: nowrap; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; text-align: center; }

.m-orgreq .rq .kind.amber { background: var(--e-amber-soft); color: var(--e-amber); }

.m-orgreq .rq .kind.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.m-orgreq .rq .kind.bad { background: var(--e-bad-bg); color: var(--e-bad); }

.m-orgreq .rq .kind.violet { background: var(--e-violet-bg); color: var(--e-violet); }

.m-orgreq .rq .m-col { grid-area: info; }

.m-orgreq .rq b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.m-orgreq .rq .m-faint { font-size: 11px; }

.m-orgreq .rq .acts { grid-area: acts; display: flex; gap: 6px; }

.m-orgreq .rq .acts .m-btn { width: auto; min-width: 72px; padding: 0 10px; }

.m-orgreq .rq .age { grid-area: age; font-size: 10.5px; color: var(--e-ink-3); }

.m-orgreq .allclear { display: flex; align-items: center; gap: 6px; padding: 8px 0 2px; border-top: 1px solid var(--e-line); font-size: 11.5px; color: var(--e-ink-2); }

.m-orgreq .allclear .ms { font-size: 16px; color: var(--e-ok); }

/* ============================================================
   My PAs split view + employment setup wizard
   ============================================================ */
.m-split { flex-direction: row; }

.m-split .rail { width: 308px; flex: none; border-right: 1px solid var(--e-line); background: var(--e-surface); display: flex; flex-direction: column; height: 100%; }

.m-split .rh { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 6px; }

.m-split .rh h1 { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; color: var(--e-ink); }

.m-split .search { display: flex; flex-direction: column; gap: 6px; padding: 6px 16px 10px; }

.m-split .search .m-input { height: 31px; border-radius: 999px; font-size: 11.5px; }

.m-split .search .help { font-size: 11px; color: var(--e-ink-3); }

.m-split .chips { display: flex; gap: 6px; padding: 0 16px 12px; }

.m-split .chips .m-chip { height: 23px; font-size: 11.5px; }

.m-split .list { padding: 0 8px 14px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }

.m-split .gl { padding: 8px 8px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-ink-3); }

.m-split .list .row { display: flex; align-items: center; gap: 11px; border-radius: 12px; padding: 8px 10px; }

.m-split .list .row.on { background: var(--e-nav-on); }

.m-split .list .row b { font-size: 13px; font-weight: 600; color: var(--e-ink); }

.m-split .list .row .m-col > span { font-size: 11px; color: var(--e-ink-2); }

.m-split .list .row .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--e-ok); margin-left: auto; }

.m-split .panel { flex: 1; min-width: 0; position: relative; overflow: hidden; }

.m-split .page { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; padding: 30px 40px 40px; display: flex; flex-direction: column; gap: 22px; }

.m-split .page.show { opacity: 1; pointer-events: auto; }

.m-split .ph { display: flex; align-items: center; gap: 18px; }

.m-split .ph .ov { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-ink-3); }

.m-split .ph .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--e-ok); }

.m-split .ph .dot.amber { background: var(--e-amber); }

.m-split .ph h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--e-ink); }

.m-split .ph .sub { font-size: 13px; color: var(--e-ink-2); }

.m-split .ph .acts { margin-left: auto; display: flex; gap: 8px; }

.m-split .quote { border: 1px solid var(--e-line-2); border-radius: 16px; padding: 16px 20px; background: var(--e-surface); display: flex; flex-direction: column; gap: 8px; }

.m-split .quote p { font-size: 14px; color: var(--e-ink); line-height: 1.45; }

.m-split .quote .who { font-size: 11.5px; color: var(--e-ink-3); }

.m-split .quote .locked { display: flex; gap: 16px; font-size: 11.5px; color: var(--e-ink-3); margin-top: 4px; }

.m-split .quote .locked span { display: inline-flex; align-items: center; gap: 4px; }

.m-split .quote .locked .ms { font-size: 14px; }

.m-split .frame { border: 1px solid var(--e-line-2); border-radius: 16px; overflow: hidden; background: var(--e-surface); }

.m-split .fh { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--e-line-2); background: var(--e-bg); padding: 14px 22px; }

.m-split .fh b { font-size: 13.5px; font-weight: 600; color: var(--e-ink); }

.m-split .fh span { font-size: 12px; color: var(--e-ink-2); }

.m-split .cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--e-line-2); }

.m-split .cell { background: var(--e-surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; min-height: 100px; }

.m-split .cell b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--e-ink); }

.m-split .cell > span:last-child { font-size: 12px; color: var(--e-ink-2); line-height: 1.4; }
/* Wizard page */
.m-split .page.wiz { align-items: center; padding-top: 22px; }

.m-split .wz { width: 546px; display: flex; flex-direction: column; gap: 10px; }

.m-split .wz .back { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--e-ink-2); }

.m-split .wz .back .ms { font-size: 16px; }

.m-split .wz h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; color: var(--e-ink); }

.m-split .wz .sub { font-size: 13px; color: var(--e-ink-2); margin-top: -4px; }

.m-split .stepper { display: flex; justify-content: space-between; margin-top: 4px; }

.m-split .st { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.m-split .st i { width: 26px; height: 26px; border-radius: 999px; background: var(--e-surface-2); color: var(--e-ink-3); font-size: 11.5px; font-weight: 600; font-style: normal; display: grid; place-items: center; transition: background .3s, color .3s, box-shadow .3s; }

.m-split .st span { font-size: 10px; color: var(--e-ink-3); text-align: center; }

.m-split .st.active i { background: var(--e-grad); color: #fff; box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.25); }

.m-split .st.active span { color: var(--e-accent-ink); font-weight: 500; }

.m-split .st.done i { background: var(--e-grad); color: #fff; }

.m-split .pbar { height: 4px; border-radius: 999px; background: var(--e-surface-2); overflow: hidden; margin-top: 6px; }

.m-split .pbar i { display: block; height: 100%; width: var(--w); background: var(--e-grad); transition: width .3s; }

.m-split .form { padding: 18px 20px; margin-top: 6px; }

.m-split .form h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--e-ink); }

.m-split .form .step { display: flex; flex-direction: column; gap: 8px; }

.m-split .form .step[hidden] { display: none; }

.m-split .opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--e-line); transition: border-color .2s, background .2s; }

.m-split .opt.on { border-color: var(--e-accent); background: var(--e-accent-soft); }

.m-split .opt b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.m-split .opt .m-col > span { font-size: 11px; color: var(--e-ink-2); line-height: 1.35; }

.m-split .opt .radio { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--e-ink-3); flex: none; margin-top: 2px; position: relative; transition: border-color .2s; }

.m-split .opt.on .radio { border-color: var(--e-accent); }

.m-split .opt.on .radio::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: var(--e-grad); }

.m-split .fields { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

.m-split .fields label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--e-ink-2); }

.m-split .fields .m-input { font-weight: 500; color: var(--e-ink); }

.m-split .reco { border-radius: 12px; border: 1px solid var(--e-line); background: var(--e-surface-2); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--e-ink-2); }

.m-split .reco b { font-size: 11px; color: var(--e-ink); }

.m-split .reco .ok { color: var(--e-ok); font-weight: 600; }

.m-split .form .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ============================================================
   Payments hub
   ============================================================ */
.m-pay { max-width: 900px; margin: 0 auto; padding: 24px 40px 30px; display: flex; flex-direction: column; gap: 12px; color: var(--e-ink); }

.m-pay .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.m-pay .month { display: flex; align-items: center; gap: 4px; }

.m-pay .month h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; }

.m-pay .month .nb { font-size: 18px; color: var(--e-ink-3); }

.m-pay .sub { font-size: 12px; color: var(--e-ink-2); }

.pay-card { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 18px; padding: 14px 18px; transition: border-color .25s; }

.pay-card.hero { padding: 18px 22px; box-shadow: var(--e-shadow-card); background: radial-gradient(ellipse at top right, var(--e-accent-soft), transparent 55%), var(--e-surface); }

.pay-card .total { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; font-variant-numeric: tabular-nums; }

.pay-card .pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 11px 4px 6px; border: 1px solid var(--e-line-2); border-radius: 99px; font-size: 11.5px; font-weight: 600; box-shadow: 0 3px 10px rgba(22, 24, 29, 0.03); background: var(--e-surface); }

.pay-card .pill b { min-width: 21px; height: 21px; border-radius: 99px; background: var(--e-accent-soft); color: var(--e-accent-ink); display: grid; place-items: center; font-size: 11px; }

.pay-card .pill.done b { background: var(--e-ok-bg); color: var(--e-ok); }

.pay-card .costbar { display: flex; gap: 3px; height: 12px; border-radius: 99px; overflow: hidden; background: var(--e-surface-2); margin-top: 12px; }

.pay-card .costbar i { flex-basis: 0; min-width: 2px; transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s; }

.pay-card .costbar.grow i { transform: scaleX(1); }

.pay-card .costbar i.dim { opacity: .35; }

.pay-card .legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }

.pay-card .legend > span { display: flex; gap: 6px; align-items: flex-start; font-size: 10.5px; color: var(--e-ink-2); }

.pay-card .legend > span > i { width: 7px; height: 7px; border-radius: 2px; margin-top: 4px; flex: none; }

.pay-card .legend b { font-size: 11px; font-weight: 600; color: var(--e-ink); }

.pay-card .cta { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--e-line); }

.pay-card .cta .m-btn { height: 38px; padding: 0 18px; font-size: 13px; flex: none; }

.pay-card .cta .note { font-size: 11.5px; color: var(--e-ink-2); line-height: 1.35; }

.pay-card.timeline ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }

.pay-card.timeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }

.pay-card.timeline li i { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--e-accent); box-shadow: 0 0 0 4px var(--e-surface); margin-bottom: 4px; z-index: 1; }

.pay-card.timeline li i .ms { font-size: 15px; }

.pay-card.timeline li.auto i { background: var(--e-teal-soft); color: var(--e-teal); }

.pay-card.timeline li:not(:first-child)::before { content: ''; position: absolute; left: -50%; right: 50%; top: 13px; border-top: 2px dashed var(--e-line-2); }

.pay-card.timeline li b { font-size: 11.5px; font-weight: 600; color: var(--e-ink); }

.pay-card.timeline li span { font-size: 10.5px; color: var(--e-ink-2); }

.m-pay .people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.pay-card.person { box-shadow: var(--e-shadow-card); display: flex; flex-direction: column; gap: 8px; }

.pay-card.person b { font-size: 12.5px; font-weight: 600; }

.pay-card.person > .m-row { gap: 10px; align-items: center; }

.pay-card.person > .m-row > .m-col { min-width: 0; }

.pay-card.person b, .pay-card.person > .m-row .m-faint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Amount + status sit on one row pinned to the bottom, so the three cards' bars stay level */
.pay-card.person .amt { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }

.pay-card.person .amt .m-badge { flex: none; white-space: nowrap; }

.pay-card.person .amt strong { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.pay-card.person .amt .m-faint { font-size: 10.5px; }

.pay-card.person .prog { height: 6px; border-radius: 99px; background: var(--e-mute-bg); overflow: hidden; }

.pay-card.person .prog i { display: block; height: 100%; width: var(--w); background: var(--person-color); transition: width .8s var(--ease-spring); }

.pay-card.person[data-done="1"] { border-color: var(--e-ok-light); }

.m-pay .bills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pay-card.bill { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }

.pay-card.bill .ic { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, currentColor 10%, transparent); display: grid; place-items: center; flex: none; }

.pay-card.bill .ic .ms { font-size: 21px; }

.pay-card.bill b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.pay-card.bill .m-col > span { font-size: 10.5px; color: var(--e-ink-2); }

.pay-card.bill strong { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--e-ink); }

/* ============================================================
   Documents hub
   ============================================================ */
.m-docs { max-width: 1060px; margin: 0 auto; padding: 22px 40px 24px; display: flex; flex-direction: column; gap: 14px; }

.m-docs .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.m-docs .head h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--e-ink); }

.m-docs .head p { font-size: 12.5px; color: var(--e-ink-2); max-width: 640px; margin-top: 4px; line-height: 1.45; }

.m-docs .tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--e-mute-bg); color: var(--e-ink-2); }

.m-docs .tile .ms { font-size: 19px; }

.m-docs .tile.blue { background: var(--e-blue-soft); color: var(--e-blue); }

.m-docs .tile.teal { background: var(--e-teal-soft); color: var(--e-teal); }

.m-docs .tile.violet { background: var(--e-violet-soft); color: var(--e-violet); }

.m-docs .tile.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.docs-band { border: 1px solid var(--e-amber-line); background: var(--e-amber-bg); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }

.docs-band .cap { display: flex; align-items: center; gap: 8px; }

.docs-band .cap .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--e-warn); }

.docs-band .cap .cnt { font-size: 11px; font-weight: 700; color: var(--e-ink); }

.docs-band .cap .m-faint { font-size: 11.5px; margin-left: 6px; }

.docs-band .att { display: flex; align-items: center; gap: 12px; }

.docs-band .att b { font-size: 13.5px; font-weight: 600; color: var(--e-ink); }

.docs-band .att .m-col > span { font-size: 11.5px; color: var(--e-ink-2); }

.docs-band .att .meta { font-size: 10.5px; color: var(--e-ink-3); }

.docs-band .att .m-btn { margin-left: auto; }

.docs-calm { display: flex; align-items: center; gap: 12px; border: 1px solid var(--e-line); border-radius: 14px; background: var(--e-surface); padding: 12px 16px; }

.docs-calm b { font-size: 13.5px; font-weight: 600; color: var(--e-ink); }

.docs-calm .m-col > span { font-size: 11.5px; color: var(--e-ink-2); }

.docs-sec { display: flex; flex-direction: column; gap: 6px; }

.docs-sec .sh { display: flex; align-items: center; gap: 12px; }

.docs-sec .sh b { font-size: 13.5px; font-weight: 600; color: var(--e-ink); }

.docs-sec .sh > span { font-size: 11.5px; color: var(--e-ink-2); }

.docs-sec .sh .auto { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; border: 1px solid var(--e-line-2); padding: 2px 8px; font-size: 10.5px; font-weight: 600; color: var(--e-ink-2); }

.docs-sec .sh .auto .ms { font-size: 13px; color: var(--e-ok); transition: transform .8s ease; }

.docs-sec .sh .auto .ms.turn { transform: rotate(360deg); }

.docs-sec .prow, .docs-sec .urow, .docs-sec .arow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--e-line); border-radius: 12px; background: var(--e-surface); }

.docs-sec .prow b, .docs-sec .urow b, .docs-sec .arow b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.docs-sec .m-col > span { font-size: 11px; color: var(--e-ink-2); }

.docs-sec .m-col { flex: 1; min-width: 0; }

.docs-sec .urow .when { width: 90px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--e-ink-2); }

.docs-sec .urow .m-badge { width: 96px; justify-content: center; }

.docs-sec .urow .m-wa, .docs-sec .arow .m-wa, .docs-sec .prow .m-wa { margin-left: 0; width: 110px; justify-content: flex-end; transition: opacity .4s; }

.docs-sec .arow .st { display: inline-flex; align-items: center; gap: 6px; width: 220px; font-size: 11px; color: var(--e-ink-2); }

.docs-sec .arow .st i { width: 7px; height: 7px; border-radius: 999px; background: var(--e-ok); }

.docs-sec.archive .sh b { font-size: 15px; }

.docs-sec.archive .chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }

.docs-sec.archive .chips .m-chip { gap: 6px; }

.docs-sec.archive .chips .all { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--e-line-2); background: var(--e-surface-2); font-size: 8px; font-weight: 700; display: grid; place-items: center; color: var(--e-ink-2); }

.docs-sec.archive .chips .m-chip.on .all { background: rgba(255, 255, 255, .15); color: var(--e-surface); border-color: transparent; }

.docs-sec.archive .chips .tag { font-size: 9.5px; font-weight: 700; color: var(--e-warn); }

.docs-sec.archive .rows { display: flex; flex-direction: column; gap: 5px; }

.docs-sec.archive .arow { padding: 6px 12px; }

/* Page stack inside a screen (hub ↔ detail crossfade) */
.m-pages { position: relative; flex: 1; min-height: 0; }

.m-page { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; overflow: hidden; }

.m-page.show { opacity: 1; pointer-events: auto; }

/* Document view */
/* Document view — the product's /documents/[id] page (breadcrumb, facts strip, PDF preview, next step, details, history) */
.m-dd { height: 100%; overflow: hidden; }

.dd-scroller { padding: 22px 32px 40px; display: flex; flex-direction: column; gap: 22px; transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }

.dd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.dd-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--e-ink-2); }

.dd-crumb .ms { font-size: 16px; }

.dd-crumb b { font-weight: 400; color: var(--e-ink); }

.dd-permalink { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--e-ink-3); }

.dd-permalink .ms { font-size: 15px; }

.m-dd .mono { font-family: var(--e-mono); font-variant-numeric: tabular-nums; }

.m-dd .cap { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-ink-3); }

.m-dd .muted { color: var(--e-ink-3); font-size: 11.5px; }

.dd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--e-line); background: var(--e-surface); font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--e-ink); white-space: nowrap; transition: opacity .2s ease, transform .15s ease; }

.dd-btn .ms { font-size: 17px; }

.dd-btn.xs { padding: 3px 9px; font-size: 11.5px; }

.dd-btn.sq { width: 36px; height: 36px; padding: 0; }

.dd-btn.sq .ms { font-size: 18px; }

.dd-btn.dim { opacity: .5; }

.dd-btn.pri { background: var(--e-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(255, 46, 126, 0.3); }

.dd-btn.block { width: 100%; }

.dd-btn.busy { opacity: .5; }

.dd-btn.pressed { transform: scale(.97); }

.dd-status { font-size: 12px; color: var(--e-ink-2); line-height: 1.5; }

.dd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.dd-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }

.dd-tile { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--e-teal-soft); color: var(--e-teal); }

.dd-tile .ms { font-size: 25px; }

.dd-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--e-ink); }

.dd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--e-ink-2); font-size: 13px; }

.dd-meta .who { display: inline-flex; align-items: center; gap: 6px; }

.dd-meta b { font-weight: 500; color: var(--e-ink); }

.dd-meta .dot { color: var(--e-ink-3); }

.dd-meta .mono { font-size: 12px; }

.dd-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.dd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--e-line); border: 1px solid var(--e-line); border-radius: 16px; overflow: hidden; }

.dd-facts .fact { display: flex; flex-direction: column; gap: 8px; background: var(--e-surface); padding: 16px 20px; min-width: 0; }

.dd-facts .val { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--e-ink-2); }

.dd-facts .val .ms { font-size: 17px; }

.dd-facts .val.pill { border-radius: 999px; padding: 3px 11px 3px 8px; }

.dd-facts .val.you { color: var(--e-amber-ink); background: var(--e-amber-bg); }

.dd-facts .val.wait { color: var(--e-amber-ink); }

.dd-facts .val.ok { color: var(--e-ok); }

.dd-facts p { font-size: 12px; color: var(--e-ink-2); line-height: 1.5; }

.dd-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }

.dd-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.dd-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.dd-prev { display: flex; flex-direction: column; gap: 10px; }

.dd-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.dd-card { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 14px; overflow: hidden; box-shadow: var(--e-shadow-card); }

.dd-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--e-line); font-size: 12px; color: var(--e-ink-2); }

.dd-nav > span:nth-child(2) { min-width: 80px; text-align: center; font-variant-numeric: tabular-nums; }

.dd-page { aspect-ratio: 1 / 1.414; background: #FFFFFF; overflow: hidden; }

.dd-page .paper.flat { border: 0; border-radius: 0; box-shadow: none; padding: 36px 40px; height: 100%; font-size: 11.5px; }

.dd-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--e-line); font-size: 11.5px; color: var(--e-ink-3); }

.dd-link { display: inline-flex; align-items: center; gap: 4px; color: var(--e-ink-2); font-size: 12.5px; font-weight: 500; }

.dd-link .ms { font-size: 15px; }

.dd-meaning { display: flex; flex-direction: column; gap: 10px; }

.dd-meaning p { font-size: 14px; line-height: 1.65; color: var(--e-ink); max-width: 640px; }

.dd-next { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 14px; background: var(--e-surface); border: 1px solid var(--e-line); box-shadow: var(--e-shadow-card); }

.dd-next .lbl { display: inline-flex; align-items: center; gap: 8px; }

.dd-next .lbl .d { width: 8px; height: 8px; border-radius: 999px; background: var(--e-amber-ink); }

.dd-next h2 { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--e-ink); }

.dd-next p { font-size: 12.5px; line-height: 1.55; color: var(--e-ink-2); }

.dd-calm { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--e-ok-bg); border: 1px solid var(--e-green-line); }

.dd-calm > .ms { font-size: 20px; color: var(--e-ok); }

.dd-calm h2 { font-size: 13.5px; font-weight: 600; color: var(--e-ok); }

.dd-calm p { font-size: 12px; color: var(--e-ink-2); line-height: 1.5; }

.dd-sec { display: flex; flex-direction: column; }

.dd-sh { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--e-line); }

.dd-dl { margin: 0; }

.dd-dl > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--e-line); font-size: 12.5px; line-height: 1.45; }

.dd-dl dt { color: var(--e-ink-2); }

.dd-dl dd { margin: 0; font-weight: 500; color: var(--e-ink); }

.dd-tl { padding-top: 14px; display: flex; flex-direction: column; }

.dd-tl .ev { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; }

.dd-tl .track { display: flex; flex-direction: column; align-items: center; }

.dd-tl .track::after { content: ''; flex: 1; width: 1px; background: var(--e-line); min-height: 14px; }

.dd-tl .ev.last .track::after { visibility: hidden; }

.dd-tl .track i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; flex: none; font-style: normal; }

.dd-tl .track i .ms { font-size: 12px; }

.dd-tl .track i.info { color: var(--e-ink-2); background: var(--e-mute-bg); }

.dd-tl .track i.ok { color: var(--e-ok); background: var(--e-ok-bg); }

.dd-tl .copy { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; min-width: 0; }

.dd-tl .copy b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.dd-tl .copy .t { font-size: 10.5px; color: var(--e-ink-3); }

.dd-tl .copy p { font-size: 12px; color: var(--e-ink-2); line-height: 1.5; }
/* The rendered PDF stays paper-white in both themes */
.paper { background: #FFFFFF; color: #16181D; border-radius: 8px; border: 1px solid var(--e-line); box-shadow: var(--e-shadow-pop); padding: 24px 28px; font-size: 11.5px; }

.paper .ptop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.paper .pw { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: #16181D; }

.paper .pov { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #8A91A0; }

.paper .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }

.paper .pl { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8A91A0; }

.paper .pgrid b { display: block; font-size: 12.5px; font-weight: 600; margin: 2px 0 1px; }

.paper .pl2 { font-size: 10.5px; color: #6B7280; }

.paper .ptable { width: 100%; border-collapse: collapse; }

.paper .ptable th { text-align: left; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8A91A0; padding: 7px 0 5px; border-bottom: 1px solid #EDEFF4; }

.paper .ptable td { padding: 6px 0; border-bottom: 1px solid #F5F6FA; color: #16181D; font-variant-numeric: tabular-nums; }

.paper .ptable .num { text-align: right; }

.paper .ptable tr.sub td { font-weight: 700; border-bottom: 1px solid #E3E6EE; }

.paper .pnet { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 2px solid #16181D; font-weight: 600; }

.paper .pnet b { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.paper .pfoot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 9.5px; color: #8A91A0; }

/* ============================================================
   Organisation: combined budgets + members / acting-as
   ============================================================ */
.o-body { padding: 14px 26px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }

.o-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 600; }

.o-chip.bad { background: var(--e-bad-bg); color: var(--e-bad); }

.o-chip.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.o-chip.mute { background: var(--e-mute-bg); color: var(--e-mute); }

.o-case { display: flex; align-items: center; gap: 28px; border-radius: 14px; border: 1px solid var(--e-line); background: var(--e-surface); padding: 14px 20px; box-shadow: var(--e-shadow-card); }

.o-case .left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }

.o-case .chip { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; transition: background .3s, color .3s; }

.o-case .chip.bad { background: var(--e-bad-bg); color: var(--e-bad); }

.o-case .chip.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.o-case .chip .ms { font-size: 21px; }

.o-case .left b { font-size: 14.5px; font-weight: 700; color: var(--e-ink); }

.o-case .left .m-col > span { font-size: 11.5px; color: var(--e-ink-2); }

.o-case .right { width: 380px; flex: none; display: flex; flex-direction: column; gap: 5px; }

.o-case .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }

.o-case .top b { font-size: 12.5px; font-weight: 700; color: var(--e-ink); }

.o-case .top span { font-size: 10.5px; color: var(--e-ink-3); }

.o-case .track { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: var(--e-surface-2); }

.o-case .track i { position: absolute; top: 0; height: 100%; left: var(--l, 0); width: var(--w); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(0.215, 0.61, 0.355, 1), left .5s, width .5s; }

.o-case .track i.fill { background: var(--e-ok); }

.o-case .track i.headroom { background: color-mix(in srgb, var(--e-ink-3) 28%, var(--e-surface-2)); transition-delay: .45s; transition-duration: .6s; }

.o-case .track i.over { background: var(--e-bad); transition-delay: .8s; transition-duration: .6s; }

.o-case .track i.tick { width: 0; border-left: 2px solid var(--e-ink); top: -3px; bottom: -3px; height: auto; transform: translateX(-1px); transition: left .5s; }

.o-case .track.grow i:not(.tick) { transform: scaleX(1); }

.o-case .legend { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }

.o-case .legend .bad { color: var(--e-bad); font-weight: 600; }

.o-case .o-closing { font-size: 10.5px; color: var(--e-ink-3); }

.o-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.o-card { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 14px; box-shadow: var(--e-shadow-card); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; transition: border-color .4s, background .4s, box-shadow .4s; }

.o-card.over { border-color: color-mix(in srgb, var(--e-bad) 55%, var(--e-line)); background: color-mix(in srgb, var(--e-bad) 5%, var(--e-surface)); box-shadow: 0 1px 2px rgba(217, 45, 32, 0.08), 0 8px 20px rgba(217, 45, 32, 0.12); }

.o-card .oh { display: flex; align-items: center; gap: 9px; }

.o-card .oh b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); white-space: nowrap; }

.o-card .oh .m-col > span { font-size: 10px; color: var(--e-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.o-card .oh .m-col { min-width: 0; flex: 1; }

.o-card .open { font-size: 10.5px; font-weight: 600; color: var(--e-accent-ink); display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .2s; white-space: nowrap; }

.o-card .open .ms { font-size: 13px; }

.o-card.hov .open { opacity: 1; }

.o-card .figs { display: flex; align-items: center; gap: 12px; }

.o-card .fc { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--e-ink); line-height: 1.1; }

.o-card .figs .m-col > span { font-size: 10px; color: var(--e-ink-3); }

.o-card .st { align-items: flex-end; text-align: right; flex: none; }

.o-card .st b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }

.o-card .st.ok b, .o-card .st.ok span { color: var(--e-ok); }

.o-card .st.near b, .o-card .st.near span { color: var(--e-amber-ink); }

.o-card .st.bad b, .o-card .st.bad span { color: var(--e-bad); }

.o-card .spark { width: 100%; height: 38px; display: block; }

.o-card .spark .bl { stroke: var(--e-ink-3); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }

.o-card .spark path { fill: none; stroke-width: 2; stroke-dasharray: 6 3; stroke-linecap: round; }

.o-card .spark path.ok { stroke: var(--e-ok); }

.o-card .spark path.bad { stroke: var(--e-bad); }

.o-card .spark path.solid { stroke-dasharray: none; } /* spent so far is solid; the forecast beyond the dot is dashed */
.o-card .spark .dot { stroke: var(--e-surface); stroke-width: 1.5; }

.o-card .spark .dot.ok { fill: var(--e-ok); }

.o-card .spark .clip { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(0.215, 0.61, 0.355, 1); }

.o-card.swept .spark .clip { clip-path: inset(0 0 0 0); }

.o-card .foot { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--e-ink-3); font-variant-numeric: tabular-nums; }

.o-card .foot .bad { color: var(--e-bad); font-weight: 600; }

.o-card.empty .es { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 0 2px; }

.o-card.empty .es .ms { font-size: 22px; color: var(--e-accent-ink); }

.o-card.empty .es b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.o-card.empty .es > span { font-size: 10.5px; color: var(--e-ink-2); }

.o-card.empty .es .m-btn { margin-top: 6px; }

.o-foot { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--e-ink-3); }

.o-foot .ms { font-size: 14px; }
/* Budget health ring (org): banded wheel + overspend spill */
/* inherits: true — the angles are set on .o-ring but drawn by its ::before and .spill child */
@property --ring-a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

@property --ring-spill { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

.o-ring { position: relative; width: 56px; height: 56px; flex: none; --wheel: conic-gradient(from -90deg, var(--e-ok) 0deg 252deg, var(--e-amber) 324deg, var(--e-bad) 360deg); }

.o-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -90deg, transparent 0deg var(--ring-a), var(--e-surface-2) var(--ring-a) 360deg), var(--wheel);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  transition: --ring-a .9s cubic-bezier(0.215, 0.61, 0.355, 1); }

.o-ring.over { --wheel: conic-gradient(var(--e-bad), var(--e-bad)); }

.o-ring .spill { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from -90deg, var(--e-bad) 0deg var(--ring-spill), transparent var(--ring-spill) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  transition: --ring-spill .9s cubic-bezier(0.215, 0.61, 0.355, 1) .35s; }

.o-ring .label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--e-ink); transition: color .3s; }

.o-ring.near .label { color: var(--e-amber-ink); }

.o-ring.over .label { color: var(--e-bad); }
/* Members */
.o-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.o-filters .sd { width: 6px; height: 6px; border-radius: 999px; background: var(--e-ink-3); }

.o-filters .sd.ok { background: var(--e-ok); }

.o-filters .sd.amber { background: var(--e-amber); }

.o-filters .sd.mute { background: var(--e-mute); }

.o-filters .m-chip.on .sd { background: var(--e-surface); }

.o-members { border-radius: 14px; border: 1px solid var(--e-line); background: var(--e-surface); box-shadow: var(--e-shadow-card); overflow: hidden; }

.o-members .hrow, .o-members .mrow { display: grid; grid-template-columns: minmax(190px, 1.4fr) 76px 136px minmax(140px, 1.2fr) 100px 140px; gap: 10px; align-items: center; padding: 8px 16px; }

.o-members .hrow { background: var(--e-surface-2); border-bottom: 1px solid var(--e-line); font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-ink-3); }

.o-members .mrow { border-bottom: 1px solid var(--e-line); transition: background .15s; }

.o-members .mrow.hov { background: var(--e-surface-2); }

.o-members .who { display: flex; align-items: center; gap: 9px; }

.o-members .who b { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }

.o-members .who .m-col > span { font-size: 10.5px; color: var(--e-ink-3); }

.o-members .rc, .o-members .sc { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; padding: 2px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.o-members .rc { background: var(--e-mute-bg); color: var(--e-ink-2); }

.o-members .sc.ok { background: var(--e-ok-bg); color: var(--e-ok); }

.o-members .sc.amber { background: var(--e-amber-soft); color: var(--e-amber); }

.o-members .sc.mute { background: var(--e-mute-bg); color: var(--e-mute); }

.o-members .emp { font-size: 11.5px; color: var(--e-ink-2); }

.o-members .jd { font-size: 11.5px; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }

.o-members .acts { display: flex; justify-content: flex-end; align-items: center; gap: 6px; opacity: 0; transition: opacity .2s; }

.o-members .mrow.hov .acts { opacity: 1; }

.o-members .openpill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--e-accent-soft); color: var(--e-accent-ink-strong); font-size: 11px; font-weight: 600; white-space: nowrap; }

.o-members .openpill.sec { background: var(--e-surface); border: 1px solid var(--e-line-2); color: var(--e-ink); }

.o-members .rm { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: var(--e-ink-3); }

.o-members .rm .ms { font-size: 16px; }

.o-members .frow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--e-surface-2); font-size: 10.5px; color: var(--e-ink-3); }
/* Acting-as mirror */
.o-mirror { display: flex; flex-direction: column; }

.o-act { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 26px; background: var(--e-act-bg); border-bottom: 1px solid var(--e-line); transform: translateY(-100%); transition: transform .45s var(--ease-spring); }

.o-act::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--e-grad-full); }

.o-mirror.drop .o-act { transform: none; }

.o-act .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 9px; background: var(--e-grad); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.o-act .badge .ms { font-size: 13px; }

.o-act .switch { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; border: 1px solid var(--e-line-2); background: var(--e-surface); padding: 3px 8px 3px 3px; box-shadow: var(--e-shadow-card); }

.o-act .switch b { font-size: 13px; font-weight: 600; color: var(--e-ink); }

.o-act .switch .ms { font-size: 16px; color: var(--e-ink-3); }

.o-act .audit { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--e-ink-2); flex: 1; min-width: 0; }

.o-act .audit .ms { font-size: 15px; color: var(--e-accent-ink); flex: none; }

.o-act .audit .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.o-areas { display: flex; gap: 6px; padding: 8px 26px; border-bottom: 1px solid var(--e-line); background: var(--e-surface); }

.o-areas > span { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 500; color: var(--e-ink-2); }

.o-areas > span .ms { font-size: 15px; }

.o-areas > span.on { background: var(--e-surface); color: var(--e-accent-ink); font-weight: 600; box-shadow: var(--e-shadow-card); border: 1px solid var(--e-line); }

.o-mcontent { padding: 14px 26px 20px; transform: translateY(-44px); transition: transform .45s var(--ease-spring); }

.o-mirror.drop .o-mcontent { transform: none; }
/* Member view areas (Budget / Calendar) and the instant booking flow */
.om-area { display: none; }

.om-area.on { display: block; }

.om-cal { display: grid; grid-template-columns: 36px repeat(7, minmax(0, 1fr)); gap: 4px; }

.om-cal .dh { text-align: center; padding-bottom: 3px; }

.om-cal .dh b { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-ink-3); }

.om-cal .dh span { font-size: 14px; font-weight: 600; color: var(--e-ink); font-variant-numeric: tabular-nums; }

.om-cal .gut { position: relative; height: var(--h); }

.om-cal .gut span { position: absolute; left: 0; transform: translateY(-50%); font-size: 8.5px; color: var(--e-ink-3); font-variant-numeric: tabular-nums; }

.om-cal .dc { position: relative; height: var(--h); border-radius: 7px; background-color: var(--e-surface-2); background-image: repeating-linear-gradient(to bottom, var(--e-line-2) 0, var(--e-line-2) 1px, transparent 1px, transparent calc(100% / 9)); }

.om-cal .dc.wk { background-color: var(--e-weekend); }

.om-cal .m-blk { font-size: 10px; padding: 5px 7px; }

.om-cal .m-blk .ms { font-size: 11px; vertical-align: -2px; color: var(--e-ok); margin-right: 2px; }

.om-book .cols { grid-template-columns: 236px minmax(0, 1fr) 250px; }

.om-book .col { padding: 8px 12px 10px; gap: 5px; }

.om-book .ph { padding: 7px 18px 6px; }

.om-book .ph h2 { font-size: 15px; }

.om-when b { display: block; font-size: 13px; font-weight: 600; color: var(--e-ink); }

.om-when span { font-size: 11.5px; color: var(--e-ink-2); }

.om-repeat { display: flex; gap: 6px; }

.om-cost { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--e-ink-2); padding: 3px 0; border-bottom: 1px solid var(--e-line); }

.om-cost b { color: var(--e-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.om-cost.total { border-bottom: 0; font-size: 12.5px; }

.om-cost.total b { font-size: 15px; font-weight: 700; }

.om-head { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--e-ink-2); background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 8px; padding: 6px 8px; }

.om-head .ms { font-size: 14px; color: var(--e-ok); flex: none; }

.om-head b { color: var(--e-ink); font-weight: 600; }

.om-book .m-btn.block { margin-top: 2px; }

/* Letter variant of the paper */
.paper.letter h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 8px; color: #16181D; }

.paper.letter p { font-size: 11px; line-height: 1.5; color: #16181D; margin: 0 0 8px; }

.paper.letter p b { font-weight: 600; }

.paper.letter .laddr { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: #16181D; margin-bottom: 10px; }

.paper.letter .ptable { margin: 4px 0 10px; }

.paper.letter .lsig { display: flex; flex-direction: column; gap: 1px; font-size: 11px; margin-top: 10px; color: #16181D; }

.paper.letter .lsig b { font-weight: 700; font-size: 12px; }

/* ============================================================
   Budget widget + Personal assistants card (product redesign, dev 2026-09-18)
   ============================================================ */
.m-bw { padding: 20px; }

.m-bw .bwh { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.m-bw .bwh .sub { display: block; font-size: 10.5px; color: var(--e-ink-3); margin-top: 1px; }

.m-bw .lockup { display: grid; grid-template-columns: auto auto auto; grid-template-areas: 'fl sp bl' 'ff s bf'; column-gap: 12px; row-gap: 7px; align-items: baseline; justify-content: start; }

.m-bw .lockup .lbl { display: flex; align-items: center; gap: 6px; min-width: 0; }

.m-bw .lockup .lbl .ms { font-size: 13px; color: var(--e-ink-3); }

.m-bw .big { grid-area: ff; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -0.035em; color: var(--e-ink); font-variant-numeric: tabular-nums; }

.m-bw .slash { grid-area: s; font-size: 34px; line-height: 1; font-weight: 300; color: var(--e-line-2); }

.m-bw .bfig { grid-area: bf; font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }

.m-bw .used { margin-top: 8px; font-size: 12px; color: var(--e-ink-2); }

.m-bw .used b { font-weight: 600; color: var(--e-ink); font-variant-numeric: tabular-nums; }
/* meter */
.m-meter { margin-top: 20px; }

.m-meter .track { position: relative; height: 14px; border-radius: 999px; background: var(--e-surface-2); border: 1px solid var(--e-line); }

.m-meter .fill { position: absolute; inset: 0; display: flex; border-radius: 999px; overflow: hidden; clip-path: inset(0 100% 0 0 round 999px); transition: clip-path .9s cubic-bezier(0.22, 1, 0.36, 1); }

.m-meter.on .fill { clip-path: inset(0 0 0 0 round 999px); }

.m-meter .fill i { display: block; height: 100%; flex: none; }

.m-meter .start { background: var(--e-violet); }

.m-meter .spent { background: var(--e-ok); }

.m-meter .sched { background: color-mix(in srgb, var(--e-ok) 46%, var(--e-surface)); }

.m-meter .carry { background: color-mix(in srgb, var(--e-amber) 48%, var(--e-surface)); }

.m-meter .head { background: transparent; }

.m-meter .tick { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--e-ink-2); border-radius: 2px; }

.m-meter .tick::after { content: 'Budget'; position: absolute; top: -17px; right: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-ink-2); white-space: nowrap; }

.m-meter .key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11.5px; color: var(--e-ink-2); }

.m-meter .key span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.m-meter .key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.m-meter .key i.head { background: var(--e-surface-2); border: 1px solid var(--e-line-2); }

.m-meter .key b { font-weight: 600; color: var(--e-ink); font-variant-numeric: tabular-nums; }
/* segmented stat cells */
.m-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--e-line); border: 1px solid var(--e-line); border-radius: 12px; overflow: hidden; box-shadow: var(--e-shadow-card); margin-top: 14px; }

.m-cells.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.m-cells .cell { --c: var(--e-ink); display: flex; flex-direction: column; min-width: 0; padding: 13px 16px; background: var(--e-surface); }

.m-cells .cell.verdict { background: color-mix(in srgb, var(--c) 8%, var(--e-surface)); }

.m-cells .top { display: flex; align-items: center; gap: 8px; min-width: 0; }

.m-cells .chip { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) 12%, var(--e-surface)); color: var(--c); }

.m-cells .chip .ms { font-size: 16px; }

.m-cells .cell.verdict .chip { background: var(--c); color: var(--e-surface); }

.m-cells .label { display: flex; align-items: center; gap: 5px; min-width: 0; }

.m-cells .label .m-overline { white-space: nowrap; }

.m-cells .cell.verdict .label .m-overline { color: var(--c); }

.m-cells .label .ms { font-size: 13px; color: var(--e-ink-3); }

.m-cells .value { margin-top: 10px; font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--c); font-variant-numeric: tabular-nums; }

.m-cells .value.ink { color: var(--e-ink); }

.m-cells .caption { margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: var(--e-ink-2); }

.m-cells .caption b { font-weight: 600; color: var(--e-ink); font-variant-numeric: tabular-nums; }

.m-cells .cell.verdict .caption { color: var(--e-ink); opacity: .75; }

.m-cells .track { display: block; margin-top: 10px; height: 4px; border-radius: 999px; background: var(--e-surface-2); overflow: hidden; }

.m-cells .track i { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--c); transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1); }

.m-cells .track.dotted i { background-color: transparent; background-image: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }

.m-cells.on .track i { transform: scaleX(1); }

.m-cells .cell:nth-child(2) .track i { transition-delay: .06s; }

.m-cells .cell:nth-child(3) .track i { transition-delay: .12s; }

.m-cells .cell:nth-child(4) .track i { transition-delay: .18s; }
/* chart */
.m-bwc { display: block; width: 100%; height: auto; overflow: visible; margin-top: 14px; }

.m-bwc .cut { fill: var(--e-amber-bg); opacity: .45; }

.m-bwc .ax { stroke: var(--e-ink-3); stroke-width: 1.5; opacity: .8; }

.m-bwc .guide { stroke: var(--e-line); stroke-width: 1; }

.m-bwc .budget { stroke: var(--e-ink-3); stroke-width: 1; stroke-dasharray: 4 3; }

.m-bwc .riser { stroke: var(--e-violet); stroke-width: 2.75; stroke-linecap: round; }

.m-bwc .today { stroke: var(--e-blue); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .8; }

.m-bwc .cutoff { stroke: var(--e-amber); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .85; }
.m-bwc .cutoff.lead { fill: none; stroke-width: 1; stroke-dasharray: none; }

.m-bwc .pill-b { fill: var(--e-blue-bg); }

.m-bwc .pill-a { fill: var(--e-amber-bg); }

.m-bwc .pill-t { font-size: 10.5px; font-weight: 700; }

.m-bwc .pill-t.blue { fill: var(--e-blue); }

.m-bwc .pill-t.amber { fill: var(--e-amber); }

.m-bwc .series { fill: none; stroke: var(--e-ok); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 4; }

.m-bwc .series.actual { stroke-dasharray: none; }

.m-bwc .carry { fill: none; stroke: var(--e-amber); stroke-width: 2.25; stroke-linecap: round; stroke-dasharray: 4 3; }

.m-bwc .tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; fill: var(--e-ink-3); paint-order: stroke; stroke: var(--e-surface); stroke-width: 4; stroke-linejoin: round; }

.m-bwc .mk { stroke: var(--e-surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; }

.m-bwc .mk.violet { fill: var(--e-violet); }

.m-bwc .mk.ok { fill: var(--e-ok); }

.m-bwc .mk.amber { fill: var(--e-amber); }

.m-bwc .pen { fill: var(--e-ok); stroke: var(--e-surface); stroke-width: 2; }

.m-bwc .axis { fill: var(--e-ink-3); font-size: 12px; }

.m-bw .m-legend { border-top: 0; padding-top: 0; margin-top: 6px; font-size: 12px; color: var(--e-ink-2); gap: 6px 16px; }
/* Budget overview crop: a narrower right rail so the four categories fit on one row and the chart stays in shot */
.m-bud-rail.narrow { width: 220px; }
.m-bud-rail.narrow .m-bank { min-height: 132px; padding: 12px 16px 12px 18px; }
.m-bud-rail.narrow .m-bank .top { font-size: 12px; }
.m-bud-rail.narrow .m-bank .chip { height: 22px; padding: 0 8px; font-size: 10px; }
.m-bud-rail.narrow .m-bank .bal .pounds { font-size: 30px; }
.m-bud-rail.narrow .m-bank .bal .sym, .m-bud-rail.narrow .m-bank .bal .pence { font-size: 16px; }
.m-bud-rail.narrow .m-bank .foot { font-size: 10.5px; }
.m-bud-rail.narrow .m-bank .top b { white-space: nowrap; }
.m-bud-rail.narrow .m-bank .chip.ic { display: none; }
.m-bud-rail.narrow .m-tx { padding: 12px 14px; }
.m-bud-rail.narrow .m-tx .m-input.cats { display: none; }
.m-bud-rail.narrow .m-tx .m-seg span { padding-inline: 4px; font-size: 11px !important; white-space: nowrap; }
.m-bud-rail.narrow .m-tx .h2 { font-size: 15px; }
.m-bud-rail.narrow .m-tx .txr b { font-size: 11.5px; }
.m-bud-rail.narrow .m-tx .txr .cat .m-badge { font-size: 9px; padding: 1px 6px; }
.m-cells.tight .cell { padding: 12px 12px; }
.m-cells.tight .top { gap: 6px; }
.m-cells.tight .chip { width: 22px; height: 22px; border-radius: 7px; }
.m-cells.tight .chip .ms { font-size: 14px; }
.m-cells.tight .label .m-overline { font-size: 9px; letter-spacing: 0.06em; }
.m-cells.tight .label .ms { display: none; }
.m-cells.tight .value { font-size: 20px; margin-top: 9px; }
.m-cells.tight .caption { font-size: 10.5px; margin-top: 5px; }
.m-cells.tight .track { margin-top: 9px; }
/* Personal assistants card */
.m-pa { padding: 24px; }

.m-pa .h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; color: var(--e-ink); }

.m-pa .ex { font-size: 12.5px; color: var(--e-ink-2); margin-top: 2px; }

.m-pa .m-cells { margin-top: 16px; }

.m-pa .foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--e-line); padding-top: 14px; font-size: 12px; color: var(--e-ink-2); }
/* past → future → total flow */
.m-flow { margin-top: 18px; border: 1px solid var(--e-line); border-radius: 12px; overflow: hidden; background: var(--e-surface); }

.m-flow .part { --ny: 23px; position: relative; padding: 14px 14px 16px 34px; }

.m-flow .part::after { content: ''; position: absolute; left: 17px; width: 0; }

.m-flow .past { z-index: 2; }

.m-flow .past::after { top: calc(var(--ny) + 8px); bottom: calc(6px - var(--ny)); border-left: 2px solid var(--e-ok); }

.m-flow .future::after { top: calc(var(--ny) + 8px); bottom: 0; border-left: 2px dashed color-mix(in srgb, var(--e-ok) 55%, var(--e-line-2)); }

.m-flow .total { border-top: 1px solid var(--e-line-2); }

.m-flow .total::after { top: 0; height: calc(var(--ny) - 6px); border-left: 2px dashed color-mix(in srgb, var(--e-ok) 55%, var(--e-line-2)); }

.m-flow .node { position: absolute; left: 12px; top: calc(var(--ny) - 6px); width: 12px; height: 12px; border-radius: 999px; box-sizing: border-box; z-index: 3; }

.m-flow .past .node { background: var(--e-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-ok) 16%, transparent); }

.m-flow .future .node { background: var(--e-surface); border: 2px dashed var(--e-ok); }

.m-flow .total .node { background: var(--e-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-ink) 10%, transparent); }

.m-flow .seam { height: 0; border-top: 1px dashed var(--e-line-2); margin: 0 14px 0 34px; }

.m-flow .sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.m-flow .sh .m-overline { color: var(--e-ink); display: inline-flex; align-items: center; gap: 6px; }

.m-flow .sh .m-overline .ms { font-size: 13px; color: var(--e-ink-3); }

.m-flow .sh b { font-size: 19px; font-weight: 700; color: var(--e-ink); font-variant-numeric: tabular-nums; }

.m-flow .total .sh b { font-size: 21px; }

.m-flow .cap { margin-top: 2px; font-size: 11px; color: var(--e-ink-2); }

.m-flow .split { position: relative; margin-top: 30px; }

.m-flow .split .av { position: absolute; top: -24px; width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--e-surface); background: var(--e-surface); box-shadow: 0 1px 3px rgba(22, 24, 29, 0.15); overflow: hidden; transform: translateX(-50%) scale(0); transition: transform .42s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s); }

.m-flow .split .av img { width: 100%; height: 100%; display: block; }

.m-flow.grow .split .av { transform: translateX(-50%) scale(1); }

.m-flow .bar { display: flex; overflow: hidden; border-radius: 999px; background: var(--e-line); height: 8px; transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1); }

.m-flow .bar.tall { height: 18px; }

.m-flow.grow .bar { transform: scaleX(1); }

.m-flow .future .bar { transition-delay: .18s; }

.m-flow .total .bar { transition-delay: .36s; }

.m-flow .bar i { display: block; height: 100%; min-width: 6px; position: relative; }

.m-flow .bar i.two { display: flex; }

.m-flow .bar i.two span { display: block; height: 100%; position: relative; }

.m-flow .bar em { position: absolute; top: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--hue) 42%, var(--e-surface)); border-right: 1px solid color-mix(in srgb, var(--hue) 72%, var(--e-surface)); }

.m-flow .blegend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: 10.5px; color: var(--e-ink-2); }

.m-flow .blegend span { display: inline-flex; align-items: center; gap: 6px; }

.m-flow .blegend i { width: 16px; height: 8px; border-radius: 999px; display: inline-block; }

.m-flow .rows { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.m-flow .rows li { display: flex; flex-direction: column; }

.m-flow .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -8px; padding: 6px 8px; border-radius: 10px; transition: background-color .2s ease; }

.m-flow .row.hover { background: var(--e-surface-2); }

.m-flow .row .l { display: flex; align-items: center; gap: 10px; min-width: 0; }

.m-flow .row .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }

.m-flow .row .m-av { width: 28px; height: 28px; }

.m-flow .row .nm { font-size: 12.5px; font-weight: 500; line-height: 20px; color: var(--e-ink); display: block; }

.m-flow .row .meta { font-size: 11px; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }

.m-flow .row .r { display: flex; align-items: center; gap: 8px; text-align: right; flex: none; }

.m-flow .row .amt { display: flex; flex-direction: column; }

.m-flow .row .amt b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--e-ink); }

.m-flow .row .amt span { font-size: 10.5px; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }

.m-flow .row .chev { font-size: 18px; line-height: 1; color: var(--e-ink-3); transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1), color .18s; }

.m-flow .row.hover .chev { color: var(--e-ink); }

.m-flow .row .chev.on { transform: rotate(180deg); }

/* per-PA receipt card */
.m-rc { --pc: #7A5AF8; margin: 8px 0 10px 46px; border: 1px solid var(--e-line); border-radius: 14px; padding: 16px 18px 14px; background: var(--e-surface); box-shadow: var(--e-shadow-card); }

.m-rc .head { display: flex; align-items: center; gap: 12px; }

.m-rc .head .m-av { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--e-surface), 0 0 0 4px var(--pc); }

.m-rc .who { flex: 1; min-width: 0; }

.m-rc .name { font-size: 14px; font-weight: 600; color: var(--e-ink); }

.m-rc .sub { margin-top: 2px; font-size: 12px; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }

.m-rc .tot { text-align: right; flex: none; }

.m-rc .tot .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-ink-2); }

.m-rc .tot .val { margin-top: 3px; font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -0.025em; color: var(--e-ink); font-variant-numeric: tabular-nums; }

.m-rc .bar { display: flex; height: 10px; margin: 14px 0 6px; border-radius: 999px; overflow: hidden; background: var(--e-surface-2); }

.m-rc .bar i { display: block; height: 100%; transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1); }

.m-rc .bar i:nth-child(2) { transition-delay: .08s; }

.m-rc .bar i:nth-child(3) { transition-delay: .16s; }

.m-grow.open .m-rc .bar i { transform: scaleX(1); }

.m-rc .bar .g { background: var(--pc); }

.m-rc .bar .n { background: color-mix(in srgb, var(--pc) 62%, var(--e-surface)); }

.m-rc .bar .p { background: color-mix(in srgb, var(--pc) 34%, var(--e-surface)); }

.m-rc .lines { margin-top: 8px; }

.m-rc .line { display: grid; grid-template-columns: 10px 1fr auto; align-items: start; column-gap: 12px; padding: 9px 0; font-size: 13px; }

.m-rc .line + .line { border-top: 1px solid var(--e-line); }

.m-rc .key { width: 10px; height: 10px; margin-top: 4px; border-radius: 3px; display: block; }

.m-rc .labels { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.m-rc .label { color: var(--e-ink); }

.m-rc .expl { font-size: 11.5px; line-height: 1.4; color: var(--e-ink-2); }

.m-rc .amount { font-size: 13.5px; font-weight: 600; color: var(--e-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.m-rc .sum { margin-top: 4px; border-top: 1px solid var(--e-line-2); padding-top: 12px; }

.m-rc .sum .label { font-weight: 600; }

.m-rc .sum .amount { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }

.m-rc .note { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--e-ink-2); }