/* SPDX-License-Identifier: EUPL-1.2 */

/*
 * hominis.eu marketing site — fidelity kit, layer 2: MOCK RECIPES.
 *
 * Every block below is transcribed from a shipped engine source read
 * directly on 2026-07-22; the `src:` comment on each block names it.
 * Values are the source's values (tokens resolve via hx-tokens.css).
 * Reviewing a mock = opening its cited source beside it.
 *
 * TILE ANATOMY CHECKLIST (renderer template order —
 * src: engine/toolkit/content/widgets/moz-hominis-tile-frame/
 *      moz-hominis-tile-frame-header.mjs renderHominisTileFrameHeader,
 *      moz-hominis-tile-frame.mjs render()):
 *   frame  = .tile-shell > [header, progressbar(loading only), body]
 *   header = 1 close        UNCONDITIONAL, LEADING (closeSide default
 *                           "left"; template order, never CSS `order`)
 *            2 security     UNCONDITIONAL button w/ 16px favicon
 *                           (applet: visibility hidden, keeps its box)
 *            3 nav group    !applet: back · forward · reload⇄stop —
 *                           three 28px controls; back/forward
 *                           honest-disabled (?disabled from pushed
 *                           facts); reload⇄stop UNCONDITIONAL at every
 *                           width; [nav-collapsed] at frame width
 *                           ≤ 380px hides back/forward ONLY
 *            4 permissions  !applet && permissions.length
 *            5 private badge  private only
 *            6 identity     UNCONDITIONAL flex-1 drag area w/ title
 *            7 zoom chip    !applet && zoomPercent ≠ 100
 *            8 ext chips    !applet && !private (hover-visibility law)
 *            9 loading glyph  loading only
 *           10 ••• more     UNCONDITIONAL
 *           11 close        only when closeSide="right" (not default)
 */

/* ------------------------------------------------------------------
 * Platform glyphs, as CSS masks.
 * The path data below is copied from icon files shipped in this
 * repository (engine tree). Upstream Mozilla icons keep their license:
 * close/reload/more/arrow-down/arrow-up/search-glass/fullscreen/
 * defaultFavicon (toolkit/themes/shared/icons/), back/forward
 * (browser/themes/shared/icons/) — MPL-2.0: "This Source Code Form is
 * subject to the terms of the Mozilla Public License, v. 2.0. If a
 * copy of the MPL was not distributed with this file, You can obtain
 * one at http://mozilla.org/MPL/2.0/." (default `.proton` variants).
 * private/workspace (browser/themes/shared/hominis/) are
 * Hominis-owned, EUPL-1.2.
 * ------------------------------------------------------------------ */
:root {
  --hx-icon-close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m9.108 7.776 4.709-4.709a.626.626 0 0 0-.884-.885L8.244 6.871l-.488 0-4.689-4.688a.625.625 0 1 0-.884.885L6.87 7.754l0 .491-4.687 4.687a.626.626 0 0 0 .884.885L7.754 9.13l.491 0 4.687 4.687a.627.627 0 0 0 .885 0 .626.626 0 0 0 0-.885L9.108 8.223l0-.447z"/></svg>');
  --hx-icon-back: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.69 2.25 1.22 7.72a.75.75 0 0 0 0 1.06l5.47 5.47 1.06-1.061L3.56 9H15V7.5H3.56l4.19-4.19-1.06-1.06z"/></svg>');
  --hx-icon-forward: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.44 9H1V7.5h11.44L8.25 3.31l1.06-1.06 5.47 5.47a.75.75 0 0 1 0 1.06l-5.47 5.47-1.06-1.061L12.44 9z"/></svg>');
  --hx-icon-reload: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.707 6 14.7 6l.3-.3 0-3.993a.5.5 0 0 0-.854-.354l-1.459 1.459A6.95 6.95 0 0 0 8 1C4.141 1 1 4.141 1 8s3.141 7 7 7a6.97 6.97 0 0 0 6.968-6.322.626.626 0 0 0-.562-.682.635.635 0 0 0-.682.562A5.726 5.726 0 0 1 8 13.75c-3.171 0-5.75-2.579-5.75-5.75S4.829 2.25 8 2.25a5.71 5.71 0 0 1 3.805 1.445l-1.451 1.451a.5.5 0 0 0 .353.854z"/></svg>');
  --hx-icon-more: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 7 1.5 7l-.5.5L1 9l.5.5 1.5 0 .5-.5 0-1.5z"/><path d="m8.75 7-1.5 0-.5.5 0 1.5.5.5 1.5 0 .5-.5 0-1.5z"/><path d="M14.5 7 13 7l-.5.5 0 1.5.5.5 1.5 0L15 9l0-1.5z"/></svg>');
  --hx-icon-arrow-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8.352 10.999 5.466-5.465a.623.623 0 0 0-.001-.884.628.628 0 0 0-.885 0L7.998 9.585l-4.93-4.934a.626.626 0 0 0-.885.885L7.648 11l.704-.001z"/></svg>');
  --hx-icon-arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8.352 5.001 5.466 5.465a.623.623 0 0 1-.001.884.628.628 0 0 1-.885 0L7.999 6.416l-4.932 4.933a.626.626 0 0 1-.885-.885L7.648 5l.704.001z"/></svg>');
  --hx-icon-search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m10.089 10.973 3.845 3.844a.62.62 0 0 0 .883-.001.625.625 0 0 0-.001-.884L10.983 10.1l.006-.427A5.5 5.5 0 1 0 1 6.5 5.5 5.5 0 0 0 6.5 12c1.189 0 2.288-.38 3.187-1.022l.402-.005zM6.5 10.75c-2.343 0-4.25-1.907-4.25-4.25S4.157 2.25 6.5 2.25s4.25 1.907 4.25 4.25-1.907 4.25-4.25 4.25z"/></svg>');
  --hx-icon-fullscreen: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m14.7 1-3.993 0a.5.5 0 0 0-.354.854l1.454 1.454-7.5 7.5-1.454-1.454A.5.5 0 0 0 2 9.707L2 13.7l.3.3 3.993 0a.5.5 0 0 0 .354-.854l-1.454-1.454 7.5-7.5 1.454 1.454A.5.5 0 0 0 15 5.293L15 1.3l-.3-.3z"/></svg>');
  --hx-icon-globe: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.5 1a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm2.447 1.75a6.255 6.255 0 0 1 3.756 5.125l-2.229 0A9.426 9.426 0 0 0 10.54 2.75l.407 0zm-2.049 0a8.211 8.211 0 0 1 2.321 5.125l-5.438 0A8.211 8.211 0 0 1 8.102 2.75l.796 0zm-2.846 0 .408 0a9.434 9.434 0 0 0-1.934 5.125l-2.229 0A6.254 6.254 0 0 1 6.052 2.75zm0 11.5a6.252 6.252 0 0 1-3.755-5.125l2.229 0A9.426 9.426 0 0 0 6.46 14.25l-.408 0zm2.05 0a8.211 8.211 0 0 1-2.321-5.125l5.437 0a8.211 8.211 0 0 1-2.321 5.125l-.795 0zm2.846 0-.409 0a9.418 9.418 0 0 0 1.934-5.125l2.229 0a6.253 6.253 0 0 1-3.754 5.125z"/></svg>');
  --hx-icon-private: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M3.4 4.5 h9.2 Q14.5 4.5 14.5 6.4 L14.5 8.1 Q14.5 11.6 11.5 11.6 Q9.8 11.6 8.9 10.3 Q8.5 9.7 8 9.7 Q7.5 9.7 7.1 10.3 Q6.2 11.6 4.5 11.6 Q1.5 11.6 1.5 8.1 L1.5 6.4 Q1.5 4.5 3.4 4.5 Z M4.9 6.2 a1.55 1.55 0 1 0 0 3.1 a1.55 1.55 0 1 0 0 -3.1 Z M11.1 6.2 a1.55 1.55 0 1 0 0 3.1 a1.55 1.55 0 1 0 0 -3.1 Z" clip-rule="evenodd"/></svg>');
  --hx-icon-workspace: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.25 8a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1 0-1.5z"/><path fill-rule="evenodd" d="M8 4c1.455 0 3.056.06 4.777.213l.746.073.258.039A2.76 2.76 0 0 1 16 7.025v5.95c0 1.4-1.049 2.59-2.454 2.737a53.6 53.6 0 0 1-11.068.003A2.76 2.76 0 0 1 0 12.975v-5.95a2.745 2.745 0 0 1 2.454-2.736A54 54 0 0 1 8 4m0 1.5c-1.945 0-3.75.11-5.39.28A1.247 1.247 0 0 0 1.5 7.026v5.949c0 .639.49 1.181 1.133 1.248a52 52 0 0 0 10.758-.003 1.246 1.246 0 0 0 1.109-1.245v-5.95c0-.638-.49-1.18-1.133-1.247A52 52 0 0 0 8 5.5" clip-rule="evenodd"/></svg>');
}

