/* ===========================================================================
   EasyCalculatorSmart — Height comparison chart.

   LOADED ONLY ON /height-comparison/ and its four translations, through
   $page['page_css'] in the template. Nothing here reaches another page,
   and every selector is prefixed .hc- so nothing here could.

   It exists as its own file rather than as a block in main.css because
   the chart is a scrolling SVG with a ruler, a floor, a tooltip and a
   figure per person — a few hundred lines that one URL uses and that
   fifty-two other calculators would otherwise download.

   Colours come from the site's own tokens, so the chart follows the
   light and dark themes without knowing which one it is in. The one
   exception is a person's colour, which is theirs and is set inline.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   LAYOUT

   A control panel and the chart. The chart is the hero, so it takes
   whatever the panel does not, and the panel stops growing at 380px.
   --------------------------------------------------------------------------- */

.hc-app {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.25rem;
}

@media (max-width: 1023px) {
  .hc-app { grid-template-columns: minmax(0, 1fr); }
}

.hc-panel,
.hc-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}

.hc-stage { padding: 1.25rem 1.25rem 1rem; }

.hc-panel-title,
.hc-stage-title {
  margin: 0 0 .25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.hc-stage-sub,
.hc-panel-sub {
  margin: 0 0 1rem;
  color: var(--text-faint);
  font-size: .875rem;
  line-height: 1.5;
}

.hc-panel + .hc-panel { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------------
   THE FORM
   --------------------------------------------------------------------------- */

.hc-fields { display: grid; gap: 1rem; }

.hc-height-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
}

.hc-height-row .field { margin: 0; }

.hc-unit-suffix {
  display: inline-block;
  margin-inline-start: .375rem;
  color: var(--text-faint);
  font-size: .8125rem;
}

/* Colour: seven swatches and a native picker beside them. */
.hc-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.hc-swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 9px;
  background: currentColor;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.hc-swatch:hover { transform: translateY(-2px); }

.hc-swatch[aria-pressed="true"] {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface) inset;
}

.hc-swatch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The native picker, sized to sit in the row as an eighth swatch. */
.hc-color-input {
  width: 42px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
}

.hc-color-input::-webkit-color-swatch-wrapper { padding: 3px; }
.hc-color-input::-webkit-color-swatch { border: 0; border-radius: 6px; }
.hc-color-input::-moz-color-swatch { border: 0; border-radius: 6px; }

.hc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 1.125rem;
}

.hc-actions .btn-primary { flex: 1 1 auto; }

/* An edit in progress is visibly a different thing from an addition. */
.hc-editing .hc-fields { position: relative; }

.hc-editing::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

form.hc-editing { position: relative; padding-inline-start: .875rem; }

/* ---------------------------------------------------------------------------
   THE PEOPLE LIST
   --------------------------------------------------------------------------- */

.hc-people-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .625rem;
}

.hc-people-head h2 { margin: 0; font-size: 1rem; font-weight: 700; }

.hc-count-pill {
  padding: .0625rem .5rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--text-faint);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.hc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.hc-person {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-alt);
}

.hc-person.is-editing {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.hc-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface) inset;
}

.hc-dot-sm {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-inline-end: .4375rem;
  vertical-align: baseline;
}

.hc-person-text { flex: 1 1 auto; min-width: 0; display: grid; }

.hc-person-name {
  font-weight: 600;
  font-size: .9375rem;
  overflow-wrap: anywhere;
}

.hc-person-meta {
  color: var(--text-faint);
  font-size: .8125rem;
}

.hc-person-actions { flex: none; display: flex; gap: .25rem; }

.hc-icon-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: .8125rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.hc-icon-btn:hover {
  background: var(--surface-sunk);
  color: var(--text);
}

.hc-icon-btn-danger { font-size: 1.125rem; }

.hc-icon-btn-danger:hover {
  border-color: var(--bad-line);
  background: var(--bad-bg);
  color: var(--bad-fg);
}

