/* ==========================================================================
   eCentral — styles
   A launcher: every company system as its real logo, one click away.

   Brand palette from r717.net (Webflow CSS primitives):
     endeavour #015a9d (IRS blue) · stratos #001546 (navy) · anakiwa #7ee9ff (cyan,
     the logo underline) · selective-yellow #ffb200 (safety / pinned star)
   Type: Barlow (body) + Barlow Semi Condensed (headings) — self-hosted, industrial
   signage lineage that suits a refrigeration contractor.
   ========================================================================== */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/barlow-semi-condensed-700.woff2") format("woff2"); }

/* ---------- Tokens: light (default) ---------- */
:root {
  color-scheme: light;

  --brand: #015a9d;
  --brand-strong: #00487d;
  --brand-soft: #e3edf6;
  --navy: #001546;
  --navy-deep: #000f33;
  --cyan: #7ee9ff;
  --yellow: #ffb200;

  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --ink: #0f1923;
  --ink-2: #2c3845;
  --muted: #56616d;
  --border: #d6dde5;
  --border-strong: #bfc9d4;

  --plate: #ffffff;
  --plate-edge: rgba(15, 25, 35, .08);

  --link: #015a9d;
  --focus: #015a9d;

  --info-bg: #e3edf6;
  --info-ink: #0b3a63;
  --safety-bg: #fff3d1;
  --safety-border: #f0c040;
  --safety-ink: #4a3300;

  --danger: #b80d0a;
  --danger-hover: #990a08;
  --star: #9a6a00;

  --shadow-plate: 0 1px 1px rgba(10, 25, 45, .06), 0 3px 8px -2px rgba(10, 25, 45, .14);
  --shadow-plate-hover: 0 2px 3px rgba(10, 25, 45, .08), 0 12px 22px -8px rgba(1, 50, 110, .32);
  --shadow-pop: 0 18px 40px -12px rgba(0, 21, 70, .35), 0 4px 10px -4px rgba(0, 21, 70, .18);

  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow", system-ui, "Segoe UI", Arial, sans-serif;

  --container: 1200px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --show-moon: inline-block;
  --show-sun: none;
  --show-logo-ink: block;
  --show-logo-white: none;
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #6cb6ee;
    --brand-strong: #9ccdf4;
    --brand-soft: #12304d;
    --bg: #07101c;
    --surface: #0f1b2a;
    --surface-2: #132235;
    --ink: #e8eef5;
    --ink-2: #c9d4e0;
    --muted: #a3b1c2;
    --border: #22344a;
    --border-strong: #31475f;
    --plate: #f3f6fa;
    --plate-edge: rgba(255, 255, 255, .12);
    --link: #86c6f4;
    --focus: #7ee9ff;
    --info-bg: #0f2a45;
    --info-ink: #d3e6f7;
    --safety-bg: #2e2306;
    --safety-border: #8a6400;
    --safety-ink: #ffe3a1;
    --danger: #d0201b;
    --danger-hover: #e2332d;
    --star: #ffc233;
    --shadow-plate: 0 1px 1px rgba(0, 0, 0, .5), 0 4px 10px -3px rgba(0, 0, 0, .55);
    --shadow-plate-hover: 0 2px 3px rgba(0, 0, 0, .5), 0 14px 26px -8px rgba(0, 0, 0, .75);
    --shadow-pop: 0 22px 44px -12px rgba(0, 0, 0, .8), 0 4px 10px -4px rgba(0, 0, 0, .5);
    --show-moon: none;
    --show-sun: inline-block;
    --show-logo-ink: none;
    --show-logo-white: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #6cb6ee;
  --brand-strong: #9ccdf4;
  --brand-soft: #12304d;
  --bg: #07101c;
  --surface: #0f1b2a;
  --surface-2: #132235;
  --ink: #e8eef5;
  --ink-2: #c9d4e0;
  --muted: #a3b1c2;
  --border: #22344a;
  --border-strong: #31475f;
  --plate: #f3f6fa;
  --plate-edge: rgba(255, 255, 255, .12);
  --link: #86c6f4;
  --focus: #7ee9ff;
  --info-bg: #0f2a45;
  --info-ink: #d3e6f7;
  --safety-bg: #2e2306;
  --safety-border: #8a6400;
  --safety-ink: #ffe3a1;
  --danger: #d0201b;
  --danger-hover: #e2332d;
  --star: #ffc233;
  --shadow-plate: 0 1px 1px rgba(0, 0, 0, .5), 0 4px 10px -3px rgba(0, 0, 0, .55);
  --shadow-plate-hover: 0 2px 3px rgba(0, 0, 0, .5), 0 14px 26px -8px rgba(0, 0, 0, .75);
  --shadow-pop: 0 22px 44px -12px rgba(0, 0, 0, .8), 0 4px 10px -4px rgba(0, 0, 0, .5);
  --show-moon: none;
  --show-sun: inline-block;
  --show-logo-ink: none;
  --show-logo-white: block;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--border-strong) var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
