/* What every page's corner shares: who is signed in, and what is waiting for them.
 *
 * **Why a file and not eight copies.** Each page here carries its own inline style on purpose --
 * one file, one request, nothing to wait on. That holds while a rule belongs to one page. The
 * account menu and the bell belong to all of them, and the day the dot's colour changes is the
 * day seven pages are edited and one is missed. So these ride beside `account.js`, which is the
 * script the same pages already share and for the same reason.
 *
 * It defines nothing of its own: every colour is a variable each page already sets
 * (`--led`, `--haze`, `--faceplate`, `--etch`, `--red`), so a page that looks different still
 * looks like itself in the corner.
 */

/* ---- the corner, as one thing ---------------------------------------------------------------- */

/* **The bell and the account are one cluster, not two items in a row** (Jake, 2026-09-20: the bell
   "doesn't line up quite right with the username and profile picture"). They used to be two
   spans side by side -- in each page's `nav`, or in the absolutely-positioned `.corner` four of
   the pages put over their own heading -- which had three consequences:

   * they took the nav's own gap between them -- 1.75rem on the homepage -- so the bell read as
     another link rather than as part of who is signed in;
   * the bell was last, and its glyph is inset 7px inside its 2.25rem hit box, so the *visible*
     right edge of the header stopped 7px short of the margin every other line on the page is
     flush with;
   * the two buttons were different heights (2.25rem against a padding-derived 2.2rem), so their
     hover backgrounds did not match.

   One box, the bell first (which is where every site puts it), both buttons exactly 2.25rem, and
   the name's negative right margin is what keeps the *text* flush while the button's background
   still has padding to sit in.

   **`corner-pair` and not `corner`**: four pages already define a `.corner` of their own, and a
   shared component that borrows a page's class is the trap this file exists to avoid. The pages
   that have one keep it -- it is what positions the cluster -- and this is what is inside it. */
