/* OFX uses the RonenDolev.com design system.
   Global typography, fonts and colors are inherited. */

.ofx-hero {
    background: var(--color-primary);
    color: #fff;
}

.ofx-hero .eyebrow {
    color: var(--color-accent);
}

.ofx-hero .lead {
    max-width: 740px;
}

.ofx .ofx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 35px;
}

.ofx .ofx-grid article {
    border: 1px solid var(--color-border);
    background: var(--color-background);
    padding: 30px;
    min-width: 0;
}

.ofx .ofx-grid article p {
    color: var(--color-text);
    opacity: .85;
}

.ofx .ofx-light {
    background: var(--color-background);
    border-block: 1px solid var(--color-border);
}

.ofx .ofx-formula {
    background: var(--color-primary);
    color: var(--color-accent);
    padding: 26px;
    margin: 25px 0;
    font-weight: 700;
    font-size: clamp(14px, 2vw, 21px);
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .ofx .ofx-grid {
        grid-template-columns: 1fr;
    }
}


/* OFX06: Uses the existing website design tokens. */

.ofx-calc-header {
 display:flex;
 justify-content:space-between;
 gap:25px;
 flex-wrap:wrap;
}

.ofx-actions {
 display:flex;
 gap:10px;
 flex-wrap:wrap;
 align-content:start;
}

.ofx-notice {
 padding:14px 18px;
 border:1px solid var(--color-border);
 margin:22px 0;
}

.ofx-results {
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:12px;
 margin:26px 0;
}

.ofx-results>div {
 padding:20px;
 border:1px solid var(--color-border);
 min-width:0;
}

.ofx-results span,
.ofx-results small {
 display:block;
 font-size:13px;
}

.ofx-results strong {
 display:block;
 font-family:var(--font-display);
 font-size:clamp(26px,3vw,42px);
 margin-top:9px;
}

.ofx-results .ofx-total {
 background:var(--color-primary);
 color:#fff;
}

.ofx-tabs {
 display:flex;
 gap:8px;
 flex-wrap:wrap;
 margin:26px 0;
}

.ofx-tabs button {
 cursor:pointer;
 border:1px solid var(--color-border);
 padding:12px 17px;
 background:var(--color-background);
 color:var(--color-text);
 font:inherit;
}

.ofx-tabs button.selected {
 background:var(--color-primary);
 color:#fff;
 border-color:var(--color-primary);
}

.ofx-fields {
 border:1px solid var(--color-border);
 padding:25px;
}

.ofx-field {
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:20px;
 padding:14px 0;
 border-bottom:1px solid var(--color-border);
}

.ofx-field-input {
 display:flex;
 align-items:center;
 gap:8px;
 flex-shrink:0;
}

.ofx-field input {
 width:90px;
 padding:10px;
 border:1px solid var(--color-border);
 background:var(--color-background);
 color:var(--color-text);
 font:inherit;
}

.ofx-weak {
 margin-top:25px;
}

.ofx-gate,
.ofx-conclusion {
 border:1px solid var(--color-border);
 padding:24px;
 margin-top:22px;
}

.ofx-gate label {
 display:flex;
 gap:12px;
 align-items:flex-start;
}

.ofx-gate input {
 margin-top:6px;
}

.ofx-conclusion {
 border-left:4px solid var(--color-primary);
}

