/* imgtotxt.app — theme layer over Bulma 1.0.4.
   Loaded after bulma.min.css, so these rules win on source order.
   Only Bulma's HSL primitives are set, so every derived state (hover,
   active, borders, button inverts) stays coherent.

   Design language adapted from receiptconverter.com: warm bone page, white
   sheets, near-black warm ink, soft 8/14px radii, near-black CTAs, a small
   type scale, and fills instead of shadows. Tokens are re-derived here rather
   than copied from their stylesheet.

   Two deliberate departures from the reference, both noted at the rule. */

:root {
  /* The reference declares "General Sans" but ships no @font-face, so its own
     visitors fall through to system-ui unless they happen to have it locally.
     Same stack, same honest fallback — no third-party font CDN is introduced. */
  --ui-sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ui-mono: "SF Mono", SFMono-Regular, ui-monospace, "Fira Code", Menlo,
             Consolas, "Liberation Mono", monospace;

  /* Ink at alpha, the reference's own muted-text construction */
  --ink: 26, 23, 20;
  --ink-muted: rgba(var(--ink), 0.62);
  --ink-line: rgba(var(--ink), 0.20);
  --ink-fill: rgba(var(--ink), 0.05);

  --r-sm: 8px;    /* controls, inputs, buttons  (rounded-lg)   */
  --r-lg: 14px;   /* cards, panels, dropzone    (rounded-14px) */
}

[data-theme=light] {
  /* Warm bone scheme. Saturation is held low because Bulma derives borders and
     greys from it: at the bone's own 33%, a 77%-lightness border resolves to a
     tan #d8c8b1 instead of the reference's neutral #c9c5c0. The few surfaces
     that must stay warm are set literally below. */
  --bulma-scheme-h: 36;
  --bulma-scheme-s: 8%;

  --bulma-scheme-main-l: 100%;      /* cards, inputs, tables — pure white */
  --bulma-scheme-main-bis-l: 97%;
  --bulma-scheme-main-ter-l: 95%;
  --bulma-border-weak-l: 88%;
  --bulma-border-l: 77%;            /* hairline, ink at 20%     #c9c5c0   */
  --bulma-background: #f5f1eb;      /* .is-light, tags — kept bone         */

  /* Ink — warm near-black, identical to the reference's --fg */
  --bulma-text-h: 30;
  --bulma-text-s: 13%;
  --bulma-text-l: 20%;
  --bulma-text-strong-l: 9%;        /* headings                 #1a1714   */
  --bulma-text-title-l: 9%;

  /* DEPARTURE 1 — the reference sets muted text to ink at 55% alpha, which
     measures 3.84:1 on the bone page and 3.98:1 on white. Both fail WCAG AA
     for body text. 62% is the nearest step that clears it on both grounds
     (4.78:1 and 5.00:1) and is visually indistinguishable at reading size.
     --bulma-text-weak below is the same decision expressed in HSL, for the
     Bulma internals that read the token rather than --ink-muted: 40% measures
     4.95:1 on bone and 5.56:1 on white. */
  --bulma-text-weak-l: 40%;

  /* Primary action is ink, not a chrome accent — white on #1a1714 is 17.85:1 */
  --bulma-primary-h: 30;
  --bulma-primary-s: 13%;
  --bulma-primary-l: 9%;
  --bulma-primary-invert-l: 100%;
  --bulma-primary-invert-s: 0%;
  --bulma-primary-on-scheme-l: 9%;

  /* Links read as ink too; the underline carries the affordance */
  --bulma-link-h: 30;
  --bulma-link-s: 13%;
  --bulma-link-l: 20%;
  --bulma-link-on-scheme-l: 20%;
  --bulma-link-invert-l: 100%;
  --bulma-link-invert-s: 0%;

  /* Status colours lifted from the reference's illustration palette */
  --bulma-success-h: 147; --bulma-success-s: 59%; --bulma-success-l: 27%;
  --bulma-info-h: 221;    --bulma-info-s: 83%;    --bulma-info-l: 55%;
  --bulma-danger-h: 6;    --bulma-danger-s: 78%;  --bulma-danger-l: 47%;
  --bulma-warning-h: 35;  --bulma-warning-s: 91%; --bulma-warning-l: 61%;

  /* Soft, not print-sharp; nothing floats */
  --bulma-radius-small: 6px;
  --bulma-radius: var(--r-sm);
  --bulma-radius-large: var(--r-lg);
  --bulma-radius-rounded: 9999px;
  --bulma-shadow: none;

  --bulma-body-background-color: #f5f1eb;
  --bulma-navbar-background-color: #f5f1eb;
  --bulma-navbar-item-background-a: 0;

  --bulma-body-font-size: 0.9375rem;
  --bulma-body-family: var(--ui-sans);

  /* Code should read as ink, not as an error */
  --bulma-code: var(--bulma-text-strong);
  --bulma-code-background: var(--ink-fill);
  --bulma-pre-background: #faf8f5;
}

