/*
  SchemeReady: the home page's carousel of features (index.html .hc), in the
  navy top section where the stacked cards were (Chris, 5 October 2026).
  assets/hero-carousel.js turns it; without that script the first slide shows
  on its own and the controls stay hidden.

  Each slide is a chip line (its product, and the kind of firm the example is
  for), a picture of the product drawn in HTML for a made-up firm (a
  .pm-window from showcase.css, at a fixed height, cut off at the foot with a
  fade where a phone makes its words run longer), and one line of benefit.
  Every slide sits in the same grid cell, so the carousel is as tall as its
  tallest slide from the first paint and nothing moves when a slide changes.

  Load after showcase.css and home.css. Every colour is a token. Not an input
  to the How it works moments, so a change here needs no rebuild.
*/

.hc {
  --hc-window: 27rem;
  /* The time on each slide, as assets/hero-carousel.js keeps it. */
  --hc-interval: 5.5s;
  position: relative; min-width: 0;
}
/* A phone's narrow window makes the words run longer, so it is the tallest.
   Under the words on a tablet the carousel keeps a phone-to-laptop width
   rather than running the width of the page. */
@media (min-width: 600px) { .hc { --hc-window: 25.5rem; max-width: 36rem; } }
@media (min-width: 820px) { .hc { --hc-window: 25rem; max-width: none; } }

/* ------------------------------------------------------------
   The slides, stacked in one cell
   ------------------------------------------------------------ */
.hc-viewport { display: grid; touch-action: pan-y; }
.hc-slide { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; border-radius: var(--sr-radius); }
/* Without script only the first slide shows; the others keep their room. */
.hc-slide:not(:first-child) { visibility: hidden; }
.hc.is-on .hc-slide { visibility: hidden; opacity: 0; }
.hc.is-on .hc-slide.is-current { visibility: visible; opacity: 1; }
.hc-slide:focus-visible { outline: 3px solid var(--ds-sr-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .hc.is-on .hc-slide { transform: translateY(.4rem); transition: opacity .45s var(--ds-motion-ease), transform .45s var(--ds-motion-ease), visibility 0s linear .45s; }
  .hc.is-on .hc-slide.is-current { transform: none; transition: opacity .45s var(--ds-motion-ease), transform .45s var(--ds-motion-ease), visibility 0s; }
}

/* The product and the kind of firm, on the navy. */
.hc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .65rem; min-height: 1.45rem; }
.hc-product, .hc-kind {
  display: inline-flex; align-items: center; padding: .14rem .6rem; border-radius: var(--sr-radius-pill);
  font-size: .72rem; font-weight: 800; letter-spacing: .03em; line-height: 1.4; white-space: nowrap;
}
.hc-product-ra { background: var(--ds-sr-brand-tint); color: var(--ds-sr-primary); }
.hc-product-ct { background: var(--ds-sr-accent-tint); color: var(--ds-sr-accent-ink); }
.hc-kind { border: 1px solid var(--ds-sr-nav-quiet-border); color: var(--ds-sr-on-hero-muted); font-weight: 600; letter-spacing: 0; }

/* The benefit, under the picture, two lines kept for it. */
.hero .hc-benefit {
  margin: .75rem 0 0; min-height: 2.7em; max-width: 34rem;
  font-size: .98rem; line-height: 1.35; font-weight: 600; color: var(--ds-sr-on-hero); text-wrap: balance;
}

/* ------------------------------------------------------------
   The picture: a product window at a fixed height
   ------------------------------------------------------------ */
.hc-window { height: var(--hc-window); display: flex; flex-direction: column; font-size: .8rem; line-height: 1.45; }
.hc-bar { flex: 0 0 auto; padding: .6rem .9rem; }
.hc-bar .tool-ico { width: 2rem; height: 2rem; border-radius: 8px; }
.hc-bar .tool-ico svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.75; }
.hc-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: .8rem .9rem 1.5rem; display: grid; gap: .55rem; align-content: start; }
/* Where a phone makes the words run longer than the window, they fade out
   at its foot rather than stop at a hard edge. */
