/* The VEGA Works account center — the second app page on this site, in every
   language that has its copy. CONTRACT.md "App pages (hidden)".

   ONE STYLESHEET FOR ALL OF THEM. Every language version of the page loads
   this file from /account/, so nothing here may assume Japanese: no
   width tuned to a Japanese label, no rule that only works for CJK line
   breaking.

   Everything here is scoped to .acc-*. It sits on top of site.css rather than
   replacing it: the tokens (--ink, --canvas, --panel, --line, --accent, …),
   the font stack, the focus ring and the light/dark switch all come from there,
   so this page follows the theme without owning a second copy of it.

   Deliberately a sibling of /style/onboarding/app.css rather than a shared
   file: the two pages are different applications, and a stylesheet is cheap.
   They agree on measurements on purpose — a reader who arrives here from the
   onboarding page should not feel the page change width.

   No colour is written literally, but the two that mean success and failure,
   which the site's own tokens do not have: they are defined once, at the foot
   of this file, with a dark-mode value each and their contrast worked out.
   No external request of any kind. */

/* The page carries the site's own header (tools/make_account_pages.py borrows
   it from the VEGA Style page in the same language), so site.css styles it. */

/* ---------- page ---------- */
/* Narrower than the onboarding page (34rem against 48rem). That page is a
   writing surface and wants the width; this one is a short form and then a
   short list, and a 48rem line of two words reads as a mistake. */

.acc-main {
  width: min(100% - 2rem, 34rem);
  margin-inline: auto;
  padding-block: 1.8rem 4rem;
}

.acc-h1 {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 .4rem;
}

.acc-lead {
  margin: 0 0 1.6rem;
  color: var(--ink-3);
  font-size: .95rem;
  line-height: 1.75;
}

.acc-lead[hidden] { display: none; }

/* The purchase page's one line about the language (Japanese only): quiet, but before every button. */
.acc-ja-only {
  margin: .2rem 0 1.1rem;
  padding: .55rem .8rem;
  border-left: 3px solid var(--ink-3, currentColor);
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.6;
}

.acc-privacy {
  margin: 1.8rem 0 0;
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1.7;
}

/* A product's group inside the account center: its name, then its cards. */
.acc-product { margin-top: 1.6rem; }

.acc-product-h2 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 .7rem;
}

.acc-card {
  --acc-pad: clamp(1rem, .6rem + 2vw, 1.5rem);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: var(--acc-pad);
  margin-bottom: 1rem;
}

.acc-notice {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
  padding: .7rem 1rem;
  margin-bottom: 1.2rem;
  font-size: .9rem;
  line-height: 1.7;
}

.acc-notice p { margin: 0; }

.acc-notice p + p { margin-top: .3rem; }

/* ---------- the two sign-in fields ---------- */

.acc-field { display: block; margin: 0 0 1rem; }

.acc-field-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-2);
}

.acc-input {
  display: block;
  width: 100%;
  font: inherit;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .7rem .9rem;
}

.acc-input:focus { border-color: var(--accent); }

/* The six digits are a number read off a screen and typed back, so they are
   spaced out and set in a face where 0 and O cannot be confused. */
.acc-input--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .4em;
}

/* The spacing is for the digits; the prompt in the empty box is a sentence. */
.acc-input--code::placeholder {
  font-family: var(--font-body);
  letter-spacing: normal;
}

/* ---------- buttons ---------- */
/* Same shapes as the onboarding page, which is the only other place a reader
   of this site meets a button that is not a link. */

.acc-go {
  font: inherit;
  font-weight: 600;
  color: var(--canvas);
  background: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  border-radius: 9px;
  padding: .6rem 1.6rem;
  cursor: pointer;
}

.acc-go[disabled] { opacity: .4; cursor: not-allowed; }

.acc-ghost {
  font: inherit;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .6rem 1.2rem;
  cursor: pointer;
}

.acc-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

/* The purchase page's two exits are links, not buttons (they leave the page), dressed as the buttons
   they stand in for. site.css's `a:hover` would turn a link's text --ink, which on the filled button
   is ink on ink. */
a.acc-go, a.acc-ghost { display: inline-block; text-decoration: none; text-align: center; }
a.acc-go:hover { color: var(--canvas); }

