/* Behovstider – samma färger som ekorren.com och skyddsronden */
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/fonter/poppins-600.woff2) format("woff2"); }
:root {
  --papper: #f6f3ec; --vit: #fff; --skiffer: #313d41; --text: #283236; --mjuk: #5b6669;
  --aprikos: #efb071; --aprikos-mork: #c97a2c; --aprikos-ljus: #fbeedd; --brun: #8a4a0c;
  --gron: #5f9e3a; --gron-text: #3d6a22; --gron-ljus: #e7f0dc; --rod: #a8321f;
  --linje: rgba(49,61,65,.12); --r: 16px;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --rubrik: Poppins, var(--font);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.5 var(--font); color: var(--text); background: var(--papper); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--rubrik); font-weight: 600; color: var(--skiffer); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); overflow-wrap: break-word; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; margin-top: 14px; }
p { margin: 0 0 1em; }
a { color: var(--gron-text); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--aprikos-mork); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 18px; }
.rektor .wrap { max-width: 1000px; }
.smal { max-width: 440px; }
.mjuk { color: var(--mjuk); }
.liten { font-size: 14px; }
.laddar { padding: 40px 0; }

.top { border-bottom: 1px solid var(--linje); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 66px; }
.logo img { display: block; width: auto; height: 36px; }
.top-t { font-size: 14px; font-weight: 600; color: var(--mjuk); text-align: right; }
.top-t .lank { margin-left: 10px; font-size: 14px; }

