/* S1 tool bar and brush card (src/ui/tools.js). Bottom center, night panels, cream text.
   Panels animate only opacity and transform (docs/15). */

.ebb-tools,
.ebb-history {
  --tb-btn: 48px;
  --tb-icon: 28px;
  --tb-gap: 4px;
  --tb-pad: 6px;
  --tb-panel: rgba(30, 38, 36, 0.72);
  --tb-line: rgba(244, 238, 228, 0.12);
  --tb-hover: rgba(244, 238, 228, 0.1);
  --tb-active: var(--wordmark-light);
  --tb-focus: var(--wordmark-dark);
  --tb-thumb: 22px;
  --tb-range-h: 32px;
}

.ebb-tools {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--ui-cream);
  z-index: 10;
}

/* Undo and redo, bottom left under the island notes (docs/15 HUD). */
.ebb-history {
  --tb-edge: 12px;
  position: fixed;
  left: max(var(--tb-edge), env(safe-area-inset-left));
  bottom: max(var(--tb-edge), env(safe-area-inset-bottom));
  z-index: 10;
  pointer-events: none;
  color: var(--ui-cream);
  transition: opacity 200ms ease, transform 220ms ease, visibility 0s;
}

.ebb-tools .icon,
.ebb-history .icon {
  width: var(--tb-icon);
  height: var(--tb-icon);
  display: block;
  flex: none;
}

