/*!
 * @toddoo/layout · layout and text building blocks · CSS (served as /assets/toddoo-layout.css)
 *
 * A few classes for the page around the components, instead of inline styles (the old code had about 23,600):
 *   .t-stack    things under each other with a gap          .t-row      things next to each other, wrapping
 *   .t-row.t-end  a button row on the right                 .t-row.t-between  a label left, a value right
 *   .t-grid     cards that fill the width (min 240 px each) .t-split    main column + side column (one column on phones)
 *   .t-cols     two form columns (one on phones)            .t-section  a block with a heading on a surface
 *   .t-rows     a list of rows: what + amount, then details .t-kv       label–value pairs (stacked on phones)
 *   .t-h1 … .t-h4, .t-small, .t-muted, .t-num, .t-truncate, .t-clamp-2, .t-sr (for screen readers only)
 * Gaps: .t-gap-s / .t-gap-l (or --t-gap). Text sizes are in rem, so they follow the reader's font size and zoom
 * (the old headings were in viewport height: 0.8vh is about 7 px). Colours, spacing, radius and surfaces come from the
 * brand tokens (--text1, --text2, --surface, --border, --sp-*, --card-radius) with plain fallbacks; nothing here
 * hard-codes a brand. Dark mode follows the tokens.
 */
:root {
  --t-space-1: var(--sp-1, 0.25rem); --t-space-2: var(--sp-2, 0.5rem); --t-space-3: var(--sp-3, 0.75rem); --t-space-4: var(--sp-4, 1rem);
  --t-space-5: var(--sp-5, 1.25rem); --t-space-6: var(--sp-6, 1.5rem); --t-space-8: var(--sp-8, 2rem);
  --t-text-xs: 0.75rem; --t-text-s: 0.8125rem; --t-text-m: 0.9375rem; --t-text-l: 1.125rem; --t-text-xl: 1.375rem; --t-text-2xl: 1.75rem;
  --t-side: 340px; --t-min: 240px; --t-narrow: 960px;
}

/* ---------------------------------------------------------------- layout */
.t-stack { display: flex; flex-direction: column; gap: var(--t-gap, var(--t-space-5)); min-width: 0; }
.t-stack > * { margin-block: 0; min-width: 0; }
.t-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-gap, var(--t-space-2) var(--t-space-3)); min-width: 0; }
.t-row.t-end { justify-content: flex-end; }
.t-row.t-between { justify-content: space-between; }
.t-row.t-top { align-items: flex-start; }
.t-row > .t-grow { flex: 1 1 auto; min-width: 0; }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--t-min)), 1fr)); gap: var(--t-gap, var(--t-space-4)); }
.t-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--t-side)); gap: var(--t-gap, var(--t-space-5)); align-items: start; }
.t-split.t-wide-side { --t-side: 400px; }
.t-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-gap, var(--t-space-4)); }
.t-gap-s { --t-gap: var(--t-space-2); }
.t-gap-l { --t-gap: var(--t-space-8); }
.t-sticky { position: sticky; top: var(--t-sticky-top, 76px); }
@media (max-width: 1100px) { .t-split.t-wide-side { grid-template-columns: minmax(0, 1fr); } .t-split.t-wide-side .t-sticky { position: static; } }
@media (max-width: 960px) { .t-split { grid-template-columns: minmax(0, 1fr); } .t-split .t-sticky { position: static; } }
@media (max-width: 600px) { .t-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- blocks */
.t-section { padding: var(--t-space-5) var(--t-space-5); border: 1px solid var(--border, #E1E1E1); border-radius: var(--card-radius,var(--radius-2xl,16px)); background: var(--surface, #FFFFFF); color: var(--text1, #1A2A2E); min-width: 0; }
.t-section > h2, .t-section > .t-h2 { margin: 0 0 var(--t-space-3); font-size: var(--t-text-m); line-height: 1.3; }
.t-section > :last-child { margin-bottom: 0; }
@media (max-width: 600px) { .t-section { padding: var(--t-space-4); } }
.t-card { display: block; padding: var(--t-space-5); border: 1px solid var(--border, #E1E1E1); border-radius: var(--card-radius,var(--radius-2xl,16px)); background: var(--surface, #FFFFFF); color: inherit; text-decoration: none; min-width: 0; }
a.t-card:hover { border-color: var(--accent, #1A7587); }
a.t-card:focus-visible { outline: 2px solid var(--focus-ring, var(--accent, #00C8C8)); outline-offset: 2px; }
.t-card > b, .t-card > strong { display: block; margin-bottom: var(--t-space-2); font-size: var(--t-text-m); }
.t-card > span { font-size: var(--t-text-s); color: var(--text2, #555F62); }

.t-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.t-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--t-space-2) var(--t-space-3); align-items: center; padding: var(--t-space-3) 0; border-bottom: 1px solid var(--border, #E1E1E1); }
.t-rows > li:last-child { border-bottom: 0; }
.t-rows .t-what { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-2) var(--t-space-3); min-width: 0; }
.t-rows .t-what b { font-size: var(--t-text-m); }
.t-rows .t-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--t-space-2) var(--t-space-3); align-items: center; font-size: var(--t-text-s); color: var(--text2, #555F62); }

.t-kv { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--t-space-2) var(--t-space-4); margin: 0; }
.t-kv > dt { color: var(--text2, #555F62); }
.t-kv > dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .t-kv { grid-template-columns: minmax(0, 1fr); } .t-kv > dd { margin-bottom: var(--t-space-2); } }

/* ---------------------------------------------------------------- text */
.t-h1 { font-size: var(--t-text-2xl); line-height: 1.2; font-weight: 700; margin: 0; }
.t-h2 { font-size: var(--t-text-xl); line-height: 1.25; font-weight: 700; margin: 0; }
.t-h3 { font-size: var(--t-text-l); line-height: 1.3; font-weight: 700; margin: 0; }
.t-h4 { font-size: var(--t-text-m); line-height: 1.35; font-weight: 700; margin: 0; }
.t-small { font-size: var(--t-text-s); }
.t-muted { color: var(--text2, #555F62); }
.t-note { margin: var(--t-space-2) 0 0; font-size: var(--t-text-s); color: var(--text2, #555F62); }
.t-num { font-variant-numeric: tabular-nums; }
.t-strong { font-weight: 600; }
.t-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-contrast: more) { .t-muted, .t-note, .t-kv > dt, .t-rows .t-sub, .t-card > span { color: var(--text1, #1A2A2E); } }
@media (forced-colors: active) { .t-section, .t-card { border-color: CanvasText; } }