/*
 * @package     StarTech.Component.Fefcocalc
 * @subpackage  com_fefcocalc
 *
 * Scoped under .fefcocalc-app so it never leaks into the rest of the Joomla
 * template. Ported from the standalone calculator prototype (fefco_calc.html)
 * — same tokens, same layout language, same flute-direction UI.
 */

.fefcocalc-app{
  --fc-bg:#EAE6D9; --fc-surface:#F7F5ED; --fc-surface-2:#F1EEE1;
  --fc-line:#D8D2C0; --fc-line-strong:#B7AF97;
  --fc-ink:#26221A; --fc-ink-soft:#6B6553; --fc-ink-faint:#948C76;
  --fc-blue:#2F5E8C; --fc-blue-soft:#E4ECF2;
  --fc-amber:#B8722A; --fc-amber-soft:#F3E4D2;
  --fc-good:#3F7A4E; --fc-good-soft:#E1EEE2;
  --fc-warn:#B4472A;
  --fc-on-accent:#FBFAF5;
  font-family:'Archivo',Arial,sans-serif; color:var(--fc-ink); background:var(--fc-bg);
  padding:20px; border-radius:10px; max-width:1080px; margin:0 auto;
}
.fefcocalc-app *{box-sizing:border-box;}
.fefcocalc-app h1.fc-title{
  font-family:'Big Shoulders Display',Arial,sans-serif; font-weight:700;
  font-size:1.7rem; margin:0 0 4px; letter-spacing:0.01em;
}
.fefcocalc-app .fc-subtitle{color:var(--fc-ink-soft); font-size:0.9rem; margin:0 0 18px;}

.fefcocalc-app .fc-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:760px){ .fefcocalc-app .fc-grid{grid-template-columns:1fr;} }

.fefcocalc-app .fc-panel{
  background:var(--fc-surface); border:1px solid var(--fc-line); border-radius:10px;
  padding:16px 16px 18px; margin-bottom:16px;
}
.fefcocalc-app .fc-panel h2{
  font-family:'Big Shoulders Display',Arial,sans-serif; font-size:1.05rem; font-weight:700;
  margin:0 0 12px; display:flex; align-items:center; gap:8px;
}
.fefcocalc-app .fc-panel h2 .fc-num{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--fc-blue); color:var(--fc-on-accent); font-size:0.75rem;
}

.fefcocalc-app select, .fefcocalc-app input[type=number]{
  width:100%; padding:8px 10px; border:1px solid var(--fc-line-strong); border-radius:6px;
  background:var(--fc-surface-2); color:var(--fc-ink); font-family:inherit; font-size:0.92rem;
}
.fefcocalc-app label{font-size:0.78rem; color:var(--fc-ink-soft); display:block; margin-bottom:4px;}
.fefcocalc-app .fc-field{margin-bottom:12px;}
.fefcocalc-app .fc-row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.fefcocalc-app .fc-row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
.fefcocalc-app .fc-hint{font-size:0.75rem; color:var(--fc-ink-faint); margin-top:3px;}

.fefcocalc-app .fc-code-list{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px;}
.fefcocalc-app .fc-code-chip{
  font-family:'JetBrains Mono',monospace; font-size:0.78rem; padding:6px 10px;
  border:1px solid var(--fc-line-strong); border-radius:6px; cursor:pointer; background:var(--fc-surface-2);
}
.fefcocalc-app .fc-code-chip.active{background:var(--fc-blue); color:var(--fc-on-accent); border-color:var(--fc-blue);}
.fefcocalc-app .fc-code-chip.disabled{opacity:0.45; cursor:not-allowed;}
.fefcocalc-app .fc-code-hint{font-size:0.8rem; color:var(--fc-ink-soft); min-height:1.2em;}

.fefcocalc-app .fc-seg{display:flex; border:1px solid var(--fc-line-strong); border-radius:6px; overflow:hidden;}
.fefcocalc-app .fc-seg button{
  flex:1; font-family:'Archivo',sans-serif; font-size:0.82rem; padding:8px 6px;
  background:var(--fc-surface-2); color:var(--fc-ink-soft); border:none; cursor:pointer;
  border-right:1px solid var(--fc-line-strong);
}
.fefcocalc-app .fc-seg button:last-child{border-right:none;}
.fefcocalc-app .fc-seg button.active{background:var(--fc-blue); color:var(--fc-on-accent);}
.fefcocalc-app .fc-seg.disabled{opacity:0.5;}
.fefcocalc-app .fc-seg.disabled button{cursor:not-allowed;}

.fefcocalc-app .fc-note{
  display:flex; gap:8px; align-items:flex-start; font-size:0.8rem; color:var(--fc-ink-soft);
  background:var(--fc-amber-soft); border:1px solid var(--fc-amber); border-radius:6px;
  padding:8px 10px; margin:0 0 12px;
}
.fefcocalc-app .fc-note b{color:var(--fc-ink);}

