/* ============================================================================
   base.css — document reset, self-hosted fonts, editor design tokens.

   The reset is Tailwind's Preflight, taken verbatim from the compiled
   stylesheet the React app ships (apps/editor/dist/assets/index-*.css). The
   original UI was authored on top of these exact normalisations — margins
   zeroed on headings and paragraphs, lists unstyled, images display:block,
   buttons unstyled — so reproducing them is what makes the ported markup lay
   out identically. Do not "tidy" this block.

   Dropped from the copy: Tailwind's `--tw-*` custom-property bootstrap. Those
   variables only feed Tailwind's own composite declarations (transform,
   filter, ring, shadow), and this project writes those properties directly.
   ========================================================================= */

/* ── Preflight (Tailwind v3) ─────────────────────────────────────────────── */

*,
:before,
:after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
:before,
:after { --tw-content: ""; }
html,
:host { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: Inter, system-ui, sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }
body { margin: 0; line-height: inherit; }
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
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-feature-settings: normal; font-variation-settings: normal; 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; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button,
input:where([type=button]),
input:where([type=reset]),
input:where([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::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; }
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]:where(:not([hidden=until-found])) { display: none; }

/* ── Self-hosted Inter ────────────────────────────────────────────────────
   Served from /fonts; ranges match Google's latin/latin-ext subsets so
   non-latin text never binds to a hole in the font. Copied unchanged from
   apps/editor/src/index.css, including the file names — no Google Fonts
   request, no late swap.
   ────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* DELIBERATELY only 400–700, matching index.css. The marketing headlines ask
   for font-weight 800/900 and the browser resolves those to the 700 face —
   declaring real 800/900 faces here would make the headlines heavier than the
   original renders them. The files exist under /fonts for templates that
   need them; they must not be bound to 'Inter' on these pages. */

/* ── Editor UI design tokens ──────────────────────────────────────────────
   All chrome colours go through these vars so the light/dark toggle only has
   to flip one attribute on <html>. Verbatim from index.css; the marketing
   pages only consume them through .mk-light-scope (forms), but <body> reads
   --ed-bg / --ed-text, so they have to be defined here.
   ────────────────────────────────────────────────────────────────────────── */

/* Dark (default) */
:root,
:root[data-editor-theme="dark"] {
  color-scheme: dark;
  --ed-bg:            #0F172A;
  --ed-surface:       #111827;
  --ed-surface-alt:   #1C2333;
  --ed-input:         #0F172A;
  --ed-border:        #1F2937;
  --ed-text:          #F1F5F9;
  --ed-text-2:        #E2E8F0;
  --ed-muted:         #94A3B8;
  --ed-muted-2:       #6B7280;
  --ed-dim:           #4B5563;
  --ed-disabled:      #374151;
  --ed-primary:       #2563EB;
  --ed-primary-dark:  #1D4ED8;
  --ed-canvas-outer:  #0D1117;
  --ed-canvas-chrome: #111827;
  --ed-canvas-area:   #161B27;
}

/* Light — bg sits a step darker than the white surfaces so panels read as
   distinct boxes, and every grey is pushed darker for contrast. */
:root[data-editor-theme="light"] {
  color-scheme: light;
  --ed-bg:            #E9EEF4;
  --ed-surface:       #FFFFFF;
  --ed-surface-alt:   #DEE5EE;
  --ed-input:         #FFFFFF;
  --ed-border:        #C6D0DC;
  --ed-text:          #0B1220;
  --ed-text-2:        #1E293B;
  --ed-muted:         #334155;
  --ed-muted-2:       #444444;
  --ed-dim:           #64748B;
  --ed-disabled:      #B0BCCB;
  --ed-primary:       #2563EB;
  --ed-primary-dark:  #1D4ED8;
  --ed-canvas-outer:  #D6DEE8;
  --ed-canvas-chrome: #E4EAF1;
  --ed-canvas-area:   #CBD5E1;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--ed-bg);
  color: var(--ed-text);
  -webkit-font-smoothing: antialiased;
}

/* Focus ring (app UI, not exported sites) */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

/* ── Top loading bar ──────────────────────────────────────────────────────
   Styled here rather than inline as in index.html: the SPA needed the rule
   before its CSS bundle existed, which is not a problem a PHP page has. Same
   geometry, gradient, glow, z-index and transitions.
   ────────────────────────────────────────────────────────────────────────── */
#__topbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
  z-index: 2147483647; opacity: 0;
  transition: width 220ms ease-out, opacity 200ms ease-out;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #__topbar { transition: none; }
}

/* ── Password reveal ──────────────────────────────────────────────────────
   assets/js/app.js wraps every password input in `.pw-field` and puts the eye
   button in beside it. Styled HERE, not in auth.css or account.css, because
   the fields it enhances are styled by both and the control has to read the
   same in either — /login's `.auth-input` and /account's `.acct-input`.

   `.pw-field input` is (0,1,1), so it outranks those two classes' own padding
   shorthand without `!important` and regardless of stylesheet order.
   ────────────────────────────────────────────────────────────────────────── */
.pw-field { position: relative; display: block; width: 100%; }
.pw-field input { padding-right: 2.5rem; }

.pw-toggle {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: #64748B;
  cursor: pointer;
  border-radius: 0 7px 7px 0;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle:hover { color: #2563EB; }
.mk-dark .pw-toggle { color: #94A3B8; }
.mk-dark .pw-toggle:hover { color: #60A5FA; }