/* =========================================================
   BONFIRE STYLES
   Mobile-first architecture:
   1. Base / mobile styles are the default.
   2. Small-screen adjustments follow the relevant component.
   3. Desktop-only changes are explicitly marked DESKTOP and use
      @media (min-width: 900px), unless a wider breakpoint is required.
   4. Version history belongs in Git/ZIP history, not in this stylesheet.
   ========================================================= */

/* =========================================================
   BONFIRE DESIGN TOKENS
   ========================================================= */
:root {
  --font-display: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-alt: #ececeb;
  --ink: #343434;
  --muted: #6f6f6a;
  --line: #d3d3cf;
  --placeholder: #cfcfcd;
  --accent: #2fa47e;
  --accent-dark: #238567;
  --danger: #ff5b62;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --control-shadow: 0 5px 0 var(--ink);

  --content-max: 1180px;
  --mobile-nav-height: 88px;
}

/* =========================================================
   BASE
   ========================================================= */
* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #ededeb;
}

body {
  /* Resolve the shadow against the active character accent, not :root green. */
  --control-shadow-accent: 0 5px 0 var(--accent);
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #ededeb;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1, h2, h3,
.btn,
.nav-item,
.creator-tab,
.sheet-tab,
.text-action,
.eyebrow,
.character-copy h3 {
  font-family: var(--font-display);
}

button { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 900;
}

h2 {
  margin-bottom: 16px;
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 900;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 900;
}

.app-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

.app {
  min-height: 100vh;
  padding-bottom: calc(var(--mobile-nav-height) + 20px);
}

/* =========================================================
   SHARED BUTTONS / CONTROLS
   ========================================================= */
.btn {
  min-height: 56px;
  padding: 0 24px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}

.btn-primary {
  color: #fff;
  background: var(--accent);
  box-shadow: var(--control-shadow);
}

.btn-primary:hover { background: var(--accent-dark); }

.btn-secondary {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--control-shadow);
}

.btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}

.icon-button {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.text-action {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 2px 0;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.text-action-right { margin-left: auto; }


.field > span,
.resource > span,
.display-field > span {
  font-size: 1rem;
  font-weight: 500;
}

.field input,
.field textarea,
.text-input {
  width: 100%;
  min-height: 43px;
  padding: 8px 9px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--control-shadow);
  outline: none;
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
}

.field textarea {
  height: 84px;
  resize: none;
  overflow-y: auto;
  line-height: 1.35;
}

.text-input.is-editing:not([readonly]):not([aria-readonly="true"]) {
  transform: translateY(0);
  border-color: var(--accent);
  box-shadow: var(--control-shadow-accent);
}

.text-input.is-pressed:not([readonly]):not([aria-readonly="true"]) {
  transform: translateY(5px);
  border-color: var(--ink);
  box-shadow: none;
}
.select {
  width: 100%;
  min-height: 43px;
  height: 43px;
  padding: 8px 9px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  outline: none;
  box-shadow: none;
  transform: translateY(5px);
}


.checkbox {
  appearance: none;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}

.checkbox:checked {
  transform: translateY(4px);
  background: var(--accent);
  box-shadow: none;
}

.radio {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.radio:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.radio-indicator {
  width: 20px;
  height: 20px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  display: inline-block;
}

.radio-indicator.is-selected {
  border-color: var(--accent);
  background: var(--accent);
}

.stepper,
.resource-control {
  min-height: 50px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  padding: 5px;
}

.stepper strong,
.resource-control strong {
  text-align: center;
  font-weight: 600;
}

.stepper-button {
  width: 30px;
  height: 30px;
  justify-self: center;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 0 var(--ink);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}

.stepper-button:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* =========================================================
   SHARED LAYOUT / DATA
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-span { grid-column: 1 / -1; }

.form-section { display: grid; gap: 16px; }

.check-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.data-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
}

.data-row:nth-child(even) { background: var(--surface-alt); }

.row-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.info-button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: .72rem;
  cursor: pointer;
}

.icon-text-button,
.trash-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.muted { color: var(--muted); }

.avatar-placeholder,
.card-image-placeholder,
.auth-art-placeholder,
.update-placeholder {
  background: var(--placeholder);
}

.avatar-placeholder {
  width: 58px;
  height: 58px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}


.expandable-stack,
.accordion-stack { display: grid; }

.expandable,
.accordion {
  border-bottom: 1px solid var(--line);
}

.expandable-heading,
.accordion-heading {
  padding: 0;
  text-align: left;
  width: 100%;
  min-height: 54px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
}

.expandable-content,
.accordion-content {
  padding-bottom: 14px;
}

.accordion:not(.is-open) .accordion-content { display: none; }

/* =========================================================
   AUTH
   ========================================================= */
.auth-page {
  min-height: 100vh;
  padding: 34px 20px 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-page > h1 { margin-top: 0; }

.auth-art-placeholder {
  width: 100%;
  height: 260px;
  border-radius: var(--radius-lg);
}

.auth-art-small { height: 190px; }

.auth-form { display: grid; gap: 18px; }

.auth-switch {
  margin-top: auto;
  text-align: center;
  color: var(--muted);
}

.auth-switch button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 900;
  cursor: pointer;
}

.legal-copy {
  color: var(--muted);
  font-size: .8rem;
}

.legal-copy strong { color: var(--accent); }

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  color: var(--line);
}

.divider span { height: 1px; background: var(--line); }
.divider em { font-style: normal; }

/* =========================================================
   HOME
   ========================================================= */
.home-page {
  padding: 34px 26px 36px;
}

.home-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}

.eyebrow {
  margin-bottom: 2px;
  font-weight: 800;
}

.new-character-card {
  display: grid;
  grid-template-columns: .95fr 1.55fr;
  min-height: 205px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.new-character-card > div:last-child {
  padding: 22px 18px;
}

.card-image-placeholder {
  min-height: 205px;
}

.character-list {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.character-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
}

.character-copy { flex: 1; min-width: 0; }
.character-copy h3 { margin-bottom: 4px; }
.character-copy p { margin-bottom: 0; }

.character-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trash-button {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

.trash-button:hover { background: var(--surface-alt); }

.updates { margin-top: 60px; }

.update-card {
  margin-bottom: 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.update-placeholder {
  height: 150px;
  margin: 0 24px;
}

.update-card > div:last-child { padding: 14px 24px 22px; }
.update-card p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.update-link { display: block; margin-left: auto; }

/* =========================================================
   CREATOR
   ========================================================= */
.creator-page {
  min-height: 100vh;
  padding-bottom: 82px;
}

.creator-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 26px 20px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.creator-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.creator-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 16px;
}

.creator-tab {
  border: 0;
  border-bottom: 3px solid var(--line);
  background: transparent;
  padding: 0 0 6px;
  text-align: left;
  cursor: pointer;
}

.creator-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 900;
}

.creator-content {
  padding: 28px 20px 110px;
}

.creator-footer {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 50%;
  width: min(100%, 560px);
  height: 78px;
  transform: translateX(-50%);
  padding: 8px 20px;
  border-top: 1px solid var(--ink);
  background: var(--surface);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 34px;
}

.ability-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ability-control {
  display: grid;
  gap: 5px;
}
.class-grid {
  display: grid;
  grid-template-columns: 70px 1fr 90px;
  gap: 12px;
}

.feature-groups {
  display: grid;
  gap: 18px;
}

.feature-group {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.feature-group h3 { font-size: 1rem; }

.spell-summary {
  display: grid;
  grid-template-columns: 1.5fr .75fr .75fr;
  gap: 12px;
}

/* =========================================================
   CHARACTER SHEET
   ========================================================= */


.class-lines {
  margin-bottom: 4px;
  font-weight: 600;
}

.sheet-avatar {
  padding: 0;
  cursor: pointer;
}


.resource {
  display: grid;
  gap: 5px;
}


.sheet-tab {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 0 0 6px;
  cursor: pointer;
}

.sheet-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 900;
}


.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
}

.stat-card {
  padding: 10px 8px 8px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
}

.stat-card strong {
  display: block;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 1.35rem;
}

.stat-card > span {
  display: block;
  padding-top: 5px;
  font-size: .86rem;
}

.proficiency-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: -2px;
}

.section-title { margin-top: 28px; }

.sense-list {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sense-list > div {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.sense-list > div:last-child { border-bottom: 0; }

.display-field {
  display: grid;
  gap: 5px;
}

.display-field > div {
  min-height: 43px;
  padding: 8px 9px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.display-field.is-multiline > div {
  min-height: 70px;
  white-space: pre-wrap;
}

.feature-row {
  width: 100%;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.feature-row span { color: var(--muted); }

/* =========================================================
   NAVIGATION
   ========================================================= */
.bottom-nav {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  width: min(100%, 560px);
  height: var(--mobile-nav-height);
  transform: translateX(-50%);
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 8px 72px;
}

.bottom-nav[hidden] { display: none; }

.nav-item {
  justify-self: center;
  width: 120px;
  min-height: 64px;
  border: 4px solid transparent;
  border-radius: 20px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.nav-item.is-active {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: var(--control-shadow);
}

.nav-icon {
  display: block;
  font-size: 1.4rem;
  line-height: .8;
}

/* =========================================================
   POPOVERS / MODALS
   ========================================================= */
.popover {
  position: absolute;
  z-index: 500;
  top: calc(100% + 8px);
  right: 0;
  width: auto;
  min-width: max-content;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: none;
}

.popover button {
  display: block;
  width: auto;
  min-width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.popover button:hover { background: var(--surface-alt); }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.overlay.is-open { pointer-events: auto; }

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38);
  opacity: 0;
  transition: opacity .18s ease;
}

.overlay.is-open .overlay-backdrop { opacity: 1; }

.bottom-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 560px);
  max-height: 90vh;
  overflow-y: auto;
  transform: translate(-50%, 100%);
  border-radius: 24px 24px 0 0;
  background: var(--surface);
  padding: 48px 20px 22px;
  transition: transform .2s ease;
}

.overlay.is-open .bottom-sheet { transform: translate(-50%, 0); }

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(100% - 40px), 390px);
  max-height: 82vh;
  overflow-y: auto;
  transform: translate(-50%, -48%) scale(.98);
  opacity: 0;
  border-radius: 20px;
  background: var(--surface);
  padding: 46px 20px 20px;
  transition: transform .18s ease, opacity .18s ease;
}

.overlay.is-open .modal {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 20px;
  border: 0;
  background: transparent;
  font-size: 2rem;
  cursor: pointer;
}

.modal-copy { line-height: 1.5; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.sheet-form { display: grid; gap: 14px; }
.sheet-form h3 { margin: 8px 0 0; font-size: 1rem; }

body.overlay-open {
  overflow: hidden;
  touch-action: none;
}

body.overlay-open .bottom-sheet,
body.overlay-open .modal {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* =========================================================
   EMPTY
   ========================================================= */
.empty-page {
  min-height: 100vh;
  padding: 64px 26px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 14px;
}

/* =========================================================
   RESPONSIVE FOUNDATION
   ========================================================= */
@media (max-width: 390px) {
  

  .creator-tabs { gap: 8px 10px; font-size: .82rem; }

  .ability-controls { gap: 12px 8px; }

  

  

  .bottom-nav { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 900px) {
  body { padding: 28px; }

  .app-shell {
    width: min(100%, var(--content-max));
    min-height: calc(100vh - 56px);
    border-radius: 28px;
    overflow: clip;
  }

  .app { padding-bottom: 100px; }

  

  .home-header { margin-bottom: 42px; }

  .new-character-card {
    grid-template-columns: 320px 1fr;
  }

  .card-image-placeholder { min-height: 240px; }

  .updates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .updates > h2 { grid-column: 1 / -1; }

  .character-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-header {
    padding-left: clamp(40px, 6vw, 84px);
    padding-right: clamp(40px, 6vw, 84px);
  }

  .creator-tabs {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
  }

  .creator-footer,
  .bottom-nav {
    width: min(calc(100% - 56px), var(--content-max));
  }

  

  

  .stat-card-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .auth-page {
    width: min(100%, 640px);
    margin: 0 auto;
  }
}


/* =========================================================
   CHARACTER SHEET CONTENT
   ========================================================= */

/* The sheet itself must never side-scroll. Only the tabs may scroll horizontally. */


/* Preserve the intentional horizontal swipe interaction only on the tab bar. */


/* Long content wraps instead of widening the page. */


/* Bottom nav is intentionally absent while viewing a character sheet. */


/* Inventory card view */
.inventory-section { width: 100%; }

.inventory-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.inventory-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 106px;
  padding: 12px 9px 10px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

.inventory-card-name {
  margin-bottom: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.inventory-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.inventory-card-meta span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-card-amount {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

.inventory-add-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.inventory-divider {
  width: 100%;
  height: 1px;
  margin: 20px 0 62px;
  background: var(--line);
}

.inventory-empty {
  min-height: 70px;
  display: flex;
  align-items: center;
}

@media (max-width: 360px) {
  .inventory-card-grid { gap: 8px; }
  .inventory-card { padding-left: 7px; padding-right: 7px; }
}

@media (min-width: 900px) {
  .inventory-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* =========================================================
   FORM AND CARD COMPONENTS
   ========================================================= */

/* Shared tertiary action: no underline, centered, reusable everywhere. */
.btn-tertiary {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.btn-tertiary:hover {
  color: var(--accent-dark);
}


/* Race/background conditional controls. */
.section-break {
  height: 1px;
  margin: 8px 0;
  background: var(--line);
}


.bonus-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(110px, .8fr) auto;
  gap: 10px;
  align-items: end;
}

.picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.bonus-delete {
  align-self: end;
  min-height: 43px;
}

/* Creator inventory uses exactly the same card component as the sheet. */
.inventory-creator .inventory-card {
  position: relative;
}


/* Standalone Updates page. */
.updates-standalone {
  margin-top: 0;
}

/* Desktop refinements for conditional creator content. */
@media (min-width: 900px) {
  .bonus-list,
  .proficiency-picker {
    max-width: 720px;
  }
}


/* =========================================================
   INTERACTION BEHAVIOUR
   ========================================================= */

.subsection-title {
  margin: 4px 0 0;
  font-size: 1.1rem;
}

.movement-creator {
  display: grid;
  gap: 12px;
  padding: 4px 0;
}


.spell-known-control {
  max-width: 240px;
}

/* Inventory cards are interactive controls now. */
button.inventory-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.inventory-card:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.item-action-sheet h2 {
  margin-right: 32px;
}

@media (max-width: 390px) {
}


/* =========================================================
   TAG AND OVERFLOW COMPONENTS
   ========================================================= */

/* Background conditional sections use the full available width. */
.bonus-list,
.proficiency-picker {display: grid;
  gap: 12px;
  padding-left: 33px;
width: 100%;
  max-width: none !important;
  padding-left: 0 !important;
}

.bonus-row,
.picker-row {
  width: 100%;
}

.personality-divider {
  margin-top: 12px;
  margin-bottom: 4px;
}

/* Comma-to-tag proficiency input. */


.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--surface-alt);
  font-size: .85rem;
}

.tag button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
  line-height: 1;
}

.tag-entry {
  width: 100%;
  min-height: 32px !important;
  margin-top: 5px;
  padding: 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none;
}


/* Prevent page-level horizontal overflow; intentional horizontal scrolling
   is limited to the sheet tab bar. */


/* Linked profile imagery with neutral placeholder fallback. */
.avatar-placeholder.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--placeholder);
}

/* Item action sheets deliberately only use the X in the upper corner. */
.item-action-sheet {display: grid;
  gap: 14px;
padding-bottom: 10px;
}


/* =========================================================
   INTERACTION DETAILS
   ========================================================= */

.avatar-placeholder-large {width: 100px;
  height: 100px;
width: 122px !important;
  height: 122px !important;
  margin: 0 auto 8px;
}

/* Tag fields stay visually in editing mode while the user keeps typing. */
.field-helper {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
}


.tag-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: var(--control-shadow-accent);
  transform: translateY(0);
}

.tag-entry,
.tag-entry.text-input,
.tag-entry.text-input.is-editing,
.tag-entry.text-input.is-pressed {
  min-height: 34px !important;
  margin-top: 5px;
  padding: 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Attack cards now share the same compact-card language as inventory. */
.attack-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 6px 0 14px;
}

.attack-card {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--ink);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.attack-card:active {
  transform: translateY(4px);
  box-shadow: none;
}

.attack-card-name {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 1rem;
}

.attack-card-stats {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 12px;
  margin-bottom: 8px;
}

.attack-card-stats span {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.attack-card-stats small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
}

.attack-card p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (min-width: 700px) {
  .attack-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   CHARACTER CREATION DETAILS
   ========================================================= */

.info-sheet {
  min-height: 240px;
}

.info-sheet-header {
  position: sticky;
  top: -48px;
  z-index: 5;
  min-height: 58px;
  margin: -48px -20px 18px;
  padding: 18px 52px 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.info-sheet-header h2 {
  margin: 0;
}

.info-sheet-close {
  position: absolute;
  top: 14px;
  right: 20px;
}

.info-sheet-copy {
  line-height: 1.55;
}

.tag-input-shell.is-editing {
  transform: translateY(0);
  border-color: var(--accent);
  box-shadow: var(--control-shadow-accent);
}

.tag-input-shell.is-pressed {
  transform: translateY(5px);
  border-color: var(--ink);
  box-shadow: none;
}

.tag-input-shell {min-height: 52px;
  width: 100%;
  padding: 7px 8px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--control-shadow);
transform: translateY(0);
  transition: border-color .1s ease, box-shadow .1s ease, transform .1s ease;
transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease;}

.custom-description-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.custom-description-row p {
  margin: 3px 0 0;
  color: var(--muted);
}

.component-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding-top: 4px;
}

