:root {
  --ink: #1c1a17;
  --paper: #f6f2e9;
  --card: #fffdf8;
  --line: #d8cfbd;
  --accent: #6b2b2b;
  --accent-soft: #efe8d8;
  --muted: #7a7264;
  --good: #2e6b3e;
  --warn: #8a5a00;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  font:
    15px/1.5 "Iowan Old Style",
    Georgia,
    serif;
  color: var(--ink);
  background: var(--paper);
}

/* --- header ----------------------------------------------------------------- */
header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.45rem 1rem;
  border-bottom: 2px solid var(--accent);
  background: var(--accent-soft);
  position: sticky;
  top: 0;
  z-index: 20;
}
header h1 {
  font-size: 1.1rem;
  margin: 0;
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
}
nav#tabs {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
}
nav#tabs button {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.25rem 0.8rem;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
nav#tabs button:hover:not(:disabled):not(.active) {
  border-color: var(--accent);
}
nav#tabs button.active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
nav#tabs button:disabled {
  opacity: 0.4;
  cursor: default;
}
#current {
  color: var(--muted);
  font-style: italic;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#user {
  color: var(--accent);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.workspace {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.75rem;
}
.workspace h2 {
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}
.workspace nav {
  display: flex;
  gap: 0.3rem;
}
.workspace nav .active {
  background: var(--accent);
  color: var(--paper);
}
.workspace-actions {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.start-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 0.9rem;
  padding: 0.8rem 0.9rem;
}
.start-panel h2 {
  color: var(--accent);
  font-size: 1.15rem;
  margin: 0 0 0.25rem;
}
.start-panel p {
  margin: 0 0 0.65rem;
}
.start-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.import-choice {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: 0.25rem;
}
.import-choice b {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: normal;
}
.import-label {
  cursor: pointer;
}
.field-narrow {
  flex: 1;
}
.field-wide {
  flex: 2;
}
.advanced-rules {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0.55rem 0;
  padding: 0.45rem 0.55rem;
}
.view-title {
  color: var(--accent);
  margin: 0.2rem 0;
}
.compact-help {
  font-size: 0.8rem;
  margin: 0.2rem 0 0.5rem;
}
.campaign-sources {
  border: 0;
  padding: 0;
}
.spaced-action {
  margin-top: 0.5rem;
}
.compact-row {
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
}
.compact-number {
  width: 4rem;
}
.choice-piece {
  margin-bottom: 0.5rem;
}
.inline-check {
  align-items: center;
  display: flex;
  gap: 0.3rem;
}
.preview-loading {
  min-height: 4rem;
}
/* Why a search came back short. Deliberately outside .eq-results so that a live region is
   present and empty before its text arrives — a status node inserted with content already
   in it is never announced, which is why the old "No native item matches." was silent. */