.hc-icon-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.hc-empty-note {
  margin: 0;
  padding: .875rem;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--text-faint);
  font-size: .875rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   CHART TOOLBAR
   --------------------------------------------------------------------------- */

.hc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .875rem;
}

.hc-toolbar-group {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.hc-toolbar-label {
  color: var(--text-faint);
  font-size: .8125rem;
}

/* A two-way switch built on real radios, so it works from the keyboard
   with no script and keeps its state if the script never arrives. */
.hc-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-sunk);
}

.hc-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hc-switch label {
  padding: .25rem .75rem;
  border-radius: 999px;
  color: var(--text-soft);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.hc-switch input:checked + label {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.hc-switch input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   THE CHART

   --hc-plot is the drawable height in pixels. The script reads it and
   turns it into the one scale every figure is drawn at, which is why
   the responsive sizes live here rather than in JavaScript: a media
   query is the right tool for "how tall is the chart on a phone".
   --------------------------------------------------------------------------- */

.hc-chart {
  --hc-plot: 460px;
  --hc-gutter: 58px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--surface) 55%, var(--surface-alt) 100%);
  overflow: hidden;
}

@media (max-width: 1279px) { .hc-chart { --hc-plot: 420px; } }
@media (max-width: 767px)  { .hc-chart { --hc-plot: 360px; --hc-gutter: 50px; } }
@media (max-width: 479px)  { .hc-chart { --hc-plot: 320px; --hc-gutter: 46px; } }

/* The ONLY thing on the page allowed to scroll sideways. The page
   itself never does; a chart with twenty people on it does. */
.hc-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* The chart's geometry is a measurement, not a sentence: the ruler
     belongs at the reading-independent left in every language, and
     mirroring it in Arabic would mirror the axis with it. */
  direction: ltr;
}

/* max-width: none overrides the site-wide `svg { max-width: 100% }`.
   Without it a twenty-person chart is squeezed to the width of its
   container instead of scrolling — which shrinks every figure, which
   is the one thing this page must not do. */
.hc-svg {
  display: block;
  flex: none;
  max-width: none;
}

.hc-gridline {
  stroke: var(--line);
  stroke-width: 1;
}

.hc-gridline.is-major { stroke: var(--line-strong); }

