/* =====================================================
   Reef Chemistry Calculator — Stylesheet v1.1
   Three-panel layout: Alk | Ca | Mg
   ===================================================== */

/* ── Custom Properties ── */
.reef-calc-wrapper {
    /* Global palette */
    --rc-navy:         #0A3A56;
    --rc-navy-dark:    #062840;
    --rc-surface:      #FFFFFF;
    --rc-bg:           #EEF5F9;         /* slightly more tinted than before */
    --rc-border:       #C8DCE8;
    --rc-text:         #1A202C;
    --rc-text-muted:   #3D5B6A;         /* was #546E7A — darker for small-text contrast */
    --rc-radius:       14px;
    --rc-radius-sm:    9px;
    --rc-shadow:       0 8px 40px rgba(10,58,86,0.14);
    --rc-shadow-sm:    0 2px 12px rgba(10,58,86,0.09);
    --rc-shadow-card:  0 2px 8px rgba(10,58,86,0.08), 0 0 0 1px rgba(10,58,86,0.06);
    --rc-transition:   0.2s ease;

    /* Alkalinity — Teal */
    --alk-accent:      #0E9BB5;
    --alk-dark:        #076680;
    --alk-light:       #D6EFF6;         /* more vivid tint */
    --alk-border:      #8DCDE0;

    /* Calcium — Warm Coral/Orange */
    --ca-accent:       #E06830;
    --ca-dark:         #A84010;
    --ca-light:        #FCE9D8;         /* more vivid tint */
    --ca-border:       #EAAD80;

    /* Magnesium — Purple */
    --mg-accent:       #7B5BD2;
    --mg-dark:         #4E3398;
    --mg-light:        #EAE2FD;         /* more vivid tint */
    --mg-border:       #B8A4E8;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    max-width: 1080px;
    margin: 0 auto 2.5rem;
    border-radius: var(--rc-radius);
    overflow: hidden;
    box-shadow: var(--rc-shadow);
    background: var(--rc-bg);
}

.reef-calc-wrapper *,
.reef-calc-wrapper *::before,
.reef-calc-wrapper *::after {
    box-sizing: inherit;
}

/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */
.reef-calc-header {
    background: linear-gradient(135deg, var(--rc-navy-dark) 0%, #0D6E8A 100%);
    padding: 1.6rem 2rem;
    color: white;
}

.reef-calc-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reef-calc-logo {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    opacity: 0.95;
}

.reef-calc-title {
    margin: 0 0 0.2rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF !important;   /* !important overrides WordPress theme h2 colour */
    line-height: 1.15;
}

.reef-calc-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.72);
    font-weight: 400;
}

/* ─────────────────────────────────────────
   SHARED VOLUME BAR
   Full-width strip: label-left, input-right
───────────────────────────────────────── */
.reef-calc-volume-bar {
    /* Same dark→light direction as header for visual continuity */
    background: linear-gradient(135deg, #0D6E8A 0%, var(--rc-navy) 100%);
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}

.volume-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.volume-bar-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.volume-icon {
    width: 20px;
    height: 20px;
    color: rgba(255,255,255,0.80);
    flex-shrink: 0;
}

.volume-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    letter-spacing: 0.01em;
    cursor: default;
    line-height: 1.2;
}

.volume-label small {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255,255,255,0.65);   /* improved from 0.50 */
    letter-spacing: 0.02em;
    margin-top: 0.1rem;
}

.volume-input-group {
    display: flex;
    flex: 0 0 auto;
    width: 300px;            /* wider — gives number input breathing room */
    border-radius: var(--rc-radius-sm);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}

.volume-input {
    flex: 1 1 140px;         /* grows but won't collapse below 140px */
    min-width: 140px;
    padding: 0.7rem 1rem;    /* slightly more padding = taller, more clickable */
    font-size: 1.05rem;      /* slightly larger text */
    font-family: inherit;
    font-weight: 600;
    color: var(--rc-text);
    background: #FFFFFF;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
}

.volume-input::-webkit-outer-spin-button,
.volume-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.volume-input:focus {
    background: #F0F9FF;
    box-shadow: inset 0 0 0 2px rgba(14,155,181,0.55);
}

/* Keyboard focus — accessible outline */
.volume-input:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}

.volume-unit-select {
    flex: 0 0 115px;         /* fixed width — Gallons/Liters always fits */
    width: 115px;
    padding: 0.7rem 1.8rem 0.7rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--rc-navy-dark);
    background: #D8EAF2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%230A3A56' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border-left: 1px solid rgba(10,58,86,0.15);
}

