/* components.css (platform) — the design atoms BOTH apps share, in the look of the Figma master and
   overriding DaisyUI 4 defaults (docs/DESIGN_PLATFORM_PLAN.md D1). Moved here from the
   marketplace's components.css once the magazine became their second user.

   How LARGE the atoms are built stands in ONE place: the block "The scale" right below. The frames
   give proportions, not pixels — the user found the drawn sizes too large and chose "Stufe C", about
   three quarters of them, for the whole design (§7a.7 Punkt 18, 2026-10-07). A rule further down says
   `var(--atom-…)` where it sets a size; a test keeps it that way (mineralica/tests/test_scale.py).
   The headline steps are the other half of that decision and stand in the preset (tailwind.base.js,
   `headings`), because Tailwind writes their classes.

   Colours come from ONE source (D2): the preset tailwind.base.js emits its scales and named values
   as custom properties — var(--mn-green-600), var(--mn-gray-200), var(--mn-error-surface) … — into
   the base layer of both builds. No hex in this file; a colour that has no name gets one there.

   Load order in every layout: the app's tailwind.css → THIS file → the app's own components.css →
   app.css. After tailwind.css, so a single-class rule here wins over a Tailwind utility by source
   order; before the app's file, so an app can still refine an atom.
   ⚠️ That order also means a `display` rule here beats Tailwind's `.hidden` (same specificity, later
   file) — re-assert it with a compound selector (`.x.hidden { display: none }`) where a script
   toggles `hidden` on one of these classes.

   Because .btn/.input are also used by compact chrome (navbar = btn-ghost btn-sm), every base
   override re-asserts the size modifiers so they keep working — otherwise the default spec would
   clobber the small/large variants.
   ⚠️ The same order means: a height or a width set here also beats a Tailwind utility on the same
   element (a height utility on a `.btn`, an `.input` or a `.select` does nothing — a test scans the
   templates for one). An element that needs another size takes a size modifier or a rule of its own
   in a later file — the shell does that for its buttons (shell.css, "The atoms at the shell's scale"). */

/* ---------- The scale ---------- */
/* The sizes of the atoms, named in ONE place: the next change of scale is this block. Built is
   "Stufe C" (§7a.7 Punkt 18); every line says what the frame draws. An atom has ONE size at every
   width — only the headline steps differ below 1024 (tailwind.base.js).

   Named is what the scale decides: a type size with its line, a height, a width, an icon, and any
   spacing above 12. Not named, because a change of scale leaves it alone: hairlines, radii, and the
   small fixed gaps and paddings up to 12 (icon · label, label · field, the padding of a small pill).
   Text of 16 and below keeps the drawn size — only its container shrinks; 12 is the floor for any text.
   ⚠️ An icon's size is set by this sheet where an atom has one (`--atom-…-glyph`). The number a
   macro hands to `icon(…)` is the same one, for the moment before the sheet is there; the test holds
   the two together. The icon macro's own default (24) is no atom's and stays. */
