/*
  Gener8 style kit — Tools panel in tabs (kit/js/tools-tabs.js).

  Heading (tab name, Minimise), a row of tabs, one page at a time, and a footer that is
  always there (Reset, Undo …). Pages never show a scrollbar: they are laid out to fit,
  and on a very short screen they can still be dragged up and down.
  Touch first: tabs and tiles are big, pressed states only, no hover.
*/
.tools.g8-tabbed { width: calc(var(--u) * 42); gap: calc(var(--u) * .9); padding: calc(var(--u) * 1.1); }

/* No scrollbars anywhere in the panel */
.tools.g8-tabbed, .g8-tpages { scrollbar-width: none; }
.tools.g8-tabbed::-webkit-scrollbar, .g8-tpages::-webkit-scrollbar { display: none; }

/* ---- Tabs row ------------------------------------------------------------------- */
.g8-ttabs {
  display: flex; gap: calc(var(--u) * .3); padding: calc(var(--u) * .35);
  border-radius: calc(var(--r) * 1.3); background: var(--well); flex: none;
}
.g8-ttab {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .35);
  min-height: calc(var(--u) * 6.6); padding: 0 calc(var(--u) * .2);
  border-radius: var(--r); color: var(--muted); font-size: calc(var(--tu) * 1.15);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.g8-ttab[hidden] { display: none; }
.g8-ttab .i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }
.g8-ttab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.g8-ttab[aria-pressed="true"] { background: var(--raised); color: var(--accent); box-shadow: 0 2px 8px rgba(40, 32, 20, .1); }
.g8-ttab:active { transform: scale(.97); }
/* Dot on a context tab that has just appeared, until it is opened */
.g8-tdot { display: none; position: absolute; top: calc(var(--u) * .7); right: calc(50% - var(--u) * 2.1);
  width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--well); }
.g8-ttab.new .g8-tdot { display: block; }

/* ---- Pages ---------------------------------------------------------------------- */
.g8-tpages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
/* Every page sits in the same place, so the panel keeps the height of the tallest one and
   the tabs and footer never jump as tabs change; only the open page is seen */
.g8-tpages { display: grid; }
.g8-tpage { grid-area: 1 / 1; display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding: calc(var(--u) * .2) calc(var(--u) * .2) calc(var(--u) * .4); visibility: hidden; pointer-events: none; }
.g8-tpage.on { visibility: visible; pointer-events: auto; }
.g8-tpage > .kicker { padding: calc(var(--u) * .5) calc(var(--u) * .4) 0; }
/* Slide in from the side the tab is on */
.g8-tpage.from-right { animation: g8-tslide-r .3s var(--ease); }
.g8-tpage.from-left { animation: g8-tslide-l .3s var(--ease); }
@keyframes g8-tslide-r { from { opacity: 0; transform: translateX(calc(var(--u) * 8)); } to { opacity: 1; transform: none; } }
@keyframes g8-tslide-l { from { opacity: 0; transform: translateX(calc(var(--u) * -8)); } to { opacity: 1; transform: none; } }

/* ---- Tiles: big square tool buttons, icon over the name -------------------------- */
.g8-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * .6); }
.g8-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g8-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g8-tiles[hidden], .g8-tile[hidden] { display: none; }
.btn.g8-tile {
  flex-direction: column; justify-content: center; gap: calc(var(--u) * .5); text-align: center;
  min-height: calc(var(--u) * 8.4); padding: calc(var(--u) * .6) calc(var(--u) * .3); font-size: calc(var(--tu) * 1.25);
}
.btn.g8-tile .i { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); }
.btn.g8-tile[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.btn.g8-tile.tall { min-height: calc(var(--u) * 13); font-size: calc(var(--tu) * 1.45); }
.btn.g8-tile.tall .i { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
.btn:active { transform: scale(.98); }
/* Motion tiles: the icon beats or breathes while it is on */
#tBeat[aria-pressed="true"] .i { animation: g8-tbeat 1s ease-in-out infinite; }
#tBreathe[aria-pressed="true"] .i { animation: g8-tbreathe 4s ease-in-out infinite; }
@keyframes g8-tbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
@keyframes g8-tbreathe { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.08); } }

