/* ---------- tokens ---------- */
:root{
  /* ---- brand ---- */
  /* One voice, not two: ink carries the name, a single jewel tone
     marks everything that moves. */
  --brand-1:#262A33;   /* "Unit" and ".com" — ink */
  --brand-2:#216B57;   /* "Convertator" — deep emerald, the live half */
  --brand-1-soft:#eeeef1;
  --brand-2-soft:#e9f2ef;

  --ink:#1A1C28;
  --ink-soft:#64677A;
  --line:#E4E4EC;
  --bg:#F5F5F8;
  --surface:#ffffff;
  --accent:var(--brand-2);
  --ad-bg:#c9ced5;      /* ad slot fill — remove once live ads render */
  --ad-line:#aeb5be;
  --ad-text:#5b6673;
  --radius:10px;
  --gap:16px;
  --amt-size:clamp(24px,3.2vw,32px);
  --amt-unit:clamp(14px,1.7vw,18px);
  /* Rails grow with the viewport: 160 wide skyscraper → 300 half page.
     Both rails read the same token, so they always match each other. */
  --rail:clamp(160px, 14vw, 300px);
  --max:1440px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#E9EAF2;--ink-soft:#969AB0;--line:#282C3C;--bg:#0E0F17;--surface:#171A26;
        --brand-1:#E9EAF2;--brand-2:#5FC1A3;
        --brand-1-soft:#20232e;--brand-2-soft:#14332b;
        --accent:var(--brand-2);
        --ad-bg:#2b313a;--ad-line:#3d4552;--ad-text:#98a3b0;}
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- shared shell ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gap)}

/* ---------- ad slots ---------- */
.ad{
  display:flex;align-items:center;justify-content:center;
  color:var(--ad-text);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  background:var(--ad-bg);
  border:1px dashed var(--ad-line);
  border-radius:var(--radius);
  overflow:hidden;
}
.ad--top{min-height:clamp(90px, 9vw, 250px);margin-block:var(--gap)}
.ad--under{min-height:clamp(250px, 22vw, 280px);margin-bottom:var(--gap)}
.ad--rail{min-height:600px;position:sticky;top:var(--gap)}

/* Keep any injected ad markup inside its reserved box */
.ad > ins,.ad > iframe,.ad > div{max-width:100%;display:block}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line);background:var(--surface)}
.brand{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
  padding-block:14px;
  text-decoration:none;color:inherit;
}
.brand:hover .brand__name{opacity:.85}
.brand__name{
  font-size:clamp(20px,2.2vw,26px);
  font-weight:750;
  letter-spacing:-.025em;
}
.brand__name .u{color:var(--brand-1)}
.brand__name .c{color:var(--brand-2)}
.brand__name .tld{color:var(--brand-1);font-size:.6em;font-weight:650;letter-spacing:0}

.brand__tag{
  display:flex;align-items:center;gap:4px;
  font-size:13px;color:var(--ink-soft);
  font-weight:500;
}
.brand__tag i{font-style:normal;color:var(--ink-soft)}   /* commas */
.brand__tag .live{color:var(--brand-2);font-weight:650}

/* ---------- main layout ---------- */
.layout{
  flex:1;
  display:grid;
  gap:var(--gap);
  grid-template-columns:var(--rail) minmax(0,1fr) var(--rail);
  grid-template-areas:
    "left  app     right"
    "left  also    right"
    "left  underad right"
    "left  history right";
  align-items:start;
  padding-bottom:var(--gap);
}
.ad--left{grid-area:left}
.ad--right{grid-area:right}
.app{grid-area:app}
.also{grid-area:also}
.ad--under{grid-area:underad}
.history{grid-area:history}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.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;
}
.panel__title{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin-bottom:12px;
  line-height:1.6;
}
.title-hint{
  text-transform:none;letter-spacing:0;font-weight:400;
  font-size:12px;color:var(--ink-soft);margin-left:7px;
}
.linkish{
  background:none;border:0;padding:0;font:inherit;
  color:var(--brand-2);font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.linkish:hover{text-decoration-thickness:2px}
.hist-empty{
  padding:4px 2px;
  color:var(--ink-soft);font-size:13px;
}

/* ---------- converter: categories ---------- */
.cats{
  display:flex;gap:6px;overflow-x:auto;
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid var(--line);
  scrollbar-width:thin;
}
.cat{
  flex:0 0 auto;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:transparent;
  color:var(--ink-soft);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:color .12s,border-color .12s,background .12s;
}
.cat:hover{color:var(--ink);border-color:var(--ink-soft)}
.cat[aria-selected="true"]{background:var(--brand-1);border-color:var(--brand-1);color:var(--surface)}

/* ---------- converter: fields ---------- */
.conv{display:grid;gap:0}
.field{
  border:1px solid var(--line);border-radius:12px;
  padding:13px 16px 14px;background:var(--bg);
  cursor:text;
  transition:border-color .12s,box-shadow .12s;
}
.field--to{background:var(--brand-2-soft);border-color:transparent}
.field:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-2-soft)}
.field__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;cursor:default}
.field__label{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;flex:0 0 auto;
}
.amount-row{
  position:relative;display:flex;align-items:baseline;gap:6px;
  overflow:hidden;padding:6px 0 4px;min-height:44px;
}
.amount{
  flex:0 0 auto;min-width:14px;
  border:0;background:transparent;padding:0;
  font:inherit;font-size:var(--amt-size);font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.amount:focus{outline:none}
.amount:placeholder-shown{font-size:var(--amt-unit)}
.amount::placeholder{color:var(--ink-soft);opacity:.55}
.field--to .amount{color:var(--brand-2)}
.unit-suffix{
  flex:0 0 auto;
  font-size:var(--amt-unit);font-weight:600;letter-spacing:-.01em;
  color:var(--ink-soft);white-space:nowrap;user-select:none;
}
.field--to .unit-suffix{color:var(--brand-2);opacity:.7}
/* first-run nudge beside the sample value — retired on first keystroke */
.type-hint{
  flex:0 0 auto;margin-left:4px;
  font-size:13px;font-weight:500;color:var(--ink-soft);
  white-space:nowrap;user-select:none;opacity:.85;
}
.is-touched .type-hint{display:none}
/* off-screen twin of .amount — measures text so the input can hug its content */
.mirror{
  position:absolute;left:-9999px;top:0;
  visibility:hidden;pointer-events:none;white-space:pre;
  font-size:var(--amt-size);font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}

/* ---------- converter: swap seam ---------- */
.seam{position:relative;display:grid;place-items:center;height:40px}
.seam::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.swap{
  position:relative;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);
  color:var(--brand-2);cursor:pointer;display:grid;place-items:center;
  transition:border-color .12s,background .12s,transform .25s ease;
}
.swap:hover{border-color:var(--brand-2);background:var(--brand-2-soft)}
.swap.is-flipped{transform:rotate(180deg)}
.swap svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.swap{transition:none}}