:root {
  /* Button. */
  --atom-btn: 44px;                                          /* its height — drawn 48 */
  --atom-btn-size: 15px;                                     /* its label, bold — drawn 16 */
  --atom-btn-pad: 12px;                                      /* left and right of the label — as drawn. ⚠️ The shell's
                                                                buttons take their height and type from shell.css but
                                                                THIS padding from here: a change widens the button in
                                                                the foot's card, unless the shell names its own first */
  --atom-btn-xs: 24px;      --atom-btn-xs-size: 12px;        /* the compact sizes of chrome and tables — as they were */
  --atom-btn-sm: 32px;      --atom-btn-sm-size: 14px;
  --atom-btn-lg: 52px;      --atom-btn-lg-size: 16px;        /* the large one — DaisyUI's is 64 with 18 */
  --atom-btn-lg-pad: 18px;                                   /* — was 24 */

  /* Field: input, select, textarea, with label and message. */
  --atom-field: 48px;                                        /* an input's and a select's height — drawn 56 */
  --atom-field-xs: 24px;    --atom-field-sm: 32px;           /* the compact sizes — as they were */
  --atom-field-lg: 56px;                                     /* the large one: what was drawn as the default — was 64 */
  --atom-textarea: 96px;                                     /* a textarea's least height — drawn 122 */
  --atom-label-size: 12px;  --atom-label-line: 18px;         /* the label above and the message below — as drawn */
  --atom-check: 18px;       --atom-check-lg: 24px;           /* checkbox and radio — as drawn */

  /* Pill. */
  --atom-pill-size: 12px;   --atom-pill-line: 16px;          /* a tag pill, 24 high — drawn 14/21, 29 high */
  --atom-pill-pad: 12px;                                     /* left and right — drawn 16 */
  --atom-pill-gap: 6px;                                      /* icon · label — drawn 8 */
  --atom-pill-track: 1.2px;                                  /* its letter-spacing — drawn 1.4 */
  --atom-pill-glyph: 14px;                                   /* — drawn 16 */
  --atom-pill-status-size: 14px;  --atom-pill-status-line: 20px;   /* a status pill, 24 high — drawn 14/21, 25 high */
  --atom-pill-micro-size: 12px;   --atom-pill-micro-line: 16px;    /* a micro pill, 20 high — drawn 12/18, 22 high */
  --atom-pill-micro-glyph: 12px;                             /* — drawn 14 */

  /* Text link. */
  --atom-link-size: 14px;   --atom-link-line: 21px;          /* — as drawn */
  --atom-link-glyph: 16px;                                   /* — drawn 18 */
  --atom-link-chevron-glyph: 14px;                           /* the chevron of "View all" at a section's head — drawn 16 */
  --atom-link-chevron-tap: 8px;                              /* … and how far that link reaches above and below its
                                                                line of 21 for a finger: 37 — not drawn */

  /* Meta item and attribute row. */
  --atom-meta-glyph: 18px;                                   /* — drawn 24 */
  --atom-meta-gap: 6px;                                      /* icon · words — drawn 8 */
  --atom-meta-size: 14px;   --atom-meta-line: 20px;          /* the value, semibold — drawn 16/24 */
  --atom-meta-label-size: 12px;   --atom-meta-label-line: 18px;    /* the label under it — as drawn */
  --atom-attr-pad: 18px;                                     /* above and below the row, and each side of a divider — drawn 24 */

  /* Banner. */
  --atom-banner-pad: 10px 12px;                              /* — drawn 12 14 */
  --atom-banner-gap: 10px;                                   /* disc · words — drawn 12 */
  --atom-banner-disc: 22px;                                  /* the icon's disc — drawn 28 */
  --atom-banner-glyph: 12px;                                 /* the icon in it — drawn 15 */
  --atom-banner-title-size: 15px; --atom-banner-title-line: 20px;  /* — as drawn */
  --atom-banner-sub-size: 13px;   --atom-banner-sub-line: 18px;    /* — as drawn */
  --atom-banner-actions-pad: 16px 20px 20px;                 /* inside a banner that carries buttons: above, sides, below
                                                                — drawn 20 24 24 (the account's welcome notice) */

  /* Form card. */
  --atom-card-pad: 20px;                                     /* inside the card — drawn 24 */
  --atom-card-gap: 12px;                                     /* between its rows, and in a grid of fields — drawn 16 */
  --atom-card-apart: 16px;                                   /* between two cards — drawn 24 */
  --atom-card-head-size: 16px;                               /* the head's words, bold — drawn 17 */
  --atom-card-head-glyph: 18px;                              /* the head's icon — drawn 22 */
  --atom-card-head-gap: 8px;                                 /* icon · words — drawn 10 */

  /* Account: the rail beside an account page, and the tiles of its overview. */
  --atom-rail: 224px;                                        /* the rail's width beside the content — drawn 256; kept by
                                                                decision (S4-10), the content takes the rest of 1120 */
  --atom-rail-apart: 24px;                                   /* rail · content — as drawn */
  --atom-rail-size: 14px;   --atom-rail-line: 21px;          /* an entry's words, semibold; 41 high — as drawn */
  --atom-rail-glyph: 18px;                                   /* an entry's icon — as drawn */
  --atom-rail-label-size: 12px;   --atom-rail-label-line: 16px;    /* a group's word — drawn 11/16; 12 is the floor */
  --atom-tile-gap: 14px;                                     /* a tile of the overview: disc · words — not drawn */
  --atom-tile-disc: 44px;   --atom-tile-glyph: 22px;         /* its icon's disc and the icon in it — not drawn */
  --atom-tile-size: 16px;                                    /* its title, bold — not drawn */
  --atom-tile-sub-size: 14px;     --atom-tile-sub-line: 20px;      /* the line under the title — not drawn */

  /* Document tile: the square with an icon in front of an invoice, an order. */
  --atom-doc-tile: 32px;                                     /* — drawn 40 */
  --atom-doc-tile-glyph: 16px;                               /* the icon in it — drawn 20 */

  /* Picker: a chip in a line of text, and the list with a search that it opens. Its type stays as
     drawn (14 and 12) and its rows are a finger's — so it is close to the drawn size. */
  --atom-chip: 28px;                                         /* the chip's least height — drawn 29 */
  --atom-chip-glyph: 12px;                                   /* its chevron — drawn 14 */
  --atom-picker: 280px;                                      /* the list's width, its border included — drawn 300; with
                                                                280 it fits between the margins of a window of 320 */
  --atom-picker-search: 36px;                                /* the search field, its border included — drawn 39 */
  --atom-picker-row: 36px;                                   /* the least height of a row: the chosen country and every
                                                                country of the list — drawn 37 */
  --atom-picker-list: 172px;                                 /* the part that scrolls: four rows and a half — drawn 178 */
  --atom-picker-glyph: 14px;                                 /* the magnifier and the check — drawn 16 */
}

