/* ===== Converters (Length / Temperature / Speed) ==================== */

/* Grid */
.converter-grid,
.length-grid{
  display:grid;
  grid-template-columns: 1fr !important;
  gap:16px;
}
.converter-grid .item,
.length-grid .item {
  min-width: 0;
}
/* Item header */
.converter-grid .item label,
.length-grid .item label{
  display:block;
  font-weight:600;
  font-size:.95rem;
  margin:0 0 6px;
  color:var(--fg);
}

/* Field wrapper + Copy chip */
.field{
  position:relative;
}
.row.field {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.copy-inline{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  padding:4px 10px;
  /* border:1px solid var(--border); */
  border-radius:999px;
  background:color-mix(in oklab, var(--card), transparent 10%);
  color:var(--muted);
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.copy-inline.copied{ color:var(--accent); border-color:var(--accent); }

/* Inputs – type="text" or "number" look identical */
.length-grid input[type="text"],
.length-grid input[type="number"],
.converter-grid input[type="text"],
.converter-grid input[type="number"]{
  width:100%;
  box-sizing:border-box;
  height:auto;
  padding:12px 8px !important;
  padding-right:48px !important;
  border:1px solid color-mix(in oklab, var(--border), transparent 10%);
  background:color-mix(in oklab, var(--surface), transparent 0%);
  color:var(--fg);
  border-radius:8px;
  outline:none;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  text-align:left;
}

.length-grid input::placeholder,
.converter-grid input::placeholder{
  color:color-mix(in oklab, var(--muted), transparent 25%);
}

/* Focus */
.length-grid input:focus,
.converter-grid input:focus{
  border-color:color-mix(in oklab, var(--accent), var(--border) 65%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 85%);
}

/* When no copy chip, reclaim padding */
.field:not(.has-copy) input{ padding-right:12px; }

/* Dark mode softness (borders/text a bit less bright) comes from site.css vars.
   We just keep contrast low by mixing with transparent above. */

/* --- Mobile fixes for input rows that touch the right edge --- */
@media (max-width: 768px) {
  /* give the grid itself a tiny side padding buffer */
  .length-grid,
  .converter-grid {
    box-sizing: border-box;
    /* padding-inline: clamp(5px, 3vw, 10px); */
    padding-left: 1;
    overflow-x: hidden;       /* safety net */
  }

  /* make sure grid children can shrink and clip */
  .length-grid .item,
  .converter-grid .item,
  .row.field {
    min-width: 0;
    overflow: hidden;         /* clip absolutely positioned chip */
  }
  .row.field {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  /* input stays inside the row, reserve room for the chip */
  .row.field input[type="text"],
  .row.field input[type="number"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 32px;
  }

  /* keep the chip comfortably inside on iOS */
  .copy-inline {
    right: 10px;               /* a bit more breathing room */
    white-space: nowrap;
  }
}

@media (max-width:560px){
  .converter-grid, .length-grid{ grid-template-columns:1fr; gap:14px; }
  .length-grid input[type="text"],
  .length-grid input[type="number"],
  .converter-grid input[type="text"],
  .converter-grid input[type="number"]{
    height:auto;
    font-size:1rem;
    padding:8px 4px !important;
    padding-right:32px !important;
  }
  .length-grid .item,
  .converter-grid .item,
  .field {
    min-width: 0;
  }
}
/* Add to conversions.css (optional) */
.btn.success { background: color-mix(in oklab, var(--accent), transparent 30%); }
.btn.success:hover { background: var(--accent); color: var(--on-accent); }

/* Tabs */
.home-converters .hc-tabs-wrap {
  position: relative;
  overflow: hidden;
  padding-left: 10px;
  bottom: -3px;
}
.home-converters .hc-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
  padding-bottom: 2px; /* Space for the scrollbar */
}
/* Hide scrollbar for Chrome/Safari/Opera */
.home-converters .hc-tabs::-webkit-scrollbar {
  display: none;
}
.home-converters .hc-tab {
  padding: 8px 12px;
  background: var(--card);
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0; 
  border-radius: 5px;
  margin-bottom: 10px;
  font-weight: 600;
  border: none;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.home-converters .hc-tab.is-active {
  background: #2e31ad;
  /* border-color: rgba(255,255,255,.2); */
  font-weight: 600;
  color: #ffffff;
}

/* Panels */
.home-converters .hc-panels{background:var(--card);
  border: 1px solid var(--border);
  padding:12px;
  border-radius: 10px;
}


/* Two-column layout */
.home-converters .hc-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 16px;
}
.home-converters .hc-col{min-width:0}
/* @media (max-width:900px){.home-converters .hc-grid{grid-template-columns:1fr}} */

/* visible unit lists for homepage converters (replace selects) */
.hc-units-left,
.hc-units-right {
  border: 1px solid color-mix(in oklab, var(--border), transparent 8%);
  border-radius: 12px;
  padding: 12px;
  max-height: 260px;
  overflow: auto;
  background: color-mix(in oklab, var(--card), transparent 4%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hc-unit-item {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--border), transparent 30%);
  border-radius: 10px;
  cursor: default;
  transition: background-color 120ms ease, border-color 120ms ease;
  background: color-mix(in oklab, var(--surface), transparent 6%);
  color: var(--fg);
}

.hc-unit-item:hover {
  background: color-mix(in oklab, var(--accent), transparent 92%);
  border-color: color-mix(in oklab, var(--accent), transparent 80%);
}

.hc-units-left .hc-unit-item {
  justify-content: flex-start;
  font-weight: 500;
  width: 100%;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: color-mix(in oklab, var(--surface), transparent 10%);
}

.hc-units-left .hc-unit-item.is-selected {
  background: color-mix(in oklab, var(--accent), transparent 88%);
  border-color: color-mix(in oklab, var(--accent), transparent 70%);
  font-weight: 600;
}

.hc-units-left .hc-unit-item:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent), transparent 35%);
  outline-offset: 2px;
}

