#ptapp {
	--bg: #FBF8F0;  /* ivory page */
	--surface: #FFFFFF;  /* cards */
	--surface2: #F4EFE2;  /* raised/inset */
	--line: #DDD6C3;
	--ctlline: #8A8060;  /* WCAG 1.4.11: interactive-control border, >=3:1 vs both the control fill and the page; decorative hairlines keep --line */
	--text: #2C2B22;
	--faded: #63604F;  /* WCAG 1.4.3: small faded text on --surface2 now ~5.5:1 (was #6E6A5A ~4.7:1) */
	--gold: #B58A2A;  /* menorah brass */
	--gold-deep: #7A5E15;  /* r126 contrast wave: #8A6A1D measured 4.40:1 on --surface2, under the 4.5:1 small-text floor (SC 1.4.3); #7A5E15 clears 4.5 on every light surface this app paints (5.32:1 on --surface2, 6.11:1 on white) */
	/* WCAG 2.4.7 / 1.4.11: the keyboard focus ring is its OWN token, not --gold. Plain --gold
	   (#B58A2A) measures only 2.98:1 on --bg and 2.76:1 on --surface2, so the ring failed the
	   3:1 floor everywhere except a white card. #8A6A1D clears 3:1 against every surface this
	   app paints in the light theme: 5.05:1 on #FFFFFF, 4.76:1 on --bg #FBF8F0, 4.40:1 on
	   --surface2 #F4EFE2, 4.02:1 on the #ECE5D2 hover fill, and 4.16:1 on a black canvas. */
	--focusring: #8A6A1D;
	--gold-bright: #E8B83F;
	--green: #2F6B3A;  /* wreath green */
	--moon: #4A6B96;  /* slate blue for the moon */
	--blood: #9E3B30;  /* reminder accent */
	--sans: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* RESPONSIVE TYPE BASE: the one knob. Every font-size in the app below is now `em`,
   relative to this. The `1rem` floor honours the visitor's browser font-size setting;
   the `+0.4vw` grows the whole app's text with the viewport, capped at `1.25rem`
   so fixed-px controls never overflow. Scoped to #ptapp - site nav/footer untouched.
   --ptfs is the visitor's Text Size choice (80%..150%) from the Tools & Display
   panel; the JS sets it on #ptapp, and it defaults to 1 (100%). */
#ptapp {
	font-size: calc(clamp(1rem, 0.9rem + 0.4vw, 1.25rem) * var(--ptfs, 1));
}

#ptapp a, #ptapp a:link, #ptapp a:visited {
	color: var(--gold-deep);
	text-decoration: none;
}

#ptapp a:hover, #ptapp a:active {
	color: var(--gold);
	text-decoration: underline;
}

#ptapp h1, #ptapp h2, #ptapp h3, #ptapp p, #ptapp ul, #ptapp ol, #ptapp li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#ptapp img, #ptapp svg {
	border: 0;
	max-width: 100%;
	vertical-align: middle;
}

/* r83: content photographs (e.g. #secPhoto Earthrise). The width/height attributes
   reserve layout space; height:auto keeps the aspect ratio when max-width clamps. */
#ptapp figure img {
	height: auto;
	display: block;
	margin: 0 auto;
}

#ptapp {
	box-sizing: border-box;
}

#ptapp * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#ptapp {
	background: radial-gradient(1100px 500px at 85% -10%, #F3E9CC 0%, transparent 60%), radial-gradient(900px 460px at 8% 0%, #E9EFE4 0%, transparent 55%), var(--bg);
	color: var(--text);
	font-family: var(--sans);
	line-height: 1.55;
	min-height: 100vh;
}

#ptapp a {
	color: var(--green);
}

#ptapp a:hover {
	color: var(--gold-deep);
}

/* WCAG 2.4.11 / hover-focus parity: a mouse user gets a color shift plus an underline on
   every link (the rules above), while a keyboard user previously got only the shared
   ":focus-visible" outline. This mirrors the hover emphasis onto keyboard focus so the
   citation rows and every other link read the same either way. The outline itself still
   comes from "#ptapp :focus-visible". */
#ptapp a:focus-visible {
	color: var(--gold-deep);
	text-decoration: underline;
}

#ptapp button {
	font: inherit;
	cursor: pointer;
}

#ptapp :focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .num {
	font-variant-numeric: tabular-nums;
}

/* ---------- header ---------- */
#ptapp header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 0.875rem;
	margin-bottom: 1.125rem;
}

#ptapp .brand {
	font-size: 1.45em;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--green);
}

#ptapp .tagline {
	color: var(--faded);
	font-size: .9em;
	letter-spacing: .02em;
}

#ptapp .live {
	margin-left: auto;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

#ptapp .live .clock {
	font-size: 1.25em;
	font-weight: 600;
	color: var(--gold-deep);
}

#ptapp .live .nowel {
	font-size: .82em;
	color: var(--faded);
}

/* ---------- bars ---------- */
#ptapp .bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0.625rem 0.875rem;
	margin-bottom: 0.875rem;
	box-shadow: 0 1px 3px rgba(80,70,40,0.06);
}

#ptapp .placeresults[hidden] { display: none; }

#ptapp .lbl {
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--green);
}

#ptapp .bar input[type=number] {
	width: 6.75rem;
	background: #FFFFFF;
	border: 1px solid var(--ctlline);
	border-radius: 6px;
	color: var(--text);
	padding: 0.375rem 0.5rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
}

#ptapp .bar input[type=time] {
	background: #FFFFFF;
	border: 1px solid var(--ctlline);
	border-radius: 6px;
	color: var(--text);
	padding: 0.375rem 0.5rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
}

#ptapp .coords.conn {
	color: var(--green);
	font-weight: 600;
}

#ptapp .btn {
	background: var(--surface2);
	border: 1px solid var(--ctlline);
	color: var(--text);
	border-radius: 7px;
	padding: 0.375rem 0.75rem;
	font-weight: 500;
	transition: background .15s,border-color .15s;
}

#ptapp .btn:hover {
	background: #ECE5D2;
	border-color: var(--gold);
	color: var(--text);
}

#ptapp .btn.gold {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
	font-weight: 700;
}

#ptapp .btn.gold:hover {
	filter: brightness(1.06);
}

#ptapp .btn.small {
	padding: 0.25rem 0.5625rem;
	font-size: .85em;
	min-height: 1.5rem;  /* WCAG 2.5.8: >=24px target height for all small buttons */
}
/* WCAG 2.5.8: icon-only small buttons get a 24px minimum in BOTH dimensions (a single
   glyph otherwise leaves little target width). Text small buttons are already wider. */
#ptapp #clockGear, #ptapp .btn.small.era, #ptapp .rsp-gear, #ptapp .rsp-secgear, #ptapp .rsp-toolgear, #ptapp .secshare-btn, #ptapp .rsp-close, #ptapp .rsp-secfs {
	min-width: 1.5rem;
	min-height: 1.5rem;
}

#ptapp .exportloc {
	font-size: .85em;
	color: var(--faded);
	white-space: nowrap;
}

#ptapp .exportloc input {
	vertical-align: -1px;
	margin-right: 0.25rem;
}

#ptapp .coords {
	color: var(--faded);
	font-size: .88em;
	font-variant-numeric: tabular-nums;
}

#ptapp .navdate {
	font-size: 1em;
	font-weight: 600;
	color: var(--green);
	min-width: 14.375rem;
	text-align: center;
}

#ptapp .spacer {
	flex: 1;
}

/* ---------- day arc (signature) ---------- */
#ptapp .arcbox {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1.125rem 1.125rem 0.375rem;
	margin-bottom: 1rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(80,70,40,0.06);
}

#ptapp .eyebrow {
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 0.25rem;
}

#ptapp .arc-title {
	font-size: 1.3em;
	font-weight: 650;
	letter-spacing: -.01em;
}

#ptapp .arcsvg {
	width: 100%;
	height: auto;
	display: block;
}

#ptapp .arcnote {
	color: var(--faded);
	font-size: .84em;
	text-align: center;
	padding: 0.25rem 0 0.625rem;
}

/* ---------- cards ---------- */
#ptapp .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(min(18.75rem, 100%),1fr));
	gap: 0.875rem;
	margin-bottom: 1.125rem;
}

#ptapp .card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1rem 1.125rem;
	box-shadow: 0 1px 3px rgba(80,70,40,0.06);
	color: var(--text);
}

#ptapp .card h2 {
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 0.625rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#ptapp .card h2 .dot {
	width: 0.5625rem;
	height: 0.5625rem;
	border-radius: 50%;
	display: inline-block;
}

/* WCAG 2.4.6 / 1.3.1: fn_pin_section_heading_names_for_aria() wraps each section heading's OWN text in this span
   and points the h2's aria-labelledby at it, so the heading no longer announces the names of
   the four controls injected into it (units gear, full-screen toggle, two share buttons).
   `display: contents` means the wrapper generates no box at all, so the header rows lay out
   byte-for-byte as they did before - the dot and the title text remain separate flex items of
   the .has-hdrgear row and keep its 0.4rem gap. The element is not hidden, so its text is
   still what the accessible-name computation reads. */
#ptapp .pt-h2text {
	display: contents;
}

#ptapp .dot.gold {
	background: var(--gold);
	color: var(--text);
}

#ptapp .dot.silver {
	background: var(--moon);
	color: #E8EEF8;
}

#ptapp .dot.reddotmarker { /* r83: renamed from .red (owner order 2026-07-18) - descriptive name, no shared name with the site stylesheet's red-text class */
	background: var(--blood);
	color: #E8EEF8;
}

/* DESIGN B (Whitespace v2): simple label+single-value rows read inline - the value
   sits immediately to the RIGHT of its label (flex-start + small gap) instead of being
   flung to a far/capped right edge. Genuine multi-column tables use .phrow / .yrow (grid)
   and are unaffected. */
#ptapp .row {
	display: flex;
	justify-content: flex-start;
	gap: 0.5rem;
	padding: 0.3125rem 0;
	border-bottom: 1px dotted #E4DECB;
	font-variant-numeric: tabular-nums;
}

#ptapp .row:last-child {
	border-bottom: none;
}

#ptapp .row .k {
	color: var(--faded);
}

#ptapp .row .v {
	text-align: left;
}

#ptapp .row .v small {
	color: var(--faded);
}

/* Design Group C: navigation arrows on labels + clickable date-time instants */
#ptapp .navlbl {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
#ptapp .navlbl-txt {
	color: var(--faded);
}
#ptapp .navlbl-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	background: #F6F1DF;
	color: #6E6A5A;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	border-radius: 0.25rem;
	padding: 0.05rem 0.3rem;
	min-width: 1.15rem;
	text-align: center;
}
#ptapp .navlbl-btn:hover {
	background: #ECE3C4;
	color: #4A4636;
}
#ptapp .navlbl-btn:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}
#ptapp .ci-inst {
	cursor: pointer;
	border-bottom: 1px dashed #C9B57A;
}
#ptapp .ci-inst:hover {
	color: var(--gold-deep);
}
#ptapp .ci-inst:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
	border-radius: 0.15rem;
}

/* ---------- DESIGN GROUP H: keep label/value tied on WIDE containers ---------- */
/* On phones (<=40em) every card is a single narrow column, so justify-content:
   space-between already sits each value right beside its label - left untouched.
   From 40.0625em up (just past the phone breakpoint) the fullrow card, the .month
   tool sections and the .readout2 sky readout can grow very wide, flinging the
   value to the far edge and breaking the label/value pairing. Capping the row's
   content width and left-aligning it re-ties each label to its value. Applies to
   both markup patterns (.row flex rows and .phrow grid tables); the identical cap
   keeps .phrow headers aligned with their body rows. No markup, JS, behaviour, or
   narrow .grid cards are affected. */
/* DESIGN B reconcile: the earlier max-width cap existed to re-tie space-between values
   on wide containers. Now that .row is flex-start, the value already sits beside its
   label at any width, so the cap is dropped for .row (the inline look wins). The cap is
   kept ONLY for the genuine .phrow grid table so its columns stay aligned. */
@media (min-width: 40.0625em) {
	#ptapp .month .phrow {
		max-width: 36rem;
		margin-right: auto;
	}
}

#ptapp .big {
	font-size: 1.45em;
	font-weight: 650;
	color: var(--gold-deep);
	font-variant-numeric: tabular-nums;
}

/* prayer hours */
#ptapp .hours {
	display: grid;
	gap: 0.625rem;
}

#ptapp .hour {
	border: 1px solid var(--line);
	border-left: 4px solid var(--blood);
	border-radius: 9px;
	padding: 0.625rem 0.8125rem;
	background: #FFFDF7;
	color: var(--text);
}

#ptapp .hour .top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.625rem;
	flex-wrap: wrap;
}

#ptapp .hour .name {
	font-size: 1em;
	font-weight: 600;
	letter-spacing: .01em;
}

#ptapp .hour .name small {
	color: var(--faded);
	font-weight: 400;
}

#ptapp .hour .t {
	font-size: 1.3em;
	font-weight: 650;
	color: var(--gold-deep);
	font-variant-numeric: tabular-nums;
}

#ptapp .hour .remember {
	margin-top: 0.25rem;
	color: var(--blood);
	font-size: .93em;
}

#ptapp .hour .ref {
	color: var(--faded);
	font-size: .78em;
}

#ptapp .hour.now {
	border-left-color: var(--gold);
	box-shadow: 0 0 0 1px var(--gold-bright) inset;
	background: #FCF6E3;
	color: var(--text);
}

#ptapp .hour.past {
	opacity: 1; /* prayer-hour reminders stay full-strength and bold all day; passed hours are NOT dimmed (owner request 2026-07-06). The 'now' gold highlight still marks the current hour. */
}

#ptapp .nextup {
	margin-top: 0.625rem;
	color: var(--faded);
	font-size: .9em;
}

#ptapp .nextup b {
	color: var(--gold-deep);
	font-variant-numeric: tabular-nums;
}

/* crescent */
#ptapp .sight {
	border: 1px solid #D9C27E;
	background: linear-gradient(180deg,#FBF3DC,#FFFDF7);
	border-radius: 9px;
	padding: 0.625rem 0.8125rem;
	margin-bottom: 0.625rem;
}

#ptapp .sight .when {
	font-size: 1.12em;
	font-weight: 650;
	color: var(--gold-deep);
}

#ptapp .badge {
	display: inline-block;
	font-size: .66em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 0.125rem 0.4375rem;
	vertical-align: middle;
}

#ptapp .badge.ecl {
	background: #F6E3E0;
	border: 1px solid #C98279;
	color: #8E3B30;
}

/* month view */
#ptapp .month {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1rem 1.125rem;
	margin-bottom: 1.125rem;
	box-shadow: 0 1px 3px rgba(80,70,40,0.06);
}

#ptapp .mhead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.625rem;
	text-align: center;
}

#ptapp .mhead .lbl.m0 {
	width: 100%;
	text-align: center;
}

#ptapp .mnav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	flex-wrap: wrap;
}

#ptapp .mtitle {
	font-size: 1.15em;
	font-weight: 650;
	color: var(--green);
	min-width: 12.5rem;
	text-align: center;
}

#ptapp .mgrid {
	display: grid;
	grid-template-columns: 2.4rem repeat(7,1fr);
	gap: 0.3125rem;
}

#ptapp .dow {
	font-size: .66em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--faded);
	text-align: center;
	padding: 0.25rem 0;
}

#ptapp .cell {
	min-height: 4.625rem;
	background: #FFFDF7;
	border: 1px solid #E4DECB;
	border-radius: 8px;
	padding: 0.375rem 0.4375rem;
	font-size: .78em;
	cursor: pointer;
	position: relative;
	transition: border-color .15s;
	color: var(--text);
}

#ptapp .cell:hover {
	border-color: var(--gold);
}

#ptapp .cell .d {
	color: var(--text);
	font-weight: 700;
	font-size: .82em;
	font-variant-numeric: tabular-nums;
}

/* Julian-calendar equivalent under the date in pre-1582 month cells */
#ptapp .cell .djulcell {
	display: block;
	font-size: 0.68em;
	color: var(--faded);
	font-weight: 400;
}

#ptapp .cell .cwd {
	display: none;
}

#ptapp .cell .e {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: .88em;
	color: var(--text);
}

#ptapp .cell .w {
	color: var(--faded);
	font-size: .7em;
}

#ptapp .cell.blank {
	background: transparent;
	border-color: transparent;
	cursor: default;
	box-shadow: none;
}

#ptapp .cell.today {
	border-color: var(--gold);
	border-width: 1.5px;
}

#ptapp .cell.sel {
	box-shadow: 0 0 0 2px var(--gold-bright) inset;
}

#ptapp .cell.sight {
	background: #FBF3DC;
	border-color: #C9A93E;
	color: var(--text);
}

#ptapp .cell.sight .e {
	color: var(--gold-deep);
}

#ptapp .cell .mark {
	position: absolute;
	top: 0.3125rem;
	right: 0.375rem;
	font-size: .78em;
}

#ptapp .legend {
	display: flex;
	gap: 0.875rem;
	flex-wrap: wrap;
	margin-top: 0.625rem;
	color: var(--faded);
	font-size: .8em;
}

#ptapp .legend span {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

/* DESIGN B: center the Crescent Visibility Map legend group only - both the
   Zone 1 / Zone 2 / Zone 3 swatches and the "star your location / sun overhead /
   moon overhead / shaded = night" line. Scoped to #secMap so the Month View legend
   (also .legend) stays left-aligned. */
#ptapp #secMap .legend {
	justify-content: center;
	text-align: center;
}

/* Inside one legend item the label wraps at narrow widths (360 px); inherited centring
   put each wrapped line at a different x while the swatch stayed at the far left. The
   item's own text is left-aligned so every line starts beside the swatch; the row of
   items still centres as a group. B4 browser pass, 37. */
#ptapp #secMap .legend span {
	text-align: left;
}

/* the bold zone name is its own flex item; without this it shrank and broke as "Zone / 2"
   beside the swatch at 360 px - the name stays whole and the description wraps */
#ptapp #secMap .legend span > b {
	flex-shrink: 0;
}

#ptapp .swatch {
	width: 0.8125rem;
	height: 0.8125rem;
	border-radius: 4px;
	display: inline-block;
}

/* visibility map + day slider */
#ptapp .viscanvas {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--ctlline);
	border-radius: 8px;
	background: #EDF1F4;
}

#ptapp .maptitle {
	font-size: 1.05em;
	font-weight: 600;
	color: var(--green);
	margin-bottom: 0.5rem;
}

/* DESIGN H: Map Options button + panel */
#ptapp .mapoptsbtn {
	margin-left: auto;
	font: inherit;
	color: var(--green);
	background: #FFFFFF;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 6px;
	padding: 0.15rem 0.5rem;
	cursor: pointer;
	line-height: 1.3;
}
#ptapp .mapoptsbtn:hover { border-color: var(--gold); }
#ptapp .mapopts {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #FFFFFF;
	padding: 0.75rem 0.875rem;
	margin: 0.5rem 0 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	color: var(--text);
}
#ptapp .mapopts[hidden] { display: none; }
#ptapp .mapopts-grp {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 14rem;
	min-width: 12rem;
}
#ptapp .mapopts-h {
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--faded);
	margin-bottom: 0.15rem;
}
#ptapp .mapopt {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: .9em;
	color: #3A3A2E;
	cursor: pointer;
}
#ptapp .mapopt input { cursor: pointer; }
#ptapp .mapopts-note {
	font-size: .8em;
	color: var(--faded);
	line-height: 1.4;
	margin: 0.15rem 0;
}
#ptapp .mapecl-filter {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin: 0.15rem 0;
}
#ptapp .mapecl-chip {
	border: 1px solid var(--line);
	background: #FBF8F0;
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
	font-size: .82em;
	color: var(--faded);
	cursor: pointer;
}
#ptapp .mapecl-chip.on {
	background: var(--green);
	color: #FFFFFF;
	border-color: var(--green);
}
#ptapp .mapecl-subfilter {
	margin: 0.05rem 0 0.2rem 1.1rem;
	padding-left: 0.55rem;
	border-left: 2px solid var(--line);
}
#ptapp .mapecl-subchip {
	font-size: .76em;
	padding: 0.06rem 0.5rem;
}
#ptapp .mapecl-add {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 0.2rem;
}
#ptapp .mapecl-add select {
	font: inherit;
	font-size: .85em;
	flex: 1 1 12rem;
	max-width: 100%;
	padding: 0.2rem 0.3rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--text);
}
#ptapp .mapecl-btn {
	border: 1px solid var(--gold);
	background: var(--gold);
	color: #FFFFFF;
	border-radius: 6px;
	padding: 0.2rem 0.6rem;
	font-size: .85em;
	cursor: pointer;
}
#ptapp .mapecl-legend {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.3rem;
}
#ptapp .mapecl-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: .82em;
	color: var(--faded);
}
#ptapp .mapecl-sw {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 3px;
	display: inline-block;
	flex: none;
}
#ptapp .mapecl-rm {
	border: 1px solid var(--line);
	background: #FFFFFF;
	border-radius: 4px;
	color: var(--blood);
	line-height: 1;
	padding: 0 0.35rem;
	margin-left: auto;
	cursor: pointer;
}
@media (max-width: 40em) {
	#ptapp .mapopts { gap: 0.85rem; padding: 0.65rem; }
	#ptapp .mapopts-grp { flex: 1 1 100%; min-width: 0; }
}

#ptapp .sliderwrap {
	position: relative;
	margin-top: 0.875rem;
}

#ptapp .needle {
	position: absolute;
	top: 0;
	height: 3.625rem;
	width: 2px;
	background: var(--gold);
	pointer-events: none;
	opacity: .95;
	color: var(--text);
}

#ptapp #timeSlider {
	width: 100%;
	margin-top: 0.375rem;
	accent-color: var(--gold);
	cursor: pointer;
}

#ptapp .readout {
	margin-top: 0.5rem;
	font-size: 1em;
	color: var(--gold-deep);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
#ptapp .readout .roDate {
	color: var(--gold);
	font-weight: 700;
	margin-right: 0.5rem;
}

#ptapp .fmtswitch {
	display: flex;
	gap: 0.375rem;
}

