/* =============================================================
   XICA REBRAND — 課題から探す（Issue Entry）
   File:  assets/css/xica-rebrand-issues.css
   Used:  page-issue-entry.php only
   Loads: before xica-rebrand.css (which is injected at wp_head 9999),
          alongside xica-rebrand-pages.css.
   Prefix: xr-iss-   (no generic class names → no legacy collisions)

   System rules followed (xica-rebrand.css):
   - ink / paper / grey tokens only — no accent colour
   - zero border-radius, zero shadows
   - 0.5px hairlines; a 1px ink rule opens structured data
   - serif-jp for statements, sans-jp for body, mono for eyebrows / indices
   - px units only (the template does not rely on a 62.5% root)

   v2 (design review):
   - type scale inside the library and table: 22 / 16 / 14 / 12
     (mono labels at 11 stay in the 11–12 band)
   - text colours: ink, ink-2, grey-1 only. grey-2 / grey-3 are for rules,
     borders and icons (grey-2 = 3.45:1 on white, fails AA for small text)
   - rhythm: ~6px inside a group, 16px between groups, 28px between entries
   ============================================================= */

.xr-iss {
    --xr-iss-pad-x: clamp(24px, 5vw, 80px);
    --xr-iss-pad-y: clamp(56px, 8vw, 96px);
    --xr-iss-indent: 48px;              /* door index column (32px) + gap (16px) */
    font-family: var(--sans-jp);
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink);
}
/* margin reset at class specificity (0,1,0): beats legacy element rules such as
   p { margin-bottom } and loses to the component rules that follow */
.xr-iss :where(p, h1, h2, h3, ul, figure) { margin: 0; }
.xr-iss-ib { display: inline-block; }

/* visually hidden, still read by screen readers */
.xr-iss-sr,
.xr-iss-mlabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* service identifier, used identically in entries, table and cases */
.xr-iss-code {
    display: inline-block;
    padding: 0 6px;
    border: 0.5px solid var(--grey-2);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: 0.08em;
    color: var(--ink);
    white-space: nowrap;
}

/* =========================================================
   1. SECTION SHELL
   ========================================================= */
.xr-iss-section { border-bottom: 0.5px solid var(--rule); background: var(--paper); }
.xr-iss-section--alt { background: var(--paper-3); }

.xr-iss-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--xr-iss-pad-x);
    padding-block: var(--xr-iss-pad-y);
}
.xr-iss-inner--tight { padding-block: clamp(48px, 6vw, 72px); }

.xr-iss-hd { margin-bottom: clamp(32px, 5vw, 48px); }

.xr-iss-eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-1);
    margin-bottom: 14px;
}
.xr-iss-h2 {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: clamp(22px, 3.5vw, 34px);
    line-height: 1.4;
    letter-spacing: 0.005em;
    color: var(--ink);
    text-wrap: balance;
    margin: 0;
}
.xr-iss-lead {
    margin-top: 20px;
    max-width: 42em;
    font-size: 15px;
    line-height: 1.95;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* shared text-button (reset / show all / close) */
.xr-iss-textbtn {
    font-family: var(--sans-jp);
    font-size: 12px;
    line-height: 1.6;
    color: var(--grey-1);
    background: none;
    border: 0;
    padding: 7px 0;                /* ≈ 33px target */
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.xr-iss-textbtn:hover { color: var(--ink); }

/* =========================================================
   2. HERO — mirrors .xr-cap-hero-section (dark mode) on the
      capability pages, in px.
   ========================================================= */
.xr-iss-hero {
    /* xr-elem--lg sets --xr-elem-w on ::before only, so the text column's
       clear-space would otherwise use the smaller default width. Declaring it
       on the section keeps the letter and the clear-space in step. */
    --xr-elem-w: clamp(270px, 32vw, 540px);
    background-color: var(--ink);
    color: var(--paper);
    padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px));
    padding-bottom: clamp(56px, 8vw, 104px);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.12);
}
.xr-iss-hero-wrap {
    max-width: var(--container);
    margin-inline: auto;          /* left margin is taken over by .xr-elem-clear--left */
    padding-inline: var(--xr-iss-pad-x);
}
.xr-iss-hero-eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);   /* 6.3:1 on ink (0.38 was 3.5:1) */
    margin-bottom: 20px;
}
.xr-iss-h1 {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: clamp(26px, 3.8vw, 42px);
    line-height: 1.35;
    letter-spacing: 0.005em;
    color: var(--paper);
    margin: 0;
}
.xr-iss-hero-lead {
    margin-top: clamp(24px, 3vw, 32px);
    max-width: 34em;
    padding-left: 20px;
    border-left: 0.5px solid rgba(255, 255, 255, 0.18);
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.55);
}

