/*!
 * TDEE Calculator — styles
 * Scoped entirely under .tdeecalc so it never leaks into the host theme.
 */

.tdeecalc {
  --tc-ink: #12232E;
  --tc-paper: #F5F7F6;
  --tc-card: #FFFFFF;
  --tc-primary: #0E7C7B;
  --tc-primary-dark: #0A5F5E;
  --tc-accent: #B94C30;
  --tc-accent-dark: #9C4128;
  --tc-sage: #3F9142;
  --tc-amber: #D69A2D;
  --tc-brick: #C0392B;
  --tc-blue: #3E7DD6;
  --tc-slate-900: #1B2528;
  --tc-slate-600: #56666A;
  --tc-slate-400: #8B9A9A;
  --tc-slate-200: #DCE4E3;
  --tc-slate-100: #EDF1F0;
  --tc-radius-sm: 5px;
  --tc-radius-md: 8px;
  --tc-radius-lg: 10px;
  --tc-shadow: 0 1px 2px rgba(18, 35, 46, 0.05);
  --tc-shadow-lg: 0 4px 14px rgba(18, 35, 46, 0.08);
  --tc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  font-family: var(--tc-font);
  color: var(--tc-slate-900);
  background: var(--tc-paper);
  border-radius: var(--tc-radius-lg);
  padding: clamp(14px, 2.2vw, 20px);
  max-width: 980px;
  margin: 0 auto;
  box-sizing: border-box;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

/* The widget sets display:grid / display:flex on several containers that also
   get toggled with the HTML [hidden] attribute. Author rules beat the browser's
   built-in `[hidden] { display: none }`, so without this those containers would
   stay on screen while their inputs were disabled. Keep this rule above the
   layout rules below. */
.tdeecalc [hidden] {
  display: none !important;
}

.tdeecalc button {
  font-family: inherit;
}

.tdeecalc :focus-visible {
  outline: 2.5px solid var(--tc-primary);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
.tdeecalc__header { margin-bottom: 14px; text-align: left; }
/* Compound selectors here (.tdeecalc .tdeecalc__eyebrow) outrank the theme
   rules that would otherwise reopen this gap -- `.entry-content p` and
   `.entry-content h2` both beat a lone class selector on specificity. */
.tdeecalc .tdeecalc__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-primary);
  /* Zero margin AND a tight line-height: half-leading from the default 1.45
     line-height would still show as a gap even with the margin removed. */
  margin: 0;
  line-height: 1.2;
}
.tdeecalc .tdeecalc__title {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tc-ink);
  margin: 0 0 8px;
  line-height: 1.15;
}
.tdeecalc__subtitle {
  font-size: 15px;
  color: var(--tc-slate-600);
  max-width: 62ch;
  margin: 0;
}

/* ---------- Layout grid ---------- */
.tdeecalc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
@media (min-width: 860px) {
  .tdeecalc__grid { grid-template-columns: 1.35fr 1fr; }
}

.tdeecalc__col-input {
  background: var(--tc-card);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow);
  padding: clamp(14px, 2vw, 18px);
}

.tdeecalc__col-summary { position: sticky; top: 16px; }

/* The hero column now carries the summary card, the action buttons and the
   expandable history panel. A sticky element taller than the viewport pins its
   top and puts its lower half permanently out of reach, so cap it and let it
   scroll internally. Only needed at the breakpoint where the column is sticky
   and side-by-side with the form. */
@media (min-width: 860px) {
  .tdeecalc__col-summary {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

/* ---------- Fields ---------- */
.tdeecalc__field { margin-bottom: 12px; }
.tdeecalc__label,
.tdeecalc__field > label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tc-ink);
  margin-bottom: 5px;
}
.tdeecalc__optional { font-weight: 500; color: var(--tc-slate-400); font-size: 12px; }

