/* Critical above-the-fold styles for the embed calculator directory. Keep selectors identical to styles.css. */
@font-face {
  font-family: "Geist Sans";
  src: url("../node_modules/geist/dist/fonts/geist-sans/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

:root {
  --green-950: #082f1a;
  --green-900: #0d4324;
  --green-800: #15572f;
  --green-700: #2f7d32;
  --green-600: #4b8f2d;
  --green-500: #72a83b;
  --green-200: #cfe2c4;
  --green-100: #e8f2e2;
  --green-50: #f3f8ef;
  --ink: #17321f;
  --muted: #53665a;
  --line: #b9c5b7;
  --soft-line: #d7ded4;
  --panel: #eef1ec;
  --paper: #ffffff;
  font-family: "Geist Sans", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #fff; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: #17618a; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #a8ce63; outline-offset: 2px; }
.no-scroll { overflow: hidden; }

/* Header */
.site-header {
  background: var(--green-900);
  border-bottom: 4px solid #79a83a;
  color: #fff;
  position: relative;
  z-index: 30;
}
.header-top {
  min-height: 60px;
  padding: 0 max(18px, calc((100vw - 1100px) / 2));
  display: flex;
  align-items: stretch;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand > span:last-child > span { color: #b9dc5b; }
.brand-mark {
  width: 30px;
  height: 30px;
  padding: 6px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border: 1px solid #b9dc5b;
  border-radius: 4px;
  background: #123a22;
}
.brand-mark i { display: block; width: 4px; border-radius: 1px; background: #b9dc5b; }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 13px; }
.brand-mark i:nth-child(3) { height: 18px; }
.desktop-nav { min-height: 40px; padding: 0 max(18px, calc((100vw - 1100px) / 2)); display: flex; align-items: stretch; background: var(--green-950); border-top: 1px solid rgba(255,255,255,.12); }
.desktop-nav a, .desktop-nav > button {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  border-inline: 1px solid transparent;
}
.desktop-nav > button { border: 0; background: #315f2b; }
.desktop-nav a:hover, .desktop-nav > button:hover { background: #38762e; text-decoration: none; }
.region-picker { position: relative; align-self: center; display: flex; margin-left: auto; }
.region-picker > select { display: none; }
.region-trigger { width: 180px; height: 35px; padding: 0 7px; display: grid; grid-template-columns: 23px minmax(0,1fr) 10px; align-items: center; gap: 6px; border: 1px solid #8eb17c; border-radius: 3px; background: #f6faf4; color: #244b31; font-size: 10px; font-weight: 700; text-align: left; }
.region-trigger > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-trigger b { color: #4b6751; font-size: 9px; }
.region-flag { width: 22px; height: 17px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(20,55,29,.18); border-radius: 1px; }
.region-popover { position: absolute; top: 41px; right: 0; width: 360px; padding: 8px; z-index: 60; border: 1px solid #6f8b72; border-radius: 4px; background: #fff; box-shadow: 0 10px 28px rgba(5,39,19,.25); color: var(--ink); }
.locale-independent-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; padding: 9px; background: #edf5e9; }
.locale-independent-settings label { display: grid; gap: 4px; color: #315d38; font-size: 10px; font-weight: 700; }
.locale-independent-settings select { width: 100%; min-width: 0; height: 34px; border: 1px solid #8da38c; background: #fff; color: #244b31; }
.region-search { display: grid; gap: 5px; padding-bottom: 7px; border-bottom: 1px solid var(--soft-line); color: #315d38; font-size: 10px; font-weight: 700; }
.region-search input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #9caf9c; border-radius: 2px; background: #fff; color: var(--ink); font-size: 12px; }
.region-options { max-height: 350px; padding-top: 5px; display: grid; overflow-y: auto; overscroll-behavior: contain; }
.region-options button { width: 100%; min-height: 44px; padding: 5px 7px; display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid #edf1eb; background: #fff; color: #25482c; text-align: left; }
.region-options button:hover, .region-options button:focus-visible { background: #edf5e9; }
.region-options button[aria-selected="true"] { background: #e1efdb; }
.region-options button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.region-options strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e4e29; font-size: 11px; }
.region-options small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #607064; font-size: 9px; }
.region-empty { margin: 8px 0 0; padding: 12px; background: #f4f6f2; color: #607064; font-size: 11px; text-align: center; }
.search-trigger {
  align-self: center;
  height: 35px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #8eb17c;
  border-radius: 3px;
  background: #fff;
  color: #244b31;
}
.quick-calc-trigger { align-self: center; height: 35px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid #8eb17c; border-radius: 3px; background: #eaf3e5; color: #244b31; font-weight: 700; }
.quick-calc-trigger span { font-size: 17px; }
.quick-calc-trigger b { font-size: 11px; }
.search-trigger span { font-size: 20px; }
.search-trigger b { font-size: 11px; }
.search-trigger kbd { padding: 2px 4px; border: 1px solid #bcc6ba; background: #eef2ec; font-size: 9px; }
.menu-trigger { display: none; margin-left: auto; border: 0; background: transparent; color: #fff; font-weight: 700; }
.header-social-actions { align-self: center; display: flex; align-items: center; gap: 8px; }
.social-share { display: flex; align-items: center; gap: 5px; }
.social-share a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #8eb17c; border-radius: 50%; background: #fff; color: #244b31; font-size: 13px; font-weight: 800; line-height: 1; text-decoration: none; }
.social-share a:hover { border-color: #b9dc5b; background: #edf5e9; text-decoration: none; }
.social-share a:nth-child(2) { font-size: 15px; }
.social-share a:nth-child(3) { font-size: 11px; }
.donate-button { padding: 10px 15px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 12px; background: #101828; color: #f7f8f5; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.donate-button:hover { background: #202b3d; text-decoration: none; }
.donate-button b { color: #ff6b84; font-size: 15px; }

/* Shared typography and controls */
.eyebrow { display: block; margin-bottom: 7px; color: var(--green-700); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumb { display: flex; gap: 7px; margin-bottom: 15px; color: #6b7a70; font-size: 11px; }
.breadcrumb a { color: #17618a; }
.tool-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #a8c69d;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--icon-accent, var(--category-accent, var(--green-700)));
  font-size: 15px;
  font-weight: 700;
}
.privacy-pill { display: inline-flex; align-items: center; gap: 7px; color: #386541; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.privacy-pill span { width: 7px; height: 7px; border-radius: 50%; background: #4c9137; }

@media (max-width: 900px) {
  .header-top { gap: 10px; }
  .desktop-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; padding: 7px; flex-wrap: wrap; background: var(--green-900); border-bottom: 3px solid #79a83a; }
  .desktop-nav.open { display: flex; }
  .desktop-nav a { min-height: 36px; }
  .desktop-nav > button { min-height: 36px; }
  .menu-trigger { display: block; }
  .search-trigger { margin-left: auto; }
  .search-trigger b, .search-trigger kbd, .quick-calc-trigger b { display: none; }
  .donate-button { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  .donate-button span { display: none; }
  .region-trigger { width: 145px; }
  .category-grid, .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .calculator-workspace { grid-template-columns: 350px 1fr; gap: 14px; }
  .content-layout { grid-template-columns: 1fr; }
  .guide-columns { grid-template-columns: 1fr; }
  .directory-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-tool-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  body { font-size: 14px; }
  .header-top { min-height: 54px; padding-inline: 12px; flex-wrap: wrap; }
  .brand { font-size: 18px; }
  .brand > span:last-child { display: none; }
  .brand-mark { width: 27px; height: 27px; }
  .region-trigger { width: 102px; padding-inline: 5px; grid-template-columns: 23px minmax(0,1fr) 8px; }
  .header-social-actions { order: 10; flex: 1 0 100%; justify-content: center; padding-bottom: 8px; }
  .region-popover { position: fixed; top: 108px; left: 12px; right: 12px; width: auto; }
  .converter-actions { grid-template-columns: repeat(2, 1fr); }
  .quick-calc { top: 112px; right: 8px; left: 8px !important; width: auto; max-width: 326px; margin-left: auto; }
  .unit-converter-dialog { top: 108px; max-height: calc(100vh - 116px); overflow-y: auto; }
  .region-options { max-height: min(62vh, 430px); }
  .desktop-nav { top: 104px; }
  .home-main { padding: 12px 10px 35px; }
  .home-search-band { grid-template-columns: 1fr; padding: 17px; }
  .home-search-band h1 { font-size: clamp(38px, 11vw, 46px); }
  .home-summary { flex-wrap: wrap; }
  .home-summary > * { flex: 1 1 50%; border-bottom: 1px solid #d3dbd0; }
  .category-grid, .tool-grid { grid-template-columns: 1fr; }
  .personal-shelves { grid-template-columns: 1fr; padding-inline: 10px; }
  .directory-grid, .mini-tool-grid { grid-template-columns: 1fr; }
  .category-card p { min-height: 0; }
  .calculator-workspace { grid-template-columns: 1fr; padding: 12px 10px 24px; }
  .calculation-history-shelf { margin: 12px 10px 22px; padding: 13px; }
  .calculation-history-list, .journey-grid { grid-template-columns: 1fr; }
  .calculation-history-item { align-items: flex-start; }
  .category-hero, .calculator-intro, .section, .content-layout { padding-inline: 10px; }
  .category-hero h1, .calculator-intro h1, .directory-hero h1, .info-hero h1 { font-size: clamp(34px, 10vw, 42px); }
  .input-group { grid-template-columns: 118px 1fr; }
  .input-panel, .result-panel { padding-inline: 12px; }
  .panel-heading { margin-inline: -12px; align-items: flex-start; }
  .result-top { margin-inline: -12px; }
  .primary-result > strong { font-size: 32px; }
  .chart-legend { grid-template-columns: 1fr; }
  .trend-grid { grid-template-columns: 1fr; }
  .scenario-comparison > div:not(.scenario-heading) { grid-template-columns: 1fr; gap: 2px; }
  .page-toc { margin-inline: 10px; }
  .trust-panel, .feedback-card { margin-inline: 10px; align-items: flex-start; flex-direction: column; }
  .trust-actions { flex-wrap: wrap; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 0; }
  .category-guide { margin-inline: 10px; }
  .info-content article { grid-template-columns: 1fr; gap: 6px; }
  .feedback-page-card { margin-inline: 10px; padding: 18px; grid-template-columns: 1fr; }
  .feedback-field-grid { grid-template-columns: 1fr; }
  .feedback-submit-row { align-items: stretch; flex-direction: column; }
  .site-footer { grid-template-columns: 1fr; padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

.embed-calculator > footer a { color:#2f6f32; font-weight:700; text-decoration:none; }
.desktop-nav .embed-nav-link { background:#e8f3e4; border:1px solid #afcaa8; border-radius:7px; color:#245b28; font-weight:800; }
.embed-directory { max-width:1240px; margin:0 auto; padding:0 22px 60px; min-width:0; }
.embed-directory-hero { padding:42px 0 30px; max-width:900px; }
.embed-directory-hero h1 { font-size:clamp(2rem,5vw,3.5rem); margin:.35rem 0 .7rem; }
.embed-directory-hero > p { color:#52604f; font-size:1.08rem; max-width:780px; }
.embed-benefits { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.embed-benefits span { background:#edf6e9; border:1px solid #c8ddc1; border-radius:999px; color:#2d6331; font-weight:700; padding:8px 12px; }
.featured-embed-shelf { margin-bottom:30px; }
.featured-embed-shelf > div:last-child { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.featured-embed-shelf > div:last-child > a { display:flex; flex-direction:column; gap:7px; padding:11px; border:1px solid #d2dfce; border-radius:11px; background:#fff; color:#263b2c; text-decoration:none; }
.featured-embed-shelf img { width:100%; height:auto; border-radius:7px; }
.featured-embed-shelf em { color:#4b7a43; font-size:.72rem; font-style:normal; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.featured-embed-shelf strong { color:#174e2e; }
.featured-embed-shelf span { color:#647064; font-size:.82rem; line-height:1.35; }
.embed-directory-layout { display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1.45fr); gap:24px; align-items:start; min-width:0; }
.embed-catalog,.embed-preview-panel { background:#fff; border:1px solid #d8e1d4; border-radius:14px; box-shadow:0 8px 24px rgba(40,70,35,.08); }
.embed-catalog { padding:18px; position:sticky; top:18px; }
.embed-search { display:block; font-weight:800; }
.embed-search span { display:block; margin-bottom:7px; }
.embed-search input { width:100%; border:1px solid #bbc9b6; border-radius:8px; font:inherit; padding:11px 12px; }
.embed-filters { display:flex; gap:6px; overflow:auto; padding:12px 0; }
.embed-filters button { border:1px solid #c5d2c1; border-radius:999px; background:#fff; padding:7px 10px; white-space:nowrap; }
.embed-filters button.active { background:#2f7034; color:#fff; border-color:#2f7034; }
.embed-catalog-list { display:grid; gap:6px; max-height:620px; overflow:auto; padding-right:4px; }
.embed-catalog-list button { display:grid; grid-template-columns:32px 1fr auto; gap:8px; align-items:center; border:1px solid transparent; border-radius:8px; background:#f7faf5; color:#263327; padding:10px; text-align:left; }
.embed-catalog-list button:hover,.embed-catalog-list button.selected { border-color:#71a26e; background:#edf6e9; }
.embed-catalog-list button strong { font-size:.92rem; }
.embed-catalog-list button small { color:#4f5e4d; }
.embed-preview-panel { padding:22px; }
.embed-preview-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.embed-preview-heading h2 { margin:.25rem 0 0; }
.embed-preview-heading a { color:#2f7034; font-weight:750; }
.embed-preview-panel iframe { width:100%; height:620px; border:1px solid #ced8ca; border-radius:12px; background:#f4f7f1; }
.embed-code-label { display:block; margin-top:16px; font-weight:800; }
.embed-code-label span { display:block; margin-bottom:7px; }
.embed-code-label textarea { width:100%; border:1px solid #bbc9b6; border-radius:8px; background:#f7faf5; font:500 .84rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; padding:11px; resize:vertical; box-sizing:border-box; max-width:100%; }
.embed-catalog,.embed-preview-panel,.embed-search,.embed-filters,.embed-catalog-list,.embed-code-label { min-width:0; max-width:100%; }
.embed-search input,.embed-preview-panel iframe { box-sizing:border-box; max-width:100%; }
.embed-copy-main { margin-top:10px; border:0; border-radius:8px; background:#2f7034; color:#fff; font-weight:800; padding:11px 16px; }
.embed-license { color:#687466; font-size:.88rem; }
.embed-how { padding:48px 0 0; }
.embed-how > div { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.embed-how article { background:#edf6e9; border-radius:12px; padding:20px; }
.embed-how article b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#2f7034; color:#fff; }
@media (max-width:850px) { .embed-directory-layout { grid-template-columns:1fr; } .embed-catalog { position:static; } .embed-catalog-list { max-height:380px; } .embed-how > div { grid-template-columns:1fr; } }
@media (max-width:620px) { .embed-directory { padding-inline:14px; } .embed-catalog,.embed-preview-panel { padding:14px; } .embed-preview-heading { align-items:flex-start; flex-direction:column; } .embed-catalog-list button { grid-template-columns:28px minmax(0,1fr); } .embed-catalog-list button small { grid-column:2; } }
@media (max-width:1000px) { .featured-embed-shelf > div:last-child { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px) { .featured-embed-shelf > div:last-child { grid-template-columns:1fr; } }