/* ==========================================================================
   Pikkit — design system
   Tokens first, then layout, then components. No build step, no dependencies.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  color-scheme: light;

  --bg:            #f6f7f9;
  --surface:       #ffffff;
  --surface-2:     #f0f2f5;
  --surface-3:     #e6e9ee;
  --border:        #dfe3e9;
  --border-strong: #c6ccd6;

  --text:          #14181f;
  --text-muted:    #5a6472;
  --text-faint:    #8b95a3;

  --accent:        #2f6df6;
  --accent-hover:  #1f57d4;
  --accent-soft:   #e8f0fe;
  --accent-text:   #ffffff;

  --success:       #17914f;
  --success-soft:  #e3f6eb;
  --warn:          #b5730a;
  --danger:        #cf3232;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .07);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .06);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                "Segoe UI Symbol", sans-serif;

  --wrap: 1160px;
  --header-h: 60px;

  --tz-work: #d6f0e0;      --tz-work-text: #10603a;
  --tz-early: #fdf0d5;     --tz-early-text: #7a5312;
  --tz-evening: #e6e3f8;   --tz-evening-text: #45397e;
  --tz-night: #dfe3ea;     --tz-night-text: #59636f;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0e1116;
  --surface:       #161b22;
  --surface-2:     #1c232c;
  --surface-3:     #263039;
  --border:        #2a313c;
  --border-strong: #3d4654;

  --text:          #e8ecf1;
  --text-muted:    #9aa5b4;
  --text-faint:    #6e7986;

  --accent:        #4d8bff;
  --accent-hover:  #6ba0ff;
  --accent-soft:   #17233a;
  --accent-text:   #0b0f14;

  --success:       #3ecf80;
  --success-soft:  #10281b;
  --warn:          #e0a13a;
  --danger:        #ff6b6b;

  --tz-work: #17402c;      --tz-work-text: #7ee0aa;
  --tz-early: #40320f;     --tz-early-text: #e8c67a;
  --tz-evening: #2b2750;   --tz-evening-text: #b3a9f0;
  --tz-night: #1b212a;     --tz-night-text: #6e7986;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

/* Follow the OS when the user has not chosen explicitly. These tokens must
   stay identical to the :root[data-theme="dark"] block above — the guard
   :not([data-theme="light"]) is what lets a manual light choice override a
   dark OS setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0e1116;
    --surface:       #161b22;
    --surface-2:     #1c232c;
    --surface-3:     #263039;
    --border:        #2a313c;
    --border-strong: #3d4654;

    --text:          #e8ecf1;
    --text-muted:    #9aa5b4;
    --text-faint:    #6e7986;

    --accent:        #4d8bff;
    --accent-hover:  #6ba0ff;
    --accent-soft:   #17233a;
    --accent-text:   #0b0f14;

    --success:       #3ecf80;
    --success-soft:  #10281b;
    --warn:          #e0a13a;
    --danger:        #ff6b6b;

    --tz-work: #17402c;      --tz-work-text: #7ee0aa;
  --tz-early: #40320f;     --tz-early-text: #e8c67a;
  --tz-evening: #2b2750;   --tz-evening-text: #b3a9f0;
  --tz-night: #1b212a;     --tz-night-text: #6e7986;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  }
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout -------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

main { min-height: 60vh; padding: 28px 0 64px; }

.stack > * + * { margin-top: 16px; }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Width budget. None of these three children can shrink -- .nav will not go
   below its min-content width and the other two are flex:none -- so their
   total has to fit --wrap minus the .wrap padding, which is 1120px. With
   eight nav items (six categories renamed tight, Tests, Guides) it is
   78 (brand) + 16 + 899 (nav) + 16 + 80 (actions) = 1089, ~30px spare --
   verified empirically at the 1121px worst case. Adding a nav item or
   lengthening a label eats that slack; past it the header overflows into the
   margins and, below ~1280px, out of the viewport. Shorten a label or raise
   the nav-toggle breakpoint below if something no longer fits. */
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}

.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em;
  color: var(--text); text-decoration: none; flex: none;
}
.brand:hover { text-decoration: none; }
.brand__mark { font-family: var(--font-emoji); font-size: 1.35rem; line-height: 1; }

