/* =========================================================================
   Hexa Family Library — Revit-native stylesheet.

   The library lives in a Revit dockable pane (WebView2, 254 px minimum width),
   so it looks like the HDTools Catalog pane (Figma "UI d1"), not like a web site:
   flat surfaces, 1 px borders, square corners, colours and metrics of the HDTools.UI
   design system (Tahoma 11, 25 px controls, 8/4 grid), 1 px line icons, marks in the corners.
   The theme follows Revit: the plug-in passes ?theme= / postMessage("hexa-theme"),
   otherwise the Windows setting is used (js/theme.js).

   Rules: every size and colour is a token; no !important except [hidden] and the
   reduced-motion reset; logical properties only (Arabic is right-to-left).

   01 Tokens (dark = UI d1)   05 Bar & status      09 Sheets (details, drawers)
   02 Light theme             06 Cards: grid       10 Auth
   03 Base                    07 Cards: large      11 Notice, toast, empty
   04 Controls                08 Cards: list       12 Touch & motion
   ========================================================================= */

/* Colour roles (2026-10-09): action = --cta (solid fills, pressed toggles, counters);
   selection / focus = --sel-line (frames, focus ring, selected rows); links = --link;
   every icon = --icon (HDTools.UI IconDefault); picture-well marks = --mark-icon. */
/* 01 Tokens — HDTools.UI design system (Alpha: DesignSystem/HDTools.UI/Themes/Dark.xaml,
   branch design/contrast-tahoma-2026-10-08). Comments name the HDTools_UI.Color.* role.
   The web pane maps 1:1 onto the Revit tool-pane roles (Tool*, Collection*), so it sits next
   to the WPF panes without a seam. Only the picture well is content, not chrome. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --pane: #333e50;          /* a touch lighter than ToolSurface; the toolbar keeps its own colour */
  --bar: #3e4a5d;           /* ToolToolbar */
  --bar-2: #364153;         /* ControlBg — tool buttons */
  --bar-2-line: #222933;    /* BorderDeep */
  --status-bg: #354257;     /* ToolStatus */
  --status-text: #e2ecff;   /* ToolStatusText */
  --surface: #3f4d63;       /* CollectionRowA */
  --line: #29323f;          /* Border */
  --line-soft: #29323f;     /* Border (dark controls are separated by fill) */
  --input: #364153;         /* ControlBg */
  --text: #bcd3ff;          /* Text */
  --text-strong: #bdd0f6;   /* TextStrong — values */
  --text-2: #b6ccf6;        /* TextHeader */
  --muted: #a9b9d9;         /* TextMuted — labels, helper */
  --icon: #b6ccf6;          /* IconDefault */
  --icon-2: #b6ccf6;
  --icon-hover: #e3eaf5;    /* ButtonTextHover */
  --ph: #6d7890;            /* IconDetail */
  --sel: #445476;           /* CollectionSelected */
  --sel-line: #6d9cff;      /* Accent */
  --sel-text: #f7f9fd;
  --sel-text-2: #bcd3ff;
  --hover: #38455c;         /* CollectionHover */
  --on-accent: #f2f5fa;     /* ButtonTextActive — default ButtonText #D3DBEA is 3.6:1 (open decision in HDTools.UI) */
  --cta: #516ead;           /* main action (Place, Show N): solid accent */
  --link: #8fb2ff;          /* blue text on surfaces (selected filter summary) */
  --tree-ink: var(--icon);  /* one ink for every icon: HDTools.UI IconDefault */
  --folder-name: #e3eaf5;   /* folder names: brighter than the icon beside them (ButtonTextHover) */
  --tree-line: #56637a;     /* tree guide lines: one quiet solid hairline */
  --scroll-thumb: color-mix(in srgb, #7d91b6 48%, transparent); /* ScrollThumb */
  --scroll-thumb-hover: #6d9cff;                                 /* ScrollThumbHover */
  --seg-on: var(--sel-text);
  --tab-panel: #3e4a5d;     /* PanelBg */
  --toggle-ink: #aab4c6;
  --clear: #e8919a;         /* clear / remove crosses: soft red (ButtonDanger family) */
  --clear-hover: #ffb3ba;
  --plan-free: #8fd0a2;     /* plan by level: Free green · Beta blue · Pro violet */
  --plan-beta: #8fb2ff;
  --plan-pro: #b9a5ff;
  --tab-line: #2e3642;      /* TabActiveBorder */
  --tab-text: #b4c3db;      /* TabInactiveText */
  --tab-active-text: #d3dbea; /* TabActiveText */
  --tab-hover: #313e50;     /* TabHoverBg */
  --tab-hover-text: #b5c5e0; /* TabHoverText */
  --cta-hover: #5d7cc0;
  --on-cta: #ffffff;
  --sheet: #333e50;         /* sheets / drawers */
  --menu: #3f4d63;          /* dropdown menus */
  --focus: #6d9cff;         /* Accent */

  --card: #435068;          /* soft: one step above PanelBg #3E4A5D */
  --card-hover: #4a5872;
  --card-sel: #516ead;      /* ButtonBg — selection fill */
  --card-line: #2a323f;     /* quiet edge */
  --card-media: #e7ecf3;    /* picture well (content): light, previews are mostly white */
  --media-dim: 0.82;        /* white pictures at 82 %: the card shows through, contrast closer to light */
  --media-line: var(--card-line);
  --card-accent: var(--sel-line); /* selection / focus blue (one value with --sel-line, --focus) */
  --st-dl: #4a78d8;         /* download: the same saturated blue as the light theme */
  --dl-rest: 85%;
  --st-ok: #7fb591;         /* green of the check in Pavel's UI d1 */
  --dot-new: #7fb591;       /* UI d1 green */
  --dot-pro: #a28af0;
  --dot-beta: #74a4ff;
  --card-media-line: #d3dbe7;
  --card-cat-text: #aebedd; /* quiet blue */
  --card-name: #d3dbea;     /* TabActiveText: bright, not glaring */
  --card-ph: #a9b7d0;
  --on-media: #436199;      /* light IconDefault, drawn on the light well */
  --status-loaded: #4c7a57; /* success */
  /* Tags sit on the light well, so they use the soft light-theme semantic fills */
  --tag-new-bg: #c9dbbf;    /* ButtonSuccessBg (light) */
  --tag-new-fg: #2c4431;
  --tag-pro-bg: #e1dcf3;    /* violet, soft */
  --tag-pro-fg: #41376f;
  --tag-beta-bg: #d4e4f9;   /* ButtonBg (light) */
  --tag-beta-fg: #2a4a7a;
  --fav: #436199;
  --danger: #e2b3b8;        /* ButtonDangerText family */
  --danger-bg: #74555f;     /* ButtonDangerBg */
  --success: #b8d8c2;
  --success-bg: #537665;    /* ButtonSuccessBg */
  --warning: #f7f1e2;       /* ButtonWarningText */
  --warning-bg: #83755c;    /* ButtonWarningBg */
  --backdrop: rgba(18, 22, 29, 0.6);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* 02 Light — HDTools.UI Light.xaml */
:root[data-theme="light"] {
  color-scheme: light;
  --pane: #e3e7ed;          /* a little darker than the card, not murky */
  --bar: #e9ebee;           /* between ToolToolbar #D9D9D9 and WorkspaceToolbarBg #F0F1F3 */
  --bar-2: #ffffff;         /* ControlBg */
  --bar-2-line: #7e90ba;    /* Border */
  --status-bg: #eef1f5;     /* ToolStatus */
  --status-text: #2a2a2a;   /* ToolStatusText */
  --surface: #edf1f6;       /* CollectionRowA */
  --line: #7e90ba;          /* Border */
  --line-soft: #bbc0c8;     /* BorderDeep */
  --input: #ffffff;         /* ControlBg */
  --text: #4f6187;          /* Text */
  --text-strong: #2e5183;   /* TextStrong */
  --text-2: #2e5183;        /* TextHeader */
  --muted: #5d6e97;         /* TextMuted */
  --icon: #436199;          /* IconDefault */
  --icon-2: #436199;
  --icon-hover: #24438f;    /* ButtonTextHover */
  --ph: #a9b7d0;
  --sel: #c2d8f6;           /* CollectionSelected */
  --sel-line: #608def;      /* Accent */
  --sel-text: #000000;      /* SelectionText */
  --sel-text-2: #2e5183;
  --hover: #d8e3f0;         /* CollectionHover */
  --on-accent: #2e5183;     /* ButtonText */
  --cta: #3d68c9;           /* main action: solid blue, white text 5.2:1 */
  --link: #3d68c9;
  --tree-ink: var(--icon);
  --folder-name: #2e5183;   /* TextStrong */
  --tree-line: #bfc7d2;
  --scroll-thumb: color-mix(in srgb, #7890ba 44%, transparent);
  --scroll-thumb-hover: #6d9cff;
  --seg-on: #2e5183;        /* TabActiveText */
  --tab-panel: #f7f8fa;
  --toggle-ink: #6f7a8e;
  --clear: #d06a76;
  --clear-hover: #b84a58;
  --plan-free: #4b9a68;
  --plan-beta: #2f62c8;
  --plan-pro: #6a4fc0;
  --tab-line: #b7beca;
  --tab-text: #5a6a93;
  --tab-active-text: #2e5183;
  --tab-hover: #e2e8f3;
  --tab-hover-text: #4c6998;
  --cta-hover: #345bb3;
  --on-cta: #ffffff;
  --sheet: #f4f6f9;         /* sheets / drawers: light, so the blue action reads */
  --menu: #ffffff;
  --focus: #608def;         /* Accent */

  --card: #edf0f4;          /* grey strips around the white picture */
  --card-hover: #e6ebf2;
  --card-sel: #dbe8fa;      /* soft SelectionBg */
  --card-line: #c6ccd6;     /* between BorderDeep #BBC0C8 and BorderDisabled */
  --card-media: #ffffff;
  --media-dim: 1;
  --media-line: #b9c3d3;    /* thin frame around the white picture */
  --card-accent: var(--sel-line);
  --st-dl: #4a78d8;         /* light theme: saturated, not grey */
  --dl-rest: 85%;
  --st-ok: #7fb591;         /* UI d1 green */
  --card-media-line: #e1e5ec;
  --card-cat-text: #436199; /* IconDefault — the blue touch */
  --card-name: #24365a;
  --card-ph: #b3c0d9;
  --on-media: #436199;      /* IconDefault */
  --status-loaded: #4c7a57;
  --tag-new-bg: #c9dbbf;    /* ButtonSuccessBg */
  --tag-new-fg: #2c4431;
  --tag-pro-bg: #e1dcf3;
  --tag-pro-fg: #41376f;
  --tag-beta-bg: #d4e4f9;   /* ButtonBg */
  --tag-beta-fg: #2a4a7a;
  --fav: #436199;
  --danger: #5a4046;        /* ButtonDangerText */
  --danger-bg: #fdf1f2;     /* StateDangerBg */
  --success: #314a36;       /* ButtonSuccessText */
  --success-bg: #f0faf4;    /* StateSuccessBg */
  --warning: #5a4b2f;       /* ButtonWarningText */
  --warning-bg: #fff6e8;    /* StateWarningBg */
  --backdrop: rgba(26, 31, 37, 0.35);
  --shadow: 0 8px 24px rgba(26, 31, 37, 0.18);
}

/* Metrics — HDTools.UI Metrics.xaml + CONTRACT.md: Tahoma 11 (house font, decided
   2026-10-08), hierarchy by colour (Bold only for titles), odd control heights
   (25 standard, 21 compact), 8-DIP grid, 4 inside compound controls. */
:root {
  --mask-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath d='M4.2 8.4l2.6 2.6 5-5.4' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='8' cy='8' r='8' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
  --mask-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath d='M8 4v8M4 8h8' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/mask%3E%3Ccircle cx='8' cy='8' r='8' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
  --mask-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath d='M8 3.4v7.6M4.7 7.8L8 11.1l3.3-3.3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='8' cy='8' r='8' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
  /* marks are drawn straight on the light picture well (both themes): no plates */
  --mark-ink: #34405a;                  /* dark text of NEW / PRO / BETA */
  --dot-new: #7fb591;                   /* UI d1 green */
  --dot-pro: #7a62c4;                   /* violet */
  --dot-beta: #4f7fe0;                  /* accent */
  --mark-icon: #436199;                 /* IconDefault (light) — heart, load */
  --mark-icon-hover: #24438f;           /* ButtonTextHover (light) */
  --dot-loaded: #4c8a5f;
  --font: Tahoma, Verdana, "Segoe UI", sans-serif;
  --font-ar: Tahoma, "Segoe UI", sans-serif;
  --font-zh: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --fs: 11px;               /* FontSize.Body */
  --fs-sm: 11px;            /* FontSize.Subtitle */
  --fs-lg: 13px;            /* FontSize.Title / Input */
  --lh: 15px;               /* whole pixels: a ratio (1.35 → 14.85 px) shifts everything below text */
  --fw-bold: 700;           /* Tahoma has Regular and Bold only */
  --pad: 8px;               /* panel padding */
  --gap: 8px;               /* between independent items */
  --in: 4px;                /* inside a compound control */
  --h: 25px;                /* standard control */
  --h-sm: 21px;             /* compact */
  --h-row: 51px;
  --thumb: 50px;
  --caption-h: 38px;
  --r: 0;
  --t: 160ms;               /* Motion hover */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 03 Base --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:lang(ar) { --font: var(--font-ar); }
html:lang(zh) { --font: var(--font-zh); }
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pane);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--text-2); }
[hidden] { display: none !important; } /* [hidden] must always win */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

