/* 3.1 top-ups (topups.js): only what the real stylesheet has no class for; tokens from app.css. The approved mockup's
   calmer style: compact buttons (34px on a computer, 44px to tap on a phone, weight 500), lime only on the one pay button. */

/* the side card: call minutes above messages; one button from 80% */
.tu-side{padding:10px 12px 12px}
.tu-side-a{display:block;color:inherit;text-decoration:none}
.tu-side .usage-t + .meter{margin:8px 0 0}
.tu-gap{display:block;height:10px}
.meter.tu-warn i{background:var(--you-solid)}
.tu-extra,.tu-over{display:block;margin-top:6px;font-size:var(--fs-meta);line-height:1.3}
.tu-extra{color:var(--ok-ink)}
.tu-over{color:var(--you-ink)}
.tu-side-btn{width:100%;margin-top:12px;justify-content:center;font-weight:500}
.tu-side-btn svg.i,.tu-who-btn svg.i{width:14px;height:14px}

/* the phone's menu: the account block with both lines */
.tu-mrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:12px;font-size:var(--fs-meta);color:var(--ink-2)}
.tu-mrow b{font-weight:500;color:var(--ink);white-space:nowrap}
.tu-mrow b small{display:inline;font-size:inherit;font-weight:400;color:var(--ink-3)}
.bm-who .tu-mrow + .meter{margin:6px 0 0}
.tu-who-btn{width:100%;min-height:44px;margin-top:12px;justify-content:center;font-weight:500}

/* the sheet */
.tu-sheet{width:min(440px,100%);padding:20px}
.tu-sheet:focus{outline:none}
.tu-sh-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tu-sh-h h2{font-size:var(--fs-lg);font-weight:600;margin:0}
.tu-sh-h .icon-btn{margin:-6px -6px -6px 0}
.tu-sheet .tu-sub{margin-top:4px;font-size:var(--fs-sm);color:var(--ink-2)}
.tu-packs{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.tu-pack{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:var(--r-ctl);box-shadow:0 0 0 1px var(--line-2);background:var(--card);cursor:pointer;transition:box-shadow var(--duration-quick) var(--ease-out),background var(--duration-quick) var(--ease-out)}
.tu-pack input{position:absolute;opacity:0;pointer-events:none}
.tu-pack::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3);transition:box-shadow var(--duration-quick) var(--ease-out)}
.tu-pack:has(input:checked){box-shadow:0 0 0 1.5px var(--ink);background:var(--raise)}
.tu-pack:has(input:checked)::before{box-shadow:inset 0 0 0 5px var(--ink)}
.tu-pack:has(input:focus-visible){outline:2px solid var(--accent-line);outline-offset:2px}
.tu-pack.is-one{cursor:default}
.tu-pack.is-one::before{display:none}
.tu-pk-n{flex:1;display:flex;flex-direction:column;gap:1px}
.tu-pk-n b{font-weight:500;font-size:var(--fs-body);color:var(--ink)}
.tu-pk-n small{font-size:var(--fs-meta);color:var(--ink-3)}
.tu-pk-p{font-size:var(--fs-body);font-weight:500;color:var(--ink)}
.tu-facts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tu-facts li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.tu-facts svg.i{flex:none;width:14px;height:14px;margin-top:2px;color:var(--ok-ink)}
.tu-pay{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--raise)}
.tu-pay > svg.i{flex:none;color:var(--ink-2)}
.tu-pay-t{display:flex;flex-direction:column;gap:1px}
.tu-pay-t b{font-weight:500;font-size:var(--fs-sm);color:var(--ink)}
.tu-pay-t small{font-size:var(--fs-meta);color:var(--ink-3)}
.tu-go{width:100%;min-height:34px;margin-top:16px;justify-content:center;font-weight:500}
.tu-fine{margin:12px 0 0!important;font-size:var(--fs-meta)!important;line-height:1.5;color:var(--ink-3)!important}
.tu-spin{width:14px;height:14px;margin-right:8px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:tu-spin .7s linear infinite}
@keyframes tu-spin{to{transform:rotate(360deg)}}
/* on a phone the sheet comes up from the bottom, the thumb's side, and every control is 44px to tap */
@media (max-width:560px){
  .tu-wrap{place-items:end stretch;padding:0}
  .tu-sheet{width:100%;padding:20px 16px calc(16px + env(safe-area-inset-bottom));border-radius:var(--r-card) var(--r-card) 0 0}
  .tu-pack{min-height:60px}
  .tu-go{min-height:36px} /* the sheet's one main action: Solid Glass's large size; the edge gives the 44 */
}