/* =========================================================
   3. LEDE — pull-quote register
   ========================================================= */
.xr-iss-lede-body {
    max-width: 820px;
    border-left: 1px solid var(--ink);
    padding-left: clamp(20px, 3vw, 32px);
}
.xr-iss-lede-body p {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.85;
    letter-spacing: 0.005em;
    color: var(--ink-2);
}
.xr-iss-lede-body p + p { margin-top: 10px; }

/* =========================================================
   4. FINDER — 課題（hairline grid）＋ 担当・場面（chips）
   ========================================================= */
.xr-iss-finder {
    border-top: 1px solid var(--ink);
    background: var(--paper-2);
    padding: clamp(20px, 3vw, 32px);
    border-left: 0.5px solid var(--rule);
    border-right: 0.5px solid var(--rule);
    border-bottom: 0.5px solid var(--rule);
}
.xr-iss-finder-title {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.xr-iss-map-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    border-top: 0.5px solid var(--rule);
    border-left: 0.5px solid var(--rule);
}
@media (min-width: 1024px) { .xr-iss-map-list { grid-template-columns: repeat(3, 1fr); } }
.xr-iss-map-list > li { border-right: 0.5px solid var(--rule); border-bottom: 0.5px solid var(--rule); }

.xr-iss-map-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 44px;
    padding: 14px 36px 16px 16px;
    text-align: left;
    background: var(--paper);
    color: var(--ink);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.xr-iss-map-item:hover { background: var(--paper-3); }