.nav { display: flex; align-items: center; gap: 1px; margin-left: 4px; flex: 1 1 auto; }

.nav__item { position: relative; }

.nav__btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
  padding: 7px 9px; border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 500; color: var(--text-muted);
  white-space: nowrap;
}
.nav__btn:hover { background: var(--surface-2); color: var(--text); }
.nav__btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.nav__btn--plain { text-decoration: none; }
.nav__btn--plain::after { display: none; }

.nav__btn::after {
  content: ""; width: 5px; height: 5px; margin-left: 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.nav__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: none;
}
.nav__item--open .nav__menu { display: block; }

/* Mega menus for the grouped categories: 2-3 CSS columns of unbreakable
   group blocks. Menus from the fourth nav item onward open right-aligned so
   a 720px panel never leaves the viewport. */
.nav__menu--mega { padding: 12px 14px 14px; }
.nav__menu--c2 { width: 500px; }
.nav__menu--c3 { width: 720px; }
.nav__cols { column-gap: 18px; }
.nav__menu--c2 .nav__cols { column-count: 2; }
.nav__menu--c3 .nav__cols { column-count: 3; }
.nav__group { break-inside: avoid; padding-bottom: 12px; }
.nav__group-name {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-faint); padding: 2px 10px 4px;
}
.nav__all {
  display: block; padding: 7px 10px; margin-bottom: 8px;
  border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.nav__all:hover { background: color-mix(in srgb, var(--accent) 14%, transparent);
  text-decoration: none; }
.nav__item:nth-child(n+4) .nav__menu { left: auto; right: 0; }

.nav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--text); font-size: .9375rem; text-decoration: none;
}
.nav__link:hover { background: var(--surface-2); text-decoration: none; }
.nav__link .ico { font-family: var(--font-emoji); font-size: 1.05rem; width: 1.4em; text-align: center; }

.header__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-muted); font-size: 1rem; line-height: 1;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

.search-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 36px; height: 36px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-faint); font-size: .875rem;
}
.search-trigger:hover { background: var(--surface-3); }
/* Keep the magnifier; drop the "Search" label and the shortcut hint. */
.search-trigger span + span { display: none; }
.search-trigger kbd { display: none; }

.nav-toggle { display: none; }

/* --- Command palette ----------------------------------------------------- */

.palette {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 14, 20, .45);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.palette[open], .palette.is-open { display: flex; }

