/* Futkar Calculators ecosystem — ported from reference (calculators + resource-library) */
:root {
  --fk-orange: #F27A21;
  --fk-orange-deep: #E06A12;
  --fk-orange-text: #B94708;
  --fk-cream: #FBF7F2;
  --fk-cream-deep: #F3EBE3;
  --fk-paper: #FFFFFF;
  --fk-ink: #1A1A1A;
  --fk-line: #E8E2DA;
  --fk-shadow: 0 12px 40px -16px rgba(40, 28, 18, 0.14);
  --fk-font-display: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --fk-font-sans: Inter, system-ui, sans-serif;
}

.calc-eco-body {
  font-family: var(--fk-font-sans);
  color: #334155;
  background: #fff;
}

.calc-eco-body .font-display {
  font-family: var(--fk-font-display);
}

.calc-eco-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  height: 4rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 226, 218, 0.8);
}

.calc-eco-header.is-scrolled {
  box-shadow: 0 8px 24px -16px rgba(40, 28, 18, 0.25);
}

.btn-primary-calc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #F27A21, #E06A12);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 9999px;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(242, 122, 33, 0.55);
  transition: transform 160ms ease, filter 160ms ease;
}

.btn-primary-calc:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  color: #fff;
}

.btn-ghost-calc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fk-line);
  background: #fff;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 9999px;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.btn-ghost-calc:hover {
  border-color: #F27A21;
  background: #FFF5EB;
  color: #B94708;
}