#ptapp .skyflex {
	display: flex;
	gap: 1.125rem;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

#ptapp .readout2 {
	flex: 1;
	min-width: 15rem;
}

/* DESIGN C (50/50): split .skyflex into two equal columns - left = compass + its
   data readout, right = the Next New-Moon Crescent heading + #crescentBox. Columns
   wrap naturally and stack to a single column on narrow screens. .skyleft is itself
   a flex row so the compass and .readout2 keep sitting side by side within its 50%. */
#ptapp .skycol {
	flex: 1 1 calc(50% - 0.5625rem);
	min-width: 16rem;
}

#ptapp .skyleft {
	display: flex;
	gap: 1.125rem;
	align-items: flex-start;
	flex-wrap: wrap;
}

#ptapp .skyright h2 {
	margin-top: 0;
}

@media (max-width: 640px) {
	#ptapp .skycol {
		flex-basis: 100%;
	}
}

#ptapp summary.lbl {
	cursor: pointer;
	list-style-position: outside;
}

#ptapp #yearBox {
	display: grid;
	grid-template-columns: max-content minmax(0, max-content) minmax(0, max-content) max-content;
	column-gap: 1.25rem;
	justify-content: start;
	max-width: 100%;
	/* the four max-content columns are wider than a 360 px viewport; the table scrolls
	   inside its own box instead of widening the whole page (B4 browser pass, 34) */
	overflow-x: auto;
}

#ptapp .yrow {
	display: contents;
	font-variant-numeric: tabular-nums;
	font-size: .9em;
}

#ptapp .yrow > span {
	display: flex;
	align-items: center;
	padding: 0.375rem 0.25rem;
	border-bottom: 1px dotted #E4DECB;
}

#ptapp .yrfoot {
	grid-column: 1 / -1;
}

#ptapp .yrow.head {
	color: var(--green);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

#ptapp .yrow .golink {
	background: none;
	border: none;
	color: var(--gold-deep);
	padding: 0;
	text-align: left;
	text-decoration: underline dotted;
}

#ptapp .yrow .golink:hover {
	color: var(--green);
}

#ptapp .seasonNav {
	background: none;
	border: none;
	color: var(--gold-deep);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 0 4px;
	line-height: 1;
}

/* WCAG 2.4.7 Focus Visible / 2.4.11 Focus Appearance. These two used to share one declaration
   block that set `outline: none`, so the season previous/next controls CANCELLED the shared
   #ptapp :focus-visible ring and replaced it with the green + underline the mouse hover already
   produces. A keyboard user got no indicator distinct from hover: with the pointer resting
   anywhere in the row he could not tell which control held focus, and a reader with low colour
   discrimination was left with only the underline. It was the last `outline: none` in the file.
   The states are separated now - hover keeps its emphasis, and focus-visible keeps the emphasis
   AND draws the app's standard ring, so the ring is ADDED on focus rather than replaced. */
#ptapp .seasonNav:hover,
#ptapp .seasonNav:focus-visible {
	color: var(--green);
	text-decoration: underline;
}

#ptapp .seasonNav:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

@media (max-width: 40em) {
	#ptapp #yearBox {
		column-gap: 0.75rem;
		/* the two date columns share the width that is left after # and Elong., so their
		   text wraps instead of the max-content tracks overlapping one another at 360 px
		   (B4 browser pass, 34); overflow-x:auto above stays as the safety net */
		grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr) max-content;
	}
	#ptapp .yrow {
		font-size: .78em;
	}
}

/* moon phase icons */
#ptapp .micon {
	vertical-align: -0.15625em;
}

/* month elongation chart */
#ptapp .chartwrap {
	margin-top: 0.875rem;
	border-top: 1px dotted #E4DECB;
	padding-top: 0.75rem;
}

/* all-twelve-hours panel */
#ptapp details.hours12 {
	margin-top: 0.625rem;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #FAF7EE;
}

#ptapp details.hours12 summary {
	cursor: pointer;
	padding: 0.5rem 0.8125rem;
	color: var(--faded);
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .03em;
}

#ptapp details.hours12 summary:hover {
	color: var(--text);
}

#ptapp details.hours12 .inner {
	padding: 0.125rem 0.8125rem 0.625rem;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(min(10rem, 100%),1fr));
	gap: 0.125rem 1rem;
}

#ptapp details.hours12 .h12 {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px dotted #E4DECB;
	padding: 0.1875rem 0;
	font-size: .85em;
	color: var(--faded);
}

#ptapp details.hours12 .h12 b {
	color: var(--gold-deep);
	font-weight: 600;
}

/* preset location chips */
#ptapp .chip {
	background: #FFFFFF;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	color: var(--faded);
	border-radius: 999px;
	padding: 0.1875rem 0.6875rem;
	font-size: .8em;
	font-weight: 500;
}

#ptapp .chip:hover {
	border-color: var(--gold);
	color: var(--text);
}

@media print {
	#ptapp {
		background: #ffffff;
		color: #000000;
	}

	#ptapp .bar, #ptapp button, #ptapp .live, #ptapp .legend, #ptapp .mark {
		display: none !important;
	}

	#ptapp .card, #ptapp .arcbox, #ptapp .month, #ptapp .hour, #ptapp details.hours12 {
		background: #ffffff;
		border-color: #bbbbbb;
		color: #000000;
		box-shadow: none;
	}

	#ptapp .cell {
		background: #ffffff;
		border-color: #cccccc;
		color: #000000;
		break-inside: avoid;
	}

	#ptapp .cell .e, #ptapp .hour .t, #ptapp .big, #ptapp .mtitle, #ptapp .arc-title, #ptapp .sight .when {
		color: #000000;
	}

	#ptapp .row .k, #ptapp .cell .d, #ptapp .cell .w, #ptapp .tagline, #ptapp .eyebrow, #ptapp .coords, #ptapp .nextup, #ptapp .arcnote, #ptapp #secFooter {
		color: #444444;
	}

	#ptapp .hour .remember {
		color: #333333;
	}

	#ptapp .sight {
		background: #ffffff;
		border-color: #bbbbbb;
	color: inherit;
}

	#ptapp a {
		color: #000000;
	}
}

#ptapp #secFooter {
	color: var(--faded);
	font-size: .84em;
	border-top: 1px solid var(--line);
	padding-top: 0.875rem;
}

#ptapp #secFooter p {
	margin-bottom: 0.375rem;
}

@media (max-width: 40em) {
	#ptapp .live {
		margin-left: 0;
		text-align: left;
	}

	#ptapp .navdate {
		min-width: 0;
		flex: 1;
	}

	#ptapp .cell {
		min-height: 4rem;
		font-size: .7em;
	}
}

/* narrow screens: restack the 7-column month calendar into a readable single-column list.
   Breakpoint is 40em to match the block near the end of this sheet that hides .dfull and the
   teaching headers at 40em - both must flip at the SAME width, or the 34-40em window shows
   cells with NO date at all (the audit's "date dead zone"). */
@media (max-width: 40em) {
	#ptapp .mgrid {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	#ptapp .mgrid .dow,
	#ptapp .mgrid .cell.blank {
		display: none;
	}

	#ptapp .cell {
		min-height: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.3rem 0.6rem;
		padding: 0.5rem 0.75rem;
	}

	/* encouragement (word + verse) keeps its own full line at the top, same as the grid view */
	#ptapp .cell .cheer {
		flex: 1 0 100%;
	}

	#ptapp .cell .d {
		flex: 0 0 auto;
		min-width: 6.5rem;
		font-size: .95em;
	}

	#ptapp .cell .cwd {
		display: inline;
		color: var(--faded);
		font-weight: 600;
	}

	#ptapp .cell .e {
		margin-left: auto;
		font-size: 1em;
	}

	#ptapp .cell .w {
		flex: 0 0 auto;
		font-size: .85em;
	}

	/* Julian Day Number on its own full line so it is not clipped in the list layout */
	#ptapp .cell .jdn {
		flex: 1 0 100%;
	}

	/* Julian-calendar equivalent gets its own full line in the list layout */
	#ptapp .cell .djulcell {
		flex: 1 0 100%;
	}

	#ptapp .cell .mark {
		position: static;
		margin-left: 0.375rem;
		font-size: 1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ptapp, #ptapp * {
		transition: none !important;
		animation: none !important;
	}
}

/* CSP-safe utility classes (no inline style attributes anywhere) */
#ptapp .fullrow {
	grid-column: 1/-1;
}

#ptapp .mb16 {
	margin-bottom: 1rem;
}

#ptapp .mt6 {
	margin-top: 0.375rem;
}

#ptapp .mt8 {
	margin-top: 0.5rem;
}

#ptapp .mt10 {
	margin-top: 0.625rem;
}

#ptapp .m0 {
	margin: 0;
}

#ptapp .pv4 {
	padding: 0.25rem 0;
}

#ptapp .pad30v {
	padding: 1.875rem 0;
}

#ptapp .muted {
	color: var(--faded);
}

#ptapp .strong {
	color: var(--text);
}

#ptapp .goldb {
	color: var(--gold-deep);
}

#ptapp .helptext {
	margin-top: 0.625rem;
	font-size: .9em;
	color: var(--faded);
	line-height: 1.6;
}

#ptapp .chartsvg, #ptapp .stripsvg {
	width: 100%;
	height: auto;
	display: block;
}

/* WCAG 1.4.1 Use of Color - the crescent visibility map's five verdicts used to differ by
   FILL COLOUR ALONE, both on the map and in this legend, and three of the four adjacent pairs
   were also near-identical in lightness (not-visible against possible-but-uncertain was
   1.10:1), so they did not separate in greyscale either.
   THE SECOND CHANNEL IS NOW LIGHTNESS, not a pattern. Colour vision deficiency costs hue
   discrimination and leaves lightness discrimination intact, so the five fills are spaced
   apart in relative luminance and ordered so that lightness itself carries the meaning:
   DARKER = MORE OF THE CRESCENT IS VISIBLE. Full arithmetic (30 composited map states, three
   deficiency simulations) lives on the palette comment in prayer-times-heavens.js; the figures
   for the flat swatches below, which is what the legend actually paints, are:

       order  swatch   state                        fill      Y        L*
         1    .sw-z2   easily visible               #224327   0.0450   25.26
         2    .sw-z1   visible in good conditions   #866313   0.1404   44.29
         3    .sw-zu   possible but uncertain       #B3922B   0.3032   61.93
         4    .sw-z3   not visible                  #BBC4D5   0.5485   78.95
         5    .sw-zp   no local sunset (polar)      #F1F4F8   0.9018   96.07

   adjacent contrast  2.0039:1, 1.8549:1, 1.6947:1, 1.5903:1 - minimum 1.5903:1 (dL* 17.03)
   protanopia         min adjacent 1.5727:1     deuteranopia  min adjacent 1.6013:1
   tritanopia         min adjacent 1.5860:1     ordering preserved in all three

   These are the same five hex values the canvas paints, so the legend cannot disagree with the
   map. index.php lists entries 1-4 in that order already and fn_ensure_map_legend_pattern_entries() appends
   entry 5, so the legend reads top-to-bottom in the map's own lightness order.

   THE PATTERNS ARE GONE ON PURPOSE. The swatches used to carry repeating-gradient hatches
   matching a set of canvas glyphs. The canvas glyphs were removed - they could not survive
   rasterisation at the default map scale, and a glyph painted inside the map's rotation
   contradicted a legend that does not rotate - so a hatch here would now describe something
   the map does not draw. Flat fills also let the swatch state its own luminance exactly, which
   is the whole channel.

   EVERY SWATCH CARRIES A BORDER. .sw-zp at Y 0.9018 and .sw-z3 at Y 0.5485 are lighter than
   the light-theme page fill, so without an edge they would bleed into it; --ctlline is the
   theme-aware control-border token and is >=3:1 against the page in both themes, so the
   swatch's own extent is always locatable. It is applied to all five so no swatch is a
   different SIZE from its neighbours (a border adds to the box), which would be its own
   accidental second channel. */
#ptapp .sw-z1 {
	/* visible in good conditions - second darkest */
	background: #866313;
	border: 1px solid var(--ctlline);
	color: var(--text);
}

#ptapp .sw-z2 {
	/* easily visible - the darkest of the five */
	background: #224327;
	border: 1px solid var(--ctlline);
	color: var(--text);
}

#ptapp .sw-z3 {
	/* not visible - second lightest */
	background: #BBC4D5;
	border: 1px solid var(--ctlline);
	color: var(--text);
}

#ptapp .sw-zu {
	/* possible but uncertain - the middle of the five */
	background: #B3922B;
	border: 1px solid var(--ctlline);
	color: var(--text);
}

/* the polar "no local sunset" state the map paints but the legend markup never listed at all;
   the matching legend entry is appended by fn_ensure_map_legend_pattern_entries() in prayer-times-heavens.js */
#ptapp .sw-zp {
	/* no local sunset - the lightest of the five, off the end of the verdict scale */
	background: #F1F4F8;
	border: 1px solid var(--ctlline);
	color: var(--text);
}

#ptapp .sw-sight {
	background: #FBF3DC;
	border: 1px solid #C9A93E;
	color: var(--text);
}

#ptapp .sw-today {
	border: 1.5px solid var(--gold);
}

#ptapp .needle {
	left: 50%;
}

/* place search */
#ptapp .placeinput {
	flex: 1;
	min-width: 13.125rem;
	background: #FFFFFF;
	border: 1px solid var(--ctlline);
	border-radius: 6px;
	color: var(--text);
	padding: 0.375rem 0.625rem;
	font: inherit;
}

#ptapp .placeinput:focus {
	border-color: var(--gold);
}

#ptapp .placeresults {
	flex-direction: column;
	align-items: stretch;
	gap: 0.375rem;
}

#ptapp .placeresults .btn {
	text-align: left;
	font-variant-numeric: tabular-nums;
}

#ptapp .placeresults .phead {
	font-size: .78em;
	color: var(--faded);
}

/* free-typing date field */
#ptapp #dateMsg {
	color: var(--blood);
}

/* auto-hide the mouse cursor after idle (re-appears on any movement) */
#ptapp.cursor-idle, #ptapp.cursor-idle * {
	cursor: none !important;
}

/* time-zone toggle + era buttons + M/D/Y fields */
#ptapp .archead {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* keep the Day/Night toggle button snug beside the section title */
#ptapp .arceyebrowrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-wrap: wrap;
}

#ptapp .tzswitch {
	display: flex;
	gap: 0.375rem;
}

#ptapp #tzNote {
	margin-bottom: 0.25rem;
}

#ptapp .erabtns {
	display: flex;
	gap: 0.25rem;
}

#ptapp .ymd {
	width: 3.625rem;
	background: #FFFFFF;
	border: 1px solid var(--ctlline);
	border-radius: 6px;
	color: var(--text);
	padding: 0.375rem 0.375rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

#ptapp .ymd.yr {
	width: 4.625rem;
}

#ptapp .ymd:focus {
	border-color: var(--gold);
}

#ptapp #dateMsg {
	color: var(--blood);
}

#ptapp #amYear {
	flex-basis: 100%;
	text-align: center;
}

/* a full-width, centered control row inside a .bar (the date step-through row and the
   date-entry row each sit on their own centered line) */
#ptapp .daterow {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
}

/* Biblical time-of-day picker (watches + hours), shown only in Biblical date mode */
#ptapp .bibtimesel {
	border: 1px solid var(--gold-deep);
	border-radius: 0.25rem;
	padding: 0.15rem 0.35rem;
}

/* Number-wheel popup shown while wheeling/dragging any <select> (two above, two below,
   current highlighted). Fixed-positioned near the select; the select itself is unchanged. */
#ptapp .ptsel-wheel {
	position: fixed;
	z-index: 1200;
	display: none;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid var(--gold-deep);
	border-radius: 0.35rem;
	box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.28);
	padding: 0.15rem;
	max-width: 20rem;
	pointer-events: auto;
}
#ptapp .ptsel-wheel.open {
	display: flex;
}
#ptapp .ptsel-wheel-num,
#ptapp .ptsel-wheel-blank {
	padding: 0.12rem 0.55rem;
	text-align: center;
	font-size: 0.85em;
	line-height: 1.35;
	color: var(--faded);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 0.2rem;
	cursor: pointer;
}
#ptapp .ptsel-wheel-blank {
	visibility: hidden;
}
#ptapp .ptsel-wheel-current {
	background: var(--gold-deep);
	color: #FFFFFF;
	font-weight: 700;
}

/* placeholder options revealed when Biblical / Julian date mode is selected */
#ptapp .datemodeopts {
	flex-basis: 100%;
	margin-top: 0.25rem;
}

/* footnote at the bottom of the Set Date bar - slightly smaller than body text */
#ptapp .datenote {
	flex-basis: 100%;
	color: var(--faded);
	font-size: .82em;
	line-height: 1.5;
	margin-top: 0.375rem;
	padding-top: 0.375rem;
	border-top: 1px dotted #E4DECB;
}

/* tool sections (visibility driven by the right-side panel's tool selection) */
#ptapp .toolsec.tool-hidden {
	display: none;
}

#ptapp .orbsvg {
	width: 100%;
	max-width: 40rem;
	height: auto;
	display: block;
	margin: 0 auto;
}

#ptapp .phrow {
	display: grid;
	grid-template-columns: 7.5rem 1fr 8.125rem;
	gap: 0.5rem;
	padding: 0.3125rem 0.25rem;
	border-bottom: 1px dotted #E4DECB;
	font-variant-numeric: tabular-nums;
	font-size: .9em;
}

#ptapp .phrow.head {
	color: var(--green);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

#ptapp .omergrid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(min(9.375rem, 100%),1fr));
	gap: 0.375rem;
	margin-top: 0.625rem;
}

#ptapp .omercell {
	background: #FFFDF7;
	border: 1px solid #E4DECB;
	border-radius: 8px;
	padding: 0.375rem 0.5rem;
	font-size: .8em;
	color: var(--text);
}

#ptapp .omercell b {
	color: var(--gold-deep);
}

#ptapp .omercell.shav {
	background: #FBF3DC;
	border-color: #C9A93E;
	color: var(--text);
}

#ptapp .omercell.sab {
	border-left: 3px solid var(--green);
}

#ptapp .cycbar {
	display: flex;
	align-items: stretch;
	gap: 0.1875rem;
	margin: 0.375rem 0 0.625rem;
	flex-wrap: wrap;
}

#ptapp .cycseg {
	min-width: 2rem;
	padding: 0.125rem 0.5rem;
	box-sizing: border-box;
	border-radius: 4px;
	background: #EFEAD9;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	font-size: 1em;
	text-align: center;
	line-height: 1.4;
	color: var(--faded);
	cursor: pointer;
	flex: 0 0 auto;
}

#ptapp .cycseg.cur {
	background: var(--gold-bright);
	border-color: #9A7522;
	color: #2A2007;
	font-weight: 700;
}

#ptapp .cycseg.sab {
	background: #DDEBD9;
	border-color: #4E7A58; /* r126 contrast wave: #9DBE93 measured 2.05:1 (WCAG 1.4.11); 3.99:1 vs the fill, 4.94:1 vs white */
	color: var(--text);
}

/* 50-year Yovel navigator: prev/next cycle arrows flanking the 1-50 year buttons */
#ptapp .cycnav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0.375rem 0 0.625rem;
}

#ptapp .cycnav .cycbar {
	margin: 0;
	flex: 1 1 100%;
}

#ptapp .cycseg.jub {
	box-shadow: 0 0 0 2px var(--gold-deep) inset;
	font-weight: 700;
}

/* Cycles navigators (DESIGN D): inline label + rolling-window arrows for the seven-year
   week and the 1-50 Yovel count. Reuses the flex-wrap .cycnav so narrow layouts wrap. */
#ptapp .cyclabel {
	font-size: .8em;
	color: var(--faded);
	margin-right: 0.25rem;
	flex: 0 0 auto;
}

#ptapp .cycarrow {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	background: #EFEAD9;
	color: #2A2007;
	border-radius: 4px;
	min-width: 2rem;
	padding: 0.125rem 0.5rem;
	box-sizing: border-box;
	line-height: 1.4;
	font-size: 1em;
	text-align: center;
	cursor: pointer;
	flex: 0 0 auto;
}

#ptapp .cycarrow:hover {
	background: var(--gold-bright);
	border-color: #9A7522;
	color: var(--text);
}

#ptapp .cycarrow:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}


@media (max-width: 40em) {
	#ptapp .phrow {
		grid-template-columns: 5.625rem 1fr 6.25rem;
		font-size: .78em;
	}
}

#ptapp .bigmoon {
	float: right;
	margin: 0 0 0.375rem 0.625rem;
}

#ptapp .chkwrap {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	cursor: pointer;
}

#ptapp .chkwrap input {
	accent-color: var(--gold);
	width: 0.9375rem;
	height: 0.9375rem;
	cursor: pointer;
}

/* visibility-threshold explainer above the month grid */
#ptapp .threshinfo {
	background: #FAF7EE;
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold);
	border-radius: 9px;
	padding: 0.5625rem 0.8125rem;
	margin-bottom: 0.625rem;
	font-size: .88em;
	color: var(--faded);
	line-height: 1.55;
}

#ptapp .threshinfo b {
	color: var(--text);
}

#ptapp .threshinfo .th1 {
	color: var(--gold-deep);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

#ptapp .threshinfo .th2 {
	color: var(--gold-deep); /* r126 contrast wave: the literal never followed the dark theme - 3.15:1 there (SC 1.4.3) */
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

#ptapp .threshinfo .th3 {
	color: var(--faded);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* REMEMBER banner in the prayer-hours card */
#ptapp .remembanner {
	text-align: center;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--blood);
	background: #FBEFEA;
	border: 1px solid #D8A79E;
	border-radius: 9px;
	padding: 0.5rem 0.625rem;
	margin-bottom: 0.625rem;
	font-size: .95em;
}

/* side arrows on the month view */
#ptapp .monthnavwrap {
	position: relative;
}

#ptapp .sidearrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 2.125rem;
	height: 3.5rem;
	border-radius: 10px;
	border: 1px solid #9A7522;
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	color: #2A2007;
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1;
	opacity: .85;
	cursor: pointer;
}

