/* Hyde's Project Zomboid Tool-Kit — app shell and control kit.
   Loaded by the two tools only; the landing page takes tokens alone.

   SURFACE — this file opens by overriding the neutral ramp from
   hc-tokens.css. The tools sit in the game's own register: warm near-black
   grounds, bone text, gold for the thing you are looking at, olive for the
   thing you have collected, rust for the thing that went wrong. Brand blue and
   orange are untouched, because the landing page and every mod page read the
   same token file and must not move.

   Nothing here is lifted from the game. The grain, the bevels and the plating
   are gradients; the type is the system stack. Only the art the tools display
   belongs to The Indie Stone, which the About note says out loud.

   SHELL CONTRACT — both tools use this markup so they read as one product:

     <div class="hc-app hc-app--rail">        rail | inspector | neither
       <header class="hc-bar">               ONE slim row: identity + status
         <a class="hc-btn hc-btn--ghost">&larr;</a>
         <a class="hc-bar__brand"><b>HydeCo.</b><span>EZ-PZ-TILES</span></a>
         ...mode segment...
         <span class="hc-bar__spacer"></span>
         <span class="hc-status">59 tiles</span>
         ...Keys...  ...About...
       </header>
       <div class="hc-hint">                 optional, dismissible
       <div class="hc-grow">                 the ONE pane that takes the slack
         ...rail | work surface | inspector...
       </div>
       ...tray...
       <div class="hc-dock-rail">            centres the dock on the pane
         <div class="hc-dock">               floats over the work surface
           <div class="hc-dock__group">...</div>
           <div class="hc-dock__group">...</div>
         </div>
       </div>
     </div>

   The work controls used to live in a second toolbar row. They float now, so
   the top edge carries identity only and the grid owns the rest of the page. */

