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

.tdee-wrap *{box-sizing:border-box}
.tdee-wrap{
  --text:#161616; --text-light:#525252; --bg:#f4f4f4; --bg-light:#fff; --border:#e5e7eb; --shadow:rgba(0,0,0,.08);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  width:100%; max-width:1200px; margin:24px auto; padding:0 10px;
}
.tdee-grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:start}
@media(min-width:1000px){ .tdee-grid{ grid-template-columns:minmax(340px,420px) 1fr } }

.tdee-card,.tdee-results{min-width:0}
.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}
.tdee-title{font-size:14px; font-weight:800; color:#111; margin-bottom:10px}

.tdee-tabs{display:grid; grid-template-columns:1fr 1fr; gap:8px; background:#f3f4f6; padding:6px; border-radius:12px; margin-bottom:16px}
.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)}

.tdee-form-grid{display:grid; grid-template-columns:1fr; gap:14px}
@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-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-400); box-shadow:0 0 0 5px color-mix(in oklab, var(--primary-500) 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}
.tdee-hint{font-size:12px;color:#6b7280;margin:6px 2px 0;display:none}

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

.tdee-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.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}

.tdee-results{height: 515px;border:1px solid var(--border); border-radius:24px; background:var(--bg-light); overflow:hidden; content-visibility: auto;contain-intrinsic-size: 600px 515px;}
.tdee-scroll{height:100%; overflow:auto}

.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}

.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-break{border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px}
.tdee-b-title{color:var(--primary-dark); font-weight:800; margin-bottom:8px; font-size:18px}
.tdee-b-rows{display:grid; gap:6px}
.tdee-b-row{display:flex; justify-content:space-between; padding:8px 10px; border-radius:8px; transition:background .15s; font-size:16px; cursor:default}
.tdee-b-row[role="button"]{cursor:pointer}
.tdee-b-row:hover{background:color-mix(in oklab, var(--primary) 8%, transparent)}

.tdee-goals{display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:8px}
@media(min-width:700px){ .tdee-goals{grid-template-columns:repeat(2,1fr)} }
.goal{background:#fff; border:1px solid #e7ebf1; border-radius:18px; padding:16px 18px; transition:box-shadow .15s, transform .06s, background .15s, border-color .15s; text-align:center; cursor:pointer}
.goal:hover{box-shadow:0 8px 28px rgba(16,24,40,.08); transform:translateY(-1px)}
.goal .lbl{color:var(--primary-dark); font-size:18px; font-weight:900; margin:0 0 6px}
.goal .meta{color:#667085; font-size:13px; margin-bottom:6px}
.goal .cal{font-size:16px; font-weight:900; color:#0f172a}
.goal-reset{margin:6px 0 14px; padding:10px 14px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:800}
.goal-reset:hover{background:#f8fafc}
.goal-reset:focus-visible{outline:3px solid var(--primary); outline-offset:2px}


.tdee-mac{border:1px solid var(--border); border-radius:12px; padding:14px}
.tdee-m-title{font-size:15px; 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}
.m-tab:hover{background:#fff}
.m-tab:active{transform:translateY(1px)}
.m-tab[aria-selected='true']{background:var(--primary-light); color:#fff; border-color:var(--primary)}
.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}

/* TDEE note style */
.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);
}

.tdee-b-row[aria-selected='true'] {
  background: color-mix(in oklab, var(--primary) 8%, transparent);

}
/* Active highlight for activity level list */
.tdee-results .active {
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
    color: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Optional: subtle shadow for depth */
.tdee-results .active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Active highlight for goal cards */
.tdee-goal-card.active {
    background-color: color-mix(in oklab, var(--primary) 8%, transparent)
    border-color: color-mix(in oklab, var(--primary) 8%, transparent)
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Make headings and numbers inside active card white */
.tdee-goal-card.active h3,
.tdee-goal-card.active p {
    color: #fff;
}
.tdee-goal-card.active {
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
  border-color: var(--primary-dark);
    box-shadow: 0 0 0 2px rgba(11, 81, 255, 0.2); 
}

.goal.active {
  background-color:  color-mix(in oklab, var(--primary) 8%, transparent);
  border-color: var(--primary-dark);
}


.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} }

.tdee-tools{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.tdee-tool-btn{border:1px solid var(--border); background:#fff; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer}
.tdee-tools-msg{font-size:13px; color:#475569; margin-top:6px}

/* RTL tweak */
[dir='rtl'] .tdee-b-row{flex-direction:row-reverse}

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

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