/* ============================================================================
   claudia-seikatsu.css  ·  The Japanese Gengo — Chapter 7 component layer (生活)
   Daily-life survival kit: clock + time builder, the seven-luminary week grid,
   a mock city-hall form, and survival "SOS" phrase cards.
   Link AFTER claudia-gengo-core.css (kana-kazu for .counter-grid/.quest/.kanji-card).
   Author: Ms. Claudia · for Cesar Borgenkrans / sparklesnap.dev
   ========================================================================== */

/* ---- 1. Decorative clock face ---- */
.clockface { width: 92px; height: 92px; border: 4px solid var(--matcha); border-radius: 50%; position: relative;
  background: radial-gradient(circle, #fff 60%, #f3f6ef 100%); flex: 0 0 auto; }
.clockface .tick { position: absolute; font-family: var(--f-mono); font-size: 9px; color: var(--ink-soft); }
.clockface .t12 { top: 3px; left: 50%; transform: translateX(-50%); }
.clockface .t3 { right: 4px; top: 50%; transform: translateY(-50%); }
.clockface .t6 { bottom: 3px; left: 50%; transform: translateX(-50%); }
.clockface .t9 { left: 5px; top: 50%; transform: translateY(-50%); }
.clockface .hand { position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; border-radius: 4px; }
.clockface .hour { width: 4px; height: 24px; background: var(--ink); transform: translateX(-50%) rotate(285deg); }
.clockface .min { width: 3px; height: 32px; background: var(--kyoto-red); transform: translateX(-50%) rotate(180deg); }
.clockface .pin { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: var(--ink);
  border-radius: 50%; transform: translate(-50%, -50%); }

/* ---- 2. Time builder (X時 Y分) ---- */
.time-build { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.tb { text-align: center; min-width: 44px; }
.tb .big { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.tb .ro { font-family: var(--f-mono); font-size: .66rem; color: var(--ink-soft); display: block; }
.tb.unit .big { color: var(--teal); }
.tb .sep { font-size: 1.4rem; color: var(--ink-soft); }

/* ---- 3. The seven-luminary week ---- */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0; }
.day { border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); text-align: center; }
.day .el { font-family: var(--f-serif-jp); font-weight: 900; font-size: 1.7rem; padding: 8px 0 6px; line-height: 1; }
.day .nm { font-family: var(--f-sans-jp); font-weight: 700; font-size: .72rem; color: var(--ink); }
.day .ro { font-family: var(--f-mono); font-size: .55rem; color: var(--ink-soft); }
.day .en { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 2px 0; }
.day.d-moon  .el{background:#eef1f6;color:#475569} .day.d-moon  .en{background:#64748b}
.day.d-fire  .el{background:#fdecea;color:#dc2626} .day.d-fire  .en{background:#dc2626}
.day.d-water .el{background:#e7f6fb;color:#0891b2} .day.d-water .en{background:#0891b2}
.day.d-tree  .el{background:#eafaef;color:#16a34a} .day.d-tree  .en{background:#16a34a}
.day.d-gold  .el{background:#fdf6e3;color:#ca8a04} .day.d-gold  .en{background:#ca8a04}
.day.d-earth .el{background:#f4eee6;color:#92614b} .day.d-earth .en{background:#92614b}
.day.d-sun   .el{background:#fff0e6;color:#ea580c} .day.d-sun   .en{background:#ea580c}

/* ---- 4. Mock city-hall form ---- */
.gov-form { border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); }
.gov-form .gf-title { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--matcha); color: #fff; padding: 6px 10px; display: flex; justify-content: space-between; }
.gf-row { display: flex; border-bottom: 1.5px solid var(--matcha-bg); }
.gf-row:last-child { border-bottom: 0; }
.gf-label { width: 140px; flex: 0 0 auto; background: var(--paper-2); padding: 9px 10px; border-right: 1.5px solid var(--matcha-bg); }
.gf-label .jp { font-family: var(--f-sans-jp); font-weight: 700; font-size: .98rem; }
.gf-label .ro { font-family: var(--f-mono); font-size: .62rem; color: var(--ink-soft); display: block; }
.gf-blank { flex: 1; padding: 9px 12px; display: flex; align-items: flex-end; }
.gf-blank .line { flex: 1; border-bottom: 2px dotted #c9c2b4; min-height: 18px; }
.gf-blank .hint { font-family: var(--f-mono); font-size: .62rem; color: var(--ink-soft); margin-left: 8px; }

/* ---- 5. Survival "SOS" phrase cards ---- */
.sos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.sos { border: 2px solid var(--line); border-left: 6px solid var(--kyoto-red); border-radius: 10px; background: #fff;
  padding: 9px 12px; }
.sos.calm { border-left-color: var(--teal); }
.sos .jp { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.sos .ro { font-family: var(--f-mono); font-size: .66rem; color: var(--ink-soft); }
.sos .en { font-size: .82rem; color: var(--ink-soft); }

/* ---- 6. Body-part chips (clinic) ---- */
.body-grid { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0; }
.body-chip { border: 2px solid var(--line); border-radius: 50px; background: var(--card); padding: 5px 12px;
  font-family: var(--f-sans-jp); font-weight: 700; font-size: .95rem; }
.body-chip .ro { font-family: var(--f-mono); font-size: .62rem; color: var(--ink-soft); margin-left: 5px; font-weight: 400; }

/* ---- 7. Transport phrase strip ---- */
.transit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 6px 0; }
.transit .t { border: 2px solid var(--line); border-left: 6px solid #0891b2; border-radius: 9px; background: var(--card); padding: 7px 10px; }
.transit .t .jp { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1rem; }
.transit .t .ro { font-family: var(--f-mono); font-size: .64rem; color: var(--ink-soft); }
.transit .t .en { font-size: .76rem; color: var(--ink-soft); }