/* mind.css — the mind's chrome and sheet (mind.js, tools/sections/mind.py): the quiet "ask me" at the bottom right of every place (grey like
   the squiggle until hovered), the question line it opens (written in the hand on its own piece of the page's paper, so nothing reads
   through it), "or ask me what i can do" under the home question, and the mind sheet's form and list on the type scale. */
.mind-ask { position: fixed; right: 20px; bottom: 12px; z-index: 22; background: none; border: 0; padding: 10px 6px; min-height: 44px; min-width: 44px; cursor: pointer; opacity: 0.45; transition: opacity 0.25s; -webkit-tap-highlight-color: transparent; }
.mind-ask:hover, .mind-ask:focus-visible { opacity: 1; outline: none; }
.mind-ask:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; border-radius: 6px; }
.mind-ask canvas, .mind-line canvas, .mind-home-ask canvas { display: block; mix-blend-mode: multiply; filter: url(#soak); }
.mind-ask.hidden, html[data-phase]:not([data-phase="live"]) .mind-ask, html[data-place="home"] .mind-ask, html[data-place="map"] .mind-ask { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .mind-ask { right: 8px; bottom: 6px; } }
.mind-line { position: fixed; left: 50%; bottom: 128px; transform: translateX(-50%) translateY(6px); z-index: 39; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 18px 6px 20px; max-width: calc(100vw - 24px); box-sizing: border-box; opacity: 0; transition: opacity 0.22s, transform 0.22s; cursor: text; }
.mind-line.on { opacity: 1; transform: translateX(-50%); }
.mind-line[hidden] { display: none; }
.mind-line-paper { position: absolute; inset: 0; border-radius: 26px 22px 28px 20px / 22px 26px 20px 28px; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 38%, rgba(255, 253, 247, 0.6) 0%, rgba(255, 253, 247, 0) 60%), linear-gradient(160deg, rgba(255, 255, 252, 0.3), rgba(120, 100, 80, 0.05)), var(--paper); background-attachment: fixed, fixed, scroll;
  box-shadow: 0 0 0 1.5px rgba(21, 20, 26, 0.32); }
.mind-line-paper::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--tooth); background-size: 512px 512px; background-attachment: fixed; mix-blend-mode: multiply; opacity: var(--tooth-opacity, 0.2); }
.mind-line-prompt, .mind-line-typed, .mind-line-caret, .mind-line-close { position: relative; }
.mind-line-typed { font-family: Kalam, cursive; font-weight: 700; font-size: 22px; line-height: 1; color: var(--ink); white-space: pre; mix-blend-mode: multiply; filter: url(#soak); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.mind-line-caret { width: 2.5px; height: 26px; background: var(--ink); opacity: 0.8; animation: mind-blink 1.06s steps(1) infinite; border-radius: 1px; }
@keyframes mind-blink { 0%, 52% { opacity: 0.8; } 53%, 100% { opacity: 0; } }
.mind-line-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; }
.mind-line-close { background: none; border: 0; padding: 12px 2px 12px 10px; min-height: 44px; cursor: pointer; opacity: 0.5; }
.mind-line-close:hover, .mind-line-close:focus-visible { opacity: 1; outline: none; }
@media (max-width: 600px) { .mind-line { bottom: 140px; padding: 4px 10px 4px 14px; gap: 6px; } .mind-line-typed { font-size: 19px; max-width: 30vw; } }
@media (prefers-reduced-motion: reduce) { .mind-line, .mind-ask { transition: none; } .mind-line-caret { animation: none; } }
.mind-home-ask { position: fixed; transform: translateX(-50%); z-index: 13; padding: 8px 6px; min-height: 44px; display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.6s; border: 0; text-decoration: none; }
.mind-home-ask.on { opacity: 0.85; pointer-events: auto; }
.mind-home-ask.on:hover, .mind-home-ask:focus-visible { opacity: 1; outline: none; }
html:not([data-place="home"]) .mind-home-ask { display: none; }
/* the replay arrow of the question line (brief 10): the prompt is written once per journey, this writes it again; grey until hovered */
.mind-line-replay { position: relative; background: none; border: 0; padding: 0; width: 30px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.3; transition: opacity 0.2s; flex: none; }
.mind-line-replay:hover, .mind-line-replay:focus-visible { opacity: 0.9; outline: none; }
.mind-line-replay canvas { display: block; mix-blend-mode: multiply; filter: url(#soak); }
@media (hover: none) { .mind-line-replay { opacity: 0.45; } }
/* the mind sheet: the question line, one invitation, the list only when asked (a disclosure closed on every load), the mind's state */
.mind-sheet .mind-form { margin: 8px 0 6px; }
.mind-sheet .mind-q-label { display: flex; align-items: center; min-height: 67px; margin: 0 0 2px; cursor: text; }   /* the written question is a 44 px target on the phone (67 units at zoom 0.66): it focuses the line */
.mind-sheet .mind-q-row { display: flex; align-items: center; gap: 14px; }
.mind-sheet .mind-q { flex: 1; min-width: 0; min-height: 67px; box-sizing: border-box; font-family: Kalam, cursive; font-weight: 700; font-size: 28px; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid rgba(21, 20, 26, 0.55); border-radius: 0; padding: 10px 2px 6px; outline: none; }
.mind-sheet .mind-q:focus { border-bottom-color: var(--ink); }
.mind-sheet .mind-q-go { background: none; border: 0; border-bottom: 1px solid rgba(21, 20, 26, 0.45); padding: 10px 10px 4px; min-height: 67px; min-width: 67px; cursor: pointer; color: var(--ink); font-family: var(--type); }
.mind-sheet .mind-cando { margin: 18px 0 26px; }
.mind-sheet .mind-cando > summary { list-style: none; display: inline-flex; align-items: center; min-height: 67px; cursor: pointer; border: 0; }
.mind-sheet .mind-cando > summary::-webkit-details-marker { display: none; }
.mind-sheet .mind-cando > summary::marker { content: ""; }
.mind-sheet .mind-cando > summary:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 4px; border-radius: 6px; }
.mind-sheet .mind-cando[open] > summary { opacity: 0.55; }
.mind-sheet .mind-list { margin: 10px 0 0; }
.mind-sheet .mind-list-head { margin: 0 0 6px; }
.mind-sheet .mind-caps { list-style: none; margin: 0 0 6px; padding: 0 0 0 18px; }
.mind-sheet .mind-caps li { position: relative; }
.mind-sheet .mind-caps li::before { content: ""; position: absolute; left: -16px; top: 32px; width: 7px; height: 2px; background: rgba(21, 20, 26, 0.6); border-radius: 1px; }
.mind-sheet .mind-caps a { border: 0; display: inline-flex; align-items: center; min-height: 67px; }   /* 44 CSS px on the phone at zoom 0.66 */
.mind-sheet .mind-caps li[hidden] { display: none; }
.mind-sheet .mind-others { opacity: 0.8; margin: 8px 0 0; }
.mind-sheet .mind-state { margin: 4px 0 18px; }
.mind-sheet .mind-state .mind-state-line { display: block; margin: 0 0 6px; }
.mind-sheet .mind-state-note { opacity: 0.8; margin: 8px 0 0; }
.mind-sheet .mind-live, .mind-sheet .mind-resting { display: none; }
.mind-sheet[data-live="on"] .mind-local, .mind-sheet[data-live="resting"] .mind-local { display: none; }
.mind-sheet[data-live="on"] .mind-live, .mind-sheet[data-live="resting"] .mind-resting { display: block; }
.mind-sheet .mind-where { opacity: 0.8; margin: 0; }
html:not(.js) .mind-sheet .mind-q-label, html:not(.js) .mind-sheet .mind-cando-ink, html:not(.js) .mind-sheet .mind-state-line, html:not(.js) .mind-sheet .mind-caps a { font-family: Kalam, cursive; font-weight: 700; }
/* print (lanes-finish.md, core 7): the poster on paper keeps the question and its invitation, not the chrome or the mind's state on this screen */
html[data-print="on"] .mind-ask, html[data-print="on"] .mind-line, html[data-print="on"] .mind-home-ask { display: none !important; }
html[data-print="on"] .mind-sheet .mind-state, html[data-print="on"] .mind-sheet .mind-where, html[data-print="on"] .mind-sheet .mind-q-go { display: none !important; }
@media print { .mind-ask, .mind-line, .mind-home-ask { display: none !important; } }

/* the mind pass (mind-pass.md): how the mind talks, coy or direct, two hand-written words with the current one ringed; what the device
   remembers of the questions, with its way out. Targets stay 44 px on every screen. */
.mind-sheet-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
.mind-manner-label { font-family: var(--type); font-size: 19px; opacity: 0.75; }
.mind-manner { display: inline-flex; align-items: center; gap: 4px; }
.mind-manner-b { position: relative; background: none; border: 0; min-height: 44px; min-width: 44px; padding: 6px 12px; cursor: pointer; color: var(--ink); opacity: 0.55; }
.mind-manner-b:hover, .mind-manner-b:focus-visible { opacity: 1; outline: none; }
.mind-manner-b:focus-visible::before { content: ''; position: absolute; inset: 4px 2px; border-bottom: 2px solid var(--ink); }
.mind-manner-b.on { opacity: 1; }
.mind-manner-b.on::after { content: ''; position: absolute; inset: 5px 0 3px; border: 2.2px solid var(--ink); border-radius: 48% 52% 46% 54% / 58% 44% 56% 42%; transform: rotate(-3deg); opacity: 0.85; mix-blend-mode: multiply; pointer-events: none; }
.mind-line .mind-manner { display: none; margin-left: 6px; }
html[data-mind-manner="direct"] .mind-line .mind-manner { display: inline-flex; }
.mind-forget { font-family: var(--type); font-size: 19px; margin: 2px 0 10px; opacity: 0.8; }
.mind-forget-b { background: none; border: 0; border-bottom: 1px solid rgba(21, 20, 26, 0.5); min-height: 44px; padding: 8px 4px 4px; cursor: pointer; font: inherit; color: var(--ink); }
.mind-forget-b:hover, .mind-forget-b:focus-visible { border-bottom-color: var(--ink); outline: none; }
html[data-print="on"] .mind-sheet-row, html[data-print="on"] .mind-forget { display: none; }