/* Bröllopsportalen — stil.
   Del 1 är tokenblocket ur active/brollop/identitet-brollop.html kap 10, ORDAGRANT (v1.0, 2026-10-07,
   Salvia & Linne, hus Traditionell). Ändra det aldrig här — ändra identiteten och kopiera om.
   Del 2 är portalens komponenter, byggda bara på tokens. Husets regler som vaktas av kontrollsviten:
   ingen skugga utom fokusringen, ingen gradient, kanter 1 px, radie ≤ 4 px på ytor, pill på knappar. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonter/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonter/cormorant-garamond-500-kursiv.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonter/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonter/lato-700.woff2") format("woff2"); }

/* ===================================================================== del 1: identitetens tokens */
/* Rania & Christoffer design tokens v1.0 — 2026-10-07 — hus Traditionell */
:root {
  /* primitiver — de enda färgerna som finns */
  --brand-accent-50:#F4F5F4;  --brand-accent-100:#E5E7E4; --brand-accent-300:#B9C2B7;
  --brand-accent-500:#8A9A86; --brand-accent-600:#6A7B66; --brand-accent-800:#394236; --brand-accent-900:#262C24;
  --brand-neutral-0:#FFFFFF;    --brand-neutral-100:#F4F3F1;  --brand-neutral-200:#DDDBD4;  --brand-neutral-300:#BCB6A9;
  --brand-neutral-500:#8F8670;  --brand-neutral-700:#565043;  --brand-neutral-800:#1D1B16;  --brand-neutral-900:#100F0C;
  --brand-btn-fg:#262C24; /* text på accent-500 — mätt, se kap 09 */
  --brand-btn-fg-hover:#262C24; /* text på accent-300 (hover) — mätt */
  /* form */
  --brand-radius-sm:2px; --brand-radius-md:4px; --brand-radius-lg:4px; --brand-radius-pill:999px;
  --brand-radius-arch:999px 999px 4px 4px; /* bara bildfönster */
  --brand-border:1px; --brand-border-btn:1px; --brand-frame-gap:8px; /* dubbelramens inre linje */
  --brand-focus:0 0 0 4px rgba(138,154,134,.35);
  /* typografi */
  --brand-font:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
  --brand-font-heading:'Cormorant Garamond',Georgia,serif;
  --brand-h-weight:500;
  --brand-h1:clamp(2.8rem,6vw,4.75rem); --brand-h2:clamp(2rem,3.6vw,2.9rem);
  --brand-h3:1.5rem; --brand-h4:1.2rem; --brand-lede:1.3rem; --brand-body:1.0625rem; --brand-small:.9rem; --brand-micro:.75rem;
  --brand-track-micro:.28em; /* versaler: eyebrow, nav, etiketter */
  /* layout */
  --brand-container:1080px; --brand-gutter:48px; --brand-gap:24px; --brand-section:96px;
}
/* ljust läge — standard */
.brand-light {
  --bg:#F7F5F0; --bg-hero:var(--bg); /* heron har sidans botten — ramen skiljer den åt */
  --fg:#262E25; --muted:#5C6559;
  --surface:#ECEAE2; /* solid — inga genomskinliga ytor i huset */
  --edge:var(--brand-accent-300); /* hårfin, dekorativ */
  --ui-edge:var(--brand-accent-600); /* funktionskant ≥ 3:1: fält, fokus, svävande paneler */
  --accent-text:var(--brand-accent-800); --h1-accent:var(--brand-accent-600); --stat:var(--brand-accent-600);
  --ornament:var(--brand-accent-500); --focus-edge:var(--ui-edge);
  --input-bg:#FFFFFF; --input-edge:var(--ui-edge);
  --tag-bg:rgba(138,154,134,.14); --tag-fg:var(--accent-text);
}
/* mörkt läge — footer och kvällsband */
.brand-dark {
  --bg:#262C24; --bg-hero:var(--bg); /* heron har sidans botten — ramen skiljer den åt */
  --fg:#F7F5F0; --muted:#BCBDB7;
  --surface:#394236; /* solid — inga genomskinliga ytor i huset */
  --edge:var(--brand-accent-600); /* hårfin, dekorativ */
  --ui-edge:var(--brand-accent-300); /* funktionskant ≥ 3:1: fält, fokus, svävande paneler */
  --accent-text:var(--brand-accent-300); --h1-accent:var(--brand-accent-300); --stat:var(--brand-accent-300);
  --ornament:var(--brand-accent-500); --focus-edge:var(--ui-edge);
  --input-bg:#394236; --input-edge:var(--ui-edge);
  --tag-bg:rgba(138,154,134,.14); --tag-fg:var(--accent-text);
}
/* kärnkomponenter */
.brand h1, .brand h2, .brand h3, .brand h4 { font-family:var(--brand-font-heading); font-weight:var(--brand-h-weight); letter-spacing:0 }
.brand-eyebrow { font-size:var(--brand-micro); letter-spacing:var(--brand-track-micro); text-transform:uppercase; color:var(--accent-text) }
.brand-lede { font-family:var(--brand-font-heading); font-style:italic; font-size:var(--brand-lede); line-height:1.4 }
.brand-h1-accent { font-style:italic; color:var(--h1-accent) }
.brand-ornament { display:flex; align-items:center; justify-content:center; gap:14px }
.brand-ornament::before, .brand-ornament::after { content:''; width:56px; height:1px; background:var(--ornament) }
.brand-ornament i { width:7px; height:7px; background:var(--ornament); transform:rotate(45deg) }
.brand-btn { display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; letter-spacing:.02em;
  padding:.95rem 1.8rem; border-radius:var(--brand-radius-pill); border:var(--brand-border-btn) solid transparent; transition:background .15s,border-color .15s,color .15s }
