/*
 * base.css — shared PezilloWeb styles built on top of css/theme.css.
 * Source of truth throughout: PezilloWeb/SPEC.md (Sections 1-7).
 */

@import url('theme.css');

/* ---------------- Reset ---------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/*
 * Bug found on real-device testing (2026-09-28, pezillo.com): tapping any
 * button/link showed an ugly solid gray rectangle over its tap area. That's
 * two separate mobile-browser defaults stacking on top of each other: (1)
 * Chrome/Brave's `-webkit-tap-highlight-color`, a translucent gray flash
 * drawn over the whole tappable box on touch, and (2) the default `:focus`
 * outline, which mobile browsers also apply after a tap (not just keyboard
 * focus) and which renders as a rectangle even on round/pill-shaped buttons.
 * Neither exists in the native Android app (no such touch-feedback treatment
 * in the design), so both are suppressed globally; buttons still get a
 * lightweight custom `:focus-visible` ring for keyboard/accessibility use.
 */
* {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  outline: none;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-aqua);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
}

/*
 * Bug found on real-device testing (2026-09-28, pezillo.com): several
 * components (.paused-actions, .training-flash-overlay, etc.) set their own
 * `display` value in an author stylesheet. The browser's built-in
 * `[hidden] { display: none }` rule lives in the lowest-priority UA
 * stylesheet, so ANY same-specificity author rule wins over it even though
 * specificity is nominally "equal" — the `hidden` attribute was being
 * silently ignored everywhere a component also had its own `display: flex`
 * rule, making paused/training-flash/etc. UI show up incorrectly on load.
 * This single global override (high specificity via !important) makes
 * `hidden` win unconditionally again, everywhere, without having to patch
 * every individual component rule one by one.
 */
[hidden] {
  display: none !important;
}

button {
  font: inherit;
  color: inherit;
}

/* ---------------- Body / page background ---------------- */
/*
 * SPEC.md 4 (bg_gradient*.xml): the texture bitmap is explicitly a single
 * STRETCHED, non-tiling bitmap (android:gravity="fill") — an earlier attempt to
 * tile a small texture caused a visible grid-seam pattern on real devices, so it
 * was deliberately changed to stretch-to-fill instead. Mirrored here with
 * background-size: cover + no-repeat; never `repeat`.
 */
