/* =========================================================
   STYLES.CSS — SAFE REFRACTOR BASELINE
   Atualizado em 04/fev/2026 - Consolidated dark mode rules
   ---------------------------------------------------------
   Architecture (logical, not enforced yet):
   01 TOKENS
   02 BASE
   03 LAYOUT
   04 COMPONENTS 
   05 UTILITIES
   06 ADS / PUBLIFT (DO NOT TOUCH)

   IMPORTANT:
   - Functional behavior is IDENTICAL to the original file.
   - No class names were changed.
   - Publift block remains unmodified.
   - This file is a safe baseline for incremental cleanup.
   ========================================================*/

/* CSS - Atualizado em 14/jan/2026 - Abreviação de variáveis CSS */
@keyframes spin {
  0% { 
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:root {
  /* Fonts */
  --primary-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono-font: ui-monospace, "SF Mono", "Cascadia Code", "Source Code Pro",
    Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Base colors - Light */
  --pri-blue: #1976d2;
  --pri-blue-light: #2196f3;
  --pri-blue-dark: #1565c0;
  --pri-blue-hover: #1e88e5;
  --bg-white: #fff;
  --bg-light-gray: #f5f5f5;
  --bg-blue-tint: #f2faff;
  --bg-blue-pale: #e4f4ff;
  --bg-blue-light: #bbdefb;
  --bg-blue-header: #e2f3ff;
  --bg-orange-header: #f57c00;
  --text-dark: #212121;
  --text-medium: #424242;
  --text-light: #757575;
  --text-disabled: #9e9e9e;
  --text-gray-blue: #d1dcdf;
  --accent-red: #d32f2f;

  /* Base colors - Dark (defined here, used in dark mode) */
  --dk-bg-1: #121212;
  --dk-bg-2: #1e1e1e;
  --dk-bg-3: #2c2c2c;
  --dk-code: #263238;
  --dk-text: #e4f4ff;
  --dk-blue-light: #90caf9;
  --dk-blue-med: #64b5f6;
  --dk-blue-dark: #1565c0;
  --dk-blue-pri: #1976d2;
  --dk-blue-focus: #2196f3;
  --dk-red: #ef5350;
  --dk-brd: #424242;

  /* Spacing */
  --base-font-size: 1rem;
  --lin1-font-size: 0.85rem;
  --calc-margin: 45px -0.25em 0.75rem -0.25em;
  --sp-xl: 3rem;
  --sp-lg: 2rem;
  --sp-md: 1.25rem;
  --sp-sm: 0.75rem;
  --sp-xs: 0.5rem;
  --sp-xxs: 0.25rem;

  /* Border radius */
  --brd-rad-xs: 4px;
  --brd-rad-sm: 6px;
  --brd-rad-md: 8px;
  --brd-rad-lg: 12px;

  /* Transitions & Shadows */
  --trans-fast: 0.15s ease;
  --trans-normal: 0.3s ease;
  --shadow-sm: 0 2px 4px #00000014;
  --shadow-md: 0 4px 12px #0000001a;
  --shadow-lg: 0 8px 24px #0000001f;
  --shadow-xl: 0 12px 32px #00000026;

  /* Semantic colors - Light theme (default) */
  --main-bg-c: var(--bg-white);
  --wrap-bg-c: var(--bg-white);
  --calc-bg-c: var(--bg-blue-tint);
  --th-bg-c: var(--bg-blue-header);
  --tab-btn-bg-c: var(--pri-blue);
  --odd-row-bg-c: var(--bg-blue-tint);
  --even-row-bg-c: var(--bg-white);
  --code-bg-c: var(--bg-blue-tint);
  --ctrl-bg-c: var(--bg-white);
  --verb-bg-c: var(--bg-white);
  --sel-bg-c: var(--bg-blue-light);
  --hlp-bg-c: var(--pri-blue);
  --hl-bg-c: var(--bg-blue-tint);
  --text-c-main: var(--text-dark);
  --text-c-secondary: var(--text-medium);
  --th-color: var(--pri-blue-dark);
  --logo-color: var(--text-gray-blue);
  --destacado-color: var(--pri-blue);
  --hlp-color: var(--bg-white);
  --hl-txt-color: var(--accent-red);
  --link-color: var(--pri-blue);
  --link-hover-color: var(--pri-blue-hover);
  --btn-bg-c: var(--pri-blue);
  --btn-color: var(--bg-white);
  --btn-hover-bg-c: var(--pri-blue-dark);
  --brd-color: var(--bg-blue-pale);
  --calc-brd-color: var(--bg-blue-pale);
  --input-brd-color: var(--bg-blue-pale);
  --input-focus-brd-color: var(--pri-blue-light);
  --tip-brd-color: var(--pri-blue-light);
  --sb-c-1: var(--pri-blue);
  --sb-c-2: var(--bg-blue-pale);
}

/* Dark theme - System preference OR explicit selection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --main-bg-c: var(--dk-bg-1);
    --wrap-bg-c: var(--dk-bg-2);
    --calc-bg-c: var(--dk-bg-3);
    --th-bg-c: var(--dk-blue-dark);
    --tab-btn-bg-c: var(--dk-blue-pri);
    --odd-row-bg-c: var(--dk-bg-3);
    --even-row-bg-c: var(--dk-bg-2);
    --code-bg-c: var(--dk-code);
    --ctrl-bg-c: var(--dk-bg-3);
    --verb-bg-c: var(--dk-bg-3);
    --sel-bg-c: var(--dk-blue-pri);
    --hlp-bg-c: var(--dk-blue-pri);
    --hl-bg-c: var(--dk-code);
    --text-c-main: var(--dk-text);
    --text-c-secondary: var(--dk-text);
    --th-color: var(--dk-text);
    --logo-color: var(--text-gray-blue);
    --destacado-color: var(--dk-blue-med);
    --hlp-color: #fff;
    --hl-txt-color: var(--dk-red);
    --link-color: var(--dk-blue-med);
    --link-hover-color: var(--dk-blue-light);
    --btn-bg-c: var(--dk-blue-pri);
    --btn-color: #fff;
    --btn-hover-bg-c: var(--dk-blue-dark);
    --brd-color: var(--dk-brd);
    --calc-brd-color: var(--dk-brd);
    --input-brd-color: var(--dk-brd);
    --input-focus-brd-color: var(--dk-blue-focus);
    --tip-brd-color: var(--dk-blue-focus);
    --sb-c-1: var(--dk-blue-pri);
    --sb-c-2: var(--dk-bg-2);
  }
}

/* Dark theme - Explicit selection (overrides system preference) */
[data-theme="dark"] {
  --main-bg-c: var(--dk-bg-1);
  --wrap-bg-c: var(--dk-bg-2);
  --calc-bg-c: var(--dk-bg-3);
  --th-bg-c: var(--dk-blue-dark);
  --tab-btn-bg-c: var(--dk-blue-pri);
  --odd-row-bg-c: var(--dk-bg-3);
  --even-row-bg-c: var(--dk-bg-2);
  --code-bg-c: var(--dk-code);
  --ctrl-bg-c: var(--dk-bg-3);
  --verb-bg-c: var(--dk-bg-3);
  --sel-bg-c: var(--dk-blue-pri);
  --hlp-bg-c: var(--dk-blue-pri);
  --hl-bg-c: var(--dk-code);
  --text-c-main: var(--dk-text);
  --text-c-secondary: var(--dk-text);
  --th-color: var(--dk-text);
  --logo-color: var(--text-gray-blue);
  --destacado-color: var(--dk-blue-med);
  --hlp-color: #fff;
  --hl-txt-color: var(--dk-red);
  --link-color: var(--dk-blue-med);
  --link-hover-color: var(--dk-blue-light);
  --btn-bg-c: var(--dk-blue-pri);
  --btn-color: #fff;
  --btn-hover-bg-c: var(--dk-blue-dark);
  --brd-color: var(--dk-brd);
  --calc-brd-color: var(--dk-brd);
  --input-brd-color: var(--dk-brd);
  --input-focus-brd-color: var(--dk-blue-focus);
  --tip-brd-color: var(--dk-blue-focus);
  --sb-c-1: var(--dk-blue-pri);
  --sb-c-2: var(--dk-bg-2);
}

/* Placeholder color for dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::placeholder { color: #9e9e9e; }
}
[data-theme="dark"] ::placeholder { color: #9e9e9e; }

.theme-toggle {
    background: #ffffff26;
    border: 1px solid #ffffff4d;
    color: #fff;
    cursor: pointer;
    padding: 0;
    border-radius: var(--brd-rad-sm);
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    transition: all var(--trans-normal);
    height: 28px;
    width: 36px;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: var(--sp-xm);
}

.theme-toggle:hover {
  border-color: #fff9;
  transform: scale(1.05);
  background: #ffffff40;
}

.theme-toggle:focus {
  outline: 2px solid var(--destacado-color);
  outline-offset: 2px;
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-icon {
  display: none;
  width: 32px;
  height: 26px;
  color: #fff;
  stroke-width: 2;
}

/* Show sun icon (light) when in dark mode - clicking will switch to light */
[data-theme="dark"] .theme-icon-light {
  display: block;
}

/* Show moon icon (dark) when in light mode - clicking will switch to dark */
[data-theme="light"] .theme-icon-dark {
  display: block;
}

/* Default: show moon icon when no theme is set (assuming light default) */
:root:not([data-theme]) .theme-icon-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  /* When system prefers dark and no explicit theme, show sun icon */
  :root:not([data-theme]) .theme-icon-dark {
    display: none;
  }
  :root:not([data-theme]) .theme-icon-light {
    display: block;
  }
}

.theme-transitioning,
.theme-transitioning * {
  /* Optimized for performance - use only composited properties */
  transition: background-color 0.3s ease !important;
  /* Removed color and border-color transitions to prevent CLS from non-composited animations */
}
*,
::after,
::before {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

* {
  scrollbar-color: var(--sb-c-1) var(--sb-c-2);
  scrollbar-width: thin;
}
html {
  overflow-y: scroll;
}
body {
  font-family: var(--primary-font);
  color: var(--text-c-main);
  margin: 0;
  padding: 0;
  background: var(--main-bg-c)!important;
  line-height: 1.6;
  font-size: 0.9375rem; /* 15px mobile base */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Desktop: corpo levemente menor que o mobile — wrapper fixo em 800px, texto
   mais compacto melhora a disposição na grid (decisão UX 19/mai/2026) */
@media (min-width: 600px) {
  body { font-size: 0.90625rem; } /* 14.5px */
}
::selection {
  background: var(--sel-bg-c);
  color: var(--text-c-main);
}
::placeholder {
  color: #757575;
  font-family: var(--primary-font);
  font-stretch: condensed;
  font-size: 0.75rem;
  font-weight: 500;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: var(--text-c-main);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: var(--sp-xxs) 0 var(--sp-md);
}

/* Headings - Mobile-First (17/jan/2026) */
h1, .h1 {
  font-size: 1.25rem;
  margin: 0.25rem 0;
  line-height: 1.25;
  font-display: swap;
  content-visibility: high;
}

h2, .h2 {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  margin: 0;
}

h3, .h3 {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

h4, .h4, h5, .h5 {
  font-size: 1rem;
}

@media (min-width: 600px) {
  h1, .h1 {
    font-size: 1.6rem;
    margin: var(--sp-sm) 0;
    line-height: inherit;
  }

  h2, .h2 {
    margin: var(--sp-xxs) 0 var(--sp-md);
  }
}
p {
  margin: var(--sp-sm);
  line-height: 1.5;
}
/* p:last-child {
  margin-bottom: 0;
} */
.small,
small {
  font-size: 0.875rem;
}
.x-small {
  font-size: 0.75rem !important;
}
/* Vinculum notation for repeating decimals */
.ov {
    border-top: 1px solid;
    border-width: 1px;
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
}

/* Dot notation for repeating decimals (alternative to vinculum) */
.dot-over {
    top: -0.45em;
    left: -0.6em;
    position: relative;
}
a {
  color: var(--link-color);
  /* Removed color transition to prevent CLS from non-composited animations */
  text-decoration: none!important;
}
/* Underline links in content areas for accessibility (distinguishable without color) */
/* Updated 17/jan/2026: Added !important to override base a{text-decoration:none!important} */
#content p a,
#content li a,
#content dd a,
.faq-content a,
.blockcontainer p a {
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover-color);
}
a:focus-visible {
  outline: 2px solid var(--input-focus-brd-color);
  outline-offset: 2px;
  border-radius: var(--brd-rad-sm);
}
dd,
dl {
  margin: 0;
}
/* Definition List - Mobile-First */
dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xxs);
  margin: var(--sp-xxs) 0;
}
@media (min-width: 480px) {
  dl { grid-template-columns: minmax(160px, 220px) 1fr; }
}
dt {
  font-weight: 600;
  color: var(--destacado-color);
  align-self: start;
  padding: var(--sp-xs) 0;
}
dd {
  color: var(--text-c-secondary);
  padding: var(--sp-xs) 0;
}
dd ul {
  margin: 0;
  padding-left: 1.5rem;
}
.conversion-results {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxs);
}
.conversion-results dt {
  font-weight: 600;
  color: var(--th-color);
}
.conversion-results dd {
  line-height: 1.6;
  padding: 0;
  margin-left: 0;
  font-family: var(--mono-font);
}
#wrapper {
  background: var(--wrap-bg-c);
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  box-shadow: var(--shadow-sm);
}
#content {
  clear: both;
  padding: var(--sp-xs);
}
#header,
.header-left {
  display: flex;
  align-items: center;
}
/* Header - Mobile-first 17/jan/2026 */
/* Base: mobile - compact height */
#header {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, var(--pri-blue) 50%, var(--bg-orange-header) 100%);
    height: 44px;
    width: 100%;
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
    gap: var(--sp-xs);
    z-index: 1000;
    transition: transform 0.3s ease;
}
#header.header-hidden {
    transform: translateY(-100%);
}
body.nav--open #header {
  z-index: 10001;
}