.hx-glyph {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  mask: var(--hx-icon) center / contain no-repeat;
  -webkit-mask: var(--hx-icon) center / contain no-repeat;
}

/* ------------------------------------------------------------------
 * Canvas ground.
 * src: engine/browser/themes/shared/hominis-canvas.css
 *      #hominis-canvas-host + #hominis-canvas-grid[data-hominis-grid=dots]
 * ------------------------------------------------------------------ */
.hx-canvas {
  position: relative;
  overflow: clip;
  background: var(--hominis-canvas-background);
}

.hx-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--hominis-canvas-grid-tint) 1px,
    transparent 1px
  );
  background-size: var(--hominis-bg-gap) var(--hominis-bg-gap);
}

/* The world layer: tiles are absolutely-positioned world children;
 * scaled presentation of a showcase panel mirrors the engine's ONE
 * camera transform (translate+scale on the world, transform-origin
 * 0 0), never per-tile scaling.
 * src: hominis-canvas.css #hominis-world */
.hx-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

/* ------------------------------------------------------------------
 * Tile frame.
 * src: engine/toolkit/content/widgets/moz-hominis-tile-frame/
 *      moz-hominis-tile-frame.css :host, .tile-shell, .tile-header,
 *      .tile-body, .tile-progressbar, controls (values verbatim;
 *      tokens via hx-tokens.css)
 * ------------------------------------------------------------------ */
/* Geometry channel: the engine applies x/y/w/h via inline
 * translate/width/height (moz-hominis-tile-frame.mjs updated());
 * mocks author the same values as --tx/--ty/--tw/--th. */
.hx-tile,
.hx-group {
  translate: var(--tx, 0px) var(--ty, 0px);
  width: var(--tw);
  height: var(--th);
}

.hx-tile {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
  border-radius: var(--hominis-tile-radius);
  background: var(--hominis-chrome-surface);
  box-shadow: var(--hominis-shadow-tile);
  border: 1px solid var(--hominis-chrome-boundary);
  min-width: var(--hominis-tile-min-width);
  min-height: var(--hominis-tile-min-height);
  box-sizing: border-box;
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
}

/* src: moz-hominis-tile-frame.css :host([active]) */
.hx-tile[data-active] {
  outline: var(--hominis-focus-ring-width) solid var(--hominis-accent);
  outline-offset: 0;
  box-shadow: var(--hominis-shadow-tile-active);
}

.hx-tile-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.hx-tile-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-m);
  height: var(--hominis-tile-header-height);
  min-height: var(--hominis-tile-header-height);
  padding-inline: 8px 4px;
  background: var(--hominis-chrome-surface);
  color: var(--hominis-chrome-text);
  border-bottom: 1px solid var(--hominis-chrome-boundary);
  box-sizing: border-box;
}

/* Header icon controls: moz-button type="icon ghost" data-hx="quiet"
 * on the tile-control box (canvas-tiles.md nav law: 28px controls).
 * src: hominis-button-vocabulary.css [data-hx="quiet"] +
 *      moz-hominis-tile-frame.css .tile-security sizing */
.hx-tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hominis-tile-control-size);
  height: var(--hominis-tile-control-size);
  flex: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--hominis-chrome-text);
  border-radius: var(--hominis-inner-radius);
  cursor: pointer;
  font: inherit;
}

.hx-tbtn:hover:not([disabled]) {
  background: var(--hominis-chrome-line);
}

.hx-tbtn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.hx-tbtn > .hx-glyph {
  width: 16px;
  height: 16px;
}

/* src: moz-hominis-tile-frame.css .tile-security, .tile-favicon */
.hx-tile-security {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hominis-tile-control-size);
  height: var(--hominis-tile-control-size);
  flex: none;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  border-radius: var(--hominis-micro-radius);
  cursor: pointer;
}

.hx-tile-security:hover {
  background-color: var(--hominis-chrome-surface-raised);
}

.hx-favicon {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}

/* Applet tiles: bare header — the security trigger keeps its box but
 * conceals (src: moz-hominis-tile-frame.css :host([applet])
 * .tile-security; nav/zoom/chips are template-absent, not hidden). */
.hx-tile[data-applet] .hx-tile-security {
  pointer-events: none;
  visibility: hidden;
}

/* src: moz-hominis-tile-frame.css .tile-nav + :host([nav-collapsed]);
 * the collapse observer reflects at frame width ≤ 380px
 * (moz-hominis-tile-frame-header.mjs HOMINIS_NAV_COLLAPSE_AT = 380) —
 * static mock stamps [data-collapsed] on tiles authored ≤ 380 wide. */
.hx-tile-nav {
  display: flex;
  align-items: center;
  flex: none;
}

.hx-tile[data-collapsed] .hx-tbtn[data-nav="back"],
.hx-tile[data-collapsed] .hx-tbtn[data-nav="forward"] {
  display: none;
}

/* src: moz-hominis-tile-frame.css .tile-private-badge */
.hx-tile-private-badge {
  flex: none;
  font-size: 0.75em;
  color: var(--hominis-chrome-text-muted);
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-micro-radius);
  padding: 0 4px;
}

/* src: moz-hominis-tile-frame.css .tile-identity, .tile-title */
.hx-tile-identity {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: default;
}

.hx-tile-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85em;
}

/* src: moz-hominis-tile-frame.css .tile-zoom (renders only ≠ 100%) */
.hx-tile-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hominis-tile-control-size);
  flex: none;
  padding: 0 4px;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  border-radius: var(--hominis-micro-radius);
  max-width: 6em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.hx-tile-zoom:hover {
  background-color: var(--hominis-chrome-surface-raised);
}

/* src: moz-hominis-tile-frame.css .tile-loading-glyph */
.hx-tile-loading {
  flex: none;
  font-size: 0.7em;
  color: var(--hominis-chrome-text-muted);
}

/* src: moz-hominis-tile-frame.css .tile-progressbar (compositor scaleX
 * off --hominis-tile-progress; mock stamps the property inline) */
.hx-tile-progress {
  height: 2px;
  flex: none;
  background: var(--hominis-accent);
  transform: scaleX(var(--hominis-tile-progress, 0));
  transform-origin: 0 0;
}

/* src: moz-hominis-tile-frame.css .tile-body */
.hx-tile-body {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--hominis-chrome-surface-raised);
  overflow: hidden;
}

/* ------------------------------------------------------------------
 * Extension chips (tile-header slot between zoom chip and loading/•••).
 * src: engine/toolkit/content/widgets/moz-hominis-tile-frame/
 *      moz-hominis-tile-frame-extension-chips.css
 * Mock shows the always-visible promotion (badged chips) — the hover
 * visibility belt is a live-widget behavior.
 * ------------------------------------------------------------------ */
.hx-ext-row {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.hx-ext-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hominis-tile-control-size);
  height: var(--hominis-tile-control-size);
  flex: none;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  border-radius: var(--hominis-micro-radius);
  cursor: pointer;
}

