/*
 * Investigator Sheet theme
 *
 * Chaosium's official Call of Cthulhu 7th edition investigator sheet: black
 * ink on white paper inside a border of fanned triangles with a gold Elder
 * Sign in each corner. Headings sit in rounded tabs on a rule (sideways for
 * Characteristics and Skills), labels are in a light condensed face, and
 * every value is written in a rounded box split into Regular, Hard and
 * Extreme. Colours are sampled from the sheet's PDF.
 *
 * Every rule is scoped to html[data-theme="sheet"] so this file can be
 * loaded (or not) without touching any other theme.
 */

@import url("https://fonts.googleapis.com/css2?family=Charis+SIL:ital,wght@0,400;0,700;1,400&family=Oswald:wght@300;400&family=Roboto+Condensed:wght@400;700&display=swap");

html[data-theme="sheet"] {
  --sheet-ink: #231f20;
  --sheet-ink-soft: #4e4a4b;
  --sheet-rule: #7b7879;
  /* The printed sheet is bright white; on a screen that glares, so the
     paper is a soft warm one (boxes and all, as on the sheet) */
  --sheet-paper: #fffaef;
  --sheet-shade: #e6dfcf;
  --sheet-gold: #f4be40;
  --sheet-gold-dark: #8a630c;
  --sheet-gold-pale: #f0dfb0;
  --sheet-blood: #9e2a2b;

  /* Century Schoolbook on the sheet; Charis is the closest web font */
  --sheet-font-serif: "Charis SIL", "Century Schoolbook", "C059", Georgia, serif;
  /* "STR", "Hit Points", "Personal Description" */
  --sheet-font-label: "Oswald", "Arial Narrow", sans-serif;
  /* The tiny "Regular Hard Extreme" captions, and values the PDF fills in */
  --sheet-font-fill: "Roboto Condensed", "Arial Narrow", sans-serif;

  --sheet-line-width: 1.5px;
  --sheet-line: var(--sheet-line-width) solid var(--sheet-ink);
  --sheet-radius: 10px;
  /* Tabs curve into their rule over this distance */
  --sheet-flare: 10px;

  /* The border: outlined triangles, alternately up and down, each with a
     fan of rays from the middle of its base. "down" is the same tile turned
     for the sides. Generated to the sheet's proportions. */
  --sheet-border-across: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 22'%3E%3Cpath d='M13.50 20.5L34.00 1.5L54.50 20.5M39.94 17.86L44.92 15.64M38.00 15.38L40.64 12.00M34.90 14.06L35.92 6.86M33.10 14.06L32.08 6.86M30.00 15.38L27.36 12.00M28.06 17.86L23.08 15.64M13.50 20.5H28.50M39.50 20.5H54.50M-20.50 1.5L0.00 20.5L20.50 1.5M5.94 4.14L10.92 6.36M4.00 6.62L6.64 10.00M0.90 7.94L1.92 15.14M-0.90 7.94L-1.92 15.14M-4.00 6.62L-6.64 10.00M-5.94 4.14L-10.92 6.36M-20.50 1.5H-5.50M5.50 1.5H20.50M47.50 1.5L68.00 20.5L88.50 1.5M73.94 4.14L78.92 6.36M72.00 6.62L74.64 10.00M68.90 7.94L69.92 15.14M67.10 7.94L66.08 15.14M64.00 6.62L61.36 10.00M62.06 4.14L57.08 6.36M47.50 1.5H62.50M73.50 1.5H88.50' fill='none' stroke='%23231f20' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --sheet-border-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 68'%3E%3Cg transform='translate%2822 0%29 rotate%2890%29'%3E%3Cpath d='M13.50 20.5L34.00 1.5L54.50 20.5M39.94 17.86L44.92 15.64M38.00 15.38L40.64 12.00M34.90 14.06L35.92 6.86M33.10 14.06L32.08 6.86M30.00 15.38L27.36 12.00M28.06 17.86L23.08 15.64M13.50 20.5H28.50M39.50 20.5H54.50M-20.50 1.5L0.00 20.5L20.50 1.5M5.94 4.14L10.92 6.36M4.00 6.62L6.64 10.00M0.90 7.94L1.92 15.14M-0.90 7.94L-1.92 15.14M-4.00 6.62L-6.64 10.00M-5.94 4.14L-10.92 6.36M-20.50 1.5H-5.50M5.50 1.5H20.50M47.50 1.5L68.00 20.5L88.50 1.5M73.94 4.14L78.92 6.36M72.00 6.62L74.64 10.00M68.90 7.94L69.92 15.14M67.10 7.94L66.08 15.14M64.00 6.62L61.36 10.00M62.06 4.14L57.08 6.36M47.50 1.5H62.50M73.50 1.5H88.50' fill='none' stroke='%23231f20' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/g%3E%3C/svg%3E");
  /* The Elder Sign in the corners: a lopsided gold star round an eye */
  --sheet-elder-sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M56.1 8.4Q48.8 48.8 71.5 92.4Q63.5 46.1 56.1 8.4ZM90.3 44.9Q53.0 48.1 22.5 80.5Q60.0 61.4 90.3 44.9ZM71.5 92.4Q54.7 55.5 11.6 33.3Q44.2 66.2 71.5 92.4ZM22.5 80.5Q50.8 54.2 56.1 8.4Q37.2 47.8 22.5 80.5ZM11.6 33.3Q44.9 52.9 90.3 44.9Q47.1 38.0 11.6 33.3Z' fill='%23f4be40' stroke='%23231f20' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='50' cy='54' rx='11' ry='5.5' fill='%23f4be40' stroke='%23231f20' stroke-width='2.2'/%3E%3Cpath d='M50 45C54 51 53 58 50 59C47 58 46 51 50 45Z' fill='%23f4be40' stroke='%23231f20' stroke-width='1.8'/%3E%3C/svg%3E");
  /* Border geometry: Elder Signs this big, the triangles this tall and
     this far in from the edge (centred on the signs) */
  --sheet-sign-size: 52px;
  --sheet-border-size: 16px;
  --sheet-border-inset: calc((var(--sheet-sign-size) - var(--sheet-border-size)) / 2);

  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
}

