/* Warm Ink and Amber: the visual direction selected by the site owner. */
:root {
    --ink: #102037;
    --muted: #53637a;
    --blue: #00778a;
    --blue-dark: #005c6c;
    --pale: #e7f5f5;
    --line: #d4dade;
    --canvas: #faf9f5;
    --green: #00778a;
    --amber: #d87900;
    --violet: #785b9c;
    --connection: #007083;
    --connection-money: #ac650e;
    --card-border: #c5cdd4;
    --head: 72px;
    --panel: 350px;
    --shadow: 0 3px 12px #28374709;
}

body { color: var(--ink); }
.app-header { background: #fff; border-color: var(--line); }
.header-title h1 { font-size: 22px; font-weight: 700; max-width: 350px; }
.header-title .icon { color: var(--blue); width: 22px; height: 22px; }
.global-search > input { height: 44px; font-size: 16px; color: var(--ink); background: #fbfcfd; border-color: var(--line); }
.global-search > input::placeholder { color: var(--muted); opacity: 1; }
.global-search > kbd { top: 13px; color: var(--muted); }
.btn { color: var(--ink); border-color: var(--line); font-weight: 650; }
.btn:hover { color: var(--blue-dark); background: #edf8f8; border-color: #7faeb5; }
.btn.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.btn.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.ghost, .help-btn { color: var(--muted); }
.help-btn { border-color: var(--line); }
.eyebrow { color: #485b72; font-weight: 700; }
#search-results { border-color: var(--card-border); box-shadow: 0 12px 32px #183c4620; }
#search-results button[aria-selected=true], #search-results button:hover { background: var(--pale); }
#search-results strong { color: var(--ink); }
#search-results small, .search-empty { color: var(--muted); }

.map-viewport { background-image: radial-gradient(#a8b1b326 .85px, transparent .85px); }
.map-area::before { opacity: .065; }
.zone { fill: #edf2ef; stroke: #cdd8d6; opacity: .6; }
.zone-title { fill: #506963; font-size: 14px; }
.phase-label, .map-annotation { fill: #536876; font-size: 13px; }
.edge, .edge.collect { stroke: var(--connection); stroke-width: 3; }
.edge.branch { stroke: var(--connection); stroke-width: 2.8; }
.edge.money { stroke: var(--connection-money); }
.edge.cost { stroke: var(--violet); }
.edge.blue, .edge.active, .edge.collect.active { stroke: var(--blue); stroke-width: 3.8; }
.edge.main, .edge.main.active { stroke: var(--amber); stroke-width: 4.5; filter: none; }
.edge.muted-edge { opacity: .4; }
.edge-label { fill: #405e6a; font-size: 14px; font-weight: 600; stroke: var(--canvas); }
.edge-label.active { fill: var(--blue-dark); }
.edges > path[stroke="white"] { stroke: var(--canvas); stroke-width: 8; }
.edges > circle { fill: var(--canvas); stroke: var(--connection); }
.edges > path[stroke="#9fb5d2"] { stroke: var(--connection); stroke-width: 2; }
.edges marker path { stroke-width: 2.2; }
.edges #arrow-normal path { stroke: var(--connection); }
.edges #arrow-blue path { stroke: var(--blue); }
.edges #arrow-report path { stroke: var(--amber); }
.edges #arrow-money path { stroke: var(--connection-money); }
.edges #arrow-cost path { stroke: var(--violet); }

.map-node { padding: 8px 12px; gap: 10px; color: var(--ink); background: #fff; border-color: var(--card-border); border-radius: 12px; box-shadow: 0 3px 9px #2937460b; }
.map-node:hover { border-color: var(--blue); box-shadow: 0 4px 14px #00778a1a; }
.map-node.active { border-color: var(--blue); box-shadow: 0 0 0 4px #00778a14, 0 4px 12px #00778a14; }
.map-node.connected { border-color: #5c9ba5; }
.map-node.dimmed { opacity: .65; }
.node-title, .map-node.document .node-title { color: var(--ink); font-size: 18px; font-weight: 650; line-height: 1.3; }
.node-meta, .map-node.state .node-meta { color: #526b78; font-size: 11px; letter-spacing: .65px; }
.node-icon, .map-node.document .node-icon, .map-node.portal .node-icon { color: var(--blue); background: #d9f4f5; border-radius: 9px; }
.node-external { color: var(--blue); }
.map-node.station { padding: 8px 12px; gap: 10px; }
.map-node.station .node-title { font-size: 20px; letter-spacing: -.35px; }
.map-node.station .node-icon { width: 36px; height: 36px; }
.map-node.station .node-icon .icon { width: 23px; height: 23px; }
.map-node.station.has-meta .node-title { font-size: 19px; line-height: 1.2; }
.station.has-meta .node-meta { font-size: 11px; line-height: 1.2; color: #526b78; }
.map-node.station.support-node { background: #fff; border-color: var(--card-border); border-radius: 9px; }
.map-node.station.support-node .node-title { color: var(--ink); font-size: 18px; font-weight: 650; }
.map-node.station.support-node .node-icon { color: var(--blue); background: transparent; }
.map-node[data-owner="cash"] .node-icon,
.map-node[data-owner="bank"] .node-icon,
.map-node[data-owner="tax"] .node-icon { color: var(--amber); background: #fff3d8; }
.map-node[data-owner="closing"] .node-icon { color: #176ae5; background: #e5edff; }
.map-node.finish { background: #fff8e8; border-color: #de890f; }
.map-node.finish .node-icon { color: var(--amber); background: #ffebc1; }
.map-node.finish .node-title { color: var(--ink); }
.map-node.portal { border-color: #80abb4; background: #f5faf9; }
.map-node.register { border-color: #cbbd9f; background: #fffdf7; }
.map-node.register .node-icon, .map-node.state .node-icon { color: #9c650f; background: #fff0d4; }
.map-node.view-link { border-color: #6ba4ae; background: #eaf6f6; }
.map-node.view-link .node-title { color: var(--blue-dark); }
.map-node.active .node-icon { color: var(--blue-dark); background: #ccebed; }

.crumbs, .fit-button, .map-legend, .zoom-controls { background: #fff; border-color: var(--line); }
.crumbs button, .crumb-current { color: #21495d; font-size: 14px; }
.crumbs button { font-weight: 600; }
.crumb-detail, .crumb-separator { color: var(--muted); }
.fit-button, .zoom-controls button, .zoom-value { color: #304d67; }
.zoom-controls button:hover { color: var(--blue); background: var(--pale); }
.map-legend { color: #425b73; font-size: 13px; }
.legend-dot { border-color: var(--blue); }
.legend-portal { border-color: var(--blue); }
.legend-line.gray { background: var(--connection); height: 3px; }
.legend-line { background: var(--amber); }
.map-hint { color: #586c7c; font-size: 12px; }
.zoom-value { font-size: 13px; }
.map-status { background: var(--blue-dark); color: #fff; }

.inspector { background: #fff; border-color: var(--line); padding: 30px 26px 24px; }
.destination-icon { color: var(--amber); background: #fff5dc; border-color: #ffe0a6; }
.destination-icon:after { background: #e3c99b; }
.intro-panel h2 { color: var(--blue); font-size: 37px; font-weight: 650; line-height: 1.23; }
.intro-panel p { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: none; }
.intro-panel > .btn { font-size: 16px; min-height: 48px; }
.mini-guide { border-color: var(--line); }
.guide-row { color: var(--muted); font-size: 14px; }
.guide-row .icon { color: #395670; }
.panel-foot { color: #596b7c; font-size: 11px; border-color: var(--line); }
.inspector-back, .panel-close, .mobile-sheet-toggle { color: #45677d; }
.selected-symbol { color: var(--blue); background: var(--pale); border-color: #c4dedf; }
.selected-header h2 { color: var(--ink); font-weight: 650; }
.selected-header .eyebrow { color: #4c6475; }
.panel-subtitle { color: var(--muted); font-size: 15px; }
.context-hint { color: #365f69; background: #eff7f5; border-color: #d1e3df; }
.task-steps li { color: #3c5368; font-size: 15px; }
.step-dot { background: #edf8f7; border-color: #89b6ba; }
.result-note { color: #295f53; background: #eef7f1; font-size: 14px; }
.connection-box { color: #24566a; background: #f2f9f8; border-color: #bbd7d8; }
.connection-path .icon, .edge-relation, .inspector .small-link { color: #286a7d; }
.context-views button { color: #3d596e; background: #fcfdfc; border-color: #cbd6dc; font-size: 14px; }
.context-views button[aria-pressed="true"] { color: var(--blue-dark); background: #e7f5f5; border-color: #73a9b0; }
.context-views button:hover { border-color: var(--blue); }
.context-modules { border-color: var(--line); }
.context-modules button { color: #37687c; background: #f6faf9; border-color: #cbdcdf; font-size: 13px; }
.context-modules button:hover { background: #e2f2f2; }
.period-tabs button { color: #405c70; border-color: #cad7dd; font-size: 13px; }
.period-tabs button[aria-pressed="true"] { color: var(--blue-dark); background: var(--pale); border-color: #76a9b2; }
.period-search { color: var(--ink); background: #fcfdfc; border-color: #cad7dd; font-size: 14px; }
.period-item { color: #34536b; font-size: 15px; }
.period-item .icon, .period-note, .empty { color: var(--muted); }
.help-dialog { color: var(--ink); border-color: var(--line); }
.help-dialog .guide-row, .help-dialog p, .source-note { color: var(--muted); }

#edit-toolbar { background: #f2f8f6; border-color: var(--line); }
.edit-badge { color: var(--blue-dark); }
#save-state, .muted, .audience, .shortcut-row small { color: var(--muted); }
.editor-dialog, .field input, .field textarea, .field select { color: var(--ink); border-color: var(--card-border); }
.structure-row { background: #f2f8f6; }
.structure-item, .rule-module, .rule-tree { border-color: var(--line); }
.rule-module summary::marker, .drag-handle { color: #497c88; }
.rule-item input { accent-color: var(--blue); }
.rules-summary { color: #25614f; background: #eaf5ee; }

@media(max-width:1400px) {
    .map-hint { display: none; }
}
@media(max-width:1250px) and (min-width:901px) {
    :root { --panel: 300px; }
    .header-title h1 { font-size: 17px; max-width: 220px; }
    .inspector { padding: 25px 22px; }
    .intro-panel h2 { font-size: 31px; }
    .intro-panel p { font-size: 15px; }
}
@media(max-width:900px) {
    :root { --head: 104px; }
    .acflow-has-controls { --head: 148px; }
    .header-title h1 { font-size: 15px; max-width: none; }
    .global-search > input { height: 40px; font-size: 16px; }
    .global-search > kbd { top: 11px; }
    .inspector { padding: 13px 18px 18px; }
    .inspector.overview-panel { padding: 14px 18px; }
    .intro-panel h2 { font-size: 19px; line-height: 1.4; }
    .intro-panel > .btn { font-size: 12px; min-height: 35px; }
    .guide-row { font-size: 13px; }
    .panel-foot { font-size: 10px; }
    .panel-subtitle, .task-steps li { font-size: 14px; }
    .map-legend { font-size: 10px; }
    .crumbs button, .crumb-current { font-size: 12px; }
    .zoom-value { font-size: 11px; }
    .map-node.station.support-node .node-title { font-size: 15px; }
    .map-node.station.support-node .node-icon { width: 22px; height: 26px; }
    .context-views button, .context-modules button { font-size: 12px; }
}