@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;
  }
  /* The public site's call to action: cream on the dark green background, as
     the nav's "Free body corporate audit" button has always been. Kept to the
     same tokens as those so the two read as one thing, and to .btn-primary's
     padding so it measures the same 36px. */
  /* Disabled fades the cream toward the background rather than darkening it —
     the deeper ecru shades go brown, which reads as a different button rather
     than this one switched off. disabled:hover is spelled out because :hover
     still matches a disabled control. */
  .btn-ecru {
    @apply inline-flex items-center gap-x-1 rounded-md bg-ecru-200 px-3 py-2 text-sm font-semibold text-emerald-950 shadow-sm hover:bg-ecru-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ecru-200 disabled:bg-ecru-200/20 disabled:text-ecru-100/50 disabled:shadow-none disabled:cursor-not-allowed disabled:hover:bg-ecru-200/20 cursor-pointer;
  }
  /* The unfilled counterpart to .btn-ecru, for the secondary half of a pair like
     Back beside Continue. Colours are the homepage hero's "Book a consult"
     button; the sizing is .btn-ecru's, so the two sit level rather than the
     hero's larger px-3.5/py-2.5. An inset ring stands in for that button's
     border for the same reason — a border would add 2px of height and knock the
     pair out of line. */
  .btn-outline {
    @apply inline-flex items-center gap-x-1 rounded-md px-3 py-2 text-sm font-semibold text-ecru-100 ring-1 ring-inset ring-ecru-200/50 hover:bg-ecru-200/10 hover:ring-ecru-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ecru-200 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;
  }
  input.input:disabled {
    @apply bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 cursor-not-allowed;
  }

  .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;
}

/*
 * Give in-editor headings a sensible line-height. Lexxy sets a large heading
 * font-size but no line-height, so headings inherit whatever the editor host
 * element carries — the app's `text-sm` utility pins that to 20px, which makes
 * wrapped headings collapse onto each other. Lexxy scopes its own heading rules
 * under :where(.lexxy-content) (zero specificity), so `.lexxy-content h1…` wins.
 */
.lexxy-content h1,
.lexxy-content h2,
.lexxy-content h3,
.lexxy-content h4,
.lexxy-content h5,
.lexxy-content h6 {
  line-height: 1.2;
}

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; 
}