body {
  font-family: 'LT Colored Pencil', sans-serif;
  color: var(--color-text-primary);
  background-color: var(--color-bg-top);
  background-image: var(--bg-texture-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---------------- Header (SPEC.md 7, "near-universal header row pattern") ---------------- */
.app-header {
  display: flex;
  align-items: center;
}

.app-header__logo {
  /* Default 22px per the shared header pattern (SPEC.md 7 intro). MainActivity's
     own header uses 26px instead (SPEC.md 7.1) — use .app-header--main to bump it. */
  width: 22px;
  height: 22px;
  /* Bug found on real-device testing (2026-09-28): ic_app_logo.png is a wide
     (non-square) source image, but width+height above force it into a square
     box — without object-fit, <img> stretches/distorts to fill that box
     exactly, squashing the logo horizontally. object-fit: contain keeps its
     real aspect ratio and letterboxes inside the box instead of deforming it. */
  object-fit: contain;
  flex-shrink: 0;
  /*
   * The Android logo ImageView is tinted ?attr/colorAqua at runtime (a single-
   * channel tint on a bitmap). ic_app_logo.png is a plain PNG, not a vector/mask,
   * so CSS can't retint its drawn pixels the way an Android ColorFilter can
   * without an SVG/mask source we don't have. Decision: do NOT attempt a CSS
   * filter hack (grayscale+brightness+sepia chains only approximate a single hex
   * tint and drift across the light/dark swap). Leave the PNG's own baked-in
   * color as-is; it already reads correctly as a dark pencil mark on light paper
   * and should be re-exported per-theme upstream if a dark-theme (light-on-dark)
   * variant is ever needed. Documented here rather than silently guessing.
   */
}

.app-header--main .app-header__logo {
  width: 26px;
  height: 26px;
}

.app-header__title {
  flex: 1;
  margin-left: 10px;
  letter-spacing: 0.08em;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-primary);
  text-transform: uppercase;
}

/* MainActivity's header title is 17sp / 0.06em tracking instead of 18sp/0.08em
   (SPEC.md 7.1) — main-only override. */
.app-header--main .app-header__title {
  font-size: 17px;
  letter-spacing: 0.06em;
}

/*
 * The ic_divider_lines sketch-divider that used to sit under headers was removed
 * from almost every screen per explicit user request 2026-08-23 (SPEC.md 4, 7).
 * Only activity_session_log.xml keeps it. Intentionally no .app-header divider
 * rule here — pages that need it (session log) can add a one-off element.
 */

/* ---------------- Icon buttons (header nav: training/history/settings) ---------------- */
/*
 * bg_circle_ghost.xml: oval, solid ?attr/colorCardBg — same color as the page
 * background, i.e. an "invisible" circular hit-area (SPEC.md 4). 44x44dp per
 * SPEC.md 7.1 (portrait); landscape shrinks this to 32x32 but we treat that as a
 * responsive concern for the page CSS, not this shared class.
 */
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /*
   * Bug found on real-device testing (2026-09-28): a flat --color-card-bg
   * fill only matches the PAGE'S base color, not what the page actually
   * shows — the page also paints the paper/chalkboard texture image over
   * that color (see body{} in this same file). A plain flat circle on top
   * of a textured backdrop reads as a visible solid dark blob instead of
   * the intended "invisible ghost button" (bg_circle_ghost.xml originally
   * relied on being on a plain color background, which the web version
   * isn't). Fix: paint the SAME texture image with the SAME
   * background-attachment: fixed as body{} — because `fixed` positions the
   * image relative to the viewport (not the element), the button's patch of
   * texture lines up pixel-for-pixel with the page behind it, so the button
   * genuinely disappears into the background again, on both themes.
   */
  background-color: var(--color-card-bg);
  background-image: var(--bg-texture-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.icon-btn + .icon-btn {
  margin-left: 10px;
}

.icon-btn img {
  width: 22px;
  height: 22px;
  /* See .app-header__logo comment above re: PNG tinting limitation — same
     reasoning applies to ic_history/ic_settings/ic_training_plan.png. */
}

.icon-btn--lg img {
  width: 26px;
  height: 26px;
}

/* ---------------- Cards ---------------- */
/*
 * SPEC.md 4: bg_card.xml / bg_card_accent_top.xml both had their <stroke> removed
 * in a deliberate visual experiment ("PRUEBA VISUAL", user request 2026-08-23),
 * leaving corner-radius-only shapes with NO solid fill and NO stroke — content
 * floats directly on the page's paper/slate texture with no visible card
 * silhouette. We replicate that literally: no background, no border, just the
 * radius + padding, so a future hover/focus treatment has a clear shape to key
 * off if ever reintroduced (SPEC.md flags this as a legitimate open question for
 * the web rebuild, since web needs affordances native touch didn't).
 */
.card {
  border-radius: 16px;
  padding: 16px;
  background: transparent;
  border: none;
}

/* bg_card_accent_top.xml is drawable-identical to bg_card.xml today (no visual
   "accent" left after the stroke removal) — kept as an alias class per SPEC.md 4
   so markup can still express "this is the primary/accent card" semantically. */
.card--accent-top {
  border-radius: 16px;
  padding: 16px;
  background: transparent;
  border: none;
}

/*
 * bg_card_dark.xml deliberately KEEPS its fill (SPEC.md 4) — used for the
 * debug/log panel because its content (monospace log text) needs a distinct
 * panel, unlike normal content cards.
 */
.card--dark {
  background: var(--color-card-bg-dark);
  border-radius: 12px;
  padding: 14px;
}

/* ---------------- Pill buttons ---------------- */
/*
 * SPEC.md 4 is explicit that EVERY *.xml pill drawable (bg_button_pill,
 * _aqua, _danger, _warning) currently has no solid fill and no stroke — all
 * differences between them today are purely which drawable MainActivity swaps
 * in at runtime, but visually, with fill+stroke both stripped, they render
 * identically as bare shapes. Since a completely colorless button set would
 * make Pause/Finish/Resume indistinguishable on the web (native taps rely on
 * position + label text, which is enough on a physical button but weaker
 * feedback on a web pill with no chrome at all), we use TEXT COLOR as the one
 * remaining differentiator: aqua/danger/warning classes set only `color`,
 * still with fully transparent background/border, staying faithful to "no
 * fill, no stroke" while keeping some state feedback. This is a judgment call
 * where SPEC.md is ambiguous ("sin relleno en absoluto" vs "colorea algo") —
 * documented here explicitly per the project's instruction to flag such calls.
 */
.btn-pill {
  border-radius: 45px;
  background: transparent;
  border: none;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 14px 24px;
  text-align: center;
  text-transform: none;
}

.btn-pill--aqua {
  color: var(--color-aqua);
}

.btn-pill--danger {
  color: var(--color-danger-red);
}

.btn-pill--warning {
  color: var(--color-warning-yellow);
}

/* START button: 28sp bold (SPEC.md 7.1 btnStartStop). */
.btn-pill--lg {
  font-size: 28px;
}

/* RESUME/FINALIZAR/PAUSAR and most other pills: 17sp/16sp bold (SPEC.md 7.1, 7.10). */
.btn-pill--md {
  font-size: 17px;
}

.btn-pill--sm {
  font-size: 15px;
}

/* ---------------- Inputs ---------------- */
/* bg_input_pill.xml: corner radius 16dp, no fill/stroke (SPEC.md 4) — same
   "floats on page" treatment as cards/buttons. */
.input-pill {
  border-radius: 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-pencil-line-soft);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text-primary);
  width: 100%;
}

