/* Calculator-specific page styles */
body.calculator-page{
  background:var(--canvas);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.cp-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
/* The faq/related-tools templates ship their own .cp-wrap so pages whose
   section has no page-level container (insert-hole, cut-list) still centre
   correctly. Where the section already sits inside a page-level .cp-wrap,
   neutralise the inner one — otherwise the headings/cards get a double 24px
   padding and no longer line up with the rest of the page. */
.cp-wrap .related-tools .cp-wrap,
.cp-wrap .faq-section .cp-wrap{
  max-width:none;
  margin:0;
  padding:0;
}

.calculator-page .site-header{
  display:block;
  padding-top:28px;
  margin-bottom:0;
}
.calculator-page .site-header .cp-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.calculator-page .site-header nav{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.calculator-page main{
  display:block;
  padding:28px 0 72px;
}
.calculator-page .crumbs{
  margin:0 0 22px;
}

/* Reserve space for async-loaded components (loader.js replaces these
   placeholders with real content after fetch — prevents CLS) */
.calculator-page [data-component-placeholder]{
  min-height:50px;
}
.calculator-page [data-component-placeholder="site-header-calculator"]{
  min-height:80px;
}
.calculator-page [data-component-placeholder="footer-calculator"]{
  min-height:60px;
}
.calculator-page [data-component-placeholder="related-tools"]{
  min-height:200px;
}
.calculator-page [data-component-placeholder="faq"]{
  min-height:300px;
}

/* Hero layout: title block + tool illustration (components/tool-illustration.js).
   The illustration column collapses on its own when a tool has no art yet,
   because the loader removes the empty slot. */
.cp-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  margin-bottom:36px;
}
.cp-hero-text{min-width:0;}
.cp-hero h1{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  font-size:clamp(32px, 5.5vw, 50px);
  line-height:1.03;
  letter-spacing:-0.01em;
  margin:0 0 14px;
  text-transform:uppercase;
}
.cp-description{
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.6;
  max-width:78ch;
  margin:0 0 16px;
}
.meta-bar{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.meta-bar span + span::before{
  content:"·";
  margin:0 12px;
  color:var(--line);
}

/* ---------- Tool illustration ----------
   Slot injected by components/hero.html and filled by
   components/tool-illustration.js. The skeleton keeps the final aspect ratio so
   the hero does not shift while the illustration is being injected.
   The offset lives on the art itself (not as a grid gap) so pages without an
   illustration do not reserve empty space. */
.cp-hero-art{
  width:clamp(280px, 42vw, 480px);
  margin-left:36px;
}
.cp-hero-art-skeleton{
  display:block;
  aspect-ratio:480 / 320;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
}
.cp-hero-art-svg{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:480 / 320;
}

/* Shared illustration palette: every shape is painted from the design tokens,
   so the art follows base.css (and a future dark mode) automatically.
   The house style is a light "technical sheet": a white panel over a faint
   grid, a flat-shaded solid, thin dimension lines and the tool formula on an
   accent card. */
.ill-panel{fill:var(--card); stroke:var(--line); stroke-width:2;}
.ill-grid{fill:none; stroke:var(--line-soft); stroke-width:1;}
/* Block faces: top lightest, right one step darker, left the darkest of the
   three. The left face is low-opacity ink over the opaque .ill-slab-base, so
   the grid of the sheet never shows through the solid. */
.ill-slab-base{fill:var(--card);}
.ill-slab-top{fill:var(--line-soft);}
.ill-slab-right{fill:var(--line);}
.ill-slab-left{fill:var(--ink); opacity:.28;}
/* Back corner of the solid, dashed like the hidden lines of a technical drawing */
.ill-hidden{fill:none; stroke:var(--ink-soft); stroke-width:1.3; stroke-dasharray:6 5; opacity:.4;}
/* Dimensions: extension lines, dimension line, arrow heads, mono label */
.ill-ext{fill:none; stroke:var(--line); stroke-width:1.2;}
.ill-dim{fill:none; stroke:var(--ink-soft); stroke-width:1.4; stroke-linecap:round;}
.ill-arrow{fill:var(--ink-soft);}
.ill-label{font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:600; letter-spacing:.04em; fill:var(--ink-soft);}
/* Spec card: the generic formula of the tool, in the accent colour of the site
   (same token as the Calculate button) — tinted surface, accent border */
.ill-card-fill{fill:var(--card);}
.ill-card-tint{fill:var(--ochre); opacity:.12;}
.ill-card-line{fill:none; stroke:var(--ochre); stroke-width:1.6;}
.ill-formula{font-family:'IBM Plex Mono', monospace; font-size:17px; font-weight:600; fill:var(--ink);}
/* Solids, surfaces and containers */
.ill-shadow{fill:var(--line-soft);}
.ill-body{fill:var(--line-soft);}
.ill-body-cap{fill:var(--canvas);}
.ill-ground{fill:var(--line-soft);}
.ill-wall{fill:var(--canvas);}
.ill-wall-alt{fill:var(--line-soft);}
.ill-tray-inner{fill:var(--line);}
/* Material inside a container: soil, compost, mulch, resin, water */
.ill-fill-soil{fill:var(--ochre); opacity:.18;}
.ill-fill-mix{fill:var(--ochre-dark); opacity:.16;}
.ill-fill-leaf{fill:var(--teal); opacity:.14;}
.ill-fill-water{fill:var(--teal); opacity:.16;}
/* Repeated pieces: tiles, bricks, planks, deck boards, wall panels */
.ill-piece{fill:var(--card);}
.ill-piece-alt{fill:var(--line-soft);}
.ill-piece-accent{fill:var(--ochre); opacity:.2;}
.ill-joint{fill:var(--canvas);}
.ill-pattern{fill:none; stroke:var(--ink-soft); stroke-width:1.2;}
/* Markers and paths */
.ill-dot{fill:var(--ink-soft);}
.ill-dot-accent{fill:var(--ochre);}
.ill-tube{fill:none; stroke:var(--ink-soft); stroke-width:3; stroke-linecap:round;}
.ill-path-print{fill:none; stroke:var(--ochre); stroke-width:3.2; stroke-linecap:round;}
.ill-path-travel{fill:none; stroke:var(--ink-soft); stroke-width:1.6; stroke-dasharray:6 5;}
/* Output sheet of the generators, formatter and decoder */
.ill-sheet{fill:var(--card); stroke:var(--line); stroke-width:2;}
.ill-chip{fill:var(--canvas); stroke:var(--line); stroke-width:1.5;}
.ill-mask{fill:none; stroke:var(--ink-soft); stroke-width:5; stroke-linecap:round; stroke-dasharray:9 6; opacity:.45;}
.ill-code{font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:500; fill:var(--ink-soft);}
/* Spec tag: names an object or a region of the drawing (A, T, B, N) */
.ill-tag{fill:var(--card); stroke:var(--ink-soft); stroke-width:1.3;}
.ill-tag-text{font-family:'IBM Plex Mono', monospace; font-size:14px; font-weight:600; fill:var(--ink);}
.ill-leader{fill:none; stroke:var(--ink-soft); stroke-width:1.1; stroke-dasharray:3 3;}
.ill-tick{fill:none; stroke:var(--ink-soft); stroke-width:1.4;}
.ill-outline{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;}

@media (max-width:900px){
  .cp-hero{
    grid-template-columns:minmax(0, 1fr);
    row-gap:20px;
  }
  .cp-hero-art{
    width:100%;
    max-width:480px;
    margin-left:0;
  }
}
/* Phone rendering is small, so the formula card is dropped (it would be
   unreadable) and the annotations are scaled up instead — the drawing and its
   dimensions stay readable without the card. */
@media (max-width:480px){
  .ill-formula-card{display:none;}
  .ill-label{font-size:24px;}
  .ill-tag-text{font-size:18px;}
  .ill-code{font-size:17px;}
}

.cp-calculator-wrapper{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:8px;
}

/* Reserve space for the dynamically injected trust badge (loader.js inserts it
   as the first child of #calculator after page load — this prevents CLS) */
.calculator-page #calculator{
  position:relative;
}
.calculator-page #calculator .trust-badge{
  min-height:44px;
}
.calculator-page #calculator:not(:has(.trust-badge))::before{
  content:"";
  display:block;
  min-height:44px;
  margin-bottom:20px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.card-content{padding:32px;}
