/* E-Rechnung viewer. Design tokens from hmsk.life (docs/design/DESIGN.md): green monochrome + one amber accent. */
@font-face { font-family: "Martian Mono"; src: url("fonts/MartianMono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --primary: #00FF9C;
  --secondary: #1E5C40;
  --accent: #FFB547;
  --bg: #0B0F0C;
  --surface: #121A15;
  --text: #E4F2E8;
  --muted: #8FA898;
  --border: #26372D;
  --err: #FFB547;     /* errors use the amber accent family, never a third hue */
  --xs: 8px; --sm: 12px; --md: 20px; --lg: 32px; --xl: 56px; --xxl: 96px;
  --mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1180px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(1200px 600px at 15% -10%, rgba(0,255,156,.07), transparent 60%);
  background-repeat: no-repeat;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ic { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -2px; }
.dim { color: var(--muted); }
.small { font-size: 14px; }
.ps { color: var(--primary); user-select: none; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--md); }
[hidden] { display: none !important; }

/* strip back to hmsk.life */
.strip { display: flex; flex-wrap: wrap; gap: var(--xs) var(--md); align-items: center; padding: var(--xs) var(--md);
  border-bottom: 1px solid var(--border); background: rgba(11,15,12,.92); font: 400 12px/1.4 var(--mono); }
.strip a { color: var(--muted); }
.strip a:hover { color: var(--text); }
.strip a.home { color: var(--text); font-weight: 600; margin-right: auto; }

/* header */
.head { padding-top: var(--lg); padding-bottom: var(--md); }
.head__row { display: flex; align-items: center; gap: var(--md); justify-content: space-between; }
.prompt { margin: 0; font: 400 14px/1.4 var(--mono); color: var(--text); }
h1 { font: 700 clamp(26px, 4.4vw, 42px)/1.1 var(--mono); letter-spacing: -.03em; color: var(--primary); margin: var(--sm) 0 var(--sm); text-wrap: balance; }
.sub { margin: 0; color: var(--muted); max-width: 70ch; }
.lang { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lang button { font: 600 12px/1 var(--mono); color: var(--muted); background: transparent; border: 0; padding: var(--xs) var(--sm); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--secondary); color: var(--primary); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--xs); padding: var(--sm) var(--md); border-radius: var(--radius);
  font: 600 14px/1 var(--mono); cursor: pointer; border: 1px solid transparent; background: none; color: var(--text);
  transition: transform .15s, background .15s, border-color .15s, color .15s; }
.btn--amber { background: var(--accent); color: var(--bg); }
.btn--amber:hover { transform: translateY(-2px); background: #FFC56E; }
.btn--ghost { border-color: var(--border); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--sm { padding: var(--xs) var(--sm); font-size: 12px; }

/* file picker */
.pick { padding: var(--md) 0 var(--lg); }
.drop { border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--lg) var(--md);
  display: flex; flex-direction: column; align-items: center; gap: var(--sm); text-align: center; transition: border-color .15s, background .15s;
  background-image: repeating-linear-gradient(0deg, rgba(0,255,156,.025) 0 1px, transparent 1px 3px); }
.drop.is-over { border-color: var(--primary); background-color: #15211A; }
.drop__ic { width: 32px; height: 32px; fill: var(--primary); }
.drop__text { margin: 0; font: 600 15px/1.4 var(--mono); }
.drop__hint { margin: 0; font-size: 14px; }
.samples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xs); margin-top: var(--md); font-size: 14px; }
.samples > span { margin-right: var(--xs); }
.privacy { margin: var(--sm) 0 0; font-size: 14px; color: var(--muted); }
.privacy .ic { color: var(--primary); }
.pick.is-compact { padding-bottom: var(--md); }
.pick.is-compact .drop { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: var(--md); }
.pick.is-compact .drop__ic, .pick.is-compact .drop__hint { display: none; }