.eq-hidden-note:empty {
  display: none;
}
.hidden-note {
  margin: 0.35rem 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.hidden-note button {
  margin-left: 0.3rem;
}
.eq-results {
  display: grid;
  gap: 0.25rem;
  margin: 0.25rem 0 0.55rem;
  max-height: 12rem;
  overflow: auto;
}
.eq-result {
  text-align: left;
  width: 100%;
}
.eq-pager {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}
.native-choice {
  margin: 0.75rem 0;
}
.native-choice select {
  width: 100%;
}
.draft-status {
  color: var(--accent);
  font-size: 0.9rem;
  margin: 0;
}
.import-review {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  margin-bottom: 0.8rem;
  padding: 0.7rem 0.9rem;
}
.import-review h3,
.import-review h4 {
  color: var(--accent);
  margin: 0 0 0.3rem;
}
.import-review h4 {
  font-size: 0.9rem;
}
.review-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.review-grid ul {
  margin: 0;
  padding-left: 1.2rem;
}
.extra-feature-row {
  display: flex;
  flex: 1;
  gap: 0.35rem;
}
.extra-feature-row input:first-child {
  max-width: 13rem;
}
.extra-feature-row input:nth-child(3) {
  max-width: 9rem;
}
.save-blocker {
  background: #fbf3e0;
  border: 1px solid #e7cf9b;
  border-radius: 7px;
  margin-bottom: 0.8rem;
  padding: 0.7rem;
}

/* --- buttons & inputs -------------------------------------------------------- */
button {
  touch-action: manipulation;
}
button.primary {
  background: var(--accent);
  color: var(--paper);
  border: none;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  transition: background 0.12s;
}
button.primary:hover {
  background: #833838;
}
.ghost {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  color: var(--ink);
  display: inline-block;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.derived-action {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  vertical-align: top;
}
.derived-blocker,
.derived-readonly {
  color: var(--accent);
  display: block;
  font-size: 0.82rem;
  max-width: 40rem;
}
.derived-readonly {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 4px;
  margin: 0.8rem 0;
  padding: 0.7rem;
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button.armed {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
button.danger {
  background: #8f2721;
  border: 1px solid #8f2721;
  color: #fff;
}
button.danger:hover:not(:disabled) {
  background: #6f1e1a;
}
.danger-zone {
  border: 2px solid #8f2721;
  border-radius: 8px;
  margin: 1rem auto;
  max-width: 52rem;
  padding: 1rem;
}
.danger-zone h2,
.danger-zone legend {
  color: #8f2721;
}
input,
select {
  font: inherit;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  width: 100%;
}
input:focus,
select:focus {
  border-color: var(--accent);
  outline: none;
}
label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.4rem 0 0.1rem;
}
fieldset {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  min-width: 0;
}
legend {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--accent);
  padding: 0 0.4rem;
}
.row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --- dropdown menus (native <details>) ---------------------------------------- */
details.menu {
  position: relative;
  display: inline-block;
}
details.menu > summary {
  list-style: none;
  cursor: pointer;
}
details.menu > summary::-webkit-details-marker {
  display: none;
}
details.menu > .menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(28, 26, 23, 0.18);
  padding: 0.5rem;
  z-index: 30;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
details.menu .menu-body > * {
  text-align: left;
}
details.menu .menu-body label {
  margin: 0;
}
/* The workspace Actions summary sits near the left edge, so a right-anchored body of
   min-width 12rem extends off-screen at phone widths (measured x = -90.2 at 390px). Flip
   the anchor for this one menu; the list-card and header menus sit at the right edge and
   stay correct under the shared rule. A max-width clamp cannot fix this: min-width wins,
   and narrowing a box that overflows leftwards does not move it. */
.workspace-actions > details.menu > .menu-body {
  left: 0;
  right: auto;
}

/* --- toasts (non-blocking feedback) ------------------------------------------- */
/* Fixed to the bottom rather than in flow above <main>: in flow, showing and dismissing
   a toast shifted the page by ~45-70px and could move a control out from under a finger
   mid-tap, and a failure was invisible to anyone scrolled down. Above the header (20) and
   an open menu body (30), because the PDF action deliberately leaves its menu open. */
body {
  padding-bottom: 3.5rem; /* the fixed #statusbar must not sit on top of the page's foot */
}
#statusbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0 1.2rem 0.6rem;
  pointer-events: none;
}
#play-status {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin: 0.4rem auto 0;
  padding: 0.25rem 0.7rem;
  width: fit-content;
  max-width: 90vw;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font-size: 0.85rem;
  pointer-events: none;
}
#play-retry {
  pointer-events: auto;
}
#play-status[hidden] {
  display: none;
}
#play-save.err {
  color: var(--accent);
  font-weight: 600;
}
.toast {
  background: var(--ink);
  color: var(--paper);
  margin: 0.6rem auto;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(28, 26, 23, 0.3);
  font-size: 0.9rem;
  max-width: 90vw;
  width: fit-content;
  animation: toastin 0.18s ease-out;
  /* Never `auto`: an error dwells 30s at a fixed position over the foot of the page, and
     `auto` let one sit on top of a menu action and swallow the tap. Only its own close
     button takes pointer events. */
  pointer-events: none;
}
.toast-close {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: 0.6rem;
  padding: 0 0.2rem;
  pointer-events: auto;
}
.toast.error {
  background: var(--accent);
}
@keyframes toastin {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* --- auth / misc -------------------------------------------------------------- */
.auth {
  max-width: 320px;
  margin: 4rem auto;
}
.auth fieldset {
  margin-bottom: 1rem;
}
.auth .err,
.err {
  color: var(--accent);
  min-height: 1.2em;
  font-size: 0.85rem;
}
.ro-banner {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  margin-bottom: 0.8rem;
  color: var(--muted);
}
.member {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.2rem 0;
}
.member .badge {
  font-size: 0.7rem;
  background: var(--accent);
  color: var(--paper);
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
}
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem;
}
.muted {
  color: var(--muted);
}