.icon { width: 16px; height: 16px; max-width: none; flex: none; } /* never squeezed by a narrow parent */
.icon--sm { width: 12px; height: 12px; }
[dir="rtl"] .icon--flip { transform: scaleX(-1); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: var(--pad); inset-block-start: -100px; z-index: 100;
  padding: 4px var(--pad); background: var(--surface); color: var(--text);
}
.skip-link:focus { inset-block-start: var(--pad); }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.boot { flex: 1; display: grid; place-items: center; }
.spinner {
  width: 20px; height: 20px; border: 2px solid var(--line-soft);
  border-block-start-color: var(--icon); border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 04 Controls ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--h); padding: 0 10px 1px;
  border: 1px solid var(--bar-2-line); border-radius: var(--r);
  background: var(--bar-2); color: var(--text);
  font-size: var(--fs); line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn:hover { background: var(--hover); border-color: var(--line); color: var(--text); }
.btn--primary { background: var(--cta); border-color: var(--cta); color: var(--on-cta); }
.btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--on-cta); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

.icon-btn {
  position: relative;
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r);
  background: none; color: var(--icon-2);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.icon-btn:hover { background: var(--hover); color: var(--icon-hover); }
.icon-btn--box { width: var(--h); height: var(--h); padding: 0 1px 1px 0; background: var(--bar-2); border-color: var(--bar-2-line); }
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.dot {
  position: absolute; inset-block-start: 3px; inset-inline-end: 3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--flag-new);
}

.link-btn {
  min-height: 20px; padding: 0; border: 0; background: none;
  color: var(--text-2); font-size: var(--fs); text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--text); }

/* Segmented control: a rounded 24 px track with the same 2 px to the plate on every side. The plate is the
   pressed button's box (22 × 20, corners concentric with the track: 6 − 2 = 4) and it slides from one button
   to the other. A 16 px icon sits in it with 3 px at the sides and 2 px above and below. */
.segmented {
  position: relative; display: inline-flex; flex: none; padding: 2px;
  border-radius: 6px; background: var(--input);
}
.segmented__thumb {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 0;
  border-radius: 4px; background: var(--card-sel); pointer-events: none; will-change: transform;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), width 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity var(--t) var(--ease);
}
[dir="rtl"] .segmented__thumb { inset-inline-start: auto; left: 0; }
.segmented--still .segmented__thumb { transition: none; }
@media (prefers-reduced-motion: reduce) { .segmented__thumb { transition: none; } }
.segmented button {
  position: relative; z-index: 1; display: inline-grid; place-items: center;
  width: 22px; height: 20px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--muted); transition: color 260ms var(--ease);
}
.segmented button:hover { color: var(--icon-hover); }
.segmented button[aria-pressed="true"] { color: var(--seg-on); }   /* light: blue on the light thumb, never black */
.segmented--text button { width: auto; padding: 0 10px; font-size: var(--fs); }
.field { display: grid; gap: 3px; }
.field__label { font-size: var(--fs-sm); color: var(--muted); }
.field__control { position: relative; }
.input, .select {
  width: 100%; height: var(--h); padding: 0 6px; font-size: var(--fs-lg);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--input); color: var(--text); font-size: var(--fs);
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .select:hover { border-color: var(--line); }
.input:focus, .select:focus { outline: none; border-color: var(--sel-line); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[readonly] { opacity: 0.8; }
.input--with-btn { padding-inline-end: calc(var(--h) + 2px); }
.input[type="search"]::-webkit-search-cancel-button { display: none; }
.field__btn {
  position: absolute; inset-inline-end: 0; inset-block-start: 0;
  width: var(--h); height: var(--h); display: grid; place-items: center;
  border: 0; background: none; color: var(--icon-2);
}
.field__btn:hover { color: var(--icon); }
.select {
  appearance: none; padding-inline-end: 20px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
}
[dir="rtl"] .select { background-position: 7px 50%, 11px 50%; }
.select option { background: var(--surface); color: var(--text); }
.select--sm { width: auto; height: 20px; font-size: var(--fs-sm); }

.search { position: relative; flex: 1; min-width: 0; }
.search .input { padding-inline-end: 26px; }
.search:has(.search__clear:not([hidden])) .search__icon { display: none; }
.search__icon {
  position: absolute; inset-inline-end: 5px; inset-block-start: round(down, calc((var(--h) - 16px) / 2), 1px);
  color: var(--icon); pointer-events: none;
}
.search__clear {
  position: absolute; inset-inline-end: 3px; inset-block-start: round(down, calc((var(--h) - 20px) / 2), 1px);
  width: 20px; height: 20px; display: grid; place-items: center;
  border: 0; padding: 0; background: none; color: var(--icon-2);
}
.search__clear { color: var(--clear); }
.search__clear:hover { color: var(--clear-hover); }

.hint { font-size: var(--fs-sm); color: var(--muted); }
.hint:empty { display: none; }
.hint--error { color: var(--danger); }
.hint--success { color: var(--success); }
.hint--warning { color: var(--warning); }
.check { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; color: var(--text); cursor: pointer; }
.check input { width: 13px; height: 13px; margin: 0; accent-color: var(--cta); }

.notice { padding: 6px var(--pad); border-radius: var(--r); background: var(--surface); }
.notice--error { background: var(--danger-bg); color: var(--danger); }
.notice--success { background: var(--success-bg); color: var(--success); }
.notice--warning { background: var(--warning-bg); color: var(--warning); }

/* Marks on the picture: a coloured dot + plain dark text, plain icons — no plates or
   circles behind them. 4 px from the picture edges, one mark per corner. */
.corner { position: absolute; z-index: 2; display: flex; }
.corner:empty { display: none; }
.corner--tl { inset-block-start: 4px; inset-inline-start: 4px; }
.corner--bl { inset-block-end: 4px; inset-inline-start: 5px; }
.corner--br { inset-block-end: 4px; inset-inline-end: 5px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 12px;
  color: var(--mark-ink); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--new::before { background: var(--dot-new); }
.tag--pro::before { background: var(--dot-pro); }
.tag--beta::before { background: var(--dot-beta); }
.mark {
  display: block; width: 14px; height: 14px; padding: 0; border: 0;
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
  transition: filter var(--t) var(--ease);
}
.mark--download {
  --mask: var(--mask-download);
  background: color-mix(in srgb, var(--st-dl) var(--dl-rest), var(--card-media));
  transition: background var(--t) var(--ease);
}
.card:hover .mark--download, .card:focus-within .mark--download, .mark--download:hover { background: var(--st-dl); }
/* a guest sees the same button in grey: it works, but leads to sign-in first */
:root[data-guest] .mark--download { background: color-mix(in srgb, var(--tree-ink) var(--dl-rest), var(--card-media)); }
:root[data-guest] .card:hover .mark--download, :root[data-guest] .card:focus-within .mark--download, :root[data-guest] .mark--download:hover { background: var(--tree-ink); }
.mark--add { --mask: var(--mask-plus); background: var(--st-ok); }
.mark--loaded { --mask: var(--mask-check); background: var(--st-ok); }
button.mark { cursor: pointer; }
button.mark:hover { filter: brightness(1.12); }
.fav { color: var(--icon-2); }
.fav[aria-pressed="true"] { color: var(--fav); }

/* 05 Bar & status ------------------------------------------------------- */
.catalog { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bar {
  flex: none; display: grid; gap: 6px; padding: 4px 4px 6px;
  background: var(--bar); border-block-end: 1px solid var(--pane);
}
.bar__row { display: flex; align-items: center; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 2px; height: 20px; padding-inline: 6px 0;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  color: var(--text); font-size: var(--fs-sm); line-height: 18px;
}
.chip button { flex: none; width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: var(--clear); }
.chip button:hover { color: var(--clear-hover); }
.catalog__body { flex: 1; min-height: 0; display: flex; }
/* Side column with the category tree: only in a wide window; the Revit panel and narrow windows keep the folder rows alone */
.side { display: none; }
@media (min-width: 576px) { /* 352 px the bar needs (9 section tabs + 3 side buttons) + the 224 px column */
  :root:not([data-embed]) .side { position: relative; flex: none; display: flex; width: 224px; border-inline-end: 1px solid var(--tab-line); background: var(--tab-panel); }
}
.side__tree { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
.side__tree.has-scroll { padding-inline-end: 8px; }
.content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 4px; }
/* The scroll of the design system (HdScrollViewer): no browser bar; an 8 px track, a 4 px rounded thumb */
.hd-sa-host { position: relative; }
.hd-sa-view { scrollbar-width: none; }
.hd-sa-view::-webkit-scrollbar { display: none; }
.hd-sa-bar { position: absolute; z-index: 2; inset-inline-end: 0; width: 8px; }
.hd-sa-bar[hidden] { display: none; }
.hd-sa-thumb { position: absolute; top: 0; left: 2px; width: 4px; border-radius: 2px; background: var(--scroll-thumb); transition: background-color 140ms; }
.hd-sa-bar:hover .hd-sa-thumb, .hd-sa-thumb.drag { background: var(--scroll-thumb-hover); }
.content.has-scroll, .panel__body.has-scroll, .sheet__body.has-scroll:not(.sheet__body--stack) { padding-inline-end: 8px; }
.status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 06 Cards: grid — the picture leads, name + category under it -------- */
.cards { display: grid; gap: 2px; align-items: stretch; }
.cards--grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.cards--large { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cards--list { grid-template-columns: minmax(0, 1fr); gap: 2px; }

.card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--card-line); border-radius: 2px; background: var(--card);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card:hover, .card:focus-within { background: var(--card-hover); border-color: color-mix(in srgb, var(--card-accent) 55%, var(--card-line)); }
.card[aria-current="true"] { background: var(--card-sel); border-color: var(--card-accent); }
.card__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden;
  background: color-mix(in srgb, var(--card-media) calc(var(--media-dim) * 100%), var(--card)); color: var(--card-ph);
}
.card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: 1px solid var(--media-line);
}
.card__media img { width: 100%; height: 100%; object-fit: contain; opacity: var(--media-dim); }
.card__ph { width: 48px; height: 36px; flex: none; } /* drawn for 48 × 36, never scaled */
.card__ph--cat { color: #436199; opacity: 0.45; } /* category icon, native 19 px, 45 % as in the plug-in preview tiles (the well is light in both themes) */
/* centred on whole pixels (a .5 offset would blur the 1 px lines) */
.card__media > .card__ph, .details__media > .card__ph {
  position: absolute; inset-inline-start: round(down, calc((100% - var(--pw, 48px)) / 2), 1px); inset-block-start: round(down, calc((100% - var(--ph, 36px)) / 2), 1px);
}
.card__caption { flex: 1; display: grid; align-content: center; padding: 5px 8px 6px; }
.card__title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  font-size: var(--fs-sm); font-weight: 400; line-height: 14px; overflow-wrap: anywhere; text-align: start;
}
.card__cat {
  overflow: hidden; height: 20px; padding: 0 8px;
  color: var(--card-cat-text); font-size: var(--fs); line-height: 20px;
  white-space: nowrap; text-overflow: ellipsis; text-align: center;
}
.card__open { color: var(--card-name); text-decoration: none; }
.card[aria-current="true"] .card__open { color: var(--sel-text); }
.card__open::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.card__open:focus-visible { outline: none; }
.card:has(.card__open:focus-visible) { outline: 1px solid var(--focus); outline-offset: 1px; }
/* Heart: a plain blue icon at the picture's top-right */
.card__fav {
  position: absolute; z-index: 3; inset-block-start: calc(20px + 2px); inset-inline-end: 2px;
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0;
  background: none; color: var(--mark-icon); line-height: 0; transition: color var(--t) var(--ease);
}
.card__fav .icon { width: 16px; height: 16px; }
.card__fav:hover { color: var(--mark-icon-hover); }
.card__fav[aria-pressed="true"] { color: var(--mark-icon); }
.card__tags { display: none; }
.cards--grid .card__media, .cards--large .card__media { margin-inline: -1px; }
/* grid: thin strips — category 14 px, the name on one line (full name in the tooltip and details) */
.cards--grid .card__cat { height: 14px; padding: 0 6px; font-size: var(--fs-sm); line-height: 14px; }
.cards--grid .card__fav { inset-block-start: calc(14px + 2px); }
.cards--grid .card__caption { padding: 3px 6px 4px; }
.cards--grid .card__title { line-height: 14px; }

/* Folder mode: a section is a folder row (folds, whole row is the button); its category tiles follow it.
   A category tile is a card whose name is a button; the category's own icon (native 19 px, the artwork's
   own dark ink: the picture well is light in both themes) sits tight in the top-right corner. */
.folders__head, .folders__back { grid-column: 1 / -1; display: flex; align-items: center; min-width: 0; }
.folders__icon { flex: none; color: var(--tree-ink); }
.folders__head { height: 32px; background: var(--bar-2); border-radius: 2px; } /* rows 2 px apart: the gap is the dividing line; 32 = 24 px icon + 4 + 4, whole screen pixels at 125 / 150 / 175 % */
/* a kind inside a category: its arrow stands under the category icon */
.folders__head--sub { background: color-mix(in srgb, var(--bar-2) 55%, var(--pane)); }
/* the tree: what a folder holds stands 20 px to the right of it; the guides (.fg, placed by catalog.js) run in that strip */
.cards--folders { position: relative; padding-inline-start: 20px; }
.cards--folders > .folders__head:not(.folders__head--sub) { margin-inline-start: -20px; }
.cards--list > .in2 { margin-inline-start: 20px; }
/* a row sliding over the tiles (catalog.js ride): its 2 px gaps move with it as a solid frame of the pane colour */
.cards > .riding { box-shadow: 0 0 0 2px var(--skirt, transparent); }
.cards > .folders__head.riding { position: relative; z-index: 0; box-shadow: none; }
.cards > .folders__head.riding::before { content: ''; position: absolute; inset: -2px; z-index: -1; background: var(--skirt, transparent); }
.cards > .folders__head.riding::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: inherit; }
.fg { position: absolute; inset-inline-start: 9px; width: 9px; border-inline-start: var(--hair, 1px) solid var(--tree-line); pointer-events: none; list-style: none; }
.fg--2 { inset-inline-start: 29px; }
.fg--stub::after { content: ''; position: absolute; inset-inline-start: 0; top: var(--gy); width: 8px; height: var(--hair, 1px); background: var(--tree-line); }
.folders__toggle {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 4px;
  border: 0; border-radius: 2px; background: none; color: inherit; font: inherit;
  text-align: start; cursor: pointer;
}
.folders__toggle:hover { background: var(--hover); }
.folders__toggle:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
.folders__chev { flex: none; width: 12px; height: 12px; color: var(--tree-ink); } /* 12 px glyph in a 32 px row: 10 px above and below, whole pixel */
.folders__toggle[aria-expanded="false"] .folders__chev { transform: rotate(-90deg); }
[dir="rtl"] .folders__toggle[aria-expanded="false"] .folders__chev { transform: rotate(90deg); }
.bar__fold:disabled { opacity: 0.35; cursor: default; }
.bar__fold + .bar__fold { margin-inline-start: 2px; } /* 4 px between the two buttons of one row */
.folders__toggle .tag { order: 1; flex: none; margin-block-start: 1px; color: var(--card-cat-text); }
/* the right side of a row is a fixed grid, so nothing jumps from row to row: the number in a 24 px column (4 digits),
   8 px from the edge; the marks (NEW…) end 8 px before that column */