/* The way back to the product page, above the heading of every screen of the purchase page. */
.acc-back { margin: 0 0 .9rem; font-size: .92rem; }
.acc-back a { color: var(--ink-2); text-underline-offset: 3px; }
.acc-back a:hover { color: var(--ink); }

.acc-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

.acc-linkish {
  font: inherit;
  font-size: .85rem;
  color: var(--accent-ink);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acc-linkish:hover { color: var(--ink); }

.acc-links {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 0;
}

/* ---------- dashboard ---------- */

.acc-pairs { margin: 0; }

.acc-pairs > div {
  display: flex;
  gap: .6rem 1.2rem;
  flex-wrap: wrap;
  padding-block: .35rem;
}

.acc-pairs dt {
  flex: 0 0 6.5rem;
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1.9;
}

.acc-pairs dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.acc-h2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 .5rem;
}

.acc-list { margin: 0; padding: 0; list-style: none; }

.acc-list li {
  padding-block: .3rem;
  line-height: 1.8;
  font-size: .95rem;
}

/* A section with nothing in it yet. Same colour as a caption: it is the
   absence of a thing, not a warning about one. */
.acc-empty {
  margin: 0;
  color: var(--ink-3);
  font-size: .9rem;
  line-height: 1.8;
}

/* The support address in the past-due line, and any link a status line
   carries: the same colour as the confirmation's legal links. */
.acc-empty a {
  color: var(--accent-ink);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.acc-note {
  margin: .6rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--line-soft);
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1.7;
}

/* ---------- mail language (spec v7 B-3) ---------- */
/* Every language shares this file, so nothing below assumes a script: the
   select sizes to its longest name (Bahasa Indonesia, हिन्दी, Tiếng Việt) and
   the row wraps rather than clipping one. */

.acc-desc {
  margin: 0 0 .9rem;
  color: var(--ink-3);
  font-size: .9rem;
  line-height: 1.8;
}

.acc-lang-row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  align-items: center;
}

.acc-select {
  font: inherit;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .55rem .8rem;
  min-width: 12rem;
  max-width: 100%;
}

.acc-select:focus { border-color: var(--accent); }

.acc-select[disabled] { opacity: .6; }

/* The saved / failed line. Kept in the tree while empty — a live region that
   is display:none when its text arrives is one some screen readers never
   announce — and given no margin until it has something to say. */
.acc-status {
  margin: .7rem 0 0;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.7;
}

.acc-status:empty { margin: 0; }

/* ---------- purchase (spec v9 section 3) ---------- */

/* Buttons that live inside a card rather than at the foot of the page. */
.acc-actions--in { margin-top: .9rem; }

/* Choose: two radio groups. Each choice is a whole card-within-a-card, so the
   target is the full row and not a 16px circle. */
.acc-choices {
  border: 0;
  margin: 0 0 1.4rem;
  padding: 0;
  min-width: 0;
}

.acc-legend {
  padding: 0;
  margin-bottom: .6rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}

.acc-choice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .8rem .9rem;
  margin-bottom: .55rem;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}

.acc-choice:hover { border-color: var(--accent); }

/* The chosen row says so with its frame as well as its radio. Browsers without
   :has() still show the radio itself, which is the state that matters. */
.acc-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.acc-choice input { margin: .3rem 0 0; flex: none; accent-color: var(--accent-ink); }

.acc-choice-body { display: block; min-width: 0; flex: 1; }

.acc-choice-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
}

.acc-choice-name { font-weight: 600; }

.acc-choice-price {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The mark on the chosen row is a character, not a colour: a reader who cannot
   tell the gold from the grey still sees which one is chosen. Its room is kept
   on every row, hidden until chosen, so that choosing one does not push the
   price onto a new line. The empty alternative text keeps a screen reader from
   saying "check mark": the radio already says it is selected. */
.acc-choice-name::after {
  content: "\2713";
  content: "\2713" / "";
  margin-left: .45rem;
  color: var(--accent-ink);
  font-weight: 700;
  visibility: hidden;
}

.acc-choice:has(input:checked) .acc-choice-name::after { visibility: visible; }

.acc-choice-desc {
  display: block;
  margin-top: .25rem;
  color: var(--ink-3);
  font-size: .88rem;
  line-height: 1.7;
}

/* Confirm: the items the law lists, each label above its value — the values
   are sentences, and a sentence beside a 6.5rem label column is a narrow
   ribbon of text. */
.acc-pairs--stack > div {
  display: block;
  padding-block: .55rem;
  border-bottom: 1px solid var(--line-soft);
}

.acc-pairs--stack > div:last-child { border-bottom: 0; }

.acc-pairs--stack dt { margin-bottom: .15rem; line-height: 1.6; }

.acc-pairs--stack dd { line-height: 1.8; }

/* Parts of one value (a plan's name, its price): app.js puts a plain space
   between them and this widens it for the eye — see pair() in app.js. */
.acc-part { display: inline-block; margin-right: .6rem; }

.acc-part:last-of-type { margin-right: 0; }

.acc-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
}

