/* ===== 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); transform: translate(-50%, -140%);}

/* 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; 
  border: none;
  background: none;
  color: var(--fg);
}

/* 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(--primary), transparent 30%); }
.btn.success:hover { background: var(--primary); 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; gap: 0px } }

.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{
  font-weight:600;
  line-height:1.25;
  color: #27b5a9;
  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; }
/* Smooth transitions for rows */
.hc-mi-row {
  transition:
    background-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
/* Swap pulse animation */
.hc-mi-row.hc-swapping {
  animation: hc-swap-pulse 0.22s ease-out;
}
@keyframes hc-swap-pulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(91, 188, 255, 0);
    background-color: transparent;
  }
  50% {
    transform: translateY(-3px);
    /* box-shadow: 0 0 0 3px rgba(91, 188, 255, 0.55); */
    /* background-color: rgba(91, 188, 255, 0.10); */
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(91, 188, 255, 0);
    background-color: transparent;
  }
}
/* highlight the two rows involved in a swap */
.hc-mi-row.is-swapping {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(91, 188, 255, 0.45);
  background-color: rgba(91, 188, 255, 0.10);
}
/* 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 10px 10px 0;color: var(--fg);}
.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;margin-top: 20px;display: flex; }
.hc-res-label {
  margin-right: 0.35rem;
}

.hc-res-eq {
  margin: 0 0.35rem;
  opacity: 0.85;
}

/* Little “chips” for the two sides of the result */
.hc-res-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.92rem;
}

/* Use same colors as your primary/secondary unit rows */
.hc-res-primary {
  background: var(--primary-highlight);
}

.hc-res-secondary {
  background: var(--secondary-highlight);
}
/* 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: var(--text)}
.adv-toggle input { position:absolute; opacity:0; pointer-events:none; }
.adv-toggle .switch {
  --w: 30px; --h: 16px;
  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%); }

/* keep your base rule */
.hc-explain{ max-height:0; overflow:clip; transition:max-height 420ms ease;border-top: 1px solid var(--border);
    padding: 30px 5px 0px; margin-top: 30px; }
