/* WideMath construction calculator (/construction-calculator/).
   Every selector starts with .wm-cx (the widget) or .wm-cx-print (the body
   class set while printing a stair or roof sheet). Shared classes come from
   /assets/css/wm-tools.css. An original keypad design: no maker's face. */

.wm-cx { padding: 16px 18px 14px; }
.wm-cx [hidden] { display: none !important; }
.wm-cx .wm-cx-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wm-cx .wm-cx-top .wm-tabs { margin: 0; }
.wm-cx .wm-cx-set { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: .86rem; color: var(--wm-text); }
.wm-cx .wm-cx-set label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.wm-cx .wm-cx-set select { width: auto; min-height: 40px; padding: 5px 8px; }
.wm-cx .wm-seg button { min-height: 40px; padding: 0 12px; font-size: .8rem; letter-spacing: 0; }

/* ---- keypad -------------------------------------------------------------- */
.wm-cx .wm-cx-kp { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
.wm-cx .wm-cx-calc { background: #1e293b; border-radius: 18px; padding: 14px; box-shadow: 0 8px 22px rgba(15, 23, 42, .18); outline: none; }
.wm-cx .wm-cx-calc:focus-visible { box-shadow: 0 0 0 3px #86efac, 0 8px 22px rgba(15, 23, 42, .18); }
.wm-cx .wm-cx-lcd { background: #e8f1ea; border: 1px solid #b7cdbc; border-radius: 10px; padding: 8px 12px 9px; min-height: 104px; color: #0f172a; box-shadow: inset 0 2px 4px rgba(15, 23, 42, .12); }
.wm-cx .wm-cx-ind { display: flex; justify-content: space-between; gap: 8px; font: 600 .76rem/1.2 'Segoe UI', system-ui, sans-serif; color: #3f5a46; min-height: 1.1em; }
.wm-cx .wm-cx-val { font: 700 2rem/1.25 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: right; margin-top: 4px; overflow-wrap: anywhere; letter-spacing: -.01em; }
.wm-cx .wm-cx-val.small { font-size: 1.45rem; }
.wm-cx .wm-cx-val.err { color: #b91c1c; font-size: 1.35rem; }
.wm-cx .wm-cx-sub { font-size: .76rem; line-height: 1.35; color: #3f5a46; text-align: right; min-height: 1.35em; }
.wm-cx .wm-cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wm-cx .wm-cx-also { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 9px 0 2px; min-height: 30px; font-size: .74rem; color: #cbd5e1; }
.wm-cx .wm-cx-also > span { margin-right: 2px; }
.wm-cx .wm-cx-also .wm-chip { padding: 4px 9px; font-size: .74rem; background: #334155; border-color: #475569; color: #e2e8f0; min-height: 28px; }
.wm-cx .wm-cx-also .wm-chip:hover { background: #3f4f66; color: #fff; }
.wm-cx .wm-cx-also .wm-chip.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.wm-cx .wm-cx-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.wm-cx .wm-cx-key { appearance: none; position: relative; border: 0; border-radius: 9px; min-height: 48px; padding: 13px 2px 5px; cursor: pointer;
  font: 600 1.02rem/1 'Segoe UI', system-ui, sans-serif; color: #0f172a; background: #f1f5f9; box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center; transition: transform 80ms, background 120ms; touch-action: manipulation; }
.wm-cx .wm-cx-key small { position: absolute; top: 3px; left: 0; right: 0; text-align: center; font: 700 .6rem/1 'Segoe UI', system-ui, sans-serif; color: #15803d; }
.wm-cx .wm-cx-key:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.wm-cx .wm-cx-key:focus-visible { outline: 2px solid #86efac; outline-offset: 2px; }
.wm-cx .wm-cx-key.num { background: #f8fafc; font-size: 1.15rem; }
.wm-cx .wm-cx-key.num:hover { background: #fff; }
.wm-cx .wm-cx-key.unit { background: #dcfce7; color: #14532d; font-size: .9rem; }
.wm-cx .wm-cx-key.unit:hover { background: #bbf7d0; }
.wm-cx .wm-cx-key.op { background: #cbd5e1; font-size: 1.25rem; }
.wm-cx .wm-cx-key.op:hover { background: #b6c2d1; }
.wm-cx .wm-cx-key.fn { background: #94a3b8; color: #0f172a; font-size: .95rem; }
.wm-cx .wm-cx-key.fn small, .wm-cx .wm-cx-key.op small, .wm-cx .wm-cx-key.tri small, .wm-cx .wm-cx-key.conv small, .wm-cx .wm-cx-key.clr small { color: #14532d; }
.wm-cx .wm-cx-key.tri { background: #475569; color: #f8fafc; font-size: .86rem; }
.wm-cx .wm-cx-key.tri small, .wm-cx .wm-cx-key.conv small, .wm-cx .wm-cx-key.clr small { color: #86efac; }
.wm-cx .wm-cx-key.tri:hover { background: #52627a; }
.wm-cx .wm-cx-key.conv { background: #334155; color: #f8fafc; font-size: .86rem; border: 1px solid #64748b; }
.wm-cx .wm-cx-key.conv[aria-pressed="true"] { background: #16a34a; border-color: #16a34a; }
.wm-cx .wm-cx-key.clr { background: #b45309; color: #fff; font-size: .82rem; }
.wm-cx .wm-cx-key.clr:hover { background: #c2610f; }
.wm-cx .wm-cx-key.eq { grid-column: span 2; background: #16a34a; color: #fff; font-size: 1.3rem; }
.wm-cx .wm-cx-key.eq:hover { background: #15803d; }
.wm-cx .wm-cx-help { margin-top: 10px; color: #cbd5e1; font-size: .82rem; }
.wm-cx .wm-cx-help summary { color: #86efac; }
.wm-cx .wm-cx-help ul { margin: 8px 0 0; padding-left: 18px; }
.wm-cx .wm-cx-help li { margin: 4px 0; line-height: 1.45; }
.wm-cx .wm-cx-help kbd { background: #334155; border: 1px solid #475569; border-radius: 4px; padding: 0 4px; font: .76rem 'Segoe UI', system-ui, sans-serif; color: #f8fafc; }

/* tape */
.wm-cx .wm-cx-tapebox { border: 1px solid var(--wm-line); border-radius: 12px; background: var(--wm-soft); display: flex; flex-direction: column; min-width: 0; }
.wm-cx .wm-cx-tapehead { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--wm-line); background: #fff; border-radius: 12px 12px 0 0; }
.wm-cx .wm-cx-tapehead .sp { flex: 1; }
.wm-cx .wm-cx-tapehead .wm-btn { min-height: 40px; }
.wm-cx .wm-cx-tape { list-style: none; margin: 0; padding: 6px 0; max-height: 420px; min-height: 160px; overflow-y: auto; font-variant-numeric: tabular-nums; }
.wm-cx .wm-cx-tape li.empty { padding: 10px 14px; color: var(--wm-mute); font-size: .88rem; }
.wm-cx .wm-cx-tape li.sep { height: 0; border-top: 1px dashed var(--wm-line); margin: 6px 12px; }
.wm-cx .wm-cx-tape button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 4.6em 1fr; gap: 8px; width: 100%; padding: 4px 14px; cursor: pointer; font: 1rem/1.5 'Segoe UI', system-ui, sans-serif; color: var(--wm-ink); }
.wm-cx .wm-cx-tape button:hover:not([disabled]) { background: var(--wm-green-bg); }
.wm-cx .wm-cx-tape button:focus-visible { outline: 2px solid var(--wm-green-2); outline-offset: -2px; }
.wm-cx .wm-cx-tape .op { color: var(--wm-mute); font-size: .86rem; text-align: right; }
.wm-cx .wm-cx-tape .v { text-align: right; overflow-wrap: anywhere; }
.wm-cx .wm-cx-tape li.tot .v { font-weight: 700; border-top: 1px solid #94a3b8; }
.wm-cx .wm-cx-tape li.tri .op, .wm-cx .wm-cx-tape li.mem .op, .wm-cx .wm-cx-tape li.fn .op { color: var(--wm-green); font-weight: 600; }
.wm-cx .wm-cx-mem { margin: 0; padding: 6px 14px 10px; font-size: .84rem; color: var(--wm-mute); min-height: 1em; }

/* ---- forms --------------------------------------------------------------- */
.wm-cx .wm-cx-lead { margin: 0 0 12px; }
.wm-cx .wm-cx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px 14px; }
.wm-cx .wm-cx-f { display: flex; flex-direction: column; gap: 5px; font-size: .86rem; font-weight: 600; color: var(--wm-text); min-width: 0; }
.wm-cx .wm-cx-f .wm-field { font-size: 1.02rem; padding: 9px 11px; min-height: 42px; font-variant-numeric: tabular-nums; }
.wm-cx .wm-cx-f select.wm-field { font-size: .95rem; }
.wm-cx .wm-cx-pair { display: flex; gap: 6px; }
.wm-cx .wm-cx-pair input { flex: 1 1 auto; min-width: 0; }
.wm-cx .wm-cx-pair select { flex: 0 0 auto; width: auto; }
.wm-cx .wm-field.wm-cx-calcd { background: var(--wm-green-bg); border-color: var(--wm-green-line); color: #14532d; font-weight: 600; }
.wm-cx .wm-cx-hint { font-weight: 400; font-size: .76rem; color: var(--wm-mute); min-height: 1em; }
.wm-cx .wm-cx-hint.err { color: var(--wm-err); }
.wm-cx .wm-cx-row2 { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 12px 0 0; }
.wm-cx .wm-cx-row2 > .wm-cx-f { flex: 1 1 260px; }
.wm-cx .wm-cx-row2 > details { flex: 1 1 100%; }
.wm-cx .wm-cx-more { margin-top: 12px; }
.wm-cx .wm-cx-more > summary { padding: 6px 0; min-height: 32px; }
.wm-cx .wm-cx-more > .wm-cx-grid { margin-top: 10px; }
.wm-cx .wm-out { transition: opacity 150ms; }
.wm-cx .wm-out.wm-cx-stale { opacity: .55; }

/* ---- results ------------------------------------------------------------- */
.wm-cx .wm-cx-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wm-cx .wm-cx-cards em { display: block; font-style: normal; font-size: .74rem; color: var(--wm-mute); margin-top: 2px; line-height: 1.35; }
.wm-cx .wm-cx-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.wm-cx .wm-cx-fig { border: 1px solid var(--wm-line); border-radius: 12px; background: #fff; padding: 8px; min-width: 0; }
.wm-cx .wm-cx-fig.wide { margin-top: 16px; }
.wm-cx .wm-cx-fig svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.wm-cx .wm-cx-cap { margin: 6px 4px 2px; font-size: .84rem; line-height: 1.5; color: var(--wm-mute); }
.wm-cx .wm-cx-fig text { font: 12px 'Segoe UI', system-ui, sans-serif; fill: #334155; }
.wm-cx .wm-cx-fig text.s { font-size: 11px; fill: #475569; }
.wm-cx .wm-cx-fig text.a { font-size: 11px; fill: #64748b; }
.wm-cx .wm-cx-fig text.g { font-size: 12px; font-weight: 600; fill: #15803d; }
.wm-cx .wm-cx-fig line.h { stroke: #15803d; stroke-width: 2.2; }
.wm-cx .wm-cx-fig line.j { stroke: #b45309; stroke-width: 1; }
.wm-cx .wm-cx-fig line.c { stroke: #64748b; stroke-width: 1.2; stroke-dasharray: 4 3; }
.wm-cx .wm-cx-steps { margin-top: 14px; }
.wm-cx .wm-cx-steps .wm-steps .m { font-size: .95rem; overflow-wrap: anywhere; }
.wm-cx .wm-cx-h { font-size: 1.05rem; margin: 18px 0 4px; color: var(--wm-ink); }
.wm-cx .wm-cx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92rem; }
.wm-cx .wm-cx-table th, .wm-cx .wm-cx-table td { padding: 6px 10px; border-bottom: 1px solid var(--wm-line); text-align: right; white-space: nowrap; }
.wm-cx .wm-cx-table th { text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 700; color: var(--wm-text); }
.wm-cx .wm-cx-table th:first-child, .wm-cx .wm-cx-table td:first-child { text-align: left; }
.wm-cx .wm-cx-checks { margin-top: 14px; border: 1px solid var(--wm-line); border-radius: 12px; padding: 10px 14px; background: #fff; }
.wm-cx .wm-cx-checks > p { margin: 4px 0 8px; }
.wm-cx .wm-cx-checks ul { list-style: none; margin: 0; padding: 0; }
.wm-cx .wm-cx-checks li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--wm-line); font-size: .92rem; line-height: 1.45; }
.wm-cx .wm-cx-checks li:first-child { border-top: 0; }
.wm-cx .wm-cx-checks .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 'Segoe UI', sans-serif; color: #fff; margin-top: 1px; }
.wm-cx .wm-cx-checks li.pass .ic { background: #16a34a; }
.wm-cx .wm-cx-checks li.fail .ic { background: #b91c1c; }
.wm-cx .wm-cx-checks li.info .ic { background: #64748b; font-style: italic; }
.wm-cx .wm-cx-checks li.fail b { color: #b91c1c; }
.wm-cx .wm-cx-checks small { color: var(--wm-mute); white-space: nowrap; }
.wm-cx .wm-cx-warn { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .9rem; }
.wm-cx .wm-cx-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--wm-line); }
.wm-cx .wm-cx-tools .wm-btn { min-height: 40px; }
.wm-cx .wm-cx-toast { font-size: .86rem; color: var(--wm-green); }

@media (max-width: 860px) {
  .wm-cx { padding: 12px 10px; }
  .wm-cx .wm-cx-kp { grid-template-columns: 1fr; }
  .wm-cx .wm-cx-calc { padding: 10px; border-radius: 14px; }
  .wm-cx .wm-cx-tape { max-height: 260px; min-height: 90px; }
  .wm-cx .wm-cx-top { margin-bottom: 10px; }
}
@media (max-width: 400px) {
  .wm-cx .wm-cx-keys { gap: 5px; }
  .wm-cx .wm-cx-key { min-height: 46px; font-size: .92rem; }
  .wm-cx .wm-cx-key.unit, .wm-cx .wm-cx-key.tri, .wm-cx .wm-cx-key.conv { font-size: .78rem; }
  .wm-cx .wm-cx-val { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) { .wm-cx .wm-cx-key, .wm-cx .wm-out { transition: none; } }

/* ---- printing a stair or roof sheet (Print button sets the body class) ---- */
@media print {
  .wm-cx-print .nav, .wm-cx-print .breadcrumb, .wm-cx-print .wm-examples, .wm-cx-print .content, .wm-cx-print footer,
  .wm-cx-print ins, .wm-cx-print .adsbygoogle, .wm-cx-print .wm-disclaimer ~ noscript, .wm-cx-print .wm-cx .wm-tabs,
  .wm-cx-print .wm-cx .wm-cx-set, .wm-cx-print .wm-cx .wm-cx-tools, .wm-cx-print .wm-cx .wm-cx-more > summary { display: none !important; }
  .wm-cx-print .wm-cx { box-shadow: none; border: 0; padding: 0; }
  .wm-cx-print .wm-cx .wm-cx-fig, .wm-cx-print .wm-cx .wm-cx-checks, .wm-cx-print .wm-cx table { break-inside: avoid; }
}