/* A screen of the app, drawn on a reading page.
   ============================================================
   /students' two figures — a settings screen and an assignment card — and
   /privacy's consent screen. All three were screenshots, or in the last
   case nothing at all. As drawings they carry the walkthroughs' language —
   paper, a ruled edge, a hard offset cast, mono for anything that labels —
   and they carry their own text, so the words in them are readable,
   translatable, findable, and legible to a screen reader, which a raster
   screenshot never is.

   This is what the sheet is for: one screen standing still on a page of
   prose. A page that wants a sequence of them, with a card of commentary
   per screen and a scroll rig underneath, wants css/walkthrough-rig.css
   instead — this sheet is the cheap end of the same hand.

   Self-contained: the --wt-* values are the walkthroughs' own, borrowed here
   rather than imported, so this page does not have to load the scroll rig's
   stylesheet to show two pictures. js/wire-figures.js draws the boxes; with
   no JS the CSS edges below stand in, which is the same drawing a shade
   quieter. */

.sf {
  --sf-ink: #55555f;
  --sf-ink-strong: #111118;
  --sf-faint: #bab7b0;
  --sf-paper: #fffefb;
  --sf-cast: rgba(60, 50, 40, 0.16);
  --sf-hatch: rgba(60, 50, 40, 0.07);
  --sf-accent: #5a5ad1;
  --sf-accent-soft: rgba(90, 90, 209, 0.1);
  --sf-mono: "Roboto Mono", ui-monospace, Menlo, monospace;

  margin: 2.2rem 0;
  padding: 0;
}
html.dark-mode .sf {
  --sf-ink: #a8a8b4;
  --sf-ink-strong: #f1f1f5;
  --sf-faint: #4b4b5a;
  --sf-paper: #15151e;
  --sf-cast: rgba(226, 226, 255, 0.09);
  --sf-hatch: rgba(226, 226, 255, 0.05);
  --sf-accent: #8a8aff;
  --sf-accent-soft: rgba(138, 138, 255, 0.13);
}

/* ---- the window ---- */
.sf-win {
  position: relative;
  max-width: 33rem;
  margin: 0 auto;
  border: 1.5px solid var(--sf-ink);
  border-radius: 6px;
  background: var(--sf-paper);
  box-shadow: 5px 5px 0 var(--sf-cast);
  overflow: hidden;
}
.sf-narrow { max-width: 26rem; }

/* The title bar, hatched the way the deck's plate heads are. */
.sf-chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1.5px solid var(--sf-ink);
  background-image: repeating-linear-gradient(45deg,
    var(--sf-hatch) 0 2px, transparent 2px 7px);
}
.sf-dot {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--sf-faint);
  border-radius: 50%;
}
.sf-url {
  flex: 1;
  margin-left: 0.5rem;
  padding: 0.12rem 0.5rem;
  border: 1px dashed var(--sf-faint);
  border-radius: 4px;
  font-family: var(--sf-mono);
  font-size: 0.68rem;
  color: var(--sf-ink);
  text-align: center;
}

/* The app's own header — the one band that keeps its colour, because the
   purple bar is how a student recognises the screen. */
.sf-app {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1.5px solid var(--sf-ink);
  background: var(--sf-accent-soft);
  font-family: var(--sf-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--sf-ink-strong);
}
/* The page sets its own width on content images; this one is an icon in a
   bar, not a figure, so it says so itself. */
.sf-app img {
  flex: none;
  width: 1.15rem !important;
  height: 1.15rem;
  margin: 0;
  border-radius: 0;
}

.sf-body { padding: 1rem 1.1rem 1.15rem; }
.sf-h {
  margin: 0 0 0.7rem;
  font-family: var(--sf-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sf-ink-strong);
}
.sf-h + .sf-h, .sf-row + .sf-h { margin-top: 1.4rem; }
.sf-chev { color: var(--sf-accent); font-size: 0.7em; }

/* A setting: its wording on the left, its switch on the right. */
.sf-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--sf-ink-strong);
}
.sf-row + .sf-row { border-top: 1px dashed var(--sf-faint); }
/* The one row the page is about, tinted the way the app tints it. */
.sf-hl {
  margin: 0.9rem -1.1rem 0;
  padding: 0.75rem 1.1rem;
  border-top: 1.5px solid var(--sf-ink);
  background: var(--sf-accent-soft);
  font-weight: 600;
}
.sf-note {
  margin: 0.55rem -1.1rem 0;
  padding: 0 1.1rem 0.2rem;
  background: var(--sf-accent-soft);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sf-ink);
}
.sf-note u { text-underline-offset: 0.15em; }

/* The switch. On is filled; the word rides inside it, as it does in the app. */
.sf-toggle {
  flex: none;
  min-width: 3.1rem;
  padding: 0.12rem 0.4rem;
  border: 1.5px solid var(--sf-ink);
  border-radius: 3px;
  font-family: var(--sf-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--sf-ink);
  background:
    linear-gradient(to right, var(--sf-accent) 0 55%, transparent 55% 100%);
  color: var(--sf-paper);
}