.hx-ext-chip:hover {
  background-color: var(--hominis-chrome-surface-raised);
}

.hx-ext-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.hx-ext-badge {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  pointer-events: none;
  background-color: var(--hx-ext-badge-bg, var(--hominis-accent));
  color: var(--hx-ext-badge-fg, var(--hominis-chrome-surface));
  font-size: max(0.5625em, 9px);
  line-height: 1.3;
  padding: 0 3px;
  border-radius: var(--hominis-micro-radius);
  max-width: 4em;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hx-ext-overflow {
  appearance: none;
  background: none;
  font: inherit;
  margin: 0;
  flex: none;
  font-size: 0.75em;
  color: var(--hominis-chrome-text-muted);
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-micro-radius);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.hx-ext-overflow:hover {
  background-color: var(--hominis-chrome-surface-raised);
}

/* ------------------------------------------------------------------
 * Window bar + pills.
 * src: engine/browser/themes/shared/hominis-chrome.css
 *      #hominis-chrome-bar (56px TRANSPARENT overlay, z 90) and
 *      engine/toolkit/content/widgets/moz-hominis-window-bar/
 *      moz-hominis-window-bar.css :host, .workspace-pill, .bar-center,
 *      .command-bar, .bar-actions, pill anatomy
 * ------------------------------------------------------------------ */
.hx-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: var(--hominis-window-bar-height);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-l);
  padding: 0 10px;
  box-sizing: border-box;
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
}

/* src: moz-hominis-window-bar.css .workspace-pill (glass material:
 * pill-alpha mix + blur; Tier 1 shadow) */
.hx-pill {
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-l);
  height: var(--hominis-pill-height);
  flex: 0 1 auto;
  min-width: 56px;
  max-width: 280px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: var(--hominis-pill-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-material-pill);
  backdrop-filter: blur(var(--hominis-blur, 12px));
  -webkit-backdrop-filter: blur(var(--hominis-blur, 12px));
  box-shadow: var(--hominis-shadow-mid);
  color: inherit;
  font: inherit;
  border-width: 1px;
  cursor: pointer;
}

.hx-pill:hover {
  background: var(--hominis-chrome-surface-raised);
}

.hx-pill-name {
  font-family: var(--hominis-display-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* src: hominis-identity-dot.css (shared map) + .identity-dot geometry;
 * chip renders ONLY at ≥2 visible identities (window-bar showIdentityDot
 * gate) — a mock pill without ≥2 identities must omit it. */
.hx-identity-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hominis-identity-default);
}

.hx-identity-dot[data-identity-color="blue"] { background: var(--hominis-identity-blue); }
.hx-identity-dot[data-identity-color="turquoise"] { background: var(--hominis-identity-turquoise); }
.hx-identity-dot[data-identity-color="green"] { background: var(--hominis-identity-green); }
.hx-identity-dot[data-identity-color="yellow"] { background: var(--hominis-identity-yellow); }
.hx-identity-dot[data-identity-color="orange"] { background: var(--hominis-identity-orange); }
.hx-identity-dot[data-identity-color="red"] { background: var(--hominis-identity-red); }
.hx-identity-dot[data-identity-color="pink"] { background: var(--hominis-identity-pink); }
.hx-identity-dot[data-identity-color="purple"] { background: var(--hominis-identity-purple); }

/* src: moz-hominis-window-bar.css .pill-chevron */
.hx-pill-chevron {
  flex: none;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  mask: var(--hx-icon-arrow-down) center / 12px no-repeat;
  -webkit-mask: var(--hx-icon-arrow-down) center / 12px no-repeat;
  opacity: 0.7;
}

/* src: moz-hominis-window-bar.css .pill-mask, .private-badge (private
 * pill: mask glyph + "Private" badge REPLACE the workspace name) */
.hx-pill-mask {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: var(--hominis-private-accent);
  mask: var(--hx-icon-private) center / 14px no-repeat;
  -webkit-mask: var(--hx-icon-private) center / 14px no-repeat;
}

.hx-pill-private-badge {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--hominis-full-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  color: var(--hominis-chrome-text-muted);
  font-size: 0.85em;
}

/* src: moz-hominis-window-bar.css .bar-center, .command-bar,
 * .command-glass, .command-open-hint (canvas-mode command pill) */
.hx-bar-center {
  flex: 1 4 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: var(--hominis-command-min-width, 180px);
  gap: var(--hominis-gap-m);
}

.hx-command {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hominis-gap-l);
  width: var(--hominis-command-width);
  max-width: 100%;
  min-width: min(var(--hominis-command-min-width, 180px), 100%);
  height: var(--hominis-pill-height);
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--hominis-pill-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-material-pill);
  backdrop-filter: blur(var(--hominis-blur, 12px));
  -webkit-backdrop-filter: blur(var(--hominis-blur, 12px));
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text-muted);
  font: inherit;
  cursor: pointer;
}

.hx-command:hover {
  background: var(--hominis-chrome-surface-raised);
}

.hx-command-glass {
  width: 12px;
  height: 12px;
  flex: none;
  background-color: currentColor;
  mask: var(--hx-icon-search) center / contain no-repeat;
  -webkit-mask: var(--hx-icon-search) center / contain no-repeat;
}

.hx-command-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* src: moz-hominis-window-bar.css .bar-actions (Tier-1 glass cluster) */
.hx-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--hominis-pill-height);
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--hominis-pill-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-material-pill);
  backdrop-filter: blur(var(--hominis-blur, 12px));
  -webkit-backdrop-filter: blur(var(--hominis-blur, 12px));
  box-shadow: var(--hominis-shadow-mid);
}

.hx-actions .hx-tbtn {
  width: 28px;
  height: 28px;
}

/* macOS traffic lights (NSWindow-drawn; the mock paints the three
 * standard dots as window furniture — site illustration, not a widget
 * recipe). */
.hx-traffic {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline: 12px 4px;
  flex: none;
}

.hx-traffic > i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.hx-traffic > i:nth-child(1) { background: #ff5f57; }
.hx-traffic > i:nth-child(2) { background: #febc2e; }
.hx-traffic > i:nth-child(3) { background: #28c840; }

/* ------------------------------------------------------------------
 * Canvas group frame.
 * src: engine/toolkit/content/widgets/moz-hominis-group-frame/
 *      moz-hominis-group-frame.css :host, .frame, .header, .dot,
 *      .name, .count, .tools, .tool, .grip
 * Per-frame color role: --hominis-group-color (set from the token
 * family on the element).
 * ------------------------------------------------------------------ */
.hx-group {
  position: absolute;
  display: block;
  pointer-events: none;
}

.hx-group-frame {
  position: absolute;
  inset: 0;
  border: 1.5px solid
    color-mix(in oklab, var(--hominis-group-color) 55%, transparent);
  border-radius: var(--hominis-tile-radius);
  background: color-mix(in oklab, var(--hominis-group-color) 9%, transparent);
  pointer-events: none;
}

.hx-group-header {
  position: absolute;
  left: -1.5px;
  top: -32px;
  height: 30px;
  max-width: calc(100% + 3px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 5px 0 11px;
  box-sizing: border-box;
  border-radius: var(--hominis-inner-radius) var(--hominis-inner-radius) 0 0;
  background: color-mix(
    in oklab,
    var(--hominis-group-color) 88%,
    var(--hominis-chrome-surface)
  );
  color: var(--hominis-accent-ink);
  box-shadow: var(--hominis-shadow-low);
  pointer-events: auto;
  cursor: grab;
  font: 13px/1 var(--hominis-display-font);
}

.hx-group-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hominis-accent-ink) 90%, transparent);
  flex: 0 0 9px;
}

.hx-group-name {
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.hx-group-count {
  font-weight: 600;
  font-size: 10.5px;
  color: color-mix(in srgb, var(--hominis-accent-ink) 85%, transparent);
  background: color-mix(in srgb, var(--hominis-accent-ink) 20%, transparent);
  border-radius: var(--hominis-pill-radius);
  padding: 1px 7px;
  flex: 0 0 auto;
}

.hx-group-tools {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: 3px;
}

.hx-group-tool {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--hominis-inner-radius);
  cursor: pointer;
  color: color-mix(in srgb, var(--hominis-accent-ink) 85%, transparent);
  padding: 0;
}

.hx-group-tool:hover {
  background-color: color-mix(in srgb, var(--hominis-accent-ink) 20%, transparent);
  color: var(--hominis-accent-ink);
}

.hx-group-tool > .hx-glyph {
  width: 16px;
  height: 16px;
}

.hx-group-grip {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 20px;
  height: 20px;
  pointer-events: auto;
  cursor: nwse-resize;
  border-radius: 0 0 var(--hominis-overlay-radius) 0;
}

.hx-group-grip::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-right: 2px solid
    color-mix(in oklab, var(--hominis-group-color) 70%, transparent);
  border-bottom: 2px solid
    color-mix(in oklab, var(--hominis-group-color) 70%, transparent);
  border-radius: 0 0 var(--hominis-micro-radius) 0;
}

