/* gloop.live story log toggle (js/story.js) + story log scrollbar.
   Loaded after gloop.css, mobile.css, boat.css and extras.css so these
   overrides win without editing those files. */

/* the log: no visible scrollbar or scroll arrows; wheel / touch scrolling and
   the auto-follow of the newest line (gloop.js, js/story.js) keep working */
.thoughts { scrollbar-width: none; -ms-overflow-style: none; }
.thoughts::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* hidden: collapse the panel; gloop.js still writes every line into it */
html.story-hidden .thoughts { display: none !important; }
/* ...and the on-screen captions (css/a11y.css .a11y-captions) go with it: visually hidden only,
   so the aria-live caption region keeps announcing new lines to screen readers */
html.story-hidden .a11y-captions {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; transform: none !important;
}

/* button: field top-left row, right of the settings gear (css/a11y.css
   .a11y-open: left 0.8rem, 1.7rem / 44px). Same look as the map / trophy
   buttons (css/extras.css .xb-btn). */
.field .story-btn {
  position: absolute;
  top: 0.7rem;
  left: calc(0.8rem + 1.7rem + 0.45rem);
  z-index: 3;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--mute, #8f97a3);
  background: var(--glass, rgba(12, 16, 22, 0.62));
  border: 1px solid var(--line, rgba(236, 230, 218, 0.1));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.field .story-btn svg {
  width: 0.95rem; height: 0.95rem; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.field .story-btn .story-dots { stroke-width: 2.6; }
.field .story-btn .story-slash { display: none; stroke-width: 2; }
.field .story-btn.is-off .story-slash { display: inline; }
.field .story-btn.is-off .story-dots { display: none; }
.field .story-btn:hover, .field .story-btn:focus-visible { opacity: 1; color: var(--glow, #b9f5b4); border-color: rgba(185, 245, 180, 0.5); }
.field .story-btn.is-off { opacity: 0.9; color: var(--hot, #f0c27a); border-color: rgba(240, 194, 122, 0.45); }
.field .story-btn:focus-visible { outline: 2px solid var(--glow, #b9f5b4); outline-offset: 2px; }
.field .story-btn:active { transform: scale(0.94); }

/* touch / narrow: 44px target like the gear and the map / trophy / ? row */
@media (max-width: 900px) and (pointer: coarse), (max-width: 560px) {
  .field .story-btn { left: calc(0.8rem + 44px + 8px); width: 44px; height: 44px; }
  .field .story-btn svg { width: 1.3rem; height: 1.3rem; }
  /* short boating field (css/boat.css): button goes under the gear so the story strip in the top row keeps its full width */
  html.has-vehicle-pad .field.boat-short .story-btn { left: 0.8rem; top: calc(0.7rem + 44px + 2px + 44px + 8px); } /* short boat layout: under the gear, so the story strip keeps its full width */
  /* v5b: the short boat strip is only 44px tall: newest line only, cut to 2 lines with an ellipsis */
  html.has-vehicle-pad .field.boat-short .thoughts { overflow: hidden; }
  html.has-vehicle-pad .field.boat-short .thoughts p:not(:last-child) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html.has-vehicle-pad .field.boat-short .thoughts p:last-child { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}
/* narrow phone in the boat: bottom row, just right of the 112px joystick (css/mobile.css), measured from the same bottom edge so the skills rows can't push them together */
@media (max-width: 560px) {
  html.has-vehicle-pad .field.boat-short .story-btn { top: auto; bottom: 8px; left: calc(max(16px, env(safe-area-inset-left) + 12px) + 112px + 8px); }
}
/* no WebGL: the gear drops to the bottom-left (a11y.css); take the top-left corner */
html.no-webgl .field .story-btn { left: 0.8rem; }

html.gl-rm .field .story-btn, html.a11y-rm-on .field .story-btn { transition: none; }
html.gl-rm .field .story-btn:active, html.a11y-rm-on .field .story-btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .field .story-btn { transition: none; }
  .field .story-btn:active { transform: none; }
}
html[data-a11y-cb="high-contrast"] .field .story-btn { opacity: 1; color: #ffffff; border-color: rgba(255, 255, 255, 0.7); }

/* v5: keep on-screen captions short (Dad): at most 2 captions shown, each cut to 2 lines
   with an ellipsis, so the box never grows past 4 lines. Older lines were already
   announced to screen readers when added (aria-live), so hiding them is visual only. */
.a11y-captions p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.a11y-captions p:nth-last-child(n+3) { display: none; }
/* v5c: no peek of a 3rd line: vertical padding moved into same-colour borders, which sit outside the overflow clip */
.a11y-captions p { padding-top: 0; padding-bottom: 0; border-top: 0.25em solid rgba(0,0,0,0.8); border-bottom: 0.3em solid rgba(0,0,0,0.8); background-clip: padding-box; }

/* v5b: the story strip (.thoughts, gloop.js writes up to 12 <p>, newest last) shows at most
   4 lines: the line before the newest cut to 1 line, the newest cut to 3, each with an ellipsis.
   Older lines stay in the DOM, visually hidden (not display:none) so the log keeps its full
   text for screen readers; line-clamp is visual only too. max-height = fallback without clamp. */
.thoughts { overflow: hidden; }
.thoughts p:nth-last-child(n+3) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.thoughts p:nth-last-child(-n+2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.thoughts p:nth-last-child(2) { -webkit-line-clamp: 1; line-clamp: 1; max-height: 1.45em; max-height: 1lh; }
.thoughts p:last-child { -webkit-line-clamp: 3; line-clamp: 3; max-height: calc(3 * 1.45em); max-height: 3lh; }