/* --- character list ------------------------------------------------------------ */
.toolbar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.9rem;
}
.creation-entry .start-actions {
  align-items: flex-start;
}
.toolbar input[type="search"] {
  flex: 1;
  min-width: 10rem;
  max-width: 24rem;
}
.charcard {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: var(--card);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.charcard[role="button"] {
  cursor: pointer;
}
.charcard[role="button"]:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 5px rgba(107, 43, 43, 0.18);
}
.charcard .who {
  flex: 1;
  min-width: 0;
}
.char-open {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex: 1;
  font: inherit;
  min-width: 0;
  padding: 0;
  text-align: left;
}
.char-open:hover .who b {
  color: var(--accent);
}
.charcard .who b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.charcard .who .sum {
  color: var(--muted);
  font-size: 0.8rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- authoring ------------------------------------------------------------------ */
.cols {
  display: block;
}
.cols > * {
  min-width: 0; /* grid items must be allowed to shrink below content width */
}
.author-form,
.author-form .row {
  min-width: 0;
}
.author-form .row {
  flex-wrap: wrap;
}
.paneswitch {
  display: flex;
  margin: 0;
  border: 1px solid var(--accent);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 2px 6px rgba(28, 26, 23, 0.12);
}
.paneswitch button {
  flex: 1;
  border: none;
  background: var(--paper);
  padding: 0.5rem;
  font: inherit;
  cursor: pointer;
}
.paneswitch button.active {
  background: var(--accent);
  color: var(--paper);
}
.cols.pane-edit #preview {
  display: none;
}
.cols.pane-preview .author-form {
  display: none;
}
.author-controls {
  align-items: stretch;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.8rem;
}
.author-savebar {
  align-items: center;
  align-self: flex-end;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  min-height: 2.6rem;
  max-width: 100%;
  padding: 0.35rem 0.45rem;
}
.author-save-feedback {
  display: grid;
  font-size: 0.85rem;
  line-height: 1.2;
  min-width: 0;
}
.author-save-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.4rem;
}
.abilities6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.abilities6 > div {
  text-align: center;
}
.score-methods {
  display: grid;
  gap: 0.35rem;
  margin: 0.7rem 0 0.4rem;
}
.score-method-label {
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 0.1rem;
}
.score-method-option {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 0.55rem;
}
.score-method-option:hover,
.score-method-option:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.score-method-option input {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  width: auto;
}
.score-method-option span {
  display: grid;
  gap: 0.1rem;
}
.score-method-option b {
  color: var(--ink);
}
.score-method-option small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}
.standard-array-editor {
  border-top: 1px solid var(--line);
  margin-top: 0.7rem;
  padding-top: 0.5rem;
}
.score-assignment-grid select {
  text-align: center;
}
.choice-hint.off {
  color: var(--warn);
}
.choice-explanation {
  margin: 0.2rem 0 0.55rem;
}
.choice-selected-summary,
.choice-preview,
.option-summary {
  color: var(--muted);
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0.2rem 0;
}
.choice-comparison > summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
  width: fit-content;
}
.choice-preview {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  min-height: 2.4rem;
  padding: 0.35rem 0.5rem;
}
.choice-preview-options {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.choice-preview-option {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  min-height: 2.5rem;
  padding: 0.35rem 0.45rem;
  text-align: left;
}
.choice-preview-option:hover,
.choice-preview-option.selected {
  border-color: var(--accent);
}
.choice-preview-option:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.inf-row > .choice-selected-summary {
  flex-basis: 100%;
}
.author-stage-heading {
  color: var(--ink);
  font-size: 0.95rem;
  margin: 1.2rem 0 0.5rem;
}
.author-stage-heading small,
.author-task-panel > summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}
.author-build-choices {
  min-width: 0;
}
.author-choice-overview {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0.35rem 0 0.65rem;
  padding: 0.5rem 0.6rem;
}
.author-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0;
}
.overview-action {
  background: var(--card);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.25rem 0.5rem;
}
.author-task-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0.45rem 0;
  min-width: 0;
  overflow: hidden;
}
.author-task-panel > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  list-style: none;
  min-height: 2.75rem;
  padding: 0.55rem 2.4rem 0.55rem 0.7rem;
  position: relative;
}
.author-task-panel > summary::-webkit-details-marker {
  display: none;
}
.author-task-panel > summary::after {
  color: var(--accent);
  content: " ";
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 0.55rem;
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-65%) rotate(-45deg);
  transition: transform 0.12s;
  width: 0.55rem;
}
.author-task-panel[open] > summary::after {
  transform: translateY(-35%) rotate(45deg);
}
.author-task-panel > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.author-task-panel > summary .summary-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.author-task-panel > summary .summary-copy > span {
  color: var(--ink);
  font-weight: 600;
}
.author-panel-body {
  border-top: 1px solid var(--line);
  min-width: 0;
  padding: 0.55rem 0.7rem;
}
.author-panel-body fieldset {
  margin: 0.55rem 0;
}
.manual-skills {
  border-top: 1px solid var(--line);
  margin-top: 0.6rem;
  padding-top: 0.4rem;
}
.manual-skills > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.4rem 0;
}
.manual-skill-row,
.authored-feat-row,
.feat-result,
.spell-row-main {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  min-width: 0;
  padding: 0.3rem 0;
}
.manual-skill-row > span,
.authored-feat-row > span,
.feat-result > span,
.spell-row-main > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.stored-count {
  color: var(--muted);
  flex-basis: 100%;
  font-size: 0.75rem;
}
.skill-choice-entry {
  min-width: 0;
}
.skill-entry .skill-name,
.manual-skill-row .skill-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.skill-entry .grant-src,
.manual-skill-row .grant-src {
  flex: 0 1 auto;
  margin-left: auto;
  max-width: 48%;
  text-align: right;
}
.skill-status {
  color: var(--muted);
  flex-basis: 100%;
  font-size: 0.75rem;
}
.off-list-row .skill-status {
  color: var(--warn);
}
.skill-row-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.3rem;
  margin-left: auto;
}
.skill-declarations {
  border-left: 2px solid var(--line);
  margin: 0.05rem 0 0.25rem 1.45rem;
  padding-left: 0.45rem;
}
.skill-declarations > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.15rem 0;
}
.skill-declaration-row {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  gap: 0.4rem;
  justify-content: space-between;
  padding: 0.15rem 0;
}
.skill-declaration-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.authored-feat-row.granted,
.derived-spell {
  color: var(--muted);
}
.spell-group {
  border-top: 1px solid var(--line);
  margin-top: 0.45rem;
  padding-top: 0.35rem;
}
.spell-group h4,
.your-spells h4,
.spellpick h4 {
  margin: 0.25rem 0;
}
.spell-row {
  border-bottom: 1px dotted var(--line);
  padding: 0.25rem 0;
}
.spell-row:last-child {
  border-bottom: 0;
}
.spell-prepared,
.spell-filter {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
  margin: 0.15rem 0;
}
.spell-prepared input,
.spell-filter input {
  width: auto;
}
.spell-picker-controls {
  align-items: end;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.spell-search-control,
.spell-scope-control {
  grid-column: 1 / -1;
}
.spell-picker-controls label {
  color: var(--muted);
  font-size: 0.78rem;
}
.spell-picker-controls input,
.spell-picker-controls select {
  display: block;
  margin-top: 0.15rem;
  width: 100%;
}
.spell-more-filters {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(4, minmax(8rem, 1fr));
  padding: 0.35rem 0;
}
.spell-property-filters {
  margin: 0.55rem 0;
}
.spell-more-filters .spell-filter {
  align-items: stretch;
  display: flex;
  flex-direction: column;
}
.spell-more-filters .spell-filter select {
  margin-top: 0.15rem;
  width: 100%;
}
.spell-source-override {
  color: var(--muted);
  font-size: 0.78rem;
}
.spell-active-row {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  margin: 0.35rem 0;
}
.spell-active-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.spell-hit-row {
  align-items: center;
  border-bottom: 1px dotted var(--line);
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  padding: 0.35rem 0;
}
.spell-hit-row > div {
  min-width: 0;
}
.spell-hit-meta {
  display: block;
  overflow-wrap: anywhere;
}
.spell-action {
  flex: 0 0 auto;
  min-width: 5.5rem;
}
.spell-action-disabled {
  cursor: default;
  opacity: 0.7;
}
.spell-result-count {
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.25rem 0;
}
.spell-replace-panel {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 0 0.45rem;
  padding: 0.55rem;
}
.spell-replace-panel label {
  color: var(--muted);
  font-size: 0.78rem;
}
.spell-replace-panel select {
  display: block;
  margin-top: 0.2rem;
  width: 100%;
}
.spell-replace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.spell-advanced {
  margin-top: 0.2rem;
}
.spell-advanced > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
}
.spell-advanced label {
  font-size: 0.8rem;
  margin: 0.25rem 0;
}
.spell-advanced input:not([type="checkbox"]) {
  display: block;
  width: 100%;
}
.advisory-inline {
  color: var(--warn);
  font-size: 0.8rem;
  margin: 0.25rem 0;
}
.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
}
.progression-compact {
  columns: 2;
  margin: 0.4rem 0;
  padding-left: 1.2rem;
}
.author-stage-details {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 1.2rem 0 1rem;
  padding: 0;
}
.author-stage-details > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  list-style: none;
  padding: 0.65rem 2.4rem 0.65rem 0.8rem;
  position: relative;
}
.author-stage-details > summary::-webkit-details-marker {
  display: none;
}
.author-stage-details > summary::after {
  color: var(--accent);
  content: " ";
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 0.55rem;
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-65%) rotate(-45deg);
  transition: transform 0.12s;
  width: 0.55rem;
}
.author-stage-details[open] > summary::after {
  transform: translateY(-35%) rotate(45deg);
}
.author-stage-details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.author-stage-details > summary .summary-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.author-stage-details > summary .summary-copy > span {
  color: var(--ink);
  font-weight: 600;
}
.author-stage-details > summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  text-align: right;
}
.author-stage-details[open] > summary {
  border-bottom: 1px solid var(--line);
}
.author-stage-details > fieldset {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
}
.author-stage-details > fieldset:last-child {
  border-bottom: 0;
}
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.1rem 0.6rem;
}
/* Allowed-sources picker: full book names grouped and colored by edition (2014 = accent
   red, 2024 = green), collapsed by default to a row of acronym chips so the long titles
   don't crowd the form. */
