/* nixivt.com/mind/: her mind as a graph (assets/js/graph.js, Obsidian's graph view) and the same notes as text: her tick,
   her situations, missions, route and skills (tools/mind.py). The site's colours throughout, so light and dark follow;
   where she is right now is marked by assets/js/mind.js. */

.mind .mind__head { padding: clamp(22px, 4vw, 40px); }
/* Room between the panels for her: she stands on each panel's top, and her height goes into the gap above it. */
.mind .mind__sec { padding: clamp(20px, 3.5vw, 36px); margin-top: 92px; }
@media (max-width: 600px) { .mind .mind__sec { margin-top: 66px; } }
.mind .mind__sec h2 { font-family: var(--font-display); color: var(--heading); font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 8px; }
.mind .mind__lead { color: var(--text-soft); max-width: 68ch; margin: 0 0 18px; }
.mind .mind__lead kbd { font: 600 .82em/1 var(--font-body); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--heading); }
.mind .mind__fine { color: var(--text-soft); font-size: .9rem; margin: 18px 0 0; }
.mind .mind__now { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 14px; border-radius: 999px;
  background: var(--live-bg); color: var(--live-fg); font-weight: 600; font-size: .95rem; }
.mind .mind__now[hidden] { display: none; }
.mind .mind__now .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex: none; }

/* ---- The graph: a dark (or light) canvas of notes, as in Obsidian ---- */
.mind .mind__graphsec { padding-bottom: clamp(16px, 2.5vw, 24px); }
.graph {
  --g-bg: #FBF8FD; --g-panel: rgba(255, 255, 255, .86); --g-panel-solid: #FFFFFF; --g-line: rgba(36, 48, 88, .16);
  --g-link: rgba(36, 48, 88, .2); --g-hi: #C55E92; --g-label: #243058; --g-label-soft: #59618A; --g-now: #1E9C8F;
  --g-reflex: #C02A44; --g-root: #C55E92; --g-hub: #243058; --g-state: #1E8F82; --g-tick: #6A58CC; --g-mission: #C77A12;
  --g-phase: #A8860A; --g-branch: #D9659E; --g-group: #E58FBA; --g-skill: #8A90B4; --g-font: var(--font-body);
  --g-live: #E0601E;
  position: relative; height: clamp(440px, 74vh, 760px); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--g-bg); border: 1px solid var(--g-line); color: var(--g-label);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .graph {
    --g-bg: #13102A; --g-panel: rgba(30, 25, 62, .86); --g-panel-solid: #1D1840; --g-line: rgba(255, 255, 255, .13);
    --g-link: rgba(214, 206, 255, .17); --g-hi: #F3A6CB; --g-label: #ECE8FA; --g-label-soft: #B9B2D8; --g-now: #4FD8C6;
    --g-reflex: #F06A84; --g-root: #F3A6CB; --g-hub: #ECE8FA; --g-state: #4FD1C1; --g-tick: #A99BFF; --g-mission: #F4B860;
    --g-phase: #E6CB6A; --g-branch: #EC92BB; --g-group: #C98DB0; --g-skill: #7E79A8; --g-live: #FFB86B;
  }
}
:root[data-theme="dark"] .graph {
  --g-bg: #13102A; --g-panel: rgba(30, 25, 62, .86); --g-panel-solid: #1D1840; --g-line: rgba(255, 255, 255, .13);
  --g-link: rgba(214, 206, 255, .17); --g-hi: #F3A6CB; --g-label: #ECE8FA; --g-label-soft: #B9B2D8; --g-now: #4FD8C6;
  --g-reflex: #F06A84; --g-root: #F3A6CB; --g-hub: #ECE8FA; --g-state: #4FD1C1; --g-tick: #A99BFF; --g-mission: #F4B860;
  --g-phase: #E6CB6A; --g-branch: #EC92BB; --g-group: #C98DB0; --g-skill: #7E79A8; --g-live: #FFB86B;
}
.graph__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y;
  cursor: grab; -webkit-tap-highlight-color: transparent; }
