/* Athelney's theme. The palette is the isle it is named for: marsh green on
   parchment, with a deep ink for text. Light and dark are the same two hues at
   different weights, so nothing has to be re-picked for the second scheme. */
:root {
  --accent: #3f6b52;
  --accent-hover: #2f5240;
  --body-bg: #f6f3ea;
  --surface: #fffdf7;
  --text: #22201c;
  --text-muted: rgba(34, 32, 28, 0.55);
  --text-faint: rgba(34, 32, 28, 0.38);
  --border: rgba(34, 32, 28, 0.13);
  --danger: #9d3b2f;
  /* A notice, and the only one: the grace banner. Blue on purpose and by
     instruction — the account still works, so this must not read as --danger
     at a lower volume. It is the one hue in athelney that is not the marsh
     green or the parchment, which is what makes it carry across a page. */
  --notice-bg: #dbe8f4;
  --notice-border: #a8c4de;
  --notice-text: #1f4c72;
  --focus-ring: rgba(63, 107, 82, 0.35);
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8fc0a3;
    --accent-hover: #a9d3b8;
    --body-bg: #16181a;
    --surface: #1e2124;
    --text: #e8e5dd;
    --text-muted: rgba(232, 229, 221, 0.6);
    --text-faint: rgba(232, 229, 221, 0.4);
    --border: rgba(232, 229, 221, 0.15);
    --danger: #d9776a;
    /* The same blue at the other weight, the way every other pair in this
       file works — dark enough to sit on the page background, light enough
       for the text on it to keep its contrast. */
    --notice-bg: #1b2c3c;
    --notice-border: #2f4a63;
    --notice-text: #bcd7ef;
    --focus-ring: rgba(143, 192, 163, 0.4);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: Iowan Old Style, Palatino, Georgia, serif;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--body-bg);
  font-size: 1.05rem;
  /* The grace banner escapes this centred column with `width: 100vw` so it
     reads as a bar across the screen rather than a box inside the page. On a
     browser with classic (space-taking) scrollbars, 100vw counts the
     scrollbar and that is a stray horizontal scroll of a dozen pixels.
     `clip` rather than `hidden`: `hidden` would make the body a scroll
     container and break `position: sticky` for anything added later. */
  overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.9rem; font-weight: 600; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }

nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
}
/* The top left of a SIGNED-OUT page, reserved. `nav .brand` was here and went
   with the brand; then the breadcrumb stood here and moved below the rule,
   where it later went altogether; then Back stood here on every page. Since
   the nav order a signed-in page has its places here instead (`.nav-left`
   below), and Back, or nothing, is left to the signed-out screens —
   `min-width` is why the nothing still counts. */
nav .nav-back { min-width: 5rem; font-size: 0.9rem; }
nav .nav-back .back-link,
.page-back .back-link { color: var(--text-muted); white-space: nowrap; }
nav .nav-back .back-link:hover,
.page-back .back-link:hover { color: var(--accent); }
/* A signed-in page's own Back (Add books, Add PDFs): just below the rule,
   tucked up to it the way the breadcrumb that stood here was. */
.page-back { margin: -1.5rem 0 1.25rem; font-size: 0.9rem; }
/* The rooms' Back to Pluteus is for a phone only: hidden here, and shown by
   the 34rem block in athelney.css, the stylesheet's one breakpoint. */
.page-back.mobile-only { display: none; }
/* The one Back that is a form (stepping back from the confirm screen) has to
   be indistinguishable from the ones that are links. */
nav .nav-back .back-form { margin: 0; }
nav .nav-back button.back-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
nav .nav-back button.back-link:hover { text-decoration: underline; }

/* The left of a SIGNED-IN nav: the places. "very classic", in Daniel's
   words: a row of plain links, where Back used to be. The list is a popover
   (see `views/nav-places`), and above 34rem these rules show it in the row
   whether it is open or not, undoing everything the browser gives a popover
   (fixed, centred, bordered, hidden while closed). Author rules outrank the
   browser's own whatever their specificity, so plain selectors do it. Below
   34rem, athelney.css turns it into the ☰ drawer. */
nav .nav-left { display: flex; align-items: baseline; min-width: 5rem; }
nav .nav-toggle, nav .nav-close { display: none; }
nav .nav-places {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.15rem;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: visible;
  font-size: 0.95rem;
}
nav .nav-place { color: var(--text-muted); white-space: nowrap; }
nav a.nav-place:hover { color: var(--accent); text-decoration: none; }
/* Where you are: the body colour, heavier, and the accent drawn under it. A
   colour alone would not survive a colour-blind reader or a greyscale screen. */
