/* Two layouts, one DOM (spec S8.1).
 *
 * `terminal` is the rnelnet.com homepage continued: one 40rem column, prompt
 * lines, `# comment` greys, a blinking cursor. `darkroom` re-lays the exact
 * same markup edge to edge on a near-black ground so the photographs carry the
 * page. Everything below is either shared, or under one of the two
 * `body[data-view=...]` blocks - there is no third state and no JavaScript.
 *
 * Tokens are site/style.css's, unchanged, so a visitor moving between
 * rnelnet.com and /photos never crosses a seam.
 */

:root {
  --bg: #0d1117;
  --fg: #c9d1d9;
  --bright: #f0f6fc;
  --green: #7ee787;
  --blue: #79c0ff;
  --grey: #8b949e;
  --dim: #484f58;
  --dimmer: #30363d;
  --darkroom-bg: #010409;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--bg);
}

body {
  color: var(--fg);
  background: var(--bg);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.9;
  min-height: 100vh;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--bright); }
img { max-width: 100%; }

h1 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.05em; color: var(--bright); }

.green { color: var(--green); }
.prompt { color: var(--green); }
.cmd { color: var(--fg); }
.comment { color: var(--grey); }
.dim { color: var(--dim); }
.dimmer { color: var(--dimmer); }
.dim a, .dimmer a { color: var(--grey); }

