/* ============================================================================
   claudia-doushi.css  ·  The Japanese Gengo — Chapter 5 component layer (動詞 verbs)
   The verb kit: ます-form verb tables, the four "polite boxes," the three verb
   groups, and the famous て-form transformation machine.
   Link AFTER claudia-gengo-core.css (and kana-kazu for .roster/.quest reuse).
   Author: Ms. Claudia · for Cesar Borgenkrans / sparklesnap.dev
   ========================================================================== */

/* ---- 1. Verb table (meaning · dictionary · ます · て) ---- */
.verb-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.verb-table th { background: var(--matcha); color: #fff; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .05em; text-transform: uppercase; padding: 7px 8px; border: 1.5px solid var(--line); }
.verb-table td { border: 1.5px solid var(--line); padding: 7px 10px; background: var(--card); }
.verb-table td.en { font-family: var(--f-body); font-weight: 600; color: var(--ink); background: var(--paper-2); }
.verb-table td .jpv { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.05rem; }
.verb-table td .ro { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-soft); display: block; }
.verb-table td.ms .jpv { color: var(--teal); }
.verb-table td.te .jpv { color: var(--kyoto-red); }

/* ---- 2. The four polite "boxes" (aff/neg × present/past) ---- */
.box4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; }
.cbox { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.cbox h5 { margin: 0; padding: 6px 8px; color: #fff; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; }
.cbox .form { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.4rem; padding: 8px 10px 2px; }
.cbox .tail { color: var(--kyoto-red); }
.cbox .ro { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-soft); padding: 0 10px; }
.cbox .en { font-size: .82rem; color: var(--ink-soft); padding: 4px 10px 9px; }
.cbox.b-pa h5 { background: var(--teal); }     /* present affirmative */
.cbox.b-pn h5 { background: var(--rose); }      /* present negative */
.cbox.b-ta h5 { background: var(--matcha); }    /* past affirmative */
.cbox.b-tn h5 { background: var(--amber); }     /* past negative */

/* ---- 3. The three verb groups ---- */
.vg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0; }
.vg { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.vg__h { padding: 7px 10px; color: #fff; font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.vg__b { padding: 8px 10px; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }
.vg__b .jpv { font-family: var(--f-sans-jp); font-weight: 700; color: var(--ink); }
.vg.g1 .vg__h { background: var(--amber); }
.vg.g2 .vg__h { background: var(--teal); }
.vg.g3 .vg__h { background: var(--violet); }

/* ---- 4. The て-form transformation machine ---- */
.te-machine { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; margin: 6px 0; }
.te-band { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; padding: 5px 10px; }
.te-band.g1 { background: var(--amber); } .te-band.g2 { background: var(--teal); } .te-band.g3 { background: var(--violet); }
.te-row { display: grid; grid-template-columns: 96px 24px 84px 1fr; align-items: center; gap: 6px;
  padding: 7px 10px; border-bottom: 1px solid var(--matcha-bg); background: var(--card); }
.te-row:last-child { border-bottom: 0; }
.te-row .end { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.te-row .to { font-family: var(--f-mono); color: var(--ink-soft); text-align: center; }
.te-row .res { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.1rem; color: var(--kyoto-red); }
.te-row .ex { font-family: var(--f-sans-jp); font-size: .92rem; color: var(--ink-soft); }
.te-row .ex b { color: var(--ink); }
.te-row.exception { background: var(--rose-bg); }
.te-row.exception .res { color: var(--rose); }
.te-row.exception::after { content: var(--gengo-irregular-label, "★ irregular"); font-family: var(--f-mono); font-size: 9px; color: var(--rose);
  grid-column: 1 / -1; margin-top: 2px; }

/* ---- 5. Inline verb chip (dict → ます → て) ---- */
.vchip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--line); border-radius: 50px;
  padding: 4px 12px; background: var(--card); font-family: var(--f-sans-jp); font-weight: 700; font-size: .95rem; }
.vchip .sep { color: var(--ink-soft); font-family: var(--f-mono); font-size: .7rem; }
.vchip .te { color: var(--kyoto-red); }