/* ==========================================================================
   lise.css — the whole admin UI's stylesheet. One file, hand written.

   No framework, no reset library, no icon font, no @import, no web font:
   §4 and §13 allow one CSS file and nothing that arrives over a network we do
   not control. Colours are declared as tokens once and re-declared once for a
   dark colour scheme; every pair below was checked to at least 4.5:1 against
   the surface it sits on, and no state anywhere is signalled by colour alone —
   every pill, every notice and every warning carries a word as well.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  --paper:        #f6f5f2;
  --surface:      #ffffff;
  --surface-2:    #fbfaf8;
  --ink:          #16191c;
  --ink-2:        #4b545c;
  --line:         #dcd9d2;
  --line-strong:  #b9b4aa;

  --accent:       #0f4f5e;
  --accent-hover: #0b3d49;
  --accent-ink:   #ffffff;
  --accent-weak:  #e6eff1;
  --link:         #0d5566;

  --danger:       #8a2b23;
  --danger-hover: #6f221b;
  --danger-ink:   #ffffff;
  --danger-weak:  #fbeceb;
  --danger-text:  #7a2620;

  --warn-weak:    #fdf3e0;
  --warn-text:    #6f4600;
  --warn-line:    #d8b878;

  --ok-weak:      #e7f3ec;
  --ok-text:      #14532d;
  --ok-line:      #9cc4ac;

  --info-weak:    #eaf0f4;
  --info-text:    #1d3d52;
  --info-line:    #a9bfd0;

  --focus:        #1f6f80;

  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 1px 2px rgba(20, 24, 28, .06), 0 1px 6px rgba(20, 24, 28, .04);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #101315;
    --surface:      #191d20;
    --surface-2:    #1f2427;
    --ink:          #e9ecee;
    --ink-2:        #aab3b9;
    --line:         #2d3438;
    --line-strong:  #444d52;

    --accent:       #7fd4e8;
    --accent-hover: #a4e2f1;
    --accent-ink:   #08262e;
    --accent-weak:  #14343c;
    --link:         #86d7ea;

    --danger:       #e2867c;
    --danger-hover: #efa89f;
    --danger-ink:   #2c0d0a;
    --danger-weak:  #341916;
    --danger-text:  #f0a99f;

    --warn-weak:    #33280f;
    --warn-text:    #f2cf8a;
    --warn-line:    #6b5426;

    --ok-weak:      #172f22;
    --ok-text:      #a5d7b8;
    --ok-line:      #33604a;

    --info-weak:    #182833;
    --info-text:    #b6cfe0;
    --info-line:    #375061;

    --focus:        #7fd4e8;
    --shadow:       0 1px 2px rgba(0, 0, 0, .4);
  }
}

/* ── base ───────────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  text-underline-offset: 2px;
}

h1, h2, h3 { line-height: 1.25; font-weight: 620; letter-spacing: -.01em; margin: 0 0 .5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

p, ul, ol, dl, table, form { margin: 0 0 1rem; }
p:last-child, ul:last-child, dl:last-child, form:last-child, table:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

code, .mono { font-family: var(--mono); font-size: .92em; }

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

/* Only removes the ring for the programmatic focus that the skip link moves to
   <main>; every interactive element keeps its ring. */
main:focus { outline: none; }

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

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--surface);
  color: var(--ink);
  padding: .7rem 1rem;
  border: 2px solid var(--focus);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skiplink:focus { left: 0; }

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

/* ── top bar ────────────────────────────────────────────────────────────── */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding-block: .75rem;
}

.brand {
  margin: 0;
  font-weight: 680;
  font-size: 1.1rem;
  letter-spacing: .01em;
}
.brand a { color: var(--ink); text-decoration: none; }
.brand a:hover { text-decoration: underline; }

.envtag {
  margin-left: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .1rem .45rem;
  border: 1px dashed var(--warn-line);
  border-radius: 999px;
  background: var(--warn-weak);
  color: var(--warn-text);
  white-space: nowrap;
}

.mainnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mainnav a {
  display: inline-block;
  padding: .2rem 0;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.mainnav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 620;
  border-bottom-color: var(--accent);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}
.logout { margin: 0; }

/* ── language switcher ──────────────────────────────────────────────────── */

.lang {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .85rem;
}
.lang__label { color: var(--ink-2); }
.lang__opts {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
}
.lang__opt {
  appearance: none;
  background: var(--surface);
  color: var(--link);
  border: 0;
  font: inherit;
  padding: .2rem .6rem;
  cursor: pointer;
  text-decoration: none;
}
.lang__opt + .lang__opt { border-left: 1px solid var(--line-strong); }
.lang__opt:hover { background: var(--accent-weak); }
.lang__opt.is-current {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 620;
  cursor: default;
}

/* ── page skeleton ──────────────────────────────────────────────────────── */

.page { padding-block: 2rem 3rem; }
.page > * + * { margin-top: 1.5rem; }