.cursor {
  display: inline-block;
  width: 0.6em; height: 1.15em;
  background: var(--green);
  vertical-align: text-bottom;
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* --- chrome --------------------------------------------------------------- */

.shell { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand { letter-spacing: 0.04em; }
.brand a { color: var(--bright); }
.brand a + a { color: var(--dim); }
.brand a + a:hover { color: var(--fg); }

.tools { display: flex; align-items: baseline; gap: 0.9rem; font-size: 0.8rem; }
.tools form { display: inline; }
.tools button {
  font: inherit;
  color: var(--blue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.tools button:hover { color: var(--bright); }
.tools .me { display: inline-flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.tools .me .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.tools .me .badge { font-size: 0.68rem; line-height: 1.4; }
@media (max-width: 480px) {
  /* canvas "Header", phone: the address truncates to its local part */
  .tools .me .who.addr .dom { display: none; }
  .tools .me .who.addr::after { content: "@\2026"; }
  .tools .me .who { max-width: 8rem; }
}

main { flex: 1; }

footer { color: var(--dimmer); font-size: 0.7rem; }

section + section { margin-top: 2.2rem; }
.pagehead { margin-bottom: 1.4rem; }
.pagehead h1 { margin-top: 0.2rem; }
.crumb + .crumb { margin-left: 0; }

.paging { display: flex; gap: 1.2rem; align-items: baseline; margin-top: 2rem; font-size: 0.85rem; }

/* --- listings ------------------------------------------------------------- */

.rows { margin: 0.6rem 0 1.2rem; }
.note { margin-top: 0.4rem; }
.notice.processing {
  border: 1px solid #30363d;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  color: var(--green);
}
.row a { color: var(--blue); }
.nothumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  color: var(--dimmer);
  background: #11161d;
}

.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.strip .cell { display: block; line-height: 1.3; }
.strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 1px solid var(--dimmer);
}
.strip .cell:hover img { border-color: var(--grey); }
.cap {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.62rem;
  color: var(--dim);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.grid + .grid { margin-top: 2px; }
.grid .card { display: block; position: relative; background: #0a0e14; }
.grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.grid figcaption {
  padding: 0.45rem 0.6rem;
  font-size: 0.68rem;
  color: var(--dim);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.grid .card:hover figcaption { color: var(--fg); }
.grid.cards figcaption { color: var(--fg); }

/* --- photo page ----------------------------------------------------------- */

.photo { display: grid; gap: 1.2rem; }
.photonav { grid-area: nav; display: flex; gap: 1.2rem; align-items: baseline; font-size: 0.85rem; }
.frame { grid-area: img; }
.rail { grid-area: rail; }

.frame img, .frame video { display: block; max-width: 100%; height: auto; }

.rail h1 { margin: 0.4rem 0; }
.rail .caption { color: var(--fg); margin-bottom: 0.8rem; }
.sizes a, .sizes .current { margin-left: 0.55rem; }
.sizes .current { color: var(--bright); text-decoration: underline; }
.slideshow { font-size: 0.85rem; }
.exif { margin-top: 1.4rem; }
.exif dl { display: grid; grid-template-columns: auto 1fr; gap: 0 0.8rem; font-size: 0.78rem; }
.exif dt { color: var(--dim); }
.exif dd { color: var(--fg); overflow-wrap: anywhere; }

/* --- comments / hide request ----------------------------------------------- */

.comments, .hide-request { margin-top: 1.4rem; }
.comment-list { margin: 0.6rem 0 1rem; list-style: none; }
.comment-item + .comment-item { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--dimmer); }
.comment-item .who { color: var(--fg); }
.comment-item .body { margin-top: 0.2rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.comments textarea, .hide-request input, .hide-request textarea {
  font: inherit;
  color: var(--fg);
  background: #11161d;
  border: 1px solid var(--dimmer);
  padding: 0.4rem 0.5rem;
  width: 100%;
  max-width: 28rem;
}
.comments button, .hide-request button {
  font: inherit;
  color: var(--blue);
  background: none;
  border: 1px solid var(--dimmer);
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.comments button:hover, .hide-request button:hover { color: var(--bright); border-color: var(--grey); }
.hide-request summary { cursor: pointer; color: var(--dimmer); }
.hide-request summary:hover { color: var(--grey); }
.hide-request details { margin-top: 0.4rem; }

/* --- login prompt --------------------------------------------------------- */

.locked { text-align: center; padding: 3rem 0; }
.lock { color: var(--dim); }
.locked .prompt { margin-top: 1rem; }
.unlock { color: var(--green); }
.unlock:hover { color: var(--bright); }

/* --- terminal ------------------------------------------------------------- */

body[data-view="terminal"] .shell {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 6vh 1.5rem 3rem;
}
body[data-view="terminal"] .topbar { padding-bottom: 1.6rem; }
body[data-view="terminal"] footer { margin-top: 3.5rem; }
body[data-view="terminal"] .photo {
  grid-template-areas: "nav" "img" "rail";
  grid-template-columns: minmax(0, 1fr);
}
body[data-view="terminal"] .frame { border: 1px solid var(--dimmer); }

/* --- darkroom ------------------------------------------------------------- */

body[data-view="darkroom"] { background: var(--darkroom-bg); }
body[data-view="darkroom"] .shell { max-width: none; padding: 0; }
body[data-view="darkroom"] .topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  line-height: 1.6;
  background: rgba(1, 4, 9, 0.94);
  border-bottom: 1px solid var(--dimmer);
}
body[data-view="darkroom"] .brand { font-size: 0.8rem; }
body[data-view="darkroom"] main { padding: 1.2rem 0 2rem; }
body[data-view="darkroom"] .pagehead,
body[data-view="darkroom"] .paging,
body[data-view="darkroom"] .rows,
body[data-view="darkroom"] main > p,
body[data-view="darkroom"] main > section > p,
body[data-view="darkroom"] footer { padding-left: 1rem; padding-right: 1rem; }
body[data-view="darkroom"] footer { padding-bottom: 1.5rem; }
/* management sections (/me, /admin) and their siblings: darkroom's shell drops
   main's gutter, so give them the same inset the rail and rows get. */
body[data-view="darkroom"] .manage,
body[data-view="darkroom"] .comments,
body[data-view="darkroom"] .exif,
body[data-view="darkroom"] .hide-request { padding-left: 1rem; padding-right: 1rem; }
/* The shell grammar ($, the blinking cursor) is terminal-only; the words it
   wraps are the page's real labels, so they stay - a darkroom page still says
   which path you are looking at, just without pretending to be a terminal. */
body[data-view="darkroom"] .sh,
body[data-view="darkroom"] .sh-line { display: none; }
body[data-view="darkroom"] .prompt {
  color: var(--dim);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
body[data-view="darkroom"] .prompt .cmd { color: var(--dim); }
body[data-view="darkroom"] .note { font-size: 0.72rem; line-height: 2.4; }
body[data-view="darkroom"] .notice.processing { margin: 0 1rem 1rem; }
body[data-view="darkroom"] .photo {
  grid-template-areas: "nav rail" "img rail";
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto 1fr;
  padding: 0 1rem;
}
body[data-view="darkroom"] .rail { border-left: 1px solid var(--dimmer); padding-left: 1.2rem; }
body[data-view="darkroom"] .frame { display: grid; place-items: center; }

@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  body[data-view="darkroom"] .photo {
    grid-template-areas: "nav" "img" "rail";
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-view="darkroom"] .rail { border-left: 0; padding-left: 0; }
}

@media (max-width: 480px) {
  body { font-size: 13.5px; }
  body[data-view="terminal"] .shell { padding-top: 4vh; }
}

/* --- management pages (/me, /admin) --------------------------------------- */
/* Deliberately plain: these are forms, not photographs. The same rules apply in
   both views - darkroom only changes the shell around them. */

.manage .block { margin: 0.8rem 0 1.4rem; padding-left: 0.8rem; border-left: 1px solid var(--dimmer); }
.manage h2 { font-size: 0.95rem; font-weight: 500; color: var(--bright); margin-bottom: 0.4rem; }
.manage p { margin: 0.35rem 0; }
.manage label { color: var(--dim); font-size: 0.8rem; }
.manage .plain { list-style: none; margin: 0.4rem 0; }
.manage .plain li { line-height: 1.9; }
.manage form { display: inline; }
.manage details { margin: 0.6rem 0; }
.manage summary { cursor: pointer; color: var(--green); }
.manage summary:hover { color: var(--bright); }
.manage details > form { display: block; margin-top: 0.5rem; }
.manage table { border-collapse: collapse; width: 100%; font-size: 0.78rem; }
.manage th, .manage td { text-align: left; padding: 0.25rem 0.6rem 0.25rem 0; vertical-align: top; }
.manage th { color: var(--dim); font-weight: 500; border-bottom: 1px solid var(--dimmer); }
.manage td { border-bottom: 1px solid rgba(48, 54, 61, 0.4); overflow-wrap: anywhere; }
.manage .wide { display: block; width: 100%; max-width: 32rem; }
.manage .err { color: var(--red, #f85149); }

.manage input[type="text"], .manage input[type="email"], .manage input[type="number"],
.manage textarea, .manage select {
  font: inherit;
  font-size: 0.82rem;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--dimmer);
  padding: 0.25rem 0.4rem;
  max-width: 100%;
}
.manage textarea { width: 100%; max-width: 32rem; }
.manage select[multiple] { min-width: 12rem; min-height: 6rem; }
.manage button {
  font: inherit;
  font-size: 0.78rem;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--dimmer);
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.manage button:hover { color: var(--bright); border-color: var(--grey); }
.manage .danger { color: var(--dim); }
.manage .danger:hover { color: #f85149; border-color: #f85149; }

/* --- tag fields + upload progress (upload, photo edit) --------------------- */
/* Checkbox lists instead of <select multiple> (spec S8.1 amendment). Same in
   both views: these are forms, and darkroom only changes the shell. */

fieldset.tags { border: 0; padding: 0; margin: 0.6rem 0 1rem; }
fieldset.tags legend { color: var(--dim); font-size: 0.8rem; }
.tag-kind { margin-top: 1rem; }
.tag-kind + .tag-kind { margin-top: 1.4rem; }
.tag-status { font-size: 0.85rem; }

.tag-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0 0.8rem;
  margin: 0.25rem 0 0.4rem;
}
.tag-list li { min-width: 0; }
.tag-list label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.2rem;
  padding: 0 0.4rem;
  margin-left: -0.4rem;
  color: var(--grey);
  font-size: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.tag-list label:hover { background: #11161d; }
.tag-list label:has(:checked) { color: var(--bright); }
.tag-list input[type="checkbox"] { accent-color: var(--green); flex: none; }
.tag-list li.just-added label { outline: 1px solid var(--green); outline-offset: -1px; }

.manage .default-submit { position: absolute; left: -9999px; }
.tag-tools { margin: 0 0 0.4rem; }
.tag-tools button {
  font: inherit;
  font-size: 0.78rem;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--dimmer);
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.tag-tools button:hover { color: var(--bright); border-color: var(--grey); }
.tag-more summary { color: var(--dim); font-size: 0.8rem; cursor: pointer; margin: 0.2rem 0; }
.tag-more summary:hover { color: var(--grey); }
.tag-more[open] summary { margin-bottom: 0.2rem; }

.tag-add label { color: var(--dim); font-size: 0.8rem; }
.tag-add input[type="text"] {
  display: inline-block;
  width: 14rem;
  max-width: 100%;
  margin-left: 0.3rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--dimmer);
  padding: 0.25rem 0.4rem;
}
.tag-add input.error { border-color: var(--red, #f85149); }
.tag-add button {
  font: inherit;
  font-size: 0.78rem;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--dimmer);
  padding: 0.15rem 0.6rem;
  margin-left: 0.4rem;
  cursor: pointer;
}
.tag-add button:hover { color: var(--bright); border-color: var(--grey); }
.tag-add-error { font-size: 0.8rem; }

.file-summary { margin-left: 0.5rem; font-size: 0.8rem; }
.upload-progress { margin: 1rem 0; }
.upload-progress progress {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: 6px;
  margin: 0.3rem 0;
  accent-color: var(--green);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--dimmer);
}
.upload-progress progress::-webkit-progress-bar { background: var(--dimmer); }
.upload-progress progress::-webkit-progress-value { background: var(--green); }
.upload-progress progress::-moz-progress-bar { background: var(--green); }
.upload-status { color: var(--fg); }
form.uploading > :not(.upload-progress) { opacity: 0.4; }
.upload-failed { color: var(--red, #f85149); }

@media (max-width: 480px) {
  .tag-list { grid-template-columns: minmax(0, 1fr); }
  .tag-add input[type="text"] { width: 100%; margin-left: 0; }
}

/* --- batch page (upload progress) ----------------------------------------- */
.batch-files { border-collapse: collapse; margin-top: 0.8rem; }
.batch-files td { padding: 0.25rem 1rem 0.25rem 0; border-top: 1px solid var(--dimmer); vertical-align: middle; }
.batch-files tr:first-child td { border-top: 0; }
.batch-files td.state { color: var(--dim); }
.batch-files td.link img { height: 48px; width: auto; display: block; }
body[data-view="darkroom"] .batch-files { margin-left: 1rem; margin-right: 1rem; }

/* --- people page (admin/people.html; canvas "People & access") ------------ */
/* Login badges, the waiting/person rows and their opened details. Same in
   both views: these are admin forms, and darkroom only changes the shell. */

.badge {
  display: inline-block;
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0 0.4rem;
  border: 1px solid var(--dimmer);
  color: var(--grey);
  white-space: nowrap;
}
.badge.ok { color: var(--green); }
.badge.warn { color: #e3b341; border-color: #5a4a1e; }
.badge.relay { color: var(--grey); }
.badge.local { color: var(--dim); }

.manage .comment.ok { color: var(--green); }
.manage .rows { border-top: 1px solid var(--dimmer); }
.manage .row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--dimmer);
  min-height: 44px;
}
.manage .row .who { flex: 1 1 auto; min-width: 0; }
.manage .row .who .name { color: var(--bright); }
.manage .row .meta {
  color: var(--grey);
  font-size: 0.8rem;
  line-height: 1.6;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.manage .row .acts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; flex: none; padding-top: 0.15rem; }
.manage .row .seen { color: var(--dim); font-size: 0.78rem; white-space: nowrap; flex: none; padding-top: 0.2rem; }
.manage .row.person { display: block; }
.manage .row.person summary { display: flex; gap: 0.8rem; align-items: flex-start; color: inherit; }
.manage .row.person summary .name::before { content: "\25B8 "; color: var(--dim); }
.manage .row.person[open] summary .name::before { content: "\25BE "; }
.manage .row.person summary:hover .name { color: var(--green); }
.manage .detail { margin: 0.2rem 0 0.8rem 1.15rem; padding-left: 0.8rem; border-left: 1px solid var(--dimmer); font-size: 0.85rem; }
.manage .detail p { margin: 0.25rem 0; }
.manage .detail .line, .manage form.line { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; min-height: 36px; }
.manage .detail .h { color: var(--dim); font-size: 0.78rem; margin-top: 0.5rem; }
.manage .more { margin: 0.2rem 0; flex-basis: 100%; }
.manage .more summary { color: var(--dim); font-size: 0.78rem; }
.manage .more summary:hover { color: var(--grey); }
.manage .row .more { flex: none; flex-basis: auto; }
.manage .row .more[open] { flex-basis: 100%; }
.manage form.inline { display: inline; }
.manage .confirm { display: inline-flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.manage .btn {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--grey);
  border: 1px solid var(--dimmer);
  padding: 0.15rem 0.6rem;
  line-height: normal;
}
.manage .btn:hover { color: var(--bright); border-color: var(--grey); }
.manage .primary { color: var(--green); border-color: var(--dim); }
.manage .primary:hover { color: var(--green); border-color: var(--green); }