/* Sajtens färger och typsnitt, för portalens egna sidor. */
:root {
  --bg: #0e0e0e; --surface: #161616; --border: #2c2c2c;
  --gold: #c9a96e; --gold-light: #dfc28f;
  --text: #f0ede8; --text-mid: #a09a91; --text-dim: #5a5550;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --radius: 4px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--gold); }
.topp { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1rem; max-width: 1120px; margin: 0 auto; }
.topp img { height: 48px; width: auto; display: block; }
.topp a.sprak { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
main { max-width: 1120px; margin: 0 auto; padding: 3rem 1rem 7rem; }
.label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.1; margin: 0.75rem 0 1.25rem; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
.grupp__typ { margin: 2.5rem 0 0; }
.grupp__typ + h2 { margin-top: 0.35rem; }
p { color: var(--text-mid); max-width: 560px; }
form { margin-top: 2rem; max-width: 420px; }
label { display: block; font-size: 0.85rem; color: var(--text-mid); margin-bottom: 0.4rem; }
input[type=email] { width: 100%; padding: 0.85rem 1rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-weight: 400; }
input[type=email]:focus { outline: none; border-color: var(--gold); }
.btn { display: inline-block; margin-top: 1.25rem; padding: 0.9rem 2.2rem; border: none; border-radius: var(--radius); background: var(--gold); color: var(--bg); font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--gold-light); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn--lugn { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn--lugn:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
.besked { margin-top: 1.25rem; color: var(--text); }
.fel { margin-top: 1rem; color: #e0a48f; }
[hidden] { display: none !important; }
.ut { margin-top: 2.5rem; }
.ny { margin-top: 1rem; }
.moten, .anteckningar { border-top: 1px solid var(--border); max-width: 640px; }
.moten > p, .anteckningar > p { padding: 1rem 0; }
.mote, .anteckning { padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.mote__dag, .anteckning__titel { font-family: var(--serif); font-size: 1.35rem; color: var(--text); line-height: 1.3; }
.mote__grupp { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 0.2rem; }
.mote__fakta { margin-top: 0.35rem; }
.mote__lankar { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.mote__lankar a { font-size: 0.9rem; }
.anteckning__huvud { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.anteckning__knapp { flex-shrink: 0; background: none; border: none; color: var(--gold); font: inherit; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.anteckning__knapp:hover { color: var(--gold-light); }
.anteckning__text { margin-top: 1rem; }
.anteckning__text h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--text); margin: 1.5rem 0 0.4rem; }
.anteckning__text h4 { font-weight: 500; font-size: 0.95rem; color: var(--text); margin: 1rem 0 0.3rem; }
.anteckning__text p { margin-bottom: 0.6rem; }

/* När man kan: samma kalender som manusgrupp.html. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kal { margin-top: 0.5rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.choice { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1.4rem; min-height: 48px; cursor: pointer; }
.choice:hover { border-color: rgba(201,169,110,0.5); }
.choice[aria-pressed="true"] { border-color: var(--gold); background: rgba(201,169,110,0.12); color: var(--gold-light); }
.how { max-width: 640px; }
.how svg { width: 1.1em; height: 1.1em; vertical-align: -0.15em; color: var(--gold); }
.week { margin-top: 2.25rem; }
.week__title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--text); margin-bottom: 0.9rem; }
.week__title span { font-family: var(--sans); font-size: 0.9rem; color: var(--text-mid); margin-left: 0.75rem; letter-spacing: 0.02em; }
.week__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; min-width: 0; }
.day__name { color: var(--text); font-weight: 400; margin-bottom: 0.6rem; }
.slot { border-top: 1px solid var(--border); padding: 0.7rem 0 0.6rem; }
.slot__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.slot__when { flex: 1 1 7.5rem; min-width: 0; line-height: 1.35; }
.slot__pass { display: block; color: var(--text); font-size: 0.95rem; }
.slot__time { display: block; color: var(--text-dim); font-size: 0.8rem; font-variant-numeric: lining-nums; }
.slot__picks { display: flex; align-items: center; gap: 0.4rem; }
.pick { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-mid); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.pick svg { width: 22px; height: 22px; }
.pick:hover { border-color: var(--gold); color: var(--gold); }
.pick[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.pick:focus-visible, .choice:focus-visible, .count:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.count { width: 3.2rem; flex: none; height: 44px; padding: 0 0.4rem; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--sans); font-size: 0.95rem; color: var(--text-mid); font-variant-numeric: lining-nums tabular-nums; }
.count svg { width: 17px; height: 17px; flex: none; }
.count:disabled { cursor: default; color: var(--text-dim); }
.count:not(:disabled):hover { color: var(--gold); }
.count--near { color: var(--text); }
.slot__who { list-style: none; margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-mid); }
.slot__who li { padding: 0.1rem 0; }
.slot__who span { color: var(--text-dim); }
.slot__booked { display: inline-block; margin-top: 0.5rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.slot--booked .slot__pass { color: var(--gold-light); }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(14,14,14,0.96); border-top: 1px solid var(--border); padding: 1rem 0; }
.savebar__inre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
.savebar p { color: var(--text); margin: 0; max-width: none; }
.savebar .btn { margin-top: 0; }
@media (max-width: 900px) {
  .week__days { grid-template-columns: minmax(0, 1fr); }
  .day { grid-column: auto !important; }
}
@media (max-width: 400px) {
  .day { padding: 0.8rem 0.6rem; }
  .slot__when { flex-basis: 5rem; }
  .slot__picks { gap: 0.3rem; }
  .pick { width: 42px; height: 42px; }
  .count { width: 2.9rem; padding: 0 0.25rem; }
  .savebar .btn { padding: 0.9rem 1.4rem; }
}