/* ---------- Icon ---------- */
/* There is deliberately NO rule for the bare `.icon` here. An icon takes its size from the svg's
   width and height attribute (macro default 24) and its colour from `currentColor`; both, and
   whether it is shown at all, are changed by the utilities written on it or by the rule of the
   place it stands in (.pill svg, .meta-item svg). This sheet loads AFTER the build: a rule for the
   bare class would beat every utility on the icon itself.
   ⚠️ That happened on 2026-10-10. Until then a rule stood here (inline-block, no shrinking, colour
   inherited) that applied in no browser: the comment above it carried an asterisk directly before
   a slash and ended there, the rest was read as a selector and the rule dropped without an error.
   Every page of both apps was built and accepted without it. Mended, it turned the grey magnifier
   of the marketplace's search field dark and moved icons by a pixel, so it is gone.
   test_shared_components.py holds both: no comment ends early, no rule for the bare icon. */

/* ---------- Button — Figma 234:263 (Inter Bold, r8, px12, gap6; drawn h48 with 16) ---------- */
/* DaisyUI gives `.btn` its height (48) with the same specificity as its size modifiers and its square
   and round forms. Whoever sets a new height here has to set ALL of them again, in this order —
   base, sizes, forms — or a small button is 44 high and a square one 48 wide and 44 high. */
.btn {
  height: var(--atom-btn); min-height: var(--atom-btn);
  font-size: var(--atom-btn-size);   /* DaisyUI default is 14 */
  font-weight: 700;         /* Inter Bold */
  padding-left: var(--atom-btn-pad);
  padding-right: var(--atom-btn-pad);
  gap: 6px;
  text-transform: none;
}
/* A joined group (DaisyUI's `.join`) is ONE control: a button joined to a field takes the field's
   height, or the group has a step at its lower edge (44 beside 48 — it was 48 beside 56). Only in a
   group that HOLDS a field; a row of joined buttons keeps the button's own height. Written with
   `:where()`, so the rule weighs one class and stands before the sizes: a small button in a group
   stays small, and the shell's two-class rules still win. */
:where(.join:has(> .input, > .select)) > .btn { height: var(--atom-field); min-height: var(--atom-field); }
/* The compact and the large size; small buttons (nav, chrome) stay SemiBold, not heavy bold. */
.btn-xs { height: var(--atom-btn-xs); min-height: var(--atom-btn-xs); font-size: var(--atom-btn-xs-size);
  font-weight: 600; padding-left: 8px; padding-right: 8px; }
.btn-sm { height: var(--atom-btn-sm); min-height: var(--atom-btn-sm); font-size: var(--atom-btn-sm-size);
  font-weight: 600; padding-left: 12px; padding-right: 12px; }
.btn-lg { height: var(--atom-btn-lg); min-height: var(--atom-btn-lg); font-size: var(--atom-btn-lg-size);
  padding-left: var(--atom-btn-lg-pad); padding-right: var(--atom-btn-lg-pad); }
/* Square and round: as wide as high, no side padding. The width per size as DaisyUI writes it —
   `:where()`, so the rule is no heavier than a single class. */
.btn-square, .btn-circle { width: var(--atom-btn); padding-left: 0; padding-right: 0; }
.btn-square:where(.btn-xs), .btn-circle:where(.btn-xs) { width: var(--atom-btn-xs); }
.btn-square:where(.btn-sm), .btn-circle:where(.btn-sm) { width: var(--atom-btn-sm); }
.btn-square:where(.btn-lg), .btn-circle:where(.btn-lg) { width: var(--atom-btn-lg); }
/* Primary hover = green 700 exactly (not DaisyUI's auto-darkened shade) */
.btn-primary:hover { background-color: var(--mn-green-700); border-color: var(--mn-green-700); }
/* Disabled = solid neutral 500 + white text (Figma), overriding DaisyUI's translucent disabled */
.btn:disabled, .btn[disabled], .btn-disabled {
  background-color: var(--mn-gray-500) !important; border-color: var(--mn-gray-500) !important;
  color: var(--mn-white) !important;
}