nav .nav-place[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
/* A room that is not open: not a link in the markup either. The pill says it
   is coming, so the grey word does not read as broken. Not scoped to the nav:
   Add books' shelf draft wears the same pill. */
nav .nav-place.is-closed { color: var(--text-faint); cursor: default; }
.nav-soon {
  margin-left: 0.15rem;
  font-size: 0.7rem;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.45rem;
  vertical-align: 0.1em;
}

/* The breadcrumb that stood below the rule is gone. Daniel: "have us get rid
   of the breadcrumb". The nav's places mark where you are (aria-current),
   so the trail said it twice, and a book's title is in its page's heading. */
nav .nav-right {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  font-size: 0.9rem;
}

/* The account menu: the name, a chevron, and Sign out under it. Built on
   <details>/<summary>, so everything below is placement — the app's two small
   scripts are the camera on Add books and the busy button on the forms that
   wait on the reader, and this did not become a third. */
nav .account-menu { position: relative; }
nav .account-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--text);
  /* An account name is one token and breaking it is never what anybody wanted:
     at 390px the company's read "demo-" / "owner" with the chevron pushed
     under it, because a hyphen is a legal break point and the nav had grown a
     reserved back slot on the left. It fits on one line without the break —
     measured at 342px of nav: 80 back + 16 gap + 246 right. `.nav-right` may
     wrap as a whole if a longer name ever needs it, which is a tidier failure
     than hyphenating somebody's library. */
  white-space: nowrap;
  /* Both spellings, and neither is redundant: ::marker is the standard and
     ::-webkit-details-marker is what older WebKit still reads. A stray
     disclosure triangle beside a chevron is two arrows saying one thing. */
  list-style: none;
}
nav .account-menu > summary::-webkit-details-marker { display: none; }
nav .account-menu > summary::marker { content: ""; }
nav .account-menu > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}
/* Drawn from two borders rather than typed as a character: nothing for a
   screen reader to read out as a word, and nothing to go missing in a font
   that has not got the glyph. */
nav .account-menu .chevron {
  width: 0.36em;
  height: 0.36em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.12s ease;
}
nav .account-menu[open] > summary .chevron {
  transform: translateY(0.05em) rotate(-135deg);
}
/* Absolutely placed, so the open menu lies OVER the page instead of pushing it
   down, and so the closed nav is exactly as wide as the name. */
nav .account-menu > .account-menu-items {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 20;
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-weight: 400;
}
nav .account-menu > .account-menu-items a {
  display: block;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
}
nav .account-menu > .account-menu-items a:hover {
  background: var(--body-bg);
  text-decoration: none;
}
/* A tap anywhere outside the open menu closes it. While it is open, the
   summary grows an invisible layer over the whole page, just under the menu,
   and a tap on the layer is a tap on the summary, which toggles the <details>
   shut. That is the whole mechanism, and it is still no script. A <details>
   does not close on Escape; the ☰ drawer, a popover, does. */
nav .account-menu[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 19;
  cursor: default;
}
/* The person in a circle, for below 34rem (athelney.css). */
nav .account-menu .account-icon { display: none; }

.btn {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  background: var(--accent);
  color: var(--body-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn-quiet { background: transparent; color: var(--accent); }
.btn-quiet:hover { background: transparent; color: var(--accent-hover); text-decoration: underline; }
.btn-small { padding: 0.15rem 0.55rem; font-size: 0.85rem; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--body-bg); border-color: var(--danger); }

/* `email` joined this list when signup introduced the first one. It is a list
   rather than a bare `input` because the radios and checkboxes elsewhere must
   not be stretched to the column width — but that means every new input type
   has to be added by hand, and one that is not looks like a text field that
   forgot its styling. */
input[type=text], input[type=search], input[type=password], input[type=number],
input[type=email], textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }

label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.2rem; }

.error {
  color: var(--danger);
  border-left: 3px solid var(--danger);
  padding: 0.3rem 0 0.3rem 0.75rem;
}
.hint { font-size: 0.82rem; color: var(--text-faint); margin: 0.25rem 0 0; }
.lede { color: var(--text-muted); margin-top: 0; }
.empty { color: var(--text-muted); font-style: italic; }