/* ════════════════════════════════════════════════════════════════════════════
   requests-ui.css — the Requests pages of both apps (2026-10-13, the supplied
   designs). rx-* is the rep's page (app.js screenRequests), mh-* the
   manager's (requests-hub.js). Colours come from the theme's tokens, so both
   follow light and dark; each category and kind has its own hue.
   ════════════════════════════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Category and kind hues: --rx-c is the colour, used as a tint and as ink. */
.rx-t--messages, .mh-k--question { --rx-c: #A98BFF; }
.rx-t--quotes,   .mh-k--order    { --rx-c: #FB8A2E; }
.rx-t--pricing   { --rx-c: #4D9BFF; }
.rx-t--technical { --rx-c: #F2677E; }
.rx-t--samples   { --rx-c: #3FC77F; }
.rx-t--access,   .mh-k--access   { --rx-c: #F7A11A; }
.mh-k--question { --rx-c: #4D9BFF; }
:root[data-scheme="light"] .rx-t--messages { --rx-c: #6A47D6; }
:root[data-scheme="light"] :is(.rx-t--quotes, .mh-k--order) { --rx-c: #B24D00; }
:root[data-scheme="light"] :is(.rx-t--pricing, .mh-k--question) { --rx-c: #1D5FD1; }
:root[data-scheme="light"] .rx-t--technical { --rx-c: #C0264A; }
:root[data-scheme="light"] .rx-t--samples { --rx-c: #17803F; }
:root[data-scheme="light"] :is(.rx-t--access, .mh-k--access) { --rx-c: #9A5B00; }

/* Status pills */
.rx-st { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
         --s: #F7A11A; background: color-mix(in srgb, var(--s) 16%, transparent); color: var(--s); }
.rx-st--in_progress { --s: #4D9BFF; }
.rx-st--answered, .rx-st--completed, .rx-st--approved { --s: #3FC77F; }
.rx-st--closed { --s: #A3AEBD; }
.rx-st--rejected { --s: #F2677E; }
:root[data-scheme="light"] .rx-st { --s: #8A5300; }
:root[data-scheme="light"] .rx-st--in_progress { --s: #1D5FD1; }
:root[data-scheme="light"] :is(.rx-st--answered, .rx-st--completed, .rx-st--approved) { --s: #17703F; }
:root[data-scheme="light"] .rx-st--closed { --s: #4F5B6B; }
:root[data-scheme="light"] .rx-st--rejected { --s: #B42340; }
.rx-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── The rep's page ───────────────────────────────────────────────────────── */
.rx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 860px; }
.rx svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rx-head h1, .rx-dtitle h1 { margin: 0; font-size: clamp(26px, 6vw, 34px); line-height: 1.1; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.rx-head p { margin: 6px 0 0; font-size: 15.5px; color: var(--ink-subtle); }
.rx-round { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
            background: var(--e2-bg); border: 1px solid var(--hairline-strong); color: var(--ink); cursor: pointer; }
.rx-round:hover, .rx-round.is-on { background: var(--e3-bg); }
.rx-round svg { width: 22px; height: 22px; }
.rx-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 50px; border-radius: 14px;
             background: var(--e2-bg); border: 1px solid var(--hairline-strong); color: var(--ink-subtle); }
.rx-search svg { width: 18px; height: 18px; flex: none; }
.rx-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; outline: none; }

.rx-new { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 0 20px; border: 0; border-radius: 16px;
          background: linear-gradient(180deg, #FFB627, var(--accent)); color: var(--on-accent); font: inherit; font-size: 20px; font-weight: 800;
          cursor: pointer; text-align: start; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 28%, transparent); transition: transform .12s, filter .15s; }
.rx-new:hover { filter: brightness(1.04); } .rx-new:active { transform: scale(.99); }
.rx-new > span:not(.rx-new__ic) { flex: 1; }
.rx-new__ic svg { width: 30px; height: 30px; stroke-width: 2.2; }
.rx-new__go { width: 24px; height: 24px; stroke-width: 2.6; }
[dir="rtl"] .rx-new__go, [dir="rtl"] .rx-go, [dir="rtl"] .rx-note svg { transform: scaleX(-1); }
.rx-note { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
           background: var(--accent-wash); color: var(--ink); font: inherit; font-size: 14.5px; cursor: pointer; text-align: start; }
.rx-note b { color: var(--accent-ink); }
.rx-note svg { width: 18px; height: 18px; margin-inline-start: auto; color: var(--accent-ink); }

.rx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rx-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 8px 0 14px; border-radius: 14px;
           border: 1px solid var(--hairline-strong); background: var(--e2-bg); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.rx-chip svg { width: 18px; height: 18px; color: var(--ink-subtle); }
.rx-chip b { min-width: 28px; height: 30px; display: grid; place-items: center; padding: 0 8px; border-radius: 9px; background: var(--e3-bg); font-size: 14px; }
.rx-chip:hover { background: var(--e3-bg); }
.rx-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.rx-chip.is-on svg { color: currentColor; }
.rx-chip.is-on b { background: color-mix(in srgb, var(--on-accent) 16%, transparent); }

.rx-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.rx-listhead h2 { margin: 0; font-size: 21px; font-weight: 800; color: var(--ink); }
.rx-sortw { position: relative; }
.rx-sort { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink-subtle); font: inherit; font-size: 15px; cursor: pointer; padding: 8px 4px; }
.rx-sort b { color: var(--ink); font-weight: 600; }
.rx-sort svg { width: 20px; height: 20px; }
.rx-menu { position: absolute; z-index: 20; inset-inline-end: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; border-radius: 12px;
           background: linear-gradient(var(--e2-bg), var(--e2-bg)), var(--canvas); border: 1px solid var(--hairline-strong); box-shadow: 0 16px 40px var(--shadow-color); display: grid; }
.rx-menu button { text-align: start; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.rx-menu button:hover { background: var(--e3-bg); }
.rx-menu button[aria-checked="true"] { color: var(--accent-ink); font-weight: 700; }

.rx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rx-card { position: relative; width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 20px; gap: 16px; align-items: start;
           padding: 18px; border-radius: 18px; border: 1px solid var(--hairline-strong); color: var(--ink); font: inherit; text-align: start; cursor: pointer;
           background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 50%), var(--e1-bg); transition: border-color .15s, transform .12s, background-color .15s; }
.rx-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline-strong)); }
.rx-card:active { transform: scale(.995); }
.rx-card.is-unread { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.rx-ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; color: var(--rx-c);
         background: color-mix(in srgb, var(--rx-c) 20%, transparent); }
.rx-ic svg { width: 30px; height: 30px; }
.rx-body { min-width: 0; display: grid; gap: 7px; justify-items: start; }
.rx-title { font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.rx-pill { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--rx-c); background: color-mix(in srgb, var(--rx-c) 18%, transparent); }
.rx-msg { font-size: 15.5px; line-height: 1.45; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rx-when { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-subtle); }
.rx-when svg { width: 17px; height: 17px; flex: none; }
.rx-side { display: grid; justify-items: end; align-content: space-between; gap: 18px; align-self: stretch; }
.rx-count { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-subtle); font-size: 15px; }
.rx-count svg { width: 20px; height: 20px; }
.rx-go { width: 20px; height: 20px; color: var(--ink-subtle); margin-top: 6px; }
.rx-empty { margin: 0; padding: 28px 20px; border-radius: 16px; border: 1px dashed var(--hairline-strong); color: var(--ink-subtle); text-align: center; font-size: 15px; line-height: 1.5; }
.rx-empty b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16.5px; }
@media (max-width: 560px) {
  .rx-card { grid-template-columns: 48px minmax(0, 1fr) 16px; gap: 12px; padding: 14px; }
  .rx-ic { width: 48px; height: 48px; border-radius: 13px; } .rx-ic svg { width: 24px; height: 24px; }
  .rx-side { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .rx-go { grid-column: 3; grid-row: 1; }
  .rx-title { font-size: 17px; }
  .rx-chip { min-height: 44px; font-size: 14px; }
  .rx-new { min-height: 64px; font-size: 18px; }
}

/* The conversation */
.rx-dhead { display: flex; align-items: center; gap: 14px; }
.rx-dtitle { min-width: 0; }
.rx-dtitle h1 { font-size: clamp(22px, 5vw, 28px); }
.rx-dtitle p { margin: 8px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.rx-panel { border-radius: 16px; border: 1px solid var(--hairline-strong); background: var(--e1-bg); padding: 16px; }
.rx-facts { display: flex; gap: 16px; align-items: flex-start; }
.rx-facts .rx-ic { width: 52px; height: 52px; }
.rx-facts dl { flex: 1; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.rx-facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.rx-facts dd { margin: 3px 0 0; font-size: 15.5px; color: var(--ink); overflow-wrap: anywhere; }
.rx-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rx-msgb { max-width: min(560px, 88%); padding: 12px 15px; border-radius: 16px; border: 1px solid var(--hairline-strong); background: var(--e2-bg); }
.rx-msgb.is-me { justify-self: end; background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-end-end-radius: 6px; }
.rx-msgb.is-them { justify-self: start; border-end-start-radius: 6px; }
.rx-msgb__who { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-subtle); margin-bottom: 4px; }
.rx-msgb p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-sys { justify-self: center; font-size: 13.5px; color: var(--ink-subtle); padding: 4px 12px; border-radius: 999px; background: var(--wash); }
.rx-compose { display: flex; align-items: flex-end; gap: 10px; padding: 10px; border-radius: 16px; border: 1px solid var(--hairline-strong); background: var(--e1-bg); }
.rx-compose textarea { flex: 1; min-width: 0; resize: vertical; min-height: 48px; max-height: 220px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline);
                       background: var(--canvas); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.45; }
.rx-compose textarea:focus { outline: 2px solid var(--accent-focus); outline-offset: 1px; }
.rx-send { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.rx-send svg { width: 22px; height: 22px; }
[dir="rtl"] .rx-send svg { transform: scaleX(-1); }
.rx-dacts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--hairline-strong);
          background: var(--e2-bg); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.rx-btn svg { width: 18px; height: 18px; }
.rx-btn:hover { background: var(--e3-bg); }
.rx-btn--danger { color: #FF6B6B; border-color: rgba(255, 107, 107, .45); background: transparent; }
:root[data-scheme="light"] .rx-btn--danger { color: #B42340; border-color: rgba(180, 35, 64, .45); }

/* The New request sheet: a tile per category above the form. */
.rq-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.rq-cat { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--hairline-strong); background: var(--e2-bg);
          color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rq-cat svg { width: 24px; height: 24px; fill: none; stroke: var(--rx-c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rq-cat[aria-pressed="true"] { border-color: var(--rx-c); background: color-mix(in srgb, var(--rx-c) 16%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rx-c) 30%, transparent); }

/* ── The manager's page (requests-hub.js) ─────────────────────────────────── */
.mh { --mh-r: 18px; color: var(--ink); }
.mh-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 980px; }
.mh svg { flex: none; }
.mh-tabs { display: flex; gap: 6px; padding: 6px; border-radius: 16px; background: var(--e1-bg); border: 1px solid var(--hairline-strong); overflow-x: auto; }
.mh-tabbtn { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 0;
             background: none; color: var(--ink-muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mh-tabbtn b { min-width: 26px; height: 26px; display: grid; place-items: center; padding: 0 7px; border-radius: 8px; background: var(--e3-bg); color: var(--ink); font-size: 13.5px; }
.mh-tabbtn:hover { background: var(--wash); }
.mh-tabbtn.is-on { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.mh-tabbtn.is-on b { background: color-mix(in srgb, var(--on-accent) 16%, transparent); color: inherit; }

.mh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mh-tile { display: grid; justify-items: start; gap: 6px; padding: 16px; border-radius: var(--mh-r); border: 1px solid var(--hairline-strong); cursor: pointer; text-align: start;
           background: linear-gradient(160deg, color-mix(in srgb, var(--rx-c) 12%, transparent), transparent 70%), var(--e1-bg); color: var(--ink); font: inherit; transition: border-color .15s, transform .12s; }
.mh-tile:hover { border-color: color-mix(in srgb, var(--rx-c) 55%, transparent); }
.mh-tile.is-on { border-color: var(--rx-c); box-shadow: 0 0 0 1px var(--rx-c); }
.mh-tile__ic { color: var(--rx-c); display: grid; }
.mh-tile b { font-size: 34px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.mh-tile > span:last-child { font-size: 14.5px; color: var(--ink-muted); }

.mh-sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.mh-sec h2 { margin: 0; font-size: 22px; font-weight: 800; }
.mh-sortw { position: relative; }
.mh-pillbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hairline-strong);
              background: var(--e2-bg); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.mh-menu { position: absolute; z-index: 20; inset-inline-end: 0; top: calc(100% + 6px); min-width: 190px; padding: 6px; border-radius: 12px; display: grid;
           background: linear-gradient(var(--e2-bg), var(--e2-bg)), var(--canvas); border: 1px solid var(--hairline-strong); box-shadow: 0 16px 40px var(--shadow-color); }
.mh-menu button { text-align: start; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.mh-menu button:hover { background: var(--e3-bg); }
.mh-menu button[aria-checked="true"] { color: var(--accent-ink); font-weight: 700; }
.mh-link { border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 6px 2px; }

.mh-list, .mh-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mh-item { position: relative; width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) 22px; gap: 14px; align-items: center; padding: 16px 16px 16px 20px;
           border-radius: var(--mh-r); border: 1px solid var(--hairline-strong); border-inline-start: 4px solid var(--rx-c); cursor: pointer; text-align: start; color: var(--ink); font: inherit;
           background: linear-gradient(90deg, color-mix(in srgb, var(--rx-c) 9%, transparent), transparent 45%), var(--e1-bg); transition: transform .12s, border-color .15s; }
.mh-item:hover { border-color: color-mix(in srgb, var(--rx-c) 50%, var(--hairline-strong)); border-inline-start-color: var(--rx-c); }
.mh-item:active { transform: scale(.995); }
.mh-av { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; font-weight: 800; letter-spacing: .02em;
         color: var(--rx-c); background: color-mix(in srgb, var(--rx-c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--rx-c) 35%, transparent); }
.mh-av--big { width: 76px; height: 76px; font-size: 26px; }
.mh-item__b { min-width: 0; display: grid; gap: 4px; }
.mh-item__t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mh-item__t b { font-size: 17.5px; font-weight: 700; }
.mh-tag { padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--rx-c); background: color-mix(in srgb, var(--rx-c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--rx-c) 30%, transparent); }
.mh-item__s { font-size: 15px; color: var(--ink-muted); overflow-wrap: anywhere; }   /* v4.240: wraps, never cut */
.mh-item__w { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-subtle); }
.mh-go { color: var(--ink-subtle); display: grid; }
[dir="rtl"] .mh-go, [dir="rtl"] .mh-round svg { transform: scaleX(-1); }
.mh-act { display: grid; grid-template-columns: 48px minmax(0, 1fr) 12px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--e1-bg); border: 1px solid var(--hairline); }
.mh-act .mh-av { width: 48px; height: 48px; border-radius: 14px; }
.mh-act__b { min-width: 0; display: grid; gap: 2px; }
.mh-act__b b { font-size: 16px; } .mh-act__b span { font-size: 14.5px; color: var(--ink-muted); } .mh-act__b small { font-size: 13.5px; color: var(--ink-subtle); }
.mh-dot { width: 10px; height: 10px; border-radius: 50%; background: #4D9BFF; }
.mh-dot--ok { background: #3FC77F; } .mh-dot--bad { background: #F2677E; }
.mh-empty { margin: 0; padding: 24px; text-align: center; border-radius: 16px; border: 1px dashed var(--hairline-strong); color: var(--ink-subtle); font-size: 15px; }
.mh-empty b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 4px; }
.mh-empty--sm { padding: 16px; }

/* one request */
.mh-dhead { display: flex; align-items: center; gap: 14px; }
.mh-dhead h2 { margin: 0; font-size: 26px; font-weight: 800; }
.mh-dhead p { margin: 2px 0 0; font-size: 15.5px; color: var(--ink-subtle); }
.mh-round { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hairline-strong); background: var(--e2-bg); color: var(--ink); cursor: pointer; }
.mh-hero { border-radius: 20px; border: 1px solid color-mix(in srgb, var(--rx-c) 35%, var(--hairline-strong)); overflow: hidden;
           background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--rx-c) 16%, transparent), transparent 60%), var(--e1-bg); }
.mh-hero__top { display: flex; gap: 18px; align-items: center; padding: 20px; }
.mh-hero__b { min-width: 0; display: grid; gap: 4px; }
.mh-hero__t { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mh-hero__t b { font-size: 22px; font-weight: 800; }
.mh-hero__s { margin: 0; font-size: 15.5px; color: var(--ink-muted); }
.mh-hero__w { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-subtle); }
.mh-dtabs { display: flex; border-top: 1px solid var(--hairline); }
.mh-dtabs button { flex: 1; min-height: 52px; border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; }
.mh-dtabs button.is-on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.mh-box { border-radius: var(--mh-r); border: 1px solid var(--hairline-strong); background: var(--e1-bg); padding: 16px 18px; display: grid; gap: 12px; }
.mh-box h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }
.mh-box h3 svg { color: var(--accent-ink); }
.mh-dl { margin: 0; border-radius: 12px; background: var(--e2-bg); padding: 4px 16px; }
.mh-row { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.mh-row:last-child { border-bottom: 0; }
.mh-row dt { font-size: 15px; color: var(--ink-subtle); } .mh-row dd { margin: 0; font-size: 15.5px; overflow-wrap: anywhere; }
.mh-quote { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--e2-bg); font-size: 15.5px; line-height: 1.5; color: var(--ink-muted); }
.mh-grant { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--e2-bg); }
.mh-grant__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--hairline-strong); color: var(--ink-muted); }
.mh-grant b { font-size: 16px; } .mh-grant p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-muted); }
.mh-time { list-style: none; margin: 0; padding: 0 0 0 18px; border-inline-start: 2px solid var(--hairline-strong); display: grid; gap: 14px; }
.mh-time li { position: relative; display: grid; gap: 2px; }
.mh-time li::before { content: ""; position: absolute; inset-inline-start: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--e3-bg); border: 2px solid var(--hairline-strong); }
.mh-time li.is-now::before { background: var(--accent); border-color: var(--accent); }
.mh-time b { font-size: 15.5px; font-weight: 600; } .mh-time span { font-size: 13.5px; color: var(--ink-subtle); }
.mh-perm { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mh-perm li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.mh-perm .is-yes svg { color: #3FC77F; } .mh-perm .is-no svg { color: #F2677E; } .mh-perm .is-no { color: var(--ink-muted); }
:root[data-scheme="light"] .mh-perm .is-yes svg { color: #17703F; } :root[data-scheme="light"] .mh-perm .is-no svg { color: #B42340; }
.mh-fine { margin: 0; font-size: 13.5px; color: var(--ink-subtle); }
.mh-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mh-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; background: var(--e2-bg); border: 1px solid var(--hairline); }
.mh-msg.is-me { justify-self: end; background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.mh-msg span { font-size: 12.5px; font-weight: 700; color: var(--ink-subtle); } .mh-msg p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mh-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-quick button, .mh-reasons button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--e2-bg); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.mh-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-reasons button[aria-checked="true"] { background: color-mix(in srgb, #F2677E 18%, transparent); border-color: #F2677E; color: var(--ink); font-weight: 700; }
.mh-lbl { font-size: 14.5px; font-weight: 600; } .mh-lbl span { color: var(--ink-subtle); font-weight: 400; }
.mh textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hairline-strong); background: var(--canvas); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.45; }
.mh textarea:focus { outline: 2px solid var(--accent-focus); outline-offset: 1px; }
.mh-bar { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0;
          background: linear-gradient(transparent, var(--canvas) 30%); }
.mh-bar--3 { grid-template-columns: 1fr 1fr 1.3fr; }
.mh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--hairline-strong);
          background: var(--e2-bg); color: var(--ink); font: inherit; font-size: 16.5px; font-weight: 700; cursor: pointer; }
.mh-btn:hover { background: var(--e3-bg); }
.mh-btn--go { background: linear-gradient(180deg, #FFB627, var(--accent)); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 26%, transparent); }
.mh-btn--go:hover { background: var(--accent-hover); }
.mh-btn--bad { background: #C9422F; border-color: #C9422F; color: #FFFFFF; }
.mh-ro { margin: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--accent-wash); color: var(--ink); font-size: 15px; }
.mh-toast { position: fixed; z-index: 60; inset-inline: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); margin: 0 auto; max-width: 520px; display: flex; align-items: center; gap: 12px;
            padding: 12px 14px 12px 18px; border-radius: 14px; background: #1E1F23; color: #F7F8F8; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); font-size: 15px; }
.mh-toast[hidden] { display: none; }
.mh-toast > span { flex: 1; min-width: 0; }
.mh-toast button { border: 0; background: none; color: #FFB627; font: inherit; font-weight: 800; cursor: pointer; padding: 6px 8px; }
.mh-toast.is-error { background: #5A1D1D; }
@media (min-width: 621px) { .mh-toast { bottom: 24px; } }
@media (max-width: 620px) {
  .mh-tiles { gap: 8px; } .mh-tile { padding: 12px; } .mh-tile b { font-size: 28px; } .mh-tile > span:last-child { font-size: 13px; }
  .mh-item { grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 12px; padding: 14px 12px 14px 14px; }
  .mh-av { width: 48px; height: 48px; font-size: 17px; } .mh-av--big { width: 60px; height: 60px; font-size: 21px; }
  .mh-hero__top { padding: 16px; gap: 14px; } .mh-hero__t b { font-size: 19px; }
  .mh-bar--3 { grid-template-columns: 1fr 1fr; } .mh-bar--3 .mh-btn--go { grid-column: 1 / -1; }
  .mh-row { grid-template-columns: minmax(90px, 36%) minmax(0, 1fr); }
}
/* the rep's chips, a little tighter on a phone */
@media (max-width: 560px) {
  .rx-chips { gap: 8px; } .rx-chip { min-height: 40px; padding: 0 6px 0 11px; gap: 7px; font-size: 14px; border-radius: 12px; }
  .rx-chip b { min-width: 24px; height: 26px; font-size: 13px; } .rx-chip svg { width: 16px; height: 16px; }
}

/* ── A phone (v4.142) ─────────────────────────────────────────────────────────
   The tabs fit the width instead of scrolling Access out of sight; the
   Approve / Reject bar and the Undo message sit above the bottom navigation
   (76 px + the safe area), not under it. */
@media (max-width: 620px) {
  /* Each tab is at least as wide as its own words (v4.172): an equal share cut
     "Questions" in half on a phone and the lit pill ended inside it. The row
     scrolls sideways only on a very narrow screen. */
  .mh-tabs { overflow-x: auto; scrollbar-width: none; gap: 3px; padding: 4px; }
  .mh-tabs::-webkit-scrollbar { display: none; }
  .mh-tabbtn { flex: 1 1 auto; min-width: max-content; padding: 0 8px; gap: 5px; font-size: 13px; white-space: nowrap; }
  .mh-tabbtn b { min-width: 22px; height: 22px; padding: 0 5px; font-size: 12px; }
  .mh-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .mh-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); }
  .mh-page { padding-bottom: 8px; }
}
.mh-item__w.is-stale { color: #F7A11A; font-weight: 600; }
:root[data-scheme="light"] .mh-item__w.is-stale { color: #8A5300; }