.graph__canvas.is-over { cursor: pointer; }
.graph__canvas.is-dragging { cursor: grabbing; }
.graph__fallback { position: absolute; inset: auto 16px 50% 16px; margin: 0; text-align: center; color: var(--g-label-soft); }
.graph__fallback[hidden] { display: none; }

/* Full screen: the graph over everything, one finger to pan (graph.js moves it to <body> for it: the panel's
   backdrop-filter would hold a fixed box inside the panel). */
.graph.is-full { position: fixed; inset: 0; z-index: 300; height: auto; border-radius: 0; border: 0; }
.graph.is-full .graph__canvas { touch-action: none; }
html.graph-open, html.graph-open body { overflow: hidden; }
html.graph-open .nixi-roam, html.graph-open .nixi-props, html.graph-open .deco-fab { visibility: hidden; }

/* The bar: find a note on the left, the view's buttons on the right. */
.graph__bar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: flex; gap: 8px;
  align-items: flex-start; pointer-events: none; }
.graph__bar > * { pointer-events: auto; }
.graph__find { position: relative; flex: 1 1 auto; max-width: 300px; min-width: 0; }
.graph__find input { width: 100%; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--g-line);
  background: var(--g-panel); color: var(--g-label); font: 500 15px/1 var(--font-body); -webkit-appearance: none; appearance: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.graph__find input::placeholder { color: var(--g-label-soft); }
.graph__find input:focus-visible { outline: 2px solid var(--g-hi); outline-offset: 1px; }
.graph__results { position: absolute; top: 44px; left: 0; width: min(320px, calc(100vw - 48px)); max-height: 320px; overflow: auto;
  list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: var(--g-panel-solid); border: 1px solid var(--g-line);
  box-shadow: 0 18px 40px -18px rgba(10, 8, 30, .5); }
.graph__results[hidden] { display: none; }
.graph__hit { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--g-label); font: 500 14px/1.25 var(--font-body); text-align: left; cursor: pointer; }
.graph__hit:hover, .graph__hit:focus-visible { background: rgba(197, 94, 146, .14); outline: none; }
.graph__hitname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph__hitkind { flex: none; font-size: 12px; color: var(--g-label-soft); }
.graph__none { padding: 8px 10px; color: var(--g-label-soft); font-size: 14px; }
.graph__tools { margin-left: auto; display: flex; gap: 6px; flex: none; }
.graph__btn { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--g-line);
  background: var(--g-panel); color: var(--g-label); font: 600 17px/1 var(--font-body); cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); touch-action: manipulation; }
.graph__btn[hidden] { display: none; }
.graph__btn--now { font-size: 13px; letter-spacing: .02em; color: var(--g-now); border-color: var(--g-now); }
.graph__btn--now::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: var(--g-now); vertical-align: 1px; }
.graph__btn[aria-pressed="true"] { border-color: var(--g-hi); color: var(--g-hi); }
@media (hover: hover) { .graph__btn:hover { border-color: var(--g-hi); } }
.graph__btn:focus-visible, .graph__chip:focus-visible { outline: 2px solid var(--g-hi); outline-offset: 2px; }
@media (max-width: 520px) { .graph__btn[data-graph-zoom] { display: none; } }

/* The legend: Obsidian's groups, each one a colour, each one shown or hidden. */
.graph__legend { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap;
  gap: 6px; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.graph__legend li { pointer-events: auto; }
.graph__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--g-line); background: var(--g-panel); color: var(--g-label); font: 500 12.5px/1 var(--font-body);
  cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); touch-action: manipulation; }
.graph__chip[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.graph__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--g-dot, var(--g-skill)); }
.graph__dot--state { --g-dot: var(--g-state); }
.graph__dot--tick { --g-dot: var(--g-tick); }
.graph__dot--mission { --g-dot: var(--g-mission); }
.graph__dot--phase { --g-dot: var(--g-phase); }
.graph__dot--skill { --g-dot: var(--g-skill); }
.graph__dot--core { --g-dot: var(--g-root); }
.graph__dot--new { background: transparent; box-shadow: inset 0 0 0 2px var(--g-skill); }