.palette__panel {
  width: 100%; max-width: 560px; max-height: 70vh;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.palette__input {
  width: 100%; padding: 16px 18px; font-size: 1.0625rem;
  background: none; border: 0; border-bottom: 1px solid var(--border);
}
.palette__input:focus { outline: none; }
.palette__results { overflow-y: auto; padding: 6px; }
.palette__row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--text); text-decoration: none;
}
.palette__row:hover, .palette__row.is-active { background: var(--surface-2); text-decoration: none; }
.palette__row .ico { font-family: var(--font-emoji); font-size: 1.15rem; flex: none; }
.palette__row b { font-weight: 600; font-size: .9375rem; display: block; }
.palette__row span { color: var(--text-faint); font-size: .8125rem; }
.palette__empty { padding: 28px; text-align: center; color: var(--text-faint); font-size: .9375rem; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; min-height: 40px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--ghost { background: none; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.btn--sm { padding: 5px 10px; min-height: 32px; font-size: .8125rem; }
.btn--block { width: 100%; }

.btn.is-copied {
  background: var(--success-soft); border-color: var(--success); color: var(--success);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Forms --------------------------------------------------------------- */

.field { display: block; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > .label { display: block; font-size: .8125rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase;
  letter-spacing: .04em; }

.input, .select, .textarea {
  width: 100%; padding: 10px 12px; min-height: 42px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 1rem;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.textarea--mono { font-family: var(--font-mono); font-size: .9375rem; }
.select { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.check { display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: .9375rem; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; cursor: pointer; }

.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.range-row output { font-family: var(--font-mono); font-size: .875rem;
  min-width: 3.5ch; text-align: right; color: var(--text-muted); }

/* --- Cards / panels ------------------------------------------------------ */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card__title { font-size: 1rem; font-weight: 700; margin: 0 0 14px; }

.result {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.result__value {
  font-size: 2rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.result__label { font-size: .8125rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.result__note { font-size: .875rem; color: var(--text-muted); margin-top: 6px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 14px 16px; }
.stat__num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__lbl { font-size: .75rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; }

.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th, .table td { text-align: left; padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }


.note { font-size: .875rem; color: var(--text-muted); }

/* --- Tabs ---------------------------------------------------------------- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 18px; overflow-x: auto; }
.tab {
  padding: 9px 14px; background: none; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: .9375rem; font-weight: 500; color: var(--text-muted); white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabpanel[hidden] { display: none; }

/* --- Chips --------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .875rem; color: var(--text-muted); white-space: nowrap;
}
.chip:hover { background: var(--surface-3); color: var(--text); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
}

/* --- Copy grids (emoji / symbols / faces) -------------------------------- */

.copy-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
}
.copy-grid--wide { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.glyph {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-emoji); font-size: 1.75rem; line-height: 1;
  transition: transform .09s ease, border-color .12s ease, background .12s ease;
}
.glyph:hover { background: var(--surface-2); border-color: var(--accent); transform: translateY(-2px); }
.glyph:active { transform: translateY(0); }
.glyph.is-copied { background: var(--success-soft); border-color: var(--success); }

.glyph--text {
  aspect-ratio: auto; min-height: 54px; padding: 8px 10px;
  font-family: var(--font); font-size: 1rem; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 30px 0 12px;
}
.section-head:first-child { margin-top: 0; }
.section-head h2 { margin: 0; font-size: 1.125rem; }
.section-head .count { font-size: .8125rem; color: var(--text-faint); }

/* --- Toast --------------------------------------------------------------- */

.toast-host {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.toast {
  background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-lg);
  font-size: .9375rem; font-weight: 500; white-space: nowrap;
  animation: toast-in .18s ease-out;
}
.toast__glyph { font-family: var(--font-emoji); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.toast.is-out { animation: toast-out .18s ease-in forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* --- Homepage ------------------------------------------------------------ */

.hero { padding: 46px 0 34px; text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 12px; }
.hero p { font-size: 1.0625rem; color: var(--text-muted); max-width: 620px; margin: 0 auto 26px; }

.hero__search { max-width: 560px; margin: 0 auto; position: relative; }
.hero__search .input { height: 52px; font-size: 1.0625rem; padding-left: 44px; box-shadow: var(--shadow-sm); }
.hero__search::before {
  content: "🔍"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-emoji); font-size: 1rem; opacity: .55; pointer-events: none;
}

.tool-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

.tool-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tool-card:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--shadow-md); border-color: var(--border-strong);
}
.tool-card__ico { font-family: var(--font-emoji); font-size: 1.5rem; line-height: 1.2; flex: none; }
.tool-card__body { display: block; min-width: 0; }
.tool-card__name { display: block; font-weight: 650; font-size: .9375rem; margin-bottom: 3px; }
.tool-card__desc { display: block; font-size: .8125rem; color: var(--text-muted); line-height: 1.45; }

.cat-head { display: flex; align-items: center; gap: 10px; margin: 38px 0 14px;
  flex-wrap: wrap; }
.cat-head__ico { font-family: var(--font-emoji); font-size: 1.35rem; }
.cat-head h2 { margin: 0; font-size: 1.25rem; }
.cat-head__all { margin-left: auto; font-size: .8125rem; font-weight: 600;
  color: var(--accent); white-space: nowrap; }

/* Sticky category jump bar on the homepage. Horizontally scrollable on
   phones; the header is sticky above it, so offset by its height. */
.jump { position: sticky; top: var(--header-h); z-index: 40; margin: 0 -20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); }
.jump__row { display: flex; gap: 8px; padding: 10px 20px; overflow-x: auto;
  scrollbar-width: none; }
.jump__row::-webkit-scrollbar { display: none; }
.jump .chip { flex: none; }

.popular { margin-top: 22px; }
.popular__title { font-size: .8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin: 0 0 10px; }

/* Anchored sections land clear of the sticky header + jump bar. */
.home-cat { scroll-margin-top: calc(var(--header-h) + 58px); }
.home-group { margin-bottom: 18px; }
.home-group__name, .hub-group__name {
  font-size: .8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin: 0 0 10px; }
.hub-group { margin-bottom: 26px; }

/* --- Tool page ----------------------------------------------------------- */

.breadcrumb { font-size: .8125rem; color: var(--text-faint); margin-bottom: 10px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }

/* --- Static prose (About / how-to / FAQ sections) ------------------------ */

.card ul, .card ol { margin: 0 0 1em; padding-left: 1.35em; }
.card li { margin-bottom: .4em; }
.card li:last-child { margin-bottom: 0; }
.card ul:last-child, .card ol:last-child { margin-bottom: 0; }

code {
  font-family: var(--font-mono); font-size: .875em;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: .1em .35em;
}

/* Code blocks scroll inside their own box, for the same reason wide tables do:
   a long unwrappable line would otherwise push the whole page sideways on a
   phone. The nested <code> drops the inline chrome so it does not double up. */
pre {
  overflow-x: auto; margin: 0 0 1.15em; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); line-height: 1.5;
}
pre code {
  background: none; border: 0; padding: 0; font-size: .8125rem;
  white-space: pre;
}

kbd {
  font-family: var(--font); font-size: .8125em; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 4px; padding: .1em .4em;
  white-space: nowrap;
}

/* --- Time zone grid ------------------------------------------------------ */

.tzscroll { overflow-x: auto; overflow-y: hidden; margin: 0 -4px; padding: 0 4px 4px; }

.tzgrid { min-width: 620px; }

.tzrow {
  display: flex; align-items: stretch; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.tzrow:last-child { border-bottom: 0; }

.tzrow__label { flex: 0 0 128px; min-width: 0; align-self: center; }
.tzrow__city {
  font-weight: 650; font-size: .9375rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tzrow__meta { font-size: .6875rem; color: var(--text-faint); white-space: nowrap; }

.tzrow__remove {
  flex: 0 0 auto; align-self: center;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--text-faint); font-size: .8125rem; opacity: 0;
  transition: opacity .12s ease;
}
.tzrow:hover .tzrow__remove, .tzrow__remove:focus-visible { opacity: 1; }
.tzrow__remove:hover { background: var(--surface-3); color: var(--danger); }

.tzgrid__strip { display: flex; flex: 1; gap: 2px; min-width: 0; }

.tzcell {
  position: relative; flex: 1 1 0; min-width: 26px;
  padding: 9px 0; cursor: pointer;
  border: 0; border-radius: 4px;
  font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1; text-align: center;
  transition: transform .08s ease, box-shadow .08s ease;
}

/* Colour by local hour band. Deliberately low-saturation: the highlighted
   column has to stay legible on top of these. */
.tzcell[data-band="work"]    { background: var(--tz-work);    color: var(--tz-work-text); }
.tzcell[data-band="early"]   { background: var(--tz-early);   color: var(--tz-early-text); }
.tzcell[data-band="evening"] { background: var(--tz-evening); color: var(--tz-evening-text); }
.tzcell[data-band="night"]   { background: var(--tz-night);   color: var(--tz-night-text); }

.tzcell--dayline { box-shadow: inset 2px 0 0 var(--accent); }
.tzcell__date {
  position: absolute; top: -14px; left: 0;
  font-size: .625rem; font-weight: 700; color: var(--accent);
  letter-spacing: .02em; pointer-events: none;
}

.tzcell.is-now::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--text); border-radius: 4px; pointer-events: none;
}

.tzcell.is-active {
  transform: scaleY(1.35);
  box-shadow: 0 0 0 2px var(--accent);
  z-index: 2;
}

.tzkey {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px;
  font-size: .75rem; color: var(--text-muted);
}
.tzkey span { display: inline-flex; align-items: center; gap: 6px; }
.tzkey i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.tzkey i[data-band="work"]    { background: var(--tz-work); }
.tzkey i[data-band="early"]   { background: var(--tz-early); }
.tzkey i[data-band="evening"] { background: var(--tz-evening); }
.tzkey i[data-band="night"]   { background: var(--tz-night); }

/* --- Time zone readout --------------------------------------------------- */

.tzread__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  font-weight: 700; font-size: 1rem; margin-bottom: 10px;
}
.tzread__row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; margin-bottom: 4px; border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}
.tzread__row[data-band="work"]    { border-left-color: var(--success); background: var(--surface-2); }
.tzread__row[data-band="early"]   { border-left-color: var(--warn);    background: var(--surface-2); }
.tzread__row[data-band="evening"] { border-left-color: var(--warn);    background: var(--surface-2); }
.tzread__row[data-band="night"]   { border-left-color: var(--danger);  background: var(--surface-2); }
.tzread__city { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.tzread__time {
  font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.tzread__day { flex: 0 0 auto; font-size: .8125rem; color: var(--text-muted); min-width: 8ch;
  text-align: right; }

@media (max-width: 560px) {
  .tzrow__label { flex-basis: 96px; }
  .tzcell { min-width: 22px; font-size: .625rem; }
  .tzread__day { display: none; }
}

/* --- Guides ------------------------------------------------------------- */

.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin-bottom: 6px; font-size: .9375rem; }
.toc li:last-child { margin-bottom: 0; }

.prose { line-height: 1.72; }
.prose h2 { font-size: 1.375rem; margin: 34px 0 12px; scroll-margin-top: 78px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.0625rem; font-weight: 650; margin: 22px 0 8px;
  scroll-margin-top: 78px; }
.prose p { margin-bottom: 1.15em; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.prose li { margin-bottom: .5em; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 650; }
/* Invoice generator: form and live preview side by side on wide screens,
   preview sticky so edits are always visible. Stacks below 1000px. */
.invoice-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 16px; align-items: start; }
/* Grid items default to min-width:auto, which lets the preview's fixed-width
   scroll frame force the whole grid wide on phones. Zero it explicitly. */
.invoice-form-col, .invoice-preview-col { min-width: 0; }
.invoice-preview-col { position: sticky; top: calc(var(--header-h) + 14px); }
@media (max-width: 1000px) {
  .invoice-app { grid-template-columns: 1fr; }
  .invoice-preview-col { position: static; }
}

/* Wide tables scroll inside their own box rather than pushing the page
   sideways. The article builder wraps every prose table in one of these. */
.table-scroll { overflow-x: auto; margin: 0 0 1.15em;
  -webkit-overflow-scrolling: touch; }
.table-scroll > .table { margin-bottom: 0; }
.table-scroll .table th, .table-scroll .table td { white-space: nowrap; }

.faq + .faq { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.faq__q { font-size: 1rem; font-weight: 650; margin: 0 0 6px; }
.faq__a { color: var(--text-muted); margin: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--accent-text);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; text-decoration: none; }

.tool-head { margin-bottom: 22px; }
.tool-head h1 { display: flex; align-items: center; gap: 12px; font-size: 1.75rem; margin-bottom: 6px; }
.tool-head h1 .ico { font-family: var(--font-emoji); }
.tool-head p { color: var(--text-muted); max-width: 68ch; }

.related { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--border); }
.related h2 { font-size: 1rem; margin-bottom: 14px; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: 34px 0 40px; margin-top: 40px;
}
.footer-cols { display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.footer-cols h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-bottom: 10px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 6px; }
.footer-cols a { color: var(--text-muted); font-size: .875rem; }
.footer-cols a:hover { color: var(--accent); }
.footer-cols h3 a { color: inherit; }
.footer-all { font-weight: 600; color: var(--accent) !important; }

/* Back-to-top: injected by shell.js, appears after a screen of scrolling. */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; display: flex; align-items: center;
  justify-content: center; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { color: var(--text); }
.footer-base { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: .8125rem; color: var(--text-faint); display: flex; flex-wrap: wrap;
  gap: 8px 16px; justify-content: space-between; }

/* --- Responsive ---------------------------------------------------------- */

/* 1120px, not a rounder number: the horizontal nav needs 1075px of header
   (see the budget above) and .wrap gives it viewport minus 40, so 1121px is
   the narrowest viewport where it still fits. Below that it becomes the
   drop-down panel. */
@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 8px; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: flex; }
  .nav__btn { width: 100%; justify-content: space-between; padding: 11px 12px; }
  .nav__menu { position: static; display: none; min-width: 0; box-shadow: none;
    border: 0; border-radius: 0; padding: 0 0 6px 14px; }
  .nav__item--open .nav__menu { display: block; }
  /* Mega menus flatten to one column in the accordion. */
  .nav__menu--mega { width: auto; padding: 0 0 6px 14px; }
  .nav__menu--c2 .nav__cols, .nav__menu--c3 .nav__cols { column-count: 1; }
  .nav__group { padding-bottom: 6px; }
  .nav__group-name { padding-top: 8px; }
  .nav__all { margin: 4px 0 6px; }
}

