/* Base styles — tablet-first per SRS WEB-1: generous touch targets, room to
   grow into per-page layouts. Not final visual design, just a starting
   point (Technical_Design.md §8). */

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-border: #dddddd;
  --color-accent: #7a3b2e; /* placeholder, not final branding */
  --spacing-unit: 0.5rem;
  --touch-target-min: 44px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

button,
input,
select {
  min-height: var(--touch-target-min);
  font-size: 1rem;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-unit);
  padding: calc(var(--spacing-unit) * 2);
  border-bottom: 1px solid var(--color-border);
}

.app-header h1 {
  margin: 0;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2);
}

main {
  padding: calc(var(--spacing-unit) * 2);
  max-width: 40rem;
  margin: 0 auto;
}

/* One entry-page-per-feature convention (Technical_Design.md §8): forms and
   list rows across pages share this card look rather than each page
   inventing its own. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit);
  padding: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-page {
  display: flex;
  justify-content: center;
}

.auth-page .card {
  width: 100%;
  max-width: 24rem;
}

label {
  font-weight: 600;
}

input,
textarea,
select {
  width: 100%;
  padding: var(--spacing-unit);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  font-family: inherit;
}

button {
  padding: 0 calc(var(--spacing-unit) * 2);
  border: none;
  border-radius: 0.25rem;
  background: var(--color-accent);
  color: #ffffff;
  cursor: pointer;
}

button.remove-button {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.form-error {
  color: #b3261e;
}

.campaign-dm-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.85rem;
}

.member-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--spacing-unit);
}

.member-form label {
  flex-basis: 100%;
}

.member-form input {
  width: auto;
  flex: 1;
  min-width: 8rem;
}

/* character.html has more going on per section than the list/form pages
   above — a bit more room keeps the ability-score grid and skill table
   from feeling cramped, still well short of anything desktop-only. */
.sheet-page {
  max-width: 60rem;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 2);
}

.sheet-header h2 {
  margin: 0;
}

.ability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  gap: var(--spacing-unit);
  align-items: end;
}

.ability-grid label {
  display: block;
  text-align: center;
}

.ability-grid button {
  grid-column: 1 / -1;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-unit);
}

.inline-form label {
  font-weight: normal;
}

.inline-form input,
.inline-form select {
  width: auto;
  flex: 1;
  min-width: 6rem;
}

.stat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  margin: 0;
}

.stat-list dt {
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  font-size: 0.85rem;
}

.stat-list dd {
  margin: 0;
  font-size: 1.1rem;
}

.plain-list {
  list-style: none;
  margin: 0 0 var(--spacing-unit) 0;
  padding: 0;
}

.plain-list li {
  padding: var(--spacing-unit) 0;
  border-bottom: 1px solid var(--color-border);
}

.sheet-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-unit);
}

.sheet-table th,
.sheet-table td {
  text-align: left;
  padding: var(--spacing-unit);
  border-bottom: 1px solid var(--color-border);
}

.sheet-table input {
  width: 5rem;
}

.inventory-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.inventory-row .item-name {
  font-weight: 600;
  flex: 1;
  min-width: 8rem;
}

.equipped-label {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) / 2);
  font-weight: normal;
}

.equipped-label input {
  width: auto;
  min-height: 0;
}

.inventory-row .slot-input {
  width: auto;
  min-width: 8rem;
}

.show-archived-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-unit);
  font-weight: normal;
  margin-bottom: var(--spacing-unit);
}

.show-archived-toggle input {
  width: auto;
  min-height: 0;
}

.campaign-archived-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  background: var(--color-border);
  color: var(--color-text);
  font-size: 0.85rem;
}

.dm-tools {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-unit);
}

.dm-tools summary {
  cursor: pointer;
  font-weight: 600;
}

.edit-form,
.add-session-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit);
  margin-top: var(--spacing-unit);
}

.lifecycle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-unit);
  margin: var(--spacing-unit) 0;
}

button.archive-button,
button.unarchive-button,
button.delete-button {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.session-log {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-unit);
  margin-top: var(--spacing-unit);
}

.session-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.session-log-entry {
  padding: var(--spacing-unit) 0;
  border-bottom: 1px solid var(--color-border);
}

.session-log-entry .session-played-at-value {
  font-weight: 600;
}

/* session.html — the live-session view (SRS §11). */
.live-status-bar {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2);
}

.live-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  background: #1a7f37;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
}

.initiative-entry,
.condition-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-unit);
}

.initiative-entry .entry-roll {
  font-weight: 600;
  min-width: 2rem;
}

.initiative-entry.current-turn {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: 0.25rem;
  font-weight: 600;
}

.npc-card .npc-visibility-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-unit);
  font-weight: normal;
}

.npc-card .npc-visibility-form label {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) / 2);
  font-weight: normal;
}

.npc-card .npc-visibility-form input {
  width: auto;
  min-height: 0;
}

.npc-card .npc-hp-form input {
  width: auto;
  min-width: 5rem;
}

.roll-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--spacing-unit) / 2) var(--spacing-unit);
}

.roll-entry .roll-subject {
  font-weight: 600;
}

.roll-entry .roll-breakdown {
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  font-size: 0.9rem;
}

.roll-entry .roll-total {
  margin-left: auto;
  font-size: 1.1rem;
}

#manual-roll-details {
  margin: var(--spacing-unit) 0;
}

#manual-roll-details summary {
  cursor: pointer;
  font-weight: 600;
}