/* ---------- Input / Select / Textarea — Figma 231:2377 (r8, p16, 1px neutral300, focus green600; drawn h56) ---------- */
/* Input and select share ONE height, so the two stand level in a row of a form. The type of a field
   stays 16: below that Safari on a phone zooms into the field on focus. */
.input { height: var(--atom-field); }
.input-xs { height: var(--atom-field-xs); }
.input-sm { height: var(--atom-field-sm); }
.input-md { height: var(--atom-field); }
.input-lg { height: var(--atom-field-lg); }
.select { height: var(--atom-field); min-height: var(--atom-field); }
.select-xs { height: var(--atom-field-xs); min-height: var(--atom-field-xs); }
.select-sm { height: var(--atom-field-sm); min-height: var(--atom-field-sm); }
.select-md { height: var(--atom-field); min-height: var(--atom-field); }
.select-lg { height: var(--atom-field-lg); min-height: var(--atom-field-lg); }
.input-bordered { border-color: var(--mn-gray-300); }
.input:focus, .input:focus-within,
.textarea:focus, .select:focus {
  outline: none; box-shadow: none; border-color: var(--mn-green-600);  /* no ring */
}
.input:disabled, .input[disabled],
.textarea:disabled, .select:disabled { background-color: var(--mn-gray-200); }
.textarea { min-height: var(--atom-textarea); }
/* Field label (above, uppercase, spaced) + help/error message (12/18 below) */
.label-text-fig { display: block; margin-bottom: 6px; font-size: var(--atom-label-size); line-height: var(--atom-label-line);
  font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--mn-gray-700); }
.field-msg { display: block; margin-top: 6px; font-size: var(--atom-label-size); line-height: var(--atom-label-line); color: var(--mn-gray-600); }
.field-msg-error { color: var(--mn-error); }

/* ---------- Checkbox — Figma (18px, r2, border green600) ---------- */
.checkbox { width: var(--atom-check); height: var(--atom-check); border-radius: 2px; border-width: 2px; border-color: var(--mn-green-600); }
.checkbox:hover { border-color: var(--mn-green-700); }
/* :checked only — NOT [checked]: the attribute reflects the server-rendered default, not the live
   toggle, so [checked] would keep the fill after a user unticks a pre-checked box (P6a filter). */
.checkbox:checked { background-color: var(--mn-green-600); border-color: var(--mn-green-600); }
.checkbox-lg { width: var(--atom-check-lg); height: var(--atom-check-lg); }

/* ---------- Radio — Figma (18px, r-full, border green700) ---------- */
.radio { width: var(--atom-check); height: var(--atom-check); border-width: 2px; border-color: var(--mn-green-700); }
.radio:checked { background-color: var(--mn-green-700); border-color: var(--mn-green-700); }

/* ---------- Pill / Tag — Figma 239:327 ---------- */
/* The geometry of the three families. Their colours are the app's own (the marketplace's
   .pill-origin/.pill-auction/…, .pill-highest/…, .pill-micro-count/… in its components.css). */
/* Tag pills: uppercase, letter-spacing, pill radius; 24 high with a 14 px icon (drawn 29 and 16) */
.pill {
  display: inline-flex; align-items: center; gap: var(--atom-pill-gap);
  padding: 4px var(--atom-pill-pad); border-radius: 9999px;
  font-weight: 600; font-size: var(--atom-pill-size); line-height: var(--atom-pill-line);
  text-transform: uppercase; letter-spacing: var(--atom-pill-track); white-space: nowrap;
}
.pill .icon, .pill svg { width: var(--atom-pill-glyph); height: var(--atom-pill-glyph); }
/* Status pills: NOT uppercase, tighter padding, r40; as high as a tag pill */
.pill-status {
  text-transform: none; letter-spacing: normal;
  padding: 2px 8px; border-radius: 40px; font-size: var(--atom-pill-status-size); line-height: var(--atom-pill-status-line);
}
/* Micro pills: 20 high */
.pill-micro { padding: 2px 8px; border-radius: 16px; font-size: var(--atom-pill-micro-size); line-height: var(--atom-pill-micro-line);
  text-transform: none; letter-spacing: normal; gap: 4px; }
.pill-micro .icon, .pill-micro svg { width: var(--atom-pill-micro-glyph); height: var(--atom-pill-micro-glyph); }
/* The states (S4-N5): a status as a tag pill — "Paid", "Canceled", "Awaiting your bank transfer" —
   in both apps: `pill(label, "success")`. Named after the state, never after a page. The frames
   draw the words in the signal colour on its tint (3.4 and 2.5 to 1 for green and amber); built is
   the dark shade of each state on its tint, at least 4.5 to 1 — a test works it out from the
   preset. Drawn are success, neutral and warning; error and info are built to the same rule for
   the states no frame shows. */