.srcpick {
  margin: 0.15rem 0 0.3rem;
}
.srcpick > summary {
  max-width: 100%;
}
.srcsum {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  vertical-align: middle;
}
.srccaret {
  color: var(--muted);
  font-size: 0.7rem;
  margin-left: 0.4rem;
  display: inline-block;
}
.srcpick[open] .srccaret {
  transform: rotate(180deg);
}
.srcsum em {
  color: var(--muted);
}
.chip,
.src-opt .code {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.04rem 0.34rem;
  border-radius: 3px;
  color: #fff;
  background: var(--muted);
  white-space: nowrap;
}
.ed-2014 .code,
.chip.ed-2014 {
  background: var(--accent);
}
.ed-2024 .code,
.chip.ed-2024 {
  background: var(--good);
}
.srcgroup {
  margin-top: 0.5rem;
  padding-left: 0.6rem;
  border-left: 3px solid var(--line);
}
.srcgroup.ed-2014 {
  border-left-color: var(--accent);
}
.srcgroup.ed-2024 {
  border-left-color: var(--good);
}
.srcgroup h4 {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.srcgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.05rem 0.8rem;
}
.src-opt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.12rem 0;
  color: var(--ink);
  font-size: 0.9rem;
}
.src-opt .nm {
  flex: 1;
}
.src-opt input {
  width: auto;
}
.checks label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--ink);
  margin: 0.1rem 0;
  text-transform: capitalize;
}
.checks input {
  width: auto;
}
/* --- auto-granted (locked) chips: everything the engine derives from the chosen
   species/class/background is shown checked+greyed+disabled, never re-entered. Mirrors
   the "from background" disabled-feat pattern. */
