@charset "UTF-8";
/* ==========================================================================
   EasyCalculatorSmart — Hub skin (/calculators/ and /tools/), 2026-09-23.

   Loaded after hubs.css and home.css, by the two hub templates only. It
   gives the hubs the homepage's look — warm dark brown + orange in the
   dark theme, white + blue in the light one — by restyling the hubs'
   EXISTING components. No markup, filter behaviour (tools.js), URL or
   translation changes: every translated hub gets the same skin.

   Tokens come from home.css (body.is-hub shares body.is-home's block).
   Icon colours cycle through the eight .hx-g hues by card position, in
   CSS, so no template had to change to colour them.
   ========================================================================== */

/* The logo keeps its approved teal whatever this page does to tokens. */
body.is-hub .brand-name em { color: var(--brand-600); }
:root[data-theme="dark"] body.is-hub .brand-name em { color: var(--brand-400); }

/* /tools/ remaps the accent to violet on <main>; the hub skin keeps the
   page accent (orange/blue) and leaves violet to the tool icons. */
body.is-hub.tools-page main {
  --accent: var(--hx-acc2);
  --accent-hover: var(--hx-acc1);
  --accent-strong: var(--hx-acc-text);
  --accent-soft: color-mix(in srgb, var(--hx-acc1) 12%, transparent);
  --accent-line: var(--hx-card-line-hover);
  --focus: var(--hx-acc1);
}

body.is-hub { --dir-card-r: 18px; }

/* ---- Hero ---- */
body.is-hub .dir-hero {
  background: var(--hx-hero);
  border-block-end-color: var(--line);
}
body.is-hub .dir-hero h1 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
body.is-hub .dir-hero-sub { color: var(--text-soft); }

body.is-hub .dir-stat-icon,
body.is-hub .dir-head-icon,
body.is-hub .dir-strip-icon {
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
  border: 0;
}
body.is-hub .dir-head-icon-tool,
body.is-hub .dir-stat-icon-tool,
body.is-hub .dir-strip-icon-tool { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; }
body.is-hub .dir-head-icon-hot { background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; }

body.is-hub .dir-head h2 { font-weight: 800; letter-spacing: -0.02em; }
body.is-hub .dir-more { color: var(--hx-acc-text); }

/* The hero illustration's chips and the drawing follow the page accent. */
body.is-hub .dir-art-chip { background: var(--surface); border-color: var(--line); color: var(--hx-acc2); }
body.is-hub .dir-art-chip-b,
body.is-hub .dir-art-chip-c { color: #8b5cf6; }

/* Hero search: the homepage's rounded pill. */
body.is-hub .dir-hero-search .search-row {
  gap: 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: var(--hx-card-shadow);
}
body.is-hub .dir-hero-search .search-row:focus-within {
  border-color: var(--hx-acc1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-acc1) 20%, transparent);
}
body.is-hub .dir-hero-search .input { border: 0; background: transparent; box-shadow: none; border-radius: 999px; color: var(--text); }
body.is-hub .dir-hero-search .input:focus { box-shadow: none; transform: none; }
body.is-hub .dir-hero-search .btn {
  border: 0; border-radius: 999px; font-weight: 700;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
}

/* ---- Sidebar ---- */
body.is-hub .hub-side-nav,
body.is-hub .hub-filter,
body.is-hub .dir-panel,
body.is-hub .dir-strip {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: var(--hx-card-shadow);
}
body.is-hub .hub-side-nav .filter-pill { border-radius: 12px; padding-block: .55rem; }
body.is-hub .hub-side-nav .filter-pill:hover { background: color-mix(in srgb, var(--hx-acc1) 8%, transparent); }
body.is-hub .hub-side-nav .filter-pill[aria-pressed="true"],
[dir="rtl"] body.is-hub .hub-side-nav .filter-pill[aria-pressed="true"] {
  background: color-mix(in srgb, var(--hx-acc1) 16%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hx-card-line-hover);
}
body.is-hub .hub-side-icon { border-radius: 9px; }
body.is-hub .filter-pill[aria-pressed="true"] .hub-side-icon {
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
}
body.is-hub .filter-pill[aria-pressed="true"] .hub-side-count { color: var(--hx-acc-text); }

body.is-hub .hub-ask {
  background:
    radial-gradient(18rem 10rem at 100% 0%, color-mix(in srgb, var(--hx-acc1) 20%, transparent), transparent 70%),
    var(--surface);
  border-color: var(--hx-card-line-hover);
  border-radius: 18px;
}
body.is-hub .hub-ask-icon { color: var(--hx-acc-text); }
body.is-hub .hub-ask .btn {
  border: 0; color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
}

