/* Shop host page — what is particular to the account shell.

   The furniture it shares with the marketing pages (the reset, the 62rem column, the
   brand and its mark, the language switch, the footer) lives in /shared/chrome.css and
   is loaded before this. That file exists *because* of this one: until 2026-08-18 the
   shop had its own reset, its own 16px body and a bare bold word where the site has a
   brand mark, and bringing the two together produced fourteen byte-identical rule blocks
   in two files — the state a design drifts out of again.

   What stays here is the one real difference. The site is a set of documents at 62rem;
   this is a **form column of 34rem inside** that same page column, which is the width the
   contact form already uses. A 62rem-wide text field is not a design, it is a mistake
   somebody made once.

   Type follows the site: the display face (monospaced, on purpose — see tokens.css) for
   headings, labels, buttons and figures, the sans for prose, section headings as the
   ruled uppercase eyebrow the interior pages use, square corners throughout.

   Load order: tokens → chrome → this. */

/* `header > nav`, not `header nav`: the language switch has a nav of its own inside it
   for the open panel, and that one is a column. */
.top > nav { display: flex; gap: 1.5rem; align-items: baseline; }

/* Where "Account" sits on every other page — last in the nav, hard right. It reads as
   the current item rather than as a link, which it is: ink, like the marketing pages
   set the page you are on, and muted would have made the only word naming this page the
   quietest thing in the line. */
.crumb {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The three views, and every panel inside them: a form column, not a page column. */
main > section { max-width: 34rem; }

/* Except the checkout, which is not a form column. It is a table of what is being
   bought — item, quantity, term, price — beside the fields that go with it, and 34rem
   squeezed "PROCESS solving (systems code)" into four lines next to a select. A review
   page is read across rather than filled in downwards. */
body > main > #review { max-width: 46rem; }
/* The fields inside it stay narrow, though: a 46rem text box is not a design, and the
   reason for the form column in the first place still holds for the parts that *are* a
   form. `#assign` is named beside the form because it is one — a disclosure holding
   fields, sitting outside `<form>` only because it belongs to the basket above it. */
#review form, #review #assign { max-width: 34rem; }

/* ── type ────────────────────────────────────────────────────────────────────── */

/* The interior-page size, not the hero's: this page is a place to do something, and a
   4rem "Your account" would be shouting the least interesting word on screen. */
h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0 0 1.5rem;
}

/* The same eyebrow the legal and marketing pages use for a section label. */
h2 {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.75rem 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-strong);
}

/* ── forms ───────────────────────────────────────────────────────────────────── */

form { display: grid; gap: .9rem; margin: 1.25rem 0; }
label { display: grid; gap: .3rem; font-size: .9rem; color: var(--muted); }

input, select, textarea {
  padding: .55rem .65rem;
  border: 1px solid var(--line-strong);
  background: var(--card);
  font: inherit;
  color: var(--ink);
}
/* Taller by the row count the markup asks for, and only ever taller: a field that can
   be dragged wider escapes the column every other field on the page keeps to. */
textarea { resize: vertical; }

button {
  justify-self: start;
  padding: .7rem 1.3rem;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: .9rem;
  cursor: pointer;
}
button:hover { background: var(--ink); }

/* A secondary action inside a table of facts. Ending a subscription is a real thing to
   offer and not the thing this page is *for* — three accent blocks down the side of a
   list would out-shout "buy a plan", which is the one loud action here. */
button.quiet {
  padding: .35rem .8rem;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  font-size: .8rem;
  white-space: nowrap;
}
button.quiet:hover { background: var(--neutral); color: var(--on-accent); }

/* The amounts worth one click, under the credit field they write into. A row rather
   than the form's own stack, because they are one question offered three ways and not
   three questions; pulled up against the field, because the form's .9rem gap is the
   distance between separate questions. */
.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: -.5rem; }

/* The one label that is a line and not a stack: a tickbox belongs beside its sentence,
   and the grid above would leave it hovering over the text on its own. `start` rather
   than `center` because the sentence wraps on a narrow screen and a checkbox drifting
   to the middle of two lines reads as belonging to neither. */
.accept {
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
  margin: .35rem 0 .25rem;
}
.accept input { width: 1rem; height: 1rem; margin-top: .15rem; padding: 0; }