html[data-theme="sheet"] body {
  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
}

/* ---------- The page and its border ---------- */

html[data-theme="sheet"] #content {
  position: relative;
  margin: 0 0.75rem 0.75rem;
  padding: calc(var(--sheet-sign-size) / 2) calc(var(--sheet-sign-size) - 0.5rem);
  background:
    var(--sheet-elder-sign) left top / var(--sheet-sign-size) no-repeat,
    var(--sheet-elder-sign) right top / var(--sheet-sign-size) no-repeat,
    var(--sheet-elder-sign) left bottom / var(--sheet-sign-size) no-repeat,
    var(--sheet-elder-sign) right bottom / var(--sheet-sign-size) no-repeat;
  min-height: 60vh;
  /* The rule either side of a long tab never widens a phone's page */
  overflow-x: clip;
}

/* Rows of triangles between the signs: along the top and bottom here, down
   the sides in ::after. Each is clipped to the stretch between two signs,
   with the tiles stretched slightly so whole ones fit. */
html[data-theme="sheet"] #content::before,
html[data-theme="sheet"] #content::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-clip: content-box;
  background-origin: content-box;
}

html[data-theme="sheet"] #content::before {
  padding: 0 calc(var(--sheet-sign-size) + 4px);
  background-image: var(--sheet-border-across), var(--sheet-border-across);
  background-position: 0 var(--sheet-border-inset), 0 calc(100% - var(--sheet-border-inset));
  background-size: calc(var(--sheet-border-size) * 68 / 22) var(--sheet-border-size);
  background-repeat: round no-repeat;
}

html[data-theme="sheet"] #content::after {
  padding: calc(var(--sheet-sign-size) + 4px) 0;
  background-image: var(--sheet-border-down), var(--sheet-border-down);
  background-position: var(--sheet-border-inset) 0, calc(100% - var(--sheet-border-inset)) 0;
  background-size: var(--sheet-border-size) calc(var(--sheet-border-size) * 68 / 22);
  background-repeat: no-repeat round;
}

/* Packed close, like the sheet, rather than Bulma's roomy sections. The
   nested section round the notes adds no indent of its own, so they line
   up with the skills. */
html[data-theme="sheet"] .section {
  padding: 1.75rem 1.5rem;
}

html[data-theme="sheet"] .section .section {
  padding: 1.25rem 0 0;
}

/* Panels have no frame here, so their padding is just space */
html[data-theme="sheet"] .character-sheet .box {
  padding: 0.25rem 0;
}

html[data-theme="sheet"] .character-sheet .box:not(:last-child, .counter-card),
html[data-theme="sheet"] #trackers:not(:last-child) {
  margin-bottom: 1.25rem;
}

@media screen and (max-width: 768px) {
  html[data-theme="sheet"] {
    --sheet-sign-size: 30px;
    --sheet-border-size: 9px;
  }

  html[data-theme="sheet"] #content {
    margin: 0 0.25rem 0.25rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  html[data-theme="sheet"] .section {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ---------- Header ---------- */

html[data-theme="sheet"] .navbar {
  background-color: var(--sheet-paper);
}

/* Lettered like the sheet's "1920s Era Investigator" */
html[data-theme="sheet"] .navbar .site-title {
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
  font-size: 1.6rem;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

html[data-theme="sheet"] .navbar .site-title:hover,
html[data-theme="sheet"] .navbar .site-title:focus {
  background-color: transparent;
  color: var(--sheet-gold-dark);
}

html[data-theme="sheet"] .campaign-nav .navbar-item,
html[data-theme="sheet"] .campaign-nav a,
html[data-theme="sheet"] .theme-switch-toggle {
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
}

html[data-theme="sheet"] .campaign-nav-label {
  font-family: var(--sheet-font-fill);
  font-weight: 700;
}

html[data-theme="sheet"] .select select {
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
}

html[data-theme="sheet"] .select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--sheet-ink);
}

/* ---------- Headings ---------- */

html[data-theme="sheet"] .title,
html[data-theme="sheet"] .subtitle {
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
}

/* Section titles sit in a tab on a rule, like "My Story" and "Backstory":
   the tab's sides curve out into a short stretch of rule either side.
   (Titles with a button keep the tab round the title alone.) */
html[data-theme="sheet"] .section-title:not(.has-action),
html[data-theme="sheet"] .section-title.has-action > :first-child {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(var(--sheet-flare) + 1rem);
  padding: 0.3rem 1.75rem 0.15rem;
  border: var(--sheet-line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
  font-size: 1.4rem;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-align: center;
}

html[data-theme="sheet"] .section-title:not(.has-action)::before,
html[data-theme="sheet"] .section-title:not(.has-action)::after,
html[data-theme="sheet"] .section-title.has-action > :first-child::before,
html[data-theme="sheet"] .section-title.has-action > :first-child::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 3.5rem;
  height: var(--sheet-flare);
  border-bottom: var(--sheet-line);
}

html[data-theme="sheet"] .section-title:not(.has-action)::before,
html[data-theme="sheet"] .section-title.has-action > :first-child::before {
  right: 100%;
  border-right: var(--sheet-line);
  border-bottom-right-radius: var(--sheet-flare);
}

html[data-theme="sheet"] .section-title:not(.has-action)::after,
html[data-theme="sheet"] .section-title.has-action > :first-child::after {
  left: 100%;
  border-left: var(--sheet-line);
  border-bottom-left-radius: var(--sheet-flare);
}

/* A title with a button: the tab stays centred, the button at the end; on
   narrow screens it wraps underneath */
html[data-theme="sheet"] .section-title.has-action {
  justify-content: center;
  margin-bottom: 1rem;
}

html[data-theme="sheet"] .section-title.has-action > :first-child {
  display: block;
  margin-bottom: var(--sheet-flare);
}

@media screen and (min-width: 769px) {
  html[data-theme="sheet"] .section-title.has-action {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
  }

  html[data-theme="sheet"] .section-title.has-action::before {
    content: "";
  }

  html[data-theme="sheet"] .section-title.has-action .title-action {
    justify-self: end;
  }
}

html[data-theme="sheet"] .title-action {
  font-family: var(--sheet-font-serif);
  font-size: 0.85rem;
  font-variant: normal;
  font-weight: 400;
}

/* Characteristics and Skills are labelled down the left, as on the sheet:
   the same tab turned on its side, with short stubs of rule above and
   below. The section makes room for it on the left. */
html[data-theme="sheet"] #characteristics-box,
html[data-theme="sheet"] .container:has(> .section-title + #skill-columns) {
  --sheet-side-tab: 2.4rem;
  position: relative;
  padding-left: calc(var(--sheet-side-tab) + var(--sheet-flare) + 0.6rem);
}

html[data-theme="sheet"] #characteristics-box > .section-title,
html[data-theme="sheet"] .section-title + #skill-columns,
html[data-theme="sheet"] .section-title:has(+ #skill-columns) {
  margin: 0;
}

html[data-theme="sheet"] #characteristics-box > .section-title,
html[data-theme="sheet"] .section-title:has(+ #skill-columns) > :first-child {
  position: absolute;
  left: 0;
  width: var(--sheet-side-tab);
  margin: 0;
  padding: 1rem 0;
  /* Turned to read upwards, like the sheet (sideways-lr would do this, but
     not every browser has it). Everything here is drawn upside down, so
     the open side (right, on the page) is on the left */
  border: var(--sheet-line);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: calc(var(--sheet-side-tab) - 2 * var(--sheet-line-width));
  text-align: center;
  /* Its line is as long as the section is tall, which may be short */
  white-space: nowrap;
}

html[data-theme="sheet"] #characteristics-box > .section-title {
  top: 1.25rem;
}