/* Filter bar inputs */
body.is-hub .hub-filter .input,
body.is-hub .hub-filter .select { background: var(--surface-alt); border-color: var(--line); color: var(--text); border-radius: 12px; }

/* ---- Cards: calculators (.tool-card), tools (.utool), categories ---- */
body.is-hub .tool-card,
body.is-hub .utool,
body.is-hub .cat-card,
body.is-hub .dir-tile {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: var(--hx-card-shadow);
}
body.is-hub .tool-card:hover,
body.is-hub .tool-card:focus-visible,
body.is-hub .utool:hover,
body.is-hub .utool:focus-within,
body.is-hub .cat-card:hover,
body.is-hub .cat-card:focus-visible,
body.is-hub .dir-tile:hover {
  border-color: var(--hx-card-line-hover);
  box-shadow: var(--hx-card-shadow-hover);
  transform: translateY(-3px);
}
body.is-hub .tool-card-name,
body.is-hub .utool-link { font-weight: 700; }
body.is-hub .card-cat { color: var(--text-faint); }
body.is-hub .tool-card:hover .card-arrow,
body.is-hub .utool:hover .card-arrow,
body.is-hub .cat-card:hover .card-arrow { color: var(--hx-acc-text); }
body.is-hub .cat-card .count { color: var(--hx-acc-text); }

