/* Essay-specific illustration and interactive directory board.
   Shared site styles live in journal.css. */

/* July directory-name mechanism: persistent shared state, independently listed.
   No direct A-to-B route, push notifications, file bodies, or simulated deletions. */
.files-figure.mb-figure{display:block;min-height:0;background:var(--ink-panel);background-image:linear-gradient(color-mix(in srgb, var(--panel-text) 2.0%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--panel-text) 2.0%, transparent) 1px,transparent 1px);background-size:30px 30px;color:var(--panel-text);--mb-a:var(--panel-accent);--mb-b:var(--clay-light);--mb-c:var(--denim-light);--mb-muted:var(--panel-muted);padding:25px 27px 23px}
.mb-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.mb-kicker{font:9px/1.6 var(--mono);letter-spacing:.1em;color:var(--panel-muted)}
.mb-control{display:none;align-items:center;justify-content:center;gap:7px;padding:9px 11px;border:1px solid var(--panel-line);background:transparent;border-radius:0;color:var(--panel-text);font:10px/1 var(--mono);cursor:pointer;min-width:80px;min-height:34px;white-space:nowrap}
.js .mb-control{display:inline-flex}
.mb-control:hover{background:var(--panel-raised);border-color:var(--panel-muted)}
.mb-control:disabled{opacity:.55;cursor:default}
.mb-control:focus-visible,.mb-step:focus-visible,.mb-sources summary:focus-visible,.mb-sources a:focus-visible{outline:2px solid var(--panel-text);outline-offset:4px}
.mb-figure h3.mb-heading{margin:0 0 7px;color:var(--panel-text);font:400 30px/1.2 var(--serif);letter-spacing:-.035em}
.essay .mb-subtitle{font:13px/1.6 var(--sans);color:var(--panel-muted);margin:0 0 23px;letter-spacing:0}
.mb-board{position:relative;background:var(--panel-deep);border:1px solid var(--panel-line);box-shadow:0 7px 22px color-mix(in srgb, var(--panel-deep) 13.3%, transparent);isolation:isolate}
.mb-board-header{padding:15px 17px 13px;border-bottom:1px solid var(--panel-line)}
.mb-board-eyebrow{display:flex;justify-content:space-between;gap:12px;color:var(--panel-muted);font:9px/1.5 var(--mono);letter-spacing:.08em;margin-bottom:8px}
.mb-board-path{display:flex;align-items:center;gap:10px;color:var(--panel-text);min-width:0}
.mb-board-path code{font:13px/1.5 var(--mono);overflow-wrap:anywhere}
.mb-folder{width:17px;height:15px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
.mb-directory-list{padding:7px 12px 9px;min-height:114px}
.mb-existing,.mb-entry{display:flex;align-items:center;gap:10px;min-height:33px;padding:7px 5px;color:var(--panel-muted)}
.mb-existing{font:11px/1.5 var(--mono)}
.mb-existing .mb-folder{opacity:.65}
.mb-entry{color:var(--mb-a);border:1px solid transparent;min-height:37px}
.mb-entry[data-entry="b"]{color:var(--mb-b)}
.mb-entry code{font:12px/1.65 var(--mono);overflow-wrap:anywhere;min-width:0}
.mb-dir-type{margin-left:auto;font:8px/1.4 var(--mono);letter-spacing:.07em;color:var(--panel-muted)}
.mb-figure[data-ready] .mb-entry:not(.mb-present){visibility:hidden}
.mb-entry.mb-new{background:color-mix(in srgb, var(--panel-text) 5.1%, transparent);border-color:color-mix(in srgb, var(--panel-text) 22.0%, transparent)}
.mb-entry[data-entry="b"].mb-new{background:color-mix(in srgb, var(--clay-light) 5.1%, transparent);border-color:color-mix(in srgb, var(--clay-light) 26.7%, transparent)}
.mb-board.mb-being-read .mb-directory-list{background:color-mix(in srgb, var(--panel-text) 2.0%, transparent)}
.mb-board.mb-being-read .mb-entry{border-color:color-mix(in srgb, var(--panel-muted) 25.1%, transparent)}
.mb-board-footer{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--panel-line);padding:9px 16px;font:9px/1.5 var(--mono);color:var(--panel-muted)}
.mb-board-footer span:last-child{color:var(--panel-muted)}
.mb-wires{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:73px;margin:0 5px;gap:10px}
.mb-wire{position:relative;color:var(--mb-a)}
.mb-wire[data-agent="b"]{color:var(--mb-b)}
.mb-wire[data-agent="c"]{color:var(--mb-c)}
.mb-wire::before{content:'';position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed color-mix(in srgb, var(--panel-line) 33.3%, transparent)}
.mb-wire.mb-active::before{border-left-color:currentColor;opacity:.55}
.mb-wire-op{position:absolute;top:27px;left:50%;transform:translateX(-50%);font:9px/1.2 var(--mono);letter-spacing:.06em;background:var(--ink-panel);padding:4px 7px;white-space:nowrap;opacity:0}
.mb-wire.mb-active .mb-wire-op{opacity:1}
.mb-marker{position:absolute;left:50%;top:100%;margin:-4px 0 0 -4px;width:8px;height:8px;border:1px solid currentColor;background:var(--ink-panel);opacity:0}
.mb-marker.mb-response{height:8px;width:12px;margin-left:-6px;background:currentColor;clip-path:polygon(0 0,100% 0,100% 20%,0 20%,0 40%,100% 40%,100% 60%,0 60%,0 80%,100% 80%,100% 100%,0 100%);border:0}
.mb-agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mb-agent{min-width:0;position:relative;border:1px solid var(--panel-line);padding:13px 13px 12px;background:var(--panel-raised);color:var(--mb-a)}
.mb-agent[data-agent="b"]{color:var(--mb-b)}
.mb-agent[data-agent="c"]{color:var(--mb-c)}
.mb-agent.mb-active{border-color:currentColor;background:var(--panel-raised)}
.mb-agent-header{display:flex;align-items:center;gap:8px;min-width:0}
.mb-agent-letter{font:24px/1 var(--serif)}
.mb-agent-label{font:9px/1.4 var(--mono);letter-spacing:.08em}
.mb-agent-label small{display:block;font-size:8px;letter-spacing:0;color:var(--panel-muted);margin-top:2px}
.mb-agent-status{display:block;font:11px/1.5 var(--sans);color:var(--panel-text);margin:13px 0 8px;min-height:17px}
.mb-agent-seen{padding-top:8px;border-top:1px solid color-mix(in srgb, var(--panel-line) 50.2%, transparent);font:9px/1.5 var(--mono);color:var(--panel-muted)}
.mb-agent-seen strong{display:block;font-weight:400;color:currentColor;min-height:15px;margin-top:3px}
.mb-no-direct{font:9px/1.55 var(--mono);color:var(--panel-muted);text-align:center;letter-spacing:.015em;margin:11px 0 24px}
.mb-current{display:flex;gap:12px;min-height:91px;padding-top:17px;border-top:1px solid var(--panel-line)}
.mb-current-number{white-space:nowrap;font:10px/1.6 var(--mono);color:var(--panel-muted);padding-top:5px;min-width:30px}
.mb-current-copy{min-width:0}
.essay .mb-caption{font:400 19px/1.35 var(--serif);letter-spacing:-.015em;color:var(--panel-text);margin:0 0 7px}
.essay .mb-detail{font:12px/1.65 var(--sans);letter-spacing:0;color:var(--panel-muted);margin:0 0 17px}
.mb-stepper{display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:3px 0 17px}
.js .mb-stepper{display:grid}
.mb-step{position:relative;display:flex;align-items:flex-start;flex-direction:column;gap:6px;min-width:0;padding:10px 2px 0;text-align:left;font:10px/1.35 var(--mono);letter-spacing:0;color:var(--panel-muted);background:transparent;border:0;border-top:2px solid var(--panel-line);cursor:pointer;min-height:50px}
.mb-step-number{font-size:8px;opacity:.6}
.mb-step:hover{color:var(--panel-text)}
.mb-step[aria-pressed="true"]{color:var(--mb-a);border-color:var(--mb-a)}
.mb-step[data-step="1"][aria-pressed="true"],.mb-step[data-step="2"][aria-pressed="true"]{color:var(--mb-b);border-color:var(--mb-b)}
.mb-step[data-step="4"][aria-pressed="true"]{color:var(--mb-c);border-color:var(--mb-c)}
.mb-footnote{font:9px/1.6 var(--mono);color:var(--panel-muted);margin-top:8px}
.mb-sources{margin-top:13px;border-top:1px solid var(--panel-line);padding-top:12px}
.mb-sources summary{cursor:pointer;font:11px/1.6 var(--sans);color:var(--panel-text);list-style-position:outside;margin-left:13px}
.mb-sources[open] summary{margin-bottom:13px}
.essay .mb-sources p{font:11px/1.75 var(--sans);color:var(--panel-muted);margin:0 0 10px;letter-spacing:0}
.mb-sources code{font-size:10px;overflow-wrap:anywhere}
.mb-sources a{color:var(--panel-text);border-bottom:1px solid var(--panel-line);text-decoration:none}
.mb-sources a:hover{color:var(--panel-text)}
@media(max-width:700px){
 .files-figure.mb-figure{padding:21px 20px 20px}
 .mb-figure h3.mb-heading{font-size:27px}
 .mb-board-path code{font-size:12px}
 .mb-board-header{padding:13px 13px 12px}
 .mb-directory-list{padding:6px 9px 8px}
 .mb-entry code{font-size:11px}
 .mb-entry,.mb-existing{gap:8px;padding-left:3px;padding-right:3px}
 .mb-agent{padding:11px 10px 10px}
 .mb-agent-letter{font-size:22px}
 .mb-agent-header{gap:7px}
 .mb-agent-status{font-size:10px}
 .mb-agent-seen{font-size:8px}
 .mb-no-direct{font-size:8px}
 .mb-current{min-height:103px;gap:10px}
 .essay .mb-caption{font-size:18px}
}
@media(max-width:440px){
 .files-figure.mb-figure{padding:20px 17px}
 .mb-kicker{font-size:8px;max-width:190px;letter-spacing:.06em}
 .mb-control{min-width:70px;padding:9px;font-size:9px}
 .mb-figure h3.mb-heading{font-size:26px}
 .essay .mb-subtitle{font-size:12px;margin-bottom:18px}
 .mb-board-eyebrow{font-size:8px;gap:7px;letter-spacing:.04em}
 .mb-dir-type{display:none}
 .mb-entry code{font-size:10px}
 .mb-existing{font-size:10px}
 .mb-board-footer{padding:8px 11px;font-size:8px;gap:8px;flex-wrap:wrap}
 .mb-agent{padding:11px 7px 9px}
 .mb-agents,.mb-wires{gap:7px}
 .mb-agent-letter{font-size:21px}
 .mb-agent-label{font-size:8px;letter-spacing:0}
 .mb-agent-label small{font-size:7px}
 .mb-agent-status{font-size:10px;min-height:30px;margin:11px 0 5px}
 .mb-no-direct{font-size:8px;margin-bottom:21px}
 .mb-wire-op{font-size:8px;padding:4px}
 .mb-current{min-height:125px;gap:9px}
 .mb-current-number{font-size:9px;min-width:26px}
 .mb-stepper{gap:7px}
 .mb-step{font-size:9px;min-height:50px}
 .mb-footnote{font-size:8px}
}
@media print{
 .files-figure.mb-figure{break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
 .mb-control,.mb-stepper,.mb-sources{display:none!important}
 .mb-entry{visibility:visible!important}
 .mb-marker{display:none!important}
}

/* Keep source links legible inside the dark technical plate. */
.essay .mb-sources a { color: var(--panel-accent); text-decoration: underline; }
.mb-control { min-height: 38px; }
.mb-current-number { flex: 0 0 auto; }

/* Original illustration geometry and labels are unchanged. */
.colony [fill="#314328"], .lattice-illustration [fill="#314328"], .margin-art [fill="#314328"] { fill: var(--accent-dark); }
.colony [fill="#546f39"], .lattice-illustration [fill="#546f39"], .margin-art [fill="#546f39"] { fill: var(--accent); }
.colony [fill="#576c38"], .lattice-illustration [fill="#576c38"], .margin-art [fill="#576c38"] { fill: var(--accent); }
.colony [fill="#647153"], .lattice-illustration [fill="#647153"], .margin-art [fill="#647153"] { fill: var(--accent); }
.colony [fill="#657b43"], .lattice-illustration [fill="#657b43"], .margin-art [fill="#657b43"] { fill: var(--accent); }
.colony [fill="#6d7959"], .lattice-illustration [fill="#6d7959"], .margin-art [fill="#6d7959"] { fill: var(--denim); }
.colony [fill="#9cae6b"], .lattice-illustration [fill="#9cae6b"], .margin-art [fill="#9cae6b"] { fill: var(--ochre); }
.colony [fill="#a2a78e"], .lattice-illustration [fill="#a2a78e"], .margin-art [fill="#a2a78e"] { fill: var(--ochre); }
.colony [stop-color="#c0ce84"], .lattice-illustration [stop-color="#c0ce84"], .margin-art [stop-color="#c0ce84"] { stop-color: var(--ochre); }
.colony [stop-color="#ccd799"], .lattice-illustration [stop-color="#ccd799"], .margin-art [stop-color="#ccd799"] { stop-color: var(--highlight); }
.colony [stop-color="#e3e7c1"], .lattice-illustration [stop-color="#e3e7c1"], .margin-art [stop-color="#e3e7c1"] { stop-color: var(--highlight); }
.colony [stroke="#405330"], .lattice-illustration [stroke="#405330"], .margin-art [stroke="#405330"] { stroke: var(--accent-dark); }
.colony [stroke="#68765b"], .lattice-illustration [stroke="#68765b"], .margin-art [stroke="#68765b"] { stroke: var(--denim); }
.colony [stroke="#6e8650"], .lattice-illustration [stroke="#6e8650"], .margin-art [stroke="#6e8650"] { stroke: var(--accent); }
.colony [stroke="#778465"], .lattice-illustration [stroke="#778465"], .margin-art [stroke="#778465"] { stroke: var(--denim); }
.colony [stroke="#82916b"], .lattice-illustration [stroke="#82916b"], .margin-art [stroke="#82916b"] { stroke: var(--muted); }

.spore { animation: spore-breathe var(--duration,7s) ease-in-out infinite; animation-delay: var(--delay,0s); transform-box: fill-box; transform-origin: center; }
@keyframes spore-breathe { 0%,100% { opacity: .45; transform: scale(.87); } 50% { opacity: 1; transform: scale(1.16); } }
.signal { stroke-dasharray: 4 25; animation: signal-move 7s linear infinite; }
@keyframes signal-move { to { stroke-dashoffset: -145; } }
.file-growth { animation: growth-breathe 9s ease-in-out infinite; animation-delay: var(--delay,0s); }
@keyframes growth-breathe { 0%,100% { opacity: .42; } 55% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spore, .signal, .file-growth { animation: none !important; } }
@media print { .spore, .signal, .file-growth { animation: none; } }