/* Chrome fold — the top bar and the tab row tuck away while a lane's dock is up.
   Behaviour: renderer/chrome-fold.js. Notes: docs/claude/ui.md ("The chrome fold").

   Three bars stacked (top bar, tabs, dock) was too much chrome over a shelf, so
   inside a lane the first two slide up out of the way. The control is a knob at
   the right end of the dock ("Hide header" / "Show header"), not a tab
   floating at the window's edge. Body classes, all set by chrome-fold.js:

     body.chrome-fold   a dock is on screen and the bars are tucked. They leave
                        the flow (position: fixed), so the lane gets the height.
     body.chrome-open   …and they are down again, OVER the lane (`/` or Ctrl+K
                        only). An overlay on purpose: nothing under it moves, so
                        a 37,000-tile grid is not re-laid-out to show a search box.
     body.chrome-kept   a dock is on screen and the header is shown ("Show
                        header", stored per device): the bars stay in the flow
                        exactly as on any other page. */

body {
  --cfold-lip: 0px;                    /* room kept above a lane while tucked */
  --cfold-ease-out: cubic-bezier(.16, 1, .3, 1);
  --cfold-ease-in: cubic-bezier(.4, 0, .2, 1);
}
/* The frameless shell has no title bar: keep a strip to drag the window by,
   and to clear its – □ ✕ (and the Mac's traffic lights). */
body.hearth-shell { --cfold-lip: 10px; }
/* Windows/Linux shell: the floating – □ ✕ stand in the window's top-right
   corner (top 4px, 24px tall, so down to 28px). At a 10px lip the dock's top
   (lip + the 22px page gutter = 32px) sat right under them and its brass end
   cap read as running beneath the buttons. 18px puts the dock at 40px: a
   clear 12px under the buttons. */
body.hearth-shell.shell-frameless { --cfold-lip: 18px; }
/* …unless the dock on screen carries them itself (.hdock-winctl below): then
   nothing floats in that corner and the strip rises to the window's edge.
   The page's own 22px gutter above the dock is the drag strip (.cfold-grab). */
body.hearth-shell.shell-frameless.cfold-winctl { --cfold-lip: 0px; }

/* ─── the bars ──────────────────────────────────────────────────────────── */

/* Declared on the resting state too, so un-tucking (the class coming OFF) is
   animated as well. .cfold-live is added after the first measure, which keeps
   this out of the boot stagger's way (arrive.css animates the bar itself). */
body.cfold-live > header.topbar,
body.cfold-live > nav.view-tabs {
  transition: transform .3s var(--cfold-ease-out);
}

body.chrome-fold > header.topbar,
body.chrome-fold > nav.view-tabs {
  position: fixed;
  left: 0; right: 0;
  /* Past its own height, so the shadow goes with it. */
  transform: translateY(calc(-1 * var(--cfold-h, 102px) - 28px));
  visibility: hidden;                  /* out of the tab order while tucked */
  transition: transform .24s var(--cfold-ease-in), visibility 0s linear .24s;
}
body.chrome-fold > header.topbar {
  top: var(--cfold-y0, 0px);
  background: rgba(10, 11, 16, .9);
}
body.chrome-fold > nav.view-tabs {
  top: calc(var(--cfold-y0, 0px) + var(--cfold-top-h, 61px));
  z-index: 10;
  background: rgba(10, 11, 16, .94);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .85);
}
body.chrome-fold.chrome-open > header.topbar,
body.chrome-fold.chrome-open > nav.view-tabs {
  transform: none;
  visibility: visible;
  transition: transform .3s var(--cfold-ease-out), visibility 0s;
}

/* The lane takes the room the bars gave up. Every view with a dock is a
   main.layout; immersive mode already owns the whole window. */
