/* Engine-only components, on top of the shared wl-* layer.
*
* Everything here is something the panel does not have: the command palette, the toast stack,
* the generation overlay, the log viewer, the diff frame, the wireframe browser. Anything that
* also exists in the panel belongs in wl.css and is copied, not re-invented.
*
* Naming: e-* for engine-only, so a glance at a template says which layer a class comes from.
*/
/* ── Small helpers the templates lean on ──────────────────────────────── */
.e-hide { display: none !important; }
[x-cloak] { display: none !important; }
.e-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.e-grow { flex: 1; min-width: 0; }
.e-right { margin-left: auto; }
.e-center { text-align: center; }
.e-nowrap { white-space: nowrap; }
.e-break { overflow-wrap: anywhere; }
.e-scroll { overflow-y: auto; scrollbar-width: thin; }
.e-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.e-num { font-variant-numeric: tabular-nums; }
.e-mono { font-family: var(--wl-label); font-variant-numeric: tabular-nums; }
/* ── Top bar extras ───────────────────────────────────────────────────── */
/* The brand mark (templates/_brand.html brand_mark; task 70, ENGD-B1, the panel's PBD-B1 rule). Without a logo: the
initial on the agency's colour (--wl-brand-accent, written only on a licensed copy; unlicensed the ink tile). With a
logo: the image at the mark's height less its padding, up to 184 px wide, never cropped (contain, left). wlLogo()
marks it once loaded: "wide" (aspect above 1.6) hides the name beside it (kept for a screen reader), "square" is a
36 px outlined tile. Dark: a white plate behind an image, since most logos are drawn for a light ground. */
.e-logo { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; }
.e-logo-initial { display: grid; place-items: center; width: 100%; height: 100%; background: var(--wl-brand-accent, var(--wl-text)); color: var(--wl-brand-accent-fg, var(--wl-surface)); font-size: 16px; font-weight: 700; }
.e-logo:has(> img) { width: auto; min-width: 36px; max-width: 184px; padding: 4px 0; border-radius: 8px; justify-content: flex-start; }
.e-logo > img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: left center; }
.e-logo[data-logo="square"] { width: 36px; min-width: 0; padding: 0; border: 1px solid var(--wl-border); background: #fff; justify-content: center; }
.e-logo[data-logo="square"] > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
:root[data-theme="dark"] .e-logo:has(> img):not([data-logo="square"]) { padding: 4px 8px; background: #fff; }
.wl-brand:has(> .e-logo[data-logo="wide"]) > .e-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.e-market { font-family: var(--wl-label); font-size: 12px; font-weight: 500; letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; background: var(--wl-surface-2); color: var(--wl-text-2); border: 1px solid var(--wl-border); }
.e-model-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--wl-border); background: var(--wl-surface); color: var(--wl-text-2); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.e-model-chip:hover { background: var(--wl-surface-2); }
.e-model-chip b { color: var(--wl-text); font-weight: 600; }
/* ── Menus (profile, quick settings) ──────────────────────────────────── */
.e-menu { position: absolute; z-index: 60; min-width: 200px; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-r-sm); box-shadow: 0 18px 40px -16px rgba(11, 12, 14, .3); padding: 8px; }
.e-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: transparent; border-radius: 10px; color: var(--wl-text-2); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.e-menu-item:hover { background: var(--wl-surface-2); color: var(--wl-text); }
.e-menu-item.is-active { background: var(--wl-accent-soft); color: var(--wl-accent-ink); }
.e-menu-item.is-danger { color: var(--wl-danger); }
.e-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px; }
.e-menu-sep { height: 1px; background: var(--wl-border); margin: 8px 4px; }
/* ── Command palette ──────────────────────────────────────────────────── */
.e-overlay { position: fixed; inset: 0; z-index: 90; display: flex; }
.e-backdrop { position: absolute; inset: 0; background: rgba(11, 12, 14, .35); }
.e-palette { position: relative; z-index: 1; width: min(620px, 92vw); margin: 12vh auto auto; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-r); box-shadow: 0 32px 80px -24px rgba(11, 12, 14, .45); overflow: hidden; }
.e-palette input { width: 100%; height: 56px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--wl-border); background: transparent; color: var(--wl-text); font-size: 16px; outline: none; }
.e-palette-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
.e-palette-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 12px; color: var(--wl-text); cursor: pointer; }
.e-palette-row:hover, .e-palette-row.is-active { background: var(--wl-surface-2); }
.e-palette-row .sub { color: var(--wl-text-3); font-size: 13px; }
.e-palette-row .tag { margin-left: auto; font-family: var(--wl-label); font-size: 12px; letter-spacing: .04em; color: var(--wl-text-3); border: 1px solid var(--wl-border); padding: 2px 8px; border-radius: 999px; }
/* ── Toasts (ids and wl-toast* class names are read by JS) ────────────── */
/* One toast at a time, bottom centre, the panel's solid toast (task 70, ENGD-M3 / ENGD-m4): the newest replaces the
last (app.js showToast, base.html wlToast), it sits under a dialog's backdrop (z 90 < the overlay's 100), and on a
phone it drops from the top so it never covers a sticky action bar at the bottom. */
#toast-container { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
#toast-container > * { pointer-events: auto; }
.wl-toast { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; background: var(--wl-text); color: var(--wl-surface); font-size: 14px; font-weight: 500; line-height: 1.45; box-shadow: 0 14px 34px -14px rgba(11, 12, 14, .5); transform: translateY(8px); opacity: 0; transition: transform .22s ease, opacity .22s ease; max-width: min(480px, calc(100vw - 32px)); }
.wl-toast:has(> .wl-toast-x) { padding-right: 8px; }
.wl-toast-in { transform: translateY(0); opacity: 1; }
.wl-toast-success::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wl-ok); flex: none; }
:root[data-theme="dark"] .wl-toast-success::before { background: #146c43; }
.wl-toast-error { background: var(--wl-danger); color: #fff; }
:root[data-theme="dark"] .wl-toast-error { color: #141414; }
@media (max-width: 700px) {
#toast-container { top: 72px; bottom: auto; }
.wl-toast { transform: translateY(-8px); }
.wl-toast.wl-toast-in { transform: translateY(0); }
}
.wl-toast i, .wl-toast svg { flex: none; }
/* The close on a coloured toast takes the toast's ink, not the quiet button's grey (1.77:1 on green; task 67). */
.wl-toast .wl-btn.quiet.wl-toast-x { color: inherit; background: transparent; flex: none; }
.wl-toast .wl-btn.quiet.wl-toast-x:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
/* ── Generation overlay ───────────────────────────────────────────────── */
#loading-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
#loading-overlay.hidden { display: none; }
.e-dialog { position: relative; z-index: 1; width: 400px; max-width: 92vw; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-r-lg); box-shadow: 0 32px 80px -24px rgba(11, 12, 14, .45); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
/* The run's three steps under the progress bar (task 70, ENGD-m5). */
.e-run-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: run; }
.e-run-steps li { counter-increment: run; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 8px; border-radius: 999px; background: var(--wl-surface-2); color: var(--wl-text-3); font-size: 13px; font-weight: 500; }
.e-run-steps li::before { content: counter(run); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--wl-surface); font-size: 12px; font-weight: 600; flex: none; }
.e-run-steps li.is-now { background: var(--wl-nav-active-bg); color: var(--wl-nav-active-fg); }
.e-run-steps li.is-now::before { background: color-mix(in srgb, var(--wl-nav-active-fg) 18%, transparent); }
.e-run-steps li.is-done { color: var(--wl-ok); background: var(--wl-ok-soft); }
/* On a phone the dialog is a bottom sheet, its close a 44 px target. */
@media (max-width: 700px) {
#loading-overlay { align-items: flex-end; padding: 0; }
#loading-overlay .e-dialog { width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding: 32px 20px calc(24px + env(safe-area-inset-bottom)); }
#loading-overlay .e-dialog-close { width: 44px; height: 44px; top: 8px; right: 8px; }
}
.e-ring { position: relative; width: 148px; height: 148px; margin: 0 auto; }
.e-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.e-ring .track { fill: none; stroke: var(--wl-surface-2); stroke-width: 9; }
.e-ring .fill { fill: none; stroke: var(--wl-accent); stroke-width: 9; stroke-linecap: round; }
.e-ring .mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--wl-display); font-size: 38px; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--wl-text); }
.e-ring .mid small { font-size: 16px; color: var(--wl-text-3); margin-left: 2px; }
/* ── Log viewer ───────────────────────────────────────────────────────── */
.e-log { display: flex; flex-direction: column; border-radius: var(--wl-r-sm); overflow: hidden; border: 1px solid var(--wl-border); background: var(--wl-surface-2); }
.e-log-row { display: grid; grid-template-columns: 74px 62px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 16px; border-bottom: 1px solid var(--wl-border); font-size: 13px; }
.e-log-row:last-child { border-bottom: 0; }
.e-log-row:hover { background: var(--wl-surface); }
.e-log-row time { color: var(--wl-text-3); font-variant-numeric: tabular-nums; }
.e-log-row .msg { color: var(--wl-text); overflow-wrap: anywhere; white-space: pre-wrap; }
.e-lvl { font-family: var(--wl-label); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; text-align: center; }
.e-lvl.info { background: var(--wl-surface); color: var(--wl-text-2); border: 1px solid var(--wl-border); }
.e-lvl.ok { background: var(--wl-ok-soft); color: var(--wl-ok); }
.e-lvl.warn { background: var(--wl-warn-soft); color: var(--wl-warn); }
.e-lvl.error { background: var(--wl-danger-soft); color: var(--wl-danger); }
/* ── Key/value rows, used all over the engine ─────────────────────────── */
.e-kv { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 8px 16px; align-items: baseline; }
.e-kv dt { color: var(--wl-text-3); font-size: 13px; }
.e-kv dd { margin: 0; color: var(--wl-text); font-size: 13px; overflow-wrap: anywhere; }
/* ── Page / section browser (wireframes, results) ─────────────────────── */
.e-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--wl-gap); align-items: start; }
@media (max-width: 1000px) { .e-split { grid-template-columns: 1fr; } }
.e-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* ── Content preview (generated copy, diffs) ──────────────────────────── */
.e-doc { background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-r-sm); padding: 20px 24px; line-height: 1.65; }
.e-doc h1, .e-doc h2, .e-doc h3 { font-family: var(--wl-display); letter-spacing: -.02em; margin: 0 0 8px; }
.e-doc h1 { font-size: 24px; font-weight: 500; }
.e-doc h2 { font-size: 19px; font-weight: 500; margin-top: 24px; }
.e-doc h3 { font-size: 16px; font-weight: 600; margin-top: 16px; }
.e-doc p { margin: 0 0 12px; color: var(--wl-text-2); }
.e-doc ul, .e-doc ol { margin: 0 0 12px; padding-left: 20px; color: var(--wl-text-2); }
.e-doc code { font-family: var(--wl-label); font-size: 13px; background: var(--wl-surface-2); padding: 2px 8px; border-radius: 6px; }
.e-pre { font-family: var(--wl-label); font-size: 13px; line-height: 1.55; background: var(--wl-surface-2); border: 1px solid var(--wl-border); border-radius: var(--wl-r-sm); padding: 16px 16px; overflow-x: auto; white-space: pre; color: var(--wl-text-2); }
/* ── Field group used by the generator form ───────────────────────────── */
.e-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.e-check { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border: 1px solid var(--wl-border); border-radius: var(--wl-r-sm); background: var(--wl-surface); cursor: pointer; }
.e-check:hover { background: var(--wl-surface-2); }
.e-check input { margin-top: 2px; accent-color: var(--wl-text); width: 16px; height: 16px; flex: none; }
.e-check.is-on { border-color: var(--wl-text); }
.e-check b { display: block; font-weight: 500; font-size: 14px; }
.e-check span { display: block; color: var(--wl-text-3); font-size: 13px; line-height: 1.35; }
/* ── Stepper for the generator's stages ───────────────────────────────── */
.e-stage { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.e-stage .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--wl-surface-2); color: var(--wl-text-3); flex: none; }
.e-stage.is-done .dot { background: var(--wl-ok-soft); color: var(--wl-ok); }
.e-stage.is-now .dot { background: var(--wl-text); color: #fff; }
/* ── Icon alignment ───────────────────────────────────────────────────────
* Icons that toggle live inside a wrapper, e.g.
*
* The span is the flex or grid item, not the svg, and an inline svg sits on the text baseline, so
* the glyph lands a couple of pixels below the middle of a round button. Giving the wrapper the
* icon's own box fixes it everywhere at once rather than per button.
*/
/* inline-block, not block: an icon sitting inside a sentence (`{{ icon(...) }}Include sub-service
pages`) must stay on the line. vertical-align centres it against the text; inside a flex or grid
parent it is blockified anyway and the wrappers below handle the round buttons. */
.wl-ic { display: inline-block; vertical-align: middle; flex: none; }
.wl-iconbtn > span,
.e-model-chip > span { display: grid; place-items: center; line-height: 0; }
.wl-btn > span:has(> svg),
.wl-nav-row > span:has(> svg),
.e-menu-item > span:has(> svg),
.st-opt > span:has(> svg),
.ce-tab > span:has(> svg),
.wl-card-head > div > span:has(> svg) { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
/* The round buttons themselves: no padding to fight, and the glyph optically centred. */
.wl-iconbtn { padding: 0; line-height: 0; }
.wl-kebab { line-height: 0; }
.wl-tile-icon > svg, .wl-empty-ic > svg { display: block; }
/* Buttons that mix an icon and a word keep the two on a shared centre line. */
.wl-btn { line-height: 1; }
.wl-btn > svg { margin-top: -1px; }
/* ── The run bar ──────────────────────────────────────────────────────────
* A generation keeps running on the server after you leave the page, so every page carries a thin
* bar that says so and links back. It hides itself on the engine page, which has the real overlay.
*/
#wl-run-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 94;
display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px;
border-radius: 999px; background: var(--wl-surface); border: 1px solid var(--wl-border);
box-shadow: 0 18px 44px -18px rgba(11, 12, 14, .45); font-size: 13px; max-width: min(620px, 92vw); }
#wl-run-bar[hidden] { display: none; }
@keyframes wl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#wl-run-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wl-accent); flex: none;
animation: wl-pulse 1.4s ease-in-out infinite; }
#wl-run-bar .what { font-weight: 500; color: var(--wl-text); white-space: nowrap; }
#wl-run-bar .who { color: var(--wl-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wl-run-bar .pct { color: var(--wl-text-2); font-variant-numeric: tabular-nums; margin-left: auto; }
@media (prefers-reduced-motion: reduce) { #wl-run-bar .dot { animation: none; } }
/* ── Links out to a Google Sheet ──────────────────────────────────────────
* These leave the app for a spreadsheet, so they carry Sheets' own green rather than looking like
* every other button. The pages sheet is filled; the keyword sheet is the quieter companion.
*
* Doubled class selectors on purpose. index.html loads generate.css from extra_head, which lands
* AFTER this file, so a single .ce-sheet-btn tied with .ce-ctrl-btn on specificity and lost on
* order: the button kept the plain surface fill while taking the white ink, which left the label
* and the icon invisible. Raising specificity settles it wherever the files load.
*/
.ce-sheet-btn,
.ce-ctrl-btn.ce-sheet-btn,
.wl-btn.ce-sheet-btn {
background: #0f9d58; border-color: #0f9d58; color: #fff; box-shadow: none;
}
.ce-sheet-btn:hover:not(:disabled),
.ce-ctrl-btn.ce-sheet-btn:hover:not(:disabled),
.wl-btn.ce-sheet-btn:hover:not(:disabled) { background: #0c8a4d; border-color: #0c8a4d; color: #fff; }
.ce-sheet-btn .wl-ic, .ce-sheet-btn svg { color: #fff; }
.ce-sheet-btn-quiet,
.ce-ctrl-btn.ce-sheet-btn-quiet,
.wl-btn.ce-sheet-btn-quiet {
background: color-mix(in srgb, #34a853 14%, var(--wl-surface));
border-color: color-mix(in srgb, #34a853 38%, transparent);
color: #12703a;
}
.ce-sheet-btn-quiet:hover:not(:disabled),
.ce-ctrl-btn.ce-sheet-btn-quiet:hover:not(:disabled),
.wl-btn.ce-sheet-btn-quiet:hover:not(:disabled) { background: color-mix(in srgb, #34a853 22%, var(--wl-surface)); color: #0f5c2f; }
.ce-sheet-btn-quiet .wl-ic { color: currentColor; }
/* Same reason as the block at the end of generate.css: `.wl-root button/a { color: inherit }` is
(0,1,1) and beats a lone class, so these carry an element selector to keep their own ink. */
a.ce-sheet-btn, button.ce-sheet-btn { color: #fff; }
a.ce-sheet-btn-quiet, button.ce-sheet-btn-quiet { color: #12703a; }
button.e-menu-item, a.e-menu-item { color: var(--wl-text-2); }
button.e-menu-item:hover, a.e-menu-item:hover { color: var(--wl-text); }
button.e-menu-item.is-danger, a.e-menu-item.is-danger { color: var(--wl-danger); }
button.e-model-chip { color: var(--wl-text-2); }
/* The shared button base has the same problem: `.wl-btn { color: var(--wl-text) }` is (0,1,0) and
loses to the reset, so a plain button inherits whatever surface it sits on. It looks identical on
a normal page and wrong inside anything that flips the text colour. Stating it explicitly costs
nothing and the modifier classes (.primary, .danger, .quiet, and .wl-insight/.wl-promo overrides)
are all (0,2,0) so they still win. */
button.wl-btn, a.wl-btn { color: var(--wl-text); }
/* The generation overlay covers everything at z-index 100. Escape closes it, but nothing on screen
said so, which turns a run that stalls into a trap. */
.e-dialog { position: relative; }
.e-dialog-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; display: grid; place-items: center;
border-radius: 999px; background: transparent; color: var(--wl-text-3);
font-size: 14px; line-height: 1; cursor: pointer; }
.e-dialog-close:hover { background: var(--wl-surface-2); color: var(--wl-text); }
/* A read that failed, said beside what it fed, with Try again (task 67: the saved-brief list, a ?analysis= restore,
the Settings model card). */
.e-inline-error { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
background: var(--wl-danger-soft); color: var(--wl-danger); font-size: 14px; line-height: 1.5; }
/* ONE look for "this could not load" (task 70, ENGD-M6): a danger well where the data would be, a title " could
not load", the server's message (never its code) and "Try again"; the rest of the page stays.
Team could not loadmessage
*/
.e-inline-error > div { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.e-inline-error > div > b { font-weight: 600; color: var(--wl-danger); }
.e-inline-error > div > span { color: var(--wl-text-2); overflow-wrap: anywhere; }
.e-inline-error > .wl-btn { flex: none; }
/* ONE empty state for a whole area (task 70, ENGD-M10; DESIGN-RULES 6): one row, a sentence left and one action right,
about 88 px tall, never a full-width card that is 80% white. Also the dead-end pages (plan refusal, operator page,
missing run).