:root {
  /* -- ground: warm, not blue ------------------------------------------- */
  --hc-bg-0:       #0B0A08;   /* page                                      */
  --hc-bg-1:       #131110;   /* inset: inputs, wells                      */
  --hc-bg-2:       #1A1815;   /* panels, rails, trays                      */
  --hc-bg-3:       #262119;   /* raised: buttons at rest, hovered rows      */
  --hc-line:       #332D24;
  --hc-line-2:     #4A4132;
  --hc-void:       #070605;   /* behind sprites                            */
  --hc-ink:        #E6DFCD;   /* bone                                      */
  --hc-ink-2:      #C6BDA8;
  --hc-ink-dim:    #8B8271;
  --hc-ink-dimmer: #5E5747;

  /* -- state: still one meaning each, retuned ---------------------------- */
  --hc-focus:      #E0A33C;   /* CURRENT                                   */
  --hc-focus-hi:   #F7CE83;
  --hc-focus-ink:  #171003;
  --hc-hover:      #7BA8C9;   /* HOVERABLE + metadata key                  */
  --hc-hover-ring: rgba(123,168,201,.18);
  --hc-pick:       #93B455;   /* COLLECTED + go                            */
  --hc-pick-ink:   #F1F8DC;
  --hc-pick-dim:   #A3B478;
  --hc-bad:        #CC6046;
  --hc-bad-bg:     rgba(204,96,70,.12);

  --hc-ring-current: 0 0 0 2px rgba(224,163,60,.42);
  --hc-ring-pick:    0 0 0 2px rgba(147,180,85,.48);
  --hc-checker: repeating-conic-gradient(#241f19 0 25%, #191511 0 50%) 0 0 / 16px 16px;

  /* Chrome only. A grain over a scrolling grid is paint work per frame for
     something nobody can see at 46%. */
  --hc-grain: repeating-linear-gradient(45deg,
              rgba(255,240,214,.016) 0 1px, transparent 1px 3px);
  --hc-plate: linear-gradient(180deg, #211D18, #14120F);
  --hc-bevel: inset 0 1px 0 rgba(255,232,190,.07);

  /* -- chrome sizing ------------------------------------------------------ */
  --hc-bar-h:      52px;   /* was 44: a hairline on a 2560-wide screen      */
  --hc-dock-h:     52px;
  --hc-dock-gap:   16px;
  --hc-control-h:    32px;
  --hc-control-h-sm: 28px;
  --hc-tray-h:       52px;
  --hc-rail-w:      264px;
  --hc-inspector-w: 320px;
  /* every floating thing measures from here, so one tray change moves them all */
  --hc-float-base: calc(var(--hc-tray-h) + var(--hc-dock-gap));
}

*, *::before, *::after { box-sizing: border-box }

html, body { height: 100%; margin: 0 }
@supports (height: 100dvh) { html, body { height: 100dvh } }

body {
  background: var(--hc-bg-0);
  color: var(--hc-ink);
  font: var(--hc-fs-body)/var(--hc-lh) var(--hc-font);
  overflow: hidden;                 /* the app shell scrolls its own panes */
}

::-webkit-scrollbar { width: 11px; height: 11px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb {
  background: var(--hc-line);
  border: 3px solid var(--hc-bg-0);
  border-radius: var(--hc-r);
}
::-webkit-scrollbar-thumb:hover { background: var(--hc-line-2) }

/* ---- app shell ---------------------------------------------------------- */

/* A column flexbox, NOT `grid-template-rows: auto 1fr auto`. Those three rows
   were assigned by position, so the moment a fourth child existed -- the hint
   strip sitting between the bar and the body -- the 1fr landed on the HINT and
   the body dropped into an implicit auto row that collapsed to zero. The hint
   then swelled to eat every pixel the panes gave back, which is what filtering
   the grid made so obvious. The growing pane says so itself now, and the shell
   no longer cares how many children there are or what order they come in. */
.hc-app {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hc-app > * { flex: 0 0 auto }
.hc-app > .hc-grow { flex: 1 1 auto; min-height: 0 }

/* ---- the bar: one row, identity only ------------------------------------ */

.hc-bar {
  position: relative;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: var(--hc-s2);
  height: var(--hc-bar-h);
  padding: 0 var(--hc-s3);
  background: var(--hc-plate), var(--hc-grain);
  border-bottom: 1px solid #000;
  box-shadow: var(--hc-bevel), 0 1px 0 var(--hc-line-2), var(--hc-shadow-1);
}
.hc-bar > * { flex: 0 0 auto }
.hc-bar {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.hc-bar::-webkit-scrollbar { height: 0 }
.hc-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--hc-rule);
}
.hc-bar__spacer { flex: 1 1 auto !important; min-width: var(--hc-s2) }

.hc-bar__brand {
  display: flex;
  align-items: baseline;
  gap: var(--hc-s2);
  height: 22px;
  padding-right: var(--hc-s3);
  margin-right: var(--hc-s1);
  border-right: 1px solid var(--hc-line-2);
  text-decoration: none;
}
.hc-bar__brand b {
  font-size: var(--hc-fs-md);
  font-weight: 800;
  letter-spacing: var(--hc-track-tight);
  background: linear-gradient(180deg, #fff, var(--hc-brand-orange-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hc-bar__brand span {
  font-size: var(--hc-fs-micro);      /* was the 10px eyebrow: too small to
                                         be the thing that names the tool */
  font-weight: 700;
  letter-spacing: var(--hc-track-brand);
  text-transform: uppercase;
  color: var(--hc-ink-dim);
}

.hc-status {
  font-size: var(--hc-fs-micro);
  color: var(--hc-ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hc-status b { color: var(--hc-ink); font-weight: 700 }

/* ---- the dock: work controls, floating over the surface ----------------- *
   Fixed rather than in flow, so no pane has to reserve room for it and no
   pane can push it off screen. Centred on the WORK AREA, not the window --
   a rail on one side would otherwise leave it visibly off-centre. */

/* A full-width rail centres the dock; the dock itself is an ordinary flex
   child. This is not decoration -- an absolutely positioned dock is sized by
   shrink-to-fit, and shrink-to-fit measures "available width" as the
   containing block minus `left`. Offset to the middle of the work surface,
   that left is 772px, so the browser offered the dock 508px of a 1280 window
   and wrapped it into three rows while 992px sat unused beside it. As a flex
   child the band is simply the rail's content box, which is the pane. */

.hc-dock-rail {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--hc-float-base);
  z-index: var(--z-sticky);
  display: flex;
  justify-content: center;
  padding: 0 var(--hc-s3);
  pointer-events: none;          /* an invisible strip must not eat grid clicks */
}
.hc-app--rail      .hc-dock-rail { padding-left:  calc(var(--hc-rail-w) + var(--hc-s3)) }
.hc-app--inspector .hc-dock-rail { padding-right: calc(var(--hc-inspector-w) + var(--hc-s3)) }

.hc-dock {
  pointer-events: auto;
  display: flex;
  align-items: center;
  /* WRAPS rather than scrolls. A dock that scrolls horizontally hides controls
     with no sign they exist, which is the exact failure the old toolbar had.
     Wrapping changes its height, so HC.dockFit measures it back into
     --hc-dock-h and the panes' bottom padding follows on its own. */
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--hc-s1);
  min-height: var(--hc-dock-h);
  padding: var(--hc-s1);
  background: linear-gradient(180deg, rgba(34,30,25,.95), rgba(17,15,12,.95));
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid var(--hc-line-2);
  border-radius: var(--hc-r-lg);
  box-shadow: var(--hc-shadow-3), var(--hc-bevel);
}

.hc-dock__group {
  display: flex;
  align-items: center;
  gap: var(--hc-s2);
  padding: 0 var(--hc-s3);
}
.hc-dock__group + .hc-dock__group { border-left: 1px solid var(--hc-line) }
.hc-dock__group.is-off { opacity: .4; pointer-events: none }

/* the label is a hint, not a heading -- it sits inline and stays quiet */
.hc-dock__label {
  font: 700 var(--hc-fs-eyebrow)/1 var(--hc-font);
  letter-spacing: var(--hc-track-cap);
  text-transform: uppercase;
  color: var(--hc-ink-dimmer);
  white-space: nowrap;
}

/* ---- controls ----------------------------------------------------------- */

.hc-bar button, .hc-bar input, .hc-bar select,
.hc-dock button, .hc-dock input, .hc-dock select, .hc-btn {
  height: var(--hc-control-h);
  padding: 0 var(--hc-s3);
}

.hc-btn, .hc-bar button, .hc-dock button,
.hc-mtabs button, .hc-panel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, var(--hc-bg-3), var(--hc-bg-2));
  color: var(--hc-ink);
  border: 1px solid var(--hc-line-2);
  border-radius: var(--hc-r);
  font: 600 var(--hc-fs-body)/1 var(--hc-font);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--hc-bevel);
  transition: border-color var(--hc-t-fast), background var(--hc-t-fast),
              color var(--hc-t-fast);
}
.hc-btn:hover, .hc-bar button:hover, .hc-dock button:hover,
.hc-mtabs button:hover, .hc-panel button:hover {
  border-color: var(--hc-focus);
  color: var(--hc-focus-hi);
}
.hc-btn:focus-visible, .hc-bar button:focus-visible, .hc-dock button:focus-visible,
.hc-mtabs button:focus-visible, .hc-panel button:focus-visible,
.hc-bar input:focus-visible, .hc-bar select:focus-visible,
.hc-dock input:focus-visible, .hc-dock select:focus-visible {
  outline: none;
  box-shadow: var(--hc-ring-focus);
}
.hc-btn.on, .hc-bar button.on, .hc-dock button.on,
.hc-mtabs button.on, .hc-panel button.on {
  background: linear-gradient(180deg, var(--hc-focus), #B87C22);
  border-color: var(--hc-focus-hi);
  color: var(--hc-focus-ink);
}
.hc-btn.go, .hc-bar button.go, .hc-dock button.go {
  background: linear-gradient(180deg, var(--hc-pick), #6C8C36);
  border-color: var(--hc-pick);
  color: #101B04;
}
.hc-btn:disabled, .hc-bar button:disabled, .hc-dock button:disabled,
.hc-mtabs button:disabled, .hc-panel button:disabled {
  opacity: .42;
  cursor: default;
}
.hc-btn:disabled:hover, .hc-bar button:disabled:hover, .hc-dock button:disabled:hover {
  border-color: var(--hc-line-2);
  color: var(--hc-ink);
}
.hc-btn--ghost {
  width: var(--hc-control-h);
  padding: 0;
  font-size: var(--hc-fs-md);
}

/* A LABELLED button, for links that carry a word rather than a glyph.
   hc-btn--ghost is a fixed 32px square and silently clips anything longer
   than one character -- which is what turned the sibling tool link into
   "EZ-PZ-Til". This sizes to its content and never shrinks. */
.hc-btn--label {
  width: auto;
  flex: 0 0 auto;
  padding: 0 var(--hc-s3);
  white-space: nowrap;
  font-size: var(--hc-fs-body);
  font-weight: 600;
}

/* A select sized to its longest option is 300px of dock for one property name.
   This cap used to live on `#bar select` in the tiles tool and stopped applying
   the moment the controls moved out of the bar. */
.hc-bar select, .hc-dock select { max-width: 168px; text-overflow: ellipsis }
.hc-dock input[type=search] { width: 210px }

.hc-bar input, .hc-bar select, .hc-dock input, .hc-dock select {
  background: var(--hc-bg-1);
  color: var(--hc-ink);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r);
  font: var(--hc-fs-body)/1 var(--hc-font);
}
.hc-bar input:focus, .hc-bar select:focus,
.hc-dock input:focus, .hc-dock select:focus {
  outline: none;
  border-color: var(--hc-hover);
  box-shadow: var(--hc-ring-focus);
}

.hc-seg {
  display: inline-flex;
  height: var(--hc-control-h);
  padding: var(--hc-s0);
  gap: var(--hc-s0);
  background: var(--hc-bg-1);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r);
}
.hc-seg button { height: 26px; padding: 0 14px; border: none; background: transparent; box-shadow: none }

.hc-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--hc-r-pill);
  border: 1px solid var(--hc-line);
  background: var(--hc-bg-1);
  color: var(--hc-ink-dim);
  font-size: var(--hc-fs-micro);
  white-space: nowrap;
}
.hc-pill b { color: var(--hc-pick); font-weight: 700; margin-left: 4px }