.hc-units-right .hc-unit-item {
  gap: 12px;
  align-items: center;
}

.hc-units-right .val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fg);
}

.hc-units-right .label {
  font-size: 0.8rem;
  opacity: 0.8;
  flex: 1;
}

.hc-units-right .hc-copy {
  margin-left: auto;
  flex-shrink: 0;
}

.hc-subhead {
  margin: 16px 0 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
}

.hc-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fg);
}

.home-converters .hc-clear {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--border), transparent 20%);
  background: color-mix(in oklab, var(--card), transparent 10%);
  color: var(--fg);
  cursor: pointer;
}

.home-converters .hc-clear:hover {
  background: color-mix(in oklab, var(--accent), transparent 85%);
}

.home-converters .hc-list-head {
  font-weight: 600;
  margin: 20px 0 8px;
  opacity: .85;
}
#hc-len-u1,
#hc-len-u2 {
  display: none !important;
}
.home-converters .hc-copy{border:1px solid rgba(255,255,255,.12);border-radius:6px;background:var(--bg);color:var(--text);height:28px;padding:0 8px}
.home-converters .hc-copy{cursor:pointer}
.home-converters .hc-note{opacity:.7;margin-top:6px}
.home-converters .hc-panel { display: none; }
.home-converters .hc-panel.is-active { display: block; }
.home-converters .hc-tabs [data-tab].is-active { outline: none; }
/* --- Homepage mini converters: compact list style --- */
.home-converters .hc-units-left,
.home-converters .hc-units-right {
  display: block;
  padding: 8px;
  background: color-mix(in oklab, var(--card), transparent 6%);
  border-radius: 8px;
  max-height: 260px;
  overflow: auto;
}

.home-converters .hc-unit-item {
  display: grid;
  grid-template-columns: 1fr auto auto; /* label | value | copy */
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--border), transparent 70%);
  background: transparent;
}