.brand-btn--primary { background:var(--brand-accent-500); color:var(--brand-btn-fg); border-color:var(--brand-accent-500) }
.brand-btn--primary:hover { background:var(--brand-accent-300); border-color:var(--brand-accent-300); color:var(--brand-btn-fg-hover) }
.brand-link { font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); border-bottom:1px solid var(--edge); padding-bottom:3px }
.brand-link:hover { border-color:var(--accent-text) }
.brand-btn:focus-visible, .brand-link:focus-visible { outline:none; box-shadow:var(--brand-focus); border-color:var(--focus-edge) }
.brand-frame2 { border:var(--brand-border) solid var(--edge); outline:var(--brand-border) solid var(--edge); outline-offset:calc(-1 * var(--brand-frame-gap)) }
.brand-card { background:var(--surface); border:var(--brand-border) solid var(--edge); border-radius:var(--brand-radius-lg); padding:32px 28px; text-align:center; transition:border-color .15s }
.brand-card:hover { border-color:var(--brand-accent-500) }
.brand-input { background:var(--input-bg); color:var(--fg); border:var(--brand-border) solid var(--input-edge); border-radius:var(--brand-radius-md); padding:.85rem 1.1rem }
.brand-input:focus { border-color:var(--focus-edge); box-shadow:var(--brand-focus); outline:none }
.brand-arch { padding:12px; border:var(--brand-border) solid var(--edge); border-radius:var(--brand-radius-arch) }
.brand-arch img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:999px 999px 2px 2px }
.brand-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
@media (max-width:860px) { .brand-hero-grid { grid-template-columns:1fr } .brand-arch { order:-1; max-width:300px; margin:0 auto } }
@media (max-width:620px) { .brand-hero .brand-cta .brand-btn { width:100% } }
@media (prefers-reduced-motion:reduce) { .brand * { transition:none !important } }

