/* ==========================================================================
   Tool pages: the "sheet" layout plus styles for markup the tool scripts render.
   Builds on site.css tokens. Diagram colours in the scripts:
   ink #14223A, data blue #2E5E99 (loads, shear, tension), redline #B3261E (compression, centroid).
   ========================================================================== */

:root { --blue: #2E5E99; }

/* ---------- Disclaimer under the page title ---------- */
.tool-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; }
.tool-note p { color: var(--muted); font-size: var(--t-sm); max-width: 70ch; }

/* ---------- Sheet: tool body + title block ---------- */
.tool-sheet { display: block; }
.tool { display: grid; grid-template-columns: 320px minmax(0, 1fr); }
.tool > aside, .tool > .panel:first-child { border-right: 1px solid var(--line); }
.tool > * { min-width: 0; }
.tool-stack > * + * { border-top: 1px solid var(--line); }
.tool-sheet .sheet-tb { grid-column: auto; }
@media (max-width: 860px) {
  .tool { grid-template-columns: minmax(0, 1fr); }
  .tool > aside, .tool > .panel:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}

.panel { padding: 24px; }
.tool section > .panel + .panel { border-top: 1px solid var(--line); }
.panel-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 600; font-stretch: 110%; font-size: 1rem; margin: 0 0 16px;
}
.panel-header.sub { font-size: .9375rem; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.hint { color: var(--muted); font-size: var(--t-sm); margin-bottom: 16px; }

/* ---------- Inputs ---------- */
.input-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 16px; }
.input-group label, .tool .label { font-size: var(--t-sm); color: var(--muted); }
.input-row { display: flex; gap: 12px; align-items: flex-end; }
.input-row > * { flex: 1; min-width: 0; }
.input-row > button { flex: 0 0 auto; }
.control-input, .coord-input, .input-field, .mode-select {
  width: 100%; min-width: 0; font: inherit; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px;
}
textarea.input-field { min-height: 96px; resize: vertical; }
.control-input:focus, .coord-input:focus, .input-field:focus, .mode-select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink);
}
input[type="color"] { width: 44px; height: 42px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); cursor: pointer; }

/* ---------- Buttons ---------- */
.btn-action, .control-btn, .btn-download {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%;
  font: 500 .9375rem/1 var(--font); color: var(--ink); cursor: pointer;
  background: var(--sheet); border: 1.5px solid var(--ink); border-radius: var(--radius);
  padding: 11px 14px; margin-top: 4px;
}
.btn-action:hover, .control-btn:hover, .btn-download:hover { background: var(--tint); }
.btn-solve, .control-btn.primary, .btn-download { background: var(--ink); color: var(--sheet); }
.btn-solve:hover, .control-btn.primary:hover, .btn-download:hover { background: #22365A; }
.control-btn + .control-btn { margin-top: 10px; }
.input-row .btn-action { width: auto; margin-top: 0; }
.btn-delete, .btn-copy-sm {
  font: 500 var(--t-xs)/1 var(--font); cursor: pointer; border-radius: var(--radius);
  padding: 5px 8px; background: transparent;
}
.btn-delete { color: var(--red); border: 1px solid var(--red); }
.btn-delete:hover { background: rgba(179, 38, 30, .08); }
.btn-copy-sm { color: var(--ink); border: 1px solid var(--line); margin-left: 8px; }
.btn-copy-sm:hover { border-color: var(--ink); }

/* ---------- Lists of added items ---------- */
.list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.list-item:first-child { border-top: 1px solid var(--line-soft); }
[id$="-list"] { margin: 8px 0 24px; }

/* ---------- Canvas ---------- */
.canvas-container { position: relative; width: 100%; height: 400px; background: var(--sheet); border: 1px solid var(--line); overflow: hidden; }
.canvas-container canvas { display: block; width: 100%; height: 100%; }
.diagram-label { font-size: var(--t-sm); font-weight: 600; font-stretch: 108%; margin: 24px 0 8px; }
.diagram-label .placeholder { font-weight: 400; font-stretch: 100%; }

/* ---------- Results ---------- */
.result-line, .result-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .9375rem; }
.result-num, .result-value { font-weight: 600; text-align: right; display: inline-flex; align-items: center; }
.result-label { color: var(--muted); }
.result-num.tens { color: var(--blue); }
.result-num.comp { color: var(--red); }
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.results-grid h3 { font-size: .9375rem; margin-bottom: 6px; }
@media (max-width: 560px) { .results-grid { grid-template-columns: minmax(0, 1fr); } }
.placeholder { color: var(--muted); font-size: var(--t-sm); }
.error-msg { display: none; color: var(--red); font-size: var(--t-sm); margin-top: 10px; }
.callout { margin-top: 12px; padding: 10px 14px; border: 1px solid; border-radius: var(--radius); font-size: var(--t-sm); }
.callout.ok { border-color: var(--blue); color: var(--blue); background: rgba(46, 94, 153, .06); }
.callout.warn { border-color: #8A5A00; color: #7A4F00; background: rgba(138, 90, 0, .07); }
.callout.bad { border-color: var(--red); color: var(--red); background: rgba(179, 38, 30, .06); }
.legend { display: flex; gap: 20px; font-size: var(--t-sm); color: var(--muted); margin-bottom: 10px; }
.legend span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; }
.legend .t::before { background: var(--blue); }
.legend .c::before { background: var(--red); }