/* The open note: at the side on a wide screen, over the foot of the graph on a phone. */
.graph__note { position: absolute; z-index: 4; top: 58px; right: 10px; width: min(340px, calc(100% - 20px));
  max-height: calc(100% - 112px); overflow: auto; padding: 12px 16px 14px; border-radius: 16px; background: var(--g-panel-solid);
  border: 1px solid var(--g-line); color: var(--g-label); box-shadow: 0 24px 50px -24px rgba(10, 8, 30, .55);
  overscroll-behavior: contain; }
.graph__note[hidden] { display: none; }
@media (max-width: 640px) {
  .graph__note { top: auto; left: 8px; right: 8px; bottom: 50px; width: auto; max-height: 48%; }
}
.graph__notehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.graph__kind { margin: 0; font: 400 .66rem/1.3 var(--font-label); letter-spacing: .05em; text-transform: uppercase; color: var(--g-label-soft); }
.graph__kind--state { color: var(--g-state); }
.graph__kind--tick { color: var(--g-tick); }
.graph__kind--mission { color: var(--g-mission); }
.graph__kind--phase { color: var(--g-phase); }
.graph__kind--skill { color: var(--g-branch); }
.graph__close { width: 32px; height: 32px; flex: none; border: 0; border-radius: 10px; background: transparent;
  color: var(--g-label-soft); font: 400 24px/1 var(--font-body); cursor: pointer; }
@media (hover: hover) { .graph__close:hover { color: var(--g-label); background: rgba(127, 127, 160, .14); } }
.graph__title { margin: 2px 0 6px; font-family: var(--font-display); font-size: 1.25rem; color: var(--g-label); line-height: 1.2; }
.graph__text { margin: 0 0 6px; font-size: .95rem; color: var(--g-label); }
.graph__facts { margin: 0 0 8px; font-size: .88rem; color: var(--g-label-soft); }
.graph__rel { margin: 10px 0 5px; font: 600 .74rem/1.2 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--g-label-soft); }
.graph__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.graph__more { font-size: .85rem; color: var(--g-label-soft); padding: 3px 4px; }

/* [[Wikilinks]]: a note's name in the accent, as Obsidian draws an internal link. */
.mind .wl, .graph .wl { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--accent-text); cursor: pointer;
  text-decoration: none; border-bottom: 1px dashed currentColor; }
.graph button.wl, .mind .sit__acts .wl { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--g-line, var(--line));
  background: rgba(197, 94, 146, .08); font-size: .85rem; line-height: 1.2; color: var(--g-hi, var(--accent-text)); }
.graph .wl--state { color: var(--g-state); }
.graph .wl--tick { color: var(--g-tick); }
.graph .wl--mission { color: var(--g-mission); }
.graph .wl--phase { color: var(--g-phase); }
@media (hover: hover) { .mind .wl:hover, .graph .wl:hover { filter: brightness(1.15); border-color: currentColor; } }
.mind .wl:focus-visible, .graph .wl:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.graph__hint { position: absolute; left: 50%; top: 50%; z-index: 5; margin: 0; padding: 10px 16px; border-radius: 12px;
  transform: translate(-50%, -50%); background: rgba(10, 8, 30, .78); color: #fff; font: 600 14px/1.2 var(--font-body);
  pointer-events: none; }
.graph__hint[hidden] { display: none; }

/* Live: her decisions as she makes them (graph.js, /live/now). The button, and the panel: at the side on a wide
   screen, a sheet over the foot of the graph on a phone (an open note goes over it). */