.onecol { max-width: 38rem; }

.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.pagehead h1 { margin: 0; }
.pagehead p { margin: 0; }

.crumb { margin: 0; font-size: .9rem; }
.lede { font-size: 1.05rem; color: var(--ink-2); max-width: 46rem; }
.muted { color: var(--ink-2); }
.empty { color: var(--ink-2); font-style: italic; }
.question { font-weight: 620; max-width: 46rem; }
.hint { color: var(--ink-2); font-size: .9rem; margin: .3rem 0 0; max-width: 46rem; }

.sitefoot {
  border-top: 1px solid var(--line);
  padding-block: 1.25rem;
  color: var(--ink-2);
  font-size: .85rem;
}
.sitefoot p { margin: 0; }

/* ── cards and sections ─────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.card > * + * { margin-top: 1rem; }
.card h2 { margin: 0; }
.card h3 { margin: 0; }
.card--warn { border-left: 4px solid var(--warn-line); }

fieldset.card { border: 1px solid var(--line); }
fieldset.card > legend {
  font-weight: 620;
  padding-inline: .4rem;
  margin-inline-start: -.4rem;
}

/* ── statistics tiles ───────────────────────────────────────────────────── */

.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.stat__label { color: var(--ink-2); font-size: .9rem; }
.stat__value {
  font-size: 2rem;
  font-weight: 640;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ── tables ─────────────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.table th, .table td {
  text-align: left;
  padding: .6rem .75rem;
  vertical-align: top;
}
.table thead th {
  font-size: .82rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 2px solid var(--line-strong);
  white-space: nowrap;
}
.table tbody tr + tr { border-top: 1px solid var(--line); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody th { font-weight: 600; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table--form td { vertical-align: middle; }
.table--form input[type="text"] { max-width: 18rem; }

/* ── definition lists ───────────────────────────────────────────────────── */

.deflist {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: .4rem 1rem;
  margin: 0;
}
.deflist dt { color: var(--ink-2); }
.deflist dd { margin: 0; }

@media (max-width: 34rem) {
  .deflist { grid-template-columns: 1fr; gap: .1rem; }
  .deflist dd { margin-bottom: .6rem; }
}

/* ── row cards (assigned apps, and anything with its own actions) ───────── */

.rowcards { list-style: none; margin: 0; padding: 0; }
.rowcard {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: .9rem 0;
}
.rowcard + .rowcard { border-top: 1px solid var(--line); }
.rowcard__main { flex: 1 1 20rem; }
.rowcard__main p { margin: 0; }
.rowcard__main p + p { margin-top: .2rem; }
.rowcard__title { font-weight: 600; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.rowcard__aside { flex: 0 1 auto; }

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { padding: .35rem 0; display: flex; gap: .6rem; align-items: baseline; }
.linklist li + li { border-top: 1px solid var(--line); }

.bullets { margin: 0 0 1rem 1.1rem; padding: 0; }
.bullets li + li { margin-top: .35rem; }

/* ── status pills ───────────────────────────────────────────────────────── */

.pill {
  display: inline-block;
  font-size: .8rem;
  font-weight: 620;
  line-height: 1.4;
  padding: .1rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--active    { background: var(--ok-weak);   color: var(--ok-text);   border: 1px solid var(--ok-line); }
.pill--suspended { background: var(--warn-weak); color: var(--warn-text); border: 1px dashed var(--warn-line); }

.warnmark {
  display: inline-block;
  margin-left: .4rem;
  font-size: .8rem;
  font-weight: 620;
  color: var(--warn-text);
  background: var(--warn-weak);
  border: 1px dashed var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 0 .4rem;
}

.stale { color: var(--danger-text); font-weight: 600; }

/* ── notices ────────────────────────────────────────────────────────────── */

.notice {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
}
.notice p { margin: 0; }
.notice p + p, .notice ul { margin-top: .35rem; }
.notice__label { font-weight: 640; }
.notice ul { margin-bottom: 0; padding-left: 1.1rem; }

.notice--success { background: var(--ok-weak);     color: var(--ok-text);     border-color: var(--ok-line); }
.notice--error   { background: var(--danger-weak); color: var(--danger-text); border-color: var(--danger); }
.notice--warn    { background: var(--warn-weak);   color: var(--warn-text);   border-color: var(--warn-line); }
.notice--info    { background: var(--info-weak);   color: var(--info-text);   border-color: var(--info-line); }
.notice--success a, .notice--error a, .notice--warn a, .notice--info a { color: inherit; }

/* ── forms ──────────────────────────────────────────────────────────────── */

.stack > * + * { margin-top: 1.25rem; }
.stack--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.stack--inline > * + * { margin-top: 0; }

.field { display: block; }
.field > label,
.choice > label { font-weight: 600; }
.field > label { display: block; margin-bottom: .3rem; }

input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  width: 100%;
  max-width: 32rem;
}
textarea { max-width: 46rem; resize: vertical; font-family: var(--mono); font-size: .92rem; }
select { max-width: 24rem; }

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

input[type="checkbox"], input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: .25rem 0 0;
  accent-color: var(--accent);
}

.choices > * + * { margin-top: .75rem; }
.choice {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: .1rem .6rem;
  align-items: start;
  max-width: 46rem;
}
.choice > label { font-weight: 500; }
.choice__title { display: block; font-weight: 620; }
.choice__note { display: block; color: var(--ink-2); font-size: .92rem; }

.fielderror {
  margin: .35rem 0 0;
  color: var(--danger-text);
  font-weight: 600;
  font-size: .92rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  padding: .55rem .95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-2); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--danger-ink);
}
.btn--danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

.btn--quiet { background: transparent; }
.btn--quiet:hover { background: var(--surface-2); }

.btn--wide { width: 100%; max-width: 24rem; }

.btn.is-disabled {
  color: var(--ink-2);
  border-color: var(--line);
  background: transparent;
  cursor: default;
}

/* ── confirmation disclosures (§13.5, §13.6 shape) ──────────────────────── */
/* A <details> rather than a <dialog>: it is keyboard-reachable with no script
   at all, and the admin plane's CSP forbids inline script. */

.confirm { max-width: 46rem; }
.confirm > summary {
  display: inline-flex;
  list-style: none;
  width: auto;
}
.confirm > summary::-webkit-details-marker { display: none; }
.confirm[open] > summary { margin-bottom: .9rem; }

.confirm__body {
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--danger-weak);
  color: var(--danger-text);
  padding: 1rem 1.1rem;
}
.confirm__body h3 { margin: 0 0 .6rem; color: inherit; }
.confirm__body a { color: inherit; }