/* The Skills title keeps its "Show skill mastery" switch at the end, over
   the columns; just its name moves into the tab */
html[data-theme="sheet"] .section-title:has(+ #skill-columns) {
  display: flex;
  justify-content: flex-end;
  min-height: 1.75rem;
}

/* Tall enough for the tab and its rule, even with only a few skills */
html[data-theme="sheet"] .container:has(> .section-title + #skill-columns) {
  min-height: 13rem;
}

html[data-theme="sheet"] .section-title:has(+ #skill-columns) > :first-child {
  top: 4.5rem;
}

html[data-theme="sheet"] #characteristics-box > .section-title::before,
html[data-theme="sheet"] #characteristics-box > .section-title::after,
html[data-theme="sheet"] .section-title:has(+ #skill-columns) > :first-child::before,
html[data-theme="sheet"] .section-title:has(+ #skill-columns) > :first-child::after {
  content: "";
  position: absolute;
  top: auto;
  right: 100%;
  bottom: auto;
  left: auto;
  width: var(--sheet-flare);
  height: 2.25rem;
  border: 0;
  border-left: var(--sheet-line);
  border-radius: 0;
}

/* Upside down too: ::before is the stub above the tab on the page */
html[data-theme="sheet"] #characteristics-box > .section-title::before,
html[data-theme="sheet"] .section-title:has(+ #skill-columns) > :first-child::before {
  top: 100%;
  border-top: var(--sheet-line);
  border-top-left-radius: var(--sheet-flare);
}

html[data-theme="sheet"] #characteristics-box > .section-title::after,
html[data-theme="sheet"] .section-title:has(+ #skill-columns) > :first-child::after {
  bottom: 100%;
  border-bottom: var(--sheet-line);
  border-bottom-left-radius: var(--sheet-flare);
}

/* ---------- Panels ---------- */

/* The sheet has no panels: everything is printed straight on the page */
html[data-theme="sheet"] .box {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--sheet-ink);
}

/* Cards (campaigns, investigators, the Keeper's screen and its encounter
   panel and log) are boxed like the sheet's Fellow Investigators */
html[data-theme="sheet"] .card,
html[data-theme="sheet"] .message,
html[data-theme="sheet"] .keeper-screen > .box,
html[data-theme="sheet"] .encounter-panel,
html[data-theme="sheet"] .encounter-log {
  background-color: var(--sheet-paper);
  border: var(--sheet-line);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--sheet-ink);
  color: var(--sheet-ink);
}

/* The chase setup and the chase panel's boxes are boxed as the encounter
   panel is; the badges are the party in ink, other vehicles in the sheet's
   red */
html[data-theme="sheet"] .chase-setup,
html[data-theme="sheet"] .chase-panel,
html[data-theme="sheet"] .chase-strip {
  --chase-party: var(--sheet-ink);
  --chase-on-party: var(--sheet-paper);
  --chase-other: var(--sheet-blood);
  --chase-on-other: var(--sheet-paper);
}

html[data-theme="sheet"] .chase-panel .chase-band.box {
  border-left: 8px solid var(--chase-party);
}

html[data-theme="sheet"] .chase-panel .chase-band.box.is-other {
  border-left-color: var(--chase-other);
}

html[data-theme="sheet"] .chase-setup,
html[data-theme="sheet"] .chase-panel .box {
  background-color: var(--sheet-paper);
  border: var(--sheet-line);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--sheet-ink);
  color: var(--sheet-ink);
}

/* The sheet's encounter strip is boxed like the encounter panel, though
   the sheet's own panels aren't: it's news, not part of the printed sheet.
   "Your turn" is in the primary buttons' ink. */
html[data-theme="sheet"] .character-sheet .encounter-strip {
  --encounter-accent: var(--sheet-ink);
  --encounter-on-accent: var(--sheet-paper);
  padding: 1rem 1.25rem;
  border: var(--sheet-line);
  border-left-width: 6px;
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--sheet-ink);
}

/* The chase strip is boxed as the encounter strip is, edged in the
   party's ink */