.volume-unit-select:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────
   THREE PANELS GRID — fluid card approach
   auto-fit + minmax lets it flow naturally
   inside any WordPress theme content width.
───────────────────────────────────────── */
.reef-calc-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: var(--rc-bg);
}

/* ─────────────────────────────────────────
   INDIVIDUAL PANEL — Card style
───────────────────────────────────────── */
.calc-panel {
    display: flex;
    flex-direction: column;
    border-radius: var(--rc-radius);
    overflow: hidden;
    box-shadow: var(--rc-shadow-card);
    transition: box-shadow var(--rc-transition);
}

.calc-panel:hover {
    box-shadow: 0 4px 20px rgba(10,58,86,0.13), 0 0 0 1px rgba(10,58,86,0.08);
}

/* ── Panel Header ── */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.3rem;
    color: white;
    gap: 0.75rem;
}

.panel-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.panel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;             /* slightly larger */
    height: 46px;
    border-radius: 11px;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    background: rgba(255,255,255,0.24);
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.35);
}

.panel-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.panel-subtitle {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.82;           /* was 0.70 — improved readability */
    letter-spacing: 0.02em;
    margin-top: 0.1rem;
}

.panel-target-hint {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.20);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ── Panel Colors ── */
.panel-alk .panel-header {
    background: linear-gradient(135deg, var(--alk-dark) 0%, var(--alk-accent) 100%);
}
.panel-ca .panel-header {
    background: linear-gradient(135deg, var(--ca-dark) 0%, var(--ca-accent) 100%);
}
.panel-mg .panel-header {
    background: linear-gradient(135deg, var(--mg-dark) 0%, var(--mg-accent) 100%);
}

/* Panel body background */
.panel-alk { background: var(--alk-light); }
.panel-ca  { background: var(--ca-light);  }
.panel-mg  { background: var(--mg-light);  }

/* ── Colored accent strip between header and body ── */
.panel-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

/* 3px accent bar at top of body = clear header→body delineation */
.panel-alk .panel-body { border-top: 3px solid var(--alk-accent); }
.panel-ca  .panel-body { border-top: 3px solid var(--ca-accent);  }
.panel-mg  .panel-body { border-top: 3px solid var(--mg-accent);  }

.panel-body-inner {
    padding: 1.2rem 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ─────────────────────────────────────────
   FIELD ROWS
───────────────────────────────────────── */
.field-row {
    margin-bottom: 0.9rem;
}

.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rc-text-muted);  /* now #3D5B6A — improved contrast */
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.field-input {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem;   /* slightly taller for touch targets */
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--rc-text);
    background: var(--rc-surface);
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    transition: border-color var(--rc-transition), box-shadow var(--rc-transition);
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
}

.field-input::-webkit-outer-spin-button,
.field-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.field-input:focus {
    outline: none;
}

.field-input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.field-input::placeholder {
    color: #AAC4D2;
    font-weight: 400;
}

/* Focus ring colour per panel */
.panel-alk .field-input:focus { border-color: var(--alk-accent); box-shadow: 0 0 0 3px rgba(14,155,181,0.18); }
.panel-ca  .field-input:focus { border-color: var(--ca-accent);  box-shadow: 0 0 0 3px rgba(224,104,48,0.16); }
.panel-mg  .field-input:focus { border-color: var(--mg-accent);  box-shadow: 0 0 0 3px rgba(123,91,210,0.16); }