/* ---------- Toast ---------- */
#toast-container { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; }
.toast { background: var(--ink); color: var(--sheet); padding: 12px 16px; border-radius: var(--radius); font-size: var(--t-sm); max-width: 340px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: none; }
.toast.error { background: var(--red); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- Segmented choices (converter categories, QR tabs) ---------- */
.category-select, .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.category-btn, .tab-btn { font: 500 var(--t-sm)/1 var(--font); color: var(--muted); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; }
.category-btn:hover, .tab-btn:hover { color: var(--ink); border-color: var(--ink); }
.category-btn.active, .tab-btn.active { color: var(--sheet); background: var(--ink); border-color: var(--ink); }

/* ---------- Calculator ---------- */
.calculator-container { max-width: 420px; }
.calculator-display { border: 1.5px solid var(--ink); background: var(--sheet); padding: 14px 16px; text-align: right; margin-bottom: 12px; }
.previous-operand { min-height: 1.4em; color: var(--muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.current-operand { width: 100%; border: 0; background: transparent; text-align: right; font: 600 2rem/1.2 var(--font); color: var(--ink); }
.current-operand:focus { outline: none; }
.calculator-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.btn-calc { font: 500 1.0625rem/1 var(--font); padding: 16px 0; cursor: pointer; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); }
.btn-calc:hover, .btn-calc.active-key { background: var(--tint); border-color: var(--ink); }
.btn-calc.scientific, .btn-calc.function { color: var(--muted); font-size: .9375rem; }
.btn-calc.operator { font-weight: 600; }
.btn-calc.special { color: var(--blue); font-size: .875rem; }
.btn-calc.equals { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.calc-info { margin-top: 16px; color: var(--muted); font-size: var(--t-sm); }

/* ---------- Converter ---------- */
.converter-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: end; max-width: 760px; }
.input-wrapper { display: flex; border: 1px solid var(--line); background: var(--sheet); border-radius: var(--radius); }
.input-wrapper:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.input-wrapper input, .input-wrapper select { font: inherit; color: var(--ink); background: transparent; border: 0; padding: 10px 12px; min-width: 0; }
.input-wrapper input { flex: 1; }
.input-wrapper select { border-left: 1px solid var(--line-soft); }
.input-wrapper input:focus, .input-wrapper select:focus { outline: none; }
.swap-btn, .btn-swap { font: 500 1.25rem/1 var(--font); width: 44px; height: 44px; cursor: pointer; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.swap-btn:hover, .btn-swap:hover { border-color: var(--ink); }
.result-box { grid-column: 1 / -1; border-top: 1.5px solid var(--ink); padding-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.result-box .result-value { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-stretch: 110%; text-align: left; overflow-wrap: anywhere; }
.result-box .result-unit { color: var(--muted); }
@media (max-width: 640px) {
  .converter-grid { grid-template-columns: minmax(0, 1fr); }
  .swap-btn { justify-self: start; margin: 0; }
}

/* ---------- Coordinates ---------- */
.coords-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
.io-column h3 { font-size: .9375rem; margin-bottom: 14px; }
.swap-container { display: flex; align-items: center; }
.coord-result { margin: 0 0 16px; }
.datum { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--muted); font-weight: 400; font-stretch: 100%; }
.datum select { width: auto; padding: 6px 10px; }
#btn-convert { width: auto; padding: 12px 22px; }
@media (max-width: 760px) { .coords-grid { grid-template-columns: minmax(0, 1fr); } .swap-container { justify-content: flex-start; } }
.map-box { position: relative; height: 400px; border: 1px solid var(--line); background: var(--tint); }
#map-container { position: absolute; inset: 0; }
.map-consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; z-index: 1; background: var(--tint); }
.map-consent p { max-width: 46ch; color: var(--muted); font-size: var(--t-sm); }
.map-consent .btn-action { width: auto; padding: 11px 20px; }
.batch-area { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; border: 1.5px dashed var(--line); text-align: center; cursor: pointer; background: var(--sheet); }
.batch-area:hover, .batch-area:focus-within { border-color: var(--ink); }
.batch-area strong { font-weight: 600; }
#file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.table-container { overflow-x: auto; margin-top: 16px; }
#batch-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
#batch-table th, #batch-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
#batch-table th { color: var(--muted); font-weight: 400; border-bottom: 1.5px solid var(--ink); }
.leaflet-container { font-family: var(--font); }

/* ---------- QR ---------- */
.form-section { display: none; }
.form-section.active { display: block; }
.color-row { display: flex; gap: 16px; }
.color-row > div { display: grid; gap: 6px; }
.color-input-wrapper { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); }
.preview-container { display: grid; justify-items: center; gap: 16px; }
.qr-output { padding: 16px; background: var(--sheet); border: 1px solid var(--line); }
.qr-output img, .qr-output canvas { display: block; max-width: 100%; height: auto; }
.size-display { color: var(--muted); font-size: var(--t-sm); }
.preview-container .btn-download { width: auto; padding: 12px 22px; }

/* ---------- Palette ---------- */
.palette-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 24px; align-content: start; }
.color-card { position: relative; border: 1px solid var(--line-soft); background: var(--sheet); }
.color-preview { position: relative; height: 220px; cursor: pointer; }
.color-preview:focus-visible { outline-offset: -4px; outline-color: var(--sheet); }
.overlay-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(20, 34, 58, .85); color: #fff; font-size: var(--t-xs); padding: 4px 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.color-card.copied .overlay-msg { opacity: 1; }
.color-info { padding: 12px; display: grid; gap: 4px; }
.hex-code { font: 600 .9375rem/1.2 var(--font); text-transform: uppercase; text-align: left; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.hex-code:hover { text-decoration: underline; }
.rgb-code { color: var(--muted); font-size: var(--t-xs); }
.card-actions { margin-top: 6px; }
.lock-btn { font: 500 var(--t-xs)/1 var(--font); padding: 5px 8px; cursor: pointer; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); }
.lock-btn.locked { color: var(--sheet); background: var(--ink); border-color: var(--ink); }
@media (max-width: 1000px) { .palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .color-preview { height: 140px; } }

