/* DJTL Nades — dark, single-column, media-first */

:root {
  --bg: #0d0d0f;
  --bg-raised: #151517;
  --bg-input: #1b1b1f;
  --bg-chip: #171719;
  --line: #26262b;
  --line-soft: #1f1f23;
  --text: #e8e8ec;
  --dim: #8b8b95;
  --dimmer: #5f5f68;
  --accent: #f0a92b;
  --accent-ink: #1a1206;
  --danger: #d9534f;

  --smoke: #9aa0a6;
  --flash: #e8d44d;
  --molotov: #e2622b;
  --he: #cf4f4f;
  --decoy: #6ea8d8;
  --other: #7a7a85;

  --topbar-h: 48px;
  --filters-h: 42px;
  --chrome: calc(var(--topbar-h) + var(--filters-h));
  --meta-h: 44px;
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  scrollbar-color: #34343a var(--bg);
}

body { overflow-y: scroll; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 15px;
  white-space: nowrap;
  color: var(--text);
}
.brand span { color: var(--dim); font-weight: 500; }

.searchwrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 120px;
  display: flex;
  align-items: center;
}
.searchwrap .mag {
  position: absolute;
  left: 11px;
  width: 15px; height: 15px;
  fill: none; stroke: var(--dimmer); stroke-width: 2;
  pointer-events: none;
}
#q {
  width: 100%;
  height: 32px;
  padding: 0 30px 0 32px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
}
#q::placeholder { color: var(--dimmer); }
#q:focus { border-color: #3a3a42; background: #1f1f24; }
#q::-webkit-search-cancel-button { display: none; }

