/* Unit Converter — WesNieblas white tool contract */
.wn-tool.unit-converter{
  --tool-bg:var(--site-tool-bg,var(--site-bg,#f7f9fc));
  --tool-surface:var(--site-tool-surface,var(--site-surface,#fff));
  --tool-raised:var(--site-tool-surface-raised,var(--site-surface-raised,#f3f6fa));
  --tool-control:var(--site-tool-control,#fff);
  --tool-text:var(--site-tool-text,var(--site-text,#172238));
  --tool-muted:var(--site-tool-muted,var(--site-muted,#66758d));
  --tool-line:var(--site-tool-line,var(--site-line,#dce3ec));
  --tool-line-strong:var(--site-tool-line-strong,var(--site-line-strong,#bfcada));
  --tool-accent:var(--site-tool-accent,var(--site-accent,#655cff));
  --tool-accent-hover:var(--site-tool-accent-hover,var(--site-accent-hover,#397fd5));
  --tool-accent-ink:var(--site-tool-accent-ink,#fff);
  --tool-accent-soft:var(--site-tool-accent-soft,rgba(101,92,255,.1));
  --tool-shadow:var(--site-tool-shadow,0 18px 46px rgba(29,48,77,.09));
  --tool-shadow-soft:var(--site-tool-shadow-soft,0 5px 15px rgba(31,48,73,.07));
  min-height:60vh;background:var(--tool-bg);color:var(--tool-text);color-scheme:light;
  font-family:var(--site-tool-font,var(--site-font,Inter,system-ui,sans-serif));
}
.wn-tool.unit-converter,.wn-tool.unit-converter *{box-sizing:border-box}
.wn-tool.unit-converter button,.wn-tool.unit-converter input,.wn-tool.unit-converter select,.wn-tool.unit-converter textarea{font:inherit}
.wn-tool.unit-converter button{touch-action:manipulation}
.wn-tool.unit-converter img,.wn-tool.unit-converter svg{max-width:100%}
.wn-tool-container{width:min(1180px,calc(100% - (2 * var(--site-gutter,24px))));margin-inline:auto}
.wn-tool-intro{padding:clamp(40px,6vw,68px) 0 clamp(26px,4vw,40px)}
.wn-tool-eyebrow,.wn-tool-kicker{margin:0 0 9px;color:var(--tool-accent);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.wn-tool-intro h1{max-width:850px;margin:0;color:var(--tool-text);font-size:clamp(2.25rem,5vw,4rem);line-height:1.02;letter-spacing:-.05em}
.wn-tool-lead{max-width:760px;margin:16px 0 0;color:var(--tool-muted);font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.65}
.wn-tool-workspace{padding:0 0 clamp(64px,9vw,110px)}
.unit-converter-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.wn-tool-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 0 18px;padding:5px;border:1px solid var(--tool-line);border-radius:14px;background:var(--tool-raised)}
.wn-tool-tab{min-height:42px;padding:9px 17px;border:0;border-radius:10px;background:transparent;color:var(--tool-muted);font-weight:700;cursor:pointer}
.wn-tool-tab:hover{color:var(--tool-text)}
.wn-tool-tab.is-active,.wn-tool-tab.active,.wn-tool-tab[aria-selected="true"]{background:var(--tool-surface);color:var(--tool-text);box-shadow:var(--tool-shadow-soft)}
.wn-tool-panel,.wn-tool-card{min-width:0;border:1px solid var(--tool-line);border-radius:20px;background:var(--tool-surface);color:var(--tool-text);box-shadow:var(--tool-shadow)}
.wn-tool-panel{padding:clamp(20px,3vw,30px)}
.wn-tool-card{padding:20px}
.wn-tool-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.wn-tool-panel h2,.wn-tool-card h2{margin:0;color:var(--tool-text);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.2;letter-spacing:-.025em}
.wn-tool-muted,.uc-muted{color:var(--tool-muted)}
.wn-tool-field{display:grid;gap:7px;min-width:0}.wn-tool-label{color:var(--tool-text);font-size:.88rem;font-weight:750}.wn-tool-help-text{margin:0;color:var(--tool-muted);font-size:.78rem;line-height:1.45}
.wn-tool-control,.wn-tool input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),.wn-tool select,.wn-tool textarea{width:100%;min-height:46px;margin:0;padding:10px 12px;border:1px solid var(--tool-line-strong);border-radius:11px;outline:0;background:var(--tool-control);color:var(--tool-text)}
.wn-tool input::placeholder,.wn-tool textarea::placeholder{color:var(--tool-muted);opacity:.75}
.wn-tool-control:focus,.wn-tool input:focus,.wn-tool select:focus,.wn-tool textarea:focus{border-color:var(--tool-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--tool-accent) 17%,transparent)}
.wn-tool-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--tool-line-strong);border-radius:11px;background:var(--tool-raised);color:var(--tool-text);font-weight:750;text-decoration:none;cursor:pointer}
.wn-tool-button:hover{border-color:var(--tool-accent);background:var(--tool-accent-soft)}
.wn-tool-button.is-primary{border-color:var(--tool-accent);background:var(--tool-accent);color:var(--tool-accent-ink)}
.wn-tool-button.is-primary:hover{border-color:var(--tool-accent-hover);background:var(--tool-accent-hover)}
.wn-tool-help{display:inline-grid;width:30px;height:30px;flex:0 0 30px;place-items:center;padding:0;border:1px solid var(--tool-line);border-radius:50%;background:var(--tool-surface);color:var(--tool-muted);font-weight:800;cursor:pointer}
.wn-tool-help:hover{border-color:var(--tool-accent);color:var(--tool-accent)}
.uc-icon-button{width:42px;height:42px;flex:0 0 42px}.mini-help{width:30px;height:30px}
.wn-tool-chip{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border:1px solid var(--tool-line);border-radius:999px;background:var(--tool-raised);color:var(--tool-muted);font-size:.74rem;font-weight:700}
button.wn-tool-chip{cursor:pointer}.smart-examples button.wn-tool-chip:hover{border-color:var(--tool-accent);color:var(--tool-text);background:var(--tool-accent-soft)}
.wn-tool-result{margin-top:18px;padding:18px;border:1px solid var(--tool-line);border-radius:14px;background:var(--tool-raised);color:var(--tool-text)}
.mode-panel{display:none}.mode-panel.active{display:block}
.smart-card,.favorites-card{margin-bottom:18px}.card-head{margin-bottom:18px}.uc-eyebrow{margin-bottom:7px}
.smart-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}.smart-row .wn-tool-button{min-width:100px}.smart-examples{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.smart-result:empty,.analysis-result:empty{display:none}.smart-result{margin-top:15px}.smart-result strong{display:block;margin-bottom:4px;color:var(--tool-text);font-size:1.35rem}.error{color:#b42318}
.converter-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:18px;margin-bottom:18px}
.quantity-line{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px}.category-field{width:min(290px,48%)}
.unit-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.55fr);gap:10px;align-items:stretch}.big-value{min-height:80px;padding:16px 18px!important;font-size:clamp(1.5rem,4vw,2.35rem)!important;font-weight:700;letter-spacing:-.03em}.big-value.result{display:flex;align-items:center;margin:0;background:var(--tool-raised);overflow:auto;white-space:nowrap}
.unit-picker{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;text-align:left;align-items:center;padding:14px!important;cursor:pointer;background:var(--tool-control)!important}.unit-picker:hover{border-color:var(--tool-accent)}.unit-picker .unit-name{font-weight:750}.unit-picker .unit-symbol{color:var(--tool-muted);font-size:.88rem}.unit-picker .chevron{grid-column:2;grid-row:1/3;color:var(--tool-muted);font-size:1.35rem}
.swap-button{display:flex;margin:10px auto;width:44px;height:44px;padding:0;border-radius:50%;font-size:1.25rem}.conversion-detail{min-height:22px;margin-top:12px}
.controls-row{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--tool-line)}.precision-field{width:min(260px,52%)}
.related-results{display:grid}.related-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--tool-line)}.related-item:last-child{border-bottom:0}.related-item>button:first-child{background:none;border:0;color:var(--tool-text);cursor:pointer;text-align:left;padding:0}.related-value{font-weight:760}.related-unit{color:var(--tool-muted);font-size:.83rem}.star{background:none;border:0;color:var(--tool-muted);cursor:pointer;font-size:1.05rem;padding:8px}.star.active{color:var(--tool-accent)}
.favorite-units{display:flex;flex-wrap:wrap;gap:8px}.favorite-chip{display:inline-flex;align-items:center;gap:6px;background:var(--tool-raised);border:1px solid var(--tool-line);border-radius:999px;padding:7px 10px;color:var(--tool-text);cursor:pointer}.favorite-chip:hover{border-color:var(--tool-accent)}.favorite-chip small{color:var(--tool-muted)}.muted{color:var(--tool-muted)}
.reference-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px}.reference-sidebar{height:max-content;position:sticky;top:18px}.reference-categories{display:grid;margin-top:14px}.reference-categories button{background:transparent;border:0;border-bottom:1px solid var(--tool-line);color:var(--tool-muted);text-align:left;padding:10px 5px;cursor:pointer}.reference-categories button:hover,.reference-categories button.active{color:var(--tool-text);font-weight:760}.reference-list{display:grid}.reference-row{display:grid;grid-template-columns:minmax(160px,1fr) 110px minmax(180px,1fr) auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--tool-line)}.reference-row .symbol{font-weight:780}.reference-row .meta{color:var(--tool-muted);font-size:.85rem}
.analysis-result{margin-top:18px}.analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.analysis-box{border:1px solid var(--tool-line);border-radius:14px;padding:16px;background:var(--tool-raised)}.analysis-box strong{display:block;margin-top:5px;color:var(--tool-text);font-size:1.18rem}
.tool-note{font-size:.82rem;text-align:center;margin:20px auto 0;max-width:880px;line-height:1.55}
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(23,34,56,.28);backdrop-filter:blur(5px)}.modal-panel{position:relative;width:min(720px,100%);max-height:min(82vh,850px);overflow:auto;z-index:1;box-shadow:0 30px 90px rgba(29,48,77,.2)}.modal-panel h2{margin:0 42px 15px 0}.modal-close{position:absolute;right:14px;top:10px;width:40px;height:40px;background:transparent;border:0;color:var(--tool-muted);font-size:2rem;cursor:pointer}.modal-close:hover{color:var(--tool-text)}.unit-list{display:grid;margin-top:12px}.unit-option{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;background:transparent;color:var(--tool-text);border:0;border-bottom:1px solid var(--tool-line);padding:12px 4px;text-align:left;cursor:pointer}.unit-option:hover{background:var(--tool-raised)}.unit-option .symbol{font-weight:800}.unit-option .category{color:var(--tool-muted);font-size:.78rem}.help-panel{max-width:650px}.help-panel p,.help-panel li{color:var(--tool-muted);line-height:1.55}.help-panel code{color:var(--tool-text);background:var(--tool-raised);padding:2px 5px;border-radius:5px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:800px){.converter-grid,.reference-layout{grid-template-columns:1fr}.reference-sidebar{position:static}.unit-block{grid-template-columns:1fr}.reference-row{grid-template-columns:1fr 80px auto}.reference-row .meta{grid-column:1/4}.controls-row{align-items:stretch;flex-direction:column}.precision-field{width:100%}.controls-row .secondary{width:100%}}
@media(max-width:760px){.wn-tool-tabs{display:flex;width:100%}.wn-tool-tab{flex:1 1 auto;padding-inline:10px}.wn-tool-panel-header{align-items:center}.quantity-line{align-items:stretch;flex-direction:column}.category-field{width:100%}}
@media(max-width:520px){.smart-row{grid-template-columns:1fr}.smart-row .wn-tool-button{width:100%}.analysis-grid{grid-template-columns:1fr}.unit-converter-hero .uc-icon-button{flex:none}.reference-row{grid-template-columns:1fr auto}.reference-row .meta{grid-column:1/3}.reference-row>button{grid-column:2}.wn-tool-panel,.wn-tool-card{border-radius:16px}}
@media print{.wn-tool.unit-converter{--tool-bg:#fff;--tool-surface:#fff;--tool-raised:#f5f6f8;--tool-control:#fff;--tool-text:#111827;--tool-muted:#526078;--tool-line:#d8dee7;--tool-line-strong:#adb7c5;background:#fff;color:#111827}.wn-tool-button,.wn-tool-help,.wn-tool-tabs{display:none!important}.wn-tool-panel,.wn-tool-card{box-shadow:none;break-inside:avoid}}

/* v1.1 usability pass ----------------------------------------------------- */
/* Stronger three-mode selector, matching the more pronounced segmented
   control treatment used elsewhere in the tools collection. */
.unit-converter .mode-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(520px,100%);
  gap:6px;
  padding:6px;
  border:1px solid var(--tool-line-strong);
  border-radius:15px;
  background:var(--tool-raised);
  box-shadow:0 2px 8px rgba(31,48,73,.04);
}
.unit-converter .mode-tabs .wn-tool-tab{
  min-height:46px;
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:10px;
  font-weight:780;
  color:var(--tool-muted);
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.unit-converter .mode-tabs .wn-tool-tab:hover{
  color:var(--tool-text);
  background:color-mix(in srgb,var(--tool-surface) 65%,transparent);
}
.unit-converter .mode-tabs .wn-tool-tab.is-active,
.unit-converter .mode-tabs .wn-tool-tab.active,
.unit-converter .mode-tabs .wn-tool-tab[aria-selected="true"]{
  border-color:color-mix(in srgb,var(--tool-accent) 30%,var(--tool-line));
  background:var(--tool-surface);
  color:var(--tool-accent);
  box-shadow:0 5px 16px rgba(31,48,73,.10),inset 0 -2px 0 color-mix(in srgb,var(--tool-accent) 78%,transparent);
}

/* Encyclopedia table.  minmax(0,...) is deliberate: it prevents long unit
   names/notes from forcing the grid beyond the panel width. */
.unit-converter .reference-main{min-width:0;overflow:hidden}
.unit-converter .reference-table-head,
.unit-converter .reference-row{
  display:grid;
  grid-template-columns:minmax(120px,1.05fr) minmax(70px,.48fr) minmax(150px,1.45fr) 34px;
  gap:14px;
  align-items:center;
}
.unit-converter .reference-table-head{
  margin:0 -2px;
  padding:10px 2px;
  border-top:1px solid var(--tool-line);
  border-bottom:1px solid var(--tool-line-strong);
  color:var(--tool-muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.unit-converter .reference-row{padding:13px 2px}
.unit-converter .reference-row>*{min-width:0}
.unit-converter .reference-row .ref-name,
.unit-converter .reference-row .symbol,
.unit-converter .reference-row .meta{
  overflow-wrap:anywhere;
  word-break:normal;
}
.unit-converter .reference-row .symbol{font-weight:780}
.unit-converter .reference-row .meta{line-height:1.45}
.unit-converter .reference-row .star{justify-self:end}

/* Let the encyclopedia use the full width sooner on tablets.  The previous
   side-by-side 300px sidebar caused the content table to overflow at ~960px. */
@media(max-width:1040px){
  .unit-converter .reference-layout{grid-template-columns:1fr}
  .unit-converter .reference-sidebar{position:static}
  .unit-converter .reference-categories{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 14px;
  }
}
@media(max-width:700px){
  .unit-converter .reference-categories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .unit-converter .reference-table-head{
    grid-template-columns:minmax(0,1fr) minmax(70px,.42fr) 34px;
  }
  .unit-converter .reference-table-head>div:nth-child(3){display:none}
  .unit-converter .reference-row{
    grid-template-columns:minmax(0,1fr) minmax(70px,.42fr) 34px;
    gap:10px;
  }
  .unit-converter .reference-row .meta{
    grid-column:1/3;
    padding-top:2px;
  }
  .unit-converter .reference-row .star{grid-column:3;grid-row:1/3}
}
@media(max-width:460px){
  .unit-converter .reference-categories{grid-template-columns:1fr}
  .unit-converter .mode-tabs .wn-tool-tab{padding-inline:8px;font-size:.92rem}
}