/* Constrained width when embedded in block themes */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 1200px !important;
}

/* Theme variables (primary + chart slice colors can be overridden via shortcode inline styles) */
.tdee-wrap{
  --text:#161616; --text-light:#525252;
  --bg:#f4f4f4; --bg-light:#fff;
  --border:#e5e7eb; --shadow:rgba(0,0,0,.08);

  /* primary (overridden from shortcode) */
  --primary:#0b51ff; --primary-dark:#0b51ff; --primary-light:#0b51ff1a;

  /* chart colors (overridden from shortcode) */
  --mc-protein:#3b82f6; --mc-carbs:#f43f5e; --mc-fat:#fb923c;

  /* slider color (can be set by shortcode slider_color, falls back to primary) */
  --slider: var(--primary);
}

.tdee-wrap *{ box-sizing:border-box; }
.tdee-wrap{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  width:100%; max-width:1200px; margin:24px auto; padding:0 10px;
}

/* ======= Layout: equal-height columns ======= */
.tdee-grid{
  display:grid; grid-template-columns:1fr; gap:24px; align-items:stretch;
}
@media (min-width:1000px){
  .tdee-grid{ grid-template-columns:minmax(340px,420px) 1fr; }
}

/* Both sides fill the grid track; results scroll internally */
.tdee-card,
.tdee-results{
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;            /* allow internal scrollers to shrink */
}

/* Left card (form) */
.tdee-card{
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 1px 3px var(--shadow);
  overflow:hidden;
}
.tdee-form{ padding:22px; display:flex; flex-direction:column; gap:12px; min-height:0; }

/* Right card (results) — internal scroller handles overflow */
.tdee-results{
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--bg-light);
  overflow:hidden;
  box-shadow:0 1px 3px var(--shadow);
}
.tdee-scroll{ flex:1 1 auto; min-height:0; overflow:auto; }

/* Results header */
.tdee-head{
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  color:#fff; padding:18px 22px;
}
.tdee-h-title{ font-weight:900; font-size:18px; }
.tdee-h-sub{ font-size:12px; opacity:.9; }
.tdee-body{ padding:18px 22px; }

/* ======= Unit tabs ======= */
.tdee-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  background:#f3f4f6; padding:6px; border-radius:12px; margin-bottom:6px;
}
.tdee-tab{
  padding:12px 14px; border-radius:10px; font-weight:800;
  background:transparent; border:1px solid transparent; cursor:pointer;
  transition:background .15s,transform .04s,color .15s;
}
.tdee-tab:hover{ background:#fff; }
.tdee-tab:active{ transform:translateY(1px); }
.tdee-tab[aria-selected='true']{
  background:#fff; border-color:var(--border); box-shadow:0 1px 3px var(--shadow);
  color:var(--primary);
}

/* ======= Form fields ======= */
.tdee-form-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:1000px){ .tdee-form-grid{ grid-template-columns:1fr 1fr; gap:16px; } }
.tdee-field{ display:flex; flex-direction:column; }
.tdee-label{ font-size:14px; font-weight:700; margin:6px 0; }
.tdee-label .unit{ opacity:.7; }

