/* ---------------------------------------------------------------------------
   Kursusevaluering - Hovedstadens Beredskab

   Colours are taken from hbr.dk (base.min.css). They live here as variables
   only, so a correction from the communications department is a one line
   change. The button pattern (orange face, deep navy uppercase label, inset
   bottom edge) is HBR's most recognisable element after the logo.

   All combinations in use are checked against WCAG 2.1 AA and clear it with
   room to spare. Orange is a background colour, never a text colour. Red is
   used for borders, icons and large bold text only.
--------------------------------------------------------------------------- */

:root {
  --hbr-navy:         #292d4e;
  --hbr-navy-deep:    #171c40;
  --hbr-accent:       #e09e40;
  --hbr-accent-hover: #dc932a;
  --hbr-accent-edge:  #80582a;
  --hbr-bg:           #e3e5e0;
  --hbr-surface:      #ffffff;
  --hbr-red:          #e00c32;
  --hbr-link-hover:   #4c5491;

  --hbr-line:         #c9ccc5;
  /* Kant på interaktive felter. Mørk nok til WCAG 1.4.11 (3:1 mod både den
     lyse knapflade og det hvide kort), lys nok til ikke at larme. */
  --hbr-line-strong:  #7f86a0;
  --hbr-muted:        #4a4f60;

  /* Free replacement for the commercial Flama family: narrow humanist sans. */
  --hbr-font: 'Barlow Semi Condensed', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --radius: 6px;
  --tap: 48px;      /* minimum touch target, above the 44px requirement */
  --wrap: 60rem;
}

/* Self hosted, so no request ever leaves the server and no cookie banner is
   needed. If the files are absent the fallback stack takes over silently. */
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/fonts/barlow-semi-condensed-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/fonts/barlow-semi-condensed-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/fonts/barlow-semi-condensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hbr-bg);
  color: var(--hbr-navy);
  font-family: var(--hbr-font);
  font-size: 1.0625rem;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; margin-top: 2rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }

a { color: var(--hbr-navy-deep); text-decoration: underline; text-underline-offset: .15em; }
a:hover { color: var(--hbr-link-hover); }

:focus-visible {
  outline: 3px solid var(--hbr-navy-deep);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--hbr-navy); color: #fff; padding: .75rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted { color: var(--hbr-muted); }