/* Icon squares: light = pastel + coloured glyph, dark = solid gradient. */
body.is-hub .tool-card-icon,
body.is-hub .utool-icon,
body.is-hub .cat-card-icon,
body.is-hub .dir-tile-icon {
  --a: #60a5fa; --b: #2563eb;
  inline-size: 50px; block-size: 50px; width: 50px; height: 50px;
  border-radius: 15px;
  background-image: none;
  background-color: color-mix(in srgb, var(--b) 12%, #ffffff);
  color: var(--b);
  border: 1px solid color-mix(in srgb, var(--b) 18%, #ffffff);
  box-shadow: none;
}
:root[data-theme="dark"] body.is-hub .tool-card-icon,
:root[data-theme="dark"] body.is-hub .utool-icon,
:root[data-theme="dark"] body.is-hub .cat-card-icon,
:root[data-theme="dark"] body.is-hub .dir-tile-icon {
  background-image: linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
  background-color: var(--b);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--b) 70%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.is-hub .tool-card:hover .tool-card-icon,
body.is-hub .utool:hover .utool-icon,
body.is-hub .cat-card:hover .cat-card-icon { transform: scale(1.06); }

/* Eight hues by position, for calculators and categories. */
body.is-hub :is(.card-grid, .dir-catrow, .tile-grid) > :nth-child(8n+1) :is(.tool-card-icon, .cat-card-icon, .dir-tile-icon) { --a: #fb923c; --b: #ea580c; }
body.is-hub :is(.card-grid, .dir-catrow, .tile-grid) > :nth-child(8n+2) :is(.tool-card-icon, .cat-card-icon, .dir-tile-icon) { --a: #60a5fa; --b: #2563eb; }
body.is-hub :is(.card-grid, .dir-catrow, .tile-grid) > :nth-child(8n+3) :is(.tool-card-icon, .cat-card-icon, .dir-tile-icon) { --a: #fb7185; --b: #e11d48; }
body.is-hub :is(.card-grid, .dir-catrow, .tile-grid) > :nth-child(8n+4) :is(.tool-card-icon, .cat-card-icon, .dir-tile-icon) { --a: #34d399; --b: #059669; }
body.is-hub :is(.card-grid, .dir-catrow, .tile-grid) > :nth-child(8n+5) :is(.tool-card-icon, .cat-card-icon, .dir-tile-icon) { --a: #a78bfa; --b: #7c3aed; }
body.is-hub :is(.card-grid, .dir-catrow, .tile-grid) > :nth-child(8n+6) :is(.tool-card-icon, .cat-card-icon, .dir-tile-icon) { --a: #fbbf24; --b: #d97706; }
body.is-hub :is(.card-grid, .dir-catrow, .tile-grid) > :nth-child(8n+7) :is(.tool-card-icon, .cat-card-icon, .dir-tile-icon) { --a: #22d3ee; --b: #0891b2; }
body.is-hub :is(.card-grid, .dir-catrow, .tile-grid) > :nth-child(8n+8) :is(.tool-card-icon, .cat-card-icon, .dir-tile-icon) { --a: #f87171; --b: #dc2626; }

/* Tools keep a violet family so the two halves stay distinguishable:
   violet, purple, indigo and fuchsia by position. */
body.is-hub .utool-icon,
body.is-hub .dir-tile-tool .dir-tile-icon,
body.is-hub .cat-card-tool .cat-card-icon { --a: #a78bfa !important; --b: #7c3aed !important; }
body.is-hub :is(.card-grid, .tile-grid) > :nth-child(4n+2) .utool-icon { --a: #c084fc !important; --b: #9333ea !important; }
body.is-hub :is(.card-grid, .tile-grid) > :nth-child(4n+3) .utool-icon { --a: #818cf8 !important; --b: #4f46e5 !important; }
body.is-hub :is(.card-grid, .tile-grid) > :nth-child(4n+4) .utool-icon { --a: #e879f9 !important; --b: #c026d3 !important; }

/* Buttons and crosslink */
body.is-hub .btn-calc,
body.is-hub .btn-tool,
body.is-hub .btn-primary {
  border: 0;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
}
body.is-hub .crosslink {
  background:
    radial-gradient(26rem 12rem at 100% 0%, color-mix(in srgb, var(--hx-acc1) 18%, transparent), transparent 70%),
    var(--surface);
  border-color: var(--hx-card-line-hover);
  border-radius: 20px;
}

/* FAQ and index rows */
body.is-hub .disclosure { background: var(--surface); border-color: var(--line); border-radius: 14px; }
body.is-hub .site-footer { background: var(--surface-alt); border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  body.is-hub .tool-card:hover, body.is-hub .utool:hover, body.is-hub .cat-card:hover,
  body.is-hub .dir-tile:hover { transform: none; }
}

/* Vertical card: icon on top, then name, blurb and foot — reads better
   in the narrower column beside the sidebar than icon-beside-text. */
body.is-hub .card-grid .tool-card,
body.is-hub .card-grid .utool {
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  padding: 1.1rem;
}
body.is-hub .card-grid .tool-card-name,
body.is-hub .card-grid .utool-link { font-size: 1rem; line-height: 1.3; }
body.is-hub .card-grid .tool-card p,
body.is-hub .card-grid .utool p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .85rem; color: var(--text-faint);
}
@media (min-width: 1280px) {
  body.is-hub .hub-main .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  body.is-hub .hub-main .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.is-hub .card-grid .tool-card, body.is-hub .card-grid .utool { padding: .85rem; }
  body.is-hub .card-grid .tool-card p, body.is-hub .card-grid .utool p { display: none; }
}
/* The homepage illustration on a hub: a touch smaller. */
body.is-hub .hx-art { min-block-size: 18rem; }
body.is-hub .hx-art-svg { max-inline-size: 19rem; }
@media (max-width: 960px) { body.is-hub .hx-art { display: none; } }

/* ==========================================================================
   CALCULATOR HUB (hc-*) — rebuilt 2026-09-23 against the owner's
   calculator-hub references (laptop + mobile). Tokens: home.css.
   ========================================================================== */

body.is-hub .hc-hero {
  position: relative;
  background: var(--hx-hero);
  border-block-end: 1px solid var(--line);
  padding-block: var(--s3) var(--s6);
  overflow: hidden;
}
body.is-hub .hc-hero .breadcrumb { margin-block-end: 0; }
body.is-hub .hc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: var(--s5);
  align-items: center;
  padding-block-start: var(--s4);
}
body.is-hub .hc-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 0 var(--s3);
  padding: .3rem .85rem;
  font-size: .84rem; font-weight: 600;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--hx-card-line-hover);
  border-radius: 999px;
}
body.is-hub .hc-badge-dot {
  inline-size: .55rem; block-size: .55rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
}
body.is-hub .hc-h1 {
  margin: 0;
  font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
body.is-hub .hc-accent {
  background: linear-gradient(100deg, var(--hx-acc1), var(--hx-acc2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.is-hub .hc-lede { margin: var(--s3) 0 0; max-inline-size: 52ch; color: var(--text-soft); font-size: 1.02rem; line-height: 1.55; }

/* Search: rounded field with the button inside, as in the reference. */
body.is-hub .hc-search {
  position: relative;
  display: flex; align-items: center;
  margin-block-start: var(--s4);
  max-inline-size: 34rem;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--hx-card-shadow);
}
body.is-hub .hc-search:focus-within { border-color: var(--hx-acc1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-acc1) 20%, transparent); }
body.is-hub .hc-search-icon { position: absolute; inset-inline-start: 1rem; inline-size: 1.2rem; block-size: 1.2rem; color: var(--text-faint); pointer-events: none; }
body.is-hub .hc-search input {
  flex: 1 1 auto; min-inline-size: 0;
  min-block-size: 46px;
  padding-inline: 2.9rem .75rem;
  font: inherit; font-size: max(16px, 1rem);
  color: var(--text);
  background: transparent; border: 0; outline: none;
}
body.is-hub .hc-search button {
  flex: none;
  min-block-size: 46px;
  padding-inline: 1.6rem;
  font: inherit; font-weight: 700;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
  border: 0; border-radius: 11px;
  cursor: pointer;
}

/* Pills */
body.is-hub .hc-pills { display: flex; flex-wrap: wrap; gap: .55rem; margin-block-start: var(--s4); }
body.is-hub .hc-pill {
  min-block-size: 36px;
  padding: .3rem 1.05rem;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
body.is-hub .hc-pill:hover { color: var(--text); border-color: var(--hx-card-line-hover); }
body.is-hub .hc-pill[aria-pressed="true"] { color: var(--hx-on-acc); border-color: transparent; background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2)); }

body.is-hub .hc-hero .hx-art { min-block-size: 16rem; }
body.is-hub .hc-hero .hx-art-svg { max-inline-size: 17rem; }

/* Layout */
body.is-hub .hc-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  margin-block-start: var(--s5);
}

/* Sidebar */
body.is-hub .hc-side { position: sticky; inset-block-start: calc(var(--header-h) + 1rem); display: grid; gap: var(--s4); }
body.is-hub .hc-side-card,
body.is-hub .hc-callout,
body.is-hub .hc-ask {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--hx-card-shadow);
}
body.is-hub .hc-side-card { padding: var(--s3); }
body.is-hub .hc-side-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.is-hub .hc-side-title {
  display: flex; align-items: center; gap: .6rem;
  margin: .25rem .35rem var(--s3);
  font-size: 1rem; font-weight: 800;
}
body.is-hub .hc-side-title-icon { color: var(--hx-acc-text); display: inline-flex; }
body.is-hub .hc-side-title-icon svg { inline-size: 1.3rem; block-size: 1.3rem; }
body.is-hub .hc-side-btn {
  display: flex; align-items: center; gap: .7rem;
  inline-size: 100%;
  padding: .55rem .6rem;
  font: inherit; font-size: .88rem; font-weight: 550;
  text-align: start;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}
body.is-hub .hc-side-btn:hover { background: color-mix(in srgb, var(--hx-acc1) 7%, transparent); color: var(--text); }
body.is-hub .hc-side-btn[aria-pressed="true"] {
  color: var(--text);
  font-weight: 700;
  background: color-mix(in srgb, var(--hx-acc1) 15%, transparent);
  border-color: var(--hx-card-line-hover);
}
body.is-hub .hc-side-icon {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 1.7rem; block-size: 1.7rem;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(150deg, var(--a), var(--b));
}
body.is-hub .hc-side-icon svg { inline-size: .95rem; block-size: .95rem; }
body.is-hub .hc-side-name { flex: 1 1 auto; min-inline-size: 0; }
body.is-hub .hc-side-count { font-size: .75rem; font-weight: 600; color: var(--text-faint); }

body.is-hub .hc-callout { display: flex; align-items: center; gap: .9rem; padding: var(--s4); border-color: var(--hx-card-line-hover);
  background: radial-gradient(14rem 8rem at 0% 0%, color-mix(in srgb, var(--hx-acc1) 18%, transparent), transparent 70%), var(--surface); }
body.is-hub .hc-callout-icon { color: var(--hx-acc1); display: inline-flex; }
body.is-hub .hc-callout-icon svg { inline-size: 2.4rem; block-size: 2.4rem; }
body.is-hub .hc-callout strong { display: block; font-size: 1rem; }
body.is-hub .hc-callout-free { display: block; font-size: 1.15rem; font-weight: 800; color: var(--hx-acc-text); }
body.is-hub .hc-callout small { display: block; font-size: .78rem; color: var(--text-faint); }

body.is-hub .hc-ask { padding: var(--s4); }
body.is-hub .hc-ask h2 { margin: 0 0 .35rem; font-size: .95rem; }
body.is-hub .hc-ask p { margin: 0 0 .6rem; font-size: .8rem; color: var(--text-faint); line-height: 1.5; }
body.is-hub .hc-ask-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: var(--hx-acc-text); text-decoration: none; }
body.is-hub .hc-ask-link svg { inline-size: .9rem; block-size: .9rem; }

/* Main */
body.is-hub .hc-main-head { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-block-end: var(--s4); }
body.is-hub .hc-main-icon { color: var(--hx-acc-text); display: inline-flex; }
body.is-hub .hc-main-icon svg { inline-size: 1.6rem; block-size: 1.6rem; }
body.is-hub .hc-main-head h2 { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
body.is-hub .hc-count { margin: 0; flex: 1 1 auto; font-size: 1.05rem; color: var(--text-faint); }
body.is-hub .hc-count::before { content: "("; }
body.is-hub .hc-count::after { content: ")"; }
body.is-hub .hc-sort {
  min-block-size: 40px;
  padding: .4rem 2.2rem .4rem .9rem;
  font: inherit; font-size: .88rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}

body.is-hub .hc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
body.is-hub .hc-grid[hidden] { display: none; }
body.is-hub .hc-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .65rem;
  min-block-size: 8.25rem;
  padding: 1rem .5rem .9rem;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--hx-card-shadow);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.is-hub .hc-tile[hidden],
body.is-hub .hc-tile.hx-paged-out { display: none; }
body.is-hub .hc-tile:hover { transform: translateY(-3px); color: var(--text); border-color: var(--hx-card-line-hover); box-shadow: var(--hx-card-shadow-hover); }
body.is-hub .hc-tile:focus-visible,
body.is-hub .hc-pill:focus-visible,
body.is-hub .hc-side-btn:focus-visible,
body.is-hub .hc-page:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body.is-hub .hc-tile-icon {
  display: inline-grid; place-items: center;
  inline-size: 3.25rem; block-size: 3.25rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--b) 13%, #fff);
  color: var(--b);
  border: 1px solid color-mix(in srgb, var(--b) 18%, #fff);
  transition: transform .16s ease;
}
:root[data-theme="dark"] body.is-hub .hc-tile-icon,
:root[data-theme="dark"] body.is-hub .hc-strip-icon {
  background: linear-gradient(150deg, var(--a), var(--b));
  color: #fff;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--b) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.is-hub .hc-tile-icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
body.is-hub .hc-tile:hover .hc-tile-icon { transform: scale(1.06); }
body.is-hub .hc-tile-name { font-size: .82rem; font-weight: 650; line-height: 1.3; }

/* Pager */
body.is-hub .hc-pager { display: flex; justify-content: center; gap: .45rem; margin-block-start: var(--s5); }
body.is-hub .hc-pager[hidden] { display: none; }
body.is-hub .hc-page {
  min-inline-size: 36px; min-block-size: 36px;
  font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  cursor: pointer;
}
body.is-hub .hc-page[aria-current="page"] { color: var(--hx-on-acc); border-color: transparent; background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2)); }

/* Benefit strip */
body.is-hub .hc-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  list-style: none;
  margin: var(--s6) 0 0;
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--hx-card-shadow);
}
body.is-hub .hc-strip li { display: flex; align-items: center; gap: .8rem; min-inline-size: 0; }
body.is-hub .hc-strip li + li { border-inline-start: 1px solid var(--line); padding-inline-start: var(--s4); }
body.is-hub .hc-strip-icon {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 12px;
  background: color-mix(in srgb, var(--b) 13%, #fff); color: var(--b);
}
body.is-hub .hc-strip-icon svg { inline-size: 1.3rem; block-size: 1.3rem; }
body.is-hub .hc-strip strong { display: block; font-size: .95rem; }
body.is-hub .hc-strip small { display: block; font-size: .78rem; color: var(--text-faint); }

/* The SEO sections below the strip keep their own layout, full width. */
body.is-hub .hc-more { margin-block-start: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  body.is-hub .hc-tile, body.is-hub .hc-tile-icon { transition: none; }
  body.is-hub .hc-tile:hover { transform: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  body.is-hub .hc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  body.is-hub .hc-layout { grid-template-columns: minmax(0, 1fr); }
  body.is-hub .hc-side { display: none; }
  body.is-hub .hc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.is-hub .hc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.is-hub .hc-strip li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 760px) {
  body.is-hub .hc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Mobile reference: art top-right beside the heading, full-width
     search, one scrolling row of pills, 3-up tiles, one-row strip. */
  body.is-hub .hc-hero-grid { grid-template-columns: minmax(0, 1fr); padding-block-start: var(--s3); }
  body.is-hub .hc-hero .hx-art {
    display: grid;
    position: absolute;
    inset-block-start: 2.6rem;
    inset-inline-end: .5rem;
    inline-size: 7.5rem;
    min-block-size: 0;
    pointer-events: none;
  }
  body.is-hub .hc-hero .hx-art-svg { max-inline-size: 7.5rem; }
  body.is-hub .hc-hero .hx-float,
  body.is-hub .hc-hero .hx-art-glow { display: none; }
  body.is-hub .hc-badge,
  body.is-hub .hc-h1,
  body.is-hub .hc-lede { margin-inline-end: 7rem; }
  body.is-hub .hc-h1 { font-size: 2.1rem; }
  body.is-hub .hc-lede { font-size: .92rem; }
  body.is-hub .hc-search { max-inline-size: none; }
  body.is-hub .hc-search button { padding-inline: 1.1rem; }
  body.is-hub .hc-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--s4) * -1);
    padding-inline: var(--s4);
    padding-block-end: 2px;
  }
  body.is-hub .hc-pills::-webkit-scrollbar { display: none; }
  body.is-hub .hc-pill { flex: none; }
  body.is-hub .hc-main-head h2 { font-size: 1.25rem; }
  body.is-hub .hc-count { font-size: .9rem; }
  body.is-hub .hc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  body.is-hub .hc-tile { min-block-size: 7.4rem; padding: .85rem .3rem .75rem; border-radius: 14px; }
  body.is-hub .hc-tile-icon { inline-size: 3rem; block-size: 3rem; }
  body.is-hub .hc-tile-name { font-size: .78rem; }
  body.is-hub .hc-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; padding: var(--s3); }
  body.is-hub .hc-strip li { flex-direction: column; text-align: center; gap: .35rem; }
  body.is-hub .hc-strip li + li { border-inline-start: 0; padding-inline-start: 0; }
  body.is-hub .hc-strip strong { font-size: .72rem; line-height: 1.25; }
  body.is-hub .hc-strip small { display: none; }
  body.is-hub .hc-strip-icon { inline-size: 2.2rem; block-size: 2.2rem; }
}
@media (max-width: 359px) {
  body.is-hub .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.is-hub .hc-hero .hx-art { display: none; }
  body.is-hub .hc-badge, body.is-hub .hc-h1, body.is-hub .hc-lede { margin-inline-end: 0; }
}

/* Phone header: the logo must never truncate. The hero search sits just
   below on these pages, so the header search icon is the one to drop,
   and the remaining buttons tighten slightly. */
@media (max-width: 420px) {
  body:is(.is-home, .is-hub) .hx-header-search { display: none; }
  body:is(.is-home, .is-hub) .header-inner { gap: 6px; }
  body:is(.is-home, .is-hub) .menu-btn,
  body:is(.is-home, .is-hub) .theme-btn { inline-size: 40px; block-size: 40px; }
}
/* Heading row on a phone: heading left, compact sort right. */
@media (max-width: 640px) {
  body.is-hub .hc-main-head { flex-wrap: nowrap; }
  body.is-hub .hc-main-head h2 { flex: 1 1 auto; white-space: nowrap; }
  body.is-hub .hc-count { display: none; }
  body.is-hub .hc-sort { flex: 0 1 9.5rem; min-inline-size: 0; font-size: .8rem; padding-inline: .6rem 1.6rem; }
}

/* ==========================================================================
   TOOLS HUB (ht-*) — rebuilt 2026-09-23 against the owner's tools-hub
   references (laptop + mobile). Shares hc-* pieces with the calculator
   hub (badge, h1, pills, sidebar card, sort) but has its own
   composition: finder panel in the hero, list-style tool grid, featured
   list, stats bar.
   ========================================================================== */

/* Six tool-icon families: soft tile + coloured glyph (light), deeper
   tile (dark) — the reference's "app icon" look. */
body.is-hub .ht-c0 { --a: #fb7185; --b: #e11d48; }
body.is-hub .ht-c1 { --a: #60a5fa; --b: #2563eb; }
body.is-hub .ht-c2 { --a: #34d399; --b: #059669; }
body.is-hub .ht-c3 { --a: #a78bfa; --b: #7c3aed; }
body.is-hub .ht-c4 { --a: #fbbf24; --b: #ea580c; }
body.is-hub .ht-c5 { --a: #e879f9; --b: #c026d3; }

body.is-hub .ht-icon,
body.is-hub .ht-stat-icon,
body.is-hub .ht-fact-icon {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 2.6rem; block-size: 2.6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--b, #f97316) 12%, #fff);
  color: var(--b, #f97316);
  border: 1px solid color-mix(in srgb, var(--b, #f97316) 20%, #fff);
}
:root[data-theme="dark"] body.is-hub .ht-icon,
:root[data-theme="dark"] body.is-hub .ht-stat-icon {
  background: linear-gradient(150deg, color-mix(in srgb, var(--a) 92%, #fff), var(--b));
  color: #fff;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--b) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}
body.is-hub .ht-icon svg,
body.is-hub .ht-stat-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
body.is-hub .ht-fact-icon { inline-size: auto; block-size: auto; background: none; border: 0; color: var(--hx-acc1); }
body.is-hub .ht-fact-icon svg { inline-size: 1.6rem; block-size: 1.6rem; }

/* Hero */
body.is-hub .ht-hero {
  position: relative;
  background: var(--hx-hero);
  border-block-end: 1px solid var(--line);
  padding-block: var(--s3) var(--s6);
}
body.is-hub .ht-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--s6);
  align-items: center;
  padding-block-start: var(--s4);
}
body.is-hub .ht-underline { text-decoration: underline; text-decoration-color: var(--hx-acc2); text-decoration-thickness: .08em; text-underline-offset: .12em; }
body.is-hub .ht-facts { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); list-style: none; margin: var(--s5) 0 0; padding: 0; }
body.is-hub .ht-facts li { display: flex; align-items: center; gap: .55rem; }
body.is-hub .ht-facts strong { display: block; font-size: .9rem; }
body.is-hub .ht-facts small { display: block; font-size: .76rem; color: var(--text-faint); }

/* Finder panel */
body.is-hub .ht-panel {
  display: grid;
  gap: .6rem;
  padding: var(--s5);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--hx-card-shadow);
}
body.is-hub .ht-step { margin: .35rem 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
body.is-hub .ht-drop {
  display: grid; justify-items: center; gap: .5rem;
  padding: var(--s5) var(--s4);
  text-align: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
}
body.is-hub .ht-add {
  display: inline-flex; align-items: center; gap: .5rem;
  min-block-size: 46px;
  padding: .5rem 1.4rem;
  font-weight: 700;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
  border-radius: 12px;
  cursor: pointer;
}
body.is-hub .ht-add:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
body.is-hub .ht-add svg { inline-size: 1.1rem; block-size: 1.1rem; }
body.is-hub .ht-formats { margin: 0; font-size: .76rem; color: var(--text-faint); }
body.is-hub .ht-file { margin: 0; font-size: .82rem; font-weight: 700; color: var(--hx-acc-text); word-break: break-all; }
body.is-hub .ht-select,
body.is-hub .ht-find input {
  inline-size: 100%;
  min-block-size: 44px;
  padding: .45rem .8rem;
  font: inherit; font-size: .9rem;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
body.is-hub .ht-go {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 46px;
  font: inherit; font-weight: 700;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, color-mix(in srgb, var(--hx-acc1) 70%, #7c2d12), var(--hx-acc2));
  border: 0; border-radius: 10px;
  cursor: pointer;
}
body.is-hub .ht-go svg { inline-size: 1rem; block-size: 1rem; }
body.is-hub .ht-note { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: 0; font-size: .74rem; color: var(--text-faint); }
body.is-hub .ht-note svg { inline-size: .85rem; block-size: .85rem; }

/* Layout: the sidebar holds category buttons + featured list. */
body.is-hub .ht-chips { display: none; }
body.is-hub .ht-side-label { margin: .2rem .5rem .6rem; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hx-acc-text); }
body.is-hub .ht-feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.is-hub .ht-feat {
  display: flex; align-items: center; gap: .7rem;
  padding: .35rem .45rem;
  font-size: .86rem; font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  border-radius: 10px;
}
body.is-hub .ht-feat:hover { color: var(--text); background: color-mix(in srgb, var(--hx-acc1) 8%, transparent); }
body.is-hub .ht-feat .ht-icon { inline-size: 2.1rem; block-size: 2.1rem; border-radius: 9px; }
body.is-hub .ht-feat .ht-icon svg { inline-size: 1rem; block-size: 1rem; }

body.is-hub .ht-main-head { flex-wrap: wrap; }
body.is-hub .ht-flame { color: var(--hx-acc2); display: inline-flex; }
body.is-hub .ht-flame svg { inline-size: 1.7rem; block-size: 1.7rem; }
body.is-hub .ht-find { position: relative; flex: 0 1 15rem; }
body.is-hub .ht-find input { padding-inline-start: 2.3rem; min-block-size: 40px; }
body.is-hub .ht-find-icon { position: absolute; inset-inline-start: .75rem; inset-block-start: 50%; translate: 0 -50%; inline-size: 1rem; block-size: 1rem; color: var(--text-faint); pointer-events: none; }

/* The list: four columns of icon + name, no heavy cards, like the
   reference; a quiet row highlight on hover. */
body.is-hub .ht-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 14px;
}
body.is-hub .ht-grid[hidden] { display: none; }
body.is-hub .ht-row {
  display: flex; align-items: center; gap: .8rem;
  min-block-size: 56px;
  padding: .45rem .55rem;
  font-size: .9rem; font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background-color .15s ease, border-color .15s ease;
}
body.is-hub .ht-row[hidden] { display: none; }
body.is-hub .ht-row:hover { color: var(--text); background: var(--surface); border-color: var(--hx-card-line-hover); }
body.is-hub .ht-row:focus-visible, body.is-hub .ht-feat:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
body.is-hub .ht-row-name { flex: 1 1 auto; min-inline-size: 0; line-height: 1.3; }
body.is-hub .ht-row-arrow { display: none; color: var(--text-faint); }
body.is-hub .ht-row-arrow svg { inline-size: 1rem; block-size: 1rem; rotate: -90deg; }
[dir="rtl"] body.is-hub .ht-row-arrow svg { rotate: 90deg; }

body.is-hub .ht-feat-mobile { display: none; }

/* Stats bar */
body.is-hub .ht-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: var(--s4);
  margin-block-start: var(--s6);
  padding: var(--s4) var(--s6);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--hx-card-shadow);
}
body.is-hub .ht-stat { display: flex; align-items: center; gap: .8rem; min-inline-size: 0; }
body.is-hub .ht-stat + .ht-stat { border-inline-start: 1px solid var(--line); padding-inline-start: var(--s4); }
body.is-hub .ht-stat strong { display: block; font-size: 1.35rem; font-weight: 800; color: var(--hx-acc-text); line-height: 1.1; }
body.is-hub .ht-stat small { display: block; font-size: .8rem; color: var(--text-faint); }
body.is-hub .ht-stat-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-block-size: 46px; padding: .5rem 1.4rem;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--hx-acc-text);
  border: 1px solid var(--hx-card-line-hover);
  border-radius: 12px;
}
body.is-hub .ht-stat-btn svg { inline-size: 1rem; block-size: 1rem; }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  body.is-hub .ht-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  body.is-hub .ht-hero-grid { grid-template-columns: minmax(0, 1fr); }
  body.is-hub .ht-chips { display: flex; margin-block-start: var(--s5); }
  body.is-hub .ht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.is-hub .ht-row { background: var(--surface); border-color: var(--line); box-shadow: var(--hx-card-shadow); }
  body.is-hub .ht-row-arrow { display: inline-flex; }
  body.is-hub .ht-feat-mobile { display: block; margin-block-start: var(--s6); }
  body.is-hub .ht-star { color: var(--hx-acc1); display: inline-flex; }
  body.is-hub .ht-star svg { inline-size: 1.5rem; block-size: 1.5rem; }
  body.is-hub .ht-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.is-hub .ht-stat-btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 640px) {
  body.is-hub .ht-facts { flex-wrap: nowrap; gap: .5rem; justify-content: space-between; }
  body.is-hub .ht-facts li { gap: .35rem; }
  body.is-hub .ht-facts strong { font-size: .74rem; }
  body.is-hub .ht-facts small { font-size: .66rem; }
  body.is-hub .ht-fact-icon svg { inline-size: 1.3rem; block-size: 1.3rem; }
  body.is-hub .ht-panel { padding: var(--s4); }
  body.is-hub .ht-main-head .hc-count, body.is-hub .ht-main-head .hc-sort { display: none; }
  body.is-hub .ht-find { flex: 1 1 100%; order: 3; }
  body.is-hub .ht-row { min-block-size: 54px; padding: .45rem .5rem; gap: .55rem; font-size: .82rem; }
  body.is-hub .ht-row .ht-icon { inline-size: 2.3rem; block-size: 2.3rem; border-radius: 10px; }
  body.is-hub .ht-stats { padding: var(--s3); gap: .5rem; }
  body.is-hub .ht-stat { flex-direction: column; text-align: center; gap: .3rem; }
  body.is-hub .ht-stat + .ht-stat { padding-inline-start: .5rem; }
  body.is-hub .ht-stat strong { font-size: 1rem; }
  body.is-hub .ht-stat small { font-size: .7rem; }
  body.is-hub .ht-stat-icon { inline-size: 2.1rem; block-size: 2.1rem; }
}
@media (max-width: 359px) {
  body.is-hub .ht-grid { grid-template-columns: minmax(0, 1fr); }
  body.is-hub .ht-facts { flex-wrap: wrap; }
}

/* Phone-only tool illustration beside the heading (tools mobile ref). */
body.is-hub .ht-art { display: none; }
@media (max-width: 640px) {
  body.is-hub .ht-hero-copy { position: relative; }
  body.is-hub .ht-art {
    position: absolute; inset-block-start: 3.2rem; inset-inline-end: 0;
    display: grid; grid-template-columns: repeat(2, 2.9rem); gap: .45rem;
    rotate: -8deg;
  }
  body.is-hub .ht-art .ht-icon { inline-size: 2.9rem; block-size: 2.9rem; border-radius: 13px; }
  body.is-hub .ht-art .ht-icon:first-child { grid-column: 2; }
  body.is-hub .ht-hero .hc-h1, body.is-hub .ht-hero .hc-lede { margin-inline-end: 6.8rem; }
}
@media (max-width: 359px) {
  body.is-hub .ht-art { display: none; }
  body.is-hub .ht-hero .hc-h1, body.is-hub .ht-hero .hc-lede { margin-inline-end: 0; }
}