@media (max-width:640px){
  .card-content{padding:24px 20px;}
}

.form-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:24px;
}
.form-header h2{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:20px;
  text-transform:uppercase;
  margin:0;
  color:var(--ink);
}

.unit-switcher{
  display:flex;
  align-items:center;
  gap:16px;
}
.unit-switcher label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
}
.unit-switcher input[type="radio"]{
  accent-color:var(--teal);
  width:15px;
  height:15px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
@media (max-width:480px){
  .form-grid{grid-template-columns:1fr;}
}

.input-group{
  position:relative;
  display:flex;
  flex-direction:column;
}
.input-group label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:7px;
}
.input-group input,
.input-group select{
  width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  background:var(--canvas);
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:11px 40px 11px 12px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .12s ease, background .12s ease;
}
.input-group select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%235B6660' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.input-group input:focus,
.input-group select:focus{
  border-color:var(--teal);
  background:#fff;
}
.input-group input::placeholder{color:#9AA6A0;}

/* ---------- Nozzle Size Calculator ---------- */
/* The mode switch is a two-option control, not a pair of generic buttons. */
#calculator:has(.mode-toggle) .form-header{margin-bottom:16px;}
#calculator:has(.mode-toggle) .mode-toggle{
  display:inline-flex;
  align-items:stretch;
  max-width:100%;
  gap:4px;
  padding:4px;
  margin:0 0 20px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:12px;
}
#calculator:has(.mode-toggle) .mode-btn{
  appearance:none;
  -webkit-appearance:none;
  min-height:40px;
  padding:9px 16px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink-soft);
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
#calculator:has(.mode-toggle) .mode-btn:hover{
  background:var(--card);
  color:var(--ink);
}
#calculator:has(.mode-toggle) .mode-btn.active,
#calculator:has(.mode-toggle) .mode-btn[aria-pressed="true"]{
  background:var(--teal);
  color:#fff;
  box-shadow:0 1px 2px rgba(31,36,33,.16);
}
#calculator:has(.mode-toggle) .mode-btn:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
#calculator:has(.mode-toggle) .mode-inputs{
  width:100%;
  max-width:760px;
}
#calculator:has(.mode-toggle) .mode-inputs .input-group label{
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  margin-bottom:8px;
}
#calculator:has(.mode-toggle) .mode-inputs .input-group input,
#calculator:has(.mode-toggle) .mode-inputs .input-group select{
  min-height:48px;
  padding:12px 44px 12px 14px;
  border-radius:10px;
  background:var(--card);
}
#calculator:has(.mode-toggle) .mode-inputs .input-group input:focus,
#calculator:has(.mode-toggle) .mode-inputs .input-group select:focus{
  box-shadow:0 0 0 3px rgba(47,93,80,.12);
}
#calculator:has(.mode-toggle) .mode-inputs .input-group:has(> .unit) > input{
  padding-right:72px;
  border-radius:10px 0 0 10px;
}
#calculator:has(.mode-toggle) .mode-inputs .input-group:has(> .unit) > .unit{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  width:58px;
  margin:0;
  padding:0 10px;
  background:var(--canvas);
  border-left:1px solid var(--line);
  border-radius:0 10px 10px 0;
}
#calculator:has(.mode-toggle) .form-actions{margin-top:18px;}
#calculator:has(.mode-toggle) .form-actions .btn-primary,
#calculator:has(.mode-toggle) .form-actions .btn-secondary{min-height:44px;}
@media (max-width:640px){
  #calculator:has(.mode-toggle) .mode-toggle{display:flex; width:100%;}
  #calculator:has(.mode-toggle) .mode-btn{flex:1 1 0; min-width:0; padding-inline:10px;}
  #calculator:has(.mode-toggle) .mode-inputs{max-width:none;}
}

