/* Page layout for the hub, U1–U3 and their SK/EN twins. Colours, type and components come from tools-shell.css + tokens.css. */
[hidden] { display: none !important; }

/* --- Vertical rhythm between the tool, the explainer and the next-step blocks ----------------- */
.tl-main > .tl-section { margin: clamp(28px, 4vw, 44px) 0 0; }
.tl-main > .tl-grid-2 + .tl-section,
.tl-main > .tl-checklist + .tl-section { margin-top: clamp(28px, 4vw, 44px); }

/* --- Tool cards: compact heading, form flush to the card edge ---------------------------------- */
.tl-card h2 { font-size: 1.3rem; margin: 0 0 16px; }
.tl-card form { margin: 0; }
.tl-card fieldset { display: block; }
.tl-card .tl-hint { margin: -6px 0 16px; }
.tl-card > a.tl-btn { margin-top: 14px; }
.tl-card [role="status"] { overflow-wrap: anywhere; }

/* --- Next-step card: ICO field and button share a row on wide screens ---------------------------- */
.tl-next form { max-width: 560px; }
.tl-next fieldset { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: end; }
.tl-next fieldset > label { grid-column: 1 / -1; }
.tl-next fieldset > input { margin-bottom: 0; }
.tl-next .tl-actions { margin-top: 16px; }

/* --- Language switch on SK/EN pages ---------------------------------------------------------------- */

/* --- U3 checklist ------------------------------------------------------------------------------------- */
.tl-check-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.tl-progress { flex: 1 1 220px; min-width: 0; }
.tl-progress p { margin: 0 0 6px; font-size: 14px; color: var(--fg-2); }
.tl-progress .tl-out { color: var(--fg-1); font-size: 18px; font-weight: 500; }
.tl-progress progress { display: block; width: 100%; max-width: 360px; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--bg-sunken); accent-color: var(--accent); appearance: none; -webkit-appearance: none; }
.tl-progress progress::-webkit-progress-bar { background: var(--bg-sunken); }
.tl-progress progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.tl-progress progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
#tools-storage { margin: 0 0 8px; }
/* Print is the checklist's primary action; the shell only colours submit buttons, so mirror that for this plain button. */
.tl-main button.tl-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--fg-on-accent, #fff); box-shadow: var(--tl-glow); }
.tl-main button.tl-btn--primary:hover { background: var(--accent-hover, var(--accent)); border-color: var(--accent-hover, var(--accent)); }
.tl-main button.tl-btn--primary:disabled { box-shadow: none; }
.tl-checks { margin: 0; padding: 0; list-style: none; }
.tl-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 12px; margin: 0 -12px; border-top: 1px solid var(--tl-hair); border-radius: 12px; break-inside: avoid; transition: background .15s var(--tl-ease); }
.tl-check:first-child { border-top: 0; }
.tl-check:has(input:checked) { background: var(--tl-good-tint); }
.tl-check input[type="checkbox"] { margin: 3px 0 0; cursor: pointer; }
.tl-check input[type="checkbox"]:disabled { cursor: default; }
.tl-check label { margin: 0 0 4px; font-size: 16px; cursor: pointer; }
.tl-check-body p { margin: 0 0 8px; color: var(--fg-2); font-size: 15px; }
.tl-check-body p:last-child { margin-bottom: 0; }
.tl-check-src { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-check-src a { padding: 4px 12px; border: 1px solid var(--tl-hair-2); border-radius: 999px; background: var(--bg-surface); color: var(--fg-1); font-size: 13.5px; text-decoration: none; }
.tl-check-src a:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .tl-next fieldset { grid-template-columns: 1fr; }
  .tl-next fieldset > input { margin-bottom: 14px; }
  .tl-actions > button, .tl-actions > .tl-btn { flex: 1 1 auto; }
}

/* --- Print: the checklist is a feature; boxes become empty squares, links print their URL ----------- */
@media print {
  :root { color-scheme: light !important; }
  body, .tl-main, .tl-card, .tl-check { background: Canvas !important; color: CanvasText !important; }
  .tl-main *, .tl-main a { color: CanvasText !important; background: transparent !important; box-shadow: none !important; }
  .tl-hero-tile, .tl-crumbs, .tl-actions, .tl-lang, .tl-progress progress, .tl-hint, noscript { display: none !important; }
  .tl-main { font-size: 10pt; }
  .tl-hero h1 { font-size: 24pt; }
  .tl-card, .tl-answer { padding: 0; border: 0; }
  .tl-answer { margin-top: 16px; }
  .tl-check { padding: 8px 0; margin: 0; border-top: 1px solid GrayText; border-radius: 0; }
  .tl-check:has(input:checked) { background: Canvas !important; }
  .tl-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1px solid CanvasText; border-radius: 0; margin-top: 4px; }
  .tl-check input[type="checkbox"]:checked::after { content: "✓"; display: block; font-size: 12px; line-height: 12px; text-align: center; }
  .tl-check-src a { border: 0; padding: 0; text-decoration: none; }
  .tl-check-src a::after { content: " (" attr(href) ")"; font-size: 8pt; overflow-wrap: anywhere; }
  @page { margin: 16mm; }
}