/* The portal on a computer (≥1024px): sidebar, a top bar with one search box
   for everything, and the page. Same Apple grammar and tokens as app.css;
   macOS density. The phone app is untouched by this file. */

/* ── Frame ────────────────────────────────────────────────────────────────── */
.portal { --side-w: 232px; --top-h: 56px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100dvh; overflow: hidden; }
.portal__main { display: grid; grid-template-rows: var(--top-h) minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--bg); }
.page { min-width: 0; min-height: 0; overflow: auto; }
.page--split { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); overflow: hidden; }
.page--flush { overflow: hidden; background: var(--thread); }
.portal .column { height: 100%; }
.portal .assist--wide { height: 100%; }
.portal .solo { padding-top: 28px; }

/* Sidebar additions: the person at the bottom opens a menu. */
.side__foot { margin-top: auto; padding-top: 10px; }
.portal .side__me { width: 100%; margin: 0; border: 0; background: none; font: inherit; text-align: left; }
.portal .side__me > .icon { margin-left: auto; color: var(--label-2); }
.side__ext { color: var(--label-3); }
.portal .side__nav { gap: 1px; }
.portal .side__section { padding-top: 14px; }

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar { position: relative; z-index: 50;   /* above the open ticket (.dpanel, 40): the search's list must not slide under it */ display: flex; align-items: center; gap: 16px; padding: 0 20px 0 24px; background: var(--bg); box-shadow: inset 0 -.5px 0 var(--sep); }
.topbar__end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar .btn--md { height: 32px; padding: 0 13px; border-radius: 8px; font-size: 13.5px; }

/* One search box for everything. */
.gs { position: relative; flex: 1; max-width: 580px; }
.gs__field { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 10px; border-radius: 9px; background: var(--fill); color: var(--label-2); transition: box-shadow .15s, background-color .15s; }
.gs__field:focus-within { background: var(--cell); box-shadow: 0 0 0 .5px var(--sep-strong), 0 0 0 4px color-mix(in srgb, var(--tint) 22%, transparent); }
.gs__field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--label); font-size: 13.5px; -webkit-appearance: none; appearance: none; }
.gs__field input::placeholder { color: var(--placeholder); }
.gs__field input::-webkit-search-cancel-button { display: none; }
.gs__kbd, kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 5px; background: var(--cell); box-shadow: inset 0 -1px 0 var(--sep), 0 0 0 .5px var(--sep); color: var(--label-2); font: 500 11px/16px var(--font); text-align: center; letter-spacing: 0; }
.gs__field:focus-within .gs__kbd { opacity: 0; }
.gs__spin { width: 14px; height: 14px; margin-right: 3px; border-radius: 50%; border: 2px solid var(--fill-2); border-top-color: var(--label-2); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gs__pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 560px); overflow: auto; padding: 6px; border-radius: 12px;
  background: var(--material-strong); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-pop), 0 0 0 .5px var(--material-line); transform-origin: top center; animation: pop-down .16s var(--ease-out); }
@keyframes pop-down { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.gs__head { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: .04em; }
.gs__item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--label); text-decoration: none; }
.gs__item.is-at { background: var(--tint-soft); }
.gs__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--fill); color: var(--tint-text); }
.gs__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gs__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.gs__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--label-2); }
.gs__num { margin-right: 6px; color: var(--label-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.gs__side { flex: none; display: flex; align-items: center; gap: 8px; }
.gs__badge { font-size: 12px; color: var(--label-2); }
.gs__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange-vivid); }
.gs__dot.is-on { background: var(--green-vivid); }
.gs__status { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--fill); font-size: 11.5px; font-weight: 500; color: var(--label-2); }
.gs__status.s-open { background: var(--tint-soft); color: var(--tint-text); }
.gs__status.s-resolved { background: var(--green-soft); color: var(--green); }
.gs__status.is-late { background: var(--red-soft); color: var(--red); }
.gs__empty { padding: 14px 12px; font-size: 13px; line-height: 18px; color: var(--label-2); }

/* RU / EN */
.langsw { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--fill); }
.langsw__opt { height: 26px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--label-2); font-size: 12px; font-weight: 600; letter-spacing: .02em; transition: background-color .15s, color .15s; }
.langsw__opt.is-on { background: var(--cell); color: var(--label); box-shadow: var(--shadow-thumb); }
@media (hover: hover) and (pointer: fine) { .langsw__opt:not(.is-on):hover { color: var(--label); } }

/* ── Toolbar controls ─────────────────────────────────────────────────────── */
.tbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 8px;
  background: var(--cell); box-shadow: 0 0 0 .5px var(--sep-strong), 0 1px 1px rgba(0, 0, 0, .03); color: var(--label);
  font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color .15s, transform .16s var(--ease-out); }