.xr-iss-map-idx {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    line-height: 1.4;
    color: var(--grey-1);
    font-variant-numeric: tabular-nums;
}
.xr-iss-map-label {
    font-family: var(--sans-jp);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
}
.xr-iss-map-chev {
    position: absolute;
    top: 13px;
    right: 12px;
    width: 14px;
    height: 14px;
    color: var(--grey-1);
    transition: transform 0.18s cubic-bezier(0.25, 0, 0, 1), color 0.18s ease;
}
.xr-iss-map-chev svg { display: block; width: 100%; height: 100%; }
.xr-iss-map-item:hover .xr-iss-map-chev { transform: translateX(2px); color: var(--ink); }
.xr-iss-map-item[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.xr-iss-map-item[aria-pressed="true"] .xr-iss-map-idx,
.xr-iss-map-item[aria-pressed="true"] .xr-iss-map-chev { color: rgba(255, 255, 255, 0.7); }
.xr-iss-map-item[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.xr-iss-map-item[aria-disabled="true"]:hover { background: var(--paper); }
.xr-iss-map-all { margin-top: 8px; }

.xr-iss-filters {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 0.5px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xr-iss-filters .xr-iss-finder-title { margin-bottom: 8px; }
.xr-iss-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xr-iss-filter-label {
    flex: none;
    width: 5em;
    font-size: 12px;
    color: var(--grey-1);
}
.xr-iss-pill {
    min-height: 36px;
    padding: 6px 14px;
    font-family: var(--sans-jp);
    font-size: 14px;
    line-height: 1.5;
    background: var(--paper);
    color: var(--ink);
    border: 0.5px solid var(--grey-2);           /* 3.45:1 — meets the 3:1 control-boundary rule */
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.xr-iss-pill:hover { border-color: var(--ink); }
.xr-iss-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.xr-iss-pill[aria-disabled="true"] { opacity: 0.35; cursor: default; border-style: dashed; }
.xr-iss-pill[aria-disabled="true"]:hover { border-color: var(--grey-2); }
.xr-iss-filter-status {
    min-height: 33px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: calc(5em + 8px);
    font-size: 12px;
    color: var(--grey-1);
}
.xr-iss-filter-status:not(:has(:not(:empty):not([hidden]))) { min-height: 0; }

/* =========================================================
   5. CONTEXT BAR — fixed under .xr-header (top set by JS)
   ========================================================= */
.xr-iss-ctx {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;                 /* below .xr-header (1100) and the mobile menu (1099) */
    background: var(--paper);
    border-bottom: 0.5px solid var(--rule);
    transform: translateY(-130%);
    visibility: hidden;
    transition: transform 0.22s cubic-bezier(0.25, 0, 0, 1), visibility 0s linear 0.22s;
}
.xr-iss-ctx.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.22s cubic-bezier(0.25, 0, 0, 1), visibility 0s;
}
.xr-iss-ctx-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 8px var(--xr-iss-pad-x);
    display: flex;
    align-items: center;
    gap: 8px;
}
.xr-iss-ctx-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    max-width: 340px;
    padding: 6px 12px;
    font-family: var(--sans-jp);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    border: 0.5px solid var(--grey-2);
    white-space: nowrap;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.xr-iss-ctx-btn:hover,
.xr-iss-ctx-btn.has-value { border-color: var(--ink); }
.xr-iss-ctx-btn[aria-expanded="true"] { border-color: var(--ink); background: var(--paper-2); }
.xr-iss-ctx-val { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.xr-iss-ctx-chev { flex: none; width: 12px; height: 12px; color: var(--grey-1); transition: transform 0.18s ease; }
.xr-iss-ctx-chev svg { display: block; width: 100%; height: 100%; }
.xr-iss-ctx-btn[aria-expanded="true"] .xr-iss-ctx-chev { transform: rotate(180deg); }
.xr-iss-lbl-short,
.xr-iss .v-short { display: none; }
.xr-iss-ctx-status { margin-left: 8px; font-size: 12px; color: var(--grey-1); white-space: nowrap; }
.xr-iss-ctx-panel { border-top: 0.5px solid var(--rule); background: var(--paper-2); }
.xr-iss-ctx-panel-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 16px var(--xr-iss-pad-x) 4px;
    max-height: 55vh;
    overflow: auto;
}
.xr-iss-ctx-panel-inner .xr-iss-filter-label { display: none; }
.xr-iss-ctx-hint { margin-top: 8px; font-size: 12px; color: var(--grey-1); }
.xr-iss-ctx-done {
    display: block;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 8px var(--xr-iss-pad-x) 12px;
    text-align: left;
}

/* =========================================================
   6. DOORS（課題）＋ ENTRIES（声 → 問い → アプローチ）
   Entry grid: voice | arrow | question | approach
   ========================================================= */
.xr-iss-doors { margin-top: clamp(40px, 5vw, 56px); }

.xr-iss {
    --xr-iss-entry-cols: minmax(0, 5fr) 20px minmax(0, 5fr) minmax(0, 3fr);
    --xr-iss-entry-gap: 20px;
}

.xr-iss-door {
    --xr-iss-dur: 0.42s;
    --xr-iss-ease: cubic-bezier(0.25, 0, 0, 1);
    display: flow-root;
    position: relative;
    border-top: 0.5px solid var(--rule);
    /* --xr-iss-clear = header + context bar + 16px, kept current by the page JS */
    scroll-margin-top: var(--xr-iss-clear, calc(var(--header-h) + 80px));
}
/* open state: a 1px ink rule draws in from the left over the hairline */
.xr-iss-door::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}
.xr-iss-door:not(.is-collapsed)::after { transform: scaleX(1); }
.xr-iss-door:not(.is-collapsed) + .xr-iss-door,
.xr-iss-door.is-collapsed + .xr-iss-door:not(.is-collapsed) { margin-top: clamp(28px, 3vw, 40px); }
.xr-iss-door:last-of-type { border-bottom: 0.5px solid var(--rule); }

/* ── head: heading + intro, one target in both states ── */
.xr-iss-door-head {
    position: relative;
    isolation: isolate;
    display: flow-root;
    padding-bottom: 18px;
    cursor: pointer;
}
.xr-iss-door-head::before {
    content: '';
    position: absolute;
    inset: 0 -12px;
    z-index: -1;
    background: transparent;
    transition: background-color 0.18s ease;
}
.xr-iss-door-head:hover::before { background: var(--paper-2); }

.xr-iss-door-title { font-size: inherit; }
.xr-iss-door-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 0 8px;
    text-align: left;
    color: var(--ink);
    background: none;
}
.xr-iss-door-idx {
    flex: none;
    width: 32px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--grey-1);
    font-variant-numeric: tabular-nums;
}
.xr-iss-door-name {
    flex: 1;
    min-width: 0;
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.005em;
    word-break: keep-all;          /* break Japanese at 、 rather than mid-phrase */
    overflow-wrap: anywhere;
}
.xr-iss-door-count {
    flex: none;
    font-size: 12px;
    color: var(--grey-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.xr-iss-door-chev {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0.5px solid var(--grey-2);
    color: var(--ink);
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.xr-iss-door-chev svg { display: block; width: 12px; height: 12px; }
.xr-iss-door-head:hover .xr-iss-door-chev { border-color: var(--ink); background: var(--paper); }
.xr-iss-door:not(.is-collapsed) .xr-iss-door-chev svg { transform: rotate(180deg); }

.xr-iss-door-intro {
    margin-left: var(--xr-iss-indent);
    max-width: 680px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--grey-1);
}

/* ── body: height animates via grid rows (0fr ↔ 1fr), no measuring ── */
.xr-iss-door-body {
    display: grid;
    grid-template-rows: 1fr;
}
.xr-iss-door-inner { min-height: 0; overflow: hidden; }
.xr-iss-door.is-collapsed .xr-iss-door-body {
    grid-template-rows: 0fr;
    visibility: hidden;            /* takes collapsed links out of the tab order */
}
.xr-iss-door-inner > * { opacity: 1; transform: none; }
.xr-iss-door.is-collapsed .xr-iss-door-inner > * { opacity: 0; transform: translateY(-6px); }

/* motion is switched on by JS after the first render, so nothing animates on load */
.xr-iss-doors.is-animated .xr-iss-door {
    transition: margin-top var(--xr-iss-dur) var(--xr-iss-ease);
}
.xr-iss-doors.is-animated .xr-iss-door::after {
    transition: transform 0.5s var(--xr-iss-ease);
}
.xr-iss-doors.is-animated .xr-iss-door-chev svg {
    transition: transform var(--xr-iss-dur) var(--xr-iss-ease);
}
.xr-iss-doors.is-animated .xr-iss-door-body {
    transition: grid-template-rows var(--xr-iss-dur) var(--xr-iss-ease), visibility 0s;
}
.xr-iss-doors.is-animated .xr-iss-door.is-collapsed .xr-iss-door-body {
    transition: grid-template-rows var(--xr-iss-dur) var(--xr-iss-ease), visibility 0s linear var(--xr-iss-dur);
}
/* opening: content fades in once the height is on its way; closing: it fades out first */
.xr-iss-doors.is-animated .xr-iss-door-inner > * {
    transition: opacity 0.32s ease 0.12s, transform 0.42s var(--xr-iss-ease) 0.08s;
}
.xr-iss-doors.is-animated .xr-iss-door.is-collapsed .xr-iss-door-inner > * {
    transition: opacity 0.14s ease, transform 0.2s ease;
}

/* column header — stated once per open 課題 */
.xr-iss-cols {
    display: grid;
    grid-template-columns: var(--xr-iss-entry-cols);
    gap: 0 var(--xr-iss-entry-gap);
    margin-left: calc(var(--xr-iss-indent) - 12px);
    margin-right: -12px;
    margin-top: 12px;
    padding: 0 12px 8px;
    border-bottom: 0.5px solid var(--grey-2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--grey-1);
}

.xr-iss-entries {
    list-style: none;
    margin: 0 0 clamp(28px, 3vw, 40px) var(--xr-iss-indent);
    padding: 0;
}
.xr-iss-entry {
    display: grid;
    grid-template-columns: var(--xr-iss-entry-cols);
    gap: 0 var(--xr-iss-entry-gap);
    align-items: start;
    margin-inline: -12px;
    padding: 14px 12px;            /* 28px between entries */
    border-bottom: 0.5px solid var(--rule);
    scroll-margin-top: var(--xr-iss-clear, calc(var(--header-h) + 80px));
}
.xr-iss-entry.is-hidden { display: none; }

.xr-iss-voice {
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-2);
}
.xr-iss-tags {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--grey-1);
}
.xr-iss-entry-arrow {
    padding-top: 3px;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    color: var(--grey-1);
}
.xr-iss-q {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.005em;
    color: var(--ink);
}
.xr-iss-method-link {
    display: block;
    padding: 2px 0 4px;
    color: var(--ink);
}
.xr-iss-method-link .xr-iss-code { display: table; margin-bottom: 6px; }
.xr-iss-method-link .btn-arrow-glyph { margin-left: 6px; }
.xr-iss-method-name {
    font-size: 14px;
    line-height: 1.6;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 4px;
    text-decoration-color: var(--grey-2);
    transition: text-decoration-color 0.18s ease;
}
.xr-iss-method-link:hover .xr-iss-method-name { text-decoration-color: var(--ink); }
.xr-iss-method-link:hover .xr-iss-code { border-color: var(--ink); }
.xr-iss .btn-arrow-glyph {
    font-family: var(--mono);
    font-size: 14px;
    transition: transform 0.18s cubic-bezier(0.25, 0, 0, 1);
}
.xr-iss-method-link:hover .btn-arrow-glyph,
.xr-iss-row:hover .btn-arrow-glyph,
.xr-iss-case:hover .btn-arrow-glyph { transform: translateX(3px); }