.header-left {
  flex: 0 0 auto;
  gap: var(--sp-sm);
}
.header-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 0;
  line-height: 1;
}
/* Base: mobile - smaller logo */
.header-logo img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--brd-rad-sm);
  transition: transform 0.2s ease;
}
.header-logo:hover img {
  transform: scale(1.1);
}
#site-search {
  position: relative;
  flex: 1 1 0;
  min-width: 60px;
  max-width: 500px;
  margin: 0 var(--sp-xs);
}
/* Base: mobile - responsive logo text */
.logo {
  color: #fff;
  font-size: clamp(0.6rem, 2.5vw, 0.75rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop: taller header */
@media (min-width: 600px) {
  #header {
    height: 56px;
    padding: var(--sp-sm);
  }
  .header-logo img {
    width: 32px;
    height: 32px;
  }
  .logo {
    font-size: 0.85rem;
  }
}

#footer {
  clear: both;
  padding: var(--sp-md);
  background: linear-gradient(135deg, var(--pri-blue) 60%, var(--bg-orange-header) 100%);
  max-width: 800px;
  margin: 0 auto;
}
#footer,
#footer a,
#footer small {
  color: #fff;
} 
.blockcontainer {
  position: relative;
  overflow: hidden;
}
/* Allow native <select> dropdowns to render outside the container (Linux/Chromium clips them) */
.blockcontainer:has(select) {
  overflow: visible;
}
.block0 {
  padding: var(--sp-xs) 0 var(--sp-xs) 0; 
}
.block,
.block2,
.block3,
.block4,
.block5,
.blockul {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}


/* Base: mobile - compact padding, full width */
.block,
.block2 {
  /* padding: 0 var(--sp-xxs); */
  width: 100%; 
}
.block {
  min-height: 80px;
}
/* Base: mobile - all blocks full width */
.block3,
.block4,
.blockul {
  width: 100%;
  padding: 0;
}
.blockul {
  min-height: 110px;
  border-radius: 0;
}

/* Mobile max-width for converter inputs */
.converter-input-md,
.from,
.to {
  max-width: 130px;
}

/* Desktop: block widths */
@media (min-width: 600px) {
  .block2 {
    width: 49.5%;
  }
  .block3 {
    width: 31%;
  }
  .block4 {
    width: 24.4%;
  }
  .blockul {
    width: 33.1%;
  }
  .converter-input-md,
  .from,
  .to {
    max-width: none;
  }
}

@media (min-width: 800px) {
  .block:nth-child(1) {
    width: 56.4%;
  }
  .block:nth-child(2) {
    width: 41.9%;
  }
}

/* =========================================
   FORM ELEMENTS
   Seção de estilos de formulários
   Atualizado em 16/jan/2026
   ========================================= */

/* Radio/Checkbox Group Container */
.group-container {
  display: flex;
  margin: var(--sp-md) 0;
  gap: var(--sp-md);
  align-items: center;
  flex-wrap: wrap;
}
.group-container > div {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.group-container label {
  margin: 0;
  cursor: pointer;
  font-weight: 400;
}
.group-container label span {
  display: none;
}

input, select, textarea {
  color: var(--text-c-main);
  background: var(--ctrl-bg-c);
  border: 1.5px solid var(--input-brd-color);
  border-radius: var(--brd-rad-md);
  padding: 6px var(--sp-xs);
  margin: 2px 0;
  transition: all var(--trans-fast);
  box-shadow: none;
  width: 100%;
  flex: 1;
}
/* Input/Select - compactado 19/mai/2026 (densidade de campos > a11y, decisão UX).
   font 15px em ambos breakpoints; iOS pode dar zoom no focus (<16px) — aceito. */
input, select {
  height: 32px;
  font-size: 0.9375rem;
}
@media (min-width: 600px) {
  input, select { height: 32px; font-size: 0.9375rem; }
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--link-color);
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--input-focus-brd-color);
  box-shadow: 0 0 0 3px #2196f333;
  transform: none;
}
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  background: transparent;
  border-color: var(--calc-brd-color);
  box-shadow: none;
}
textarea {
  width: 98%;
  width: -webkit-fill-available;
}
select {
  cursor: pointer;
  scrollbar-color: var(--sb-c-1) var(--sb-c-2);
  scrollbar-width: thin;
}
select option {
  color: var(--text-c-main);
  background: var(--ctrl-bg-c);
  padding: 10px;
}
select option:checked,
select option[selected] {
  color: var(--btn-color) !important;
  background: var(--sel-bg-c) !important;
}
select option:hover {
  color: var(--btn-color) !important;
  background: var(--sel-bg-c) !important;
}
select::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
select::-webkit-scrollbar-track {
  background: var(--sb-c-2);
  border-radius: var(--brd-rad-sm);
}
select::-webkit-scrollbar-thumb {
  background: var(--sb-c-1);
  border-radius: var(--brd-rad-sm);
  border: 2px solid var(--sb-c-2);
}
select::-webkit-scrollbar-thumb:hover {
  background: var(--pri-blue-hover);
}

/* Label - Mobile-First */
label {
  font-size: 0.8rem;
  line-height: 1;
  margin-bottom: var(--sp-xxs);
  display: inline-block;
  font-weight: 500;
}
label.disabled { cursor: not-allowed; }

/* Form Field - Mobile-First */
.form-field {
  margin-bottom: 0.25rem;

  gap: 0.125rem;
}
.form-field label { margin-bottom: 0; }

/* Form Field Inline - label and input on the same row */
.form-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.form-field-inline label {
  min-width: 50px;
  flex-shrink: 0;
}
.form-field-inline select,
.form-field-inline input {
  flex: 1;
}

@media (min-width: 600px) {
  label { font-size: 0.875rem; } /* 14px — compactado 19/mai/2026 */
  .form-field { margin-bottom: var(--sp-xxs); gap: var(--sp-xxs); }
}

/* ===========================================
   Form Layout - Mobile-First (17/jan/2026)
   =========================================== */

/* .form-grid: Vertical flex container */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxs);
  width: 100%;
  padding: 0;
}

/* .form-row: horizontal layout */
.form-row {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
}
.form-row--align-end { align-items: flex-end; }
.form-row--align-start { align-items: flex-start; }

/* Hint <small> below input without breaking sibling input alignment (21/abr/2026).
   Sem isto, um <small> dentro de um .form-field aumenta a altura do field e,
   com align-items: flex-end, empurra o input desse field pra cima — desalinhando
   visualmente com os inputs irmãos que não têm hint. Position: absolute tira o
   small do fluxo vertical do field, preservando a altura natural (label+input). */
.form-row--align-end .form-field:has(> small) {
  position: relative;
}
.form-row--align-end .form-field > small {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.125rem;
  line-height: 1.3;
}

/* Silo nav tabs — sibling-calculator links rendered above H1 */
.calc-nav-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--sp-sm);
  border-bottom: 2px solid var(--brd-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.calc-nav-tab {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--text-c-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: 0;
  transition: color 0.2s, border-color 0.2s;
}
.calc-nav-tab:hover {
  color: var(--link-color);
  border-bottom-color: var(--link-color);
}
.calc-nav-tab.active {
  color: var(--hl-txt-color);
  border-bottom-color: var(--hl-txt-color);
  font-weight: 600;
}

/* Shape diagrams — SVG illustrations above calculator inputs */
.calc-shape-diagram {
  text-align: center;
  margin: 0.5rem auto 1rem;
  max-width: 360px;
}
.calc-shape-diagram svg {
  max-height: 200px;
  width: auto;
  max-width: 100%;
}

/* Unit system toggle (imperial / metric) — traditional radio buttons */
.unit-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0 0 1rem;
}
.unit-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-c-secondary);
  user-select: none;
}
.unit-radio:has(input:checked) {
  color: var(--text-c-main);
  font-weight: 500;
}
.form-row--gap-sm { gap: var(--sp-sm); }
.form-row--mb { margin-bottom: var(--sp-md); }
.form-row--wrap-mobile { flex-wrap: wrap; flex-direction: column; align-items: stretch; }
@media (min-width: 480px) {
  .form-row--wrap-mobile { flex-direction: row; align-items: flex-end; flex-wrap: nowrap; }
}

/* Flex utilities */
.flex-1 { flex: 1 1 0; min-width: 0; }
.flex-none { flex: none; }

/* .field-row: horizontal flex row with hint at far right */
.field-row {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  flex: 1;
  min-width: 0;
  justify-content: space-between;
}

/* Make inputs/selects expand in field-row (limited) */
.field-row > input:not(.input-narrow),
.field-row > select,
.field-row > .autocomplete {
  flex: 1;
  min-width: 0;
  max-width: 180px;
}

/* .field-grid: stacked on mobile, 2-col on desktop */
.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xs);
  align-items: start;
}

/* Reset fieldset styling */
fieldset.field-grid {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* .field-form: form wrapper */
.field-form {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

/* Swap button spacer - aligns fields when swap-btn is in adjacent row */
.swap-btn-spacer {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: none;
}
@media (min-width: 800px) {
  .swap-btn-spacer { display: block; }
}

/* Narrow input */
.input-narrow {
  flex: 0 0 auto !important;
  width: 70px !important;
  text-align: right;
}

/* Field unit label */
.field-unit {
  min-width: 50px;
  flex-shrink: 0;
}

/* Field hint (arrow + label + tooltip on the right) */
.field-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 100px;
  justify-content: flex-end;
}

/* Desktop (641px+) */
@media (min-width: 640px) {
  .form-grid { gap: var(--sp-xs); }
  .form-row { gap: var(--sp-sm); }
  .field-row { gap: var(--sp-xs); }
  .field-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
  .input-narrow { width: 80px !important; }
  .field-unit { min-width: 70px; }
}

/* --- Form Field Variants (fraction inputs, compact fields) --- */

/* Equals sign between converter fields */
.converter-equals { font-size: 1.5rem; font-weight: bold; color: var(--color-primary); padding: 0 var(--sp-xs); align-self: center; }

/* Compact/fraction field widths - mobile */
.form-field-compact,
.form-field-fraction {
    flex: 1 1 100%;
    min-width: 100%;
}

/* Fraction input container */
.fraction-input {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}
.fraction-input input { width: 50px; flex: 0 0 50px; }
.fraction-input select { width: 70px; flex: 0 0 70px; }
.fraction-slash { font-size: 1.4rem; font-weight: 300; color: var(--text-c-sec); }
.fraction-unit { font-size: 1.2rem; color: var(--text-c-sec); }

/* Desktop: larger fraction inputs */
@media (min-width: 480px) {
    .form-field-compact { flex: 0 1 80px; min-width: 70px; }
    .form-field-fraction { flex: 1 1 180px; min-width: auto; }
    .fraction-input input { width: 60px; flex: 0 0 60px; }
}

/* --- Validation Error Messages --- */
.validation-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #b91c1c;
  padding: var(--sp-xs) var(--sp-sm);
  margin-bottom: var(--sp-xs);
  font-size: 0.9rem;
  display: none;
}

