/* The site of kobo-hardcover-sync (DESIGN.md, the site). The first viewport
   is the claim, the download card, and one row of the tool's own Books page
   at full size, with the proof mark drawn on it; under it the three the sync
   runs between, the Kobo, your computer and Hardcover, one card each. The ground is white by day and near-black at night; the two
   faces are the project's own files; nothing is loaded from elsewhere. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/SchibstedGrotesk-latin.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(fonts/SchibstedGrotesk-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/SourceSerif4-latin.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --ground: #fbfbfd; --ink: #17191c; --graphite: #4a4f57;
  --quiet: #f1f0f6; --quiet-edge: #e4e2ec;
  --flag: #17191c; --on-flag: #ffffff; --flag-quiet: #c9c7d2; --flag-code: #2b2d33;
  --link: #b0246f; --focus: #b0246f;
  --select: #fbd5e5;
  /* The cards: the same in both lights. A card does not change with the room. */
  --plum: linear-gradient(200deg, #ff6b6b 0%, #c23c8c 45%, #5b2a86 100%);
  --teal: linear-gradient(200deg, #c6f26b 0%, #22c1a0 22%, #0f766e 42%, #0b5c57 100%);
  --teal-list: linear-gradient(200deg, #c6f26b 0%, #22c1a0 5%, #0f766e 11%, #0b5c57 100%);  /* the lime a corner, so the white heading stands on the deep teal at every width */
  --cobalt: linear-gradient(200deg, #38bdf8 0%, #2563eb 25%, #1e3a8a 100%);
  --on-card: #ffffff;
  --scrim: linear-gradient(180deg, rgba(13, 12, 20, 0) 40%, rgba(13, 12, 20, 0.55) 62%, rgba(13, 12, 20, 0.92) 100%);
  --r-card: 18px; --r-ctl: 12px; --r-shot: 10px;
  --lift: 0 24px 48px -28px rgba(23, 25, 28, 0.45);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0d0c14; --ink: #f2f1f6; --graphite: #b4b2c0;
    --quiet: #1a1926; --quiet-edge: #26253a;
    --flag: #ffffff; --on-flag: #17191c; --flag-quiet: #4a4f57; --flag-code: #f1f0f6;
    --link: #ff8fc2; --focus: #ff8fc2;
    --select: #6b1d4c;
    --lift: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0d0c14; --ink: #f2f1f6; --graphite: #b4b2c0;
  --quiet: #1a1926; --quiet-edge: #26253a;
  --flag: #ffffff; --on-flag: #17191c; --flag-quiet: #4a4f57; --flag-code: #f1f0f6;
  --link: #ff8fc2; --focus: #ff8fc2;
  --select: #6b1d4c;
  --lift: none;
}

* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
:root { accent-color: var(--link); caret-color: var(--link); scrollbar-color: var(--graphite) transparent; }
::selection { background: var(--select); color: var(--ink); }
.card ::selection { background: rgba(255, 255, 255, 0.35); color: #fff; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.card.plum :focus-visible, .card.teal :focus-visible, .card.cobalt :focus-visible, .card.ink :focus-visible, .card.photo :focus-visible { outline-color: #fff; }
.card.flag :focus-visible { outline-color: var(--on-flag); }  /* the quiet card and the sheet keep the page's own ring */
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.2rem + 3vw, 3.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; }
h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
p { margin: 0; }
.lede { color: var(--graphite); font-size: 1.125rem; line-height: 1.45; max-width: 60ch; text-wrap: pretty; }
.caption { color: var(--graphite); font-size: 0.875rem; max-width: 62ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font: 0.8125rem var(--mono); overflow-wrap: anywhere; }
.skip { position: absolute; left: var(--gutter); top: -3rem; background: var(--flag); color: var(--on-flag); padding: 0.5rem 0.8rem; border-radius: var(--r-ctl); z-index: 10; }
.skip:focus { top: 0.5rem; }

/* The head: the name with its caret, and the page's places. */
.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-inline: var(--gutter) var(--gutter-r); padding-block: 0.9rem; max-width: 90rem; margin: 0 auto;
}
.name { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; }
.name svg { width: 1rem; height: 1rem; color: #e8343f; }
.top nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; font-size: 0.9375rem; font-weight: 600; }
.top nav a { color: var(--graphite); text-decoration: none; padding: 0.4rem 0; }
.top nav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 719.98px) { .top nav .inpage { display: none; } }

main { display: grid; gap: clamp(4.5rem, 8vw, 7.5rem); padding-block: clamp(0.5rem, 1.5vw, 1.25rem) 5rem; }
.hero, .block { width: 100%; max-width: 90rem; margin: 0 auto; padding-inline: var(--gutter) var(--gutter-r); display: grid; gap: 1.25rem; min-width: 0; }
.block .head { display: grid; gap: 0.75rem; margin-bottom: 0.5rem; }

/* ---------- the cards ---------- */
.cards { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; min-width: 0; }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1099.98px) { .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899.98px) { .cards.three { grid-template-columns: 1fr; } }
@media (max-width: 639.98px) { .cards.four { grid-template-columns: 1fr; } }
.card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem; min-width: 0;
  padding: 1.6rem 1.6rem 1.7rem; border-radius: var(--r-card); color: var(--on-card); overflow: hidden; box-shadow: var(--lift);
}
.card.plum { background: var(--plum); }
.card.teal { background: var(--teal); }
.card.cobalt { background: var(--cobalt); }
.card.ink { background: linear-gradient(200deg, #3a3952 0%, #262539 55%, #1b1a2a 100%); color: #f2f1f6; }
.card.flag { background: var(--flag); color: var(--on-flag); }
.card.quiet { background: var(--quiet); color: var(--ink); box-shadow: none; }
.card h2, .card h3 { color: inherit; }
.card a { color: inherit; }
.card .lede, .card .caption { color: inherit; }
.card .lede { opacity: 0.92; }
.figure { font-size: clamp(6rem, 3rem + 7vw, 9rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.82; margin-bottom: 0.25rem; }
.line { font-size: 1.125rem; font-weight: 500; line-height: 1.3; max-width: 34ch; }
.card.photo { padding: 0; justify-content: flex-end; margin: 0; background: #1a1926; }
.card.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card.photo > figcaption, .card.photo > .over { position: relative; padding: 5rem 1.6rem 1.7rem; background: var(--scrim); display: grid; gap: 0.5rem; }
.card.photo .title { font-size: 1.75rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }  /* a heading, not a book title: the Book Face Rule holds */
.card.photo .facts { font-size: 1rem; line-height: 1.4; opacity: 0.94; }

/* ---------- the first viewport ---------- */
.hero { gap: 2rem; }
.claim { display: grid; gap: 2rem 3rem; align-items: start; }
@media (min-width: 900px) { .claim { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); } }
.claim > div:first-child { display: grid; gap: 1.25rem; align-content: end; padding-bottom: 0.3rem; }
.story .card { min-height: 22rem; }
.story .card h2 { font-size: 1.75rem; letter-spacing: -0.02em; }
.story .card.photo > figcaption { padding-top: 9rem; background: linear-gradient(180deg, rgba(13, 12, 20, 0) 0%, rgba(13, 12, 20, 0.85) 50%, rgba(13, 12, 20, 0.94) 100%); }  /* the heading stands on the step card's scrim */
@media (max-width: 639.98px) {  /* a phone: the claim with the download in it, the row, then the three, each as tall as its words */
  .story .card { min-height: 0; }
  .story .card.photo { min-height: 17rem; }
  .story .card.photo > figcaption { padding-top: 6rem; }
}

/* The one authored entrance: the download card, the sheet and the three cards rise into place once. */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.hero .card, .hero .sheet { animation: rise 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) {
  .hero .card, .hero .sheet, .sheet .fix s, .sheet .fix ins { animation: none; }
}

/* The download card: the one filled button, white by day on the ink card, ink at night on the white card. */
.get { display: grid; gap: 0.75rem; align-content: end; }
.primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.6rem 1.5rem; width: fit-content;
  font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--flag); background: var(--on-flag); border-radius: var(--r-ctl); text-decoration: none;
}
.card .primary { color: var(--flag); background: var(--on-flag); }
.card.flag .primary { width: 100%; min-height: 3.75rem; font-size: 1.25rem; }
.card.flag { justify-content: space-between; }
.card.flag .mini { width: 4rem; height: 4rem; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3)); }
.primary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }  /* seen on every fill, the link's own hover */
.card.flag .ver { font-size: 0.875rem; color: var(--flag-quiet); }
.sure { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; }
.card.flag .sure { color: var(--on-flag); }
.card.flag .ways { font-size: 0.8125rem; color: var(--flag-quiet); margin-top: 0.35rem; }
.card.flag code { display: block; color: var(--on-flag); background: var(--flag-code); border-radius: 8px; padding: 0.5rem 0.7rem; }
:root[data-theme="dark"] .card.flag code { background: var(--flag-code); }
.ways { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; font-size: 0.9375rem; }
.ways code { font-size: 0.8125rem; }

