/* ════════════════════════════════════════════════════════════════════════
   journey.css — mobile journey dashboard (Phase B port of c-kit.css + the
   c-tokonoma hub layout). Scoped under .kj so it stays isolated from the app's
   existing mobile CSS until the Phase G integration folds the tokens into
   css/tokens.css. Production layout: NO mockup phone bezel — the root fills its
   container and the carousel flexes to the real viewport.
   和の感性 floor: gold = saved sliver + recovery only · romaji on every token ·
   cards rest (never float) · watercolors never defaced (state rides off-image).
   ════════════════════════════════════════════════════════════════════════ */
.kj{
  --bg:#F0EDE8; --paper:#FAFAF7; --ink:#2C2C2C; --stone:#57534e; --faint:#6E6860;
  --accent:#3D5A80; --gold:#C9A96E; --moss:#6B7F5C; --terracotta:#9a5a48;
  --divider:rgba(44,40,32,.12); --image-base:#cdc4b4;
  --radius:10px; --radius-lg:16px; --radius-xl:22px; --radius-full:999px;
  --shadow-rest:0 1px 2px rgba(20,16,10,.05), 0 6px 18px rgba(20,16,10,.06);
  --shadow-card:0 2px 6px rgba(20,16,10,.07), 0 14px 34px rgba(18,16,10,.11);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-jp:'Klee One','Noto Sans JP',serif;
  --side:18px;
  position:relative; display:flex; flex-direction:column; min-height:100%;
  background:var(--bg); color:var(--ink); font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.kj *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
.kj button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
.kj :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius);}

/* ── top bar: hanko + greeting + search ── */
.kj .topbar{flex:0 0 auto; position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 13px) var(--side) 11px;
  background:linear-gradient(to bottom, var(--bg) 64%, rgba(240,237,232,0));}
.kj .topbar .hanko{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; box-shadow:0 2px 8px rgba(20,16,10,.16);}
.kj .topbar .greet{flex:1; min-width:0;}
.kj .topbar .greet b{display:block; font-family:var(--font-jp); font-size:16px; font-weight:600; color:var(--ink); line-height:1.1;}
.kj .topbar .greet small{font-size:10.5px; color:var(--faint); letter-spacing:.3px;}
.kj .top-actions{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
.kj .icon-btn{width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--stone); transition:background .15s;}
.kj .icon-btn:active{background:rgba(44,44,44,.06);}
/* account control (sync sign-in) — a quiet ghost "Sign in", or the avatar circle once signed in */
.kj .mh-sign-in{flex:0 0 auto; font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--accent); padding:7px 13px; border-radius:var(--radius-full); background:transparent; box-shadow:inset 0 0 0 1px var(--divider); transition:background .15s var(--ease);}
.kj .mh-sign-in:active{background:rgba(61,90,128,.07);}
.kj .mh-sign-in[disabled]{opacity:.6;}
.kj .mh-avatar{flex:0 0 auto; width:34px; height:34px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:transparent;}
.kj .mh-avatar-circle{width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-weight:600; font-size:13px; box-shadow:0 1px 4px rgba(20,16,10,.16);}