.reaction-detail[hidden] {
  display: none;
}

/* =========================================================
   CHARACTER SHEET
   ========================================================= */


/* Identity */


/* Normal summary */


/* Hit Dice: ALWAYS one horizontal row: maximum | current */


/* Shared +/- resource control */


/* Tabs */


/* Pull handle */


/* Quick Edit */


/*
  Spacing is explicit instead of relying on inherited grid gaps:
  primary -> movement = 8px
  movement/primary -> HP = 8px
  HP -> Temp HP action = 8px
*/


/* EXACTLY 4px from Hit Dice label to its bar */


/* 8px clear space ABOVE and BELOW the button */


/* Persistent fade overlay */


/* Page Edit */


/* Global field label -> control spacing */


@media (max-width: 390px) {
  

  

  

  

  

  
}

@media (min-width: 900px) {
  
}

/* =========================================================
   SHARED FIELD LAYOUT
   ========================================================= */

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  margin: 0;
}

/* =========================================================
   CHARACTER SHEET
   ========================================================= */

.sheet-page {
  --sheet-gutter: 26px;
  position: relative;
  width: 100%;
  min-height: 0;
  overflow-x: clip;
}

.sheet-header {
  --card-drag-y: 0px;
  position: sticky;
  top: 0;
  z-index: 120;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 24px var(--sheet-gutter) 0;
  box-sizing: border-box;
  overflow: visible;
  background: var(--surface);
  transform: translateY(var(--card-drag-y));
  transition: transform .16s ease;
}

.sheet-header.is-dragging { transition: none; }

.sheet-content {
  width: 100%;
  min-height: 0;
  padding: 28px var(--sheet-gutter) 40px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.sheet-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 18px;
  width: 100%;
  min-width: 0;
  margin: 0 0 22px;
  position: relative;
  z-index: 320;
}

.sheet-identity h1 {
  font-size: 30px;
}


