/* DiveDrop - shared styles. Light and dark, phone and desktop. */

:root {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #eef2f6;
  --border: #d8e0e8;
  --text: #0f2233;
  --muted: #5c7183;
  --accent: #0e7490;
  --accent-strong: #0b5a70;
  --accent-soft: #e0f2f7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --ok: #15803d;
  --shadow: 0 1px 2px rgba(15, 34, 51, .06), 0 8px 24px rgba(15, 34, 51, .07);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1620;
    --surface: #12212e;
    --surface-2: #1a2f40;
    --border: #24455c;
    --text: #e6f0f6;
    --muted: #93aec2;
    --accent: #38bdf8;
    --accent-strong: #7dd3fc;
    --accent-soft: #10344a;
    --danger: #fca5a5;
    --danger-soft: #40201f;
    --ok: #4ade80;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

/* Author styles beat the browser's own [hidden] rule, and buttons below are
   given a display, so hidden needs saying again here. */
[hidden] { display: none; }

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

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

h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; font-weight: 650; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }

/* --- header --- */

header.top {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.top-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem 0;
}

.brand {
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 1.05rem;
}

.brand svg { width: 20px; height: 20px; color: var(--accent); }

.trip-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 12rem; }
/* Without these the trip's own subtitle - shop, place and dates - is wider
   than a phone, and it drags the whole header sideways, taking the controls
   at the end of it off the screen. */
.trip-title strong, .trip-title span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.trip-title strong { font-size: 1.05rem; }
.trip-title span { color: var(--muted); font-size: .85rem; }

@media (max-width: 560px) {
  .top-inner { gap: .5rem; }
  .top-inner .brand span, .top-inner .brand { font-size: .95rem; }
  /* Identity and its settings go on their own line rather than being pushed
     off the end. */
  #whoami { flex: 1 0 100%; order: 5; }
}

.spacer { flex: 1 1 auto; }

/* --- buttons and inputs --- */

button, .btn {
  font: inherit;
  font-weight: 550;
  padding: .5rem .9rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}