/* --- Quick Select - Popular Values Dropdown ---
   Inherits base styles from select, matches unit selector width for symmetry */

.quick-select {
    cursor: pointer;
}

/* --- Number Input Spinners --- */
/* Force spinners to always be visible on number inputs (not just on hover/focus) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  appearance: auto;
  opacity: 1;
  height: auto;
  cursor: pointer;
}

/* --- Checkbox & Radio Buttons --- */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: all var(--trans-fast);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--ctrl-bg-c);
  border: 1.5px solid var(--input-brd-color);
}
input[type="checkbox"] {
  border-radius: var(--brd-rad-xs);
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: #2196f3;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--btn-bg-c);
  border-color: var(--btn-bg-c);
}
input[type="checkbox"]:checked::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--btn-color);
  font-weight: 700;
  font-size: 0.875rem;
}
input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 0.625rem;
  background: var(--btn-color);
  border-radius: 50%;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #2196f333;
}

/* =========================================
   END FORM ELEMENTS
   ========================================= */

li {
  margin-left: -2em;
  list-style: none;
  padding: 0.25em var(--sp-xs);
}
.bullet::before,
.bulletCalc::before,
.bulletConv::before {
  content: "\2022";
  color: var(--link-color);
  display: inline-block;
  width: 0.8em;
  margin-left: -0.5em;
}
/* Site Map tree menu */
#myUL {
  padding-left: 0;
  margin-left: 0;
}
#myUL > li {
  margin-left: 0;
}
#myUL ul {
  padding-left: 1.5em;
}
#myUL li {
  margin-left: 0;
}
#myUL .bullet {
  padding-left: 0.5em;
}
.btn, button {
    font-family: var(--primary-font);
    color: var(--btn-color);
    background: var(--btn-bg-c);
    border: none;
    border-radius: var(--brd-rad-md);
    cursor: pointer;
    padding: 0 12px;
    margin: var(--sp-xxs) 0;
    transition: all var(--trans-fast);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none;
}
/* Restore the HTML `hidden` attribute (the rule above sets `display: inline-flex`
   on all buttons, which overrides the user-agent default of `display: none` for
   `[hidden]`). Without this, hidden share-block buttons render as a blue pill. */
button[hidden], .btn[hidden] { display: none; }
.btn:hover,
button:hover {
  background: var(--btn-hover-bg-c);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:focus,
button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #2196f333;
}
.btn:active,
button:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn:disabled,
button:disabled {
  color: #9e9e9e;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled,
.btn:disabled:hover,
button:disabled,
button:disabled:hover {
  transform: none;
  background: #e4f4ff;
}

.calculator,
table.lin1 {
  border-radius: var(--brd-rad-lg);
}
.calculator {
  /* Base = mobile */
  padding: 0.25rem;
  border: 1.2px solid var(--calc-brd-color);
  box-shadow: none;
  background: var(--calc-bg-c);
  margin: 0.5rem 0;
}
/* ===========================================
   Calculator Tabs - Mobile-First (17/jan/2026)
   Base: mobile (<480px) → min-width for larger
   =========================================== */
.calculator-tabbed {
  margin: var(--calc-margin);
}
.calculator-tab {
  margin-top: -50px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  /* container-type permite que filhos .calculator-tab a/button reajam à largura
     do PRÓPRIO container (não da viewport), evitando overflow quando o calc
     está dentro de um .block estreito em desktop (16/mai/2026). */
  container-type: inline-size;
}
.calculator-tab button,
.calculator-tab a {
  /* Base = mobile styles */
  color: var(--btn-color);
  border: 0;
  margin: 10px 0;
  border-radius: var(--brd-rad-md) var(--brd-rad-md) 0 0;
  cursor: pointer;
  padding: 0.15rem 0.25rem;
  transition: all var(--trans-normal);
  font-weight: 500;
  font-size: clamp(0.6rem, 3.5vw, 0.85rem);
  letter-spacing: -0.03em;
  background: var(--tab-btn-bg-c);
  box-shadow: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  white-space: normal;
  text-align: center;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.15;
}
.calculator p {
  margin-left: 0 !important;
}

/* Tablets (481px+) */
@media (min-width: 480px) {
  .calculator-tab button,
  .calculator-tab a {
    font-size: clamp(0.75rem, 3vw, 0.95rem);
    padding: var(--sp-xxs) var(--sp-xs);
  }
}

/* Desktop (641px+) */
@media (min-width: 640px) {
  .calculator {
    padding: var(--sp-xs);
    margin: var(--sp-md) 0;
  }
  .calculator-tabbed {
    margin: 50px 0 var(--sp-lg);
  }
  .calculator-tab {
    gap: 0.25rem;
    margin-top: -60px;
  }
  .calculator-tab button,
  .calculator-tab a {
    margin: 14.5px 0;
    padding: var(--sp-xs) var(--sp-sm);
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    letter-spacing: -0.04em;
    line-height: 1.2;
  }
}

/* Container queries: encolhe fonte/padding quando o container .calculator-tab
   fica estreito (ex.: calc dentro de .block 56% em desktop). 16/mai/2026 */
@container (max-width: 520px) {
  .calculator-tab button,
  .calculator-tab a {
    font-size: 0.78rem;
    padding: var(--sp-xxs) var(--sp-xs);
    letter-spacing: -0.05em;
  }
}
@container (max-width: 400px) {
  .calculator-tab button,
  .calculator-tab a {
    font-size: 0.68rem;
    padding: 0.2rem 0.3rem;
  }
}

/* Block and logo mobile styles consolidated to base (17/jan/2026) */

.calculator-tab button:hover,
.calculator-tab a:hover {
  background: var(--btn-hover-bg-c);
  color: var(--btn-color);
  transform: translateY(-2px);
}
.calculator-tab button.active,
.calculator-tab a.active {
  color: var(--text-c-main);
  cursor: default;
  border: 1.2px solid var(--calc-brd-color);
  border-bottom: none !important;
  background: var(--calc-bg-c);
  transform: translateY(0);
}

/* Segmented Control - radio button alternative */
.segmented-control {
  display: inline-flex;
  background: var(--odd-row-bg-c);
  border-radius: var(--brd-rad-sm);
  padding: 2px;
  gap: 2px;
}
.segmented-control input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented-control label {
  padding: var(--sp-xxs) var(--sp-sm);
    border: 1.5px solid var(--input-brd-color);
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: var(--brd-rad-xs);
  transition: all var(--trans-fast) ease;
  color: var(--text-c-main);
  user-select: none;
}
.segmented-control label:hover {
  background: var(--even-row-bg-c);
}
.segmented-control input[type="radio"]:checked + label {
  background: var(--btn-bg-c);
  color: var(--btn-color);
  font-weight: 600;
}
.segmented-control input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--blue-focus);
  outline-offset: 1px;
}

/* #verbose - Step-by-step calculation details (Updated 19/jan/2026) */
/* Note: Do NOT use content-visibility:auto here - it hides JS-generated content */
#verbose {
  display: block;
  padding: var(--sp-xs);
  min-height: 50px;
  color: var(--text-c-main);
  background: var(--verb-bg-c);
  border: 1px solid var(--input-brd-color);
  border-radius: var(--brd-rad-md);
  margin: var(--sp-sm) 0 0 auto;
}

/* Note: Converter Mode Toggle (Basic/Advanced) rules moved to unit-converter.css
   Those rules only apply to standard converters that load unitconverter.js */

table {
  border-collapse: collapse;
  width: 100%;
}

/* ==========================================================================
   Modular Table Classes - Added 16/jan/2026
   Usage: <table class="table-bordered table-striped">
   Legacy: <table class="lin1"> (equivalent to table-bordered table-striped)
   ========================================================================== */

/* table.lin1 - Border and cell structure */
table.lin1 {
  max-width: 800px;
  margin: var(--sp-sm) 0;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--brd-color);
}
table.lin1 th {
  padding: var(--sp-xs);
  font-weight: 600;
  color: var(--th-color);
  background: var(--th-bg-c);
  text-align: left;
}
table.lin1 tbody th {
  background: inherit;
  font-weight: 500;
  border-bottom: 1px solid var(--brd-color);
}
table.lin1 td {
  font-size: var(--lin1-font-size);
  padding: var(--sp-xxs);
  border-bottom: 1px solid var(--brd-color);
  min-width: 80px;
}
table.lin1 tr:last-child td {
  border-bottom: none;
}

/* table.lin1 - Zebra row colors */
table.lin1 tr:nth-child(odd) {
  background: var(--odd-row-bg-c);
}
table.lin1 tr:nth-child(even) {
  background: var(--even-row-bg-c);
}

/* Horizontal-scroll for wide tables on small screens (21/abr/2026).
   .table-scroll  — manual wrapper (use when a blockcontainer also holds a
                    calculator, select, tooltip, or form; those need overflow
                    visible and the :has() rule below skips them).
   :has() rule     — automatic: ativa em blockcontainers cujo conteúdo é
                    predominantemente tabela.lin1 (431 páginas). */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table-scroll > table {
  min-width: max-content;
}
.blockcontainer:has(table.lin1):not(:has(.calculator, select, .tooltip, form, .card-container)) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.blockcontainer:has(table.lin1):not(:has(.calculator, select, .tooltip, form, .card-container)) table.lin1 {
  min-width: max-content;
}

/* Card grids (.card-container) são excluídos do :has() acima: as tabelas de
   fatos (home.php das categorias) vivem em colunas de grid ~250px e o
   min-width:max-content fazia a tabela vazar por cima da coluna vizinha em
   telas grandes (fix 11/jul/2026, 16 categorias).*/

/* Lookup/step tables injected by JS inside the calculator/form (#verbose,
   .verbose). The :has() rule above intentionally skips containers holding a
   form/calculator (they keep overflow visible), so these wide tables (8-9
   cols) would spill out of the narrow .block column. Make them self-scroll
   and drop the 80px per-cell min-width so the compact grids fit. (24/jun/2026) */