#ptapp .sidearrow:hover {
	opacity: 1;
}

#ptapp .sidearrow.left {
	left: -0.125rem;
}

#ptapp .sidearrow.right {
	right: -0.125rem;
}

@media (max-width: 47.5em) {
	#ptapp .sidearrow {
		width: 1.625rem;
		height: 2.75rem;
		font-size: 1.2em;
	}
}

/* year slider */
#ptapp .ysdate {
	text-align: center;
	font-size: 1.18em;
	font-weight: 700;
	color: var(--green);
	margin-bottom: 0.375rem;
	font-variant-numeric: tabular-nums;
}

#ptapp .ysdate small {
	color: var(--faded);
	font-weight: 500;
}

#ptapp .yssvg {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #FFFDF7;
	color: var(--text);
}

#ptapp #yearSlider {
	width: 100%;
	margin-top: 0.375rem;
	accent-color: var(--gold);
}

#ptapp .yslegend {
	margin-top: 0.375rem;
	text-align: center;
}

/* the app's ivory panel runs edge to edge of the site content area */
#ptapp {
	max-width: none;
	margin: 0;
	border-radius: 0;
}

/* FINAL RULE - wins over the universal reset above: breathing room inside the app panel.
   Background stays edge-to-edge; this padding is inside it (matches the site's ~1em gutters). */
#ptapp {
	padding-top: 1.125rem;
	padding-bottom: 2.25rem;
}

@media (max-width: 40em) {
	#ptapp {
		padding-top: 0.75rem;
		padding-bottom: 1.75rem;
	}
}

/* legacy anchor jumps (share links, footer links) land clear of the top of the viewport */
#ptapp .toolsec {
	scroll-margin-top: 4rem;
}

/* WCAG 2.5.7: each watch band of the night arc is a single-press target that moves the marker
   to that point, so the night is reachable without a drag.
   NO touch-action HERE, deliberately. The four sectors are a filled semicircle of radius 118 in
   a 900x300 viewBox - roughly a quarter of the arc box, and the whole below-horizon half of the
   night visual. touch-action:none on that region stopped the browser panning the PAGE from any
   touch starting in it, so a reader trying to scroll past the night arc on a phone found the
   page stuck. It bought nothing: touch-action:none exists to keep the browser from claiming a
   sustained touch path, which is a DRAG's problem, and this is a tap. The sun and moon handles,
   which really are drags, keep their own touch-action:none below. */
#ptapp .nightwatch {
	cursor: pointer;
}

/* draggable sun on the arc */
#ptapp .sunhandle {
	cursor: grab;
	touch-action: none;
}

#ptapp .sunhandle:active {
	cursor: grabbing;
}

/* draggable moon on the arc (day + night) */
#ptapp .moonhandle {
	cursor: grab;
	touch-action: none;
}

#ptapp .moonhandle:active {
	cursor: grabbing;
}

/* the compass moon handle carries its own class and had NO rule at all, so it missed
   touch-action:none (a touch drag was claimed by the browser for page panning) and the
   grab cursors every sibling handle has. It deliberately does NOT get an outline:none. */
#ptapp .moondialhandle {
	cursor: grab;
	touch-action: none;
}

#ptapp .moondialhandle:active {
	cursor: grabbing;
}

/* WCAG 2.4.7 Focus Visible - the SVG drag handles.
   These handles previously cancelled the shared focus outline with `outline: none` and
   substituted `circle:nth-child(2) { stroke-width: 3.5 }`. Child 2 is the TRANSPARENT hit
   circle, which carries no stroke paint at all, so the substitute painted nothing and the
   handles had no visible focus indicator whatever; on the compass handles the selector
   matched no element at all. Both the outline suppression and the positional selector are
   gone. Each handle now emits a two-band focus ring (.hfocusring in the JS markup) that is
   revealed here. The bands are adjacent to EACH OTHER, so the indicator is perceivable over
   any backdrop the handles travel across - the white day arc, the near-black night sky, the
   ivory compass face: #2C2B22 against #FBF8F0 is 13.41:1. Measured against the real
   backdrops: the dark band is 14.23:1 on #FFFFFF, 13.41:1 on --bg and 12.40:1 on --surface2;
   the light band is 17.31:1 on the night sky #0B1230, 15.08:1 on #16203F, 13.83:1 on
   #1B2748 and 10.33:1 on the fourth-watch fill #4A3A1E. The shared #ptapp :focus-visible
   outline now also applies (browsers that paint `outline` on an SVG <g> draw it too). */
#ptapp .hfocusring {
	opacity: 0;
}

#ptapp .sunhandle:focus-visible .hfocusring,
#ptapp .moonhandle:focus-visible .hfocusring,
#ptapp .moondialhandle:focus-visible .hfocusring {
	opacity: 1;
}

/* A handle that is below the horizon is dimmed to opacity 0.35 by an SVG presentation
   attribute, and group opacity multiplies down into the ring - which would have left the
   focus indicator at roughly a third strength on exactly the handles a reader is most likely
   to be hunting for. CSS outranks a presentation attribute, so the whole handle returns to
   full strength while it holds keyboard focus, and the measured ratios above hold. */
#ptapp .sunhandle:focus-visible,
#ptapp .moonhandle:focus-visible,
#ptapp .moondialhandle:focus-visible {
	opacity: 1;
}

/* on-page diagnostics banner */
#ptapp .ptapperr {
	background: #FFF8E1;
	border: 1.5px solid #C9A93E;
	color: #5A4A12;
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.625rem;
	font-size: .82em;
	font-variant-numeric: tabular-nums;
	word-break: break-word;
	white-space: pre-wrap;
}

#ptapp .ptapperr.bad {
	background: #FBECEA;
	border-color: #B45248;
	color: #7E2A20;
	font-weight: 600;
}

#ptapp .t1 {
	color: var(--gold-deep);
}

#ptapp .t2 {
	color: #8A6A1D;
}

#ptapp .t3 {
	color: var(--faded);
}

#ptapp .eclmark {
	margin-left: 0.125rem;
}

#ptapp .omercell.omertoday {
	border: 2px solid var(--gold);
	background: #FFFBEE;
	color: var(--text);
}

#ptapp .tool-btn.inview {
	box-shadow: inset 0 -3px 0 var(--gold);
}

/* The Tools entry point. It used to be `position: fixed` at the bottom-right, revealed past
   600px of scroll, which broke two things at once. It is a permanently visible fixed bar,
   which this project forbids outright because it costs screen space at high display scaling.
   And as an opaque overlay at z-index 60 with pointer-events:auto it covered small focused
   controls in that corner outright (WCAG 2.4.11 Focus Not Obscured) and swallowed mouse
   clicks on them. It is now an ordinary in-flow button at the end of the page that scrolls
   away with everything else; the honest fix was to stop it floating, not to offset it.
   Nothing is lost: the panel is also opened by the units gear on every section header, by the
   gears in the tool bars, and by the site footer's #rightSidePanel link.
   The old opacity gating went with it. `opacity: .92` composited the keyboard focus ring
   along with the button and dragged it from 2.98:1 down to 2.70:1, and below 600px of scroll
   the button was opacity 0 and pointer-events none while STILL in the tab order, so a
   keyboard user could land on a control that was completely invisible. */
#ptapp .topbtn {
	display: block;
	margin: 1rem auto 0;
	border: 1px solid #9A7522;
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	color: #2A2007;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.625rem 1rem;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,.14);
}

/* focus carries the same emphasis hover does (standing page rule); the ring itself is the
   shared --focusring at 5.05:1 on --surface and 4.76:1 on --bg in the light theme */
#ptapp .topbtn:hover,
#ptapp .topbtn:focus-visible {
	background: linear-gradient(180deg,#F0C654,var(--gold-bright));
}

@media print {
	#ptapp .topbtn, #ptapp .tzswitch, #ptapp .erabtns, #ptapp #yearSlider, #ptapp .sidearrow, #ptapp .placeresults, #ptapp .btn, #ptapp .sunhandle, #ptapp .moonhandle, #ptapp .exportloc, #ptapp #exportHelp {
		display: none !important;
	}

	#ptapp .month, #ptapp .card, #ptapp .arcbox {
		break-inside: avoid;
		box-shadow: none;
	}
}

/* standing "Location Selected" summary shown in the place-search bar whenever a search is not in progress */
#ptapp .locsummary {
	font-size: .84em;
	color: var(--text);
	line-height: 1.6;
}

#ptapp .locsummary .lshead {
	display: inline-block;
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--green);
	margin-right: 0.5rem;
}

#ptapp .locsummary b {
	color: var(--gold-deep);
	font-weight: 600;
}

/* ---------- Eclipses (NASA) panel ---------- */
#ptapp .eclnav {
	display: flex;
	align-items: stretch;
	gap: 0.375rem;
	flex-wrap: nowrap;
	margin-bottom: 0.5rem;
}

#ptapp .eclnav .eclyrs {
	display: flex;
	gap: 0.375rem;
	flex: 1;
	min-width: 0;
	justify-content: center;
}

#ptapp .eclarrow {
	background: var(--surface2);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	color: var(--text);
	border-radius: 7px;
	padding: 0.25rem 0.5rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .15s,border-color .15s;
}

#ptapp .eclarrow:hover {
	background: #ECE5D2;
	border-color: var(--gold);
	color: var(--text);
}

#ptapp .eclyr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.0625rem;
	flex: 1 1 0;
	min-width: 2.75rem;
	background: var(--surface);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 8px;
	padding: 0.25rem 0.125rem;
	color: var(--text);
	cursor: pointer;
	transition: background .15s,border-color .15s,box-shadow .15s;
}

#ptapp .eclyr:hover {
	border-color: var(--gold);
	background: #FBF6E9;
	color: var(--text);
}

#ptapp .eclyr.sel {
	border-color: var(--blood);
	background: #F6E3E0;
	box-shadow: 0 0 0 1px var(--blood) inset;
	color: var(--text);
}

#ptapp .eclyr .eclyy {
	font-weight: 700;
	font-size: .95em;
	font-variant-numeric: tabular-nums;
}

#ptapp .eclyr .eclbc {
	font-size: .62em;
	letter-spacing: .1em;
	color: var(--faded);
	text-transform: uppercase;
	min-height: .7em;
}

#ptapp .eclyr .eclcnt {
	font-size: .66em;
	color: var(--gold-deep);
	font-weight: 700;
}

#ptapp .eclyr.sel .eclcnt {
	color: var(--blood);
}

#ptapp .eclyr .eclyov {
	font-size: .58em;
	color: var(--faded);
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

#ptapp .eclyr.sel .eclyov {
	color: var(--blood);
}

#ptapp .eclnavhint {
	display: none;
}

#ptapp .eclintro {
	margin-bottom: 0.5rem;
}

#ptapp .eclfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0.25rem 0 0.5rem;
}

#ptapp .eclchip {
	background: var(--surface2);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	color: var(--text);
	border-radius: 999px;
	padding: 0.1875rem 0.6875rem;
	font-size: .82em;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s,border-color .15s;
}

#ptapp .eclchip:hover {
	border-color: var(--gold);
}

#ptapp .eclchip.on {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
}

#ptapp .ecllist {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(min(17rem,100%),1fr));
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

#ptapp .ecle {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-left-width: 4px;
	border-radius: 9px;
	padding: 0.5rem 0.625rem;
	color: var(--text);
}

#ptapp .ecle.e-total { border-left-color: #8E2C22; }
#ptapp .ecle.e-partial { border-left-color: var(--gold); }
#ptapp .ecle.e-pen { border-left-color: var(--moon); }

#ptapp .ecle .eclegfx {
	flex: 0 0 auto;
	line-height: 0;
}

#ptapp .ecle .eclemeta {
	min-width: 0;
}

#ptapp .ecletype {
	font-size: .95em;
}

#ptapp .ecletime {
	font-size: .84em;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

#ptapp .eclenums {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	margin-top: 0.25rem;
}

#ptapp .eclpill {
	font-size: .72em;
	font-weight: 600;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 0.0625rem 0.375rem;
	color: var(--faded);
	font-variant-numeric: tabular-nums;
}

#ptapp .syzygy {
	position: relative;
	border-bottom: 1px dotted var(--gold-deep);
	cursor: help;
	color: var(--gold-deep);
	font-style: italic;
}

#ptapp .syztip {
	position: absolute;
	left: 0;
	bottom: 125%;
	z-index: 20;
	width: 15rem;
	max-width: 78vw;
	background: var(--text);
	color: #FBF8F0;
	border-radius: 7px;
	padding: 0.5rem 0.625rem;
	font-size: .82em;
	font-style: normal;
	line-height: 1.4;
	box-shadow: 0 4px 14px rgba(0,0,0,0.22);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s;
	pointer-events: none;
}

#ptapp .syzygy:hover .syztip,
#ptapp .syzygy:focus .syztip,
#ptapp .syzygy:focus-within .syztip {
	opacity: 1;
	visibility: visible;
}

/* WCAG 1.4.13 Content on Hover or Focus - DISMISSIBLE. #syzTip used to be revealed by CSS
   alone, with nothing in the app able to hide it, so while it showed, Escape was a dead key:
   the Tools panel's Escape guard correctly saw a tooltip on screen and stood aside for a
   handler that did not exist, and the panel could not be closed from the keyboard at all.
   fn_install_syzygy_tip_escape_dismissal() in prayer-times-heavens.js now puts .syz-off on the host when Escape is
   pressed while the tip shows, and takes it off again when the pointer or focus leaves the
   host, so the tip behaves like every other tip in the app. Same specificity as the three
   reveal rules above (one id, three classes), so source order is what makes it win - it must
   stay AFTER them. */
#ptapp .syzygy.syz-off .syztip {
	opacity: 0;
	visibility: hidden;
}

#ptapp .ecllinks {
	border-top: 1px solid var(--line);
	padding-top: 0.5rem;
}

/* Narrow phones: collapse the year-button navigator, keep detail + filter usable */
@media (max-width: 40em) {
	#ptapp .eclnav {
		display: none;
	}
	#ptapp .eclnavhint {
		display: block;
		margin-bottom: 0.5rem;
	}
}

/* ---------- history tool ---------- */

#ptapp .histbadge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.78em;
	margin-left: 0.375rem;
}

#ptapp .histbadge.hb-fixed,
#ptapp .histbadge.hb-high {
	color: var(--green);
}

#ptapp .histbadge.hb-medium {
	color: var(--gold-deep);
}

#ptapp .histbadge.hb-low,
#ptapp .histbadge.hb-gap {
	color: var(--faded);
}

#ptapp .histentry {
	border-top: 1px solid var(--line);
	padding-top: 0.375rem;
}

/* ---------- text-alignment guard (wylh.css p justify leak) ---------- */

#ptapp .helptext p,
#ptapp #secFooter p {
	text-align: left;
}

/* ---------- universe: core shared (ucbadge / ucgrid / uctoggle / ucsrc) ---------- */

#ptapp .ucbadge {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border: 1px solid rgba(160, 190, 230, 0.35);
	border-radius: 999px;
	font-size: 0.78em;
	line-height: 1.4;
	opacity: 0.85;
	vertical-align: middle;
	white-space: nowrap;
}

#ptapp .ucsrc {
	margin-top: 0.35rem;
	font-size: 0.78em;
	opacity: 0.9;
	color: inherit;
}

#ptapp .ucsrc a {
	color: inherit;
	text-decoration: underline;
}

#ptapp .ucgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.4rem 0.8rem;
	margin: 0.5rem 0;
}

#ptapp .uctoggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0.4rem 0;
}

#ptapp .uctoggle-label {
	margin-right: 0.25rem;
	font-size: 0.9em;
	opacity: 0.85;
}

#ptapp .uctoggle-btn {
	font: inherit;
	font-size: 0.85em;
	padding: 0.2rem 0.6rem;
	background: var(--surface2);
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 4px;
	cursor: pointer;
}

#ptapp .uctoggle-btn[aria-pressed="true"] {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
}

#ptapp .uctoggle-btn:hover {
	border-color: #9A7522;
}

#ptapp .uctoggle-btn:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .uctoggle-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- universe: universe ---------- */

#ptapp .uuv-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#ptapp .uuv-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

#ptapp .uuv-ctl {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 1em;
}

#ptapp .uuv-select {
	background: #FFFDF7;
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 4px;
	padding: 0.25rem 0.4rem;
	font-size: 1em;
	max-width: 14rem;
}

#ptapp .uuv-btn {
	background: var(--surface2);
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 7px;
	padding: 0.25rem 0.5625rem;
	font-size: .85em;
	cursor: pointer;
	font-weight: 500;
}

#ptapp .uuv-btn:hover {
	background: #ECE5D2;
	color: var(--text);
	border-color: var(--gold);
}

#ptapp .uuv-btn[aria-pressed="true"] {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
	box-shadow: none;
	font-weight: 700;
}

#ptapp .uuv-btn:focus-visible,
#ptapp .uuv-select:focus-visible,
#ptapp .uuv-slider:focus-visible,
#ptapp .uuv-canvas:focus-visible,
#ptapp .uuv-menu-item:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .uuv-benote {
	font-size: 1em;
}

#ptapp .uuv-canvaswrap {
	position: relative;
	width: 100%;
}

#ptapp .uuv-canvas {
	display: block;
	width: 100%;
	height: 24rem;
	background: #04070d;
	border: 1px solid #22304a;
	border-radius: 6px;
	touch-action: none;
	cursor: grab;
	color: #E8EEF8;
}

#ptapp .uuv-hud {
	position: absolute;
	top: 0.4rem;
	left: 0.5rem;
	pointer-events: none;
	color: #9fb2cc;
	font-size: 0.85em;
	background: rgba(4, 7, 13, 0.65);
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	max-width: 90%;
}

#ptapp .uuv-menu {
	position: absolute;
	display: flex;
	flex-direction: column;
	min-width: 11rem;
	background: #FFFDF7;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.2rem;
	z-index: 5;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	color: #E8EEF8;
}

#ptapp .uuv-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	color: var(--text);
	border: none;
	border-radius: 4px;
	padding: 0.3rem 0.5rem;
	font-size: 1em;
	cursor: pointer;
}

#ptapp .uuv-menu-item:hover {
	background: #FBF3DC;
	color: var(--text);
}

#ptapp .uuv-slider {
	flex: 1 1 10rem;
	min-width: 8rem;
}

#ptapp .uuv-date {
	font-size: 1em;
}

#ptapp .uuv-lower {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	align-items: flex-start;
}

#ptapp .uuv-facts {
	flex: 1 1 18rem;
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.6rem;
	color: var(--text);
}

#ptapp .uuv-ftitle {
	font-weight: bold;
	margin-bottom: 0.3rem;
}

#ptapp .uuv-fact {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.1rem 0;
	font-size: 1em;
}

#ptapp .uuv-flabel {
	color: var(--text);
	font-weight: 600;
}

#ptapp .uuv-fval {
	text-align: right;
}

#ptapp .uuv-notes {
	flex: 1 1 16rem;
	min-width: 0;
	font-size: 1em;
}

#ptapp .uuv-help {
	font-size: 1em;
}

#ptapp .uuv-help summary {
	cursor: pointer;
}

/* ---------- universe: sky ---------- */
#ptapp .uskynav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-bottom: 0.625rem;
}

#ptapp .uskybtn {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 8px;
	padding: 0.3rem 0.75rem;
	font-size: .9em;
	cursor: pointer;
}

#ptapp .uskybtn:hover {
	filter: brightness(1.06);
}

#ptapp .uskybtn:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .uskybtn[aria-pressed="true"] {
	border-color: var(--gold);
	color: var(--gold-deep);
	font-weight: 600;
}

#ptapp .uskypanel[hidden] {
	display: none;
}

#ptapp .uskytop {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

#ptapp .uskymain {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	align-items: flex-start;
}

#ptapp .uskycanvaswrap {
	flex: 1 1 20rem;
	min-width: 16rem;
}

#ptapp .uskycanvas {
	display: block;
	width: 100%;
	background: #0d1524;
	border: 1px solid var(--line);
	border-radius: 10px;
	touch-action: none;
	cursor: crosshair;
	color: #E8EEF8;
}

#ptapp .uskycanvas:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .uskyreadout {
	margin-top: 0.375rem;
}

#ptapp .uskystatus {
	margin-top: 0.25rem;
}

#ptapp .uskylayers {
	flex: 0 1 15rem;
	min-width: 12.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: .92em;
}

#ptapp .uskyhead {
	font-weight: 650;
	margin: 0.25rem 0;
}

#ptapp .uskychk {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	cursor: pointer;
}

#ptapp .uskychk input {
	margin: 0;
	flex: 0 0 auto;
}

#ptapp .uskyslider {
	margin: 0.125rem 0 0.25rem 1.375rem;
}

#ptapp .uskyrange {
	width: 100%;
	max-width: 14rem;
}

#ptapp .uskyorient {
	margin-top: 0.375rem;
}

/* circled-i info marker beside plain-language labels (Sky Browse, 2026-07-19).
   Keyboard-focusable; fn_install_page_tooltips shows its title on hover and on focus. */
#ptapp .uskyinfo {
	cursor: help;
	color: var(--gold-deep);
	font-size: 0.8em;
	line-height: 1;
	margin-left: 0.15rem;
	user-select: none;
}
#ptapp .uskyinfo:focus {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
	border-radius: 50%;
}

#ptapp .uskycard {
	margin-top: 0.625rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0.75rem 0.875rem;
	max-width: 40rem;
	color: var(--text);
}

#ptapp .uskyclose {
	float: right;
	margin-left: 0.5rem;
}

#ptapp .uskytitle {
	font-weight: 650;
	font-size: 1.05em;
	margin-bottom: 0.375rem;
}

#ptapp .uskygrid {
	display: grid;
	grid-template-columns: minmax(7rem, 11rem) 1fr;
	gap: 0.2rem 0.75rem;
}

#ptapp .uskyattrib {
	margin-top: 0.5rem;
}

#ptapp .uskyhelp {
	margin-top: 0.25rem;
}

#ptapp .uskytext {
	margin: 0.375rem 0;
	max-width: 46rem;
}

#ptapp .uskyhipsnote {
	margin-top: 0.5rem;
	max-width: 46rem;
}

