/* Rank badge colors — light mode defaults, dark overrides below.
   Follows Pico's scheme switching: media query for auto, [data-theme] for forced. */
:root,
:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  --rank-s: #b8860b;
  --rank-a: #2e7d32;
  --rank-b: #00796b;
  --rank-c: #b0a000;
  --rank-d: #e07020;
  --rank-f: #c62828;
  --rank-none: #9e9e9e;
  --type-whiskey: #7a3b2e;
  --type-wine: #6d2e4e;
  --type-beer: #8a6d1a;
  --type-spirit: #46707a;
  --type-other: #6b5d52;
  /* Deep brown primary (matches the app icon) instead of Pico blue */
  --pico-primary: #7a3b2e;
  --pico-primary-background: #7a3b2e;
  --pico-primary-border: #7a3b2e;
  --pico-primary-hover: #5e2d23;
  --pico-primary-hover-background: #683227;
  --pico-primary-hover-border: #683227;
  --pico-primary-focus: rgba(122, 59, 46, 0.25);
  --pico-primary-underline: rgba(122, 59, 46, 0.5);
  --pico-primary-inverse: #fff;
  /* Warm cream surfaces instead of Pico's slate-tinted neutrals */
  --pico-background-color: #f6f1ea;
  --pico-color: #3d3530;
  --pico-muted-color: #7a6f64;
  --pico-muted-border-color: #e3d9cd;
  --pico-card-background-color: #fdfaf5;
  --pico-card-sectioning-background-color: #f3ece2;
  --pico-form-element-background-color: #fdfaf5;
  --pico-form-element-border-color: #cfc2b2;
  --pico-form-element-active-border-color: #7a3b2e;
  --pico-form-element-placeholder-color: #a3958a;
  --pico-dropdown-background-color: #fdfaf5;
  --pico-dropdown-border-color: #e3d9cd;
  --pico-dropdown-hover-background-color: #f3ece2;
  --pico-table-border-color: #e3d9cd;
  --pico-h1-color: #2c241d;
  --pico-h2-color: #2c241d;
  --pico-h3-color: #38302a;
  --pico-h4-color: #38302a;
  --pico-h5-color: #453c34;
  --pico-h6-color: #453c34;
  --pico-secondary: #6b5d52;
  --pico-secondary-hover: #574b41;
  --pico-secondary-background: #6b5d52;
  --pico-secondary-border: #6b5d52;
  --pico-secondary-hover-background: #574b41;
  --pico-secondary-hover-border: #574b41;
  --pico-secondary-focus: rgba(107, 93, 82, 0.25);
  --pico-secondary-inverse: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rank-s: #ffd700;
    --rank-a: #66bb6a;
    --rank-b: #4db6ac;
    --rank-c: #e6d44a;
    --rank-d: #ffa14a;
    --rank-f: #ef5350;
    --rank-none: #757575;
    --type-whiskey: #c98a6b;
    --type-wine: #c97ba3;
    --type-beer: #d4b85a;
    --type-spirit: #7fb6c2;
    --type-other: #a89a8c;
    --pico-primary: #c98a6b;
    --pico-primary-background: #94503a;
    --pico-primary-border: #94503a;
    --pico-primary-hover: #d9a384;
    --pico-primary-hover-background: #a55e45;
    --pico-primary-hover-border: #a55e45;
    --pico-primary-focus: rgba(201, 138, 107, 0.3);
    --pico-primary-underline: rgba(201, 138, 107, 0.5);
    --pico-primary-inverse: #fff;
    /* Warm dark-brown surfaces instead of Pico's blue-slate darks */
    --pico-background-color: #191410;
    --pico-color: #d8cec3;
    --pico-muted-color: #a08f7f;
    --pico-muted-border-color: #3a2f26;
    --pico-card-background-color: #211a14;
    --pico-card-sectioning-background-color: #2a2119;
    --pico-form-element-background-color: #251d16;
    --pico-form-element-border-color: #4a3b2e;
    --pico-form-element-active-border-color: #c98a6b;
    --pico-form-element-placeholder-color: #8a7a6b;
    --pico-dropdown-background-color: #251d16;
    --pico-dropdown-border-color: #4a3b2e;
    --pico-dropdown-hover-background-color: #2f251c;
    --pico-table-border-color: #3a2f26;
    --pico-h1-color: #ece4da;
    --pico-h2-color: #ece4da;
    --pico-h3-color: #ddd2c6;
    --pico-h4-color: #ddd2c6;
    --pico-h5-color: #cec2b4;
    --pico-h6-color: #cec2b4;
    --pico-secondary: #a89a8c;
    --pico-secondary-hover: #baa999;
    --pico-secondary-background: #5a4c40;
    --pico-secondary-border: #5a4c40;
    --pico-secondary-hover-background: #6a5a4c;
    --pico-secondary-hover-border: #6a5a4c;
    --pico-secondary-focus: rgba(168, 154, 140, 0.25);
    --pico-secondary-inverse: #fff;
  }
}