.hc-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.75rem; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sr-surface));
}
.hc-window p, .hc-window ul, .hc-window ol { margin: 0; }
.hc-window .hc-small { font-size: .74rem; line-height: 1.45; }
.hc-window .hc-strong { font-weight: 700; color: var(--sr-heading); }
.hc-window .pm-sheet { padding-top: .75rem; gap: .45rem; }
.hc-window .pm-sheet-head { padding-bottom: .5rem; }
.hc-window .pm-logo { width: 2.1rem; height: 2.1rem; font-size: .66rem; }
.hc-window .pm-doc-title { font-size: .9rem; }
/* The made-up engineering firm's mark: amber, where the traffic firm's is navy. */
.pm-logo.pm-logo-ee { background: var(--ds-sr-accent); color: var(--ds-sr-on-accent); }
.pm-logo.pm-logo-ee::after { background: var(--ds-sr-surface-brand); }

/* The readiness report's summary page. */
.hc-report { display: grid; gap: .45rem; }
.hc-report .table-wrap { margin: 0; }
.hc-report th, .hc-report td { padding: .4rem .55rem; }
.hc-report .band { font-size: .78rem; }
.hero .hc-report table { font-size: .76rem; }

/* An internal audit's findings and an action. */
.hc-findings { list-style: none; padding: 0; display: grid; gap: .45rem; }
.hc-findings li { margin: 0; }
.hc-window .hc-line { display: block; margin-top: .15rem; color: var(--sr-text); }
.pm-window .pm-tag-nc { background: var(--ds-band-not-bg); color: var(--ds-band-not-fg); border-color: var(--ds-band-not-border); }
.pm-window .pm-tag-obs { background: var(--ds-band-nearly-bg); color: var(--ds-band-nearly-fg); border-color: var(--ds-band-nearly-border); }
.hc-actions { list-style: none; padding: 0; display: grid; gap: .35rem; }
.hc-actions li { margin: 0; display: grid; gap: .1rem; padding: .4rem .55rem; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); }
.hc-window .hc-owner { font-size: .7rem; color: var(--sr-muted); }

/* A flag from Check my answers. */
.hc-flag { display: grid; gap: .35rem; padding: .55rem .7rem; border: 1px solid var(--sr-line); border-left: 5px solid var(--ds-band-nearly-border); border-radius: var(--sr-radius-sm); }
.hc-window .hc-flag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; font-size: .74rem; color: var(--sr-muted); }