/* ------------------------------------------------------------------
 * Camera helper: a showcase panel presents a zoomed-out canvas the
 * way the engine does — ONE scale transform on the world plane
 * (transform-origin 0 0), never per-tile scaling.
 * src: hominis-canvas.css #hominis-world two-channel camera contract
 * ------------------------------------------------------------------ */
.hx-cam {
  position: absolute;
  inset: 0;
  transform: scale(var(--cam, 1));
  transform-origin: 0 0;
}

/* ------------------------------------------------------------------
 * Connection threads.
 * src: hominis-canvas.css #hominis-threads, .hominis-threads-svg
 *      (zero-sized world-origin SVG, visible overflow, constant
 *      stroke weight; per-kind stroke + opacity verbatim)
 * ------------------------------------------------------------------ */
.hx-threads {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hx-threads-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
}

.hx-threads-svg line {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
  stroke-linecap: round;
}

.hx-threads-svg line[data-kind="journey"] {
  stroke: var(--hominis-accent);
  opacity: 0.55;
}

.hx-threads-svg line[data-kind="tag"] {
  stroke: oklch(
    var(--hominis-tag-l) var(--hominis-tag-c) calc(var(--hominis-thread-hue, 0) * 1deg)
  );
  opacity: 0.5;
}

.hx-threads-svg line[data-kind="site"] {
  stroke: var(--hominis-chrome-text-muted);
  opacity: 0.35;
}

/* ------------------------------------------------------------------
 * Tag-lens stamps on tiles.
 * src: hominis-canvas.css [data-hominis-lens="dim"|"aura"] rules
 * ------------------------------------------------------------------ */
.hx-tile[data-hx-lens="dim"] {
  opacity: 0.45;
  filter: saturate(0.5);
}

.hx-tile[data-hx-lens="aura"] {
  outline: 2px solid
    oklch(var(--hominis-tag-l) var(--hominis-tag-c)
      calc(var(--hominis-lens-hue, 0) * 1deg) / 0.8);
  outline-offset: 4px;
}

/* ------------------------------------------------------------------
 * The tag-lens bar.
 * src: moz-hominis-lens-bar/moz-hominis-lens-bar.css (.lens-bar chip;
 *      engine hosts it fixed top 52px centre at z 100 — a showcase
 *      panel stands in for the viewport, so the mock anchors the same
 *      way inside its panel)
 * ------------------------------------------------------------------ */
.hx-lens-bar {
  position: absolute;
  top: 52px;
  left: 50%;
  translate: -50% 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 12px;
  border-radius: var(--hominis-full-radius);
  border: 1px solid
    oklch(var(--hominis-tag-l) var(--hominis-tag-c)
      calc(var(--hominis-lens-hue, 0) * 1deg) / 0.55);
  background: var(--hominis-chrome-surface-raised);
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
  font: 12px/1.4 var(--hominis-display-font);
}

.hx-lens-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--hominis-full-radius);
  background: oklch(var(--hominis-tag-l) var(--hominis-tag-c)
      calc(var(--hominis-lens-hue, 0) * 1deg));
}

.hx-lens-tag {
  font-weight: 600;
}

.hx-lens-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: var(--hominis-full-radius);
  background: transparent;
  color: var(--hominis-chrome-text-muted);
  font-size: 13px;
  cursor: pointer;
}

.hx-lens-clear:hover {
  background: var(--hominis-chrome-surface);
  color: var(--hominis-chrome-text);
}

/* ------------------------------------------------------------------
 * The manual tile-tag editor (••• portal).
 * src: moz-hominis-tag-editor/moz-hominis-tag-editor.css (.tag-editor,
 *      .editor-label, .tag-chips, .tag-chip, .tag-input, .editor-note;
 *      engine portals it fixed at z 110 — the mock anchors inside its
 *      showcase panel)
 * ------------------------------------------------------------------ */
.hx-tag-editor {
  position: absolute;
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 232px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: var(--hominis-overlay-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-chrome-surface-raised);
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
}

.hx-tag-editor .editor-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--hominis-chrome-text-muted);
}

.hx-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hx-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11.5px;
  border-radius: var(--hominis-full-radius);
  border: 1px solid
    oklch(var(--hominis-tag-l) var(--hominis-tag-c)
      calc(var(--hominis-chip-hue, 0) * 1deg) / 0.55);
  background: oklch(var(--hominis-tag-l) var(--hominis-tag-c)
      calc(var(--hominis-chip-hue, 0) * 1deg) / 0.14);
  color: var(--hominis-chrome-text);
  cursor: pointer;
}

.hx-tag-chip .chip-x {
  color: var(--hominis-chrome-text-muted);
}

.hx-tag-input {
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: var(--hominis-inner-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-chrome-surface);
  color: var(--hominis-chrome-text);
}

.hx-tag-editor .editor-note {
  font-size: 10.5px;
  color: var(--hominis-chrome-text-muted);
}

/* ------------------------------------------------------------------
 * Focus mode.
 * src: engine/browser/themes/shared/hominis-chrome.css
 *      #hominis-focus-tabs-strip (regular's 40px strip below the 56px
 *      bar — the 96px top-edge law, focus-mode.md) and
 *      engine/toolkit/content/widgets/moz-hominis-focus-tabs/
 *      moz-hominis-focus-tabs.css (.tabs-row, .focus-tab, .tabs-count)
 * ------------------------------------------------------------------ */
:root {
  --hx-icon-plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7 9.75 7 14a.625.625 0 0 0 1.25 0l0-4.25.5-.5 4.25 0A.625.625 0 0 0 13 8L8.75 8l-.5-.5 0-4.25a.625.625 0 0 0-1.25 0L7 7.5l-.5.5-4.25 0a.625.625 0 0 0 0 1.25l4.137 0z"/></svg>');
  --hx-icon-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.475 9.824.615 7.449A1.207 1.207 0 0 1 .237 6.14a1.205 1.205 0 0 1 1.074-.835l3.697-.239.501-.375 1.364-3.427C7.059.8 7.501.5 8 .5s.941.3 1.127.763l0 .001 1.364 3.427.501.375 3.697.239c.498.032.92.36 1.074.835.155.476.006.99-.378 1.309L12.53 9.82l-.18.592.91 3.575c.123.485-.059.986-.463 1.279a1.213 1.213 0 0 1-1.36.045L8.31 13.334l-.621 0-3.126 1.977c-.426.266-.96.247-1.361-.045a1.205 1.205 0 0 1-.463-1.279l.908-3.566-.172-.597z"/></svg>');
  --hx-icon-star-hollow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.185 15.499c-.336 0-.671-.104-.957-.313a1.62 1.62 0 0 1-.621-1.72l.86-3.375-2.68-2.226A1.618 1.618 0 0 1 .279 6.11a1.621 1.621 0 0 1 1.444-1.122l3.475-.225 1.288-3.237C6.735.903 7.329.5 8 .5s1.265.403 1.514 1.026l1.288 3.237 3.475.225a1.62 1.62 0 0 1 1.444 1.122 1.62 1.62 0 0 1-.509 1.757l-2.68 2.225.86 3.375a1.62 1.62 0 0 1-.621 1.72 1.618 1.618 0 0 1-1.828.059L8 13.385l-2.944 1.861a1.63 1.63 0 0 1-.871.253zM8 1.75a.365.365 0 0 0-.352.239L6.214 5.592l-.541.393-3.87.251a.366.366 0 0 0-.336.261.364.364 0 0 0 .119.407L4.57 9.383l.206.635-.958 3.758a.364.364 0 0 0 .145.399c.063.047.23.139.426.014l3.278-2.071.668 0 3.278 2.071a.365.365 0 0 0 .426-.014.367.367 0 0 0 .143-.4l-.958-3.758.206-.635 2.984-2.478a.364.364 0 0 0 .119-.408.367.367 0 0 0-.336-.261l-3.869-.251-.541-.393-1.435-3.603A.367.367 0 0 0 8 1.75z"/></svg>');
}

