/* guide.css — the Daimond user guide.
 *
 * One stylesheet for the whole guide site. It reuses Daimond's own palette
 * (see css/variables.css) so the guide reads as part of the app, whether it is
 * opened directly at /guide/ or shown inside Daimond's Web panel.
 *
 * Theme: guide/frame.js puts data-theme, data-tone and data-ink on this root --
 * mirrored from the app when the guide is framed, from the operating system
 * when it is opened on its own. The colours themselves come from the app's
 * css/variables.css, which every guide page loads first.
 */

/* Reading size. The guide is framed inside the app as often as it is opened on
 * its own, so it carries the reader's chosen text size the same way it carries
 * the theme: mirrored onto this root by the inline script in each page, with a
 * standalone default of 1 when there is no app to mirror from. */
html { font-size: calc(16px * var(--fs-scale, 1)); }

/* ── Palette ──────────────────────────────────────────────────────────────
   The guide loads the app's own css/variables.css, so every palette the app
   offers is already here and none is restated. It used to carry copies of
   three of them, which is why a candy reader once got a cream guide: a copy is
   a palette that has to be remembered twice, and ten of them could not be.

   Only what the app's stylesheet does not define, or defines differently for a
   document rather than an application frame, belongs below. */
:root {
	--maxw:           760px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text-primary);
	background: var(--bg-primary);
	overflow-x: hidden;                 /* no horizontal page scroll */
}

img { max-width: 100%; height: auto; }

a {
	color: var(--accent-text);
	text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ── Header and navigation ───────────────────────────────────────────────── */
.site-head {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border);
}

.site-head-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0.75rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
}

.brand {
	display: inline-flex;
	/* The wordmark is an image, whose baseline is its bottom edge, so a baseline
	   lockup drops the "Guide" label below it. Centre the two instead. */
	align-items: center;
	gap: 0.5rem;
	flex: none;
}
.brand:hover { text-decoration: none; }

.wordmark { height: 22px; width: auto; display: block; }
.wm-light { display: none; }

/* Show the dark-lettered wordmark wherever the palette takes dark lettering.
   One rule, on the ink axis, so a palette added later is never missed. */
:root[data-ink="dark"] .wm-dark  { display: none; }
:root[data-ink="dark"] .wm-light { display: block; }

.brand-sub {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	font-size: 0.9rem;
}
.site-nav a {
	color: var(--text-secondary);
	padding: 0.15rem 0;
	border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--text-primary); text-decoration: none; }
.site-nav a[aria-current="page"] {
	color: var(--text-primary);
	border-bottom-color: var(--accent);
}

/* ── Main column ─────────────────────────────────────────────────────────── */
main {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 1.5rem 1.25rem 4rem;
}

.lede {
	font-size: 1.1rem;
	color: var(--text-secondary);
}

h1 {
	font-size: 1.9rem;
	line-height: 1.2;
	margin: 0.5rem 0 0.75rem;
	letter-spacing: -0.01em;
}
h2 {
	font-size: 1.35rem;
	margin: 2.25rem 0 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--border);
}
h3 {
	font-size: 1.05rem;
	margin: 1.5rem 0 0.35rem;
}

p { margin: 0.6rem 0; }

strong, b { color: var(--text-primary); font-weight: 650; }

ul, ol { margin: 0.6rem 0; padding-left: 1.4rem; }
li { margin: 0.35rem 0; }

/* A control the reader must find on screen: a small pill that stands in for a
   button or a row label in the app. */
.ui {
	font-family: var(--font);
	font-weight: 600;
	color: var(--accent-text);
	background: var(--accent-soft);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-sm);
	padding: 0.05em 0.4em;
	white-space: nowrap;
	font-size: 0.92em;
}

code, kbd {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 0.05em 0.35em;
	/* A path or a flag has no spaces in it, so on a phone it is one unbreakable
	   word wider than the column, and the whole page scrolls sideways to fit it.
	   Breaking mid-path is the lesser evil; the block form below keeps its own
	   lines intact and scrolls instead. */
	overflow-wrap: anywhere;
}

