@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; }

@layer components {
  .paragraph, .trix-content {
    @apply dark:text-neutral-300 text-neutral-900;
  }
  .logo {
    @apply text-3xl font-serif text-emerald-800 dark:text-emerald-400;
  }
  .serif-h1 {
    @apply text-3xl font-serif text-neutral-900 dark:text-neutral-100 sm:text-5xl;
  }
  .subhead-p {
    @apply mt-2 text-sm font-light text-neutral-600 dark:text-neutral-400;
  }
  .btn-primary {
    @apply flex items-center gap-x-1 rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 cursor-pointer;
  }
  .btn-secondary {
    @apply inline-flex items-center rounded-md bg-white dark:bg-neutral-800 px-3 py-2 text-sm font-semibold text-neutral-900 dark:text-neutral-100 shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer;
  }
  .btn-tertiary {
    @apply inline-flex items-center rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 cursor-pointer;
  }
  .btn-cancel {
    @apply rounded-md bg-white dark:bg-neutral-800 px-3 py-2 text-sm font-semibold text-neutral-900 dark:text-neutral-100 shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer;
  }
  .pill-ecru {
    @apply inline-flex items-center rounded-md bg-ecru-100 dark:bg-ecru-800 px-2 py-1 text-xs font-sans font-medium text-ecru-600 dark:text-ecru-300;
  }
  .pill-eggplant {
    @apply inline-flex items-center rounded-md bg-eggplant-100 dark:bg-eggplant-800 px-2 py-1 text-xs font-sans font-medium text-eggplant-600 dark:text-eggplant-300;
  }
  .pill-emerald {
    @apply inline-flex items-center rounded-md bg-emerald-100 dark:bg-emerald-900 px-2 py-1 text-xs font-sans font-medium text-emerald-600 dark:text-emerald-300;
  }
  .pill-amber {
    @apply inline-flex items-center rounded-md bg-amber-100 dark:bg-amber-900 px-2 py-1 text-xs font-sans font-medium text-amber-600 dark:text-amber-300;
  }
  .pill-red {
    @apply inline-flex items-center rounded-md bg-red-100 dark:bg-red-900 px-2 py-1 text-xs font-sans font-medium text-red-600 dark:text-red-300;
  }
  .pill-blue {
    @apply inline-flex items-center rounded-md bg-blue-100 dark:bg-blue-900 px-2 py-1 text-xs font-sans font-medium text-blue-600 dark:text-blue-300;
  }
  .pill-orange {
    @apply inline-flex items-center rounded-md bg-orange-100 dark:bg-orange-900 px-2 py-1 text-xs font-sans font-medium text-orange-600 dark:text-orange-300;
  }
  .pill-purple {
    @apply inline-flex items-center rounded-md bg-purple-100 dark:bg-purple-900 px-2 py-1 text-xs font-sans font-medium text-purple-600 dark:text-purple-300;
  }
  .pill-neutral {
    @apply inline-flex items-center rounded-md bg-neutral-100 dark:bg-neutral-800 px-2 py-1 text-xs font-sans font-medium text-neutral-600 dark:text-neutral-300;
  }

  .tab {
    @apply flex whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium;
  }
  .tab-active {
    @apply border-emerald-500 text-emerald-600 dark:text-emerald-400;
  }
  .tab-inactive {
    @apply border-transparent text-neutral-500 dark:text-neutral-400 hover:border-neutral-500 dark:hover:border-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200;
  }
  /* Inactive tab appearance without the hover state, for non-clickable section headings. */
  .tab-heading {
    @apply border-transparent text-neutral-500 dark:text-neutral-400;
  }
  .tab-badge {
    @apply ml-3 hidden rounded-full py-0.5 px-2.5 text-xs font-medium md:inline-block;
  }
  .tab-badge-active {
    @apply bg-emerald-100 dark:bg-emerald-900 text-emerald-600 dark:text-emerald-300;
  }
  .tab-badge-inactive {
    @apply bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100;
  }
  .index-list-item {
    @apply flex flex-wrap items-center justify-between gap-x-6 gap-y-4 py-4 sm:flex-nowrap;
  }
  .index-list-title {
    @apply text-2xl font-serif leading-tight text-neutral-900 dark:text-neutral-100;
  }
  .index-list-subtitle {
    @apply mt-1 text-sm leading-5 text-neutral-600 dark:text-neutral-400 font-light;
  }
  .divided-list {
    @apply divide-y divide-neutral-200 dark:divide-neutral-700;
  }
  .index-tabs {
    @apply border-b border-neutral-200 dark:border-neutral-700;
  }

  .label {
    @apply block text-sm font-medium leading-6 text-neutral-900 dark:text-neutral-100 mb-2;
  }
  .input {
    @apply block w-full rounded-md border-0 py-1.5 text-neutral-900 dark:text-neutral-100 dark:bg-neutral-800 shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6;
  }
  .public-label {
    @apply block text-sm font-medium leading-6 text-white mb-2;
  }
  .public-input {
    @apply min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 placeholder:text-neutral-300 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6
  }
  select.input:disabled {
    @apply text-neutral-500 dark:text-neutral-400;
  }

  .attributes-dl {
    @apply border-t border-b border-neutral-200 dark:border-neutral-700 mb-4 mt-8;
  }
  .attributes-grid {
    @apply py-4 grid grid-cols-4 sm:gap-4;
  }
  .attributes-dt {
    @apply text-sm font-medium text-neutral-900 dark:text-neutral-100;
  }
  .attributes-dd {
    @apply mt-1 text-sm leading-6 text-neutral-700 dark:text-neutral-300 col-span-3 sm:mt-0;
  }
  .copy-button {
    @apply inline-flex items-center justify-center align-middle text-neutral-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors cursor-pointer;
  }
  .hint {
    @apply mb-2 text-sm text-neutral-500 dark:text-neutral-400;
  }
  .max-w-container {
    @apply mx-auto max-w-2xl;
  }

  .activetext-content {
    @apply text-lg;

  }
  .activetext-content a, .paragraph a {
    @apply text-emerald-600 dark:text-emerald-400 underline;
  }
  /* Blog posts sit on a fixed-light background, so keep rich text readable in dark mode */
  .activetext-content .trix-content {
    @apply dark:text-neutral-900;
  }
  .activetext-content a {
    @apply dark:text-emerald-600;
  }
  .activetext-content ul { list-style: disc; }
  .activetext-content ol { list-style: decimal; }
  .trix-content ul { list-style: disc; @apply pl-6; }
  .trix-content ol { list-style: decimal; @apply pl-6; }
  .trix-content > div, .trix-content > blockquote, .trix-content > p, .trix-content > ul, .trix-content > ol, .paragraph {
    @apply mb-4;
  }
  .trix-content > ul > li, .trix-content > ol > li {
    @apply mb-2;
  }
  /* Heading scale for rendered content — mirrors the Lexxy editor's prominence so posts
     publish the way they look while editing. Colour is inherited (not hard-set) so post
     headings stay dark on the fixed-light blog background even in dark mode, and follow
     the theme in chat/minutes. Lexxy's toolbar emits h2 (Large) / h3 (Medium) / h4 (Small);
     h1 comes from the "# " markdown shortcut. Post body is text-lg, so h4 sits at body size
     but bold to stay distinct. */
  .trix-content > h1 {
    @apply pt-3 text-[2rem] font-bold leading-tight mb-4;
  }
  .trix-content > h2 {
    @apply pt-3 text-2xl font-bold leading-tight mb-4;
  }
  .trix-content > h3 {
    @apply pt-3 text-xl font-semibold leading-snug mb-4;
  }
  .trix-content > h4, .trix-content > h5, .trix-content > h6 {
    @apply pt-2 text-lg font-semibold leading-snug mb-3;
  }
  .trix-content table {
    @apply border border-neutral-300 dark:border-neutral-600 rounded-md;
  }
  .trix-content th {
    @apply text-base text-left py-2 px-2 font-semibold;
  }
  .trix-content td {
    @apply text-base border-t border-neutral-300 dark:border-neutral-600 py-2 px-2;
  }
  .trix-content td + td, .trix-content th + th {
    @apply border-l border-neutral-300 dark:border-neutral-600;
  }
  .trix-content strong {
    @apply font-semibold;
  }

  /* Base prose styles for rich content (posts) and rendered markdown (chat, minutes).
     Replaces the base styles Trix's stylesheet used to supply, now that Trix is gone. */
  .trix-content {
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .trix-content li {
    margin-left: 1em;
  }
  .trix-content a {
    @apply text-emerald-600 dark:text-emerald-400 underline;
  }
  .trix-content blockquote {
    @apply border-l-4 border-neutral-300 dark:border-neutral-600 pl-3 my-4 text-neutral-600 dark:text-neutral-400;
  }
  .trix-content pre {
    @apply block w-full overflow-x-auto rounded-md bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 p-3 my-4 text-sm;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    white-space: pre;
  }
  .trix-content code {
    @apply rounded bg-neutral-100 dark:bg-neutral-800 px-1 py-0.5 text-sm;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  }
  .trix-content pre code {
    @apply bg-transparent p-0 text-sm;
  }
  .trix-content hr {
    @apply my-4 border-t border-neutral-300 dark:border-neutral-600;
  }
  .trix-content img {
    max-width: 100%;
    height: auto;
  }

  /* Action Text attachments embedded in posts (Lexxy emits the same canonical markup as Trix). */
  .trix-content .attachment {
    @apply inline-block relative max-w-full;
  }
  .trix-content .attachment a {
    @apply no-underline text-inherit;
  }
  .trix-content .attachment--preview {
    @apply w-full text-center;
  }
  .trix-content .attachment__caption {
    @apply text-center text-sm text-neutral-500 dark:text-neutral-400;
  }
  .trix-content .attachment-gallery {
    @apply flex flex-wrap relative;
  }
  .trix-content .attachment-gallery > action-text-attachment,
  .trix-content .attachment-gallery > .attachment {
    @apply px-2;
    flex: 1 0 33%;
    max-width: 33%;
  }
  .trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
  .trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
  .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
  .trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
    flex-basis: 50%;
    max-width: 50%;
  }

  /* Demo animation: cursor blink for typewriter effect */
  .demo-cursor {
    @apply text-emerald-400;
    animation: cursorBlink 0.8s step-end infinite;
  }

  /* Demo prose: dark-mode-friendly markdown styles */
  .demo-prose strong { @apply text-white font-semibold; }
  .demo-prose a { @apply text-emerald-400 underline; }
  .demo-prose h1, .demo-prose h2, .demo-prose h3 { @apply text-white font-semibold; }
  .demo-prose ol, .demo-prose ul { @apply pl-4 space-y-1; }
  .demo-prose ol { list-style-type: decimal; }
  .demo-prose ul { list-style-type: disc; }
  .demo-prose li::marker { color: rgba(255, 255, 255, 0.4); }
  /* Wide tables scroll horizontally inside the narrow chat bubble instead of
     overflowing and getting clipped by the chat window on mobile. */
  .demo-prose table {
    @apply w-full text-xs mt-2 mb-1;
    display: block;
    overflow-x: auto;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
  }
  .demo-prose table::-webkit-scrollbar { display: none; }
  .demo-prose th { @apply text-left text-white/60 font-medium pb-1 pr-3 border-b border-white/10; }
  .demo-prose td { @apply py-1 pr-3 border-b border-white/10 text-white/70; }
  .demo-prose code { @apply bg-white/10 rounded px-1 py-0.5 text-emerald-300 text-xs; }
  .demo-prose p + p { @apply mt-2; }
}

