/* ============================================================================
   Shared tank profile — /share/tank.php
   ----------------------------------------------------------------------------
   THIS PAGE IS THE SITE'S HANDSHAKE WITH STRANGERS. Somebody posts their tank
   into a forum thread or a Facebook group and a few hundred people who have
   never heard of AquaCalc open it. It was a stack of identical grey boxes with
   a dash in every empty one — legible, and completely forgettable.

   The redesign treats it as what it is: a spec sheet somebody is proud of.
   One signature moment (the vitals band, then the day curve), a clear reading
   order, and nothing on screen that has no data behind it.

   Everything is built from tokens.css. The only literals are the two accent
   washes, which are brand colours at alpha and are commented as such.
   ============================================================================ */

/* ── Page frame ───────────────────────────────────────────────────────────── */
.tk { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px) 64px; }

/* Slim brand bar. Not the site nav: a first-time visitor arriving from a forum
   link needs one obvious way in, not eight. */
.tk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0 16px;
}
.tk-bar-logo { display: flex; align-items: center; text-decoration: none; transition: opacity var(--transition, .15s); }
.tk-bar-logo:hover { opacity: .82; }
.tk-bar-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--btn-primary); color: #fff;                 /* token-ok: on-blue ink */
  padding: 9px 18px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.tk-bar-cta:hover { opacity: .9; color: #fff; }                /* token-ok: on-blue ink */

/* ── Hero ─────────────────────────────────────────────────────────────────────
   The tank's name, set at hero scale, over a soft water-coloured wash. The old
   page opened with a 14px badge and a 2.2rem title on flat background; this one
   opens like a cover. */
.tk-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(88,166,255,.16), transparent 60%),
    radial-gradient(90% 120% at 8% 0%, rgba(29,158,117,.12), transparent 55%),
    var(--bg2);
  padding: clamp(26px, 4.5vw, 40px) clamp(22px, 4vw, 38px);
}
/* A waterline: one hairline of brand gradient along the top edge. */
.tk-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--brand-grad); opacity: .55;
}
.tk-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--blue); background: rgba(88,166,255,.12);
  border: 1px solid rgba(88,166,255,.32); border-radius: var(--radius-pill);
  padding: 4px 12px;
}
.tk-title {
  margin: 14px 0 0; color: var(--text);
  font-size: var(--h-hero); line-height: var(--lh-hero);
  letter-spacing: var(--track-hero); font-weight: var(--fw-heading);
  overflow-wrap: break-word;
}
/* The identity line: how long it has been running, whether it is injected, what
   is over it. Facts a reader wants before any number. */
.tk-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tk-fact {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--bg3); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text2);
}
.tk-fact b { color: var(--text); font-weight: 600; }
.tk-fact.is-co2  { border-color: rgba(63,185,80,.34);  background: rgba(63,185,80,.09);  color: var(--green); }
.tk-fact.is-low  { border-color: rgba(139,148,158,.3); }
.tk-fact-dot { width: 6px; height: 6px; border-radius: var(--radius-round); background: currentColor; flex: none; }

/* ── Vitals band ──────────────────────────────────────────────────────────────
   The signature. Every number the reader came for, at a size they can read
   across a room, in one continuous band rather than a grid of little cards.

   The hairlines are the 1px gap showing the container's background through —
   so the rule between two cells is always exactly one pixel, whatever wraps.

   FLEX, NOT GRID, and that is the other half of it. auto-fit columns leave the last
   row short whenever the cell count is not a multiple of the column count, and
   with the hairlines drawn as gaps that leftover space showed as a patch of
   raw border colour — a visible seam that changed shape with the data. Flex
   items that grow always fill their row, so the band is solid at any count. */
