/* MANUFACTURING: the workspace. ws-* carries the shell; mf- is the rest.
   The rail is <nav class="ws-rail mf-rail">, already pinned by user.css away
   from the site header rule, so nothing here touches position. */
.mf { display: flex; flex-direction: column; gap: 14px; }
.mf-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mf-h h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.mf-hint { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--gray-light, #aeaeb2); max-width: 78ch; }
.mf-h-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mf-h-acts .up-btn, .mf-h-acts .sr-act { display: inline-flex; align-items: center; gap: 6px; }
.mf-h-acts .ws-i { width: 14px; height: 14px; }
.mf-alerts { margin-bottom: 14px; }
.mf-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; align-items: start; }

.mf-pick { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-light, #aeaeb2); }
.mf-pick select, .mf-sel {
    font: inherit; letter-spacing: 0; text-transform: none;
    background: rgba(255,255,255,.05); border: 1px solid var(--border, rgba(255,255,255,.12)); color: var(--white, #fff);
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.mf-pick select { font-size: 12.5px; font-weight: 600; padding: 7px 30px 7px 11px; border-radius: 10px; max-width: 280px; background-position: right 9px center; background-size: 13px; }
.mf-sel { font-size: 11.5px; padding: 4px 24px 4px 8px; border-radius: 8px; background-position: right 7px center; background-size: 11px; }

.mf-card {
    border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 16px 18px;
    background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.mf-card.is-warn { border-color: rgba(230,167,0,.4); background: rgba(230,167,0,.06); }
.mf-card h3 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.mf-card h3 .ws-i { width: 15px; height: 15px; color: var(--red, #c41717); }
.mf-n { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 100px; background: rgba(255,255,255,.09); color: var(--gray-light, #aeaeb2); }
.mf-quiet { font-size: 12.5px; line-height: 1.5; color: var(--gray-light, #aeaeb2); }
.mf-ok { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #37c27a; }
.mf-ok .ws-i { width: 14px; height: 14px; }
.mf-blank { border: 1px dashed rgba(255,255,255,.18); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mf-blank h3 { margin: 0; font-size: 17px; font-weight: 800; }
.mf-blank p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gray-light, #aeaeb2); max-width: 72ch; }
.mf-search {
    font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 9px; width: 230px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border, rgba(255,255,255,.12)); color: var(--white, #fff);
}
.mf-job { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.08); color: var(--gray-light, #aeaeb2); }
.mf-no { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 7px; border-radius: 5px; background: rgba(196,23,23,.18); color: #ff8f8f; }
.mf-sn { display: block; font-style: normal; font-size: 10.5px; color: var(--gray-light, #aeaeb2); margin-top: 2px; }
.mf-warnbox { font-size: 12.5px; line-height: 1.65; padding: 11px 13px; border-radius: 10px; background: rgba(230,167,0,.08); border: 1px solid rgba(230,167,0,.3); }
.mf-warnbox.is-ok { background: rgba(55,194,122,.07); border-color: rgba(55,194,122,.3); }

.mf-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 100px; white-space: nowrap; }
.mf-pill.is-ok { color: #37c27a; background: rgba(55,194,122,.14); }
.mf-pill.is-warn { color: #e6a700; background: rgba(230,167,0,.14); }
.mf-pill.is-bad { color: #ff5c5c; background: rgba(255,92,92,.14); }
.mf-pill.is-mute { color: var(--gray-light, #aeaeb2); background: rgba(255,255,255,.08); }
.mf-pill.is-info { color: #6fa8ff; background: rgba(111,168,255,.14); }

/* tables */
.mf-tablewrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.mf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mf-table thead th { text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-light, #aeaeb2); padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.mf-table td { padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.mf-table tr:last-child td { border-bottom: 0; }
.mf-table tr.is-bad td { background: rgba(255,92,92,.06); }
.mf-table tr.is-warn td { background: rgba(230,167,0,.05); }
.mf-table .mf-num, .mf-table th.mf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-acts { text-align: right; white-space: nowrap; }
.mf-ib { position: relative; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--gray-light, #aeaeb2); cursor: pointer; font: inherit; }
.mf-ib .ws-i { width: 13px; height: 13px; }
.mf-ib:hover { border-color: rgba(255,255,255,.2); color: var(--white, #fff); }
.mf-ib.is-danger:hover { border-color: rgba(196,23,23,.5); color: #ff8f8f; }
.mf-ib b { position: absolute; top: -1px; right: -2px; font-size: 9px; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 100px; background: var(--red, #c41717); color: #fff; }

.mf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); font-size: 12.5px; }
.mf-row.is-bad { border-color: rgba(255,92,92,.35); }
.mf-row.is-warn { border-color: rgba(230,167,0,.35); }
.mf-row-n { font-weight: 650; }
.mf-row-m { color: var(--gray-light, #aeaeb2); }
.mf-row > .mf-pill, .mf-row > .sr-act { margin-left: auto; }

/* the floor, stage by stage */
.mf-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mf-col { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); color: var(--white, #fff); font: inherit; cursor: pointer; text-align: left; }
.mf-col:hover { border-color: rgba(196,23,23,.45); }
.mf-col.is-bad { border-color: rgba(255,92,92,.4); background: rgba(255,92,92,.05); }
.mf-col-l { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gray-light, #aeaeb2); }
.mf-col b { font-size: 24px; font-weight: 850; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mf-col-s { font-size: 11px; color: var(--gray-light, #aeaeb2); }
.mf-col-x { font-style: normal; font-size: 10.5px; font-weight: 700; color: #ff8f8f; }

/* release-by timeline */
.mf-tl { display: flex; flex-direction: column; gap: 5px; }
.mf-tl-r { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); color: var(--white, #fff); font: inherit; font-size: 12.5px; cursor: pointer; }
.mf-tl-r:hover { border-color: rgba(196,23,23,.45); }
.mf-tl-d { font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; text-align: center; padding: 2px 0; border-radius: 6px; background: rgba(255,255,255,.08); }
.mf-tl-r.is-bad .mf-tl-d { background: rgba(255,92,92,.2); color: #ff8f8f; }
.mf-tl-r.is-warn .mf-tl-d { background: rgba(230,167,0,.2); color: #e6a700; }
.mf-tl-t { display: flex; flex-direction: column; min-width: 0; }
.mf-tl-t b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-tl-t em { font-style: normal; font-size: 11.5px; color: var(--gray-light, #aeaeb2); }
.mf-tl-w { font-size: 11.5px; color: var(--gray-light, #aeaeb2); white-space: nowrap; }

/* ── ONE WORK ORDER ─────────────────────────────────────────────────────── */
.mf-order { border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 15px 17px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,.03); }
.mf-order.is-bad { border-color: rgba(255,92,92,.4); background: rgba(255,92,92,.04); }
.mf-order.is-warn { border-color: rgba(230,167,0,.35); }
.mf-order.is-ok { border-color: rgba(255,255,255,.09); }
.mf-order-h { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mf-order-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mf-order-id > b:nth-of-type(2), .mf-order-id > b:only-of-type { font-size: 15px; font-weight: 800; letter-spacing: -.015em; }
.mf-order-a { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.mf-order-say { margin: 0; font-size: 13px; line-height: 1.55; font-weight: 600; }
.mf-order.is-bad .mf-order-say { color: #ff8f8f; }
.mf-order.is-warn .mf-order-say { color: #e6a700; }
.mf-order-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; }
.mf-order-meta .sr-act { margin-left: auto; }

.mf-steps { display: flex; gap: 4px; flex-wrap: wrap; }
.mf-step { font: inherit; font-size: 10.5px; padding: 3px 9px; border-radius: 100px; border: 1px solid transparent; background: rgba(255,255,255,.06); color: var(--gray-light, #aeaeb2); cursor: pointer; }
.mf-step:hover { border-color: rgba(255,255,255,.3); color: var(--white, #fff); }
.mf-step.is-on { background: rgba(55,194,122,.16); color: #37c27a; font-weight: 700; }
.mf-step.is-here { outline: 1px solid rgba(55,194,122,.6); outline-offset: 1px; }

.mf-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mf-date { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: 10px; background: rgba(255,255,255,.04); }
.mf-date span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-light, #aeaeb2); }
.mf-date b { font-size: 13px; font-weight: 750; }
.mf-date.is-ok b { color: #37c27a; }
.mf-date.is-warn b { color: #e6a700; }
.mf-date.is-bad b { color: #ff5c5c; }
.mf-prog { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.mf-prog i { display: block; height: 100%; border-radius: 3px; background: #37c27a; }

.mf-detail { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.mf-detail-h { display: flex; align-items: center; gap: 10px; }
.mf-detail-h h4 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-light, #aeaeb2); }
.mf-detail-a { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.mf-ops { display: flex; flex-direction: column; gap: 4px; }
.mf-op { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.07); font-size: 12px; }
.mf-op.is-done { opacity: .55; }
.mf-op.is-doing { border-color: rgba(55,194,122,.4); }
.mf-op-s { font-weight: 700; }
.mf-op-t { color: var(--gray-light, #aeaeb2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-op-h { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-light, #aeaeb2); }
.mf-op-a { display: flex; align-items: center; gap: 4px; }

.mf-tests { display: flex; flex-direction: column; gap: 5px; }
.mf-test { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.07); font-size: 12.5px; position: relative; }
.mf-test.is-bad { border-color: rgba(255,92,92,.4); background: rgba(255,92,92,.05); }
.mf-test.is-warn { border-color: rgba(230,167,0,.35); }
.mf-test b { font-weight: 700; padding-right: 190px; }
.mf-test-a { position: absolute; top: 8px; right: 10px; display: flex; align-items: center; gap: 4px; }

/* long lead tracker */
.mf-ll { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 13px 15px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.03); }
.mf-ll.is-bad { border-color: rgba(255,92,92,.4); background: rgba(255,92,92,.04); }
.mf-ll.is-warn { border-color: rgba(230,167,0,.35); }
.mf-ll-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mf-ll-h b { font-size: 14px; font-weight: 780; }
.mf-ll-h .mf-pill:last-of-type { margin-left: auto; }
.mf-ll-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mf-ll-s { font-size: 10.5px; text-align: center; padding: 5px 4px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--gray-light, #aeaeb2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-ll-s.is-on { background: rgba(55,194,122,.16); color: #37c27a; font-weight: 700; }
.mf-ll-m { font-size: 12.5px; line-height: 1.5; }
.mf-ll-f { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--gray-light, #aeaeb2); }
.mf-ll-f .sr-act { margin-left: auto; }

/* capacity */
.mf-caps { display: flex; flex-direction: column; gap: 5px; }
.mf-cap-r { display: grid; grid-template-columns: minmax(0, 1fr) 1fr 42px 1fr 42px; align-items: center; gap: 8px; font-size: 12px; }
.mf-cap-r > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-light, #aeaeb2); }
.mf-cap-r b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 750; }
.mf-bar { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.mf-bar i { display: block; height: 100%; border-radius: 4px; background: #37c27a; }
.mf-bar.is-warn i { background: #e6a700; }
.mf-bar.is-bad i { background: #ff5c5c; }
.mf-grid .mf-cell { position: relative; padding-right: 40px; }
.mf-cell b { font-variant-numeric: tabular-nums; }
.mf-cell-p { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 10px; color: var(--gray-light, #aeaeb2); }
.mf-cell.is-warn { background: rgba(230,167,0,.1); } .mf-cell.is-warn .mf-cell-p { color: #e6a700; }
.mf-cell.is-bad { background: rgba(255,92,92,.14); } .mf-cell.is-bad .mf-cell-p { color: #ff8f8f; }

.mf-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.mf-kind { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.07); font-size: 12px; }
.mf-kind span { color: var(--gray-light, #aeaeb2); min-width: 0; }
.mf-kind b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; }
.mf-kind.is-ok b { color: #37c27a; }
.mf-kind.is-warn { border-color: rgba(230,167,0,.35); } .mf-kind.is-warn b { color: #e6a700; }
.mf-kind.is-bad { border-color: rgba(255,92,92,.35); } .mf-kind.is-bad b { color: #ff5c5c; }

.mf-hero { border: 1px solid rgba(196,23,23,.4); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(135deg, rgba(196,23,23,.18), rgba(255,255,255,.02)); }
.mf-hero-n { display: flex; flex-direction: column; gap: 2px; }
.mf-hero-n span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light, #aeaeb2); }
.mf-hero-n b { font-size: 34px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mf-hero-n em { font-style: normal; font-size: 12.5px; color: var(--gray-light, #aeaeb2); }
.mf-hero-b { height: 12px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.mf-hero-b i { display: block; height: 100%; border-radius: 6px; background: var(--red, #c41717); }
.mf-hero-m { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 12px; color: var(--gray-light, #aeaeb2); }
.mf-hero-m b { color: var(--white, #fff); font-weight: 700; }

.mf-docs { padding: 10px 2px 4px; }

/* ── light ─────────────────────────────────────────────────────────────── */
html.light .mf-card, html.light .mf-row, html.light .mf-order, html.light .mf-ll, html.light .mf-kind,
html.light .mf-tl-r, html.light .mf-col, html.light .mf-op, html.light .mf-test, html.light .mf-tablewrap { background: #fff; border-color: rgba(0,0,0,.09); color: #111; }
html.light .mf-card.is-warn { background: rgba(230,167,0,.05); border-color: rgba(154,106,0,.3); }
html.light .mf-hint, html.light .mf-quiet, html.light .mf-row-m, html.light .mf-tl-t em, html.light .mf-tl-w,
html.light .mf-hero-m, html.light .mf-table thead th, html.light .mf-blank p, html.light .mf-step,
html.light .mf-job, html.light .mf-n, html.light .mf-sn, html.light .mf-kind span, html.light .mf-col-l,
html.light .mf-col-s, html.light .mf-date span, html.light .mf-op-t, html.light .mf-op-h, html.light .mf-ll-s,
html.light .mf-ll-f, html.light .mf-cell-p, html.light .mf-pick, html.light .mf-cap-r > span:first-child { color: #5f5f66; }
html.light .mf-card h3, html.light .mf-row-n, html.light .mf-tl-t b, html.light .mf-hero-n b, html.light .mf-hero-m b,
html.light .mf-blank h3, html.light .mf-col b, html.light .mf-date b, html.light .mf-kind b, html.light .mf-ll-h b,
html.light .mf-order-say, html.light .mf-op-s, html.light .mf-test b, html.light .mf-cap-r b { color: #111; }
html.light .mf-hero { background: linear-gradient(135deg, rgba(196,23,23,.1), #fff 70%); border-color: rgba(196,23,23,.3); }
html.light .mf-hero-b, html.light .mf-bar, html.light .mf-prog { background: rgba(0,0,0,.08); }
html.light .mf-n, html.light .mf-job, html.light .mf-tl-d, html.light .mf-step, html.light .mf-ll-s,
html.light .mf-pill.is-mute, html.light .mf-date, html.light .mf-no { background: rgba(0,0,0,.06); }
html.light .mf-no { color: #c41717; background: rgba(196,23,23,.1); }
html.light .mf-table td { border-bottom-color: rgba(0,0,0,.06); }
html.light .mf-table thead th { border-bottom-color: rgba(0,0,0,.08); }
html.light .mf-detail { border-top-color: rgba(0,0,0,.08); }
html.light .mf-pill.is-ok { color: #178a4f; background: rgba(23,138,79,.12); }
html.light .mf-pill.is-warn { color: #9a6a00; background: rgba(154,106,0,.12); }
html.light .mf-pill.is-bad { color: #c41717; background: rgba(196,23,23,.1); }
html.light .mf-pill.is-info { color: #1d5fbf; background: rgba(29,95,191,.1); }
html.light .mf-ok { color: #178a4f; }
html.light .mf-step.is-on, html.light .mf-ll-s.is-on { background: rgba(23,138,79,.14); color: #178a4f; }
html.light .mf-prog i, html.light .mf-bar i { background: #178a4f; }
html.light .mf-bar.is-warn i { background: #9a6a00; } html.light .mf-bar.is-bad i { background: #c41717; }
html.light .mf-date.is-ok b { color: #178a4f; } html.light .mf-date.is-warn b { color: #9a6a00; } html.light .mf-date.is-bad b { color: #c41717; }
html.light .mf-kind.is-ok b { color: #178a4f; } html.light .mf-kind.is-warn b { color: #9a6a00; } html.light .mf-kind.is-bad b { color: #c41717; }
html.light .mf-order.is-bad, html.light .mf-ll.is-bad, html.light .mf-test.is-bad, html.light .mf-col.is-bad { background: rgba(196,23,23,.04); border-color: rgba(196,23,23,.3); }
html.light .mf-order.is-bad .mf-order-say { color: #c41717; }
html.light .mf-order.is-warn .mf-order-say { color: #9a6a00; }
html.light .mf-order.is-warn, html.light .mf-ll.is-warn, html.light .mf-test.is-warn { border-color: rgba(154,106,0,.3); }
html.light .mf-table tr.is-bad td { background: rgba(196,23,23,.05); }
html.light .mf-table tr.is-warn td { background: rgba(154,106,0,.05); }
html.light .mf-cell.is-warn { background: rgba(154,106,0,.08); } html.light .mf-cell.is-warn .mf-cell-p { color: #9a6a00; }
html.light .mf-cell.is-bad { background: rgba(196,23,23,.1); } html.light .mf-cell.is-bad .mf-cell-p { color: #c41717; }
html.light .mf-search, html.light .mf-sel, html.light .mf-pick select { background: #fff; border-color: rgba(0,0,0,.14); color: #111; }
html.light .mf-blank { border-color: rgba(0,0,0,.18); }
html.light .mf-warnbox { background: rgba(154,106,0,.06); border-color: rgba(154,106,0,.28); }
html.light .mf-warnbox.is-ok { background: rgba(23,138,79,.05); border-color: rgba(23,138,79,.25); }
html.light .mf-ib:hover { border-color: rgba(0,0,0,.2); color: #111; }

@media (max-width: 1100px) {
    .mf-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .mf-grid2 { grid-template-columns: 1fr; }
    .mf-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mf-search { width: 100%; margin: 6px 0 0; }
    .mf-pick { width: 100%; } .mf-pick select { flex: 1 1 auto; max-width: none; }
    .mf-op { grid-template-columns: minmax(0, 1fr) auto; }
    .mf-op-t, .mf-op-h { display: none; }
    .mf-test b { padding-right: 0; }
    .mf-test-a { position: static; margin-top: 4px; }
    .mf-ll-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mf-card h3 { flex-wrap: wrap; }
}