/* GROWLMASTER V2'S UI KIT, ITS LOOK (src/components/growlmaster-v2/ui/), designed like Apple and themed like GrowlMaster
   (step-1-plan.md): every value a token (tokens.css), the page's font and colours at its root, so a kit part looks the
   same wherever it is drawn (a window put on <body>, the gate). Each part is drawn on/off, open/shut or busy by custom
   properties its own state rule sets (ui/stateRule.ts), so a screen's state shows it without the screen styling it:
   --g-on (a tab), --g-open, --g-vis and --g-pe (a window), --g-busy (a button), --g-err-display (a field's error).
   (A media query can't read a token: its one width is 900px.) */
:root { background: var(--g-bg); color: var(--g-text); font-family: var(--g-font); font-size: var(--g-t); font-weight: var(--g-w); line-height: 1.35;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
:root body, :root .site-content { background: var(--g-bg); color: inherit; font: inherit; }
:root :focus, :root :focus-visible { outline: none; } :root :focus-visible { box-shadow: var(--g-ring); }   /* never the browser's own ring, on a tap or after a window closes (Maayan, 2026-11-02) */ :root img { /* never dragged as the browser's ghost */ -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.g-app { min-height: 100dvh; }
/* type: a large title in GrowlMaster's serif; every other word the UI sans in its own size and weight */
.g-large-title { margin: 0; font-family: var(--g-font-display); font-weight: var(--g-w-bold); font-size: var(--g-t-large); line-height: 1.1; letter-spacing: var(--g-track-tight); }
.g-title { margin: 0; font-weight: var(--g-w-bold); font-size: var(--g-t-title2); line-height: 1.2; letter-spacing: var(--g-track-tight); }
.g-headline { margin: 0; font-weight: var(--g-w-semibold); font-size: var(--g-t); }
.g-muted { color: var(--g-text-2); }
.g-quiet { color: var(--g-text-3); font-size: var(--g-t-caption); }
.g-sr { position: absolute; width: var(--g-hair); height: var(--g-hair); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* BUTTON: a filled rounded rectangle; the one accent for the main action; plain: accent words alone (a bar's action) */
.g-btn { --g-busy: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--g-2);
  min-height: var(--g-touch); padding: 0 var(--g-4); border: 0; border-radius: var(--g-r-sm); corner-shape: squircle; font: inherit; font-weight: var(--g-w-semibold);
  text-decoration: none; cursor: pointer; white-space: nowrap; background: var(--g-fill-strong); color: var(--g-text);
  transition: transform var(--g-fast) var(--g-ease), background var(--g-fast) var(--g-ease), opacity var(--g-fast) var(--g-ease); }
.g-btn:active { transform: scale(var(--g-press)); background: var(--g-fill); }
.g-btn:disabled { opacity: .4; cursor: not-allowed; }
.g-btn--primary { background: var(--g-accent); color: var(--g-on-accent); }
.g-btn--primary:active { background: var(--g-accent-pressed); }
.g-btn--plain { background: transparent; color: var(--g-accent); padding: 0 var(--g-2); }
.g-btn--plain:active { background: var(--g-accent-tint); }
.g-btn--danger { background: transparent; color: var(--g-danger); }
.g-btn--lg { min-height: var(--g-touch-lg); font-size: var(--g-t); padding: 0 var(--g-5); }
.g-btn--block { display: flex; width: 100%; }
.g-btn__i { display: inline-grid; line-height: 0; }
.g-btn__i svg { width: var(--g-icon-sm); height: var(--g-icon-sm); }
.g-btn__t, .g-btn__i { opacity: calc(1 - var(--g-busy)); transition: opacity var(--g-fast) var(--g-ease); }
.g-btn__spin { position: absolute; inset: 0; margin: auto; width: var(--g-icon-sm); height: var(--g-icon-sm); border-radius: var(--g-r-round);
  border: var(--g-stroke) solid currentColor; border-right-color: transparent; opacity: var(--g-busy); animation: g-spin var(--g-slow) linear infinite; pointer-events: none; }
@keyframes g-spin { to { transform: rotate(1turn); } }

/* ICON BUTTON: a round 44pt tap, its icon alone (its words for a screen reader) */
.g-iconbtn { display: inline-grid; place-items: center; flex: none; width: var(--g-touch); height: var(--g-touch); padding: 0; border: 0; border-radius: var(--g-r-round);
  background: transparent; color: inherit; cursor: pointer; text-decoration: none; transition: background var(--g-fast) var(--g-ease), transform var(--g-fast) var(--g-ease); }
.g-iconbtn:active { background: var(--g-fill); } .g-iconbtn.is-down { transform: scale(var(--g-bounce)); transition: transform var(--g-fast) var(--g-ease); } .g-iconbtn.is-bounce { animation: g-bounce var(--g-slow) var(--g-ease); } @keyframes g-bounce { 0% { transform: scale(var(--g-bounce)); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
.g-iconbtn svg { width: var(--g-icon); height: var(--g-icon); display: block; }
.g-iconbtn--soft { background: var(--g-fill); }

/* AVATAR: a face (a preset from the sheet, their photo, else their initial); a square for a table's picture */
.g-avatar { --g-size: var(--g-face); position: relative; display: inline-grid; place-items: center; flex: none; width: var(--g-size); height: var(--g-size);
  border-radius: var(--g-r-round); overflow: hidden; background: var(--g-surface-3); color: var(--g-text-2); font-weight: var(--g-w-semibold); }
.g-avatar--xs { --g-size: var(--g-face-xs); font-size: var(--g-t-caption); }
.g-avatar--sm { --g-size: var(--g-face-sm); font-size: var(--g-t-caption); }
.g-avatar--lg { --g-size: var(--g-face-lg); font-size: var(--g-t-title2); }
.g-avatar--xl { --g-size: var(--g-face-xl); font-size: var(--g-t-large); }
.g-avatar--square { border-radius: var(--g-r-sm); corner-shape: squircle; background: var(--g-accent-tint); color: var(--g-accent); }
.g-avatar img { width: 100%; height: 100%; object-fit: cover; }
.g-avatar svg { width: 55%; height: 55%; }
.g-avatar .gm-avatar { width: 100%; height: 100%; display: block; border-radius: inherit; overflow: hidden; }
/* a preset is a frame of GrowlMaster's avatar sheet (sprites.js: its sheet, --cols × --rows, the frame at --col, --row) */
.g-avatar .gm-av { display: block; width: 100%; height: 100%; background-color: var(--av); background-image: var(--src); background-repeat: no-repeat;
  background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  background-position: calc(var(--col) / max(1, var(--cols) - 1) * 100%) calc(var(--row) / max(1, var(--rows) - 1) * 100%);
  transform: scale(var(--g-face-zoom)); transform-origin: 50% 0; }
.g-avatar.is-here { box-shadow: 0 0 0 var(--g-stroke) var(--g-bg), 0 0 0 calc(2 * var(--g-stroke)) var(--g-here); }
.g-faces { display: inline-flex; align-items: center; gap: var(--g-2); min-width: 0; }
.g-faces__row { display: inline-flex; flex: none; }
.g-faces__row > .g-avatar { box-shadow: 0 0 0 var(--g-stroke) var(--g-surface); }
.g-faces__row > .g-avatar + .g-avatar { margin-inline-start: calc(-1 * var(--g-overlap)); }

/* CARD: a raised surface, soft shadow, no border; its picture across its top when it has one */
.g-card { display: flex; align-items: center; gap: var(--g-4); padding: var(--g-4); border-radius: var(--g-r); corner-shape: squircle; background: var(--g-surface);
  color: inherit; text-decoration: none; box-shadow: var(--g-shadow); transition: transform var(--g-fast) var(--g-ease); }
a.g-card:active { transform: scale(var(--g-press)); }
.g-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--g-1); }
.g-card__end { flex: none; color: var(--g-text-3); display: inline-grid; }
.g-card__end svg { width: var(--g-icon-sm); height: var(--g-icon-sm); }
.g-card--media { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.g-card--media > .g-card__body { padding: var(--g-4) var(--g-4) var(--g-5); }

/* LIST: an inset grouped list, as iOS's Settings: one rounded group, rows divided by hairlines inset past their picture */
.g-list { list-style: none; margin: 0; padding: 0; border-radius: var(--g-r); corner-shape: squircle; background: var(--g-surface); overflow: hidden; }
.g-list__head { margin: 0 0 var(--g-2); padding: 0 var(--g-4); color: var(--g-text-3); font-size: var(--g-t-caption); font-weight: var(--g-w-semibold); text-transform: uppercase; letter-spacing: var(--g-track-caps); }
.g-row { position: relative; display: flex; align-items: center; gap: var(--g-3); min-height: var(--g-touch-lg); padding: var(--g-2) var(--g-4); color: inherit; text-decoration: none;
  transition: background var(--g-fast) var(--g-ease); }
a.g-row:active { background: var(--g-fill); }
.g-list > li + li > .g-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--g-row-inset, var(--g-4)); border-top: var(--g-hair) solid var(--g-separator); }
.g-row--media { --g-row-inset: calc(var(--g-4) + var(--g-face-lg) + var(--g-3)); }
.g-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--g-1); }
.g-row__title { font-weight: var(--g-w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-row__value { flex: none; color: var(--g-text-2); }
.g-row__end { flex: none; display: inline-grid; color: var(--g-text-3); }
.g-row__end svg { width: var(--g-icon-sm); height: var(--g-icon-sm); } .g-i-dir:dir(rtl) { transform: scaleX(-1); }   /* right to left: a chevron, back and out point the other way (icons.ts) */
.g-row__act { flex: none; display: flex; align-items: center; gap: var(--g-3); }
/* a value written in place (kit.js inlineValue): v1's ink line under it */
.g-inline { min-width: var(--g-6); outline: none; border-bottom: var(--g-stroke) dotted var(--g-text-3); cursor: text; }
.g-inline:focus { border-bottom-color: var(--g-accent); }
.g-inline:empty::before { content: attr(data-ph); color: var(--g-text-3); }
/* a number's − and + (kit-sheet.js stepper, v1's .gm-step): their own row under it, round, the touch size */
.g-step { display: flex; justify-content: center; gap: var(--g-2); flex-basis: 100%; width: 100%; margin: var(--g-1) 0; }
.g-step__btn { display: grid; place-items: center; width: var(--g-touch); height: var(--g-touch); padding: 0; border-radius: 50%; cursor: pointer; background: var(--g-sheet-2); border: var(--g-sheet-border) solid var(--g-sheet-edge); color: var(--g-ink); }
.g-step__btn svg { width: var(--g-icon-sm); height: var(--g-icon-sm); }

/* FIELD: a filled box, no border; its label above (or only for a screen reader); its error under it when its state says */
.g-field, .g-window .lfield { display: flex; flex-direction: column; gap: var(--g-2); }
.g-field__label, .g-window .lfield > span { font-size: var(--g-t-caption); font-weight: var(--g-w-semibold); color: var(--g-text-2); }
.g-field__input, .g-window .lfield input { min-height: var(--g-touch-lg); padding: 0 var(--g-4); border: 0; border-radius: var(--g-r-sm); corner-shape: squircle;
  background: var(--g-fill); color: var(--g-text); font: inherit; transition: box-shadow var(--g-fast) var(--g-ease), background var(--g-fast) var(--g-ease); }
.g-field__input::placeholder, .g-window .lfield input::placeholder { color: var(--g-text-3); }
.g-field__input:focus, .g-window .lfield input:focus { outline: none; background: var(--g-fill-strong); box-shadow: var(--g-ring); }
.g-field__err { display: var(--g-err-display, none); margin: 0; color: var(--g-danger); font-size: var(--g-t-caption); }

/* HEADER: a translucent bar over what scrolls under it, start | title | end; on parchment inside a table; phoneOnly: a
   wide screen has the rail */
.g-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--g-2); min-height: var(--g-bar); padding: var(--g-1) var(--g-2);
  padding-top: max(var(--g-1), env(safe-area-inset-top, 0px)); box-sizing: border-box; background: var(--g-bar-material);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: 0 var(--g-hair) 0 var(--g-separator); }
