/* Shared visual system for view.html + edit.html — same token approach as
   enchant-planner-aws/content/index.html so the two projects read as a
   matched pair. */

:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --border:         rgba(11,11,11,0.10);
  --accent:         #2a78d6;
  --accent-wash:    #eaf1fb;
  --card:           #ffffff;
  --danger:         #c0392b;
  --danger-wash:    #fbeae7;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --border:         rgba(255,255,255,0.10);
    --accent:         #3987e5;
    --accent-wash:    #16232f;
    --card:           #212120;
    --danger:         #e0685a;
    --danger-wash:    #2a1917;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page:           #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --border:         rgba(255,255,255,0.10);
  --accent:         #3987e5;
  --accent-wash:    #16232f;
  --card:           #212120;
  --danger:         #e0685a;
  --danger-wash:    #2a1917;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

header.top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
header.top h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
header.top p { margin: 0; color: var(--text-secondary); font-size: 13.5px; }

nav.pages { display: flex; gap: 8px; align-items: center; }
nav.pages a {
  color: var(--accent);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
nav.pages a:hover { background: var(--accent-wash); }

.header-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.theme-toggle {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px;
}
.theme-toggle button {
  border: none; background: transparent; color: var(--text-secondary);
  font-size: 12.5px; font-weight: 600; padding: 6px 10px;
  border-radius: 6px; cursor: pointer;
}
.theme-toggle button.active { background: var(--accent-wash); color: var(--accent); }

.card-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}
.card-panel h2 { font-size: 14px; margin: 0 0 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }

label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); display: block; margin-bottom: 4px; }

input[type="text"], input[type="number"], input[type="password"], input[type="email"], select {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--text-primary);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.password-field { position: relative; }
.password-field input { width: 100%; padding-right: 40px; }
.password-field .toggle-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 5px;
  margin: 0;
  width: auto;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.password-field .toggle-eye:hover { color: var(--text-primary); background: var(--accent-wash); }
.password-field .toggle-eye svg { display: block; }

.auth-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 16px; }
.auth-tabs button {
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.auth-tabs button.active { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }

.auth-form { max-width: 340px; margin: 0 auto; text-align: left; }
.auth-form > div { margin-bottom: 12px; }
.auth-form .btn { width: 100%; margin-top: 4px; }
.auth-form .link-btn {
  background: none; border: none; color: var(--accent); font-size: 12.5px;
  cursor: pointer; padding: 0; text-decoration: underline;
}

.checkbox-row { display: flex; flex-wrap: wrap; gap: 12px; }
.checkbox-row label {
  display: flex; align-items: center; gap: 6px;
  font-weight: 500; margin-bottom: 0; cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: auto; }

.color-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; color: #111;
  border: 1px solid var(--border);
}
.color-badge.W { background: #f8f4e3; }
.color-badge.U { background: #a9d4f5; }
.color-badge.B { background: #b8aeb0; }
.color-badge.R { background: #f3a48e; }
.color-badge.G { background: #a9d6ab; }
.color-badge.C { background: #d8d8d8; }
/* Generic mana (numbers, X) and anything else a mana cost string can hold
   (hybrid symbols like "W/U", snow "S") that isn't one of the 5 colors. */
.color-badge.generic { background: #d0cec5; }
.color-badge svg { display: block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 8px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.btn:hover { filter: brightness(0.95); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.btn.danger { background: var(--danger); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); border-bottom: 1px solid var(--gridline); padding: 8px 10px;
}
tbody td { padding: 10px; border-bottom: 1px solid var(--gridline); vertical-align: middle; }
tbody tr:hover { background: var(--accent-wash); }

.empty-state { padding: 28px; text-align: center; color: var(--text-muted); }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: start; }
/* Keeps every field's label to one line so inputs in the same grid row line
   up — a longer label truncates with an ellipsis instead of wrapping and
   pushing its input down relative to shorter labels next to it. Full text
   is still available via the label's title attribute (hover/long-press). */
.field-grid label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.banner {
  padding: 12px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px;
}
.banner.error { background: var(--danger-wash); color: var(--danger); border: 1px solid var(--danger); }
.banner.info { background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent); }