.tdeecalc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tdeecalc__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--tc-paper);
  border: 1px solid var(--tc-slate-200);
  border-radius: var(--tc-radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tdeecalc__input-wrap:focus-within {
  border-color: var(--tc-primary);
  background: var(--tc-card);
}
.tdeecalc__input-wrap input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 8px 10px 12px;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tc-ink);
  min-width: 0;
}
.tdeecalc__input-wrap input:focus { outline: none; }
.tdeecalc__input-wrap input::-webkit-outer-spin-button,
.tdeecalc__input-wrap input::-webkit-inner-spin-button { opacity: 0.6; }
.tdeecalc__suffix {
  padding-right: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-slate-400);
  white-space: nowrap;
}

.tdeecalc__field.has-error .tdeecalc__input-wrap { border-color: var(--tc-brick); background: #FBEEEC; }
.tdeecalc__error-box {
  background: #FBEEEC;
  border: 1px solid var(--tc-brick);
  color: var(--tc-brick);
  border-radius: var(--tc-radius-sm);
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ---------- Unit toggle / gender toggle / segmented controls ---------- */
.tdeecalc__unit-toggle,
.tdeecalc__seg {
  display: inline-flex;
  background: var(--tc-paper);
  border: 1px solid var(--tc-slate-200);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
}
.tdeecalc__unit-btn,
.tdeecalc__seg-btn {
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tc-slate-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tdeecalc__unit-btn.is-active,
.tdeecalc__seg-btn.is-active {
  background: var(--tc-ink);
  color: #fff;
  box-shadow: var(--tc-shadow);
}
.tdeecalc__unit-btn:hover:not(.is-active),
.tdeecalc__seg-btn:hover:not(.is-active) { color: var(--tc-ink); }

/* ---------- Activity level (dropdown) ---------- */
/* Matches .tdeecalc__input-wrap so the dropdown reads as part of the same form,
   but the select needs its own rules: appearance:none strips the OS control so
   the chevron and border are ours to draw. */
.tdeecalc__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--tc-paper);
  border: 1px solid var(--tc-slate-200);
  border-radius: var(--tc-radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tdeecalc__select-wrap:focus-within {
  border-color: var(--tc-primary);
  background: var(--tc-card);
}
.tdeecalc__select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  border: none;
  background: transparent;
  /* Right padding clears the chevron so long option text never runs under it. */
  padding: 10px 36px 10px 12px;
  /* 16px keeps iOS Safari from zooming the page when the control is tapped. */
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: var(--tc-ink);
  cursor: pointer;
  min-width: 0;
  /* Long labels truncate rather than force the sidebar wider. */
  text-overflow: ellipsis;
}
.tdeecalc__select-wrap select:focus { outline: none; }
.tdeecalc__select-wrap select::-ms-expand { display: none; }
.tdeecalc__select-chevron {
  position: absolute;
  right: 14px;
  width: 18px;
  height: 18px;
  color: var(--tc-slate-400);
  pointer-events: none;
}
.tdeecalc__select-wrap:hover { border-color: var(--tc-primary); }
/* The dropdown list itself is drawn by the OS, so only colours are reliable
   here -- this keeps options readable on dark-mode platforms. */
.tdeecalc__select-wrap select option {
  background: #ffffff;
  color: var(--tc-ink);
}

/* ---------- Calculate button ---------- */
.tdeecalc__calculate-btn {
  width: 100%;
  border: none;
  background: var(--tc-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 13px;
  border-radius: var(--tc-radius-sm);
  cursor: pointer;
  margin-top: 4px;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.tdeecalc__calculate-btn:hover { background: var(--tc-accent-dark); }
.tdeecalc__calculate-btn:active { transform: translateY(1px); }

/* ---------- Summary card (sidebar) ---------- */
.tdeecalc__summary-placeholder {
  background: var(--tc-card);
  border: 1px dashed var(--tc-slate-200);
  border-radius: var(--tc-radius-lg);
  padding: 20px 16px;
  text-align: center;
  color: var(--tc-slate-600);
  font-size: 14px;
}
.tdeecalc__summary-card {
  background: var(--tc-ink);
  color: #fff;
  border-radius: var(--tc-radius-lg);
  padding: 18px;
  box-shadow: var(--tc-shadow-lg);
}
.tdeecalc__summary-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0 0 4px;
}
.tdeecalc__summary-number {
  font-size: 42px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}
.tdeecalc__summary-number span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.tdeecalc__summary-weekly { font-size: 13.5px; color: rgba(255,255,255,0.7); margin: 6px 0 10px; }
.tdeecalc__summary-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tdeecalc__chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
.tdeecalc__chip--under { background: rgba(62,125,214,0.18); color: #7FAAEA; }
.tdeecalc__chip--normal { background: rgba(63,145,66,0.2); color: #7FCB82; }
.tdeecalc__chip--over { background: rgba(214,154,45,0.2); color: #E8BB5E; }
.tdeecalc__chip--obese { background: rgba(192,57,43,0.22); color: #E8887C; }
.tdeecalc__summary-note { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 0; }

/* ---------- Results ---------- */
.tdeecalc__results { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.tdeecalc__section {
  background: var(--tc-card);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow);
  padding: clamp(14px, 2vw, 18px);
}
.tdeecalc__section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--tc-ink);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.tdeecalc__section-desc { font-size: 13.5px; color: var(--tc-slate-600); margin: 0 0 10px; }

.tdeecalc__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tdeecalc__table td, .tdeecalc__table th { padding: 8px 8px; text-align: left; border-bottom: 1px solid var(--tc-slate-100); }
.tdeecalc__table td:last-child, .tdeecalc__table th:last-child { text-align: right; }
.tdeecalc__td-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tc-ink); text-align: right; }
.tdeecalc__td-sub { display: block; font-size: 12px; font-weight: 400; color: var(--tc-slate-600); }
.tdeecalc__table tr.is-selected { background: rgba(14, 124, 123, 0.06); }
.tdeecalc__td-badge span {
  background: var(--tc-primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; float: right;
}
.tdeecalc__table tr.tdeecalc__row-warn td { color: var(--tc-brick); }

/* ---------- BMI gauge ---------- */
.tdeecalc__bmi-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tdeecalc__bmi-gauge { flex: 1 1 320px; min-width: 260px; }
.tdeecalc__bmi-gauge svg { width: 100%; height: auto; display: block; }
.tdeecalc__bmi-readout { flex: 0 0 auto; text-align: center; }
.tdeecalc__bmi-value { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tc-ink); line-height: 1; }
.tdeecalc__bmi-category-pill {
  display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
}
.tdeecalc__bmi-category-pill.tdeecalc__chip--under { background: rgba(62,125,214,0.12); color: #2E63B0; }
.tdeecalc__bmi-category-pill.tdeecalc__chip--normal { background: rgba(63,145,66,0.12); color: #2F7A3A; }
.tdeecalc__bmi-category-pill.tdeecalc__chip--over { background: rgba(214,154,45,0.14); color: #92600C; }
.tdeecalc__bmi-category-pill.tdeecalc__chip--obese { background: rgba(192,57,43,0.12); color: #A93326; }

/* ---------- Macro cards ---------- */
.tdeecalc__macro-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tdeecalc__macro-card { border: 1px solid var(--tc-slate-100); border-radius: var(--tc-radius-md); padding: 12px; }
.tdeecalc__macro-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.tdeecalc__macro-head h4 { margin: 0; font-size: 15px; font-weight: 800; color: var(--tc-ink); }
.tdeecalc__macro-head span { font-size: 13px; font-weight: 700; color: var(--tc-primary); font-variant-numeric: tabular-nums; }
.tdeecalc__macro-note { font-size: 12px; color: var(--tc-slate-600); margin: 0 0 8px; min-height: 26px; }
.tdeecalc__macro-bar { margin-bottom: 8px; }
.tdeecalc__macro-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tdeecalc__macro-legend li { display: flex; align-items: center; gap: 8px; color: var(--tc-slate-600); }
.tdeecalc__macro-legend strong { margin-left: auto; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tdeecalc__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Goal chart ---------- */
.tdeecalc__goal-chart svg { width: 100%; height: auto; display: block; }
.tdeecalc__goal-tables { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 640px) { .tdeecalc__goal-tables { grid-template-columns: 1fr 1fr; } }
.tdeecalc__goal-tables h4 { font-size: 14px; font-weight: 800; color: var(--tc-ink); margin: 0 0 6px; }
.tdeecalc__safety-note {
  margin-top: 10px; background: #FFF6EC; border: 1px solid var(--tc-amber);
  color: #8A611C; font-size: 12.5px; padding: 8px 12px; border-radius: var(--tc-radius-sm);
}

/* ---------- Hero action panel ---------- */
/* The actions sit in the hero column beside the form, which is far narrower
   than the full-width section they used to occupy. A two-column grid keeps
   them tidy at that width instead of wrapping into a ragged flex row. */
.tdeecalc__hero-actions {
  margin-top: 10px;
  background: var(--tc-card);
  border: 1px solid var(--tc-slate-200);
  border-radius: var(--tc-radius-lg);
  padding: 14px;
}
.tdeecalc__hero-actions-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-slate-600);
}

/* ---------- Action row ---------- */
.tdeecalc__actions {
  display: grid;
  /* auto-fit rather than a fixed 2 columns: on a 860px viewport the hero column
     is only ~330px wide, and auto-fit drops to a single column instead of
     squeezing "Copy Results" until it wraps. */
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
}
/* Slightly tighter than the old full-width row so two columns fit comfortably
   in the hero sidebar. */
.tdeecalc__hero-actions .tdeecalc__action-btn {
  padding: 9px 10px;
  font-size: 13px;
  gap: 6px;
  min-width: 0;
}
/* Reset is the odd one out of five, so it spans the full width and reads as
   separate from the four "save/share" actions above it. */
.tdeecalc__actions .tdeecalc__action-btn[data-action="reset"] { grid-column: 1 / -1; }
.tdeecalc__action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tc-paper); border: 1px solid var(--tc-slate-200);
  color: var(--tc-ink); font-size: 13.5px; font-weight: 700;
  padding: 11px 16px; border-radius: var(--tc-radius-sm); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.tdeecalc__action-btn[data-action="reset"] { color: var(--tc-slate-600); }
.tdeecalc__action-btn svg {
  width: 16px; height: 16px; flex-shrink: 0;
  display: block; vertical-align: middle;
}
/* Keeps the five buttons reading as one consistent set rather than five
   different widths driven by label length. */
.tdeecalc__action-btn { justify-content: center; min-height: 38px; }

/* Hover / focus colours.

   Three deliberate choices here, all learned the hard way:

   1. These are NOT wrapped in `@media (hover: hover)`. That query is false on
      touchscreen laptops, tablets and any browser reporting a coarse pointer,
      which silently removed the hover colour entirely on those machines.
   2. The selectors are deliberately compound (.tdeecalc .tdeecalc__actions ...)
      to outrank typical WordPress theme rules such as
      `.entry-content button:hover` or `.wp-block-button__link:hover`, which
      would otherwise repaint these buttons with the theme's own colour.
   3. :hover and :focus-visible are kept in SEPARATE rules. If they share one
      selector list, any browser that doesn't understand :focus-visible throws
      the entire rule away -- taking the hover colour with it. */

.tdeecalc .tdeecalc__actions .tdeecalc__action-btn:hover {
  background: #9C4128;
  border-color: #9C4128;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(156, 65, 40, 0.28);
}
.tdeecalc .tdeecalc__actions .tdeecalc__action-btn:focus-visible {
  background: #9C4128;
  border-color: #9C4128;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(156, 65, 40, 0.28);
}
.tdeecalc .tdeecalc__actions .tdeecalc__action-btn:hover svg { stroke: #ffffff; }
.tdeecalc .tdeecalc__actions .tdeecalc__action-btn:focus-visible svg { stroke: #ffffff; }

.tdeecalc .tdeecalc__actions .tdeecalc__action-btn[data-action="reset"]:hover {
  background: #9C4128;
  border-color: #9C4128;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(156, 65, 40, 0.28);
}
.tdeecalc .tdeecalc__actions .tdeecalc__action-btn[data-action="reset"]:focus-visible {
  background: #9C4128;
  border-color: #9C4128;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(156, 65, 40, 0.28);
}

.tdeecalc .tdeecalc__history-actions button:hover {
  border-color: var(--tc-primary); color: var(--tc-primary-dark); background: rgba(14, 124, 123, 0.10);
}
.tdeecalc .tdeecalc__history-actions button:focus-visible {
  border-color: var(--tc-primary); color: var(--tc-primary-dark); background: rgba(14, 124, 123, 0.10);
}
.tdeecalc .tdeecalc__history-actions button[data-hist-del]:hover {
  border-color: var(--tc-brick); color: #A93326; background: rgba(192, 57, 43, 0.08);
}
.tdeecalc .tdeecalc__history-actions button[data-hist-del]:focus-visible {
  border-color: var(--tc-brick); color: #A93326; background: rgba(192, 57, 43, 0.08);
}
.tdeecalc .tdeecalc__history-clear:hover {
  border-color: var(--tc-brick); background: rgba(192, 57, 43, 0.08); color: #A93326;
}
.tdeecalc .tdeecalc__history-clear:focus-visible {
  border-color: var(--tc-brick); background: rgba(192, 57, 43, 0.08); color: #A93326;
}
.tdeecalc .tdeecalc__history-close:hover { color: var(--tc-ink); }
.tdeecalc .tdeecalc__history-close:focus-visible { color: var(--tc-ink); }

.tdeecalc__action-btn:active { transform: translateY(1px); box-shadow: none; }

/* ---------- History panel (inline — expands in place, never covers the tool) ---------- */
.tdeecalc__history-panel {
  margin-top: 10px;
  background: var(--tc-paper);
  border: 1px solid var(--tc-slate-200);
  border-radius: var(--tc-radius-md);
  padding: 14px;
}
.tdeecalc__history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tdeecalc__history-head h4 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--tc-ink); }
.tdeecalc__history-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--tc-slate-600); line-height: 1; padding: 4px; }
.tdeecalc__history-list {
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.tdeecalc__history-empty { font-size: 13.5px; color: var(--tc-slate-600); margin: 0; }
.tdeecalc__history-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--tc-slate-100); background: var(--tc-card); border-radius: var(--tc-radius-sm); padding: 8px 10px;
}
.tdeecalc__history-item strong { font-size: 13.5px; color: var(--tc-ink); display: block; font-variant-numeric: tabular-nums; }
.tdeecalc__history-item span { font-size: 11.5px; color: var(--tc-slate-600); display: block; margin-top: 2px; }
.tdeecalc__history-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tdeecalc__history-actions button {
  border: 1px solid var(--tc-slate-200); background: var(--tc-paper); border-radius: 6px;
  font-size: 12px; font-weight: 700; padding: 6px 10px; cursor: pointer; color: var(--tc-ink);
}
.tdeecalc__history-actions button[data-hist-del] { color: var(--tc-brick); padding: 6px 10px; }
.tdeecalc__history-clear {
  margin-top: 10px; width: 100%; background: none; border: 1px solid var(--tc-slate-200);
  border-radius: var(--tc-radius-sm); padding: 8px; font-size: 13px; font-weight: 700;
  color: var(--tc-brick); cursor: pointer;
}

/* ---------- Toast ---------- */
.tdeecalc__toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  background: var(--tc-ink); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; box-shadow: var(--tc-shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000; max-width: 90vw; text-align: center;
}
.tdeecalc__toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- Footer note ---------- */
.tdeecalc__privacy-note {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tc-slate-400);
  margin-top: 12px; justify-content: center; text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .tdeecalc__row { grid-template-columns: 1fr 1fr; }
  .tdeecalc__summary-number { font-size: 36px; }
  .tdeecalc__actions { grid-template-columns: minmax(0, 1fr); }
  .tdeecalc__action-btn { width: 100%; justify-content: center; }
}

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