/* Numeras formspråk för sajterna: en tryckt kassabok. Samma färger som appen (Design.swift / numera.css). */

:root {
  --paper: #F3F2EE; --sheet: #FBFAF7; --well: #EAE8E2;
  --ink: #161615; --ink2: #5C5A55; --ink3: #6E6B65; --rule: #DAD8D1;
  --signal: #C43C17; --signal-wash: #F5E4DB; --positive: #2E6A44; --positive-wash: #E3EDE5;

  --moss: #4C6B48;  --moss-wash: #E4EAE0;  --moss-edge: #A9BCA3;
  --slate: #47617D; --slate-wash: #E0E6EC; --slate-edge: #A4B3C4;
  --ochre: #8A6A22; --ochre-wash: #F0E8D3; --ochre-edge: #CDBB8A;
  --plum: #6E4A6B;  --plum-wash: #EBE1EA;  --plum-edge: #C2A8C0;
  --teal: #3B6A6D;  --teal-wash: #DEE9E9;  --teal-edge: #A0BFC0;
  --clay: #9A5A3F;  --clay-wash: #F1E3DB;  --clay-edge: #D4B2A0;
  --stone: #6B6760; --stone-wash: #E8E6E0; --stone-edge: #C5C1B8;
  --rose: #8C4F5B;  --rose-wash: #F0E2E4;  --rose-edge: #D1AEB4;

  --serif: "New York", ui-serif, "Iowan Old Style", Charter, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --figure: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --readable: 1120px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141413; --sheet: #1C1C1A; --well: #252522;
    --ink: #ECEAE4; --ink2: #A9A69F; --ink3: #8F8C85; --rule: #2E2D2A;
    --signal: #FF7849; --signal-wash: #3A2016; --positive: #79C08F; --positive-wash: #1B2E21;
    --moss: #9DBB96;  --moss-wash: #1F2A1D;  --moss-edge: #3E5239;
    --slate: #93ADC9; --slate-wash: #1C242D; --slate-edge: #344556;
    --ochre: #CFAF5E; --ochre-wash: #2C2616; --ochre-edge: #55482A;
    --plum: #B995B6;  --plum-wash: #281F28;  --plum-edge: #4A3A49;
    --teal: #8DBDC0;  --teal-wash: #1A2626;  --teal-edge: #324A4B;
    --clay: #D69A7E;  --clay-wash: #2E211B;  --clay-edge: #55392E;
    --stone: #A19D95; --stone-wash: #232320; --stone-edge: #3B3A36;
    --rose: #D39AA5;  --rose-wash: #2E1F22;  --rose-edge: #553A40;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img, svg { max-width: 100%; }

.hue-moss  { --hue: var(--moss);  --hue-wash: var(--moss-wash);  --hue-edge: var(--moss-edge); }
.hue-slate { --hue: var(--slate); --hue-wash: var(--slate-wash); --hue-edge: var(--slate-edge); }
.hue-ochre { --hue: var(--ochre); --hue-wash: var(--ochre-wash); --hue-edge: var(--ochre-edge); }
.hue-plum  { --hue: var(--plum);  --hue-wash: var(--plum-wash);  --hue-edge: var(--plum-edge); }
.hue-teal  { --hue: var(--teal);  --hue-wash: var(--teal-wash);  --hue-edge: var(--teal-edge); }
.hue-clay  { --hue: var(--clay);  --hue-wash: var(--clay-wash);  --hue-edge: var(--clay-edge); }
.hue-stone { --hue: var(--stone); --hue-wash: var(--stone-wash); --hue-edge: var(--stone-edge); }
.hue-rose  { --hue: var(--rose);  --hue-wash: var(--rose-wash);  --hue-edge: var(--rose-edge); }
.hue-ink   { --hue: var(--ink);   --hue-wash: var(--well);       --hue-edge: var(--rule); }

/* ───── Typografi */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 0.4em; }
h1 { font-size: clamp(38px, 6vw, 72px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 20px; line-height: 1.25; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(17px, 1.6vw, 21px); color: var(--ink2); max-width: 36em; }
.kicker { font: 600 12px/1.6 var(--sans); font-variant: all-small-caps; letter-spacing: 0.08em; color: var(--hue, var(--ink3)); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--hue, var(--ink3)); flex: none; }
.muted { color: var(--ink2); }
.faint { color: var(--ink3); font-size: 13px; }
.figure { font-family: var(--figure); font-weight: 600; font-stretch: condensed; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ───── Knappar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 4px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer;
  font-weight: 600; line-height: 1.2; white-space: nowrap; transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { background: var(--well); }
.btn:active { transform: translateY(1px); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ink:hover { background: var(--ink2); }
.btn.large { padding: 14px 24px; font-size: 17px; }
.btn.underline { border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.btn.underline:hover { background: none; color: var(--ink2); }
.btn.quiet { border-color: var(--rule); font-weight: 500; }
.btn:disabled { opacity: .5; cursor: default; }

/* ───── Ytor och linjer */
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule.heavy { height: 2px; background: var(--ink); }
.panel { background: var(--hue-wash, var(--well)); border-left: 3px solid var(--hue, var(--ink)); padding: 18px 20px; }
.card { background: var(--sheet); border-top: 2px solid var(--ink); padding: 22px 22px 20px; }
.tag { display: inline-block; font: 600 11px/1.6 var(--sans); font-variant: small-caps; letter-spacing: .06em; padding: 1px 8px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink2); }
.tag.hue { border-color: var(--hue-edge); background: var(--hue-wash); color: var(--hue); }
.tag.done { border-color: var(--positive); background: var(--positive-wash); color: var(--positive); }
.tag.attention { border-color: var(--signal); background: var(--signal-wash); color: var(--signal); }
.notice { padding: 12px 16px; border: 1px solid var(--rule); background: var(--sheet); border-radius: 4px; }
.notice.done { border-color: var(--positive); background: var(--positive-wash); }
.notice.signal { border-color: var(--signal); background: var(--signal-wash); }

/* Rad med prickad linje mellan text och belopp */
.ledgerline { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.ledgerline .lead { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-5px); min-width: 16px; }
.ledgerline .amt { font-family: var(--figure); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ───── Formulär */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font: 600 12px/1.4 var(--sans); font-variant: all-small-caps; letter-spacing: .05em; color: var(--ink2); }
.field input, .field textarea, .field select {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.field .hint { color: var(--ink3); font-size: 13px; }

/* ───── Layout */
.wrap { max-width: var(--readable); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.topbar {
  position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in srgb, var(--paper) 82%, transparent); border-bottom: 1px solid var(--rule);
}
.topbar .wrap { display: flex; align-items: center; gap: 22px; height: 62px; }
.wordmark { font: 600 24px/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; }
.wordmark small { font: 600 10px/1 var(--sans); font-variant: all-small-caps; letter-spacing: .1em; color: var(--ink3); }
.topbar nav { display: flex; gap: 20px; margin-left: 12px; }
.topbar nav a { text-decoration: none; color: var(--ink2); font-weight: 500; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--ink); }
.topbar .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
footer.site { border-top: 1px solid var(--rule); margin-top: 80px; padding: 40px 0 60px; color: var(--ink3); font-size: 14px; }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
footer.site a { color: var(--ink2); text-decoration: none; display: block; padding: 3px 0; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site h4 { margin: 0 0 8px; font: 600 12px/1.6 var(--sans); font-variant: all-small-caps; letter-spacing: .08em; color: var(--ink3); }
@media (max-width: 760px) {
  .topbar nav { display: none; }
  .topbar .wrap { gap: 10px; }
  .wordmark small { display: none; }
  .topbar .actions .btn { padding: 8px 12px; font-size: 14px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* TILLFÄLLIGT, MÅSTE BORT INNAN LIVE: varningsraden för adminens gästläge. */
.guest-banner { position: sticky; top: 0; z-index: 100; padding: 8px 16px; text-align: center; font-size: 14px;
  background: var(--signal-wash); color: var(--signal); border-bottom: 1px solid var(--signal); }