.clear {
  position: absolute;
  right: 8px;
  background: none; border: 0;
  color: var(--dim);
  font-size: 18px; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
}
.clear:hover { color: var(--text); background: #26262c; }

.count {
  min-width: 30px;
  text-align: right;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.icon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--dim);
}
.icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon:hover { color: var(--text); background: #232329; }
.icon.on { color: var(--accent); border-color: #3a3128; }
.icon.sm { width: 24px; height: 24px; font-size: 17px; }

#sort {
  height: 30px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 6px;
}

.btn {
  height: 30px;
  padding: 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn:hover { background: #24242a; }
.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn.accent:hover { background: #ffbc41; }
.btn.danger { color: var(--danger); border-color: #3a2626; }

.account {
  height: 30px;
  padding: 0 8px;
  display: flex; align-items: center; gap: 6px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  max-width: 150px;
}
.account:hover { color: var(--text); }
.account img { width: 20px; height: 20px; border-radius: 50%; }
.account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- filter chips ---------- */

.filters {
  position: sticky;
  top: var(--topbar-h);
  z-index: 39;
  height: var(--filters-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.chipgroup { display: flex; gap: 6px; align-items: center; }
.chipsep { width: 1px; height: 18px; background: var(--line); flex: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  background: var(--bg-chip);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--dim);
  font-size: 12.5px;
  white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--line); }
.chip.on { background: #26262c; color: var(--text); border-color: #3a3a42; }
.chip .n { color: var(--dimmer); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.chip.on .n { color: var(--dim); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--other); }
.chip[data-nade="smoke"]   .dot { background: var(--smoke); }
.chip[data-nade="flash"]   .dot { background: var(--flash); }
.chip[data-nade="molotov"] .dot { background: var(--molotov); }
.chip[data-nade="he"]      .dot { background: var(--he); }
.chip[data-nade="decoy"]   .dot { background: var(--decoy); }

/* ---------- feed ---------- */

.feed { display: flex; flex-direction: column; }

.item {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--chrome));
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: var(--chrome);
}

.stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;   /* frame must inherit a definite height... */
  justify-content: center;
  padding: 16px;
  min-height: 0;
}

.nadebadge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #16161a;
  border: 1px solid var(--line);
  color: var(--other);
}
.nadebadge[data-nade="smoke"]   { color: var(--smoke);   border-color: #3a3d40; }
.nadebadge[data-nade="flash"]   { color: var(--flash);   border-color: #43401f; }
.nadebadge[data-nade="molotov"] { color: var(--molotov); border-color: #43291a; }
.nadebadge[data-nade="he"]      { color: var(--he);      border-color: #3f2323; }
.nadebadge[data-nade="decoy"]   { color: var(--decoy);   border-color: #24343f; }
.nadebadge:empty { display: none; }

/* ...so that the aspect-ratio placeholder inside it resolves to a real box and
   reserves the right amount of scroll height before the media arrives. */
.frame {
  position: relative;
  flex: 1 1 auto;        /* fills the stage across... */
  min-width: 0;
  min-height: 0;         /* ...and `align-items: stretch` above fills it down,
                            which gives .ph a definite height to size against */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The file itself is served at native resolution; only the box is constrained. */
.frame img, .frame video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - var(--chrome) - var(--meta-h) - 32px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
}

/* Native resolution. `margin: auto` centres the picture inside the scroll box
   without clipping it when it is larger than the box — which is exactly what
   `justify-content: center` would do instead. */
.item.zoomed .stage { overflow: auto; }
.item.zoomed .frame {
  flex: none;
  width: auto; height: auto;
  margin: auto;
}
.item.zoomed .frame img, .item.zoomed .frame video {
  max-width: none; max-height: none;
  width: auto; height: auto;
  cursor: zoom-out;
}

/* aspect-ratio placeholder keeps the scrollbar honest before media loads */
.ph {
  display: grid;
  place-items: center;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  background: #131316;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.frame.loaded .ph { display: none; }

.spin {
  width: 18px; height: 18px;
  border: 2px solid #2e2e35;
  border-top-color: #55555f;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }

.meta {
  flex: none;
  min-height: var(--meta-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: var(--bg-raised);
  border-top: 1px solid var(--line-soft);
}
.meta .grow { flex: 1 1 auto; }
.title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
  padding: 1px 3px;
}
.title[contenteditable="true"] {
  outline: 1px solid var(--accent);
  background: #202024;
  white-space: normal;
  max-width: none;
}
.dims { color: var(--dimmer); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; min-width: 0; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px;
  background: #1e1e22;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--dim);
}
.tag[data-cat="map"] { color: #cdd3d8; background: #202429; }
.tag[data-cat="nade"] { color: var(--text); }
.tag[data-cat="callout"] { color: #b6b6c0; }
.tag .x { display: none; border: 0; background: none; color: var(--dimmer); padding: 0 0 0 1px; font-size: 13px; line-height: 1; }
body.can-edit .tag:hover .x { display: inline; }
body.can-edit .tag:hover .x:hover { color: var(--danger); }

.mini {
  height: 22px; padding: 0 8px;
  background: #1e1e22;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  color: var(--dim);
  font-size: 11.5px;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.mini:hover { color: var(--text); background: #26262c; }
.mini.danger:hover { color: var(--danger); }
.rowtools { display: flex; gap: 5px; flex: none; }

.taginput {
  height: 22px; width: 190px;
  padding: 0 8px;
  background: #202024;
  border: 1px solid var(--accent);
  border-radius: 5px;
  outline: none;
  font-size: 11.5px;
}

/* ---------- grid mode ---------- */

.feed.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 12px;
}
.feed.grid .item {
  min-height: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}
.feed.grid .stage { padding: 0; aspect-ratio: 16 / 10; }
.feed.grid .frame { width: 100%; height: 100%; }
.feed.grid .frame img, .feed.grid .frame video {
  width: 100%; height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}
.feed.grid .ph { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.feed.grid .meta { flex-wrap: wrap; min-height: 0; padding: 8px 10px; gap: 6px; }
.feed.grid .title { font-size: 13px; max-width: 100%; }
.feed.grid .grow, .feed.grid .dims { display: none; }
.feed.grid .nadebadge { top: 8px; left: 8px; }

/* ---------- empty state ---------- */

.empty { padding: 80px 20px; text-align: center; color: var(--dim); }
.empty .big { font-size: 17px; margin: 0 0 6px; color: var(--text); }
.empty .sub { margin: 0; font-size: 13px; }

/* ---------- uploads ---------- */

.uploads {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 60;
  width: 330px;
  max-height: 46vh;
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px #000a;
}
.uploads header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.uploads header span { color: var(--dim); font-size: 12px; margin-left: auto; }
.uploads ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.uploads li { padding: 6px; font-size: 12px; }
.uploads .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.uploads .bar { height: 3px; margin-top: 5px; background: #26262c; border-radius: 2px; overflow: hidden; }
.uploads .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .18s ease; }
.uploads li.done .bar i { background: #4c9a5e; }
.uploads li.failed .nm { color: var(--danger); }
.uploads li.failed .bar i { background: var(--danger); }

.drophint {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: #000000cc;
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.drophint div {
  padding: 22px 34px;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  color: var(--accent);
  font-size: 17px;
  font-weight: 600;
}

/* ---------- modals ---------- */

.modal {
  width: min(660px, 94vw);
  padding: 20px;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.modal.small { width: min(340px, 94vw); }
.modal::backdrop { background: #000b; }
.modal h3 { margin: 0 0 6px; font-size: 16px; }
.modal .close { position: absolute; top: 12px; right: 12px; }
.modal form[method="dialog"] { margin: 0; }
.hint { color: var(--dim); font-size: 12.5px; margin: 0 0 14px; }
.err { color: var(--danger); font-size: 12.5px; margin: 10px 0 0; }
.modal .row { display: flex; gap: 8px; margin-top: 14px; }

#usersTable { width: 100%; border-collapse: collapse; font-size: 13px; }
#usersTable td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
#usersTable td.who { display: flex; align-items: center; gap: 8px; }
#usersTable img { width: 22px; height: 22px; border-radius: 50%; }
#usersTable .id { color: var(--dimmer); font-size: 11.5px; font-variant-numeric: tabular-nums; }
#usersTable select { background: var(--bg-input); border: 1px solid var(--line); border-radius: 5px; height: 24px; }
#usersTable .rm { background: none; border: 0; color: var(--dimmer); }
#usersTable .rm:hover { color: var(--danger); }

.adduser { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.adduser input, .adduser select {
  height: 30px; padding: 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
}
.adduser #newUserId { flex: 1 1 190px; }
.adduser #newUserNote { flex: 1 1 120px; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 100;
  padding: 9px 16px;
  background: #202026;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 8px 24px #000a;
}
.toast.bad { border-color: #4a2a2a; color: #f0b3b1; }

/* ---------- narrow screens ---------- */

@media (max-width: 860px) {
  :root { --topbar-h: 44px; }
  .brand, .count, #sort { display: none; }
  .topbar { gap: 6px; padding: 0 8px; }
  #q { font-size: 16px; } /* stops iOS zooming on focus */
  .account { max-width: 44px; }
  .account span { display: none; }
  .meta { flex-wrap: wrap; }
  .title { max-width: 100%; }
}