/* Panels share the night glass look. */
.ebb-tools__bar,
.ebb-tools__card {
  pointer-events: auto;
  background: var(--tb-panel);
  border: 1px solid var(--tb-line);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(10, 14, 13, 0.28);
  touch-action: manipulation;
  max-width: 100%;
}
@media (pointer: fine) {
  .ebb-tools__bar,
  .ebb-tools__card { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* --- the bar --- */
.ebb-tools__bar {
  display: flex;
  align-items: center;
  gap: var(--tb-gap);
  padding: var(--tb-pad);
  flex: none;
}

.ebb-tools__btn {
  appearance: none;
  -webkit-appearance: none;
  width: var(--tb-btn);
  height: var(--tb-btn);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ui-cream);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, opacity 160ms ease;
}
.ebb-tools__btn:hover { background: var(--tb-hover); }
.ebb-tools__btn[aria-pressed='true'] { background: var(--tb-active); color: var(--ui-cream); }
.ebb-tools__btn[aria-disabled='true'] { opacity: 0.38; cursor: default; }
.ebb-tools__btn[aria-disabled='true']:hover { background: transparent; }

.ebb-tools :focus-visible,
.ebb-history :focus-visible {
  outline: 2px solid var(--tb-focus);
  outline-offset: 2px;
}

/* --- the brush card --- */
.ebb-tools__card {
  width: 360px;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.ebb-tools__card.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease, transform 220ms ease, visibility 0s;
}

.ebb-tools__chips {
  display: grid;
  grid-template-columns: repeat(var(--tb-cols, 3), minmax(0, 1fr));
  gap: 6px;
}
.ebb-tools__chips[hidden] { display: none; }
/* Species chips sit two to a row; an odd one out at the end takes the whole row (tools.js marks it,
   since chips for plants not yet found are hidden). */
.ebb-tools__chips--species .ebb-tools__chip--wide { grid-column: 1 / -1; }
/* Chips, sliders and the spring parts set their own display; the hidden attribute still wins. */
.ebb-tools [hidden] { display: none; }
/* Paint chips (four) and sculpt chips (four to seven, as the frogs give Terrace and Cut and the
   naturalist's notes Loose stone; tools.js lays them in rows that fill the card) stack the swatch
   or icon above the label so they fit on every width. */
.ebb-tools__chips--paint { --tb-cols: 4; }
.ebb-tools__chips--sculpt { --tb-cols: 3; }
.ebb-tools__chips--paint .ebb-tools__chip,
.ebb-tools__chips--sculpt .ebb-tools__chip { flex-direction: column; gap: 3px; padding: 6px 4px; }

.ebb-tools__chip {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  min-width: 0;
  padding: 6px 8px;
  margin: 0;
  border: 1px solid var(--tb-line);
  border-radius: 12px;
  background: transparent;
  color: var(--ui-cream);
  font: inherit;
  font-size: var(--text-body);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.ebb-tools__chip:hover { background: var(--tb-hover); }
.ebb-tools__chip[aria-pressed='true'] { background: var(--tb-active); border-color: transparent; }
.ebb-tools__chip .icon { width: 22px; height: 22px; }
.ebb-tools__chip span { min-width: 0; overflow-wrap: break-word; }
.ebb-tools__swatch {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

/* water: spring flow chips, the spring count with Remove, and the placing hint; Sculpt's Loose
   stone mode the same way (a stone count with Remove, the hint, and a calm line at the cap) */
.ebb-tools__spring,
.ebb-tools__pieces {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ebb-tools__spring-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.ebb-tools__count {
  min-width: 0;
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.ebb-tools__remove { margin-left: auto; padding: 6px 14px 6px 10px; }
.ebb-tools__hint {
  margin: 0;
  min-width: 0;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
  opacity: 0.85;
}

/* plant: species chips, the hint, and the last tap's result (fades after about 2.5 s) */
.ebb-tools__plant {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ebb-tools__message {
  margin: 0;
  min-width: 0;
  min-height: 1.35em;
  font-size: var(--text-body);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: break-word;
  opacity: 0;
  transition: opacity 600ms ease;
}
.ebb-tools__message.is-shown { opacity: 1; transition: opacity 120ms ease; }
/* A tap that did not take: the line in a muted red, so it reads as a small problem at a glance. */
.ebb-tools__message.is-refused { color: var(--ui-refused); }
/* net: how the net stands (in, fishing and for how long, full), in full strength under the hint */
.ebb-tools__status {
  margin: 0;
  min-width: 0;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: break-word;
}

/* sliders */
.ebb-tools__slider {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'label value' 'range range';
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}
.ebb-tools__slider label { grid-area: label; font-size: var(--text-body); }
.ebb-tools__slider output {
  grid-area: value;
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.ebb-tools__range {
  grid-area: range;
  --fill: 50%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: var(--tb-range-h);
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.ebb-tools__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--moss-3) var(--fill), rgba(244, 238, 228, 0.18) var(--fill));
}
.ebb-tools__range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(244, 238, 228, 0.18);
}
.ebb-tools__range::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--moss-3);
}
.ebb-tools__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--tb-thumb);
  height: var(--tb-thumb);
  margin-top: calc((6px - var(--tb-thumb)) / 2);
  border-radius: 50%;
  background: var(--ui-cream);
  border: 2px solid var(--wordmark-light);
  box-shadow: 0 1px 4px rgba(10, 14, 13, 0.35);
}
.ebb-tools__range::-moz-range-thumb {
  width: var(--tb-thumb);
  height: var(--tb-thumb);
  border-radius: 50%;
  background: var(--ui-cream);
  border: 2px solid var(--wordmark-light);
  box-shadow: 0 1px 4px rgba(10, 14, 13, 0.35);
}
.ebb-tools__range:focus-visible { outline-offset: 0; border-radius: 8px; }

/* Narrow windows: the card spans the gutter-to-gutter width,
   sculpt chips stack their icon above the label too. */
@media (max-width: 420px) {
  .ebb-tools__card { width: 100%; }
  .ebb-tools__chips--sculpt .ebb-tools__chip,
  .ebb-tools__chips--water .ebb-tools__chip,
  .ebb-tools__chips--rate .ebb-tools__chip { flex-direction: column; gap: 2px; padding: 6px 4px; }
}
/* Narrow windows: no room beside the centered bar, so undo and redo sit just above it at the left
   edge, mirroring the time-flow button on the right. The brush card opens full width over that
   spot, so they step aside while a tool is on. */