html[data-theme="sheet"] .character-sheet .chase-strip {
  padding: 1rem 1.25rem;
  border: var(--sheet-line);
  border-left: 6px solid var(--chase-party);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--sheet-ink);
}

/* The page's border takes room at the sides, so the Keeper's panels give
   a little back: their table fits across from 1024px without scrolling */
html[data-theme="sheet"] .keeper-screen > .box {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

html[data-theme="sheet"] a.card:hover {
  background-color: var(--sheet-gold-pale);
}

html[data-theme="sheet"] .card .title,
html[data-theme="sheet"] .card .title strong {
  color: var(--sheet-ink);
}

html[data-theme="sheet"] .message-header {
  background-color: transparent;
  border-bottom: var(--sheet-line);
  border-radius: 0;
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.05em;
}

html[data-theme="sheet"] .message-body {
  border: 0;
  color: var(--sheet-ink);
}

/* The investigator's name, written on the sheet's "Name" line */
html[data-theme="sheet"] #character-portrait-card {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

html[data-theme="sheet"] #character-portrait-card .card-content {
  padding: 0.25rem 0;
}

html[data-theme="sheet"] #character-portrait-card .title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

html[data-theme="sheet"] #character-portrait-card .title::before {
  content: "Name" / "";
  flex-shrink: 0;
  font-size: 1.15rem;
  font-weight: 400;
}

html[data-theme="sheet"] #character-portrait-card .title strong {
  flex: 1;
  min-width: 8rem;
  padding: 0 0.5rem 0.1rem 0.25rem;
  border-bottom: 1px solid var(--sheet-ink);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.2;
}

html[data-theme="sheet"] .sheet-status {
  font-style: italic;
}

/* The portrait box: a frame inside a frame */
html[data-theme="sheet"] .character-portrait,
html[data-theme="sheet"] .sheet-portrait-placeholder {
  padding: 4px;
  border: 3px double var(--sheet-ink);
  border-radius: 0;
  background-color: var(--sheet-paper);
  box-shadow: inset 0 0 0 1px var(--sheet-paper);
}

html[data-theme="sheet"] .sheet-portrait-placeholder,
html[data-theme="sheet"] .portrait {
  color: var(--sheet-ink);
  font-family: var(--sheet-font-label);
  font-weight: 300;
}

html[data-theme="sheet"] .portrait {
  border: var(--sheet-line);
  background-color: var(--sheet-shade);
}

/* ---------- Buttons & fields ---------- */

html[data-theme="sheet"] .button {
  background-color: var(--sheet-paper);
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
}

html[data-theme="sheet"] .button:hover,
html[data-theme="sheet"] .button:focus {
  background-color: var(--sheet-gold-pale);
  border-color: var(--sheet-ink);
  color: var(--sheet-ink);
  box-shadow: none;
}

html[data-theme="sheet"] .button:focus-visible {
  outline: 2px solid var(--sheet-gold-dark);
  outline-offset: 2px;
}

html[data-theme="sheet"] .button.is-static {
  background-color: var(--sheet-shade);
  border-color: var(--sheet-rule);
  color: var(--sheet-ink-soft);
}

html[data-theme="sheet"] .button.is-primary,
html[data-theme="sheet"] .button.is-link {
  background-color: var(--sheet-ink);
  border-color: var(--sheet-ink);
  color: var(--sheet-paper);
}

html[data-theme="sheet"] .button.is-primary:hover,
html[data-theme="sheet"] .button.is-link:hover {
  background-color: var(--sheet-gold);
  color: var(--sheet-ink);
}

html[data-theme="sheet"] .input,
html[data-theme="sheet"] .textarea {
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  background-color: var(--sheet-paper);
  box-shadow: none;
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
}

html[data-theme="sheet"] .input:focus,
html[data-theme="sheet"] .textarea:focus {
  border-color: var(--sheet-ink);
  box-shadow: 0 0 0 2px var(--sheet-gold);
}

/* Notes are written on ruled lines, like the back of the sheet */
html[data-theme="sheet"] .textarea {
  --sheet-ruled: 1.8rem;
  --sheet-ruled-line: var(--sheet-rule);
  padding: 0 0.75rem;
  border-radius: 0;
  border-width: 0 0 var(--sheet-line-width);
  background: repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--sheet-ruled) - 1px),
      var(--sheet-ruled-line) calc(var(--sheet-ruled) - 1px) var(--sheet-ruled)
    )
    local;
  line-height: var(--sheet-ruled);
}

/* Being written in: the lines go gold, the paper stays as it is */
html[data-theme="sheet"] .textarea:focus {
  --sheet-ruled-line: var(--sheet-gold-dark);
  border-color: var(--sheet-gold-dark);
  box-shadow: none;
}

/* ---------- Characteristics ---------- */

/* STR [50|25|10]: the name in the sheet's condensed face, then its
   Regular, Hard and Extreme values in one rounded box */
html[data-theme="sheet"] .characteristics-grid {
  gap: 0.6rem 1.25rem;
  padding-top: 1.1rem;
}

/* Kept less specific than base.css's bonus/penalty tint, so that shows */
html[data-theme="sheet"] .characteristic-button {
  height: auto;
  padding: 0 0 0 0.35rem;
  border: 0;
  background-color: var(--sheet-paper);
  gap: 0.4rem;
}

/* Rounded like its value box, so the tint is too (.button to outrank
   Bulma's small buttons' corners) */
html[data-theme="sheet"] .button.characteristic-button {
  border-radius: var(--sheet-radius);
}

html[data-theme="sheet"] .characteristic-button:hover,
html[data-theme="sheet"] .characteristic-button:focus {
  background-color: var(--sheet-paper);
}

html[data-theme="sheet"] .characteristic-name {
  font-family: var(--sheet-font-label);
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
}

html[data-theme="sheet"] .characteristic-fractions {
  display: flex;
}

/* ---------- Value boxes (characteristics, skills, weapons) ---------- */