.input-pill:focus {
  outline: none;
  border-bottom-color: var(--color-aqua);
}

/* ---------------- Status dot ---------------- */
/*
 * bg_dot.xml (SPEC.md 4): a layered oval — (1) a large 25%-white halo oval, (2)
 * a small 5x5dp solid oval — the whole drawable is tinted one runtime color
 * (aqua/coral/text_muted), which recolors both layers together via the tint's
 * own alpha preservation, producing a soft glow without any real blur. We
 * replicate with a small circle (5-6px) plus a box-shadow "halo" ring in the
 * same currentColor family at ~25% opacity, both driven off one modifier class
 * so a single class swap updates both parts together, matching the single-tint
 * behavior.
 */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-text-muted);
  box-shadow: 0 0 0 6px rgba(var(--color-text-muted-rgb), 0.25);
}

.status-dot--aqua {
  background: var(--color-aqua);
  box-shadow: 0 0 0 6px rgba(var(--color-aqua-rgb), 0.25);
}

.status-dot--coral {
  background: var(--color-coral);
  box-shadow: 0 0 0 6px rgba(var(--color-coral-rgb), 0.25);
}

.status-dot--muted {
  background: var(--color-text-muted);
  box-shadow: 0 0 0 6px rgba(var(--color-text-muted-rgb), 0.25);
}

/* ---------------- Progress bar ---------------- */
/* bg_progress_track.xml / bg_progress_fill.xml (SPEC.md 4): reduced from an
   earlier 8dp to 3dp tall per user request; track = card-bg-dark, fill = aqua,
   both 4dp corner radius. */
.progress-track {
  width: 100%;
  height: 3px;
  border-radius: 4px;
  background: var(--color-card-bg-dark);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--color-aqua);
  width: 0%;
  /* width set by JS at runtime, mirrors trainingProgressFill's layout_weight */
}

/* ---------------- Dialogs ---------------- */
/*
 * dialog_confirm.xml / dialog_paste_training_plan.xml (SPEC.md 7.10/7.11):
 * bg_dialog.xml is a FLAT theme color (?attr/colorCardBg), 20dp radius — the
 * SPEC explains a bitmap-texture background was tried and reverted for
 * variable-size dialog windows because a bitmap inside a layer-list doesn't
 * reliably stretch/crop to an unknown final size; a flat opaque color is the
 * robust choice. Root margin 24dp, padding 20dp in the source layout.
 */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.dialog-box {
  background: var(--color-card-bg);
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 340px;
}

.dialog-box__title {
  letter-spacing: 0.02em;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-text-primary);
  margin: 0;
}

.dialog-box__message {
  margin-top: 10px;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.dialog-box__actions {
  display: flex;
  margin-top: 20px;
  gap: 12px;
}

.dialog-box__actions .btn-pill {
  flex: 1;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 16px;
}

/* ---------------- Text utilities ---------------- */
.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

/* ---------------- Page container ---------------- */
/*
 * The original layouts are single-column, padding=20dp, match_parent width
 * (mobile-only app). For desktop we simply cap the width so the "paper" column
 * reads well instead of stretching edge-to-edge, and center it — no distinct
 * desktop layout is warranted since the design is intrinsically one column
 * (SPEC.md 7 intro: "matching a stated user preference for no horizontal
 * scroll on any screen").
 */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
}

/* ---------------- Monospace overrides ---------------- */
/*
 * SPEC.md 5: android:fontFamily="monospace" appears in exactly three places —
 * the debug label + detection history log (activity_main.xml), and the
 * exported session log (activity_session_log.xml) — all "raw technical log"
 * views deliberately kept monospace for column alignment, overriding the
 * pencil font.
 */
.monospace {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}