/* Vision-Braille V3 — small overrides on top of Pico.css.
   Goal: keep accessibility defaults strong, add the few layouts Pico can't
   express (example grid, focus halo, large tap targets). */

:root {
  --vb-focus: #ff8c00;
  /* Override Pico's default sans stack with one that prefers modern
     Chinese system fonts (PingFang on macOS, Microsoft YaHei on Windows,
     Noto Sans CJK on Linux/ChromeOS). Falls back to Pico's defaults. */
  --pico-font-family-sans-serif:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Arial",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
    "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
}

/* Skip link: hidden until keyboard-focused, then highly visible. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  padding: 8px 12px;
  background: var(--pico-color);
  color: var(--pico-background-color);
  border-radius: 6px;
  z-index: 1000;
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid var(--vb-focus);
}

/* Visually-hidden helper for SR-only text. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Stronger focus indicator across the whole app — Pico's default is subtle.
   :focus is the fallback for browsers that don't support :focus-visible
   (Android WebView <86); :focus-visible is preferred when available. */
*:focus { outline: 3px solid var(--vb-focus); outline-offset: 2px; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 3px solid var(--vb-focus); outline-offset: 2px; }

/* Active language link in header. */
.active-lang {
  font-weight: 700;
  text-decoration: underline;
}

/* Example image grid — three responsive cards that act as submit buttons.
   `gap` is supported on all CSS Grid implementations (Android 5+), so the
   fallback margin trick isn't needed. Older browsers without grid get
   a stacked layout via the flexbox fallback below. */
.example-grid {
  display: -webkit-box;     /* old Android WebView */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -0.5rem;          /* gap fallback for flex */
}
.example-grid > * { margin: 0.5rem; flex: 1 1 220px; }
@supports (display: grid) {
  .example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0;
  }
  .example-grid > * { margin: 0; }
}
.example-card {
  display: block;
  padding: 0.75rem;
  background: #fff;
  border: 2px solid #d0d7de;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  width: 100%;
}
.example-card:hover, .example-card:focus {
  border-color: var(--pico-primary, #0a6cff);
  background: #f6f9ff;
}
/* `aspect-ratio` is Chrome 88+ / Android 8+; pad-bottom hack works everywhere. */
.example-card .img-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 75%;       /* 4:3 */
  background: #d0d7de;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.example-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@supports (aspect-ratio: 1) {
  .example-card .img-wrap { padding-bottom: 0; aspect-ratio: 4 / 3; }
  .example-card img { position: static; }
}

/* Tutorial photo grid (3 wrong examples). */
.tutorial-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -0.5rem;
}
.tutorial-grid > * { margin: 0.5rem; flex: 1 1 180px; }
@supports (display: grid) {
  .tutorial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 0;
  }
  .tutorial-grid > * { margin: 0; }
}
.tutorial-grid img,
section figure img {
  width: 100%;
  border-radius: var(--pico-border-radius);
}

/* Result region: keep <pre> readable (it carries the raw braille). */
#results pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 1.1rem;
  line-height: 1.5;
}
#results p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* HTMX loading indicator — only visible during a request. */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: block;
}

/* Toast styles (feedback submit). */
.toast {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius);
}
.toast-info {
  background: #d1f3df;
  color: #0a3d23;
  border-left: 4px solid #1f9d55;
}
.toast-warn {
  background: #fff4d6;
  color: #5a3a00;
  border-left: 4px solid #d97706;
}
.error {
  background: #fde2e2;
  color: #6b1a1a;
  border-left: 4px solid #c53030;
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius);
}

/* Visible quick-tips callout near the top of the page.
   Uses explicit colors (not theme vars) so the contrast stays readable
   in both light and dark modes and on browsers that don't support
   custom properties at all (very old Android WebViews). */
.quick-tips {
  background: #fff8e1;       /* warm cream */
  color: #3d2c00;             /* deep brown */
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.quick-tips h2 {
  font-size: 1.15rem;
  margin: 0.25rem 0 0.5rem;
  color: inherit;
}
.quick-tips ul {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.6;
}
.quick-tips strong { color: inherit; }

/* Camera dialog: cap width on large screens so the video isn't enormous. */
#camera-dialog article {
  max-width: 640px;
  width: 100%;
}

/* Mode-selector radios: larger tap targets, side-by-side on wide screens. */
fieldset label {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.25rem 0;
  font-size: 1.05rem;
}

/* Make all primary buttons comfortably big. */
button[type="submit"] {
  font-size: 1.05rem;
}

/* Respect reduced-motion preference for HTMX swaps. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0s !important; transition: none !important; }
}

/* Footer version tag */
footer .version { display: block; margin-top: 0.25rem; opacity: 0.6; }

/* Wake-up panel (shown while the GPU model is starting on demand). */
.wake-panel { text-align: center; padding: 1.5rem; }
.wake-spinner {
  width: 2rem; height: 2rem; margin: 0 auto .75rem;
  /* Theme-aware: track is a faint tint of the text color, the moving arc is
     the full text color — so it stays crisp on both light and dark cards. */
  border: 3px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: wake-spin 1s linear infinite;
}
@keyframes wake-spin { to { transform: rotate(360deg); } }
.wake-title { font-weight: 600; margin: 0 0 .25rem; }
.wake-elapsed { font-variant-numeric: tabular-nums; opacity: .7; }