/* OrderOptics — styles. Light/dark via [data-theme] on <html>. */
:root {
  --bg: #f6f7f9; --bg2: #ffffff; --bg3: #eef1f5; --fg: #17202a; --fg2: #4a5664; --muted: #7b8794;
  --line: #d9dee5; --accent: #0b6bcb; --accent2: #0a4f96; --accent-bg: #e6f0fb;
  --ok: #1a7f37; --ok-bg: #e7f5ea; --warn: #9a6700; --warn-bg: #fff6dc; --bad: #c62828; --bad-bg: #fdecec;
  --verify: #8250df; --verify-bg: #f3eefe;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
[data-theme="dark"] {
  --bg: #0f141a; --bg2: #161d25; --bg3: #1d2630; --fg: #e6edf3; --fg2: #b0bac5; --muted: #8b96a3;
  --line: #2b3642; --accent: #4ea1ff; --accent2: #82bdff; --accent-bg: #142a42;
  --ok: #4ac26b; --ok-bg: #132a1b; --warn: #e3b341; --warn-bg: #2d2410; --bad: #ff7b72; --bad-bg: #3a1a1a;
  --verify: #c297ff; --verify-bg: #2a1f40; --shadow: 0 1px 2px rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* iOS Safari / Android: no automatic text inflation. The drawing sheet is shown scaled down (zoom), and inflating its notes
   would push the lens area smaller (and change the drawing scale sent with the PDF). Text keeps its drawing size. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.sheet, .sheet * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font: 15px/1.55 var(--sans); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg2); border-bottom: 1px solid var(--line); }
.site-header .inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--fg); font-size: 1.05rem; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 30px; height: 30px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a { color: var(--fg2); padding: 6px 10px; border-radius: 8px; font-weight: 500; font-size: .93rem; }
.nav a:hover { background: var(--bg3); text-decoration: none; color: var(--fg); }
.nav a.active { background: var(--accent-bg); color: var(--accent); }
.icon-btn { background: transparent; border: 1px solid var(--line); color: var(--fg2); border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: .95rem; }
.icon-btn:hover { background: var(--bg3); }
.menu-toggle { display: none; }

main { max-width: 1240px; margin: 0 auto; padding: 24px 20px 60px; }
.page-head { margin-bottom: 18px; }
.page-head p { color: var(--fg2); max-width: 820px; }

/* layout */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-builder { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.grid-drawing { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-builder, .grid-drawing { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; position: absolute; top: 52px; left: 0; right: 0; background: var(--bg2); border-bottom: 1px solid var(--line); padding: 8px 14px; flex-direction: column; }
  .nav.open { display: flex; }
  .menu-toggle { display: inline-block; }
}
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.card h2 { display: flex; align-items: center; gap: 8px; }
.card + .card { margin-top: 18px; }
.sticky { position: sticky; top: 74px; }
.muted { color: var(--muted); } .small { font-size: .86rem; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* forms */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--fg2); margin: 0 0 4px; }
.field { margin-bottom: 12px; min-width: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; }
input[type=text], input[type=number], select, textarea {
  width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: .93rem; min-width: 0;
}
textarea { font-family: var(--mono); resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
input.custom { margin-top: 6px; font-family: var(--mono); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9rem; color: var(--fg); }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.btn:hover { background: var(--accent2); text-decoration: none; }
.btn.secondary { background: var(--bg2); color: var(--fg); border-color: var(--line); }
.btn.secondary:hover { background: var(--bg3); }
.btn.ghost { background: transparent; color: var(--accent); border-color: transparent; padding: 6px 8px; }
.btn.small { padding: 5px 10px; font-size: .84rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--bg2); border: 0; padding: 7px 12px; color: var(--fg2); cursor: pointer; font: inherit; font-size: .88rem; }
.seg button.on { background: var(--accent); color: #fff; }

/* callout output */
.callout-out { font-family: var(--mono); font-size: 1.45rem; padding: 16px; background: var(--bg3); border: 1px dashed var(--line); border-radius: 10px; word-break: break-word; min-height: 64px; display: flex; align-items: center; }
.explain { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .92rem; }
.explain td { border-top: 1px solid var(--line); padding: 7px 8px; vertical-align: top; }
.explain td:first-child { font-family: var(--mono); white-space: nowrap; color: var(--accent); width: 1%; }
.badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg3); color: var(--fg2); border: 1px solid var(--line); }
.badge.verify { background: var(--verify-bg); color: var(--verify); border-color: transparent; }
.notice { border-radius: 8px; padding: 9px 12px; margin-top: 10px; font-size: .88rem; }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.bad { background: var(--bad-bg); color: var(--bad); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice.verify { background: var(--verify-bg); color: var(--verify); }
.notice.info { background: var(--accent-bg); color: var(--accent2); }
[data-theme="dark"] .notice.info { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: .82rem; background: var(--bg3); border: 1px solid var(--line); color: var(--fg); padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip .count { font-family: var(--sans); color: var(--muted); margin-left: 5px; font-size: .75rem; }

/* autocomplete */
.ac-wrap { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); margin-top: 4px; max-height: 280px; overflow: auto; display: none; }
.ac-list.open { display: block; }
.ac-item { padding: 7px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: .9rem; }
.ac-item small { font-family: var(--sans); color: var(--muted); }
.ac-item.sel, .ac-item:hover { background: var(--accent-bg); }

/* picker */
.picker { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--bg); margin-bottom: 10px; }
.picker .picker-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.picker .picker-head .code-pill { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.picker .preview { font-family: var(--mono); font-size: .92rem; margin-top: 4px; color: var(--fg); word-break: break-word; }
.rms-row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; margin-bottom: 6px; }

