/* =========================================================
   Internal Views — the workspaces a hospital builds for itself.

   Prefix iv-, layered on pages/products/products.css (pr-), which
   carries the type scale, the sections, the product surface (.pr-ui),
   the triad, the list, tags, fields, the FAQ, the final CTA and the
   reveal contract.

   WHAT THIS PAGE MUST NOT BECOME. The brief's first instruction is that
   Internal Views are not dashboards, not Kanban, not a calendar, not
   filters — they are configurable workspaces, and those are four of the
   shapes one can take. So the page leads with the SET of workspaces,
   not with a screenshot of one, and the three layouts share a single
   section rather than getting a section each.

   ON THE AI CLAIMS. Everything here is "AI-assisted configuration":
   the model proposes, a person presses Create. No mockup on this page
   shows a workspace appearing without someone agreeing to it.
   ========================================================= */

/* =========================================================
   01 HERO — the module ecosystem, in three weights
   ========================================================= */
.iv-cloud { position: relative; display: grid; justify-items: center; gap: calc(16 * var(--u)); padding: calc(30 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }
.iv-core { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(13 * var(--u)) calc(22 * var(--u)); border-radius: 999px; background: var(--ink); color: #fff; }
.iv-core b { font-size: calc(15 * var(--u)); font-weight: 700; letter-spacing: -.01em; }
.iv-core span { font-size: calc(13 * var(--u)); color: var(--lime); }
.iv-core .i { color: var(--lime); }

.iv-tier { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); }
/* three weights, because a cloud where everything shouts is a word cloud */
.iv-pill { padding: calc(9 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14.5 * var(--u)); font-weight: 600; white-space: nowrap; }
.iv-tier.p1 .iv-pill { border-color: var(--lime-ico); background: var(--lime-soft); font-size: calc(16 * var(--u)); padding: calc(11 * var(--u)) calc(20 * var(--u)); }
.iv-tier.p2 .iv-pill { color: var(--text); }
.iv-tier.p3 .iv-pill { padding: calc(7 * var(--u)) calc(13 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; color: var(--muted); }
.iv-tier.p3 .more { border-style: dashed; }

.iv-count { display: grid; justify-items: center; gap: calc(2 * var(--u)); margin-top: calc(12 * var(--u)); padding-top: calc(24 * var(--u)); border-top: 1px solid var(--rule); width: 100%; text-align: center; }
.iv-count b { font-family: var(--font-head); font-size: calc(48 * var(--u)); line-height: calc(54 * var(--u)); font-weight: 500; letter-spacing: -.04em; }
.iv-count > span { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.iv-count small { margin-top: calc(6 * var(--u)); font-size: calc(14.5 * var(--u)); color: var(--muted); }

/* the modules arrive rather than appearing whole (§9.4) */
.pr-js .iv-cloud .iv-pill { opacity: 0; transform: translateY(calc(6 * var(--u))); }
.pr-js .iv-cloud.is-in .iv-pill { opacity: 1; transform: none; transition: opacity .45s var(--ease) calc(var(--i) * 32ms), transform .45s var(--ease) calc(var(--i) * 32ms); }

/* =========================================================
   02 AI-ASSISTED CONFIGURATION
   ========================================================= */
.iv-make { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); column-gap: calc(40 * var(--u)); align-items: start; }

/* block + fit-content, never an inline span: an inline background paints
   one box per line, so a wrapped message comes out as offset rectangles
   spilling out of the panel (§14.1) */
.iv-say { display: block; width: fit-content; max-width: 92%; padding: calc(13 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; font-size: calc(15.5 * var(--u)); line-height: calc(23 * var(--u)); }
.iv-say.you { margin-left: auto; border-color: var(--divider); background: var(--grey); }
.iv-say.ai { border-color: var(--lime-ico); background: var(--lime-soft); }
.iv-say .pr-k { display: flex; margin-bottom: calc(6 * var(--u)); }
.iv-say.ai .pr-k { color: var(--lime-ink); }
.iv-think { display: inline-flex; justify-self: start; gap: calc(5 * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.iv-think > i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--divider); }

.iv-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.iv-chips > li { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(7 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--lime-ico); border-radius: 999px; background: var(--lime-soft); font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--lime-ink); }
.iv-chips .i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 2.6; }

.iv-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.iv-metrics > li { display: grid; gap: calc(4 * var(--u)); padding: calc(15 * var(--u)) calc(14 * var(--u)); }
.iv-metrics > li + li { border-left: 1px solid var(--rule); }
.iv-metrics b { font-family: var(--font-head); font-size: calc(26 * var(--u)); line-height: calc(31 * var(--u)); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.iv-metrics span { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

.iv-filters { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); }
.iv-filters > li { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(7 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--muted); }
.iv-filters .i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: var(--faint); }

/* =========================================================
   03 DEPARTMENT WORKSPACES — one screen, six jobs
   ========================================================= */
.iv-app__head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--u)); padding: calc(15 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; }
.iv-tabs { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.iv-tab { position: relative; overflow: hidden; padding: calc(9 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.iv-tab:hover { border-color: var(--lime-ico); }
.iv-tab[aria-selected="true"] { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); }
.iv-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(2 * var(--u)); }
.iv-tab .bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(3 * var(--u)); transform: scaleX(0); transform-origin: left; background: var(--lime-ink); opacity: .4; }

