/* A 1995 look, on purpose: serif body text, underlined blue/purple links, the grey
   raised-bevel chrome the OS drew for form controls, and horizontal rules instead of
   boxes. Two concessions to the present are deliberate and marked below: the colours
   invert for a dark OS theme, and delete keeps a confirm dialog (that part is in the
   template, being the one line of JavaScript the design allows). */

:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #444444;
  --link: #0000ee;      /* the Mosaic unvisited blue */
  --visited: #551a8b;   /* and its visited purple */
  --active: #ee0000;
  --rule: #000000;
  --field-bg: #ffffff;
  /* The Windows 95 control grey. The bevel is drawn with outset/inset borders in
     these two shades, the way a real button of the era was. */
  --btn: #c0c0c0;
  --btn-light: #ffffff;
  --btn-dark: #808080;
}

/* The concession, not a redesign: the same period palette read out of a dark room.
   Links stay recognisably the era's blue and purple, only brightened to hold up on
   a dark field. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101010;
    --fg: #e6e6e6;
    --muted: #a0a0a0;
    --link: #6ea8ff;
    --visited: #c9a0ff;
    --active: #ff8080;
    --rule: #666666;
    --field-bg: #1a1a1a;
    --btn: #b8b8b8;
    --btn-light: #e8e8e8;
    --btn-dark: #6a6a6a;
  }
}

body {
  margin: 2em;
  max-width: 52em;
  background: var(--bg);
  color: var(--fg);
  /* Times, the way the early web read. No system-ui, no font smoothing, no rem. */
  font: 16px/1.45 "Times New Roman", Times, serif;
}

a          { color: var(--link); }
a:visited  { color: var(--visited); }
a:active   { color: var(--active); }

hr, hr.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1em 0;
}

/* The header is a line of text, not a toolbar: brand, then middots between the
   pieces, all sitting on the baseline. The search box and the logout form are made
   inline so they read as words in that line rather than as blocks. */
header {
  font-size: .95em;
}
.brand {
  font-weight: bold;
  text-decoration: none;
  color: var(--fg);
  letter-spacing: .5px;
}
header .search,
header .logout {
  display: inline;
  margin: 0;
}

/* Form controls wear the period's raised bevel. width:auto undoes a modern reset
   habit of stretching inputs to full width. */
input, textarea, button, select {
  font: inherit;
  color: var(--fg);
  width: auto;
}
input[type=search],
input[type=url],
input[type=text],
input[type=password],
textarea {
  background: var(--field-bg);
  border: 2px inset var(--btn);
  padding: 2px 4px;
  border-radius: 0;
}
button {
  background: var(--btn);
  color: #000;
  border: 2px outset var(--btn);
  border-radius: 0;
  padding: 1px 10px;
  cursor: pointer;
}
button:active { border-style: inset; }

/* The tag sidebar sits to the left of the list, the way a directory put its
   categories. Flexbox is a modern tool doing an old job; the result on screen is a
   1995 two-column page. */
.wrap {
  display: flex;
  gap: 2.5em;
  align-items: flex-start;
}
.sidebar {
  flex-shrink: 0;
  min-width: 8em;
  font-size: .95em;
}
.main { flex: 1; min-width: 0; }
.main h1 { font-size: 1.5em; margin: 0 0 .4em; }

/* Both lists drop their bullets. The sidebar spaces its tags tightly; the bookmark
   list spaces its entries apart so each reads as a block without a marker. */
ul.tags, ul.bookmarks { list-style: none; margin: 0; padding: 0; }
ul.tags li { margin: .15em 0; }
ul.bookmarks li { margin-bottom: 1.1em; }

/* The tag being filtered on is marked so the sidebar shows where you are. Bold rather
   than a background, to stay in keeping with a page that has no coloured fills. */
ul.tags li.active { font-weight: bold; }
/* When the vocabulary outgrows the sidebar cap, this says by how much instead of the
   tags past the cap just going missing. */
ul.tags li.more { color: var(--muted); font-style: italic; }

/* The "back to all" line under a filtered heading. */
.filter { margin: 0 0 .6em; font-size: .9em; }

.title { font-weight: bold; }
.url   { color: var(--muted); font-size: .85em; word-break: break-all; }
.notes { margin: .2em 0 0; font-size: .95em; }

/* The metadata line — tags, age, edit, delete — is one run of text with middots
   between its parts, so it reads as a caption rather than a row of controls. */
.meta {
  margin-top: .2em;
  font-size: .85em;
  color: var(--muted);
}
.meta a { color: var(--link); }
.meta time { white-space: nowrap; }

/* Delete is a link in that caption, not a button: a real button would out-shout the
   title above it. The form wrapper only exists to carry the POST and CSRF token. */
form.inline-delete { display: inline; margin: 0; }
form.inline-delete button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}
form.inline-delete button:hover { color: var(--active); }

/* The add/edit and login forms are a plain stack of labelled fields. */
form.edit, form.login { max-width: 34em; }
form.edit label, form.login label {
  display: block;
  margin-bottom: .75em;
}
form.edit input, form.edit textarea,
form.login input {
  display: block;
  width: 100%;
  margin-top: .15em;
}
.actions { margin-top: .5em; }
.actions a { margin-left: .75em; }
form.danger { margin-top: 2em; }

.error { color: var(--active); }
.empty { color: var(--muted); }
.pager .position { color: var(--muted); font-size: .85em; margin-left: 1em; }

/* On a narrow screen the sidebar stacks above the list rather than squeezing it. */
@media (max-width: 34em) {
  body { margin: 1em; }
  .wrap { flex-direction: column; gap: 1em; }
}