/* ==========================================================================
   GhatanGroup — commercial analysis tools
   ========================================================================== */

.nh-pagehead--tool { padding-bottom: 2.5rem; }

.nh-tool {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem);
	padding-block: clamp(2rem, 4vw, 3.5rem); align-items: start;
}

/* Inputs */
.nh-tool__inputs { display: grid; gap: 1.15rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.nh-tool__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; font-weight: 500; }
.nh-tool__title--sub { margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 1.25rem; }

.nh-tf { display: grid; gap: 0.4rem; }
.nh-tf__label { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.nh-tf__hint { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.45; }
.nh-tf__hint:empty { display: none; }
.nh-tf__control { position: relative; display: flex; align-items: center; }
.nh-tf__control input,
.nh-tf__control select,
.nh-input {
	width: 100%; min-height: 3rem; padding: 0.65rem 0.9rem;
	font: 500 1.0625rem/1.3 var(--font-text); font-variant-numeric: tabular-nums; color: var(--text);
	background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-s);
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none; appearance: none;
}
.nh-tf__control input:focus,
.nh-tf__control select:focus,
.nh-input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 30%, transparent); }
.nh-tf__control.has-prefix input { padding-left: 1.8rem; }
.nh-tf__control.has-suffix input { padding-right: 2.2rem; }
.nh-tf__affix { position: absolute; color: var(--muted); font-weight: 500; pointer-events: none; }
.nh-tf__affix--pre { left: 0.9rem; }
.nh-tf__affix--post { right: 0.9rem; }
.nh-tf__control--select::after {
	content: ""; position: absolute; right: 1rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.35rem;
	border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none;
}
.nh-tf__control--select select { padding-right: 2.5rem; cursor: pointer; }

/* Custom checkbox (used by tools and X-Ray) */
.nh-check { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; cursor: pointer; font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.nh-check input,
.nh-xray__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nh-check__box {
	position: relative; width: 1.35rem; height: 1.35rem; margin-top: 0.05rem; border-radius: 5px; flex-shrink: 0;
	border: 1.5px solid var(--line-strong); background: var(--bg); transition: background-color 0.2s, border-color 0.2s;
}
.nh-check__box::after {
	content: ""; position: absolute; left: 0.42rem; top: 0.16rem; width: 0.38rem; height: 0.72rem;
	border-right: 2px solid var(--on-brass); border-bottom: 2px solid var(--on-brass); transform: rotate(45deg) scale(0); transition: transform 0.2s var(--ease);
}
input:checked + .nh-check__box,
.nh-xray__item input:checked + label .nh-check__box { background: var(--brass); border-color: var(--brass); }
input:checked + .nh-check__box::after,
.nh-xray__item input:checked + label .nh-check__box::after { transform: rotate(45deg) scale(1); }
input:focus-visible + .nh-check__box,
.nh-xray__item input:focus-visible + label .nh-check__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.nh-tf--check .nh-tf__hint { padding-left: 2.05rem; }

/* Results */
.nh-tool__results { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; }
.nh-result-hero { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-strong); }
.nh-result-hero__label { margin: 0 0 0.35rem; color: var(--muted); font-weight: 500; }
.nh-result-hero__value { margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 5.5vw, 4.5rem); line-height: 1; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; color: var(--brass); }
.nh-result-hero__value--sm { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.1; }
.nh-result-hero__sub { margin: 0.75rem 0 0; color: var(--muted); }

.nh-rows__title { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 -0.75rem; }
.nh-rows { margin: 0; display: grid; }
.nh-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.nh-rows dt { color: var(--muted); }
.nh-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.nh-rows .is-total { border-bottom-color: var(--line-strong); }
.nh-rows .is-total dt { color: var(--text); font-weight: 600; }
.nh-rows .is-total dd { color: var(--brass); }
.nh-rows .is-credit dd { color: var(--verdigris); }

.nh-alerts:empty { display: none; }
.nh-alerts { display: grid; gap: 0.6rem; }
.nh-alert { margin: 0; padding: 0.8rem 1rem; border-radius: var(--radius-s); font-size: 0.95rem; border-left: 3px solid var(--verdigris); background: color-mix(in srgb, var(--verdigris) 12%, transparent); }
.nh-alert--warn { border-left-color: #d0805f; background: color-mix(in srgb, #d0805f 13%, transparent); }

/* Charts */
.nh-chart { margin: 0; }
.nh-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.75rem; }
.nh-legend { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.nh-key { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; margin-left: 0.5rem; }
.nh-key--a { background: var(--brass); }
.nh-key--b { background: color-mix(in srgb, var(--text) 22%, transparent); }
.nh-key--c { background: var(--verdigris); }
.nh-chart__plot svg { width: 100%; height: auto; overflow: visible; }
.nh-svg-grid { stroke: var(--line); stroke-width: 1; }
.nh-svg-label { fill: var(--muted); font: 500 11px var(--font-text); }
.nh-svg-label--goal { fill: var(--text); font-weight: 600; }
.nh-svg-a { fill: var(--brass); }
.nh-svg-b { fill: color-mix(in srgb, var(--text) 22%, transparent); }
.nh-svg-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.nh-svg-line.is-a { stroke: var(--brass); }
.nh-svg-line.is-c { stroke: var(--verdigris); }
.nh-svg-dot.is-a { fill: var(--brass); }
.nh-svg-dot.is-c { fill: var(--verdigris); }
.nh-svg-goal { stroke: var(--text); stroke-width: 1.25; stroke-dasharray: 5 5; opacity: 0.6; }

/* Stacked bar (closing costs) */
.nh-stackbar__track { display: flex; height: 1.1rem; border-radius: 999px; overflow: hidden; background: var(--line); gap: 2px; }
.nh-stackbar__legend { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }
.nh-stackbar__legend li { display: flex; align-items: center; gap: 0.5rem; }
.nh-stackbar__legend strong { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.nh-stackbar__legend i { width: 0.75rem; height: 0.75rem; border-radius: 3px; flex-shrink: 0; }
.nh-seg-a { background: var(--brass); }
.nh-seg-b { background: var(--verdigris); }
.nh-seg-c { background: color-mix(in srgb, var(--text) 45%, transparent); }
.nh-seg-d { background: color-mix(in srgb, var(--text) 22%, transparent); }

/* Condo / Toronto / NRST visibility */
[data-tool="closing"] .nh-only-condo,
[data-tool="closing"] .nh-only-toronto,
[data-tool="closing"] .nh-only-nrst { display: none; }
[data-tool="closing"].is-condo .nh-only-condo { display: grid; }
[data-tool="closing"].is-toronto .nh-only-toronto,
[data-tool="closing"].is-nrst .nh-only-nrst { display: flex; }

/* Meters (affordability) */
.nh-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.nh-meter__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.95rem; color: var(--muted); }
.nh-meter__top strong { color: var(--text); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.nh-meter__bar { position: relative; height: 0.6rem; margin: 0.6rem 0 0.4rem; border-radius: 999px; background: var(--line); }
.nh-meter__bar span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--brass); transition: width 0.4s var(--ease); }
.nh-meter__bar i { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 2px; background: var(--text); opacity: 0.55; }
.nh-meter__note { margin: 0; font-size: 0.8125rem; color: var(--muted); }

.nh-callout { padding: 1.4rem 1.5rem; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--verdigris); }
.nh-callout__label { margin: 0 0 0.2rem; font-weight: 600; }
.nh-callout__value { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.15; }
.nh-callout__text { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Duo (rent vs buy) */
.nh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.nh-duo > div { padding: 1.1rem 1.25rem; background: var(--bg); }
.nh-duo p { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.9rem; }
.nh-duo strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.nh-duo > div:first-child strong { color: var(--brass); }
.nh-duo > div:last-child strong { color: var(--verdigris); }

/* Details / table */
.nh-details { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.nh-details summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.nh-tablewrap { max-height: 22rem; overflow: auto; margin-top: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-s); }
.nh-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.925rem; }
.nh-table th, .nh-table td { padding: 0.55rem 0.8rem; text-align: right; border-bottom: 1px solid var(--line); }
.nh-table th:first-child, .nh-table td:first-child { text-align: left; }
.nh-table thead th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; }

/* Notes, CTA, other tools */
.nh-notes { padding-block: 1rem 2.5rem; }
.nh-notes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 1rem; }
.nh-notes__grid p { margin: 0; color: var(--muted); font-size: 0.975rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.nh-tool-extra { padding-block: 0 2rem; }

.nh-tool-cta { padding-block: 1rem 2.5rem; }
.nh-tool-cta__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-m); background: var(--bg-2); border: 1px solid var(--line); }
.nh-tool-cta__box p { margin: 0; color: var(--muted); max-width: 40em; }
.nh-disclaimer { font-size: 0.84rem; color: var(--muted); margin: 1rem 0 0; max-width: 60em; }

