/* ==========================================================================
   lg-b: refund-policy, service-delivery, acceptable-use, cookie-policy
   Builds on lg-a's policy template (lg-a.css). Prefix: lg-b-
   ========================================================================== */

/* ---------- Generic: numbered step flow inside a policy (ol.lg-b-steps > li > strong + text) ---------- */
.lg-prose ol.lg-b-steps { counter-reset: lg-b-step; display: grid; margin: 1.6em 0; padding: 0; list-style: none; }
.lg-prose ol.lg-b-steps > li { counter-increment: lg-b-step; position: relative; min-height: 40px; margin: 0; padding: 0 0 24px 58px; }
.lg-prose ol.lg-b-steps > li:last-child { padding-bottom: 0; }
.lg-b-steps > li::before {
  content: counter(lg-b-step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: var(--accent);
}
.lg-b-steps > li::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px; width: 1px; background: linear-gradient(var(--line-2), transparent); }
.lg-b-steps > li:last-child::after { display: none; }
.lg-b-steps > li > strong:first-child { display: block; padding-top: 6px; margin-bottom: 4px; font-size: 1.04rem; font-weight: 580; letter-spacing: -0.015em; color: var(--ink); }

/* ---------- Generic: table helpers ---------- */
.prose .lg-table .lg-b-num { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 0.86em; font-variant-numeric: tabular-nums; color: var(--ink); }
.prose .lg-table thead .lg-b-num { font-size: 0.7rem; color: var(--muted); }
.prose .lg-table .lg-b-mono { white-space: nowrap; font-family: var(--mono); font-size: 0.86em; font-variant-numeric: tabular-nums; color: var(--ink); }
.prose .lg-table tbody tr.lg-b-total th, .prose .lg-table tbody tr.lg-b-total td { border-top: 1px solid var(--line-2); background: var(--bg-2); font-weight: 600; color: var(--ink); }
.prose .lg-table tbody tr.lg-b-total td { font-size: 0.95em; }

/* ---------- Generic: long cells in these policy tables get no one-word last lines ---------- */
.lg-prose .lg-table td { text-wrap: pretty; }

/* ---------- Generic: keep a short run of words (e.g. a key combination in brackets) on one line ---------- */
.lg-b-nowrap { white-space: nowrap; }

/* ---------- Generic: extra chip tones next to lg-a's .lg-tag ---------- */
.lg-tag.lg-b-tag--no { color: color-mix(in srgb, var(--red) 82%, var(--ink)); background: color-mix(in srgb, var(--red) 10%, transparent); border-color: transparent; }
.lg-tag.lg-b-tag--warn { color: color-mix(in srgb, var(--amber) 78%, var(--ink)); background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: transparent; }

/* ==========================================================================
   refund-policy.html: money-back periods at a glance
   ========================================================================== */