.g-header__start, .g-header__end { display: flex; align-items: center; gap: var(--g-1); flex: none; }
.g-header__mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--g-3); }
.g-header--paper { background: var(--g-paper-2); color: var(--g-ink); box-shadow: 0 var(--g-hair) 0 var(--g-paper-separator); }
.g-header--paper .g-iconbtn:active { background: var(--g-paper-separator); }
.g-header--paper .g-quiet { color: var(--g-ink-2); }
.g-header--paper .g-avatar--square { background: var(--g-ink); color: var(--g-paper); }
.g-header--paper .g-faces__row > .g-avatar { box-shadow: 0 0 0 var(--g-stroke) var(--g-paper); }
@media (min-width: 900px) { .g-header--phone { display: none; } }

/* TAB BAR: a phone's translucent bottom bar; a wide screen's sidebar, the logo at its top and its foot (slot "foot") at
   the end; the tab on screen in the accent */
.g-tabbar { position: fixed; z-index: 20; inset: auto 0 0 0; display: flex; justify-content: flex-start; height: calc(var(--g-tabbar) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; padding-top: var(--g-4); padding-bottom: calc(var(--g-4) + env(safe-area-inset-bottom, 0px)); background: var(--g-bg);   /* solid: nothing shows through (Maayan, 2026-11-03) */
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; box-shadow: 0 calc(-1 * var(--g-hair)) 0 var(--g-separator); }
.g-tabbar__logo, .g-tabbar__foot { display: none; }
.g-tab { --g-on: 0; position: relative; flex: 1 0 auto; padding-inline: var(--g-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--g-1); min-width: var(--g-touch);
  border: 0; background: none; font: inherit; font-size: var(--g-t-caption); font-weight: var(--g-w-medium); cursor: pointer;
  color: color-mix(in srgb, var(--g-accent) calc(var(--g-on) * 100%), var(--g-text-3)); transition: color var(--g-mid) var(--g-ease), transform var(--g-fast) var(--g-ease); }
.g-tab:active { transform: scale(var(--g-press)); }
.g-tab__i { display: grid; place-items: center; width: var(--g-icon-box); height: var(--g-icon-box); }
.g-tab__i svg { width: 100%; height: 100%; }
.g-tab .g-avatar { box-shadow: 0 0 0 var(--g-stroke) color-mix(in srgb, var(--g-accent) calc(var(--g-on) * 100%), transparent); }
@media (min-width: 900px) {
  .g-tabbar { inset: 0 auto 0 0; width: var(--g-rail); height: auto; flex-direction: column; justify-content: flex-start; gap: var(--g-1); padding: var(--g-5) var(--g-3);
    box-shadow: var(--g-hair) 0 0 var(--g-separator); }
  .g-tabbar__logo { display: block; padding: 0 var(--g-3) var(--g-5); }
  .g-tabbar__logo img { width: 100%; height: auto; display: block; }
  .g-tabbar__foot { display: flex; flex-direction: column; margin-top: auto; }
  .g-tab { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--g-3); min-height: var(--g-touch); padding: 0 var(--g-3); border-radius: var(--g-r-sm);
    font-size: var(--g-t); background: color-mix(in srgb, var(--g-accent-tint) calc(var(--g-on) * 100%), transparent); }
}

