/* ---------------------------------------------------------------------------
   slots.css - the builder shell: the caption, the pill row and the panels.

   Loaded only by index.html, and only after tokens.css. Every colour, radius,
   type size and spacing step here is a token; there is not one hex literal in
   this file. assets/styles.css is off limits (CONTRACTS H26), so where a shipped
   rule has to be overridden it is done from here with a selector that outranks
   it, never by editing that file.

   Two overriding rules that are outranked on purpose, both from styles.css:

     input[type="range"]  is (0,1,1) - an element plus an attribute - so a plain
                          .wcs-range at (0,1,0) LOSES to it and the shipped
                          height and margin would win. Every range rule below is
                          therefore written input[type="range"].wcs-range.

     #hudOverlay.idle …   fades .hud-bottom, which no longer exists. The builder
                          shell now puts its OWN row in that selector - see THE
                          IDLE FADE at the foot of this file - while panels stay
                          out of it, so a panel still cannot dissolve while it
                          is being read (CONTRACTS H20). goIdle() additionally
                          refuses to fire at all while a panel is open.

   Pointer events: #hudOverlay is pointer-events:none so an orbit drag that
   starts on the chrome still reaches the canvas. Only the things you actually
   press turn it back on - never a whole container, which is what made the old
   wind dock swallow drags across its entire rect (CONTRACTS H29).
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   The one focus ring on the page.

   The shipped stylesheet has exactly one focus rule in it, on a text box that
   no longer exists, so before this every keyboard visitor was navigating blind.
   :focus-visible rather than :focus, so a pointer press never draws it.
   --------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wcs-focus);
	outline-offset: 2px;
	border-radius: var(--wcs-r-sm);
}

/* The panel itself takes focus when it opens, to announce the dialog. That is a
   programmatic focus and does not want a ring drawn round the whole surface. */
.wcs-panel:focus,
.wcs-panel:focus-visible {
	outline: none;
}


/* ---------------------------------------------------------------------------
   Placement inside #hudOverlay's three-row grid.

   Row 1 is the title, row 2 is the empty band the object hangs in, row 3 is the
   shell. The object owns the middle and nothing is allowed into it.

   THE ROW NEVER MOVES. This is the one rule the whole shell is built around and
   the first version broke it: caption, pills and panel were three items in one
   flex column, so opening a panel grew the column and pushed the caption and the
   pill row 303px up at 1440 and 345px at 390 - out of the bottom band and into
   the object's. The pill you had just pressed was no longer under your finger,
   a live slider was, and the trailing press of a double-tap silently wrote a
   setting nobody asked for (measured: wind.turbulence null -> 0.27).

   So the caption and the pill row are the only things in the column, and
   everything that opens - the panel, the unlock line, the weather status - is
   absolutely positioned against the top edge of that column and grows UPWARDS
   over the scene. `bottom: 100%` of a position:relative .wcs-slots is the top
   edge of the row, and nothing above it can change where the row is.
   --------------------------------------------------------------------------- */

.wcs-slots {
	grid-row: 3;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wcs-s3);
	min-width: 0;
	pointer-events: none;
	/* On a phone the browser chrome and the home indicator eat the last band of
	   the viewport. max() rather than a bare env() so a desktop, where the inset
	   is 0px, still gets its gutter. */
	padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* The weather status line used to live inside the wind dock. It sits above the
   shell now, out of the column's flow so a reading arriving cannot shift the
   pill row, and takes no space at all until something writes to it. */
#statusLine {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + var(--wcs-s3) + 40px);
	margin: 0 auto;
	width: max-content;
	max-width: 100%;
	text-align: center;
	font-size: var(--wcs-fs-label);
	line-height: 1.3;
	color: var(--wcs-ink-dim);
	text-shadow: var(--wcs-halo);
	pointer-events: none;
}

#statusLine:empty {
	display: none;
}


