/*
SG Greenfield — Child Theme Presentation Layer MVP
Site: kyotei-sg.needful.jp
Task: SG-MEDIA-WP-CHILD-THEME-MVP-IMPLEMENT-01
Authority: 04_site-profiles/kyotei-sg.needful.jp/CHILD_THEME_DESIGN.md

RENDER ONLY. No Prediction / Result / Verification logic. All state values
(status text, delta text, timestamps, hashes) are expected to be injected by
the theme template layer from an already-resolved upstream Contract; this
stylesheet supplies presentation only and makes no decisions.

Namespace: .sg-* exclusively. No AFFINGER Parent class is redefined here.
No .kr-* (karatsu namespace) is used or referenced.

Visual tokens (color) are informed by sg-greenfield-lp-final-prototype-v2.html
as VISUAL REFERENCE ONLY — no JS, no business logic, no field names were
copied from that file. Typography intentionally omits new @font-face /
Google Fonts loading: kyotei-sg.needful.jp currently loads only Roboto via
AFFINGER core, so serif/sans/mono below declare the LP's intended family
names with a standard system fallback stack, and will silently render as
the fallback until/unless a font is separately, explicitly authorized.
*/

.sg-scope {
  --sg-bg: #0A111E;
  --sg-bg2: #0E1727;
  --sg-panel: #121D30;
  --sg-panel2: #16233A;
  --sg-line: #243349;
  --sg-line-soft: #1B2839;
  --sg-text: #E9ECF1;
  --sg-muted: #97A4B6;
  --sg-faint: #6B7A8F;
  --sg-cyan: #45C8D8;
  --sg-cyan-deep: #2AA8B8;
  --sg-cyan-dim: rgba(69, 200, 216, 0.10);
  --sg-paper: #F1EEE6;
  --sg-paper-ink: #141B27;
  --sg-paper-muted: #5A6270;
  --sg-paper-line: #D8D3C6;

  /* Boat identifier colors. Text-contrast pairs are fixed per boat and are
     not general-purpose theme colors — do not reuse outside .sg-boat*. */
  --sg-boat1-bg: #F4F4F2; --sg-boat1-text: #1A1A1A;
  --sg-boat2-bg: #191C21; --sg-boat2-text: #F4F4F2;
  --sg-boat3-bg: #CE4040; --sg-boat3-text: #FFFFFF;
  --sg-boat4-bg: #2F63C4; --sg-boat4-text: #FFFFFF;
  --sg-boat5-bg: #E0B22E; --sg-boat5-text: #231D06;
  --sg-boat6-bg: #2E9E5B; --sg-boat6-text: #FFFFFF;

  --sg-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sg-sans: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --sg-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --sg-radius: 6px;
  --sg-gap: 12px;

  color: var(--sg-text);
  background: var(--sg-bg);
  font-family: var(--sg-sans);
}

.sg-scope a { color: var(--sg-cyan); }

/* ---------------------------------------------------------------------
   1. Record Ledger (§6 Record Ledger / §7 Phase Status / §8 Prediction Delta)
   Theme renders only. section_available / status / delta values below are
   expected as data-* attributes or text content supplied by the template.
--------------------------------------------------------------------- */

.sg-record-ledger {
  display: flex;
  flex-direction: column;
  gap: var(--sg-gap);
  padding: var(--sg-gap);
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
}

.sg-record-ledger__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sg-gap);
  padding: 10px 0;
  border-bottom: 1px solid var(--sg-line-soft);
  font-family: var(--sg-mono);
  font-size: 13px;
}

.sg-record-ledger__item:last-child { border-bottom: none; }

.sg-record-ledger__label {
  color: var(--sg-muted);
  letter-spacing: 0.04em;
}

/* Status is text-first. Color is supplementary only; do not remove the
   text label to rely on color alone. */
.sg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--sg-mono);
  border: 1px solid var(--sg-line);
  color: var(--sg-text);
  background: var(--sg-panel2);
}

.sg-status--unreached   { color: var(--sg-faint); }
.sg-status--recorded    { color: var(--sg-cyan); border-color: var(--sg-cyan-deep); }
.sg-status--pending     { color: var(--sg-muted); }
.sg-status--unavailable { color: var(--sg-faint); border-style: dashed; }

