/* ═══════════════════════════════════════════════════════════════════════════
   道をつくる · journey-composer-desktop.css — the D4 SENTENCE-RAIL composer
   (owner-approved 2026-07-16; spec design-mockups/michi-sentence/d4-rail.html,
   brief HANDOFF_IMPLEMENT.md). Replaces the five-valve bench.

   Shape: say line → suggestions → the sentence (pure text, five tappable
   segments) → lesson rows → count line → the forming wall (+ the honest
   more-tile) → the keep row; the pills hang on a sticky rail to the right.
   Say = add · sentence = read + reopen · rail = remove.

   Level model: #journeyBenchRoot is a fixed overlay above the hall (z 9580,
   under the hall toast's 9600), gated by body.bench-room. Beam chrome
   (.genkan-beam, .gb-*) comes from home-hall.css; this file adds only the
   room-label + way-back pieces the hall's bare beam doesn't carry.
   Everything else is scoped under .bench-room-root so nothing leaks into
   the rooms beneath.

   Tokens only. Small informational text uses --color-faint-warm (AA at
   these sizes). JP chrome at ONE landmark: the beam room name 道をつくる;
   teaching JP (です・ます in a politeness def) keeps its romaji inline.
   ═══════════════════════════════════════════════════════════════════════════ */

.bench-room-root {
    position: fixed;
    inset: 0;
    z-index: 9580;   /* above the hall, under the hall toast's 9600 */
    background: var(--color-paper, #F0EDE8);
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: 'Inter', sans-serif;
}
.bench-room-root[hidden] { display: none; }
.bench-room-root:focus { outline: none; }

/* components.css's bare button {} is a raised white pill (background, shadow,
   hover translateY). Neutralize INSIDE this room, first in the file, so every
   later block styles from a flat baseline. (Never widen home-hall.css's reset
   list — the #665 rule.) */
.bench-room-root button {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.bench-room-root button:hover,
.bench-room-root button:active {
    transform: none;
    box-shadow: none;
}

/* ═══ the beam's room pieces (the hall beam lacks them) ═══ */
.bench-room-root .gb-div { width: 1px; height: 18px; background: rgba(44, 44, 44, 0.08); }
.bench-room-root .gb-room { display: flex; align-items: baseline; gap: 8px; }
.bench-room-root .gb-room [lang="ja"] {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-ink, #2C2C2C);
}
.bench-room-root .gb-room-romaji {
    font-size: 10.5px;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--color-amber-deep, #8A6E35);
}
.bench-room-root .gb-room-en {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-faint-warm, #6E6860);
}
.bench-room-root .gb-brand-btn { cursor: pointer; }
.bench-room-root .gb-brand-btn:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 2px; border-radius: 6px; }
.bench-room-root .gb-back {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-stone, #57534e);
    padding: 6px 10px;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.bench-room-root .gb-back:hover { color: var(--color-ink, #2C2C2C); background: rgba(44, 44, 44, 0.05); }
.bench-room-root .gb-back:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 2px; }

/* ═══ THE TWO COLUMNS — the composing page and the rail ═══ */
.bench-room-root .d4-wrap {
    display: flex;
    align-items: flex-start;
    gap: 44px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 44px 26px 64px;
}
.bench-room-root .d4-main { flex: 1; min-width: 0; }

/* ═══ THE SAY LINE — one type-in, always the way in ═══ */
.bench-room-root .d4-say {
    max-width: 640px;
    border-bottom: 1px solid rgba(44, 44, 44, 0.18);
    padding-bottom: 9px;
}
.bench-room-root .d4-say input {
    border: 0;
    outline: 0;
    background: none;
    width: 100%;
    font-size: 17px;
    font-weight: 400;
    color: var(--color-ink, #2C2C2C);
}
.bench-room-root .d4-say input::placeholder { color: var(--color-faint, #8C8578); font-weight: 300; }
.bench-room-root .d4-say:focus-within { border-bottom-color: rgba(44, 44, 44, 0.4); }

/* ═══ SUGGESTIONS — cross-family, labeled, honest counts ═══ */
.bench-room-root .d4-sug { max-width: 640px; margin: 10px 0 4px; }
.bench-room-root .d4-sug-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--color-stone, #57534e);
}
.bench-room-root .d4-sug-opt:hover,
.bench-room-root .d4-sug-opt:focus-visible { color: var(--color-ink, #2C2C2C); }
.bench-room-root .d4-sug-opt:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 2px; border-radius: 2px; }
.bench-room-root .d4-sug-opt.first { color: var(--color-ink, #2C2C2C); }
.bench-room-root .d4-sug-opt.spent { opacity: 0.5; }
.bench-room-root .d4-sug-opt .fam {
    flex: none;
    width: 104px;
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--color-faint-warm, #6E6860);
    text-transform: uppercase;
    white-space: nowrap;
}
.bench-room-root .d4-sug-opt .art,
.bench-room-root .d4-sug-opt .artslot { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; flex: none; }
.bench-room-root .d4-sug-opt .art { box-shadow: 0 1px 2px rgba(44, 44, 44, 0.12); }
.bench-room-root .d4-sug-opt .nm { font-weight: 500; }
.bench-room-root .d4-sug-opt .n { color: var(--color-faint-warm, #6E6860); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.bench-room-root .d4-sug-opt .def { color: var(--color-faint-warm, #6E6860); font-size: 11.5px; font-style: italic; }
.bench-room-root .d4-sug-opt .def [lang="ja"] { font-family: 'Klee One', 'Noto Sans JP', sans-serif; font-style: normal; }
.bench-room-root .d4-sug-empty { padding: 8px 0; font-size: 12.5px; color: var(--color-faint-warm, #6E6860); font-style: italic; }

/* ═══ THE SENTENCE — pure text, every segment a door ═══ */
.bench-room-root .d4-sentence {
    margin-top: 30px;
    font-size: 27px;
    font-weight: 300;
    color: var(--color-ink, #2C2C2C);
    line-height: 1.85;
    letter-spacing: -0.2px;
}
.bench-room-root .d4-seg {
    display: inline-block;
    padding: 0 5px;
    margin: 0 1px;
    font-weight: 400;
    color: var(--color-faint, #8C8578);
    border-bottom: 1.5px dashed rgba(44, 44, 44, 0.28);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.bench-room-root .d4-seg:hover,
.bench-room-root .d4-seg:focus-visible { color: var(--color-ink, #2C2C2C); border-color: rgba(44, 44, 44, 0.5); }
.bench-room-root .d4-seg:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 3px; border-radius: 2px; }
.bench-room-root .d4-seg.set {
    color: var(--color-moss, #6B7F5C);
    font-weight: 500;
    border-bottom: 1.5px solid rgba(107, 127, 92, 0.45);
}
.bench-room-root .d4-seg.set:hover { color: #56684a; border-color: rgba(107, 127, 92, 0.75); }
.bench-room-root .d4-seg.open { color: var(--color-ink, #2C2C2C); border-bottom: 1.5px solid var(--color-accent, #3D5A80); }

/* ═══ LESSON ROWS — a picked book offers its lessons ═══ */
.bench-room-root .d4-lrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 6px;
    margin-top: 12px;
    max-width: 760px;
}
.bench-room-root .d4-lbook {
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--color-faint-warm, #6E6860);
    text-transform: uppercase;
    margin-right: 6px;
    white-space: nowrap;
}
.bench-room-root .d4-lall {
    font-size: 12px;
    color: var(--color-stone, #57534e);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.bench-room-root .d4-lall:hover { color: var(--color-ink, #2C2C2C); }
.bench-room-root .d4-lall.on { color: var(--color-moss, #6B7F5C); font-weight: 600; }
.bench-room-root .d4-ln {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--color-stone, #57534e);
    border: 1px solid rgba(44, 44, 44, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.bench-room-root .d4-ln:hover { color: var(--color-ink, #2C2C2C); border-color: rgba(44, 44, 44, 0.3); }
.bench-room-root .d4-ln.on {
    background: rgba(107, 127, 92, 0.12);
    border-color: rgba(107, 127, 92, 0.5);
    color: var(--color-moss, #6B7F5C);
    font-weight: 600;
}
.bench-room-root .d4-ln:focus-visible,
.bench-room-root .d4-lall:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 1px; }

/* ═══ THE COUNT LINE — one honest number ═══ */
.bench-room-root .d4-count { margin-top: 20px; font-size: 13.5px; color: var(--color-stone, #57534e); }
.bench-room-root .d4-count b {
    color: var(--color-ink, #2C2C2C);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ═══ THE FORMING WALL — real tiles, then the honest more-tile ═══ */
.bench-room-root .d4-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 14px 12px;
    margin-top: 26px;
}
.bench-room-root .d4-strip:empty { margin-top: 0; }
.bench-room-root .d4-tile { min-width: 0; }
.bench-room-root .d4-art {
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(44, 44, 44, 0.06);
}
.bench-room-root .d4-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bench-room-root .d4-jp {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: var(--color-ink, #2C2C2C);
    margin-top: 6px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bench-room-root .d4-rj {
    font-size: 10.5px;
    font-style: italic;
    color: var(--color-romaji, #78716c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bench-room-root .d4-more {
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    border: 1px dashed rgba(44, 44, 44, 0.22);
    background: rgba(250, 250, 247, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: border-color 0.15s ease;
}
.bench-room-root .d4-more:hover { border-color: rgba(44, 44, 44, 0.38); }
.bench-room-root .d4-more:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 2px; }
.bench-room-root .d4-more b {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-stone, #57534e);
    font-variant-numeric: tabular-nums;
}
.bench-room-root .d4-more span {
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-faint-warm, #6E6860);
}

/* ═══ THE KEEP ROW — add to your hall · already there · undo ═══ */
.bench-room-root .d4-keep { margin-top: 34px; }
.bench-room-root .d4-keep:empty { margin-top: 0; }
.bench-room-root .d4-keep-btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 999px;
    border: 1px solid rgba(107, 127, 92, 0.45);
    color: var(--color-moss, #6B7F5C);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s ease;
}
.bench-room-root .d4-keep-btn:hover { background: rgba(107, 127, 92, 0.08); }
.bench-room-root .d4-keep-btn:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 2px; }
.bench-room-root .d4-note { font-size: 13px; color: var(--color-moss, #6B7F5C); font-weight: 600; }
.bench-room-root .d4-note .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-moss, #6B7F5C);
    margin-right: 6px;
    vertical-align: 1px;
}
.bench-room-root .d4-note button {
    color: var(--color-stone, #57534e);
    font-weight: 400;
    margin-left: 10px;
    font-size: 12.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(44, 44, 44, 0.25);
}
.bench-room-root .d4-note button:hover { color: var(--color-ink, #2C2C2C); }
.bench-room-root .d4-note button:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 2px; }

/* ═══ THE RAIL — where the pills hang ═══ */
.bench-room-root .d4-rail {
    width: 230px;
    flex: none;
    position: sticky;
    top: 84px;
    padding-top: 58px;
}
.bench-room-root .d4-rgrp { margin-bottom: 18px; }
.bench-room-root .d4-rlbl {
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--color-faint-warm, #6E6860);
    text-transform: uppercase;
    margin-bottom: 7px;
}
.bench-room-root .d4-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin: 0 6px 6px 0;
    padding: 5px 11px 5px 12px;
    border-radius: 999px;
    background: rgba(107, 127, 92, 0.09);
    border: 1px solid rgba(107, 127, 92, 0.32);
    color: var(--color-moss, #6B7F5C);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.bench-room-root .d4-pill:hover { background: rgba(107, 127, 92, 0.15); border-color: rgba(107, 127, 92, 0.55); }
.bench-room-root .d4-pill:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 2px; }
.bench-room-root .d4-pill > span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bench-room-root .d4-pill .x { font-size: 11px; font-weight: 400; color: rgba(107, 127, 92, 0.6); flex: none; }
.bench-room-root .d4-pill:hover .x { color: var(--color-ink, #2C2C2C); }
.bench-room-root .d4-pill img {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(44, 44, 44, 0.12);
    flex: none;
}
.bench-room-root .d4-pill-faint {
    background: rgba(44, 44, 44, 0.04);
    border-color: rgba(44, 44, 44, 0.14);
    color: var(--color-stone, #57534e);
    font-weight: 500;
}
.bench-room-root .d4-pill-faint:hover { background: rgba(44, 44, 44, 0.07); border-color: rgba(44, 44, 44, 0.24); }
.bench-room-root .d4-pill-faint .x { color: rgba(44, 44, 44, 0.35); }

/* ═══ narrower desktops + iPad — the rail keeps its seat, targets grow ═══ */
@media (max-width: 1024px) {
    .bench-room-root .d4-wrap { gap: 28px; padding: 34px 20px 56px; }
    .bench-room-root .d4-rail { width: 200px; }
    .bench-room-root .d4-sentence { font-size: 24px; }
}
@media (pointer: coarse) {
    .bench-room-root .d4-ln { min-width: 32px; height: 32px; font-size: 12.5px; }
    .bench-room-root .d4-lall { padding: 5px 10px; }
    .bench-room-root .d4-pill { padding: 7px 13px 7px 14px; }
    .bench-room-root .d4-sug-opt { padding: 8px 0; }
    .bench-room-root .d4-seg { padding: 2px 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .bench-room-root * { transition: none !important; animation: none !important; }
}