.hx-focus-strip {
  position: absolute;
  top: var(--hominis-window-bar-height);
  inset-inline: 0;
  height: var(--hominis-pill-height);
  z-index: 90;
}

.hx-tabs-row {
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-s);
  min-width: 0;
  overflow: hidden;
}

.hx-focus-strip .hx-tabs-row {
  justify-content: safe center;
  height: 100%;
  padding: 0 12px;
}

.hx-ftab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hominis-gap-m);
  height: 28px;
  max-width: 150px;
  min-width: 72px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--hominis-pill-radius);
  background: none;
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
  font-size: 0.9em;
  cursor: pointer;
  box-sizing: border-box;
  flex: none;
}

.hx-ftab:hover {
  background: var(--hominis-chrome-surface-raised);
  border-color: var(--hominis-chrome-boundary);
}

.hx-ftab[data-active="true"] {
  border-color: var(--hominis-accent);
  box-shadow: inset 0 0 0 calc(var(--hominis-focus-ring-width) - 1px)
    var(--hominis-accent);
  background: var(--hominis-material-pill);
}

.hx-ftab .hx-favicon {
  border-radius: var(--hominis-micro-radius);
}

.hx-ftab .tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* dense (central-compact): favicon-only pills; the ACTIVE tab keeps a
 * readable title (F-33). Vertical strips: column segments, full width. */
.hx-ftab[data-dense] {
  padding: 0 6px;
  max-width: none;
  min-width: 0;
}

.hx-tabs-row[data-vertical] {
  flex-direction: column;
  align-items: stretch;
}

.hx-tabs-row[data-vertical] .hx-ftab {
  max-width: none;
  min-width: 0;
  justify-content: flex-start;
}

.hx-tabs-count {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  translate: 0 -50%;
  padding: 2px 7px;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-full-radius);
  background: var(--hominis-chrome-surface-raised);
  font: 600 11px var(--hominis-mono-font);
  color: var(--hominis-chrome-text);
  pointer-events: none;
}

/* The focus-mode command capsule (bar centre).
 * src: moz-hominis-window-bar-command.mjs renderFocusRegion (order:
 *      back · forward · reload⇄stop · identity favicon · location
 *      field · bookmark star · ext chips · new-tile +) and
 *      moz-hominis-window-bar.css .command-bar / button.command-identity
 *      (24px small icon ghost boxes in the bar). */
.hx-command-focus {
  justify-content: flex-start;
  gap: var(--hominis-gap-s);
  cursor: default;
}

.hx-cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hominis-chrome-text);
  border-radius: var(--hominis-inner-radius);
  cursor: pointer;
}

.hx-cbtn:hover:not([disabled]) {
  background: var(--hominis-chrome-line);
}

.hx-cbtn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.hx-cbtn > .hx-glyph {
  width: 14px;
  height: 14px;
}

.hx-cbtn .hx-favicon {
  width: 16px;
  height: 16px;
}

.hx-command-url {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  border: none;
  background: none;
  color: var(--hominis-chrome-text);
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

/* saved star: accent fill (src: moz-hominis-window-bar.css
 * .command-bookmark-star[data-saved="true"]) */
.hx-cbtn[data-saved="true"] {
  color: var(--hominis-accent);
}

/* ------------------------------------------------------------------
 * Workspace switcher panel.
 * src: engine/toolkit/content/widgets/moz-hominis-workspace-switcher/
 *      moz-hominis-workspace-switcher.css (:host, .panel-label,
 *      .workspace-row, .row-name, .row-badge, .row-id-label,
 *      .panel-footer, .footer-sep, footer entries incl. the private
 *      row's violet + mask). Engine portals it fixed at z 105 from the
 *      live pill rect; the mock anchors inside its showcase panel.
 * ------------------------------------------------------------------ */
.hx-switcher {
  position: absolute;
  z-index: 105;
  display: flex;
  flex-direction: column;
  gap: var(--hominis-gap-m);
  min-width: 260px;
  max-width: 360px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: var(--hominis-overlay-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-chrome-surface-raised);
  box-shadow: var(--hominis-shadow-high);
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
}

/* the group-label recipe (ux-reference §3; hierarchy-law clause 6) */
.hx-panel-label {
  margin: 0;
  padding: 8px 11px 4px;
  font: 600 10px var(--hominis-mono-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hominis-chrome-text-faint);
}

.hx-ws-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hx-ws-row {
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-l);
  padding: 8px 10px;
  border-radius: var(--hominis-inner-radius);
  cursor: pointer;
}

.hx-ws-row:hover {
  background: var(--hominis-chrome-line);
}

.hx-ws-row[aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--hominis-accent);
  background: color-mix(in srgb, var(--hominis-accent) 13%, transparent);
}

.hx-ws-row .hx-row-name {
  font-family: var(--hominis-display-font);
  flex: 1;
  min-width: 8ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-row-badge {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--hominis-full-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  color: var(--hominis-chrome-text-muted);
  font-size: 0.85em;
}

.hx-row-id-label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 10.5px var(--hominis-mono-font);
  color: var(--hominis-chrome-text-muted);
}

.hx-panel-footer {
  border-top: 1px solid var(--hominis-chrome-line);
  padding-top: 6px;
}

.hx-footer-sep {
  height: 1px;
  margin: 5px 8px;
  background: var(--hominis-chrome-line);
}

.hx-footer-entry {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--hominis-chrome-text);
  font: inherit;
  text-align: start;
  border-radius: var(--hominis-inner-radius);
  cursor: pointer;
  box-sizing: border-box;
}

.hx-footer-entry:hover {
  background: var(--hominis-chrome-line);
}

/* private entry: violet + mask icon, never color-alone */
.hx-footer-entry[data-private-entry] {
  position: relative;
  padding-inline-start: 34px;
  color: var(--hominis-private-accent);
}

.hx-footer-entry[data-private-entry]::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  background: var(--hominis-private-accent);
  mask: var(--hx-icon-private) center / 16px no-repeat;
  -webkit-mask: var(--hx-icon-private) center / 16px no-repeat;
}

/* ------------------------------------------------------------------
 * Note applet (block editor).
 * src: engine/toolkit/content/widgets/moz-hominis-note/
 *      moz-hominis-note.css (.note-page/.note-doc/.note-title/.nb-*)
 *      + engine/browser/themes/shared/hominis-chrome.css
 *      #hominis-note-slash (the portalled slash menu)
 * ------------------------------------------------------------------ */
.hx-note-page {
  position: absolute;
  inset: 0;
  background: var(--hominis-chrome-surface);
  color: var(--hominis-chrome-text);
  overflow: hidden;
  font: 13px/1.5 var(--hominis-display-font);
}

