/* image-hosting
   ------------------------------------------------------------------------
   One stylesheet for the whole site, served under a name that contains a hash
   of its contents so it is fetched once and then never again.

   It is written as tokens first and components second. Anything a page wants
   to look different about should be a variable here rather than a style
   attribute there.

   The palette is deliberately the least interesting one in the family. The
   sibling sites are a warm cookbook and a workshop-grey garage, because on
   those the page is the thing being looked at. Here the page is a frame: a
   coloured surround shifts how the colours inside a photograph read, and a
   library of pictures should not be tinted by the furniture around it. So the
   greys are neutral - no warmth, no blue - and the one accent appears on
   buttons and nowhere near a picture. */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;

  /* Surfaces, furthest to nearest: the page, the cards on it, the things that
     sit on a card, and a well for the things that sit under one. */
  --bg: #f7f7f8;
  --surface: #ffffff;
  --raised: #fbfbfc;
  --sunken: #eeeef1;

  --text: #17171a;
  --muted: #6b6b73;
  --faint: #97979f;
  --line: #e3e3e7;
  --line-strong: #cdcdd4;

  --accent: #3a5ccc;
  --accent-hover: #2f4bad;
  --accent-text: #ffffff;
  --accent-weak: #eef1fc;
  --accent-line: #d3dbf6;

  --error-bg: #fcecec;
  --error-text: #a32424;
  --ok-bg: #e8f4ec;
  --ok-text: #1c6b39;
  --warn-bg: #fdf3e2;
  --warn-text: #855313;

  /* The mat a picture is shown against. It is the same in both themes and
     darker than either page, because a photograph with light edges needs
     something to end against and a white one next to a white card does not. */
  --mat: #1c1c1f;

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 25, 0.05);
  --shadow-md: 0 1px 3px rgba(20, 20, 25, 0.06), 0 6px 16px -6px rgba(20, 20, 25, 0.10);
  --shadow-lg: 0 2px 6px rgba(20, 20, 25, 0.07), 0 18px 40px -18px rgba(20, 20, 25, 0.20);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* A monospace for the things that get copied rather than read: urls,
     markdown, an img tag. Seeing where a url ends matters more than it
     reading nicely. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --page: 1100px;
  --gutter: 24px;

  /* Tapping. 44px is the smallest thing a thumb hits reliably. */
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113;
    --surface: #1a1a1d;
    --raised: #212125;
    --sunken: #0d0d0f;

    --text: #f0f0f2;
    --muted: #9d9da6;
    --faint: #74747d;
    --line: #2c2c31;
    --line-strong: #3d3d44;

    --accent: #7c95ef;
    --accent-hover: #93a8f4;
    --accent-text: #0b1024;
    --accent-weak: #1a1f35;
    --accent-line: #2b3357;

    --error-bg: #391b1b;
    --error-text: #ffada6;
    --ok-bg: #14291d;
    --ok-text: #8fd6a6;
    --warn-bg: #32260f;
    --warn-text: #f0cd8a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.45), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px -18px rgba(0, 0, 0, 0.75);
  }
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--gutter) var(--gutter) 64px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Signed out pages are a single centred card; signed in pages are a page. */
body.centred {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--gutter);
}

body.centred main {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
}

main {
  max-width: var(--page);
  margin: 0 auto;
}

main.wide { max-width: 1280px; }
main.narrow { max-width: 720px; }

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 16px; }
p.tight { margin-bottom: 6px; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

.muted { color: var(--muted); }
.muted-small { color: var(--muted); font-size: 0.83rem; }
.faint { color: var(--faint); }

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

/* ------------------------------------------------------------ navigation */

.bar {
  max-width: 1280px;
  margin: 0 auto 24px;
}

.bar nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 10px;
  box-shadow: var(--shadow-sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  padding: 8px 12px;
  letter-spacing: -0.01em;
}

.bar .tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  font-size: 0.92rem;
}

.bar .tab:hover { background: var(--sunken); color: var(--text); }
.bar .tab.on { background: var(--accent-weak); color: var(--accent); font-weight: 600; }

.spacer { flex: 1; }