/* ---- the assignment card ---- */
.sf-card {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem 1.2rem;
  border: 1.5px solid var(--sf-ink);
  border-radius: 8px;
  /* The card a student is looking for is a purple one; the drawing keeps
     that and lets the ink sit on top of it. */
  background: var(--sf-accent-soft);
  box-shadow: 5px 5px 0 var(--sf-cast);
}
.sf-card-h {
  margin: 0 0 0.6rem;
  font-family: var(--sf-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sf-ink-strong);
}
.sf-meta {
  margin: 0 0 0.75rem;
  font-family: var(--sf-mono);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--sf-ink);
}
.sf-meta b { color: var(--sf-ink-strong); font-weight: 700; }
.sf-topic {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 0.3rem;
}
.sf-ava {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 1.5px solid var(--sf-ink);
  border-radius: 50%;
  background-image: repeating-linear-gradient(45deg,
    var(--sf-hatch) 0 2px, transparent 2px 6px);
}
.sf-topic-t {
  margin: 0;
  font-family: var(--sf-mono);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sf-ink-strong);
}
.sf-topic-s {
  margin: 0.1rem 0 0;
  font-size: 0.76rem;
  color: var(--sf-ink);
}
.sf-topic-s b { font-family: var(--sf-mono); font-weight: 700; }

.sf figcaption {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  padding-left: 0.9rem;
  border-left: 2px dashed var(--sf-faint);
  font-size: 0.83rem;
  line-height: 1.6;
  /* Left, whatever the page does with figures around it: a caption on a
     dashed margin rule that is also centred reads as neither. */
  text-align: left;
  color: var(--text-soft, #3f3f46);
}

/* ---- the drawn edge ----
   js/wire-figures.js sets html.sf-ink, which is what takes the CSS edges
   off, so without the script the ruled boxes above stand. */
html.sf-ink .sf .hi-box {
  position: relative;
  border-color: transparent;
  border-radius: 0;
}
.sf .hi-ink {
  position: absolute;
  left: -7px;
  top: -7px;
  overflow: visible;
  pointer-events: none;
  fill: none;
  z-index: 1;
}
.sf .hi-ink path {
  stroke: var(--sf-ink);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sf .hi-ink path.hi-p2 { stroke-width: 0.85; stroke-opacity: 0.5; }
@keyframes sf-draw { to { stroke-dashoffset: 0; } }
html.sf-ink .sf .hi-ink path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.sf-ink .sf .hi-on > .hi-ink path {
  animation: sf-draw 0.34s cubic-bezier(0.4, 0.05, 0.25, 1) forwards;
  animation-delay: calc(var(--b, 0) * 0.05s + var(--i, 0) * 0.03s);
}
@media (prefers-reduced-motion: reduce) {
  html.sf-ink .sf .hi-ink path { stroke-dashoffset: 0; animation: none; }
}

@media (max-width: 620px) {
  .sf-win, .sf-card { max-width: none; }
  .sf-row { flex-direction: column; gap: 0.4rem; }
}

/* ============================================================
   A form inside a drawn screen
   ============================================================
   The consent screen on /privacy: a paragraph, a heading, a list of key
   points, four checkboxes and the button that goes on. Same parts the
   walkthrough's own consent frame is built from (walkthrough-student.css),
   said here at reading size and standing still.

   Everything in a drawn screen is mono. The app itself is not — but a
   drawing of an interface is a diagram of it, and in this language a
   diagram labels rather than speaks. */
.sf-p {
  font-family: var(--sf-mono);
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--sf-ink-strong);
  margin: 0 0 0.7rem;
}
.sf-p b { font-weight: 700; }
.sf-list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}
.sf-list li {
  position: relative;
  padding-left: 0.85rem;
  font-family: var(--sf-mono);
  font-size: 0.73rem;
  line-height: 1.6;
  color: var(--sf-ink-strong);
  margin: 0 0 0.18rem;
}
/* A middot rather than a disc: the app's own list marker, and a disc at
   this size is a blob. */
.sf-list li::before {
  content: "\00B7";
  position: absolute;
  left: 0.2rem;
  font-weight: 700;
}

/* ---- checkbox rows ----
   The box is ruled rather than drawn, which is the rule everywhere in this
   language: a drawn box is a thing you read and a ruled one is a thing you
   press. Ticked, it takes the accent as its fill, so which boxes are on
   reads at a glance without a second colour. */
.sf-checks {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
}
.sf-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-family: var(--sf-mono);
  font-size: 0.73rem;
  line-height: 1.55;
  color: var(--sf-ink-strong);
  margin: 0 0 0.55rem;
}
.sf-box {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  border: 1.5px solid var(--sf-ink);
  border-radius: 2px;
  background: var(--sf-paper);
}
.sf-box.is-on { background: var(--sf-accent); border-color: var(--sf-accent); }
.sf-box.is-on::after {
  content: "\2713";
  display: block;
  margin-top: -0.15em;
  text-align: center;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--sf-paper);
}
/* The one box on this screen that is genuinely optional, and is drawn
   unticked to say so. Dashed rather than ruled — it is the one control
   here the reader is being told they may leave alone. */
.sf-box.is-optional { border-style: dashed; }

.sf-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.1rem;
}
.sf-btn {
  display: inline-block;
  border: 1.5px solid var(--sf-ink);
  border-radius: 3px;
  background: var(--sf-paper);
  box-shadow: 2px 2px 0 var(--sf-cast);
  padding: 0.35rem 1.1rem;
  font-family: var(--sf-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--sf-ink-strong);
}