/* ============================================================================
   base.css — Tailwind token registration (theme-independent)
   ----------------------------------------------------------------------------
   The @theme block below registers our semantic tokens with Tailwind so it
   emits themed utilities (bg-surface, text-content, text-content-muted,
   border-line-more, bg-primary-bold, shadow-lg, …).
   ============================================================================ */

@theme inline {
  --color-primary: var(--primary);
  --color-primary-soft: var(--primary-soft);
  --color-primary-bold: var(--primary-bold);
  --color-primary-content: var(--primary-content);

  --color-secondary: var(--secondary);
  --color-secondary-soft: var(--secondary-soft);
  --color-secondary-bold: var(--secondary-bold);
  --color-secondary-content: var(--secondary-content);

  --color-success: var(--success);
  --color-success-content: var(--success-content);
  --color-warning: var(--warning);
  --color-warning-content: var(--warning-content);
  --color-error: var(--error);
  --color-error-content: var(--error-content);

  --color-backdrop: var(--backdrop);
  --color-surface: var(--surface);
  --color-surface-more: var(--surface-more);
  --color-surface-less: var(--surface-less);

  --color-content: var(--content);
  --color-content-muted: var(--content-muted);
  --color-content-subtle: var(--content-subtle);

  --color-line: var(--line);
  --color-line-more: var(--line-more);
  --color-line-less: var(--line-less);

  --shadow: 6px 6px 0 color-mix(in srgb, var(--primary) 12%, transparent);
  --shadow-sm: 4px 4px 0 color-mix(in srgb, var(--primary) 10%, transparent);
  --shadow-lg: 8px 8px 0 color-mix(in srgb, var(--primary) 15%, transparent);
  --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
  --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);

  --border-thin: 1px;
  --border-thick: 1px;

  --font-body: "Lato", sans-serif;
  --font-heading: "Lato", sans-serif;
  --font-fancy: "Lato", sans-serif;
}

:root {
  --sait: var(--safe-area-inset-top, env(safe-area-inset-top));
  --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
  --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
  --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
  --mobile-nav-height: 3.5rem;

  text-size-adjust: 100%;
  font-size: 110%;
}

@layer base {
  body {
    @apply text-content font-body bg-surface-less;
  }

  h1,
  h2,
  h3,
  h4 {
    @apply font-heading font-bold;
  }

  button {
    @apply cursor-pointer text-left;
  }

  input:focus,
  textarea:focus,
  select:focus,
  [contenteditable]:focus {
    @apply outline-none;
  }
}

/* ----------------------------------------------------------------------------
   Layout helpers
   ---------------------------------------------------------------------------- */

@utility heading {
  @apply font-heading text-center text-2xl font-bold;
}
@utility subheading {
  @apply font-heading text-center text-xl font-bold;
}
@utility superheading {
  @apply font-heading text-center text-4xl font-extrabold;
}
/* Applied by Cv.svelte, which pairs it with the observer that paints ahead of a fast scroll.
   Nothing else should reach for it. */
@utility cv {
  content-visibility: auto;
  contain-intrinsic-size: auto 16rem;
}
/* The wash is an inset shadow because a row's hover rule sets a background that would cover it. */
@utility highlight-target {
  box-shadow:
    inset 3px 0 0 var(--primary),
    inset 0 0 0 9999px color-mix(in srgb, var(--primary) 16%, transparent);
}
/* Breathes a control in and out while it's listening to the user's voice. */
@utility pulse-scale {
  animation: pulse-scale 200ms ease-in-out infinite;
}
@keyframes pulse-scale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-scale {
    animation: none;
  }
}
@utility pt-sai {
  padding-top: var(--sait);
}
@utility pr-sai {
  padding-right: var(--sair);
}
@utility pb-sai {
  padding-bottom: var(--saib);
}
@utility pl-sai {
  padding-left: var(--sail);
}
@utility px-sai {
  padding-left: var(--sail);
  padding-right: var(--sair);
}
@utility py-sai {
  padding-top: var(--sait);
  padding-bottom: var(--saib);
}
@utility p-sai {
  padding: var(--sait) var(--sair) var(--saib) var(--sail);
}
@utility mt-sai {
  margin-top: var(--sait);
}
@utility mr-sai {
  margin-right: var(--sair);
}
@utility mb-sai {
  margin-bottom: var(--saib);
}
@utility ml-sai {
  margin-left: var(--sail);
}
@utility mx-sai {
  margin-left: var(--sail);
  margin-right: var(--sair);
}
@utility my-sai {
  margin-top: var(--sait);
  margin-bottom: var(--saib);
}
@utility m-sai {
  margin: var(--sait) var(--sair) var(--saib) var(--sail);
}
@utility top-sai {
  top: var(--sait);
}
@utility right-sai {
  right: var(--sair);
}
@utility bottom-sai {
  bottom: var(--saib);
}
@utility left-sai {
  left: var(--sail);
}

