#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: #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);
}

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

#ptapp :focus-visible {
	outline: 0.125rem solid var(--gold);
	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 .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 {
	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;
}

#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 #D8CFA8;
	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: 2px solid var(--gold-deep);
	outline-offset: 1px;
}
#ptapp .ci-inst {
	cursor: pointer;
	border-bottom: 1px dashed #C9B57A;
}
#ptapp .ci-inst:hover {
	color: var(--gold-deep);
}
#ptapp .ci-inst:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 1px;
	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;
}

#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(--line);
	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%;
}

#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;
}

#ptapp .seasonNav:hover,
#ptapp .seasonNav:focus-visible {
	color: var(--green);
	outline: none;
	text-decoration: underline;
}

@media (max-width: 40em) {
	#ptapp #yearBox {
		column-gap: 0.75rem;
	}
	#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(--line);
	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;
}

#ptapp .sw-z1 {
	background: #E3B23C;
	color: var(--text);
}

#ptapp .sw-z2 {
	background: #4C9A57;
	color: var(--text);
}

#ptapp .sw-z3 {
	background: #CBD3E0;
	border: 1px solid #AAB4C4;
	color: var(--text);
}

#ptapp .sw-zu {
	background: #EBDCA8;
	border: 1px solid #C9A93E;
	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 #DDD6C3;
	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: #9DBE93;
	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 #DDD6C3;
	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: 2px solid var(--gold-deep);
	outline-offset: 1px;
}


@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: #8A6A1D;
	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;
}

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

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

#ptapp .sunhandle:focus-visible circle:nth-child(2) {
	stroke-width: 3.5;
}

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

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

#ptapp .moonhandle:focus-visible circle:nth-child(2) {
	stroke-width: 3.5;
}

/* 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);
}

#ptapp .topbtn {
	position: fixed;
	right: 1.125rem;
	bottom: 1.125rem;
	z-index: 60;
	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;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

#ptapp .topbtn.show {
	opacity: .92;
	pointer-events: auto;
}

#ptapp .topbtn.show:hover {
	opacity: 1;
}

@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(--line);
	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(--line);
	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(--line);
	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;
}

#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(--line);
	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: 2px solid var(--gold-deep);
	outline-offset: 1px;
}

#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(--line);
	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(--line);
	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: 2px solid var(--gold-deep);
	outline-offset: 1px;
}

#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(--line);
	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: 2px solid var(--gold);
	outline-offset: 2px;
}

#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: 2px solid var(--gold);
	outline-offset: 2px;
}

#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; ptTooltips 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: 2px solid var(--gold);
	outline-offset: 1px;
	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;
}

@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: #6E6A5A;
}

#ptapp .ucw-v {
	color: #2C2B22;
	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 #B58A2A;
	outline-offset: 2px;
}

#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;
}

#ptapp .ucearth-layerbtn {
	font-size: 0.85em;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--line);
	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;
}

#ptapp .ucearth-layerbtn:focus-visible {
	outline: 2px solid #7fd0ff;
	outline-offset: 2px;
}

#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;
}

#ptapp .ucearth-canvas:focus-visible {
	outline: 2px solid #7fd0ff;
	outline-offset: 2px;
}

#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 #4a5a68;
	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: 2px solid var(--gold);
	outline-offset: 1px;
}

#ptapp .ucsb-btn {
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--line);
	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: 2px solid var(--gold);
	outline-offset: 1px;
}

#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: 2px solid var(--gold);
	outline-offset: 1px;
}

#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: 2px solid var(--gold);
	outline-offset: -2px;
}

#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: 2px solid var(--gold);
	outline-offset: 1px;
}

#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: 2px solid var(--gold);
	outline-offset: 1px;
}

#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(--line);
	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: 2px solid var(--gold-deep);
	outline-offset: 2px;
}

#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 #38456b;
	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;
}

#ptapp .uccos-ljump:focus-visible {
	outline: 2px solid #5a78c8;
	outline-offset: 2px;
	border-radius: 2px;
}

#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(--line);
	border-radius: 6px;
	padding: 0.25rem 0.4rem;
	max-width: 10rem;
}

#ptapp .ucphy-field input:focus-visible,
#ptapp .ucphy-field select:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

#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(--line);
	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: 2px solid var(--gold);
	outline-offset: 1px;
}

#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: 2px solid var(--gold);
	outline-offset: 2px;
}

#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(--line);
	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);
}

#ptapp .ucchem-tab:focus-visible {
	outline: 2px solid var(--moon);
	outline-offset: 1px;
}

#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);
}

#ptapp .ucchem-el:focus-visible {
	outline: 2px solid var(--moon);
	outline-offset: 1px;
}

#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 rgba(201, 181, 122, 0.45);
	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: #c9b57a;
	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: 2px solid #c9b57a;
	outline-offset: 2px;
}

#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;
	border: 1px solid rgba(201, 181, 122, 0.45);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.25);
	color: inherit;
}

#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: #c9b57a;
	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: #c9b57a;
	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;
	opacity: 0.75;
}

#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;
}

#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(--line);
	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(--line);
	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(--line);
	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(--line);
	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 ================= */
