@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-400-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-700-italic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Mobile WebKit/Blink inflate text per block to make it "readable" without
   zoom. Chroma renders every code line as its own block (.chroma .line is
   display:flex), so each line got its own inflation factor — font size visibly
   jumped line to line, and because the two table cells inflated differently the
   line-number gutter no longer lined up with the code beside it. Inherited from
   the root, so this covers the whole page. */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Global typography override for the site theme. */
body,
button,
input,
select,
textarea {
  font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Keep code and preformatted text in a readable monospace family. */
pre,
code,
kbd,
samp {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

figure.center {
  text-align: center;
}

figure.center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figure.center figcaption {
  text-align: center;
}

/* Embeds carry hardcoded width/height attributes, so on a viewport narrower
   than the embed they overflow the column. Capping the width alone would keep
   the attribute's height and squash the frame, hence the paired aspect-ratio
   and `height: auto` to let the height follow the width down. */
figure.center iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

video.center {
  text-align: center;
}

video.center videocaption {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Header: the site name set as text, flush left with the nav and with the body
   copy below it.

   This replaced a centred wordmark image. That version needed a single-column
   grid with `justify-content: center`, whose track sized itself to the widest
   in-flow child — the primary nav row — so the artwork stayed exactly as wide
   as the menu beneath it however the menu changed. Text needs none of that
   machinery: it sets its own width, and both it and the nav simply start at
   the same left edge as everything else on the page.
   -------------------------------------------------------------------------- */
body > header {
  text-align: left;
  /* The account menu is pinned to its top right. */
  position: relative;
  /* Keeps the site name's top margin inside the header rather than letting it
     collapse through, so the account menu's offset below is measured from a
     fixed point: the body's padding edge. */
  display: flow-root;
  /* The site name's size and margins, shared with the account menu, which
     centres itself on the space they and the body's padding make above the
     nav. See .title h1 and .account-menu. */
  --title-size: clamp(2.5rem, 8.5vw, 4rem);
  --title-margin-top: 0.75rem;
  --title-margin-bottom: 1.1rem;
  /* The theme's body padding (original.css), which sits above the header. */
  --page-padding-top: 20px;
}

/* --------------------------------------------------------------------------
   The site name. The theme ships this at 24px, which puts it a hair above the
   nav links directly beneath it and below the first content heading further
   down the page — so the page's own h1 outranked the site's name. 64px is
   the size that reads as a masthead rather than a label.

   It has to shrink on narrow screens: "Michael Letts" measures ~6.1x its font
   size, so a fixed 64px would run to 392px and overflow a phone. The clamp
   holds 64px from roughly 750px of viewport up, and eases down to 40px — which
   fits a 375px screen with room to spare — below that.

   line-height is pulled in from the body's 1.62, which at this size would open
   a 104px line box and float the name away from the nav.
   -------------------------------------------------------------------------- */
.title h1 {
  font-size: var(--title-size);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--title-margin-top) 0 var(--title-margin-bottom);
}

nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

/* --------------------------------------------------------------------------
   Footer: flush left with the masthead, nav and body copy above it.

   The theme centres it and pads all four sides by 25px. Only the horizontal
   half of that padding is dropped — left as-is it would indent the copyright
   25px past every other element on the page, since the body already supplies
   its own 20px. The vertical 25px is what separates the line from the last
   paragraph, so it stays.
   -------------------------------------------------------------------------- */
footer {
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

.heading-anchor {
  opacity: 0;
  margin-left: 0.4em;
  font-size: 0.85em;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}

h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor,
h5:hover .heading-anchor,
h6:hover .heading-anchor {
  opacity: 0.5;
}

.heading-anchor:hover {
  opacity: 1 !important;
}

.highlight > div,
.highlight pre,
.highlight code {
  background-color: transparent !important;
}

.highlight pre {
  margin: 0 !important;
  padding: 0 !important;
}

.highlight {
  margin: 1rem 0;
  overflow-x: auto;
}

.highlight table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.highlight table tr,
.highlight table td {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.highlight table td:first-child {
  width: 1%;
  white-space: nowrap;
  overflow: visible;
}

.highlight table td:last-child {
  overflow-x: auto;
}

/* Gap between the line-number gutter and the code itself. */
.highlight table td:first-child pre code {
  padding: 0 1.4ch 0 0 !important;
}

.highlight table td:first-child span[id] {
  display: block !important;
  text-align: left !important;
  white-space: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.highlight table td:first-child span[id] a {
  white-space: normal !important;
}

.highlight .code-line-selected {
  background-color: rgba(255, 255, 255, 0.12);
}

.highlight table td:first-child .code-line-selected {
  color: #ffffff !important;
}

.code-line-menu {
  position: fixed;
  z-index: 10;
  color: #ffffff;
}

.code-line-menu[hidden] {
  display: none;
}

.code-line-menu-trigger,
.code-line-menu-panel {
  background-color: #282a36;
  border: 1px solid rgba(248, 248, 242, 0.2);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

.code-line-menu-trigger {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.code-line-menu-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 9.5rem;
  padding: 0.25rem 0;
}

.code-line-menu-panel[hidden] {
  display: none;
}

.code-line-menu-panel button {
  padding: 0.4rem 0.65rem;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.code-line-menu-trigger:hover,
.code-line-menu-trigger:focus,
.code-line-menu-panel button:hover,
.code-line-menu-panel button:focus {
  background-color: rgba(255, 255, 255, 0.12);
}

.highlight table td:last-child pre code {
  padding: 0 !important;
  white-space: pre;
}

.footnotes hr {
  display: none;
}

.footnotes::before {
  content: "Footnotes";
  display: block;
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

/* ==========================================================================
   TRIAL: absolute black background
   --------------------------------------------------------------------------
   The theme paints #1d1f27, a blue-black. This overrides it to #000 to see
   how the site reads on true black. custom.css loads after the theme
   stylesheet, so these win on source order alone — no !important needed.

   Delete this whole block to go back to blue. Nothing else references it.
   ========================================================================== */
body {
  background-color: #000000;
}

/* Same blue, used behind the "skip to main content" link when focused. */
.skip-link {
  background-color: #000000;
}

/* --------------------------------------------------------------------------
   Links: white instead of the theme's #8cc2dd blue.
   Underlines already distinguish links from body text, so colour is not
   carrying that job alone — which keeps this accessible even though white
   and the #c9d1d9 body grey sit close together.
   -------------------------------------------------------------------------- */
/* Rules follow the LVHA order (:link, :visited, :hover, :active). With equal
   specificity the later rule wins, so the sequence below is load-bearing. */
a {
  color: #ffffff;
}

/* Visited links keep the same white. A plain `a` rule already outranks the
   browser's default purple — author styles beat the UA stylesheet — but the
   theme sets its own purple further down, so this is stated explicitly. */
a:visited {
  color: #ffffff;
}

/* Hover drops to the nav's grey — the exact inverse of the nav, which rises
   from that grey to white. The two halves of the page trade places on hover
   rather than each inventing their own accent. The underline stays throughout,
   so the link is never identified by colour alone. */
a:hover,
a:focus-visible {
  color: #8b96a3;
}

/* --------------------------------------------------------------------------
   Heading anchors (the ¶ beside each heading).

   These are styled to inherit the heading's colour and show themselves purely
   by fading opacity 0 → 0.5 → 1. That worked while the only competing rule was
   the theme's `a` at (0,0,1), which loses to `.heading-anchor` at (0,1,0). The
   `a:visited` and `a:hover` rules above are (0,1,1) and outrank it, so the ¶
   picked up their colours and flickered between three shades: #eee at half
   opacity while hovering the heading, #8b96a3 on the ¶ itself, and #ffffff
   once that fragment had been visited.

   Restating inherit at (0,2,0) puts the colour back under the heading's
   control in every state, leaving opacity as the only thing that changes.
   -------------------------------------------------------------------------- */
.heading-anchor,
.heading-anchor:visited,
.heading-anchor:hover,
.heading-anchor:focus-visible {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Nav: recedes to a cool grey so the site name leads and body links are the
   brightest thing on the page. Hover brings it up to full white.
   -------------------------------------------------------------------------- */
.nav-primary,
.nav-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* Without this they size to max-content and could push past a narrow
     viewport instead of wrapping. */
  max-width: 100%;
  /* Items were previously divided by a drawn dot, which let the gap itself stay
     tight at 0.15em. With the dots gone the gap is the only thing separating
     one item from the next, so it carries that job alone. The row gap stays
     small because wrapped nav lines should still read as one block. */
  gap: 0.25em 1.35em;
}

nav a {
  color: #8b96a3;
  /* Bold gives the nav structure without raising its brightness, so it holds
     its own against the site name by weight rather than by colour. */
  font-weight: 700;
  /* No underline here. Body links keep theirs, so the two kinds of link stay
     visually distinct, and the separators below carry the division instead. */
  text-decoration: none;
  margin-right: 0;
  font-size: 1.1em;
}

/* Needed because `a:visited` above (0,1,1) outranks `nav a` (0,0,2) — without
   this, a visited nav item would jump to white. */
nav a:visited {
  color: #8b96a3;
}

nav a:hover,
nav a:focus-visible {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   The date gutter on the post listings (/blog/, /updates/, the tag pages).

   Each row is a flex line: the date in a fixed-width column, then the title
   and description. The theme pins that column at 130px
   (themes/hugo-bearcub/assets/original.css:129); a date set in Public Sans at
   16px measures about 87px, so only ~43px of air separated the date from the
   title it belongs to — close enough that the two read as one run of text.

   min() widens the column to 155px on a full-width column, roughly 60px of
   air, while capping it at 38% of the list on narrow screens so the titles
   keep the room they have today on a phone rather than being squeezed to
   pay for the gutter.
   -------------------------------------------------------------------------- */
ul.blog-posts li span {
  flex-basis: min(155px, 38%);
}

/* --------------------------------------------------------------------------
   The purple. themes/hugo-bearcub/assets/original.css:133 sets

       ul.blog-posts li a:visited { color: #8b6fcb; }

   which is where the purple actually comes from — not the browser. At (0,1,3)
   it outranks everything above, so it has to be answered on its own terms.
   It only affects the post-listing pages: /blog/, /updates/, and the tag pages.
   -------------------------------------------------------------------------- */
ul.blog-posts li a:visited {
  color: #ffffff;
}

/* Same specificity as the rule above, declared after it, so hover still wins
   on links you have already read. */
ul.blog-posts li a:hover,
ul.blog-posts li a:focus-visible {
  color: #8b96a3;
}

/* --------------------------------------------------------------------------
   Alerts / callouts, from the blockquote render hook.

       > [!NOTE]
       > Body text.

   Each type carries one accent, used for both the left rule and the label. The
   body stays in ordinary text colour so the callout reads as prose with a flag
   on it, not as a coloured box — five saturated panels would fight the black
   ground and the icy palette everywhere else.

   Every accent clears 8:1 on black, so the labels stay legible.
   -------------------------------------------------------------------------- */
.alert {
  --alert-accent: #8ec2e0;
  border-left: 3px solid var(--alert-accent);
  /* No panel tint — the accent rule and the label carry the callout on their
     own. */
  background-color: transparent;
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.5rem 0;
  /* The theme italicises blockquotes; callouts are information, not quotation. */
  font-style: normal;
  color: #c9d1d9;
}

/* The label sits at body size in the site's own face, with no uppercasing or
   letter-spacing. Only weight and the accent colour set it apart, so a callout
   reads as part of the page rather than as a widget dropped into it. */
.alert-label {
  margin: 0 0 0.4rem;
  color: var(--alert-accent);
  font-weight: 700;
}

/* Tighten the body so the callout does not sprawl. */
.alert > :not(.alert-label) {
  margin: 0.5rem 0 0;
}

.alert > :not(.alert-label):first-of-type {
  margin-top: 0;
}

.alert-note      { --alert-accent: #8ec2e0; }
.alert-tip       { --alert-accent: #79c9a2; }
.alert-important { --alert-accent: #a99ae0; }
.alert-warning   { --alert-accent: #e0b35c; }
.alert-caution   { --alert-accent: #e58b7d; }

/* --------------------------------------------------------------------------
   Tag list on /blog/.

   The post count sits on the baseline, not raised. Superscript reads as a
   footnote reference — especially at counts of 1, where "#python¹" looks like
   a citation rather than "one post".

   display:inline-block matters: text-decoration propagates from the ancestor
   and cannot be switched off by a descendant, so this is what keeps the link's
   underline from running beneath the number.
   -------------------------------------------------------------------------- */
.tag-list {
  line-height: 2.2;
}

.tag-count {
  display: inline-block;
  font-size: 0.8em;
  margin-left: 0.3em;
  color: #8b96a3;
}

/* The count lives inside the link, so it would otherwise follow the link
   through every state. Pinning it keeps it steady while the tag responds. */
.blog-tags:hover .tag-count,
.blog-tags:focus-visible .tag-count,
.blog-tags:visited .tag-count {
  color: #8b96a3;
}

/* --------------------------------------------------------------------------
   Selected code lines.
   The old rgba(255,255,255,.12) composited to #1f1f1f on black — a 1.27:1
   band that was effectively invisible. Two changes: a stronger, cold-tinted
   wash across the row, and a much brighter marker in the line-number gutter
   so the selection is legible even when the wash is subtle.
   -------------------------------------------------------------------------- */
.highlight .code-line-selected {
  background-color: rgba(150, 205, 235, 0.16);
}

.highlight table td:first-child .code-line-selected {
  color: #ffffff !important;
  background-color: rgba(150, 205, 235, 0.34);
}

/* Hugo's own hl_lines highlighter defaults to #ffffcc, a pale yellow that
   would glare against black. Match the selection treatment instead. */
.chroma .hl,
.highlight .hl {
  background-color: rgba(150, 205, 235, 0.16);
}

/* --------------------------------------------------------------------------
   Buttons: sign in, Continue, Sign out, and the admin page's. One look for all
   of them, in the nav's grey and rising to white on hover the way the nav does.
   A class rather than a `button` rule, so buttons styled as something else —
   the admin page's click-to-copy addresses, the code-line menu — are left alone.
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid #8b96a3;
  border-radius: 6px;
  background-color: transparent;
  color: #8b96a3;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.button:hover:not(:disabled),
.button:focus-visible {
  border-color: #ffffff;
  color: #ffffff;
}

.button:focus-visible {
  outline: 2px solid rgba(150, 205, 235, 0.7);
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Form fields: sign in, the account name, contact, and the admin page's search
   and rows menu. One look for all of them, drawn to sit beside .button — the
   same corners and, at a 1rem font, the same height — with a dimmer edge so a
   field reads as a place to type rather than something to press. Focus lifts
   the edge to white and adds the buttons' blue ring.

   1rem is also the floor below which iOS zooms the page on focus. Checkboxes
   and radios are left to accent-color where they are used.
   -------------------------------------------------------------------------- */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(139, 150, 163, 0.55);
  border-radius: 6px;
  background-color: #111111;
  color: #eee;
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  /* WebKit draws search and text fields with its own inset shadow and radius. */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.12s ease-in-out;
}

textarea {
  width: 100%;
  line-height: 1.5;
  resize: vertical;
}

/* An address wants more room than a field's default ~20 characters. */
input[type="email"] {
  width: 24rem;
}

/* appearance: none takes the menu's arrow with it, so draw one back. */
select {
  padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b96a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: #8b96a3;
  opacity: 1;
}

input:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
  border-color: #8b96a3;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: #ffffff;
  outline: none;
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(150, 205, 235, 0.7);
  outline-offset: 2px;
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --------------------------------------------------------------------------
   The account page (/account/), and the link to it above Sign out.
   -------------------------------------------------------------------------- */
.account-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  /* Baseline, so each label lines up with the text beside it, the name box's
     included. */
  align-items: baseline;
  gap: 0.6rem 1.5rem;
}

.account-details dt {
  color: #8b96a3;
  font-weight: 700;
}

.account-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The name box and Save share a line, and wrap only when there is no room. */
.account-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* The box itself is the site-wide form field; this only sizes it in the row. */
.account-form input {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 20rem;
}

/* A circled "?" beside a value, with a hint above it on hover, keyboard focus
   or tap. Drawn like the site's buttons: the nav's grey, white when active. */
.hint-wrap {
  position: relative;
  display: inline-block;
}

.hint-wrap[hidden] {
  display: none;
}

.hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.35rem;
  padding: 0;
  border: 1px solid #8b96a3;
  border-radius: 50%;
  background-color: transparent;
  color: #8b96a3;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.1em;
  cursor: help;
}

.hint:hover,
.hint:focus-visible,
.hint-wrap.is-open .hint {
  border-color: #ffffff;
  color: #ffffff;
  outline: none;
}

/* Beside the "?", so it covers nothing in the rows above or below; underneath it
   on narrow screens, where there is no room to the side. */
.hint-text {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.6rem);
  z-index: 10;
  width: max-content;
  max-width: 18rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #8b96a3;
  border-radius: 6px;
  background-color: #000000;
  color: #c9d1d9;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
  pointer-events: none;
}

@media (max-width: 640px) {
  .hint-text {
    top: calc(100% + 0.5rem);
    left: 50%;
    max-width: 60vw;
    transform: translateX(-50%);
  }
}

.hint:hover + .hint-text,
.hint:focus-visible + .hint-text,
.hint-wrap.is-open .hint-text {
  visibility: visible;
  opacity: 1;
}

.account-devices {
  padding-left: 1.2rem;
}

.account-devices li + li {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   The account menu: a hamburger at the top right of every page behind sign-in.
   The button is drawn like .button — the nav's grey, soft corners, white on
   hover — and the dropdown matches it.

   It is centred vertically on the space between the top of the page and the
   nav. That space is the body's padding plus the site name's margins and line
   box, and the name shrinks with the viewport, so a fixed offset sat low on
   phones. The offset is worked out from the same variables the name is set
   in, so the two cannot drift apart:

     centre of the space, from the page top = (padding + name block) / 2
     header top, from the page top          = padding
     so: top = (name block - padding) / 2 - half the button
   -------------------------------------------------------------------------- */
.account-menu {
  --button-size: 2.5rem;
  position: absolute;
  top: calc(
    (var(--title-margin-top) + 1.1 * var(--title-size) + var(--title-margin-bottom)
      - var(--page-padding-top)) / 2
    - var(--button-size) / 2
  );
  right: 0;
}

.account-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-size);
  height: var(--button-size);
  padding: 0;
  border: 1px solid #8b96a3;
  border-radius: 6px;
  background-color: transparent;
  color: #8b96a3;
  cursor: pointer;
}

.account-menu-button:hover,
.account-menu-button:focus-visible,
.account-menu-button[aria-expanded="true"] {
  border-color: #ffffff;
  color: #ffffff;
}

.account-menu-button:focus-visible {
  outline: 2px solid rgba(150, 205, 235, 0.7);
  outline-offset: 2px;
}

.account-menu-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  min-width: 10rem;
  padding: 0.35rem 0;
  border: 1px solid #8b96a3;
  border-radius: 6px;
  background-color: #000000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.account-menu-list a,
.account-menu-list a:visited,
.account-menu-list button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.45rem 0.9rem;
  border: 0;
  background: none;
  color: #8b96a3;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* display: block above would otherwise show the Admin item to everyone. */
.account-menu-list [hidden] {
  display: none;
}

.account-menu-list a:hover,
.account-menu-list a:focus-visible,
.account-menu-list button:hover:not(:disabled),
.account-menu-list button:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.account-menu-list button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Sign out sits apart from the pages above it. */
.account-menu-list form {
  margin: 0.35rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(139, 150, 163, 0.35);
}

/* --------------------------------------------------------------------------
   The notifications page (/account/notifications/): settings in a table, ruled
   like the admin page's — a line between rows, no boxes around cells.
   -------------------------------------------------------------------------- */
.settings-table-wrap {
  overflow-x: auto;
}

.settings-table {
  width: 100%;
  border: none;
  border-collapse: collapse;
}

.settings-table th,
.settings-table td {
  border: none;
  border-bottom: 1px solid rgba(150, 205, 235, 0.18);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: middle;
}

.settings-table thead th {
  border-bottom: 2px solid rgba(150, 205, 235, 0.4);
  color: #eee;
  font-weight: 700;
}

.settings-table .settings-toggle {
  width: 4rem;
  text-align: center;
}

.settings-table label {
  cursor: pointer;
}

.settings-table input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  vertical-align: middle;
  accent-color: #96cdeb;
  cursor: pointer;
}

.settings-table input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: default;
}

.settings-table input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(150, 205, 235, 0.7);
  outline-offset: 2px;
}