.tbtn:active:not(:disabled) { transform: scale(.97); }
.tbtn:disabled { opacity: .45; }
.tbtn .icon { color: var(--label-2); }
.tbtn.is-open, .tbtn.is-active { background: var(--tint-soft); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--tint) 40%, transparent); color: var(--tint-text); }
.tbtn.is-open .icon, .tbtn.is-active .icon { color: var(--tint-text); }
.tbtn__caret { margin-left: -2px; }
.tbtn__n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--tint); color: var(--on-tint); font-size: 11px; font-weight: 700; }
.tbtn--plain { background: none; box-shadow: none; }
.tbtn--tint { background: var(--tint); box-shadow: none; color: var(--on-tint); }
.tbtn--tint .icon { color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .tbtn:hover:not(:disabled):not(.tbtn--tint):not(.is-open):not(.is-active) { background: var(--cell-hover); }
  .tbtn--plain:hover:not(:disabled) { background: var(--fill) !important; }
  .tbtn--tint:hover:not(:disabled) { background: var(--tint-hover); }
}

/* Two-way switch: Доска | Список */
.seg2 { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill); }
.seg2__opt { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--label-2); font-size: 13px; font-weight: 500; transition: background-color .15s, color .15s; }
.seg2__opt.is-on { background: var(--cell); color: var(--label); box-shadow: var(--shadow-thumb); }
@media (hover: hover) and (pointer: fine) { .seg2__opt:not(.is-on):hover { color: var(--label); } }

/* Small lists and panels under a button */
.pop { position: relative; }
.pop__list, .pop__panel { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; margin: 0; padding: 5px; list-style: none; border-radius: 11px;
  background: var(--material-strong); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-pop), 0 0 0 .5px var(--material-line); transform-origin: top left; animation: pop-down .15s var(--ease-out); }
.pop__list { min-width: 200px; max-height: 340px; overflow: auto; }
.pop--up .pop__list { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; animation-name: pop-up; }
@keyframes pop-up { from { opacity: 0; transform: translateY(4px) scale(.985); } }
.pop__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 30px; padding: 5px 10px; border: 0; border-radius: 7px; background: none; color: var(--label); font-size: 13px; text-align: left; }
.pop__opt.is-on { font-weight: 600; }
.pop__opt .icon { color: var(--tint-text); }
@media (hover: hover) and (pointer: fine) { .pop__opt:hover { background: var(--tint-soft); } }
.pop__none { padding: 8px 10px; font-size: 13px; color: var(--label-2); }
.pop__panel { left: auto; right: 0; display: grid; gap: 10px; width: 280px; padding: 12px; transform-origin: top right; }
.pop__field { display: grid; gap: 4px; }
.pop__field > span { font-size: 12px; font-weight: 500; color: var(--label-2); }
.pop__field select { height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--fill); color: var(--label); font-size: 13px; }
.pop__actions { display: flex; justify-content: space-between; margin-top: 2px; }

/* ── Tickets page ─────────────────────────────────────────────────────────── */
.tpage { position: relative; height: 100%; overflow: hidden; }
.tickets { display: flex; flex-direction: column; height: 100%; padding: 18px 24px 0; }
.tickets__head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 14px; }
.tickets__titles { min-width: 0; }
.tickets__title { font-size: var(--fs-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: -.015em; }
.tickets__sub { display: flex; align-items: center; gap: 6px; min-height: 20px; margin-top: 1px; font-size: 13px; color: var(--label-2); }
.tickets__dot { color: var(--label-3); }
.tickets__late { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 0; border-radius: 11px; background: none; color: var(--red); font: inherit; font-weight: 600; }
.tickets__late.is-on { background: var(--red-soft); }
@media (hover: hover) and (pointer: fine) { .tickets__late:hover { background: var(--red-soft); } }
.tickets__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tickets__search { width: 220px; }
.tickets__search .search { height: 30px; border-radius: 8px; background: var(--cell); box-shadow: 0 0 0 .5px var(--sep-strong); }
.tickets__search .search input { font-size: 13px; }
.tickets__keys { flex: none; padding: 10px 0 14px; font-size: 12px; color: var(--label-2); }
.tickets .list-foot { flex: none; padding: 8px 0 0; font-size: 12.5px; color: var(--label-2); }
.tickets > .errnote, .tickets > .notice { flex: none; }

/* Board */
.kanban { --min: 236px; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(var(--min), 1fr)); grid-template-rows: minmax(0, 1fr);
  align-items: start; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; margin: -2px -2px 0; }