/* TOAST: a line said once, a translucent capsule at the foot, until its ✕ (a box the ✕ is: a tap or Space on it) */
.g-toast { position: fixed; z-index: 40; inset-inline: var(--g-4); bottom: calc(var(--g-tabbar) + var(--g-4) + env(safe-area-inset-bottom, 0px)); margin: 0 auto; max-width: var(--g-window);
  display: flex; align-items: center; gap: var(--g-2); padding: var(--g-1) var(--g-1) var(--g-1) var(--g-4); border-radius: var(--g-r); corner-shape: squircle;
  background: var(--g-window-material); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow-lift); animation: g-toast-in var(--g-slow) var(--g-ease) both; }
.g-toast__text { flex: 1; margin: 0; font-size: var(--g-t-sub); }
.g-toast:has(.g-toast__x:checked) { display: none; }
.g-toast__x { appearance: none; -webkit-appearance: none; margin: 0; background: var(--g-text-2);
  -webkit-mask: var(--g-close-icon) center / var(--g-icon-sm) no-repeat; mask: var(--g-close-icon) center / var(--g-icon-sm) no-repeat; }
@keyframes g-toast-in { from { opacity: 0; transform: translateY(var(--g-3)); } }
@media (min-width: 900px) { .g-toast { bottom: var(--g-5); inset-inline-start: calc(var(--g-rail) + var(--g-4)); } }

