@import "tailwindcss";
@import "@milkdown/crepe/theme/common/prosemirror.css";
@import "@milkdown/crepe/theme/common/reset.css";
@import "@milkdown/crepe/theme/common/placeholder.css";
@import "@milkdown/crepe/theme/frame.css";

@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  themes: lofi --default, business --prefersdark;
}

/* Warm light surface — lofi with the landing's sepia paper and terracotta accent. */
@plugin "daisyui/theme" {
  name: "sepia";
  default: false;
  prefersdark: false;
  color-scheme: light;
  --color-base-100: #f7f3ea;
  --color-base-200: #efe9db;
  --color-base-300: #e5dcc9;
  --color-base-content: #2b2620;
  --color-primary: #2b2620;
  --color-primary-content: #f7f3ea;
  --color-secondary: #453d33;
  --color-secondary-content: #f7f3ea;
  --color-accent: #a04a3c;
  --color-accent-content: #f7f3ea;
  --color-neutral: #2b2620;
  --color-neutral-content: #f7f3ea;
  --color-info: oklch(79.54% 0.103 205.9);
  --color-info-content: oklch(15.908% 0.02 205.9);
  --color-success: oklch(90.13% 0.153 164.14);
  --color-success-content: oklch(18.026% 0.03 164.14);
  --color-warning: oklch(88.37% 0.135 79.94);
  --color-warning-content: oklch(17.674% 0.027 79.94);
  --color-error: oklch(78.66% 0.15 28.47);
  --color-error-content: oklch(15.732% 0.03 28.47);
  --radius-selector: 2rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* Warm dark surface — business recast as candlelit umber; sepia's dark counterpart. */
@plugin "daisyui/theme" {
  name: "umber";
  default: false;
  prefersdark: false;
  color-scheme: dark;
  --color-base-100: #231d16;
  --color-base-200: #1d1812;
  --color-base-300: #17130e;
  --color-base-content: #e9e1d3;
  --color-primary: #c9705a;
  --color-primary-content: #1a120e;
  --color-secondary: #8f8577;
  --color-secondary-content: #16120d;
  --color-accent: oklch(67.271% 0.167 35.791);
  --color-accent-content: oklch(13.454% 0.033 35.791);
  --color-neutral: #322a21;
  --color-neutral-content: #e5dccd;
  --color-info: oklch(62.616% 0.143 240.033);
  --color-info-content: oklch(12.523% 0.028 240.033);
  --color-success: oklch(70.226% 0.094 156.596);
  --color-success-content: oklch(14.045% 0.018 156.596);
  --color-warning: oklch(77.482% 0.115 81.519);
  --color-warning-content: oklch(15.496% 0.023 81.519);
  --color-error: oklch(51.61% 0.146 29.674);
  --color-error-content: oklch(90.322% 0.029 29.674);
  --radius-selector: 0rem;
  --radius-field: 0.25rem;
  --radius-box: 0.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@custom-variant dark (&:where([data-theme="business"], [data-theme="business"] *, [data-theme="umber"], [data-theme="umber"] *));

@layer base {
  body {
    text-rendering: optimizeLegibility;
  }
}

.writing-surface .milkdown {
  --crepe-color-background: var(--color-base-100);
  --crepe-color-on-background: var(--color-base-content);
  --crepe-color-surface: var(--color-base-200);
  --crepe-color-surface-low: var(--color-base-300);
  --crepe-color-on-surface: var(--color-base-content);
  --crepe-color-on-surface-variant: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  --crepe-color-outline: var(--color-base-300);
  --crepe-color-primary: var(--color-primary);
  --crepe-color-secondary: var(--color-secondary);
  --crepe-color-on-secondary: var(--color-secondary-content);
  --crepe-color-inverse: var(--color-neutral);
  --crepe-color-on-inverse: var(--color-neutral-content);
  --crepe-color-inline-code: var(--color-accent);
  --crepe-color-error: var(--color-error);
  --crepe-color-hover: var(--color-base-200);
  --crepe-color-selected: var(--color-base-300);
  --crepe-color-inline-area: var(--color-base-300);
  --crepe-shadow-1: none;
  --crepe-shadow-2: none;
}

.writing-surface .milkdown,
.writing-surface .ProseMirror {
  min-height: calc(100vh - 12rem);
  @apply bg-transparent;
}

.writing-surface .ProseMirror {
  width: min(100%, 42rem);
  margin-inline: auto;
  padding: 4.5rem 1.75rem 10rem;
  @apply text-base-content;
  line-height: 1.85;
}

.writing-surface[data-writing-font="literary"] .ProseMirror {
  @apply font-serif;
}

.writing-surface[data-writing-font="modern"] .ProseMirror {
  @apply font-sans;
}

.writing-surface[data-writing-font="mono"] .ProseMirror {
  @apply font-mono;
}

.writing-surface[data-writing-font-size="small"] .ProseMirror {
  @apply text-base;
}

.writing-surface[data-writing-font-size="medium"] .ProseMirror {
  @apply text-lg;
}

.writing-surface[data-writing-font-size="large"] .ProseMirror {
  @apply text-xl;
}

.writing-surface[data-writing-font-size] .milkdown .ProseMirror :where(p, li) {
  font-size: inherit;
  line-height: inherit;
}

.writing-surface .ProseMirror:focus {
  outline: none;
}

.writing-surface .ProseMirror p {
  margin-block: 0 1.55em;
}

.writing-surface .ProseMirror .tutor-reviewed {
  @apply border-l border-base-content/35 pl-5;
}

.writing-surface {
  position: relative;
}

@media (min-width: 64rem) {
  .draft-drawer > .drawer-content {
    transition: margin-inline-end 200ms ease;
  }

  .draft-drawer > .drawer-toggle:checked ~ .drawer-content {
    margin-inline-end: 23.5rem;
  }

  .draft-drawer > .drawer-toggle:checked ~ .drawer-side {
    pointer-events: none;
  }

  .draft-drawer > .drawer-toggle:checked ~ .drawer-side > aside {
    pointer-events: auto;
  }

  /* The tutor panel sits beside the draft here, not over it; undo daisyUI's
     checked-drawer page scroll lock (kept below lg, where it is an overlay). */
  :root:has(.draft-drawer > #tutor-sidebar:checked) {
    --page-scroll-lock: initial;
  }
}

.tutor-note-rail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tutor-note-marker {
  position: absolute;
  inset-inline-start: calc(50% + min(23.5rem, 46vw));
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  line-height: 1;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-0.2rem);
  @apply bg-base-200 text-base-content/55;
  transition: opacity 140ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.draft-drawer:has(#tutor-sidebar:checked) .tutor-note-marker.is-visible,
.tutor-note-marker.notes-active {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
}

.tutor-review-marker {
  position: absolute;
  inset-inline-start: calc(50% + min(21.5rem, 42vw));
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-0.2rem);
  @apply bg-base-100 text-base-content/45;
  transition: opacity 140ms ease, color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.draft-drawer:has(#tutor-sidebar:checked) .tutor-review-marker.is-visible,
.draft-drawer:has(#tutor-sidebar:checked) .tutor-review-marker.is-current,
.tutor-review-marker:focus-visible,
.tutor-review-marker:hover {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
}

.tutor-review-marker:hover,
.tutor-review-marker:focus-visible {
  @apply bg-base-200 text-base-content;
  outline: none;
}

.tutor-note-marker:hover,
.tutor-note-marker:focus-visible,
.tutor-note-marker.notes-active {
  @apply bg-neutral text-neutral-content;
  transform: scale(1.08);
  outline: none;
}

.writing-surface .ProseMirror h1,
.writing-surface .ProseMirror h2,
.writing-surface .ProseMirror h3 {
  @apply font-sans;
  font-weight: 650;
  line-height: 1.2;
}

.writing-surface .ProseMirror h1 {
  @apply text-4xl tracking-tight;
}

.writing-surface .ProseMirror h2 {
  @apply text-3xl tracking-tight;
}

.writing-surface .ProseMirror h3 {
  @apply text-xl;
}

.feedback-note {
  scroll-margin-top: 1rem;
  animation: feedback-arrive 240ms ease-out;
}

.feedback-disclosure > summary::-webkit-details-marker {
  display: none;
}

.feedback-disclosure > summary {
  transition: color 140ms ease;
}

.feedback-disclosure > summary:hover,
.feedback-disclosure > summary:focus-visible {
  @apply text-base-content;
  outline: none;
}

.feedback-disclosure-chevron {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 140ms ease;
}

.feedback-disclosure[open] > summary .feedback-disclosure-chevron {
  transform: rotate(90deg);
}

@keyframes feedback-arrive {
  from {
    opacity: 0.45;
    transform: translateY(0.25rem);
  }
}

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

/* Landing page — "Marked Manuscript" palette. Warm paper in light, warm ink in dark. */
.landing {
  --dl-paper: #f7f3ea;
  --dl-card: #fffdf8;
  --dl-ink: #2b2620;
  --dl-accent: #a04a3c;
  --dl-band: #2b2620;
  --dl-band-content: #f7f3ea;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

[data-theme="business"] .landing,
[data-theme="umber"] .landing {
  --dl-paper: #171310;
  --dl-card: #201b16;
  --dl-ink: #e9e1d3;
  --dl-accent: #c9705a;
  --dl-band: #100d0a;
  --dl-band-content: #efe8da;
}

.landing-annotation {
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-style: italic;
}

.landing-btn {
  @apply inline-flex cursor-pointer items-center justify-center whitespace-nowrap bg-(--dl-ink) text-(--dl-paper) transition-colors;
}

.landing-btn:hover {
  @apply bg-(--dl-accent);
}

.landing-label {
  @apply mb-2 block font-sans text-[0.65rem] font-semibold uppercase tracking-widest text-(--dl-ink)/45;
}

.landing-input {
  @apply w-full border border-(--dl-ink)/25 bg-(--dl-card) px-3.5 py-2.5 font-sans text-[0.95rem] transition-colors;
}

.landing-input:focus {
  @apply border-(--dl-accent) outline-none;
}