@layer base, components, stellar, theme, variants;

@view-transition {
  navigation: auto;
}

@font-face {
  font-family: 'lexend';
  src: url('/static/fonts/lexend-regular-latin.woff2');
}

@font-face {
  font-family: 'tt2020';
  src: url('/static/fonts/tt2020-style-e-regular.woff2');
}

@font-face {
  font-family: 'life-savers-bold';
  font-style: normal;
  font-weight: 700;
  src: url('/static/fonts/life-savers-700.woff2');
  font-display: swap;
}

@layer stellar {
  :root {
    interpolate-size: allow-keywords;
    --accent: transparent;
    --sidebar-w: 200px;
    --sidebarc-w: 45px;
    --ar-square: var(--aspect-ratio-square);
    /* borders */
    --border-style: solid;
    --bd-rd0: var(--border-radius-0);
    --bd-rd1: var(--border-radius-1);
    --bd-rd2: var(--border-radius-2);
    --border-circle: 100%;
    --bd-circle: 100%;
    --bd-pill: 9999px;
    /* fonts */
    --fnt-lex: 'lexend', 'sans-serif';
    --fnt-typ: 'tt2020', 'serif';
    --ff-type: 'tt2020', 'serif';
    --ff-ls: 'life-savers-bold', 'serif';
    --fnt-xsm: var(--font-size--2);
    --fnt-sm: var(--font-size--1);
    --fnt-md: var(--font-size-0);
    --fnt-lg: var(--font-size-1);
    --fnt-xl: var(--font-size-2);
    --fnt-2xl: var(--font-size-3);
    --fnt-3xl: var(--font-size-5);
    /* colors */
    --clr-p4: var(--primary-4);
    --clr-p4o: var(--primary-4-on);
    --clr-p4d: var(--primary-4-dim);
    --clr-p5: var(--primary-5);
    --clr-p5o: var(--primary-5-on);
    --clr-p5d: var(--primary-5-dim);
    --clr-p6: var(--primary-6);
    --clr-p6o: var(--primary-6-on);
    --clr-p6d: var(--primary-6-dim);
    --clr-n1: var(--neutral-1);
    --clr-n1o: var(--neutral-1-on);
    --clr-n1d: var(--neutral-1-dim);
    --clr-n2: var(--neutral-2);
    --clr-n2o: var(--neutral-2-on);
    --clr-n2d: var(--neutral-2-dim);
    --clr-n3: var(--neutral-3);
    --clr-n3o: var(--neutral-3-on);
    --clr-n3d: var(--neutral-3-dim);
    --clr-n4: var(--neutral-4);
    --clr-n4o: var(--neutral-4-on);
    --clr-n4d: var(--neutral-4-dim);
    --clr-n5: var(--neutral-5);
    --clr-n5o: var(--neutral-5-on);
    --clr-n5d: var(--neutral-5-dim);
  }
}

@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  :root {
    /* TemplUI popover theme for neo-popover */
    --neo-popover-bg: var(--neutral-4);
    --neo-popover-color: var(--neutral-4-on);
    --neo-popover-border-color: var(--neutral-4-dim);
    --neo-popover-border-width: 1px;
    --neo-popover-radius: 0.5rem; /* rounded-lg */
    --neo-popover-padding: 0.4rem; /* default tailwind p-4 */
    --neo-popover-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --neo-popover-max-width: 24rem;
    --neo-popover-z-index: 1000;
    --neo-popover-enter-duration: 150ms; /* duration-150 */
    --neo-popover-screen-offset: 1rem; /* gives (100vw - 2rem) */
  }

  /* High contrast (unchanged) */
  @media (prefers-contrast: more) {
    :root {
      --neo-popover-border-color: currentColor;
      --neo-popover-border-width: 2px;
    }
  }

  :root[data-pref-contrast-more] {
    --neo-popover-border-color: currentColor;
    --neo-popover-border-width: 2px;
  }

  /* The pre‑hydration guard must stay – it prevents flash‑of‑unstyled before the bundle loads */
  neo-popover:not(:defined) > [data-neo-popover-content] {
    display: none;
  }

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    display: none;
  }

  table {
    text-indent: 0;
    border-color: inherit;
  }

  ol,
  ul,
  menu {
    list-style: none;
  }

  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    border-radius: 0;
  }

  text-area {
    resize: vertical;
  }

  html {
    scroll-behavior: smooth;
  }
}

@layer theme {
  :root {
    --background:
      linear-gradient(
        145deg,
        color-mix(in oklab, var(--primary-7) 16%, transparent),
        transparent 32%
      ),
      linear-gradient(
        225deg,
        color-mix(in oklab, var(--secondary-6) 16%, transparent),
        transparent 32%
      ),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--neutral-2) 64%, var(--neutral-1)),
        var(--neutral-1) 50%
      ),
      var(--neutral-1);
  }
}

