:root {
  --bg: #eef0f2;
  --viewer: #eceef1;
  --panel: #ffffff;
  --text: #16181c;
  --muted: #5d636d;
  --line: #dde0e5;
  --chip: #f4f5f7;
  --accent: #111317;
  --accent-text: #ffffff;
  --auto-bg: #eaf2ff; --auto-line: #9dbbf0;
  --soft-bg: #fff6e6; --soft-line: #efc67a;
  --ok: #1f8a4c; --no: #c0392b;
  --hot: #2f6fd6;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111317; --viewer: #1b1e23;
    --panel: #1a1d22; --text: #eceef1; --muted: #9aa1ab; --line: #2c3037; --chip: #23272d;
    --accent: #f1f2f4; --accent-text: #111317;
    --auto-bg: #17243a; --auto-line: #35598f; --soft-bg: #2e2413; --soft-line: #7a5a22;
    --ok: #4cc47f; --no: #f0776a; --hot: #5b93f0;
  }
}
:root[data-theme="dark"] {
  --bg: #111317; --viewer: #1b1e23;
  --panel: #1a1d22; --text: #eceef1; --muted: #9aa1ab; --line: #2c3037; --chip: #23272d;
  --accent: #f1f2f4; --accent-text: #111317;
  --auto-bg: #17243a; --auto-line: #35598f; --soft-bg: #2e2413; --soft-line: #7a5a22;
    --ok: #4cc47f; --no: #f0776a; --hot: #5b93f0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
button { font: inherit; color: inherit; cursor: pointer; }

/* Viewer on the left; options panel on the right with the stats bar docked under it. */
.ogc { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }
.ogc-viewer { grid-column: 1; grid-row: 1 / -1; }
.ogc-panel { grid-column: 2; grid-row: 1; }
.ogc-dock { grid-column: 2; grid-row: 2; }
.ogc--bare { grid-template-columns: 1fr; }
.ogc--bare .ogc-panel, .ogc--bare .ogc-dock, .ogc--bare .ogc-toolbar, .ogc--bare .ogc-badge, .ogc--bare .ogc-lens { display: none; }

.ogc-viewer { position: relative; background: var(--viewer); min-height: 0; }
.ogc-canvas { position: absolute; inset: 0; }
.ogc-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ogc-badge { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--panel) 80%, transparent); padding: 4px 8px; border-radius: 3px; border: 1px solid var(--line); text-align: left; cursor: default; }
.ogc-badge-i { display: none; }
.ogc-toolbar { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ogc-toolbar > * { background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 3px; }
.ogc-views { display: flex; padding: 2px; gap: 2px; }
.ogc-views button { border: 0; background: none; padding: 5px 10px; border-radius: 2px; font-size: 12.5px; }
.ogc-views button.is-on { background: var(--accent); color: var(--accent-text); }
.ogc-use { display: flex; padding: 2px; gap: 2px; }
.ogc-use button { border: 0; background: none; padding: 5px 10px; border-radius: 2px; font-size: 12.5px; }
.ogc-use button[aria-checked="true"] { background: var(--accent); color: var(--accent-text); }
.ogc-travel { display: flex; align-items: center; gap: 10px; padding: 5px 10px; font-size: 12.5px; color: var(--muted); flex: 1 1 260px; }
.ogc-travel input { flex: 1; accent-color: var(--accent); }
.ogc-travel output { font-variant-numeric: tabular-nums; color: var(--text); min-width: 52px; text-align: right; font-weight: 600; }
.ogc-snap { padding: 6px 10px; font-size: 12.5px; }
.ogc-toolbar > .ogc-picks { display: none; background: none; border: 0; backdrop-filter: none; }
.ogc-picks select { flex: 1 1 0; min-width: 0; font: inherit; font-size: 13px; color: var(--text); padding: 8px 10px; border-radius: 3px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, transparent); }