/* A command to type at a terminal. A line too long for the column scrolls
   inside the block rather than widening the page, which is why the box carries
   the border and the code inside it carries none. */
pre {
	margin: 0.7rem 0;
	padding: 0.7rem 0.9rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow-x: auto;
	font-size: 0.88rem;
	line-height: 1.55;
}
pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: 1em;
	white-space: pre;
	overflow-wrap: normal;
}

/* Numbered getting-started steps. */
ol.steps {
	list-style: none;
	counter-reset: step;
	padding-left: 0;
}
ol.steps > li {
	counter-increment: step;
	position: relative;
	padding: 0.9rem 0.9rem 0.9rem 3.2rem;
	margin: 0.75rem 0;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
ol.steps > li::before {
	content: counter(step);
	position: absolute;
	left: 0.9rem;
	top: 0.9rem;
	width: 1.6rem;
	height: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--on-fill, #fff);
	background: var(--accent);
	border-radius: 50%;
}
ol.steps > li h3 { margin-top: 0; }

/* Callout for honest limits and notes. */
.note {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
}
.note strong { color: var(--text-primary); }
.note > ul:last-child, .note > p:last-child { margin-bottom: 0; }

/* The stronger form: something that will stop the reader outright, or cost them
   an account. It is a different colour from the ordinary note because a reader
   who has learned that every callout is optional reads none of them, and these
   two are not optional. The palette's own --warn, so every theme carries it. */
.note.stop {
	background: var(--warn-bg);
	border-color: var(--warn);
	border-left-color: var(--warn);
	color: var(--text-primary);
}
.note.stop code { background: var(--bg-tertiary); }

/* Card grid for panel tours. */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem;
	margin: 1rem 0;
}
.card {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.85rem 1rem;
}
.card h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.card p { margin: 0; font-size: 0.92rem; color: var(--text-secondary); }

/* ── A control that does something ────────────────────────────────────────
   The guide describes the app; this is the one block in it that ASKS the app
   for something, so it is drawn as a thing to press rather than as prose with
   a link in it. The reply lands in `.do-say`, which is a live region: a reader
   using a screen reader must hear the outcome, since the visible change it is
   reporting happens in the app behind this frame. */
.do {
	margin: 1.25rem 0;
	padding: 1rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.do-btn {
	font: inherit;
	font-weight: 600;
	color: var(--on-fill, #fff);
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 0.55rem 1.1rem;
	cursor: pointer;
}
.do-btn:hover { filter: brightness(1.08); }
.do-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Disabled is the state between the ask and the answer, and it has to READ as
   waiting rather than as broken. */
.do-btn[disabled] { opacity: 0.55; cursor: default; filter: none; }
/* Empty until there is something to say, and taking no room while it is. */
.do-say { margin: 0.6rem 0 0; color: var(--text-primary); font-weight: 600; }
.do-say:empty { display: none; }
.do-note { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--text-muted); }

/* ── Screenshot slots ─────────────────────────────────────────────────────
   The main agent will set a real src on each img later. Until then the figure
   shows a dashed placeholder box labelled with its data-shot name, and the
   caption sits below. */
.shot {
	margin: 1.5rem 0;
	position: relative;
}
.shot img {
	display: block;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-secondary);
}
/* A portrait dialog screenshot should not sprawl to full text width. */
.shot.narrow img { max-width: 300px; margin: 0 auto; }
.shot figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-muted); text-align: center; }
.shot img[data-src]:not([src]) {
	min-height: 210px;
	border: 2px dashed var(--border-2);
	background: var(--bg-tertiary);
}
.shot:has(img[data-src]:not([src]))::before {
	content: "Screenshot: " attr(data-shot);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	pointer-events: none;
}
.shot figcaption {
	margin-top: 0.4rem;
	font-size: 0.85rem;
	color: var(--text-muted);
	text-align: center;
}

/* A labelled schematic (inline SVG), theme-aware via the CSS variables. */
.diagram {
	margin: 1.5rem 0;
}
.diagram svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-primary);
}
.diagram figcaption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--text-muted);
	text-align: center;
	line-height: 1.5;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 0.85rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	justify-content: space-between;
	align-items: center;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.site-foot a { color: var(--text-muted); }

