/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Base palette */
  --bg:            #ffffff;
  --surface:       #f4f4f4;
  --surface-raise: #e8e8e8;
  --border:        #d0d0d0;
  --border-strong: #999999;

  /* Text */
  --fg:            #111111;
  --fg-dim:        #555555;

  /* Action colors */
  --orange:        #111111;   /* primary CTAs: ROLL, Roll Again */
  --orange-text:   #ffffff;
  --teal:          #111111;   /* selected states: active die, active tab */
  --teal-text:     #ffffff;
  --violet:        #111111;   /* Save action */
  --violet-text:   #ffffff;
  --pink:          #111111;   /* Delete */
  --pink-text:     #ffffff;
  --ghost-text:    #666666;   /* New Roll — low-priority */

  /* Layout */
  --tab-h:    4em;
  --radius:   0.4em;
  --pad:      1em;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px; /* em base — all em values scale from here */
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, sans-serif;
}

:focus-visible {
  outline: 0.2em solid var(--fg);
  outline-offset: 0.15em;
}

/* ── Views ──────────────────────────────────────────────────────────────── */
.view {
  display: none;
  position: fixed;
  inset: 0 0 var(--tab-h) 0;
}
.view.active {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.view-inner {
  width: 100%;
  max-width: 30em;
  margin: 0 auto;
  flex: none;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
}

/* ── Roll Builder ───────────────────────────────────────────────────────── */
#view-roll .view-inner {
  justify-content: space-between;
  gap: 1.5em;
}

#simple-mode, #advanced-mode {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  flex: 1;
}
#simple-mode[hidden], #advanced-mode[hidden] { display: none; }

/* Mode selector */
.mode-row {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

#mode-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--fg);
  border: 0.07em solid var(--border);
  border-radius: var(--radius);
  font-size: 1.5em;
  font-weight: 800;
  font-family: inherit;
  padding: 0.4em 2em 0.4em 0.6em;
  cursor: pointer;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 1.2em;
}

/* Advanced mode */
#advanced-input {
  background: var(--surface);
  color: var(--fg);
  border: 0.07em solid var(--border);
  border-radius: var(--radius);
  font-size: 2em;
  font-weight: 700;
  font-family: inherit;
  padding: 0.4em 0.5em;
  width: 100%;
  letter-spacing: 0.02em;
}
#advanced-input::placeholder {
  color: var(--fg-dim);
  font-weight: 400;
  font-size: 0.75em;
}

.advanced-hint {
  font-size: 1em;
  color: var(--fg-dim);
  font-style: italic;
}

.advanced-error {
  font-size: 1em;
  font-weight: 700;
  color: #cc2200;
}

.builder-row {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.row-label {
  font-size: 1.2em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg);
}

/* Stepper */
.stepper {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 0.07em solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stepper-btn {
  background: transparent;
  color: var(--fg);
  border: none;
  font-size: 3em;
  font-weight: 300;
  min-width: 1.5em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s, color 0.1s;
}
.stepper-btn:active {
  background: var(--teal);
  color: var(--teal-text);
}

.stepper-val {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  font-weight: 800;
  border-left: 0.04em solid var(--surface-raise);
  border-right: 0.04em solid var(--surface-raise);
  padding: 0.1em 0;
  user-select: none;
  color: var(--fg);
  letter-spacing: -0.02em;
}

/* Die grid */
.die-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75em;
}

.die-btn {
  background: var(--surface);
  color: var(--fg-dim);
  border: 0.07em solid var(--border);
  border-radius: var(--radius);
  font-size: 1.5em;
  font-weight: 800;
  min-height: 3.67em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  padding: 0.35em 0.2em;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.die-btn[aria-pressed="true"] {
  background: var(--teal);
  color: var(--teal-text);
  border-color: var(--teal);
}
.die-btn:active { opacity: 0.75; }

.die-icon {
  width: 1.6em;
  height: 1.6em;
  flex-shrink: 0;
}

.die-label {
  font-size: 0.8em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--fg);

  .die-btn[aria-pressed="true"] & {
    color: currentColor;
  }
}

/* ROLL button */
#roll-btn {
  background: var(--orange);
  color: var(--orange-text);
  border: none;
  border-radius: var(--radius);
  font-size: 2.5em;
  font-weight: 900;
  letter-spacing: 0.12em;
  min-height: 1.8em;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.1s;
}
#roll-btn:active { opacity: 0.8; }

/* ── Result View ─────────────────────────────────────────────────────────── */
.result-inner { justify-content: space-between; }

.result-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-align: center;
  padding: 1em 0;
}

#result-label {
  font-size: 1.4em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  min-height: 1.2em;
}

#result-die-icon {
  width: 3.5em;
  height: 3.5em;
  color: var(--fg);
  opacity: 0.6;
}

