/* Template detail page (book p18): 8/4 grid on desktop, actions above the preview below 1024px.
   Preview / Code tabs, desktop / phone and light / dark / Gmail controls, neutral preview canvas with the email at its
   intrinsic 600px / 375px width scaled to fit (template-single.js), code panel in IBM Plex Mono with line numbers,
   action panel, metadata links, About, sections, subject ideas, related cards, sign-in and limit dialogs.
   Loads after templates.css (cards, breadcrumb, frame). Royal Original tokens only. */

.tpl-head { display: grid; justify-items: start; gap: var(--space-4); }
/* 48px at most and one line where it fits, so the email shows sooner (same size as the gallery title). */
.tpl-head { gap: var(--space-3); }
.tpl-head h1 { font-size: clamp(32px, 1.5rem + 2vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -1px; }
.tpl-head__lead { max-width: var(--measure-body); font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--color-text-muted); }

/* Layout. Phones: preview, actions, details. Tablets: actions, preview, details. 1024px and up: preview + details 8 columns,
   a sticky action panel 4 columns. */
.tpl-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "actions" "info"; align-items: start; }
.tpl-actions { grid-area: actions; }
.tpl-stage { grid-area: stage; }
.tpl-info { grid-area: info; }
@media (min-width: 768px) { .tpl-layout { grid-template-areas: "actions" "stage" "info"; } }
@media (min-width: 1024px) {
	.tpl-layout {
		grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-5);
		grid-template-rows: auto 1fr; grid-template-areas: none;
	}
	.tpl-stage { grid-column: 1 / 9; grid-row: 1; }
	.tpl-info { grid-column: 1 / 9; grid-row: 2; }
	.tpl-actions { grid-column: 9 / 13; grid-row: 1 / 3; position: sticky; top: calc(var(--header-height) + var(--space-4)); }
	.admin-bar .tpl-actions { top: calc(var(--header-height) + 32px + var(--space-4)); }
}

/* ---------------------------------------------------------------------
 * Action panel: Edit (primary), Copy HTML, wishlist, downloads, notes.
 * Phones: Edit + Copy HTML + More in one row; More opens the rest.
 * ------------------------------------------------------------------ */
.tpl-actions {
	display: grid; gap: var(--space-3); padding: var(--space-4);
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.tpl-main, .tpl-more { display: grid; gap: var(--space-3); min-width: 0; }
.tpl-morebtn { display: none; }
.tpl-long { display: none; }
.tpl-actions__computer { display: block; }
.tpl-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: var(--space-3); }
.tpl-dl .btn { min-width: 0; padding: 0 12px; }
.tpl-actions__note { color: var(--color-text-muted); font-size: var(--font-size-small); line-height: var(--line-height-small); }
@media (max-width: 767px) {
	.tpl-main { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); }
	.tpl-main .btn { width: auto; padding: 0 12px; }
	.tpl-main .btn .icon { display: none; }
	.tpl-morebtn { display: inline-flex; }
	html.js .tpl-more:not(.is-open) { display: none; }
}
@media (min-width: 768px) {
	.tpl-actions { padding: var(--space-5); }
	.tpl-long { display: inline; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.tpl-main, .tpl-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tpl-morebtn, .tpl-dl, .tpl-actions__note, .wl-action { grid-column: 1 / -1; }
	.tpl-morebtn { display: none; }
}
@media (min-width: 1024px) { .tpl-actions__computer { display: none; } }

/* Details: metadata links + source */
.tpl-info { display: grid; gap: var(--space-4); }
.tpl-meta { display: grid; padding: 0 var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.tpl-meta > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.tpl-meta > div:last-child { border-bottom: 0; }
/* Under the preview on desktop: side by side. */
@media (min-width: 1024px) {
	.tpl-meta { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: var(--space-5); padding-block: var(--space-2); }
	.tpl-meta > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); border-bottom: 0; }
}
.tpl-meta dt { font-weight: var(--font-weight-label); color: var(--color-text); }
.tpl-meta dd { margin: 0; color: var(--color-text-muted); }
.tpl-meta__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.tpl-meta__links a { display: inline-flex; align-items: center; min-height: 24px; }
.tpl-source { color: var(--color-text-muted); font-size: var(--font-size-small); line-height: var(--line-height-small); }