.fefcocalc-app .fc-diagram-box{
  background:var(--fc-surface-2); border:1px solid var(--fc-line); border-radius:8px; padding:8px;
}
/* Значок направления гофроволны поверх реального эталонного чертежа — см.
   refFluteBadge/updateRefFluteBadge() в calculator.js. */
.fefcocalc-app .fc-flute-badge{
  position:absolute; top:4px; right:4px; z-index:2; align-items:center; gap:4px;
  font-size:0.66rem; color:var(--fc-amber); background:var(--fc-surface-2);
  border:1px solid var(--fc-amber); border-radius:3px; padding:2px 6px; pointer-events:none;
}
.fefcocalc-app .fc-diagram-caption{font-size:0.78rem; color:var(--fc-ink-faint); text-align:center; margin-top:8px;}

.fefcocalc-app .fc-readout-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px;}
.fefcocalc-app .fc-tile{
  background:var(--fc-surface-2); border:1px solid var(--fc-line); border-radius:8px; padding:12px 14px;
}
.fefcocalc-app .fc-tile.accent{border-color:var(--fc-blue); background:var(--fc-blue-soft);}
.fefcocalc-app .fc-tile .fc-label{font-size:0.7rem; color:var(--fc-ink-soft); text-transform:uppercase; letter-spacing:0.05em;}
.fefcocalc-app .fc-tile .fc-value{
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;
  font-weight:600; font-size:1.35rem; color:var(--fc-ink); margin-top:4px;
}
.fefcocalc-app .fc-tile.accent .fc-value{color:var(--fc-blue);}
.fefcocalc-app .fc-tile .fc-value small{font-size:0.8rem; color:var(--fc-ink-faint); font-weight:500;}
.fefcocalc-app .fc-tile .fc-sub-dim{
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;
  font-weight:500; font-size:0.8rem; color:var(--fc-ink-soft); margin-top:3px;
}
.fefcocalc-app .fc-lines-row{display:flex; gap:12px; margin-bottom:14px;}
.fefcocalc-app .fc-lines-row .fc-tile{flex:1;}

.fefcocalc-app .fc-pick-banner{
  display:flex; justify-content:space-between; gap:12px; background:var(--fc-good-soft);
  border:1px solid var(--fc-good); border-radius:8px; padding:10px 14px; margin-bottom:6px;
}
.fefcocalc-app .fc-pick-banner .t{font-size:0.78rem; color:var(--fc-ink-soft);}
.fefcocalc-app .fc-pick-banner .v{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.1rem; color:var(--fc-good);}
.fefcocalc-app .fc-roll-list{display:flex; flex-direction:column; gap:5px; margin-top:8px;}
.fefcocalc-app .fc-roll-row{display:grid; grid-template-columns:44px 1fr 90px; align-items:center; gap:8px; font-size:0.82rem;}
.fefcocalc-app .fc-roll-row.bad{opacity:0.4;}
.fefcocalc-app .fc-roll-row .rw{color:var(--fc-ink-soft); font-family:'JetBrains Mono',monospace;}
.fefcocalc-app .fc-roll-bar{position:relative; height:8px; background:var(--fc-line); border-radius:4px; overflow:hidden;}
.fefcocalc-app .fc-roll-bar .fill{position:absolute; inset:0; background:var(--fc-line);}
.fefcocalc-app .fc-roll-bar .used{position:absolute; left:0; top:0; bottom:0; background:var(--fc-blue);}
.fefcocalc-app .fc-roll-row.best .fc-roll-bar .used{background:var(--fc-good);}
.fefcocalc-app .fc-roll-row .waste{text-align:right; color:var(--fc-ink-faint); font-family:'JetBrains Mono',monospace;}
.fefcocalc-app .fc-roll-row.best .waste{color:var(--fc-good); font-weight:600;}

.fefcocalc-app details{margin-top:10px;}
.fefcocalc-app summary{cursor:pointer; font-size:0.85rem; color:var(--fc-blue);}
.fefcocalc-app table.fc-formula-table{width:100%; border-collapse:collapse; margin-top:10px; font-size:0.82rem;}
.fefcocalc-app table.fc-formula-table td{padding:5px 6px; border-bottom:1px solid var(--fc-line);}
.fefcocalc-app table.fc-formula-table td:first-child{font-family:'JetBrains Mono',monospace; color:var(--fc-blue); white-space:nowrap;}
.fefcocalc-app table.fc-formula-table td:last-child{text-align:right; font-family:'JetBrains Mono',monospace; white-space:nowrap;}

.fefcocalc-app .fc-pricing-note{font-size:0.8rem; color:var(--fc-ink-faint); margin-top:10px;}