.intro { padding: 28px 0 10px; }
.sub { color: var(--mjuk); max-width: 62ch; }
.tillbaka { display: inline-block; font-size: 15px; font-weight: 600; text-decoration: none; margin-bottom: 10px; }
.h1rad { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.h1rad .btn { flex: none; margin-top: 6px; }
.medd { background: var(--vit); border-left: 4px solid var(--aprikos); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; white-space: pre-line; }
.okruta { background: var(--gron-ljus); color: var(--gron-text); border-radius: 10px; padding: 11px 14px; margin-bottom: 12px; }
.fel { color: var(--rod); font-weight: 600; min-height: 0; margin: 0 0 10px; }
.fel:empty { display: none; }

.kort { background: var(--vit); border-radius: var(--r); border: 1px solid var(--linje); padding: 18px 16px; margin-bottom: 12px; }
.kort.tom { color: var(--mjuk); text-align: center; padding: 28px 16px; }
.falt { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.falt > span { font-size: 15px; font-weight: 600; color: var(--skiffer); }
.falt > span i { font-weight: 400; color: var(--mjuk); font-style: normal; }
.falt input, .falt textarea, .falt select, .lankruta input, .not { width: 100%; border: 1px solid rgba(49,61,65,.25); border-radius: 10px; background: var(--vit); padding: 11px 12px; font-size: 16px; }
.falt select { appearance: auto; }
.falt input:focus, .falt textarea:focus, .falt select:focus, input[type=time]:focus { outline: none; border-color: var(--aprikos-mork); box-shadow: 0 0 0 3px rgba(239,176,113,.35); }
.falt2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.kort .falt2:last-child .falt, .kort > .falt:last-child { margin-bottom: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 99px; border: 0; background: var(--skiffer); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: #222c30; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.ljus { background: var(--vit); color: var(--skiffer); border: 1.5px solid var(--skiffer); }
.btn.ljus:hover { background: #fbfaf6; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn.bred { width: 100%; }
.knappar { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
.lank { background: none; border: 0; padding: 0; color: var(--gron-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lank.fara { color: var(--rod); }

/* familjens formulär */
.barn-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.barn-h h2 { margin: 0; }
.flagga { color: var(--brun); background: var(--aprikos-ljus); border-radius: 99px; padding: 2px 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.klart { color: var(--gron-text); background: var(--gron-ljus); border-radius: 99px; padding: 2px 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.snabb { background: var(--papper); border-radius: 12px; padding: 12px; margin: 4px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.snabb-l { font-size: 15px; font-weight: 600; color: var(--skiffer); width: 100%; }
.snabb-r { display: flex; align-items: center; gap: 6px; }
input[type=time] { border: 1px solid rgba(49,61,65,.25); border-radius: 10px; background: var(--vit); padding: 8px 8px; font-size: 16px; min-width: 0; min-height: 42px; }
.vecka { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mjuk); margin: 16px 0 2px; }
.dag { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linje); }
.dag-n { font-weight: 600; padding-top: 9px; }
.dag.av .dag-n { color: var(--mjuk); font-weight: 400; padding-top: 0; }
.dag.av .dag-v { padding-top: 0; }
.dag.miss { background: #fff6ee; box-shadow: -10px 0 0 #fff6ee, 10px 0 0 #fff6ee; }
.tagg { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--brun); background: var(--aprikos-ljus); border-radius: 6px; padding: 1px 7px; vertical-align: 2px; }
.seg { display: inline-flex; border: 1px solid rgba(49,61,65,.22); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: var(--vit); min-height: 42px; padding: 0 16px; font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid rgba(49,61,65,.22); }
.seg button[aria-pressed="true"][data-s="kommer"] { background: var(--gron-ljus); color: var(--gron-text); }
.seg button[aria-pressed="true"][data-s="ledig"] { background: #e9ecec; color: var(--skiffer); }
.tider { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tider label { display: flex; flex-direction: column; font-size: 13px; color: var(--mjuk); gap: 3px; }
.barn > .lank.fara { margin-top: 14px; }
.skicka { margin: 18px 0 10px; }
.lankruta { display: flex; gap: 8px; margin: 8px 0; }
.lankruta input { flex: 1; font-size: 14px; color: var(--mjuk); }

/* listor */
.rader { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--linje); text-decoration: none; color: inherit; }
.rad:first-child { border-top: 0; }
.rad > div:first-child, .rad summary > div { display: flex; flex-direction: column; min-width: 0; }
.rad b { color: var(--skiffer); }
.rad span { font-size: 15px; color: var(--mjuk); }
.rad .svart { color: var(--text); }
a.rad:hover { background: #fbfaf6; }
.rad.av b { color: var(--mjuk); font-weight: 400; }
.pil { font-size: 24px; color: var(--mjuk); line-height: 1; }
.radknappar { display: flex; align-items: center; gap: 12px; flex: none; }
.dagdet { display: block; padding: 0; }
.dagdet summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; }
.dagdet summary::-webkit-details-marker { display: none; }
.dagdet[open] .pil { transform: rotate(90deg); }
.dagdet > h3, .dagdet > ul { margin-left: 16px; margin-right: 16px; }
.dagdet > ul:last-child { margin-bottom: 14px; }
.namn { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.namn li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--linje); break-inside: avoid; font-size: 15px; }
.namn i, .tabell i { font-style: normal; color: var(--mjuk); font-size: 13px; margin-left: 4px; }
.chips { display: flex; gap: 6px; flex: none; }
.chips button { border: 1px solid rgba(49,61,65,.22); background: var(--vit); border-radius: 99px; padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--skiffer); color: #fff; border-color: var(--skiffer); }
.chips button:disabled { opacity: .4; cursor: default; }
.not { margin-top: 6px; padding: 7px 10px; font-size: 14px; }
.rutor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; }
.rutor div { background: var(--vit); border: 1px solid var(--linje); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--mjuk); display: flex; flex-direction: column; }
.rutor b { font-family: var(--rubrik); font-size: 1.6rem; color: var(--skiffer); font-weight: 600; line-height: 1.1; }
.flikar { display: flex; gap: 4px; border-bottom: 1px solid var(--linje); margin: 18px 0 12px; overflow-x: auto; }
.flikar button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--mjuk); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.flikar button[aria-selected="true"] { color: var(--skiffer); border-bottom-color: var(--aprikos-mork); }
.tabell-wrap { overflow-x: auto; background: var(--vit); border: 1px solid var(--linje); border-radius: var(--r); margin-bottom: 12px; }
.tabell { border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.tabell th, .tabell td { padding: 8px 10px; border-bottom: 1px solid var(--linje); text-align: left; }
.tabell thead th { font-weight: 600; color: var(--mjuk); font-size: 13px; }
.tabell tbody th { position: sticky; left: 0; background: var(--vit); font-weight: 600; color: var(--skiffer); }
.fot { padding: 28px 18px 40px; font-size: 14px; color: var(--mjuk); }

@media (max-width: 560px) {
  .falt2 { grid-template-columns: 1fr; }
  .intro { padding-top: 20px; }
  .dag { grid-template-columns: 1fr; gap: 6px; }
  .dag-n { padding-top: 0; }
  .knappar .btn { flex: 1 1 100%; }
  .namn { columns: 1; }
  .rad { align-items: flex-start; }
  .radknappar { flex-direction: column; align-items: flex-end; gap: 8px; }
  .rad:has(.chips) { flex-direction: column; align-items: stretch; gap: 8px; }
  .top-t { font-size: 13px; }
}