.msg { border: 1px solid rgba(255,181,71,.5); border-radius: var(--radius); padding: var(--md); margin-bottom: var(--lg); background: rgba(255,181,71,.06); }
.msg h2 { font: 600 15px/1.3 var(--mono); margin: 0 0 var(--xs); color: var(--accent); }
.msg p { margin: 0; }
.msg.is-info { border-color: var(--border); background: var(--surface); }
.msg.is-info h2 { color: var(--text); }

/* result bar */
.result { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm) var(--md); padding: var(--sm) 0 var(--md); border-bottom: 1px solid var(--border); margin-bottom: var(--md); }
.bar__file { flex: 1 1 280px; min-width: 0; }
.bar__name { margin: 0; font: 600 14px/1.4 var(--mono); overflow-wrap: anywhere; }
.bar__chips { margin: var(--xs) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; font: 600 11px/1 var(--mono); padding: 6px var(--xs); border-radius: 4px; background: var(--secondary); color: var(--primary); white-space: nowrap; }
.chip--line { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.chip--err { background: transparent; border: 1px solid rgba(255,181,71,.55); color: var(--accent); }
.verdict { margin: 0; font: 600 14px/1.4 var(--mono); }
.verdict.ok { color: var(--primary); }
.verdict.bad { color: var(--accent); }
.verdict .dim { font-weight: 400; }
.bar__actions { display: flex; flex-wrap: wrap; gap: var(--xs); }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--lg); align-items: start; }

/* the readable invoice */
.sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--lg); min-width: 0; }
.sheet h2 { font: 700 22px/1.2 var(--mono); margin: 0; letter-spacing: -.02em; }
.sheet h3 { font: 600 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: var(--lg) 0 var(--sm); }
.doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--md); align-items: flex-start; }
.doc-type { margin: 0 0 var(--xs); font: 400 12px/1.3 var(--mono); color: var(--muted); }
.doc-due { text-align: right; }
.doc-due .lbl { display: block; font: 400 12px/1.3 var(--mono); color: var(--muted); }
.doc-due .val { font: 700 24px/1.2 var(--mono); color: var(--primary); }
.meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sm) var(--md); margin: var(--md) 0 0; }
.meta div { min-width: 0; }
.meta dt, .kv dt { font: 400 11px/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.meta dd, .kv dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--md); }
.party { border-top: 1px solid var(--border); padding-top: var(--sm); min-width: 0; }
.party h3 { margin-top: 0; }
.party .name { font-weight: 600; margin: 0; }
.party p { margin: 0; overflow-wrap: anywhere; }
.party dl { margin: var(--xs) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sm); font-size: 14px; }
.party dt { color: var(--muted); }
.party dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: .9em; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { font: 400 11px/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: var(--xs); border-bottom: 1px solid var(--border); }
table.t th.num { text-align: right; }
table.t td { padding: var(--xs); border-bottom: 1px solid var(--border); vertical-align: top; }
table.t tr.sub td { border-bottom-style: dashed; color: var(--muted); font-size: 13px; padding-top: 0; }
.item-name { font-weight: 600; }
.item-desc, .item-extra { color: var(--muted); font-size: 13px; margin-top: 2px; white-space: pre-line; }
.cat { font-family: var(--mono); font-size: 12px; }
.cat-note { color: var(--muted); font-size: 13px; margin: var(--xs) 0 0; }

.totals { margin: var(--md) 0 0 auto; max-width: 360px; font-size: 15px; }
.totals div { display: flex; justify-content: space-between; gap: var(--md); padding: 4px 0; }
.totals .grand { border-top: 1px solid var(--border); margin-top: 4px; padding-top: var(--xs); font-weight: 600; }
.totals .due { font: 700 17px/1.3 var(--mono); color: var(--primary); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sm) var(--md); margin: 0; }
.terms { white-space: pre-line; margin: var(--sm) 0 0; }
.notes p { margin: 0 0 var(--xs); white-space: pre-line; }
.notes .subj { font: 400 11px/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: block; }
.print-note { display: none; }