html:not(.js) .needs-js { display: none !important; }
.js .fallback-panel { display: none; }
.js:not(.js-ready) main,
.js:not(.js-ready) .site-footer { visibility: hidden; }
h1, h2, h3, p, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-underline-offset: .18em; }
:::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); }
input, textarea { caret-color: var(--brand); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
kbd {
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9px;
  border: 1px solid currentColor;
  opacity: .8;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 24px; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-pop);
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  isolation: isolate;
  color: #fff;
  background-color: var(--navy);
  background-image:
    linear-gradient(180deg, rgba(0, 15, 51, .62) 0%, rgba(0, 21, 70, .2) 55%, rgba(0, 21, 70, .5) 100%),
    linear-gradient(90deg, rgba(0, 15, 51, .66) 0%, rgba(0, 15, 51, .06) 55%, rgba(0, 15, 51, .16) 100%),
    url("../assets/bg/facility-duotone.jpg");
  background-size: auto, auto, cover;
  background-position: center, center, center 62%;
  background-repeat: no-repeat;
  border-bottom: 3px solid var(--cyan);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding-block: 10px;
}
/* Greeting and date share one baseline on wide screens; they stack on narrow ones. */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  padding-block: 2px 18px;
}
.masthead .greeting {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  transition: opacity .35s ease;
}
.masthead .greeting.is-changing { opacity: 0; }
.masthead-line {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  font-size: 1rem;
  color: #c3d0e2;
}
.masthead-note b { color: var(--cyan); font-weight: 700; }
.masthead-sep { color: var(--cyan); }
.today:empty + .masthead-sep { display: none; }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; flex: none; }
.brand-logo { height: 40px; width: auto; }
.brand-product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--cyan);
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .28);
}
.brand-mark { flex: none; width: 30px; height: 30px; }
.today { color: #fff; font-weight: 500; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }


.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  color: #fff;
  transition: background-color .2s var(--ease-out);
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); }
.icon-btn:focus-visible { outline-color: var(--cyan); }
.icon-moon { display: var(--show-moon); }
.icon-sun { display: var(--show-sun); }

