/* Ease of use, the same in every look (UI audit of 2026-10-17, against the Hallmark interaction and layout rules).
   Loaded last in index.html. It changes no theme's colours, shapes or ornaments: only what helps work with the
   keyboard, on a touch screen and with tables of numbers, plus the loading placeholder.

   What it adds:
   - a visible keyboard focus ring on everything clickable that had none (menu links, tiles, tabs, theme cards,
     <summary>, file buttons); the ring takes the look's trim colour;
   - numbers in tables, tiles, badges and number fields line up (tabular figures);
   - on touch screens, buttons, tabs, chips and small icon buttons are at least 44 px tall, and tiles stop
     lifting on tap (the lift stays for the mouse);
   - `.skeleton`: grey lines shown while a list loads (ui.rs `show`), in place of the bare „Se încarcă…”, which
     stays for screen readers in `.sr-only`;
   - slightly darker small text in the light looks (Luminoasă, Human, High Elf) so grey labels, warnings and links
     reach a 4.5 : 1 contrast; the change is a few percent and not visible as a different colour;
   - no screen text under 12 px (the small uppercase labels and table headers grow to 12 px, tags a little);
   - three layout fixes: the order drop box on Recepție, codes and dates that broke mid-word in lists, and the home
     banner text running under the Night Elf moon and the Human pennant.
   Gotchas: print rules stay in style.css; nothing here applies to paper (fișe, buletine, labels). */

/* Keyboard focus: one ring, never animated, offset so it shows on filled buttons too. */
:is(.nav-link, .stat, .tile, .tab, .theme-card, .theme-btn, .loc-chip, summary, [tabindex]):focus-visible,
label.file:focus-within {
    outline: 2px solid var(--trim, var(--accent));
    outline-offset: 2px;
    transition: none;
}

/* Numbers that line up in columns. */
table.list td, table.doc td, .stat-num, .badge, .kpi, .pj-grid, input[type=number], .mono {
    font-variant-numeric: tabular-nums;
}

/* Touch screens: fingers need 44 px; hover lifts would stick after a tap. */
@media (pointer: coarse) {
    .icon-btn { min-width: 44px; min-height: 44px; justify-content: center; }
    .tab, .small-btn, .loc-chip, .chip-btn { min-height: 44px; }
    label.check input, input[type=checkbox], input[type=radio] { width: 24px; height: 24px; }
}
@media (hover: none) {
    .stat:hover, .theme-card:hover { transform: none; }
    .stat:hover .stat-go { transform: none; }
}

/* Text only screen readers (and the e2e waits) read. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Loading placeholder: the shape of a list, gently pulsing (still when reduced motion is asked for). */
.skeleton { display: flex; flex-direction: column; gap: .7rem; padding: .4rem 0; }
.skeleton span {
    display: block; height: .9rem; border-radius: 6px; background: var(--line-strong); opacity: .55;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton span:nth-child(1) { width: 38%; height: 1.15rem; }
.skeleton span:nth-child(2) { width: 92%; }
.skeleton span:nth-child(3) { width: 84%; }
.skeleton span:nth-child(4) { width: 66%; }
@keyframes skeleton-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .skeleton span { animation: none; } }

/* Contrast in the light looks: grey text, warnings and links at 4.5 : 1 or better on their panels. */
[data-theme=light] { --muted: #556376; --danger: #d41b44; }
[data-theme=human] { --muted: #6a5c47; --warn: #975707; --ok: #2e7638; --trim-ink: #6f4e12; }
[data-theme=highelf] { --muted: #4f5770; --accent: #286dbd; --warn: #996107; --info: #286dbd; --trim-ink: #745718; }
/* 2026-10-18: measured on 16 pages in every look. Grey text in the light looks reaches 6 : 1 on cards (it was
   5 : 1 on white and under 4.5 : 1 on tinted panels and table headers); the gold labels of Human and High Elf
   (menu groups, table headers) were 3.6–4.2 : 1 and are a deeper gold; single colours under 4.5 : 1 are nudged
   just enough (same hue). */
[data-theme=barbie] { --muted: #7d4062; --accent: #cf1e7f; --warn: #a95700; --ok: #0e7d56; }
[data-theme=skeuo] { --muted: #58606b; --warn: #9e5800; --ok: #1a7a39; }
[data-theme=ukiyoe] { --muted: #635a4d; --accent: #b5401d; }
[data-theme=artnouveau] { --muted: #62553e; }
[data-theme=egipt] { --muted: #574830; --accent: #006a6c; --warn: #845300; }
[data-theme=brutalist] { --danger: #dc0000; --warn: #856900; }
[data-theme=iacreativa] { --muted: #a2a2a2; --danger: #ff7683; }
[data-theme=pcb] { --muted: #abb89e; --accent: #e7a774; --danger: #ff988d; }
[data-theme=cassette] { --muted: #b1a99b; --danger: #ff8980; }
/* Amounts in a medium's colour (Consum): mixed with the text colour so lime or yellow stays readable on white. */
.mt-grams b { color: color-mix(in srgb, var(--tone) 60%, var(--ink)); }
.mt-grams.negative b { color: var(--danger); }
/* Weekend days on the pontaj: the red at full strength (it was faded to 85 %). */
.pj-day.weekend .pj-head span, .pj-day.weekend .pj-head small { opacity: 1; }

/* Layout fixes found in the audit. */
/* The order drop box's title carried the big-button padding and margin (shared class `.big`), so the box stood
   200 px tall above the reception list; the title is text, not a button. */
.order-drop { padding: 1rem 1.2rem; }
.order-drop .big { width: auto; padding: 0; margin: 0; border-radius: 0; }
/* Sample codes, and the date that opens a row, never break across lines („P-A2CQ – P-” / „A2CS”). */
table.list td.mono:not(.muted), table.list td > a:first-child { white-space: nowrap; }
/* The Night Elf moon and the Human pennant sit on the right of the home banner: the text keeps clear of them. */
@media (min-width: 601px) {
    :root:is([data-theme=nightelf], [data-theme=human]) .hero-text { padding-right: 120px; }
}
@media (max-width: 600px) {
    :root:is([data-theme=nightelf], [data-theme=human]) .hero-text { padding-right: 52px; }
}

/* Readability (audit of 2026-10-18): no screen text under 12 px. The uppercase labels (menu groups, table
   headers, „Temă”, the location switch, eyebrows, fact labels, pontaj headers) were 10.9–11.5 px, which reads
   as grey dust on a laptop at arm's length; they keep their look and only grow to 12 px. Tags and small table
   notes grow a little too. Paper (fișe, buletine, labels) is not touched: it has its own print sizes. */
@media screen {
    :is(.brand-text small, .theme-name small, .loc-switch > small, .nav-group, .eyebrow, .section-title,
        table.list th, dl.facts dt, .pj-facts dt, .pj-grid thead th, .pj-name small, .pj-head small, .pj-tick,
        .rp-totals span, table.list.saga-years .year-tags .tag, table.list.saga-years .sub) {
        font-size: max(.75rem, 12px);
    }
    :is(.tag, button.tag, .verdict) { font-size: max(.78rem, 12.5px); }
    .rp-totals span { opacity: .85; }
}