/* The sky-image download panel + its attribution live at full section width BELOW
   the chart-plus-Layers row; the catalogs panel at full width ABOVE it (owner rule
   2026-07-27: load/download panels never inside a side column). */
#ptapp .uskygatehost:not(:empty) {
	margin-bottom: 0.375rem;
}

#ptapp .uskyimggatehost {
	margin-top: 0.375rem;
}

#ptapp .uskyimgattrib {
	margin-top: 0.375rem;
	max-width: 46rem;
}

@media (max-width: 34em) {

	#ptapp .uskygrid {
		grid-template-columns: 1fr;
	}

	#ptapp .uskylayers {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* ---------- universe: worlds ---------- */

#ptapp .ucw-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#ptapp .ucw-pick .uctoggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
}

#ptapp .ucw-panel {
	border-top: 1px solid #DDD6C3;
	padding-top: 0.6rem;
}

#ptapp .ucw-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: flex-start;
}

#ptapp .ucw-globecol {
	flex: 0 1 16rem;
	max-width: 100%;
}

#ptapp .ucw-infocol {
	flex: 1 1 18rem;
	min-width: 0;
}

#ptapp .ucw-canvas {
	width: 15rem;
	max-width: 100%;
	height: auto;
	background: #F4EFE2;
	border: 1px solid #DDD6C3;
	border-radius: 6px;
	color: var(--text);
}

#ptapp .ucw-grid {
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
	gap: 0.25rem 0.75rem;
	margin: 0.5rem 0;
	font-size: 0.95em;
}

#ptapp .ucw-k {
	color: var(--faded); /* r126 contrast wave: the literal never followed the dark theme - 3.04:1 there (SC 1.4.3) */
}

#ptapp .ucw-v {
	color: var(--text); /* r126 contrast wave: the literal never followed the dark theme - 1.16:1 there (SC 1.4.3) */
	overflow-wrap: anywhere;
}

#ptapp .ucw-note {
	background: #F4EFE2;
	border: 1px solid #DDD6C3;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-size: 0.95em;
	margin: 0.25rem 0 0.5rem;
	color: var(--text);
}

#ptapp .ucw-subhead {
	font-weight: 600;
	color: #8A6A1D;
	margin: 0.75rem 0 0.25rem;
	font-size: 0.95em;
}

#ptapp .ucw-conv {
	margin-top: 0.35rem;
}

#ptapp .ucw-bars {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	max-width: 26rem;
	margin: 0.25rem 0 0.5rem;
}

#ptapp .ucw-barlabel {
	display: block;
	font-size: 0.85em;
	color: #2C2B22;
}

#ptapp .ucw-barfill {
	display: block;
	height: 0.45rem;
	background: #B58A2A;
	border-radius: 3px;
	min-width: 2px;
	color: var(--text);
}

#ptapp .ucw-slider-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0.5rem 0;
}

#ptapp .ucw-slider {
	flex: 1 1 12rem;
	min-width: 8rem;
	accent-color: #B58A2A;
}

#ptapp .ucw-slider:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .ucw-sliderout {
	min-width: 4.5rem;
	font-variant-numeric: tabular-nums;
	color: #2C2B22;
}

#ptapp .ucw-readout {
	margin: 0.25rem 0;
}

@media (max-width: 34em) {
	#ptapp .ucw-grid {
		grid-template-columns: 1fr;
		gap: 0.1rem 0;
	}

	#ptapp .ucw-k {
		margin-top: 0.4rem;
	}
}

/* ---------- universe: earth ---------- */

#ptapp .ucearth {
	margin-top: 0.5rem;
}

#ptapp .ucearth-panel {
	margin-top: 0.75rem;
}

#ptapp .ucearth-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0;
}

/* WCAG 1.4.11: --line is the DECORATIVE hairline (line 5). An interactive control's boundary
   must clear 3:1, which is what --ctlline exists for: 3.43:1 against this button's own
   --surface2 fill and 3.94:1 against the white card behind it in the light theme, 3.14:1 and
   3.51:1 in the dark theme. With --line these measured 1.45:1 and 1.26:1 - no perceivable
   edge at all, on buttons that start multi-megabyte downloads. */
#ptapp .ucearth-layerbtn {
	font-size: 0.85em;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--ctlline);
	border-radius: 4px;
	background: var(--surface2);
	color: var(--text);
	cursor: pointer;
}

#ptapp .ucearth-layerbtn[aria-pressed="true"] {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
}

/* these buttons had no hover affordance at all; this matches the focus emphasis */
#ptapp .ucearth-layerbtn:hover {
	border-color: var(--gold-deep);
}

/* the hardcoded #7fd0ff focus ring that used to sit here measured 1.70:1 against the white
   card and 1.48:1 against the button fill in the light theme - it was invisible in the
   DEFAULT theme. Deleting the rule lets the page-wide --focusring ring apply instead
   (5.05:1 light, 6.50:1 dark), sized in rem like the rest of the app. */

#ptapp .ucearth-layerbtn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

#ptapp .ucearth-canvaswrap {
	margin: 0.5rem 0;
	max-width: 46rem;
}

#ptapp .ucearth-canvas {
	display: block;
	width: 100%;
	border: 1px solid #33465a;
	border-radius: 4px;
	cursor: crosshair;
	touch-action: none;
}

/* same #7fd0ff defect as the layer buttons, same fix: the page-wide --focusring ring applies */

#ptapp .ucearth-range {
	flex: 1 1 10rem;
	min-width: 8rem;
	max-width: 22rem;
}

#ptapp .ucearth-num {
	width: 6rem;
	font-size: 0.9em;
	padding: 0.2rem 0.35rem;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 4px;
	background: var(--surface2);
	color: var(--text);
}

#ptapp .ucearth-legend {
	margin: 0.4rem 0;
	line-height: 1.7;
}

#ptapp .ucearth-chip {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	border-radius: 2px;
	border: 1px solid #566a7a;
	vertical-align: baseline;
	margin-right: 0.25rem;
}

#ptapp .ucearth-detail {
	margin-top: 0.75rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface);
	color: var(--text);
}

#ptapp .ucearth-dettitle {
	font-size: 0.95em;
	font-weight: bold;
	margin-bottom: 0.4rem;
}

#ptapp .ucearth-grid {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 2fr);
	gap: 0;
	margin: 0.5rem 0;
	max-width: 42rem;
	border: 1px solid #33465a;
	border-radius: 4px;
	overflow: hidden;
	font-size: 0.85em;
}

#ptapp .ucearth-cell {
	padding: 0.25rem 0.5rem;
	border-top: 1px solid var(--line);
}

#ptapp .ucearth-head {
	border-top: none;
	background: var(--surface2);
	font-weight: bold;
	color: var(--text);
}

#ptapp .ucearth-divewrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0.5rem 0;
}

#ptapp .ucearth-divecanvas {
	border: 1px solid #33465a;
	border-radius: 4px;
	flex: 0 0 auto;
}

#ptapp .ucearth-divereadout {
	flex: 1 1 16rem;
	min-width: 14rem;
}

/* ---------- universe: smallbodies ---------- */

#ptapp .ucsb-nav {
	margin: 0.5rem 0 0.75rem 0;
}

#ptapp .ucsb-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: flex-end;
	margin: 0.5rem 0;
}

#ptapp .ucsb-field {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

#ptapp .ucsb-field label {
	font-size: 0.78em;
	color: var(--faded);
}

#ptapp .ucsb-field input {
	width: 6rem;
	padding: 0.25rem 0.4rem;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 0.9em;
}

#ptapp .ucsb-field input[type="search"] {
	width: 11rem;
}

#ptapp .ucsb-field input:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
}

#ptapp .ucsb-btn {
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 5px;
	background: var(--surface2);
	color: var(--text);
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
}

#ptapp .ucsb-btn:hover {
	background: #FBF3DC;
	color: var(--text);
}

#ptapp .ucsb-btn:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
}

#ptapp .ucsb-grid {
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	margin: 0.5rem 0;
	background: var(--surface);
	color: var(--text);
}

#ptapp .ucsb-gridhead,
#ptapp .ucsb-row {
	display: grid;
	grid-template-columns: minmax(8rem, 2.2fr) minmax(3rem, 0.9fr) minmax(2.6rem, 0.8fr) minmax(4rem, 1.1fr) minmax(3rem, 1fr) minmax(3rem, 1fr) minmax(3rem, 1fr) minmax(3rem, 1fr);
	gap: 0.3rem;
	align-items: center;
	padding: 0.25rem 0.5rem;
}

#ptapp .ucsb-gridhead {
	background: var(--surface2);
	border-bottom: 1px solid var(--line);
	padding: 0.15rem 0.5rem;
	color: var(--text);
}

#ptapp .ucsb-cadrowgrid {
	grid-template-columns: minmax(8.5rem, 1.6fr) minmax(5.5rem, 1.2fr) minmax(3.5rem, 0.9fr) minmax(5rem, 1.2fr) minmax(3.5rem, 0.9fr) minmax(2.5rem, 0.7fr);
}

#ptapp .ucsb-gridhead span {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--faded);
}

#ptapp .ucsb-sortbtn {
	border: 0;
	background: transparent;
	color: var(--faded);
	font: inherit;
	font-size: 0.78em;
	font-weight: 600;
	text-align: left;
	padding: 0.15rem 0;
	cursor: pointer;
}

#ptapp .ucsb-sortbtn[aria-pressed="true"] {
	color: var(--gold-deep);
}

#ptapp .ucsb-sortbtn:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
}

#ptapp .ucsb-row {
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #EFE9D8;
	color: var(--text);
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
}

#ptapp .ucsb-row:last-child {
	border-bottom: 0;
}

#ptapp .ucsb-row:hover {
	background: var(--surface2);
	color: var(--text);
}

#ptapp .ucsb-row:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: -0.125rem;
}

#ptapp .ucsb-row[aria-pressed="true"] {
	background: #FBF3DC;
	color: var(--text);
}

#ptapp .ucsb-close {
	background: #F6E3E0;
	color: var(--text);
}

#ptapp .ucsb-row.ucsb-close:hover {
	background: #F2D8D4;
	color: var(--text);
}

#ptapp .ucsb-swatch {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	border: 1px solid var(--line);
	border-radius: 3px;
	vertical-align: -0.15rem;
}

#ptapp .ucsb-detail {
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	padding: 0.6rem 0.75rem;
	margin: 0.75rem 0;
	color: var(--text);
}

#ptapp .ucsb-detail:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
}

#ptapp .ucsb-dethead {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

#ptapp .ucsb-h {
	font-size: 1.05em;
	font-weight: 700;
	color: var(--gold-deep);
}

#ptapp .ucsb-sech {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--text);
	margin: 0.9rem 0 0.25rem 0;
	padding-top: 0.4rem;
	border-top: 1px solid #EFE9D8;
}

#ptapp .ucsb-kv {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.15rem 0.75rem;
	font-size: 0.85em;
	margin: 0.3rem 0;
}

#ptapp .ucsb-kv > span:nth-child(odd) {
	color: var(--faded);
}

#ptapp .ucsb-ladderphrase {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--green);
	margin: 0.3rem 0;
}

#ptapp .ucsb-ladder {
	margin: 0.3rem 0 0.5rem 0;
}

#ptapp .ucsb-barrow {
	display: grid;
	grid-template-columns: minmax(9rem, 14rem) 1fr;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.8em;
	margin: 0.15rem 0;
}

#ptapp .ucsb-bartrack {
	display: block;
	background: var(--surface2);
	border-radius: 3px;
	height: 0.7rem;
	overflow: hidden;
	color: var(--text);
}

#ptapp .ucsb-bar {
	display: block;
	height: 100%;
	background: #C9A93E;
	border-radius: 3px;
	color: var(--text);
}

#ptapp .ucsb-barself {
	background: #9E3B30;
	color: #E8EEF8;
}

#ptapp .ucsb-canvasbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin: 0.4rem 0;
}

#ptapp .ucsb-canvas {
	display: block;
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #FFFDF7;
	color: var(--text);
}

#ptapp .ucsb-canvas:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
}

#ptapp .ucsb-torino {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.3rem 0.6rem;
	font-size: 0.85em;
	margin: 0.4rem 0;
}

#ptapp .ucsb-tnum {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 700;
}

#ptapp .ucsb-chip {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--line);
	border-radius: 3px;
}

#ptapp .ucsb-formula {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.85em;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 0.35rem 0.6rem;
	margin: 0.35rem 0;
	overflow-x: auto;
	color: var(--text);
}

#ptapp .ucsb-prose {
	font-size: 0.9em;
	margin: 0.4rem 0;
	max-width: 46rem;
}

@media (max-width: 34em) {

	#ptapp .ucsb-w {
		display: none;
	}

	#ptapp .ucsb-gridhead,
	#ptapp .ucsb-row {
		grid-template-columns: minmax(7rem, 2.2fr) minmax(2.6rem, 0.9fr) minmax(2.2rem, 0.8fr) minmax(3.4rem, 1.1fr);
	}

	#ptapp .ucsb-cadrowgrid {
		grid-template-columns: minmax(7rem, 1.6fr) minmax(4.5rem, 1.2fr) minmax(3rem, 0.9fr) minmax(3rem, 0.9fr);
	}

	#ptapp .ucsb-barrow {
		grid-template-columns: minmax(7rem, 9rem) 1fr;
	}
}

/* ---------- universe: stars ---------- */

#ptapp .ucst-panel {
	margin-top: 0.75rem;
}

#ptapp .ucst-h {
	margin: 1rem 0 0.4rem;
	font-size: 1.05em;
	color: var(--gold-deep);
}

#ptapp .ucst-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.5rem;
	margin: 0.4rem 0;
}

#ptapp .ucst-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.4rem 0.6rem;
	color: var(--text);
}

#ptapp .ucst-cardname {
	font-weight: 600;
}

#ptapp .ucst-dim {
	color: var(--faded);
	font-size: 0.85em;
}

#ptapp .ucst-sw {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	border-radius: 50%;
	border: 1px solid var(--line);
	vertical-align: -0.08em;
}

#ptapp .ucst-canvaswrap {
	margin: 0.5rem 0 0.25rem;
	overflow-x: auto;
}

#ptapp .ucst-canvas {
	display: block;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #0d1117;
	touch-action: none;
	color: #E8EEF8;
}

#ptapp .ucst-orbit {
	cursor: grab;
}

#ptapp .ucst-orbit:active {
	cursor: grabbing;
}

#ptapp .ucst-readout {
	min-height: 1.4em;
	color: var(--faded);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

#ptapp .ucst-ctrl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0.5rem 0;
}

#ptapp .ucst-ctrl label {
	color: var(--faded);
	font-size: 0.85em;
}

#ptapp .ucst-ctrl select,
#ptapp .ucst-ctrl input {
	font: inherit;
	font-size: 0.9em;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0.15rem 0.35rem;
	max-width: 100%;
}

#ptapp .ucst-num {
	width: 4.5rem;
}

#ptapp .ucst-search {
	flex: 1 1 10rem;
	min-width: 8rem;
}

#ptapp .ucst-range {
	flex: 1 1 12rem;
	min-width: 10rem;
	max-width: 24rem;
	accent-color: var(--gold);
}

#ptapp .ucst-out {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

#ptapp .ucst-btncard {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.35rem 0.6rem;
	color: var(--text);
}

#ptapp .ucst-btncard:hover {
	background: var(--surface2);
	border-color: var(--gold);
	color: var(--text);
}

#ptapp .ucst-more {
	margin: 0.6rem 0;
	padding: 0.3rem 0.9rem;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--text);
}

#ptapp .ucst-more:hover {
	border-color: var(--gold);
}

#ptapp .ucst-detail {
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	margin: 0.5rem 0;
	color: var(--text);
}

#ptapp .ucst-foot {
	margin-top: 1rem;
	padding-top: 0.4rem;
	border-top: 1px solid var(--line);
	color: var(--faded);
	font-size: 0.8em;
}

#ptapp .ucst-lcrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.5rem 0;
}

#ptapp .ucst-lcitem {
	flex: 1 1 15rem;
	max-width: 22rem;
}

#ptapp .ucst-lccv {
	display: block;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #ffffff;
	max-width: 100%;
	color: var(--text);
}

/* ---------- universe: exo ---------- */

#ptapp .uxo-count {
	font-size: 0.9em;
	opacity: 0.9;
}

#ptapp .uxo-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.5rem 0 0.7rem 0;
}

#ptapp .uxo-navbtn,
#ptapp .uxo-btn {
	font: inherit;
	font-size: 0.9em;
	color: var(--text);
	background: var(--surface2);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	cursor: pointer;
}

#ptapp .uxo-btn {
	border-radius: 5px;
}

#ptapp .uxo-navbtn[aria-pressed="true"] {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
}

#ptapp .uxo-navbtn:focus-visible,
#ptapp .uxo-btn:focus-visible,
#ptapp .uxo-th:focus-visible,
#ptapp .uxo-rowbtn:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .uxo-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

#ptapp .uxo-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: flex-end;
	margin: 0.3rem 0 0.5rem 0;
}

#ptapp .uxo-field {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.85em;
}

#ptapp .uxo-field input,
#ptapp .uxo-field select {
	font: inherit;
	color: inherit;
	background: rgba(128, 148, 178, 0.1);
	border: 1px solid rgba(128, 148, 178, 0.5);
	border-radius: 4px;
	padding: 0.15rem 0.35rem;
	max-width: 6.5rem;
}

#ptapp .uxo-field input.uxo-wide {
	width: 12rem;
	max-width: 12rem;
}

#ptapp .uxo-field select {
	max-width: 12rem;
}

#ptapp .uxo-range {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

#ptapp .uxo-gridwrap {
	overflow-x: auto;
	max-width: 100%;
	margin: 0.5rem 0;
}

#ptapp .uxo-grid {
	display: grid;
	grid-template-columns: minmax(9rem, 1.6fr) minmax(7.5rem, 1.3fr) minmax(7rem, 1.1fr) repeat(6, minmax(4.6rem, 0.9fr));
	min-width: 54rem;
	font-size: 0.85em;
}

#ptapp .uxo-grid.uxo-grid-sys {
	grid-template-columns: minmax(9rem, 1.6fr) repeat(5, minmax(4.6rem, 0.9fr)) minmax(7.5rem, 1.2fr);
	min-width: 42rem;
}

#ptapp .uxo-grid > div {
	padding: 0.22rem 0.4rem;
	border-bottom: 1px solid rgba(128, 148, 178, 0.22);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ptapp .uxo-th,
#ptapp .uxo-thplain {
	font: inherit;
	font-size: 1em;
	font-weight: 600;
	text-align: left;
	color: inherit;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(128, 148, 178, 0.6);
	padding: 0.25rem 0.4rem;
	white-space: nowrap;
}

#ptapp .uxo-th {
	cursor: pointer;
}

#ptapp .uxo-rowbtn {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	padding: 0;
	text-decoration: underline;
	cursor: pointer;
}

#ptapp .uxo-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0.4rem 0;
}

#ptapp .uxo-props {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.2rem 1.2rem;
	font-size: 0.9em;
	margin: 0.4rem 0;
}

#ptapp .uxo-k {
	opacity: 0.75;
}

#ptapp .uxo-canvaswrap {
	margin: 0.6rem 0 0.3rem 0;
}

#ptapp .uxo-canvaswrap canvas {
	display: block;
	max-width: 100%;
	border: 1px solid rgba(128, 148, 178, 0.35);
	border-radius: 6px;
	background: rgba(10, 14, 22, 0.25);
	color: inherit;
}

#ptapp .uxo-hz-in {
	color: #7fd4a0;
}

#ptapp .uxo-hz-opt {
	color: #d4c87f;
}

#ptapp .uxo-hz-out {
	opacity: 0.7;
}

#ptapp .uxo-methods {
	margin: 0.3rem 0 0.6rem 0;
	max-width: 34rem;
}

#ptapp .uxo-mrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85em;
	margin: 0.12rem 0;
}

#ptapp .uxo-mname {
	flex: 0 0 11rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ptapp .uxo-mbarwrap {
	flex: 1 1 6rem;
	min-width: 3rem;
}

#ptapp .uxo-bar {
	display: block;
	height: 0.55rem;
	background: rgba(110, 150, 210, 0.65);
	border-radius: 3px;
	color: var(--text);
}

#ptapp .uxo-mcount {
	flex: 0 0 auto;
}

#ptapp .uxo-skyblock {
	margin: 0.5rem 0 0.25rem 0;
}

@media (max-width: 34em) {
	#ptapp .uxo-mname {
		flex-basis: 7rem;
	}

	#ptapp .uxo-field input.uxo-wide {
		width: 100%;
		max-width: 100%;
	}
}

/* ---------- universe: cosmos ---------- */
#ptapp .uccos-wrap {
	max-width: 100%;
}

#ptapp .uccos-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: center;
	margin-bottom: 0.6rem;
}

#ptapp .uccos-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.45rem;
	margin-bottom: 0.6rem;
}

#ptapp .uccos-fact {
	padding: 0.45rem 0.55rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
}

#ptapp .uccos-math {
	font-family: Consolas, Menlo, monospace;
	font-size: 0.85em;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	margin: 0.5rem 0;
	padding: 0.45rem 0.6rem;
	border-left: 2px solid #5a78c8;
	background: var(--surface2);
	border-radius: 4px;
	color: var(--text);
}

#ptapp .uccos-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	align-items: center;
	margin: 0.5rem 0;
}

#ptapp .uccos-num {
	width: 5.5rem;
	font-size: 1em;
	padding: 0.15rem 0.3rem;
	background: var(--surface2);
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 4px;
}

#ptapp .uccos-canvas {
	display: block;
	width: 100%;
	max-width: 26rem;
	height: auto;
	margin: 0.5rem auto;
	border: 1px solid #263048;
	border-radius: 6px;
	background: #05060f;
	color: #E8EEF8;
}

#ptapp .uccos-canvas-sm {
	max-width: 16rem;
}

#ptapp .uccos-note {
	font-size: 0.85em;
	opacity: 0.9;
	margin: 0.35rem 0;
}

