/* FabForge Formulas module styles (Build 1). Written from scratch. */
.fx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.fx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fx { display: flex; flex-direction: column; gap: 12px; }
.card-h { display: flex; align-items: center; gap: 10px; }
.card-h h2 { margin: 0; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.card-h .num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--amber); color: var(--amber); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.fx .chips + .chips { margin-top: -4px; }
.fx-top { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pic { background: #14171b; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.pic-svg { display: block; width: 100%; height: auto; max-height: 190px; }
.pic-svg .st { fill: #cfd5db; font-size: 11px; font-family: var(--mono); }
.pic-svg .sd { fill: #ffc845; font-size: 11px; font-family: var(--mono); }
.pic-svg .sa { fill: #ffb000; font-size: 11px; font-weight: 700; font-family: var(--mono); }
.pic-svg .sr { fill: #f0605a; font-size: 10px; font-family: var(--mono); }
.pic-svg .sm { fill: #6b737c; font-size: 10px; }
.pic-svg .sk { fill: #9aa3ad; font-size: 11px; font-family: var(--mono); }
.pic-svg .sbig { fill: #ffb000; font-size: 22px; font-weight: 800; }
.pic-svg .dim { stroke: #ffb000; stroke-width: 1; fill: none; }
.fx-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.fx-in .fld.wide { grid-column: 1 / -1; }
.fx-more { display: flex; flex-direction: column; gap: 10px; }
.sub-h { font-size: 13px; color: var(--amber2); text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--line); padding-top: 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tile { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.tile .tl { font-size: 12px; color: var(--muted); }
.tile .tv { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile .ts { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.tile.main { grid-column: span 2; border-color: var(--amber); background: linear-gradient(180deg, rgba(255,176,0,.10), transparent); }
.tile.main .tv { font-size: 30px; color: var(--amber2); }
.tile.est-t { border-style: dashed; }
.tile.warn .tv { color: var(--red); }
.formula { background: #101215; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.formula summary { cursor: pointer; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; min-height: 28px; display: flex; align-items: center; }
.fl { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: #d5dae0; overflow-x: auto; }
.fl div { white-space: pre-wrap; overflow-wrap: anywhere; }
.fl div:first-child { color: var(--amber2); }
.card-f { display: flex; justify-content: flex-end; }
.cmp { display: flex; flex-direction: column; gap: 4px; }
.cmp-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cmp-r { display: grid; grid-template-columns: minmax(0, 1.4fr) 54px minmax(0, 1fr) 76px; gap: 8px; align-items: center; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.cmp-r.on { background: var(--amberbg); }
.cmp-r .cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-r .cd { color: var(--dim); font-family: var(--mono); font-size: 12px; }
.cmp-r .cb { height: 10px; background: #262b31; border-radius: 5px; overflow: hidden; }
.cmp-r .cb i { display: block; height: 100%; border-radius: 5px; }
.cmp-r b { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-f { font-size: 12px; color: var(--dim); }
.conv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.conv tr.on td { color: var(--amber2); font-weight: 700; }
.note { border: 1px solid var(--line); border-left: 4px solid var(--line2); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--muted); background: var(--bg); }
.note b { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; }
.note.amber { border-left-color: var(--amber); }
.note.amber b { color: var(--amber2); }
.note.red { border-left-color: var(--red); background: var(--redbg); }
.note.red b { color: var(--red); }
.note.green { border-left-color: var(--green); }
.note.blue { border-left-color: var(--blue); }
.note .refs { font-family: var(--mono); font-size: 12px; color: #b8d4f0; }
.extra:empty { display: none; }
.extra { display: flex; flex-direction: column; gap: 8px; }
.fx-notes { display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--top) + 12px); }
.notes-h { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--amber2); }
@media (max-width: 1400px) { .fx-cards { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1000px) and (max-width: 1400px) {
  .fx-top { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 1000px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-notes { position: static; }
}
@media (max-width: 760px) {
  .card { padding: 12px; }
  .fx-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.main .tv { font-size: 26px; }
  .cmp-r { grid-template-columns: minmax(0, 1fr) 0 minmax(0, .8fr) 70px; }
  .cmp-r .cd { display: none; }
  .conv { grid-template-columns: 1fr; }
}