:root[data-theme="dark"] {
  --rank-s: #ffd700;
  --rank-a: #66bb6a;
  --rank-b: #4db6ac;
  --rank-c: #e6d44a;
  --rank-d: #ffa14a;
  --rank-f: #ef5350;
  --rank-none: #757575;
  --type-whiskey: #c98a6b;
  --type-wine: #c97ba3;
  --type-beer: #d4b85a;
  --type-spirit: #7fb6c2;
  --type-other: #a89a8c;
  --pico-primary: #c98a6b;
  --pico-primary-background: #94503a;
  --pico-primary-border: #94503a;
  --pico-primary-hover: #d9a384;
  --pico-primary-hover-background: #a55e45;
  --pico-primary-hover-border: #a55e45;
  --pico-primary-focus: rgba(201, 138, 107, 0.3);
  --pico-primary-underline: rgba(201, 138, 107, 0.5);
  --pico-primary-inverse: #fff;
  --pico-background-color: #191410;
  --pico-color: #d8cec3;
  --pico-muted-color: #a08f7f;
  --pico-muted-border-color: #3a2f26;
  --pico-card-background-color: #211a14;
  --pico-card-sectioning-background-color: #2a2119;
  --pico-form-element-background-color: #251d16;
  --pico-form-element-border-color: #4a3b2e;
  --pico-form-element-active-border-color: #c98a6b;
  --pico-form-element-placeholder-color: #8a7a6b;
  --pico-dropdown-background-color: #251d16;
  --pico-dropdown-border-color: #4a3b2e;
  --pico-dropdown-hover-background-color: #2f251c;
  --pico-table-border-color: #3a2f26;
  --pico-h1-color: #ece4da;
  --pico-h2-color: #ece4da;
  --pico-h3-color: #ddd2c6;
  --pico-h4-color: #ddd2c6;
  --pico-h5-color: #cec2b4;
  --pico-h6-color: #cec2b4;
  --pico-secondary: #a89a8c;
  --pico-secondary-hover: #baa999;
  --pico-secondary-background: #5a4c40;
  --pico-secondary-border: #5a4c40;
  --pico-secondary-hover-background: #6a5a4c;
  --pico-secondary-hover-border: #6a5a4c;
  --pico-secondary-focus: rgba(168, 154, 140, 0.25);
  --pico-secondary-inverse: #fff;
}

.rank-badge {
  display: inline-block;
  min-width: 2.2em;
  padding: 0.1em 0.35em;
  border: 2px solid;
  border-radius: 0.4em;
  font-weight: 700;
  text-align: center;
}
.rank-badge.rank-lg { font-size: 1.1em; vertical-align: middle; }
.rank-s { color: var(--rank-s); border-color: var(--rank-s); }
.rank-a { color: var(--rank-a); border-color: var(--rank-a); }
.rank-b { color: var(--rank-b); border-color: var(--rank-b); }
.rank-c { color: var(--rank-c); border-color: var(--rank-c); }
.rank-d { color: var(--rank-d); border-color: var(--rank-d); }
.rank-f { color: var(--rank-f); border-color: var(--rank-f); }
.rank-none { color: var(--rank-none); border-color: var(--rank-none); }

.type-badge { font-size: 0.8em; font-weight: 600; }
.type-whiskey { color: var(--type-whiskey); }
.type-wine { color: var(--type-wine); }
.type-beer { color: var(--type-beer); }
.type-spirit { color: var(--type-spirit); }
.type-other { color: var(--type-other); }

.brand { text-decoration: none; }
.muted { color: var(--pico-muted-color); }
.error { color: var(--rank-f); font-weight: 600; }
.logout-form { margin: 0; }
.logout-form button { margin: 0; padding: 0.3em 0.8em; }

.login-card { max-width: 24rem; margin: 10vh auto 0; text-align: center; }

.list-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: start;
  margin-bottom: var(--pico-spacing);
}
.list-controls input, .list-controls select { margin-bottom: 0; }

.drink-header h1 { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.drink-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  border: none;
  margin-bottom: var(--pico-spacing);
}
.type-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--pico-form-element-border-color);
  border-radius: var(--pico-border-radius);
  color: var(--pico-muted-color);
  cursor: pointer;
  margin-bottom: 0;
  text-align: center;
}
.type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.type-option svg { width: 28px; height: 28px; }
.type-option:hover { border-color: var(--pico-primary); }
.type-option:has(input:checked) {
  border-color: var(--pico-primary);
  color: var(--pico-primary);
  background: var(--pico-primary-focus, rgba(122, 59, 46, 0.15));
}
.type-option:has(input:focus-visible) {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

.form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.form-actions > * { width: auto; margin-bottom: 0; }

.rating-entry header,
.try-entry header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
}
.rating-entry header .entry-actions,
.try-entry header .entry-actions { margin-left: auto; display: flex; gap: 0.4em; }
.rating-entry p:last-child,
.try-entry p:last-child { margin-bottom: 0; }

.kind-tag {
  font-size: 0.75em;
  padding: 0.1em 0.5em;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.4em;
  color: var(--pico-muted-color);
  white-space: nowrap;
}
.btn-sm { padding: 0.15em 0.6em; font-size: 0.8em; margin: 0; width: auto; }
.current-tag { font-size: 0.75em; padding: 0.15em 0.5em; border-radius: 0.4em; }

/* Mobile: drop secondary columns, stack filter controls */
@media (max-width: 640px) {
  .col-extra { display: none; }
  .list-controls { grid-template-columns: 1fr 1fr; }
  .list-controls input[type="search"] { grid-column: 1 / -1; }
  table { font-size: 0.9em; }
  .type-option { flex: 1 1 28%; } /* 5 buttons wrap 3+2 */
}