/* A toolbox talk and its sign-in sheet, the sheet behind. */
.hc-pages { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.hc-page-front { position: relative; z-index: 1; grid-column: 1 / 2; grid-row: 1; padding-bottom: .75rem; }
.hc-page-back { grid-column: 2 / 3; grid-row: 1; margin: 1.6rem 0 0 -.9rem; padding: .7rem .7rem .8rem 1.4rem; box-shadow: var(--sr-shadow); }
.hc-remember { padding: .55rem .7rem; border-radius: var(--sr-radius-sm); background: var(--ds-sr-accent-tint); }
.hc-remember ul { padding-left: 1rem; display: grid; gap: .25rem; }
.hc-window .hc-remember .pm-h { color: var(--ds-sr-accent-ink); margin-bottom: .3rem; }
.hc-sign { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .66rem; margin: .35rem 0 0; }
.hc-sign th, .hc-sign td { border: 1px solid var(--sr-line); padding: .15rem .25rem; height: 1.3rem; text-align: left; vertical-align: middle; }
.hc-sign th { background: var(--sr-bg-soft); color: var(--sr-heading); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* RAMS: the three to fix first, closer together than on a page, and the
   line every check carries. */
.hc-window .pm-todo { gap: .35rem; }
.hc-window .pm-todo li { padding: .4rem .6rem .4rem 2.25rem; }
.hc-window .pm-todo li::before { left: .5rem; top: .45rem; width: 1.3rem; height: 1.3rem; font-size: .68rem; }
.hc-window .hc-safety {
  padding: .45rem .6rem; border-radius: var(--sr-radius-sm); font-size: .72rem;
  background: var(--ds-warning-bg); color: var(--ds-warning-fg); border: 1px solid var(--ds-warning-border);
}

/* An incident's causes, each with its kind. */
.hc-causes { list-style: none; padding: 0; display: grid; gap: .3rem; }
.hc-causes li { margin: 0; }
.hc-window .hc-cause {
  display: inline-block; margin-right: .3rem; padding: .05rem .45rem; border-radius: var(--sr-radius-pill);
  background: var(--ds-sr-brand-tint); color: var(--sr-heading); font-size: .68rem; font-weight: 700;
}

/* A finding's reply, its gaps marked as the tool marks them. */
.hc-reply { display: grid; gap: .4rem; padding: .55rem .7rem; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); background: var(--sr-bg-soft); }
.hc-window .hc-gap { padding: 0 .15em; border-radius: 4px; background: var(--ds-warning-bg); color: var(--ds-warning-fg); }

/* Ask: the question, the answer quoting the Code, its label and the licence. */
.hc-window .hc-bubble {
  justify-self: end; max-width: 88%; padding: .5rem .75rem; border-radius: 1rem 1rem .3rem 1rem;
  background: var(--ds-sr-primary); color: var(--sr-bg); font-weight: 600;
}
.hc-answer { display: grid; gap: .45rem; padding: .55rem .7rem; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); }
.hc-window .hc-cite {
  display: inline-block; padding: .12rem .55rem; border-radius: var(--sr-radius-pill);
  background: var(--ds-sr-brand-tint); color: var(--sr-heading); font-size: .7rem; font-weight: 600;
}
.hc-window .hc-licence, .hc-window .hc-check { font-size: .7rem; color: var(--sr-muted); }

/* The dashboard: the organisation, its next step, and the two panels. */
.hc-dash-head { display: flex; align-items: center; gap: .6rem; }
.hc-window .hc-next {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .45rem .6rem;
  border-radius: var(--sr-radius-sm); background: var(--ds-sr-brand-tint); color: var(--sr-heading); font-weight: 600;
}
.hc-next .pm-label { margin: 0; }
.hc-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; align-items: stretch; }
.hc-panel { display: grid; gap: .5rem; align-content: start; padding: .6rem .65rem; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); box-shadow: inset 0 3px 0 var(--ds-sr-accent); }
.hc-window .hc-panel-title { font-weight: 800; color: var(--sr-heading); font-size: .78rem; }
.hc-std { display: flex; align-items: center; gap: .45rem; }
.hc-std > span:last-child { display: grid; gap: .15rem; justify-items: start; min-width: 0; }
.hc-std .band { font-size: .68rem; padding: .05rem .45rem; }
.hc-ring {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: conic-gradient(var(--ds-sr-accent) var(--hc-ring, 0%), var(--sr-line) 0);
  -webkit-mask: radial-gradient(circle, transparent 52%, currentColor 54%);
  mask: radial-gradient(circle, transparent 52%, currentColor 54%);
}
.hc-ring-100 { --hc-ring: 100%; }
.hc-ring-60 { --hc-ring: 60%; }
.hc-bar-track { display: block; height: .4rem; border-radius: var(--sr-radius-pill); background: var(--sr-line); overflow: hidden; }
.hc-bar-fill { display: block; width: 18%; height: 100%; border-radius: inherit; background: var(--ds-sr-primary); }
.hc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.hc-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 7px; background: var(--ds-sr-brand-tint); color: var(--ds-sr-primary); }
.hc-tile svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   The controls, on the navy
   ------------------------------------------------------------ */