.lg-b-rf-win { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 1.5em 0 0; }
.lg-b-rf-win__item { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lg-b-rf-win__fig { display: flex; align-items: baseline; gap: 6px; font-size: 2.3rem; font-weight: 540; letter-spacing: -0.055em; line-height: 1; color: var(--ink); }
.lg-b-rf-win__fig small { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lg-b-rf-win__bar { display: block; height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.lg-b-rf-win__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 1.1s var(--ease) 0.15s; }
.lg-b-rf-win.is-visible .lg-b-rf-win__fill--30 { width: 100%; background: var(--green); }
.lg-b-rf-win.is-visible .lg-b-rf-win__fill--7 { width: 23.3%; }
.lg-b-rf-win__item p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.lg-b-rf-win__item.is-off { background: transparent; box-shadow: none; border-style: dashed; }
.lg-b-rf-win__item.is-off .lg-b-rf-win__fig { color: var(--muted); }
.lg-b-rf-win + .lg-table { margin-top: 10px; }
@media (min-width: 641px) {
  /* product names get the room (their plan lists fit on one line); the period column is only as wide as its chip */
  .prose .lg-table .lg-b-rf-products thead th:first-child { width: 36%; }
  .prose .lg-table .lg-b-rf-products td:nth-child(2), .prose .lg-table .lg-b-rf-products thead th:nth-child(2) { width: 1%; white-space: nowrap; padding-right: 28px; }
  .prose .lg-table .lg-b-rf-pay thead th:first-child { width: 36%; }
  .prose .lg-table .lg-b-rf-pay tbody th { font-weight: 520; color: var(--ink); }
}

/* ==========================================================================
   acceptable-use.html: what's allowed where, plan limits
   ========================================================================== */
@media (min-width: 641px) {
  .prose .lg-table .lg-b-aup-matrix thead th:first-child { width: 40%; }
  .prose .lg-table .lg-b-aup-matrix thead th:not(:first-child) { width: 20%; }
  .prose .lg-table .lg-b-aup-matrix tbody th[scope="row"] { min-width: 200px; font-weight: 520; color: var(--ink-2); }
  .prose .lg-table .lg-b-aup-matrix td { white-space: nowrap; vertical-align: middle; }
  .prose .lg-table .lg-b-aup-matrix tbody tr:hover th, .prose .lg-table .lg-b-aup-matrix tbody tr:hover td { background: var(--bg); }
  /* seven columns: tighter cells, and "No fixed cap" may wrap, so the table fits the text column without scrolling */
  .prose .lg-table .lg-b-aup-limits th, .prose .lg-table .lg-b-aup-limits td { padding-left: 12px; padding-right: 12px; }
  .prose .lg-table .lg-b-aup-limits tbody th[scope="row"] { min-width: 0; }
  /* every value stays on one line except "No fixed cap", which may break once in the two count columns */
  .prose .lg-table .lg-b-aup-limits .lg-b-mono { white-space: nowrap; }
  .prose .lg-table .lg-b-aup-limits td.lg-b-mono:nth-child(n+6) { white-space: normal; min-width: 5.6em; text-wrap: balance; }
}

/* sending limits: three even-ish text columns, the limit's figure stays on one line and the rest wraps under it */
@media (min-width: 641px) {
  .prose .lg-table .lg-b-aup-send thead th:first-child { width: 32%; }
  .prose .lg-table .lg-b-aup-send thead th:nth-child(2) { width: 30%; }
  .prose .lg-table .lg-b-aup-send td .lg-table__dur { display: inline-block; }
}

@media (min-width: 641px) and (max-width: 820px) {
  .prose .lg-table .lg-b-aup-matrix th, .prose .lg-table .lg-b-aup-matrix td,
  .prose .lg-table .lg-b-aup-limits th, .prose .lg-table .lg-b-aup-limits td { padding-left: 9px; padding-right: 9px; }
  .prose .lg-table .lg-b-aup-matrix tbody th[scope="row"] { min-width: 170px; }
}

/* ==========================================================================
   cookie-policy.html: live storage check
   ========================================================================== */
.lg-b-ck-store { margin: 1.4em 0; }
.lg-b-ck-store .lg-table { margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 641px) {
  .prose .lg-table .lg-b-ck-table thead th:first-child { width: 34%; }
  .prose .lg-table .lg-b-ck-table .lg-b-ck-cell { width: 1%; white-space: nowrap; vertical-align: middle; }
}
.lg-b-ck-cell .lg-tag { margin-right: 6px; }
/* "localStorage · until cleared": wrap only at the separator, never inside a phrase */
.lg-b-ck-table th small span { white-space: nowrap; }
.prose .lg-table tr.is-stored th code { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: var(--green-soft); }
.lg-b-ck-rm {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
  font-family: var(--font); font-size: 0.76rem; font-weight: 520; line-height: 1;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.lg-b-ck-rm:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.lg-b-ck-rm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg-b-ck-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  padding: 14px 16px 14px 18px; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius); background: var(--bg-2);
}
.prose .lg-b-ck-bar__sum { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.lg-b-ck-bar__sum strong { color: var(--ink); font-weight: 600; }
.lg-b-ck-bar .btn svg, .lg-b-ck-bar .btn:hover svg { transform: none; width: 15px; height: 15px; }
.lg-b-ck-bar .btn[disabled] { opacity: 0.5; pointer-events: none; }

/* third-party services: four text columns don't fit the 760px text column (every cell ran 4-6 lines),
   so each service is a row with its name on the left and When / Why / What it receives as labelled lines */
@media (min-width: 641px) {
  .prose .lg-table .lg-b-svc { display: block; min-width: 0; }
  .lg-b-svc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lg-b-svc tbody { display: block; }
  .lg-b-svc tr { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.72fr); grid-auto-rows: auto; column-gap: 28px; row-gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .lg-b-svc tbody tr:last-child { border-bottom: 0; }
  .prose .lg-b-svc th, .prose .lg-b-svc td { padding: 0; border: 0; background: none; }
  .prose .lg-table .lg-b-svc tbody th[scope="row"] { grid-column: 1; grid-row: 1 / span 3; min-width: 0; line-height: 1.45; }
  .prose .lg-table .lg-b-svc tbody th small { margin-top: 6px; line-height: 1.9; }
  .prose .lg-b-svc td { grid-column: 2; display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
  .lg-b-svc td::before { content: attr(data-label); font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .lg-b-rf-win__fig { font-size: 2rem; }
}
@media (max-width: 640px) {
  /* on lg-a's .lg-table--stack: key/value rows (table.lg-b-kv) put each label and its value on one line */
  .prose .lg-table--stack .lg-b-kv td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; padding: 7px 0; border-top: 1px dashed var(--line); text-align: right; }
  .prose .lg-table--stack .lg-b-kv td[data-label]::before { flex: none; max-width: 48%; text-align: left; }
  .prose .lg-table--stack .lg-b-kv td[data-label]::before { margin: 0; }
  .prose .lg-table--stack .lg-b-kv .lg-tag { margin: 0; }
  .prose .lg-table--stack .lg-b-kv tbody th[scope="row"] { margin-bottom: 4px; }
  .prose .lg-table--stack .lg-b-ck-table .lg-b-ck-cell { display: flex; align-items: center; gap: 6px; }
  .prose .lg-table--stack .lg-b-ck-table .lg-b-ck-cell::before { margin: 0 auto 0 0; }

  /* products: the period chip sits top-right beside the product name instead of on its own labelled line */
  .lg-table--stack .lg-b-rf-products tr { position: relative; }
  .prose .lg-table--stack .lg-b-rf-products tbody th[scope="row"] { padding-right: 88px; }
  .prose .lg-table--stack .lg-b-rf-products td:nth-child(2) { position: absolute; top: 14px; right: 16px; margin: 0; }
  .prose .lg-table--stack .lg-b-rf-products td:nth-child(2)::before { content: none; }
  .prose .lg-table--stack .lg-b-rf-products td:nth-child(2) .lg-tag { margin: 0; }

  .lg-b-rf-win { grid-template-columns: 1fr; gap: 8px; }
  .lg-b-rf-win__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "fig text" "bar bar"; gap: 12px 14px; align-items: center; padding: 16px; }
  .lg-b-rf-win__fig { grid-area: fig; font-size: 1.8rem; }
  .lg-b-rf-win__item p { grid-area: text; }
  .lg-b-rf-win__bar { grid-area: bar; }
  .lg-prose ol.lg-b-steps > li { padding-left: 50px; }
  .lg-b-steps > li::before { width: 34px; height: 34px; border-radius: 10px; }
  .lg-b-steps > li::after { left: 17px; top: 40px; }
  .lg-b-ck-bar { padding: 14px 16px; }
  .lg-b-ck-bar .btn { width: 100%; justify-content: center; }
}

/* ---------- Print ---------- */
@media print {
  .lg-b-rf-win__bar, .lg-b-ck-rm, .lg-b-ck-bar .btn { display: none !important; }
  .lg-b-rf-win__item { border: 1px solid #999; box-shadow: none; }
  .lg-b-steps > li::before { box-shadow: none; border-color: #999; color: #000; }
}