/* Every white bar gets a small gear button in its top-right corner (injected by the
   JS at boot); the right padding keeps bar content from sitting under the gear. */
#ptapp .bar {
	position: relative;
	padding-right: 2.75rem;
}

/* The bar's panel-opener gear is an absolute badge pinned to the bar's TOP-RIGHT CORNER -
   the SAME position on every white bar, no matter how many rows the bar wraps to (owner
   request 2026-07-18: it must be top-right and consistent, not drift to the bottom-right on
   tall wrapping bars). The bar is position:relative with a reserved padding-right (above) so
   the gear never overlaps the bar's content. (An in-flow gear was tried in r90 but landed at
   the bottom of wrapped bars like Set My Location / Set Time - reverted here.) */
#ptapp .rsp-gear {
	position: absolute;
	top: 0.25rem;
	right: 0.375rem;
	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 */
}

/* inside the Day arc's time-zone button group the gear just joins the group at the right,
   so it keeps the group's own spacing rather than pushing off on its own auto margin */
#ptapp .tzswitch .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;
}

/* absolute top-right badge variant, used only for sections with no flex header row to host
   the gear in-flow (the <details> summaries, whose disclosure triangle forbids display:flex,
   and the header-less year slider) - these have no sibling control to overlap, so a badge is
   safe. The host section is made the positioning anchor via .has-secgear. */
#ptapp .has-secgear {
	position: relative;
}

#ptapp .rsp-secgear-abs {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	z-index: 5;
	margin-left: 0;
	background: var(--surface);
}

#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;
}

#ptapp .rsp-tstitle:focus {
	outline: none;
}

#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: #6B7488;  /* WCAG 1.4.11: control border >=3:1 vs the dark control fill #242833 */
		--text: #E8E4D6;
		--faded: #A49E8C;
		--gold: #C99C33;
		--gold-deep: #D9B054;
		--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 {
		background: #242833;
	}

	/* hover fills that hardcode the light parchment #ECE5D2 */
	#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 {
		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: #3E5C46;
		color: #CFE5D4;
	}

	#ptapp.theme-dark .navlbl-btn {
		background: #2A2F3B;
		border-color: #3A3F4D;
		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(--line);
	border-radius: 9px;
	padding: 0.5rem 1.25rem;
	min-width: min(22rem, 100%);
	max-width: 100%;
	font-weight: 600;
}

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

#ptapp .ucgate-btn:focus-visible {
	outline: 0.125rem solid var(--gold-deep);
	outline-offset: 2px;
}

#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(--gold-deep);
	outline-offset: 2px;
}

#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);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 0.5rem 0.75rem;
	margin: 0.375rem 0;
}

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

#ptapp .ucgate2-opt:focus-visible {
	outline: 0.125rem solid var(--gold-deep);
	outline-offset: 2px;
}

#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(--gold-deep);
	outline-offset: 2px;
}

#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;
}