/* Shared Warcraft-inspired finishes. Loaded after the component styles so
   public plans, sign-in and the portal use the same frames and controls. */
body {
  background-color: var(--bg-primary);
  background-image: var(--surface-grain);
}

h1,
h2,
h3,
h4,
h5,
h6,
.planner-brand > span {
  font-family: var(--font-heading);
  font-weight: 600;
}
h1 {
  color: var(--text-warm);
}
.planner-shell h1,
.shared-shell h1 {
  letter-spacing: 0.01em;
}
.eyebrow {
  color: var(--accent);
  letter-spacing: 0.16em;
}

.planner-header {
  background-color: var(--bg-secondary);
  background-image: var(--surface-stone);
  border-bottom-color: var(--border-warm);
}
.planner-brand > span {
  color: var(--text-warm);
  letter-spacing: 0.025em;
}
.planner-brand small {
  color: var(--brown);
  font-family: var(--font-heading);
  text-shadow: none;
}
.planner-brand img {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 65%));
}
.nav-link,
.manager-link,
.mobile-nav-toggle {
  border-radius: 5px;
}
.nav-dropdown,
.profile-dropdown {
  background-image: var(--surface-stone);
  border-color: var(--border-warm);
  border-top-color: var(--border-warm);
  border-radius: 6px;
}

.button {
  border-radius: 4px;
  background-image: none;
  box-shadow: none;
  font-weight: 650;
  letter-spacing: 0.015em;
}
.button.primary {
  border-color: var(--accent);
}

input:where(:not([type='checkbox'], [type='radio'], [type='range'], [type='color'])),
select,
textarea {
  background-color: var(--bg-inset);
  border-radius: 5px;
  box-shadow: none;
}
input:not([type='checkbox']):not([type='radio']):focus,
select:focus,
textarea:focus {
  border-color: transparent;
  outline: 2px solid var(--focus-ring);
  outline-offset: -1px;
  box-shadow: none;
}

.panel,
.dash-card,
.raid-plan-row,
.raid-plan-card,
.encounter-plan-row,
.template-card,
.character-card,
.profile-summary-card,
.prof-card,
.prof-overview-search,
.prof-stat,
.prof-character-card,
.bank-card,
.guild-role-column,
.comp-group,
.gear-paperdoll-panel,
.gear-drawer-panel,
.gear-stats-section {
  background-image: var(--surface-stone);
  border-radius: 7px;
  box-shadow: var(--frame-shadow);
}
.raid-plan-row .raid-plan-card {
  background-image: none;
  box-shadow: none;
}

.panel-header,
.dash-card > header,
.dashboard-grid > .dash-card > header,
.guild-role-column > header,
.comp-group > header,
.gear-drawer-header,
.talent-tree-header,
.modal-heading {
  background-color: var(--bg-warm);
  background-image: var(--surface-leather);
  border-bottom-color: var(--border-warm);
}
.panel-header h2,
.dash-card > header h2,
.guild-role-column h2,
.comp-group h2,
.modal-heading h2 {
  color: var(--text-warm);
  letter-spacing: 0.015em;
}
.guild-role-column > header,
.comp-group > header {
  border-radius: 6px 6px 0 0;
}

.dashboard-header {
  position: relative;
  background-color: var(--bg-warm);
  background-image: linear-gradient(105deg, transparent, var(--bg-card) 85%), var(--surface-leather);
  border-radius: 7px;
  box-shadow: var(--frame-shadow);
}
.dashboard-header::before,
.dashboard-header::after {
  content: none;
}
.dashboard-highlight,
.dashboard-module-icon {
  border-radius: 5px;
  box-shadow: var(--frame-shadow);
}
.dashboard-portrait {
  border-color: var(--border-warm);
}

.manager-tabs,
.profile-tabs-nav,
.gear-planner-header,
.talent-builder-header {
  background-image: var(--surface-leather);
  border-color: var(--border-warm);
  border-radius: 7px;
  box-shadow: var(--frame-shadow);
}
.manager-tabs [role='tab'] {
  border-radius: 4px;
}
.manager-tabs [aria-selected='true'] {
  box-shadow: inset 2px 0 var(--accent);
}

.modal,
.login-card,
.setup-shell {
  background-color: var(--bg-card);
  background-image: var(--surface-stone);
  border-color: var(--border-warm);
  border-radius: 8px;
  box-shadow: 0 20px 65px rgb(0 0 0 / 60%);
}
.modal {
  outline: none;
}
.modal:focus-visible {
  border-color: var(--focus-ring);
}
.login-card > img {
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 60%));
}
.spell-tooltip,
.prof-catalog-tooltip,
.bank-tooltip,
.gear-tooltip,
.talent-tooltip {
  background-color: var(--bg-inset);
  background-image: var(--surface-stone);
  border-color: var(--border-warm);
  border-radius: 5px;
}