/* ---------------------------------------------------------------------------
   The caption.

   One sentence naming what has been made, straight out of design.js's
   describe(). It is the single source of truth for this line and for the share
   text; nobody writes a second one.
   --------------------------------------------------------------------------- */

.wcs-caption {
	margin: 0;
	/* Wide enough that the default sentence lands on one line at 1440, which is
	   what makes it read as the object's name rather than as a paragraph. */
	max-width: min(72ch, 100%);
	text-align: center;
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-caption);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.005em;
	color: var(--wcs-ink);
	text-shadow: var(--wcs-halo-strong);
	pointer-events: none;
}


/* ---------------------------------------------------------------------------
   The pill row.

   Five parts of one object. Never a value and never a unit: a critic reading
   only this row cannot tell which numbers are currently set.
   --------------------------------------------------------------------------- */

.wcs-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wcs-s2);
	max-width: 100%;
	pointer-events: none;
}

/* The byline under the pill row.
   Tight to the pills rather than a full column gap below them, because it
   belongs to the row above it: --wcs-s3 of air read as a second, unrelated
   thing sitting at the bottom of the frame. The negative top margin takes back
   most of the column's own gap.
   .wcs-slots is pointer-events:none and every control in it sets its own back,
   so this does too or the link would not be clickable. */
.wcs-byline {
	margin: calc(var(--wcs-s3) * -1 + var(--wcs-s1)) 0 0 0;
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-note);
	letter-spacing: 0.04em;
	line-height: 1;
	opacity: 0.62;
	transition: opacity 180ms ease-out;
}

.wcs-byline a {
	pointer-events: auto;
	color: var(--wcs-ink);
	text-decoration: none;
	/* The one halo on the page's floating text: this sits directly over the
	   picture with no surface behind it, and at 0.78rem it has to survive both a
	   sunlit gap and deep canopy shade. */
	text-shadow: 0 1px 3px color-mix(in srgb, var(--wcs-ink-on-accent) 75%, transparent);
}

.wcs-byline a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* One focus ring on the page, and this is it. */
.wcs-byline a:focus-visible {
	outline: 2px solid var(--wcs-focus);
	outline-offset: 3px;
	border-radius: 3px;
}

.wcs-pill {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: var(--wcs-tap);
	padding: 0 16px;
	margin: 0;
	border: 1px solid var(--wcs-hairline);
	border-radius: var(--wcs-r-pill);
	background: var(--wcs-surface);
	-webkit-backdrop-filter: var(--wcs-blur);
	backdrop-filter: var(--wcs-blur);
	color: var(--wcs-ink);
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-pill);
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wcs-t-fast) var(--wcs-ease),
	            border-color var(--wcs-t-fast) var(--wcs-ease);
}

.wcs-pill:hover {
	background: var(--wcs-raise);
	border-color: var(--wcs-hairline-strong);
}

.wcs-pill[aria-expanded="true"] {
	background: var(--wcs-raise-hi);
	border-color: var(--wcs-hairline-strong);
}

.wcs-pill-glyph {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: currentColor;
	opacity: 0.82;
}

/* Where the blur is unavailable the pill has to carry its own contrast: a
   bright sky behind it would otherwise eat the label. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.wcs-pill,
	.wcs-panel {
		background: var(--wcs-surface-opaque);
	}

}


/* ---------------------------------------------------------------------------
   The panels.

   One per part, opening over the bottom third with the chime still swinging and
   sounding behind it. A closed panel is display:none, so not one of its
   controls is focusable - the drawer this replaces was off-canvas by transform
   only and kept all sixteen reachable by Tab (CONTRACTS H21).
   --------------------------------------------------------------------------- */

/* Out of the column's flow entirely, anchored to the top edge of the row it
   opens above. The row's y is identical open and closed, at every width and for
   every panel - measured, not asserted. */
.wcs-panel-host {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + var(--wcs-s3));
	width: min(760px, 100%);
	margin: 0 auto;
	min-width: 0;
	pointer-events: none;
}

/* Scoped, not global. A piece stylesheet has no business authoring a rule that
   matches every element on the page. */
.wcs-panel[hidden] {
	display: none !important;
}

.wcs-panel {
	pointer-events: auto;
	position: relative;
	z-index: var(--wcs-z-panel);
	box-sizing: border-box;
	width: 100%;
	padding: var(--wcs-s3) var(--wcs-s4) var(--wcs-s4);
	border: 1px solid var(--wcs-hairline);
	border-radius: var(--wcs-r-lg);
	background: var(--wcs-surface);
	-webkit-backdrop-filter: var(--wcs-blur);
	backdrop-filter: var(--wcs-blur);
	color: var(--wcs-ink);
	font-family: var(--wcs-font-ui);
	/* The opening state. .is-open is added a frame after the panel is shown, so
	   the transition has a from-value to run from. */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--wcs-t-slow) var(--wcs-ease),
	            transform var(--wcs-t-slow) var(--wcs-ease);
}

.wcs-panel.is-open {
	opacity: 1;
	transform: none;
}

/* Belt and braces on top of the layout fix above. For the length of the opening
   transition the panel accepts no pointer input at all, so the second press of a
   double-tap - anywhere, including the panel's own controls - cannot land on a
   control that was not on screen when the finger went down. slots.js drops the
   class on a timer. */
/* The descendant selector is not padding. pointer-events:none on an ancestor is
   overridden by any descendant that sets it back to auto, and the chips, the
   Done button, the text box and every range in here do exactly that so the panel
   can sit inside a pointer-events:none overlay. Without the second selector the
   guard measured as having no effect at all: elementFromPoint on a chip returned
   the chip 44 ms after the panel opened. */
.wcs-panel.is-arming,
.wcs-panel.is-arming * {
	pointer-events: none;
}

.wcs-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcs-s3);
	padding-bottom: var(--wcs-s2);
	margin-bottom: var(--wcs-s2);
	border-bottom: 1px solid var(--wcs-hairline);
}

/* styles.css gives every h1/h2/h3 the display face and an 8px top margin. */
.wcs-panel-title {
	margin: 0;
	font-family: var(--wcs-font-display);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--wcs-ink);
}

.wcs-close {
	pointer-events: auto;
	flex: 0 0 auto;
	min-height: 34px;
	padding: 0 16px;
	border: none;
	border-radius: var(--wcs-r-pill);
	background: var(--wcs-accent);
	color: var(--wcs-ink-on-accent);
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-label);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--wcs-t-fast) var(--wcs-ease);
}

.wcs-close:hover {
	background: var(--wcs-accent-hi);
}

/* The scrolling half. Capped so the panel stays a bottom-third door rather than
   a sheet: with the head and the padding this puts the whole panel at 300px of a
   900px frame, measured, which is where the chime's sail stops being covered. */
.wcs-panel-body {
	max-height: min(26vh, 222px);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* An orbit drag is a pointer drag; a panel that scrolls has to claim its own
	   vertical gestures or the two fight on a touch screen. */
	touch-action: pan-y;
	padding-right: var(--wcs-s1);
}


/* Groups and fields -------------------------------------------------------- */

.wcs-group {
	margin: 0 0 var(--wcs-s4) 0;
}

.wcs-group:last-child {
	margin-bottom: 0;
}

.wcs-group-title {
	margin: 0 0 var(--wcs-s2) 0;
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-label);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wcs-ink-faint);
}

/* One rung down from a group title, for a group that holds two settings which
   are not the same setting. Sentence case rather than the group title's caps,
   so the hierarchy reads at a glance without a second size step. */
.wcs-subgroup-title {
	margin: var(--wcs-s3) 0 var(--wcs-s1) 0;
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-label);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wcs-ink-dim);
}

.wcs-subgroup-title:first-of-type {
	margin-top: 0;
}

/* One half of a group that is really a switch: Local or Manual inside Weather.
   Only one is ever in the layout, and `hidden` rather than a transform is the
   point - the half that is off screen has to be out of the focus order and out
   of the panel's own Tab trap (H21, one level down). ui/landing.js sets it. */
.wcs-mode-pane {
	margin-top: var(--wcs-s2);
}

.wcs-mode-pane[hidden] {
	display: none;
}

.wcs-field {
	margin: 0 0 var(--wcs-s3) 0;
}

.wcs-field:last-child {
	margin-bottom: 0;
}

/* A row, not a label. The <label for> underneath wraps the NAME only.
   The whole row used to be the label, which put the formatted number inside the
   slider's accessible name - so a screen reader read "Across 68 mm, slider,
   0.068", and the NAME changed on every arrow-key press. A slider's name is the
   thing it names; its value belongs in aria-valuetext, which slots.js writes
   from the same format() call that writes the number on screen. */
.wcs-field-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wcs-s3);
	margin-bottom: var(--wcs-s1);
}

.wcs-field-name {
	font-size: var(--wcs-fs-body);
	color: var(--wcs-ink-dim);
	cursor: pointer;
}

/* A control that cannot act yet is present and visibly off, with its reason on
   its own label - never missing, and never live-but-inert (CONTRACTS P5
   criterion 5). */
.wcs-field.is-disabled .wcs-field-name,
.wcs-field.is-disabled .wcs-field-value {
	color: var(--wcs-ink-faint);
	cursor: default;
}

input[type="range"].wcs-range:disabled {
	opacity: 0.4;
	cursor: default;
}

.wcs-field-why {
	display: block;
	margin-top: 2px;
	font-size: var(--wcs-fs-note);
	color: var(--wcs-ink-faint);
}

.wcs-field-value {
	font-size: var(--wcs-fs-body);
	font-variant-numeric: tabular-nums;
	color: var(--wcs-ink);
	white-space: nowrap;
}

/* The element-plus-attribute selector in styles.css outranks a bare class, so
   every one of these carries the same shape. The filled-track thumb trick from
   that sheet is deliberately inherited rather than rewritten. */
input[type="range"].wcs-range {
	display: block;
	width: 100%;
	height: 26px;
	margin: 0;
	background-color: var(--wcs-raise);
	border-radius: var(--wcs-r-pill);
	cursor: pointer;
}

/* A value the design is still leaving to the place: shown so the slider has
   somewhere honest to sit, but not yet a choice the visitor has made. */
.wcs-field-value.is-inherited {
	color: var(--wcs-ink-faint);
	font-weight: 400;
}

.wcs-note {
	margin: var(--wcs-s2) 0 0 0;
	font-size: var(--wcs-fs-note);
	line-height: 1.5;
	color: var(--wcs-ink-faint);
}


/* The live-weather row ------------------------------------------------------

   #locationInput and #startButton are back, inside the Place panel, because they
   are the only two callers of runWeatherChain() in main.js and deleting the dock
   that held them deleted live weather with it. The ids are load-bearing and the
   classes are only for the paint.

   Both selectors carry the id as well as the class: assets/styles.css styles
   #startButton at (1,0,0) as a big amber pill, and a bare class at (0,1,0) would
   lose to it silently. #locationInput's box rules there are scoped to .dock-start
   and match nothing now, so it arrives unstyled and is dressed from scratch. */

.wcs-weather-row {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin: 0 0 var(--wcs-s3) 0;
}

input[type="text"]#locationInput.wcs-text {
	pointer-events: auto;
	flex: 1 1 120px;
	min-width: 0;
	min-height: 38px;
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid var(--wcs-hairline);
	border-radius: var(--wcs-r-sm);
	background: var(--wcs-raise);
	color: var(--wcs-ink);
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-body);
}

input[type="text"]#locationInput.wcs-text::placeholder {
	color: var(--wcs-ink-faint);
}

#startButton.wcs-weather-go {
	pointer-events: auto;
	flex: 0 0 auto;
	min-height: 38px;
	padding: 0 13px;
	border: none;
	border-radius: var(--wcs-r-sm);
	background: var(--wcs-accent);
	color: var(--wcs-ink-on-accent);
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-label);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wcs-t-fast) var(--wcs-ease);
}

#startButton.wcs-weather-go:hover {
	background: var(--wcs-accent-hi);
}

/* A label that exists for the accessibility tree and not for the eye. The
   placeholder is not a label: it disappears the moment anything is typed, and
   several screen readers never announce it at all. */
.wcs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* Choice groups ------------------------------------------------------------ */

.wcs-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wcs-choice-option {
	pointer-events: auto;
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid var(--wcs-hairline);
	border-radius: var(--wcs-r-pill);
	background: var(--wcs-raise);
	color: var(--wcs-ink-dim);
	font-family: var(--wcs-font-ui);
	font-size: var(--wcs-fs-label);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wcs-t-fast) var(--wcs-ease),
	            color var(--wcs-t-fast) var(--wcs-ease);
}

.wcs-choice-option:hover {
	background: var(--wcs-raise-hi);
	color: var(--wcs-ink);
}

.wcs-choice-option[aria-checked="true"] {
	background: var(--wcs-accent);
	border-color: var(--wcs-accent);
	color: var(--wcs-ink-on-accent);
	font-weight: 600;
}

.wcs-choice-option[aria-checked="true"]:hover {
	background: var(--wcs-accent-hi);
	border-color: var(--wcs-accent-hi);
}

.wcs-choice-wide .wcs-choice-option {
	white-space: normal;
	text-align: left;
}


/* ---------------------------------------------------------------------------
   Phones. It stays a pill row - wrapped, not reflowed into a list.
   --------------------------------------------------------------------------- */

@media (max-width: 700px) {

	.wcs-slots {
		gap: var(--wcs-s2);
	}

	.wcs-caption {
		font-size: var(--wcs-fs-body);
		max-width: 34ch;
	}

	.wcs-pills {
		gap: 6px;
	}

	/* Held at the full tap target, not shrunk to 40: a phone is where the 44px
	   matters and the bar's own phone pills are bigger than its desktop ones. */
	.wcs-pill {
		min-height: var(--wcs-tap);
		padding: 0 12px;
		font-size: var(--wcs-fs-label);
		gap: 5px;
	}

	.wcs-pill-glyph {
		width: 13px;
		height: 13px;
	}

	.wcs-panel {
		padding: var(--wcs-s3);
	}

	.wcs-panel-body {
		max-height: min(30vh, 240px);
	}

}


/* Narrow phones. Measured on a 390 CSS-pixel frame: five pills at the 700px
   sizes came to 401px against 362px of usable width and broke to two rows with
   one orphan on the second. The row is the thing that has to survive, so the
   padding, the glyph and the gap all give ground before it does - it stays a
   pill row and it stays one row. */
@media (max-width: 430px) {

	.wcs-pill {
		padding: 0 9px;
		gap: 4px;
		font-size: 0.78rem;
		letter-spacing: 0;
	}

	.wcs-pill-glyph {
		width: 12px;
		height: 12px;
	}

	.wcs-pills {
		gap: 4px;
	}

}


/* The 430px step above holds one row down to 384 CSS px and no further: at 375
   (iPhone SE and 8) and at 360 (the commonest Android width) the row broke to
   four pills and an orphaned Hang. It also broke at 390 with the OS text size
   turned up one notch. The glyph is the thing worth spending: five words is what
   the row is FOR, and a location pin next to the word "Place" is decoration.
   Measured at 320, the narrowest width anyone still ships: one row, 300px of
   pills against 292px of usable width, so the row is also allowed to scroll
   rather than wrap if a future label makes it too long. */
@media (max-width: 383px) {

	.wcs-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		justify-content: safe center;
		max-width: 100%;
		padding: 2px;
	}

	.wcs-pills::-webkit-scrollbar {
		display: none;
	}

	.wcs-pill-glyph {
		display: none;
	}

	.wcs-pill {
		padding: 0 10px;
		font-size: 0.8rem;
	}

}


