@import url('tokens.css');

/* ==========================================================================
   Indikator — app and consultant vocabulary

   The design tokens moved to tokens.css, which this file imports and which
   every app loads. What is left here is the component vocabulary the
   authenticated screens are built from: shell, typography roles, wordmark,
   cards, buttons, form controls, pills, tables, flash, skip link.

   The public sales site does NOT load this file — only tokens.css plus its
   own site.css. The exception is /eksempler/*, which embeds a product's own
   report markup and needs this vocabulary to render it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-deep); }

img, svg { max-width: 100%; height: auto; display: block; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--blue-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: var(--paper); }

/* --------------------------------------------------------------------------
   Typographic roles
   -------------------------------------------------------------------------- */

.display  { font-family: var(--display); font-size: var(--t-2xl); font-weight: 800; }
.title    { font-family: var(--display); font-size: var(--t-xl); font-weight: 800; }
.subtitle { font-family: var(--display); font-size: var(--t-lg); font-weight: 700; }

/* Eyebrow: a category label, used only where the thing genuinely belongs to a
   named group (a domain, a report section). Never as decoration. */
.eyebrow {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lede  { font-size: var(--t-md); color: var(--ink-muted); max-width: var(--measure); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--t-sm); }

/* Numbers, codes and identifiers read as instrument output, not prose. */
.data { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.measure { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.shell--narrow { max-width: 760px; }
.shell--wide   { max-width: 1400px; }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-sm > * + * { margin-top: var(--space-2); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }

.section { padding: var(--space-7) 0; }

.rule {
  border: 0;
  border-top: 1px solid var(--mist);
  margin: var(--space-6) 0;
}

/* --------------------------------------------------------------------------
   Logo and product wordmarks

   The peopleindicator.com logo is an inline SVG (platform/Brand.php, partial
   partials/logo). .logo only sizes it; the colours are in the paths.

   A product name in a test-taker header is a .wordmark: Nunito, navy, and —
   for Indikator — the dot of the i is the logo's round blue dot:

       <span class="wordmark">Ind<i class="wordmark__i">ı</i>kator</span>

   Sized in em, so the dot holds from a 12px footer to a PDF cover. It is
   measured up from the baseline: in "Indikator" the i sits between a d and a
   k, and anything positioned from the top collides with an ascender.
   -------------------------------------------------------------------------- */

.logo { display: block; width: auto; height: 28px; }
.logo--mark { height: 32px; }

.wordmark {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.wordmark:hover { color: var(--ink); }

.wordmark__i {
  position: relative;
  font-style: normal;
}
.wordmark__i::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.66em;
  width: 0.24em;
  height: 0.24em;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--brand);
}

.wordmark__soft { color: var(--ink-faint); }

/* "by peopleindicator.com" under a product name in a test-taker header. */
.byline-logo { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--t-xs); color: var(--ink-faint); text-decoration: none; }
.byline-logo .logo { height: 13px; }

/* Icon + wordmark together. */
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: var(--ink);
}
.brandmark:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card--flush { padding: 0; overflow: hidden; }

.panel {
  background: var(--paper-sunk);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* A note that needs the reader's attention without alarming them. */
.notice {
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice--warn { border-left-color: var(--alert); background: var(--alert-wash); }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: 0 var(--space-5);
  border: 1px solid var(--brand);
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #ffffff;
  font-family: var(--display);
  font-size: var(--t-base);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #ffffff; }
.btn:disabled, .btn[aria-disabled='true'] {
  background: var(--mist-strong);
  border-color: var(--mist-strong);
  color: var(--paper);
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--mist-strong);
}
.btn--ghost:hover { background: var(--brand-wash); color: var(--brand); border-color: var(--brand); }

.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
  padding: 0 var(--space-3);
}
.btn--quiet:hover { background: var(--paper-sunk); color: var(--ink); border-color: transparent; }

.btn--danger { background: var(--alert); border-color: var(--alert); }
.btn--danger:hover { background: #b53a2f; border-color: #b53a2f; }

.btn--sm { min-height: 34px; padding: 0 var(--space-3); font-size: var(--t-sm); }
.btn--block { width: 100%; }

.field { display: block; margin-bottom: var(--space-4); }

.field > label,
.label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.hint {
  margin-top: var(--space-2);
  font-size: var(--t-sm);
  color: var(--ink-muted);
}

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--mist-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.5;
}
.textarea { min-height: 132px; resize: vertical; padding: var(--space-3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand-wash);
  outline-offset: 0;
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--alert); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2356635f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-6);
}

.error-text { color: var(--alert); font-size: var(--t-sm); margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Status pills
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--paper-sunk);
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pill--ok    { background: var(--brand-wash); color: var(--brand); }
.pill--warn  { background: var(--alert-wash);   color: var(--alert); }
.pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.pill--plain::before { display: none; }

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

.table { font-size: var(--t-sm); }
.table th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--mist);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--mist);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--paper-sunk); }
.table tbody tr:last-child td { border-bottom: 0; }
.table a { text-decoration: none; font-weight: 600; }
.table a:hover { text-decoration: underline; }

.table-wrap { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Empty states — an invitation to act, not an apology.
   -------------------------------------------------------------------------- */

.empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  border: 1px dashed var(--mist-strong);
  border-radius: var(--radius-lg);
  color: var(--ink-muted);
}
.empty h3 { font-size: var(--t-lg); margin-bottom: var(--space-2); color: var(--ink); }

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  font-size: var(--t-sm);
}
.flash--error { border-left-color: var(--alert); background: var(--alert-wash); color: var(--alert); }

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: var(--paper);
  border-radius: var(--radius);
  z-index: 100;
}
.skip:focus { left: var(--space-4); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}