@layer reset, base, components, utilities;

@layer reset {
  :where(html) { -webkit-text-size-adjust: none; text-size-adjust: none; }
  :where(body, h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
  :where(input, select, textarea, button, summary, dialog, fieldset, main, header, .card, .tile, .table-wrap, .button, .badge, .chip, .site-nav a, .tabs a, .back-link, .check) { box-sizing: border-box; }
  :where(input, select, textarea, button) { font: inherit; color: inherit; }
  :where(svg, img) { display: block; max-inline-size: 100%; }
}

@layer base {
  :root {
    --blue-50: #e9eefc; --blue-600: #3656d4; --blue-700: #2a45b3; --blue-300: #93aaff; --blue-950: #18213f;
    --slate-0: #ffffff; --slate-50: #f4f6f9; --slate-100: #eef2f6; --slate-200: #dde3ea; --slate-500: #6f7a8a;
    --slate-600: #586273; --slate-900: #1b2230;
    --night-900: #0f141b; --night-800: #161c25; --night-700: #1e2630; --night-600: #2a3340; --night-400: #5d6878;
    --night-200: #a3adbb; --night-50: #e7ebf1;
    --mouse-ear: #fcd8d9;

    --color-bg: var(--slate-50);
    --color-surface: var(--slate-0);
    --color-surface-subtle: var(--slate-100);
    --color-text: var(--slate-900);
    --color-text-muted: var(--slate-600);
    --color-line: var(--slate-200);
    --color-field-border: var(--slate-500);
    --color-accent: var(--blue-600);
    --color-accent-hover: var(--blue-700);
    --color-accent-text: var(--slate-0);
    --color-accent-soft: var(--blue-50);
    --color-danger: #b42318;
    --color-danger-soft: #fdecea;
    --color-ok: #067647;
    --color-ok-soft: #e7f8ee;
    --color-backdrop: rgb(15 20 27 / .45);
    --shadow-card: 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .06);
    --shadow-raised: 0 4px 8px rgb(16 24 40 / .06), 0 12px 32px rgb(16 24 40 / .12);

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --radius-s: .375rem;
    --radius-m: .5rem;
    --radius-l: .875rem;
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
    --control-size: 2.5rem;
    --page-width: 72rem;
    --duration: .18s;

    color-scheme: light dark;
    accent-color: var(--color-accent);

    @media (prefers-color-scheme: dark) {
      --color-bg: var(--night-900);
      --color-surface: var(--night-800);
      --color-surface-subtle: var(--night-700);
      --color-text: var(--night-50);
      --color-text-muted: var(--night-200);
      --color-line: var(--night-600);
      --color-field-border: var(--night-400);
      --color-accent: var(--blue-300);
      --color-accent-hover: #b4c4ff;
      --color-accent-text: var(--night-900);
      --color-accent-soft: var(--blue-950);
      --color-danger: #ff9b91;
      --color-danger-soft: #3b1f1f;
      --color-ok: #74e0a6;
      --color-ok-soft: #133224;
      --color-backdrop: rgb(0 0 0 / .6);
      --shadow-card: 0 1px 2px rgb(0 0 0 / .3);
      --shadow-raised: 0 12px 32px rgb(0 0 0 / .5);
    }

    /* light-dark() follows the used color-scheme, so a pinned theme (.theme-light/.theme-dark) overrides the system one. */
    @supports (color: light-dark(#000, #fff)) {
      --color-bg: light-dark(var(--slate-50), var(--night-900));
      --color-surface: light-dark(var(--slate-0), var(--night-800));
      --color-surface-subtle: light-dark(var(--slate-100), var(--night-700));
      --color-text: light-dark(var(--slate-900), var(--night-50));
      --color-text-muted: light-dark(var(--slate-600), var(--night-200));
      --color-line: light-dark(var(--slate-200), var(--night-600));
      --color-field-border: light-dark(var(--slate-500), var(--night-400));
      --color-accent: light-dark(var(--blue-600), var(--blue-300));
      --color-accent-hover: light-dark(var(--blue-700), #b4c4ff);
      --color-accent-text: light-dark(var(--slate-0), var(--night-900));
      --color-accent-soft: light-dark(var(--blue-50), var(--blue-950));
      --color-danger: light-dark(#b42318, #ff9b91);
      --color-danger-soft: light-dark(#fdecea, #3b1f1f);
      --color-ok: light-dark(#067647, #74e0a6);
      --color-ok-soft: light-dark(#e7f8ee, #133224);
      --color-backdrop: light-dark(rgb(15 20 27 / .45), rgb(0 0 0 / .6));
      --shadow-card: light-dark(rgb(16 24 40 / .06), rgb(0 0 0 / .3)) 0 1px 3px;
      --shadow-raised: light-dark(rgb(16 24 40 / .12), rgb(0 0 0 / .5)) 0 12px 32px;
    }

    &.theme-light { color-scheme: light; }
    &.theme-dark { color-scheme: dark; }

    @media (pointer: coarse) {
      --control-size: 3rem;
    }

    @media (forced-colors: active) {
      --color-accent: LinkText;
      --color-field-border: CanvasText;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }

  body {
    min-block-size: 100dvh;
    font: 1rem/1.5 var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    overflow-wrap: break-word;
  }

  h1 { font-size: 1.625rem; line-height: 1.25; text-wrap: balance; margin-block-end: var(--space-5); }
  h2 { font-size: 1.125rem; line-height: 1.35; text-wrap: balance; }
  p { text-wrap: pretty; max-inline-size: 75ch; }

  a { color: var(--color-accent); text-underline-offset: .2em; }
  a:hover { color: var(--color-accent-hover); }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  ::selection { background: var(--color-accent-soft); color: var(--color-text); }

  code {
    font-family: var(--font-mono);
    font-size: .95em;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-line);
    padding: .1em .4em;
    border-radius: var(--radius-s);
  }

  ul.plain { list-style: none; padding: 0; }
}

@layer components {
  /* Layout */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    view-transition-name: site-header;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-5);
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-line);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-text);
    text-decoration: none;
    flex-shrink: 0;

    & .logo { inline-size: 2.25rem; block-size: 2.25rem; }
    &:hover { color: var(--color-text); }
  }

  .site-nav {
    flex: 1;
    min-inline-size: 0;

    & ul { display: flex; gap: var(--space-1); list-style: none; padding: 0; }
    & a {
      display: flex;
      align-items: center;
      min-block-size: var(--control-size);
      padding-inline: var(--space-3);
      border-radius: var(--radius-m);
      color: var(--color-text-muted);
      text-decoration: none;
      white-space: nowrap;
      transition: background-color var(--duration), color var(--duration);
    }
    & a:hover { background: var(--color-surface-subtle); color: var(--color-text); }
    & a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
  }

  .user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;

    & > a { color: var(--color-text); text-decoration: none; font-weight: 500; }
  }

  .avatar {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--mouse-ear);
    color: var(--slate-900);
    font-size: .875rem;
    font-weight: 700;
    margin-inline-end: var(--space-2);
  }

  @media (width < 64rem) {
    .user-menu .user-name { position: absolute; clip-path: inset(50%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; }
  }

  @media (width < 56rem) {
    .site-header { flex-wrap: wrap; padding-inline: var(--space-4); }
    .site-nav { order: 3; flex-basis: 100%; }
    .site-nav ul { justify-content: space-between; }
    .site-nav li { flex: 1 1 auto; }
    .site-nav a { justify-content: center; padding-inline: var(--space-2); font-size: .9375rem; }
    .user-menu { margin-inline-start: auto; }
  }

  @media (width < 30rem) {
    .site-nav ul { gap: 0; }
    .site-nav a { display: block; align-content: center; padding-inline: var(--space-1); font-size: .8125rem; line-height: 1.2; text-align: center; white-space: normal; }
    .site-nav .nav-count { display: inline-grid; min-inline-size: 1.25rem; block-size: 1.25rem; font-size: .75rem; vertical-align: .05em; }
  }

  main {
    display: block;
    max-inline-size: var(--page-width);
    margin-inline: auto;
    padding: var(--space-6) var(--space-5) calc(var(--space-6) * 2);

    &:focus { outline: none; }
  }

  .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-5);

    & h1 { margin: 0; }
  }

  :is(.page-head > h2, h2.page-head) { font-size: 1.375rem; }

  :is(h1, .page-head):has(+ .lead) { margin-block-end: var(--space-2); }
  .lead { color: var(--color-text-muted); margin-block-end: var(--space-5); }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--control-size);
    margin-block-end: var(--space-2);
    text-decoration: none;
  }

  .section-title { margin-block: var(--space-6) var(--space-4); }
  h1.section-title { margin-block-start: 0; }

  /* Surfaces */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    margin-block-end: var(--space-5);

    & > h2:first-child { margin-block-end: var(--space-4); }
    & > * + p { margin-block-start: var(--space-3); }
  }

  .card.narrow { max-inline-size: 34rem; }
  .error-card { margin: var(--space-6) auto; text-align: center; & p { margin-inline: auto; } }

  .card.danger-zone {
    border-color: color-mix(in oklab, var(--color-danger) 35%, var(--color-line));
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-4);
    list-style: none;
    padding: 0;
  }

  .tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    block-size: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    padding: var(--space-4) var(--space-5);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration), box-shadow var(--duration), translate var(--duration);

    & strong { font-size: 1.0625rem; }
    & .muted { font-size: .875rem; }

    &:hover {
      color: var(--color-text);
      border-color: var(--color-accent);
      box-shadow: var(--shadow-raised);
      @media (prefers-reduced-motion: no-preference) { translate: 0 -2px; }
    }
  }

  .tile.archived { background: var(--color-surface-subtle); }

  .empty {
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
    padding-block: var(--space-6);
    color: var(--color-text-muted);

    & p { margin-inline: auto; }
  }
  .card > p.empty { padding-block: var(--space-4) var(--space-2); }

  /* Tabs */
  .tabs {
    margin-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-line);

    & ul { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; }
    & a {
      display: flex;
      align-items: center;
      min-block-size: var(--control-size);
      padding-inline: var(--space-4);
      color: var(--color-text-muted);
      text-decoration: none;
      white-space: nowrap;
      border-block-end: 2px solid transparent;
      margin-block-end: -1px;
    }
    & a:hover { color: var(--color-text); }
    & a[aria-current="page"] { color: var(--color-text); font-weight: 600; border-block-end-color: var(--color-accent); }

    @media (width < 30rem) {
      & ul { gap: 0; }
      & li { flex: 1 1 auto; }
      & a { justify-content: center; padding-inline: var(--space-2); }
    }
  }

  /* Tables */
  .table-wrap { overflow-x: auto; margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); }

  table { inline-size: 100%; border-collapse: collapse; }
  th, td { text-align: start; padding: var(--space-3) var(--space-2); vertical-align: middle; }
  tr:not(:last-child) > :is(th, td), thead th { border-block-end: 1px solid var(--color-line); }
  thead th { color: var(--color-text-muted); font-weight: 500; font-size: .8125rem; text-wrap: balance; }
  tbody tr:hover { background: var(--color-surface-subtle); }
  td.actions { text-align: end; white-space: nowrap; }
  :is(th, td).num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }

  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;

    & strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
    & .muted { font-size: .875rem; }
  }
  .grid:has(> .stat) { margin-block-end: var(--space-5); }

  .chart { position: relative; block-size: 16rem; }

  table.details th { color: var(--color-text-muted); font-weight: 500; inline-size: 9rem; }

  /* Buttons */
  button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--control-size);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration), border-color var(--duration);

    &:hover:not(:disabled) { background: var(--color-accent-hover); color: var(--color-accent-text); }
    &:disabled { opacity: .6; cursor: progress; }
  }

  :is(button, .button).secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-line);

    &:hover:not(:disabled) { background: var(--color-surface-subtle); color: var(--color-text); }
  }

  :is(button, .button).danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);

    &:hover:not(:disabled) { background: var(--color-danger); color: var(--color-surface); }
  }

  :is(button, .button).small { min-block-size: 2rem; padding-block: var(--space-1); padding-inline: var(--space-3); font-size: .875rem; }

  /* Forms */
  .stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .stack > button { align-self: flex-start; }
  .stack.full > button { align-self: stretch; }

  .field { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
  .field > label, fieldset > legend { font-weight: 500; font-size: .9375rem; }
  .hint { color: var(--color-text-muted); font-size: .875rem; }

  input:not([type="checkbox"], [type="radio"]), select, textarea {
    inline-size: 100%;
    min-block-size: var(--control-size);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-m);
    font-size: 1rem;

    &:user-invalid { border-color: var(--color-danger); }
  }

  textarea { min-block-size: 6rem; resize: vertical; field-sizing: content; }

  .row input:not([type="checkbox"]), .row select { inline-size: auto; flex: 1 1 14rem; }

  input[type="checkbox"] { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; }

  .check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--control-size);
    cursor: pointer;
  }

  fieldset {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-m);
    padding: var(--space-2) var(--space-3);
    margin: 0;
    min-inline-size: 0;

    & legend { padding-inline: var(--space-1); }
  }

  .checklist {
    max-block-size: 14rem;
    overflow-y: auto;
    list-style: none;
    padding: 0;

    & .check { min-block-size: 2.25rem; }
  }

  .multiselect {
    position: relative;
    flex: 1 1 18rem;
    min-inline-size: 0;

    & > summary {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      min-block-size: var(--control-size);
      padding: var(--space-2) var(--space-3);
      background: var(--color-surface);
      border: 1px solid var(--color-field-border);
      border-radius: var(--radius-m);
      cursor: pointer;
      list-style: none;

      & > [data-multiselect-label] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      &::-webkit-details-marker { display: none; }
      &::after {
        content: "";
        inline-size: .5rem;
        block-size: .5rem;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        rotate: 45deg;
        translate: 0 -2px;
        opacity: .7;
      }
    }
    &[open] > summary::after { rotate: -135deg; translate: 0 2px; }
  }

  .multiselect-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-start: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    inline-size: max(100%, min(36rem, 90vw));
    max-block-size: min(28rem, 70dvh);
    overflow-y: auto;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-raised);

    & fieldset { display: flex; flex-direction: column; }
    & fieldset .check:not(legend .check) { min-block-size: 2.25rem; padding-inline-start: var(--space-4); }
    & [hidden] { display: none; }
    & input[type="search"] { flex: none; inline-size: 100%; }
  }

  .multiselect-actions {
    position: sticky;
    inset-block-end: calc(var(--space-3) * -1);
    justify-content: flex-end;
    margin: 0 calc(var(--space-3) * -1) calc(var(--space-3) * -1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-line);
  }

  .password-field {
    position: relative;

    & input { padding-inline-end: 6.5rem; }
    & button {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      margin: var(--space-1);
      min-block-size: auto;
    }
  }

  /* Feedback */
  .flash {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border: 1px solid currentColor;
    border-radius: var(--radius-m);
    margin-block-end: var(--space-5);

    &.ok { background: var(--color-ok-soft); color: var(--color-ok); }
    &.err { background: var(--color-danger-soft); color: var(--color-danger); }
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: .125rem .625rem;
    border-radius: 999px;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-line);
    color: var(--color-text-muted);
    font-size: .8125rem;
    font-weight: 500;
    vertical-align: middle;

    &.ok { background: var(--color-ok-soft); color: var(--color-ok); border-color: transparent; }
    &.accent { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
  }

  /* Dialog */
  dialog {
    inline-size: min(34rem, 100% - 2rem);
    max-block-size: min(90dvh, 48rem);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-l);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-raised);
    opacity: 0;
    scale: .96;
    transition-property: opacity, scale, display, overlay;
    transition-duration: var(--duration);
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;

    & > h2 { margin-block-end: var(--space-4); font-size: 1.25rem; }
  }

  dialog[open] {
    opacity: 1;
    scale: 1;

    @starting-style { opacity: 0; scale: .96; }
  }

  dialog::backdrop {
    background-color: transparent;
    transition: display var(--duration) allow-discrete, overlay var(--duration) allow-discrete, background-color var(--duration);
  }

  dialog[open]::backdrop {
    background-color: var(--color-backdrop);

    @starting-style { background-color: transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog { scale: 1; }
    @starting-style { dialog[open] { scale: 1; } }
  }

  /* Auth */
  .auth {
    display: grid;
    place-items: center;
    min-block-size: calc(100dvh - var(--space-6) * 3);

    & .card { inline-size: min(24rem, 100%); padding: var(--space-6); margin: 0; }
    & .logo { inline-size: 5.5rem; block-size: 5.5rem; margin: 0 auto var(--space-3); }
    & h1 { text-align: center; margin-block-end: var(--space-5); }
  }
}

@layer utilities {
  .row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .muted { color: var(--color-text-muted); }
  .small { font-size: .8125rem; }
  .mt { margin-block-start: var(--space-4); }
  form.inline { display: inline; }

  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .skip-link:focus-visible {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-raised);
  }
}