.nh-othertools { padding-block: 1rem 4.5rem; }
.nh-othertools__title { font-size: 1rem; font-weight: 600; margin-bottom: 0.9rem; }
.nh-othertools ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.nh-othertools a { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.nh-othertools a:hover { border-color: var(--brass); color: var(--text); }
.nh-othertools .nh-icon { width: 1.1rem; height: 1.1rem; color: var(--brass); }

/* ---------- Home X-Ray ---------- */
.nh-xray { padding-block: clamp(2rem, 4vw, 3rem); display: grid; gap: 2rem; max-width: 60rem; }
.nh-xray__bar {
	position: sticky; top: var(--header-h); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
	padding: 1rem 0; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.nh-xray__bar .nh-toggle { margin: 0; }
.nh-xray__progress { flex: 1; min-width: 12rem; }
.nh-xray__progress p { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--muted); }
.nh-progress { height: 0.5rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.nh-progress span { display: block; height: 100%; width: 0; background: var(--brass); transition: width 0.4s var(--ease); }
.nh-xray__actions { display: flex; gap: 0.5rem; }
.nh-xray__field { display: grid; gap: 0.4rem; max-width: 32rem; }

.nh-xray__section { border: 0; margin: 0; padding: 0; min-width: 0; }
.nh-xray__section[hidden] { display: none; }
.nh-xray__section legend { display: flex; align-items: baseline; justify-content: space-between; width: 100%; padding: 0 0 0.75rem; border-bottom: 1px solid var(--line-strong); }
.nh-xray__legend { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.2; }
.nh-xray__count { font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.nh-xray__section ul { list-style: none; }
.nh-xray__item { position: relative; border-bottom: 1px solid var(--line); }
.nh-xray__item label { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 0.25rem; cursor: pointer; transition: background-color 0.2s; }
.nh-xray__item label:hover { background: color-mix(in srgb, var(--brass) 5%, transparent); }
.nh-xray__text { display: grid; gap: 0.25rem; }
.nh-xray__what { font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.nh-xray__why { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.nh-xray__item input:checked + label .nh-xray__what { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--brass) 80%, transparent); text-decoration-thickness: 1.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.nh-tool { grid-template-columns: 1fr; }
	.nh-tool__results { position: static; }
	.nh-notes__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.nh-meters, .nh-duo { grid-template-columns: 1fr; }
	.nh-stackbar__legend { grid-template-columns: 1fr; }
	.nh-xray__bar { position: static; }
	.nh-xray__actions { width: 100%; }
	.nh-xray__actions .nh-btn { flex: 1; }
	.nh-rows > div { flex-direction: column; gap: 0.1rem; }
	.nh-rows dd { text-align: left; }
}

@media print {
	.nh-xray__bar .nh-toggle, .nh-xray__actions { display: none !important; }
	.nh-xray__item label { padding: 0.5rem 0; }
	.nh-tool__inputs { border: 1px solid #999; }
	.nh-xray__section[hidden] { display: none !important; }
}

/* ==========================================================================
   Home X-Ray: the drawing you explore
   ========================================================================== */
.xr { --xr-ok: #6fb39a; --xr-flag: #e0806a; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); padding-block: clamp(1rem, 2vw, 1.5rem) 0; }
[data-theme="daylight"] .xr { --xr-ok: #2f7a62; --xr-flag: #b4492f; }
.xr .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* top bar */
.xr__top { display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto; align-items: end; gap: 1rem clamp(1rem, 3vw, 2.5rem); padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.xr__home { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.75rem; align-items: center; }
.xr__lbl { font: 600 0.66rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.xr__homepick { display: flex; gap: 0.4rem; min-width: 0; }
.xr__homepick select { flex: 1; min-width: 0; min-height: 2.5rem; padding: 0.4rem 2rem 0.4rem 0.8rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.8rem center / 0.7rem; color: var(--text); font: 500 0.95rem/1.2 var(--sans); -webkit-appearance: none; appearance: none; }
.xr__mini { flex: none; min-height: 2.5rem; padding: 0 0.9rem; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 600 0.82rem/1 var(--sans); cursor: pointer; }
.xr__mini:hover { border-color: var(--gold); color: var(--gold-hi); }
.xr__addr { grid-column: 1 / -1; width: 100%; min-height: 2.9rem; padding: 0.6rem 0.9rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: 400 1.05rem/1.3 var(--serif); }
.xr__addr:focus, .xr__homepick select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.xr__type { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); }
.xr__type button { min-height: 2.5rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 0.86rem/1 var(--sans); cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.xr__type button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.xr__score { display: flex; align-items: center; gap: 0.8rem; }
.xr__ring { width: 3.4rem; height: 3.4rem; transform: rotate(-90deg); }
.xr__ring circle { fill: none; stroke: color-mix(in srgb, var(--text) 14%, transparent); stroke-width: 4; }
.xr__ring .xr__ring-bar { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.8s var(--ease); }
.xr__score p { margin: 0; display: grid; gap: 0.15rem; }
.xr__score strong { font: 400 1.7rem/1 var(--serif); }
.xr__score p > span { font-size: 0.8rem; color: var(--muted); }
.xr__flags { color: var(--xr-flag) !important; font-weight: 600; }

/* stage: drawing + panel */
.xr__stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.xr__fig { position: sticky; top: 1rem; margin: 0; }
.xr__canvas { position: relative; aspect-ratio: 900 / 620; }
.xr__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity 0.5s ease; }
.xr__svg--condo { opacity: 0; visibility: hidden; }
.xr[data-type="condo"] .xr__svg--condo { opacity: 1; visibility: visible; }
.xr[data-type="condo"] .xr__svg--freehold { opacity: 0; visibility: hidden; }
.xr__draw .d { stroke: color-mix(in srgb, var(--text) 78%, transparent); stroke-width: 1.6; transition: stroke 0.4s, stroke-width 0.4s, opacity 0.4s; }
.xr__draw .d--thin { stroke-width: 1.1; stroke: color-mix(in srgb, var(--text) 50%, transparent); }
.xr__draw .d--faint { stroke-width: 1.1; stroke: color-mix(in srgb, var(--text) 30%, transparent); }
.xr__draw .xr__unit { stroke: var(--gold); }
.xr.has-area .xr__draw .d:not(.d--faint) { opacity: 0.38; }
.xr.has-area .xr__draw .d.is-lit { opacity: 1; stroke: var(--gold); stroke-width: 2.2; }
.xr__dim { fill: var(--muted); font: 500 13px var(--sans); letter-spacing: 0.02em; }
.xr__fig .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.xr__fig.is-drawn .d { animation: xr-draw 1.5s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes xr-draw { to { stroke-dashoffset: 0; } }
[data-motion="off"] .xr__fig .d { stroke-dashoffset: 0; }

/* hotspots */
.xr__spot { position: absolute; left: var(--x); top: var(--y); width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; opacity: 0; transform: scale(0.6); transition: transform 0.35s var(--ease), opacity 0.5s ease; }
.xr__spot[hidden] { display: none; }
.xr__fig.is-drawn .xr__spot { opacity: 1; transform: none; transition-delay: 1.3s, 1.3s; }
[data-motion="off"] .xr__spot { opacity: 1; transform: none; }
.xr__spot svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.xr__spot-bg { fill: color-mix(in srgb, var(--bg) 82%, transparent); stroke: color-mix(in srgb, var(--gold) 55%, transparent); stroke-width: 1.5; }
.xr__spot-bar { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transition: stroke-dashoffset 0.6s var(--ease); }
.xr__spot-dot { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); transition: transform 0.3s var(--ease); }
.xr__spot::before { content: ""; position: absolute; inset: -0.35rem; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: xr-ping 2.8s ease-out infinite; animation-delay: calc(var(--y) * 0.03s); }
@keyframes xr-ping { 0% { opacity: 0.55; transform: scale(0.75); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.xr__spot.is-done::before, .xr__spot.is-active::before { animation: none; }
.xr__spot.is-done .xr__spot-dot { width: 0.9rem; height: 0.9rem; background: none; }
.xr__spot.is-done .xr__spot-dot::after { content: ""; position: absolute; left: 0.28rem; top: 0.05rem; width: 0.3rem; height: 0.58rem; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.xr__spot:hover .xr__spot-dot, .xr__spot.is-active .xr__spot-dot { transform: scale(1.3); }
.xr__spot.is-active .xr__spot-bg { fill: color-mix(in srgb, var(--gold) 22%, var(--bg)); stroke: var(--gold); }
.xr__spot:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.xr__spot-tip { position: absolute; bottom: calc(100% + 0.45rem); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 0.35rem 0.65rem; border-radius: 999px; background: var(--panel, #121615); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--text); font: 600 0.72rem/1 var(--sans); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s var(--ease); z-index: 2; }
.xr__spot:hover .xr__spot-tip, .xr__spot:focus-visible .xr__spot-tip, .xr__spot.is-active .xr__spot-tip { opacity: 1; transform: translate(-50%, 0); }
.xr__spot-flag { position: absolute; top: -0.2rem; right: -0.2rem; display: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--xr-flag); color: #fff; font: 700 0.68rem/1.05rem var(--sans); text-align: center; }
.xr__spot.has-flag .xr__spot-flag { display: block; }
.xr__hint { margin-top: 0.75rem; text-align: center; font-size: 0.85rem; color: var(--muted); }
.xr.has-area .xr__hint { visibility: hidden; }

/* panel */
.xr__panel { min-height: 100%; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px; border: 1px solid var(--card-line, var(--line)); background: var(--card, var(--surface)); outline: none; }
.xr__intro[hidden], .xr__area[hidden] { display: none; }
.xr__intro, .xr__area { animation: xr-in 0.45s var(--ease); }
@keyframes xr-in { from { opacity: 0; transform: translateY(8px); } }
.xr__k { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.xr__k [data-xr-count] { color: var(--muted); letter-spacing: 0.12em; }
.xr__h { margin: 0; font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.1 var(--serif); letter-spacing: -0.005em; outline: none; }
.xr__p { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.97rem; line-height: 1.6; }
.xr__legend { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; display: grid; gap: 0.55rem; font-size: 0.92rem; }
.xr__legend li { display: flex; align-items: center; gap: 0.7rem; }
.xr__st { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font: 700 0.85rem/1 var(--sans); }
.xr__st--ok { background: color-mix(in srgb, var(--xr-ok) 20%, transparent); color: var(--xr-ok); }
.xr__st--flag { background: color-mix(in srgb, var(--xr-flag) 20%, transparent); color: var(--xr-flag); }
.xr__st--na { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); }
.xr__items { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.xr__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.85rem 0.95rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); transition: border-color 0.3s, background-color 0.3s; }
.xr__item[data-state="ok"] { border-color: color-mix(in srgb, var(--xr-ok) 45%, transparent); background: color-mix(in srgb, var(--xr-ok) 7%, transparent); }
.xr__item[data-state="flag"] { border-color: color-mix(in srgb, var(--xr-flag) 55%, transparent); background: color-mix(in srgb, var(--xr-flag) 8%, transparent); }
.xr__item[data-state="na"] { opacity: 0.6; }
.xr__what { display: grid; gap: 0.25rem; }
.xr__what strong { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.xr__what span { color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.xr__states { display: flex; gap: 0.3rem; }
.xr__states button { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: 700 0.9rem/1 var(--sans); cursor: pointer; display: grid; place-items: center; transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease); }
.xr__states button:hover { transform: scale(1.07); color: var(--text); }
.xr__states [data-xr-set="ok"][aria-pressed="true"] { background: var(--xr-ok); border-color: var(--xr-ok); color: #fff; }
.xr__states [data-xr-set="flag"][aria-pressed="true"] { background: var(--xr-flag); border-color: var(--xr-flag); color: #fff; }
.xr__states [data-xr-set="na"][aria-pressed="true"] { background: color-mix(in srgb, var(--text) 30%, transparent); border-color: transparent; color: var(--bg); }
.xr__notes { display: grid; gap: 0.4rem; margin-top: 1.2rem; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.xr__notes textarea { width: 100%; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: 400 0.95rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; resize: vertical; }
.xr__notes textarea:focus { outline: none; border-color: var(--gold); }
.xr__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; margin-top: 1.3rem; }
.xr__nav [hidden] { display: none; }
.xr__nav .btn--gold { margin-left: auto; }

/* chips: every area at a glance */
.xr__map { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.5rem; }
.xr__chip { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.3s; }
.xr__chip:hover, .xr__chip.is-active { border-color: var(--gold); }
.xr__chip-n { font: 500 0.7rem/1 var(--sans); color: var(--gold); letter-spacing: 0.1em; }
.xr__chip-t { font: 600 0.85rem/1.25 var(--sans); }
.xr__chip-c { font: 500 0.75rem/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.xr__chip.has-flag .xr__chip-c { color: var(--xr-flag); }
.xr__chip i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p) * 100%); background: var(--gold); transition: width 0.6s var(--ease); }

/* report */
.xr__report { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 65%); scroll-margin-top: 1rem; }
.xr__concerns { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.xr__concerns li { display: grid; gap: 0.15rem; padding-left: 0.85rem; border-left: 2px solid var(--xr-flag); }
.xr__concerns span { font: 600 0.64rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.xr__concerns strong { font-weight: 500; font-size: 0.95rem; }
.xr__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-content: start; }
.xr__actions .btn { flex: 1 1 auto; }
.xr__clear { padding: 0.5rem 0; border: 0; background: none; color: var(--muted); font: 600 0.8rem/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.xr__clear:hover { color: var(--xr-flag); }
.xr__saved { flex-basis: 100%; margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--muted); }

@media (max-width: 1080px) {
	.xr__top { grid-template-columns: 1fr auto; }
	.xr__score { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.xr__stage, .xr__report { grid-template-columns: 1fr; }
	.xr__fig { position: relative; top: 0; }
	.xr__panel { scroll-margin-top: 1rem; }
}
@media (max-width: 760px) {
	.xr__top { grid-template-columns: 1fr; }
	.xr__type { justify-self: start; }
	.xr__spot { width: 2.1rem; height: 2.1rem; margin: -1.05rem 0 0 -1.05rem; }
	.xr__spot-tip { display: none; }
	.xr__item { grid-template-columns: 1fr; }
	.xr__states { justify-content: flex-start; }
	.xr__states button { width: 2.6rem; height: 2.6rem; }
}
@media (max-width: 760px) {
	.xr__canvas { margin-inline: calc(-0.6 * var(--pad, 1rem)); }
	.xr__spot { width: 1.95rem; height: 1.95rem; margin: -0.975rem 0 0 -0.975rem; }
}

/* the toolbox that follows you while you work */
.desk-fab { position: fixed; z-index: 71; left: 50%; bottom: clamp(0.9rem, 2vw, 1.5rem); transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.85rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--panel, #121615) 85%, transparent); color: var(--text); cursor: pointer; opacity: 0; visibility: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 0.4s ease, transform 0.45s var(--ease), visibility 0s linear 0.45s, border-color 0.3s; }
.desk-fab svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.desk-fab span { max-width: 0; overflow: hidden; white-space: nowrap; font: 600 0.78rem/1 var(--sans); transition: max-width 0.4s var(--ease); }
.desk-fab.is-shown { opacity: 0.5; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.4s ease, transform 0.45s var(--ease), visibility 0s, border-color 0.3s; }
.desk-fab:hover, .desk-fab:focus-visible, .desk-fab[aria-expanded="true"] { opacity: 1; border-color: var(--gold); }
.desk-fab:hover span, .desk-fab:focus-visible span, .desk-fab[aria-expanded="true"] span { max-width: 8rem; }
.desk-pick { position: fixed; z-index: 72; left: 50%; bottom: calc(clamp(0.9rem, 2vw, 1.5rem) + 3.4rem); transform: translateX(-50%); width: min(26rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow-y: auto; padding: 0.9rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: var(--panel, #121615); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); animation: win-in 0.3s var(--ease); }
.desk-pick[hidden] { display: none !important; } /* 4.16.5 · the tray's own display no longer keeps it on screen */
.desk-pick__h { margin: 0.2rem 0.4rem 0.7rem; font: 400 1.3rem/1.1 var(--serif); }
.desk-pick__h span { display: block; margin-top: 0.25rem; font: 500 0.8rem/1.3 var(--sans); color: var(--muted); }
.desk-pick ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.desk-pick button { width: 100%; display: grid; gap: 0.2rem; padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.desk-pick button strong { font: 600 0.92rem/1.2 var(--sans); }
.desk-pick button span { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.desk-pick button:hover:not([disabled]), .desk-pick button:focus-visible { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); outline: none; }
.desk-pick button[disabled] { opacity: 0.45; cursor: default; }
.desk-pick__note { margin: 0.7rem 0.4rem 0.2rem; font-size: 0.8rem; color: var(--muted); }

/* a tool inside a desk window */
html[data-embed], html[data-embed] body { background: var(--bg-2, #121716); }
[data-theme="daylight"][data-embed], [data-theme="daylight"][data-embed] body { background: #faf8f3; }
html[data-embed] .a11y-fab, html[data-embed] .totop, html[data-embed] .fr-read, html[data-embed] .desk-fab { display: none !important; }
.embed { padding: clamp(0.9rem, 2.5vw, 1.4rem); }
.embed .nh-tool { padding-block: 0; }
.embed .xr { padding-top: 0; }

/* ==========================================================================
   Notes
   ========================================================================== */
.nb { display: grid; grid-template-columns: minmax(14rem, 0.38fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); min-height: 30rem; }
.nb__side { display: grid; align-content: start; gap: 0.75rem; }
.nb__sidehead { display: grid; gap: 0.6rem; }
.nb__new { justify-self: start; }
.nb__find input { width: 100%; min-height: 2.6rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: 400 0.92rem/1.2 var(--sans); }
.nb__find input:focus { outline: none; border-color: var(--gold); }
.nb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; max-height: 34rem; overflow-y: auto; scrollbar-width: thin; }
.nb__item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.6rem; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.nb__item strong { font: 600 0.9rem/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb__item em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.nb__item span { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb__item:hover { border-color: var(--line-strong); }
.nb__item.is-on { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.nb__none { padding: 0.7rem 0.85rem; font-size: 0.85rem; color: var(--muted); }
.nb__page { display: grid; grid-template-rows: auto 1fr auto; padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: 20px; border: 1px solid var(--card-line, var(--line)); background: var(--card, var(--surface)); background-image: repeating-linear-gradient(transparent 0 2.05rem, color-mix(in srgb, var(--text) 5%, transparent) 2.05rem calc(2.05rem + 1px)); background-position: 0 4.6rem; }
.nb__title { width: 100%; padding: 0 0 0.6rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: transparent; color: var(--text); font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--serif); }
.nb__title:focus, .nb__body:focus { outline: none; }
.nb__body { width: 100%; min-height: 22rem; margin-top: 0.9rem; padding: 0; border: 0; background: transparent; color: var(--text); font: 400 1.02rem/2.05rem var(--sans); resize: vertical; }
.nb__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.nb__meta { margin: 0; font-size: 0.78rem; color: var(--muted); }
.nb__acts { display: flex; gap: 0.3rem; }
.nb__act { padding: 0.45rem 0.75rem; border-radius: 999px; border: 1px solid var(--btn-line); background: transparent; color: var(--text); font: 600 0.78rem/1 var(--sans); cursor: pointer; }
.nb__act:hover { border-color: var(--gold); color: var(--gold-hi); }
.nb__act--del:hover { border-color: #d27c6a; color: #e39a8a; }
@media (max-width: 760px) { .nb { grid-template-columns: 1fr; } .nb__list { max-height: 14rem; } }
/* 4.15.1 · a divider to resize the list, and the list folds away */
.nb { grid-template-columns: var(--nb-side, minmax(14rem, 0.38fr)) 0.9rem minmax(0, 1fr); column-gap: clamp(0.25rem, 1vw, 0.6rem); }
.nb__new { gap: 0.45rem; }
.nb__sidetop { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.nb__fold, .nb__unfold { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0 0.6rem; border-radius: 999px; border: 1px solid var(--btn-line, var(--line-strong)); background: transparent; color: var(--muted); font: 600 0.74rem/1 var(--sans); letter-spacing: 0.02em; cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.nb__fold { width: 2.25rem; padding: 0; justify-content: center; }
.nb__fold svg, .nb__unfold svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.nb__fold:hover, .nb__unfold:hover, .nb__fold:focus-visible, .nb__unfold:focus-visible { color: var(--gold-hi, var(--gold)); border-color: var(--gold); outline: none; }
.nb__unfold { justify-self: start; margin: 0 0 0.75rem; }
.nb__unfold em { font-style: normal; min-width: 1.2rem; padding: 0.15rem 0.35rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--text); font-size: 0.68rem; text-align: center; }
.nb__unfold em:empty { display: none; }
.nb__unfold:not([hidden]) ~ * { animation: nb-in 0.35s ease both; }
.nb.is-folded .nb__page { grid-template-rows: auto auto 1fr auto; }
.nb__page > .nb__unfold[hidden] { display: none; }
.nb__split { position: relative; cursor: col-resize; touch-action: none; border-radius: 999px; outline: none; }
.nb__split i { position: absolute; top: 50%; left: 50%; width: 4px; height: 3.5rem; transform: translate(-50%, -50%); border-radius: 4px; background: color-mix(in srgb, var(--text) 14%, transparent); transition: background-color 0.2s, height 0.25s ease; }
.nb__split::before { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 50%; width: 1px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.nb__split:hover i, .nb__split:focus-visible i, .nb.is-splitting .nb__split i { height: 5.5rem; background: var(--gold); }
html.nb-splitting, html.nb-splitting * { cursor: col-resize !important; user-select: none; }
.nb.is-folded { grid-template-columns: minmax(0, 1fr); }
.nb.is-folded > .nb__side, .nb.is-folded > .nb__split { display: none; }
@keyframes nb-in { from { opacity: 0.4; } to { opacity: 1; } }
@media (max-width: 760px) { .nb, .nb.is-folded { grid-template-columns: 1fr; } .nb__split { display: none; } }
html.is-compact .nb { grid-template-columns: 1fr; }
html.is-compact .nb__split { display: none; }
@media (prefers-reduced-motion: reduce) { .nb__unfold:not([hidden]) ~ * { animation: none; } }
/* windows stay within the screen so tools sit side by side; each scrolls inside */
/* the toolbox: movable, and it nudges you once in a while until you've used it */
.desk-fab { touch-action: none; }
.desk-fab.has-pos, .desk-fab.has-pos.is-shown { transform: none; }
.desk-fab.is-drag { cursor: grabbing; opacity: 1; border-color: var(--gold); transition: none; }
.desk-fab::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--gold); opacity: 0; pointer-events: none; }
.desk-fab.is-nudge { animation: fab-nudge 1.4s var(--ease); }
.desk-fab.is-nudge::after { animation: fab-ring 1.4s ease-out; }
.desk-fab.is-nudge span { max-width: 8rem; transition-delay: 0.15s; }
.desk-fab.is-nudge svg { animation: fab-tilt 1.4s var(--ease); }
@keyframes fab-nudge { 0%, 100% { opacity: 0.5; } 15%, 75% { opacity: 1; } }
@keyframes fab-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35, 1.7); } }
@keyframes fab-tilt { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg) translateY(-1px); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-5deg); } 80% { transform: none; } }
[data-motion="off"] .desk-fab.is-nudge, [data-motion="off"] .desk-fab.is-nudge::after, [data-motion="off"] .desk-fab.is-nudge svg { animation: none; }
.desk-fab { cursor: grab; padding-left: 0.6rem; }
.desk-fab__grip { display: grid; place-items: center; width: 0.6rem; opacity: 0.45; transition: opacity 0.3s; }
.desk-fab__grip svg { width: 0.5rem; height: 0.9rem; fill: var(--text); stroke: none; }
.desk-fab:hover .desk-fab__grip { opacity: 0.85; }

/* ==========================================================================
   Tool desk (reworked): tiles that flow together, gliding changes, focus layout
   ========================================================================== */
html.has-desk .phead { margin-bottom: 1rem; }
html.has-desk .phead__lede { display: none; }
html.has-desk .phead__title { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.desk { --tile-h: clamp(30rem, calc(100vh - 10rem), 58rem); scroll-margin-top: 0.75rem; }
.desk[hidden] { display: none; }
.desk.is-arriving .desk__grid { animation: desk-in 0.6s var(--ease); }
@keyframes desk-in { from { opacity: 0; transform: translateY(14px) scale(0.99); } }
.desk__bar { display: flex; align-items: center; gap: 0.75rem 1rem; margin: 0 0 0.65rem; padding: 0 0.15rem; }
.desk__k { margin: 0; flex: 1; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.desk__layout { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--btn-line); }
.desk__layout[hidden] { display: none; }
.desk__layout button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 0.74rem/1 var(--sans); cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.desk__layout svg { width: 1.05rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.desk__layout button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.desk__closeall { padding: 0.4rem 0.2rem; border: 0; background: none; color: var(--muted); font: 600 0.74rem/1 var(--sans); cursor: pointer; }
.desk__closeall:hover { color: var(--gold-hi); }

/* the tiles: one panel, windows divided by fine lines */
.desk__grid { display: grid; gap: 1px; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--text) 14%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9); }
.desk__grid[data-n="1"] { grid-template-columns: 1fr; }
.desk__grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.desk__grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.desk__grid[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.desk__grid[data-layout="focus"] { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.desk__grid[data-layout="focus"] .win.is-main { grid-row: 1 / span 3; }
.win { position: relative; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; background: var(--bg-2, #121716); animation: win-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes win-in { from { opacity: 0; transform: scale(0.96); filter: blur(4px); } }
.win.is-new .win__bar { background: color-mix(in srgb, var(--gold) 14%, var(--bg-2, #121716)); }
.win.is-closing { animation: win-out 0.28s ease forwards; }
@keyframes win-out { to { opacity: 0; transform: scale(0.94); filter: blur(3px); } }
.win.is-minimizing { animation: win-min 0.32s cubic-bezier(0.6, 0, 0.8, 0.4) forwards; }
@keyframes win-min { to { opacity: 0; transform: translateY(40%) scale(0.35); } }
.win__bar { flex: none; height: 2.3rem; gap: 0.6rem; padding: 0 0.7rem; background: color-mix(in srgb, var(--text) 3%, var(--bg-2, #121716)); transition: background-color 0.6s ease; }
.win__title { position: static; transform: none; flex: 1; min-width: 0; max-width: none; padding: 0.3rem 0; border: 0; background: none; text-align: center; cursor: pointer; font: 600 0.76rem/1 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.25s; }
.win__title:hover { color: var(--text); }
.win__open { position: relative; z-index: 1; margin-left: 0; }
.win__body { position: relative; flex: 1; }
.win__body iframe { display: block; width: 100%; height: var(--tile-h); max-height: none; border: 0; opacity: 1; transition: opacity 0.4s ease; }
.desk__grid[data-n="4"]:not([data-layout="focus"]) .win__body iframe { height: calc((var(--tile-h) - 2.4rem) / 2); min-height: 20rem; }
.desk__grid[data-layout="focus"] .win__body iframe { height: calc((var(--tile-h) - 2.4rem * (var(--rows, 2) - 1)) / var(--rows, 2)); min-height: 14rem; }
.desk__grid[data-layout="focus"][data-n="2"] { --rows: 1; }
.desk__grid[data-layout="focus"][data-n="3"] { --rows: 2; }
.desk__grid[data-layout="focus"][data-n="4"] { --rows: 3; }
.desk__grid[data-layout="focus"] .win.is-main .win__body iframe { height: var(--tile-h); }
.win.is-loading .win__body iframe { opacity: 0; }
.win__shim { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--gold) 8%, transparent) 50%, transparent 70%) 0 0 / 200% 100%; transition: opacity 0.3s; }
.win.is-loading .win__shim { opacity: 1; animation: win-shim 1.2s linear infinite; }
@keyframes win-shim { to { background-position: -200% 0; } }

/* full screen: no frame effects behind it, so the window really fills the screen */
.win.is-full { position: fixed; inset: 0.6rem; z-index: 150; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9); animation: none; }
.win.is-full .win__body iframe { height: calc(100vh - 1.2rem - 2.3rem) !important; min-height: 0; }
html.desk-full .frame { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; filter: none !important; contain: none !important; }
html.desk-full .desk__grid { overflow: visible; }
.desk-scrim { position: fixed; inset: 0; z-index: 149; background: rgba(4, 6, 6, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
html.desk-full .desk-scrim { opacity: 1; pointer-events: auto; }
html.desk-full { overflow: hidden; }
.desk__dock { margin-top: 0.65rem; animation: desk-in 0.4s var(--ease); }
.desk__chip { animation: win-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toolbox.is-returning { animation: desk-in 0.55s var(--ease); }
@media (max-width: 900px) {
	.desk__grid[data-n], .desk__grid[data-layout="focus"] { grid-template-columns: 1fr; }
	.desk__grid[data-layout="focus"] .win { grid-row: auto !important; }
	.desk__layout span { display: none; }
	.win__body iframe, .desk__grid[data-n] .win__body iframe { height: 70vh !important; }
}
[data-motion="off"] .win, [data-motion="off"] .desk__grid, [data-motion="off"] .desk__chip { animation: none !important; }

/* compact tool layout inside a narrow window: the essentials first */
html.is-compact .embed { padding: 0.75rem; }
html.is-compact .nh-tool { grid-template-columns: 1fr; gap: 0.9rem; }
html.is-compact .nh-tool__results { order: -1; position: static; gap: 0.9rem; }
html.is-compact .nh-result-hero { padding-bottom: 0.9rem; }
html.is-compact .nh-result-hero__value { font-size: clamp(2rem, 9vw, 2.8rem); }
html.is-compact .nh-tool__inputs { gap: 0.8rem; padding: 1rem; }
html.is-compact .nh-tool__title { font-size: 1.15rem; }
html.is-compact .nh-tf__hint, html.is-compact .nh-notes, html.is-compact .nh-chart, html.is-compact .nh-tablewrap, html.is-compact details, html.is-compact .nh-legend { display: none !important; }
html.is-compact .nh-tf__control input, html.is-compact .nh-tf__control select { min-height: 2.6rem; font-size: 0.98rem; }
html.is-compact .xr__top { grid-template-columns: 1fr; padding: 0.8rem; }
html.is-compact .xr__stage { grid-template-columns: 1fr; }
html.is-compact .xr__fig { position: relative; top: 0; }
html.is-compact .xr__map, html.is-compact .xr__hint, html.is-compact .xr__intro .xr__p, html.is-compact .xr__legend { display: none; }
html.is-compact .nb { grid-template-columns: 1fr; min-height: 0; }
html.is-compact .nb__list { max-height: 9rem; }
html.is-compact .nb__body { min-height: 12rem; }

.win[hidden] { display: none; }
.win__bar { position: relative; display: flex; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); user-select: none; }
.win__lights { display: flex; gap: 0.45rem; flex: none; }
.win__l { width: 0.8rem; height: 0.8rem; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform 0.2s var(--ease), filter 0.2s; }
.win__l svg { width: 0.5rem; height: 0.5rem; fill: none; stroke: rgba(0, 0, 0, 0.6); stroke-width: 1.4; stroke-linecap: round; opacity: 0; transition: opacity 0.15s; }
.win__lights:hover .win__l svg, .win__l:focus-visible svg { opacity: 1; }
.win__l:active { transform: scale(0.88); filter: brightness(0.9); }
.win__l--close { background: #ff5f57; } .win__l--min { background: #febc2e; } .win__l--full { background: #28c840; }
.win__l--full .i-off { display: none; }
.win.is-full .win__l--full .i-on { display: none; } .win.is-full .win__l--full .i-off { display: inline; } .win.is-full .win__l--full svg { opacity: 1; }
.win__l:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.win__open { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 6px; color: var(--muted); }
.win__open svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.win__open:hover { color: var(--gold-hi); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.desk__chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--btn-line); background: transparent; color: var(--text); font: 600 0.8rem/1 var(--sans); cursor: pointer; }
.desk__chip i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #febc2e; }
.desk__chip:hover { border-color: var(--gold); }
.desk__dock { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); }
.desk__dock[hidden] { display: none; }
.desk__docklbl { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-right: 0.4rem; }

/* ---------- Focus layout: move a small window into the large spot (4.2.2) ---------- */
.win__move { display: none; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: grab; touch-action: none; transition: color 0.25s, background-color 0.25s, transform 0.25s; }
.win__move svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.win__move:hover, .win__move:focus-visible { color: var(--gold-hi); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.win__move:active { cursor: grabbing; }
.desk__grid[data-layout="focus"] .win:not(.is-main) .win__move { display: grid; animation: move-hint 2.6s ease-in-out 0.6s 2; }
.desk__grid[data-layout="focus"] .win:not(.is-main) .win__title { cursor: grab; }
@keyframes move-hint { 0%, 100% { transform: none; } 15% { transform: translateX(-3px); } 30% { transform: none; } 45% { transform: translateX(-3px); } 60% { transform: none; } }
.win.is-dragging { z-index: 40; cursor: grabbing; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); opacity: 0.94; }
html.desk-dragging, html.desk-dragging * { cursor: grabbing !important; user-select: none; }
html.desk-dragging .win iframe { pointer-events: none; }
.desk__grid.is-dropping .win.is-main::after { content: 'Drop to bring it into focus'; position: absolute; inset: 2.3rem 0 0; display: grid; place-items: center; font: 600 0.74rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--gold-hi) 70%, transparent); background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px dashed color-mix(in srgb, var(--gold) 35%, transparent); opacity: 0.7; pointer-events: none; transition: opacity 0.25s, background-color 0.25s, border-color 0.25s; z-index: 3; }
.desk__grid.is-dropping .win.is-main.is-drop::after { opacity: 1; color: var(--gold-hi); background: color-mix(in srgb, var(--gold) 10%, color-mix(in srgb, var(--bg) 60%, transparent)); border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .desk__grid[data-layout="focus"] .win:not(.is-main) .win__move { animation: none; } }
html[data-motion="off"] .win__move { animation: none !important; }
.desk__grid.is-dropping { overflow: visible; }
.desk__grid.is-dropping .win.is-main::after { align-content: start; padding-top: clamp(2rem, 14vh, 8rem); }

/* ---------- Tool bar: sync numbers across tools, and Save (4.3.0) ---------- */
.nh-tbar { display: flex; align-items: center; gap: 0.6rem; margin: -0.35rem -0.35rem 0.2rem; padding: 0.35rem; border-radius: 12px; background: color-mix(in srgb, var(--text, #e9e4d8) 3%, transparent); border: 1px solid color-mix(in srgb, var(--text, #e9e4d8) 8%, transparent); }
.nh-tbar svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nh-tbar__sync { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border: 0; border-radius: 9px; background: none; color: var(--muted, #a9a395); font: 600 0.74rem/1 var(--sans, inherit); letter-spacing: 0.02em; cursor: pointer; transition: color 0.25s, background-color 0.25s; }
.nh-tbar__sync:hover { background: color-mix(in srgb, var(--gold, #c9a45c) 9%, transparent); color: var(--text, #e9e4d8); }
.nh-tbar__sync.is-on { color: var(--gold-hi, #e2c27f); }
.nh-tbar__sw { position: relative; width: 1.9rem; height: 1.05rem; border-radius: 99px; background: color-mix(in srgb, var(--text, #e9e4d8) 16%, transparent); transition: background-color 0.3s; }
.nh-tbar__sw::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--text, #e9e4d8); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s; }
.nh-tbar__sync.is-on .nh-tbar__sw { background: color-mix(in srgb, var(--gold, #c9a45c) 70%, transparent); }
.nh-tbar__sync.is-on .nh-tbar__sw::after { transform: translateX(0.85rem); background: var(--on-gold, #1a1407); }
.nh-tbar__state { flex: 1; min-width: 0; text-align: right; color: var(--muted, #a9a395); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(2px); transition: opacity 0.35s ease, transform 0.35s ease; }
.nh-tbar__state.is-on { opacity: 1; transform: none; }
.nh-tbar__save { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--gold, #c9a45c) 45%, transparent); background: none; color: var(--gold-hi, #e2c27f); font: 600 0.72rem/1 var(--sans, inherit); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.nh-tbar__save svg { stroke-dasharray: 16; stroke-dashoffset: 16; width: 0; margin-right: -0.4rem; transition: stroke-dashoffset 0.45s ease 0.05s, width 0.3s ease, margin 0.3s ease; }
.nh-tbar__save:hover { background: color-mix(in srgb, var(--gold, #c9a45c) 12%, transparent); }
.nh-tbar__save.is-saving { opacity: 0.7; }
.nh-tbar__save.is-saved { background: var(--gold, #c9a45c); color: var(--on-gold, #1a1407); border-color: var(--gold, #c9a45c); }
.nh-tbar__save.is-saved svg { stroke-dashoffset: 0; width: 0.95rem; margin-right: 0; }
html.is-compact .nh-tbar__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.is-compact .nh-tbar__state { font-size: 0.68rem; }
@media (max-width: 420px) { .nh-tbar__state { display: none; } .nh-tbar { justify-content: space-between; } }
@media print { .nh-tbar { display: none; } }
.nh-tool > .nh-tbar { grid-column: 1 / -1; order: -5; margin: 0; }

/* ---------- Rearranging windows by dragging (4.3.1) ---------- */
.desk__grid:not([data-n="1"]) .win__move { display: grid; }
.win.is-hint .win__move { animation: move-hint 0.9s ease-in-out 1; }
.desk__grid.is-dropping .win:not(.is-dragging)::after { content: attr(data-drop); position: absolute; inset: 2.3rem 0 0; display: grid; align-content: start; justify-items: center; padding-top: clamp(2rem, 14vh, 8rem); font: 600 0.74rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--gold-hi) 60%, transparent); background: color-mix(in srgb, var(--bg) 50%, transparent); border: 1px dashed color-mix(in srgb, var(--gold) 30%, transparent); opacity: 0.55; pointer-events: none; transition: opacity 0.25s, background-color 0.25s, border-color 0.25s; z-index: 3; }
.desk__grid.is-dropping .win.is-drop::after { opacity: 1; color: var(--gold-hi); background: color-mix(in srgb, var(--gold) 10%, color-mix(in srgb, var(--bg) 60%, transparent)); border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.desk__drop { display: grid; place-items: center; height: 0; margin-top: 0; border-radius: 18px; border: 1px dashed transparent; overflow: hidden; opacity: 0; transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, border-color 0.3s, background-color 0.3s; }
.desk__drop span { font: 600 0.74rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--gold-hi) 65%, transparent); }
.desk__drop.is-open { height: clamp(6rem, 16vh, 9rem); margin-top: 0.9rem; opacity: 1; border-color: color-mix(in srgb, var(--gold) 30%, transparent); background: color-mix(in srgb, var(--gold) 4%, transparent); }
.desk__drop.is-drop { border-color: color-mix(in srgb, var(--gold) 75%, transparent); background: color-mix(in srgb, var(--gold) 11%, transparent); }
.desk__drop.is-drop span { color: var(--gold-hi); }
.win.is-placed { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent); transition: box-shadow 0.6s ease; }
html[data-motion="off"] .desk__drop { transition: none; }
/* drop labels: a clear pill on a calm veil, legible over any tool */
.desk__grid.is-dropping .win:not(.is-dragging)::after { background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0.8; color: var(--gold-hi); }
.desk__grid.is-dropping .win.is-drop::after { opacity: 1; background: color-mix(in srgb, var(--gold) 9%, color-mix(in srgb, var(--bg) 82%, transparent)); }
html.desk-dragging .desk-fab, html.desk-dragging .desk-pick { opacity: 0 !important; pointer-events: none; transition: opacity 0.25s; }

/* A window given its own row: full width under the others (4.4.0) */
.desk__grid .win.is-below { grid-column: 1 / -1; grid-row: auto !important; }
.desk__grid .win.is-below .win__body iframe { height: calc(var(--tile-h) * 0.8); min-height: 22rem; }
.desk__grid.has-below[data-n="1"] .win:not(.is-below) .win__body iframe { height: calc(var(--tile-h) * 0.8); }
/* Report button (4.4.1) */
.nh-tbar__report { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--text, #e9e4d8) 16%, transparent); background: none; color: var(--text, #e9e4d8); font: 600 0.72rem/1 var(--sans, inherit); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.nh-tbar__report:hover { border-color: color-mix(in srgb, var(--gold, #c9a45c) 60%, transparent); color: var(--gold-hi, #e2c27f); background: color-mix(in srgb, var(--gold, #c9a45c) 8%, transparent); }
html.is-compact .nh-tbar__report span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.desk__grid.has-many .win__move { display: grid; }

/* 4.7.0 · the Sync / Report / Save bar, tucked into a small pill in the tool's top corner */
.nh-tbar, .nh-tool > .nh-tbar { position: absolute; top: 0; right: 0; z-index: 6; margin: 0; padding: 0.22rem; gap: 0.3rem; flex-direction: row; align-items: center; border-radius: 99px; background: color-mix(in srgb, var(--panel, #121615) 70%, transparent); border: 1px solid color-mix(in srgb, var(--text, #e9e4d8) 9%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); grid-column: auto; order: 0; transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s; }
.nh-tbar:hover, .nh-tbar.is-open { border-color: color-mix(in srgb, var(--gold, #c9a45c) 40%, transparent); }
.nh-tbar.is-open { background: color-mix(in srgb, var(--panel, #121615) 94%, transparent); box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.85); }
.nh-tbar__tab { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted, #a9a395); cursor: pointer; transition: color 0.25s, background-color 0.25s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nh-tbar__tab svg { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.nh-tbar__tab:hover, .nh-tbar.is-open .nh-tbar__tab { color: var(--gold-hi, #e2c27f); background: color-mix(in srgb, var(--gold, #c9a45c) 10%, transparent); }
.nh-tbar.is-open .nh-tbar__tab { transform: rotate(90deg); }
.nh-tbar__dot { position: absolute; top: 0.32rem; right: 0.32rem; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text, #e9e4d8) 30%, transparent); transition: background-color 0.3s; }
.nh-tbar.is-synced .nh-tbar__dot { background: var(--gold, #c9a45c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #c9a45c) 22%, transparent); }
.nh-tbar__more { display: flex; align-items: center; gap: 0.35rem; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(10px); transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); white-space: nowrap; }
.nh-tbar__more[hidden] { display: none; }
.nh-tbar.is-open .nh-tbar__more { max-width: 28rem; opacity: 1; transform: none; padding-left: 0.2rem; }
.nh-tbar__sync, .nh-tbar__report, .nh-tbar__save { padding: 0.42rem 0.65rem; }
.nh-tbar__state { position: absolute; top: calc(100% + 0.4rem); right: 0.2rem; flex: none; padding: 0.4rem 0.7rem; border-radius: 9px; background: color-mix(in srgb, var(--panel, #121615) 94%, transparent); border: 1px solid color-mix(in srgb, var(--gold, #c9a45c) 25%, transparent); font-size: 0.72rem; pointer-events: none; box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.8); }
@media (max-width: 420px) { .nh-tbar__state { display: block; } .nh-tbar { justify-content: flex-end; } .nh-tbar.is-open .nh-tbar__more { max-width: calc(100vw - 6rem); } .nh-tbar__lbl, .nh-tbar__report span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* 4.7.0 · Notes: Save */
.nb__act--save { display: inline-flex; align-items: center; gap: 0.35rem; border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-hi); }
.nb__act--save svg { width: 0; height: 0.9rem; margin-right: -0.35rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: width 0.3s ease, margin 0.3s ease, stroke-dashoffset 0.45s ease 0.05s; }
.nb__act--save.is-saving { opacity: 0.7; }
.nb__act--save.is-saved { background: var(--gold); border-color: var(--gold); color: var(--on-gold, #1a1407); }
.nb__act--save.is-saved svg { width: 0.9rem; margin-right: 0; stroke-dashoffset: 0; }

/* 4.7.0 · saved tool layouts */
.desk__lay { position: relative; }
.desk__lay[hidden] { display: none; }
.desk__laybtn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.8rem; border-radius: 999px; border: 1px solid var(--btn-line); background: transparent; color: var(--muted); font: 600 0.74rem/1 var(--sans); cursor: pointer; transition: color 0.25s, border-color 0.25s, background-color 0.25s; }
.desk__laybtn svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.desk__laybtn:hover, .desk__laybtn[aria-expanded="true"] { color: var(--gold-hi); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.desk__laybtn.is-saved { animation: lay-saved 0.8s ease; }
@keyframes lay-saved { 30% { background: color-mix(in srgb, var(--gold) 22%, transparent); border-color: var(--gold); } }
.desk__laymenu { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30; width: min(22rem, 86vw); padding: 0.9rem; border-radius: 16px; background: var(--panel, #121615); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); animation: join-in 0.35s cubic-bezier(.2, .8, .2, 1) both; }
.desk__laymenu[hidden] { display: none; }
.desk__laysave { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: end; }
.desk__laysave label { display: grid; gap: 0.35rem; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.desk__laysave input { min-height: 2.3rem; padding: 0 0.7rem; border-radius: 10px; border: 1px solid var(--btn-line); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font: 500 0.88rem/1 var(--sans); letter-spacing: 0; text-transform: none; }
.desk__laysave input:focus { outline: none; border-color: var(--gold); }
.desk__laygo { min-height: 2.3rem; padding: 0 1rem; border-radius: 10px; border: 0; background: var(--gold); color: var(--on-gold); font: 700 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.desk__laymsg { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--gold-hi); }
.desk__layh { margin: 0.9rem 0 0.35rem; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.desk__laylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; max-height: 15rem; overflow: auto; }
.desk__laylist li { display: flex; align-items: center; gap: 0.3rem; }
.desk__layopen { flex: 1; display: grid; gap: 0.15rem; padding: 0.55rem 0.7rem; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text); text-align: left; cursor: pointer; }
.desk__layopen strong { font: 600 0.86rem/1.2 var(--sans); }
.desk__layopen span { font-size: 0.74rem; color: var(--muted); }
.desk__layopen:hover, .desk__layopen:focus-visible { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); outline: none; }
.desk__laydel { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 0; background: none; color: var(--muted); cursor: pointer; }
.desk__laydel svg { width: 0.7rem; height: 0.7rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.desk__laydel:hover { color: #e39a8a; }
.desk__laydel.is-armed { background: #d27c6a; color: #fff; }
.desk__laynone { margin: 0.8rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.desk-pick__h--lay { margin-top: 0.9rem; font-size: 1.05rem; }
.desk-pick__lays { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
/* 4.7.0 · a tool in the page toolbox: the answer pinned on top, then the inputs, then the breakdown */
html.is-pocket .nh-tool__results { display: contents; }
html.is-pocket .nh-result-hero { order: -3; position: sticky; top: 0; z-index: 4; margin: -0.75rem -0.75rem 0; padding: 0.75rem 3.4rem 0.8rem 0.75rem; background: var(--panel, #121615); border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
html.is-pocket .nh-result-hero__value { font-size: clamp(1.8rem, 8vw, 2.4rem); }
html.is-pocket .nh-alerts { order: -2; }
html.is-pocket .nh-tool__inputs { order: -1; }
html.is-pocket .nh-tool > .nh-tbar { top: 0.55rem; right: 0.1rem; }
@media (max-width: 760px) { html:not(.is-compact) .nh-tool > .nh-tbar { top: 0.85rem; right: 0.85rem; } }

/* 4.8.0 · back to your last set-up, and saved layouts, with previews */
.recall { margin: 0 0 1rem; }
.recall__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--text); font: 600 0.76rem/1 var(--sans); cursor: pointer; transition: border-color 0.25s, background-color 0.25s; animation: recall-in 0.6s var(--ease) both 0.4s; }
@keyframes recall-in { from { opacity: 0; transform: translateY(-6px); } }
.recall__btn:hover, .recall.is-open .recall__btn { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.recall__btn svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: var(--gold-hi); stroke-width: 1.3; }
.recall__chev { width: 0.75rem !important; height: 0.75rem !important; stroke: var(--muted) !important; stroke-width: 1.6 !important; transition: transform 0.3s var(--ease); }
.recall.is-open .recall__chev { transform: rotate(180deg); }
.recall__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; margin-top: 0.7rem; padding: 1rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); background: var(--panel, #121615); animation: join-in 0.4s cubic-bezier(.2, .8, .2, 1) both; }
.recall__panel[hidden] { display: none; }
.recall__panel > :only-child { grid-column: 1 / -1; }
.recall__k { margin: 0 0 0.6rem; display: flex; justify-content: space-between; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); }
.recall__k span { color: var(--muted); letter-spacing: 0.1em; }
.recall__card--recent { padding: 0.9rem; border-radius: 14px; background: color-mix(in srgb, var(--gold) 6%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.recall__card--recent .lp { height: 6.5rem; }
.recall__n { margin: 0.6rem 0 0; font: 500 0.95rem/1.3 var(--serif); }
.recall__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.recall__go, .recall__alt { padding: 0.45rem 0.85rem; border-radius: 999px; font: 600 0.72rem/1 var(--sans); cursor: pointer; }
.recall__go { border: 0; background: var(--gold); color: var(--on-gold); }
.recall__alt { border: 1px solid var(--btn-line); background: none; color: var(--text); }
.recall__alt:hover { border-color: var(--gold); }
.recall__saved ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.recall__lay { width: 100%; display: grid; gap: 0.25rem; padding: 0.55rem; border-radius: 12px; border: 1px solid var(--btn-line); background: none; color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.recall__lay:hover, .recall__lay:focus-visible { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); outline: none; }
.recall__lay strong { margin-top: 0.3rem; font: 600 0.8rem/1.2 var(--sans); }
.recall__lay span:not(.lp):not(.lp *) { font-size: 0.7rem; color: var(--muted); }
/* the little picture of a layout */
.lp { display: flex; flex-direction: column; gap: 3px; height: 4.2rem; padding: 3px; border-radius: 8px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.lp__top { flex: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; min-height: 0; }
.lp--focus .lp__top { grid-template-columns: 1.6fr 1fr; }
.lp__side { display: grid; gap: 3px; min-height: 0; }
.lp__low { display: grid; height: 32%; }
.lp__w { display: grid; place-items: center; border-radius: 5px; background: var(--panel, #121615); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent); overflow: hidden; font-style: normal; }
.lp__w--main { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.lp__w b { font: 600 0.52rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92%; }
@media (max-width: 760px) { .recall__panel { grid-template-columns: 1fr; } }

/* 4.8.0 · the toolbox's bubble */
.desk-fab.is-docked { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.desk-fab.is-near { transform: none !important; opacity: 1; border-color: var(--gold); }
.desk-fab.is-near span { max-width: 8rem; }
.desk-fab.is-hello { animation: fab-hello 0.9s var(--ease); opacity: 1; }
.desk-fab.is-hello span { max-width: 8rem; }
@keyframes fab-hello { 0% { transform: translate(-50%, 0); } 25% { transform: translate(-50%, -8px) rotate(-3deg); } 50% { transform: translate(-50%, 0) rotate(2deg); } 70% { transform: translate(-50%, -3px); } 100% { transform: translate(-50%, 0); } }
.desk-fab.has-pos.is-hello { animation-name: fab-hello-p; }
@keyframes fab-hello-p { 25% { transform: translateY(-8px) rotate(-3deg); } 50% { transform: rotate(2deg); } 70% { transform: translateY(-3px); } }
.desk-bub { position: fixed; z-index: 72; left: clamp(0.6rem, 1.6vw, 1.1rem); top: 64vh; top: 64svh; width: 3.1rem; height: 3.1rem; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--panel, #121615) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--gold); cursor: pointer; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; transform: scale(0.5); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), visibility 0s linear 0.45s, border-color 0.3s; }
.desk-bub svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.desk-bub.is-on.is-avail { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), visibility 0s, border-color 0.3s; }
.desk-bub:hover, .desk-bub:focus-visible { border-color: var(--gold); outline: none; }
.desk-bub__ring { position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; pointer-events: none; }
.desk-bub.is-pulse { animation: bub-pulse 0.9s ease; }
.desk-bub.is-pulse .desk-bub__ring { animation: bub-ring 0.9s ease-out 2; }
@keyframes bub-pulse { 0%, 100% { transform: none; } 30% { transform: scale(1.16); } 55% { transform: scale(0.94); } 75% { transform: scale(1.05); } }
@keyframes bub-ring { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
/* until the second tap has been tried, the bubble keeps a slow, quiet heartbeat */
.desk-bub.is-teach .desk-bub__ring { animation: bub-ring 2.2s ease-out infinite 1.6s; }
.desk-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; overflow: visible; }
.desk-trail path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0.012 0.022; opacity: 0; }
.desk-trail.is-on path { animation: trail 2.4s ease forwards; }
@keyframes trail { 0% { opacity: 0; stroke-dashoffset: 1; } 15% { opacity: 0.85; } 70% { opacity: 0.85; } 100% { opacity: 0; stroke-dashoffset: 0; } }
html.house-open .desk-bub, html.join-open .desk-bub { opacity: 0 !important; visibility: hidden !important; }
html.is-still .desk-bub.is-on:not(.is-teach) { opacity: 0.25 !important; transition: opacity 1.6s ease !important; }
[data-motion="off"] .desk-bub, [data-motion="off"] .desk-fab.is-hello, [data-motion="off"] .desk-bub * { animation: none !important; }

/* 4.8.0 · the Toolbox page: an empty desk with the tools beside it */
.ws__empty { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: stretch; }
.ws__desk { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; gap: 1px; min-height: 19rem; max-height: 30rem; padding: 0 0 1.6rem; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--gold) 30%, transparent); background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 0) 0 0 / 22px 22px; overflow: hidden; }
.ws__slot { display: grid; place-items: center; margin: 1.2rem 0.6rem 0 1.2rem; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--text) 16%, transparent); }
.ws__slot + .ws__slot { margin: 1.2rem 1.2rem 0 0.6rem; }
.ws__slot i { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--gold) 40%, transparent); position: relative; }
.ws__slot i::before, .ws__slot i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 1px; background: var(--gold); transform: translate(-50%, -50%); }
.ws__slot i::after { transform: translate(-50%, -50%) rotate(90deg); }
.ws__desk-t { grid-column: 1 / -1; margin: 1.3rem 1.4rem 0; font: 400 1.6rem/1.1 var(--serif); }
.ws__desk-p { grid-column: 1 / -1; margin: 0.4rem 1.4rem 0; color: var(--muted); font-size: 0.9rem; }
.ws__side { padding: 1.1rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); background: var(--panel, #121615); }
.ws__k { margin: 0 0 0.6rem; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); }
.ws__tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.ws__tools button { width: 100%; display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.1rem 0.5rem; padding: 0.6rem 0.65rem; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.ws__tools button:hover, .ws__tools button:focus-visible { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); outline: none; }
.ws__n { grid-row: span 2; font: 500 0.7rem/1.6 var(--sans); color: var(--gold); }
.ws__tools strong { font: 500 1rem/1.2 var(--serif); }
.ws__tools em { font-style: normal; font-size: 0.74rem; line-height: 1.4; color: var(--muted); }
.ws__lays { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.ws__lays[hidden] { display: none; }
.ws__lays ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.ws.is-returning { animation: desk-in 0.6s var(--ease); }
.tile--box { border-style: dashed; }
@media (max-width: 860px) { .ws__empty { grid-template-columns: 1fr; } .ws__desk { min-height: 15rem; } }
/* 4.9.0 · a smaller bubble, and no line to it */
.desk-bub { width: 2.45rem; height: 2.45rem; }
.desk-bub svg { width: 1rem; height: 1rem; }
.desk-trail { display: none !important; }
/* 4.9.0 · S (synced) or I (independent) instead of a light */
.nh-tbar__dot, .nh-tbar.is-synced .nh-tbar__dot { top: 0.12rem; right: 0.18rem; width: auto; height: auto; border-radius: 0; background: none !important; box-shadow: none !important; font: 600 0.5rem/1 var(--sans); letter-spacing: 0.04em; color: var(--muted); }
.nh-tbar.is-synced .nh-tbar__dot { color: var(--gold-hi); }
.nh-tbar.is-open .nh-tbar__tab .nh-tbar__dot { transform: rotate(-90deg); }

/* 4.9.0 · the guided start on the Toolbox page */
.wsg { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; }
.wsg__scrim { position: absolute; inset: 0; background: rgba(6, 8, 8, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: join-fade 0.5s ease both; }
.wsg__card { position: relative; width: min(100%, 36rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 24px; background: var(--panel, #121615); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); animation: join-in 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.wsg.is-closing .wsg__card { animation: join-leave 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; }
.wsg.is-closing .wsg__scrim { animation: join-fade 0.42s ease reverse both; }
.wsg__x { position: absolute; top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--btn-line); background: none; color: var(--text); cursor: pointer; }
.wsg__x svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.wsg__k { margin: 0 3rem 0 0; font: 600 0.6rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.wsg__t { margin: 0.5rem 0 0; font: 400 clamp(1.7rem, 3.4vw, 2.2rem)/1.1 var(--serif); }
.wsg__p { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.wsg__order { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.wsg__order li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 10px; }
.wsg__order li.is-first { background: color-mix(in srgb, var(--gold) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.wsg__order b { font: 500 0.75rem/1.6 var(--sans); color: var(--gold); }
.wsg__order span { display: grid; gap: 0.1rem; }
.wsg__order strong { font: 500 0.98rem/1.25 var(--serif); }
.wsg__order em { font-style: normal; font-size: 0.76rem; line-height: 1.4; color: var(--muted); }
.wsg__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.wsg__go { padding: 0.75rem 1.2rem; border: 0; border-radius: 99px; background: var(--gold); color: var(--on-gold); font: 700 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.wsg__alt { padding: 0.75rem 1.1rem; border-radius: 99px; border: 1px solid var(--btn-line); background: none; color: var(--text); font: 600 0.74rem/1 var(--sans); cursor: pointer; }
.wsg__alt:hover { border-color: var(--gold); }
.wsg__more { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--muted); }
.wsg__more a { color: var(--gold-hi); }
.wsg__more button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }

/* 4.9.2 · tighter inputs across the tools: the same clarity in less room */
.nh-tf__control input,
.nh-tf__control select,
.nh-input { min-height: 2.65rem; padding: 0.5rem 0.85rem; font-size: 1rem; }
/* Home X-Ray: the home, its address, the type and the score share one slim bar on wider screens */
.xr__top { align-items: center; gap: 0.75rem 1.25rem; padding: 0.85rem 1rem; border-radius: 18px; }
.xr__home { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.xr__homepick { flex: 0 1 17rem; }
.xr__addr { flex: 1 1 13rem; grid-column: auto; width: auto; min-width: 0; min-height: 2.4rem; padding: 0.45rem 0.8rem; border-radius: 10px; font: 400 0.95rem/1.2 var(--sans); }
.xr__homepick select, .xr__mini { min-height: 2.4rem; }
.xr__type button { min-height: 2.25rem; padding: 0 0.95rem; font-size: 0.82rem; }
.xr__ring { width: 2.6rem; height: 2.6rem; }
.xr__score { gap: 0.6rem; }
.xr__score strong { font-size: 1.3rem; }
.xr__score p > span { font-size: 0.75rem; }

/* 4.9.3 · Home X-Ray points in the same refined style as the front page: frosted disc, hairline ring, gold pearl;
   the progress arc stays as a fine gold line */
.xr__spot { width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; }
.xr__spot svg { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); }
.xr__spot-bg { fill: var(--spot-fill); stroke: var(--spot-line); stroke-width: 1; }
.xr__spot-bar { stroke-width: 2.2; }
.xr__spot-dot { width: 0.42rem; height: 0.42rem; box-shadow: 0 0 0 3px var(--spot-glow); }
.xr__spot::before { inset: -0.3rem; border-color: color-mix(in srgb, var(--gold) 70%, transparent); animation-duration: 4.2s; }
.xr__spot:hover { transform: scale(1.08); }
[data-theme="daylight"] .xr__draw .d { stroke: color-mix(in srgb, var(--text) 86%, transparent); stroke-width: 1.8; }
[data-theme="daylight"] .xr__draw .d--thin { stroke: color-mix(in srgb, var(--text) 62%, transparent); stroke-width: 1.3; }
[data-theme="daylight"] .xr__draw .d--faint { stroke: color-mix(in srgb, var(--text) 40%, transparent); stroke-width: 1.2; }
[data-theme="daylight"] .xr.has-area .xr__draw .d:not(.d--faint) { opacity: 0.55; }

/* 4.9.3 · the toolbox pill: icon disc, name, a hairline divider and an arrow, frosted, at the left edge */
.desk-bub { width: auto !important; height: 2.75rem !important; padding: 0.3rem 0.85rem 0.3rem 0.3rem; display: inline-flex; align-items: center; gap: 0; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); background: color-mix(in srgb, var(--panel, #121615) 80%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); color: var(--text); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.75), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent); transform: translateX(-0.6rem) scale(0.92); transform-origin: left center; }
.desk-bub.is-on.is-avail { transform: none; }
.desk-bub__ico { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 30%, transparent), color-mix(in srgb, var(--gold) 10%, transparent) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-hi, var(--gold)); transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.desk-bub__ico svg { width: 1.1rem !important; height: 1.1rem !important; stroke-width: 1.25 !important; }
.desk-bub__l { overflow: hidden; max-width: 6rem; margin-left: 0.65rem; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), margin 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; }
.desk-bub__sep { width: 1px; height: 1.2rem; margin: 0 0.6rem; background: color-mix(in srgb, var(--text) 18%, transparent); transition: margin 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; }
.desk-bub__chev { display: grid; place-items: center; width: 1rem; height: 1rem; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.desk-bub__chev svg { width: 0.9rem !important; height: 0.9rem !important; stroke-width: 1.6 !important; }
.desk-bub.is-out .desk-bub__chev { transform: rotate(180deg); }
.desk-bub.is-out { border-color: var(--gold); }
.desk-bub:hover .desk-bub__ico { transform: scale(1.06); }
.desk-bub.is-take .desk-bub__ico { animation: bub-take 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes bub-take { 0% { transform: scale(1); } 35% { transform: scale(1.18); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent); } 100% { transform: scale(1); } }
.desk-bub__ring { display: none; }
[data-theme="daylight"] .desk-bub { background: color-mix(in srgb, #fffdf8 82%, transparent); box-shadow: 0 18px 34px -22px rgba(70, 52, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
/* phones: the pill slims to icon and arrow, showing its name for a moment when the toolbox folds in */
@media (max-width: 760px) {
	.desk-bub { padding-right: 0.65rem; }
	.desk-bub:not(.is-hello) .desk-bub__l { max-width: 0; margin-left: 0; opacity: 0; }
	.desk-bub:not(.is-hello) .desk-bub__sep { margin: 0 0.25rem 0 0.45rem; opacity: 0; width: 0; }
}

/* 4.9.6 · Home X-Ray points match: frosted lens, hairline edge, fine "+" (the progress arc and the done tick stay) */
.xr__spot { width: 1.9rem; height: 1.9rem; margin: -0.95rem 0 0 -0.95rem; transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.5s ease; }
.xr__spot svg { filter: none; }
.xr__spot-bg { fill: var(--spot-glass); stroke: var(--spot-edge); stroke-width: 1; }
.xr__spot-bar { stroke-width: 1.6; }
.xr__spot:not(.is-done) .xr__spot-dot { width: 0.6rem; height: 0.6rem; border-radius: 0; background: none; box-shadow: none; color: var(--spot-ink); transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); }
.xr__spot:not(.is-done) .xr__spot-dot::before, .xr__spot:not(.is-done) .xr__spot-dot::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px; transform: translate(-50%, -50%); }
.xr__spot:not(.is-done) .xr__spot-dot::before { width: 100%; height: 1.25px; }
.xr__spot:not(.is-done) .xr__spot-dot::after { width: 1.25px; height: 100%; }
.xr__spot:hover { transform: scale(1.12); }
.xr__spot:hover .xr__spot-dot { transform: rotate(90deg); }
.xr__spot.is-active .xr__spot-bg { fill: var(--gold); stroke: var(--gold); }
.xr__spot.is-active:not(.is-done) .xr__spot-dot { color: var(--on-gold, #fff); transform: rotate(45deg); }
.xr__spot.is-done .xr__spot-dot { box-shadow: none; transform: scale(0.85); }
.xr__spot::before { inset: -1px; border-color: var(--spot-edge); animation: spot-breathe 5.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.xr__spot-tip { font: 600 0.6rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; background: var(--spot-gap); border-color: var(--spot-edge); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 760px) { .xr__spot { width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0 -0.875rem; } }
.xr__spot-bg { fill: var(--spot-gap); } /* an SVG disc can't blur what's behind it, so it's a touch more solid */

/* 4.9.9 · the pill rests as a circle (just the case) and opens out on hover, or while its menu is open */
.desk-bub { padding: 0.3rem !important; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), visibility 0s linear 0.45s, border-color 0.3s, padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s; }
.desk-bub.is-on.is-avail { transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), visibility 0s, border-color 0.3s, padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s; }
.desk-bub .desk-bub__l, .desk-bub.is-hello .desk-bub__l { max-width: 0; margin-left: 0; opacity: 0; }
.desk-bub .desk-bub__sep, .desk-bub.is-hello .desk-bub__sep { width: 0; margin: 0; opacity: 0; }
.desk-bub .desk-bub__chev { width: 0; opacity: 0; overflow: hidden; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.desk-bub:is(:hover, :focus-visible, .is-out) { padding: 0.3rem 0.85rem 0.3rem 0.3rem !important; }
.desk-bub:is(:hover, :focus-visible, .is-out) .desk-bub__l { max-width: 6rem; margin-left: 0.65rem; opacity: 1; }
.desk-bub:is(:hover, :focus-visible, .is-out) .desk-bub__sep { width: 1px; margin: 0 0.6rem; opacity: 1; }
.desk-bub:is(:hover, :focus-visible, .is-out) .desk-bub__chev { width: 1rem; opacity: 1; }
@media (hover: none) { .desk-bub:hover:not(.is-out) { padding: 0.3rem !important; } .desk-bub:hover:not(.is-out) .desk-bub__l, .desk-bub:hover:not(.is-out) .desk-bub__sep, .desk-bub:hover:not(.is-out) .desk-bub__chev { max-width: 0; width: 0; margin: 0; opacity: 0; } }

/* 4.9.10 · the empty desk's plus signs are buttons: they open the tools menu */
button.ws__slot { padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
button.ws__slot i { transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), border-color 0.3s, background-color 0.3s; }
button.ws__slot:hover, button.ws__slot:focus-visible { border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 3%, transparent); outline: none; }
button.ws__slot:hover i, button.ws__slot:focus-visible i { transform: rotate(90deg) scale(1.08); border-style: solid; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* 4.9.10 · the pill's grip: hidden in the resting circle, it slides in on hover, like the other drag handles */
.desk-bub { touch-action: none; }
.desk-bub__grip { display: grid; place-items: center; width: 0; height: 1.4rem; overflow: hidden; opacity: 0; color: var(--muted); cursor: grab; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), margin 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, color 0.25s; }
.desk-bub__grip svg { width: 0.42rem; height: 0.75rem; fill: currentColor; }
.desk-bub:is(:hover, :focus-visible, .is-out, .is-drag) .desk-bub__grip { width: 0.9rem; margin: 0 0.15rem 0 0.25rem; opacity: 0.7; }
.desk-bub__grip:hover { color: var(--gold-hi, var(--gold)); opacity: 1 !important; }
.desk-bub.is-drag { cursor: grabbing; transition: opacity 0.35s ease, border-color 0.3s !important; box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.75); }
.desk-bub.is-drag .desk-bub__grip { color: var(--gold-hi, var(--gold)); cursor: grabbing; }
@media (hover: none) { .desk-bub:not(.is-out):not(.is-drag) .desk-bub__grip { width: 0; margin: 0; opacity: 0; } }

/* ======================= Auxiliary (4.10.0) ======================= */
.aux { position: fixed; z-index: 74; left: auto; top: 20vh; opacity: 0; transition: opacity 0.4s ease; touch-action: none; }
.aux.is-ready { opacity: 1; }
.aux__dot { display: inline-flex; align-items: center; gap: 0; height: 2.9rem; min-width: 2.9rem; padding: 0 0.75rem; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--panel, #121615) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); color: var(--gold-hi, var(--gold)); cursor: pointer; box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.75); transition: border-color 0.3s, padding 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.aux__dot svg { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.aux__dot-l { max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; color: var(--text); font: 600 0.62rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), margin 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; }
.aux__dot:hover, .aux__dot:focus-visible { border-color: var(--gold); outline: none; }
@media (hover: hover) { .aux__dot:hover .aux__dot-l, .aux__dot:focus-visible .aux__dot-l { max-width: 7rem; margin-left: 0.6rem; opacity: 1; } }
.aux.is-open .aux__dot { display: none; }
.aux__panel { display: none; width: min(22rem, calc(100vw - 1.5rem)); max-height: min(34rem, calc(100vh - 2rem)); flex-direction: column; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent); background: color-mix(in srgb, var(--panel, #121615) 94%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 36px 80px -34px rgba(0, 0, 0, 0.85); overflow: hidden; touch-action: auto; }
.aux.is-open .aux__panel { display: flex; }
.aux.is-pop .aux__panel, .aux.is-pop .aux__dot { animation: aux-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes aux-pop { from { opacity: 0; transform: scale(0.94); } }
.aux.is-drag .aux__panel, .aux.is-drag .aux__dot { box-shadow: 0 44px 90px -30px rgba(0, 0, 0, 0.9); }
.aux__head { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.75rem 0.55rem 0.8rem; cursor: grab; touch-action: none; }
.aux.is-drag .aux__head { cursor: grabbing; }
.aux__grip svg { width: 0.42rem; height: 0.75rem; fill: var(--muted); display: block; }
.aux__t { flex: 1; font: 400 1.15rem/1 var(--serif); }
.aux__x { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 16%, transparent)); background: none; color: var(--text); cursor: pointer; }
.aux__x svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.aux__x:hover { border-color: var(--gold); color: var(--gold-hi, var(--gold)); }
.aux__tabs { display: flex; gap: 0.2rem; margin: 0 0.6rem; padding: 3px; border-radius: 99px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 14%, transparent)); }
.aux__tabs button { flex: 1; padding: 0.42rem 0.3rem; border: 0; border-radius: 99px; background: none; color: var(--muted); font: 600 0.68rem/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color 0.3s, color 0.3s; }
.aux__tabs button[aria-selected="true"] { background: var(--gold); color: var(--on-gold); }
.aux__tabs button:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.aux__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.8rem 0.85rem 0.95rem; scrollbar-width: none; overscroll-behavior: contain; }
.aux__pane[hidden] { display: none; }
.aux__muted { color: var(--muted); font-size: 0.85rem; }
.aux__fine { margin: 0.8rem 0 0; font-size: 0.7rem; line-height: 1.45; color: var(--muted); }
/* calculator */
.aux__calc { display: grid; gap: 0.6rem; }
.aux__expr { display: block; min-height: 1.1rem; text-align: right; font: 500 0.78rem/1.4 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aux__val { display: block; text-align: right; font: 400 2.2rem/1.05 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--text); overflow: hidden; text-overflow: ellipsis; cursor: copy; transition: color 0.3s; }
.aux__val.is-copied { color: var(--gold-hi, var(--gold)); }
.aux__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.aux__k { height: 2.75rem; border-radius: 14px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 14%, transparent)); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); font: 500 1.05rem/1 var(--sans); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s, background-color 0.2s, transform 0.12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.aux__k svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aux__k:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.aux__k:active, .aux__k.is-hit { transform: scale(0.95); }
.aux__k.is-fn { color: var(--muted); font-size: 0.95rem; }
.aux__k.is-op { color: var(--gold-hi, var(--gold)); font-size: 1.2rem; }
.aux__k.is-eq { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
/* rates */
.aux__rates { display: grid; gap: 0.65rem; }
.aux__rate { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.1rem 0.8rem; padding: 0.7rem 0.8rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.aux__rate span { font: 600 0.66rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.aux__rate b { grid-row: 1 / span 2; grid-column: 2; font: 400 1.75rem/1 var(--serif); color: var(--gold-hi, var(--gold)); font-variant-numeric: lining-nums; }
.aux__rate em { font-style: normal; font-size: 0.74rem; color: var(--muted); }
.aux__var { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text); }
.aux__var select { padding: 0.3rem 0.5rem; border-radius: 10px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 16%, transparent)); background: var(--bg, transparent); color: var(--text); font: 600 0.8rem/1 var(--sans); }
.aux__var b { margin-left: auto; font: 400 1.25rem/1 var(--serif); color: var(--text); }
.aux__next { display: grid; gap: 0.15rem; margin: 0.15rem 0 0; padding-top: 0.65rem; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.aux__next span { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.aux__next strong { font: 500 0.95rem/1.3 var(--sans); }
.aux__next em { font-style: normal; font-size: 0.75rem; color: var(--gold-hi, var(--gold)); }
/* cheat sheet */
.aux__sheet { display: grid; gap: 0.35rem; }
.aux__sec { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.aux__sec[open] { border-color: color-mix(in srgb, var(--gold) 30%, transparent); background: color-mix(in srgb, var(--gold) 4%, transparent); }
.aux__sec summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.75rem; font: 600 0.82rem/1.25 var(--sans); cursor: pointer; list-style: none; }
.aux__sec summary::-webkit-details-marker { display: none; }
.aux__sec summary svg { width: 0.75rem; height: 0.75rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.aux__sec[open] summary svg { transform: rotate(180deg); }
.aux__sec ul { margin: 0; padding: 0 0.85rem 0.7rem 1.9rem; display: grid; gap: 0.3rem; font-size: 0.78rem; line-height: 1.45; color: var(--text); }
.aux__sec li::marker { color: var(--gold); }
/* dates */
.aux__dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.aux__dates li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; padding: 0.55rem 0.6rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.aux__dates li.is-next { border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.aux__when { display: grid; justify-items: center; width: 2.6rem; padding: 0.3rem 0; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.aux__when b { font: 600 0.58rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.aux__when i { font: 400 1.25rem/1.1 var(--serif); font-style: normal; }
.aux__what { display: grid; gap: 0.15rem; min-width: 0; }
.aux__what strong { font: 600 0.82rem/1.25 var(--sans); }
.aux__what em { font-style: normal; font-size: 0.72rem; color: var(--gold-hi, var(--gold)); }
.aux__what small { font-size: 0.72rem; line-height: 1.4; color: var(--muted); }
[data-theme="daylight"] .aux__dot, [data-theme="daylight"] .aux__panel { background: color-mix(in srgb, #fffdf8 92%, transparent); }
html.house-open .aux, html.join-open .aux { opacity: 0 !important; pointer-events: none; }
[data-motion="off"] .aux * { animation: none !important; transition: none !important; }
@media print { .aux { display: none !important; } }

/* ======================= The desk on the full screen (4.10.0) ======================= */
.desk__stage { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--btn-line); background: none; color: var(--text); font: 600 0.74rem/1 var(--sans); cursor: pointer; transition: border-color 0.3s, background-color 0.3s, color 0.3s; }
.desk__stage svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.desk__stage .i-off { display: none; }
.desk__stage[aria-pressed="true"] .i-on { display: none; }
.desk__stage[aria-pressed="true"] .i-off { display: inline; }
.desk__stage:hover, .desk__stage:focus-visible { border-color: var(--gold); color: var(--gold-hi, var(--gold)); outline: none; }
.desk__stage[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.desk__stage[hidden] { display: none; }
html.desk-stage { overflow: hidden; }
html.desk-stage .frame { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; filter: none !important; contain: none !important; }
.desk.is-stage { position: fixed; inset: 0; z-index: 140; margin: 0; padding: 0.85rem 1rem 1.2rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; --tile-h: calc(100vh - 4.6rem); --tile-h: calc(100dvh - 4.6rem); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 60%), var(--bg, #0d1110); }
.desk.is-stage .desk__bar { position: sticky; top: -0.85rem; z-index: 3; margin: -0.85rem -1rem 0.7rem; padding: 0.85rem 1rem 0.6rem; background: color-mix(in srgb, var(--bg, #0d1110) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.desk.is-stage .desk__grid { border-radius: 14px; }
html.desk-stage .desk-fab, html.desk-stage .desk-bub, html.desk-stage .aux { z-index: 150; }
html.desk-stage .desk-pick { z-index: 160; }
html.desk-stage .house, html.desk-stage .house-scrim, html.desk-stage .concierge, html.desk-stage .totop, html.desk-stage .a11y-fab, html.desk-stage .fr-read { opacity: 0 !important; pointer-events: none !important; }
html.desk-stage .aux { opacity: 1 !important; pointer-events: auto !important; }
html.desk-stage .win.is-full { z-index: 170; }
.desk-bub { transition-property: opacity, transform, visibility, border-color, padding, background-color, translate !important; transition-duration: 0.35s, 0.45s, 0s, 0.3s, 0.5s, 0.3s, 0.45s !important; }

/* 4.10.2 · a single tool's full-screen button, beside "open on its own page" */
.win__fs { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; position: relative; z-index: 1; transition: color 0.25s, background-color 0.25s; }
.win__fs svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.win__fs .i-off { display: none; }
.win__fs[aria-pressed="true"] .i-on { display: none; }
.win__fs[aria-pressed="true"] .i-off { display: inline; }
.win__fs:hover, .win__fs:focus-visible { color: var(--gold-hi, var(--gold)); background: color-mix(in srgb, var(--gold) 10%, transparent); outline: none; }
/* the double-click hint beside the pill */
.desk-hint { position: fixed; z-index: 76; max-width: min(17rem, calc(100vw - 6rem)); padding: 0.55rem 0.8rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--panel, #121615) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); font: 500 0.76rem/1.4 var(--sans); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.75); opacity: 0; visibility: hidden; transform: translate(-6px, -50%); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s; pointer-events: none; }
.desk-hint.is-left { transform: translate(6px, -50%); }
.desk-hint.is-on { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; pointer-events: auto; cursor: pointer; }
.desk-hint__k { display: inline-block; margin-right: 0.45rem; padding: 0.12rem 0.4rem; border-radius: 99px; background: var(--gold); color: var(--on-gold); font: 700 0.56rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 1px; }
[data-theme="daylight"] .desk-hint { background: color-mix(in srgb, #fffdf8 94%, transparent); }
html.desk-stage .desk-hint { z-index: 160; }

/* 4.10.2 · Auxiliary: a grip that shows on hover (drag it anywhere), and a small hop to say hello */
.aux__dot-grip { display: grid; place-items: center; width: 0; overflow: hidden; opacity: 0; color: var(--muted); cursor: grab; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; }
.aux__dot-grip svg { width: 0.42rem; height: 0.75rem; fill: currentColor; }
.aux__dot:hover .aux__dot-grip, .aux__dot:focus-visible .aux__dot-grip, .aux.is-drag .aux__dot-grip { width: 0.6rem; margin-right: 0.45rem; opacity: 0.75; }
@media (hover: none) { .aux__dot-grip { width: 0.6rem; margin-right: 0.4rem; opacity: 0.55; } }
.aux__dot { cursor: grab; }
.aux.is-drag .aux__dot { cursor: grabbing; }
.aux__grip { cursor: grab; }
.aux.is-hop .aux__dot { animation: aux-hop 1.1s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes aux-hop { 0%, 100% { transform: none; } 18% { transform: translateY(-7px) scale(1.04); } 34% { transform: none; } 48% { transform: translateY(-3px); } 60% { transform: none; } }
.aux.is-hop .aux__dot { box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.75), 0 0 0 0 color-mix(in srgb, var(--gold) 40%, transparent); animation: aux-hop 1.1s cubic-bezier(0.3, 0.7, 0.4, 1), aux-ring 1.4s ease-out; }
@keyframes aux-ring { 0% { box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.75), 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); } 100% { box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.75), 0 0 0 12px color-mix(in srgb, var(--gold) 0%, transparent); } }

/* 4.11.1 · the Toolbox page without the desk (simple view, or the desk switched off) */
.ws-simple { display: none; justify-items: center; gap: 0.7rem; max-width: 40rem; margin: clamp(1rem, 3vw, 2rem) auto; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 24px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: color-mix(in srgb, var(--gold) 4%, transparent); text-align: center; }
html[data-off~="desk"] .ws-simple { display: grid; }
html[data-off~="desk"] .toolbox.ws { display: none; }
.ws-simple__ico svg { width: 3rem; height: 3rem; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ws-simple__h { margin: 0.2rem 0 0; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--serif); }
.ws-simple__if-a { display: none; }
html:not([data-ui="simple"]) .ws-simple__if-s, html:not([data-ui="simple"]) .ws-simple__a { display: none; }
html:not([data-ui="simple"]) .ws-simple__if-a { display: inline; }
.ws-simple__p { margin: 0; max-width: 32rem; color: var(--muted); line-height: 1.6; }
.ws-simple__a { margin: 0.4rem 0 0; }
.ws-simple__a .btn small { font-size: inherit; }
.ws-simple__tools { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin: 0.8rem 0 0; padding: 0; }
.ws-simple__tools a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.9rem; border-radius: 99px; border: 1px solid var(--btn-line); color: var(--text); text-decoration: none; font: 600 0.8rem/1 var(--sans); }
.ws-simple__tools a:hover { border-color: var(--gold); color: var(--gold-hi, var(--gold)); }
.ws-simple__tools .nh-icon { width: 0.8rem; height: 0.8rem; }
/* the window's full-screen button sits beside the lights; its name opens out on hover */
.win__fs--l { width: auto; min-width: 1.6rem; padding: 0 0.3rem; gap: 0; display: inline-flex; align-items: center; margin-left: 0.15rem; }
.win__fs-t { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.04em; transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1), margin 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s; }
.win__fs--l:hover .win__fs-t, .win__fs--l:focus-visible .win__fs-t { max-width: 6rem; margin-right: 0.35rem; opacity: 1; }
.win__fs--l[aria-pressed="true"] .win__fs-t { font-size: 0; }
.aux.is-glide { transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1), top 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }

/* 4.11.2 · a tool on its own page, full screen */
.nh-tbar__fs { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted, #a9a395); cursor: pointer; transition: color 0.25s, background-color 0.25s; }
.nh-tbar__fs svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nh-tbar__fs .i-off { display: none; }
.nh-tbar__fs[aria-pressed="true"] .i-on { display: none; }
.nh-tbar__fs[aria-pressed="true"] .i-off { display: inline; }
.nh-tbar__fs:hover, .nh-tbar__fs:focus-visible, .nh-tbar__fs[aria-pressed="true"] { color: var(--gold-hi, #e2c27f); background: color-mix(in srgb, var(--gold, #c9a45c) 10%, transparent); outline: none; }
.nh-tbar.is-open .nh-tbar__fs { display: none; }
html.tool-stage { overflow: hidden; }
html.tool-stage .frame { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; filter: none !important; contain: none !important; }
.toolbox.is-stage { position: fixed; inset: 0; z-index: 140; margin: 0; padding: clamp(1rem, 3vw, 2.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 60%), var(--bg, #0d1110); animation: tool-stage-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tool-stage-in { from { opacity: 0; transform: scale(0.985); } }
html.tool-stage .house, html.tool-stage .house-scrim, html.tool-stage .concierge, html.tool-stage .totop, html.tool-stage .a11y-fab, html.tool-stage .fr-read { opacity: 0 !important; pointer-events: none !important; }
html.tool-stage .aux { z-index: 150; }
[data-motion="off"] .toolbox.is-stage { animation: none; }
/* 4.11.2 · "Add a tool" has a small minus at its top-right corner: put it away now */
.desk-fab { overflow: visible; }
.desk-fab__x { position: absolute; top: -0.45rem; right: -0.45rem; z-index: 2; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: var(--panel, #121615); color: var(--text); cursor: pointer; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5); transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), border-color 0.25s, background-color 0.25s, color 0.25s; }
.desk-fab__x svg { width: 0.6rem; height: 0.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.desk-fab__x:hover, .desk-fab__x:focus-visible { transform: scale(1.12); border-color: var(--gold); background: var(--gold); color: var(--on-gold); outline: none; }
[data-theme="daylight"] .desk-fab__x { background: #fffdf8; }
.desk-fab.is-docked .desk-fab__x { display: none; }

/* 4.12.0 · Auxiliary goes into the toolbox pill with "Add a tool" (the minus), and comes back with it */
.aux.is-going { transition: transform 0.5s cubic-bezier(0.55, 0, 0.25, 1), opacity 0.45s ease, filter 0.45s ease; transform: translate(var(--gx, 0), var(--gy, 0)) scale(0.2); opacity: 0; filter: blur(2px); pointer-events: none; }
.aux.is-gone { display: none; }
[data-motion="off"] .aux.is-going { transition: none; }

/* 4.13.0 · full screen keeps the toolbox at hand: "Add a tool", its pill and menu, and Auxiliary stay above a single
   tool on full screen and above a full-screen window, as they already did on the full-screen desk */
html.tool-stage .desk-fab, html.tool-stage .desk-bub, html.tool-stage .aux { z-index: 150; }
html.tool-stage .desk-pick, html.tool-stage .desk-hint { z-index: 160; }
html.desk-full .desk-fab, html.desk-full .desk-bub, html.desk-full .aux { z-index: 180; }
html.desk-full .desk-pick, html.desk-full .desk-hint { z-index: 190; }

/* 4.13.0 · Auxiliary's Notes tab: a roomier panel, the same notebook as Tools > Notes */
.aux.is-notes .aux__panel { width: min(28rem, calc(100vw - 1.5rem)); height: min(34rem, calc(100vh - 2rem)); }
.aux.is-notes .aux__body { display: flex; flex-direction: column; padding-bottom: 0.7rem; }
.aux.is-notes .aux__pane[data-aux-pane="notes"] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aux__body, .aux__body * { touch-action: auto; }
.aux__nb { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.aux__nbbar { display: flex; gap: 0.4rem; align-items: center; }
.aux__nbpick { flex: 1; min-width: 0; height: 2.1rem; padding: 0 0.6rem; border-radius: 10px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 14%, transparent)); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); font: 500 0.78rem/1 var(--sans); }
.aux__nbbtn { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 14%, transparent)); background: none; color: var(--gold-hi, var(--gold)); cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.aux__nbbtn:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.aux__nbbtn svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aux__nbt { height: 2.2rem; padding: 0 0.7rem; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text); font: 500 1.05rem/1 var(--serif); }
.aux__nbt:focus { outline: none; border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.aux__nbed { flex: 1; min-height: 9rem; display: flex; }
.aux__nbed .rt { flex: 1; }
.aux__nbmeta { margin: 0; }

/* ======================= 4.13.0 · Rich text: the editor in Notes and in Auxiliary's Notes tab ======================= */
.nb__page { background-image: none; }
.nb__body { display: flex; min-height: 24rem; resize: none; font: inherit; line-height: normal; }
html.is-compact .nb__body { min-height: 14rem; }
.rt { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; }
.rt__bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; padding: 0.4rem; border-radius: 12px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 13%, transparent)); background: color-mix(in srgb, var(--card, var(--panel, #fff)) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rt__g { display: inline-flex; align-items: center; gap: 0.1rem; }
.rt__g + .rt__g { padding-left: 0.55rem; border-left: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.rt__b { position: relative; display: grid; place-items: center; width: 1.95rem; height: 1.95rem; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font: 600 0.92rem/1 var(--serif); transition: background-color 0.2s, color 0.2s; }
.rt__b:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.rt__b.is-on, .rt__b[aria-expanded="true"] { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-hi, var(--gold)); }
.rt__b:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.rt__b svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.rt__b b, .rt__b i, .rt__b u, .rt__b s { font-family: var(--serif); font-size: 1rem; }
.rt__b i { font-style: italic; font-weight: 500; }
.rt__sw { position: absolute; left: 0.45rem; right: 0.45rem; bottom: 0.25rem; height: 3px; border-radius: 2px; background: currentColor; }
.rt__sw--hi { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent); }
.rt__s { height: 1.95rem; max-width: 7.6rem; padding: 0 1.4rem 0 0.55rem; border-radius: 8px; border: 1px solid transparent; background: color-mix(in srgb, var(--text) 4%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") right 0.35rem center / 0.8rem no-repeat; color: var(--text); font: 500 0.74rem/1 var(--sans); -webkit-appearance: none; appearance: none; cursor: pointer; }
.rt__s:hover { border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.rt__s--size { max-width: 5.4rem; }
.rt__g--sel { gap: 0.3rem; }
.rt__ed { flex: 1; min-height: 12rem; margin-top: 0.7rem; padding: 0.2rem 0.15rem 1rem; outline: none; color: var(--text); font: 400 1rem/1.7 var(--sans); overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; cursor: text; }
.rt__ed.is-empty::before { content: attr(data-ph); position: absolute; pointer-events: none; color: color-mix(in srgb, var(--muted) 75%, transparent); }
.rt__ed > :first-child { margin-top: 0; }
.rt__ed h1 { margin: 1rem 0 0.4rem; font: 500 1.75rem/1.2 var(--serif); }
.rt__ed h2 { margin: 0.9rem 0 0.35rem; font: 500 1.35rem/1.25 var(--serif); }
.rt__ed h3 { margin: 0.8rem 0 0.3rem; font: 600 1.05rem/1.3 var(--sans); }
.rt__ed p { margin: 0 0 0.5rem; }
.rt__ed blockquote { margin: 0.6rem 0; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 2px solid var(--gold); color: var(--muted); font-style: italic; }
.rt__ed ul, .rt__ed ol { margin: 0.3rem 0 0.6rem; padding-left: 1.5rem; }
.rt__ed li { margin: 0.1rem 0; }
.rt__ed a { color: var(--gold-hi, var(--gold)); text-decoration: underline; text-underline-offset: 2px; }
.rt__ed hr { margin: 1rem 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.rt__ed table { width: 100%; margin: 0.6rem 0; border-collapse: collapse; font-size: 0.92em; }
.rt__ed td, .rt__ed th { min-width: 3rem; padding: 0.4rem 0.55rem; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); vertical-align: top; text-align: left; }
.rt__ed th { background: color-mix(in srgb, var(--gold) 9%, transparent); font-weight: 600; }
.rt__ed font[size="2"] { font-size: 0.82em; } .rt__ed font[size="5"] { font-size: 1.35em; } .rt__ed font[size="6"] { font-size: 1.75em; }
.rt__pop { position: absolute; z-index: 5; min-width: 12rem; padding: 0.7rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: var(--card, var(--panel, #fff)); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6); animation: rt-pop 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
[data-theme="daylight"] .rt__pop { background: #fffdf8; }
@keyframes rt-pop { from { opacity: 0; transform: translateY(-4px); } }
.rt__pop[hidden] { display: none; }
.rt__ph { margin: 0 0 0.55rem; display: flex; justify-content: space-between; gap: 1rem; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.rt__ph span { letter-spacing: 0.04em; color: var(--gold-hi, var(--gold)); }
.rt__sws { display: grid; grid-template-columns: repeat(7, 1.6rem); gap: 0.35rem; }
.rt__swb { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); cursor: pointer; transition: transform 0.2s; }
.rt__swb:hover { transform: scale(1.12); }
.rt__swb.is-none { background: linear-gradient(135deg, transparent 45%, #b3261e 46%, #b3261e 54%, transparent 55%), var(--card, #fff); }
.rt__grid { display: grid; grid-template-columns: repeat(6, 1.35rem); gap: 0.25rem; }
.rt__cell { width: 1.35rem; height: 1.35rem; padding: 0; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: none; cursor: pointer; }
.rt__cell.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, transparent); }
.rt__hd { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; font: 500 0.74rem/1 var(--sans); color: var(--muted); cursor: pointer; }
.rt__tops { display: grid; gap: 0.15rem; }
.rt__top { padding: 0.45rem 0.6rem; border: 0; border-radius: 8px; background: none; color: var(--text); font: 500 0.8rem/1.2 var(--sans); text-align: left; cursor: pointer; }
.rt__top:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.rt__top.is-del { color: #b3261e; }
/* the compact editor in Auxiliary */
.rt--compact .rt__bar { gap: 0.2rem 0.35rem; padding: 0.3rem; }
.rt--compact .rt__g + .rt__g { padding-left: 0.35rem; }
.rt--compact .rt__b { width: 1.7rem; height: 1.7rem; }
.rt--compact .rt__s { height: 1.7rem; max-width: 6.2rem; font-size: 0.7rem; }
.rt--compact .rt__ed { min-height: 6rem; margin-top: 0.5rem; font-size: 0.92rem; overflow-y: auto; }
.aux__nbed .rt { min-height: 0; }
.aux__nbed .rt__ed { min-height: 0; flex: 1 1 0; }
@media (max-width: 760px) { .rt__s { max-width: 6.4rem; } }

/* 4.13.1 · the desk's price slider, beside the layouts */
.desk__bar .pbar--desk { flex: 0 1 17rem; margin-left: auto; padding: 0.3rem 0.85rem 0.2rem; border-radius: 14px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 14%, transparent)); }
.desk__bar .pbar--desk + .desk__layout { margin-left: 0; }
@media (max-width: 900px) { .desk__bar { flex-wrap: wrap; } .desk__bar .pbar--desk { order: 9; flex: 1 1 100%; margin-left: 0; } }
/* 4.13.1 · affordability: three prices to carry into the mortgage calculator */
.nh-starts { margin: 1.2rem 0 0.4rem; }
.nh-starts[hidden] { display: none; }
.nh-starts__k { margin: 0 0 0.6rem; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.nh-starts__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.nh-start { display: grid; gap: 0.3rem; justify-items: start; padding: 0.85rem 0.95rem; border-radius: 16px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 14%, transparent)); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.3s, background-color 0.3s, transform 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.nh-start:hover, .nh-start:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); transform: translateY(-2px); outline: none; }
.nh-start.is-main { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.nh-start__l { font: 600 0.6rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.nh-start__p { font: 500 1.35rem/1.1 var(--serif); font-variant-numeric: lining-nums; }
.nh-start__s { font-size: 0.74rem; line-height: 1.35; color: var(--muted); }
.nh-start__s::after { content: " →"; color: var(--gold-hi, var(--gold)); }
.nh-starts__n { margin: 0.6rem 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) { .nh-starts__row { grid-template-columns: 1fr; } .nh-start { grid-template-columns: 1fr auto; align-items: center; } .nh-start__s { grid-column: 1 / -1; } }
html.is-compact .nh-starts__row { grid-template-columns: 1fr; }

/* 4.13.2 · the editor's toolbar stays below whatever covers the top of its window (the full-screen desk's bar) */
.rt__bar { top: var(--nhc-covered, 0px); transition: top 0.15s ease; }

/* ---------- 4.13.4 · window bar: + (add a tool) and "its own row below" ---------- */
.win__add, .win__row { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.win__add svg, .win__row svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.win__add:hover, .win__add:focus-visible, .win__add.is-on, .win__row:hover, .win__row:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.win__add.is-full { opacity: 0.45; }
.win__row[hidden] { display: none; }
.win__row .i-bot { stroke-dasharray: 2 1.6; }
.win__row.is-below .i-top { stroke-dasharray: 2 1.6; } .win__row.is-below .i-bot { stroke-dasharray: none; }
.win__row.is-below .i-dn { transform: rotate(180deg); transform-origin: 8px 7.1px; }
.win__row .i-dn { transition: transform 0.3s var(--ease); }
.win-menu { position: fixed; z-index: 2147483001; min-width: 13.5rem; padding: 0.3rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--text) 3%, var(--bg-2, #121716)); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45), 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) inset; font: 500 0.76rem/1 var(--sans); color: var(--text); animation: win-menu-in 0.14s ease-out both; transform-origin: 0 0; }
.win-menu[hidden] { display: none; }
@keyframes win-menu-in { from { opacity: 0; transform: translateY(-3px) scale(0.98); } }
[data-motion="off"] .win-menu { animation: none; }
.win-menu__h { margin: 0; padding: 0.45rem 0.55rem 0.4rem; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent); margin-bottom: 0.25rem; }
.win-menu button { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.42rem 0.55rem; border: 0; border-radius: 5px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.win-menu button i { width: 0.9rem; flex: none; text-align: center; font-style: normal; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.win-menu button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-menu button em { font-style: normal; font-size: 0.66rem; color: var(--muted); }
.win-menu button:not([disabled]):hover, .win-menu button:not([disabled]):focus-visible { outline: none; background: color-mix(in srgb, var(--text) 9%, transparent); }
.win-menu button[disabled] { color: var(--muted); cursor: default; }
.win-menu__note { margin: 0.25rem 0 0; padding: 0.45rem 0.55rem 0.3rem; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); font-size: 0.68rem; line-height: 1.35; color: var(--muted); }

/* ---------- 4.13.7 · full-screen desk: "Hide controls" ---------- */
.desk__zen { display: none; align-items: center; gap: 0.45rem; height: 2.3rem; padding: 0 0.95rem; border-radius: 999px; border: 1px solid var(--btn-line); background: none; color: var(--text); font: 600 0.78rem/1 var(--sans); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.desk__zen svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.desk__zen:hover, .desk__zen:focus-visible { border-color: var(--gold); }
.desk.is-stage .desk__zen { display: inline-flex; }
.desk.is-zen .desk__zen svg { transform: rotate(180deg); }
.desk__edge, .desk__zenhint { display: none; }
.desk.is-stage.is-zen { padding-top: 0.6rem; --tile-h: calc(100vh - 2rem); --tile-h: calc(100dvh - 2rem); }
.desk.is-stage.is-zen .desk__bar { position: fixed; top: 0; left: 0; right: 0; margin: 0; padding: 0.85rem 1rem 0.7rem; z-index: 6; transform: translateY(-104%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s; box-shadow: none; }
.desk.is-stage.is-zen.is-peek .desk__bar { transform: none; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55); }
.desk.is-stage.is-zen .desk__edge { display: block; position: fixed; top: 0; left: 0; right: 0; height: 10px; z-index: 7; cursor: default; }
.desk.is-stage.is-zen .desk__edge i { position: absolute; left: 50%; top: 3px; width: 2.6rem; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--text) 22%, transparent); transform: translateX(-50%); transition: width 0.3s var(--ease), background-color 0.3s; }
.desk.is-stage.is-zen .desk__edge:hover i { width: 4.5rem; background: color-mix(in srgb, var(--gold) 70%, transparent); }
.desk.is-stage.is-zen.is-peek .desk__edge { pointer-events: none; }
.desk.is-stage.is-zen.is-peek .desk__edge i { opacity: 0; }
@media (hover: none) { .desk.is-stage.is-zen .desk__edge { height: 18px; } .desk.is-stage.is-zen .desk__edge i { top: 6px; } }
.desk.is-stage.is-zen .desk__zenhint:not([hidden]) { display: block; position: fixed; top: 1.1rem; left: 50%; z-index: 8; margin: 0; padding: 0.55rem 1rem; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--bg, #0d1110) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--muted); font: 500 0.74rem/1.2 var(--sans); white-space: nowrap; transform: translateX(-50%); pointer-events: none; animation: zenhint-in 0.4s ease both; transition: opacity 0.5s ease; }
.desk__zenhint.is-out { opacity: 0; }
@keyframes zenhint-in { from { opacity: 0; transform: translate(-50%, -6px); } }
[data-motion="off"] .desk.is-zen .desk__bar { transition: none; }

/* ---------- 4.13.7 · window bar: the desk as a map, to swap tools ---------- */
.win__map { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.win__map[hidden] { display: none; }
.win__map svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.win__map:hover, .win__map:focus-visible, .win__map.is-on { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.win-map { position: fixed; z-index: 2147483000; width: min(20rem, calc(100vw - 16px)); padding: 0.35rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--text) 3%, var(--bg-2, #121716)); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45); font: 500 0.74rem/1.2 var(--sans); color: var(--text); animation: win-menu-in 0.14s ease-out both; }
.win-map[hidden] { display: none; }
.win-map__h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.35rem; padding: 0.4rem 0.45rem 0.4rem; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.win-map__h span { letter-spacing: 0.08em; text-transform: none; font-weight: 500; }
.win-map__desk { display: grid; gap: 0.3rem; padding: 0.35rem; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--text) 14%, transparent); }
.win-map__row { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 0.3rem; }
.win-map__row--focus { grid-template-columns: 1.6fr 1fr; }
.win-map__side { display: grid; gap: 0.3rem; }
.win-map__t { position: relative; display: grid; align-content: center; gap: 0.15rem; min-height: 3.4rem; padding: 0.4rem 0.45rem; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font: 600 0.7rem/1.2 var(--sans); text-align: center; cursor: grab; touch-action: none; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; }
.win-map__row--low .win-map__t { min-height: 2.3rem; }
.win-map__row--focus .is-main { min-height: 7.2rem; }
.win-map__side .win-map__t { min-height: 2.2rem; }
.win-map__t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-map__t em { font: 500 0.58rem/1 var(--sans); font-style: normal; letter-spacing: 0.06em; color: var(--muted); }
.win-map__t:hover, .win-map__t:focus-visible { outline: none; border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.win-map__t.is-sel { border-color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent); }
.win-map__t.is-over { border-style: dashed; border-color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.win-map__t.is-drag { z-index: 2; cursor: grabbing; opacity: 0.9; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); transition: none; }
.win-map__tip { margin: 0.4rem 0 0; padding: 0.35rem 0.45rem 0.2rem; font-size: 0.66rem; line-height: 1.35; color: var(--muted); }

/* ---------- 4.13.7 · notes: fold the formatting tools away ---------- */
.rt__fold { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; margin-left: auto; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.rt__fold svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rt__fold .i-v { transform-origin: 8px 8px; transform: scaleY(0); transition: transform 0.3s var(--ease); }
.rt.is-folded .rt__fold .i-v { transform: none; }
.rt__fold:hover, .rt__fold:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.rt__foldl { display: none; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-left: 0.5rem; }
.rt.is-folded .rt__bar > .rt__g { display: none; }
.rt.is-folded .rt__foldl { display: inline; }
.rt.is-folded .rt__bar { padding-block: 0.2rem; }
.rt.is-folded .rt__fold { width: 1.7rem; height: 1.7rem; }

/* ---------- 4.13.9 · back to the top row: a drop zone above the desk, and + spots in the map ---------- */
.desk__drop--top.is-open { height: clamp(3.6rem, 9vh, 5rem); margin: 0 0 0.9rem; }
.win-map__z { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.2rem; padding: 0.35rem 0.5rem; border-radius: 5px; border: 1px dashed color-mix(in srgb, var(--text) 24%, transparent); background: none; color: var(--muted); font: 600 0.66rem/1.2 var(--sans); cursor: pointer; transition: border-color 0.15s, color 0.15s, background-color 0.15s; }
.win-map__z i { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.win-map__row:not(.win-map__row--low) > .win-map__z { min-height: 3.4rem; flex-direction: column; gap: 0.15rem; }
.win-map__side > .win-map__z { min-height: 2.2rem; }
.win-map__z:hover, .win-map__z:focus-visible, .win-map__z.is-over { outline: none; border-color: var(--text); color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.win-map__z.is-off { opacity: 0.35; cursor: not-allowed; }
/* 4.15.1 · replace and close on each tool of the map */
.win-map__c { position: relative; display: grid; min-width: 0; }
.win-map__c > .win-map__t { width: 100%; height: 100%; }
.win-map__row--low .win-map__t span, .win-map__side .win-map__t span { padding-right: 2.7rem; }
.win-map__row:not(.win-map__row--low) > .win-map__c > .win-map__acts { top: auto; bottom: 0.25rem; }
.win-map__row--focus > .win-map__c > .win-map__acts { top: auto; bottom: 0.25rem; }
.win-map__side .win-map__acts { top: 50%; bottom: auto; transform: translateY(-50%); }
.win-map__row:not(.win-map__row--low):not(.win-map__row--focus) .win-map__t { align-content: start; padding-top: 0.5rem; min-height: 3.9rem; }
.win-map__acts { position: absolute; top: 0.25rem; right: 0.25rem; z-index: 3; display: flex; gap: 0.15rem; opacity: 0; transition: opacity 0.18s ease; }
.win-map__c:hover .win-map__acts, .win-map__c:focus-within .win-map__acts, .win-map__acts:has(.is-arm) { opacity: 1; }
@media (hover: none) { .win-map__acts { opacity: 1; } }
.win-map__a { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.2rem; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 4px; background: var(--bg-2, #121716); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.win-map__a svg { width: 0.7rem; height: 0.7rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.win-map__a span { display: none; font: 600 0.58rem/1 var(--sans); letter-spacing: 0.03em; }
.win-map__a:hover, .win-map__a:focus-visible { outline: none; color: var(--text); border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.win-map__a--x:hover, .win-map__a--x:focus-visible { color: #c8513d; border-color: #c8513d; }
.win-map__a--x.is-arm { padding: 0 0.35rem; color: #fff; border-color: #c8513d; background: #c8513d; animation: wma-arm 0.3s ease; }
.win-map__a--x.is-arm span { display: inline; }
@keyframes wma-arm { 30% { transform: translateX(-2px); } 60% { transform: translateX(2px); } }
.win-map__t.is-drag + .win-map__acts { opacity: 0; }
.win-map__z.is-nudge { animation: wmz-nudge 0.4s ease; }
@keyframes wmz-nudge { 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
/* ---------- 4.13.9 · Auxiliary: "Ask AI" opens Ask The House ---------- */
.aux__ai { display: inline-flex; align-items: center; gap: 0.35rem; height: 1.9rem; margin-right: 0.45rem; padding: 0 0.7rem 0 0.55rem; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--text); font: 600 0.7rem/1 var(--sans); letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.aux__ai[hidden] { display: none; }
.aux__ai svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: var(--gold-hi); stroke-width: 1.3; stroke-linejoin: round; }
.aux__ai .aux__ai-s { fill: var(--gold-hi); stroke: none; }
.aux__ai:hover, .aux__ai:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
/* asked for from a full screen, the assistant comes up over it */
html.chat-open.desk-stage .concierge, html.chat-open.tool-stage .concierge { opacity: 1 !important; pointer-events: auto !important; z-index: 200; }
html.chat-open.desk-stage .concierge__panel, html.chat-open.tool-stage .concierge__panel { z-index: 200; }

/* ---------- 4.15.0 · desk ---------- */
/* a window's own full screen on the full-screen desk: no shade (the desk is its own layer, so the shade sat on top
   of the window, dimming it and catching every click) */
html.desk-stage .desk-scrim { display: none; }
/* the Toolbox pill, docked at the start of the desk's bar */
.desk__bar .desk-bub.in-bar { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; z-index: 2; flex: none; margin: 0 0.75rem 0 0; opacity: 1 !important; visibility: visible !important; transform: none !important; translate: none !important; pointer-events: auto !important; height: 2.4rem !important; box-shadow: none; }
.desk__bar .desk-bub.in-bar .desk-bub__grip { display: none; }
.desk__bar .desk-bub.in-bar .desk-bub__ico { width: 1.8rem; height: 1.8rem; }
html.is-still .desk__bar .desk-bub.in-bar { opacity: 1 !important; }
.desk-hint.is-below { transform: translateY(-6px); } .desk-hint.is-below.is-on { transform: none; }

/* ---------- 4.15.0 · resizable windows, layering, and the desk's own size ---------- */
.win__size { position: absolute; right: 2px; bottom: 2px; z-index: 5; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; opacity: 0; transition: opacity 0.25s ease; background: linear-gradient(135deg, transparent 0 52%, color-mix(in srgb, var(--text) 45%, transparent) 52% 58%, transparent 58% 68%, color-mix(in srgb, var(--text) 45%, transparent) 68% 74%, transparent 74%); }
.win:hover .win__size, .win.is-resizing .win__size, .win.is-sized .win__size { opacity: 0.9; }
.win.is-full .win__size { display: none; }
/* 4.16.0 · tiling: the seams between windows are the handles */
.desk__grid { position: relative; }
.desk__probe { position: absolute; width: 0; height: var(--tile-h); visibility: hidden; pointer-events: none; }
.win.has-ih .win__body iframe { height: var(--ih) !important; min-height: 0 !important; }
.desk__guts { position: absolute; inset: 0; z-index: 4; pointer-events: none; grid-area: auto; }
.desk__gut { position: absolute; pointer-events: auto; touch-action: none; display: grid; place-items: center; }
.desk__gut--v { width: 12px; cursor: col-resize; }
.desk__gut--h { height: 12px; cursor: row-resize; }
.desk__gut i { border-radius: 4px; background: transparent; transition: background-color 0.18s ease, width 0.2s ease, height 0.2s ease; }
.desk__gut--v i { width: 3px; height: min(4.5rem, 40%); }
.desk__gut--h i { height: 3px; width: min(4.5rem, 30%); }
.desk__gut:hover i, .desk__gut.is-on i { background: var(--gold); }
.desk__gut--v:hover i, .desk__gut--v.is-on i { height: min(7rem, 60%); }
.desk__gut--h:hover i, .desk__gut--h.is-on i { width: min(7rem, 40%); }
.desk__gut::before { content: ""; position: absolute; background: color-mix(in srgb, var(--gold) 55%, transparent); opacity: 0; transition: opacity 0.18s ease; }
.desk__gut--v::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.desk__gut--h::before { left: 0; right: 0; top: 50%; height: 1px; }
.desk__gut:hover::before, .desk__gut.is-on::before { opacity: 1; }
html.desk-resizing, html.desk-resizing * { user-select: none; }
html.desk-resizing .desk__gut--v.is-on, html.desk-resizing:has(.desk__gut--v.is-on) * { cursor: col-resize !important; }
html.desk-resizing:has(.desk__gut--h.is-on) * { cursor: row-resize !important; }
.win.is-front .win__bar { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gold) 55%, transparent); }
.desk__grid:not(:has(.win ~ .win)) .win.is-front .win__bar { box-shadow: none; }
html.desk-resizing, html.desk-resizing * { cursor: nwse-resize !important; user-select: none !important; }
html.desk-resizing iframe { pointer-events: none; }
.desk.is-stage { overflow-x: auto; }
.desk { position: relative; }
.desk__size { position: absolute; left: 50%; bottom: -14px; z-index: 5; width: 64px; height: 14px; transform: translateX(-50%); cursor: nwse-resize; touch-action: none; display: grid; place-items: center; opacity: 0; transition: opacity 0.25s ease; }
.desk__size i { width: 40px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 30%, transparent); transition: background-color 0.2s, width 0.2s; }
.desk:hover .desk__size, .desk__size.is-on { opacity: 1; }
.desk__size:hover i, .desk__size.is-on i { width: 56px; background: var(--gold); }
/* 4.16.0 · the whole desk resizes from its bottom-right corner (the line under each row sets that row's height) */
.desk__size { left: auto; right: -9px; bottom: -9px; width: 22px; height: 22px; transform: none; cursor: nwse-resize; }
.desk__size i { width: 12px !important; height: 12px; border-radius: 0 0 4px 0; background: none !important; border-right: 2px solid color-mix(in srgb, var(--text) 35%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--text) 35%, transparent); }
.desk__size:hover i, .desk__size.is-on i { border-color: var(--gold); }
.desk.is-stage .desk__size { display: none; }
@media (hover: none) { .win__size, .desk__size { display: none; } }
/* Auxiliary, resizable from its corner (4.15.0) */
.aux__panel { position: relative; }
.aux__panel.is-sized .aux__body { flex: 1; min-height: 0; overflow: auto; }
.aux__size { position: absolute; right: 3px; bottom: 3px; z-index: 3; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; opacity: 0.35; transition: opacity 0.2s; border-bottom-right-radius: 14px; background: linear-gradient(135deg, transparent 0 52%, color-mix(in srgb, var(--gold) 70%, transparent) 52% 59%, transparent 59% 69%, color-mix(in srgb, var(--gold) 70%, transparent) 69% 76%, transparent 76%); }
.aux__panel:hover .aux__size, .aux.is-sizing .aux__size { opacity: 1; }
.aux--gl .aux__size { right: auto; left: 3px; cursor: nesw-resize; border-bottom-right-radius: 0; border-bottom-left-radius: 14px; transform: scaleX(-1); }
.aux.is-sizing, .aux.is-sizing * { user-select: none; }
@media (hover: none) { .aux__size { display: none; } }
/* Auxiliary's Ask tab (4.15.0) */
.aux__pane[data-aux-pane="chat"]:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.aux.is-notes .aux__pane[data-aux-pane="chat"] { flex: 1; min-height: 0; }
.aux__chat { flex: 1; width: 100%; min-height: 20rem; border: 0; border-radius: 12px; background: var(--panel, #121615); }
.aux__chatout { margin: 0.45rem 0 0; text-align: center; }
.aux__chatout button { padding: 0.2rem 0; border: 0; background: none; color: var(--muted); font: 600 0.68rem/1 var(--sans); letter-spacing: 0.04em; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
.aux__chatout button:hover { color: var(--gold-hi); border-color: var(--gold); }
.aux.is-chat .aux__panel { width: min(26rem, calc(100vw - 1.5rem)); height: min(36rem, calc(100vh - 2rem)); max-height: none; }
.aux.is-chat .aux__body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 0.7rem; }
.aux.is-chat .aux__chat { min-height: 0; }
/* type in small windows (4.15.0): the headline figure stays bold but in proportion, a sentence verdict ("Renting comes
   out $247,745 ahead") is set smaller than a single figure, and the whole tool steps down a touch when narrow */
html.is-compact { font-size: 96%; }
html.is-compact.is-narrow { font-size: 90%; }
html.is-compact .nh-result-hero__value { font-size: clamp(1.75rem, 6vw, 2.35rem); line-height: 1.05; }
html.is-compact .nh-result-hero__value--sm { font-size: clamp(1.3rem, 4.4vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
html.is-compact .nh-result-hero__label { font-size: 0.82rem; }
html.is-compact .nh-tool__title { font-size: 1.05rem; }
html.is-compact .nh-stat__value, html.is-compact .nh-kv__v { font-size: 1.05rem; }

/* ---------- 4.15.0 · Home X-Ray: numbered rings, the list that moves up, and the questionnaire ---------- */
.xr__spot-n { position: absolute; inset: 0; display: grid; place-items: center; font: 600 0.78rem/1 var(--font-display, var(--serif)); color: var(--gold-hi, var(--gold)); pointer-events: none; }
.xr__spot:not(.is-done) .xr__spot-dot { opacity: 0; }
.xr__spot.is-done .xr__spot-n { opacity: 0; }
.xr__spot.is-active .xr__spot-n { color: var(--text); }
.xr__item.is-next { animation: xr-next 0.9s ease; }
@keyframes xr-next { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); } 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); } }
.xr__quizbtn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--text); font: 600 0.78rem/1 var(--sans); cursor: pointer; white-space: nowrap; transition: border-color 0.2s, background-color 0.2s; }
.xr__quizbtn svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: var(--gold-hi, var(--gold)); stroke-width: 1.4; stroke-linecap: round; }
.xr__quizbtn:hover, .xr__quizbtn:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); outline: none; }
.xr__startacts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.xr__quiz { margin: 1rem 0; scroll-margin-top: 1rem; }
.xr__quiz[hidden] { display: none; }
.xq__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.xq__bar { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.xq__bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width 0.5s var(--ease); }
.xq__x { padding: 0.35rem 0; border: 0; background: none; color: var(--muted); font: 600 0.74rem/1 var(--sans); cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent); white-space: nowrap; }
.xq__x:hover { color: var(--gold-hi, var(--gold)); border-color: var(--gold); }
.xq__card { max-width: 44rem; margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: 24px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: color-mix(in srgb, var(--panel, #121615) 92%, transparent); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.7); animation: xq-in 0.42s var(--ease) both; }
.xq__card[data-dir="-1"] { animation-name: xq-back; }
@keyframes xq-in { from { opacity: 0; transform: translateX(26px); } }
@keyframes xq-back { from { opacity: 0; transform: translateX(-26px); } }
.xq__k { margin: 0 0 0.6rem; font: 600 0.68rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.xq__k em { float: right; font-style: normal; letter-spacing: 0.08em; color: var(--muted); text-transform: none; }
.xq__h { margin: 0; font: 500 clamp(1.5rem, 3.4vw, 2.1rem)/1.15 var(--font-display, var(--serif)); }
.xq__d { margin: 0.8rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.xq__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1.6rem; }
.xq__opt { display: grid; justify-items: center; gap: 0.55rem; padding: 1.1rem 0.6rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); font: 600 0.84rem/1.25 var(--sans); text-align: center; cursor: pointer; transition: transform 0.25s var(--ease), border-color 0.2s, background-color 0.2s; }
.xq__opt span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid currentColor; font: 600 1.1rem/1 var(--sans); }
.xq__opt:hover, .xq__opt:focus-visible { transform: translateY(-2px); border-color: var(--gold); outline: none; }
.xq__opt--ok[aria-pressed="true"] { border-color: #4ea887; background: color-mix(in srgb, #4ea887 16%, transparent); }
.xq__opt--ok[aria-pressed="true"] span { background: #4ea887; border-color: #4ea887; color: #fff; }
.xq__opt--flag[aria-pressed="true"] { border-color: #e07a62; background: color-mix(in srgb, #e07a62 16%, transparent); }
.xq__opt--flag[aria-pressed="true"] span { background: #e07a62; border-color: #e07a62; color: #fff; }
.xq__opt--na[aria-pressed="true"] { border-color: var(--muted); background: color-mix(in srgb, var(--text) 9%, transparent); }
.xq__opt--na[aria-pressed="true"] span { background: var(--muted); border-color: var(--muted); color: var(--panel, #121615); }
.xq__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.xq__nav { padding: 0.4rem 0; border: 0; background: none; color: var(--muted); font: 600 0.8rem/1 var(--sans); cursor: pointer; }
.xq__nav:hover:not([disabled]) { color: var(--gold-hi, var(--gold)); }
.xq__nav[disabled] { opacity: 0.35; cursor: default; }
.xq__notes { width: 100%; margin-top: 1.2rem; padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font: inherit; resize: vertical; }
.xq__notes:focus { outline: none; border-color: var(--gold); }
.xq__card--end { text-align: center; }
.xq__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.4rem; }
@media (max-width: 560px) { .xq__opts { grid-template-columns: 1fr; } .xq__opt { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; } .xq__k em { float: none; display: block; margin-top: 0.3rem; } }
[data-motion="off"] .xq__card { animation: none; }
html.is-compact .xr__quizbtn { padding: 0.45rem 0.75rem; }

/* 4.16.1 · moving between a tool's page and the Toolbox: the desk fades as the page changes */
html.desk-leaving .desk, html.desk-leaving .toolbox { opacity: 0.35; transition: opacity 0.2s ease; }

/* 4.16.1 · Auxiliary's own minus, on its button from the start */
.aux__dis { position: absolute; top: -0.45rem; right: -0.45rem; z-index: 3; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: var(--panel, #121615); color: var(--text); cursor: pointer; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5); transition: transform 0.2s ease, background-color 0.2s, color 0.2s; }
.aux__dis svg { width: 0.6rem; height: 0.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.aux__dis:hover, .aux__dis:focus-visible { transform: scale(1.12); border-color: var(--gold); background: var(--gold); color: var(--on-gold, #fff); outline: none; }
[data-theme="daylight"] .aux__dis { background: #fffdf8; }
.aux.is-open .aux__dis, .aux.is-drag .aux__dis, .aux.is-going .aux__dis { display: none; }

/* 4.16.1 · the toolbox's tools as a tray under the desk's bar: one row of app icons, the caption at the end */
.desk-pick.is-tray { display: flex; align-items: center; gap: 1.1rem; max-height: none; overflow: visible; padding: 0.85rem 1.2rem 0.8rem; border-radius: 0 0 22px 22px; border-top: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 35%, transparent), 0 26px 50px -30px rgba(0, 0, 0, 0.6); animation: tray-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: top center; }
.desk-pick.is-tray .desk-pick__h { flex: none; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 0.58rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.desk-pick.is-tray .tapp__grid { flex: none; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 5.4rem; gap: 0 0.5rem !important; }
.desk-pick.is-tray .tapp__ico { width: 3rem; }
.desk-pick.is-tray .tapp__cap { flex: 1; min-width: 9rem; min-height: 0; margin: 0; padding: 0 0 0 1.1rem; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--text) 12%, transparent); text-align: left; align-self: stretch; display: flex; align-items: center; }
.desk-pick.is-tray .tapp__lh { display: none; }
.desk-pick.is-tray .desk-pick__lays { display: flex; flex-direction: column; gap: 0.25rem; max-height: 6rem; overflow: auto; }
.desk-pick.is-tray .desk-pick__lays button { padding: 0.35rem 0.6rem; }
@keyframes tray-in { from { opacity: 0; transform: translateY(-10px) scaleY(0.92); } to { opacity: 1; transform: none; } }
@media (max-width: 1180px) { .desk-pick.is-tray .tapp__cap { display: none; } .desk-pick.is-tray .tapp__grid { grid-auto-columns: 4.8rem; } }
[data-motion="off"] .desk-pick.is-tray { animation: none; }

/* 4.16.1 · Ask The House's window: two ways back */
.win__ask { display: inline-flex; gap: 0.3rem; margin-left: auto; flex: none; }
.win__ask button { padding: 0.28rem 0.6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: none; color: var(--text); font: 600 0.64rem/1 var(--sans); letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; }
.win__ask button:hover, .win__ask button:focus-visible { border-color: var(--gold); color: var(--gold-hi, var(--gold)); outline: none; }
.win__ask + .win__open { margin-left: 0.3rem; }
/* 4.16.1 · the seams show a quiet grip all the time, so they read as something you can drag */
.desk__gut--v i { background: color-mix(in srgb, var(--text) 16%, transparent); }
.desk__gut--h:not(.desk__gut--row) i { background: color-mix(in srgb, var(--text) 16%, transparent); }
.desk__gut--v { width: 14px; }
/* 4.16.1 · Snap and Free: the desk becomes a surface, windows float on it */
.desk__mode { display: inline-flex; gap: 0.15rem; padding: 0.2rem; border-radius: 999px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 16%, transparent)); }
.desk__mode button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.7rem; border: 0; border-radius: 999px; background: none; color: var(--text); font: 600 0.74rem/1 var(--sans); cursor: pointer; }
.desk__mode svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.desk__mode button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold, #fff); }
.desk__mode button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.desk__layout button.is-quiet { opacity: 0.55; }
.desk__layout button.is-quiet[aria-pressed="true"] { background: none; color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
@media (max-width: 1500px) { .desk__mode span { display: none; } .desk__mode button { padding: 0.38rem 0.5rem; } } .desk__k { white-space: nowrap; }
@media (max-width: 900px) { .desk__mode { display: none; } }
.desk__grid.is-canvas { display: block; overflow: visible; background: radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1.2px) 0 0 / 22px 22px, color-mix(in srgb, var(--text) 3%, transparent); border-style: dashed; transition: height 0.3s ease; }
.desk__grid.is-canvas .win:not(.is-full) { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.65); }
.desk__grid.is-canvas .win.is-front:not(.is-full) { border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 34px 70px -32px rgba(0, 0, 0, 0.75); }
.desk__grid.is-canvas .win.is-below { grid-column: auto; }
.desk__grid.is-canvas .win__bar { cursor: grab; }
.desk__grid.is-canvas .win.is-moving { cursor: grabbing; opacity: 0.96; }
.desk__grid.is-canvas .win.is-moving .win__bar, html.desk-resizing .desk__grid.is-canvas * { cursor: inherit; }
.desk__grid.is-canvas .win.is-settling { transition: left 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.win__edge { display: none; position: absolute; z-index: 6; touch-action: none; }
.desk__grid.is-canvas .win:not(.is-full) .win__edge { display: block; }
.win__edge--n { top: 0; left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
.win__edge--s { bottom: 0; left: 10px; right: 18px; height: 6px; cursor: ns-resize; }
.win__edge--e { right: 0; top: 10px; bottom: 18px; width: 6px; cursor: ew-resize; }
.win__edge--w { left: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.win__edge--ne { right: 0; top: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.win__edge--nw { left: 0; top: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.win__edge--sw { left: 0; bottom: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.desk__grid.is-canvas .win__size { opacity: 0.5; }
.desk-toast { position: absolute; left: 50%; top: 3.6rem; z-index: 20; transform: translate(-50%, -6px); max-width: min(30rem, 90%); padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--panel, #121615) 94%, transparent); color: var(--text); font: 500 0.78rem/1.3 var(--sans); text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6); }
[data-theme="daylight"] .desk-toast { background: rgba(255, 253, 248, 0.96); }
.desk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.desk { position: relative; }
.desk.is-stage .desk-toast { position: fixed; top: 4.4rem; }
/* 4.16.1 · Walk me through it, with the drawing beside the questions, turning to each part of the home */
.xr__quiz:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.xq__main { min-width: 0; }
.xq__main .xq__top { margin-bottom: 1rem; }
.xq__main .xq__card { max-width: none; }
.xq__side { position: sticky; top: 1rem; display: grid; gap: 0.75rem; }
.xq__view { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); background: radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%), var(--card, var(--surface)); padding: clamp(0.75rem, 2vw, 1.25rem); box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.6); }
.xq__view .xr__fig { position: relative; top: 0; }
.xq__view .xr__hint { display: none; }
.xq__view .xr__canvas { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform-origin 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.xq__view .xr__spot { pointer-events: none; }
.xr__spot.is-asking { z-index: 3; }
.xr__spot.is-asking::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--gold); animation: xq-ask 1.6s ease-out infinite; pointer-events: none; }
@keyframes xq-ask { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.xq__where { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 0 0.4rem; font: 600 0.64rem/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.xq__where i { display: inline-flex; gap: 0.3rem; }
.xq__where b { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); transition: background-color 0.3s, transform 0.3s; }
.xq__where b.is-ok { background: #4f7b62; border-color: #4f7b62; }
.xq__where b.is-flag { background: #c0563e; border-color: #c0563e; }
.xq__where b.is-na { background: color-mix(in srgb, var(--text) 30%, transparent); }
.xq__where b.is-now { transform: scale(1.35); border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }
@media (max-width: 900px) { .xr__quiz:not([hidden]) { grid-template-columns: 1fr; } .xq__side { position: relative; order: -1; } .xq__view { max-height: 16rem; } }
html.is-compact .xr__quiz:not([hidden]) { grid-template-columns: 1fr; }
html.is-compact .xq__side { display: none; }
[data-motion="off"] .xq__view .xr__canvas { transition: none; }
[data-motion="off"] .xr__spot.is-asking::after { animation: none; opacity: 0.7; }
.xr__stage[hidden] { display: none !important; }
/* 4.16.1 · tools in the corner toolbox's floating window get a format of their own: the answer pinned on top, the
   inputs two to a row in a tight panel, smaller type, short hints, a dense breakdown, so most of a tool fits at once */
html.is-pocket body { font-size: 15px; }
html.is-pocket .nh-result-hero { padding: 0.6rem 3.2rem 0.65rem 0.75rem; }
html.is-pocket .nh-result-hero__value { font-size: clamp(1.45rem, 7vw, 1.9rem) !important; line-height: 1.1; }
html.is-pocket .nh-result-hero p, html.is-pocket .nh-result-hero__sub { font-size: 0.8rem; margin-top: 0.15rem; }
html.is-pocket .nh-tool__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.65rem; padding: 0.8rem 0.8rem 0.9rem; border-radius: 14px; }
html.is-pocket .nh-tool__inputs > :not(.nh-tf), html.is-pocket .nh-tool__inputs > .nh-tf--check, html.is-pocket .nh-tool__title { grid-column: 1 / -1; }
html.is-pocket .nh-tool__title { font-size: 1.02rem; margin: 0.1rem 0 -0.1rem; }
html.is-pocket .nh-tool__title--sub { margin-top: 0.35rem; padding-top: 0.65rem; font-size: 0.95rem; }
html.is-pocket .nh-tf { gap: 0.22rem; min-width: 0; }
html.is-pocket .nh-tf__label { font-size: 0.72rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-pocket .nh-tf__control input, html.is-pocket .nh-tf__control select, html.is-pocket .nh-input { min-height: 2.25rem !important; padding: 0.35rem 0.6rem; font-size: 0.86rem !important; border-radius: 9px; }
html.is-pocket .nh-tf__control.has-prefix input { padding-left: 1.35rem; }
html.is-pocket .nh-tf__control.has-suffix input { padding-right: 1.7rem; }
html.is-pocket .nh-tf__affix--pre { left: 0.6rem; font-size: 0.85rem; }
html.is-pocket .nh-tf__affix--post { right: 0.6rem; font-size: 0.85rem; }
html.is-pocket .nh-tf__control--select::after { right: 0.65rem; width: 0.38rem; height: 0.38rem; }
html.is-pocket .nh-tf__hint { font-size: 0.68rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.is-pocket .nh-tf:focus-within .nh-tf__hint { -webkit-line-clamp: unset; }
html.is-pocket .nh-check { font-size: 0.8rem; }
html.is-pocket .nh-rows > div { padding: 0.42rem 0; gap: 0.6rem; font-size: 0.84rem; }
html.is-pocket .nh-rows__title { font-size: 0.86rem; margin: 0.4rem 0 -0.3rem; }
html.is-pocket .nh-table { font-size: 0.8rem; }
html.is-pocket .nh-chart { max-height: 12rem; }
html.is-pocket .nh-meter__top { font-size: 0.82rem; }
html.is-pocket .nh-duo { gap: 0.5rem; }
html.is-pocket .nh-othertools, html.is-pocket .nh-tool-cta__box { display: none; }
/* a window narrower than a phone: one column */
@media (max-width: 340px) { html.is-pocket .nh-tool__inputs { grid-template-columns: 1fr; } }
/* Home X-Ray in the floating window: the drawing smaller, the walkthrough one tap away */
html.is-pocket .xr__fig { width: 82%; margin: 0 auto; }
html.is-pocket .xr__intro { display: none; }
html.is-pocket .xr__quizbtn { width: 100%; justify-content: center; padding: 0.7rem; font-size: 0.82rem; background: color-mix(in srgb, var(--gold) 14%, transparent); }
html.is-pocket .xq__card { padding: 1rem; border-radius: 16px; }
html.is-pocket .xq__h { font-size: 1.15rem !important; }
html.is-pocket .xq__opt { padding: 0.6rem 0.4rem; font-size: 0.74rem; }
html.is-pocket .xq__side { display: none; }
html.is-pocket .nh-result-hero__value--sm { font-size: clamp(1.15rem, 5.5vw, 1.45rem) !important; }

/* 4.16.1 · Auxiliary beside the toolbox (a double-click brought both): the toolbox's minus covers both, so Auxiliary's
   own minus waits until it's on its own; its label stays open a moment after hover so that minus can be reached */
.aux.is-paired .aux__dis { display: none; }
@media (hover: hover) { .aux.is-hover .aux__dot-l { max-width: 7rem; margin-left: 0.6rem; opacity: 1; } .aux.is-hover .aux__dot { border-color: var(--gold); } .aux.is-hover .aux__dot-grip { width: 0.6rem; margin-right: 0.45rem; opacity: 0.75; } }

/* 4.16.1 · with the controls hidden, bringing the bar back pushes the tools down under it, so every control can be used */
.desk.is-stage.is-zen { transition: padding-top 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.desk.is-stage.is-zen.is-peek { padding-top: calc(var(--zen-bar, 4.4rem) + 0.5rem); }
.desk.is-stage.is-zen .desk__bar { z-index: 60; }
[data-motion="off"] .desk.is-stage.is-zen { transition: none; }

.desk__grid.is-canvas .win.is-linked:not(.is-full) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 24px 50px -30px rgba(0, 0, 0, 0.65); }

/* 4.16.2 · the walkthrough lines up: the progress bar spans both columns; the drawing keeps its proportions and drops the
   ring labels (the caption under it names the part) */
.xr__quiz > .xq__top--wide { grid-column: 1 / -1; margin: 0; }
.xq__main .xq__card { margin-top: 0; }
.xq__view .xr__canvas { transform-origin: 50% 50%; }
.xq__view .xr__spot-tip { display: none !important; }
.xq__view { aspect-ratio: 900 / 640; display: grid; align-items: center; }
.xq__side { align-self: start; }

/* 4.16.3 · tool inputs fold away */
.nh-tool__inputs { position: relative; }
.nh-fold { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong, color-mix(in srgb, var(--text) 20%, transparent)); background: var(--bg); color: var(--muted); cursor: pointer; opacity: 0.7; transition: opacity 0.2s, color 0.2s, border-color 0.2s; }
.nh-fold svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nh-tool__inputs:hover .nh-fold, .nh-fold:focus-visible { opacity: 1; }
.nh-fold:hover, .nh-fold:focus-visible { color: var(--gold-hi, var(--gold)); border-color: var(--gold); outline: none; }
.nh-fold-strip[hidden] { display: none; }
.nh-tool.is-folded > .nh-tool__inputs { display: none; }
.nh-tool.is-folded { grid-template-columns: 3.2rem minmax(0, 1fr); }
.nh-fold-strip { align-self: start; position: sticky; top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; min-height: 15rem; padding: 0.9rem 0; border-radius: var(--radius-m, 18px); border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); color: var(--text); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.nh-fold-strip:hover, .nh-fold-strip:focus-visible { border-style: solid; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); outline: none; }
.nh-fold-strip i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gold); color: var(--on-gold, #fff); font-style: normal; font-weight: 600; }
.nh-fold-strip b { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 0.62rem/1 var(--sans, inherit); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.nh-fold-strip__sum { display: none; }
/* one column (narrow windows, phones): a line above the results with the main numbers */
@media (max-width: 960px) {
	.nh-tool.is-folded { grid-template-columns: 1fr; }
	.nh-fold-strip { flex-direction: row; min-height: 0; padding: 0.55rem 0.8rem; gap: 0.7rem; justify-content: flex-start; }
	.nh-fold-strip b { writing-mode: horizontal-tb; transform: none; }
	.nh-fold-strip__sum { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.78rem; color: var(--muted); }
}
html.is-compact .nh-tool.is-folded { grid-template-columns: 1fr; }
html.is-compact .nh-fold-strip { flex-direction: row; min-height: 0; padding: 0.55rem 0.8rem; gap: 0.7rem; justify-content: flex-start; order: -2; }
html.is-compact .nh-fold-strip b { writing-mode: horizontal-tb; transform: none; }
html.is-compact .nh-fold-strip__sum { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.76rem; color: var(--muted); }
.nh-fold-strip__sum em { font-style: normal; color: var(--muted); opacity: 0.8; }
.nh-fold-strip__sum span { color: var(--text); }

/* 4.16.3 · while dragging a window, a line between two rows: drop on it for a new row there */
.desk__gap { position: absolute; left: 1rem; right: 1rem; height: 0; z-index: 8; pointer-events: none; }
.desk__gap::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--gold) 45%, transparent); transition: background-color 0.2s, box-shadow 0.2s, height 0.2s, top 0.2s; }
.desk__gap span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--bg-2, #121716); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); white-space: nowrap; opacity: 0.75; }
.desk__gap.is-drop::before { top: -4px; height: 8px; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.desk__gap.is-drop span { opacity: 1; background: var(--gold); color: var(--on-gold, #fff); }
.win.is-dragging { z-index: 30; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); border-radius: 12px; overflow: hidden; }
/* 4.16.4 · "Whole screen": the computer's own full screen, only when asked for */
.desk__whole { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.3rem; padding: 0 0.85rem; border-radius: 999px; border: 1px solid var(--btn-line); background: none; color: var(--text); font: 600 0.78rem/1 var(--sans); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.desk__whole[hidden] { display: none; }
.desk__whole svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.desk__whole:hover, .desk__whole:focus-visible { border-color: var(--gold); outline: none; }
.desk__whole[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
@media (max-width: 1500px) { .desk__whole span { display: none; } .desk__whole { padding: 0 0.6rem; } }
/* 4.16.4 · a full-screen window stays above everything, even on a Snap or Free desk (where windows carry their own
   stacking order, which had left it under the dimmed backdrop) */
.desk__grid .win.is-full { z-index: 150 !important; }
html.desk-stage .desk__grid .win.is-full { z-index: 170 !important; }
html.desk-full .desk-hint { opacity: 0 !important; pointer-events: none; }

/* 4.16.5 · the tools menu has its own close */
.desk-pick .desk-pick__x { position: absolute; top: 0.55rem; right: 0.55rem; width: 1.9rem; height: 1.9rem; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); color: var(--muted); }
.desk-pick .desk-pick__x svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.desk-pick .desk-pick__x:hover, .desk-pick .desk-pick__x:focus-visible { color: var(--text); border-color: var(--gold); }
.desk-pick.is-tray .desk-pick__x { position: static; flex: none; align-self: center; }

/* 4.16.5 · a second way to put it away: just the toolbox, Auxiliary stays where it is (shown while Auxiliary is out) */
.desk-fab__solo { display: none; right: 1.05rem; }
.desk-fab__solo svg { stroke-width: 1.3; stroke-linejoin: round; }
body:has(.aux:not(.is-gone)) .desk-fab:not(.is-docked) .desk-fab__solo { display: grid; }
.desk-fab__x::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 0.45rem); right: -0.3rem; padding: 0.3rem 0.55rem; border-radius: 8px; background: var(--panel, #121615); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--text); font: 600 0.68rem/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap; opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity 0.18s, transform 0.18s; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5); }
body:has(.aux:not(.is-gone)) .desk-fab__x:not(.desk-fab__solo)::after { content: 'Toolbox and Auxiliary'; }
.desk-fab__x:hover::after, .desk-fab__x:focus-visible::after { opacity: 1; transform: none; }
[data-theme="daylight"] .desk-fab__x::after { background: #fffdf8; }

/* 4.16.5 · double-click an edge or the bar on a Snap or Free desk: the window grows; a small nudge when there's nowhere to go */
.desk__grid.is-canvas .win__edge--e, .desk__grid.is-canvas .win__edge--w { width: 8px; }
.desk__grid.is-canvas .win__edge--n, .desk__grid.is-canvas .win__edge--s { height: 8px; }
.win.is-bump { animation: win-bump 0.32s ease; }
@keyframes win-bump { 30% { translate: 0 -3px; } 60% { translate: 0 2px; } }
[data-motion="off"] .win.is-bump { animation: none; }

/* 4.16.5 · pictures in notes */
.rt__ed img { display: inline-block; max-width: 100%; height: auto; margin: 0.35rem 0; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: #fff; vertical-align: top; cursor: pointer; transition: box-shadow 0.2s, outline-color 0.2s; outline: 2px solid transparent; outline-offset: 2px; }
.rt__ed img:hover { outline-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.rt__ed img.is-sel { outline-color: var(--gold); }
.rt__ed img.is-missing { min-height: 4rem; min-width: 10rem; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 5%, transparent) 0 8px, transparent 8px 16px); }
.rt__tops--pic { grid-template-columns: repeat(3, auto); }
.rt__tops--pic .is-del { grid-column: 1 / -1; }
.rt__top.is-on { background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* 4.16.5 · charts to Notes */
.nh-chart.has-tonote { position: relative; }
.nh-chart.has-tonote figcaption { justify-content: flex-start; align-items: center; }
.nh-chart.has-tonote figcaption .nh-legend { margin-left: auto; }
.nh-tonote { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 16%, transparent)); background: none; color: var(--text); font: 600 0.72rem/1 var(--sans); letter-spacing: 0.02em; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.nh-legend + .nh-tonote { margin-left: 0.4rem; }
.nh-tonote svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nh-tonote:hover, .nh-tonote:focus-visible, .nh-tonote[aria-expanded="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); outline: none; }
.nh-tonote.is-busy { opacity: 0.55; pointer-events: none; }
.nh-tonote__menu { position: absolute; right: 0; top: 2.4rem; z-index: 20; width: min(17rem, 100%); padding: 0.45rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: var(--panel, var(--surface, #fff)); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55); }
.nh-tonote__menu[hidden] { display: none; }
.nh-tonote__h { margin: 0.25rem 0.5rem 0.4rem; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.nh-tonote__menu button { display: grid; gap: 0.15rem; width: 100%; padding: 0.55rem 0.6rem; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.nh-tonote__menu button b { font: 600 0.85rem/1.2 var(--sans); }
.nh-tonote__menu button span { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-tonote__menu button:hover, .nh-tonote__menu button:focus-visible { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); outline: none; }
.nh-tonote__done { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0.6rem 0 0; padding: 0.55rem 0.8rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); font-size: 0.82rem; opacity: 0; max-height: 0; overflow: hidden; padding-block: 0; transition: opacity 0.25s, max-height 0.3s, padding 0.3s; }
.nh-tonote__done.is-on { opacity: 1; max-height: 6rem; padding-block: 0.55rem; }
.nh-tonote__done button { margin-left: auto; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--gold); background: var(--gold); color: var(--on-gold, #fff); font: 600 0.74rem/1 var(--sans); cursor: pointer; }
html[data-embed] .nh-tonote__done { position: relative; }

/* 4.16.5 · Home X-Ray: the home bar folds to one line */
.xr__top { position: relative; padding-right: 3rem; }
.xr__top[hidden] { display: none !important; }
.xr__topfold { position: absolute; top: 0.55rem; right: 0.55rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--muted); cursor: pointer; }
.xr__topfold svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.xr__topfold:hover, .xr__topfold:focus-visible { color: var(--text); border-color: var(--gold); outline: none; }
.xr__topline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; width: 100%; padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); color: var(--text); font: 500 0.8rem/1.2 var(--sans); text-align: left; cursor: pointer; }
.xr__topline[hidden] { display: none; }
.xr__topline i { font-style: normal; font-weight: 700; color: var(--gold-hi, var(--gold)); }
.xr__topline b { font-weight: 600; }
.xr__topline span { color: var(--muted); }
.xr__topline em { font-style: normal; font-weight: 600; color: var(--xr-flag); }
.xr__topline:hover, .xr__topline:focus-visible { border-style: solid; border-color: var(--gold); outline: none; }

/* 4.16.5 · Home X-Ray in a desk window or a narrow screen: everything a size down, and the drawing never taller than
   about half the window, so the rings and the panel beside it stay in view */
html.is-compact .xr__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem; padding: 0.6rem 2.6rem 0.6rem 0.7rem; border-radius: 14px; }
html.is-compact .xr__home { flex: 1 1 100%; gap: 0.4rem; }
html.is-compact .xr__lbl { display: none; }
html.is-compact .xr__homepick { flex: 0 1 12rem; }
html.is-compact .xr__homepick select, html.is-compact .xr__mini, html.is-compact .xr__addr { min-height: 2rem; font-size: 0.82rem; padding-top: 0.3rem; padding-bottom: 0.3rem; border-radius: 9px; }
html.is-compact .xr__mini { padding-inline: 0.65rem; font-size: 0.76rem; }
html.is-compact .xr__addr { flex: 1 1 9rem; }
html.is-compact .xr__type { padding: 2px; }
html.is-compact .xr__type button { min-height: 1.8rem; padding: 0 0.75rem; font-size: 0.74rem; }
html.is-compact .xr__quizbtn { padding: 0.4rem 0.7rem; font-size: 0.72rem; }
html.is-compact .xr__score { gap: 0.45rem; margin-left: auto; }
html.is-compact .xr__ring { width: 1.9rem; height: 1.9rem; }
html.is-compact .xr__score strong { font-size: 1rem; }
html.is-compact .xr__score p > span { font-size: 0.68rem; }
html.is-compact .xr__topfold { top: 0.45rem; right: 0.45rem; width: 1.5rem; height: 1.5rem; }
html.is-compact .xr__canvas { width: min(100%, calc(52vh * 900 / 620)); margin-inline: auto; }
html.is-compact .xr__spot { width: 1.8rem; height: 1.8rem; margin: -0.9rem 0 0 -0.9rem; }
html.is-compact .xr__spot-dot { width: 0.42rem; height: 0.42rem; }
.xr__canvas { max-width: calc(72vh * 900 / 620); margin-inline: auto; }
[data-theme="daylight"] .desk-fab__x:hover, [data-theme="daylight"] .desk-fab__x:focus-visible { background: var(--gold); color: var(--on-gold, #fff); }
html.is-compact .xr__intro { padding: 0.9rem 1rem; }
html.is-compact .xr__intro .xr__h { font-size: 1.25rem; margin-bottom: 0.6rem; }
html.is-compact .xr__startacts { gap: 0.45rem; }
html.is-compact .xr__startacts .btn { min-height: 2.2rem; padding: 0.5rem 0.9rem; font-size: 0.66rem; }

/* 4.16.6 · Auxiliary turns see-through while you work in the tool beneath it (rest the pointer on it to bring it back) */
.aux.is-open { transition: opacity 0.35s ease, filter 0.35s ease; }
.aux.is-open.is-ghost { opacity: 0.2; filter: saturate(0.6); pointer-events: none; }
.aux.is-open.is-ghost * { pointer-events: none !important; }
.aux.is-open.is-ghost.is-ghost-hint { opacity: 0.55; }
.aux.is-open.is-ghost.is-ghost-hint::after { content: "See-through while you work · rest the pointer here to bring it back"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 90%; padding: 0.45rem 0.8rem; border-radius: 999px; background: var(--panel, #121615); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--text); font: 600 0.72rem/1.3 var(--sans); text-align: center; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
[data-motion="off"] .aux.is-open { transition: none; }

/* 4.16.6 · the assistant in Auxiliary: just the conversation */
.aux__out { display: none; place-items: center; width: 1.9rem; height: 1.9rem; margin-right: 0.35rem; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: none; color: var(--muted); cursor: pointer; }
.aux__out svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.aux__out:hover, .aux__out:focus-visible { color: var(--text); border-color: var(--gold); outline: none; }
.aux.is-chat .aux__out { display: grid; }
.aux.is-chat .aux__ai { display: none; }
.aux.is-chat .aux__pane[data-aux-pane="chat"] { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.aux.is-chat .aux__chat { min-height: 0; height: 100%; border-radius: 12px; }

/* 4.16.7 · while dragging a window: a line between two windows of the top row puts it in between them */
.desk__ins { position: absolute; z-index: 8; pointer-events: none; }
.desk__ins.is-v { width: 0; }
.desk__ins.is-h { height: 0; }
.desk__ins::before { content: ""; position: absolute; border-radius: 4px; background: color-mix(in srgb, var(--gold) 45%, transparent); transition: background-color 0.2s, box-shadow 0.2s; }
.desk__ins.is-v::before { top: 0.6rem; bottom: 0.6rem; left: -2px; width: 4px; }
.desk__ins.is-h::before { left: 0.6rem; right: 0.6rem; top: -2px; height: 4px; }
.desk__ins span { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--bg-2, #121716); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); white-space: nowrap; opacity: 0.8; }
.desk__ins.is-h span { left: 50%; top: 0; }
.desk__ins.is-drop::before { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.desk__ins.is-v.is-drop::before { left: -4px; width: 8px; }
.desk__ins.is-h.is-drop::before { top: -4px; height: 8px; }
.desk__ins.is-drop span { opacity: 1; background: var(--gold); color: var(--on-gold, #fff); }
.desk-toast, .desk.is-stage .desk-toast { position: fixed; z-index: 400; } /* 4.16.7 · never under the windows */

/* 4.16.7 · where a window will snap when it's carried to an edge of the desk */
.desk__zone { position: absolute; z-index: 5; border-radius: 16px; border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--gold) 8%, transparent); opacity: 0; transform: scale(0.97); pointer-events: none; transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), left 0.18s, top 0.18s, width 0.18s, height 0.18s; }
.desk__zone.is-on { opacity: 1; transform: none; }

/* 4.16.7 · tools in a desk window size themselves to the window: the big numbers, headings and charts follow the
   window's height as well as its width, so a short, wide window doesn't blow them up and everything fits in view */
html[data-embed] .nh-result-hero__value { font-size: clamp(1.9rem, min(4vw, 7vh), 3rem); }
html[data-embed] .nh-result-hero { gap: 0.3rem; }
html[data-embed] .nh-chart__plot svg { max-height: min(42vh, 320px); }
html[data-embed] .xr__h, html[data-embed] .xq__h { font-size: clamp(1.2rem, min(2.2vw, 3.8vh), 1.65rem); }
html[data-embed] .xq__card { padding: clamp(1rem, 2.6vh, 1.6rem) clamp(1rem, 2.4vw, 1.6rem); border-radius: 18px; }
html[data-embed] .xq__d { font-size: 0.9rem; margin-top: 0.5rem; }
html[data-embed] .xq__opts { margin-top: 1rem; gap: 0.5rem; }
html[data-embed] .xq__opt { padding: 0.75rem 0.5rem; border-radius: 14px; gap: 0.4rem; }
html[data-embed] .xq__foot { margin-top: 0.9rem; }
html[data-embed] .xq__top { margin-bottom: 0.6rem; }
html[data-embed] .xr__report { gap: 0.9rem 1.5rem; padding: clamp(0.9rem, 2vh, 1.3rem) clamp(1rem, 2vw, 1.4rem); border-radius: 16px; }
html[data-embed] .xr__report .xr__p { font-size: 0.86rem; }
html[data-embed] .xr__concerns { margin-top: 0.6rem; gap: 0.35rem; }
html[data-embed] .xr__concerns strong { font-size: 0.85rem; }
html[data-embed] .xr__actions { gap: 0.4rem; }
html[data-embed] .xr__actions .btn { min-height: 2.2rem; padding: 0.5rem 0.85rem; font-size: 0.62rem; }
html[data-embed] .xr__clear, html[data-embed] .xr__saved { font-size: 0.72rem; }
html[data-embed] .xr__canvas { max-width: calc(58vh * 900 / 620); }

/* 4.16.7 · "Your X-Ray so far" folds to one line, like the home bar */
.xr__report { position: relative; }
.xr__repfold { position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--muted); cursor: pointer; }
.xr__repfold svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.xr__repfold:hover, .xr__repfold:focus-visible { color: var(--text); border-color: var(--gold); outline: none; }
.xr__report[hidden] { display: none !important; }
.xr__report { padding-right: 3rem !important; }

/* 4.16.7 · the notes formatting bar follows only while the note is in use; folded, it peeks open on a resting pointer */
.rt__bar { top: 0; }
.rt.is-live .rt__bar { top: var(--nhc-covered, 0px); }
.rt.is-folded.is-peek .rt__bar > .rt__g { display: inline-flex; }
.rt.is-folded.is-peek .rt__foldl { display: none; }
.rt.is-folded.is-peek .rt__bar { padding-block: 0.4rem; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.4); }
.rt.is-folded:not(.is-peek) .rt__bar { cursor: default; }
/* 4.16.7 · see-through means see-through, on the full-screen desk too (its own rule kept Auxiliary solid there) */
html .aux.is-open.is-ghost { opacity: 0.1 !important; pointer-events: none !important; filter: saturate(0.4); }
html .aux.is-open.is-ghost.is-ghost-hint { opacity: 0.6 !important; }
html .aux.is-open.is-ghost .aux__panel { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 4.16.8 · "View" (text size, contrast, motion) in the desk's bar */
.desk__a11y { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--btn-line); background: none; color: var(--text); font: 600 0.74rem/1 var(--sans); cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
.desk__a11y svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.desk__a11y:hover, .desk__a11y:focus-visible, .desk__a11y[aria-expanded="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); outline: none; }
.desk__a11y[hidden] { display: none; }
html.desk-stage .a11y__panel.is-float, html.desk-full .a11y__panel.is-float, html.tool-stage .a11y__panel.is-float { z-index: 260 !important; }
.a11y__panel.is-float { z-index: 260; } /* 4.16.8 · above desk windows */
/* 4.16.8 · while see-through, Auxiliary's title bar stays reachable: touch it and it comes straight back */
html .aux.is-open.is-ghost .aux__head { pointer-events: auto !important; }

/* 4.16.8 · Auxiliary by size: icons for the tabs when narrow; a scientific pad and a month calendar when wide */
.aux__ti { display: none; }
.aux__ti svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; display: block; }
.aux.is-slim .aux__ti { display: grid; place-items: center; }
.aux.is-slim .aux__tl { display: none; }
.aux.is-slim .aux__tabs button { display: grid; place-items: center; padding: 0.4rem 0.2rem; }
.aux__tabs button { overflow: hidden; text-overflow: clip; }
.aux__pads { display: grid; }
.aux__sci { display: none; }
.aux.is-wide .aux__pads { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 0.6rem; }
.aux.is-wide .aux__sci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.aux__k.is-sci { color: var(--muted); font: 600 0.82rem/1 var(--sans); background: color-mix(in srgb, var(--gold) 4%, transparent); }
.aux__k.is-sci sup { font-size: 0.6em; }
.aux__k[data-k="deg"] { color: var(--gold-hi, var(--gold)); letter-spacing: 0.04em; }
.aux__cal { display: none; }
.aux.is-wide .aux__dpage { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.aux.is-wide .aux__cal { display: block; padding: 0.7rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); background: color-mix(in srgb, var(--gold) 4%, transparent); }
.aux__calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.aux__calhead strong { font: 400 1.05rem/1.1 var(--serif); }
.aux__calhead button { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 50%; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 14%, transparent)); background: none; color: var(--text); cursor: pointer; }
.aux__calhead svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aux__calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; text-align: center; }
.aux__calw { font: 600 0.6rem/1.8 var(--sans); letter-spacing: 0.1em; color: var(--muted); }
.aux__cald { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); font: 500 0.78rem/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.aux__cald:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.aux__cald.is-past { color: color-mix(in srgb, var(--text) 45%, transparent); }
.aux__cald.is-today { border-color: var(--gold); font-weight: 700; }
.aux__cald.has-ev::after { content: ""; position: absolute; left: 50%; bottom: 0.2rem; width: 0.3rem; height: 0.3rem; margin-left: -0.15rem; border-radius: 50%; background: var(--gold); }
.aux__cald.is-pick { background: var(--gold); color: var(--on-gold, #fff); }
.aux__cald.is-pick::after { background: var(--on-gold, #fff); }
.aux__calnote { display: grid; gap: 0.15rem; margin: 0.6rem 0 0; font-size: 0.74rem; line-height: 1.4; color: var(--muted); }
.aux__calnote strong { color: var(--text); font-weight: 600; }
.aux__calnote small { display: block; font-size: 0.7rem; }
.aux__dates li.is-pick { border-color: var(--gold); }

/* 4.16.9 · tools in desk windows, laid out for the window's shape (replaces 4.16.8's two-column rule)
   - one type scale in a window: body text a step above the chart's labels (charts keep their labels at about 12 px
     whatever their size, tools.js sets --lab), headings and big numbers scaled to the space they have;
   - tall and narrow: the headline and its key numbers on top, a smaller chart under them, then the details;
   - square or wide: the numbers on the left, the chart beside them;
   - very wide and short: three columns, the numbers, the details and the chart side by side.
   Results lay out by their own width (a container), so the same rules work inside the page's two-column form too. */
html[data-embed] .nh-result-hero__label { font-size: 0.82rem; margin-bottom: 0.2rem; }
html[data-embed] .nh-result-hero__sub { font-size: 0.86rem; margin-top: 0.45rem; line-height: 1.45; }
html[data-embed] .nh-result-hero__value { font-size: clamp(1.6rem, min(3.6vw, 6.4vh), 2.6rem); }
html[data-embed] .nh-result-hero__value--sm { font-size: clamp(1.35rem, min(3vw, 5.4vh), 2.2rem); }
html[data-embed] .nh-rows > div { padding: 0.48rem 0; gap: 0.75rem; }
html[data-embed] .nh-rows dt, html[data-embed] .nh-rows dd { font-size: 0.86rem; line-height: 1.4; }
html[data-embed] .nh-duo { container: duo / inline-size; }
html[data-embed] .nh-duo > div { padding: 0.75rem 0.9rem; min-width: 0; }
html[data-embed] .nh-duo p { font-size: 0.76rem; margin-bottom: 0.15rem; }
html[data-embed] .nh-duo strong { display: block; font-size: clamp(1.05rem, 7.5cqi, 1.6rem); white-space: nowrap; }
html[data-embed] .nh-chart figcaption { font-size: 0.82rem; margin-bottom: 0.45rem; gap: 0.35rem 0.7rem; }
html[data-embed] .nh-legend { font-size: 0.74rem; }
html[data-embed] .nh-tonote { padding: 0.25rem 0.55rem; font-size: 0.66rem; }
html[data-embed] .nh-svg-label { font-size: var(--lab, 11px); }
html.is-compact[data-embed] .nh-chart { display: block !important; }
html.is-compact[data-embed] .nh-legend { display: inline-flex !important; }
html[data-embed] .nh-fold-strip { position: relative; top: auto; } /* the folded "Your numbers" strip no longer floats over the result */
html[data-embed] .nh-tool__results > * { min-width: 0; }

/* tall and narrow: headline and key numbers, then a smaller chart, then the details */
@media (max-aspect-ratio: 3/4) {
	html[data-embed] .nh-tool__results .nh-chart__plot svg { max-height: min(30vh, 240px); }
	html[data-embed] .nh-tool__results > .nh-chart { order: 2; }
	html[data-embed] .nh-tool__results > .nh-result-hero { order: 0; }
	html[data-embed] .nh-tool__results > .nh-duo, html[data-embed] .nh-tool__results > .nh-alerts, html[data-embed] .nh-tool__results > .nh-meters { order: 1; }
	html[data-embed] .nh-tool__results > .nh-rows, html[data-embed] .nh-tool__results > details { order: 3; }
	html.is-compact[data-embed] .xq__side { display: grid !important; order: -1; position: relative; top: 0; }
	html[data-embed] .xq__view { aspect-ratio: auto; height: min(34vh, 300px); max-height: none; }
	html[data-embed] .xr__canvas { max-width: calc(44vh * 900 / 620); }
}
/* square or wide: numbers left, chart right */
@media (min-aspect-ratio: 3/4) {
	html[data-embed] .nh-tool__results.is-r2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-auto-flow: row dense; gap: 0.8rem 1.4rem; align-items: start; }
	html[data-embed] .nh-tool__results.is-r2 > * { grid-column: 1; }
	html[data-embed] .nh-tool__results.is-r2 > .nh-chart { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: calc(var(--nhc-covered, 0px) + 0.5rem); }
	html[data-embed] .nh-tool__results.is-r2 > .nh-chart .nh-chart__plot svg { max-height: min(62vh, 420px); }
	/* very wide and short: the numbers, the details and the chart in three columns */
	html[data-embed] .nh-tool__results.is-r3 { grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.2fr); }
	html[data-embed] .nh-tool__results.is-r3 > .nh-rows, html[data-embed] .nh-tool__results.is-r3 > details { grid-column: 2; grid-row: 1 / span 8; }
	html[data-embed] .nh-tool__results.is-r3 > .nh-chart { grid-column: 3; }
}
@media (min-width: 600px) and (min-aspect-ratio: 3/4) {
	html.is-compact[data-embed] .xr__stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
	html.is-compact[data-embed] .xr__fig { position: sticky; top: calc(var(--nhc-covered, 0px) + 0.5rem); }
	html[data-embed] .xr__quiz:not([hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important; gap: 1rem; }
	html[data-embed] .xr__quiz:not([hidden]) .xq__main { order: 0; }
	html.is-compact[data-embed] .xq__side, html[data-embed] .xq__side { display: grid !important; order: 1 !important; position: sticky; top: calc(var(--nhc-covered, 0px) + 0.5rem); }
	html[data-embed] .xq__opts { grid-template-columns: 1fr; }
	html[data-embed] .xq__opt { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; padding: 0.55rem 0.8rem; }
	/* the house gets a taller view: as tall as the window allows beside the questions */
	html[data-embed] .xq__view { aspect-ratio: auto; height: min(calc(100vh - var(--nhc-covered, 0px) - 7rem), 640px); min-height: 16rem; max-height: none; }
}
html[data-embed] .xq__opt { font-size: 0.86rem; }
html[data-embed] .xq__d { font-size: 0.86rem; line-height: 1.5; }
html[data-embed] .xq__k, html[data-embed] .xq__where { font-size: 0.6rem; }

/* 4.16.9 · the note's writing area fits its text: it grows (and can be pulled taller from its bottom edge, up and down
   only) as far as the screen's height, then scrolls inside; it settles back to its text once you move away */
.nb { min-height: 0; }
.nb__body, html.is-compact .nb__body { min-height: 0; }
.nb .rt__ed { flex: none; min-height: 7.5rem; max-height: calc(100vh - var(--nhc-covered, 0px) - 3rem); overflow-y: auto; resize: vertical; padding-bottom: 1rem; overscroll-behavior: contain; }
.nb .rt__ed::-webkit-resizer { background: transparent; }

/* 4.16.9 · sticky notes on the tools */
.toolbox { position: relative; }
.sticky { position: absolute; z-index: 30; display: flex; flex-direction: column; min-width: 140px; min-height: 110px; max-width: 520px; border-radius: 4px 4px 14px 4px; background: var(--st, #fbe7a1); color: #2a2618; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 14px 26px -14px rgba(40, 30, 10, 0.55); resize: both; overflow: hidden; transform-origin: top left; }
.sticky.is-drag { z-index: 500; cursor: grabbing; box-shadow: 0 26px 46px -18px rgba(40, 30, 10, 0.6); transform: rotate(-1.2deg); }
.sticky.is-new { animation: st-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes st-in { from { opacity: 0; transform: scale(0.85) rotate(-3deg); } }
.sticky__bar { flex: none; display: flex; align-items: center; gap: 0.3rem; height: 1.7rem; padding: 0 0.3rem 0 0.5rem; background: color-mix(in srgb, #000 7%, transparent); cursor: grab; touch-action: none; }
.sticky__grip { flex: 1; height: 0.35rem; background: radial-gradient(circle, rgba(0, 0, 0, 0.28) 1px, transparent 1.4px) 0 0 / 6px 6px; opacity: 0.8; }
.sticky__c, .sticky__x { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #2a2618; cursor: pointer; }
.sticky__c::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: conic-gradient(#fbe7a1 0 20%, #f7cfd6 0 40%, #cfe6cf 0 60%, #cfe0f5 0 80%, #e2d6f5 0); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.sticky__x svg { width: 0.6rem; height: 0.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sticky__c:hover, .sticky__x:hover { background: rgba(0, 0, 0, 0.1); }
.sticky.is-arm .sticky__x { background: #b3261e; color: #fff; }
.sticky__t { flex: 1; width: 100%; padding: 0.5rem 0.65rem 0.7rem; border: 0; background: transparent; color: #2a2618; font: 500 0.88rem/1.45 var(--sans); resize: none; outline: none; }
.sticky__t::placeholder { color: rgba(42, 38, 24, 0.5); }
.aux__st { display: grid; gap: 0.6rem; }
.aux__stk { margin: 0.2rem 0 0; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.aux__sts { display: flex; gap: 0.5rem; }
.aux__stc { width: 2rem; height: 2rem; padding: 0; border-radius: 6px 6px 10px 6px; border: 2px solid transparent; background: var(--st); cursor: pointer; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.5); transition: transform 0.2s, border-color 0.2s; }
.aux__stc[aria-checked="true"] { border-color: var(--gold); transform: translateY(-2px); }
.aux__stadd { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 0.9rem; border-radius: 999px; border: 1px solid var(--gold); background: var(--gold); color: var(--on-gold, #fff); font: 600 0.78rem/1 var(--sans); cursor: pointer; }
.aux__stadd svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.aux__stl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.aux__stl li { display: flex; align-items: center; gap: 0.3rem; }
.aux__stl li > button:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: none; color: var(--text); text-align: left; cursor: pointer; }
.aux__stl li > button:first-child:disabled { opacity: 0.55; cursor: default; }
.aux__stl i { flex: none; width: 1rem; height: 1rem; border-radius: 3px 3px 6px 3px; background: var(--st); }
.aux__stl span { display: grid; min-width: 0; }
.aux__stl strong { font: 600 0.8rem/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aux__stl em { font: 500 0.7rem/1.3 var(--sans); font-style: normal; color: var(--muted); }
.aux__stdel { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.aux__stdel svg { width: 0.6rem; height: 0.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.aux__stdel:hover { border-color: var(--line-strong); color: var(--text); }
html[data-embed] .nh-result-hero__value { font-size: clamp(1.8rem, min(6.5vw, 7.5vh, 3.8vw + 1rem), 2.8rem); }
html[data-embed] .nh-result-hero__value--sm { font-size: clamp(1.45rem, min(5.4vw, 6.2vh, 3vw + 0.8rem), 2.3rem); }
html[data-embed] .nh-rows > div { flex-direction: row; align-items: baseline; }
html[data-embed] .nh-rows dd { text-align: right; flex: none; }
html[data-embed] .nh-tool__results.is-r2 > .nh-chart figcaption { padding-right: 2.6rem; } /* clear of the tool's own … menu */

/* ---------- 4.17.0 · Split view: the tools show their results; the inputs live in the controls panel ---------- */
html.is-split .nh-tool__inputs, html.is-split .nh-fold-strip, html.is-split .nh-fold, html.is-split .nh-tool .nh-tf__hint { display: none !important; }
html.is-split .nh-tool { grid-template-columns: minmax(0, 1fr) !important; }
html.is-split .nh-tool__results { order: 0 !important; position: static; }
html.is-split:not([data-embed]) .nh-tool__results { max-width: 72rem; margin-inline: auto; width: 100%; }

/* the panel */
.ctl { --ctl-line: color-mix(in srgb, var(--gold) 26%, transparent); position: fixed; z-index: 78; display: flex; flex-direction: column; width: 380px; max-height: calc(100vh - 20px); border-radius: 24px; border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--panel, #121615) 96%, var(--gold) 4%), color-mix(in srgb, var(--panel, #121615) 98%, transparent)); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); color: var(--text); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent), 0 40px 90px -40px rgba(0, 0, 0, 0.85); overflow: hidden; transition: opacity 0.35s ease, filter 0.35s ease; }
.ctl[hidden] { display: none; }
[data-theme="daylight"] .ctl { background: linear-gradient(170deg, rgba(255, 253, 248, 0.97), rgba(250, 246, 237, 0.96)); box-shadow: inset 0 1px 0 #fff, 0 40px 80px -40px rgba(70, 52, 18, 0.45); }
.ctl.is-pop { animation: ctl-in 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ctl-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.ctl.is-drag, .ctl.is-sizing { user-select: none; }
html.desk-stage .ctl, html.tool-stage .ctl { z-index: 160; }
html.desk-full .ctl { z-index: 185; }
.ctl__head { flex: none; display: flex; align-items: center; gap: 0.6rem; padding: 1rem 0.85rem 0.75rem 0.9rem; cursor: grab; touch-action: none; }
.ctl.is-drag .ctl__head { cursor: grabbing; }
.ctl__grip svg { width: 0.5rem; height: 0.9rem; fill: color-mix(in srgb, var(--text) 35%, transparent); display: block; }
.ctl__ttl { flex: 1; min-width: 0; }
.ctl__k { margin: 0 0 0.2rem; font: 600 0.58rem/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.ctl__h { margin: 0; font: 400 1.35rem/1.05 var(--serif); letter-spacing: -0.005em; }
.ctl__view { display: inline-flex; align-items: center; gap: 0.35rem; height: 1.9rem; padding: 0 0.7rem 0 0.55rem; border-radius: 999px; border: 1px solid var(--ctl-line); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--text); font: 600 0.66rem/1 var(--sans); letter-spacing: 0.06em; cursor: pointer; }
.ctl__view svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: var(--gold-hi, var(--gold)); stroke-width: 1.3; }
.ctl__view:hover { border-color: var(--gold); }
.ctl__x { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 16%, transparent)); background: none; color: var(--text); cursor: pointer; }
.ctl__x svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ctl__x:hover { border-color: var(--gold); }
/* scenarios */
.ctl__scen { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin: 0 0.85rem 0.6rem; padding: 0.3rem; border-radius: 16px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.ctl__sc { display: grid; gap: 0.2rem; min-width: 0; padding: 0.5rem 0.55rem; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text); text-align: left; cursor: pointer; transition: background-color 0.25s, border-color 0.25s; }
.ctl__sc b { font: 600 0.72rem/1.15 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl__sc span { font: 400 0.82rem/1.1 var(--serif); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl__sc:hover { border-color: var(--ctl-line); }
.ctl__sc[aria-selected="true"] { background: var(--panel, #121615); border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent); }
[data-theme="daylight"] .ctl__sc[aria-selected="true"] { background: #fffdf8; }
.ctl__sc[aria-selected="true"] span { color: var(--gold-hi, var(--gold)); }
.ctl__scname { width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--gold); background: none; color: var(--text); font: 600 0.72rem/1.15 var(--sans); outline: none; }
/* body */
.ctl__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.1rem 0.85rem 0.6rem; scrollbar-width: thin; overscroll-behavior: contain; }
.ctl__sec { border-top: 1px solid var(--ctl-line); }
.ctl__sec:first-child { border-top: 0; }
.ctl__sech { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.85rem 0.1rem 0.7rem; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.ctl__n { font: 400 0.95rem/1 var(--serif); color: var(--gold-hi, var(--gold)); font-variant-numeric: lining-nums; }
.ctl__st { flex: 1; display: grid; gap: 0.15rem; font: 600 0.66rem/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.ctl__st em { font: 400 0.72rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--muted); }
.ctl__sech i { width: 0.55rem; height: 0.55rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform 0.3s; }
.ctl__sec.is-closed .ctl__sech i { transform: rotate(-45deg); }
.ctl__sec.is-closed .ctl__rows { display: none; }
.ctl__rows { display: grid; gap: 0.15rem; padding: 0 0.1rem 0.9rem; }
.ctl__sub { margin: 0.6rem 0 0.1rem; font: 600 0.58rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.ctl__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.75rem; padding: 0.55rem 0; }
.ctl__row[hidden] { display: none; }
.ctl__row + .ctl__row { border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
.ctl__l { font: 500 0.8rem/1.3 var(--sans); color: color-mix(in srgb, var(--text) 82%, transparent); }
.ctl__val { justify-self: end; width: 8.5rem; padding: 0.1rem 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--text); font: 400 1.12rem/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; text-align: right; outline: none; transition: border-color 0.2s; }
.ctl__val:hover { border-bottom-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.ctl__val:focus { border-bottom-color: var(--gold); font-family: var(--sans); font-size: 0.95rem; }
.ctl__row.is-big .ctl__val { font-size: 1.55rem; width: 11rem; color: var(--gold-hi, var(--gold)); }
.ctl__pct { grid-column: 1 / -1; justify-self: end; margin-top: -0.2rem; font: 500 0.68rem/1 var(--sans); color: var(--muted); }
.ctl__rng, .pbar input[type="range"] { --fill: 40%; grid-column: 1 / -1; width: 100%; height: 1.4rem; margin: 0.1rem 0 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ctl__rng::-webkit-slider-runnable-track, .pbar input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent) 0, var(--gold-hi, var(--gold)) var(--fill), color-mix(in srgb, var(--text) 13%, transparent) var(--fill)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15); }
.ctl__rng::-moz-range-track, .pbar input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 13%, transparent); }
.ctl__rng::-moz-range-progress, .pbar input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), var(--gold-hi, var(--gold))); }
.ctl__rng::-webkit-slider-thumb, .pbar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fffaf0 0 32%, var(--gold-hi, var(--gold)) 34% 100%); border: 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 70%, #000 10%), 0 4px 10px -3px rgba(0, 0, 0, 0.55), 0 0 0 6px color-mix(in srgb, var(--gold) 0%, transparent); transition: transform 0.2s, box-shadow 0.25s; }
.ctl__rng::-moz-range-thumb, .pbar input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 0; background: radial-gradient(circle at 50% 40%, #fffaf0 0 32%, var(--gold-hi, var(--gold)) 34% 100%); box-shadow: 0 0 0 1px var(--gold), 0 4px 10px -3px rgba(0, 0, 0, 0.55); }
.ctl__rng:hover::-webkit-slider-thumb, .pbar input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--gold), 0 4px 10px -3px rgba(0, 0, 0, 0.55), 0 0 0 6px color-mix(in srgb, var(--gold) 16%, transparent); }
.ctl__rng:active::-webkit-slider-thumb, .pbar input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.ctl__rng:focus-visible::-webkit-slider-thumb, .pbar input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--gold-hi, var(--gold)), 0 0 0 7px color-mix(in srgb, var(--gold) 22%, transparent); }
.ctl__rng:focus-visible, .pbar input[type="range"]:focus-visible { outline: none; }
.ctl__pills { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; padding: 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.ctl__pills button { padding: 0.32rem 0.65rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 0.7rem/1 var(--sans); cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.ctl__pills button[aria-checked="true"] { background: var(--gold); color: var(--on-gold, #fff); }
.ctl__sel select { max-width: 12rem; padding: 0.35rem 1.7rem 0.35rem 0.7rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a08a5a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.65rem center / 0.6rem; color: var(--text); font: 600 0.72rem/1.2 var(--sans); -webkit-appearance: none; appearance: none; cursor: pointer; }
.ctl__tog { position: relative; display: inline-block; width: 2.3rem; height: 1.3rem; flex: none; }
.ctl__tog input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ctl__tog i { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 16%, transparent); transition: background-color 0.25s; }
.ctl__tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 4px); height: calc(1.3rem - 4px); border-radius: 50%; background: #fffaf0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.ctl__tog input:checked + i { background: var(--gold); }
.ctl__tog input:checked + i::after { transform: translateX(1rem); }
.ctl__tog input:focus-visible + i { box-shadow: 0 0 0 2px var(--gold-hi, var(--gold)); }
.ctl__row--check { cursor: pointer; }
.ctl__empty { padding: 1.4rem 0.4rem; text-align: center; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.ctl__eh { margin: 0 0 0.3rem; font: 400 1.15rem/1.2 var(--serif); color: var(--text); }
.ctl__foot { flex: none; margin: 0; padding: 0.55rem 1rem 0.8rem; border-top: 1px solid var(--ctl-line); font: 500 0.68rem/1.35 var(--sans); color: var(--muted); }
.ctl__foot:empty { display: none; }
.ctl__size { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--gold) 50%, transparent) 50% 56%, transparent 56% 70%, color-mix(in srgb, var(--gold) 50%, transparent) 70% 76%, transparent 76%); border-bottom-right-radius: 22px; touch-action: none; }
/* wide: the details in two columns */
.ctl.is-wide .ctl__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.4rem; }
.ctl.is-wide .ctl__row + .ctl__row { border-top: 0; }
.ctl.is-wide .ctl__row { border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
.ctl.is-wide .ctl__sub, .ctl.is-wide .ctl__row.is-big { grid-column: 1 / -1; }
/* see-through while working elsewhere */
html .ctl.is-ghost { opacity: 0.1 !important; pointer-events: none !important; filter: saturate(0.4); }
html .ctl.is-ghost * { pointer-events: none !important; }
html .ctl.is-ghost .ctl__head { pointer-events: auto !important; }
/* the pill, and the desk's button */
.ctl-pill { position: fixed; z-index: 77; right: 1.1rem; bottom: 5.6rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem 0.6rem 0.85rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--panel, #121615) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); font: 600 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 18px 34px -20px rgba(0, 0, 0, 0.7); }
.ctl-pill[hidden] { display: none; }
.ctl-pill svg, .desk__ctl svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.ctl-pill svg circle, .desk__ctl svg circle { fill: var(--panel, #121615); stroke: var(--gold-hi, var(--gold)); }
.ctl-pill:hover { border-color: var(--gold); }
html.desk-stage .ctl-pill, html.tool-stage .ctl-pill { z-index: 160; }
.desk__ctl { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--btn-line); background: none; color: var(--text); font: 600 0.74rem/1 var(--sans); cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
.desk__ctl:hover, .desk__ctl[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.desk__ctl[hidden] { display: none; }
/* Auxiliary › Settings */
.aux__set { display: grid; gap: 0.7rem; }
.aux__views { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.aux__vw { display: grid; gap: 0.35rem; align-content: start; padding: 0.7rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); background: none; color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.aux__vw strong { font: 400 1.05rem/1.1 var(--serif); }
.aux__vw span { font-size: 0.7rem; line-height: 1.4; color: var(--muted); }
.aux__vw[aria-checked="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.aux__vwi { display: grid; gap: 4px; height: 2.4rem; padding: 4px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.aux__vwi b { border-radius: 3px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.aux__vwi--t { grid-template-columns: 1fr 1.6fr; }
.aux__vwi--t b:first-child { background: color-mix(in srgb, var(--gold) 35%, transparent); }
.aux__vwi--s { grid-template-columns: 0.7fr 2fr; }
.aux__vwi--s b:first-child { background: var(--gold); border-radius: 6px; }
.aux__sw { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0.1rem; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); cursor: pointer; }
.aux__sw span:first-child { display: grid; gap: 0.15rem; }
.aux__sw strong { font: 600 0.8rem/1.2 var(--sans); }
.aux__sw em { font-style: normal; font-size: 0.7rem; color: var(--muted); line-height: 1.35; }
/* 4.17.0 · the desk's purchase price slider, in the same hand as the controls */
.desk__bar .pbar--desk { border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%); }
.pbar__l { letter-spacing: 0.24em; color: var(--gold-hi, var(--gold)); }
.pbar__v { font-size: 1.2rem; color: var(--text); }
/* 4.17.0 · results with no chart (affordability, closing costs' cash list…) no longer leave the second column empty
   in a wide window: they flow into two balanced columns */
@media (min-aspect-ratio: 3/4) {
	html[data-embed]:not(.is-split) .nh-tool__results.is-r2:not(:has(> .nh-chart)), html.is-split[data-embed] .nh-tool__results.is-r2:not(:has(> .nh-chart)) { display: block; columns: 2; column-gap: 1.6rem; }
	html[data-embed]:not(.is-split) .nh-tool__results.is-r2:not(:has(> .nh-chart)) > *, html.is-split[data-embed] .nh-tool__results.is-r2:not(:has(> .nh-chart)) > * { break-inside: avoid; margin-bottom: 1.1rem; }
}
/* 4.17.0 · Split view's display: the whole window (or page) is the result. The headline and its notes side by side,
   then the chart across the full width, then the details in two columns */
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; gap: 1rem 1.8rem; align-items: start; }
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > * { grid-column: auto; grid-row: auto; order: 1; }
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > .nh-result-hero { grid-column: 1; order: 0; }
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > .nh-chart { grid-column: 1 / -1; order: 2; position: static; padding-top: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > .nh-chart .nh-chart__plot svg { width: 100%; max-height: min(46vh, 460px); }
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > .nh-rows, html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > details { grid-column: 1 / -1; order: 3; }
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > .nh-rows { display: block; columns: 2; column-gap: 1.8rem; }
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > .nh-rows > * { break-inside: avoid; }
html.is-split .nh-tool__results.is-r3:has(> .nh-chart) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); }
html.is-split .nh-tool__results.is-r3:has(> .nh-chart) > .nh-chart { grid-column: 2; grid-row: 1 / span 6; order: 0; border-top: 0; padding-top: 0; }
html.is-split .nh-tool__results.is-r3:has(> .nh-chart) > .nh-rows, html.is-split .nh-tool__results.is-r3:has(> .nh-chart) > details { grid-column: 1; }
html.is-split .nh-tool__results.is-r3 > .nh-rows { columns: 1; }
html.is-split:not([data-embed]) .nh-tool__results.is-r2:not(:has(> .nh-chart)) { display: block; columns: 2; column-gap: 2rem; }
html.is-split:not([data-embed]) .nh-tool__results.is-r2:not(:has(> .nh-chart)) > * { break-inside: avoid; margin-bottom: 1.4rem; }
/* on a tool's own page, a quiet note where the inputs were */
html.is-split:not([data-embed]) .nh-tool::before { content: "Split view · the inputs are in the controls panel"; display: block; margin: 0 auto 0.4rem; max-width: 72rem; width: 100%; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.ctl__row--pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ctl__row--pills .ctl__l { flex: 1 1 6rem; }
.ctl.is-wide .ctl__row--pills { grid-column: 1 / -1; }
html.ctl-dock.is-split .nh-tool[data-tool] { padding-right: var(--ctl-room, 0px); transition: padding-right 0.35s ease; }
html.ctl-dock.is-split .nh-tool[data-tool] .nh-tool__results { max-width: none; }
.ctl__sc span i { font-style: normal; display: none; }
.ctl.is-wide .ctl__sc span i { display: inline; }
.ctl__l em { display: block; margin-top: 0.1rem; font-style: normal; font-size: 0.68rem; color: var(--muted); }
/* on a phone the controls are a sheet along the bottom */
@media (max-width: 699px) {
	.ctl { left: 8px !important; right: 8px; width: auto !important; top: auto !important; bottom: 8px; height: auto !important; max-height: 64vh !important; border-radius: 22px; z-index: 96; }
	.ctl__size { display: none; }
	.ctl__head { cursor: default; padding-top: 0.8rem; }
	.ctl__grip { display: none; }
	.ctl-pill { bottom: 5rem; right: 0.8rem; }
}
/* whichever of Auxiliary and the controls was touched last sits on top */
html[data-front="aux"] .aux { z-index: 79; }
html.desk-stage[data-front="aux"] .aux, html.tool-stage[data-front="aux"] .aux { z-index: 161; }
html.desk-full[data-front="aux"] .aux { z-index: 186; }
html.is-split .nh-tool__results.is-r2:has(> .nh-chart) > .nh-rows__title { grid-column: 1 / -1; order: 3; margin-bottom: -0.4rem; }
html.is-split .nh-tool__results.is-r3:has(> .nh-chart) > .nh-rows__title { grid-column: 1; }
/* a stacked bar beside the numbers: its key in one tidy column */
html[data-embed]:not(.is-split) .nh-tool__results.is-r2:not(.is-r3) > .nh-chart .nh-stackbar__legend { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }

/* ---------- 4.17.1 · Auxiliary: Contact and Settings set apart from the tools' tabs ---------- */
.aux__tsep { flex: none; width: 1px; margin: 5px 3px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.aux__tabs button.aux__tu { flex: 0 0 auto; display: grid; place-items: center; width: 2.05rem; padding: 0.4rem 0; }
.aux__tabs button.aux__tu .aux__tl { display: none; }
.aux__tabs button.aux__tu .aux__ti { display: grid !important; }
.aux:not(.is-slim) .aux__tabs button.aux__tu .aux__ti svg { width: 0.95rem; height: 0.95rem; }
/* Market context */
.aux__mk { display: grid; gap: 0.75rem; padding-bottom: 0.9rem; margin-bottom: 0.4rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); }
.aux__mkh { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.aux__mkh .aux__stk { color: var(--gold-hi, var(--gold)); margin: 0; }
.aux__mka { font: 500 0.66rem/1 var(--sans); color: var(--muted); }
.aux__mkt { margin: 0; font: 400 1.45rem/1.05 var(--serif); color: var(--text); }
.aux__mkb { margin: 0; font-size: 0.78rem; line-height: 1.55; color: color-mix(in srgb, var(--text) 82%, transparent); }
.aux__mkr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.9rem; padding: 0.7rem 0.75rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); }
.aux__mkri { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.4rem; align-items: baseline; min-width: 0; }
.aux__mkri span { font: 500 0.68rem/1.2 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aux__mkri b { font: 400 0.86rem/1 var(--serif); color: var(--gold-hi, var(--gold)); }
.aux__mkbar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.aux__mkbar u { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, transparent); text-decoration: none; }
.aux__mkbar u.on { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, transparent), var(--gold-hi, var(--gold))); }
.aux__mkk { margin: 0 0 0.3rem; font: 600 0.58rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.aux__mkn { padding: 0.75rem 0.8rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 75%); }
.aux__mkn h4 { margin: 0 0 0.3rem; font: 400 1.05rem/1.2 var(--serif); color: var(--text); }
.aux__mkn p { margin: 0; font-size: 0.75rem; line-height: 1.5; color: color-mix(in srgb, var(--text) 80%, transparent); }
.aux__mkn .aux__mks { margin-top: 0.45rem; font-size: 0.66rem; }
.aux__mks a { color: var(--muted); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--muted) 40%, transparent); }
.aux__mks a:hover { color: var(--gold-hi, var(--gold)); }
.aux__mku ol { list-style: none; margin: 0; padding: 0; display: grid; }
.aux__mku li { display: grid; grid-template-columns: 4.1rem 1fr; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.aux__mku li:first-child { border-top: 0; padding-top: 0.15rem; }
.aux__mku time { display: grid; gap: 0.15rem; align-content: start; }
.aux__mku time b { font: 400 1rem/1 var(--serif); color: var(--text); font-variant-numeric: lining-nums; }
.aux__mku time em { font-style: normal; font: 500 0.62rem/1 var(--sans); color: var(--muted); }
.aux__mku li.is-next time b { color: var(--gold-hi, var(--gold)); }
.aux__mku li.is-next time em { color: var(--gold-hi, var(--gold)); }
.aux__mku strong { display: block; font: 600 0.76rem/1.3 var(--sans); }
.aux__mku div span { display: block; margin-top: 0.15rem; font-size: 0.7rem; line-height: 1.45; color: var(--muted); }
.aux__mk-k { margin-top: 0.3rem !important; }
.aux.is-wide .aux__mkr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Contact */
.aux__ct { display: grid; gap: 0.6rem; }
.aux__cc { display: grid; gap: 0.6rem; padding: 0.85rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--text) 11%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); }
.aux__cc--me { grid-template-columns: auto 1fr; border-color: color-mix(in srgb, var(--gold) 38%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%); }
.aux__cc--me .aux__cacts { grid-column: 1 / -1; }
.aux__cph { width: 3.6rem; height: 3.6rem; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.aux__cw { min-width: 0; }
.aux__cw h4 { margin: 0; font: 400 1.08rem/1.15 var(--serif); color: var(--text); }
.aux__cs { margin: 0.2rem 0 0.35rem; font-size: 0.7rem; line-height: 1.4; color: var(--muted); }
.aux__cn { display: inline-block; font: 400 1.15rem/1.2 var(--serif); color: var(--gold-hi, var(--gold)); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.aux__ce { display: block; margin-top: 0.1rem; font-size: 0.74rem; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.aux__cn:hover, .aux__ce:hover { text-decoration: underline; text-underline-offset: 3px; }
.aux__cf { margin: 0.15rem 0 0; font-size: 0.68rem; color: var(--muted); }
.aux__cacts { display: flex; gap: 0.35rem; }
.aux__ca { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.5rem 0.4rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); font: 600 0.7rem/1 var(--sans); text-decoration: none; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.aux__ca svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.aux__ca:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.aux__cc--me .aux__ca:first-child { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.aux__cfoot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.aux__cfoot .aux__stadd { flex: 1; text-decoration: none; }
.aux__clink { font: 600 0.72rem/1 var(--sans); color: var(--gold-hi, var(--gold)); text-decoration: none; white-space: nowrap; }
.aux.is-wide .aux__ct { grid-template-columns: 1fr 1fr; }
.aux.is-wide .aux__cc--me, .aux.is-wide .aux__cfoot { grid-column: 1 / -1; }
/* 4.17.1 · the tool's menu: no letter on its button, a light instead; in desk windows it also hides and shows the inputs */
.nh-tbar__dot { font-size: 0; top: 0.28rem; right: 0.28rem; width: 7px; height: 7px; border: 1.5px solid var(--panel, #121615); box-sizing: content-box; }
.nh-tbar__tab { width: 2.1rem; height: 2.1rem; }
.nh-tbar.is-synced .nh-tbar__tab { color: var(--gold-hi, #e2c27f); }
.nh-tbar.is-synced .nh-tbar__dot { background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold-hi, #e2c27f) 55%, var(--gold, #c9a45c)); box-shadow: 0 0 6px color-mix(in srgb, var(--gold, #c9a45c) 70%, transparent); }
.nh-tbar { border-color: color-mix(in srgb, var(--gold, #c9a45c) 22%, transparent); }
/* (4.19.2: the inputs' own minus is back in desk windows too, as it always was; it steps aside if the tool's menu is above it) */
.nh-fold.is-clear { right: 3.5rem; }
.nh-tbar__fold { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.65rem; border: 0; border-radius: 9px; background: none; color: var(--muted, #a9a395); font: 600 0.74rem/1 var(--sans, inherit); cursor: pointer; transition: color 0.25s, background-color 0.25s; }
.nh-tbar__fold:hover, .nh-tbar__fold[aria-pressed="true"] { color: var(--gold-hi, #e2c27f); background: color-mix(in srgb, var(--gold, #c9a45c) 9%, transparent); }
.nh-tbar__fold + * { margin-left: 0.1rem; }
html.is-compact .nh-tbar__fold span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.is-split .nh-tbar__fold { display: none; }
/* 4.17.1 · a sticky's pin: in the tool (scrolls with that part of it) or floating on the window */
.sticky__p { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #2a2618; cursor: pointer; opacity: 0.55; transition: opacity 0.2s, background-color 0.2s, transform 0.25s; }
.sticky__p svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.sticky__p:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
.sticky__p[aria-pressed="true"] { opacity: 1; background: #2a2618; color: var(--st, #fbe7a1); transform: rotate(-30deg); }
.sticky.is-pinned { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 16px -10px rgba(40, 30, 10, 0.5); }
.sticky.is-pinned .sticky__bar::after { content: "In the tool"; font: 600 0.55rem/1 var(--sans, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(42, 38, 24, 0.55); order: -1; margin-right: 0.3rem; }

/* ---------- 4.18.0 · Home X-Ray's walk-through in desk windows, in proportion ---------- */
/* the house keeps its drawing's shape: as large as the window allows, never a tall empty box */
@media (min-width: 600px) and (min-aspect-ratio: 3/4) {
	html[data-embed] .xq__view { aspect-ratio: 900 / 640; height: auto; min-height: 0; width: min(100%, calc((100vh - var(--nhc-covered, 0px) - 7rem) * 900 / 640)); justify-self: center; }
	html[data-embed] .xq__side { align-content: start; justify-items: center; }
}
html[data-embed] .xq__k em { float: none; display: block; margin-top: 0.25rem; }
html[data-embed] .xq__opt span { width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }
html[data-embed] .xq__opt { gap: 0.6rem; border-radius: 14px; }
html[data-embed] .xq__card { padding: clamp(1rem, 3vw, 1.6rem); border-radius: 20px; }
html[data-embed] .xq__h { font-size: clamp(1.15rem, 2.6vw, 1.6rem); }
html[data-embed] .xq__opts { margin-top: 1rem; gap: 0.5rem; }
html[data-embed] .xq__foot { margin-top: 0.9rem; }
/* a short, wide window (a strip in a corner): question and answers on the left in one compact card, the house beside */
@media (max-height: 470px) and (min-aspect-ratio: 4/3) and (min-width: 460px) {
	html[data-embed] .xr__quiz:not([hidden]) { grid-template-columns: minmax(0, 1fr) auto !important; gap: 0.8rem; align-items: start; }
	html[data-embed] .xr__quiz > .xq__top--wide, html[data-embed] .xq__main .xq__top { margin-bottom: 0.5rem; }
	html.is-compact[data-embed] .xq__side, html[data-embed] .xq__side { display: grid !important; order: 1 !important; position: sticky; top: calc(var(--nhc-covered, 0px) + 0.4rem); }
	html[data-embed] .xq__view { aspect-ratio: 900 / 640; height: auto; width: min(38vw, calc((100vh - var(--nhc-covered, 0px) - 4.5rem) * 900 / 640), 480px); min-height: 0; justify-self: end; }
	html[data-embed] .xq__card { padding: 0.8rem 0.95rem; border-radius: 16px; }
	html[data-embed] .xq__k { margin-bottom: 0.3rem; }
	html[data-embed] .xq__h { font-size: 1.05rem; line-height: 1.2; }
	html[data-embed] .xq__d { margin-top: 0.35rem; font-size: 0.76rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	html[data-embed] .xq__opts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 0.6rem; gap: 0.35rem; }
	html[data-embed] .xq__opt { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; padding: 0.4rem 0.5rem; font-size: 0.72rem; line-height: 1.2; gap: 0.4rem; }
	html[data-embed] .xq__opt span { width: 1.45rem; height: 1.45rem; font-size: 0.72rem; }
	html[data-embed] .xq__foot { margin-top: 0.5rem; }
	html[data-embed] .xq__notes { margin-top: 0.5rem; padding: 0.5rem 0.7rem; font-size: 0.78rem; min-height: 0; height: 2.4rem; }
}
/* 4.18.0 · Home X-Ray summary: each point a tap away, then send (70% or more looked at) */
.xq__top .xq__x + .xq__x { margin-left: 0.2rem; }
.xr__sumbtn { background: none; }
.xq__card--sum { max-width: none; }
.xs__stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
.xs__stats span { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); font-size: 0.76rem; color: var(--muted); }
.xs__stats b { font: 400 1.05rem/1 var(--serif); color: var(--text); }
.xs__stats .is-flag b { color: #e07a62; }
.xs__areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.4rem 1.2rem; margin-top: 0.6rem; }
.xs__area h4 { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.7rem 0 0.3rem; font: 600 0.66rem/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.xs__area h4 b { font: 400 0.9rem/1 var(--serif); letter-spacing: 0; }
.xs__area h4 em { margin-left: auto; font-style: normal; letter-spacing: 0.04em; color: var(--muted); }
.xs__area ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.xs__it { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.32rem 0.4rem; border: 0; border-radius: 8px; background: none; color: var(--text); font: 500 0.78rem/1.3 var(--sans); text-align: left; cursor: pointer; }
.xs__it:hover, .xs__it:focus-visible { background: color-mix(in srgb, var(--gold) 9%, transparent); outline: none; }
.xs__it i { flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); font: 700 0.62rem/1 var(--sans); font-style: normal; color: #fff; }
.xs__it:not(.is-ok):not(.is-flag):not(.is-na) span { color: var(--muted); }
.xs__it.is-ok i { background: #4ea887; border: 0; }
.xs__it.is-flag i { background: #e07a62; border: 0; }
.xs__it.is-flag span { font-weight: 600; }
.xs__it.is-na i { background: var(--muted); border: 0; color: var(--panel, #121615); }
.xs__note { margin: 0.3rem 0 0; padding: 0.4rem 0.6rem; border-left: 2px solid var(--gold); font-size: 0.74rem; font-style: italic; color: var(--muted); }
.xs__send { margin-top: 1.2rem; padding: 1rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); display: grid; gap: 0.6rem; }
.xs__send--wait { border-style: dashed; background: none; }
.xs__send .xq__k { margin: 0; }
.xs__send .xq__d { margin: 0; }
.xs__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; }
.xs__send label { display: grid; gap: 0.25rem; }
.xs__send label span { font: 600 0.68rem/1 var(--sans); color: var(--muted); }
.xs__send input, .xs__send textarea { width: 100%; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: var(--bg, transparent); color: var(--text); font: 500 0.86rem/1.4 var(--sans); }
.xs__send input:focus, .xs__send textarea:focus { outline: none; border-color: var(--gold); }
.xs__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xs__msg { margin: 0; font-size: 0.78rem; color: var(--gold-hi, var(--gold)); }
.xs__msg:empty { display: none; }
.xs__send.is-sent input, .xs__send.is-sent textarea { opacity: 0.6; }
html[data-embed] .xs__areas { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
/* 4.18.0 · a sticky on Notes can belong to one note */
.sticky__n { display: none; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #2a2618; cursor: pointer; opacity: 0.55; transition: opacity 0.2s, background-color 0.2s; }
.sticky.on-notes .sticky__n { display: grid; }
.sticky__n svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.sticky__n:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
.sticky__n[aria-pressed="true"] { opacity: 1; background: #2a2618; color: var(--st, #fbe7a1); }
.sticky.is-noted .sticky__bar::after { content: "On \201C" attr(data-note-name) "\201D"; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.06em; text-transform: none; }
/* 4.18.0 · Notes: up to three small stickies that belong to the note, under its title */
.nb__stk { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.15rem 0 0.7rem; }
.nb__sk { position: relative; flex: 1 1 10rem; max-width: 15rem; min-height: 4.6rem; padding: 0.45rem 1.5rem 0.45rem 0.6rem; border-radius: 3px 3px 12px 3px; background: var(--sk, #fbe7a1); color: #2a2618; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 12px -10px rgba(40, 30, 10, 0.5); }
.nb__sk::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 0 0 12px 0; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.09) 50%); }
.nb__sk--sun { --sk: #fbe7a1; } .nb__sk--sage { --sk: #d6ebd3; } .nb__sk--sky { --sk: #d5e4f6; }
.nb__sk textarea { display: block; width: 100%; min-height: 3.6rem; padding: 0; border: 0; background: transparent; color: #2a2618; font: 500 0.8rem/1.4 var(--sans); resize: vertical; outline: none; }
.nb__sk textarea::placeholder { color: rgba(42, 38, 24, 0.45); }
.nb__skx { position: absolute; top: 0.3rem; right: 0.3rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #2a2618; cursor: pointer; opacity: 0.45; }
.nb__skx svg { width: 0.55rem; height: 0.55rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nb__skx:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.nb__skx.is-arm { opacity: 1; background: #b3261e; color: #fff; }
.nb__skadd { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; padding: 0.35rem 0.65rem; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent); background: none; color: var(--muted); font: 600 0.7rem/1 var(--sans); cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.nb__skadd svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.nb__skadd em { font-style: normal; opacity: 0.7; }
.nb__skadd span:empty { display: none; }
.nb__skadd:hover { color: var(--gold-hi, var(--gold)); border-color: var(--gold); border-style: solid; background: color-mix(in srgb, var(--gold) 8%, transparent); }
.nb__stk.has-any .nb__skadd { align-self: stretch; flex-direction: column; justify-content: center; border-radius: 12px; padding: 0.4rem 0.7rem; }
/* 4.18.0 · sticky notes stay out of the way: clear for a moment when they appear, then mostly see-through until the
   pointer rests on them (or you're writing in one, or moving it) */
.sticky { opacity: 0.22; transition: opacity 0.45s ease, box-shadow 0.3s; }
.sticky:hover, .sticky:focus-within, .sticky.is-drag, .sticky.is-new, .sticky.is-fresh, .sticky.is-arm { opacity: 1; transition-duration: 0.18s; }
@media (hover: none) { .sticky { opacity: 0.55; } }
/* 4.18.0 · Notes: delete from the list (press twice) and a delete question in the page's own style */
.nb__list li { position: relative; }
.nb__del { position: absolute; top: 0.45rem; right: 0.45rem; display: inline-flex; align-items: center; gap: 0.3rem; height: 1.7rem; min-width: 1.7rem; justify-content: center; padding: 0 0.4rem; border-radius: 999px; border: 1px solid transparent; background: var(--panel, var(--bg)); color: var(--muted); font: 600 0.66rem/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s; }
.nb__del svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.nb__del span { display: none; }
.nb__list li:hover .nb__del, .nb__del:focus-visible, .nb__del.is-arm { opacity: 1; }
.nb__del:hover { color: #c4553f; border-color: color-mix(in srgb, #c4553f 40%, transparent); }
.nb__del.is-arm { color: #fff; background: #b3261e; border-color: #b3261e; }
.nb__del.is-arm span { display: inline; }
@media (hover: none) { .nb__del { opacity: 0.7; } }
.nb__foot { position: relative; }
.nb__ask { position: absolute; right: 0; bottom: calc(100% + 0.5rem); z-index: 20; width: min(20rem, 100%); padding: 0.9rem 1rem; border-radius: 16px; border: 1px solid color-mix(in srgb, #c4553f 35%, transparent); background: var(--panel, var(--bg)); box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.55); animation: nb-ask 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes nb-ask { from { opacity: 0; transform: translateY(6px); } }
.nb__askk { margin: 0 0 0.3rem; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #c4553f; }
.nb__askt { margin: 0; font: 400 1rem/1.35 var(--serif); color: var(--text); }
.nb__aska { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.75rem; }
.nb__act--danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.nb__act--danger:hover { background: #9a1f18; }
/* 4.19.0 · Auxiliary › Contact: write to Nima or Tom right here (the Toolbox's Ask The House is the AI) */
.aux__ctchat { display: flex; flex-direction: column; min-height: 22rem; height: 100%; }
.aux__ctchat[hidden], .aux__ct[hidden] { display: none; }
.aux__ctchat .cag { padding: 0.1rem 0 0.4rem; }
.aux__ca--msg { background: var(--gold); border-color: var(--gold); color: var(--on-gold, #fff); }
.aux__ca--msg:hover { background: var(--gold); filter: brightness(1.05); }
.aux__cc--me .aux__ca:first-child:not(.aux__ca--msg) { background: none; border-color: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.aux__ctconv { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.65rem 0.85rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--text); font: 500 0.78rem/1.3 var(--sans); text-align: left; cursor: pointer; }
.aux__ctconv[hidden] { display: none; }
.aux__ctconv em { font-style: normal; font-weight: 600; color: var(--gold-hi, var(--gold)); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.aux__ctconv em i { width: 7px; height: 7px; border-radius: 50%; background: #e07a62; }
.aux__tabs button.has-dot { position: relative; }
.aux__tabs button.has-dot::after { content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e07a62; box-shadow: 0 0 0 2px var(--panel, #fff); }
.aux.is-wide .aux__ctconv { grid-column: 1 / -1; }
/* 4.19.0 · Auxiliary › Stickies: a board for quick notes with no tool to live on. Empty, a small drawing of a note
   floating down onto it, pinned; once a note is there the drawing fades away */
.aux__stboard { position: relative; min-height: 15rem; margin-top: 0.4rem; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--gold) 35%, transparent); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--text) 4%, transparent) 23px 24px); overflow: hidden; transition: border-color 0.6s, min-height 0.5s ease; }
.aux__stboard.has-notes { border-style: solid; border-color: color-mix(in srgb, var(--gold) 22%, transparent); }
.aux__stempty, .aux__stcap { transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s; }
.aux__stboard.has-notes .aux__stempty, .aux__stboard.has-notes .aux__stcap { opacity: 0; transform: translateY(-8px) scale(0.97); filter: blur(3px); pointer-events: none; }
.aux__stempty { position: absolute; inset: 0 0 5.5rem; display: grid; place-items: center; }
.aux__start { position: relative; width: 6.4rem; height: 6.4rem; }
.aux__stpaper { position: absolute; left: 50%; top: 50%; width: 5.2rem; height: 5rem; margin: -2.5rem 0 0 -2.6rem; display: grid; align-content: start; gap: 0.45rem; padding: 0.9rem 0.7rem; border-radius: 3px 3px 12px 3px; background: #fbe7a1; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 14px 22px -12px rgba(40, 30, 10, 0.45); transform-origin: 50% 0; animation: st-float 5.5s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.aux__stpaper b { display: block; height: 3px; border-radius: 2px; background: rgba(42, 38, 24, 0.22); }
.aux__stpaper b:nth-child(2) { width: 80%; } .aux__stpaper b:nth-child(3) { width: 55%; }
.aux__stpin { position: absolute; z-index: 2; left: 50%; top: calc(50% - 2.75rem); width: 0.7rem; height: 0.7rem; margin-left: -0.35rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4d6, var(--gold-hi, var(--gold)) 55%, var(--gold)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); opacity: 0; animation: st-pin 5.5s ease infinite; }
.aux__stghost { position: absolute; left: 50%; top: 50%; width: 5.2rem; height: 5rem; margin: -2.5rem 0 0 -2.6rem; border-radius: 3px 3px 12px 3px; border: 1px dashed color-mix(in srgb, var(--gold) 40%, transparent); animation: st-ghost 5.5s ease infinite; }
@keyframes st-float { 0% { transform: translate(14px, -46px) rotate(-9deg); opacity: 0; } 14% { opacity: 1; } 46% { transform: translate(0, 0) rotate(-2deg); } 52% { transform: translate(0, 1px) rotate(-1.4deg); } 86% { transform: translate(0, 1px) rotate(-1.4deg); opacity: 1; } 100% { transform: translate(0, 1px) rotate(-1.4deg); opacity: 0; } }
@keyframes st-pin { 0%, 48% { opacity: 0; transform: scale(1.8) translateY(-6px); } 56% { opacity: 1; transform: none; } 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes st-ghost { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
.aux__stcap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 0.55rem; padding: 0 1rem 1.1rem; text-align: center; }
.aux__stcap p { margin: 0; max-width: 17rem; font: 400 0.98rem/1.35 var(--serif); color: var(--text); }
.aux__sthere { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: none; color: var(--gold-hi, var(--gold)); font: 600 0.72rem/1 var(--sans); cursor: pointer; }
.aux__sthere svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.aux__sthere:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); border-color: var(--gold); }
.aux__stboard .sticky { opacity: 1; } /* on its own board a note is the point: no fading */
[data-motion="off"] .aux__stpaper, [data-motion="off"] .aux__stpin, [data-motion="off"] .aux__stghost { animation: none; opacity: 1; }
[data-motion="off"] .aux__stghost { opacity: 0; }
/* 4.19.0 · the Snap/Free desk with room to the side scrolls sideways */
.desk__hs { position: relative; }
.desk__hs.is-wide { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 45%, transparent) transparent; border-radius: 18px; }
.desk__hs.is-wide > .desk__grid { max-width: none; }
/* 4.19.0 · Auxiliary keeps one steady size from tab to tab (until resized by hand): no more edges jumping about */
.aux.is-open .aux__panel:not(.is-sized), .aux.is-notes .aux__panel:not(.is-sized), .aux.is-chat .aux__panel:not(.is-sized) { width: min(24rem, calc(100vw - 1.5rem)); height: min(36rem, calc(100vh - 2rem)); max-height: none; }
.aux__panel:not(.is-sized) .aux__body { flex: 1; min-height: 0; overflow: auto; }
.aux.is-wide .aux__panel:not(.is-sized) { width: min(24rem, calc(100vw - 1.5rem)); }
@media (max-width: 700px) { .aux.is-open .aux__panel:not(.is-sized) { height: min(32rem, calc(100vh - 6rem)); } }
/* 4.19.0 · Auxiliary › Dates: your own events */
.aux__dtop { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.aux__evadd { padding: 0.45rem 0.85rem; font-size: 0.72rem; }
.aux__evf { display: grid; gap: 0.5rem; margin: 0 0 0.8rem; padding: 0.8rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); animation: nb-ask 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.aux__evf[hidden] { display: none; }
.aux__evf .aux__stk { margin: 0; color: var(--gold-hi, var(--gold)); }
.aux__evl { display: grid; gap: 0.25rem; min-width: 0; }
.aux__evl span { font: 600 0.66rem/1 var(--sans); color: var(--muted); }
.aux__evl em { font-style: normal; font-weight: 500; }
.aux__evl input { width: 100%; min-width: 0; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: var(--bg, transparent); color: var(--text); font: 500 0.82rem/1.3 var(--sans); }
.aux__evl input:focus { outline: none; border-color: var(--gold); }
.aux__evrow { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0.5rem; }
.aux__evbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.aux__evbtns .aux__stadd { padding: 0.5rem 1rem; }
.aux__evx { padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: none; color: var(--text); font: 600 0.72rem/1 var(--sans); cursor: pointer; }
.aux__evdel { margin-left: auto; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, #c4553f 40%, transparent); background: none; color: #c4553f; font: 600 0.72rem/1 var(--sans); cursor: pointer; }
.aux__evdel.is-arm { background: #b3261e; border-color: #b3261e; color: #fff; }
.aux__dates li.is-mine { position: relative; }
.aux__dates li.is-mine .aux__when { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.aux__dates li strong u { margin-left: 0.3rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-hi, var(--gold)); font: 600 0.55rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; vertical-align: middle; }
.aux__evacts { display: flex; gap: 0.15rem; align-self: center; margin-left: auto; }
.aux__evacts button { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.aux__evacts button:hover { color: var(--gold-hi, var(--gold)); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.aux__evacts svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.aux__dates li.is-added { animation: ev-in 1.2s ease; }
@keyframes ev-in { 0% { background: color-mix(in srgb, var(--gold) 22%, transparent); } 100% { background: transparent; } }
.aux__cald.has-mine { box-shadow: inset 0 -2px 0 var(--gold-hi, var(--gold)); font-weight: 700; }
.aux__calnote p { margin: 0 0 0.25rem; }
.aux__evday { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent); background: none; color: var(--gold-hi, var(--gold)); font: 600 0.68rem/1 var(--sans); cursor: pointer; }
.aux__evday svg { width: 0.7rem; height: 0.7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.aux__dates li.is-mine { grid-template-columns: auto minmax(0, 1fr) auto; }
/* 4.19.0 · sticky colours: bigger, and they can be carried out to where the note should go */
.aux__sts { gap: 0.55rem; }
.aux__stc { position: relative; width: 2.9rem; height: 2.9rem; border-radius: 6px 6px 14px 6px; cursor: grab; touch-action: none; }
.aux__stc::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 0 0 12px 0; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%); }
.aux__stc:hover { transform: translateY(-2px) rotate(-2deg); }
.aux__stc:active { cursor: grabbing; }
.sticky-ghost { position: fixed; z-index: 9999; width: 7.5rem; height: 6.4rem; padding: 0.9rem 0.7rem; border-radius: 3px 3px 14px 3px; background: var(--st, #fbe7a1); box-shadow: 0 26px 40px -16px rgba(40, 30, 10, 0.55); transform: rotate(-4deg); pointer-events: none; display: grid; align-content: start; gap: 0.45rem; animation: gh-in 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.sticky-ghost i { position: absolute; top: 0; left: 0; right: 0; height: 1.1rem; background: rgba(0, 0, 0, 0.07); border-radius: 3px 3px 0 0; }
.sticky-ghost b { display: block; height: 3px; margin-top: 0.4rem; border-radius: 2px; background: rgba(42, 38, 24, 0.2); }
.sticky-ghost b + b { width: 60%; }
@keyframes gh-in { from { transform: rotate(-4deg) scale(0.4); opacity: 0; } }
.aux.is-carrying .aux__panel { opacity: 0.55; transition: opacity 0.25s; }
.aux.is-carrying .aux__stboard { opacity: 1; }
.aux__st .aux__fine.is-gone { display: none; }
/* 4.19.1 · "Room" in the desk bar: give back the extra height or width */
.desk__room { display: inline-flex; align-items: center; gap: 0.2rem; padding: 3px 3px 3px 0.7rem; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent); animation: nb-ask 0.3s ease; }
.desk__room[hidden], .desk__room button[hidden] { display: none; }
.desk__room > span { font: 600 0.58rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); margin-right: 0.2rem; }
.desk__room button { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.38rem 0.65rem; border: 0; border-radius: 999px; background: none; color: var(--text); font: 600 0.7rem/1 var(--sans); cursor: pointer; }
.desk__room button svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.desk__room button:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold-hi, var(--gold)); }
/* 4.19.1 · Auxiliary: resize from its left, right and bottom edges; full screen; the controls from its bar */
.aux__edge { position: absolute; z-index: 5; touch-action: none; }
.aux__edge--l, .aux__edge--r { top: 18px; bottom: 18px; width: 8px; cursor: ew-resize; }
.aux__edge--l { left: -3px; } .aux__edge--r { right: -3px; }
.aux__edge--b { left: 18px; right: 18px; bottom: -3px; height: 8px; cursor: ns-resize; }
.aux__edge::after { content: ""; position: absolute; border-radius: 4px; background: var(--gold); opacity: 0; transition: opacity 0.2s; }
.aux__edge--l::after, .aux__edge--r::after { top: 40%; bottom: 40%; left: 3px; width: 2px; }
.aux__edge--b::after { left: 40%; right: 40%; top: 3px; height: 2px; }
.aux__edge:hover::after, .aux.is-sizing .aux__edge::after { opacity: 0.8; }
.aux.is-full .aux__edge, .aux.is-full .aux__size { display: none; }
.aux__hb { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 16%, transparent)); background: none; color: var(--text); cursor: pointer; flex: none; }
.aux__hb svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.aux__hb svg circle { fill: var(--panel, #121615); stroke: var(--gold-hi, var(--gold)); }
.aux__hb:hover, .aux__hb[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.aux__hb .i-off { display: none; } .aux__hb[aria-pressed="true"] .i-on { display: none; } .aux__hb[aria-pressed="true"] .i-off { display: inline; }
[data-aux-ctl] .i-on, [data-aux-ctl] .i-off { display: inline; }
html .aux.is-full { left: 14px !important; top: 14px !important; z-index: 190 !important; }
html .aux.is-full .aux__panel { width: calc(100vw - 28px) !important; height: calc(100vh - 28px) !important; max-height: none !important; }
html .aux.is-full .aux__dot, html .aux.is-full .aux__dis { display: none; }
/* 4.19.1 · carrying a tool out of the menu onto the desk */
.tapp__a { touch-action: none; }
.desk-pick.is-carrying { opacity: 0.35; transition: opacity 0.25s; }
.desk-dragtool { position: fixed; z-index: 9999; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem 0.55rem 0.55rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: var(--panel, #121615); color: var(--text); box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.7); transform: translate(-30%, -50%) rotate(-2deg); pointer-events: none; animation: gh-in 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.desk-dragtool .tapp__ico { width: 2.2rem; height: 2.2rem; }
.desk-dragtool span { font: 600 0.82rem/1.1 var(--sans); }
.desk-dragtool em { font-style: normal; font-size: 0.66rem; color: var(--muted); }
.desk-dragtool.is-over { border-color: var(--gold); }
.desk-dragtool.is-over em { color: var(--gold-hi, var(--gold)); }
.desk__grid.is-droptarget, .toolbox.is-droptarget { outline: 2px dashed var(--gold); outline-offset: 4px; }
.desk__grid[data-layout="side"][data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 4.19.1 · a resting (see-through) sticky never gets in the way of the tool under it: scrolling and clicks go through
   to the tool; point at its top edge and it wakes up (clear, writable, movable) */
.sticky { pointer-events: none; }
.sticky .sticky__bar { pointer-events: auto; }
.sticky:hover, .sticky:focus-within, .sticky.is-drag, .sticky.is-fresh, .sticky.is-new, .aux__stboard .sticky { pointer-events: auto; }
@media (hover: none) { .sticky { pointer-events: auto; } }
/* 4.19.1 · Layouts: the arrange map with saving beneath it */
.win-map.has-lays { width: min(26rem, calc(100vw - 16px)); }
.desk__laymenu.in-map { position: static; inset: auto; width: auto; margin: 0.7rem 0 0; padding: 0.8rem 0 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); border-radius: 0; background: none; box-shadow: none; transform: none; animation: none; }
/* 4.20.0 · stickies can't go on Notes: a small note says so, and the sticky goes back (a new one isn't made) */
.sticky-nogo { position: fixed; z-index: 10000; max-width: 15rem; padding: 0.45rem 0.7rem; border-radius: 12px; background: #2a2618; color: #fbe7a1; font: 600 0.72rem/1.35 var(--sans); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; }
.sticky-nogo.is-on { opacity: 1; transform: none; }
.sticky.is-refused, .sticky-ghost.is-refused { opacity: 0.55 !important; filter: grayscale(0.6); outline: 2px dashed #c4553f; outline-offset: 3px; }
.sticky-ghost.is-ok { box-shadow: 0 26px 40px -16px rgba(40, 30, 10, 0.55), 0 0 0 2px var(--gold); }
.aux.is-carrying .aux__panel { opacity: 0.45; }
/* ---------- 4.20.0 · the desk's controls, floating ---------- */
.desk__fgrip, .desk__fmin, .desk__fsize { display: none; }
.desk__float { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--btn-line); background: none; color: var(--text); font: 600 0.74rem/1 var(--sans); cursor: pointer; white-space: nowrap; transition: border-color 0.25s, background-color 0.25s; }
.desk__float svg, .desk__fmin svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.desk__float:hover, .desk__float[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.desk.is-floatbar .desk__bar, .desk.is-stage.is-zen.is-floatbar .desk__bar { position: fixed; z-index: 196; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0.7rem 2.6rem 0.75rem 0.75rem; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); background: color-mix(in srgb, var(--panel, #121615) 94%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75); transform: none !important; transition: opacity 0.35s ease, filter 0.35s ease, box-shadow 0.3s; animation: nb-ask 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
[data-theme="daylight"] .desk.is-floatbar .desk__bar { background: color-mix(in srgb, #fffdf8 95%, transparent); box-shadow: 0 30px 60px -30px rgba(70, 52, 18, 0.4); }
.desk.is-floatbar .desk__bar .pbar--desk { flex: 1 1 14rem; margin-left: 0; }
.desk.is-floatbar .desk__fgrip { display: grid; place-items: center; width: 1rem; align-self: stretch; cursor: grab; touch-action: none; }
.desk.is-floatbar .desk__fgrip svg { width: 0.5rem; height: 0.9rem; fill: color-mix(in srgb, var(--text) 40%, transparent); }
.desk.is-floatbar .desk__bar.is-moving, .desk.is-floatbar .desk__bar.is-moving .desk__fgrip { cursor: grabbing; user-select: none; }
.desk.is-floatbar .desk__k { cursor: grab; }
.desk.is-floatbar .desk__fmin { display: grid; place-items: center; position: absolute; top: 0.55rem; right: 0.55rem; width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 50%; border: 1px solid var(--btn-line); background: none; color: var(--text); cursor: pointer; }
.desk.is-floatbar .desk__fmin:hover { border-color: var(--gold); }
.desk.is-floatbar .desk__fsize { display: block; position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; cursor: ew-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--gold) 55%, transparent) 50% 56%, transparent 56% 70%, color-mix(in srgb, var(--gold) 55%, transparent) 70% 76%, transparent 76%); border-bottom-right-radius: 20px; }
.desk.is-floatbar .desk__edge, .desk.is-floatbar .desk__zenhint { display: none !important; }
.desk.is-floatbar.is-floatmin .desk__bar { display: none !important; }
.desk__fpill { position: fixed; z-index: 196; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem 0.55rem 0.75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--panel, #121615) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); font: 600 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: grab; touch-action: none; box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.7); animation: nb-ask 0.3s ease; }
.desk__fpill[hidden] { display: none; }
.desk__fpill svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.desk__fpill svg circle { fill: var(--panel, #121615); stroke: var(--gold-hi, var(--gold)); }
.desk__fpill.is-moving { cursor: grabbing; }
[data-theme="daylight"] .desk__fpill { background: color-mix(in srgb, #fffdf8 95%, transparent); }
html .desk.is-floatbar .desk__bar.is-ghost { opacity: 0.12 !important; pointer-events: none !important; filter: saturate(0.4); box-shadow: none; }
html .desk.is-floatbar .desk__bar.is-ghost * { pointer-events: none !important; }
html .desk.is-floatbar .desk__bar.is-ghost .desk__fgrip { pointer-events: auto !important; }
.desk.is-stage.is-zen.is-floatbar { padding-top: 0.6rem; }
.desk.is-floatbar .desk__fgrip { order: -10; } .desk.is-floatbar .desk__bar > .desk-bub { order: -9; }
/* 4.20.0 · the empty desk after Close all */
.desk.is-blank .desk__layout, .desk.is-blank [data-desk-closeall] { visibility: hidden; }
.desk__blank { grid-column: 1 / -1; min-height: min(68vh, 640px); display: grid; place-items: center; padding: 2.4rem 1.2rem; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gold, #c9a45c) 9%, var(--bg)) 0%, var(--bg) 70%); }
.desk__blank-in { width: min(100%, 34rem); text-align: center; }
.desk__blank-k { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold, #c9a45c); margin: 0 0 .6rem; }
.desk__blank-h { font-family: var(--serif, Georgia, serif); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 1.4rem; }
.desk__blank-l { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.desk__blank-l button { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .25s, background .25s, transform .25s; }
.desk__blank-l button:hover, .desk__blank-l button:focus-visible { border-color: color-mix(in srgb, var(--gold, #c9a45c) 70%, transparent); background: color-mix(in srgb, var(--gold, #c9a45c) 8%, transparent); transform: translateY(-1px); }
.desk__blank-l span { font-size: .7rem; letter-spacing: .14em; color: var(--gold, #c9a45c); }
.desk__blank-l b { font-weight: 500; font-size: .95rem; }
.desk__blank-x { background: none; border: 0; color: color-mix(in srgb, var(--text) 60%, transparent); font: inherit; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html.tool-stage .desk__blank, .desk.is-stage .desk__blank { min-height: calc(100vh - 150px); }
.desk__blank-l li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.desk__blank-l li:last-child:nth-child(odd) button { justify-content: center; }
/* 4.20.0 · scrolling past the end of a note carries on into the page (and, full screen, down to Delete) */
.nb .rt__ed { overscroll-behavior: auto; }
/* 4.20.0 · Focus, four ways */
.desk__fv { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.desk__fv[hidden] { display: none; }
.desk__fv button { display: grid; place-items: center; width: 2rem; height: 1.7rem; padding: 0; border: 0; border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.desk__fv button svg { width: 1.15rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.desk__fv button:hover { color: var(--gold-hi, var(--gold)); }
.desk__fv button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold, #fff); }
.desk__grid[data-layout="focus"][data-focus-at="right"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); grid-auto-flow: dense; }
.desk__grid[data-layout="focus"][data-focus-at="right"] .win.is-main { grid-column: 2; }
.desk__grid[data-layout="focus"][data-focus-at="right"] .win:not(.is-main):not(.is-below) { grid-column: 1; }
.desk__grid[data-layout="focus"][data-focus-at="top"], .desk__grid[data-layout="focus"][data-focus-at="bottom"] { grid-template-columns: repeat(var(--small, 1), minmax(0, 1fr)); grid-auto-flow: dense; }
.desk__grid[data-layout="focus"][data-focus-at="top"][data-n="3"], .desk__grid[data-layout="focus"][data-focus-at="bottom"][data-n="3"] { --small: 2; }
.desk__grid[data-layout="focus"][data-focus-at="top"][data-n="4"], .desk__grid[data-layout="focus"][data-focus-at="bottom"][data-n="4"] { --small: 3; }
.desk__grid[data-layout="focus"][data-focus-at="top"] .win.is-main, .desk__grid[data-layout="focus"][data-focus-at="bottom"] .win.is-main { grid-column: 1 / -1; grid-row: auto; }
.desk__grid[data-layout="focus"][data-focus-at="top"] .win.is-main { grid-row: 1; }
.desk__grid[data-layout="focus"][data-focus-at="top"] .win:not(.is-main):not(.is-below) { grid-row: 2; }
.desk__grid[data-layout="focus"][data-focus-at="bottom"] .win.is-main { grid-row: 2; }
.desk__grid[data-layout="focus"][data-focus-at="bottom"] .win:not(.is-main):not(.is-below) { grid-row: 1; }
.desk.is-floatbar .desk__fv { order: 0; }
@media (max-width: 760px) { .desk__fv { display: none !important; } }
/* 4.20.0 · the desk's control bar never lets its parts run into each other: when they don't fit on one line (a
   narrower screen, Focus's arrangements showing, a zoomed-out desk) they wrap onto a second, aligned line */
.desk__bar { flex-wrap: wrap; row-gap: 0.55rem; }
.desk__bar > * { flex-shrink: 0; }
.desk__bar > .desk__k { flex-shrink: 0; white-space: nowrap; }
.desk__bar .nh-sbar, .desk__bar [class*="price"] { flex-shrink: 0; }

/* ---------- 4.20.0 · Browse: a small web browser (Auxiliary › Browse, and a desk window) ---------- */
.web { display: flex; flex-direction: column; gap: 0.55rem; min-height: 0; color: var(--text); font-family: var(--sans, inherit); }
.web .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.web__bar { display: flex; align-items: center; gap: 0.3rem; }
.web__ib { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 16%, transparent)); background: transparent; color: var(--text); cursor: pointer; transition: border-color 0.25s, color 0.25s, opacity 0.25s; }
.web__ib svg, .web__q svg, .web__chip svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.web__ib:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-hi, var(--gold)); }
.web__ib:disabled { opacity: 0.35; cursor: default; }
.web__q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.45rem; height: 2.3rem; padding: 0 0.85rem; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); transition: border-color 0.25s, box-shadow 0.25s; }
.web__q:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.web__q svg { flex: none; color: var(--gold); }
.web__q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 0.86rem/1 var(--sans, inherit); }
.web__q input::-webkit-search-cancel-button { opacity: 0.5; }
.web__tools { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.web__tools[hidden] { display: none; }
.web__site { font: 600 0.68rem/1 var(--sans, inherit); letter-spacing: 0.06em; color: var(--muted); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web__sp { flex: 1; }
.web__chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.65rem; border-radius: 99px; border: 1px solid var(--btn-line, color-mix(in srgb, var(--text) 16%, transparent)); background: transparent; color: var(--text); font: 600 0.68rem/1 var(--sans, inherit); text-decoration: none; cursor: pointer; transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.web__chip[hidden] { display: none; }
.web__chip:hover { border-color: var(--gold); color: var(--gold-hi, var(--gold)); }
.web__chip--gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold, #fff); }
.web__chip--gold:hover { color: var(--on-gold, #fff); filter: brightness(1.06); }
.web__view { flex: 1; min-height: 14rem; overflow: auto; overscroll-behavior: contain; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: color-mix(in srgb, var(--text) 1.5%, transparent); }
.web__start, .web__err, .web__read { padding: 1rem 1.05rem 1.2rem; }
.web__k { margin: 0; font: 600 0.58rem/1 var(--sans, inherit); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.web__h { margin: 0.5rem 0 0.9rem; font: 400 1.25rem/1.2 var(--serif, Georgia, serif); }
.web__starts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.4rem; }
.web__starts button, .web__res button { width: 100%; display: grid; gap: 0.2rem; text-align: left; padding: 0.65rem 0.75rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: var(--card, transparent); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.25s, transform 0.3s; }
.web__starts button:hover, .web__res button:hover { border-color: var(--gold); transform: translateY(-1px); }
.web__starts b { font-size: 0.84rem; } .web__starts span { font-size: 0.74rem; color: var(--muted); }
.web__fine { margin: 0.9rem 0 0; font-size: 0.7rem; color: var(--muted); line-height: 1.5; padding: 0 1.05rem 1rem; }
.web__start .web__fine { padding: 0; }
.web__res { list-style: none; margin: 0; padding: 0.7rem; display: grid; gap: 0.4rem; }
.web__rh { font-size: 0.66rem; color: var(--gold-hi, var(--gold)); letter-spacing: 0.02em; }
.web__res b { font: 500 0.92rem/1.3 var(--serif, Georgia, serif); }
.web__rs { font-size: 0.76rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.web__busy { display: flex; align-items: center; gap: 0.3rem; padding: 1.2rem; color: var(--muted); font-size: 0.8rem; }
.web__busy i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gold); animation: web-dot 1s ease-in-out infinite; }
.web__busy i:nth-child(2) { animation-delay: 0.15s; } .web__busy i:nth-child(3) { animation-delay: 0.3s; }
.web__busy span { margin-left: 0.4rem; }
@keyframes web-dot { 50% { opacity: 0.25; transform: translateY(-2px); } }
.web__err p { margin: 0 0 0.8rem; color: var(--muted); }
.web__title { margin: 0.5rem 0 0.8rem; font: 400 1.35rem/1.2 var(--serif, Georgia, serif); }
.web__body { font-size: 0.9rem; line-height: 1.65; overflow-wrap: anywhere; }
.web__body h1, .web__body h2, .web__body h3, .web__body h4 { font-family: var(--serif, Georgia, serif); font-weight: 500; line-height: 1.25; margin: 1.2em 0 0.4em; }
.web__body h1 { font-size: 1.3rem; } .web__body h2 { font-size: 1.15rem; } .web__body h3, .web__body h4 { font-size: 1rem; }
.web__body p, .web__body ul, .web__body ol, .web__body table, .web__body blockquote { margin: 0 0 0.85em; }
.web__body a { color: var(--gold-hi, var(--gold)); }
.web__body img { max-width: 100%; height: auto; border-radius: 8px; }
.web__body table { width: 100%; border-collapse: collapse; font-size: 0.8rem; display: block; overflow-x: auto; }
.web__body th, .web__body td { border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
.web__body blockquote { padding-left: 0.9rem; border-left: 2px solid var(--gold); color: var(--muted); }
.web__body pre { white-space: pre-wrap; font-size: 0.78rem; }
.web__frame { display: block; width: 100%; height: 100%; min-height: 26rem; border: 0; background: #fff; }
.aux [data-aux-pane="web"] .web__view { max-height: max(16rem, calc(100vh - 16rem)); }
.aux.is-full [data-aux-pane="web"] .web__view { max-height: none; }
/* on a page of its own (a desk window) */
body.web-frame { margin: 0; min-height: 100vh; background: var(--bg, #f6f2ea); }
.web--page { box-sizing: border-box; height: 100vh; padding: 0.7rem; }
.web--page .web__view { min-height: 0; }
/* 4.20.1 · the calculator fills Auxiliary when it's made tall: the display takes the room above (the number sits at
   its foot, like a phone's calculator) and the keys grow taller, within reason, anchored to the bottom */
.aux.is-calc .aux__body { display: flex; flex-direction: column; }
.aux.is-calc .aux__pane[data-aux-pane="calc"]:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aux.is-calc .aux__calc { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.aux.is-calc .aux__expr { margin-top: auto; }
.aux.is-calc .aux__val { font-size: clamp(2.2rem, 7cqh, 3.6rem); }
.aux.is-calc .aux__pads { flex: 0 1 auto; height: clamp(15.5rem, 62%, 30rem); grid-template-rows: 1fr; }
.aux.is-calc .aux__keys, .aux.is-wide.is-calc .aux__sci { grid-auto-rows: 1fr; height: 100%; }
.aux.is-calc .aux__k { height: auto; min-height: 2.75rem; }
.aux.is-calc .aux__pane[data-aux-pane="calc"] { container-type: size; }
/* 4.20.1 · the Controls button has a minus to put it away */
.desk__fpill { padding: 0.3rem 0.3rem 0.3rem 0.75rem; gap: 0.5rem; }
.desk__fpill-o { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0; cursor: inherit; outline: none; }
.desk__fpill-o:focus-visible { box-shadow: 0 0 0 2px var(--gold); border-radius: 99px; }
.desk__fpill-x { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: transparent; color: var(--muted); cursor: pointer; transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.desk__fpill-x svg { width: 0.75rem; height: 0.75rem; stroke-width: 1.6; }
.desk__fpill-x:hover, .desk__fpill-x:focus-visible { border-color: var(--gold); color: var(--gold-hi, var(--gold)); background: color-mix(in srgb, var(--gold) 10%, transparent); outline: none; }
/* 4.20.1 · the floating panel starts compact: icons without their words, tighter spacing; stretch it (its corner)
   and the words come back */
.desk.is-floatbar .desk__bar.is-fcompact { gap: 0.4rem 0.45rem; padding: 0.55rem 2.4rem 0.6rem 0.6rem; }
.desk.is-floatbar .desk__bar.is-fcompact .desk__layout button > span, .desk.is-floatbar .desk__bar.is-fcompact .desk__mode button > span, .desk.is-floatbar .desk__bar.is-fcompact .desk__laybtn > span, .desk.is-floatbar .desk__bar.is-fcompact .desk__a11y > span, .desk.is-floatbar .desk__bar.is-fcompact .desk__stage > span, .desk.is-floatbar .desk__bar.is-fcompact .desk__float > span, .desk.is-floatbar .desk__bar.is-fcompact .desk__zen > span, .desk.is-floatbar .desk__bar.is-fcompact .desk__whole > span, .desk.is-floatbar .desk__bar.is-fcompact .desk__ctl > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.desk.is-floatbar .desk__bar.is-fcompact .desk__k { font-size: 0.6rem; }
.desk.is-floatbar .desk__bar.is-fcompact .pbar--desk { flex: 1 1 12rem; order: -8; }
.desk.is-floatbar .desk__bar.is-fcompact .desk__closeall { font-size: 0.72rem; padding-inline: 0.3rem; }
.aux.is-calc .aux__val { font-size: clamp(2.2rem, 9cqh, 5rem); }
.aux.is-calc .aux__expr { font-size: clamp(0.78rem, 2cqh, 1.05rem); }
.aux.is-calc .aux__k { font-size: clamp(1.05rem, 2.6cqh, 1.6rem); }
.aux.is-calc .aux__k.is-sci, .aux.is-calc .aux__k.is-fn { font-size: clamp(0.82rem, 2cqh, 1.2rem); }
.aux.is-calc .aux__k.is-op { font-size: clamp(1.2rem, 3cqh, 1.8rem); }

/* v8.6 · Browse: a site that only opens in its own tab */
.web__blocked { display: grid; justify-items: center; align-content: center; gap: .55rem; min-height: 100%; padding: 2.5rem 1.5rem; text-align: center; }
.web__bico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--gold, #b8973a); background: color-mix(in srgb, var(--gold, #b8973a) 12%, transparent); }
.web__bico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.web__blocked .web__h { margin: 0; max-width: 28ch; }
.web__bp { margin: 0 0 .5rem; max-width: 46ch; font-size: .875rem; line-height: 1.55; color: var(--muted); }

/* ── v8.6 · the desk ─────────────────────────────────────────────────────── */
/* a window's reset button: only where windows have free sizes (Snap and Free) */
.win__reset { display: none; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.is-canvas-mode .win__reset { display: grid; }
.win__reset svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.win__reset:hover { color: var(--gold-hi); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.win__reset:active svg { transform: rotate(-40deg); transition: transform .2s; }
/* the sideways scrollbar under a wide desk: a hairline that keeps the room for the windows */
.desk__hs.is-wide { padding-bottom: 3px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 50%, transparent) transparent; }
.desk__hs::-webkit-scrollbar { height: 4px; width: 4px; }
.desk__hs::-webkit-scrollbar-thumb { border: 0; border-radius: 4px; background: color-mix(in srgb, var(--gold) 50%, transparent); }
.desk__hs::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gold) 80%, transparent); }
.desk__hs::-webkit-scrollbar-track { background: transparent; }
/* Overview */
.desk__ov { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--btn-line); background: none; color: var(--text); font: 600 .74rem/1 var(--sans); cursor: pointer; }
.desk__ov[hidden] { display: none; }
.desk__ov svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.desk__ov:hover, .desk__ov[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); }
html.desk-ov, html.desk-ov body { overflow: hidden; }
.desk-ovs { position: fixed; inset: 0; z-index: 9; background: color-mix(in srgb, var(--panel, #0c1622) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.desk-ovs.is-on { opacity: 1; }
.desk.is-ov { z-index: 10; position: relative; }
.win.is-ovw { z-index: 20 !important; box-shadow: 0 30px 70px -28px rgba(0,0,0,.6); }
.win.is-ovw iframe, .win.is-ovw .win__bar { pointer-events: none; }
.win__ovl { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 calc(14px * var(--ovs, 1)); border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.win__ovl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(2px * var(--ovs, 1)) transparent; transition: box-shadow .2s; }
.win__ovl:hover::after, .win__ovl:focus-visible::after { box-shadow: inset 0 0 0 calc(3px * var(--ovs, 1)) var(--gold); }
.win__ovl span { padding: calc(.45rem * var(--ovs, 1)) calc(1rem * var(--ovs, 1)); border-radius: 999px; border: calc(1px * var(--ovs, 1)) solid color-mix(in srgb, var(--gold) 60%, transparent); background: var(--panel, #0c1622); color: var(--text); font: 600 calc(.85rem * var(--ovs, 1))/1 var(--sans); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }

/* v8.7.1 · on a Snap or Free desk, the window you're using (or carrying) sits over Auxiliary; touch Auxiliary and it
   comes back in front */
html[data-front="win"]:not(.desk-stage):not(.tool-stage) .desk:not(.is-stage) { z-index: 2; }
html[data-front="win"] .aux:not(.is-full) { z-index: 1; }
html.desk-stage[data-front="win"] .aux:not(.is-full), html.tool-stage[data-front="win"] .aux:not(.is-full) { z-index: 139; }
.aux__hb[hidden] { display: none; }
.aux__gather.is-pop { animation: gk-hit-g .5s ease; }
@keyframes gk-hit-g { 0% { transform: scale(.85); border-color: var(--gold); } 100% { transform: none; } }
/* v8.7.1 · hold at the top edge to fill the view */
.desk__arm { position: fixed; left: 50%; z-index: 190; transform: translate(-50%, -8px); width: min(26rem, 70vw); padding: .5rem .8rem .6rem; border-radius: 12px; background: color-mix(in srgb, var(--panel, #121615) 92%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); color: var(--text); font: 600 .72rem/1.2 var(--sans, system-ui); text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; }
.desk__arm i { display: block; height: 3px; margin-bottom: .45rem; border-radius: 3px; background: color-mix(in srgb, var(--gold) 20%, transparent); overflow: hidden; position: relative; }
.desk__arm i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.desk__arm.is-on { opacity: 1; transform: translate(-50%, 0); }
.desk__arm.is-on i::after { animation: desk-arm var(--hold, 1400ms) linear forwards; }
@keyframes desk-arm { to { transform: scaleX(1); } }

/* v8.7.7 · phones: Auxiliary docked as the Desk page's own screen (inc/handoff.php, assets/js/aux.js DOCK) */
.aux.aux--page { position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; transform: none !important; opacity: 1 !important; z-index: auto !important; touch-action: auto !important; animation: none !important; }
.aux--page .aux__dot, .aux--page .aux__dis, .aux--page .aux__x, .aux--page [data-aux-full], .aux--page [data-aux-gather], .aux--page [data-aux-ctl], .aux--page [data-aux-chat-out], .aux--page .aux__grip, .aux--page .aux__head { display: none !important; }
html .aux.aux--page .aux__panel, html .aux.aux--page.is-open .aux__panel:not(.is-sized) { display: flex !important; position: relative !important; width: 100% !important; max-width: none !important; height: calc(100dvh - 120px) !important; min-height: 30rem; max-height: none !important; border-radius: 18px; box-shadow: none; opacity: 1 !important; }
.aux--page .aux__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.aux--page .aux__tabs::-webkit-scrollbar { display: none; }
.aux--page .aux__tabs [data-aux-tab] { flex: none; min-height: 40px; }
.aux--page .aux__body { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
html.is-still .aux.aux--page, html.is-still .aux.aux--page * { opacity: 1 !important; }