/* The one thing a minutes-old account has to do, said in a sentence with a quiet
   button under it — not the page's loudest button on its own, which is what it was. */
#unconfirmed {
  display: grid;
  gap: .5rem;
  justify-items: start;
  margin: 0 0 1.5rem;
  font-size: .9rem;
  color: var(--muted);
}

/* The provider's side of the account: a quiet button and the sentence that says what
   it opens, set like the confirmation block above it. */
#portal-row {
  display: grid;
  gap: .5rem;
  justify-items: start;
  margin: 0 0 1.5rem;
  font-size: .9rem;
  color: var(--muted);
}

/* ── the account list ────────────────────────────────────────────────────────── */

/* Label in the display face, value in prose — the same way the marketing pages set a
   list of facts, and the same way the imprint sets its disclosures. */
dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem 1.5rem;
  margin: 0 0 1.5rem;
}
dt {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
dd { margin: 0; color: var(--muted); }

/* The groups this account holds. Its own table rather than the checkout's `.basket`,
   which pairs a name with a *number* and right-aligns the second column for it — here
   the second column is an address, and an address flush right against nothing reads as
   a column that lost its heading.

   This page does not load the marketing stylesheet at all (its `<head>` is tokens +
   chrome + this file), so `.basket` would arrive here as an unstyled browser table. */
table.groups {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1.25rem;
}
table.groups th, table.groups td {
  text-align: left;
  padding: .55rem 1.5rem .55rem 0;
  border-bottom: 1px solid var(--line);
}
table.groups th {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The group name is what somebody came here to read; the administrator is the fact
   beside it. Same weighting as dt/dd above, so the two lists read as one page. */
table.groups td:last-child { color: var(--muted); }

/* The subscription list is the same table with four columns, and the last one holds a
   button rather than a fact — so it drops the muted colour and takes only the width the
   button needs. The date column is sized to hold "26.9.2026 · verlängert sich" on one
   line: it wrapped to three, which made a two-line row out of every subscription. */
table.groups.subs td:last-child, table.groups.subs th:last-child {
  width: 1%;
  padding-right: 0;
  color: inherit;
}
table.groups.subs td:nth-child(2), table.groups.subs th:nth-child(2) { width: 4rem; }
/* A date and nothing else. Whether it renews used to ride in this cell — "26.9.2026 ·
   verlängert sich" — which needed thirteen rem inside a thirty-four rem form column and
   left the product name six, so "PROCESS solving (systems code)" wrapped to four lines.
   It belongs in the last column anyway: that is where the *doing* is, and a term that
   does not renew has a word there instead of a button. */
table.groups.subs td:nth-child(3), table.groups.subs th:nth-child(3) { width: 6.5rem; }
table.groups.subs .ends { color: var(--muted); font-size: .85rem; white-space: nowrap; }

/* ── seats ───────────────────────────────────────────────────────────────────────
   One collapsed panel per group. It uses the disclosure furniture the rest of the page
   already has, so a group reads like the other things you can open — and the summary
   carries "9 of 10 free", which is the whole answer for anybody who opens it, looks,
   and closes it again. */
.seat-group { border-top: 1px solid var(--line); }
.seat-group > summary {
  font-family: var(--font-display);
  font-size: .9rem;
  color: var(--accent);
  cursor: pointer;
  padding: .8rem 0;
}
.seat-group > summary:hover { color: var(--ink); }
.seat-body { padding: 0 0 1.25rem; }

/* Bought against handed out, per plan — the same label/value grid the account details
   use, so the two lists read as one page rather than as two designs. */
.tally { grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1.5rem; margin: 0 0 1.25rem; }

/* A caption belongs to the list under it, not between two of them: the gap below is
   closed and the gap above opened, so the label reads downwards. */
.captioned + .captioned { margin-top: 1.5rem; }
.captioned > .cap {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .4rem;
}
.captioned table, .captioned > .note { margin-top: .4rem; }

/* The member and invitation lists. `table.groups` above gives them their rules and
   spacing; what is particular here is that the last two columns hold a state word and
   a button rather than facts, so they take only the width they need. */
table.seatlist td:nth-child(3), table.seatlist td:last-child { width: 1%; white-space: nowrap; }
/* The tier keeps its line. Two buttons in the last cell took enough width to break
   "BlueAgent EDU" over two, which made a two-line row out of every invitation — the
   same starvation the subscriptions table had. Safe to pin: only *plans* appear in
   these two lists, and every plan name is short. An add-on is not a seat, so the long
   name that would need the wrap can never arrive here. */
table.seatlist td:nth-child(2) { white-space: nowrap; }
table.seatlist td:last-child { padding-right: 0; color: inherit; }
table.seatlist .state { color: var(--muted); font-size: .85rem; }
/* An invitation carries two buttons — show the code, and take it back — and they are
   one cell, so they need their own gap rather than the word-space they would otherwise
   share. */
table.seatlist .acts { display: flex; gap: .4rem; }

/* The form is a form: it takes the page's own field column back, and it is separated
   from the lists above it rather than running straight on from them. */
form.give { margin-top: .4rem; }
form.give .note { margin: 0; }
/* A count is two characters wide. A 34rem box holding "1" reads as a field that wants
   a sentence, and every other number on this site is set to the width of its number. */
form.give input[type="number"] { width: 7rem; }

/* What just happened, at the top of the panel it happened in — not at the foot of the
   page. `#msg` lives below the orders and the sign-out button, which is off screen from
   here, and the sentence is sometimes an invite code that exists nowhere else. */
.seat-body > .said {
  margin: 0 0 1.25rem;
  padding: .6rem .8rem;
  border-left: 3px solid var(--accent);
  background: var(--card);
  font-size: .9rem;
}
.seat-body > .said.bad { border-left-color: var(--danger); color: var(--danger); }

/* What it comes to. Its own block rather than a row in the table, because the table is
   a form — a row of inputs with a figure at the bottom reads as another thing to fill
   in — and because the sentence beside the number is doing as much work as the number:
   net, in advance, and the provider's figure is the one that binds. */
#totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1.5rem;
  /* As wide as the basket table above it, so the figures stand in its price column
     rather than in a second right-aligned column an inch to the left. */
  max-width: 44rem;
  margin: 0 0 1.25rem;
  font-size: .95rem;
}
#totals .sum {
  font-family: var(--font-display);
  font-weight: 600;
  border-top: 1px solid var(--line);
  padding-top: .5rem;
}
#totals .money { text-align: right; font-variant-numeric: tabular-nums; }