@layer utilities {
  /* Hide the horizontal scrollbar on the mobile demo chips row while keeping it scrollable */
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;            /* Chrome/Safari/Blink */
  }
}

/* Demo keyframe animations */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
/*

 */

 @font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.extra.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.alternates.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.symbols.var-59f27012284f5e97bbff303eb599ca98f29629a1c0fe7352bcc15b27d1dcd937.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Italic';
}

/* extra */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.extra.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.alternates.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.symbols.var-59f27012284f5e97bbff303eb599ca98f29629a1c0fe7352bcc15b27d1dcd937.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Italic';
}
/* cyrillic */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.cyrillic.var-a31159d5ce68b317b19edc7ee7f1f3ffdd5316ee899945b502406abda313afa2.woff2) format('woff2');
  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
  font-named-instance: 'Italic';
}
/* greek */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.greek.var-77ec12f9397b88a29c16c05f2db87d9c0d0c2b157f1980271fed020f00b35321.woff2) format('woff2');
  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
  font-named-instance: 'Italic';
}
/* vietnamese */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.vietnamese.var-b5dc5b6490ba49e8193315ff62c8e90551102055440f084a6e982e5eab8e589a.woff2) format('woff2');
  unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
  font-named-instance: 'Italic';
}
/* latin-ext */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.latin-ext.var-802705fb8496b82eda3f410c7e70a35c9407ba98b97cc5d9754db82750466fad.woff2) format('woff2');
  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
  font-named-instance: 'Italic';
}
/* latin */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.latin.var-cbfc0334f8cfad4727431982cd32c32f7daf6e73f0ab6f759ec3dc757c1c6bf7.woff2) format('woff2');
  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
  font-named-instance: 'Italic';
}
/* extra */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.extra.var-29781a209d7978155bf343eb1653779269965fa4a43d504b1fb361ab20e8487b.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Regular';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.alternates.var-29781a209d7978155bf343eb1653779269965fa4a43d504b1fb361ab20e8487b.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Regular';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.symbols.var-847d2a436a03ba1fbd4b750915db031a12a713befe0dcd79e8f39bf6a6e1a647.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Regular';
}
/* cyrillic */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.cyrillic.var-8aa524d3da3b8fd4a03ff2d0d41ea50520113fb2e8ae57c15079dabea44b3529.woff2) format('woff2');
  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
  font-named-instance: 'Regular';
}
/* greek */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.greek.var-1134a39060691474b0f57b2de5e09977a31a8c06df90960b982314f58a5b4c63.woff2) format('woff2');
  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
  font-named-instance: 'Regular';
}
/* vietnamese */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.vietnamese.var-a10e650090dc30250de0db440654c9bf29a843b233ee95a699b008bab0a6d498.woff2) format('woff2');
  unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
  font-named-instance: 'Regular';
}
/* latin-ext */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.latin-ext.var-46bc23ba7e33ea447579cd95b95f34665d7560377065b72f3a77df8bca4b0e5c.woff2) format('woff2');
  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
  font-named-instance: 'Regular';
}
/* latin */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.latin.var-4b87a3d384ea557b10afa9570b753eda868b12b5e51eea0977ffa6e641998f6a.woff2) format('woff2');
  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
  font-named-instance: 'Regular';
}
/*
 * Lexxy theme overrides.
 *
 * Lexxy is themed entirely through CSS custom properties (see the gem's
 * lexxy-variables.css). This file:
 *   1. Re-points Lexxy's accent to the app's emerald brand (links / focus / selection).
 *   2. Supplies a dark theme, keyed off the `.dark` class the app toggles on <html>
 *      (see app/views/shared/_head.html.erb). Without this the toolbar/canvas render
 *      white-on-dark. Dark values mirror Lexxy's own sandbox reference theme.
 *
 * MUST be loaded AFTER "lexxy" in the stylesheet_link_tag so the light-mode :root
 * overrides win on source order (equal specificity to Lexxy's own :root). The
 * html.dark block wins on specificity regardless of order. Only the base variables
 * need overriding — Lexxy's derived semantic vars (canvas, text, link, selection,
 * code-bg, table…) re-resolve from these.
 */

