/* =========================================================================
   Page — public pricing (U-702)
   -------------------------------------------------------------------------
   {en,de}/pricing.html only. Everything this page shares with the other public
   pages is already a component and is linked, not copied: the compact hero and
   the page frame come from pages/marketing.css, the cards from
   components/card.css, the comparison table from components/table.css, the
   four view states from components/state.css.

   What is left here is genuinely page-level: the shape of a tier card, the
   price typography, and the comparison table's two column roles.

   No literal colour. Every value comes from tokens.css (audit rule D-1), and
   nothing here sets `display` on a class that is ever hidden with the `hidden`
   attribute — the one that is, `.fixture-bar`, is a component and carries its
   own `[hidden]` rule (L-FE-11).

   THE CARD GRID DOES NOT SET A COLUMN COUNT, and that is the point of the
   unit. The number of tiers is whatever the catalogue returns — three today,
   five after an administrator adds two — so the grid is `.grid-auto`'s
   `auto-fit` and this file only tunes the minimum track width. A page that
   hard-codes `repeat(3, 1fr)` breaks the day the data it renders changes,
   which is the exact failure "never hard-coded" is about.
   ========================================================================= */

/* ---- The tier cards ------------------------------------------------------ */

/* `.grid-auto` is 260 px minimum. A tier card carries a price and a call to
   action, so it needs a little more before it wraps; below that width the
   cards stack, which is what should happen at 320 px. */
.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
  align-items: stretch;
}

.pricing-card {
  gap: 14px;
}

.pricing-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pricing-name {
  margin: 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

/* ---- Price --------------------------------------------------------------- */

.pricing-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pricing-amount {
  margin: 0;
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  /* A long currency, a long amount and a narrow card meet here. Breaking is
     better than a card that pushes the page sideways (audit rule H-5). */
  overflow-wrap: anywhere;
}

/* "Price on request" is a sentence, not a number, and set at a number's size
   it reads as a headline the tier does not have. */
.pricing-amount-text {
  font-size: clamp(19px, 2.6vw, 22px);
}

.pricing-period,
.pricing-note {
  margin: 0;
  font-size: 13px;
  color: var(--doc-ink-soft);
}

.pricing-trial {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sd-secondary);
}

.pricing-description {
  margin: 0;
  font-size: 14px;
  color: var(--doc-ink-soft);
}

/* The action sits at the bottom of every card whatever the description above
   it costs, so a row of cards has one button line rather than three. */
.pricing-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.pricing-action .btn {
  width: 100%;
}

/* ---- A string the catalogue has not been given ---------------------------- *
 * A missing translation is a content gap and is shown as one. Italic and the
 * muted ink mark it as our text rather than the catalogue's; the word itself
 * carries the meaning, so nothing rests on the colour (audit rule E-4).
 * ------------------------------------------------------------------------- */

.pricing-untranslated {
  font-style: italic;
  font-weight: 400;
  color: var(--doc-ink-soft);
}

/* ---- The comparison table ------------------------------------------------ */

.pricing-compare-heading {
  margin: clamp(40px, 6vw, 64px) 0 20px;
  font-size: clamp(21px, 3vw, 26px);
}

/* Data columns are equal and narrow; the capability column takes the rest. */
.pricing-table {
  table-layout: auto;
}

/* NO ROW HOVER TINT, and it is a contrast fix rather than a taste one.
   `components/table.css` tints a hovered row with --sd-row-hover (#E9E9E9 in
   light), which exists so the eye can track across a wide row of a long list.
   This table is four rows of three columns; nobody is tracking. What the tint
   costs is measurable: --sd-success on --doc-panel is 4.73:1, and on the
   hovered row it is **3.90:1** — under AA, on the one glyph that carries the
   answer, in the state a pointer is in whenever somebody is reading a cell.

   Found by the code-review gate, which measured the HOVER state. The page's
   own harness had measured only the resting one and reported all-green — the
   surface a token sits on is not one surface (L-FE-17), and an interaction
   state is one of the ones it is not.

   Removing the tint is the fix rather than re-inking the mark, because it
   makes the measured claim true instead of caveated: every cell on this table
   sits on --doc-panel, which is the surface the ratios above were taken
   against. */
.pricing-table tbody tr:hover {
  background: var(--doc-panel);
}

.pricing-th-capability {
  width: 40%;
  min-width: 200px;
}

/* A row header is a label, not a heading: `.table thead th` is upper-cased and
   letter-spaced, and a sentence set that way is unreadable. */
.pricing-th-row {
  font-weight: 600;
  color: var(--doc-ink);
  text-transform: none;
  letter-spacing: normal;
}

.pricing-row-name {
  display: block;
}

.pricing-row-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--doc-ink-soft);
}

.pricing-cell {
  white-space: nowrap;
}

/* A quota limit is a figure a visitor compares across three tiers, which is
   the whole reason this table exists (DESIGN_TOKENS.md §9.5). The property goes
   on the component rule rather than on a table class: the number is rendered
   into a span that already has a name, and `.figure-col` would right-align a
   cell that also carries a unit word. */
.pricing-quantity {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The two marks differ in GLYPH, not only in colour — a check and a dash are
   distinguishable in greyscale and to anyone who does not see the difference
   between green and grey (audit rule E-4). Each is `aria-hidden` and paired
   with a `.visually-hidden` label, so the cell is never announced as an empty
   one either. */
.pricing-mark {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.pricing-mark-yes {
  color: var(--sd-success);
}

/* NOT --sd-muted, and the number is the reason: #A8A8A8 on --doc-panel
   measures 2.38:1 in the light theme and 4.02:1 in the dark one. This glyph is
   16 px and bold, which is not "large text" (that starts at 18.66 px bold), so
   it needs 4.5:1 and fails both. It is the obvious token for "de-emphasised",
   and it is wrong for anything that is text.

   --doc-ink-soft measures 6.73:1 light and 6.17:1 dark on the same surface. A
   dash that says "not included" is information, so it is set at the same
   strength as the rest of the row rather than greyed toward invisibility. */
.pricing-mark-no {
  color: var(--doc-ink-soft);
}

/* ---- Notes under the table ------------------------------------------------ */

.pricing-meta {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing-meta-note {
  margin: 0;
  font-size: 13px;
  color: var(--doc-ink-soft);
  max-width: 72ch;
}

/* ---- The no-JavaScript fallback ------------------------------------------- *
 * Plain markup that pricing.js replaces, not `<noscript>`: the common failure
 * is scripting enabled and the module never arriving, which `<noscript>` does
 * not cover (L-FE-10). It is styled as ordinary content, because for a visitor
 * without JavaScript it IS the content of this region — not an error.
 * ------------------------------------------------------------------------- */

.pricing-fallback {
  max-width: 68ch;
}

.pricing-fallback p {
  margin: 0 0 14px;
}

.pricing-fallback .cta-actions {
  margin-top: 20px;
}