/* ── the panels ──────────────────────────────────────────────────────────────── */

/* Each panel is a disclosure, and its summary is what a reader navigates by — so it is
   set like navigation rather than like a heading. The marker stays: this really does
   open and close, and drawing that is the marker's whole job. */
details { border-top: 1px solid var(--line); }
details > summary {
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--accent);
  cursor: pointer;
  padding: .8rem 0;
}
details > summary:hover { color: var(--ink); }
details[open] { padding-bottom: 1rem; }

#change-email p { font-size: .9rem; color: var(--muted); }

/* The landing page after a payment: its two facts ARE the page, so they are not set in
   the muted colour a list of account details uses for its values. */
#ready dd { color: var(--ink); }

/* The low-credit warning: a fieldset, because the checkbox and the two fields under it
   are one question and a browser's default grouping is the accessible one. Styled down
   to a rule and a heading — the default 2px groove is from another decade and this page
   has one border weight. */
#warn {
  border: 0;
  border-top: 1px solid var(--line);
  margin: .5rem 0 0;
  padding: 1rem 0 0;
  display: grid;
  gap: .9rem;
}
#warn legend {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  padding: 0 .6rem 0 0;
}
#warn-fields { display: grid; gap: .9rem; }
#warn-fields .note { margin: 0; }

/* The group picker is a paragraph rather than a label — the `<select>` needs its own
   `for=`, since the sentence naming the chosen group's administrator sits outside it —
   so it has to be given the stack a label already has. */
#pick-row { display: grid; gap: .3rem; }
/* …and that sentence belongs to the select above it, not to the form at large, so the
   grid gap is its spacing rather than the marketing note's own generous top margin. */
#pick-admin { margin-top: 0; }

/* The fields describing a group that does not exist yet, wrapped so they appear and
   disappear together when the picker changes. The wrapper has to carry the form's own
   grid: a plain block inside a grid form is ONE grid item, so its children fall out of
   the gap and the note under the name runs straight into the next label. */