.sheet-identity > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.sheet-identity .sheet-avatar {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Normal */
.sheet-summary-grid,
.sheet-summary-movement {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.sheet-summary-grid.single-speed {
  grid-template-columns:
    minmax(36px, .62fr)
    minmax(66px, .92fr)
    minmax(52px, .72fr)
    max-content;
}

.sheet-summary-grid.has-extra-speed {
  grid-template-columns:
    minmax(36px, .62fr)
    minmax(66px, .92fr)
    minmax(52px, .72fr)
    max-content;
}

.sheet-summary-movement {
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: 12px;
}

.sheet-summary-stat {
  min-width: 0;
  text-align: left;
}

.sheet-summary-label {
  display: block;
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}

.sheet-summary-stat > strong {
  display: block;
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}


.value-divider {
  display: block;
  width: 1px;
  min-width: 1px;
  height: 28px;
  background: #CCC;
}

/* Shared resource control */
.shared-resource-control {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 38px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 5px 6px;
  box-sizing: border-box;
}

.shared-resource-control .resource-control-value {
  display: grid;
  place-items: center;
  min-width: 0;
}

.shared-resource-control .stepper-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  margin: 0;
  justify-self: center;
}

.sheet-summary-hp {
  width: 100%;
  margin: 16px 0 0;
}

.sheet-summary-hp .hp-resource-control,
.quick-edit-hp .hp-resource-control {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.hp-number-strip {
  display: grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.hp-number-strip.has-temp {
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
}

.hp-number-strip > strong {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Tabs */
.sheet-tabs {
  display: flex;
  gap: 22px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.sheet-tabs::-webkit-scrollbar { display: none; }

.sheet-tabs-in-card {
  width: calc(100% + (var(--sheet-gutter) * 2));
  margin: 22px calc(var(--sheet-gutter) * -1) 0;
  padding: 12px var(--sheet-gutter) 14px;
  box-sizing: border-box;
  border-top: 1px solid var(--line);
}

/* Pull handle */
.sheet-pull-handle {
  position: absolute;
  left: 0;
  bottom: -28px;
  z-index: 220;
  width: 100%;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ns-resize;
  touch-action: none;
}

.sheet-pull-handle::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 17px;
  background: var(--surface);
  clip-path: polygon(0 0,100% 0,50% 100%);
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.32));
}

.sheet-pull-handle span {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateX(-50%);
}

/* Quick Edit: content-driven height, one grid owns the row spacing. */


.quick-edit-primary {
display: grid;
  align-items: end;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.quick-edit-primary.has-extra-speed {
grid-template-columns: 50px 76px minmax(142px, 1fr);
}
.quick-edit-primary.single-speed {
grid-template-columns:
    minmax(42px, .58fr)
    minmax(68px, .86fr)
    minmax(46px, .62fr)
    minmax(104px, 1.2fr);
}
.quick-edit-movement {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
}


.quick-edit-hit-dice {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 4px;
  margin: 0;
}

.quick-edit-primary .field > span,
.quick-edit-movement .field > span,
.quick-edit-hit-dice > span {
  line-height: 1.2;
}

/* Input controls retain their 5px visual shadow.
   Reserve that shadow inside the row item so Quick Edit's 8px
   parent gap is an actual visible 8px between rows. */
.quick-edit-primary > .field,
.quick-edit-primary > .quick-edit-hit-dice,
.quick-edit-movement > .field {
  padding-bottom: 5px;
}


.quick-edit-hit-dice .shared-resource-control {
grid-template-columns: 26px minmax(0, 1fr) 26px;
  gap: 4px;
  width: 100%;
  min-width: 0;
  height: 43px;
  min-height: 43px;
  padding: 4px;
}

.quick-edit-hit-dice .stepper-button {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}

.quick-edit-hit-dice .resource-control-value {
  min-width: 0;
  overflow: hidden;
}

.quick-edit-hit-dice .hit-dice-value {
  display: grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.quick-edit-hit-dice .hit-dice-value > strong {
display: block;
  width: 100%;
  min-width: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.quick-edit-hit-dice .value-divider { height: 22px; }

.quick-edit-primary .field input,
.quick-edit-movement .field input,
.quick-edit-hit-dice .shared-resource-control,
.quick-edit-hp .hp-resource-control {height: 43px;
  min-height: 43px;
  box-sizing: border-box;}

.quick-edit-hp .hp-resource-control {
}

.quick-edit-hp {
display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.sheet-header-quick .hp-number-strip > strong {font-size: 18px;
  font-weight: 400;}
.quick-edit-temp-action {
display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.quick-edit-temp-action .btn-tertiary { margin: 0; }

/* Quick overlay */
.sheet-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(24,24,24,.46);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}

.sheet-mode-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, visibility 0s linear 0s;
}

.sheet-content.is-quick-dimmed {
  pointer-events: none;
  user-select: none;
}

/* Page Edit */
.sheet-header-page { padding-top: 24px; }
.sheet-content.is-page-editing { padding-top: 28px; }

.page-edit-section {
  display: grid;
  gap: 20px;
}

.page-edit-group {
  display: grid;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 390px) {
  .sheet-page { --sheet-gutter: 18px; }


  .page-edit-ability-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (min-width: 900px) {
  .sheet-page { --sheet-gutter: clamp(40px,6vw,84px); }

  .quick-edit-primary.has-extra-speed {
    grid-template-columns: minmax(72px,.75fr) minmax(96px,1fr) minmax(168px,1.45fr);
  }
}


/* Normal summary is always one physical row: AC | Initiative | Speed | Hit Dice. */
.sheet-summary-grid.single-speed,
.sheet-summary-grid.has-extra-speed {
  grid-auto-flow: column;
  align-items: start;
}

.sheet-summary-grid > * {
  min-width: 0;
}

.normal-speed-menu,
.normal-hit-dice {
  align-self: start;
}


/* =========================================================
   NORMAL HIT DICE — ISOLATED COMPONENT
   ========================================================= */

.normal-hit-dice {justify-self: end;
min-width: 0;
  justify-self: end;
  text-align: left;}

.normal-hit-dice-values {
  display: grid;
  grid-template-columns: max-content;
  align-items: center;
  gap: 10px;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
}

.normal-hit-dice-values > span {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.normal-hit-dice-values .is-max {
  color: #CCC;
}

.normal-divider {
  width: 1px !important;
  min-width: 1px;
  height: 28px;
  background: #CCC;
}

/* =========================================================
   QUICK EDIT
   ========================================================= */

/*
  Important interaction rule:
  Filled Bonfire inputs receive `.is-pressed` from BF.wireFields:
    transform: translateY(5px);
    box-shadow: none;

  Hit Dice is not an input, but it represents already-filled data.
  `.filled-control` intentionally uses the exact same settled state.
  This means AC, Initiative and Hit Dice share both the same 43px
  box geometry AND the same 5px settled position.
*/

.filled-control {
  transform: translateY(5px);
  border-color: var(--ink);
  box-shadow: none;
}

.sheet-header-quick {height: auto;
  min-height: 0;
  max-height: none;
  padding-bottom: 18px;
height: auto;
  min-height: 0;
  max-height: none;
  padding-bottom: 18px;
height: auto;
  min-height: 0;
  max-height: none;
  padding-bottom: 18px;}

.sheet-header-quick .sheet-identity {margin-bottom: 18px;
margin-bottom: 18px;
margin-bottom: 18px;}

.qe-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0 0 8px;
}

.qe-row {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.qe-row-stats {
  align-items: start;
}

.qe-row-stats.has-extra-speed {
  grid-template-columns: 50px 78px minmax(0, 1fr);
}

.qe-row-stats.single-speed {
  grid-template-columns:
    minmax(44px, .6fr)
    minmax(72px, .9fr)
    minmax(50px, .65fr)
    minmax(108px, 1.25fr);
}

.qe-row-movement {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qe-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 43px;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.qe-label {
  display: block;
  align-self: end;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.qe-input,
.qe-stepper-bar,
.qe-hp {
  box-sizing: border-box;
  height: 43px;
  min-height: 43px;
  max-height: 43px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
}

.qe-input {
  width: 100%;
  margin: 0;
}

/* Hit Dice is a settled/filled field, not an editable input. */
.qe-stepper-bar {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 4px;
  background: var(--surface);
}

.qe-stepper-bar .stepper-button,
.qe-hp .stepper-button {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin: 0;
  justify-self: center;
}

.qe-hit-dice-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.qe-hit-dice-values > span {
  min-width: 0;
  white-space: nowrap;
}

.qe-hit-max,
.qe-hp-max {
  color: #CCC;
}

.qe-divider {
  width: 1px !important;
  min-width: 1px;
  height: 22px;
  background: #CCC;
}

.qe-hp {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  background: var(--surface);
  box-shadow: none;
}

.qe-hp-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.qe-hp-values.has-temp {
  grid-template-columns:
    minmax(0, 1fr) 1px
    minmax(0, 1fr) 1px
    minmax(0, 1fr);
}

.qe-temp-action {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.qe-temp-action .btn-tertiary {
  margin: 0;
}

@media (max-width: 390px) {
  .qe-row-stats.has-extra-speed {
    grid-template-columns: 48px 76px minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .qe-row-stats.has-extra-speed {
    grid-template-columns: 72px 96px minmax(168px, 1.4fr);
  }
}


/* Normal-mode HP maximum */
.hp-number-strip > .is-max { color: #CCC !important; }


/* =========================================================
   NORMAL MODE — MULTI-SPEED MENU
   ========================================================= */

.normal-speed-menu {
  position: relative;
  min-width: 0;
  margin: 0;
}

.normal-speed-menu > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.normal-speed-menu > summary::-webkit-details-marker {
  display: none;
}

.normal-speed-menu > summary::marker {
  display: none;
  content: "";
}

.normal-speed-menu > summary strong {
  width: max-content;
  max-width: 100%;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.normal-speed-menu[open] > summary strong {
  border-bottom-color: var(--accent);
}

.normal-speed-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 260;
  display: grid;
  gap: 8px;
  min-width: 150px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--control-shadow);
}

.normal-speed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.normal-speed-row span {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
}

.normal-speed-row strong {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* Normal Ability tab typography */
.ability-card-modifier {
  font-weight: 400;
}

.sheet-content .section-title {
  font-size: 20px;
}


/* Normal attack cards: description preview is always one line. */
.attack-card > p {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* Skills: proficient entries first, then a clear break before the rest. */
/* Shared lifted info-card interaction for Normal Mode content cards. */
.info-card {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--control-shadow);
  transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
  cursor: pointer;
}

.info-card:active {
  transform: translateY(5px);
  box-shadow: none;
}

.info-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.info-card-copy {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}

/* Normal Proficiency: balanced equal-height cards. */
.proficiency-display-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.proficiency-display-cell {
  display: flex;
  min-width: 0;
}

.proficiency-display-cell .display-field {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  min-height: 118px;
}

.proficiency-display-cell .display-field > div {
  height: 100%;
  min-height: 72px;
}

@media (max-width: 390px) {
  .proficiency-display-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.background-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
/* Normal Feats spacing/alignment. */
.features-tab .accordion-content {
  display: grid;
  gap: 16px;
}

.features-tab .info-card {
  margin: 0;
}


/* Spell slot value strip: current | maximum. */
.spell-slot-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
}

.spell-slot-values strong {
  display: block;
  min-width: 0;
  text-align: center;
  font-weight: 600;
}

.spell-slot-values .value-divider {
  height: 24px;
}

.spell-slot-values .is-max {
  color: #CCC;
}


/* Shared Page Edit section heading typography matches Normal accordions. */
.sheet-section-heading {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
}

/* Ability comparison steppers: permanent/base | temporary/current. */
.comparison-stepper-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
}

.comparison-stepper-value.has-change {
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 6px;
}

.comparison-stepper-value strong {
  min-width: 0;
  text-align: center;
}

.comparison-stepper-value .is-base {
  color: #CCC;
}

.comparison-stepper-value .value-divider {
  height: 24px;
}

/* Page Edit ability sections. */
.page-edit-ability {
  gap: 24px;
}

.page-saving-card {
  color: inherit;
  font: inherit;
}

/* Page Edit Skills: one/two proficiency markers. */
/* Page Edit spell list rows are clickable, without an Edit label. */
.page-edit-spell-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
}

.page-edit-row-button {
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-edit-row-button strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* Page Edit Features use the same lifted shared info card. */
.page-edit-feature-cards {
  display: grid;
  gap: 16px;
}
/* Creator feat summaries must be readable in full, not truncated to one line. */
.creator-feature-groups .info-card-copy {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}


/* Page Edit Proficiency: every tag box has the same baseline height,
   even when it is empty. */
.proficiency-tag-grid {align-items: start;
align-items: stretch;}

/* Language occupies its own row, while tool categories retain two columns. */
.proficiency-tag-grid > .proficiency-language-row { grid-column: 1 / -1; min-width: 0; }
.proficiency-language-row > .tag-field { width: 100%; }

.proficiency-tag-grid .tag-field {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.proficiency-tag-grid .tag-input-shell {
  min-height: 96px;
  height: 100%;
  align-content: start;
}
.page-edit-section .tag-input-shell.is-pressed {
  transform: translateY(5px);
  box-shadow: none;
}

.page-edit-section .tag-field {
  padding-bottom: 5px;
}


.page-edit-background-description-field {
  display: grid;
  gap: 8px;
}

.page-edit-background-description-field .field {
  margin: 0;
}

.page-edit-background-description-field .btn-tertiary {
  justify-self: start;
}


/* Expertise is a smaller light-green filled dot beside the proficiency dot. */
.inventory-card.is-attuned {
  border-color: var(--accent);
  box-shadow: 0 4px 0 var(--accent);
}

button.inventory-card.is-attuned:active {
  box-shadow: 0 1px 0 var(--accent);
}


/* =========================================================
   SHARED SKILLS
   ========================================================= */

.skills-list {
  width: 100%;
  margin-top: 8px;
}

.grouped-skills {
  display: grid;
  gap: 0;
}

.skill-group {
  display: grid;
  width: 100%;
}

.skill-group-gap {
  height: 20px;
}

.skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 42px 42px 34px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 47px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
}

.skill-row.is-alt {
  background: var(--surface-alt);
}

.skill-row.is-interactive {
  cursor: pointer;
}

.skill-row.is-interactive:active {
  transform: translateY(1px);
}

.skill-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.skill-ability {
  color: var(--muted);
  text-align: center;
}

.skill-modifier {
  text-align: center;
  font-weight: 600;
}

.skill-proficiency-indicator {
  position: relative;
  display: block;
  width: 31px;
  height: 22px;
  justify-self: end;
}

.skill-proficiency-indicator.is-hidden {
  visibility: hidden;
}

.skill-prof-dot {
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  box-sizing: border-box;
}

.skill-prof-dot.is-filled {
  border-color: var(--accent);
  background: var(--accent);
}

.skill-expertise-dot {
  position: absolute;
  top: 5px;
  right: 0;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 58%, white);
}

@media (max-width: 390px) {
  .skill-row {
    grid-template-columns: minmax(0, 1fr) 38px 38px 31px;
    gap: 6px;
    padding-inline: 6px;
  }
}


.attunement-slot strong {
  font-size: 14px;
}

.attunement-slot span {
  font-size: 12px;
  color: var(--muted);
}


.check-row.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.check-row.is-disabled .checkbox {
  pointer-events: none;
}


.attunement-section {
  display: grid;
  gap: 12px;
}

.attunement-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.attunement-slot-empty {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 106px;
  padding: 8px;
  border: 2px solid #CCC;
  border-radius: 9px;
  background: var(--surface);
  color: #999;
  font-size: 13px;
  box-sizing: border-box;
}


.inventory-section .inventory-card,
.attunement-section .inventory-card,
.equipment-section .inventory-card {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.2;
}

.inventory-section .inventory-card-name,
.attunement-section .inventory-card-name,
.equipment-section .inventory-card-name {
  font-size: 14px;
  font-weight: 500;
}

.inventory-section .inventory-card-meta,
.attunement-section .inventory-card-meta,
.equipment-section .inventory-card-meta {
  font-size: 12px;
  font-weight: 400;
}

.inventory-section .inventory-card-amount,
.attunement-section .inventory-card-amount,
.equipment-section .inventory-card-amount {
  font-size: 13px;
  font-weight: 400;
}


/* Character Creation — Ability: 2 columns x 3 rows. */
.creator-ability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Creator movement row: compact Movement, full Speed, Delete beside it. */


/* Full Character Creation custom Background descriptions use same field
   geometry as Personality Traits / Ideals / Bonds / Flaws. */
.creator-background-description {
  display: grid;
  gap: 8px;
}

.creator-background-description .field {
  margin: 0;
}


/* Creator Overview movement row: compact Movement, fixed Speed, red Delete. */
.movement-row {
  display: grid;
  grid-template-columns: minmax(82px, .8fr) 104px auto;
  gap: 8px;
  align-items: end;
  width: 100%;
  min-width: 0;
}

.movement-row .field {
  min-width: 0;
}

.movement-delete {align-self: end;
  min-height: 43px;
  margin: 0;
  padding-inline: 6px;
align-self: end;
  min-height: 43px;
  margin: 0;
  padding: 0 4px;
  
  white-space: nowrap;}

.movement-creator .btn-tertiary {
  margin-top: 8px;
}


.creator-feature-groups {
  display: grid;
  gap: 24px;
}

.creator-feature-groups .page-edit-group {
  display: grid;
  gap: 16px;
}

.creator-feature-groups .sheet-section-heading {
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  text-align: left;
}


/* =========================================================
   SHARED CUSTOM DROPDOWN
   Uses the same flat grey-stroke menu language as profile options.
   ========================================================= */

.custom-select-field {
  overflow: visible;
}

.custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.custom-select-trigger { position: relative; z-index: 1; pointer-events: auto; }

.custom-select-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.custom-select-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-select-chevron {
  font-size: 14px;
  line-height: 1;
}

.custom-select-trigger[aria-expanded="true"] {
  border-color: var(--line);
  box-shadow: none;
}


.select-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.select-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.select-option:hover,
.select-option:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  outline: none;
}

.select-option.is-selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  outline: none;
}


.select-menu {position: absolute;
  z-index: 1600;
  top: calc(100% + 9px);
  left: 0;
  width: 100%;
  min-width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  max-height: 260px;
  padding: 6px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: none;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;}

.select-menu::-webkit-scrollbar {
  width: 8px;
}

.select-menu::-webkit-scrollbar-track {
  background: transparent;
}

.select-menu::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}


/* =========================================================
   TABLER ICON SYSTEM
   ========================================================= */
.bf-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  color: currentColor;
  vertical-align: -0.125em;
  overflow: visible;
}

.bf-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.bf-icon-button .bf-icon {
  font-size: 18px;
}

.bf-icon-button.is-danger {
  color: var(--danger);
}

.stepper-button .bf-icon {
  font-size: 18px;
}

.modal-close .bf-icon,
.tag button .bf-icon {
  font-size: 17px;
}

.custom-select-chevron {
  display: inline-grid;
  place-items: center;
}

.custom-select-chevron .bf-icon {
  font-size: 16px;
}

.btn-tertiary.has-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-tertiary.has-icon .bf-icon {
  font-size: 16px;
}

.accordion-chevron {
  display: inline-grid;
  place-items: center;
}

.accordion-chevron .bf-icon {
  font-size: 18px;
}


.bf-icon-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-icon-filled {
  fill: currentColor;
  stroke: none;
}


/* Shared destructive icon treatment */
.bf-icon-button.is-danger,
.trash-button {
  display: inline-grid;
  place-items: center;
  align-self: center;
  line-height: 0;
}

.bf-icon-button.is-danger .bf-icon,
.trash-button .bf-icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
  vertical-align: middle;
}

.movement-delete {
  align-self: end;
  place-self: end center;
  min-height: 43px;
}


/* Shared Close icon size */
.modal-close .bf-icon,
.tag button .bf-icon,
.bf-icon-button[aria-label="Close"] .bf-icon,
.bf-icon-button[aria-label^="Close "] .bf-icon {
  width: 26px;
  height: 26px;
  font-size: 26px;
}

/* One shared open/closed chevron rule */
.chevron-open { display: none; }
.chevron-closed { display: inline-grid; place-items: center; }

[aria-expanded="true"] .chevron-closed,
.is-open > .accordion-heading .chevron-closed { display: none; }

[aria-expanded="true"] .chevron-open,
.is-open > .accordion-heading .chevron-open {
  display: inline-grid;
  place-items: center;
}

.chevron-open .bf-icon,
.chevron-closed .bf-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}


/* =========================================================
   FIREBASE / AUTH
   ========================================================= */
.auth-invite-copy {
  margin: -4px 0 18px;
  color: var(--muted);
  font-size: .95rem;
}

.auth-error {
  margin: -2px 0 0;
  color: var(--danger);
  font-size: .9rem;
  font-weight: 600;
}

.firebase-loading {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.firebase-loading h1 {
  margin-bottom: 12px;
}

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}


/* =========================================================
   MOBILE TOUCH BEHAVIOUR
   Prevent Safari double-tap zoom on rapid UI interactions
   without disabling normal pinch-to-zoom accessibility.
   ========================================================= */
button,
.btn,
.btn-tertiary,
.text-action,
.stepper-button,
.custom-select-trigger,
.select-option,
.sheet-tab,
.creator-tab,
.nav-item,
.checkbox,
.radio,
input,
textarea {
  touch-action: manipulation;
}

button,
.btn,
.btn-tertiary,
.text-action,
.stepper-button,
.custom-select-trigger,
.select-option,
.sheet-tab,
.creator-tab,
.nav-item {
  -webkit-user-select: none;
  user-select: none;
}


.btn-tertiary,
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active,
.text-action,
.text-action:hover,
.text-action:focus,
.text-action:active {
  text-decoration: none;
}


/* Shared physical press state.
   Actions/navigation still fire on the normal click event after release. */
.btn.is-pressed:not(:disabled),
.btn-tertiary.is-pressed:not(:disabled),
.stepper-button.is-pressed:not(:disabled),
.inventory-card.is-pressed,
.info-card.is-pressed,
.attack-card.is-pressed {
  transform: translateY(4px);
  box-shadow: none;
}

.btn.is-pressed:not(:disabled) {
  box-shadow: 0 1px 0 var(--ink);
}


/* =========================================================
   SHARED CONTROL ALIGNMENT / MOBILE POLISH
   ========================================================= */

/* Close is one shared, deliberately large control everywhere. */
.modal-close,
.bf-icon-button[aria-label="Close"],
.bf-icon-button[aria-label^="Close "] {
  display: inline-grid;
  place-items: center;
  line-height: 0;
}

.modal-close .bf-icon,
.info-sheet-close .bf-icon,
.bf-icon-button[aria-label="Close"] .bf-icon,
.bf-icon-button[aria-label^="Close "] .bf-icon {
  width: 32px;
  height: 32px;
  font-size: 32px;
}

/* Destructive icon controls use the same 43px filled-control height.
   This fixes Movement delete and gives future inline trash buttons the same baseline. */
.bf-icon-button.is-danger,
.movement-delete {
  min-width: 43px;
  width: 43px;
  min-height: 43px;
  height: 43px;
  align-self: end;
  place-self: end center;
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 0;
}

.bf-icon-button.is-danger .bf-icon,
.movement-delete .bf-icon,
.trash-button .bf-icon {
  width: 26px;
  height: 26px;
  font-size: 26px;
}

/* Checkbox labels align to the checkbox's pressed/filled visual state.
   One-line and wrapped labels now share the same centering rule. */
.check-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 29px;
}

.check-row > .checkbox {
  align-self: center;
}

.check-row > :not(.checkbox) {
  align-self: center;
}

/* Dropdown trigger follows the same physical-input premise:
   resting = filled/down, open = lifted with green highlight + green shadow. */
.custom-select-trigger[aria-expanded="false"] {
  transform: translateY(5px);
  border-color: var(--ink);
  box-shadow: none;
}

.custom-select-trigger[aria-expanded="true"] {
  transform: translateY(0);
  border-color: var(--accent);
  box-shadow: var(--control-shadow-accent);
}

/* Dropdown menu must match the input width exactly, never content-width. */
.custom-select {
  width: 100%;
  min-width: 0;
}

.select-menu {
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.select-menu::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Modal actions use the same shared press system as every other button. */
.modal-actions .btn,
.modal-actions .text-action {
  touch-action: manipulation;
}


/* =========================================================
   EDITOR HEIGHT / DERIVED FIELDS / ACTION ALIGNMENT
   ========================================================= */

/* Center the shared tertiary actions specifically when they add attacks/spells. */
.btn-tertiary[data-add-attack],
.btn-tertiary[data-page-add-attack],
.btn-tertiary[data-add-spell],
.btn-tertiary[data-page-add-spell] {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}


/* =========================================================
   ONE INPUT STATE SYSTEM
   ========================================================= */

/* Editable input: lifted + green stroke/shadow while editing. */
.field input.text-input.is-editing:not([readonly]):not([aria-readonly="true"]),
.field textarea.text-input.is-editing {
  transform: translateY(0);
  border: 3px solid var(--accent);
  box-shadow: var(--control-shadow-accent);
}

/* Editable input: filled/resting state. */
.field input.text-input.is-pressed:not([readonly]):not([aria-readonly="true"]),
.field textarea.text-input.is-pressed {
  transform: translateY(5px);
  border: 3px solid var(--ink);
  box-shadow: none;
}

/* Derived / automatic values are display-like filled controls.
   Transparent stroke reserves identical geometry without looking editable. */
.field input[readonly].text-input,
.field input[aria-readonly="true"].text-input {
  transform: translateY(5px) !important;
  border: 3px solid transparent !important;
  background: var(--surface-alt);
  box-shadow: none !important;
  outline: none;
  cursor: default;
}


/* The whole character card is the vertical gesture surface.
   Horizontal tab scrolling remains allowed inside the tab strip. */
.sheet-header {
  touch-action: pan-x;
}

.sheet-tabs,
.sheet-tabs * {
  touch-action: pan-x;
}

.sheet-header input,
.sheet-header textarea,
.sheet-header button:not(.sheet-pull-handle),
.sheet-header [data-custom-select] {
  touch-action: manipulation;
}


/* =========================================================
   QUICK EDIT LAYOUT
   One explicit grid owns each row.
   ========================================================= */

.qe-shell {
  display: grid;
  gap: 32px;
  width: 100%;
  min-width: 0;
}

.qe-row-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

/* Extra movement tries the same row while each control can remain useful.
   On narrow phones CSS wraps the extra movement into its own responsive row. */
.qe-row-extra-movement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  align-items: end;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.qe-hit-dice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.qe-hit-dice .qe-stepper-bar {
  width: 100%;
  min-width: 0;
}

/* Tab strip is its own scroll container. */
.sheet-tabs {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

@media (max-width: 370px) {
  .qe-row-stats {
    gap: 8px;
  }
}


/* =========================================================
   HANDLE / TAB SPACING
   ========================================================= */

/* Slightly taller triangular affordance and clearer air below the tab strip. */
.sheet-pull-handle {
  bottom: -34px;
  height: 34px;
}

.sheet-pull-handle::before {
  height: 22px;
}

.sheet-pull-handle span {
  top: 6px;
}

/* Tabs sit a little closer to HP, while the triangle gets more room below tabs. */
.sheet-tabs-in-card {
  margin-top: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 6px;
}

/* Horizontal tab movement remains native; vertical gestures can be claimed by the card. */
.sheet-tabs,
.sheet-tabs * {
  touch-action: pan-x;
}

/* =========================================================
   DEATH SAVING THROWS
   ========================================================= */
.death-save-control {
  display: grid;
  gap: 16px;
  width: 100%;
  padding-top: 4px;
  text-align: center;
}

.death-save-control h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.death-save-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: end;
  width: 100%;
}

.death-save-group {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.death-save-group > strong {
  font-size: 14px;
  font-weight: 700;
}

.death-save-circles {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  gap: 8px;
  justify-content: center;
}

.death-save-circle {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}

.death-save-circle.is-filled.death-save-success {
  border-color: var(--accent);
  background: var(--accent);
}

.death-save-circle.is-filled.death-save-failure {
  border-color: var(--danger);
  background: var(--danger);
}

.death-save-health-action {
  display: grid;
  place-items: center;
}

.death-save-health-action .btn-tertiary {
  margin: 0;
}

.sheet-header-quick .death-save-control {
  margin-top: 0;
}


/* : Page Edit Ability is always 2 columns × 3 rows. */
.page-edit-ability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* creator Ability hierarchy + reliable two-column Page Edit abilities */
.page-edit-ability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
  width: 100%;
}

.creator-ability-step {
  gap: 18px;
}

.creator-ability-step > .sheet-section-heading {
  margin: 8px 0 0;
}

.creator-saving-throws {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.creator-saving-throw {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.creator-saving-throw .proficiency-circle {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
}

.creator-saving-throw .proficiency-circle.is-filled {
  border-color: var(--accent);
  background: var(--accent);
}

.creator-saving-throw strong {
  font-weight: 600;
}


/* =========================================================
   SPELL EDITOR / SPELL ADD FLOW
   ========================================================= */

.spell-add-row {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 6px 0 18px;
}

.spell-add-row .btn-tertiary {
  margin: 0;
}

/* Spell components use Bonfire's shared square checkbox component. */
.spell-component-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.spell-component-checks .check-row {
  align-items: center;
}

.spell-component-checks .checkbox {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 6px;
}

.custom-casting-time[hidden],
.reaction-detail[hidden],
[data-material-details][hidden] {
  display: none;
}


/* =========================================================
   ACCOUNT / ADMIN PREVIEW
   ========================================================= */
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
}
.preview-toolbar .eyebrow { margin: 0 0 2px; }
.preview-toolbar strong { font-family: var(--heading-font); }
.preview-account-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.preview-account-summary span { color: var(--muted); }
.preview-account-summary strong { text-align: right; }


/* =========================================================
   PASSWORD REQUIREMENTS
   Shared account-creation password strength checklist.
   ========================================================= */
.password-field-group {
  display: grid;
  gap: 10px;
}

.password-requirements {
  display: grid;
  gap: 3px;
  padding: 0 2px;
  font-size: .82rem;
  line-height: 1.3;
}

.password-requirement {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--danger);
  transition: color .12s ease;
}

.password-requirement.is-valid {
  color: var(--accent-dark);
}

.password-requirement-icon {
  width: 17px;
  flex: 0 0 17px;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
  font-weight: 700;
}

.password-requirements.is-untouched .password-requirement {
  color: var(--muted);
}

.password-requirements.is-untouched .password-requirement-icon {
  opacity: .65;
}

/* =========================================================
   ACCOUNT / PLAN HOME STATES
   ========================================================= */
.home-create-actions {
  display: grid;
  gap: 22px;
  width: 100%;
}

.home-create-actions > .btn,
.character-limit-message > .btn {
  width: 100%;
}

.character-limit-message {
  display: grid;
  gap: 14px;
  text-align: center;
}

.character-limit-divider {
  height: 1.5px;
  width: 100%;
  margin-bottom: 4px;
  background: var(--line);
}

.character-limit-message h3,
.character-limit-message p {
  margin: 0;
}

.character-limit-message p {
  color: var(--muted);
}

/* =========================================================
   PROFILE PAGE
   ========================================================= */
.profile-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 34px;
}

.profile-page-header h1 { margin: 0; }

.profile-details {
  display: grid;
  gap: 18px;
}

/* Keep the exposed area behind the draggable character card continuous. */
.sheet-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 115;
  background: var(--surface);
  pointer-events: none;
}

/* Normal-mode spell hierarchy: one Cantrip section, one Known Spells section. */
.known-spell-section {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.known-spell-section > .sheet-section-heading { margin: 0; }

.known-spell-levels {
  display: grid;
  gap: 28px;
}

.known-spell-level {
  display: grid;
  gap: 12px;
}

.known-spell-level-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}

.known-spell-level-header h3 {
  margin: 0;
  font-family: "Nunito", sans-serif;
}

.known-spell-list {
  display: grid;
}

.spell-level-slots {
  min-width: 0;
}

/* =========================================================
   INVENTORY CURRENCY + DIRECT RESOURCE ENTRY
   ========================================================= */
.currency-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.currency-slot {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.currency-slot > span {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  text-align: center;
  font-size: .8rem;
}

.currency-value {
  min-height: 50px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 700;
}

.stepper-value-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  min-width: 0;
  width: 100%;
  min-height: 34px;
  padding: 0 2px;
  cursor: pointer;
}

.spell-known-overview { margin-bottom: 4px; }
.known-spell-level + .known-spell-level { margin-top: 24px; }
.spell-slots-display { display: grid; gap: 6px; }
.display-field-control {
  min-height: 50px;
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: translateY(5px);
}

@media (max-width: 390px) {
  .currency-row { gap: 6px; }
}

/* Currency editing uses the shared Bonfire field component. */
.currency-row.is-editable .currency-slot { display: block; }
.currency-row.is-editable .field { margin: 0; min-width: 0; }
.currency-row.is-editable .field > span { text-align: center; display: block; }
.currency-row.is-editable .field input { width: 100%; text-align: center; min-width: 0; }
.spell-slots-display .stepper { width: 100%; }

/* Resource, inventory and navigation polish. */

/* Normal-view currency uses the same settled, read-only visual language as
   Bonfire's other display fields: filled surface, reserved transparent stroke. */
.currency-row:not(.is-editable) {
  margin-bottom: 30px;
}

.currency-row:not(.is-editable) .currency-value {
  border: 3px solid transparent;
  background: var(--surface-alt);
  transform: translateY(5px);
  box-shadow: none;
}

/* Editable currency remains a normal shared Bonfire field. */
.currency-row.is-editable {
  margin-bottom: 28px;
}

/* The center of a shared resource control can be tapped for direct entry. */
.resource-control-value-button {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* When the sticky character card is dragged down, extend its own surface
   upward so the gesture never reveals the page/background behind it. */
.sheet-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 100%;
  height: max(140px, calc(140px + var(--card-drag-y)));
  background: var(--surface);
  pointer-events: none;
}

/* Keep the primary mobile navigation viewport-bound and inside the shell.
   Route changes must not alter its geometry or create horizontal overflow. */
.bottom-nav {
  max-width: 560px;
  overflow: hidden;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.bottom-nav .nav-item {
  width: min(120px, 100%);
  max-width: 100%;
}

.updates-page,
.updates-standalone {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

/* =========================================================
   creator progress + viewport navigation
   ========================================================= */
.creator-titlebar { display:flex; align-items:center; gap:10px; }
.creator-titlebar strong { font-family:var(--font-display); font-size:1rem; font-weight:900; }
.creator-tab.is-complete { color:var(--ink); border-bottom-color:var(--ink); font-weight:900; }
.creator-tab.is-active { color:var(--accent); border-bottom-color:var(--accent); }
.creator-footer [data-creator-cancel] { margin-right:auto; }
.creator-saving-throw { grid-template-columns:minmax(0,1fr) auto 20px; }
.creator-saving-throw .proficiency-circle { justify-self:end; width:20px; height:20px; }
.creator-ability-step > .sheet-section-heading:last-of-type { margin-bottom:-10px; }

/* This is the single source of truth for the app's primary navigation.
   The element is a direct child of body in , so no route, app-shell overflow,
   transform or content height can change the containing block for position:fixed. */
.bottom-nav {
  position: fixed;
  z-index: 1000;
  left: 50%;
  right: auto;
  bottom: 0;
  width: min(100%, 560px);
  max-width: 560px;
  height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 40px max(8px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
}
.bottom-nav[hidden] { display:none; }
.bottom-nav .nav-item { justify-self:center; width:min(120px,100%); min-width:0; max-width:100%; }
.home-page, .updates-page, .updates-standalone, .update-card, .update-card > div { min-width:0; max-width:100%; }
.updates-page { width:100%; overflow-x:hidden; padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 28px); }


/* =========================================================
   ACCOUNT CREATION PREVIEW — Shared visual treatment for email verification + Google path.
   ========================================================= */
.google-auth-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.google-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: .85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line, #d7d7d2);
}

.verification-email {
  margin-top: -8px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.preview-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.google-preview-card {
  display: grid;
  gap: 18px;
  margin: 22px 0;
}


/* =========================================================
   ACCOUNT SAFETY + PROFILE DELETION — ========================================================= */
.verification-status {
  margin: 14px 0 0;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.4;
}
.verification-status.is-error { color: var(--danger); }
.verification-status.is-success { color: var(--accent-dark); }
.preview-simulate-action { margin-top: 12px; }
.profile-danger-zone { margin-top: 34px; }
.profile-divider { height: 1px; width: 100%; background: var(--line); margin-bottom: 22px; }
.profile-delete-account { color: var(--danger); }
.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}


.sheet-tab-icon {
  display: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.sheet-tab-icon .bf-icon {
  width: 100%;
  height: 100%;
}

.sheet-character-title {
  display: none;
}


@media (min-width: 1280px) {
  .sheet-header-normal .sheet-tab-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }
}


/* introduced wrappers for desktop summary icons. Keep those wrappers
   visually inert below the desktop breakpoint so the established mobile
   character card remains unchanged. */
@media (max-width: 899px) {
  .sheet-summary-icon { display: none !important; }
  .sheet-summary-copy { display: contents !important; }
}


/* AC and Initiative use the same data size as the rest of the character-card data on mobile too. */
@media (max-width: 899px) {
  .sheet-header-normal .sheet-summary-stat > strong,
  .sheet-header-normal .sheet-summary-copy > strong {
    font-family: var(--font-body);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.1;
  }
}

/* Spell slots mirror HP's max | current visual language on every viewport. */
.spell-slot-stepper .spell-slot-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  width: 100%;
}
.spell-slot-stepper .spell-slot-values strong {
  display: block;
  min-width: 0;
  text-align: center;
  font-weight: 600;
}
.spell-slot-stepper .spell-slot-values .is-max { color: #CCC; }
.spell-slot-stepper .spell-slot-values .value-divider {
  width: 1px;
  height: 24px;
  background: #CCC;
}


/* Attack proficiency is visible at a glance in both mobile and desktop. */
.attack-card-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.attack-title-proficiency {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
}

/* Information sheets use label/value pairs instead of flattening metadata into prose. */
.info-sheet-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin-bottom: 24px;
}
.info-sheet-meta-item {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.info-sheet-meta-item > span {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.info-sheet-meta-item > strong {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}


.info-sheet-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.info-sheet-title-row h2 { min-width: 0; }
.info-title-proficiency { display: inline-block; }


/* Background custom descriptions grow with their content. */
.page-edit-background-description-field textarea {
  min-height: 100px;
  max-height: 350px;
  resize: none;
}

/* =========================================================
   DESKTOP — CHARACTER SHEET One authoritative desktop definition. Mobile remains governed by
   the base/mobile rules above.
   ========================================================= */
@media (min-width: 900px) {
  html:has(.sheet-page), body:has(.sheet-page) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  /* The desktop sheet lives inside the body's existing 28px padding.
     Nothing inside the sheet is allowed to size itself against the raw viewport. */
  body:has(.sheet-page) {
    box-sizing: border-box;
  }
  body:has(.sheet-page) .app-shell {
    width: min(100%, var(--content-max));
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface-alt);
  }
  body:has(.sheet-page) .app {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
  }
  body:has(.sheet-page) .sheet-page {
    --sheet-gutter: clamp(34px, 4vw, 54px);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
  }
  body:has(.sheet-page) .sheet-page::before {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
  }
  body:has(.sheet-page) .sheet-header {
    position: relative;
    top: auto;
    flex: 0 0 auto;
  }
  body:has(.sheet-page) .sheet-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 54px;
    padding-bottom: 52px;
    background: var(--bg);
    border-radius: 0 0 20px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
  }
  body:has(.sheet-page) .sheet-content::-webkit-scrollbar { width: 9px; }
  body:has(.sheet-page) .sheet-content::-webkit-scrollbar-track { background: transparent; }
  body:has(.sheet-page) .sheet-content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }

  /* Normal card: 2x2 stats left, portrait center, identity right. */
  .sheet-header-normal {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-template-rows: 150px auto auto;
    column-gap: clamp(18px,2.25vw,34px);
    row-gap: 26px;
    padding-top: 24px;
  }
  .sheet-header-normal .sheet-summary-grid.single-speed,
  .sheet-header-normal .sheet-summary-grid.has-extra-speed {
    grid-column: 1 / 6;
    grid-row: 1;
    grid-auto-flow: row;
    grid-template-columns: repeat(2,minmax(132px,164px));
    grid-template-rows: repeat(2,auto);
    justify-content: start;
    align-content: start;
    align-self: start;
    column-gap: 28px;
    row-gap: 20px;
  }
  .sheet-header-normal .sheet-summary-grid > *,
  .sheet-header-normal .normal-hit-dice { justify-self: start; text-align: left; }
  .sheet-header-normal .sheet-summary-stat,
  .sheet-header-normal .normal-hit-dice,
  .sheet-header-normal .normal-speed-menu > summary {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    align-items: stretch;
    column-gap: 10px;
  }
  .sheet-header-normal .sheet-summary-icon {
    display: grid;
    place-items: stretch center;
    width: 30px;
    height: 100%;
    min-height: 48px;
  }
  .sheet-header-normal .sheet-summary-icon .bf-icon { width: 26px; height: 100%; }
  .sheet-header-normal .sheet-summary-copy { display:grid; gap:4px; min-width:0; }
  .sheet-header-normal .sheet-summary-label { font-size: clamp(14px,1.25vw,18px); }
  .sheet-header-normal .sheet-summary-copy > strong,
  .sheet-header-normal .normal-hit-dice-values { font-size: clamp(22px,2vw,30px); font-weight:500; line-height:1; }

  .sheet-header-normal .sheet-identity {
    grid-column: 1 / -1;
    grid-row: 1;
    display: block;
    width: 100%;
    height: 150px;
    margin: 0;
    position: relative;
    pointer-events: none;
  }
  .sheet-header-normal .sheet-identity .sheet-avatar {
    position:absolute; left:50%; top:0;
    width:150px; height:150px; min-width:150px; min-height:150px;
    margin:0; transform:translateX(-50%); border-radius:50%; overflow:hidden;
    pointer-events:auto;
  }
  .sheet-header-normal .sheet-identity .sheet-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .sheet-header-normal .sheet-identity > div:first-child {
    position:absolute; left:calc(50% + 108px); right:0; top:0;
    min-width:0; text-align:left; pointer-events:auto;
  }
  .sheet-header-normal .sheet-identity h1 { margin:5px 0 8px; font-size:clamp(30px,2.5vw,40px); line-height:1; }
  .sheet-header-normal .class-lines { margin:0; font-size:clamp(14px,1.2vw,17px); font-weight:500; line-height:1.2; }
  .sheet-header-normal .sheet-character-title { display:block; margin:0; padding-top:8px; border-top:1px solid var(--line); font-family:var(--font-display); font-size:clamp(13px,1.05vw,15px); }
  .sheet-header-normal .sheet-summary-hp { grid-column:4 / 10; grid-row:2; width:100%; max-width:480px; justify-self:center; margin-top:-12px; }
  .sheet-header-normal .sheet-summary-hp::before { content:none; display:none; }

  /* Normal and Page Edit share exactly the same tab geometry. */
  .sheet-header-normal .sheet-tabs-in-card,
  .sheet-header-page .sheet-tabs-in-card {
    display:flex; justify-content:flex-start; gap:clamp(14px,2vw,32px);
    width:calc(100% + (var(--sheet-gutter) * 2));
    margin-left:calc(var(--sheet-gutter) * -1); margin-right:calc(var(--sheet-gutter) * -1);
    padding-left:var(--sheet-gutter); padding-right:var(--sheet-gutter);
    border-top:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  }
  .sheet-header-normal .sheet-tabs-in-card { grid-column:1 / -1; grid-row:3; margin-top:12px; }
  .sheet-header-page { padding-top:24px; }
  .sheet-header-normal .sheet-tabs-in-card::-webkit-scrollbar,
  .sheet-header-page .sheet-tabs-in-card::-webkit-scrollbar { display:none; }
  .sheet-header-normal .sheet-tab,
  .sheet-header-page .sheet-tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; font-size:clamp(14px,1.25vw,18px); white-space:nowrap; }
  .sheet-header-normal .sheet-tab-icon,
  .sheet-header-page .sheet-tab-icon { display:inline-grid; place-items:center; width:25px; height:25px; flex:0 0 25px; }
  .sheet-header-normal .sheet-tab-icon .bf-icon,
  .sheet-header-page .sheet-tab-icon .bf-icon { width:25px; height:25px; }
  .sheet-header-normal .sheet-tab.is-active .sheet-tab-icon,
  .sheet-header-page .sheet-tab.is-active .sheet-tab-icon { color:var(--accent); }

  /* One triangle treatment for all three modes. */
  .sheet-header-normal .sheet-pull-handle,
  .sheet-header-page .sheet-pull-handle,
  .sheet-header-quick .sheet-pull-handle { bottom:-44px; height:44px; }
  .sheet-header-normal .sheet-pull-handle::before,
  .sheet-header-page .sheet-pull-handle::before,
  .sheet-header-quick .sheet-pull-handle::before {
    top:-1px; height:34px;
    filter:drop-shadow(0 1px 0 var(--line)) drop-shadow(1px 0 0 var(--line)) drop-shadow(-1px 0 0 var(--line)) drop-shadow(0 6px 5px rgba(0,0,0,.20));
  }
  .sheet-header-normal .sheet-pull-handle span,
  .sheet-header-page .sheet-pull-handle span,
  .sheet-header-quick .sheet-pull-handle span { top:7px; width:22px; height:3px; box-shadow:none; }
  .sheet-header-normal .sheet-pull-handle span::after,
  .sheet-header-page .sheet-pull-handle span::after,
  .sheet-header-quick .sheet-pull-handle span::after {
    content:""; position:absolute; left:50%; top:7px; width:14px; height:3px;
    border-radius:999px; background:var(--accent); transform:translateX(-50%);
  }

  /* Quick Edit. */
  .sheet-header-quick .qe-label { font-size:16px; font-weight:400; line-height:1.2; }
  .sheet-header-quick .qe-input,
  .sheet-header-quick .qe-hit-dice-values,
  .sheet-header-quick .qe-hp-values { font-size:26px; line-height:1; }
  .sheet-header-quick .qe-shell { grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); column-gap:20px; row-gap:22px; }
  .sheet-header-quick .qe-row-stats,
  .sheet-header-quick .qe-row-extra-movement { grid-column:1 / -1; }
  .sheet-header-quick .qe-hit-dice { grid-column:1; align-self:start; }
  .sheet-header-quick .qe-hp { grid-column:2; align-self:end; }
  .sheet-header-quick .qe-temp-action { grid-column:2; justify-items:center; margin-top:-16px; }

  /* Background Page Edit. */
  .page-edit-background-core { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
  .page-edit-background-copy { display:grid; gap:16px; }
  .page-edit-background-description-field { gap:4px; }
  .page-edit-background-copy textarea,
  .page-edit-background-description-field textarea { min-height:100px; max-height:350px; resize:none; overflow-y:hidden; }

  /* Desktop bottom sheets become centered modal windows. */
  .bottom-sheet,
  .bottom-sheet.bottom-sheet-editor {
    left:50%; top:50%; bottom:auto;
    width:min(calc(100% - 64px),620px); max-height:min(82dvh,760px);
    border-radius:22px; transform:translate(-50%,-48%) scale(.98); opacity:0;
    padding:48px 24px 24px; transition:transform .18s ease,opacity .18s ease;
  }
  .overlay.is-open .bottom-sheet,
  .overlay.is-open .bottom-sheet.bottom-sheet-editor { transform:translate(-50%,-50%) scale(1); opacity:1; }
  .bottom-sheet:has(.info-sheet) { display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }
  .bottom-sheet:has(.info-sheet) .sheet-form { display:block; min-height:0; max-height:min(82dvh,720px); overflow:hidden; }
  .info-sheet { display:flex; flex-direction:column; min-height:240px; max-height:min(82dvh,720px); }
  .info-sheet-header { position:relative; top:auto; flex:0 0 auto; min-height:58px; margin:0 0 18px; padding:8px 44px 14px 0; border-bottom:1px solid var(--line); background:var(--surface); }
  .info-sheet-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 10px 22px 0; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
  .info-sheet-scroll::-webkit-scrollbar { width:8px; }
  .info-sheet-scroll::-webkit-scrollbar-track { background:transparent; }
  .info-sheet-scroll::-webkit-scrollbar-thumb { background:var(--accent); border-radius:999px; }
}