button:hover, .btn:hover { background: var(--surface-2); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primary, .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
@media (prefers-color-scheme: dark) {
  button.primary, .btn.primary { color: #04202e; }
}

button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
button.danger:hover { background: var(--danger-soft); }
button.ghost { border-color: transparent; background: transparent; }
button.ghost:hover { background: var(--surface-2); }
button.small { padding: .3rem .6rem; font-size: .85rem; }

input, select, textarea {
  font: inherit;
  padding: .45rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

label.field { display: block; margin-bottom: .7rem; }
label.field > span {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .2rem;
  font-weight: 550;
}
label.field input, label.field select, label.field textarea { width: 100%; }

.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 8rem; }

/* --- cards --- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.pill {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: .75rem;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) { .pill { color: var(--accent); } }

/* --- filter bar --- */

.filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .8rem 0;
}
.filters select, .filters input { padding: .4rem .55rem; }
.filters .grow { flex: 1 1 12rem; }

/* --- gallery grid --- */

/* --- trip tabs, entry list, trip map --- */

.tabs { display: flex; gap: .3rem; padding: .8rem 0 .2rem; flex-wrap: wrap; }
.tabs button {
  border-color: transparent; background: transparent; color: var(--muted);
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
}
.tabs button:hover { background: var(--surface-2); }
.tabs button.on {
  color: var(--text); border-bottom-color: var(--accent); background: transparent;
}

.dive-list {
  display: grid; gap: .6rem; padding-bottom: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.dive-card {
  display: flex; gap: .7rem; align-items: stretch; text-align: left;
  padding: .5rem; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: inherit; cursor: pointer; width: 100%;
  white-space: normal;
}
.dive-card:hover { border-color: var(--accent); background: var(--surface-2); }
.dive-card.on { border-color: var(--accent); }
.dive-card img, .dive-card .blank {
  width: 74px; height: 74px; flex: none; border-radius: 8px;
  object-fit: cover; background: var(--surface-2);
}
.dive-card .blank {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.3rem;
}
.dive-card .body { min-width: 0; flex: 1; display: flex;
  flex-direction: column; gap: .12rem; }
.dive-card .body b { display: flex; gap: .4rem; align-items: baseline; }
.dive-card .body b em { font-style: normal; color: var(--muted);
  font-weight: 400; font-size: .8rem; }
.dive-card .body span { color: var(--muted); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dive-card .body .stats { color: var(--text); font-size: .8rem; }
.dive-card .edit {
  align-self: flex-start; padding: .2rem .45rem; font-size: .75rem;
  border-color: transparent; background: transparent; color: var(--muted);
}
.dive-card .edit:hover { background: var(--surface-2); color: var(--text); }

.site-footer { border-top: 1px solid var(--border); margin-top: 1rem;
  padding-top: .8rem; padding-bottom: 2rem; }
.site-footer p { margin: 0; max-width: 60rem; }

.trip-map { height: min(70vh, 640px); border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); }

/* --- slideshow --- */

.slideshow {
  position: fixed; inset: 0; z-index: 90; background: #000;
  height: 100vh; height: 100dvh;      /* same iOS toolbar problem */
  display: flex; flex-direction: column;
}
.slideshow .frame { position: relative; flex: 1; min-height: 0; cursor: pointer; }
.slideshow .frame img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .7s ease;
}
.slideshow .frame img.on { opacity: 1; }
.slideshow .chrome {
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  padding: 1.6rem .7rem calc(.7rem + env(safe-area-inset-bottom, 0px));
}
.slideshow .bar { height: 2px; background: rgba(255,255,255,.2); margin-bottom: .6rem; }
.slideshow .bar > i { display: block; height: 100%; width: 0; background: var(--accent); }
.slideshow .line { display: flex; gap: .35rem; align-items: center; }
.slideshow .line button {
  color: #fff; background: rgba(255,255,255,.1); border-color: transparent;
  font-size: 1rem; padding: .35rem .7rem;
}
.slideshow .line button:hover { background: rgba(255,255,255,.22); }
.slideshow .caption {
  flex: 1; min-width: 0; color: #cfe3ef; font-size: .8rem; line-height: 1.35;
  padding: 0 .5rem;
}
.slideshow .caption b { display: block; color: #fff; font-size: .95rem; }
.slideshow .caption span { display: block; }

/* Map markers and popups. Shared, because the world map and a trip's own map
   draw the same things - keeping these on one page left the other's markers
   as bare numbers over the sea. */
.leaflet-popup-content { margin: .6rem .8rem; font: inherit; }
.pop img { width: 100%; border-radius: 6px; display: block; margin-bottom: .4rem; }
.pop b { display: block; }
.pop .small { color: #555; }
.site-marker {
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
@media (prefers-color-scheme: dark) {
  .site-marker { color: #04202e; border-color: #0b1620; }
  .pop .small { color: var(--muted); }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: .55rem;
  padding-bottom: 3rem;
}

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .35rem; }
}

.tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
  background: var(--surface-2);
}
.tile:hover img { transform: scale(1.04); }

.tile .meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .45rem .35rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  color: #fff;
  font-size: .72rem;
  text-align: left;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.tile:hover .meta, .tile:focus-visible .meta { opacity: 1; }

.tile .badge {
  position: absolute;
  top: .35rem;
  left: .35rem;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  border-radius: 6px;
  padding: .1rem .35rem;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .2rem;
}

.tile.selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.tile.hidden-item img { opacity: .38; filter: grayscale(1); }

.tile .check {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, .4);
}
.tile.selected .check { background: var(--accent); }

/* --- empty and loading --- */

.empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--muted);
}
.empty svg { width: 46px; height: 46px; opacity: .45; margin-bottom: .6rem; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.uploads {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(360px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 60;
  overflow: hidden;
}
.uploads header {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9rem;
}
.uploads ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.uploads li {
  padding: .4rem .8rem;
  font-size: .82rem;
  display: flex;
  gap: .5rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.uploads li:last-child { border-bottom: 0; }
.uploads .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploads .state { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.uploads .state.err { color: var(--danger); }
.uploads .state.ok { color: var(--ok); }

.bar { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; width: 54px; }
.bar > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }

/* --- modal --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 18, 28, .55);
  backdrop-filter: blur(2px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  width: min(460px, 100%);
  padding: 1.2rem;
  max-height: 90vh;
  overflow-y: auto;
}
.modal h2 { margin-top: 0; }
.modal .actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

/* --- lightbox --- */

.lightbox {
  position: fixed;
  inset: 0;
  /* iOS sizes a fixed element to the large viewport, so with inset alone the
     bottom of this sits behind Safari's toolbar and cannot be reached at all.
     dvh is the height actually on screen right now. */
  height: 100vh;
  height: 100dvh;
  background: #05121b;
  z-index: 90;
  display: flex;
  flex-direction: column;
}
@media (prefers-color-scheme: light) { .lightbox { background: #071824; } }

.lightbox .lb-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  color: #dbeafe;
  background: rgba(0, 0, 0, .35);
}
.lightbox .lb-top .title { flex: 1; min-width: 0; font-size: .9rem; }
.lightbox .lb-top .title b { display: block; font-weight: 600; }
.lightbox .lb-top .title span { color: #9fb8ca; font-size: .8rem; }
.lightbox .lb-top button {
  background: rgba(255, 255, 255, .1);
  border-color: transparent;
  color: #e8f4fb;
}
.lightbox .lb-top button:hover { background: rgba(255, 255, 255, .2); }

.lb-body { flex: 1; display: flex; min-height: 0; }

.lb-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: .5rem;
}
.lb-stage img, .lb-stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  border: 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-nav:hover { background: rgba(0, 0, 0, .65); }
.lb-nav.prev { left: .5rem; }
.lb-nav.next { right: .5rem; }

.lb-info {
  width: 330px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Room past the last control for the home indicator, so it is not flush
     against the bottom of the screen where it cannot be tapped. */
  padding: 1rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  overscroll-behavior: contain;
}
.lb-info.closed { display: none; }

@media (max-width: 800px) {
  .lb-body { flex-direction: column; }
  .lb-info {
    width: auto; max-height: 55vh; border-left: 0;
    border-top: 1px solid var(--border);
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  }
  /* The picture gives up room rather than the panel, since the panel is what
     holds the controls. */
  .lb-stage { min-height: 32vh; }
}

dl.meta-list { margin: 0; font-size: .85rem; }
dl.meta-list dt { color: var(--muted); font-size: .75rem; margin-top: .6rem; font-weight: 600; }
dl.meta-list dd { margin: 0; word-break: break-word; }

details.raw { margin-top: 1rem; }
details.raw summary { cursor: pointer; color: var(--muted); font-size: .82rem; }
details.raw pre {
  font-size: .72rem;
  background: var(--surface-2);
  padding: .6rem;
  border-radius: 8px;
  overflow-x: auto;
  max-height: 320px;
}

.tag-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.tag {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .75rem;
}

/* --- toast --- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .88rem;
  z-index: 200;
  box-shadow: var(--shadow);
}

/* --- tables (admin) --- */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }

.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs button {
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  padding: .55rem .8rem;
}
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

.stat-row { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .3rem 0 1rem; }
.stat { min-width: 6rem; }
.stat b { display: block; font-size: 1.4rem; font-weight: 650; letter-spacing: -.02em; }
.stat span { color: var(--muted); font-size: .78rem; }

.link-box {
  display: flex;
  gap: .4rem;
  align-items: center;
  background: var(--surface-2);
  border-radius: 8px;
  padding: .35rem .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  overflow: hidden;
}
.link-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.banner {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  font-size: .88rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
}
.banner.warn { background: var(--danger-soft); }