.corner-pair { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---- who is signed in ---------------------------------------------------------------------- */

.account { position: relative; display: inline-flex; align-items: center; gap: 0.9rem; }
/* **Signed out**: the two ways in. Drawn here rather than left to each page, because four of the
   pages that carry this corner define no button of their own -- and an unstyled "Create account"
   is what that looked like. */
.account .in { color: var(--led); text-decoration: none; white-space: nowrap; }
.account .button { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.9rem; border-radius: 6px;
                   background: var(--led); color: var(--booth); font-weight: 700; font-size: 0.875rem;
                   text-decoration: none; white-space: nowrap; }
.account .button.second { background: none; color: var(--led); box-shadow: inset 0 0 0 1px var(--dim); }
.who-menu { position: relative; }
.who-button { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.5rem;
              /* The negative right margin is what keeps the NAME flush with the page's margin while
                 the button's own background still has padding to sit in; the zeroes are what keep a
                 page's bare `button { margin-top: 1rem }` out of a shared component. */
              margin: 0 -0.5rem 0 0;
              border: 0; border-radius: 6px; background: none; color: var(--led); font: inherit;
              font-size: 0.9375rem; cursor: pointer; white-space: nowrap; }
.who-button:hover { background: var(--faceplate); }
.who-list { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 20; min-width: 13rem;
            display: grid; padding: 0.35rem; border: 1px solid var(--etch); border-radius: 8px;
            background: var(--faceplate); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.who-list a, .who-list button { display: block; width: 100%; height: auto; padding: 0.55rem 0.7rem; border: 0; border-radius: 5px;
            background: none; color: var(--led); font: inherit; font-size: 0.9375rem; text-align: left;
            text-decoration: none; cursor: pointer; white-space: nowrap; }
.who-list a:hover, .who-list button:hover { background: var(--faceplate-up); }
/* The way out, last and set apart: it is not one of the places to go. */
.who-list button { margin-top: 0.35rem; border-top: 1px solid var(--etch); border-radius: 0 0 5px 5px; color: var(--haze); }

.avatar { flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%;
          background: var(--faceplate-up); color: var(--haze); font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.s { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
.avatar.m { width: 2.5rem; height: 2.5rem; font-size: 1.0625rem; }
.avatar.l { width: 5.5rem; height: 5.5rem; font-size: 2.25rem; }

/* ---- the bell ------------------------------------------------------------------------------- */

.bell-host { display: inline-flex; align-items: center; }
/* **`flex`, not the default block** -- and this is the misalignment itself. The button inside is
   `inline-grid`, so in a block box it sits on a *line*: the line's strut and the space kept under
   the baseline make the box taller than the button and push the button to the bottom of it. On a
   page whose corner is centred vertically that put the bell several pixels below the name beside
   it (Jake, 2026-09-20). A flex container has no line boxes, so the button IS the box. */
.bell-menu { position: relative; display: flex; }
/* **`margin: 0` is not tidiness -- it is the bug.** Several pages set a bare `button { margin-top:
   1rem }` for their own forms, and an element selector reaches into a shared component the way a
   class never could: the bell was pushed a whole rem below the name beside it (Jake, 2026-09-20).
   Every property this component depends on is stated here, for the same reason its buttons stopped
   borrowing `.button` below. */
.bell { position: relative; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
        margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--haze);
        font: inherit; cursor: pointer; }
.bell:hover { background: var(--faceplate); color: var(--led); }
.bell svg { width: 1.35rem; height: 1.35rem; display: block; }
/* **Red means one thing on this site** -- on air -- and this is the one other: something is
   waiting for you. It is a dot and never a number: a count nobody can act on is noise. */
.bell .dot { position: absolute; top: 0.3rem; right: 0.3rem; width: 0.5rem; height: 0.5rem;
             border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--booth); }

.bell-list { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 30; width: min(26rem, calc(100vw - 2rem));
             max-height: min(30rem, 70vh); overflow-y: auto; padding: 0.35rem;
             border: 1px solid var(--etch); border-radius: 8px; background: var(--faceplate);
             box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.bell-head { padding: 0.6rem 0.7rem 0.4rem; font-size: 0.9375rem; }
.notice-empty { margin: 0; padding: 0.4rem 0.7rem 0.9rem; color: var(--haze); font-size: 0.875rem; line-height: 1.45; }
.notice-note { margin: 0.2rem 0 0; padding: 0.5rem 0.7rem; color: var(--haze); font-size: 0.8125rem; line-height: 1.45; }
.notice-note.bad { color: var(--amber); }

.notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.6rem; align-items: start;
          padding: 0.6rem 0.7rem; border-radius: 6px; }
.notice + .notice { border-top: 1px solid var(--etch); border-radius: 0; }
.notice-text { min-width: 0; font-size: 0.9375rem; line-height: 1.4; }
.notice-text b { font-weight: 700; }
.notice-when { margin-top: 0.1rem; color: var(--dim); font-size: 0.8125rem; }
.notice-do { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
/* **The bell's own buttons, drawn here and nowhere else.** They used to borrow each page's
   `.button`, which half the pages do not define at all -- and on the homepage, where the bell
   sits inside the top nav, `.top nav a.button` repainted them white on white. A shared component
   cannot depend on what the page around it happens to call things. */
.notice-do .go { display: inline-flex; align-items: center; justify-content: center; height: 2.1rem;
                 margin: 0; padding: 0 0.85rem; border: 0; border-radius: 6px; background: var(--led); color: var(--booth);
                 font: inherit; font-size: 0.875rem; font-weight: 700; line-height: 1; text-decoration: none;
                 white-space: nowrap; cursor: pointer; }
.notice-do .go:hover { background: #fff; }
.notice-do .go.second { background: none; color: var(--led); box-shadow: inset 0 0 0 1px var(--dim); }
.notice-do .go.second:hover { background: var(--faceplate-up); }
.notice-do .go[disabled] { opacity: 0.55; cursor: default; }
.notice-do .quieter { align-self: center; font-size: 0.875rem; color: var(--haze); text-underline-offset: 4px; }
.notice-do .quieter:hover { color: var(--led); }

/* ---- it arrived while you were looking ------------------------------------------------------ */
/* One strip, out of the way, that goes by itself. What is left behind is the dot on the bell --
   so nothing is ever only shown in a thing that disappears. */
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: grid; gap: 0.5rem;
          width: min(24rem, calc(100vw - 2rem)); }
.toast-row { position: relative; border: 1px solid var(--etch); border-radius: 8px; background: var(--faceplate);
             box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); padding-right: 2.2rem;
             animation: toast-in 240ms ease-out both; }
.toast-shut { position: absolute; top: 0.35rem; right: 0.35rem; width: 1.6rem; height: 1.6rem; padding: 0;
              border: 0; border-radius: 5px; background: none; color: var(--dim); font-size: 1.1rem;
              line-height: 1; cursor: pointer; }
.toast-shut:hover { background: var(--faceplate-up); color: var(--led); }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
/* Somebody who has asked for less movement gets none: the strip simply appears. */
@media (prefers-reduced-motion: reduce) { .toast-row { animation: none; } }

@media (max-width: 40rem) {
  .toasts { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: auto; }
  .bell-list { position: fixed; top: auto; right: 0.75rem; left: 0.75rem; width: auto; }
}

/* ---- the email switch on a follow ------------------------------------------------------------
 *
 * **Following is one thing; being emailed about it is another** (Jake, 2026-09-20). The switch
 * sits wherever a follow is shown -- the DJ's page, and each row of `/you` -- so it is here
 * rather than in two page styles that would drift apart.
 *
 * It is a real `<input type="checkbox">` inside its own `<label>`: the browser gives it the
 * keyboard, the label's click target and the announcement to a screen reader for nothing, and
 * what is drawn is the track and the knob in front of it. `accent-color` is the fallback for a
 * browser that will not take the drawn one.
 */
.mail-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
               color: var(--haze); font-size: 0.875rem; line-height: 1.4; }
.mail-switch input { position: absolute; opacity: 0; width: 2.6rem; height: 1.5rem; margin: 0;
                     cursor: pointer; accent-color: var(--led); }
.mail-switch .track { flex: none; position: relative; width: 2.6rem; height: 1.5rem; border-radius: 1rem;
                      background: var(--faceplate-up, #23222d); box-shadow: inset 0 0 0 1px var(--etch);
                      transition: background 0.14s ease; }
.mail-switch .track::after { content: ""; position: absolute; top: 0.25rem; left: 0.25rem;
                             width: 1rem; height: 1rem; border-radius: 50%; background: var(--dim);
                             transition: transform 0.14s ease, background 0.14s ease; }
.mail-switch input:checked + .track { background: var(--led); box-shadow: none; }
.mail-switch input:checked + .track::after { background: var(--booth, #0f0e14); transform: translateX(1.1rem); }
.mail-switch input:focus-visible + .track { outline: 2px solid var(--led); outline-offset: 3px; }
.mail-switch input:disabled + .track { opacity: 0.5; }
.mail-switch input:disabled { cursor: default; }
.mail-switch:has(input:disabled) { cursor: default; }
/* Somebody who prefers no motion gets the state, not the slide. */
@media (prefers-reduced-motion: reduce) {
  .mail-switch .track, .mail-switch .track::after { transition: none; }
}