/* findings */
.findings { position: sticky; top: var(--md); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--md); min-width: 0; }
.findings h2 { font: 600 15px/1.3 var(--mono); margin: 0 0 var(--sm); }
.findings ul { list-style: none; margin: 0; padding: 0; }
.f { border-top: 1px solid var(--border); padding: var(--sm) 0; }
.f:first-child { border-top: 0; }
.f__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.f__id { font: 600 12px/1.3 var(--mono); color: var(--text); }
.f p { margin: 0; font-size: 14px; }
.f .f__fix { color: var(--muted); margin-top: 4px; }
.f .f__fix b { color: var(--text); font-weight: 600; }
.sev { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px; border-radius: 4px; }
.sev--error { background: var(--accent); color: var(--bg); }
.sev--warning { border: 1px solid rgba(255,181,71,.55); color: var(--accent); }
.sev--info { border: 1px solid var(--border); color: var(--muted); }
.tag-extra { font: 400 10px/1 var(--mono); color: var(--muted); border: 1px dashed var(--border); padding: 3px 5px; border-radius: 4px; }
.findings .ok-line { color: var(--primary); font: 600 14px/1.4 var(--mono); margin: 0 0 var(--sm); }
.findings .honest { font-size: 13px; color: var(--muted); margin: var(--md) 0 0; border-top: 1px solid var(--border); padding-top: var(--sm); }
.findings .receiver { font-size: 13px; margin: var(--sm) 0 0; }

.xml { margin-top: var(--lg); }
.xml summary { cursor: pointer; font: 600 13px/1.4 var(--mono); color: var(--muted); }
.xml pre { margin: var(--sm) 0 0; max-height: 480px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--md); font: 400 12px/1.5 var(--mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.upsell, .notify { margin: var(--md) 0 0; font: 400 14px/1.5 var(--mono); }
.notify { margin-top: var(--xs); font-size: 12px; }
.notify a { color: var(--muted); }

/* facts */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lg); padding: var(--xl) 0 var(--lg); border-top: 1px solid var(--border); margin-top: var(--xl); }
.h2 { font: 600 16px/1.3 var(--mono); margin: 0 0 var(--sm); }
.list { margin: 0 0 var(--sm); padding-left: 1.1em; color: var(--text); font-size: 15px; }
.list li { margin-bottom: 6px; }
.list li::marker { color: var(--primary); }
.foot { padding-bottom: var(--lg); }

@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .findings { position: static; order: -1; }
  .facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .head { padding-top: var(--md); }
  .sheet { padding: var(--md) var(--sm); }
  .doc-due { text-align: left; }
  /* line table as stacked cards */
  table.t.stack thead { display: none; }
  table.t.stack, table.t.stack tbody, table.t.stack tr, table.t.stack td { display: block; width: 100%; }
  table.t.stack tr { border-bottom: 1px solid var(--border); padding: var(--xs) 0; }
  table.t.stack td { border: 0; padding: 2px 0; text-align: left; }
  table.t.stack td.num { text-align: left; white-space: normal; }
  table.t.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font: 400 11px/1.3 var(--mono); text-transform: uppercase; }
  table.t.stack tr.sub td { padding-left: 0; }
  .totals { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* print: only the readable invoice, black on white */
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; background-image: none; }
  .strip, .head, .pick, .msg, .bar, .findings, .xml, .upsell, .notify, .facts, .foot { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .grid { display: block; }
  .result { animation: none; }
  .sheet { border: 0; padding: 0; background: #fff; color: #000; }
  .sheet h3, .meta dt, .kv dt, .party dt, table.t th, .doc-type, .doc-due .lbl, .item-desc, .item-extra, .cat-note, .notes .subj, table.t tr.sub td { color: #444; }
  .doc-due .val, .totals .due { color: #000; }
  table.t th, table.t td, .party, .totals .grand { border-color: #bbb; }
  tr { break-inside: avoid; }
  .print-note { display: block; margin-top: 10mm; font-size: 8.5pt; color: #555; border-top: 1px solid #bbb; padding-top: 3mm; }
  a { color: #000; }
}