/* The cards people design in the form: paper, writing, ink, colour and how it's pinned.
   Used by the notes board (index.html). */
:root { --typewriter: "Courier Prime", "Courier New", monospace; --ink-blue: #1F3F9A; }

/* ---- Paper colour on the papers that aren't index cards ---- */
.note.paper-blue { background: #F4F8FD; } .note.paper-pink { background: #FCEEF0; } .note.paper-yellow { background: #FFF8D9; } .note.paper-cream { background: #FFFDF6; }

/* ---- Sticky note: no lines, the question at the top; yellow unless another colour was picked ---- */
.sticky { background: #FCE38A; padding: 26px 22px 18px; display: flex; flex-direction: column; font-family: var(--hand); color: var(--hand-ink);
  box-shadow: 0 1px 2px rgba(40,30,20,.12), 0 14px 22px -14px rgba(40,30,20,.45); }
.sticky.st-cream { background: #FFF6DC; } .sticky.st-pink { background: #F9C9D2; } .sticky.st-blue { background: #CFE3F7; } .sticky.st-yellow { background: #FCE38A; }
.sticky .sq { margin: 0 0 8px; color: var(--q-ink); font: 500 22px/1.3 var(--hand); }
.sticky .sa { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }
.sticky .ss { margin: 0; text-align: right; font-size: 19px; }

/* ---- Notebook page, torn out of a spiral notebook: round notches down the left where the
   spiral was; straight top and bottom. The question sits in the blank top above a
   heavier blue line; the note is written on the ruled lines below it ---- */
.notebook { --lh: 28px; --top: 56px; --nb: #FFFFFF; position: relative; padding: calc(var(--top) + 9px) 18px 18px 34px; background-color: var(--nb);
  background-image: linear-gradient(var(--nb) 0 calc(var(--top) + 10px - var(--lh) * .2), transparent calc(var(--top) + 10px - var(--lh) * .2)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), rgba(70,120,200,.25) calc(var(--lh) - 1px) var(--lh));
  background-position: 0 0, 0 calc(var(--top) + 10px - var(--lh) * .2);
  -webkit-mask: radial-gradient(circle at 0 12px, transparent 7px, #000 7.5px) 0 0 / 100% 24px repeat-y;
          mask: radial-gradient(circle at 0 12px, transparent 7px, #000 7.5px) 0 0 / 100% 24px repeat-y; }
/* the heavier line under the question is a real element, not a gradient stop: on a tilted card a hard
   gradient edge renders as a staircase, a box edge is smoothed */
.notebook::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--top) - 2px); height: 2px; background: rgba(70,120,200,.55); pointer-events: none; }
.notebook.paper-blue { --nb: #F4F8FD; } .notebook.paper-pink { --nb: #FCEEF0; } .notebook.paper-yellow { --nb: #FFF8D9; } .notebook.paper-cream { --nb: #FFFDF6; }
.nb-item { filter: drop-shadow(0 10px 12px rgba(40,30,20,.25)); }   /* the notches are masked, so the shadow sits on the item */
.notebook .card-q { position: absolute; left: 34px; right: 18px; top: 0; height: calc(var(--top) - 2px); display: flex; align-items: center; font: 500 calc(var(--lh) * .8)/var(--lh) var(--hand); color: var(--q-ink); }
.notebook .card-q span { white-space: normal; padding: 0; line-height: var(--lh); }
.notebook .answer { font-family: var(--hand); font-size: calc(var(--lh) * .8); line-height: var(--lh); color: var(--hand-ink); }
.notebook .sig { font-family: var(--hand); font-size: calc(var(--lh) * .76); line-height: var(--lh); text-align: right; margin: 0; }

/* ---- Pinned with a pushpin instead of tape ---- */
.pinned::before { content: ""; position: absolute; z-index: 3; top: -8px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F7A08C, #C4583D 55%, #8E3522); box-shadow: 0 3px 4px rgba(40,20,10,.45); }

/* Writing and ink come last, so they win over any paper's own font and colour */
/* ---- Writing. It changes the question too; the question stays red, that's ours ---- */
.tw .answer, .tw .sig, .tw .typed-text, .tw .slip-sig, .tw .sa, .tw .ss { font-family: var(--typewriter); font-size: 16px; }
.tw .slip-q, .tw .sq { font: 700 16px/1.4 var(--typewriter); }
.tw .card-q { font: 700 16px/var(--lh) var(--typewriter) !important; }
.tw .card-q span { position: relative; top: 2px; }   /* the typewriter face sits high in its line; this evens the gaps */
.ts .answer, .ts .sig, .ts .typed-text, .ts .slip-sig, .ts .sa, .ts .ss { font-family: var(--serif); font-weight: 400; font-size: 17px; }
.ts .slip-q, .ts .sq { font: 600 17px/1.4 var(--serif); }
.ts .card-q { font: 600 17px/var(--lh) var(--serif) !important; }
.hw .typed-text { font: 22px/1.3 var(--hand); }
.hw .slip-q { font: 500 22px/1.3 var(--hand); }
.hw .slip-sig { font: 19px/1.3 var(--hand); }

/* ---- Ink: black or blue ---- */
.ink-blue .answer, .ink-blue .sig, .ink-blue .typed-text, .ink-blue .slip-sig, .ink-blue .sa, .ink-blue .ss { color: var(--ink-blue); }