/* ── poster primitives (the watercolor IS the surface; chrome rides off-image) ── */
.kj .cover{position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--image-base);}
.kj .tint{position:absolute; inset:0; background:linear-gradient(to top, rgba(15,11,6,.93) 0%, rgba(17,12,7,.68) 30%, rgba(26,19,11,.12) 56%, transparent 72%);}
.kj .grain{position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.kj .warm{position:absolute; inset:0; pointer-events:none; background:rgba(120,86,40,.07);}
.kj .p-eyebrow{font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:6px;}
.kj .p-name{font-family:var(--font-ui); font-weight:600; color:#fff; letter-spacing:.005em; text-shadow:0 1px 8px rgba(8,5,3,.5); font-size:27px; line-height:1.08;}

/* progress: moss learned + scarce gold saved sliver, on a divider track */
.kj .pbar{position:relative; height:4px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden;}
.kj .pbar i{position:absolute; top:0; left:0; height:100%; border-radius:3px;}
.kj .pbar i.learned{background:var(--moss);}
.kj .pbar i.saved{background:linear-gradient(90deg, var(--gold) 0%, #dcc08c 52%, var(--gold) 100%);
  box-shadow:inset 0 .5px 0 rgba(255,248,233,.4), inset 0 -.5px 0 rgba(120,86,40,.25);}

/* actions */
.kj .resume{display:inline-flex; align-items:center; gap:9px; background:var(--paper); color:var(--ink);
  padding:11px 16px; border-radius:var(--radius-full); font-weight:600; font-size:13.5px; box-shadow:var(--shadow-rest);}
.kj .resume .play{width:22px; height:22px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.kj .resume small{display:block; font-weight:500; font-size:11px; color:var(--stone); letter-spacing:.1px;}
.kj .resume .l{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.kj .resume.primary{background:var(--accent); color:#fff; box-shadow:0 5px 16px rgba(61,90,128,.34);}
.kj .resume.primary .play{background:rgba(255,255,255,.24);}
.kj .resume.primary small{color:rgba(255,255,255,.82);}
.kj .resume.ghost{background:transparent; box-shadow:inset 0 0 0 1px rgba(255,253,248,.55); color:#fff;}
.kj .resume.ghost .play{background:rgba(255,253,248,.22);}
.kj .resume.ghost small{color:rgba(255,253,248,.72);}
.kj .jmanage{position:absolute; top:11px; right:11px; z-index:3; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(20,15,10,.34); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:rgba(255,253,248,.92);}

/* count line + peek tiles (labels BELOW the clean thumbnail — never defaced) */
.kj .cnt{font-size:13px; color:rgba(255,253,248,.82); letter-spacing:.1px;}
.kj .cnt b{color:#fff; font-weight:700; font-variant-numeric:tabular-nums;}
.kj .jtiles{display:flex; gap:8px;}
.kj .jtiles .jtile{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;}
.kj .jtiles .jtile .ti{width:100%; aspect-ratio:1/1; border-radius:var(--radius); background-size:cover; background-position:center; background-color:var(--image-base); box-shadow:0 1px 4px rgba(8,5,3,.35);}
.kj .jtiles .jtile .tl{font-family:var(--font-jp); font-size:11px; color:rgba(255,253,248,.92); margin-top:5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; text-shadow:0 1px 3px rgba(8,5,3,.6);}
.kj .jtiles .jtile .tlr{font-family:var(--font-ui); font-size:8.5px; font-weight:500; color:rgba(255,253,248,.6); margin-top:1px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; letter-spacing:.2px; text-shadow:0 1px 2px rgba(8,5,3,.55);}
.kj .jtiles .jtile.more .ti.tcount{display:flex; align-items:center; justify-content:center; background:rgba(255,253,248,.1);
  box-shadow:inset 0 0 0 1px rgba(255,253,248,.3), 0 1px 4px rgba(8,5,3,.25); color:rgba(255,253,248,.92);
  font-family:var(--font-ui); font-weight:600; font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:.2px;}
.kj .jtiles .jtile.more .tl{font-family:var(--font-ui); font-weight:600; font-size:11px; letter-spacing:.3px; color:rgba(255,253,248,.7);}

/* ── hub head (slim わたしの道 eyebrow) ── */
.kj .hub-head{flex:0 0 auto; padding:0 var(--side) 9px;}
.kj .hub-head .hh-eyebrow{display:flex; align-items:baseline; gap:8px;}
.kj .hub-head .hh-eyebrow .ej{font-family:var(--font-jp); font-size:15px; font-weight:600; color:var(--stone); letter-spacing:.01em;}
.kj .hub-head .hh-eyebrow em{font-style:normal; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint);}

/* ── the wall: carousel (2+), solo (1), zero (0) ── */
.kj .wall{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
.kj #kjWallBody{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
.kj .wall.carousel .pager{flex:1 1 auto; min-height:0;}
.kj .wall.carousel .newrow, .kj .wall.carousel .bottom-pad{display:none;}
.kj .newrow{flex:0 0 auto; margin:2px 0 10px; padding:0 var(--side);}
.kj .bottom-pad{height:12px;}

/* +New journey — a quiet dashed frame, never a colored tile */
.kj .newframe{display:flex; align-items:center; gap:12px; width:100%; padding:16px var(--side); border-radius:var(--radius-lg);
  border:1.5px dashed var(--divider); color:var(--stone); background:transparent; text-align:left;}
.kj .newframe .plus{width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:1.5px solid var(--divider); display:flex; align-items:center; justify-content:center; color:var(--faint);}
.kj .newframe b{display:block; font-size:14px; color:var(--ink); font-weight:600;}
.kj .newframe span{font-size:11.5px; color:var(--faint);}

/* ── horizontal journey pager ── */
.kj .pager{display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; gap:11px; padding:0 4%; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}
.kj .pager::-webkit-scrollbar{display:none;}
.kj .pcard{flex:0 0 92%; scroll-snap-align:center; position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-rest); background:var(--paper);
  transition:box-shadow .25s var(--ease), transform .4s var(--ease), opacity .4s var(--ease);}
.kj .pcard .art{position:absolute; inset:0;}
.kj .pcard .body{position:absolute; left:0; right:0; bottom:0; padding:0 16px 16px; display:flex; flex-direction:column; gap:9px;}
.kj .pcard.is-center{box-shadow:var(--shadow-card); transform:scale(1); opacity:1;}
.kj .pcard:not(.is-center){transform:scale(.955); opacity:.7;}    /* neighbour recession — depth, not defacing */
/* NO transform/will-change on .cover: a composited child ESCAPES the parent's border-radius +
   overflow:hidden clip on iOS Safari (→ square corners), and the per-frame transform parallax
   caused the swipe jitter. Depth comes from the .pcard scale-recession instead. */
.kj .pcard.caught .cover{filter:saturate(.84) brightness(.97);}  /* caught-up reads "at rest" */

/* solo (one journey): one wide print fills the height with a 2-row word grid */
.kj .wall.solo #kjWallBody{padding:0 var(--side);}
.kj .soloposter{flex:1 1 auto; position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:12px; display:flex; flex-direction:column;}
.kj .soloposter .art{flex:1 1 auto; position:relative; min-height:420px;}
.kj .soloposter .body{position:absolute; left:0; right:0; bottom:0; padding:0 18px 18px; display:flex; flex-direction:column; gap:11px;}
.kj .soloposter .cover.solo-hero{filter:saturate(.9) brightness(.985);}   /* no transform → keeps the rounded clip on iOS */
.kj .soloposter.caught .cover{filter:saturate(.84) brightness(.97);}
.kj .soloposter .jtiles.two{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}

/* dots */
.kj .dots{flex:0 0 auto; display:flex; justify-content:center; gap:6px; padding:12px 0 4px;}
.kj .dots i{width:6px; height:6px; border-radius:50%; background:var(--divider); transition:width .2s var(--ease), background .2s var(--ease);}
.kj .dots i.on{width:16px; border-radius:3px; background:var(--accent);}

/* ── +New carousel card: a full-bleed 道 path scene + frosted invitation ── */
.kj .pcard.newcard{display:block; gap:0; border:none; box-shadow:var(--shadow-rest); color:#fff; background:var(--image-base);}
.kj .pcard.newcard:not(.is-center){opacity:.5;}
.kj .newcard .nc-bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.kj .newcard .nc-veil{position:absolute; inset:0; background:radial-gradient(120% 78% at 50% 50%, rgba(10,7,3,.30) 0%, rgba(10,7,3,.5) 58%, rgba(8,5,2,.72) 100%), linear-gradient(to top, rgba(8,5,2,.68) 0%, rgba(10,7,4,.26) 40%, rgba(12,9,5,.34) 100%);}
.kj .newcard .nc-grain{position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.kj .newcard .nc-inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 34px; text-align:center;}
.kj .newcard .nc-eyebrow{font-family:var(--font-jp); font-size:13px; font-weight:600; color:rgba(255,253,248,.92); letter-spacing:.06em; margin-bottom:22px; text-shadow:0 1px 8px rgba(8,5,3,.6);}
.kj .newcard .nc-eyebrow em{display:block; font-style:normal; font-family:var(--font-ui); font-size:9.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,253,248,.66); margin-top:5px;}
.kj .newcard .nc-plus{width:62px; height:62px; border-radius:50%; background:rgba(255,253,248,.15); -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2); border:1px solid rgba(255,253,248,.5); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 22px rgba(8,5,3,.34); margin-bottom:20px;}
.kj .newcard .nc-title{font-family:var(--font-ui); font-size:23px; font-weight:600; color:#fff; line-height:1.18; letter-spacing:-.01em; text-shadow:0 2px 12px rgba(8,5,3,.55);}
.kj .newcard .nc-sub{font-size:13px; color:rgba(255,253,248,.82); margin-top:8px; line-height:1.5; max-width:235px; text-shadow:0 1px 6px rgba(8,5,3,.5);}

/* ── zero state: one inviting hero, never an empty carousel ── */
.kj .wall.zero .hub-head, .kj .wall.zero .newrow, .kj .wall.zero .bottom-pad{display:none;}
.kj .zerohero{flex:1 1 auto; min-height:0; margin:0 var(--side) 16px; border-radius:var(--radius-lg); overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--shadow-card); background:var(--image-base);}
.kj .zerohero .zcover{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.92);}
.kj .zerohero .ztint{position:absolute; inset:0; background:linear-gradient(to top, rgba(15,11,6,.9) 0%, rgba(17,12,7,.5) 42%, rgba(26,19,11,.08) 72%);}
.kj .zerohero .zbody{position:relative; z-index:2; padding:0 22px 24px; color:#fff;}
.kj .zerohero .zeyebrow{font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,253,248,.78);}
.kj .zerohero h2{font-family:var(--font-jp); font-size:28px; font-weight:600; line-height:1.2; margin:9px 0 5px; text-shadow:0 1px 8px rgba(8,5,3,.5);}
.kj .zerohero h2 em{font-family:var(--font-ui); font-style:normal; font-size:15px; font-weight:600; color:rgba(255,253,248,.82); margin-left:9px; letter-spacing:.2px; text-shadow:0 1px 6px rgba(8,5,3,.5);}
.kj .zerohero p{font-size:13px; color:rgba(255,253,248,.84); line-height:1.5; max-width:280px;}
.kj .zerohero .zbegin{display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:13px 22px; border-radius:var(--radius-full);
  background:#f6f4ef; color:var(--ink); font-weight:600; font-size:14px; box-shadow:0 4px 14px rgba(8,5,3,.28);}
.kj .zerohero .zbegin .plus{width:22px; height:22px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff;}

/* ════ bottom sheet (composer · manage · word-detail) ════ */
/* full-screen overlays use position:fixed (viewport-relative) — #mobileLandingContainer
   is a dvh scroll container, so position:absolute mis-positions them in iOS Safari */
/* z above #kjStudy (z100) so a word glance opened from the study reading view rides over it; below onboarding (z110) */
.kj .scrim-ov{position:fixed; inset:0; z-index:102; background:rgba(20,16,10,.34); opacity:0; pointer-events:none; transition:opacity .46s var(--ease);}
.kj .scrim-ov.on{opacity:1; pointer-events:auto;}
.kj .sheet{position:fixed; left:0; right:0; bottom:0; z-index:106; max-height:88vh; max-height:88dvh; background:var(--paper);
  border-radius:24px 24px 0 0; transform:translateY(101%); transition:transform .46s var(--ease); display:flex; flex-direction:column; overflow:hidden;}
.kj .sheet.on{transform:translateY(0);}
.kj .sheet .grab{width:38px; height:4px; border-radius:3px; background:var(--divider); margin:9px auto 4px;}
.kj .sheet-hd{padding:6px var(--side) 12px; border-bottom:1px solid var(--divider);}
.kj .sheet-hd.hidden{display:none;}
.kj .sheet-hd b{font-family:var(--font-ui); font-size:18px; font-weight:600;}
.kj .sheet-hd small{display:block; font-size:11.5px; color:var(--faint); margin-top:2px;}
.kj .sheet-body{padding:8px var(--side) calc(20px + env(safe-area-inset-bottom,0px)); overflow-y:auto;}
.kj .sheet-body::-webkit-scrollbar{display:none;}
.kj .toast{position:fixed; left:50%; bottom:30px; z-index:108; transform:translateX(-50%) translateY(16px); opacity:0; pointer-events:none;
  background:var(--ink); color:#f6f4ef; font-size:13px; font-weight:500; padding:11px 18px; border-radius:var(--radius-full); box-shadow:0 8px 30px rgba(18,16,10,.32);
  display:flex; align-items:center; gap:8px; transition:opacity .3s var(--ease), transform .3s var(--ease); max-width:80%;}
.kj .toast.on{opacity:1; transform:translateX(-50%) translateY(0);}
.kj .toast .tk{color:rgba(255,253,248,.78); font-family:var(--font-jp);}

/* ════ composer — base options ════ */
.kj .nopt{position:relative; display:block; width:100%; text-align:left; background:var(--paper); border-radius:var(--radius-lg);
  padding:15px 44px 15px 26px; margin-bottom:11px; box-shadow:var(--shadow-rest); transition:transform .14s var(--ease), box-shadow .2s var(--ease);}
.kj .nopt:last-child{margin-bottom:4px;}
.kj .nopt:active{transform:scale(.99);}
.kj .nopt::before{content:""; position:absolute; left:14px; top:15px; bottom:15px; width:2.5px; border-radius:3px; background:var(--rail,var(--divider));}
.kj .nopt[data-base="category"]{--rail:var(--moss);}
.kj .nopt[data-base="textbook"]{--rail:var(--accent);}
.kj .nopt[data-base="frequency"]{--rail:var(--stone);}
.kj .nopt[data-base="all"]{--rail:var(--ink);}
.kj .nopt .ntitle{display:flex; align-items:baseline; gap:9px; font-family:var(--font-ui); font-size:17px; font-weight:600; color:var(--ink); line-height:1.2;}
.kj .nopt .ntitle .njp{font-family:var(--font-jp); font-size:14px; font-weight:600; color:var(--stone);}
.kj .nopt .ntitle .njp .nrom{font-family:var(--font-ui); font-size:10px; font-weight:500; color:var(--faint); letter-spacing:.2px; margin-left:5px;}
.kj .nopt .nsub{font-size:13px; color:var(--stone); line-height:1.5; margin-top:4px;}
.kj .nopt .nchev{position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex; color:var(--faint);}

/* ════ composer — shell ════ */
.kj .cmp-x{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  color:var(--stone); background:rgba(44,40,32,.05); margin:0 0 12px; transition:background .15s var(--ease), transform .14s var(--ease);}
.kj .cmp-x:active{transform:scale(.92);}
.kj .cmp-h{padding:0 2px 14px;}
.kj .cmp-h b{font-family:var(--font-ui); font-size:19px; font-weight:600; color:var(--ink); display:block; letter-spacing:-.01em;}
.kj .cmp-h small{font-size:12px; color:var(--faint); margin-top:3px; display:block; line-height:1.45;}

/* the POOL cover */
.kj .cmp-cover{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card);
  min-height:232px; background:var(--image-base); display:flex; flex-direction:column; justify-content:flex-end;}
.kj .cmp-cover .tint{background:linear-gradient(to top, rgba(13,9,5,.92) 0%, rgba(16,11,7,.55) 48%, rgba(24,18,11,.06) 82%);}
.kj .cmp-cover.narrow .cover{filter:saturate(.55) brightness(.8); transition:filter .45s var(--ease);}
.kj .cmp-cover .cc{position:relative; z-index:2; padding:18px 18px 17px; color:#fff;}
.kj .cmp-cover .cc-lab{font-size:9.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:rgba(255,253,248,.78);}
.kj .cmp-cover .cc-n{display:flex; align-items:baseline; gap:11px; margin-top:7px;}
.kj .cmp-cover .cc-num{font-family:var(--font-ui); font-size:62px; font-weight:600; line-height:.88; font-variant-numeric:tabular-nums; letter-spacing:-.01em; text-shadow:0 2px 16px rgba(8,5,3,.5);}
.kj .cmp-cover .cc-num.tick{animation:ccTick .4s var(--ease);}
@keyframes ccTick{0%{transform:translateY(3px); opacity:.45;} 100%{transform:none; opacity:1;}}
.kj .cmp-cover .cc-lab-jp{font-family:var(--font-jp); font-weight:600; font-size:13px; letter-spacing:.02em; text-transform:none; margin-left:9px; color:rgba(255,253,248,.92); text-shadow:0 1px 6px rgba(8,5,3,.5);}
.kj .cmp-cover .cc-unit{font-size:12px; color:rgba(255,253,248,.74); margin-top:3px; letter-spacing:.3px;}
.kj .cmp-cover .cc-ledger{font-size:13px; color:rgba(255,253,248,.92); margin-top:9px; line-height:1.45; text-shadow:0 1px 6px rgba(8,5,3,.5);}
.kj .cmp-cover .cc-water{position:relative; height:4px; border-radius:3px; background:rgba(255,253,248,.24); overflow:hidden; margin-top:14px;}
.kj .cmp-cover .cc-water i{position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--moss); transition:width .55s var(--ease);}

.kj .cmp-funnel{font-size:11.5px; color:var(--faint); line-height:1.7; padding:14px 2px 0; font-variant-numeric:tabular-nums;}
.kj .cmp-funnel b{color:var(--stone); font-weight:600;}
.kj .cmp-funnel .ar{color:var(--divider); padding:0 6px;}

/* filter valves */
.kj .cmp-valves{margin-top:14px; display:flex; flex-direction:column; gap:10px;}
.kj .valve{border-radius:var(--radius-lg); background:rgba(250,250,247,.72); -webkit-backdrop-filter:blur(9px) saturate(1.25); backdrop-filter:blur(9px) saturate(1.25);
  box-shadow:var(--shadow-rest); overflow:hidden; border:1px solid rgba(44,40,32,.05);}
.kj .valve-hd{display:flex; align-items:center;}
.kj .valve-exp{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:13px 6px 13px 15px; text-align:left;}
.kj .valve-exp .vt{flex:0 0 auto; font-size:13.5px; font-weight:600; color:var(--ink);}
.kj .valve-exp .vsum{flex:1; min-width:0; font-size:12px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kj .valve-exp .vsum.on{color:var(--moss); font-weight:600;}
.kj .valve-exp .vchev{flex:0 0 auto; color:var(--faint); transition:transform .2s var(--ease);}
.kj .valve.open .valve-exp .vchev{transform:rotate(90deg);}
.kj .valve .vx{flex:0 0 auto; width:30px; height:30px; margin-right:9px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--terracotta); background:rgba(154,90,72,.09);}
.kj .valve .vx:active{transform:scale(.9);}
.kj .valve-body{padding:2px 14px 14px;}

/* chips (composer reuses; moss when on) */
.kj .scope-chip{display:inline-flex; align-items:center; font-size:12px; font-weight:500; color:var(--stone); padding:6px 14px; border-radius:var(--radius-full); background:var(--paper); box-shadow:inset 0 0 0 1px var(--divider); white-space:nowrap; transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);}
.kj .cmp .scope-chip{margin:0 7px 8px 0; box-shadow:var(--shadow-rest);}
.kj .cmp .scope-chip.on{background:var(--moss); color:#fff; box-shadow:none;}
.kj .cmp .scope-chip .csub{font-size:9.5px; opacity:.72; margin-left:6px; font-weight:600; font-variant-numeric:tabular-nums;}
.kj .cmp .scope-chip.on .csub{opacity:.85;}
.kj .cmp .chipwrap{display:flex; flex-wrap:wrap; padding-top:6px;}
.kj .cmp-hint{font-size:10.5px; color:var(--faint); line-height:1.5; padding:4px 2px 0;}

/* topic multi-select grid */
.kj .tgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 10px; padding-top:2px;}
.kj .tcell{position:relative; display:flex; flex-direction:column; background:transparent; box-shadow:none; transition:transform .14s var(--ease);}
.kj .tcell:active{transform:scale(.97);}
.kj .tcell .tart{position:relative; width:100%; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; background-size:cover; background-position:center; background-color:var(--image-base); box-shadow:var(--shadow-rest); transition:box-shadow .22s var(--ease);}
.kj .tcell.on .tart{box-shadow:inset 0 0 0 2.5px var(--moss), var(--shadow-card);}
.kj .tcell .tcap{padding:6px 2px 0; min-width:0;}
.kj .tcell .tlabel{font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--ink); line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.kj .tcell .tjp{font-family:var(--font-jp); font-size:10.5px; font-weight:500; color:var(--faint); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kj .tcell .tcheck{position:absolute; top:7px; right:7px; width:21px; height:21px; border-radius:50%; background:var(--moss); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(8,5,3,.34); opacity:0; transform:scale(.5); transition:opacity .2s var(--ease), transform .24s var(--ease);}
.kj .tcell.on .tcheck{opacity:1; transform:scale(1);}

/* textbook accordion */
.kj .bk-list{padding-top:2px;}
.kj .bk-block{border-bottom:1px solid var(--divider);}
.kj .bk-block:last-child{border-bottom:none;}
.kj .bk-row{display:flex; align-items:center; gap:11px; padding:11px 2px;}
.kj .bk-row .bk-ck{width:23px; height:23px; flex:0 0 auto; border-radius:7px; border:1.5px solid var(--divider); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s var(--ease), border-color .2s var(--ease);}
.kj .bk-row.on .bk-ck{background:var(--moss); border-color:var(--moss);}
.kj .bk-row .bk-nm{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink); text-align:left;}
.kj .bk-row .bk-ct{font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums;}
.kj .bk-row .bk-exp{width:28px; height:28px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--faint); transition:transform .2s var(--ease);}
.kj .bk-row.exp .bk-exp{transform:rotate(90deg);}
.kj .bk-lessons{display:flex; flex-wrap:wrap; padding:2px 0 10px 34px;}

/* guard */
.kj .cmp-guard{margin-top:14px; border-radius:var(--radius-lg); background:rgba(154,90,72,.06); border:1px solid rgba(154,90,72,.16); padding:15px 16px;}
.kj .cmp-guard .cg-t{font-size:13.5px; font-weight:600; color:var(--ink);}
.kj .cmp-guard .cg-b{font-size:12px; color:var(--stone); line-height:1.5; margin-top:5px;}
.kj .cmp-guard .cg-go{display:inline-flex; align-items:center; gap:7px; margin-top:13px; padding:10px 16px; border-radius:var(--radius-full); background:var(--terracotta); color:#fff; font-weight:600; font-size:12.5px;}
.kj .cmp-guard .cg-go:active{transform:scale(.97);}

/* matched-words peek rail */
.kj .cmp-peek-rail{display:flex; gap:9px; margin-top:13px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
.kj .cmp-peek-rail::-webkit-scrollbar{display:none;}
.kj .cmp-peek-rail.more{-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 30px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 30px), transparent);}
.kj .cmp-peek-rail .cpk{flex:0 0 76px; display:flex; flex-direction:column; align-items:center;}
.kj .cmp-peek-rail .cpk-th{width:76px; height:76px; border-radius:var(--radius); background:var(--image-base) center/cover; box-shadow:var(--shadow-rest);}
.kj .cmp-peek-rail .cpk-th.pulse{animation:cpkPulse .66s var(--ease);}
@keyframes cpkPulse{0%{box-shadow:var(--shadow-rest);} 32%{box-shadow:0 0 0 3px rgba(61,90,128,.45), var(--shadow-rest);} 100%{box-shadow:var(--shadow-rest);}}
.kj .cmp-peek-rail .cpk-l{font-family:var(--font-jp); font-size:11.5px; font-weight:600; color:var(--ink); margin-top:5px; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;}
.kj .cmp-peek-rail .cpk-r{font-family:var(--font-ui); font-size:8.5px; font-weight:500; color:var(--faint); margin-top:1px; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; letter-spacing:.1px;}
.kj .cmp-peek-rail .cpk-e{font-size:9.5px; color:var(--faint); margin-top:1px; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; line-height:1.2;}

/* editable name + sticky create bar */
.kj .cmp-name{margin:0 0 11px; padding:0 2px;}
.kj .cmp-name label{display:block; font-size:9.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); margin-bottom:5px;}
.kj .cmp-name-in{width:100%; font-family:var(--font-ui); font-size:17px; font-weight:600; color:var(--ink); padding:6px 0; border:none; border-bottom:1.5px solid var(--divider); background:transparent; outline:none;}
.kj .cmp-name-in:focus{border-bottom-color:var(--accent);}
.kj .cmp-foot{position:sticky; bottom:0; margin:16px calc(-1*var(--side)) 0; padding:13px var(--side) calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top, var(--paper) 72%, rgba(250,250,247,.85) 90%, rgba(250,250,247,0));}
.kj .cmp-foot .cmp-go{width:100%; padding:15px; border-radius:var(--radius-full); background:var(--accent); color:#fff; font-weight:600; font-size:14.5px; font-variant-numeric:tabular-nums; box-shadow:0 4px 14px rgba(61,90,128,.22); transition:transform .18s var(--ease);}
.kj .cmp-foot .cmp-go:active{transform:scale(.97);}
.kj .cmp-foot .cmp-go[disabled]{background:var(--divider); color:var(--faint); box-shadow:none;}

/* ════ manage panel (rename · reset · delete) ════ */
.kj .mrow{display:flex; align-items:center; gap:13px; width:100%; padding:14px 4px; border-bottom:1px solid var(--divider); font-size:14px; color:var(--ink); text-align:left;}
.kj .mrow:last-child{border-bottom:none;}
.kj .mrow .mi{width:24px; flex:0 0 auto; color:var(--stone); display:flex;}
.kj .mrow.danger{color:var(--terracotta);} .kj .mrow.danger .mi{color:var(--terracotta);}
.kj .m-form,.kj .m-confirm{padding:16px 2px 6px;}
.kj .m-input{width:100%; font-family:var(--font-ui); font-size:19px; font-weight:600; color:var(--ink); padding:10px 0; border:none; border-bottom:1.5px solid var(--divider); background:transparent; outline:none;}
.kj .m-input:focus{border-bottom-color:var(--accent);}
.kj .m-confirm .m-q{font-size:16px; color:var(--ink); margin-bottom:9px; line-height:1.4;}
.kj .m-confirm .m-q b{font-family:var(--font-ui); font-weight:600;}
.kj .m-confirm .m-note{font-size:12.5px; color:var(--faint); line-height:1.55;}
.kj .m-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:22px;}
.kj .m-actions button{padding:11px 20px; border-radius:var(--radius-full); font-weight:600; font-size:13.5px; transition:transform .14s var(--ease);}
.kj .m-actions button:active{transform:scale(.97);}
.kj .m-cancel{color:var(--stone); background:rgba(44,40,32,.06);}
.kj .m-ok{color:#fff; background:var(--accent); box-shadow:0 3px 12px rgba(61,90,128,.2);}
.kj .m-del{color:#fff; background:var(--terracotta); box-shadow:0 3px 12px rgba(154,90,72,.22);}

@media (prefers-reduced-motion: reduce){
  .kj .pager{scroll-behavior:auto;}
  .kj .pcard{transition:box-shadow .25s var(--ease);}
  .kj *{transition-duration:.001ms !important; animation-duration:.001ms !important;}
}

/* ════════════════════════════════════════════════════════════════════════
   Phase D — word-detail · deep-dive · browse grid · search · entity rows
   (ported from c-kit.css §search/§cohesion-kit, scoped .kj)
   ════════════════════════════════════════════════════════════════════════ */

/* ── word grid (browse) — labels BELOW the clean thumbnail; state off-image ── */
.kj .wgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:13px 9px;}
.kj .wcell{position:relative; display:flex; flex-direction:column; align-items:center;}
.kj .wcell .ph{width:100%; aspect-ratio:1/1; border-radius:var(--radius); background-size:cover; background-position:center; background-color:var(--image-base); box-shadow:var(--shadow-rest);}
.kj .wcell .ph.pulse{animation:cpkPulse .66s var(--ease);}
.kj .wcell .wcrib{position:absolute; left:-3px; top:8%; width:2px; height:40%; border-radius:2px; background:transparent;}
.kj .wcell.is-learned .wcrib{background:var(--moss);}  .kj .wcell.is-saved .wcrib{background:#7A5E1C;}
.kj .wcell .wl{font-family:var(--font-jp); font-size:12.5px; font-weight:600; color:var(--ink); margin-top:6px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;}
.kj .wcell .wr{font-family:var(--font-ui); font-size:9.5px; font-weight:500; color:var(--faint); margin-top:2px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; letter-spacing:.1px;}
.kj .wcell .we{font-family:var(--font-ui); font-size:10px; font-weight:500; color:var(--faint); margin-top:1px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; line-height:1.2;}

/* ── group rows (lessons / themes) ── */
.kj .glist{display:flex; flex-direction:column;}
.kj .grow{display:grid; grid-template-columns:52px 1fr 18px; column-gap:13px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--divider); width:100%; text-align:left;}
.kj .grow:last-child{border-bottom:none;}
.kj .grow .gthumb{width:52px; height:52px; border-radius:var(--radius); background:var(--image-base) center/cover; box-shadow:inset 0 0 0 1px rgba(28,22,14,.06);}
.kj .grow .gtx{min-width:0;}
.kj .grow .glabel{font-family:var(--font-ui); font-size:15px; font-weight:600; color:var(--ink); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kj .grow .gname{font-size:11px; color:var(--faint); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kj .grow .gmeta{display:flex; align-items:center; gap:9px; margin-top:6px;}
.kj .grow .gbar{flex:0 0 78px; height:3px; border-radius:2px; background:var(--divider); overflow:hidden; position:relative;}
.kj .grow .gbar i{position:absolute; left:0; top:0; height:100%; background:var(--moss); border-radius:2px;}
.kj .grow .gcount{font-size:11px; color:var(--stone); font-variant-numeric:tabular-nums;}
.kj .grow.done .gcount{color:var(--moss);}
.kj .grow .gchev{color:var(--faint); display:flex;}

/* ── sheet header with Resume/Add action + back ── */
.kj .sheet-hd.with-go{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.kj .sheet-hd .sh-id{min-width:0;}
.kj .sheet-hd b .sh-jp{font-family:var(--font-jp); font-weight:600; color:var(--stone); margin-left:7px; font-size:.86em;}
.kj .sheet-hd.with-back{display:flex; align-items:flex-start; justify-content:flex-start; gap:10px;}
.kj .sheet-hd.with-back .sh-id{flex:1;}
.kj .sheet-back{flex:0 0 auto; width:32px; height:32px; margin-top:-1px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--stone); background:rgba(44,40,32,.05); transition:background .15s var(--ease), transform .14s var(--ease);}
.kj .sheet-back:active{transform:scale(.92);}
.kj .sheet-go{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff; padding:9px 14px; border-radius:var(--radius-full); font-weight:600; font-size:12.5px; box-shadow:0 3px 12px rgba(61,90,128,.22);}
.kj .sheet-go .play{width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center;}

/* ── span furigana ruby ── */
.kj .ruby-group{display:inline; position:relative;}
.kj .ruby-rt{display:block; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); min-width:100%; width:max-content; white-space:nowrap; font-size:.4em; font-weight:600; line-height:1; color:var(--faint); text-align:center; text-align-last:justify; text-justify:inter-character; padding-bottom:.14em;}

/* ── word-detail glance ── */
.kj .wd-hero{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; background:var(--image-base) center/cover; box-shadow:var(--shadow-rest);}
.kj .wd-pos{display:inline-flex; align-items:baseline; gap:8px; font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--faint); margin-top:16px;}
.kj .wd-pos em{font-style:normal; font-family:var(--font-jp); font-size:13px; color:var(--accent); letter-spacing:.5px;}
.kj .wd-kanji{font-family:var(--font-jp); font-size:32px; font-weight:600; color:var(--ink); line-height:1.12; margin-top:6px; font-feature-settings:'palt' 1;}
.kj .wd-kanji.has-ruby{padding-top:.55em;}
.kj .wd-kanji ruby{ruby-position:over; ruby-align:space-around;}
.kj .wd-kanji rt{font-family:var(--font-jp); font-weight:400; font-size:.38em; line-height:1; letter-spacing:.06em; color:var(--faint); opacity:.92;}
.kj .wd-read{display:flex; align-items:baseline; gap:10px; margin-top:5px;}
.kj .wd-read .rk{font-family:var(--font-jp); font-size:14px; color:var(--stone);}
.kj .wd-read .rr{font-size:12px; color:var(--faint); letter-spacing:.3px;}
.kj .wd-gloss{font-size:14px; color:var(--ink); font-weight:500; margin-top:10px; line-height:1.5;}
.kj .wd-actions{display:flex; align-items:center; gap:12px; margin-top:16px;}
.kj .wd-topic{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--stone); background:var(--paper); box-shadow:var(--shadow-rest); padding:7px 13px; border-radius:var(--radius-full);}
.kj .wd-topic .pin{width:5px; height:5px; border-radius:50%; background:var(--moss);}
.kj .wd-topic--label{cursor:default;}   /* category shown as a label (no journey context to filter into) */
.kj .wd-study{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:18px; padding:14px; border-radius:var(--radius-full); background:var(--accent); color:#fff; font-weight:600; font-size:14px; box-shadow:0 4px 14px rgba(61,90,128,.22); transition:transform .18s var(--ease);}
.kj .wd-study:active{transform:scale(.97);}
.kj .wd-study .ar{font-size:16px; line-height:1;}
.kj .wd-collapse{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:18px 0 2px; padding:11px; font-size:12px; font-weight:600; letter-spacing:.4px; color:var(--stone); background:transparent;}
.kj .wd-collapse svg{width:14px; height:14px;}

/* ── deep-dive reference panel ── */
.kj .dd-secs{margin-top:6px;}
.kj .dd-sec{padding:20px 0 0;}
.kj .dd-sec:first-child{padding-top:10px;}
.kj .dd-label{display:flex; align-items:baseline; gap:9px; margin-bottom:11px;}
.kj .dd-label .k{font-family:var(--font-jp); font-size:15px; font-weight:600; color:var(--ink);}
.kj .dd-label .e{font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); font-weight:600;}
.kj .dd-story{background:rgba(44,40,32,.035); border-left:2px solid var(--sc,var(--accent)); border-radius:0 var(--radius) var(--radius) 0; padding:11px 15px 11px 14px; margin-bottom:8px;}
.kj .dd-story:last-child{margin-bottom:0;}
.kj .dd-story[data-type="quick_tip"]{--sc:var(--accent);} .kj .dd-story[data-type="watch_out"]{--sc:var(--terracotta);}
.kj .dd-story[data-type="culture_note"]{--sc:var(--accent);} .kj .dd-story[data-type="memory_hook"]{--sc:var(--moss);} .kj .dd-story[data-type="grammar_hint"]{--sc:var(--moss);}
.kj .dd-story .t{font-size:10px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--sc,var(--accent)); margin-bottom:6px;}
.kj .dd-story .b{font-size:13px; line-height:1.55; color:var(--ink);}
.kj .dd-list{display:flex; flex-direction:column;}
.kj .dd-row{display:grid; grid-template-columns:60px 1fr auto 30px; align-items:center; column-gap:12px; padding:13px 2px; border-bottom:1px solid rgba(44,40,32,.08);}
.kj .dd-row:last-child{border-bottom:none;}
.kj .dd-row.cnt{grid-template-columns:26px minmax(0,1fr) auto minmax(0,auto) 30px; padding:9px 2px;}
.kj .dd-row.cnt .rj{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kj .dd-row.cnt .rr{white-space:nowrap;}
.kj .dd-row.cnt .rr-k{justify-self:end; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kj .dd-row .rl{font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint);}
.kj .dd-row .rl-n{font-variant-numeric:tabular-nums; font-size:12px; color:var(--faint); font-weight:600; letter-spacing:0;}
.kj .dd-row .rj{font-family:var(--font-jp); font-size:20px; font-weight:600; color:var(--ink); font-feature-settings:'palt' 1; line-height:1.25;}
.kj .dd-row.cnt .rj{font-size:17px;}
.kj .dd-row .rr{font-size:11.5px; color:var(--faint); font-weight:500; letter-spacing:.2px; justify-self:end;}
.kj .dd-row .rr-k{font-family:var(--font-jp); font-style:normal; color:var(--faint);}
/* .rspk is a reusable ink-speaker — styled generally (was scoped to .dd-row, so it rendered unstyled/invisible in .dd-relrow) */
.kj .rspk{width:30px; height:30px; justify-self:end; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--stone); position:relative; transition:background .18s var(--ease), color .18s var(--ease); flex:0 0 auto;}
.kj .rspk:active{transform:scale(.9);}
.kj .rspk svg{width:16px; height:16px; fill:currentColor;}
.kj .rspk.playing::after{content:""; position:absolute; inset:1px; border-radius:50%; border:1.5px solid var(--accent); opacity:.5; animation:ddPulse .6s var(--ease) forwards;}
.kj .rspk-x{width:30px; height:30px; justify-self:end;}
.kj .dd-row--q{margin-top:4px;} .kj .dd-row--q .rl-n{color:var(--accent); font-weight:700;}
@keyframes ddPulse{to{transform:scale(1.7); opacity:0;}}
.kj .dd-note{font-size:11px; color:var(--faint); line-height:1.5; margin:-2px 0 12px;}
.kj .dd-ex{padding:12px 0; border-bottom:1px solid rgba(44,40,32,.1);}
.kj .dd-ex:last-child{border-bottom:none;}
.kj .dd-ex .j{font-family:var(--font-jp); font-size:17px; color:var(--ink); line-height:1.6;}
.kj .dd-ex .j.has-ruby{padding-top:.95em; line-height:1.95;}
.kj .dd-ex .j .ruby-rt{font-size:.55em; font-weight:500;}
.kj .dd-ex .r{font-size:10.5px; color:var(--faint); font-weight:500; margin-top:3px; letter-spacing:.2px;}
.kj .dd-ex .e{font-size:13px; color:var(--stone); margin-top:3px; line-height:1.45;}
.kj .dd-rellist{display:flex; flex-direction:column;}
.kj .dd-relrow{display:grid; grid-template-columns:52px 1fr; column-gap:13px; align-items:center; padding:9px 2px; border-bottom:1px solid rgba(44,40,32,.08);}
.kj .dd-relrow:last-child{border-bottom:none;}
/* tappable related rows → open the word's glance. div[role=button] (NOT <button>: iOS paints a default box).
   user-select/touch-callout:none so a long-press fires ONLY the audio gesture, not iOS text selection + the Copy menu. */
