/*
 * internet1.cz site styles: the Claude Design handoff components
 * (docs/design/handoff/project/components/) translated from their React inline
 * styles into classes. Values are copied from the .jsx files, which are the source
 * of truth. Tokens live in tokens.css. Only colour, surface and border transition,
 * at 120 or 180 ms. No shadows, square corners except 2px on controls.
 */

/* ---------- Page frame (ui_kits/website/layout.jsx) ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }
img { max-width: 100%; }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.page-top { padding-top: clamp(48px, 5vw + 24px, 96px); }

.skip-link { position: absolute; left: -9999px; top: var(--space-4); z-index: 10; background: var(--surface-card); color: var(--text-primary); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); }
.skip-link:focus { left: var(--space-4); }

.mono-index { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Wordmark (components/brand/Wordmark.jsx) ---------- */
.wordmark-link { display: inline-flex; text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font: 500 15px/1 var(--font-mono); letter-spacing: 0; color: var(--text-primary); white-space: nowrap; }
.wordmark__bar { display: inline-block; width: 8px; height: 17px; background: var(--accent); }
.wordmark__tld { color: var(--text-secondary); }
.wordmark--sm { gap: 8px; font-size: 14px; }
.wordmark--sm .wordmark__bar { width: 8px; height: 16px; }

/* ---------- ThemeToggle (components/navigation/ThemeToggle.jsx) ---------- */
.theme-toggle { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: 400 12px/1 var(--font-mono); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
.theme-toggle__dots { display: inline-flex; gap: 2px; }
.theme-toggle__dots > span { width: 8px; height: 8px; background: currentColor; opacity: 0.3; }
.theme-toggle[data-current="light"] .theme-toggle__dots > span:first-child,
.theme-toggle[data-current="dark"] .theme-toggle__dots > span:last-child { opacity: 1; }

/* ---------- Header (components/navigation/Header.jsx) ---------- */
.site-header { border-bottom: 1px solid var(--border-default); background: var(--surface-page); color: var(--text-primary); }
.site-header[data-theme="dark"] { background: var(--surface-band); }
.site-header__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); min-height: var(--header-h); display: flex; align-items: center; gap: var(--space-8); }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-8); }
.site-nav a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-secondary); text-decoration: none; font: 500 14px/20px var(--font-sans); transition: color var(--duration-fast); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text-primary); }
.site-nav__index { font: 400 11px/1 var(--font-mono); color: var(--text-secondary); }
.site-nav a[aria-current="page"] .site-nav__index { color: var(--accent); }

/* At phone width the nav takes its own row under the wordmark and toggle. */
@media (max-width: 640px) {
  .site-header__inner { flex-wrap: wrap; row-gap: 10px; column-gap: var(--space-4); min-height: 0; padding-top: 10px; }
  .site-header__inner > .theme-toggle { margin-left: auto; }
  .site-nav { order: 3; flex-basis: 100%; margin-left: 0; border-top: 1px solid var(--border-default); }
  .site-nav ul { gap: var(--space-6); min-height: 44px; align-items: center; flex-wrap: wrap; }
}

/* ---------- Footer (components/navigation/Footer.jsx) ---------- */
.site-footer { border-top: 1px solid var(--border-default); margin-top: var(--section-gap); }
.site-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-12) var(--gutter) var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-8); }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font: 400 13px/20px var(--font-sans); color: var(--text-secondary); }
.site-footer__col--start { align-items: flex-start; }
.site-footer__col p { margin: 6px 0 0; max-width: 26em; }
.site-footer__label { font: 400 11px/16px var(--font-mono); color: var(--text-secondary); margin-bottom: 4px; }
.site-footer__label::before { content: "\2014\00a0"; }
.site-footer__col a:not(.wordmark-link) { color: var(--text-secondary); text-decoration: none; transition: color var(--duration-fast); }
.site-footer__col a:not(.wordmark-link):hover { color: var(--text-primary); }
.site-footer__legal { border-top: 1px solid var(--border-default); }
.site-footer__legal-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) var(--gutter); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 12px/18px var(--font-mono); color: var(--text-secondary); }
.site-footer__legal-inner p { margin: 0; }

/* ---------- SectionLabel (components/content/SectionLabel.jsx) ---------- */
.section-label { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 12px/16px var(--font-mono); color: var(--text-secondary); letter-spacing: 0.02em; }
.section-label__index { color: var(--text-secondary); }
/* The dash form is drawn by CSS so the em dash never sits in the page text. */
.section-label--dash::before { content: "\2014"; }

