/* ---------- The first-run welcome card (intro.js): the look shared by Write and Flow.
   MIRRORED: write/intro.css and flowchart/intro.css are the same file, byte for byte. Change
   one, copy it over the other (cmp write/intro.css flowchart/intro.css says nothing when they match).
   Each app's intro.js builds the same markup and keeps only its own options and mock-ups
   (their CSS is in that intro.js):
     #intro > .sc-card.ix-card > .sc-head (.heading-title, .heading-sub)
       .ix-wins > section.ix-win > h3 + .ix-opts[role=radiogroup]
         > button.ix-opt[role=radio][aria-checked] > .ix-stage > .ix-scene (a 200 × 124 scene, scaled by --k)
                                                  + .ix-label (.ix-radio, .ix-name, .ix-badge?) + .ix-desc
       .ix-foot > .ix-foot-note + button.btn.btn--primary.ix-start
   Its pieces are ui.css's: the glass is a sheet (the Hold-⌥ sheet's .sc-card), behind the one scrim; the
   windows are frame tiles; each option is a Choice (the chosen glass when picked, the quiet highlight at
   rest); the badge is a Chip, the keys are Keys, focus is the one halo. */
#intro {
  position: fixed; inset: 0; z-index: var(--intro-z, 1000);
  display: grid; place-items: center; padding: 24px 16px;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear 160ms;
  font-family: var(--font-ui);
  --ix-canvas: #000;
  --ix-stage-rim: rgb(255 255 255 / 0.18);
}
:root[data-theme="light"] #intro {
  --ix-canvas: #f2f2f4;
  --ix-stage-rim: rgb(0 0 0 / 0.14);
}
/* the page dims and softens behind the card: ui.css's scrim, as under every dialog */
#intro::before { opacity: 0; transition: opacity 160ms var(--ease); }
#intro.open { visibility: visible; pointer-events: auto; transition: none; }
#intro.open::before { opacity: 1; }
#intro .sc-card.ix-card {
  width: min(920px, 100%); max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
}
#intro.open .sc-card { transform: none; opacity: 1; }
#intro .sc-head { flex-wrap: wrap; row-gap: 2px; }
#intro .sc-head .heading-title { margin: 0; }
#intro .sc-head .heading-sub { margin: 0; flex-basis: 100%; }

/* the two windows, side by side, two tiles in each */
.ix-wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ix-win {
  margin: 0; padding: 12px; border: 0; min-width: 0;
  background: var(--frame-fill); box-shadow: var(--frame-rim);   /* (a frame tile) */
  border-radius: var(--r-md);
}
.ix-win h3 { margin: 0 2px 10px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-2); }
.ix-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* each option: a Choice tile (ui.css's look): the quiet highlight at rest, the chosen glass when picked */
.ix-opt {
  display: grid; align-content: start; gap: 8px; min-width: 0;
  padding: 6px 6px 10px; margin: 0;
  background: var(--hl-fill); color: inherit; font: inherit; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--r-lg); outline: none;
  --state-shadow: var(--hl-rim); box-shadow: var(--state-shadow);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform 260ms var(--ease-jelly);
}
.ix-opt:active { transform: scale(0.985); transition-duration: 90ms; }
.ix-opt[aria-checked="true"] { background: var(--chosen-fill); --state-shadow: var(--chosen-rim); }
/* (the radio hangs in the margin: a long name wraps beside it, the badge flows after the name) */
.ix-label { display: block; position: relative; padding: 0 4px 0 25px; line-height: 20px; }
.ix-radio {
  position: absolute; left: 4px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--text-3);
  display: grid; place-items: center;
}
.ix-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bg-page); transform: scale(0); transition: transform 200ms var(--ease-jelly); }
.ix-opt[aria-checked="true"] .ix-radio { background: var(--text-strong); box-shadow: none; }
.ix-opt[aria-checked="true"] .ix-radio::after { transform: none; }
.ix-name { font-size: var(--text-md); font-weight: var(--weight-strong); color: var(--text-1); }
.ix-badge { margin-left: 6px; vertical-align: 1px; }   /* (a Chip) */
.ix-desc { padding: 0 4px; font-size: var(--text-sm); line-height: 1.4; color: var(--text-2); }

/* the footer: a note, and Start */
.ix-foot { display: flex; align-items: center; gap: 12px; padding: 16px 2px 0; }
.ix-foot-note { font-size: var(--text-sm); color: var(--text-3); }
.ix-foot .btn--primary { margin-left: auto; min-width: 104px; }
/* (.btn:hover's text colour outranks .btn--primary's: keep the label dark on the white button) */
#intro .ix-start:hover { color: #000; }
:root[data-theme="light"] #intro .ix-start:hover { color: #fff; }

/* the mock-up: each app draws a 200 × 124 scene; its intro.js sets --k to scale it to the tile */
.ix-stage {
  position: relative; width: 100%; aspect-ratio: 200 / 124; overflow: hidden;
  border-radius: var(--r-md); background: var(--ix-canvas);
  box-shadow: inset 0 0 0 0.5px var(--ix-stage-rim);
  pointer-events: none;
}
.ix-scene {
  position: absolute; left: 0; top: 0; width: 200px; height: 124px; box-sizing: border-box;
  transform-origin: 0 0; transform: scale(var(--k, 1));
  font-family: var(--font-ui); color: var(--text-1);
}

@media (prefers-reduced-motion: reduce) {
  #intro, #intro::before, #intro .sc-card, #intro .ix-opt, #intro .ix-radio::after { transition: none !important; }
}
:root.reduce-motion #intro .sc-card { transform: none; }

/* narrow: the windows stack, the card scrolls */
@media (max-width: 720px) {
  .ix-wins { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #intro .sc-card.ix-card { padding: 18px 16px 18px; }
}
@media (max-width: 420px) {
  #intro { padding: 12px 10px; }
  .ix-win { padding: 10px 8px; }
  .ix-opts { gap: 6px; }
  .ix-foot-note { display: none; }
  .ix-foot .btn--primary { flex: 1; }
}
@media print { #intro { display: none !important; } }