.xr-iss-empty {
    display: none;
    padding: 32px 0 0 var(--xr-iss-indent);
    font-size: 14px;
    color: var(--grey-1);
}
.xr-iss-empty.is-shown { display: block; }

/* =========================================================
   7. APPROACHES TABLE — the question column leads
   ========================================================= */
.xr-iss-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border-top: 1px solid var(--ink);
}
.xr-iss-col-svc    { width: 25%; }
.xr-iss-col-answer { width: 30%; }
.xr-iss-col-go     { width: 40px; }
.xr-iss-table th,
.xr-iss-table td {
    padding: 20px 20px 20px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 0.5px solid var(--rule);
}
.xr-iss-table thead th {
    padding-top: 12px;
    padding-bottom: 10px;
    border-bottom-color: var(--grey-2);
    font-family: var(--sans-jp);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    color: var(--grey-1);
}
.xr-iss-table tbody th { font-weight: 400; }
.xr-iss-table tbody th .xr-iss-code { margin-bottom: 8px; }
.xr-iss-svc-link { display: block; color: var(--ink); }
.xr-iss-svc-name {
    font-family: var(--sans-jp);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 4px;
    text-decoration-color: var(--grey-2);
    transition: text-decoration-color 0.18s ease;
}
.xr-iss-svc-desc {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--grey-1);
}
.xr-iss-td-answer {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
}
.xr-iss-td-data,
.xr-iss-td-output {
    font-size: 14px;
    line-height: 1.8;
    color: var(--grey-1);
}
.xr-iss-table .xr-iss-td-go { padding-right: 0; text-align: right; color: var(--ink); }