#verbose table.lin1,
.verbose table.lin1 {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#verbose table.lin1 td,
.verbose table.lin1 td {
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}

/* Collapsible tables - Movido de unit-converter.css em 15/dez/2025 */
/* Standard tables: show 10 rows, hide 11+ */
.table-collapsible tbody tr:nth-child(n+11) {
  display: none;
}

.table-collapsible.table-expanded tbody tr:nth-child(n+11) {
  display: table-row;
}

/* Adaptive text sizing utilities - 17/jan/2026 */
.text-size-xl { font-size: 1em; }
.text-size-lg { font-size: 0.9em; }
.text-size-md { font-size: 0.8em; }
.text-size-sm { font-size: 0.75em; }
.text-size-xs { font-size: 0.65em; }

/* Compact tables (text-size-xs): show 5 rows, hide 6+ */
.table-collapsible.text-size-xs tbody tr:nth-child(n+6) {
  display: none;
}

.table-collapsible.text-size-xs.table-expanded tbody tr:nth-child(n+6) {
  display: table-row;
}

/* Toggle Button - Full-width subtle button for expand/collapse */
/* Toggle Button - inherits from button, overrides for subtle disclosure style */
.table-toggle-btn {
  display: block;
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  margin-top: -1px;
  background: var(--odd-row-bg-c);
  border: 1px solid var(--brd-color);
  border-radius: 0 0 var(--brd-rad-lg) var(--brd-rad-lg);
  color: var(--link-color);
  font-size: 0.9rem;
  text-align: center;
}
.table-toggle-btn:hover,
.table-toggle-btn:focus { background: var(--even-row-bg-c); transform: none; box-shadow: none; outline: none; }
.table-toggle-btn:focus-visible { outline: 2px solid var(--link-color); outline-offset: 2px; }
.table-toggle-btn .arrow { display: inline-block; margin-right: 0.3rem; }
.table-expanded + .table-toggle-btn .arrow { transform: rotate(180deg); }


/* Highlight search matches */
.search-highlight {
  background-color: rgba(255, 235, 59, 0.5);
  padding: 2px 4px;
  border-radius: 2px;
}

/* Table Actions Column - Added 17/dez/2025 - Mobile-first 17/jan/2026 */
.table-actions-col {
  width: 60px;
  text-align: center;
  white-space: nowrap;
  padding: var(--sp-xxs);
}

.table-copy-btn,
.table-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 1px;
  padding: 0;
  margin: 0 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--brd-rad-sm, 4px);
  color: var(--text-medium, #616161);
  cursor: pointer;
  transition: all var(--trans-fast, 0.15s);
}

.table-copy-btn:hover,
.table-copy-btn:focus,
.table-link-btn:hover,
.table-link-btn:focus {
  background: var(--pri-blue-pale, #e3f2fd);
  border-color: var(--pri-blue-light, #2196f3);
  color: var(--pri-blue, #1976d2);
}

.table-copy-btn:active,
.table-link-btn:active {
  transform: scale(0.95);
}

.table-copy-btn.copied {
  background: #4caf50;
  border-color: #4caf50;
  color: white;
}

/* Tablet: larger buttons */
@media (min-width: 600px) {
  .table-actions-col {
    width: 70px;
    padding: 0;
  }

  .table-copy-btn,
  .table-link-btn {
    width: 30px;
    height: 30px;
    margin: 0;
  }
}

/* Desktop: full size buttons */
@media (min-width: 901px) {
  .table-actions-col {
    width: 80px;
  }

  .table-copy-btn,
  .table-link-btn {
    width: 32px;
    height: 32px;
  }
}

.centered {
  text-align: center;
}
.right-aligned {
  text-align: right;
}
.compact {
  font-size: smaller;
  line-height: 1.5em;
}
.hidden {
  visibility: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  z-index: 100;
  border-radius: 0 0 var(--brd-rad-xs) 0;
}
.skip-link:focus {
  top: 0;
}
.destacado {
  color: var(--destacado-color);
  font-weight: 700;
}
.big {
  color: var(--destacado-color);
  font-weight: 600;
  font-size: 1.1em;
}
.bigtext,
.tooltip .tooltiptext {
  padding: var(--sp-md);
  border-radius: var(--brd-rad-md);
}
.bigtext {
  color: var(--destacado-color);
  font-size: 1.2em;
  text-align: center;
  font-weight: 600;
}
.author-box p{
 padding-left: 0;
}
.author-box span{
 padding-left: var(--sp-sm);
}


.disabled {
  cursor: not-allowed;
}
.tooltip {
  position: relative;
  float: right;
}
.tooltip .tooltiptext {
  padding: var(--sp-xs);
  visibility: hidden;
  color: var(--text-c-main);
  position: absolute;
  z-index: 1000;
  border: 1px solid var(--tip-brd-color);
  box-shadow: var(--shadow-lg);
  min-width: 250px;
  right: -9px;
  bottom: 2.5em;
  transform: translateY(118%);
  opacity: 0;
  transition: opacity var(--trans-normal),
    visibility var(--trans-normal);
  background: var(--ctrl-bg-c);
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.hlp {
  padding: 0.25em 0.6em;
  color: var(--hlp-color);
  border-radius: 15%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  background: var(--hlp-bg-c);
}

/* .verbose class - for elements other than #verbose */
.verbose {
  background: var(--verb-bg-c);
  font-size: var(--base-font-size);
  border: 1px solid var(--input-brd-color);
  border-radius: var(--brd-rad-md);
  margin: var(--sp-xs) 0;
  padding: var(--sp-xxs) var(--sp-xs);
  overflow: auto;
  word-break: normal;
  overflow-wrap: anywhere;
  min-height: 36px;
}

#verbose h3,
.verbose h3,
.verbose h4
{
  margin: var(--sp-sm) 0 var(--sp-xs);
  line-height: 1.2;
}

#verbose p,
.verbose p {
  margin-left: 0;
}

#verbose th {
  font-size: 1.15em;
}

#formula,
.formula {
  padding: var(--sp-sm);
  background: var(--code-bg-c);
  border-left: 4px solid #228de4;
  margin-bottom: var(--sp-sm);
}

.formula,
.fraction,
.info-card pre,
pre,
code, .code {
  font-family: var(--mono-font);
  font-feature-settings: "tnum" 1;
}
#formula,
.HrHeader,
.card,
.formula {
  color: var(--text-c-main);
}
/* Autocomplete styles moved to css/autocomplete.css - 04/fev/2026 */

/* Answer highlight - moved from unit-converter.css 16/jan/2026 */
.answer {
  color: #e65100;
  font-size: 1.15em;
  font-weight: 600;
}

/* Smaller answer highlight within formula box */
.formula .answer {
  font-size: 1em;
}

/* Roman Numeral Vinculum (Overline for large numbers) */
.roman-overline {
  text-decoration: overline;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

.card {
  padding: var(--sp-md);
  margin: var(--sp-xss);
  background: var(--code-bg-c);
  line-height: 1.6;
  display: inline-block;
  border-radius: var(--brd-rad-md);
}
.HrHeader {
  appearance: none;
  text-align: left;
}
#switch,
.equal,
.switch {
  color: var(--destacado-color);
  font-size: 1.3em;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  user-select: none;
  /* Removed color transition to prevent CLS from non-composited animations */
  padding: 0;
}
#switch img,
.equal img,
.switch img {
  display: block;
  margin: 0 auto;
}
#switch:hover,
.breadcrumb a:hover,
.caret:hover,
.equal:hover,
.switch:hover {
  color: var(--link-hover-color);
}
/* Legacy float layout classes */
.from,
.to {
  font-size: var(--base-font-size);
}
.from {
  float: right;
}
.to {
  float: left;
}
.fraction {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	font-size: 1em;
	line-height: 1em;
}
.top {
  line-height: normal;
  font-size: 75%;
}
.bottom {
  border-top: 1.5px solid currentColor;
  display: block;
  margin: 0 0 0.2em;
  font-size: 75%;
}

/* Enhanced fractions in explanations and results */
.verbose .fraction,
.result-card .fraction,
.destacado .fraction {
  font-size: 1.15em;
  padding: 0 0.25em;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
img {
  border: 0;
  max-width: 100%;
  height: auto;
  display: block;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  border-radius: var(--brd-rad-md);
  overflow: hidden;
  margin: var(--sp-lg) 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.equation {
  height: 58px;
  margin-bottom: 2em;
  padding: var(--sp-sm);
  text-align: center;
}
.extlink {
  list-style: none;
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='11' width='11' viewBox='0 0 11 11' stroke='%23757575' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='m6 1h4v4' /%3E%3Cpath d='m10 1-5 5' /%3E%3Cpath d='m3 3h-2v7h7v-2' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 18px 18px;
  min-height: 26px;
  display: flex;
  align-items: center;
  margin: 0.75em 0 0 -1em;
}
.extlink a {
  opacity: 0.9;
  transition: opacity 0.2s ease;
  text-decoration: none;
  word-break: normal;
}
.extlink:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='11' width='11' viewBox='0 0 11 11' stroke='%232196F3' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='m6 1h4v4' /%3E%3Cpath d='m10 1-5 5' /%3E%3Cpath d='m3 3h-2v7h7v-2' /%3E%3C/svg%3E");
}
.extlink a:hover {
  opacity: 1;
}
.hashcol a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23757575' d='m15 9 6-6s6-6 12 0 0 12 0 12l-8 8s-6 6-12 0c-1.125-1.125-1.822-2.62-1.822-2.62l3.353-3.348S14.396 18.396 16 20c0 0 3 3 6 0l8-8s3-3 0-6-6 0-6 0l-3.729 3.729s-1.854-1.521-5.646-.354z'/%3E%3Cpath fill='%23757575' d='m20.845 27-6 6s-6 6-12 0 0-12 0-12l8-8s6-6 12 0c1.125 1.125 1.822 2.62 1.822 2.62l-3.354 3.349s.135-1.365-1.469-2.969c0 0-3-3-6 0l-8 8s-3 3 0 6 6 0 6 0l3.729-3.729s1.854 1.521 5.646.354z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  display: inline-block;
  width: 24px;
  height: 24px;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.hashcol a:hover {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%232196F3' d='m15 9 6-6s6-6 12 0 0 12 0 12l-8 8s-6 6-12 0c-1.125-1.125-1.822-2.62-1.822-2.62l3.353-3.348S14.396 18.396 16 20c0 0 3 3 6 0l8-8s3-3 0-6-6 0-6 0l-3.729 3.729s-1.854-1.521-5.646-.354z'/%3E%3Cpath fill='%232196F3' d='m20.845 27-6 6s-6 6-12 0 0-12 0-12l8-8s6-6 12 0c1.125 1.125 1.822 2.62 1.822 2.62l-3.354 3.349s.135-1.365-1.469-2.969c0 0-3-3-6 0l-8 8s-3 3 0 6 6 0 6 0l3.729-3.729s1.854 1.521 5.646.354z'/%3E%3C/svg%3E");
}

figure[aria-labelledby] {
  margin: 0;
}

/* Chart/image figures - Mobile-first 17/jan/2026 */
/* Base: mobile - full width. Atualizado 11/jul/2026: era
   width:calc(100% + 2*sp-xs) + margin lateral negativo (sangria edge-to-edge),
   mas containers sem padding lateral (ex.: .block0) faziam a imagem estourar
   ~16px e o overflow:hidden do .blockcontainer CORTAVA a borda direita. Como
   esses containers já são full-width, width:100% dá o mesmo edge-to-edge sem
   estouro; max-width:100% garante que nunca ultrapasse o container. */
figure {
  margin: 0;
}
figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--brd-color);
  border-radius: 0;
  border-left: none;
  border-right: none;
}
figure figcaption {
  font-size: 0.85rem;
  color: var(--text-c-second);
  margin-top: var(--sp-xs);
  text-align: center;
  padding: 0 var(--sp-xs);
}

/* Desktop: contained images with rounded corners */
@media (min-width: 640px) {
  figure {
    margin: 0;
  }

  figure img {
    max-width: 100%;
    width: auto;
    border-radius: var(--brd-rad-md);
    border-left: 1px solid var(--brd-color);
    border-right: 1px solid var(--brd-color);
  }
  figure figcaption {
    padding: 0;
  }
}

.calcHeader {
    border-radius: var(--brd-rad-md);
    color: var(--btn-color)!important;
    padding: 4px 5px 3px 5px;
    margin: 0 0 var(--sp-sm);
    font-size: 1em;
    background-color: var(--btn-bg-c);
}

.calcHeader::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><path fill='%232196F3' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z'/><path fill='%23FFF' d='M9.613 6.096H8.492c-.912 0-1.292-.665-1.292-1.311 0-.665.475-1.311 1.292-1.311h2.698c.817 0 1.273.589 1.273 1.349v10.81c0 .95-.608 1.481-1.425 1.481s-1.425-.532-1.425-1.481zm5.129 16.627c0 1.196-.513 2.241-1.558 2.906 1.368.627 2.318 1.9 2.318 3.4 0 2.28-2.09 4.198-4.788 4.198-2.812 0-4.559-2.07-4.559-3.571 0-.74.779-1.272 1.463-1.272 1.291 0 .988 2.223 3.134 2.223.988 0 1.786-.76 1.786-1.767 0-2.66-3.23-.703-3.23-2.944 0-1.995 2.698-.646 2.698-2.755 0-.722-.513-1.273-1.368-1.273-1.805 0-1.558 1.862-2.85 1.862-.779 0-1.235-.703-1.235-1.406 0-1.481 2.033-3.077 4.142-3.077 2.736-.001 4.047 1.993 4.047 3.476m13.373-8.231c.836 0 1.48.38 1.48 1.254S28.951 17 28.228 17h-6.346c-.835 0-1.48-.38-1.48-1.254 0-.399.246-.741.437-.969 1.577-1.881 3.286-3.59 4.729-5.68.343-.494.666-1.083.666-1.767 0-.779-.59-1.463-1.368-1.463-2.185 0-1.14 3.078-2.964 3.078-.912 0-1.387-.646-1.387-1.387 0-2.394 2.128-4.312 4.465-4.312s4.217 1.539 4.217 3.951c0 2.641-2.944 5.262-4.559 7.295zm-6.934 15.526c-.931 0-1.33-.627-1.33-1.121 0-.418.152-.646.267-.836l4.255-7.713c.418-.76.95-1.102 1.938-1.102 1.102 0 2.184.703 2.184 2.432v5.832h.323c.741 0 1.33.494 1.33 1.254s-.589 1.254-1.33 1.254h-.323v1.614c0 1.007-.398 1.483-1.367 1.483s-1.368-.476-1.368-1.483v-1.614zm4.578-7.808h-.038l-2.564 5.3h2.603z'/></svg>");
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 5px;
}

/* Tabbed calculators with a visible <h2 class="calcHeader"> as first child:
   the .calculator-tab has a negative margin-top (-50/-60px) to "stick" to the
   top of the block. When preceded by .calcHeader, that pull-up overlaps the
   heading text. Reset to 0 so the tabs sit naturally below the heading —
   and also drop the heading's bottom margin so the tabs touch the heading
   (no visible gap), matching the intended "attached to the top" look. */
.calcHeader:has(+ .calculator-tab) {
  margin: 0;
}
.calcHeader + .calculator-tab {
  margin-top: 0;
}

/* Sidebars - hidden on mobile, visible on desktop */
#left-bar,
#right-bar {
  display: none;
  position: absolute;
}
#left-bar {
  margin: 60px 0 0 -170px;
}
#right-bar {
  margin: 60px 0 0 970px;
}