:root {
  /* Emerald accent to match the app (Tailwind emerald-600/500/200/100). */
  --lexxy-color-accent-dark: #059669;
  --lexxy-color-accent-medium: #10b981;
  --lexxy-color-accent-light: #a7f3d0;
  --lexxy-color-accent-lightest: #d1fae5;
}

html.dark {
  /* Grayscale ramp inverted for dark backgrounds. */
  --lexxy-color-ink: oklch(96% 0 0);
  --lexxy-color-ink-medium: oklch(75% 0 0);
  --lexxy-color-ink-light: oklch(55% 0 0);
  --lexxy-color-ink-lighter: oklch(40% 0 0);
  --lexxy-color-ink-lightest: oklch(25% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0 0);

  /* Emerald accent, brightened for dark (emerald-400/500/800/900). */
  --lexxy-color-accent-dark: #34d399;
  --lexxy-color-accent-medium: #10b981;
  --lexxy-color-accent-light: #065f46;
  --lexxy-color-accent-lightest: #064e3b;

  --lexxy-color-red: oklch(70% 0.15 27);
  --lexxy-color-green: oklch(70% 0.15 145);
  --lexxy-color-blue: oklch(75% 0.196 258);
  --lexxy-color-purple: oklch(70% 0.15 305);

  /* Syntax highlighting tokens tuned for dark (GitHub dark palette). */
  --lexxy-color-code-token-att: #ff7b72;
  --lexxy-color-code-token-comment: #8b949e;
  --lexxy-color-code-token-function: #d2a8ff;
  --lexxy-color-code-token-operator: #ff7b72;
  --lexxy-color-code-token-property: #79c0ff;
  --lexxy-color-code-token-punctuation: #f0f6fc;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;

  --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);

  --highlight-1: rgb(240, 200, 22);
  --highlight-2: rgb(230, 118, 14);
  --highlight-3: rgb(244, 5, 5);
  --highlight-4: rgb(248, 21, 192);
  --highlight-5: rgb(214, 80, 255);
  --highlight-6: rgb(53, 157, 255);
  --highlight-7: rgb(26, 231, 23);
  --highlight-8: rgb(201, 135, 72);
  --highlight-9: rgb(161, 161, 161);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 body {
  -webkit-tap-highlight-color: transparent;
}

@layer base {
  @font-face {
    font-family: VC Henrietta;
    font-weight: 300;
    font-display: swap;
    src: url(/fonts/HenriettaTrial-Light.woff) format("woff");
  }
  @font-face {
    font-family: VC Henrietta;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/Henrietta-Regular.woff) format("woff");
  }
  @font-face {
    font-family: VC Henrietta;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/HenriettaTrial-SemiBold.woff) format("woff");
  }
}

.font-serif, .serif-h1, .index-list-title {
  font-weight: 300;
  letter-spacing: 0.02em;
  font-feature-settings: "ss06" on, "ss01" on; 
}