body.chrome-fold:not(.hearth-immersive) .layout,
body.chrome-fold:not(.hearth-immersive) .music-view {
  height: calc(100vh - var(--cfold-lip) - var(--np-h, 0px));
  margin-top: var(--cfold-lip);
}
/* The Cinema (the Videos gate in a SFW library) sizes itself from its own
   top (--cinema-top, media/cinema.css); it only needs the lip. */
body.chrome-fold:not(.hearth-immersive) #vsplit-gate.cinema-host { margin-top: var(--cfold-lip); }

/* ─── the knob ──────────────────────────────────────────────────────────── */

/* A dock control like Favourites, Sort and Find (media/dock.css .hdock-btn),
   icon-only, at the right end of the dock: a bar over a chevron that points
   the way the header will go. */
.hdock-btn.hdock-fold {
  justify-content: center;
  min-width: 38px;
  padding: 0 9px;
  -webkit-app-region: no-drag;
}
.hdock-fold-ico { flex: none; display: block; }
.hdock-fold-ico path:last-child {
  transform-box: view-box;
  transform-origin: 12px 13px;
  transition: transform .3s var(--cfold-ease-out);
}
.hdock-fold[aria-expanded='false'] .hdock-fold-ico path:last-child { transform: rotate(180deg); }
@media (hover: hover) {
  .hdock-fold:hover .hdock-fold-ico path:last-child { transform: translateY(-1.5px); }
  .hdock-fold[aria-expanded='false']:hover .hdock-fold-ico path:last-child { transform: rotate(180deg) translateY(-1.5px); }
}

/* What the tucked tab row would have told you: a rip in flight, one landed,
   one failed. Same three states as .view-tab-badge, same colours. */
.hdock-fold.is-working { color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 55%, transparent); }
.hdock-fold.is-working .hdock-fold-ico { animation: cfold-breathe 1.9s ease-in-out infinite; }
.hdock-fold.is-new { color: #34d399; border-color: rgba(52, 211, 153, .55); }
.hdock-fold.is-error { color: #f87171; border-color: rgba(248, 113, 113, .6); }
@keyframes cfold-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
/* The first time the bars tuck away on this device, the knob says where they went. */
.hdock-fold.is-hinting { animation: cfold-hint 1.5s ease-in-out .3s 2; }
@keyframes cfold-hint {
  50% { border-color: var(--accent-warm); box-shadow: 0 0 16px 1px color-mix(in srgb, var(--accent-warm) 50%, transparent); }
}

/* ─── edges ─────────────────────────────────────────────────────────────── */

/* Shell: with the top bar tucked, the strip above the dock is what you drag
   the window by. The window buttons are no-drag and sit in it. */
.cfold-grab {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 22px;
  z-index: 9;
  display: none;
  -webkit-app-region: drag;
}
body.hearth-shell.chrome-fold:not(.chrome-open) .cfold-grab { display: block; }
/* The unused space and frame of each shelf header are also native window
   handles. The old 10px edge lip alone was too small to find or grab. */
body.hearth-shell :is(.hdock, .cinema-header) { -webkit-app-region: drag; }
/* Every control that can sit under that strip says no-drag, so the strip is a
   handle only in the gaps between them. A control with no app-region at all
   (a lane pill, the drawer handle, Favourites, a Cinema tab) does not take
   itself out of a drag area; it has to say so. Only the dock and the Cinema
   header: they are what rises to the window's edge, and every rect named here
   is one more for Electron to recompute on each layout. */
body.hearth-shell :is(.hdock, .cinema-header) :is(button, a[href], input, select, textarea, label, [role="button"], [role="tab"], [role="switch"], [tabindex="0"]) {
  -webkit-app-region: no-drag;
}
/* …and its – □ ✕ went up with the bar, so the floating set stands in, exactly
   as it does on the Browser tab. (Never on the Mac: the traffic lights stay.) */
body.shell-frameless.chrome-fold:not(.chrome-open):not(.cfold-winctl) #floating-win-controls { display: flex !important; }
body.shell-frameless.chrome-fold:not(.chrome-open):not(.cfold-winctl) #floating-win-controls .winbtn { display: inline-flex !important; }

/* ─── what stands in for the tucked top bar, on the dock ────────────────── */

/* The Hearth mark at the head of the rail: the top bar's logo, the way back
   to the app's Home while that bar is away (chrome-fold.js homeFor). A
   plaque like the pills beside it, the mark in it. */
.hdock-btn.hdock-home { display: none; }
body.chrome-fold .hdock-btn.hdock-home {
  display: inline-flex;
  flex: none;
  justify-content: center;
  min-width: 44px;
  padding: 0 8px;
  -webkit-app-region: no-drag;
}
.hdock-home-mark {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8));
  transition: transform .18s var(--cfold-ease-out);
}
@media (hover: hover) {
  .hdock-home:hover .hdock-home-mark { transform: scale(1.08); }
}