html[data-theme="sheet"] .characteristic-values,
html[data-theme="sheet"] .skill-values,
html[data-theme="sheet"] .weapon-levels {
  --sheet-cell: 2.4rem;
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  align-self: center;
  gap: 0;
  height: 2.1rem;
  padding: 0;
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
  font-family: var(--sheet-font-fill);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

html[data-theme="sheet"] :is(.characteristic-values, .skill-values, .weapon-levels) > *,
html[data-theme="sheet"] :is(.characteristic-fractions, .skill-fractions) > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hard and Extreme are cells of their own, full height */
html[data-theme="sheet"] :is(.characteristic-values, .skill-values, .weapon-levels) > :is(.characteristic-fractions, .skill-fractions) {
  align-items: stretch;
}

html[data-theme="sheet"] .characteristic-level,
html[data-theme="sheet"] .skill-level,
html[data-theme="sheet"] :is(.characteristic-fractions, .skill-fractions) > span {
  width: var(--sheet-cell);
  min-width: 0;
  text-align: center;
}

html[data-theme="sheet"] .characteristic-level,
html[data-theme="sheet"] .skill-level {
  font-weight: 700;
}

html[data-theme="sheet"] .characteristic-fractions,
html[data-theme="sheet"] .skill-fractions {
  flex-direction: row;
  min-width: 0;
  font-size: 0.9em;
  line-height: 1;
  opacity: 1;
}

html[data-theme="sheet"] :is(.characteristic-fractions, .skill-fractions) > span {
  border-left: var(--sheet-line);
}

/* Each column's first box is captioned Regular, Hard and Extreme */
html[data-theme="sheet"] .characteristics-grid > :nth-child(-n + 2) :is(.characteristic-level, .characteristic-fractions > span)::before,
html[data-theme="sheet"] #skill-columns > .column > .skill-row:first-child :is(.skill-level, .skill-fractions > span)::before {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sheet-font-fill);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

html[data-theme="sheet"] .characteristics-grid > :nth-child(-n + 2) .characteristic-level::before,
html[data-theme="sheet"] #skill-columns > .column > .skill-row:first-child .skill-level::before {
  content: "Regular" / "";
}

html[data-theme="sheet"] .characteristics-grid > :nth-child(-n + 2) .characteristic-fractions > :first-child::before,
html[data-theme="sheet"] #skill-columns > .column > .skill-row:first-child .skill-fractions > :first-child::before {
  content: "Hard" / "";
}

html[data-theme="sheet"] .characteristics-grid > :nth-child(-n + 2) .characteristic-fractions > :last-child::before,
html[data-theme="sheet"] #skill-columns > .column > .skill-row:first-child .skill-fractions > :last-child::before {
  content: "Extreme" / "";
}

html[data-theme="sheet"] :is(.characteristic-button, .skill-roll):hover :is(.characteristic-values, .skill-values) {
  background-color: var(--sheet-gold-pale);
}

/* ---------- Skills ---------- */

/* ☐ Accounting ........ [05|02|01] */
html[data-theme="sheet"] #skill-columns {
  padding-top: 1rem;
}

html[data-theme="sheet"] #skill-columns .column {
  padding-top: 0;
  padding-bottom: 0;
}

/* Rows close together, as on the sheet */
html[data-theme="sheet"] #skill-columns .block {
  margin: 0;
  padding: 0.1rem 0;
}

html[data-theme="sheet"] .skill-row .field.has-addons {
  align-items: center;
}

html[data-theme="sheet"] .skill-row .button.is-medium {
  height: 2.15rem;
  font-size: 1.05rem;
}

html[data-theme="sheet"] .skill-row .skill-values {
  height: 1.85rem;
}

/* The checkbox is just a square, like the sheet's */
html[data-theme="sheet"] .skill-row .control:first-child .button {
  width: 1.9rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sheet-ink);
}

html[data-theme="sheet"] .skill-row .control:first-child .button .icon {
  font-size: 1.2rem;
}

html[data-theme="sheet"] .skill-row .control:first-child .button:hover {
  color: var(--sheet-gold-dark);
}

/* Credit Rating and Cthulhu Mythos have no box to tick on the sheet */
html[data-theme="sheet"] .skill-row .control:first-child .button.is-static {
  visibility: hidden;
}

/* Rounded like the value box at its end, so a hover or a bonus/penalty
   tint round the row has the box's corners, not square ones */
html[data-theme="sheet"] .skill-roll.is-medium {
  padding: 0 0 0 0.5rem;
  border: 0;
  border-radius: var(--sheet-radius);
}

/* Kept less specific than base.css's bonus/penalty tint, so that shows */
html[data-theme="sheet"] .skill-roll {
  background-color: var(--sheet-paper);
}

html[data-theme="sheet"] .skill-roll:hover,
html[data-theme="sheet"] .skill-roll:focus-visible {
  background-color: var(--sheet-gold-pale);
}

html[data-theme="sheet"] .skill-roll:hover .skill-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html[data-theme="sheet"] .skill-values {
  border-left: var(--sheet-line);
}

/* Skill mastery: a pencil line under each skill, gold for the ones the
   investigator is good at and inked in for the ones they're expert in */
html[data-theme="sheet"] {
  --skill-name-weight: 400;
  --skill-value-weight: 700;
  --skill-strong-weight: 700;
  --skill-divider: var(--sheet-ink);
  --skill-bar: #e4e1db;
  --skill-bar-proficient: var(--sheet-gold);
  --skill-bar-expert: var(--sheet-ink);
}

/* ---------- Weapons ---------- */

/* The sheet's combat table: bold serif headings over values written on
   ruled lines */
html[data-theme="sheet"] {
  --weapon-tile-radius: var(--sheet-radius);
  --weapon-divider: var(--sheet-rule);
}

