/* Options Live (optionslive.cadinstruct.com) — on top of app.css (2026-10-17) */
.ol { max-width: 1320px; margin: 0 auto; padding: 14px 16px 40px; display: grid; gap: 14px; }
.ol > * { min-width: 0; }
.ol h1 { margin: 0; font-size: 20px; }
.ol h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ol .crumbs { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ol .crumbs a { color: var(--accent); text-decoration: none; }
.ol .crumbs a:hover { text-decoration: underline; }
.ol-head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.ol-head .grow { flex: 1 1 auto; min-width: 0; }
.ol-head .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ol .card-body { padding: 14px 16px; }

/* product cards on the home page */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.prod { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 6px; background: var(--panel-2); }
.prod b { font-size: 15px; }
.prod .by { font-size: 12.5px; color: var(--muted); }
.prod .desc { font-size: 12.5px; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.prod .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.prod .go { justify-self: start; margin-top: 4px; }

/* lists */
.ol-table-wrap { overflow-x: auto; }
table.ol-t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ol-t th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
table.ol-t td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ol-t tr.link { cursor: pointer; }
table.ol-t tr.link:hover td { background: var(--panel-2); }
table.ol-t td.num, table.ol-t th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.ol-t td.nowrap { white-space: nowrap; }
table.ol-t td .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
table.ol-t td input[type=number] { width: 84px; text-align: right; }
table.ol-t td.acts { white-space: nowrap; text-align: right; }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 9px; background: var(--line); color: var(--muted); white-space: nowrap; }
.pill.Sent, .pill.Ordered { background: var(--info-soft); color: var(--info-ink); }
.pill.Draft, .pill.Quoted { background: var(--neutral-soft); color: var(--neutral-ink); }
.pill.Killed, .pill.bad { background: var(--err-soft); color: var(--err); }
.pill.warn { background: var(--warn-soft); color: var(--warn-text); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.ol-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.ol-search .grow { flex: 1 1 240px; }

/* forms */
.ol .form-grid { gap: 10px 16px; }
.ol .form-grid .wide { grid-column: 1 / -1; }
.ol textarea { width: 100%; min-height: 64px; resize: vertical; }
.ol .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

/* quote page */
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 14px; align-items: start; }
@media (max-width: 960px) { .q-grid { grid-template-columns: 1fr; } }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.totals .k { color: var(--muted); }
.totals .v { text-align: right; }
.totals .grand { font-weight: 700; font-size: 16px; border-top: 1px solid var(--line); padding-top: 6px; }
.lock { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 6px; background: var(--info-soft); color: var(--info-ink); font-size: 13px; }
.flag { display: block; font-size: 12px; margin-top: 3px; }
.flag.bad { color: var(--err); }
.flag.warn { color: var(--warn-text); }
.add-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
.add-line .grow { flex: 1 1 240px; }

/* the line picker (as the Configure / 3D page) */
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 14px; align-items: start; }
@media (max-width: 960px) { .cfg-grid { grid-template-columns: 1fr; } }
.grp { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; }
.grp h3 { margin: 0; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.grp-body { padding: 12px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.opt .help { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.opt .price { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.opt select.limited { border-color: var(--limited-line); background: var(--limited-bg); }
.opt select option.alt { color: var(--alt-ink); }
.opt select.conflict { border-color: var(--err); background: var(--err-soft); }
.opt.check { align-self: end; padding-bottom: 6px; }
.msgs .alert, #ruleNotes .alert { font-size: 12.5px; border-radius: 6px; padding: 6px 9px; margin: 0 0 6px; }
.alert.bad { background: var(--err-soft); color: var(--err); }
.alert.warn { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.side { position: sticky; top: 12px; display: grid; gap: 14px; }
.side .card-body { display: grid; gap: 10px; }
.side .big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.side .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* join page */
.join { max-width: 620px; margin: 30px auto; width: 100%; }
.join .card-body { display: grid; gap: 12px; }
.join .prodname { font-size: 22px; font-weight: 700; }
.ol .loading { color: var(--muted); padding: 30px; text-align: center; }

/* the user menu in the header */
.app-header .who a { color: #dfe6f3; }
@media (max-width: 760px) {
  .app-header .who { display: none; }
}
.q-grid > *, .cfg-grid > * { min-width: 0; }
/* "Options Live" is longer than "Configure": on a phone the buttons go to a second row */
@media (max-width: 480px) {
  .app-header { flex-wrap: wrap; height: auto; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .app-header .brand { flex: 1 0 100%; }
  .app-header .spacer { display: none; }
  .app-header #logoutBtn { margin-left: auto; }
}
.ol .field { min-width: 0; }
.ol .field input, .ol .field select, .ol .field textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
.ol a.btn { text-decoration: none; }
/* 3D per line (phase 2) */
table.ol-t td.td3d { white-space: nowrap; min-width: 110px; }
table.ol-t td.td3d .sub { white-space: normal; max-width: 220px; }
table.ol-t td.td3d .sub.bad { color: var(--err); }
table.ol-t td.td3d .sub.warn { color: var(--warn-text); }
.b3d { display: block; height: 6px; width: 100px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; }
.b3d i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.b3d.run i { animation: b3dpulse 1.6s ease-in-out infinite; }
@keyframes b3dpulse { 50% { opacity: .55; } }