/* ── /construction-calculator: the dimension calculator and the quick tabs ──
   Loaded after /style.css and tools.css. Site tokens (dark theme, one amber accent); Quiet Light rules:
   no nested boxes, sunken inputs with no border (radius 12), hairlines between result rows, 52 px pill buttons,
   letter-spacing 0, one size per heading level. */

.dm-tool { background: var(--surface); border: 0; border-radius: 20px; padding: 24px 20px; margin: 28px 0 0; }
.dm-tool + .dm-tool { margin-top: 16px; }
.dm-tool .tool-title { font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 1.25; margin: 0 0 4px; }
.dm-tool .tool-sub { font-size: 15px; line-height: 1.55; margin: 0 0 20px; }
.dm-tool .tool-nojs { border-left: 0; border-radius: 12px; padding: 14px; background: rgba(245, 166, 35, 0.08); }

/* Segmented switches (units, operation): the site's tool-seg, a little taller, radius 12 */
.dm-tool .tool-modes { margin: 0 0 20px; }
.dm-tool .tool-modes legend { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.dm-tool .tool-seg { border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: nowrap; }
.dm-tool .tool-seg span { min-height: 44px; border-radius: 10px; font-size: 15px; padding: 8px 6px; }
.dm-ops .tool-seg span { font-size: 24px; font-weight: 600; line-height: 1; }
.dm-tool .tool-seg span span { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; }

/* Inputs: sunken fill, radius 12, no border */
.dm-tool .tool-field input, .dm-tool .tool-field select, .dm-box input, .dm-box select {
  width: 100%; min-height: 52px; margin: 0; border: 0; border-radius: 12px;
  background: var(--input); color: var(--white); padding: 12px 14px;
  font: 600 17px/1.2 var(--font); font-variant-numeric: tabular-nums;
}
.dm-tool .tool-field > label { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.dm-tool .tool-input input, .dm-box input { padding-right: 40px; }
.dm-tool .tool-unit { right: 14px; font-size: 15px; }
.dm-tool .tool-field input:focus, .dm-tool .tool-field select:focus, .dm-box input:focus, .dm-box select:focus {
  outline: 2px solid var(--amber); outline-offset: 2px; border: 0;
}
.dm-tool input[aria-invalid="true"], .dm-tool select[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #FF8A80; }
.dm-box select, .dm-tool .tool-field select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #AAA 50%), linear-gradient(135deg, #AAA 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.dm-box { position: relative; display: block; min-width: 0; }
.dm-box .tool-unit { position: absolute; top: 50%; transform: translateY(-50%); }

/* A length: feet | inches | fraction, or value | unit */
.dm-len { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.dm-len-label { font-size: 15px; font-weight: 600; color: var(--white); margin: 0 0 8px; }
.dm-ftin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
.dm-metric { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.dm-number { display: grid; grid-template-columns: minmax(0, 1fr); }
.dm-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.dm-hint { color: var(--text-sec); font-size: 13.5px; line-height: 1.45; margin: 8px 0 0; }

/* Results: hairlines between rows, the answer in amber */
.dm-tool .tool-results { margin-top: 8px; border-top: 1px solid var(--divider); padding-top: 4px; }
.dm-tool .tool-row { padding: 12px 0; }
.dm-tool .tool-row dt { font-size: 15px; }
.dm-tool .tool-row dd { font-size: 17px; font-weight: 600; }
.dm-tool .tool-row.tool-hero dt { color: var(--white); font-weight: 600; }
.dm-tool .tool-row.tool-hero dd { font-size: 28px; font-weight: 700; }
.dm-tool .tool-empty { font-size: 15px; }

/* Buttons: 52 px pills. Primary solid ink (inverted on this dark theme), secondary sunken with a hairline. */
.dm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.dm-btn {
  min-height: 52px; padding: 0 20px; border-radius: 999px; font: 600 16px/1 var(--font); cursor: pointer;
  background: var(--input); color: var(--white); border: 1px solid var(--divider);
}
.dm-btn-primary { background: var(--white); color: #121212; border-color: var(--white); }
.dm-btn:hover:not(:disabled) { border-color: var(--text-sec); }
.dm-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.dm-btn:disabled { background: #4A4A4A; border-color: #4A4A4A; color: #9A9A9A; cursor: default; }

/* Quick tabs: one scrolling row of pills */
.cq-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 20px; padding: 0 20px 2px;
  -webkit-overflow-scrolling: touch; }
.cq-tabs::-webkit-scrollbar { display: none; }
.cq-tabs [role="tab"] {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0;
  background: var(--input); color: var(--text-sec); font: 600 15px/1 var(--font); cursor: pointer; white-space: nowrap;
}
.cq-tabs [role="tab"]:hover { color: var(--white); }
.cq-tabs [role="tab"][aria-selected="true"] { background: var(--amber); color: #111; }
.cq-tabs [role="tab"]:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.cq-h { font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--white); margin: 0 0 14px; }
.cq-panel .tool-grid { gap: 16px; }
.cq-more { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-sec); }
.cq-more a { color: var(--amber); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(245, 166, 35, 0.45); text-underline-offset: 3px; }

@media (min-width: 640px) {
  .dm-tool { padding: 28px; }
  .cq-tabs { margin: 0 -28px 20px; padding: 0 28px 2px; }
  .dm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .dm-tool { margin-left: -8px; margin-right: -8px; padding: 22px 16px; }
  .cq-tabs { margin: 0 -16px 20px; padding: 0 16px 2px; }
  .dm-tool .tool-seg span { font-size: 14px; padding: 8px 4px; }
  .dm-ops .tool-seg span { font-size: 22px; }
  .dm-ftin { gap: 6px; }
  .dm-box input, .dm-box select { padding-left: 12px; }
  .dm-tool .tool-row.tool-hero dd { font-size: 26px; }
}
#quick.dm-tool { margin-bottom: 24px; }
.dm-denom-field { margin: 0 0 20px; }
.dm-denom-field select { max-width: 320px; }
.dm-tool .tool-nojs a { color: var(--amber); text-decoration: underline; text-decoration-color: rgba(245, 166, 35, 0.45); text-underline-offset: 3px; }