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

/* Design tokens */
.pc2.container.tdee-wrap{
  --primary: #0b51ff; /* overridable via shortcode color= */
  --primary-400: color-mix(in oklab, var(--primary) 75%, white);
  --primary-500: var(--primary);
  --primary-light: color-mix(in oklab, var(--primary) 65%, white);
  --primary-dark: color-mix(in oklab, var(--primary) 70%, black);

  --text:#161616; --text-light:#525252;
  --bg:#f4f4f4; --bg-light:#ffffff;
  --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-wrap *{box-sizing:border-box}

/* Layout */
.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; min-height:575px}
.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}

/* Segmented controls (Units, Meals, Protein) */
.segmented.tdee-tabs,
.segmented.m-meals,
.segmented.m-protein{
  display:grid; gap:8px; background:#f3f4f6; padding:6px; border-radius:12px; margin-bottom:16px
}
.segmented.tdee-tabs{grid-template-columns:1fr 1fr}
.segmented.m-meals{grid-template-columns:repeat(4,1fr)}
.segmented.m-protein{grid-template-columns:repeat(3,1fr)}

.segmented.tdee-tabs input,
.segmented.m-meals input,
.segmented.m-protein input{display:none}

.segmented.tdee-tabs label,
.segmented.m-meals label,
.segmented.m-protein label{
  padding:14px 16px; border-radius:10px; font-weight:800; background:transparent;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background .15s,transform .04s,color .15s, box-shadow .15s
}
.segmented.tdee-tabs label:hover,
.segmented.m-meals label:hover,
.segmented.m-protein label:hover{background:#fff}
.segmented.tdee-tabs label:active,
.segmented.m-meals label:active,
.segmented.m-protein label:active{transform:translateY(1px)}
.segmented.tdee-tabs input:checked + label,
.segmented.m-meals input:checked + label,
.segmented.m-protein input:checked + label{
  background:#fff; border-color:var(--border); box-shadow:0 1px 3px var(--shadow); color:var(--primary)
}

/* Form grid */
.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}

/* Inputs */
.input, .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;
}
.input:hover,.tdee-input:hover,.tdee-select:hover{border-color:#cfd5de}
.input:focus,.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)
}

/* Custom select arrow (LTR by default) */
.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;
  padding-right:2.5em;
}

/* RTL: move arrow to the LEFT */
[dir='rtl'] .tdee-select{
  background-position:
    22px calc(50% + 2px),
    17px calc(50% + 2px),
    0 0;
  padding-left:2.5em;
  padding-right:20px;
}

/* Hints & errors */
.tdee-hint{font-size:12px;color:#6b7280;margin:6px 2px 0}
.tdee-error{
  color:#d93025; font-size:10px; margin:6px 2px 0; display:none; text-align:center;
}
.tdee-input.is-invalid{border-color:#d93025!important;box-shadow:0 0 0 3px rgba(217,48,37,.15)!important}

/* Buttons */
.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:#111; color:#fff}
.tdee-primary:hover{filter:brightness(.98)}
.tdee-ghost{background:#f3f4f6}

/* Right column (results) */
.tdee-results{border:1px solid var(--border); border-radius:24px; background:var(--bg-light); overflow:hidden; content-visibility:auto; contain-intrinsic-size:600px 575px;}
.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}

/* Protein result slabs - use PRIMARY color */
.result .slab{
  background:var(--primary); color:#fff; border-radius:18px; padding:20px; text-align:center; margin:10px 0;
}
.result .slab .value{ font-weight:800; font-size: clamp(30px, 4.2vw, 48px); }
.result .slab .unit{ opacity:.9; }

/* Pregnancy checkbox */
.tdee-field.pregnancy .checkbox input[type="checkbox"] {
    height: 24px ! IMPORTANT;
    align-items: center;
    position: relative;
    top: 5px;
}

/* Disclaimer block */
.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'] .tdee-form-grid { direction: rtl; }
[dir='rtl'] .tdee-label, [dir='rtl'] .tdee-hint { text-align: right; }
[dir='rtl'] .tdee-actions { justify-content: flex-end; }

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

/* Responsive collapse to one column */
@media (max-width: 980px) {
  .pc2.container.tdee-wrap .tdee-grid { grid-template-columns: 1fr; }
}

/* Center labels inside segmented tabs explicitly (requested) */
.segmented.tdee-tabs label { text-align:center; }