/* – □ ✕ at the end of the row (chrome-fold.js winFor), frameless shell only.
   It IS a tools tray — the same class, frame, segments and hairlines as
   Favourites…Header beside it (media/dock.css "The tray") — minus the word
   gutter, since none of these has a word to slide out. The glyphs are
   centred in segments the tools' own size. Below 900px the row wraps and
   the floating set stands in again (body.cfold-winctl follows what is on
   screen, not the window's width). */
.hdock-tools.hdock-winctl { display: none; }
body.shell-frameless.chrome-fold:not(.chrome-open) .hdock-tools.hdock-winctl {
  display: flex;
  flex: none;
  margin-left: 8px;
  padding-left: 3px;
  -webkit-app-region: no-drag;
  /* No word gutter, and nothing easing. Being an .hdock-tools it inherited the
     tools' 96px word room, which dock.css hands out while fit() measures the
     row (.hdock-measuring .hdock-tools): every time the drawer opened or shut,
     this tray went 96px wide for one layout and its padding transition eased
     it back — shoving the tools tray out from under a pointer coming from the
     right, so the drawer shut, the row came back, and it opened again (Rober,
     2026-10-10: "very glitchy when coming from right", and on Music "the hover
     off of it feels a bit janky"). */
  --dock-word-room: 0px;
  transition: none;
}
.hdock-tools.hdock-winctl::before { left: 0; }
/* An unpinned dock scrolled up with its shelf: the tray stays at the top
   (chrome-fold.js keepAtTop sets its `top`), and the dock stands over the
   shelf's tiles so the tray is not painted under them. */
.hdock-tools.hdock-winctl { position: relative; }
.hdock.winctl-away { z-index: 6; }
.hdock-winctl > .hdock-btn {
  justify-content: center;
  min-width: 40px;
  padding: 0;
  line-height: 0;
  color: rgba(232, 226, 214, .86);
}
.hdock-winctl > .hdock-btn svg { display: block; flex: none; }
.hdock-winctl > .hdock-btn.is-close:hover { background: #c23535; color: #fff; }
@media (max-width: 900px) {
  body.shell-frameless.chrome-fold:not(.chrome-open) .hdock-tools.hdock-winctl { display: none; }
}

/* Covers that hide the app's chrome hide its drag strip too. */
body.locked .cfold-grab,
body.hearth-immersive .cfold-grab { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  body.cfold-live > header.topbar,
  body.cfold-live > nav.view-tabs,
  body.chrome-fold > header.topbar,
  body.chrome-fold > nav.view-tabs,
  body.chrome-fold.chrome-open > header.topbar,
  body.chrome-fold.chrome-open > nav.view-tabs,
  .hdock-fold-ico path:last-child,
  .hdock-home-mark { transition: none; }
  .hdock-fold.is-hinting,
  .hdock-fold.is-working .hdock-fold-ico { animation: none; }
}

/* A phone gives every dock control the same width and padding; so does the knob. */
@media (max-width: 560px) {
  .hdock-btn.hdock-fold { padding: 0 12px; }
}