/* ==========================================================================
   Unit pages.

   A converter page needs convert.css for its drop zone, its progress line and
   its result buttons. A unit page has none of those, so it loads this instead
   — the whole of it is the few things style.css does not already cover.
   ========================================================================== */

/* The tool card sits in .contact__grid beside the panel, like the converter's
   does, but its content is short. Without this it would stretch to the panel's
   height and leave the field floating in the middle of an empty card. */
.unit-tool { align-self: start; }

/* The heading of a panel — "Convert your value", "Common values". A converter
   page gets this from convert.css, which a unit page has no reason to load, so
   the rule is repeated here rather than the class borrowed from a stylesheet
   that is not on the page. It is deliberately the same size: the two kinds of
   page should not look like they were designed apart.

   It also has to be this size. The next tier down is body text at 15px, and a
   heading only a fifth larger reads as bold text, not as a heading — which is
   what "Common values" looked like sitting on .bridge__title above a table of
   numbers. */
.unit__heading {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-block: 0 1.35rem;
}

/* The unit beside the figure. On the home page this slot is a <select>, so it
   borrows .unit select's look; here the pair is fixed by the page itself and a
   dropdown would be a lie — there is nothing to choose. Same size and colour,
   no caret, no pointer. */
.unit-tool__sym {
  display: block;
  padding-block: .3rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
}

/* Formulas are notation, not prose: they read the same in every language and
   must not be re-ordered by the paragraph direction in Arabic or Urdu. */
.unit-tool__formula {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* The swap control. On the home page it is a button that exchanges two
   dropdowns; here the reverse conversion is a page of its own, so it is a
   link. .eq__mark already gives it the circle, the centring and the hover
   flip — and it centres with `display: grid`, on which the two glyphs depend
   to sit in the same cell. So this must not touch display at all. */
a.eq__mark { text-decoration: none; color: inherit; }

/* Six of these conversions were asked for in one direction only, so there is
   no page to swap to. The mark stays, because the layout is built around it,
   but it stops pretending to be a control: no pointer, no lift, and the "="
   does not flip away to reveal an arrow that leads nowhere. */
.eq__mark--static { cursor: default; }
.eq__mark--static:hover { border-color: var(--rule); transform: none; }
.eq__mark--static:hover .eq__glyph--is { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- the table */

.unit-table { margin-block-start: 0; }

.unit-table__grid {
  inline-size: 100%;
  margin-block-start: clamp(1rem, 2.5vw, 1.4rem);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.unit-table__grid th,
.unit-table__grid td {
  padding: .6rem .75rem;
  border-block-end: 1px solid var(--rule-soft);
  text-align: end;
}

/* The first column is the value someone came in with, the second is what they
   came for. Reading order, not numeric alignment, decides which edge each one
   hugs — so the first sits at the start of the line in both directions. */
.unit-table__grid th:first-child,
.unit-table__grid td:first-child { text-align: start; }

.unit-table__grid th {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
  border-block-end-color: var(--rule);
}

.unit-table__grid td { font-weight: 600; color: var(--cocoa); }
.unit-table__grid tr:last-child td { border-block-end: 0; }

/* Two columns of numbers do not need the full width of a desktop panel; past
   that they drift apart until the eye stops pairing them. */
@media (min-width: 60rem) {
  .unit-table__grid { inline-size: min(100%, 34rem); }
}

/* The section between the tool and the bridge: the band above already carries
   the gap, so this only needs the space below. */
.section--table { padding-block-start: 0; }

/* ------------------------------------------------------------ fusele orare */

/* Campul de ora. `type="time"` aduce ceasul sistemului, ceea ce pe telefon e
   mult mai bun decat orice am desena noi -- dar vine si cu latimea lui, care
   nu tine de continut. Aici randul e latimea cartonasului, ca la celelalte. */
.zone__input {
  inline-size: 100%;
  font-variant-numeric: tabular-nums;
}
.zone__input::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.zone__input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* „ziua dinainte" / „ziua urmatoare". Mai mic decat ora si in culoarea
   secundara: e o lamurire lipita de un numar, nu un al doilea numar. */
.zone__day {
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--cocoa-soft);
  white-space: nowrap;
}

/* ==========================================================================
   Paginile de valori — px/rem/em si hex/rgb/hsl
   ========================================================================== */

/* Marimea de baza. Nu e a treia cifra mare a paginii, e un reglaj de care
   depinde raspunsul: mai mic decat cele doua cifre, si asezat sub ele, acolo
   unde te uiti dupa ce ai citit rezultatul si te intrebi „fata de ce?". */
.value__base {
  display: flex; align-items: center; gap: .6rem;
  margin-block-start: clamp(1rem, 2.5vw, 1.4rem);
  flex-wrap: wrap;
}
.value__base label {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cocoa-soft);
}
.value__base-input {
  inline-size: 5.5rem;
  padding: .4rem .6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm, 10px);
  background: var(--cream-lift);
  font: inherit; font-weight: 700;
  color: var(--cocoa);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.value__base-input:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }
.value__base-sym { font-size: .85rem; font-weight: 600; color: var(--cocoa-soft); }

/* Pata de culoare. Una singura, pe toata latimea: cele doua scrieri sunt
   aceeasi culoare, iar doua patrate alaturate ar spune ca sunt doua. */
.value__swatch {
  margin-block-start: clamp(1rem, 2.5vw, 1.4rem);
  display: grid; gap: .55rem;
}
.value__chip {
  display: block;
  block-size: clamp(3rem, 9vw, 4.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm, 10px);
  /* Tabla de sah dedesubt: fara ea, o culoare pe jumatate transparenta arata
     ca una opaca mai deschisa, si nu s-ar vedea deloc ca are transparenta. */
  background-color: transparent;
  background-image:
    linear-gradient(45deg, var(--rule-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--rule-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--rule-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--rule-soft) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
/* RAL: spre un cod, doua culori alaturi -- a cititorului si cea mai apropiata
   vopsea RAL --, cu nota pe toata latimea, dedesubt. */
.value__swatch--pair { grid-template-columns: 1fr 1fr; }
.value__swatch--pair .value__chip-note { grid-column: 1 / -1; }
.value__chip-note {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .06em;
  color: var(--cocoa-soft);
}

/* Campul de culoare poarta cifre si litere latine in orice limba, deci nu se
   rastoarna in araba si nu se aliniaza la dreapta. */
.value__in { inline-size: 100%; direction: ltr; unicode-bidi: isolate; }