/* Theme for bodygraph.hd.in.ua.
 *
 * Replaces integrations/mytransformation/app/public/assets/bodygraph-form.css.
 * Every class name, state and SVG hook is preserved -- only presentation
 * changes, so bodygraph-form.js keeps working untouched.
 *
 * Palette: warm paper from hd.in.ua so the subdomain reads as the same project,
 * with a COLD accent. That is not a preference: the design brief requires the
 * bodygraph to be the only source of saturated colour on the page, and the
 * centre fills are already four warm accents. A warm interface accent competes
 * with the chart.
 *
 * The chart container stays neutral white for the same reason -- warm paper
 * under warm centre fills eats their contrast.
 */

/* Literata, the same family the main site uses -- there is no npm on the PHP
 * host, so the four subsets we actually need are served from ./fonts/.
 * SIL Open Font License; see fonts/OFL.txt. */
@font-face {
  font-family: Literata;
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./fonts/literata-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Literata;
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./fonts/literata-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Literata;
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./fonts/literata-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Literata;
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./fonts/literata-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --paper: #f2eee3;
  --paper-deep: #e7dfcf;
  --surface: #fffdf8;
  --ink: #181b18;
  --ink-muted: #5c5f5a;
  --line: #d5cdbb;
  --line-strong: #b9af99;

  /* Cold accent, from the design tokens: oklch(0.52 0.12 224). */
  --accent: #0f7490;
  --accent-soft: rgb(15 116 144 / 12%);
  --on-accent: #fffdf8;

  --warn-line: #b8860b;
  --warn-bg: #fdf6e3;
  --danger: #a3311f;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --font-text: Literata, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  font-family: var(--font-text);
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }

.page-shell { position: relative; width: min(1480px, calc(100% - 40px)); margin: 34px auto 80px; }
.intro { max-width: 720px; margin-bottom: 26px; }

/* Header. This page is the only entry point to the calculator, so it carries a
   way back into the reference site rather than standing on its own. */
.site-header { display: flex; gap: clamp(1rem, 4vw, 3rem); align-items: center; width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding-block: 16px; border-bottom: 1px solid var(--line); }
.site-brand { display: inline-flex; gap: .6rem; align-items: center; color: var(--ink); text-decoration: none; }
/* Not smaller: the mark is layered translucent petals with thin gold lines and
   below roughly 44px it collapses into a smudge. */
.site-brand img { width: 46px; height: 46px; object-fit: contain; }
/* The site name Google is told to use for this hostname, shown once so the
   name in the WebSite node is visible on the page. The link still points home:
   only "HD.in.ua" is clickable, "Bodygraph" names where you already are. */
