/* Mobile-first, high contrast for outdoor screens. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #d6dae0;
  --text: #16191d;
  --muted: #5d666f;
  --accent: #0b5fa5;
  --accent-text: #ffffff;
  --ok-bg: #d7f2df;    --ok-text: #12522c;
  --warn-bg: #fdeecd;  --warn-text: #6b4700;
  --bad-bg: #fbdada;   --bad-text: #7d1520;
  --off-bg: #e2e5ea;   --off-text: #3c444d;
  --neutral-bg: #dfe7f3; --neutral-text: #1e3f66;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171b;
    --surface: #1d2126;
    --border: #333a42;
    --text: #eef1f4;
    --muted: #9aa4ae;
    --accent: #4d9ee0;
    --accent-text: #08131d;
    --ok-bg: #1d3f2b;    --ok-text: #96e2b0;
    --warn-bg: #4a3608;  --warn-text: #f4cf85;
    --bad-bg: #4d1d22;   --bad-text: #f5aeb4;
    --off-bg: #2c3238;   --off-text: #c3cbd3;
    --neutral-bg: #22364e; --neutral-text: #a9cbef;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }

.muted { color: var(--muted); font-size: .875rem; }
.empty { color: var(--muted); padding: 1rem 0; }

/* --- chrome --- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .6rem .9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__brand { font-weight: 700; text-decoration: none; color: var(--text); }
.topbar__nav { display: flex; gap: .9rem; font-size: .9rem; }
.topbar__right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.topbar__user { font-size: .85rem; color: var(--muted); max-width: 9rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.langswitch { display: flex; gap: .15rem; }
.langswitch--centered { justify-content: center; margin-top: 1rem; }
.langswitch__btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: .2rem .45rem;
  font-size: .75rem;
  cursor: pointer;
}
.langswitch__btn.is-active { background: var(--accent); color: var(--accent-text);
  border-color: var(--accent); }

.page { max-width: 900px; margin: 0 auto; padding: 1rem .9rem 4rem; }

.pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.pagehead__actions { display: flex; gap: .4rem; flex-shrink: 0; }
.detail__title { word-break: break-word; }

.flash {
  border-radius: var(--radius);
  padding: .65rem .85rem;
  margin: 0 0 1rem;
  background: var(--ok-bg);
  color: var(--ok-text);
}
.flash--warn { background: var(--warn-bg); color: var(--warn-text); }
.flash--bad { background: var(--bad-bg); color: var(--bad-text); }

/* --- surfaces --- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem;
  box-shadow: var(--shadow);
}
.card--form { margin-bottom: 1rem; }
.stack { display: flex; flex-direction: column; gap: .85rem; }
.row { display: flex; flex-wrap: wrap; gap: .85rem; }
.row > .field { flex: 1 1 10rem; }
.row--tight { gap: .4rem; align-items: center; }

.fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  margin: 0;
}
.fieldset legend { font-size: .8rem; color: var(--muted); padding: 0 .3rem; }

/* --- form controls (44px targets for gloved thumbs) --- */

.field { display: block; }
.field__label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .25rem;
}
.field--check { display: flex; align-items: center; gap: .5rem; }
.field--check input { width: 1.15rem; height: 1.15rem; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: .5rem .6rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
textarea { min-height: 5.5rem; resize: vertical; }
input[type="file"] { padding: .5rem; background: transparent; }
input:disabled { color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 44px;
  padding: .5rem .9rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text);
  font-weight: 600; }
.btn--quiet { background: transparent; color: var(--muted); }
.btn--danger { background: var(--bad-bg); border-color: var(--bad-bg); color: var(--bad-text); }
.btn--small { min-height: 36px; padding: .3rem .6rem; font-size: .85rem; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.danger { margin-top: 1rem; }

.summary-btn {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
  padding: .25rem 0;
}
.summary-btn::-webkit-details-marker { display: none; }
details[open] .summary-btn { margin-bottom: .85rem; }

/* --- list + filters --- */

.filters { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .5rem; }
.chips { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .2rem; }
.chip {
  flex: 0 0 auto;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: .8rem;
  text-decoration: none;
}
.chip.is-active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip--ok.is-active { background: var(--ok-bg); color: var(--ok-text); border-color: currentColor; }
.chip--warn.is-active { background: var(--warn-bg); color: var(--warn-text); border-color: currentColor; }
.chip--bad.is-active { background: var(--bad-bg); color: var(--bad-text); border-color: currentColor; }
.chip--off.is-active { background: var(--off-bg); color: var(--off-text); border-color: currentColor; }
.chip--neutral.is-active { background: var(--neutral-bg); color: var(--neutral-text); border-color: currentColor; }

.cards, .log, .gallery, .thumbs { list-style: none; margin: 0; padding: 0; }
.cards, .log { display: flex; flex-direction: column; gap: .6rem; }
.card--link { padding: 0; }
.card__hit {
  display: flex;
  gap: .75rem;
  padding: .7rem;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}
.card__thumb {
  width: 72px; height: 72px;
  flex: 0 0 72px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg);
}
.card__thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; opacity: .35;
}
.card__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.card__title { font-size: 1.02rem; word-break: break-word; }
.card__meta { color: var(--muted); font-size: .85rem; }

.badges { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0; }
.badge {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--off-bg);
  color: var(--off-text);
}
.badge--ok { background: var(--ok-bg); color: var(--ok-text); }
.badge--warn { background: var(--warn-bg); color: var(--warn-text); }
.badge--bad { background: var(--bad-bg); color: var(--bad-text); }
.badge--off { background: var(--off-bg); color: var(--off-text); }
.badge--neutral { background: var(--neutral-bg); color: var(--neutral-text); }

/* --- detail --- */

.facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0 0 .5rem; }
.facts dt { color: var(--muted); font-size: .8rem; font-weight: 600; }
.facts dd { margin: 0; word-break: break-word; }
.notes { white-space: pre-wrap; margin: .25rem 0 0; }

.log__item { display: flex; flex-direction: column; gap: .5rem; }
.log__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.log__item > form { align-self: flex-start; }

.thumbs { display: flex; flex-wrap: wrap; gap: .4rem; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.gallery__item { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; }
.gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px;
  display: block; }
.gallery__caption { display: flex; gap: .3rem; }
.gallery__caption input { min-height: 36px; font-size: .85rem; }
.gallery__foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }

/* --- photo picker --- */

.picker { display: flex; flex-direction: column; gap: .5rem; }
.picker__input--hidden {
  /* kept in the DOM -- it is the input that actually carries the files */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.picker__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.picker__actions .btn { flex: 1 1 auto; min-height: 52px; font-weight: 600; }

.picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.picker__list:empty { display: none; }
.picker__list li { position: relative; }
.picker__list img {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--bg);
}
.picker__drop {
  position: absolute;
  top: -6px; right: -6px;
  width: 26px; height: 26px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--bad-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

/* --- login --- */

.login { max-width: 22rem; margin: 8vh auto 0; }
.login__title { text-align: center; margin-bottom: 1.25rem; }

@media (min-width: 640px) {
  .filters { flex-direction: row; align-items: center; }
  .filters__search { max-width: 18rem; }
}