.kj .dd-relrow.tappable{grid-template-columns:52px 1fr auto; cursor:pointer; border-radius:var(--radius); transition:background .15s var(--ease); -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
.kj .dd-relrow.tappable:active{background:rgba(44,40,32,.05);}
.kj .dd-relrow.tappable.held{background:rgba(44,40,32,.08);}   /* long-press registered → playing audio */
.kj .dd-relrow .rpic{width:52px; height:52px; border-radius:var(--radius); background:var(--image-base) center/cover; box-shadow:inset 0 0 0 1px rgba(28,22,14,.06);}
.kj .dd-relrow .rtx{min-width:0;}
.kj .dd-relrow .rtop{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
.kj .dd-relrow .nj{font-family:var(--font-jp); font-size:17px; font-weight:600; color:var(--ink); line-height:1.2;}
.kj .dd-relrow .nr{font-size:11.5px; color:var(--faint); font-weight:500; letter-spacing:.2px;}
.kj .dd-relrow .ne{font-size:12.5px; color:var(--stone); margin-top:2px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* ════ federated search overlay ════ */
.kj .search-ov{position:fixed; inset:0; z-index:90; background:var(--bg); transform:translateY(100%); transition:transform .46s var(--ease); display:flex; flex-direction:column;}
.kj .search-ov.on{transform:translateY(0);}
.kj .search-bar{display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top,0px) + 46px) var(--side) 12px;}
.kj .search-bar .field{flex:1; display:flex; align-items:center; gap:9px; background:var(--paper); border-radius:var(--radius-full); padding:12px 15px; box-shadow:var(--shadow-rest);}
.kj .search-bar .field svg{color:var(--faint); opacity:.75; flex:0 0 auto;}
.kj .search-bar .field input{flex:1; min-width:0; border:none; background:none; font-family:var(--font-ui); font-size:15px; color:var(--ink); outline:none;}
.kj .search-bar .field input::placeholder{color:var(--faint); font-weight:400;}
.kj .search-bar .field .clear{width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:none; align-items:center; justify-content:center; color:var(--faint); background:rgba(44,40,32,.06);}
.kj .search-bar .field .clear.show{display:flex;}
.kj .search-cancel{font-family:var(--font-ui); font-size:14px; color:var(--accent); font-weight:500; padding:4px;}
.kj .scope-chips{display:flex; gap:8px; padding:2px var(--side) 11px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex:0 0 auto;}
.kj .scope-chips::-webkit-scrollbar{display:none;}
.kj .scope-chips .scope-chip{margin:0;}
.kj .scope-chips .scope-chip.on{background:var(--ink); color:var(--paper); box-shadow:none; font-weight:600;}
.kj .search-meta{font-family:var(--font-ui); font-size:11px; color:var(--faint); padding:0 var(--side) 9px; font-variant-numeric:tabular-nums; letter-spacing:.2px; flex:0 0 auto;}
.kj .search-meta:empty{display:none;}
.kj .sresults{flex:1; overflow-y:auto; padding:2px var(--side) 28px;}
.kj .sresults::-webkit-scrollbar{display:none;}
.kj .s-grouplab{font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:.2px; color:var(--faint); padding:22px 2px 9px;}
.kj .s-grouplab:first-child{padding-top:10px;}

/* word row */
.kj .srow{position:relative; display:flex; align-items:center; gap:13px; padding:12px 4px; width:100%; text-align:left; border-radius:var(--radius);}
.kj .srow + .srow{box-shadow:0 -1px 0 var(--divider);}
.kj .srow:active{background:rgba(44,40,32,.03);}
.kj .srow .sribbon{position:absolute; left:-2px; top:50%; transform:translateY(-50%); width:2px; height:46%; border-radius:2px; background:transparent;}
.kj .srow.is-learned .sribbon{background:var(--moss);}  .kj .srow.is-saved .sribbon{background:#7A5E1C;}
.kj .srow .sth{width:50px; height:50px; border-radius:var(--radius); background-size:cover; background-position:center; background-color:var(--image-base); flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(28,22,14,.07);}
.kj .srow .si{min-width:0; flex:1; display:flex; flex-direction:column; gap:1px;}
.kj .srow .sj{font-family:var(--font-jp); font-size:17px; font-weight:600; color:var(--ink); line-height:1.15; font-feature-settings:"palt" 1;}
.kj .srow .sr{font-family:var(--font-ui); font-size:11.5px; font-weight:500; color:var(--faint); letter-spacing:.15px;}
.kj .srow .se{font-family:var(--font-ui); font-size:12.5px; font-weight:400; color:var(--stone); line-height:1.3; margin-top:1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.kj .srow .sright{display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:3px; flex:0 0 auto; max-width:84px;}
.kj .srow .stopic{font-family:var(--font-ui); font-size:10px; color:var(--faint); max-width:84px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.25;}
.kj .srow.is-learned .stopic, .kj .srow.is-saved .stopic{display:none;}
.kj .srow .sstate{font-family:var(--font-ui); font-size:10px; font-weight:600; letter-spacing:.2px;}
.kj .srow.is-learned .sstate{color:var(--moss);}  .kj .srow.is-saved .sstate{color:#7A5E1C;}
.kj .srow .sspk{width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--faint); opacity:.45; position:relative; transition:opacity .18s var(--ease), background .18s var(--ease), color .18s var(--ease);}
.kj .srow .sspk:active{transform:scale(.9); opacity:1; color:var(--accent);}
.kj .srow .sspk svg{width:15px; height:15px; fill:currentColor;}
.kj .srow .sspk.playing::after{content:""; position:absolute; inset:2px; border-radius:50%; border:1.5px solid var(--accent); opacity:.5; animation:ddPulse .6s var(--ease) forwards;}
.kj .srow mark, .kj .erow mark, .kj .s-chip mark, .kj .s-none mark{color:inherit; font-weight:600; background:linear-gradient(rgba(44,44,44,.5),rgba(44,44,44,.5)) 0 92%/100% 1.5px no-repeat; border-radius:0; -webkit-box-decoration-break:clone; box-decoration-break:clone;}

/* search states */
.kj .s-none{padding:30px 2px 0; max-width:300px;}
.kj .s-none-q{font-family:var(--font-ui); font-size:14px; font-weight:500; color:var(--stone); line-height:1.45; margin:0;}
.kj .s-none-q mark{font-weight:600;}
.kj .s-none-hint{font-family:var(--font-ui); font-size:12.5px; color:var(--faint); line-height:1.55; margin:8px 0 0;}
.kj .s-none-hint i{font-style:normal; color:var(--stone);}
.kj .s-jump{margin-top:15px; font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--accent); background:none; padding:8px 0; display:inline-flex; align-items:center; gap:6px;}
.kj .s-jump svg{width:15px; height:15px;}
.kj .s-emptylab{font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:.2px; color:var(--faint); padding:24px 2px 11px;}
.kj .s-emptylab:first-child{padding-top:10px;}
.kj .s-chiprail{display:flex; flex-wrap:wrap; gap:8px;}
.kj .s-chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-jp); font-size:14px; font-weight:600; color:var(--ink); padding:8px 13px; border-radius:var(--radius-full); background:var(--paper); box-shadow:var(--shadow-rest);}
.kj .s-chip .cr{font-family:var(--font-ui); font-size:10.5px; color:var(--faint); font-weight:500;}
.kj .s-tip{font-family:var(--font-ui); font-size:12px; color:var(--faint); padding:24px 2px 0; line-height:1.6;}