.pill-success { background: var(--mn-success-surface); color: var(--mn-success-strong); }
.pill-neutral { background: var(--mn-gray-200); color: var(--mn-gray-700); }
.pill-warning { background: var(--mn-warning-surface); color: var(--mn-warning-strong); }
.pill-error { background: var(--mn-error-surface); color: var(--mn-error-strong); }
.pill-info { background: var(--mn-info-surface); color: var(--mn-info-strong); }

/* ---------- Link — Figma 239:282 (Inter SemiBold 14, underlined, green500 → green700) ---------- */
.lnk {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--mn-green-500); font-weight: 600; font-size: var(--atom-link-size); line-height: var(--atom-link-line); text-decoration: underline;
}
.lnk:hover { color: var(--mn-green-700); }
.lnk .icon, .lnk svg { width: var(--atom-link-glyph); height: var(--atom-link-glyph); }
/* The link at the head of a section ("View all", ui/_section_head.html) ends in a chevron, not in an
   arrow: drawn as high as the type beside it (16 with 16), so built 14 with 14 — in the box of an
   arrow it would stand taller than the words. Written with BOTH class names, so it outweighs the
   rule above wherever it stands: with one name the two were equal, and the chevron was 14 only as
   long as this rule came second. */
.lnk.lnk-chevron .icon, .lnk.lnk-chevron svg { width: var(--atom-link-chevron-glyph); height: var(--atom-link-chevron-glyph); }
/* That link stands alone at the right of a head, 21 high — too little for a finger. So it reaches
   further above and below than it shows: a padding, taken back by a margin of the same size (as
   the language choice in the foot does it). To the row it is still its line of 21 — the head is no
   higher, and title and link keep their common baseline — and the target is 37.
   ⚠️ At the element itself, not through a pseudo-element: that is what a finger gets and what the
   measuring tool sees (scripts/look.py). ONE class name: it sets no size the link's own rule
   sets, so it has nothing to outweigh — and a test holds every size of the link to that weight. */
.lnk-chevron {
  padding-top: var(--atom-link-chevron-tap); padding-bottom: var(--atom-link-chevron-tap);
  margin-top: calc(-1 * var(--atom-link-chevron-tap)); margin-bottom: calc(-1 * var(--atom-link-chevron-tap));
}
.lnk.is-disabled, .lnk[aria-disabled="true"] { color: var(--mn-gray-500); text-decoration: none; pointer-events: none; }

/* ---------- Meta Item + Attribute Row — Figma 239:349 / 239:447 ---------- */
.meta-item { display: inline-flex; align-items: center; gap: var(--atom-meta-gap); }
.meta-item .icon, .meta-item svg { width: var(--atom-meta-glyph); height: var(--atom-meta-glyph); color: var(--mn-gray-700); }
.meta-item__value { font-weight: 600; font-size: var(--atom-meta-size); line-height: var(--atom-meta-line); color: var(--mn-gray-900); }
.meta-item__label { font-weight: 500; font-size: var(--atom-meta-label-size); line-height: var(--atom-meta-label-line); letter-spacing: .6px;
  text-transform: uppercase; color: var(--mn-gray-600); }
.attr-row { display: flex; align-items: center; flex-wrap: wrap; padding-top: var(--atom-attr-pad); padding-bottom: var(--atom-attr-pad); }
.attr-row > * { padding-right: var(--atom-attr-pad); }
.attr-row > * + * { padding-left: var(--atom-attr-pad); border-left: 1px solid var(--mn-gray-200); }

/* ---------- Banner — Figma 2101:13 (was .bid-banner, D1) ---------- */
/* A tinted surface with an icon disc + title over an optional sub-line (ui/_banner.html). The
   variant tints the surface, the disc and the title; the sub-line is always the muted neutral. The
   semantic variants live here; the marketplace adds its bid states (highest, won, outbid, ended,
   scheduled) in its own file.
   A banner may carry BUTTONS under its words (S4-N5: the welcome notice of the account) — the same
   atom, with a row for them and more room inside; the macro adds both when it is called with a
   body. The frames draw that notice in a look of its own (a bare icon, the heading in the text
   colour, the text at 16); built is the banner as it is everywhere else. */