/* Short legend, optional. Theme does not decide when to show it. */
.sg-status-legend {
  font-family: var(--sg-mono);
  font-size: 11px;
  color: var(--sg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------------------------------------------------------------------
   2. Prediction Delta / Additional Evidence (§8, distinct-state rule)
   "追加情報あり ≠ 予測変更あり" — kept as two separate badges, never merged.
--------------------------------------------------------------------- */

.sg-delta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sg-delta,
.sg-additional-evidence {
  font-family: var(--sg-mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
}

.sg-delta__label,
.sg-additional-evidence__label {
  color: var(--sg-faint);
  margin-right: 6px;
}

.sg-delta--changed      { border-color: var(--sg-cyan-deep); color: var(--sg-cyan); }
.sg-delta--unchanged     { color: var(--sg-muted); }
.sg-delta--no-comparison { color: var(--sg-faint); border-style: dashed; }

/* ---------------------------------------------------------------------
   3. Section Visual Boundary (§3) + Public Section Labels (§5 / §16)
   One boundary treatment per public section kind. Background + border +
   spacing + small label carry the distinction — no animation, no JS.
--------------------------------------------------------------------- */

.sg-section {
  padding: 16px;
  margin: 16px 0;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  background: var(--sg-panel);
}

.sg-section__label {
  font-family: var(--sg-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--sg-faint);
  text-transform: none; /* labels are Japanese; do not force casing */
  margin-bottom: 10px;
  display: block;
}

.sg-section__heading {
  font-family: var(--sg-serif);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
}

/* 予測記録 */
.sg-section--prediction-evidence {
  background: var(--sg-panel);
  border-color: var(--sg-line);
}

/* 記録された事実 */
.sg-section--fact {
  background: var(--sg-panel2);
  border-left: 3px solid var(--sg-cyan-deep);
}

/* 公式結果 */
.sg-section--result {
  background: var(--sg-panel);
  border-left: 3px solid var(--sg-cyan);
}

/* 機械検証 */
.sg-section--verification {
  background: var(--sg-panel2);
  border-style: dashed;
}

/* 公式・選手本人の一次情報 */
.sg-section--first-party-evidence {
  background: var(--sg-panel);
  border-left: 3px solid var(--sg-muted);
}

/* 振り返り・分析 */
.sg-section--analysis {
  background: var(--sg-bg2);
  border-color: var(--sg-line-soft);
}

/* 次回の検証ポイント */
.sg-section--next-improvement {
  background: var(--sg-bg2);
  border-color: var(--sg-line-soft);
  border-style: dotted;
}

/* 訂正履歴 */
.sg-section--correction-log {
  background: var(--sg-panel2);
  border-left: 3px solid var(--sg-boat3-bg);
}

/* ---------------------------------------------------------------------
   4. Navigation (§10 Mobile) — standard anchor only, no JS, no sticky nav.
--------------------------------------------------------------------- */

.sg-anchor-return {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--sg-mono);
  font-size: 12px;
  color: var(--sg-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--sg-line);
}

.sg-anchor-return:hover { color: var(--sg-cyan); }

/* Fill in only after real fixed-header measurement on kyotei-sg.needful.jp.
   Left at 0 intentionally — do not guess a header height. */
.sg-anchor-target {
  scroll-margin-top: 0;
}

/* ---------------------------------------------------------------------
   5. Correction (§9 / §16 Correction Log)
--------------------------------------------------------------------- */

.sg-correction-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 10px;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-boat3-bg);
  color: var(--sg-boat3-bg);
  font-family: var(--sg-mono);
  font-size: 12px;
}

.sg-correction-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-correction-log__entry {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sg-line-soft);
  font-size: 13px;
}

.sg-correction-log__entry:last-child { border-bottom: none; }

.sg-correction-log__at {
  font-family: var(--sg-mono);
  font-size: 11px;
  color: var(--sg-faint);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   6. Boat Identifier (§12) — number primary, color supplementary.
   Never rely on color alone: boat number text must always be present.
--------------------------------------------------------------------- */

.sg-boat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--sg-mono);
  font-weight: 500;
  font-size: 14px;
}

.sg-boat--1 { background: var(--sg-boat1-bg); color: var(--sg-boat1-text); border: 1px solid var(--sg-line); }
.sg-boat--2 { background: var(--sg-boat2-bg); color: var(--sg-boat2-text); }
.sg-boat--3 { background: var(--sg-boat3-bg); color: var(--sg-boat3-text); }
.sg-boat--4 { background: var(--sg-boat4-bg); color: var(--sg-boat4-text); }
.sg-boat--5 { background: var(--sg-boat5-bg); color: var(--sg-boat5-text); }
.sg-boat--6 { background: var(--sg-boat6-bg); color: var(--sg-boat6-text); }

/* Label pattern helper: "◯号艇" text is expected in markup alongside
   .sg-boat, e.g. <span class="sg-boat sg-boat--1">1</span>号艇 */
