/* Call Me portal V2 — design tokens + components (mockup stage, rev 2, 2026-10-12)
   Owner: "it's a website, not a phone" — no key numbers; website-native navigation, phone-first.
   Signature = the sentence composer: "Send [message] to [people] [when]." — every blank is a tap target.
   Self-hosted fonts only (filtered browsers block font CDNs).
   Rubik = headings and digits; it also covers Hebrew, so names typed in Hebrew/Yiddish render in
   the same family. Atkinson Hyperlegible = body letters (low-vision legibility). */

@font-face { font-family: "Rubik"; src: url("fonts/rubik.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
/* Body = Atkinson Hyperlegible letters + Rubik digits (Atkinson's slashed zero reads like "Ø" in prices and times). */
@font-face { font-family: "CMBody"; src: url("fonts/rubik-digits.woff2") format("woff2"); font-weight: 200 800; unicode-range: U+0030-0039; font-display: swap; }
@font-face { font-family: "CMBody"; src: url("fonts/atkinson.woff2") format("woff2"); font-weight: 200 800; unicode-range: U+0000-002F, U+003A-00FF, U+2000-206F, U+2190-21FF; font-display: swap; }

.pv2 {
  --paper: #F3F5F4;
  --card: #FFFFFF;
  --ink: #15211E;
  --ink2: #4B5955;
  --ink3: #6F7C78;
  --line: #DCE2DF;
  --edge: #C3CCC7;
  --go: #0F7B57;          /* send, save, pay */
  --go-deep: #0A5E42;
  --go-tint: #E2F1EA;
  --stop: #C8372D;        /* delete, recording */
  --stop-tint: #FBEAE8;
  --warn: #F0B429;        /* needs attention */
  --warn-tint: #FDF4DE;
  --warn-ink: #6B4A00;
  --vm: #2a78d6;
  --nr: #eb6834;
  --pending: #C9D1CD;
  --r-card: 18px;
  --shadow: 0 1px 0 rgba(21, 33, 30, .04), 0 8px 24px -16px rgba(21, 33, 30, .18);

  font-family: "CMBody", "Rubik", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.pv2 *, .pv2 *::before, .pv2 *::after { box-sizing: border-box; }
.pv2 h1, .pv2 h2, .pv2 h3 { font-family: "Rubik", system-ui, sans-serif; font-weight: 600; margin: 0; letter-spacing: -0.015em; }
.pv2 h1 { font-size: 34px; line-height: 1.15; }
.pv2 h2 { font-size: 22px; line-height: 1.25; }
.pv2 h3 { font-size: 18px; line-height: 1.3; }
.pv2 p { margin: 0; }
.pv2 .num { font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.pv2 .muted { color: var(--ink2); }
.pv2 .small { font-size: 15px; }
.pv2 .eyebrow { font-size: 15px; color: var(--ink2); font-weight: 700; }
.pv2 bdi { unicode-bidi: isolate; }
.pv2 svg.i { width: 22px; height: 22px; flex: none; }

/* ---------- Buttons ---------- */
.pv2 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  font: 700 17px/1 "CMBody", sans-serif; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--edge); background: var(--card); color: var(--ink);
}
.pv2 .btn svg { width: 20px; height: 20px; }
.pv2 .btn:focus-visible, .pv2 a:focus-visible, .pv2 input:focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }
.pv2 .btn-go { background: var(--go); border-color: var(--go); color: #fff; }
.pv2 .btn-go:hover { background: var(--go-deep); }
.pv2 .btn-big { min-height: 60px; font-size: 19px; padding: 0 30px; }
.pv2 .btn-quiet { border-color: transparent; background: transparent; color: var(--go-deep); padding: 0 6px; min-height: 40px; }
.pv2 .btn-danger { color: var(--stop); border-color: #E7C2BD; }
.pv2 .btn-block { width: 100%; }
.pv2 .link { color: var(--go-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards ---------- */
.pv2 .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 22px 24px; }
.pv2 .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pv2 .row { display: flex; align-items: center; gap: 12px; }
.pv2 .grow { flex: 1; min-width: 0; }
.pv2 hr.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- Computer: sidebar + content ---------- */
.pv2.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 780px; }
.pv2 .side { background: var(--card); border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; gap: 2px; }
.pv2 .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; font: 700 23px/1 "Rubik", sans-serif; letter-spacing: -0.02em; }
.pv2 .brand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--go); display: grid; place-items: center; color: #fff; }
.pv2 .brand .mark svg { width: 20px; height: 20px; }
.pv2 .side .btn-go { margin: 0 4px 16px; min-height: 54px; padding: 0 16px; }
.pv2 .nav { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px; }
.pv2 .nav svg { width: 22px; height: 22px; color: var(--ink2); }
.pv2 .nav:hover { background: var(--paper); }
.pv2 .nav.on { background: var(--go-tint); color: var(--go-deep); }
.pv2 .nav.on svg { color: var(--go-deep); }
.pv2 .nav .badge { margin-left: auto; }
.pv2 .side .foot { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink2); }
.pv2 .badge { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--stop); color: #fff; font: 700 13px/1 "CMBody", sans-serif; }
.pv2 .main { padding: 32px 38px 44px; display: flex; flex-direction: column; gap: 22px; }
.pv2 .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pv2 .cols { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }

/* ---------- The signature: the sentence composer ---------- */
.pv2 .sentence { font: 500 34px/1.6 "Rubik", sans-serif; letter-spacing: -0.015em; }
.pv2 .sentence.sm { font-size: 27px; line-height: 1.7; }
.pv2 .blank {
  display: inline-flex; align-items: center; gap: 10px; vertical-align: 1px;
  padding: 0 14px 0 16px; margin: 3px 2px; min-height: 52px; border-radius: 14px;
  background: var(--go-tint); color: var(--ink); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 -3px 0 rgba(15, 123, 87, .35);
  font-weight: 600; line-height: 1.2;
}
.pv2 .sentence.sm .blank { min-height: 46px; padding: 0 12px 0 14px; }
.pv2 .blank .caret { width: 18px; height: 18px; color: var(--go-deep); }
.pv2 .blank.on { background: #fff; border-color: var(--go); box-shadow: 0 0 0 4px var(--go-tint); }
/* "no intro": a quiet dashed chip that stays in the sentence (it was .opt = the full-width choice box; owner 10-13) */
.pv2 .blank.nointro { background: transparent; box-shadow: none; border: 2px dashed var(--edge); color: var(--ink2); font-weight: 500; }
.pv2 .blank .play-mini { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--go); color: #fff; }
.pv2 .blank .play-mini svg { width: 13px; height: 13px; }

/* Choice list inside a composer panel / phone sheet */
.pv2 .choices { list-style: none; margin: 0; padding: 0; }
.pv2 .choices li { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--line); font-size: 18px; }
.pv2 .choices li:first-child { border-top: 0; }
.pv2 .tick { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--edge); display: grid; place-items: center; flex: none; color: #fff; }
.pv2 .tick.on { background: var(--go); border-color: var(--go); }
.pv2 .tick svg { width: 16px; height: 16px; }
.pv2 .choices .count { margin-left: auto; color: var(--ink2); font-size: 16px; }

/* Before-we-call checks */
.pv2 .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pv2 .checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.pv2 .checks .ic { width: 26px; height: 26px; border-radius: 50%; background: var(--go-tint); color: var(--go-deep); display: grid; place-items: center; flex: none; margin-top: 1px; }
.pv2 .checks .ic svg { width: 15px; height: 15px; }

/* Voice message = its waveform */
.pv2 .wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.pv2 .wave i { display: block; width: 4px; border-radius: 2px; background: var(--ink3); }
.pv2 .wave.go i { background: var(--go); }
.pv2 .play { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--go); display: grid; place-items: center; flex: none; color: #fff; }
.pv2 .play svg { width: 18px; height: 18px; }
.pv2 .play.ghost { background: var(--card); border: 1.5px solid var(--edge); color: var(--go-deep); }

/* Status facts / meter */
.pv2 .fact .label { font-size: 15px; color: var(--ink2); font-weight: 700; }
.pv2 .fact .value { font: 600 22px/1.25 "Rubik", sans-serif; margin-top: 2px; letter-spacing: -0.01em; }
.pv2 .meter { height: 10px; border-radius: 999px; background: #E6EBE8; overflow: hidden; margin-top: 10px; }
.pv2 .meter > span { display: block; height: 100%; border-radius: 999px; background: var(--go); }

/* Stacked result bar: 2px surface gaps, rounded ends, direct-labelled legend */
.pv2 .resultbar { display: flex; gap: 2px; height: 16px; margin: 14px 0 10px; }
.pv2 .resultbar > span { display: block; height: 100%; }
.pv2 .resultbar > span:first-child { border-radius: 4px 0 0 4px; }
.pv2 .resultbar > span:last-child { border-radius: 0 4px 4px 0; }
.pv2 .s-pick { background: var(--go); }
.pv2 .s-vm { background: var(--vm); }
.pv2 .s-nr { background: var(--nr); }
.pv2 .s-pend { background: repeating-linear-gradient(135deg, var(--pending) 0 5px, #E4E9E6 5px 10px); }
.pv2 .legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: var(--ink2); }
.pv2 .legend b { color: var(--ink); font-weight: 700; }
.pv2 .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* Lists */
.pv2 .list { list-style: none; margin: 0; padding: 0; }
.pv2 .list li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.pv2 .list li:first-child { border-top: 0; padding-top: 2px; }
.pv2 .when { font-size: 15px; color: var(--ink2); }
.pv2 .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--paper); color: var(--ink2); white-space: nowrap; }
.pv2 .pill.ok { background: var(--go-tint); color: var(--go-deep); }
.pv2 .pill.warn { background: var(--warn-tint); color: var(--warn-ink); }
.pv2 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--stop); flex: none; }

/* Forms */
.pv2 label.f { display: block; font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.pv2 .input { width: 100%; height: 58px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); padding: 0 16px; font: 600 24px/1 "CMBody", "Rubik", sans-serif; letter-spacing: .1em; color: var(--ink); }
.pv2 .help { font-size: 15px; color: var(--ink2); margin-top: 8px; }
.pv2 .code { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pv2 .code span { height: 68px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); display: grid; place-items: center; font: 600 30px/1 "Rubik", sans-serif; }
.pv2 .code span.on { border: 2px solid var(--go); box-shadow: 0 0 0 4px var(--go-tint); }

/* Plans */
.pv2 .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pv2 .plan { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: var(--card); }
.pv2 .plan .p { font: 600 20px/1 "Rubik", sans-serif; }
.pv2 .plan .c { font-size: 15px; color: var(--ink2); font-weight: 700; }
.pv2 .plan.cur { background: var(--paper); }
.pv2 .plan.pick { border: 2px solid var(--go); background: var(--go-tint); }
.pv2 .quote { margin-top: 16px; padding: 18px 20px; border-radius: 14px; background: var(--paper); display: flex; gap: 20px; align-items: center; }

/* Table */
.pv2 table.t { width: 100%; border-collapse: collapse; font-size: 16px; }
.pv2 table.t th { text-align: left; font-size: 14px; color: var(--ink2); font-weight: 700; padding: 0 10px 10px 0; border-bottom: 1px solid var(--line); }
.pv2 table.t td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); }
.pv2 table.t td.r, .pv2 table.t th.r { text-align: right; }

/* ---------- Phone-size layout ---------- */
.pv2.phone { width: 390px; height: 820px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.pv2 .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--card); border-bottom: 1px solid var(--line); min-height: 64px; }
.pv2 .topbar .brand { padding: 0; font-size: 21px; }
.pv2 .bell { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); }
.pv2 .bell svg { width: 24px; height: 24px; }
.pv2 .bell .badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; font-size: 12px; padding: 0 6px; }
.pv2 .pbody { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; overflow: hidden; }
.pv2 .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; background: var(--card); border-top: 1px solid var(--line); padding: 8px 6px 14px; }
.pv2 .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink2); text-decoration: none; }
.pv2 .tab svg { width: 24px; height: 24px; }
.pv2 .tab.on { color: var(--go-deep); }
.pv2 .tab.send { margin-top: -26px; color: var(--go-deep); }
.pv2 .tab.send .fab { width: 62px; height: 62px; border-radius: 50%; background: var(--go); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 20px -10px rgba(15, 123, 87, .9), 0 0 0 5px var(--card); }
.pv2 .tab.send .fab svg { width: 28px; height: 28px; }
/* bottom sheet */
.pv2 .scrim { position: absolute; inset: 0; background: rgba(21, 33, 30, .38); }
.pv2 .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 24px 24px 0 0; padding: 10px 20px 22px; box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .5); }
.pv2 .sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--edge); margin: 0 auto 14px; }

@media (prefers-reduced-motion: reduce) { .pv2 * { transition: none !important; animation: none !important; } }