@media (max-width: 1320px) { .kanban { --min: 200px; } }
.kcol { display: flex; flex-direction: column; max-height: 100%; min-height: 0; min-width: 0; border-radius: 14px; transition: background-color .15s; }
.kcol__title { flex: none; display: flex; align-items: center; gap: 7px; min-height: 26px; margin: 0 6px 8px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.kcol__title .icon { color: var(--tint-text); }
.kcol__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcol__n { font-size: 12.5px; font-weight: 500; color: var(--label-2); font-variant-numeric: tabular-nums; }
.kcol__body { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 1px 2px 12px; }
.kcol__empty { padding: 14px 10px; border-radius: 12px; border: 1px dashed var(--sep); font-size: 13px; color: var(--label-2); text-align: center; }
.kcol__hint { order: -1; padding: 10px; border-radius: 11px; border: 1.5px dashed color-mix(in srgb, var(--tint) 55%, transparent); color: var(--tint-text); font-size: 12.5px; font-weight: 500; text-align: center; }
.kcol.is-target { background: color-mix(in srgb, var(--tint) 5%, transparent); }
.kcol.is-over { background: var(--tint-soft); }
.kanban.is-dragging .kcol:not(.is-target):not(:has(.is-lifted)) { opacity: .6; }

.kcard { position: relative; display: grid; gap: 3px; padding: 9px 11px 9px; border-radius: 11px; background: var(--cell);
  box-shadow: 0 0 0 .5px var(--sep), 0 1px 2px rgba(0, 0, 0, .04); transition: box-shadow .15s, opacity .15s, transform .16s var(--ease-out); }
.kcard[draggable="true"] { cursor: grab; }
.kcard[draggable="true"]:active { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .kcard:hover { box-shadow: 0 0 0 .5px var(--sep-strong), 0 4px 14px rgba(0, 0, 0, .08); } }
.kcard.is-selected { box-shadow: 0 0 0 2px var(--tint), 0 4px 14px rgba(0, 0, 0, .06); }
.kcard.is-lifted { opacity: .4; }
.kcard.is-finished .kcard__what, .kcard.is-finished .kcard__who { color: var(--label-2); }
.kcard__top { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 11.5px; color: var(--label-2); }
.kcard__num { font-variant-numeric: tabular-nums; font-weight: 500; }
.kcard__reply { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 600; }
.kcard__age { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-variant-numeric: tabular-nums; }
.kcard__age.is-late { color: var(--red); font-weight: 600; }
.kcard__link { display: grid; gap: 1px; color: inherit; text-decoration: none; }
.kcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }        /* the whole card opens it */
.kcard__link:focus-visible { outline: none; }
.kcard__link:focus-visible::after { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 55%, transparent); }
.kcard__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--label); }
.kcard__who.is-team { color: var(--label-2); font-weight: 500; }
.kcard__what { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 18px; color: var(--label); overflow-wrap: anywhere; }
.kcard__flag { display: inline-block; margin-right: 4px; color: var(--orange-vivid); vertical-align: -1px; }
.kcard__flag svg { fill: currentColor; }
.kcard__status { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--label-2); }
.kcard__foot { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 22px; margin-top: 3px; font-size: 12px; color: var(--label-2); }
.kcard__chip, .kcard__owner { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.kcard__owner { gap: 5px; color: var(--label); }
.kcard__from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard__owner { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kcard .kcard__take { margin-left: auto; height: 24px; min-width: 0; padding: 0 11px; font-size: 12.5px; }

/* List */
.tl { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 16px; padding: 2px 2px 96px; margin: -2px -2px 0; }
.tl--empty { place-items: center; padding-top: 40px; font-size: 14px; color: var(--label-2); }
.tl__group { border-radius: 12px; background: var(--cell); box-shadow: 0 0 0 .5px var(--sep); }
.tl__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tl__caption { padding: 11px 14px 7px; text-align: left; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.tl__caption > * { vertical-align: middle; }
.tl__caption .avatar, .tl__caption .kcol__n { margin-left: 7px; }
.tl__caption .avatar:first-child { margin: 0 7px 0 0; }
.tl__th { position: sticky; top: 0; z-index: 1; padding: 6px 10px; background: var(--cell); box-shadow: inset 0 -.5px 0 var(--sep); text-align: left; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--label-2); }
.tl__sort { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.tl__sort.is-on { color: var(--label); }
.tl__arrow { min-width: 8px; }
.tl__row { cursor: pointer; transition: background-color .12s; }
.tl__td { padding: 8px 10px; vertical-align: middle; white-space: nowrap; box-shadow: inset 0 -.5px 0 var(--sep); }
.tl__row:last-child .tl__td { box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .tl__row:hover { background: var(--cell-hover); } }
.tl__row.is-picked { background: color-mix(in srgb, var(--tint) 7%, transparent); }
.tl__row.is-selected { background: var(--tint-soft); }
.tl__row.is-finished .tl__link { color: var(--label-2); }
.tl__th--pick, .tl__td--pick { width: 34px; padding-left: 14px; padding-right: 4px; }
.tl__check { width: 15px; height: 15px; margin: 0; accent-color: var(--tint); vertical-align: middle; cursor: pointer; }
.tl__td--num { width: 1%; color: var(--label-2); font-variant-numeric: tabular-nums; }
.tl__td--subject { width: 40%; min-width: 240px; max-width: 520px; white-space: normal; }
.tl__link { display: block; color: var(--label); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.tl__who { display: block; margin-top: 1px; font-size: 12px; color: var(--label-2); }
.tl__reply { margin-left: 8px; color: var(--green); font-weight: 600; }
.tl__reply::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--tint-dot); vertical-align: 1px; }
.tl__dept { display: inline-flex; align-items: center; gap: 5px; }
.tl__dept .icon { color: var(--label-2); }
.tl__muted { color: var(--label-3); }
.tl__td--age { color: var(--label-2); font-variant-numeric: tabular-nums; }
.tl__td--age.is-late { color: var(--red); font-weight: 600; }
.tl__td--age .icon { display: inline-block; margin-right: 3px; vertical-align: -1px; }
.tstat { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--fill); color: var(--label); font-size: 12px; font-weight: 500; }
.tstat.s-open { background: var(--tint-soft); color: var(--tint-text); }
.tstat.s-waiting_merchant, .tstat.s-closed { color: var(--label-2); }
.tstat.s-resolved { background: var(--green-soft); color: var(--green); }
.tprio { font-size: 12.5px; color: var(--label-2); }
.tprio.p-urgent { color: var(--orange); font-weight: 600; }
.tprio.p-high { color: var(--label); font-weight: 600; }
.tprio.p-low { color: var(--label-3); }

/* Several at once: a floating bar at the bottom of the page; it wraps rather
   than run off a narrow window. */
.bulk { position: absolute; z-index: 35; left: 16px; right: 16px; bottom: 18px; width: fit-content; margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 14px;
  background: var(--material-strong); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-pop), 0 0 0 .5px var(--material-line); animation: bulk-in .22s var(--ease-out); white-space: nowrap; }
