/* ════════════════════════════════════════════════════════════
   tools/unit/style.css — Unit Converter
   UI character: Multi-color dashboard — Patient Record inspired
   8 categories, each tile own pastel color, instant multi-result
   ════════════════════════════════════════════════════════════ */

body.tool-unit {
  --page-bg:    #F2F2F4;
  --card-bg:    #FFFFFF;
  --card-soft:  #F7F7F8;
  --ink:        #0A0A0A;
  --text:       #1F2937;
  --muted:      #6B7280;
  --hairline:   #EAEAEC;

  /* category tiles — 8 distinct */
  --c1-bg: #EAE6FF;  --c1-fg: #6B5BFF;  --c1-deep: #4F3FE0;
  --c2-bg: #DDEBFA;  --c2-fg: #2A8FE0;  --c2-deep: #1E5F94;
  --c3-bg: #FCE9D6;  --c3-fg: #E07A35;  --c3-deep: #B85920;
  --c4-bg: #D8EFE0;  --c4-fg: #2D8957;  --c4-deep: #1F6841;
  --c5-bg: #FCEFC9;  --c5-fg: #C29A1F;  --c5-deep: #8F7012;
  --c6-bg: #F7DDEC;  --c6-fg: #C44B8A;  --c6-deep: #993667;
  --c7-bg: #EBDEFB;  --c7-fg: #8B5DD6;  --c7-deep: #6B3FA8;
  --c8-bg: #EBF4D2;  --c8-fg: #6B9026;  --c8-deep: #4A6818;

  --r-card:     24px;
  --r-pill:     999px;
  --r-tile:     16px;
  --r-input:    14px;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.06);

  background: var(--page-bg);
  color: var(--text);
}

body.tool-unit main.container,
body.tool-unit .site-header-inner {
  max-width: 1280px;
  padding-inline: clamp(16px, 3vw, 28px);
}

body.tool-unit .back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 13.5px;
  text-decoration: none; margin: 20px 0 16px; font-weight: 500;
}
body.tool-unit .back-link:hover { color: var(--ink); }

/* hero */
.un-hero { padding: clamp(16px, 3vw, 28px) 4px clamp(16px, 3vw, 24px); max-width: 760px; }
.un-eyebrow {
  font-size: 11px; letter-spacing: .14em; font-weight: 600;
  color: var(--muted); text-transform: uppercase; margin: 0 0 14px;
}
.un-h1 {
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.12; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 14px;
}
.un-h1-accent { color: var(--muted); font-weight: 600; }
.un-sub { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; max-width: 640px; }

/* panel */
.un-panel {
  background: var(--card-bg);
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 36px);
  margin-bottom: 20px;
  box-shadow: var(--shadow-soft);
}
.un-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 22px; padding: 0 2px; gap: 14px; flex-wrap: wrap;
}
.un-panel-title {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em;
}
.un-panel-sub { font-size: 12.5px; color: var(--muted); margin: 0; }

/* ─── CATEGORY GRID ──────────────────────────────────────── */
.un-cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 960px) { .un-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .un-cat-grid { grid-template-columns: repeat(2, 1fr); } }

.un-cat {
  position: relative;
  padding: 22px 20px;
  border-radius: 18px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.un-cat:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(0,0,0,.12); }
.un-cat.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10,10,10,.08);
}
.un-cat-1 { background: var(--c1-bg); }
.un-cat-2 { background: var(--c2-bg); }
.un-cat-3 { background: var(--c3-bg); }
.un-cat-4 { background: var(--c4-bg); }
.un-cat-5 { background: var(--c5-bg); }
.un-cat-6 { background: var(--c6-bg); }
.un-cat-7 { background: var(--c7-bg); }
.un-cat-8 { background: var(--c8-bg); }

.un-cat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.6);
  display: grid; place-items: center;
  font-size: 22px;
}
.un-cat-name {
  font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: -.005em;
}
.un-cat-units {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em;
}
.un-cat-1 .un-cat-units { color: var(--c1-fg); }
.un-cat-2 .un-cat-units { color: var(--c2-fg); }
.un-cat-3 .un-cat-units { color: var(--c3-fg); }
.un-cat-4 .un-cat-units { color: var(--c4-fg); }
.un-cat-5 .un-cat-units { color: var(--c5-fg); }
.un-cat-6 .un-cat-units { color: var(--c6-fg); }
.un-cat-7 .un-cat-units { color: var(--c7-fg); }
.un-cat-8 .un-cat-units { color: var(--c8-fg); }