/* =========================================================
   SHEET POLISH
   ========================================================= */
/* Normal inventory currency uses the same white + grey-stroke display field
   language as the read-only spell/ability/save/attack fields. */
.currency-row:not(.is-editable) .currency-value {
  border: 1.5px solid var(--line);
  background: var(--surface);
  transform: none;
  box-shadow: none;
}

/* Quick Edit comparison fields: original value | edited value. */
.qe-input-shell {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: center;
  height: 43px;
  min-width: 0;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.qe-input-shell.has-change {
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  gap: 6px;
}
.qe-input-shell .qe-input {
  width: 100%; height: 100%; min-width: 0;
  border: 0; border-radius: 0; box-shadow: none; transform: none;
  background: transparent; text-align: center; padding: 0 4px;
}
.qe-start-value { color: var(--muted); text-align:center; font-size:inherit; }
.qe-input-shell .qe-divider { height: 24px; background: var(--line); }
.qe-field.has-icon { grid-template-columns: 28px minmax(0,1fr); column-gap:8px; }
.qe-field.has-icon .qe-stat-icon { grid-column:1; grid-row:1 / 3; display:grid; place-items:center; }
.qe-field.has-icon .qe-stat-icon .bf-icon { width:24px; height:100%; }
.qe-field.has-icon .qe-label,
.qe-field.has-icon .qe-input-shell,
.qe-field.has-icon .qe-stepper-bar { grid-column:2; }

/* Normal Background text follows the same 350px cap as Page Edit. */
.normal-background-view .display-field.is-multiline > div {
  max-height: 350px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.normal-background-view .display-field.is-multiline > div::-webkit-scrollbar { width:8px; }
.normal-background-view .display-field.is-multiline > div::-webkit-scrollbar-thumb { background:var(--accent); border-radius:999px; }

@media (min-width: 900px) {
  /* Info popups: the title bar belongs to the modal edges, not a padded inner
     box. This keeps title and close button aligned. */
  .bottom-sheet:has(.info-sheet) { padding:0; }
  .bottom-sheet:has(.info-sheet) .sheet-form { max-height:min(82dvh,720px); }
  .info-sheet-header {
    min-height:64px; margin:0; padding:20px 58px 16px 24px;
    display:flex; align-items:center; border-bottom:1px solid var(--line);
  }
  .info-sheet-header .modal-close,
  .info-sheet-close { top:16px; right:18px; left:auto; }
  .info-sheet-scroll { padding:20px 24px 24px; }
}

/* =========================================================
   QUICK EDIT — INPUTS / SPEED / BACKGROUND
   ========================================================= */
/* Quick Edit values are data inputs, not physical buttons. They never sink
   when filled: resting is centred, focus only changes the editing highlight. */
.qe-input-shell .qe-input.text-input,
.qe-input-shell .qe-input.text-input.is-pressed,
.qe-input-shell .qe-input.text-input.is-editing {
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 6px;
  text-align: center;
  line-height: 43px;
  height: 43px;
  min-height: 43px;
}
.qe-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: var(--control-shadow-accent);
}
.qe-input-shell.has-change .qe-start-value { color:#CCC; }

/* The stat icon owns a full column from the label to the bottom of the field,
   and its glyph is the same physical height as the 43px data input. */
.qe-field.has-icon { grid-template-columns:43px minmax(0,1fr); column-gap:10px; }
.qe-field.has-icon .qe-stat-icon {
  grid-column:1;
  grid-row:1 / 3;
  width:43px;
  height:100%;
  min-height:63px;
  display:grid;
  align-items:end;
  justify-items:center;
}
.qe-field.has-icon .qe-stat-icon .bf-icon { width:43px; height:43px; }

.qe-hp-field { display:grid; grid-template-rows:auto 43px; gap:4px; min-width:0; }
.qe-hp-field .qe-hp { height:43px; min-height:43px; }

/* A non-overflowing Background field must not swallow wheel scrolling from
   the page. At the 350px cap, normal scroll chaining still reaches the page. */
.normal-background-view .display-field.is-multiline > div {
  overscroll-behavior: auto;
}

/* Make the multi-speed disclosure sit above the rest of the card when open. */
.normal-speed-menu[open] { z-index:300; }
.normal-speed-popover { z-index:301; }

@media (min-width:900px) {
  /* Visible grey outline around the complete pull triangle. */
  .sheet-header-normal .sheet-pull-handle::after,
  .sheet-header-page .sheet-pull-handle::after,
  .sheet-header-quick .sheet-pull-handle::after {
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:100%;
    height:36px;
    background:var(--line);
    clip-path:polygon(0 0,100% 0,50% 100%);
    z-index:-2;
  }
  .sheet-header-normal .sheet-pull-handle::before,
  .sheet-header-page .sheet-pull-handle::before,
  .sheet-header-quick .sheet-pull-handle::before {
    left:1px;
    width:calc(100% - 2px);
    top:-1px;
    height:34px;
    z-index:-1;
  }
}

/* =========================================================
   QUICK EDIT — STRUCTURE / LIVE COMMIT
   ========================================================= */
/* Quick Edit fields are compact data blocks. The icon column spans the
   label and control, while the control itself never behaves like a button. */
.qe-field.has-icon {
  grid-template-columns: 43px minmax(0,1fr);
  grid-template-rows: auto 43px;
  column-gap: 10px;
  row-gap: 4px;
}
.qe-field.has-icon .qe-stat-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 43px;
  min-height: 63px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.qe-field.has-icon .qe-stat-icon .bf-icon {
  width: 43px;
  height: 43px;
}
.qe-field.has-icon .qe-label { grid-column:2; grid-row:1; }
.qe-field.has-icon .qe-input-shell,
.qe-field.has-icon .qe-stepper-bar { grid-column:2; grid-row:2; }

.qe-input-shell,
.qe-input-shell.has-change {
  height: 43px;
  min-height: 43px;
}
.qe-input-shell .qe-input.text-input,
.qe-input-shell .qe-input.text-input.is-pressed,
.qe-input-shell .qe-input.text-input.is-editing {
  height: 100%;
  min-height: 0;
  line-height: normal;
  transform: none !important;
  box-shadow: none !important;
  text-align: center;
}

.qe-hp-field {
  display: grid;
  grid-template-rows: auto 43px;
  gap: 4px;
  min-width: 0;
}
.qe-hp-field > .qe-label { grid-row:1; }
.qe-hp-field > .qe-hp { grid-row:2; width:100%; }

@media (min-width:900px) {
  /* One deliberate desktop grid: three compact primary stats, optional
     movement beneath, then Hit Dice + Hit Points as equal coherent blocks. */
  .sheet-header-quick .qe-shell {
    display:grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 20px;
    row-gap: 22px;
  }
  .sheet-header-quick .qe-row-stats {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
  }
  .sheet-header-quick .qe-row-extra-movement {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .sheet-header-quick .qe-hit-dice {
    grid-column:1;
    grid-row:auto;
    align-self:start;
  }
  .sheet-header-quick .qe-hp-field {
    grid-column:2;
    align-self:start;
  }
  .sheet-header-quick .qe-temp-action {
    grid-column:2;
    justify-items:center;
    margin-top:-14px;
  }
  .sheet-header-quick .qe-label { font-size:16px; }
  .sheet-header-quick .qe-input,
  .sheet-header-quick .qe-start-value,
  .sheet-header-quick .qe-hit-dice-values,
  .sheet-header-quick .qe-hp-values { font-size:22px; font-weight:400; }
}

/* =========================================================
   QUICK EDIT — RESOURCE ROW / ICON ALIGNMENT
   ========================================================= */
/* Labels sit above the data row. Icons sit beneath the labels, beside the
   input/resource control, so every Quick Edit stat reads the same way. */
.qe-field.has-icon {
  grid-template-columns: 43px minmax(0,1fr);
  grid-template-rows: auto 43px;
  column-gap: 10px;
  row-gap: 4px;
}
.qe-field.has-icon .qe-label {
  grid-column: 1 / -1;
  grid-row: 1;
}
.qe-field.has-icon .qe-stat-icon {
  grid-column: 1;
  grid-row: 2;
  width: 43px;
  height: 43px;
  min-height: 43px;
  display: grid;
  place-items: center;
}
.qe-field.has-icon .qe-input-shell,
.qe-field.has-icon .qe-stepper-bar,
.qe-field.has-icon .qe-hp {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  min-width: 0;
}
.qe-hp-field { display:grid; min-width:0; }

@media (min-width:900px) {
  /* Hit Dice and Hit Points are one explicit two-column row. */
  .sheet-header-quick .qe-hit-dice {
    grid-column:1;
    grid-row:3;
    align-self:start;
  }
  .sheet-header-quick .qe-hp-field {
    grid-column:2;
    grid-row:3;
    align-self:start;
  }
  .sheet-header-quick .qe-temp-action {
    grid-column:2;
    grid-row:4;
    justify-items:center;
    margin-top:-14px;
  }
}

/* =========================================================
   RESPONSIVE QUICK EDIT / DESKTOP CREATOR
   ========================================================= */
/* Quick Edit icons are a desktop enhancement only. Mobile returns to the
   original data-first controls with no stat icon column. */
@media (max-width: 899px) {
  .sheet-header-quick .qe-stat-icon { display: none !important; }
  .sheet-header-quick .qe-field.has-icon {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 43px;
    column-gap: 0;
    row-gap: 4px;
  }
  .sheet-header-quick .qe-field.has-icon .qe-label {
    grid-column: 1;
    grid-row: 1;
  }
  .sheet-header-quick .qe-field.has-icon .qe-input-shell,
  .sheet-header-quick .qe-field.has-icon .qe-stepper-bar,
  .sheet-header-quick .qe-field.has-icon .qe-hp {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (min-width: 900px) {
  /* Character-card summary icons keep their natural square geometry instead
     of stretching vertically with the label/value wrapper. */
  .sheet-header-normal .sheet-summary-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 48px;
    min-height: 48px;
    align-self: start;
  }
  .sheet-header-normal .sheet-summary-icon .bf-icon {
    width: 28px;
    height: 28px;
    align-self: center;
  }

  /* Character Creation uses the same horizontal content gutter as the
     desktop character sheet rather than the mobile 20px content padding. */
  .creator-page { --sheet-gutter: clamp(34px, 4vw, 54px); }
  .creator-content {
    width: 100%;
    padding: 32px var(--sheet-gutter) 110px;
  }
  .creator-header {
    padding-left: var(--sheet-gutter);
    padding-right: var(--sheet-gutter);
  }

  /* Abilities and Saving Throws: 3 columns × 2 rows on desktop. */
  .creator-ability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
  }
  .creator-saving-throws {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 18px;
  }

  /* Overview identity mirrors the desktop sheet: 150px portrait left,
     Name and profile-picture URL stacked directly to its right. */
  .creator-overview-identity {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
  }
  .creator-overview-avatar,
  .creator-overview-avatar .avatar,
  .creator-overview-avatar .sheet-avatar {
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
  }
  .creator-overview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .creator-overview-identity-fields {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
  }
}

/* =========================================================
   DESKTOP — CHARACTER CREATION
   Creator is a viewport-contained sheet inside body padding. Only the
   creator content scrolls; header/footer stay in place.
   ========================================================= */
@media (min-width: 900px) {
  html:has(.creator-page),
  body:has(.creator-page) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body:has(.creator-page) {
    box-sizing: border-box;
  }

  body:has(.creator-page) .app-shell {
    width: min(100%, var(--content-max));
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface-alt);
  }

  body:has(.creator-page) .app {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .creator-page {
    --sheet-gutter: clamp(34px, 4vw, 54px);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface);
  }

  .creator-header {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    padding: 26px var(--sheet-gutter) 12px;
  }

  .creator-content {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px var(--sheet-gutter) 40px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
  }
  .creator-content::-webkit-scrollbar { width: 8px; }
  .creator-content::-webkit-scrollbar-track { background: transparent; }
  .creator-content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 999px;
  }

  .creator-footer {
    position: relative;
    inset: auto;
    transform: none;
    flex: 0 0 78px;
    width: 100%;
    height: 78px;
    padding: 8px var(--sheet-gutter);
    border-top: 1px solid var(--ink);
  }

  /* Overview: real 150x150 portrait, with Name + Profile picture in one row. */
  .creator-overview-identity {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    align-items: end;
    width: 100%;
  }
  .creator-overview-avatar,
  .creator-overview-avatar .avatar-placeholder,
  .creator-overview-avatar .avatar-placeholder-large,
  .creator-overview-avatar .sheet-avatar {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px;
    min-height: 150px;
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
  }
  .creator-overview-identity-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
    min-width: 0;
  }

  /* HP / Initiative / AC share one row and use the sheet stat icons. */
  .creator-overview-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .creator-overview-stat {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    min-width: 0;
  }
  .creator-overview-stat-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 43px;
  }
  .creator-overview-stat-icon .bf-icon {
    width: 30px;
    height: 30px;
  }

  /* Movement is a horizontal set of cards. */
  .movement-creator { gap: 14px; }
  .creator-movement-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .creator-movement-card {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }
  .creator-movement-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
  }
  .creator-movement-card > strong { min-height: 32px; display:flex; align-items:center; }
  .creator-movement-card .field { min-width: 0; }
  .creator-movement-card .movement-delete {
    min-width: 32px;
    width: 32px;
    min-height: 32px;
    height: 32px;
    align-self: auto;
  }
  .creator-movement-card .movement-delete .bf-icon { width: 18px; height: 18px; }

  .creator-class-section {
    display: grid;
    gap: 16px;
    padding-top: 4px;
  }
}