/* ---------- Button (components/forms/Button.jsx) ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--control-h-lg); padding: 0 20px; font: 500 15px/1 var(--font-sans); letter-spacing: -0.005em; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box; border: 1px solid transparent; transition: background var(--duration-fast), border-color var(--duration-fast); }
.button--md { height: var(--control-h-md); padding: 0 14px; font-size: 14px; }
.button--primary { background: var(--accent); color: var(--text-on-accent); }
.button--primary:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.button--primary:active { background: var(--accent-active); }
.button--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.button--secondary:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--text-primary); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Tag (components/content/Tag.jsx) ---------- */
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; font: 400 11.5px/16px var(--font-mono); padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); white-space: nowrap; }

/* ---------- Hero band (components/marketing/Hero.jsx) ---------- */
.hero { background: var(--surface-band); color: var(--text-primary); background-image: radial-gradient(oklch(0.40 0.014 250) 1px, transparent 1px); background-size: 24px 24px; background-position: center top; }
.hero__inner { max-width: var(--content-max); margin: 0 auto; padding: clamp(56px, 7vw + 20px, 120px) var(--gutter) clamp(56px, 5vw + 24px, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: var(--space-12) var(--space-16); align-items: end; }
.hero__main { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.hero__title { margin: 0; max-width: 14ch; font: var(--text-hero-weight) var(--text-hero-size)/var(--text-hero-lh) var(--font-sans); letter-spacing: var(--tracking-hero); text-wrap: balance; }
.hero__lead { margin: 0; max-width: 34em; font: 400 var(--text-lead-size)/var(--text-lead-lh) var(--font-sans); color: var(--text-secondary); text-wrap: pretty; }
.hero__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin: 0; }
.hero__link { font: 500 15px/1 var(--font-sans); color: var(--text-primary); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.hero__link:hover { color: var(--text-primary); }
.hero__aside { min-width: 0; justify-self: stretch; }

/* ---------- StatStrip and StatTile (components/marketing/) ---------- */
.stats { border-top: 1px solid var(--border-default); background: var(--surface-band); }
.stats__list { list-style: none; margin: 0 auto; max-width: var(--content-max); padding: 0 calc(var(--gutter) + 1px) 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
/* Each tile also draws a right hairline and overlaps the next tile's left one by 1px, so the
   last tile in every row is closed without doubling interior lines. The extra 1px of list
   padding keeps the closing line inside the content edge, level with .ruled-grid. */
.stats__item { min-width: 0; display: grid; border-left: 1px solid var(--border-default); border-right: 1px solid var(--border-default); margin-right: -1px; border-bottom: 1px solid var(--border-default); }
.stat { display: flex; flex-direction: column; gap: 14px; min-width: 0; height: 100%; box-sizing: border-box; padding: var(--space-6) var(--space-6) var(--space-8); }
.stat__index { font: 400 11px/16px var(--font-mono); color: var(--text-secondary); min-height: 32px; text-wrap: pretty; }
.stat__label { color: var(--text-secondary); }
.stat__figure { font: var(--text-stat-weight) var(--text-stat-size)/var(--text-stat-lh) var(--font-mono); letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---------- Home sections (ui_kits/website/home-screen.jsx, layout.jsx SectionHead) ---------- */
.home-section { padding-top: var(--section-gap); }
.section-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-6) var(--space-16); align-items: end; margin-bottom: var(--space-10); }
.section-head__main { display: flex; flex-direction: column; gap: var(--space-5); }
.section-title { margin: 0; max-width: 16ch; font: var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-lh) var(--font-sans); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.section-head__aside { margin: 0; font: 400 16px/25px var(--font-sans); color: var(--text-secondary); max-width: 34em; text-wrap: pretty; }

/* Ruled grid: cells share 1px hairlines drawn by the parent's background. */
.ruled-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cell-min, 300px)), 1fr)); gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); list-style: none; margin: 0; padding: 0; }
.ruled-grid--services { --cell-min: 300px; }
.ruled-grid--work { --cell-min: 280px; }
.ruled-grid > li { display: grid; min-width: 0; }