.hc-explain.is-open{ max-height: 100%; }
@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-spacer{ height:10px; }
.hc-underline{     
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px; 
}
.hc-explain h4 {
  margin-top: 0;
  font-weight: 500;
  margin-bottom: 10px !important;
}
.hc-explain li {
  padding-bottom: 0px;
}
/* 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; }
.hc-history {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.hc-history-chip {
  border-radius: 2px;
  padding: 5px 8px;
  font-size: 0.78rem;
  border: 1px solid color-mix(in oklab, var(--border, #3a3f47), transparent 30%);
  background: color-mix(in oklab, var(--card, #1e242c), transparent 15%);
  color: var(--fg, #e6edf7);
  cursor: pointer;
  white-space: nowrap;
}

.hc-history-chip:hover {
  background: color-mix(in oklab, var(--accent, #5bbcff), transparent 84%);
  border-color: color-mix(in oklab, var(--accent, #5bbcff), transparent 70%);
}
/* block inside #qbSug for converter links */
.qb-block-converters {
  border-top: 1px solid color-mix(in oklab, var(--border, #3a3f47), transparent 35%);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

.qb-block-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin: 0 0 0.2rem;
}

.qb-block-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.qb-conv-item {
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.45rem;
  border-radius: 0.55rem;
  text-decoration: none;
  color: inherit;
}

.qb-conv-item:hover {
  background: color-mix(in oklab, var(--accent, #6b5bff), transparent 82%);
}

.qb-conv-label {
  font-size: 0.88rem;
  font-weight: 500;
}

.qb-conv-desc {
  font-size: 0.78rem;
  opacity: 0.7;
}
/* All converters section */
.all-converters {
  margin-top: 24px;
}

.allc-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.9;
}

/* Each group row */
.conv-group {
  background: var(--panel, #11151f);
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--border, #333), transparent 15%);
  overflow: hidden;
}

.conv-group + .conv-group {
  margin-top: 6px;
}

/* Remove default triangle and style header */
.conv-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.94rem;
}

.conv-group[open] > summary {
  border-bottom: 1px solid color-mix(in oklab, var(--border, #333), transparent 30%);
}

.conv-group > summary::-webkit-details-marker {
  display: none;
}

.cg-chevron {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Chip list */
.conv-list {
  padding: 8px 10px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* IMPORTANT: make chips shrink-to-content, not 100% width */
.conv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--border, #333), transparent 35%);
  background: color-mix(in oklab, var(--card, #161b24), transparent 10%);
  color: inherit;
  flex: 0 0 auto;   /* <- stops them from stretching */
}

.conv-pill:hover {
  background: color-mix(in oklab, var(--accent, #6b5bff), transparent 80%);
  border-color: color-mix(in oklab, var(--accent, #6b5bff), transparent 60%);
}

/* Slightly tighter on mobile */
@media (max-width: 640px) {
  .conv-list {
    gap: 6px;
  }
  .conv-pill {
    font-size: 0.78rem;
    padding: 3px 9px;
  }
}
/* Mobile: real accordion */
@media (max-width: 767px) {
  .conv-group > summary {
    cursor: pointer;
  }
}

/* Desktop: always open, summary is just a label */
@media (min-width: 768px) {
  .conv-group > summary {
    cursor: default;
    pointer-events: none;      /* can't toggle */
  }
  .conv-group > summary .cg-chevron {
    display: none;            /* hide small arrow */
  }
}
.all-converters {
  margin-top: 24px;
}

.allc-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
  opacity: 0.9;
}

/* Full-width group card */
.allc-group {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Group header inside card */
.allc-head {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Inline converter links */
.allc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.conv-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.86rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}

.conv-pill:hover {
  border-color: var(--accent, #7d5cff);
  background: rgba(125,92,255,0.12);
}
/* All converters title */
.allconv-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #9ca3b5);
  margin-bottom: 10px;
}
.all-conv-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #9ca3b5);
  margin-bottom: 10px;
}
.res-conv-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #9ca3b5);
  margin-bottom: 10px;
}
/* Each category row */
.allconv-row {
  padding: 10px 0;
  margin-bottom: 20px;
  /* border-radius: 12px;
  background: color-mix(in oklab, var(--card, #171b22), transparent 5%);
  border: 1px solid color-mix(in oklab, var(--border, #2b313b), transparent 20%); */
}

/* Category label (CORE MEASUREMENTS, etc.) */
.allconv-label {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #9ca3b5);
  margin-bottom: 15px;
}

/* Container for the inline links */
.allconv-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

/* Links: same feeling as card text, no bubbles */
.allconv-link {
  font-size: 0.98rem;                /* similar to card body */
  font-weight: 500;                  /* between card title & body */
  color: var(--fg, #e6edf7);        /* same as cards */
  text-decoration: none;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;                  /* no pill look */
  cursor: pointer;
}

.allconv-link:hover,
.allconv-link:focus-visible {
  text-decoration: underline;
  color: var(--accent, #8b5cff);    /* match your accent */
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .allconv-row {
    padding: 10px 0;
  }
  .allconv-links {
    gap: 0.25rem 1rem;
  }
}
/* Converter page: history + Explain toggle on one line */
.hc-keyline .key-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.75rem;
  margin-top: 1.55rem;
}

.hc-keyline .hc-history {
  flex: 1;
}
/* Mobile: stack history row separate from Explain/Printable controls */
@media (max-width: 640px){
  /* Mobile: history full-width first line; printable + explain stay on same second line */
  .hc-keyline .key-bottom { flex-wrap: wrap; align-items: center; gap: 1.75rem; }
  .hc-keyline .key-bottom .hc-history { order:1; flex: 1 1 100%; margin-bottom: .15rem; }
  .hc-keyline .key-bottom .hc-explain-footer { order:2; display:flex; align-items:center; gap:10px; }
  .hc-keyline .key-bottom .adv-toggle { order:2; margin-left:auto; }
  /* Prevent the printable link from stretching */
  .hc-keyline .key-bottom .hc-explain-footer .hc-printable-link { flex: 0 0 auto; }
}
.ad-horizontal {
  margin: 16px auto 150px;
  text-align: center; 
}


.ad-horizontal .ad-mobile {
    display: none !important;
  }
/* tablet */
@media (max-width: 768px) {
  .ad-horizontal-slot {
    max-width: 468px; /* typical 468x60 banner */
  }
}

/* phone */
@media (max-width: 480px) {
  .ad-horizontal-slot {
    max-width: 320px; /* typical 320x50 / 320x100 banner */
  }
.ad-horizontal .ad-desktop {
  display: none !important;
}
.ad-horizontal .ad-mobile {
    display: inline-block !important;
    width: 100% !important;
    max-width: 350px;   /* classic 320x50 / 320x100 */
  }
}
main.panel.converter-page { flex: 0 !important; }
/* Optional: slightly tighter bottom padding */
main.panel.converter-page { padding-bottom: 12px; }
/* Ensure no accidental min-height from earlier overrides */
main.panel.converter-page { min-height: auto !important; }
/* Remove stray margins after the converter section */
.converter-page .home-converters { margin-bottom: 0; }
.converter-page .home-converters .hc-panel:last-child { margin-bottom: 0; }
/* Footer under Explain – aligned to the right */
.hc-explain + .hc-explain-footer {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

/* Printable Chart chip */
.hc-explain-footer .hc-printable-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* padding: 0.45rem 1.1rem; */
  border-radius: 999px;
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.hc-explain-footer .hc-printable-link i {
  font-size: 0.95em;
}

.hc-explain-footer .hc-printable-link:hover {
  color: #2e31ad;
}
.more-converters {margin-top: 40px;}
.more-converters h2 {margin-top: 0;}
/* === Percentage Helper layout === */

.ph-block {
  margin-top: 1.75rem;
}

.ph-block + .ph-block {
  margin-top: 2rem;
}

/* Two-column rows on desktop, single column on mobile */
.ph-row,
.ph-row-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.ph-row-results-full {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 1rem;
}
@media (max-width: 768px) {
  .ph-row,
  .ph-row-results {
    grid-template-columns: 1fr;
  }
}

/* Result strip under each block */
.ph-result.keyline {
  margin-top: 0.75rem;
}
/* Ensure result strip stays neutral */
.ph-result.keyline .key-res {
  background: transparent;
}

/* Read-only “result” fields for increase/decrease, etc. */
.field.readonly {
  position: relative;
}

.field.readonly .field-output {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* Copy pill inside readonly boxes */
.field.readonly .copy-inline {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
}

/* Inline label + input within each Percentage Helper field */
.ph-row .field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--secondary-highlight, color-mix(in oklab, var(--accent, #6b5bff), transparent 92%));
}
.ph-row .field:first-child {
  background: var(--primary-highlight, color-mix(in oklab, var(--accent, #6b5bff), transparent 88%));
}
.ph-row .field label {
  margin: 0;
  white-space: nowrap;
  font-size: 16px;
}
.ph-row .field .field-inner {
  min-width: 0;
}
.ph-row .field .field-inner input {
  width: 100%;
  background: inherit; /* match the field container (primary/secondary) */
  border: none;
  border-radius: 8px;
  outline: none;
  color: var(--fg);
}
/* Focus ring for transparent inputs */
.ph-row .field .field-inner input:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #6b5bff), transparent 85%);
}

/* Add/Subtract field: make the two buttons fill the entire field with no padding
   and remove border-radius on these buttons only. Overrides inline gaps. */
.ph-row .field[data-unit="asAction"] {
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.ph-row .field[data-unit="asAction"] > div {
  display: flex !important;
  gap: 0 !important; /* override inline gap */
  width: 100%;
}
.ph-row .field[data-unit="asAction"] .btn {
  flex: 1 1 50%;
  width: 50%;
  margin: 0;
  border-radius: 0; /* remove rounding for these buttons only */
  padding: 10px 0;
  border: none;
  box-sizing: border-box;
}
.ph-row .field[data-unit="asAction"] .btn + .btn {
  border-left: 1px solid color-mix(in oklab, var(--border), transparent 30%);
}
@media (max-width: 560px) {
  .ph-row .field[data-unit="asAction"] .btn { padding: 8px 0; font-size: 0.95rem; }
}

/* Inline layout for readonly result rows (increase/decrease) */
.ph-row-results .field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}
.ph-row-results .field label {
  margin: 0;
  white-space: nowrap;
}
.ph-row-results .field .field-output {
  min-width: 0;
}
/* === Percentage Helper layout === */

.ph-block {
  margin-top: 1.75rem;
}

.ph-block + .ph-block {
  margin-top: 2rem;
}

/* Two-column rows on desktop, single on mobile */
.ph-row,
.ph-row-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .ph-row,
  .ph-row-results {
    grid-template-columns: 1fr;
  }
}

/* Remove highlight usage from outputs; keep outputs on neutral surface */

/* Read-only result */
.field.readonly {
  position: relative;
}

.field-output {
  padding: 0.45rem 0.75rem;
  border-radius: 0.4rem;
  background: transparent; /* remove background tint on results */
  font-variant-numeric: tabular-nums;
}

/* Inline tools (X + Copy) like converter fields */
.field-input-wrap {
  position: relative;
}

.field-input-wrap input {
  /* width: 100%; */
  padding-right: 4.5rem; /* space for X + copy */
}

.field-clear {
  position: absolute;
  top: 50%;
  right: .35rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
  font-size: 1.15rem; /* make the X bigger */
  line-height: 1;
  color: color-mix(in oklab, var(--muted), transparent 30%);
}

.field-clear:hover {
  opacity: 1;
}

.field-input-wrap .copy-inline,
.field.readonly .copy-inline {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
}

/* Percentage page: make copy control look like a text link (like Length) */
#percentage-main .copy-inline {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: color-mix(in oklab, var(--text), transparent 20%);
}
#percentage-main .copy-inline:hover { text-decoration: underline; }

/* Preset chips */
.ph-presets {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ph-pill {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
}

.ph-pill:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ph-row .field.ph-primary {
  background: var(--primary-highlight);
}

.ph-row .field.ph-secondary {
  background: var(--secondary-highlight);
}
/* Make the inner input match the secondary highlight as well */
.ph-row .field.ph-secondary .field-input,
.ph-row .field.ph-secondary input[type="text"],
.ph-row .field.ph-secondary input[type="number"] {
  background: var(--secondary-highlight);
  border-color: transparent;
  box-shadow: none;
  color: var(--text);
  width: 100%;
  padding-right: 35px;
}
.ph-row-results .field.readonly {
  background: none;
}
.ph-row-results-full .field.readonly {
  background: none;
}
/* Percentage Helper – make inputs match their card highlight colors */
#percentage-main .ph-row .field.ph-primary input[type="text"],
#percentage-main .ph-row .field.ph-primary input[type="number"] {
  background: var(--primary-highlight);
  border: none;
  color: #fff; /* or var(--on-accent) if you have one */
  padding: 8px 10px;
}

#percentage-main .ph-row .field.ph-secondary input[type="text"],
#percentage-main .ph-row .field.ph-secondary input[type="number"] {
  background: var(--secondary-highlight);
  border: none;
  color: #fff;
  padding: 8px 10px;
}

/* keep results neutral */
#percentage-main .ph-row-results .field.readonly {
  background: transparent;
}