/* What Account's pages are built from: button, form field, card, notice, hero, link list.
 * Button, field, card and hero are the other Kolekt applications' own (Epr Wizard's base.css and
 * components.css, same class names, same declarations), so the products read as one family; the
 * notice, the link list and the hero's row of actions are Account's. A component arrives here with
 * the first page that uses it; nothing is kept for later. */

/* --- Button ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid transparent; border-radius: 999px;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
/* Filled buttons carry NAVY text on the brand green: white text on #AFCA0B is 1.86:1
 * and fails WCAG AA. This is the one place the palette forces the choice. */
.btn--primary { background: var(--action); color: var(--c-navy); }
.btn--primary:hover { background: var(--action-hover); }
.btn--outline { background: transparent; border-color: var(--color-border); color: var(--c-navy); }
.btn--outline:hover { border-color: var(--c-navy); }
/* The outline button while it is the one most visitors need (the sign-in page's banner is on). */
.btn--emphasis { border-color: var(--c-navy); font-weight: 700; }
.btn:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
/* Companion guard: the base rule is display:inline-flex, so [hidden] alone would not hide it. */
.btn[hidden] { display: none; }

/* --- Form field --------------------------------------------------------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label { display: block; margin-bottom: var(--sp-2); font-weight: 600; font-size: var(--fs-200); }
.input {
    width: 100%; padding: var(--sp-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font: inherit; background: var(--color-surface); color: var(--color-text);
}
.input:focus {
    outline: 2px solid var(--c-blue); outline-offset: 1px; border-color: var(--c-blue);
}
/* The line under a form. */
.form-footnote { margin-top: var(--sp-4); }
/* A check box and its sentence on one line. */
.field--check { display: flex; gap: var(--sp-2); align-items: flex-start; }

/* --- Card --------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
}

/* --- Notice --------------------------------------------------------------
 * A line above a form that says what became of the request that led here. The box is the other
 * applications' form message; the tint is the quiet blue, because what it reports is not the
 * visitor's mistake. */
.notice {
    padding: var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-200);
    background: var(--info-bg); color: var(--info-ink);
}

/* --- Banner --------------------------------------------------------------
 * What a visitor should read before trying anything; a notice answers what was tried. The same
 * tint, and a rule on the left to tell the two apart when both are on the page. */
.banner {
    padding: var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-200);
    background: var(--info-bg); color: var(--info-ink); border-left: 4px solid var(--c-blue);
}

/* --- Hero ----------------------------------------------------------------
 * The home page's opening: a centred title, one sentence, what to do next. */
.hero { text-align: center; padding-block: var(--sp-5) var(--sp-6); }
.hero__title { font-size: var(--fs-600); margin-bottom: var(--sp-3); }
.hero__subtitle { color: var(--color-text-muted); max-width: 46rem; margin: 0 auto var(--sp-2); }
/* The button under the sentence, with the space that sets it apart from what stands around it.
   The hero's centring places it. */
.hero__actions { margin: var(--sp-5) 0 var(--sp-6); }

/* --- Second step ---------------------------------------------------------
 * The QR code of a key, the key itself and the reference a person reads out on the telephone:
 * each is meant to be read by a camera or aloud, so each is large and stands by itself. The code
 * is dark on white whatever the page's colours: a reader needs the contrast. */
.qr { margin: var(--sp-4) 0; text-align: center; }
.qr__code { width: 13rem; height: 13rem; max-width: 100%; background: #fff; fill: #000; }
.key-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.reference {
    margin: var(--sp-3) 0; text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-600); font-weight: 700; letter-spacing: 0.3em;
}

/* --- Table and facts -----------------------------------------------------
 * The administrator's screens: rows of what happened, and the facts of one account as a name and
 * its value. Long values (a sub, a provider's answer) break rather than push the page wide; a table
 * wider than a small screen scrolls inside itself. */
.table {
    display: block; width: 100%; overflow-x: auto; margin-bottom: var(--sp-5);
    border-collapse: collapse; font-size: var(--fs-200);
}
.table th, .table td {
    padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.table th { color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
/* A button that stands inside a line of text. */
.btn--small { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-200); }

/* --- Link list -----------------------------------------------------------
 * A plain list of links, one to a line and without bullets. */
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list__item + .link-list__item { margin-top: var(--sp-2); }

/* --- Tabs and choices ------------------------------------------------------
 * The administrator's panel: a row of buttons that say which list is shown (the summary, or one
 * application), and under it rows of links that narrow the list. Each is a link, never a form: what
 * a list is narrowed to stands in its address. The one that is shown now is marked, for the eye
 * here and for a screen reader by aria-current. */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.tabs__item {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--color-border); border-radius: 999px;
    color: var(--c-navy); font-size: var(--fs-200); font-weight: 600; text-decoration: none;
}
.tabs__item:hover { border-color: var(--c-navy); }
.tabs__item:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.tabs__item.is-current { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-white); }
.choices {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4);
    margin: var(--sp-2) 0; font-size: var(--fs-200);
}
.choices__name { min-width: 7rem; font-weight: 600; }
.choices__item.is-current { color: var(--color-text); font-weight: 700; text-decoration: none; }