/* 3DHM calculator style (3dhm-tool-styles, "Calculators" family: flat cards + technical touches).
   Used by: pages/tools/3d-printing.blade.php  (wrapper <div class="tc">).
   Other tools can use it later: load this file + calc.js and wrap the tool in class="tc".
   Light mode only (same as the rest of the site); no dark mode.
   Palette FINAL 22.10.2026 — no black backgrounds; dark areas are slate. */

.tc {
  --tc-primary: #617A35; --tc-primary-h: #3F5022; --tc-on-primary: #FFFFFF;
  --tc-hl: #F7C948; --tc-on-hl: #23241F; --tc-hl-soft: #FDF4DA;
  --tc-page: #F6F7F3; --tc-card: #FFFFFF; --tc-sunk: #F6F7F3; --tc-line: #E7EBE1; --tc-border: #C0CAAE;
  --tc-input: #8295A6; --tc-input-bg: #FFFFFF; --tc-sel: #EEF1E4; --tc-sel-ink: #3F5022; --tc-sel-border: #617A35;
  --tc-ink: #23241F; --tc-muted: #3E5C76; --tc-steel: #4A7192;
  --tc-ok-bg: #E3F1E8; --tc-ok-ink: #1F5C39; --tc-ok-border: #2E7D4F;
  --tc-warn-bg: #FDE7E2; --tc-warn-ink: #7A2A1F; --tc-warn-border: #F2765E;
  --tc-info-bg: #FDF4DA; --tc-info-ink: #5C4710; --tc-info-border: #E2AE2C;
  --tc-cta-bg: #3E5C76; --tc-cta-ink: #FFFFFF; --tc-cta-sub: #E7EBE1;
  /* drawing */
  --tc-d-body: #E7EBE1; --tc-d-edge: #8295A6; --tc-d-hole: #FFFFFF; --tc-d-key: #4A7192;
  --tc-d-dim: #23241F; --tc-d-fill: #F7C948; --tc-d-fill-edge: #E2AE2C; --tc-d-metal: #C9CCCF;
  --tc-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  font-family: var(--tc-sans); color: var(--tc-ink); background: var(--tc-page);
  color-scheme: light;
  font-size: 16px; line-height: 1.5; border-radius: 16px; padding: 16px; text-align: left;
}
.tc *, .tc *::before, .tc *::after { box-sizing: border-box; }
.tc [hidden], .tc .hidden { display: none !important; }
.tc .tc-mono { font-family: var(--tc-mono); }
.tc :is(button, a, input, select, summary):focus-visible { outline: 3px solid var(--tc-hl); outline-offset: 2px; }

/* layout */
.tc-grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.tc-inputs { flex: 1 1 340px; max-width: 100%; }
.tc-out { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
@media (min-width: 1024px) { .tc-inputs { flex: 0 0 350px; position: sticky; top: 12px; } }
.tc-card { background: var(--tc-card); border: 1px solid var(--tc-border); border-radius: 16px; padding: 20px; }
.tc-inputs { display: flex; flex-direction: column; gap: 20px; }

/* labels + controls */
.tc-lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); margin: 0 0 8px; }
.tc-lbl small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.tc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.tc-seg { display: flex; background: var(--tc-line); border-radius: 10px; padding: 4px; gap: 4px; flex: 1 1 200px; }
.tc-seg button { flex: 1 1 0; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--tc-muted); font: 600 14px var(--tc-sans); cursor: pointer; padding: 0 8px; }
.tc-seg button[aria-pressed="true"] { background: var(--tc-primary); color: var(--tc-on-primary); font-weight: 700; }
.tc-seg button:disabled { opacity: .45; cursor: not-allowed; }
.tc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.tc-chips.tc-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-chip { min-height: 46px; border: 1px solid var(--tc-border); border-radius: 10px; background: var(--tc-input-bg); color: var(--tc-ink); font: 600 15px var(--tc-sans); cursor: pointer; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.tc-chip.tc-num { font-family: var(--tc-mono); }
.tc-chip small { font-weight: 400; font-size: 12px; color: var(--tc-muted); margin-top: 2px; }
.tc-chip[aria-pressed="true"] { border: 2px solid var(--tc-sel-border); background: var(--tc-sel); color: var(--tc-sel-ink); font-weight: 700; }
.tc-chip[aria-pressed="true"] small { color: var(--tc-sel-ink); }
.tc-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.tc-row > .tc-field { flex: 1 1 140px; }
.tc-field small { font-weight: 400; color: var(--tc-muted); font-size: 12px; }
.tc input[type=number], .tc input[type=text], .tc select {
  width: 100%; min-height: 46px; border: 1px solid var(--tc-input); border-radius: 10px; padding: 0 12px;
  font: 500 16px var(--tc-mono); color: var(--tc-ink); background: var(--tc-input-bg); min-width: 0;
}
.tc select { font-family: var(--tc-sans); font-size: 15px; }
.tc-sub { border-top: 1px solid var(--tc-line); padding-top: 16px; }
.tc details.tc-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--tc-muted); min-height: 32px; display: flex; align-items: center; }
.tc details.tc-more[open] > summary { margin-bottom: 12px; }