@media(max-width:800px) {
 .ofx-results {
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
 .ofx-calc-header {
  display:block;
 }
 .ofx-actions {
  margin-top:20px;
 }
}

@media(max-width:460px) {
 .ofx-results {
  grid-template-columns:1fr;
 }
 .ofx-fields {
  padding:15px;
 }
}


/* OFX08 — Inherits the website's fonts and color system. */
.ofx .ofx-oee-form {
 border:1px solid var(--color-border);
 padding:28px;
 margin:28px 0;
}
.ofx .ofx-oee-grid {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:22px;
}
.ofx .ofx-oee-grid label {
 display:flex;
 flex-direction:column;
 gap:8px;
 font-size:14px;
}
.ofx .ofx-oee-grid input,
.ofx .ofx-oee-grid select {
 width:100%;
 max-width:100%;
 min-height:46px;
 padding:10px;
 border:1px solid var(--color-border);
 background:var(--color-background);
 color:var(--color-text);
 font:inherit;
}
.ofx .ofx-oee-actions {
 display:flex;
 gap:12px;
 flex-wrap:wrap;
 margin-top:24px;
}
.ofx .ofx-oee-note {
 font-size:13px;
 line-height:1.8;
 margin-top:24px;
}
.ofx .ofx-oee-output {
 border:1px solid var(--color-border);
 padding:24px;
 margin-top:24px;
}
.ofx .ofx-oee-kpis {
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:12px;
 margin:20px 0;
}
.ofx .ofx-oee-kpis>div {
 border:1px solid var(--color-border);
 padding:18px;
 min-width:0;
}
.ofx .ofx-oee-kpis strong {
 display:block;
 font-family:var(--font-display);
 font-size:clamp(23px,2.6vw,34px);
}
.ofx .ofx-oee-kpis span {
 display:block;
 font-size:13px;
}
.ofx .ofx-oee-detail {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 column-gap:24px;
}
.ofx .ofx-oee-dominant {
 border-left:4px solid var(--color-primary);
 padding:15px;
 background:var(--color-background);
}
.ofx .ofx-oee-math {
 margin-top:30px;
 border-top:1px solid var(--color-border);
 padding-top:25px;
}
@media(max-width:760px) {
 .ofx .ofx-oee-grid,
 .ofx .ofx-oee-detail {
  grid-template-columns:1fr;
 }
 .ofx .ofx-oee-kpis {
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
}
@media(max-width:460px) {
 .ofx .ofx-oee-kpis {
  grid-template-columns:1fr;
 }
}


/* OFX10: PEE inherits the existing website design system. */
.ofx .ofx-pee-form,
.ofx .ofx-pee-output,
.ofx .ofx-pee-method {
 border:1px solid var(--color-border);
 padding:26px;
 margin:25px 0;
}
.ofx .ofx-pee-fields,
.ofx .ofx-pee-kpis {
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:18px;
}
.ofx .ofx-pee-fields label {
 display:flex;
 flex-direction:column;
 gap:9px;
}
.ofx .ofx-pee-fields input {
 width:100%;
 padding:12px;
 border:1px solid var(--color-border);
 background:var(--color-background);
 color:var(--color-text);
 font:inherit;
}
.ofx .ofx-pee-actions {
 display:flex;
 flex-wrap:wrap;
 gap:12px;
 margin-top:24px;
}
.ofx .ofx-pee-score {
 font-family:var(--font-display);
 font-size:clamp(38px,5vw,65px);
 color:var(--color-primary);
 margin:20px 0;
}
.ofx .ofx-pee-kpis>div {
 border:1px solid var(--color-border);
 padding:18px;
 font-size:14px;
}
.ofx .ofx-pee-kpis strong {
 display:block;
 font-family:var(--font-display);
 font-size:clamp(23px,3vw,36px);
}
.ofx .ofx-pee-kpis small {
 display:block;
}
.ofx .ofx-pee-warning {
 border-left:3px solid var(--color-secondary);
 padding:12px 16px;
 margin-top:20px;
}
@media(max-width:760px) {
 .ofx .ofx-pee-fields,
 .ofx .ofx-pee-kpis {
  grid-template-columns:1fr;
 }
}


/* OFX storage and reporting: site typography and design tokens are inherited. */
.ofx .ofx-data-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.ofx .ofx-data-options{border:1px solid var(--color-border);padding:20px;margin:20px 0}
.ofx .ofx-data-options label{display:block;margin:12px 0}
.ofx #ofx-history-chart{display:flex;align-items:end;gap:7px;min-height:170px;border-bottom:1px solid var(--color-border);margin:25px 0}
.ofx .ofx-history-bar{height:145px;flex:1;min-width:8px;display:flex;flex-direction:column;justify-content:end;align-items:center}
.ofx .ofx-history-bar span{display:block;width:100%;background:var(--color-secondary);min-height:2px}
.ofx .ofx-history-bar small{font-size:9px}
.ofx .ofx-history-table{overflow-x:auto}.ofx .ofx-history-table table{width:100%;border-collapse:collapse}
.ofx .ofx-history-table td,.ofx .ofx-history-table th{padding:12px;text-align:left;border-bottom:1px solid var(--color-border)}
@media(max-width:600px){.ofx .ofx-data-actions .button{width:100%}}