/* ---------- the page's pictures: cards that hold a screenshot ---------- */
.shots { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }  /* a card is as tall as its picture, not its row */
.shot { background: var(--quiet); color: var(--ink); padding: 0.9rem; gap: 0.7rem; justify-content: start; box-shadow: none; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--r-shot); }
.shot figcaption { color: var(--graphite); font-size: 0.875rem; padding: 0 0.3rem; }
.shot.wide { grid-column: span 3; }
.shot.tall { grid-column: span 2; }
.shot.tall img { max-width: 20rem; }
@media (max-width: 639.98px) { .shot.tall img { max-width: 14rem; } .shots .shot.wide:nth-child(2), .shots .shot.wider { display: none; } }  /* a phone: the Books page by day and the phone's own view; the night and Details captures are for a desk */
.shot.wider { grid-column: span 4; }
@media (max-width: 899.98px) { .shots { grid-template-columns: 1fr; } .shot.wide, .shot.tall, .shot.wider { grid-column: auto; } }

/* The Mac app: one cobalt card for the words, three cards for the window. */
.macintro { display: grid; gap: 1.5rem; align-items: start; justify-content: start; padding: clamp(1.6rem, 3vw, 2.5rem); }
@media (min-width: 720px) { .macintro { grid-template-columns: 10rem minmax(0, 1fr); gap: 2.5rem; } }
.appicon { display: block; width: 10rem; height: 10rem; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
.macintro > div { display: grid; gap: 1rem; }
.plain { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; max-width: 62ch; opacity: 0.92; }
.macintro .ways span { opacity: 0.85; font-size: 0.9375rem; }
.macintro .primary { color: #1e3a8a; background: #fff; }
.appshots { grid-template-columns: 1fr 1fr; align-items: start; }
.appshots .shot:last-child { grid-column: 1 / -1; }  /* Covers, the fullest window, at full width */
@media (max-width: 899.98px) { .appshots { grid-template-columns: 1fr; } .appshots .shot:last-child { grid-column: auto; } }
@media (max-width: 639.98px) { .appshots .shot:not(:first-child) { display: none; } }  /* a phone: the Overview alone; the window is unreadable at 358px */
.appshots .shot img { aspect-ratio: 1800 / 1177; }

/* The four steps: the figure, a heading, one paragraph, on one photograph. The cards share three rows
   (subgrid), so that the four figures stand on one line across the row, the headings on another, the
   paragraphs on a third; the slack from the card's height goes above the figure. The photograph is one:
   drawn at the width of the whole row and shifted by the card's place (--n), so the four cards show four
   consecutive slices of it; two by two below 1100px the row is two slices; on a phone each card shows
   its own crop of the whole. */
.steps .card { min-height: 26rem; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.5rem; justify-content: normal; align-items: end; }
@media (min-width: 1100px) { .steps { grid-template-rows: minmax(0, 1fr) auto auto; } }
@media (min-width: 640px) and (max-width: 1099.98px) { .steps { grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) auto auto; } }
@media (max-width: 639.98px) { .steps .card { min-height: 0; } .card.photo.step > .over { padding-top: 5.5rem; } .steps .card.photo { min-height: 16rem; } }
.steps .step h3 { margin-top: 0.25rem; }
.steps .step p:not(.figure) { font-size: 1rem; line-height: 1.4; opacity: 0.94; align-self: start; }
.card.photo.step > .over { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 0.5rem; align-items: end; padding-top: 11rem; background: linear-gradient(180deg, rgba(13, 12, 20, 0) 0%, rgba(13, 12, 20, 0.85) 50%, rgba(13, 12, 20, 0.94) 100%); }  /* as specific as the photo card's own rule, which it must beat; the top half stays photograph */
.card.photo.step > .over .figure { font-size: clamp(4.5rem, 2rem + 5vw, 6.5rem); margin-bottom: 0; }
.steps .card.photo > img { max-width: none; right: auto; width: calc(400% + 3 * 1.25rem); left: calc(var(--n) * (-100% - 1.25rem)); object-position: 50% 42%; }
@media (min-width: 640px) and (max-width: 1099.98px) {
  .steps .card.photo > img { width: calc(200% + 1.25rem); left: 0; }
  .steps .card.photo:nth-child(even) > img { left: calc(-100% - 1.25rem); }
}
@media (max-width: 639.98px) {  /* a phone: the four quarters of the photograph, feet, the Kobo, the lap, the hand */
  .steps .card.photo > img { width: 200%; left: 0; object-position: 50% 15%; }
  .steps .card.photo:nth-child(even) > img { left: -100%; }
  .steps .card.photo:nth-child(n + 3) > img { object-position: 50% 85%; }
}

/* What it does, what it leaves alone, and the one who never guesses. */
.does .card { justify-content: flex-start; gap: 1.1rem; min-height: 28rem; }
@media (max-width: 899.98px) { .does .card { min-height: 0; } .does .card.photo { min-height: 18rem; } .does .card.photo > figcaption { padding-top: 6.5rem; } }
.does .card.teal { background: var(--teal-list); }
.does .card.photo > figcaption { padding-top: 11rem; background: linear-gradient(180deg, rgba(13, 12, 20, 0) 0%, rgba(13, 12, 20, 0.85) 50%, rgba(13, 12, 20, 0.94) 100%); }  /* the heading wraps on a phone: the step card's scrim */
.does .card.photo { justify-content: flex-end; }
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.marks li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); column-gap: 0.3rem; align-items: start; font-size: 1rem; line-height: 1.4; }
.marks .mk { width: 20px; height: 20px; margin-top: 2px; }