/* home */
.hero { padding: 30px 0 10px; }
.hero h1 { font-size: 2.3rem; letter-spacing: -.01em; }
.hero p { font-size: 1.08rem; color: var(--fg2); max-width: 760px; }
.feature { display: block; color: var(--fg); }
.feature:hover { text-decoration: none; border-color: var(--accent); }
.feature .ico { font-size: 1.5rem; }
.feature h3 { margin-top: 8px; }
.feature p { color: var(--fg2); font-size: .92rem; margin: 0; }
.code-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.code-table th, .code-table td { text-align: left; padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.code-table th { color: var(--fg2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-top: 0; }
.code-table td:first-child { font-family: var(--mono); font-weight: 700; color: var(--accent); }

/* quiz */
.progress { height: 8px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); }
.topic-row { display: grid; grid-template-columns: 1fr 110px 54px; gap: 10px; align-items: center; padding: 6px 0; font-size: .9rem; cursor: pointer; }
.topic-row.on { font-weight: 700; color: var(--accent); }
.q-prompt { font-size: 1.1rem; margin-bottom: 12px; }
.q-callout { font-family: var(--mono); font-size: 1.3rem; background: var(--bg3); padding: 10px 14px; border-radius: 8px; display: inline-block; margin-bottom: 12px; }
.choice { display: block; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font: inherit; }
.choice:hover:not(:disabled) { border-color: var(--accent); }
.choice.correct { border-color: var(--ok); background: var(--ok-bg); }
.choice.wrong { border-color: var(--bad); background: var(--bad-bg); }
.choice:disabled { cursor: default; }

/* assistant */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 4px 2px 10px; min-height: 0; }
.msg { margin: 10px 0; display: flex; }
.msg .bubble { max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: .93rem; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot .bubble { background: var(--bg3); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.bot .bubble p:last-child { margin-bottom: 0; }
.msg .src { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.msg .fb { margin-top: 6px; display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--muted); }
.msg .fb button { background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; padding: 2px 7px; color: var(--fg2); }
.msg .fb button.on { background: var(--accent-bg); border-color: var(--accent); }
.chat-form { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.assistant-page .chat { height: 64vh; }
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; border-radius: 999px; padding: 12px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.drawer { position: fixed; right: 20px; bottom: 76px; width: min(420px, calc(100vw - 40px)); height: min(560px, calc(100vh - 120px)); z-index: 61; display: none; flex-direction: column; padding: 14px; }
.drawer.open { display: flex; }

/* drawing */
.svg-wrap { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.svg-wrap svg { width: 100%; height: auto; display: block; }
.tol-col h3 { font-size: .95rem; margin-bottom: 6px; }
.tol-entry { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

footer.site-footer { border-top: 1px solid var(--line); background: var(--bg2); color: var(--muted); font-size: .84rem; }
footer.site-footer .inner { max-width: 1240px; margin: 0 auto; padding: 18px 20px; }
.disclaimer { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 10px 12px; font-size: .86rem; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 9px 16px; border-radius: 8px; font-size: .9rem; z-index: 100; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
kbd { font-family: var(--mono); font-size: .8rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; }
.drawer .chat { flex: 1; min-height: 0; }
.picker.compact { padding: 10px; }
.picker.compact .fields { grid-template-columns: 1fr; gap: 6px; }
.picker.compact .field { margin-bottom: 4px; }
.picker.compact label { font-size: .75rem; }
.picker.compact select, .picker.compact input { padding: 6px 8px; font-size: .86rem; }
.src-list li { margin-bottom: 10px; }
.grid > .card + .card { margin-top: 0; }
.item-out { font-family: var(--mono); font-size: .95rem; padding: 12px; background: var(--bg3); border: 1px dashed var(--line); border-radius: 10px; margin-top: 8px; line-height: 1.6; }
#tolCols .tol-col { margin-bottom: 14px; }
#tolCols .picker.compact .fields { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 960px) { .site-header .menu-toggle { margin-left: auto; } }
[data-theme="dark"] .btn:not(.secondary):not(.ghost) { color: #0b1420; }
[data-theme="dark"] .msg.user .bubble { color: #0b1420; }
/* aspheric data (drawing page) */
.field.check { display: flex; align-items: flex-end; }
.field.check label { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
input[type=checkbox] { width: auto; }
#asphFields h3 { margin: 14px 0 8px; font-size: 1rem; }
.asph-fields input { font-family: var(--mono); }

/* ===================================================================== v2: slim header + side menu */
.site-header .inner { gap: 12px; padding: 8px 18px; max-width: none; }
.brand > span { display: flex; flex-direction: column; line-height: 1.15; }
.brand .tagline { font-weight: 500; font-size: .74rem; color: var(--muted); }
.site-header .actions { display: flex; gap: 8px; align-items: center; }
.site-header .actions select.preset { width: auto; padding: 6px 8px; font-size: .86rem; color: var(--fg2); background: transparent; }
.menu-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.menu-shade { position: fixed; inset: 0; background: rgba(15, 20, 26, .35); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 80; }
.side-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--bg2); border-left: 1px solid var(--line); z-index: 90;
  transform: translateX(100%); transition: transform .2s ease; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.12); visibility: hidden; }
body.menu-open .menu-shade { opacity: 1; pointer-events: auto; }
body.menu-open .side-menu { transform: none; visibility: visible; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.side-nav { display: flex; flex-direction: column; padding: 8px; overflow: auto; flex: 1; }
.side-nav a { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 8px; color: var(--fg); }
.side-nav a small { color: var(--muted); font-size: .8rem; }
.side-nav a:hover { background: var(--bg3); text-decoration: none; }
.side-nav a.active { background: var(--accent-bg); }
.side-nav a.active strong { color: var(--accent); }
.side-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.site-footer .disclaimer { background: none; border: 0; padding: 0; font-size: .82rem; color: var(--fg2); }
.site-footer .not-affiliated { display: inline; color: var(--muted); }
.page-head h1 { font-size: 1.6rem; }

/* ===================================================================== landing: interactive drawing sheet */
.sheet-main { max-width: none; padding: 14px 16px 30px; overflow-x: auto; position: relative; z-index: 1; }
.sheet-hint { text-align: center; color: var(--muted); font-size: .86rem; margin: 0 0 8px; }
.sheet-msg { border-radius: 8px; padding: 8px 12px; margin: 0 auto 10px; font-size: .88rem; max-width: 820px; }
.sheet-msg.bad { background: var(--bad-bg); color: var(--bad); } .sheet-msg.warn { background: var(--warn-bg); color: var(--warn); }
.sheet { --ink: #111; background: #fff; color: var(--ink); margin: 0 auto; width: 819px; aspect-ratio: 210 / 297; box-sizing: border-box;
  border: 1px solid #c9ced6; box-shadow: 0 10px 30px rgba(16,24,40,.12); padding: 26px; display: flex; flex-direction: column; gap: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12.5px; line-height: 1.35; position: relative; outline: 1.5px solid #111; outline-offset: -14px; }
.sheet-credit { position: absolute; top: 3px; right: 14px; font-size: 8px; line-height: 8px; height: 8px; white-space: nowrap; color: #8a929c; text-decoration: none; letter-spacing: .01em; z-index: 2; }
.sheet-credit:hover { color: #0b6bcb; text-decoration: underline; }
.sheet-drawing svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sheet-drawing .hatch { pointer-events: none; }
.sheet .hot { cursor: pointer; border-radius: 3px; transition: background .12s, outline-color .12s; }
.sheet text.hot { fill: #111; }
.sheet text.hot:hover, .sheet text.hot.editing { fill: #0b6bcb; text-decoration: underline; }
.sheet polygon.hot:hover { fill: #f2f7fd; }
.sheet div.hot:hover, .sheet table.hot:hover, .sheet ol.hot:hover, .sheet .hot.editing { background: #eaf3fd; outline: 1px dashed #0b6bcb; }
.sheet .hot:focus-visible { outline: 2px solid #0b6bcb; }
.sheet-table, .title-block, .sheet .mini { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sheet-table th, .sheet-table td { border: 1px solid #111; padding: 4px 6px; vertical-align: top; text-align: left; }
.sheet-table th { font-weight: 700; }
.cell-line { padding: 1px 3px; margin: 0 -3px; overflow-wrap: anywhere; }
.cell-line.mono { font-family: inherit; }
.cell-line.strong { font-weight: 700; }
.cell-line.ghost { color: #8a94a3; font-size: .9em; opacity: 0; }
.sheet:hover .cell-line.ghost, .cell-line.ghost:focus { opacity: 1; }
.sheet-h { margin-bottom: 3px; }
.formula { text-align: center; margin: 4px 0 6px; }
.asph-tables { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.asph-tables.side { flex-direction: row; gap: 10px; }
.sheet .mini { width: auto; font-size: .92em; }
.sheet .mini th, .sheet .mini td { border: 1px solid #111; padding: 1px 6px; text-align: right; }
.sheet .mini td:first-child, .sheet .mini th:first-child { text-align: left; }
.sheet-notes { flex: 0 0 auto; }
.sheet-notes ol { margin: 0; padding: 2px 4px 2px 22px; }
.title-block td { border: 1px solid #111; padding: 2px 6px 3px; vertical-align: top; }
.title-block td:first-child { width: 47%; }
.title-block span { display: block; font-size: .78em; color: #333; }
.title-block b { font-weight: 400; }
.title-block input { width: 100%; border: 0; border-radius: 3px; background: transparent; color: #111; padding: 1px 2px; margin: 0 -2px; font: inherit; }
.title-block .tb-title textarea { display: block; width: 100%; border: 0; border-radius: 3px; background: transparent; color: #111; padding: 1px 2px; margin: 0 -2px; font: inherit; font-size: 1.25em; font-weight: 700; line-height: 1.2; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.title-block .tb-title textarea:hover { background: #eaf3fd; }
.title-block .tb-title textarea:focus { outline: 1px dashed #0b6bcb; background: #eaf3fd; }
.sheet textarea.edited { color: var(--edited); }
.title-block input:hover { background: #eaf3fd; }
.title-block input:focus { outline: 1px dashed #0b6bcb; background: #eaf3fd; }

/* popover */
.popover { position: absolute; z-index: 70; width: min(440px, calc(100vw - 16px)); background: var(--bg2); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16,24,40,.22); font-family: var(--sans); }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.pop-head .icon-btn { padding: 2px 7px; }
.pop-body { padding: 12px 14px 4px; max-height: 60vh; overflow: auto; }
.pop-body .field { margin-bottom: 8px; }
.pop-body .field.wide { grid-column: 1 / -1; }
.pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: end; }
.pop-body details { margin: 4px 0 8px; } .pop-body summary { cursor: pointer; font-size: .86rem; color: var(--accent); margin-bottom: 6px; }
.pop-body .picker { border: 0; padding: 0; background: none; }
.pop-body .picker .fields { grid-template-columns: 1fr 1fr; }
.pop-foot { display: flex; justify-content: flex-end; padding: 8px 14px 12px; }
.sheet-page .site-footer { border-top: 0; background: transparent; }
.sheet-page .site-footer .inner { max-width: 820px; text-align: center; }
.narrow { max-width: 820px; }

/* ===================================================================== landing: ribbon toolbar */
.ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 5px 16px; border-top: 1px solid var(--line); background: var(--bg2); font-size: .82rem; }
.rb-group { display: flex; align-items: center; gap: 7px; }
.rb-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.rb-ctrls { display: flex; align-items: center; gap: 4px; }
.ribbon select { font-size: .82rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.rb-btn { min-width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; font-size: .9rem; line-height: 1; }
.rb-btn.wide { padding: 0 10px; font-size: .8rem; } .rb-btn:hover { border-color: var(--accent); }
.rb-pct { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.ribbon .spacer { flex: 1; } .ribbon #dlPdf { padding: 6px 14px; }
@media (max-width: 640px) { .ribbon { gap: 6px 12px; padding: 5px 10px; } .rb-label { display: none; } .ribbon .spacer { display: none; } .ribbon #dlPdf { flex: 1 1 100%; } }

/* ===================================================================== landing: animated background (behind the sheet only) */
body.sheet-page { background: transparent; }
body.sheet-page::before, body.sheet-page::after { content: ""; position: fixed; z-index: 0; pointer-events: none; }
body.sheet-page::before { inset: 0; background: linear-gradient(120deg, #e8f0fb, #dff3f1, #e6e8fb, #e3f1fa, #e8f0fb); background-size: 400% 400%;
  animation: oo-grad 26s ease-in-out infinite alternate; will-change: background-position; }
body.sheet-page::after { inset: -144px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg transform='rotate(45 36 36)' fill='none' stroke='#1d4ed8' stroke-width='1.6' opacity='.5'%3E%3Crect x='24' y='24' width='24' height='24' rx='5'/%3E%3Cpath d='M33 28 Q29 36 33 44 L39 44 Q43 36 39 28 Z'/%3E%3Cline x1='26' y1='36' x2='46' y2='36' stroke-dasharray='2.4 1.6' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; opacity: .4;
  animation: oo-drift 40s linear infinite; will-change: transform; }
[data-theme="dark"] body.sheet-page::before { background-image: linear-gradient(120deg, #0d1424, #0c1f26, #141533, #0d1a2b, #0d1424); }
[data-theme="dark"] body.sheet-page::after { opacity: .3; filter: invert(1) hue-rotate(180deg); }
.sheet-page .site-header, .sheet-page .site-footer { position: relative; z-index: 2; } .sheet-page .site-header { position: sticky; z-index: 50; }
@keyframes oo-grad { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes oo-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(72px, 72px, 0); } }
@media (prefers-reduced-motion: reduce) { body.sheet-page::before, body.sheet-page::after { animation: none; } }
.sheet > .title-block { margin-top: auto; }
.sheet { padding-bottom: 13px; }
.sheet .formula .sag-eq { display: block; width: 21em; max-width: 100%; height: auto; margin: 4px auto 6px; }
.rb-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .rb-btn.active { color: #0b1420; }

/* ===================================================================== landing: drawings gallery */
.gallery { position: relative; }
.g-view { overflow: clip; transition: height .3s; touch-action: pan-y; padding: 2px 0 6px; }
.g-track { display: flex; align-items: flex-start; gap: 36px; width: max-content; transition: transform .42s cubic-bezier(.22,.7,.2,1); will-change: transform; }
.g-track.no-anim { transition: none; }
.g-slide { flex: 0 0 auto; }
.g-slide:not(.current) { cursor: pointer; opacity: .55; transition: opacity .2s; }
.g-slide:not(.current):hover { opacity: .8; }
.g-slide .sheet { margin: 0; }
.sheet.snap .tb-val { min-height: 1.3em; padding: 1px 0; }
.sheet.snap .tb-title .tb-val { font-size: 1.25em; font-weight: 700; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.g-nav { position: absolute; top: 45vh; top: min(45vh, 50%); transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg2); color: var(--fg); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(16,24,40,.15); }
.g-nav.prev { left: 6px; } .g-nav.next { right: 6px; }
.g-nav:disabled { opacity: .3; cursor: default; }
.gallery.single .g-nav { display: none; }
.g-ind { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: .82rem; color: var(--fg2); position: relative; z-index: 1; }
.g-ind[hidden] { display: none; }
.g-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.g-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--accent); background: transparent; cursor: pointer; }
.g-dot.on { background: var(--accent); }

/* ribbon dropdowns */
.dd { position: relative; display: inline-flex; }
.dd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 190px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(16,24,40,.18); padding: 4px; display: flex; flex-direction: column; }
.dd-menu.right { left: auto; right: 0; }
.dd-menu[hidden], .dd-sub[hidden] { display: none; }
.dd-menu button { text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 6px; color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer; }
.dd-menu button:hover, .dd-menu button:focus-visible { background: var(--bg); }
.dd-menu button.danger { color: var(--bad); }
.dd-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.dd-sub { display: flex; flex-direction: column; padding-left: 12px; border-left: 2px solid var(--line); margin: 0 0 2px 10px; }
.rb-dl { display: flex; gap: 8px; align-items: center; }
.split-wrap #dlAll { border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 6px 12px; }
.split-wrap .split { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding: 6px 8px; }
@media (max-width: 640px) { .rb-dl { flex: 1 1 100%; } .rb-dl #dlPdf { flex: 1; } .g-nav { width: 34px; height: 34px; } }

/* ===================================================================== sheet layout: free lens area on top, notes → table → title block at the bottom */
.sheet { gap: 0; }
.sheet-top { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 15.6px; margin-bottom: 8px; }
.sheet-drawing { flex: 1 1 0; align-self: stretch; position: relative; min-width: 0; }
.asph-col { flex: 0 0 auto; font-size: .82em; line-height: 1.3; }
.asph-col[hidden] { display: none; }
.asph-col .formula .sag-eq { width: 20em; margin: 2px auto 3px; }
.asph-col .asph-legend { font-size: .82em; color: #333; margin: 0 0 6px; }
.asph-col .mini { margin: 2px 0 6px; }
.asph-col .sheet-h { margin: 2px 0 2px; }
.sheet > .sheet-notes { margin-bottom: 8px; }
.sheet > .sheet-table + .title-block { margin-top: -1px; }
.sheet[data-orient="landscape"] .asph-col { font-size: .76em; line-height: 1.22; }
.sheet[data-orient="landscape"] .asph-col .formula .sag-eq { margin: 0 auto 1px; }
.sheet[data-orient="landscape"] .asph-col .mini td, .sheet[data-orient="landscape"] .asph-col .mini th { padding: 0 5px; }

/* ---- title block (full), revision block, status stamp ---- */
.title-block td { padding: 1px 5px 2px; }
.title-block td:first-child { width: auto; }
.title-block span { font-size: .66em; letter-spacing: .02em; }
.title-block .tb-strong input { font-weight: 700; }
.title-block .tb-2 { display: flex; gap: 4px; align-items: baseline; }
.title-block .tb-2 input { flex: 1 1 auto; min-width: 0; }
.title-block .tb-2 input.d { flex: 0 0 5.6em; font-size: .86em; text-align: right; }
.title-block .tb-sheet input.n { flex: 0 0 2.2em; text-align: center; }
.title-block .tb-sheet em { font-style: normal; font-size: .8em; }
.title-block .tb-tol { font-size: .7em; line-height: 1.25; }
.title-block .tb-proj { text-align: center; }
.title-block .tb-proj span { text-align: left; }
.title-block .proj-sym { display: block; margin: 1px auto 0; height: 26px; width: auto; }
.title-block .tb-logo { vertical-align: middle; text-align: center; height: 40px; }
.tb-logo-box img { max-width: 100%; max-height: 34px; display: block; margin: 0 auto; }
.tb-logo-box .ghost-txt, .rev-block.empty .ghost { color: #7a8aa0; font-size: .8em; }
.title-block .tb-foot { font-size: .72em; }
.title-block .tb-foot b { margin-right: .4em; }
.title-block .tb-foot input { width: auto; min-width: 50%; display: inline-block; font-size: 1em; }
.title-block input[readonly] { cursor: pointer; }
.sheet .rev-block { align-self: flex-end; width: 468px; max-width: 100%; margin: 0 0 6px auto; }
.sheet .rev-block.empty { position: absolute; z-index: 2; top: 17px; right: 18px; width: auto; margin: 0; }
.sheet .rev-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: .7em; }
.sheet .rev-table th, .sheet .rev-table td { border: 1px solid #111; padding: 1px 4px; text-align: center; }
.sheet .rev-table td:nth-child(3) { text-align: left; width: 55%; }
.sheet .stamp { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-28deg); pointer-events: none; white-space: nowrap;
  font: 800 64px/1 Helvetica, Arial, sans-serif; color: rgba(185, 28, 28, .2); letter-spacing: .04em; z-index: 3; }
.sheet .stamp.ok { color: rgba(21, 128, 61, .2); }
.sheet .cell-line.none-code { color: #555; }
.sheet-table thead.hot { cursor: pointer; }
.popover .rev-row { display: grid; grid-template-columns: 3.2em 6.8em 1fr 4.4em 5.4em auto; gap: 4px; margin-bottom: 4px; }
.popover .rev-row input { min-width: 0; }
.popover .pop-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.popover textarea { width: 100%; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace; }
.sheet .bottom-row { display: flex; align-items: flex-end; gap: 11px; }
.sheet .bottom-row { margin-top: auto; }
.sheet .bottom-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: .89em; }
.sheet .bottom-left .sheet-notes { margin: 0 0 5px; }
.sheet .bottom-row .title-block { flex: 0 0 42%; width: 42%; margin-top: 0; }
.sheet .sheet-top > .rev-block.side { align-self: flex-start; flex: 0 0 auto; width: 390px; margin: 0 0 0 auto; }

/* ---- user edits shown in navy blue on screen only (PDF stays black) ---- */
.sheet { --edited: #1F4E99; }
.sheet .edited, .sheet .edited td, .sheet input.edited, .sheet .tb-val.edited { color: var(--edited); }
.sheet .edited td[data-f]:not(.edited) { color: #111; }
.sheet svg text.edited { fill: var(--edited); }
.sheet .mini td.edited { color: var(--edited); }
.sheet .rev-table tr.edited td { color: var(--edited); }
.sheet.dark { --edited: #8DB8FF; }
.hint-legend { margin-left: .8em; font-size: .92em; opacity: .9; }
.hint-legend .edited { color: #1F4E99; font-weight: 600; }
[data-theme="dark"] .hint-legend .edited { color: #8DB8FF; }
/* landscape: narrower title block — names and dates on separate lines, footer on its own line */
.sheet .bottom-row .title-block .tb-2:not(.tb-sheet) { flex-direction: column; gap: 0; align-items: stretch; }
.sheet .bottom-row .title-block .tb-2 input.d { flex: 0 0 auto; width: 100%; text-align: left; }
.sheet .bottom-row .title-block .tb-foot b { display: block; }
.sheet .bottom-row .title-block .tb-foot input { display: block; width: 100%; }
/* fab-method contextual ribbon group */
.rb-context { padding-left: 8px; border-left: 2px solid var(--accent); }
.rb-field { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; color: var(--muted, #5b6472); }
.rb-field input[type=text] { height: 26px; border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; background: var(--bg); color: var(--fg); font-size: .8rem; }
.rb-field select { height: 26px; font-size: .8rem; }
.fab-hint { color: #1F4E99; }
/* landscape: notes across the full width (two columns) when that gives a shorter bottom band */
.sheet .notes.wide, #notes.wide { font-size: .89em; margin-bottom: 4px; }
#notes.wide ol { column-count: 2; column-gap: 22px; }
#notes.wide li { break-inside: avoid; }
/* PDF import: review dialog + drop hint */
.imp-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.imp-box { background: var(--bg, #fff); color: var(--fg, #111); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: min(760px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 18px 20px 14px; }
.imp-box h2 { margin: 0 0 2px; font-size: 1.2rem; }
.imp-box h3 { margin: 14px 0 4px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #5b6472); }
.imp-file { margin: 0 0 8px; }
.imp-msg { margin: 8px 0; }
.imp-msg.ok { color: #14532d; }
.imp-list { overflow: auto; flex: 1 1 auto; border-top: 1px solid var(--line, #ddd); border-bottom: 1px solid var(--line, #ddd); padding: 0 2px 10px; }
.imp-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.imp-table th { text-align: left; font-weight: 600; padding: 3px 8px 3px 4px; width: 34%; vertical-align: top; }
.imp-table td { padding: 3px 4px; vertical-align: top; }
.imp-table td:first-child { width: 26px; }
.imp-row.low { background: #fff7e6; }
.imp-row.info { color: var(--muted, #5b6472); }
.imp-row.unrec td { color: var(--muted, #5b6472); font-size: .84rem; }
.imp-val { width: 100%; font: inherit; padding: 2px 6px; border: 1px solid var(--line, #ccc); border-radius: 5px; background: var(--bg, #fff); color: #1F4E99; }
.imp-txt { color: #1F4E99; }
.imp-flag { display: inline-block; font-size: .72rem; font-weight: 700; color: #92400e; background: #fde68a; border-radius: 4px; padding: 0 5px; }
.imp-info { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; color: #334155; font-size: .7rem; text-align: center; line-height: 16px; font-style: italic; }
.imp-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; }
body.drop-pdf #gallery, body.drop-pdf .sheet-wrap { outline: 3px dashed #1F4E99; outline-offset: -6px; }
body.drop-pdf::after { content: 'Drop a PDF drawing to import it as a new drawing'; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1F4E99; color: #fff; padding: 8px 16px; border-radius: 8px; z-index: 210; font-size: .9rem; }

/* ===================================================================== launch: feedback / waitlist / storage / hints / legal */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.side-note { flex-basis: 100%; margin: 4px 0 0; line-height: 1.4; }
.waitlist-prompt { margin: 8px 0 4px; }
.oo-modal-box { width: min(520px, 100%); }
.oo-form { display: flex; flex-direction: column; gap: 10px; }
.oo-field { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; font-weight: 600; }
.oo-field input, .oo-field textarea, .oo-field select { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--fg); }
.oo-field textarea { resize: vertical; }
.oo-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.oo-form-msg { margin: 0; min-height: 1.2em; }
.oo-form-msg.bad { color: var(--bad); }
.oo-thanks p { margin: 6px 0; }
.oo-nudge { position: fixed; right: 16px; bottom: 16px; z-index: 150; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,24,40,.18); padding: 10px 8px 10px 14px; font-size: .88rem; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); }
.storage-warn { background: var(--bad-bg); color: var(--bad); padding: 10px 16px; font-size: .88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; position: sticky; top: 0; z-index: 120; }
.storage-warn .icon-btn { color: inherit; }
.first-hint { max-width: 820px; margin: 0 auto 10px; background: var(--ok-bg); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; font-size: .9rem; }
.first-hint p { margin: 0; flex: 1; }
.legal .card h2 { font-size: 1.05rem; }
.legal .card p, .legal .card li { line-height: 1.55; }

/* ===================================================================== Get a quote */
.btn.btn-quote { background: #c2410c; border-color: #c2410c; color: #fff; font-weight: 700; }
.btn.btn-quote:hover { background: #9a3412; border-color: #9a3412; }
.ribbon #quoteBtn { padding: 6px 14px; }
@media (max-width: 640px) { .rb-dl #quoteBtn { flex: 1 1 100%; } .rb-dl { flex-wrap: wrap; } }
.q-box { width: min(760px, 100%); }
.q-form { min-height: 0; flex: 1 1 auto; }
.q-scroll { overflow: auto; flex: 1 1 auto; max-height: calc(100vh - 230px); padding: 2px 4px 6px 2px; display: flex; flex-direction: column; gap: 10px; }
.q-lead { margin: 2px 0 8px; }
.q-sec { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; }
.q-sec legend { font-weight: 700; font-size: .9rem; padding: 0 4px; }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.q-grid legend { grid-column: 1 / -1; }
.q-wide, .q-grid .q-warn { grid-column: 1 / -1; }
@media (max-width: 560px) { .q-grid { grid-template-columns: 1fr; } }
.q-radios { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; margin-bottom: 6px; }
.q-radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.q-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.q-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; font-size: .78rem; text-align: center; cursor: pointer; background: var(--bg2); }
.q-pick input { align-self: flex-start; }
.q-thumb { width: 64px; height: 40px; object-fit: contain; background: #fff; border-radius: 4px; border: 1px solid var(--line); flex: 0 0 auto; }
.q-item { border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; background: var(--bg2); }
.q-item summary { display: flex; align-items: center; gap: 10px; padding: 5px 8px; cursor: pointer; font-size: .88rem; }
.q-it-title { flex: 1; font-weight: 600; }
.q-item-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 4px 10px 10px; }
@media (max-width: 560px) { .q-item-body { grid-template-columns: 1fr; } }
.q-hint { margin: 2px 0; }
.q-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.q-bulk input { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); width: 140px; }
.q-check { display: flex; align-items: flex-start; gap: 6px; font-size: .88rem; font-weight: 400; }
.q-check input { margin-top: 3px; }
.q-consent { padding: 8px 10px; background: var(--bg3); border-radius: 8px; }
.q-warn { color: var(--warn); background: var(--warn-bg); border-radius: 6px; padding: 6px 8px; margin: 0; }
.q-done p { margin: 8px 0; line-height: 1.5; }
.q-ref { font-size: 1.1rem; }
.q-ref strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: .04em; background: var(--accent-bg); padding: 2px 8px; border-radius: 6px; }
.q-picks[hidden], .q-bulk[hidden], .q-item[hidden], .q-warn[hidden] { display: none; }
.q-item summary .q-thumb { width: 72px; height: 44px; }
.q-pick .q-thumb { width: 120px; height: 72px; }

/* ===================================================================== phones only (append to end of css/style.css; desktop unchanged) */
/* 1. narrow phones: header row must fit 375px (iPhone SE / mini) — stops the whole page panning sideways */
@media (max-width: 640px) {
  .site-header .inner { padding: 6px 10px; gap: 8px; }
  .brand, .brand > span { min-width: 0; }
  .brand .tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-btn { flex: 0 0 auto; }
  .sheet-main { padding: 8px 6px 24px; }                 /* fit-width sheet gets ~6% bigger */
}
@media (max-width: 400px) { .menu-btn > span { display: none; } }

/* 2. every phone, portrait or landscape */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  /* header + ribbon scroll away instead of pinning 35–66% of the screen */
  .sheet-page .site-header { position: relative; }
  /* compact ribbon: no labels, Drawings + Template share row 1, Quote + PDF share the last row */
  .ribbon { gap: 6px 8px; padding: 6px 10px; }
  .rb-label, .ribbon .spacer { display: none; }
  .ribbon > * { order: 1; }
  .ribbon > .rb-group:first-child, .ribbon > .rb-group:has(#templateBtn) { order: 0; }
  .ribbon > .rb-dl { order: 2; flex: 1 1 100%; flex-wrap: nowrap; }
  .rb-dl #quoteBtn, .rb-dl #dlPdf { flex: 1 1 0; justify-content: center; white-space: nowrap; padding: 6px 8px; min-height: 44px; }
  body:has(.gallery.single) .rb-dl .split-wrap { display: none; }   /* "Download all" only when there are 2+ drawings */
  /* tap targets ≥ 40px; 16px selects so iOS doesn't zoom on focus */
  .rb-btn { min-height: 40px; min-width: 36px; }
  .rb-btn.wide { white-space: nowrap; padding: 0 7px; }
  .rb-group:has(#zoomOut) .rb-ctrls { flex-wrap: wrap; }
  #fabSel { width: 8.5em; } #preset { width: 12em; } #statusSel { max-width: 9.5em; }
  .ribbon select { min-height: 40px; font-size: 16px; }
  .dd-menu { max-width: calc(100vw - 20px); }
  .dd-menu button { padding: 12px; font-size: 1rem; }
  /* modals: size to the *visible* viewport (iOS toolbars) and scroll inside */
  .imp-overlay { padding: 8px; }
  .imp-box { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 14px 14px 10px; }
  .oo-modal-box { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .q-scroll { max-height: none; min-height: 0; }
  .imp-foot .btn { min-height: 44px; }
  .q-radio input[type=radio], .q-check input[type=checkbox] { width: 20px; height: 20px; }
  /* 16px form text in modals + popovers = no iOS focus zoom */
  .imp-overlay input, .imp-overlay select, .imp-overlay textarea,
  .popover input, .popover select, .popover textarea { font-size: 16px; }
  .pop-body { max-height: 60vh; max-height: 60dvh; }
  .site-footer .inner a { display: inline-block; padding: 6px 0; }
}

/* ===================================================================== phones: one-row ribbon + "More tools" toggle (hidden on desktop) */
.rb-more, .lbl-short, .rb-more .more-short { display: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .ribbon .rb-more { display: inline-block; order: 0; }
  .ribbon.rb-collapsed { flex-wrap: nowrap; }
  .ribbon.rb-collapsed > :not(:first-child):not(.rb-more):not(.rb-dl), .ribbon.rb-collapsed #importPdfBtn, .ribbon.rb-collapsed .split-wrap { display: none; }
  .ribbon.rb-collapsed > .rb-dl { flex: 1 1 0; min-width: 0; gap: 6px; }
  .ribbon.rb-collapsed .rb-dl #quoteBtn, .ribbon.rb-collapsed .rb-dl #dlPdf { padding: 6px; overflow: hidden; text-overflow: ellipsis; }
  .ribbon.rb-collapsed .lbl-full { display: none; }
  .ribbon.rb-collapsed .lbl-short { display: inline; }
}
/* portrait phones: the collapsed header is short (~105px), so keep it pinned for quick access to Quote / PDF */
@media (max-width: 640px) and (min-height: 501px) {
  .sheet-page .site-header:has(.ribbon.rb-collapsed) { position: sticky; }
}
@media (max-width: 359px) { .rb-more .more-long { display: none; } .rb-more .more-short { display: inline; } }
/* phones: wide reference tables scroll inside their card instead of panning the page */
@media (max-width: 640px) { .code-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .src-list li { overflow-wrap: anywhere; } }