.iv-panel__t { font-family: var(--font-head); font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.iv-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12 * var(--u)); margin-top: calc(18 * var(--u)); }
.iv-mods > li { display: grid; align-content: start; gap: calc(7 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.iv-mods b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.iv-mods span { font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); }
.iv-mods .i { color: var(--lime-ink); }

/* =========================================================
   04 THE HOSPITAL — the one photograph on the page
   ========================================================= */
.iv-band { position: relative; border-radius: var(--r-card); overflow: hidden; }
.iv-band img { width: 100%; height: auto; }
.iv-tags { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); }
.iv-tags > li { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14.5 * var(--u)); font-weight: 600; }
.iv-tags .i { color: var(--lime-ink); }
.iv-band__cap { margin-top: calc(14 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--muted); }

/* =========================================================
   05 THREE LAYOUTS, ONE SECTION
   ========================================================= */
.iv-views { display: grid; grid-template-columns: minmax(0, 1fr); }
.iv-view { min-width: 0; padding: calc(52 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.iv-view:first-child { padding-top: calc(10 * var(--u)); }
.iv-view:last-child { border-bottom: 0; padding-bottom: 0; }
.iv-view__head { display: grid; gap: calc(9 * var(--u)); max-width: calc(720 * var(--u)); margin-bottom: calc(32 * var(--u)); }
.iv-view__head p { font-size: calc(16.5 * var(--u)); line-height: calc(25 * var(--u)); color: var(--muted); text-wrap: pretty; }

/* ---------- Kanban ---------- */
.iv-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fafaf8; }
.iv-col { display: grid; align-content: start; gap: calc(10 * var(--u)); }
.iv-col__t { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); padding-bottom: calc(9 * var(--u)); border-bottom: 1px solid var(--rule); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.iv-col__t em { font-style: normal; font-weight: 600; color: var(--faint); }
.iv-card { display: grid; gap: calc(8 * var(--u)); padding: calc(13 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .04); }
.iv-card b { font-size: calc(14.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.iv-card__m { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u)) calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); }
.iv-card__m .pr-av { width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(9 * var(--u)); }
.iv-card.done { border-color: var(--lime-ico); background: var(--lime-soft); }
.iv-ghost { padding: calc(13 * var(--u)); border: 1px dashed var(--divider); border-radius: var(--r); font-size: calc(12.5 * var(--u)); color: var(--faint); text-align: center; }
/* the card that just moved, outlined so the eye finds it without a drag */
.iv-card.moved { border-color: var(--lime-ico); }
.pr-js .iv-board .iv-card.moved { opacity: 0; transform: translateX(calc(-40 * var(--u))); }
.pr-js .iv-views .is-in .iv-card.moved { opacity: 1; transform: none; transition: opacity .5s var(--ease) .5s, transform .55s var(--ease) .5s; }
.pr-js .iv-board .iv-ghost { opacity: 1; }
.pr-js .iv-views .is-in .iv-ghost { opacity: .45; transition: opacity .5s var(--ease) .9s; }

.iv-trail { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); }
.iv-trail > li { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--muted); }
.iv-trail .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--faint); }
.iv-trail .on { border-color: var(--lime-ico); background: var(--lime-soft); color: var(--lime-ink); }
.iv-trail .on .i { color: var(--lime-ink); }
.pr-js .iv-trail > li { opacity: 0; transform: translateY(calc(5 * var(--u))); }
.pr-js .is-in .iv-trail > li { opacity: 1; transform: none; transition: opacity .4s var(--ease) calc(1.2s + var(--i) * 300ms), transform .4s var(--ease) calc(1.2s + var(--i) * 300ms); }

/* ---------- Calendar ---------- */
.iv-cal { border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.iv-cal__top { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--u)); padding: calc(15 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; }
.iv-cal__top > b { font-family: var(--font-head); font-size: calc(19 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.iv-ctrl { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); margin-left: auto; }
.iv-ctrl > li { padding: calc(6 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-sm); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); }
.iv-ctrl .on { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); }

