/* Shared site shell: header, hero, list rows, footer, and mobile tab bar.
   Adapted from the GeetKaar design. Class names match that design; the accent is the template green. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f3f6;
  --text: #101218;
  --muted: #596070;
  --line: #e4e6eb;
  --accent: #16a34a;
  --accent-ink: #ffffff;
  --accent-soft: #dcfce7;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px rgba(16, 24, 40, .08);
  --glass: #ffffff;
  --radius: 16px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html.dark {
  --bg: #0b0b0e;
  --surface: #141418;
  --surface-2: #1b1b21;
  --text: #f4f4ef;
  --muted: #9a9aa6;
  --line: #26262e;
  --accent: #5fae6e;
  --accent-ink: #0b0b0e;
  --accent-soft: #17281c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
  --glass: #0b0b0e;
}

.shell { font-family: var(--font); }
.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.muted { color: var(--muted); }
.section-block { margin-top: 52px; }
.section-block-sm { margin-top: 36px; }
a.shell-link { color: var(--accent); }
.scroll-mt-20 { scroll-margin-top: 80px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-block: 7px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.35rem; letter-spacing: -.04em; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.mark { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 13px; }
.brand-pro { position: relative; top: -6px; margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: #fbbf24; color: #020617; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nav { display: flex; gap: 2px; }
.nav a { color: var(--muted); font-weight: 600; font-size: .88rem; padding: 4px 12px; border-radius: 999px; text-decoration: none; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.search { position: relative; flex: 1 1 220px; max-width: 380px; margin-left: auto; }
.search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.search input {
  width: 100%; padding: 6px 14px 6px 34px; font-size: .88rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid transparent; color: var(--text);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; background: var(--surface-2); border: 0; border-radius: 999px; color: var(--text); cursor: pointer; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }

@media (min-width: 1536px) { .wrap { width: min(100% - 32px, 1400px); } }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 9vw, 96px) 0 20px; max-width: 820px; }
.eyebrow { color: var(--accent); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.hero h1 { font-size: clamp(2.2rem, 6vw + .5rem, 4.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; color: var(--text); margin: 0; }
.hl { color: var(--accent); }
.lede { color: var(--muted); font-size: 1.15rem; margin-top: 18px; max-width: 48ch; line-height: 1.6; }
.hero-search {
  position: relative; display: flex; gap: 8px; margin-top: 30px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
}
.hero-search:focus-within { border-color: var(--accent); }
.hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 20px; font-size: 1rem; color: var(--text); outline: none; }
.hero-search input::placeholder { color: var(--muted); }
.hero-search .btn { padding: 11px 22px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; }
.hero-search .btn:hover { filter: brightness(1.07); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip { background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- sections and list rows ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.section-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em; color: var(--text); margin: 0; }
.see-all-text { color: var(--accent); font-weight: 600; font-size: .9rem; text-decoration: none; }
.see-all-text:hover { text-decoration: underline; text-underline-offset: 3px; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 28px; }
@media (min-width: 820px) { .rows { grid-template-columns: 1fr 1fr; } }
.row { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 16px; color: var(--text); text-decoration: none; }
.row:hover { background: var(--surface-2); text-decoration: none; }
.row:hover .row-go { color: var(--accent); }
.row-go { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); }
.row-text { display: grid; min-width: 0; flex: 1; }
.song-title { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-meta { margin-top: 2px; color: var(--muted); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 600; vertical-align: 1px; }

/* ---------- planning tabs ---------- */
.planner-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #ffffff; color: #334155; font-size: .9rem; font-weight: 600; cursor: pointer; }
.planner-tab:hover { border-color: #16a34a; color: #15803d; }
.planner-tab-on { border-color: #16a34a; color: #15803d; background: #f0fdf4; }
.planner-chip { padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #ffffff; color: #334155; font-weight: 600; font-size: .85rem; cursor: pointer; }
.planner-chip:hover { border-color: #16a34a; color: #15803d; }
.planner-chip[aria-pressed="true"] { border-color: #16a34a; color: #15803d; background: #f0fdf4; }
html.dark .planner-chip { background: var(--surface); color: var(--text); border-color: var(--line); }
html.dark .planner-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
html.dark .planner-tab { background: var(--surface); color: var(--text); border-color: var(--line); }
html.dark .planner-tab-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ---------- icon tiles and cards ---------- */
.tile { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; flex: none; font-size: 22px; }
.tile-green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.tile-blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.tile-amber { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }
.tile-rose { background: linear-gradient(135deg, #ffe4e6, #fecdd3); color: #be123c; }
html.dark .tile-green { background: rgba(74, 222, 128, .14); color: #4ade80; }
html.dark .tile-blue { background: rgba(96, 165, 250, .14); color: #60a5fa; }
html.dark .tile-amber { background: rgba(251, 191, 36, .14); color: #fbbf24; }
html.dark .tile-rose { background: rgba(251, 113, 133, .14); color: #fb7185; }
.tool-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
.tool-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s; }
.tool-card:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; }
.tool-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; margin-top: 6px; }
.tool-desc { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.tool-cta { margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 600; font-size: .88rem; }
.cat-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
.cat-card { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
.cat-card:hover { border-color: var(--accent); text-decoration: none; }
.cat-text { display: grid; flex: 1; min-width: 0; }
.cat-name { font-weight: 700; }
.cat-blurb { color: var(--muted); font-size: .85rem; }
.cat-count { color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.feature-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.feature { display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.feature h3 { margin: 4px 0 0; font-size: 1rem; font-weight: 700; color: var(--text); }
.feature p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ---------- footer category list with icons ---------- */
.foot-cat { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 500; }
.foot-cat:hover { color: var(--accent); text-decoration: none; }
.foot-cat-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 13px; flex: none; }
.foot-cat-count { margin-left: auto; color: var(--muted); font-size: .78rem; font-weight: 600; white-space: nowrap; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; padding-block: 28px; margin-top: 56px; }
.foot { display: grid; gap: 24px; }
.foot-cols { display: grid; gap: 22px 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.foot-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.foot-h { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.foot-col ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.foot-col a { color: var(--text); font-size: .9rem; font-weight: 500; text-decoration: none; }
.foot-col a:hover { color: var(--accent); text-decoration: underline; }
.foot-brand .brand { margin-bottom: 4px; }
.foot-brand p { margin: 4px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a { color: var(--muted); font-weight: 500; text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.foot-note { font-size: .75rem; color: var(--muted); }

/* ---------- mobile: tab bar replaces the top nav and search ---------- */
.tabbar { display: none; }
@media (max-width: 759px) {
  .nav, .search { display: none; }
  .icon-btn { margin-left: auto; }
  body:has(.tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--glass);
    border-top: 1px solid var(--line);
  }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; color: var(--muted); font-size: .7rem; font-weight: 600; text-decoration: none; }
  .tabbar a:hover { text-decoration: none; }
  .tabbar i { font-size: 18px; }
  .hero-search { padding: 5px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) { .tabbar { display: none; } }

[hidden] { display: none !important; }

.foot-sep { border: 0; border-top: 1px solid #e2e8f0; margin: 20px 0 16px; }
html.dark .foot-sep { border-top-color: #334155; }

.catbar-wrap { border-bottom: 1px solid var(--line); }
.catbar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; }
.catbar::-webkit-scrollbar { display: none; }
.catbar-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 0 auto; padding: 6px 10px 6px 6px; color: var(--text); font-weight: 600; font-size: .9rem; }
.catbar-item:hover { color: var(--accent); text-decoration: none; }

.brand .mark svg { width: 22px; height: 22px; display: block; }

/* Phone search: an icon in the top bar opens the search field under it. */
.search-toggle { display: none; }
@media (max-width: 759px) {
  .search-toggle { display: inline-flex; margin-left: auto; }
  .site-header .search.is-open { display: flex !important; position: absolute !important; top: 100%; left: 0; right: 0; max-width: none; margin: 0; padding: 8px 16px 10px; background: var(--glass); border-bottom: 1px solid var(--line); z-index: 45; }
  .site-header .search.is-open input { flex: 1; }
}

/* Hero search lens: shown inside the field on phones only. */
.hero-lens { display: none; }
@media (max-width: 559px) {
  .hero-search { position: relative; padding: 0; }
  .hero-search .hero-lens { display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; pointer-events: none; }
  .hero-search input { width: 100%; padding: 14px 18px 14px 46px; }
  .hero-search .btn { display: none; }
}

/* Phone header search: the magnifier sits inside the open field. */
@media (max-width: 759px) {
  .site-header .search.is-open > i { left: 28px; }
  .site-header .search.is-open input { padding-left: 40px; }
}

/* Byline, author card, and author page. */
.byline { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 1rem; color: var(--muted); }
.byline-photo { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }
.byline-text { margin: 0; }
.byline-name { color: var(--accent); font-weight: 700; }
.author-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.author-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); }
.author-card-head h2 { margin: 0; font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.author-card-body { display: flex; align-items: center; gap: 16px; padding: 18px 20px 4px; }
.author-card-photo { width: 80px; height: 80px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }
.author-card-info { min-width: 0; }
.author-card-name { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--text); }
.author-card-name a { color: var(--accent); }
.author-card-role { margin: 2px 0 0; font-size: 1rem; font-weight: 600; color: var(--muted); }
.author-card-bio { margin: 0; padding: 12px 20px 16px; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.author-card-foot { padding: 14px 20px; border-top: 1px solid var(--line); text-align: right; }
.author-card-link { color: var(--accent); font-weight: 700; }

.author-hero { display: flex; align-items: center; gap: 20px; }
.author-hero-photo { width: 120px; height: 120px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }
.author-hero-role { margin: 4px 0 0; font-weight: 600; color: var(--accent); }

.author-page-head { display: flex; gap: 24px; align-items: center; }
.author-page-photo { width: 140px; height: 140px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }
.author-page-info { min-width: 0; }
.author-page-role { margin: 6px 0 0; font-weight: 700; color: var(--accent); }
.author-page-bio { margin: 12px 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.author-list { border-top: 1px solid var(--line); }
.author-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.author-row:hover { color: var(--accent); text-decoration: none; }
.author-row .thin-head { min-width: 0; }
.author-row-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.author-row-cat { font-size: .9rem; color: var(--muted); }
.author-row-arrow { color: var(--muted); font-size: 1.1rem; }
@media (max-width: 639px) { .author-page-head { flex-direction: column; align-items: flex-start; } .author-row { grid-template-columns: minmax(0,1fr) auto; } .author-row-cat { display: none; } }

/* Thin homepage cards: icon and title on one row, one-line excerpt, See more. */
.tool-card.thin { padding: 14px 16px; gap: 6px; min-width: 0; }
.tool-card.thin .thin-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tool-card.thin .thin-head .tile { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; flex: 0 0 auto; }
.tool-card.thin .tool-title { margin: 0; min-width: 0; font-size: 1rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-card.thin .tool-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-card.thin .tool-cta { margin-top: 0; padding-top: 0; }
/* Grid columns shrink to fit, so one-line text never pushes a card past the page edge. */
.tool-grid, .tool-grid > * { min-width: 0; }
.tool-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Author calculator list: icon tile and title with clear spacing. */
.author-row .thin-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.author-row .thin-head .tile { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; flex: 0 0 auto; }
.author-row-title { font-size: 1.05rem; }

/* Category cards: every icon tile is the same size and its glyph is centered, and descriptions reserve two lines,
   so titles and "Open calculator" links line up across a row. */
.tool-card .tile { width: 56px; height: 56px; }
.tool-card .tile i { display: inline-block; width: 1em; line-height: 1; text-align: center; }
.tool-card .tool-title { min-height: 1.3em; }
.tool-card .tool-desc { min-height: calc(1.5em * 2); }


/* Page not found: the confused calculator artwork and the amber "Take me home" button. */
.not-found-art { display: block; width: 55%; max-width: 100%; height: auto; margin: 0 auto; }
.home-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 220px; padding: 14px 28px; border-radius: 14px; background: #fbbf24; color: #0f172a; font-size: 1.05rem; font-weight: 800; text-decoration: none; box-shadow: 0 4px 14px rgba(245, 158, 11, .35); }
.home-button:hover { background: #f59e0b; text-decoration: none; }
.home-button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }

/* Page not found: road to home, and category links as pills. */
.not-found-road { display: block; width: min(52rem, 96vw); max-width: 100%; height: auto; margin: -8px auto 0; }
.category-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 8px 0 0; }
.category-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; }
.category-pill i { color: var(--accent); }
.category-pill:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Header: a slightly taller bar, with the logo mark sized to fit. */
.bar { padding-block: 16px; }
.mark { width: 36px; height: 36px; }

/* Dark mode search: visible field edges and icons, so the search boxes read as fields. */
html.dark .search input { background: #1b1b21; border-color: #3a3a44; color: #f4f4ef; }
html.dark .search input:focus { border-color: var(--accent); }
html.dark .search > i, html.dark .hero-lens { color: #a1a1ad; }
html.dark .hero-search { background: #17171d; border-color: #3a3a44; }
html.dark .hero-search:focus-within { border-color: var(--accent); }
html.dark .hero-search input { color: #f4f4ef; }

/* Phones: tools, posts, and content are full-width text with no card borders, shadows, or boxes. Desktop keeps the cards. */
@media (max-width: 639px) {
  main section, main article, main .author-card, main .calculator-card {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  main section + section, main article + section, main section + article { border-top: 1px solid var(--line) !important; padding-top: 20px !important; }
  .tool-card, .tool-grid > * {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    border-bottom: 1px solid var(--line) !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  .tool-grid { gap: 0; }
}

/* On-screen keypad (touch screens only): toolbar with previous, next, and close; large number keys in the site theme. */
.keypad { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .12); }
.keypad.open { display: block; }
.keypad-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.keypad-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 1rem; font-weight: 600; cursor: pointer; }
.keypad-tool:focus-visible, .key:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.keypad-close { margin-left: auto; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key { height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 1.5rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.key:active, .keypad-tool:active { filter: brightness(.95); }
.key-back { color: var(--muted); }
body.keypad-open { padding-bottom: 250px; }

/* Clean layout (one page at a time, set per calculator with layout: "clean"): no card or divider borders, shadows, or boxes.
   Form fields keep their own outline so they stay usable. */
.page-clean [class*="border"]:not(input):not(select):not(textarea):not(button):not(.google-preferred-link):not(.result-box) { border-color: transparent !important; border-width: 0 !important; }
.page-clean [class*="shadow"] { box-shadow: none !important; }
.page-clean section, .page-clean article, .page-clean .author-card, .page-clean details { background: transparent !important; }
.page-clean .rounded-xl, .page-clean .rounded-lg, .page-clean .rounded-2xl { border-radius: 0 !important; }

/* Clean layout, every element: borders, dividers, and shadows removed, including those set by stylesheet rules. Form controls and icons keep their look. */
.page-clean *:not(input):not(select):not(textarea):not(button):not(i):not(svg):not(path):not(.google-preferred-link):not(.result-box) { border: 0 !important; box-shadow: none !important; }
.page-clean hr { display: none !important; }

/* Clean layout: input fields lose their outline and sit on a light fill, so the tool has no boundary lines. */
.page-clean input[type="number"], .page-clean select { border: 0 !important; box-shadow: none !important; background: var(--surface-2) !important; }
.page-clean input[type="number"]:focus, .page-clean select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Clean layout: no filled boxes. Backgrounds are removed from sections, results, and fields; buttons keep their look. */
.page-clean [class*="bg-"]:not(button):not(.key):not(.keypad):not(.google-preferred-link):not(.result-box) { background-color: transparent !important; }
.page-clean input[type="number"], .page-clean select { background: transparent !important; font-weight: 700; }

/* Clean layout: input fields keep a thin outline, so they stay easy to see. */
.page-clean input[type="number"], .page-clean select { border: 1px solid #b8bec9 !important; border-radius: 10px !important; background: transparent !important; }
html.dark .page-clean input[type="number"], html.dark .page-clean select { border-color: #3a3a44 !important; }

/* Clean layout: the necessary parts keep a visible outline (inputs, buttons, result boxes). Dark mode uses a lighter line. */
.page-clean input[type="number"], .page-clean select, .page-clean button:not(.key):not(.keypad-tool), .page-clean div.rounded-lg:has(> [data-out]) {
  border: 1px solid #9aa3b2 !important; border-radius: 10px !important;
}
html.dark .page-clean input[type="number"], html.dark .page-clean select, html.dark .page-clean button:not(.key):not(.keypad-tool), html.dark .page-clean div.rounded-lg:has(> [data-out]) {
  border-color: #6b7280 !important;
}

/* Keypad toolbar: larger Up, Down, Go, and Close buttons with labels. */
.keypad-tool { min-width: 64px; height: 52px; padding: 0 14px; font-size: 1.05rem; gap: 6px; }
.keypad-tool i { font-size: 1.1rem; }
.keypad-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 800; min-width: 72px; }
.keypad-bar { gap: 10px; }

/* Clean layout: the Google preferred-source link keeps the same visible outline as the buttons. */
.page-clean a[href*="google.com/preferences"] { border: 1px solid #9aa3b2 !important; border-radius: 10px !important; }
html.dark .page-clean a[href*="google.com/preferences"] { border-color: #6b7280 !important; }

/* Clean layout: tables and fact blocks get a dashed rectangle so they read as separate. */
.page-clean table, .page-clean section#example { border: 1px dashed #9aa3b2 !important; border-radius: 10px !important; }
.page-clean table td, .page-clean table th { border-bottom: 1px dashed #c4c9d2 !important; }
html.dark .page-clean table, html.dark .page-clean section#example { border-color: #6b7280 !important; }
html.dark .page-clean table td, html.dark .page-clean table th { border-bottom-color: #3f4450 !important; }

/* Tables and facts on every calculator page: grey dotted rectangle. */
table { border: 1px dotted #9aa3b2; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
table td, table th { border-bottom: 1px dotted #c4c9d2; }
table tr:last-child td { border-bottom: 0; }
html.dark table { border-color: #6b7280; }
html.dark table td, html.dark table th { border-bottom-color: #3f4450; }

/* Clean layout: the Google preferred-source link is a filled, easy-to-see button. */
.page-clean a[href*="google.com/preferences"] { background: var(--accent) !important; color: var(--accent-ink) !important; border: 0 !important; border-radius: 12px !important; padding: 12px 18px !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(22, 163, 74, .25); }
.page-clean a[href*="google.com/preferences"]:hover { filter: brightness(1.06); }

/* Clean layout: facts and examples (the worked-example table and tables) have no borders on this page. */
.page-clean table, .page-clean table td, .page-clean table th, .page-clean section#example { border: 0 !important; }

/* Google preferred-source button: plain outline, like the Share button. */
.page-clean a.google-preferred-link { background: transparent !important; color: var(--text) !important; border: 1px solid #9aa3b2 !important; border-radius: 10px !important; padding: 8px 14px !important; font-weight: 600 !important; box-shadow: none !important; }
.page-clean a.google-preferred-link:hover { filter: none; background: transparent !important; }
html.dark .page-clean a.google-preferred-link { border-color: #6b7280 !important; }

/* Clean layout: the share button is an icon only, round, with no text label. */
.page-clean #shareResultBtn { width: 40px; height: 40px; padding: 0 !important; justify-content: center; border-radius: 999px !important; font-size: 1rem; color: var(--text); }

/* Clean layout: the Reset button is an icon only, round, like the share button. */
.page-clean #resetBtn { width: 40px; height: 40px; padding: 0 !important; justify-content: center; border-radius: 999px !important; }
/* Keypad: icon-only tools are square. */
.keypad-tool:not(.keypad-go) { width: 52px; min-width: 52px; padding: 0; }

/* Clean layout: result boxes keep a visible outline. */
.page-clean .result-box { border: 1px solid #9aa3b2 !important; border-radius: 10px !important; background: transparent !important; }
html.dark .page-clean .result-box { border-color: #6b7280 !important; }

/* Clean layout: tighter, even gaps between sections, cards, and headers. */
.page-clean.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 22px !important; }
.page-clean .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 22px !important; }
.page-clean .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px !important; }
.page-clean .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 8px !important; }
.page-clean section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Phones, clean layout: the Google preferred-source button is centered. */
@media (max-width: 639px) {
  .page-clean div:has(> a.google-preferred-link) { justify-content: center; width: 100%; }
}

/* Clean layout: the inputs and the results sit close together with one even gap. */
.page-clean #calculator > .grid { gap: 12px !important; row-gap: 12px !important; }
.page-clean #calculator > .grid > * { margin: 0 !important; }
.page-clean #calculator > div:not(.grid):not(#errorBox) + .grid { margin-top: 4px !important; }

/* Share icon: a short pop when the button is pressed. */
@keyframes share-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
.is-shared i { display: inline-block; animation: share-pop .45s ease; }

/* Clean layout: no "Link copied" status text; the share animation shows the press instead. */
.page-clean #shareResultStatus { display: none !important; }

/* Clean layout: less space after the tool and results, before the guide and the next section. */
.page-clean #calculator > .grid + * { margin-top: 12px !important; }
.page-clean #calculator { padding-bottom: 0 !important; }
.page-clean .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 16px !important; }

/* Clean layout on desktop: the text, the tool, and the sections share one column, centred. */
@media (min-width: 1024px) {
  .page-clean .page-main { width: 100%; max-width: 760px; justify-self: center; }
  .page-clean .page-main > section, .page-clean .page-main > article, .page-clean .page-main > .author-card, .page-clean .page-main > nav { width: 100%; margin-left: auto; margin-right: auto; }
}

/* Phones, clean layout: share, the preferred-source button, and reset stay on one line, with the text one step smaller. */
@media (max-width: 639px) {
  .page-clean #calculator > div:first-child { flex-wrap: nowrap !important; gap: 8px !important; }
  .page-clean a.google-preferred-link { font-size: .85rem !important; padding: 6px 10px !important; white-space: nowrap; }
}

/* Search on phones: 16px text (no zoom when typing on iPhone), tap-friendly height, and readable placeholder and icons in dark mode. */
@media (max-width: 759px) {
  .site-header .search input { font-size: 16px; min-height: 46px; }
}
@media (max-width: 559px) {
  .hero-search input { font-size: 16px; min-height: 52px; }
  .hero-search { border-radius: 16px; }
}
html.dark .search input::placeholder, html.dark .hero-search input::placeholder { color: #8b8b97; }
html.dark .hero-search .hero-lens, html.dark .site-header .search > i { color: #b4b4c0; }

/* Hero search: the rounded frame shows (the input itself has no fill or square corners), with a visible outline in dark mode. */
.hero-search input, html.dark .hero-search input { background: transparent !important; border-radius: 0 !important; }
.hero-search { border-radius: 999px; }
@media (max-width: 559px) { .hero-search { border-radius: 16px; } }
html.dark .hero-search { border: 1px solid #4a4a56; background: #17171d; }

/* Phone hero search: the placeholder text is centred in the field, with room for the search icon on the left. */
@media (max-width: 559px) {
  .hero-search input { text-align: center; padding-left: 46px !important; padding-right: 46px !important; text-overflow: ellipsis; }
}

/* Header search button: the icon is centred in its round button (the flex display needs explicit centring). */
.search-toggle { align-items: center; justify-content: center; }
.search-toggle i { display: block; line-height: 1; }

/* Keypad toolbar: four equal columns in order Up, Down, Go, Close; nothing overlaps or is cut off. */
.keypad-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.keypad-tool, .keypad-tool:not(.keypad-go) { width: 100%; min-width: 0; height: 52px; padding: 0 6px; margin: 0; justify-content: center; font-size: 1rem; }
.keypad-close { margin-left: 0; }
.keypad-tool span { white-space: nowrap; }

/* Clean layout: the share button is a round, pink share icon, the same size as reset. */
.page-clean #shareResultBtn { width: 40px !important; height: 40px !important; min-width: 40px; flex: 0 0 40px; padding: 0 !important; border-radius: 999px !important; justify-content: center; }
.page-clean #shareResultBtn i { color: #f43f5e; }

/* LinkedIn icon after the author name, with a small gap. */
.author-li { display: inline-flex; align-items: center; margin-left: 6px; color: var(--accent); font-size: .95em; vertical-align: middle; }

/* Info boxes: the same amber style as the "Check these inputs" message. */
.info-box { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid #fcd34d; background: #fff8e6; color: #78350f; font-size: 1rem; line-height: 1.5; }
html.dark .info-box { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); color: #fde68a; }

/* LinkedIn icon: LinkedIn blue, in light and dark mode. */
.author-li, .author-li i { color: #0a66c2 !important; }
html.dark .author-li, html.dark .author-li i { color: #3d8be0 !important; }

/* Clean layout: result boxes and the worked example use the amber info-box colours. */
.page-clean div.result-box.result-box { background: #fff8e6 !important; border: 1px solid #fcd34d !important; color: #78350f; }
.page-clean div.result-box.result-box .text-slate-600, .page-clean div.result-box.result-box .text-slate-700 { color: #92400e !important; }
.page-clean section#example { background: #fff8e6 !important; border: 1px solid #fcd34d !important; border-radius: 12px !important; padding: 16px !important; }
html.dark .page-clean div.result-box.result-box { background: rgba(251, 191, 36, .08) !important; border-color: rgba(251, 191, 36, .45) !important; color: #fde68a; }
html.dark .page-clean div.result-box.result-box .text-slate-600, html.dark .page-clean div.result-box.result-box .text-slate-700 { color: #fde68a !important; }
html.dark .page-clean section#example { background: rgba(251, 191, 36, .08) !important; border-color: rgba(251, 191, 36, .45) !important; }

/* Formula box: a LaTeX formula in a card with the amber info colours. Long formulas wrap onto two lines. */
.formula-box { margin: 0 0 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid #fcd34d; background: #fff8e6; color: #78350f; overflow-x: auto; text-align: left; }
.formula-box .katex-display { margin: 0; }
html.dark .formula-box { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); color: #fde68a; }
.page-clean .formula-box { border: 1px solid #fcd34d !important; background: #fff8e6 !important; }
html.dark .page-clean .formula-box { border-color: rgba(251, 191, 36, .45) !important; background: rgba(251, 191, 36, .08) !important; }

/* Keypad close button: red. */
.keypad-close { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* Clean layout: result boxes are green, like the result cards on the other calculators. */
.page-clean div.result-box.result-box { background: #f0fdf4 !important; border: 1px solid #86efac !important; color: #14532d; }
.page-clean div.result-box.result-box .text-slate-600, .page-clean div.result-box.result-box .text-slate-700 { color: #166534 !important; }
html.dark .page-clean div.result-box.result-box { background: rgba(74, 222, 128, .08) !important; border-color: rgba(74, 222, 128, .4) !important; color: #bbf7d0; }
html.dark .page-clean div.result-box.result-box .text-slate-600, html.dark .page-clean div.result-box.result-box .text-slate-700 { color: #86efac !important; }

/* Clean layout: the result boxes sit close together. */
.page-clean .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 4px !important; }
.page-clean .result-box { padding-top: 10px !important; padding-bottom: 10px !important; }

/* Phones: the LaTeX formula is smaller so both lines fit inside the box. */
@media (max-width: 639px) {
  .formula-box .katex-display { font-size: .78em; }
  .formula-box .katex-display > .katex { white-space: normal; }
}

/* Result box tones: earnings green, expenses red, taxes blue. */
.page-clean div.result-box.result-box.tone-earn { background: #f0fdf4 !important; border-color: #86efac !important; color: #14532d; }
.page-clean div.result-box.result-box.tone-expense { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #7f1d1d; }
.page-clean div.result-box.result-box.tone-tax { background: #eff6ff !important; border-color: #93c5fd !important; color: #1e3a8a; }
.page-clean div.result-box.result-box.tone-expense .text-slate-600, .page-clean div.result-box.result-box.tone-expense .text-slate-700 { color: #991b1b !important; }
.page-clean div.result-box.result-box.tone-tax .text-slate-600, .page-clean div.result-box.result-box.tone-tax .text-slate-700 { color: #1e40af !important; }
html.dark .page-clean div.result-box.result-box.tone-earn { background: rgba(74, 222, 128, .08) !important; border-color: rgba(74, 222, 128, .4) !important; color: #bbf7d0; }
html.dark .page-clean div.result-box.result-box.tone-expense { background: rgba(248, 113, 113, .08) !important; border-color: rgba(248, 113, 113, .45) !important; color: #fecaca; }
html.dark .page-clean div.result-box.result-box.tone-tax { background: rgba(96, 165, 250, .08) !important; border-color: rgba(96, 165, 250, .45) !important; color: #bfdbfe; }

/* Phone header search: when opened, the search covers the whole header bar, with the field centred in it. */
@media (max-width: 759px) {
  .site-header .search.is-open { top: 0 !important; bottom: 0 !important; height: auto !important; left: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; padding: 0 12px !important; border-bottom: 0 !important; z-index: 3; background: var(--glass) !important; }
  .site-header .search.is-open input { min-height: 44px; }
}

/* Clean layout: no worked example section on any page that uses it. */
.page-clean section#example { display: none !important; }

/* Batch 1, phones: the homepage category and feature cards are plain rows with a divider, like the calculator pages. */
@media (max-width: 639px) {
  .cat-card, .feature {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding-left: 0 !important; padding-right: 0 !important; border-bottom: 1px solid var(--line) !important;
  }
}

/* Very narrow phones: the LaTeX formula is smaller again so no line is cut off. */
@media (max-width: 430px) {
  .formula-box .katex-display { font-size: .62em; }
}

/* Hand-built calculators on the clean layout: the repeated title and intro are hidden, as on the generated calculators. */
.page-clean #hero > p { display: none !important; }
.page-clean #calculator > div:first-child > div:first-child { display: none !important; }