#ptapp .uccos-slider {
	display: block;
	width: 100%;
	max-width: 30rem;
	margin: 0.5rem 0;
}

#ptapp .uccos-readout {
	font-size: 1em;
	margin: 0.3rem 0;
}

#ptapp .uccos-landmarks {
	max-height: 16rem;
	overflow-y: auto;
	border: 1px solid #263048;
	border-radius: 6px;
	margin-top: 0.4rem;
}

#ptapp .uccos-lrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.8rem;
	align-items: baseline;
	padding: 0.25rem 0.5rem;
	border-bottom: 1px solid var(--line);
	font-size: 0.9em;
}

#ptapp .uccos-lrow.uccos-here {
	background: #FBF3DC;
	outline: 1px solid var(--gold-deep);
	color: var(--text);
}

#ptapp .uccos-ljump {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--gold-deep);
	font-size: 1em;
	text-align: left;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
}

#ptapp .uccos-ljump:hover {
	color: #6B5115;
}

/* retokenised with the other focus rings: the hardcoded #5a78c8 in px was the last non-token
   ring outside the chemistry tool, and a px ring does not grow with the page's text scaling */
#ptapp .uccos-ljump:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
	border-radius: 0.125rem;
}

#ptapp .uccos-lname {
	font-weight: bold;
}

#ptapp .uccos-lval {
	opacity: 0.95;
}

#ptapp .uccos-lsrc {
	font-size: 0.85em;
	opacity: 0.8;
}

#ptapp .uccos-look {
	max-height: none;
}

#ptapp .uccos-res {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.4rem;
	margin: 0.5rem 0;
}

#ptapp .uccos-card {
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
}

/* ---------- universe: physics ---------- */

#ptapp .ucphy-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	margin: 0 0 0.75rem 0;
}

#ptapp .ucphy-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0.75rem;
	margin: 0 0 0.75rem 0;
	color: var(--text);
}

#ptapp .ucphy-cardtitle {
	font-weight: 600;
	font-size: 1.05em;
	margin: 0 0 0.5rem 0;
}

#ptapp .ucphy-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: flex-end;
	margin: 0 0 0.5rem 0;
}

#ptapp .ucphy-field {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.85em;
	color: var(--faded);
	min-width: 7rem;
	flex: 0 1 auto;
}

#ptapp .ucphy-field input,
#ptapp .ucphy-field select {
	font: inherit;
	color: var(--text);
	background: #FFFFFF;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 6px;
	padding: 0.25rem 0.4rem;
	max-width: 10rem;
}

#ptapp .ucphy-field input:focus-visible,
#ptapp .ucphy-field select:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
}

#ptapp .ucphy-eq {
	font-family: ui-monospace, Consolas, "Courier New", monospace;
	font-size: 0.85em;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.4rem 0.55rem;
	margin: 0 0 0.5rem 0;
	overflow-x: auto;
	white-space: pre-wrap;
	color: var(--text);
}

#ptapp .ucphy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.25rem 1rem;
	margin: 0 0 0.5rem 0;
}

#ptapp .ucphy-kv {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	border-bottom: 1px dotted var(--line);
	padding: 0.15rem 0;
	font-size: 0.95em;
}

#ptapp .ucphy-k {
	color: var(--faded);
}

#ptapp .ucphy-v {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
}

#ptapp .ucphy-note {
	color: var(--faded);
	font-size: 0.85em;
	margin: 0.35rem 0;
}

#ptapp .ucphy-btn {
	font: inherit;
	font-size: 0.9em;
	color: var(--text);
	background: var(--surface2);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	cursor: pointer;
}

#ptapp .ucphy-btn:hover {
	background: #ECE5D2;
	color: var(--text);
}

#ptapp .ucphy-btn:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
}

#ptapp .ucphy-btn[aria-pressed="true"] {
	background: var(--gold);
	color: #FFFFFF;
	border-color: var(--gold-deep);
}

#ptapp .ucphy-canvas {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #10141B;
	margin: 0 0 0.5rem 0;
	color: #E8EEF8;
}

#ptapp .ucphy-canvas:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .ucphy-mission {
	margin: 0.15rem 0 0.35rem 0.5rem;
	font-size: 0.95em;
}

#ptapp .ucphy-range {
	flex: 1 1 10rem;
	max-width: 16rem;
}

/* ---------- universe: chem ---------- */

#ptapp .ucchem-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.5rem 0;
}

#ptapp .ucchem-tab {
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 0.9em;
	padding: 0.2rem 0.7rem;
	cursor: pointer;
}

#ptapp .ucchem-tab:hover {
	background: var(--surface2);
	color: var(--text);
}

/* retokenised: var(--moon) is a CONTENT colour (it names the moon), not the focus token, and a
   px ring stays fixed while the control grows with the page's text scaling */
#ptapp .ucchem-tab:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .ucchem-tab[aria-pressed="true"] {
	background: var(--surface2);
	border-color: var(--gold);
	box-shadow: inset 0 0 0 1px var(--gold);
	font-weight: 600;
	color: var(--text);
}

#ptapp .ucchem-sec {
	margin: 0.9rem 0;
}

#ptapp .ucchem-h {
	font-weight: 600;
	font-size: 1em;
	margin: 0 0 0.3rem;
}

#ptapp .ucchem-sub {
	font-weight: 400;
	font-size: 0.85em;
	color: var(--faded);
}

#ptapp .ucchem-note {
	color: var(--faded);
	font-size: 0.88em;
	margin-top: 0.35rem;
}

#ptapp .ucchem-ex {
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.4rem 0.6rem;
	margin: 0.4rem 0;
	font-size: 0.92em;
	color: var(--text);
}

#ptapp .ucchem-row {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) minmax(3rem, 1fr) minmax(5.5rem, auto);
	gap: 0.5rem;
	align-items: center;
	padding: 0.12rem 0;
}

#ptapp .ucchem-name {
	font-size: 0.92em;
}

#ptapp .ucchem-track {
	display: block;
	height: 0.55rem;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	color: var(--text);
}

#ptapp .ucchem-bar {
	display: block;
	height: 100%;
	background: var(--gold);
	color: var(--text);
}

#ptapp .ucchem-val {
	text-align: right;
	font-size: 0.92em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#ptapp .ucchem-tblwrap {
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

#ptapp .ucchem-ism {
	display: grid;
	grid-template-columns: minmax(8rem, 1.2fr) minmax(7rem, 1fr) minmax(6rem, 0.9fr) minmax(8rem, 1.2fr) minmax(8rem, 1.2fr);
	gap: 0.2rem 0.7rem;
	font-size: 0.9em;
	min-width: 38rem;
}

#ptapp .ucchem-sun {
	display: grid;
	grid-template-columns: minmax(4rem, auto) minmax(4rem, auto) minmax(8rem, 1fr);
	gap: 0.15rem 1rem;
	font-size: 0.92em;
	max-width: 24rem;
}

#ptapp .ucchem-sea {
	display: grid;
	grid-template-columns: minmax(9rem, 1fr) minmax(3.5rem, auto) minmax(9rem, 1fr) minmax(3.5rem, auto);
	gap: 0.15rem 0.8rem;
	font-size: 0.92em;
}

#ptapp .ucchem-fra {
	display: grid;
	grid-template-columns: minmax(3rem, auto) minmax(6.5rem, auto) minmax(10rem, 1fr) minmax(9rem, 1fr);
	gap: 0.15rem 0.8rem;
	font-size: 0.92em;
	min-width: 30rem;
}

#ptapp .ucchem-th {
	font-weight: 600;
	color: var(--faded);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

#ptapp .ucchem-leg {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0.3rem 0 0.5rem;
}

#ptapp .ucchem-leg span {
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0.05rem 0.45rem;
	font-size: 0.82em;
}

#ptapp .ucchem-ptwrap {
	overflow-x: auto;
	padding-bottom: 0.3rem;
}

#ptapp .ucchem-pt {
	display: grid;
	grid-template-columns: repeat(18, minmax(1.7rem, 1fr));
	gap: 0.15rem;
	min-width: 33rem;
	margin: 0.25rem 0;
}

#ptapp .ucchem-el {
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 0.78em;
	text-align: center;
	padding: 0.18rem 0;
	cursor: pointer;
}

#ptapp .ucchem-el:hover {
	border-color: var(--gold);
}

/* retokenised for the same reason as .ucchem-tab above */
#ptapp .ucchem-el:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .ucchem-el[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px var(--gold-deep);
	font-weight: 700;
}

#ptapp .ucchem-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7em;
	color: var(--faded);
}

#ptapp .ucchem-gap {
	height: 0.4rem;
}

#ptapp .ucchem-o-bb {
	background: #DCE7F5;
	color: var(--text);
}

#ptapp .ucchem-o-cr {
	background: #E7DCF2;
	color: var(--text);
}

#ptapp .ucchem-o-lm {
	background: #DEEDD8;
	color: var(--text);
}

#ptapp .ucchem-o-ms {
	background: #F4E3CF;
	color: var(--text);
}

#ptapp .ucchem-o-ia {
	background: #F2DCE4;
	color: var(--text);
}

#ptapp .ucchem-o-ns {
	background: #DCEEF0;
	color: var(--text);
}

#ptapp .ucchem-o-dk {
	background: #EAE6DB;
	color: var(--text);
}

#ptapp .ucchem-detail {
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	padding: 0.5rem 0.75rem;
	margin-top: 0.6rem;
	color: var(--text);
}

/* ---------- universe: knowledge ---------- */

#ptapp .uckn-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0 0.9rem 0;
}

#ptapp .uckn-tab {
	font: inherit;
	font-size: 0.95em;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: inherit;
	cursor: pointer;
}

#ptapp .uckn-tab[aria-pressed="true"] {
	background: rgba(201, 181, 122, 0.22);
	border-color: #9A7522; /* r126 contrast wave: #c9b57a measured 2.02:1 (WCAG 1.4.11); 3.69:1 vs the tinted fill, 4.25:1 vs white */
	font-weight: 600;
	color: inherit;
}

#ptapp .uckn-tab:focus-visible,
#ptapp .uckn-chip:focus-visible,
#ptapp .uckn-copybtn:focus-visible,
#ptapp .uckn-search:focus-visible,
#ptapp .uckn-sel:focus-visible,
#ptapp .uckn-ta:focus-visible,
#ptapp .uckn-card > summary:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .uckn-intro {
	margin: 0 0 0.9rem 0;
	line-height: 1.5;
}

#ptapp .uckn-searchrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem 0;
}

#ptapp .uckn-slabel {
	font-size: 0.9em;
	opacity: 0.85;
}

#ptapp .uckn-search {
	flex: 1 1 14rem;
	min-width: 10rem;
	font: inherit;
	font-size: 0.95em;
	padding: 0.35rem 0.6rem;
	/* r126 contrast wave: with no background of its own the browser default showed
	   through (#bfbfbf in the light sweep) and the typed ink was never set - both now
	   explicit and theme-tracking */
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 6px;
	/* r126 contrast wave: the two declarations that used to follow here - a 25% black wash
	   and an inherited ink - were what actually painted (#bfbfbf over white in the light
	   sweep, SC 1.4.3); the theme tokens above are the intended colours. The appearance
	   reset keeps the browser's own search-field styling from repainting the fill. */
	appearance: none;
	-webkit-appearance: none;
}

#ptapp .uckn-sec {
	margin: 0 0 1.1rem 0;
	padding: 0.7rem 0.8rem;
	border: 1px solid rgba(201, 181, 122, 0.28);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.025);
	color: inherit;
}

#ptapp .uckn-h {
	font-size: 1.05em;
	font-weight: 600;
	color: var(--gold-deep); /* r126 contrast wave: #c9b57a measured 2.02:1 on white (SC 1.4.3) */
	margin: 0 0 0.45rem 0;
}

#ptapp .uckn-toggles {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0.6rem 0 0.3rem 0;
}

#ptapp .uckn-group {
	margin: 0 0 1.2rem 0;
}

#ptapp .uckn-ghead {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--gold-deep); /* r126 contrast wave: #c9b57a measured 2.02:1 on white (SC 1.4.3) */
	border-bottom: 1px solid rgba(201, 181, 122, 0.35);
	padding: 0 0 0.25rem 0;
	margin: 0 0 0.55rem 0;
}

#ptapp .uckn-count {
	font-size: 0.8em;
	font-weight: 400;
	/* r126 contrast wave: was opacity 0.75 inheriting the header gold - composited to
	   #d7c89b, 1.67:1 on white (SC 1.4.3); a solid faded ink passes in both themes */
	color: var(--faded);
	opacity: 1;
}

#ptapp .uckn-card {
	margin: 0 0 0.5rem 0;
	border: 1px solid rgba(201, 181, 122, 0.25);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.02);
	color: inherit;
}

#ptapp .uckn-card[open] {
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
}

#ptapp .uckn-card > summary {
	cursor: pointer;
	padding: 0.5rem 0.7rem;
	line-height: 1.45;
}

#ptapp .uckn-title {
	font-weight: 600;
}

#ptapp .uckn-body {
	padding: 0.2rem 0.8rem 0.7rem 0.8rem;
	border-top: 1px solid rgba(201, 181, 122, 0.18);
}

#ptapp .uckn-field {
	margin: 0.5rem 0;
	line-height: 1.5;
}

#ptapp .uckn-math {
	display: block;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	margin: 0.3rem 0 0 0;
	padding: 0.45rem 0.6rem;
	font-size: 0.88em;
	line-height: 1.55;
	border: 1px solid rgba(201, 181, 122, 0.22);
	border-radius: 6px;
	background: var(--surface2);
	color: var(--text);
}

#ptapp .uckn-list {
	margin: 0.3rem 0 0.2rem 0;
	padding-left: 1.3rem;
}

#ptapp .uckn-list li {
	margin: 0.25rem 0;
	line-height: 1.5;
}

/* Long unbroken link texts (a raw URL, a slash-joined function-name path) pushed the page
   wider than a 360 px viewport (B4 browser pass, 34: horizontal page scroll). anywhere =
   break inside the word only when it cannot fit a line otherwise. */
#ptapp .uckn-list a, #ptapp #kesalonDocs a {
	overflow-wrap: anywhere;
}

#ptapp .uckn-srcrow {
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(201, 181, 122, 0.14);
	line-height: 1.5;
}

#ptapp .uckn-srcrow:last-child {
	border-bottom: 0;
}

#ptapp .uckn-ds {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(201, 181, 122, 0.14);
	line-height: 1.5;
}

#ptapp .uckn-ds:last-child {
	border-bottom: 0;
}

#ptapp .uckn-path {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: break-word;
	font-size: 0.88em;
	color: #c9b57a;
}

#ptapp .uckn-kind {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.7rem 0;
}

#ptapp .uckn-chip {
	font: inherit;
	font-size: 0.92em;
	padding: 0.25rem 0.7rem;
	border: 1px solid rgba(201, 181, 122, 0.45);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: inherit;
	cursor: pointer;
}

#ptapp .uckn-chip[aria-pressed="true"] {
	background: rgba(201, 181, 122, 0.22);
	border-color: #c9b57a;
	font-weight: 600;
	color: inherit;
}

#ptapp .uckn-selrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.9rem 0;
}

#ptapp .uckn-sel {
	flex: 1 1 16rem;
	min-width: 10rem;
	max-width: 100%;
	font: inherit;
	font-size: 0.95em;
	padding: 0.3rem 0.5rem;
	border: 1px solid rgba(201, 181, 122, 0.45);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.25);
	color: inherit;
}

#ptapp .uckn-ta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0.2rem 0 0.5rem 0;
	padding: 0.5rem 0.6rem;
	font-family: ui-monospace, Consolas, Menlo, monospace;
	font-size: 0.85em;
	line-height: 1.5;
	border: 1px solid rgba(201, 181, 122, 0.3);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.28);
	color: inherit;
	resize: vertical;
}

#ptapp .uckn-copybtn {
	font: inherit;
	font-size: 0.92em;
	padding: 0.3rem 0.8rem;
	border: 1px solid rgba(201, 181, 122, 0.55);
	border-radius: 6px;
	background: rgba(201, 181, 122, 0.14);
	color: inherit;
	cursor: pointer;
}

#ptapp .uckn-copybtn:hover {
	background: rgba(201, 181, 122, 0.26);
	color: inherit;
}

#ptapp .uckn-copymsg {
	margin-left: 0.5rem;
}

#ptapp .uckn-acc {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(201, 181, 122, 0.14);
	line-height: 1.5;
}

#ptapp .uckn-acc:last-child {
	border-bottom: 0;
}

@media (max-width: 34em) {

	#ptapp .uckn-searchrow,
	#ptapp .uckn-selrow {
		flex-direction: column;
		align-items: stretch;
	}

	#ptapp .uckn-search,
	#ptapp .uckn-sel {
		flex: 1 1 auto;
		min-width: 0;
	}

	#ptapp .uckn-body {
		padding: 0.2rem 0.55rem 0.6rem 0.55rem;
	}
}

/* ---------- archaeology tool ---------- */

#ptapp .archfind {
	border-top: 1px solid var(--line);
	padding-top: 0.375rem;
}

#ptapp .archfind a {
	color: inherit;
	text-decoration: underline;
}


/* ---------- CSP-safe styling (replaces former inline style attributes; the site CSP
   blocks style="..." in injected markup, so cursor/positioning rules live here and
   dynamic bar widths / chip colors use SVG width/fill attributes instead) ---------- */

#ptapp .orbHandle {
	cursor: grab;
	touch-action: none;
}

#ptapp .ucearth-rowc {
	display: contents;
}

#ptapp .ucchem-cfull {
	grid-column: 1 / -1;
}

#ptapp .ucchem-r1 {
	grid-row: 1;
}

#ptapp .ucchem-r2 {
	grid-row: 2;
}

#ptapp .ucchem-r3 {
	grid-row: 3;
}

#ptapp .ucchem-r4 {
	grid-row: 4;
}

#ptapp .ucchem-r5 {
	grid-row: 5;
}

#ptapp .ucchem-r6 {
	grid-row: 6;
}

#ptapp .ucchem-r7 {
	grid-row: 7;
}

#ptapp .ucchem-r8 {
	grid-row: 8;
}

#ptapp .ucchem-r9 {
	grid-row: 9;
}

#ptapp .ucchem-r10 {
	grid-row: 10;
}

#ptapp .ucchem-c1 {
	grid-column: 1;
}

#ptapp .ucchem-c2 {
	grid-column: 2;
}

#ptapp .ucchem-c3 {
	grid-column: 3;
}

#ptapp .ucchem-c4 {
	grid-column: 4;
}

#ptapp .ucchem-c5 {
	grid-column: 5;
}

#ptapp .ucchem-c6 {
	grid-column: 6;
}

#ptapp .ucchem-c7 {
	grid-column: 7;
}

#ptapp .ucchem-c8 {
	grid-column: 8;
}

#ptapp .ucchem-c9 {
	grid-column: 9;
}

#ptapp .ucchem-c10 {
	grid-column: 10;
}

#ptapp .ucchem-c11 {
	grid-column: 11;
}

#ptapp .ucchem-c12 {
	grid-column: 12;
}

#ptapp .ucchem-c13 {
	grid-column: 13;
}

#ptapp .ucchem-c14 {
	grid-column: 14;
}

#ptapp .ucchem-c15 {
	grid-column: 15;
}

#ptapp .ucchem-c16 {
	grid-column: 16;
}

#ptapp .ucchem-c17 {
	grid-column: 17;
}

#ptapp .ucchem-c18 {
	grid-column: 18;
}


/* ---------- contrast guard: links and faded text inside dark universe panels
   inherit the panel's light text instead of the page's dark link color ---------- */

#ptapp .uccos-fact a,
#ptapp .uccos-card a,
#ptapp .uccos-math a,
#ptapp .uuv-facts a,
#ptapp .uuv-menu a,
#ptapp .ucearth-detail a,
#ptapp .ucearth-head a {
	color: inherit;
	text-decoration: underline;
}


/* ---------- universe: Scale / Drive / Backend setting rows (each on its own line) ---------- */

#ptapp .uuv-ctlrow {
	display: block;
	margin: 0.25rem 0;
}

#ptapp .uuv-ctlrow .uctoggle-label {
	font-weight: 700;
	min-width: 4.5rem;
}


/* ---------- eclipse header + cycle coupling controls + range subtitles ---------- */

#ptapp .eclhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem 1rem;
}

#ptapp .eclhead .eclheadtitle {
	display: inline-flex;
	align-items: center;
}

#ptapp .eclmove,
#ptapp .cycmove {
	font-weight: 400;
	cursor: pointer;
}

#ptapp .cycrange {
	text-align: center;
	font-weight: 700;
	margin-top: 0.5rem;
}

/* Years & Cycles block centered (owner request): navigators and button bars line up
   under the centered range lines */
#ptapp #secCycles .cycnav {
	justify-content: center;
}

#ptapp #secCycles .cycbar {
	justify-content: center;
}


/* ---------- Mazzaroth + Eclipse Finder side-by-side on wide screens ---------- */

@media (min-width: 48em) {
	#ptapp .sidepair {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
	}
	#ptapp .sidepair > section {
		flex: 1 1 48%;
		min-width: 0;
	}
}


/* ---------- month view: teaching headers, week column, cheer line, date formats ---------- */

#ptapp .dow.dowteach {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1.25;
	text-align: center;
}

#ptapp .dowteach .dnum {
	font-weight: 700;
}

#ptapp .dowteach .dheb {
	font-size: 1.05em;
}

#ptapp .dowteach .dtr {
	font-size: 0.8em;
	color: var(--faded);
}

#ptapp .dowteach .dsec {
	font-size: 0.75em;
	color: var(--faded);
}

#ptapp .wknum {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 0.4rem;
	color: var(--faded);
	font-size: 0.85em;
}

#ptapp .dow.wkhead {
	align-self: end;
}

#ptapp .cell .cheer {
	font-weight: 700;
	color: var(--gold-deep);
	font-size: 0.85em;
	line-height: 1.25;
}

#ptapp .cell .cheer .cheerref {
	font-weight: 400;
	color: var(--faded);
	font-size: 0.9em;
}

#ptapp .cell .jdn {
	font-size: 0.72em;
}

#ptapp .mfswrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
}

