/* The guides' notebook look, on trial on the interactive lessons (the ones
   built on the card template: cards, scenes, flows, quizzes). It applies only
   under html.gd-nb, which ?look=notebook sets and ?look=classic clears (kept
   on the device as bb-look). Ruled sections in place of boxed cards, small
   corners in place of pills, underlined choices, one filled button for the
   main action, no offset shadows. If it stays, it folds into the lessons'
   own styles and this file goes. */

/* chips and small buttons: square-cornered, not pills */
.gd-nb .pill, .gd-nb .brand-pill { border-radius: 2px; }
.gd-nb .pill.ghost { border-width: 1px; }
.gd-nb .tbtn { border-width: 1px; border-radius: 3px; }
.gd-nb .hl-switch { border-radius: 3px; }

/* the three cards under a heading: ruled, not boxed */
.gd-nb .cards { gap: 22px 26px; }
.gd-nb .card, .gd-nb .card:nth-child(2) { padding: 12px 0 0; background: none; border: 0; border-top: 1.5px solid var(--ink); border-radius: 0; box-shadow: none; }

/* drawings sit on a plate with a hairline */
.gd-nb figure, .gd-nb .stage, .gd-nb .map, .gd-nb .scene, .gd-nb .flow, .gd-nb .wp, .gd-nb .sim {
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 4px; box-shadow: none; }
.gd-nb .simcv { border-radius: 2px; }
.gd-nb .readout, .gd-nb .dwrap.stack .readout { border: 0; border-radius: 0; box-shadow: inset 3px 0 0 var(--green); }

/* scene choices: words, the chosen one underlined */
.gd-nb .seg { gap: 4px 20px; box-shadow: inset 0 -1px 0 var(--line); }
.gd-nb .seg button { padding: 9px 0; border: 0; border-radius: 0; color: var(--soft); }
.gd-nb .seg button:hover { background: none; color: var(--ink); }
.gd-nb .seg button.on { background: none; color: var(--ink); box-shadow: inset 0 -3px 0 var(--green); }

/* step-throughs: the steps as a row of short lines, Next the one filled button */
.gd-nb .dot { width: 18px; height: 4px; border: 0; border-radius: 0; background: var(--line); }
.gd-nb .dot.on { background: var(--pink); }
.gd-nb .fbtn { border-radius: 3px; }

/* drag and fill: terms like index cards */
.gd-nb .term { border-width: 1px; border-radius: 3px; }
.gd-nb .gap { border-radius: 0; }
.gd-nb .chip.touch-dragging { box-shadow: 0 6px 18px rgba(20, 36, 26, .22); }
.gd-nb .node:hover, .gd-nb .node.an:hover { box-shadow: 0 2px 10px rgba(20, 36, 26, .18); }
.gd-nb .firebtn:hover { box-shadow: none; }

/* the quiz: ruled questions, the options a ruled list */
.gd-nb .q { padding: 14px 0 4px; background: none; border: 0; border-top: 1.5px solid var(--ink); border-radius: 0; }
.gd-nb .opts { gap: 0; border-top: 1px solid var(--line); }
.gd-nb .opt { padding: 12px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.gd-nb .opt:hover { background: color-mix(in srgb, var(--card) 70%, transparent); }
.gd-nb .opt.right { box-shadow: inset 3px 0 0 var(--green); }
.gd-nb .opt.wrong { box-shadow: inset 3px 0 0 var(--pink-deep); }
.gd-nb .final { border-radius: 4px; }