/* =========================================================
   DESKTOP — CREATOR REFINEMENT
   Desktop-only presentation. Mobile creator layout is left untouched.
   ========================================================= */
@media (min-width: 900px) {
  /* Match the sheet's grey content surface; only this inner pane scrolls. */
  .creator-page { background: var(--surface-alt); }
  .creator-header,
  .creator-footer { background: var(--surface); }
  .creator-content { background: var(--surface-alt); }

  /* Portrait top-aligns with the Name/Profile row. Stats sit below it. */
  .creator-overview-identity { align-items: start; }
  .creator-overview-identity-fields { align-items: start; }
  .creator-overview-avatar,
  .creator-overview-avatar .avatar-placeholder,
  .creator-overview-avatar .avatar-placeholder-large,
  .creator-overview-avatar .sheet-avatar,
  .creator-overview-avatar img {
    width:150px !important; height:150px !important;
    min-width:150px; min-height:150px; max-width:150px; max-height:150px;
    aspect-ratio:1/1; object-fit:cover;
  }
  .creator-overview-stats {
    width: calc(100% - 174px);
    margin-left: 174px;
    margin-top: -70px;
  }

  /* Movement cards and the Add Movement tile share one grid. */
  .creator-movement-card .field > span:empty { display:none; }
  .creator-movement-card .field { gap:0; }
  .creator-add-card {
    appearance:none;
    min-height:112px;
    padding:14px;
    border:1.5px dashed var(--line);
    border-radius:14px;
    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    font:600 15px Nunito, sans-serif;
    color:var(--muted);
    cursor:pointer;
  }
  .creator-add-card:hover { border-color:var(--accent); color:var(--ink); }
  .creator-add-card-plus { font-size:26px; line-height:1; color:var(--accent); }

  /* Background option rows become equal cards, with the add action as the next card. */
  .creator-card-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
  }
  .creator-option-card {
    min-width:0;
    min-height:112px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
    align-items:start;
  }
  .creator-card-list > .creator-add-card { min-height:112px; }

  /* Creator Background uses the same text-area rhythm as sheet Page Edit. */
  .creator-content [data-background="personalityTraits"],
  .creator-content [data-background="ideals"],
  .creator-content [data-background="bonds"],
  .creator-content [data-background="flaws"],
  .creator-content [data-background-description-value] {
    min-height:100px;
    max-height:350px;
    resize:none;
    overflow-y:hidden;
  }
}

/* =========================================================
   DESKTOP — CREATOR POLISH
   ========================================================= */
@media (min-width: 900px) {
  /* Use the exact same page grey as Character Sheet content. */
  .creator-page,
  body:has(.creator-page) .app-shell { background: var(--surface); }
  .creator-content { background: var(--bg); }

}

/* =========================================================
   DESKTOP — CREATOR CARDS / EDITORS
   ========================================================= */
@media (min-width: 900px) {

  /* Added background choices are display cards, never secondary editors. */
  .creator-data-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .creator-data-card-copy { display:flex; flex-direction:column; gap:6px; min-width:0; }
  .creator-data-card-label { font-family:var(--font-body); font-size:13px; color:var(--muted); }
  .creator-data-card-copy strong { font-family:var(--font-heading); font-size:18px; font-weight:600; }
  .creator-money-divider { margin-top:18px; margin-bottom:18px; }
}

/* =========================================================
   CREATOR — RESPONSIVE CARDS / PICKERS
   ========================================================= */
@media (min-width: 900px) {
}