/* ── the inside of a table's kit parts (kit-api.md 4) ── */
/* TAB BAR, a phone's only (inside a table: a wide screen has the Sidebar) */
@media (min-width: 900px) { .g-tabbar--phone { display: none; } }
/* SIDEBAR: a wide screen's tabs, grouped by the pane each opens in */
.g-sidebar { flex: none; flex-direction: column; gap: var(--g-1); width: var(--g-rail); padding: var(--g-4) var(--g-3); overflow-y: auto; background: var(--g-surface-2); box-shadow: var(--g-hair) 0 0 var(--g-separator); }
.g-sidebar__group { display: flex; flex-direction: column; gap: var(--g-1); }
.g-sidebar__group + .g-sidebar__group { margin-top: var(--g-4); padding-top: var(--g-4); box-shadow: 0 calc(-1 * var(--g-hair)) 0 var(--g-separator); }
.g-sidebar .g-tab { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--g-3); min-height: var(--g-touch); padding: 0 var(--g-3); border-radius: var(--g-r-sm);
  font-size: var(--g-t); background: color-mix(in srgb, var(--g-accent-tint) calc(var(--g-on) * 100%), transparent); }
/* PAGE HEADER: Back at the start, the title, the actions at the end */
.g-pagehead { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; row-gap: 0; align-items: center; gap: var(--g-2); min-height: var(--g-bar); margin: 0 calc(-1 * var(--g-margin)) var(--g-3);
  padding: var(--g-1) var(--g-3); background: linear-gradient(var(--g-bar-material), var(--g-bar-material)), var(--g-bg); box-shadow: 0 var(--g-hair) 0 var(--g-separator); }