@keyframes bulk-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.bulk__n { margin-right: 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bulk .tbtn { box-shadow: none; background: var(--fill); }
.bulk .tbtn.tbtn--plain { background: none; }
/* With a ticket open on a wide screen the page makes room for it, so the
   tools, the board and the bar stay in reach; narrower, the ticket lays over it. */
@media (min-width: 1280px) {
  .tpage.has-panel .tickets { padding-right: calc(min(620px, 50vw) + 20px); }
  .tpage.has-panel .bulk { right: calc(min(620px, 50vw) + 16px); }
}

/* ── The open ticket on the right ─────────────────────────────────────────── */
.portal .dpanel { top: var(--top-h); width: min(620px, 50vw); }
.dpanel__num { font-size: 13px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }

/* Subject, state, actions and the merchant stay in view; the conversation scrolls. */
.dpanel__top { flex: none; padding-bottom: 12px; box-shadow: inset 0 -.5px 0 var(--sep); }
.dpanel__top .dpanel__head { padding: 16px 24px 12px; }
.dpanel__top + .dpanel__scroll { padding-top: 10px; }

/* The merchant at a glance */
.mbox { margin: 0 24px; padding: 12px 14px; border-radius: 12px; background: var(--fill); }
.mbox.is-folded { padding: 8px 10px 8px 12px; }
.mbox__fold { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border: 0; border-radius: 8px; background: none; color: var(--label-2); transition: transform .2s var(--ease-out), background-color .15s; }
.mbox.is-folded .mbox__fold { transform: rotate(-90deg); }
@media (hover: hover) and (pointer: fine) { .mbox__fold:hover { background: var(--fill); color: var(--label); } }
.mbox__brief { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--label-2); }
.mbox.is-folded .mbox__name { flex: none; max-width: 45%; font-size: 14px; }
.mbox__tg { color: var(--label-2); font-size: 12px; }
.mbox--team { display: flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 13px; color: var(--label-2); }
.mbox__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mbox__id { flex: 1; min-width: 0; }
.mbox__name { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: var(--label); text-decoration: none; }
.mbox__name .icon { color: var(--label-3); }
@media (hover: hover) and (pointer: fine) { .mbox__name:hover { color: var(--tint-text); } }
.mbox__codes { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; font-size: 12px; color: var(--label-2); }
.mbox__code { padding: 1px 6px; border: 0; border-radius: 6px; background: var(--cell); color: var(--label); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: copy; }
.mbox__line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; font-size: 13px; }
.mbox__line a { display: inline-flex; align-items: center; gap: 4px; color: var(--tint-text); text-decoration: none; }
.mbox__line--quiet { margin-top: 3px; font-size: 12px; color: var(--label-2); }
.mbox__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.mbox__warn { grid-column: 1 / 4; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 9px; background: var(--orange-soft); color: var(--orange); font-size: 12.5px; line-height: 16px; }
.mstat { display: grid; gap: 1px; min-width: 0; padding: 7px 9px; border-radius: 9px; background: var(--cell); color: var(--label); text-decoration: none; }
.mstat__label { font-size: 11px; color: var(--label-2); }
.mstat__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mstat__wait { display: inline-block; width: 44px; height: 10px; border-radius: 5px; background: var(--fill-2); animation: wait 1.2s ease-in-out infinite; }
@keyframes wait { 50% { opacity: .45; } }
a.mstat { transition: background-color .15s; }
@media (hover: hover) and (pointer: fine) { a.mstat:hover { background: var(--cell-hover); } }