/* Bulma sets display on .box/.notification, and author styles beat the user
   agent's [hidden] rule — so the JS-toggled result and status panels would
   render on page load without this. */

[hidden] { display: none !important; }

/* --- Layout ------------------------------------------------------------- */

/* Sticky footer: a percentage min-height cannot resolve against an auto-height
   <html>, so the viewport units do the work instead. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--ui-sans);
  -webkit-font-smoothing: antialiased;
}

#main-content { flex: 1 0 auto; }

/* --- Type --------------------------------------------------------------- */
/* One sans family throughout — the reference uses no serif anywhere. */

.title,
.subtitle,
.navbar-brand .navbar-item {
  font-family: var(--ui-sans);
}

.title {
  font-weight: 600;
  letter-spacing: -0.018em;
}

.title.is-1,
.title.is-2 {
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.subtitle {
  font-weight: 400;
  color: var(--ink-muted);
}

.navbar-brand .navbar-item {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.navbar-item,
.button { font-size: 0.875rem; }

code, pre { font-family: var(--ui-mono); }

/* DEPARTURE 2 — Bulma hard-codes the grey text helpers to a blue-grey
   (#69748c) with !important and no variable behind it, which reads cold
   against warm bone. `.has-text-grey` is the most-used class in the templates
   after `.title`, so this is load-bearing rather than cosmetic. */

[data-theme=light] .has-text-grey { color: var(--ink-muted) !important; }
[data-theme=light] .has-text-grey-light { color: rgba(var(--ink), 0.45) !important; }
[data-theme=light] .has-text-grey-dark { color: var(--bulma-text) !important; }

/* --- Surfaces ----------------------------------------------------------- */
/* White sheets on bone, held by a hairline. No shadows anywhere. */

.box,
.card {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.card-content { padding: 1.5rem; }

.notification {
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-line);
}

.navbar { border-bottom: 1px solid var(--ink-line); }

.footer {
  border-top: 1px solid var(--ink-line);
  padding: 2.5rem 1.5rem;
  background-color: transparent;
  font-size: 0.82rem;
}

.footer a { color: var(--ink-muted); }
.footer a:hover { color: var(--bulma-text-strong); }

/* --- Controls ----------------------------------------------------------- */

.button {
  border-radius: var(--r-sm);
  font-weight: 500;
  transition: background-color 120ms ease-out, border-color 120ms ease-out,
              color 120ms ease-out;
}

.button.is-primary { font-weight: 600; }

.input,
.textarea,
.select select {
  border-radius: var(--r-sm);
  border-color: var(--ink-line);
  box-shadow: none;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--bulma-text-strong);
  box-shadow: 0 0 0 3px var(--ink-fill);
}

.label {
  font-weight: 500;
  font-size: 0.82rem;
}

.tag { border-radius: 9999px; }

/* --- Tables ------------------------------------------------------------- */

.table { --bulma-table-background-color: transparent; }

.table th {
  font-family: var(--ui-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom-color: var(--ink-line);
}

.table td { border-bottom-color: rgba(var(--ink), 0.10); }

/* --- Upload dropzone (app/static/app.js) -------------------------------- */

#dropzone {
  border: 1.5px dashed var(--ink-line);
  border-radius: var(--r-lg);
  background-color: var(--bulma-scheme-main);
  padding: 3.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

#dropzone:hover,
#dropzone:focus,
#dropzone.dragging {
  border-color: var(--bulma-text-strong);
  background-color: #faf8f5;
  outline: none;
}

#job-status.error { color: var(--bulma-danger); }

#result-text {
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--ui-mono);
  font-size: 0.82rem;
}

/* API key shown once — must stay readable and selectable */
.key-value {
  color: var(--bulma-text-strong);
  font-family: var(--ui-mono);
  user-select: all;
}

/* --- "or" separator between Google sign-in and the email form ----------- */

.or-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-muted);
  font-family: var(--ui-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--ink-line);
}

/* --- .heading ----------------------------------------------------------- */
/* Bulma 1.0 dropped the .heading stat-label helper that 0.9 shipped.
   Restored here because the dashboard and pricing cards read better with it. */

.heading {
  display: block;
  font-family: var(--ui-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: var(--ink-muted);
}