/* result */
/* result: drawing beside the numbers when there is room (container query), else below */
.tc-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@container (min-width: 640px) { .tc-result { grid-template-columns: minmax(0, 1fr) 240px; } }
@container (min-width: 860px) { .tc-result { grid-template-columns: minmax(0, 1fr) 290px; } }
.tc-res-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tc-res-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tc-res-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.tc-live { font-size: 12px; font-weight: 600; color: var(--tc-ok-ink); background: var(--tc-ok-bg); border-radius: 999px; padding: 4px 10px; }
.tc-big { background: var(--tc-hl); color: var(--tc-on-hl); border-radius: 14px; padding: 16px 20px; }
.tc-big-lbl { font-size: 13px; font-weight: 700; }
.tc-big-val { font: 700 42px/1.1 var(--tc-mono); letter-spacing: -.02em; }
.tc-big-val small { font-size: .5em; font-weight: 700; }
.tc-big-sub { font-size: 13px; margin-top: 4px; }
.tc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tc-kv { border: 1px solid var(--tc-border); border-radius: 12px; padding: 10px 14px; background: var(--tc-card); }
.tc-kv-k { font-size: 12px; color: var(--tc-muted); font-weight: 600; }
.tc-kv-v { font: 700 20px/1.25 var(--tc-mono); }
.tc-kv-v small { font: 500 12px var(--tc-sans); color: var(--tc-muted); }
.tc-note { border-radius: 12px; padding: 11px 14px; font-size: 14px; line-height: 1.5; border: 1px solid; }
.tc-note.ok { background: var(--tc-ok-bg); color: var(--tc-ok-ink); border-color: var(--tc-ok-border); }
.tc-note.warn { background: var(--tc-warn-bg); color: var(--tc-warn-ink); border-color: var(--tc-warn-border); }
.tc-note.info { background: var(--tc-info-bg); color: var(--tc-info-ink); border-color: var(--tc-info-border); }
.tc-notes { display: flex; flex-direction: column; gap: 8px; }
.tc-notes:empty, .tc-extra:empty, .tc-tips:empty { display: none; }
.tc-tips { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.tc-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--tc-muted); }
.tc-step { font: 600 14px var(--tc-mono); padding: 4px 10px; border-radius: 8px; border: 1px solid var(--tc-border); color: var(--tc-ink); background: var(--tc-card); }
.tc-step.is-rec { background: var(--tc-sel); border: 2px solid var(--tc-sel-border); color: var(--tc-sel-ink); }
.tc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tc-table td, .tc-table th { border-top: 1px solid var(--tc-line); padding: 7px 8px 7px 0; vertical-align: top; text-align: left; }
.tc-table td:first-child { font-weight: 700; white-space: nowrap; }
.tc-table-wrap { overflow-x: auto; }
.tc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--tc-input); border-radius: 10px; background: var(--tc-input-bg); color: var(--tc-ink); font: 600 14px var(--tc-sans); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
.tc-btn:hover { background: var(--tc-sel); color: var(--tc-sel-ink); }
.tc-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.tc-btn.is-done { background: var(--tc-ok-bg); color: var(--tc-ok-ink); border-color: var(--tc-ok-border); }
.tc-src { font-size: 12px; color: var(--tc-muted); margin: 0; line-height: 1.5; }
.tc-fig { margin: 0; background: var(--tc-sunk); border: 1px solid var(--tc-border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; align-self: start; }
.tc-fig svg { width: 100%; max-width: 300px; height: auto; display: block; }
.tc-fig figcaption { font-size: 12px; color: var(--tc-muted); text-align: center; }
/* drawing classes (inline SVG built by the page) */
.tc .d-body { fill: var(--tc-d-body); stroke: var(--tc-d-edge); stroke-width: 2; }
.tc .d-hole { fill: var(--tc-d-hole); stroke: var(--tc-d-key); stroke-width: 2.5; }
.tc .d-key { stroke: var(--tc-d-key); stroke-width: 1.5; fill: none; }
.tc .d-dim { stroke: var(--tc-d-dim); stroke-width: 1.5; fill: none; }
.tc .d-dash { stroke: var(--tc-d-key); stroke-width: 2; fill: none; stroke-dasharray: 6 5; }
.tc .d-fill { fill: var(--tc-d-fill); stroke: var(--tc-d-fill-edge); stroke-width: 1.5; }
.tc .d-facet { stroke: var(--tc-d-fill-edge); stroke-width: 3; fill: none; stroke-linejoin: round; }
.tc .d-metal { fill: var(--tc-d-metal); stroke: var(--tc-d-key); stroke-width: 2; }
.tc .d-txt { fill: var(--tc-d-dim); font: 700 14px var(--tc-mono); }
.tc .d-small { fill: var(--tc-muted); font: 500 12px var(--tc-sans); }

/* "Need it printed?" */
.tc-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; text-decoration: none; background: var(--tc-cta-bg); color: var(--tc-cta-ink); border-radius: 14px; padding: 16px 20px; }
.tc-cta:hover { filter: brightness(1.06); }
.tc-cta b { font-size: 16px; }
.tc-cta span.tc-cta-sub { color: var(--tc-cta-sub); font-size: 14px; }
.tc-cta .tc-cta-btn { background: var(--tc-hl); color: var(--tc-on-hl); border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.tc-disclaimer { font-size: 12px; color: var(--tc-muted); margin: 0; }

/* phone: result bar stays at the bottom while you type */
.tc-bar { display: none; }
@media (max-width: 767px) {
  .tc { padding: 12px; border-radius: 12px; padding-bottom: 150px; }
  .tc-card { padding: 16px; }
  .tc-big-val { font-size: 36px; }
  .tc-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--tc-hl); color: var(--tc-on-hl);
            padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 20px rgba(62, 92, 118, .28); font-family: var(--tc-sans); }
  .tc-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tc-bar-lbl { font-size: 12px; font-weight: 700; }
  .tc-bar-val { font: 700 28px/1.15 var(--tc-mono); overflow-wrap: anywhere; }
  .tc-bar-copy { width: 48px; height: 48px; flex: 0 0 auto; border: 0; border-radius: 12px; background: var(--tc-hl-soft); color: var(--tc-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .tc-bar-link { display: block; margin-top: 8px; text-align: center; background: var(--tc-primary); color: #FFFFFF; text-decoration: none; border-radius: 10px; padding: 11px; font-weight: 700; font-size: 14px; }
}

/* print: result + drawing only, on white */
@media print {
  .tc { background: #FFFFFF !important; color: #23241F !important; padding: 0; }
  .tc-inputs, .tc-actions, .tc-cta, .tc-bar, .tc-live { display: none !important; }
  .tc-card, .tc-fig, .tc-kv { border-color: #C0CAAE !important; background: #FFFFFF !important; }
  .tc-result { grid-template-columns: minmax(0, 1fr) 260px; }
  .tc-print-head { display: block !important; }
}
.tc-print-head { display: none; font-size: 12px; color: var(--tc-muted); margin: 0 0 8px; }

/* ---- page header (shared tool intro / tiles / tabs) restyled ONLY on pages that add html.tc-page ---- */
html.tc-page .tp { --tp-ink: #23241F; --tp-muted: #3E5C76; --tp-rule: #C0CAAE; --tp-blue: #617A35; --tp-blue-d: #3F5022; --tp-soft: #EEF1E4; font-family: 'Space Grotesk', system-ui, sans-serif; }
html.tc-page .tp-h1 { color: #23241F; letter-spacing: -.01em; }
html.tc-page .tp-lead { color: #3E5C76; }
html.tc-page .tp-intro-ico { border-width: 1px; border-color: #C0CAAE; background: #EEF1E4; }
html.tc-page .tp-bar { border-color: #C0CAAE; background: #FFFFFF; }
html.tc-page .tp-bar .tp-ex { color: #23241F; }
html.tc-page .tp-btn { border-color: #8295A6; color: #23241F; min-height: 44px; }
html.tc-page .tp-btn:hover { background: #EEF1E4; color: #3F5022; }
html.tc-page .tp-btn:focus-visible, html.tc-page .tp-tile:focus-visible, html.tc-page .tp-tab:focus-visible { outline: 3px solid #F7C948; }
html.tc-page .tp-btn.is-done { background: #E3F1E8; border-color: #2E7D4F; color: #1F5C39; }
html.tc-page .tp-nav { border-color: #C0CAAE; }
html.tc-page .tp-tile-ico { border: 1px solid #C0CAAE; box-shadow: none; }
html.tc-page .tp-tile[aria-current="page"] .tp-tile-ico { background: #EEF1E4; border: 2px solid #617A35; }
html.tc-page .tp-tile[aria-current="page"] .tp-tile-txt { color: #3F5022; }
html.tc-page .tp-tabs { border-bottom-color: #E7EBE1; }
html.tc-page .tp-tab { color: #3E5C76; min-height: 44px; display: inline-flex; align-items: center; }
html.tc-page .tp-tab:hover { background: #EEF1E4; color: #23241F; }
html.tc-page .tp-tab[aria-current="page"] { color: #3F5022; border-bottom-color: #617A35; }