.who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  max-width: 190px;
}

.who:hover { background: var(--sunken); color: var(--text); }
.who.on { background: var(--accent-weak); color: var(--accent); }
.who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The same links again along the bottom, for a phone. Only one of the two is
   ever on screen. */
.tabbar { display: none; }

@media (max-width: 720px) {
  .bar nav .tab { display: none; }

  /* The account link leaves the top bar rather than shrinking to its icon.
     Shrinking was the obvious move and it is wrong here: the icons are
     optional, so a site running without a Font Awesome kit would be left with
     a link that is an empty inline element - invisible, and still tappable.
     The bottom bar has Account on it, so nothing is lost by dropping this one.

     What stays is Sign out, because that is the one thing the tab bar has no
     room for and the one people go looking for on a borrowed machine. */
  .bar .who { display: none; }
  .brand { padding-left: 8px; }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index: 20;
  }

  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    padding: 6px 2px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.68rem;
    min-height: var(--tap);
  }

  .tabbar a.on { color: var(--accent); font-weight: 600; }
  .tabbar .ico { font-size: 1.1rem; }

  body { padding-bottom: 92px; }
}

/* -------------------------------------------------------------- controls */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

button:hover, .button:hover { background: var(--accent-hover); color: var(--accent-text); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.block, .button.block { width: 100%; }

button.quiet, .button.quiet {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}

button.quiet:hover, .button.quiet:hover { background: var(--sunken); color: var(--text); }

button.danger {
  background: var(--surface);
  color: var(--error-text);
  border-color: var(--line-strong);
}

button.danger:hover { background: var(--error-bg); color: var(--error-text); }

button.link {
  background: none;
  border: none;
  color: var(--muted);
  font-weight: 500;
  padding: 8px 12px;
  min-height: auto;
  font-size: 0.9rem;
}

button.link:hover { background: var(--sunken); color: var(--text); }

button.small, .button.small {
  min-height: 34px;
  padding: 6px 13px;
  font-size: 0.85rem;
}

label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 6px;
}

input[type="text"], input[type="email"], input[type="search"], input[type="url"],
textarea, select {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  margin: 0 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

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

input.inline, select.inline { margin: 0; }

input[type="checkbox"] { width: auto; min-height: auto; accent-color: var(--accent); }

.fields {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: start;
}

.fields > * { flex: 1 1 220px; min-width: 0; }

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.row.end { justify-content: flex-end; }

/* --------------------------------------------------------------- banners */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 0.92rem;
  margin: 0 0 18px;
}

.banner.ok { background: var(--ok-bg); color: var(--ok-text); }
.banner.warn { background: var(--warn-bg); color: var(--warn-text); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  vertical-align: middle;
}

.pill.on { background: var(--accent-weak); color: var(--accent); }
.pill.warn { background: var(--warn-bg); color: var(--warn-text); }
.pill.ok { background: var(--ok-bg); color: var(--ok-text); }

.ico { width: 1em; text-align: center; }
.ico-accent { color: var(--accent); }

/* ---------------------------------------------------------- page heading */

.list-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 28px 0 14px;
}

.list-head .count { margin-left: auto; }

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 20px;
}

.toolbar .grow { flex: 1 1 240px; min-width: 0; }

/* ------------------------------------------------------------------ tags */

/* A tag is a link, and it has to read as one. These are laid out as a wrapping
   row rather than a list, because what somebody does on the tags page is scan
   for a word rather than read down a column. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  /* The hash is drawn dimmer than the word in the markup below; this keeps the
     whole chip from shifting when the icons arrive. */
  line-height: 1.4;
}

.tag:hover {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent);
}

.tag .ico { color: var(--muted); }
.tag:hover .ico { color: var(--accent); }

/* The count sits inside the chip rather than after it, so a wrapped row cannot
   separate a number from the tag it belongs to. */
.tag .count {
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.tag:hover .count { background: var(--surface); color: var(--accent); }

/* ----------------------------------------------------------- tag editor */

/* The box reads as one text field with things in it, so it borrows the input
   rules above rather than inventing a second look. What it cannot borrow is the
   height: it grows by rows as chips wrap, where an input never does. */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 6px 8px;
  margin: 0 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: text;
}

