/* Article-specific, text-first diagrams. Shared guide styles remain unchanged. */
.tools-guide { font-size:1rem; }
.tools-guide main { max-width:1100px; }
.tools-guide p,.tools-guide li { line-height:1.95; }
.tools-guide header { height:auto; min-height:64px; gap:14px; flex-wrap:wrap; padding-block:10px; }
.tools-guide header nav { flex-wrap:wrap; }
.tools-guide nav a,.tools-guide .ad,.tools-guide .crumb,.tools-guide .small,.tools-guide .caption,.tools-guide .sources,.tools-guide footer { font-size:.875rem; }
.tools-guide .lead { max-width:900px; font-size:1.0625rem; }
.tools-guide .toc { display:block; }
.tools-guide .toc a { font-size:1rem; border:0; padding:0; color:#d0dcec; }
.tools-guide .toc li { padding:4px 0; break-inside:avoid; }
.tools-guide .visual { margin:30px 0; }
.tools-guide .visual-title { font:700 1rem/1.65 "Noto Sans JP",sans-serif; letter-spacing:0; }
.tools-guide .caption { margin:16px 0 0; color:#b9c9dc; }
.tools-guide .links span { font-size:.875rem; color:#b9c9dc; }
.tools-guide .links a { min-width:0; }
.tools-guide .update { color:#b9c9dc; font-size:.875rem; }
.skip-link { position:absolute; left:16px; top:-90px; padding:10px 18px; background:#fff; color:#081321; z-index:30; }
.skip-link:focus { top:8px; }
.tools-guide :focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.role-flow,.gate-flow,.trial-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; list-style:none; padding:0; margin:0; }
.role-flow li,.gate-flow li,.trial-flow li { position:relative; padding:18px; border:1px solid #36506f; background:#081321; border-radius:12px; }
.role-flow li:not(:last-child)::after,.gate-flow li:not(:last-child)::after,.trial-flow li:not(:last-child)::after { content:"→"; position:absolute; top:34px; right:-14px; z-index:1; color:var(--cyan); background:#0b1422; }
.diagram-num { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; background:var(--cyan); color:#07101c; border-radius:50%; font-weight:900; margin-bottom:9px; }
.role-flow b,.gate-flow b,.trial-flow b { display:block; color:#fff; }
.role-flow p,.gate-flow p,.trial-flow p { margin:7px 0 0; font-size:.9375rem; color:#c0cedf; }
.role-flow .order-step { border-color:var(--yellow); }
.order-step .diagram-num { background:var(--yellow); }
.split-screens { display:grid; grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr); align-items:stretch; }
.screen-panel { border:1px solid #36506f; border-radius:12px; padding:20px; background:#071321; min-width:0; }
.screen-panel h3 { margin:0 0 10px; }
.screen-panel li { margin-bottom:6px; }
.screen-panel ul { padding-left:20px; }
.screen-panel.execute { border-color:var(--yellow); }
.screen-bridge { display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--yellow); font-weight:700; font-size:.875rem; text-align:center; }
.screen-status { padding:9px 12px; border-radius:8px; background:#173048; color:#e8f0fa; }
.screen-status.caution { border:1px dashed var(--yellow); color:var(--yellow); background:#242011; }
.route-stack { display:grid; gap:14px; }
.route-row { display:grid; grid-template-columns:minmax(125px,.6fr) minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:15px; padding:18px; border:1px solid #36506f; border-radius:12px; background:#081321; }
.route-row b { color:var(--cyan); }
.route-row p { margin:0; font-size:.9375rem; }
.route-row em { color:var(--yellow); font-style:normal; }
.route-row .route-arrow { color:var(--cyan); font-size:1.5rem; }
.tools-controls { background:var(--panel); border:1px solid #3b5678; border-radius:14px; padding:20px; }
.tools-controls label { font-weight:700; }
.tools-controls select { max-width:620px; display:block; margin:10px 0; min-height:48px; }
.filter-count { margin:9px 0 0; color:var(--cyan); font-weight:700; }
.tools-guide [hidden] { display:none !important; }
.tools-table { min-width:850px; font-size:.9375rem; }
.tools-table caption { text-align:left; padding:16px; background:#121c2e; color:#d0dcec; font-size:.9375rem; }
.tools-table th { font-size:.9375rem; }
.tools-table th[scope="row"] { min-width:160px; width:18%; background:#0c1829; }
.tools-table td { min-width:210px; }
.tools-table td p { margin:0 0 8px; }
.tools-table small { display:block; font-size:.875rem; color:#b9c9dc; }
.tools-table .source-link { display:inline-block; font-size:.875rem; margin-top:8px; }
.badge { display:inline-block; padding:2px 8px; margin:0 4px 8px 0; background:#123642; border:1px solid #377287; border-radius:6px; color:#8cf0ff; font-size:.875rem; }
.badge.warn-badge { background:#33291a; color:#ffdf80; border-color:#8c7444; }
.empty-state { border:1px solid var(--yellow); border-radius:12px; padding:20px; background:#242011; }
.empty-state p { margin:4px 0; }
.timeline { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.timeline li { border-top:3px solid var(--cyan); background:#081321; border-radius:0 0 12px 12px; padding:18px; }
.timeline li:first-child { border-color:#94a5bb; }
.timeline time,.timeline strong { display:block; font-weight:700; }
.timeline time { color:var(--cyan); font-size:.9375rem; }
.timeline p { font-size:.9375rem; margin-bottom:0; }
.cost-map { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cost-side { border:1px solid #36506f; border-radius:12px; padding:20px; background:#081321; }
.cost-side h3 { color:var(--cyan); margin-top:0; }
.cost-side ul { padding-left:20px; }
.cost-side p { margin-bottom:0; font-size:.9375rem; }
.check-table { font-size:1rem; }
.check-table td:first-child { width:32%; }
.tools-guide details { border:1px solid var(--line); border-radius:12px; padding:17px 20px; margin:12px 0; }
.tools-guide summary { cursor:pointer; font-weight:700; }
.tools-guide details p { margin-bottom:0; }
.source-list { padding-left:24px; }
.source-list li { margin:13px 0; }
.source-list span { display:block; color:#b9c9dc; font-size:.875rem; }
.related-cta { padding:24px; margin:35px 0; border:1px solid #2e6e86; border-radius:16px; background:#102639; }
.related-cta h3 { margin-top:0; }
.legacy-anchor { scroll-margin-top:95px; }
@media (max-width:800px) {
 .role-flow,.gate-flow,.trial-flow { grid-template-columns:1fr 1fr; }
 .role-flow li::after,.gate-flow li::after,.trial-flow li::after { display:none; }
 .timeline { grid-template-columns:1fr; }
 .tools-guide header nav { display:flex; }
 .tools-guide .table-wrap { border-radius:9px; }
}
@media (max-width:560px) {
 .role-flow,.gate-flow,.trial-flow,.cost-map,.tools-guide .links { grid-template-columns:1fr; }
 .split-screens { grid-template-columns:1fr; }
 .screen-bridge { min-height:65px; flex-direction:row; gap:10px; }
 .screen-bridge .bridge-arrow { transform:rotate(90deg); }
 .route-row { grid-template-columns:1fr; gap:10px; }
 .route-row .route-arrow { transform:rotate(90deg); justify-self:start; }
 .tools-guide main { padding:25px 16px 65px; }
 .tools-guide h1 { font-size:2rem; line-height:1.4; }
 .tools-guide header { position:static; }
 .tools-guide header nav a { padding:6px 9px; }
 .tools-guide .ad { display:inline; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print {
 .tools-guide { background:#fff; color:#111; }
 .tools-guide header,.tools-guide .tools-controls { display:none; }
 .tools-guide [data-tool-row][hidden] { display:table-row !important; }
 .tools-guide .table-wrap { overflow:visible; }
 .tools-guide table { min-width:0; }
 .tools-guide h1,.tools-guide h2,.tools-guide h3,.tools-guide strong,.tools-guide b,.tools-guide p,.tools-guide a,.tools-guide td,.tools-guide th { color:#111; }
 .tools-guide main { max-width:none; padding:0; }
}