html[data-theme="sheet"] .weapons-table thead th {
  border-bottom: 0;
  font-family: var(--sheet-font-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 1;
  text-transform: none;
}

html[data-theme="sheet"] .weapons-table td.weapon-detail {
  font-family: var(--sheet-font-fill);
  font-size: 1.05rem;
}

html[data-theme="sheet"] .weapon-damage {
  font-weight: 400;
}

html[data-theme="sheet"] .weapon-name {
  font-weight: 400;
  font-size: 1.05rem;
}

html[data-theme="sheet"] .weapon-skill,
html[data-theme="sheet"] .weapon-impales,
html[data-theme="sheet"] .weapon-icons-credit {
  font-family: var(--sheet-font-serif);
  font-style: italic;
}

/* Inline, so the box is only as wide as its cells, not the table cell */
html[data-theme="sheet"] .weapon-levels {
  --sheet-cell: 2.2rem;
  display: inline-flex;
  vertical-align: middle;
  height: 1.9rem;
  font-size: 1rem;
}

/* ---------- Notes ---------- */

html[data-theme="sheet"] .content {
  color: var(--sheet-ink);
}

/* Headings in notes look like "Personal Description" and "Traits" */
html[data-theme="sheet"] .content h1,
html[data-theme="sheet"] .content h2,
html[data-theme="sheet"] .content h3,
html[data-theme="sheet"] .content h4 {
  color: var(--sheet-ink);
  font-family: var(--sheet-font-label);
  font-weight: 300;
  letter-spacing: 0.01em;
}

html[data-theme="sheet"] .content strong {
  color: var(--sheet-ink);
}

html[data-theme="sheet"] a {
  color: var(--sheet-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

html[data-theme="sheet"] a:hover {
  color: var(--sheet-gold-dark);
}

html[data-theme="sheet"] a.card,
html[data-theme="sheet"] a.button,
html[data-theme="sheet"] .navbar a,
html[data-theme="sheet"] .theme-switch-menu a {
  text-decoration: none;
}

/* ---------- Hero, notifications, footer ---------- */

/* Gold lettering outlined in ink, like the Call of Cthulhu logo */
html[data-theme="sheet"] .hero.is-primary {
  background-color: transparent;
}

html[data-theme="sheet"] .hero.is-primary .title {
  color: var(--sheet-gold);
  font-size: 4.5rem;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.02em;
  paint-order: stroke fill;
  -webkit-text-stroke: 6px var(--sheet-ink);
}

html[data-theme="sheet"] .hero.is-primary .subtitle {
  color: var(--sheet-ink);
  font-style: italic;
}

html[data-theme="sheet"] .notification {
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
}

html[data-theme="sheet"] .notification.is-info {
  border-left: 8px solid var(--sheet-gold);
}

html[data-theme="sheet"] .footer {
  background-color: var(--sheet-paper);
  color: var(--sheet-ink-soft);
  font-family: var(--sheet-font-serif);
  font-size: 0.85rem;
  font-style: italic;
}

html[data-theme="sheet"] #load-indicator {
  color: var(--sheet-gold-dark);
}

html[data-theme="sheet"] .status-tag {
  border: 1px solid var(--sheet-ink);
  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
  font-family: var(--sheet-font-fill);
}

/* ---------- Campaign trackers ---------- */

/* Boxes to cross off in pen, like the sheet's tick boxes */
html[data-theme="sheet"] .tracker-box {
  border: var(--sheet-line);
  border-radius: 6px;
  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
}

html[data-theme="sheet"] .tracker-box.is-filled {
  border-color: var(--sheet-ink);
  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
}

html[data-theme="sheet"] .tracker-boxes:has(.tracker-box:hover) .tracker-box:not(.is-filled) {
  border-color: var(--sheet-ink);
  background-color: var(--sheet-gold-pale);
}

html[data-theme="sheet"] .tracker-boxes:has(.tracker-box:hover) .tracker-box:hover ~ .tracker-box:not(.is-filled) {
  background-color: var(--sheet-paper);
}

html[data-theme="sheet"] .tracker-box:focus-visible {
  outline-color: var(--sheet-gold-dark);
}

html[data-theme="sheet"] .tracker-count {
  font-family: var(--sheet-font-fill);
  font-size: 1.05rem;
  opacity: 1;
}

/* ---------- HP / Sanity / Luck / MP ---------- */

/* Laid out like the sheet: "Hit Points", then one rounded box of
   Maximum | Current (Starting | Current for Luck; Starting | Current |
   Insane for Sanity), captioned above. Current is the one to change, with
   − and + at its edges. Each stat is a row, boxes lined up on the right. */
html[data-theme="sheet"] .counter-grid > .counter-card {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: end;
  gap: 0.15rem 0.75rem;
  padding: 0;
}

html[data-theme="sheet"] .counter-card > .section-title {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--sheet-font-label);
  font-size: 1.85rem;
  font-variant: normal;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}

html[data-theme="sheet"] .counter-card > .section-title::before,
html[data-theme="sheet"] .counter-card > .section-title::after {
  content: none;
}

/* The box: a row of cells */
html[data-theme="sheet"] .counter-stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 2.6rem;
  margin-top: 1rem; /* room for the captions */
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  background-color: var(--sheet-paper);
  font-family: var(--sheet-font-fill);
}