@media (max-width: 560px) {
  .masthead { padding-block: 12px 20px; }
  .masthead-line { font-size: .9375rem; }
  .masthead-sep { display: none; }
  .masthead-line > span:last-child { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .brand { gap: 12px; }
  .brand-product { padding-left: 12px; }
  .brand-product-name { display: none; }
  .brand-logo { height: 34px; }
}
/* Below 360px the logo, mark and two buttons no longer fit on one row; the IRS logo stays. */
@media (max-width: 359px) {
  .brand-product { display: none; }
}

/* ---------- Announcements ---------- */
.announcements { display: grid; gap: 8px; margin-top: 18px; }
.announcement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .9375rem;
  background: var(--info-bg);
  color: var(--info-ink);
}
.announcement::before {
  content: "";
  flex: none;
  width: 18px; height: 18px; margin-top: 2px;
  background: currentColor;
  -webkit-mask: var(--ann-icon) center / contain no-repeat;
  mask: var(--ann-icon) center / contain no-repeat;
  --ann-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E");
}
.announcement-text { flex: 1; min-width: 0; }
.announcement-dismiss {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin: -2px -6px -2px 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  opacity: .7;
}
.announcement-dismiss:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.announcement--safety {
  background: var(--safety-bg);
  color: var(--safety-ink);
  box-shadow: inset 0 0 0 1px var(--safety-border);
  font-weight: 600;
}
.announcement--safety::before {
  --ann-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

/* ---------- Pinned dock (in the masthead) ----------
   Daily tools sit on the photo band as light plates with names only: their own place,
   above the wall, instead of a same-size copy of tiles. */
.dock { padding-bottom: 14px; margin-top: -6px; }
.dock-grid { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dock .tile { width: 116px; }
.dock .tile-link { color: #fff; padding: 8px 4px; border-radius: 16px; }
.dock .tile-link:hover { background: rgba(255, 255, 255, .1); }
.dock .tile-link:focus-visible { outline-color: var(--cyan); }
.dock .tile-plate { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 6px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); }
.dock .tile-plate img { width: 44px; height: 44px; }
.dock .tile-plate img.is-square { border-radius: 11px; }
.dock .tile-name { font-size: .9375rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.dock .tile-for { display: none; }
.dock .tile-actions { top: 6px; left: min(calc(50% + 32px), calc(100% - 28px)); }
.dock .tile-btn { width: 28px; height: 28px; color: #dfe8f3; }
/* Everything in the dock is pinned: its star and ⋯ wait for hover/focus instead of crowding the plate. */
.dock .tile-pin[aria-pressed="true"], .dock .tile-more { opacity: 0; }
.dock .tile:hover .tile-btn, .dock .tile:focus-within .tile-btn, .dock .tile-btn[aria-expanded="true"] { opacity: 1; }
.dock .tile-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.dock .tile-pin[aria-pressed="true"] { color: var(--yellow); }
.dock .tile-btn:focus-visible { outline-color: var(--cyan); }

/* ---------- First-visit welcome ---------- */
.welcome-wrap { margin-top: 16px; }
/* With the welcome panel up, the wall starts a little closer, so a laptop still shows Office. */
.welcome-wrap:not([hidden]) ~ .launcher { padding-top: 18px; }
.welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 32px;
  align-items: center;
  padding: 16px 24px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 10px -6px rgba(0, 0, 0, .14);
}
.welcome-title { font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; line-height: 1.2; }
.welcome-text { margin-top: 4px; color: var(--ink-2); max-width: 60ch; line-height: 1.45; }
.welcome-points { display: grid; gap: 6px 24px; }
.welcome-points li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.4; }
.welcome-points svg { flex: none; margin-top: 1px; color: var(--brand); }
.welcome-points li:first-child svg { color: var(--star); }
.welcome-ok { justify-self: start; }
@media (min-width: 900px) {
  .welcome { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto; }
  .welcome-points { grid-template-columns: 1fr 1fr; }
  .welcome-ok { justify-self: end; }
}

/* While the welcome panel is up it already explains pinning. */
.welcome-wrap:not([hidden]) ~ .launcher .pinned-hint { display: none; }

/* ---------- Search row ----------
   Two separate searches side by side, mirrored: eCentral's task search (a button that opens
   the search dialog) and Google (a plain form; Enter opens results in a new tab). Same height,
   edge and radius; each keeps its own mark and its own job. They stack on narrow screens. */
.search-row { padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) {
  .search-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html:not(.js) .search-row { grid-template-columns: minmax(0, 600px); justify-content: center; }
}
.search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 8px 0 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: text;
  transition: border-color .2s var(--ease-out);
}
.search-trigger:hover { border-color: var(--muted); }
.search-trigger-mark { flex: none; width: 20px; height: 20px; }
.search-trigger-text { flex: 1; }
.search-trigger-kbd { margin-right: 6px; }
.web-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 6px 0 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  transition: border-color .2s var(--ease-out);
}
.web-search:hover { border-color: var(--muted); }
/* The system's focus ring, on the whole bar. */
.web-search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.web-search-mark { flex: none; width: 20px; height: 20px; }
.web-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.web-search-input::placeholder { color: var(--muted); }
.web-search-input::-webkit-search-cancel-button { cursor: pointer; }
.web-search-go {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.web-search-go:hover { background: var(--brand); color: var(--surface); }
.web-search-go:focus-visible { outline-offset: 2px; }

/* ---------- Launcher ---------- */
/* Rhythm: 30px between groups, 12px from a heading to its tiles (about 5:2). */
.launcher { padding-top: 24px; outline: none; }
#groups { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
@media (min-width: 1024px) {
  /* One shared 8-track grid; each group is a subgrid placed by app.js (--col). */
  #groups { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 16px; }
  #groups .group { grid-column: var(--col, 1 / -1); display: grid; grid-template-columns: subgrid; align-content: start; }
  #groups .group-head, #groups .tile-grid { grid-column: 1 / -1; }
  #groups .tile-grid { grid-template-columns: subgrid; }
}
/* Headings center over their own group, as the logos center in their columns. The pin hint
   hangs off the heading's right side (two equal side columns), so it never pulls the heading
   off center; on narrow screens it drops to its own centered line. */
.group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  margin-bottom: 12px;
}
.group-title { grid-column: 2; text-align: center; }
.group-head .pinned-hint { grid-column: 3; justify-self: start; text-align: left; }
@media (max-width: 859px) {
  .group-head { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .group-title, .group-head .pinned-hint { grid-column: 1; justify-self: center; text-align: center; }
}
.group-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
}
.pinned-hint {
  display: inline-block;   /* the star stays inline with the words when the hint wraps */
  color: var(--muted);
  font-size: .9375rem;
}
.pinned-hint svg { display: inline-block; color: var(--star); vertical-align: -3px; margin-right: 6px; }

