/* What every page's style sheet would otherwise say again: the colour tokens,
   the top bar, the Setup menu, and the few button and banner rules that are
   written the same way everywhere. Only rules that were byte-identical in every
   page that had them belong here -- near-identical is not identical, and a rule
   that differs even slightly stays in its page.

   Every page links this, the sign-in page included, so a rule here reaches
   pages that never had it. That is safe only while it matches nothing on them:
   the menu rules, say, are harmless on a page with no menu.

   It is linked before each page's own <style>, so a page rule still wins a tie.
   A page whose tokens differ from these says so in a :root rule of its own. */

:root {
  --cream: #F9F6EF;
  --paper: #FFFFFF;
  --line: #E0DBD1;
  --line-strong: #CFC8BA;
  --ink: #252A33;
  --body: #4A4F58;
  --muted: #676F7E;
  --faint: #8C8578;
  --oxblood: #6F2A3B;
  --oxblood-dark: #5A2130;
  --gold: #B28E34;
  --warn-bg: #FBF3DF;
  --warn-ink: #7A5A12;
  --err-bg: #F8E5E7;
  --err-ink: #8A2233;
  --serif: 'Cormorant Garamond', Garamond, 'Palatino Linotype', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }

.top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 18px; background: var(--paper); border-bottom: 1px solid var(--line); }
a.brand { text-decoration: none; color: inherit; }
.brand small { font-family: var(--sans); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); margin-left: 8px; vertical-align: middle; }
.spacer { flex: 1; }

/* A dropdown built on <details>, so it works with the keyboard and without
   JavaScript. The only script it needs is the bit that closes it again. */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: " \25BE"; color: var(--faint); }
.menu-items { position: absolute; right: 0; top: calc(100% + 5px); z-index: 30;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 6px;
  min-width: 11em; padding: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.09); }
.menu-items a { display: block; padding: 6px 10px; text-decoration: none;
  color: var(--ink); border-radius: 4px; font-size: 14px; white-space: nowrap; }
.menu-items a:hover { background: #F6F3EC; }
.menu-items a[aria-current="page"] { color: var(--faint); cursor: default; }
.menu-items a[aria-current="page"]:hover { background: none; }
.menu-items a[aria-current="page"]::after { content: " ‚2"; }

/* In this order: a primary button's own border has to win over the hover's. */
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }
.btn.primary:hover { background: var(--oxblood-dark); }

.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.banner.error { background: var(--err-bg); color: var(--err-ink); }
.banner[hidden] { display: none; }