/* Hallmark · shape: Map / Diagram · genre: atmospheric · theme: Midnight + Vantage (by request: Midnight ground and surfaces, Vantage face, corner ticks and lime signal) · job: hire · draw: f4265c
 * hero: Corridor · nav: masthead · footer: colophon block · imagery: 24 product screens built in the products' own looks, demo photos of goods, system map · signature: the system map, each product lights its own links
 * motion: by request, each product slide deck (МИС, ЛИМС, CMS, B2B-портал) changes by itself every 3s, each screen arrives the way it does in the product (drawer from the right, popover and modal rising), transform and opacity only, paused off screen and with a pause button; nothing else loops
 * axes: dark/grotesk-sans/cool · posture: full-palette (field midnight, signal azure on the one primary, seal lime only on what the map lights) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the corridor hero has no picture; the map starts at the fold so the first scroll lands on the signature */
/* Hallmark · waive 84 · four product screens built in slots, user chose built over captured · the MIS stand holds patient records, so MIS, LIMS, CMS and B2B screens are built from code fields with sample data */
/* Hallmark · answered F4 · the hero action and the form submit are one action, заказать показ; the filled segment is the Midnight chosen state, not a button */
/* Hallmark · answered F1 · Mona Sans has no Cyrillic, so the Midnight display face is replaced by Geologica, the Vantage face, and the expanded width is dropped */
/* Hallmark · waive 24b · mis/frontend/src/features/visitsChessboard/dayCell.tsx sets chips to 3px 6px 3px 7px and the shell inset to 14px · the product screens keep the real paddings of МИС, matching it is their point */
/* Hallmark · waive 3 · dayCell.tsx draws a 3px left edge in the status colour · that edge is how МИС marks status */
@import url("./tokens.css");
@import url("./base.css");
@import url("./mis.css");
@import url("./rp.css");

/* ---------- shared ---------- */
body { font-weight: 300; font-variation-settings: "SHRP" 0; }
h1, h2, h3 { font-variation-settings: "SHRP" 100; }
h3 { font-weight: 400; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.muted { color: var(--color-muted); }
.lead { color: var(--color-ink-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); background: none; color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-focus); }
.btn--line { border-color: var(--color-rule-2); }
.btn--line:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }

.ticks { position: relative; }
.ticks::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--rule-hair) solid var(--color-rule-2); -webkit-mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick)); mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick)); }

.section { padding-block: var(--section-gap) 0; }
.section--l { padding-top: var(--section-gap-l); }
.section--first { padding-top: 0; }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / 7; }
.head .lead { grid-column: 8 / 13; }

/* ---------- nav: masthead ---------- */
.mast { border-bottom: var(--rule-hair) solid var(--color-rule); }
.mast .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 72px; }
.mast__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.mast__links a { color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-xs); white-space: nowrap; }
@media (max-width: 72rem) { .mast__links li:nth-child(n+3) { display: none; } }
.mast__links a:hover { color: var(--color-ink); }
.wordmark { font-size: var(--text-xl); font-weight: 400; font-variation-settings: "SHRP" 100; letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; }
.mast__act { justify-self: end; min-height: 44px; font-size: var(--text-sm); }

/* ---------- hero: corridor ---------- */
.hero { display: grid; place-items: center; padding-block: var(--space-3xl); text-align: center; }
.hero { position: relative; overflow: clip; }
.hero__col { position: relative; z-index: 1; }
.neon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 62%, var(--color-ink) 100%); mask: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 62%, var(--color-ink) 100%); }
.neon__base use { fill: none; stroke: var(--color-rule-2); stroke-width: 1; }
.neon__base rect { fill: var(--color-paper); stroke: var(--color-accent-2); stroke-width: 1; }
.hero__col { max-width: 80rem; display: grid; justify-items: center; gap: var(--space-xl); }
.hero h1 { max-width: 18ch; font-size: clamp(2.5rem, 7vw + 1rem, 7.5rem); line-height: 1.02; }
.hero h1 .nw { white-space: nowrap; }
.hero .lead { max-width: 40ch; }
.hero__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