.tdee-input,.tdee-select{
  width:100%; padding:18px 20px; border:1px solid #d6d9df; border-radius:28px;
  font-size:18px; background:var(--bg-light);
  box-shadow:inset 0 0 5px rgba(0,0,0,.03);
  transition:border .15s, box-shadow .15s, background .15s;
}
.tdee-input:hover,.tdee-select:hover{ border-color:#cfd5de; }
.tdee-input:focus,.tdee-select:focus{
  outline:0; border-color:var(--primary);
  box-shadow:0 0 0 5px color-mix(in oklab, var(--primary) 18%, transparent);
}
.tdee-select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#111 50%),
    linear-gradient(135deg,#111 50%,transparent 50%),
    linear-gradient(to right,transparent,transparent);
  background-position:calc(100% - 22px) calc(50% + 2px),
                     calc(100% - 17px) calc(50% + 2px),100% 0;
  background-size:5px 5px,5px 5px,2.5em 2.5em;
  background-repeat:no-repeat;
}

/* ======= Modern selectable lists (Activity + Custom Goal) ======= */
.tdee-list{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fff; }
.tdee-list > .tdee-item{
  display:flex; align-items:center; gap:12px;
  padding:16px; border-bottom:1px solid var(--border);
  cursor:pointer; font-size:15px; line-height:1.3;
}
.tdee-list > .tdee-item:last-child{ border-bottom:0; }
.tdee-item .dot{
  width:26px; height:26px; border-radius:50%; border:2px solid #bbb;
  display:inline-grid; place-items:center; flex:0 0 26px;
}
.tdee-item .dot i{
  width:12px; height:12px; background:var(--primary); border-radius:50%;
  opacity:0; transition:opacity .15s;
}
.tdee-item[aria-selected="true"] .dot{ border-color:var(--primary); }
.tdee-item[aria-selected="true"] .dot i{ opacity:1; }
.tdee-item:hover{ background:color-mix(in oklab, var(--primary) 6%, transparent); }

/* ======= Goal quick chips ======= */
.goal-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 8px; }
.goal-chip{
  background:#fff; font-size:12px;border:1px solid var(--border); border-radius:14px;
  padding:14px; font-weight:900; cursor:pointer; transition:box-shadow .15s;
  text-align:center;
}
.goal-chip[aria-selected="true"]{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
.goal-toggle{
  display:flex; align-items:center; gap:6px; font-weight:800; font-size:13px;
  background:#fff; border:1px solid var(--border); padding:6px 10px; border-radius:999px; cursor:pointer;
}
.goal-toggle input{ accent-color:var(--primary); }

/* ======= Action buttons (under Goal) ======= */
.tdee-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.tdee-btn{
  border:0; padding:16px 24px; border-radius:999px; font-weight:900;
  cursor:pointer; transition:transform .04s, filter .15s, background .15s;
}
.tdee-btn:active{ transform:translateY(1px); }
.tdee-primary{ background:var(--primary); color:#fff; }
.tdee-primary:hover{ filter:brightness(.98); background:var(--primary-dark); }
.tdee-ghost{ background:#f3f4f6; }

/* ======= Results bits ======= */
.tdee-maint{
  margin:16px 0 20px; padding:18px;
  background:linear-gradient(to right, color-mix(in oklab, var(--primary) 8%, transparent), color-mix(in oklab, var(--primary-light) 8%, transparent));
  border-radius:14px; text-align:center;
}
.tdee-maint .big{
  font-size:36px; font-weight:900;
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.tdee-maint .sub{ color:var(--text-light); margin-top:6px; font-size:14px; }

.tdee-mac{ border:1px solid var(--border); border-radius:12px; padding:14px; background:#fff; margin-bottom:12px; }
.tdee-m-title{ font-size:15px; font-weight:800; margin-bottom:8px; }
.m-vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center; padding:12px 6px; }
.m-vals .val{ font-size:22px; font-weight:900; color:var(--primary); }
.m-vals .cap{ color:var(--text-light); font-size:13px; }

/* ======= Diet tabs ======= */
.diet-box{ border:1px solid var(--border); border-radius:12px; padding:14px; background:#fff; margin:12px 0; }
.diet-title{ font-weight:800; margin-bottom:8px; }
.m-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; background:#f3f4f6; padding:6px; border-radius:10px; }
.m-tab{
  border:1px solid var(--border); background:#fff; padding:8px; border-radius:8px;
  cursor:pointer; font-weight:800; transition:background .15s, transform .04s; font-size:14px; text-align:center;
}
.m-tab:hover{ background:#fff; }
/* ACTIVE: primary background + white text */
.m-tab[aria-selected='true']{
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}

/* ======= Custom sliders (percent | slider | label with dot) ======= */
.custom-sliders{ margin-top:10px; display:grid; gap:10px; }
.cs-row{
  display:grid;
  grid-template-columns: 90px 1fr auto;
  grid-template-areas: "val input key";
  align-items:center; gap:14px;
}
.cs-val{
  grid-area: val;
  font-weight:900; text-align:center;
  font-size:clamp(18px, 2.2vw, 28px); line-height:1;
}
.cs-key{
  grid-area: key; font-weight:900; display:inline-flex; align-items:center;
  font-size:clamp(18px, 1.8vw, 28px); gap:12px;
}
.cs-key::before{
  content:''; width:12px; height:12px; border-radius:999px;
  background:var(--dot, #ddd);
  display:inline-block;
}
.cs-note{ font-size:12px; color:#64748b; }

.custom-sliders input[type="range"]{
  grid-area: input;
  width:100%; height:6px; border-radius:999px;
  background:#e5e7eb; outline:0;
  -webkit-appearance:none; appearance:none;
  accent-color:var(--slider); /* general */
}
/* WebKit track/thumb */
.custom-sliders input[type="range"]::-webkit-slider-runnable-track{
  height:6px; background:#e5e7eb; border-radius:999px;
}
.custom-sliders input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--slider); border:2px solid #fff;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--slider) 30%, transparent);
  margin-top:-8px; /* center on track */
}
/* Firefox track/progress/thumb */
.custom-sliders input[type="range"]::-moz-range-track{
  height:6px; background:#e5e7eb; border-radius:999px;
}
.custom-sliders input[type="range"]::-moz-range-progress{
  height:6px; background:var(--slider); border-radius:999px;
}
.custom-sliders input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--slider); border:2px solid #fff;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--slider) 30%, transparent);
}

/* ======= Charts ======= */
.chart-wrap{ border:1px solid var(--border); border-radius:12px; padding:14px; background:#fff; margin-top:12px; }
.chart-wrap .canvas-hold{ position:relative; width:100%; height:260px; }
@media (max-width:640px){ .chart-wrap .canvas-hold{ height:200px; } }

.chart-flex{ display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:center; }
@media (max-width:900px){ .chart-flex{ grid-template-columns:1fr; } }

.chart-info{ border:1px solid var(--border); border-radius:12px; padding:14px; background:#fff; }
.ci-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 6px; }
.ci-key::before{
  content:''; width:12px; height:12px; border-radius:999px;
  background:var(--dot, #ddd); display:inline-block; margin-inline-end:8px; vertical-align:middle;
}
.ci-key{ font-weight:800; color:#111; }
.ci-val{ color:#475569; font-weight:700; font-size:14px; }

/* ======= Protein level chips (in results) ======= */
.protein-tabs{
  display:flex; gap:20px; align-items:center;
  background:#f3f4f6; padding:22px; border-radius:24px;
}
.protein-tab{
  flex:1; background:#fff; border:1px solid var(--border); border-radius:20px;
  padding:20px; font-weight:900; cursor:pointer;
  transition:transform .04s, box-shadow .15s, background .15s, border-color .15s; text-align:center;
}
.protein-tab:hover{ background:#fff; box-shadow:0 6px 16px rgba(16,24,40,.06); }
.protein-tab[aria-selected="true"]{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
.protein-tab[disabled]{ opacity:.45; cursor:not-allowed; }

/* ======= Notes ======= */
.tdee-note{
  border:1px solid var(--border); border-radius:12px; padding:14px 18px;
  background:#fff; font-size:14px; line-height:1.5; margin-top:12px; color:var(--text-light);
}
.tdee-note strong{ color:var(--text); }

/* ======= RTL tweaks ======= */
[dir='rtl'] .ci-row{ flex-direction:row-reverse; }
[dir='rtl'] .ci-key::before{ margin-inline-start:8px; margin-inline-end:0; }
[dir='rtl'] .cs-row{
  grid-template-columns: auto 1fr 90px;
  grid-template-areas: "key input val";
}
[dir='rtl'] .cs-key::before{ margin-inline-start:0; margin-inline-end:0; }

/* ======= Focus visibility ======= */
.tdee-wrap :focus-visible{
  outline:3px solid color-mix(in oklab, var(--primary) 50%, transparent);
  outline-offset:2px;
}

/* ======= Reduced motion ======= */
@media (prefers-reduced-motion: reduce) {
  .goal-chip, .tdee-tab, .m-tab, .protein-tab { transition:none !important; }
}

/* Hide results until user presses Calculate */
.tdee-results[data-hidden="1"]{ display:none; }

/* Inline field error */
.tdee-error{
  display:none;
  margin-top:6px;
  font-size:14px;
  color:#d93025;
}
.tdee-input.is-invalid{
  border-color:#d93025!important;
  box-shadow:0 0 0 3px rgba(217,48,37,.15)!important;
}


/* === Mobile stack for custom sliders (label, slider, big % under) === */
@media (max-width: 640px) {
  .tdee-wrap .custom-sliders { gap: 16px; }

  .tdee-wrap .cs-row{
    /* stack the three pieces vertically */
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-items: stretch;
    row-gap: 8px;
  }

  .tdee-wrap .cs-key{
    order: 1;
    font-size: 18px;
    line-height: 1.2;
  }

  .tdee-wrap .cs-row input[type="range"]{
    order: 2;
    width: 100%;
  }

  .tdee-wrap .cs-val{
    order: 3;
    /* big, bold percentage under the slider */
    text-align: left;
    font-size: clamp(18px, 6.2vw, 28px);
    line-height: 1;
    font-weight: 900;
    margin-top: 2px;
  }

  /* In RTL, align % to the right on mobile */
  [dir="rtl"] .tdee-wrap .cs-val{ text-align: right; }
}

/* === Protein level container spacing (global) === */
.tdee-wrap .protein-tabs{
  gap: 5px;
  padding: 8px;
}

/* Smaller pills (global) */
.tdee-wrap .protein-tab{
  padding: 10px;
}

/* ======= Share / Copy tools ======= */
.tdee-tools{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.tdee-tool-btn{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:14px;
  padding:14px 18px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 1px 2px var(--shadow);
  transition:background .15s, box-shadow .15s, border-color .15s, transform .04s;
}

.tdee-tool-btn:hover{
  background:#f9fafb;
  border-color:#d4d7de;
  box-shadow:0 6px 16px rgba(16,24,40,.08);
}

.tdee-tool-btn:active{
  transform:translateY(1px);
}

.tdee-tool-btn:focus-visible{
  outline:3px solid color-mix(in oklab, var(--primary) 45%, transparent);
  outline-offset:2px;
}

/* message under the buttons */
.tdee-tools-msg{
  margin-top:6px;
  font-size:13px;
  color:var(--text-light);
  min-height:1.2em; /* keeps layout from jumping */
}

/* RTL – nothing fancy needed, just mirror the gaps if desired */
[dir='rtl'] .tdee-tools{ justify-content:flex-start; }