/* The other tools. */
.tablewrap { overflow-x: auto; padding: 0.5rem; }
.tablewrap table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 0.9375rem; }
.tablewrap th, .tablewrap td { text-align: left; vertical-align: top; padding: 0.9rem 1rem; border-bottom: 1px solid var(--quiet-edge); }
.tablewrap thead th { font-size: 0.8125rem; font-weight: 700; color: var(--graphite); }
.tablewrap tbody th { font-weight: 700; white-space: nowrap; }
.tablewrap tbody tr:last-child th, .tablewrap tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 719.98px) {
  .tablewrap table { min-width: 0; display: block; }
  .tablewrap thead { display: none; }
  .tablewrap tbody, .tablewrap tr { display: block; }
  .tablewrap tr { border-bottom: 1px solid var(--quiet-edge); }
  .tablewrap tr:last-child { border-bottom: 0; }
  .tablewrap th, .tablewrap td { display: block; border-bottom: 0; padding: 0.5rem 1rem; }
  .tablewrap tbody th { white-space: normal; padding-top: 0.9rem; }
  .tablewrap td:last-child { padding-bottom: 0.9rem; }
  .tablewrap td::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 700; color: var(--graphite); margin-bottom: 0.1rem; }
}

/* The close: the last photograph, with the download on it. */
.close { min-height: clamp(24rem, 50vw, 34rem); }
.card.photo.close > .over { flex: 1 1 auto; align-content: end; padding-top: 10rem; gap: 0.9rem; background: linear-gradient(180deg, rgba(13, 12, 20, 0) 0%, rgba(13, 12, 20, 0.35) 30%, rgba(13, 12, 20, 0.8) 60%, rgba(13, 12, 20, 0.94) 100%); }  /* the scrim spans the whole photograph, top to foot, with no edge; only the words are held to 46rem */
.card.photo.close > .over > * { max-width: 46rem; }
.close .over .lede { opacity: 0.92; }
.close .get { gap: 0.9rem; margin-top: 0.4rem; }
.close .primary { color: #17191c; background: #ffffff; }
.close .ways code { color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; padding: 0.35rem 0.6rem; }

/* The foot. */
.foot {
  max-width: 90rem; margin: 0 auto; padding-inline: var(--gutter) var(--gutter-r); padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 1rem; color: var(--graphite); font-size: 0.875rem;
}
.foot p { max-width: 70ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.theme { display: none; }  /* the switch needs the script; shown once it runs */
.js .theme { display: inline-flex; width: fit-content; border-radius: var(--r-ctl); overflow: hidden; background: var(--quiet); padding: 3px; gap: 2px; }
.theme button { font: 600 0.875rem var(--sans); color: var(--graphite); background: none; border: 0; padding: 0.45rem 0.9rem; min-height: 2.5rem; cursor: pointer; border-radius: 9px; }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--flag); color: var(--on-flag); }