@media (max-width: 560px) {
  .ebb-history { bottom: calc(max(var(--tb-edge), env(safe-area-inset-bottom)) + var(--tb-btn) + 2 * var(--tb-pad) + 2px + 10px); }
  .ebb-history.has-tool {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }
  .ebb-history.has-tool .ebb-tools__bar { pointer-events: none; }
}
/* Narrow windows: the brush size becomes a short upright slider down the card's right side, so the
   card is a row shorter and more of the island shows above it (docs/15). */
@media (max-width: 560px) {
  .ebb-tools__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 12px;
    align-items: start;
  }
  .ebb-tools__card > * { grid-column: 1; }
  .ebb-tools__card > .ebb-tools__slider[data-slider='size'] {
    grid-column: 2;
    grid-row: 1 / span 6;
    grid-template-columns: auto;
    grid-template-areas: 'label' 'value' 'range';
    justify-items: center;
    row-gap: 4px;
  }
  .ebb-tools__slider[data-slider='size'] output { text-align: center; }
  .ebb-tools__slider[data-slider='size'] .ebb-tools__range {
    writing-mode: vertical-lr;
    direction: rtl;
    width: var(--tb-range-h);
    height: 132px;
  }
  .ebb-tools__slider[data-slider='size'] .ebb-tools__range::-webkit-slider-runnable-track {
    width: 6px;
    height: 100%;
    background: linear-gradient(to top, var(--moss-3) var(--fill), rgba(244, 238, 228, 0.18) var(--fill));
  }
  .ebb-tools__slider[data-slider='size'] .ebb-tools__range::-webkit-slider-thumb {
    margin-top: 0;
    margin-left: calc((6px - var(--tb-thumb)) / 2);
  }
  .ebb-tools__slider[data-slider='size'] .ebb-tools__range::-moz-range-track { width: 6px; height: 100%; }
  .ebb-tools__slider[data-slider='size'] .ebb-tools__range::-moz-range-progress { width: 6px; }
}
/* Six tool buttons. With tight gaps the bar's own parts take 20 px (2 x 4 padding, 5 x 2 gaps,
   border 2) plus the 24 px page gutter, so below 460 px the buttons share what is left: 48 px
   down to a 332 px window, 46 px at 320 px, so the bar never runs past the window. */
@media (max-width: 460px) {
  .ebb-tools {
    --tb-gap: 2px;
    --tb-pad: 4px;
    --tb-btn: clamp(34px, calc((100vw - 44px) / 6), 48px);
    --tb-icon: clamp(22px, calc(var(--tb-btn) - 20px), 28px);
  }
}

/* Short windows: the card stays compact, with each slider's label, track and value on one row. */
@media (max-height: 500px) {
  .ebb-tools__card { padding: 10px 12px; gap: 8px; }
  .ebb-tools__chip { flex-direction: column; gap: 2px; padding: 5px 4px; }
  .ebb-tools__slider {
    grid-template-columns: 4.6em minmax(0, 1fr) 4.2em;
    grid-template-areas: 'label range value';
  }
  .ebb-tools__slider output { text-align: right; }
}
/* Reduced motion: the system's (unless Settings says Full), or Settings' Calm (src/ui/motion.js). */
@media (prefers-reduced-motion: reduce) {
  :root:not(.ebb-motion-full) .ebb-history,
  :root:not(.ebb-motion-full) .ebb-history.has-tool { transform: none; }
  :root:not(.ebb-motion-full) .ebb-tools__card,
  :root:not(.ebb-motion-full) .ebb-tools__card.is-open { transition: visibility 0s; transform: none; }
  :root:not(.ebb-motion-full) .ebb-tools__message,
  :root:not(.ebb-motion-full) .ebb-tools__message.is-shown { transition: none; }
}
:root.ebb-motion-calm .ebb-history,
:root.ebb-motion-calm .ebb-history.has-tool { transform: none; }
:root.ebb-motion-calm .ebb-tools__card,
:root.ebb-motion-calm .ebb-tools__card.is-open { transition: visibility 0s; transform: none; }
:root.ebb-motion-calm .ebb-tools__message,
:root.ebb-motion-calm .ebb-tools__message.is-shown { transition: none; }