#result-display {
  font-size: 2em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
}

#result-breakdown {
  font-size: 1.2em;
  color: var(--fg-dim);
  word-break: break-all;
  max-width: 100%;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding-top: 1em;
}

/* Roll Again — primary */
#roll-again-btn {
  background: var(--orange);
  color: var(--orange-text);
  border: none;
  border-radius: var(--radius);
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 0.1em;
  min-height: 2.25em;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
#roll-again-btn:active { opacity: 0.8; }

/* Save / New Roll row */
.result-secondary-actions {
  display: flex;
  gap: 0.75em;
}

/* Save — violet */
#save-btn {
  background: var(--violet);
  color: var(--violet-text);
  border: none;
  border-radius: var(--radius);
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 3em;
  cursor: pointer;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
}
#save-btn:active { opacity: 0.8; }

/* New Roll — ghost */
#new-roll-btn {
  background: transparent;
  color: var(--ghost-text);
  border: 0.08em solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 3.21em;
  cursor: pointer;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
}
#new-roll-btn:active {
  background: var(--surface-raise);
  color: var(--fg);
}

/* ── Saved View ─────────────────────────────────────────────────────────── */
.saved-inner {
  gap: 0.6em;
}

#bookmark-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

#bookmark-list li {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 0.07em solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

/* Keyboard-navigation focus ring on the whole row */
#bookmark-list li:focus-within {
  outline: 0.2em solid var(--fg);
  outline-offset: 0.1em;
}
.bookmark-main-btn:focus-visible {
  outline: none;
}

/* Main roll area — full width except delete */
.bookmark-main-btn {
  flex: 1;
  display: flex;
  align-items: center;
  background: transparent;
  color: var(--fg);
  border: none;
  border-left: 0.2em solid var(--teal); /* teal accent strip — signals tappable */
  cursor: pointer;
  min-height: 4.5em;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.bookmark-main-btn:active {
  background: var(--surface-raise);
}

.bookmark-name {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.6em 0.8em;
  gap: 0.25em;
}

.bookmark-name-text {
  font-size: 1.6em;
  font-weight: 700;
  color: var(--fg);
}

.bookmark-sub {
  font-size: 1.1em;
  font-weight: 500;
  color: var(--fg-dim);
}

/* Delete — pink */
.bookmark-delete-btn {
  background: transparent;
  color: var(--pink);
  border: none;
  border-left: 0.07em solid var(--border);
  font-size: 1.4em;
  font-weight: 400;
  min-height: 4em;
  min-width: 3em;
  padding: 0 0.6em;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.bookmark-delete-btn:active {
  background: var(--pink);
  color: var(--pink-text);
}

.empty-msg {
  font-size: 1.1em;
  color: var(--fg-dim);
  font-style: italic;
  padding: 2em 0;
  text-align: center;
  list-style: none;
  border: none !important;
  background: none !important;
}

/* ── History View ───────────────────────────────────────────────────────── */

#history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.history-item {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 0.07em solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

/* Keyboard-navigation focus ring on the whole row */
.history-item:focus-within {
  outline: 0.2em solid var(--fg);
  outline-offset: 0.1em;
}
.history-main-btn:focus-visible {
  outline: none;
}

.history-main-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.7em 0.85em;
  gap: 0.2em;
  background: transparent;
  color: inherit;
  border: none;
  border-left: 0.2em solid var(--border-strong);
  text-align: left;
  cursor: pointer;
  min-height: 4em;
  -webkit-tap-highlight-color: transparent;
}
.history-main-btn:active {
  background: var(--surface-raise);
  border-left-color: var(--fg);
}

/* Name shown when roll originated from a saved bookmark */
.history-bm-name {
  font-size: 1.4em;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: 0.02em;
}

.history-label {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--fg);
}

.history-detail {
  font-size: 1em;
  color: var(--fg-dim);
  word-break: break-all;
}

.history-save-btn {
  background: var(--violet);
  color: var(--violet-text);
  border: none;
  border-left: 0.07em solid var(--border);
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-width: 4em;
  padding: 0 0.8em;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.history-save-btn:active { opacity: 0.8; }

/* ── Tab Bar ─────────────────────────────────────────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tab-h);
  display: flex;
  background: var(--surface);
  border-top: 0.07em solid var(--border);
  z-index: 10;
}

.tab-btn {
  flex: 1;
  background: transparent;
  color: var(--fg-dim);
  border: none;
  font-size: 1.2em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}

/* Active tab: teal fill */
.tab-btn[aria-selected="true"] {
  background: var(--teal);
  color: var(--teal-text);
}

.tab-btn:active { opacity: 0.75; }

.tab-btn + .tab-btn {
  border-left: 0.07em solid var(--border);
}