/* Lens preview card (view-only) and the camera-POV sensor frame */
.ogc-canvas { overflow: hidden; }
.ogc-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  outline: 1px solid rgb(255 255 255 / .85); box-shadow: 0 0 0 100vmax rgb(10 12 16 / .55); }
.ogc-frame span { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 2px; font-size: 12px; color: #fff; background: rgb(10 12 16 / .6); font-variant-numeric: tabular-nums; }
.ogc-lens { position: absolute; top: 12px; right: 16px; width: min(300px, calc(100% - 32px)); max-height: calc(100% - 90px); overflow-y: auto;
  background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 3px; font-size: 12.5px; }
.ogc-lens-head { display: flex; align-items: center; padding-left: 12px; }
.ogc-lens-on { padding: 8px 0; }
.ogc-lens-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border: 0; background: none; text-align: left; }
.ogc-lens.is-off .ogc-lens-sum { opacity: .5; }
.ogc-lens-on:focus-visible, .ogc-lens-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.ogc-lens-title { font-weight: 600; }
.ogc-lens-sum { flex: 1; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ogc-lens.is-open .ogc-chev { transform: rotate(45deg) translate(-1px, -1px); }
.ogc-lens-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.ogc-lens-body[hidden] { display: none; }
.ogc-lens-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); }
.ogc-lens-field span { color: var(--text); }
.ogc-lens input, .ogc-lens select { font: inherit; color: var(--text); background: var(--chip); border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; }
.ogc-lens-field input { width: 64px; text-align: right; }
.ogc-lens-field select { min-width: 0; max-width: 190px; }
.ogc-lens-custom { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); }
.ogc-lens-custom input { width: 70px; text-align: right; }
.ogc-lens-custom[hidden] { display: none; }
.ogc-seg--sm button { padding: 3px 2px; }
.ogc-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.ogc-lens-read { margin: 2px 0 0; display: grid; gap: 2px; }
.ogc-lens-read dt { color: var(--muted); font-size: 12px; margin-top: 4px; }
.ogc-lens-read dd { margin: 0; font-variant-numeric: tabular-nums; }
.ogc-lens-aov { color: var(--muted); margin-left: 4px; }
.ogc-lens-ok { color: var(--ok); }
.ogc-lens-no { color: var(--no); cursor: help; }

/* Options panel: a dense inspector for the model. Every group is one row (label column, control column), sections are
   divided by rules and small caps headings, and selection is shown by fill and weight rather than by containers. */
.ogc-panel { --lab: 100px; background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; min-height: 0; padding: 14px 16px 0; font-size: 13px; }
.ogc-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; padding-bottom: 10px; }
.ogc-panel h1 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.ogc-price { margin: 0; font-size: 12px; color: var(--muted); }
.ogc-price strong { color: var(--text); font-weight: 600; }
.ogc-tag { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 12px; }

