@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter.ttf") format("truetype");
}

:root {
  --fylark-arena: #f3f1eb;
  --fylark-paper: #fffdf8;
  --fylark-card: rgba(255, 253, 248, .72);
  --fylark-ink: #071f3d;
  --fylark-ink-soft: #526074;
  --fylark-blue: #2563a0;
  --fylark-blue-strong: #0d356f;
  --fylark-line: rgba(13, 53, 111, .14);
  --fylark-gold: #d7ad6a;
  --fylark-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  background: var(--fylark-arena);
}

body.legal-surface,
body.admin-surface {
  background:
    radial-gradient(72% 92% at 104% 14%, rgba(37, 99, 160, .16), transparent 60%),
    radial-gradient(58% 72% at -8% 22%, rgba(215, 173, 106, .13), transparent 62%),
    linear-gradient(135deg, #f7f5ef 0%, #f3f1eb 45%, #edf2f5 100%);
  color: var(--fylark-ink);
  color-scheme: light;
}

body.legal-surface::before,
body.admin-surface::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .42) 49%, transparent 57% 100%),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(13, 53, 111, .028) 63px, transparent 64px);
  opacity: .72;
}

body.legal-surface .bg,
body.admin-surface .bg {
  opacity: .72;
  mix-blend-mode: multiply;
}

body.legal-surface .field,
body.admin-surface .field,
body.admin-surface .bg .field {
  background:
    radial-gradient(34% 44% at 18% 18%, rgba(215, 173, 106, .22), transparent 62%),
    radial-gradient(34% 48% at 86% 18%, rgba(37, 99, 160, .2), transparent 64%),
    radial-gradient(45% 54% at 64% 100%, rgba(48, 128, 204, .11), transparent 66%) !important;
}

body.legal-surface .vignette {
  background: radial-gradient(circle at 48% 24%, transparent 42%, rgba(243, 241, 235, .9) 100%);
}

body.legal-surface .grain {
  opacity: .035;
  mix-blend-mode: multiply;
}

body.legal-surface main {
  max-width: min(1120px, calc(100vw - 44px));
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  column-gap: clamp(44px, 6vw, 74px);
  align-items: start;
  padding-bottom: clamp(32px, 6vh, 72px);
}

body.legal-surface .brand {
  grid-column: 1;
  margin: 0 0 22px;
  color: var(--fylark-blue-strong);
}

body.legal-surface .brand-mark {
  display: none;
}

body.legal-surface .brand-name {
  font-family: "Inter", "Schibsted Grotesk", system-ui, sans-serif;
  font-size: clamp(2.6rem, 6vw, 4.9rem);
  line-height: 1;
  letter-spacing: 0;
  background: none;
  color: var(--fylark-blue-strong);
}

body.legal-surface .page-head {
  grid-column: 1;
  position: sticky;
  top: clamp(26px, 7vh, 64px);
  margin: 0;
}

body.legal-surface h1 {
  max-width: 12ch;
  font-family: "Inter", "Schibsted Grotesk", system-ui, sans-serif;
  font-size: clamp(2.1rem, 3.7vw, 3.35rem);
  line-height: .98;
  letter-spacing: 0;
  color: var(--fylark-ink);
  background: none;
}

body.legal-surface .sub {
  max-width: 24ch;
  margin-top: 1.05rem;
  color: rgba(13, 53, 111, .72);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .13em;
  line-height: 1.55;
  text-transform: uppercase;
}