/* ─── INPUT ROW ──────────────────────────────────────────── */
.un-input-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 640px) { .un-input-row { grid-template-columns: 1fr; } }

.un-field { display: flex; flex-direction: column; gap: 8px; }
.un-field-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.un-input-wrap {
  display: flex; align-items: center;
  background: var(--card-soft); border: 1.5px solid var(--hairline);
  border-radius: var(--r-input); padding: 0 18px;
  transition: border-color .15s, background .15s;
}
.un-input-wrap:focus-within { border-color: var(--ink); background: var(--card-bg); }
.un-input-wrap input {
  flex: 1; background: transparent; border: 0; padding: 16px 8px;
  font-size: 24px; color: var(--ink); font-weight: 700;
  outline: none; text-align: left; min-width: 0;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.un-input-wrap select {
  flex: 1; background: transparent; border: 0; padding: 16px 8px;
  font: inherit; font-size: 15px; color: var(--ink); font-weight: 600;
  outline: none; min-width: 0;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}

/* ─── RESULT GRID (all-units) ────────────────────────────── */
.un-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.un-result {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--card-soft);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.un-result:hover { border-color: var(--ink); background: var(--card-bg); }
.un-result.is-source {
  background: var(--ink);
  border-color: var(--ink);
}
.un-result-unit {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin: 0 0 6px;
}
.un-result.is-source .un-result-unit { color: rgba(255,255,255,.6); }
.un-result-value {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700; color: var(--ink);
  letter-spacing: -.015em; line-height: 1.05;
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.un-result.is-source .un-result-value { color: #fff; }
.un-result-name {
  font-size: 12px; color: var(--muted); margin: 0;
}
.un-result.is-source .un-result-name { color: rgba(255,255,255,.7); }
.un-result-tag {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-pill);
  letter-spacing: .06em; text-transform: uppercase;
  margin-left: 6px;
}
.un-result.is-source .un-result-tag { background: #fff; color: var(--ink); }

/* ─── COMMON CONVERSIONS TABLE ───────────────────────────── */
.un-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .un-quick-grid { grid-template-columns: 1fr; } }
.un-quick {
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--card-soft);
  border: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.un-quick-from {
  font-size: 14px; color: var(--text);
}
.un-quick-from strong { color: var(--ink); font-weight: 700; }
.un-quick-arrow { color: var(--muted); }
.un-quick-to {
  font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ─── HUB: STAT BAR (4 inline stats) ─────────────────────── */
.un-statbar {
  background: var(--card-bg);
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 20px;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 720px) {
  .un-statbar { grid-template-columns: repeat(2, 1fr); gap: 12px 0; }
}
.un-stat-item {
  padding: 4px 24px;
  border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 4px;
}
.un-stat-item:first-child { border-left: 0; padding-left: 4px; }
@media (max-width: 720px) {
  .un-stat-item { padding: 4px 16px; }
  .un-stat-item:nth-child(odd) { border-left: 0; padding-left: 4px; }
}
.un-stat-label {
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; color: var(--muted);
}
.un-stat-value {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.un-stat-unit { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }

/* ─── HUB: EDITORIAL CATEGORY LIST (numbered) ────────────── */
.un-edit-list {
  display: flex;
  flex-direction: column;
}
.un-edit-row {
  display: grid;
  grid-template-columns: 88px 1fr 60px;
  gap: 24px;
  align-items: center;
  padding: 26px 8px;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  position: relative;
  transition: padding .2s;
}
.un-edit-row:first-child { border-top: 0; padding-top: 8px; }
.un-edit-row:hover { padding-left: 16px; }
@media (max-width: 720px) {
  .un-edit-row { grid-template-columns: 60px 1fr; padding: 22px 4px; }
  .un-edit-row > .un-edit-arrow { display: none; }
  .un-edit-row:hover { padding-left: 4px; }
}

.un-edit-num {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.04em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.un-edit-num-dot { font-size: .4em; color: var(--muted); }

.un-edit-body { min-width: 0; }
.un-edit-name {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.un-edit-emoji {
  font-size: 22px;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.un-edit-1 .un-edit-emoji { background: var(--c1-bg); }
.un-edit-2 .un-edit-emoji { background: var(--c2-bg); }
.un-edit-3 .un-edit-emoji { background: var(--c3-bg); }
.un-edit-4 .un-edit-emoji { background: var(--c4-bg); }
.un-edit-5 .un-edit-emoji { background: var(--c5-bg); }
.un-edit-6 .un-edit-emoji { background: var(--c6-bg); }
.un-edit-7 .un-edit-emoji { background: var(--c7-bg); }
.un-edit-8 .un-edit-emoji { background: var(--c8-bg); }

.un-edit-1 .un-edit-num { color: var(--c1-deep); }
.un-edit-2 .un-edit-num { color: var(--c2-deep); }
.un-edit-3 .un-edit-num { color: var(--c3-deep); }
.un-edit-4 .un-edit-num { color: var(--c4-deep); }
.un-edit-5 .un-edit-num { color: var(--c5-deep); }
.un-edit-6 .un-edit-num { color: var(--c6-deep); }
.un-edit-7 .un-edit-num { color: var(--c7-deep); }
.un-edit-8 .un-edit-num { color: var(--c8-deep); }

.un-edit-title {
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.1;
}
.un-edit-units {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 12px;
  letter-spacing: .02em;
}
.un-edit-units strong { color: var(--ink); font-weight: 600; }

.un-edit-preview {
  font-size: 16px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
  border-left: 2px solid var(--hairline);
  padding-left: 14px;
  margin-top: 8px;
}
.un-edit-preview strong {
  color: var(--ink);
  font-weight: 700;
}
.un-edit-preview-divider {
  color: var(--muted);
  margin: 0 8px;
  font-weight: 400;
}

.un-edit-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--card-soft);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background .2s, color .2s, transform .2s;
  flex-shrink: 0;
}
.un-edit-row:hover .un-edit-arrow {
  background: var(--ink);
  color: #fff;
  transform: translateX(4px);
}

/* ─── SEO Q&A GRID ───────────────────────────────────────── */
.un-seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.un-seo-card {
  padding: 16px 18px;
  background: var(--card-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  transition: border-color .15s, background .15s, transform .15s;
}
.un-seo-card:hover {
  border-color: var(--ink);
  background: var(--card-bg);
  transform: translateY(-1px);
}
.un-seo-q {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 6px;
  font-weight: 500;
}
.un-seo-a {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* sub-page cross-link grid */
.un-other-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.un-other-card {
  padding: 16px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, transform .15s;
}
.un-other-card:hover { transform: translateY(-1px); border-color: var(--ink); }
.un-other-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  display: grid; place-items: center;
  font-size: 18px;
}
.un-other-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  letter-spacing: -.005em;
}
.un-other-sub { font-size: 11.5px; color: var(--muted); }

/* hub footer back link badge */
.un-hub-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--card-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
  text-decoration: none;
  margin-bottom: 12px;
}
.un-hub-back:hover { color: var(--ink); border-color: var(--ink); }

/* ─── ACCORDION ──────────────────────────────────────────── */
.un-acc { display: flex; flex-direction: column; gap: 8px; }
.un-acc details {
  background: var(--card-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px; overflow: hidden;
}
.un-acc details[open] { background: var(--card-bg); border-color: var(--ink); }
.un-acc summary {
  padding: 14px 18px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.un-acc summary::-webkit-details-marker { display: none; }
.un-acc summary::after { content: '+'; color: var(--muted); font-size: 18px; font-weight: 400; }
.un-acc details[open] summary::after { content: '−'; }
.un-acc-body {
  padding: 4px 18px 18px;
  font-size: 13.5px; line-height: 1.65; color: var(--text);
}
.un-acc-body p { margin: 0 0 10px; }
.un-acc-body p:last-child { margin: 0; }
.un-acc-body ul { margin: 6px 0 10px 22px; padding: 0; }
.un-acc-body strong { color: var(--ink); }

/* faq + related */
.un-faq-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; }
@media (max-width: 820px) { .un-faq-grid { grid-template-columns: 1fr; } }
.un-related-title {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--muted); margin: 0 0 14px;
}
.un-related-list { list-style: none; padding: 0; margin: 0; }
.un-related-list li {
  padding: 12px 0; border-top: 1px solid var(--hairline);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.un-related-list li:first-child { border-top: 0; padding-top: 4px; }
.un-related-list a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* copy flash */
.un-result.is-copied { animation: copyFlash .6s ease; }
@keyframes copyFlash {
  0%   { background: #FFFBEB; }
  100% { background: var(--card-soft); }
}