/* Below 1024px each group wraps on its own; tiles center as a group, so a short last row
   sits under its centered heading instead of hugging the left edge. */
.tile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
}
.tile-grid > .tile { flex: 0 0 136px; }
@media (max-width: 560px) {
  .tile-grid { gap: 2px 8px; }
  .tile-grid > .tile { flex-basis: calc((100% - 16px) / 3); }
}
@media (min-width: 1024px) {
  #groups .tile-grid { display: grid; }
  #groups .tile-grid > .tile { flex: none; }
}

.tile { position: relative; }
/* Tiles settle in only behind the first-visit intro (html.settle); an everyday load shows
   them at once, because a start page should never make people wait for their tools. */
.js-ready.settle .tile { animation: tile-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(6px); } }
.tile-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  padding: 10px 6px 10px;
  border-radius: 18px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .25s var(--ease-out);
}
.tile-link:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.tile-link:focus-visible { outline-offset: -2px; border-radius: 18px; }

.tile-plate {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin-bottom: 8px;
  border-radius: 21px;
  background: var(--plate);
  box-shadow: var(--shadow-plate), inset 0 0 0 1px var(--plate-edge);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.tile-plate img { width: 58px; height: 58px; object-fit: contain; }
.tile-plate img.is-square { border-radius: 14px; }
.tile-initials {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
}
.tile-link:hover .tile-plate { transform: translateY(-3px); box-shadow: var(--shadow-plate-hover), inset 0 0 0 1px var(--plate-edge); }
.tile-link:active .tile-plate { transform: translateY(0) scale(.97); transition-duration: .1s; }

.tile-name { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.tile-for {
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 18ch;
}
/* Narrow tracks (1024–1199px): captions get a third line, and ⋯ waits for hover/focus
   because there is no gutter beside the plate for it. */
@media (min-width: 1024px) and (max-width: 1199px) {
  #groups { column-gap: 8px; }
  .tile-link { padding-inline: 2px; }
  .tile-name { font-size: .9375rem; }
  .tile-for { -webkit-line-clamp: 3; max-width: none; }
  #groups .tile:not(:hover):not(:focus-within) .tile-more:not([aria-expanded="true"]) { opacity: 0; }
}
/* Compact groups (well-known brands): smaller plates, name only on wide screens. */
@media (min-width: 1024px) {
  .group--compact .tile-plate { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 6px; }
  .group--compact .tile-plate img { width: 48px; height: 48px; }
  .group--compact .tile-plate img.is-square { border-radius: 12px; }
  .group--compact .tile-for { display: none; }
  .group--compact .tile-actions { left: min(calc(50% + 36px), calc(100% - 32px)); top: 6px; }
}
@media (max-width: 560px) {
  .tile-link { padding: 10px 4px 10px; }
  .tile-plate { width: 68px; height: 68px; border-radius: 19px; margin-bottom: 8px; }
  .tile-plate img { width: 50px; height: 50px; }
  .tile-plate img.is-square { border-radius: 12px; }
  .tile-name { font-size: .9375rem; }
  .tile-for { font-size: .75rem; }
}

/* Folder tile (groups with show: N): a button styled as a tile. Its plate holds up to four
   mini logos of the hidden tools, or a chevron once the group is open. */
.folder-toggle { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; }
.folder-plate {
  grid-template-columns: repeat(2, 38%);
  grid-auto-rows: 38%;
  gap: 7%;
  place-content: center;
  color: var(--brand);
}
.folder-plate--less { grid-template-columns: none; grid-auto-rows: auto; }
.folder-mini { display: grid; place-items: center; min-width: 0; min-height: 0; }
.folder-plate .folder-mini img { width: 100%; height: 100%; object-fit: contain; }
.folder-plate .folder-mini img.is-square { border-radius: 22%; }
.folder-mini .tile-initials { font-size: .6875rem; line-height: 1; }
/* A re-render after opening or closing a folder keeps tiles still. */
#groups.is-settled .tile { animation: none; }

/* Tile corner actions: pin + more. Revealed on hover/focus, always shown on touch. */
.tile-actions {
  /* Stacked in the gutter beside the logo plate, so they never sit on top of it. */
  position: absolute;
  top: 8px; left: min(calc(50% + 42px), calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  opacity: 0;
  transition: opacity .2s var(--ease-out), background-color .2s var(--ease-out), color .2s;
}
.tile-more { opacity: .85; }
.tile:hover .tile-btn, .tile:focus-within .tile-btn, .tile-btn[aria-expanded="true"] { opacity: 1; }
.tile-btn:hover { background: var(--surface-2); color: var(--ink); }
.tile-btn:focus-visible { opacity: 1; }
.tile-pin[aria-pressed="true"] { opacity: 1; color: var(--star); }
.tile-pin[aria-pressed="true"] svg { fill: currentColor; }
@media (any-pointer: coarse) {
  .tile-btn { width: 44px; height: 44px; opacity: .8; }
  .tile-actions { top: 2px; left: auto; right: -4px; gap: 0; }
}

/* ---------- Quick-links menu (popover) ---------- */
.tile-menu {
  position: fixed;
  z-index: 60;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  animation: pop-in .22s var(--ease-out);
}
.menu-label {
  padding: 8px 10px 6px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: .9375rem;
  text-align: left;
  text-decoration: none;
}
.menu-item:hover { background: var(--brand-soft); }
.menu-item:focus-visible { background: var(--brand-soft); outline: 2px solid var(--focus); outline-offset: -2px; }
.menu-item svg { flex: none; color: var(--muted); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---------- Onboarding ---------- */
.onboarding-wrap { position: relative; margin-top: 36px; }
.onboarding-wrap .onboarding-summary { position: relative; padding-right: 172px; }
.onboarding-wrap .onboarding-chevron { position: absolute; right: 18px; top: 50%; margin-top: -10px; }
.onboarding-dismiss {
  position: absolute;
  top: 9px; right: 52px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
}
.onboarding-dismiss:hover { background: var(--surface-2); color: var(--ink); }
.onboarding-wrap.is-complete .onboarding { animation: done-out .6s var(--ease-out) forwards; }
@keyframes done-out { to { opacity: 0; transform: scale(.985); } }
.link-btn {
  padding: 0; border: 0; background: none;
  color: var(--link); font-weight: 600;
  text-decoration: underline; text-underline-offset: .18em;
}
@media (max-width: 560px) {
  .onboarding-wrap .onboarding-summary { padding-right: 48px; flex-wrap: wrap; }
  .onboarding-dismiss { position: static; margin: 6px 0 0 8px; }
}
.onboarding {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.onboarding-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  border-radius: 14px;
}
.onboarding-summary::-webkit-details-marker { display: none; }
.onboarding-heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; flex: 1; min-width: 0; }
.onboarding-title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.onboarding-meta { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress {
  flex: none;
  width: clamp(80px, 18vw, 200px);
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--brand);
  transform: scaleX(var(--pct, 0));
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.onboarding-chevron { flex: none; color: var(--muted); transition: transform .3s var(--ease-out); }
.onboarding[open] .onboarding-chevron { transform: rotate(180deg); }
.onboarding-body { padding: 0 18px 18px; }
.onboarding-intro { color: var(--muted); font-size: .9375rem; margin-bottom: 10px; }
.onboarding-list { counter-reset: step; }
.onboarding-list > li + li { margin-top: 6px; }
@media (min-width: 860px) {
  .onboarding-list { column-count: 2; column-gap: 12px; }
  .onboarding-list > li { break-inside: avoid; }
}
.check-item {
  counter-increment: step;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-2);
}
.check-item label { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 16rem; min-width: 0; cursor: pointer; font-size: .9375rem; line-height: 1.4; }
.check-item label::before {
  content: counter(step);
  flex: none;
  min-width: 1.4em;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.check-choices { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; padding-left: calc(1.4em + 38px); }
.check-choice {
  padding: 6px 12px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: .875rem;
  font-weight: 600;
}
.check-choice:hover { border-color: var(--brand); color: var(--brand); }
.check-choice[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
:root[data-theme="dark"] .check-choice[aria-pressed="true"] { color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .check-choice[aria-pressed="true"] { color: var(--navy); } }
.check-item input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); }
.check-item.is-done .check-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.check-link { flex: none; font-size: .875rem; font-weight: 600; text-decoration: none; }
.check-link:hover { text-decoration: underline; }

/* ---------- Search dialog ---------- */
.search-dialog {
  width: min(660px, calc(100vw - 24px));
  max-height: min(640px, calc(100vh - 48px));
  margin: 10vh auto auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.search-dialog[open] { display: flex; flex-direction: column; animation: pop-in .25s var(--ease-out); }
.search-dialog::backdrop { background: rgba(0, 15, 51, .45); backdrop-filter: blur(3px); }
.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--border);
}
.search-field:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.search-icon { flex: none; color: var(--brand); }
.search-input {
  flex: 1;
  min-width: 0;
  height: 60px;
  border: 0;
  background: transparent;
  font-size: 1.125rem;
  outline: none;
}
.search-input::placeholder { color: var(--muted); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px;
  border-radius: 9px;
}
.search-close:hover { background: var(--surface-2); }
.search-results { overflow-y: auto; padding: 6px; }
.result-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}
.result[aria-selected="true"] .result-link { background: var(--brand-soft); }
.result-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--plate-edge);
}
.result-logo img { width: 30px; height: 30px; object-fit: contain; }
.result-logo img.is-square { border-radius: 7px; }
.result-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.result-title { font-weight: 600; line-height: 1.3; }
.result-crumb { font-size: .8125rem; font-weight: 600; color: var(--link); line-height: 1.35; }
.result-why { font-size: .875rem; color: var(--muted); line-height: 1.35; }
.result-go { flex: none; color: var(--muted); opacity: 0; }
.result[aria-selected="true"] .result-go { opacity: 1; }
.result-empty { padding: 18px 14px; color: var(--muted); }
.search-suggest { padding: 14px 18px 18px; }
.search-suggest[hidden] { display: none; }
.suggestions-label { font-size: .875rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestion {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .9375rem;
  font-weight: 500;
}
.suggestion:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 70;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 12px 12px 12px 18px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-pop);
  animation: pop-in .25s var(--ease-out);
}
/* The not-installed message runs to two sentences; it wraps rather than spanning the screen. */
.toast-text { max-width: 52ch; }
.toast-text a { color: var(--cyan); font-weight: 600; white-space: nowrap; }
.toast-text a:focus-visible { outline-color: var(--cyan); }
@media (max-width: 560px) {
  .toast { flex-wrap: wrap; width: calc(100vw - 24px); row-gap: 10px; }
  .toast-text { flex: 1 1 calc(100% - 46px); max-width: none; }
  .toast-close { order: 1; align-self: flex-start; }
  .toast .btn-primary { order: 2; }
}
.toast:not(.is-open) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; animation: none;
}
.toast-close {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-left: -4px;
  border: 0; border-radius: 9px;
  background: transparent; color: #c3d0e2;
}
.toast-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.toast-close:focus-visible { outline-color: var(--cyan); }
.toast .btn-primary:focus-visible { outline-color: var(--cyan); }
.toast-spinner {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--cyan);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 9px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--cyan); color: var(--navy); }
.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  transition: background-color .2s var(--ease-out);
}
.btn-solid:hover { background: var(--brand-strong); }
:root[data-theme="dark"] .btn-solid { color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-solid { color: var(--navy); } }
.btn-primary:hover { background: #b0f2ff; }


/* ---------- Footer ---------- */
.site-footer { margin-top: 64px; border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 48px;
  padding-block: 28px;
  font-size: .9375rem;
}
.footer-logo { height: 36px; width: auto; }
.footer-logo--ink { display: var(--show-logo-ink); }
.footer-logo--white { display: var(--show-logo-white); }
.footer-tag { margin-top: 8px; color: var(--muted); font-size: .875rem; }
.footer-label { font-family: var(--font-head); font-weight: 700; margin-bottom: 4px; }
.footer-help p + p { margin-top: 2px; }
.site-footer a { font-weight: 600; }

/* ---------- No-JS ---------- */
.fallback-panel { margin-top: 28px; padding: 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.fallback-panel h2 { font-family: var(--font-head); font-size: 1.45rem; line-height: 1.2; margin-bottom: 6px; }
.fallback-links { margin-top: 12px; display: grid; gap: 6px; }

/* Touch screens have no hover: keep every corner action visible there. */
@media (any-pointer: coarse) {
  .dock .tile-btn, .dock .tile-pin[aria-pressed="true"], .tile-more,
  #groups .tile:not(:hover):not(:focus-within) .tile-more:not([aria-expanded="true"]) { opacity: .8; }
}

/* The help desk's call link (zoomphonecall://) never breaks across lines. */
#welcome-help a, #help-contact a { white-space: nowrap; }

/* ---------- Intro (first-visit "Flash Freeze", js/intro.js) ----------
   html.intro is set by the head script and removed by intro.js at the end. The overlay
   is a pane of frosted glass over the live page: the pane's backdrop blur and the frost
   canvas's tint and grain are here from first paint. intro.js then paints that veil into
   the canvas itself, with the frost and the logo imprint cut out of it, and
   relaxes the blur as the frost melts.
   Nothing on #intro may set opacity, filter, mask, isolation or will-change: that makes
   it a backdrop root and cuts the blur off from the page. The pane itself is never
   clipped or masked either, because Chromium draws a cut-out backdrop blur wrongly. The
   overlay is targeted by id because <html> carries the same class. */
#intro { display: none; }
html.intro #intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000; /* above the toast (70) and the quick-links menu (60) */
  overflow: hidden;
  pointer-events: auto;
  --frost-tint: rgba(240, 246, 252, .46);
  --frost-fill: rgba(232, 238, 246, .94);
  --frost-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .5 0 0 0 0 .6 .3 0 0 0 -.09'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).intro #intro {
    --frost-tint: rgba(186, 206, 232, .2);
    --frost-fill: rgba(24, 36, 54, .94);
    --frost-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .95 0 0 0 0 1 .34 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"].intro #intro {
  --frost-tint: rgba(186, 206, 232, .2);
  --frost-fill: rgba(24, 36, 54, .94);
  --frost-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .95 0 0 0 0 1 .34 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* The pane is the blur alone; the tint and grain are the frost canvas's own background,
   painted between the blur and the frost. Without backdrop-filter, the pane is a
   near-opaque frosted fill instead. */
.intro-pane { position: absolute; inset: 0; overflow: hidden; background-color: var(--frost-fill); }
.intro-canvas { background-image: var(--frost-grain); background-size: 160px 160px; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .intro-pane {
    background-color: transparent;
    -webkit-backdrop-filter: blur(10px) saturate(1.1) brightness(1.03);
    backdrop-filter: blur(10px) saturate(1.1) brightness(1.03);
  }
  .intro-canvas { background-color: var(--frost-tint); }
}
.intro-canvas,
.intro-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  #intro, .intro-replay-row { display: none !important; }
}

/* ---------- Theme fade (js/app.js, View Transitions) ----------
   Switching themes is a slow fade, like the room's lights. Going dark, the lit page dims
   away under the dark one; going light, the lit page warms up out of the dark. */
html.lights-out::view-transition-old(root),
html.lights-out::view-transition-new(root),
html.lights-on::view-transition-old(root),
html.lights-on::view-transition-new(root) { mix-blend-mode: normal; animation-duration: .5s; animation-fill-mode: both; }
html.lights-out::view-transition-old(root) { animation-name: lights-dim; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
html.lights-out::view-transition-new(root) { animation-name: lights-reveal; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
html.lights-on::view-transition-old(root) { animation-name: lights-fade; animation-timing-function: linear; }
html.lights-on::view-transition-new(root) { animation-name: lights-warm; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
@keyframes lights-dim { to { filter: brightness(.55); } }
@keyframes lights-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes lights-fade { to { filter: brightness(.9); } }
@keyframes lights-warm { from { opacity: 0; filter: brightness(.7); } 70% { opacity: 1; } to { opacity: 1; filter: none; } }

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .tile-link:hover .tile-plate { transform: none; }
}
@media (forced-colors: active) {
  .tile-plate, .result-logo { border: 1px solid CanvasText; }
  .progress-bar { background: Highlight; }
  .menu-item:focus-visible { outline-color: Highlight; }
  .search-field:focus-within { outline: 2px solid Highlight; }
}
@media print {
  .toast, .header-actions, .tile-actions, .onboarding-wrap, #intro { display: none !important; }
  body { padding-bottom: 0; }
}