.folders__name { flex: 1; }
.folders__count { order: 2; flex: none; box-sizing: content-box; width: 24px; padding-inline-end: 4px; text-align: end; color: var(--tree-ink); font-weight: 400; font-variant-numeric: tabular-nums; }
/* an empty shelf of the design classification: the row stays solid (rows slide over tiles), its content is dimmed */
.folders__head--empty .folders__toggle > * { opacity: 0.45; }
.folders__toggle:disabled { cursor: default; }
.folders__toggle:disabled:hover { background: none; }
.panel__field { gap: 8px; padding: 8px var(--pad); }
.panel__field .segmented { justify-self: start; }
.panel__field .segmented button { width: 64px; padding: 0; } /* equal cells on whole pixels */
.folders__name { color: var(--folder-name); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.folders__up {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 27px; padding: 0 8px;
  border: 1px solid var(--card-line); border-radius: 2px; background: var(--card); color: var(--text-2);
  font: inherit; cursor: pointer;
}
.folders__up:hover { background: var(--card-hover); border-color: var(--focus); }
.folders__up:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.folders__up .icon { flex: none; }
.folders__here { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--fw-bold); }
.folder__open { padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.folder__mark { position: absolute; z-index: 2; inset-block-start: 4px; inset-inline-end: 4px; display: flex; color: #436199; }

/* 07 Cards: large (one per row in the pane) ----------------------------- */
.cards--large .card__media { aspect-ratio: 1; }
.cards--large .card__caption { padding: 8px 10px 9px; }
.cards--large .card__cat { height: 24px; line-height: 24px; padding-inline: 10px; }
.cards--large .card__fav { inset-block-start: calc(24px + 3px); inset-inline-end: 3px; }
.cards--large .card__title { font-size: var(--fs); line-height: 16px; }

/* 08 Cards: list — category above, the name on the row's centre line, tags below;
   heart and a small status circle at the row end */
.cards--list .card {
  display: grid; grid-template-columns: calc(var(--thumb) + 1px) minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center;
  grid-template-areas: "thumb cat" "thumb name" "thumb tags";
  column-gap: 9px; min-height: var(--thumb); padding: 0; padding-inline-end: 48px; border-radius: 2px;
}
/* the square picture sits flush in the card: no inner margin and no second frame, one hairline parts it from the text */
.cards--list .card__media { grid-area: thumb; grid-row: 1 / -1; align-self: start; width: calc(var(--thumb) + 1px); height: var(--thumb); aspect-ratio: auto; border-inline-end: 1px solid var(--card-line); }
.cards--list .card__media::after { content: none; }
.cards--list .card__media img { transform: none; }
.cards--list .card__cat { grid-area: cat; height: auto; padding: 0; font-size: var(--fs-sm); line-height: 14px; text-align: start; }
.cards--list .card__caption { grid-area: name; padding: 0; }
.cards--list .card__title { font-size: var(--fs); line-height: 16px; -webkit-line-clamp: 2; line-clamp: 2; }
.cards--list .card__tags:not(:empty) { grid-area: tags; display: flex; gap: 8px; margin-block-start: 2px; }
.cards--list .tag { color: var(--card-name); }
.cards--list .corner--bl, .cards--list .corner--br { display: none; }
/* the status circle moves from the thumbnail to the row end, under the heart */
.cards--list .card__media { position: static; }
.cards--list .corner--tl { inset-block-start: auto; inset-block-end: 8px; inset-inline-start: auto; inset-inline-end: 10px; }
.cards--list .mark { width: 12px; height: 12px; }
.cards--list .card__fav { inset-block-start: 6px; inset-inline-end: 7px; width: 20px; height: 20px; color: var(--icon-2); }
.cards--list .card__fav[aria-pressed="true"] { color: var(--icon); }

.skeleton { background: var(--card); border: 1px solid var(--card-line); border-radius: 2px; animation: pulse 1.2s ease-in-out infinite; }
.cards--grid .skeleton { aspect-ratio: 110 / 150; }
.cards--large .skeleton { aspect-ratio: 1 / 1.2; }
.cards--list .skeleton { height: calc(var(--thumb) + 2px); }
@keyframes pulse { 50% { opacity: 0.55; } }

/* 09 Sheets: details (full pane) and drawers ---------------------------- */
.sheet, .notice-dialog {
  max-width: 100%; max-height: 100%; padding: 0;
  border: 1px solid var(--line-soft); background: var(--sheet); color: var(--text);
}
.sheet::backdrop, .notice-dialog::backdrop { background: var(--backdrop); }
.sheet { width: 100%; height: 100%; margin: 0; inset: 0; border: 0; }
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet[open]::backdrop, .notice-dialog[open]::backdrop { animation: fade-in 220ms ease-out; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet[open], .sheet[open]::backdrop, .notice-dialog[open]::backdrop, .panel[open] { animation: none; } }
.sheet--drawer { inset-inline: auto 0; width: min(340px, 100%); border-inline-start: 1px solid var(--line-soft); }
.sheet__head {
  flex: none; display: flex; align-items: center; gap: 4px; min-height: 29px; padding: 0 4px;
  background: var(--bar); border-block-end: 1px solid var(--pane);
}
.sheet__title { flex: 1; padding-inline-start: 4px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-2); }
.sheet__pos { flex: 1; text-align: center; color: var(--text-2); font-size: var(--fs-sm); }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; }
.sheet__body--stack { display: grid; align-content: start; gap: 16px; padding: var(--pad) var(--pad) 16px; }
.sheet__foot {
  flex: none; display: flex; justify-content: flex-end; gap: 6px; padding: 6px var(--pad);
  background: var(--status-bg); border-block-start: 1px solid var(--pane);
}

.details { display: grid; grid-template-columns: minmax(0, 1fr); }
.details > * { min-width: 0; }
.details__info { grid-template-columns: minmax(0, 1fr); }
.details__info > * { min-width: 0; }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
.details__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; max-width: 520px; margin-inline: auto; overflow: hidden;
  touch-action: pan-y; user-select: none;
  background: color-mix(in srgb, var(--card-media) calc(var(--media-dim) * 100%), var(--card)); color: var(--card-ph);
}
.details__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-block: 1px solid var(--media-line); }
.details__media > img { width: 100%; height: 100%; object-fit: contain; opacity: var(--media-dim); }
.details__media .corner--tl { inset-block-start: 8px; inset-inline-start: 8px; }
.details__media .corner--bl { inset-block-end: 8px; inset-inline-start: 8px; }
.details__media .corner--br { inset-block-end: 8px; inset-inline-end: 8px; }
.details__media .mark { width: 16px; height: 16px; }
/* Gallery: plain chevrons at the picture's vertical centre, no plates (same ink as the heart);
   dots under the picture centre. Hidden when the family has one picture. */
.gal {
  position: absolute; z-index: 2; inset-block-start: round(down, calc(50% - 20px), 1px);
  display: grid; place-items: center; width: 24px; height: 40px; padding: 0; border: 0;
  background: none; color: var(--mark-icon); cursor: pointer; transition: color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.gal .icon { width: 16px; height: 16px; }
.gal--prev { inset-inline-start: 2px; }
.gal--next { inset-inline-end: 2px; }
.gal:hover { color: var(--card-accent); }
.gal:disabled { opacity: 0.3; cursor: default; color: var(--mark-icon); }
.gal:focus-visible { outline: 1px solid var(--focus); outline-offset: -2px; }
.gal__dots {
  position: absolute; z-index: 2; inset-block-end: 10px; inset-inline: 0;
  display: flex; justify-content: center; gap: 4px; pointer-events: none;
}
.gal__dots span { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--mark-icon) 35%, transparent); }
.gal__dots span.is-on { background: var(--mark-icon); }
.details__info { display: grid; align-content: start; gap: 16px; padding: var(--pad) var(--pad) 16px; }
.details__head { display: grid; gap: 4px; }
.details__cat { color: var(--card-cat-text); font-size: var(--fs); }
.details__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 17px; color: var(--card-name); text-align: start; }
.details__actions { display: flex; gap: 4px; }
.details__place { flex: 1; min-width: 0; overflow: hidden; }
.details__place > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.details__short { color: var(--text-strong); line-height: 16px; text-align: start; }
.details__desc { color: var(--muted); line-height: 16px; white-space: pre-line; text-align: start; }
.section-title { margin-block-end: 8px; font-size: var(--fs); font-weight: var(--fw-bold); color: var(--text-2); }
/* facts: label / value rows (values brighter than labels) */
.facts { display: grid; gap: 0; font-size: var(--fs); }
.facts > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-block-end: 1px solid var(--line-soft); }
.facts dt { color: var(--muted); }
.facts dd { color: var(--text-strong); text-align: end; }
.types { display: grid; gap: 2px; }
.types li { padding: 5px 8px; border-radius: 2px; background: var(--card); color: var(--card-name); font-variant-numeric: tabular-nums; }


.profile__who { display: flex; align-items: center; gap: 8px; }
.profile__avatar { width: 32px; height: 32px; color: var(--icon); }
.profile__name { color: var(--text-strong); }
.profile__email { color: var(--text-2); word-break: break-all; }

