/*
 * The main/alt treatment. CLAUDE.md §5.6.
 *
 * Polarity, not hue. A main surface carries the page's normal polarity — dark
 * text on light. An alt surface inverts it. Luminance survives colour
 * blindness, greyscale printing and a badly calibrated monitor in a way that
 * red-versus-blue does not.
 *
 * Three further signals sit on top of the polarity, so the distinction never
 * rests on one channel:
 *   - the role spelled out as a word, "Main" or "Alt";
 *   - a solid border for main, a dashed one for alt;
 *   - upright type for main, italic for alt.
 *
 * None of this is ever rendered for somebody else's identity. The serializer
 * withholds the role, and without a role these classes are never applied.
 *
 * Two rules for editing this file, both learned the hard way:
 *
 * 1. Modifiers are written with the class doubled — `.action.action--alt` —
 *    so they outrank the base rule on specificity rather than on source order.
 *    Written singly, a base rule further down the file silently wins.
 * 2. No `border:` or `font:` shorthand in the base rules. The shorthand resets
 *    border-style and font-style, which are two of the redundant signals, and
 *    it does it without any warning that it has happened.
 */

:root {
  /*
   * Tells the browser this page works either way up, so its own defaults —
   * form controls, link colours, the canvas — follow the device instead of
   * staying light.
   */
  color-scheme: light dark;

  --page-bg: #ffffff;
  --page-fg: #111111;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #111111;
    --page-fg: #f2f2f2;
  }
}

/*
 * The page reads from the same two variables as the badges, and this is the
 * line that makes "a main surface carries the page's normal polarity" a fact
 * rather than an assumption.
 *
 * Without it the variables still flipped in dark mode while the page stayed
 * white, so a main badge drew itself dark-on-light — inverted — and an alt
 * badge drew itself white-on-white and nearly vanished. The strongest of the
 * four signals named the wrong identity for every visitor with dark mode on.
 * The word, the border and the italics still said the right thing, which is
 * the redundancy earning its keep, but polarity is the primary channel and it
 * was pointing backwards. Do not remove this rule.
 */
body {
  background: var(--page-bg);
  color: var(--page-fg);
}

/* -- base ----------------------------------------------------------------- */

.identity {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: 0.15em 0.5em;
  border-width: 2px;
  border-color: currentColor;
}

.identity.identity--plain {
  /* Somebody else's identity. No treatment at all — just the name. */
  border-width: 0;
  padding: 0;
}

.identity__role {
  font-size: 0.75em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * Action surfaces. In stage 1 the only identity-scoped action is switching;
 * from stage 2 the compose box uses these same rules, with "Posting as <name>"
 * above it and the same name inside the button that commits the post.
 */
.action {
  padding: 0.4em 0.9em;
  border-width: 2px;
  border-color: currentColor;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* -- the two polarities --------------------------------------------------- */

.identity.identity--main,
.action.action--main {
  background: var(--page-bg);
  color: var(--page-fg);
  border-style: solid;
  font-style: normal;
}

.identity.identity--alt,
.action.action--alt {
  background: var(--page-fg);
  color: var(--page-bg);
  border-style: dashed;
  font-style: italic;
}

/*
 * The third state, from stage 2c: posting anonymously.
 *
 * The main/alt treatment answers "which of my two is this", and the strongest
 * channel there is polarity. This button answers a different question, and its
 * clearest signal is not visual at all — it is the only button on the page with
 * no name in it. "Post anonymously" cannot be misread as a persona, whatever
 * the screen is doing.
 *
 * The visual treatment is therefore deliberately a third thing rather than a
 * third polarity: a dotted border and spaced small capitals, neither of which
 * either persona uses. Making it invert like the alt would be worse than
 * useless — the two would be confusable at a glance, and one of them publishes
 * a name.
 */
.action.action--anonymous {
  background: var(--page-bg);
  color: var(--page-fg);
  border-style: dotted;
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.08em;
}

/* -- compose surfaces ----------------------------------------------------- */

.acting__question,
.acting__caveat {
  max-width: 46em;
}

.acting__caveat {
  font-size: 0.9em;
}

/* -- chrome --------------------------------------------------------------- */

.switcher {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ccc;
}

.switcher__form {
  display: inline;
}