.granted-legend {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
  margin: 0 0 0.8rem;
  padding: 0.35rem 0.6rem;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--accent-soft);
}
.checks label.granted,
.granted-list .granted {
  color: var(--muted);
}
.grants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.1rem 0 0.3rem;
}
.grant-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.12rem 0.45rem;
}
.grant-chip input {
  width: auto;
}
.grant-src {
  font-style: italic;
  opacity: 0.85;
}
.grant-empty {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}
/* Advisory "guided choices" counters in the Skills fieldset (Phase D). Purely a hint —
   never disables or hides a control. The count turns amber when it doesn't match the target. */
.choice-hint {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.1rem 0 0.3rem;
}
.source-requirement {
  color: var(--warn);
}
.source-requirement:empty {
  display: none;
}
.source-requirement .source-add {
  color: var(--accent);
  margin-left: 0.25rem;
  padding: 0.15rem 0.4rem;
}
.choice-hint b.off {
  color: var(--warn);
}
/* Subtle pool marker: skills that are in the class skill-choice pool get a faint accent tick. */
.checks label.in-pool {
  border-left: 2px solid var(--accent-soft);
  padding-left: 0.3rem;
  margin-left: -0.3rem;
}
/* "Show all options" toggle: inline checkbox + label, ignoring the block label default. */
.show-all-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  margin: 0.5rem 0 0.1rem;
}
.show-all-toggle input {
  width: auto;
}
.spellpick .hits {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0.3rem;
  max-height: 16rem;
  overflow-y: auto;
}
.spellpick .hit {
  font: inherit;
  text-align: left;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: background 0.12s;
}
.spellpick .hit:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* --- character sheet view — styles for the server-rendered fragment (codex/html.py),
   kept visually in step with the PDF's print CSS in codex/pdf.py */