#ptapp .mcouple {
	text-align: center;
	margin-top: 0.375rem;
}

#ptapp .cell .dfull {
	font-weight: 600;
}

@media (max-width: 40em) {
	#ptapp .mgrid {
		grid-template-columns: 1fr;
	}
	#ptapp .wknum,
	#ptapp .dow.wkhead,
	#ptapp .dow.dowteach,
	#ptapp .cell .dfull,
	#ptapp .mfswrap {
		display: none;
	}
}

@media (min-width: 40.0625em) {
	#ptapp .cell .cwd {
		display: none;
	}
}

/* ---------- universe: circle-i info buttons + explainer panels ---------- */

#ptapp .uuv-infobtn {
	font: inherit;
	font-size: 0.9em;
	background: var(--surface2);
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 999px;
	padding: 0 0.4rem;
	cursor: pointer;
	line-height: 1.4;
}

#ptapp .uuv-infobtn:hover {
	background: #ECE5D2;
	border-color: var(--gold);
}

#ptapp .uuv-infopanel {
	flex-basis: 100%;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.5rem 0.625rem;
	margin-top: 0.25rem;
}

#ptapp .uuv-infopanel a {
	color: inherit;
	text-decoration: underline;
}


/* ---------- map options: behavior selects, mini per-overlay checkboxes ---------- */

#ptapp .mapopt-mini {
	font-size: 0.85em;
	margin-left: 0.4rem;
	white-space: nowrap;
	cursor: pointer;
}

#ptapp .mapecl-add {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: center;
}

#ptapp .mapecl-add select {
	max-width: 100%;
	min-width: 0;
	flex: 1 1 14rem;
}


/* ---------- per-tool share link + gear ---------- */

#ptapp .secshare {
	margin-left: 0.5rem;
	white-space: nowrap;
}

#ptapp .secshare-btn {
	font: inherit;
	font-size: 0.8em;
	background: var(--surface2);
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 6px;
	padding: 0.05rem 0.35rem;
	cursor: pointer;
	margin-left: 0.2rem;
	vertical-align: middle;
}

#ptapp .secshare-btn:hover {
	background: #ECE5D2;
	border-color: var(--gold);
}

#ptapp .secshare-panel {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.5rem 0.625rem;
	margin: 0.375rem 0;
}


/* ---------- saved views & snapshots (universe-snapshots.js) ---------- */

#ptapp .sv-root {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#ptapp .sv-status {
	color: var(--gold-deep);
	font-size: 0.85em;
	min-height: 1em;
}

#ptapp .sv-h {
	font-weight: 700;
	margin-bottom: 0.25rem;
}

#ptapp .sv-lede {
	color: var(--faded);
	font-size: 0.85em;
	margin-bottom: 0.375rem;
}

#ptapp .sv-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
}

#ptapp .sv-name {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 6px;
	background: #FFFDF7;
	color: var(--text);
	font: inherit;
}

#ptapp .sv-btn {
	font: inherit;
	font-size: 0.9em;
	background: var(--surface2);
	color: var(--text);
	border: 1px solid var(--ctlline); /* r126 contrast wave, WCAG 1.4.11 */
	border-radius: 7px;
	padding: 0.3rem 0.7rem;
	cursor: pointer;
}

#ptapp .sv-btn:hover {
	background: #ECE5D2;
	border-color: var(--gold);
}

#ptapp .sv-save {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
	font-weight: 700;
}

#ptapp .sv-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

#ptapp .sv-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	border-top: 1px solid var(--line);
	padding-top: 0.3rem;
}

#ptapp .sv-open {
	font-weight: 600;
	flex: 1 1 10rem;
	text-align: left;
}

#ptapp .sv-when {
	color: var(--faded);
	font-size: 0.8em;
}

#ptapp .sv-empty {
	color: var(--faded);
	font-size: 0.85em;
}

#ptapp .sv-cards {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#ptapp .sv-card {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	padding: 0.5rem 0.625rem;
}

#ptapp .sv-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

#ptapp .sv-card-title {
	font-weight: 700;
}

#ptapp .sv-card-ts {
	color: var(--faded);
	font-size: 0.8em;
}

#ptapp .sv-perma,
#ptapp .sv-cite {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.375rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface2);
	color: var(--text);
	font-size: 0.82em;
	word-break: break-all;
	font-family: inherit;
}

#ptapp .sv-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.375rem;
}


/* ---------- map eclipse list: any-era year navigation ---------- */

#ptapp .mapecl-yr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: 0.375rem 0;
}

#ptapp .mapecl-yr input[type="number"] {
	width: 4.5rem;
}

#ptapp .mapecl-yr input.ymd {
	width: 3rem;
}


/* ================= RIGHT-SIDE PANEL (Tools & Display) + per-bar gear ================= */
/* TOP-1 (owner order). Every white bar carries its panel-opener gear as real markup in
   index.php, and the bar is a TWO-SLOT flex row: .barmain takes slot one and does all the
   wrapping inside itself, the gear takes slot two. That gives the gear a reserved layout slot
   of its own, so it is structurally incapable of sitting on top of a bar control at any width,
   zoom or device - no absolute positioning, no z-index, no reserved padding to keep in sync.
   It also answers the two earlier attempts at once: the r90 in-flow gear drifted to the bottom
   of a wrapped bar because it was a sibling of the wrapping controls; here it is not - it shares
   ONE flex line with the wrapper, which is what keeps it at the top right - and the absolute
   badge that replaced r90 was the overlay TOP-1 removes.
   The zero flex-basis below is load-bearing, not shorthand tidiness. Flex line collection uses
   each item's HYPOTHETICAL main size, and shrinking happens only after the lines are formed, so
   `flex: 1 1 auto` would hand the wrapper its max-content width (every bar control on one line,
   thousands of px), the gear would not fit on line one, and it would drop to a second line at
   the bar's bottom left - reproducing the very r90 failure this replaces. A definite 0 basis
   makes the wrapper's hypothetical size 0, both slots always collect onto line one, and the
   wrapper then GROWS into whatever is left over and wraps its controls inside itself. min-width
   keeps the automatic minimum size from clamping that basis back up to min-content.
   #placeResults is the one bar with no gear and no .barmain - it stays a plain flex row, which
   is also why the wrap on .bar itself must stay. */
#ptapp .bar {
	position: relative;
}

#ptapp .bar > .barmain {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
}

#ptapp .bar > .rsp-gear {
	flex: 0 0 auto;
	align-self: flex-start; /* top of the shared line, so a bar that wraps to six rows inside
	   .barmain still shows its gear at the SAME top-right spot as a one-row bar */
	line-height: 1.2;
}

/* The panel itself: slides in from the right edge on ALL screen sizes. It is fully
   dismissible (close button, Escape, click outside) - never permanently on screen. */
#ptapp #rightSidePanel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: min(20rem, 88vw);
	background: var(--surface);
	border-left: 1px solid var(--line);
	box-shadow: -0.25rem 0 1.25rem rgba(40,34,18,0.22);
	z-index: 900;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

#ptapp #rightSidePanel[hidden] {
	display: none;
}

#ptapp #rightSidePanel.open {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	#ptapp #rightSidePanel {
		transition: none;
	}
}

#ptapp .rsp-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--line);
}

#ptapp .rsp-tabs {
	display: flex;
	gap: 0.375rem;
	flex: 1;
}

#ptapp .rsp-close {
	font-size: 1.05em;
	line-height: 1;
	padding: 0.25rem 0.625rem;
}

#ptapp .rsp-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.75rem;
}

#ptapp .rsp-modes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-bottom: 0.625rem;
}
/* radiogroup wrapper around Multi/Single (Clear stays a plain button) - kept layout-transparent
   so the mode row looks identical while the two options form a proper WAI-ARIA radiogroup */
#ptapp .rsp-moderadios {
	display: inline-flex;
	gap: 0.375rem;
}

#ptapp .rsp-tools {
	border-top: 1px solid var(--line);
	padding-top: 0.625rem;
}

#ptapp .rsp-tools .tool-btn {
	display: block;
	width: 100%;
	text-align: left;
	margin-bottom: 0.375rem;
}

#ptapp .rsp-readings {
	border-top: 1px solid var(--line);
	padding-top: 0.625rem;
	margin-top: 0.625rem;
}

/* Display tab: settings-list look - one row per line, label left, control right. */
#ptapp .rsp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--line);
}

#ptapp .rsp-rowlbl {
	font-weight: 600;
	white-space: nowrap;
}

#ptapp .rsp-ctl {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.375rem;
}

#ptapp .rsp-ctl input[type=range] {
	width: 7rem;
}

@media print {
	#ptapp #rightSidePanel, #ptapp .rsp-gear {
		display: none !important;
	}
}

/* ================= PER-SECTION MEASUREMENT UNITS (tool rows, section gears,
   settings sub-view, Display page-defaults) - palette vars only, so dark mode
   themes automatically. ================= */
/* Tool rows: the toggle grows to fill; its units gear stays a fixed square at the right. */
#ptapp .rsp-toolrow {
	display: flex;
	align-items: stretch;
	gap: 0.375rem;
	margin-bottom: 0.375rem;
}

/* r82: the Day row has a plain text label instead of a toggle (always-shown section);
   grow it like a toggle so its units gear stays in the right-hand gear column. */
#ptapp .rsp-toolrow .coords {
	flex: 1 1 auto;
	align-self: center;
}

#ptapp .rsp-toolrow .tool-btn {
	flex: 1 1 auto;
	width: auto;
	margin-bottom: 0;
	text-align: left;
}

#ptapp .rsp-toolgear {
	flex: 0 0 auto;
	line-height: 1.2;
}

/* TOP-1 (owner 2026-07-18): the units gear is now an IN-FLOW flex item at the right of
   its section header row (see .has-hdrgear), so it reserves its own layout slot and can
   never overlap a sibling control at any width - replacing the old absolute overlay that
   crowded the Day time-zone switch and the Map Options button. It is gold-outlined to be
   visually UNIQUE from the plain grey link/share gear (.secshare-btn) in the same row. */
#ptapp .has-hdrgear {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

#ptapp .rsp-secgear {
	flex: 0 0 auto;
	margin-left: auto; /* pushes the gear (and any share buttons after it) to the right */
	line-height: 1.2;
	border-color: var(--gold); /* gold OUTLINE = visually unique from the plain grey share gear
	   (a gold FILL is reserved for "selected/loaded", so an outline is used here); the glyph keeps
	   the default high-contrast text colour so it stays >=3:1 (WCAG 1.4.11) in both themes */
}

/* The Day arc has no h2, so index.php gives it .dayhdrctl: a header-control row holding the
   time-zone group and, beside it, the units gear in its own slot. The gear is NOT inside the
   time-zone group - that group is a labelled radio-style group and an unrelated control does
   not belong in its accessible name - and the row's own gap keeps them apart, so no auto
   margin is wanted here. */
#ptapp .dayhdrctl {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
}

#ptapp .dayhdrctl .rsp-secgear {
	margin-left: 0;
}

/* Two section headers are CENTERED by design (the Month view title and the Eclipses (NASA)
   header). For those, the gear's margin-left:auto would eat the free space and defeat the
   centering, so the gear instead joins the centered cluster in-flow (still its own reserved
   slot, still no overlap). secMonth's h2 also needs justify-content restored once it becomes
   a flex row via .has-hdrgear. */
#ptapp .eclhead .rsp-secgear,
#ptapp .mhead .rsp-secgear {
	margin-left: 0;
}

#ptapp .mhead .lbl.m0.has-hdrgear {
	justify-content: center;
}

/* secMap already pushes its "Map Options" button right with margin-left:auto; a second auto
   margin on the gear would split the free space and leave Map Options floating mid-row, so the
   gear rides flush against it instead. */
#ptapp #secMap > h2 .rsp-secgear {
	margin-left: 0;
}

/* TOP-1: the absolute top-right gear badge is gone - every section now has a real header row
   to hold its gear in flow. The two shapes that had none were solved structurally instead:
   the header-less year slider was given a .fshead row in index.php, and a <details> summary
   gets .sumrow, a flex row INSIDE the summary.
   The row goes inside rather than turning the summary itself into a flex container, and that
   is deliberate: a summary stops being display:list-item the moment it is given another
   display, which drops its native disclosure triangle. Redrawing that triangle would have
   meant these four summaries wore a hand-drawn marker while every other <details> on the page
   - including #kesalonDocs, which sits nested INSIDE one of them - kept the browser's own, in
   a different size and colour, differing again per browser. Keeping display:list-item keeps
   one disclosure marker style across the whole app. The marker sits outside the content box
   (summary.lbl is list-style-position: outside), so the row spans the full width and the
   gear's own margin-left:auto parks it at the right end.
   .has-secgear stays: the V2 full-screen helper still uses it as the positioning anchor for
   its own badge fallback. */
#ptapp .has-secgear {
	position: relative;
}

#ptapp .sumrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

#ptapp .rsp-secgear:hover {
	opacity: 1;
}

/* Tools pane: the per-tool settings sub-view (shown when a gear is clicked). */
#ptapp .rsp-toolsettings[hidden] {
	display: none;
}

#ptapp .rsp-tshead {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.625rem;
}

#ptapp .rsp-tstitle {
	font-weight: 600;
	font-size: 1.02em;
}

/* WCAG 2.4.7: the rule that used to sit here - `#ptapp .rsp-tstitle:focus { outline: none }` -
   suppressed the focus ring on the gear sub-view's title, and out-ranked the app's own
   :focus-visible rule on specificity. Opening a gear replaced the panel's whole content and
   left no on-screen sign of where focus had gone. The sub-view now opens focus onto its Back
   button instead (see fn_open_tool_settings_subview / fn_reset_tool_settings_to_defaults in prayer-times-heavens.js), which
   is genuinely interactive, gets the shared ring for free, and puts the reader at the start of
   the Tab sequence rather than one stop past the control that undoes the navigation. The
   suppression is deleted outright so it can never silently re-break a future script focus. */

#ptapp .rsp-tsgroups {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#ptapp .rsp-tsbar {
	display: flex;
	gap: 0.375rem;
	margin-top: 0.75rem;
}

#ptapp .rsp-tsreset {
	margin-top: 0.5rem;
}

/* Category groups (shared by the sub-view and the Display page-defaults block). */
#ptapp .rsp-unitshead {
	font-weight: 600;
	margin-top: 0.75rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--line);
}

#ptapp .rsp-unitsnote {
	margin: 0.25rem 0 0.5rem;
}

#ptapp .rsp-units {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#ptapp .unit-grp {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 0.5rem 0.625rem;
	background: var(--surface2);
}

#ptapp .unit-grplbl {
	font-weight: 600;
	margin-bottom: 0.375rem;
}

#ptapp .unit-vals, #ptapp .unit-cases, #ptapp .unit-opts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
}

#ptapp .unit-cases {
	margin-top: 0.375rem;
}

/* v2: one labelled radiogroup row (System / Order / Name / Case). The label sits to the
   left and the option buttons wrap beneath it on narrow / high-scaling panels. */
#ptapp .unit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.375rem;
}

#ptapp .unit-row[hidden] {
	display: none;
}

#ptapp .unit-caselbl {
	font-size: 0.85em;
	color: var(--faded);
	margin-right: 0.15rem;
	flex: 0 0 auto;
}

#ptapp .unit-grpnote {
	margin-top: 0.375rem;
}

/* v2: the "Individual units" disclosure and its per-measure fine-override rows. */
#ptapp .unit-measbtn {
	display: block;
	width: 100%;
	text-align: left;
	margin-top: 0.5rem;
}

#ptapp .unit-measlist {
	margin-top: 0.375rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#ptapp .unit-measlist[hidden] {
	display: none;
}

#ptapp .unit-measrow {
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.375rem 0.5rem;
	background: var(--surface);
}

#ptapp .unit-measlbl {
	font-size: 0.9em;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

@media print {
	#ptapp .rsp-secgear, #ptapp .rsp-toolgear, #ptapp .unit-measbtn {
		display: none !important;
	}
}

/* ================= DARK MODE (Tools & Display panel > Theme) =================
   Everything below lives inside @media screen so printing always comes out light,
   whatever theme is active. Light stays the default; #ptapp.theme-dark overrides
   the palette custom properties plus every hardcoded light literal per component.
   Canvas-painted imagery (the visibility map etc.) is imagery - not re-themed. */
@media screen {
	#ptapp.theme-dark {
		--bg: #12141A;
		--surface: #1C1F27;
		--surface2: #242833;
		--line: #3A3F4D;
		--ctlline: #7A8398;  /* WCAG 1.4.11: control border >=3:1 vs EVERY dark control fill, measured worst cases included (#2A2F3B nav buttons 3.4:1, #24382A sabbath-green segments 3.2:1); the old #6B7488 fell to 2.86:1 and 2.68:1 there */
		--text: #E8E4D6;
		--faded: #A49E8C;
		--gold: #C99C33;
		--gold-deep: #D9B054;
		/* the dark theme's ring keeps the brighter gold, which already passes: 7.27:1 on --bg,
		   6.50:1 on --surface, 5.81:1 on --surface2, 4.92:1 on the #2E3442 hover fill */
		--focusring: #C99C33;
		--gold-bright: #E8B83F;
		--green: #7FBF8C;
		--moon: #8FAFD8;
		--blood: #E08074;
		background: radial-gradient(1100px 500px at 85% -10%, #1A1E2A 0%, transparent 60%), radial-gradient(900px 460px at 8% 0%, #171D1A 0%, transparent 55%), var(--bg);
	}

	/* text inputs & selects that hardcode a white background */
	#ptapp.theme-dark .bar input[type=number], #ptapp.theme-dark .bar input[type=time], #ptapp.theme-dark .placeinput, #ptapp.theme-dark .ymd, #ptapp.theme-dark .mapecl-add select, #ptapp.theme-dark .ucphy-field select, #ptapp.theme-dark .ucphy-field input {
		background: #242833;
	}

	/* hover fills that hardcode the light parchment #ECE5D2 - and the one focus-visible fill
	   that deliberately mirrors a hover fill, so a keyboard user gets the same emphasis here
	   as a mouse user does (it needs its own dark entry because the light rule that sets it
	   would otherwise paint parchment on the dark theme) */
	#ptapp.theme-dark .btn:hover, #ptapp.theme-dark .eclarrow:hover, #ptapp.theme-dark .uuv-btn:hover, #ptapp.theme-dark .ucphy-btn:hover, #ptapp.theme-dark .uuv-infobtn:hover, #ptapp.theme-dark .secshare-btn:hover, #ptapp.theme-dark .sv-btn:hover, #ptapp.theme-dark .rsp-secfs:focus-visible {
		background: #2E3442;
	}

	/* raised/inset surfaces (#F6F1DF / #EFEAD9) */
	#ptapp.theme-dark .navlbl-btn, #ptapp.theme-dark .cycseg, #ptapp.theme-dark .cycarrow {
		background: #262B36;
	}

	/* near-white card fills (#FFFDF7) */
	#ptapp.theme-dark .hour, #ptapp.theme-dark .cell, #ptapp.theme-dark .yssvg, #ptapp.theme-dark .omercell, #ptapp.theme-dark .uuv-select, #ptapp.theme-dark .uuv-menu, #ptapp.theme-dark .ucsb-canvas, #ptapp.theme-dark .sv-name {
		background: #20242E;
	}

	/* the gold "expected sighting" highlight (#FBF3DC and its gradient pair) */
	#ptapp.theme-dark .sight {
		background: linear-gradient(180deg,#332B15,#20242E);
	}

	#ptapp.theme-dark .cell.sight, #ptapp.theme-dark .omercell.shav, #ptapp.theme-dark .sw-sight, #ptapp.theme-dark .uuv-menu-item:hover, #ptapp.theme-dark .ucsb-btn:hover, #ptapp.theme-dark .ucsb-row[aria-pressed="true"], #ptapp.theme-dark .uccos-lrow.uccos-here {
		background: #332B15;
	}

	/* plain white component fills (#FFFFFF / #FBF8F0) */
	#ptapp.theme-dark .mapoptsbtn, #ptapp.theme-dark .mapopts, #ptapp.theme-dark .chip, #ptapp.theme-dark .mapecl-rm, #ptapp.theme-dark .mapecl-chip {
		background: #242833;
	}

	/* soft parchment panels (#FAF7EE) */
	#ptapp.theme-dark details.hours12, #ptapp.theme-dark .threshinfo {
		background: #1E222C;
	}

	/* SVG chart text: the known faded/dark ink fills get readable dark-theme inks
	   (targeted attribute selectors - dynamic/light fills are left untouched). */
	#ptapp.theme-dark svg text[fill="#6E6A5A"] {
		fill: #A49E8C;
	}

	#ptapp.theme-dark svg text[fill="#8C8670"] {
		fill: #A8A290;
	}

	#ptapp.theme-dark svg text[fill="#9A937D"] {
		fill: #ABA48E;
	}

	#ptapp.theme-dark svg text[fill="#3A3A2E"] {
		fill: #D9D4C4;
	}

	#ptapp.theme-dark svg text[fill="#2C2B22"] {
		fill: #E8E4D6;
	}

	#ptapp.theme-dark svg text[fill="#8A6A1D"] {
		fill: #D9B054;
	}

	#ptapp.theme-dark svg text[fill="#B58A2A"] {
		fill: #D9B054;
	}

	#ptapp.theme-dark svg text[fill="#A08A4E"] {
		fill: #C4B078;
	}

	#ptapp.theme-dark svg text[fill="#33517A"] {
		fill: #9FB9DD;
	}

	#ptapp.theme-dark svg text[fill="#4A6B96"] {
		fill: #8FAFD8;
	}

	#ptapp.theme-dark svg text[fill="#2F6B3A"] {
		fill: #7FBF8C;
	}

	#ptapp.theme-dark svg text[fill="#9E3B30"] {
		fill: #E08074;
	}

	#ptapp.theme-dark svg text[fill="#9E5247"] {
		fill: #DE9A8A;
	}
}

/* ---------- dark mode: state tints + late fixes (source order beats the generic
   surface overrides above, restoring the highlights the first dark pass lost) ---------- */