/* Sections: a rule and a small caps heading; collapsing one shows its picks on the heading line. */
.ogc-sec { border-top: 1px solid var(--line); }
.ogc-sec h2 { margin: 0; font: inherit; }
.ogc-sec-head { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 0 5px; border: 0; background: none; text-align: left; min-width: 0; }
.ogc-sec-title { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ogc-sec-head:hover .ogc-sec-title, .ogc-sec-head.is-hot .ogc-sec-title { color: var(--text); }
.ogc-sec-sum { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogc-chev { flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; }
.ogc-sec.is-open .ogc-chev, .ogc-specs[open] > summary .ogc-chev { transform: rotate(45deg) translate(-1px, -1px); }
.ogc-flag { flex: none; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.ogc-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--soft-line); }
.ogc-flag--auto::before { background: var(--auto-line); }
.ogc-sec-body { padding-bottom: 8px; }
.ogc-sec-body[hidden] { display: none; }
.ogc-sec-note, .ogc-notes { margin: 4px 0 0 calc(var(--lab) + 10px); }
.ogc-sec-note { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* One row per group. The row lights up with its part in the model (is-hot) and flashes when a part is clicked. */
.ogc-group { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 0 -6px; padding: 4px 6px; }
.ogc-group.is-hot { background: color-mix(in srgb, var(--hot) 9%, transparent); box-shadow: inset 2px 0 var(--hot); }
.ogc-group.is-flash { animation: ogc-flash 1.2s ease-out; }
@keyframes ogc-flash { from { background: color-mix(in srgb, var(--hot) 28%, transparent); } }
.ogc-label { padding-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.ogc-group.is-hot .ogc-label { color: var(--text); }
.ogc-ctl { min-width: 0; }
.ogc-hint { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.ogc-hint.is-open { white-space: normal; }
.ogc-hint--group { font-style: italic; }
/* Locked by a rule: visible, greyed, not clickable; the reason shows as a tooltip (and inline for rows and checks) */
.ogc-panel [aria-disabled="true"] { cursor: not-allowed; opacity: .42; }
.ogc-row[aria-disabled="true"] small, .ogc-check[aria-disabled="true"] small { font-style: italic; }

/* Segmented control: rounded cells in a tinted track; the pick is filled. */
.ogc-seg { display: flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--chip); }
.ogc-seg button { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 5px; background: none; padding: 3px 3px; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogc-seg button:not([aria-disabled="true"]):not([aria-checked="true"]):hover { background: var(--bg); }
.ogc-seg button[aria-checked="true"], .ogc-seg button[aria-checked="true"]:hover { background: var(--accent); color: var(--accent-text); font-weight: 600; }

/* Radio list: bare rows, a short spec on the right. */
.ogc-list { display: flex; flex-direction: column; }
.ogc-row { display: flex; align-items: baseline; gap: 7px; padding: 3px 0; border: 0; background: none; text-align: left; font-size: 12.5px; min-width: 0; }
.ogc-row small { flex: 1; min-width: 0; color: var(--muted); font-size: 11.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ogc-row-label { white-space: nowrap; }
.ogc-row:not([aria-disabled="true"]):hover .ogc-row-label { text-decoration: underline; text-underline-offset: 2px; }
.ogc-row[aria-checked="true"] .ogc-row-label { font-weight: 600; }
.ogc-dot { flex: none; align-self: center; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--muted); }
.ogc-row[aria-checked="true"] .ogc-dot { border: 3.5px solid var(--accent); }

/* Checkboxes (multi-choice groups, and on/off groups such as the extension) and the lens card's switch */
.ogc-checks { display: flex; flex-direction: column; }
.ogc-check, .ogc-switch { display: flex; align-items: baseline; gap: 7px; padding: 3px 0; border: 0; background: none; text-align: left; font-size: 12.5px; min-width: 0; }
.ogc-checks .ogc-check { width: 100%; }
.ogc-check small { flex: 1; min-width: 0; color: var(--muted); font-size: 11.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogc-box { flex: none; align-self: center; width: 12px; height: 12px; border-radius: 2px; border: 1.5px solid var(--muted); display: grid; place-items: center; }
.ogc-check[aria-checked="true"] { font-weight: 600; }
.ogc-check[aria-checked="true"] small { font-weight: 400; }
.ogc-check[aria-checked="true"] .ogc-box { background: var(--accent); border-color: var(--accent); }
.ogc-check[aria-checked="true"] .ogc-box::after { content: ""; width: 3px; height: 6px; border: solid var(--accent-text); border-width: 0 1.5px 1.5px 0; transform: translateY(-1px) rotate(45deg); }
.ogc-switch { align-items: center; font-weight: 600; }
.ogc-switch-track { flex: none; position: relative; width: 28px; height: 16px; border-radius: 99px; background: var(--line); transition: background .15s; }
.ogc-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.ogc-switch[aria-checked="true"] .ogc-switch-track { background: var(--accent); }
.ogc-switch[aria-checked="true"] .ogc-switch-track::after { transform: translateX(12px); }

.ogc-panel button:focus-visible, .ogc-panel summary:focus-visible, .ogc-views button:focus-visible, .ogc-use button:focus-visible { outline: 2px solid var(--hot); outline-offset: 1px; }

/* Rule notes: text with a coloured rule, not boxes. Blue: changed for you; amber: a recommendation. */
.ogc-note { margin: 4px 0 0; font-size: 12px; padding: 1px 0 1px 8px; border-left: 2px solid var(--soft-line); line-height: 1.4; }
.ogc-note--auto { border-left-color: var(--auto-line); }

/* Specs: the same two columns as the options. */
.ogc-specs { border-top: 1px solid var(--line); padding-bottom: 14px; }
.ogc-specs summary { display: flex; align-items: center; gap: 7px; padding: 8px 0 5px; cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ogc-specs summary::-webkit-details-marker { display: none; }
.ogc-specs summary:hover { color: var(--text); }
.ogc-specs dl { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); gap: 3px 10px; margin: 2px 0 0; font-size: 12px; line-height: 1.35; }
.ogc-specs dt { color: var(--muted); }
.ogc-specs dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Key stats and the quote button stay docked at the bottom of the panel (of the screen on phones). */
.ogc-dock { padding: 10px 16px 12px; background: var(--panel); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.ogc-sheet-tab { display: none; }
.ogc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ogc-stats > div + div { border-left: 1px solid var(--line); padding-left: 10px; }
.ogc-stats dt { font-size: 11px; color: var(--muted); }
.ogc-stats dd { margin: 1px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ogc-dock .ogc-actions { margin-top: 10px; }
.ogc-actions { display: flex; gap: 8px; margin-top: 18px; }
.ogc-actions button { padding: 8px 14px; border-radius: 3px; border: 1px solid var(--line); background: var(--chip); font-weight: 600; font-size: 13px; }
.ogc-actions .ogc-primary { flex: 1; background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* Quote dialog */
/* Opened with show(), not showModal() (see the quote dialog in og-configurator.js), so it centres itself and the
   shadow stands in for ::backdrop. The app behind it is inert while it's open. */
.ogc-dialog { position: fixed; inset: 0; margin: auto; z-index: 100; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45);
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); width: min(560px, calc(100vw - 32px)); padding: 22px; }
.ogc-dialog h2 { margin: 0 0 4px; }
.ogc-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.ogc-dialog input, .ogc-dialog textarea { font: inherit; font-weight: 400; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--chip); color: var(--text); }
.ogc-dialog form[hidden] { display: none; }
.ogc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ogc-wide { grid-column: 1 / -1; }
.ogc-muted { color: var(--muted); font-size: 13px; }
.ogc-hp { position: absolute; left: -9999px; }
/* The reCAPTCHA checkbox is a fixed 304 × 78 iframe; hold its space so nothing jumps. */
.ogc-captcha { min-height: 78px; margin-bottom: 10px; }
@media (max-width: 359px) { .ogc-captcha { transform: scale(.88); transform-origin: left top; } }
.ogc-status { margin: 0; font-size: 13px; color: var(--muted); }
.ogc-status:empty { display: none; }
.ogc-status--error { color: #c0392b; }
.ogc-status a { color: inherit; }
.ogc-actions button:disabled { opacity: .6; cursor: progress; }

/* Loading and "couldn't start" message, shown in place of the configurator */
.ogc-msg { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center; }
.ogc-msg p { max-width: 460px; margin: 0; }
.ogc-msg strong { color: var(--text); }
.ogc-msg a { color: var(--text); }

/* Phones in portrait: the model gets the screen. The options are a sheet over it, opened from a tab on the stats bar. */
@media (max-width: 860px) and (orientation: portrait) {
  .ogc { grid-template-columns: minmax(0, 1fr); }
  .ogc-viewer { grid-row: 1; }
  .ogc-panel { grid-column: 1; grid-row: 1; align-self: end; max-height: 78%; z-index: 2; display: none;
    border: 0; border-top: 1px solid var(--line); border-radius: 6px 6px 0 0; box-shadow: 0 -8px 24px rgb(0 0 0 / .25); padding: 10px 16px 12px; }
  .ogc.is-sheet-open .ogc-panel { display: block; }
  .ogc.is-sheet-open .ogc-toolbar { visibility: hidden; }
  .ogc-dock { grid-column: 1; border-left: 0; padding: 0 16px 12px; position: relative; z-index: 3; }
  .ogc-sheet-tab { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% + 32px); margin: 0 -16px 8px; padding: 7px 0;
    border: 0; border-bottom: 1px solid var(--line); background: none; font-size: 13px; font-weight: 600; }
  .ogc-sheet-tab .ogc-chev { transform: rotate(-135deg); }
  .ogc-sheet-tab[aria-expanded="true"] .ogc-chev { transform: rotate(45deg) translate(-1px, -1px); }
  .ogc-dock .ogc-actions { margin-top: 10px; }
  .ogc-dock .ogc-actions button { padding: 9px 12px; }
  .ogc-group, .ogc-row, .ogc-check { min-height: 30px; }   /* finger-sized rows */
  .ogc-seg button { padding: 7px 3px; }
  .ogc-label { padding-top: 8px; }
  .ogc-stats dd { font-size: 14px; }
  .ogc-tag { display: none; }
  .ogc-toolbar { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .ogc-snap { display: none; }
  .ogc-fields { grid-template-columns: 1fr; }
  .ogc-lens { top: 10px; left: 48px; right: 10px; width: auto; max-height: calc(100% - 20px); }
}
/* Phones in landscape: keep the side panel, narrower, with a shorter header. */
@media (orientation: landscape) and (max-height: 540px) {
  .ogc { grid-template-columns: minmax(0, 1fr) min(340px, 44vw); }
  .ogc-panel { padding: 10px 12px 0; --lab: 84px; }
  .ogc-dock { padding: 8px 12px 10px; }
  .ogc-dock .ogc-actions { margin-top: 8px; }
  .ogc-dock .ogc-actions button { padding: 8px 10px; font-size: 13px; }
  .ogc-stats dd { font-size: 13.5px; }
  .ogc-tag { display: none; }
  .ogc-toolbar { left: 8px; right: 8px; bottom: 8px; gap: 6px; }
  .ogc-snap { display: none; }
  .ogc-lens { top: 8px; left: 46px; right: auto; width: min(290px, calc(100% - 56px)); max-height: calc(100% - 16px); }
}
/* Small screens: view and use become two dropdowns, and the disclaimer shrinks to an (i) button; tap it for the text. */
@media (max-width: 860px) and (orientation: portrait), (orientation: landscape) and (max-height: 540px) {
  .ogc-toolbar > .ogc-use, .ogc-toolbar > .ogc-views { display: none; }
  .ogc-toolbar > .ogc-picks { display: flex; gap: 6px; flex: 1 1 100%; }
  .ogc-picks select, .ogc-lens input, .ogc-lens select { font-size: 16px; }   /* under 16px, iOS Safari zooms the page on focus */
  .ogc-badge { top: 10px; left: 10px; width: 30px; height: 30px; padding: 0; justify-content: center; cursor: pointer; z-index: 2; }
  .ogc-badge-i { display: block; font: italic 600 14px Georgia, serif; color: var(--text); }
  .ogc-badge-text { display: none; }
  .ogc-badge[aria-expanded="true"] { width: auto; height: auto; right: 10px; padding: 8px 12px; align-items: flex-start; }
  .ogc-badge[aria-expanded="true"] .ogc-badge-text { display: block; line-height: 1.4; }
}