.banner { display: flex; gap: var(--atom-banner-gap); align-items: center; padding: var(--atom-banner-pad); border-radius: var(--rounded-box); }
.banner__icon { flex: none; width: var(--atom-banner-disc); height: var(--atom-banner-disc); border-radius: 9999px; color: var(--mn-white);
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; }
.banner__icon svg { width: var(--atom-banner-glyph); height: var(--atom-banner-glyph); }
.banner__title { font-weight: 600; font-size: var(--atom-banner-title-size); line-height: var(--atom-banner-title-line); }
.banner__sub { font-weight: 400; font-size: var(--atom-banner-sub-size); line-height: var(--atom-banner-sub-line); color: var(--mn-text-muted); margin-top: 2px; }
.banner--actions { padding: var(--atom-banner-actions-pad); }
.banner__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.banner--success { background: var(--mn-success-surface); }
.banner--success .banner__icon { background: var(--mn-success-strong); }
.banner--success .banner__title { color: var(--mn-success-strong); }
.banner--error { background: var(--mn-error-surface); }
.banner--error .banner__icon { background: var(--mn-error); }
.banner--error .banner__title { color: var(--mn-error-strong); }
.banner--warning { background: var(--mn-warning-surface); }
.banner--warning .banner__icon { background: var(--mn-warning); }
.banner--warning .banner__title { color: var(--mn-warning-strong); }
.banner--info { background: var(--mn-info-surface); }
.banner--info .banner__icon { background: var(--mn-info); }
.banner--info .banner__title { color: var(--mn-info-strong); }

/* ---------- Form card (was .co-card / .co-field-*, D1) ---------- */
/* A white card that groups a form's fields under an icon + title head: checkout, sign-in, account. */
.form-card { background: var(--mn-surface); border: 1px solid var(--mn-border-card); border-radius: var(--rounded-box);
  padding: var(--atom-card-pad); display: flex; flex-direction: column; gap: var(--atom-card-gap); }
.form-card + .form-card { margin-top: var(--atom-card-apart); }
.form-card__head { display: inline-flex; align-items: center; gap: var(--atom-card-head-gap); font-weight: 700; font-size: var(--atom-card-head-size); }
.form-card__head svg { width: var(--atom-card-head-glyph); height: var(--atom-card-head-glyph); color: var(--mn-green-600); }
.form-field-label { display: block; font-size: var(--atom-label-size); font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--mn-text-muted); margin-bottom: 6px; }
.form-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--atom-card-gap); }
@media (max-width: 480px) { .form-field-grid { grid-template-columns: 1fr; } }

/* ---------- Document tile ---------- */
/* The small square with an icon in front of a document in a list: an invoice of the account
   (account/invoices.html), an order. Tinted green; the quiet version, grey, is for a document
   that takes something back (a cancellation invoice). */
.doc-tile { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--atom-doc-tile); height: var(--atom-doc-tile); border-radius: 8px;
  background: var(--mn-green-100); color: var(--mn-green-700); }
.doc-tile svg { width: var(--atom-doc-tile-glyph); height: var(--atom-doc-tile-glyph); }
.doc-tile--quiet { background: var(--mn-gray-200); color: var(--mn-gray-700); }

/* ---------- Account: the shell's columns, the rail, the overview tiles ---------- */
/* The account's shell (account/_layout.html) renders in BOTH apps: the platform's account pages in
   the magazine, Orders and Favourites in the marketplace. Until S4 (2026-10-10) these rules stood
   in tailwind.input.css with colours written out; the geometry is the same, the colours are the
   scale's now (the entry's words, its icon, the group's word and the active ground were close to
   a named value, not one), and a group's word is 12 instead of 11.
   The two columns: the rail at its width, the content the rest (the page is 1120 wide, S4-10).
   Below 768 one column, the rail above the content — as it was; no frame draws a phone. Written
   as the exception for the narrow window, because a media query of this sheet names no size. */
.acct-cols { display: grid; grid-template-columns: var(--atom-rail) minmax(0, 1fr); gap: var(--atom-rail-apart); align-items: start; }
@media (max-width: 767.98px) { .acct-cols { grid-template-columns: minmax(0, 1fr); } }
/* The content column: its parts — title, sentence, notice, cards — a card's distance apart. Two
   form cards that follow each other in it bring that distance themselves (their own rule, for a
   plain box); here the column's gap is the one, or they would stand twice as far apart. */
.acct-main { display: flex; flex-direction: column; gap: var(--atom-card-apart); min-width: 0; }
.acct-main > .form-card + .form-card { margin-top: 0; }
/* The rail: a tinted panel with one icon and label per page, in the groups of the manifest
   (account / marketplace / seller / admin), a hairline between two groups. */
.acct-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--mn-gray-50); border: 1px solid var(--mn-border-card); border-radius: var(--rounded-box); }
.acct-nav__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  font-size: var(--atom-rail-size); line-height: var(--atom-rail-line); font-weight: 600; color: var(--mn-gray-800);
  transition: background .15s, color .15s; }