.field-select {
    display: block;
    padding: 0.65rem 2.2rem 0.65rem 0.85rem;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--rc-text);
    background: var(--rc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%233D5B6A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.65rem center;
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--rc-transition), box-shadow var(--rc-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-select:focus {
    outline: none;
}

.field-select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.panel-alk .field-select:focus { border-color: var(--alk-accent); box-shadow: 0 0 0 3px rgba(14,155,181,0.18); }
.panel-ca  .field-select:focus { border-color: var(--ca-accent);  box-shadow: 0 0 0 3px rgba(224,104,48,0.16); }
.panel-mg  .field-select:focus { border-color: var(--mg-accent);  box-shadow: 0 0 0 3px rgba(123,91,210,0.16); }

.field-select.full-width {
    width: 100%;
}

/* ── Input Combos ── */
.input-with-select {
    display: flex;
}

.input-with-select .field-input {
    flex: 1 1 70px;          /* grows but won't collapse below 70px */
    min-width: 70px;
    border-radius: var(--rc-radius-sm) 0 0 var(--rc-radius-sm);
    border-right: none;
}

/* input-with-select .field-select no longer used (replaced by .unit-seg) */

/* ── Alkalinity unit segmented control ── */
.unit-seg {
    display: flex;
    margin-top: 0.4rem;
    border-radius: var(--rc-radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--rc-border);
    width: 100%;
}

.unit-seg-btn {
    flex: 1;
    padding: 0.32rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.03em;
    background: var(--rc-surface);
    color: var(--rc-text-muted);
    border: none;
    border-right: 1px solid var(--rc-border);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

.unit-seg-btn:last-child {
    border-right: none;
}

.unit-seg-btn:hover {
    background: var(--alk-light);
    color: var(--alk-dark);
}

.unit-seg-btn.active {
    background: var(--alk-accent);
    color: #FFFFFF;
}

.input-with-badge {
    position: relative;
}

.input-with-badge .field-input {
    padding-right: 2.8rem;   /* less space reserved for the badge */
}

.input-badge {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--rc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
    user-select: none;
}

/* ── Current → Desired connector arrow ── */
.field-connector {
    text-align: center;
    color: var(--rc-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: -0.25rem 0 0.5rem;
    opacity: 0.6;
}

/* ── Product Note ── */
.product-note {
    margin: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 0 var(--rc-radius-sm) var(--rc-radius-sm) 0;
    font-size: 0.79rem;
    line-height: 1.5;
}

.panel-alk .product-note { background: #CCE9F4; border-left: 3px solid var(--alk-accent); color: #05536A; }
.panel-ca  .product-note { background: #FAEADE; border-left: 3px solid var(--ca-accent);  color: #663010; }
.panel-mg  .product-note { background: #E8E0FB; border-left: 3px solid var(--mg-accent);  color: #382068; }

/* ─────────────────────────────────────────
   CALCULATE BUTTONS
───────────────────────────────────────── */
.calc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.82rem 1.2rem;   /* slightly taller than before */
    color: white;
    border: none;
    border-radius: var(--rc-radius-sm);
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter var(--rc-transition), transform var(--rc-transition), box-shadow var(--rc-transition);
}

.calc-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.90;
}

.calc-btn:hover  { filter: brightness(1.10); transform: translateY(-1px); }
.calc-btn:active { filter: brightness(0.95); transform: translateY(0); box-shadow: none !important; }
.calc-btn:focus-visible { outline: 2px solid white; outline-offset: 2px; }

.btn-alk { background: linear-gradient(135deg, var(--alk-dark) 0%, var(--alk-accent) 100%); box-shadow: 0 3px 14px rgba(14,155,181,0.35); }
.btn-ca  { background: linear-gradient(135deg, var(--ca-dark)  0%, var(--ca-accent)  100%); box-shadow: 0 3px 14px rgba(224,104,48,0.32); }
.btn-mg  { background: linear-gradient(135deg, var(--mg-dark)  0%, var(--mg-accent)  100%); box-shadow: 0 3px 14px rgba(123,91,210,0.32); }

/* ─────────────────────────────────────────
   RESULT CARD
───────────────────────────────────────── */
.calc-result {
    margin-top: 1rem;
    background: var(--rc-surface);
    border-radius: var(--rc-radius-sm);
    padding: 1.1rem 1.15rem;
    box-shadow: var(--rc-shadow-sm);
    animation: rc-fade-in 0.28s ease;
    /* Colored top accent bar connects result to its panel */
    border-top: 3px solid transparent;
}

.panel-alk .calc-result { border: 1.5px solid var(--alk-border); border-top: 3px solid var(--alk-accent); }
.panel-ca  .calc-result { border: 1.5px solid var(--ca-border);  border-top: 3px solid var(--ca-accent);  }
.panel-mg  .calc-result { border: 1.5px solid var(--mg-border);  border-top: 3px solid var(--mg-accent);  }

.calc-result.hidden {
    display: none;
}

@keyframes rc-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Result internals */
.result-heading {
    margin: 0 0 0.2rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--rc-text-muted);
}

.result-product-name {
    margin: 0 0 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--rc-navy);
    line-height: 1.35;
}

/* Primary dose block */
.result-dose-primary {
    border-radius: var(--rc-radius-sm);
    padding: 0.9rem 1rem;
    color: white;
    margin-bottom: 0.75rem;
    text-align: center;
}

.panel-alk .result-dose-primary { background: linear-gradient(135deg, var(--alk-dark) 0%, var(--alk-accent) 100%); }
.panel-ca  .result-dose-primary { background: linear-gradient(135deg, var(--ca-dark)  0%, var(--ca-accent)  100%); }
.panel-mg  .result-dose-primary { background: linear-gradient(135deg, var(--mg-dark)  0%, var(--mg-accent)  100%); }

.result-dose-value {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.result-dose-unit {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.82;
    margin-left: 0.25rem;
}

.result-dose-label {
    font-size: 0.73rem;
    opacity: 0.75;           /* was 0.65 — improved readability */
    margin-top: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Conversions grid */
.result-conversions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.result-conv-item {
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);  /* was hardcoded 7px */
    padding: 0.45rem 0.6rem;
    text-align: center;
}

.result-conv-val {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rc-navy);
}

.result-conv-lbl {
    display: block;
    font-size: 0.7rem;          /* was 0.65rem — improved readability */
    color: var(--rc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.1rem;
}

/* Balanced parameter tip */
.result-balanced {
    border-radius: var(--rc-radius-sm);  /* was hardcoded 7px */
    padding: 0.65rem 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.panel-alk .result-balanced { background: rgba(14,155,181,0.09);  border: 1px solid rgba(14,155,181,0.24); }
.panel-ca  .result-balanced { background: rgba(224,104,48,0.09);  border: 1px solid rgba(224,104,48,0.24); }
.panel-mg  .result-balanced { background: rgba(123,91,210,0.09);  border: 1px solid rgba(123,91,210,0.24); }

.result-balanced-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
    margin-top: 0.05rem;
}

.result-balanced-text {
    font-size: 0.79rem;
    line-height: 1.5;
}

.panel-alk .result-balanced-text { color: var(--alk-dark); }
.panel-ca  .result-balanced-text { color: var(--ca-dark);  }
.panel-mg  .result-balanced-text { color: var(--mg-dark);  }

.result-balanced-text strong {
    font-weight: 700;
    display: block;
    margin-bottom: 0.08rem;
}

/* Warning */
.result-warning {
    background: #FFF8E1;
    border: 1px solid #F0C842;
    border-radius: var(--rc-radius-sm);  /* was hardcoded 7px */
    padding: 0.65rem 0.85rem;
    font-size: 0.79rem;
    color: #6B4F00;
    margin-top: 0.6rem;
    line-height: 1.5;
}

/* Error */
.result-error {
    background: #FFF2F2;
    border: 1px solid #F5B8B8;
    border-radius: var(--rc-radius-sm);  /* was hardcoded 7px */
    padding: 0.85rem;
    color: #8B1A1A;
    font-size: 0.83rem;
    line-height: 1.5;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.reef-calc-footer {
    background: var(--rc-navy-dark);
    padding: 0.75rem 2rem;
    text-align: center;
}

.reef-calc-footer p {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.50);
    letter-spacing: 0.02em;
    line-height: 1.6;
}

/* ─────────────────────────────────────────
   OPTGROUP STYLING
───────────────────────────────────────── */
.field-select optgroup {
    font-weight: 700;
    color: var(--rc-navy);
    font-size: 0.78rem;
}

.field-select option {
    font-weight: 400;
    color: var(--rc-text);
}

/* ─────────────────────────────────────────
   RESPONSIVE — Fluid grid
   Uses auto-fit so panels flow naturally
   regardless of the WP theme's content width.
   Minimum panel width: 220px means:
     ≥ 700px  → 3 columns
     460–699px → 2 columns (panel-3 spans full width)
     < 460px  → 1 column
───────────────────────────────────────── */
/* When the grid wraps to 2 columns, make Mg span both */
@media (max-width: 699px) {
    .reef-calc-panels {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    .calc-panel:nth-child(3) {
        grid-column: 1 / -1;
    }
    .volume-input-group { width: 260px; }
    .volume-input       { min-width: 110px; }
    .panel-target-hint  { display: none; }
}

/* Single-column stacked layout */
@media (max-width: 459px) {
    .reef-calc-panels {
        grid-template-columns: 1fr;
        padding: 0.6rem;
        gap: 0.6rem;
    }
    .calc-panel:nth-child(3) {
        grid-column: auto;
    }
    .reef-calc-header       { padding: 1.1rem 1rem; }
    .reef-calc-volume-bar   { padding: 0.8rem 1rem; }
    .volume-bar-inner       { flex-wrap: wrap; gap: 0.55rem; }
    .volume-bar-left        { flex: 1 1 auto; }
    .volume-input-group     { width: 100%; flex: 1 1 100%; min-width: 0; }
    .volume-input           { min-width: 90px; }
    .panel-body-inner       { padding: 0.9rem 1rem 1.1rem; }
    .reef-calc-title        { font-size: 1.15rem; }
    .reef-calc-footer       { padding: 0.6rem 1rem; }
    .result-dose-value      { font-size: 1.85rem; }
    .result-conversions     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 350px) {
    .reef-calc-title    { font-size: 1rem; }
    .reef-calc-subtitle { font-size: 0.77rem; }
    .reef-calc-logo     { width: 34px; height: 34px; }
}

/* ═════════════════════════════════════════════════
   TRACE ELEMENT DOSING SECTION
═════════════════════════════════════════════════ */
.reef-calc-trace {
    /* Emerald green — clearly distinct from the ocean-blue header
       and the three teal/orange/purple panels above */
    --trace-accent:  #1B8A5A;
    --trace-dark:    #0D5C38;
    --trace-light:   #E6F6EE;
    --trace-border:  #8ECFB0;
    --trace-surface: #FFFFFF;
    margin: 0 1rem 1rem;
    border-radius: var(--rc-radius);
    overflow: hidden;
    box-shadow: var(--rc-shadow-card);
}

/* ── Trace Header ── */
.trace-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, var(--trace-dark) 0%, var(--trace-accent) 100%);
    color: white;
}

.trace-header-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    opacity: 0.95;
}

.trace-header-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: white !important;
    line-height: 1.2;
}