.sg-boat-label {
  font-family: var(--sg-sans);
  font-size: 13px;
  margin-left: 6px;
}

/* ---------------------------------------------------------------------
   7. Six-Boat Table (§11) — horizontal scroll only inside the wrapper,
   never the page. Fade affordance is CSS-only.
--------------------------------------------------------------------- */

.sg-boat-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
}

.sg-boat-table-wrap::after {
  content: "";
  position: sticky;
  right: 0;
  top: 0;
  display: block;
  width: 28px;
  height: 100%;
  margin-left: -28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--sg-panel));
}

.sg-boat-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-family: var(--sg-mono);
  font-size: 12.5px;
}

.sg-boat-table th,
.sg-boat-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--sg-line-soft);
  text-align: left;
  white-space: nowrap;
}

/* Sticky first column: RECOMMENDED by Authority §11, but NOT applied by
   default here. This modifier is opt-in and UNVERIFIED against the live
   AFFINGER table CSS on kyotei-sg.needful.jp — apply only after a
   Targeted check confirms no conflict, per Authority instruction to defer
   rather than force it. */
.sg-boat-table--sticky-col th:first-child,
.sg-boat-table--sticky-col td:first-child {
  position: sticky;
  left: 0;
  background: var(--sg-panel);
}

/* ---------------------------------------------------------------------
   8. Dashboard CTA (§13) — restrained, never Hero-primary weight.
--------------------------------------------------------------------- */

.sg-dashboard-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-cyan-deep);
  color: var(--sg-cyan);
  background: transparent;
  font-family: var(--sg-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.sg-dashboard-cta:hover {
  background: var(--sg-cyan-dim);
}

.sg-dashboard-cta--header {
  font-size: 11px;
  padding: 5px 10px;
}

/* ---------------------------------------------------------------------
   9. Freeze Evidence display frame (§14) — display container only.
   No hash generation, no frozen_at generation happens here or nearby;
   values are expected to be supplied already-resolved.
--------------------------------------------------------------------- */

.sg-freeze-evidence {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px dashed var(--sg-line);
  border-radius: var(--sg-radius);
  background: var(--sg-bg2);
  font-family: var(--sg-mono);
  font-size: 12px;
  color: var(--sg-muted);
}

.sg-freeze-evidence__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sg-freeze-evidence__row dt { color: var(--sg-faint); }
.sg-freeze-evidence__row dd { margin: 0; color: var(--sg-text); word-break: break-all; }

/* ---------------------------------------------------------------------
   10. Legacy DAY1 presentation (§15)
--------------------------------------------------------------------- */

.sg-legacy-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  color: var(--sg-faint);
  font-family: var(--sg-mono);
  font-size: 11px;
}

/* ---------------------------------------------------------------------
   11. Updated State (§13) — text is primary; no relative "Current Phase"
   wording is used anywhere in markup that consumes this class.
--------------------------------------------------------------------- */

.sg-updated-at {
  font-family: var(--sg-mono);
  font-size: 11.5px;
  color: var(--sg-faint);
}

/* ---------------------------------------------------------------------
   12. Event Visual Switch (Task: SG-MEDIA-WORDPRESS-EVENT-VISUAL2-INSERT-01)
   A <figure> holding both a desktop and a mobile image, toggled by a
   single max-width breakpoint so only one is ever painted at a time.
   Theme does not decide WHICH images are used — markup supplies both
   <img> elements already; this class pair only switches visibility.
   Breakpoint (767px) matches the Task's own "Mobile目安767px以下" spec.
--------------------------------------------------------------------- */

.sg-event-visual-switch {
  margin: 24px 0;
}

.sg-event-visual-switch img {
  /* display is intentionally NOT set here — .sg-event-visual--desktop /
     .sg-event-visual--mobile below are the sole source of truth for it.
     Setting display on this class+element selector would outrank those
     single-class toggle rules on specificity (0,1,1 > 0,1,0) regardless
     of source order, permanently showing both images at once. */
  width: 100%;
  height: auto;
  border-radius: var(--sg-radius);
}

.sg-event-visual-switch figcaption {
  margin-top: 8px;
  font-family: var(--sg-mono);
  font-size: 12px;
  color: var(--sg-muted);
  text-align: center;
}

.sg-event-visual--desktop {
  display: block;
}

.sg-event-visual--mobile {
  display: none;
}

@media (max-width: 767px) {
  .sg-event-visual--desktop {
    display: none;
  }
  .sg-event-visual--mobile {
    display: block;
  }
}