.graph__btn--live { font-size: 13px; letter-spacing: .02em; color: var(--g-live); border-color: var(--g-live); }
.graph__btn--live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  border: 2px solid var(--g-live); vertical-align: 0; box-sizing: border-box; }
.graph__btn--live[aria-pressed="true"] { background: var(--g-live); color: var(--g-bg); }
.graph__btn--live[aria-pressed="true"]::before { background: var(--g-bg); border-color: var(--g-bg); animation: graph-live 1.6s ease-in-out infinite; }
@keyframes graph-live { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .graph__btn--live[aria-pressed="true"]::before { animation: none; } }
.graph__live { position: absolute; z-index: 3; top: 58px; right: 10px; width: min(340px, calc(100% - 20px));
  max-height: calc(100% - 112px); overflow: auto; padding: 10px 14px 12px; border-radius: 16px; background: var(--g-panel-solid);
  border: 1px solid var(--g-live); color: var(--g-label); box-shadow: 0 24px 50px -24px rgba(10, 8, 30, .55);
  overscroll-behavior: contain; font-size: .92rem; }
.graph__live[hidden] { display: none; }
@media (max-width: 640px) {
  .graph__live { top: auto; left: 8px; right: 8px; bottom: 50px; width: auto; max-height: 40%; }
}
.graph__livehead { display: flex; align-items: center; gap: 8px; }
.graph__livehead .graph__kind { color: var(--g-live); flex: 1 1 auto; }
.graph__livestatus { font-size: .78rem; color: var(--g-label-soft); white-space: nowrap; }
.graph__livestatus.is-on::before { content: "● "; color: var(--g-live); }
.graph__liveline { margin: 4px 0 2px; }
.graph__livesoft { margin: 2px 0; color: var(--g-label-soft); font-size: .86rem; }
.graph__odds { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.graph__odd { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.graph__oddname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; padding: 2px 0;
  border: 0; background: none; color: var(--g-label); font: 500 .88rem/1.3 var(--font-body); cursor: pointer; }
.graph__oddname:disabled { cursor: default; color: var(--g-label-soft); }
.graph__odd.is-chosen .graph__oddname { color: var(--g-live); font-weight: 700; }
.graph__oddbar { height: 6px; border-radius: 3px; background: rgba(127, 127, 160, .2); overflow: hidden; }
.graph__oddfill { display: block; height: 100%; border-radius: 3px; background: var(--g-skill); }
.graph__odd.is-chosen .graph__oddfill { background: var(--g-live); }
.graph__oddp { font: 600 .8rem/1 var(--font-body); color: var(--g-label-soft); min-width: 3.2em; text-align: right; }
.graph__follow { margin-top: 8px; height: 32px; font-size: 13px; color: var(--g-live); border-color: var(--g-live); }
.graph__past { list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--g-label-soft); }
.graph__past li { padding: 2px 0; border-bottom: 1px dashed var(--g-line); }
.graph__past li:last-child { border-bottom: 0; }

/* The tick: numbered steps, a grid that folds to one column on a phone. */
.mind .tick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .mind .tick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mind .tick { grid-template-columns: minmax(0, 1fr); } }
.mind .tick__step { position: relative; padding: 14px 14px 12px; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--line); }
.mind .tick__step h3 { font-family: var(--font-display); color: var(--heading); font-size: 1.05rem; margin: 6px 0 4px; }
.mind .tick__step h3 .wl { color: var(--heading); }
.mind .tick__step p { margin: 0; font-size: .93rem; color: var(--text); }
.mind .tick__step--reflex { border-color: var(--red); background: rgba(192, 42, 68, .09); }
.mind .tick__n, .mind .sit__n, .mind .exp__n, .mind .phase__n { display: inline-grid; place-items: center; min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: 999px; background: var(--navy); color: #fff; font-family: var(--font-label); font-size: .72rem; }
.mind .tick__again { margin: 14px 0 0; color: var(--text-soft); font-weight: 600; }

/* The situations as notes: what starts each one, its options, and the skills they are. */
.mind .sits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.mind .sit { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.mind .sit h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); color: var(--heading); font-size: 1.02rem; margin: 0 0 6px; }
.mind .sit h3 .wl { color: var(--heading); }
.mind .sit p { margin: 0; font-size: .92rem; }
.mind .sit__when { color: var(--text); }
.mind .sit__does { color: var(--text-soft); margin-top: 4px !important; }
.mind .sit__acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px !important; }
.mind .sit.is-now, .mind .exp.is-now, .mind .phase.is-now { outline: 3px solid var(--teal); outline-offset: 1px; background: var(--live-bg); }