details.help > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--link);
  width: fit-content;
}
details.help[open] > summary { margin-bottom: .6rem; }

/* ── pagination ─────────────────────────────────────────────────────────── */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.pager p { margin: 0; }
.pager__range { color: var(--ink-2); font-size: .9rem; }
.pager__links { display: flex; gap: .5rem; }

.pager__jump {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .9rem;
}
.pager__jump label { color: var(--ink-2); }
.pager__jump input { width: 6rem; padding: .35rem .5rem; }

/* ── print: the audit table and an org page are the two things anyone prints ─ */

@media print {
  .topbar__right, .mainnav, .skiplink, .actions, .confirm, .pager__links { display: none; }
  body { background: #fff; color: #000; }
  .card, .stat { box-shadow: none; border-color: #999; }
  a { color: #000; }
}

/* ── the hosted end-user pages (§7) ─────────────────────────────────────────
   web/templates/public_*.html. Everything here is scoped under .publicflow, so
   the admin plane is untouched; the tokens, the card, the field, the notice and
   the button are all the ones above, because these pages have to look like the
   same product and there is only ever one stylesheet (§13, §4).

   One narrow column, one question per page, and a target big enough for a thumb
   on a phone held in one hand — which is where most of these sign-ins happen. */

.publicflow { --publiccol: 32rem; }

/* The chrome's own switcher is a plain ?lang= link on .Path (layout.html). Five
   of the seven hosted pages are the answer to a POST, where that link is a 405
   or a restarted flow, so those pages carry their own switcher inside <main> —
   a form that keeps the pending auth_requests handle in a hidden field. Two
   switchers on one page, one of them a trap, is worse than one. */
body:has(.publicflow) .topbar__right .lang { display: none; }

.publicflow__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  max-width: var(--publiccol);
  margin: 0 auto 1.5rem;
}
.publicflow__bar .lang { margin-left: auto; }
.publicflow__app { margin: 0; color: var(--ink-2); }

.publiccol { max-width: var(--publiccol); margin-inline: auto; }
.publiccol > * + * { margin-top: 1.25rem; }
.publiccol h1 { font-size: 1.5rem; }
.publiccol .lede { font-size: 1rem; }

/* The secondary action under the card: "Skicka en ny kod", "Hoppa över". */
.publicflow__aside { margin: 0; text-align: center; }

.publicflow__note {
  max-width: var(--publiccol);
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .9rem;
}
.publicflow__note p { margin: 0; }
.publicflow__note p + p { margin-top: .35rem; }

/* Thumb-sized targets, and a full-width primary button in a 32rem column. */
.publicflow .btn { min-height: 2.9rem; }
.publicflow .btn--wide { max-width: none; }

/* The six digits. Monospaced and spaced out so a mistyped code is visible
   before it is submitted; text-indent puts the trailing letter-space back so
   the digits sit centred rather than half a space to the left. */
.codeinput {
  max-width: 12rem;
  padding: .55rem .5rem;
  font-family: var(--mono);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5em;
  text-indent: .5em;
  text-align: center;
}

.orgpicker { list-style: none; margin: 0; padding: 0; }
.orgpicker li + li { margin-top: .6rem; }