/* ===================================================================== del 2: portalen */
/* Avvikelser från gästsidans identitet (medvetna, för ett arbetsverktyg — se active/brollop/INDEX.md):
   tätare luft, mindre H1, vänsterställda sidhuvuden, en outlinad sekundärknapp där två handlingar
   hör ihop (Dela/Kopiera), flikrad i botten på mobilen. Färger, typsnitt, kanter och radier är husets. */

:root {
  --flikrad-h: 60px; --sida-max: 920px;
  /* Avvikelse: identiteten saknar felfärg. Ett arbetsverktyg behöver en för "sent" och "ta bort".
     Tre steg, bara här — används aldrig som dekor. */
  --fara: #8A3B2E; --fara-text: #6E2E23; --fara-yta: #F6EAE6; --fara-kant: #C79A90;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--brand-font); font-size: var(--brand-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--flikrad-h) + env(safe-area-inset-bottom));
}
a { color: var(--accent-text); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 7vw, 3.1rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: var(--brand-h3); }
p { margin: 0 0 .8em; }
[hidden] { display: none !important; }
.liten { font-size: var(--brand-small); }
.dampad { color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
:focus-visible { outline: none; box-shadow: var(--brand-focus); border-radius: var(--brand-radius-sm); }

/* --- toppen (dator) och flikraden (mobil) --- */
.topp { border-bottom: 1px solid var(--edge); background: var(--bg); }
.topp-inre { max-width: var(--sida-max); margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ordmarke { font-family: var(--brand-font-heading); font-size: 1.45rem; color: var(--fg); text-decoration: none; white-space: nowrap; }
.ordmarke-och { font-style: italic; color: var(--h1-accent); }
.topp-nav { display: none; gap: 22px; }
.topp-nav a, .flikrad a, .flikar a, .chips a {
  font-size: var(--brand-micro); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--muted);
  transition: color .15s, border-color .15s, background .15s;
}
.topp-nav a { padding: 6px 0; border-bottom: 1px solid transparent; }
.topp-nav a:hover, .topp-nav a.aktiv { color: var(--accent-text); border-bottom-color: var(--ornament); }

.flikrad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--flikrad-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg); border-top: 1px solid var(--edge);
}
.flikrad a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: .62rem; letter-spacing: .06em; min-width: 0; }
.flikrad a::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid transparent; }
.flikrad a.aktiv { color: var(--accent-text); font-weight: 700; }
.flikrad a.aktiv::before { background: var(--ornament); }

@media (min-width: 860px) {
  body { padding-bottom: 0; }
  .topp-nav { display: flex; }
  .flikrad { display: none; }
}

.innehall { max-width: var(--sida-max); margin: 0 auto; padding: 24px 16px 40px; }
.fot { max-width: var(--sida-max); margin: 0 auto; padding: 16px 16px 28px; border-top: 1px solid var(--edge); font-size: var(--brand-small); color: var(--muted); }
.fot p { margin: 0; }

/* --- typografiska byggstenar --- */
.eyebrow, .grupprubrik, .brand .grupprubrik {
  font-family: var(--brand-font); font-size: var(--brand-micro); letter-spacing: var(--brand-track-micro);
  text-transform: uppercase; color: var(--accent-text); font-weight: 400; margin: 0 0 10px;
}
.grupprubrik { margin: 26px 0 10px; }
.grupprubrik-sen { color: var(--fara); }
.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 14px; }
.ornament::before, .ornament::after { content: ""; width: 56px; height: 1px; background: var(--ornament); }
.ornament i { width: 7px; height: 7px; background: var(--ornament); transform: rotate(45deg); }
.ingress { font-family: var(--brand-font-heading); font-style: italic; font-size: var(--brand-lede); line-height: 1.4; color: var(--muted); }
.sidhuvud { margin-bottom: 18px; }
.sidhuvud .ingress { margin-bottom: 0; }
.tillbaka { margin-bottom: 10px; }