.acc-legal-links a {
  color: var(--accent-ink);
  text-underline-offset: 3px;
}

.acc-legal-note {
  display: block;
  margin-top: .4rem;
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1.7;
}

/* The agreement. Its own row, a large target, and the only thing between the
   reader and the payment page. */
.acc-agree {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: 1.1rem 0 1rem;
  line-height: 1.7;
  cursor: pointer;
}

.acc-agree input { margin: .35rem 0 0; flex: none; accent-color: var(--accent-ink); }

/* ---------- narrow screens ---------- */

@media (max-width: 26rem) {
  .acc-main { padding-block: 1.4rem 3rem; }
  .acc-go { width: 100%; }
  .acc-select { width: 100%; min-width: 0; }
  .acc-pairs dt { flex-basis: 100%; line-height: 1.6; }
  .acc-pairs > div { padding-block: .5rem; }
}

/* ---------- applying: steps, hints, the sum, the sticky bar (2026-10-01) ---------- */

/* Choose, check, pay. The third is KOMOJU's own page and is named here only so
   that the leap to it is not a surprise. */
.acc-steps {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}

.acc-step {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  gap: .45rem;
  min-width: 0;
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1.4;
}

.acc-step-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.acc-step-name { min-width: 0; overflow-wrap: anywhere; }

