/*
   SHINKAN / Research Ecology — visual refinement
   2026-11-01
   DESIGN ONLY. The original SHINKAN board's interactions, network topology,
   note positions, drawers, media and pathways have not been changed.

   Colours and type take their cues from ../visual-system.css.
   The five node families have muted category tints for orientation;
   they are not separate visual identities.
*/
:root{
  color-scheme:light;
  --ground:#F3F1EC;
  --ground-soft:#EAE8E2;
  --ground-card:#FAF9F5;
  --ink:#303431;
  --ink-soft:#616965;
  --ink-faint:#727A75;
  --stroke:#D1CEC6;
  --accent:#887B6E;
  --accent-soft:#E2DCD4;
  --accent-interactive:#675C51;
  --night:#2C312F;
  --font-literary:Georgia,'Times New Roman',serif;
  --font-reading:'Helvetica Neue',Arial,sans-serif;
  --font-annotation:'Courier New',monospace;
  /* override existing SHINKAN local tokens without changing the markup */
  --bg:var(--ground);
  --paper:var(--ground-card);
  --ink: #303431;
  --faint:var(--ink-faint);
  --line:var(--stroke);
  --olive:#887B6E;
  --olive-light:#ECE7DF;
  --clay:#AE8177;
  --ochre:#AB9174;
  --lilac:#938A9C;
  --steel:#8A9498;
  --shadow:0 13px 30px #302B2414,0 2px 5px #302B240A;
}
body{font-family:var(--font-reading);background:var(--ground);color:var(--ink)}
::selection{background:#DFD7CA;color:var(--ink)}
:where(button,a):focus-visible{outline:2px solid var(--accent-interactive);outline-offset:4px}
.serif{font-family:var(--font-literary)}
.mono,.eyebrow,.caption,.note-id,.kicker,.node-state,.graph-stat,.relation-tag,.mobile-step,.mobile-nav{font-family:var(--font-annotation)}
/* Editorial opening — maintain the same SHINKAN composition and scale */
.header{border-color:var(--stroke)}
.logo{font-family:var(--font-reading);color:var(--ink)}
.logo span{color:var(--accent)!important}
.header-right a{color:var(--ink-soft)}
.header-right a:hover{color:var(--accent-interactive)}
.pulse{color:var(--ink-soft)}
.pulse::before{background:var(--accent);box-shadow:0 0 0 4px #887B6E22}
.hero h1{font-family:var(--font-literary);color:var(--ink)}
.hero h1 em,.below h2 em{color:var(--accent)}
.hero-copy .diary,.hero-copy .diary b{color:var(--accent-interactive)}
.hero-copy p{color:var(--ink)}
.hero-copy .sub{color:var(--ink-soft)}
.hero .eyebrow,.below .eyebrow{color:var(--ink-faint)!important}
/* Modes, navigation controls, and pathway guide */
.eco-toolbar{border-color:var(--stroke)}
.modes{background:#EAE7E0;border-color:#D1CEC6}
.modes button{color:var(--ink-soft);font-family:var(--font-annotation)}
.modes button[aria-pressed=true]{background:var(--ink);color:var(--ground-card)}
.modes button:hover:not([aria-pressed=true]){background:#DCD5CB}
.small-btn{border-color:var(--stroke);color:var(--accent-interactive)}
.small-btn:hover{border-color:#B3A99A;background:#EEEAE3}
.path-picker{border-color:#C3BDB4;background:var(--ground-card);color:var(--ink)}
.guide-bar{background:var(--night);color:var(--ground-card)}
.guide-heading strong{color:#D5C5B4}
.guide-counter{color:#C8C2B8}
.guide-buttons button{border-color:#77776E;color:#F5F2ED}
.guide-buttons button:hover{background:#474C47}
/* Spatial network: make the canvas feel like a research paper surface */
.field{background:#EAE8E2;border-color:#D1CEC6}
.field:before{
  opacity:.90;
  background:radial-gradient(#92867820 .8px,transparent 1px) 0 0/11px 11px,
             radial-gradient(ellipse at 17% 10%,#FFFFFFCA,transparent 60%),
             linear-gradient(115deg,#EEECE6,#E6E2DA);
}
.field:after{color:#7D7971;background:#EAE8E2D9}
.field-stamp,.field-count{color:#817D75}
.field-watermark{color:#887B6E17}
.wires path{stroke:#948A7D;opacity:.38}
.wires path.related{stroke:#79695B;opacity:.95}
.wires path.nonrelated{opacity:.10}
.wires text{fill:#6D6256;stroke:#EAE8E2}
.zooms button{background:#FAF9F5EA;border-color:#C4BDB3;color:#4B453E}
.zooms button:hover{background:#FFFDF9}
/* Physical notes: quiet off-white paper, less saturated category marks */
.node{background:var(--ground-card);border-color:#D1CEC6;box-shadow:var(--shadow);color:var(--ink)}
.node:hover{box-shadow:0 24px 35px #302B2422}
.node.active{border-color:var(--accent-interactive);outline:2px solid #A79988}
.node.pending{background:#F5F3EE;box-shadow:0 3px 12px #302B240B}
.node:before{background:#D7D0C5A9;border-left-color:#B3A89852;border-right-color:#B3A89852}
.node[data-kind='observation']{--tone:#8C9487}
.node[data-kind='sensation']{--tone:#AB9174}
.node[data-kind='study']{--tone:#8A9498}
.node[data-kind='question']{--tone:#AE8177}
.node[data-kind='design']{--tone:#938A9C}
.node .note-id,.node .node-state{color:#817D77}
.node h3{color:var(--ink);font-family:var(--font-literary)}
.node .node-desc{color:var(--ink-soft)}
.node .node-foot{border-color:#E0DDD6;color:#76766E}
.node .node-foot strong{color:var(--accent-interactive)}
.node .hand{color:#786B60}
.node .scribble{color:#A09387}
.node pre{background:#ECE9E3;color:#554F48;border-color:#AD9F8D}
.node .diagram{color:#6D665F;border-color:#D3CDC3}
.node .diagram i{color:#897D70}
.node .pendingtext{color:#827C72}
/* Key, field notes and footer */
.reading-key{border-color:var(--stroke)}
.key-side span{color:var(--ink-soft)}
.key-side span:nth-child(1) .swatch{background:#8C9487!important}
.key-side span:nth-child(2) .swatch{background:#AB9174!important}
.key-side span:nth-child(3) .swatch{background:#8A9498!important}
.key-side span:nth-child(4) .swatch{background:#AE8177!important}
.key-side span:nth-child(5) .swatch{background:#938A9C!important}
.key-side span:nth-child(6) .swatch{border-color:#958B7D!important}
.reading-key p{color:var(--ink-faint)}
.below h2{color:var(--ink)}
.below-intro{color:var(--ink-soft)}
.journal,.journal-row,.footer{border-color:var(--stroke)}
.journal-row .no,.journal-desc,.footer{color:var(--ink-faint)}
.journal-title{color:var(--ink)}
.journal-row .arrow{color:var(--accent)}
.journal-row.dim .journal-title{color:#857D72}
/* Drawer: same neutral editorial character as the work pages */
.drawer-scrim{background:#242620A8}
.drawer{background:var(--ground-card);box-shadow:-20px 0 60px #201D1761}
.drawer-top{background:#FAF9F5F0;border-color:var(--stroke)}
.drawer-top .eyebrow,.drawer-links h3{color:var(--ink-faint)}
.drawer-close{border-color:#C3BCB1;color:var(--ink)}
.drawer-close:hover{background:#EEEAE4}
.drawer-body h2{color:var(--ink)}
.drawer-body .lede{color:var(--accent-interactive)}
.drawer-body p{color:#4E514C}
.drawer-figure img,.drawer-figure video{background:#EAE7E0}
.drawer-figure figcaption{color:var(--ink-faint)}
.drawer-links,.relation-row{border-color:var(--stroke)}
.relation-row:hover{color:var(--accent-interactive)}
.relation-row .relation-type{color:#867D71}
.drawer-linkout{border-color:#A49684;color:var(--accent-interactive)}
.drawer-linkout:hover{background:#EAE5DD}
.drawer-note{background:#EDE9E2;color:#665C50;border-color:#A59580}
/* Mobile is a reading trail, not a miniaturised graph. Keep structure intact. */
.mobile-intro .caption{color:var(--ink-faint)}
.mobile-intro .pathname{color:var(--accent)}
.mnode{color:var(--ink);border-color:#CDC8BE}
.mnode:before{border-color:#B3A99B}
.mnode:after{background:#9E9080;border-color:var(--ground)}
.mnode .note-id{color:var(--ink-faint)}
.mnode strong{color:var(--ink)}
.mnode p{color:var(--ink-soft)}
.mnode .arrow{color:var(--accent)}
.mnode[data-selected=true]{background:#EAE4DC;border-color:#9B8B79}
.mnode[data-selected=true] .arrow{color:var(--accent-interactive)}
.mobile-connector{color:var(--accent)}
@media(max-width:780px){
 .hero h1{color:var(--ink)}
 .drawer-body .lede{color:var(--accent-interactive)}
}