/* Blaigent v6 — mobile UI shell.
   Tokens mirror the desktop palette declared in shell.css so both
   stylesheets reference the same brand colors. The fallback hex values
   protect against shell.css load-order issues.
   Loaded only when viewport <=900px (see dashboard.html bootstrap). */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --m-bg:     #ffffff;                        /* page background */
  --m-card:   #ffffff;                        /* raised surfaces, cards */
  --m-ink:    var(--ink, #0f172a);            /* primary text + primary buttons */
  --m-ink2:   var(--ink2, #1e293b);           /* body text */
  --m-ink3:   var(--ink2, #1e293b);           /* assistant bubble */
  --m-muted:  var(--muted, #64748b);          /* secondary text */
  --m-mute2:  var(--mute2, #94a3b8);          /* tertiary, mono numbers */
  --m-line:   var(--line, #e2e8f0);           /* primary hairline */
  --m-line2:  var(--line2, #f1f5f9);          /* row dividers */
  --m-subtle: #f8fafc;                        /* pulled-up surface (chat bubble) */
  --m-green:  var(--green, #10b981);
  --m-amber:  var(--amber, #f59e0b);
  --m-rose:   var(--rose, #f43f5e);
  --m-blue:   var(--indigo, #4f46e5);

  --m-serif: 'Newsreader', Georgia, serif;
  --m-sans:  'Inter', -apple-system, system-ui, sans-serif;
  --m-mono:  'JetBrains Mono', ui-monospace, monospace;
}

/* ── Viewport isolation ───────────────────────────────────────────────────────
   Every layout/atom rule below is wrapped in `@media (max-width:900px)` so
   that on desktop viewports (>900px) NONE of the mobile classes apply, even
   if `body.m-on` somehow leaks. Defense-in-depth: the JS layer also guards
   against this, but the CSS shouldn't depend on JS to stay clean.
   The `:root` token block above stays outside the media query so the
   variables are always defined (harmless on desktop). */
@media (max-width: 900px) {

  /* ── Root container ───────────────────────────────────────────────────────── */
  #mobile-root {
    background: var(--m-bg);
    color: var(--m-ink);
    font-family: var(--m-sans);
    min-height: 100vh;
    /* iPhone safe area + bottom-tab clearance (BottomTabs height ~56 + 24 inset) */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Hide the desktop deck-stage when mobile is mounted. */
  body.m-on deck-stage,
  body.m-on .ds-host,
  body.m-on .ds-fixed { display: none !important; }
  body.m-on { background: var(--m-bg); overflow: auto; height: auto; }

  /* ── Top bar (sticky) ─────────────────────────────────────────────────────── */
  .m-tb {
    padding: 14px 18px;
    background: var(--m-bg);
    border-bottom: 1px solid var(--m-line);
    position: sticky; top: 0; z-index: 5;
  }
  .m-tb-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--m-muted); margin-bottom: 6px;
    font-family: var(--m-sans);
    cursor: pointer; user-select: none;
    padding: 4px 8px 4px 0; margin-left: -2px;
    -webkit-tap-highlight-color: rgba(15,23,42,.08);
  }
  .m-tb-back:active { color: var(--m-ink); }
  .m-tb-back svg { width: 14px; height: 14px; }
  .m-tb-back i {
    font-family: var(--m-serif); font-style: italic; font-size: 12.5px;
    font-weight: 400;
  }
  .m-tb-row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  }
  .m-tb h1 {
    margin: 0;
    font-family: var(--m-serif); font-weight: 400; font-size: 30px;
    letter-spacing: -.025em; line-height: 1.05; color: var(--m-ink);
  }
  .m-tb p {
    margin: 5px 0 0;
    font-family: var(--m-sans); font-size: 12.5px; color: var(--m-muted);
    line-height: 1.4; max-width: 300px;
  }

  /* ── Status banner ────────────────────────────────────────────────────────── */
  .m-sb {
    margin: 14px 16px 0; padding: 14px 14px 16px;
    background: var(--m-card); border: 1px solid var(--m-line); border-radius: 6px;
  }
  .m-sb-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
  .m-sb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .m-sb-dot.live  { background: var(--m-green); }
  .m-sb-dot.attn  { background: var(--m-amber); }
  .m-sb-dot.setup { background: var(--m-ink3); }
  /* `error` mirrors the other dots; rose signals a load failure so the
     "error" pill next to it isn't carrying the whole visual weight. */
  .m-sb-dot.error { background: var(--m-rose); }
  .m-sb-meta {
    font-family: var(--m-mono); font-size: 10px; color: var(--m-mute2);
    margin-left: auto;
  }
  .m-sb-title {
    font-family: var(--m-serif); font-size: 18px; font-weight: 500;
    line-height: 1.25; letter-spacing: -.015em; color: var(--m-ink);
  }
  .m-sb-sub {
    font-family: var(--m-sans); font-size: 12px; color: var(--m-muted);
    line-height: 1.4; margin-top: 4px;
  }
  .m-kpis {
    display: grid; gap: 8px; margin-top: 14px;
    padding-top: 12px; border-top: 1px solid var(--m-line2);
  }
  .m-kpi { padding-left: 10px; border-left: 1px solid var(--m-line2); }
  .m-kpi:first-child { padding-left: 0; border-left: none; }
  .m-kpi .v {
    font-family: var(--m-serif); font-size: 22px; font-weight: 400;
    letter-spacing: -.02em; color: var(--m-ink); font-variant-numeric: oldstyle-nums;
  }
  .m-kpi .l {
    font-family: var(--m-serif); font-style: italic; font-size: 10.5px;
    color: var(--m-muted); margin-top: 1px;
  }
  .m-kpi .t   { font-family: var(--m-mono); font-size: 9px; margin-top: 2px; }
  .m-kpi .t.up   { color: var(--m-green); }
  .m-kpi .t.down { color: var(--m-rose); }

  /* ── Pills + tags ─────────────────────────────────────────────────────────── */
  .m-pill {
    font-family: var(--m-mono); text-transform: lowercase; letter-spacing: .04em;
    font-size: 10px; font-weight: 500;
  }
  .m-pill.ok   { color: var(--m-green); }
  .m-pill.cr   { color: var(--m-rose); }
  .m-pill.hi   { color: var(--m-amber); }
  .m-pill.lo   { color: var(--m-mute2); }
  .m-pill.info { color: var(--m-blue); }
  .m-tag {
    font-family: var(--m-mono); text-transform: lowercase; font-size: 9.5px;
    font-weight: 500; border: 1px solid var(--m-line); color: var(--m-muted);
    padding: 2px 6px; border-radius: 99px;
  }

  /* ── Section head + hairline ──────────────────────────────────────────────── */
  .m-sec {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 18px 20px 10px;
  }
  .m-sec-l {
    font-family: var(--m-serif); font-style: italic; font-size: 13px;
    color: var(--m-ink);
  }
  .m-sec-r { font-family: var(--m-sans); font-size: 11px; color: var(--m-muted); }
  .m-hr { height: 1px; background: var(--m-line); margin: 0 20px; }

  /* ── Generic list rows ────────────────────────────────────────────────────── */
  .m-rows { padding: 0 16px; }
  .m-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 6px;
    border-bottom: 1px solid var(--m-line2);
  }
  .m-row:last-child { border-bottom: none; }
  .m-row.dim { opacity: .7; }
  /* Tappable affordance — any row wired to a route/href/handler shows the
     hand cursor + tap-highlight so the user knows it's interactive. Rows
     without any of these attrs are static (informational only). */
  .m-row[data-route],
  .m-row[data-href],
  .m-row[data-channel],
  .m-row[data-integration],
  .m-row[data-action],
  .m-row[data-go] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(15, 23, 42, .06);
  }
  .m-row[data-route]:active,
  .m-row[data-href]:active,
  .m-row[data-channel]:active,
  .m-row[data-integration]:active,
  .m-row[data-action]:active,
  .m-row[data-go]:active {
    background: var(--m-subtle);
  }
  .m-row .ico {
    width: 38px; height: 38px; border-radius: 6px;
    background: var(--m-card); border: 1px solid var(--m-line);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-family: var(--m-serif); font-size: 14px; font-weight: 500; color: var(--m-ink);
  }
  .m-row .ico svg { width: 18px; height: 18px; stroke: var(--m-muted); fill: none;
    stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
  .m-row .body { flex: 1; min-width: 0; }
  .m-row .body .t {
    font-family: var(--m-serif); font-size: 15px; font-weight: 500;
    letter-spacing: -.01em; color: var(--m-ink); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-row .body .s {
    font-family: var(--m-sans); font-size: 11.5px; color: var(--m-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-row .body .s.mono { font-family: var(--m-mono); font-size: 10px; }
  .m-row .right { text-align: right; flex-shrink: 0; }
  .m-row .right .num { font-family: var(--m-mono); font-size: 12px; color: var(--m-ink2); }
  .m-row .right .sub { font-family: var(--m-mono); font-size: 10px; color: var(--m-green); margin-top: 1px; }
  .m-row .chev {
    flex-shrink: 0; color: var(--m-mute2); width: 8px; height: 14px;
  }
  .m-row .chev path { stroke: currentColor; stroke-width: 1.6; fill: none; }

  /* Headed (no ico, just headline + meta) */
  .m-row-h .body .t { font-family: var(--m-serif); font-size: 14.5px; font-weight: 500;
    color: var(--m-ink); }
  .m-row-h .body .s { font-family: var(--m-mono); font-size: 10px; color: var(--m-mute2); }

  /* Browse-grid (2-col) */
  .m-grid2 { padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .m-grid2 .cell {
    padding: 12px; background: var(--m-card); border: 1px solid var(--m-line);
    border-radius: 6px; display: flex; align-items: center; gap: 9px;
  }
  .m-grid2 .cell .av {
    width: 28px; height: 28px; border-radius: 5px; background: var(--m-subtle);
    border: 1px solid var(--m-line); display: flex; align-items: center;
    justify-content: center; font-family: var(--m-serif); font-size: 12px;
    font-weight: 500; color: var(--m-muted);
  }
  .m-grid2 .cell .label {
    font-family: var(--m-serif); font-size: 13px; font-weight: 500;
    color: var(--m-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ── Buttons ──────────────────────────────────────────────────────────────── */
  /* WCAG 2.5.5 floor — every variant ships ≥ 44×44 CSS px so a thumb can
     land on it without truncation. .sm keeps its tighter visual density
     (font-size 11px) but its vertical padding bumps to 10px so the
     min-height holds. Don't drop below this without an a11y review. */
  .m-btn {
    appearance: none; -webkit-appearance: none;
    font-family: var(--m-sans); font-size: 13px; font-weight: 500;
    padding: 12px 14px; border-radius: 99px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent;
    min-height: 44px;
  }
  .m-btn.primary { background: var(--m-ink); color: #fff; }
  .m-btn.ghost   { background: transparent; color: var(--m-ink2); border-color: var(--m-line); }
  .m-btn.full    { width: 100%; }
  .m-btn.sm      { padding: 10px 14px; font-size: 11px; min-height: 44px; }

  /* ── Bottom tabs (frosted) ────────────────────────────────────────────────── */
  .m-tabs {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 8px 8px calc(24px + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--m-line);
    display: flex; justify-content: space-around;
    z-index: 10;
  }
  .m-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 8px; color: var(--m-mute2);
    font-family: var(--m-sans); font-size: 10px; font-weight: 400;
    letter-spacing: -.005em; cursor: pointer; user-select: none;
    background: none; border: none;
  }
  .m-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
  .m-tab.on  { color: var(--m-ink); font-weight: 600; }
  .m-tab.on svg { stroke-width: 2; }

  /* ── Progress dot (SVG ring) ──────────────────────────────────────────────── */
  .m-dot { display: inline-block; vertical-align: middle; }

  /* ── Sticky save bar ──────────────────────────────────────────────────────── */
  .m-save {
    position: sticky; bottom: 80px; margin-top: 20px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--m-line);
    display: flex; gap: 8px; align-items: center;
  }
  .m-save .meta {
    font-family: var(--m-serif); font-style: italic; font-size: 12px;
    color: var(--m-muted); flex: 1;
  }

  /* ── Bottom sheet (KB add) ────────────────────────────────────────────────── */
  .m-sheet-scrim {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
    z-index: 20;
  }
  .m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top-left-radius: 24px; border-top-right-radius: 24px;
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0));
    padding-top: 8px; max-height: 88vh; overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
    z-index: 21;
  }
  .m-sheet-grab {
    width: 36px; height: 4px; background: var(--m-line); border-radius: 2px;
    margin: 4px auto 16px;
  }

  /* ── Hub: progress card + chat bubble ─────────────────────────────────────── */
  .m-card {
    margin: 14px 16px 0; padding: 14px 16px;
    background: var(--m-card); border: 1px solid var(--m-line); border-radius: 6px;
  }
  .m-card .pad { padding: 14px; }
  .m-bubble-out {
    background: var(--m-subtle); padding: 8px 11px; border-radius: 14px;
    font-family: var(--m-sans); font-size: 12.5px; color: var(--m-ink);
    align-self: flex-end; margin-left: auto; max-width: 80%;
  }
  .m-bubble-in {
    background: var(--m-ink3); color: #fff; padding: 9px 12px; border-radius: 14px;
    font-family: var(--m-sans); font-size: 12.5px; line-height: 1.4;
    margin-top: 8px; max-width: 90%;
  }

  /* ── Filter chips (Inbox) ─────────────────────────────────────────────────── */
  .m-chips {
    padding: 14px 16px 0; display: flex; gap: 6px;
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  }
  .m-chips::-webkit-scrollbar { display: none; }
  .m-chip {
    padding: 7px 12px; background: transparent; color: var(--m-ink2);
    border: 1px solid var(--m-line); border-radius: 99px;
    font-family: var(--m-sans); font-size: 12px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer;
  }
  .m-chip .n { font-family: var(--m-mono); font-size: 10px; color: var(--m-mute2); }
  .m-chip.on { background: var(--m-ink); color: #fff; border-color: var(--m-ink); }
  .m-chip.on .n { color: rgba(255, 255, 255, .7); }

  /* ── Slider (persona) ─────────────────────────────────────────────────────── */
  .m-slider {
    height: 4px; background: var(--m-line); border-radius: 2px;
    position: relative; margin-top: 6px;
  }
  .m-slider .fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--m-ink); border-radius: 2px;
  }
  .m-slider .knob {
    position: absolute; top: -5px; width: 14px; height: 14px;
    background: #fff; border: 2px solid var(--m-ink); border-radius: 50%;
    transform: translateX(-50%);
  }

  /* ── Badge "!" / "✓" boxes (rules) ────────────────────────────────────────── */
  .m-badge {
    width: 18px; height: 18px; border-radius: 4px;
    font-family: var(--m-sans); font-weight: 700; font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
  }
  .m-badge.danger { background: #fee2e2; color: #b91c1c; }
  .m-badge.ok     { background: var(--green-bg, #ecfdf5); color: var(--green-d, #047857); font-size: 11px; }

  /* ── Hub hero (h1 with em) ────────────────────────────────────────────────── */
  .m-hero { padding: 18px 20px 10px; }
  .m-hero .kicker {
    font-family: var(--m-mono); font-size: 10px; color: var(--m-mute2);
    letter-spacing: .08em; text-transform: lowercase; margin-bottom: 4px;
  }
  .m-hero h1 {
    margin: 0; font-family: var(--m-serif); font-weight: 400; font-size: 34px;
    letter-spacing: -.025em; line-height: 1.02; color: var(--m-ink);
  }
  .m-hero h1 em { font-style: italic; font-weight: 400; }

  /* Compact hero for checklist */
  .m-hero-c { padding: 14px 20px 0; }
  .m-hero-c .kicker {
    font-family: var(--m-mono); font-size: 10px; color: var(--m-mute2);
    letter-spacing: .08em; text-transform: lowercase; margin-bottom: 4px;
  }
  .m-hero-c h1 {
    margin: 0; font-family: var(--m-serif); font-weight: 400; font-size: 30px;
    letter-spacing: -.025em; line-height: 1.05; color: var(--m-ink);
  }
  .m-hero-c h1 em { font-style: italic; }
  .m-hero-c p {
    margin: 6px 0 0; font-family: var(--m-sans); font-size: 13px;
    color: var(--m-muted); line-height: 1.4;
  }

  /* Big progress bar (checklist) */
  .m-pbar {
    margin: 16px 20px 0; height: 4px; background: var(--m-line);
    border-radius: 2px; position: relative;
  }
  .m-pbar .fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--m-ink); border-radius: 2px;
  }

  /* Active step card (checklist) */
  .m-step {
    margin: 18px 16px 14px; padding: 18px 18px 16px;
    background: var(--m-card); border: 1px solid var(--m-ink); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  }
  .m-step textarea {
    width: 100%; box-sizing: border-box; min-height: 80px; padding: 10px 12px;
    border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-bg);
    font-family: var(--m-sans); font-size: 13px; color: var(--m-ink); line-height: 1.5;
    resize: none;
  }

  /* Path checkboxes (checklist) */
  .m-chk-circle {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--m-line); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
  }
  .m-chk-circle.done { background: var(--m-green); border-color: var(--m-green); }
  .m-chk-circle.active { border-color: var(--m-ink); }
  .m-chk-circle .pip {
    width: 6px; height: 6px; border-radius: 50%; background: var(--m-ink);
  }

  /* Hero on Continue-on-desktop */
  .m-hero-icon {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 8px;
    background: var(--m-subtle); border: 1px solid var(--m-line);
    display: flex; align-items: center; justify-content: center;
  }
  .m-hero-icon svg { width: 30px; height: 30px; fill: none;
    stroke: var(--m-ink2); stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
  .m-hero-card {
    margin: 24px 16px 0; padding: 24px 22px;
    background: var(--m-card); border: 1px solid var(--m-line); border-radius: 8px;
  }
  .m-hero-card h2 {
    margin: 0; font-family: var(--m-serif); font-weight: 400; font-size: 22px;
    letter-spacing: -.02em; color: var(--m-ink); text-align: center; line-height: 1.15;
  }
  .m-hero-card p {
    margin: 10px 0 0; font-family: var(--m-sans); font-size: 13px;
    color: var(--m-muted); line-height: 1.5; text-align: center;
  }
  .m-hero-card .actions { display: flex; gap: 8px; margin-top: 20px; flex-direction: column; }

  /* Tone anchor segmented control (Persona) */
  .m-tones { display: flex; gap: 6px; flex-wrap: wrap; }
  .m-tone-pill {
    padding: 7px 12px; background: transparent; color: var(--m-ink2);
    border: 1px solid var(--m-line); border-radius: 99px;
    font-family: var(--m-sans); font-size: 12px; font-weight: 500; cursor: pointer;
  }
  .m-tone-pill.on { background: var(--m-ink); color: #fff; border-color: var(--m-ink); }

  /* Slider label row */
  .m-slabel {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px;
  }
  .m-slabel .l {
    font-family: var(--m-mono); font-size: 9px; color: var(--m-mute2);
    letter-spacing: .08em; text-transform: uppercase;
  }
  .m-slabel .v { font-family: var(--m-mono); font-size: 11px; color: var(--m-ink); }

  /* Identity card ("Blai" big serif) for PersonaLive */
  .m-id-card {
    margin: 14px 16px 0; padding: 18px;
    background: var(--m-card); border: 1px solid var(--m-line); border-radius: 6px;
  }
  .m-id-card h2 {
    margin: 0; font-family: var(--m-serif); font-weight: 400; font-size: 32px;
    letter-spacing: -.025em; color: var(--m-ink); line-height: 1.05; margin-bottom: 6px;
  }
  .m-id-card .desc {
    font-family: var(--m-serif); font-style: italic; font-size: 14.5px;
    color: var(--m-muted); line-height: 1.4; margin-bottom: 14px;
  }
  .m-id-card .quote {
    padding: 12px 14px; background: var(--m-subtle); border-radius: 4px;
    font-family: var(--m-serif); font-size: 13.5px; color: var(--m-ink2);
    line-height: 1.5;
  }

  /* ── Error fallback (used by mobile-app.js so it doesn't have to inline-style) ─ */
  .m-error-fallback {
    padding: 40px 24px;
    font-family: var(--m-serif);
    font-size: 16px;
    color: var(--m-ink2);
  }

  /* ── Round letter avatar ──────────────────────────────────────────────────────
     Used for Contacts / Team / Me list rows. Mirrors `.ico` (square chip)
     but circular so a person glyph is visually distinct from an action chip.
     Default 36×36 matches the inline pattern previously used; .sm / .lg
     mirror the other inline patterns (28 in Contacts before Slice D,
     54 in Me). Letter is serif to match the design's voice. */
  .m-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--m-subtle);
    border: 1px solid var(--m-line);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: var(--m-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--m-ink);
  }
  .m-avatar.sm { width: 28px; height: 28px; font-size: 12px; }
  .m-avatar.lg { width: 54px; height: 54px; font-size: 24px; }

  /* ── Sparse "what you can do here" list ───────────────────────────────────
     Studio + ContinueDesktop list non-interactive capabilities as bullet
     items. Using `.m-row.dim` previously made them LOOK tappable (row
     affordance, chevron-shaped padding) but they had no handlers — a
     classic dead-tap footgun. .m-cando renders the same icon+label pair
     as a sparse <ul> with no row chrome, so the affordance matches
     reality. */
  .m-cando {
    list-style: none;
    margin: 0;
    padding: 0 16px;
  }
  .m-cando li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--m-line2);
    color: var(--m-ink);
  }
  .m-cando li:last-child { border-bottom: none; }
  .m-cando li svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    stroke: var(--m-muted);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }
  .m-cando li .label {
    flex: 1;
    font-family: var(--m-serif);
    font-size: 14px;
    color: var(--m-ink);
  }
}