/* Missions: the five expeditions in order, and how each one runs (the cycle drawing). */
.mind .chain { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.mind .exp { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; color: var(--heading); }
.mind .exp .wl { color: var(--heading); border-bottom: 0; }
.mind .exp:not(:last-child)::after { content: "→"; position: absolute; right: -20px; color: var(--rose-deep); font-weight: 700; }
.mind .exp.is-done { opacity: .62; }
.mind .exp.is-done .exp__n { background: var(--teal-deep); }
.mind .cycle-figure { margin: 6px 0 0; }
.mind .cycle { display: block; width: 100%; max-width: 440px; height: auto; }
.mind .sm-edge { stroke: var(--rose-deep); stroke-width: 2; fill: none; }
.mind .sm-arrowhead { fill: var(--rose-deep); }
.mind .sm-node rect { fill: var(--glass-highlight); stroke: var(--line); stroke-width: 2; }
.mind .sm-node--soft rect { fill: var(--surface); stroke-dasharray: 5 4; }
.mind .sm-node__label { font-family: var(--font-label); font-size: 13px; fill: var(--heading); text-anchor: middle; }
.mind .sm-node__when { font-family: var(--font-body); font-size: 11px; fill: var(--text-soft); text-anchor: middle; }
.mind .sm-now { display: none; font-family: var(--font-label); font-size: 10px; fill: var(--teal-deep); text-anchor: end; }
.mind .sm-node.is-now rect { stroke: var(--teal); stroke-width: 4; fill: rgba(47, 179, 165, .2); }
.mind .sm-node.is-now .sm-now { display: inline; }
.mind .cy-note { font-family: var(--font-body); font-size: 11px; fill: var(--text-soft); text-anchor: middle; }

/* The route: sixteen phases as a track. */
.mind .route { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mind .phase { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-size: .93rem; color: var(--heading); }
.mind .phase .wl { color: var(--heading); border-bottom: 0; }
.mind .phase.is-done { background: rgba(47, 179, 165, .16); }
.mind .phase.is-done .phase__n { background: var(--teal-deep); }

/* Skills: a card a branch, opened for its list; each skill a link to its note in the graph. */
.mind .branches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
.mind .branch details { border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.mind .branch summary { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.mind .branch summary::-webkit-details-marker { display: none; }
.mind .branch__name { font-family: var(--font-display); color: var(--heading); font-size: 1.02rem; }
.mind .branch__count { color: var(--text-soft); font-size: .9rem; white-space: nowrap; }
.mind .branch__count b { color: var(--heading); }
.mind .skill-meter { grid-column: 1 / -1; width: 100%; height: 8px; display: block; }
.mind .skill-meter__bg { fill: var(--meter-bg); }
.mind .skill-meter__fill { fill: var(--teal); }
.mind .branch details[open] summary { border-bottom: 1px solid var(--line); }
.mind .branch__body { padding: 8px 14px 14px; }
.mind .group { font-family: var(--font-label); font-size: .72rem; letter-spacing: .04em; color: var(--accent-text); margin: 12px 0 4px; text-transform: uppercase; }
.mind .leaves { list-style: none; margin: 0; padding: 0; }
.mind .leaf { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; color: var(--text); }
.mind .leaf:last-child { border-bottom: 0; }
.mind .leaf .wl { color: var(--text); border-bottom-color: transparent; }
@media (hover: hover) { .mind .leaf .wl:hover { color: var(--accent-text); border-bottom-color: currentColor; } }
.mind .leaf--new .leaf__words .wl { color: var(--text-soft); }
.mind .leaf__meta { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; flex: none; max-width: 45%; }
.mind .leaf__tag { font-size: .72rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-soft); white-space: nowrap; }
.mind .dim { text-decoration: none; font-family: var(--font-label); font-size: .62rem; padding: 2px 5px; border-radius: 6px; color: #fff; }
.mind .dim--overworld { background: #3f8a3a; }
.mind .dim--nether { background: var(--red-deep); }
.mind .dim--end { background: var(--end); }