/* Calculator display extras */
.display-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.angle-mode { font: 600 var(--t-xs)/1 var(--font); letter-spacing: .04em; color: var(--blue); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 8px; cursor: pointer; }
.angle-mode:hover { border-color: var(--ink); }
.display-top .previous-operand { flex: 1; }
.current-operand.error { color: var(--red); }
.calculator-display:has(.current-operand.error) .previous-operand { color: var(--red); }

/* Converter result extras */
.factor-line { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: var(--t-sm); }
.result-box .result-value.is-error { font-size: 1rem; color: var(--red); font-stretch: 100%; }

/* Coordinates extras */
.io-column.is-output input:disabled { color: var(--muted); background: var(--tint); }
.batch-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.batch-actions .hint { margin: 0; }
.batch-actions .btn-action { width: auto; padding: 10px 18px; }
.cell-error { color: var(--red); white-space: normal !important; }

/* QR extras */
.qr-output canvas[hidden] { display: none; }
.qr-output canvas { width: 264px; max-width: 100%; height: auto; image-rendering: pixelated; }
.download-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; }
.download-row .btn-download, .download-row .btn-action { width: auto; padding: 11px 16px; margin: 0; }
.download-row select { width: auto; padding: 8px 10px; }
.btn-download:disabled, .btn-action:disabled { opacity: .45; cursor: not-allowed; }
.check { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); margin-bottom: 16px; }
.preview-container .callout { margin: 0; max-width: 40ch; }
.preview-container .hint { text-align: center; max-width: 44ch; }

/* Palette extras */
.color-preview { display: flex; align-items: flex-end; padding: 10px 12px; }
.swatch-text { font: 600 var(--t-sm)/1.25 var(--font); pointer-events: none; }
.swatch-text small { font-weight: 400; font-size: var(--t-xs); opacity: .9; }
.color-card.is-locked { border-color: var(--ink); }
.mode-select.is-invalid { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }