/*
 * texs.org header chrome, copied from texs-worker/public/css/chrome.css
 * (geometry per /Users/texjernigan/Dropbox/_Code/CHROME-SPEC.md). Changes from
 * that copy: dark keys off [data-theme="dark"] on <html> (this site has no
 * Twenty Twenty-One), and the WordPress admin-bar offsets are gone. The
 * #texs-chrome scoping is kept so the two files stay diffable.
 */
#texs-chrome {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	gap: 4px;                  /* CHROME-SPEC §1 — 4px is the one that matters */
	z-index: 9999;             /* clears the badge and share button, both 9999 */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Light palette. Redefined for dark below; every colour in this file reads
	   from these, so the two themes can never drift apart. */
	--tx-surface: #fff;
	--tx-ink: #111827;
	--tx-muted: #6b7280;
	--tx-faint: #9ca3af;
	--tx-hairline: rgba(17, 24, 39, .08);
	--tx-wash: rgba(17, 24, 39, .05);
	--tx-trigger-ink: #4b5563;
	--tx-avatar-bg: #e5e7eb;
	--tx-shadow: 0 12px 32px rgba(17, 24, 39, .14), 0 2px 6px rgba(17, 24, 39, .06);
	--tx-focus: #2563eb;
}

#texs-chrome[hidden] { display: none; }

/* ── The hamburger ───────────────────────────────────────────────────────── */

#texs-chrome .tx-trigger {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--tx-trigger-ink);
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	letter-spacing: normal;      /* TT1 letterspaces buttons */
	text-transform: none;
}

#texs-chrome .tx-trigger:hover,
#texs-chrome .tx-trigger[aria-expanded="true"] {
	color: var(--tx-ink);
	background: var(--tx-wash);
}

#texs-chrome .tx-trigger:focus-visible {
	outline: 2px solid var(--tx-focus);
	outline-offset: 2px;
}

#texs-chrome .tx-trigger svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* ── The dark-mode toggle beside the hamburger ───────────────────────────────── */
/* poster-lang's .controls .theme geometry exactly: a 32px square with 8px
   padding and radius holding a 16px icon, quiet until the hover wash — a
   smaller square than the 40px trigger so the pair reads as the posters'
   “quiet control + menu”, not two hamburgers. Same TT1 specificity trap as
   .tx-trigger: the #texs-chrome prefix is load-bearing. */
#texs-chrome .tx-mode {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 8px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--tx-trigger-ink);
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	letter-spacing: normal;
	text-transform: none;
}

#texs-chrome .tx-mode:hover {
	color: var(--tx-ink);
	background: var(--tx-wash);
}

#texs-chrome .tx-mode:focus-visible {
	outline: 2px solid var(--tx-focus);
	outline-offset: 2px;
}

#texs-chrome .tx-mode svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* ── The NYC clock ───────────────────────────────────────────────────────────
   Leftmost in the cluster. CHROME-SPEC.md §1 gives bare icons a 4px gap and
   anything text-shaped beside them 8px — the container's gap is 4px, so this
   adds the other 4px itself rather than changing a number the icon row
   depends on.

   Tabular figures because the width must not twitch as the minute changes:
   this sits 16px off the right edge, so a proportional "1" would walk the
   whole cluster sideways. Same TT1 specificity trap as everything else in
   this file — the #texs-chrome prefix is load-bearing. */
#texs-chrome .tx-clock {
	display: block;
	margin-right: 4px;
	padding: 0 2px;
	color: var(--tx-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	/* TT1 puts a bottom border on <time> in entry meta; this is not that. */
	border: 0;
	text-decoration: none;
	text-transform: none;
}

/* The colon blinks once a second, the way a bedside clock does.

   `step-end` rather than a fade: an eased opacity ramp reads as a pulse, and
   the thing being imitated is a hard on/off. `opacity`, never `display` or a
   width change — the cluster is anchored to the right edge, so a colon that
   stopped taking up space would twitch the whole row twice a second.

   It is animated in CSS rather than on a 500ms JS timer so the browser owns
   the cadence: a background tab throttles it for free, and it cannot drift
   from the minute tick. chrome.js keeps this element out of its repaint for
   the same reason — replacing the node would restart the animation and jump
   the blink's phase every minute. */
