/* Scoped to #action-mode-page. Auto-generated from tmp/action_mode. */

/* === site-wide reset within scope === */
#action-mode-page { all: revert; font-size: 18px; line-height: 1.85; color: #333; background: #fff; box-sizing: border-box; }
#action-mode-page *, #action-mode-page *::before, #action-mode-page *::after { box-sizing: border-box; }
#action-mode-page section, #action-mode-page h1, #action-mode-page h2, #action-mode-page h3, #action-mode-page h4, #action-mode-page h5, #action-mode-page h6,
#action-mode-page p, #action-mode-page main, #action-mode-page header, #action-mode-page footer, #action-mode-page table, #action-mode-page tr,
#action-mode-page td, #action-mode-page th, #action-mode-page ul, #action-mode-page ol, #action-mode-page li, #action-mode-page blockquote,
#action-mode-page figure, #action-mode-page figcaption, #action-mode-page aside, #action-mode-page nav, #action-mode-page details,
#action-mode-page summary, #action-mode-page .center { all: revert; box-sizing: border-box; }
#action-mode-page img, #action-mode-page svg { max-width: 100%; height: auto; display: inline-block; }
#action-mode-page a { text-decoration: none; }

:root {
    --text: #333333; --heading: #2c3e50; --muted: #7f8c8d;
    --border: #e0e4ea; --bg: #ffffff; --bg-soft: #f7f8fa; --bg-cream: #fbf7e9;
    --callout-border: #d4b94a; --link: #1a3c6e; --link-hover: #2c5594;
    --accent-conceptualist: #1a4fa0; --accent-conceptualist-soft: #e3ebf5; --accent-conceptualist-dark: #0f2e5e;
    --accent-methodologist: #c49a00; --accent-methodologist-soft: #faf3da; --accent-methodologist-dark: #7a5e00;
    --accent-harmonizer:    #087232; --accent-harmonizer-soft:    #e3f0e7; --accent-harmonizer-dark:    #034a1e;
    --accent-inspirer:      #c0392b; --accent-inspirer-soft:      #f8e3df; --accent-inspirer-dark:      #7a1c12;
    --serif: 'Shippori Mincho', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    --sans: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, sans-serif;
}
#action-mode-page * { margin: 0; padding: 0; box-sizing: border-box; }
#action-mode-page { scroll-behavior: smooth; }
#action-mode-page { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.85; letter-spacing: 0.02em; }
#action-mode-page a { color: var(--link); text-decoration: none; }
#action-mode-page a:hover { color: var(--link-hover); }
#action-mode-page img { max-width: 100%; display: block; }
#action-mode-page .subnav { border-bottom: 1px solid var(--border); padding: 18px 0; background: var(--bg); position: sticky; top: 0; z-index: 100; }
#action-mode-page .subnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
#action-mode-page .subnav-title { font-family: var(--serif); font-size: 15px; color: var(--heading); font-weight: 500; margin-right: 16px; }
#action-mode-page .subnav a, #action-mode-page .subnav .tab { padding: 6px 14px; border-radius: 4px; color: var(--text); transition: background 0.15s, color 0.15s; }
#action-mode-page .subnav a:hover { background: var(--bg-soft); }
#action-mode-page .subnav .tab.active { background: var(--heading); color: #fff; }
#action-mode-page .container { max-width: 920px; margin: 0 auto; padding: 0 32px; }
#action-mode-page .hero { padding: 0 0 60px; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 56px; }
#action-mode-page .hero-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin: 0 -32px 32px; border-radius: 0; }
#action-mode-page .hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
#action-mode-page .hero-text-area { padding-top: 16px; }
#action-mode-page .hero-label { font-size: 13px; color: var(--muted); letter-spacing: 0.2em; margin-bottom: 16px; }
#action-mode-page .hero h1 { font-family: var(--serif); font-size: 42px; font-weight: 500; color: var(--heading); margin-bottom: 18px; letter-spacing: 0.04em; }
#action-mode-page .hero-sub { font-size: 17px; color: var(--text); margin-bottom: 24px; line-height: 1.7; }
#action-mode-page .hero-meta { display: inline-flex; gap: 18px; font-size: 13px; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; justify-content: center; }
#action-mode-page section { margin-bottom: 64px; }
#action-mode-page section h2 { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--heading); margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 14px; }
#action-mode-page section h2 .num { font-size: 18px; color: var(--muted); font-weight: 400; }
#action-mode-page section h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--heading); margin: 36px 0 18px; }
#action-mode-page section h4 { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--heading); margin: 24px 0 12px; }
#action-mode-page section p { margin-bottom: 18px; }
#action-mode-page .callout { background: var(--bg-cream); border-left: 3px solid var(--callout-border); padding: 18px 24px; margin: 24px 0; border-radius: 0 6px 6px 0; }
#action-mode-page .callout p { margin-bottom: 8px; }
#action-mode-page .callout p:last-child { margin-bottom: 0; }
#action-mode-page .group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; }
#action-mode-page .group-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; }
#action-mode-page .group-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
#action-mode-page .group-card-band { height: 6px; position: relative; z-index: 2; }
#action-mode-page .group-card-band.conceptualist { background: var(--accent-conceptualist); }
#action-mode-page .group-card-band.methodologist { background: var(--accent-methodologist); }
#action-mode-page .group-card-band.harmonizer { background: var(--accent-harmonizer); }
#action-mode-page .group-card-band.inspirer { background: var(--accent-inspirer); }
#action-mode-page .group-card-mini { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
#action-mode-page .group-card-mini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
#action-mode-page .group-card:hover .group-card-mini img { transform: scale(1.04); }
#action-mode-page .group-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
#action-mode-page .group-card-en { font-family: var(--serif); font-size: 14px; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 6px; }
#action-mode-page .group-card-name { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--heading); margin-bottom: 12px; }
#action-mode-page .group-card-axis { font-size: 12px; color: var(--muted); margin-bottom: 12px; font-family: var(--sans); }
#action-mode-page .group-card-tagline { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 14px; flex: 1; }
#action-mode-page .group-card-func { font-size: 12px; color: var(--muted); padding-top: 12px; border-top: 1px dashed var(--border); }
#action-mode-page .group-card-func strong { color: var(--heading); font-weight: 500; }
#action-mode-page .group-card-cta { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; text-align: right; color: var(--link); }
#action-mode-page .group-detail { border-left: 4px solid; padding: 4px 0 4px 20px; margin: 28px 0; }
#action-mode-page .group-detail.conceptualist { border-color: var(--accent-conceptualist); }
#action-mode-page .group-detail.methodologist { border-color: var(--accent-methodologist); }
#action-mode-page .group-detail.harmonizer { border-color: var(--accent-harmonizer); }
#action-mode-page .group-detail.inspirer { border-color: var(--accent-inspirer); }
#action-mode-page .group-detail h3 { margin-top: 0; }
#action-mode-page .group-detail .axis-tag { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 3px; margin-left: 10px; font-weight: 500; vertical-align: middle; }
#action-mode-page .group-detail.conceptualist .axis-tag { background: var(--accent-conceptualist-soft); color: var(--accent-conceptualist-dark); }
#action-mode-page .group-detail.methodologist .axis-tag { background: var(--accent-methodologist-soft); color: var(--accent-methodologist-dark); }
#action-mode-page .group-detail.harmonizer    .axis-tag { background: var(--accent-harmonizer-soft);    color: var(--accent-harmonizer-dark); }
#action-mode-page .group-detail.inspirer      .axis-tag { background: var(--accent-inspirer-soft);      color: var(--accent-inspirer-dark); }
#action-mode-page table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
#action-mode-page table th { background: var(--bg-soft); padding: 12px 14px; text-align: left; font-weight: 500; color: var(--heading); border-bottom: 2px solid var(--border); font-size: 13px; }
#action-mode-page table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
#action-mode-page table tr:hover td { background: var(--bg-soft); }
#action-mode-page /* 8x8 relation matrix */
.rel-matrix { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 11px; table-layout: fixed; }
#action-mode-page .rel-matrix th, #action-mode-page .rel-matrix td { border: 1px solid var(--border); padding: 6px 4px; text-align: center; vertical-align: middle; height: 50px; }
#action-mode-page .rel-matrix th { background: var(--bg-soft); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: var(--heading); }
#action-mode-page .rel-matrix td { font-size: 10px; line-height: 1.4; color: var(--text); }
#action-mode-page .rel-matrix .rel-name { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; }
#action-mode-page .rel-matrix tr:hover td { background: transparent; }
#action-mode-page /* relation color coding */
.rel-identity { background: #f0f0f0; }
#action-mode-page .rel-mirror { background: #d6e4f5; }
#action-mode-page .rel-comp-identity { background: #e8f5e8; }
#action-mode-page .rel-conflict-mirror { background: #fde4e4; }
#action-mode-page .rel-business { background: #fff4d6; }
#action-mode-page .rel-kindred { background: #e0e6f0; }
#action-mode-page .rel-role-business { background: #f5e8d6; }
#action-mode-page .rel-role-kindred { background: #e0d6e8; }
#action-mode-page .rel-mirror-sup { background: #c2d6ed; }
#action-mode-page .rel-mirror-sub { background: #c2d6ed; }
#action-mode-page .rel-conflict-sup { background: #f7c8c8; }
#action-mode-page .rel-conflict-sub { background: #f7c8c8; }
#action-mode-page .rel-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; font-size: 12px; }
#action-mode-page .rel-legend-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; }
#action-mode-page .rel-legend-swatch { width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 3px; flex-shrink: 0; }
#action-mode-page /* 32-type x 8 quadra matrix */
.q8-matrix { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 12px; }
#action-mode-page .q8-matrix th, #action-mode-page .q8-matrix td { border: 1px solid var(--border); padding: 8px 6px; text-align: center; vertical-align: middle; }
#action-mode-page .q8-matrix th { background: var(--bg-soft); font-family: var(--serif); font-weight: 500; color: var(--heading); }
#action-mode-page .q8-matrix .col-c { background: var(--accent-conceptualist-soft); }
#action-mode-page .q8-matrix .col-m { background: var(--accent-methodologist-soft); }
#action-mode-page .q8-matrix .col-h { background: var(--accent-harmonizer-soft); }
#action-mode-page .q8-matrix .col-i { background: var(--accent-inspirer-soft); }
#action-mode-page .q8-matrix .type { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; display: inline-block; margin: 1px 2px; }
#action-mode-page .q8-matrix .empty { color: #c0c4ca; }
#action-mode-page .figure { margin: 32px 0; }
#action-mode-page .figure svg { width: 100%; height: auto; max-width: 760px; margin: 0 auto; display: block; }
#action-mode-page .figure-caption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 8px; font-style: italic; }
#action-mode-page .classical-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
#action-mode-page .classical-item { padding: 18px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
#action-mode-page .classical-item .cl-greek { font-family: var(--serif); font-size: 13px; color: var(--muted); margin-bottom: 4px; }
#action-mode-page .classical-item .cl-jp { font-family: var(--serif); font-size: 18px; color: var(--heading); margin-bottom: 8px; }
#action-mode-page .classical-item .cl-desc { font-size: 13px; line-height: 1.7; color: var(--text); }
#action-mode-page .classical-item.c-conceptualist { border-left: 4px solid var(--accent-conceptualist); }
#action-mode-page .classical-item.c-methodologist { border-left: 4px solid var(--accent-methodologist); }
#action-mode-page .classical-item.c-harmonizer { border-left: 4px solid var(--accent-harmonizer); }
#action-mode-page .classical-item.c-inspirer { border-left: 4px solid var(--accent-inspirer); }
#action-mode-page .type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
#action-mode-page .type-cell-card { padding: 16px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; text-align: center; transition: all 0.15s; }
#action-mode-page .type-cell-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
#action-mode-page .type-cell-card .tcode { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: var(--heading); margin-bottom: 4px; }
#action-mode-page .type-cell-card .tname { font-family: var(--serif); font-size: 13px; color: var(--text); margin-bottom: 4px; }
#action-mode-page .type-cell-card .tquad { font-size: 11px; color: var(--muted); }
#action-mode-page .type-cell-card a { color: inherit; display: block; }
#action-mode-page .type-cell-card a:hover .tcode { color: var(--link); }
#action-mode-page .references { background: var(--bg-soft); padding: 32px 0; margin-top: 64px; }
#action-mode-page .references h2 { font-family: var(--serif); font-size: 20px; color: var(--heading); margin-bottom: 16px; border-bottom: none; padding-bottom: 0; }
#action-mode-page .references ul { list-style: none; }
#action-mode-page .references li { padding: 8px 0; font-size: 13px; color: var(--muted); line-height: 1.7; border-bottom: 1px dotted var(--border); }
#action-mode-page .references li:last-child { border-bottom: none; }
#action-mode-page .references strong { color: var(--text); font-weight: 500; }
#action-mode-page ul.linklist { list-style: none; padding: 0; }
#action-mode-page ul.linklist li { padding: 8px 0; border-bottom: 1px dotted var(--border); }
#action-mode-page ul.linklist li:last-child { border-bottom: none; }
#action-mode-page ul.linklist a { color: var(--link); }
#action-mode-page ul.linklist a:hover { color: var(--link-hover); text-decoration: underline; }
#action-mode-page .hero.indv .hero-band { width: 60px; height: 4px; margin: 24px auto 24px; }
#action-mode-page .hero.indv.conceptualist .hero-band { background: var(--accent-conceptualist); }
#action-mode-page .hero.indv.methodologist .hero-band { background: var(--accent-methodologist); }
#action-mode-page .hero.indv.harmonizer    .hero-band { background: var(--accent-harmonizer); }
#action-mode-page .hero.indv.inspirer      .hero-band { background: var(--accent-inspirer); }
@media (max-width: 720px) {#action-mode-page .hero h1 { font-size: 32px; }
#action-mode-page section h2 { font-size: 22px; }
#action-mode-page .group-grid, #action-mode-page .classical-grid, #action-mode-page .rel-legend { grid-template-columns: 1fr; }
#action-mode-page .type-grid { grid-template-columns: repeat(2, 1fr); }
#action-mode-page .rel-matrix { font-size: 9px; }
#action-mode-page .rel-matrix th, #action-mode-page .rel-matrix td { padding: 3px 2px; height: 40px; }

}