/* Read-only shared character view */
body.aspire-read-only-view #saveBtn,
body.aspire-read-only-view #editChoicesBtn,
body.aspire-read-only-view #menuBtn,
body.aspire-read-only-view #backToSheetBtn,
body.aspire-read-only-view #changeEdition,
body.aspire-read-only-view #stepsMenu,
body.aspire-read-only-view #screen-edition,
body.aspire-read-only-view .edition-load,
body.aspire-read-only-view #step-class,
body.aspire-read-only-view #step-background,
body.aspire-read-only-view #step-species,
body.aspire-read-only-view #step-abilities,
body.aspire-read-only-view #step-equipment,
body.aspire-read-only-view #step-spells {
  display: none !important;
}

body.aspire-read-only-view #screen-build {
  display: block !important;
}

body.aspire-read-only-view #screen-build.hidden {
  display: block !important;
}

body.aspire-read-only-view #step-sheet {
  display: block !important;
}

body.aspire-read-only-view #screen-build input,
body.aspire-read-only-view #screen-build select,
body.aspire-read-only-view #screen-build textarea,
body.aspire-read-only-view #screen-build button:not(.theme-icon-toggle):not(#pdfBtn) {
  pointer-events: none;
}

body.aspire-read-only-view #screen-build input,
body.aspire-read-only-view #screen-build select,
body.aspire-read-only-view #screen-build textarea {
  opacity: 0.92;
}

/* Narrow phone layout (320-430px) */
@media (max-width: 430px) {
  html,
  body {
    overflow-x: clip;
  }

  .aspire-site-nav {
    padding: 0.45rem 0.65rem;
  }

  .aspire-site-nav-inner {
    gap: 0.25rem 0.45rem;
  }

  .aspire-site-nav-brand {
    font-size: 0.92rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .aspire-site-nav-link,
  .aspire-site-nav-browse-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .aspire-site-nav-signout,
  .aspire-site-nav-signin {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }

  .aspire-site-nav-theme.icon-btn,
  .theme-icon-toggle {
    min-width: 40px;
    min-height: 40px;
  }

  .aspire-main {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    max-width: 100%;
    box-sizing: border-box;
  }

  .aspire-toolbar {
    gap: 0.4rem;
  }

  .aspire-btn,
  .aspire-btn.ghost,
  .aspire-btn.danger,
  .btn,
  .btn.ghost {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .aspire-char-list .aspire-btn.danger,
  .aspire-char-list .aspire-btn[data-testid="char-share-btn"],
  .aspire-char-list [data-testid="char-share-btn"],
  .aspire-char-list [data-testid="char-copy-share-btn"],
  .aspire-char-list [data-testid="char-revoke-share-btn"] {
    min-height: 44px;
    min-width: 44px;
  }

  .aspire-char-list li {
    gap: 0.4rem;
  }

  .aspire-char-list .aspire-btn {
    flex: 1 1 calc(50% - 0.4rem);
    min-width: 0;
  }

  .home-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-tile,
  .ref-card {
    min-width: 0;
    max-width: 100%;
  }

  .reference-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .wrap {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    max-width: 100%;
    box-sizing: border-box;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  .topbar .edition-tag {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .topbar .icon-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .back-to-sheet-btn .btn-label {
    display: none;
  }

  .back-to-sheet-btn.has-ico {
    padding: 6px 9px;
  }

  .autosave-status {
    max-width: min(10rem, 42vw);
    flex: 0 1 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .steps {
    max-width: 100%;
  }

  input[type="text"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    min-height: 40px;
    box-sizing: border-box;
  }

  .eq-opt,
  .opt-toggle,
  .sp-row {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 0;
    min-height: 0;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .spell-lvl-pips .pip,
  .sheet-hd-pips .pip,
  .slot-line .pip {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .hamburger {
    min-width: 40px;
    min-height: 40px;
  }

  .sp-seg button {
    min-height: 40px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-sizing: border-box;
  }

  .sp-lchip {
    min-width: 40px;
    min-height: 40px;
    width: auto;
    height: auto;
    box-sizing: border-box;
  }

  .sp-clear {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    box-sizing: border-box;
  }

  .aspire-site-nav-account-inner {
    display: none;
  }

  .aspire-site-nav-account-btn {
    display: inline-flex;
  }
}

/* Tablet / mid widths between phone and desktop (about 431px to 900px) */
@media (min-width: 431px) and (max-width: 900px) {
  .aspire-site-nav-inner {
    gap: 0.35rem 0.5rem;
  }

  .aspire-site-nav-brand {
    font-size: 0.95rem;
    max-width: min(100%, 12rem);
  }

  .aspire-site-nav-link,
  .aspire-site-nav-browse-btn {
    padding: 0.35rem 0.45rem;
    font-size: 0.85rem;
  }

  .aspire-site-nav-user {
    max-width: 8rem;
  }

  .wrap,
  .aspire-main {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    box-sizing: border-box;
    max-width: 100%;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar .edition-tag {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .wizard-nav {
    flex-wrap: wrap;
    gap: 10px;
  }

  .wizard-nav .btn {
    flex: 1 1 calc(50% - 12px);
    min-width: 0;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  .sheet-head-layout {
    gap: 12px;
  }

  .sheet-id-grid {
    gap: 6px 10px;
  }
}