.site-brand-group { display: inline-flex; gap: .45rem; align-items: center; margin: 0; }
.site-brand-suffix { color: var(--ink-muted); font-size: 1.02rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.site-brand span { font-size: 1.02rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.site-nav { display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2.2vw, 1.8rem); margin-right: auto; }
.site-nav a { color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.site-nav a:hover { color: var(--accent); }

.language-switch { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--ink-muted); background: transparent; font-family: var(--font-mono); font-size: 13px; font-weight: 500; text-decoration: none; }
.language-switch a:hover { background: var(--paper); }
.language-switch a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.language-switch a[aria-current="page"] { color: var(--on-accent); background: var(--ink); }

.eyebrow { margin: 0 0 10px; color: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.02em; }
.intro > p:last-child { color: var(--ink-muted); font-size: 17px; line-height: 1.6; }

/* Hairline borders instead of shadows -- an instrument, not a card stack. */
.chart-form { position: relative; z-index: 3; display: grid; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.field, .field label { display: grid; gap: 8px; }
.field label, legend { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.field small { color: var(--ink-muted); font-size: 13px; text-transform: none; letter-spacing: 0; }
.field-row { display: grid; grid-template-columns: minmax(330px, 1.5fr) minmax(280px, 1fr); gap: 18px; max-width: 1000px; }

.birth-date-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.birth-date-field legend { margin-bottom: 8px; padding: 0; }
.date-parts { display: grid; grid-template-columns: minmax(74px, .7fr) minmax(142px, 1.45fr) minmax(96px, 1fr); gap: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Dates, times and numbers are data: monospace, same as inside the chart SVG. */
input, select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-family: var(--font-mono); }
.city-field input { font-family: var(--font-text); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.city-field { position: relative; }
.birth-time-field { align-content: start; }
.time-parts { display: flex; align-items: center; gap: 8px; }
.time-parts select { min-width: 72px; }

.city-results { position: absolute; z-index: 20; top: 78px; right: 0; left: 0; max-height: 300px; margin: 0; padding: 4px; overflow: auto; list-style: none; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.city-results li { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.city-results li:hover, .city-results li[aria-selected="true"] { background: var(--accent-soft); }
select[hidden] { display: none; }

/* Ambiguous local time during a DST fold: the API answers 409 with the valid
   offsets and the reader picks one. Warn, do not alarm. */
.offset-choice { margin: 0; padding: 14px; border: 1px solid var(--warn-line); border-radius: var(--radius-md); background: var(--warn-bg); }
.offset-choice > div { display: flex; gap: 20px; margin-top: 10px; }
.offset-choice label { display: flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; }
.offset-choice input { width: auto; min-height: auto; }

button[type="submit"] { justify-self: start; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--radius-sm); color: var(--on-accent); background: var(--accent); font-weight: 600; cursor: pointer; }
button[type="submit"]:hover { filter: brightness(1.08); }
button[type="submit"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button[disabled] { opacity: .55; cursor: wait; }

.form-status { min-height: 22px; margin: 0; color: var(--ink-muted); }
.form-status.is-error { color: var(--danger); }

.result { margin-top: 34px; overflow-x: auto; scroll-margin-top: 20px; }

/* Hairline table: the gap is the border colour showing through. */
.summary { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 1px; margin: 0 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); }
.summary > * { margin: 0; padding: 11px 14px; background: var(--surface); }
.summary dt { color: var(--ink-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.summary dd { font-weight: 600; }

/* Neutral white behind the chart: the centre fills carry the only saturated
   colour on the page and warm paper would take contrast away from them. */
.chart-shell { min-width: 1120px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.chart-shell > svg { display: block; width: 100%; height: auto; }

/* Secondary weight: the primary action on the page is building the chart, not
   saving it. Outline rather than fill, so it does not compete with submit. */
.result-actions { margin: 14px 0 0; }
.download-png { min-height: 42px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-weight: 600; cursor: pointer; }
.download-png:hover { border-color: var(--accent); color: var(--accent); }
.download-png:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.download-png[disabled] { opacity: .55; cursor: wait; }

/* Chart interaction hooks -- geometry and state classes come from the renderer,
   left exactly as they were. */
.chart-shell > svg .hover-entity { cursor: help; transition: opacity 140ms ease, filter 140ms ease; }
.chart-shell > svg [data-channel] > path[stroke-opacity="0"] { pointer-events: stroke; }
.chart-shell > svg [data-integration-spoke] { pointer-events: none; }
.chart-shell > svg .integration-spoke-visual { transition: opacity 140ms ease, filter 140ms ease; }
.chart-shell > svg.is-exploring .integration-spoke-visual { opacity: .16; }
.chart-shell > svg.is-exploring .integration-spoke-visual.is-related-integration { opacity: 1; }
.chart-shell > svg.is-exploring .hover-entity { opacity: .16; }
.chart-shell > svg.is-exploring .hover-entity.is-related { opacity: 1; }
.chart-shell > svg.is-exploring .hover-entity.is-related-channel { opacity: .48; }
.chart-shell > svg.is-exploring .hover-entity[data-center-state]:not(.is-related-center):not(.is-primary) { opacity: 1; filter: saturate(.22) brightness(1.1); }
.chart-shell > svg.is-exploring .hover-entity.is-related-center { opacity: 1; filter: drop-shadow(0 0 7px rgb(15 116 144 / 55%)); }
.chart-shell > svg.is-exploring .hover-entity.is-primary { opacity: 1; filter: drop-shadow(0 0 5px rgb(184 134 11 / 85%)); }

.chart-tooltip { position: fixed; z-index: 50; width: max-content; max-width: 320px; padding: 10px 13px; border: 1px solid rgb(255 253 248 / 22%); border-radius: var(--radius-md); color: var(--surface); background: rgb(24 27 24 / 95%); pointer-events: none; }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong, .chart-tooltip span { display: block; }
.chart-tooltip strong { margin-bottom: 3px; }
.chart-tooltip span { color: #cfd2cb; font-size: 13px; }

/* Closing text: what a bodygraph is, why exact time matters, what happens to the
   data, where the limits are. Measure is narrower than the chart on purpose --
   the chart wants width, prose does not. */
.site-footer { margin-top: 64px; padding-block: 46px 66px; border-top: 1px solid var(--line); background: var(--paper-deep); }
.prose { width: min(720px, calc(100% - 40px)); margin: 0 auto; }
.prose h2 { margin: 1.9em 0 .5em; font-size: 1.32rem; letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1em; line-height: 1.66; }
.prose a { color: var(--accent); }
/* Where to go with each line of the summary. Wider spacing than a plain list:
   these are four separate destinations, not a run of items. */
.next-steps { margin: 0; padding-left: 1.15em; }
.next-steps li { margin-bottom: .85em; line-height: 1.6; }
.next-steps strong { font-weight: 600; }

/* The empty bodygraph inside the closing text. Held to a readable width rather
   than the full column: it is an illustration of the terms above it, not the
   result — the real chart is rendered in the result section. */
.prose-figure { margin: 1.4em 0 1.8em; text-align: center; }
.prose-figure img {
  width: min(100%, 420px);
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.prose-figure figcaption {
  margin-top: .7em;
  color: var(--ink-soft);
  font-size: .87rem;
  line-height: 1.5;
  text-align: left;
}

.prose-more { margin-top: 2.2em; font-weight: 600; }
.prose-more a { text-decoration: none; }
.prose-more a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 24px, 1480px); margin-top: 24px; }
  .site-header { flex-wrap: wrap; width: min(100% - 24px, 1480px); row-gap: .8rem; }
  .site-nav { order: 3; width: 100%; }
  .field-row, .summary { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .date-parts { grid-template-columns: minmax(66px, .7fr) minmax(126px, 1.4fr) minmax(88px, 1fr); }
}

/* Bot promo. The strip above the form stays one row on desktop so the submit
   button keeps its place near the fold; the card after the chart has room. */
.bot-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; margin: 0 0 22px; padding: 16px 20px; border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--accent-soft); }
.bot-strip-lead { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.bot-strip-text { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.5; }
.bot-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: var(--radius-sm); color: var(--on-accent); background: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bot-cta:hover { filter: brightness(1.08); }
.bot-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bot-card { display: grid; gap: 12px; max-width: 760px; margin-top: 28px; padding: 24px; border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--accent-soft); }
.bot-card > * { margin: 0; }
.bot-card-label { color: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.bot-card-heading { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; }
.bot-card-text { font-size: 17px; line-height: 1.6; }
.bot-card-note { color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.bot-card-note code { font-family: var(--font-mono); font-size: .92em; }

@media (max-width: 760px) {
  .bot-strip { grid-template-columns: 1fr; padding: 14px 16px; }
  .bot-strip .bot-cta { justify-self: start; }
  .bot-card { padding: 18px; }
}