/* --- knappar och länkar (primär = enda fyllda) --- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 .95rem/1.2 var(--brand-font); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  min-height: 48px; padding: .8rem 1.6rem; border-radius: var(--brand-radius-pill);
  background: var(--brand-accent-500); color: var(--brand-btn-fg); border: 1px solid var(--brand-accent-500);
  transition: background .15s, border-color .15s, color .15s;
  -webkit-appearance: none; appearance: none;
}
.knapp:hover { background: var(--brand-accent-300); border-color: var(--brand-accent-300); color: var(--brand-btn-fg-hover); }
.knapp:disabled { opacity: .5; cursor: default; }
.knapp-sekundar { background: transparent; color: var(--accent-text); border-color: var(--ui-edge); }
.knapp-sekundar:hover { background: var(--brand-accent-100); border-color: var(--ui-edge); color: var(--accent-text); }
.knapp-liten { min-height: 40px; padding: .5rem 1.1rem; font-size: .85rem; }
.knapprad { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.textlank {
  font: 400 .8rem/1.4 var(--brand-font); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); text-decoration: none; border: 0; border-bottom: 1px solid var(--edge);
  background: none; padding: 0 0 3px; cursor: pointer; transition: border-color .15s, color .15s;
}
.textlank:hover { border-bottom-color: var(--accent-text); }
.textlank-fara { color: var(--fara); border-bottom-color: var(--fara-kant); }
.textlank-fara:hover { border-bottom-color: var(--fara); }

/* --- formulär --- */
.stapel { display: flex; flex-direction: column; gap: 6px; }
.stapel label { margin-top: 8px; }
.stapel .knapp { margin-top: 14px; align-self: flex-start; }
label { font-size: var(--brand-small); font-weight: 700; color: var(--fg); }
input:not([type="checkbox"]):not([type="color"]):not([type="file"]), select, textarea {
  width: 100%; font: 400 1rem/1.4 var(--brand-font); color: var(--fg);
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--brand-radius-md);
  padding: .7rem .9rem; min-height: 48px; transition: border-color .15s;
  -webkit-appearance: none; appearance: none;
}
select { background: var(--input-bg) url("/pil.svg") no-repeat right 14px center / 12px 8px; padding-right: 2.4rem; }
textarea { min-height: 0; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus-edge); box-shadow: var(--brand-focus); }
input[readonly] { background: var(--brand-neutral-100); }
input[type="file"] { font: 400 .95rem var(--brand-font); padding: 10px 0; max-width: 100%; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand-accent-600); margin: 0; flex: none; }
.kryss { display: flex; align-items: center; gap: 10px; font-weight: 400; margin-top: 10px; }
.falt-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.falt-par > span { display: flex; flex-direction: column; gap: 6px; }
.falt-par label { margin-top: 8px; }
.rad-form { display: flex; gap: 8px; align-items: center; }
.rad-form select { flex: 1; min-width: 0; }
.inline-form { display: inline; margin-left: 10px; }
.sidfot-form { margin: 28px 0 8px; }
fieldset { border: 0; padding: 0; margin: 10px 0 0; }
legend { font-size: var(--brand-small); font-weight: 700; padding: 0; }

/* --- meddelanden och taggar --- */
.melding { padding: 12px 14px; border-radius: var(--brand-radius-md); border: 1px solid var(--edge); background: var(--surface); margin: 0 0 16px; }
.melding-ok { border-color: var(--brand-accent-500); }
.melding-fel { border-color: var(--fara-kant); background: var(--fara-yta); color: var(--fara-text); }
.tagg {
  display: inline-block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--brand-radius-sm); background: var(--tag-bg); color: var(--tag-fg); border: 1px solid transparent;
}
.tagg-fylld, .tagg-ja, .tagg-lev-bokad, .tagg-lev-betald { background: var(--brand-accent-500); color: var(--brand-btn-fg); }
.tagg-nej, .tagg-lev-avbojd { background: transparent; border-color: var(--edge); color: var(--muted); }
.tagg-kanske, .tagg-lev-ide { background: transparent; border-color: var(--edge); color: var(--accent-text); }