/* ===================== Call Me portal V2 — app layer =====================
   Built on design/portal.css (tokens + components; appended first by dev/build_assets.py).
   No inline styles anywhere (strict CSP): sizes come from the utility classes generated at the end. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body.pv2 { margin: 0; min-height: 100vh; min-height: 100dvh; }
.pv2 a { color: inherit; }
.pv2 img, .pv2 svg { max-width: 100%; }
.pv2 [hidden] { display: none !important; }
.pv2 button { font: inherit; color: inherit; }
.pv2 .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); padding: 10px 16px; border-radius: 10px; }
.pv2 .skip:focus { left: 8px; }
.pv2 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pv2 :focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }
.pv2 h1 { overflow-wrap: anywhere; }
.pv2 h2, .pv2 h3 { overflow-wrap: anywhere; }
.pv2 p + p { margin-top: 8px; }
.pv2 .num { font-family: "CMBody", "Rubik", system-ui, sans-serif; }
.pv2 .center { text-align: center; }
.pv2 .right { text-align: right; }
.pv2 .nowrap { white-space: nowrap; }
.pv2 .ink { color: var(--ink); }
.pv2 .strong { font-weight: 700; }
.pv2 .tiny { font-size: 14px; }
.pv2 .mt0 { margin-top: 0; } .pv2 .mt1 { margin-top: 6px; } .pv2 .mt2 { margin-top: 12px; } .pv2 .mt3 { margin-top: 20px; } .pv2 .mt4 { margin-top: 28px; }
.pv2 .mb1 { margin-bottom: 6px; } .pv2 .mb2 { margin-bottom: 12px; } .pv2 .mb3 { margin-bottom: 20px; }
.pv2 .stack { display: flex; flex-direction: column; gap: 22px; }
.pv2 .stack-sm { display: flex; flex-direction: column; gap: 12px; }
.pv2 .stack-xs { display: flex; flex-direction: column; gap: 6px; }
.pv2 .row.wrap { flex-wrap: wrap; }
/* a wrapping row keeps its text readable: the text takes the full line on a phone and the buttons go under it */
.pv2 .row.wrap > .grow { min-width: min(260px, 100%); }
.pv2 .row.top { align-items: flex-start; }
.pv2 .row.base { align-items: baseline; }
.pv2 .row.end { justify-content: flex-end; }
.pv2 .row.between { justify-content: space-between; }
.pv2 .gap-s { gap: 8px; }
.pv2 .spacer { flex: 1; }
.pv2 .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.pv2 .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pv2 .cols { grid-template-columns: minmax(0, 1fr) 360px; }
.pv2 .cols.wide-side { grid-template-columns: minmax(0, 1fr) 400px; }
.pv2 .card { min-width: 0; }
.pv2 .card.tight { padding: 16px 18px; }
.pv2 .card.flat { box-shadow: none; }
.pv2 .card.narrow { max-width: 560px; margin: 0; width: 100%; }   /* left, under the page title (one axis) */
.pv2 .card.warn { border-color: #EBCB7A; background: var(--warn-tint); }
.pv2 .card-head h2 { flex: 1; min-width: 0; }
.pv2 .card-head { flex-wrap: wrap; }
.pv2 .card-head > .row.grow { min-width: min(260px, 100%); }
.pv2 .kv.keys { grid-template-columns: 56px 1fr; }
.pv2 .card-head .btn, .pv2 .card-head .link { flex: none; }
.pv2 .sub { color: var(--ink2); font-size: 16px; margin-top: 4px; }
.pv2 hr.rule { margin: 18px 0; }
.pv2 .divide > * + * { border-top: 1px solid var(--line); }

/* ---------- shell: computer ---------- */
@media (min-width: 1000px) {
  body.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); }
  .pv2 .topbar, .pv2 .tabbar { display: none; }
  .pv2 .side { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
  .pv2 .main { padding: 32px 40px 56px; max-width: 1220px; width: 100%; }
  .pv2 .phone-only { display: none !important; }
}
.pv2 .main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pv2 .side .brand { color: var(--ink); text-decoration: none; }
.pv2 .side .side-send { margin: 0 4px 16px; min-height: 54px; padding: 0 16px; }
.pv2 .side .nav > span:not(.badge) { flex: 1; }
.pv2 .side .foot { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pv2 .link-btn { background: none; border: 0; padding: 0; min-height: 32px; color: var(--go-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }

/* ---------- shell: phone ---------- */
@media (max-width: 999.98px) {
  .pv2 .side { display: none; }
  .pv2 .desk-only { display: none !important; }
  .pv2 .topbar { position: sticky; top: 0; z-index: 30; padding: 10px 12px 10px 16px; min-height: 60px; gap: 10px; }
  .pv2 .topbar .brand { color: var(--ink); text-decoration: none; }
  .pv2 .main { padding: 18px 16px calc(104px + env(safe-area-inset-bottom)); gap: 16px; }
  .pv2 .tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px -16px rgba(21, 33, 30, .5); }
  .pv2 .tab { min-height: 52px; justify-content: flex-end; }
  .pv2 .cols, .pv2 .cols.wide-side, .pv2 .grid2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pv2 .grid3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pv2 .card { padding: 18px 16px; border-radius: 16px; }
  .pv2 h1 { font-size: 28px; }
  .pv2 h2 { font-size: 20px; }
  .pv2 .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .pv2 .page-head .row { justify-content: flex-start; }
  .pv2 .people .chips { width: 100%; padding-left: 102px; margin-top: -6px; }
  .pv2 .people li > .btn-quiet { display: none; }
}
.pv2 .top-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 0; color: var(--go-deep); font-weight: 700; text-decoration: none; }
.pv2 .top-title { flex: 1; text-align: center; font: 600 18px/1.2 "Rubik", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2 .bell { border-radius: 12px; }
.pv2 .tab span { line-height: 1.1; }
.pv2 .tab.send { margin-top: -28px; }

/* bare pages (sign in, sign up) */
body.bare { background: var(--paper); }
.pv2 .bare-main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 40px 18px 60px; gap: 16px; }
.pv2 .auth { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 20px; }
.pv2 .auth .brand { padding: 0; color: var(--ink); text-decoration: none; }
.pv2 .auth .card { padding: 28px 26px; }
.pv2 .auth-steps { font-size: 15px; color: var(--ink2); font-weight: 700; }
.pv2 .center-page { display: grid; place-items: center; min-height: 60vh; width: 100%; }
@media (max-width: 520px) { .pv2 .bare-main { padding: 22px 14px 40px; } .pv2 .auth .card { padding: 22px 18px; } }

