@import "./tokens.css";

:root {
  --bg: var(--oa-surface-base);
  --fg: var(--oa-ink);
  --accent: var(--oa-honey-400);
  --accent-2: var(--oa-honey-600);
  --muted: var(--oa-ink-muted);
  --card: var(--oa-surface-1);
  --border: var(--oa-glass-border);
  --on-accent: var(--oa-on-accent);
  --bar: var(--oa-glass-fill);
  --on-bar: var(--oa-ink);
  --font-display: var(--oa-font-display);
  --font-body: var(--oa-font-body);
  --font-mono: var(--oa-font-mono);
}
body { line-height: 1.5; }
header {
  gap: 20px; flex-wrap: wrap; padding: 20px max(24px, calc((100vw - 1400px) / 2 + 24px));
  background: var(--bar); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
header h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.03em; text-transform: none; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 44px; height: 44px; border-radius: 12px; }
.brand p { margin: 0; font-size: 12px; color: var(--muted); }
header .config, .who { flex-wrap: wrap; gap: 12px; }
main { gap: 24px; padding: 28px 24px 48px; }
.page-intro h2 { font-size: clamp(26px, 4vw, 36px); margin: 0; letter-spacing: -0.035em; font-weight: 650; }
.page-intro p { margin: 6px 0 0; color: var(--muted); }
input, button, select, .auth-input {
  font-family: var(--font-body); background: var(--oa-surface-2); color: var(--fg);
  border-color: var(--border); border-radius: 12px; min-height: 44px; font-size: 14px;
}
input::placeholder { color: var(--oa-ink-subtle); opacity: 1; }
input[type="checkbox"] { min-height: 0; accent-color: var(--accent); }
button { background: var(--accent); color: var(--on-accent); padding: 10px 16px; font-weight: 600; }
button:hover, .auth-btn:hover { background: var(--oa-honey-300); color: var(--on-accent); }
button.ghost, button.chip, .auth-btn-outline {
  background: var(--oa-surface-2); color: var(--fg); border: 1px solid var(--border);
}
button.ghost:hover, button.chip:hover, .auth-btn-outline:hover, .auth-btn-clear:hover {
  background: var(--oa-surface-3); color: var(--fg);
}
button.chip.active { background: var(--accent); color: var(--on-accent); }
button.danger { background: var(--oa-danger); color: var(--bg); }
button.danger:hover { background: var(--oa-danger); color: var(--bg); filter: brightness(0.9); }
.who .badge { min-height: 36px; letter-spacing: 0; text-transform: none; }
.who .badge[aria-pressed="false"] { background: var(--oa-surface-2); color: var(--fg); border: 1px solid var(--border); }
.who select { min-width: 0; max-width: 260px; }
.settings { background: var(--card); padding: 16px 24px; }
.appearance-control { display: flex; align-items: center; gap: 8px; }
.appearance-control label { font-size: 12px; color: var(--muted); }
.appearance-control select { min-width: 100px; }
[data-appearance-error]:empty, #error:empty { display: none; }
[data-appearance-error] { color: var(--oa-danger); padding: 8px 24px; margin: 0; font-size: 13px; }
.stat, .card { border-radius: 24px; box-shadow: var(--oa-shadow-1); }
.stat { padding: 20px; }
.stat .value { color: var(--fg); font-size: 36px; font-weight: 600; letter-spacing: -0.04em; }
.stat .label, .meta .item .label, .filters .field label {
  font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted);
}
.card { padding: 24px; }
.card h2 { font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: -0.02em; }
th { text-transform: none; font-size: 12px; letter-spacing: 0; padding: 12px; color: var(--muted); }
td { padding: 14px 12px; }
tbody tr:hover { background: var(--oa-surface-2); }
a { color: var(--accent-2); text-underline-offset: 3px; }
a.back { color: var(--fg); opacity: 1; }
.error, .auth-error, #error:not(:empty) {
  background: var(--card); color: var(--oa-danger); border: 1px solid var(--oa-danger);
  border-radius: 14px; padding: 12px 16px; overflow-wrap: anywhere;
}
#error > .error { padding: 0; border: 0; }
.skeleton { background: linear-gradient(100deg, var(--oa-surface-2) 30%, var(--oa-surface-3) 50%, var(--oa-surface-2) 70%); }
.auth-screen { background: var(--bg); }
.auth-card { max-width: 420px; border-radius: 28px; box-shadow: var(--oa-shadow-3); }
.auth-title { font-weight: 650; color: var(--fg); letter-spacing: -0.035em; }
.auth-logo { border-radius: 22%; }
.auth-btn { background: var(--accent); color: var(--on-accent); border-radius: 14px; min-height: 48px; font-weight: 600; }
.auth-btn-outline { background: var(--oa-surface-2); color: var(--accent-2); border-color: var(--border); }
.auth-btn-clear { background: transparent; color: var(--accent-2); }
.auth-btn-small { color: var(--muted); }
.auth-card .appearance-control { margin-top: 24px; }
.auth-actions label:not(.auth-remember) { font-size: 13px; color: var(--muted); }
.auth-title { font-size: 28px; margin: 0; }
.skip-link { position: fixed; z-index: 2000; top: 8px; left: 8px; transform: translateY(-200%); padding: 12px; background: var(--card); border-radius: 12px; }
.skip-link:focus { transform: translateY(0); }
:focus-visible, button:focus-visible, select:focus-visible, .auth-input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.rowbar > div, #deletionControls { flex-wrap: wrap; }
.filters .field, .filters input { max-width: 100%; min-width: 0; }
.filters .presets { flex-wrap: wrap; }
.meta .item .val { font-size: 18px; font-weight: 600; word-break: normal; overflow-wrap: anywhere; }
main > *, .grid-2 > * { min-width: 0; }
canvas { width: 100%; max-width: 100%; }
.map-legend { flex-wrap: wrap; }
.dot.gaining { background: var(--oa-success); }
.dot.dropping { background: var(--oa-danger); }
.dot.flat { background: var(--oa-ink-muted); }
.dot.location { background: var(--oa-warning); }
.leaflet-container { background: var(--oa-surface-2); font-family: var(--font-body); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--fg); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-bar a, .leaflet-control-attribution { background: var(--card); color: var(--fg); }
.leaflet-bar a:hover { background: var(--oa-surface-2); color: var(--fg); }
.leaflet-bar a.leaflet-disabled { background: var(--oa-surface-2); color: var(--muted); }
.leaflet-control-attribution a { color: var(--accent-2); }
.leaflet-bar a { min-width: 36px; height: 36px; line-height: 36px; }
@media (max-width: 650px) {
  header { padding: 16px; gap: 16px; }
  header .who, header .config { width: 100%; }
  main { padding: 20px 12px 32px; gap: 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 16px; }
  .stat .value { font-size: 28px; }
  .card { padding: 16px; border-radius: 20px; }
  .grid-2 { gap: 16px; }
  .auth-screen { padding: 16px; align-items: safe center; }
  .auth-card { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
@supports not (backdrop-filter: blur(1px)) { header { background: var(--card); } }
@media (prefers-reduced-transparency: reduce) { header { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; } }