.acct-nav__link svg { width: var(--atom-rail-glyph); height: var(--atom-rail-glyph); flex: none; color: var(--mn-gray-600); transition: color .15s; }
.acct-nav__link:hover { background: var(--mn-green-50); }
.acct-nav__link.is-active { background: var(--mn-green-100); color: var(--mn-green-700); }
.acct-nav__link.is-active svg { color: var(--mn-green-600); }
.acct-nav__badge { margin-left: auto; }
/* A group's word. Its line is a whole number of pixels: with the inherited 1.5 the rail was half a
   pixel higher, and on a phone the foot of an account page began between two pixels, its text
   drawn blurred. */
.acct-nav__title { padding: 10px 12px 4px; font-size: var(--atom-rail-label-size); line-height: var(--atom-rail-label-line);
  font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--mn-gray-600); }
.acct-nav__sep { height: 1px; margin: 6px 4px; background: var(--mn-border-card); }

/* The overview's tiles: white cards with an icon disc; one that is a link lifts on hover. */
.acct-tiles { display: grid; grid-template-columns: 1fr; gap: var(--atom-card-apart); }
@media (min-width: 640px) { .acct-tiles { grid-template-columns: 1fr 1fr; } }
.acct-tile { display: flex; gap: var(--atom-tile-gap); align-items: flex-start; padding: var(--atom-card-pad);
  background: var(--mn-surface); border: 1px solid var(--mn-border-card); border-radius: var(--rounded-box);
  transition: box-shadow .15s, border-color .15s; }
a.acct-tile:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--mn-gray-900) 6%, transparent); border-color: var(--mn-gray-300); }
.acct-tile__icon { display: flex; align-items: center; justify-content: center; flex: none;
  width: var(--atom-tile-disc); height: var(--atom-tile-disc); border-radius: 12px;
  background: var(--mn-green-100); color: var(--mn-green-600); }
.acct-tile__icon svg { width: var(--atom-tile-glyph); height: var(--atom-tile-glyph); }
.acct-tile__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--atom-tile-size); }
.acct-tile__desc { margin-top: 3px; font-size: var(--atom-tile-sub-size); line-height: var(--atom-tile-sub-line); color: var(--mn-gray-600); }

/* ---------- Picker: a chip that opens a list with a search — Figma 5442:8543 ---------- */
/* The choice of a country (ui/_country_picker.html; behaviour: picker.js): a chip that names the
   country and stands IN a line of text, and a list that hangs under it. The magazine's shop is its
   first user (the price preview of a product, the box of the cart); the marketplace keeps its own
   "ships to" until its pages move onto the platform's shell.
   Type is a step of the text scale and stands as a class in the markup: no rule here sets a size
   of type. The words inherit the family of the line the chip stands in.

   The root is a small column: the chip, and under it a part of no height that the list hangs from
   — so the list begins under the chip however high the chip is (a long name wraps inside it).
   ⚠️ Where the list lies sideways is the SCRIPT's: flush with the chip's left, and moved to the left
   where the frame the page names (or the window) leaves too little room. This sheet says where it
   hangs from and how wide it is; a media query could not know how wide the box around a chip is. */
.picker { display: inline-flex; flex-direction: column; text-align: left; white-space: normal; }
/* The chip. The button is what a finger hits: it reaches 4 further above and below than it shows
   (a padding, taken back by a margin, as the link at a section's head does it) — 36 for a chip of
   28, at the element itself. What is SEEN of it is the part inside. */
.picker__chip { display: flex; min-width: 0; padding: 4px 0; margin: -4px 0; border: 0; background: none; color: inherit;
  text-align: left; cursor: pointer; }
.picker__face { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: var(--atom-chip); padding: 2px 6px 2px 8px;
  background: var(--mn-gray-100); border: 1px solid var(--mn-gray-200); border-radius: 6px; color: var(--mn-gray-900);
  transition: background-color .15s, border-color .15s, color .15s; }
/* A name longer than its line breaks inside the chip, in a word if it must — the chip never
   pushes the line wider than its box ("South Georgia and the South Sandwich Islands" on a phone). */
.picker__word { min-width: 0; overflow-wrap: anywhere; }
.picker__face svg { flex: none; width: var(--atom-chip-glyph); height: var(--atom-chip-glyph); color: var(--mn-gray-600);
  transition: transform .15s; }