@media (min-width: 800px) {
  #left-bar,
  #right-bar {
    display: block;
    width: 200px;
  }
}

@media (min-width: 1600px) {
  #left-bar,
  #right-bar {
    width: 250px;
  }
}

/* Breadcrumb - Mobile-first 17/jan/2026 */
/* Base: mobile - compact */
.breadcrumb span[aria-hidden="true"] {
  margin: 0 0.35rem;
}
.breadcrumb svg[aria-hidden="true"],
.caret svg[aria-hidden="true"],
#myUL svg[aria-hidden="true"] {
  vertical-align: -0.15em;
  margin-right: 0.25em;
}
.breadcrumb svg path, .breadcrumb svg polyline, .breadcrumb svg polygon,
.breadcrumb svg circle, .breadcrumb svg rect, .breadcrumb svg line,
.caret svg path, .caret svg polyline, .caret svg polygon,
.caret svg circle, .caret svg rect, .caret svg line,
#myUL svg path, #myUL svg polyline, #myUL svg polygon,
#myUL svg circle, #myUL svg rect, #myUL svg line {
  stroke: #e65100;
}
.breadcrumb svg .accent, .caret svg .accent, #myUL svg .accent {
  stroke: #ff9800;
}
/* Trust signal — verification badge */
.trust-signal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8rem;
  color: var(--text-c-secondary);
  padding: 0.75em 1em;
  margin-top: 1.5em;
  border-top: 1px solid var(--brd-color);
}
.trust-signal svg { color: #4caf50; flex-shrink: 0; }
.trust-signal .trust-date { margin-left: auto; }
.trust-signal a {
  color: var(--destacado-color);
  text-decoration: underline !important;
}
@media (max-width: 600px) {
  .trust-signal { flex-direction: column; align-items: flex-start; }
  .trust-signal .trust-date { margin-left: 0; }
}
/* TOC — page contents navigation */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  padding: 0.75em 1em;
  background: var(--code-bg-c);
  border-radius: var(--brd-rad-md);
  margin: 1em 0;
  font-size: 0.85rem;
}
.toc strong { margin-right: 0.25em; }
.toc a { padding: 0.2em 0.5em; border-radius: 3px; text-decoration: none; white-space: nowrap; }
.toc a:hover { background: var(--bg-c-secondary, #e3f2fd); }
/* Exact factor tag */
.exact-tag { font-size: 0.75rem; color: #4caf50; }
.breadcrumb {
  color: var(--text-c-main);
  padding: 2px 6px;
  margin: 0;
  font-size: 0.75rem;
  background: var(--calc-bg-c);
  border-radius: var(--brd-rad-md);
}
.breadcrumb a {
  color: var(--link-color);
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  padding: var(--sp-xs) 0;
}

/* Desktop: larger breadcrumb */
@media (min-width: 600px) {
  .breadcrumb {
    padding: 5px 10px;
    margin: 0;
    font-size: 14px;
  }
}

/* ==========================================
   Unified Accordion Sections
   Used by: .faq-section, .qa-section, .paa-section
   ========================================== */

/* Base container - unified look */
.faq-section,
.qa-section,
.paa-section-wrapper {
  margin: var(--sp-xl) 0;
}

/* Section box with border */
.faq-section,
.qa-section,
.paa-section {
  border: 1px solid var(--brd-color);
  border-radius: var(--brd-rad-md);
  overflow: hidden;
  background: var(--bg-color);
}

/* Section title - Mobile-first */
.faq-section > h2,
.qa-section > h2,
.paa-title {
  padding: var(--sp-sm) var(--sp-md);
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--code-bg-c);
  border-bottom: 1px solid var(--brd-color);
  color: var(--text-color);
}

/* Accordion items - stacked with borders */
.faq-section .faq-item,
.qa-section .faq-item,
.paa-item {
  border-bottom: 1px solid var(--brd-color);
}
.faq-section .faq-item:last-child,
.qa-section .faq-item:last-child,
.paa-item:last-child {
  border-bottom: none;
}

/* Question/trigger styling - Mobile-first */
.faq-section .faq-item h3,
.qa-section .faq-item h3,
.paa-question {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--link-color);
  gap: var(--sp-md);
  transition: background var(--trans-fast);
  user-select: none;
  box-sizing: border-box;
  position: relative;
}

/* Reset h3 styling inside PAA button */
.paa-question h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  display: inline;
}

/* Hover state */
.faq-section .faq-item h3:hover,
.qa-section .faq-item h3:hover,
.paa-question:hover {
  background: var(--hl-bg-c);
}

/* Focus state for accessibility */
.faq-section .faq-item h3:focus,
.qa-section .faq-item h3:focus,
.paa-question:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--btn-bg-c);
}

/* Expanded state - question background */
.faq-section .faq-item.open h3,
.qa-section .faq-item.open h3,
.paa-question[aria-expanded="true"] {
  background: var(--code-bg-c);
}

/* Expand/collapse icon for FAQ/QA */
.faq-section .faq-item h3::before,
.qa-section .faq-item h3::before {
  content: "▶";
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 1em;
  transition: transform var(--trans-fast);
}
.faq-section .faq-item.open h3::before,
.qa-section .faq-item.open h3::before {
  content: "▼";
}

/* PAA icon styling */
.paa-icon {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 1em;
}

/* Answer/content area */
.faq-section .faq-item .faq-content,
.qa-section .faq-item .faq-content {
  display: none;
  padding: 0 var(--sp-md) var(--sp-md) calc(var(--sp-md) + 1em + var(--sp-sm));
  color: var(--text-color);
  line-height: 1.7;
}
.faq-section .faq-item.open .faq-content,
.qa-section .faq-item.open .faq-content {
  display: block;
}
.paa-answer[hidden] {
  display: none;
}
.paa-answer {
  padding: 0 var(--sp-md) var(--sp-md) calc(var(--sp-md) + 1em + var(--sp-sm));
  color: var(--text-color);
  line-height: 1.7;
}

/* Paragraph spacing in answers */
.faq-section .faq-item p,
.qa-section .faq-item p,
.paa-answer p {
  margin: 0 0 var(--sp-sm);
}
.faq-section .faq-item p:last-child,
.qa-section .faq-item p:last-child,
.paa-answer p:last-child {
  margin-bottom: 0;
}

/* PAA-specific: CTA links */
.paa-cta {
  margin-top: var(--sp-md);
}
.paa-cta a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 500;
}
.paa-cta a:hover {
  text-decoration: underline;
}

/* Animation for PAA answers */
.paa-answer:not([hidden]) {
  animation: accordionFadeIn 0.2s ease;
}
@keyframes accordionFadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Desktop: larger padding for accordion sections */
@media (min-width: 600px) {
  .faq-section .faq-item h3,
  .qa-section .faq-item h3,
  .paa-question {
    padding: var(--sp-md) var(--sp-lg);
    font-size: 1rem;
  }
  .faq-section .faq-item .faq-content,
  .qa-section .faq-item .faq-content,
  .paa-answer {
    padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) calc(var(--sp-sm) + var(--sp-sm));
  }
  .faq-section > h2,
  .qa-section > h2,
  .paa-title {
    padding: var(--sp-md) var(--sp-lg);
  }
}

.related-conversions,
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
/* Grids de tabelas (fact tables dos home.php): tabela nunca encolhe abaixo do
   min-content (~340px com números longos), então tracks de 220px causavam
   overlap em telas grandes. Tracks maiores: 2 colunas no desktop, 1 no mobile.
   (11/jul/2026) */
.card-container:has(table.lin1) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.related-conversions .card,
.card-container .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-sm);
  margin: 0;
  background: var(--code-bg-c);
  border-radius: var(--brd-rad-md);
  border: 1px solid var(--brd-color);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  text-decoration: none;
  color: inherit;
}
.related-conversions .card:hover,
.card-container .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.related-conversions .card h3,
.card-container .card h3 {
  margin: 0 0 var(--sp-xs);
  font-size: 1.1em;
  line-height: 1.3;
  color: var(--link-color);
}
.related-conversions .card h3 a,
.card-container .card h3 a {
  text-decoration: none;
  color: var(--link-color);
}
.related-conversions .card h3 a:hover,
.card-container .card h3 a:hover {
  text-decoration: underline;
}
.related-conversions .card p,
.card-container .card p {
  flex-grow: 1;
  margin: 0 0 var(--sp-sm);
  font-size: 0.9em;
  color: var(--text-c-second);
  line-height: 1.4;
}
.related-conversions .card .btn,
.card-container .card .btn {
  align-self: flex-start;
  font-size: 0.85em;
  padding: var(--sp-xs) var(--sp-sm);
  min-height: 32px;
}

/* Card modifiers */
.card--centered {
  text-align: center;
}
.card-container .card--centered .btn,
.card--centered .btn {
  align-self: center;
}

/* Card icon (for download cards, feature cards, etc.) */
.card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-sm);
  line-height: 1;
}