html[data-theme="sheet"] .counter-ref {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

html[data-theme="sheet"] .counter-ref:not(.is-after) {
  border-right: var(--sheet-line);
}

html[data-theme="sheet"] .counter-ref.is-after {
  border-left: var(--sheet-line);
}

/* Captions over the cells, like Regular, Hard and Extreme */
html[data-theme="sheet"] .counter-ref > .counter-ref-label,
html[data-theme="sheet"] .counter-readout::before {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sheet-font-fill);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* The current value, with no "/ maximum": that's the cell before it */
html[data-theme="sheet"] .counter-readout {
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0 0.1rem;
}

html[data-theme="sheet"] .counter-readout::before {
  content: "Current" / "";
}

html[data-theme="sheet"] .counter-max {
  display: none;
}

html[data-theme="sheet"] .counter-input {
  font-family: var(--sheet-font-fill);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

html[data-theme="sheet"] .counter-step {
  aspect-ratio: auto;
  width: 1.6rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--sheet-ink-soft);
  font-family: var(--sheet-font-fill);
  font-size: 1.25rem;
  font-weight: 400;
}

html[data-theme="sheet"] .counter-step:hover {
  background-color: var(--sheet-gold-pale);
  color: var(--sheet-ink);
}

html[data-theme="sheet"] .counter-step:active {
  transform: none;
  background-color: var(--sheet-gold);
}

html[data-theme="sheet"] .counter-step:focus-visible,
html[data-theme="sheet"] .counter-input:focus-visible {
  outline-color: var(--sheet-gold-dark);
  outline-offset: -2px;
}

/* The box's corners stay round behind the buttons' hover */
html[data-theme="sheet"] .counter-ref:not(.is-after) + .counter-step {
  border-radius: 0;
}

html[data-theme="sheet"] .counter-stepper > .counter-step:last-child {
  border-radius: 0 calc(var(--sheet-radius) - 2px) calc(var(--sheet-radius) - 2px) 0;
}

/* No meter on the sheet; a low or empty value is written in red instead */
html[data-theme="sheet"] .counter-card .counter-meter {
  display: none;
}

html[data-theme="sheet"] .counter-card:is(.is-low, .is-empty) .counter-input,
html[data-theme="sheet"] .counter-card.is-error .counter-status {
  color: var(--sheet-blood);
}

html[data-theme="sheet"] .counter-footer {
  grid-column: 1 / -1;
  align-items: center;
  min-height: 1.1rem;
  font-size: 0.75rem;
  font-style: italic;
}

/* "Starting 45" is already in the box */
html[data-theme="sheet"] .counter-card:is([data-counter="luck"], [data-counter="sanity"]) .counter-hint {
  display: none;
}

/* "[99] Max Sanity", as in the row under the sheet's characteristics */
html[data-theme="sheet"] .counter-limit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-style: normal;
}

html[data-theme="sheet"] .counter-limit > .counter-ref-value {
  min-width: 2.4rem;
  padding: 0.1rem 0.35rem;
  border: var(--sheet-line);
  border-radius: 7px;
  font-family: var(--sheet-font-fill);
  font-size: 0.95rem;
  text-align: center;
}

html[data-theme="sheet"] .counter-limit > .counter-ref-label {
  font-family: var(--sheet-font-label);
  font-size: 1.15rem;
  font-weight: 300;
}

html[data-theme="sheet"] .counter-unset {
  grid-column: 1 / -1;
}

/* The four stack in pairs under the characteristics... */
html[data-theme="sheet"] .counter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 3rem;
}

/* ...or, where there's room, sit in a column beside them (and the name and
   portrait above them), as on the sheet. (Narrower, the name,
   characteristics and stats each get a row: there's no room for two side
   by side.) */
@media screen and (min-width: 769px) {
  html[data-theme="sheet"] .container:has(> .level + #counters) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "characteristics"
      "counters";
    justify-content: center;
    justify-items: start;
    align-items: start;
  }

  html[data-theme="sheet"] .container:has(> .level + #counters) > #counters {
    justify-self: stretch;
  }
}

@media screen and (min-width: 1024px) {
  html[data-theme="sheet"] .container:has(> .level + #counters) {
    grid-template-columns: auto minmax(0, 21rem);
    grid-template-areas:
      "name counters"
      "characteristics counters";
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
  }
}