@media (max-width: 560px) {
  main { padding: 20px 0 48px; }
  .wrap { padding: 0 14px; }
  /* .wrap padding shrinks to 14px here, so the full-bleed jump bar must too. */
  .jump { margin: 0 -14px; }
  .jump__row { padding: 10px 14px; }
  .hero { padding: 30px 0 24px; }
  .card { padding: 16px; }
  .tool-grid { grid-template-columns: 1fr; }
  .copy-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
  .glyph { font-size: 1.55rem; }
  .result__value { font-size: 1.625rem; }
  .tool-head h1 { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .related, .toast-host, .jump, .to-top { display: none; }
  /* Invoice printing: only the invoice sheet, full width, ink-friendly. */
  body.printing-invoice main > .wrap > *:not(.invoice-app) { display: none; }
  body.printing-invoice .invoice-form-col { display: none; }
  body.printing-invoice .invoice-app { display: block; }
  body.printing-invoice .invoice-preview-col { position: static; }
  body.printing-invoice .invoice-preview-col .card { border: 0; padding: 0;
    background: #fff; box-shadow: none; }
  body.printing-invoice .invoice-preview-col .card__title,
  body.printing-invoice .invoice-preview-col .btn { display: none; }
  body.printing-invoice .invoice-preview-col [style*="overflow-x"] { overflow: visible; }
  body.printing-invoice .invoice-preview-col [style*="min-width"] { min-width: 0 !important; }
  body.printing-invoice #invoice-print { box-shadow: none; padding: 0; border-radius: 0; }
  body.printing-invoice .breadcrumb, body.printing-invoice .tool-head { display: none; }
  /* Résumé printing: the CV sheet alone, on white, full width. */
  body.printing-resume main > .wrap > *:not(.resume-app) { display: none; }
  body.printing-resume .resume-form-col, body.printing-resume .breadcrumb,
  body.printing-resume .tool-head, body.printing-resume .resume-app .btn-row,
  body.printing-resume .resume-app > .note, body.printing-resume .resume-app p.note { display: none; }
  body.printing-resume .resume-app { display: block; border: 0; padding: 0; background: #fff; box-shadow: none; }
  body.printing-resume .resume-app > div { display: block !important; }
  body.printing-resume #resume-print { box-shadow: none; padding: 0; border-radius: 0; }
}

/* Tool forms on narrow screens: file pickers and flex/grid fields must never
   force the page wider than the viewport. */
#tool .field { min-width: 0; }
#tool input[type="file"] { max-width: 100%; min-width: 0; width: 100%; }
#tool input[type="date"], #tool input[type="time"], #tool input[type="number"] { max-width: 100%; min-width: 0; }

/* Generic printable sheet (quote, expense report, minutes, checklist):
   only the sheet prints, on white, full width. */
@media print {
  body.printing-sheet main > .wrap > *:not(.sheet-app) { display: none; }
  body.printing-sheet .sheet-form, body.printing-sheet .breadcrumb, body.printing-sheet .tool-head,
  body.printing-sheet .sheet-app .btn-row, body.printing-sheet .sheet-app p.note { display: none !important; }
  body.printing-sheet .sheet-app { display: block; border: 0; padding: 0; background: #fff; box-shadow: none; }
  body.printing-sheet .sheet-app > div:not(.sheet-form):not(.btn-row) { display: block !important; }
  body.printing-sheet #sheet-print { box-shadow: none; padding: 0; border-radius: 0; color: #111; }
}