.sheet {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 1px 0 #e7dcc6;
  min-width: 0;
}
.sheet h1 {
  margin: 0 0 0.1rem;
  font-size: 1.5rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.sheet h3 {
  color: var(--accent);
  margin: 0.9rem 0 0.2rem;
  font-size: 1rem;
  border-bottom: 1px solid #e6dcc8;
  padding-bottom: 1px;
}
.sheet .sub {
  color: var(--muted);
  font-style: italic;
  margin-bottom: 0.2rem;
}
.sheet .meta {
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}
.sheet table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0.4rem 0;
  /* scroll a too-wide table (e.g. the 7-column spellbook) inside its own box instead of
     forcing horizontal page scroll — matters in the 701–999px single-column band, and is
     harmless where the table already fits. */
  display: block;
  overflow-x: auto;
}
.sheet th,
.sheet td {
  border: 1px solid var(--line);
  padding: 0.2rem 0.45rem;
  text-align: left;
  font-size: 0.85rem;
  vertical-align: top;
}
.sheet th {
  background: #f3ecdd;
  color: var(--accent);
  font-variant: small-caps;
}
.sheet .acards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.sheet .acard {
  border: 1px solid var(--line);
  border-radius: 7px;
  text-align: center;
  padding: 0.3rem 0.1rem;
}
.sheet .acard .an {
  font-variant: small-caps;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.sheet .acard .am {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.sheet .acard .asc,
.sheet .acard .as {
  color: var(--muted);
  font-size: 0.75rem;
}
.sheet .acard .anote {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.15;
  margin: 0.1rem 0;
}
.sheet .boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.sheet .box {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.25rem 0.6rem;
  min-width: 4rem;
  text-align: center;
}
/* box label/value typography is shared with the play tracker's .statstrip (below) */
.sheet .box .bl,
.statstrip .bl {
  font-variant: small-caps;
  font-size: 0.65rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  display: block;
}
.sheet .box .bv,
.statstrip .bv {
  font-size: 1.05rem;
  font-weight: 700;
}
.sheet .box .bs {
  font-size: 0.65rem;
  color: var(--muted);
}
/* skills grid is shared with the play tracker's .skillsref .skgrid (below) */
.sheet .skills,
.skillsref .skgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px 0.9rem;
}
.sheet .skills {
  margin: 0.2rem 0;
}
.sheet .skills .sk {
  align-items: baseline;
  display: grid;
  gap: 0.2rem 0.35rem;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  font-size: 0.85rem;
}
.sheet .skills .skill-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sheet .skills .ab {
  color: #9a8f7c;
  font-size: 0.7rem;
}
.sheet .skills .src {
  justify-self: end;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
}
.sheet .prof {
  font-weight: 700;
}
.sheet ul {
  margin: 0.15rem 0;
  padding-left: 1.2rem;
}
.sheet li {
  margin: 0.1rem 0;
  font-size: 0.9rem;
}
.sheet .src {
  color: #9a7b3a;
  font-style: italic;
  font-size: 0.75rem;
}
.sheet .kv {
  margin: 0.15rem 0;
  font-size: 0.85rem;
}
.sheet .kv b {
  color: var(--accent);
}
.sheet .legend,
.sheet .tag {
  color: var(--muted);
  font-size: 0.75rem;
}
.sheet .eqp {
  color: var(--good);
  font-weight: 700;
}
.inert {
  color: var(--muted);
  font-size: 0.75rem;
  font-style: italic;
}
.warn {
  background: #fbf3e0;
  border: 1px solid #e7cf9b;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin-top: 0.8rem;
}
.warn ul {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
}
.warn li {
  color: var(--warn);
}
/* Advisory variant of the .warn panel: muted, never alarming — it's a hint, not an error.
   Used for the in-form warnings strip (#warn-strip) surfaced while editing. */
.warn.advisory {
  background: #f4f1ea;
  border-color: var(--line);
}
.warn.advisory b {
  color: var(--muted);
}
.warn.advisory li {
  color: var(--ink);
}
.warn-x {
  float: right;
  padding: 0 0.3rem;
  line-height: 1.2;
}
/* Small count badge on the Preview pane-switch button (narrow screens hide the preview). */
.warn-badge {
  color: var(--warn);
  font-weight: 600;
  white-space: nowrap;
}
.ok {
  color: var(--good);
}

/* --- play tracker ------------------------------------------------------------- */
.statstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
/* .statstrip .bl/.bv typography is defined with .sheet .box's above (shared) */
.statstrip .sbox {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.25rem 0.6rem;
  min-width: 3.6rem;
  text-align: center;
  background: var(--card);
}
.skillsref {
  margin-bottom: 0.8rem;
}
.skillsref > summary {
  width: max-content;
}
/* grid columns/gap are defined with .sheet .skills above (shared); box chrome is local */
.skillsref .skgrid {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  padding: 0.5rem 0.8rem;
  margin-top: 0.4rem;
  font-size: 0.85rem;
}
.skillsref .skgrid > div {
  text-transform: capitalize;
}
.skillsref .prof {
  font-weight: 700;
}
.attacksref {
  margin-bottom: 0.8rem;
}
.attacksref > summary {
  width: max-content;
}
.attacksref .atkgrid {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  padding: 0.5rem 0.8rem;
  margin-top: 0.4rem;
  font-size: 0.85rem;
}
.attacksref .atkgrid > div {
  padding: 0.1rem 0;
}
.tracker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.trackable {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.45rem 0;
}
.trackable:last-child {
  border-bottom: 0;
}
.trackable small {
  color: var(--muted);
  display: block;
}
.death-saves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}
.play-spells ul,
.primary-reminders ul {
  padding-left: 1.2rem;
}
.play-spells li,
.primary-reminders li {
  margin-bottom: 0.45rem;
}
.equip-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0.35rem 0;
  padding: 0.5rem 0.65rem;
}
.equip-row > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.equip-actions {
  color: var(--accent);
}
.equip-edit {
  border-top: 1px solid var(--line);
  margin-top: 0.45rem;
  padding-top: 0.35rem;
}
.equipment-fields {
  align-items: end;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(6rem, 9rem) 1fr;
}
.eq-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.eq-flags label {
  align-items: center;
  display: flex;
  gap: 0.3rem;
}
footer {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem 0.7rem 1.5rem;
}
footer .provenance {
  display: block;
  margin-top: 0.25rem;
}
.tracker fieldset {
  background: var(--card);
}
.hpbox {
  font-size: 2rem;
  text-align: center;
}
.rest-spacer,
.grow {
  flex: 1;
}
.hp-amount {
  width: 5rem;
}
.no-wrap {
  white-space: nowrap;
}
.play-uncommon {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}
.play-uncommon > summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}
.pip {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  margin: 2px;
  cursor: pointer;
  background: #fff;
  transition: background 0.1s;
}
.pip:hover {
  background: #e9d7d7;
}
.pip.used {
  background: var(--accent);
}
.counter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.15rem 0;
}
.counter .cname {
  flex: 1 1 7rem;
  min-width: 0;
}
.counter button {
  min-width: 2rem;
}
.rests {
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}
.rest-summary {
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.cond-notes {
  margin-top: 0.5rem;
}
.cond-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
#cond {
  flex: 1 1 10rem;
}

