/* Mailbloom look shared by the admin panel, the customer app and the login page. */
  /* Light first, like the design: soft grey page, white cards, one blue accent. */
  /* Mailbloom: deep navy ink, teal accent from the logo (#2adddd to #00a2a9), mint-tinted page. */
  [data-theme="light"] {
    --p: 62% 0.11 195;   --pc: 99% 0 0;
    --s: 45% 0.03 220;   --sc: 99% 0 0;
    --a: 80% 0.12 192;   --ac: 20% 0.04 220;
    --n: 22.5% 0.035 220; --nc: 98% 0 0;
    --b1: 100% 0 0;      --b2: 97.6% 0.008 190; --b3: 94.8% 0.012 190;
    --bc: 23% 0.032 222;
    --in: 62% 0.1 230;   --su: 63% 0.13 165; --wa: 76% 0.15 70; --er: 60% 0.2 25;
    --inc: 99% 0 0; --suc: 99% 0 0; --wac: 20% 0.03 70; --erc: 99% 0 0;
    --line: rgb(11 32 40 / 0.08);
    --shadow: 0 1px 2px rgb(11 32 40 / .04), 0 1px 3px rgb(11 32 40 / .03);
    --shadow-lg: 0 18px 40px -12px rgb(11 32 40 / .22), 0 2px 6px rgb(11 32 40 / .05);
    --ink: 22.5% 0.035 220;
    --glow: 93% 0.05 185;
  }
  [data-theme="dark"] {
    --p: 76% 0.12 190;   --pc: 18% 0.03 220;
    --s: 72% 0.03 210;   --sc: 15% 0.02 220;
    --a: 80% 0.12 192;   --ac: 18% 0.03 220;
    --n: 32% 0.03 220;   --nc: 94% 0.01 200;
    --b1: 21.5% 0.022 222; --b2: 16.5% 0.02 224; --b3: 13.5% 0.02 224;
    --bc: 93% 0.012 200;
    --in: 72% 0.1 230;   --su: 74% 0.13 165; --wa: 80% 0.13 75; --er: 70% 0.17 25;
    --inc: 15% 0.02 230; --suc: 15% 0.03 165; --wac: 18% 0.03 75; --erc: 15% 0.03 25;
    --line: rgb(255 255 255 / 0.08);
    --shadow: 0 1px 2px rgb(0 0 0 / .35);
    --shadow-lg: 0 18px 44px -12px rgb(0 0 0 / .65);
    --ink: 76% 0.12 190;
    --glow: 30% 0.06 195;
  }
  :root { --rounded-box: .75rem; --rounded-btn: .4rem; --rounded-badge: .3rem; --border-btn: 1px; --animation-btn: 0; --animation-input: .15s; }

  html, body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
  .mono { font-feature-settings: "tnum"; }
  textarea.mono, code, kbd { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  [hidden] { display: none !important; }

  .hair { border-color: var(--line); }
  .panel { background: oklch(var(--b1)); border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow); }
  .panel-flat { background: oklch(var(--b1)); border: 1px solid var(--line); }
  .lift { box-shadow: var(--shadow-lg); }
  .card-title { font-family: 'Outfit', 'Inter', sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: -.005em; }
  h1, .stat-num, .display { font-family: 'Outfit', 'Inter', sans-serif; }
  .stat-num { font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
  body { background: oklch(var(--b2)); }

  /* brand buttons: navy ink like the website CTA, teal in dark mode */
  .btn-primary { background: oklch(var(--ink)); border-color: oklch(var(--ink)); color: #fff; }
  .btn-primary:hover { background: oklch(30% 0.04 215); border-color: oklch(30% 0.04 215); }
  [data-theme="dark"] .btn-primary { color: oklch(18% 0.03 220); }
  [data-theme="dark"] .btn-primary:hover { background: oklch(82% 0.11 190); border-color: oklch(82% 0.11 190); }
  .text-brand { color: oklch(52% 0.1 195); }
  [data-theme="dark"] .text-brand { color: oklch(80% 0.12 190); }

  /* logo swaps for dark mode; the mark alone when the sidebar is collapsed */
  .logo-dark, .sb-mark { display: none; }
  [data-theme="dark"] .logo-light { display: none; }
  [data-theme="dark"] .logo-dark { display: block; }
  body.sb-collapsed #sidebar .sb-mark { display: block; }

  /* ---- controls */
  .btn { font-weight: 600; letter-spacing: -.005em; }
  .btn-sm { height: 2.25rem; min-height: 2.25rem; padding-inline: .9rem; font-size: .8125rem; }
  .btn-xs { font-size: .75rem; }
  .btn svg { width: 1rem; height: 1rem; flex: none; }
  .btn-line { background: oklch(var(--b1)); border: 1px solid var(--line); color: oklch(var(--bc)); box-shadow: var(--shadow); }
  .btn-line:hover { background: oklch(var(--b2)); border-color: var(--line); }
  .input-bordered, .select-bordered, .textarea-bordered { border-color: oklch(var(--bc) / .12); background-color: oklch(var(--b1)); }
  .input-sm, .select-sm { height: 2.25rem; min-height: 2.25rem; font-size: .8125rem; }
  .input:focus, .select:focus, .textarea:focus, .input:focus-within { outline: 2px solid oklch(var(--p) / .35); outline-offset: 0; border-color: oklch(var(--p)); }
  .checkbox { border-radius: .3rem; border-color: oklch(var(--bc) / .25); }

  /* ---- layout */
  .view { display: none; }
  .view.active { display: block; }
  .view.fill.active { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  .view.fill > .panel { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; }
  .tablewrap { flex: 1 1 0; min-height: 0; overflow: auto; }
  body.has-bulk .tablewrap { padding-bottom: 4.5rem; }
  @media (max-width: 1023px) { .view.fill > .panel { min-height: 24rem; } }

  /* ---- sidebar */
  #sidebar { width: 16.25rem; transition: width .18s ease, transform .2s ease; }
  .navitem { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: .65rem; width: 100%;
             font-size: .8125rem; font-weight: 500; color: oklch(var(--bc) / .68); cursor: pointer; user-select: none; white-space: nowrap; }
  .navitem:hover { background: oklch(var(--bc) / .045); color: oklch(var(--bc)); }
  .navitem.active { background: oklch(var(--p) / .12); color: oklch(45% 0.09 198); font-weight: 600; }
  [data-theme="dark"] .navitem.active { color: oklch(var(--p)); }
  .navitem svg { width: 1.1rem; height: 1.1rem; flex: none; }
  .navitem .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .navcount { flex: none; font-variant-numeric: tabular-nums; line-height: 1.35; font-size: .6875rem; font-weight: 600; padding: .05rem .4rem; border-radius: .3rem; background: oklch(var(--su) / .14); color: oklch(var(--su)); }
  .navitem .chev { width: .85rem; height: .85rem; opacity: .5; transition: transform .15s; }
  .navgroup-open .chev { transform: rotate(180deg); }
  .navsubs { margin: .15rem 0 .25rem 1.25rem; padding-left: .85rem; border-left: 1px solid var(--line); }
  .navsubs .navitem { padding: .4rem .6rem; font-size: .8125rem; }
  body.sb-collapsed #sidebar .sb-icon { display: inline-flex !important; }
  .navsep { height: 1px; background: var(--line); margin: .5rem .4rem; }
  #sidebar nav { scrollbar-width: none; }
  #sidebar nav::-webkit-scrollbar { display: none; }
  .promo { border-radius: .9rem; padding: 1rem; color: #e8f4f5; position: relative; overflow: hidden;
           background: oklch(22% 0.035 222); }
  .promo .btn { background: #2adddd; border: 0; color: #06232a; }
  .promo .btn:hover { filter: brightness(1.06); }
  /* The card is the only place someone sees what their plan holds, so it stays whole at every
     height people work at -- a laptop included. The menu above it scrolls when a window is short,
     which is what the sidebar was built to do; the card itself is the last thing to go. */
  @media (max-height: 520px) { .promo { display: none; } }
  /* The block under the menu (checklist, billing, plan card) never scrolls, so on a laptop with a short
     window it used to take the height the menu needed and the menu was cut off behind it. It gets
     smaller as the window does, and a rule marks where the menu scrolls under it. */
  #sidebar .side-foot { border-top: 1px solid var(--line); padding-top: .6rem; }
  @media (max-height: 820px) {
    #sidebar .side-head { height: 3.75rem; }
    #sidebar .navitem { padding-top: .42rem; padding-bottom: .42rem; }
    #sidebar .side-foot { padding-top: .5rem; padding-bottom: .6rem; }
    #sidebar .side-foot > * + * { margin-top: .5rem !important; }
    #sidebar .guide-launch { padding: .4rem .55rem; }
    .promo { padding: .75rem .85rem; }
    .promo .plan-count { margin-top: .35rem; }
    .promo .plan-note { margin-top: .35rem; }
    .promo .plan-more { display: none; }
  }
  @media (max-height: 600px) {
    .promo .plan-eyebrow, .promo .plan-note { display: none; }
    .promo .plan-count { margin-top: 0; }
  }
  #plan-card { cursor: pointer; }
  body.sb-collapsed #sidebar { width: 4.6rem; }
  body.sb-collapsed #sidebar .label, body.sb-collapsed #sidebar .navcount, body.sb-collapsed #sidebar .chev,
  body.sb-collapsed #sidebar .promo, body.sb-collapsed #sidebar .brand { display: none; }
  body.sb-collapsed #sidebar .navsubs { margin-left: 0; padding-left: 0; border: 0; }
  body.sb-collapsed #sidebar .navitem { justify-content: center; }

  /* ---- top bar */
  .searchpill { display: flex; align-items: center; gap: .55rem; height: 2.3rem; width: min(22rem, 100%); padding: 0 .55rem 0 .8rem;
                border-radius: .7rem; background: oklch(var(--b2)); border: 1px solid var(--line); color: oklch(var(--bc) / .5); font-size: .8125rem; }
  .searchpill:hover { border-color: oklch(var(--bc) / .18); }
  .roundbtn { width: 2.3rem; height: 2.3rem; border-radius: .5rem; display: grid; place-items: center; border: 1px solid var(--line);
              background: oklch(var(--b1)); color: oklch(var(--bc) / .7); }
  .roundbtn:hover { background: oklch(var(--b2)); color: oklch(var(--bc)); }
  .roundbtn svg { width: 1.05rem; height: 1.05rem; }

  /* ---- tables */
  .grid-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
  .grid-table thead th { position: sticky; top: 0; z-index: 5; background: oklch(var(--b1));
      text-align: left; font-weight: 600; font-size: .72rem; color: oklch(var(--bc) / .45);
      padding: .7rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .grid-table tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .grid-table tbody tr:hover td { background: oklch(var(--bc) / .025); }
  .grid-table tbody tr:last-child td { border-bottom: 0; }
  .grid-table.compact thead th, .grid-table.compact tbody td { padding-left: .75rem; padding-right: .75rem; }
  .grid-table.compact tr > :first-child { padding-left: 1.25rem; }
  .grid-table.compact tr > :last-child { padding-right: 1.25rem; }
  .grid-table.dense thead th { padding-top: .5rem; padding-bottom: .5rem; }
  .grid-table.dense tbody td { padding-top: .35rem; padding-bottom: .35rem; }
  .grid-table.dense .ibtn { width: 1.7rem; height: 1.7rem; }
  .grid-table td.num, .grid-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .selectable tbody tr { cursor: pointer; }
  .grid-table tbody tr.sel td { background: oklch(var(--p) / .07); }
  .grid-table tbody tr.sel:hover td { background: oklch(var(--p) / .1); }

  .seg { display: inline-flex; background: oklch(var(--b3)); border-radius: .6rem; padding: 3px; gap: 2px; }
  .seg button { font-size: .75rem; font-weight: 500; padding: .3rem .7rem; border-radius: .45rem; color: oklch(var(--bc) / .6); }
  .seg button.on { background: oklch(var(--b1)); color: oklch(var(--bc)); font-weight: 600; box-shadow: var(--shadow); }

  .ibtn-slot { display: inline-block; width: 1.9rem; height: 1.9rem; flex: none; }
  .dd-trigger:focus:not(:focus-visible) { outline: none; box-shadow: none; }
  .ibtn { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .5rem; flex: none;
          color: oklch(var(--bc) / .5); transition: background-color .12s, color .12s; }
  .ibtn:hover { background: oklch(var(--bc) / .07); color: oklch(var(--bc)); }
  .ibtn.danger:hover { background: oklch(var(--er) / .1); color: oklch(var(--er)); }
  .ibtn svg { width: 1rem; height: 1rem; }
  .row-actions { display: flex; justify-content: flex-end; gap: .125rem; opacity: 0; transition: opacity .12s; }
  tr:hover .row-actions, tr:focus-within .row-actions, tr.sel .row-actions { opacity: 1; }
  @media (hover: none) { .row-actions { opacity: 1; } }

  /* ---- small pieces */
  .chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .22rem .55rem; border-radius: .5rem;
          font-size: .75rem; line-height: 1.25; border: 1px solid var(--line); background: oklch(var(--b2)); }
  .chip .note { opacity: .6; }
  .chip.info { border-color: oklch(var(--p) / .3); background: oklch(var(--p) / .07); }
  .chip.warn { border-color: oklch(var(--wa) / .5); background: oklch(var(--wa) / .1); }
  .chip.bad  { border-color: oklch(var(--er) / .45); background: oklch(var(--er) / .08); color: oklch(var(--er)); }
  .chip button { opacity: .55; margin-right: -.15rem; padding: 0 .1rem; font-size: .85rem; line-height: 1; }
  .chip button:hover { opacity: 1; }
  .step { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-grid; place-items: center; flex: none;
          font-size: .75rem; font-weight: 700; background: oklch(var(--p) / .12); color: oklch(var(--p)); }
  /* soft status pills, like the design */
  /* daisyUI fixes a badge's height, so a label that wraps or runs larger spills out of its pill like a text
     highlight; let the pill grow with its text and keep short labels on one line */
  .badge { border-radius: .45rem; font-weight: 600; border-width: 0; height: auto; min-height: 1.25rem; line-height: 1.2;
           padding-top: .125rem; padding-bottom: .125rem; white-space: nowrap; }
  .badge-sm { min-height: 1.125rem; padding-top: .0625rem; padding-bottom: .0625rem; }
  .badge-xs { min-height: 1rem; padding: .0625rem .4rem; font-size: 10.5px; }
  .badge-success { background: oklch(var(--su) / .14); color: oklch(var(--su)); }
  .badge-error { background: oklch(var(--er) / .11); color: oklch(var(--er)); }
  .badge-warning { background: oklch(var(--wa) / .2); color: oklch(55% 0.13 70); }
  .badge-primary { background: oklch(var(--p) / .12); color: oklch(var(--p)); }
  .badge-info { background: oklch(var(--in) / .12); color: oklch(var(--in)); }
  .badge-ghost { background: oklch(var(--bc) / .06); color: oklch(var(--bc) / .75); }
  .badge-outline { background: transparent; border-width: 1px; }
  .delta { display: inline-flex; align-items: center; gap: .15rem; font-size: .6875rem; font-weight: 600; padding: .1rem .4rem; border-radius: .4rem; }
  .delta.up { background: oklch(var(--su) / .13); color: oklch(var(--su)); }
  .delta.down { background: oklch(var(--er) / .11); color: oklch(var(--er)); }
  .delta.flat { background: oklch(var(--bc) / .07); color: oklch(var(--bc) / .6); }
  .tone-icon { width: 2rem; height: 2rem; border-radius: .6rem; display: grid; place-items: center; }
  .tone-icon svg { width: 1.05rem; height: 1.05rem; }
  .meter { height: .35rem; border-radius: 9px; background: oklch(var(--bc) / .08); overflow: hidden; width: 4.5rem; }
  .meter > span { display: block; height: 100%; background: oklch(var(--p)); border-radius: 9px; }
  .skel { height: .65rem; border-radius: .3rem; background: linear-gradient(90deg, oklch(var(--bc) / .05), oklch(var(--bc) / .1), oklch(var(--bc) / .05));
          background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }
  @keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
  kbd.k { font-size: .6875rem; padding: .05rem .35rem; border: 1px solid var(--line); border-radius: .35rem; background: oklch(var(--b1)); color: oklch(var(--bc) / .55); }

  /* ---- charts */
  .chart-tip { position: absolute; pointer-events: none; background: oklch(var(--b1)); border: 1px solid var(--line); border-radius: .6rem;
               box-shadow: var(--shadow-lg); padding: .45rem .6rem; font-size: .6875rem; white-space: nowrap; transform: translate(-50%, -110%); }
  .bars { display: flex; align-items: flex-end; gap: .55rem; }
  .bars .bar { border-radius: .5rem; background: oklch(var(--bc) / .07); min-height: .4rem; transition: height .3s ease; }
  .bars .bar.top { background: #00a2a9; }

  /* dark readiness card (customer Home, approval gate), echoing the website */
  .readiness { position: relative; overflow: hidden; border-radius: .75rem; color: #e3f1f2;
               background: oklch(22% 0.035 222);
               border: 1px solid rgb(255 255 255 / .06); box-shadow: 0 24px 48px -24px rgb(0 60 70 / .55); }
  .readiness .dots span { width: .5rem; height: .5rem; border-radius: 999px; background: rgb(255 255 255 / .18); display: inline-block; }
  .readiness .item { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: .75rem; background: rgb(255 255 255 / .035); border: 1px solid rgb(255 255 255 / .05); }
  .readiness .tick { width: 1.4rem; height: 1.4rem; border-radius: 999px; display: grid; place-items: center; flex: none; }
  .readiness .tick.ok { background: rgb(42 221 221 / .16); color: #2adddd; }
  .readiness .tick.no { border: 1.5px dashed rgb(255 255 255 / .28); color: transparent; }
  .readiness .pill { font-size: .6875rem; font-weight: 600; padding: .15rem .55rem; border-radius: .3rem; display: inline-flex; align-items: center; gap: .35rem; }
  .readiness .pill.ok { background: rgb(42 221 221 / .14); color: #5ee9e9; }
  .readiness .pill.part { background: rgb(251 191 36 / .14); color: #fcd34d; }
  .readiness .track { height: .4rem; border-radius: 2px; background: rgb(255 255 255 / .08); overflow: hidden; }
  .readiness .track span { display: block; height: 100%; border-radius: 2px; background: #00a2a9; }

  .spark { display: block; width: 100%; height: 2.4rem; }
  .attn { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .attn:last-child { border-bottom: 0; }

  #palette, #palette-box { display: none; }
  #palette.open, #palette.open #palette-box { display: block; }
  .pal-row.sel { background: oklch(var(--p) / .1); }

  /* max-content: a fixed box placed at left:50% is otherwise only given the half of the screen to its
     right, and on a phone that folded the actions into a column */
  #bulkbar { left: 50%; bottom: 1.25rem; transform: translate(-50%, calc(100% + 2.5rem)); transition: transform .2s cubic-bezier(.3,.8,.4,1);
             width: max-content; max-width: calc(100vw - 2rem); border-radius: .75rem; box-shadow: var(--shadow-lg); }
  #bulkbar.show { transform: translate(-50%, 0); }
  @media (min-width: 1024px) { #bulkbar { left: calc(50% + 7.5rem); max-width: calc(100vw - 17rem); } body.sb-collapsed #bulkbar { left: calc(50% + 2.3rem); } }
  /* phones: edge to edge, the count and Clear first, the actions wrapping under them */
  @media (max-width: 639px) {
    #bulkbar { left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none;
               row-gap: .25rem; transform: translateY(calc(100% + 2.5rem)); }
    #bulkbar.show { transform: translateY(0); }
    #bulkbar > .w-px { display: none; }
    #bulkbar .btn-xs { height: 2rem; min-height: 2rem; padding: 0 .6rem; }
  }

  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: oklch(var(--bc) / .15); border-radius: 6px; }
  :focus-visible { outline: 2px solid oklch(var(--p) / .6); outline-offset: 1px; }
  @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------- senders builder */
.sb-table { position: relative; border: 1px solid oklch(var(--bc) / .12); border-radius: .8rem; overflow: hidden; }
.sb-head, .sb-row { display: grid; grid-template-columns: 2rem minmax(0, .75fr) minmax(0, .75fr) minmax(0, 2fr) 1.75rem; gap: .5rem; align-items: center; padding: .45rem .6rem; }
.sb-head { background: oklch(var(--b2) / .7); font-size: .72rem; font-weight: 600; color: oklch(var(--bc) / .66); }
.sb-row { border-top: 1px solid oklch(var(--bc) / .07); transition: background .15s; }
.sb-row:hover { background: oklch(var(--bc) / .025); }
.sb-row.bad { background: oklch(var(--er) / .05); }
.sb-avatar { width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center; font-size: .65rem; font-weight: 700;
  color: hsl(var(--h) 45% 32%); background: hsl(var(--h) 60% 90%); }
[data-theme=dark] .sb-avatar { color: hsl(var(--h) 70% 82%); background: hsl(var(--h) 35% 26%); }
.sb-input { width: 100%; min-width: 0; height: 2rem; padding: 0 .55rem; border-radius: .5rem; border: 1px solid transparent; background: transparent;
  font-size: .82rem; outline: none; transition: border-color .15s, background .15s; }
.sb-input:hover { border-color: oklch(var(--bc) / .12); }
.sb-input:focus { border-color: oklch(var(--p) / .6); background: oklch(var(--b1)); box-shadow: 0 0 0 3px oklch(var(--p) / .12); }
.sb-input::placeholder { color: oklch(var(--bc) / .32); }
.sb-input.mono { font-size: .76rem; }
.sb-input.custom { color: oklch(var(--p)); }
.sb-addr { display: flex; align-items: center; min-width: 0; }
.sb-addr .sb-input { flex: 1 1 5rem; text-align: right; padding-right: .15rem; }
.sb-domain { flex: 0 0 auto; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: oklch(var(--bc) / .64); }
.sb-x { width: 1.6rem; height: 1.6rem; border-radius: .35rem; font-size: 1.05rem; line-height: 1; color: oklch(var(--bc) / .35); }
.sb-x:hover { background: oklch(var(--er) / .1); color: oklch(var(--er)); }
.sb-issue { grid-column: 2 / -1; margin-top: -.2rem; font-size: .68rem; color: oklch(var(--er)); padding-left: .55rem; }
.sb-drop { display: none; position: absolute; inset: 0; place-items: center; background: oklch(var(--p) / .08); border: 2px dashed oklch(var(--p) / .7);
  border-radius: .8rem; font-size: .8rem; font-weight: 600; color: oklch(var(--p)); pointer-events: none; }
.sb.drag .sb-drop { display: grid; }
@media (max-width: 640px) {
  .sb-head { display: none; }
  .sb-row { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 1.75rem; }
  .sb-addr { grid-column: 2 / 4; grid-row: 2; }
  .sb-x { grid-column: 4; grid-row: 1; }
}

/* choice cards (radio as a card) */
.choice { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid oklch(var(--bc) / .12); border-radius: .75rem; cursor: pointer; transition: border-color .15s, background .15s; }
.choice:hover { border-color: oklch(var(--p) / .4); }
.choice:has(input:checked) { border-color: oklch(var(--p) / .7); background: oklch(var(--p) / .06); box-shadow: 0 0 0 3px oklch(var(--p) / .08); }
.choice input { margin-top: .2rem; accent-color: oklch(var(--p)); }
.choice b { display: block; font-size: .8rem; font-weight: 600; }
.choice b + span { display: block; font-size: .74rem; color: oklch(var(--bc) / .68); margin-top: .1rem; }

/* info tooltips on stat cards */
.info-tip { position: relative; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; color: oklch(var(--bc) / .35); cursor: help; outline: none; flex: none; }
.info-tip svg { width: .95rem; height: .95rem; }
.info-tip:hover, .info-tip:focus-visible { color: oklch(var(--p)); background: oklch(var(--p) / .1); }
.info-pop { position: absolute; z-index: 40; top: calc(100% + .45rem); right: -.4rem; width: 16rem; padding: .65rem .75rem; border-radius: .7rem;
  background: #0b2028; color: #e6f3f3; font-size: .72rem; line-height: 1.5; font-weight: 400; text-align: left;
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / .35); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.info-pop::before { content: ""; position: absolute; top: -5px; right: .85rem; width: 10px; height: 10px; background: #0b2028; transform: rotate(45deg); border-radius: 2px; }
.info-tip:hover .info-pop, .info-tip:focus .info-pop { opacity: 1; transform: translateY(0); }
.stat-card { transition: box-shadow .2s, transform .2s; }
.stat-card:hover { box-shadow: 0 10px 30px -18px oklch(var(--bc) / .35); }

/* senders across several domains */
.sb-note { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border-radius: .7rem; background: oklch(var(--b2) / .7); font-size: .75rem; color: oklch(var(--bc) / .72); }
.sb-note svg { width: 1rem; height: 1rem; flex: none; color: oklch(var(--p)); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.su-ideas { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.su-ideas-or { font-size: 11.5px; color: oklch(var(--bc) / .45); flex: none; }
/* narrow: the button drops to its own line rather than squeezing the box down to two words */
.su-ideas .input { min-width: 12rem; }
.su-ideas[hidden] { display: none; }

/* Where you tell it what you want. It should look like the part of the page that does something
   you couldn't do yourself: a lit edge that follows the focus, and a button that shifts while it
   thinks. Anyone who has asked not to be moved about gets the same thing, standing still. */
.sb-ask { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .15rem .15rem .7rem; border-radius: .7rem;
  border: 1px solid var(--line); background: oklch(var(--b1)); min-width: 0; position: relative;
  transition: border-color .18s, box-shadow .18s; }
.sb-ask:focus-within { border-color: oklch(var(--p) / .5); }
.sb-ask-input { width: 19rem; max-width: 42vw; background: transparent; font-size: .78rem; outline: none; }
.sb-ask-input::placeholder { color: oklch(var(--bc) / .38); }
.sb-ask-left { font-size: 10.5px; color: oklch(var(--bc) / .4); font-variant-numeric: tabular-nums; padding-right: .1rem; }
.sb-ask-left.low { color: oklch(var(--wa)); }

/* The star on the buttons that ask a model. It is the one mark those buttons don't share with the
   rest, so it carries the brand colour and nothing else does the talking. */
.spark-ico { flex: none; width: 1rem; height: 1rem; color: oklch(var(--p)); }
/* on a phone the ask box takes the width it has, instead of running past the card it sits in */
@media (max-width: 640px) {
  .sb-ask { display: flex; width: 100%; }
  .sb-ask-input { width: auto; max-width: none; min-width: 0; flex: 1 1 auto; }
  .sb-ask .btn { flex: none; }
}
.btn:hover .spark-ico, .btn:focus-visible .spark-ico { color: inherit; }
.btn-primary .spark-ico, .btn:disabled .spark-ico { color: inherit; }


.sb-tabs { display: flex; gap: .4rem; overflow-x: auto; padding: .7rem 0 .1rem; scrollbar-width: thin; }
.sb-tab { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .35rem .45rem .35rem .7rem; border-radius: .3rem;
  border: 1px solid oklch(var(--bc) / .14); font-size: .74rem; color: oklch(var(--bc) / .7); background: oklch(var(--b1)); transition: all .15s; }
.sb-tab:hover { border-color: oklch(var(--p) / .45); color: oklch(var(--bc)); }
.sb-tab.on { border-color: oklch(var(--p)); background: oklch(var(--p) / .1); color: oklch(var(--bc)); font-weight: 600; box-shadow: 0 0 0 3px oklch(var(--p) / .1); }
.sb-tab-count { min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: .3rem; display: grid; place-items: center; font-size: .65rem; font-weight: 700;
  background: oklch(var(--p) / .15); color: oklch(var(--p)); }
.sb-tab-count.zero { background: oklch(var(--bc) / .08); color: oklch(var(--bc) / .45); }
.sb-tab-count.bad { background: oklch(var(--er)); color: #fff; }
.sb-preview { border: 1px solid oklch(var(--bc) / .1); border-radius: .8rem; }
.sb-preview summary { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; cursor: pointer; font-size: .78rem; font-weight: 600; list-style: none; }
.sb-preview summary::-webkit-details-marker { display: none; }
.sb-preview summary::before { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; opacity: .5; margin-right: .15rem; }
.sb-preview[open] summary::before { transform: rotate(45deg); }
.sb-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; padding: 0 .8rem .8rem; max-height: 22rem; overflow-y: auto; }
.sb-preview-col { border-radius: .6rem; background: oklch(var(--b2) / .6); padding: .35rem; min-width: 0; }
.sb-preview-head { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem .45rem .35rem; font-size: .7rem; font-weight: 600; color: oklch(var(--bc) / .7); }
.sb-preview-row { display: flex; min-width: 0; padding: .25rem .45rem; border-radius: .4rem; font-size: .72rem; background: oklch(var(--b1)); margin-top: .2rem; }
.sb-preview-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* setup run: two-tone progress and the outcome groups */
.sr-head { padding: 1.1rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
.sr-head-icon { width: 2.4rem; height: 2.4rem; flex: none; border-radius: .8rem; display: grid; place-items: center; }
.sr-head-icon svg { width: 1.15rem; height: 1.15rem; }
.sr-head-icon.running { background: oklch(var(--p) / .1); color: oklch(var(--p)); }
.sr-head-icon.ok { background: oklch(var(--su) / .15); color: oklch(var(--su)); }
.sr-head-icon.warn { background: oklch(var(--wa) / .2); color: oklch(55% .13 70); }
.sr-head-icon.bad { background: oklch(var(--er) / .12); color: oklch(var(--er)); }
.sr-bar { display: flex; height: .55rem; border-radius: 99px; overflow: hidden; background: oklch(var(--bc) / .08); }
.sr-bar span { height: 100%; width: 0; transition: width .45s ease; }
#sr-ok { background: #00a2a9; }
#sr-bad { background: oklch(var(--er) / .7); }
.sr-note { display: flex; gap: .55rem; align-items: flex-start; font-size: 12px; line-height: 1.5; padding: .6rem .75rem; border-radius: .7rem;
  background: oklch(var(--p) / .06); color: oklch(var(--bc) / .72); }
.sr-note svg { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; color: oklch(var(--p)); }
.sr-note b { color: oklch(var(--bc) / .9); font-weight: 600; }
.sr-list { max-height: 30rem; overflow-y: auto; }
.sr-row { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem 1.25rem; border-top: 1px solid oklch(var(--bc) / .06); transition: background .2s; }
.sr-row:first-child { border-top: 0; }
.sr-row[data-state="active"] { background: oklch(var(--p) / .05); }
.sr-row[data-state="waiting"] .mono, .sr-row[data-state="skipped"] .mono { color: oklch(var(--bc) / .5); }
.sr-mark { width: 1.45rem; height: 1.45rem; flex: none; border-radius: 99px; display: grid; place-items: center; margin-top: .05rem; }
.sr-mark svg { width: .8rem; height: .8rem; }
.sr-row[data-state="active"] .sr-mark { color: oklch(var(--p)); }
.sr-row[data-state="ok"] .sr-mark { background: oklch(var(--su) / .15); color: oklch(var(--su)); }
.sr-row[data-state="warn"] .sr-mark { background: oklch(var(--wa) / .22); color: oklch(55% .13 70); }
.sr-row[data-state="bad"] .sr-mark { background: oklch(var(--er) / .12); color: oklch(var(--er)); }
.sr-row[data-state="skipped"] .sr-mark { background: oklch(var(--bc) / .07); color: oklch(var(--bc) / .45); }
.sr-row[data-state="held"] .sr-mark { background: oklch(var(--p) / .1); color: oklch(var(--p)); }
.sr-row[data-state="held"] .sr-mark svg { width: .8rem; height: .8rem; }
.sr-dot { width: .55rem; height: .55rem; border-radius: 99px; border: 2px solid oklch(var(--bc) / .22); }
.sr-spin { width: 1rem; height: 1rem; border-radius: 99px; border: 2px solid currentColor; border-right-color: transparent; animation: sr-spin .8s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }
.sr-src { font-size: 10.5px; padding: .05rem .4rem; border-radius: 99px; background: oklch(var(--bc) / .06); color: oklch(var(--bc) / .55); white-space: nowrap; }
.sr-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-left: auto; }
.sr-step { display: inline-flex; align-items: center; gap: .25rem; font-size: 11px; font-weight: 500; padding: .1rem .45rem; border-radius: 99px; white-space: nowrap;
  background: oklch(var(--bc) / .06); color: oklch(var(--bc) / .6); }
.sr-step svg { width: .7rem; height: .7rem; }
.sr-step.ok { background: oklch(var(--su) / .12); color: oklch(45% .1 160); }
.sr-step.failed { background: oklch(var(--er) / .1); color: oklch(var(--er)); }
.sr-step.partial { background: oklch(var(--wa) / .18); color: oklch(50% .12 70); }
.sr-now { font-size: 11.5px; color: oklch(var(--p)); display: inline-flex; align-items: center; gap: .35rem; }
.sr-now::after { content: ''; width: 1.1rem; text-align: left; animation: sr-dots 1.2s steps(4) infinite; }
@keyframes sr-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.sr-detail { font-size: 11.5px; line-height: 1.5; color: oklch(var(--bc) / .6); }
.sr-detail:not(:empty) { margin-top: .3rem; }
/* How far off the bottom the setup pill sits. It shares the bottom-right corner with the live chat
   launcher and, on a phone mid-setup, with the sticky bar -- so whoever is there raises it rather
   than the pill guessing, and the pill covers neither. */
.sr-pill { position: fixed; right: 1rem; --sr-lift: 1rem; bottom: calc(var(--sr-lift) + env(safe-area-inset-bottom, 0px)); z-index: 60; width: min(19rem, calc(100vw - 2rem));
  border-radius: .75rem; background: oklch(var(--b1)); border: 1px solid oklch(var(--bc) / .12); box-shadow: 0 12px 32px -12px rgb(0 0 0 / .3); overflow: hidden; display: flex; align-items: center; }
.sr-pill-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; }
.sr-pill-icon { width: 2rem; height: 2rem; flex: none; border-radius: .65rem; display: grid; place-items: center; background: oklch(var(--p) / .1); color: oklch(var(--p)); }
.sr-pill-icon svg { width: 1rem; height: 1rem; }
.sr-pill[data-state="ok"] .sr-pill-icon { background: oklch(var(--su) / .15); color: oklch(var(--su)); }
.sr-pill[data-state="warn"] .sr-pill-icon { background: oklch(var(--wa) / .2); color: oklch(55% .13 70); }
.sr-pill-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: oklch(var(--bc) / .08); }
.sr-pill-bar span { display: block; height: 100%; background: #00a2a9; transition: width .45s ease; }
.sr-pill-x { width: 2.2rem; align-self: stretch; font-size: 1.1rem; color: oklch(var(--bc) / .45); }
.sr-pill-x:hover { color: oklch(var(--bc) / .8); }
@media (max-width: 640px) { .sr-steps { margin-left: 0; width: 100%; } .sr-row { padding-inline: 1rem; } .sr-head { padding-inline: 1rem; } }
/* the Intercom launcher is a 48px circle sitting 20px off the bottom: 68px, plus a gap to sit above */
body.has-chat .sr-pill { --sr-lift: 5.5rem; }
body.has-mobilebar .sr-pill { --sr-lift: 5.5rem; }
.sr-group { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start; padding: .8rem .9rem; border-radius: .8rem; border: 1px solid oklch(var(--bc) / .1); }
.sr-group-icon { width: 1.9rem; height: 1.9rem; flex: none; border-radius: .6rem; display: grid; place-items: center; }
.sr-group-icon svg { width: 1rem; height: 1rem; }
.sr-group.ok { background: oklch(var(--su) / .06); border-color: oklch(var(--su) / .25); } .sr-group.ok .sr-group-icon { background: oklch(var(--su) / .15); color: oklch(var(--su)); }
.sr-group.warn { background: oklch(var(--wa) / .08); border-color: oklch(var(--wa) / .35); } .sr-group.warn .sr-group-icon { background: oklch(var(--wa) / .2); color: oklch(55% .13 70); }
.sr-group.bad { background: oklch(var(--er) / .05); border-color: oklch(var(--er) / .25); } .sr-group.bad .sr-group-icon { background: oklch(var(--er) / .12); color: oklch(var(--er)); }
.sr-group.muted .sr-group-icon { background: oklch(var(--bc) / .07); color: oklch(var(--bc) / .5); }

.home-domain { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: .7rem; border: 1px solid oklch(var(--bc) / .1);
  transition: border-color .15s, background .15s; min-width: 0; }
.home-domain:hover { border-color: oklch(var(--p) / .45); background: oklch(var(--p) / .04); }

/* domain sources in step 1 */
.src-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.src-tabs button { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: .8rem; border: 1px solid oklch(var(--bc) / .12);
  text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; min-width: 0; }
.src-tabs button:hover { border-color: oklch(var(--p) / .45); }
.src-tabs button[aria-selected="true"] { border-color: oklch(var(--p)); background: oklch(var(--p) / .07); box-shadow: 0 0 0 3px oklch(var(--p) / .1); }
.src-tabs svg { width: 1.9rem; height: 1.9rem; padding: .42rem; flex: none; border-radius: .55rem; background: oklch(var(--bc) / .06); color: oklch(var(--bc) / .6); }
.src-tabs button[aria-selected="true"] svg { background: oklch(var(--p) / .15); color: oklch(var(--p)); }
.src-tabs b { display: block; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-tabs small { display: block; font-size: .72rem; color: oklch(var(--bc) / .66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the label column must be allowed to shrink, or a narrow tab's text runs over its neighbour */
.src-tabs button { min-width: 0; text-align: left; }
.src-tabs button > span, .src-tabs button > div { min-width: 0; }
.src-tabs small { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* when the panel is narrow (a laptop with the order summary beside it), the icons make way for the labels */
.src-tabs { container-type: inline-size; }
@container (max-width: 34rem) { .src-tabs button svg { display: none; } .src-tabs button { padding: .55rem .65rem; } }
@media (max-width: 640px) { .src-tabs { grid-template-columns: 1fr; } }
.src-tag { display: inline-flex; align-items: center; height: 1.1rem; padding: 0 .35rem; border-radius: .35rem; font-size: .72rem; font-weight: 600; flex: none; }
.src-tag.new { background: oklch(var(--p) / .15); color: oklch(var(--p)); }
.src-tag.own { background: oklch(var(--wa) / .22); color: oklch(50% .12 70); }
.src-tag.aged { background: oklch(55% .12 300 / .15); color: oklch(45% .13 300); }
.src-tag.backup { background: oklch(var(--bc) / .08); color: oklch(var(--bc) / .7); gap: .2rem; }
.src-tag.free { background: oklch(var(--su) / .15); color: oklch(var(--su)); text-transform: none; letter-spacing: 0; font-weight: 600; }
.own-connect { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 720px) { .own-connect { grid-template-columns: 1fr; } }
.own-steps ol { margin-top: .5rem; padding-left: 1.1rem; list-style: decimal; font-size: .75rem; color: oklch(var(--bc) / .65); line-height: 1.6; }
.own-results { border: 1px solid oklch(var(--bc) / .1); border-radius: .8rem; overflow: hidden; }
.own-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-top: 1px solid oklch(var(--bc) / .07); }
.own-row:first-child { border-top: 0; }
.own-row.bad { background: oklch(var(--er) / .04); }
.own-mark { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; font-weight: 700; flex: none;
  background: oklch(var(--su) / .15); color: oklch(var(--su)); }
.own-row.bad .own-mark { background: oklch(var(--er) / .12); color: oklch(var(--er)); }
.own-warn { padding: .7rem .8rem; border-radius: .7rem; background: oklch(var(--er) / .06); border: 1px solid oklch(var(--er) / .25); }
.own-ok { padding: .6rem .75rem; border-radius: .7rem; background: oklch(var(--su) / .07); border: 1px solid oklch(var(--su) / .25); font-size: .78rem; }

/* ============================================================ accessibility pass
   Measured against WCAG 2.2 AA: body text needs 4.5:1. On our light surfaces that takes base-content
   at 61% or more (51% in dark mode), so the muted utilities used across both apps are lifted to 64%.
   Hierarchy comes from size and weight instead of fading text until it can't be read. */
.text-base-content\/30, .text-base-content\/35, .text-base-content\/40, .text-base-content\/45,
.text-base-content\/50, .text-base-content\/55 { color: oklch(var(--bc) / .64) !important; }
.text-base-content\/60 { color: oklch(var(--bc) / .7) !important; }
.opacity-40, .opacity-45, .opacity-50, .opacity-55 { opacity: .68 !important; }
.opacity-60 { opacity: .74 !important; }
svg.opacity-40, svg.opacity-45, svg.opacity-50, .ibtn.opacity-30 { opacity: .5 !important; }
.text-white\/50, .text-white\/55 { color: rgb(255 255 255 / .7) !important; }
/* nothing smaller than 11px, and helper text at 12px */
.text-\[10px\] { font-size: 11px !important; }
.text-\[11px\] { font-size: 12px !important; line-height: 1.45; }
.grid-table th, .grid-table thead th { color: oklch(var(--bc) / .66) !important; }
input::placeholder, textarea::placeholder { color: oklch(var(--bc) / .5); }

/* status colours: tinted background, text dark enough to read */
:root:not([data-theme=dark]) .badge-success, :root:not([data-theme=dark]) .delta.up { color: color-mix(in oklch, oklch(var(--su)) 55%, black); }
:root:not([data-theme=dark]) .badge-error, :root:not([data-theme=dark]) .delta.down { color: color-mix(in oklch, oklch(var(--er)) 80%, black); }
:root:not([data-theme=dark]) .badge-info { color: color-mix(in oklch, oklch(var(--in)) 60%, black); }
:root:not([data-theme=dark]) .badge-primary, :root:not([data-theme=dark]) .text-brand { color: color-mix(in oklch, oklch(var(--p)) 70%, black); }
:root:not([data-theme=dark]) .text-success { color: color-mix(in oklch, oklch(var(--su)) 60%, black); }
:root:not([data-theme=dark]) .text-warning { color: color-mix(in oklch, oklch(var(--wa)) 55%, black); }
:root:not([data-theme=dark]) .text-error { color: color-mix(in oklch, oklch(var(--er)) 85%, black); }

/* keyboard: every interactive thing shows where focus is */
.navitem:focus-visible, .sb-tab:focus-visible, .src-tabs button:focus-visible, .home-domain:focus-visible, .choice:has(input:focus-visible) {
  outline: 2px solid oklch(var(--p)); outline-offset: 2px; }
.skip-link { position: fixed; left: .75rem; top: -3rem; z-index: 100; padding: .5rem .8rem; border-radius: .6rem; background: #0b2028; color: #fff; font-size: .8rem; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: .75rem; }

/* touch targets: at least 24px (WCAG 2.5.8), 36px on touch screens */
.readiness .item button { min-height: 24px; padding: 0 .4rem; border-radius: .4rem; }
@media (pointer: coarse) {
  .ibtn, .roundbtn, .btn-xs, .sb-x { min-width: 36px; min-height: 36px; }
  .navitem { min-height: 44px; }
}

/* phones: stat cards two across, compact */
@media (max-width: 639px) {
  #h-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  #h-cards .stat-card { padding: .85rem; }
  #h-cards .stat-card .stat-num { font-size: 24px !important; }
  #h-cards .stat-card .info-tip { display: none; }
  #h-cards .tone-icon { width: 1.6rem; height: 1.6rem; }
}

main:focus { outline: none; }
.first-steps { display: grid; gap: .6rem; min-width: 15rem; flex: 1; max-width: 22rem; }
.first-steps li { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .85rem; border-radius: .8rem; background: oklch(var(--b2) / .8); border: 1px solid oklch(var(--bc) / .06); }
.first-steps span { width: 1.6rem; height: 1.6rem; flex: none; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; font-weight: 700;
  background: oklch(var(--p) / .15); color: color-mix(in oklch, oklch(var(--p)) 70%, black); }
.first-steps b { display: block; font-size: .85rem; }
.first-steps p { font-size: .76rem; color: oklch(var(--bc) / .68); margin-top: .1rem; }
.su-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: oklch(var(--b1) / .96); backdrop-filter: blur(8px); border-top: 1px solid oklch(var(--bc) / .1); box-shadow: 0 -8px 24px -12px rgb(0 0 0 / .18); }
.su-mobilebar[hidden] { display: none; }
@media (max-width: 1023px) { #view-setup.active { padding-bottom: 5rem; } }

#status-pill { color: oklch(var(--bc) / .78); }
.btn:disabled, .btn[disabled] { color: oklch(var(--bc) / .55) !important; background: oklch(var(--bc) / .08) !important; border-color: transparent !important; }
/* step headers keep the number beside the title on phones */
.panel > div:has(> .step) { flex-wrap: nowrap !important; align-items: flex-start; }
.panel > div:has(> .step) > .step { margin-top: .1rem; flex: none; }
:root:not([data-theme=dark]) .text-primary, :root:not([data-theme=dark]) .link-primary { color: color-mix(in oklch, oklch(var(--p)) 72%, black); }

/* people: gravatar over initials */
.person-avatar { position: relative; flex: none; display: grid; place-items: center; border-radius: 999px; overflow: hidden; font-weight: 700; color: #fff;
  background: #00a2a9; }
.person-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: oklch(var(--b1)); }
.ws-swatch { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--c); border: 2px solid oklch(var(--b1)); box-shadow: 0 0 0 1px oklch(var(--bc) / .12); }
.ws-swatch.on { box-shadow: 0 0 0 2px var(--c); }
.ws-swatch:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 3px; }

/* get inboxes: steps, examples and a receipt instead of paragraphs */
/* the rail's headline: sends a day, because that is the unit a cold emailer plans in */
.su-cap { border-radius: .9rem; padding: .85rem 1rem .9rem; background: oklch(var(--bc) / .04); color: oklch(var(--bc) / .45); }
.su-cap.on { background: oklch(var(--p) / .09); color: color-mix(in oklch, oklch(var(--p)) 65%, black); }
.su-cap-num { font-size: 2.1rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.su-cap-per { font-size: .95rem; font-weight: 600; letter-spacing: 0; margin-left: .15rem; opacity: .6; }
.su-cap-unit { font-size: 12px; font-weight: 600; margin-top: .3rem; }
.su-cap-math { font-size: 11.5px; margin-top: .15rem; color: oklch(var(--bc) / .55); }
.su-cap.on .su-cap-math { color: color-mix(in oklch, currentColor 70%, transparent); }
.su-cap-note { font-size: 11px; line-height: 1.45; margin-top: .55rem; padding-top: .5rem; border-top: 1px solid oklch(var(--bc) / .1); color: oklch(var(--bc) / .6); }

/* how the inboxes sit across the domains: the reputation question, answered before they buy */
.su-pd { border: 1px solid oklch(var(--bc) / .1); border-radius: .75rem; padding: .7rem .85rem .75rem; background: oklch(var(--bc) / .015); }
.su-pd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: 11px; font-weight: 600; color: oklch(var(--bc) / .6); }
.su-pd-key { display: inline-flex; align-items: center; gap: .35rem; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: oklch(var(--bc) / .5); }
.su-pd-key i { width: 2px; height: .75rem; border-radius: 1px; background: oklch(var(--bc) / .45); flex: none; }
.su-pd-rows { display: grid; gap: .3rem; margin-top: .6rem; }
.su-pd-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(3rem, 1fr) 1.4rem; align-items: center; gap: .6rem; font-size: 12px; }
.su-pd-bar { position: relative; height: .45rem; border-radius: 2px; background: oklch(var(--bc) / .08); }
.su-pd-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.su-pd-bar i.ok { background: oklch(var(--su)); }
.su-pd-bar i.warn { background: oklch(var(--wa)); }
.su-pd-bar i.over { background: oklch(var(--er)); }
.su-pd-bar b { position: absolute; top: -.2rem; bottom: -.2rem; width: 2px; margin-left: -1px; border-radius: 1px;
  background: oklch(var(--bc) / .45); box-shadow: 0 0 0 1.5px oklch(var(--b1)); }
.su-pd-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: oklch(var(--bc) / .75); }
.su-pd-n.warn { color: oklch(50% .12 70); }
.su-pd-n.over { color: oklch(var(--er)); }
.su-pd-n.none { color: oklch(var(--bc) / .3); }
.su-pd-note { font-size: 11.5px; line-height: 1.5; margin-top: .6rem; color: oklch(50% .12 70); }
/* the darkened brand tint that carries the hero and the amber warnings both vanish on a dark
   ground, so both come back as light-on-dark rather than dark-on-dark */
[data-theme="dark"] .su-cap.on { color: oklch(85% .1 190); }
[data-theme="dark"] .su-cap.on .su-cap-math { color: oklch(85% .1 190 / .65); }
[data-theme="dark"] .su-pd-note { color: oklch(var(--wa)); }
[data-theme="dark"] .su-pd-n.warn { color: oklch(var(--wa)); }
@media (max-width: 560px) { .su-pd-row { grid-template-columns: minmax(0, 1fr) 5rem 1.1rem; gap: .45rem; } }
.su-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; font-weight: 600; padding: .15rem .45rem .15rem .2rem; border-radius: .5rem; border: 1px solid oklch(var(--bc) / .1); }
.su-meter-bar { display: flex; height: .4rem; border-radius: 2px; overflow: hidden; background: oklch(var(--bc) / .08); margin-top: .35rem; }
.su-meter-bar span:first-child { background: oklch(var(--bc) / .28); }
.su-meter-bar span + span { background: oklch(var(--p)); }
.su-meter-bar span.over { background: oklch(var(--er)); }
.su-gets { display: grid; gap: .45rem; }
.su-gets li { display: flex; align-items: center; gap: .5rem; font-size: 12px; color: oklch(var(--bc) / .75); }
.su-gets svg { width: .95rem; height: .95rem; flex: none; color: oklch(var(--p)); }

@media (min-width: 1024px) { .su-mobilebar { display: none !important; } }

/* Export Mailboxes menu (exportMenu in app.js) */
.export-dd .export-chev { transition: transform .18s ease; }
.export-dd:focus-within .export-chev { transform: rotate(180deg); }
.export-menu { width: 19.5rem; margin-top: .4rem; padding: .4rem; border-radius: 1rem; animation: export-in .16s ease-out; }
.export-dd.dropdown-top .export-menu { margin-top: 0; margin-bottom: .4rem; }
@keyframes export-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.export-head { padding: .4rem .6rem .45rem; font-size: 11px; font-weight: 600; color: oklch(var(--bc) / .5); }
.export-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: .75rem; text-decoration: none; color: oklch(var(--bc));
  transition: background .15s ease, transform .15s ease; }
.export-item:hover, .export-item:focus-visible { background: oklch(var(--bc) / .05); outline: none; }
.export-item:active { transform: scale(.985); }
.export-ico { width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border-radius: .7rem;
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease; }
.export-ico svg { width: 1.05rem; height: 1.05rem; }
.export-ico.instantly { background: oklch(62% .18 255 / .14); color: oklch(55% .18 255); }
.export-ico.smartlead { background: oklch(60% .2 300 / .14); color: oklch(53% .2 300); }
.export-ico.csv { background: oklch(66% .15 155 / .15); color: oklch(52% .14 155); }
.export-ico.txt { background: oklch(76% .15 75 / .18); color: oklch(56% .13 65); }
.export-item:hover .export-ico.instantly { box-shadow: 0 6px 14px -6px oklch(55% .18 255 / .55); }
.export-item:hover .export-ico.smartlead { box-shadow: 0 6px 14px -6px oklch(53% .2 300 / .55); }
.export-item:hover .export-ico.csv { box-shadow: 0 6px 14px -6px oklch(52% .14 155 / .55); }
.export-item:hover .export-ico.txt { box-shadow: 0 6px 14px -6px oklch(56% .13 65 / .55); }
[data-theme="dark"] .export-ico.instantly { color: oklch(75% .13 255); }
[data-theme="dark"] .export-ico.smartlead { color: oklch(76% .13 300); }
[data-theme="dark"] .export-ico.csv { color: oklch(78% .12 155); }
[data-theme="dark"] .export-ico.txt { color: oklch(82% .12 80); }
.export-text { min-width: 0; flex: 1; display: grid; gap: .1rem; }
.export-text b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export-text span { font-size: 11px; color: oklch(var(--bc) / .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export-go { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border-radius: .35rem; color: oklch(var(--bc) / .35);
  opacity: 0; transform: translateY(-3px); transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease; }
.export-go svg { width: .9rem; height: .9rem; }
.export-item:hover .export-go, .export-item:focus-visible .export-go { opacity: 1; transform: none; background: oklch(var(--p) / .12); color: oklch(var(--p)); }
.export-item.done .export-go { opacity: 1; transform: none; background: oklch(var(--su) / .16); color: oklch(var(--su)); }
@media (max-width: 480px) { .export-menu { width: min(19.5rem, calc(100vw - 2rem)); } }
@media (prefers-reduced-motion: reduce) { .export-menu, .export-ico, .export-go, .export-chev { animation: none; transition: none; } }
/* the setup results panel clips its rounded corners; let an open export menu hang outside it */
#setup-result:has(.export-dd:focus-within) { overflow: visible; }

/* Export Mailboxes: a tile per sending tool */
.export-menu { width: 23rem; }
.export-sep { margin-top: .35rem; border-top: 1px solid var(--line); padding-top: .65rem; }
.export-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; padding: 0 .1rem .2rem; }
.export-tool { position: relative; display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; border-radius: .8rem;
  border: 1px solid var(--line); background: oklch(var(--b1)); color: oklch(var(--bc)); text-decoration: none;
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.export-tool img { width: 1.75rem; height: 1.75rem; flex: none; border-radius: .5rem; object-fit: contain;
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); }
.export-tool .export-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export-tool .export-go { width: 1.35rem; height: 1.35rem; }
.export-tool .export-go svg { width: .8rem; height: .8rem; }
.export-tool:hover, .export-tool:focus-visible { border-color: oklch(var(--p) / .45); box-shadow: 0 10px 22px -14px oklch(var(--bc) / .45); outline: none; }
.export-tool:hover img, .export-tool:focus-visible img { transform: scale(1.1) rotate(-5deg); }
.export-tool:hover .export-go, .export-tool:focus-visible .export-go { opacity: 1; transform: none; background: oklch(var(--p) / .12); color: oklch(var(--p)); }
.export-tool:active { transform: translateY(0) scale(.97); }
.export-tool.done { border-color: oklch(var(--su) / .6); }
.export-tool.done .export-go { opacity: 1; transform: none; background: oklch(var(--su) / .16); color: oklch(var(--su)); }
@media (max-width: 480px) { .export-menu { width: min(23rem, calc(100vw - 2rem)); } }

/* Dedicated infrastructure: plan card line and Account page servers */
.dedi-menu { width: 20rem; margin-top: .5rem; padding: 1rem; border-radius: 1rem; color: oklch(var(--bc)); animation: export-in .16s ease-out; }
.dedi-mark { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: grid; place-items: center; flex: none; color: #fff;
  background: oklch(55% .11 205); }
.dedi-mark svg { width: 1.2rem; height: 1.2rem; }
.dedi-server { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: .7rem; background: oklch(var(--bc) / .04); }
.dedi-dot { width: .5rem; height: .5rem; border-radius: 999px; flex: none; }
.dedi-dot.ok { background: oklch(var(--su)); box-shadow: 0 0 0 3px oklch(var(--su) / .18); animation: dedi-pulse 2.4s ease-in-out infinite; }
.dedi-dot.full { background: oklch(var(--wa)); }
.dedi-dot.down { background: oklch(var(--er)); }
@keyframes dedi-pulse { 50% { box-shadow: 0 0 0 5px oklch(var(--su) / .05); } }
@media (prefers-reduced-motion: reduce) { .dedi-dot.ok, .export-tool, .export-tool img { animation: none; transition: none; } }
.export-tool.soon { cursor: default; border-style: dashed; background: transparent; }
.export-tool.soon img { filter: grayscale(1); opacity: .55; }
.export-tool.soon .export-name { color: oklch(var(--bc) / .5); }
.export-tool.soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.export-tool.soon:hover img { transform: none; }
.export-soon { flex: none; font-size: 11px; font-weight: 600; padding: .1rem .4rem;
  border-radius: .3rem; color: oklch(var(--p)); background: oklch(var(--p) / .12); }

/* mailbox Access box in the admin mailbox editor: what it is and its port on top, the value underneath */
.access-row { display: grid; gap: .2rem; }
.access-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.5rem; }
.access-label { font-weight: 600; color: oklch(var(--bc) / .75); }
.access-dir { font-weight: 400; color: oklch(var(--bc) / .45); }
.access-value { font-size: 12.5px; overflow-wrap: anywhere; }
.access-port { flex: none; font-size: 10.5px; font-weight: 600; padding: .1rem .45rem; border-radius: .4rem; background: oklch(var(--bc) / .06); color: oklch(var(--bc) / .7); white-space: nowrap; }
.access-head .ibtn { width: 1.6rem; height: 1.6rem; }

/* customer dashboard (renderHome) */
.dash { display: grid; gap: 1rem; }
.dash-row { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 1100px) { .dash-row { grid-template-columns: minmax(0, 1fr); } }
.dash-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.dash-stack > .dash-card { flex: 1 1 auto; }
.dash-card { display: flex; flex-direction: column; padding: 1.2rem 1.25rem; min-width: 0; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.dash-sub { font-size: 12.5px; color: oklch(var(--bc) / .55); margin-top: .15rem; line-height: 1.45; }
.dash-muted { font-size: 11.5px; color: oklch(var(--bc) / .5); white-space: nowrap; }
.dash-list { display: flex; flex-direction: column; }
.dash-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.25rem .5rem; min-height: 8rem; }
.dash-group { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.dash-group-title { font-size: 12px; font-weight: 600; }
.dash-tip { margin-top: auto; padding-top: 1rem; font-size: 11.5px; color: oklch(var(--bc) / .5); line-height: 1.45; }

.dash-hero { padding: 1.25rem 1.35rem; display: grid; gap: 1.1rem; }
.dash-hero-top { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.dash-hero-title { font-family: Outfit, Inter, system-ui, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.dash-status-icon { width: 2.6rem; height: 2.6rem; flex: none; border-radius: .85rem; display: grid; place-items: center; }
.dash-status-icon svg { width: 1.25rem; height: 1.25rem; }
.dash-status-icon.ok { background: oklch(var(--su) / .15); color: oklch(var(--su)); }
.dash-status-icon.warn { background: oklch(var(--wa) / .2); color: oklch(55% .13 70); }
[data-theme="dark"] .dash-status-icon.warn { color: oklch(var(--wa)); }
.dash-dedicated { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem .4rem .55rem; border-radius: .3rem; font-size: 12.5px; font-weight: 600;
  color: oklch(42% .08 198); background: oklch(var(--p) / .1); border: 1px solid oklch(var(--p) / .25); white-space: nowrap; }
[data-theme="dark"] .dash-dedicated { color: oklch(82% .09 190); }
.dash-dedicated svg { width: 1rem; height: 1rem; flex: none; }
.dash-dedicated.on-dark { color: #bff5f5; background: rgb(42 221 221 / .1); border-color: rgb(94 233 233 / .28); }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 900px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-kpi { padding: .85rem .95rem; border-radius: .85rem; background: oklch(var(--bc) / .03); border: 1px solid var(--line); min-width: 0; }
.dash-kpi-label { font-size: 12px; color: oklch(var(--bc) / .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi-num { display: flex; align-items: baseline; gap: .3rem; margin: .35rem 0 .55rem; }
.dash-kpi-num .stat-num { font-size: 26px; line-height: 1; }
.dash-kpi-of { font-size: 13px; color: oklch(var(--bc) / .42); }

.dash-track { height: .35rem; border-radius: 2px; background: oklch(var(--bc) / .08); overflow: hidden; }
.dash-track span { display: block; height: 100%; border-radius: 2px; background: #00a2a9; }
.dash-track span.part { background: #00a2a9; }
.dash-track span.good { background: oklch(var(--su)); }
.dash-track span.bad { background: oklch(var(--er)); }
.dash-kpi .dash-track span.part { background: oklch(var(--wa)); }

.export-logo-none { width: 28px; height: 28px; flex: none; border-radius: .5rem; display: grid; place-items: center;
  background: oklch(var(--bc) / .08); font-size: 12px; font-weight: 700; color: oklch(var(--bc) / .6); }

.track-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .35rem; max-height: 13rem; overflow-y: auto; }
.track-list code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; padding: .3rem .5rem;
  border-radius: .45rem; background: oklch(var(--bc) / .05); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grow-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 760px) { .grow-tiles { grid-template-columns: 1fr; } }
.grow-tile { padding: .8rem .9rem; border-radius: .8rem; background: oklch(var(--bc) / .035); border: 1px solid var(--line); min-width: 0; }
.grow-label { display: block; font-size: 11px; font-weight: 600; color: oklch(var(--bc) / .45); }
.grow-tile b { display: block; font-size: 20px; line-height: 1.2; margin: .3rem 0 .35rem; font-variant-numeric: tabular-nums; }
.grow-line { display: block; font-size: 11.5px; color: oklch(var(--bc) / .55); line-height: 1.5; }
.grow-target { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.grow-ask { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.grow-input-wrap { display: inline-flex; align-items: center; gap: .15rem; padding: .25rem .6rem; border-radius: .6rem;
  border: 1px solid var(--line); background: oklch(var(--b1)); }
.grow-input-wrap span { color: oklch(var(--bc) / .45); font-weight: 500; }
.grow-input-wrap input { width: 6rem; background: transparent; font-variant-numeric: tabular-nums; font-weight: 600; outline: none; }
.grow-answer { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .6rem; font-size: 12.5px; color: oklch(var(--bc) / .65); }
.grow-answer > span { position: relative; }
.grow-good { color: oklch(var(--su)); font-weight: 600; }

.cap-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.cap-tile { padding: .7rem .75rem; border-radius: .75rem; background: oklch(var(--bc) / .035); border: 1px solid var(--line); min-width: 0; }
.cap-tile b { display: block; font-size: 21px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cap-tile-label { display: block; font-size: 12px; font-weight: 600; margin-top: .15rem; }
.cap-tile-note { display: block; font-size: 11px; color: oklch(var(--bc) / .55); line-height: 1.35; margin-top: .1rem; }
.cap-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; font-size: 11.5px; color: oklch(var(--bc) / .55); margin-top: .5rem; }
.cap-note { font-size: 11.5px; color: oklch(var(--bc) / .55); margin-top: .5rem; line-height: 1.45; }
.cap-divider { font-size: 11px; font-weight: 600; color: oklch(var(--bc) / .45);
  margin: 1rem 0 .7rem; padding-top: .85rem; border-top: 1px solid var(--line); }

/* two-step sign-in: the enrolment card */
.mfa-qr { width: 9.5rem; height: 9.5rem; border-radius: .6rem; border: 1px solid var(--line); background: #fff; flex: none; }
.mfa-key { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: .06em;
  padding: .5rem .65rem; border-radius: .5rem; background: oklch(var(--bc) / .05); line-height: 1.7; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
@media (min-width: 640px) { .mfa-codes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mfa-codes span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; text-align: center;
  padding: .35rem .3rem; border-radius: .45rem; background: oklch(var(--bc) / .05); }

.ops-system { position: relative; }
.ops-system-open { display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 0; text-align: left; }
.ops-snooze { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .45rem;
  color: oklch(var(--bc) / .4); opacity: 0; transition: opacity .12s, background .12s; }
.ops-system:hover .ops-snooze, .dash-attn:hover .ops-snooze, .ops-snooze:focus-visible { opacity: 1; }
.ops-snooze:hover { background: oklch(var(--bc) / .08); color: oklch(var(--bc) / .75); }
.ops-snooze svg { width: .95rem; height: .95rem; }
.ops-system .ops-snooze { position: absolute; top: .35rem; right: .35rem; background: oklch(var(--b1)); }

.dash-attn { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.dash-attn:first-child { border-top: 0; padding-top: .1rem; }
.dash-attn-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.dash-attn-detail { font-size: 12px; color: oklch(var(--bc) / .58); line-height: 1.45; margin-top: .1rem; }
.dash-attn-action { flex: none; }
.dash-sev { width: .55rem; height: .55rem; border-radius: 999px; flex: none; align-self: flex-start; margin-top: .4rem; }
.dash-sev.high { background: oklch(var(--er)); box-shadow: 0 0 0 3px oklch(var(--er) / .15); }
.dash-sev.medium { background: oklch(var(--wa)); box-shadow: 0 0 0 3px oklch(var(--wa) / .18); }
.dash-sev.low { background: oklch(var(--bc) / .3); }

.dash-callout { font-size: 12px; padding: .5rem .7rem; border-radius: .6rem; background: oklch(var(--p) / .08); color: oklch(var(--bc) / .75); margin-bottom: .6rem; }
.dash-ready { padding: .6rem 0; border-top: 1px solid var(--line); }
.dash-ready:first-child { border-top: 0; padding-top: .2rem; }

.dash-seg { display: flex; height: .65rem; border-radius: 2px; overflow: hidden; gap: 3px; }
.dash-seg span { display: block; height: 100%; min-width: 6px; border-radius: 2px; }
.seg-ok { background: #14b8a6; } .seg-new { background: oklch(var(--bc) / .25); } .seg-warn { background: oklch(var(--wa)); } .seg-bad { background: oklch(var(--er)); }
.dash-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .9rem; }
@media (max-width: 640px) { .dash-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-legend > div { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: center; padding: .55rem .65rem; border-radius: .65rem; background: oklch(var(--bc) / .035); }
.dash-legend b { font-size: 18px; line-height: 1.1; }
.dash-legend span:not(.dash-dot) { grid-column: 2; font-size: 11.5px; color: oklch(var(--bc) / .58); }
.dash-dot { width: .55rem; height: .55rem; border-radius: 999px; display: inline-block; flex: none; }

.dash-big { display: flex; align-items: baseline; gap: .5rem; }
.dash-big .stat-num { font-size: 30px; line-height: 1; }
.dash-mini { display: grid; gap: .1rem; padding: .55rem .65rem; border-radius: .65rem; background: oklch(var(--bc) / .04); }
.dash-mini b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-mini span { color: oklch(var(--bc) / .55); font-size: 11.5px; }
.dash-mini.bad b { color: oklch(var(--er)); }

.dash-start { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; padding: 2rem 2.1rem; }
@media (max-width: 900px) { .dash-start { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; gap: 1.5rem; } }
.dash-start-intro { display: flex; flex-direction: column; justify-content: center; }
.dash-start-cta { background: #2adddd; color: #04292b; border: 0; font-weight: 600; }
.dash-start-cta:hover { background: #5ee9e9; }
.dash-start-steps { padding: 1.1rem; border-radius: .9rem; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .06); }

@media (max-width: 640px) {
  .dash-attn { flex-wrap: wrap; }
  .dash-attn > .min-w-0 { flex-basis: calc(100% - 1.5rem); }
  .dash-attn-action { margin-left: 1.4rem; }
  .dash-hero-top .dash-dedicated { order: 3; }
}

/* Deploy Mailboxes: compact kind switch, steps that tick off, folded password options, a sticky order card */
.su-kind { display: inline-flex; }
.su-kind label { position: relative; cursor: pointer; }
.su-kind input { position: absolute; opacity: 0; pointer-events: none; }
.su-kind span { display: block; padding: .38rem .9rem; border-radius: .55rem; font-size: 12.5px; font-weight: 600; color: oklch(var(--bc) / .6); transition: background .15s, color .15s; }
.su-kind input:checked + span { background: oklch(var(--b1)); color: oklch(var(--bc)); box-shadow: var(--shadow); }
.su-kind input:focus-visible + span { outline: 2px solid oklch(var(--p)); outline-offset: 1px; }
.step.done { background: oklch(var(--p)); color: #fff; }
.step.done svg { width: .8rem; height: .8rem; }
.su-more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; font-size: 12.5px; color: oklch(var(--bc) / .65); }
.su-more summary::-webkit-details-marker { display: none; }
.su-more summary b { color: oklch(var(--bc)); font-weight: 600; }
.su-more-cta { font-size: 12px; font-weight: 600; color: oklch(var(--p)); }
.su-more[open] .su-more-cta { visibility: hidden; }
.su-order-col { min-width: 0; align-self: stretch; }
.su-order { padding: 1.15rem; display: flex; flex-direction: column; gap: .8rem; }
@media (min-width: 1280px) { .su-order { position: sticky; top: 1rem; } }
.su-checklist { display: grid; gap: .15rem; }
.su-checklist button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .35rem .45rem; border-radius: .55rem; font-size: 12.5px; color: oklch(var(--bc) / .75); text-align: left; }
.su-checklist button:hover { background: oklch(var(--bc) / .04); }
.su-check { width: 1.25rem; height: 1.25rem; flex: none; display: grid; place-items: center; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  border: 1.5px solid oklch(var(--bc) / .2); color: oklch(var(--bc) / .5); }
.su-check svg { width: .7rem; height: .7rem; }
.su-checklist li.done .su-check { background: oklch(var(--p)); border-color: oklch(var(--p)); color: #fff; }
.su-checklist li.done button { color: oklch(var(--bc)); font-weight: 600; }
.su-checklist li.optional .su-check { border-style: dashed; }
.su-trust { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 11.5px; color: oklch(var(--bc) / .55); }
.su-trust svg { width: .9rem; height: .9rem; color: oklch(var(--p)); flex: none; }

/* Getting started: sidebar launcher, checklist panel, guided tour */
.guide-launch { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .65rem; border-radius: .8rem; text-align: left;
  border: 1px solid oklch(var(--p) / .25); background: oklch(var(--p) / .05); transition: border-color .15s, box-shadow .15s; }
.guide-launch:hover, .guide-launch[aria-expanded="true"] { border-color: oklch(var(--p) / .5); box-shadow: 0 0 0 3px oklch(var(--p) / .08); }
.guide-ring { --p: 0; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 999px; display: grid; place-items: center;
  background: conic-gradient(oklch(var(--p)) calc(var(--p) * 1%), oklch(var(--bc) / .1) 0); }
.guide-ring > span { width: 1.65rem; height: 1.65rem; border-radius: 999px; display: grid; place-items: center; background: oklch(var(--b1));
  font-size: 9.5px; font-weight: 700; color: oklch(var(--bc) / .75); }
.guide-panel { position: fixed; z-index: 60; left: 1rem; bottom: 1rem; width: min(22rem, calc(100vw - 2rem)); padding: 1.1rem; border-radius: 1rem;
  animation: export-in .16s ease-out; }
@media (min-width: 1024px) { .guide-panel { left: 17.5rem; bottom: 6rem; } }
.guide-bar { height: .35rem; border-radius: 2px; background: oklch(var(--bc) / .08); overflow: hidden; }
.guide-bar span { display: block; height: 100%; border-radius: 2px; background: #00a2a9; transition: width .3s ease; }
.guide-steps { display: grid; gap: .15rem; }
.guide-steps li { display: flex; gap: .7rem; padding: .55rem .5rem; border-radius: .65rem; }
.guide-steps li.next { background: oklch(var(--p) / .07); }
.guide-dot { width: 1.4rem; height: 1.4rem; flex: none; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1.5px solid oklch(var(--bc) / .2); color: oklch(var(--bc) / .5); margin-top: .05rem; }
.guide-dot svg { width: .75rem; height: .75rem; }
.guide-steps li.done .guide-dot { background: oklch(var(--p)); border-color: oklch(var(--p)); color: #fff; }
.guide-steps li.done .text-\[13px\] { color: oklch(var(--bc) / .55); }
.guide-steps li.next .guide-dot { border-color: oklch(var(--p)); color: oklch(var(--p)); }
.readiness .item.is-next { border-color: rgb(94 233 233 / .35); background: rgb(42 221 221 / .06); }
.tour { position: fixed; inset: 0; z-index: 80; }
.tour-spot { position: fixed; border-radius: .8rem; box-shadow: 0 0 0 9999px rgb(4 20 24 / .58), 0 0 0 2px oklch(var(--p) / .9);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.tour-pop { position: fixed; padding: 1rem 1.1rem; border-radius: 1rem; transition: top .25s ease, left .25s ease; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-pop, .guide-bar span { transition: none; } }

/* admin dashboard (opsboard.py): system status tiles and customers to check on */
.ops-systems { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .5rem; }
.ops-system { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: .8rem; border: 1px solid var(--line);
  background: oklch(var(--bc) / .02); min-width: 0; transition: border-color .15s, background .15s; }
.ops-system:hover { border-color: oklch(var(--p) / .45); }
.ops-dot { width: .6rem; height: .6rem; border-radius: 999px; flex: none; background: oklch(var(--bc) / .25); }
.ops-system.ok .ops-dot { background: oklch(var(--su)); box-shadow: 0 0 0 3px oklch(var(--su) / .15); }
.ops-system.warn .ops-dot { background: oklch(var(--wa)); box-shadow: 0 0 0 3px oklch(var(--wa) / .18); }
.ops-system.down { border-color: oklch(var(--er) / .45); background: oklch(var(--er) / .05); }
.ops-system.down .ops-dot { background: oklch(var(--er)); box-shadow: 0 0 0 3px oklch(var(--er) / .15); }
.ops-system.off { opacity: .7; }
.ops-risk { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .65rem .2rem; border-top: 1px solid var(--line); }
.ops-risk:first-child { border-top: 0; padding-top: .1rem; }
.ops-risk:hover .text-\[13px\] { color: oklch(var(--p)); }
.ops-risk-score { width: 1.9rem; height: 1.9rem; flex: none; border-radius: .6rem; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ops-risk-score.high { background: oklch(var(--er) / .12); color: oklch(var(--er)); }
.ops-risk-score.medium { background: oklch(var(--wa) / .18); color: oklch(55% .13 70); }

/* admin Settings > Live chat: Intercom setup as numbered steps */
.st-step { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .9rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.st-step:first-child { border-top: 0; padding-top: .1rem; }
.st-num { width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: oklch(var(--p) / .1); color: oklch(var(--p)); }
.st-num.done { background: oklch(var(--su) / .15); color: oklch(var(--su)); }
.st-num svg { width: .95rem; height: .95rem; }
.st-how { list-style: decimal; padding-left: 1.1rem; font-size: 12.5px; line-height: 1.6; color: oklch(var(--bc) / .75); }
.st-how li + li { margin-top: .4rem; }
.st-how li::marker { color: oklch(var(--bc) / .4); font-weight: 600; }
.st-how code { font-size: 11.5px; padding: .05rem .3rem; border-radius: .3rem; background: oklch(var(--bc) / .06); overflow-wrap: anywhere; }
.st-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem; vertical-align: baseline; }
.st-path span { font-size: 11.5px; font-weight: 600; padding: .02rem .35rem; border-radius: .35rem; background: oklch(var(--bc) / .06); color: oklch(var(--bc) / .85); white-space: nowrap; }
.st-path svg { width: .7rem; height: .7rem; opacity: .4; }

/* bring your own domain: the DNS wipe note and the domains that couldn't be added */
.own-note { display: flex; gap: .5rem; align-items: flex-start; font-size: 11.5px; line-height: 1.45; padding: .5rem .65rem; border-radius: .6rem;
  background: oklch(var(--wa) / .12); color: oklch(var(--bc) / .75); }
.own-note svg { width: .95rem; height: .95rem; flex: none; margin-top: .05rem; color: oklch(60% .14 70); }
.own-results-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; font-size: 12px; font-weight: 600; color: oklch(var(--er)); }

/* Settings > Stripe: which products are ours */
.st-products { max-height: 15rem; overflow-y: auto; border: 1px solid var(--line); border-radius: .7rem; }
.st-product { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-top: 1px solid oklch(var(--bc) / .06); cursor: pointer; }
.st-product:first-child { border-top: 0; }
.st-product:hover { background: oklch(var(--bc) / .03); }

/* every <select> wears a DaisyUI dropdown: the button is the select, the list is the app's own (ui.js) */
.dd { position: relative; display: inline-block; }
/* its own showing and hiding: DaisyUI's .dropdown also opens on :focus-within, which held the menu
   open under the focus the trigger takes back after a choice */
.dd > .dd-menu { position: absolute; top: 100%; left: 0; margin-top: .3rem; display: none; }
.dd.dd-end > .dd-menu { left: auto; right: 0; }
.dd.dd-open > .dd-menu { display: flex; }
.dd-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.dd-trigger { text-align: left; display: inline-flex; align-items: center; }
.dd-trigger.dd-empty { color: oklch(var(--bc) / .5); }
.dd-trigger[disabled] { opacity: .55; cursor: not-allowed; }
.dd-menu { min-width: 100%; max-height: 17rem; overflow-y: auto; flex-wrap: nowrap; padding: .3rem; border-radius: .7rem;
  background: oklch(var(--b1)); border: 1px solid oklch(var(--bc) / .12); box-shadow: 0 14px 34px -14px rgb(0 0 0 / .32); }
.dd-menu li > .dd-item { display: flex; align-items: center; gap: .4rem; width: 100%; text-align: left; font-size: .8125rem;
  padding: .4rem .55rem; border-radius: .45rem; white-space: nowrap; }
.dd-item:hover:not([disabled]), .dd-item:focus-visible { background: oklch(var(--bc) / .07); }
.dd-item.on { background: oklch(var(--p) / .12); color: oklch(45% .09 198); font-weight: 600; }
[data-theme="dark"] .dd-item.on { color: oklch(var(--p)); }
.dd-item.on::after { content: ""; margin-left: auto; width: .95rem; height: .95rem; flex: none;
  background: currentColor; -webkit-mask: var(--dd-tick) center / contain no-repeat; mask: var(--dd-tick) center / contain no-repeat; }
.dd-item[disabled] { opacity: .45; cursor: not-allowed; }
:root { --dd-tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --dd-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }

/* customers page: what every account is doing, without opening it (roster.py) */
.cust-head { display: inline-flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; font-size: 11px; }
.cust-head > span:first-child { font-weight: 600; padding: .1rem .4rem; border-radius: .35rem;
  background: oklch(var(--bc) / .07); color: oklch(var(--bc) / .65); }
.cust-head.good > span:first-child { background: oklch(var(--su) / .14); color: oklch(45% .1 160); }
.cust-head.warn > span:first-child { background: oklch(var(--wa) / .2); color: oklch(48% .12 70); }
.cust-head.bad > span:first-child { background: oklch(var(--er) / .12); color: oklch(var(--er)); }
[data-theme="dark"] .cust-head.good > span:first-child { color: oklch(var(--su)); }
[data-theme="dark"] .cust-head.warn > span:first-child { color: oklch(var(--wa)); }
.cust-head-why { color: oklch(var(--bc) / .5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

.cust-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .7rem 1rem; }
.cust-bar-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.cust-bar-meta { display: flex; align-items: center; gap: .55rem; margin-left: auto; font-size: 11.5px; color: oklch(var(--bc) / .5); }
.cust-bar-meta > span { white-space: nowrap; }
@media (max-width: 760px) { .cust-bar-meta { margin-left: 0; width: 100%; justify-content: space-between; } }
/* the sort reads as one more filter, so it is built like one instead of as a shrunken form control */
.cust-sort { display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 500; padding: .22rem .6rem;
  border-radius: .3rem; border: 1px solid var(--line); background: transparent; color: oklch(var(--bc) / .7); white-space: nowrap; }
.cust-sort::after { content: ""; width: .65rem; height: .65rem; flex: none; opacity: .55; background: currentColor;
  -webkit-mask: var(--dd-caret) center / contain no-repeat; mask: var(--dd-caret) center / contain no-repeat; }
.cust-sort:hover { border-color: oklch(var(--p) / .4); }
.cust-bar-meta .dd > .dd-menu { left: auto; right: 0; }   /* it sits at the card's edge: open inwards */
.dd-open > .cust-sort { border-color: oklch(var(--p) / .45); color: oklch(var(--bc) / .9); }

.cust-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 500; padding: .22rem .6rem; border-radius: .3rem;
  border: 1px solid var(--line); color: oklch(var(--bc) / .7); white-space: nowrap; }
.cust-chip span { font-variant-numeric: tabular-nums; font-weight: 600; color: oklch(var(--bc) / .45); }
.cust-chip:hover { border-color: oklch(var(--p) / .4); }
.cust-chip.on { background: oklch(var(--p) / .1); border-color: oklch(var(--p) / .35); color: oklch(45% .09 198); }
[data-theme="dark"] .cust-chip.on { color: oklch(var(--p)); }
.cust-chip.on span { color: inherit; }
.cust-chip.warn:not(.on) { border-color: oklch(var(--wa) / .5); color: oklch(50% .12 70); }
.cust-plan { display: inline-block; font-size: 11.5px; font-weight: 600; padding: .12rem .5rem; border-radius: .3rem; white-space: nowrap; }
.cust-plan-note { font-size: 11px; color: oklch(var(--bc) / .45); margin-top: .15rem; }
.cust-plan-note.bad { color: oklch(var(--er)); }
.cust-plan.ok { background: oklch(var(--su) / .12); color: oklch(45% .1 160); }
.cust-plan.bad { background: oklch(var(--er) / .1); color: oklch(var(--er)); }
.cust-plan.off { background: oklch(var(--bc) / .06); color: oklch(var(--bc) / .55); }
[data-theme="dark"] .cust-plan.ok { color: oklch(var(--su)); }
.cust-trouble { font-size: 11.5px; line-height: 1.6; color: oklch(var(--bc) / .75); }
.cust-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 999px; margin-right: .4rem; vertical-align: middle; }
.cust-dot.bad { background: oklch(var(--er)); }
.cust-dot.warn { background: oklch(var(--wa)); }
.cust-ok { font-size: 11.5px; color: oklch(45% .1 160); display: inline-flex; align-items: center; gap: .35rem; }
.cust-ok::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: oklch(var(--su)); }

/* Plan & Billing: choosing on one side, what it costs on the other */
.plan-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 40rem) { .plan-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.plan-choose { border: 1px solid var(--line); border-radius: .9rem; padding: 1rem 1.1rem; }
.plan-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr)); gap: .4rem; }
.plan-band { border-radius: .55rem; background: oklch(var(--bc) / .045); padding: .35rem .5rem; }
.plan-band.on { background: oklch(var(--p) / .1); box-shadow: inset 0 0 0 1px oklch(var(--p) / .35); }
.plan-summary { border-radius: .9rem; padding: 1rem 1.1rem; background: oklch(var(--p) / .05); border: 1px solid oklch(var(--p) / .18); }
.plan-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 12.5px; padding: .42rem 0; color: oklch(var(--bc) / .7); }
.plan-line + .plan-line { border-top: 1px solid oklch(var(--bc) / .07); }
.plan-line.strong { color: oklch(var(--bc) / .95); font-weight: 600; }
.plan-line.muted { color: oklch(var(--bc) / .45); }
.plan-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .6rem; padding-top: .6rem;
  border-top: 1px solid oklch(var(--bc) / .12); font-size: 13px; font-weight: 600; }
.plan-total span:last-child { font-size: 1.35rem; font-weight: 700; font-family: 'Outfit', 'Inter', sans-serif; }
.plan-deployed { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid oklch(var(--bc) / .08); font-size: 11px; color: oklch(var(--bc) / .5); }
/* the limits read as two columns of rows once there is room for them */
@media (min-width: 48rem) { .pb-limits { columns: 2; column-gap: 2rem; } .pb-limits > div { break-inside: avoid; } }
.plan-domain { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-top: 1px solid oklch(var(--bc) / .07); }
.plan-domain:first-child { border-top: 0; }

/* ---------------------------------------------------------------- toasts
   DaisyUI's toast stack is nowrap and sized to its widest child. Our messages are sentences, so a
   long one ran off the side of the screen with its second half unreadable. These wrap, and the
   stack never grows wider than the window it sits in. */
/* min-width beats max-width in CSS, and DaisyUI sets it to fit-content -- the whole sentence on
   one line -- so the cap below only holds once that is undone */
#toasts { min-width: 0; max-width: min(26rem, calc(100vw - 1.5rem)); white-space: normal; }
#toasts > .alert { width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: start; }


/* ---------------------------------------------------------------- domain health
   Four records per domain, and a customer who wants to know which domain needs them rather than
   read four record names forty times. So: one verdict, coloured, with the four records shrunk to
   initials beside it, and everything else behind a click. */
/* the table below it is what stretches; this says its piece and gets out of the way */
.view.fill > .panel.dom-health { display: block; flex: none; min-height: 0; padding: .85rem 1rem; margin-bottom: .75rem; }
.dom-health[hidden] { display: none !important; }
.dom-health-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.dom-health-dot { width: .6rem; height: .6rem; border-radius: 999px; flex: none; }
.dom-health-dot.ok { background: oklch(var(--su)); }
.dom-health-dot.wait { background: oklch(var(--wa)); }
.dom-health-dot.bad { background: oklch(var(--er)); }

.dom-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.dom-filter { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: .3rem;
  border: 1px solid oklch(var(--bc) / .14); font-size: .7rem; color: oklch(var(--bc) / .68); background: oklch(var(--b1));
  white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.dom-filter:hover { border-color: oklch(var(--bc) / .3); }
.dom-filter.on { border-color: oklch(var(--p) / .55); color: oklch(var(--p)); background: oklch(var(--p) / .08); }

.health-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .5rem .2rem .45rem; border-radius: .55rem;
  border: 1px solid oklch(var(--bc) / .12); background: oklch(var(--b1)); font-size: .72rem; font-weight: 500;
  color: oklch(var(--bc) / .75); max-width: 100%; white-space: nowrap; transition: border-color .15s; }
.health-pill:hover { border-color: oklch(var(--bc) / .28); }
.health-dot { width: .45rem; height: .45rem; border-radius: 999px; flex: none; background: oklch(var(--bc) / .3); }
.health-pill.ok .health-dot, .dom-filter.ok .health-dot { background: oklch(var(--su)); }
.health-pill.wait .health-dot, .dom-filter.wait .health-dot { background: oklch(var(--wa)); }
.health-pill.bad .health-dot, .dom-filter.bad .health-dot { background: oklch(var(--er)); }
.health-pill.bad { border-color: oklch(var(--er) / .35); color: oklch(var(--er)); }

.rec-chips { display: inline-flex; gap: .15rem; margin-left: .15rem; }
.rec-chip { font-size: 11px; padding: .1rem .22rem; border-radius: .25rem;
  background: oklch(var(--bc) / .08); color: oklch(var(--bc) / .5); line-height: 1.25; }
.rec-chip.ok { background: oklch(var(--su) / .14); color: oklch(var(--su)); }
.rec-chip.bad { background: oklch(var(--er) / .14); color: oklch(var(--er)); }

.dom-detail > td { background: oklch(var(--b2) / .5); padding: 0 !important; }
/* the table scrolls sideways on a narrow screen; the detail must not scroll away with it */
.dom-detail-box { position: sticky; left: 0; width: min(100%, calc(100vw - 2.5rem));
  padding: .85rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
.dom-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem; }
.dom-record { border: 1px solid oklch(var(--bc) / .1); border-left-width: 3px; border-radius: .5rem; padding: .5rem .65rem;
  background: oklch(var(--b1)); display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.dom-record.ok { border-left-color: oklch(var(--su)); }
.dom-record.bad { border-left-color: oklch(var(--er)); }
.dom-record.mute { border-left-color: oklch(var(--bc) / .2); }
.dom-record-name { font-size: .7rem; font-weight: 600; color: oklch(var(--bc) / .6); }
.dom-record-say { font-size: .76rem; color: oklch(var(--bc) / .85); }
.dom-record.bad .dom-record-say { color: oklch(var(--er)); }
.dom-record-why { font-size: .68rem; color: oklch(var(--bc) / .45); }

/* ---------------------------------------------------------------- the customer list
   Rows on a grid rather than a table, for one reason: every cell is a figure and the thing that
   figure means, two lines each, so all the rows are the same height and a column can be read
   straight down. A row with less to say gets a dash, not a shorter row. */
.cust-top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.cust-tally { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-left: auto;
  font-size: 11.5px; color: oklch(var(--bc) / .5); }
.cust-tally .cust-sort { margin-left: .25rem; }
.cust-tally b { font-weight: 650; color: oklch(var(--bc) / .78); font-variant-numeric: tabular-nums; }

.cust-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }

.cust-head-row, .cust-row { display: grid; align-items: center; gap: .5rem .85rem;
  grid-template-columns: minmax(10rem, 1.5fr) minmax(8.5rem, 1.3fr) 4.25rem 4.25rem 5rem 6rem minmax(4.5rem, auto); }
.cust-head-row { padding: .55rem 1rem; position: sticky; top: 0; z-index: 2; background: oklch(var(--b1));
  border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; color: oklch(var(--bc) / .45); }
.cust-head-row > span:nth-child(n+3):nth-child(-n+6) { text-align: right; }

.cust-row { padding: .7rem 1rem; border-bottom: 1px solid oklch(var(--bc) / .06); cursor: pointer;
  transition: background .12s; min-height: 4rem; }
.cust-row:last-child { border-bottom: 0; }
.cust-row:hover { background: oklch(var(--b2) / .55); }
.cust-row:focus-visible { outline: 2px solid oklch(var(--p) / .5); outline-offset: -2px; }

/* who */
.cust-who { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.cust-av { width: 2.25rem; height: 2.25rem; flex: none; border-radius: .7rem; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; background: oklch(var(--p) / .1); color: oklch(var(--p)); }
.cust-av.warn { background: oklch(var(--wa) / .16); color: oklch(50% .12 70); }
[data-theme="dark"] .cust-av.warn { color: oklch(var(--wa)); }
.cust-name { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 650; min-width: 0; }
.cust-name-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-mail { font-size: 11px; color: oklch(var(--bc) / .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-tag { flex: none; font-size: 11px; font-weight: 600;
  padding: .1rem .3rem; border-radius: .3rem; background: oklch(var(--bc) / .08); color: oklch(var(--bc) / .5); }
.cust-tag.warn { background: oklch(var(--wa) / .2); color: oklch(48% .12 70); }
[data-theme="dark"] .cust-tag.warn { color: oklch(var(--wa)); }

/* what's going on */
.cust-sig { min-width: 0; }
.cust-sig-top { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.cust-dot { width: .4rem; height: .4rem; border-radius: 999px; flex: none; background: oklch(var(--bc) / .25); }
.cust-dot.good { background: oklch(var(--su)); }
.cust-dot.warn { background: oklch(var(--wa)); }
.cust-dot.bad { background: oklch(var(--er)); }
.cust-sig-label { font-size: .77rem; font-weight: 600; color: oklch(var(--bc) / .72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-sig-label.good { color: oklch(45% .1 160); }
.cust-sig-label.warn { color: oklch(48% .12 70); }
.cust-sig-label.bad { color: oklch(var(--er)); }
[data-theme="dark"] .cust-sig-label.good { color: oklch(var(--su)); }
[data-theme="dark"] .cust-sig-label.warn { color: oklch(var(--wa)); }
.cust-sig-why { font-size: 11px; color: oklch(var(--bc) / .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a figure and what it means */
.cust-num { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.cust-num-v { font-size: .88rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.25;
  color: oklch(var(--bc) / .88); }
.cust-num-n { font-size: 10.5px; color: oklch(var(--bc) / .42); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.cust-num.mute .cust-num-v { color: oklch(var(--bc) / .3); font-weight: 500; }
.cust-num.warn .cust-num-v, .cust-num.warn .cust-num-n { color: oklch(52% .13 70); }
[data-theme="dark"] .cust-num.warn .cust-num-v, [data-theme="dark"] .cust-num.warn .cust-num-n { color: oklch(var(--wa)); }
.cust-num.bad .cust-num-v, .cust-num.bad .cust-num-n { color: oklch(var(--er)); }
.cust-num.ok .cust-num-v { color: oklch(45% .1 160); }
[data-theme="dark"] .cust-num.ok .cust-num-v { color: oklch(var(--su)); }

/* what you can do, kept quiet until the row is under the pointer */
.cust-do { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.cust-hover { opacity: 0; transition: opacity .12s; }
.cust-row:hover .cust-hover, .cust-row:focus-within .cust-hover { opacity: 1; }
@media (hover: none) { .cust-hover { opacity: 1; } }
.cust-go { width: 1.1rem; height: 1.1rem; flex: none; color: oklch(var(--bc) / .25); }
.cust-go svg { width: 100%; height: 100%; }
.cust-row:hover .cust-go { color: oklch(var(--bc) / .5); }

/* Narrow: the same row, folded. Who and the actions on the first line, what's going on across the
   second, and the four figures share the third -- still four columns, so they still line up. */
@media (max-width: 1240px) {
  .cust-head-row { display: none; }
  /* the column headings are gone, so each figure says what it is */
  .cust-num::before { content: attr(data-label); order: -1; font-size: 11px; font-weight: 600; color: oklch(var(--bc) / .35); }
  .cust-row { grid-template-columns: repeat(4, 1fr) 4.75rem; gap: .55rem .75rem;
    padding: .9rem 1rem; align-items: center; }
  .cust-who { grid-column: 1 / 5; }
  .cust-do { grid-column: 5; grid-row: 1; }
  .cust-sig { grid-column: 1 / -1; }
  .cust-num { align-items: flex-start; }
}
@media (max-width: 620px) {
  /* two columns, so the four figures make a tidy square instead of three-and-one */
  .cust-row { grid-template-columns: 1fr 1fr; }
  .cust-who { grid-column: 1; }
  .cust-do { grid-column: 2; grid-row: 1; justify-self: end; }
  .cust-sig { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  /* eight filters wrapped to five lines pushed the customers off the screen; one line that
     scrolls keeps them in view, and the chips are still all there */
  .cust-bar-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem; }
  .cust-bar-chips::-webkit-scrollbar { display: none; }
  .cust-chip { flex: none; }
}

/* ---------------------------------------------------------------- one customer
   The same reading as the list: what's going on at the top in the same words, then figures that
   are all the same shape. Six cards of three different shapes became one panel. */
.cu-head { padding: 0; overflow: hidden; }
.cu-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .9rem 1.1rem; }
.cu-head-top .cust-sig-label { font-size: .84rem; }
.cu-head-top .cust-sig-why { white-space: normal; font-size: 11.5px; }
.cu-head-meta { display: flex; align-items: center; gap: .6rem; margin-left: auto;
  font-size: 11.5px; color: oklch(var(--bc) / .5); white-space: nowrap; }

.cu-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .1rem;
  border-top: 1px solid var(--line); }
.cu-stats > .cust-num { align-items: flex-start; gap: .1rem; padding: .8rem 1.1rem; min-width: 0;
  border-left: 1px solid oklch(var(--bc) / .06); }
.cu-stats > .cust-num:first-child { border-left: 0; }
.cu-stats > .cust-num::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: oklch(var(--bc) / .38);
  /* a label that wraps makes its cell taller than the five beside it */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cu-stats .cust-num-v { font-size: 1.15rem; font-weight: 700; display: flex; align-items: baseline; gap: .3rem; }
.cu-of { font-size: .7rem; font-weight: 500; color: oklch(var(--bc) / .35); }
.cu-meter { display: block; width: 100%; height: .25rem; border-radius: 2px; margin: .3rem 0 .15rem;
  background: oklch(var(--bc) / .09); overflow: hidden; }
.cu-meter > span { display: block; height: 100%; border-radius: 2px; background: oklch(var(--p)); }
.cu-meter > span.full { background: oklch(var(--wa)); }

@media (max-width: 1100px) { .cu-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cu-stats > .cust-num:nth-child(3n+1) { border-left: 0; }
  .cu-stats > .cust-num:nth-child(n+4) { border-top: 1px solid oklch(var(--bc) / .06); } }
@media (max-width: 620px) { .cu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-stats > .cust-num:nth-child(odd) { border-left: 0; }
  .cu-stats > .cust-num:nth-child(3n+1) { border-left: 1px solid oklch(var(--bc) / .06); }
  .cu-stats > .cust-num:nth-child(odd) { border-left: 0; }
  .cu-stats > .cust-num:nth-child(n+3) { border-top: 1px solid oklch(var(--bc) / .06); } }

/* every panel on the customer page introduces itself the same way: a title and one line saying
   what is in it, so a glance down the page is a list of answers rather than a list of nouns */
.cu-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); }
.cu-panel-sub { font-size: 11.5px; color: oklch(var(--bc) / .5); margin-top: .15rem; }

.cu-dns { font-size: 11.5px; white-space: nowrap; }
.cu-dns .cust-dot { display: inline-block; margin-right: .35rem; vertical-align: middle; }

.cu-events { display: flex; flex-direction: column; }
.cu-event { display: flex; align-items: center; gap: .65rem; padding: .5rem 1.15rem;
  border-bottom: 1px solid oklch(var(--bc) / .06); }
.cu-event:last-child { border-bottom: 0; }
.cu-event-d { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-event-w { font-size: 11px; color: oklch(var(--bc) / .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-event-t { font-size: 11px; color: oklch(var(--bc) / .42); white-space: nowrap; flex: none; }
.cu-more { padding: .55rem 1.15rem; font-size: 11px; color: oklch(var(--bc) / .4);
  border-top: 1px solid oklch(var(--bc) / .06); }

/* ---------------------------------------------------------------- one inbox's login details
   A label, the thing itself, and a way to take it. The password is covered until it is asked for,
   because this opens on a laptop in a room with other people in it. */
/* the address opens the details; the rest of the row still picks the row */
.mb-open { font: inherit; color: inherit; text-align: left; border-bottom: 1px solid transparent; }
.mb-open:hover { color: oklch(var(--p)); border-bottom-color: oklch(var(--p) / .4); }

.su-soon { opacity: .75; }
.su-soon .toggle:disabled { cursor: not-allowed; }

/* warm-up for active inboxes: the panel above Manage Mailboxes */
/* the page fills the screen with its table; like the Domains health panel, this one keeps its own height */
.view.fill > .panel.wu-panel { display: block; flex: none; min-height: 0; margin-bottom: .75rem; }
.wu-head { padding: .75rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
.wu-panel:not(.folded) .wu-head { border-bottom: 1px solid var(--line); }
.wu-panel.folded .wu-body { display: none; }
.wu-body { padding: .9rem 1.25rem 1rem; display: grid; gap: .9rem; }
@media (min-width: 1024px) { .wu-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } }
.wu-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 1024px) { .wu-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wu-fig { border: 1px solid var(--line); border-radius: .6rem; padding: .55rem .7rem; }
.wu-fig b { display: block; font-size: 1.15rem; font-weight: 600; font-family: 'Outfit', 'Inter', sans-serif; line-height: 1.3; }
.wu-fig span { font-size: 11.5px; color: oklch(var(--bc) / .55); }
.wu-fig.good b { color: oklch(var(--su)); }
.wu-fig.bad b { color: oklch(var(--er)); }
.wu-chart { display: flex; align-items: flex-end; gap: 4px; height: 7.5rem; }
@media (min-width: 1024px) { .wu-chart { height: 5rem; } }
.wu-day { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.wu-stack { width: 100%; max-width: 1.6rem; display: flex; flex-direction: column; border-radius: 2px; overflow: hidden; }
.wu-stack span { display: block; min-height: 0; }
.wu-inbox { background: oklch(var(--su) / .75); }
.wu-promo { background: oklch(var(--wa) / .8); }
.wu-spam { background: oklch(var(--er) / .8); }
.wu-lbl { font-size: 10px; color: oklch(var(--bc) / .4); line-height: 1; }
.wu-key { display: flex; gap: .9rem; font-size: 11px; color: oklch(var(--bc) / .55); grid-column: 1 / -1; justify-content: flex-end; }
.wu-key i { display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.wu-cell { display: inline-flex; align-items: center; gap: .4rem; }

.conn-group { border: 1px solid var(--line); border-radius: .7rem; overflow: hidden; }
.conn-head { padding: .4rem .75rem; font-size: 11px; font-weight: 600; color: oklch(var(--bc) / .45); background: oklch(var(--b2) / .6);
  border-bottom: 1px solid var(--line); }
.conn-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem .4rem .75rem;
  border-bottom: 1px solid oklch(var(--bc) / .06); }
.conn-row:last-child { border-bottom: 0; }
.conn-label { flex: none; width: 5.5rem; font-size: 11px; color: oklch(var(--bc) / .5); }
.conn-value { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.conn-secret { filter: blur(5px); user-select: none; }
.conn-input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.conn-note { padding: .45rem .75rem .55rem; font-size: 11px; color: oklch(var(--bc) / .55);
  border-top: 1px solid oklch(var(--bc) / .06); }
.conn-note-ok { color: oklch(var(--su)); }
.conn-note-bad { color: oklch(var(--er)); }
/* on a phone the address needs the room more than the label needs to line up */
@media (max-width: 480px) { .conn-test .conn-label { width: auto; } }

/* ---------------------------------------------------------------- two-line table cells
   Long admin tables, read the same way as the Customers list: a thing and what it means, on two
   lines, so every row is the same height. The second line is always there -- an empty one holds
   the space -- because a row that shrinks when it has less to say is the thing that made these
   tables hard to scan down. */
.grid-table.rows2 td { padding-top: .45rem; padding-bottom: .45rem; vertical-align: middle; }
.tl { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.tl-main { font-size: 12.5px; font-weight: 550; color: oklch(var(--bc) / .88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-sub { font-size: 10.5px; color: oklch(var(--bc) / .42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl.mono-main .tl-main { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px;
  font-feature-settings: "tnum"; }
.tl.right { align-items: flex-end; }
.tl.mute .tl-main { color: oklch(var(--bc) / .3); font-weight: 500; }
.tl-dash { color: oklch(var(--bc) / .3); }
.tl-of { font-size: 10px; font-weight: 500; color: oklch(var(--bc) / .35); margin-left: .3rem; }
.tl-bad { color: oklch(var(--er)); }
.tl-warn { color: oklch(55% .12 70); }
[data-theme="dark"] .tl-warn { color: oklch(var(--wa)); }
.tl-main.tl-dot { display: flex; align-items: center; gap: .4rem; font-weight: 550; }
.tl-meter { display: block; width: 100%; max-width: 7rem; height: .2rem; border-radius: 2px;
  background: oklch(var(--bc) / .1); overflow: hidden; margin: .15rem 0; }
.tl-meter > span { display: block; height: 100%; border-radius: 2px; background: oklch(var(--p)); }
.tl-meter.full > span { background: oklch(var(--wa)); }
.tl.tl-bad-main .tl-main { color: oklch(var(--er)); }
.tl.tl-warn-main .tl-main { color: oklch(55% .12 70); }
[data-theme="dark"] .tl.tl-warn-main .tl-main { color: oklch(var(--wa)); }

/* ---------------------------------------------------------------- what receivers reported back
   DMARC aggregate reports, read the way every other figure in the app is read: the number, and
   underneath it what the number means. Three of them fit on a phone; the sentence below carries
   whatever needs a sentence. */
.dlv { display: flex; flex-direction: column; gap: .5rem; border: 1px solid oklch(var(--bc) / .1);
  border-radius: .55rem; background: oklch(var(--b1)); padding: .6rem .75rem; }
.dlv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.dlv-title { font-size: .7rem; font-weight: 600;
  color: oklch(var(--bc) / .6); }
.dlv-when { font-size: .68rem; color: oklch(var(--bc) / .45); }
.dlv-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1.5rem;
  /* three figures belong together: spread across a full-width table row they stop reading as a set */
  max-width: 34rem; }
.dlv-fig { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.dlv-num { font-size: 1.05rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums;
  color: oklch(var(--bc) / .9); }
.dlv-fig.good .dlv-num { color: oklch(var(--su)); }
.dlv-fig.bad .dlv-num { color: oklch(var(--er)); }
.dlv-fig.mute .dlv-num { color: oklch(var(--bc) / .35); }
.dlv-what { font-size: .66rem; color: oklch(var(--bc) / .5); line-height: 1.25; }
.dlv-say { font-size: .72rem; color: oklch(var(--bc) / .6); }
.dlv-say b { color: oklch(var(--bc) / .85); font-weight: 600; }
/* On the dashboard the same figures are the headline, not a footnote: four across, and big enough
   to be read from across the room, which is how somebody checks whether last night went well. */
.dlv-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: .5rem 1.25rem; }
.dlv-strip .dlv-num { font-size: 1.55rem; font-weight: 650; letter-spacing: -.01em; }
.dlv-strip .dlv-what { font-size: .72rem; }

/* A day of volume per bar. The darker sliver at the top of a bar is the part that did not
   authenticate -- on a healthy workspace there is nothing to see, which is the point. */
.dlv-chart { display: flex; align-items: flex-end; gap: 2px; height: 3.25rem; margin-top: .9rem; }
.dlv-bar { position: relative; flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0;
  background: oklch(var(--p) / .55); transition: background .12s; }
.dlv-bar:hover { background: oklch(var(--p)); }
.dlv-bar > i { position: absolute; inset: 0 0 auto 0; border-radius: 2px 2px 0 0; background: oklch(var(--er) / .75); }
.dlv-axis { display: flex; justify-content: space-between; font-size: .64rem; color: oklch(var(--bc) / .4); margin-top: .25rem; }

/* ---------------------------------------------------------------- renewals
   A week per bar, because renewal dates scatter and a bar per day would be a row of ones. An empty
   week keeps its slot and draws nothing: the gap before a cliff is the part worth seeing. */
.rnw-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .75rem; margin-top: .2rem; }
.rnw-figs .dlv-num { font-size: 1.25rem; }
.rnw-when { font-size: 1rem !important; }
.rnw-chart { display: flex; align-items: flex-end; gap: 2px; height: 2.5rem; margin-top: .8rem; }
/* full height on purpose: the bar inside is a percentage of it, and the parent aligns to the end
   rather than stretching, so without this every week would be nought pixels tall */
.rnw-week { flex: 1 1 0; min-width: 3px; height: 100%; display: flex; align-items: flex-end;
  border-bottom: 1px solid oklch(var(--bc) / .12); }
.rnw-week > span { display: block; width: 100%; border-radius: 2px 2px 0 0; background: oklch(var(--p) / .55); }
.rnw-week:hover > span { background: oklch(var(--p)); }
.rnw-week.none > span { background: transparent; }

/* ---------------------------------------------------------------- capacity
   A count, the part of it that is working, the part that is not yet, and the room left on the plan.
   Same three-figure shape as the delivery strip, so the two rows read as one system. */
.cap-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .75rem; margin-top: .2rem; }
.cap-figs .dlv-num { font-size: 1.45rem; }
.cap-bar { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; }
.cap-bar .dash-track { flex: 1; }
.cap-pct { font-size: .72rem; font-weight: 600; color: oklch(var(--bc) / .5); font-variant-numeric: tabular-nums; }
.cap-note { margin-top: .35rem; white-space: normal; }
@media (max-width: 26rem) { .cap-figs .dlv-num { font-size: 1.2rem; } }

@media (max-width: 30rem) { .dlv-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlv-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlv-strip .dlv-num { font-size: 1.3rem; } }

/* ---------------------------------------------------------------- pointing a domain at us
   The four nameservers differ for every domain -- that is the point of the provider we chose, since
   no two customers then share a delegation -- so they are shown per domain. One set at the top of
   the section would read better and would be wrong. */
.ns-wait { border: 1px solid oklch(var(--bc) / .12); border-radius: .6rem; padding: .7rem .8rem;
  background: oklch(var(--b1)); display: flex; flex-direction: column; gap: .5rem; }
.ns-wait.bad { border-color: oklch(var(--er) / .35); background: oklch(var(--er) / .04); }
.ns-wait-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.ns-wait-acts { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.ns-wait-say { font-size: 11.5px; color: oklch(var(--bc) / .55); margin: -.25rem 0 0; }
.ns-dot { width: .5rem; height: .5rem; border-radius: 999px; flex: none; background: oklch(var(--bc) / .3); }
.ns-dot.wait { background: oklch(var(--wa)); }
.ns-dot.ok { background: oklch(var(--su)); }
.ns-dot.bad { background: oklch(var(--er)); }
/* One line per domain. The four nameservers are per domain and cannot be summarised away, but they
   can wait until somebody is actually typing them into a registrar. */
.ns-rows { border: 1px solid oklch(var(--bc) / .1); border-radius: .5rem; background: oklch(var(--b1)); overflow: hidden; }
.ns-row { position: relative; border-bottom: 1px solid oklch(var(--bc) / .07); }
.ns-row:last-child { border-bottom: 0; }
.ns-row.on { background: oklch(var(--b2) / .55); }
.ns-row-head { display: flex; align-items: center; gap: .45rem; width: 100%; min-width: 0;
  padding: .42rem 3.4rem .42rem .5rem; font-size: 12.5px; text-align: left; }
.ns-row-head:hover { background: oklch(var(--bc) / .035); }
.ns-row.on .ns-row-head:hover { background: transparent; }
.ns-chev { width: .8rem; height: .8rem; flex: none; color: oklch(var(--bc) / .35); transition: transform .15s; }
.ns-row.on .ns-chev { transform: rotate(90deg); color: oklch(var(--bc) / .6); }
.ns-row-hint { margin-left: auto; font-size: 10.5px; color: oklch(var(--bc) / .38); white-space: nowrap; }
.ns-row-copy { position: absolute; right: .3rem; top: .22rem; font-size: 10.5px; height: 1.5rem; min-height: 1.5rem; padding-inline: .5rem; }
.ns-list { list-style: none; margin: 0; padding: 0 .5rem .5rem 1.75rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .1rem .8rem; }
.ns-list li { font-size: 11.5px; color: oklch(var(--bc) / .75); user-select: all;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-more { align-self: flex-start; font-size: 11.5px; font-weight: 500; color: oklch(var(--p));
  padding: .1rem .1rem; }
.ns-more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- setting them for the customer
   One quiet line on the page and a dialog when wanted: a customer who sets nameservers by hand
   shouldn't have to read about registrar keys. */
.ns-auto-link { display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 500;
  color: oklch(var(--p)); }
.ns-auto-link:hover { text-decoration: underline; }
.ns-auto-link svg { width: .85rem; height: .85rem; }
.ns-auto { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; font-size: 11.5px;
  color: oklch(var(--bc) / .62); }
.ns-auto svg { width: .8rem; height: .8rem; flex: none; color: oklch(var(--su)); }
.ns-auto b { color: oklch(var(--bc) / .85); font-weight: 600; }
.ns-row-hint.updated { color: oklch(var(--su)); }
.ns-row-hint.failed { color: oklch(var(--er)); }
.ns-row-hint.elsewhere { color: oklch(var(--bc) / .45); }
.ns-row-err { margin: 0; padding: 0 3.4rem .45rem 1.75rem; font-size: 11px; line-height: 1.4; color: oklch(var(--er)); }

.nsm-regs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: .45rem; }
.nsm-reg { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: .6rem; min-width: 0;
  border: 1px solid oklch(var(--bc) / .14); font-size: 12.5px; font-weight: 500; text-align: left;
  transition: border-color .12s, background .12s, box-shadow .12s; }
.nsm-reg:hover { border-color: oklch(var(--p) / .45); }
.nsm-reg.on { border-color: oklch(var(--p)); background: oklch(var(--p) / .07); box-shadow: 0 0 0 3px oklch(var(--p) / .1); }
/* the registrars' own marks, bundled with the app rather than fetched from seven other sites */
.nsm-reg-logo { width: 1.25rem; height: 1.25rem; flex: none; object-fit: contain; border-radius: .25rem; }
.nsm-ip { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem .65rem; border-radius: .55rem;
  border: 1px dashed oklch(var(--p) / .45); background: oklch(var(--p) / .05); }
.nsm-ip > div { flex: 1 1 12rem; }
.nsm-ip-val { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.nsm-reg-saved { margin-left: auto; font-size: 11px; color: oklch(var(--su)); }
.nsm-help { font-size: 11.5px; line-height: 1.5; color: oklch(var(--bc) / .6); }
.nsm-saved { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: .5rem;
  background: oklch(var(--su) / .08); font-size: 11.5px; color: oklch(var(--bc) / .7); }
.nsm-saved > span { flex: 1; min-width: 0; }
.nsm-save { display: flex; gap: .55rem; align-items: flex-start; font-size: 11.5px; line-height: 1.45;
  color: oklch(var(--bc) / .62); cursor: pointer; }
.nsm-save input { margin-top: .12rem; flex: none; }
.nsm-save b { color: oklch(var(--bc) / .85); font-weight: 600; }
.nsm-error { font-size: 12px; color: oklch(var(--er)); padding: .45rem .6rem; border-radius: .5rem; background: oklch(var(--er) / .07); }
.nsm-results { border: 1px solid oklch(var(--bc) / .1); border-radius: .55rem; max-height: 14rem; overflow-y: auto; }
.nsm-result { display: flex; gap: .55rem; align-items: flex-start; padding: .45rem .6rem; border-bottom: 1px solid oklch(var(--bc) / .07); }
.nsm-result:last-child { border-bottom: 0; }
.nsm-mark { width: 1.1rem; height: 1.1rem; flex: none; border-radius: 999px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; margin-top: .1rem; }
.nsm-result.ok .nsm-mark { background: oklch(var(--su) / .15); color: oklch(var(--su)); }
.nsm-result.bad .nsm-mark { background: oklch(var(--er) / .12); color: oklch(var(--er)); }
.ns-live { display: flex; flex-wrap: wrap; gap: .4rem; }
.ns-pick { border: 1px solid oklch(var(--bc) / .15); border-radius: .45rem; padding: .3rem .6rem;
  font-size: 11.5px; max-width: 100%; display: flex; align-items: center; gap: .35rem;
  background: oklch(var(--b1)); transition: border-color .12s, background .12s; }
.ns-pick:hover { border-color: oklch(var(--p) / .5); }
.ns-pick.on { border-color: oklch(var(--p)); background: oklch(var(--p) / .1); font-weight: 600; }