/* --- ytor --- */
.ruta { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--brand-radius-lg); padding: 18px 16px; margin: 0 0 16px; }
.ruta > h2:first-child { margin-top: 0; }
.ram2 { border: 1px solid var(--edge); outline: 1px solid var(--edge); outline-offset: calc(-1 * var(--brand-frame-gap)); }
.sektion { margin: 0 0 28px; }
.sektion-huvud { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sektion-huvud h2 { margin: 0; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.lagg-till { background: transparent; border-style: dashed; }
.lagg-till[open] { background: var(--surface); border-style: solid; }
.lagg-till > summary.knapp { width: 100%; }
.lagg-till[open] > summary { margin-bottom: 8px; }
.lagg-till-liten { margin-top: 10px; }
.lagg-till-liten[open] > summary { display: inline-block; margin-bottom: 8px; }
.atgarder { margin-top: 8px; }
.atgarder-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 4px; }

/* --- listor --- */
.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--edge); }
.lista > li { border-bottom: 1px solid var(--edge); }
.rad { display: flex; flex-direction: column; gap: 2px; padding: 12px 2px; color: var(--fg); text-decoration: none; transition: background .15s; }
a.rad:hover { background: var(--brand-accent-50); }
li.rad { padding: 12px 2px; }
.rad-huvud { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rad-dampad { opacity: .65; }
.lista-enkel { margin: 0; padding-left: 1.1em; }
.lista-enkel li { margin: 6px 0; }
.lista-enkel a { color: var(--fg); text-decoration-color: var(--edge); text-underline-offset: 3px; }
.lista-enkel a:hover { text-decoration-color: var(--accent-text); }
.fil-rad { word-break: break-word; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.chips a { display: inline-block; padding: 8px 12px; border: 1px solid var(--edge); border-radius: var(--brand-radius-pill); color: var(--accent-text); min-height: 36px; }
.chips a:hover { border-color: var(--ui-edge); }
.chips a.aktiv { background: var(--brand-accent-500); border-color: var(--brand-accent-500); color: var(--brand-btn-fg); }
.chips-gaster a { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--fg); }

.flikar { display: flex; gap: 18px; overflow-x: auto; border-bottom: 1px solid var(--edge); margin: 0 0 20px; scrollbar-width: none; }
.flikar a { padding: 10px 0; border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.flikar a.aktiv { color: var(--accent-text); border-bottom-color: var(--ornament); font-weight: 700; }

/* --- siffror --- */
.siffror { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.siffror li > *, .siffror li { display: flex; flex-direction: column; }
.siffror a, .siffror li:not(:has(a)) { text-decoration: none; color: var(--fg); padding: 10px 8px; border: 1px solid var(--edge); border-radius: var(--brand-radius-md); background: var(--bg); text-align: center; }
.siffror a.aktiv { border-color: var(--brand-accent-500); background: var(--brand-accent-100); }
.siffra { font-family: var(--brand-font-heading); font-size: 1.9rem; line-height: 1.1; color: var(--stat); font-variant-numeric: lining-nums; }
.siffror-tre .siffra { font-size: 1.5rem; }

/* --- översikten --- */
.hjalte { text-align: center; padding: 34px 20px 28px; margin: 0 0 22px; background: var(--bg-hero); border-radius: 0; }
.hjalte .ornament { margin-bottom: 4px; }
.hjalte-tal { font-family: var(--brand-font-heading); font-size: clamp(4rem, 18vw, 6.5rem); line-height: 1; margin: 6px 0 0; color: var(--h1-accent); font-variant-numeric: lining-nums; }
.hjalte .ingress { margin: 2px 0 10px; color: var(--fg); }
.oversikt-grid { display: grid; gap: 16px; }
.oversikt-grid .ruta { margin: 0; }
@media (min-width: 720px) { .oversikt-grid { grid-template-columns: 1fr 1fr; } }
.palett-rad { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--fg); text-decoration: none; }

/* --- inspiration --- */
.rutor { display: block; max-width: 100%; height: auto; border-radius: var(--brand-radius-sm); border: 1px solid var(--edge); }
.kortgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.palettkort { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--brand-radius-lg); color: var(--fg); text-decoration: none; transition: border-color .15s; }
.palettkort:hover { border-color: var(--brand-accent-500); }
.palettkort-vald { border-color: var(--brand-accent-500); }
.palettkort-namn { font-weight: 700; font-size: .95rem; }
.palettkort .tagg { align-self: flex-start; }
.stjarna, .bild-stjarna { color: var(--brand-accent-600); }
.uppladdning { margin-bottom: 16px; }
.uppladdning > summary.knapp { width: 100%; }
.uppladdning[open] > summary { margin-bottom: 8px; }
.bildgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 620px) { .bildgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .bildgrid { grid-template-columns: repeat(4, 1fr); } }
.bildgrid-liten { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
.bildruta { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--brand-radius-md); border: 1px solid var(--edge); background: var(--surface); }
.bildruta img { width: 100%; height: 100%; object-fit: cover; }
.bild-stjarna { position: absolute; right: 6px; top: 4px; font-size: 1.1rem; }
.bild-stor { margin: 0 0 16px; }
.bild-stor img { width: 100%; max-height: 75vh; object-fit: contain; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--brand-radius-md); }
.bild-stor figcaption { margin-top: 6px; }
.palett-stor { margin: 0 0 16px; }
.palett-stor .rutor { margin-bottom: 10px; }
.fargnamn { list-style: none; padding: 0; margin: 0; columns: 2; }
.fargrader { display: flex; flex-direction: column; gap: 8px; }
.fargrad { display: grid; grid-template-columns: 22px 56px 1fr; gap: 10px; align-items: center; }
input[type="color"] { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--input-edge); border-radius: var(--brand-radius-md); background: var(--input-bg); cursor: pointer; }