.g-pagehead__back { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--g-1); min-height: var(--g-touch); padding: 0 var(--g-2) 0 0; border: 0; background: none; color: var(--g-accent); font: inherit; cursor: pointer; max-width: 40%; }
.g-pagehead__back[hidden] { display: none; }
.g-pagehead__back > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-pagehead__chev { display: inline-grid; }
.g-pagehead__chev svg { width: var(--g-icon); height: var(--g-icon); }
.g-pagehead__title { flex: 0 1 auto; min-width: min(var(--g-title-min), 100%); align-self: flex-start; line-height: var(--g-touch); margin: 0; font-size: var(--g-t-title3); font-weight: var(--g-w-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-pagehead__back:not([hidden]) + .g-pagehead__title { text-align: center; }
.g-pagehead__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--g-1); flex: 1 1 0; min-width: min(calc(var(--g-touch) * 3 + var(--g-1) * 2), 100%); margin-inline-start: auto; } /* its whole name first (only cut when even three buttons beside it do not fit); buttons that do not fit go down from the start, the end ones (⋯, ✕) staying beside it (kit.js pageHeader orders them) */ .g-pagehead__actions.is-ordered { flex-direction: row-reverse; justify-content: flex-start; }
/* SEGMENTED: one of a few */
/* more options than the width holds (a phone): each keeps its real size and the row scrolls sideways */
.g-seg { display: flex; padding: var(--g-1); border-radius: var(--g-r-sm); background: var(--g-fill); overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; scroll-padding-inline: var(--g-1); }
.g-seg__opt { flex: 1 0 auto; scroll-snap-align: start; padding-inline: var(--g-3); min-height: var(--g-touch); border: 0; border-radius: calc(var(--g-r-sm) - var(--g-1)); background: transparent; color: var(--g-text); font: inherit; font-weight: var(--g-w-medium); cursor: pointer; transition: background var(--g-fast) var(--g-ease); }
.g-seg__opt[aria-pressed="true"] { background: var(--g-surface); box-shadow: var(--g-shadow); font-weight: var(--g-w-semibold); } .g-seg__opt svg { display: block; width: var(--g-icon); height: var(--g-icon); margin-inline: auto; }
/* MENU: the one ⋮ list, over a clear scrim */
.g-menu { position: fixed; inset: 0; z-index: 70; }
.g-menu__scrim { position: absolute; inset: 0; }
.g-menu__list { position: fixed; min-width: var(--g-menu); padding: var(--g-1); border-radius: var(--g-r-sm); background: var(--g-window-material); color: var(--g-text);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow-lift); animation: g-menu-in var(--g-fast) var(--g-ease) both; }
@keyframes g-menu-in { from { opacity: 0; transform: scale(var(--g-press)); } }
.g-menu__item { display: flex; align-items: center; width: 100%; min-height: var(--g-touch); padding: 0 var(--g-3); border: 0; border-radius: calc(var(--g-r-sm) - var(--g-1)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.g-menu__item:hover, .g-menu__item:focus-visible { background: var(--g-fill); box-shadow: none; }
.g-menu__item.is-danger { color: var(--g-danger); }
/* SELECT, SWITCH, SEARCH */
.g-select__input { appearance: none; -webkit-appearance: none; padding-inline-end: var(--g-6); background-image: var(--g-chevron-down); background-repeat: no-repeat; background-position: right var(--g-3) center; background-size: var(--g-icon-sm); }
.g-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--g-3); min-height: var(--g-touch); cursor: pointer; }
.g-switch__text { display: flex; flex-direction: column; gap: var(--g-1); min-width: 0; }
.g-switch__input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: calc(var(--g-touch) + var(--g-2)); height: calc(var(--g-touch) * .64); margin: 0; border-radius: var(--g-r-round);
  background: var(--g-fill-strong); cursor: pointer; transition: background var(--g-mid) var(--g-ease); }