.tk-vitals {
  display: flex; flex-wrap: wrap; gap: 1px; margin-top: 18px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.tk-vital { flex: 1 1 150px; min-width: 0; background: var(--bg2); padding: 18px 18px 16px; }
.tk-vital-l {
  display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.tk-vital-v {
  display: flex; align-items: baseline; gap: 5px; color: var(--text);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 650;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tk-vital-u { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* Colour carries meaning, not decoration: green is the injected-CO2 figure,
   blue the chemistry the CO2 figure is derived from. Everything else is plain. */
.tk-vital.is-co2 .tk-vital-v { color: var(--green); }
.tk-vital.is-key .tk-vital-v { color: var(--blue); }

/* ── Two columns ──────────────────────────────────────────────────────────── */
.tk-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.tk-main, .tk-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.tk-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.tk-card-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 14px; font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--blue);
}
.tk-card-n { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
/* Free text the sharer typed: their fertiliser routine, their notes. Preserved
   line breaks, because a dosing schedule written on four lines is four lines. */
.tk-prose { margin: 0; font-size: 0.9375rem; line-height: var(--lh-body); color: var(--text2); white-space: pre-wrap; overflow-wrap: break-word; }

/* ── Species chips ────────────────────────────────────────────────────────────
   "12 x Cardinal Tetra, 8 x Rummynose Tetra, …" was one long comma-separated
   line that read as raw input. Split into chips the stocking becomes countable
   at a glance, and the quantity — the part people actually compare — gets to be
   a number rather than a word in a sentence. */
.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 8px; border-radius: var(--radius-pill);
  background: var(--bg3); border: 1px solid var(--border);
  font-size: 0.875rem; color: var(--text2);
}
.tk-chip-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--radius-sm);
  background: rgba(88,166,255,.14); color: var(--blue);
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Plants take the site's species accent; livestock keeps the chemistry blue of
   its count badge. Same shape, so the two lists still read as one system. */
.tk-chips.is-plants .tk-chip { border-color: rgba(63,185,80,.22); }
.tk-chips.is-plants .tk-chip-n { background: rgba(63,185,80,.14); color: var(--green); }

/* The adult size on a livestock chip. Quiet and to the right of the name: it
   qualifies the species rather than competing with it, and lines up down the
   list because every chip carries one in the same place. */
.tk-chip-sz {
  margin-left: 2px; padding-left: 9px; border-left: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The estimated figure, and the sentence that keeps it honest. The number is
   allowed to look like a headline; the method note under it is deliberately
   small but present, because a biomass figure with no error bar invites being
   read as a measurement. */
.tk-est { margin: 14px 0 0; font-size: 0.9375rem; color: var(--text2); }
.tk-est b { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-est-gap { color: var(--faint); }
.tk-note { margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--faint); }

/* ── Kit list (setup / equipment) ─────────────────────────────────────────── */
.tk-kit { display: flex; flex-direction: column; }
.tk-kit-row { padding: 11px 0; border-top: 1px solid var(--border); }
.tk-kit-row:first-child { border-top: 0; padding-top: 0; }
.tk-kit-l { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.tk-kit-v { display: block; font-size: 0.9375rem; color: var(--text); line-height: 1.5; overflow-wrap: break-word; }

/* ── Water source blend ───────────────────────────────────────────────────────
   A percentage split is a bar, not a sentence. Tap on the left in amber, RO on
   the right in blue, each labelled inside when it has the room. */
.tk-blend { display: flex; height: 34px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.tk-blend-part {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.tk-blend-tap { background: rgba(210,153,34,.18); color: var(--amber); }
.tk-blend-ro  { background: rgba(88,166,255,.16); color: var(--blue); }
.tk-tap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 14px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.tk-tap-cell { background: var(--bg2); padding: 10px 12px; }
.tk-tap-l { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.tk-tap-v { display: block; margin-top: 3px; font-size: 0.9375rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── The day curve ────────────────────────────────────────────────────────────
   The pH session log was a three-column table of numbers — the one dataset on
   the page with a shape, printed as a list. Drawn, it says what the numbers
   cannot: how fast CO2 comes up after the solenoid opens, whether it holds
   through the photoperiod, and where it lands overnight. */
.tk-chart { width: 100%; height: auto; display: block; overflow: visible; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.tk-leg { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--muted); }
.tk-leg-key { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.tk-leg-key.is-co2 { background: var(--green); }
.tk-leg-key.is-ph  { background: var(--blue); }
.tk-chart-grid { stroke: var(--border); stroke-width: 1; }
.tk-chart-axis { fill: var(--faint); font-size: 11px; font-family: var(--font-sans); }
.tk-chart-co2-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tk-chart-ph-line  { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; stroke-linecap: round; }
.tk-chart-dot { fill: var(--bg2); stroke: var(--green); stroke-width: 2; }
.tk-chart-peak { fill: var(--green); font-size: 11px; font-weight: 700; font-family: var(--font-sans); }

/* ── Closing call to action ───────────────────────────────────────────────── */
.tk-cta {
  margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  padding: clamp(24px, 4vw, 34px) clamp(22px, 4vw, 32px);
  border: 1px solid rgba(88,166,255,.28); border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(29,158,117,.14), transparent 62%),
    radial-gradient(80% 140% at 0% 100%, rgba(88,166,255,.14), transparent 60%),
    var(--bg2);
}
.tk-cta-t { flex: 1 1 260px; min-width: 0; }
.tk-cta-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.tk-cta-h { margin: 8px 0 6px; font-size: var(--h4); font-weight: 650; color: var(--text); line-height: 1.25; }
.tk-cta-p { margin: 0; font-size: 0.9375rem; line-height: var(--lh-body); color: var(--text2); }
.tk-cta-a { display: flex; flex-direction: column; gap: 10px; flex: none; }
.tk-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-primary); color: #fff;                 /* token-ok: on-blue ink */
  font-size: var(--fs-base); font-weight: 600; text-decoration: none;
  border-radius: var(--radius-md); padding: 13px 24px; white-space: nowrap;
}
.tk-cta-btn:hover { opacity: .9; color: #fff; }                /* token-ok: on-blue ink */
.tk-cta-tools { font-size: var(--fs-xs); color: var(--faint); text-align: center; }
.tk-cta-tools a { color: var(--blue); text-decoration: none; }

.tk-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.tk-foot img { opacity: .5; }
.tk-foot-m { font-size: var(--fs-xs); color: var(--faint); }
.tk-foot-m a { color: var(--blue); text-decoration: none; }

/* ── No data ──────────────────────────────────────────────────────────────── */
.tk-empty { max-width: 460px; margin: 60px auto; text-align: center; }
.tk-empty-i {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: var(--radius-lg);
  display: grid; place-items: center; color: var(--blue);
  background: rgba(88,166,255,.1); border: 1px solid rgba(88,166,255,.28);
}
.tk-empty h1 { margin: 0 0 8px; font-size: var(--h4); font-weight: 650; color: var(--text); }
.tk-empty p { margin: 0; font-size: 0.9375rem; line-height: var(--lh-body); color: var(--text2); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tk-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tk-vital { flex-basis: 130px; padding: 14px 14px 13px; }
  .tk-card { padding: 17px 16px; }
  .tk-hero { border-radius: var(--radius-md); }
  .tk-cta { flex-direction: column; align-items: stretch; }
  .tk-cta-a { width: 100%; }
  .tk-cta-btn { width: 100%; min-height: 48px; }
  .tk-bar-cta { min-height: 44px; }

  /* The chart keeps its 720-unit viewBox at every width, so on a phone it is
     drawn at about half scale and 11-unit axis type lands near 5px on screen.
     Labels and strokes grow in user units to come back out readable. */
  .tk-chart-axis, .tk-chart-peak { font-size: 19px; }
  .tk-chart-co2-line { stroke-width: 3.5; }
  .tk-chart-ph-line { stroke-width: 3; stroke-dasharray: 7 5; }
}

/* ── Print ────────────────────────────────────────────────────────────────────
   People take these to a shop or a club meeting. Ink-friendly: the washes and
   the calls to action come off, the structure stays. */
@media print {
  .tk-bar, .tk-cta, .tk-foot { display: none !important; }
  .tk { max-width: none; padding: 0; }
  .tk-hero, .tk-card, .tk-vital, .tk-tap-cell { background: none !important; }
  .tk-hero::before { display: none; }
  /* token-ok: print needs a physical mid-grey, not a dark-theme surface token */
  .tk-hero, .tk-card, .tk-vitals, .tk-tap { border-color: #999 !important; break-inside: avoid; }
  .tk-vitals, .tk-tap { background: #999 !important; }
  .tk-cols { display: block; }
  .tk-card { margin-top: 14px; }
}