/* The focus ring belongs to the box rather than to the bare input inside it,
   or focusing the field draws an outline around a sliver in the corner. */
.chips:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chips input[type="text"] {
  flex: 1 1 8ch;
  width: auto;
  min-width: 8ch;
  min-height: auto;
  padding: 4px 2px;
  margin: 0;
  border: 0;
  background: none;
}

.chips input[type="text"]:focus-visible { outline: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 4px 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  /* Tags are one word by construction, so a chip never needs to wrap - and a
     wrapped one would put its remove button on a line of its own. */
  white-space: nowrap;
}

.chip .ico { color: inherit; opacity: 0.65; }

.chip .drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A real tap target rather than a glyph. This is the control somebody
     reaches for on a phone, and the whole reason the chips exist. */
  width: 22px;
  height: 22px;
  min-height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 0.78rem;
  opacity: 0.7;
  cursor: pointer;
}

.chip .drop:hover {
  background: var(--accent);
  color: var(--surface);
  opacity: 1;
}

/* Typing a tag that is already on the picture flashes the one it has, rather
   than doing nothing and looking broken. */
.chip.flash { animation: chip-flash 0.5s ease; }

@keyframes chip-flash {
  0%, 100% { background: var(--accent-weak); }
  30% { background: var(--accent); color: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  .chip.flash { animation: none; outline: 2px solid var(--accent); }
}

/* ---------------------------------------------------------------- upload */

.drop {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 34px 24px;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.drop.over {
  border-color: var(--accent);
  background: var(--accent-weak);
}

.drop h2 { margin-bottom: 6px; }
.drop p { margin: 6px 0 16px; color: var(--muted); font-size: 0.9rem; }

.drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The tag box inside the drop area. The area is centred text and this is a
   labelled field, so it gets its own left-aligned block with a width that stops
   it stretching across a wide screen for no reason. */
.pretags {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}

.pretags label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.pretags .chips { margin-bottom: 0; }

.vault-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.86rem;
  cursor: pointer;
}

.vault-opt input { width: auto; min-height: auto; margin: 0; }

.vault-intro { margin: 0 0 14px; }

/* A labelled checkbox that reads as one setting. */
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}

.switch-row input { width: auto; min-height: auto; margin: 0; }
.switch-row input:disabled + span { color: var(--muted); }

/* The fun-stats strip. Four small tiles that wrap to two columns on a phone. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.stat .label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.stat strong {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat a { color: inherit; text-decoration: none; min-width: 0; }
.stat a strong { display: block; font-size: 1rem; line-height: 1.9; }
.stat a:hover strong { color: var(--accent); }
.stat .unit { color: var(--muted); font-size: 0.76rem; }
.stat strong small { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.stat .kudos-total { font-size: 1.05rem; }

.tile .badge .kudos-count { display: inline-flex; align-items: center; gap: 4px; }
.tile .badge .kudos-count:not(:first-child) { margin-left: 6px; }

/* The thumbs up, tinted once given. */
button.kudos.on {
  background: var(--accent-weak);
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr 1fr; }
}

/* A queue row's Vault toggle, tinted once the meme is in the Vault. */
.queue .item .vault-toggle.on {
  background: var(--accent-weak);
  color: var(--accent);
  border-color: var(--accent);
}

/* One row per file being uploaded, with its own progress and its own failure.
   A batch where the fourth file was a HEIC should upload the other three and
   say what happened to the fourth. */
.queue { margin: 18px 0 0; display: grid; gap: 8px; }

.queue .item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  text-align: left;
}

/* Small enough to leave the row one line tall on a phone, big enough to tell
   two screenshots apart. */
.queue .item .thumb {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--surface);
}

.queue .item .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue .item .state { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }

/* A finished row's tag box, on a line of its own under the name and buttons. */
.queue .item .rowtags { flex: 1 1 100%; }
.queue .item .rowtags .chips { margin: 0; min-height: auto; }