@media screen {
	#ptapp.theme-dark .eclyr:hover {
		background: #2A2F3B;
	}

	#ptapp.theme-dark .eclyr.sel {
		background: #3A2626;
	}

	#ptapp.theme-dark .ucw-note {
		background: #242833;
		border-color: #3A3F4D;
	}

	#ptapp.theme-dark .ucsb-close {
		background: #3A2626;
	}

	#ptapp.theme-dark .ucsb-row.ucsb-close:hover {
		background: #472D2D;
	}

	#ptapp.theme-dark .remembanner {
		background: #3A2323;
		border-color: #7A4A44;
	}

	#ptapp.theme-dark .hour.now {
		background: #33301F;
	}

	#ptapp.theme-dark .omercell.omertoday {
		background: #333019;
	}

	#ptapp.theme-dark .cycseg.sab {
		background: #24382A;
		border-color: #7FA98B; /* r126 contrast wave: #3E5C46 measured 2.22:1 (WCAG 1.4.11); 4.75:1 vs the fill */
		color: #CFE5D4;
	}

	#ptapp.theme-dark .navlbl-btn {
		background: #2A2F3B;
		border-color: var(--ctlline); /* r126 contrast wave: #3A3F4D measured 1.57:1 (WCAG 1.4.11) */
		color: #C8C2B0;
	}

	#ptapp.theme-dark .navlbl-btn:hover {
		background: #3A3F4D;
		color: #E8E4D6;
	}

	#ptapp.theme-dark .ptapperr {
		background: #3A331A;
		border-color: #C9A93E;
		color: #E8DFB8;
	}

	#ptapp.theme-dark .ptapperr.bad {
		background: #442522;
		border-color: #B45248;
		color: #F0B8B0;
	}

	#ptapp.theme-dark .badge.ecl {
		background: #442522;
		border-color: #8A4A42;
		color: #E8A099;
	}

	/* load-gate status line: dark theme uses the palette gold (D9B054 on #242833
	   = 7.2:1); the light theme needs the darker #7E611B set in the base rule */
	#ptapp.theme-dark .ucgate-status {
		color: var(--gold-deep);
	}
}
/* ---------- custom tooltips (app-wide, cursor-following; keyboard focus shows them too) ---------- */

#ptapp .pttip {
	position: fixed;
	z-index: 1300;
	display: none;
	max-width: 24rem;
	background: #2C2B22;
	color: #FBF8F0;
	border: 1px solid var(--gold);
	border-radius: 0.4rem;
	box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.35);
	padding: 0.45rem 0.6rem;
	font-size: 0.82em;
	line-height: 1.45;
	pointer-events: none;
	white-space: pre-line;
}

#ptapp .pttip.show {
	display: block;
}

@media print {
	#ptapp .pttip {
		display: none !important;
	}
}

/* ---------- TOP-2 load-gate blocks (web-only LOAD DATA buttons) ----------
   Large datasets no longer fetch on page load in a browser tab; each affected
   tool shows one of these centered blocks and fetches only on click. The
   installed app auto-loads everything, so these never appear there. Palette
   vars only, so dark mode themes automatically. */
#ptapp .ucgate {
	text-align: center;
	background: var(--surface2);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 1rem 1.125rem;
	margin: 0.625rem 0;
}

#ptapp .ucgate-title {
	font-weight: 700;
	font-size: 1.05em;
	color: var(--green);
	margin-bottom: 0.375rem;
}

#ptapp .ucgate-note {
	max-width: 46rem;
	margin: 0 auto 0.625rem;
	line-height: 1.5;
}

#ptapp .ucgate-btn {
	display: block;
	margin: 0.375rem auto;
	font: inherit;
	cursor: pointer;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--ctlline); /* WCAG 1.4.11, was --line at 1.26:1; see .ucgate2-opt */
	border-radius: 9px;
	padding: 0.5rem 1.25rem;
	min-width: min(22rem, 100%);
	max-width: 100%;
	font-weight: 600;
}

/* hover was var(--gold) = 2.76:1 against the panel in the light theme, so the mouse
   affordance failed the same 3:1 floor the resting border did; --gold-deep is 4.40:1 */
#ptapp .ucgate-btn:hover {
	border-color: var(--gold-deep);
}

#ptapp .ucgate-btn:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .ucgate-primary {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
	font-weight: 700;
	font-size: 1.08em;
	letter-spacing: 0.04em;
	padding: 0.75rem 1.5rem;
}

#ptapp .ucgate-primary:hover {
	filter: brightness(1.06);
	border-color: #9A7522;
}

#ptapp .ucgate-sub {
	display: block;
	font-weight: 500;
	font-size: 0.78em;
	letter-spacing: normal;
	margin-top: 0.125rem;
}

#ptapp .ucgate-btn .ucgate-sub {
	opacity: 0.85;
}

#ptapp .ucgate-primary .ucgate-sub {
	color: #2A2007; /* 6-digit; matches the primary button text (>= 5:1 on the gold gradient in both themes) */
	opacity: 1;
}

#ptapp .ucgate-status {
	/* stays rendered even while empty (min-height reserves the line): a live
	   region must already exist in the accessibility tree for screen readers
	   to voice its text changes reliably. Color is a darker gold than
	   --gold-deep because this small text sits on --surface2: #7E611B on
	   #F4EFE2 = 5.06:1 (WCAG AA needs 4.5:1; --gold-deep was 4.40:1). The
	   dark theme overrides it back to the palette gold below. */
	margin-top: 0.5rem;
	min-height: 1.2em;
	font-weight: 600;
	color: #7E611B;
}

#ptapp .ucgate-status:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .ucgate-foot {
	margin-top: 0.5rem;
	font-size: 0.85em;
}

@media print {
	#ptapp .ucgate {
		display: none !important;
	}
}

/* ---------- LOAD PANEL v2 (r75): persistent collapsible load options ----------
   Shell colors follow the page-wide convention (gold = the actively loaded
   option, plain = not selected). The inner status CHIP colors are deliberately
   theme-fixed so their meaning never shifts: solid green = active, light green
   = recommended pick, white = optional/not loaded, amber = loading, red = failed. */
#ptapp .ucgate2 {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface2);
	margin: 0.625rem 0;
}

#ptapp .ucgate2-sum {
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	font-weight: 700;
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--green);
}

#ptapp .ucgate2-sum .ucgate2-sumstate {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
}

#ptapp .ucgate2-body {
	padding: 0.25rem 0.75rem 0.75rem;
}

#ptapp .ucgate2-note {
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

#ptapp .ucgate2-opt {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	cursor: pointer;
	background: var(--surface);
	color: var(--text);
	/* WCAG 1.4.11: --line measured 1.26:1 against the panel and 1.45:1 against this button's
	   own fill in the light theme (1.40:1 and 1.57:1 dark), so these full-width option blocks
	   had no perceivable edge - and each one triggers a download of up to 682 MB. --ctlline is
	   3.43:1 and 3.94:1 light, 3.14:1 and 3.51:1 dark. */
	border: 1px solid var(--ctlline);
	border-radius: 9px;
	padding: 0.5rem 0.75rem;
	margin: 0.375rem 0;
}

/* was var(--gold) = 2.76:1 against the panel in the light theme; --gold-deep is 4.40:1 */
#ptapp .ucgate2-opt:hover {
	border-color: var(--gold-deep);
}

#ptapp .ucgate2-opt:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

/* WCAG 1.4.11: the disclosure summary that opens every load panel had no focus rule of its
   own, so it fell through to the page-wide ring - which was var(--gold) at 2.76:1 against
   this panel's --surface2 in the light theme. It is the FIRST control a keyboard reader
   reaches in every panel and universe-core.js parks focus back on it after each rebuild.
   The page-wide ring is now --focusring (4.40:1 on --surface2, 4.76:1 on --bg, 5.05:1 on a
   white card), and this rule states it explicitly so the entry control never drifts again. */
#ptapp .ucgate2-sum:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .ucgate2-opt.is-active {
	background: linear-gradient(180deg,var(--gold-bright),var(--gold));
	border-color: #9A7522;
	color: #2A2007;
}

#ptapp .ucgate2-head {
	display: block;
	font-weight: 700;
}

#ptapp .ucgate2-size {
	font-weight: 500;
	font-size: .85em;
}

#ptapp .ucgate2-opt.is-active .ucgate2-size {
	color: #2A2007; /* matches the head text; >= 5:1 on the worst end of the gold gradient */
}

#ptapp .ucgate2-status {
	display: block;
	margin-top: 0.375rem;
	border-radius: 6px;
	padding: 0.25rem 0.5rem;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.45;
}

#ptapp .ucgate2-status.st-active {
	background: #2F6B3A;
	color: #FFFFFF;
	border: 1px solid #1E4426;
}

#ptapp .ucgate2-status.st-rec {
	background: #DDEBD9;
	color: #1E4426;
	border: 1px solid #9DBE93;
}

#ptapp .ucgate2-status.st-plain {
	background: #FFFFFF;
	color: #2C2B22;
	border: 1px solid #B9B29A;
	font-weight: 600;
}

#ptapp .ucgate2-status.st-loading {
	background: #F3E2A8;
	color: #5A4A12;
	border: 1px solid #C9A93E;
}

#ptapp .ucgate2-status.st-error {
	background: #F6E3E0;
	color: #8E3B30;
	border: 1px solid #C98279;
}

#ptapp .ucgate2-live {
	margin-top: 0.375rem;
	min-height: 1.2em;
	font-weight: 600;
	color: #7E611B;
}

#ptapp .ucgate2-live:focus-visible {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.125rem;
}

#ptapp .ucgate2-foot {
	margin-top: 0.5rem;
	font-size: .85em;
}

/* the top Load Data Options section (a details.month card) */
#ptapp .loadopts > summary.lbl {
	cursor: pointer;
}

@media screen {
	#ptapp.theme-dark .ucgate2-live {
		color: var(--gold-deep);
	}
}

@media print {
	#ptapp .ucgate2, #ptapp .loadopts {
		display: none !important;
	}
}

/* Fixed tooltip dock for the day/night arc (owner request 2026-07-18): when the
   sun or moon handle is hovered or dragged, its explanation shows HERE - a fixed
   box in the section's upper-right whitespace beside the arc - never beside the
   mouse where it would cover the arc. Works for both the day and night views. */
#ptapp .arcbox {
	position: relative;
}

#ptapp .arcinfo {
	position: absolute;
	top: 4.5rem;
	right: 1.125rem;
	width: 15rem;
	/* the arc svg's truly-empty corner is only the right ~27% of its width (the
	   "3rd hour" label ends near x 655 of the 900-unit viewBox), so cap the box
	   proportionally: at mid widths (~641-935px) a fixed 15rem box would cover
	   the arc shoulder and hour labels */
	max-width: calc(27% - 1.125rem);
	background: var(--surface);
	border: 1px solid var(--gold);
	border-radius: 8px;
	padding: 0.5rem 0.625rem;
	font-size: .8em;
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 2px 8px rgba(40,34,18,0.14);
	pointer-events: none;
	z-index: 5;
}

@media (max-width: 58em) {
	/* mid widths: the proportional cap narrows the box, so shrink the text a step
	   to keep the box from growing tall over the horizon labels below the arc */
	#ptapp .arcinfo {
		font-size: .72em;
	}
}

@media (max-width: 40em) {
	/* narrow screens have no whitespace beside the arc: let the box overlay the
	   arc's top edge compactly instead (still fixed, never at the pointer) */
	#ptapp .arcinfo {
		top: 4rem;
		right: 0.5rem;
		max-width: 60%;
	}
}

@media print {
	#ptapp .arcinfo {
		display: none !important;
	}
}

/* the relocated "connected to compass time" side comment: its own full-width
   line under the Page Time Motion controls (owner request 2026-07-18) */
#ptapp .connline {
	flex-basis: 100%;
	font-size: .84em;
	margin-top: 0.125rem;
}

/* ================= V2: FULL SCREEN ON EVERY SUBSTANTIAL VISUAL =================
   Owner order 2026-07-20. The toggle button sits IN-FLOW in the same header row the units
   gear uses, so it reserves its own layout slot and can never overlap a sibling control at
   any width or zoom - and it is gold-outlined to match that gear's family. The full-screen
   state itself is applied by one shared helper in prayer-times-heavens.js (fn_section_fullscreen_enter /
   fn_section_fullscreen_exit); nothing here is sticky, and the overlay below exists only while full screen is
   on and Escape or the button removes it. */
#ptapp .rsp-secfs {
	flex: 0 0 auto;
	margin-left: auto; /* pushes the button right when its row has no units gear to do it */
	line-height: 1.2;
	border-color: var(--gold); /* >=3:1 against --surface in both themes (3.18:1 light, 6.48:1 dark),
	   so it meets WCAG 1.4.11 for a control boundary; the glyph keeps the default button text colour */
}

/* Where a units gear already carries the auto margin, the full-screen button rides flush
   after it instead of splitting the free space (the same reasoning as the Map Options rule
   above): one auto margin per row, never two. */
#ptapp .rsp-secgear ~ .rsp-secfs {
	margin-left: 0;
}

/* the two centered headers, the Day time-zone group and secMap's own auto-margin row */
#ptapp .eclhead .rsp-secfs,
#ptapp .mhead .rsp-secfs,
#ptapp .dayhdrctl .rsp-secfs,
#ptapp #secMap > h2 .rsp-secfs {
	margin-left: 0;
}

/* WCAG 2.4.11 hover/focus parity: a keyboard user gets exactly the emphasis a mouse user
   gets, on top of the shared "#ptapp :focus-visible" outline. The fill is the same #ECE5D2
   "#ptapp .btn:hover" gives every other button, so focus and hover are visually identical;
   the dark theme's matching pair is beside the other dark hover fills. Glyph on this fill:
   11.32:1 light (#2C2B22 on #ECE5D2), 9.79:1 dark (#E8E4D6 on #2E3442) - both well past
   WCAG 1.4.3 AA. The gold focus outline sits outside the border on the section surface,
   where it is 3.17:1 light and 6.50:1 dark (WCAG 1.4.11). The fill is the whole difference:
   the border-color half of ".btn:hover" is already this button's resting gold, so stating it
   again here would change nothing. */
#ptapp .rsp-secfs:hover,
#ptapp .rsp-secfs:focus-visible {
	background: #ECE5D2;
}

/* badge variant, used only where the visual has no flex header row at all (the header-less
   year slider). Offset clear of the units gear badge at right 0.4rem so the two never
   overlap. Absolute, not fixed or sticky - it scrolls away with its section. */
#ptapp .rsp-secfs-abs {
	position: absolute;
	top: 0.4rem;
	right: 3.1rem;
	z-index: 5;
	margin-left: 0;
	background: var(--surface);
}

/* the compass had no header row of its own; index.php now gives it this one reserved slot */
#ptapp .fshead {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.25rem;
}

@media screen {
	/* The full-screen state. Applied to the tool's own root, so the visual keeps every
	   control that lives in a sibling element. The theme is respected because --bg and the
	   rest of the palette are custom properties on #ptapp and still inherit into the element
	   while it is in the browser's top layer. */
	/* WCAG 1.4.11: this used to repaint the section to --bg (#FBF8F0 light). Every gold
	   boundary inside the section - the full-screen button's own border, the units gear's
	   border - was designed and measured against the white card surface at 3.17:1, and on the
	   ivory backdrop they all dropped to 2.98:1 at once, in the state where the exit control
	   is the one the reader most needs to find. Keeping --surface holds them at 3.17:1 with a
	   single change; the dark theme was never affected (6.50:1 either way). */
	#ptapp .ptfs-on {
		background: var(--surface);
		overflow: auto;
		padding: 0.75rem;
		box-sizing: border-box;
	}

	/* Fallback for browsers or contexts that refuse requestFullscreen on a non-video element
	   (iOS Safari does). Present only while full screen is on; Escape or the button ends it. */
	#ptapp .ptfs-fallback {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		max-width: none;
		z-index: 9990;
	}

	/* Caps that exist to keep these visuals a sensible size in the page would otherwise mean
	   full screen gained nothing at all, so each is lifted only inside the full-screen state. */
	#ptapp .ptfs-on .viscanvas,
	#ptapp .ptfs-on .orbsvg,
	#ptapp .ptfs-on .ucearth-canvaswrap,
	#ptapp .ptfs-on .uskycanvas {
		max-width: none;
	}

	#ptapp .ptfs-on .uuv-canvas {
		height: 70vh;
		min-height: 24rem;
	}

	/* the relief globe paints a BIGGER bitmap on the full screen (universe-worlds.js asks
	   window.PTFS.fn_fullscreen_size_cap for the size and folds in the display's pixel ratio), so the box may
	   grow with it. The globe is square and height:auto, so capping the width in viewport-
	   height units is what keeps the whole disc on the screen; 85vh stays under the bitmap the
	   module asks for, so the picture is scaled down rather than up on every ordinary screen
	   (that module holds the bitmap to 1600 px so a per-pixel JavaScript renderer cannot be
	   asked for tens of millions of pixels a frame, so a viewport taller than about 1880 CSS
	   pixels does begin to scale it up a little). This rule can
	   only bite because that canvas carries no inline max-width - an inline declaration would
	   outrank it - so do not reintroduce one there. */
	#ptapp .ptfs-on .ucw-canvas {
		width: 100%;
		max-width: 85vh;
	}

	/* The two galaxy diagrams are fixed 640 and 360 px bitmaps drawn once. These caps are their
	   EXACT pixel sizes, so full screen shows them at their true resolution - larger than the
	   26rem the page gives them and with no upscaling at all. */
	#ptapp .ptfs-on .uccos-canvas {
		max-width: 40rem;
	}

	#ptapp .ptfs-on .uccos-canvas-sm {
		max-width: 22.5rem;
	}

	/* the compass dial and the crescent moon disc are emitted with fixed width and height
	   ATTRIBUTES but carry a viewBox, so they are resolution-independent: overriding the
	   attribute in CSS is all that is needed for them to redraw crisply at any size */
	#ptapp .ptfs-on #compassHolder svg {
		width: 100%;
		height: auto;
		max-width: 34rem;
	}

	#ptapp .ptfs-on #crescentBox svg.micon {
		width: 100%;
		height: auto;
		max-width: 20rem;
	}
}

/* ================= V3 ORBIT VIEWER (universe-orbitviewer.js) =================
   All rules are #ptapp-scoped and sized in rem/em. Nothing here is fixed or sticky:
   the viewer's full-screen state is the shared V2 helper's, and it scrolls away with
   its section like every other tool. Colours come from the palette custom properties
   so the dark theme follows automatically; the canvas paints its own sky, which is
   imagery and is deliberately not re-themed (the reader has an Invert colours switch
   inside the tool for printing and for anyone who prefers a light field). */
#ptapp .ucov-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#ptapp .ucov-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

#ptapp .ucov-rowlbl {
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--green);
	min-width: 8rem;
}

#ptapp .ucov-btn {
	font: inherit;
	font-size: .85em;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--ctlline);
	border-radius: 6px;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	min-width: 1.5rem;
	min-height: 1.5rem;
}

#ptapp .ucov-btn:hover,
#ptapp .ucov-btn:focus-visible {
	background: #ECE5D2;
}

/* selected state carries a border AND a filled look, so it is never colour alone */
#ptapp .ucov-btn.on {
	border-color: var(--gold);
	background: #F3E7C6;
	font-weight: 700;
}

#ptapp .ucov-search {
	flex: 1 1 16rem;
	min-width: 0;
	font: inherit;
	padding: 0.375rem 0.5rem;
	color: var(--text);
	background: #FFFFFF;
	border: 1px solid var(--ctlline);
	border-radius: 6px;
}

#ptapp .ucov-results {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	max-height: 9rem;
	overflow-y: auto;
}

#ptapp .ucov-hit {
	text-align: left;
}

#ptapp .ucov-canvashost {
	width: 100%;
}

#ptapp .ucov-canvas {
	display: block;
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: 8px;
	touch-action: none; /* the canvas handles its own drag; the page still scrolls elsewhere */
}

#ptapp .ucov-select {
	font: inherit;
	font-size: .85em;
	padding: 0.25rem 0.375rem;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--ctlline);
	border-radius: 6px;
}

#ptapp .ucov-scrub,
#ptapp .ucov-slider {
	flex: 1 1 12rem;
	min-width: 8rem;
}

#ptapp .ucov-color {
	width: 3rem;
	height: 1.75rem;
	padding: 0;
	border: 1px solid var(--ctlline);
	border-radius: 6px;
	background: var(--surface);
}

#ptapp .ucov-timeout {
	font-variant-numeric: tabular-nums;
}

#ptapp .ucov-disp {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 0.375rem 0.625rem;
}

#ptapp .ucov-dispbody {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-top: 0.5rem;
}

#ptapp .ucov-legend {
	display: block;
	line-height: 1.5;
}

#ptapp .ucov-key {
	display: inline-block;
	width: 1.5rem;
	height: 0.3rem;
	border-radius: 2px;
	margin-right: 0.375rem;
	vertical-align: middle;
}

#ptapp .ucov-key-two { background: #E0A33C; }

#ptapp .ucov-key-pert { background: #54C0FF; }

#ptapp .ucov-key-ring { background: #8894A8; }

#ptapp .ucov-details {
	border-top: 1px solid var(--line);
	padding-top: 0.5rem;
}

#ptapp .ucov-details[hidden] {
	display: none;
}

#ptapp .ucov-dtitle {
	font-weight: 700;
	margin-bottom: 0.25rem;
}

#ptapp .ucov-dl {
	display: grid;
	grid-template-columns: minmax(9rem, max-content) 1fr;
	gap: 0.125rem 0.75rem;
	margin: 0;
	font-size: .9em;
}

#ptapp .ucov-dl dt {
	color: var(--faded);
}

#ptapp .ucov-dl dd {
	margin: 0;
}

/* wylh.css marks every dl with dt::before "Q." and dd::before "A." (its question-and-answer
   lists). This details list is not one, so those site-wide markers are switched off here
   (wylh.css itself is protected; the override lives in this sheet). B4 browser pass. */
#ptapp .ucov-dl dt::before, #ptapp .ucov-dl dd::before {
	content: none;
}

@media print {
	#ptapp .ucov-canvas {
		max-width: 100%;
	}
}

