/* screens/settings.css — Settings & billing. All classes prefixed .st-
   Shared layer does the rest: .seg (period toggle) · .field/.field__err ·
   .bar (quota meter) · .kv (usage rows) · .ava (member avatar) ·
   .sec-head (team header) · .hint (fine print) · .btn--danger (delete). */

/* ── layout: quiet left sub-nav + content ─────────────────────────────────── */
.st-wrap{display:grid;grid-template-columns:188px minmax(0,1fr);gap:clamp(20px,2.8vw,36px);align-items:start}
.st-body{min-width:0;display:flex;flex-direction:column;gap:var(--sp-16)}

.st-tabs{position:sticky;top:calc(var(--topbar-h) + var(--sp-24));display:flex;flex-direction:column;gap:var(--sp-2)}
.st-tab{
  padding:var(--sp-10) var(--sp-12);border-radius:var(--r-md);
  font-size:var(--fs-md);font-weight:600;color:var(--muted);
  transition:color var(--t),background var(--t),box-shadow var(--t);
}
.st-tab:hover{color:var(--ink)}
.st-tab.is-on{background:var(--card);color:var(--ink);box-shadow:var(--e2)}
.st-tab.is-on:focus-visible{box-shadow:var(--e2),var(--focus)}

.st-sec__t{margin-bottom:18px}

/* ── profile: owner note + read-only account block ────────────────────────── */
.st-profnote{margin-top:var(--sp-14);max-width:58ch}
.st-account__rows{display:flex;flex-direction:column}
.st-key{letter-spacing:.08em}
.st-acct__foot{
  display:flex;justify-content:flex-end;
  margin-top:var(--sp-14);padding-top:var(--sp-16);border-top:1px solid var(--line);
}

/* ── company form ─────────────────────────────────────────────────────────── */
.st-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16) 18px;align-items:start}
.st-form__full{grid-column:1/-1}
.st-save{display:flex;justify-content:flex-end;margin-top:var(--sp-20)}

/* the address line: what VOICEO actually tells a caller */
.st-addr{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-6)}
.st-link{
  font-size:inherit;font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:2px;border-radius:var(--r-xs);
}
.st-link:hover{color:var(--ink-2)}

/* opening hours are NOT edited here — this points at where they are */
.st-hoursnote{margin-top:18px}
.st-hoursnote a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px;border-radius:var(--r-xs)}

/* delete-company zone — soft red, never loud */
.st-danger{border-color:var(--danger-line)}
.st-danger__row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.st-danger__tx{flex:1 1 320px;min-width:0}
.st-danger h3{color:var(--danger);font-size:var(--fs-base)}
.st-danger p{margin-top:var(--sp-4);font-size:var(--fs-sm);font-weight:500;color:var(--muted);max-width:56ch}

/* ── billing: period toggle (.seg) + gift note ────────────────────────────── */
.st-billtop{display:flex;align-items:center;gap:var(--sp-14);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.st-gift{font-size:var(--fs-btn);font-weight:600;color:var(--muted)}

/* ── plan cards ───────────────────────────────────────────────────────────── */
.st-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16);align-items:stretch}
.st-plan{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(18px,2vw,24px);
}
/* THE one aurora move of this screen: hairline crown on the current plan */
.st-plan.is-current::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
}
.st-plan.is-current{border-color:var(--line-2)}
.st-plan__name{font-size:var(--fs-fine);font-weight:700;color:var(--muted)}
.st-plan__price{display:flex;align-items:baseline;gap:var(--sp-8);margin-top:var(--sp-14)}
.st-plan__price b{font-size:var(--fs-4xl);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.st-plan__price s{font-size:var(--fs-base);font-weight:600;color:var(--muted-2);text-decoration-thickness:1px}
.st-plan__price em{font-style:normal;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.st-plan__per{margin-top:var(--sp-4);font-size:var(--fs-fine);font-weight:500;color:var(--muted-2)}
.st-plan__feats{margin-top:18px;display:flex;flex-direction:column;gap:var(--sp-8)}
.st-plan__feats li{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.st-plan__feats .sh-ic{width:15px;height:15px;flex:none;margin-top:var(--sp-2);color:var(--muted)}
/* excluded feature: muted ✕, muted text — never a false ✓ */
.st-plan__li--off .st-plan__ft{color:var(--muted-2)}
.st-plan__li--off .sh-ic{color:var(--muted-2)}
.st-plan__foot{margin-top:auto;padding-top:var(--sp-20)}
.st-plan__foot .btn{width:100%}
.st-plan__foot .pill{width:100%;justify-content:center;height:var(--btn-h-sm)}
/* the current plan is a quiet state, not an action */
.st-plan__cur{gap:var(--sp-8);color:var(--muted)}
.st-plan__cur .sh-ic{width:14px;height:14px;color:var(--muted)}

/* business call-volume slider */
.st-plan__slider{margin-top:var(--sp-16);padding-top:var(--sp-14);border-top:1px solid var(--line)}
.st-plan__slider label{display:block;font-size:var(--fs-label);font-weight:700;color:var(--muted);letter-spacing:.02em;margin-bottom:var(--sp-8)}
.st-plan__slider input[type="range"]{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;
  background:none;margin:0;cursor:pointer;
}
.st-plan__slider input[type="range"]::-webkit-slider-runnable-track{height:var(--sp-4);border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--ink) 0 var(--st-fill,0%),var(--tint-4) var(--st-fill,0%))}
.st-plan__slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;box-sizing:border-box;width:16px;height:16px;margin-top:-6px;border-radius:var(--r-circle);
  background:var(--ink);border:2px solid var(--card);box-shadow:var(--sh-knob);
}
.st-plan__slider input[type="range"]::-moz-range-track{height:var(--sp-4);border-radius:var(--r-pill);background:var(--tint-4)}
.st-plan__slider input[type="range"]::-moz-range-progress{height:var(--sp-4);border-radius:var(--r-pill);background:var(--ink)}
.st-plan__slider input[type="range"]::-moz-range-thumb{
  box-sizing:border-box;width:16px;height:16px;border-radius:var(--r-circle);
  background:var(--ink);border:2px solid var(--card);box-shadow:var(--sh-knob);
}
.st-plan__slider input[type="range"]:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-pill)}
.st-plan__ticks{display:flex;justify-content:space-between;margin-top:var(--sp-6);font-size:var(--fs-meta);font-weight:600;color:var(--muted-2)}

