/* chapter-kit: the css of what the chapters' clips share. Two sections, as the two builders wrote them (the tender chapters' product
   windows, the sales department's), moved here from ch-socialent/sb-chapter.css and ch-seller/ch-kit.css by A, unchanged. Needs
   ../base/base.css, ../chapter/chapter.css, ../motion/motion.css, ../clips/clips.css. */

/* ======================== the tender chapters (ch-socialent, ch-milan), from sb-chapter.css ======================== */
/* sb-chapter: what a chapter's opening needs (shared by ch-socialent and ch-milan; written by builder C, to be promoted to the
   kit). Two jobs.
   1. The scroll-open: the opening clip sits in a tall track; a sticky stage keeps it in the middle of the screen while the
      scroll goes by, and sb-chapter.js carries it up to its full size on a spring (motion rule 7: half triggered, half scroll).
   2. A picture of a product on black: the site is black and white and colour lives only in tags, so a clip is a window of the
      product, in the product's own colours, floating on the frame. A chapter sets the --s-* tokens on its frames (Atlas's
      paper and indigo for ch-socialent, the portal's for ch-milan) and the pieces below wear them. */

/* ---------- the scroll-open ---------- */
.sb-track{position:relative;height:calc(100vh + 80vh);height:calc(100svh + 80svh)}
.sb-stick{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;display:grid;place-items:center;padding:calc(var(--barra-h,60px) + 8px) 0 22px}
.sb-film{width:min(1320px,100% - 2 * var(--gutter,16px),calc((100vh - 130px) * 1200 / 515));width:min(1320px,100% - 2 * var(--gutter,16px),calc((100svh - 130px) * 1200 / 515));transform-origin:50% 50%;will-change:transform;border-radius:22px;box-shadow:0 40px 120px -50px rgb(0 0 0/.9)}
@media (max-width:699px){
  .sb-track{height:calc(100vh + 50vh);height:calc(100svh + 50svh)}
  .sb-film{width:calc(100% - 2 * var(--gutter,16px))}
}
@media (prefers-reduced-motion:reduce){
  .sb-track{height:auto}
  .sb-stick{position:relative;height:auto;padding:0}
  .sb-film{width:min(1320px,100% - 2 * var(--gutter,16px));will-change:auto}
}