/* ----------------------------------------------------------------------------
   Keyboard-open adjustments — unlayered on purpose. Every element carrying
   .hide-on-keyboard also carries display utilities (flex, md:hidden), and a
   utility beats @layer components whatever the specificity.
   ---------------------------------------------------------------------------- */

body.keyboard-open {
  --saib: 0px;
  --mobile-nav-height: 0px;
}
body.keyboard-open .hide-on-keyboard {
  @apply hidden;
}

/* ----------------------------------------------------------------------------
   Fonts shared/default across all themes
   ---------------------------------------------------------------------------- */

@font-face {
  font-family: "Satoshis";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local(""),
    url("/fonts/Satoshi Symbol.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local(""),
    url("/fonts/Lato-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local(""),
    url("/fonts/Lato-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:
    local(""),
    url("/fonts/Lato-Italic.ttf") format("truetype");
}

/* ----------------------------------------------------------------------------
   Integrations — third-party class names rewired onto the shared tokens.

   These stay unlayered. Every library here ships its own stylesheet outside any
   cascade layer, and an unlayered rule beats a layered one whatever the
   specificity, so a layered override would lose to the default it overrides.
   @welshman/editor sets `.tiptap {min-height: 0}`, which beats a layered
   `.note-editor .tiptap`. Our own classes go in @layer components, in the file
   that owns them.
   ---------------------------------------------------------------------------- */

/* tiptap editor */
.input-editor,
.chat-editor,
.note-editor {
  @apply -m-1 p-1;
}
.tiptap {
  --tiptap-object-bg: var(--surface-more);
  --tiptap-object-fg: var(--content);
  --tiptap-active-bg: var(--primary);
  --tiptap-active-fg: var(--primary-content);
  @apply min-h-10 overflow-y-auto px-4 py-2;
  max-height: 350px;
}
.tiptap-suggestions {
  --tiptap-object-bg: var(--surface);
  --tiptap-object-fg: var(--content);
  --tiptap-active-bg: var(--surface-more);
  --tiptap-active-fg: var(--content);
}
.tiptap-suggestions__item {
  border-left: 2px solid var(--surface);
}
.tiptap-suggestions__selected {
  border-left-color: var(--primary);
}
.tiptap p.is-editor-empty:first-child::before {
  @apply opacity-40;
}
.chat-editor .tiptap {
  /* standard input border, kept at 1px so the :focus border swap doesn't reflow */
  @apply bg-surface border-line rounded-3xl border border-solid;
}
.note-editor .tiptap {
  @apply bg-surface block h-auto min-h-32 w-full rounded-2xl;
  border: var(--border-thin) solid var(--line);
  padding: 0.65rem;
  padding-bottom: 1.5rem;
}
/* the full-page article composer gets a taller writing surface than the note editor's default */
.article-editor .tiptap {
  @apply min-h-96;
  max-height: none;
}
.article-editor .tiptap p.is-editor-empty:first-child::before {
  @apply text-content-muted opacity-100;
}
.input-editor .tiptap {
  @apply bg-surface block h-auto rounded-2xl;
  border: var(--border-thin) solid var(--line);
  padding: 0.65rem;
}

/* @svelte-plugins/datepicker — the library declares its variables on :root,
   where chained var() references resolve immediately, and our theme tokens
   only exist under .fl; so each color is overridden individually here. The
   tripled selector out-specifies the component's scoped .datepicker rule. */
.datepicker.datepicker.datepicker {
  --datepicker-font-family: var(--font-body);
  --datepicker-color: var(--content);
  --datepicker-border-color: var(--line);
  --datepicker-state-active: var(--primary);
  --datepicker-state-hover: var(--surface-more);

  --datepicker-container-background: var(--surface);
  --datepicker-container-border: var(--border-thin) solid var(--line);

  --datepicker-calendar-header-color: var(--content);
  --datepicker-calendar-header-text-color: var(--content);
  --datepicker-calendar-header-month-nav-color: var(--content);
  --datepicker-calendar-header-month-nav-background-hover: var(--surface-more);
  --datepicker-calendar-header-year-nav-color: var(--content);

  --datepicker-calendar-dow-color: var(--content-muted);
  --datepicker-calendar-day-color: var(--content);
  --datepicker-calendar-day-color-hover: var(--content);
  --datepicker-calendar-day-background-hover: var(--surface-more);
  --datepicker-calendar-day-color-disabled: var(--content-subtle);
  --datepicker-calendar-day-other-color: var(--content-subtle);
  --datepicker-calendar-today-border: var(--border-thin) solid var(--line-more);

  /* pale wash for in-range days and the square connectors that join the
     endpoint circles; endpoints themselves get full primary + primary-content */
  --fl-dp-wash: color-mix(in srgb, var(--primary) 14%, var(--surface));

  --datepicker-calendar-range-color: var(--content);
  --datepicker-calendar-range-background: var(--fl-dp-wash);
  --datepicker-calendar-range-background-disabled: var(--fl-dp-wash);
  --datepicker-calendar-range-start-box-shadow: inset -20px 0 0 var(--fl-dp-wash);
  --datepicker-calendar-range-end-box-shadow: inset 20px 0 0 var(--fl-dp-wash);
  --datepicker-calendar-range-start-box-shadow-selected: inset -20px 0 0 var(--fl-dp-wash);
  --datepicker-calendar-range-end-box-shadow-selected: inset 20px 0 0 var(--fl-dp-wash);
  --datepicker-calendar-range-start-end-background: var(--primary);
  --datepicker-calendar-range-start-end-color: var(--primary-content);
  --datepicker-calendar-range-selected-background: var(--primary);
  --datepicker-calendar-range-selected-color: var(--primary-content);
  --datepicker-calendar-range-included-background: var(--fl-dp-wash);
  --datepicker-calendar-range-included-box-shadow: inset 20px 0 0 var(--fl-dp-wash);
  --datepicker-calendar-range-included-color: var(--content);

  --datepicker-timepicker-input-border: var(--border-thin) solid var(--line);
}

/* While only the start of a range is picked, the cell doesn't yet have the
   .range class, so the library's generic day-hover rule (square, gray) paints
   over the selected circle. Keep the selected look on hover instead. The :not()
   chain exists to out-specify that hover rule, which carries five of its own. */
.datepicker.datepicker.datepicker
  .calendar
  .date.start:not(.range):not(.other):not(.past):not(.future):not(.disabled)
  span:hover,
.datepicker.datepicker.datepicker
  .calendar
  .date.end:not(.range):not(.other):not(.past):not(.future):not(.disabled)
  span:hover {
  background-color: var(--primary);
  color: var(--primary-content);
  border-radius: var(--datepicker-calendar-range-selected-border-radius);
}

/* Hovering the picked start makes the cell both ends of a zero-width preview
   range; the library's !important sibling rules still paint a square connector
   shadow behind the circle, so remove it (their !important, out-specified) */
.datepicker.datepicker.datepicker .calendars-container .calendar .date.rangehover.start.end {
  box-shadow: none !important;
}

/* A freshly picked start with no end and no hover preview carries the same
   classes as the start of a real range, so the library paints its half-cell
   connector shadow toward a range that doesn't exist yet. The only reliable
   distinguisher is whether the next day is in-range. */
.datepicker.datepicker.datepicker
  .calendars-container
  .calendar
  .date.range.start:not(:has(+ .range, + .rangehover)) {
  box-shadow: none;
}

/* date picker. @svelte-plugins/datepicker renders its own markup, so these class
   names appear nowhere in src/ — don't delete them on a grep. */
.picker {
  --date-picker-foreground: var(--content);
  --date-picker-background: var(--surface-more);
  --date-picker-highlight-border: var(--primary);
  --date-picker-selected-color: var(--primary-content);
  --date-picker-selected-background: var(--primary);
}
.date-time-field {
  @apply bg-surface rounded-2xl px-0;
  border: var(--border-thin) solid var(--line);
}
.date-time-field input {
  height: 100% !important;
  width: 100% !important;
  border-radius: var(--radius-2xl) !important;
  border: none !important;
  background: inherit !important;
  color: inherit !important;
  padding: 0.7rem 1rem !important;
}

/* emoji picker — the .emoji-picker frame around it supplies the border */
emoji-picker {
  --background: var(--surface);
  --border-size: 0;
  --button-active-background: var(--surface-more);
  --button-hover-background: var(--surface-more);
  --indicator-color: var(--primary);
  --input-border-color: var(--line);
  --input-border-size: var(--border-thin);
  --input-border-radius: var(--radius-xl);
  --input-padding: 0.4rem 0.7rem;
  --input-font-size: 0.85rem;
  --input-font-color: var(--content);
  --input-placeholder-color: var(--content-subtle);
  --outline-color: var(--primary);
  width: 100%;
  height: 100%;
}

[data-tippy-root]:has([data-component="EmojiPicker"]) {
  max-width: min(352px, calc(100vw - 2rem));
}

.tippy-box:has([data-component="EmojiPicker"]) {
  overflow: visible;
  max-width: none;
}