/* whole row is a link (enhanced by JS; the service name stays the real link) */
.xr-iss-row { transition: background-color 0.18s ease; }
.xr-iss-row.is-linked { cursor: pointer; }
.xr-iss-row:hover { background: var(--paper-2); }
.xr-iss-row:hover .xr-iss-svc-name,
.xr-iss-row:focus-within .xr-iss-svc-name { text-decoration-color: var(--ink); }
.xr-iss-row:hover .xr-iss-code { border-color: var(--ink); }
/* hover fill reaches 12px beyond the text on both ends */
.xr-iss-table tbody th { padding-left: 12px; }
.xr-iss-table thead th:first-child { padding-left: 12px; }
.xr-iss-table .xr-iss-td-go { padding-right: 12px; }

.xr-iss-note {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--grey-1);
}

/* =========================================================
   8. CASES — whole-card links on a hairline grid
   ========================================================= */
.xr-iss-cases {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 0.5px solid var(--rule);
    border-left: 0.5px solid var(--rule);
}
@media (min-width: 768px) { .xr-iss-cases { grid-template-columns: repeat(3, 1fr); } }
.xr-iss-case {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 220px;
    padding: clamp(24px, 3vw, 32px);
    background: var(--paper-3);
    color: var(--ink);
    border-right: 0.5px solid var(--rule);
    border-bottom: 0.5px solid var(--rule);
    transition: background-color 0.18s ease;
}
.xr-iss-case:hover { background: var(--paper-2); }
.xr-iss-case-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
}
.xr-iss-case-client {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--grey-1);
}
.xr-iss-case-logo { max-height: 48px; width: auto; }
.xr-iss-case-q {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.005em;
    padding-top: 16px;
    border-top: 0.5px solid var(--rule);
}
.xr-iss-case-link {
    margin-top: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 16px;
    border-top: 0.5px solid var(--rule);
    font-size: 14px;
}