/* ---------- map ---------- */
.map { margin: 0; }
.map__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; }
.seg button { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); margin-left: calc(-1 * var(--rule-hair)); background: none; color: var(--color-ink-2); font: 400 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button:first-child { margin-left: 0; }
.seg button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; position: relative; z-index: var(--z-raised); }
.seg button:active { transform: translateY(1px); }
.seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.map__note { font-size: var(--text-sm); color: var(--color-muted); }

.map__well { background: var(--color-paper-2); padding: var(--space-xl); }
.map__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.map__scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.map svg { width: 100%; min-width: 900px; height: auto; font-family: var(--font-body); }
.map .ln { fill: none; stroke: var(--color-rule-2); stroke-width: 1; transition: stroke var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.map .dot { fill: var(--color-muted); transition: fill var(--dur-short) var(--ease-out); }
.map .n { transition: opacity var(--dur-short) var(--ease-out); }
.map .nm { fill: var(--color-ink); font-size: 17px; font-weight: 400; }
.map .sb { fill: var(--color-muted); font-size: 13px; }
.map .pn { fill: var(--color-ink); font-size: 28px; font-weight: 300; font-variation-settings: "SHRP" 100; letter-spacing: -0.02em; }
.map .box { fill: var(--color-paper-3); }
.map .tk { fill: none; stroke: var(--color-ink-2); stroke-width: 1.25; transition: stroke var(--dur-short) var(--ease-out); }
.map .el { fill: var(--color-ink-2); font-size: 13px; }
.map .p { cursor: pointer; }
.map:not([data-show="all"]) .n, .map:not([data-show="all"]) .ln { opacity: 0.22; }
.map[data-show="mis"] .k-mis, .map[data-show="lims"] .k-lims, .map[data-show="cms"] .k-cms, .map[data-show="b2b"] .k-b2b { opacity: 1; }
.map[data-show="mis"] .ln.k-mis, .map[data-show="lims"] .ln.k-lims, .map[data-show="cms"] .ln.k-cms, .map[data-show="b2b"] .ln.k-b2b { stroke: var(--color-signal); stroke-width: 1.5; }
.map[data-show="mis"] .k-mis .dot, .map[data-show="lims"] .k-lims .dot, .map[data-show="cms"] .k-cms .dot, .map[data-show="b2b"] .k-b2b .dot { fill: var(--color-signal); }
.map[data-show="mis"] .p-mis .tk, .map[data-show="lims"] .p-lims .tk, .map[data-show="cms"] .p-cms .tk, .map[data-show="b2b"] .p-b2b .tk { stroke: var(--color-signal); }
.map__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- statement ---------- */
.stmt { padding: var(--space-3xl) var(--space-2xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.stmt__fig { grid-column: 1 / 5; font-size: clamp(5rem, 11vw, 10rem); font-weight: 200; line-height: 0.9; letter-spacing: -0.04em; font-variation-settings: "SHRP" 100; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.stmt__text { grid-column: 5 / 13; display: grid; gap: var(--space-lg); align-content: end; }
.stmt__text p.display-s { max-width: 24ch; font-size: var(--text-display-s); line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--color-ink); font-variation-settings: "SHRP" 100; }

/* ---------- rows: what we build ourselves ---------- */
.rows { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.rows__head { grid-column: 1 / 5; align-self: start; position: sticky; top: var(--space-2xl); display: grid; gap: var(--space-md); }
.rows ol { grid-column: 5 / 13; margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.rows li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows h3 { font-size: var(--text-title); font-weight: 300; }
.rows li p { color: var(--color-ink-2); }

/* ---------- form ---------- */
.form-sec { padding-block: var(--section-gap-l) var(--section-gap); }
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.form-grid__head { grid-column: 1 / 6; display: grid; gap: var(--space-lg); align-content: start; }
.contact { display: grid; gap: var(--space-xs); margin: var(--space-md) 0 0; }
.contact div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-md); }
.contact dt { color: var(--color-muted); font-size: var(--text-sm); }
.contact dd { margin: 0; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.demo { grid-column: 7 / 13; display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label, .demo legend { font-size: var(--text-sm); color: var(--color-ink-2); }
.field input, .field textarea { min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-weight: 300; outline: 2px solid transparent; outline-offset: -3px; }
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid] { border-color: var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.demo fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-xs); }
.checks { display: flex; flex-wrap: wrap; }
.checks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checks label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); margin-left: calc(-1 * var(--rule-hair)); border: var(--rule-hair) solid var(--color-rule-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.checks label:first-of-type { margin-left: 0; }
.checks label:hover { background: var(--color-paper-2); }
.checks input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.checks input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; position: relative; z-index: var(--z-raised); }
.demo__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.demo__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- footer: colophon block ---------- */
.foot { padding-block: var(--space-2xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); }
.foot__mark { grid-column: 1 / 4; font-size: var(--text-2xl); }
.foot p { grid-column: 4 / 11; color: var(--color-ink-2); max-width: 60ch; }
.foot small { grid-column: 4 / 13; color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- visit: the MIS itself, one screen per step ---------- */
.visit { --ratio: 1.6; --beat: 3000ms; }
.visit__pin { --w: min(100%, calc((100svh - 128px) * var(--ratio))); position: relative; display: flex; flex-direction: column; gap: var(--space-sm); }
.visit__stage { --m-stage-ring: 0 0 0 1px color-mix(in oklch, var(--color-ink) 14%, transparent); width: var(--w); aspect-ratio: var(--ratio); margin: 0 auto; overflow: hidden; border-radius: 16px; background: var(--color-paper-2); box-shadow: var(--m-stage-ring); }
html:not(.js) .visit__stage { aspect-ratio: auto; overflow-x: auto; }
.visit__steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-sm); width: var(--w); margin: 0 auto; padding: 0 0 var(--space-xl); list-style: none; }
.visit__steps button { display: flex; align-items: baseline; gap: var(--space-xs); width: 100%; min-height: 44px; padding: var(--space-xs) 0; border: 0; border-top: 2px solid var(--color-rule-2); background: none; color: var(--color-muted); font: 400 var(--text-sm)/1.3 var(--font-body); text-align: left; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.visit__steps button b { font-weight: 400; }
.visit__steps button:hover { color: var(--color-ink); }
.visit__steps button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.visit__steps button { position: relative; }
.visit__steps .is-on button { color: var(--color-ink); }
/* the line above the active step fills in 3s; its end switches the slide */
.visit__steps .is-on button::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--color-signal); transform-origin: left; animation: step-beat var(--beat) linear both; }
@keyframes step-beat { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.visit.is-held .visit__steps .is-on button::before { animation-play-state: paused; }
.visit__pause { position: absolute; right: calc((100% - var(--w)) / 2); top: 44px; min-height: 32px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); background: none; color: var(--color-ink-2); font: 400 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.visit__pause:hover { background: var(--color-paper-2); }
.visit__pause:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .visit__pause { display: none; }
.visit__steps p { position: absolute; left: 0; right: 6rem; top: 52px; line-height: 1.3; color: var(--color-ink-2); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.visit__steps .is-on p { opacity: 1; }
html:not(.js) .visit__steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gap-columns); padding-bottom: var(--space-lg); }
html:not(.js) .visit__steps p { position: static; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .visit__steps button, .visit__steps p { transition: none; } .visit__steps .is-on button::before { animation: none; } .visit__pause { display: none; } }

/* ---------- responsive ---------- */
@media (max-width: 75rem) { .visit { --ratio: calc(900 / 680); } .visit__steps button { font-size: var(--text-xs); } }
@media (max-width: 60rem) {
  .hero { padding-block: var(--space-3xl); }
  .head h2, .head .lead { grid-column: 1 / -1; }
  .head .lead { margin-top: var(--space-md); }
  .mast__links { display: none; }
  .mast .container { grid-template-columns: auto minmax(0, 1fr); }
  .wordmark { justify-self: start; }
  .stmt__fig, .stmt__text, .rows__head, .rows ol, .form-grid__head, .demo { grid-column: 1 / -1; }
  .stmt { padding: var(--space-2xl) var(--space-lg); }
  .rows__head { position: static; margin-bottom: var(--space-xl); }
  .map__well { padding: var(--space-md); }
  .foot__mark, .foot p, .foot small { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .visit { --ratio: calc(420 / 680); }
  .visit__steps { padding-bottom: 60px; column-gap: var(--space-2xs); }
  .visit__steps button { justify-content: center; }
  .visit__steps button b { display: none; }
  .visit__steps p { font-size: var(--text-sm); }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .mast__act { padding: 0 var(--space-md); }
}