/* ---------- converter: unit combobox ---------- */
.combo{position:relative;flex:1 1 auto;max-width:270px;min-width:0}
.combo__input{
  width:100%;padding:8px 30px 8px 11px;
  border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink);
  font:inherit;font-size:14px;font-weight:600;
  text-overflow:ellipsis;cursor:pointer;
}
.combo__input:focus{outline:none;border-color:var(--brand-2)}
.combo__caret{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;pointer-events:none;color:var(--ink-soft);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.combo__list{
  position:absolute;z-index:30;top:calc(100% + 5px);left:0;right:0;
  max-height:250px;overflow-y:auto;list-style:none;padding:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 10px 30px rgba(20,24,35,.14);
}
.combo__opt{
  display:flex;align-items:baseline;gap:10px;
  padding:7px 9px;border-radius:6px;font-size:14px;cursor:pointer;
}
.combo__opt span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo__opt em{font-style:normal;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.combo__tag{
  flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.03em;
  color:var(--ink-soft);opacity:.75;
}
.combo__head{
  padding:8px 9px 4px;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.combo__opt.is-active{background:var(--brand-1-soft)}
.combo__opt[aria-selected="true"]{color:var(--brand-2);font-weight:650}
.combo__opt[aria-selected="true"] em{color:var(--brand-2)}
.combo__empty{padding:10px 9px;font-size:13px;color:var(--ink-soft)}

/* ---------- converter: tools row ---------- */
.tools{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 16px;flex-wrap:wrap;margin-top:16px;
}
.equation{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.equation b{color:var(--ink);font-weight:650}
.toggles{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:0 0 auto}
.toggle{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;color:var(--ink-soft);
  cursor:pointer;user-select:none;flex:0 0 auto;
}
.toggle input{accent-color:var(--brand-2);width:15px;height:15px;cursor:pointer}
.toggle:hover{color:var(--ink)}

/* ---------- save ---------- */
.save-row{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:16px}
.save-note{font-size:12px;color:var(--ink-soft);text-align:center}
/* the live conversion, set exactly like a history row minus rank and time */
.last-line{
  display:flex;align-items:center;gap:8px;
  max-width:100%;font-size:14px;margin-top:2px;
}
.last-line .hist-exp{flex:0 1 auto}
.save{
  padding:10px 30px;border-radius:999px;
  border:1px solid var(--brand-2);background:var(--brand-2);color:var(--surface);
  font:inherit;font-size:14px;font-weight:650;letter-spacing:.01em;
  cursor:pointer;transition:opacity .12s,transform .1s;
}
.save:hover{opacity:.88}
.save:active{transform:translateY(1px)}
.save:disabled{opacity:.35;cursor:not-allowed}
.save.is-saved{background:transparent;color:var(--brand-2)}

/* ---------- history ---------- */
.hist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.hist-head .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;
}
.panel__title{margin-bottom:0}
.hist-limit{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--ink-soft);flex:0 0 auto;
}
.hist-limit select{
  font:inherit;font-size:12px;font-weight:600;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;
  padding:4px 6px;cursor:pointer;
}
.hist-list{list-style:none}
.hist-row{
  display:flex;align-items:center;gap:10px;
  padding:7px 2px;border-top:1px solid var(--line);font-size:14px;
}
.hist-row:first-child{border-top:0}
.hist-rank{
  flex:0 0 20px;font-size:11px;font-weight:700;opacity:.65;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.hist-exp{
  flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hist-exp b{color:var(--brand-2);font-weight:650}
.hist-time{
  flex:0 0 auto;font-size:12px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.hist-row.is-fresh{animation:land 1s ease-out}
@keyframes land{from{background:var(--brand-2-soft)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.hist-row.is-fresh{animation:none}}

/* copy: the two amount boxes, each history row, and the whole list */
.copyb{
  flex:0 0 auto;
  border:1px solid transparent;background:transparent;color:var(--ink-soft);
  display:grid;place-items:center;cursor:pointer;
  transition:color .12s,border-color .12s,opacity .12s;
}
.copyb:hover{color:var(--brand-2);border-color:var(--line)}
.copyb:disabled{opacity:.3;cursor:not-allowed}
.copyb:disabled:hover{color:var(--ink-soft);border-color:transparent}
.copyb svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.copyb .i-done{display:none}
.copyb.is-done{color:var(--brand-2)}
.copyb.is-done .i-copy{display:none}
.copyb.is-done .i-done{display:block}

.amt-copy{width:32px;height:32px;border-radius:8px;margin-left:auto}
.amt-copy svg{width:15px;height:15px}
.hist-copy{width:30px;height:30px;border-radius:7px}
.hist-copy svg{width:14px;height:14px}

.hist-foot{
  display:flex;justify-content:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
}
.btn-ghost{
  padding:8px 20px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:color .12s,border-color .12s;
}
.btn-ghost:hover{color:var(--brand-2);border-color:var(--brand-2)}
.btn-ghost.is-done{color:var(--brand-2);border-color:var(--brand-2)}

/* ---------- "Also equal to" ----------
   The Gauge tile pattern, now running on the site tokens since the
   whole page shares that palette. */
.also-title{
  font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
  margin-bottom:12px;
}
.also-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.also-item{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 12px;
  min-width:0;
}
.also-item .val{
  font-family:var(--mono);
  font-size:.95rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.also-item .unit{
  font-size:.68rem;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.05em;
  margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--surface);
  font-size:13px;color:var(--ink-soft);
}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  justify-content:space-between;padding-block:16px;
}
.site-footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.site-footer a:hover{color:var(--ink);border-bottom-color:var(--line)}
.site-footer nav{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- narrow desktop: rails shrink to their floor ---------- */
@media (max-width:1200px){
  :root{--rail:clamp(160px, 17vw, 200px)}
}

/* ---------- mobile: only 2 ads (top + under app) ---------- */
@media (max-width:1024px){
  :root{--gap:12px}
  .layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "app"
      "also"
      "underad"
      "history";
  }
  .ad--left,.ad--right{display:none}
  .panel{padding:16px}
}
/* ---------- ad slots parked ----------
   The four AdSense slots are still in the markup, just not rendered.
   Delete class="ads-off" from <body> to switch them all back on. */
.ads-off .ad{display:none}
.ads-off .layout{
  padding-top:var(--gap);          /* the space the top ad used to hold */
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "app"
    "also"
    "history";
}
/* Without the rails the column would stretch the full 1440 and read as a
   billboard. Pull it in to 60% and centre it — header and footer follow so
   the whole page stays on one axis. The cap only bites on wide screens, so
   phones and tablets are unaffected, and switching the ads back on restores
   the full width automatically. */
.ads-off .layout,
.ads-off .site-header .wrap,
.ads-off .site-footer .wrap{
  max-width:calc(var(--max) * .6);
}

/* ---------- conversion landing pages ---------- */
.conv-h1{
  font-size:clamp(20px,2.6vw,26px);font-weight:700;
  letter-spacing:-.02em;line-height:1.25;margin-bottom:5px;
}
.conv-lead{font-size:14px;color:var(--ink-soft);margin-bottom:18px}
.conv-lead b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

.info{grid-area:info}
.info h2{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin:0 0 10px;
}
.info h2 + p{margin-bottom:12px}
.info section + section{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.info p{font-size:14px;max-width:66ch}
.formula{
  font-family:var(--mono);font-size:14px;font-weight:600;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:11px 14px;margin-bottom:12px;
  overflow-x:auto;white-space:nowrap;
}
.ref{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ref td{padding:7px 2px;border-top:1px solid var(--line)}
.ref tr:first-child td{border-top:0}
.ref td:last-child{text-align:right;color:var(--brand-2);font-weight:650}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px 12px}
.rel a{font-size:13px;color:var(--ink-soft);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel a:hover{color:var(--brand-2);text-decoration:underline}
.rel a.reverse{color:var(--brand-2);font-weight:650}

.conv .layout{
  grid-template-areas:
    "left  app     right"
    "left  also    right"
    "left  info    right"
    "left  underad right"
    "left  history right";
}
@media (max-width:1024px){
  .conv .layout{
    grid-template-areas:
      "app"
      "also"
      "info"
      "underad"
      "history";
  }
}
.ads-off.conv .layout{
  grid-template-areas:
    "app"
    "also"
    "info"
    "history";
}