@media screen and (min-width: 769px) {
  html[data-theme="sheet"] .container:has(> .level + #counters) > .level,
  html[data-theme="sheet"] .container:has(> .level + #counters) > .level > *,
  html[data-theme="sheet"] .container:has(> .level + #counters) > .level > * > .level-item {
    display: contents;
  }

  html[data-theme="sheet"] .container:has(> .level + #counters) #character-portrait-card {
    grid-area: name;
    justify-self: start;
    margin-bottom: 1rem;
  }

  html[data-theme="sheet"] .container:has(> .level + #counters) #characteristics-box {
    grid-area: characteristics;
    margin: 0;
  }

  html[data-theme="sheet"] .container:has(> .level + #counters) > #counters {
    grid-area: counters;
  }
}

@media screen and (min-width: 1024px) {
  html[data-theme="sheet"] .container:has(> .level + #counters) > #counters {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    margin-top: 0.75rem;
  }
}

@media screen and (max-width: 640px) {
  html[data-theme="sheet"] .counter-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* The same on the Keeper's screen, smaller */
html[data-theme="sheet"] .keeper-meter-label {
  font-family: var(--sheet-font-label);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}

html[data-theme="sheet"] .keeper-meter-value,
html[data-theme="sheet"] .keeper-meter-max {
  font-family: var(--sheet-font-fill);
}

/* The Keeper's status table: its values (and names) written in, like the
   sheet's, in the narrow face, so every investigator fits across a phone */
html[data-theme="sheet"] .keeper-cell {
  font-family: var(--sheet-font-fill);
}

html[data-theme="sheet"] .keeper-group {
  font-family: var(--sheet-font-serif);
}

/* Headings in the narrow bold face of the sheet's "Regular Hard Extreme"
   captions: in serif, a long tracker's name ("Exposure") widened the table
   past the page at 1024px */
html[data-theme="sheet"] .keeper-label {
  font-family: var(--sheet-font-fill);
  font-weight: 700;
}

/* ---------- Bonus/penalty dice picker ---------- */

html[data-theme="sheet"] {
  --roll-penalty: var(--sheet-blood);
  --roll-penalty-tint: #f6e4e1;
  --roll-on-penalty: var(--sheet-paper);
  --roll-bonus: var(--sheet-gold);
  --roll-bonus-tint: var(--sheet-gold-pale);
  /* Gold alone is too faint an edge on white paper */
  --roll-bonus-edge: var(--sheet-gold-dark);
  --roll-on-bonus: var(--sheet-ink);
}

html[data-theme="sheet"] .roll-modifier {
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  background-color: var(--sheet-paper);
  box-shadow: 2px 2px 0 var(--sheet-ink), 0 8px 24px rgba(35, 31, 32, 0.18);
}

html[data-theme="sheet"] .roll-modifier-side,
html[data-theme="sheet"] .roll-modifier-face {
  font-family: var(--sheet-font-fill);
  font-weight: 700;
}

html[data-theme="sheet"] .roll-modifier-side.is-bonus {
  color: var(--sheet-gold-dark);
}

html[data-theme="sheet"] .roll-modifier-face {
  border-radius: 6px;
  color: var(--sheet-ink);
}

html[data-theme="sheet"] .roll-modifier-option:hover .roll-modifier-face {
  background-color: var(--sheet-shade);
}

html[data-theme="sheet"] .roll-modifier-option.is-normal input:checked + .roll-modifier-face {
  background-color: var(--sheet-ink);
  color: var(--sheet-paper);
}

html[data-theme="sheet"] .roll-modifier-option input:focus-visible + .roll-modifier-face {
  outline-color: var(--sheet-gold-dark);
}

html[data-theme="sheet"] .roll-modifier-status {
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  font-family: var(--sheet-font-fill);
}

/* ---------- Right-click roll menu, theme menu ---------- */

html[data-theme="sheet"] .roll-menu,
html[data-theme="sheet"] .theme-switch-menu {
  border: var(--sheet-line);
  border-radius: var(--sheet-radius);
  background-color: var(--sheet-paper);
  color: var(--sheet-ink);
  box-shadow: 2px 2px 0 var(--sheet-ink), 0 12px 32px rgba(35, 31, 32, 0.2);
}

html[data-theme="sheet"] .roll-menu-title,
html[data-theme="sheet"] .theme-switch-title {
  border-bottom: 1px solid var(--sheet-rule);
  color: var(--sheet-ink);
  font-family: var(--sheet-font-serif);
  font-size: 0.95rem;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 1;
  text-transform: none;
}

html[data-theme="sheet"] .roll-menu-item,
html[data-theme="sheet"] .theme-switch-item {
  border-radius: 6px;
  font-family: var(--sheet-font-serif);
}

html[data-theme="sheet"] .theme-switch-item[aria-current="true"] {
  color: var(--sheet-gold-dark);
  font-weight: 700;
}

html[data-theme="sheet"] .roll-menu-item.is-normal:focus,
html[data-theme="sheet"] .theme-switch-item:hover,
html[data-theme="sheet"] .theme-switch-item:focus-visible {
  background-color: var(--sheet-gold-pale);
  color: var(--sheet-ink);
}

/* ---------- Live sheet ---------- */

/* What changed elsewhere glows the sheet's gold, built up in layers so it
   shows on white paper; gold text is too faint to read, so changed numbers
   (and increases) flash the darker gold, and decreases are written in red */
html[data-theme="sheet"] {
  --live-highlight: var(--sheet-gold);
  --live-number: var(--sheet-gold-dark);
  --live-glow: drop-shadow(0 0 1px var(--sheet-gold))
    drop-shadow(0 0 5px var(--sheet-gold))
    drop-shadow(0 0 14px rgb(244 190 64 / 0.85));
  --live-wash: rgb(244 190 64 / 0.3);
  --counter-increase: var(--sheet-gold-dark);
  --counter-decrease: var(--sheet-blood);
  /* Dice as if written in, on the sheet's shading; none left, in blood */
  --dice-font: var(--sheet-font-fill);
  --dice-weight: 700;
  --dice-tint: var(--sheet-shade);
  --actions-out: var(--sheet-blood);
}

html[data-theme="sheet"] .live-status {
  color: var(--sheet-ink-soft);
  font-family: var(--sheet-font-serif);
  font-style: italic;
}

/* ---------- Tablets ---------- */

/* Three columns of skills are narrow here; slimmer boxes leave the names
   more room */
@media screen and (min-width: 769px) and (max-width: 1215px) {
  html[data-theme="sheet"] .skill-values {
    --sheet-cell: 2rem;
  }
}

/* ---------- Phones ---------- */

/* Narrower boxes and tabs, so two columns of characteristics still fit */
@media screen and (max-width: 768px) {
  html[data-theme="sheet"] #characteristics-box,
  html[data-theme="sheet"] .container:has(> .section-title + #skill-columns) {
    --sheet-side-tab: 2rem;
  }

  html[data-theme="sheet"] #characteristics-box {
    padding-right: 0;
  }

  html[data-theme="sheet"] .characteristics-grid {
    column-gap: 0.75rem;
  }

  html[data-theme="sheet"] .characteristic-name {
    font-size: 1.35rem;
  }

  /* Shorter rule either side of a tab, kept clear of a title's button */
  html[data-theme="sheet"] .section-title:not(.has-action)::before,
  html[data-theme="sheet"] .section-title:not(.has-action)::after,
  html[data-theme="sheet"] .section-title.has-action > :first-child::before,
  html[data-theme="sheet"] .section-title.has-action > :first-child::after {
    width: 1.25rem;
  }

  html[data-theme="sheet"] .section-title.has-action > :first-child {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  html[data-theme="sheet"] .characteristic-values,
  html[data-theme="sheet"] .skill-values,
  html[data-theme="sheet"] .weapon-levels {
    --sheet-cell: 1.85rem;
    font-size: 0.95rem;
  }

  html[data-theme="sheet"] .characteristics-grid > :nth-child(-n + 2) :is(.characteristic-level, .characteristic-fractions > span)::before,
  html[data-theme="sheet"] #skill-columns > .column > .skill-row:first-child :is(.skill-level, .skill-fractions > span)::before {
    font-size: 0.58rem;
  }

  /* The columns stack into one list, captioned once at the top */
  html[data-theme="sheet"] #skill-columns > .column:not(:first-child) > .skill-row:first-child :is(.skill-level, .skill-fractions > span)::before {
    content: none;
  }
}