.home-converters .hc-units-left .hc-unit-item {
  grid-template-columns: 1fr; /* just the unit label */
  cursor: pointer;
}

.home-converters .hc-units-left .hc-unit-item.is-selected {
  background: color-mix(in oklab, var(--accent), transparent 90%);
  font-weight: 600;
}

.home-converters .hc-unit-item:last-child { border-bottom: 0; }

.home-converters .hc-unit-item .label { opacity: .9; }
.home-converters .hc-unit-item .val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: auto;
}

/* Inline "Copy" text (not a button) */
.home-converters .hc-copy {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: .86rem;
  color: color-mix(in oklab, var(--accent), transparent 20%);
  cursor: pointer;
  user-select: none;
}
.home-converters .hc-copy[hidden] { display: none; }
.home-converters .hc-copy:hover { text-decoration: underline; }
.home-converters .hc-copy.copied {
  color: var(--accent);
  text-decoration: none;
}

/* Neutralize the old “pill/button” look */
.home-converters .hc-units-left .hc-unit-item,
.home-converters .hc-units-right .hc-unit-item {
  border-radius: 0;
  transition: background-color 120ms ease;
}
/* Force the minis container to be 2 columns always */
.home-converters .hc-col{ min-width: 0; }

/* Safety: keep converter-grid as 1 column ONLY for small input blocks */
.home-converters .converter-grid{ grid-template-columns: 1fr !important; }

/* Optional: if you want two columns even below 900px, comment the next rule */
@media (max-width:900px){
  .home-converters .hc-grid{ grid-template-columns: 1fr; }
}
.home-converters .hc-quickpairs{display:flex;gap:8px;margin:0 0 8px}
.home-converters .hc-quickpairs button{
  padding:6px 10px;border-radius:999px;border:1px solid color-mix(in oklab,var(--border),transparent 15%);
  background:color-mix(in oklab,var(--surface),transparent 8%);cursor:pointer;color: var(--text);
}
.home-converters .hc-quickpairs button:hover{background:color-mix(in oklab,var(--accent),transparent 88%)}


/* Left list: angled accent bar on selected unit */
.home-converters .hc-units-left .hc-unit-item{
  position: relative;                  /* needed for ::before */
  padding-left: 16px;                  /* room for the bar */
}

/* the bar (hidden by default) */
.home-converters .hc-units-left .hc-unit-item::before{
  content: "";
  position: absolute;
  left: 6px;                           /* inside the list padding */
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 3px;
  background: transparent;
  transform: skewY(-10deg) translateX(-2px);
  opacity: 0;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

/* show a faint hint on hover/focus */
.home-converters .hc-units-left .hc-unit-item:hover::before,
.home-converters .hc-units-left .hc-unit-item:focus-visible::before{
  background: color-mix(in oklab, var(--accent), transparent 70%);
  opacity: .6;
}

/* selected state: full accent bar, a touch of glow */
.home-converters .hc-units-left .hc-unit-item.is-selected::before{
  background: var(--accent);
  opacity: 1;
  transform: skewY(-10deg) translateX(0);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent), transparent 60%),
    0 0 10px color-mix(in oklab, var(--accent), transparent 85%);
}

/* high-contrast text weight for the selected row */
.home-converters .hc-units-left .hc-unit-item.is-selected{
  font-weight: 600;
}


/* Highlight the pair */
.home-converters .hc-units-left .hc-unit-item.is-selected{
  background: color-mix(in oklab, var(--accent), transparent 90%);
  border-color: color-mix(in oklab, var(--accent), transparent 70%);
}

.home-converters .hc-units-right .hc-unit-item.is-target{
  background: color-mix(in oklab, var(--accent), transparent 90%);
  border-color: color-mix(in oklab, var(--accent), transparent 70%);
  font-weight: 600;
}