/* ---------- Custom radio group (Insert Hole "Fit") ----------
   The markup hides the native radios and redraws them (.radio-option /
   .radio-custom), but the generic .input-group rules above were stretching
   the hidden radios into full-width grey boxes — they looked like dead
   inputs and the selection was invisible ("can't enter a value").
   Selectors are scoped above .input-group input/.label so they win the
   cascade, and the pills give the group a visible checked + focus state. */
fieldset.input-group{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}
fieldset.input-group legend{
  padding:0;
  margin-bottom:7px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.input-group .radio-group{
  display:grid;
  gap:8px;
}
.input-group .radio-option{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--card);
  padding:10px 14px;
  font-family:'Work Sans', sans-serif;
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .12s ease;
}
.input-group .radio-option:hover{border-color:var(--teal);}
/* Hide the native control but keep it in the a11y tree and focusable. */
.input-group .radio-option input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  appearance:none;
  -webkit-appearance:none;
}
.input-group .radio-custom{
  flex:0 0 auto;
  width:16px;
  height:16px;
  border:2px solid var(--line);
  border-radius:50%;
  background:var(--card);
  transition:border-color .12s ease, background .12s ease;
}
.input-group .radio-option input:checked + .radio-custom{
  border-color:var(--teal);
  background:radial-gradient(circle, var(--teal) 0 3.5px, transparent 4px);
}
.input-group .radio-option:has(input:checked){border-color:var(--teal);}
.input-group .radio-option:has(input:focus-visible){
  outline:2px solid var(--teal);
  outline-offset:2px;
}

