/* Folii components, ported from the design system's bundle.css for server-rendered pages.
   The markup lives in templates/_ui.html. App layout belongs in style.css. */
body { font: var(--type-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ds-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ds-icon-sm { width: 16px; height: 16px; }
.ds-logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.ds-logo-svg { display: block; width: auto; color: var(--ink); flex: none; }

.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-6); font: var(--type-label); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; }
.ds-btn-sm { height: var(--control-sm); padding: 0 var(--space-4); }
.ds-btn-primary { background: var(--brand); color: var(--on-brand); }
.ds-btn-primary:hover:not(:disabled) { background: var(--brand-hover); }
.ds-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.ds-btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); }
.ds-btn-ghost { background: transparent; color: var(--brand); padding-left: var(--space-3); padding-right: var(--space-3); }
.ds-btn-ghost:hover:not(:disabled) { background: var(--brand-tint); }
.ds-btn-danger { background: var(--surface); color: var(--critical); border-color: var(--critical); }
.ds-btn-danger:hover:not(:disabled) { background: var(--critical-tint); }
.ds-btn:disabled { opacity: .55; cursor: not-allowed; }
.ds-spin { animation: ds-spin 1.2s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-spin { animation: none; } .ds-btn { transition: none; } }

.ds-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ds-field-label { font: var(--type-label); color: var(--ink); }
.ds-input { width: 100%; min-height: var(--control-md); padding: 0 var(--space-3); font: var(--type-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
textarea.ds-input { padding: var(--space-2) var(--space-3); }
.ds-input:disabled { background: var(--surface-sunken); color: var(--ink-muted); }
.ds-input[aria-invalid="true"] { border-color: var(--critical); }
.ds-field-hint { font: var(--type-body-sm); color: var(--ink-muted); margin: 0; }
.ds-field-note { font: var(--type-body-sm); color: var(--ink); margin: 0; display: flex; gap: var(--space-1); align-items: flex-start; }
.ds-field-error { font: var(--type-body-sm); color: var(--critical); margin: 0; display: flex; gap: var(--space-1); align-items: flex-start; }
.ds-field-error .ds-icon, .ds-field-note .ds-icon { margin-top: 3px; }

.ds-badge { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 26px; padding: 0 var(--space-2); font: var(--type-caption); border-radius: var(--radius-sm); white-space: nowrap; text-decoration: none; }
.ds-tone-neutral { background: var(--surface-sunken); color: var(--ink-muted); }
.ds-tone-info { background: var(--info-tint); color: var(--info); }
.ds-tone-positive { background: var(--positive-tint); color: var(--positive); }
.ds-tone-caution { background: var(--caution-tint); color: var(--caution); }
.ds-tone-critical { background: var(--critical-tint); color: var(--critical); }

.ds-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-money-vat { font: var(--type-caption); color: var(--ink-muted); margin-left: var(--space-1); }

.ds-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ds-stat-label { font: var(--type-label); color: var(--ink-muted); }
.ds-stat-value { font: var(--type-figure); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; color: var(--ink); }
.ds-stat-note { font: var(--type-body-sm); color: var(--ink-muted); }

.ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); min-width: 0; }
.ds-card-title { margin: 0; font: var(--type-subheading); }

.ds-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); width: 100%; }
.ds-table { width: 100%; min-width: 720px; border-collapse: collapse; font: var(--type-body-sm); }
.ds-table th { text-align: left; font-weight: 500; color: var(--ink-muted); background: var(--surface-sunken); padding: var(--space-3) var(--space-4); white-space: nowrap; }
.ds-table td { padding: var(--space-3) var(--space-4); height: var(--row-height); border-top: 1px solid var(--line); vertical-align: middle; }
.ds-table th:first-child, .ds-table td:first-child { padding-left: var(--space-6); }
.ds-table th:last-child, .ds-table td:last-child { padding-right: var(--space-6); }
.ds-table .ds-end { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table .ds-table-empty { text-align: center; color: var(--ink-muted); padding: var(--space-12) var(--space-6); }

.ds-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); width: 100%; }
.ds-notice > .ds-icon { margin-top: 3px; }
.ds-notice-icon-neutral { color: var(--ink-muted); } .ds-notice-icon-info { color: var(--info); } .ds-notice-icon-positive { color: var(--positive); } .ds-notice-icon-caution { color: var(--caution); } .ds-notice-icon-critical { color: var(--critical); }
.ds-notice-body { flex: 1; min-width: 0; }
.ds-notice-title { margin: 0; font-weight: 500; }
.ds-notice-text { margin: 0; font: var(--type-body-sm); }
.ds-notice.ds-tone-neutral, .ds-notice.ds-tone-info, .ds-notice.ds-tone-positive, .ds-notice.ds-tone-caution, .ds-notice.ds-tone-critical { color: var(--ink); }
.ds-notice a { color: inherit; }

.ds-int { display: flex; flex-direction: column; gap: var(--space-6); }
.ds-int-head { display: flex; gap: var(--space-4); align-items: center; }
.ds-int-logo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font: 500 22px/1 var(--font-serif); }
.ds-int-name { margin: 0; font: var(--type-subheading); }
.ds-int-desc { margin: 0; font: var(--type-body-sm); color: var(--ink-muted); }
.ds-int-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.ds-int-meta { font: var(--type-body-sm); color: var(--ink-muted); }
.ds-int-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.ds-steps { list-style: none; margin: 0; padding: 0; display: flex; width: 100%; }
.ds-step { flex: 1; min-width: 0; position: relative; padding-top: 36px; padding-right: var(--space-4); }
.ds-step::before { content: ""; position: absolute; top: 12px; left: 28px; right: 4px; height: 2px; background: var(--line-strong); }
.ds-step:last-child::before { display: none; }
.ds-step-done::before { background: var(--brand); }
.ds-step-marker { position: absolute; top: 0; left: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-full); border: 2px solid var(--line-strong); background: var(--surface); color: var(--on-brand); }
.ds-step-done .ds-step-marker { background: var(--brand); border-color: var(--brand); }
.ds-step-current .ds-step-marker { border-color: var(--brand); }
.ds-step-current .ds-step-marker::after { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--brand); }
.ds-step-label { display: block; font: var(--type-label); color: var(--ink); }
.ds-step-upcoming .ds-step-label { color: var(--ink-muted); font-weight: 400; }
@media (max-width: 560px) {
  .ds-steps { flex-direction: column; gap: var(--space-4); }
  .ds-step { padding: 0 0 0 36px; min-height: 24px; }
  .ds-step::before { top: 28px; bottom: -12px; left: 11px; right: auto; width: 2px; height: auto; }
}