/* plotr Mobile: the experience on a phone (up to 860px wide).
   Every step is the same screen: a step header, the stage, a story card, an action bar.
     ┌ header  52px  wordmark · progress segments · "3 of 11"
     │ stage   fills  the van, the brief, the files; software in presentation mode
     │ card    ≤46dvh instruction · title · lead · "More about this" · a question when it's their turn
     └ actions 72px  one primary button, one text action, always in the same place
   Rules: one job per screen · the next action always in the action bar · the card never resizes by dragging ·
   longer reading goes to the More panel · software is watched in place and used full screen · one question at a time.
   Tokens are --m-*; desktop keeps the experience's own layout. */

/* the step count, progress bar and back button show on phones only */
.xp-count, .m-prog, .m-back, .m-fullbar { display: none; }

:root {
  /* colour (from the experience) */
  --m-ink: #0E1414;          /* text, borders of controls, the primary button's edge */
  --m-paper: #F7F8F7;        /* page and card ground */
  --m-card: #FFFFFF;         /* raised surfaces on the stage */
  --m-mint: #2BD4A0;         /* the primary action, progress, the marker */
  --m-mint-ink: #0B7A58;     /* mint as text or a line on paper (4.9:1) */
  --m-mint-soft: #E9FBF4;    /* the instruction's ground */
  --m-body: #33403D;         /* running text on paper (10:1) */
  --m-slate: #5F6A72;        /* secondary text on paper and card (5.2:1) */
  --m-mat: #E6ECE9;          /* the cutting mat: stage ground */
  --m-mat-line: #D3DCD8;     /* the mat's 20 mm grid */
  --m-mat-major: #C3CFCA;    /* the mat's 100 mm grid, unreached progress */
  --m-rule: #DCE1DE;         /* hairlines between sections */
  --m-error-ground: #FFF4F2; --m-error-line: #F1C4BD; --m-error-ink: #A03A2A;
  /* type: Satoshi (Fontshare), system fallback */
  --m-font: Satoshi, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* space: a 4px base */
  --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 20px; --m-6: 24px; --m-8: 32px;
  /* radius */
  --m-r-sm: 8px; --m-r: 12px; --m-r-lg: 16px; --m-r-card: 24px;
  /* layout */
  --m-header: 52px; --m-actions: 72px; --m-tap: 48px; --m-card-max: 46dvh; --m-card-tall: 70dvh;
  /* elevation */
  --m-lift: 0 -12px 32px -20px rgba(14, 20, 20, .35);
  --m-raise: 0 18px 40px -28px rgba(14, 20, 20, .4);
  /* motion */
  --m-fast: 160ms; --m-base: 280ms; --m-slow: 480ms; --m-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 860px) {
  /* ---------------------------------------------------------------- the screen */
  .xp { grid-template-rows: var(--m-header) minmax(0, 1fr); }
  .xp-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }

  /* ---------------------------------------------------------------- StepHeader: wordmark, progress segments, count */
  .xp-top { gap: var(--m-3); padding: 0 var(--m-4); height: var(--m-header); }
  .xp-top .wm { font-size: 20px; }
  .xp-job { display: none; }
  .xp-top nav { display: none; }
  .m-back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: calc(-1 * var(--m-2)); border: 0; border-radius: var(--m-r); background: none; font: inherit; font-size: 28px; line-height: 1; color: var(--m-ink); cursor: pointer; }
  .m-back[hidden] { display: none; }
  .m-prog { display: block; flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: var(--m-mat-major); overflow: hidden; }
  .m-prog i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--m-mint); box-shadow: inset -2px 0 0 var(--m-ink); transition: width var(--m-slow) var(--m-ease); }
  .xp-count { display: block; flex: none; font-size: 13px; font-weight: 700; color: var(--m-slate); font-variant-numeric: tabular-nums; }

  /* ---------------------------------------------------------------- Stage */
  .stage > .pane { padding: var(--m-4); }
  .brief { grid-template-columns: 1fr; gap: var(--m-3); }
  .cons { grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--m-1) 9% var(--m-2); width: 100%; scrollbar-width: none; }
  .cons::-webkit-scrollbar { display: none; }
  .con { scroll-snap-align: center; }
  .stage.intro .pane { align-items: flex-start; padding-top: 44px; }
  .hero { width: 100%; }
  .hero .dim { display: none; }
  .hero .cap { top: -26px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; right: 0; }

  /* ---------------------------------------------------------------- StoryCard: one fixed card, never dragged */
  .side {
    position: relative; z-index: 3; margin-top: calc(-1 * var(--m-r-card)); max-height: var(--m-card-max);
    border: 0; border-top: 1px solid var(--m-rule); border-radius: var(--m-r-card) var(--m-r-card) 0 0; box-shadow: var(--m-lift);
    background: var(--m-paper); padding: var(--m-5) var(--m-4) 0; gap: var(--m-3); overflow-y: auto; overscroll-behavior: contain;
  }
  .side.tall { max-height: var(--m-card-tall); }
  .side .grab, .side .more, .side .tasks, .side .ask .why, .side .short:not(.donow) { display: none !important; }
  .side .hh { font-size: 30px; line-height: 1.04; max-width: none; }
  .side h2 { font-size: 23px; line-height: 1.1; max-width: none; }
  .side p { font-size: 15px; line-height: 1.5; }
  .side .lead { font-size: 16px; }

  /* Instruction: what to do now, labelled What to do / Watch / Your turn */
  .side .donow { font-size: 15px; line-height: 1.4; padding: var(--m-2) var(--m-3); border-radius: var(--m-r); }
  .side .donow .dl { font-size: 12px; }

  /* More about this: a text action that opens the reading in a full-screen panel */
  .m-more { align-self: flex-start; min-height: 40px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--m-ink);
    text-decoration: underline; text-decoration-color: var(--m-mint); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }

  /* OptionList: a question's answers as full-width rows */
  .side .ask { border-top: 0; padding-top: 0; gap: var(--m-2); }
  .side .ask .q { font-size: 17px; }
  .side .chips { display: grid; gap: var(--m-2); }
  .side .chips button { width: 100%; min-height: 52px; text-align: left; padding: 0 var(--m-4); border-radius: var(--m-r); font-size: 16px; }

  /* ActionBar: always the last thing in the card, pinned to the bottom edge */
  .side .acts { order: 99; position: sticky; bottom: 0; z-index: 2; margin: auto calc(-1 * var(--m-4)) 0; padding: var(--m-3) var(--m-4) calc(var(--m-3) + env(safe-area-inset-bottom, 0px));
    background: var(--m-paper); border-top: 1px solid var(--m-rule); display: flex; gap: var(--m-3); align-items: center; flex-wrap: nowrap; }
  .side .acts:only-of-type { margin-top: auto; }
  .side .go { flex: 1; min-width: 0; min-height: 52px; font-size: 17px; border-radius: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--m-4); }
  .side .ghost { flex: none; min-height: var(--m-tap); font-size: 15px; padding: 0 var(--m-2); }
  .side .acts .ghost:only-child { flex: 1; text-align: center; }

  /* the demo caption and its take-over, inside the card */
  .m-tryrow { display: flex; gap: var(--m-4); flex-wrap: wrap; }
  .m-tryrow .ghost { padding: 0; }
  .side .demo-bar { border: 0; padding: 0; background: none; }
  .side .demo-bar .say { display: none; }

  /* ---------------------------------------------------------------- Full screen: using the software yourself */
  .xp.full .stage { position: fixed; inset: var(--m-header) 0 0 0; z-index: 40; }
  .xp.full .side { display: none; }
  .xp.full .m-fullbar { position: fixed; inset: 0 0 auto 0; z-index: 41; height: var(--m-header); display: flex; align-items: center; gap: var(--m-3);
    padding: 0 var(--m-4); padding-top: env(safe-area-inset-top, 0px); background: var(--m-ink); color: var(--m-paper); }
  .m-fullbar p { margin: 0; flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
  .m-fullbar button { flex: none; min-height: 40px; padding: 0 var(--m-4); border-radius: var(--m-r); border: 1.5px solid var(--m-mint); background: var(--m-mint); color: var(--m-ink); font: inherit; font-weight: 700; cursor: pointer; }

  /* ---------------------------------------------------------------- MorePanel: the longer reading */
  dialog.m-panel { border: 0; padding: 0; margin: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; background: var(--m-paper); color: var(--m-ink); }
  dialog.m-panel::backdrop { background: rgba(14, 20, 20, .4); }
  .m-panel .in { display: flex; flex-direction: column; gap: var(--m-4); padding: var(--m-6) var(--m-4) calc(var(--m-8) + env(safe-area-inset-bottom, 0px)); padding-top: calc(var(--m-6) + env(safe-area-inset-top, 0px)); overflow-y: auto; height: 100%; box-sizing: border-box; }
  .m-panel .more { display: block !important; }
  .m-panel h2 { margin: 0; font-size: 23px; line-height: 1.1; font-weight: 900; letter-spacing: -.03em; }
  .m-panel p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--m-body); }
  .m-panel .close { align-self: stretch; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--m-ink); background: var(--m-card); font: inherit; font-size: 17px; font-weight: 700; color: var(--m-ink); cursor: pointer; margin-top: auto; }

  /* ---------------------------------------------------------------- motion */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes mStage { from { opacity: 0; transform: translateX(28px); } }
    @keyframes mUp { from { opacity: 0; transform: translateY(12px); } }
    .stage.enter > .pane, .stage.enter iframe { animation: mStage var(--m-slow) var(--m-ease) both; }
    .side.enter > * { animation: mUp var(--m-base) var(--m-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
    .side.enter > .acts { animation: none; }
    dialog.m-panel[open] .in { animation: mUp var(--m-base) var(--m-ease) both; }
  }
}