.queue .item.failed { background: var(--error-bg); border-color: transparent; }
.queue .item.failed .state { color: var(--error-text); }
.queue .item.done .state { color: var(--ok-text); }

/* --------------------------------------------------------------- library */

.grid {
  display: grid;
  /* 148px rather than something more comfortable because of what the narrowest
     phone does with it: at 375px there is 327px of room, and a minimum above
     157px drops the grid to a single column - one photograph per screen, which
     is a viewer rather than a library. Two columns is the floor worth holding
     onto, and a wide screen fills out to whatever fits. */
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mat);
  border: 1px solid var(--line);
  text-decoration: none;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* A picture arriving is less jarring than a picture appearing. */
  transition: transform 0.18s ease;
}

.tile:hover img { transform: scale(1.03); }

/* The caption sits over the bottom of the picture rather than under it, so the
   tiles stay a grid of squares whatever the titles are doing. It is only drawn
   when there is something to say. */
.tile .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile .badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* The view count sits opposite the private badge so the two can be on one tile
   without overlapping. */
.tile .badge.vaulted { color: var(--accent); }

.tile .badge.views {
  right: auto;
  left: 8px;
}

.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.empty h2 { margin-bottom: 8px; color: var(--text); }

/* ----------------------------------------------------------- one picture */

.frame {
  background: var(--mat);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tall enough to be a frame around a wide picture, and bounded so a portrait
     photograph does not need scrolling past to reach what is written about
     it. */
  min-height: 220px;
  max-height: 78vh;
}

.frame img {
  max-width: 100%;
  max-height: 78vh;
  display: block;
  object-fit: contain;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin: 18px 0 0;
}

.panel h2 { margin-bottom: 14px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* Facts about a picture, as a list of label and value rather than a table:
   there is one of it, and a table of one row reads as a mistake. */
.facts { display: grid; gap: 10px; margin: 0; }

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.88rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- choices */

/* Two states shown at once with the current one marked, rather than one button
   that does the opposite of whatever is true now. A lone toggle never says what
   a thing currently is - only what pressing it would do - and when the label for
   the way back reads as an action rather than an undo ("Share by link" on a
   private picture), the door looks like it only opens one way. */

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 420px) {
  .choices { grid-template-columns: 1fr; }
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  min-height: var(--tap);
}

.choice:hover { background: var(--sunken); color: var(--text); }

.choice .ico { margin-top: 2px; color: var(--faint); }
.choice span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.choice strong { font-weight: 650; font-size: 0.92rem; }
.choice small { color: var(--muted); font-size: 0.76rem; line-height: 1.35; }

/* The current state. It is marked with a border and a tint rather than only a
   colour, so which one is active survives being looked at by somebody who
   cannot separate the two colours. */
.choice.on {
  border-color: var(--accent);
  background: var(--accent-weak);
  cursor: default;
}

.choice.on .ico,
.choice.on strong { color: var(--accent); }
.choice.on:hover { background: var(--accent-weak); }

/* --------------------------------------------------------- copyable urls */

.copy {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sunken);
}

.copy input {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  min-height: 40px;
  padding: 8px 12px;
}

.copy input:focus-visible { outline-offset: -2px; }

.copy button {
  border: 0;
  border-radius: 0;
  border-left: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  min-height: 40px;
  padding: 0 15px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.copy button:hover { background: var(--accent-weak); color: var(--accent); }
.copy button.done { background: var(--ok-bg); color: var(--ok-text); }

.copy + label { margin-top: 14px; }

/* ------------------------------------------------------------ share page */

/* What somebody who is not signed in sees: the picture, and a line under it.
   No navigation, nothing to join, nothing to scroll. */
.share {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
}

.share .frame {
  width: 100%;
  max-height: 88vh;
  background: transparent;
}

.share .frame img { max-height: 88vh; }

.share .footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}

body.share-page {
  padding: var(--gutter);
  background: var(--bg);
}

/* ---------------------------------------------------------------- tables */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--raised);
  font-weight: 650;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--raised); }

/* --------------------------------------------------------------- motion */

/* Everything above animates for feedback rather than for decoration, so there
   is nothing here that has to be replaced when it is turned off. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}