/* Shared story pieces: chapter layout, service card, chip, tags, service bar.
 * Scene-specific styling lives in assets/v2/scenes/<scene>.css. */

/* chapter layout: service card left, device right (stacked on mobile) */
.chapter .stage { display: flex; align-items: center; }
.chapter-grid {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--rail) var(--s5);
  height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: center;
}
.device-col { position: relative; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.demo-note { position: absolute; right: 0; bottom: 0; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }

/* service card */
.svc-card { max-width: 30rem; display: flex; flex-direction: column; gap: var(--s5); }
.svc-head { display: flex; flex-direction: column; gap: var(--s3); }
.svc-num { font: 500 var(--fs-xs)/1 var(--sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); }
.svc-name { font: 400 var(--fs-lg)/1 var(--serif); letter-spacing: -.015em; }
.svc-route { font: 400 var(--fs-md)/1.2 var(--serif); color: var(--ink-2); }
.svc-route .arrow { color: var(--signal); padding: 0 .15em; }
.svc-row { border-top: 1px solid var(--hair); padding-top: var(--s3); display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s4); }
.svc-k { font: 500 11px/1.6 var(--sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label); padding-top: 2px; }
.svc-v { font-size: 16px; line-height: 1.5; color: var(--ink); }
.svc-steps { display: flex; flex-direction: column; gap: 6px; }
.svc-steps li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.svc-steps li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 7px;
  border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg) scale(.9);
}
.svc-result { color: var(--signal); font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.js .svc-steps li:not(.is-on), .js .svc-result:not(.is-on) { display: none; }
.js .svc-steps li.is-on, .js .svc-result.is-on { animation: check-in .7s var(--ease-expo) both; }
.js .svc-steps:not(:has(li.is-on))::after, .js .svc-v:has(> .svc-result:not(.is-on))::after {
  content: "…"; color: var(--faint); letter-spacing: .2em;
}
@keyframes check-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* chip: the lime date-and-time pill (rule A) */
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px;
  background: var(--signal); color: var(--on-signal); font: 600 13px/1 var(--sans); letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 0 0 6px var(--signal-wash);
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-signal); }
.chip.is-docked { padding: 4px 9px 4px 7px; font-size: 11px; gap: 6px; box-shadow: none; }
.chip.is-docked .chip-dot { width: 5px; height: 5px; }