/* Checkbox field — matches the height/style of regular inputs */
label.checkbox-label{
  display:flex !important;
  align-items:center;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--canvas);
  padding:0 12px;
  height:46px !important;
  transition:border-color .12s ease, background .12s ease;
  cursor:pointer;
  margin-bottom:0 !important;
  font-family:'Work Sans', sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:0.04em !important;
  text-transform:uppercase !important;
  color:var(--ink) !important;
  line-height:1 !important;
}
label.checkbox-label:focus-within{
  border-color:var(--teal);
  background:#fff;
}
label.checkbox-label input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--teal);
  cursor:pointer;
  margin:0;
  padding:0;
  border:none;
  appearance:auto;
  -webkit-appearance:auto;
  background:none;
  flex-shrink:0;
}
label.checkbox-label span{
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  margin-left:10px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

/* Quantity + Include Numbers on one row (Username Generator) */
.quantity-numbers-row{
  flex-direction:row;
  align-items:flex-end;
  gap:12px;
}
.quantity-numbers-row .quantity-field{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.quantity-numbers-row .quantity-field label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:7px;
}
.quantity-numbers-row .quantity-field input{
  width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  background:var(--canvas);
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:11px 12px;
  outline:none;
}
.quantity-numbers-row .quantity-field input:focus{
  border-color:var(--teal);
  background:#fff;
}
.quantity-numbers-row label.checkbox-label--sm{
  flex:0 0 auto;
  white-space:nowrap;
}
.quantity-numbers-row label.checkbox-label--sm span{
  font-size:11px !important;
  letter-spacing:0.03em !important;
}
@media (max-width:480px){
  .quantity-numbers-row{
    flex-direction:column;
    align-items:stretch;
  }
  .quantity-numbers-row label.checkbox-label--sm{
    white-space:normal;
  }
}

/* Fake Data Generator: smaller text for field checkboxes (ID, First Name, etc.) */
#fields-container.form-grid{
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
@media (max-width:480px){
  #fields-container.form-grid{grid-template-columns:1fr 1fr;}
}
#fields-container label.checkbox-label{
  font-size:12px !important;
  padding:0 10px;
  height:40px !important;
}
#fields-container label.checkbox-label input[type="checkbox"]{
  width:14px;
  height:14px;
}