#new-group { display: grid; gap: .9rem; }
/* …and inside it the gap is the spacing, so the marketing note's own top margin —
   which is what separates a note from the prose above it on a page — would add to it. */
#new-group .note { margin: 0; }
#orders-list ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
#orders-list li { margin: .2rem 0; }

/* Sign out is not a panel and must not look like one — it is the one plain action on
   the page, and it sits between the panels and the dangerous one. */
#logout { margin: 1.75rem 0; background: var(--neutral); }

.danger { margin-top: 1.5rem; border-top: 0; }
.danger summary { color: var(--danger); }
.danger summary:hover { color: var(--danger); }
.danger button { background: var(--danger); margin-top: .5rem; }
.danger button:hover { background: var(--ink); }

.danger p { font-size: .9rem; color: var(--muted); max-width: 34rem; }

#msg { color: var(--danger); min-height: 1.5rem; max-width: 34rem; }
/* …and the same line when it carries good news. */
#msg.said { color: var(--accent); }
.langs .lang {
  justify-self: auto;
  padding: .3rem 1rem;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .04em;
  text-align: left;
}
.langs .lang:hover, .langs .lang[aria-current] { color: var(--ink); background: none; }

/* ── the account's groups ────────────────────────────────────────────────────── */

/* One block per group: the name, who administers it, the terms running under it, the
   seats. Everything a purchase produced, together — it was three sections by kind
   (groups, subscriptions, seats) that read as three tables about one thing, and with
   two groups would have needed the group named on every row of each. */
.group { border-top: 1px solid var(--line); padding: 1.25rem 0 .5rem; }
.group + .group { margin-top: .75rem; }
/* The heading above the first block has a rule of its own; a second one directly
   under it drew a double line. */
.group:first-child { border-top: 0; padding-top: .25rem; }
/* The date is one thing and stays on one line — "6 / October / 2026" over three rows
   was the tallest cell in the table. The product name wraps instead. */
table.groups.subs td:nth-child(3) { white-space: nowrap; }
.group-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .25rem;
}
.group-admin { margin: 0 0 1rem; font-size: .9rem; color: var(--muted); }
.group .captioned { margin-top: 1rem; }
/* The seats panel is the last thing in a block and has the block's rule above it
   already; a second rule of its own would draw a double line. */
.group .seat-group { border-top: 0; }

/* ── narrow ──────────────────────────────────────────────────────────────────── */

@media (max-width: 52rem) {
  /* The basket table on a phone: four columns in twenty-four rem. The term select
     used to keep its fourteen-rem column and clip its own text to "€19.(" — the one
     cell on the page whose whole job is to be read. The item wraps instead. */
  table.basket.editable td, table.basket.editable th { padding-right: .4rem; }
  table.basket.editable td:nth-child(2), table.basket.editable th:nth-child(2) { width: 4rem; }
  table.basket.editable td:nth-child(3), table.basket.editable th:nth-child(3) { width: auto; }
  table.basket.editable td:last-child, table.basket.editable th:last-child { width: auto; }
  table.basket.editable input { width: 3.4rem; padding-left: .4rem; padding-right: .3rem; }
  table.basket.editable select { min-width: 8.5rem; padding-left: .4rem; padding-right: .2rem; font-size: .9rem; }

  /* The terms table on a phone: four columns do not fit twenty-two rem, and the
     button was leaving the page on the right. Each term becomes two lines — the
     product and its date, then the seats and the button — and the header goes,
     because the one cell that needed it now names itself (data-label, set in
     subs.js). */
  table.groups.subs, table.groups.subs tbody { display: block; }
  table.groups.subs thead { display: none; }
  table.groups.subs tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .3rem 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
  }
  /* `width: auto` undoes the column widths set for the table above: on a block they
     would clip "Seats: 3" to four rem. */
  table.groups.subs td { display: block; width: auto; padding: 0; border: 0; }
  table.groups.subs td:nth-child(1) { font-weight: 600; }
  table.groups.subs td:nth-child(3) { order: 2; text-align: right; }
  table.groups.subs td:nth-child(2) { order: 3; }
  table.groups.subs td:nth-child(4) { order: 4; text-align: right; }
  table.groups.subs td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }
}