/* --- narrow screens -------------------------------------------------------------- */
@media (max-width: 1000px) {
  .author-controls {
    background: var(--paper);
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.35rem 0;
    position: sticky;
    top: 0;
    z-index: 16;
  }
  header {
    position: static;
  }
}

@media (max-width: 700px) {
  .spell-hit-row {
    align-items: flex-start;
  }
  .spell-more-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .spell-picker-controls {
    grid-template-columns: 1fr;
  }
  .spell-picker-controls > label {
    grid-column: 1;
  }
  .spell-more-filters {
    grid-template-columns: 1fr;
  }
}

/* phones and small tablets: tappable controls, tighter chrome */
@media (max-width: 700px) {
  main {
    padding: 0.7rem;
  }
  header {
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
  }
  #current {
    display: none;
  }
  header h1 {
    font-size: 1rem;
  }
  #user {
    margin-left: auto;
  }
  .charcard {
    padding: 0.6rem 0.7rem;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  button:not(.pip) {
    min-height: 44px;
  }
  .pip {
    min-height: 44px;
    min-width: 44px;
  }
  .workspace {
    align-items: stretch;
    flex-direction: column;
    gap: 0.45rem;
  }
  .workspace-actions {
    justify-content: space-between;
  }
  .author-savebar {
    justify-content: space-between;
  }
  .author-stage-details > summary {
    align-items: flex-start;
  }
  .author-stage-details > summary small {
    text-align: left;
  }
  .author-task-panel > summary {
    align-items: flex-start;
  }
  .author-task-panel > summary small {
    text-align: left;
  }
  .progression-compact {
    columns: 1;
  }
  .author-choice-overview,
  .author-panel-body,
  .spellpick {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  #statusbar {
    padding: 0 0.7rem 0.6rem;
  }
  .start-actions,
  .import-choice {
    align-items: stretch;
    flex-direction: column;
  }
  .import-choice {
    margin-left: 0;
  }
  .import-choice b {
    margin-top: 0.2rem;
  }
  .review-grid {
    grid-template-columns: 1fr;
  }
  .extra-feature-row {
    flex-direction: column;
  }
  .extra-feature-row input:first-child,
  .extra-feature-row input:nth-child(3) {
    max-width: none;
  }
  .trackable {
    align-items: flex-start;
    flex-direction: column;
  }
  .equipment-fields {
    grid-template-columns: 1fr;
  }
  .sheet {
    padding: 0.8rem 0.7rem;
  }
}