/* tags: what Kima caught (Wispr-style) */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px;
  background: rgba(205, 245, 70, .14); color: var(--signal); border: 1px solid rgba(205, 245, 70, .35);
  font: 600 10.5px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.tag--strike { color: #b9c2ad; background: rgba(233, 237, 224, .06); border-color: rgba(233, 237, 224, .18); }
.tag--fix::before { content: "↺"; font-size: 12px; letter-spacing: 0; }
.mark { border-radius: 3px; transition: background-color .5s var(--ease), color .5s var(--ease), opacity .5s var(--ease); }
.mark.is-hes { color: rgba(233, 237, 239, .38); text-decoration: line-through; text-decoration-color: rgba(233, 237, 239, .38); }
.mark.is-fix { background: rgba(205, 245, 70, .16); box-shadow: 0 0 0 2px rgba(205, 245, 70, .16); }
.mark.is-key { background: rgba(205, 245, 70, .10); border-bottom: 1px solid var(--signal); }

/* service bar: fixed under the header from the index to chapter 4 */
.svc-bar {
  position: fixed; z-index: 55; left: 0; right: 0; top: var(--header-h);
  display: flex; justify-content: center; pointer-events: none;
  opacity: 0; transform: translateY(-8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.svc-bar.is-on { opacity: 1; transform: none; }
.rm .svc-bar { display: none; }   /* reduced motion: no progress device (it would show every chapter's ending at once) */
.svc-bar-inner {
  display: grid; grid-template-columns: repeat(3, 17rem); gap: 1px; margin-top: 10px;   /* fixed slots: docking a chip never moves the bar */
  border: 1px solid var(--hair); background: var(--hair); border-radius: 999px; overflow: hidden;  pointer-events: auto;
}
.svc-slot { display: flex; align-items: center; gap: 10px; padding: 7px 16px; background: rgba(6, 8, 6, .82); min-width: 0; text-decoration: none; color: var(--muted); }
.svc-slot .slot-name { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.svc-slot .slot-chip { min-width: 1px; display: inline-flex; }
.svc-slot.is-current { color: var(--ink); }
.svc-slot.is-current .slot-name::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }
.svc-slot.is-filled { color: var(--ink-2); }
@media (max-width: 700px) {
  .svc-bar-inner { border-radius: 14px; margin: 8px 8px 0; width: calc(100% - 16px); }
  .svc-slot { padding: 7px 8px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .svc-slot .slot-name { font-size: 9.5px; letter-spacing: .1em; }
}

/* chapter layout on small screens: a compact card above the device, so the phone stays large */
@media (max-width: 900px) {
  .chapter-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--s3); padding-top: 72px; padding-bottom: var(--s3); align-items: stretch; }
  .svc-card { max-width: none; gap: 8px; }
  .svc-head { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .svc-num { display: none; }
  .svc-name { font-size: 30px; }
  .svc-route { font-size: 17px; }
  .svc-row { grid-template-columns: 6.4rem minmax(0, 1fr); gap: 10px; padding-top: 7px; }
  .svc-k { font-size: 9.5px; letter-spacing: .14em; padding-top: 3px; }
  .svc-v, .svc-row.svc-row--problem .svc-v { font-size: 14px; line-height: 1.4; }
  /* on phones only the newest "como funciona" line is shown, to keep the device large */
  .js .svc-steps li.is-on:not(.is-last) { display: none; }
  .svc-steps li { font-size: 13.5px; line-height: 1.35; padding-left: 18px; }
  .svc-steps li::before { width: 10px; height: 6px; }
  .svc-result { font-size: 16px; }
  .js .svc-steps:not(:has(li.is-on))::after, .js .svc-v:has(> .svc-result:not(.is-on))::after { font-size: 13px; }
  .demo-note { bottom: 4px; font-size: 9px; letter-spacing: .1em; }
}
.rm .chapter-grid, html:not(.js) .chapter-grid { height: auto; padding-top: var(--s9); }
.rm .device-col, html:not(.js) .device-col { height: 80svh; }

/* desktop: the card keeps one height while its lines check in, so nothing jumps */
@media (min-width: 901px) {
  .chapter-grid > .svc-card, .ac-left { min-height: 31rem; }
}
/* short desktops (1280×720): clear the service bar; drop the cue once the first step lands */
@media (min-width: 901px) and (max-height: 760px) {
  .chapter-grid { padding-top: 72px; }
  .svc-card:has(.svc-steps li.is-on) .svc-row--problem { display: none; }
  .svc-name { font-size: clamp(32px, 4.4vw, 56px); }
  .chapter-grid > .svc-card, .ac-left { min-height: 26rem; }
}
/* short phones: the cue (Problema) shows first, then makes room once a step lands */
@media (max-width: 900px) and (max-height: 760px) {
  .svc-row.svc-row--problem { display: grid; }
  .svc-card:has(.svc-steps li.is-on) .svc-row--problem { display: none; }
}
@media (max-width: 700px) {
  .svc-bar-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-slot .slot-name { letter-spacing: .02em; }
}

/* Kima's labels inside a phone: larger, and marked as Kima's reading (not WhatsApp UI) */
.phone .wa-annot .tag { font-size: 14px; letter-spacing: .03em; padding: 6px 11px 6px 9px; }
.phone .wa-annot .tag::before {
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("kima-mark-small.svg") center / contain no-repeat; mask: url("kima-mark-small.svg") center / contain no-repeat;
}
.phone .wa-annot .tag.tag--fix::before { content: ""; }