.g-switch__input::after { content: ""; position: absolute; top: var(--g-stroke); left: var(--g-stroke); width: calc(var(--g-touch) * .64 - 2 * var(--g-stroke)); aspect-ratio: 1; border-radius: var(--g-r-round);
  background: var(--g-surface); box-shadow: var(--g-shadow); transition: transform var(--g-mid) var(--g-ease); }
.g-switch__input:checked { background: var(--g-here); }
.g-switch__input:checked::after { transform: translateX(calc(var(--g-touch) + var(--g-2) - var(--g-touch) * .64)); }
.g-search { display: flex; align-items: center; gap: var(--g-2); min-height: var(--g-touch); padding: 0 var(--g-3); border-radius: var(--g-r-sm); background: var(--g-fill); color: var(--g-text-3); }
.g-search__i svg { width: var(--g-icon-sm); height: var(--g-icon-sm); display: block; }
.g-search__input { flex: 1; min-width: 0; min-height: var(--g-touch); border: 0; background: none; color: var(--g-text); font: inherit; }
.g-search__input:focus { outline: none; }
/* EMPTY: what is not here yet, and its first action */
.g-empty { display: flex; flex-direction: column; align-items: center; gap: var(--g-3); padding: var(--g-6) var(--g-4); text-align: center; color: var(--g-text-2); }
.g-empty__text { margin: 0; }
/* PICTURE SLOT, PIN */
.g-picture { position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--g-r); overflow: hidden; background: var(--g-fill); color: var(--g-text-3); }
.g-picture__img { width: 100%; height: 100%; object-fit: cover; }
.g-picture__img[hidden], .g-picture__none[hidden], .g-picture__change[hidden], .g-picture__busy[hidden] { display: none; }
.g-picture__none svg { width: var(--g-face-lg); height: var(--g-face-lg); }
.g-picture.is-tappable, .g-picture__img.is-tappable { cursor: pointer; }
/* a picture being drawn: v1's ring and its word over the slot, nothing to tap until it is kept */
.g-picture__busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--g-2); background: var(--g-sheet-2); color: var(--g-ink-2); font-weight: var(--g-w-semibold); }
.g-picture__spin { width: var(--g-icon); height: var(--g-icon); border-radius: var(--g-r-round); border: var(--g-stroke) solid currentColor; border-right-color: transparent; animation: g-spin var(--g-slow) linear infinite; }
.g-picture.is-busy .g-picture__change { display: none; }
.g-picwin { display: flex; flex-direction: column; gap: var(--g-3); }
/* v1's corner pencil: light, so it reads over any picture */
.g-picture__change { position: absolute; inset-inline-end: var(--g-2); bottom: var(--g-2); display: grid; place-items: center; width: var(--g-touch); height: var(--g-touch); padding: 0;
  border: var(--g-stroke) solid var(--g-sheet-edge); border-radius: var(--g-r-round); background: var(--g-sheet); color: var(--g-ink); cursor: pointer; box-shadow: var(--g-shadow); }