.input-group .unit{
  position:absolute;
  right:13px;
  bottom:11px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--ink-soft);
  pointer-events:none;
}
/* Groups with an inline unit (%, mm, s, min…) + an optional hint below the
   input: keep the unit centred on the INPUT, not on the whole group.
   `bottom:11px` above is relative to .input-group, so once a <p class="ws-hint">
   is added (e.g. handling-input "min") the group grows taller and the unit
   drops below the input — exactly the "s / min nhảy ra ngoài" bug.
   This grid overlay shares one row between input and unit, so label height
   (single vs. wrapped multi-line) and hint presence no longer matter. */
.input-group:has(> .unit){
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:start;
}
.input-group:has(> .unit) > label{grid-column:1; grid-row:1;}
.input-group:has(> .unit) > input{
  grid-column:1;
  grid-row:2;
  margin:0;
}
.input-group:has(> .unit) > .unit{
  grid-column:1;
  grid-row:2;
  position:static;
  right:auto;
  bottom:auto;
  align-self:center;
  justify-self:end;
  margin-right:13px;
  z-index:1;
}
.input-group:has(> .unit) > .ws-hint,
.input-group:has(> .unit) > p{grid-column:1; grid-row:3;}
/* Number spinners (Chrome/Edge/Safari up-down arrows) paint inside the input's
   right padding — exactly where the .unit overlay sits — so e.g. Density
   "g/cm³" and Price "per kg" get covered when the field is hovered/focused.
   Hide the spinners ONLY when a unit overlay is present (scoped with :has, so
   plain number fields like Quantity/Wall loops keep their native arrows and
   no other UI changes). Keyboard entry, wheel and mobile keyboards unaffected. */
.input-group:has(> .unit) > input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}
.input-group:has(> .unit) > input[type="number"]::-webkit-inner-spin-button,
.input-group:has(> .unit) > input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

.error-message{
  background:#FBEAE5;
  border:1px solid var(--error);
  color:var(--error);
  border-radius:8px;
  padding:11px 14px;
  font-size:13.5px;
  font-weight:500;
  margin-top:4px;
  margin-bottom:4px;
}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:22px;
}
.form-actions .ws-hint{
  flex:1 1 100%;
  min-width:0;
  margin:2px 0 0;
}
.btn-primary,
.btn-secondary{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:0.02em;
  border-radius:10px;
  padding:12px 26px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{
  background:var(--ochre);
  color:#fff;
  border:none;
}
.btn-primary:hover{background:var(--ochre-dark);}
.btn-secondary{
  background:transparent;
  color:var(--ink-soft);
  border:1.5px solid var(--line);
}
.btn-secondary:hover{
  border-color:var(--teal);
  color:var(--teal-dark);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
/* A disabled action must look disabled (quote tool disables Calculate until a
   file is parsed) — dim it and kill the hover affordance. */
.btn-primary:disabled,
.btn-secondary:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.btn-primary:disabled:hover{background:var(--ochre);}
.btn-secondary:disabled:hover{
  border-color:var(--line);
  color:var(--ink-soft);
}

.result-card .card-content{padding:32px;}
.result-main{
  padding-bottom:18px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:18px;
}
.result-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.result-value{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  font-size:44px;
  line-height:1;
  color:var(--teal-dark);
}
.result-summary{
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.5;
  margin:0 0 20px;
}
.result-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:14px;
}
.result-item{
  background:var(--canvas);
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:14px 16px;
}
.result-item-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:5px;
}
.result-item-value{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--ink);
}

/* Copy button in result cards */
.result-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:12px;
  margin-bottom:12px;
}
.result-main .result-label{
  margin-bottom:0;
}
.result-actions{
  display:flex;
  justify-content:flex-end;
  margin-bottom:0;
}
.result-actions .btn-secondary{
  padding:6px 12px;
  font-size:13px;
  float:none;
}

