/* B.A.D. — plain base styles, shared by both front ends.
 *
 * Deliberately plain (client, 2026-09-28): the designer's pass replaces the values
 * in :root and the component rules below. Hooks:
 *   .screen--{boot,notice,text,image,review,processing,result,mismatch,error}
 *   .commentary--{respectful,ambiguous,pointed,savage,neutral}   (tone tag)
 *   .observation--{supported,partially_supported,unsupported,contradicted}
 *   .layout--{mobile,full}
 */
:root {
  --color-bg: #ffffff;
  --color-ink: #000000;
  --color-muted: #5f6368;
  --color-line: #c8c8c8;
  --color-accent: #1f3fbf;
  --color-accent-ink: #ffffff;
  --color-error: #b00020;

  --tone-respectful: #2e7d32;
  --tone-ambiguous: #8d6e00;
  --tone-pointed: #c25e00;
  --tone-savage: #b00020;
  --tone-neutral: #5f6368;

  --verdict-supported: #2e7d32;
  --verdict-partially_supported: #8d6e00;
  --verdict-unsupported: #c25e00;
  --verdict-contradicted: #b00020;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-score: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-score: 4.5rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --radius: 4px;
  --content-width: 34rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font: var(--text-md)/1.5 var(--font-body);
  -webkit-text-size-adjust: 100%;
}
#app {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
  min-height: 100dvh;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
p { margin: 0 0 var(--space-3); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ------------------------------------------------------------- controls */
.btn {
  display: inline-block;
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
}
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--disclosure { width: 100%; text-align: left; }
.btn--link { border: 0; padding: 0; min-height: 0; background: none; color: var(--color-accent); text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.actions .btn { flex: 1 1 auto; }

textarea {
  width: 100%;
  min-height: 45dvh;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
}
.hint, .counter, .help { color: var(--color-muted); font-size: var(--text-sm); }
.counter.is-over { color: var(--color-error); }

.toggle { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) 0; }
.toggle input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }
.segmented { display: flex; border: 1px solid var(--color-ink); border-radius: var(--radius); overflow: hidden; }
.segmented label { flex: 1; text-align: center; padding: var(--space-2); cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + span { font-weight: 700; text-decoration: underline; }
.segmented label:has(input:checked) { background: var(--color-ink); color: var(--color-bg); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* ------------------------------------------------------------- boot */
.screen--boot {
  min-height: 80dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer;
}
.boot__name { font-size: 3rem; font-weight: 800; margin: 0; }
.boot__subtitle { color: var(--color-muted); }
.boot__media { max-width: 100%; }

/* ------------------------------------------------------------- image input */
.image-preview { width: 100%; max-height: 50dvh; object-fit: contain; border: 1px solid var(--color-line); }
.image-buttons { display: flex; flex-direction: column; gap: var(--space-2); }

/* ------------------------------------------------------------- review */
.review__item { border-top: 1px solid var(--color-line); padding: var(--space-3) 0; }
.review__head { display: flex; justify-content: space-between; align-items: baseline; }
.review__excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review__thumb { max-width: 8rem; max-height: 8rem; object-fit: cover; }

/* ------------------------------------------------------------- processing */
.screen--processing { min-height: 60dvh; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.processing__animation { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.processing__animation span {
  width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-ink);
  animation: bad-pulse 1.2s infinite ease-in-out;
}
.processing__animation span:nth-child(2) { animation-delay: 0.2s; }
.processing__animation span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bad-pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.processing__stage { font-size: var(--text-lg); font-weight: 600; }
.processing__line { color: var(--color-muted); font-style: italic; min-height: 3em; }

/* ------------------------------------------------------------- result */
.result__score-label { margin: 0; color: var(--color-muted); }
.result__score-value { font: 800 var(--text-score)/1 var(--font-score); margin: 0 0 var(--space-3); }
.result__verdict { font: 800 2.5rem/1.1 var(--font-score); margin: 0 0 var(--space-3); }
.commentary {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-left: 4px solid var(--tone-neutral);
  font-size: var(--text-lg);
}
.commentary p { margin: 0; }
.commentary--respectful { border-color: var(--tone-respectful); }
.commentary--ambiguous { border-color: var(--tone-ambiguous); }
.commentary--pointed { border-color: var(--tone-pointed); }
.commentary--savage { border-color: var(--tone-savage); }
.commentary--neutral { border-color: var(--tone-neutral); }
.commentary__loading { color: var(--color-muted); font-style: italic; }
.result__details { padding-top: var(--space-3); }

.scores { margin: 0 0 var(--space-4); }
.scores__row { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
.scores dt { margin: 0; }
.scores dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.scores__bar { grid-column: 1 / -1; height: 4px; background: var(--color-line); margin-top: var(--space-1); }
.scores__bar span { display: block; height: 100%; background: var(--color-ink); }

.observations ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.observation { padding: var(--space-3) 0 var(--space-3) var(--space-3); border-left: 4px solid var(--color-line); margin-bottom: var(--space-3); }
.observation p { margin: 0 0 var(--space-1); }
.observation__verdict { font-weight: 700; }
.observation__label { color: var(--color-muted); }
.observation--supported { border-color: var(--verdict-supported); }
.observation--partially_supported { border-color: var(--verdict-partially_supported); }
.observation--unsupported { border-color: var(--verdict-unsupported); }
.observation--contradicted { border-color: var(--verdict-contradicted); }

.mismatch-reason { margin-bottom: var(--space-4); }
.submitted__image { max-width: 100%; max-height: 40dvh; display: block; margin-bottom: var(--space-3); }
.submitted__text { white-space: pre-wrap; max-height: 30dvh; overflow: auto; border: 1px solid var(--color-line); padding: var(--space-2); font-size: var(--text-sm); }

/* Exhibition: everything on one page, two columns on a landscape display. */
.layout--full { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.layout--full .actions, .layout--full .demo-banner { grid-column: 1 / -1; }

/* ------------------------------------------------------------- error / misc */
.error__message { font-size: var(--text-lg); }
.demo-banner { background: var(--color-ink); color: var(--color-bg); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

@media (prefers-reduced-motion: reduce) {
  .processing__animation span { animation: none; opacity: 0.6; }
}