.trace-header-subtitle {
    display: block;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.72);
    margin-top: 0.15rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ── Trace Body ── */
.trace-body {
    padding: 1.2rem 1.4rem 1.5rem;
    background: var(--trace-light);
    border-top: 3px solid var(--trace-accent);
}

/* ── Two-column grid ── */
.trace-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 1.5rem;
    align-items: start;
}

/* ── Element info card ── */
.trace-element-card {
    margin-top: 0.75rem;
    background: var(--trace-surface);
    border: 1.5px solid var(--trace-border);
    border-top: 3px solid var(--trace-accent);
    border-radius: var(--rc-radius-sm);
    padding: 0.9rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    box-shadow: var(--rc-shadow-sm);
    animation: rc-fade-in 0.25s ease;
}

.trace-element-card.hidden { display: none; }

.trace-el-symbol {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--trace-dark) 0%, var(--trace-accent) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.trace-el-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--trace-dark);
    margin-bottom: 0.2rem;
}

.trace-el-target {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--trace-accent);
    margin-bottom: 0.1rem;
}

.trace-el-range {
    font-size: 0.72rem;
    color: var(--rc-text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.trace-el-note {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #2C5040;
    margin: 0;
    padding: 0.4rem 0.6rem;
    background: rgba(27,138,90,0.08);
    border-left: 2px solid var(--trace-accent);
    border-radius: 0 4px 4px 0;
}

/* ── Two inputs side by side ── */
.trace-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ── Field label inside trace (slightly different contrast) ── */
.trace-label {
    color: var(--rc-text-muted);
}

/* ── Inputs inside trace ── */
.trace-field-input:focus {
    border-color: var(--trace-accent) !important;
    box-shadow: 0 0 0 3px rgba(27,138,90,0.16) !important;
}

/* ── Select inside trace ── */
.trace-select:focus {
    border-color: var(--trace-accent);
    box-shadow: 0 0 0 3px rgba(27,138,90,0.16);
}

/* ── Product note inside trace ── */
.trace-product-note {
    background: #D4EDDA;
    border-left: 3px solid var(--trace-accent);
    color: #0D5C38;
}

/* ── Calculate button ── */
.btn-trace {
    background: linear-gradient(135deg, var(--trace-dark) 0%, var(--trace-accent) 100%);
    box-shadow: 0 3px 14px rgba(27,138,90,0.32);
}

/* ── Result card inside trace ── */
.trace-result {
    border: 1.5px solid var(--trace-border) !important;
    border-top: 3px solid var(--trace-accent) !important;
}

.trace-result .result-dose-primary {
    background: linear-gradient(135deg, var(--trace-dark) 0%, var(--trace-accent) 100%) !important;
}

.trace-result .result-balanced {
    background: rgba(27,138,90,0.09);
    border: 1px solid rgba(27,138,90,0.24);
}

.trace-result .result-balanced-text {
    color: var(--trace-dark);
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .reef-calc-trace {
        margin: 0 0.75rem 0.75rem;
    }
    .trace-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .trace-body {
        padding: 1rem 1.1rem 1.2rem;
    }
}

@media (max-width: 459px) {
    .reef-calc-trace {
        margin: 0 0.6rem 0.6rem;
    }
    .trace-inputs-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .trace-header {
        padding: 0.9rem 1rem;
    }
    .trace-header-icon { width: 36px; height: 36px; }
    .trace-header-title { font-size: 0.95rem; }
}