.hx-note-doc {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.hx-note-title {
  font-family: var(--hominis-display-font);
  font-size: 1.7em;
  font-weight: 700;
  padding: 4px 0 12px;
}

.hx-note-blocks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hx-nb {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 1px 4px;
  line-height: 1.5;
}

.hx-nb-h2 {
  font-size: 1.25em;
  font-weight: 650;
}

.hx-nb .hx-note-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-micro-radius);
  color: var(--hominis-accent-ink);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
}

.hx-nb .hx-note-check.on {
  background: var(--hominis-accent);
  border-color: var(--hominis-accent);
}

.hx-nb.done {
  text-decoration: line-through;
  color: var(--hominis-chrome-text-muted);
}

.hx-nb .hx-note-bullet {
  flex: none;
  margin-top: 1px;
  color: var(--hominis-chrome-text-muted);
}

.hx-nb-callout {
  background: var(--hominis-chrome-surface-raised);
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-inner-radius);
  padding: 8px 10px;
}

.hx-note-slash {
  position: absolute;
  z-index: 110;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--hominis-overlay-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-chrome-surface-raised);
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
  box-sizing: border-box;
  font: 13px/1.4 var(--hominis-display-font);
}

.hx-note-slash .slash-item {
  text-align: start;
  padding: 5px 8px;
  border-radius: var(--hominis-micro-radius);
}

.hx-note-slash .slash-item.sel {
  background: color-mix(in srgb, var(--hominis-chrome-text) 10%, transparent);
}

/* ------------------------------------------------------------------
 * Editor applet (CodeMirror frame).
 * src: engine/toolkit/content/widgets/moz-hominis-editor/
 *      moz-hominis-editor.css (.editor-frame, the ONE 28px bar recipe,
 *      .editor-split 200px explorer, .tree-row, .tab/.tab-dirty,
 *      .status-bar)
 * ------------------------------------------------------------------ */
.hx-ed-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--hominis-chrome-surface);
  color: var(--hominis-chrome-text);
  overflow: hidden;
  font: 12px/1.5 var(--hominis-display-font);
}

.hx-ed-bar {
  min-height: 28px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-block-end: 1px solid var(--hominis-chrome-line);
  background: var(--hominis-chrome-surface-raised);
  gap: var(--hominis-gap-s);
  padding: 2px 6px;
}

.hx-ed-view-btn {
  font-size: 0.85em;
  padding: 2px 10px;
  border-radius: var(--hominis-micro-radius);
  color: var(--hominis-chrome-text-muted);
  margin-left: auto;
}

.hx-ed-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: 200px 4px 1fr;
}

.hx-ed-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-inline-end: 1px solid var(--hominis-chrome-line);
  background: var(--hominis-chrome-surface-raised);
}

.hx-ed-tree {
  padding: 4px 0;
  font-size: 0.85em;
  flex: 1;
  overflow: hidden;
}

.hx-ed-tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px calc(8px + var(--tree-depth, 0) * 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hx-ed-tree-row .twist {
  inline-size: 1em;
  color: var(--hominis-chrome-text-muted);
}

.hx-ed-tree-row.dir {
  color: var(--hominis-chrome-text);
}

.hx-ed-tree-row.file {
  color: var(--hominis-chrome-text-muted);
}

.hx-ed-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.hx-ed-tabs {
  min-height: 28px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  border-block-end: 1px solid var(--hominis-chrome-line);
  background: var(--hominis-chrome-surface-raised);
  overflow: hidden;
}

.hx-ed-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 12px;
  font-size: 0.85em;
  color: var(--hominis-chrome-text-muted);
  border-inline-end: 1px solid var(--hominis-chrome-line);
  white-space: nowrap;
}

.hx-ed-tab.active {
  background: var(--hominis-chrome-surface);
  color: var(--hominis-chrome-text);
}

.hx-ed-tab .dirty::before {
  content: "●";
  font-size: 0.7em;
  color: var(--hominis-accent);
}

.hx-ed-surface {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font: 11px/1.6 var(--hominis-mono-font);
  padding: 6px 0;
}

.hx-ed-line {
  display: flex;
  gap: 12px;
  padding: 0 10px;
  white-space: pre;
}

.hx-ed-line .ln {
  flex: none;
  width: 2ch;
  text-align: right;
  color: var(--hominis-chrome-text-faint);
}

.hx-ed-line .c-k { color: var(--hominis-ink-iris); }
.hx-ed-line .c-f { color: var(--hominis-ink-teal); }
.hx-ed-line .c-s { color: var(--hominis-ink-amber); }
.hx-ed-line .c-c { color: var(--hominis-chrome-text-faint); }

.hx-ed-status {
  display: flex;
  align-items: center;
  min-height: 24px;
  box-sizing: border-box;
  gap: var(--hominis-gap-m);
  padding: 2px 10px;
  font-size: 0.75em;
  font-family: var(--hominis-mono-font);
  color: var(--hominis-chrome-text-muted);
  border-block-start: 1px solid var(--hominis-chrome-line);
  background: var(--hominis-chrome-surface-raised);
}

.hx-ed-status .file {
  color: var(--hominis-chrome-text);
}

.hx-ed-status .saved {
  color: var(--hominis-accent);
}

/* ------------------------------------------------------------------
 * Sketch board applet.
 * src: engine/toolkit/content/widgets/moz-hominis-sketch-surface/
 *      moz-hominis-sketch-surface.css (.hs-surface board, .hs-grid,
 *      .hs-sticky, .hs-toolbar/.hs-tool/.hs-tb-div/.hs-style-chip,
 *      .hs-zoom) + -toolbar.mjs TOOL_GLYPHS (geometric-stroke set)
 * ------------------------------------------------------------------ */
.hx-hs-surface {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: var(--hominis-chrome-surface);
}

.hx-hs-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    var(--hominis-canvas-grid-tint) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
}

.hx-hs-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hx-hs-sticky {
  position: absolute;
  border-radius: var(--hominis-inner-radius);
  box-shadow: var(--hominis-shadow-low);
  padding: 10px;
  overflow: hidden;
  color: var(--hominis-ink-black);
  font: 12px/1.4 var(--hominis-display-font);
  box-sizing: border-box;
}

.hx-hs-toolbar-row {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.hx-hs-toolbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--hominis-pill-height);
  padding: 0 8px;
  border-radius: var(--hominis-pill-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-material-pill);
  backdrop-filter: blur(var(--hominis-blur, 12px));
  -webkit-backdrop-filter: blur(var(--hominis-blur, 12px));
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
}

.hx-hs-div {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--hominis-chrome-boundary);
}

.hx-hs-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--hominis-micro-radius);
  background: none;
  color: inherit;
  cursor: pointer;
}

.hx-hs-tool svg {
  width: 17px;
  height: 17px;
}

.hx-hs-tool:hover {
  background: var(--hominis-chrome-surface-raised);
}

.hx-hs-tool.active {
  background: var(--hominis-accent);
  color: var(--hominis-accent-ink);
}

.hx-hs-style-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--hominis-chrome-boundary);
}

.hx-hs-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: var(--hominis-full-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-material-pill);
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
  font: 12px/1.4 var(--hominis-display-font);
}

.hx-hs-zoom span,
.hx-hs-zoom b {
  padding: 2px 6px;
  font-weight: 400;
}

.hx-hs-zoom b {
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
}

/* ------------------------------------------------------------------
 * History applet.
 * src: engine/toolkit/content/widgets/moz-hominis-history/
 *      moz-hominis-history.css (.history-shell/-toolbar/.query-input/
 *      .refine-pop, .history-body 232px|1fr|232px grid, .cal-* heat
 *      ramp 18/36/56/78%, .range-bar, .hist-* timeline rows,
 *      .journey-card, .meta-* pane, seg viewbar)
 * ------------------------------------------------------------------ */
