/* Presentation only. The CAD engine, canvas rendering and input handlers
   are intentionally unchanged. All existing theme and accent choices apply. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius: 6px;
}

html[data-theme="dark"] {
  --bg: #20262e;
  --bg-2: #171c22;
  --panel: #232a33;
  --panel-2: #2a333e;
  --panel-3: #35414e;
  --line: #35404c;
  --line-2: #4e5e70;
  --text: #edf2f7;
  --text-dim: #b3bfce;
  --text-faint: #94a3b5;
  --shadow: 0 16px 48px #0006, 0 3px 10px #0003;
}

html[data-theme="light"] {
  --bg: #f0f3f7;
  --bg-2: #e9eef4;
  --panel: #ffffff;
  --panel-2: #f3f6fa;
  --panel-3: #e4ebf3;
  --line: #d8e0e9;
  --line-2: #aab9c9;
  --text: #1d2b3d;
  --text-dim: #52657a;
  --text-faint: #64758a;
  --shadow: 0 16px 48px #20334d24, 0 3px 10px #20334d12;
}

html { color-scheme: dark; }
html[data-theme="light"], html[data-theme="aqua"], html[data-theme="paper"] { color-scheme: light; }
html, body { font-size: 14px; }
button, input, select, textarea { accent-color: var(--accent); }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
button:disabled { opacity: .45; cursor: not-allowed; }

/* The application header stays compact, with a clear identity and tab rail. */
.ribbon-top { height: 52px; gap: 22px; padding: 0 18px; }
.brand { gap: 9px; letter-spacing: -.4px; }
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 7px; background: var(--accent-dim); color: var(--accent-2);
  border: 1px solid var(--accent);
}
.brand-mark svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.brand-name { font-size: 18px; font-weight: 700; }
.brand-edition {
  color: var(--text-faint); font-size: 10px; font-weight: 600;
  letter-spacing: 1px; padding-left: 9px; border-left: 1px solid var(--line);
}
.ribbon-tabs { align-self: stretch; align-items: stretch; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.ribbon-tab { padding: 0 15px; font-size: 14px; border-radius: 0; }
.ribbon-tab.active { background: var(--accent-dim); color: var(--accent-2); font-weight: 600; }
.quick-access { gap: 3px; }
.qa-btn { width: 30px; height: 30px; border-radius: 6px; }
.qa-btn .ico { width: 17px; height: 17px; }
.qa-btn[data-cmd="SAVE"] { color: var(--accent-2); background: var(--accent-dim); }
.ribbon-collapse { width: 26px; height: 30px; }

/* Three aligned rows, consistent icon sizes, and quieter group dividers. */
.ribbon-panels { height: 126px; }
.ribbon-panel { padding: 8px 8px 0; }
.ribbon-strip { display: grid; grid-template-columns: minmax(0, 1fr); }
.ribbon-strip.has-overflow { grid-template-columns: 32px minmax(0, 1fr) 32px; }
.ribbon-strip .ribbon-panels { min-width: 0; }
.ribbon-strip.has-overflow .ribbon-panels { grid-column: 2; grid-row: 1; }
/* Hide native scrollbars only after the navigation controls are ready. */
.ribbon-strip.enhanced .ribbon-panel { scrollbar-width: none; }
.ribbon-strip.enhanced .ribbon-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ribbon-scroll {
  display: flex; align-items: center; justify-content: center;
  align-self: stretch; min-width: 0; padding: 0;
  background: var(--panel); color: var(--accent-2); cursor: pointer;
  border: 0; transition: background .15s ease, color .15s ease;
}
.ribbon-scroll-prev { border-right: 1px solid var(--line); }
.ribbon-scroll-next { border-left: 1px solid var(--line); }
.ribbon-scroll .ico { width: 18px; height: 18px; stroke-width: 2; }
.ribbon-scroll:hover { background: var(--accent-dim); color: var(--text); }
.ribbon-scroll:focus-visible { outline-offset: -3px; background: var(--accent-dim); }
.ribbon-scroll:disabled { opacity: 1; color: var(--line-2); background: var(--panel); cursor: default; }
.ribbon-scroll[hidden], #ribbon.collapsed .ribbon-scroll { display: none; }
.ribbon-group { padding: 0 10px; }
.ribbon-group-body { height: 88px; max-height: none; gap: 8px; }
.ribbon-group-title {
  font-size: 12px; letter-spacing: .35px; color: var(--text-faint);
  padding: 4px 0 6px; text-align: left;
}
.rb-big { gap: 4px; }
.rb-small { height: 88px; grid-template-rows: repeat(3, 28px); gap: 2px 5px; }
.rb-btn { font-size: 12px; border-radius: 6px; color: var(--text-dim); }
.rb-btn.big { width: 68px; gap: 8px; padding: 5px 3px; }
.rb-btn.big .ico { width: 27px; height: 27px; color: var(--text); }
.rb-btn.small { height: 28px; padding: 0 8px 0 6px; gap: 7px; max-width: 176px; }
.rb-btn.small .ico { width: 17px; height: 17px; }
.rb-btn:hover { border-color: var(--line-2); background: var(--panel-3); }
.rb-btn.on, .rb-btn.select-tool.on {
  background: var(--accent-dim); color: var(--accent-2); border-color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
}
.rb-btn.on .ico, .rb-btn.select-tool.on .ico { stroke: currentColor; color: inherit; fill: none; }
.rb-btn.toggle.on { box-shadow: none; }
.rb-split.big .rb-split-arrow { width: 68px; height: 17px; }
.rb-split.small .rb-split-arrow { width: 19px; height: 28px; }
.rb-fields, .rb-corner-fields { gap: 5px; }
.rb-field { gap: 7px; }
.rb-field label { font-size: 12px; width: 66px; color: var(--text-dim); }
.rb-corner-fields .rb-field label { width: 66px; }
.rb-select, .rb-num { height: 26px; padding: 0 6px; font-size: 12px; border-radius: 5px; }
.rb-select { width: 126px; }
.rb-num { width: 68px; font-family: var(--mono); }
.rb-mini { font-size: 12px; padding: 3px 6px; border-radius: 5px; }

/* One compact angle control, centered across the ribbon's three rows. */
.rb-angle-field { grid-row: 1 / -1; padding: 0 4px 0 8px; }
.rb-angle-row { display: grid; grid-template-columns: 88px 46px; gap: 0; }
.rb-corner-fields .rb-angle-row label {
  grid-column: 1 / -1; width: auto; margin-bottom: 7px;
  white-space: nowrap; font-weight: 500; line-height: 1.3;
}
.rb-angle-row .rb-num {
  width: 100%; height: 28px; text-align: center; border-radius: 5px 0 0 5px;
}
.rb-angle-row .rb-num::placeholder { color: var(--text-faint); }
.rb-angle-row .rb-mini {
  height: 28px; margin: 0; padding: 0 8px;
  border-left: 0; border-radius: 0 5px 5px 0;
  background: var(--panel-2); color: var(--text-dim);
}
.rb-angle-row .rb-num:not(.on) + .rb-mini,
.rb-angle-row .rb-mini:hover { background: var(--accent-dim); color: var(--accent-2); }
.rb-angle-row .rb-num:focus, .rb-angle-row .rb-mini:focus-visible { position: relative; z-index: 1; }

.doc-bar { min-height: 40px; gap: 5px; padding: 6px 14px 0; }
.doc-tab {
  gap: 8px; min-width: 150px; max-width: 240px; padding: 5px 8px 5px 12px;
  font-size: 12px; background: transparent; border-color: transparent; border-radius: 6px 6px 0 0;
}
.doc-tab.active { border-color: var(--line); border-bottom-color: var(--canvas); box-shadow: inset 0 2px 0 var(--accent); }
.doc-name { flex: 1; }
.doc-close { width: 22px; height: 22px; font-size: 12px; }
.doc-new { border: 1px solid transparent; font-size: 18px; padding: 0 11px; }
.doc-new:hover { background: var(--accent-dim); }

/* The palette is a quiet inspector; its fields remain in the same order. */
.props-palette.open { width: 300px; }
.props-head { min-height: 72px; padding: 13px 16px; background: var(--panel); gap: 12px; }
.props-heading { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.props-eyebrow { font-size: 12px; color: var(--text-faint); }
#props-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.props-close { width: 28px; height: 28px; flex: none; border-radius: 6px; }
.props-body { padding: 4px 0 16px; scrollbar-gutter: stable; }
.prop-section { padding: 7px 0 13px; }
.prop-section + .prop-section { border-top: 1px solid var(--line); }
.prop-section h4 {
  margin: 0 0 8px; padding: 6px 16px; background: transparent; border: none;
  font-size: 12px; font-weight: 600; color: var(--text-faint); letter-spacing: .7px;
}
.prop-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 36px; padding: 3px 16px; gap: 10px; }
.prop-row label { font-size: 12px; }
.prop-row input, .prop-row select { height: 30px; font-size: 12px; padding: 0 7px; border-radius: 5px; }
.prop-row:hover { background: var(--panel-2); }
.prop-static { font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.cmdline { padding: 9px 14px; gap: 10px; }
.command-icon { width: 20px; height: 20px; flex: none; stroke: var(--accent-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cmd-prefix { font-size: 12px; max-width: 42%; }
.cmd-input-wrap { min-width: 0; }
#cmd-input { height: 34px; padding: 0 11px; border-radius: 6px; font-size: 13px; }
#cmd-input:focus { box-shadow: 0 0 0 2px var(--accent-dim); }
.cmd-help { display: flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.cmd-help kbd, .console-head kbd { font: 11px var(--mono); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 4px; }
.console-head { padding: 7px 16px; font-size: 12px; background: var(--panel); color: var(--text-dim); }
.console-head kbd { margin-left: 8px; }
.console { padding: 8px 16px; font-size: 12px; line-height: 1.7; }
.mini-btn { font-size: 12px; border-radius: 5px; padding: 3px 9px; }
.cmd-suggest { bottom: calc(100% + 8px); border-radius: 8px; }
.suggest-row { padding: 9px 12px; }
.sg-alias { font-size: 12px; }
.statusbar { height: 34px; padding: 0 14px; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.statusbar > * { flex-shrink: 0; }
.status-coord { font-size: 12px; min-width: 168px; font-variant-numeric: tabular-nums; }
.status-toggle { font-size: 11px; padding: 4px 7px; border-radius: 4px; color: var(--text-dim); }
.status-toggle.on { border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
.status-info { font-size: 12px; }

/* Shared surface treatment for existing flyouts, dialogs and editors. */
.rb-flyout, .context-menu, .menu-pop, .nav-menu { padding: 6px; border-radius: 9px; }
.rb-flyout { max-height: calc(100vh - 24px); overflow-y: auto; }
.rb-flyout-head, .ctx-header, .dlg-section { font-size: 12px; color: var(--text-dim); }
.rb-flyout-item { padding: 8px; gap: 10px; }
.rb-flyout-item strong { font-size: 14px; }
.rb-flyout-item small, .rb-flyout-item kbd, .rb-tip p, .rb-tip-head kbd { font-size: 12px; }
.rb-tip { padding: 11px 13px; border-radius: 8px; }
.rb-tip-head strong { font-size: 14px; }
.ctx-item, .ctx-snap, .menu-item, .nav-menu-item { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.menu-key { font-size: 12px; }
.dlg-overlay { background: #080f1ba8; }
.dlg-window { border-radius: 12px; }
.dlg-head { padding: 15px 20px; font-size: 16px; background: var(--panel); border-radius: 12px 12px 0 0; }
.dlg-x { width: 28px; height: 28px; }
.dlg-body { padding: 18px 20px; min-height: 0; }
.dlg-footer { padding: 13px 20px; border-radius: 0 0 12px 12px; }
.btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.tiny { padding: 3px 7px; font-size: 12px; }
.dlg-row { padding: 6px 0; }
.dlg-row label, .dlg-toolbar label, .dlg-tab, .osnap-item { font-size: 14px; }
.dlg-input, .dlg-select { height: 33px; font-size: 14px; border-radius: 5px; padding: 0 8px; }
.dlg-select.small, .dlg-select.tiny { font-size: 12px; height: 27px; }
.dlg-hint { color: var(--text-dim); font-size: 12px; line-height: 1.6; }
.dlg-msg, .help-intro { font-size: 16px; line-height: 1.6; }
.dlg-tabs { overflow-x: auto; }
.dlg-tab { flex: none; padding: 9px 14px; }
.dlg-2col h5, .help-list h5 { font-size: 12px; padding-bottom: 8px; }
.theme-card, .fmt-card, .page-card { padding: 12px; border-radius: 8px; }
.theme-card strong, .fmt-card strong { font-size: 14px; }
.theme-card small, .fmt-card small, .page-card small, .pdf-card small { font-size: 12px; color: var(--text-dim); }
.layer-table, .help-table { font-size: 13px; }
.layer-table th { padding: 9px 8px; }
.layer-table td, .help-table td { padding: 6px 8px; }
.help-cmd, .help-intro code, .pattern-cell { font-size: 12px; }
.dyn-input { border-radius: 8px; box-shadow: var(--shadow); }
.dyn-title, .dyn-input label, .dyn-hint, .dyn-hint kbd { font-size: 12px; }
.dyn-input input { height: 26px; font-size: 12px; }
.dyn-hint { white-space: normal; }
.viewcube { top: 16px; right: 18px; }
.navbar { top: 140px; right: 18px; border-radius: 8px; padding: 3px; }
.nav-btn { width: 34px; height: 34px; border-radius: 5px; border-bottom: none; }
.vc-wcs { font-size: 12px; padding: 3px 10px; }

/* Classic workspace keeps its familiar menu and tool placement. */
.menubar { min-height: 36px; padding: 0 8px; overflow-x: auto; }
.menu-title { font-size: 13px; padding: 7px 10px; }
.ws-switch { font-size: 12px; padding: 4px 10px; }
.tb-standard { padding: 4px 10px; overflow-x: auto; }
.tb-standard .tb-btn { width: 30px; height: 30px; }
.tb-draw, .tb-modify { max-height: calc(100% - 64px); overflow-y: auto; scrollbar-width: thin; }
.tb-dim { max-width: calc(100% - 24px); overflow-x: auto; }
.tb-draw, .tb-modify, .tb-dim { border-radius: 7px; }

/* Keep every tool reachable on smaller screens without covering the canvas. */
@media (max-width: 1200px) {
  .ribbon-top { gap: 14px; padding: 0 12px; }
  .brand-edition { display: none; }
  .ribbon-tab { padding: 0 11px; }
  .props-palette.open { width: 270px; }
  .prop-row { padding-left: 12px; padding-right: 12px; gap: 7px; }
}
@media (max-width: 820px) {
  .ribbon-top { height: auto; min-height: 88px; flex-wrap: wrap; gap: 0 12px; padding-top: 7px; }
  .brand { margin-right: auto; }
  .quick-access { margin-left: auto; }
  .ribbon-tabs { order: 3; flex-basis: 100%; height: 38px; margin-top: 5px; }
  .ribbon-tab { padding: 0 13px; }
  .ribbon-panels { height: 118px; }
  .ribbon-group-body { height: 80px; }
  .rb-small { height: 80px; grid-template-rows: repeat(3, 25px); }
  .rb-btn.small, .rb-split.small .rb-split-arrow { height: 25px; }
  .rb-btn.big { width: 62px; gap: 5px; }
  .rb-btn.big span, .rb-btn.small span { display: block; }
  .rb-split.big .rb-split-arrow { width: 62px; }
  .props-palette.open { width: 248px; }
  .cmd-help { display: none; }
  .status-coord { min-width: 150px; }
}
@media (max-width: 560px) {
  .ribbon-top { padding-left: 8px; padding-right: 8px; gap: 0 6px; }
  .brand-name { font-size: 16px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand { gap: 6px; }
  .quick-access { gap: 1px; }
  .qa-btn { width: 25px; height: 29px; }
  .qa-sep { margin: 0 2px; }
  .ribbon-group { padding: 0 7px; }
  .doc-bar { padding-left: 8px; }
  .props-palette.open { width: 42vw; }
  .props-head { padding: 10px; min-height: 64px; gap: 4px; }
  #props-title { font-size: 13px; }
  .props-close { width: 22px; }
  .prop-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 5px 10px; }
  .prop-section h4 { padding-left: 10px; }
  .cmdline { padding: 7px 8px; gap: 6px; }
  .command-icon { display: none; }
  .cmd-prefix { max-width: 30%; }
  .suggest-row { grid-template-columns: 96px 50px minmax(0, 1fr); gap: 4px; }
  .dlg-head, .dlg-body, .dlg-footer { padding: 12px; }
  .dlg-row, .dlg-2col .dlg-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .dlg-2col { grid-template-columns: minmax(0, 1fr); }
  .theme-grid, .fmt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewcube, .navbar { right: 8px; }
}
@media (max-height: 640px) {
  .console-wrap.expanded { height: 110px; }
  .props-head { min-height: 58px; padding-top: 9px; padding-bottom: 9px; }
  .prop-row { min-height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
html[data-theme="contrast"] .rb-btn.on,
html[data-theme="contrast"] .rb-btn.on .ico { color: var(--accent); stroke: currentColor; }
html[data-theme="contrast"] .btn.primary { color: #000; }