@media (max-width: 899px) {
  /* Mobile Overview stays intentionally simpler: no stat icons. */
  .creator-overview-stat-icon { display: none !important; }
  .creator-overview-identity-fields {
    display: grid;
    gap: 16px;
  }
  .creator-overview-stats {
    display: grid;
    gap: 14px;
  }

  /* Mobile movement follows the same card language as desktop, two per row. */
  .creator-movement-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .creator-movement-card,
  .creator-option-card {
    min-width: 0;
    min-height: 112px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }
  .creator-movement-card {
    display: grid;
    gap: 10px;
    align-content: start;
  }
  .creator-movement-card > strong {
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  .creator-movement-card .field > span:empty { display: none; }
  .creator-movement-card .field { gap: 0; min-width: 0; }
  .creator-movement-card .movement-delete {
    min-width: 32px;
    width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0;
  }
  .creator-add-card {
    appearance: none;
    min-height: 112px;
    padding: 14px;
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 15px Nunito, sans-serif;
    color: var(--muted);
    cursor: pointer;
  }
  .creator-add-card-plus { font-size: 26px; line-height: 1; color: var(--accent); }

  /* Background conditional choices use the same two-column card system. */
  .creator-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .creator-data-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .creator-data-card-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .creator-data-card-label { font-family: var(--font-body); font-size: 13px; color: var(--muted); }
  .creator-data-card-copy strong { font-family: var(--font-heading); font-size: 18px; font-weight: 600; }

  /* Give the class controls the same breathing room as the surrounding sections. */
  .creator-class-section { display: grid; gap: 16px; padding-top: 4px; }
  .creator-class-section .class-grid { gap: 14px 12px; }

  /* Currency and the item list belong together visually on mobile. */
  .inventory-creator .creator-money-divider { margin: 12px 0 20px; }
}


/* =========================================================
   CREATOR — POPUPS / SCROLL / OVERVIEW
   ========================================================= */


@media (max-width: 899px) {
  /* Dialog dropdown placement is calculated from available viewport space. */

  /* Make the creator's own scroll region explicit and green. */
  .creator-content {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    scrollbar-gutter: stable;
  }
  .creator-content::-webkit-scrollbar { width: 6px; }

  /* Pull inventory immediately up under currency. */
  .inventory-creator .creator-money-divider { margin: 6px 0 10px; }
}

@media (min-width: 900px) {
  /* In Overview, label sits above; icon and input share the row below. */
  .creator-overview-stat {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto 43px;
    column-gap: 10px;
    row-gap: 4px;
    align-items: stretch;
  }
  .creator-overview-stat > .creator-overview-stat-icon {
    grid-column: 1;
    grid-row: 2;
    width: 30px;
    height: 43px;
    display: grid;
    place-items: center;
  }
  .creator-overview-stat > .creator-overview-stat-icon .bf-icon {
    width: 28px;
    height: 28px;
  }
  .creator-overview-stat > .field { display: contents; }
  .creator-overview-stat > .field > span {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .creator-overview-stat > .field > input {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }


  /* Same tighter currency → inventory relationship on desktop. */
  .inventory-creator .creator-money-divider { margin: 8px 0 12px; }
}

/* =========================================================
   DESKTOP — CREATOR POLISH + NORMAL CARD RECOMPOSITION
   ========================================================= */
@media (min-width: 900px) {
  /* Creator Overview: use the same icon/control geometry as Quick Edit. */
  .creator-overview-stat {
    grid-template-columns: 43px minmax(0, 1fr);
    grid-template-rows: auto 43px;
    column-gap: 10px;
    row-gap: 4px;
  }
  .creator-overview-stat > .creator-overview-stat-icon {
    grid-column: 1;
    grid-row: 2;
    width: 43px;
    height: 43px;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .creator-overview-stat > .creator-overview-stat-icon .bf-icon {
    width: 43px;
    height: 43px;
  }
  .creator-overview-stat > .field > span { grid-column: 2; grid-row: 1; }
  .creator-overview-stat > .field > input {
    grid-column: 2;
    grid-row: 2;
    height: 43px;
    min-height: 43px;
  }


  /* Desktop normal character card — consolidated. */
  .sheet-header-normal {
    grid-template-columns: minmax(0, 481px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(24px, 3vw, 42px);
    row-gap: 0;
    align-items: stretch;
  }

  .sheet-header-normal .sheet-normal-left-identity {
    grid-column: 1;
    grid-row: 1;
    width: 481px;
    max-width: 100%;
    min-width: 0;
    align-self: end;
    padding-bottom: 15px;
    text-align: left;
  }
  .sheet-header-normal .sheet-normal-left-identity .class-lines {
    margin: 0 0 2px;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 500;
    line-height: 1.2;
  }
  .sheet-header-normal .sheet-normal-left-identity h1 {
    margin: 0;
    font-size: clamp(30px, 2.5vw, 40px);
    line-height: 1;
  }
  .sheet-header-normal .sheet-normal-left-identity .sheet-character-title {
    margin: 5px 0 0;
    padding-top: 5px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: clamp(13px, 1.05vw, 15px);
  }

  .sheet-header-normal .sheet-summary-grid.single-speed,
  .sheet-header-normal .sheet-summary-grid.has-extra-speed {
    grid-column: 1;
    grid-row: 2;
    width: max-content;
    max-width: 100%;
    grid-template-columns: repeat(4, 112px);
    gap: 11px;
    margin: 0;
    padding-bottom: 15px;
    align-self: start;
  }
  .sheet-header-normal .sheet-summary-stat,
  .sheet-header-normal .normal-hit-dice,
  .sheet-header-normal .normal-speed-menu > summary {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;
  }
  .sheet-header-normal .sheet-summary-label {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .sheet-header-normal .sheet-summary-icon {
    grid-column: 1;
    grid-row: 2;
    width: 30px;
    height: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sheet-header-normal .sheet-summary-icon .bf-icon { width: 28px; height: 28px; }
  .sheet-header-normal .sheet-summary-copy { display: contents; }
  .sheet-header-normal .sheet-summary-copy > strong,
  .sheet-header-normal .normal-hit-dice-values {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  .sheet-header-normal .sheet-summary-hp {
    grid-column: 1;
    grid-row: 3;
    width: 481px;
    max-width: 100%;
    margin: 0;
    padding-bottom: 18px;
    align-self: start;
  }

  .sheet-header-normal .sheet-normal-avatar {
    grid-column: 2;
    grid-row: 1 / 4;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: end;
    align-self: stretch;
    display: flex;
    overflow: hidden;
  }
  .sheet-header-normal .sheet-normal-avatar .sheet-avatar {
    position: static;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    transform: none;
    border-radius: 50%;
  }
  .sheet-header-normal .sheet-normal-avatar .sheet-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .sheet-header-normal .sheet-tabs-in-card {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 20px;
  }
}

/* =========================================================
   MOBILE — NORMAL CHARACTER IDENTITY
   The normal-sheet markup is shared with desktop, but the large desktop
   portrait/layout rules stay desktop-only. On mobile the identity remains
   on the left with the familiar 58px portrait anchored on the right.
   ========================================================= */
@media (max-width: 899px) {
  .sheet-header-normal .sheet-normal-left-identity {
    min-width: 0;
    padding-right: 76px;
    margin-bottom: 22px;
  }

  .sheet-header-normal .sheet-normal-left-identity .class-lines {
    margin: 0 0 4px;
  }

  .sheet-header-normal .sheet-normal-left-identity h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.05;
  }

  .sheet-header-normal .sheet-normal-avatar {
    position: absolute;
    top: 24px;
    right: var(--sheet-gutter);
    width: 58px;
    height: 58px;
    z-index: 321;
  }

  .sheet-header-normal .sheet-normal-avatar .sheet-avatar {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    margin: 0;
  }
}

/* =========================================================
   DESKTOP — VIEWPORT / PRIMARY NAVIGATION
   Keep padded desktop routes inside the available body box and let the
   bottom navigation follow the same full width as the desktop app shell.
   ========================================================= */
@media (min-width: 900px) {
  /* Auth must size against the padded body, not against the raw viewport. */
  html:has(.auth-page),
  body:has(.auth-page) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body:has(.auth-page) .app-shell,
  body:has(.auth-page) .app {
    width: min(100%, var(--content-max));
    height: 100%;
    min-height: 0;
  }

  body:has(.auth-page) .app {
    padding-bottom: 0;
    overflow: auto;
  }

  body:has(.auth-page) .auth-page {
    min-height: 100%;
    height: auto;
  }

  /* The sheet already owns the padded viewport. Do not leave any route-level
     space below it. */
  body:has(.sheet-page) {
    padding-bottom: 28px;
  }

  /* On desktop the primary nav spans the complete app/content width. */
  .bottom-nav {
    width: min(calc(100% - 56px), var(--content-max));
    max-width: var(--content-max);
    padding-left: clamp(40px, 6vw, 84px);
    padding-right: clamp(40px, 6vw, 84px);
  }
}


/* =========================================================
   DESKTOP — APP VIEWPORT / BOTTOM NAVIGATION
   The desktop home/updates shell lives inside the 28px body frame.
   Body never becomes taller than the viewport; route content owns any
   necessary scrolling. Primary navigation sits on the shell's bottom edge,
   preserving the outer gap and lower corner radius.
   ========================================================= */
@media (min-width: 900px) {
  html,
  body {
    height: 100dvh;
    min-height: 0;
  }

  body {
    overflow: hidden;
  }

  body:not(:has(.sheet-page)):not(:has(.creator-page)):not(:has(.auth-page)) .app-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body:not(:has(.sheet-page)):not(:has(.creator-page)):not(:has(.auth-page)) .app {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: calc(var(--mobile-nav-height) + 20px);
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
  }

  body:not(:has(.sheet-page)):not(:has(.creator-page)):not(:has(.auth-page)) .app::-webkit-scrollbar {
    width: 9px;
  }

  body:not(:has(.sheet-page)):not(:has(.creator-page)):not(:has(.auth-page)) .app::-webkit-scrollbar-track {
    background: transparent;
  }

  body:not(:has(.sheet-page)):not(:has(.creator-page)):not(:has(.auth-page)) .app::-webkit-scrollbar-thumb {
    background: var(--accent);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }

  .bottom-nav {
    bottom: 28px;
    width: min(calc(100% - 56px), var(--content-max));
    max-width: var(--content-max);
    border-radius: 0 0 28px 28px;
  }
}


/* =========================================================
   SHARED POPUP UI SYSTEM
   One shell owns header, scrollable content, spacing and footer actions.
   Feature-specific popup classes are no longer used for layout.
   ========================================================= */
.bf-dialog-overlay .bf-dialog {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(90dvh, 760px);
}

.bf-dialog-header {
  position: relative;
  flex: 0 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 18px 58px 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.bf-dialog-header h2 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: 1.15;
}

.bf-dialog-header .bf-dialog-close {
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.bf-dialog-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.bf-dialog-content {
  display: grid;
  align-content: start;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* Extra attack damage entries remain responsive inside the shared dialog scroll area. */
.additional-damage-list { display: grid; gap: 14px; }
.additional-damage-entry { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.additional-damage-entry > .bf-icon-button { justify-self: end; }

.bf-dialog-content > .field,
.bf-dialog-content > .grid-2,
.bf-dialog-content > .check-row,
.bf-dialog-content > h3,
.bf-dialog-content > [data-custom-select] {
  margin-top: 0;
  margin-bottom: 0;
}

.bf-dialog-content::-webkit-scrollbar,
.bf-dialog-content textarea::-webkit-scrollbar { width: 8px; }
.bf-dialog-content::-webkit-scrollbar-track,
.bf-dialog-content textarea::-webkit-scrollbar-track { background: transparent; }
.bf-dialog-content::-webkit-scrollbar-thumb,
.bf-dialog-content textarea::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}

footer.bf-dialog-actions {
  position: static;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

footer.bf-dialog-actions .btn,
footer.bf-dialog-actions .text-action { flex: 0 0 auto; }

footer.bf-dialog-actions .btn { min-width: 112px; }

footer.bf-dialog-actions .text-action { margin: 0; }

footer.bf-dialog-actions .btn:last-child { margin-left: auto; }

footer.bf-dialog-actions .btn,
footer.bf-dialog-actions .text-action,
.bf-dialog-close { visibility: visible; }

footer.bf-dialog-actions:empty { display: none; }

.bf-dialog-info .bf-dialog-content { line-height: 1.5; }
.bf-dialog-info .info-title-proficiency { justify-self: start; }

footer.bf-dialog-actions .text-action + .btn { margin-left: 0; }

footer.bf-dialog-actions .text-action:first-child { margin-right: auto; }

footer.bf-dialog-actions .btn-primary { align-self: center; }

footer.bf-dialog-actions .btn-primary:only-child { margin-left: auto; }

footer.bf-dialog-actions .text-action:only-child { margin-right: 0; }

footer.bf-dialog-actions .btn { width: auto; }

footer.bf-dialog-actions { min-height: 76px; }

footer.bf-dialog-actions .btn,
footer.bf-dialog-actions .text-action { position: relative; z-index: 1; }

footer.bf-dialog-actions { overflow: visible; }

.bf-dialog-content .item-action-sheet {
  display: grid;
  gap: 12px;
}

.bf-dialog-content .item-action-sheet > h2 { display: none; }

@media (max-width: 899px) {
  .bf-dialog-overlay .bf-dialog {
    width: min(100%, 560px);
    max-height: 90dvh;
    border-radius: 24px 24px 0 0;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 100%);
    opacity: 1;
  }
  .bf-dialog-overlay.is-open .bf-dialog { transform: translate(-50%, 0); }

  .bf-dialog-header { padding-left: 20px; }
  .bf-dialog-content { padding: 20px; }
  footer.bf-dialog-actions { padding: 16px 20px 22px; }
}

@media (min-width: 900px) {
  .bf-dialog-overlay .bf-dialog {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: min(calc(100% - 64px), 640px);
    max-height: min(84dvh, 760px);
    border-radius: 22px;
    transform: translate(-50%, -48%) scale(.98);
    opacity: 0;
  }

  .bf-dialog-overlay.is-open .bf-dialog {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}


/* DESKTOP — SAFARI NORMAL CARD */
@media (min-width: 900px) {
  .sheet-header-normal .sheet-normal-avatar { min-width:0; min-height:0; align-items:center; justify-content:flex-end; overflow:visible; }
  .sheet-header-normal .sheet-normal-avatar .sheet-avatar { width:min(100%, 220px); height:auto; max-width:220px; max-height:none; aspect-ratio:1 / 1; flex:0 1 220px; align-self:center; border-radius:50%; }
  .sheet-header-normal .sheet-tabs-in-card, .sheet-header-page .sheet-tabs-in-card { scroll-behavior:auto; }
  .sheet-header-normal .sheet-tab, .sheet-header-page .sheet-tab { position:relative; pointer-events:auto; }
}


/* =========================================================
   DESKTOP — MACOS / SAFARI PORTRAIT
   Keep the desktop portrait visibly substantial while preserving a true
   circle. Vertical sheet position is preserved in JS across inline updates.
   ========================================================= */
@media (min-width: 900px) {
  .sheet-header-normal .sheet-normal-avatar .sheet-avatar {
    width: clamp(240px, 22vw, 300px);
    height: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
  }
}

/* =========================================================
   DESKTOP — NORMAL CHARACTER CARD
   Identity + 1×4 summary share the top row, separated by a divider.
   HP spans beneath them. The portrait uses the same top/bottom bounds as
   the identity/HP block and remains square on Safari.
   ========================================================= */
@media (min-width: 900px) {
  .sheet-header-normal {
    grid-template-columns: minmax(210px, 1fr) minmax(420px, 481px) 190px;
    grid-template-rows: auto auto auto;
    column-gap: clamp(20px, 2.4vw, 34px);
    align-items: stretch;
  }

  .sheet-header-normal .sheet-normal-left-identity {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: none;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    text-align: left;
  }

  .sheet-header-normal .sheet-normal-left-identity h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .sheet-header-normal .sheet-summary-grid.single-speed,
  .sheet-header-normal .sheet-summary-grid.has-extra-speed {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 481px;
    grid-template-columns: repeat(4, minmax(86px, 1fr));
    gap: 11px;
    margin: 0;
    padding: 0 0 0 clamp(20px, 2vw, 28px);
    border-left: 1px solid var(--line);
    align-self: center;
  }

  .sheet-header-normal .sheet-summary-hp {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 0 0;
    align-self: end;
  }

  .sheet-header-normal .sheet-normal-avatar {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 190px;
    height: 190px;
    min-width: 190px;
    min-height: 190px;
    max-width: 190px;
    max-height: 190px;
    justify-self: end;
    align-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: visible;
  }

  .sheet-header-normal .sheet-normal-avatar .sheet-avatar {
    width: 190px;
    height: 190px;
    min-width: 190px;
    min-height: 190px;
    max-width: 190px;
    max-height: 190px;
    aspect-ratio: 1 / 1;
    flex: 0 0 190px;
    align-self: stretch;
    margin: 0;
    border-radius: 50%;
  }

  .sheet-header-normal .sheet-tabs-in-card {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 20px;
  }
}

/* =========================================================
   SHARED DIALOG / STRUCTURED INFO
   One popup shell. Info metadata and complex editor field grids are content
   layouts only; they do not redefine dialog chrome.
   ========================================================= */
.info-sheet-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0;
}
.info-sheet-copy {
  margin-top: 2px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.spell-editor-overlay .bf-dialog-content > .grid-2,
.item-editor-overlay .bf-dialog-content > .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}
.spell-editor-overlay .bf-dialog-content > *,
.item-editor-overlay .bf-dialog-content > * {
  min-width: 0;
}
.feature-editor-overlay textarea[name="description"] {
  height: 100px;
  min-height: 100px;
  max-height: 100px;
  resize: none;
  overflow-y: auto;
}
@media (min-width: 900px) {
  .sheet-header-normal .sheet-summary-hp {
    padding-top: 8px;
  }
  .spell-editor-overlay .bf-dialog,
  .item-editor-overlay .bf-dialog {
    width: min(calc(100% - 64px), 700px);
  }
}

/* =========================================================
   UPGRADE / SUBSCRIPTION — v161
   Mobile first. Existing Bonfire buttons, type, colors and radii.
   ========================================================= */
.subscription-page.upgrade-page {display:grid;align-content:start;gap:22px;min-width:0;padding-bottom:calc(var(--mobile-nav-height) + 42px);}
.upgrade-page-header {margin-bottom:0;}
.upgrade-intro {display:grid;gap:12px;max-width:640px;}
.upgrade-intro .eyebrow {margin:0;color:var(--accent-dark);font-size:.78rem;letter-spacing:.09em;}
.upgrade-intro h2 {font-family:var(--font-display);font-weight:900;font-size:clamp(1.8rem,7vw,2.8rem);line-height:1.06;letter-spacing:-.035em;margin:0;}
.upgrade-intro>p {margin:0;color:var(--muted);}
.upgrade-intro .upgrade-active-plan {color:var(--ink);font-size:.9rem;margin-top:4px;}
.upgrade-plan-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:stretch;min-width:0;}
.upgrade-tier {position:relative;display:flex;flex-direction:column;gap:15px;min-width:0;padding:24px 20px 22px;border:2px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);}
.upgrade-tier-featured {border:4px solid var(--ink);padding:22px 18px 20px;box-shadow:0 6px 0 var(--ink);margin-bottom:6px;}
.upgrade-tier-ribbon {position:absolute;right:18px;top:-15px;border:2px solid var(--ink);border-radius:999px;padding:4px 12px;background:var(--accent);color:#fff;font-family:var(--font-display);font-size:.8rem;font-weight:900;}
.upgrade-tier-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.upgrade-tier-kicker {margin:0 0 6px;color:var(--muted);font-size:.8rem;font-weight:700;}
.upgrade-tier-heading h3 {margin:0;font-family:var(--font-display);font-size:1.75rem;font-weight:900;line-height:1.05;}
.upgrade-current-label {display:inline-block;flex:none;border:1.5px solid var(--line);border-radius:999px;padding:5px 10px;font-size:.75rem;font-weight:800;white-space:nowrap;}
.upgrade-tier-description {min-height:2.4em;margin:0;color:var(--muted);font-size:.94rem;}
.upgrade-tier-price {display:flex;flex-direction:column;gap:5px;min-height:73px;justify-content:center;}
.upgrade-tier-price strong {font-family:var(--font-display);font-size:clamp(1.65rem,6vw,2.15rem);font-weight:900;line-height:1.1;letter-spacing:-.035em;}
.upgrade-tier-price span {font-size:.82rem;color:var(--muted);}
.upgrade-tier-action .btn {width:100%;min-height:54px;}
.upgrade-tier-action .btn:disabled {cursor:default;opacity:.72;box-shadow:none;}
.upgrade-tier-includes {border-top:1.5px solid var(--line);padding-top:18px;margin-top:2px;}
.upgrade-tier-includes>p {margin:0 0 12px;font-family:var(--font-display);font-size:1rem;font-weight:900;}
.upgrade-tier-includes ul {display:grid;gap:12px;list-style:none;margin:0;padding:0;}
.upgrade-tier-includes li {display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.9rem;line-height:1.35;}
.upgrade-check {color:var(--accent-dark);font-weight:900;font-size:1.15rem;line-height:1;}
.upgrade-details {display:grid;gap:16px;margin-top:10px;}
.upgrade-details h2 {margin:0;font-size:1.45rem;}
.upgrade-detail-rows {display:grid;gap:12px;}
.upgrade-detail-rows>div {padding:17px 18px;border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--surface);}
.upgrade-detail-rows strong {display:block;margin-bottom:5px;font-family:var(--font-display);font-size:1.05rem;font-weight:900;}
.upgrade-detail-rows p {margin:0;color:var(--muted);font-size:.9rem;}
.upgrade-fineprint {font-size:.82rem;line-height:1.5;color:var(--muted);margin:2px 0 0;}
.upgrade-manage .btn {width:100%;}
.profile-subscription-action {display:grid;gap:16px;margin-top:22px;}
.profile-subscription-action .btn {width:100%;}
@media (min-width:900px) {
  /* Only this route expands the shell; the character sheet keeps its width. */
  .app-shell:has(.upgrade-page) {width:min(100%,var(--content-max));}
  .subscription-page.upgrade-page {gap:30px;padding:40px clamp(32px,4vw,64px) 80px;}
  .upgrade-intro {gap:16px;}
  .upgrade-plan-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .upgrade-tier {padding:26px 22px 24px;}
  .upgrade-tier-featured {padding:24px 20px 22px;}
  .upgrade-tier-description {min-height:4em;}
  .upgrade-details {max-width:1050px;}
  .upgrade-detail-rows {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:360px) {
  .upgrade-tier {padding:20px 16px;}
  .upgrade-tier-featured {padding:18px 14px;}
  .upgrade-tier-heading h3 {font-size:1.55rem;}
}

/* =========================================================
   CHARACTER NOTES + CUSTOMIZE
   Mobile-first. Character themes only replace semantic accent tokens inside
   the active sheet; neutral Bonfire surfaces remain unchanged.
   ========================================================= */
.notes-editor-field {
  display: grid;
  gap: 8px;
}
.notes-editor {
  width: 100%;
  min-height: 280px;
  max-height: 58vh;
  resize: vertical;
  overflow-y: auto;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  line-height: 1.5;
}
.notes-editor:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--control-shadow-accent);
}
.theme-picker {
  margin: 0;
  padding: 0;
  border: 0;
}
.theme-picker legend {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 900;
}
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.theme-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.theme-choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 3px 0 var(--accent);
}
.theme-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-swatch {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 2px solid var(--swatch);
  border-radius: 50%;
  background: var(--swatch-soft);
  box-shadow: inset 0 0 0 7px var(--swatch);
}

/* DESKTOP — 900px+ */
@media (min-width: 900px) {
  .theme-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bf-dialog-notes .bf-dialog { width: min(680px, calc(100vw - 48px)); }
}


/* =========================================================
   CHARACTER NOTES — one viewport-locked layout
   The identity and footer stay fixed; only the writing surface scrolls.
   ========================================================= */
.character-notes-page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}
.character-notes-header {
  flex: 0 0 auto;
  padding: 24px var(--sheet-gutter) 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.character-notes-header .sheet-identity { margin: 0; }
.character-notes-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.character-notes-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding: 24px 18px 0;
  overflow: hidden;
  background: var(--surface);
}
.character-notes-content h2 { margin: 0 0 14px; }
.character-notes-editor {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 0 24px;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: var(--surface);
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.character-notes-editor:focus { border: 0; outline: 0; box-shadow: none; }
.character-notes-editor::-webkit-scrollbar { width: 8px; }
.character-notes-editor::-webkit-scrollbar-track { background: transparent; }
.character-notes-editor::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.character-notes-actions {
  display: flex;
  position: static;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 0;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
@media (max-width: 899px) {
  .character-notes-header .class-lines { margin: 0 0 4px; }
  .character-notes-header .sheet-identity h1 { margin: 0; line-height: 1.05; }
  .character-notes-header .sheet-avatar { width: 58px; height: 58px; min-width: 58px; min-height: 58px; }
}
/* DESKTOP — 900px+ */
@media (min-width: 900px) {
  .character-notes-header,
  .character-notes-content,
  .character-notes-actions {
    padding-left: max(32px, calc((100% - var(--content-max)) / 2));
    padding-right: max(32px, calc((100% - var(--content-max)) / 2));
  }
}

/* Shared character-sheet content spacing (mobile first). */
.proficiency-display-grid > .proficiency-language-row { grid-column: 1 / -1; }
.page-edit-background-core { display: grid; gap: 16px; }
.page-edit-background-copy { display: grid; gap: 20px; }
.normal-background-view { display: grid; gap: 18px; }
.normal-background-view .background-summary-row { margin-bottom: 4px; }

/* Sheet feature cards show their complete short summaries, as in Creation. */
.features-tab .info-card-copy,
.page-edit-feature-cards .info-card-copy {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Health action chooser — shared responsive dialog, equal secondary actions. */
.health-action-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.health-action-choices > .btn { width: 100%; min-width: 0; }

/* Companions — Bonfire v159 */
/* Companions: reuse the sheet header, content, tabs, stat cards and field components. */
.comp-sheet-page { min-height:100%; }
.comp-sheet-page .sheet-content { overflow-y:auto; }
.comp-top-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.comp-muted { color:var(--text-muted); margin:5px 0 18px; }
.comp-list { display:grid; gap:12px; margin:20px 0; }
.comp-card { display:flex; align-items:center; gap:14px; width:100%; padding:14px; border:1px solid var(--line); border-radius:var(--radius-md,16px); background:var(--surface); text-align:left; font:inherit; color:inherit; cursor:pointer; }
.comp-card-copy { display:flex; flex:1; flex-direction:column; gap:4px; }
.comp-card-copy small { color:var(--text-muted); }
.comp-empty { padding:24px; border:1px dashed var(--line); border-radius:16px; }
.comp-companion-identity { display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.comp-companion-identity h2,.comp-companion-title h2 { margin:0 0 8px; }
.comp-companion-title { margin-bottom:18px; }
.comp-hp-actions,.comp-form-actions { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0; }
.comp-detail-section { margin-top:24px; }
.comp-notes-read { white-space:pre-wrap; overflow-wrap:anywhere; }
.comp-form { display:grid; gap:16px; }
.comp-form .sheet-tabs { margin-bottom:12px; }
.comp-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.comp-edit-pane { display:grid; gap:16px; min-width:0; }
.comp-edit-pane[hidden] { display:none !important; }
.comp-editor-area { display:grid; gap:12px; }
.comp-portrait-editor { display:flex; align-items:center; gap:16px; }
.comp-portrait-editor .field { flex:1; min-width:0; }
.comp-movement-list { display:grid; gap:10px; }
.comp-movement-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px; align-items:end; }
.comp-toggle { display:flex; align-items:center; gap:10px; }
.comp-ability-mod { font-size:13px; color:var(--text-muted); }
@media(max-width:600px) { .comp-movement-row { gap:6px; } .comp-portrait-editor { align-items:flex-start; } }

/* Companion creation reuses Character Creation's native shell and spacing. */
.companion-creator-page .companion-creator-form { display: contents; }
.companion-creator-page .creator-content { min-width: 0; }
.companion-creator-page .creator-footer { justify-content: flex-end; }

/* Companion creation: align spacing with character creator */
.companion-creator-page .comp-overview-name { margin-bottom: 18px; }
.companion-creator-page .movement-creator { margin-top: 22px; }
.companion-creator-page .comp-portrait-editor { margin-bottom: 12px; }
.companion-creator-page .creator-movement-cards { align-items: stretch; }
.companion-creator-page .comp-action-entry { margin-bottom: 12px; }

/* Companion sheet: preserve owner header and use a separate companion summary card. */
.companion-creator-page .comp-overview-name { display:grid; gap:18px; }
.companion-creator-page .creator-tab.has-data:not(.is-active) { border-bottom-color:var(--text); font-weight:700; }
@media(max-width:450px){.companion-summary-card{padding:12px}.companion-summary-stats{gap:7px}.companion-summary-stats span{font-size:12px}.companion-summary-stats strong{font-size:16px}}

.companion-creator-page [data-comp-add-attack] { display:block; margin:14px auto; text-align:center; }
.companion-creator-page .comp-feature-helper { border-top:1px solid var(--line); padding-top:18px; margin:10px 0 4px; }

/* Companion sheet: fixed identity + draggable sheet card; only tab content scrolls. */
.comp-sheet-page:has(> .companion-sheet-header) {display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;}
.comp-sheet-page > .comp-owner-header {position:relative;flex:none;min-height:0;padding:16px var(--sheet-gutter) 0;z-index:2;}
.comp-sheet-page > .comp-owner-header .sheet-identity {margin-bottom:12px;}
.comp-sheet-page > .companion-sheet-header {position:relative;top:auto;flex:none;z-index:121;min-height:0;margin:0;padding:14px var(--sheet-gutter) 0;touch-action:pan-x;}
.comp-sheet-page > .sheet-content {flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0;}
.comp-sheet-page .companion-sheet-identity {display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.comp-sheet-page .companion-sheet-identity h1 {font-size:24px;line-height:1.15;margin:0;}
.comp-sheet-page .companion-sheet-identity .sheet-character-title {margin:3px 0 0;}
.comp-sheet-page .companion-sheet-identity .sheet-avatar {width:54px!important;height:54px!important;flex:0 0 54px;border-radius:50%;overflow:hidden;}
.comp-sheet-page .companion-sheet-identity .sheet-avatar img {width:100%;height:100%;object-fit:cover;}
.comp-sheet-page .comp-mode-trigger {margin-left:auto;border:0;background:transparent;padding:8px;cursor:pointer;}
.comp-sheet-page .comp-feature-open,.comp-sheet-page .comp-page-feature {display:block;width:100%;border:0;background:none;text-align:left;padding:0;cursor:pointer;}
.comp-sheet-page .comp-detail-section {margin-top:16px;}
.comp-sheet-page .comp-inline-page {display:grid;gap:14px;padding:20px var(--sheet-gutter);}
.comp-sheet-page .comp-page-ability-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.comp-sheet-page .comp-page-toggle,.comp-sheet-page .comp-page-skill {display:flex;justify-content:space-between;align-items:center;gap:12px;}
.comp-sheet-page .comp-page-skill select {max-width:150px;}
.comp-sheet-page .sheet-header-quick .qe-hit-dice {display:none;}
.comp-sheet-page .sheet-content.is-quick-dimmed {pointer-events:none;user-select:none;}
.comp-sheet-page .sheet-header-quick {z-index:121;}
.comp-sheet-page .sheet-content > h2 {margin:24px var(--sheet-gutter);}
.comp-sheet-page .comp-top-actions {padding:18px var(--sheet-gutter) 0;}
.comp-sheet-page .comp-list,.comp-sheet-page .comp-muted,.comp-sheet-page .comp-empty {margin-left:var(--sheet-gutter);margin-right:var(--sheet-gutter);}

/* Companion sheet v159.3: owner + companion card stay fixed; only tabs scroll. */
.app:has(.comp-sheet-page) {height:calc(100dvh - var(--mobile-nav-height, 0px));min-height:0;overflow:hidden;padding-bottom:0;}
.app:has(.comp-sheet-page) > .comp-sheet-page {height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.comp-sheet-page::before {display:none!important;}
.comp-sheet-page > .comp-owner-header {flex:0 0 auto;position:relative!important;z-index:123;padding-bottom:0;background:var(--surface);}
.comp-sheet-page > .companion-sheet-header {flex:0 0 auto;position:relative!important;top:0!important;transform:translateY(var(--card-drag-y, 0px));margin:0;z-index:122;background:var(--surface);}
.comp-sheet-page > .sheet-content {flex:1 1 0;min-height:0;overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain;}
.comp-sheet-page .sheet-header-page.companion-sheet-header .sheet-summary-hp {display:none;}
.comp-sheet-page .companion-sheet-header .sheet-summary-hp {margin-top:4px;margin-bottom:6px;}
.comp-sheet-page .companion-sheet-header .sheet-summary-grid {margin-top:4px;margin-bottom:6px;}
.comp-sheet-page .companion-sheet-header .qe-shell {gap:8px;}
.comp-sheet-page .companion-sheet-header .qe-row {row-gap:8px;}
.comp-sheet-page .companion-sheet-header .qe-field {margin-block:0;}
.comp-sheet-page .companion-sheet-header .sheet-pull-handle {touch-action:none;}
.comp-sheet-page .companion-tab-body .page-edit-section {padding:0;}
.comp-sheet-page .companion-tab-body .page-edit-ability-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (max-width:600px) {.app:has(.comp-sheet-page) {height:calc(100dvh - var(--mobile-nav-height, 0px));}}

/* v159.4 companion sheet layout and tag parity */
.comp-sheet-page > .comp-owner-header {border-bottom:1px solid var(--border, #d3d3cf);}
.comp-sheet-page .companion-tag {display:block!important;min-height:1em;font-size:13px;color:var(--text-muted,#6f6f6a);}
.comp-sheet-page .companion-tab-body {padding-inline:var(--sheet-gutter);}
.comp-sheet-page .companion-tab-body {padding-bottom:max(44px,env(safe-area-inset-bottom));}
.comp-sheet-page .comp-page-tag-form {display:grid;gap:20px;margin-top:24px;}
.comp-sheet-page .comp-page-tag-form .tag-field {margin:0;}
.comp-sheet-page .comp-page-tag-form .comp-feature-helper {margin:0 0 2px;}
@media(max-width:600px){.app:has(.comp-sheet-page){height:100dvh!important;}.comp-sheet-page>.sheet-content{padding-bottom:env(safe-area-inset-bottom)!important;}}

/* v159.5 — Companion sheet polish; scoped to companions only. */
.comp-sheet-page .companion-tag {font-size:15px;line-height:1.4;margin-top:4px;}
.comp-sheet-page .companion-tab-body {padding-top:36px;}
.comp-sheet-page .companion-tab-body .sense-list {margin-top:12px;}
.comp-sheet-page .companion-tab-body .sheet-section-heading {margin-top:26px;}
.comp-sheet-page .companion-skills-divider {height:22px;}
.comp-sheet-page [data-companion-menu] {cursor:pointer;}
@media(max-width:600px) {
 .comp-sheet-page .companion-tab-body {padding-top:34px;}
}

/* v159.6 — Companion interaction corrections */
.comp-sheet-page .companion-avatar-popover {
  position:absolute;
  top:calc(100% + 8px);
  left:0!important;
  right:auto!important;
  transform:none!important;
}
.comp-sheet-page .comp-detail-heading {
  font-size:0.875rem;
  font-weight:600;
  line-height:1.35;
  margin:0 0 8px;
}
.comp-sheet-page .comp-detail-section { margin-top:20px; }
.comp-sheet-page .comp-readonly-tags {gap:6px;}
.comp-sheet-page .comp-readonly-tags .tag {white-space:normal;}

/* v159.7 — management cards reuse the character overview card. */
.comp-sheet-page .comp-list {margin-top:10px;gap:12px;}
.comp-sheet-page .comp-manage-card {width:100%;min-height:94px;box-sizing:border-box;}
.comp-sheet-page .comp-manage-card.is-quick-switch {border:3px solid var(--ink, #353535);padding:12.5px;}
.comp-sheet-page .comp-manage-card .character-copy h3 {font-weight:750;}
.comp-sheet-page .comp-manage-card .character-actions {flex-shrink:0;}
.comp-sheet-page .comp-manage-group-gap {height:20px;}

/* v159.8 companion management layout */
.comp-sheet-page .sheet-content:not(:has(.companion-tab-body)) > h2 {margin-top:8px;margin-bottom:2px;}
.comp-sheet-page .sheet-content:not(:has(.companion-tab-body)) > .comp-muted {margin-top:0;margin-bottom:6px;}
.comp-sheet-page .comp-manage-create-actions {margin:16px var(--sheet-gutter) 24px;}
.comp-sheet-page .comp-manage-create-actions > .btn,
.comp-sheet-page .comp-manage-create-actions .character-limit-message > .btn {width:100%;box-sizing:border-box;}
.comp-sheet-page .comp-manage-create-actions .character-limit-message {text-align:center;}

/* v159.9: companion pull handle uses the SAME geometry as the main sheet.
   Scope to companion to avoid changing existing main character behavior. */
@media (max-width:899px) {
  .comp-sheet-page .companion-sheet-header .sheet-pull-handle {
    bottom: -34px;
    height: 34px;
  }
  .comp-sheet-page .companion-sheet-header .sheet-pull-handle::before {
    height: 22px;
  }
}

/* v161.1 — Upgrade page refinements */
.upgrade-page-header h1 {font-size:1.125rem;line-height:1.25;font-weight:900;}
.upgrade-page-header {margin-bottom:0;}
.upgrade-tier-price {min-height:73px;}
@media (min-width:900px) {
  /* .app is the scrolling element on desktop; sticky must remain inside it. */
  .upgrade-page-header {
    position:sticky;
    top:0;
    z-index:20;
    background:var(--bg);
    padding:14px 0;
    margin-top:-14px;
  }
}

/* v162 — Profile redesign. Reuses existing button, bottom-sheet and spacing tokens. */
.profile-page-v162 {display:grid;align-content:start;gap:22px;padding-bottom:calc(var(--mobile-nav-height) + 48px);}
.profile-page-v162 .profile-page-header {margin-bottom:0;}
.profile-page-v162 .profile-page-header h1 {font-size:1.125rem;line-height:1.25;font-weight:900;}
.profile-page-v162 .profile-round-back {width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);padding:0;flex:none;}
.profile-page-v162 .profile-round-back svg {width:19px;height:19px;}
.profile-page-v162 .profile-plan-card {border:1.5px solid var(--line);border-radius:var(--radius-lg,24px);background:var(--surface);padding:22px;display:grid;gap:12px;}
.profile-page-v162 .profile-plan-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.profile-page-v162 .profile-kicker {font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--muted);margin:0 0 6px;}
.profile-page-v162 .profile-plan-card h2 {font-family:Nunito,sans-serif;font-size:24px;margin:0;line-height:1.2;}
.profile-page-v162 .profile-plan-card > p {margin:0;color:var(--muted);font-size:14px;}
.profile-page-v162 .profile-account-section {display:grid;gap:8px;}
.profile-page-v162 .profile-account-section h2 {font-family:Nunito,sans-serif;font-size:21px;margin:6px 0 8px;}
.profile-page-v162 .profile-info-list {display:grid;}
.profile-page-v162 .profile-info-row {padding:17px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;}
.profile-page-v162 .profile-info-value {display:grid;gap:5px;min-width:0;overflow-wrap:anywhere;}
.profile-page-v162 .profile-info-label {font-size:13px;color:var(--muted);}
.profile-page-v162 .profile-info-value strong {font-size:16px;font-weight:600;color:var(--ink);}
.profile-page-v162 .profile-info-row .btn-tertiary {flex:none;}
.profile-page-v162 .profile-danger-zone {margin-top:8px;}
.profile-dialog-note {font-size:14px;color:var(--muted);margin:0 0 16px;}
@media (min-width:900px) {
  .profile-page-v162 {gap:28px;padding:40px clamp(32px,4vw,64px) 80px;}
  .profile-page-v162 .profile-page-header {position:sticky;top:0;z-index:20;background:var(--bg);padding:14px 0;margin-top:-14px;}
  .profile-page-v162 .profile-account-section {max-width:760px;}
}

/* Profile controls — v162.3; replaces superseded v162.1 / v162.2 overrides. */
.profile-round-back.stepper-button {
  width:34px;
  height:34px;
  padding:0;
  flex:none;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  box-shadow:0 4px 0 var(--ink);
  display:grid;
  place-items:center;
}
.profile-round-back.stepper-button svg,
.profile-round-back.stepper-button .bf-icon {width:18px;height:18px;}
.profile-round-back.stepper-button:active,
.profile-round-back.stepper-button.is-pressed:not(:disabled) {
  transform:translateY(4px);
  box-shadow:none;
}
.profile-page-v162 .profile-plan-heading {justify-content:flex-start;}
.profile-page-v162 .profile-plan-action {width:100%;justify-self:stretch;margin-top:6px;}
.profile-page-v162 .profile-plan-action .btn-secondary {width:100%;}
.profile-page-v162 .profile-info-list {display:grid;gap:18px;}
.profile-page-v162 .profile-info-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px;
  gap:12px;
  align-items:end;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.profile-page-v162 .profile-readonly-field {display:grid;gap:7px;min-width:0;}
.profile-page-v162 .profile-readonly-field > span {font-size:1rem;font-weight:500;color:var(--ink);}
.profile-page-v162 .profile-readonly-field > input {
  width:100%;min-width:0;min-height:43px;box-sizing:border-box;
  padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);
  box-shadow:none;color:var(--ink);font:inherit;text-overflow:ellipsis;cursor:default;
}
.profile-page-v162 .profile-info-row .btn-tertiary {
  justify-self:end;align-self:end;min-height:43px;display:flex;
  align-items:center;justify-content:flex-end;
  width:100%;padding:0 2px;white-space:nowrap;
}
.profile-page-v162 .profile-row-action-spacer {display:block;width:72px;}
.profile-page-v162 .profile-danger-zone {
  display:flex;
  justify-content:flex-end;
  margin-top:44px;
  padding-bottom:12px;
}
@media(min-width:900px) {
  .profile-page-v162 .profile-info-list {gap:18px;}
  .profile-page-v162 .profile-info-row {grid-template-columns:minmax(0,1fr) 84px;}
  .profile-page-v162 .profile-row-action-spacer {width:84px;}
}


/* Bonfire v163 — Settings and Billing. Scoped to new pages. */
.bf-settings-page {display:grid;align-content:start;gap:25px;padding-bottom:76px;}
.bf-settings-page .bf-settings-header {margin-bottom:0;}
.bf-settings-header h1 {font-size:1.125rem;line-height:1.25;font-weight:900;}
.bf-settings-section {display:grid;gap:16px;min-width:0;}
.bf-settings-section h2 {font-family:var(--font-display);font-size:1.3rem;margin:0;}
.bf-settings-section p,.bf-settings-link p {color:var(--muted);font-size:.9rem;line-height:1.5;margin:3px 0 0;}
.bf-setting-row {display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0;padding:2px 0 10px;}
.bf-setting-row strong,.bf-settings-link strong {font-size:1rem;}
.bf-setting-stack {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;justify-items:stretch;}
.bf-settings-link:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
.bf-settings-muted {color:var(--muted);font-size:.88rem;line-height:1.5;}
.bf-settings-link {display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;border:1.5px solid var(--line);border-radius:var(--radius-md);padding:17px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;}
.bf-settings-link svg {width:20px;height:20px;flex:none;}
.bf-settings-empty {background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-md);padding:18px;line-height:1.5;color:var(--muted);}
.bf-settings-empty strong {color:var(--ink);}
.bf-settings-section .btn-secondary,.bf-settings-section .btn-primary {width:100%;}
.bf-billing-preview {font-size:.8rem;font-weight:700;color:var(--muted);text-align:center;}
.bf-settings-page .profile-plan-card {gap:15px;}
.bf-settings-page .profile-plan-card h2 {font-size:1.55rem;}
.bf-billing-rows {display:grid;gap:12px;margin:12px 0;}
.bf-billing-rows>div {display:flex;justify-content:space-between;gap:18px;font-size:.9rem;}
.bf-billing-rows span {color:var(--muted);}
.bf-settings-select-label {font-size:.9rem;font-weight:600;}
.bf-settings-select {width:100%;min-width:0;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);padding:12px;font:inherit;}
.bf-export-note {font-size:.8rem!important;}
@media(min-width:900px){.bf-settings-page {max-width:780px;margin:0 auto;width:100%;}}
/* Text size affects the app's rem-based type scale; layout remains responsive. */
html[data-bf-text-size="small"] {font-size:15px;}
html[data-bf-text-size="default"] {font-size:16px;}
html[data-bf-text-size="large"] {font-size:17px;}
html[data-bf-text-size="extra-large"] {font-size:18px;}
@media(prefers-reduced-motion:reduce){html:not([data-bf-motion="off"]) *,html:not([data-bf-motion="off"]) *::before,html:not([data-bf-motion="off"]) *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* v163.1 — Shared appearance settings and inline export. */
/* v164: Full-width text size slider, markers and no lifted shadow. */
.bf-text-size-control {display:block;box-sizing:border-box;width:100%;min-width:0;max-width:none;padding:12px 0 4px;}
.bf-text-size-control input[type="range"] {
  display:block;box-sizing:border-box;width:100%;min-width:0;max-width:none;height:28px;margin:0;padding:0;
  appearance:none;-webkit-appearance:none;cursor:pointer;touch-action:pan-y;
  background:transparent;border:0;box-shadow:none;outline-offset:5px;
}
.bf-text-size-control input[type="range"]::-webkit-slider-runnable-track {
  height:6px;border-radius:99px;background:var(--line);box-shadow:none;
}
.bf-text-size-control input[type="range"]::-moz-range-track {
  height:6px;border-radius:99px;background:var(--line);box-shadow:none;
}
.bf-text-size-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;
  border:3px solid var(--ink);border-radius:50%;background:var(--accent);box-shadow:none;
}
.bf-text-size-control input[type="range"]::-moz-range-thumb {
  width:16px;height:16px;border:3px solid var(--ink);border-radius:50%;
  background:var(--accent);box-shadow:none;
}
.bf-slider-ticks {display:flex;justify-content:space-between;align-items:start;margin:-3px 9px 0;pointer-events:none;}
.bf-slider-ticks span {width:2px;height:9px;background:var(--muted);border-radius:2px;}
.bf-text-size-labels {display:flex;justify-content:space-between;gap:6px;margin-top:10px;font-size:.75rem;color:var(--muted);}
/* High contrast switch: SVG-based geometry, shared for both states. */
.bf-switch {
  display:inline-block;
  position:relative;
  flex:none;
  width:49px;
  height:32px;
  cursor:pointer;
  vertical-align:middle;
}
.bf-switch input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  margin:0;
  cursor:pointer;
  z-index:2;
}
.bf-switch-track {
  display:block;
  position:absolute;
  left:2px;
  top:10px;
  width:45px;
  height:20px;
  box-sizing:border-box;
  border:2px solid var(--ink);
  border-radius:10px;
  background:var(--surface);
  transition:background-color 180ms ease-out;
}
.bf-switch-thumb {
  position:absolute;
  left:-3px;
  top:-11px;
  width:24px;
  height:28px;
  box-sizing:border-box;
  border-radius:12px;
  background:var(--ink);
  transform:translateX(0);
  transition:transform 390ms cubic-bezier(.25,.1,.17,1.12);
}
.bf-switch-thumb::after {
  content:"";
  position:absolute;
  left:1px;
  top:1px;
  width:22px;
  height:22px;
  box-sizing:border-box;
  border:2px solid var(--ink);
  border-radius:11px;
  background:var(--surface);
  transition:background-color 180ms ease-out;
}
.bf-switch input:checked + .bf-switch-track {background:var(--accent);}
/* 45px track minus 24px thumb; same overhang at both ends. */
.bf-switch input:checked + .bf-switch-track .bf-switch-thumb {transform:translateX(21px);}
.bf-switch input:checked + .bf-switch-track .bf-switch-thumb::after {background:var(--accent);}
.bf-switch input:focus-visible + .bf-switch-track {outline:3px solid var(--accent);outline-offset:4px;}
.bf-switch input:disabled + .bf-switch-track {opacity:.5;}
@media (prefers-reduced-motion:reduce) {
  .bf-switch-track,.bf-switch-thumb,.bf-switch-thumb::after {transition:none!important;}
}
.bf-export-section .custom-select-field {min-width:0;}
.bf-settings-version {margin-top:16px;text-align:center;color:var(--muted);font-size:.8rem;}
html[data-bf-contrast="high"] {
  --ink:#171717;
  --muted:#424242;
  --line:#515151;
  --placeholder:#525252;
}
html[data-bf-contrast="high"] :focus-visible {outline:3px solid #156d50;outline-offset:2px;}

/* v164.1: range inputs are not lifted text fields. */
.bf-settings-page input[type="range"],
.bf-settings-page input[type="range"].text-input,
.bf-settings-page input[type="range"].text-input.is-pressed,
.bf-settings-page input[type="range"].text-input.is-editing {
  display:block;
  width:100%;
  min-width:0;
  min-height:0;
  height:28px;
  padding:0;
  margin:0;
  box-sizing:border-box;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
  transition:none;
  -webkit-appearance:none;
  appearance:none;
}

/* v165 — Low-profile, viewport-fixed beta build indicator.
   Intentionally outside .app-shell to avoid clipping/scrolling. */
.beta-build-indicator {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--line, #D3D3CF);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink, #343434);
  font: 700 11px/1.1 "DM Sans", sans-serif;
  letter-spacing: .01em;
  pointer-events: none;
  box-shadow: 0 2px 7px rgb(0 0 0 / .06);
}
.beta-build-indicator__dot {width:6px;height:6px;border-radius:50%;background:var(--accent,#2FA47E);}
.beta-build-indicator__version {font-weight:500;color:var(--muted,#6F6F6A);}
body.has-bottom-navigation .beta-build-indicator {
  bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
}
@media(max-width:480px) {
  .beta-build-indicator {right: max(10px, env(safe-area-inset-right));}
}

/* v165.1 — Persistent warning for genuine cross-device character conflicts */
.bf-save-conflict {position:fixed;z-index:20000;left:12px;right:12px;top:max(12px,env(safe-area-inset-top,0px));max-width:600px;margin:auto;padding:13px 15px;border:2px solid #923b32;border-radius:12px;background:#fff6f0;color:#64251f;box-shadow:0 6px 20px #0002;font:500 13px/1.5 "DM Sans",sans-serif;}
.bf-save-conflict button {font:700 12px "DM Sans",sans-serif;margin-left:8px;padding:5px 11px;border-radius:8px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;}

/* v165.2: save status reports sync acknowledgment rather than guessing from local state. */
.bf-save-status { position:fixed; z-index:1100; left:max(12px,env(safe-area-inset-left)); bottom:max(12px,env(safe-area-inset-bottom)); padding:6px 10px; border:1px solid var(--line,#d3d3cf); border-radius:999px; background:var(--surface,#fff); color:var(--ink,#343434); box-shadow:0 2px 7px #0001; font:600 11px/1.3 "DM Sans",sans-serif; pointer-events:none; }
body.has-bottom-navigation .bf-save-status { bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0px) + 12px); }
.bf-save-status[data-status="offline"], .bf-save-status[data-status="error"] { border-color:#aa5247; color:#87362f; }
.bf-save-status[data-status="saving"] { color:var(--muted,#676767); }
.bf-save-status[hidden] { display:none; }