/* Username Generator: results list + copy buttons */
.result-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
@media (max-width:600px){
  .result-list{grid-template-columns:1fr;}
}
.result-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 10px 10px 14px;
  transition:border-color .15s ease, background .15s ease;
}
.result-list li:hover{
  border-color:var(--teal);
  background:#fff;
}
.result-list .name-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.result-list .copy-btn{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--ink-soft);
  cursor:pointer;
  padding:0;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.result-list .copy-btn:hover{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}
.result-list .copy-btn:active{
  transform:scale(0.92);
}
.result-list .copy-btn svg{
  width:15px;
  height:15px;
  pointer-events:none;
}

/* Compact "Copy" button next to result titles (Fake Data Generator, JSON Formatter, UUID Generator, JWT Decoder) */
#copy-btn.btn-secondary,
#copy-header-btn.btn-secondary,
#copy-payload-btn.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  font-size:12px;
  border-radius:7px;
  float:none;
}
#copy-btn.btn-secondary::before,
#copy-header-btn.btn-secondary::before,
#copy-payload-btn.btn-secondary::before{
  content:"";
  width:13px;
  height:13px;
  background-color:currentColor;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
  flex:0 0 auto;
}

.cp-content{margin-top:52px;}
.cp-content h2{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:27px;
  text-transform:uppercase;
  letter-spacing:0.005em;
  color:var(--ink);
  margin:44px 0 14px;
}
.cp-content > h2:first-child{margin-top:0;}
.cp-content h3{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:19px;
  text-transform:uppercase;
  color:var(--teal-dark);
  margin:30px 0 10px;
}
.cp-content p{
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.65;
  max-width:76ch;
  margin:0 0 14px;
}
.cp-content ul,
.cp-content ol{
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.7;
  max-width:76ch;
  margin:0 0 16px;
  padding-left:22px;
}
.cp-content li{margin-bottom:7px;}
.cp-content strong{color:var(--ink); font-weight:600;}

.formula-block{
  background:#1B211D;
  border-radius:var(--radius);
  padding:20px 24px;
  margin:14px 0 26px;
}
.formula-block pre{max-width:100%; overflow-x:auto;}
.formula-block p{margin:0 0 10px; max-width:none;}
.formula-block p:last-child{margin-bottom:0;}
.formula-block code{
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  color:#D7DED9;
}

/* Supporting content elements for calculator article bodies.
   All colors use theme tokens so dark mode updates automatically. */
.cp-content .table-wrap{overflow-x:auto; margin:14px 0 22px;}
.cp-content table{
  border-collapse:collapse;
  width:100%;
  min-width:420px;
  font-size:14.5px;
  color:var(--ink-soft);
  margin:0;
}
.cp-content th,
.cp-content td{
  border:1px solid var(--line);
  padding:9px 12px;
  text-align:left;
  vertical-align:top;
}
.cp-content th{
  background:var(--line-soft);
  color:var(--ink);
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.cp-content dl{margin:0 0 20px;}
.cp-content dt{
  color:var(--ink);
  font-weight:600;
  font-size:15.5px;
  margin-top:13px;
}
.cp-content dd{
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.65;
  margin:3px 0 0;
}
.cp-content .cp-note{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--ochre);
  border-radius:var(--radius);
  padding:14px 18px;
  margin:18px 0 24px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.6;
}
.cp-content .cp-note p{margin:0; max-width:none;}
.cp-content .cp-note strong{color:var(--ink);}

.faq-section{margin-top:10px;}
.faq-section h2{margin-top:0;}

.calculator-page footer{
  display:block;
  margin-top:48px;
  padding:24px 0;
  border-top:1px solid var(--line-soft);
}
.calculator-page footer .cp-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:12.5px;
  color:var(--ink-soft);
}
.calculator-page footer a{color:var(--ink-soft);}