/* ServiceBlock (components/content/ServiceBlock.jsx) */
.service { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-8); background: var(--surface-page); min-width: 0; height: 100%; box-sizing: border-box; transition: background var(--duration-base); }
.service:hover { background: var(--surface-card); }
.service__index { font: 400 11px/16px var(--font-mono); color: var(--text-secondary); }
.service__title { margin: 0; font: 600 22px/28px var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.service__text { margin: 0; font: 400 15px/23px var(--font-sans); color: var(--text-secondary); text-wrap: pretty; flex: 1; }
.service__foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.service__link { font: 500 14px/20px var(--font-sans); margin-left: auto; text-decoration: none; color: var(--text-primary); display: inline-flex; gap: 6px; }
.service__link:hover { color: var(--text-primary); }
.service__arrow { font-family: var(--font-mono); color: var(--text-secondary); transition: color var(--duration-fast); }
.service:hover .service__arrow { color: var(--accent); }

/* WorkCard (components/content/WorkCard.jsx) */
.work-card { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); text-decoration: none; color: inherit; background: var(--surface-page); min-width: 0; height: 100%; min-height: 220px; box-sizing: border-box; transition: background var(--duration-base); }
a.work-card:hover { background: var(--surface-card); color: inherit; }
.work-card__top { display: flex; align-items: center; justify-content: space-between; font: 400 11px/16px var(--font-mono); color: var(--text-secondary); }
.work-card__status { color: var(--text-secondary); transition: color var(--duration-fast); }
a.work-card:hover .work-card__status { color: var(--accent); }
.work-card__body { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.work-card__title { margin: 0; font: 600 24px/28px var(--font-sans); letter-spacing: -0.025em; color: var(--text-primary); }
.work-card__line { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--text-secondary); text-wrap: pretty; }
.work-card--link { justify-content: space-between; }
.work-card__more { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.work-card__more p { margin: 0; font: 400 15px/22px var(--font-sans); color: var(--text-secondary); }

/* Closing line */
.closing { border-top: 1px solid var(--border-default); padding-top: var(--space-12); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-10) var(--space-16); align-items: end; }
.closing__main { display: flex; flex-direction: column; gap: var(--space-6); }
.closing__main .section-title { max-width: 18ch; }
.closing__aside { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.closing__aside p { margin: 0; font: 400 var(--text-lead-size)/var(--text-lead-lh) var(--font-sans); color: var(--text-secondary); text-wrap: pretty; }
.closing__aside a.mono { color: var(--text-primary); }

/* ---------- PageHeader and TextSection (components/text/PageHeader.jsx) ---------- */
.page-header { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-10); border-bottom: 1px solid var(--border-default); }
.page-header__top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header__meta { font: 400 12px/16px var(--font-mono); color: var(--text-secondary); }
.page-header__title { margin: 0; font: var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-lh) var(--font-sans); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.page-header__lead { margin: 0; max-width: 36em; font: 400 var(--text-lead-size)/var(--text-lead-lh) var(--font-sans); color: var(--text-secondary); text-wrap: pretty; }

.text-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); font: 400 16px/26px var(--font-sans); }
.text-section__head { display: flex; align-items: baseline; gap: 16px; }
.text-section__index { font: 400 12px/16px var(--font-mono); color: var(--text-secondary); }
.text-section h2 { margin: 0; font: 600 22px/28px var(--font-sans); letter-spacing: -0.02em; }
.text-section h3 { margin: 8px 0 0; font: 600 16px/22px var(--font-sans); }
.text-section p { margin: 0; }
.text-section ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.text-section .credit { font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }
.text-note { margin: 0; font: 400 16px/26px var(--font-sans); }

/* Text-page template: 680px column with a sticky FactPanel beside it. */
.text-page { max-width: var(--content-max); margin: 0 auto; padding: clamp(48px, 5vw + 24px, 96px) var(--gutter) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-flow: dense; gap: var(--space-12); }
.text-page__main { grid-column: span 2; max-width: var(--text-max); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.text-page__aside { align-self: start; position: sticky; top: 24px; }
/* One track left: spanning two would add an implicit column and scroll sideways. */
@media (max-width: 690px) { .text-page__main { grid-column: 1 / -1; } }

/* ---------- FactList and FactPanel (components/text/FactList.jsx) ---------- */
.fact-list { margin: 0; border-top: 1px solid var(--border-default); }
.fact-list > div { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.fact-list--dense > div { padding: 9px 0; }
.fact-list dt { font: 400 12px/22px var(--font-mono); color: var(--text-secondary); }
.fact-list dd { margin: 0; text-align: right; font: 400 13.5px/22px var(--font-mono); overflow-wrap: anywhere; color: var(--text-primary); }
.fact-list dd.sans { font: 400 14px/22px var(--font-sans); }
.fact-list dd a { color: inherit; }

.fact-panel { border: 1px solid var(--border-default); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); background: color-mix(in oklch, var(--surface-page) 70%, transparent); backdrop-filter: blur(2px); }
.fact-panel__label { margin: 0; font: 400 12px/16px var(--font-mono); color: var(--text-secondary); }
.fact-panel__label::before { content: "\2014\00a0"; }
.fact-panel__footer { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }

/* ---------- Contact (ui_kits/website/contact-screen.jsx) ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-12) var(--space-16); margin-top: var(--space-12); align-items: start; }
.contact__col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.contact__sent { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px; }
.contact-form__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.contact-form__note { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }

/* Field (components/forms/Field.jsx) */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { display: flex; justify-content: space-between; font: 500 13px/18px var(--font-sans); color: var(--text-primary); }
.field__optional { font: 400 12px/18px var(--font-mono); color: var(--text-secondary); }
.field input, .field textarea { width: 100%; box-sizing: border-box; font: 400 16px/24px var(--font-sans); color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-input); border-radius: var(--radius-sm); padding: 0 12px; height: var(--control-h-lg); outline: none; resize: vertical; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.field textarea { padding: 10px 12px; height: auto; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.field--invalid input, .field--invalid textarea { border-color: var(--danger); }
.field--invalid input:focus, .field--invalid textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 3px oklch(0.545 0.170 25 / 0.25); }
.field__error { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--danger-text); }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Alert (components/forms/Alert.jsx) */
.alert { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-card); font: 400 15px/22px var(--font-sans); color: var(--text-primary); }
.alert__mark { grid-row: 1 / span 2; display: flex; align-items: center; gap: 6px; align-self: start; padding-top: 3px; font: 500 12px/16px var(--font-mono); }
.alert__mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.alert--success .alert__mark { color: var(--success-text); }
.alert--success .alert__mark::before { background: var(--green-500); }
.alert--error .alert__mark { color: var(--danger-text); }
.alert--error .alert__mark::before { background: var(--danger); }
.alert__title { margin: 0; font-weight: 600; }
.alert__body { margin: 0; color: var(--text-secondary); }

