/* Colours and controls are the browser's own wherever possible. The only colours chosen
   here are the bar, taken from the bear's facial markings and fur, and the error red. */
:root {
  color-scheme: light dark;
  --tan: #f3c48b;
  --fur: #2c1e1c;
  --quiet: color-mix(in srgb, CanvasText 62%, Canvas);
  --rule: color-mix(in srgb, CanvasText 20%, Canvas);
  --gutter: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: Canvas;
  color: CanvasText;
  font: 14px/1.5 Verdana, "DejaVu Sans", Geneva, sans-serif;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
h1 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
p { margin: 0 0 10px; }
pre, code { font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: 13px; }
button, input { font: inherit; }
[hidden] { display: none !important; }
#app:focus { outline: none; }

.quiet { color: var(--quiet); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.error { color: light-dark(#b00020, #ff8f85); font-weight: bold; }
.push { margin-left: auto; }

/* The address bar is on every page and always works. */
.bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 6px var(--gutter);
  background: var(--tan);
  color: var(--fur);
  color-scheme: light;
}
.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}
.brand img { display: block; width: 28px; height: 28px; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.address { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.address input { min-width: 0; max-width: 100%; padding: 2px 4px; }
.bar-link { margin-left: auto; color: inherit; }
.pick-error { margin: 8px var(--gutter) 0; }

/* The home page only: the bear sits on the bar, overlapping its top edge. */
.perch { display: none; }
body[data-view="home"] .perch {
  display: block;
  position: relative;
  z-index: 1;
  margin: 10px 0 -9px calc(var(--gutter) + 62px);
  pointer-events: none;
}
.perch img { display: block; width: 240px; }
body[data-view="home"] .brand img { display: none; }

#app, .doc { padding: 12px var(--gutter) 40px; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.mail { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mail th, .mail td { padding: 5px 8px 5px 0; text-align: left; vertical-align: baseline; overflow-wrap: anywhere; }
.mail th { font-size: 12px; font-weight: normal; color: var(--quiet); }
.mail td { border-top: 1px solid var(--rule); }
.mail .from { width: 15em; }
.mail .code { width: 7.5em; }
.mail .when { width: 6em; white-space: nowrap; color: var(--quiet); }
.mail.no-codes .code { display: none; }
.mail tr.unread .from, .mail tr.unread .subject a { font-weight: bold; }
.mail tbody tr:hover td { background: color-mix(in srgb, var(--tan) 22%, Canvas); }
.code-button { font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; font-weight: bold; }

/* New mail is the one thing here that moves: a row arrives and fades to normal. */
.mail tr.fresh td { animation: arrived 2.5s ease-out; }
@keyframes arrived { from { background: var(--tan); color: var(--fur); } }

.nothing { max-width: 68ch; padding-top: 6px; }
.nothing img { display: block; width: 130px; margin-bottom: 8px; }

.back { font-size: 12px; overflow-wrap: anywhere; }
.envelope { margin: 0 0 12px; }
.envelope > div { display: flex; align-items: baseline; gap: 8px; }
.envelope dt { flex: none; width: 5.5em; color: var(--quiet); }
.envelope dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.codes, .files { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.files span { color: var(--quiet); }

.links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
.links .push { display: flex; gap: 14px; }
.link {
  padding: 0;
  border: 0;
  background: none;
  color: LinkText;
  text-decoration: underline;
  cursor: pointer;
}
.link[aria-pressed="true"] { color: inherit; font-weight: bold; text-decoration: none; cursor: default; }

.remote-note { margin-bottom: 8px; font-size: 12px; }
.mail-frame {
  display: block;
  width: 100%;
  height: max(420px, 72vh);
  border: 1px solid var(--rule);
  background: #fff;
}
.plain-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.header-table { border-collapse: collapse; font-size: 12px; }
.header-table th, .header-table td { padding: 2px 10px 2px 0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.header-table th { white-space: nowrap; }

/* API docs: a plain document. */
.doc { max-width: calc(78ch + 2 * var(--gutter)); }
.doc h1 { font-size: 21px; }
.doc h2 { margin: 28px 0 8px; font-size: 16px; scroll-margin-top: 8px; }
.doc h3 { margin: 16px 0 4px; font-size: 14px; font-weight: bold; overflow-wrap: anywhere; scroll-margin-top: 8px; }
.doc h3 code { font-size: 14px; font-weight: bold; }
.doc ul, .doc ol { margin: 0 0 10px; padding-left: 24px; }
.doc pre { margin: 0 0 12px; padding: 8px 10px; overflow-x: auto; background: color-mix(in srgb, CanvasText 6%, Canvas); }
.doc table { width: 100%; border-collapse: collapse; }
.doc th, .doc td { padding: 3px 12px 3px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.doc th { border-top: 0; font-size: 12px; font-weight: normal; color: var(--quiet); }
.doc td:first-child { white-space: nowrap; }
.doc td code { overflow-wrap: anywhere; }
.table-wrap { margin-bottom: 12px; overflow-x: auto; }
.contents { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; }

@media (prefers-color-scheme: dark) {
  /* Dark fur disappears against a dark page, so the bear gets a thin outline. */
  .perch img, .nothing img { filter: drop-shadow(0 0 1px #f3c48b) drop-shadow(0 0 1px #f3c48b88); }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  button { padding: 6px 12px; }
  .link, .links a { display: inline-block; padding: 8px 0; }
  .address { flex: 1 1 100%; }
  .address input { flex: 1 1 0; width: 0; padding: 6px; font-size: 16px; }
  .pick { flex: 1 1 100%; order: 3; }
  .pick button { flex: 1 1 0; }
  body[data-view="home"] .perch { margin-left: var(--gutter); }
  .perch img { width: 150px; }

  .mail thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mail tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 0; border-top: 1px solid var(--rule); }
  .mail td { display: block; width: auto; padding: 0; border: 0; }
  .mail td.when { grid-column: 2; grid-row: 1; width: auto; }
  .mail td.from { grid-column: 1; grid-row: 1; width: auto; }
  .mail td.subject, .mail td.code { grid-column: 1 / -1; width: auto; }
  .mail.no-codes td.code, .mail td.code:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mail tr.fresh td { animation: none; }
}