.hc-tick {
  fill: var(--text-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.hc-tick.is-major { fill: var(--text); font-weight: 600; }

.hc-axis-unit {
  fill: var(--text-faint);
  font-size: 11px;
  letter-spacing: .02em;
}

.hc-floor-band { fill: var(--surface-sunk); }

.hc-baseline {
  stroke: var(--line-strong);
  stroke-width: 2;
}

.hc-label-name {
  fill: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.hc-label-value {
  fill: var(--text-faint);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.hc-figure { cursor: pointer; }

.hc-figure .hc-figure-body,
.hc-figure .hc-figure-label {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.hc-figure .hc-model {
  transition: opacity .3s ease, filter .2s ease;
}

.hc-figure:hover .hc-model,
.hc-figure:focus-visible .hc-model {
  filter: brightness(1.12) drop-shadow(0 3px 10px rgba(0, 0, 0, .22));
}

.hc-figure:focus { outline: none; }

.hc-figure:focus-visible .hc-hit {
  fill: var(--accent-soft);
  fill-opacity: .55;
  stroke: var(--focus);
  stroke-width: 2;
  rx: 12;
}

/* Entry and exit. Transform on a group, so it composites rather than
   reflowing, and short enough not to get in the way of a fast typist. */
.hc-figure {
  opacity: 1;
  transition: opacity .28s ease;
}

.hc-figure.hc-enter {
  opacity: 0;
}

.hc-figure.hc-enter .hc-figure-body,
.hc-figure.hc-enter .hc-figure-label {
  transition: none;
}

.hc-figure.hc-exit {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hc-figure,
  .hc-figure .hc-figure-body,
  .hc-figure .hc-figure-label,
  .hc-figure .hc-model {
    transition: none;
  }

  /* The figures still have to MOVE — their position is the data. What
     goes is the travel between two positions, which the line above
     removes, and the decorative lift on the swatches and chips below.
     !important because the hover rules are more specific. */
  .hc-swatch:hover,
  .hc-quick:hover {
    transform: none !important;
  }
}

/* The empty state: two silhouettes of different heights, which is the
   page explaining itself without anybody typing anything. */
.hc-chart-empty {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.hc-chart-empty svg { color: var(--line-strong); }

.hc-chart-empty h3 { margin: .25rem 0 0; font-size: 1.0625rem; }

.hc-chart-empty p {
  margin: 0;
  max-width: 34ch;
  color: var(--text-faint);
  font-size: .9375rem;
}

/* ---------------------------------------------------------------------------
   TOOLTIP
   --------------------------------------------------------------------------- */

.hc-tip {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: .0625rem;
  padding: .5rem .625rem;
  transform: translate(-50%, -100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: .8125rem;
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}

.hc-tip.is-on {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 6px));
}

.hc-tip strong { font-size: .875rem; }
.hc-tip span { color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  .hc-tip { transition: none; }
}

/* ---------------------------------------------------------------------------
   DIFFERENCE
   --------------------------------------------------------------------------- */

.hc-diff {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  background: var(--accent-soft);
  text-align: center;
}

.hc-diff-lead {
  margin: 0;
  color: var(--text-soft);
  font-size: .9375rem;
}

.hc-diff-value {
  display: block;
  margin: .25rem 0 0;
  color: var(--accent-strong, var(--accent));
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hc-diff-sub {
  display: block;
  color: var(--text-faint);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

.hc-diff-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem 1.5rem;
  margin: .875rem 0 0;
  padding: .75rem 0 0;
  border-top: 1px solid var(--accent-line);
  color: var(--text-soft);
  font-size: .875rem;
  list-style: none;
}

.hc-diff-pair li { margin: 0; }

/* ---------------------------------------------------------------------------
   QUICK COMPARE
   --------------------------------------------------------------------------- */

.hc-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .625rem;
}

.hc-quick {
  padding: .3125rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.hc-quick:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
}

.hc-quick:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   SUMMARY TABLE
   --------------------------------------------------------------------------- */

.hc-summary { margin-top: 1.5rem; }

.hc-summary th[scope="row"] { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 559px) {
  /* Cards rather than a squeezed grid. The header text is carried on
     each cell so a value never loses the label that explains it. */
  .hc-summary table,
  .hc-summary tbody,
  .hc-summary tr,
  .hc-summary td,
  .hc-summary th { display: block; }

  /* A caption on a table that is no longer a table shrink-wraps to a
     couple of words wide. It has to be told it is a block of its own. */
  .hc-summary caption {
    display: block;
    width: 100%;
    text-align: start;
  }

  .hc-summary thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .hc-summary tr {
    margin-bottom: .625rem;
    padding: .75rem .875rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-alt);
  }

  .hc-summary th[scope="row"] {
    padding: 0 0 .375rem;
    border: 0;
    font-size: 1rem;
  }

  .hc-summary td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .1875rem 0;
    border: 0;
    text-align: start;
    font-size: .875rem;
  }

  .hc-summary td::before {
    content: attr(data-label);
    color: var(--text-faint);
  }
}

/* ---------------------------------------------------------------------------
   RTL

   The chart itself is deliberately NOT mirrored — see .hc-scroll. What
   is mirrored is the page furniture around it, and that the stylesheet
   gets for free from logical properties. This block exists only for
   the two places a physical value was unavoidable.
   --------------------------------------------------------------------------- */

[dir="rtl"] .hc-tip { direction: rtl; text-align: right; }
[dir="rtl"] .hc-diff-pair { direction: rtl; }