@keyframes tx-clock-blink {
	50% { opacity: 0; }
}

#texs-chrome .tx-clock-colon {
	animation: tx-clock-blink 1s step-end infinite;
}

/* ── The panel ───────────────────────────────────────────────────────────── */

#texs-chrome .tx-panel {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	width: 288px;
	padding: 8px 0;
	border: 1px solid var(--tx-hairline);
	border-radius: 12px;
	background: var(--tx-surface);
	box-shadow: var(--tx-shadow);
	color: var(--tx-ink);
	text-align: left;
}

#texs-chrome .tx-divider-bottom { border-bottom: 1px solid var(--tx-hairline); }
#texs-chrome .tx-divider-top    { border-top: 1px solid var(--tx-hairline); }

#texs-chrome .tx-section { padding: 4px 0; }

#texs-chrome .tx-label {
	padding: 6px 16px 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tx-faint);
}

/* The sites heading carries the globe, so it lays out as a row rather than as
   a bare caption. */
#texs-chrome .tx-label--globe {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* The globe's own colour, fixed across the family (spec §5). The two themes
   take different hues rather than one hue at two lightnesses: the red holds up
   on white, while on the dark panel it burns, so dark gets teal-300 instead. */
#texs-chrome .more-sites-icon { color: #ff1800; }
[data-theme="dark"] #texs-chrome .more-sites-icon { color: #5eead4; }

/* ---- the turning globe ----
   The "More texs.org sites" mark, identical in every texs.org app — see
   ../../../CHROME-SPEC.md §5. Six meridian PAIRS evenly spread across the cycle (their
   delays are set inline where the SVG is built), each cut to the half facing
   the viewer. rx is a geometry property, so it animates from CSS in SVG — in
   user units, which is why these look unitless against a 0 0 24 24 viewBox.

   One cycle is a HALF rotation (φ: 0 → 180°), which is all it takes: at 180°
   the pair has swapped ends and the figure repeats. Hence:

     rx         = 10.5·sin φ, sampled at 22.5° steps — a meridian races through
                  the center and stalls at the limb, and linear rx is the thing
                  that reads as breathing rather than turning. The steps have to
                  be this fine near 50%: at the limb the true sine turns around
                  with zero velocity, and coarse sampling puts a hard V-bounce
                  there instead.
     dashoffset = 25 or 75, stepped at the handoffs — hidden-line removal. Only
                  the half currently facing the viewer is drawn; there is no
                  dimmed back half, so the whole mark is one flat colour.

   Turning RIGHT TO LEFT: the right half is the visible one while rx shrinks,
   the left half while it grows, so a meridian enters at the right limb, crosses
   the face and leaves at the left.

   ONE ellipse per pair covers both halves, because the dash offset alone says
   which half is drawn. rx interpolates and the offset must not (interpolating
   it would wipe the visible half around the ellipse), hence two animations with
   different timing functions rather than one set of keyframes.

   Both handoffs are invisible without any fade: at 50% rx is at its maximum, so
   the meridian lies exactly on the outline circle and the jump repaints the
   same pixels; at 100% rx is ~0, so both halves have collapsed onto the same
   line down the center.

   Slow on purpose: this sits beside a static list, and anything quicker turns a
   menu row into something that wants watching. */
#texs-chrome .more-sites-globe {
  flex-shrink: 0;
  overflow: visible;
}
#texs-chrome .more-sites-globe-m {
  animation:
    more-sites-globe-turn 9s linear infinite,
    more-sites-globe-half 9s step-end infinite;
}
@keyframes more-sites-globe-turn {
  0%     { rx: 0.1px; }
  12.5%  { rx: 4.018px; }
  25%    { rx: 7.425px; }
  37.5%  { rx: 9.701px; }
  45%    { rx: 10.371px; }
  50%    { rx: 10.5px; }
  55%    { rx: 10.371px; }
  62.5%  { rx: 9.701px; }
  75%    { rx: 7.425px; }
  87.5%  { rx: 4.018px; }
  100%   { rx: 0.1px; }
}
/* step-end holds each value for its whole segment, so this is a clean flip at
   50% and again at the loop point — never a sweep. The 100% stop is not
   optional: without it the implicit final keyframe would fall back to the
   element's own attribute, which differs per meridian. */