/* ---------- a picture of a product on black ---------- */
.sb-frame.cl-frame{background:radial-gradient(80% 90% at 50% 0%,#17171d,#0b0b0e 70%);box-shadow:inset 0 0 0 1px rgb(255 255 255/.07)}
.sb-frame{
  --s-panel:#fff;--s-panel2:#f7f7fa;--s-inset:#efeff4;--s-ink:#17171c;--s-ink2:#494952;--s-ink3:#74747f;--s-hair:rgb(20 20 40/.09);--s-hair2:rgb(20 20 40/.16);
  --s-accent:#17171c;--s-accent-ink:#17171c;--s-on-accent:#fff;--s-soft:#ececf2;
  --s-ok-bg:#e4f4eb;--s-ok-ink:#127a3e;--s-ok:#22a45a;--s-att-bg:#fff0d8;--s-att-ink:#a65a00;--s-att:#ff9f0a;--s-red-bg:#fce9ea;--s-red-ink:#c0262d;--s-red:#e5484d;--s-info-bg:#eaeffb;--s-info-ink:#2a62d9;
  --s-ring:0 0 0 1px rgb(20 20 40/.07),0 18px 40px -16px rgb(0 0 0/.6);
}
.sb-frame .cl-cv{color:var(--s-ink)}
.sb-frame .cl-caret{background:var(--s-accent)}
.sb-p{border-radius:16px;background:var(--s-panel);box-shadow:var(--s-ring);color:var(--s-ink)}
.sb-hd{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-bottom:1px solid var(--s-hair)}
.sb-hd b{font-size:14.5px;font-weight:620;letter-spacing:-.01em}
.sb-hd>small,.sb-sub{margin-left:auto;font-size:12.5px;color:var(--s-ink3);font-weight:500}
.sb-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--s-soft);color:var(--s-accent-ink)}
.sb-ic svg{width:16px;height:16px}
.sb-pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--s-inset);color:var(--s-ink2)}
.sb-pill svg{width:13px;height:13px}
.sb-pill.ok{background:var(--s-ok-bg);color:var(--s-ok-ink)}
.sb-pill.att{background:var(--s-att-bg);color:var(--s-att-ink)}
.sb-pill.red{background:var(--s-red-bg);color:var(--s-red-ink)}
.sb-pill.info{background:var(--s-info-bg);color:var(--s-info-ink)}
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border-radius:9px;background:var(--s-accent);color:var(--s-on-accent);font-size:13.5px;font-weight:620;white-space:nowrap;transition:background-color .2s var(--e-ui),transform .12s var(--e-ui),box-shadow .2s var(--e-ui)}
.sb-btn svg{width:14px;height:14px}
.sb-btn.ghost{background:var(--s-inset);color:var(--s-ink)}
.sb-btn.ok{background:var(--s-ok-bg);color:var(--s-ok-ink)}
.sb-btn.hover{box-shadow:0 8px 20px -8px var(--s-accent)}
.sb-btn.ghost.hover{background:var(--s-soft);box-shadow:none}
/* what is still being worked out shines, then turns into its value */
.sb-load{color:transparent;background:linear-gradient(90deg,rgb(20 20 40/.16) 20%,rgb(20 20 40/.4) 50%,rgb(20 20 40/.16) 80%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;animation:cl-shine 1.5s linear infinite;font-size:12.5px;white-space:nowrap}
/* a source chip: where a fact comes from (every fact shown carries its source) */
.sb-src{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 6px;border-radius:6px;background:var(--s-inset);color:var(--s-ink2);font-size:12px;font-weight:540;white-space:nowrap}
.sb-src svg{width:12px;height:12px;color:var(--s-ink3)}
.sb-ft{display:inline-grid;place-items:center;width:30px;height:18px;border-radius:4px;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;flex:none}
.sb-ft.pdf{background:#e5484d}.sb-ft.doc{background:#3e7bf6}.sb-ft.xls{background:#22a45a}.sb-ft.ppt{background:#ff8a1f}
/* the caption inside a clip, on the black: a sentence that turns into the next (words out of a blur) */
.sb-cap{position:absolute;left:48px;top:30px;right:48px;height:48px;font-family:var(--serif);font-weight:300;font-size:36px;line-height:1.1;letter-spacing:-.03em;color:#fff;pointer-events:none}
.sb-cap>span{position:absolute;left:0;top:0;white-space:nowrap}
.sb-cap em{font-style:normal;color:rgb(255 255 255/.55)}
.cl-wide.narrow .sb-cap{font-size:24px;top:26px}
/* a dashed line between two things, drawn in the camera */
.sb-links{left:0;top:0;width:1200px;height:515px;overflow:visible;pointer-events:none}
.sb-link{fill:none;stroke:rgb(255 255 255/.55);stroke-width:1.6;stroke-dasharray:1}


/* ======================== the sales department and the back office (ch-seller, ch-paris), from ch-kit.css ======================== */
/* ch-kit: the pieces the sales department's and the back office's chapters share (builder D). Scoped to the two
   chapters. Needs ../base/base.css, ../chapter/chapter.css, ../motion/motion.css, ../clips/clips.css.
   Colour: the site has none outside tags (the guide's pale pill and solid dot), so the product windows drawn in the
   clips are black, white and grey, and what is a state (done, to look at, wrong) is a tag-like pill with a dot. */

/* ---------- the opening: a track with a sticky box, the film in the middle of it (grow, pin, leave) ---------- */
:is(#ch-seller,#ch-paris) .dk-track{position:relative;height:calc(100svh + 70svh)}
:is(#ch-seller,#ch-paris) .dk-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding-top:calc(var(--barra-h) * .6)}
:is(#ch-seller,#ch-paris) .dk-film{width:100%;transform-origin:50% 50%;will-change:transform}
:is(#ch-seller,#ch-paris) .dk-film .cl-film{width:min(100%,calc((100svh - var(--barra-h) - 96px) * 16 / 9));margin:0 auto}
/* (the phone's window on a film, 560 by 620, is the kit's now: data-narrow on the frame, clips.css and clips.js) */
@media (prefers-reduced-motion:reduce){
  :is(#ch-seller,#ch-paris) .dk-track{height:auto}
  :is(#ch-seller,#ch-paris) .dk-stick{position:relative;height:auto;padding:0}
  :is(#ch-seller,#ch-paris) .dk-film{transform:none!important}
}
/* the frames wear the page's own greys, never a navy */
:is(#ch-seller,#ch-paris) .cl-frame{background:var(--piano);box-shadow:inset 0 0 0 1px var(--riga)}

/* ---------- the product, drawn as a light window (what the people who use it see) ---------- */
.dk-app{
  --p-bg:oklch(100% 0 0);--p-bg2:oklch(97.2% 0 0);--p-bg3:oklch(94% 0 0);--p-line:oklch(0% 0 0/.09);--p-line2:oklch(0% 0 0/.17);
  --p-ink:oklch(14% 0 0);--p-ink2:oklch(0% 0 0/.66);--p-ink3:oklch(0% 0 0/.44);
  --p-ok:oklch(52% .14 155);--p-att:oklch(60% .14 65);--p-red:oklch(54% .17 25);
  background:var(--p-bg);color:var(--p-ink);border-radius:18px;font-family:var(--font);font-size:14px;line-height:1.35;letter-spacing:-.004em;
  box-shadow:0 0 0 1px oklch(100% 0 0/.1),0 50px 90px -40px #000;overflow:hidden;-webkit-font-smoothing:antialiased}
.dk-app b{font-weight:600}
.dk-app small{font-size:12.5px;color:var(--p-ink3)}
.dk-app svg{width:16px;height:16px;flex:none}
/* a tag as the guide draws it: a pale pill, a solid dot */
.dk-pill{--dot:var(--p-ink3);display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 9px;border-radius:999px;background:var(--p-bg2);color:var(--p-ink2);font-size:12.5px;font-weight:500;white-space:nowrap}
.dk-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot);flex:none}
.dk-pill svg{display:none}
.dk-pill.ok{--dot:var(--p-ok);background:oklch(52% .14 155/.11);color:oklch(34% .09 155)}
.dk-pill.att{--dot:var(--p-att);background:oklch(60% .14 65/.13);color:oklch(40% .09 65)}
.dk-pill.red{--dot:var(--p-red);background:oklch(54% .17 25/.1);color:oklch(40% .12 25)}
.dk-pill.ink{--dot:oklch(100% 0 0);background:var(--p-ink);color:oklch(100% 0 0)}
/* a square tile with an icon or a monogram */
.dk-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--p-bg2);box-shadow:inset 0 0 0 1px var(--p-line);color:var(--p-ink);flex:none}
.dk-tile svg{width:19px;height:19px}
.dk-tile.mono{background:var(--p-ink);color:oklch(100% 0 0);font-size:12.5px;font-weight:600;letter-spacing:.02em;box-shadow:none}
/* a white button, a black one */
.dk-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 15px;border-radius:10px;background:var(--p-ink);color:oklch(100% 0 0);font-size:13.5px;font-weight:560;white-space:nowrap;transition:background-color .2s var(--e-ui),transform .12s var(--e-ui),box-shadow .2s var(--e-ui)}
.dk-btn svg{width:15px;height:15px}
.dk-btn.line{background:var(--p-bg);color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-line2)}
.dk-btn.hover{background:oklch(32% 0 0)}
.dk-btn.line.hover{background:var(--p-bg2)}
.dk-btn.press{transform:scale(.95)}
/* the thin bars that stand for text before it is read */
.dk-sk{display:block;height:9px;border-radius:5px;background:var(--p-bg3)}
.cl-frame .dk-app .load{background:linear-gradient(90deg,oklch(0% 0 0/.2) 20%,oklch(0% 0 0/.55) 50%,oklch(0% 0 0/.2) 80%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;font-size:13px}
.dk-ping{position:absolute;inset:0;border-radius:inherit;border:2px solid currentColor;pointer-events:none}
/* the cursor is the kit's now (motion.js, motion.css: grey with a white rim); on these two it sits above the product windows */
:is(#ch-seller,#ch-paris) .cl-frame .mg-cursor{z-index:60}

/* the sentence between the opening and the steps (the kit's big-sentence), as big as the chapter's title */
:is(#ch-seller,#ch-paris) .frase{margin-top:clamp(0px,2vw,24px)}
:is(#ch-seller,#ch-paris) .fr-b{margin-top:.5em}