.bg-muted {
  background-color: var(--neutral-4);
}

.tabs-list {
  a[data-tab-active] {
    color: var(--primary-4-on);
    background-color: var(--primary-4);
    border-color: var(--primary-4-dim);
    border-width: 1px;
    border-style: solid;
  }

  a:not([data-tab-active]) {
    color: var(--neutral-3-on);
    background-color: var(--neutral-3);
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    &:hover {
      color: var(--primary-3-on);
      background-color: var(--primary-3);
    }
  }
}

.border-input {
  border-style: solid;
  border-color: var(--neutral-4-dim);
  border-width: 1px;
}

@layer utilities {
  :root {
    html {
      min-width: var(--viewport-min);
      height: 100dvh;
    }
  }
}

body {
  height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--clr-n3o);
  font-family: var(--fnt-lex);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--background);

  > header {
    color: var(--clr-n2o);
    background-color: var(--clr-n2);
    width: 100%;
    height: 6rem;
    align-items: center;
    display: flex;
    gap: var(--size-2);
    flex-direction: row;
    padding-left: var(--size-4);
  }

  main {
    width: 100%;
    overflow-y: auto;
    padding: var(--size-2);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

span.badge-same {
  background-color: var(--color-info);
  color: var(--color-info-content);
}

span.badge-updated {
  background-color: var(--color-warning);
  color: var(--color-warning-content);
}

span.badge-new {
  background-color: var(--color-success);
  color: var(--color-success-content);
}

span.badge-absent {
  background-color: var(--color-error);
  color: var(--color-error-content);
}

span.span-updated {
  color: var(--color-warning);
}

span.span-new {
  color: var(--color-success);
}

span.span-absent {
  color: var(--color-error);
}

table.data-table {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--neutral-4-dim);
  border-radius: var(--border-radius-0);
  overflow: hidden;
  min-width: 320px;
  thead {
    background-color: var(--neutral-3);
  }
  tr {
    th {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    td {
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: var(--neutral-4-dim);
    }
  }
}

a {
  text-decoration: none;
  color: inherit;
}

fieldset {
  gap: clamp(1.2rem, var(--size-4), var(--size-5));
  background: linear-gradient(
    to bottom right,
    var(--neutral-4),
    var(--neutral-3)
  );
  border-style: solid;
  border-width: var(--border-width-0);
  border-radius: var(--border-radius-3);
  padding: var(--size-4);
  padding-top: var(--size-0);
}

form.seek-form {
  gap: var(--size-4);
  color: var(--neutral-3-on);

  hgroup p {
    color: color-mix(in oklch, currentColor 90%, black 10%);
    font-size: var(--font-size--1);
  }

  fieldset {
    gap: clamp(1.2rem, var(--size-4), var(--size-5));
    background: linear-gradient(
      to bottom right,
      var(--neutral-4),
      var(--neutral-3)
    );
    border-style: solid;
    border-width: var(--border-width-0);
    border-radius: var(--border-radius-3);
    padding: var(--size-4);
    padding-top: var(--size-0);
  }

  footer {
    display: flex;
    gap: var(--size-3);
    padding-left: var(--size-4);
    padding-right: var(--size-4);

    button {
      flex-grow: 1;
    }
  }
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--ff-ls);
}

h1 {
  font-size: var(--font-size-4);
  line-height: var(--font-line-height-4);
}

h2 {
  font-size: var(--font-size-3);
  line-height: var(--font-line-height-3);
}

h3 {
  font-size: var(--font-size-2);
  line-height: var(--font-line-height-2);
}

h4 {
  font-size: var(--font-size-1);
  line-height: var(--font-line-height-1);
}

table {
  background-color: transparent;
  color: var(--neutral-3-on);
}

/* dots */
.dots::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  pointer-events: none;
}

.bg-linear-23 {
  background:
    linear-gradient(
      190deg,
      color-mix(in oklch, var(--accent), transparent 80%),
      transparent 20%
    ),
    linear-gradient(to bottom right, var(--neutral-2), var(--neutral-3) 75%);
}

.accent-blue {
  --accent: var(--gruvbox-blue-faded-0);
}

.accent-green {
  --accent: var(--gruvbox-green-faded-0);
}

.accent-red {
  --accent: var(--gruvbox-red-faded-0);
}

.accent-yellow {
  --accent: var(--gruvbox-yellow-faded-0);
}