.g-picture__change svg { width: var(--g-icon-sm); height: var(--g-icon-sm); }
/* THE PIN: v1's GrowlMaster pin, a shut eye; open and filled while it is presented. On a picture and a card, in their
   top corner, light so it reads over the picture */
.g-pin__ico { display: block; width: var(--g-icon); height: var(--g-icon); background: currentColor;
  -webkit-mask: url(/growlmaster/icons/pin-closed.svg) center / contain no-repeat; mask: url(/growlmaster/icons/pin-closed.svg) center / contain no-repeat; }
.g-pin[aria-pressed="true"] { color: var(--g-pin-on-ink); background: var(--g-pin-on); }
.g-pin[aria-pressed="true"] .g-pin__ico { -webkit-mask-image: url(/growlmaster/icons/pin-open.svg); mask-image: url(/growlmaster/icons/pin-open.svg); }
.g-picture__pin { position: absolute; top: var(--g-2); inset-inline-start: var(--g-2); z-index: 1; }
.g-picture__pin:empty { display: none; }
.g-picture__pin .g-pin, .g-thingcard__pin { border: var(--g-stroke) solid var(--g-sheet-edge); background: var(--g-sheet); color: var(--g-ink); box-shadow: var(--g-shadow); }
.g-thingcard__pin { position: absolute; top: var(--g-4); inset-inline-start: var(--g-4); }
.g-picture__pin .g-pin[aria-pressed="true"], .g-thingcard__pin[aria-pressed="true"] { color: var(--g-pin-on-ink); background: var(--g-pin-on); border-color: var(--g-pin-on); }
/* SHEET: a thing's frame and its pages */
.g-sheet { display: flex; flex-direction: column; }
.g-sheet__body { display: flex; flex-direction: column; gap: var(--g-4); }
.g-sheetpage { display: flex; flex-direction: column; gap: var(--g-4); padding: var(--g-4); border-radius: var(--g-r); background: var(--g-surface); box-shadow: var(--g-shadow); }
/* THING CARD, THING LIST */
.g-thinglist[data-layout="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-card-min), 1fr)); gap: var(--g-3); }
.g-thinglist[data-layout="rows"] { display: flex; flex-direction: column; gap: var(--g-3); }
.g-thingcard { display: flex; flex-direction: column; align-items: stretch; gap: var(--g-2); width: 100%; padding: var(--g-3); border: 0; border-radius: var(--g-r); background: var(--g-surface);
  color: inherit; font: inherit; text-align: start; cursor: pointer; box-shadow: var(--g-shadow); transition: transform var(--g-fast) var(--g-ease); }
.g-thingcard:active { transform: scale(var(--g-press)); }
.g-thingcard__pic .g-avatar { width: 100%; height: auto; aspect-ratio: 1; } .g-thingcard__pic { aspect-ratio: 1; overflow: hidden; border-radius: var(--g-r-sm); } .g-thingcard__pic > :not(.g-thingcard__dot) { width: 100%; height: 100%; object-fit: cover; }   /* every card one height */
.g-thingcard__body { display: flex; flex-direction: column; gap: var(--g-1); min-width: 0; }
.g-thingcard__name { font-weight: var(--g-w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-thingcard__box { position: relative; display: flex; } .g-thingcard__box > .g-thingcard { flex: 1; }
/* a status on a card (kit.js thingCard status): a gold dot on its picture, a thin bar under its facts */
.g-thingcard__pic { position: relative; } /* an adventure: its cover, a little book (pages under it), its name under it; no card, no pin */ .g-thingcard[data-kind="adventure"] { background: none; box-shadow: none; padding: 0; text-align: center; } .g-thingcard[data-kind="adventure"] .g-thingcard__pic { aspect-ratio: 210 / 297; border-radius: 0; overflow: visible; box-shadow: 0 var(--g-hair) 0 var(--g-sheet-edge), 0 var(--g-1) 0 var(--g-paper), 0 calc(var(--g-1) + var(--g-hair)) 0 var(--g-sheet-edge), var(--g-shadow); } .g-thingcard[data-kind="adventure"] .g-thingcard__pic .g-avatar { aspect-ratio: auto; height: 100%; border-radius: 0; } .g-thingcard[data-kind="adventure"] .g-thingcard__pic img { object-fit: cover; } .g-thingcard__box:has(> .g-thingcard[data-kind="adventure"]) .g-pin { display: none; } .g-thingcard[data-kind="adventure"] .g-thingcard__facts:empty { display: none; } .g-thingcard__facts { min-height: 1lh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-thingcard__dot:not([hidden]) { position: absolute; top: var(--g-2); inset-inline-end: var(--g-2); width: var(--g-3); height: var(--g-3); border-radius: var(--g-r-round); background: var(--g-accent); box-shadow: 0 0 0 var(--g-stroke) var(--g-surface); }
.g-thingcard__bar:not([hidden]) { display: block; height: var(--g-1); border-radius: var(--g-r-round); background: var(--g-fill-strong); overflow: hidden; }
.g-thingcard__bar > i { display: block; height: 100%; width: calc(var(--g-progress, 0) * 100%); background: var(--g-accent); }
.g-thingcard__more { position: absolute; top: var(--g-1); inset-inline-end: var(--g-1); background: var(--g-window-material); }
.g-row.is-tappable { cursor: pointer; }
.g-row__more { margin-inline-start: auto; }
/* a tap: a plain button around what it holds (a header's chip); its focus ring is everyone's */
.g-tap { min-width: 0; display: flex; align-items: center; gap: var(--g-3); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: var(--g-r-sm); } /* the kit's floating bar (kit-windows.js floatBar): a pill of tools over a board's foot, in the middle; dragged anywhere over it */ .g-floatbar { position: absolute; bottom: var(--g-4); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: var(--g-1); max-width: calc(100% - var(--g-4)); padding: var(--g-1) var(--g-2); border-radius: var(--g-r-round); background: var(--g-surface); box-shadow: var(--g-shadow); overflow-x: auto; overflow-y: hidden; cursor: grab; touch-action: none; } .g-floatbar[style*="top"] { bottom: auto; transform: none; } .g-floatbar[data-dragging] { cursor: grabbing; box-shadow: var(--g-shadow-lift); }