/* =========================================================
   9. BRIDGE — ink section (mirrors .bg-ink)
   ========================================================= */
.xr-iss-bridge { background: var(--ink); color: var(--paper); }
.xr-iss-bridge .xr-iss-eyebrow { color: rgba(255, 255, 255, 0.55); }
.xr-iss-bridge .xr-iss-h2 { color: var(--paper); }
.xr-iss-bridge-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
@media (min-width: 1024px) { .xr-iss-bridge-grid { grid-template-columns: 1fr 1fr; } }
.xr-iss-bridge-text {
    margin-top: 20px;
    max-width: 34em;
    font-size: 15px;
    line-height: 1.95;
    color: rgba(255, 255, 255, 0.72);
}
/* inverted .btn — same as .bg-ink .btn in xica-rebrand-pages.css, restated
   here so the button does not depend on the .bg-ink class */
.xr-iss-bridge .btn {
    margin-top: clamp(28px, 3vw, 36px);
    border-color: rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(to top, var(--paper) 50%, transparent 50%);
    color: var(--paper);
}
.xr-iss-bridge .btn:hover,
.xr-iss-bridge .btn:focus-visible { color: var(--ink); border-color: var(--paper); }
.xr-iss-bridge :focus-visible { outline-color: var(--paper); }

.xr-iss-spiral {
    margin: 0;
    padding: clamp(12px, 2vw, 20px);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
}
.xr-iss-spiral-svg { display: block; width: 100%; height: auto; }
.xr-iss-spiral-svg .sp-serif { font-family: var(--serif-jp); }
.xr-iss-spiral-svg .sp-sans  { font-family: var(--sans-jp); }
.xr-iss-spiral-svg .sp-mono  { font-family: var(--mono); }
.xr-iss-spiral figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.55);
}

/* =========================================================
   10. RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
    /* entries stack: voice (+ tags) → question → approach.
       To lead with the question instead, set .xr-iss-q { order: -1; } */
    .xr-iss-cols { display: none; }
    .xr-iss-entries { border-top: 0.5px solid var(--grey-2); }
    .xr-iss-door-inner { padding-top: 2px; }
    .xr-iss-entry {
        grid-template-columns: 1fr;
        gap: 0;
        margin-inline: 0;
        padding: 18px 0;
    }
    .xr-iss-entry-arrow { display: none; }
    .xr-iss-mlabel {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: block;
        margin-bottom: 2px;
        font-family: var(--sans-jp);
        font-weight: 400;
        font-size: 12px;
        line-height: 1.6;
        color: var(--grey-1);
    }
    .xr-iss-q { margin-top: 16px; }
    .xr-iss-method { margin-top: 16px; }
    .xr-iss-method-link { min-height: 44px; align-items: center; }
}