.shadow-blue {
  box-shadow:
    inset 0 4px 8px
      color-mix(in oklch, var(--gruvbox-blue-faded-2), transparent 60%),
    inset 0 -4px 8px rgba(0, 0, 0, 0.05);
}

/* button variant styles */

button[data-variant='success'],
a[data-variant='success'] {
  font-weight: bold;
  background-color: var(--gruvbox-green-bright-2);
  color: var(--gruvbox-green-bright-2-on);
  &:hover {
    background-color: var(--gruvbox-green-bright-3);
  }
  &:active {
    background-color: var(--gruvbox-green-bright-4);
  }
}

button[data-variant='info'],
a[data-variant='info'] {
  font-weight: bold;
  background-color: var(--gruvbox-blue-bright-2);
  color: var(--gruvbox-blue-bright-2-on);
}

/* toast styles */

[data-tui-toast][data-variant='error'] {
  div {
    --accent: var(--gruvbox-red-faded-0);
  }
}

[data-tui-toast][data-variant='success'] {
  div {
    --accent: var(--gruvbox-green-bright-0);
  }
}

[data-tui-toast][data-variant='info'] {
  div {
    --accent: var(--gruvbox-blue-faded-0);
  }
}

[data-tui-toast][data-variant='warning'] {
  div {
    --accent: var(--gruvbox-yellow-faded-0);
  }
}

.bg-linear-3-4 {
  background:
    linear-gradient(
      to bottom right,
      color-mix(in oklch, var(--accent), transparent 80%),
      transparent 25%
    ),
    linear-gradient(to bottom, var(--neutral-3), var(--neutral-4) 75%);
}

.bg-linear-2 {
  background: linear-gradient(
    to bottom right,
    var(--neutral-6),
    var(--neutral-5) 75%
  );
}

/* period card styles */

div[data-color='default'] {
  background: linear-gradient(
    to bottom right,
    var(--neutral-3),
    var(--neutral-4) 75%
  );
  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: var(--anim-ease-pulse);
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  100% {
    opacity: var(--anim-opacity-muted);
  }
}

div[data-color='red'],
li[data-color='red'] {
  background-color: var(--gruvbox-red-faded-0);
}

div[data-color='orange'],
li[data-color='orange'] {
  background-color: var(--gruvbox-orange-faded-0);
}

div[data-color='yellow'],
li[data-color='yellow'] {
  background-color: var(--gruvbox-yellow-faded-0);
}

div[data-color='green'],
li[data-color='green'] {
  background-color: var(--gruvbox-green-faded-0);
}

div[data-color='aqua'],
li[data-color='aqua'] {
  background-color: var(--gruvbox-aqua-faded-0);
}

div[data-color='blue'],
li[data-color='blue'] {
  background-color: var(--gruvbox-blue-faded-0);
}

div[data-color='purple'],
li[data-color='purple'] {
  background-color: var(--gruvbox-purple-faded-0);
}

div[data-service='reading'] {
  box-shadow: inset 4px 0 0 var(--gruvbox-red-neutral-0);
}

div[data-service='writing'] {
  box-shadow: inset 4px 0 0 var(--gruvbox-orange-neutral-0);
}

div[data-service='OT'],
div[data-service='SW'] {
  box-shadow: inset 4px 0 0 var(--gruvbox-yellow-neutral-0);
}

div[data-service='EF'] {
  box-shadow: inset 4px 0 0 var(--gruvbox-green-neutral-0);
}

div[data-service='speech'] {
  box-shadow: inset 4px 0 0 var(--gruvbox-aqua-neutral-0);
}

div[data-service='math'] {
  box-shadow: inset 4px 0 0 var(--gruvbox-blue-neutral-0);
}

div[data-service='SEL'] {
  box-shadow: inset 4px 0 0 var(--gruvbox-purple-neutral-0);
}

span[data-service='reading'] {
  background-color: var(--gruvbox-red-faded-0);
}

span[data-service='writing'] {
  background-color: var(--gruvbox-orange-faded-0);
}

span[data-service='EF'] {
  background-color: var(--gruvbox-green-faded-0);
}

span[data-service='math'] {
  background-color: var(--gruvbox-blue-faded-0);
}

span[data-service='SEL'] {
  background-color: var(--gruvbox-purple-faded-0);
}

span[data-service='speech'] {
  background-color: var(--gruvbox-aqua-faded-0);
}

span[data-service='OT'] {
  background-color: var(--gruvbox-yellow-faded-0);
}

.button-group {
  & button {
    width: 100%;
  }

  & button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  & button:not(:last-child) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.fluid-size-6 {
  width: var(--size-6);
  height: var(--size-6);
}