/* LAN-SERVERS -- client area theme.
 *
 * THE HEADER, THE FOOTER AND THE BUTTONS ARE NOT HERE. They are the public site's, from
 * themes/site/assets/chrome.css, which the layout loads first (Todor, 2026-09-22: take
 * the lan-servers template, and carry every change to it over here). This file is only
 * what an account needs on top: the side menu, the light work area and the account
 * pages - cards, forms, tables.
 *
 * Same brand, same tokens, different density. A marketing page is read once and wants
 * air; an invoice table is lived in and wants rows on screen. Nothing here redefines a
 * colour or a font - those come from the brand's tokens.css, so the client area of brand
 * B is brand B without a line of work here.
 *
 * The work area is a LIGHT surface: .theme-light is on .acct-app, not on <body>, so the
 * dark header and footer keep the on-dark accent exactly as on the public site, and
 * everything in between gets the deep cyan (BRAND.md 3: never #22D3EE on white).
 *
 * The page-level rules are named acct-*. The public site's theme.css is never loaded
 * here, but chrome.css is, and a class that meant one thing there and another here would
 * be a real risk - the prefix is the fence. Element defaults inside the app are wrapped
 * in :where(), which has no specificity, so any class still beats them.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* A column: header, the app, footer. The app grows, so the footer sits at the bottom
   even under a short sign-in form. */
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--surface-light-alt);
  color: var(--text-light-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }

/* One focus recipe, everywhere. --accent is cyan in the header and deep cyan below it. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ==========================================================================
   The header: what the account adds to the site's
   ========================================================================== */

/* Who is signed in, beside the buttons. Long addresses are cut rather than allowed to
   push the logo off a narrow window. */
.acct-who {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-dark-secondary);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sign out is a POST with a token, so it is a form; it must sit in the row like a link. */
.acct-signout { display: flex; margin: 0; }
.menu-actions .acct-signout { display: block; }

/* The phone menu's own additions: the address, and the group titles between the links. */
.acct-menu-who {
  margin: 16px 0 2px; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-dark-secondary); overflow-wrap: anywhere;
}
.acct-menu-title {
  display: block; padding: 20px 0 2px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-dark-muted);
}

@media (max-width: 1024px) { .acct-who { display: none; } }

/* ==========================================================================
   The app: side menu and work area
   ========================================================================== */

.acct-app { flex: 1 0 auto; background: var(--surface-light-alt); color: var(--text-light-primary); }
/* The same container as the header, so the side menu starts under the logo and the work
   area's right edge is the header's. */
.acct-shell { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.acct-app.has-side .acct-shell {
  display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 48px; align-items: start;
}
.acct-main { min-width: 0; }

/* The side menu. Sticky under the sticky header, so it stays in reach down a long
   invoice list. The current page is a white tab with an accent edge: a shape and a
   colour, never colour alone. */
.acct-side { position: sticky; top: 64px; padding: 40px 0 24px; }
.acct-sidenav { display: flex; flex-direction: column; gap: 22px; }
.acct-sidegroup { display: flex; flex-direction: column; gap: 2px; }
.acct-sidetitle {
  padding: 0 12px 6px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-light-muted);
}
.acct-sidenav a {
  display: block; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 500; color: var(--text-light-secondary);
}
.acct-sidenav a:hover { color: var(--text-light-primary); background: var(--surface-light); }
.acct-sidenav a[aria-current="page"] {
  color: var(--text-light-primary); background: var(--surface-light); border-color: var(--border-light);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* On a phone the side menu is the header's menu instead (chrome.css shows it below 800). */
@media (max-width: 800px) {
  .acct-app.has-side .acct-shell { display: block; }
  .acct-side { display: none; }
}

/* ==========================================================================
   Type and links inside the work area
   ========================================================================== */

/* Links in the work area read as links. Not the buttons, which are links too. */
.acct-main a:not(.btn) { color: var(--accent); }
.acct-main a:not(.btn):hover { text-decoration: underline; }

.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--text-light-muted); margin-bottom: 6px;
}
:where(.acct-app) h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
:where(.acct-app) h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
:where(.acct-app) h3 { font-size: 16px; font-weight: 600; }
:where(.acct-app) p  { margin-bottom: 12px; color: var(--text-light-body); }
code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--surface-light); border: 1px solid var(--border-light);
  padding: 1px 6px; border-radius: var(--radius-sm);
}

/* The public site's card, at the account's density. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; }

/* ==========================================================================
   Page columns
   ========================================================================== */

/* One column for a form, and it stays a column: an auth form in two columns makes people
   tab sideways through their own password. Centred when signed out, where it is the whole
   page; set against the side menu when signed in. */
.acct-narrow { width: 100%; max-width: 520px; margin: 0 auto; padding: 48px 0 56px; }
/* The tables and the overview need the whole work area. */
.acct-wide { width: 100%; max-width: 880px; margin: 0 auto; padding: 48px 0 56px; }
.has-side .acct-narrow { max-width: 600px; margin: 0; padding-top: 40px; }
.has-side .acct-wide { max-width: none; margin: 0; padding-top: 40px; }
/* The shared demo page's column, for the test suite's renders. */
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 0; }

.acct-lede { font-size: 15px; color: var(--text-light-secondary); margin-bottom: 26px; }
.acct-narrow .card + .card { margin-top: 20px; }

