/**
 * Pocket Elmer
 *
 * Everything is scoped under .pe-app and resets aggressively, because this has
 * to look identical dropped into any theme. Designed at 390px first.
 *
 * @package KCG\PocketElmer
 */

/* =====================================================================
 * Tokens
 * ================================================================== */

.pe-app{
	/* Probe. The boot watchdog reads this to tell "the stylesheet is
	   missing" from "the script never ran" — an optimizer that strips
	   "unused" CSS cannot see classes this app adds at runtime. */
	--pe-css-loaded:  1;
	--pe-bg:          #f4f7fb;
	--pe-surface:     #ffffff;
	--pe-surface-alt: #eef3f9;
	--pe-ink:         #0d1b2e;
	--pe-ink-soft:    #4a5b73;
	/* 4.83:1 on the app background, 5.19:1 on white. The old #7d8da4 was
	   3.14:1 and 3.38:1 — below AA everywhere it was used, which was the
	   nav labels, every section title and most meta text. */
	--pe-ink-faint:   #5f6e84;
	--pe-line:        #dde5ef;
	--pe-line-soft:   #eaf0f7;

	--pe-navy:        #10284a;
	--pe-navy-deep:   #071a33;
	--pe-signal:      #f59e0b;
	--pe-signal-deep: #d97e06;
	--pe-cyan:        #0891b2;

	/*
	 * The link and heading colours, dark enough to READ. --pe-cyan and
	 * --pe-navy stay as they are for borders, bars and fills; as text they
	 * were 3.3:1 and (in night mode) invisible against their own background.
	 */
	--pe-link:        #0a7290;
	--pe-ink-strong:  #10284a;

	/* Vivid, for fills, bars and dots — no text sits on these. */
	--pe-good:        #0f9d64;
	--pe-good-soft:   #e6f7f0;
	--pe-fair:        #d98315;
	--pe-fair-soft:   #fdf3e3;
	--pe-poor:        #d9542b;
	--pe-poor-soft:   #fdeee8;
	--pe-closed:      #8798ae;
	--pe-closed-soft: #eef2f7;

	/*
	 * The same four meanings, dark enough to be READ. The vivid versions above
	 * are between 2.6:1 and 3.5:1 on the surfaces they were used as text on —
	 * all below AA. These clear 4.5:1 on every light surface in the app,
	 * including the soft tinted pills they sit inside.
	 */
	--pe-good-text:   #0a7d4e;
	--pe-fair-text:   #94560a;
	--pe-poor-text:   #b03f1c;
	--pe-closed-text: #5f6e84;

	--pe-radius:      16px;
	--pe-radius-sm:   10px;
	--pe-radius-lg:   24px;

	--pe-shadow:      0 1px 2px rgba(13, 27, 46, .04), 0 8px 24px rgba(13, 27, 46, .06);
	--pe-shadow-lift: 0 2px 4px rgba(13, 27, 46, .06), 0 16px 40px rgba(13, 27, 46, .12);

	--pe-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pe-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	position: relative;
	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0;
	background: var(--pe-bg);
	border-radius: var(--pe-radius-lg);
	color: var(--pe-ink);
	font-family: var(--pe-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow: visible;
	isolation: isolate;
}

.pe-app *,
.pe-app *::before,
.pe-app *::after{
	box-sizing: border-box;
}

/*
 * Defensive resets.
 *
 * This plugin has to look identical dropped into any theme, and themes
 * routinely style `button` and `input` globally — sometimes with !important.
 * The declarations a theme is most likely to clobber are forced here, and only
 * those. Everything else stays at normal specificity so the styles below can
 * do their job without a fight.
 */
.pe-app,
.pe-app *{
	font-family: var(--pe-font) !important;
}

.pe-app .pe-mono,
.pe-app .pe-header__mark,
.pe-app .pe-chip--id,
.pe-app .pe-why__value,
.pe-app .pe-ref__key,
.pe-app .pe-phon__call,
.pe-app .pe-phon__char,
.pe-app .pe-grid__value,
.pe-app .pe-map__range,
.pe-app .pe-freq__input{
	font-family: var(--pe-mono) !important;
}

/*
 * Only the declarations a theme is likely to force with !important are forced
 * back here. The Theme armor block further down re-asserts each component's own
 * surface at the same weight.
 */
.pe-app button,
.pe-app input{
	margin: 0 !important;
	border-style: none !important;
	border-width: 0 !important;
	background-image: none !important;
	box-shadow: none !important;
	font-style: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
	min-height: 0 !important;
	min-width: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.pe-app button{
	background-color: transparent !important;
	color: inherit !important;
	text-align: left !important;
}

/*
 * :where() carries zero specificity, so these normal-weight resets sit at the
 * same level as a bare element selector and every .pe-* component class below
 * wins on source order. Without it the reset would out-specify our own padding
 * and border-radius.
 */
.pe-app.pe-app :where(button){
	padding: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	width: auto;
	height: auto;
	cursor: pointer;
	opacity: 1;
	transform: none;
}

.pe-app.pe-app :where(input){
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: normal;
	height: auto;
}

.pe-app img,
.pe-app svg{
	max-width: 100%;
	height: auto;
}

.pe-app.pe-app :where(p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
figure,
blockquote){
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-align: left;
	border: 0 none;
	background: none;
	list-style: none;
	text-transform: none;
	letter-spacing: normal;
}

.pe-app details summary::-webkit-details-marker{
	display: none;
}

/* =====================================================================
 * Boot + error states
 * ================================================================== */

.pe-app .pe-boot{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-height: 340px;
	padding: 48px 24px;
}

.pe-app .pe-boot__pulse{
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 36px;
}

.pe-app .pe-boot__pulse span{
	display: block;
	width: 6px;
	height: 12px;
	background: linear-gradient(180deg, var(--pe-cyan), var(--pe-navy));
	border-radius: 3px;
	animation: pe-pulse 1.1s ease-in-out infinite;
}

.pe-app .pe-boot__pulse span:nth-child(2){ animation-delay: .15s; }
.pe-app .pe-boot__pulse span:nth-child(3){ animation-delay: .3s; }

@keyframes pe-pulse {
	0%, 100% { height: 12px; opacity: .5; }
	50%      { height: 34px; opacity: 1; }
}

.pe-app .pe-boot__text{
	color: var(--pe-ink-faint);
	font-size: 15px;
	letter-spacing: .01em;
}

.pe-app .pe-noscript,
.pe-app .pe-error{
	padding: 40px 28px;
	text-align: center;
}

.pe-app .pe-noscript h3,
.pe-app .pe-error h3{
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 700;
}

.pe-app .pe-noscript p,
.pe-app .pe-error p{
	margin-bottom: 20px;
	color: var(--pe-ink-soft);
}

/* =====================================================================
 * Header
 * ================================================================== */

.pe-app .pe-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: linear-gradient(135deg, var(--pe-navy-deep) 0%, var(--pe-navy) 55%, #1a3f6e 100%);
	color: #fff;
}

.pe-app .pe-header__brand{
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.pe-app .pe-header__mark{
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--pe-signal) 0 22%, transparent 23%);
}

.pe-app .pe-header__mark::before,
.pe-app .pe-header__mark::after{
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid rgba(245, 158, 11, .85);
	border-radius: 50%;
	border-bottom-color: transparent;
	border-left-color: transparent;
	transform: rotate(-45deg);
}

.pe-app .pe-header__mark::after{
	inset: 5px;
	border-width: 2px;
	opacity: .75;
}

.pe-app .pe-header__name{
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pe-app .pe-header__tools{
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}

.pe-app .pe-chip{
	flex: 0 0 auto;
	padding: 7px 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background .18s ease, border-color .18s ease;
}

.pe-app .pe-chip:hover{
	background: rgba(255, 255, 255, .16);
}

.pe-app .pe-chip--id{
	font-family: var(--pe-mono);
	font-size: 12px;
	letter-spacing: .04em;
}

/* =====================================================================
 * Layout
 * ================================================================== */

.pe-app .pe-main{
	padding: 20px 16px 8px;
}

.pe-app .pe-view{
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pe-app .pe-section__title{
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-section__lede{
	margin: -6px 0 14px;
	color: var(--pe-ink-soft);
	font-size: 14.5px;
}

.pe-app .pe-intro__title{
	font-size: clamp(22px, 5.5vw, 30px);
	font-weight: 750;
	letter-spacing: -.02em;
	line-height: 1.18;
}

.pe-app .pe-intro__text{
	margin-top: 8px;
	color: var(--pe-ink-soft);
	font-size: 15.5px;
}

.pe-app .pe-empty{
	padding: 20px;
	border: 1px dashed var(--pe-line);
	border-radius: var(--pe-radius);
	color: var(--pe-ink-faint);
	font-size: 14.5px;
	text-align: center;
}

/* =====================================================================
 * The verdict — the most important element in the app
 * ================================================================== */

.pe-app .pe-verdict{
	position: relative;
	padding: 26px 22px 24px;
	border-radius: var(--pe-radius-lg);
	background: var(--pe-surface);
	box-shadow: var(--pe-shadow);
	overflow: hidden;
}

.pe-app .pe-verdict::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--pe-closed);
}

.pe-app .pe-verdict::after{
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	opacity: .07;
	background: var(--pe-closed);
	pointer-events: none;
}

.pe-app .pe-verdict--good::before,
.pe-app .pe-verdict--good::after{ background: var(--pe-good); }
.pe-app .pe-verdict--fair::before,
.pe-app .pe-verdict--fair::after{ background: var(--pe-fair); }
.pe-app .pe-verdict--poor::before,
.pe-app .pe-verdict--poor::after{ background: var(--pe-poor); }
.pe-app .pe-verdict--neutral::before,
.pe-app .pe-verdict--neutral::after{ background: var(--pe-cyan); }

.pe-app .pe-verdict__meta{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--pe-ink-faint);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.pe-app .pe-verdict__dot{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pe-good);
	box-shadow: 0 0 0 3px rgba(15, 157, 100, .18);
	animation: pe-blink 2.6s ease-in-out infinite;
}

.pe-app .pe-verdict--fair .pe-verdict__dot{ background: var(--pe-fair); box-shadow: 0 0 0 3px rgba(217, 131, 21, .18); }
.pe-app .pe-verdict--poor .pe-verdict__dot{ background: var(--pe-poor); box-shadow: 0 0 0 3px rgba(217, 84, 43, .18); }
.pe-app .pe-verdict--neutral .pe-verdict__dot{ background: var(--pe-cyan); box-shadow: 0 0 0 3px rgba(8, 145, 178, .18); }

@keyframes pe-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

.pe-app .pe-verdict__text{
	position: relative;
	font-size: clamp(21px, 5.6vw, 31px);
	font-weight: 750;
	letter-spacing: -.025em;
	line-height: 1.17;
	text-wrap: balance;
}

.pe-app .pe-verdict__sub{
	position: relative;
	margin-top: 12px;
	color: var(--pe-ink-soft);
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 58ch;
}

/* =====================================================================
 * Action cards
 * ================================================================== */

.pe-app .pe-actions{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pe-app .pe-action{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	padding: 16px 16px 16px 14px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pe-app .pe-action:hover{
	transform: translateY(-2px);
	border-color: #c9d7e8;
	box-shadow: var(--pe-shadow-lift);
}

.pe-app .pe-action:active{
	transform: translateY(0);
}

.pe-app .pe-action--live{
	border-color: rgba(15, 157, 100, .4);
	background: linear-gradient(180deg, var(--pe-good-soft) 0%, var(--pe-surface) 42%);
}

.pe-app .pe-action__num{
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 8px;
	background: var(--pe-navy);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-action--live .pe-action__num{
	background: var(--pe-good);
}

.pe-app .pe-action__body{
	flex: 1 1 auto;
	min-width: 0;
}

.pe-app .pe-action__title{
	display: block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1.3;
}

.pe-app .pe-live{
	display: table;
	margin-bottom: 6px;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--pe-good);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pe-app .pe-action__text{
	display: block;
	margin-top: 5px;
	color: var(--pe-ink-soft);
	font-size: 14.5px;
	line-height: 1.55;
}

.pe-app .pe-action__go{
	flex: 0 0 auto;
	align-self: center;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--pe-ink-faint);
	border-bottom: 2px solid var(--pe-ink-faint);
	transform: rotate(-45deg);
	transition: transform .18s ease, border-color .18s ease;
}

.pe-app .pe-action:hover .pe-action__go{
	border-color: var(--pe-navy);
	transform: rotate(-45deg) translate(2px, 2px);
}

/* =====================================================================
 * Band meters
 * ================================================================== */

.pe-app .pe-bands{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pe-app .pe-band{
	padding: 15px 16px 14px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
}

.pe-app .pe-band__head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.pe-app .pe-band__id{
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.pe-app .pe-band__name{
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -.012em;
}

.pe-app .pe-band__nick{
	color: var(--pe-ink-faint);
	font-size: 12.5px;
	font-style: italic;
}

.pe-app .pe-band__rating{
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: var(--pe-closed-soft);
	color: var(--pe-closed-text);
}

.pe-app .pe-band--good  .pe-band__rating{ background: var(--pe-good-soft); color: var(--pe-good-text); }
.pe-app .pe-band--fair  .pe-band__rating{ background: var(--pe-fair-soft); color: var(--pe-fair-text); }
.pe-app .pe-band--poor  .pe-band__rating{ background: var(--pe-poor-soft); color: var(--pe-poor-text); }

.pe-app .pe-meter{
	position: relative;
	margin-bottom: 4px;
	height: 7px;
	border-radius: 999px;
	background: var(--pe-surface-alt);
	overflow: hidden;
}

.pe-app .pe-meter__fill{
	height: 100%;
	border-radius: 999px;
	background: var(--pe-closed);
	transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.pe-app .pe-band--good .pe-meter__fill{ background: linear-gradient(90deg, #14b878, var(--pe-good)); }
.pe-app .pe-band--fair .pe-meter__fill{ background: linear-gradient(90deg, #f0ab2e, var(--pe-fair)); }
.pe-app .pe-band--poor .pe-meter__fill{ background: linear-gradient(90deg, #ec7a52, var(--pe-poor)); }

.pe-app .pe-band__reason{
	margin-top: 12px;
	color: var(--pe-ink-soft);
	font-size: 14px;
	line-height: 1.5;
}

.pe-app .pe-band__modes{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
}

.pe-app .pe-tag{
	padding: 2px 8px;
	border: 1px solid var(--pe-line);
	border-radius: 6px;
	background: var(--pe-surface-alt);
	color: var(--pe-ink-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
}

/* Locked bands */

.pe-app .pe-quiet{
	margin-top: 10px;
}

.pe-app .pe-locked{
	margin-top: 10px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface-alt);
	overflow: hidden;
}

.pe-app .pe-locked__summary{
	padding: 13px 16px;
	color: var(--pe-ink-soft);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.pe-app .pe-locked__summary::after{
	content: "";
	float: right;
	width: 7px;
	height: 7px;
	margin-top: 6px;
	border-right: 2px solid var(--pe-ink-faint);
	border-bottom: 2px solid var(--pe-ink-faint);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.pe-app .pe-locked[open] .pe-locked__summary::after{
	transform: rotate(-135deg);
	margin-top: 9px;
}

.pe-app .pe-locked__list{
	padding: 0 16px 12px;
}

.pe-app .pe-locked__row{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--pe-line-soft);
	font-size: 13.5px;
}

.pe-app .pe-locked__band{
	flex: 0 0 auto;
	min-width: 96px;
	font-weight: 650;
}

.pe-app .pe-locked__why{
	flex: 1 1 auto;
	color: var(--pe-ink-faint);
	font-size: 13px;
}

.pe-app .pe-locked__state{
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pe-closed-text);
}

.pe-app .pe-state--good{ color: var(--pe-good-text); }
.pe-app .pe-state--fair{ color: var(--pe-fair-text); }
.pe-app .pe-state--poor{ color: var(--pe-poor-text); }

/* =====================================================================
 * Why — the numbers, behind a toggle
 * ================================================================== */

.pe-app .pe-why{
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	overflow: hidden;
}

.pe-app .pe-why__summary{
	padding: 15px 18px;
	color: var(--pe-ink-strong);
	font-size: 14px;
	font-weight: 650;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.pe-app .pe-why__summary::after{
	content: "";
	float: right;
	width: 7px;
	height: 7px;
	margin-top: 7px;
	border-right: 2px solid var(--pe-navy);
	border-bottom: 2px solid var(--pe-navy);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.pe-app .pe-why[open] .pe-why__summary::after{
	transform: rotate(-135deg);
	margin-top: 10px;
}

.pe-app .pe-why__body{
	padding: 4px 18px 18px;
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-why__grid{
	margin-top: 14px;
}

.pe-app .pe-why__row{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--pe-line-soft);
}

.pe-app .pe-why__label{
	font-size: 14px;
	font-weight: 650;
}

.pe-app .pe-why__value{
	grid-row: 1;
	grid-column: 2;
	font-family: var(--pe-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--pe-ink-strong);
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-why__note{
	grid-column: 1 / -1;
	color: var(--pe-ink-faint);
	font-size: 13px;
}

.pe-app .pe-why__source{
	margin-top: 14px;
	color: var(--pe-ink-faint);
	font-size: 12.5px;
}

.pe-app .pe-why__warn{
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: var(--pe-radius-sm);
	background: var(--pe-fair-soft);
	color: var(--pe-fair-text);
	font-size: 13px;
}

.pe-app .pe-why__prose{
	padding-top: 14px;
	color: var(--pe-ink-soft);
	font-size: 15px;
	line-height: 1.62;
}

/* =====================================================================
 * Cards, rows, lists
 * ================================================================== */

.pe-app .pe-cards{
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.pe-app .pe-card{
	position: relative;
	display: block;
	padding: 18px 40px 18px 18px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: linear-gradient(135deg, var(--pe-surface) 0%, #fbfdff 100%);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pe-app .pe-card:hover{
	transform: translateY(-2px);
	border-color: #c9d7e8;
	box-shadow: var(--pe-shadow-lift);
}

.pe-app .pe-card__title{
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.28;
}

.pe-app .pe-card__sub{
	display: block;
	margin-top: 4px;
	color: var(--pe-ink-soft);
	font-size: 14px;
}

.pe-app .pe-card__go,
.pe-app .pe-row__go{
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-right: 2px solid var(--pe-ink-faint);
	border-bottom: 2px solid var(--pe-ink-faint);
	transform: rotate(-45deg);
	transition: transform .18s ease, border-color .18s ease;
}

.pe-app .pe-card:hover .pe-card__go,
.pe-app .pe-row:hover .pe-row__go{
	border-color: var(--pe-navy);
	transform: rotate(-45deg) translate(2px, 2px);
}

.pe-app .pe-list{
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	overflow: hidden;
}

.pe-app .pe-row{
	position: relative;
	display: block;
	width: 100%;
	padding: 15px 40px 15px 18px;
	border-top: 1px solid var(--pe-line-soft);
	transition: background .16s ease;
}

.pe-app .pe-row:first-child{
	border-top: 0;
}

.pe-app .pe-row:hover{
	background: var(--pe-surface-alt);
}

.pe-app .pe-row__title{
	display: block;
	font-size: 15.5px;
	font-weight: 650;
	letter-spacing: -.01em;
}

.pe-app .pe-row__sub{
	display: block;
	margin-top: 2px;
	color: var(--pe-ink-faint);
	font-size: 13.5px;
}

/* =====================================================================
 * Script detail
 * ================================================================== */

.pe-app .pe-back{
	align-self: flex-start;
	padding: 8px 14px 8px 26px;
	position: relative;
	border-radius: 999px;
	background: var(--pe-surface);
	border: 1px solid var(--pe-line);
	color: var(--pe-ink-soft);
	font-size: 13.5px;
	font-weight: 600;
	transition: background .16s ease, color .16s ease;
}

.pe-app .pe-back::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 12px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.pe-app .pe-back:hover{
	background: var(--pe-navy);
	border-color: var(--pe-navy);
	color: #fff;
}

.pe-app .pe-script__title{
	font-size: clamp(24px, 6.2vw, 34px);
	font-weight: 780;
	letter-spacing: -.028em;
	line-height: 1.13;
	text-wrap: balance;
}

.pe-app .pe-script__sub{
	margin-top: 6px;
	color: var(--pe-link);
	font-size: 15px;
	font-weight: 620;
}

.pe-app .pe-script__when{
	margin-top: 14px;
	padding-left: 14px;
	border-left: 3px solid var(--pe-line);
	color: var(--pe-ink-soft);
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 60ch;
}

.pe-app .pe-script__lines{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pe-app .pe-line__who{
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-line--you .pe-line__who{
	color: var(--pe-signal-deep);
}

.pe-app .pe-line__bubble{
	position: relative;
	padding: 18px 20px;
	border-radius: var(--pe-radius);
	background: var(--pe-surface-alt);
	border: 1px solid var(--pe-line);
}

.pe-app .pe-line--you .pe-line__bubble{
	background: linear-gradient(135deg, #fff8ea 0%, #fffdf8 100%);
	border-color: rgba(245, 158, 11, .34);
	box-shadow: 0 1px 2px rgba(217, 126, 6, .06), 0 10px 28px rgba(217, 126, 6, .09);
}

.pe-app .pe-line__text{
	font-size: clamp(17px, 4.4vw, 20px);
	font-weight: 620;
	line-height: 1.45;
	letter-spacing: -.01em;
	color: var(--pe-ink);
}

.pe-app .pe-line--them .pe-line__text{
	font-weight: 450;
	color: var(--pe-ink-soft);
	font-size: clamp(15px, 3.9vw, 17px);
}

.pe-app .pe-line__note{
	margin-top: 9px;
	padding-left: 14px;
	border-left: 2px solid var(--pe-line);
	color: var(--pe-ink-faint);
	font-size: 14px;
	line-height: 1.55;
}

.pe-app .pe-copy{
	margin-top: 12px;
	padding: 6px 13px;
	border: 1px solid rgba(245, 158, 11, .45);
	border-radius: 999px;
	background: rgba(245, 158, 11, .1);
	color: var(--pe-signal-deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .16s ease, color .16s ease;
}

.pe-app .pe-copy:hover{
	background: var(--pe-signal);
	color: #fff;
	border-color: var(--pe-signal);
}

.pe-app .pe-copy.is-copied{
	background: var(--pe-good);
	border-color: var(--pe-good);
	color: #fff;
}

/* Notes */

.pe-app .pe-note{
	padding: 18px 20px;
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	border: 1px solid var(--pe-line);
	border-left-width: 4px;
}

.pe-app .pe-note--before{ border-left-color: var(--pe-cyan); }
.pe-app .pe-note--callback{ border-left-color: var(--pe-navy); }
.pe-app .pe-note--sideways{ border-left-color: var(--pe-fair); }

.pe-app .pe-note__title{
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-note__text{
	color: var(--pe-ink-soft);
	font-size: 15px;
	line-height: 1.6;
}

.pe-app .pe-note__list li{
	position: relative;
	padding-left: 18px;
	margin-bottom: 7px;
	color: var(--pe-ink-soft);
	font-size: 15px;
	line-height: 1.55;
}

.pe-app .pe-note__list li:last-child{
	margin-bottom: 0;
}

.pe-app .pe-note__list li::before{
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pe-cyan);
}

/* Alternate phrasing */

.pe-app .pe-alt{
	padding: 16px 20px;
	border: 1px dashed var(--pe-line);
	border-radius: var(--pe-radius);
}

.pe-app .pe-alt__title{
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-alt__text{
	font-size: 16.5px;
	font-weight: 600;
}

/* Reference tables */

.pe-app .pe-ref{
	padding: 18px 20px;
	border-radius: var(--pe-radius);
	background: var(--pe-navy);
	color: #fff;
}

.pe-app .pe-ref__title{
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.pe-app .pe-ref__row{
	display: grid;
	grid-template-columns: minmax(90px, 32%) 1fr;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.pe-app .pe-ref__row:first-of-type{
	border-top: 0;
}

.pe-app .pe-ref__key{
	font-family: var(--pe-mono);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pe-signal);
	letter-spacing: .01em;
}

.pe-app .pe-ref__val{
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .88);
}

/* Phonetics block */

.pe-app .pe-phon{
	padding: 22px 20px;
	border-radius: var(--pe-radius-lg);
	background: linear-gradient(135deg, var(--pe-navy-deep) 0%, var(--pe-navy) 60%, #1c4478 100%);
	color: #fff;
}

.pe-app .pe-phon--empty{
	background: var(--pe-surface);
	border: 1px dashed var(--pe-line);
	color: var(--pe-ink-soft);
	text-align: center;
}

.pe-app .pe-phon--empty p{
	margin-bottom: 14px;
	font-size: 15px;
}

.pe-app .pe-phon__call{
	font-family: var(--pe-mono);
	font-size: clamp(28px, 8vw, 42px);
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--pe-signal);
	text-align: center;
}

.pe-app .pe-phon__grid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.pe-app .pe-phon__cell{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 62px;
	padding: 10px 8px;
	border-radius: var(--pe-radius-sm);
	background: rgba(255, 255, 255, .09);
}

.pe-app .pe-phon__char{
	font-family: var(--pe-mono);
	font-size: 18px;
	font-weight: 700;
	color: var(--pe-signal);
}

.pe-app .pe-phon__word{
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .9);
	white-space: nowrap;
}

.pe-app .pe-phon__full{
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	text-align: center;
}

.pe-app .pe-phon__spoken{
	font-size: clamp(16px, 4.4vw, 20px);
	font-weight: 620;
	line-height: 1.4;
}

.pe-app .pe-phon__full .pe-copy{
	border-color: rgba(245, 158, 11, .5);
	background: rgba(245, 158, 11, .16);
	color: var(--pe-signal);
}

/* =====================================================================
 * Frequency check
 * ================================================================== */

.pe-app .pe-freq__field{
	position: relative;
}

.pe-app .pe-freq__input{
	width: 100%;
	padding: 18px 20px;
	border: 2px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	font-family: var(--pe-mono);
	font-size: clamp(18px, 5vw, 24px);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--pe-ink);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.pe-app .pe-freq__input:focus{
	outline: none;
	border-color: var(--pe-cyan);
	box-shadow: 0 0 0 4px rgba(8, 145, 178, .13);
}

.pe-app .pe-freq__input::placeholder{
	color: var(--pe-ink-faint);
	font-weight: 400;
	letter-spacing: 0;
}

.pe-app .pe-freq__result:not(:empty){
	margin-top: 12px;
}

.pe-app .pe-answer{
	padding: 20px;
	border-radius: var(--pe-radius);
	border: 1px solid var(--pe-line);
	background: var(--pe-surface);
	border-left-width: 5px;
}

.pe-app .pe-answer--yes{ border-left-color: var(--pe-good); }
.pe-app .pe-answer--no{ border-left-color: var(--pe-poor); }
.pe-app .pe-answer--maybe{ border-left-color: var(--pe-cyan); }

.pe-app .pe-answer__verdict{
	font-size: clamp(19px, 5vw, 24px);
	font-weight: 750;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.pe-app .pe-answer--yes   .pe-answer__verdict{ color: var(--pe-good-text); }
.pe-app .pe-answer--no    .pe-answer__verdict{ color: var(--pe-poor-text); }
.pe-app .pe-answer--maybe .pe-answer__verdict{ color: var(--pe-link); }

.pe-app .pe-answer__text{
	margin-top: 7px;
	color: var(--pe-ink-soft);
	font-size: 15px;
	line-height: 1.55;
}

.pe-app .pe-answer__facts{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.pe-app .pe-fact{
	flex: 1 1 130px;
	padding: 11px 14px;
	border-radius: var(--pe-radius-sm);
	background: var(--pe-surface-alt);
}

.pe-app .pe-fact__label{
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-fact__value{
	display: block;
	margin-top: 2px;
	font-size: 16px;
	font-weight: 700;
	color: var(--pe-ink-strong);
}

.pe-app .pe-answer__note,
.pe-app .pe-answer__unlock{
	margin-top: 12px;
	padding: 11px 13px;
	border-radius: var(--pe-radius-sm);
	background: var(--pe-fair-soft);
	color: #8a5808;
	font-size: 14px;
	line-height: 1.5;
}

.pe-app .pe-answer__unlock{
	background: var(--pe-surface-alt);
	color: var(--pe-ink-soft);
}

.pe-app .pe-answer__plain{
	margin-top: 12px;
	color: var(--pe-ink-faint);
	font-size: 14px;
	font-style: italic;
	line-height: 1.55;
}

/* =====================================================================
 * Band privilege map
 * ================================================================== */

.pe-app .pe-map{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pe-app .pe-map__row{
	padding: 14px 16px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	opacity: .58;
	transition: opacity .2s ease;
}

.pe-app .pe-map__row.is-mine{
	opacity: 1;
	border-color: #c9d7e8;
}

.pe-app .pe-map__head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 9px;
}

.pe-app .pe-map__name{
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.pe-app .pe-map__range{
	font-family: var(--pe-mono);
	font-size: 11.5px;
	color: var(--pe-ink-faint);
	white-space: nowrap;
}

.pe-app .pe-map__track{
	position: relative;
	height: 22px;
	border-radius: 7px;
	background: repeating-linear-gradient(
		90deg,
		var(--pe-surface-alt) 0 9px,
		#e6ecf4 9px 10px
	);
	overflow: hidden;
}

.pe-app .pe-seg{
	position: absolute;
	top: 3px;
	bottom: 3px;
	border-radius: 4px;
	opacity: .32;
	transition: opacity .2s ease;
}

.pe-app .pe-seg--technician{ background: var(--pe-good); }
.pe-app .pe-seg--general{ background: var(--pe-cyan); }
.pe-app .pe-seg--extra{ background: var(--pe-navy); }

.pe-app .pe-seg.is-mine{
	opacity: 1;
	top: 2px;
	bottom: 2px;
	box-shadow: 0 1px 3px rgba(13, 27, 46, .22);
}

.pe-app .pe-map__plain{
	margin-top: 10px;
	color: var(--pe-ink-faint);
	font-size: 13.5px;
	line-height: 1.5;
}

/* =====================================================================
 * Profile
 * ================================================================== */

.pe-app .pe-summary{
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	overflow: hidden;
}

.pe-app .pe-summary__row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-summary__row:first-child{
	border-top: 0;
}

.pe-app .pe-summary__label{
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 650;
	color: var(--pe-ink-faint);
}

.pe-app .pe-summary__value{
	flex: 1 1 auto;
	text-align: right;
	font-size: 14.5px;
	font-weight: 600;
	word-break: break-word;
}

.pe-app .pe-profile__actions{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* =====================================================================
 * Onboarding
 * ================================================================== */

.pe-app .pe-onboard{
	padding: 24px 18px 40px;
}

.pe-app .pe-onboard__progress{
	display: flex;
	gap: 6px;
	margin-bottom: 26px;
}

.pe-app .pe-onboard__pip{
	flex: 1 1 0;
	height: 4px;
	border-radius: 999px;
	background: var(--pe-line);
	transition: background .3s ease;
}

.pe-app .pe-onboard__pip.is-done{
	background: linear-gradient(90deg, var(--pe-cyan), var(--pe-navy));
}

.pe-app .pe-onboard__welcome{
	margin-bottom: 30px;
	text-align: center;
}

.pe-app .pe-onboard__brand{
	font-size: clamp(30px, 8.5vw, 44px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.05;
	background: linear-gradient(120deg, var(--pe-navy-deep), var(--pe-cyan) 70%, var(--pe-signal));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pe-app .pe-onboard__tagline{
	margin-top: 10px;
	color: var(--pe-ink-soft);
	font-size: 16px;
	max-width: 34ch;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

.pe-app .pe-onboard__q{
	margin-bottom: 20px;
}

.pe-app .pe-onboard__title{
	font-size: clamp(22px, 6vw, 30px);
	font-weight: 760;
	letter-spacing: -.025em;
	line-height: 1.16;
	text-wrap: balance;
}

.pe-app .pe-onboard__sub{
	margin-top: 7px;
	color: var(--pe-ink-soft);
	font-size: 15.5px;
	max-width: 48ch;
}

.pe-app .pe-onboard__body{
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pe-app .pe-choices{
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pe-app .pe-choice{
	display: block;
	width: 100%;
	padding: 16px 18px;
	border: 2px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.pe-app .pe-choice:hover{
	border-color: #b9cbe2;
	transform: translateY(-1px);
}

.pe-app .pe-choice.is-selected{
	border-color: var(--pe-navy);
	background: linear-gradient(135deg, #f2f7fd 0%, var(--pe-surface) 100%);
	box-shadow: 0 2px 4px rgba(16, 40, 74, .06), 0 12px 30px rgba(16, 40, 74, .1);
}

.pe-app .pe-choice__title{
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.012em;
}

.pe-app .pe-choice__sub{
	display: block;
	margin-top: 3px;
	color: var(--pe-ink-faint);
	font-size: 13.5px;
}

.pe-app .pe-group{
	padding-top: 4px;
}

.pe-app .pe-group__title{
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.pe-app .pe-group__hint{
	margin-top: 2px;
	margin-bottom: 10px;
	color: var(--pe-ink-faint);
	font-size: 13px;
}

.pe-app .pe-pills{
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.pe-app .pe-pill{
	padding: 9px 14px;
	border: 1.5px solid var(--pe-line);
	border-radius: 999px;
	background: var(--pe-surface);
	font-size: 13.5px;
	font-weight: 600;
	transition: all .15s ease;
}

.pe-app .pe-pill:hover{
	border-color: #b9cbe2;
}

.pe-app .pe-pill.is-selected{
	border-color: var(--pe-navy);
	background: var(--pe-navy);
	color: #fff;
}

.pe-app .pe-fields{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pe-app .pe-input{
	width: 100%;
	padding: 15px 17px;
	border: 2px solid var(--pe-line);
	border-radius: var(--pe-radius-sm);
	background: var(--pe-surface);
	font-size: 16px;
	font-weight: 600;
	color: var(--pe-ink);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.pe-app .pe-input:focus{
	outline: none;
	border-color: var(--pe-cyan);
	box-shadow: 0 0 0 4px rgba(8, 145, 178, .13);
}

.pe-app .pe-input::placeholder{
	color: var(--pe-ink-faint);
	font-weight: 400;
}

.pe-app .pe-input__note{
	color: var(--pe-ink-faint);
	font-size: 13px;
	line-height: 1.5;
}

.pe-app .pe-input__note.is-good{
	color: var(--pe-good-text);
	font-weight: 600;
}

.pe-app .pe-grid__display{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 18px;
	border-radius: var(--pe-radius);
	background: var(--pe-navy);
	color: #fff;
}

.pe-app .pe-grid__label{
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.pe-app .pe-grid__value{
	flex: 1 1 auto;
	font-family: var(--pe-mono);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--pe-signal);
}

.pe-app .pe-grid__display .pe-copy{
	margin-top: 0;
}

.pe-app .pe-onboard__nav{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
}

/* =====================================================================
 * Buttons
 * ================================================================== */

.pe-app .pe-btn{
	padding: 14px 24px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.005em;
	text-align: center;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.pe-app .pe-btn--primary{
	flex: 1 1 auto;
	background: linear-gradient(135deg, var(--pe-navy) 0%, #1c4478 100%);
	color: #fff;
	box-shadow: 0 2px 4px rgba(16, 40, 74, .16), 0 10px 26px rgba(16, 40, 74, .22);
}

.pe-app .pe-btn--primary:hover:not([disabled]){
	transform: translateY(-1px);
	box-shadow: 0 3px 6px rgba(16, 40, 74, .2), 0 16px 34px rgba(16, 40, 74, .28);
}

.pe-app .pe-btn--primary[disabled]{
	opacity: .38;
	cursor: not-allowed;
	box-shadow: none;
}

.pe-app .pe-btn--ghost{
	border: 1.5px solid var(--pe-line);
	background: var(--pe-surface);
	color: var(--pe-ink-soft);
}

.pe-app .pe-btn--ghost:hover{
	border-color: #b9cbe2;
	color: var(--pe-ink);
}

.pe-app .pe-btn--skip{
	padding: 14px 12px;
	color: var(--pe-ink-faint);
	font-weight: 600;
}

.pe-app .pe-btn--skip:hover{
	color: var(--pe-ink);
}

.pe-app .pe-btn--gps{
	width: 100%;
	border: 2px dashed rgba(8, 145, 178, .45);
	background: rgba(8, 145, 178, .07);
	color: var(--pe-link);
}

.pe-app .pe-btn--gps:hover{
	background: rgba(8, 145, 178, .13);
	border-style: solid;
}

/* =====================================================================
 * Bottom navigation
 * ================================================================== */

.pe-app .pe-nav{
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--pe-line);
	box-shadow: 0 1px 0 rgba(13, 27, 46, .03), 0 6px 18px rgba(13, 27, 46, .05);
}

.pe-app .pe-nav__item{
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 9px 4px 10px;
	margin: 5px 3px;
	border-radius: 12px;
	color: var(--pe-ink-faint);
	transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.pe-app .pe-nav__item.is-active{
	color: var(--pe-navy-deep) !important;
	background: var(--pe-signal) !important;
	box-shadow: 0 1px 2px rgba(217, 126, 6, .25), 0 4px 12px rgba(217, 126, 6, .22);
}

.pe-app .pe-nav__item.is-active .pe-nav__label{
	font-weight: 750;
}

.pe-app .pe-nav__label{
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: -.005em;
}

.pe-app .pe-nav__icon{
	position: relative;
	width: 20px;
	height: 20px;
}

/* Right Now — a signal burst */
.pe-app .pe-nav__icon--now::before{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1px;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: currentColor;
}

.pe-app .pe-nav__icon--now::after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}

/* What Do I Say — a speech bubble */
.pe-app .pe-nav__icon--scripts::before{
	content: "";
	position: absolute;
	top: 2px;
	left: 1px;
	width: 18px;
	height: 13px;
	border: 2px solid currentColor;
	border-radius: 5px;
}

.pe-app .pe-nav__icon--scripts::after{
	content: "";
	position: absolute;
	bottom: 1px;
	left: 5px;
	width: 5px;
	height: 5px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: skewX(-20deg);
}

/* Where Can I Talk — a band stack */
.pe-app .pe-nav__icon--bands::before{
	content: "";
	position: absolute;
	top: 3px;
	left: 1px;
	width: 18px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
	border-radius: 1px;
}

.pe-app .pe-nav__icon--bands::after{
	content: "";
	position: absolute;
	top: 1px;
	left: 12px;
	width: 2px;
	height: 16px;
	background: currentColor;
	border-radius: 1px;
	opacity: .55;
}

/* =====================================================================
 * Theme armor
 *
 * The reset above uses !important to strip whatever the host theme does to
 * `button` and `input`. That would also strip our own styling, so every
 * button-based component re-asserts its surface here at the same weight.
 * This block exists purely so the tool looks identical on any theme.
 * ================================================================== */

.pe-app .pe-chip{
	border: 1px solid rgba(255, 255, 255, .22) !important;
	background: rgba(255, 255, 255, .08) !important;
	color: #fff !important;
}

.pe-app .pe-chip:hover{
	background: rgba(255, 255, 255, .16) !important;
}

/* The appearance buttons carry the shared outline on their wrapper instead of
   one each, so the armor above has to be undone for them specifically — at the
   same weight, or the host theme's reset is not the thing that wins. */
.pe-app .pe-chip--theme{
	border: 0 none !important;
	background: transparent !important;
	color: #fff !important;
}

.pe-app .pe-themeset > .pe-chip--theme + .pe-chip--theme{
	border-left: 1px solid rgba(255, 255, 255, .18) !important;
}

.pe-app .pe-chip--theme:hover{
	background: rgba(255, 255, 255, .16) !important;
}

.pe-app .pe-chip--theme.is-on{
	background: #f2f5fa !important;
	color: var(--pe-navy-deep) !important;
}

.pe-app .pe-chip--theme.is-on:hover{
	background: #fff !important;
}

.pe-app.pe-night .pe-chip--theme{
	color: #93a0b4 !important;
}

.pe-app.pe-night .pe-chip--theme.is-on{
	background: #3a4761 !important;
	color: #f0f4fa !important;
}

.pe-app.pe-night .pe-chip--theme.is-on:hover{
	background: #445377 !important;
}

.pe-app.pe-outdoor .pe-chip--theme.is-on{
	background: #fff !important;
	color: #000 !important;
}

.pe-app .pe-action,
.pe-app .pe-card,
.pe-app .pe-choice,
.pe-app .pe-pill,
.pe-app .pe-back,
.pe-app .pe-btn--ghost{
	background: var(--pe-surface) !important;
	color: var(--pe-ink) !important;
}

.pe-app .pe-action{
	border: 1px solid var(--pe-line) !important;
}

.pe-app .pe-action:hover{
	border-color: #c9d7e8 !important;
	box-shadow: var(--pe-shadow-lift) !important;
}

.pe-app .pe-action--live{
	border-color: rgba(15, 157, 100, .4) !important;
	background: linear-gradient(180deg, var(--pe-good-soft) 0%, var(--pe-surface) 42%) !important;
}

.pe-app .pe-card{
	border: 1px solid var(--pe-line) !important;
	background: linear-gradient(135deg, var(--pe-surface) 0%, #fbfdff 100%) !important;
}

.pe-app .pe-card:hover{
	border-color: #c9d7e8 !important;
	box-shadow: var(--pe-shadow-lift) !important;
}

.pe-app .pe-row{
	background: transparent !important;
	color: var(--pe-ink) !important;
	border-top: 1px solid var(--pe-line-soft) !important;
}

.pe-app .pe-row:first-child{
	border-top: 0 none !important;
}

.pe-app .pe-row:hover{
	background: var(--pe-surface-alt) !important;
}

.pe-app .pe-choice{
	border: 2px solid var(--pe-line) !important;
}

.pe-app .pe-choice:hover{
	border-color: #b9cbe2 !important;
}

.pe-app .pe-choice.is-selected{
	border-color: var(--pe-navy) !important;
	background: linear-gradient(135deg, #f2f7fd 0%, var(--pe-surface) 100%) !important;
	box-shadow: 0 2px 4px rgba(16, 40, 74, .06), 0 12px 30px rgba(16, 40, 74, .1) !important;
}

.pe-app .pe-pill{
	border: 1.5px solid var(--pe-line) !important;
}

.pe-app .pe-pill:hover{
	border-color: #b9cbe2 !important;
}

.pe-app .pe-pill.is-selected{
	border-color: var(--pe-navy) !important;
	background: var(--pe-navy) !important;
	color: #fff !important;
}

.pe-app .pe-back{
	border: 1px solid var(--pe-line) !important;
	color: var(--pe-ink-soft) !important;
}

.pe-app .pe-back:hover{
	background: var(--pe-navy) !important;
	border-color: var(--pe-navy) !important;
	color: #fff !important;
}

.pe-app .pe-copy{
	border: 1px solid rgba(245, 158, 11, .45) !important;
	background: rgba(245, 158, 11, .1) !important;
	color: var(--pe-signal-deep) !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
}

.pe-app .pe-copy:hover{
	background: var(--pe-signal) !important;
	border-color: var(--pe-signal) !important;
	color: #fff !important;
}

.pe-app .pe-copy.is-copied{
	background: var(--pe-good) !important;
	border-color: var(--pe-good) !important;
	color: #fff !important;
}

.pe-app .pe-btn{
	text-align: center !important;
}

.pe-app .pe-btn--primary{
	background: linear-gradient(135deg, var(--pe-navy) 0%, #1c4478 100%) !important;
	color: #fff !important;
	box-shadow: 0 2px 4px rgba(16, 40, 74, .16), 0 10px 26px rgba(16, 40, 74, .22) !important;
}

.pe-app .pe-btn--primary:hover:not([disabled]){
	box-shadow: 0 3px 6px rgba(16, 40, 74, .2), 0 16px 34px rgba(16, 40, 74, .28) !important;
}

.pe-app .pe-btn--primary[disabled]{
	opacity: .38 !important;
	box-shadow: none !important;
}

.pe-app .pe-btn--ghost{
	border: 1.5px solid var(--pe-line) !important;
	color: var(--pe-ink-soft) !important;
}

.pe-app .pe-btn--ghost:hover{
	border-color: #b9cbe2 !important;
	color: var(--pe-ink) !important;
}

.pe-app .pe-btn--skip{
	background: none !important;
	color: var(--pe-ink-faint) !important;
}

.pe-app .pe-btn--gps{
	border: 2px dashed rgba(8, 145, 178, .45) !important;
	background: rgba(8, 145, 178, .07) !important;
	color: var(--pe-link) !important;
}

.pe-app .pe-btn--gps:hover{
	background: rgba(8, 145, 178, .13) !important;
	border-style: solid !important;
}

.pe-app .pe-nav__item{
	background: none !important;
	color: var(--pe-ink-faint) !important;
	text-align: center !important;
}

.pe-app .pe-phon__full .pe-copy{
	border-color: rgba(245, 158, 11, .5) !important;
	background: rgba(245, 158, 11, .16) !important;
	color: var(--pe-signal) !important;
}

.pe-app .pe-freq__input,
.pe-app .pe-input{
	border: 2px solid var(--pe-line) !important;
	background: var(--pe-surface) !important;
	color: var(--pe-ink) !important;
}

.pe-app .pe-freq__input:focus,
.pe-app .pe-input:focus{
	border-color: var(--pe-cyan) !important;
	box-shadow: 0 0 0 4px rgba(8, 145, 178, .13) !important;
}

/* =====================================================================
 * Sun mode — direct sunlight legibility
 * ================================================================== */

.pe-app.pe-outdoor{
	--pe-bg:          #ffffff;
	--pe-surface:     #ffffff;
	--pe-surface-alt: #f0f0f0;
	--pe-ink:         #000000;
	--pe-ink-soft:    #1a1a1a;
	--pe-ink-faint:   #3d3d3d;
	--pe-line:        #000000;
	--pe-line-soft:   #999999;
	--pe-good:        #006b3c;
	--pe-fair:        #8a4b00;
	--pe-poor:        #a01500;
	--pe-closed:      #4a4a4a;
	--pe-shadow:      none;
	--pe-shadow-lift: none;
}

.pe-app.pe-outdoor .pe-band,
.pe-app.pe-outdoor .pe-action,
.pe-app.pe-outdoor .pe-card,
.pe-app.pe-outdoor .pe-list,
.pe-app.pe-outdoor .pe-why,
.pe-app.pe-outdoor .pe-note,
.pe-app.pe-outdoor .pe-answer,
.pe-app.pe-outdoor .pe-map__row,
.pe-app.pe-outdoor .pe-summary,
.pe-app.pe-outdoor .pe-choice,
.pe-app.pe-outdoor .pe-line__bubble{
	border-width: 2px !important;
}

.pe-app.pe-outdoor .pe-verdict__text,
.pe-app.pe-outdoor .pe-band__name,
.pe-app.pe-outdoor .pe-action__title,
.pe-app.pe-outdoor .pe-line__text{
	font-weight: 800;
}

.pe-app.pe-outdoor .pe-verdict__sub,
.pe-app.pe-outdoor .pe-band__reason,
.pe-app.pe-outdoor .pe-action__text,
.pe-app.pe-outdoor .pe-note__text{
	color: #1a1a1a;
	font-weight: 500;
}

.pe-app.pe-outdoor .pe-map__row{
	opacity: 1;
}

.pe-app.pe-outdoor .pe-seg{
	opacity: .25;
}

.pe-app.pe-outdoor .pe-seg.is-mine{
	opacity: 1;
}

/* =====================================================================
 * Desktop
 * ================================================================== */

@media (min-width: 700px){
	.pe-app{
		padding-bottom: 0;
	}

	.pe-app .pe-header{
		padding: 18px 28px;
	}

	.pe-app .pe-header__name{
		font-size: 17px;
	}

	.pe-app .pe-main{
		padding: 28px 28px 36px;
	}

	.pe-app .pe-view{
		gap: 28px;
	}

	.pe-app .pe-verdict{
		padding: 34px 32px 30px;
	}

	.pe-app .pe-onboard{
		padding: 36px 40px 48px;
		max-width: 640px;
		margin: 0 auto;
	}

	.pe-app .pe-cards{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pe-app .pe-nav{
		gap: 6px;
		padding: 0 28px;
	}

	.pe-app .pe-nav__item{
		flex: 0 0 auto;
		flex-direction: row;
		gap: 8px;
		padding: 10px 16px;
		margin: 8px 6px 8px 0;
		border-radius: 999px;
	}

	.pe-app .pe-nav__label{
		font-size: 14px;
		font-weight: 650;
	}
}

@media (min-width: 1000px) {
	/*
	 * Deliberately a single column.
	 *
	 * A two-column version put the short list of actions beside the long list
	 * of bands, and the browser stretched the empty space to match — a wall of
	 * white down the left, with anything that came after squeezed into half the
	 * width. One centred column at a readable measure always looks intentional,
	 * and this is a tool people scan top to bottom anyway.
	 */
	.pe-app .pe-view--now{
		max-width: 820px;
		margin-left: auto;
		margin-right: auto;
	}

	.pe-app .pe-view--script,
	.pe-app .pe-view--profile,
	.pe-app .pe-view--bands,
	.pe-app .pe-view--field{
		max-width: 820px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* =====================================================================
 * Motion preferences
 * ================================================================== */

@media (prefers-reduced-motion: reduce){
	.pe-app *,
.pe-app *::before,
.pe-app *::after{
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* =====================================================================
 * Focus visibility
 * ================================================================== */

.pe-app button:focus-visible,
.pe-app input:focus-visible,
.pe-app summary:focus-visible{
	outline: 3px solid var(--pe-cyan);
	outline-offset: 2px;
	border-radius: 6px;
}

/* =====================================================================
 * Ham Speak — the reference library
 * ================================================================== */

.pe-app .pe-search{
	margin-bottom: -6px;
}

.pe-app .pe-search__input{
	width: 100%;
	padding: 15px 18px;
	border: 2px solid var(--pe-line);
	border-radius: 999px;
	background: var(--pe-surface);
	font-size: 16px;
	font-weight: 600;
	color: var(--pe-ink);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.pe-app .pe-search__input:focus{
	outline: none;
	border-color: var(--pe-cyan);
	box-shadow: 0 0 0 4px rgba(8, 145, 178, .13);
}

.pe-app .pe-search__input::placeholder{
	color: var(--pe-ink-faint);
	font-weight: 400;
}

.pe-app .pe-search__input::-webkit-search-cancel-button{
	-webkit-appearance: none;
	appearance: none;
}

.pe-app .pe-search__count{
	margin-top: 8px;
	padding-left: 18px;
	color: var(--pe-ink-faint);
	font-size: 13px;
	font-weight: 600;
}

.pe-app .pe-terms{
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pe-app .pe-term{
	border-top: 1px solid var(--pe-line-soft);
	transition: background .16s ease;
}

.pe-app .pe-term:first-child{
	border-top: 0 none;
}

.pe-app .pe-term.is-open{
	background: var(--pe-surface-alt);
}

.pe-app .pe-term__head{
	display: grid;
	grid-template-columns: minmax(88px, auto) 1fr auto;
	align-items: baseline;
	gap: 4px 14px;
	width: 100%;
	padding: 14px 18px;
}

.pe-app .pe-term__name{
	font-family: var(--pe-mono) !important;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--pe-ink-strong);
	white-space: nowrap;
}

.pe-app .pe-term.is-open .pe-term__name{
	color: var(--pe-signal-deep);
}

.pe-app .pe-term__short{
	color: var(--pe-ink-soft);
	font-size: 14.5px;
	line-height: 1.45;
}

.pe-app .pe-term__toggle{
	align-self: center;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--pe-ink-faint);
	border-bottom: 2px solid var(--pe-ink-faint);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.pe-app .pe-term.is-open .pe-term__toggle{
	transform: rotate(-135deg);
}

.pe-app .pe-term__body{
	padding: 0 18px 18px;
}

.pe-app .pe-term__long{
	color: var(--pe-ink-soft);
	font-size: 15px;
	line-height: 1.62;
	max-width: 62ch;
}

.pe-app .pe-term__heard{
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 12px;
	padding: 12px 14px;
	border-left: 3px solid var(--pe-signal);
	border-radius: 0 var(--pe-radius-sm) var(--pe-radius-sm) 0;
	background: #fff8ea;
	color: var(--pe-ink);
	font-size: 15px;
	font-weight: 600;
}

.pe-app .pe-term__heardLabel{
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pe-signal-deep);
}

/* Reference term rows sit at a narrow width on desktop for readability. */
@media (min-width: 1000px){
	.pe-app .pe-view--speak{
		max-width: 820px;
	}
}

@media (max-width: 520px){
	.pe-app .pe-term__head{
		grid-template-columns: 1fr auto;
	}

	.pe-app .pe-term__name{
		grid-column: 1;
	}

	.pe-app .pe-term__toggle{
		grid-column: 2;
		grid-row: 1;
	}

	.pe-app .pe-term__short{
		grid-column: 1 / -1;
	}
}

/* Ham Speak nav icon — a reference card with entries on it */
.pe-app .pe-nav__icon--speak::before{
	content: "";
	position: absolute;
	top: 2px;
	left: 1px;
	width: 18px;
	height: 16px;
	border: 2px solid currentColor;
	border-radius: 4px;
}

.pe-app .pe-nav__icon--speak::after{
	content: "";
	position: absolute;
	top: 6px;
	left: 5px;
	width: 6px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	box-shadow: 0 4px 0 currentColor, 4px 4px 0 currentColor;
}

.pe-app.pe-outdoor .pe-term__heard{
	background: #ffffff;
	border-left-width: 4px;
}

/* Ham Speak category filters */

.pe-app .pe-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: -8px;
}

.pe-app .pe-filter{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1.5px solid var(--pe-line) !important;
	border-radius: 999px;
	background: var(--pe-surface) !important;
	color: var(--pe-ink-soft) !important;
	font-size: 13.5px;
	font-weight: 650;
	transition: all .15s ease;
}

.pe-app .pe-filter:hover{
	border-color: #b9cbe2 !important;
	color: var(--pe-ink) !important;
}

.pe-app .pe-filter.is-selected{
	border-color: var(--pe-navy) !important;
	background: var(--pe-navy) !important;
	color: #fff !important;
}

.pe-app .pe-filter__n{
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--pe-surface-alt);
	color: var(--pe-ink-faint);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-filter.is-selected .pe-filter__n{
	background: rgba(255, 255, 255, .2);
	color: #fff;
}


@media (max-width: 460px){
	.pe-app .pe-nav__item{
		padding: 9px 3px 10px;
	}

	.pe-app .pe-nav__label{
		font-size: 10.5px;
		line-height: 1.2;
		text-align: center;
		letter-spacing: -.01em;
	}

	.pe-app .pe-nav__icon{
		width: 18px;
		height: 18px;
	}
}

/* "or" divider between location methods */

.pe-app .pe-or{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0;
	color: var(--pe-ink-faint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.pe-app .pe-or::before,
.pe-app .pe-or::after{
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--pe-line);
}

/* Park finder results */

.pe-app .pe-parks:not(:empty){
	margin-top: 4px;
}

.pe-app .pe-park{
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 13px 16px;
	border-top: 1px solid var(--pe-line-soft) !important;
	background: transparent !important;
	color: var(--pe-ink) !important;
	transition: background .16s ease;
}

.pe-app .pe-park:first-child{
	border-top: 0 none !important;
}

.pe-app .pe-park:hover{
	background: var(--pe-surface-alt) !important;
}

.pe-app .pe-park__body{
	flex: 1 1 auto;
	min-width: 0;
}

.pe-app .pe-park__name{
	display: block;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -.01em;
}

.pe-app .pe-park__meta{
	display: block;
	margin-top: 2px;
	font-family: var(--pe-mono) !important;
	font-size: 12px;
	color: var(--pe-ink-faint);
}

.pe-app .pe-park__dist{
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pe-surface-alt);
	color: var(--pe-ink-soft);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pe-app .pe-btn--wide{
	width: 100%;
}

/* =====================================================================
 * Solar conditions — gauges and the day/night matrix
 * ================================================================== */

.pe-app .pe-gauges{
	display: grid;
	/*
	 * auto-fit rather than a fixed three columns. The app is dropped into
	 * whatever width a page builder column happens to be, which is not the
	 * width of the browser — so a viewport media query is the wrong tool and
	 * was cramming three gauges into a 645px column on a 1400px screen.
	 */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 8px;
}

.pe-app .pe-gauge{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 8px 12px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	text-align: center;
}

.pe-app .pe-gauge__dial{
	position: relative;
	width: 100%;
	max-width: 118px;
	line-height: 0;
}

.pe-app .pe-gauge__svg{
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.pe-app .pe-gauge__track{
	fill: none;
	stroke: var(--pe-surface-alt);
	stroke-width: 9;
	stroke-linecap: round;
}

.pe-app .pe-gauge__fill{
	fill: none;
	stroke-width: 9;
	stroke-linecap: round;
	transition: stroke-dasharray .7s cubic-bezier(.22, 1, .36, 1);
}

.pe-app .pe-gauge__fill--good{ stroke: var(--pe-good); }
.pe-app .pe-gauge__fill--fair{ stroke: var(--pe-fair); }
.pe-app .pe-gauge__fill--poor{ stroke: var(--pe-poor); }

/* The readout sits inside the arc, anchored to the arc's baseline. */
.pe-app .pe-gauge__readout{
	position: absolute;
	left: 50%;
	bottom: 4%;
	transform: translateX(-50%);
	width: 100%;
	line-height: 1;
	text-align: center;
}

.pe-app .pe-gauge__value{
	display: block;
	font-family: var(--pe-mono) !important;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--pe-ink-strong);
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-gauge__label{
	display: block;
	margin-top: 3px;
	font-size: 9.5px;
	font-weight: 750;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
	white-space: nowrap;
}

.pe-app .pe-gauge__verdict{
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--pe-ink-soft);
}

.pe-app .pe-gauge__verdict--good{ color: var(--pe-good-text); }
.pe-app .pe-gauge__verdict--fair{ color: var(--pe-fair-text); }
.pe-app .pe-gauge__verdict--poor{ color: var(--pe-poor-text); }

/* Day / night matrix */

.pe-app .pe-matrix{
	margin-top: 12px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	overflow: hidden;
}

.pe-app .pe-matrix__head,
.pe-app .pe-matrix__row{
	display: grid;
	grid-template-columns: minmax(64px, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
}

.pe-app .pe-matrix__head{
	background: var(--pe-surface-alt);
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-matrix__row{
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-matrix__band{
	font-family: var(--pe-mono) !important;
	font-size: 13px;
	font-weight: 700;
	color: var(--pe-ink-strong);
}

.pe-app .pe-matrix__head .pe-matrix__band{
	font-family: var(--pe-font) !important;
	font-size: 10.5px;
	font-weight: 750;
	color: var(--pe-ink-faint);
}

.pe-app .pe-matrix__cell{
	padding: 4px 6px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: center;
}

.pe-app .pe-matrix__head .pe-matrix__cell{
	padding: 0;
	background: none;
	letter-spacing: .07em;
}

.pe-app .pe-matrix__cell--good{ background: var(--pe-good-soft); color: var(--pe-good-text); }
.pe-app .pe-matrix__cell--fair{ background: var(--pe-fair-soft); color: var(--pe-fair-text); }
.pe-app .pe-matrix__cell--poor{ background: var(--pe-poor-soft); color: var(--pe-poor-text); }
.pe-app .pe-matrix__cell--closed{ background: var(--pe-closed-soft); color: var(--pe-closed-text); }

.pe-app .pe-matrix__note,
.pe-app .pe-solar__credit{
	margin-top: 10px;
	color: var(--pe-ink-faint);
	font-size: 12.5px;
	line-height: 1.5;
}

@media (max-width: 430px){
	.pe-app .pe-gauges{
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.pe-app .pe-gauge{
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 12px 14px;
		text-align: left;
	}

	.pe-app .pe-gauge__dial{
		flex: 0 0 86px;
		width: 86px;
	}

	.pe-app .pe-gauge__value{
		font-size: 18px;
	}

	.pe-app .pe-gauge__label{
		font-size: 8.5px;
	}

	.pe-app .pe-gauge__verdict{
		flex: 1 1 auto;
		margin-top: 0;
		font-size: 12.5px;
	}
}

.pe-app.pe-outdoor .pe-gauge__track{
	stroke: #d8d8d8;
}

/* =====================================================================
 * Field Kit
 * ================================================================== */

.pe-app .pe-fieldgrid{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 20px 22px;
	border-radius: var(--pe-radius-lg);
	background: linear-gradient(135deg, var(--pe-navy-deep) 0%, var(--pe-navy) 60%, #1c4478 100%);
	color: #fff;
}

.pe-app .pe-fieldgrid__main{
	flex: 1 1 auto;
	min-width: 0;
}

.pe-app .pe-fieldgrid__label{
	display: block;
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.pe-app .pe-fieldgrid__value{
	display: block;
	margin-top: 4px;
	font-family: var(--pe-mono) !important;
	font-size: clamp(30px, 9vw, 44px);
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.05;
	color: var(--pe-signal);
}

.pe-app .pe-fieldgrid__place{
	display: block;
	margin-top: 4px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .8);
}

.pe-app .pe-fieldgrid__actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pe-app .pe-fieldgrid__actions .pe-copy{
	margin-top: 0;
	border-color: rgba(245, 158, 11, .5) !important;
	background: rgba(245, 158, 11, .16) !important;
	color: var(--pe-signal) !important;
}

.pe-app .pe-fieldgrid__actions .pe-btn--ghost{
	border-color: rgba(255, 255, 255, .28) !important;
	background: rgba(255, 255, 255, .08) !important;
	color: #fff !important;
}

.pe-app .pe-btn--tiny{
	padding: 8px 14px;
	font-size: 12.5px;
}

/* Sun times */

.pe-app .pe-suns{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
}

.pe-app .pe-sun{
	padding: 13px 10px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	text-align: center;
}

.pe-app .pe-sun__label{
	display: block;
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-sun__value{
	display: block;
	margin-top: 4px;
	font-family: var(--pe-mono) !important;
	font-size: 17px;
	font-weight: 700;
	color: var(--pe-ink-strong);
}

.pe-app .pe-sun__note{
	margin-top: 10px;
	color: var(--pe-ink-soft);
	font-size: 13.5px;
	line-height: 1.55;
}

/* Bearing */

.pe-app .pe-bearing__out:not(:empty){
	margin-top: 10px;
}

.pe-app .pe-bearing__card{
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
}

.pe-app .pe-compass{
	position: relative;
	flex: 0 0 74px;
	width: 74px;
	height: 74px;
	border: 2px solid var(--pe-line);
	border-radius: 50%;
	background: var(--pe-surface-alt);
}

.pe-app .pe-compass__needle{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3px;
	height: 30px;
	margin-left: -1.5px;
	margin-top: -30px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--pe-poor), var(--pe-signal));
	transform-origin: 50% 100%;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.pe-app .pe-compass__n{
	position: absolute;
	top: 3px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9.5px;
	font-weight: 750;
	letter-spacing: .06em;
	color: var(--pe-ink-faint);
}

.pe-app .pe-bearing__nums{
	flex: 1 1 auto;
	min-width: 0;
}

.pe-app .pe-bearing__deg{
	display: block;
	font-family: var(--pe-mono) !important;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--pe-ink-strong);
}

.pe-app .pe-bearing__dist{
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 650;
	color: var(--pe-ink-soft);
}

.pe-app .pe-bearing__hint{
	display: block;
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--pe-ink-faint);
}

/* Contact log */

.pe-app .pe-logform{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
}

.pe-app .pe-logform__row{
	display: flex;
	gap: 8px;
}

.pe-app .pe-logform__row .pe-input{
	flex: 1 1 0;
	min-width: 0;
	padding: 13px 14px;
	font-size: 15px;
}

.pe-app .pe-input--call{
	flex: 2 1 0 !important;
	font-family: var(--pe-mono) !important;
	letter-spacing: .06em;
}

.pe-app .pe-select{
	flex: 1 1 0;
	min-width: 0;
	padding: 13px 14px;
	border: 2px solid var(--pe-line) !important;
	border-radius: var(--pe-radius-sm);
	background: var(--pe-surface) !important;
	color: var(--pe-ink) !important;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--pe-font) !important;
	-webkit-appearance: none;
	appearance: none;
}

.pe-app .pe-logcount{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-logcount__actions{
	display: flex;
	gap: 7px;
}

.pe-app .pe-qso{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-qso:first-child{
	border-top: 0 none;
}

.pe-app .pe-qso__body{
	flex: 1 1 auto;
	min-width: 0;
}

.pe-app .pe-qso__call{
	display: block;
	font-family: var(--pe-mono) !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--pe-ink-strong);
}

.pe-app .pe-qso__meta{
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--pe-ink-faint);
}

.pe-app .pe-qso__del{
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--pe-surface-alt) !important;
	color: var(--pe-ink-faint) !important;
	font-size: 19px;
	line-height: 1;
	text-align: center !important;
	transition: background .16s ease, color .16s ease;
}

.pe-app .pe-qso__del:hover{
	background: var(--pe-poor-soft) !important;
	color: var(--pe-poor-text) !important;
}

/* Install and offline bars */

.pe-app .pe-install{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 14px 16px -6px;
	padding: 14px 16px;
	border: 1px solid rgba(8, 145, 178, .35);
	border-radius: var(--pe-radius);
	background: linear-gradient(135deg, rgba(8, 145, 178, .1) 0%, var(--pe-surface) 70%);
}

.pe-app .pe-install__body{
	flex: 1 1 220px;
	min-width: 0;
}

.pe-app .pe-install__title{
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.pe-app .pe-install__text{
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--pe-ink-soft);
}

.pe-app .pe-install__actions{
	display: flex;
	align-items: center;
	gap: 8px;
}

.pe-app .pe-install__no{
	padding: 8px 10px;
	color: var(--pe-ink-faint) !important;
	font-size: 12.5px;
	font-weight: 600;
}

.pe-app .pe-offline{
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 14px 16px -6px;
	padding: 12px 14px;
	border-radius: var(--pe-radius);
	background: var(--pe-fair-soft);
	color: #8a5808;
	font-size: 13px;
	line-height: 1.5;
}

.pe-app .pe-offline__dot{
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--pe-fair);
}

/* Field Kit nav icon — a map pin */
.pe-app .pe-nav__icon--field::before{
	content: "";
	position: absolute;
	top: 1px;
	left: 50%;
	width: 13px;
	height: 13px;
	margin-left: -6.5px;
	border: 2px solid currentColor;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.pe-app .pe-nav__icon--field::after{
	content: "";
	position: absolute;
	bottom: 1px;
	left: 50%;
	width: 12px;
	height: 3px;
	margin-left: -6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
}

/* Five tabs need short labels on a phone. */
.pe-app .pe-nav__abbr{ display: none; }

@media (max-width: 560px){
	.pe-app .pe-nav__full{ display: none; }
	.pe-app .pe-nav__abbr{ display: inline; }
}

@media (max-width: 430px){
	.pe-app .pe-sun{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		text-align: left;
		padding: 11px 14px;
	}

	.pe-app .pe-sun__value{
		margin-top: 0;
	}

	.pe-app .pe-logform__row{
		flex-wrap: wrap;
	}
}

/*
 * Container queries where the layout genuinely depends on how much room the
 * app has, rather than how big the screen is. Everything below degrades to the
 * wide layout on a browser without support, which is safe.
 */
@supports (container-type: inline-size){
	.pe-app{
		container-type: inline-size;
		container-name: pocketelmer;
	}

	@container pocketelmer (max-width: 620px){
		.pe-app .pe-nav__full{ display: none; }
		.pe-app .pe-nav__abbr{ display: inline; }

		.pe-app .pe-nav__item{
			flex: 1 1 0;
			flex-direction: column;
			gap: 5px;
			padding: 9px 3px 10px;
			margin: 5px 2px;
			border-radius: 12px;
		}

		.pe-app .pe-nav__label{
			font-size: 10.5px;
			line-height: 1.2;
			text-align: center;
		}
	}

	@container pocketelmer (max-width: 460px){
		.pe-app .pe-gauge{
			flex-direction: row;
			align-items: center;
			gap: 14px;
			padding: 12px 14px;
			text-align: left;
		}

		.pe-app .pe-gauge__dial{
			flex: 0 0 86px;
			width: 86px;
		}

		.pe-app .pe-gauge__verdict{
			flex: 1 1 auto;
			margin-top: 0;
		}

		.pe-app .pe-logform__row{ flex-wrap: wrap; }
	}
}

/* =====================================================================
 * Activation map
 * ================================================================== */

.pe-app .pe-mapwrap{
	padding: 10px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: linear-gradient(180deg, #eaf2fb 0%, #dfeaf6 100%);
}

.pe-app .pe-map__svg{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	max-height: 68vh;
	border-radius: var(--pe-radius-sm);
	cursor: grab;
	/* The map handles its own panning and pinching, so the browser must not
	   also try to scroll or zoom the page from gestures started on it. */
	touch-action: none;
	overflow: hidden;
}

.pe-app .pe-map__svg.is-grabbing{
	cursor: grabbing;
}

.pe-app .pe-mapland{
	fill: #fbfdff;
	stroke: #93aecb;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.pe-app .pe-mappath{
	fill: none;
	stroke: #e03131;
	stroke-width: 1.2;
	stroke-opacity: .45;
	stroke-linecap: round;
}

.pe-app .pe-mappath--p2p{
	stroke: var(--pe-good);
	stroke-opacity: .75;
	stroke-width: 1.8;
}

.pe-app .pe-mapdot{
	fill: #e03131;
	stroke: #fff;
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

/* Park-to-park stays green — it is a different kind of contact, not just
   another dot, and losing that would lose real information. */
.pe-app .pe-mapdot--p2p{
	fill: var(--pe-good);
}

.pe-app .pe-maphome{
	fill: #ffd43b;
	stroke: var(--pe-navy-deep);
	stroke-width: 1.8;
	vector-effect: non-scaling-stroke;
}

.pe-app .pe-maplegend{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 12px;
}

.pe-app .pe-maplegend__item{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pe-ink-soft);
}

.pe-app .pe-maplegend__key{
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--pe-line);
}

.pe-app .pe-maplegend__key--home{ background: #ffd43b; }
.pe-app .pe-maplegend__key--dot{  background: #e03131; }
.pe-app .pe-maplegend__key--p2p{  background: var(--pe-good); }

.pe-app .pe-maplegend__spacer{
	flex: 1 1 auto;
}

.pe-app .pe-map__note{
	margin-top: 10px;
	color: var(--pe-ink-faint);
	font-size: 12.5px;
	line-height: 1.5;
}

.pe-app .pe-qso__p2p{
	display: inline-block;
	margin-top: 4px;
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--pe-good-soft);
	color: var(--pe-good-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
}

.pe-app.pe-outdoor .pe-mapwrap{
	background: #ffffff;
}

.pe-app.pe-outdoor .pe-mapland{
	fill: #f0f0f0;
	stroke: #000;
	stroke-width: .2;
}

/* Labelled log fields */

.pe-app .pe-field{
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
}

.pe-app .pe-field__label{
	font-size: 10px;
	font-weight: 750;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pe-app .pe-input--rst{
	text-align: center;
	font-family: var(--pe-mono) !important;
	letter-spacing: .06em;
}

.pe-app .pe-qso__where{
	display: inline-block;
	margin-top: 4px;
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--pe-surface-alt);
	color: var(--pe-ink-soft);
	font-size: 11px;
	font-weight: 650;
}

/* =====================================================================
 * Activations
 * ================================================================== */

.pe-app .pe-actstart{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
	padding: 14px 16px;
	border: 1px dashed rgba(8, 145, 178, .45);
	border-radius: var(--pe-radius);
	background: rgba(8, 145, 178, .06);
}

.pe-app .pe-actstart__body{
	flex: 1 1 200px;
	min-width: 0;
}

.pe-app .pe-actstart__title{
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.pe-app .pe-actstart__text{
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pe-ink-soft);
}

.pe-app .pe-act{
	margin-bottom: 12px;
	padding: 16px 18px;
	border-radius: var(--pe-radius);
	background: linear-gradient(135deg, var(--pe-navy-deep) 0%, var(--pe-navy) 65%, #1c4478 100%);
	color: #fff;
}

.pe-app .pe-act__top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.pe-app .pe-act__label{
	display: block;
	font-size: 10px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.pe-app .pe-act__park{
	display: block;
	margin-top: 2px;
	font-family: var(--pe-mono) !important;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--pe-signal);
}

.pe-app .pe-act .pe-btn--ghost{
	border-color: rgba(255, 255, 255, .28) !important;
	background: rgba(255, 255, 255, .08) !important;
	color: #fff !important;
}

.pe-app .pe-act__count{
	margin-bottom: 9px;
}

.pe-app .pe-act__made{
	display: block;
	font-size: 21px;
	font-weight: 750;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.pe-app .pe-act__left{
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: rgba(255, 255, 255, .78);
}

.pe-app .pe-act__meter{
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	overflow: hidden;
}

.pe-app .pe-act__fill{
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pe-signal), #fbbf4d);
	transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.pe-app .pe-act.is-done .pe-act__fill{
	background: linear-gradient(90deg, #14b878, var(--pe-good));
}

.pe-app .pe-act.is-done .pe-act__made{
	color: #7ee6b6;
}

.pe-app .pe-pastact{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-pastact:first-child{
	border-top: 0 none;
}

.pe-app .pe-pastact__body{
	flex: 1 1 auto;
	min-width: 0;
}

.pe-app .pe-pastact__park{
	display: block;
	font-family: var(--pe-mono) !important;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pe-ink-strong);
}

.pe-app .pe-pastact__meta{
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--pe-ink-faint);
}

.pe-app .pe-input__note.is-warn{
	color: var(--pe-fair-text);
	font-weight: 650;
}

/* =====================================================================
 * Spots
 * ================================================================== */

.pe-app .pe-section--spots .pe-chips{
	margin-top: 0;
	margin-bottom: 10px;
}

.pe-app .pe-spot{
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 12px 16px;
	border-top: 1px solid var(--pe-line-soft) !important;
	background: transparent !important;
	color: var(--pe-ink) !important;
	transition: background .16s ease;
}

.pe-app .pe-spot:first-child{
	border-top: 0 none !important;
}

.pe-app .pe-spot:hover{
	background: var(--pe-surface-alt) !important;
}

.pe-app .pe-spot.is-blocked{
	opacity: .52;
	cursor: default;
}

.pe-app .pe-spot.is-blocked:hover{
	background: transparent !important;
}

.pe-app .pe-spot__freq{
	flex: 0 0 74px;
	text-align: center;
}

.pe-app .pe-spot__mhz{
	display: block;
	font-family: var(--pe-mono) !important;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--pe-ink-strong);
}

.pe-app .pe-spot__band{
	display: block;
	margin-top: 1px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-spot__body{
	flex: 1 1 auto;
	min-width: 0;
}

.pe-app .pe-spot__call{
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--pe-mono) !important;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .04em;
}

.pe-app .pe-spot__mode{
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--pe-surface-alt);
	color: var(--pe-ink-soft);
	font-family: var(--pe-font) !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
}

.pe-app .pe-spot__park{
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--pe-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pe-app .pe-spot__dist{
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--pe-ink-faint);
}

.pe-app .pe-spot__why{
	display: inline-block;
	margin-top: 4px;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--pe-closed-soft);
	color: var(--pe-closed-text);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.pe-app .pe-spot__go{
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--pe-ink-faint);
	border-bottom: 2px solid var(--pe-ink-faint);
	transform: rotate(-45deg);
}

.pe-app .pe-spots__foot{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.pe-app .pe-spots__age{
	font-size: 12px;
	color: var(--pe-ink-faint);
}

@media (max-width: 380px){
	.pe-app .pe-spot__freq{
		flex-basis: 66px;
	}
}

/* Parks near you */

.pe-app .pe-section--near .pe-chips{
	margin-top: 0;
	margin-bottom: 10px;
}

.pe-app .pe-section--near .pe-btn--wide{
	margin-top: 2px;
}

.pe-app .pe-park__dist{
	white-space: nowrap;
}

/* Band privilege map — coloured by what is yours, with a legend */

.pe-app .pe-seg--mine{
	opacity: 1;
	top: 2px;
	bottom: 2px;
	background: var(--pe-good);
	box-shadow: 0 1px 3px rgba(13, 27, 46, .22);
}

.pe-app .pe-seg--locked{
	opacity: 1;
	background: #cbd6e4;
}

.pe-app .pe-bandlegend{
	margin: 0 0 12px;
}

.pe-app .pe-bandkey{
	width: 22px;
	height: 11px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(13, 27, 46, .08);
}

.pe-app .pe-bandkey--mine{       background: var(--pe-good); }
.pe-app .pe-bandkey--locked{     background: #cbd6e4; }
.pe-app .pe-bandkey--technician{ background: var(--pe-good); }
.pe-app .pe-bandkey--general{    background: var(--pe-cyan); }
.pe-app .pe-bandkey--extra{      background: var(--pe-navy); }

.pe-app .pe-map__modes{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
}

.pe-app .pe-map__row:not(.is-mine) .pe-map__track{
	opacity: .8;
}

.pe-app.pe-outdoor .pe-seg--locked{
	background: #d0d0d0;
}

/* =====================================================================
 * My Repeaters
 * ================================================================== */

.pe-app .pe-empty__title{
	margin: 0 0 8px;
	color: var(--pe-ink);
	font-size: 17px;
	font-weight: 750;
}

.pe-app .pe-empty__text{
	margin: 0 0 12px;
	color: var(--pe-ink-soft);
	font-size: 14.5px;
	line-height: 1.6;
	text-align: left;
}

/*
 * The detail and form views are children of .pe-view--rept rather than being
 * the view itself, so they do not inherit its flex gap. Without this every
 * section inside them sits flush against the next one.
 */
.pe-app .pe-reptdetail,
.pe-app .pe-reptform{
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pe-app .pe-reptdetail > .pe-back,
.pe-app .pe-reptform > .pe-back{
	align-self: flex-start;
}

.pe-app .pe-btnrow{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.pe-app .pe-reptdetail > .pe-btnrow,
.pe-app .pe-reptform > .pe-btnrow{
	margin-top: 0;
}

.pe-app .pe-btnrow--split{
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--pe-line);
}

.pe-app .pe-reptbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.pe-app .pe-reptbar .pe-btn{
	flex: 0 0 auto;
}

.pe-app .pe-reptbar__count{
	color: var(--pe-ink-faint);
	font-size: 13px;
	font-weight: 650;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.pe-app .pe-reptlist{
	overflow: hidden;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	box-shadow: var(--pe-shadow);
}

.pe-app .pe-reptrow{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 15px 18px;
	border-top: 1px solid var(--pe-line-soft);
	text-align: left;
	transition: background .14s ease;
}

.pe-app .pe-reptrow:first-child{
	border-top: 0 none;
}

.pe-app .pe-reptrow__main{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pe-app .pe-reptrow__name{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15.5px;
	font-weight: 700;
}

.pe-app .pe-reptrow__star{
	color: var(--pe-signal-deep);
	font-size: 13px;
}

.pe-app .pe-reptrow__meta{
	color: var(--pe-ink-faint);
	font-size: 13px;
}

.pe-app .pe-reptrow__freq{
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.pe-app .pe-reptrow__out{
	font-family: var(--pe-mono);
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-reptrow__shift{
	color: var(--pe-ink-faint);
	font-size: 12px;
	font-weight: 600;
}

.pe-app .pe-reptrow.is-blocked .pe-reptrow__out{
	color: var(--pe-poor-text);
}

/* The programming card */

.pe-app .pe-reptcard{
	padding: 4px 20px 18px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: linear-gradient(135deg, var(--pe-surface) 0%, #fbfdff 100%);
	box-shadow: var(--pe-shadow);
}

.pe-app .pe-reptcard__title{
	margin: 18px 0 4px;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-reptcard__field{
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 4px 16px;
	padding: 13px 0;
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-reptcard__label{
	font-size: 14.5px;
	font-weight: 650;
	color: var(--pe-ink-soft);
}

.pe-app .pe-reptcard__value{
	font-family: var(--pe-mono);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--pe-ink);
}

.pe-app .pe-reptcard__hint{
	grid-column: 1 / -1;
	color: var(--pe-ink-faint);
	font-size: 13px;
	line-height: 1.55;
}

/* Live preview inside the add/edit form */

.pe-app .pe-reptpreview__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.pe-app .pe-reptpreview__grid > div{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 13px 15px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius-sm);
	background: var(--pe-surface);
}

.pe-app .pe-reptpreview__label{
	color: var(--pe-ink-faint);
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pe-app .pe-reptpreview__value{
	font-family: var(--pe-mono);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-reptpreview__band,
.pe-app .pe-reptpreview__note,
.pe-app .pe-reptpreview__idle{
	margin: 10px 0 0;
	color: var(--pe-ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}

.pe-app .pe-reptpreview__warn{
	margin: 10px 0 0;
	padding: 11px 14px;
	border-radius: var(--pe-radius-sm);
	background: var(--pe-poor-soft);
	color: #8a2f13;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.55;
}

/* Form */

.pe-app .pe-formgrid{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pe-app .pe-formfield{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pe-app .pe-formfield__label{
	font-size: 14.5px;
	font-weight: 700;
}

.pe-app .pe-formfield__hint{
	color: var(--pe-ink-faint);
	font-size: 13px;
	line-height: 1.55;
}

.pe-app .pe-pillrow{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pe-app .pe-input--area{
	min-height: 84px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	resize: vertical;
}

.pe-app .pe-input--select{
	font-family: var(--pe-mono);
	appearance: none;
	-webkit-appearance: none;
}

/* Notes with a verdict colour */

.pe-app .pe-note--good{
	border-left-color: var(--pe-good);
	color: var(--pe-ink-soft);
	font-size: 14.5px;
}

.pe-app .pe-note--info{
	border-left-color: var(--pe-cyan);
	color: var(--pe-ink-soft);
	font-size: 14.5px;
}

.pe-app .pe-note--warn{
	border-left-color: var(--pe-poor);
	color: var(--pe-ink-soft);
	font-size: 14.5px;
}

/* Paste-a-list */

.pe-app .pe-import{
	margin-top: 18px;
	padding: 4px 18px 16px;
	border: 1px dashed var(--pe-line);
	border-radius: var(--pe-radius);
}

.pe-app .pe-import__summary{
	padding: 14px 0;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--pe-link);
	list-style: none;
}

.pe-app .pe-import__summary::-webkit-details-marker{
	display: none;
}

.pe-app .pe-import__summary::before{
	content: "+ ";
	font-weight: 800;
}

.pe-app .pe-import[open] .pe-import__summary::before{
	content: "− ";
}

.pe-app .pe-import__lede{
	margin: 0 0 12px;
	color: var(--pe-ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}

.pe-app .pe-import__out{
	margin: 12px 0 0;
	color: var(--pe-poor-text);
	font-size: 13.5px;
	font-weight: 600;
}

/* My Repeaters — the nav icon is a mast throwing a signal */

.pe-app .pe-nav__icon--rept::before{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1px;
	width: 2px;
	height: 12px;
	margin-left: -1px;
	background: currentColor;
	border-radius: 1px;
}

.pe-app .pe-nav__icon--rept::after{
	content: "";
	position: absolute;
	left: 50%;
	top: 1px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-bottom-color: transparent;
	border-left-color: transparent;
	transform: rotate(-45deg);
}

/* Theme armor — these are all buttons, so the reset strips their surface. */

.pe-app .pe-reptrow{
	background: var(--pe-surface) !important;
	color: var(--pe-ink) !important;
}

.pe-app .pe-reptrow:hover{
	background: var(--pe-surface-alt) !important;
}

.pe-app .pe-btn--danger{
	border: 1px solid rgba(217, 84, 43, .35) !important;
	background: var(--pe-poor-soft) !important;
	color: #8a2f13 !important;
	font-weight: 700 !important;
}

.pe-app .pe-btn--danger:hover{
	border-color: var(--pe-poor) !important;
	background: #fbe0d6 !important;
}

.pe-app .pe-input--area,
.pe-app .pe-input--select{
	border: 2px solid var(--pe-line) !important;
	background: var(--pe-surface) !important;
	color: var(--pe-ink) !important;
}

.pe-app.pe-outdoor .pe-reptcard,
.pe-app.pe-outdoor .pe-reptlist{
	border-color: #000 !important;
}

/* =====================================================================
 * Gear reality check
 * ================================================================== */

.pe-app .pe-reality{
	overflow: hidden;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	box-shadow: var(--pe-shadow);
}

.pe-app .pe-reality__row{
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 4px 20px;
	padding: 14px 18px;
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-reality__row:first-child{
	border-top: 0 none;
}

.pe-app .pe-reality__label{
	color: var(--pe-ink-faint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.9;
}

.pe-app .pe-reality__value{
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}

.pe-app .pe-reality__head{
	margin: 22px 0 10px;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-reality__limits{
	margin: 0;
	padding: 0;
	list-style: none;
}

.pe-app .pe-reality__limits li{
	position: relative;
	margin: 0 0 12px;
	padding-left: 20px;
	color: var(--pe-ink-soft);
	font-size: 14.5px;
	line-height: 1.6;
}

.pe-app .pe-reality__limits li::before{
	content: "";
	position: absolute;
	top: 9px;
	left: 2px;
	width: 7px;
	height: 2px;
	background: var(--pe-poor);
	border-radius: 1px;
}

.pe-app .pe-reality__next{
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: var(--pe-radius);
	background: linear-gradient(135deg, var(--pe-navy-deep) 0%, var(--pe-navy) 60%, #1c4478 100%);
	color: #fff;
}

.pe-app .pe-reality__nextlabel{
	color: var(--pe-signal);
	font-size: 11.5px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.pe-app .pe-reality__nexttitle{
	font-size: 17px;
	font-weight: 750;
	line-height: 1.35;
}

.pe-app .pe-reality__nextbody{
	margin: 2px 0 0;
	color: rgba(255, 255, 255, .84);
	font-size: 14.5px;
	line-height: 1.62;
}

@media (max-width: 560px){
	.pe-app .pe-reality__row{
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.pe-app .pe-reality__label{
		line-height: 1.5;
	}
}

.pe-app .pe-intro__fine{
	margin-top: 10px;
	color: var(--pe-ink-faint);
	font-size: 13px;
	line-height: 1.6;
}

/* =====================================================================
 * Repeaters near you
 * ================================================================== */

.pe-app .pe-finder__count{
	margin: 14px 0 10px;
	color: var(--pe-ink-faint);
	font-size: 13px;
	font-weight: 650;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.pe-app .pe-found{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px;
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-found:first-child{
	border-top: 0 none;
}

.pe-app .pe-found__main{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pe-app .pe-found__name{
	font-size: 15.5px;
	font-weight: 700;
}

.pe-app .pe-found__meta{
	color: var(--pe-ink-faint);
	font-size: 13px;
}

.pe-app .pe-found__why{
	margin-top: 4px;
	color: var(--pe-poor-text);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}

.pe-app .pe-found__side{
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.pe-app .pe-found__freq{
	font-family: var(--pe-mono);
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-found__shift{
	color: var(--pe-ink-faint);
	font-size: 12px;
	font-weight: 600;
}

.pe-app .pe-found__saved{
	margin-top: 2px;
	color: var(--pe-good-text);
	font-size: 12px;
	font-weight: 700;
}

/* Not usable by this operator: the frequency is the thing to mute, because
   the row still has to be readable — knowing a machine exists but is out of
   reach is useful information, not noise. */
.pe-app .pe-found.is-blocked .pe-found__freq{
	color: var(--pe-ink-faint);
}

.pe-app .pe-found.is-blocked .pe-found__name{
	color: var(--pe-ink-soft);
}

.pe-app .pe-credit{
	margin: 12px 0 0;
	color: var(--pe-ink-faint);
	font-size: 12.5px;
	line-height: 1.6;
}

.pe-app .pe-credit a{
	color: var(--pe-link);
	text-decoration: underline;
}

@media (max-width: 520px){
	.pe-app .pe-found{
		flex-direction: column;
		gap: 8px;
	}

	.pe-app .pe-found__side{
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}
}

/* =====================================================================
 * Reality check — the summary card on Right Now
 * ================================================================== */

.pe-app .pe-realitycard{
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	padding: 18px 20px;
	border-radius: var(--pe-radius);
	text-align: left;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.pe-app .pe-realitycard__top{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pe-app .pe-realitycard__gear{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-realitycard__reach{
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--pe-ink-soft);
}

.pe-app .pe-realitycard__verdict{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: var(--pe-radius-sm);
	background: linear-gradient(135deg, var(--pe-navy-deep) 0%, var(--pe-navy) 60%, #1c4478 100%);
}

.pe-app .pe-realitycard__label{
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pe-signal);
}

.pe-app .pe-realitycard__title{
	font-size: 16px;
	font-weight: 750;
	line-height: 1.35;
	color: #fff;
}

.pe-app .pe-realitycard__more{
	font-size: 13.5px;
	font-weight: 650;
	color: var(--pe-link);
}

.pe-app .pe-realitycard__more::after{
	content: " ›";
	font-weight: 800;
}

/* Theme armor — it is a button, so the reset strips its surface. */
.pe-app .pe-realitycard{
	border: 1px solid var(--pe-line) !important;
	background: var(--pe-surface) !important;
	color: var(--pe-ink) !important;
}

.pe-app .pe-realitycard:hover{
	border-color: #c9d7e8 !important;
	box-shadow: var(--pe-shadow-lift) !important;
}

/* =====================================================================
 * Above 30 MHz, and the moon
 * ================================================================== */

.pe-app .pe-uppergrid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 4px;
}

.pe-app .pe-upper{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--pe-line);
	border-left-width: 4px;
	border-radius: var(--pe-radius-sm);
	background: var(--pe-surface);
}

.pe-app .pe-upper--good{   border-left-color: var(--pe-good); }
.pe-app .pe-upper--fair{   border-left-color: var(--pe-fair); }
.pe-app .pe-upper--poor{   border-left-color: var(--pe-poor); }
.pe-app .pe-upper--closed{ border-left-color: var(--pe-closed); }

.pe-app .pe-upper__label{
	font-size: 11.5px;
	font-weight: 750;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-upper__value{
	font-size: 21px;
	font-weight: 750;
	line-height: 1.2;
}

.pe-app .pe-upper--good .pe-upper__value{   color: var(--pe-good-text); }
.pe-app .pe-upper--fair .pe-upper__value{   color: var(--pe-fair-text); }
.pe-app .pe-upper--poor .pe-upper__value{   color: var(--pe-poor-text); }
.pe-app .pe-upper--closed .pe-upper__value{ color: var(--pe-ink-soft); }

.pe-app .pe-upper__says{
	margin: 4px 0 0;
	color: var(--pe-ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Moon */

.pe-app .pe-moon{
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 16px;
	padding: 16px 18px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: linear-gradient(135deg, var(--pe-navy-deep) 0%, var(--pe-navy) 100%);
}

.pe-app .pe-moon__dial{
	flex: 0 0 54px;
	line-height: 0;
}

.pe-app .pe-moon__body{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pe-app .pe-moon__phase{
	font-size: 16.5px;
	font-weight: 750;
	color: #fff;
}

.pe-app .pe-moon__lit{
	font-size: 13.5px;
	color: rgba(255, 255, 255, .8);
}

.pe-app .pe-moon__times{
	font-family: var(--pe-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--pe-signal);
}

.pe-app .pe-moon__note{
	margin: 10px 0 0;
	color: var(--pe-ink-faint);
	font-size: 12.5px;
	line-height: 1.6;
}

.pe-app .pe-solar__credit a{
	color: var(--pe-link);
	text-decoration: underline;
}

/* =====================================================================
 * Satellite passes
 * ================================================================== */

.pe-app .pe-sats__count{
	margin: 14px 0 10px;
	color: var(--pe-ink-faint);
	font-size: 13px;
	font-weight: 650;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.pe-app .pe-satlist{
	overflow: hidden;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	background: var(--pe-surface);
	box-shadow: var(--pe-shadow);
}

.pe-app .pe-pass{
	border-top: 1px solid var(--pe-line-soft);
}

.pe-app .pe-pass:first-child{
	border-top: 0 none;
}

.pe-app .pe-pass__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 15px 18px;
	text-align: left;
}

.pe-app .pe-pass__main{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pe-app .pe-pass__name{
	font-size: 15.5px;
	font-weight: 700;
}

.pe-app .pe-pass__when{
	color: var(--pe-ink-faint);
	font-size: 13px;
}

.pe-app .pe-pass__side{
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.pe-app .pe-pass__peak{
	font-family: var(--pe-mono);
	font-size: 17px;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-pass__peak--good{ color: var(--pe-good-text); }
.pe-app .pe-pass__peak--fair{ color: var(--pe-fair-text); }

.pe-app .pe-pass__word{
	color: var(--pe-ink-faint);
	font-size: 12px;
	font-weight: 650;
}

.pe-app .pe-pass__body{
	padding: 4px 18px 18px;
	border-top: 1px dashed var(--pe-line);
}

.pe-app .pe-pass__says{
	margin: 14px 0 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.6;
}

.pe-app .pe-passfacts{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.pe-app .pe-passfact{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 11px 13px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius-sm);
	background: var(--pe-surface-alt);
}

.pe-app .pe-passfact__label{
	color: var(--pe-ink-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pe-app .pe-passfact__value{
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.45;
}

.pe-app .pe-satcard{
	margin-top: 16px;
	padding: 4px 16px 14px;
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius-sm);
	background: linear-gradient(135deg, var(--pe-surface) 0%, #fbfdff 100%);
}

.pe-app .pe-satcard__title{
	margin: 14px 0 10px;
	font-size: 11.5px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pe-ink-faint);
}

.pe-app .pe-satcard .pe-passfact{
	background: transparent;
	border: 0 none;
	border-top: 1px solid var(--pe-line-soft);
	border-radius: 0;
	padding: 10px 0;
}

.pe-app .pe-satcard .pe-passfact__value{
	font-family: var(--pe-mono);
	font-variant-numeric: tabular-nums;
}

.pe-app .pe-pass__note{
	margin: 12px 0 0;
	color: var(--pe-ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Theme armor — the pass header is a button. */
.pe-app .pe-pass__head{
	background: var(--pe-surface) !important;
	color: var(--pe-ink) !important;
}

.pe-app .pe-pass__head:hover{
	background: var(--pe-surface-alt) !important;
}

.pe-app .pe-pass.is-open .pe-pass__head{
	background: var(--pe-surface-alt) !important;
}

/* =====================================================================
 * Action buttons
 *
 * The gold. Reserved for the buttons that actually go and fetch something —
 * find parks near me, use my location, refresh the spots, refresh the passes.
 * Everything else stays navy or ghost, because if all the buttons shout then
 * none of them do, and these are the ones somebody standing in a park needs to
 * find at a glance in bright sunlight.
 * ================================================================== */

.pe-app .pe-btn--action{
	border: 0 none;
	background: var(--pe-signal);
	color: var(--pe-navy-deep);
	font-weight: 750;
	box-shadow: 0 1px 2px rgba(217, 126, 6, .25), 0 6px 16px rgba(217, 126, 6, .28);
}

.pe-app .pe-btn--action:hover:not([disabled]){
	background: var(--pe-signal-deep);
	color: #fff;
	box-shadow: 0 2px 4px rgba(217, 126, 6, .3), 0 10px 24px rgba(217, 126, 6, .34);
}

.pe-app .pe-btn--action[disabled]{
	opacity: .6;
	cursor: default;
	box-shadow: none;
}

/* Theme armor — it is a button, so the reset strips its surface. */
.pe-app .pe-btn--action{
	background: var(--pe-signal) !important;
	color: var(--pe-navy-deep) !important;
	border: 0 none !important;
}

.pe-app .pe-btn--action:hover:not([disabled]){
	background: var(--pe-signal-deep) !important;
	color: #fff !important;
}

/* In sunlight mode the gold goes flat and the contrast goes up. */
.pe-app.pe-outdoor .pe-btn--action{
	background: #ffb300 !important;
	color: #000 !important;
	box-shadow: none !important;
}

/* =====================================================================
 * Repeater filter rows
 *
 * Two separate questions — how far, and which band — so they get two rows
 * with a rule between them rather than sitting in one crowded huddle. The
 * band row is the one that changes what you are looking at, so it takes the
 * gold; the radius row stays navy. If both shouted, neither would.
 * ================================================================== */

.pe-app .pe-pillrow{
	gap: 10px;
}

.pe-app .pe-pillrow--band{
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--pe-line);
}

.pe-app .pe-pillrow--band .pe-pill.is-selected{
	border-color: var(--pe-signal) !important;
	background: var(--pe-signal) !important;
	color: var(--pe-navy-deep) !important;
	font-weight: 750;
	box-shadow: 0 1px 2px rgba(217, 126, 6, .25), 0 4px 12px rgba(217, 126, 6, .22);
}

.pe-app .pe-pillrow--band .pe-pill:not(.is-selected):hover{
	border-color: var(--pe-signal) !important;
}

.pe-app.pe-outdoor .pe-pillrow--band .pe-pill.is-selected{
	background: #ffb300 !important;
	color: #000 !important;
	box-shadow: none !important;
}

/* The section's own rows need room to breathe from what follows. */
.pe-app .pe-section--finder .pe-finder__out{
	margin-top: 4px;
}

/* =====================================================================
 * Night mode
 *
 * For somebody activating a park overnight. A white screen destroys the dark
 * adaptation that takes twenty minutes to build and a second to lose, so this
 * is near-black with the luminance pulled right down.
 *
 * Two deliberate choices beyond "make it dark":
 *
 *   Accents shift WARM. Blue light is the worst offender for night vision, so
 *   the cyan used for links and highlights becomes amber here. The signal gold
 *   was already the right colour and stays.
 *
 *   Nothing is pure white. #ffffff on near-black is harsh enough to leave an
 *   afterimage; the brightest text here is a soft grey that still clears the
 *   AA contrast bar with room to spare. Every text colour in this block is
 *   checked against its own background by the test suite, not by eye.
 * ================================================================== */

.pe-app.pe-night{
	--pe-bg:          #05070b;
	--pe-surface:     #101620;
	--pe-surface-alt: #18202c;
	--pe-ink:         #e6ecf5;
	--pe-ink-soft:    #b3c0d1;
	--pe-ink-faint:   #8e9cb0;
	--pe-line:        #26303f;
	--pe-line-soft:   #1b232f;

	--pe-navy:        #16202e;
	--pe-navy-deep:   #0b111a;
	--pe-signal:      #f5a623;
	--pe-signal-deep: #d98b0c;

	/* Warm amber instead of cyan: blue light is what costs you night vision. */
	--pe-cyan:        #e0a44a;

	--pe-good:        #4ec98a;
	--pe-good-soft:   #10241b;
	--pe-fair:        #e0a44a;
	--pe-fair-soft:   #241c10;
	--pe-poor:        #f0785a;
	--pe-poor-soft:   #2a1512;
	--pe-closed:      #6b7688;
	--pe-closed-soft: #161c26;

	--pe-shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
	--pe-shadow-lift: 0 2px 4px rgba(0, 0, 0, .55), 0 16px 40px rgba(0, 0, 0, .5);
}

/* Surfaces that were hardcoded light. */

.pe-app.pe-night .pe-card,
.pe-app.pe-night .pe-reptcard,
.pe-app.pe-night .pe-satcard{
	background: linear-gradient(135deg, var(--pe-surface) 0%, #131b26 100%) !important;
}

.pe-app.pe-night .pe-header,
.pe-app.pe-night .pe-verdict,
.pe-app.pe-night .pe-fieldgrid,
.pe-app.pe-night .pe-moon,
.pe-app.pe-night .pe-reality__next,
.pe-app.pe-night .pe-realitycard__verdict{
	background: linear-gradient(135deg, #080d14 0%, #101822 60%, #16202e 100%) !important;
}

/* Anything that put white text on a formerly-navy panel: soften it, because
   pure white on near-black leaves an afterimage. */
.pe-app.pe-night .pe-header__name,
.pe-app.pe-night .pe-verdict__text,
.pe-app.pe-night .pe-verdict__sub,
.pe-app.pe-night .pe-verdict__meta,
.pe-app.pe-night .pe-fieldgrid__place,
.pe-app.pe-night .pe-moon__phase,
.pe-app.pe-night .pe-reality__nexttitle,
.pe-app.pe-night .pe-realitycard__title,
.pe-app.pe-night .pe-btn--primary{
	color: var(--pe-ink) !important;
}

.pe-app.pe-night .pe-moon__lit,
.pe-app.pe-night .pe-reality__nextbody{
	color: var(--pe-ink-soft) !important;
}

.pe-app.pe-night .pe-btn--primary{
	background: linear-gradient(135deg, #1b2636 0%, #24344a 100%) !important;
	border: 1px solid var(--pe-line) !important;
}

/* The nav's selected pill and the gold buttons keep the amber, which is the
   one bright colour that does not cost night vision. */
.pe-app.pe-night .pe-nav{
	background: rgba(8, 12, 18, .94) !important;
}

.pe-app.pe-night .pe-nav__item.is-active,
.pe-app.pe-night .pe-btn--action,
.pe-app.pe-night .pe-pillrow--band .pe-pill.is-selected{
	background: var(--pe-signal) !important;
	color: #100a02 !important;
	box-shadow: none !important;
}

.pe-app.pe-night .pe-chip{
	border: 1px solid var(--pe-line) !important;
	background: rgba(255, 255, 255, .06) !important;
	color: var(--pe-ink) !important;
}

/* The world map. Land was a near-white fill, which at night is a lightbox. */
.pe-app.pe-night .pe-mapland{
	fill: #131c27;
	stroke: #35485f;
}

.pe-app.pe-night .pe-mapwrap{
	background: #080c12;
}

.pe-app.pe-night .pe-mapdot,
.pe-app.pe-night .pe-maplegend__key{
	stroke: #05070b;
	border-color: #05070b;
}

.pe-app.pe-night .pe-moon__dial circle:first-child{
	fill: #05070b;
}

/* Inputs need to look like inputs against a dark ground. */
.pe-app.pe-night .pe-input,
.pe-app.pe-night .pe-input--area,
.pe-app.pe-night .pe-input--select{
	background: #0b1119 !important;
	color: var(--pe-ink) !important;
	border-color: var(--pe-line) !important;
}

.pe-app.pe-night .pe-input::placeholder{
	color: #6d7a8c;
}

/* Ghost buttons and rows read as surfaces, so they follow the surface token. */
.pe-app.pe-night .pe-btn--ghost,
.pe-app.pe-night .pe-action,
.pe-app.pe-night .pe-choice,
.pe-app.pe-night .pe-pill,
.pe-app.pe-night .pe-back,
.pe-app.pe-night .pe-reptrow,
.pe-app.pe-night .pe-pass__head,
.pe-app.pe-night .pe-realitycard{
	background: var(--pe-surface) !important;
	color: var(--pe-ink) !important;
	border-color: var(--pe-line) !important;
}

.pe-app.pe-night .pe-btn--ghost:hover,
.pe-app.pe-night .pe-action:hover,
.pe-app.pe-night .pe-reptrow:hover,
.pe-app.pe-night .pe-pass__head:hover,
.pe-app.pe-night .pe-row:hover{
	background: var(--pe-surface-alt) !important;
}

.pe-app.pe-night .pe-btn--danger{
	background: var(--pe-poor-soft) !important;
	color: #ffb4a0 !important;
	border-color: rgba(240, 120, 90, .4) !important;
}

.pe-app.pe-night .pe-upper,
.pe-app.pe-night .pe-note,
.pe-app.pe-night .pe-reality,
.pe-app.pe-night .pe-passfact,
.pe-app.pe-night .pe-reptpreview__grid > div{
	background: var(--pe-surface) !important;
	border-color: var(--pe-line) !important;
}

.pe-app.pe-night .pe-reptpreview__warn{
	background: var(--pe-poor-soft) !important;
	color: #ffb4a0 !important;
}

/* =====================================================================
 * The appearance buttons
 *
 * Three buttons joined into one pill. Joined rather than spaced because
 * three separate floating chips next to the callsign chip reads as four
 * unrelated controls, and on a phone that is most of the header — the
 * shared outline says "pick one of these three" without a label.
 * ================================================================== */

.pe-app .pe-themeset{
	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
}

.pe-app .pe-chip--theme{
	min-width: 46px;
	padding: 7px 11px;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
}

/* Hairline dividers between the three, inside the shared outline. */
.pe-app .pe-themeset > .pe-chip--theme + .pe-chip--theme{
	border-left: 1px solid rgba(255, 255, 255, .18);
}

.pe-app .pe-chip--theme:hover{
	background: rgba(255, 255, 255, .16);
}

/* The selected one. Deliberately NOT the action gold: gold means "press this
   and something goes and fetches data", and spending it on a settings toggle
   would blunt it everywhere else. A solid light fill on the navy header is
   unambiguous on its own. */
.pe-app .pe-chip--theme.is-on{
	background: #f2f5fa;
	color: var(--pe-navy-deep);
}

.pe-app .pe-chip--theme.is-on:hover{
	background: #fff;
}

/* Night mode.
 *
 * A white pill here is exactly the small bright rectangle this mode exists to
 * avoid, so the selected state cannot be carried by brightness alone. Instead
 * the two UNSELECTED labels are dimmed and the selected one gets a lifted
 * slate fill and a brighter label — the difference between the three is then
 * about as large as in day mode without anything glaring.
 *
 * The first attempt used a fill barely lighter than the group behind it. It
 * passed the contrast audit, because every label was perfectly readable
 * against its own background; what it failed was the actual question, which is
 * whether somebody can see WHICH of the three is on. Contrast against the
 * background and contrast against the neighbouring buttons are different
 * measurements and only one of them is automated. */
.pe-app.pe-night .pe-themeset{
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .04);
}

.pe-app.pe-night .pe-chip--theme{
	color: #93a0b4;
}

.pe-app.pe-night .pe-chip--theme.is-on{
	background: #3a4761;
	color: #f0f4fa;
}

.pe-app.pe-night .pe-chip--theme.is-on:hover{
	background: #445377;
}

/* Sunlight: pure black on pure white, like everything else in this mode. */
.pe-app.pe-outdoor .pe-chip--theme.is-on{
	background: #fff;
	color: #000;
}

/* Phones.
 *
 * Three worded buttons plus the callsign chip is more than fits beside the
 * name on a narrow screen — the first version squeezed "Pocket Elmer" down to
 * a single vertical sliver, which reads as a broken header rather than a tight
 * one. They get their own row instead, stretched full width, which also makes
 * them a good deal easier to hit with a thumb in the dark. */
@media (max-width: 460px){
	.pe-app .pe-header{
		flex-wrap: wrap;
	}

	.pe-app .pe-header__tools{
		flex: 1 1 100%;
		order: 3;
		margin-top: 10px;
	}

	.pe-app .pe-themeset{
		flex: 1 1 auto;
	}

	.pe-app .pe-chip--theme{
		flex: 1 1 0;
		padding: 9px 8px;
	}
}

/* Keyboard focus has to survive the shared overflow:hidden, so it is drawn
   inside the button rather than around it. */
.pe-app .pe-chip--theme:focus-visible{
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/* =====================================================================
 * Contrast corrections
 *
 * Every one of these was found by the automated audit rather than by eye,
 * which is the point: at 2am in a field, the one label nobody looked at is
 * the one that matters.
 * ================================================================== */

/* Night: anything coloured with the navy token is invisible, because navy IS
   the background here. */
.pe-app.pe-night .pe-gauge__value,
.pe-app.pe-night .pe-why__summary,
.pe-app.pe-night .pe-why__value,
.pe-app.pe-night .pe-why__label,
.pe-app.pe-night .pe-fact__value,
.pe-app.pe-night .pe-answer__verdict,
.pe-app.pe-night .pe-freq__result strong{
	color: var(--pe-ink) !important;
}

/* Night: dark text goes ONLY on things that are actually FILLED with a bright
   colour. An earlier version applied it to the semantic classes wholesale,
   which painted coloured *text* near-black and made it vanish — the exact
   failure this audit exists to catch. */
.pe-app.pe-night .pe-action__num,
.pe-app.pe-night .pe-live{
	color: #05070b !important;
}

/* Night: the semantic colours are already light here, so they read as text
   against the dark surfaces without adjustment — 8.7:1 for good, 6.5:1 for
   the worst of them. The muted grey is the only one that needed lifting. */
.pe-app.pe-night{
	--pe-closed:      #98a3b5;
	--pe-good-text:   #4ec98a;
	--pe-fair-text:   #e0a44a;
	--pe-poor-text:   #f0785a;
	--pe-closed-text: #98a3b5;
}

/* Day: white on the vivid green is only 3.48:1. The badges take the darker
   green so the number on them can still be read. */
.pe-app .pe-action__num,
.pe-app .pe-live{
	background: var(--pe-good-text);
}

/* Sunlight: the link cyan is only 3.68:1 on white, and this mode exists
   precisely for the conditions where that is not enough. */
.pe-app.pe-outdoor{
	--pe-cyan: #076b85;
}

.pe-app.pe-outdoor .pe-copy{
	background: #ffffff !important;
	color: #000000 !important;
	border: 2px solid #000000 !important;
}

/* Night and sunlight variants of the two text tokens above. */
.pe-app.pe-night{
	--pe-link:       #e0a44a;
	--pe-ink-strong: var(--pe-ink);
}

.pe-app.pe-outdoor{
	--pe-link:       #076b85;
	--pe-ink-strong: #000000;
}

/* The badge background override has to beat the theme-armor block, which
   re-asserts surfaces with !important. */
.pe-app .pe-action__num,
.pe-app .pe-live{
	background: var(--pe-good-text) !important;
}

/* The copy chip sits on a navy card, so its gold has to be lighter than the
   button gold to clear AA against it. */
.pe-app .pe-copy{
	color: #ffc65c !important;
}

/* Night: the selected filter's count pill is a translucent white wash over a
   dark chip, which lands around mid-grey — nowhere near bright enough to carry
   dark text. Both states keep light text here, and it is a soft grey rather
   than pure white so it does not leave an afterimage. */
.pe-app.pe-night .pe-filter__n,
.pe-app.pe-night .pe-filter.is-selected .pe-filter__n{
	color: var(--pe-ink) !important;
}

/* The copy chip on the grid-square card: a more specific rule was setting the
   button gold, which is only 3.7:1 on that navy. Scoped away from sunlight
   mode, where the same card is white and the light gold would be worse. */
.pe-app:not(.pe-outdoor) .pe-fieldgrid__actions .pe-copy{
	color: #ffc65c !important;
}

/* Night: a selected filter chip is a dark pill, so its label is soft grey
   rather than the pure white that leaves an afterimage on near-black. */
.pe-app.pe-night .pe-filter.is-selected,
.pe-app.pe-night .pe-filter.is-selected span{
	color: var(--pe-ink) !important;
}