.hc-kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid var(--hc-line-2);
  border-bottom-width: 2px;
  border-radius: var(--hc-r-sm);
  background: var(--hc-bg-1);
  color: var(--hc-ink-dim);
  font: var(--hc-fs-micro)/1.5 var(--hc-mono);
}

/* ---- zoom: a stepper on a fixed ladder, not a free slider --------------- *
   Continuous zoom made every drag land between two clean layouts and the grid
   reflowed the whole way there. The steps are chosen per tool so each one is a
   whole number of screen pixels per source pixel. */

.hc-zoom { display: inline-flex; align-items: center; gap: var(--hc-s0) }
.hc-zoom button { width: 28px; padding: 0; font-size: var(--hc-fs-md) }
.hc-zoom output {
  min-width: 46px;
  padding: 0 var(--hc-s1);
  font: 700 var(--hc-fs-micro)/1 var(--hc-mono);
  color: var(--hc-focus);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* the ladder, drawn: one notch per stop, the current one lit */
.hc-steps { display: inline-flex; align-items: center; gap: 3px; padding: 0 var(--hc-s1) }
.hc-steps i {
  display: block;
  width: 3px; height: 10px;
  border-radius: 1px;
  background: var(--hc-line-2);
  cursor: pointer;
  transition: background var(--hc-t-fast), height var(--hc-t-fast);
}
.hc-steps i:hover { background: var(--hc-ink-dim) }
.hc-steps i.on { background: var(--hc-focus); height: 16px }

/* ---- the work surface --------------------------------------------------- *
   Off-screen cells are the whole performance story. With thousands of them in
   one container the browser restyled and repainted every single one on every
   scroll frame -- 14ms of style recalc against a 16.7ms budget, which is the
   drag you feel. content-visibility hands it permission to skip what nobody
   can see, and takes that 14ms to 0.04ms. It is only safe because the cell
   carries an EXACT intrinsic size; a guess makes the scrollbar jump. */

.hc-surface {
  position: relative;
  overflow: auto;
  min-height: 0;
  /* the dock floats over the bottom of this pane, so the last row clears it --
     its MEASURED height, since it wraps on a narrow window */
  padding-bottom: calc(var(--hc-dock-real, var(--hc-dock-h)) + var(--hc-dock-gap) * 2);
}
.hc-cell {
  content-visibility: auto;
  contain: layout paint style;
}
/* No hover work while the wheel is turning. Sweeping the cursor over a hundred
   cells mid-scroll queued a hundred restyles, and they landed late -- the tiles
   appeared to lag behind the scroll. */
.hc-scrolling { pointer-events: none }

/* ---- hint strip --------------------------------------------------------- */

.hc-hint {
  display: flex;
  align-items: center;
  gap: var(--hc-s2);
  padding: 3px var(--hc-s4);
  background: var(--hc-bg-2);
  border-bottom: 1px solid var(--hc-line);
  color: var(--hc-ink-dim);
  font-size: var(--hc-fs-micro);
}
.hc-hint b { color: var(--hc-ink-2); font-weight: 600 }
.hc-hint .x {
  margin-left: auto;
  height: 20px; width: 20px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.hc-hint.off { display: none }

/* ---- keys panel --------------------------------------------------------- *
   The button lives in the bar now. The bar is one short row that cannot
   overflow, which is what sent it to a floating corner in the first place. */

.hc-keys {
  position: fixed;
  right: var(--hc-s4);
  top: calc(var(--hc-bar-h) + var(--hc-s2));
  z-index: var(--z-popover);
  width: 330px;
  max-height: 72vh;
  overflow: auto;
  padding: var(--hc-s4);
  background: var(--hc-bg-2);
  border: 1px solid var(--hc-line-2);
  border-radius: var(--hc-r-lg);
  box-shadow: var(--hc-shadow-3), var(--hc-bevel);
}
.hc-keys[hidden] { display: none }
.hc-keys h4 {
  margin: var(--hc-s3) 0 var(--hc-s1);
  font: 700 var(--hc-fs-eyebrow)/1.2 var(--hc-font);
  letter-spacing: var(--hc-track-cap);
  text-transform: uppercase;
  color: var(--hc-focus);
}
.hc-keys h4:first-child { margin-top: 0 }
.hc-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--hc-s2); margin: 0 }
.hc-keys dt { text-align: right; white-space: nowrap }
.hc-keys dd { margin: 0; color: var(--hc-ink-dim); font-size: var(--hc-fs-micro) }