.hx-hist {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--hominis-chrome-text);
  background: var(--hominis-chrome-surface);
  font: 12.5px/1.5 var(--hominis-display-font);
}

.hx-hist-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-block-end: 1px solid var(--hominis-chrome-line);
  flex-wrap: wrap;
}

.hx-hist-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-m);
  flex: 1;
  min-width: 180px;
}

.hx-hist-query {
  flex: 1;
  min-width: 120px;
  padding: 5px 9px;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-pill-radius);
  background: var(--hominis-chrome-surface-raised);
  color: var(--hominis-chrome-text);
  font: inherit;
}

.hx-hist-btn {
  padding: 5px 10px;
  font: inherit;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-inner-radius);
  background: none;
  color: var(--hominis-chrome-text);
  cursor: pointer;
}

.hx-hist-select {
  padding: 4px 7px;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-inner-radius);
  background: var(--hominis-chrome-surface);
  color: var(--hominis-chrome-text);
  font: inherit;
}

.hx-hist-seg {
  display: flex;
  gap: 2px;
}

.hx-hist-seg button {
  padding: 5px 10px;
  border: 0;
  background: none;
  color: var(--hominis-chrome-text-muted);
  border-radius: var(--hominis-inner-radius);
  font: inherit;
  cursor: pointer;
}

.hx-hist-seg button[aria-selected="true"] {
  background: var(--hominis-accent);
  color: var(--hominis-accent-ink);
}

.hx-hist-broom {
  padding-inline-start: 30px;
  position: relative;
  color: var(--hominis-danger);
  border-color: var(--hominis-chrome-boundary);
}

.hx-hist-broom::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 14px;
  height: 14px;
  background: var(--hominis-danger);
  mask: var(--hx-icon-close) center / contain no-repeat;
  -webkit-mask: var(--hx-icon-close) center / contain no-repeat;
}

.hx-hist-body {
  display: grid;
  grid-template-columns: 232px 1fr 232px;
  flex: 1;
  min-height: 0;
}

.hx-hist-cal,
.hx-hist-meta {
  padding: 12px;
  border-inline-end: 1px solid var(--hominis-chrome-line);
  overflow: hidden;
  min-height: 0;
}

.hx-hist-meta {
  border-inline-end: none;
  border-inline-start: 1px solid var(--hominis-chrome-line);
}

.hx-hist-main {
  min-height: 0;
  padding: 8px 14px;
  overflow: hidden;
}

.hx-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 8px;
  font-weight: 600;
  font-size: 0.95em;
}

.hx-cal-grid {
  display: grid;
  gap: 2px;
}

.hx-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.hx-cal-day {
  aspect-ratio: 1;
  min-width: 20px;
  min-height: 20px;
  border-radius: var(--hominis-inner-radius);
  background: var(--hominis-chrome-surface-raised);
  color: var(--hominis-chrome-text);
  font-size: 0.8em;
  display: grid;
  place-items: center;
}

.hx-cal-day[data-heat="1"] { background: color-mix(in srgb, var(--hominis-accent) 18%, transparent); }
.hx-cal-day[data-heat="2"] { background: color-mix(in srgb, var(--hominis-accent) 36%, transparent); }
.hx-cal-day[data-heat="3"] { background: color-mix(in srgb, var(--hominis-accent) 56%, transparent); }
.hx-cal-day[data-heat="4"] { background: color-mix(in srgb, var(--hominis-accent) 78%, transparent); }

.hx-cal-day[data-outside] {
  color: var(--hominis-chrome-text-muted);
  opacity: 0.55;
  background: none;
}

.hx-cal-day[data-today] {
  font-weight: 700;
}

.hx-cal-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-block-start: 6px;
  font-size: 0.72em;
  color: var(--hominis-chrome-text-muted);
}

.hx-cal-legend i {
  width: 10px;
  height: 10px;
  border-radius: var(--hominis-micro-radius);
}

.hx-range-bar {
  display: flex;
  gap: var(--hominis-gap-s);
  margin-block-start: 10px;
  flex-wrap: wrap;
}

.hx-range-bar .hx-hist-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: 0.85em;
}

.hx-hist-dayhead {
  font-size: 0.85em;
  color: var(--hominis-chrome-text-muted);
  margin: 12px 0 4px;
}

.hx-hist-row {
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-l);
  padding: 5px 8px;
  border-radius: var(--hominis-inner-radius);
  min-width: 0;
}

.hx-hist-row:hover {
  background: var(--hominis-chrome-surface-raised);
}

.hx-hist-row .row-time {
  color: var(--hominis-chrome-text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  min-width: 3.4em;
}

.hx-hist-row .row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-hist-row .row-type {
  font-size: 0.75em;
  padding: 1px 7px;
  border-radius: var(--hominis-full-radius);
  border: 1px solid color-mix(in srgb, var(--hominis-accent) 45%, transparent);
  color: var(--hominis-accent);
  white-space: nowrap;
}

.hx-hist-row .row-journey {
  font-size: 0.78em;
  padding: 0 var(--hominis-gap-s);
  border: 1px solid var(--hominis-chrome-line);
  border-radius: var(--hominis-full-radius);
  color: inherit;
}

.hx-hist-row .dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

.hx-journey-card {
  border: 1px solid var(--hominis-chrome-line);
  border-radius: var(--hominis-inner-radius);
  overflow: hidden;
  margin-top: 8px;
}

.hx-journey-head {
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-m);
  padding: var(--hominis-gap-m);
}

.hx-journey-mono {
  inline-size: 1.6em;
  block-size: 1.6em;
  display: grid;
  place-items: center;
  border-radius: var(--hominis-micro-radius);
  border: 1px solid var(--hominis-chrome-line);
  font-size: 0.85em;
}

.hx-journey-name {
  font-weight: 600;
  flex: 1;
}

.hx-journey-meta {
  font-size: 0.85em;
  opacity: 0.75;
  white-space: nowrap;
}

.hx-meta-title {
  margin: 0 0 2px;
  font-size: 0.95em;
  font-weight: 600;
}