/* Settings › Plan and billing (the owner approved the calmer mockup, 21 Oct 2026): a line a meter, a thin bar, a note only when it matters */
.tu-m{padding:12px 0 14px}
.tu-mh{display:flex;align-items:center;gap:12px;min-height:32px}
.tu-mh .cs-l{flex:1;white-space:nowrap}
.tu-fig{font-size:var(--cs-fs);font-weight:500;color:var(--ink);white-space:nowrap}
.tu-fig small{font-size:inherit;font-weight:400;color:var(--ink-3)}
.tu-add svg.i{width:14px;height:14px}
.tu-add{padding:0 10px 0 8px}
.btn-sub.tu-add.is-main{background:var(--strong);border-color:var(--strong);color:var(--on-strong);box-shadow:none}
.btn-sub.tu-add.is-main svg.i{opacity:1}
@media (hover:hover){.btn-sub.tu-add.is-main:not([disabled]):hover{background:var(--strong-hover)}}
.tu-bar{display:block;height:4px;margin:10px 0 0;border-radius:var(--r-pill);background:var(--hair-2);overflow:hidden}
.tu-bar i{display:block;height:100%;border-radius:inherit;background:var(--ink-3);transform-origin:left center}
.tu-m.is-warn .tu-bar i{background:var(--you-dot)}
.tu-m.is-out .tu-bar i{background:var(--err-solid)}
.tu-note{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:4px;margin:8px 0 0;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-3)}
.tu-note .pb-st{font-size:inherit}
.tu-x{margin-left:auto}
.tu-m .cs-help{margin-top:10px}
/* plain zeros: the face's tabular zero is slashed (shell.css says the same), so these figures are plain */
.tu-fig,.tu-x,.tu-list .tnum{font-variant-numeric:normal;font-feature-settings:normal}
.tu-state .st{margin-bottom:2px}
/* the top-ups, folded into one line: opened, a list of what was bought, and each one's receipt */
.tu-list{list-style:none;margin:0 0 10px;padding:0}
.tu-list li{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;align-items:center;column-gap:14px;min-height:40px;font-size:var(--fs-sm);color:var(--ink-2)}
.tu-list li + li{border-top:1px solid var(--hair)}
.tu-n{color:var(--ink)}
.tu-r{justify-self:end;display:inline-flex;align-items:center;gap:4px;color:var(--ink-2)}
.tu-r svg.i{width:13px;height:13px}
@media (max-width:720px){
  .tu-list li{min-height:44px;grid-template-columns:54px minmax(0,1fr) auto auto;column-gap:10px}
  .tu-r{min-height:44px} /* the whole row's height is the press area for Receipt */
}

/* status glyphs (from the calmer Ask UNLOOK) */
.tu-gl{flex:none;width:16px;height:16px;overflow:visible;color:currentColor}
.tu-gl .gl-d{fill:currentColor;transform-box:view-box}
.tu-gl .gl-p{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.tu-gl .gl-ring{fill:none;stroke:currentColor;stroke-width:1.6;opacity:0;transform-box:view-box;transform:translate(11.5px,8px) scale(.4)}
.tu-gl[data-s="work"] .gl-d1,.tu-gl[data-s="wait"] .gl-d1{transform:translate(4.5px,8px)}
.tu-gl[data-s="work"] .gl-d2{transform:translate(11.5px,8px)}
.tu-gl[data-s="work"] .gl-d{animation:tu-gl-turn 1.4s ease-in-out infinite}
.tu-gl[data-s="work"] .gl-d2{animation-delay:.7s}
@keyframes tu-gl-turn{0%,100%{opacity:1}50%{opacity:.3}}
.tu-gl[data-s="wait"] .gl-d2{transform:translate(11.5px,8px) scale(0);opacity:0}
.tu-gl[data-s="wait"] .gl-ring{opacity:1;transform:translate(11.5px,8px) scale(1)}
.tu-gl[data-s="done"] .gl-d{opacity:0}
.tu-gl[data-s="done"] .gl-ok{stroke-dashoffset:0;opacity:1}
.tu-state .st{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-body);line-height:1.3;font-weight:500;color:var(--ink-2)}
.tu-state .st-work{color:var(--ink)}
.tu-state .st-work .tu-gl{color:var(--ink-3)}
.tu-state .st-need{color:var(--you-ink)}
.tu-state .st-need .tu-gl{color:var(--you-dot)}
.tu-state .st-done{color:var(--ok-ink)}
@media (prefers-reduced-motion:reduce){.tu-gl .gl-d{animation:none!important}.tu-gl[data-s="work"] .gl-d2{opacity:.4}.tu-spin{animation:none}.tu-pack,.tu-pack::before{transition:none}}