/* The new-ticket sheet's merchant search */
.pick__hint { padding: 2px 16px 12px; font-size: 13px; color: var(--label-2); }

@media (prefers-reduced-motion: reduce) {
  .gs__pop, .pop__list, .pop__panel, .bulk { animation-name: fade-in !important; animation-duration: .15s !important; }
  .gs__spin, .mstat__wait { animation: none !important; }
  .tbtn:active, .kcard { transform: none !important; }
}

/* ── Merchants, a merchant, Clover Live ───────────────────────────────────── */
.mt, .mp { padding: 18px 24px 40px; }
.page--form { overflow: hidden; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 14px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 14px; background: var(--fill); color: var(--label); font-size: 13px; font-weight: 500; transition: background-color .15s; }
.fchip.is-on { background: var(--label); color: var(--bg); }
.fchip__n { font-size: 12px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .fchip:not(.is-on):hover { background: var(--fill-2); } }
.mt .tl { overflow: visible; padding-bottom: 0; }
.mt__table .tl__td { padding-top: 9px; padding-bottom: 9px; }
.mt__th--name { width: 30%; }
.mt__th--num, .mt__num { text-align: right; }
.mt__th--num .tl__sort { flex-direction: row-reverse; }
.mt__name { display: flex; align-items: center; gap: 10px; min-width: 240px; white-space: normal; }
.mt__who { min-width: 0; }
.mt__who .tl__link { display: inline; }
.mt__tier { display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 7px; border-radius: 9px; background: var(--fill); color: var(--label-2); font-size: 11px; font-weight: 600; vertical-align: 1px; letter-spacing: 0; }
.mt__tier.t-vip { background: var(--tint-soft); color: var(--tint-text); }
.mt__tier.t-at_risk { background: var(--orange-soft); color: var(--orange); }
.mt__tier.t-off { background: var(--red-soft); color: var(--red); }
.mt__dot { display: inline-flex; align-items: center; gap: 6px; color: var(--label-2); }
.mt__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.mt__dot.is-on { color: var(--label); }
.mt__dot.is-on::before { background: var(--green-vivid); }
.mt__num b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.mt__num small { display: block; font-size: 11.5px; color: var(--label-2); }
.mt__tickets { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--tint-soft); color: var(--tint-text); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.mt__tg { color: var(--label-2); }
.mt__tg.is-on { color: var(--green); font-weight: 500; }
.mt__copy { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: copy; }
.mt__mid { color: var(--label-2); }
.mt__empty { padding: 28px; text-align: center; font-size: 13.5px; color: var(--label-2); }