/* ---------- one row of the page, at full size ---------- */
/* The sheet is the tool's own Books row, drawn: it carries the tool's colours, scoped here, by day and at night. */
.sheet {
  --sh-sheet: #fbfbf8; --sh-margin: #f4f5f1; --sh-ink: #17191c; --sh-graphite: #4a4f57; --sh-faint: #5f656e;
  --sh-rule: #cdd1cb; --sh-edge: #80868e; --sh-red: #c0212b; --sh-green: #2c6a39; --sh-blue: #1c5e8b; --sh-on-fill: #ffffff;
  margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--sh-ink); background: var(--sh-sheet);
  border: 1px solid var(--sh-rule); border-radius: var(--r-card); box-shadow: var(--lift); overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sheet {
    --sh-sheet: #171a1e; --sh-margin: #1b1f24; --sh-ink: #e7e9e4; --sh-graphite: #aeb4bb; --sh-faint: #959ca4;
    --sh-rule: #30353c; --sh-edge: #6e757e; --sh-red: #ff8077; --sh-green: #86cf95; --sh-blue: #86c5ea; --sh-on-fill: #0f1114;
  }
}
:root[data-theme="dark"] .sheet {
  --sh-sheet: #171a1e; --sh-margin: #1b1f24; --sh-ink: #e7e9e4; --sh-graphite: #aeb4bb; --sh-faint: #959ca4;
  --sh-rule: #30353c; --sh-edge: #6e757e; --sh-red: #ff8077; --sh-green: #86cf95; --sh-blue: #86c5ea; --sh-on-fill: #0f1114;
}
.sheet .rail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; padding: 0.8em 1.3em; border-bottom: 1px solid var(--sh-rule); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3em 1.4em; font-size: 0.875em; color: var(--sh-graphite); }
.legend li { display: inline-flex; align-items: center; gap: 0.45em; }
.sheet .mk { flex: none; width: 20px; height: 20px; color: var(--sh-red); }
.sheet .mk.ok { color: var(--sh-green); }
.sheet .mk.warn { color: var(--sh-blue); }
.sheet .mk.none { color: var(--sh-faint); }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th { text-align: left; font-size: 0.875em; font-weight: 700; padding: 0.85em 1.3em; border-bottom: 1px solid var(--sh-rule); }
.sheet td { vertical-align: top; padding: 1.1em 1.3em 1.2em; }
.sheet .c-sw { width: 12.5em; }
.sheet .c-hc { width: 34%; }
.sheet th.c-hc, .sheet td.hc { border-left: 3px double var(--sh-rule); }
.sheet td.hc { background: var(--sh-margin); }
.bk { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0.95em; align-items: start; }
.cover { display: block; width: 48px; height: 72px; border-radius: 1px 3px 3px 1px; object-fit: cover; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 3px 8px rgba(0, 0, 0, 0.1); }
.sheet .title { font-family: var(--serif); font-size: 1.0625em; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
.sheet .author { color: var(--sh-graphite); font-size: 0.875em; margin-top: 0.1em; }
/* The line gauge: a printer's rule with a tick every tenth, the part read as a bar of ink. */
.bar { position: relative; height: 9px; max-width: 16em; margin: 0.7em 0 0.35em;
  background: repeating-linear-gradient(to right, var(--sh-edge) 0 1px, transparent 1px 10%) left bottom / 100% 4px no-repeat,
    linear-gradient(var(--sh-edge), var(--sh-edge)) left bottom / 100% 1px no-repeat; }
.bar::after { content: ""; position: absolute; right: 0; bottom: 0; width: 1px; height: 4px; background: var(--sh-edge); }
.bar span { position: absolute; left: 0; bottom: 1px; height: 4px; background: var(--sh-ink); }
.sheet .meta { display: flex; flex-wrap: wrap; gap: 0.1em 0.9em; color: var(--sh-graphite); font-size: 0.8125em; }
.field { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6em; width: 100%; min-height: 2.5em; padding: 0.3em 0.8em; border: 1px solid var(--sh-edge); border-radius: 4px; font-size: 0.9375em; white-space: nowrap; }
.field svg { width: 12px; height: 8px; flex: none; }
.act { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); column-gap: 0.5em; align-items: start; }
.act.next > span:first-of-type { color: var(--sh-red); font-weight: 650; font-size: 0.8125em; line-height: 20px; }
.sheet .fix { margin: 0.1em 0 0 2.1em; font-size: 0.9375em; }
.sheet .fix s { color: var(--sh-graphite); text-decoration: none; background: linear-gradient(var(--sh-red), var(--sh-red)) no-repeat 0 58% / 100% 1.5px; }
.sheet .fix ins { display: inline-flex; align-items: baseline; gap: 1px; color: var(--sh-red); font-weight: 650; text-decoration: none; }
.sheet .fix ins svg { width: 10px; height: 10px; align-self: flex-end; margin-bottom: -4px; }
.sheet .sub { margin: 0.2em 0 0 2.1em; color: var(--sh-graphite); font-size: 0.8125em; }
.sheet .details { display: inline-flex; align-items: center; min-height: 2em; margin: 0.55em 0 0 2.1em; padding: 0.15em 0.65em; font-size: 0.8125em; font-weight: 600; border: 1px solid var(--sh-edge); border-radius: 4px; background: var(--sh-sheet); }
.sheet figcaption { padding: 0.9em 1.3em 1em; border-top: 1px solid var(--sh-rule); color: var(--sh-graphite); max-width: none; }
/* The page's own motion: the strike draws across and the new value writes in, once the sheet has landed. */
@keyframes strike { from { background-size: 0 1.5px; } }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sheet .fix s { animation: strike 0.5s var(--ease) 0.9s both; }
.sheet .fix ins { animation: write 0.6s var(--ease) 1.1s both; }
@media (max-width: 719.98px) {  /* a phone: the book, the two switches side by side, the margin under them */
  .sheet table, .sheet thead { display: block; }
  .sheet thead { display: none; }
  .sheet tbody { display: block; }
  .sheet tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8em; }
  .sheet td { display: block; }
  .sheet td.book, .sheet td.hc { grid-column: 1 / -1; }
  .sheet td.sw { padding-top: 0; }
  .sheet td.sw::before { content: attr(data-label); display: block; font-size: 0.75em; font-weight: 700; color: var(--sh-graphite); margin-bottom: 0.25em; }
  .sheet td.hc { border-left: 0; border-top: 3px double var(--sh-rule); margin-top: 0.6em; }
}