/* Onward links between pages. */
.next {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	font-size: 0.95rem;
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
	body { font-size: 0.9375rem; }
	h1 { font-size: 1.6rem; }
	.site-head-inner { padding: 0.6rem 1rem; }
	main { padding: 1.25rem 1rem 3rem; }
	.site-nav { font-size: 0.85rem; gap: 0.3rem 0.7rem; }
}

/* ── The guide's search ──────────────────────────────────────────────────────
   notes2.txt line 96 asks for this as the fallback for a reader who would
   rather not spend tokens asking Daimond Help. It sits at the end of the
   header row and takes the leftover width, so it never pushes the nav to a
   second line on a wide screen and drops below it on a narrow one.

   The panel is absolutely positioned so opening it does not move the page
   under the reader's eye -- a list that shoves the article down is a list you
   have to fight. */
.gsearch {
	position: relative;
	flex: 1 1 12rem;
	min-width: 9rem;
	max-width: 22rem;
	margin-left: auto;
}
.gsearch-in {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 0.9rem;
	padding: 0.35rem 0.6rem;
	color: var(--text-primary);
	background: var(--bg-primary);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm, 4px);
}
.gsearch-in::placeholder { color: var(--text-muted); }
.gsearch-in:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}
/* The browser's own clear button, which is a different shape in every engine
   and a different colour from everything around it. Escape clears the box. */
.gsearch-in::-webkit-search-cancel-button { display: none; }

.gsearch-panel {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	width: min(30rem, 92vw);
	max-height: min(28rem, 70vh);
	overflow-y: auto;
	z-index: 20;
	background: var(--bg-secondary);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm, 4px);
	box-shadow: 0 8px 28px rgb(0 0 0 / 28%);
}
.gsearch-panel[hidden] { display: none; }

.gsearch-hit {
	display: block;
	padding: 0.5rem 0.7rem;
	border-bottom: 1px solid var(--border);
	color: var(--text-secondary);
	font-size: 0.875rem;
	line-height: 1.45;
}
.gsearch-hit:last-child { border-bottom: none; }
.gsearch-hit:hover { text-decoration: none; }
/* One highlight, driven by the keyboard AND by the pointer, so there are never
   two rows that both look like the one Enter would take. */
.gsearch-hit.on { background: var(--bg-hover); }
.gsearch-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.gsearch-t {
	display: block;
	color: var(--text-primary);
	font-weight: 600;
}
.gsearch-u {
	display: block;
	font-size: 0.78rem;
	color: var(--text-muted);
	margin-top: 0.05rem;
}
.gsearch-b {
	display: block;
	margin-top: 0.2rem;
	color: var(--text-secondary);
}
.gsearch-hit mark {
	background: var(--accent-soft, transparent);
	color: var(--text-primary);
	font-weight: 600;
	padding: 0 1px;
	border-radius: 2px;
}
.gsearch-none {
	margin: 0;
	padding: 0.75rem 0.7rem;
	color: var(--text-muted);
	font-size: 0.875rem;
}
/* The announcement for a screen reader, and nothing for anyone else. Not
   `display:none`, which is not announced at all. */
.gsearch-live {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Where a result landed. A fragment jump alone leaves the reader at a heading
   that looks like every other heading, so the target says so for a moment. */
.gsearch-landed {
	animation: gsearch-flash 2.6s ease-out;
	border-radius: var(--radius-sm, 4px);
}
@keyframes gsearch-flash {
	0%, 55% { background: var(--accent-soft, transparent); box-shadow: 0 0 0 6px var(--accent-soft, transparent); }
	100%    { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.gsearch-landed { animation: none; outline: 2px solid var(--accent); outline-offset: 4px; }
}

@media (max-width: 560px) {
	.gsearch { flex: 1 1 100%; max-width: none; margin-left: 0; order: 3; }
	.gsearch-panel { width: 100%; right: auto; left: 0; }
}