/* ---------------------------------------------------------------------------
   Motion preferences. The simulation is the content and keeps running; only the
   interface animation stops.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.wcs-panel,
	.wcs-pill,
	.wcs-close,
	.wcs-choice-option {
		transition: none;
	}

	.wcs-panel {
		transform: none;
	}

}

/* ---------------------------------------------------------------------------
   THE IDLE FADE
   ---------------------------------------------------------------------------
   The chrome dissolves when the pointer stops, so what is left is the object in
   its place, and comes back the instant anything moves.

   This existed and then quietly stopped existing. main.js has always added
   `.idle` to #hudOverlay after HUD_IDLE_MS without a pointer, and styles.css
   has always had the rules - but every selector in them names a piece of the
   OLD chrome: .hud-bottom, #hudDock, #menuToggle, the settings drawer. P3
   replaced all of that with the pill row and nothing in the builder shell was
   ever added back, so the mechanism kept running against elements that no
   longer exist. The header of this file has said so, in writing, the whole
   time. Nobody had a reason to read it until the fade was asked for back.

   In THIS sheet and not in styles.css, which is shared with about.html,
   terms.html and privacy.html and is off limits (CONTRACTS H26). It loads after
   styles.css, so where the two say different things about the same selector
   this one wins by order at equal specificity.

   ASYMMETRIC, and the reasoning is styles.css's own: whichever rule applies
   AFTER the class changes is the one that governs, so the base state times the
   WAKE and the .idle rule times the FADE. Coming back is quick - you moved the
   pointer because you want the controls - while going is a long dissolve you
   are not meant to notice starting.

   WHAT DOES NOT FADE, on purpose:
     - Any open panel. goIdle() returns early while one is up, so a picker
       cannot dissolve mid-read.
     - The wordmark, which only half goes. The page still says what it is while
       you watch it.
   --------------------------------------------------------------------------- */

#wcsPills {
	transition: opacity 180ms ease-out;
}

#hudOverlay.idle #wcsPills {
	opacity: 0;
	transition: opacity 2200ms ease-in;
}

/* Nothing invisible stays clickable. A press then lands on the canvas, which
   wakes the chrome, and the pills are back and legible before anything can be
   hit by accident. */
#hudOverlay.idle #wcsPills,
#hudOverlay.idle #wcsShare {
	pointer-events: none;
}

/* Share goes too. It was held out of this at first because it is the page's one
   primary action and index.html said so in as many words - but what is left
   when the pointer stops is meant to be the object in its place, and a Share
   button hovering over a still forest is the one thing in frame still admitting
   there is a web page here. It returns in 180 ms on any movement, which is
   quicker than reaching for it. */
#wcsShare {
	transition: opacity 180ms ease-out;
}

#hudOverlay.idle #wcsShare {
	opacity: 0;
	transition: opacity 2200ms ease-in;
}

/* Half, not the ghost styles.css asks for. 0.2 reads as "nearly gone"; this is
   the "about half way" that was actually wanted, and at this size the wordmark
   stays legible against both the wood and the lawn. */
#hudOverlay.idle .hud-title h1 {
	opacity: 0.45;
	transition: opacity 2200ms ease-in;
}

/* The byline half-goes with it, and for the same reason: the wordmark says what
   the page is and this says whose it is, and neither fact stops being true
   because the visitor held still. It sits at 0.62 at rest rather than at 1 -
   a signature under the controls is not competing with them - so the idle
   opacity is a step down from that rather than the wordmark's number. Written
   here beside the wordmark's own rule so the two cannot drift apart. */
#hudOverlay.idle .wcs-byline {
	opacity: 0.34;
	transition: opacity 2200ms ease-in;
}

/* Deliberately NOT in the pointer-events rule above. That one exists so nothing
   invisible stays clickable; this never becomes invisible, so a press on it is
   a press on a link the visitor can still see. */