/* The overview: cards two across, and the ones that ask for something across the top. */
.acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.acct-grid > .is-full { grid-column: 1 / -1; }
@media (max-width: 1024px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Forms
   ========================================================================== */

.acct-form { display: flex; flex-direction: column; gap: 18px; }
.acct-form .btn { margin-top: 4px; width: 100%; }
/* Beside the side menu a full-width button across a settings form is a wall. */
.has-side .acct-form .btn { width: auto; align-self: flex-start; }

/* Fields: the same controls as the public site's forms, deliberately - somebody who
   filled in the reseller form should meet the same input here. */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; color: var(--text-light-primary); }
.field label small { font-weight: 400; color: var(--text-light-muted); }
/* Text-like inputs only. The billing details' company-or-person radios sit inside a
   .field too, and took this 46px box and padding - tall choices with the dot adrift. */
.field input:not([type="radio"]):not([type="checkbox"]), .field select {
  font: inherit; font-size: 15px; line-height: 1.4; color: var(--text-light-primary);
  padding: 11px 13px; min-height: 46px; width: 100%;
  background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field.invalid input:not([type="radio"]):not([type="checkbox"]), .field.invalid select { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; }
.field .hint { font-size: 13px; line-height: 1.5; color: var(--text-light-muted); }
.field-error { font-size: 13px; line-height: 1.5; color: #B42318; }
/* Two fields on one row: postal code and city. */
.field-row { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
/* A choice between two: a fieldset of .acct-check boxes. */
.field.choice { border: 0; margin: 0; padding: 0; gap: 8px; }
.field.choice legend { font-size: 14px; font-weight: 500; color: var(--text-light-primary); margin-bottom: 6px; padding: 0; }
.field.choice.invalid .acct-check { border-color: #B42318; }
/* The fields only a company fills in, hidden the moment "a private person" is ticked
   (Todor, 2026-09-22). :has() is what lets a form react to its own radio with no script;
   a browser without it shows them, marked "companies only", and the panel ignores them
   for a person anyway. Same spacing as the form around them. */
.acct-company-only { display: flex; flex-direction: column; gap: 18px; }
.acct-form:has(input[name="party_kind"][value="person"]:checked) .acct-company-only { display: none; }
/* ...and until anything is ticked: a new account starts on neither, and the form should
   not open on fields most people never need. Its own rule, so a browser that does not
   know :not(:has()) drops only this line. */
.acct-form:not(:has(input[name="party_kind"]:checked)) .acct-company-only { display: none; }
/* The VAT number: for an organisation or a person, but only where a VAT number means
   something, an EU country (Todor, 2026-09-23). The country options carry data-eu, and the
   field shows once one of them is the selected option - which the picker's script sets on
   the real select, so the rule follows it. Its own rule, so a browser without :has()
   shows the field always; the panel drops a VAT number from anywhere else. */
.acct-eu-only { display: flex; flex-direction: column; gap: 18px; }
.acct-form:not(:has(select[name="country_code"] option[data-eu]:checked)) .acct-eu-only { display: none; }

/* ---- The billing details, compact (Todor, 2026-09-22) ---------------------------
   Laid out like the form he sent: the label inside the box, a red star on what is
   required, Individual and Organisation side by side. partials/auth-form explains the
   floating label; everything here is the look of it. */
.acct-form.is-compact { gap: 14px; }
.acct-form.is-compact .acct-company-only, .acct-form.is-compact .acct-eu-only { gap: 14px; }
.field.is-float { position: relative; gap: 4px; }
.field.is-float > label {
  position: absolute; left: 14px; top: 7px; z-index: 1; max-width: calc(100% - 28px);
  font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--text-light-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  transition: top .12s ease, font-size .12s ease;
}
.field.is-float > input:not([type="radio"]):not([type="checkbox"]),
.field.is-float > select,
.field.is-float .cbx-button { min-height: 54px; padding: 23px 13px 7px; }
/* Empty and not being typed in: the label sits where the text will go. */
.field.is-float:has(> input:placeholder-shown:not(:focus)) > label {
  top: 17px; font-size: 15px; font-weight: 400;
}
/* A value the browser filled in is a value: the label moves up out of its way. */
.field.is-float:has(> input:autofill) > label { top: 7px; font-size: 12px; font-weight: 500; }
.field.is-float:focus-within > label { color: var(--accent); }
.field.is-float.invalid > label { color: #B42318; }
.field.is-float .req { margin-left: 2px; color: #B42318; }
.field.is-float .hint, .field.is-float .field-error { padding-left: 2px; }
@media (prefers-reduced-motion: reduce) { .field.is-float > label { transition: none; } }

/* Individual or Organisation: two boxes on one row. */
.field.choice.is-inline { gap: 6px; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-check.is-radio { align-items: center; padding: 14px 15px; font-size: 15px; font-weight: 500; color: var(--text-light-primary); }
.acct-check.is-radio input { margin: 0; }

/* The VAT number's country code, in front of the number, fixed (Todor, 2026-09-23): the
   chosen country's own prefix, drawn from the selected option so it follows the picker with
   no script, and never part of what is typed. Greece is EL. One line per EU member state,
   the same list as the panel's Countries::EU - a test holds the two together. */
.field.has-prefix { position: relative; }
.field-prefix {
  position: absolute; left: 14px; top: 23px; z-index: 1; pointer-events: none;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-light-primary);
}
.field.has-prefix > input:not([type="radio"]):not([type="checkbox"]) { padding-left: 46px; }
/* With a prefix the label stays up: the empty state would put it on top of the code. */
.field.is-float.has-prefix:has(> input:placeholder-shown:not(:focus)) > label { top: 7px; font-size: 12px; font-weight: 500; }
.acct-form:has(select[name="country_code"] option[value="AT"]:checked) .field-prefix::before { content: "AT"; }
.acct-form:has(select[name="country_code"] option[value="BE"]:checked) .field-prefix::before { content: "BE"; }
.acct-form:has(select[name="country_code"] option[value="BG"]:checked) .field-prefix::before { content: "BG"; }
.acct-form:has(select[name="country_code"] option[value="CY"]:checked) .field-prefix::before { content: "CY"; }
.acct-form:has(select[name="country_code"] option[value="CZ"]:checked) .field-prefix::before { content: "CZ"; }
.acct-form:has(select[name="country_code"] option[value="DE"]:checked) .field-prefix::before { content: "DE"; }
.acct-form:has(select[name="country_code"] option[value="DK"]:checked) .field-prefix::before { content: "DK"; }
.acct-form:has(select[name="country_code"] option[value="EE"]:checked) .field-prefix::before { content: "EE"; }
.acct-form:has(select[name="country_code"] option[value="ES"]:checked) .field-prefix::before { content: "ES"; }
.acct-form:has(select[name="country_code"] option[value="FI"]:checked) .field-prefix::before { content: "FI"; }
.acct-form:has(select[name="country_code"] option[value="FR"]:checked) .field-prefix::before { content: "FR"; }
.acct-form:has(select[name="country_code"] option[value="GR"]:checked) .field-prefix::before { content: "EL"; }
.acct-form:has(select[name="country_code"] option[value="HR"]:checked) .field-prefix::before { content: "HR"; }
.acct-form:has(select[name="country_code"] option[value="HU"]:checked) .field-prefix::before { content: "HU"; }
.acct-form:has(select[name="country_code"] option[value="IE"]:checked) .field-prefix::before { content: "IE"; }
.acct-form:has(select[name="country_code"] option[value="IT"]:checked) .field-prefix::before { content: "IT"; }
.acct-form:has(select[name="country_code"] option[value="LT"]:checked) .field-prefix::before { content: "LT"; }
.acct-form:has(select[name="country_code"] option[value="LU"]:checked) .field-prefix::before { content: "LU"; }
.acct-form:has(select[name="country_code"] option[value="LV"]:checked) .field-prefix::before { content: "LV"; }
.acct-form:has(select[name="country_code"] option[value="MT"]:checked) .field-prefix::before { content: "MT"; }
.acct-form:has(select[name="country_code"] option[value="NL"]:checked) .field-prefix::before { content: "NL"; }
.acct-form:has(select[name="country_code"] option[value="PL"]:checked) .field-prefix::before { content: "PL"; }
.acct-form:has(select[name="country_code"] option[value="PT"]:checked) .field-prefix::before { content: "PT"; }
.acct-form:has(select[name="country_code"] option[value="RO"]:checked) .field-prefix::before { content: "RO"; }
.acct-form:has(select[name="country_code"] option[value="SE"]:checked) .field-prefix::before { content: "SE"; }
.acct-form:has(select[name="country_code"] option[value="SI"]:checked) .field-prefix::before { content: "SI"; }
.acct-form:has(select[name="country_code"] option[value="SK"]:checked) .field-prefix::before { content: "SK"; }

/* The two steps after sign-up (partials/onboarding-steps), over the heading on
   /confirm-email and on /profile while they are the only thing to do. Done is a drawn
   tick, current is the accent: a shape and a colour, never colour alone. */
.acct-steps { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acct-steps-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-light-muted); }
.acct-steps-item + .acct-steps-item::before {
  content: ""; width: 32px; height: 1px; margin-right: 2px; background: var(--border-light);
}
.acct-steps-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-light);
  background: var(--surface-light); font-family: var(--font-mono); font-size: 12px; line-height: 1;
}
.acct-steps-item.is-current { color: var(--text-light-primary); }
.acct-steps-item.is-current .acct-steps-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.acct-steps-item.is-done .acct-steps-mark { background: #ECFDF3; border-color: #ABEFC6; }
.acct-steps-item.is-done .acct-steps-mark::before {
  content: ""; width: 5px; height: 10px; margin-top: -2px;
  border: solid #067647; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* The country, with the notes on VAT right under it. */
.acct-country { display: flex; flex-direction: column; gap: 10px; }
/* The line under the country: plain before the first payment, a notice after it. */
:where(.acct-app) .acct-country-note { margin: -2px 0 0; padding-left: 2px; font-size: 13px; line-height: 1.5; color: var(--text-light-muted); }
:where(.acct-app) .acct-country-note.is-locked { color: var(--text-light-secondary); }
.field select:disabled { background: var(--surface-light-alt); color: var(--text-light-secondary); cursor: not-allowed; opacity: 1; }
.vat-notes {
  list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-light); border: 1px solid var(--border-light-soft); border-radius: var(--radius-md);
}
.vat-notes li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.vat-mark {
  grid-row: span 2; display: flex; align-items: center; justify-content: center; height: 22px; margin-top: 1px;
  border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.vat-mark.is-free { background: #ECFDF3; color: #085D3A; box-shadow: inset 0 0 0 1px #ABEFC6; }
.vat-mark.is-added { background: #F2FBFD; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vat-notes strong { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text-light-primary); }
.vat-detail { font-size: 13px; line-height: 1.45; color: var(--text-light-muted); }
/* ---- The password checklist (partials/password-rules, js/password-rules.js) -----
   Under the two new-password fields, on sign-up and /password. Before anything is typed a
   line is a quiet dot; then a grey cross until it holds, and a green tick when it does.
   Both marks are drawn, not glyphs, so no font has to carry them. */
.acct-pw-group { display: flex; flex-direction: column; gap: 18px; }
.pw-rules { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pw-rules li {
  position: relative; padding-left: 24px; font-size: 13px; line-height: 1.45;
  color: var(--text-light-muted);
}
.pw-rules li::before {
  content: ""; position: absolute; left: 6px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--border-light);
}
.pw-rules li.is-unmet::before {
  left: 2px; top: 3px; width: 12px; height: 12px; border-radius: 0; background:
    linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);
}
.pw-rules li.is-met { color: #067647; }
.pw-rules li.is-met::before {
  left: 5px; top: 2px; width: 5px; height: 10px; border-radius: 0; background: none;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Visible to a screen reader only: the tick's meaning, written out by the script. */
.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;
}

/* The privacy line and the terms box, at the foot of the sign-up form. The line is
   information, with a small "i"; the box is a choice, in the form's own check style. */
:where(.acct-app) .acct-privacy {
  position: relative; margin: 0; padding-left: 26px;
  font-size: 14px; line-height: 1.5; color: var(--text-light-secondary);
}
.acct-privacy::before {
  content: "i"; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--text-light-muted); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 18px; text-align: center;
}
.acct-terms span { flex: 1 1 auto; }

/* First and last name: two equal halves, where postal code and city are one to two. */
.field-row.is-even { grid-template-columns: 1fr 1fr; }

/* ---- The country picker (js/country-select.js) ---------------------------------
   The script hides the real <select> (.cbx-native) and puts this in its place: a button
   that looks like the other fields, and a panel with a search box and the list. Nothing
   here is set from the script except classes and the hidden attribute - the CSP has no
   'unsafe-inline' for styles. [hidden] is restated where a display value would beat the
   browser's own rule for it. */
.cbx-native { display: none; }
.cbx { position: relative; }
.cbx-button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px;
  padding: 11px 13px; font: inherit; font-size: 15px; line-height: 1.4; text-align: left;
  color: var(--text-light-primary); background: var(--surface-light);
  border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer;
}
.cbx-button:focus-visible, .cbx.is-open .cbx-button { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field.invalid .cbx-button { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; }
.cbx-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-text.is-placeholder { color: var(--text-light-muted); }
.cbx-caret {
  flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0;
  border: solid var(--text-light-muted); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cbx.is-open .cbx-caret { transform: rotate(-135deg); margin: 4px 4px 0 0; }
/* A flag is a 4:3 picture, framed by a hairline so white fields do not melt into white. */
.cbx-flag {
  flex: none; width: 20px; height: 15px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, .14);
}
.cbx-flag[hidden] { display: none; }
.cbx-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  padding: 8px; background: var(--surface-light);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  box-shadow: 0 14px 36px rgba(11, 18, 32, .16);
}
/* The search box takes the fields' own input style from .field; only its size differs. */
.acct-app .field .cbx .cbx-search { min-height: 40px; padding: 8px 11px; }
.cbx-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 272px; overflow-y: auto; }
.cbx-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 15px; color: var(--text-light-primary); cursor: pointer;
}
.cbx-option[hidden] { display: none; }
.cbx-name { flex: 1 1 auto; min-width: 0; }
/* The VAT a country carries, on the right of its row and of the button. */
.cbx-vat {
  flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums;
  background: #F2FBFD; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(12, 141, 161, .35);
}
.cbx-vat.is-zero { background: #ECFDF3; color: #085D3A; box-shadow: inset 0 0 0 1px #ABEFC6; }
.cbx-vat[hidden] { display: none; }
.cbx-option[aria-selected="true"] .cbx-vat { font-weight: 600; }
.cbx-option:hover, .cbx-option.is-active { background: #F2FBFD; }
.cbx-option.is-active { box-shadow: inset 2px 0 0 var(--accent); }
.cbx-option[aria-selected="true"] { font-weight: 600; }
:where(.acct-app) .cbx-empty { margin: 0; padding: 10px; font-size: 14px; color: var(--text-light-muted); }

.form-msg { padding: 13px 15px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.form-msg.error { background: #FEF3F2; color: #912018; border: 1px solid #FECDCA; }
.form-msg.ok { background: #ECFDF3; color: #085D3A; border: 1px solid #ABEFC6; }

/* The decoy field: off-canvas, never display:none -- some bots skip hidden inputs and
   fill only what is rendered. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.acct-check {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 13px 15px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  background: var(--surface-light); font-size: 14px; line-height: 1.5; color: var(--text-light-body);
}
.acct-check:hover { border-color: var(--text-light-muted); }
.acct-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.acct-check:has(input:checked) { border-color: var(--accent); background: #F2FBFD; }
.acct-check.invalid { border-color: #B42318; }

.acct-alt { font-size: 14px; color: var(--text-light-secondary); margin: 22px 0 0; }
.acct-muted { font-size: 13px; color: var(--text-light-muted); margin: 8px 0 0; }
.acct-actions { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* A configuration carried in from the public site. Accent-tinted, because it is news
   rather than a warning. */
.acct-note {
  padding: 12px 14px; margin-bottom: 22px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--accent); border-left-width: 3px; border-radius: var(--radius-md);
  background: #F2FBFD; color: var(--text-light-body);
}

/* ==========================================================================
   Cards on the overview
   ========================================================================== */

/* Label-value rows: the carried-in configuration, and the account's own details read
   from the panel. One look for both, because both answer "what is this, exactly". */
.acct-build dl, .acct-facts dl { margin: 10px 0 14px; display: flex; flex-direction: column; }
.acct-build dl > div, .acct-facts dl > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--border-light-soft); font-size: 14px;
}
.acct-build dl > div:last-child, .acct-facts dl > div:last-child { border-bottom: 0; }
.acct-build dt, .acct-facts dt { color: var(--text-light-muted); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.acct-build dd, .acct-facts dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* Something the customer has to do: a top-up waiting for its money (/balance). Accent-
   edged like .acct-note, because it asks for something rather than reporting an error. */
.acct-confirm { border-left: 3px solid var(--accent); }
/* Not the eyebrow: `.acct-confirm p` outranks `.eyebrow`, and blew the card's caps label
   up to body size. */
.acct-confirm p:not(.eyebrow) { font-size: 14px; margin-bottom: 0; }
.acct-confirm form { margin: 14px 0 0; }

/* ---- /confirm-email (Todor, 2026-09-23) -------------------------------------------
   The envelope over the heading, the code in large boxes, and what to do if the message
   does not come. */
.acct-verify-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%;
  background: #F2FBFD; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(12, 141, 161, .25);
}
.acct-verify-email { color: var(--text-light-primary); font-weight: 600; overflow-wrap: anywhere; }
.acct-verify .card + .card { margin-top: 16px; }

.acct-code-card { padding: 24px 24px 26px; border-top: 3px solid var(--accent); }
.acct-code-card.is-closed { border-top-color: var(--border-light); }
:where(.acct-app) .acct-code-card.is-closed p { margin: 0; font-size: 14px; }
.acct-code-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.acct-code-label { font-size: 14px; font-weight: 600; color: var(--text-light-primary); }
/* Without the script: one field, sized for six digits and spaced like them. */
.acct-code-input {
  width: 100%; max-width: 300px; min-height: 60px; padding: 10px 8px 10px calc(8px + .4em);
  font-family: var(--font-mono); font-size: 28px; font-weight: 600; letter-spacing: .4em; text-align: center;
  color: var(--text-light-primary); background: var(--surface-light);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
/* With it: the field stays in the form, carrying the value, and the boxes stand in. */
.acct-code-input.is-enhanced { display: none; }
.acct-code-boxes { display: flex; gap: 10px; width: 100%; max-width: 400px; }
.acct-code-box {
  flex: 1 1 0; min-width: 0; max-width: 56px; height: 64px; padding: 0;
  font-family: var(--font-mono); font-size: 28px; font-weight: 600; line-height: 1; text-align: center;
  color: var(--text-light-primary); background: var(--surface-light); caret-color: var(--accent);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
/* Three and three, the way people read six digits back. */
.acct-code-box:nth-child(3) { margin-right: 10px; }
.acct-code-box.is-filled { border-color: var(--text-light-muted); }
.acct-code-input:focus, .acct-code-box:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.acct-code-form.is-invalid .acct-code-box, .acct-code-form.is-invalid .acct-code-input { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; }
.acct-code-form.is-sending .acct-code-box { border-color: var(--accent); }
.acct-code-error { margin: 0; }
:where(.acct-app) .acct-code-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-light-muted); }
.acct-code-form .btn { margin-top: 6px; }

/* "Did not get it?" - quieter than the code, which is what most people need. */
.acct-help { background: var(--surface-light); }
.acct-help.is-bounced { border-left: 3px solid #B42318; }
:where(.acct-app) .acct-help-title { font-size: 15px; margin-bottom: 8px; }
:where(.acct-app) .acct-help p { font-size: 14px; }
.acct-help .acct-list { margin: 0 0 16px; }
.acct-help-form { margin: 0 0 4px; }
@media (max-width: 420px) {
  .acct-code-boxes { gap: 6px; }
  .acct-code-box { height: 54px; font-size: 24px; }
  .acct-code-box:nth-child(3) { margin-right: 6px; }
}

.acct-list { margin: 10px 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.acct-list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--text-light-body); }
.acct-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ==========================================================================
   The document lists
   ========================================================================== */

.acct-table-wrap { padding: 0; overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.acct-table th {
  text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-light-muted);
  padding: 11px 14px; border-bottom: 1px solid var(--border-light);
}
.acct-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-light-soft); white-space: nowrap; }
.acct-table tr:last-child td { border-bottom: 0; }
/* A row's links: the PDF, and a Pay button where the brand pays from links (2026-10-11). */
.acct-row-links .btn { margin-left: 12px; min-height: 30px; padding: 0 12px; font-size: 13px; }
.acct-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.acct-table .mono, .acct-facts .mono { font-family: var(--font-mono); font-size: 13px; }

/* Payment state, as a word in a pill: green paid, red overdue, amber waiting. */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500;
        background: var(--surface-light-alt); color: var(--text-light-secondary); }
.pill--paid { background: #ECFDF3; color: #085D3A; }
.pill--overdue { background: #FEF3F2; color: #912018; }
.pill--awaiting_payment, .pill--partially_paid { background: #FFFAEB; color: #93370D; }

/* ==========================================================================
   The balance (/balance)
   ========================================================================== */

/* What is on the balance: the one number the page is about. */
:where(.acct-app) .acct-balance-amount {
  margin: 4px 0 6px; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--text-light-primary); font-variant-numeric: tabular-nums;
}

/* The amount field, with the euro sign inside it on the left. The selector matches the
   fields' own rule in weight, or that rule's padding would win. */
.acct-amount { position: relative; }
.acct-amount-cur {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--text-light-muted); pointer-events: none;
}
.field .acct-amount input:not([type="radio"]):not([type="checkbox"]) { padding-left: 30px; font-variant-numeric: tabular-nums; }

/* The suggested amounts: buttons that fill the field in (js/balance.js). [hidden] is
   restated because display:flex would beat the browser's own rule for it. */
.acct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.acct-chips[hidden] { display: none; }
.acct-chip {
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  color: var(--text-light-primary); background: var(--surface-light); border: 1px solid var(--border-light);
}
.acct-chip:hover { border-color: var(--text-light-muted); }
.acct-chip[aria-pressed="true"] { color: var(--accent); background: #F2FBFD; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* What a bank transfer needs, as label-value rows like the overview's. The reference is the
   one line that decides whose money it is, so it is the one that stands out, and a click
   selects all of it for copying. */
.acct-payto { margin: 12px 0 10px; display: flex; flex-direction: column; }
.acct-payto > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--border-light-soft); font-size: 14px;
}
.acct-payto > div:last-child { border-bottom: 0; }
.acct-payto dt { color: var(--text-light-muted); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.acct-payto dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.acct-payto .mono { font-family: var(--font-mono); font-size: 13px; }
.acct-payto .acct-ref { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-light-primary); user-select: all; }

/* How to pay (partials/payment-choice, 2026-09-23): once or every month, then the method,
   each with a line under its name. Every month is card or PayPal only: with it ticked the
   bank transfer goes, and a line says why, by the stylesheet alone. A browser without
   :has() shows every method and the line; the panel refuses the pair either way. */
.acct-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.acct-method { align-items: flex-start; }
.acct-method input { margin-top: 2px; }
.acct-method-text { display: flex; flex-direction: column; gap: 2px; }
.acct-method-name { font-size: 15px; font-weight: 500; color: var(--text-light-primary); }
.acct-method-detail { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--text-light-muted); }
.acct-form:has(input[name="frequency"][value="monthly"]:checked) :is(.acct-method--bank_transfer, .acct-method--crypto) { display: none; }
.acct-form:has(input[name="frequency"]) .acct-monthly-only { display: none; }
.acct-form:has(input[name="frequency"][value="monthly"]:checked) .acct-monthly-only { display: block; }

/* /subscriptions (2026-09-23): one card each - what it is for and how much, its state,
   the facts in a row, the months it paid folded away, and cancelling at the foot. */
.acct-subs { display: flex; flex-direction: column; gap: 16px; }
.acct-sub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:where(.acct-app) .acct-sub-title { font-size: 17px; margin: 0 0 2px; }
:where(.acct-app) .acct-sub-amount { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-light-primary); font-variant-numeric: tabular-nums; }
.acct-sub-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 20px; margin: 16px 0 0; }
.acct-sub-facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-light-muted); }
.acct-sub-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; color: var(--text-light-primary); }
.acct-sub-facts .mono { font-family: var(--font-mono); font-size: 13px; }
.acct-sub-pays { margin-top: 14px; border-top: 1px solid var(--border-light-soft); padding-top: 10px; }
.acct-sub-pays summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--accent); }
.acct-sub-pays .acct-table { margin-top: 8px; }
:where(.acct-app) .acct-sub-actions { margin: 14px 0 0; }
.acct-sub-confirm { margin-top: 14px; padding: 14px 16px; border: 1px solid #FECDCA; border-radius: var(--radius-md); background: #FEF3F2; }
:where(.acct-app) .acct-sub-confirm p { margin: 0 0 10px; font-size: 14px; color: #912018; }
.acct-sub-confirm .acct-actions { margin: 0; }
.acct-sub.is-ended { background: var(--surface-light-alt); }
.acct-sub.is-ended .acct-sub-amount { color: var(--text-light-secondary); }
.pill--m-active { background: #ECFDF3; color: #085D3A; }
.pill--m-past_due { background: #FEF3F2; color: #912018; }
.pill--m-pending { background: #FFFAEB; color: #93370D; }

/* A table's own title, in a card that has no heading of its own. */
.acct-caption {
  caption-side: top; text-align: left; padding: 14px 14px 4px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--text-light-muted);
}

/* ==========================================================================
   Tickets (/tickets, /tickets/new, /tickets/view - Todor, 2026-09-23)
   ========================================================================== */

/* The page's title with its one action on the same line, on the right; the lede under
   both. The button used to wrap under a long lede and land on the table (Todor,
   2026-09-23). */
.acct-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
:where(.acct-app) .acct-page-head h1 { margin: 0; }
.acct-head-action { display: inline-flex; align-items: center; gap: 6px; }
:where(.acct-app) .acct-back { margin: 0 0 10px; font-size: 14px; }

/* No tickets at all: one calm card in the middle, with the way to open one. */
.acct-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 24px; }
.acct-empty-icon {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px;
  border-radius: 50%; background: #F2FBFD; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(12, 141, 161, .25);
}
:where(.acct-app) .acct-empty-state h2 { font-size: 17px; margin-bottom: 6px; }
:where(.acct-app) .acct-empty-state p { max-width: 420px; margin-bottom: 18px; color: var(--text-light-secondary); }

/* The table's own toolbar: Open, Closed, All, each with its count. */
.acct-table-card { padding: 0; overflow: hidden; }
.acct-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border-light-soft); flex-wrap: wrap; }
.acct-main .acct-tabs a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--text-light-secondary); text-decoration: none;
}
.acct-main .acct-tabs a:hover { background: var(--surface-light-alt); color: var(--text-light-primary); text-decoration: none; }
.acct-main .acct-tabs a[aria-current="page"] { background: #F2FBFD; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(12, 141, 161, .3); }
.acct-tab-count {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums; background: var(--surface-light-alt); color: var(--text-light-secondary);
}
.acct-tabs a[aria-current="page"] .acct-tab-count { background: #fff; color: var(--accent); }
:where(.acct-app) .acct-tab-empty { margin: 0; padding: 22px 16px; font-size: 14px; color: var(--text-light-muted); }
.acct-ticket-subject { white-space: normal; min-width: 220px; }

/* The priority, as a word with a dot in front: the dot's colour is the scale, the word says it. */
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-light-secondary); }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-light); }
.prio--normal::before { background: var(--accent); }
.prio--high::before { background: #DC6803; }
.prio--urgent { color: #912018; font-weight: 600; }
.prio--urgent::before { background: #D92D20; }

/* The ticket's state, in the same pills as the documents'. */
.pill--t-open { background: #F2FBFD; color: var(--accent); }
.pill--t-awaiting_you { background: #FFFAEB; color: #93370D; }
.pill--t-resolved { background: #ECFDF3; color: #085D3A; }

/* The departments across the top, then the form with the notes beside it on a wide screen
   and under it on a phone. */
.acct-ticket-new { display: flex; flex-direction: column; gap: 18px; }
.acct-ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
@media (max-width: 1024px) { .acct-ticket-layout { grid-template-columns: minmax(0, 1fr); } }
.acct-ticket-form { padding: 24px; }
.acct-ticket-tips { background: var(--surface-light); }
.acct-ticket-tips .acct-list { margin: 0; }
/* The departments as cards to pick from, the name alone on each, all four on one row
   (Todor, 2026-09-23). The row is measured, not the window: beside the side menu the page
   is narrower than the screen, so the fieldset is a container and the cards fold to two by
   two once four no longer fit a name like "Technical support" on one line. A browser
   without container queries keeps four. */
.acct-dept-pick { container-type: inline-size; }
.acct-dept-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@container (max-width: 820px) { .acct-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 340px) { .acct-dept-grid { grid-template-columns: minmax(0, 1fr); } }
.acct-dept {
  position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  padding: 14px 14px 14px 40px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  background: var(--surface-light);
}
.acct-dept input { position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.acct-dept:hover { border-color: var(--text-light-muted); }
.acct-dept:has(input:checked) { border-color: var(--accent); background: #F2FBFD; box-shadow: inset 0 0 0 1px var(--accent); }
.acct-dept-name { font-size: 15px; font-weight: 600; color: var(--text-light-primary); }
.field textarea {
  font: inherit; font-size: 15px; line-height: 1.55; color: var(--text-light-primary); width: 100%;
  padding: 12px 13px; min-height: 180px; resize: vertical;
  background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field.invalid textarea { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; }

/* One ticket: the number, the state and the facts, then the conversation. */
:where(.acct-app) .acct-ticket-title { margin-bottom: 8px; overflow-wrap: anywhere; }
.acct-ticket-no { font-family: var(--font-mono); font-weight: 500; color: var(--text-light-muted); }
.acct-ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--text-light-secondary); margin: 0 0 22px; }
.acct-thread { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.acct-post { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 16px 18px; }
.acct-post.is-staff { border-left: 3px solid var(--accent); }
.acct-post.is-mine { background: var(--surface-light); }
.acct-post-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.acct-post-who { font-size: 14px; font-weight: 600; color: var(--text-light-primary); }
.acct-post-when { font-family: var(--font-mono); font-size: 12px; color: var(--text-light-muted); }
.acct-post-body { font-size: 14px; line-height: 1.6; color: var(--text-light-body); white-space: pre-wrap; overflow-wrap: anywhere; }
:where(.acct-app) .acct-thread-wait { margin: -6px 0 18px; }
.acct-reply { padding: 20px 22px; }
/* Closing the ticket: under the reply box, quieter than it, a line and a plain button
   (Todor, 2026-09-23). */
.acct-close-ticket {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 18px; border: 1px dashed var(--border-light); border-radius: var(--radius-lg);
}
:where(.acct-app) .acct-close-ticket p { margin: 0; font-size: 14px; color: var(--text-light-secondary); }
.acct-close-ticket .btn { background: var(--surface-light); }

@media (max-width: 600px) {
  .acct-narrow, .acct-wide, .has-side .acct-narrow, .has-side .acct-wide { padding-top: 28px; }
  .field-row, .field-row.is-even { grid-template-columns: 1fr; }
}
/* The two radios stay side by side down to a small phone; below that, one each. */
@media (max-width: 360px) { .choice-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Ordering and My services (/order, /order/pay, /services, /services/view - 2026-09-23)
   ========================================================================== */
:where(.acct-app) .acct-order-product { font-size: 19px; margin: 2px 0 4px; }
.acct-order-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .acct-order-fields { grid-template-columns: minmax(0, 1fr); } }
.acct-inline-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 14px; }
.acct-inline-form label { color: var(--text-light-muted); font-family: var(--font-mono); font-size: 12px; }
/* A note or a reason is a line or two, not a ticket: the tickets' tall box is too much here. */
.field.is-short textarea { min-height: 72px; }
/* A ready server's choices under its hardware (2026-09-24): network, addresses, SLA, term, VLAN. */
.acct-order-options { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light-soft); gap: 12px; }
.acct-order-options .eyebrow { margin: 0; }
.acct-order-options .acct-muted { margin: 0 0 4px; font-size: 13.5px; }
.acct-order-options .btn { align-self: flex-start; }
/* An order's pay page (2026-09-25): the ways to pay under their own labels, the bank
   transfer's account first and card or PayPal after it. */
.acct-pay-by { margin-top: 18px; color: var(--text-light-primary); }

/* The servers' table: the name links to the server, the number and product under it. */
.acct-svc-waiting { margin-bottom: 16px; }
.acct-svc-name { font-weight: 600; color: var(--text-light-primary); }
.acct-svc-sub { display: block; font-size: 12.5px; color: var(--text-light-muted); }
:where(.acct-app) p.acct-svc-sub { margin: 2px 0 0; }
.acct-svc-head { align-items: flex-start; margin-bottom: 14px; }
.pill--s-active { background: #ECFDF3; color: #085D3A; }
.pill--s-terminating, .pill--s-pending { background: #FFFAEB; color: #93370D; }
.pill--s-suspended { background: #FEF3F2; color: #912018; }
.pill--s-demo, .pill--s-main { background: #F2FBFD; color: var(--accent); margin-left: 4px; }

/* One server: power as a coloured dot and a word, its three buttons in a row. */
.acct-power-state { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin: 6px 0 0; color: var(--text-light-primary); }
.acct-power-state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--border-light); flex: none; }
.acct-power-state.is-on::before { background: #12B76A; }
.acct-power-state.is-off::before { background: #D92D20; }
.acct-power .acct-actions form { margin: 0; }

/* The addresses, with the reverse DNS name editable on each row. */
.acct-net-table td { vertical-align: middle; }
/* The name column takes what the addresses leave, so the Save button stays in the card. */
.acct-net-table td:last-child { width: 100%; }
.acct-rdns-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.acct-rdns-form input {
  font-size: 13px; padding: 6px 9px; flex: 1 1 auto; width: auto; min-width: 150px; color: var(--text-light-primary);
  background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
.acct-rdns-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
:where(.acct-app) .acct-net-note { padding: 0 14px 14px; margin: 0; }

/* On a phone the addresses are rows one under another: the address, then the netmask and the
   gateway with their names, then the reverse DNS field across the width. */
@media (max-width: 700px) {
  .acct-net-table thead { display: none; }
  .acct-net-table tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border-light-soft); }
  .acct-net-table td { display: block; padding: 2px 0; border: 0; white-space: normal; width: auto; }
  .acct-net-table td:last-child { width: auto; padding-top: 8px; }
  .acct-net-table td[data-label]::before {
    content: attr(data-label) " "; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: var(--track-caps); color: var(--text-light-muted); margin-right: 6px;
  }
  .acct-net-table td:empty { display: none; }
  .acct-svc-history td { white-space: normal; }
}

/* A root password, shown on the answer that asked for it: framed, and selected in one click. */
.acct-secret { margin-bottom: 16px; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.acct-secret-value { user-select: all; font-size: 15px; letter-spacing: 0.04em; }

/* An operating system's name with its logo in front (2026-09-24). */
.acct-os { white-space: nowrap; }
.acct-os-mark { display: inline-block; vertical-align: -3px; margin-right: 7px; }

/* A server's traffic (2026-10-04): the SVG from partials/traffic-chart.php is coloured from here,
   since the client's CSP allows no inline style. In is the accent, out the dark text colour. */
.acct-traffic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acct-traffic-head .eyebrow { margin: 0; }
.acct-traffic-ranges { display: flex; gap: 4px; flex-wrap: wrap; }
.acct-traffic-ranges .is-on { border-color: var(--accent); color: var(--accent); }
.acct-traffic-key { display: flex; gap: 16px; list-style: none; margin: 14px 0 4px; padding: 0; font-size: 13px; color: var(--text-light-secondary); }
.acct-traffic-key li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.acct-traffic-key .is-in::before { background: var(--accent); }
.acct-traffic-key .is-out::before { background: var(--text-light-secondary); }
.acct-grid > .acct-traffic { min-width: 0; }
.tr-wrap { overflow-x: auto; max-width: 100%; margin: 4px 0 8px; }
.tr-chart { display: block; width: 100%; min-width: 540px; height: auto; font-family: var(--font-mono); font-size: 11px; }
.tr-grid line, .tr-tick { stroke: var(--border-light); stroke-width: 1; }
.tr-axis text { fill: var(--text-light-muted); }
.tr-in-area { fill: var(--accent); fill-opacity: .22; }
.tr-in-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.tr-out-area { fill: var(--text-light-secondary); fill-opacity: .10; }
.tr-out-line { fill: none; stroke: var(--text-light-secondary); stroke-width: 1.5; }
.tr-hits rect { fill: transparent; }
.tr-hits rect:hover { fill: var(--accent); fill-opacity: .10; }
.acct-traffic-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; }
.acct-traffic-facts dt { color: var(--text-light-muted); font-family: var(--font-mono); font-size: 12px; }
.acct-traffic-facts dd { margin: 2px 0 0; font-weight: 500; }
@media (max-width: 720px) { .acct-traffic-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }