/* ==========================================================================
   viewer-base.css - static replacement for the Tailwind Play CDN
   --------------------------------------------------------------------------
   Phase E.1 of the digital-viewer latency work.

   `<script src="https://cdn.tailwindcss.com">` was loading the Tailwind JIT
   *compiler* into every reader's browser: a third-party origin on the critical
   path, ~120KB of script, which then scans the whole DOM and generates CSS at
   runtime before first paint. An audit of index.html found it was being used
   for exactly 17 distinct utility classes.

   This file replaces it with the two things it was actually providing:

     1. Preflight - Tailwind's reset. This is load-bearing and NOT optional:
        taem-journal.css has no `box-sizing` reset of its own, so the viewer's
        own 1,600-line stylesheet was authored against a border-box world.
        Dropping Preflight silently changes every padded box on the page.
     2. The 17 utilities, hand-written.

   Keep this file in sync if new utility classes are added to the markup.
   Anything not listed below simply will not exist - that is the trade for
   deleting the runtime compiler.

   Load order matters: this must come BEFORE taem-journal.css and before the
   viewer's own <style> block, so the reset loses specificity ties to real
   styling rather than winning them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PREFLIGHT  (Tailwind v3 base, verbatim in behaviour)
   -------------------------------------------------------------------------- */

*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}

::before,
::after { --tw-content: ''; }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
                 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-feature-settings: normal;
    font-variation-settings: normal;
}

body {
    margin: 0;
    line-height: inherit;
}

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

abbr:where([title]) { text-decoration: underline dotted; }

/* Headings inherit so a design system, not the UA, decides scale. */
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

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

b, strong { font-weight: bolder; }

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 'Liberation Mono', 'Courier New', monospace;
    font-size: 1em;
}

small { font-size: 80%; }

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

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

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button, select { text-transform: none; }

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }

progress { vertical-align: baseline; }

::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height: auto; }

[type='search'] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary { display: list-item; }

blockquote, dl, dd, h1, h2, h3, h4, h5, h6,
hr, figure, p, pre { margin: 0; }

fieldset {
    margin: 0;
    padding: 0;
}

legend { padding: 0; }

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

dialog { padding: 0; }

textarea { resize: vertical; }

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af;
}

button,
[role="button"] { cursor: pointer; }

:disabled { cursor: default; }

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

img, video {
    max-width: 100%;
    height: auto;
}

[hidden] { display: none; }

/* --------------------------------------------------------------------------
   2. UTILITIES  (only those the markup actually uses)

   Audited from index.html on 2026-08-22. If you add a Tailwind class to the
   markup, add its rule here too - there is no compiler to do it for you.
   -------------------------------------------------------------------------- */

/* layout */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* flexbox */
.flex            { display: flex; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }

/* sizing (Tailwind scale: 6 = 1.5rem) */
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }

/* spacing */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.px-4    { padding-left: 1rem; padding-right: 1rem; }

/* typography */
.text-center { text-align: center; }

/* effects */
.opacity-0 { opacity: 0; }

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-500 { transition-duration: 500ms; }

/* responsive - Tailwind `md:` is min-width 768px */
@media (min-width: 768px) {
    .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
}