/* The Clients tree's Reviews (reviews.js): the panel's own head, tiles, pills, buttons and notice lines (app.css,
   gbp.css); only what the table, Connect a shop's steps and a shop's drawer add is here. Every class of the page
   carries the prefix rv-, so no rule a shared sheet gives a short name (.tr, .act, .sub) lands on it. */
[data-page="reviews"] > .rv { container-type: inline-size; }  /* the page follows the room it has, not the window's width */
.rv .ph { align-items: flex-start; } .rv .ph p { max-width: 62ch; } .rv .ph-side { padding-top: 4px; }
.rv a.primary, .rv a.btn { text-decoration: none; } .rv .primary svg.i { width: 15px; height: 15px; margin-right: -2px; }
.rv [aria-busy="true"] { opacity: .6; cursor: progress; }
.rv .stats { margin: 24px 0 0; } .rv .stat .v.rv-warn { color: var(--warn); }
.rv .gline { margin-top: 18px; } .rv .gline > div { flex: 1; min-width: 0; } .rv .gline p + p { margin-top: 6px; }
.rv .gline.rv-bad { background: var(--bad-bg); } .rv .gline.rv-bad > svg.i { color: var(--bad); }
.rv .gline.rv-said { margin-top: 10px; padding: 10px 12px; font-size: 13px; align-items: flex-start; } .rv-said > svg.i { margin-top: 2px; }
.rv-foot { color: var(--text3); font-size: 12.5px; margin: 12px 2px 0; }
.rv-quiet { color: var(--blue); font-size: 13px; font-weight: 500; text-decoration: none; } .rv-quiet:hover { text-decoration: underline; }
.rv-err { display: flex; gap: 7px; align-items: flex-start; margin: 0; max-width: 520px; color: var(--bad); font-size: 12.5px; } .rv-err svg.i { width: 14px; height: 14px; margin-top: 2px; }
.rv-hint { display: flex; gap: 8px; align-items: flex-start; max-width: 60ch; } .rv-hint svg.i { width: 14px; height: 14px; margin-top: 2px; }

/* no shop: one box and one button */
.rv-hello { display: grid; justify-items: center; gap: 6px; margin-top: 28px; padding: 44px 24px; border: 1px dashed var(--line2); border-radius: 14px; text-align: center; }
.rv-hello b { font: 600 17px var(--display); color: var(--head); } .rv-hello p { margin: 0 0 14px; max-width: 56ch; color: var(--text3); font-size: 13.5px; text-wrap: balance; }