@media (max-width: 767px) {
    .xr-iss { --xr-iss-indent: 0px; }
    .xr-iss-door-idx { width: auto; }
    .xr-iss-door-toggle { gap: 12px; align-items: flex-start; }
    .xr-iss-door-name { font-size: 18px; }
    .xr-iss-door-count { display: none; }
    .xr-iss-door-chev { margin-top: -2px; }

    /* Approaches table → stacked cards; column name printed above each value */
    .xr-iss-table,
    .xr-iss-table tbody,
    .xr-iss-table tr,
    .xr-iss-table th,
    .xr-iss-table td { display: block; width: 100%; }
    .xr-iss-table colgroup { display: none; }
    .xr-iss-table thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .xr-iss-table tbody tr {
        position: relative;
        padding: 20px 12px 8px;
        border-bottom: 0.5px solid var(--rule);
    }
    .xr-iss-table tbody th,
    .xr-iss-table td { padding: 0 0 12px; border-bottom: 0; }
    .xr-iss-table tbody th { padding: 0 32px 16px 0; }
    .xr-iss-table .xr-iss-td-go {
        position: absolute;
        top: 20px;
        right: 12px;
        width: auto;
        padding: 0;
    }
    .xr-iss-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-family: var(--sans-jp);
        font-weight: 400;
        font-size: 12px;
        color: var(--grey-1);
    }
    .xr-iss-table .xr-iss-td-go::before { content: none; }

    .xr-iss-case { min-height: 0; }
    .xr-iss-case-q { font-size: 18px; }
}

@media (max-width: 640px) {
    .xr-iss-finder { padding: 16px; }
    .xr-iss-filter-label { width: 100%; }
    .xr-iss-filter-status { padding-left: 0; }
    .xr-iss-pill { min-height: 40px; }

    .xr-iss-ctx-inner { padding: 8px 12px; gap: 6px; }
    .xr-iss-ctx-btn { flex: 1 1 0; min-width: 0; min-height: 40px; justify-content: center; padding: 6px 8px; font-size: 13px; }
    .xr-iss-lbl-long { display: none; }
    .xr-iss-lbl-short { display: inline; }
    .xr-iss .v-long { display: none; }
    .xr-iss .v-short { display: inline; }
    .xr-iss-ctx-status { display: none; }
    .xr-iss-ctx-reset { flex: none; }
    .xr-iss-ctx-panel-inner { padding: 12px; }
    .xr-iss-ctx-done { padding: 8px 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .xr-iss *,
    .xr-iss *::before,
    .xr-iss *::after,
    .xr-iss-ctx { transition: none !important; }
}

/* =============================================================
   APPEND TO: assets/css/xica-rebrand-issues.css  (end of file)
   v4 — #entry-N landing mark
   The voice a link points to gets a left ink rule for ~2.4s
   (same accent grammar as .hairline-box-accent). Box-shadow, not
   border, so the row does not shift.
   [VERIFY] against existing .xr-iss-entry rules (not reviewed here):
   if the row already animates box-shadow or background on hover,
   merge the transition lists instead of overriding them.
   ============================================================= */
.xr-iss-entry {
    transition: box-shadow 0.6s ease, background-color 0.6s ease;
}
.xr-iss-entry.is-target {
    box-shadow: inset 2px 0 0 var(--ink);
    background-color: var(--paper-2);
}
@media (prefers-reduced-motion: reduce) {
    .xr-iss-entry { transition: none; }
}
@media (max-width: 860px) {
    .xr-iss-entry.is-target { padding-left: 12px; }
}
/* STRATEGY line under the approaches table */
.xr-iss-next {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 0.5px solid var(--rule);
}
.xr-iss-next-lead { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.xr-iss-next-link { display: inline-flex; align-items: baseline; gap: 10px; padding: 0; }
.xr-iss-next-link .xr-iss-code { margin: 0; }
.xr-iss-next-link .btn-arrow-glyph { margin-left: 0; }
@media (max-width: 860px) {
    .xr-iss-next-link { min-height: 44px; align-items: center; }
}

/* phrase-aware line breaks (Chrome/Edge 119+): no lone 「か。」 at the start of a line */
.xr-iss-voice,
.xr-iss-q,
.xr-iss-door-intro,
.xr-iss .xr-cta-bar__q,
.xr-iss-table th,
.xr-iss-table td { word-break: auto-phrase; }