/* A merchant */
.mp { max-width: 1320px; margin: 0 auto; }
.mp__back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 10px -4px; color: var(--tint-text); font-size: 13px; font-weight: 500; text-decoration: none; }
.mp__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.mp__titles { flex: 1; min-width: 260px; }
.mp__name { font-size: var(--fs-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: -.015em; }
.mp__name .mt__tier { height: 20px; font-size: 12px; vertical-align: 5px; }
.mp__meta { margin-top: 2px; font-size: 13px; color: var(--label-2); }
.mp__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tbtn--icon { width: 30px; padding: 0; justify-content: center; }
.mp__tabs { display: flex; gap: 2px; margin-bottom: 16px; box-shadow: inset 0 -.5px 0 var(--sep); }
.mp__tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; background: none; color: var(--label-2); font-size: 14px; font-weight: 500; }
.mp__tab.is-on { color: var(--label); font-weight: 600; }
.mp__tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--tint); }
@media (hover: hover) and (pointer: fine) { .mp__tab:not(.is-on):hover { color: var(--label); } }
.mp__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.mp__grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 1180px) { .mp__grid { grid-template-columns: minmax(0, 1fr); } }
.mp__col { display: grid; gap: 16px; min-width: 0; }
.mp__card { min-width: 0; padding: 16px 18px; border-radius: 14px; background: var(--cell); box-shadow: 0 0 0 .5px var(--sep); }
.mp__card--flush { padding: 0; overflow: hidden; }
.sales > .mp__card, .sales > .mp__grid { margin-bottom: 16px; }
.mp__cardhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mp__cardhead--pad { flex-wrap: wrap; margin: 0; padding: 12px 14px; box-shadow: inset 0 -.5px 0 var(--sep); }
.mp__cardhead .mp__h { margin: 0; }
.mp__h { margin-bottom: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.mp__total { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mp__more { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: 13px; text-decoration: none; }
.mp__note { font-size: 13px; line-height: 18px; color: var(--label-2); }
.mp__note--pad { padding: 18px; }
.mp__list { display: grid; margin: 0; padding: 0; list-style: none; }
.mp__list > li + li { box-shadow: inset 0 .5px 0 var(--sep); }
.mp__ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 9px 2px; color: var(--label); text-decoration: none; }
.mp__tnum { font-size: 12px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.mp__tsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; }
.mp__tmeta { grid-column: 2 / 4; font-size: 12px; color: var(--label-2); }
@media (hover: hover) and (pointer: fine) { .mp__ticket:hover .mp__tsub { color: var(--tint-text); } }
.tstat.is-late { background: var(--red-soft); color: var(--red); }
.mp__device { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13.5px; }
.mp__device .mt__dot::before { display: block; }
.mp__dname small { margin-left: 6px; font-size: 12px; color: var(--label-2); }
.mp__dstate { font-size: 12.5px; color: var(--label-2); }
.mp__notes { font-size: 13.5px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mp__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mp .health { margin: 0; }
.mp__chat .chat { padding: 8px 0 0; background: none; }

/* Numbers in a row */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }   /* as many as fit: a sum is never cut to «$12,843.…» */
.kpi { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 11px; background: var(--bg); }
.kpi__label { font-size: 12px; color: var(--label-2); }
.kpi__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: 12px; color: var(--label-2); }
.kpi__sub b { font-weight: 600; }

/* Label → value */
.kv { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--label-2); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv a { color: var(--tint-text); text-decoration: none; }
.kv .link { font-size: inherit; font-weight: 400; text-align: left; }

/* The card's own form */
.mp__form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mp__form .group { margin: 0 0 14px; }
.mp__form .group__body { background: var(--bg); }
.mp__form fieldset:disabled input, .mp__form fieldset:disabled select, .mp__form fieldset:disabled textarea { color: var(--label-2); }
.mp__switch { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 4px 2px 0; font-size: 13.5px; }
.mp__switch input { width: 16px; height: 16px; margin: 0; accent-color: var(--tint); }
.mp__switch small { grid-column: 2; font-size: 12px; color: var(--label-2); }
.mp__save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; margin: 14px -18px -16px; padding: 12px 18px; border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--cell) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 .5px 0 var(--sep); }
.mp__save .mp__note { margin-right: auto; }

/* Bars and shares */
.bars { margin: 4px 0 0; }
.bars__plot { display: flex; align-items: flex-end; gap: 3px; height: calc(var(--h) + 20px); padding-top: 4px; }
.bars__col { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 3px; height: 100%; padding-bottom: 20px; }
.bars__bar { display: block; width: 100%; max-width: 34px; margin: 0 auto; border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--tint) 62%, transparent); transition: background-color .12s; }
.bars__col.is-mark .bars__bar { background: var(--tint); }
.bars__col.is-zero .bars__bar { height: 2px !important; background: var(--fill-2); }
.bars__label { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--label-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars__tip { position: absolute; z-index: 3; left: 50%; bottom: calc(100% - 14px); display: none; padding: 5px 8px; border-radius: 8px; background: var(--label); color: var(--bg); font-size: 11.5px; line-height: 15px; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.bars__tip b { display: block; font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .bars__col:hover .bars__bar { background: var(--tint); }
  .bars__col:hover .bars__tip { display: block; }
}
.shares { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.shares__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13.5px; }
.shares__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.shares__value small { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--label-2); }
.shares__track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.shares__fill { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--tint) 70%, transparent); }

/* Sales */
.sales__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sales__cut { margin: 12px 0 0; }
.sales__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sales__search { width: 220px; height: 30px; border-radius: 8px; }
.sales__search input { font-size: 13px; }
.sales__filter { height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--fill); color: var(--label); font-size: 13px; }
.sales__num { text-align: right; font-variant-numeric: tabular-nums; }
.sales__row { cursor: default; }
.sales__more { display: flex; align-items: center; gap: 12px; padding: 12px 14px; box-shadow: inset 0 .5px 0 var(--sep); }