/* ---- Switch row: a toggle button that reads as a switch (Labels) ------------------ */
.btn.g8-switch { position: relative; background: transparent; padding-right: calc(var(--u) * 8.5); }
.btn.g8-switch::after {
  content: ''; position: absolute; right: calc(var(--u) * .4); top: 50%; transform: translateY(-50%);
  width: calc(var(--u) * 7); height: calc(var(--u) * 4); border-radius: 99px; background: var(--line);
  transition: background var(--dur) var(--ease);
}
.btn.g8-switch::before {
  content: ''; position: absolute; right: calc(var(--u) * 3.75); top: 50%; transform: translateY(-50%); z-index: 1;
  width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(40, 32, 20, .25); transition: right .22s var(--ease);
}
.btn.g8-switch[aria-pressed="true"] { background: transparent; color: var(--ink); }
.btn.g8-switch[aria-pressed="true"]::after { background: var(--accent); }
.btn.g8-switch[aria-pressed="true"]::before { right: calc(var(--u) * .75); }

/* Sliders in the tabbed panel: accent fill and a bigger handle */
.g8-tabbed input[type=range]::-webkit-slider-runnable-track { height: calc(var(--u) * .7); background: linear-gradient(90deg, var(--accent) var(--p, 0%), var(--line) var(--p, 0%)); }
.g8-tabbed input[type=range]::-webkit-slider-thumb { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); margin-top: calc(var(--u) * -1.55); border: 2px solid var(--accent); }
.g8-tabbed input[type=range]::-moz-range-progress { height: calc(var(--u) * .7); background: var(--accent); }
.g8-tabbed input[type=range]::-moz-range-track { height: calc(var(--u) * .7); }
.g8-tabbed input[type=range]::-moz-range-thumb { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); border: 2px solid var(--accent); }

/* ---- Tool options in place of the tiles ------------------------------------------- */
/* Options of a tool that is on show instead of the tiles; "All tools" goes back */
.g8-tpage .box[data-opts] { display: none; }
.g8-tpage.opts .box[data-opts]:not([hidden]) { display: flex; }
.g8-tpage.opts > .g8-tiles, .g8-tpage.opts > .g8-tnote { display: none; }
.btn.g8-tback { width: auto; align-self: flex-start; background: var(--raised); min-height: calc(var(--u) * 5); }
.g8-tnote { margin: 0; padding: 0 calc(var(--u) * .4); font-size: calc(var(--tu) * 1.15); color: var(--faint); line-height: 1.35; }

/* ---- Footer: always there ------------------------------------------------------- */
.g8-tfoot {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--u) * .5);
  padding-top: calc(var(--u) * .9); border-top: 1px solid var(--line); flex: none;
}
.g8-tfoot > [hidden] { display: none; }
.g8-tfoot .btn {
  flex-direction: column; justify-content: center; gap: calc(var(--u) * .3); text-align: center;
  min-height: calc(var(--u) * 6.2); padding: 0 calc(var(--u) * .2); font-size: calc(var(--tu) * 1.1);
}
.g8-tfoot .btn .i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); }
.g8-tfoot .btn.primary { background: var(--ink); color: var(--panel); }

/* Staff buttons sit in the footer row like the others */
.g8-tfoot > .g8-tstaff:not([hidden]) { display: contents; }

/* Dragged near its edge: it docks there when let go (kit/js/panel-layout.js movable) */
.side.near-dock { outline: 3px dashed var(--accent); outline-offset: calc(var(--u) * .4); }
/* Heading: grab bar above the title shows it can be dragged */
.tools.g8-tabbed .thead { position: relative; padding-top: calc(var(--u) * 1.2); cursor: grab; }
.tools.g8-tabbed .thead::before {
  content: ''; position: absolute; top: calc(var(--u) * .1); left: 50%; transform: translateX(-50%);
  width: calc(var(--u) * 5); height: calc(var(--u) * .55); border-radius: 99px; background: var(--line);
}
.tools.g8-tabbed .thead .iconbtn { background: var(--well); }

/* Top row of tool options: All tools, and Stop for a tool that takes over touches (Draw) */
.g8-trow { display: flex; gap: calc(var(--u) * .5); }
.g8-trow .btn.g8-tstop { width: auto; flex: 1 1 auto; justify-content: center; min-height: calc(var(--u) * 5); }