.notepad-desk {
  background: var(--window-face);
  padding: 20px 16px 32px;
}

.notepad {
  --rule: calc(1.75rem * var(--text-scale));
  --paper-bg: #fffdf2;
  --rule-color: #aac4dd;
  --margin-color: #d38b8b;
  --ink: #1c2f6b;
  --ink-faint: #55637f;
  --highlighter: rgba(255, 232, 120, 0.5);
  --hole-face: var(--window-face);
  --hole-edge: var(--bevel-dark-soft);
  --hole-w: 18px;
  --hole-pitch: 168px;

  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background-color: var(--paper-bg);
  color: var(--ink);
  border: 1px solid var(--bevel-dark);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
  padding: var(--rule) 32px calc(var(--rule) * 3) 96px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule) - 1px),
    var(--rule-color) calc(var(--rule) - 1px),
    var(--rule-color) var(--rule)
  );
}

[data-theme="dark"] .notepad {
  --paper-bg: #22262e;
  --rule-color: #3d4756;
  --margin-color: #7d4a4a;
  --ink: #d8e6ff;
  --ink-faint: #9fb0c8;
  --highlighter: rgba(120, 160, 255, 0.22);
}

[data-theme="contrast"] .notepad {
  --paper-bg: #ffffff;
  --rule-color: #6b6b6b;
  --margin-color: #000000;
  --ink: #000000;
  --ink-faint: #000000;
  --highlighter: transparent;
}

/* Red margin rule */
.notepad::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 62px;
  width: 2px;
  background: var(--margin-color);
}

/* Punch holes down the left edge, repeating at a fixed pitch so they stay
   evenly spaced however long the page runs. */
.notepad::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: var(--hole-w);
  pointer-events: none;
  /* Radii follow the strip width, so the circles stay whole when the
     breakpoint narrows them. */
  background-image: radial-gradient(
    circle at 50% calc(var(--hole-w) / 2),
    var(--hole-face) 0 calc(var(--hole-w) / 2 - 2px),
    var(--hole-edge) calc(var(--hole-w) / 2 - 2px) calc(var(--hole-w) / 2 - 1px),
    transparent calc(var(--hole-w) / 2 - 1px)
  );
  background-size: var(--hole-w) var(--hole-pitch);
  background-position: 0 54px;
  background-repeat: repeat-y;
}

/* --- Handwriting --- */
.notepad-body {
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Comic Sans MS", cursive;
  font-size: calc(1.1875rem * var(--text-scale));
  line-height: var(--rule);
}
[data-script="typed"] .notepad-body {
  font-family: "Courier New", Courier, monospace;
  font-size: calc(0.9375rem * var(--text-scale));
}

.notepad-body p,
.notepad-body h1,
.notepad-body h2,
.notepad-body h3,
.notepad-body ol,
.notepad-body ul {
  margin: 0 0 var(--rule) 0;
  line-height: var(--rule);
  font-weight: normal;
}

.notepad-heading {
  font-size: calc(1.875rem * var(--text-scale));
  line-height: calc(var(--rule) * 2);
  margin-bottom: 0;
  letter-spacing: 0.01em;
}
[data-script="typed"] .notepad-heading { font-size: calc(1.375rem * var(--text-scale)); }

.notepad-dateline {
  color: var(--ink-faint);
  font-size: calc(0.9375rem * var(--text-scale));
  border-bottom: 1px solid var(--margin-color);
  padding-bottom: 2px;
}
[data-script="typed"] .notepad-dateline { font-size: calc(0.8125rem * var(--text-scale)); }

/* --- Entries --- */
.note-list { list-style: none; padding: 0; margin: 0; }

.note-entry {
  position: relative;
  margin: 0 0 var(--rule) 0;
}

/* A highlighter wash on hover, which reads as marking your place rather
   than as a web page hover state. */
.note-entry:hover .note-title,
.note-entry:focus-within .note-title {
  background: var(--highlighter);
  box-shadow: 0 0 0 3px var(--highlighter);
}

.note-title {
  font-size: calc(1.375rem * var(--text-scale));
  line-height: var(--rule);
  margin: 0;
  padding-right: 8ch;
  display: inline;
}
[data-script="typed"] .note-title { font-size: calc(1rem * var(--text-scale)); font-weight: bold; }

/* What kind of thing this is, annotated out at the right margin. */
.note-kind {
  position: absolute;
  top: 0;
  right: 0;
  line-height: var(--rule);
  font-size: calc(0.75rem * var(--text-scale));
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--margin-color);
  white-space: nowrap;
}

.note-link {
  display: block;
  font-size: calc(1rem * var(--text-scale));
}
[data-script="typed"] .note-link { font-size: calc(0.875rem * var(--text-scale)); }

.note-entry a {
  color: var(--ink);
  text-decoration: underline;
  word-break: break-word;
}
.note-entry a:hover { color: var(--margin-color); }
.note-entry a:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }

.note-sub {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--rule) 0;
  color: var(--ink-faint);
  font-size: calc(1.0625rem * var(--text-scale));
}
[data-script="typed"] .note-sub { font-size: calc(0.875rem * var(--text-scale)); }
/* Hanging indent, so a wrapped line lines up under the text and not the dash */
.note-sub li {
  line-height: var(--rule);
  padding-left: 1.6em;
  text-indent: -1.6em;
}
.note-sub li::before { content: "\2014\00a0"; color: var(--ink-faint); }

/* Tick box, sitting in the gutter between the red rule and the text.
   min-width and min-height are reset because the shared button rule sets a
   32px floor, which is what used to push the box over the first letter. */
.note-check {
  position: absolute;
  left: -26px;
  top: calc((var(--rule) - 20px) / 2);
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 2px solid var(--ink-faint);
  box-shadow: none;
  color: var(--margin-color);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.note-check:hover { background: var(--highlighter); filter: none; }
.note-check:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.note-check .tick { visibility: hidden; }
.note-check[aria-pressed="true"] { background: transparent; border-color: var(--margin-color); }
.note-check[aria-pressed="true"] .tick { visibility: visible; }

.note-entry:has(.note-check[aria-pressed="true"]) .note-title {
  text-decoration: line-through;
  text-decoration-color: var(--margin-color);
}
.note-entry:has(.note-check[aria-pressed="true"]) .note-link,
.note-entry:has(.note-check[aria-pressed="true"]) .note-sub { opacity: 0.6; }

/* --- Small screens --- */
@media (max-width: 720px) {
  .notepad-desk { padding: 12px 6px 20px; }
  .notepad { padding-left: 62px; padding-right: 16px; }
  .notepad::before { left: 40px; }
  .notepad { --hole-w: 14px; --hole-pitch: 132px; }
  .notepad::after { left: 8px; }
  .note-check { left: -19px; width: 18px; height: 18px; }
  .note-title { padding-right: 0; }
  .note-kind { position: static; display: block; }
}

/* --- Print --- */
@media print {
  .notepad-desk { padding: 0; background: #fff; }
  .notepad {
    max-width: none; border: 0; box-shadow: none;
    background-image: none; padding: 0;
  }
  .note-kind { position: static; color: #000; }
  .notepad::before, .notepad::after, .note-check { display: none; }
  .notepad-body { font-family: "Times New Roman", Times, serif; }
}