/* ---------- page head ---------- */
.pv2 .page-head h1 { flex: 1; min-width: 0; }
.pv2 .page-head .row { flex-wrap: wrap; justify-content: flex-end; }
.pv2 .crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; color: var(--ink2); font-weight: 700; margin-bottom: 4px; }
.pv2 .crumbs a { color: var(--go-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; }
.pv2 .page-head .crumbs a:first-child::before { content: '\2039'; font-size: 22px; line-height: 1; margin-top: -2px; }
.pv2 .crumbs a:hover { text-decoration: underline; }

/* ---------- flash + notices ---------- */
.pv2 .flash { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 14px; background: var(--go-tint); color: var(--go-deep); font-weight: 700; border: 1px solid #BFE0D0; }
.pv2 .flash p { flex: 1; padding-top: 1px; }
.pv2 .flash.error { background: var(--stop-tint); color: #8E2219; border-color: #EDC4BF; }
.pv2 .flash.info { background: #E7F0FA; color: #1D4F86; border-color: #C5D9EF; }
.pv2 .flash .i { margin-top: 2px; }
.pv2 .flash-x { background: none; border: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; color: inherit; margin: -6px -4px -6px 0; }
.pv2 .notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.pv2 .notice .i { margin-top: 2px; color: var(--ink2); }
.pv2 .notice.warn { background: var(--warn-tint); border-color: #EBCB7A; color: var(--warn-ink); }
.pv2 .notice.warn .i { color: #A87700; }
.pv2 .notice.error { background: var(--stop-tint); border-color: #EDC4BF; color: #8E2219; }
.pv2 .notice.error .i { color: var(--stop); }
.pv2 .notice.ok { background: var(--go-tint); border-color: #BFE0D0; color: var(--go-deep); }
.pv2 .notice.ok .i { color: var(--go); }
.pv2 .notice p { font-weight: 600; }
.pv2 .notice-act { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.pv2 .banner { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pv2 .banner .grow { min-width: 220px; }

/* ---------- buttons ---------- */
.pv2 .btn { white-space: nowrap; transition: background .12s, border-color .12s; }
.pv2 .btn:hover { border-color: var(--ink3); }
.pv2 .btn-go:hover { border-color: var(--go-deep); }
.pv2 .btn-danger:hover { background: var(--stop-tint); border-color: var(--stop); }
.pv2 .btn-stop { background: var(--stop); border-color: var(--stop); color: #fff; }
.pv2 .btn-stop:hover { background: #A92C23; border-color: #A92C23; }
.pv2 .btn-quiet { min-height: 48px; }
.pv2 .btn-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.pv2 .btn[disabled], .pv2 .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.pv2 .btn-big { min-height: 60px; }
.pv2 .btn-wrap { white-space: normal; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; }
.pv2 .btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pv2 .inline-form { display: inline-flex; margin: 0; }
.pv2 .icon-btn { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; }
.pv2 .icon-btn svg { width: 22px; height: 22px; }
.pv2 .more { position: relative; }
.pv2 .more > summary { list-style: none; cursor: pointer; }
.pv2 .more > summary::-webkit-details-marker { display: none; }
.pv2 .more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 290px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(21, 33, 30, .45); padding: 6px; display: flex; flex-direction: column; }
.pv2 .more-menu > a, .pv2 .more-menu > form > button:not(.btn), .pv2 .more-menu > button:not(.btn) { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: none; border-radius: 10px; text-align: left; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; color: var(--ink); }
.pv2 .more-menu > a:hover, .pv2 .more-menu > form > button:hover, .pv2 .more-menu > button:hover { background: var(--paper); }
.pv2 .more-menu .danger { color: var(--stop); }
.pv2 .more-menu form { display: block; }
@media (max-width: 999.98px) {
  .pv2 .more[open] > summary::after { content: ""; position: fixed; inset: 0; z-index: 44; background: rgba(21, 33, 30, .35); cursor: default; }
  /* a ⋯ menu opens as a sheet at the bottom: the bottom bar must not sit on top of it */
  .pv2:has(details.more[open]) .tabbar { visibility: hidden; }
  .pv2 .more-menu { position: fixed; z-index: 45; left: 10px; right: 10px; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); min-width: 0; border-radius: 18px; padding: 8px; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.45); }
  .pv2 .more-menu > a, .pv2 .more-menu > form > button:not(.btn), .pv2 .more-menu > button:not(.btn) { min-height: 54px; font-size: 18px; }
}

/* ---------- forms ---------- */
.pv2 .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pv2 .field > label, .pv2 .field > .label, .pv2 legend.label { font-weight: 700; font-size: 16px; }
.pv2 .field .help { margin-top: 0; }
.pv2 fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pv2 .text, .pv2 select.text, .pv2 textarea.text {
  width: 100%; min-height: 52px; border-radius: 12px; border: 1.5px solid var(--edge); background: var(--card);
  padding: 0 14px; font: 500 18px/1.3 "CMBody", "Rubik", system-ui, sans-serif; color: var(--ink);
}
.pv2 textarea.text { padding: 12px 14px; min-height: 140px; resize: vertical; line-height: 1.5; }
.pv2 select.text { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5' fill='none' stroke='%230A5E42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 22px; }
.pv2 .text:focus, .pv2 .input:focus { outline: none; border-color: var(--go); box-shadow: 0 0 0 4px var(--go-tint); }
.pv2 .text.short { max-width: 220px; }
.pv2 .text.tiny-in { max-width: 120px; }
.pv2 .input { font-size: 24px; }
.pv2 .input.code-in { text-align: center; letter-spacing: .4em; font-size: 30px; height: 68px; padding-left: calc(16px + .4em); }
.pv2 .input-row { display: flex; gap: 10px; align-items: stretch; }
.pv2 .input-row .text { flex: 1; }
.pv2 .err-text { color: var(--stop); font-weight: 700; font-size: 15px; }
.pv2 .count-note { font-size: 14px; color: var(--ink2); text-align: right; }
.pv2 .count-note.over { color: var(--stop); font-weight: 700; }
.pv2 .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .pv2 .form-grid { grid-template-columns: minmax(0, 1fr); } }
.pv2 .form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }

/* big tappable choices (radio / checkbox rows) */
.pv2 .opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; font-size: 17px; }
.pv2 .opt:hover { border-color: var(--edge); }
.pv2 .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pv2 .opt .tick { transition: background .1s; }
.pv2 .opt .tick svg { opacity: 0; }
.pv2 .opt input:checked ~ .tick { background: var(--go); border-color: var(--go); }
.pv2 .opt input:checked ~ .tick svg { opacity: 1; }
.pv2 .opt input[type=radio] ~ .tick { border-radius: 50%; }
.pv2 .opt:has(input:checked) { border-color: var(--go); background: var(--go-tint); }
.pv2 .opt:has(input:focus-visible) { outline: 3px solid var(--go); outline-offset: 2px; }
.pv2 .opt .opt-body { flex: 1; min-width: 0; }
.pv2 .opt .opt-body p + p { margin-top: 2px; }
.pv2 .opt .count, .pv2 .opt .end { margin-left: auto; color: var(--ink2); font-size: 16px; flex: none; }
.pv2 .opts { display: grid; gap: 10px; }
.pv2 .opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv2 .opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv2 .opts.days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pv2 .opts.days .opt { justify-content: center; padding: 6px 2px; min-height: 52px; font-weight: 700; font-size: 16px; }
.pv2 .opts.days .opt .tick { display: none; }
@media (max-width: 600px) { .pv2 .opts.two, .pv2 .opts.three { grid-template-columns: minmax(0, 1fr); } }

/* switch */
.pv2 .switch { display: flex; align-items: center; gap: 14px; min-height: 52px; cursor: pointer; }
.pv2 .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv2 .switch .track { width: 54px; height: 32px; border-radius: 999px; background: #CBD3CF; position: relative; flex: none; transition: background .15s; }
.pv2 .switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.pv2 .switch input:checked + .track { background: var(--go); }
.pv2 .switch input:checked + .track::after { transform: translateX(22px); }
.pv2 .switch input:focus-visible + .track { outline: 3px solid var(--go); outline-offset: 2px; }
.pv2 .switch .label-text { flex: 1; }

/* ---------- tabs ---------- */
.pv2 .tabs { position: relative; display: flex; gap: 4px; padding: 4px; background: #E6EBE8; border-radius: 14px; overflow-x: auto; scrollbar-width: none; max-width: 100%; align-self: flex-start; }
.pv2 .tabs::-webkit-scrollbar { display: none; }
.pv2 .tab-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 16px; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.pv2 .tab-link:hover { color: var(--ink); }
.pv2 .tab-link.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(21, 33, 30, .12); }
.pv2 .tab-link .badge { min-width: 22px; height: 22px; font-size: 12px; }
@media (max-width: 999.98px) { .pv2 .tabs { align-self: stretch; } }

/* ---------- lists ---------- */
.pv2 .list li { flex-wrap: wrap; }
.pv2 .list .grow p { overflow-wrap: anywhere; }
.pv2 .list li > .grow { min-width: min(240px, 100%); }
.pv2 .btn-quiet { white-space: normal; text-align: left; line-height: 1.25; }
.pv2 .menu-list .row-link .when { font-weight: 400; font-size: 15px; }
.pv2 .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pv2 .list.roomy li { padding: 16px 0; }
.pv2 .row-link { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 4px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); }
.pv2 .row-link:first-child { border-top: 0; }
.pv2 .row-link .grow { min-width: 0; }
.pv2 .row-link .chev { color: var(--ink3); }
.pv2 .row-link:hover .grow > :first-child { text-decoration: underline; text-underline-offset: 3px; }
.pv2 .row-link .lead { width: 44px; height: 44px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; color: var(--ink2); flex: none; }
.pv2 .when { overflow-wrap: anywhere; }
.pv2 .badge.soft { background: var(--go-tint); color: var(--go-deep); }
.pv2 .badge.gray { background: var(--paper); color: var(--ink2); border: 1px solid var(--line); }
.pv2 .pill.stop { background: var(--stop-tint); color: #8E2219; }
.pv2 .pill.live { background: var(--stop); color: #fff; }
.pv2 .pill.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.pv2 .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2 .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--ink2); max-width: 100%; }
.pv2 .chip bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2 a.chip { text-decoration: none; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 15px; background: var(--card); }
.pv2 a.chip.on { background: var(--go-tint); color: var(--go-deep); border-color: #BFE0D0; }
.pv2 .check-all { display: flex; align-items: center; gap: 10px; }

/* checkbox / radio inline (lists) */
.pv2 .cbox { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer; margin: -6px 0; }
.pv2 .cbox input { width: 24px; height: 24px; accent-color: var(--go); cursor: pointer; }

/* contacts rows */
.pv2 .people li { gap: 10px; padding: 10px 0; }
.pv2 a.who { text-decoration: none; color: var(--ink); }
.pv2 a.who:hover .grow p:first-child { text-decoration: underline; text-underline-offset: 3px; }
.pv2 .codebox .pill { background: var(--card); border: 1px solid var(--line); }
.pv2 .people .who { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 14px; }
.pv2 .people .who .grow p:first-child { font-weight: 700; }
.pv2 .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--go-tint); color: var(--go-deep); display: grid; place-items: center; font: 600 17px/1 "Rubik", sans-serif; flex: none; }
.pv2 .avatar.gray { background: var(--paper); color: var(--ink2); }
.pv2 .bulkbar { position: sticky; top: 8px; z-index: 15; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 12px 24px -14px rgba(0,0,0,.6); }
.pv2 .bulkbar .btn { min-height: 44px; }
.pv2 .bulkbar select.text { min-height: 44px; max-width: 240px; color: var(--ink); }
@media (max-width: 999.98px) { .pv2 .bulkbar { top: 68px; } }
/* conference: who came (a table with headers on a computer; on a phone each person is a small card) */
.pv2 .conf-people .sub-num { display: block; font-size: 14px; color: var(--ink2); font-weight: 400; }
.pv2 .conf-people td, .pv2 .conf-people th { white-space: nowrap; }
.pv2 .conf-people td:first-child { white-space: normal; min-width: 180px; }
.pv2 .link-plain { color: inherit; text-decoration: none; }
.pv2 .link-plain:hover .strong, .pv2 .link-plain:focus-visible .strong { text-decoration: underline; }
.pv2 .node-type.live { background: var(--go); color: #fff; }
@media (max-width: 700px) {
  .pv2 table.t.t-cards.conf-people tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
  .pv2 table.t.t-cards.conf-people td { white-space: normal; font-size: 15px; }
  .pv2 table.t.t-cards.conf-people td[data-l]::before { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
  .pv2 table.t.t-cards.conf-people td[data-l="Who"] { grid-column: 1 / -1; padding-bottom: 4px; font-size: 16px; }
  .pv2 table.t.t-cards.conf-people td[data-l="Who"]::before { content: none; }
}
/* import result: the people from the file, compact, two columns on a computer */
.pv2 .imp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 18px; }
.pv2 .imp-p { display: flex; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.pv2 .imp-p .strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv2 .imp-p .num { margin-left: auto; flex: none; font-size: 15px; }
.pv2 .imp-list.skipped .imp-p .num { margin-left: auto; }
.pv2 .imp-row { flex: none; width: 64px; font-size: 14px; }
/* ---- picking people: one checkbox look everywhere (the green rounded tick of .opt) ---- */
.pv2 .ck { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer; }
.pv2 .ck input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pv2 .ck-box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 2px solid var(--edge); border-radius: 7px; background: var(--card); color: #fff; transition: background .1s, border-color .1s; }
.pv2 .ck-box svg { width: 15px; height: 15px; opacity: 0; }
.pv2 .ck:hover .ck-box { border-color: var(--go); }
.pv2 input:checked + .ck-box { background: var(--go); border-color: var(--go); }
.pv2 input:checked + .ck-box svg { opacity: 1; }
.pv2 input:indeterminate + .ck-box { background: var(--go); border-color: var(--go); }
.pv2 input:indeterminate + .ck-box svg { display: none; }
.pv2 input:indeterminate + .ck-box::after { content: ""; width: 11px; height: 2.5px; border-radius: 2px; background: #fff; }
.pv2 .item:has(> .ck input:checked) { background: var(--go-tint); }   /* picked rows read as picked */
.pv2 .item:has(> .ck input:checked) .avatar { background: var(--card); }
.pv2 .link-btn.quiet { color: var(--ink2); font-weight: 600; }
.pv2 .ck input:focus-visible + .ck-box { outline: 3px solid var(--go); outline-offset: 2px; }
.pv2 .ck-box.done { background: var(--go-tint); border-color: var(--go-tint); color: var(--go); }
.pv2 .ck-box.done svg { opacity: 1; }
.pv2 .check-all .ck { margin: -8px -6px -8px -10px; }
/* the box sits in the same column in the top row and in every row below it */
.pv2 .item .ck, .pv2 .selhead .ck { margin: -8px -6px -8px -10px; }
.pv2 .selhead .ck { margin-left: -18px; }   /* rows carry 8px more on their left: keep one column */
/* the list's top row: "select all" + what the list is; picking turns it into the actions (nothing covers the list) */
.pv2 .selhead { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px; margin: -6px -8px 2px; border-radius: 12px; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); }
.pv2 .selhead.on { background: var(--go-tint); box-shadow: 0 6px 16px -12px rgba(21,33,30,.45); }
/* with JavaScript the row shows either what the list is or the actions; without it, both (the buttons always work) */
html.js .pv2 .selhead:not(.on) .selhead-busy, html.js .pv2 .selhead.on .selhead-idle { display: none; }
.pv2 .selhead-busy { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.pv2 .selhead-count { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-right: auto; }
.pv2 .selhead-count .link-btn { font-size: 16px; }
.pv2 .selhead-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv2 .selhead .btn { min-height: 40px; }
@media (max-width: 999.98px) { .pv2 .selhead { top: 60px; } .pv2 .selhead .btn { min-height: 44px; } }

.pv2 .searchbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pv2 .searchbar .search { flex: 1; min-width: 220px; position: relative; }
.pv2 .searchbar .search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink3); }
.pv2 .searchbar .search .text { padding-left: 46px; }

/* ---------- message cards (waveforms) ---------- */
.pv2 .msg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pv2 .msg .msg-main { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 14px; }
.pv2 .msg .msg-text { min-width: 0; }
.pv2 .msg .wave { flex: 1; min-width: 90px; max-width: 260px; overflow: hidden; }
.pv2 .wave i { flex: 1 1 4px; max-width: 5px; min-width: 2px; }
.pv2 .wave i.h1 { height: 4px; } .pv2 .wave i.h2 { height: 7px; } .pv2 .wave i.h3 { height: 10px; } .pv2 .wave i.h4 { height: 13px; } .pv2 .wave i.h5 { height: 17px; }
.pv2 .wave i.h6 { height: 20px; } .pv2 .wave i.h7 { height: 24px; } .pv2 .wave i.h8 { height: 27px; } .pv2 .wave i.h9 { height: 31px; } .pv2 .wave i.h10 { height: 34px; }
.pv2 .wave i.played { background: var(--go-deep); }
.pv2 .play { cursor: pointer; text-decoration: none; transition: transform .1s; }
.pv2 .play:active { transform: scale(.94); }
.pv2 .play.sm { width: 40px; height: 40px; }
.pv2 .play.sm svg { width: 15px; height: 15px; }
.pv2 .play.off { background: var(--paper); color: var(--ink3); cursor: default; border: 1.5px dashed var(--edge); }
.pv2 .play .ic-pause { display: none; }
.pv2 .play.is-playing .ic-play { display: none; }
.pv2 .play.is-playing .ic-pause { display: block; }
.pv2 .play.is-loading { opacity: .7; }
.pv2 .msg-title { font-weight: 700; }
.pv2 .msg-cards { display: grid; gap: 14px; }

/* ---------- result bars ---------- */
.pv2 .resultbar { margin: 12px 0 10px; }
.pv2 .resultbar > span { min-width: 4px; flex-basis: 0; }
.pv2 .resultbar.sm { height: 12px; margin: 10px 0 8px; }
.pv2 .resultbar > span:only-child { border-radius: 4px; }
.pv2 .s-ans { background: #6BB596; }
.pv2 .s-empty { background: #E6EBE8; border-radius: 4px; }
.pv2 .legend { gap: 4px 18px; }
.pv2 .bcast-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pv2 .bcast-head h2, .pv2 .bcast-head h3 { flex: 1; min-width: 0; }
.pv2 .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pv2 .stat { padding: 14px 16px; border-radius: 14px; background: var(--paper); }
.pv2 .stat .label { font-size: 14px; color: var(--ink2); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pv2 .stat .value { font: 600 26px/1.2 "Rubik", sans-serif; margin-top: 4px; }
@media (max-width: 700px) { .pv2 .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv2 .stat .value { font-size: 22px; } }

/* ---------- meter ---------- */
.pv2 .meter.near > span { background: var(--warn); }
.pv2 .meter.over > span { background: var(--stop); }

/* ---------- facts ---------- */
.pv2 .facts { display: flex; flex-direction: column; }
.pv2 .facts > div { padding: 14px 0; border-top: 1px solid var(--line); }
.pv2 .facts > div:first-child { border-top: 0; padding-top: 0; }
.pv2 .facts > div:last-child { padding-bottom: 0; }
.pv2 .kv { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 10px 20px; align-items: baseline; }
.pv2 .kv dt { color: var(--ink2); font-weight: 700; font-size: 15px; }
.pv2 .kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) { .pv2 .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .pv2 .kv dd { margin-bottom: 10px; } }

/* ---------- the sentence composer ---------- */
.pv2 .composer .sentence { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.8; overflow-wrap: anywhere; }
@media (min-width: 1000px) { .pv2 .send-box { position: sticky; top: 24px; } }
.pv2 .composer .blank { font-size: inherit; max-width: 100%; }
.pv2 .composer .blank > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv2 .blank { font-family: "Rubik", sans-serif; }
.pv2 .blank:hover { background: #D3EBDF; }
.pv2 .blank.nointro:hover { background: var(--paper); border-color: var(--ink3); }
.pv2 .blank.unset { background: #fff; border: 2px dashed var(--go); box-shadow: none; color: var(--go-deep); }
.pv2 .new-msg-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.pv2 .new-msg-row .label { color: var(--ink2); font-size: 16px; margin-right: 4px; }
.pv2 .panel { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.pv2 .panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pv2 .panel-head h2 { flex: 1; }
.pv2 .panel .opts { max-height: 520px; overflow-y: auto; padding: 2px; }
.pv2 .panel-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pv2 .panel-foot .grow { min-width: 160px; }
.pv2 .sheet-grab { display: none; }
.pv2 .checks .ic.bad { background: var(--stop-tint); color: var(--stop); }
.pv2 .checks .ic.warn { background: var(--warn-tint); color: #A87700; }
.pv2 .checks li > span:last-child { padding-top: 1px; overflow-wrap: anywhere; }
.pv2 .send-box .btn-big { width: 100%; padding: 12px 16px; white-space: normal; line-height: 1.2; }
.pv2 .say-back { padding: 14px 16px; border-radius: 14px; background: var(--paper); font-size: 17px; }
.pv2 .shabbos { font-size: 15px; }

/* phone: panels become bottom sheets */
@media (max-width: 999.98px) {
  .pv2 .composer .sentence { font-size: 25px; line-height: 1.85; }
  .pv2 .composer .blank { min-height: 46px; padding: 0 10px 0 12px; }
  html.js .pv2 .panel.sheetable { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; margin: 0; max-height: 86vh; max-height: 86dvh; overflow-y: auto; background: var(--card);
    border-radius: 22px 22px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 0; box-shadow: 0 -12px 30px -14px rgba(0,0,0,.45);
    transform: translateY(0); transition: transform .2s ease; }
  html.js .pv2 .panel.sheetable .sheet-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--edge); margin: 4px auto 14px; }
  html.js .pv2 .panel.sheetable .opts { max-height: none; }
  html.js .pv2 .panel.sheetable .panel-foot { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); background: var(--card); padding: 12px 0 calc(6px + env(safe-area-inset-bottom)); margin-bottom: -6px; border-top: 1px solid var(--line); }
}
.pv2 .sheet-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(21, 33, 30, .4); }

/* ---------- dialogs ---------- */
.pv2 dialog.dlg { border: 0; padding: 0; border-radius: 20px; width: min(480px, calc(100vw - 28px)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); color: var(--ink); }
.pv2 dialog.dlg::backdrop { background: rgba(21, 33, 30, .45); }
.pv2 dialog.dlg .dlg-body { padding: 24px 24px 8px; }
.pv2 dialog.dlg .dlg-body h2 { margin-bottom: 8px; }
.pv2 dialog.dlg .dlg-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 16px 24px 22px; }
/* send / schedule review: a headline of what will happen, what they hear in order, one clear "Yes" */
.pv2 dialog.review-dlg { width: min(500px, calc(100vw - 28px)); }
.pv2 dialog.review-dlg[open]:not(:modal) { position: static; margin: 16px 0 0; width: 100%; box-shadow: none; border: 2px solid var(--go); }
.pv2 .review-head { display: flex; align-items: center; gap: 14px; }
.pv2 .review-head h2 { margin: 0 0 2px; font-size: 22px; line-height: 1.2; }
.pv2 .review-head p { margin: 0; font-size: 15px; }
.pv2 .review-ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--go-tint); color: var(--go); }
.pv2 .review-ic svg { width: 24px; height: 24px; }
.pv2 .review-label { margin: 20px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.pv2 .hear-list { list-style: none; margin: 0; padding: 4px 12px; border-radius: 14px; background: var(--paper); counter-reset: hear; }
.pv2 .hear-row { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.pv2 .hear-row + .hear-row { border-top: 1px solid var(--line); }
.pv2 .hear-row .play { flex: none; }
.pv2 .review-foot { justify-content: space-between; align-items: center; }
.pv2 .review-foot .btn-go { flex: 1; max-width: 300px; }
@media (max-width: 520px) { .pv2 .review-foot { flex-direction: column-reverse; align-items: stretch; } .pv2 .review-foot .btn, .pv2 .review-foot .btn-go { max-width: none; width: 100%; } }

/* ---------- toast ---------- */
.pv2 .toast { position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--ink); color: #fff; padding: 14px 20px; border-radius: 14px; font-weight: 700; box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); }
.pv2 .toast.error { background: #8E2219; }
@media (max-width: 999.98px) { .pv2 .toast { bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ---------- empty states ---------- */
.pv2 .empty { text-align: center; padding: 26px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv2 .empty .i.big { width: 44px; height: 44px; color: var(--ink3); margin-bottom: 4px; }
.pv2 .empty p { max-width: 460px; }
.pv2 .empty-act { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- pager ---------- */
.pv2 .pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.pv2 .pager .muted { margin-right: auto; }

/* ---------- tables ---------- */
.pv2 .table-wrap { overflow-x: auto; }
.pv2 table.t td { vertical-align: middle; }
.pv2 table.t tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) {
  .pv2 table.t.t-cards thead { display: none; }
  .pv2 table.t.t-cards, .pv2 table.t.t-cards tbody, .pv2 table.t.t-cards tr, .pv2 table.t.t-cards td { display: block; width: 100%; }
  .pv2 table.t.t-cards tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .pv2 table.t.t-cards tr:last-child { border-bottom: 0; }
  .pv2 table.t.t-cards td { border: 0; padding: 2px 0; text-align: left; }
  .pv2 table.t.t-cards td[data-l]::before { content: attr(data-l) " "; color: var(--ink2); font-size: 14px; font-weight: 700; }
  .pv2 table.t.t-cards td.r { text-align: left; }
}

/* ---------- plans ---------- */
.pv2 .plans { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pv2 .plan { position: relative; cursor: pointer; min-height: 60px; align-items: center; }
.pv2 .plan input { position: absolute; opacity: 0; }
.pv2 .plan:has(input:checked) { border: 2px solid var(--go); background: var(--go-tint); }
.pv2 .plan:has(input:focus-visible) { outline: 3px solid var(--go); outline-offset: 2px; }
.pv2 .plan.cur { cursor: default; }
.pv2 .plan .tag { position: absolute; top: -10px; left: 12px; font-size: 12px; font-weight: 700; background: var(--ink); color: #fff; border-radius: 6px; padding: 1px 7px; }
.pv2 .quote { flex-wrap: wrap; }
.pv2 .quote .grow { min-width: 240px; }
.pv2 .quote-lines { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: 16px; }
.pv2 .quote-lines li { display: flex; justify-content: space-between; gap: 12px; }
.pv2 .quote-lines li.total { border-top: 1px solid var(--edge); padding-top: 8px; margin-top: 4px; font-weight: 700; font-size: 18px; }
.pv2 .big-amount { font: 600 44px/1.1 "Rubik", sans-serif; letter-spacing: -0.02em; }
.pv2 .big-amount.small-amount { font-size: 26px; }
.pv2 .card-chip { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 36px; border-radius: 8px; background: var(--ink); color: #fff; font: 700 12px/1 "Rubik", sans-serif; flex: none; letter-spacing: .04em; }
.pv2 .card-chip.light { background: var(--paper); color: var(--ink2); border: 1px solid var(--line); }
.pv2 .cardbox { min-height: 0; border: 1.5px solid var(--edge); border-radius: 14px; padding: 6px 10px; background: var(--card); }
/* USAePay's frame holds one row (number, MM/YY, code): size it to that row instead of the browser's tall default */
.pv2 .cardbox iframe { display: block; width: 100% !important; height: 52px !important; border: 0 !important; }
.pv2 .mock-cardbox { display: grid; gap: 10px; }
.pv2 .lock-note { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink2); }

/* ---------- code entry ---------- */
.pv2 .code-help { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pv2 .bigcode { font: 600 34px/1.1 "Rubik", sans-serif; letter-spacing: .08em; }
.pv2 .codebox { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--paper); flex-wrap: wrap; }
.pv2 .codebox .grow { min-width: 180px; }

/* ---------- recorder ---------- */
.pv2 .recorder { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 0 6px; }
.pv2 .rec-btn { width: 112px; height: 112px; border-radius: 50%; border: 0; background: var(--stop); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 8px var(--stop-tint); transition: transform .1s; }
.pv2 .rec-btn svg { width: 40px; height: 40px; }
.pv2 .rec-btn:active { transform: scale(.96); }
.pv2 .rec-btn.on { animation: recpulse 1.6s infinite; }
@keyframes recpulse { 0%, 100% { box-shadow: 0 0 0 8px var(--stop-tint); } 50% { box-shadow: 0 0 0 18px var(--stop-tint); } }
.pv2 .rec-time { font: 600 40px/1 "Rubik", sans-serif; letter-spacing: -0.01em; }
.pv2 .rec-level { display: flex; align-items: center; gap: 3px; height: 40px; }
.pv2 .rec-level i { display: block; width: 5px; height: 4px; border-radius: 3px; background: var(--edge); transition: height .08s; }
.pv2 .rec-level.on i { background: var(--stop); }
.pv2 .mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pv2 .mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 14px; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); background: var(--card); min-height: 108px; }
.pv2 .mode-card .i { width: 28px; height: 28px; color: var(--go-deep); }
.pv2 .mode-card strong { font-size: 18px; }
.pv2 .mode-card.on { border: 2px solid var(--go); background: var(--go-tint); }
.pv2 .mode-card:hover { border-color: var(--go); }
@media (max-width: 700px) { .pv2 .mode-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pv2 .mode-card { min-height: 84px; padding: 12px 10px; align-items: center; text-align: center; } .pv2 .mode-card .sub { display: none; } .pv2 .mode-card strong { font-size: 16px; } }

/* ---------- private line tree ---------- */
.pv2 .callers-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pv2 .key { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; font: 600 20px/1 "Rubik", sans-serif; flex: none; }
.pv2 .key.light { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); }
.pv2 .key.none { background: transparent; border: 1.5px dashed var(--edge); color: var(--ink3); font-size: 14px; }
.pv2 .tree li { align-items: center; }
.pv2 .tree .node-main { flex: 1; min-width: 220px; display: flex; gap: 14px; align-items: center; }
.pv2 .tree .node-main .grow p:first-child { font-weight: 700; }
.pv2 .node-type { width: 40px; height: 40px; border-radius: 10px; background: var(--go-tint); color: var(--go-deep); display: grid; place-items: center; flex: none; }
.pv2 .node-type svg { width: 21px; height: 21px; }
.pv2 .hear-box { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--paper); flex-wrap: wrap; }
.pv2 .hear-box .grow { min-width: 200px; }
.pv2 details.more-box { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.pv2 details.more-box > summary { cursor: pointer; font-weight: 700; color: var(--go-deep); min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.pv2 details.more-box > summary::-webkit-details-marker { display: none; }
.pv2 details.more-box > summary::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--go-tint); font: 700 18px/1 "Rubik", sans-serif; }
.pv2 details.more-box[open] > summary::before { content: "–"; }
.pv2 .edit-box { padding: 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.pv2 .greet li .grow p:first-child { font-weight: 700; }
.pv2 .greet .said { font-style: italic; }
.pv2 .keys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pv2 .keys-grid .field { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
.pv2 .keys-grid .text { width: 76px; text-align: center; }

/* ---------- conference live room ---------- */
.pv2 .live-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pv2 .live-head .grow { min-width: 200px; }
.pv2 .room-state { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1250px) { .pv2 .room-state { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv2 .room-state .opt { flex-direction: column; align-items: flex-start; gap: 2px; }
.pv2 .room-state .inline-form { display: block; }
.pv2 button.opt { width: 100%; height: 100%; text-align: left; font: inherit; color: inherit; }
.pv2 .opt.is-on { border-color: var(--go); background: var(--go-tint); box-shadow: inset 0 0 0 1px var(--go); }
.pv2 .opt:has(input:disabled) { opacity: .4; cursor: not-allowed; }
@media (max-width: 700px) { .pv2 .room-state { grid-template-columns: minmax(0, 1fr); } }
.pv2 .hands { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--warn-tint); color: var(--warn-ink); font-weight: 700; flex-wrap: wrap; }
.pv2 .hands .grow { min-width: 180px; }
.pv2 .person { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pv2 .person:first-child { border-top: 0; }
.pv2 .person .who { flex: 1; min-width: 210px; display: flex; gap: 12px; align-items: center; }
.pv2 .person .who .grow p:first-child { font-weight: 700; }
.pv2 .person .status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--paper); color: var(--ink2); }
.pv2 .person .status.talking { background: var(--go); color: #fff; }
.pv2 .person .status.hand { background: var(--warn); color: #3D2A00; }
.pv2 .person .status.can { background: var(--go-tint); color: var(--go-deep); }
.pv2 .person .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pv2 .person .acts .btn { min-height: 44px; padding: 0 14px; font-size: 15px; }
.pv2 .rec-dot { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--stop); }
.pv2 .rec-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--stop); animation: pulse 1.4s infinite; }
.pv2 .open-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--go); margin-right: 8px; vertical-align: 1px; }
.pv2 .open-dot.closed { background: var(--ink3); }

/* bar chart (reports by day) */
.pv2 .daychart { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.pv2 .daychart > span { flex: 1; min-width: 3px; background: var(--go); border-radius: 3px 3px 0 0; position: relative; }
.pv2 .daychart > span.zero { background: #E6EBE8; min-height: 2px; }
.pv2 .daychart-axis { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink2); margin-top: 6px; }

/* menu page (phone) */
.pv2 .menu-list .row-link { min-height: 64px; font-size: 18px; font-weight: 700; }

/* receipt */
.pv2 .receipt { max-width: 560px; }
@media print {
  .pv2 .side, .pv2 .topbar, .pv2 .tabbar, .pv2 .no-print, .pv2 .flash { display: none !important; }
  body.app { display: block; background: #fff; }
  .pv2 .card { box-shadow: none; border: 0; }
}

/* utilities generated by dev/build_assets.py follow: .g-N (flex-grow N), .w-N (width N%) */

/* ---------- smooth page changes (owner 10-12: "feel smooth, not like a reload") ----------
   Same-site page changes cross-fade instead of flashing; the sidebar, the phone's top bar and bottom bar
   stay perfectly still (they keep their own transition names). Browsers without this just change pages. */
@view-transition { navigation: auto; }
.pv2 .side { view-transition-name: cm-side; }
.pv2 .topbar { view-transition-name: cm-topbar; }
.pv2 .tabbar { view-transition-name: cm-tabbar; }
::view-transition-group(cm-side), ::view-transition-group(cm-topbar), ::view-transition-group(cm-tabbar) { animation: none; }
::view-transition-old(cm-side), ::view-transition-new(cm-side),
::view-transition-old(cm-topbar), ::view-transition-new(cm-topbar),
::view-transition-old(cm-tabbar), ::view-transition-new(cm-tabbar) { animation: none; mix-blend-mode: normal; }
/* owner 10-13 ("still blinking a tiny bit"): the page itself changes at once - a fade showed both pages half see-through
   for ~0.2 s. The browser still holds the old page until the new one can paint, so nothing flashes white. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* a thin bar at the very top while a page is on its way (only shows when it takes longer than a blink) */
.pv2 .nav-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--go, #0F7B57) 40%, var(--go, #0F7B57) 60%, transparent);
  background-size: 50% 100%; background-repeat: no-repeat; transition: opacity 120ms; }
html.nav-busy .pv2 .nav-progress { opacity: 1; animation: cm-progress 900ms linear infinite; }
@keyframes cm-progress { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* Home: the real composer (same as the Send page); the "Before we call" box appears only once a message is chosen */
.pv2 .home-composer { display: grid; gap: 16px; margin-bottom: 20px; }
.pv2 .home-composer .home-send:empty { display: none; }
.pv2 .home-composer .composer .new-msg-row { margin-top: 14px; }

/* =================== polish 2 (owner 10-12: clean, in place, fewer words) =================== */
/* one row pattern for every list: [lead] title / sub-line [meta] [⋯] [›]; the whole row is the tap target */
.pv2 .items { list-style: none; margin: 0; padding: 0; }
.pv2 .item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 8px; margin: 0 -8px; border-radius: 12px; }
.pv2 .item + .item::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1px solid var(--line); }
.pv2 .item:has(.item-link):hover, .pv2 .item[data-row-play]:hover { background: var(--paper); }
.pv2 .item[data-row-play] { cursor: pointer; }
.pv2 .item-body { flex: 1; min-width: 0; }
.pv2 .item-title { font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2 .item-sub { font-size: 15px; color: var(--ink2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.pv2 .item-sub .pill { font-size: 13px; padding: 1px 8px; }
.pv2 .item-link { color: inherit; text-decoration: none; }
.pv2 .item-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.pv2 .item-link:focus-visible { outline: none; }
.pv2 .item-link:focus-visible::after { outline: 3px solid var(--go); outline-offset: -3px; }
.pv2 .item > :not(.item-body) { flex: none; position: relative; z-index: 1; }
/* an open ⋯ menu lifts its whole row above the rows after it (their buttons sat on top of the menu) */
.pv2 .item:has(> .more[open]), .pv2 .item > .more[open], .pv2 .more[open] { z-index: 30; }
.pv2 .item:has(> .more[open]) { position: relative; }
.pv2 .item > .chev { width: 20px; height: 20px; color: var(--ink3); pointer-events: none; z-index: 0; }
.pv2 .item > .meta { font-size: 15px; color: var(--ink2); white-space: nowrap; pointer-events: none; z-index: 0; }
.pv2 .item .key { width: 42px; height: 42px; font-size: 19px; }
.pv2 .item .node-type { width: 36px; height: 36px; }
.pv2 .item .wave { width: 120px; flex: none; }
.pv2 .item .cbox { margin: -8px -6px -8px -10px; }
.pv2 .item.off .item-title { color: var(--ink2); }
.pv2 .items-foot { display: flex; justify-content: center; padding-top: 12px; }
@media (max-width: 999.98px) {
  .pv2 .item { gap: 10px; min-height: 60px; }
  .pv2 .item .wave, .pv2 .item > .meta.desk-only { display: none; }
}
.pv2 .card > .items:first-child { margin-top: -6px; }

/* the single "⋯" button of a row or a card */
.pv2 .more > summary.more-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink2); cursor: pointer; list-style: none; }
.pv2 .more > summary.more-btn::-webkit-details-marker { display: none; }
.pv2 .more > summary.more-btn:hover, .pv2 .more[open] > summary.more-btn { background: #E6EBE8; color: var(--ink); }
.pv2 .more > summary.more-btn svg { width: 22px; height: 22px; }

/* sub-pages: one clear way back */
.pv2 .back-link { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-left: -4px; font-weight: 700; font-size: 16px; color: var(--go-deep); text-decoration: none; }
.pv2 .back-link svg { width: 18px; height: 18px; }
.pv2 .back-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pv2 .crumbs .sep { color: var(--ink3); }
.pv2 .crumbs { align-items: center; min-height: 36px; font-size: 16px; }
.pv2 .crumbs [aria-current] { color: var(--ink); }
@media (max-width: 999.98px) { .pv2 .sub-head .crumbs { margin: -6px 0 0; } }

/* edit boxes open as a sheet on top of the page */
.pv2 dialog.sheet-dlg { border: 0; padding: 0; border-radius: 20px; width: min(580px, calc(100vw - 28px)); max-height: 88vh; max-height: 88dvh; overflow: auto;
  background: var(--card); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.pv2 dialog.sheet-dlg::backdrop { background: rgba(21, 33, 30, .45); }
.pv2 .sheet-inner { padding: 22px 24px 24px; }
.pv2 .sheet-inner > .edit-box, .pv2 .sheet-inner .edit-box { border: 0; padding: 0; margin: 0; background: none; }
.pv2 .sheet-inner h2:first-child, .pv2 .sheet-inner h3:first-child { padding-right: 48px; margin-bottom: 14px; }
.pv2 .sheet-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink2); font: 600 26px/1 "Rubik", sans-serif; cursor: pointer; }
.pv2 dialog.sheet-dlg .sheet-grab { display: none; }
@media (max-width: 999.98px) {
  .pv2 dialog.sheet-dlg { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; }
  .pv2 dialog.sheet-dlg .sheet-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--edge); margin: 10px auto 0; }
  .pv2 .sheet-inner { padding: 12px 18px calc(22px + env(safe-area-inset-bottom)); }
}

/* sections of the private line: words on a computer, icon + word on a phone (always fits) */
.pv2 .sections { display: flex; gap: 4px; padding: 4px; background: #E6EBE8; border-radius: 14px; align-self: flex-start; max-width: 100%; }
.pv2 .sections a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 16px; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.pv2 .sections a svg { width: 20px; height: 20px; }
.pv2 .sections a:hover { color: var(--ink); }
.pv2 .sections a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(21, 33, 30, .12); }
.pv2 .sections a.on svg { color: var(--go-deep); }
.pv2 .sections .badge { min-width: 20px; height: 20px; font-size: 12px; padding: 0 6px; }
@media (max-width: 999.98px) {
  .pv2 .sections { align-self: stretch; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pv2 .sections a { flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 2px; font-size: 13px; }
  .pv2 .sections a span:not(.badge) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .pv2 .sections .badge { position: absolute; top: 4px; right: 8px; }
}

/* live search */
.pv2 .live-status { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ink2); background: var(--card); padding-left: 6px; }
.pv2 [aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.pv2 .searchbar .search .text { padding-right: 100px; }

/* a small "?" for the explanation */
.pv2 details.why { font-size: 15px; color: var(--ink2); }
.pv2 details.why > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; color: var(--go-deep); font-weight: 700; list-style: none; }
.pv2 details.why > summary::-webkit-details-marker { display: none; }
.pv2 details.why > summary svg { width: 18px; height: 18px; }
.pv2 details.why > p { margin-top: 4px; max-width: 640px; }

/* sections that open in place (settings of the line, conference options) */
.pv2 details.fold { border-top: 1px solid var(--line); }
.pv2 details.fold:first-of-type { border-top: 0; }
.pv2 .inline-ic { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; color: var(--ink2); }
.pv2 .bigcode-sm { font: 600 20px/1.3 "Rubik", sans-serif; letter-spacing: .06em; color: var(--ink); }
.pv2 .item.fresh { background: var(--go-tint); }
.pv2 details.fold-card > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; font: 600 19px/1.25 "Rubik", sans-serif; }
.pv2 details.fold-card > summary::-webkit-details-marker { display: none; }
.pv2 details.fold-card > summary::after { content: ""; width: 10px; height: 10px; border-right: 2.4px solid var(--ink3); border-bottom: 2.4px solid var(--ink3); transform: rotate(45deg); margin: -4px 6px 0 auto; transition: transform .15s; flex: none; }
.pv2 details.fold-card[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.pv2 details.fold > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; cursor: pointer; list-style: none; font: 600 19px/1.25 "Rubik", sans-serif; }
.pv2 details.fold > summary::-webkit-details-marker { display: none; }
.pv2 details.fold > summary .grow { min-width: 0; }
.pv2 details.fold > summary .sum-sub { display: block; font: 400 15px/1.35 "CMBody", sans-serif; color: var(--ink2); margin-top: 2px; }
.pv2 details.fold > summary::after { content: ""; width: 10px; height: 10px; border-right: 2.4px solid var(--ink3); border-bottom: 2.4px solid var(--ink3); transform: rotate(45deg); margin: -4px 6px 0 auto; transition: transform .15s; flex: none; }
.pv2 details.fold[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.pv2 details.fold > .fold-body { padding: 0 0 18px; }

/* a little calmer: card heads, notes */
.pv2 .card-head { margin-bottom: 10px; }
.pv2 .note { font-size: 15px; color: var(--ink2); }
.pv2 .topbar .brand { min-height: 44px; }
.pv2 .chip.on { background: var(--go-tint); color: var(--go-deep); border-color: #BFE0D0; }
.pv2 .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pv2 .item-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.pv2 .searchbar .search .text { padding-right: 16px; }
.pv2 details.why > summary { min-height: 44px; }
@media (max-width: 999.98px) {
  /* phone: the title and its one main button share the line when they fit */
  .pv2 .page-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .pv2 .page-head > .grow { flex: 1 1 180px; }
  .pv2 .page-head > .row { justify-content: flex-end; gap: 8px; }
  .pv2 .page-head.sub-head > .row { flex: 1 1 100%; justify-content: flex-start; }
}
/* a broadcast card: the whole card opens its report */
.pv2 .bcast { position: relative; }
.pv2 .bcast.tap:hover { border-color: var(--edge); }
.pv2 .bcast .item-link::after { border-radius: var(--r-card); }
.pv2 .bcast .play, .pv2 .bcast .above { position: relative; z-index: 1; }
.pv2 .bcast-head .chev { width: 20px; height: 20px; color: var(--ink3); flex: none; }
.pv2 .bcast .resultbar { margin-bottom: 8px; }

/* a pick-several dropdown (add the chosen people to several groups at once) */
.pv2 .more.pick { position: relative; }
.pv2 .more.pick > summary.btn { list-style: none; }
.pv2 .more.pick > summary.btn::-webkit-details-marker { display: none; }
.pv2 .pick-menu { left: auto; right: 0; max-height: min(60vh, 420px); overflow: auto; color: var(--ink); }
.pv2 .pick-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 17px; cursor: pointer; }
.pv2 .pick-opt:hover { background: var(--paper); }
.pv2 .pick-opt { position: relative; }
.pv2 .pick-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv2 .pick-opt:has(input:focus-visible) .ck-box { outline: 3px solid var(--go); outline-offset: 2px; }
.pv2 .pick-menu .btn { margin-top: 6px; }
@media (max-width: 999.98px) { .pv2 .pick-menu { left: 10px; right: 10px; max-height: 70dvh; } }
/* a round result dot as a row's lead (who we called) */
.pv2 .sw.dotsw { width: 14px; height: 14px; border-radius: 50%; margin: 0 6px; }

/* private line */
.pv2 .mode-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .pv2 .mode-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv2 .mode-cards.four .mode-card { min-height: 72px; flex-direction: row; justify-content: center; gap: 10px; } }
.pv2 .ok-ic { width: 24px; height: 24px; color: var(--go-deep); }
.pv2 .sticky-foot { position: sticky; bottom: 0; z-index: 3; background: var(--card); padding: 12px 0 4px; border-top: 1px solid var(--line); }
.pv2 .items.hear-row { background: var(--paper); border-radius: 14px; padding: 0 8px; }
.pv2 .items.hear-row .item { margin: 0; }
.pv2 .item .icon-btn { width: 44px; height: 44px; min-height: 44px; }
.pv2 .item .play.sm { width: 40px; height: 40px; }
.pv2 .callers-in .card.tight { min-width: 0; }
.pv2 .crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pv2 .crumbs a { min-height: 36px; display: inline-flex; align-items: center; }
.pv2 details.fold:first-child { border-top: 0; }
.pv2 .card > details.fold:first-of-type { margin-top: -8px; }
.pv2 .kv.keys { grid-template-columns: max-content 1fr; }

/* the live room: one compact row per person */
.pv2 .room .status { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--paper); color: var(--ink2); vertical-align: 1px; }
.pv2 .room .status svg { width: 14px; height: 14px; }
.pv2 .room .status.talking { background: var(--go); color: #fff; }
.pv2 .room .status.hand { background: var(--warn); color: #3D2A00; }
.pv2 .room .status.can { background: var(--go-tint); color: var(--go-deep); }
.pv2 .room .inline-form { display: inline-flex; }
.pv2 .btn.btn-sm { min-height: 44px; padding: 0 14px; font-size: 15px; }
.pv2 .room-state .opt .small { display: block; }
@media (max-width: 700px) { .pv2 .room-state { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pv2 .room-state .opt .small { display: none; } .pv2 .room-state .opt { min-height: 52px; justify-content: center; } }
/* a row title may take two lines (no "Daf yomi shiu…") */
.pv2 .item-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.pv2 .item > .chev-sp { width: 20px; flex: none; }
.pv2 .card-head { flex-wrap: wrap; }
.pv2 .card-head > h2.grow { flex: 1 1 150px; min-width: 0; }
.pv2 .item .play.sm { width: 44px; height: 44px; }

/* period picker (reports): a small segmented control that changes the totals in place */
.pv2 .seg-form { display: flex; align-items: center; gap: 8px; }
.pv2 .seg { display: inline-flex; gap: 4px; padding: 4px; margin: 0; border: 0; background: #E6EBE8; border-radius: 12px; max-width: 100%; }
.pv2 .seg label { position: relative; }
.pv2 .seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pv2 .seg span { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 9px; font-weight: 700; font-size: 15px; color: var(--ink2); white-space: nowrap; }
.pv2 .seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(21, 33, 30, .12); }
.pv2 .seg input:focus-visible + span { outline: 3px solid var(--go); outline-offset: 1px; }
@media (max-width: 999.98px) { .pv2 .seg-form, .pv2 .seg { width: 100%; } .pv2 .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pv2 .seg span { min-height: 44px; padding: 0 4px; } }
/* the upload box */
.pv2 .drop { position: relative; }
.pv2 .drop-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 16px; border: 2px dashed var(--edge); border-radius: 14px; background: var(--paper); text-align: center; color: var(--ink2); cursor: pointer; }
.pv2 .drop-area strong { color: var(--go-deep); }
.pv2 .drop-ic { width: 26px; height: 26px; color: var(--go-deep); flex: none; }
.pv2 .drop-hint { font-size: 14px; }
.pv2 .drop-input { margin-bottom: 8px; max-width: 100%; }
.pv2 .drop[data-drop-ready] .drop-input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pv2 .drop.has-file .drop-input, .pv2 .drop.has-file .drop-area { display: none; }
.pv2 .drop.over .drop-area, .pv2 .drop-input:focus-visible + .drop-area { border-color: var(--go); background: var(--go-tint); }
.pv2 .drop-picked { display: flex; align-items: center; gap: 10px 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; flex-wrap: wrap; background: var(--card); }
.pv2 .drop-picked .grow { min-width: 140px; }
.pv2 .drop-name { display: block; font-weight: 700; overflow-wrap: anywhere; }
.pv2 .drop-size { display: block; font-size: 14px; color: var(--ink2); }

/* =================== compact (owner 10-12: "everything is verrrry big") ===================
   Smaller type, tighter cards and rows. A computer gets the most of it; a phone keeps 44 px taps. */
.pv2 { font-size: 16px; }
.pv2 h1 { font-size: 27px; }
.pv2 h2 { font-size: 19px; }
.pv2 h3 { font-size: 16px; }
.pv2 .sub { font-size: 15px; margin-top: 2px; }
.pv2 .small, .pv2 .note, .pv2 .eyebrow, .pv2 .item-sub, .pv2 .help { font-size: 14px; }
.pv2 .card { padding: 16px 18px; }
.pv2 .card-head { margin-bottom: 8px; gap: 8px 12px; }
.pv2 .main, .pv2 .stack, .pv2 .cols { gap: 16px; }
.pv2 .stack-sm { gap: 10px; }
.pv2 .grid2 { gap: 16px; }
.pv2 .btn { font-size: 15px; gap: 8px; }
.pv2 .btn svg { width: 18px; height: 18px; }
.pv2 .btn-big { min-height: 50px; font-size: 17px; padding: 0 22px; }
.pv2 .text, .pv2 select.text, .pv2 textarea.text { font-size: 16px; }
.pv2 .opt { font-size: 16px; gap: 12px; }
.pv2 .notice { padding: 12px 14px; gap: 10px; }
.pv2 .flash { padding: 10px 12px 10px 14px; }
.pv2 .big-amount { font-size: 34px; }
.pv2 .stat { padding: 10px 12px; }
.pv2 .stat .value { font-size: 21px; }
.pv2 .fact .value { font-size: 19px; }
.pv2 .facts > div { padding: 10px 0; }
.pv2 .checks li { font-size: 15px; }
.pv2 .checks { gap: 8px; }
.pv2 .empty { padding: 16px 8px; }
.pv2 .empty .i.big { width: 36px; height: 36px; }
.pv2 .say-back { font-size: 16px; padding: 12px 14px; }
.pv2 .chip { font-size: 13px; }
.pv2 .tab-link { font-size: 15px; }
.pv2 .sections a { font-size: 15px; }
.pv2 .stat .label, .pv2 .fact .label { font-size: 13px; }
.pv2 details.fold > summary { font-size: 17px; min-height: 52px; }
.pv2 details.fold > summary .sum-sub { font-size: 14px; }
.pv2 details.fold-card > summary { font-size: 17px; }
.pv2 .mode-card { min-height: 88px; padding: 12px 14px; }
.pv2 .mode-card strong { font-size: 16px; }
.pv2 .quote-lines li.total { font-size: 16px; }
.pv2 .composer .sentence { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.75; }
.pv2 .bcast .resultbar { margin: 10px 0 6px; }
@media (min-width: 1000px) {
  /* a computer: smaller targets are fine with a mouse */
  .pv2 .main { padding: 22px 28px 32px; }
  .pv2 h1 { font-size: 26px; }
  .pv2 .btn { min-height: 40px; padding: 0 16px; }
  .pv2 .btn-quiet { min-height: 36px; padding: 0 6px; }
  .pv2 .btn-big { min-height: 46px; }
  .pv2 .text, .pv2 select.text { min-height: 42px; }
  .pv2 .opt { min-height: 46px; padding: 8px 12px; }
  .pv2 .opts.days .opt { min-height: 44px; }
  .pv2 .switch { min-height: 42px; }
  .pv2 .tab-link { min-height: 38px; padding: 0 14px; }
  .pv2 .sections a { min-height: 38px; padding: 0 14px; }
  .pv2 .item { min-height: 52px; padding: 6px 8px; gap: 10px; }
  .pv2 .item .key { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
  .pv2 .item .node-type { width: 32px; height: 32px; }
  .pv2 .item .avatar { width: 34px; height: 34px; font-size: 15px; }
  .pv2 .item .play { width: 38px; height: 38px; }
  .pv2 .item .play.sm { width: 34px; height: 34px; }
  .pv2 .item .icon-btn { width: 38px; height: 38px; min-height: 38px; }
  .pv2 .item .cbox { width: 36px; height: 36px; }
  .pv2 .more > summary.more-btn { width: 36px; height: 36px; }
  .pv2 .more-menu > a, .pv2 .more-menu > form > button:not(.btn), .pv2 .more-menu > button:not(.btn) { min-height: 40px; font-size: 15px; }
  .pv2 .play { width: 40px; height: 40px; }
  .pv2 .node-type { width: 34px; height: 34px; }
  .pv2 .key { width: 38px; height: 38px; font-size: 17px; }
  .pv2 a.chip { min-height: 34px; font-size: 14px; }
  .pv2 .seg span { min-height: 32px; font-size: 14px; }
  .pv2 .nav { padding: 8px 12px; font-size: 15px; gap: 12px; }
  .pv2 .nav svg { width: 20px; height: 20px; }
  .pv2 .side { padding: 18px 14px; }
  .pv2 .brand { font-size: 20px; padding-bottom: 14px; }
  .pv2 .side .side-send { min-height: 44px; font-size: 15px; margin-bottom: 12px; }
  body.app { grid-template-columns: 228px minmax(0, 1fr); }
  .pv2 .drop-area { min-height: 100px; }
  .pv2 .input { height: 50px; font-size: 21px; }
  .pv2 .input.code-in { height: 58px; font-size: 26px; }
}
@media (max-width: 999.98px) {
  /* a phone: smaller words, the same 44 px taps */
  .pv2 h1 { font-size: 23px; }
  .pv2 h2 { font-size: 18px; }
  .pv2 .card { padding: 14px 14px; }
  .pv2 .main { gap: 14px; }
  .pv2 .btn { min-height: 44px; padding: 0 16px; }
  .pv2 .btn-big { min-height: 50px; }
  .pv2 .item { min-height: 56px; }
  .pv2 .opt { min-height: 48px; }
  .pv2 .sections a { min-height: 54px; font-size: 12px; }
  .pv2 .big-amount { font-size: 30px; }
}

/* a row of controls above a list (report kind + period) */
.pv2 .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pv2 .toolbar .tabs { align-self: auto; }
@media (max-width: 999.98px) { .pv2 .toolbar { flex-direction: column; align-items: stretch; } }

/* round icon buttons keep their icon size whatever the button padding is */
.pv2 .btn.icon-btn { padding: 0; }
.pv2 .btn.icon-btn svg { width: 20px; height: 20px; flex: none; }
.pv2 .card-head > h2.grow { flex: 1 1 100px; }
.pv2 .card-head > .more { flex: none; }

/* phones: every play button is a full 44 px target; small links and closers too */
@media (max-width: 999.98px) {
  .pv2 .play.sm { width: 44px; height: 44px; }
  .pv2 .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .pv2 .flash-x { width: 44px; height: 44px; }
}
.pv2 .keys-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }

.pv2 .drop-acts { display: flex; gap: 6px; flex: none; }

/* ---------- small screens and big zoom (owner 10-12: a phone view at 150-200% zoom is only ~250-300 px wide) ----------
   Nothing may run off the edge at any width from 250 px up: tighter spacing, smaller headings, the section tabs
   wrap onto a second line, the bottom bar shrinks its labels and below 320 px shows icons only. */
@media (max-width: 380px) {
  .pv2 .main { padding: 14px 10px calc(96px + env(safe-area-inset-bottom)); gap: 14px; }
  .pv2 .card { padding: 14px 12px; border-radius: 14px; }
  .pv2 h1 { font-size: 22px; }
  .pv2 h2 { font-size: 17px; }
  .pv2 .sentence { font-size: 24px; line-height: 1.6; }
  .pv2 .sentence.sm { font-size: 22px; }
  .pv2 .tabbar { padding-left: 2px; padding-right: 2px; }
  .pv2 .tab { font-size: 11px; gap: 2px; min-width: 0; }
  .pv2 .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv2 .tab.send .fab { width: 54px; height: 54px; }
  .pv2 .tabs { flex-wrap: wrap; overflow: visible; }
  .pv2 .tab-link { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 15px; min-height: 44px; }
  .pv2 .opts.days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pv2 .btn { white-space: normal; text-align: center; line-height: 1.2; }
}
@media (max-width: 320px) {
  .pv2 .tab:not(.send) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pv2 .tab:not(.send) { justify-content: center; }
  .pv2 h1 { font-size: 21px; }
  .pv2 .sentence, .pv2 .sentence.sm { font-size: 20px; }
}

/* ---- design review 10-13 ---- */
.pv2 .item-title .dot { display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; }
/* choices: the length and date on their own line; no sound shape on phones (the play button is enough) */
.pv2 .opt .opt-sub { display: block; margin-top: 1px; }
@media (max-width: 999.98px) { .pv2 .opt .wave { display: none; } }
.pv2 dialog.dlg .dlg-text { margin: 4px 0 0; color: var(--ink2); }
.pv2 dialog.dlg .dlg-foot { justify-content: space-between; }
/* smooth: pop-ups and menus slide / fade in like pages do (not when the person asked for less motion) */
@media (prefers-reduced-motion: no-preference) {
  .pv2 dialog.dlg[open] { animation: cm-pop .18s ease-out; }
  .pv2 dialog.dlg[open]::backdrop { animation: cm-fade .18s ease-out; }
  .pv2 details.more[open] > .more-menu { animation: cm-menu .12s ease-out; transform-origin: top right; }
  .pv2 .toast { animation: cm-menu .14s ease-out; }
  @keyframes cm-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cm-menu { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
  @media (max-width: 999.98px) {
    .pv2 dialog.sheet-dlg[open], .pv2 dialog.review-dlg[open], .pv2 details.more[open] > .more-menu { animation: cm-up .2s ease-out; }
    @keyframes cm-up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
  }
}
/* phone: the send review is a bottom sheet like every other choice; values never break mid-phrase */
@media (max-width: 999.98px) {
  .pv2 dialog.review-dlg:modal { margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}
.pv2 .hear-row .strong, .pv2 .review-head p { overflow-wrap: anywhere; }
/* phone: section tabs share the width instead of scrolling out of sight */
@media (max-width: 999.98px) {
  .pv2 nav.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .pv2 nav.tabs .tab-link { justify-content: center; text-align: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) { .pv2 nav.tabs { display: flex; flex-wrap: wrap; } .pv2 nav.tabs .tab-link { flex: 1 1 auto; overflow: visible; } }   /* very narrow: wrap, never cut a word */

/* =================== support chat (Help; owner 10-13: support on the website is a chat, not call-backs) ===================
   One conversation. Support's answers sit on the left (white), the customer's on the right (soft green), by
   sender whatever the language: only the text inside a bubble takes its own direction (Hebrew/Yiddish right
   to left). The newest is at the bottom: the box scrolls from its end (column-reverse), so it opens there
   even without JavaScript, and earlier messages added at the top never move what is being read. */
@media (min-width: 1000px) { .pv2 .help-cols { grid-template-columns: minmax(0, 1fr) 380px; } }
.pv2 .chat-pane { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.pv2 .chat-scroll { display: flex; flex-direction: column-reverse; max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; border-radius: 13px; }
.pv2 .chat-scroll:focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }
.pv2 .chat-inner { padding: 14px 16px 16px; }
.pv2 .chat-log { display: flex; flex-direction: column; }
.pv2 .cm { display: flex; flex-direction: column; max-width: min(80%, 560px); margin-top: 3px; }
.pv2 .cm.run-start { margin-top: 14px; }
.pv2 .chat-day + .cm, .pv2 .chat-new + .cm { margin-top: 8px; }
.pv2 .cm.them { align-self: flex-start; align-items: flex-start; }
.pv2 .cm.me { align-self: flex-end; align-items: flex-end; }
.pv2 .cm-text { padding: 9px 14px; border-radius: 18px; line-height: 1.45; overflow-wrap: anywhere; text-align: start; color: var(--ink); }
/* the corner on the sender's side: a run of messages reads as one block */
.pv2 .them .cm-text { background: var(--card); border: 1px solid var(--line); border-top-left-radius: 6px; box-shadow: 0 1px 2px rgba(21, 33, 30, .05); }
.pv2 .them:not(.run-end) .cm-text { border-bottom-left-radius: 6px; }
.pv2 .me .cm-text { background: var(--go-tint); border: 1px solid #C6E4D5; border-top-right-radius: 6px; }
.pv2 .me:not(.run-end) .cm-text { border-bottom-right-radius: 6px; }
.pv2 .cm-who, .pv2 .cm-time { font-size: 13px; line-height: 1.3; color: var(--ink2); }
.pv2 .cm-who { display: flex; align-items: center; gap: 6px; margin: 0 0 5px 2px; font-weight: 700; }
.pv2 .cm-who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--go); flex: none; }
.pv2 .cm-time { margin: 4px 6px 0; }
/* "Call Me support" once per run, the time once per run: for a screen reader every message says both */
.pv2 .cm.me .cm-who, .pv2 .cm.them:not(.run-start) .cm-who, .pv2 .cm:not(.run-end) .cm-time {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pv2 .chat-day { display: flex; justify-content: center; margin: 20px 0 2px; }
.pv2 .chat-log > .chat-day:first-child { margin-top: 0; }
.pv2 .chat-day span { padding: 3px 12px; border-radius: 999px; background: #E6EBE8; color: var(--ink2); font-size: 13px; font-weight: 700; }
.pv2 .chat-new { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--go-deep); font-size: 13px; font-weight: 700; }
.pv2 .chat-new::before, .pv2 .chat-new::after { content: ""; flex: 1; border-top: 1.5px solid #9FD1BA; }
.pv2 .chat-wait { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 6px 6px 0; font-size: 13px; color: var(--ink2); }
.pv2 .chat-wait svg { width: 15px; height: 15px; color: var(--go); }
.pv2 .chat-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px 24px; text-align: center; }
.pv2 .chat-empty .i.big { width: 40px; height: 40px; color: var(--go); margin-bottom: 2px; }
.pv2 .chat-empty p { max-width: 380px; }
.pv2 .chat-top, .pv2 .chat-bottom { display: flex; justify-content: center; }
.pv2 .chat-top { margin-bottom: 10px; }
.pv2 .chat-bottom { margin-top: 16px; }
.pv2 .chat-pill { position: absolute; left: 50%; bottom: 12px; z-index: 2; transform: translateX(-50%); box-shadow: 0 10px 22px -10px rgba(10, 94, 66, .8); }
/* the box: grows with what is typed (up to about 6 lines), Send beside it */
.pv2 .chat-form { margin-top: 12px; }
.pv2 .chat-compose { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pv2 textarea.chat-input { flex: 1 1 220px; min-width: 0; resize: none; padding: 11px 14px; line-height: 1.45; field-sizing: content;
  min-height: calc(2.9em + 25px); max-height: calc(8.7em + 25px); overflow-y: auto; }
.pv2 .chat-send { flex: none; min-height: 48px; margin-left: auto; }
.pv2 .chat-form .count-note { margin-top: 6px; }
.pv2 .chat-err { margin-top: 10px; }
.pv2 .chat-err .btn .i { color: inherit; margin-top: 0; }   /* the Call button keeps its own colours inside the red note */
@media (min-width: 1000px) {
  .pv2 .chat-top .btn, .pv2 .chat-bottom .btn, .pv2 .chat-pill { min-height: 36px; }
  .pv2 .chat-send { min-height: 46px; padding: 0 20px; }
}
@media (max-width: 999.98px) {
  .pv2 .chat-scroll { max-height: min(54vh, 470px); }
  .pv2 .chat-inner { padding: 12px 10px 14px; }
  .pv2 .cm { max-width: min(88%, 560px); }
}
@media (prefers-reduced-motion: no-preference) {
  .pv2 .cm.fresh { animation: cm-chat-in .22s ease-out; }
  @keyframes cm-chat-in { from { opacity: 0; transform: translateY(6px); } }
}
/* phone: an answer from support not seen yet shows on the Menu tab (Help lives under Menu) */
.pv2 .tab { position: relative; }
.pv2 .tab .tab-badge { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; box-shadow: 0 0 0 2px var(--card); }

/* =================== final polish pass (10-13): functional + design review leftovers =================== */
/* m15: on a phone a focused control never hides under the bottom bar; P9: "Skip to the page" lands on the page quietly */
@media (max-width: 999.98px) { html { scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }
.pv2 main:focus { outline: none; }

/* S1: Reports = compact rows. When · which message to whom, a thin bar, the counts on one line; a pill only for a problem */
.pv2 .bc-list { list-style: none; margin: 0; padding: 0; }
.pv2 .bc-row { position: relative; padding: 12px 8px 10px; margin: 0 -8px; border-radius: 12px; }
.pv2 .bc-row + .bc-row::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1px solid var(--line); }
.pv2 .bc-row:hover { background: var(--paper); }
.pv2 .card > .bc-list:first-child { margin-top: -8px; }
.pv2 .bc-top { display: flex; align-items: center; gap: 10px; }
.pv2 .bc-title { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.pv2 .bc-title strong { font-weight: 700; }
.pv2 .bc-what { color: var(--ink2); }
.pv2 .bc-sep { color: var(--ink3); }
.pv2 .bc-row .chev { width: 20px; height: 20px; color: var(--ink3); flex: none; }
.pv2 .bc-row .pill { flex: none; }
.pv2 .bc-row .resultbar.sm { height: 8px; margin: 9px 0 7px; }
.pv2 .bc-row .resultbar.sm > span:first-child { border-radius: 3px 0 0 3px; }
.pv2 .bc-row .resultbar.sm > span:last-child { border-radius: 0 3px 3px 0; }
.pv2 .bc-row .legend { font-size: 14px; gap: 2px 16px; }
.pv2 .bc-row .legend .sw { width: 10px; height: 10px; margin-right: 6px; }
.pv2 .bc-err { margin-top: 4px; font-size: 14px; }
.pv2 .bc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.pv2 .bc-foot .legend { flex: 1 1 auto; }
.pv2 .bc-row .chip { position: relative; z-index: 1; min-height: 32px; margin: -2px 0; }
@media (max-width: 999.98px) { .pv2 .bc-row .chip { min-height: 44px; } }
.pv2 .bc-row .item-link::after { border-radius: 12px; }
@media (max-width: 999.98px) {
  .pv2 .bc-sep { display: none; }
  .pv2 .bc-what { display: block; font-size: 15px; margin-top: 1px; }
  .pv2 .bc-top { align-items: flex-start; }
  .pv2 .bc-row .chev { margin-top: 2px; }
}

/* P7: a composer list's ✕ on a phone (a link without JavaScript: it really closes) */
.pv2 .panel-x { display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin: -6px -6px -6px 0; border-radius: 50%; background: var(--paper); color: var(--ink2); }
.pv2 .panel-x svg { width: 20px; height: 20px; }
.pv2 .panel-x:hover { color: var(--ink); }

/* S7: a composer list rises as a sheet on a phone when you tap it, like every other sheet; the shade fades in.
   One that is open when the page arrives (Send opens "Which message?" by itself) is simply there - sliding in as the
   page appeared showed both half see-through (owner 10-13 "blinking"). */
@media (prefers-reduced-motion: no-preference) and (max-width: 999.98px) {
  html.js .pv2 .panel.sheetable.sheet-in { animation: cm-up .2s ease-out; }
  .pv2 .sheet-scrim.sheet-in { animation: cm-fade .18s ease-out; }
}
/* the shade drawn with the page under a sheet that is open on arrival (phone, with JavaScript only) */
html:not(.js) .pv2 .sheet-scrim.at-load { display: none; }
@media (min-width: 1000px) { .pv2 .sheet-scrim.at-load { display: none; } }

/* S10 (owner 10-13): Home on a computer - one bar under the sentence: what will happen on the left, the button on
   the right. The button column lines up with the 360 px column below (card: 18 px padding + 1 px border each side). */
.pv2 .home-composer .home-send { position: static; }
.pv2 .home-go { display: grid; grid-template-columns: minmax(0, 1fr) calc(360px - 38px); column-gap: calc(16px + 38px); align-items: center; }
.pv2 .home-go-info:empty { display: none; }
.pv2 .home-go-info:empty + .home-go-act { grid-column: 2; }
.pv2 .home-go-info > .say-back { margin: 0; }
.pv2 .home-go-info > * + * { margin-top: 12px; }
.pv2 .home-go-act .btn-big { width: 100%; }
.pv2 .card-head > a.link.tap { flex: none; }

/* S15: on a phone every text link is a full 44 px tap (the line spacing stays the same) */
@media (max-width: 999.98px) {
  .pv2 a.link { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .pv2 .crumbs a, .pv2 .back-link { min-height: 44px; }
}

/* S14: short screens and 200 % zoom - the bars give the page more room */
@media (max-width: 999.98px) and (max-height: 520px) {
  .pv2 .topbar { position: static; min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
  .pv2 .tabbar { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
  .pv2 .tab { min-height: 44px; gap: 0; }
  .pv2 .tab span:not(.fab):not(.badge) { font-size: 11px; }
  .pv2 .tab.send { margin-top: 0; }
  .pv2 .tab.send .fab { width: 44px; height: 44px; box-shadow: none; }
  .pv2 .tab.send .fab svg { width: 22px; height: 22px; }
  .pv2 .main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  html.js .pv2 .panel.sheetable, .pv2 dialog.sheet-dlg { max-height: 94dvh; }
  html { scroll-padding-top: 12px; scroll-padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* m18: the "are you sure?" page (JavaScript off) - the same layout as the dialog */
.pv2 .ask-step { padding: 24px 24px 18px; }
.pv2 .ask-step .ask-q { font-size: 22px; line-height: 1.3; }
.pv2 .ask-step .ask-text { margin-top: 6px; color: var(--ink2); }
.pv2 .ask-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* S2: on a phone the list comes first - Contacts keeps "Add" and ⋯ on the title line and the group choice inside the
   search row; Replies chooses where replies come from on the title line */
.pv2 .from-pick { display: flex; align-items: center; gap: 8px; }
.pv2 .from-pick .text { width: auto; min-width: 0; }
@media (max-width: 999.98px) {
  html.js .pv2 .searchbar { flex-wrap: nowrap; gap: 8px; }
  html.js .pv2 .searchbar .search { min-width: 0; flex: 1 1 auto; }
  html.js .pv2 .searchbar > select.text { flex: 0 1 136px; min-width: 96px; max-width: 42%; padding-left: 12px; padding-right: 34px; background-position: right 8px center; background-size: 20px; text-overflow: ellipsis; }
  .pv2 .page-head:has(.from-pick) > .grow { flex-basis: 90px; }
  .pv2 .page-head > .row:has(> .from-pick) { flex: 0 1 auto; }
  .pv2 .from-pick .text { max-width: 190px; }
}
/* a button inside a note keeps its own colours (the note's red / amber icon colour is for the note's own icon) */
.pv2 .notice-act .btn .i { color: inherit; margin-top: 0; }
/* very narrow (320 px, big zoom): a tab is never thinner than a finger; the group choice gets its own line */
@media (max-width: 999.98px) { .pv2 nav.tabs .tab-link { min-width: 44px; } }
@media (max-width: 359.98px) {
  html.js .pv2 .searchbar { flex-wrap: wrap; }
  html.js .pv2 .searchbar > select.text { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 999.98px) {
  .pv2 nav.tabs.many { display: flex; flex-wrap: wrap; }
  .pv2 nav.tabs.many .tab-link { flex: 1 1 auto; overflow: visible; padding: 0 9px; font-size: 14px; }
  /* a sub-page whose only action is its ⋯: the ⋯ stays on the title line */
  .pv2 .page-head.sub-head > .row:has(> .more:only-child) { flex: 0 0 auto; align-self: flex-start; }
}

/* "By phone" (owner 10-13): how to record a new message or intro by calling in - a short numbered list, the keys as keycaps */
.pv2 .phone-steps h2 { margin-bottom: 12px; }
.pv2 .sheet-inner:focus { outline: none; }
.pv2 ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 10px; }
.pv2 ol.steps > li { counter-increment: step; position: relative; padding-left: 40px; min-height: 28px; line-height: 1.5; }
.pv2 ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; background: var(--go-tint); color: var(--go-deep); display: grid; place-items: center; font: 700 15px/1 "Rubik", sans-serif; }
.pv2 .steps b.k { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; margin: 0 1px; border-radius: 7px; background: var(--card); border: 1.5px solid var(--edge); border-bottom-width: 3px; font: 700 15px/1 "Rubik", sans-serif; color: var(--ink); vertical-align: 1px; }
.pv2 ol.steps + .note { margin-top: 14px; }
.pv2 .phone-acct { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--paper); font-size: 15px; color: var(--ink2); }
.pv2 .phone-acct strong { color: var(--ink); letter-spacing: .04em; }
.pv2 .phone-steps.card { max-width: 560px; }
@media (max-width: 999.98px) { .pv2 .link-btn { min-width: 44px; justify-content: center; } }

/* ---- private line polish (10-13 pass) ---- */
/* rows with and without a play button: the empty place keeps every title in line (key rows, greetings) */
.pv2 .play-sp { display: block; flex: none; width: 44px; height: 1px; }
.pv2 .play-sp.lg { width: 46px; }
@media (min-width: 1000px) { .pv2 .play-sp { width: 34px; } .pv2 .play-sp.lg { width: 38px; } }
/* Line: "Callers dial" and "Last 7 days" are one card (side by side on a computer, the week as one line under it on a phone) */
@media (min-width: 1000px) { .pv2 .callers-in.with-conf { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.pv2 .line-facts { display: flex; gap: 24px; }
.pv2 .line-facts .lf-dial { flex: 1 1 auto; min-width: 0; }
.pv2 .line-facts .lf-week { flex: none; padding-left: 24px; border-left: 1px solid var(--line); }
@media (max-width: 999.98px) {
  .pv2 .line-facts { flex-direction: column; gap: 10px; }
  .pv2 .line-facts .lf-week { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
/* "How does my line work?" at the foot of the menu it explains */
.pv2 .card > details.line-why { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
/* Conference: the heading has room above the first fold; the two ways on are rows like any other */
.pv2 .card.conf-opts > details.fold:first-of-type { margin-top: 0; }
.pv2 .card.conf-opts > .conf-more { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
/* while the conference is closed and empty, the live room takes no space at all */
.pv2 [data-live-wrap]:empty { display: none; }
/* Line reports: Messages / Conference and the period in ONE row on a phone (the period is a small list there) */
.pv2 .period-pick { display: flex; align-items: center; gap: 8px; }
.pv2 .period-pick select.text { width: auto; min-width: 0; font-weight: 700; font-size: 15px; padding-left: 14px; }
@media (max-width: 999.98px) {
  .pv2 .toolbar.rep-bar { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .pv2 .toolbar.rep-bar > .tabs { flex: 1 1 auto; min-width: 0; }
  .pv2 .toolbar.rep-bar > .period-pick { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 380px) {
  .pv2 .toolbar.rep-bar > .tabs { flex-wrap: nowrap; }
  .pv2 .toolbar.rep-bar .tab-link { padding: 0 8px; font-size: 14px; }
  .pv2 .period-pick select.text { padding-left: 10px; padding-right: 34px; background-position: right 8px center; background-size: 20px; font-size: 14px; }
}
@media (max-width: 300px) { .pv2 .toolbar.rep-bar { flex-wrap: wrap; } .pv2 .toolbar.rep-bar > .period-pick { flex: 1 1 100%; } .pv2 .period-pick select.text { width: 100%; } }
/* conference report: five numbers (count, people, average size, average length, total) */
.pv2 .stat-row.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 999.98px) { .pv2 .stat-row.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv2 .stat-row.five > .stat:last-child { grid-column: 1 / -1; } }
/* the period's short one-person calls: one fold under the conferences */
.pv2 .card > details.fold.short-calls { margin-top: 14px; border-top: 1px solid var(--line); }
/* "What callers hear": the row fills its grey box even when its sub-line is short ("Your recording") */
.pv2 .items.hear-row > .item { flex: 1 1 auto; min-width: 0; }
/* turning the line off: the site's one "are you sure" (question heading, plain consequence, quiet left · solid red right) */
.pv2 .sure-text { margin-top: 6px; color: var(--ink2); }
.pv2 .form-actions.sure-foot { justify-content: space-between; margin-top: 18px; }
/* Greetings: the line under the path keeps its distance from the first fold */
.pv2 .card > p.note + details.fold { margin-top: 6px; }

/* "Get started" (owner 10-13): a new account's three steps - done = a green tick, now = the green number with its
   buttons, later = waiting quietly. The same numbered look as the "By phone" steps. */
.pv2 .start > h2 { margin-bottom: 2px; }
.pv2 .start > .sub { margin-bottom: 8px; }
.pv2 .start-steps { list-style: none; margin: 0; padding: 0; }
.pv2 .start-steps > li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.pv2 .start-steps > li + li { border-top: 1px solid var(--line); }
.pv2 .start-steps > li:last-child { padding-bottom: 2px; }
.pv2 .start-n { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--card); color: var(--ink2); font: 700 16px/1 "Rubik", sans-serif; }
.pv2 .start-n svg { width: 17px; height: 17px; }
.pv2 .start-steps .now .start-n { background: var(--go); border-color: var(--go); color: #fff; }
.pv2 .start-steps .done .start-n { background: var(--go-tint); border-color: var(--go-tint); color: var(--go-deep); }
.pv2 .start-steps .grow { min-width: 0; }
.pv2 .start-t { font-weight: 700; font-size: 17px; line-height: 1.3; padding-top: 5px; }
.pv2 .start-steps .later .start-t, .pv2 .start-steps .done .start-t { color: var(--ink2); font-weight: 600; }
.pv2 .start-s { margin-top: 3px; font-size: 15px; color: var(--ink2); }
.pv2 .start-steps .btns { margin-top: 12px; }
.pv2 .start-empty { padding-bottom: 12px; }
/* a card head with a button and a ⋯ (Intros): on a phone the ⋯ stays beside its button, never alone on a line */
@media (max-width: 999.98px) { .pv2 .card-head:has(> .btn):has(> .more) > h2.grow { flex-basis: 40px; } }

/* caller-ID notice: "Why is this changing?" opens the reason right under the sentence (no JavaScript needed) */
.pv2 .cid-why { margin-top: 6px; }
.pv2 .cid-why > summary { cursor: pointer; color: var(--go-deep); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; list-style: none; width: fit-content; }
.pv2 .cid-why > summary::-webkit-details-marker { display: none; }
.pv2 .cid-why[open] > summary { margin-bottom: 6px; }
.pv2 .cid-why > p { font-weight: 400; color: var(--ink); line-height: 1.5; max-width: 70ch; }

@media (max-width: 999.98px) { .pv2 .cid-why > summary { min-height: 44px; display: flex; align-items: center; } }

/* Long choice lists (the messages / intros / groups in the send sentence; 586 on a busy account): the browser
   draws only the rows on screen - opening "Which message?" took over a second (owner 10-14). Same look; a row
   keeps its real height once it was drawn (auto). */
.pv2 .opts.long > .opt { content-visibility: auto; contain-intrinsic-block-size: auto 64px; }
@media (max-width: 999.98px) { .pv2 .opts.long > .opt { contain-intrinsic-block-size: auto 68px; } }
/* while the server redraws after a choice: the old button fades a little (only when it takes a moment) and
   cannot be pressed - it may still be for the message chosen before */
.pv2 [data-slot="sendbox"][aria-busy="true"] > * { opacity: .5; pointer-events: none; transition: opacity .15s .15s; }
/* without JavaScript the rest of a long list (<noscript data-later>, see composer.php) is just more rows */
html:not(.js) .pv2 .opts > noscript { display: contents; }

/* generated */
.pv2 .g-1{flex:1 1 0%}.pv2 .g-2{flex:2 1 0%}.pv2 .g-3{flex:3 1 0%}.pv2 .g-4{flex:4 1 0%}.pv2 .g-5{flex:5 1 0%}.pv2 .g-6{flex:6 1 0%}.pv2 .g-7{flex:7 1 0%}.pv2 .g-8{flex:8 1 0%}.pv2 .g-9{flex:9 1 0%}.pv2 .g-10{flex:10 1 0%}.pv2 .g-11{flex:11 1 0%}.pv2 .g-12{flex:12 1 0%}.pv2 .g-13{flex:13 1 0%}.pv2 .g-14{flex:14 1 0%}.pv2 .g-15{flex:15 1 0%}.pv2 .g-16{flex:16 1 0%}.pv2 .g-17{flex:17 1 0%}.pv2 .g-18{flex:18 1 0%}.pv2 .g-19{flex:19 1 0%}.pv2 .g-20{flex:20 1 0%}.pv2 .g-21{flex:21 1 0%}.pv2 .g-22{flex:22 1 0%}.pv2 .g-23{flex:23 1 0%}.pv2 .g-24{flex:24 1 0%}.pv2 .g-25{flex:25 1 0%}.pv2 .g-26{flex:26 1 0%}.pv2 .g-27{flex:27 1 0%}.pv2 .g-28{flex:28 1 0%}.pv2 .g-29{flex:29 1 0%}.pv2 .g-30{flex:30 1 0%}.pv2 .g-31{flex:31 1 0%}.pv2 .g-32{flex:32 1 0%}.pv2 .g-33{flex:33 1 0%}.pv2 .g-34{flex:34 1 0%}.pv2 .g-35{flex:35 1 0%}.pv2 .g-36{flex:36 1 0%}.pv2 .g-37{flex:37 1 0%}.pv2 .g-38{flex:38 1 0%}.pv2 .g-39{flex:39 1 0%}.pv2 .g-40{flex:40 1 0%}.pv2 .g-41{flex:41 1 0%}.pv2 .g-42{flex:42 1 0%}.pv2 .g-43{flex:43 1 0%}.pv2 .g-44{flex:44 1 0%}.pv2 .g-45{flex:45 1 0%}.pv2 .g-46{flex:46 1 0%}.pv2 .g-47{flex:47 1 0%}.pv2 .g-48{flex:48 1 0%}.pv2 .g-49{flex:49 1 0%}.pv2 .g-50{flex:50 1 0%}.pv2 .g-51{flex:51 1 0%}.pv2 .g-52{flex:52 1 0%}.pv2 .g-53{flex:53 1 0%}.pv2 .g-54{flex:54 1 0%}.pv2 .g-55{flex:55 1 0%}.pv2 .g-56{flex:56 1 0%}.pv2 .g-57{flex:57 1 0%}.pv2 .g-58{flex:58 1 0%}.pv2 .g-59{flex:59 1 0%}.pv2 .g-60{flex:60 1 0%}.pv2 .g-61{flex:61 1 0%}.pv2 .g-62{flex:62 1 0%}.pv2 .g-63{flex:63 1 0%}.pv2 .g-64{flex:64 1 0%}.pv2 .g-65{flex:65 1 0%}.pv2 .g-66{flex:66 1 0%}.pv2 .g-67{flex:67 1 0%}.pv2 .g-68{flex:68 1 0%}.pv2 .g-69{flex:69 1 0%}.pv2 .g-70{flex:70 1 0%}.pv2 .g-71{flex:71 1 0%}.pv2 .g-72{flex:72 1 0%}.pv2 .g-73{flex:73 1 0%}.pv2 .g-74{flex:74 1 0%}.pv2 .g-75{flex:75 1 0%}.pv2 .g-76{flex:76 1 0%}.pv2 .g-77{flex:77 1 0%}.pv2 .g-78{flex:78 1 0%}.pv2 .g-79{flex:79 1 0%}.pv2 .g-80{flex:80 1 0%}.pv2 .g-81{flex:81 1 0%}.pv2 .g-82{flex:82 1 0%}.pv2 .g-83{flex:83 1 0%}.pv2 .g-84{flex:84 1 0%}.pv2 .g-85{flex:85 1 0%}.pv2 .g-86{flex:86 1 0%}.pv2 .g-87{flex:87 1 0%}.pv2 .g-88{flex:88 1 0%}.pv2 .g-89{flex:89 1 0%}.pv2 .g-90{flex:90 1 0%}.pv2 .g-91{flex:91 1 0%}.pv2 .g-92{flex:92 1 0%}.pv2 .g-93{flex:93 1 0%}.pv2 .g-94{flex:94 1 0%}.pv2 .g-95{flex:95 1 0%}.pv2 .g-96{flex:96 1 0%}.pv2 .g-97{flex:97 1 0%}.pv2 .g-98{flex:98 1 0%}.pv2 .g-99{flex:99 1 0%}.pv2 .g-100{flex:100 1 0%}
.pv2 .w-0{width:0%}.pv2 .w-1{width:1%}.pv2 .w-2{width:2%}.pv2 .w-3{width:3%}.pv2 .w-4{width:4%}.pv2 .w-5{width:5%}.pv2 .w-6{width:6%}.pv2 .w-7{width:7%}.pv2 .w-8{width:8%}.pv2 .w-9{width:9%}.pv2 .w-10{width:10%}.pv2 .w-11{width:11%}.pv2 .w-12{width:12%}.pv2 .w-13{width:13%}.pv2 .w-14{width:14%}.pv2 .w-15{width:15%}.pv2 .w-16{width:16%}.pv2 .w-17{width:17%}.pv2 .w-18{width:18%}.pv2 .w-19{width:19%}.pv2 .w-20{width:20%}.pv2 .w-21{width:21%}.pv2 .w-22{width:22%}.pv2 .w-23{width:23%}.pv2 .w-24{width:24%}.pv2 .w-25{width:25%}.pv2 .w-26{width:26%}.pv2 .w-27{width:27%}.pv2 .w-28{width:28%}.pv2 .w-29{width:29%}.pv2 .w-30{width:30%}.pv2 .w-31{width:31%}.pv2 .w-32{width:32%}.pv2 .w-33{width:33%}.pv2 .w-34{width:34%}.pv2 .w-35{width:35%}.pv2 .w-36{width:36%}.pv2 .w-37{width:37%}.pv2 .w-38{width:38%}.pv2 .w-39{width:39%}.pv2 .w-40{width:40%}.pv2 .w-41{width:41%}.pv2 .w-42{width:42%}.pv2 .w-43{width:43%}.pv2 .w-44{width:44%}.pv2 .w-45{width:45%}.pv2 .w-46{width:46%}.pv2 .w-47{width:47%}.pv2 .w-48{width:48%}.pv2 .w-49{width:49%}.pv2 .w-50{width:50%}.pv2 .w-51{width:51%}.pv2 .w-52{width:52%}.pv2 .w-53{width:53%}.pv2 .w-54{width:54%}.pv2 .w-55{width:55%}.pv2 .w-56{width:56%}.pv2 .w-57{width:57%}.pv2 .w-58{width:58%}.pv2 .w-59{width:59%}.pv2 .w-60{width:60%}.pv2 .w-61{width:61%}.pv2 .w-62{width:62%}.pv2 .w-63{width:63%}.pv2 .w-64{width:64%}.pv2 .w-65{width:65%}.pv2 .w-66{width:66%}.pv2 .w-67{width:67%}.pv2 .w-68{width:68%}.pv2 .w-69{width:69%}.pv2 .w-70{width:70%}.pv2 .w-71{width:71%}.pv2 .w-72{width:72%}.pv2 .w-73{width:73%}.pv2 .w-74{width:74%}.pv2 .w-75{width:75%}.pv2 .w-76{width:76%}.pv2 .w-77{width:77%}.pv2 .w-78{width:78%}.pv2 .w-79{width:79%}.pv2 .w-80{width:80%}.pv2 .w-81{width:81%}.pv2 .w-82{width:82%}.pv2 .w-83{width:83%}.pv2 .w-84{width:84%}.pv2 .w-85{width:85%}.pv2 .w-86{width:86%}.pv2 .w-87{width:87%}.pv2 .w-88{width:88%}.pv2 .w-89{width:89%}.pv2 .w-90{width:90%}.pv2 .w-91{width:91%}.pv2 .w-92{width:92%}.pv2 .w-93{width:93%}.pv2 .w-94{width:94%}.pv2 .w-95{width:95%}.pv2 .w-96{width:96%}.pv2 .w-97{width:97%}.pv2 .w-98{width:98%}.pv2 .w-99{width:99%}.pv2 .w-100{width:100%}
.pv2 .bh-0{height:0%}.pv2 .bh-1{height:1%}.pv2 .bh-2{height:2%}.pv2 .bh-3{height:3%}.pv2 .bh-4{height:4%}.pv2 .bh-5{height:5%}.pv2 .bh-6{height:6%}.pv2 .bh-7{height:7%}.pv2 .bh-8{height:8%}.pv2 .bh-9{height:9%}.pv2 .bh-10{height:10%}.pv2 .bh-11{height:11%}.pv2 .bh-12{height:12%}.pv2 .bh-13{height:13%}.pv2 .bh-14{height:14%}.pv2 .bh-15{height:15%}.pv2 .bh-16{height:16%}.pv2 .bh-17{height:17%}.pv2 .bh-18{height:18%}.pv2 .bh-19{height:19%}.pv2 .bh-20{height:20%}.pv2 .bh-21{height:21%}.pv2 .bh-22{height:22%}.pv2 .bh-23{height:23%}.pv2 .bh-24{height:24%}.pv2 .bh-25{height:25%}.pv2 .bh-26{height:26%}.pv2 .bh-27{height:27%}.pv2 .bh-28{height:28%}.pv2 .bh-29{height:29%}.pv2 .bh-30{height:30%}.pv2 .bh-31{height:31%}.pv2 .bh-32{height:32%}.pv2 .bh-33{height:33%}.pv2 .bh-34{height:34%}.pv2 .bh-35{height:35%}.pv2 .bh-36{height:36%}.pv2 .bh-37{height:37%}.pv2 .bh-38{height:38%}.pv2 .bh-39{height:39%}.pv2 .bh-40{height:40%}.pv2 .bh-41{height:41%}.pv2 .bh-42{height:42%}.pv2 .bh-43{height:43%}.pv2 .bh-44{height:44%}.pv2 .bh-45{height:45%}.pv2 .bh-46{height:46%}.pv2 .bh-47{height:47%}.pv2 .bh-48{height:48%}.pv2 .bh-49{height:49%}.pv2 .bh-50{height:50%}.pv2 .bh-51{height:51%}.pv2 .bh-52{height:52%}.pv2 .bh-53{height:53%}.pv2 .bh-54{height:54%}.pv2 .bh-55{height:55%}.pv2 .bh-56{height:56%}.pv2 .bh-57{height:57%}.pv2 .bh-58{height:58%}.pv2 .bh-59{height:59%}.pv2 .bh-60{height:60%}.pv2 .bh-61{height:61%}.pv2 .bh-62{height:62%}.pv2 .bh-63{height:63%}.pv2 .bh-64{height:64%}.pv2 .bh-65{height:65%}.pv2 .bh-66{height:66%}.pv2 .bh-67{height:67%}.pv2 .bh-68{height:68%}.pv2 .bh-69{height:69%}.pv2 .bh-70{height:70%}.pv2 .bh-71{height:71%}.pv2 .bh-72{height:72%}.pv2 .bh-73{height:73%}.pv2 .bh-74{height:74%}.pv2 .bh-75{height:75%}.pv2 .bh-76{height:76%}.pv2 .bh-77{height:77%}.pv2 .bh-78{height:78%}.pv2 .bh-79{height:79%}.pv2 .bh-80{height:80%}.pv2 .bh-81{height:81%}.pv2 .bh-82{height:82%}.pv2 .bh-83{height:83%}.pv2 .bh-84{height:84%}.pv2 .bh-85{height:85%}.pv2 .bh-86{height:86%}.pv2 .bh-87{height:87%}.pv2 .bh-88{height:88%}.pv2 .bh-89{height:89%}.pv2 .bh-90{height:90%}.pv2 .bh-91{height:91%}.pv2 .bh-92{height:92%}.pv2 .bh-93{height:93%}.pv2 .bh-94{height:94%}.pv2 .bh-95{height:95%}.pv2 .bh-96{height:96%}.pv2 .bh-97{height:97%}.pv2 .bh-98{height:98%}.pv2 .bh-99{height:99%}.pv2 .bh-100{height:100%}