/* Calculator panel */
.calc-panel {
  background: var(--fk-paper, #fff);
  border: 1px solid var(--fk-line, #E8E2DA);
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--fk-shadow);
}
.calc-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .calc-grid { grid-template-columns: 1fr 1fr; }
}
.calc-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.35rem;
}
.calc-field input,
.calc-field select {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  background: #fff;
  color: #0f172a;
}
.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: #F27A21;
  box-shadow: 0 0 0 3px rgba(242, 122, 33, 0.2);
}
.calc-field--full { grid-column: 1 / -1; }
.calc-results {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .calc-results { grid-template-columns: repeat(3, 1fr); }
  .calc-results.calc-results--4 { grid-template-columns: repeat(2, 1fr); }
  .calc-results.calc-results--5 { grid-template-columns: repeat(3, 1fr); }
}
.calc-result {
  background: #FFF5EB;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
}
.calc-result .label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #B94708;
}
.calc-result .value {
  font-family: var(--fk-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-top: 0.2rem;
}
.calc-note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #64748b;
}
.calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.calc-presets button {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}
.calc-presets button:hover {
  border-color: #F27A21;
  color: #B94708;
  background: #FFF5EB;
}
.calc-insight {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  font-size: 0.875rem;
  line-height: 1.45;
  background: #f1f5f9;
  color: #334155;
}
.calc-insight--good { background: #ecfdf5; color: #065f46; }
.calc-insight--ok { background: #eff6ff; color: #1e40af; }
.calc-insight--warn { background: #fff7ed; color: #9a3412; }
.calc-insight--bad { background: #fef2f2; color: #991b1b; }
.calc-insight--muted { background: #f8fafc; color: #64748b; }

/* Resource list (index) */
.rl-section { position: relative; overflow: hidden; }
.rl-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(242, 122, 33, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(242, 122, 33, 0.05), transparent 50%);
  pointer-events: none;
}
.rl-count-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8F3500;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(242, 122, 33, 0.25);
}
.rl-resource-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rl-resource-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1.1rem;
  border: 1px solid #E8E2DA;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.rl-resource-card:hover {
  transform: translateX(4px);
  border-color: #F27A21;
  box-shadow: 0 14px 28px -18px rgba(242, 122, 33, 0.4);
}
.rl-resource-num {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fk-font-display);
  font-size: 0.8rem;
  font-weight: 800;
  color: #E06A12;
  background: #FFF5EB;
}
.rl-resource-title {
  font-family: var(--fk-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 0.15rem;
}
.rl-resource-blurb {
  font-size: 0.85rem;
  color: #8A837C;
}
.rl-resource-arrow {
  flex-shrink: 0;
  color: #C4BBB0;
  transition: color 180ms ease, transform 180ms ease;
}
.rl-resource-card:hover .rl-resource-arrow {
  color: #F27A21;
  transform: translateX(3px);
}
.rl-hub-cta {
  border-radius: 1.5rem;
  border: 1px solid rgba(242, 122, 33, 0.25);
  background: linear-gradient(135deg, #FFF5EB 0%, #FBF7F2 55%, #fff 100%);
  padding: 1.5rem;
}

.calc-related-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .calc-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .calc-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.calc-chip-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.calc-chip-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5c564f;
  background: #FBF7F2;
  border: 1px solid #E8E2DA;
  text-decoration: none;
}
.calc-chip-nav a:hover,
.calc-chip-nav a.is-active {
  background: #F27A21;
  border-color: #F27A21;
  color: #fff;
}

.calc-faq details {
  border: 1px solid #E8E2DA;
  border-radius: 0.9rem;
  background: #fff;
  padding: 0.9rem 1rem;
}
.calc-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: #1A1A1A;
  list-style: none;
}
.calc-faq summary::-webkit-details-marker { display: none; }
.calc-faq details[open] summary { color: #B94708; margin-bottom: 0.45rem; }
.calc-faq p {
  color: #64748b;
  font-size: 0.925rem;
  line-height: 1.55;
  margin: 0;
}

.calc-eco-footer {
  background: #0f172a;
  color: #94a3b8;
  margin-top: 3rem;
}
.calc-eco-footer a { color: #fdba74; text-decoration: none; }
.calc-eco-footer a:hover { color: #fff; }

/* Guide essays */
/* FUTKAR — Guide pages (reading + flow + visuals) — warm theme */
.guide-hero {
  background:
    radial-gradient(ellipse 80% 55% at 50% -15%, rgba(242, 122, 33, 0.14), transparent),
    radial-gradient(ellipse 45% 40% at 100% 10%, rgba(26, 26, 26, 0.04), transparent),
    linear-gradient(180deg, #FBF7F2 0%, #FFFFFF 100%);
}
.dark .guide-hero {
  background:
    radial-gradient(ellipse 80% 55% at 50% -15%, rgba(242, 122, 33, 0.12), transparent),
    radial-gradient(ellipse 45% 40% at 100% 10%, rgba(255, 255, 255, 0.04), transparent),
    linear-gradient(180deg, #181818 0%, #181818 100%);
}

.guide-answer {
  border-left: 4px solid #F27A21;
  background: linear-gradient(90deg, rgba(242, 122, 33, 0.08), transparent);
}
.dark .guide-answer { background: linear-gradient(90deg, rgba(242, 122, 33, 0.14), transparent); }

.guide-prose h2 { scroll-margin-top: 6rem; font-family: var(--fk-font-display, Fraunces, Georgia, serif); }
.guide-prose p { line-height: 1.75; }
.guide-prose .callout {
  border-radius: 1rem;
  border: 1px solid #E8E2DA;
  background: #FBF7F2;
  padding: 1rem 1.25rem;
}
.dark .guide-prose .callout {
  border-color: #404040;
  background: rgba(38, 38, 38, 0.68);
}

.guide-toc {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow: auto;
}
.guide-toc a { display: block; padding: 0.35rem 0; font-size: 0.875rem; color: #8A837C; border-left: 2px solid transparent; padding-left: 0.75rem; margin-left: -0.75rem; }
.guide-toc a:hover { color: #F27A21; }
.guide-toc a.active { color: #E06A12; font-weight: 600; border-left-color: #F27A21; }
.dark .guide-toc a { color: #A8A097; }
.dark .guide-toc a:hover { color: #F5A05A; }
.dark .guide-toc a.active { color: #F5A05A; border-left-color: #F5A05A; }

/* FAQ (guide pages use .open). Override futkar.css .faq-answer max-height:0 clamp. */
.faq-answer { display: none; max-height: none; overflow: visible; }
.faq-item.open .faq-answer { display: block; max-height: none; overflow: visible; }
.faq-item.open .faq-icon { transform: rotate(180deg); }

/* Flowchart */
.flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.flow-step {
  position: relative;
  border-radius: 1rem;
  border: 1px solid #E8E2DA;
  background: #fff;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px -16px rgba(40, 28, 18, 0.12);
}
.dark .flow-step {
  border-color: #404040;
  background: #262626;
}
.flow-arrow {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0;
  color: #8A837C;
  font-size: 1.25rem;
  line-height: 1;
}
@media (min-width: 768px) {
  .flow-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
  }
  .flow-row .flow-arrow { display: none; }
  .flow-row .flow-step::after {
    content: "→";
    position: absolute;
    right: -0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #C4B8A8;
    font-size: 1.1rem;
    z-index: 1;
  }
  .flow-row .flow-step:last-child::after { content: none; }
}

.guide-scene {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid #E8E2DA;
  background: linear-gradient(145deg, #FFF5EB, #F3EBE3 55%, #fff);
  box-shadow: 0 12px 40px -16px rgba(40, 28, 18, 0.14);
}
.dark .guide-scene {
  border-color: #404040;
  background: linear-gradient(145deg, #262626, #181818 60%);
}

.guide-use-card {
  border-radius: 1rem;
  border: 1px solid #E8E2DA;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 8px 24px -16px rgba(40, 28, 18, 0.1);
}
.dark .guide-use-card {
  border-color: #404040;
  background: #262626;
}

.guide-related-card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid #E8E2DA;
  background: #fff;
  padding: 1.25rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 24px -16px rgba(40, 28, 18, 0.1);
}
.guide-related-card:hover {
  transform: translateY(-2px);
  border-color: #F27A21;
  box-shadow: 0 16px 36px -16px rgba(242, 122, 33, 0.2);
}
.dark .guide-related-card {
  border-color: #404040;
  background: #262626;
}

.reading-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: #8A837C;
}
.dark .reading-meta { color: #A8A097; }

/* Mistake / pitfall mini flow (mistake -> signal -> fix) */
.mini-flow { display: grid; gap: 0.75rem; }
@media (min-width: 640px) {
  .mini-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mini-flow-part {
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.mini-flow-part .label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  opacity: 0.75;
}

.pitfall-card {
  border-radius: 1rem;
  border: 1px solid #F5C9A8;
  background: #FFF5EB;
  padding: 1.1rem 1.25rem;
}
.dark .pitfall-card { border-color: rgba(242, 122, 33, 0.35); background: rgba(242, 122, 33, 0.08); }


.calc-guide .btn-primary { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#F27A21,#E06A12); color:#fff; font-weight:700; font-size:.875rem; border-radius:9999px; padding:.65rem 1.25rem; text-decoration:none; }
.calc-guide .btn-primary:hover { color:#fff; filter:brightness(1.05); }
.calc-guide .btn-secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid #E8E2DA; background:#fff; color:#1A1A1A; font-weight:700; font-size:.875rem; border-radius:9999px; padding:.65rem 1.25rem; text-decoration:none; }
.calc-guide .btn-secondary:hover { border-color:#F27A21; color:#B94708; background:#FFF5EB; }
.calc-guide .faq-answer { display:none; }
.calc-guide .faq-item.open .faq-answer { display:block; }
.calc-guide .faq-item.open .faq-icon { transform:rotate(180deg); }
.calc-guide .faq-icon { transition:transform .2s ease; }