/* ---- toast -------------------------------------------------------------- */

.hc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--hc-float-base) + var(--hc-dock-real, var(--hc-dock-h)) + var(--hc-s3));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: var(--hc-s2) var(--hc-s4);
  border-radius: var(--hc-r-pill);
  background: rgba(11,10,8,.95);
  border: 1px solid var(--hc-focus);
  color: var(--hc-focus-hi);
  font-size: var(--hc-fs-body);
  box-shadow: var(--hc-shadow-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hc-t);
}
.hc-toast.on { opacity: 1 }

/* ---- empty / loading state ---------------------------------------------- */

.hc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hc-s3);
  padding: var(--hc-s6);
  color: var(--hc-ink-dim);
  text-align: center;
}
.hc-empty b { color: var(--hc-ink); font-size: var(--hc-fs-md) }
.hc-spin {
  width: 26px; height: 26px;
  border: 2px solid var(--hc-line);
  border-top-color: var(--hc-focus);
  border-radius: 50%;
  animation: hc-spin .8s linear infinite;
}
@keyframes hc-spin { to { transform: rotate(360deg) } }

/* ---- narrow screens ------------------------------------------------------
   Target is "does not break badly", not a mobile build — the audience is
   modders at desks. */

@media (max-width: 1200px) {
  :root { --hc-rail-w: 220px; --hc-inspector-w: 280px }
  .hc-dock__label { display: none }
}

