/* Gjallarhorn-profil: sort base, hvit flate, rød som liten aksent (slipsnålen).
   Indigo hentet fra Klang av Messing-plakaten brukes til arrangementsdetaljer. */
:root {
  --black: #0b0b0f;
  --ink: #16161d;
  --white: #ffffff;
  --paper: #f5f4f2;
  --line: #dcdad6;
  --red: #ce1620;
  --indigo: #2e1962;
  --muted: #6a6a74;
  --ok: #1d7a46;
  --warn: #9a6500;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
a { color: var(--indigo); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* Topp */
.top { background: var(--black); color: var(--white); border-bottom: 3px solid var(--red); }
.bar { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.logo { height: 40px; width: auto; display: block; }
.brand { display: flex; flex-direction: column; line-height: 1.2; margin-left: 4px; padding-left: 20px; border-left: 1px solid #3a3a44; }
.brand .kicker { font-size: 11px; }
.brand strong { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.who { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 14px; color: #c9c9d1; }
.link { background: none; border: 0; color: var(--white); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.foot { padding-top: 28px; padding-bottom: 40px; color: var(--muted); font-size: 13px; }
main { padding-top: 48px; min-height: 60vh; }

/* Typografi */
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; margin: 0 0 8px; }
h1 { font-size: 34px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; margin-top: 18px; }
h2.inline { display: inline; }
.kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--red); font-weight: 600; margin: 0 0 6px; }
.top .kicker { color: #d9d9e0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.hero { padding: 18px 0 14px; }
.hero.center { text-align: center; padding: 36px 0 24px; }
.hero h1 { font-size: 40px; }
.hero-photo { position: relative; margin: 18px 0 28px; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(11,11,15,.3); }
.hero-photo img { display: block; width: 100%; height: 360px; object-fit: cover; object-position: center 62%; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,11,15,.93) 0%, rgba(11,11,15,.4) 50%, rgba(11,11,15,.05) 100%); }
.hero-photo-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 34px; color: var(--white); z-index: 1; }
.hero-photo-text h1 { font-size: 48px; margin: 0 0 6px; }
.hero-photo-text p { margin: 0; font-size: 18px; color: #e8e7f0; }

/* Kort og skjema */
.card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 22px; margin-bottom: 20px; }
.card.narrow, .narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.card-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-h h2 { margin: 0; margin-right: auto; }
.n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--black); color: var(--white); font: 600 14px var(--sans); margin-right: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.tablewrap + .grid { margin-top: 18px; }
.grid .wide { grid-column: 1 / -1; }
label { display: block; font-size: 13px; font-weight: 600; color: #333; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; font: 16px var(--sans); border: 1px solid #bdbbb6; border-radius: 6px; background: var(--white); color: var(--ink); }
input[type=checkbox] { width: auto; margin: 0; }
input[type=file] { border: 0; padding-left: 0; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #9f93d6; outline-offset: 1px; }
form label + label, form label + button { margin-top: 12px; }
.grid label + label { margin-top: 0; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.actions input, .actions select { width: auto; margin: 0; }

.btn { display: inline-block; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--black); background: var(--white); color: var(--black); font: 600 14px var(--sans); cursor: pointer; text-decoration: none; }
.btn:hover { background: #efeeec; }
.btn.primary { background: var(--black); color: var(--white); }
.btn.primary:hover { background: #26262f; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* Spinner på knappen mens en operasjon pågår (busy() i ui.js), og en tynn bevegelig linje øverst på siden. */
.btn.is-busy { opacity: .8; cursor: progress; }
.btn.is-busy::before { content: ''; display: inline-block; width: .9em; height: .9em; margin-right: .55em; vertical-align: -.12em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kam-spin .7s linear infinite; }
body.working { cursor: progress; }
body.working::before { content: ''; position: fixed; top: 0; left: 0; height: 3px; width: 35%; z-index: 1000; background: var(--red, #CE1620);
  animation: kam-bar 1.1s ease-in-out infinite; }
@keyframes kam-spin { to { transform: rotate(360deg); } }
@keyframes kam-bar { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before, body.working::before { animation-duration: 2.5s; } }
.icon { border: 1px solid var(--line); background: var(--white); border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; }
.icon:disabled { opacity: .3; cursor: default; }

/* Merker */
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: #ecebe8; color: #444; }
.badge.ok { background: #dff1e6; color: var(--ok); }
.badge.warn { background: #fbefd0; color: var(--warn); }
.badge.bad { background: #fbdcde; color: var(--red); }
.stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.step { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); font: 600 14px var(--sans); padding: 6px 14px 6px 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--white); }
.step:hover { background: var(--paper); }
.step-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--muted); font: 700 12px var(--sans); flex: 0 0 auto; }
.step.done { border-color: var(--ok); color: var(--ink); }
.step.done .step-dot { background: var(--ok); color: var(--white); }
.step.draft { border-color: var(--warn); color: var(--ink); }
.step.draft .step-dot { background: #fbefd0; color: var(--warn); }
.step.declined { border-color: var(--red); color: var(--ink); }
.step.declined .step-dot { background: #fbdcde; color: var(--red); }
.step-sep { color: var(--line); font-size: 14px; }

/* Side-om-side layout med hjelpepanel */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.help { position: sticky; top: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 18px; font-size: 13px; }
.help .kicker { margin-bottom: 4px; }
.help h2 { font-size: 15px; margin: 0 0 10px; }
.help p, .help ul { margin: 0 0 10px; }
.help ul { padding-left: 18px; }
.help li { margin-bottom: 6px; }
.help p:last-child, .help ul:last-child { margin-bottom: 0; }

.notice { background: #fff; border-left: 4px solid var(--red); padding: 10px 14px; border-radius: 4px; }
.notice.ok { border-left-color: var(--ok); }
.okline { color: var(--ok); font-weight: 600; }
.file { font-weight: 600; }

/* Admin */
/* Tre nivåer, stablet, kun innenfor den etablerte sort/hvit/rød-paletten: globale faner (en
   halvsort stripe i full bredde — en visuell videreføring av toppheaderen, siden dette også er
   app-bred chrome, men løsrevet med luft over så den ikke smelter sammen med den) øverst, så
   arrangementsvelgeren (hvit pille), så fanene som gjelder det valgte arrangementet (åpen stil,
   samme som før). Rødt er fortsatt det eneste aksentfargen — markerer aktiv fane på begge nivåer. */
.adminbar { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.global-bar { background: rgba(11, 11, 15, .9); margin: 0 calc(50% - 50vw); }
.tabs.global { gap: 20px; padding: 12px 0; }
.evpicker { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; align-self: flex-start; }
.evpicker label { margin: 0; white-space: nowrap; color: var(--muted); }
.evpicker select { width: auto; min-width: 200px; margin: 0; padding: 5px 8px; font-size: 14px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; font: 600 14px var(--sans); cursor: pointer; color: #444; }
.tabs button.on { border-bottom-color: var(--red); color: var(--black); }
.tabs.global button { padding: 2px 0; font-size: 13px; font-weight: 600; color: #a9a9b2; border-bottom: 2px solid transparent; }
.tabs.global button.on { color: var(--white); border-bottom-color: var(--red); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stats div { background: var(--black); color: var(--white); border-radius: 10px; padding: 14px 18px; }
.stats b { display: block; font: 600 28px var(--serif); }
.stats span { font-size: 13px; color: #cfcfd8; }
.tablewrap { overflow-x: auto; }
.t { width: 100%; border-collapse: collapse; font-size: 14px; }
.t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--black); white-space: nowrap; }
.t td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.t.narrow input { width: 64px; padding: 5px 6px; font-size: 14px; }
.t select { width: auto; margin: 0 0 0 8px; padding: 3px 6px; font-size: 13px; }
.rowerr td { background: #fdeeee; }
.rowwarn td { background: #fff8e8; }
.short { color: var(--red); font-weight: 700; }
.warnlist { list-style: none; padding: 0; margin: 0 0 14px; }
.warnlist li { padding: 7px 12px; margin-bottom: 4px; border-radius: 4px; font-size: 14px; }
.warnlist .err { background: #fbdcde; border-left: 4px solid var(--red); }
.warnlist .warn { background: #fbefd0; border-left: 4px solid #d99a00; }
.list { list-style: none; padding: 0; margin: 0 0 14px; }
.list li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.list li .btn { margin-left: auto; }
/* Telefonfelt med fast landskode foran (+47), brukeren skriver bare de 8 sifrene. */
.phone { display: flex; align-items: stretch; }
.phone .prefix { display: inline-flex; align-items: center; padding: 0 12px; background: #f1f0ee; border: 1px solid var(--line); border-right: 0;
  border-radius: 8px 0 0 8px; color: var(--muted, #6b6b73); font-weight: 600; }
.phone input { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1; min-width: 0; }
.pick { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 10px; }
.pick .btn { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; text-align: left; }
.pick .btn span { font-size: 13px; font-weight: 400; opacity: .75; }
details summary { cursor: pointer; }
.preview { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
#poster { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }

/* Modal og toast */
.modal-back { position: fixed; inset: 0; background: rgba(11,11,15,.6); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal { position: relative; background: var(--white); border-radius: 10px; padding: 26px; max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; }
.modal:has(.confirm) { max-width: 460px; }
.confirm h2 { margin-top: 0; }
.confirm p { margin: 0 0 18px; line-height: 1.5; }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--white); }
.btn.danger:hover { background: #a8101a; }
.modal .x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; cursor: pointer; }
#toast { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 60; }
.toast { background: var(--black); color: var(--white); padding: 10px 16px; border-radius: 6px; border-left: 4px solid var(--ok); max-width: 380px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.toast.err { border-left-color: var(--red); }

@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; }
  .help { position: static; }
}
@media (max-width: 720px) {
  .two { grid-template-columns: 1fr; }
  h1, .hero h1 { font-size: 30px; }
  .brand { border-left: 0; padding-left: 0; }
  .who { margin-left: 0; }
  .hero-photo img { height: 240px; }
  .hero-photo-text { padding: 18px 20px; }
  .hero-photo-text h1 { font-size: 32px; }
  .hero-photo-text p { font-size: 15px; }
}
@media print { .top, .adminbar, .foot, .actions, .help { display: none; } body { background: #fff; } }

.mailpreview { white-space: pre-wrap; background: #f6f6f8; border: 1px solid #ddd; border-radius: 6px; padding: .75rem; max-height: 40vh; overflow: auto; font: inherit; font-size: .9rem; }
.t.sched th, .t.sched td { padding-left: 7px; padding-right: 7px; }
.t.sched th { letter-spacing: .03em; }
.calc-toggle { margin-left: auto; font-weight: 400; }
.t.sched tr.calc { display: none; }
.t.sched.showcalc tr.calc { display: table-row; }
.t.sched tr.calc td { padding: 2px 7px 10px; border-bottom: 1px solid var(--line); }
.calcbar { display: flex; gap: 2px; align-items: stretch; font-size: 12px; }
.calcname { flex: 0 0 120px; align-self: center; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg { padding: 3px 6px; border-radius: 4px; min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.seg small { color: inherit; opacity: .7; font-size: 10px; }
.seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-base { background: #dfe3ee; color: #26304f; }
.seg-rig { background: #f6dfb0; color: #6b4300; }
.seg-play { background: #cfe8d8; color: #14552f; }
.seg-buf { background: repeating-linear-gradient(45deg, #ececec, #ececec 4px, #f6f6f6 4px, #f6f6f6 8px); color: var(--muted); }
.seg-done { background: #ececec; color: var(--muted); }
.seg-short { background: #f6d5d5; color: #8a1018; outline: 1px solid var(--red); }
.help .legend { list-style: none; padding-left: 0; }
.help .legend li { display: flex; gap: 8px; align-items: flex-start; }
.sw { flex: 0 0 18px; height: 14px; border-radius: 3px; margin-top: 2px; }
.grid.params > label { display: flex; flex-direction: column; justify-content: flex-end; }
.pieces { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 14px; margin: 14px 0; }
.pieces legend { font-weight: 600; padding: 0 6px; }
.piece-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.piece-row { display: grid; grid-template-columns: 78px 1.6fr 1.2fr 1fr auto; gap: 8px; align-items: end; }
.piece-row label { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.piece-row label input { margin-top: 2px; }
.piece-n { align-self: center; font-weight: 700; color: var(--muted); }
.piece-tools { display: flex; gap: 2px; padding-bottom: 6px; }
@media (max-width: 720px) { .piece-row { grid-template-columns: 1fr; } .piece-n { margin-top: 6px; } }
[hidden] { display: none !important; }
.seg-round { background: repeating-linear-gradient(135deg, #e9e2cf, #e9e2cf 3px, #f7f3e6 3px, #f7f3e6 6px); color: #4d4220; }
.evrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.evactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: -8px; }
.btn.deep { background: #8e0f17; border-color: #8e0f17; color: var(--white); }
.btn.deep:hover { background: #740c13; }
.t.sched .rnd { display: none; }
.t.sched.showcalc .rnd { display: inline-block; margin-left: 5px; font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: 2px; }
.t.sched.showcalc .rnd.up { color: #14552f; }
.t.sched.showcalc .rnd.down { color: #6b4300; }

/* Sponsorlogo i arrangementskjemaet: vises på mørk blå bunn, slik den står på plakatene. */
.logo-field .logo-prev { background: #2E1962; border-radius: 6px; padding: 12px; margin: 6px 0; text-align: right; }
.logo-field .logo-prev img { max-width: 100%; max-height: 70px; display: inline-block; }