/* Pause, a switch: amber while the shop is paused. Its reach is wider than its track, for a finger. */
.rv-sw { position: relative; z-index: 1; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line2); transition: background var(--t-fast); }
.rv-sw::before { content: ""; position: absolute; inset: -12px -6px; }
.rv-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.rv-sw[aria-checked="true"] { background: var(--amber); } .rv-sw[aria-checked="true"]::after { transform: translateX(14px); background: #1a1203; }
.rv-sw:focus-visible { border-radius: 999px; }

/* the table: a row per shop. The shop's name is the row's link, stretched over the row; the switch stands above it. */
.rv-tb { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rv-tr { position: relative; display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(170px, 1.15fr) minmax(0, 1fr) minmax(0, .9fr) 58px 66px 52px 14px; gap: 14px; align-items: center; padding: 11px 16px; font-size: 13.5px; transition: background var(--t-fast); }
.rv-tr + .rv-tr { border-top: 1px solid var(--line); }
.rv-tr:not(.rv-thead):hover { background: var(--hover); } .rv-tr[aria-current] { background: var(--sel); }
.rv-tr:has(.rv-nm a:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }
.rv-thead { padding: 10px 16px; background: var(--panel); font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.rv-cells { display: contents; } .rv-cells > span { min-width: 0; }
.rv-nm { min-width: 0; } .rv-nm a { color: inherit; text-decoration: none; } .rv-nm a::after { content: ""; position: absolute; inset: 0; } .rv-nm a:focus-visible { outline: 0; }
.rv-nm b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-nm small, .rv-why { display: block; color: var(--text3); font-size: 12.5px; }
.rv-st { min-width: 0; } .rv-why { margin-top: 3px; color: var(--warn); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rv-num { text-align: right; } .rv-pz { display: flex; }
.rv-tr > svg.i { width: 14px; height: 14px; color: var(--text3); }
.rv-gone, .rv-gone .rv-nm b { color: var(--text3); font-weight: 500; }  /* a disconnected shop: its history, in the quieter ink */
/* less room (the left sidebar open on a laptop): Complete when leaves the row; the shop's drawer holds it */
@container (max-width: 860px) {
  .rv-tr { grid-template-columns: minmax(150px, 1.4fr) minmax(140px, 1.1fr) minmax(70px, .8fr) 52px 62px 46px 14px; gap: 12px; }
  .rv-cells > span:first-child { display: none; }
}
/* narrower still (a phone): a row is the shop and its switch, its status under them, then its cells, each named */
@container (max-width: 680px) {
  .rv-thead, .rv-tr > svg.i { display: none; }
  .rv-tr { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 13px 14px; }
  .rv-st, .rv-cells { grid-column: 1 / -1; } .rv-pz { grid-area: 1 / 2; }
  .rv-cells { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text2); font-size: 13px; }
  .rv-cells > span, .rv-cells > span:first-child { display: inline-flex; gap: 5px; }
  .rv-cells > span::before { content: attr(data-l); color: var(--text3); }
}

/* fields: the key, a phone, the sending rules, a column */
.rv-field { display: grid; gap: 7px; min-width: 0; max-width: 520px; font-size: 12.5px; font-weight: 600; color: var(--text2); } .rv-field small { font-weight: 400; color: var(--text3); }
.rv-field input, .rv-line input, .rv-select select { width: 100%; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 9px; background: var(--bg); color: var(--text); font: 400 13.5px var(--sans); }
.rv-field input.rv-mono { font-family: var(--mono); font-size: 12.5px; }
.rv-field input::placeholder, .rv-line input::placeholder { color: var(--text3); }
.rv-field input:focus-visible, .rv-line input:focus-visible, .rv-select select:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.rv-field input[aria-invalid], .rv-line input[aria-invalid] { border-color: var(--bad); }
.rv-select { position: relative; display: block; } .rv-select select { appearance: none; padding-right: 34px; cursor: pointer; } .rv-select option { background: var(--raise); color: var(--text); }
.rv-select > svg.i { position: absolute; right: 12px; top: 12px; width: 14px; height: 14px; color: var(--text3); transform: rotate(90deg); pointer-events: none; }
.rv-line { display: flex; gap: 8px; align-items: center; } .rv-line input { flex: 1; }
.rv-test { display: grid; gap: 10px; max-width: 520px; } .rv-test .hint, .rv-test .gline.rv-said { margin: 0; }
/* Paid in full, or a column: the panel's two-way choice (app.css, .seg), at a field's height */
.rv-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-self: start; } .rv-seg button { height: 32px; padding: 0 16px; font-size: 13px; justify-content: center; }

/* Connect a shop: the four steps beside the open one */
.rv-back { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 2px; border-radius: 7px; color: var(--text3); font-size: 13px; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.rv-back:hover { background: var(--hover); color: var(--text); } .rv-back svg.i { width: 14px; height: 14px; }
.rv-flow { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; margin-top: 22px; }
.rv-steps { display: grid; gap: 4px; align-content: start; margin: 0; padding: 0; list-style: none; }
.rv-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; color: var(--text3); }
.rv-steps span { min-width: 0; } .rv-steps b { display: block; font-weight: 600; font-size: 13.5px; } .rv-steps small { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
.rv-steps i, .rv-steps li > svg.i { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--line2); border-radius: 50%; }
.rv-steps .rv-done { color: var(--text2); } .rv-steps .rv-done > svg.i { border: 0; padding: 3px; background: var(--ok-bg); color: var(--ok); stroke-width: 2.6; }
.rv-steps .rv-now { background: var(--hover); color: var(--head); } .rv-steps .rv-now i { border: 5px solid var(--blue); }
.rv-step { display: grid; gap: 12px; justify-items: start; min-width: 0; } .rv-step > * { margin: 0; } .rv-step > .rv-field, .rv-step > .rv-test, .rv-step > .rv-find, .rv-step > .rv-subs { width: 100%; }
.rv-step h1 { font: 700 23px var(--display); letter-spacing: -0.02em; color: var(--head); text-wrap: balance; }
.rv-step > p:first-of-type { max-width: 60ch; margin: -4px 0 10px; color: var(--text2); font-size: 14px; line-height: 1.55; } .rv-step > p b { color: var(--text); font-weight: 600; }
.rv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; } .rv-acts .btn { height: 36px; padding: 0 16px; }
.rv-step .rv-line .primary, .rv-step .rv-line .btn { height: 38px; padding: 0 16px; }  /* Send test stands as tall as its field */
.rv .search.rv-find { margin: 0; max-width: 520px; height: 38px; }
.rv-subs { max-width: 520px; max-height: min(392px, 46vh); overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.rv-subs .skeleton { margin: 14px; } .rv-subs .rv-err { padding: 14px; } .rv-none { margin: 0; padding: 18px 14px; color: var(--text3); font-size: 13px; }
.rv-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; width: 100%; padding: 10px 14px; text-align: left; font-size: 13.5px; transition: background var(--t-fast); }
.rv-sub + .rv-sub { border-top: 1px solid var(--line); } .rv-sub:hover:not(:disabled) { background: var(--hover); } .rv-sub[aria-current] { background: var(--sel); }
.rv-sub b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-sub small { color: var(--text3); font-size: 12.5px; } .rv-sub svg.i { width: 14px; height: 14px; color: var(--text3); }
.rv-sub:focus-visible { outline-offset: -2px; border-radius: 0; }
/* less room: the four steps in one line over the open one, each its mark and its name */
@container (max-width: 720px) {
  .rv-flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rv-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .rv-steps li { flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; text-align: center; } .rv-steps b { font-size: 12px; line-height: 1.3; text-wrap: balance; } .rv-steps small { display: none; }
}

/* A shop: the drawer over the table, under the top bar. Its layer and its box come in once. */
.rv-scrim { position: fixed; inset: 44px 0 0; z-index: 20; display: flex; justify-content: flex-end; background: rgba(3, 7, 20, .55); }
.rv-drawer { width: min(480px, 100%); height: 100%; overflow: auto; padding: 20px 24px 32px; background: var(--raise); border-left: 1px solid var(--line2); box-shadow: -18px 0 40px -18px rgba(0, 0, 0, .5); outline: 0; }
.rv-dhead { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 16px; } .rv-dhead > div { flex: 1; min-width: 0; } .rv-dhead .pill { margin-top: 3px; }
.rv-dhead h2 { margin: 0 0 2px; font: 600 17px var(--display); color: var(--head); overflow-wrap: anywhere; text-wrap: balance; } .rv-dhead small { display: block; color: var(--text3); font-size: 12.5px; }
.rv-drawer > .gline { margin: 0 0 16px; align-items: flex-start; } .rv-drawer > .gline > svg.i { margin-top: 2px; }
.rv-dr { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); } .rv-dr > span:first-child { flex: 1; min-width: 0; }
.rv-dr b { display: block; font-weight: 600; font-size: 13.5px; } .rv-dr > span > small { display: block; color: var(--text3); font-size: 12.5px; }
.rv-dr.rv-col { flex-direction: column; align-items: stretch; gap: 10px; } .rv-dr .rv-seg { display: grid; justify-self: stretch; } .rv-dr .rv-field, .rv-dr .rv-test, .rv-dr .rv-err { max-width: none; }
.rv-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rv-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 6px; margin: 0; } .rv-kv dt { color: var(--text3); font-size: 11.5px; }
.rv-kv dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; } .rv-kv dd.rv-bad { color: var(--bad); }
.rv-danger { margin-top: 16px; padding: 4px 0; color: var(--bad); font-size: 13px; font-weight: 500; } .rv-danger:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-confirm { margin-top: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); border-radius: 12px; background: var(--bad-bg); }
.rv-confirm p { margin: 0 0 12px; font-size: 13px; } .rv .btn.rv-del { border-color: color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad); }

@media (max-width: 760px) {
  .rv .ph { flex-wrap: wrap; } .rv .ph-side { padding-top: 0; }
  .rv-field input, .rv-line input, .rv-select select, .rv .search.rv-find input { font-size: 16px; }  /* a phone's browser zooms into a smaller field */
  .rv-drawer { padding: 16px 16px 28px; border-left: 0; }
}