.iv-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.iv-dow > li { padding: calc(10 * var(--u)) calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.iv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.iv-day { min-height: calc(92 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.iv-day:nth-child(7n) { border-right: 0; }
.iv-grid > .iv-day:nth-last-child(-n+7) { border-bottom: 0; }
.iv-day > span { display: block; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.iv-day.out { background: #fcfcfb; }
.iv-day.out > span { color: var(--faint); }
.iv-ev { display: block; margin-top: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(8 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--grey); font-size: calc(11.5 * var(--u)); font-weight: 600; line-height: calc(16 * var(--u)); }
.iv-ev.a { background: var(--lime-soft); color: var(--lime-ink); }
.iv-ev.b { background: var(--amber); color: var(--amber-ink); }
.iv-ev.was { border: 1px dashed var(--divider); background: none; color: var(--faint); text-decoration: line-through; }
.iv-ev.moved { border: 1px solid var(--lime-ico); background: var(--lime); color: var(--ink); }
.pr-js .iv-ev.moved { opacity: 0; transform: translateX(calc(-28 * var(--u))); }
.pr-js .is-in .iv-ev.moved { opacity: 1; transform: none; transition: opacity .5s var(--ease) .6s, transform .55s var(--ease) .6s; }

/* ---------- Team / department ---------- */
.iv-team { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(40 * var(--u)); align-items: start; }
.iv-loads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.iv-load { display: grid; gap: calc(9 * var(--u)); padding: calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.iv-load__t { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); }
.iv-load__t > b { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.iv-load__n { font-family: var(--font-head); font-size: calc(28 * var(--u)); line-height: calc(33 * var(--u)); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.iv-load__n em { font-style: normal; font-family: var(--font-body); font-size: calc(13 * var(--u)); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.iv-load__sub { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.iv-load.on { border-color: var(--lime-ico); background: var(--lime-soft); }

.iv-drill { position: relative; display: grid; width: calc(330 * var(--u)); padding-left: calc(30 * var(--u)); }
.iv-drill::before { content: ""; position: absolute; left: calc(5 * var(--u)); top: calc(10 * var(--u)); bottom: calc(26 * var(--u)); width: 2px; background: var(--divider); }
.iv-drill::after { content: ""; position: absolute; left: calc(5 * var(--u)); top: calc(10 * var(--u)); height: 0; width: 2px; background: var(--lime-ico); transition: height 1.5s var(--ease); }
.iv-drill.is-in::after { height: calc(100% - 36 * var(--u)); }
.iv-drill > li { position: relative; padding-bottom: calc(16 * var(--u)); opacity: .45; transition: opacity .5s var(--ease); }
.iv-drill.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.iv-drill > li:last-child { padding-bottom: 0; }
.iv-drill > li::before { content: ""; position: absolute; left: calc(-30 * var(--u)); top: calc(7 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.iv-drill.is-in > li::before { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.iv-drill b { display: block; font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.iv-drill span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--muted); }

/* =========================================================
   06 WHEN OPERATIONS CHANGE
   ========================================================= */
.iv-evolve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(40 * var(--u)); align-items: start; }
.iv-newview { display: grid; gap: calc(12 * var(--u)); padding: calc(20 * var(--u)); border: 1px solid var(--lime-ico); border-radius: var(--r); background: var(--lime-soft); }
.iv-newview__t { font-family: var(--font-head); font-size: calc(21 * var(--u)); font-weight: 500; letter-spacing: -.03em; color: var(--lime-ink); }
.iv-parts { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.iv-parts > li { padding: calc(6 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--lime-ico); border-radius: 999px; background: #fff; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--lime-ink); }
.iv-do { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: 999px; background: var(--lime); font-size: calc(14.5 * var(--u)); font-weight: 700; }

.iv-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.iv-gallery > li { display: grid; gap: calc(5 * var(--u)); padding: calc(15 * var(--u)) calc(15 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.iv-gallery b { font-size: calc(14.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.iv-gallery span { font-size: calc(12.5 * var(--u)); color: var(--muted); }
.iv-gallery .new { border-color: var(--lime-ico); background: var(--lime-soft); }
.iv-gallery .new b { color: var(--lime-ink); }
.pr-js .iv-gallery .new { opacity: 0; transform: translateY(calc(8 * var(--u))); }
.pr-js .is-in .iv-gallery .new { opacity: 1; transform: none; transition: opacity .5s var(--ease) 1.1s, transform .5s var(--ease) 1.1s; }

/* =========================================================
   WHERE IT SITS / PREV-NEXT
   ========================================================= */
.iv-os { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.iv-os > li > * { display: grid; align-content: start; gap: calc(7 * var(--u)); height: 100%; padding: calc(22 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.iv-os a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.iv-os b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
/* > li > * > span:last-child, not a bare span: the active card's panel is
   itself a last-child span and would take the description styling (§14.1) */
.iv-os > li > * > span:last-child { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--muted); }
.iv-os > li.is-on > span { border-color: var(--lime-ico); background: var(--lime); }
.iv-os > li.is-on > span > span:last-child { color: var(--text); }
.iv-os .pr-k { color: var(--lime-ink); }

.iv-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); max-width: calc(880 * var(--u)); margin: calc(60 * var(--u)) auto 0; text-align: left; }
.iv-nav a { display: grid; align-content: start; gap: calc(6 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.iv-nav a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.iv-nav b { font-family: var(--font-head); font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.iv-nav > a > span:last-child { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.iv-nav .iv-nav__next { text-align: right; justify-items: end; }
.iv-back { margin-top: calc(26 * var(--u)); }

/* =========================================================
   MOTION (§9) — the resting states the script animates from
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* the department workspace settles rather than snaps, and the playing
     tab fills its own underline over exactly the interval (§9.6.4, .6) */
  .iv-panel:not([hidden]) { animation: ivSettle .45s var(--ease); }
  @keyframes ivSettle { from { opacity: 0; transform: translateY(6px); } }
  .iv-app.is-cycling .iv-tab[aria-selected="true"] .bar { animation: ivFill 4600ms linear forwards; }
  @keyframes ivFill { to { transform: scaleX(1); } }

  /* ask, think, configure, and the workspace that came out of it —
     four beats, under three and a half seconds (§9.6.8) */
  .pr-js .iv-make [data-s] { opacity: 0; transform: translateY(calc(7 * var(--u))); }
  .pr-js .iv-make.is-in [data-s] { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .pr-js .iv-make.is-in [data-s="1"] { transition-delay: .55s; }
  .pr-js .iv-make.is-in [data-s="2"] { transition-delay: 1.25s; }
  .pr-js .iv-make.is-in [data-s="3"] { transition-delay: 1.8s; }
  .pr-js .iv-make.is-in [data-s="4"] { transition-delay: 2.3s; }
  .pr-js .iv-make.is-in [data-s="5"] { transition-delay: 2.8s; }
  .pr-js .iv-make.is-in .iv-think { animation: ivGone .3s linear 1.25s both; }
  @keyframes ivGone { to { opacity: 0; visibility: hidden; } }

  .pr-js .iv-evolve [data-s] { opacity: 0; transform: translateY(calc(7 * var(--u))); }
  .pr-js .iv-evolve.is-in [data-s] { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .pr-js .iv-evolve.is-in [data-s="1"] { transition-delay: .55s; }
  .pr-js .iv-evolve.is-in [data-s="2"] { transition-delay: 1.1s; }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (§10).
   ========================================================= */
@media (max-width: 1179px) {
  .iv-cloud { padding: 20px 16px 22px; }
  .iv-tier { justify-content: flex-start; }
  .iv-pill { font-size: 13.5px; padding: 8px 13px; }
  .iv-tier.p1 .iv-pill { font-size: 14.5px; padding: 9px 15px; }
  .iv-count b { font-size: 40px; line-height: 46px; }

  .iv-make, .iv-team, .iv-evolve { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .iv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-metrics > li:nth-child(odd) { border-left: 0; }
  .iv-metrics > li:nth-child(n+3) { border-top: 1px solid var(--rule); }

  .iv-app__head { padding: 13px; }
  .iv-tabs { width: 100%; }
  .iv-tab { flex: 1 1 auto; padding: 9px 11px; font-size: 13px; text-align: center; }
  .iv-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .iv-view { padding: 36px 0; }
  .iv-view__head { max-width: none; margin-bottom: 22px; }

  /* a board is the one thing that may scroll sideways in its own frame (§9.6.9) */
  .iv-board { min-width: 0; grid-template-columns: repeat(5, 180px); gap: 10px; padding: 12px; overflow-x: auto; scrollbar-width: thin; }
  .iv-cal { overflow-x: auto; }
  .iv-dow, .iv-grid { min-width: 620px; }
  .iv-day { min-height: 76px; }
  .iv-ctrl { margin-left: 0; width: 100%; }

  .iv-loads { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .iv-load { padding: 16px; }
  .iv-drill { width: 100%; }

  .iv-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-os { grid-template-columns: minmax(0, 1fr); }
  .iv-nav { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .iv-nav a { padding: 20px; }
  .iv-nav .iv-nav__next { text-align: left; justify-items: start; }
  .iv-nav b { font-size: 20px; }
}