/* ---------------------------------------------------------------------
 * Stage (restored from the first version, new style): one tinted panel, the toolbar on top (pill segments,
 * royal blue = selected), a browser frame for desktop, a phone frame (rounded body + notch) for the 375px view.
 * No grid paper. template-single.js sizes the frame: the email is never upscaled and only scaled below 600px.
 * ------------------------------------------------------------------ */
.tpl-stage {
	display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); min-width: 0;
	padding: var(--space-3); background: var(--color-surface-tint); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
@media (min-width: 768px) { .tpl-stage { padding: var(--space-4); } }
/* 1024-1279: the 8-column stage is ~620px; a slimmer frame keeps the email at 600px, 1:1 and sharp. */
@media (min-width: 1024px) and (max-width: 1279px) { .tpl-stage { padding: var(--space-3) var(--space-2) var(--space-2); } }
.tpl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tpl-bar__right { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tpl-bar__right[hidden] { display: none; }

/* Pill segments (tabs use role=tab + aria-selected, the others aria-pressed). 40px buttons in a 4px padded pill = 48px. */
.seg { display: inline-flex; gap: 2px; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.seg__btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-width: 40px; min-height: 40px; padding: 0 var(--space-4);
	font-family: inherit; font-size: var(--font-size-label); font-weight: var(--font-weight-label); line-height: var(--line-height-label);
	color: var(--color-text); background: transparent; border: 0; border-radius: var(--radius-pill); cursor: pointer;
	transition: background-color var(--motion-duration-fast) var(--motion-ease), color var(--motion-duration-fast) var(--motion-ease);
}
.seg__btn .icon { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { .seg__btn:hover { color: var(--color-primary); background: var(--color-surface-tint); } }
.seg__btn.is-on, .seg__btn[aria-pressed="true"], .seg__btn[aria-selected="true"],
.seg__btn.is-on:hover, .seg__btn[aria-pressed="true"]:hover, .seg__btn[aria-selected="true"]:hover { color: var(--color-on-primary); background: var(--color-primary); }
.seg__btn:focus-visible { z-index: 1; outline-offset: 2px; }
.seg__btn:has(.seg__txt), .tpl-tabs .seg__btn { padding: 0 var(--space-4) 0 var(--space-3); }
.seg--icons .seg__btn, .seg__btn[data-scheme="light"] { width: 40px; padding: 0; }
@media (max-width: 479px) {
	.tpl-bar { gap: var(--space-2); }
	.tpl-bar__right { gap: var(--space-2); }
	.seg__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.seg .seg__btn:has(.seg__txt) { width: 40px; padding: 0; }
}

/* Canvas + frames */
.tpl-panel { min-width: 0; }
#panel-preview:not([hidden]) { display: grid; gap: var(--space-3); }
.tpl-canvas { display: flex; justify-content: center; align-items: flex-start; min-width: 0; overflow: hidden; }
.device { position: relative; flex: none; width: 100%; background: var(--color-surface); }
.device__body { position: relative; overflow: hidden; background: var(--color-surface); }
/* While a new scheme loads (JS adds .is-loading), a quiet loading line instead of an empty white box. */
.device.is-loading .device__body::before {
	content: "Loading preview"; position: absolute; inset: 0; display: grid; place-items: center;
	color: var(--color-text-muted); font-size: var(--font-size-small); background: var(--color-surface);
}
.device__screen { position: relative; display: block; width: 100%; height: 900px; border: 0; background: transparent; transform-origin: 0 0; }

.device--desktop { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.device__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.device__bar i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--color-border); }
.device__bar i:first-child { background: var(--color-primary); }
.device__bar i:nth-child(2) { background: var(--color-accent); }
.device__bar span { flex: 1; min-width: 0; margin-left: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); }
.device__notch { display: none; }

.device--mobile { width: 399px; max-width: 100%; padding: 12px; border-radius: 48px; background: var(--color-text); box-shadow: var(--shadow-raised); }
.device--mobile .device__bar { display: none; }
.device--mobile .device__notch { display: block; position: absolute; z-index: 1; top: 12px; left: 50%; translate: -50% 0; width: 120px; height: 26px; border-radius: 0 0 16px 16px; background: var(--color-text); }
.device--mobile .device__body { border-radius: 36px; }
.device--mobile .device__screen { height: 760px; }

.tpl-note { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.tpl-note[hidden] { display: none; }
.tpl-note .icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-primary); }