/* Keep both lists visually in sync */
.home-converters .hc-units-left .hc-unit-item,
.home-converters .hc-units-right .hc-unit-item{
  min-height: 40px;               /* consistent row height */
  display: grid;
  grid-template-columns: auto 1fr auto; /* (left icons) label | value | copy */
  align-items: center;
}
.home-converters .hc-units-left .hc-unit-item{ grid-template-columns: auto 1fr; }
.home-converters .hc-units-right .hc-unit-item .label{ order: 1; }
.home-converters .hc-units-right .hc-unit-item .val  { order: 2; justify-self: end; }
.home-converters .hc-units-right .hc-unit-item .hc-copy{ order: 3; }

/* Optional: tone down identity (from→from) row on right */
.home-converters .hc-units-right .hc-unit-item.is-identity .val{ opacity: .75; }

/* Top bars: make left (input) and right (quick pairs) same block height */
.home-converters .hc-top{
  display:flex;
  align-items:center;
  min-height: 52px;          /* match your input height */
  gap: 10px;
}

/* Right top bar pushes quick-pairs to the right edge nicely */
.home-converters .hc-top-right{
  justify-content:flex-end;
}

/* Ensure unit lists begin at the same vertical position beneath .hc-top */
.home-converters .hc-subhead,
.home-converters .hc-list-head{ margin-top: 10px; }
/* Dual-input rows ------------------------------------------------------ */
.home-converters .hc-dual-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-converters .hc-dual-row {
  display: grid;
  grid-template-columns: 1.4fr auto 1.4fr;
  align-items: center;
  gap: 12px;
  background: color-mix(in oklab, var(--card), transparent 8%);
  border: 1px solid color-mix(in oklab, var(--border), transparent 20%);
  border-radius: 8px;
  padding: 8px 12px;
}

.home-converters .hc-dual-row input {
  width: 100%;
  padding: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  border: 1px solid color-mix(in oklab, var(--border), transparent 20%);
  background: color-mix(in oklab, var(--surface), transparent 5%);
  border-radius: 6px;
  text-align: right;
  color: var(--fg);
}

.home-converters .hc-dual-row input:focus {
  border-color: color-mix(in oklab, var(--accent), transparent 60%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 85%);
}

.home-converters .hc-dual-row .unit {
  font-weight: 600;
  color: var(--fg);
}

.home-converters .hc-dual-row .eq {
  opacity: .5;
  font-weight: 600;
}
/* Multi-input compact grid */
.home-converters .hc-multi{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){ .home-converters .hc-multi{ grid-template-columns: 1fr; } }

.home-converters .hc-mi-row{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:5px;
  /* border:1px solid color-mix(in oklab, var(--border), transparent 20%); */
  border-radius:10px;
  background:color-mix(in oklab, var(--card), transparent 8%);
}

.home-converters .hc-mi-row .unit{ font-weight:600; min-width: 110px; }
.home-converters .hc-mi-row input{
  width:100%;
  padding:8px 10px;
  border:none;
  border-radius:5px;
  background:none;
  color:var(--fg);
  font-variant-numeric: tabular-nums;
  text-align:right;
}
.home-converters .hc-mi-row input:focus{
  border-color:color-mix(in oklab, var(--accent), transparent 55%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 85%);
}

.home-converters .hc-mi-row .hc-copy{
  margin-left:8px;
  font-size:.86rem;
  color: color-mix(in oklab, var(--text), transparent 20%);
  cursor:pointer;
  background: none;
  border: none;
}
.home-converters .hc-mi-row .hc-copy:hover{ text-decoration:underline; }
/* Toolbar above grids */
.home-converters .hc-tools{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:10px;
}
.home-converters .hc-tools .right{ display:flex; align-items:center; gap:10px; }
.home-converters .hc-tools .prec{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 8px; 
  /* border:1px solid color-mix(in oklab,var(--border),transparent 20%); */
  border-radius:999px; background:color-mix(in oklab,var(--card),transparent 10%);
}
.home-converters .hc-tools .btn-prec{
  padding:2px 8px; border:1px solid color-mix(in oklab,var(--border),transparent 30%);
  border-radius:6px; background:color-mix(in oklab,var(--surface),transparent 6%); color:var(--fg);
  cursor:pointer;
}
.home-converters .hc-tools .prec-val{ min-width:1.5ch; text-align:center; font-weight:600; }
.home-converters .hc-tools .btn-share{
  padding:6px 10px; border:1px solid color-mix(in oklab,var(--border),transparent 30%);
  border-radius:8px; background:color-mix(in oklab,var(--surface),transparent 6%); color:var(--fg);
  cursor:pointer;
}