/* ======================================================================
   r123: FORMERLY JS-INJECTED MODULE RULES (CSP compliance, 2026-08-03).
   The live server's Content-Security-Policy has no 'unsafe-inline' for
   styles and refuses even an empty injected <style> element, so every
   module's static rules moved here verbatim from their inject functions
   (now no-ops). Sections are labeled by their source module.
   ====================================================================== */

/* ---- from universe-core.js fn_inject_uc_styles_retired ---- */
.uchelp-btn{cursor:pointer;border:1px solid var(--ctlline);/* r126 contrast wave, WCAG 1.4.11 */border-radius:50%;background:transparent;color:inherit;font:inherit;line-height:1.4;padding:1px 7px;margin-left:6px;}
/* The unscoped rule above loses its padding and margin to the `#ptapp *` reset (id
   specificity), so the "?" rendered as a 10 x 30 px sliver with the glyph clipped (B4
   browser pass). Scoped here: a centred glyph in a box of at least 24 x 24 px
   (WCAG 2.5.8 minimum). */
#ptapp .uchelp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	min-height: 1.5rem;
	aspect-ratio: 1 / 1;   /* the 50% radius reads as a circle, not an oval, at every font size */
	padding: 0.0625rem 0.4375rem;
	margin-left: 0.375rem;
	line-height: 1.4;
	vertical-align: middle;
}
#ptapp .uchelp-glink{display:inline-block;cursor:pointer;border:1px solid #888888;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:0.92em;line-height:1.4;padding:3px 10px;text-align:left;}
#ptapp .uchelp-glink:hover{text-decoration:underline;}
.uc-mt6{margin-top:6px;}
.uc-agebar{height:0.8em;border-radius:0.2em;max-width:24em;}
#ptapp .uctoggle-btn[aria-checked="true"]{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:#9a7522;color:#2a2007;}
#ptapp .uctoggle-radios{display:contents;}

/* ---- from prayer-times-heavens.js fn_mcal_info_style_injector_retired ---- */
#ptapp .mcal-info{cursor:help;font-size:0.75em;color:var(--faded);background:none;border:0;padding:0;vertical-align:super;line-height:1;text-decoration:none;border-radius:50%;}
#ptapp .mcal-info:hover,#ptapp .mcal-info:focus,#ptapp .mcal-info:focus-visible{color:var(--gold);}

/* ---- from prayer-times-heavens.js fn_unit_precision_style_injector_retired ---- */
#ptapp .unit-info{cursor:help;font-size:0.75em;color:var(--faded);background:none;border:0;padding:0;vertical-align:super;line-height:1;text-decoration:none;border-radius:50%;}
#ptapp .unit-info:hover,#ptapp .unit-info:focus-visible{color:var(--text);}
#ptapp .unit-opt:not(.gold):focus-visible,#ptapp .unit-period:not(.gold):focus-visible,#ptapp .unit-measbtn:focus-visible{background:#ECE5D2;border-color:var(--gold);color:var(--text);}
#ptapp .unit-opt.gold:focus-visible,#ptapp .unit-period.gold:focus-visible{filter:brightness(1.06);}
@media screen{#ptapp.theme-dark .unit-opt:not(.gold):focus-visible,#ptapp.theme-dark .unit-period:not(.gold):focus-visible,#ptapp.theme-dark .unit-measbtn:focus-visible{background:#2E3442;}}

/* ---- from universe-universe.js fn_inject_pass_styles_retired ---- */
#ptapp .uuv-pass{margin-top:0.6rem;border:1px solid var(--line);border-radius:0.4em;padding:0.35em 0.7em;background:var(--surface);color:var(--text);}
#ptapp .uuv-pass>summary{cursor:pointer;font-weight:bold;}
#ptapp .uuv-pass-banner{margin:0.5em 0;padding:0.45em 0.65em;border-left:0.3em solid #d9a441;background:rgba(217,164,65,0.12);border-radius:0.25em;}
#ptapp .uuv-pass-banner.uuv-pass-stale{border-left-color:#cc4444;background:rgba(204,68,68,0.12);}
#ptapp .uuv-passrow{border:1px solid var(--line);border-left:0.3em solid #666e7d;border-radius:0.35em;padding:0.45em 0.65em;margin:0.5em 0;}
#ptapp .uuv-passrow.uuv-pv-yes{border-left-color:#3c9a47;}
#ptapp .uuv-passrow.uuv-pv-marg{border-left-color:#d9a441;}
#ptapp .uuv-passrow.uuv-pv-no{opacity:0.85;}
#ptapp .uuv-passgrid{display:flex;flex-wrap:wrap;gap:0.3em 1.4em;margin:0.3em 0;}
#ptapp .uuv-passcell{min-width:10em;}
#ptapp .uuv-pass .uuv-bar{margin:0.4em 0;}
#ptapp .uuv-pass .uctoggle-btn[aria-checked="true"]{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:#9A7522;color:#2A2007;}

/* ---- from universe-universe.js fn_inject_compare_styles_retired ---- */
#ptapp .uuv-cmp{margin-top:0.6rem;border:1px solid var(--line);border-radius:0.4em;padding:0.35em 0.7em;background:var(--surface);color:var(--text);}
#ptapp .uuv-cmp>summary{cursor:pointer;font-weight:bold;}
#ptapp .uuv-cmp .uctoggle-btn[aria-checked="true"]{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:#9a7522;color:#2a2007;}
#ptapp .uuv-cmp-fields{display:flex;flex-wrap:wrap;gap:0.4em 1.2em;margin:0.5em 0;}
#ptapp .uuv-cmp-field{display:flex;flex-direction:column;gap:0.15em;font-size:0.9em;}
#ptapp .uuv-cmp-chart{margin:0.6em 0;max-width:100%;overflow-x:auto;}
#ptapp .uuv-cmp-svg{display:block;width:100%;height:auto;min-width:22em;}
#ptapp .uuv-cmp-out{display:flex;flex-wrap:wrap;gap:0.35em 1.6em;margin:0.4em 0;}
#ptapp .uuv-cmp-out>div{min-width:14em;}
#ptapp .uuv-cmp-prompt{margin:0.5em 0;padding:0.45em 0.65em;border-left:0.3em solid #d9a441;background:rgba(217,164,65,0.12);border-radius:0.25em;}

/* ---- from universe-ephem.js fn_inject_ephem_styles_retired ---- */
#ptapp .uceph-controls{display:flex;flex-wrap:wrap;gap:0.5rem 0.9rem;align-items:flex-end;margin:0 0 0.5rem 0;}
#ptapp .uceph-field{display:flex;flex-direction:column;gap:0.15rem;}
#ptapp .uceph-field label{font-size:0.8em;color:var(--faded);}
#ptapp .uceph-field input,#ptapp .uceph-field select{font:inherit;font-size:0.9em;padding:0.2em 0.35em;color:var(--text);background:var(--surface);border:1px solid var(--ctlline);border-radius:0.25em;}
#ptapp .uceph-field input:focus-visible,#ptapp .uceph-field select:focus-visible{outline:0.125rem solid var(--focusring);outline-offset:0.125rem;}
#ptapp .uceph-actions{flex-direction:row;gap:0.4rem;align-items:center;}
#ptapp .uceph-actions button[aria-disabled="true"]{opacity:0.55;}
#ptapp .uceph-plan{margin:0.25rem 0 0.5rem 0;}
#ptapp .uceph-tablewrap{overflow-x:auto;max-height:32rem;overflow-y:auto;border:1px solid var(--line);border-radius:0.35em;margin:0.5rem 0;}
#ptapp .uceph-tablewrap:focus-visible{outline:0.125rem solid var(--focusring);outline-offset:0.125rem;}
#ptapp .uceph-table{border-collapse:collapse;width:100%;font-size:0.85em;}
#ptapp .uceph-table caption{text-align:left;padding:0.4em 0.5em;color:var(--faded);font-size:0.95em;}
#ptapp .uceph-table th,#ptapp .uceph-table td{padding:0.25em 0.6em;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;}
#ptapp .uceph-table thead th{background:var(--surface2);color:var(--text);text-align:right;font-weight:600;}
#ptapp .uceph-table tbody th{text-align:left;font-weight:400;color:var(--text);}
#ptapp .uceph-notes p{margin:0.35rem 0;}

/* ---- from universe-measure.js fn_inject_measure_styles_retired ---- */
#ptapp .ucms-pick{margin:0 0 0.6rem 0;}
#ptapp .ucms-pickh{font-size:0.9em;font-weight:600;margin:0 0 0.25rem 0;}
#ptapp .ucms-starrow{margin:0.25rem 0 0 0;}
#ptapp .ucms-starrow select{max-width:22rem;}

/* ---- from universe-physics.js fn_inject_physics_styles_retired ---- */
#ptapp .ucphy-info{cursor:help;margin-left:0.25em;font-size:0.8em;color:var(--faded);}
#ptapp .ucphy-info:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:0.2em;}
#ptapp .ucphy-svg{display:block;width:100%;max-width:36rem;height:auto;border:1px solid var(--line);border-radius:8px;background:#10141b;margin:0 0 0.5rem 0;}
#ptapp .ucphy-svg:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
#ptapp .ucphy-legend{display:flex;flex-wrap:wrap;gap:0.15rem 0.9rem;font-size:0.8em;color:var(--faded);margin:0 0 0.4rem 0;}
#ptapp .ucphy-warn{color:var(--gold);font-size:0.85em;margin:0.35rem 0;}

/* ---- from universe-stars.js (T2.6/T2.7 styles) ---- */
#ptapp .ucst-info{cursor:help;color:var(--gold-deep);font-size:0.8em;line-height:1;margin-left:0.15rem;user-select:none;}
#ptapp .ucst-info:focus{outline:2px solid var(--gold);outline-offset:1px;border-radius:50%;}
#ptapp .ucst-plxnum{width:8.5rem;}
#ptapp .ucst-plxsvg{display:block;max-width:100%;height:auto;margin:0.5rem 0;border:1px solid var(--line);border-radius:6px;background:#0d1117;}
#ptapp .ucst-specsvg{display:block;max-width:100%;height:auto;margin:0.5rem 0;border:1px solid var(--line);border-radius:6px;background:#0d1117;}
#ptapp .ucst-specrange{width:min(100%,26rem);vertical-align:middle;}
#ptapp .ucst-specnum{width:8.5rem;}
#ptapp .ucst-swatch{display:inline-block;width:4.5rem;height:4.5rem;border-radius:8px;border:1px solid var(--line);vertical-align:middle;margin-right:0.6rem;}
#ptapp .ucst-swatchwrap{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin:0.5rem 0;}

/* ---- from universe-worlds.js (phase panel styles) ---- */
#ptapp .ucwph-info{cursor:help;color:var(--gold-deep);font-size:0.8em;line-height:1;margin-left:0.15rem;user-select:none;}
#ptapp .ucwph-info:focus{outline:2px solid var(--gold);outline-offset:1px;border-radius:50%;}
#ptapp .ucwph-name{font-size:1.15em;font-weight:600;margin:0.1rem 0 0.35rem;color:#2C2B22;}
#ptapp .ucwph-disc{width:11rem;max-width:100%;height:auto;background:#F4EFE2;border:1px solid #DDD6C3;border-radius:6px;}
#ptapp .ucwph-bar{height:0.55rem;border-radius:0.2rem;max-width:22em;background:#E4DDCA;border:1px solid #DDD6C3;overflow:hidden;margin:0.15rem 0 0.45rem;}
#ptapp .ucwph-barfill{display:block;height:100%;background:#B58A2A;border-radius:0.2rem;}

/* ---- from universe-worlds.js (sun panel styles) ---- */
#ptapp .ucwsun-map{width:24rem;max-width:100%;height:auto;background:#1C1A16;border:1px solid #DDD6C3;border-radius:6px;display:block;}
#ptapp .ucwsun-legend{display:flex;flex-wrap:wrap;gap:0.15rem 0.9rem;margin:0.3rem 0 0.2rem;}
#ptapp .ucwsun-key{display:inline-flex;align-items:center;gap:0.3rem;}
#ptapp .ucwsun-dot{width:0.65rem;height:0.65rem;border-radius:50%;border:1px solid #2C2B22;display:inline-block;}
#ptapp .ucwsun-dot-solar{background:#B58A2A;}
#ptapp .ucwsun-dot-earth{background:#8C1D1D;}
#ptapp .ucwsun-dot-pick{background:#F4EFE2;}
#ptapp .ucwsun-clock{font-size:1.35em;font-weight:600;color:#2C2B22;letter-spacing:0.02em;}
#ptapp .ucwsun-clocklab{font-size:0.85em;color:#6E6A5A;margin-bottom:0.35rem;}
#ptapp .ucwsun-pickrow{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem 0.8rem;margin:0.5rem 0 0.3rem;}
#ptapp .ucwsun-pickrow label{font-size:0.9em;color:#2C2B22;}
#ptapp .ucwsun-range{width:12rem;max-width:100%;}
#ptapp .ucwsun-out{font-variant-numeric:tabular-nums;min-width:5.5em;display:inline-block;}

/* ---- from universe-worlds.js (terrain gazetteer styles) ---- */
#ptapp .ucwt-list{max-height:18rem;overflow-y:auto;border:1px solid #DDD6C3;border-radius:6px;background:#F7F3E9;padding:0.2rem;margin:0.2rem 0 0.4rem;}
#ptapp .ucwt-row{display:block;width:100%;text-align:left;font-size:0.92em;padding:0.2rem 0.4rem;margin:0.05rem 0;background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;color:#2C2B22;}
#ptapp .ucwt-row:hover{background:#EFE7D3;}
#ptapp .ucwt-row:focus{outline:2px solid var(--gold);outline-offset:1px;background:#EFE7D3;}
#ptapp .ucwt-row:focus-visible{outline:2px solid var(--gold);outline-offset:1px;background:#EFE7D3;}
#ptapp .ucwt-row .ucwt-nm{font-weight:600;}
#ptapp .ucwt-row .ucwt-meta{color:#5A5442;font-size:0.9em;}
#ptapp .ucwt-row[aria-current="true"]{background:#E7DCBC;border-color:#B58A2A;}
#ptapp .ucwt-chart{width:100%;max-width:37.5rem;height:auto;background:#F4EFE2;border:1px solid #DDD6C3;border-radius:6px;}
#ptapp .ucwt-num{width:6.5em;margin:0 0.5em 0 0.2em;}
#ptapp .ucwt-fields{display:flex;flex-wrap:wrap;gap:0.3rem 1rem;align-items:center;margin:0.25rem 0;}

/* ---- from universe-orbitviewer.js fn_inject_loading_style ---- */
#ptapp .ucov-btn.ucov-loading{background:#F3E2A8;color:#5A4A12;border-color:#C9A93E;}

/* ======================================================================
   r118: FLIGHT-PANEL RULES PORTED FROM THE SANDBOX BUILD (2026-08-06).
   Source: sandbox commit df02251, which added these 46 lines to this same
   stylesheet immediately above the "#ptapp .uuv-menu" rule. Ported verbatim
   and placed here at the end instead, so nothing above it moves. No selector
   below duplicates or conflicts with anything earlier in this file.
   ====================================================================== */

/* Flight panel (universe-render.js makeOverlayPanel) - the corner readout any space
   visual can host. Deliberately at an edge and capped in width: it states what the view
   is doing without covering what is being looked at. It never takes the pointer, so a
   drag that starts on it still reaches the canvas underneath, and it never takes focus.
   Sized in rem so it scales with the reader's own text size. */
#ptapp .ur-hud {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	max-width: 15rem;
	padding: 0.25rem 0.45rem;
	border: 1px solid rgba(127, 178, 255, 0.28);
	border-radius: 5px;
	background: rgba(4, 7, 13, 0.62);
	color: #e6eefc;
	font-size: 0.82em;
	line-height: 1.45;
}

#ptapp .ur-hud-br { right: 0.5rem; bottom: 0.5rem; }
#ptapp .ur-hud-bl { left: 0.5rem; bottom: 0.5rem; }
#ptapp .ur-hud-tr { right: 0.5rem; top: 0.5rem; }
#ptapp .ur-hud-tl { left: 0.5rem; top: 0.5rem; }

#ptapp .ur-hud-compact {
	max-width: 92%;
	line-height: 1.3;
}

#ptapp .ur-hud-row {
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	white-space: nowrap;
}

#ptapp .ur-hud-k {
	color: #9fb2cc;
}

#ptapp .ur-hud-v {
	color: #e6eefc;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Flight-panel live region: voiced by screen readers, never painted on screen. */
#ptapp .ur-hud-say {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ============================================================================
   PLAIN-LANGUAGE INFO DOT (.ptjinfo) - OP-3, owner order.
   The shared circled-i that follows a "Jargon (Plain Label)" pair in every tool, so a
   reader who learns what the mark means in one place finds the same mark, reachable the
   same way, everywhere else. fn_install_page_tooltips (prayer-times-heavens.js) reveals its title on
   hover AND on focus and wires aria-describedby while it shows.

   A real <button>, not a <sup tabindex="0">: a button carries its own role and accessible
   name, is focusable without an added attribute, and appears in the addressable-element
   list that speech-control software builds from role - which a <sup role="note"> never
   did. The user-agent button chrome is reset here because the page's own button reset sets
   only font and cursor, so without this the dot would paint as a grey rectangle on the
   baseline instead of a superscript circled-i.

   These rules live in the stylesheet, never injected from JavaScript: the live
   Content-Security-Policy has no 'unsafe-inline' for styles and blocks an injected <style>
   outright. The resting colour is the deep gold the other info dots use; hover and both
   focus states share one emphasis, so a keyboard reader gets exactly what a mouse reader
   gets (WCAG 1.4.13 / 2.4.7), and colour is never the only cue - the ring and the tooltip
   both appear on focus too.
   ============================================================================ */
#ptapp .ptjinfo {
	cursor: help;
	color: var(--gold-deep);
	font-size: 0.8em;
	line-height: 1;
	margin-left: 0.15rem;
	background: none;
	border: 0;
	padding: 0;
	vertical-align: super;
	text-decoration: none;
	border-radius: 50%;
	user-select: none;
}
#ptapp .ptjinfo:hover,
#ptapp .ptjinfo:focus,
#ptapp .ptjinfo:focus-visible {
	color: var(--text);
}
#ptapp .ptjinfo:focus {
	outline: 0.125rem solid var(--focusring);
	outline-offset: 0.0625rem;
}

/* ============================================================================
   r126 CONTRAST WAVE (SC 1.4.3 / 1.4.11) + the Composition tool's screen-reader
   region. Measured by the sandbox browser check of 2026-08-13 (703 standards
   failures); every value here verified against the WCAG 2.2 formulas before
   shipping. Appended as one block so the cascade order is explicit.
   ============================================================================ */

/* The screen-reader-only announcement region in the Composition tool used an inline
   style attribute, which the live Content-Security-Policy blocks - so the "hidden"
   text painted visibly on the live site. The visually-hidden pattern now lives here;
   universe-chem.js emits the class alone. */
#ptapp .ucchem-srsay {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The Finder Chart's title field was a classless input - the browser's white fill
   survived into the dark theme, where the dark placeholder ink measured 2.68:1 on it
   (SC 1.4.3). The theme tokens resolve per theme. */
#ptapp .uchart-titleinput {
	font: inherit;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--ctlline);
	border-radius: 6px;
	padding: 0.375rem 0.5rem;
}

/* Placeholder ink, both themes: the browser default #757575 measured 3.20:1 on the
   dark input fills and 4.01:1 on the light surface2 fills (SC 1.4.3). --faded passes
   on every input fill this app paints: 5.52:1 worst case light, 5.50:1 worst dark. */
#ptapp input::placeholder,
#ptapp textarea::placeholder {
	color: var(--faded);
	opacity: 1;
}

@media screen {
	/* Cycle-bar buttons: the light rule's dark-brown ink (#2A2007) survived into the
	   dark theme on a darkened fill - 1.13:1 (SC 1.4.3). */
	#ptapp.theme-dark .cycseg, #ptapp.theme-dark .cycarrow {
		color: var(--text);
	}

	/* The Orbit Viewer's selected switch keeps its light-gold fill in the dark theme,
	   so it keeps the dark ink too - the inherited dark-theme text ink measured 1.03:1
	   on that gold (SC 1.4.3). Same ink the other gold-selected controls use. */
	#ptapp.theme-dark .ucov-btn.ucov-switch.on {
		color: #2A2007;
	}

	/* The Orbit Viewer search field hardcodes a white background the dark theme never
	   overrode - dark ink rules then painted light text on white (SC 1.4.3). */
	#ptapp.theme-dark .ucov-search {
		background: #242833;
	}

	/* Dark-theme inks for the svg text fills the r126 wave darkened for light-theme
	   contrast (same pattern as the rows above this block). */
	#ptapp.theme-dark svg text[fill="#63604F"] {
		fill: #ABA48E;
	}
	#ptapp.theme-dark svg text[fill="#7A5E15"] {
		fill: #D9B054;
	}
	#ptapp.theme-dark svg text[fill="#77653A"] {
		fill: #C4B078;
	}

	/* THE COMPASS FACE IS CREAM IN BOTH THEMES (#FAF7EE painted circle), so the
	   generic dark-theme svg ink brightening above and earlier in this sheet is WRONG
	   inside it - a brightened ink on the cream face measured 2.50:1 and worse
	   (SC 1.4.3). These rules pin every compass text ink to its light-theme value,
	   which is what the cream face needs in both themes. Placed after the generic
	   rules so they win. */
	/* (the N/E/S/W letters sit decisively OUTSIDE the cream face since the r126 second pass,
	   so the generic #6E6A5A dark brightening above is correct for them - no pin) */
	#ptapp.theme-dark #compassHolder svg text[fill="#63604F"] {
		fill: #63604F;
	}
	#ptapp.theme-dark #compassHolder svg text[fill="#7A5E15"] {
		fill: #7A5E15;
	}
	#ptapp.theme-dark #compassHolder svg text[fill="#4A6B96"] {
		fill: #4A6B96;
	}
	#ptapp.theme-dark #compassHolder svg text[fill="#4A5B77"] {
		fill: #4A5B77;
	}
}