/* --- att göra --- */
.uppgifter { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--edge); }
.uppgift { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--edge); }
.bock-form { margin: 0; }
.bock {
  width: 30px; height: 30px; margin-top: 2px; border: 1px solid var(--ui-edge); border-radius: var(--brand-radius-sm);
  background: var(--input-bg); color: var(--brand-btn-fg); font: 700 1rem/1 var(--brand-font); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s;
}
.bock:hover { background: var(--brand-accent-100); }
.uppgift-klar .bock { background: var(--brand-accent-500); border-color: var(--brand-accent-500); }
.uppgift-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; color: var(--fg); text-decoration: none; padding: 3px 0; }
.uppgift-klar .uppgift-titel { text-decoration: line-through; color: var(--muted); }
.uppgift-sen .uppgift-titel { color: var(--fara-text); }

/* --- körschema --- */
.fas { border-top: 1px solid var(--edge); padding-top: 18px; }
.fas h2 { margin-bottom: 0; }
.schema { list-style: none; margin: 10px 0 0; padding: 0; }
.schema-rad { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--edge); color: var(--fg); text-decoration: none; }
.schema-tid { font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.schema-text { display: flex; flex-direction: column; gap: 2px; }

/* --- gäster och bord --- */
.sallskap .grupprubrik { margin-top: 18px; }
.oplacerade .chips { margin-bottom: 0; }
.bordlista { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
@media (min-width: 720px) { .bordlista { grid-template-columns: 1fr 1fr; } }
.bordkort { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--brand-radius-lg); padding: 14px 16px; }
.bordkort-huvud { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bordkort-huvud h2 { margin: 0; font-size: 1.4rem; }
.bordkort .lista-enkel { margin: 10px 0; }
.bordkort .rad-form { margin-top: 10px; }
.bordval { display: grid; gap: 10px; }
.bordknapp {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  padding: 14px 18px; text-align: left; cursor: pointer; font: inherit; color: var(--fg);
  background: var(--input-bg); border: 1px solid var(--ui-edge); border-radius: var(--brand-radius-md); transition: background .15s, border-color .15s;
}
.bordknapp:hover:not(:disabled) { background: var(--brand-accent-100); }
.bordknapp:disabled { opacity: .55; cursor: default; border-color: var(--edge); }
.bordknapp-vald { background: var(--brand-accent-100); border-color: var(--brand-accent-500); opacity: 1 !important; }
.bordknapp-namn { font-family: var(--brand-font-heading); font-size: 1.4rem; }

/* --- personer --- */
.lank-ruta { background: var(--bg); padding: 22px 20px; }
.lank-text { font-size: .95rem; margin: 6px 0 12px; }

/* --- budget --- */
.tabell-rulla { overflow-x: auto; margin: 10px -4px 0; }
.tabell { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabell th, .tabell td { padding: 8px 6px; border-bottom: 1px solid var(--edge); text-align: left; vertical-align: middle; font-weight: 400; }
.tabell thead th { font-size: var(--brand-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.tabell tbody th a { color: var(--fg); }
.tabell tfoot th, .tabell tfoot td { font-weight: 700; border-bottom: 0; }
.tabell td input { min-height: 40px !important; padding: .4rem .6rem !important; min-width: 96px; }
.tabell .tal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabell tr.over .tal { color: var(--fara-text); }

/* --- inloggningskortet --- */
.kort-scen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.kort-inlogg { width: 100%; max-width: 420px; background: var(--bg); padding: 40px 28px 32px; text-align: center; }
.kort-inlogg h1 { font-size: 2.3rem; }
.kort-inlogg form { text-align: left; }
.kort-inlogg .stapel .knapp { align-self: stretch; }
.kort-lank { margin: 20px 0 0; }
.kort-fot { margin-top: 18px; font-size: var(--brand-small); color: var(--muted); }
body:has(.kort-scen) { padding-bottom: 0; }

/* --- startsidan: heron "Traditionell" ur hero-forslag.html (förslag 2) --- */
body:has(.start) { padding-bottom: 0; }
.start { background: var(--bg); padding: 28px; min-height: 100vh; min-height: 100dvh; display: flex; }
.start-kort { flex: 1; display: flex; border: 1px solid var(--edge); outline: 1px solid var(--edge); outline-offset: calc(-1 * var(--brand-frame-gap)); }
.start-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; padding: 56px 48px; }
.start-text { text-align: center; }
.start-text .eyebrow { display: block; font-size: .78rem; margin: 0; }
.start-text .ornament { margin: 22px auto; }
.start h1 { font-size: clamp(3rem, 6vw, 5rem); line-height: .98; margin: 0; color: var(--fg); }
.start h1 em { display: block; font-size: .6em; color: var(--h1-accent); margin: .12em 0; }
.start-lead { font-family: var(--brand-font-heading); font-style: italic; font-size: 1.45rem; line-height: 1.35; margin: 0; }
.start-info { color: var(--muted); margin: 10px 0 0; font-size: .95rem; }
.start-cta { margin-top: 30px; display: flex; justify-content: center; }
.start-valv { justify-self: center; width: min(100%, 400px); padding: 12px; border: 1px solid var(--edge); border-radius: 999px 999px 4px 4px; }
.start-valv img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 2px 2px; }
@media (max-width: 860px) {
  .start { padding: 12px; }
  .start-grid { grid-template-columns: 1fr; gap: 36px; padding: 44px 20px; }
  .start-valv { width: min(100%, 300px); }
}

/* --- utskrift (körschemat) --- */
@media print {
  .topp, .flikrad, .fot, .flikar, .utskrift-dold, .melding { display: none !important; }
  body { padding: 0; background: #fff; }
  .schema-rad { break-inside: avoid; }
}

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