/* Info / key factor box */
.home-converters .hc-info{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid color-mix(in oklab,var(--border),transparent 20%);
  border-radius:10px;
  background:color-mix(in oklab,var(--card),transparent 8%);
  color:var(--muted);
  font-size:.95rem;
  display: none;
}
.home-converters .hc-info code{
  font-family: ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  font-variant-numeric: tabular-nums;
}
/* Inputs: left-aligned text */
.home-converters .hc-mi-row input{
  text-align: left;                 /* was right */
  font-family: ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
}

/* Wrap input so we can show a clear "×" inside it */
.home-converters .hc-mi-row .mi-field{
  position: relative;
  display: flex;
  align-items: center;
}
.home-converters .hc-mi-row .mi-field input{
  padding-right: 32px;              /* room for the × */
}

/* Per-input clear button */
.home-converters .hc-clear-input{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in oklab, var(--muted), transparent 30%);
  cursor: pointer;
  display: grid; place-items: center;
}
.home-converters .hc-clear-input:hover{ color: var(--fg); }

/* Icon buttons (copy/share) */
.home-converters .icon-btn{
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid color-mix(in oklab, var(--border), transparent 30%);
  border-radius: 8px;
  background: color-mix(in oklab, var(--surface), transparent 6%);
  color: var(--fg);
  cursor: pointer;
}
.home-converters .icon-btn svg{
  width: 16px; height: 16px; fill: currentColor;
}

/* Replace text "Copy" with space for icon button */
.home-converters .hc-mi-row .after-actions{
  display: inline-flex; gap: 8px; align-items: center;
}

/* Toolbar share as icon */
.home-converters .hc-tools .btn-share{
  width: 30px; height: 30px; padding: 0; /* icon size */
}
.home-converters .hc-tools .btn-share svg{ width: 16px; height: 16px; }