/* Phones: a swipe over the preview scrolls the page. "Scroll the email" hands touches to the email until pressed again. */
.tpl-scrollbtn { display: none; }
@media (max-width: 767px) {
	.tpl-scrollbtn { display: inline-flex; justify-self: center; }
	.device__screen { pointer-events: none; }
	.device.is-scrolling .device__screen { pointer-events: auto; }
	.device--mobile .device__screen { height: min(70svh, 600px); }
}

/* Code (book p09): 4px radius, 1px border, IBM Plex Mono, visible line numbers, Copy HTML. */
.code-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.code-head__size { color: var(--color-text-muted); }
.code-head__size.is-warn { color: var(--color-warning); }
.code {
	margin: 0; max-height: min(78vh, 880px); overflow: auto; padding: var(--space-4) 0; tab-size: 2; min-width: 0; max-width: 100%;
	font-family: var(--font-mono); font-size: var(--font-size-code); line-height: var(--line-height-code); color: var(--color-text);
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control);
}
.code code { display: block; min-width: max-content; padding: 0 var(--space-4); white-space: pre; }
.code.is-lined code { counter-reset: ln; padding-left: 0; }
.code .ln { display: inline; padding-right: var(--space-4); }
.code .ln::before {
	counter-increment: ln; content: counter(ln); position: sticky; left: 0; display: inline-block; width: 6ch; margin-right: var(--space-4); padding-right: var(--space-3);
	text-align: right; color: var(--color-text-muted); background: var(--color-surface); border-right: 1px solid var(--color-border); user-select: none;
}
.code .t-tag { color: var(--color-primary); }
.code .t-attr { color: var(--color-warning); }
.code .t-val { color: var(--color-success); }
.code .t-com { color: var(--color-text-muted); font-style: italic; }
.code .t-punc { color: var(--color-text-muted); }
.code:focus-visible { outline-offset: 2px; }

/* ---------------------------------------------------------------------
 * About, sections, subject ideas
 * ------------------------------------------------------------------ */
.tpl-about { display: grid; gap: var(--space-7); margin-top: calc(var(--section-padding) - var(--space-6)); }
.tpl-about__text { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.tpl-about__sub { margin-top: var(--space-4); font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.tpl-about .tpl-steps { list-style: decimal; padding-left: 1.5em; display: grid; gap: var(--space-2); max-width: var(--measure-body); color: var(--color-text-muted); }
.tpl-steps li::marker { color: var(--color-primary); font-weight: var(--font-weight-label); }
.tpl-about__side { display: grid; gap: var(--space-5); align-content: start; }
.tpl-box { display: grid; gap: var(--space-4); padding: var(--panel-padding); background: var(--color-surface-tint); border-radius: var(--radius-panel); }
@media (min-width: 1024px) { .tpl-box { padding: var(--space-6); } }
.tpl-box__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.tpl-box__title--sub { margin-top: var(--space-2); }
.tpl-sections { counter-reset: s; display: grid; gap: var(--space-2); }
.tpl-sections li { counter-increment: s; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2); }
.tpl-sections li::before { content: counter(s); color: var(--color-primary); font-weight: var(--font-weight-label); }
.tpl-subjects { display: grid; gap: var(--space-2); }
.tpl-subjects li { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.tpl-pre { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
@media (min-width: 1024px) { .tpl-about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); } .tpl-about__text { grid-column: 1 / 8; } .tpl-about__side { grid-column: 8 / 13; } }
@media (min-width: 1440px) { .tpl-about__side { grid-column: 9 / 13; } }

/* Related */
.tpl-related { display: grid; gap: var(--space-6); margin-top: calc(var(--section-padding) - var(--space-6)); }
.tpl-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.tpl-related__head .btn { padding-inline: 0; }

/* ---------------------------------------------------------------------
 * Dialogs (base .modal): sign-in for guests, export limit
 * ------------------------------------------------------------------ */
.modal[open] { display: grid; gap: var(--space-4); }
.modal .modal__title { padding-right: 48px; }
.modal p { color: var(--color-text-muted); }
.auth-modal__fine { font-size: var(--font-size-small); line-height: var(--line-height-small); }
.modal .modal__actions { margin-top: var(--space-2); }
.modal__actions form { display: contents; }
.tpl-dl a[aria-busy="true"] { opacity: .7; }