.hx-meta-url {
  font-size: 0.8em;
  color: var(--hominis-chrome-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-block-end: 10px;
}

.hx-meta-line {
  display: flex;
  justify-content: space-between;
  gap: var(--hominis-gap-l);
  font-size: 0.88em;
  padding: 3px 0;
}

.hx-meta-line .k {
  color: var(--hominis-chrome-text-muted);
}

/* ------------------------------------------------------------------
 * Media glyph + fly card.
 * src: engine/toolkit/content/widgets/moz-hominis-media-glyph/
 *      moz-hominis-media-glyph.css (12px accent corner badge, 2px
 *      surface ring, speaker mark 8/12 scale) and
 *      moz-hominis-media-controls/moz-hominis-media-controls.css
 *      (.media-card 148–240px, caret diamond, .card-title,
 *      .card-controls, .card-vol slide-out). Transport row template:
 *      -controls.mjs #renderCard (prev · play⇄pause · next · mute+vol
 *      — deliberately NO stop button). Speaker mark:
 *      browser/themes/shared/tabbrowser/tab-audio-playing-small.svg
 *      (MPL-2.0, header preserved in source tree).
 * ------------------------------------------------------------------ */
:root {
  --hx-icon-speaker: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M7.5 1.881V.595A5.499 5.499 0 0 1 12 6a5.499 5.499 0 0 1-4.5 5.405v-1.286C9.36 9.666 10.75 7.997 10.75 6c0-1.997-1.39-3.666-3.25-4.119zm-3.362-.594L2.791 3.581c-.031.053-.051.111-.071.169H1a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1h1.72a.93.93 0 0 0 .071.169l1.347 2.294c.516.879 1.862.513 1.862-.507V1.793C6 .774 4.654.408 4.138 1.287z"/><path d="M7.5 3.193v5.613c1.161-.413 2-1.504 2-2.807s-.839-2.393-2-2.806z"/></svg>');
  --hx-icon-play: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.992 13.498 0-10.996a1.5 1.5 0 0 1 2.245-1.303l9.621 5.498a1.5 1.5 0 0 1 0 2.605L5.237 14.8a1.5 1.5 0 0 1-2.245-1.302z"/></svg>');
  --hx-icon-pause: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.5 14h1A1.5 1.5 0 0 0 7 12.5v-9A1.5 1.5 0 0 0 5.5 2h-1A1.5 1.5 0 0 0 3 3.5v9A1.5 1.5 0 0 0 4.5 14zM10.5 14h1a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 11.5 2h-1A1.5 1.5 0 0 0 9 3.5v9a1.5 1.5 0 0 0 1.5 1.5z"/></svg>');
}

.hx-media-glyph {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.hx-media-glyph .hx-favicon {
  width: 100%;
  height: 100%;
  border-radius: var(--hominis-micro-radius);
}

.hx-media-badge {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  width: var(--hominis-media-badge-size);
  height: var(--hominis-media-badge-size);
  border-radius: 50%;
  background: var(--hominis-accent);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--hominis-chrome-surface);
}

.hx-media-badge::before {
  content: "";
  width: calc(var(--hominis-media-badge-size) * 8 / 12);
  height: calc(var(--hominis-media-badge-size) * 8 / 12);
  background: var(--hominis-media-badge-ink);
  mask: var(--hx-icon-speaker) center / contain no-repeat;
  -webkit-mask: var(--hx-icon-speaker) center / contain no-repeat;
}

.hx-media-card {
  position: absolute;
  z-index: 105;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 148px;
  max-width: 240px;
  padding: 7px 9px 6px;
  border-radius: var(--hominis-overlay-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-chrome-surface-raised);
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
}

/* the caret tether (rotated diamond on the anchor-facing edge) */
.hx-media-card[data-caret="top"]::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  rotate: 45deg;
  background: var(--hominis-chrome-surface-raised);
  border: 1px solid var(--hominis-chrome-boundary);
  top: -5px;
  left: calc(50% - 5px);
  border-bottom: none;
  border-right: none;
}

.hx-media-card .card-title {
  padding: 2px 4px;
  border-radius: var(--hominis-inner-radius);
  font-weight: 600;
  font-size: 0.85em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-media-card .card-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hominis-gap-s);
}

.hx-media-card .hx-cbtn > .hx-glyph {
  width: 13px;
  height: 13px;
}

.hx-media-card .media-volume {
  width: 58px;
  accent-color: var(--hominis-accent);
  margin: 0;
}

/* ------------------------------------------------------------------
 * Bookmarks shelf + canvas anchor.
 * src: engine/toolkit/content/widgets/moz-hominis-bookmarks-shelf/
 *      moz-hominis-bookmarks-shelf.css (.bm-shelf, .bm-shfilter,
 *      .bm-shhead, .bm-shgrid, .bm-shchip, .bm-chip-pin, .bm-shfoot)
 *      and engine/browser/themes/shared/hominis-canvas.css
 *      .hominis-bm-anchor (world-space pin chip + accent corner)
 * ------------------------------------------------------------------ */
.hx-shelf {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--hominis-gap-m);
  width: min(620px, 90%);
  padding: var(--hominis-gap-l);
  box-sizing: border-box;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-inner-radius);
  background: var(--hominis-chrome-surface-raised);
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
}

.hx-shelf-filter {
  padding: 6px var(--hominis-gap-m);
  border: 1px solid var(--hominis-chrome-line);
  border-radius: var(--hominis-inner-radius);
  background: var(--hominis-chrome-surface-recessed);
  color: var(--hominis-chrome-text);
  font: inherit;
}

.hx-shelf-head {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hominis-chrome-text-muted);
}

.hx-shelf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.hx-shelf-chip {
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-s);
  min-width: 0;
  padding: 4px var(--hominis-gap-s);
  border-radius: var(--hominis-inner-radius);
}

.hx-shelf-chip[aria-selected="true"] {
  background: var(--hominis-chrome-surface-recessed);
  outline: var(--hominis-focus-ring-width) solid var(--hominis-accent);
  outline-offset: -1px;
}

.hx-shelf-chip .title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-shelf-chip .host {
  flex: none;
  font-size: 0.72rem;
  color: var(--hominis-chrome-text-muted);
  margin-left: auto;
}

.hx-bm-anchor {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-s);
  padding: 3px 8px;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-full-radius);
  background: var(--hominis-chrome-surface-raised);
  box-shadow: var(--hominis-shadow-low);
  color: var(--hominis-chrome-text);
  font-size: 0.75rem;
}

.hx-bm-anchor::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: var(--hominis-micro-radius);
  background: var(--hominis-accent);
}

.hx-bm-anchor .hx-favicon {
  width: 14px;
  height: 14px;
  border-radius: var(--hominis-micro-radius);
}

/* ------------------------------------------------------------------
 * Downloads popover + bar badge ring.
 * src: engine/toolkit/content/widgets/moz-hominis-downloads-popover/
 *      moz-hominis-downloads-popover.css (:host 400px overlay,
 *      .downloads-search, .section-heading group label, .download-row,
 *      .row-ext-chip 32px, .row-state-chip, .row-progress 4px) and
 *      engine/browser/themes/shared/hominis-chrome.css
 *      #hominis-downloads-button (conic progress ring + fresh badge)
 * ------------------------------------------------------------------ */
.hx-dl-pop {
  position: absolute;
  z-index: 105;
  display: flex;
  flex-direction: column;
  width: min(400px, 92%);
  border-radius: var(--hominis-overlay-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-chrome-surface-raised);
  box-shadow: var(--hominis-shadow-high);
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
  padding: var(--hominis-gap-l);
  gap: var(--hominis-gap-l);
  box-sizing: border-box;
}

.hx-dl-search {
  padding: 6px 12px;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-pill-radius);
  background: var(--hominis-chrome-surface);
  color: inherit;
  font: inherit;
}

.hx-dl-heading {
  margin: 2px 4px;
  padding: 4px 0 2px;
  font: 600 10px var(--hominis-mono-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hominis-chrome-text-faint);
}

.hx-dl-row {
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-l);
  padding: 6px 8px;
  border-radius: var(--hominis-inner-radius);
}

.hx-dl-ext {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hominis-chrome-boundary);
  border-radius: var(--hominis-micro-radius);
  background: var(--hominis-chrome-surface-recessed);
  font: 700 8px var(--hominis-mono-font);
  letter-spacing: 0.04em;
  color: var(--hominis-accent);
}

.hx-dl-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.hx-dl-name-row {
  display: flex;
  align-items: center;
  gap: var(--hominis-gap-m);
  min-width: 0;
}

.hx-dl-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
  font-size: 0.92em;
}

.hx-dl-host {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 10.5px var(--hominis-mono-font);
  color: var(--hominis-chrome-text-muted);
}

.hx-dl-state {
  flex-shrink: 0;
  padding: 0 6px;
  border-radius: var(--hominis-full-radius);
  border: 1px solid var(--hominis-chrome-boundary);
  font-size: 0.72em;
  color: var(--hominis-chrome-text-muted);
}

.hx-dl-progress {
  height: 4px;
  border-radius: var(--hominis-full-radius);
  background: var(--hominis-chrome-boundary);
  overflow: hidden;
}

.hx-dl-progress i {
  display: block;
  height: 100%;
  border-radius: var(--hominis-full-radius);
  background: var(--hominis-accent);
}

/* the bar button's conic aggregate ring */
.hx-dl-ring {
  position: relative;
}

.hx-dl-ring::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: conic-gradient(
    var(--hominis-accent) calc(var(--hominis-dl-progress, 0) * 360deg),
    transparent 0
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2px)
  );
  pointer-events: none;
}

/* src: moz-hominis-history.css .row-icon (16px favicon in timeline rows) */
.hx-hist-row .row-icon {
  width: 16px;
  height: 16px;
  flex: none;
}