/* footnotes (+ the live "plans go through the manager" note) */
.st-fine,.st-billnote{padding:0 var(--sp-4)}

/* usage + invoices */
.st-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--sp-16);align-items:start}
.st-grid2 > *{min-width:0}
.st-grid2--one{grid-template-columns:minmax(0,520px)}
.st-usage h3,.st-invoices h3{margin-bottom:var(--sp-16)}
.st-usage__big{display:flex;align-items:baseline;gap:var(--sp-2)}
.st-usage__big b{font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.st-usage__big span{font-size:var(--fs-md);font-weight:600;color:var(--muted)}
.st-usage__bar{margin-top:var(--sp-14)}
.st-usage__warn{margin-top:var(--sp-8)}
.st-usage__meta{margin-top:var(--sp-16);display:flex;flex-direction:column}
.st-invoices__amt{font-weight:600}
.st-invoices__pdf{text-align:right}

/* ── team ─────────────────────────────────────────────────────────────────── */
.st-teamhead{margin-bottom:var(--sp-10)}
.st-members{display:flex;flex-direction:column}
.st-member{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-12) 0;border-top:1px solid var(--line)}
.st-member:first-child{border-top:0}
.st-member__id{flex:1;min-width:0}
.st-member__id b{display:block;font-size:var(--fs-md);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-member__id span{display:block;font-size:var(--fs-fine);font-weight:500;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-member__role{flex:none}
.st-invite{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-14);align-items:start}

/* ── language ─────────────────────────────────────────────────────────────── */
.st-lang__note{font-size:var(--fs-sm);color:var(--muted);max-width:58ch;margin:var(--sp-6) 0 18px}
.st-langs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-14)}
.st-langcard{
  display:flex;align-items:flex-start;gap:var(--sp-12);text-align:left;
  padding:var(--sp-16) 18px;border-radius:var(--r-btn);
  background:var(--card);border:1px solid var(--line-2);
  transition:border-color var(--t),box-shadow var(--t);
}
.st-langcard:hover{border-color:var(--ink)}
.st-langcard.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.st-langcard.is-on:focus-visible{box-shadow:0 0 0 1px var(--ink),var(--focus)}
.st-radio{
  width:18px;height:18px;flex:none;margin-top:var(--sp-2);border-radius:var(--r-circle);
  border:1.5px solid var(--line-2);transition:border-color var(--t),box-shadow var(--t);
}
.st-langcard.is-on .st-radio{border-color:var(--ink);box-shadow:inset 0 0 0 4.5px var(--ink)}
.st-langcard__tx b{display:block;font-size:var(--fs-md);font-weight:700}
.st-langcard__tx span{display:block;margin-top:var(--sp-2);font-size:var(--fs-fine);font-weight:500;color:var(--muted)}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1120px){
  .st-plans{grid-template-columns:1fr}
  .st-grid2{grid-template-columns:minmax(0,1fr)}
  .st-plan__foot .btn,.st-plan__foot .pill{width:auto;min-width:220px}
}
@media (max-width:880px){
  .st-wrap{display:block}
  .st-tabs{
    position:static;flex-direction:row;flex-wrap:wrap;gap:var(--sp-6);
    margin:-2px 0 18px;padding:var(--sp-2) 0 var(--sp-6);
  }
  .st-tab{flex:none;white-space:nowrap;padding:var(--sp-8) var(--sp-14);border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--card)}
  .st-tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink);box-shadow:none}
  .st-tab.is-on:focus-visible{box-shadow:var(--focus)}
  .st-form{grid-template-columns:1fr}
  .st-plan__foot .btn,.st-plan__foot .pill{width:100%;min-width:0}
  .st-invite{grid-template-columns:1fr}
}
@media (max-width:620px){
  /* invoices: a 4-column table cannot fit a phone in KA — stack it into
     month/amount over status/PDF instead of letting it scroll sideways */
  .st-invoices .table,.st-invoices tbody,.st-invoices tr,.st-invoices td{display:block}
  .st-invoices thead{display:none}
  .st-invoices tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:var(--sp-6) var(--sp-12);padding:var(--sp-12) 0;border-bottom:1px solid var(--line);
  }
  .st-invoices tbody tr:last-child{border-bottom:0}
  .st-invoices td{height:auto;padding:0;border:0}
  .st-invoices__amt,.st-invoices__pdf{text-align:right}
  .st-langs{grid-template-columns:1fr}
  .st-usage__big b{font-size:var(--fs-2xl)}
  .st-teamhead{flex-wrap:wrap}
}

/* live mode: read-only team list note */
.st-team__managed{margin:0 0 var(--sp-12)}