/* Narrow phones: the 7-column spellbook table is unreadable side-scrolling, so stack each
   spell into a labeled card. Scoped to .spellbook ONLY — every other .sheet table keeps the
   horizontal-scroll behavior. Column labels come from static ::before content in column order
   (Lv·Spell·Time·Range·Duration·Comp.·Effect), so the html.py row markup stays untouched. */
@media (max-width: 500px) {
  /* One skill per row: the 2-column grid is too cramped to hold a skill's checkboxes AND a
     granted skill's "· source" line without wrapping the ★ control raggedly. Full width lets
     each skill sit on one line with its provenance cleanly beneath it. */
  .checks {
    grid-template-columns: 1fr;
  }
  .sheet table.spellbook {
    display: block;
  }
  .sheet table.spellbook tbody {
    display: block;
  }
  .sheet table.spellbook thead {
    display: none; /* ::before labels replace the table heading on cards */
  }
  .sheet table.spellbook tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    padding: 0.4rem 0.6rem;
    margin: 0 0 0.5rem;
  }
  .sheet table.spellbook td {
    display: block;
    border: none;
    padding: 0.1rem 0;
  }
  .sheet table.spellbook td:nth-of-type(2) {
    font-size: 1.05em; /* the spell name is the card title — no label prefix */
    padding-bottom: 0.25rem;
  }
  .sheet table.spellbook td:not(:nth-of-type(2)):before {
    font-weight: 700;
    color: var(--muted);
    margin-right: 0.35rem;
  }
  .sheet table.spellbook td:nth-of-type(1):before {
    content: "Level:";
  }
  .sheet table.spellbook td:nth-of-type(3):before {
    content: "Time:";
  }
  .sheet table.spellbook td:nth-of-type(4):before {
    content: "Range:";
  }
  .sheet table.spellbook td:nth-of-type(5):before {
    content: "Duration:";
  }
  .sheet table.spellbook td:nth-of-type(6):before {
    content: "Components:";
  }
  .sheet table.spellbook td:nth-of-type(7):before {
    content: "Effect:";
  }
}

.level-guide-task {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 2fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
}
.level-guide-task small {
  color: var(--muted);
}
@media (max-width: 700px) {
  .level-guide-task {
    grid-template-columns: 1fr auto;
  }
  .level-guide-task small {
    grid-column: 1 / -1;
  }
}

@media print {
  header,
  nav,
  #tabs,
  .author-form,
  .paneswitch,
  .play-only,
  #statusbar,
  button {
    display: none !important;
  }
  .cols {
    display: block;
  }
  body {
    background: #fff;
  }
  .sheet {
    border: none;
    box-shadow: none;
    padding: 0;
  }
}