.acc-step--done .acc-step-num {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.acc-step--now { color: var(--ink); font-weight: 600; }

.acc-step--now .acc-step-num {
  color: var(--canvas);
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* A hairline between one step and the next, where there is room for it. */
.acc-step:not(:last-child)::after {
  content: "";
  flex: 1 1 .5rem;
  min-width: .5rem;
  height: 1px;
  background: var(--line);
}

/* One line under a group's name: when it is paid, and what it can be undone by. */
.acc-hint {
  margin: -.2rem 0 .75rem;
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1.7;
  text-wrap: balance;
}

/* What the choices add up to. It lives in the bar below, which stays at the foot
   of the screen while the plans scroll past on a phone; the card's own padding
   is taken back so the bar runs edge to edge inside the card. */
.acc-bar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: .4rem calc(var(--acc-pad) * -1) calc(var(--acc-pad) * -1);
  padding: .8rem var(--acc-pad) var(--acc-pad);
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Tabbing to a plan near the foot of the screen scrolls it clear of the bar. */
html:has(.acc-bar) { scroll-padding-bottom: 11rem; }

.acc-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem 1rem;
  margin: 0 0 .8rem;
  font-size: .9rem;
  line-height: 1.7;
}

.acc-summary dt { color: var(--ink-3); }

.acc-summary dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Break between the plan's name and its price, not inside "(税込)". */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.acc-summary dd:first-of-type { font-weight: 700; }

/* ---------- the confirmation: the sum, then the list the law asks for ---------- */

.acc-due {
  margin: 0 0 1.1rem;
  padding: .9rem 1rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
}

.acc-due p { margin: 0; }

.acc-due-label { color: var(--ink-2); font-size: .85rem; font-weight: 600; line-height: 1.6; }

.acc-due-amount {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.acc-due-sub { margin-top: .3rem; color: var(--ink-2); font-size: .9rem; line-height: 1.7; }

/* Beside the button it explains. */
.acc-trust {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: 0 0 .9rem;
  color: var(--ink-2);
  font-size: .88rem;
  line-height: 1.7;
}

.acc-trust .acc-icon { margin-top: .3rem; color: var(--ink-3); }

.acc-icon { flex: none; width: 1rem; height: 1rem; }

/* ---------- after paying: how far it has got ---------- */

.acc-progress {
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.acc-progress li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  color: var(--ink-3);
  font-size: .92rem;
  line-height: 1.6;
}

.acc-progress-dot {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .15rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-size: .7rem;
  line-height: 1;
}

.acc-progress .is-done { color: var(--ink); }

.acc-progress .is-done .acc-progress-dot {
  color: var(--canvas);
  background: var(--acc-ok);
  border-color: var(--acc-ok);
}

.acc-progress .is-done .acc-progress-dot::after { content: "\2713"; }

.acc-progress .is-now { color: var(--ink); font-weight: 600; }

.acc-progress .is-now .acc-progress-dot {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.acc-progress .is-now .acc-progress-dot::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent-ink);
}

/* ---------- success and failure ---------- */
/* The two colours this page owns. Light: on the page (#fff) and on a card
   (#f6f7f9), --acc-ok reads at 6.5:1 and 6.1:1, --acc-err at 7.1:1 and 6.6:1;
   dark: on #12151f and #1b1f2c, 10.2:1 / 9.2:1 and 8.3:1 / 7.5:1. Text on the
   soft fills stays --ink (15:1 and above): the colour is for the edge and the
   icon, and the icon is a shape of its own, so colour is never alone. */
.acc-main {
  --acc-ok: #1c6b3d;
  --acc-ok-soft: #e6f2eb;
  --acc-err: #a8242a;
  --acc-err-soft: #fbe9ea;
}

/* DARK-OFF (owner, 2026-10-01; see site.css): was (prefers-color-scheme: dark) */
@media not all {
  .acc-main {
    --acc-ok: #7fd3a0;
    --acc-ok-soft: #173424;
    --acc-err: #ff8f87;
    --acc-err-soft: #3d1e21;
  }
}

.acc-notice--ok { border-left-color: var(--acc-ok); background: var(--acc-ok-soft); }

.acc-notice--error { border-left-color: var(--acc-err); background: var(--acc-err-soft); }

.acc-notice p:first-child:has(> .acc-icon) { display: flex; gap: .5rem; align-items: flex-start; }

.acc-notice p > .acc-icon { margin-top: .3rem; }

.acc-notice--ok .acc-icon { color: var(--acc-ok); }

.acc-notice--error .acc-icon { color: var(--acc-err); }

/* A failure told under the button that caused it. */
.acc-status--error,
.acc-callout {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  padding: .65rem .8rem;
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  line-height: 1.7;
}

.acc-callout { margin: 0 0 .9rem; font-size: .92rem; }

.acc-status--error { background: var(--acc-err-soft); border-left-color: var(--acc-err); }

.acc-callout--error { background: var(--acc-err-soft); border-left-color: var(--acc-err); }

.acc-status--error .acc-icon,
.acc-callout--error .acc-icon { margin-top: .3rem; color: var(--acc-err); }

.acc-callout a { color: var(--accent-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- waiting: a button whose request is on its way ---------- */

/* A small ring after the label, in the label's own colour. It takes the place of
   the dimmed look a disabled button has, which on its own reads as "broken". */
.acc-go[aria-busy="true"],
.acc-ghost[aria-busy="true"],
.acc-danger[aria-busy="true"] {
  opacity: .8;
  cursor: progress;
}

.acc-go[aria-busy="true"]::after,
.acc-ghost[aria-busy="true"]::after,
.acc-danger[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: .9em;
  height: .9em;
  margin-left: .6em;
  vertical-align: -.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: acc-turn .8s linear infinite;
}

@keyframes acc-turn { to { transform: rotate(360deg); } }

/* A button that cannot be pressed right now looks it: the quiet one as well as
   the filled one, and neither lights up under the pointer. */
.acc-ghost[disabled] { opacity: .5; cursor: not-allowed; }

.acc-ghost[disabled]:hover { border-color: var(--line); color: var(--ink-2); }

/* No movement for a reader who asked for none: three dots instead of the ring. */
@media (prefers-reduced-motion: reduce) {
  .acc-go[aria-busy="true"]::after,
  .acc-ghost[aria-busy="true"]::after,
  .acc-danger[aria-busy="true"]::after {
    content: "\2026";
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    animation: none;
    vertical-align: baseline;
  }
}

/* ---------- cancelling the monthly plan, asked on the page ---------- */

.acc-actions[hidden] { display: none; }

/* The question under the plan. Plain frame, not an alarm: nothing is wrong, a
   person is being asked to confirm what they chose. */
.acc-confirm {
  margin-top: .9rem;
  padding: .9rem 1rem;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.acc-confirm-q { margin: 0 0 .35rem; font-weight: 600; line-height: 1.7; }

.acc-confirm-detail {
  margin: 0 0 .85rem;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.75;
  text-wrap: balance;
}

/* The button that confirms is the one that cannot be undone, so it is the one
   in the warning colour; the other, which keeps the plan, is the quiet one. */
.acc-danger {
  font: inherit;
  font-weight: 600;
  color: var(--canvas);
  background: var(--acc-err);
  border: 1px solid var(--acc-err);
  border-radius: 9px;
  padding: .6rem 1.3rem;
  cursor: pointer;
}

.acc-danger:hover { filter: brightness(.92); }

.acc-danger[disabled] { opacity: .4; cursor: not-allowed; }

/* Where the browser can, Japanese breaks between phrases rather than inside a
   word ("自動" stays whole). Other languages are not affected; a browser that does
   not know the value ignores the line. */
.acc-lead,
.acc-hint,
.acc-note,
.acc-trust,
.acc-privacy,
.acc-notice,
.acc-callout,
.acc-status--error,
.acc-choice-desc,
.acc-agree,
.acc-due-sub,
.acc-confirm-q,
.acc-confirm-detail,
.acc-pairs dd {
  word-break: auto-phrase;
}

/* ---------- narrow screens, again ---------- */

@media (max-width: 26rem) {
  .acc-step { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .acc-step:not(:last-child)::after { display: none; }
  .acc-step-name { font-size: .8rem; }
  /* The bar stays on screen while the plans scroll, so it is kept short:
     the two buttons share one row instead of standing one above the other. */
  .acc-bar { padding-top: .65rem; }
  .acc-bar .acc-summary { margin-bottom: .6rem; font-size: .85rem; }
  .acc-bar .acc-actions { gap: .5rem; flex-wrap: wrap; }
  .acc-bar .acc-go { width: auto; flex: 1 1 8rem; }
}

/* ---------- this month's writing against the plan's limit ---------- */

.acc-usage { margin-top: .9rem; }

.acc-usage[hidden] { display: none; }

.acc-usage-line {
  margin: 0 0 .45rem;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

/* A native <progress>, so the value and the maximum are properties and no
   style attribute is needed; the track and the bar take the site's tokens. */
.acc-meter {
  display: block;
  width: 100%;
  height: .55rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line-soft);
  appearance: none;
  -webkit-appearance: none;
}

.acc-meter::-webkit-progress-bar { background: var(--line-soft); border-radius: 999px; }
.acc-meter::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.acc-meter::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

/* At the limit the bar is full and says so with the failure colour and an icon
   in the note under it, not by colour alone. */
.acc-usage--full .acc-meter::-webkit-progress-value { background: var(--acc-err); }
.acc-usage--full .acc-meter::-moz-progress-bar { background: var(--acc-err); }

.acc-usage-note {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: .55rem 0 0;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.7;
  word-break: auto-phrase;
}

.acc-usage-note .acc-icon { margin-top: .3rem; color: var(--acc-err); }

/* ---------- deleting what we hold (W11) ---------- */

/* The card's own button is the quiet kind with a warning edge: it names what
   it opens, and the filled warning colour waits for the confirming press. */
.acc-ghost--danger { color: var(--acc-err); border-color: var(--acc-err); }

.acc-ghost--danger:hover { color: var(--acc-err); border-color: var(--acc-err); filter: brightness(.92); }

/* The part of the account-deletion panel that changes: the send button, then
   the code field with its two buttons. */
.acc-confirm-step { margin-top: .2rem; }

.acc-confirm-step .acc-field { margin: .4rem 0 .85rem; }

.acc-confirm .acc-legal-links { font-size: .9rem; }

.acc-confirm-detail,
.acc-confirm .acc-legal-links { word-break: auto-phrase; }

/* The two delete panels carry several paragraphs of three or four lines each,
   not the one short sentence the cancel panel has: balancing those would pack
   every paragraph into a narrow column. */
.acc-confirm--long .acc-confirm-detail { text-wrap: pretty; }