/* entity row (topic / theme / textbook / lesson) */
.kj .erow{position:relative; display:flex; align-items:center; gap:13px; padding:13px 4px; width:100%; text-align:left; border-radius:var(--radius);}
.kj .erow + .erow{box-shadow:0 -1px 0 var(--divider);}
.kj .erow:active{background:rgba(44,40,32,.03);}
.kj .erow .eth{width:50px; height:50px; border-radius:var(--radius); background:var(--image-base) center/cover; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(28,22,14,.07);}
.kj .erow .ei{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px;}
.kj .erow .ekind{font-family:var(--font-ui); font-size:10px; font-weight:600; letter-spacing:.5px; color:var(--faint);}
.kj .erow .en{font-family:var(--font-ui); font-size:15px; font-weight:600; color:var(--ink); line-height:1.25;}
.kj .erow .ejp{font-family:var(--font-jp); font-size:12px; font-weight:500; color:var(--stone); line-height:1.2;}
.kj .erow .emeta{font-family:var(--font-ui); font-size:11.5px; font-weight:400; color:var(--faint); margin-top:1px; font-variant-numeric:tabular-nums;}
.kj .erow .eadd{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent); background:none;}
.kj .erow .eadd:active{transform:scale(.88); background:rgba(61,90,128,.1);}
.kj .erow .eadd svg{width:18px; height:18px;}