@keyframes more-sites-globe-half {
  0%, 100% { stroke-dashoffset: 75px; }
  50%      { stroke-dashoffset: 25px; }
}
/* rx never reaches 0 — SVG2 drops an ellipse whose rx is 0, which would blink
   the meridian out at every crossing. 0.1 user units is under a tenth of a
   device pixel at 16px, so the pair still lands on the center line. */

/* The markup's own staggered rx and dash offsets are the still frame, so
   switching the animation off is the whole opt-out — nothing to restate. */
@media (prefers-reduced-motion: reduce) {
	#texs-chrome .more-sites-globe-m { animation: none; }
}

/* ── The version row (CHROME-SPEC §6 — first thing in the panel) ─────────── */

#texs-chrome .tx-version {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 16px 10px;
}

#texs-chrome .tx-version-label {
	display: block;
	font-size: 9px;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tx-faint);
}

#texs-chrome .tx-version-value {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1;
	color: var(--tx-muted);
}

/* No ⓘ button: texs.org has no changelog for it to open. See the spec's
   conformance table, footnote 1 — instapicker and poster-lang are the same. */

/* Right group of the version row: the bare 20px toggles, 12px apart. */
#texs-chrome .tx-toggles {
	display: flex;
	align-items: center;
	gap: 12px;
}

#texs-chrome .tx-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--tx-muted);
	cursor: pointer;
	transition: color .15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

#texs-chrome .tx-toggle:hover { color: var(--tx-ink); }

#texs-chrome .tx-toggle:focus-visible {
	outline: 2px solid var(--tx-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

#texs-chrome .tx-toggle svg { width: 20px; height: 20px; display: block; }

/* ── Rows (CHROME-SPEC §5) ───────────────────────────────────────────────── */

#texs-chrome .tx-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 16px;
	border: 0;
	background: transparent;
	font-size: 14px;
	line-height: 1.3;
	color: var(--tx-ink);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
	box-sizing: border-box;
}

/* TT1 underlines and shadow-underlines every link in the flow; this is chrome. */
#texs-chrome .tx-item,
#texs-chrome .tx-item:hover,
#texs-chrome .tx-item:focus {
	text-decoration: none;
	box-shadow: none;
}

#texs-chrome .tx-item:hover { background: var(--tx-wash); }

#texs-chrome .tx-item:focus-visible {
	outline: 2px solid var(--tx-focus);
	outline-offset: -2px;
}

#texs-chrome .tx-icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#texs-chrome .tx-icon svg { width: 16px; height: 16px; display: block; }

#texs-chrome .tx-item-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Signed-in identity ──────────────────────────────────────────────────── */

#texs-chrome .tx-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
}

#texs-chrome .tx-avatar {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--tx-avatar-bg) center / cover no-repeat;
	color: var(--tx-trigger-ink);
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#texs-chrome .tx-user-text { min-width: 0; }

#texs-chrome .tx-user-name {
	display: block;
	font-size: 14px;
	color: var(--tx-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#texs-chrome .tx-user-plan {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	color: var(--tx-muted);
}

/* ── Dark ────────────────────────────────────────────────────────────────── */

/*
 * Keyed off Twenty Twenty-One's own class rather than a class of ours, so the
 * chrome cannot drift out of step with the page: whatever puts the site into
 * dark — our menu toggle, TT1's footer button, the head script, or a second
 * tab — moves the chrome with it for free.
 */
[data-theme="dark"] #texs-chrome {
	--tx-surface: #1f2430;
	--tx-ink: #f3f4f6;
	--tx-muted: #9ca3af;
	--tx-faint: #6b7280;
	--tx-hairline: rgba(255, 255, 255, .10);
	--tx-wash: rgba(255, 255, 255, .07);
	--tx-trigger-ink: #d1d5db;
	--tx-avatar-bg: #374151;
	--tx-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
	--tx-focus: #60a5fa;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 380px) {
	#texs-chrome .tx-panel { width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
	#texs-chrome .tx-trigger,
	#texs-chrome .tx-toggle,
	#texs-chrome .tx-item { transition: none; }
	/* A blinking element is the plainest case this preference covers. The
	   colon stays, it just stops moving. */
	#texs-chrome .tx-clock-colon { animation: none; opacity: 1; }
}