body.legal-surface .card,
body.legal-surface section {
  grid-column: 2;
  border: 1px solid var(--fylark-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, .82), rgba(250, 247, 240, .68)),
    linear-gradient(135deg, rgba(37, 99, 160, .055), transparent 58%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 32px 90px rgba(46, 37, 22, .11),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

body.legal-surface h2 {
  color: var(--fylark-ink);
  font-size: .94rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

body.legal-surface h2::before {
  width: 7px;
  height: 7px;
  background: var(--fylark-blue);
  box-shadow: 0 0 16px rgba(48, 128, 204, .22);
}

body.legal-surface p,
body.legal-surface li,
body.legal-surface .note {
  color: rgba(7, 31, 61, .72);
}

body.legal-surface strong {
  color: var(--fylark-ink);
  font-weight: 780;
}

body.legal-surface a {
  color: var(--fylark-blue-strong);
  text-decoration-color: rgba(13, 53, 111, .28);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.legal-surface li::before {
  background: var(--fylark-blue);
}

body.legal-surface .back {
  grid-column: 2;
  width: fit-content;
  border-color: var(--fylark-line);
  background: rgba(255, 253, 248, .7);
  color: var(--fylark-blue-strong);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

body.legal-surface .note {
  grid-column: 2;
}

body.legal-surface .pill,
body.legal-surface textarea {
  border-color: var(--fylark-line);
  background: rgba(255, 253, 248, .78);
  color: var(--fylark-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

body.legal-surface .pill input,
body.legal-surface textarea {
  color: var(--fylark-ink);
}

body.legal-surface .pill:has(input[aria-invalid="true"]),
body.legal-surface textarea[aria-invalid="true"] {
  border-color: rgba(156, 37, 31, .48);
  box-shadow:
    0 0 0 4px rgba(156, 37, 31, .08),
    inset 0 1px 0 rgba(255,255,255,.72);
}

body.legal-surface .pill input::placeholder,
body.legal-surface textarea::placeholder {
  color: rgba(82, 96, 116, .72);
}

body.legal-surface .btn {
  color: #fff;
  background: linear-gradient(180deg, #2d7dc3, #1d5e9f);
  box-shadow: 0 14px 34px rgba(37, 99, 160, .22), inset 0 1px 0 rgba(255,255,255,.34);
}

body.legal-surface .msg.err {
  color: #9b1c28;
}

body.legal-surface .msg.ok {
  color: #12643f;
}

body.admin-surface {
  --bg: #f3f1eb;
  --ink: #071f3d;
  --ink-dim: #526074;
  --ink-faint: rgba(82, 96, 116, .76);
  --line: rgba(13, 53, 111, .14);
  --line-soft: rgba(13, 53, 111, .09);
  --a: #2563a0;
  --b: #3080cc;
  --ok: #12643f;
  --warn: #9a641f;
  --bad: #9b1c28;
}

body.admin-surface .bg .glow {
  background: radial-gradient(circle, rgba(48, 128, 204, .18), rgba(215, 173, 106, .08) 48%, transparent 72%);
  filter: blur(24px);
}

body.admin-surface .bg .halo {
  opacity: .14;
  background: conic-gradient(from 14deg, transparent 0deg, rgba(37,99,160,.46) 110deg, rgba(215,173,106,.34) 168deg, transparent 238deg, transparent 360deg);
}

body.admin-surface .bg .grid {
  opacity: .2;
  background-image: linear-gradient(rgba(13,53,111,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,53,111,.06) 1px, transparent 1px);
}

body.admin-surface .card-login,
body.admin-surface .modal-card,
body.admin-surface section.card,
body.admin-surface .kpi,
body.admin-surface .comp,
body.admin-surface .security-strip span {
  border-color: var(--fylark-line);
  background:
    linear-gradient(180deg, rgba(255,253,248,.78), rgba(250,247,240,.64)),
    linear-gradient(135deg, rgba(37,99,160,.045), transparent 58%);
  box-shadow:
    0 28px 80px rgba(46,37,22,.1),
    inset 0 1px 0 rgba(255,255,255,.76);
}

body.admin-surface .card-login {
  border-radius: 8px;
}

body.admin-surface .brand h1,
body.admin-surface .card-login h1,
body.admin-surface .modal-card h2,
body.admin-surface section.card h2,
body.admin-surface .kpi .n {
  color: var(--fylark-ink);
}

body.admin-surface .login-rail,
body.admin-surface input[type=text],
body.admin-surface input[type=password],
body.admin-surface .filters input[type=search],
body.admin-surface .filters select,
body.admin-surface .filters input[type=date],
body.admin-surface .tag,
body.admin-surface .tbtn {
  border-color: var(--fylark-line);
  background: rgba(255, 253, 248, .72);
  color: var(--fylark-ink);
}

body.admin-surface input:focus,
body.admin-surface .filters input:focus,
body.admin-surface .filters select:focus {
  background: rgba(255, 253, 248, .92);
  border-color: rgba(37, 99, 160, .52);
}

body.admin-surface .btn {
  color: #fff;
  background: linear-gradient(180deg, #2d7dc3, #1d5e9f);
  box-shadow: 0 12px 28px rgba(37,99,160,.2), inset 0 1px 0 rgba(255,255,255,.28);
}

body.admin-surface .btn.ghost {
  color: var(--fylark-blue-strong);
  background: rgba(255,253,248,.7);
}

body.admin-surface .tabs {
  border-bottom-color: var(--fylark-line);
}

body.admin-surface .tab {
  color: rgba(82, 96, 116, .78);
}

body.admin-surface .tab.active {
  color: var(--fylark-ink);
  border-bottom-color: var(--fylark-blue);
}

body.admin-surface table {
  color: var(--fylark-ink);
}

body.admin-surface th {
  color: rgba(82, 96, 116, .82);
}

body.admin-surface td.muted,
body.admin-surface .muted,
body.admin-surface .note,
body.admin-surface .gen,
body.admin-surface .hint,
body.admin-surface .login-rail,
body.admin-surface label {
  color: var(--fylark-ink-soft);
}

body.admin-surface .toast {
  background: rgba(255,253,248,.94);
  border-color: var(--fylark-line);
  color: var(--fylark-ink);
}

@media (max-width: 760px) {
  body.legal-surface {
    padding: 28px 18px 46px;
  }

  body.legal-surface main {
    max-width: 100%;
    display: block;
  }

  body.legal-surface .brand {
    margin-bottom: 24px;
  }

  body.legal-surface .brand-name {
    font-size: clamp(2.7rem, 18vw, 5.4rem);
  }

  body.legal-surface .page-head {
    position: static;
    margin-bottom: 22px;
  }

  body.legal-surface h1 {
    max-width: 10ch;
    font-size: clamp(2rem, 12vw, 3.6rem);
  }

  body.legal-surface .sub {
    max-width: 32ch;
  }

  body.legal-surface .card,
  body.legal-surface section {
    padding: 1.25rem;
  }

  body.legal-surface .pill {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
  }

  body.legal-surface .pill input,
  body.legal-surface .btn {
    width: 100%;
  }

  body.admin-surface .login {
    padding: 18px;
  }

  body.admin-surface .card-login {
    padding: 26px 22px 24px;
  }
}

/* Public information surfaces — same visual system as the 2026 landing. */
@font-face {
  font-family: "Inter Wordmark";
  src: url("/fonts/inter-wordmark.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

body.legal-surface {
  --surface-canvas: #f3f1eb;
  --surface-panel: rgba(255, 253, 248, .82);
  --surface-panel-solid: #fffdf8;
  --surface-ink: #071c38;
  --surface-soft: #52647a;
  --surface-faint: #718195;
  --surface-line: rgba(7, 28, 56, .14);
  --surface-line-strong: rgba(7, 28, 56, .24);
  --surface-accent: #056bd8;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: var(--surface-ink);
  background: var(--surface-canvas);
  color-scheme: light dark;
  animation: none !important;
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.68;
}

body.legal-surface::before {
  background:
    linear-gradient(112deg, rgba(244, 223, 195, .46), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(145, 216, 255, .28), transparent 28%),
    linear-gradient(135deg, #f7f4ee, #edf4fb);
  opacity: 1;
}

body.legal-surface .bg { opacity: 1; mix-blend-mode: normal; }
body.legal-surface .field {
  inset: 0;
  background: none !important;
  animation: none !important;
  will-change: auto;
}
body.legal-surface .grain { opacity: .018; mix-blend-mode: multiply; }
body.legal-surface .vignette { display: none; }

body.legal-surface main {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding: clamp(34px, 6vw, 82px) 0 clamp(30px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 780px);
  grid-auto-rows: min-content;
  justify-content: space-between;
  align-items: start;
  column-gap: clamp(48px, 7vw, 104px);
  row-gap: 18px;
}

body.legal-surface .brand {
  grid-column: 1;
  grid-row: 1;
  width: fit-content;
  min-height: 44px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: var(--surface-ink);
  text-decoration: none;
}
body.legal-surface .brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: contain;
}
body.legal-surface .brand-name {
  color: var(--surface-ink);
  background: none;
  font-family: "Inter Wordmark", "Schibsted Grotesk", sans-serif;
  font-size: 1.45rem;
  font-weight: 690;
  letter-spacing: -.05em;
  line-height: 1;
}

body.legal-surface .page-head {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 34px;
  align-self: start;
  margin: clamp(106px, 14vh, 142px) 0 0;
}
body.legal-surface h1 {
  max-width: 10ch;
  margin: 0;
  padding: 0;
  color: var(--surface-ink);
  background: none;
  font-family: "Inter Wordmark", "Schibsted Grotesk", sans-serif;
  font-size: clamp(2.65rem, 4.4vw, 4.6rem);
  font-weight: 690;
  line-height: .95;
  letter-spacing: -.055em;
}
body.legal-surface .sub {
  max-width: 29ch;
  margin: 1.25rem 0 0;
  color: var(--surface-faint);
  font-size: .7rem;
  font-weight: 760;
  letter-spacing: .15em;
  line-height: 1.55;
  text-transform: uppercase;
}

body.legal-surface .card,
body.legal-surface main > section {
  grid-column: 2;
  width: 100%;
  margin: 0;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--surface-line);
  border-radius: 26px;
  color: var(--surface-ink);
  background: var(--surface-panel);
  box-shadow: 0 30px 90px rgba(18, 39, 66, .12), inset 0 1px rgba(255,255,255,.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
body.legal-surface .card { grid-row: 1; }
body.legal-surface main > section + section { margin-top: 0; }

body.legal-surface h2 {
  margin: 2rem 0 .5rem;
  color: var(--surface-ink);
  font-size: .78rem;
  font-weight: 780;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}
body.legal-surface h2:first-of-type { margin-top: 1.55rem; }
body.legal-surface h2::before {
  width: 7px;
  height: 7px;
  background: var(--surface-accent);
  box-shadow: 0 0 18px rgba(5, 107, 216, .3);
}
body.legal-surface p,
body.legal-surface li,
body.legal-surface .note {
  color: var(--surface-soft);
  font-size: .98rem;
  line-height: 1.7;
}
body.legal-surface strong { color: var(--surface-ink); font-weight: 720; }
body.legal-surface a { color: var(--surface-accent); text-underline-offset: 3px; }
body.legal-surface li::before { background: var(--surface-accent); }

body.legal-surface .back {
  grid-column: 2;
  min-height: 44px;
  margin-top: 2px;
  padding: .6rem 1rem;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  color: var(--surface-soft);
  background: var(--surface-panel);
  box-shadow: none;
}
body.legal-surface .note { grid-column: 2; margin: 2px 0 0; font-size: .8rem; }

body.legal-surface .pill,
body.legal-surface textarea {
  border-color: var(--surface-line-strong);
  color: var(--surface-ink);
  background: var(--surface-panel-solid);
}
body.legal-surface .pill input,
body.legal-surface textarea { color: var(--surface-ink); }
body.legal-surface .btn {
  min-height: 46px;
  color: #fff;
  background: linear-gradient(180deg, #0b7bea, #0563c5);
  box-shadow: 0 12px 28px rgba(5,107,216,.24), inset 0 1px rgba(255,255,255,.28);
}

body.legal-surface > .surface-footer {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 48px));
  min-height: 76px;
  margin: 0 auto;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--surface-faint);
  font-size: .78rem;
}
body.legal-surface > .surface-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1.25rem; }
body.legal-surface > .surface-footer a { color: inherit; text-underline-offset: 4px; text-decoration-color: transparent; }
body.legal-surface > .surface-footer a:hover { color: var(--surface-ink); text-decoration-color: currentColor; }
body.legal-surface :focus-visible { outline: 3px solid var(--surface-accent); outline-offset: 3px; }

@media (prefers-color-scheme: dark) {
  body.legal-surface {
    --surface-canvas: #071426;
    --surface-panel: rgba(13, 34, 61, .76);
    --surface-panel-solid: #0d223d;
    --surface-ink: #f6fbff;
    --surface-soft: #c6d5e5;
    --surface-faint: #9db2c9;
    --surface-line: rgba(220, 235, 250, .15);
    --surface-line-strong: rgba(220, 235, 250, .27);
    --surface-accent: #58a9ff;
  }
  body.legal-surface::before {
    background:
      linear-gradient(112deg, rgba(78, 50, 24, .34), transparent 34%),
      radial-gradient(circle at 84% 18%, rgba(31, 100, 171, .36), transparent 30%),
      linear-gradient(135deg, #09192d, #050d19);
  }
  body.legal-surface .grain { opacity: .014; mix-blend-mode: screen; }
  body.legal-surface .card,
  body.legal-surface main > section { box-shadow: 0 30px 90px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.06); }
}

@media (max-width: 760px) {
  body.legal-surface main { width: min(100% - 28px, 720px); padding: 22px 0 38px; display: block; }
  body.legal-surface .brand { margin: 0 0 36px; }
  body.legal-surface .brand-name { font-size: 1.35rem; }
  body.legal-surface .page-head { position: static; margin: 0 0 24px; }
  body.legal-surface h1 { max-width: 12ch; font-size: clamp(2.4rem, 13vw, 4rem); }
  body.legal-surface .card,
  body.legal-surface main > section { padding: 1.3rem; border-radius: 22px; margin-bottom: 14px; }
  body.legal-surface .back { margin-top: 10px; }
  body.legal-surface > .surface-footer {
    width: calc(100% - 28px);
    min-height: 0;
    padding-top: 8px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 11px;
  }
  body.legal-surface > .surface-footer > span {
    padding-inline: 2px;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .045em;
  }
  body.legal-surface > .surface-footer nav {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--surface-line);
    border-radius: 20px;
    background: var(--surface-panel);
    box-shadow: inset 0 1px rgba(255,255,255,.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  body.legal-surface > .surface-footer nav a {
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    text-decoration: none;
    font-size: clamp(.7rem, 3.1vw, .78rem);
    font-weight: 620;
  }
  body.legal-surface > .surface-footer nav a::after {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    opacity: .56;
    transform: rotate(45deg);
  }
  body.legal-surface > .surface-footer nav a:nth-child(odd) { border-right: 1px solid var(--surface-line); }
  body.legal-surface > .surface-footer nav a:nth-child(-n + 2) { border-bottom: 1px solid var(--surface-line); }
}

@media (prefers-reduced-transparency: reduce) {
  body.legal-surface .card,
  body.legal-surface main > section,
  body.legal-surface .back { background: var(--surface-panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 760px) and (prefers-reduced-transparency: reduce) {
  body.legal-surface > .surface-footer nav { background: var(--surface-panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}