/* Clover Live */
.live__dev { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.live__dev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.live__dev.is-on::before { background: var(--green-vivid); }
.live__dev.is-some::before { background: var(--orange-vivid); }
.live__dev.is-off::before { background: var(--red-vivid); }
.mt > .mp__card { margin-bottom: 16px; }

/* ── Overview ─────────────────────────────────────────────────────────────── */
.ov { max-width: 1400px; margin: 0 auto; }
.ov__h { margin: 4px 2px 8px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.ov .kpis { margin-bottom: 16px; }
.ov .kpi { background: var(--cell); box-shadow: 0 0 0 .5px var(--sep); }
.kpi--link { color: var(--label); text-decoration: none; transition: background-color .15s, transform .16s var(--ease-out); }
.kpi--link:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .kpi--link:hover { background: var(--cell-hover); } }
.ov__chart { margin-bottom: 16px; }
.ov__legend { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--label-2); }
.ov__legend i { width: 9px; height: 9px; margin-left: 8px; border-radius: 3px; }
.ov__legend i.is-a { background: color-mix(in srgb, var(--label-2) 45%, transparent); }
.ov__legend i.is-b { background: var(--tint); }
.bars__pair { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.bars--pairs .bars__bar { flex: 1; max-width: 14px; margin: 0; }
.bars--pairs .bars__bar.is-a { background: color-mix(in srgb, var(--label-2) 40%, transparent); }
.bars--pairs .bars__bar.is-b { background: color-mix(in srgb, var(--tint) 80%, transparent); }
.ov__due { font-size: 12px; font-weight: 500; color: var(--label-2); white-space: nowrap; }
.ov__due.is-soon { color: var(--orange); }
.ov__due.is-late { color: var(--red); font-weight: 600; }
.ov__dept { display: inline-flex; align-items: center; gap: 6px; }
.ov__dept .icon { color: var(--tint-text); }
.ov .mp__grid--even { margin-bottom: 16px; }
.ov .mp__grid--even > .mp__col { align-content: start; }

/* ── Team ─────────────────────────────────────────────────────────────────── */
.team__av { position: relative; display: inline-flex; flex: none; }
.team__on { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--green-vivid); box-shadow: 0 0 0 2px var(--cell); }
.team__name { font-weight: 600; }
.team__select { height: 28px; max-width: 180px; padding: 0 6px; border: 0; border-radius: 7px; background: var(--fill); color: var(--label); font-size: 13px; }
.team__select:disabled { opacity: .6; }
.team__act { width: 1%; text-align: right; }
.team__btns { display: inline-flex; gap: 6px; }
.team__offhead { display: flex; align-items: center; gap: 7px; width: 100%; padding: 11px 14px; border: 0; background: none; color: var(--label); font-size: 14px; font-weight: 700; text-align: left; }
.team__offhead .icon { color: var(--label-2); transition: transform .2s var(--ease-out); }
.team__offhead .icon.is-closed { transform: rotate(-90deg); }
.tl__row.is-busy { opacity: .6; }
.journal__row { cursor: default; }
.journal__details { max-width: 420px; white-space: normal; color: var(--label-2); }
.mt .mp__tabs { margin-top: -2px; }
/* ── Settings and the website ─────────────────────────────────────────────── */
.st { max-width: 1040px; }
.st__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.st__grid--even { align-items: stretch; }
@media (max-width: 1180px) { .st__grid { grid-template-columns: minmax(0, 1fr); } }
.st__card { display: flex; flex-direction: column; }
.st__card .mp__cardhead { min-height: 22px; }
.st__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.st__push { margin-left: auto; }
.st__foot { margin-top: 12px; }
.st__pad { padding: 12px 14px 0; }
.st__pad .notice { margin: 0 0 12px; }
.st__center { padding: 0 28px 20px; text-align: center; }
.st__headtext { min-width: 0; }
.st__msg { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.st__msg.is-ok { color: var(--green); }
.st__msg.is-bad { color: var(--red); }
.st__badge { flex: none; display: inline-flex; align-items: center; height: 22px; margin-left: auto; padding: 0 9px; border-radius: 11px; background: var(--fill); color: var(--label-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.st__badge.is-on { background: var(--green-soft); color: var(--green); }

/* Profile */
.st__who { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.st__whotext { min-width: 0; }
.st__name { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.st__whotext .mp__note { overflow-wrap: anywhere; }
.st__line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; font-size: 13.5px; }
.st__line + .st__line { box-shadow: inset 0 .5px 0 var(--sep); }
.st__seg { flex: 0 1 320px; }

/* Where you are signed in */
.st__trow { cursor: default; }
.st__device { font-weight: 600; }
.st__here { display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 7px; border-radius: 9px; background: var(--tint-soft); color: var(--tint-text); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.st__ip { color: var(--label-2); font-variant-numeric: tabular-nums; }
.st__end { width: 1%; text-align: right; }
.st__rowmsg { display: block; margin-top: 3px; white-space: normal; }
@media (hover: hover) and (pointer: fine) { .st__trow:hover { background: none; } }

/* A status: a round icon, what we see, what it means */
.st__state { display: flex; align-items: flex-start; gap: 12px; }
.st__stateicon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.st__stateicon.is-ok { background: var(--green-soft); color: var(--green); }
.st__stateicon.is-warn { background: var(--orange-soft); color: var(--orange); }
.st__statetext { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
.st__statetext b { font-size: 14px; line-height: 19px; font-weight: 600; }

/* A labelled field on one line, and the buttons under a form */
.st__input { display: flex; align-items: center; gap: 10px; height: 34px; margin: 10px 0 6px; padding: 0 10px; border-radius: 9px; background: var(--fill); transition: box-shadow .15s, background-color .15s; }
.st__input:focus-within { background: var(--cell); box-shadow: 0 0 0 .5px var(--sep-strong), 0 0 0 4px color-mix(in srgb, var(--tint) 22%, transparent); }
.st__input:has(input[aria-invalid="true"]) { box-shadow: 0 0 0 1.5px var(--red-vivid); }
.st__input:has(input:disabled) { opacity: .55; }
.st__inlabel { flex: none; font-size: 13px; color: var(--label-2); }
.st__input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--label); font-size: 13.5px; }
.st__input input::placeholder { color: var(--placeholder); }
.st__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.st__bar .st__msg { flex: 1 1 180px; min-width: 0; }

/* Integrations */
.st__counts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; font-size: 12.5px; color: var(--label-2); }
.st__counts span { display: inline-flex; align-items: center; gap: 5px; }
.st__counts .is-ok .icon { color: var(--green); }
.st__counts .is-warn .icon { color: var(--orange); }
.st__counts .is-bad .icon { color: var(--red); }
.st__ennote { margin-top: 2px; font-size: 12px; }
.st__list { margin: 0; padding: 0; list-style: none; }
.st__check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 14px; }
.st__check + .st__check { box-shadow: inset 0 .5px 0 var(--sep); }
.st__glyph { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.st__check.is-ok .st__glyph { background: var(--green-soft); color: var(--green); }
.st__check.is-warn .st__glyph { background: var(--orange-soft); color: var(--orange); }
.st__check.is-bad .st__glyph { background: var(--red-soft); color: var(--red); }
.st__checktext { display: grid; gap: 3px; min-width: 0; font-size: 13px; line-height: 18px; }
.st__checktext > b { font-size: 14px; line-height: 20px; font-weight: 600; }
.st__detail { color: var(--label-2); overflow-wrap: anywhere; }
.st__todo { overflow-wrap: anywhere; }
.st__todo b { font-weight: 600; }
.st__checkbtns { display: flex; gap: 6px; }
.st__checked { padding: 10px 14px 12px; box-shadow: inset 0 .5px 0 var(--sep); }

/* Google Chat */
.st__saved { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 2px; padding: 9px 11px; border-radius: 10px; background: var(--orange-soft); color: var(--orange); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.st__saved .icon { margin-top: 1px; }
.st__saved.is-on { background: var(--green-soft); color: var(--green); }
.st__cats { margin-top: 14px; }
.st__catshead { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.st__catlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 6px; }
.st__catlist label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; cursor: pointer; }
.st__catlist input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--tint); }

/* The code at sign-in: the key as a picture */
.st__qr { display: grid; place-items: center; padding: 16px 16px 6px; }
.st__qr img { display: block; border-radius: 8px; background: #fff; }

/* The website: the same cards, two to a row */
.site__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1180px) { .site__grid { grid-template-columns: minmax(0, 1fr); } }
.site__setup { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.site__h2 { margin-top: 22px; }
.site__leads .tl__td { vertical-align: top; }
.site__who, .site__from { min-width: 180px; white-space: normal; }
.site__contact { white-space: normal; overflow-wrap: anywhere; }
.site__contact a { display: block; color: var(--tint-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site__contact a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Narrower desktops: the second-line columns step aside; a table that still
   does not fit scrolls sideways inside its card, not the whole page. */
@media (max-width: 1279px) {
  .mt__opt { display: none; }
  .mt .tl__group { overflow-x: auto; }
}
.ov__sub { margin: -6px 0 10px; }
.mp__scroll { overflow-x: auto; }

/* The computer's pages on a phone: one column, tables scroll in their card. */
.phone__page { min-height: 100dvh; padding-top: env(safe-area-inset-top); background: var(--bg); }
.phone__back { margin: 14px 16px 0; }
@media (max-width: 1023px) {
  .phone__page .mt, .phone__page .mp { padding: 10px 16px 32px; }
  .phone__page .tickets__head { align-items: flex-start; }
  .phone__page .tickets__tools { width: 100%; }
  .phone__page .tl__group, .phone__page .mp__card--flush { overflow-x: auto; }
  .phone__page .mp__grid, .phone__page .mp__grid--even { grid-template-columns: minmax(0, 1fr); }
}
.mp__tabs { overflow-x: auto; scrollbar-width: none; }
.mp__tabs::-webkit-scrollbar { display: none; }
.mp__tab { flex: none; }