/* Tiny share menu */
.home-converters .hc-sharemenu{
  position: absolute;
  z-index: 20;
  min-width: 200px;
  padding: 6px;
  border: 1px solid color-mix(in oklab, var(--border), transparent 20%);
  border-radius: 10px;
  background: color-mix(in oklab, var(--card), transparent 8%);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.home-converters .hc-sharemenu button{
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.home-converters .hc-sharemenu button:hover{
  background: color-mix(in oklab, var(--accent), transparent 88%);
}
.home-converters .icon-btn { display:inline-grid; place-items:center; width:30px; height:30px; }
.home-converters .hc-clear-input { display:grid; place-items:center; width:22px; height:22px; }
.home-converters .hc-copy.ok { outline:2px solid color-mix(in oklab, var(--accent), transparent 60%); border-radius:8px; }
/* Share menu above all */
/* Share menu above all */
.home-converters .hc-sharemenu { z-index: 9999; }

/* Tiny “Copied!” badge */
.hc-badge {
  position: absolute;
  transform: translate(-50%, -120%);
  background: color-mix(in oklab, var(--accent), transparent 10%);
  color: var(--on-accent, #fff);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .8rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.hc-badge.show {
  opacity: 1;
  transform: translate(-50%, -140%);
}
.hc-tabs-wrap { position: relative;}
/* Scrollable tab rail */
.hc-tabs { 
  display:flex; gap:8px; align-items:center;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); */
}
.hc-tabs::-webkit-scrollbar { display:none; }
.hc-tab { white-space:nowrap; flex:0 0 auto; }

/* Arrow buttons appear only when overflow */
.hc-tab-nav { 
  position:absolute; top:50%; transform:translateY(-50%);
  inline-size:28px; block-size:28px; border-radius:999px; display:none; place-content:center;
  border:1px solid color-mix(in oklab,var(--border,#3a3f47),transparent 30%);
  background:color-mix(in oklab,var(--card,#1e242c),transparent 6%); color:var(--fg,#e6edf7);
}
.hc-tab-nav.prev { inset-inline-start:2px; }
.hc-tab-nav.next { inset-inline-end:2px; }
.hc-tabs--overflow ~ .hc-tab-nav.next,
.hc-tab-nav.prev.show,
.hc-tab-nav.next.show { display:grid; }

/* “More” popover */
.hc-tabmenu {
  position:absolute; z-index:9999; min-width:200px; padding:6px;
  border:1px solid color-mix(in oklab, var(--border,#3a3f47), transparent 20%);
  border-radius:10px; background:color-mix(in oklab, var(--card,#1e242c), transparent 8%);
  inset-block-start: calc(100% + 6px); inset-inline-end: 0;
}
.hc-tabmenu[hidden]{ display:none; }
.hc-tabmenu button{ width:100%; text-align:left; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:var(--fg,#e6edf7); }
.hc-tabmenu button:hover{ background:color-mix(in oklab, var(--accent,#5bbcff), transparent 88%); }

/* XS fallback: use select under ~400px */
@media (max-width: 400px){
  .hc-tab-nav { display:none !important; }
  .hc-tabs { display:none; }
  .hc-tabs-select { display:block; width:100%; margin-block:6px; }
}
.hc-keyline{
  margin:10px 0 6px;
  font-weight:600;
  line-height:1.25;
  color: #2ead58;
  text-align: center;
  padding: 0 5px;
}
.hc-mi-row.is-primary  { background: var(--primary-highlight); outline-offset:2px; border-radius:5px; }
.hc-mi-row.is-secondary{ background: var(--secondary-highlight); outline-offset:2px; border-radius:5px; }
.hc-mi-row .unit{ cursor: pointer; }
/* Toolbars */
.hc-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hc-tools .left, .hc-tools .right { display:flex; align-items:center; gap:10px; font-size: 18px;}
.icon-btn { display:inline-grid; place-items:center; inline-size:34px; block-size:34px;
  border-radius:10px; border:1px solid color-mix(in oklab, var(--border,#38414b), transparent 20%);
  background:color-mix(in oklab, var(--card,#1e242c), transparent 8%); cursor:pointer; }
.icon-btn i { font-size:15px; }

/* Result + Advanced toggle bar */
.hc-keyline { margin:10px 0 6px; }
.hc-keyline .key-flex { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hc-keyline .key-res { font-weight:600; line-height:1.25; min-height:1.25em; }

/* Toggle switch */
.adv-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.adv-toggle .adv-label { font-weight:600; font-size:.95rem;color: #2e31ad;}
.adv-toggle input { position:absolute; opacity:0; pointer-events:none; }
.adv-toggle .switch {
  --w: 40px; --h: 22px;
  position:relative; inline-size:var(--w); block-size:var(--h); border-radius:999px;
  background: color-mix(in oklab, var(--border,#39424c), transparent 30%);
  transition: background .2s ease;
}
.adv-toggle .switch::after {
  content:""; position:absolute; inset:3px auto 3px 3px; inline-size: calc(var(--h) - 6px); block-size: calc(var(--h) - 6px);
  background: #fff; border-radius:50%; transform: translateX(0); transition: transform .2s ease;
}
.adv-toggle input:checked + .switch { background:#2e31ad; }
.adv-toggle input:checked + .switch::after { transform: translateX(calc(var(--w) - var(--h))); }

/* Advanced (Explain) slide area */
.hc-info { overflow: clip; max-height: 0; opacity: 0; transition: max-height 420ms ease, opacity 280ms ease; }
.hc-info.is-open { opacity:1; /* max-height will be set inline by JS for smooth height */ }

.hc-mi-row .unit{ cursor:pointer; }

/* Tighten small screens */
@media (max-width: 560px){
  .hc-tools .left { gap:8px; }
  .hc-tools .prec { gap:6px; }
  .hc-keyline .key-flex { flex-wrap:wrap; }
}
/* Tiny tooltip */
.hc-tip {
  position: fixed; z-index: 10000;
  padding: 6px 8px; font-size: .85rem;
  color: #fff; background: rgba(0,0,0,.85);
  border-radius: 6px; pointer-events: none;
  transform: translate(-50%, -120%); opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.hc-tip.show { opacity: 1; transform: translate(-50%, -140%); }
/* PRINT FRIENDLY OVERRIDES */
@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .hc-panel, .hc-tools, .hc-mi-row, .container {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border-color: #ccc !important;
  }

  input, button, .unit, .after-actions {
    color: #000 !important;
    background: #fff !important;
  }

  a, .key-res strong {
    color: #000 !important;
  }

  /* hide dark UI elements */
  .hc-tabs,
  /* .quickbar, */
  .tools-arrow,
  .container.grid,
  footer,
  header {
    display: none !important;
  }

  /* only show the active converter panel */
  .hc-panel.is-active {
    display: block !important;
  }
  body.hc-printing .hc-panel {
    display: none !important;
    border: none !important;
  }
   body.hc-printing .hc-panels {
    border: none !important;
  }
  body.hc-printing .hc-panel[data-hc-printing="true"] {
    display: block !important;
  }

  body.hc-printing .home-converters ~ * {
    display: none !important;
  }

  body.hc-printing .panel.hero {
    display: none !important;
  }
  body.hc-printing .hc-panel {
    display: none !important;
  }
  body.hc-printing .hc-panel .right{
    display: none !important;
  }
   body.hc-printing .hc-panel .hc-copy{
    display: none !important;
  }
  body.hc-printing .hc-panel[data-hc-printing="true"] {
    display: block !important;
  }
  body.hc-printing .hc-panel .hc-clear-input{
    display: none !important;
  }
  body.hc-printing .hc-explain {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  /* shrink margins so it fits one page */
  @page {
    margin: 0.5in;
  }
}
@media print {
  body::before {
    content: "QuantaUnits.com";
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #000;
  }
}
/* keep your base rule */
.hc-explain{ max-height:0; overflow:clip; transition:max-height 420ms ease;border-top: 1px solid var(--border);
    padding-top: 15px; }
.hc-explain.is-open{ max-height: 1000px; }
@media (prefers-reduced-motion: reduce){
  .hc-explain{ transition: none !important; }
}
/* expand when not hidden */
.hc-explain[hidden] { max-height: 0; }
.hc-explain:not([hidden]) { max-height: 500px; }

.hc-panel.is-open .hc-explain {
  max-height: 500px; /* enough for text */
}

.hc-explain h4 {
  margin-top: 0;
  font-weight: 600;
}
.hc-explain li {
  padding-bottom: 15px;
}
/* Make sure the AdSense box is allowed to render */
.card--ad { 
  display: block;               /* avoid display:contents/none/grid quirks */
  overflow: visible !important; /* some themes hide iframes with overflow:hidden on cards */
}

/* The ad container must be visible and have height */
.card--ad .adsbygoogle {
  display: block !important;
  width: 100% !important;
  min-height: 250px;            /* 250–300px keeps the slot from collapsing */
}

/* Be careful with rules like .card--ad > *:not(...) or pointer-events:none; 
   If you have them, exclude .adsbygoogle: */
.card--ad > * { pointer-events: auto; }
.card .ad-unit { width:100%; }
.card .ad-unit .adsbygoogle { display:block !important; width:100% !important; max-height:250px; }