/* 10 Auth --------------------------------------------------------------- */
/* 10 Login — the ORIGINAL Hexa design (live snapshot: view-login.css + 05-theme.css):
   10 px top bar, logo, letter-by-letter title, floating labels, solid button,
   remember / forgot under the button, 20 px bottom bar. Width 132…264 px, then fixed. */
.auth {
  --l-bg: #f5f5f5; --l-primary: #4b669b; --l-primary-2: #5371ac; --l-muted: #acb7ce; --l-soft: #8b9cba;
  --l-field: #ffffff; --l-field-hover: #ffffff; --l-bar: #4b669b; --l-bar-text: #ffffff;
  --l-btn: #4b669b; --l-btn-hover: #5371ac; --l-btn-text: #ffffff; --l-ring: rgba(75, 102, 155, 0.25);
  --l-border: rgba(83, 113, 172, 0.18); --l-error: #b00020; --l-ok: #4b669b;
  --login-width: clamp(132px, 100vw, 264px);
  --login-logo-height: calc(18px + (var(--login-width) - 132px) * 0.106);
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: flex-start; overflow: hidden; /* a window over the dimmed catalogue */
  padding: round(down, calc((100vh - 340px) / 2), 1px) 0 0; padding-inline-start: round(down, calc((100vw - 312px) / 2), 1px); /* centred on whole pixels */
  background: rgba(16, 20, 28, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); /* the catalogue behind is dimmed and out of focus */
  color: var(--l-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="dark"] .auth {
  --l-bg: #3b4453; --l-primary: #6f95e6; --l-primary-2: #86a8f0; --l-muted: #7c93c4; --l-soft: #a8bbe6;
  --l-text: #6f95e6; --l-field: #434d60; --l-field-hover: #4b5771; --l-bar: #5c80c8; --l-bar-text: #f5f7fd;
  --l-btn: #6f95e6; --l-btn-hover: #86a8f0; --l-btn-text: #ffffff; --l-ring: rgba(111, 149, 230, 0.28);
  --l-border: rgba(127, 164, 238, 0.30); --l-error: #f5a2a2; --l-ok: #bbd0ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth {
    --l-bg: #3b4453; --l-primary: #6f95e6; --l-primary-2: #86a8f0; --l-muted: #7c93c4; --l-soft: #a8bbe6;
    --l-text: #6f95e6; --l-field: #434d60; --l-field-hover: #4b5771; --l-bar: #5c80c8; --l-bar-text: #f5f7fd;
    --l-btn: #6f95e6; --l-btn-hover: #86a8f0; --l-btn-text: #ffffff; --l-ring: rgba(111, 149, 230, 0.28);
    --l-border: rgba(127, 164, 238, 0.30); --l-error: #f5a2a2; --l-ok: #bbd0ff;
  }
}
.auth__bottombar {
  display: none; /* holds only the hidden language / theme controls for app.js */
}
/* the sign-in window; in a narrow or low panel it fills the whole panel */
.auth__win {
  display: flex; flex-direction: column; width: 312px; height: 340px; overflow: hidden;
  background: var(--l-bg); border: 1px solid var(--l-border); border-radius: 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
@media (max-width: 343px), (max-height: 371px) { .auth { padding: 0; } .auth__win { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; } }
/* top bar of the sign-in card: the way back to the catalogue */
.auth__topbar { flex: none; display: flex; align-items: center; justify-content: flex-end; height: 34px; padding: 0 5px; }
/* a quiet square cross in the corner: no frame, a soft plate under the pointer */
.auth__back {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: var(--l-soft); cursor: pointer;
}
.auth__back:hover { color: var(--l-primary); background: var(--l-border); }
.auth__back:focus-visible { outline: 2px solid var(--l-ring); outline-offset: 0; }
.auth__main { flex: 1; min-height: 0; overflow-y: auto; display: flex; justify-content: center; }
.auth__card { width: min(var(--login-width), calc(100% - 16px)); display: flex; flex-direction: column; }
.auth__logo {
  display: block; width: auto; height: round(var(--login-logo-height), 1px); aspect-ratio: 142 / 35;
  margin: 41px auto 50px; color: var(--l-primary); /* 75 px from the top with the 34 px top bar */
  overflow: visible; /* the ball and the flying pieces leave the 142 × 35 box */
}
/* Logo entrance, once per opening (about 4.5 s). T = 723 ms is the moment the ball enters the mark.
   0–1100 ms: the whole mark rolls in from the right, half-transparent most of the way. A ball with a long soft
   trail flies from the left along a straight horizontal line (y = 16.5) and enters the left end of the S band at T,
   while the mark still has 12° of its last turn left: the turn bends the cut away from the straight path.
   T…T+750: the ball cuts the band and grows; at one third (T+250) the two notch pieces slide out and turn into
   faint sparks. T+1000…T+1650: the H is revealed from the ball. T+1620…: the ball splits into three dots that
   write the E; then the top and the bottom one write the two strokes of the X at once:
   the X is whole for a moment, the dots meet in its middle and the gap of the X opens there with a small ring.
   The ball loses energy: the E is written faster than the X, the X faster than the A, and the dots come to rest
   at the end of the E and of the X. A drop stretches out of the stem of the H, falls on the title and the title spreads from that
   point. The falling stroke of the X ends in a drop under its lower right end. The other dot flies out of the upper
   right end of the X onto the top of the A, the A is drawn from there down both legs, and the right leg stretches
   into the last drop. */
.auth__logo .lpiece, .auth__logo .lball, .auth__logo .lspark, .auth__logo .ldot, .auth__logo .ltail, .auth__logo .ldrip, .auth__logo .ldriph, .auth__logo .ldroph, .auth__logo .ldropa, .auth__logo .ldripx, .auth__logo .lbridge, .auth__logo .lpop { opacity: 0; }
.auth__logo .lpop { transform-box: fill-box; transform-origin: center; }
.auth__logo .lroll, .auth__logo .lpiece { transform-box: fill-box; transform-origin: center; }
.auth__logo .lroll { animation: logo-roll 1100ms cubic-bezier(0.25, 0.6, 0.35, 1) both, logo-roll-fade 1100ms linear both; }
.auth__logo .lchip1 { animation: logo-chip1 520ms ease-out 837ms both; }
.auth__logo .lchip2 { animation: logo-chip2 520ms ease-out 837ms both; }
.auth__logo .lspark1 { animation: logo-spark1 1500ms cubic-bezier(.3, .5, .4, 1) 837ms both; }
.auth__logo .lspark2 { animation: logo-spark2 1500ms cubic-bezier(.3, .5, .4, 1) 837ms both; }
.auth__logo .lband { animation: logo-cut 342ms linear 723ms both; }
.auth__logo .lball { animation: logo-ball 1593ms linear both; }
.auth__logo .lw1 { animation: logo-hdraw 265ms linear 1218ms both; }
.auth__logo .lbridge { animation: logo-bridge 320ms ease-in 2484ms both; }
.auth__logo .lpop { animation: logo-pop 380ms ease-out 2484ms both; }
.auth__logo .le1 { animation: logo-m-le1 2970ms linear 1483ms both; }
.auth__logo .le2 { animation: logo-m-le2 2970ms linear 1483ms both; }
.auth__logo .le3 { animation: logo-m-le3 2970ms linear 1483ms both; }
.auth__logo .lxa { animation: logo-m-lxa 2970ms linear 1483ms both; }
.auth__logo .lxb { animation: logo-m-lxb 2970ms linear 1483ms both; }
.auth__logo .lapath { animation: logo-m-lapath 2970ms linear 1483ms both; }
.auth__logo .labar { animation: logo-abar 420ms ease-out 3438ms both; }
.auth__logo .ldot1 { animation: logo-dot1 2970ms linear 1483ms both; }
.auth__logo .ldot2 { animation: logo-dot2 2970ms linear 1483ms both; }
.auth__logo .ldot3 { animation: logo-dot3 2970ms linear 1483ms both; }
.auth__logo .lt1 { animation: logo-dot1 2970ms linear 1483ms both; }
.auth__logo .lt2 { animation: logo-dot2 2970ms linear 1483ms both; }
.auth__logo .lt3 { animation: logo-dot3 2970ms linear 1483ms both; }
.auth__logo .lg1 { animation-delay: 1501ms; }
.auth__logo .lg2 { animation-delay: 1519ms; }
.auth__logo .lg3 { animation-delay: 1537ms; }
.auth__logo .lg4 { animation-delay: 1555ms; }
.auth__logo .lg5 { animation-delay: 1573ms; }
.auth__logo .lg6 { animation-delay: 1591ms; }
.auth__logo .lg7 { animation-delay: 1609ms; }
.auth__logo .lg8 { animation-delay: 1627ms; }
.auth__logo .lg9 { animation-delay: 1645ms; }
.auth__logo .lg10 { animation-delay: 1663ms; }
.auth__logo .lg11 { animation-delay: 1681ms; }
.auth__logo .lg12 { animation-delay: 1699ms; }
.auth__logo .ldrip { animation: logo-drip 2970ms linear 1483ms both; }
.auth__logo .ldripx { animation: logo-dripx 2970ms linear 1483ms both; }
.auth__logo .ldriph { animation: logo-driph 543ms cubic-bezier(.3, 0, .6, 1) 1298ms forwards; }
.auth__logo .ldroph { animation: logo-droph 393ms cubic-bezier(.3, 0, .6, 1) 1298ms forwards; }
.lfall i { animation: logo-fall 620ms cubic-bezier(.55, 0, .9, .65) 1691ms both, logo-fall-o 620ms linear 1691ms both; }
.auth__logo .ldropa { animation: logo-dropa 2970ms linear 1483ms both; }
.lfall .lfx { animation: logo-fallx 620ms cubic-bezier(.55, 0, .9, .65) 3195ms both, logo-fall-o 620ms linear 3195ms both; }
.lfall .lfa { animation: logo-fall 620ms cubic-bezier(.55, 0, .9, .65) 4253ms both, logo-fall-o 620ms linear 4253ms both; }
.auth__title { animation: logo-hold 1ms linear 2310ms backwards; }
@keyframes logo-roll { from { transform: translateX(120px) rotate(393deg); } to { transform: none; } }
@keyframes logo-roll-fade { 0% { opacity: 0; } 18% { opacity: .6; } 45%, 100% { opacity: 1; } }
@keyframes logo-cut { from { opacity: 1; clip-path: inset(0 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 100%); } }
@keyframes logo-chip1 { 0% { opacity: 1; transform: none; } 40% { opacity: .35; } 100% { opacity: 0; transform: translate(1.5px, -3.5px); } }
@keyframes logo-chip2 { 0% { opacity: 1; transform: none; } 40% { opacity: .35; } 100% { opacity: 0; transform: translate(-3px, 3px); } }
@keyframes logo-spark1 {
  0%   { opacity: 0; transform: none; }
  25%  { opacity: .2; transform: translate(1.5px, -3.5px); }
  100% { opacity: 0; transform: translate(4px, -9px); }
}
@keyframes logo-spark2 {
  0%   { opacity: 0; transform: none; }
  25%  { opacity: .2; transform: translate(-3px, 3px); }
  100% { opacity: 0; transform: translate(-7px, 7px); }
}
/* x in logo units: -80, 4.5 (enters the mark), 30.4 (leaves it), 41.1 (H starts), 58.4 (H ends), 62 */
@keyframes logo-ball {
  0%   { opacity: 0; transform: translate(-125px, 16.5px) scale(1); }
  17.8% { opacity: 0; transform: translate(-125px, 16.5px) scale(1); }
  26.1% { opacity: 0.81; transform: translate(-108.3px, 16.5px) scale(1); }
  31.6% { opacity: 0.9; transform: translate(-85.1px, 16.5px) scale(1); }
  37.1% { opacity: 0.9; transform: translate(-54.4px, 16.5px) scale(1); }
  41.2% { opacity: 0.9; transform: translate(-26.8px, 16.5px) scale(1); }
  45.4% { opacity: 0.9; transform: translate(4.5px, 16.5px) scale(1); }
  66.9% { opacity: .9; transform: translate(30.4px, 16.5px) scale(1.5); }
  76.5% { opacity: .9; transform: translate(41.1px, 16.5px) scale(1.5); }
  93.1% { opacity: .85; transform: translate(58.4px, 16.5px) scale(.9); }
  100% { opacity: 0; transform: translate(61px, 16.5px) scale(.6); }
}
/* Generated (scratch script site10): one law of motion from the exit of the mark to the end of the X, the speed
   falls with the distance, so every letter is written slower than the one before. Dot 1: top bar of the E, the
   falling stroke of the X, the ground, the A. Dots 2 and 3 leave together and part on the round corner of the E:
   middle bar; bottom bar and the rising stroke of the X. Each logo-m-* draws a letter along its centre line
   (mask stroke, dash 100 long) exactly behind its dot. */
@keyframes logo-dot1 {
  0% { opacity: 0; transform: translate(58.4px, 16.5px) rotate(-65deg) scale(1.1); }
  1.22% { opacity: 0.25; transform: translate(59.4px, 14.4px) rotate(-65deg) scale(1.18); }
  2.46% { opacity: 0.5; transform: translate(60.3px, 12.4px) rotate(-65deg) scale(1.25); }
  3.72% { opacity: 0.75; transform: translate(61.3px, 10.4px) rotate(-65deg) scale(1.32); }
  4.98% { opacity: 1; transform: translate(62.2px, 8.3px) rotate(-65deg) scale(1.4); }
  6.31% { opacity: 1; transform: translate(64.5px, 8.3px) rotate(0deg) scale(1.4); }
  7.66% { opacity: 1; transform: translate(66.9px, 8.3px) rotate(0deg) scale(1.41); }
  9.03% { opacity: 1; transform: translate(69.2px, 8.3px) rotate(0deg) scale(1.42); }
  10.41% { opacity: 1; transform: translate(71.6px, 8.3px) rotate(0deg) scale(1.42); }
  11.81% { opacity: 1; transform: translate(73.9px, 8.3px) rotate(0deg) scale(1.42); }
  13.23% { opacity: 1; transform: translate(76.2px, 8.3px) rotate(0deg) scale(1.43); }
  14.67% { opacity: 1; transform: translate(78.6px, 8.3px) rotate(0deg) scale(1.44); }
  16.14% { opacity: 1; transform: translate(80.9px, 8.3px) rotate(0deg) scale(1.44); }
  17.62% { opacity: 1; transform: translate(83.3px, 8.3px) rotate(0deg) scale(1.44); }
  19.12% { opacity: 1; transform: translate(85.6px, 8.3px) rotate(0deg) scale(1.45); }
  20.49% { opacity: 1; transform: translate(87.7px, 7.9px) rotate(-10deg) scale(1.48); }
  21.87% { opacity: 1; transform: translate(89.7px, 7.6px) rotate(-10deg) scale(1.52); }
  23.28% { opacity: 1; transform: translate(91.8px, 7.2px) rotate(-10deg) scale(1.55); }
  24.94% { opacity: 1; transform: translate(93.6px, 8.9px) rotate(43deg) scale(1.55); }
  26.64% { opacity: 1; transform: translate(95.4px, 10.6px) rotate(43deg) scale(1.55); }
  28.36% { opacity: 1; transform: translate(97.2px, 12.2px) rotate(43deg) scale(1.55); }
  30.11% { opacity: 1; transform: translate(99px, 13.9px) rotate(43deg) scale(1.55); }
  31.89% { opacity: 1; transform: translate(100.8px, 15.6px) rotate(43deg) scale(1.55); }
  33.7% { opacity: 1; transform: translate(102.5px, 17.3px) rotate(43deg) scale(1.55); }
  35.42% { opacity: 1; transform: translate(104.2px, 18.8px) rotate(43deg) scale(1.55); }
  37.18% { opacity: 1; transform: translate(105.9px, 20.4px) rotate(43deg) scale(1.55); }
  38.96% { opacity: 1; transform: translate(107.6px, 22px) rotate(43deg) scale(1.55); }
  40.78% { opacity: 1; transform: translate(109.3px, 23.5px) rotate(43deg) scale(1.55); }
  42.63% { opacity: 1; transform: translate(110.9px, 25.1px) rotate(43deg) scale(1.55); }
  44.51% { opacity: 1; transform: translate(112.6px, 26.7px) rotate(43deg) scale(1.55); }
  46.43% { opacity: 1; transform: translate(114.3px, 28.3px) rotate(43deg) scale(1.55); }
  51.36% { opacity: 1; transform: translate(113.2px, 30.4px) rotate(118deg) scale(1.05); }
  57.65% { opacity: 1; transform: translate(113.2px, 32.4px) rotate(90deg) scale(1.2); }
  59.09% { opacity: 0; transform: translate(113.2px, 33px) rotate(90deg) scale(1.2); }
  100% { opacity: 0; transform: translate(113.2px, 33px) rotate(90deg) scale(1.2); }
}
@keyframes logo-dot2 {
  0% { opacity: 0; transform: translate(58.4px, 16.5px) rotate(47deg) scale(1.1); }
  1.22% { opacity: 0.25; transform: translate(59.8px, 18px) rotate(47deg) scale(1.18); }
  2.46% { opacity: 0.5; transform: translate(61.2px, 19.5px) rotate(47deg) scale(1.25); }
  3.72% { opacity: 0.75; transform: translate(62.6px, 21px) rotate(47deg) scale(1.32); }
  4.98% { opacity: 1; transform: translate(64px, 22.5px) rotate(47deg) scale(1.4); }
  6.89% { opacity: 0.99; transform: translate(64.6px, 20.1px) rotate(-74deg) scale(1.4); }
  8.83% { opacity: 0.97; transform: translate(66.4px, 18.4px) rotate(-43deg) scale(1.4); }
  10.81% { opacity: 0.96; transform: translate(68.8px, 17.8px) rotate(-14deg) scale(1.4); }
  12.83% { opacity: 0.94; transform: translate(71.3px, 17.8px) rotate(0deg) scale(1.4); }
  14.88% { opacity: 0.93; transform: translate(73.8px, 17.8px) rotate(0deg) scale(1.4); }
  16.98% { opacity: 0.91; transform: translate(76.3px, 17.8px) rotate(0deg) scale(1.4); }
  19.12% { opacity: 0.9; transform: translate(78.8px, 17.8px) rotate(0deg) scale(1.4); }
  22.15% { opacity: 0; transform: translate(80.3px, 17.8px) rotate(0deg) scale(1.1); }
  59.11% { opacity: 0; transform: translate(132px, 8.6px) rotate(-10deg) scale(1); }
  60.45% { opacity: 1; transform: translate(130px, 8.6px) rotate(180deg) scale(1.1); }
  62% { opacity: 1; transform: translate(127.7px, 8.7px) rotate(178deg) scale(1.1); }
  63.55% { opacity: 1; transform: translate(125.6px, 9.4px) rotate(162deg) scale(1.1); }
  65.11% { opacity: 1; transform: translate(123.4px, 10.1px) rotate(162deg) scale(1.1); }
  66.69% { opacity: 1; transform: translate(122px, 11.7px) rotate(131deg) scale(1.1); }
  68.27% { opacity: 1; transform: translate(121.3px, 13.8px) rotate(108deg) scale(1.1); }
  69.87% { opacity: 1; transform: translate(120.6px, 16px) rotate(108deg) scale(1.1); }
  71.43% { opacity: 1; transform: translate(120.6px, 18.2px) rotate(91deg) scale(1.06); }
  73.01% { opacity: 1; transform: translate(120.6px, 20.4px) rotate(91deg) scale(1.02); }
  74.62% { opacity: 1; transform: translate(120.5px, 22.6px) rotate(91deg) scale(0.98); }
  76.26% { opacity: 1; transform: translate(120.5px, 24.8px) rotate(91deg) scale(0.94); }
  77.93% { opacity: 1; transform: translate(120.5px, 27px) rotate(91deg) scale(0.9); }
  83.31% { opacity: 0; transform: translate(120.5px, 27.6px) rotate(90deg) scale(0.7); }
  100% { opacity: 0; transform: translate(120.5px, 27.6px) rotate(90deg) scale(0.7); }
}
@keyframes logo-dot3 {
  0% { opacity: 0; transform: translate(58.4px, 16.5px) rotate(47deg) scale(1.1); }
  1.22% { opacity: 0.25; transform: translate(59.8px, 18px) rotate(47deg) scale(1.18); }
  2.46% { opacity: 0.5; transform: translate(61.2px, 19.5px) rotate(47deg) scale(1.25); }
  3.72% { opacity: 0.75; transform: translate(62.6px, 21px) rotate(47deg) scale(1.32); }
  4.98% { opacity: 1; transform: translate(64px, 22.5px) rotate(47deg) scale(1.4); }
  6.31% { opacity: 1; transform: translate(64.6px, 24.8px) rotate(74deg) scale(1.4); }
  7.66% { opacity: 1; transform: translate(66.3px, 26.4px) rotate(44deg) scale(1.41); }
  9.03% { opacity: 1; transform: translate(68.6px, 27.1px) rotate(16deg) scale(1.42); }
  10.41% { opacity: 1; transform: translate(71.1px, 27.1px) rotate(0deg) scale(1.42); }
  11.81% { opacity: 1; transform: translate(73.5px, 27.1px) rotate(0deg) scale(1.42); }
  13.23% { opacity: 1; transform: translate(76px, 27.1px) rotate(0deg) scale(1.43); }
  14.67% { opacity: 1; transform: translate(78.4px, 27.1px) rotate(0deg) scale(1.44); }
  16.14% { opacity: 1; transform: translate(80.8px, 27.1px) rotate(0deg) scale(1.44); }
  17.62% { opacity: 1; transform: translate(83.3px, 27.1px) rotate(0deg) scale(1.44); }
  19.12% { opacity: 1; transform: translate(85.7px, 27.1px) rotate(0deg) scale(1.45); }
  20.49% { opacity: 1; transform: translate(87.4px, 27.4px) rotate(12deg) scale(1.48); }
  21.87% { opacity: 1; transform: translate(89.1px, 27.8px) rotate(12deg) scale(1.52); }
  23.28% { opacity: 1; transform: translate(90.8px, 28.1px) rotate(12deg) scale(1.55); }
  24.7% { opacity: 1; transform: translate(92.5px, 26.6px) rotate(-43deg) scale(1.55); }
  26.15% { opacity: 1; transform: translate(94.2px, 25px) rotate(-43deg) scale(1.55); }
  27.62% { opacity: 1; transform: translate(95.8px, 23.5px) rotate(-43deg) scale(1.55); }
  29.1% { opacity: 1; transform: translate(97.5px, 21.9px) rotate(-43deg) scale(1.55); }
  30.61% { opacity: 1; transform: translate(99.2px, 20.4px) rotate(-43deg) scale(1.55); }
  32.14% { opacity: 1; transform: translate(100.9px, 18.8px) rotate(-43deg) scale(1.55); }
  33.7% { opacity: 1; transform: translate(102.5px, 17.3px) rotate(-43deg) scale(1.55); }
  35.71% { opacity: 1; transform: translate(104.4px, 15.6px) rotate(-43deg) scale(1.55); }
  37.77% { opacity: 1; transform: translate(106.2px, 13.9px) rotate(-43deg) scale(1.55); }
  39.87% { opacity: 1; transform: translate(108px, 12.2px) rotate(-43deg) scale(1.55); }
  42.01% { opacity: 1; transform: translate(109.8px, 10.5px) rotate(-43deg) scale(1.55); }
  44.2% { opacity: 1; transform: translate(111.7px, 8.8px) rotate(-43deg) scale(1.55); }
  46.43% { opacity: 1; transform: translate(113.5px, 7.1px) rotate(-43deg) scale(1.55); }
  47.93% { opacity: 1; transform: translate(114.9px, 5.3px) rotate(-51deg) scale(1.54); }
  49.36% { opacity: 1; transform: translate(116.6px, 3.8px) rotate(-44deg) scale(1.54); }
  50.74% { opacity: 1; transform: translate(118.5px, 2.6px) rotate(-32deg) scale(1.54); }
  52.07% { opacity: 1; transform: translate(120.6px, 2px) rotate(-15deg) scale(1.53); }
  53.34% { opacity: 1; transform: translate(122.9px, 2.2px) rotate(3deg) scale(1.52); }
  54.58% { opacity: 1; transform: translate(125px, 2.9px) rotate(19deg) scale(1.52); }
  55.77% { opacity: 1; transform: translate(127px, 4px) rotate(29deg) scale(1.52); }
  56.92% { opacity: 1; transform: translate(128.8px, 5.4px) rotate(38deg) scale(1.51); }
  58.03% { opacity: 1; transform: translate(130.4px, 7px) rotate(44deg) scale(1.5); }
  59.11% { opacity: 1; transform: translate(132px, 8.6px) rotate(46deg) scale(1.5); }
  60.61% { opacity: 1; transform: translate(134.2px, 8.6px) rotate(0deg) scale(1.52); }
  62.13% { opacity: 1; transform: translate(136.4px, 8.7px) rotate(3deg) scale(1.54); }
  63.68% { opacity: 1; transform: translate(138.5px, 9.4px) rotate(18deg) scale(1.56); }
  65.26% { opacity: 1; transform: translate(139.8px, 10.9px) rotate(49deg) scale(1.58); }
  66.86% { opacity: 1; transform: translate(140.5px, 13px) rotate(72deg) scale(1.6); }
  68.59% { opacity: 1; transform: translate(140.5px, 15.3px) rotate(90deg) scale(1.52); }
  70.36% { opacity: 1; transform: translate(140.5px, 17.7px) rotate(90deg) scale(1.43); }
  72.16% { opacity: 1; transform: translate(140.5px, 20px) rotate(90deg) scale(1.35); }
  74.01% { opacity: 1; transform: translate(140.5px, 22.3px) rotate(90deg) scale(1.27); }
  75.9% { opacity: 1; transform: translate(140.5px, 24.7px) rotate(90deg) scale(1.18); }
  77.84% { opacity: 1; transform: translate(140.5px, 27px) rotate(90deg) scale(1.1); }
  80.78% { opacity: 0; transform: translate(140.5px, 29.1px) rotate(90deg) scale(1.1); }
  86.34% { opacity: 0; transform: translate(140.5px, 31.2px) rotate(90deg) scale(1.1); }
  93.25% { opacity: 0; transform: translate(140.5px, 33.4px) rotate(90deg) scale(1.1); }
  99.98% { opacity: 0; transform: translate(140.5px, 33.4px) rotate(0deg) scale(1.1); }
  100% { opacity: 0; transform: translate(140.5px, 33.4px) rotate(0deg) scale(1.1); }
}
@keyframes logo-hdraw { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes logo-bridge { from { opacity: 1; } to { opacity: 0; } }
@keyframes logo-pop {
  0%   { opacity: 0; transform: scale(.4); }
  15%  { opacity: .7; }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes logo-m-le1 {
  0% { stroke-dashoffset: 100; }
  4.98% { stroke-dashoffset: 100; }
  6.31% { stroke-dashoffset: 90; }
  7.66% { stroke-dashoffset: 80; }
  9.03% { stroke-dashoffset: 70; }
  10.41% { stroke-dashoffset: 60; }
  11.81% { stroke-dashoffset: 50; }
  13.23% { stroke-dashoffset: 40; }
  14.67% { stroke-dashoffset: 30; }
  16.14% { stroke-dashoffset: 20; }
  17.62% { stroke-dashoffset: 10; }
  19.12% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes logo-m-le2 {
  0% { stroke-dashoffset: 100; }
  4.98% { stroke-dashoffset: 100; }
  6.89% { stroke-dashoffset: 85.7; }
  8.83% { stroke-dashoffset: 71.4; }
  10.81% { stroke-dashoffset: 57.1; }
  12.83% { stroke-dashoffset: 42.9; }
  14.88% { stroke-dashoffset: 28.6; }
  16.98% { stroke-dashoffset: 14.3; }
  19.12% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes logo-m-le3 {
  0% { stroke-dashoffset: 100; }
  4.98% { stroke-dashoffset: 100; }
  6.31% { stroke-dashoffset: 90; }
  7.66% { stroke-dashoffset: 80; }
  9.03% { stroke-dashoffset: 70; }
  10.41% { stroke-dashoffset: 60; }
  11.81% { stroke-dashoffset: 50; }
  13.23% { stroke-dashoffset: 40; }
  14.67% { stroke-dashoffset: 30; }
  16.14% { stroke-dashoffset: 20; }
  17.62% { stroke-dashoffset: 10; }
  19.12% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes logo-m-lxa {
  0% { stroke-dashoffset: 100; }
  23.28% { stroke-dashoffset: 100; }
  24.7% { stroke-dashoffset: 92.6; }
  26.15% { stroke-dashoffset: 85.2; }
  27.62% { stroke-dashoffset: 77.8; }
  29.1% { stroke-dashoffset: 70.4; }
  30.61% { stroke-dashoffset: 63; }
  32.14% { stroke-dashoffset: 55.6; }
  33.7% { stroke-dashoffset: 48.2; }
  35.71% { stroke-dashoffset: 40.2; }
  37.77% { stroke-dashoffset: 32.2; }
  39.87% { stroke-dashoffset: 24.1; }
  42.01% { stroke-dashoffset: 16.1; }
  44.2% { stroke-dashoffset: 8; }
  46.43% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes logo-m-lxb {
  0% { stroke-dashoffset: 100; }
  23.28% { stroke-dashoffset: 100; }
  24.94% { stroke-dashoffset: 92; }
  26.64% { stroke-dashoffset: 84.1; }
  28.36% { stroke-dashoffset: 76.1; }
  30.11% { stroke-dashoffset: 68.2; }
  31.89% { stroke-dashoffset: 60.2; }
  33.7% { stroke-dashoffset: 52.2; }
  35.42% { stroke-dashoffset: 44.8; }
  37.18% { stroke-dashoffset: 37.3; }
  38.96% { stroke-dashoffset: 29.9; }
  40.78% { stroke-dashoffset: 22.4; }
  42.63% { stroke-dashoffset: 14.9; }
  44.51% { stroke-dashoffset: 7.5; }
  46.43% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes logo-m-lapath {
  0% { stroke-dasharray: 0 300; stroke-dashoffset: -51.5; }
  59.11% { stroke-dasharray: 0 300; stroke-dashoffset: -51.5; }
  59.89% { stroke-dasharray: 4.2 300; stroke-dashoffset: -49.4; }
  60.68% { stroke-dasharray: 8.3 300; stroke-dashoffset: -47.3; }
  61.46% { stroke-dasharray: 12.4 300; stroke-dashoffset: -45.2; }
  62.24% { stroke-dasharray: 16.6 300; stroke-dashoffset: -43.1; }
  63.03% { stroke-dasharray: 20.6 300; stroke-dashoffset: -41.1; }
  63.81% { stroke-dasharray: 24.7 300; stroke-dashoffset: -39; }
  64.6% { stroke-dasharray: 28.7 300; stroke-dashoffset: -37; }
  65.38% { stroke-dasharray: 32.7 300; stroke-dashoffset: -34.9; }
  66.16% { stroke-dasharray: 36.7 300; stroke-dashoffset: -32.9; }
  66.95% { stroke-dasharray: 40.7 300; stroke-dashoffset: -30.8; }
  67.73% { stroke-dasharray: 44.9 300; stroke-dashoffset: -28.8; }
  68.52% { stroke-dasharray: 49.1 300; stroke-dashoffset: -26.8; }
  69.3% { stroke-dasharray: 53.2 300; stroke-dashoffset: -24.8; }
  70.09% { stroke-dasharray: 57.5 300; stroke-dashoffset: -22.7; }
  70.87% { stroke-dasharray: 61.9 300; stroke-dashoffset: -20.3; }
  71.65% { stroke-dasharray: 66.3 300; stroke-dashoffset: -18; }
  72.44% { stroke-dasharray: 70.7 300; stroke-dashoffset: -15.7; }
  73.22% { stroke-dasharray: 75 300; stroke-dashoffset: -13.4; }
  74.01% { stroke-dasharray: 79.3 300; stroke-dashoffset: -11.1; }
  74.79% { stroke-dasharray: 83.6 300; stroke-dashoffset: -8.8; }
  75.57% { stroke-dasharray: 87.8 300; stroke-dashoffset: -6.6; }
  76.36% { stroke-dasharray: 92 300; stroke-dashoffset: -4.4; }
  77.14% { stroke-dasharray: 96.1 300; stroke-dashoffset: -2.2; }
  77.93% { stroke-dasharray: 100 300; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 100 300; stroke-dashoffset: 0; }
}
@keyframes logo-abar { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes logo-drip {
  0% { opacity: 0; stroke-dashoffset: 100; stroke-width: 3.1px; }
  77.78% { opacity: 0; stroke-dashoffset: 100; stroke-width: 3.1px; }
  77.84% { opacity: 1; stroke-dashoffset: 100; stroke-width: 3.1px; }
  78.86% { opacity: 1; stroke-dashoffset: 91.6; stroke-width: 3.1px; }
  80.08% { opacity: 1; stroke-dashoffset: 83.2; stroke-width: 3.1px; }
  81.57% { opacity: 1; stroke-dashoffset: 74.8; stroke-width: 3.1px; }
  83.52% { opacity: 1; stroke-dashoffset: 66.4; stroke-width: 3.1px; }
  86.34% { opacity: 1; stroke-dashoffset: 58; stroke-width: 3.1px; }
  88.07% { opacity: 1; stroke-dashoffset: 53.6; stroke-width: 2.62px; }
  89.58% { opacity: 1; stroke-dashoffset: 49.2; stroke-width: 2.14px; }
  90.93% { opacity: 1; stroke-dashoffset: 44.8; stroke-width: 1.66px; }
  92.14% { opacity: 1; stroke-dashoffset: 40.4; stroke-width: 1.18px; }
  93.25% { opacity: 1; stroke-dashoffset: 36; stroke-width: 0.7px; }
  97.29% { opacity: 0; stroke-dashoffset: 84; stroke-width: 0.7px; }
  100% { opacity: 0; stroke-dashoffset: 100; stroke-width: .7px; }
}
@keyframes logo-dropa {
  0% { opacity: 0; transform: translate(140.45px, 27px) scale(1); }
  77.78% { opacity: 0; transform: translate(140.45px, 27px) scale(1); }
  77.84% { opacity: 1; transform: translate(140.45px, 27px) scale(1); }
  78.86% { opacity: 1; transform: translate(140.45px, 27.84px) scale(1); }
  80.08% { opacity: 1; transform: translate(140.45px, 28.68px) scale(1); }
  81.57% { opacity: 1; transform: translate(140.45px, 29.52px) scale(1); }
  83.52% { opacity: 1; transform: translate(140.45px, 30.36px) scale(1); }
  86.34% { opacity: 1; transform: translate(140.45px, 31.2px) scale(1); }
  88.07% { opacity: 1; transform: translate(140.45px, 31.64px) scale(1.06); }
  89.58% { opacity: 1; transform: translate(140.45px, 32.08px) scale(1.12); }
  90.93% { opacity: 1; transform: translate(140.45px, 32.52px) scale(1.18); }
  92.14% { opacity: 1; transform: translate(140.45px, 32.96px) scale(1.24); }
  93.25% { opacity: 1; transform: translate(140.45px, 33.4px) scale(1.3); }
  93.32% { opacity: 0; transform: translate(140.45px, 33.4px) scale(1.3); }
  100% { opacity: 0; transform: translate(140.45px, 33.4px) scale(1.3); }
}
@keyframes logo-dripx {
  0% { opacity: 0; stroke-dashoffset: 100; stroke-width: 2.9px; }
  46.36% { opacity: 0; stroke-dashoffset: 100; stroke-width: 2.9px; }
  46.43% { opacity: 1; stroke-dashoffset: 100; stroke-width: 2.9px; }
  47.02% { opacity: 1; stroke-dashoffset: 93.5; stroke-width: 2.9px; }
  47.73% { opacity: 1; stroke-dashoffset: 87; stroke-width: 2.9px; }
  48.6% { opacity: 1; stroke-dashoffset: 80.6; stroke-width: 2.9px; }
  49.73% { opacity: 1; stroke-dashoffset: 74.1; stroke-width: 2.9px; }
  51.36% { opacity: 1; stroke-dashoffset: 67.6; stroke-width: 2.9px; }
  52.93% { opacity: 1; stroke-dashoffset: 63.6; stroke-width: 2.44px; }
  54.31% { opacity: 1; stroke-dashoffset: 59.6; stroke-width: 1.98px; }
  55.53% { opacity: 1; stroke-dashoffset: 55.6; stroke-width: 1.52px; }
  56.64% { opacity: 1; stroke-dashoffset: 51.6; stroke-width: 1.06px; }
  57.65% { opacity: 1; stroke-dashoffset: 47.6; stroke-width: 0.6px; }
  61.69% { opacity: 0; stroke-dashoffset: 84; stroke-width: 0.6px; }
  100% { opacity: 0; stroke-dashoffset: 100; stroke-width: 0.6px; }
}
@keyframes logo-driph {
  0% { opacity: 1; stroke-dashoffset: 100; stroke-width: 3.1px; }
  23.5% { opacity: 1; stroke-dashoffset: 73; stroke-width: 3.1px; }
  47% { opacity: 1; stroke-dashoffset: 58; stroke-width: 3.1px; }
  59.7% { opacity: 1; stroke-dashoffset: 48; stroke-width: 1.7px; }
  72.4% { opacity: 1; stroke-dashoffset: 36; stroke-width: 0.7px; }
  100% { opacity: 1; stroke-dashoffset: 100; stroke-width: 0.7px; }
}
@keyframes logo-droph {
  0% { opacity: 1; transform: translate(42.64px, 27px) scale(1); }
  32.4% { opacity: 1; transform: translate(42.64px, 29.7px) scale(1); }
  64.9% { opacity: 1; transform: translate(42.64px, 31.2px) scale(1); }
  82.4% { opacity: 1; transform: translate(42.64px, 32.2px) scale(1.12); }
  99.7% { opacity: 1; transform: translate(42.64px, 33.4px) scale(1.3); }
  100% { opacity: 0; transform: translate(42.64px, 33.4px) scale(1.3); }
}
@keyframes logo-fall { from { transform: translateY(calc(-1 * var(--lgap) - round(var(--login-logo-height), 1px) * .0457 - 2px)); } to { transform: translateY(calc(12px + var(--ly, 0px))); } }
@keyframes logo-fall-o { 0% { opacity: 0; } 2%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes logo-fallx { from { transform: translateY(calc(-1 * var(--lgap) - round(var(--login-logo-height), 1px) * .0743 - 2px)); } to { transform: translateY(calc(12px + var(--ly, 0px))); } }
/* Three drops write the title: js/auth.js splits it into three parts (.tw1 .tw2 .tw3) and gives each the point
   where its drop lands (--lx) and the radius that covers it (--lr); a round mask with a soft edge grows from there.
   Without the parts the whole title simply appears when the first drop lands. */
.auth__title .tw { position: relative; display: inline-block; }
.auth__title .tw1 { --land: 2311ms; } .auth__title .tw2 { --land: 3815ms; } .auth__title .tw3 { --land: 4873ms; }
/* a letter never leaves the baseline: it grows out of it (only its height changes), swells a little above its size
   (--up, more near the landing point: a faint bubble), sinks a little below it (--dn, more at the ends) and levels out */
.auth__title .tc { display: inline-block; }
/* --sy: the height of the letter. The small drop leaves it behind as a flat strip on the bottom line (--s: when the
   drop passes), then the wave lifts it (--d: when the crest comes). */
@property --sy { syntax: "<number>"; inherits: false; initial-value: 1; }
/* --sx: the width. Water keeps its volume: a flat letter is wider and flows into its neighbours (one film of water),
   a letter on the crest is a little narrower. tw-wet: the film is soft at first and sharpens into text. */
@property --sx { syntax: "<number>"; inherits: false; initial-value: 1; }
.auth__title .tci { display: inline-block; transform-origin: 50% 83%; transform: scale(var(--sx), var(--sy)); animation: tw-seed 640ms cubic-bezier(.37, 0, .63, 1) calc(var(--land) + var(--s, 0ms)) both, tw-rise 1500ms cubic-bezier(.37, 0, .63, 1) calc(var(--land) + var(--d, 0ms)) forwards, tw-wet 950ms cubic-bezier(.5, 0, .6, 1) calc(var(--land) + var(--s, 0ms)) backwards; }
@keyframes tw-wet { from { filter: blur(1.6px); } 45% { filter: blur(1.1px); } to { filter: blur(0); } }
/* behind the small drop the strip is not flat: a low ripple follows the drop and dies out */
@keyframes tw-seed { 0% { --sy: 0; --sx: 1.7; opacity: 0; } 28% { --sy: .36; --sx: 1.3; opacity: 1; } 55% { --sy: .12; --sx: 1.5; } 78% { --sy: .22; --sx: 1.38; } 100% { --sy: .17; --sx: 1.42; opacity: 1; } }
/* no first keyframe: the wave lifts the letter from whatever height the ripple has at that moment */
@keyframes tw-rise { 24% { --sy: var(--up, 1.12); --sx: .95; } 45% { --sy: var(--dn, .96); --sx: 1.03; } 64% { --sy: var(--up2, 1.025); --sx: .99; } 82% { --sy: .992; --sx: 1; } 100% { --sy: 1; --sx: 1; } }
/* the two small drops: --go is the way to the end of the word, --rt the time it takes */
.auth__title .td { position: absolute; left: calc(var(--lx, 50%) - 2px); bottom: -1px; width: 4px; height: 4px; border-radius: 50%; background: var(--l-primary); opacity: 0; pointer-events: none; animation: tw-run var(--rt, 600ms) cubic-bezier(.3, .4, .5, 1) var(--land) forwards; }
.auth__title .td::before { content: ""; position: absolute; top: 0; width: 16px; height: 4px; background: linear-gradient(to var(--side, right), transparent, var(--l-primary)); opacity: .5; }
.auth__title .tdl::before { left: 2px; --side: left; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.auth__title .tdr::before { right: 2px; --side: right; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
@keyframes tw-run { 0% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translateX(calc(var(--go) * .93)) scale(.85); } 100% { opacity: 0; transform: translate(var(--go), -5px) scale(.5); } }
@keyframes logo-hold { from { opacity: 0; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .auth__logo .lroll, .auth__logo .lpiece, .auth__logo .lball, .auth__logo .lspark, .auth__logo .ldot, .auth__logo .ltail, .auth__logo .ldrip, .auth__logo .ldriph, .auth__logo .ldroph, .auth__logo .ldropa, .auth__logo .ldripx, .auth__logo .lw,
  .auth__logo .lbridge, .auth__logo .lpop, .auth__logo .lapath, .auth__logo .labar,
  .auth__logo .le1, .auth__logo .le2, .auth__logo .le3, .auth__logo .lxa, .auth__logo .lxb { animation: none !important; }
}
/* The stem of the H stretches down into a drop that falls on the title: an HTML dot under the stem (0.81 logo
   heights left of the centre). --lgap repeats the bottom margin of the logo: keep the two in step. */
.auth__card { --lgap: 50px; }
.lfall { position: relative; height: 0; pointer-events: none; overflow-x: clip; }
.lfall i { position: absolute; top: 0; left: calc(50% + round(var(--login-logo-height), 1px) * -.8103 - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--l-primary); opacity: 0; }
.lfall::after { content: ""; position: absolute; top: 7px; left: calc(50% + round(var(--login-logo-height), 1px) * -.8103 - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--l-primary); opacity: 0; }
.lfall i::before { content: ""; position: absolute; left: 0; bottom: 2px; width: 4px; height: 14px; background: linear-gradient(to top, var(--l-primary), transparent); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .45; }
.lfall .lfx, .lfall .lpx { left: calc(50% + round(var(--login-logo-height), 1px) * 1.2043 - 2px); }
.lfall .lfa, .lfall .lpa { left: calc(50% + round(var(--login-logo-height), 1px) * 1.9843 - 2px); }
.lfall b { position: absolute; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--l-primary); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lfall i, .lfall b, .lfall::after, .auth__title, .auth__title .tci, .auth__title .td { animation: none !important; } }
.auth__title {
  margin: 0 0 22px; overflow-x: clip; overflow-y: visible; text-align: center; font-weight: 600;
  font-size: clamp(8px, calc(var(--login-width) / 22), 14px); color: var(--l-text, var(--l-primary));
}
/* narrow panel: the title does not fit one line. It breaks before "Hexa" (js/auth.js), the lines stand closer, and
   each drop falls down to the line of its own words (--ly on the drop). */
.auth__title--two { line-height: 14px; }
.auth__form { display: flex; flex-direction: column; gap: 18px; }
/* One button: sign-in happens on the HDTools Account page (hdtools-id); the password form,
   provider buttons and register / reset screens are gone (2026-10-10). */
.lsubmit {
  width: 100%; padding: 6px 8px; border: 1px solid var(--l-btn); border-radius: 4px;
  background: var(--l-btn); color: var(--l-btn-text); font: inherit; font-size: 10px; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.lsubmit:hover { background: var(--l-btn-hover); border-color: var(--l-btn-hover); box-shadow: 0 2px 6px var(--l-ring); }
.lsubmit:active { background: var(--l-btn); box-shadow: 0 1px 3px var(--l-ring); }
.lsubmit:disabled { opacity: 0.72; cursor: default; box-shadow: none; }
a.lsubmit { display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
a.lsubmit[aria-disabled="true"] { opacity: 0.72; cursor: default; box-shadow: none; pointer-events: none; }
.auth .notice { margin-top: -10px; padding: 0; border-radius: 0; background: none; font-size: 9px; line-height: 1.35; text-align: center; color: var(--l-soft); }
.auth .notice--error { color: var(--l-error); }
.auth .notice--success { color: var(--l-ok); }
.auth .notice--warning { color: var(--l-error); }
.lfine { margin: auto 0 16px; padding-top: 22px; /* pressed to the bottom of the window */ color: var(--l-soft); font-size: 9px; line-height: 12px; text-align: center; }
.lfine span { display: block; text-wrap: balance; }
/* narrow panel: each sentence wraps, a small gap keeps them two blocks */
@media (max-width: 220px) { .lfine span + span { margin-top: 4px; } }
@media (min-width: 220px) {
  .lsubmit { font-size: 12px; }
}

.notice-dialog { width: min(320px, calc(100% - 16px)); margin: auto; box-shadow: var(--shadow); }
.notice-dialog[open] { animation: sheet-in var(--t) var(--ease); }
.notice-dialog__body { display: grid; gap: 8px; padding: 12px; }
.notice-dialog__icon { color: var(--icon); }
.notice-dialog__icon--error { color: var(--danger); }
.notice-dialog__icon--success { color: var(--success); }
.notice-dialog__icon .icon { width: 24px; height: 24px; }
.notice-dialog__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.notice-dialog__email { color: var(--text-2); word-break: break-all; }

.toast { position: fixed; inset-inline: 8px; inset-block-end: 28px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.toast__msg {
  max-width: 360px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow); animation: sheet-in var(--t) var(--ease);
}
.empty { display: grid; justify-items: center; gap: 6px; padding: 32px 8px; text-align: center; color: var(--muted); }
.empty__title { font-weight: var(--fw-bold); color: var(--text); }

/* 12 Touch & motion ----------------------------------------------------- */
@media (pointer: coarse) {
  :root { --h: 34px; --fs: 14px; --fs-sm: 12px; --fs-lg: 16px; --lh: 19px; }
  .icon-btn--box, .btn { padding-block-end: 0; padding-inline-end: 0; }
  .segmented button { height: 30px; min-width: 32px; }
  .bar .segmented button { height: 20px; min-width: 22px; }
  .bar .icon-btn { width: 24px; height: 24px; }
  .segmented--text button { min-width: 0; }
  .card__fav { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* 3D viewer window (placeholder until the Web3D viewer lands) */
.viewer { display: flex; flex-direction: column; min-height: 100vh; background: var(--pane); }
.viewer__stage { flex: 1; display: grid; place-items: center; }
.viewer__icon { width: 48px; height: 48px; color: var(--card-accent); }

/* 12 Bar after Pavel's mockup "W264": account row · [♡][library][sort][Filter] · [views][search] */
.account {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 22px; padding: 0 2px;
  border: 0; background: none; color: var(--muted); font-size: var(--fs); cursor: pointer; text-align: start;
}
.account:hover { color: var(--text-2); }
.account:focus-visible { outline: 1px solid var(--focus); outline-offset: 0; }
.account__icon { color: var(--icon-2); }
.account__email { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account__plan {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-2); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
}
.account__plan:empty { display: none; }
.account__plan::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.account__plan[data-plan="free"] { color: var(--plan-free); }
.account__plan[data-plan="beta"] { color: var(--plan-beta); }
.account__plan[data-plan="pro"] { color: var(--plan-pro); }
/* bar: search on its own row; views left, toggles right. 24 px boxes: 16 px icons sit 3 px in */
.bar__spacer { flex: 1; }
.bar .icon-btn--box { width: 24px; height: 24px; padding: 0; }
.bar__sort { flex: none; }
.bar__sort .dropdown__btn { justify-content: center; width: 24px; height: 24px; padding: 0; border-color: transparent; background: none; }
.bar__sort .dropdown__btn:hover { background: var(--hover); }
.bar__sort .dropdown__btn .icon { rotate: none; }
.dropdown__menu.dropdown__menu--end { inset-inline-start: auto; inset-inline-end: 0; }
.bar__count {
  position: absolute; inset-block-start: -5px; inset-inline-end: -5px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: var(--cta); color: var(--on-cta); font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
}
/* toggles have no frame: the filled glyph is the state; the filter (opens a panel) keeps its box */
.bar__toggle { width: 24px; height: 24px; color: var(--icon); }
.bar__toggle[aria-pressed="true"], .bar__toggle[aria-expanded="true"] { color: var(--sel-line); }
.bar__filter[aria-pressed="true"], .bar__filter[aria-expanded="true"] { color: var(--sel-line); border-color: var(--sel-line); }
.bar__row--tools { gap: 2px; }
.bar__row--tools .segmented { margin-inline-end: 6px; }
.bar__row--tools .segmented:last-child { margin-inline-end: 0; }
.bar__row--tools .account { flex: 0 1 auto; width: auto; min-width: 0; height: 24px; }
/* section tabs as in HD Browser: the 25 px HD_SECTION icons are the cells themselves, 4 px apart */
.sectabs { display: flex; align-items: center; flex: 1; min-width: 0; gap: 4px; flex-wrap: wrap; }
/* the top row: the tabs are the filter; what narrows the list further (favourites, bought, options) is pressed to the right edge */
.bar__row--top { align-items: flex-start; gap: 4px; }
.bar__side { display: flex; flex: none; gap: 4px; margin-inline-start: auto; }
.bar__side .icon-btn { position: relative; width: 25px; height: 25px; padding: 0; border-radius: 2px; } /* 19 px icon, 3 px around: as the tabs */
.sectabs__tab {
  flex: none; display: inline-grid; place-items: center; width: 25px; height: 25px; padding: 0;
  border: 0; border-radius: 2px; background: none; color: var(--tree-ink); cursor: pointer;
}
.sectabs__tab--text { width: auto; min-width: 25px; padding: 0 6px; font-size: var(--fs); }
.sectabs__tab:hover { background: var(--hover); }
.sectabs__tab:focus-visible { outline: 1px solid var(--focus); outline-offset: -2px; }
.sectabs__tab[aria-pressed="true"] { background: var(--card-sel); box-shadow: inset 0 0 0 1px var(--sel-line); color: var(--seg-on); }
.sectabs__tab:disabled { opacity: 0.35; cursor: default; background: none; }
.bar__row--search { gap: 4px; }
/* beside the field every button has the field's height; the odd box keeps the 16 px icon on whole pixels */
.bar__row--search .icon-btn, .bar__row--search .bar__sort .dropdown__btn { width: var(--h); height: var(--h); padding: 0 1px 1px 0; }
.bar__row--search .search { margin-inline: 4px 0; } /* 8 px between the field and the button groups */
.chips { align-items: center; }
.chips__reset { margin-inline-start: 4px; font-size: var(--fs-sm); }

/* Filter panel: covers the card area under the bar (same width, down to the pane bottom).
   Head: close, live count, reset. Tabs: Categories | Options. */
.panel {
  position: fixed; inset-inline: 0; inset-block: 80px 0; margin: 0; width: auto; max-width: none; height: auto; max-height: none;
  padding: 0; display: none; flex-direction: column; border: 0; background: var(--pane); color: var(--text);
}
.panel[open] { display: flex; animation: panel-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } }
.panel::backdrop { background: transparent; }
.panel__body { flex: 1; min-height: 0; overflow-y: auto; }
/* Tabs as HDTools.UI TabItem: no strip frame; the selected tab is 2 px taller, has a 3 px accent
   rail, the panel surface and a 1 px border that joins the content frame below it. */
.tabs { flex: none; display: flex; align-items: flex-end; gap: 0; height: 29px; padding: 0; }
.tabs__tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 27px;
  margin-block-end: 1px; padding: 0 5px 0 8px; border: 1px solid transparent; border-block-end: 0;
  background: none; color: var(--tab-text); font-size: var(--fs); cursor: pointer;
}
.tabs__tab .icon { flex: none; color: var(--tree-ink); }
.tabs__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tabs__tab::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -1px; width: 3px; background: var(--sel-line); opacity: 0; transition: opacity var(--t) var(--ease); }
.tabs__tab:hover { background: var(--tab-hover); color: var(--tab-hover-text); }
.tabs__tab[aria-selected="true"] {
  height: 29px; margin-block-end: -1px; border-color: var(--tab-line); background: var(--tab-panel); color: var(--tab-active-text);
}
.tabs__tab[aria-selected="true"]::before { opacity: 1; }
.tabs__tab:focus-visible { outline: 1px solid var(--focus); outline-offset: -2px; }
.tabs__tab .more__count { width: 6px; min-width: 0; height: 6px; padding: 0; border-radius: 50%; font-size: 0; }
.tabs__clear { align-self: center; margin-inline-start: auto; color: var(--clear); }
.tabs__clear:hover { background: none; color: var(--clear-hover); }
.tabs__close { margin-inline: 4px; }
.tabs__clear, .tabs__close { align-self: flex-start; margin-block-start: 2px; } /* 24 in 29: whole pixels, not a centred half */
.tabs__clear[hidden] + .tabs__close { margin-inline-start: auto; }
.panel__body { border-block-start: 1px solid var(--tab-line); background: var(--tab-panel); }
.side .tree__toggle:hover { background: var(--hover); }
/* Category tree: 1 px guide lines (whole pixels) follow the row height, names wrap to two lines,
   modern +/− (no box): the vertical bar folds into the minus. Every name text starts at 55 px. */
.tree { display: block; padding: 4px 0 8px; font-size: 12px; }
.tree__row { position: relative; isolation: isolate; display: flex; align-items: flex-start; min-width: 0; --y: 13px; --ib: 23px; }
.tree__row--root { min-height: 28px; }   /* even heights: the dotted guides keep one rhythm down the tree */
.tree__row--0 { min-height: 36px; --y: 17px; --ib: 32px; }
.tree__row--1 { min-height: 32px; --y: 15px; --ib: 28px; }   /* 24 px icon + 4 + 4, like the folder rows; whole screen pixels at 125 / 150 / 175 % */
.tree__row--2 { min-height: 24px; --y: 12px; }
.tree__row--in { animation: tree-in 180ms var(--ease) both; }
@keyframes tree-in { from { opacity: 0; transform: translateY(-4px); } }
/* --hair = one screen pixel (1 px at 100 %, 0.667 px at 150 %, set by dpi.js): lines and dots stay one screen pixel */
.tree__g { position: absolute; inset-inline-start: var(--x); width: var(--hair, 1px); background: var(--tree-line); pointer-events: none; }
.tree__g--rail { top: 0; bottom: 0; }
.tree__g--up { top: 0; height: calc(var(--y) + 1px); }
.tree__g--down { top: calc(var(--y) + 1px); bottom: 0; }
.tree__row--box > .tree__g--up { height: calc(var(--y) - 6px); }
.tree__row--box > .tree__g--down { top: calc(var(--y) + 9px); }
.tree__g--kid { top: var(--ib); bottom: 0; }
.tree__g--root { top: 18px; bottom: 0; }
.tree__g--stub { top: var(--y); height: var(--hair, 1px); width: var(--w); inset-inline-start: calc(var(--x) + 1px); }

.tree__all {
  position: absolute; inset-inline-start: 4px; top: 9px; width: 9px; height: 9px;
  background:
    linear-gradient(var(--tree-ink), var(--tree-ink)) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--tree-ink), var(--tree-ink)) 5px 0 / 4px 4px no-repeat,
    linear-gradient(var(--tree-ink), var(--tree-ink)) 0 5px / 4px 4px no-repeat,
    linear-gradient(var(--tree-ink), var(--tree-ink)) 5px 5px / 4px 4px no-repeat;
}
/* 15 px round button centred on the guide; the 9 px bars sit on whole pixels at rest */
.tree__toggle {
  position: absolute; z-index: 1; inset-inline-start: calc(var(--x) - 7px); top: calc(var(--y) - 7px);
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--toggle-ink); cursor: pointer;
}
.tree__toggle::before, .tree__toggle::after {
  content: ""; position: absolute; left: 4px; top: calc(8px - var(--hair, 1px)); width: 8px; height: calc(2 * var(--hair, 1px)); background: currentColor;
}
.tree__toggle::after { transition: rotate 220ms var(--ease); rotate: 90deg; }
.tree__toggle[aria-expanded="true"]::after { rotate: 0deg; }
.tree__toggle:hover { background: var(--hover); color: var(--text-strong); }
.tree__toggle:focus-visible { outline: 1px solid var(--focus); outline-offset: 0; }
.tree__item {
  flex: 1; display: flex; align-items: flex-start; gap: 5px; min-width: 0; min-height: inherit;
  padding: 0 8px 0 2px; border: 0; border-radius: 0; background: none;
  color: var(--text); font-size: 12px; text-align: start; cursor: pointer;
}
.tree__item::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: background var(--t) var(--ease); }
.tree__row--root .tree__item { padding-block: 5px; }
.tree__row--0 .tree__item { padding-block: 3px; gap: 5px; font-weight: var(--fw-bold); }
.tree__row--0 .tree__name { padding-block-start: 6px; }
.tree__row--1 .tree__item { padding-block: 4px; gap: 4px; }
.tree__row--1 .tree__name { padding-block-start: 4px; }
.tree__row--2 .tree__item { padding-block: 4px; }
.tree__item:hover::before { background: var(--hover); }
.tree__item[aria-current="true"] { color: var(--sel-text); }
.tree__item[aria-current="true"]::before { background: var(--sel); }
.tree__item:disabled { opacity: 0.45; cursor: default; }
.tree__item:disabled:hover::before { background: none; }
.tree__item:focus-visible { outline: none; }
.tree__item:focus-visible::before { outline: 1px solid var(--focus); outline-offset: -1px; }
.tree__name {
  min-width: 0; line-height: 16px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.tree__count { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tree__item[aria-current="true"] .tree__count { color: inherit; }
.tree__icon { flex: none; color: var(--tree-ink); }
.more__count {
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--cta); color: var(--on-cta);
  font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
}
.panel .facets { padding: 0 0 8px; }
.panel .facet__head, .panel .opt { font-size: 12px; }

/* 13 Sort dropdown (replaces the native select: its popup ignored the pane style) */
.dropdown { position: relative; }
.dropdown__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: var(--h-sm);
  padding: 0 6px; border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--input); color: var(--text); font-size: var(--fs); cursor: pointer;
}
.dropdown__btn:hover { border-color: var(--line); }
.dropdown__btn[aria-expanded="true"] { border-color: var(--sel-line); }
.dropdown__btn .icon { color: var(--icon-2); transition: rotate var(--t) var(--ease); }
.dropdown__btn[aria-expanded="true"] .icon { rotate: 180deg; }
.dropdown__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dropdown__menu {
  position: absolute; z-index: 20; inset-block-start: calc(100% + 2px); inset-inline-start: 0; min-width: 100%; width: max-content;
  padding: 2px 0; border: 1px solid var(--line-soft); background: var(--menu); box-shadow: var(--shadow);
}
.dropdown__menu [role="option"] {
  display: flex; align-items: center; gap: 12px; height: 25px; padding: 0 8px; color: var(--text); white-space: nowrap; cursor: pointer; outline: none;
}
.dropdown__menu [role="option"]:hover, .dropdown__menu [role="option"]:focus { background: var(--hover); }
.dropdown__menu [aria-selected="true"] { color: var(--text-2); font-weight: var(--fw-bold); }
.dropdown__menu [aria-selected="true"]::after {
  content: ""; width: 12px; height: 12px; margin-inline-start: auto; background: var(--card-accent);
  -webkit-mask: var(--mask-tick) center / contain no-repeat; mask: var(--mask-tick) center / contain no-repeat;
}

/* 14 Filter drawer: accordion sections, checkbox / radio rows with live counts */
.facets { padding: 0 0 8px; }
.facet { border-block-end: 1px solid var(--line-soft); }
.facet__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  width: 100%; height: 32px; padding: 0 var(--pad); border: 0; background: none; color: var(--text-2);
  font-size: var(--fs); text-align: start; cursor: pointer;
}
.facet__head:hover { background: var(--hover); }
.facet__head:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
.facet__title { font-weight: var(--fw-bold); }
.facet__sum { overflow: hidden; color: var(--link); white-space: nowrap; text-overflow: ellipsis; text-align: end; }
.facet__chev { color: var(--icon-2); transition: rotate var(--t) var(--ease); }
.facet__head[aria-expanded="true"] .facet__chev { rotate: 180deg; }
.facet__body { display: grid; padding: 0 0 6px; }
.opt {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 24px; padding: 0 var(--pad); color: var(--text); cursor: pointer;
}
.opt:hover { background: var(--hover); }
.opt__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.opt__count { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.opt:has(input:disabled) { color: var(--muted); opacity: 0.55; cursor: default; }
.opt:has(input:disabled):hover { background: none; }
.opt--solo { min-height: 33px; border-block-end: 1px solid var(--line-soft); }
.opt input {
  appearance: none; display: grid; place-items: center; width: 14px; height: 14px; margin: 0;
  border: 1px solid color-mix(in srgb, var(--muted) 75%, var(--sheet)); border-radius: 2px; background: var(--input); cursor: inherit;
}
.opt input[type="radio"] { border-radius: 50%; }
.opt input:checked { border-color: var(--cta); background: var(--cta); }
.opt input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 10px; background: var(--on-cta);
  -webkit-mask: var(--mask-tick) center / contain no-repeat; mask: var(--mask-tick) center / contain no-repeat;
}
.opt input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-cta); }
.opt input:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.sheet__reset { margin-inline-end: auto; align-self: center; }

/* 15 Embedded in the native HDTools panel (?embed=revit): the panel owns tabs, search, view,
   sort and filter; the page shows only cards, the details sheet and dialogs. */
:root[data-embed="revit"] .bar,
:root[data-embed="revit"] .status { display: none; }
:root[data-embed="revit"] .content { padding-block-start: 4px; }