@media (hover: hover) {
  .picker__chip[aria-expanded="false"]:hover .picker__face { border-color: var(--mn-gray-300); }
}
/* Open: the tint of the brand, and the chevron turned. */
.picker__chip[aria-expanded="true"] .picker__face { background: var(--mn-green-100); border-color: var(--mn-green-200); color: var(--mn-green-700); }
.picker__chip[aria-expanded="true"] svg { color: var(--mn-green-700); transform: rotate(180deg); }
.picker__chip:focus-visible { outline: none; }
.picker__chip:focus-visible .picker__face { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }

/* The list: 6 under the chip, above what follows it on the page and under the menus of the site's
   shell (40 and 50). No veil behind it. Closed until the script marks the root — ⚠️ by an
   attribute of its own: this sheet loads after the build, a `display` here beats the build's
   hiding class and the attribute `hidden` alike. */
.picker__hang { position: relative; display: block; height: 0; }
.picker__list { display: none; position: absolute; z-index: 30; top: 0; left: 0; margin-top: 6px;
  flex-direction: column; gap: 4px; width: var(--atom-picker); padding: 6px;
  background: var(--mn-surface); border: 1px solid var(--mn-gray-300); border-radius: var(--rounded-box);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--mn-gray-900) 16%, transparent);
  color: var(--mn-gray-900); font-weight: 400; cursor: auto; }
.picker[data-picker-open] .picker__list { display: flex; }
/* The search: ONE field, 36 high, the magnifier lying over its left end. Its type is 16 (a class
   in the markup): below that a phone zooms into a field on focus. */
.picker__search { position: relative; display: flex; flex: none; }
.picker__search svg { position: absolute; top: 0; bottom: 0; left: 10px; margin: auto 0;
  width: var(--atom-picker-glyph); height: var(--atom-picker-glyph); color: var(--mn-gray-600); pointer-events: none; }
.picker__input { flex: 1 1 0; min-width: 0; height: var(--atom-picker-search);
  padding: 0 10px 0 calc(10px + var(--atom-picker-glyph) + 8px);
  background: var(--mn-gray-50); border: 1px solid var(--mn-gray-200); border-radius: 6px; color: var(--mn-gray-900); outline: none; }
.picker__input::placeholder { color: var(--mn-gray-600); opacity: 1; }
.picker__input:focus { border-color: var(--mn-green-600); }
/* The chosen country, with a check, and every country of the list: the name at the left — a long
   one breaks under itself —, the amount at the right and never broken. */
.picker__chosen, .picker__row { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px;
  min-height: var(--atom-picker-row); padding: 6px 10px; border-radius: 6px; text-align: left; }
.picker__chosen { background: var(--mn-green-100); color: var(--mn-green-700); }
.picker__row { border: 0; background: none; color: var(--mn-gray-900); cursor: pointer; }
.picker__row[aria-current="true"] { background: var(--mn-green-100); color: var(--mn-green-700); font-weight: 600; }
.picker__row:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: -2px; }
.picker__name { min-width: 0; overflow-wrap: anywhere; }
.picker__amount { display: inline-flex; flex: none; align-items: center; gap: 6px; white-space: nowrap; color: var(--mn-gray-600); }
.picker__chosen .picker__amount, .picker__row[aria-current="true"] .picker__amount { color: inherit; font-weight: inherit; }
.picker__amount svg { flex: none; width: var(--atom-picker-glyph); height: var(--atom-picker-glyph); }
@media (hover: hover) {
  .picker__row:hover { background: var(--mn-gray-100); }
  .picker__row[aria-current="true"]:hover { background: var(--mn-green-100); }
}
/* The hairline under the chosen country, and the countries: only they scroll, four rows and a
   half of them in sight; search, chosen country and foot stay where they are. */
.picker__rule { display: block; flex: none; height: 1px; margin: 1px 4px; background: var(--mn-gray-200); }
.picker__rows { display: flex; flex-direction: column; gap: 2px; max-height: var(--atom-picker-list);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mn-gray-400) transparent; }
.picker__rows:empty { display: none; }
/* A choice on its way to the server: the countries wait. */
.picker[data-picker-busy] .picker__rows { opacity: .6; pointer-events: none; }
/* What the list has to say (no country found, out of reach), and its foot over a hairline. */
.picker__said { display: block; padding: 10px; color: var(--mn-gray-700); }
.picker__foot { display: block; margin: 0 10px; padding: 6px 0 4px; border-top: 1px solid var(--mn-gray-200); color: var(--mn-gray-700); }
/* Hidden stays hidden: the script hides a part by the attribute, and every part above sets a `display`. */
.picker__chosen[hidden], .picker__rule[hidden], .picker__rows[hidden], .picker__row[hidden],
.picker__said[hidden], .picker__foot[hidden] { display: none; }