.small { font-size: .9375rem; }
.nowrap { white-space: nowrap; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap);
  padding: .75rem 1.5rem;
  border: 0; border-radius: var(--radius);
  background: var(--hbr-accent);
  color: var(--hbr-navy-deep);
  font-family: inherit; font-size: 1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 0 var(--hbr-accent-edge);
}
.btn:hover { background: var(--hbr-accent-hover); color: var(--hbr-navy-deep); }
.btn:active { box-shadow: inset 0 -2px 0 0 var(--hbr-accent-edge); transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-block { width: 100%; }
/* 44 px er gulvet, også for de "små" knapper: personalefladen bruges på en
   telefon ude på materielgården, ikke kun ved et skrivebord. */
.btn-sm { min-height: 2.75rem; padding: .4rem .9rem; font-size: .875rem; }

.btn-quiet {
  background: transparent;
  color: var(--hbr-navy-deep);
  box-shadow: inset 0 0 0 2px var(--hbr-navy-deep);
}
.btn-quiet:hover { background: rgba(23, 28, 64, .07); color: var(--hbr-navy-deep); }

.btn-danger {
  background: transparent;
  color: var(--hbr-navy-deep);
  box-shadow: inset 0 0 0 2px var(--hbr-red);
}
.btn-danger:hover { background: rgba(224, 12, 50, .08); }

/* --- Staff chrome ------------------------------------------------------- */

.topbar { background: var(--hbr-navy); color: #fff; }
.topbar a { color: #fff; }
.topbar-inner {
  max-width: var(--wrap); margin: 0 auto; padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.brand-mark {
  font-weight: 600; letter-spacing: .08em;
  background: var(--hbr-accent); color: var(--hbr-navy-deep);
  padding: .15rem .5rem; border-radius: 4px;
}
.brand-text { font-weight: 500; letter-spacing: .02em; }
.topbar-user { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; }
.topbar-user .btn-quiet { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); color: #fff; }
.topbar-user .btn-quiet:hover { background: rgba(255,255,255,.12); color: #fff; }

.mainnav { background: var(--hbr-navy-deep); }
.mainnav ul {
  max-width: var(--wrap); margin: 0 auto; padding: 0 .5rem;
  list-style: none; display: flex; flex-wrap: wrap; gap: .25rem;
}
.mainnav a {
  display: block; padding: .75rem .9rem; text-decoration: none;
  font-size: .9375rem; border-bottom: 3px solid transparent;
}
.mainnav a:hover { background: rgba(255,255,255,.08); }
.mainnav a[aria-current="page"] { border-bottom-color: var(--hbr-accent); font-weight: 600; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.flash {
  background: var(--hbr-surface);
  border-left: 6px solid var(--hbr-accent);
  padding: .875rem 1rem; margin-bottom: 1.5rem; border-radius: var(--radius);
}

.card {
  background: var(--hbr-surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.card > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* --- Tables ------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--hbr-surface); }
caption { text-align: left; padding: .5rem 0; color: var(--hbr-muted); font-size: .9375rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--hbr-line); vertical-align: top; }
th { font-weight: 600; }
thead th { background: var(--hbr-navy); color: #fff; border-bottom: 0; }
tbody tr:last-child td { border-bottom: 0; }

/* --- Forms -------------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }
.field label, .field > .label { display: block; font-weight: 500; margin-bottom: .3rem; }
.hint { display: block; clear: both; font-size: .9375rem; color: var(--hbr-muted); margin-bottom: .35rem; }

/* input:not([type]) er ikke pedanteri: et <input> uden type-attribut opfører
   sig som text, men rammes IKKE af input[type="text"]. Uden den linje står
   felterne med browserens 21 px standardhøjde. */
input:not([type]), input[type="text"], input[type="date"], input[type="time"], input[type="number"],
input[type="password"], input[type="search"], input[type="email"], select, textarea {
  width: 100%; min-height: var(--tap);
  padding: .6rem .7rem;
  font-family: inherit; font-size: 1rem;
  color: var(--hbr-navy);
  background: var(--hbr-surface);
  border: 2px solid var(--hbr-line);
  border-radius: var(--radius);
}
textarea { min-height: 6rem; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--hbr-navy) 50%), linear-gradient(135deg, var(--hbr-navy) 50%, transparent 50%); background-position: right 1.1rem center, right .8rem center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.2rem; }

input:focus, select:focus, textarea:focus { border-color: var(--hbr-navy); }
[aria-invalid="true"] { border-color: var(--hbr-red); }

fieldset { border: 0; margin: 0; padding: 0; }

/* En <legend> placeres normalt i fieldsettets KANT, ikke inde i dets flade.
   Har fieldsettet en baggrund, kommer teksten derfor til at stå uden for
   kortet. En flydende legend behandles som almindeligt indhold og lander,
   hvor den hører hjemme. Semantikken er uændret. */
legend { padding: 0; float: left; width: 100%; }
legend + * { clear: both; }

.checkline { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); }
.checkline input[type="checkbox"] { width: 1.5rem; height: 1.5rem; accent-color: var(--hbr-navy); }
.checkline label { margin: 0; font-weight: 400; }

.actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }

.errorbox {
  background: var(--hbr-surface);
  border-left: 6px solid var(--hbr-red);
  padding: .875rem 1rem; margin-bottom: 1.5rem; border-radius: var(--radius);
}
.errorbox h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.errorbox ul { margin: 0; padding-left: 1.2rem; }

/* --- Participant form --------------------------------------------------- */

body.participant { background: var(--hbr-bg); }
.participant main { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

.p-head {
  background: var(--hbr-navy); color: #fff;
  margin: -1rem -1rem 1.1rem; padding: 1.25rem 1rem 1.1rem;
  border-bottom: 4px solid var(--hbr-accent);
}
.p-head .eyebrow {
  margin: 0 0 .25rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hbr-accent);
}
.p-head h1 { margin: 0 0 .35rem; font-size: 1.5rem; }
.p-head .course { margin: 0; font-size: 1.0625rem; }
.p-head .meta { margin: .15rem 0 0; font-size: .9375rem; color: #cfd2dd; }

.anon {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .9375rem; color: var(--hbr-muted);
  margin: 0 0 1rem; padding: 0 .15rem;
}
.anon svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: .15rem; fill: var(--hbr-navy); }

.q {
  background: var(--hbr-surface);
  border-radius: var(--radius);
  padding: .85rem .9rem .9rem;
  margin-bottom: .6rem;
}
.q legend {
  font-weight: 600; font-size: 1.0625rem;
  margin-bottom: .6rem; display: flex; gap: .55rem; align-items: baseline;
}
.q .qnum {
  flex: 0 0 auto;
  color: var(--hbr-muted); font-weight: 600; font-size: .8125rem;
  min-width: 1.35rem; text-align: center;
  background: #eceef4; border-radius: 4px; padding: .1rem .3rem;
}
.q[data-invalid="true"] { box-shadow: inset 0 0 0 3px var(--hbr-red); }
.q .qerror { color: var(--hbr-navy); font-weight: 600; font-size: .9375rem; margin: .5rem 0 0; }
.q .qerror::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-right: .4rem; border-radius: 50%; background: var(--hbr-red); color: #fff; font-size: .8125rem; }

/* Segmented control: quiet until chosen, unmistakable once chosen. The
   unselected state stays light so the picked answer is the only dark block on
   the screen - that is what makes the form readable at arm's length. */
.scale { display: flex; gap: .3rem; clear: both; }
.scale > label {
  flex: 1 1 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 3.25rem;
  border: 2px solid var(--hbr-line-strong);
  border-radius: var(--radius);
  font-size: 1.1875rem; font-weight: 600;
  cursor: pointer;
  background: #f7f8fa;
  color: var(--hbr-navy);
  -webkit-tap-highlight-color: transparent;
  /* Ingen overgang: et tryk skal skifte tilstand med det samme, også på en
     telefon der har travlt med andet. */
}
.scale input {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.scale > label:hover { background: #e7eaf1; border-color: var(--hbr-navy); }
.scale > label:has(input:checked) {
  background: var(--hbr-navy); border-color: var(--hbr-navy); color: #fff;
  box-shadow: inset 0 -3px 0 0 var(--hbr-navy-deep);
}
.scale > label:has(input:focus-visible) { outline: 3px solid var(--hbr-navy-deep); outline-offset: 2px; }

.scale-ends {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .8125rem; color: var(--hbr-muted); margin-top: .35rem;
}

.p-submit { margin-top: 1.25rem; }
.p-footer { text-align: center; font-size: .875rem; color: var(--hbr-muted); padding: 0 1rem 2rem; }

/* Closed / thank you screens */
.notice {
  background: var(--hbr-surface); border-radius: var(--radius);
  padding: 2rem 1.25rem; text-align: center; margin-top: 2rem;
}
.notice .sign {
  width: 4rem; height: 4rem; margin: 0 auto 1rem;
  border-radius: 50%; background: var(--hbr-navy);
  display: flex; align-items: center; justify-content: center;
  color: var(--hbr-accent); font-size: 2rem; font-weight: 600;
}
.notice h1 { font-size: 1.5rem; }
.notice p:last-child { margin-bottom: 0; }

/* --- Response counter --------------------------------------------------- */

.counter { display: flex; align-items: baseline; gap: .5rem; }
.counter .big { font-size: 2.75rem; font-weight: 600; line-height: 1; }
.counter .of { font-size: 1.1rem; color: var(--hbr-muted); }

.meter { height: .75rem; background: var(--hbr-line); border-radius: 999px; overflow: hidden; margin-top: .75rem; }
.meter > span { display: block; height: 100%; background: var(--hbr-accent); }

/* --- Statistics (no ranking, ever) -------------------------------------- */

.stat { border-bottom: 1px solid var(--hbr-line); padding: .85rem 0; }
.stat:last-child { border-bottom: 0; }
.stat .qtext { font-weight: 500; }
.stat .avg { font-size: 1.5rem; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: .3rem; height: 3rem; margin-top: .5rem; }
.bars > div { flex: 1; background: var(--hbr-navy); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.barlabels { display: flex; gap: .3rem; font-size: .8125rem; color: var(--hbr-muted); }
.barlabels > span { flex: 1; text-align: center; }

.freetext { background: var(--hbr-bg); border-radius: var(--radius); padding: .75rem .9rem; margin-bottom: .6rem; }
.freetext p { margin: 0; }

.tag {
  display: inline-block; font-size: .8125rem; font-weight: 600;
  padding: .1rem .5rem; border-radius: 999px;
  background: var(--hbr-navy); color: #fff;
}
.tag-open { background: #1f6b3a; }
.tag-closed { background: var(--hbr-muted); }
.tag-hbr { background: var(--hbr-accent); color: var(--hbr-navy-deep); }

/* --- QR display --------------------------------------------------------- */

.qrbox { text-align: center; background: var(--hbr-surface); border-radius: var(--radius); padding: 1.5rem; }
.qrbox svg { width: min(70vmin, 22rem); height: auto; }
.qrbox .url { font-size: 1rem; word-break: break-all; margin-top: .75rem; }

@media print {
  .topbar, .mainnav, .actions, .noprint { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .qrbox svg { width: 12cm; }
}

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