.hc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .4rem; margin-top: 1rem; }
.hc-controls[hidden] { display: none; }
.hc-rotate, .hc-step {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.5rem; min-width: 2.5rem;
  padding: 0 .9rem; border-radius: var(--sr-radius-pill); border: 1px solid var(--ds-sr-nav-quiet-border);
  background: transparent; color: var(--ds-sr-on-hero); font: inherit; font-size: .85rem; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.hc-step { padding: 0; width: 2.5rem; }
.hc-step svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-rotate:hover, .hc-step:hover { background: color-mix(in srgb, var(--ds-sr-on-hero) 12%, transparent); border-color: var(--ds-sr-on-hero-muted); }
.hc-rotate:focus-visible, .hc-step:focus-visible, .hc-dot:focus-visible { outline: 3px solid var(--ds-sr-accent); outline-offset: 2px; }
/* Pause as two bars, Play as a triangle, drawn so the word can change alone. */
.hc-rotate-icon { position: relative; width: .7rem; height: .8rem; flex: 0 0 auto; }
.hc-rotate-icon::before, .hc-rotate-icon::after { content: ""; position: absolute; top: 0; bottom: 0; width: .22rem; border-radius: 1px; background: currentColor; }
.hc-rotate-icon::before { left: .05rem; }
.hc-rotate-icon::after { right: .05rem; }
.hc-rotate[data-state="stopped"] .hc-rotate-icon::before {
  left: .1rem; width: 0; border-radius: 0; background: none;
  border-style: solid; border-color: transparent transparent transparent currentColor; border-width: .4rem 0 .4rem .62rem;
}
.hc-rotate[data-state="stopped"] .hc-rotate-icon::after { display: none; }

/* A dot for each slide: a ring, and the current one a pill that fills over
   the time on the slide while it turns. */
.hc-dots { display: flex; flex-wrap: wrap; align-items: center; }
.hc-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 2.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: var(--sr-radius-pill); }
.hc-dot-mark {
  position: relative; display: block; overflow: hidden; width: .6rem; height: .6rem; border-radius: var(--sr-radius-pill);
  border: 2px solid var(--ds-sr-on-hero-muted);
}
.hc-dot:hover .hc-dot-mark { background: var(--ds-sr-on-hero-muted); }
.hc-dot[aria-selected="true"] { width: 2.4rem; }
.hc-dot[aria-selected="true"] .hc-dot-mark { width: 1.9rem; border-color: var(--ds-sr-accent); background: color-mix(in srgb, var(--ds-sr-accent) 30%, transparent); }
.hc-dot-mark::after { content: ""; position: absolute; inset: 0; background: var(--ds-sr-accent); transform: scaleX(0); transform-origin: left center; }
.hc:not(.is-turning) .hc-dot[aria-selected="true"] .hc-dot-mark::after { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes hc-fill { to { transform: scaleX(1); } }
  .hc.is-turning .hc-dot[aria-selected="true"] .hc-dot-mark.is-filling::after { animation: hc-fill var(--hc-interval) linear forwards; }
  .hc.is-turning.is-held .hc-dot[aria-selected="true"] .hc-dot-mark.is-filling::after { animation-play-state: paused; }
  .hc-dot, .hc-dot-mark { transition: width .3s var(--ds-motion-ease), background-color .2s ease, border-color .2s ease; }
}
@media (forced-colors: active) {
  .hc-dot[aria-selected="true"] .hc-dot-mark { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .hc-dot-mark::after { display: none; }
}

/* A phone: the dots on a line of their own, the buttons under them. */
@media (max-width: 34rem) {
  .hc-controls { justify-content: center; }
  .hc-dots { order: -1; flex: 1 1 100%; justify-content: center; }
  .hc-window { font-size: .78rem; }
}
/* A narrow phone: each picture keeps what matters most. A line marked
   hc-wide-only goes, and the toolbox talk shows its Remember card alone, the
   sign-in sheet being in the benefit line under it. */
@media (max-width: 26rem) {
  .hc-wide-only { display: none; }
  .hc-pages { grid-template-columns: minmax(0, 1fr); }
  .hc-page-back { display: none; }
}

@media print {
  .hc-controls { display: none !important; }
  .hc-slide:not(:first-child) { display: none; }
  .hc-slide { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}