/* Application-specific table badges */
.table-application-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}
.context-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--pri-blue-light);
  color: white;
  border-radius: var(--brd-rad-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.disclaimer, .info-card {
    background: linear-gradient(135deg, var(--bg-blue-pale, #e4f4ff) 0%, var(--bg-blue-tint, #f3faff) 100%);
    border-radius: var(--brd-rad-md);
    box-shadow: var(--shadow-sm);
    line-height: 1.4;
    margin: var(--sp-md) 0;
    padding: var(--sp-xs);
    width: 100%;
}

/* Quick Approximation box (P3 pages) */
.quick-approximation {
    background: var(--bg-light-gray, #f8f9fa);
    border-left: 4px solid var(--pri-blue, #1976d2);
    border-radius: var(--brd-rad-xs);
    margin-top: var(--sp-lg);
    padding: var(--sp-md);
}

.quick-approximation h2 {
    margin-top: 0;
    color: var(--pri-blue, #1976d2);
    font-size: 1.1rem;
}

.quick-approximation .approx-method {
    margin: var(--sp-sm) 0;
}

.quick-approximation .approx-example {
    color: var(--text-light, #666);
    font-size: 0.95em;
}

.quick-approximation .approx-note {
    margin-bottom: 0;
    font-size: 0.9em;
    color: var(--text-light, #666);
    font-style: italic;
}


@media only screen and (max-width: 414px) {
  input
  .header-left {
    gap: var(--sp-xm);
  }
}

@media only screen and (max-width: 320px) {
  .block,
  .block2 {
    padding: 0;
  }
}

.nav {
  font-family: inherit;
  font-size: 1em;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  transition: visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  pointer-events: none;
  width: 100%;
  z-index: 4;
  background: #00000080;
  opacity: 0;
  backdrop-filter: blur(0px)
}
.nav ul {
  padding-left: 0;
  margin-bottom: var(--sp-lg);
  list-style-type: none;
}
.nav ul:last-of-type {
  margin-bottom: 3em;
}
.nav li {
  list-style: none;
  padding: var(--sp-xs) 0;
}
.nav a {
  color: var(--text-c-main);
  background: transparent;
  padding: var(--sp-xs) 0;
}
.nav a.active,
.nav a:focus,
.nav a:hover {
  border-bottom: none;
  color: var(--link-hover-color);
}
.nav h2 {
  margin-bottom: var(--sp-md);
  margin-top: 0;
  font-size: 1.4em;
  color: var(--text-c-main);
}
.nav-button {
    /* height: 48px; */
    /* min-width: 48px; */
    position: relative;
    outline: 0!important;
    transition: background-color .2s,transform .5s;
    white-space: nowrap;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    background: transparent;
    border-radius: var(--brd-rad-xs);
    z-index: 5;
    /* margin-right: 4px; */
    flex-shrink: 0;
}
.nav-button:hover,
.nav-button:focus {
  background: #0000000d;
}
.nav-button .nav-icon {
  position: relative;
  transition: 0.5s;
  height: 5px;
  width: 36px;
  border-radius: 2px;
  background: #fff;
  display: block;
}
.nav-button:focus .nav-icon,
.nav-button:hover .nav-icon {
  outline: 0;
  color: #fff;
}
.nav-button .nav-icon::after,
.nav-button .nav-icon::before {
  backface-visibility: hidden;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: transform 0.5s, width 0.5s, top 0.3s;
  width: 100%;
  border-radius: inherit;
  background: inherit;
}
.nav-button .nav-icon::before {
  transform: translateY(-9px);
}
.nav-button .nav-icon::after {
  transform: translateY(9px);
}

/* Navigation panel styles moved to css/nav.css (loaded on demand) */

@media only screen and (max-width: 412px) {
  .logo {
    display:none;
  }
}

@media only screen and (max-width: 320px) {
  #site-search {
    min-width: 0;
    max-width: none;
  }
}

@media only screen and (max-width: 360px) {
  #header {
    padding: 6px;
    gap: 2px;
  }
  .header-logo img {
    width: 32px;
    height: 32px;
  }
  .nav-button {
    /* margin-right: 6px; */
    padding: 0 2px;
    /* min-width: 36px; */
    /* height: 40px;*/
  }
  .nav-button .nav-icon {
    width: 28px;
  }
  #site-search {
    min-width: 0;
    max-width: none;
    margin: 0 4px;
  }
  .search-input {
    height: 36px;
    padding: 6px 8px 6px 32px;
  }
  .search-icon-svg {
    left: 8px;
    width: 16px;
    height: 16px;
  }
  .theme-toggle {
    padding: 2px;
    min-width: 36px;
  }
}

.search-icon-svg{position:absolute;
  left:12px;color:rgba(255,255,255,0.85);
  pointer-events:none;z-index:1}

/* Search Box - Mobile-first 17/jan/2026 */
/* Base: mobile - compact margins */
.site-search {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0 2px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  height: 40px;
  padding: 8px 16px 8px 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--brd-rad-lg);
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  font-size: 0.9rem;
  margin: 0;
  max-width: none !important;
}

/* Base: mobile - smaller placeholder */
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
}

.search-dropdown {
  display: none;
}

/* Tablet: larger margins */
@media (min-width: 480px) {
  .site-search {
    margin: 0 var(--sp-xs);
  }
  .search-input::placeholder {
    font-size: 0.9rem;
  }
}

/* Desktop: full margins, header normal gap */
@media (min-width: 800px) {
  .site-search {
    flex: 1;
    margin: 0 var(--sp-md);
  }
}

/* Large desktop: constrained width */
@media (min-width: 1024px) {
  .site-search {
    flex: 0 1 600px;
    max-width: 600px;
  }
}


/* Highlighted Row in Nearby Values Table - Atualizado em 04/dez/2025 */
tr.highlight {
    background-color: #e3f2fd;
    font-weight: 600;
}

tr.highlight th,
tr.highlight td {
    color: #1565c0;
}

/* ==========================================================================
   Table of Contents (TOC) - Generic Components
   Moved from unit-converter.css 16/jan/2026
   ========================================================================== */


/* ==========================================================================
   Result Card - Componente Global (movido de unit-converter.css em 12/dez/2025)
   Usado em: unit converters, calculators (ordinal-cardinal, etc.)
   ========================================================================== */

/* Result Card - Mobile-First (17/jan/2026) */
.result-card {
    background: linear-gradient(135deg,var(--bg-blue-light,#e4f4ff),var(--bg-blue-tint,#f3faff));
    /* border: 1px solid var(--pri-blue-light,#2196f3); */
    border-radius: var(--brd-rad-md,8px);
    padding: var(--sp-xs);
    margin: var(--sp-xs) 0;
    transition: opacity .15s ease-out,visibility .15s;
    width: 100%;
}

.result-card.initialized { min-height: 70px; }
.result-card.initialized[hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
.result-card[hidden]:not(.initialized) { display: none; }

.result-card-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-xxs, 0.25rem);
    margin-bottom: var(--sp-xs);
}
.result-card-title { font-size: 0.7rem; font-weight: 600; color: var(--text-c-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-right: auto; }
.result-card-actions { display: flex; align-items: center; gap: var(--sp-xxs, 0.25rem); }
.result-card .copy-btn-text { display: none; }
.result-card-main { display: flex; flex-direction: column; gap: 0.25rem; }
.result-primary { font-size: 1.1rem; font-weight: 700; color: #e65100; line-height: 1.2; }
.result-primary.result-expanded { font-size: 0.75rem; word-break: break-all; line-height: 1.4; max-height: 300px; overflow-y: auto; display: block; padding: var(--sp-xs); background: var(--bg-alt, #f5f5f5); border-radius: 4px; font-family: monospace; }
.result-secondary { font-size: 0.9rem; color: var(--text-c-secondary); }
.result-card-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-xs); }
.result-card-note { color: var(--text-light); font-size: 0.8rem; }
.result-card .answer { font-size: 1rem; line-height: 1.3; }

/* Desktop (641px+) */
@media (min-width: 640px) {
    .result-card { padding: var(--sp-sm) var(--sp-md); margin: var(--sp-sm) 0; }
    .result-card.initialized { min-height: 100px; }
    .result-card-header { flex-wrap: nowrap; gap: var(--sp-xs); }
    .result-card-actions { gap: var(--sp-xs); }
    .result-card-title { font-size: 0.8rem; }
    .result-primary { font-size: 1.5rem; }
    .result-card .copy-btn-text { display: inline; }
}

/* ===========================
   Action Button - Common button style for all action buttons
   Atualizado em 16/jan/2026
   =========================== */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--bg-white, #fff);
    border: 1px solid var(--brd-color, #e4f4ff);
    border-radius: var(--brd-rad-sm, 6px);
    color: var(--link-color, #1976d2);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--trans-fast, 0.15s);
}

.action-btn:hover {
    background: var(--bg-blue-pale, #e4f4ff);
    border-color: var(--pri-blue-light, #2196f3);
}

.action-btn.copied,
.action-btn.copied:hover {
    background: var(--success-light, #e8f5e9);
    border-color: var(--success, #4caf50);
    color: var(--success, #4caf50);
}

/* Danger modifier for delete/clear buttons */
.action-btn--danger:hover {
    background: #ffebee;
    border-color: #ef5350;
    color: #d32f2f;
}

/* Icon only modifier (no padding) */
.action-btn--icon {
    padding: 0;
    width: 28px;
}

/* Button with text label */
.action-btn--with-text {
    padding: 0.25rem 0.5rem;
}

.action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.action-btn-text {
    white-space: nowrap;
    font-size: 0.8rem;
}

/* WhatsApp modifier */
.action-btn--whatsapp {
    color: #25D366;
    font-weight: 700;
}
.action-btn--whatsapp:hover {
    background: #e8f5e9;
    border-color: #25D366;
}

/* ===========================
   Swap Button - Mobile-First (17/jan/2026)
   =========================== */
.swap-btn {
    /* Base = mobile */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all var(--trans-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--link-color);
    width: 40px;
    height: 40px;
    margin: 0;
}
.swap-btn img { width: 24px; height: 24px; }
.swap-btn:hover { background: var(--btn-hover-bg-c); }
.swap-btn:focus { outline: 2px solid var(--link-color); outline-offset: 2px; }
.swap-btn:active { transform: rotate(180deg) scale(.95); }

@media (min-width: 640px) {
    .swap-btn {
        width: 52px;
        height: 52px;
        padding: var(--sp-xs);
    }
    .swap-btn img { width: 32px; height: 32px; }
}

/* ===========================
   Mode Toggle Button - extends .table-toggle-btn
   Atualizado em 17/jan/2026
   =========================== */
/* Mode Toggle Button - Mobile-first 17/jan/2026 */
/* Base: mobile - rounded corners */
.mode-toggle-btn {
    margin: var(--sp-xxs) 0;
    border-radius: var(--brd-rad-md);
}

/* Desktop: reset border-radius (inherits from .table-toggle-btn) */
@media (min-width: 640px) {
    .mode-toggle-btn {
        border-radius: 0;
    }
}

/* Download Section - Added 18/dez/2025 */
.download-section {
  background: var(--code-bg-c);
  border-radius: var(--brd-rad-lg);
  padding: var(--sp-lg);
  margin: var(--sp-md) 0;
}
.download-section h2 {
  margin-top: 0;
}

/* ==========================================================================
   Link Grid - Responsive grid for links/chips (16/jan/2026, 09/abr/2026, 16/mai/2026)
   auto-fit + minmax(240px, 1fr): auto-calcula colunas baseado na largura real
   do container. Evita overflow quando .widget-sample-link tem badge longo
   tipo "8.26 × 10⁻⁶ tonnes". Substitui 4 media queries fixas.
   .widget-samples-grid é alias legado (121 files).
   ========================================================================== */

.link-grid,
.widget-samples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--sp-xs);
}

/* .widget-samples-grid specific: margin-top for widget sections */
.widget-samples-grid {
    margin-top: var(--sp-md);
}

.widget-sample-link {
    display: flex;
    justify-content: space-between;
    padding: var(--sp-sm);
    align-items: center;
    background: #f3faff;
    border: 1px solid #e8f5ff;
    border-radius: var(--brd-rad-sm);
    text-decoration: none;
    color: var(--text-dark);
    transition: all var(--trans-fast);
    font-size: .8rem;
}

.widget-sample-link:hover {
    background: var(--bg-blue-tint);
    border-color: var(--pri-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.widget-sample-link span:first-child {
    flex: 1;
    font-weight: 500;
}

.conversion-badge {
    background: var(--accent-red);
    color: #fff;
    padding: var(--sp-xs) var(--sp-xs);
    border-radius: var(--brd-rad-xs);
    font-size: .8rem;
    font-weight: 600;
    margin-left: var(--sp-sm);
    text-align: center;
    text-wrap: balance;
    line-height: 1.2;
    /* sem white-space: nowrap — badges com nome de unidade longo (ex.: "kilowatt-hours",
       "horsepower (electric)", "kilogram-force-meters") quebram em 2 linhas em vez de
       fazer overflow do cell do grid. 16/mai/2026 */
}

.quick-answer #Question, .quick-answer #Answer, .quick-calculation {
    margin: var(--sp-xs) 0;
    line-height: 1.0;
}
.quick-answer #Question{
    line-height: 1.0;
}

.quick-answer #Answer{
    line-height: 2;
    border-left: 4px solid var(--destacado-color);
    padding-left: var(--sp-xs);
}

/* P3 Value Context Enrichment (30/mar/2026) */
.value-context {
    font-size: 1.05em;
    color: var(--text-secondary, #444);
    margin: 0.5em 0 1em;
    line-height: 1.5;
}

/* P2 Factor Statement + Formula Block (24/fev/2026) */
p.p2-factor {
    font-size: 1.1rem;
    font-weight: 600;
    margin: var(--sp-xs) 0;
}
.formula-block {
    padding: var(--sp-sm);
    background: var(--code-bg-c);
    border-left: 4px solid #228de4;
    margin-bottom: var(--sp-sm);
    font-family: monospace;
    font-size: 1rem;
}
/* .mini-table CSS removed 02/mar/2026 - component converter-mini-table.php removed */
/* P3 Conversion Result + Calculation Steps (03/mar/2026) */
p.conversion-result {
    font-size: 1.4rem;
    color: var(--text-c-main);
    font-weight: 700;
    margin: 0.3em 0 0.6em;
    background: var(--code-bg-c);
    border-left: 4px solid var(--destacado-color);
    padding: var(--sp-xs) var(--sp-sm);
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}
p.quick-calculation {
    font-size: 0.95rem;
    color: var(--text-c-secondary);
    margin-top: 0;
}
/* Atualizado em 06/abr/2026 — multi-format helpers on length→inch P3 */
p.quick-formats {
    font-size: 0.95rem;
    color: var(--text-c-secondary);
    margin: 2px 0 0 0;
}
.calculation-steps {
    margin-bottom: var(--sp-sm);
}
.calculation-steps h2 {
    font-size: 1.1rem;
    margin-bottom: var(--sp-xxs);
}
.calculation-steps p {
    font-family: monospace;
    font-size: 1rem;
}

/* Quick Answer Box CSS removed 02/jan/2026 - migrated to semantic H1+P pattern (277 lines deleted) */
/* Offline Status Chip CSS removed 14/jan/2026 - styles moved to inline in footer.js */

/* CLS Prevention section removed 16/jan/2026 - regras eram conflitantes/bugadas:
   - #result-card min-height:80px conflitava com .result-card.initialized min-height:100px
   - #verbose min-height:50px sobrescrevia min-height:400px definido anteriormente
   - @keyframes loading não era utilizado
   - button min-height já está definido nos estilos base */


/* ==========================================================================
   DARK MODE CONSOLIDATED - Component Overrides
   Atualizado em 04/fev/2026
   Note: Base theme variables remain at top (:root and [data-theme="dark"])
   This section contains component-specific dark mode overrides only
   ========================================================================== */

/* Content Links - thicker underline for distinguishability (WCAG 1.4.1) */
[data-theme="dark"] #content p a,
[data-theme="dark"] #content li a,
[data-theme="dark"] #content dd a,
[data-theme="dark"] .faq-content a,
[data-theme="dark"] .blockcontainer p a {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

/* Validation Error */
[data-theme="dark"] .validation-error {
    background-color: #450a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

/* Answer highlight */
[data-theme="dark"] .answer { color: #ff8a50; }

/* Fraction display */
[data-theme="dark"] .fraction { color: #64b5f6; }

/* SVG icons — lighter orange for dark backgrounds */
[data-theme="dark"] .breadcrumb svg path, [data-theme="dark"] .breadcrumb svg polyline,
[data-theme="dark"] .breadcrumb svg polygon, [data-theme="dark"] .breadcrumb svg circle,
[data-theme="dark"] .breadcrumb svg rect, [data-theme="dark"] .breadcrumb svg line,
[data-theme="dark"] .caret svg path, [data-theme="dark"] .caret svg polyline,
[data-theme="dark"] .caret svg polygon, [data-theme="dark"] .caret svg circle,
[data-theme="dark"] .caret svg rect, [data-theme="dark"] .caret svg line,
[data-theme="dark"] #myUL svg path, [data-theme="dark"] #myUL svg polyline,
[data-theme="dark"] #myUL svg polygon, [data-theme="dark"] #myUL svg circle,
[data-theme="dark"] #myUL svg rect, [data-theme="dark"] #myUL svg line { stroke: #ff9800; }
[data-theme="dark"] .breadcrumb svg .accent,
[data-theme="dark"] .caret svg .accent,
[data-theme="dark"] #myUL svg .accent { stroke: #ffb74d; }

/* Breadcrumb links */
[data-theme="dark"] .breadcrumb a {
    color: #64B5F6;
    text-decoration: underline !important;
    text-decoration-color: #64B5F6;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
[data-theme="dark"] .breadcrumb a:hover {
    color: #90CAF9;
    text-decoration-color: #90CAF9;
}

/* Context badge */
[data-theme="dark"] .context-badge { background: var(--link-color); }

/* Highlighted table row */
[data-theme="dark"] tr.highlight { background-color: var(--bg-dark-3); }
[data-theme="dark"] tr.highlight th,
[data-theme="dark"] tr.highlight td { color: var(--blue-light); }

/* Action buttons */
[data-theme="dark"] .action-btn {
    background: var(--bg-dark-2, #1e1e1e);
    border-color: var(--brd-dark, #424242);
    color: var(--blue-light, #90caf9);
}
[data-theme="dark"] .action-btn:hover {
    background: var(--bg-dark-3, #2c2c2c);
    border-color: var(--blue-medium, #64b5f6);
}
[data-theme="dark"] .action-btn.copied,
[data-theme="dark"] .action-btn.copied:hover {
    background: #1b5e20 !important;
    border-color: #4caf50 !important;
    color: #81c784 !important;
}
[data-theme="dark"] .action-btn--danger:hover {
    background: var(--bg-dark-2, #1e1e1e);
    border-color: #ef5350;
    color: #ef5350;
}

/* Result card, info card, disclaimer */
[data-theme="dark"] .result-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .disclaimer {
    background: linear-gradient(135deg, var(--bg-dark-2, #1e1e1e) 0%, var(--bg-dark-3, #2c2c2c) 100%);
    border-color: var(--blue-medium, #64b5f6);
}
[data-theme="dark"] .result-primary { color: #ff8a50; }
[data-theme="dark"] .result-card .copy-btn,
[data-theme="dark"] .result-card .share-btn {
    background: var(--bg-dark-2, #1e1e1e);
    border-color: var(--brd-dark, #424242);
    color: var(--blue-light, #90caf9);
}
[data-theme="dark"] .result-card .copy-btn:hover,
[data-theme="dark"] .result-card .share-btn:hover {
    background: var(--bg-dark-3, #2c2c2c);
    border-color: var(--blue-medium, #64b5f6);
}
[data-theme="dark"] .result-fractions { border-top-color: var(--brd-dark, #424242); }

/* Conversion badge */
[data-theme="dark"] .conversion-badge { background: #c62828; }

/* Widget sample link */
[data-theme="dark"] .widget-sample-link {
    background: var(--bg-dark-3);
    border-color: var(--brd-dark);
    color: var(--text-light-blue);
}
[data-theme="dark"] .widget-sample-link:hover {
    background: #263238;
    border-color: #64b5f6;
}

/* ==========================================================================
   DARK MODE - System Preference (prefers-color-scheme: dark)
   For users who haven't explicitly set a theme
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    /* Content Links */
    :root:not([data-theme]) #content p a,
    :root:not([data-theme]) #content li a,
    :root:not([data-theme]) #content dd a,
    :root:not([data-theme]) .faq-content a,
    :root:not([data-theme]) .blockcontainer p a {
        text-decoration-thickness: 2px;
        text-decoration-color: currentColor;
    }

    /* Validation Error */
    :root:not([data-theme]) .validation-error {
        background-color: #450a0a;
        border-color: #7f1d1d;
        color: #fca5a5;
    }

    /* Answer highlight */
    :root:not([data-theme]) .answer { color: #ff8a50; }

    /* Fraction display */
    html:not([data-theme="light"]) .fraction { color: #64b5f6; }

    /* SVG icons — lighter orange for dark backgrounds */
    :root:not([data-theme]) .breadcrumb svg path, :root:not([data-theme]) .breadcrumb svg polyline,
    :root:not([data-theme]) .breadcrumb svg polygon, :root:not([data-theme]) .breadcrumb svg circle,
    :root:not([data-theme]) .breadcrumb svg rect, :root:not([data-theme]) .breadcrumb svg line,
    :root:not([data-theme]) .caret svg path, :root:not([data-theme]) .caret svg polyline,
    :root:not([data-theme]) .caret svg polygon, :root:not([data-theme]) .caret svg circle,
    :root:not([data-theme]) .caret svg rect, :root:not([data-theme]) .caret svg line,
    :root:not([data-theme]) #myUL svg path, :root:not([data-theme]) #myUL svg polyline,
    :root:not([data-theme]) #myUL svg polygon, :root:not([data-theme]) #myUL svg circle,
    :root:not([data-theme]) #myUL svg rect, :root:not([data-theme]) #myUL svg line { stroke: #ff9800; }
    :root:not([data-theme]) .breadcrumb svg .accent,
    :root:not([data-theme]) .caret svg .accent,
    :root:not([data-theme]) #myUL svg .accent { stroke: #ffb74d; }

    /* Breadcrumb links */
    :root:not([data-theme]) .breadcrumb a {
        color: #64B5F6;
        text-decoration: underline !important;
        text-decoration-color: #64B5F6;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }
    :root:not([data-theme]) .breadcrumb a:hover {
        color: #90CAF9;
        text-decoration-color: #90CAF9;
    }

    /* Highlighted table row */
    :root:not([data-theme]) tr.highlight { background-color: var(--bg-dark-3); }
    :root:not([data-theme]) tr.highlight th,
    :root:not([data-theme]) tr.highlight td { color: var(--blue-light); }

    /* Action buttons */
    :root:not([data-theme]) .action-btn {
        background: var(--bg-dark-2, #1e1e1e);
        border-color: var(--brd-dark, #424242);
        color: var(--blue-light, #90caf9);
    }
    :root:not([data-theme]) .action-btn:hover {
        background: var(--bg-dark-3, #2c2c2c);
        border-color: var(--blue-medium, #64b5f6);
    }
    :root:not([data-theme]) .action-btn.copied,
    :root:not([data-theme]) .action-btn.copied:hover {
        background: #1b5e20 !important;
        border-color: #4caf50 !important;
        color: #81c784 !important;
    }
    :root:not([data-theme]) .action-btn--danger:hover {
        background: var(--bg-dark-2, #1e1e1e);
        border-color: #ef5350;
        color: #ef5350;
    }

    /* Result card, info card, disclaimer */
    :root:not([data-theme]) .result-card,
    :root:not([data-theme]) .info-card,
    :root:not([data-theme]) .disclaimer {
        background: linear-gradient(135deg, var(--bg-dark-2, #1e1e1e) 0%, var(--bg-dark-3, #2c2c2c) 100%);
    }
    :root:not([data-theme]) .result-primary { color: #ff8a50; }
    :root:not([data-theme]) .result-card .copy-btn,
    :root:not([data-theme]) .result-card .share-btn {
        background: var(--bg-dark-2, #1e1e1e);
        border-color: var(--brd-dark, #424242);
        color: var(--blue-light, #90caf9);
    }
    :root:not([data-theme]) .result-card .copy-btn:hover,
    :root:not([data-theme]) .result-card .share-btn:hover {
        background: var(--bg-dark-3, #2c2c2c);
        border-color: var(--blue-medium, #64b5f6);
    }
    :root:not([data-theme]) .result-fractions { border-top-color: var(--brd-dark, #424242); }

    /* Conversion badge */
    :root:not([data-theme]) .conversion-badge { background: #c62828; }

    /* Widget sample link */
    :root:not([data-theme]) .widget-sample-link {
        background: #2c2c2c;
        border-color: #424242;
        color: #e4f4ff;
    }
    :root:not([data-theme]) .widget-sample-link:hover {
        background: #263238;
        border-color: #64b5f6;
    }
}


/**
 * PUBLIFT PUBLIFT PUBLIFT PUBLIFT PUBLIFT PUBLIFT
 * Ad units - DO NOT MODIFY
 */

.fuse-slot,
.fuse-slot-dynamic .fuse-slot-mini-scroller,
.fuse-slot-mini-scroller {
	text-align: center !important;
	overflow: clip;
}

/* Ad containers - Reserve space to prevent CLS (21/jan/2026)
   MREC ads are typically 300x250 or 336x280
   Using contain: layout size to prevent layout shifts */
#home_mrec_1,
#home_mrec_2 {
	contain: layout size;
	height: 280px;
	overflow: hidden;
	margin: 15px auto;
}

@media (min-width: 800px) {

	#home_vrec_lhs,
	#home_vrec_rhs {
		top: 60px;
		position: -webkit-sticky;
		position: sticky;
	}

	#home_mrec_1,
	#home_mrec_2 {
		margin: 25px auto;
	}

	/*right ads desktop */

}

#home_header {
	overflow: clip;
	margin: 25px auto 25px auto;
	min-height: 100px;
	/* min-height: 250px; */
}

#home_incontent_1,
#home_incontent_2 {
	/*2nd and 3rd ads mobile ads */
	contain: layout size;
	height: 280px;
	overflow: hidden;
	margin: 25px auto 25px auto;
}

@media (min-width: 600px) {

	/* hide mobile ads */
	#home_header,
	#home_incontent_1,
	#home_incontent_2 {
		visibility: hidden;
		display: none;
	}
}

@media (max-width: 599px) {

	#home_header {
		/* show mobile ads */
		display: block;
		visibility: visible;
		max-height: 336px !important;
		height: 250px !important;
		min-height: 250px;
		margin: 15px 0 15px 0;
	}

	.blockcontainer:has(#home_header) {
		margin-left: calc(-1 * var(--sp-xs));
		margin-right: calc(-1 * var(--sp-xs));
		padding: 0;
		min-height: 250px; /* Reserve space for ad container - mobile only */
	}

	#home_mrec_1,
	#home_mrec_2 {
		/* hide desktop ads */
		visibility: hidden;
		display: none;
	}

}

/* Publift sticky footer — reserve space to prevent CLS as the ad loads
   (observed 3px → 25px+ growth over ~1s). 50px covers the common 320x50
   sticky-footer creative. (16/abr/2026) */
.publift-widget-sticky_footer-container {
	min-height: 50px;
	contain: layout;
}

/* =========================================================
   Conversion Scale (P3 visual bar)
   ========================================================= */
.conversion-scale-container {
	margin: 1.5em 0;
	text-align: center;
}
.conversion-scale {
	width: 100%;
	height: auto;
}
.conversion-scale-caption {
	font-size: 0.85em;
	color: var(--text-c-secondary);
	margin-top: 0.3em;
}

.ctx-section {
	margin: 1.5em 0;
}
.ctx-section h2 {
	font-size: 1.2em;
	margin-bottom: 0.5em;
}
.ctx-paragraph {
	font-size: 0.95em;
	line-height: 1.6;
	color: var(--text-c-secondary);
}

/* =========================================================
   Popular References (P3 match + P2 table)
   ========================================================= */
.popular-ref-match {
	background: var(--code-bg-c);
	border-left: 4px solid var(--destacado-color);
	padding: 0.8em 1em;
	margin: 1em 0;
	border-radius: 0 6px 6px 0;
}
.popular-ref-label {
	font-size: 0.95em;
	margin: 0 0 0.3em;
}
.popular-ref-curiosity {
	font-size: 0.85em;
	color: var(--text-c-secondary);
	margin: 0;
	font-style: italic;
}
.popular-refs-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5em 0 1.5em;
	font-size: 0.9em;
}
.popular-refs-table th,
.popular-refs-table td {
	padding: 0.5em 0.8em;
	border-bottom: 1px solid #eee;
	text-align: left;
}
.popular-refs-table th {
	background: var(--code-bg-c);
	font-weight: 600;
}

/* Atualizado em 07/abr/2026 — P3 closest-fraction highlight (length→inch).
   Rendered by includes/_standard-converters-components/converter-quick-answer.php
   below the conversion result. Reuses --code-bg-c (theme-aware) and
   --destacado-color (orange in light, blue in dark) so the block follows the
   site's existing accent palette in both themes. */
.fraction-highlight {
	margin: 0.6em 0 0.8em;
	padding: 0.5em 0.85em;
	background: var(--code-bg-c);
	border-left: 4px solid var(--destacado-color);
	border-radius: 0 4px 4px 0;
	line-height: 1.45;
}
.fraction-highlight .frac-label {
	color: var(--text-c-secondary);
	font-size: 0.9rem;
}
.fraction-highlight .frac-value {
	font-size: 1.3em;
	font-weight: 700;
	color: var(--text-c-main);
}
.fraction-highlight small {
	display: block;
	margin-top: 0.15em;
	font-size: 0.85rem;
	color: var(--text-c-secondary);
}
/* At-a-glance block (How-Many pages, §4.2a) now reuses .popular-ref-match
   + .popular-ref-label + <small> — removed dedicated rules 20/abr/2026. */

/* Gas Mark — interactive SVG scale (inline so :hover/:focus tooltips work). */
.gas-mark-interactive-scale {
	margin: 20px 0;
	max-width: 100%;
	overflow-x: auto;
}
.gas-mark-interactive-scale svg {
	width: 100%;
	min-width: 700px;
	height: auto;
	display: block;
}
.gas-mark-interactive-scale figcaption {
	font-size: 13px;
	color: var(--text-c-secondary, #666);
	font-style: italic;
	margin-top: 8px;
	text-align: center;
}

/* Download & Share cards (gas-mark hub + future hubs). */
.download-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0;
}
.download-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--table-header-background-color, #ccc);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	background: var(--main-bg-c, #fff);
	transition: border-color 0.2s, transform 0.1s;
	min-width: 220px;
	flex: 1 1 220px;
}
.download-card:hover,
.download-card:focus {
	border-color: #FF6D00;
	transform: translateY(-1px);
	outline: none;
}
.download-card .dl-icon {
	font-size: 24px;
	line-height: 1;
}
.download-card .dl-label strong {
	display: block;
	font-size: 14px;
}
.download-card .dl-label small {
	font-size: 12px;
	color: var(--text-c-secondary, #666);
}

/* === E-E-A-T: trust-signal exactness line + author/reviewer byline ===
   Atualizado em 11/maio/2026 — sprint 1 */
.trust-signal .trust-exactness {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--text-c-secondary);
    margin-top: var(--sp-xxs);
}
.author-info,
.reviewer-info {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    margin: var(--sp-xs) 0;
    font-size: 0.9rem;
    color: var(--text-c-secondary);
}
.author-image,
.reviewer-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.author-name,
.reviewer-name {
    color: var(--link-color);
    font-weight: 500;
    text-decoration: none;
}
.author-name:hover,
.reviewer-name:hover {
    text-decoration: underline;
}


/* Ad units */
/* 2560 x 1440 | 1920 x 1080 | 1600 x 900 | 1536 x 864 | 1440 x 900 | 1366 x 800 | 1280 x 720 */


#left-bar, #right-bar{visibility:hidden;display:none;position:absolute;padding:0;/*background-color: #75bf6e !important;*/}

@media only screen and (min-width:1140px) {
    
    #left-bar{display:block;visibility:visible;}
    #right-bar{display:block;visibility:visible;}
    
    #left-bar{margin:60px 0 0 -125px;}
	#right-bar{margin:60px 0 0 777px;}
}


@media only screen and (min-width:1140px) { /*1140 - 770 = 370 -> 370/2 = 185  */
    #left-bar{width:160px;margin:60px 0 0 -168px;}
    #right-bar{width:160px;}
}
@media only screen and (min-width:1280px) {
    #left-bar{width:210px;margin:60px 0 0 -275px;}
    #right-bar{width:210px;}
}

@media only screen and (min-width:1366px) {
    #left-bar{width:250px;margin:60px 0 0 -275px;}
    #right-bar{width:250px;}
}

@media only screen and (min-width:1600px) {
    #left-bar{width:336px;margin:60px 0 0 -308px;}
    #right-bar{width:336px;}
}


ins{text-align:center!important}

#ad-1,#ad-2,#ad-3{text-align:center!important;min-width:250px!important;}
/* #ad-1{height:90px;margin:15px 0 15px 0} */
#ad-2{height: 280px;}
@media (min-width: 600px) {
#ad-2{height: 600px;}
}
#ad-1,#ad-2{margin:0 auto 15px auto}
#ad-3{margin:15px auto 15px auto}

#ad-calc{margin:10px 0 10px 0;height:120px}

@media only screen and (max-width:600px) {/* big phones */
	#ad-2{margin-top:15px}
	#ad-1{height:350.2px}
}
@media only screen and (max-width:412px) {/* Galaxy s20 Ultra */
	#ad-1,#ad-2,#ad-3{min-height:350.2px}
}
@media only screen and (max-width:390px) {/* iphone 12 */
	#ad-1,#ad-2,#ad-3{min-height:332.198px}
}
@media only screen and (max-width:375px) {/* iphone se */
	#ad-1,#ad-2,#ad-3{min-height:319.198px}
}
@media only screen and (max-width:360px) {/* Galaxy note 3, S8 */
	#ad-1,#ad-2,#ad-3{min-height:307.198px}
}
@media only screen and (max-width:320px) {/* iphone 4 */
	#ad-1,#ad-2,#ad-3{min-height:273.198px}
}
/* ── Conversion-table embed block (includes/conversion-table-embed.php) ──
   Movido do <style> inline do componente em 12/jul/2026: <style> dentro de
   <div> é não-conforme (W3C validator) — metadata content só no <head>. */
.ct-embed { display: flex; flex-wrap: wrap; gap: var(--sp-md, 16px); align-items: flex-start; }
.ct-embed-preview { flex: 0 1 220px; border: 1px solid var(--brd-color, #ddd); border-radius: var(--brd-rad-sm, 6px); overflow: hidden; background: #fff; }
.ct-embed-preview img { display: block; width: 100%; height: auto; }
.ct-embed-code { flex: 1 1 320px; min-width: 260px; }
.ct-embed-code textarea { width: 100%; font-family: monospace; font-size: 12px; padding: 8px; border: 1px solid var(--brd-color, #ccc); border-radius: 6px; background: var(--ctrl-bg-c, #fff); color: var(--text-c-main, #333); resize: vertical; min-height: 130px; }
.ct-embed-copy { display: inline-block; padding: 6px 16px; background: var(--pri-blue, #1565c0); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; margin-top: 6px; }
.ct-embed-copy:hover { background: var(--pri-blue-hover, #0d47a1); }
.ct-embed-copy.copied { background: #2e7d32; }
.ct-embed-license { color: var(--text-c-second, #666); }