/* ============================================================================
   claudia-particles.css  ·  The Japanese Gengo — Chapter 4 component layer
   The "job badge" system: particles as little workers wearing job badges, plus a
   colour-coded sentence-anatomy map, direction chips, and a contrast grid.
   Link AFTER claudia-gengo-core.css (and claudia-kana-kazu.css for .roster/.quest reuse).
   Author: Ms. Claudia · for Cesar Borgenkrans / sparklesnap.dev
   ========================================================================== */

/* ---- 1. Particle "job badges" ---- */
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0; }
.particle-badge { border: 2px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden;
  box-shadow: var(--shadow-soft); }
.particle-badge__top { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 2px solid var(--line); }
.particle-badge .pp { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.7rem; line-height: 1;
  width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: #fff;
  border: 2px solid rgba(0,0,0,.12); }
.particle-badge .meta .ro { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-soft); }
.particle-badge .meta .job { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; }
.particle-badge .body { padding: 8px 10px; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.particle-badge .body b { color: var(--ink); }

/* per-particle colours */
.p-wa  .pp{background:var(--teal)}      .p-wa  .job{color:var(--teal)}      .p-wa  .particle-badge__top,.particle-badge.p-wa  .particle-badge__top{background:var(--teal-bg)}
.p-ga  .pp{background:var(--rose)}      .p-ga  .job{color:var(--rose)}      .particle-badge.p-ga  .particle-badge__top{background:var(--rose-bg)}
.p-o   .pp{background:var(--amber)}     .p-o   .job{color:var(--amber)}     .particle-badge.p-o   .particle-badge__top{background:var(--amber-bg)}
.p-ni  .pp{background:var(--violet)}    .p-ni  .job{color:var(--violet)}    .particle-badge.p-ni  .particle-badge__top{background:#f5f0ff}
.p-de  .pp{background:var(--matcha)}    .p-de  .job{color:var(--matcha)}    .particle-badge.p-de  .particle-badge__top{background:var(--matcha-bg)}
.p-e   .pp{background:#1d4ed8}          .p-e   .job{color:#1d4ed8}          .particle-badge.p-e   .particle-badge__top{background:#eff6ff}
.p-no  .pp{background:var(--kyoto-red)} .p-no  .job{color:var(--kyoto-red)} .particle-badge.p-no  .particle-badge__top{background:#fff1f2}
.p-to  .pp{background:#0e7490}          .p-to  .job{color:#0e7490}          .particle-badge.p-to  .particle-badge__top{background:#ecfeff}
.p-mo  .pp{background:#7c3aed}          .p-mo  .job{color:#7c3aed}          .particle-badge.p-mo  .particle-badge__top{background:#f5f3ff}

/* ---- 2. Sentence-anatomy map ---- */
.sentence-map { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 8px 0; padding: 14px 12px;
  background: var(--paper-2); border: 2px solid #e3ddd0; border-radius: 12px; }
.s-token { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.s-token .row { display: flex; align-items: stretch; gap: 3px; }
.s-token .word { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.12rem; padding: 7px 10px;
  border-radius: 8px; background: #fff; border: 2px solid var(--line); color: var(--ink); }
.s-token .ptcl { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1rem; padding: 7px 8px; border-radius: 8px;
  color: #fff; display: grid; place-items: center; }
.s-token .role { font-family: var(--f-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.r-topic  .ptcl{background:var(--teal)}      .r-topic  .role{color:var(--teal)}
.r-object .ptcl{background:var(--amber)}     .r-object .role{color:var(--amber)}
.r-dest   .ptcl{background:var(--violet)}    .r-dest   .role{color:var(--violet)}
.r-place  .ptcl{background:var(--matcha)}    .r-place  .role{color:var(--matcha)}
.r-dir    .ptcl{background:#1d4ed8}          .r-dir    .role{color:#1d4ed8}
.r-glue   .ptcl{background:var(--kyoto-red)} .r-glue   .role{color:var(--kyoto-red)}
.s-token.r-verb .word{background:var(--ink);color:#fff;border-color:var(--ink)}
.s-token.r-verb .role{color:var(--ink)}

/* ---- 3. に vs で vs を contrast columns ---- */
.vs-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0; }
.vs-col { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.vs-col h5 { margin: 0; padding: 7px 8px; color: #fff; font-family: var(--f-mono); font-size: 12px; text-align: center;
  letter-spacing: .05em; }
.vs-col .c { padding: 9px 10px; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }
.vs-col .c .jp-main { font-size: 1.05rem; margin-bottom: 2px; }
.vs-col.v-ni h5{background:var(--violet)} .vs-col.v-de h5{background:var(--matcha)} .vs-col.v-o h5{background:var(--amber)}

/* ---- 4. Direction chips (asking the way) ---- */
.dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0; }
.dir-chip { border: 2px solid var(--line); border-radius: 12px; background: var(--card); padding: 9px 6px; text-align: center; }
.dir-chip .ar { font-size: 1.7rem; line-height: 1; color: var(--teal); display: block; }
.dir-chip .jp { font-family: var(--f-sans-jp); font-weight: 700; font-size: 1.12rem; }
.dir-chip .ro { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-soft); display: block; }

/* ---- 5. roster "new this chapter" accent (extends .roster-cell from kana-kazu) ---- */
.roster-cell.nw { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(199,154,58,.25); }
.roster-cell.nw .nm { color: var(--gold); }