/* ---------- Apps (components/apps/) ---------- */
.app-icon { flex: none; border-radius: var(--radius-app); border: 1px solid var(--border-default); box-sizing: border-box; object-fit: cover; display: block; }
.app-icon--placeholder { display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-secondary); font-family: var(--font-mono); font-weight: 500; text-align: center; }

.app-badge { display: inline-flex; }
.app-badge--placeholder { align-items: center; height: 40px; padding: 0 12px; border: 1px dashed var(--border-input); border-radius: var(--radius-md); color: var(--text-secondary); font: 400 11px/14px var(--font-mono); text-decoration: none; white-space: nowrap; }
.app-badge--placeholder:hover { color: var(--text-primary); }

.app-list { max-width: var(--text-max); margin-top: var(--space-4); }
.app-row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.app-row__body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-row__name { margin: 0; font: 600 18px/26px var(--font-sans); letter-spacing: -0.01em; }
.app-row__name a { color: var(--text-primary); text-decoration: none; }
.app-row__line { margin: 0; font: 400 15px/22px var(--font-sans); color: var(--text-secondary); }
.app-row__links { display: flex; gap: var(--space-4); margin-top: 6px; font: 400 13px/18px var(--font-sans); }
.apps-support { max-width: var(--text-max); margin-top: var(--space-12); }

.app-header { display: flex; align-items: center; gap: var(--space-6); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.app-header__body { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--space-2); }
.app-header__title { margin: 0; font: 700 clamp(32px, 1.8vw + 25px, 44px)/1.12 var(--font-sans); letter-spacing: -0.02em; }
.app-header__line { margin: 0; font: 400 var(--text-lead-size)/var(--text-lead-lh) var(--font-sans); color: var(--text-secondary); }
.app-header__badge { margin-top: var(--space-3); }

.screenshots { margin: var(--space-8) 0 0; }
.screenshots__strip { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); }
.screenshots__strip img { flex: none; width: 180px; height: auto; aspect-ratio: 660 / 1434; object-fit: cover; border-radius: 20px; border: 1px solid var(--border-default); }
.screenshots__credit { margin: var(--space-2) 0 0; font: 400 12px/16px var(--font-mono); color: var(--text-secondary); }

/* ---------- NotFound and the other error pages (components/text/NotFound.jsx) ---------- */
.error-block { max-width: var(--content-max); margin: 0 auto; padding: clamp(64px, 8vw, 128px) var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-10); align-items: end; }
.error-block__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.error-block__code { margin: 0; font: 400 12px/16px var(--font-mono); color: var(--text-secondary); overflow-wrap: anywhere; }
.error-block__path { color: var(--text-secondary); }
.error-block__title { margin: 0; font: var(--text-hero-weight) var(--text-hero-size)/var(--text-hero-lh) var(--font-sans); letter-spacing: var(--tracking-hero); }
.error-block__lead { margin: 0; max-width: 32em; font: 400 var(--text-lead-size)/var(--text-lead-lh) var(--font-sans); color: var(--text-secondary); }
.error-block__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-self: start; }
.error-block__detail { grid-column: 1 / -1; margin: 0; padding: var(--space-4); border: 1px solid var(--border-default); background: var(--surface-sunken); font: 400 12px/18px var(--font-mono); overflow-x: auto; white-space: pre-wrap; }
.contact__postmaster { margin: var(--space-4) 0 0; font-size: var(--text-small-size, 0.9375rem); color: var(--text-secondary); }