@media (max-width: 900px) {
  :root { --hc-bar-h: 46px; --hc-dock-gap: 10px }
  /* the inspector is hidden at this width, so the band is the whole window */
  .hc-app--inspector .hc-dock-rail { padding-right: var(--hc-s3) }
}

@media (max-width: 620px) {
  .hc-bar__brand span { display: none }
  .hc-optional { display: none !important }
}

@media (prefers-reduced-motion: reduce) {
  .hc-btn, .hc-bar button, .hc-dock button, .hc-toast, .hc-steps i { transition: none }
  .hc-spin { animation: none }
}


/* ---- phones and small screens -------------------------------------------
   Written after opening both tools on a 375px phone and finding neither
   usable: the identity row clipped its own controls off the screen, and both
   tools' side panes are fixed-width, so on a narrow screen the pane the
   person came to look at was squeezed to a sliver or pushed off entirely.

   The rule these follow: a narrow screen shows ONE pane at a time and says
   which, rather than showing three badly. Each tool declares its panes; this
   file styles the switcher and the sheet. */

/* A pane switcher. Tools fill it; it is empty and invisible until they do. */
.hc-mtabs {
  display: none;
  gap: 4px;
  padding: 5px 8px;
  background: var(--hc-bg-1, #121519);
  border-bottom: 1px solid var(--hc-line, #2b323c);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hc-mtabs::-webkit-scrollbar { height: 0 }
.hc-mtabs button {
  flex: 1 0 auto;
  min-height: 36px;
  padding: 6px 14px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
}

/* THE CONTROL PANEL. On a desktop it floats as a pill over the work surface;
   on a phone it is the bottom bar, full width, above everything. It is the
   same element either way -- one owner for the row, so two readouts can never
   land on the same pixels. */
.hc-panel {
  display: flex;
  align-items: center;
  gap: 9px;
}
.hc-panel__name {
  font: 600 12px/1.2 var(--hc-font, inherit);
  color: var(--hc-ink, #eef1f6);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hc-panel__name:empty { display: none }
.hc-panel .hc-sep { width: 1px; height: 20px; background: var(--hc-line-2, #39424f); opacity: .8 }

@media (max-width: 860px) {
  /* the switcher exists only here; above this width every pane is on screen */
  .hc-mtabs.on { display: flex }

  /* One pane at a time. A tool marks its panes .hc-pane and the shell hides
     the ones the switcher is not showing. A revealed pane comes back as the
     display it already had -- a scroll container with a sticky header is not
     a flex row, and forcing one re-lays out everything inside it -- so the
     pane declares its own via --hc-pane-display and this only decides
     whether it is showing at all. */
  .hc-pane { display: none !important }
  .hc-pane.on { display: var(--hc-pane-display, block) !important }

  .hc-bar { height: auto; min-height: 46px; padding: 0 8px; gap: 6px }
  .hc-bar__brand { padding-right: 8px; margin-right: 0 }
  .hc-bar__brand span { display: none }
  /* the sibling-tool links are the first thing to go: they are navigation,
     and the back arrow already reaches them */
  .hc-bar .hc-btn--label { display: none }
}

/* ---- touch --------------------------------------------------------------
   A coarse pointer cannot hit a 24px control, and hover states are a lie on
   a device with no cursor -- a tapped button stays "hovered" until something
   else is tapped, which reads as the wrong thing being selected. */

@media (pointer: coarse) {
  .hc-btn, .hc-bar button, .hc-dock button, .hc-panel button {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .hc-bar input, .hc-bar select, .hc-dock input, .hc-dock select { min-height: 38px }
  .hc-btn:hover, .hc-bar button:hover, .hc-dock button:hover {
    border-color: var(--hc-line-2);
    color: inherit;
    background: var(--hc-bg-3, #1f242c);
  }
  /* a 3px-inset thumb inside an 11px track is 5px of grabbable bar */
  ::-webkit-scrollbar { width: 8px; height: 8px }
  ::-webkit-scrollbar-thumb { border-width: 2px }
}

/* ---- keyboard -----------------------------------------------------------
   The grids are composite widgets: Tab reaches the grid, the arrows move
   inside it. That needs a visible ring on the cell the keyboard is on, and it
   must not be the hover ring -- "where the mouse is" and "where the keyboard
   is" are different questions. */

.hc-roving:focus { outline: none }
.hc-roving:focus-visible {
  outline: 2px solid var(--hc-focus, #ffb648);
  outline-offset: 2px;
}

/* ---- a scrolling row that admits it --------------------------------------
   The scrollbar is hidden on purpose (an 11px bar in a 46px row reads as two
   rows), so the fade and the chevrons are what is left to say "there is more
   this way". Both are keyed to whether that end really has more, so a row
   that fits shows neither. */

.hc-row { position: relative }
.hc-row__scroll {
  display: flex;
  align-items: center;
  gap: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  min-width: 0;
  flex: 1 1 auto;
}
.hc-row__scroll::-webkit-scrollbar { height: 0 }
/* NO scroll-behavior HERE, deliberately. It applies to programmatic
   scrolling as well as anchors, so it captures the chevron's own
   `scrollLeft` assignment and turns it back into an animation request --
   which is precisely what does nothing wherever the browser will not
   animate. The row jumps, and the button always works. */
.hc-row__scroll > * { flex: 0 0 auto }

/* the fade sits over the row's own background, so it is drawn from the
   panel colour rather than a guess at it */
.hc-row::before, .hc-row::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 42px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s var(--hc-ease, ease);
  z-index: 2;
}
.hc-row::before {
  left: 0;
  background: linear-gradient(90deg, var(--hc-row-bg, #171b21), transparent);
}
.hc-row::after {
  right: 0;
  background: linear-gradient(270deg, var(--hc-row-bg, #171b21), transparent);
}
.hc-row--more-l::before, .hc-row--more-r::after { opacity: 1 }

.hc-row .hc-row__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  width: 26px;
  min-width: 26px;
  height: 30px;
  padding: 0;
  line-height: 1;
  font-size: 17px;
  border-radius: 7px;
  background: var(--hc-bg-3, #1f242c);
  border: 1px solid var(--hc-line-2, #39424f);
  color: var(--hc-ink, #eef1f6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.hc-row__arrow--l { left: 3px }
.hc-row__arrow--r { right: 3px }
.hc-row.hc-row--more-l .hc-row__arrow--l,
.hc-row.hc-row--more-r .hc-row__arrow--r { display: block }

/* a coarse pointer gets a bigger target, but not the 38px the shared rule
   would give it -- that is taller than the row it sits in */
@media (pointer: coarse) {
  /* the shared control rule gives every button a 38px min-height, which is
     taller than the row these sit inside */
  .hc-row .hc-row__arrow {
    width: 32px; min-width: 32px;
    height: 34px; min-height: 34px;
    padding: 0;
  }
}

/* ---- the sheet strip -----------------------------------------------------
   What you have collected so far, and the way out to a file. Absent until
   there is something in it, so it costs nothing until the work starts. */

.hc-strip {
  display: none;
  align-items: center;
  gap: var(--hc-s2, 8px);
  padding: 7px 10px;
  background: var(--hc-plate, linear-gradient(180deg, #1a1f26, #13171c));
  border-top: 1px solid #000;
  box-shadow: 0 -1px 0 var(--hc-line-2, #39424f);
  --hc-row-bg: #161b21;
}
.hc-strip.on { display: flex }

.hc-strip__n {
  font: 600 11.5px/1.2 var(--hc-font, inherit);
  color: var(--hc-ink-dim, #8d97a6);
  white-space: nowrap;
  letter-spacing: .02em;
}
.hc-strip__n b {
  color: var(--hc-pick, #5fe08d);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* the thumbnails: a scrolling row of what is in the sheet, newest last */
.hc-strip__items {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.hc-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--hc-line-2, #39424f);
  border-radius: 5px;
  background-color: #0a0c0f;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.hc-strip__item:hover { border-color: var(--hc-focus, #ffb648) }
/* the whole cell is the remove target, so the cross is a hint rather than a
   second thing to hit -- a 12px target is not a target on a phone */
.hc-strip__item::after {
  content: "\00d7";
  position: absolute;
  right: 1px; top: -1px;
  font-size: 11px;
  line-height: 1;
  color: var(--hc-ink, #eef1f6);
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  opacity: 0;
  transition: opacity .12s var(--hc-ease, ease);
}
.hc-strip__item:hover::after, .hc-strip__item:focus-visible::after { opacity: 1 }
.hc-strip__item canvas, .hc-strip__item img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.hc-strip__acts { display: flex; gap: 6px; flex: 0 0 auto }

@media (max-width: 860px) {
  /* the count is the one thing that can go: the thumbnails say it better */
  .hc-strip__n { display: none }
  .hc-strip { padding: 6px 8px }
  .hc-strip__item { width: 30px; height: 30px }
}