/* Netherlands Content Engine, matched to the current client portal v2.
 * Reference: apps/portal-client/src/portal-v2.css and PortalShell.tsx.
 * The panel's wl-tokens.css / wl.css remain verbatim shared copies. This
 * engine-only translation keeps their markup contracts and the dark theme. */

:root {
  --wl-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wl-display: var(--wl-sans);
  --wl-label: var(--wl-sans);
  --wl-frame: #f4f4f1;
  --wl-rail-bg: #fff;
  --wl-bg: #f4f4f1;
  --wl-surface: #fff;
  --wl-surface-2: #f7f7f4;
  --wl-border: #e6e6e2;
  --wl-border-strong: #dadad4;
  --wl-text: #141414;
  --wl-text-2: #3a3a36;
  --wl-text-3: #6b6b66;
  /* The agency's colour on a licensed copy (templates/_brand.html writes --wl-brand-accent*; task 70, ENGD-M1),
     the house blue otherwise: unlicensed nothing is written, so these resolve to exactly the old values. */
  --wl-accent: var(--wl-brand-accent, #2b46e8);
  --wl-accent-ink: var(--wl-brand-accent-ink, #2336b8);
  --wl-accent-soft: var(--wl-brand-accent-soft, #eaeeff);
  --wl-accent-fg: var(--wl-brand-accent-fg, #fff);
  --wl-nav-active-bg: #141414;
  --wl-nav-active-fg: #fff;
  --wl-ok: #146c43;
  --wl-ok-soft: #e6f4ec;
  --wl-warn: #7a4f00;
  --wl-warn-soft: #fff3dc;
  --wl-danger: #a8201a;
  --wl-danger-soft: #fdecea;
  --wl-data-2: #7c4ddb;
  --wl-data-3: #0e9488;
  --wl-data-4: #d98e04;
  --wl-data-5: #c2417a;
  --wl-r-sm: 10px;
  --wl-r: 14px;
  --wl-r-lg: 20px;
  --wl-panel-r: 16px;
  --wl-rail-w: 256px;          /* the panel's frame (task 70, ENGD-M2): rail 256, top bar 64, card padding 24 / 20 */
  --wl-rail-collapsed: 72px;
  --wl-frame-gap: 12px;
  --wl-topbar-h: 64px;
  --wl-pad: 24px;
  --wl-gap: 16px;
  --wl-title-weight: 600;
  --wl-title-size: 28px;       /* DESIGN-RULES 5: H1 28 at every width */
  --wl-body: 14px;
  --wl-shadow: none;
  --wl-shadow-hover: 0 8px 24px -12px rgba(20,20,20,.18);
  --wl-fill-a: var(--wl-accent);
  --wl-fill-2: var(--wl-data-2);
}
:root[data-theme="dark"] {
  --wl-frame: #0f0f0e;
  --wl-rail-bg: #191918;
  --wl-bg: #0f0f0e;
  --wl-surface: #191918;
  --wl-surface-2: #20201e;
  --wl-border: #2e2e2b;
  --wl-border-strong: #3b3b37;
  --wl-text: #f4f4f1;
  --wl-text-2: #d2d2cc;
  --wl-text-3: #9a9a93;
  --wl-accent: var(--wl-brand-accent, #8193ff);
  --wl-accent-ink: var(--wl-brand-accent-ink, #b0bbff);
  --wl-accent-soft: var(--wl-brand-accent-soft, rgba(129, 147, 255, .16));
  --wl-accent-fg: var(--wl-brand-accent-fg, #08090a);
  /* Licensed focus follows the agency too; without a licence keep the original dark ring colour. */
  --wl-focus: 0 0 0 3px color-mix(in srgb, var(--wl-brand-accent, #60a5fa) 40%, transparent);
  --wl-nav-active-bg: #f4f4f1;
  --wl-nav-active-fg: #141414;
  --wl-ok: #6fd69c;
  --wl-ok-soft: rgba(63, 184, 119, .16);
  --wl-warn: #f5c060;
  --wl-warn-soft: rgba(224, 161, 0, .16);
  --wl-danger: #ff8f86;
  --wl-danger-soft: rgba(229, 84, 75, .16);
  --wl-data-2: #a98bff;
  --wl-data-3: #2cc4b5;
  --wl-data-4: #f0b232;
  --wl-data-5: #ef6fa6;
  --wl-fill-a: var(--wl-accent);
  --wl-fill-2: var(--wl-data-2);
}

.e-shell { margin: 0; font-variant-numeric: normal; }
.e-shell [hidden] { display: none !important; }
.e-shell .wl-app { gap: 28px; }
.e-shell .wl-panel { background: transparent; border-radius: 0; }
.e-shell .wl-rail { padding: 16px 16px 16px; border: 1px solid var(--wl-border); scrollbar-width: thin; }
.e-shell .wl-brand { padding: 2px 8px 20px; gap: 8px; }
.e-shell .e-brand-name { display: flex; flex-direction: column; line-height: 1.25; }
.e-shell .e-brand-name b { font-size: 16px; font-weight: 700; }
.e-shell .e-brand-name small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--wl-text-3); }
.e-workspace { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 12px 12px; border-radius: 10px; background: var(--wl-surface-2); }
.e-workspace-mark { display: grid; place-items: center; width: auto; min-width: 32px; height: 32px; padding: 0 8px; white-space: nowrap; border: 1px solid var(--wl-border); border-radius: 8px; background: var(--wl-surface); font-size: 12px; font-weight: 700; }
.e-workspace > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.e-workspace b { font-size: 13px; font-weight: 600; }
.e-workspace small { font-size: 12px; color: var(--wl-text-3); }
.e-shell .wl-nav-group { padding: 16px 12px 8px; font-size: 12px; letter-spacing: 0; font-weight: 400; }
.e-shell .wl-nav-row { height: 42px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 400; gap: 8px; }
.e-shell .wl-nav-row .wl-blurb { display: none; }
.e-shell .wl-nav-row[aria-current="page"] { font-weight: 500; }
.e-shell .wl-nav-row:not([aria-current="page"]):hover { background: var(--wl-surface-2); }
.e-shell .wl-nav-row .wl-ic { opacity: 1; }
.e-shell .wl-rail-foot { border-top: 1px solid var(--wl-border); margin-top: auto; padding-top: 12px; gap: 8px; }
.e-shell .wl-rail-foot .wl-nav-row { min-height: 46px; height: auto; }
.e-shell .wl-rail-foot .wl-blurb { display: block; font-size: 12px; }
.e-shell .wl-avatar { display: grid; place-items: center; background: var(--wl-accent-soft); color: var(--wl-accent-ink); font-size: 12px; font-weight: 600; }
.e-rail-note { text-align: center; font-size: 12px; color: var(--wl-text-3); }
.e-rail-note b { font-weight: 600; }
.e-shell .wl-app[data-collapsed="true"] .wl-brand { padding-inline: 0; justify-content: center; }
.e-shell .wl-app[data-collapsed="true"] .wl-brand .e-logo { display: flex; max-width: 36px; }
.e-shell .wl-app[data-collapsed="true"] .e-workspace,
.e-shell .wl-app[data-collapsed="true"] .e-rail-note { display: none; }
.e-shell .wl-topbar { background: var(--wl-frame); height: 64px; padding: 0; border: 0; border-radius: 0; max-width: 1440px; width: 100%; margin: 0 auto; }
.e-shell .wl-search { max-width: 360px; height: 38px; border-radius: 10px; padding-inline: 12px; font-size: 13px; }
.e-shell .wl-search kbd { background: var(--wl-surface-2); font-size: 12px; padding: 1px 4px; }
.e-shell .e-market { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; font-size: 12px; letter-spacing: 0; padding: 0 4px; }
.e-market-dot { width: 6px; height: 6px; border-radius: 50%; background: #1f9d5b; }
.e-shell .e-model-chip { height: 40px; border-radius: 10px; font-size: 13px; }
.e-shell .e-model-chip b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.e-shell .wl-iconbtn { border-radius: 10px; width: 40px; height: 40px; }
.e-shell .wl-main { max-width: 1440px; padding: 16px 0 56px; margin: 0 auto; }
.e-shell .wl-main:focus { outline: none; box-shadow: none; }
.e-skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 16px; background: var(--wl-text); color: var(--wl-nav-active-fg) !important; border-radius: 8px; }
.e-skip:focus { top: 16px; }
.e-shell .wl-app > .e-backdrop { position: fixed; }

/* Consistent cards, page headings, controls and data across every route. */
.e-shell .wl-page-head { align-items: flex-end; margin-bottom: 24px; padding-top: 8px; }
.e-shell .wl-page-head > div:first-child { min-width: 0; }
.e-shell .wl-eyebrow { font-size: 12px; letter-spacing: .08em; margin-bottom: 8px; }
/* Uppercase is the eyebrow's alone (ENGD-m9): group labels inside the content are sentence case, 12/500, secondary ink. */
.e-shell .wl-main :is(.wl-label, .ce-intent-name, .eng-seclabel, .cq-version-title span, .e-lvl, .vg-sep) { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--wl-text-2); }
.e-shell .wl-main .e-lvl.ok { color: var(--wl-ok); } .e-shell .wl-main .e-lvl.warn { color: var(--wl-warn); } .e-shell .wl-main .e-lvl.error { color: var(--wl-danger); }
.e-shell .wl-title { font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; text-wrap: balance; }
.e-shell .wl-subtitle { color: var(--wl-text-3); font-size: 14px; line-height: 1.5; max-width: 80ch; text-wrap: pretty; }
.e-shell .wl-card { border-radius: 16px; }
.e-shell .wl-card-head { flex-wrap: wrap; padding-top: 24px; }
.e-shell .wl-card-title { font-size: 16px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.e-shell .wl-card-sub { font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.e-shell .wl-card-foot { background: var(--wl-surface); font-size: 13px; }
.e-shell .wl-well { border-radius: 12px; font-size: 14px; line-height: 1.5; }
.e-shell .wl-tile { padding: 20px 24px; }
.e-shell .wl-tile-label { color: var(--wl-text-2); font-size: 13px; }
.e-shell .wl-tile-icon { border-radius: 10px; background: var(--wl-surface-2); color: var(--wl-text-3); }
.e-shell .wl-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.e-shell .wl-num.md { font-size: 34px; }
.e-shell .wl-tile-foot { font-size: 12px; line-height: 1.5; }
.e-shell .wl-btn { min-height: 40px; border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: center; }
.e-shell .wl-btn.sm { min-height: 36px; font-size: 13px; padding-inline: 16px; }
.e-shell .wl-btn.primary { background: var(--wl-nav-active-bg); border-color: var(--wl-nav-active-bg); color: var(--wl-nav-active-fg); }
.e-shell .wl-btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--wl-nav-active-bg) 85%, var(--wl-surface)); box-shadow: none; }
/* Hover must never erase keyboard focus (task 71). Match the dark hover selector's specificity too. */
.e-shell .wl-btn.primary:hover:not(:disabled):focus-visible { box-shadow: var(--wl-focus); }
.e-shell .wl-btn:disabled { cursor: default; opacity: .5; }
.e-shell .wl-input { min-height: 44px; border-radius: 10px; border-color: var(--wl-border-strong); font-size: 14px; padding-inline: 12px; }
.e-shell textarea.wl-input { min-height: 96px; padding-block: 12px; line-height: 1.6; }
/* a skeleton is a grey block even before its shimmer paints (and to a probe that reads background-color) */
.e-shell .wl-skel { background-color: var(--wl-surface-2); }
.e-shell .wl-input::placeholder { color: var(--wl-text-3); opacity: 1; }
.e-shell .wl-input:focus { border-color: var(--wl-accent); outline: 2px solid var(--wl-accent-soft); outline-offset: 1px; }
.e-shell .wl-field label { font-size: 13px; font-weight: 500; }
.e-shell .wl-field { gap: 8px; }
.e-shell .wl-field .wl-help { font-size: 13px; line-height: 1.5; }
.e-shell .wl-pill { font-size: 12px; font-weight: 500; padding: 4px 8px; }
.e-shell .wl-seg { border-radius: 10px; padding: 4px; background: var(--wl-surface-2); border-color: var(--wl-border); flex-wrap: wrap; gap: 2px; }
.e-shell .wl-seg button { border-radius: 8px; min-height: 36px; padding: 0 12px; font-size: 13px; }
.e-shell .wl-seg button[aria-pressed="true"] { background: var(--wl-nav-active-bg); color: var(--wl-nav-active-fg); }
/* ONE page-tab strip for the whole engine (task 70, ENGD-M3): the panel's .wl-tabs.line. One lane with an underline,
   44 px targets, 14 px labels, a count as a quiet number; filters inside a tab are .wl-seg. Pages draw their tabs as
   <div class="wl-tabs" role="tablist"><button role="tab" aria-selected>...</button></div>. */
.e-shell .wl-tabs { display: flex; flex-wrap: nowrap; gap: 24px; width: auto; max-width: 100%; margin-bottom: 24px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--wl-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.e-shell .wl-tabs::-webkit-scrollbar { display: none; }
.e-shell .wl-tabs > button, .e-shell .wl-tabs > a { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--wl-text-3); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; }
.e-shell .wl-tabs > button:hover:not([aria-selected="true"]), .e-shell .wl-tabs > a:hover:not([aria-selected="true"]) { color: var(--wl-text); background: none; }
.e-shell .wl-tabs > [aria-selected="true"] { color: var(--wl-text); font-weight: 600; background: none; box-shadow: inset 0 -2px 0 var(--wl-text); }
.e-shell .wl-tabs > [aria-selected="true"]:focus-visible { box-shadow: var(--wl-focus), inset 0 -2px 0 var(--wl-text); }
.e-shell .wl-tabs .wl-tab-count { font-size: 13px; font-weight: 500; color: var(--wl-text-3); font-variant-numeric: tabular-nums; }
.e-shell .wl-table th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--wl-text-3); }
.e-shell .wl-table td { font-size: 13px; border-bottom-color: color-mix(in srgb, var(--wl-border) 65%, var(--wl-surface)); }
.e-shell .wl-empty { padding: 36px 24px; }
.e-shell .wl-empty .wl-empty-ic { width: 48px; height: 48px; border-radius: 14px; color: var(--wl-text-3); }
.e-shell .wl-empty b { font-size: 16px; font-weight: 600; }
.e-shell .wl-empty p { font-size: 14px; line-height: 1.5; max-width: 56ch; margin-inline: auto; }
.e-shell .wl-settings { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
.e-shell .wl-settings-index { background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: 14px; padding: 8px; gap: 4px; }
.e-shell .wl-settings-index a { border-radius: 10px; padding: 12px 12px; font-size: 14px; }
.e-shell .wl-settings-index a:hover:not([aria-current="true"]) { background: var(--wl-surface-2); }
.e-shell .st-endpoint code { min-width: 0; }
.e-shell .st-opt { padding: 16px; }
.e-shell .seo-hero { padding: 20px 24px; background: var(--wl-surface); border: 1px solid var(--wl-border); }
.e-shell .seo-hero-input { min-width: 0; border-radius: 10px; background: var(--wl-surface); }
.e-shell .e-log-row { border-bottom-color: var(--wl-border); }
.e-logs-page { display: flex; flex-direction: column; height: calc(100dvh - 128px); min-height: 500px; }
.e-log-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.e-log-tools .wl-seg { max-width: 100%; }
.e-log-search { flex: 1 1 220px; max-width: 320px; min-width: 0; }
.e-log-search input { min-width: 0; }
.e-shell .db-chart { min-width: 0; max-width: 100%; }
.e-shell .db-chart canvas { max-width: 100%; }
.e-shell .e-palette { border-radius: 16px; }
.e-shell .e-menu { border-radius: 12px; max-width: calc(100vw - 32px); }
.e-shell .e-menu-item { min-height: 40px; font-size: 14px; }
.e-shell .e-dialog { width: 440px; max-width: 100%; border-radius: 20px; padding: 32px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.e-shell .e-dialog .wl-card-title { font-size: 18px; }
.e-shell .e-dialog-close { width: 34px; height: 34px; }
.e-progress-note { margin: 0; padding-top: 16px; border-top: 1px solid var(--wl-border); color: var(--wl-text-3); font-size: 12px; line-height: 1.5; text-align: center; }
.e-shell .e-ring .mid span { font-weight: 600; }
.e-shell #wl-run-bar { border-radius: 14px; }
.e-shell #wl-run-bar .what { white-space: normal; }
.e-shell .wl-toast { border-radius: 12px; line-height: 1.45; }
.e-shell .wf-sec-tools { opacity: 1; }
.e-shell .wf-sec { padding: 16px; }
.e-shell .wf-row.is-active { color: var(--wl-nav-active-fg); background: var(--wl-nav-active-bg); }
.e-shell .wf-row.is-active small { color: color-mix(in srgb, var(--wl-nav-active-fg) 70%, transparent); }
.e-shell .wf-row.is-active .wl-pill { color: var(--wl-nav-active-fg); background: color-mix(in srgb, var(--wl-nav-active-fg) 14%, transparent); }
.e-shell .wf-shell { height: calc(100dvh - 200px); min-height: 500px; }
.e-shell .wf-json:focus { outline: 2px solid var(--wl-accent); outline-offset: -2px; }

/* The brief is a guided work surface rather than a loose textarea. */
.e-shell .eng-brief-wrap { padding: 0; }
.e-shell .eng-brief-title { font-size: 28px; font-weight: 600; line-height: 1.15; margin: 0; }
.e-shell .eng-brief-sub { max-width: 76ch; margin: 8px 0 0; color: var(--wl-text-3); font-size: 13px; line-height: 1.55; }
.eng-brief-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.e-shell .eng-brief-card { overflow: hidden; }
.e-shell .eng-brief-card .ce-tabs { margin-bottom: 16px; border: 0; border-radius: 10px; background: var(--wl-surface-2); }
.e-shell .eng-brief-card .ce-tab { border-radius: 8px; min-height: 36px; font-size: 12px; }
.e-shell .eng-brief-card .ce-textarea { min-height: 340px; border-color: var(--wl-border-strong); font-size: 13px; line-height: 1.7; }
.e-shell .eng-brief-card .ce-textarea:focus { border-color: var(--wl-accent); outline: 2px solid var(--wl-accent-soft); outline-offset: 1px; }
.e-shell .eng-brief-card .ce-charcount { font-size: 12px; flex-wrap: wrap; row-gap: 4px; }
.e-shell .eng-brief-card .ce-toggle { background: var(--wl-surface-2); border-color: transparent; padding: 12px 16px; }
.e-shell .eng-brief-card .ce-toggle-label { font-size: 13px; }
.e-shell .eng-brief-card .ce-toggle-sub { font-size: 12px; }
.eng-brief-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 16px; }
.e-shell .eng-brief-wrap .ce-btn-primary { margin-top: 0; min-height: 42px; height: auto; padding-block: 12px; font-size: 13px; }
.e-workflow { display: flex; flex-direction: column; gap: 24px; }
.e-workflow-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; position: relative; }
.e-workflow-step:not(:last-child)::after { content: ''; position: absolute; width: 1px; left: 13.5px; top: 36px; bottom: -14px; background: var(--wl-border); }
.e-workflow-step > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--wl-surface-2); color: var(--wl-text-3); font-size: 12px; font-weight: 600; }
.e-workflow-step.is-now > span { background: var(--wl-nav-active-bg); color: var(--wl-nav-active-fg); }
.e-workflow-step b { font-size: 13px; font-weight: 600; }
.e-workflow-step p { color: var(--wl-text-3); margin: 4px 0 0; font-size: 12px; line-height: 1.55; }
.e-brief-tip { border: 1px solid var(--wl-border); padding: 24px; border-radius: 14px; background: var(--wl-surface-2); }
.e-tip-icon { color: var(--wl-accent-ink); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--wl-accent-soft); margin-bottom: 12px; }
.e-brief-tip h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.e-brief-tip p { color: var(--wl-text-3); margin: 0; font-size: 12px; line-height: 1.6; }
.e-shell .eng-shell { grid-template-columns: 280px minmax(0, 1fr); }
.e-shell .eng-work-title { font-size: 16px; font-weight: 600; }
.e-shell .eng-side { top: 72px; }
.e-shell .eng-workhead { padding: 16px 20px; }
.e-shell .ce-ctrl-btn { width: auto; flex-shrink: 0; }
.e-shell .ce-banner { align-items: center; flex-wrap: wrap; }
.e-shell .ce-banner #shareable-link-input { flex-basis: 160px !important; }
.e-shell .ce-banner .ce-banner-icon { flex: none; }
.e-shell .ce-grid { min-width: 660px; }
.e-shell .ce-grid { table-layout: fixed; }
.e-shell .ce-page-cell { align-items: center; }
.e-shell .ce-page-cell .ce-cell-title { flex: 1 1 auto; min-width: 0; }
.e-shell .ce-page-cell .eng-row-type { flex: none; }
.e-shell .ce-grid th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.e-shell .ce-btn-primary, .e-shell .ce-ctrl-btn.primary { color: var(--wl-nav-active-fg); background: var(--wl-nav-active-bg); }
.e-shell .ce-btn-primary .cnt { color: var(--wl-nav-active-fg); background: color-mix(in srgb, var(--wl-nav-active-fg) 16%, transparent); }
.e-shell .ce-tab.active, .e-shell .eng-navrow.active { color: var(--wl-nav-active-fg); background: var(--wl-nav-active-bg); }
.e-shell .eng-row.active { background: var(--wl-nav-active-bg); }
.e-shell .eng-row.active .eng-row-title { color: var(--wl-nav-active-fg); }
.e-shell .eng-row.active .eng-row-kwn { color: color-mix(in srgb, var(--wl-nav-active-fg) 75%, transparent); }
.e-shell .ce-tier-btn.on .ce-tier-name { color: var(--wl-nav-active-fg); }
.e-shell .ce-tier-btn.on .ce-tier-limit { color: color-mix(in srgb, var(--wl-nav-active-fg) 75%, transparent); }
.e-shell .ce-tier-btn.on { background: var(--wl-nav-active-bg); }
.e-shell .ce-disconnect { border-radius: 10px; font-size: 12px; line-height: 1.5; }
.e-shell .ce-kw-row { align-items: flex-start; }
.e-shell .ce-kw-row .ce-kw-toggle { margin-top: 1px; }
.e-shell .ce-chip { max-width: 100%; border-radius: 10px; text-align: left; line-height: 1.5; }
.e-shell .ce-chip > span { min-width: 0; overflow-wrap: anywhere; }
.e-shell .ce-chip .vol { flex: none; min-width: 24px; white-space: nowrap; font-size: 12px; text-align: right; color: var(--wl-text-3); font-variant-numeric: tabular-nums; }
.e-shell .ce-chip .ce-kd { flex: none; }
.e-shell .ce-chip.on { background: var(--wl-accent-soft); border-color: var(--wl-accent); color: var(--wl-accent-ink); }
.e-shell .ce-chip:not(.on) > svg { opacity: .25; }
.e-shell .ce-chip.on > svg { opacity: 1; }
.e-shell .login-page { background: var(--wl-frame); padding: 32px 20px; }
.e-shell .login-card { border-radius: 18px; box-shadow: 0 10px 32px -18px rgba(20,20,20,.16); }
/* The sign-in's mark: the logo 40 px tall (32 of image), up to 200 px wide, no tile (ENGD-B1). A wide wordmark is the
   name, so the brand-name eyebrow under it is hidden (kept for a screen reader). */
.e-shell .login-brand { height: 40px; margin-bottom: 24px; }
.e-shell .login-brand:has(> img) { max-width: 200px; }
.e-shell .login-brand[data-logo="square"] { width: 40px; border-radius: 12px; }
.e-shell .login-brand .e-logo-initial { font-size: 18px; }
.e-shell .login-brand[data-logo="wide"] + .wl-eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1200px) {
  .e-shell .wl-app { gap: 20px; }
  .e-shell .eng-shell { grid-template-columns: 1fr; }
  .e-shell .eng-side { position: static; max-height: none; }
  .e-shell .eng-side-scroll { flex: none; max-height: 260px; min-height: 160px; }
  .e-shell .eng-scroll { max-height: none; }
  .e-shell .eng-brief-layout { grid-template-columns: minmax(0, 1fr); }
  .e-shell .eng-brief-guide { display: grid; grid-template-columns: 1.2fr 1fr; }
}
@media (max-width: 1000px) {
  .e-shell .wf-shell { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .e-shell .wf-side { max-height: 380px; }
  .e-shell .wf-main { min-height: 500px; }
  .e-shell .wf-json { min-height: 420px; }
}
@media (max-width: 900px) {
  .e-shell .wl-app, .e-shell .wl-app[data-collapsed="true"] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main'; padding: 12px 16px; gap: 0; }
  .e-shell .wl-topbar { top: 0; height: 56px; gap: 8px; background: var(--wl-frame); }
  .e-shell .wl-search { width: 44px; height: 44px; flex: none; justify-content: center; padding: 0; }
  .e-shell .wl-main { padding: 16px 0 40px; }
  .e-shell .wl-app[data-open="true"] .wl-rail { top: 12px; bottom: 12px; left: 12px; height: auto; width: min(280px, calc(100vw - 24px)); }
  .e-shell .wl-app[data-collapsed="true"] .wl-rail .e-brand-name,
  .e-shell .wl-app[data-collapsed="true"] .wl-rail .wl-lbl,
  .e-shell .wl-app[data-collapsed="true"] .wl-rail .wl-nav-group { display: flex; }
  .e-shell .wl-app[data-collapsed="true"] .wl-rail .e-workspace { display: flex; }
  .e-shell .wl-app[data-collapsed="true"] .wl-rail .wl-brand { justify-content: flex-start; padding: 2px 8px 20px; }
  .e-shell .wl-app[data-collapsed="true"] .wl-rail .wl-nav-row { justify-content: flex-start; padding: 0 12px; }
  .e-shell .wl-rail-foot > .wl-btn { display: none; }
  .e-shell .wl-settings { grid-template-columns: minmax(0, 1fr); }
  .e-shell .wl-settings-index { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 680px) {
  :root { --wl-pad: 20px; }
  .e-shell .e-market { display: none; }
  .e-shell .e-model-chip b { max-width: 115px; }
  .e-shell .wl-page-head { align-items: flex-start; row-gap: 16px; margin-bottom: 24px; }
  .e-shell .wl-page-head .wl-actions { width: 100%; }
  .e-shell .wl-title, .e-shell .eng-brief-title { font-size: 28px; }
  .e-shell .wl-card-head { padding-top: 20px; }
  .e-shell .wl-card-body { padding-top: 20px; padding-bottom: 20px; }
  .e-shell .wl-card-body.wl-tight { padding: 0; }
  .e-shell .wl-card-head + .wl-card-body.wl-tight { padding-top: 16px; }
  .e-shell .wl-between { flex-wrap: wrap; row-gap: 12px; }
  .e-shell .wl-row { min-width: 0; }
  .e-shell .wl-seg button { padding-inline: 12px; }
  .e-shell .wl-btn { min-height: 44px; }
  .e-shell .wl-btn.sm { min-height: 44px; }
  .e-shell .eng-brief-guide { display: flex; }
  .e-shell .eng-brief-card .ce-textarea { min-height: 300px; font-size: 16px; }
  .e-shell .eng-brief-foot { gap: 12px; }
  .e-shell .eng-brief-foot > .ce-btn-primary { width: 100%; white-space: normal; }
  .e-shell .eng-workhead { padding: 16px; }
  .e-shell .eng-workhead > div:first-child { min-width: 0; width: 100%; }
  .e-shell .eng-sheetlinks { flex-wrap: wrap; }
  .e-shell .eng-sheetlinks .ce-ctrl-btn { flex-basis: 140px; }
  .e-shell .eng-doc { padding: 20px 16px; }
  .e-shell .ce-result-item { flex-wrap: wrap; }
  .e-shell .ce-result-time { margin-left: 44px; }
  .e-shell .ce-steps { gap: 8px; flex-wrap: wrap; margin-bottom: 0; }
  .e-shell .ce-step { gap: 8px; font-size: 12px; }
  .e-shell .ce-step-line { min-width: 10px; margin-inline: 2px; }
  .e-shell .ce-kw-panel { padding: 16px; }
  .e-shell .ce-kwsel-bar { padding: 16px 16px; }
  .e-shell .ce-kwsel-bar > .ce-btn-primary { width: 100%; height: auto; min-height: 42px; padding-block: 12px; white-space: normal; }
  .e-shell .e-fields { grid-template-columns: minmax(0, 1fr); }
  .e-shell .e-kv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .e-shell .e-kv dd { margin-bottom: 12px; }
  .e-shell .e-log-row { grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; padding: 12px; font-size: 13px; }
  .e-log-search { flex-basis: 100%; max-width: none; }
  .e-shell .e-dialog { padding: 28px 24px; gap: 16px; }
  .e-shell .e-ring { width: 128px; height: 128px; }
  .e-shell #wl-run-bar { width: calc(100vw - 24px); max-width: none; bottom: 12px; padding: 12px; flex-wrap: wrap; gap: 8px; }
  .e-shell #wl-run-bar .who { max-width: 150px; }
  .e-shell .wf-main .wl-card-head > .wl-row { flex-wrap: wrap; width: 100%; }
  .e-shell .wf-sec > .wl-row { flex-wrap: wrap; }
  .e-shell .wf-sec-tools { width: 100%; justify-content: flex-end; }
  .e-shell .seo-hero { padding: 16px; }
  .e-shell .seo-hero-input { width: 100%; }
  .e-shell .seo-hero-input input { width: 100%; min-width: 0; }
  .e-shell .seo-scoremeta { min-width: 0; }
  .e-shell .st-endpoint { padding: 16px; }
  .e-shell .st-code, .e-shell .e-pre { font-size: 12px; }
  .e-shell .login-page { padding: 70px 16px 24px; }
}
/* Phone tiles: a compact 2 x 2, never one tile per row pushing the work below the first screen (task 70, ENGD-M14;
   the panel's D239 phone rule). */
@media (max-width: 700px) {
  .e-shell .wl-main .wl-grid-4:has(> .wl-tile) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .e-shell .wl-main .wl-grid-4 > .wl-tile { padding: 16px; min-width: 0; }
  .e-shell .wl-main .wl-grid-4 > .wl-tile .wl-tile-icon { display: none; }
  .e-shell .wl-main .wl-grid-4 > .wl-tile .wl-num.md { font-size: 26px; }
  .e-shell .wl-main .wl-grid-4 > .wl-tile .wl-num.sm { font-size: 16px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .e-shell *, .e-shell *::before, .e-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Phone targets (DESIGN-RULES 8, task 67 EN-A111 / A116): every control the core pages draw (last in the cascade on purpose: the brief card sets its tabs at 36 px above) is at least 44 px tall
   on a phone, and the icon-only ones 44 px square. */
@media (max-width: 700px) {
  .wl-root.e-shell .wl-btn.sm, .wl-root.e-shell .wl-seg > button, .wl-root.e-shell .e-model-chip, .wl-root.e-shell .ce-tab, .wl-root.e-shell .ce-ctrl-btn,
  .wl-root.e-shell .ce-tier-btn, .wl-root.e-shell .db-segment button, .wl-root.e-shell .wl-settings-index a, .wl-root.e-shell .wl-kebab {
    min-height: 44px;
  }
  .wl-root.e-shell .wl-menu, .wl-root.e-shell .wl-topbar .wl-iconbtn, .wl-root.e-shell .wl-kebab { min-width: 44px; min-height: 44px; }
  /* every button, select and field in the content column, including the page sheets that size their own (the dashboard's
     38 px header buttons, History's 32 px language select): a min-height over a set height still wins */
  .wl-root.e-shell .wl-panel :is(.wl-btn, .ce-btn-primary, select, input.wl-input, .db-search, .db-search input, .db-period) { min-height: 44px; }
  /* Task 68 (EN-A111 re-check at 390 and 360): the rest of the 44 px rule. A short chip or icon button was 44 px tall
     but 28 to 43 px wide (the blog counts, the log filters, Text / HTML, Move up / down); the skip link, the sheet's
     page rows and their boxes, the switches, the dashboard's text links, the sign-in page's quiet buttons and the
     sign-in bridge's button, and the restored page sheet's Research keywords, Start a new brief, page titles and
     slug / meta fields were under 44 px tall. A switch and a row's box keep their drawn size and get an
     invisible 44 px hit area (::before), which a tap lands on. */
  .wl-root.e-shell .wl-panel button:not(.wl-switch), .wl-root.e-shell .wl-panel a.wl-btn, .wl-root.e-shell .wl-toast-x { min-width: 44px; }
  /* every other button in the content column (the notice's dismiss, Content quality's area chips and view tabs...) */
  .wl-root.e-shell .wl-panel button:not(.wl-switch) { min-height: 44px; }
  .e-skip { min-height: 44px; display: inline-flex; align-items: center; }
  .wl-root.e-shell :is(.eng-navrow, .eng-row-title, .ce-subs, .db-text-link, .db-publishing > a, .login-alt, a.wl-btn,
                         .ce-btn-secondary, .ce-mini-btn, .ce-cell-title, input.ce-cell-edit) { min-height: 44px; }
  .wl-root.e-shell .eng-row { padding-top: 0; padding-bottom: 0; }
  /* ...and on Google Business, WordPress and Content quality: the text buttons and links (Manage, Change where blogs
     go, Download draft, Reload saved runs, Manage project briefs), the checkbox rows, the draft view tabs, the colour
     fields and the site search field */
  .wl-root.e-shell .wl-panel :is(.wp-text-link, .cq-text-button, .gp-link) { display: inline-flex; align-items: center; min-height: 44px; }
  .wl-root.e-shell .wl-panel :is(.cq-checkbox, .gp-check, .gbp-projects label, .cq-editor-tabs [role=tab], input[type=color]) { min-height: 44px; }
  .wl-root.e-shell .wl-panel .wp-search { height: auto; }
  .wl-root.e-shell .wl-panel .wp-search input { min-height: 44px; }
  .wl-root.e-shell .eng-row-check, .wl-root.e-shell .wl-switch { position: relative; }
  .wl-root.e-shell .eng-row-check::before, .wl-root.e-shell .wl-switch::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .wl-root.e-shell.e-login > .wl-iconbtn, .wl-root.e-shell .login-pw button { width: 44px; height: 44px; }
  .wl-root.e-shell .login-pw button { top: 50%; right: 2px; transform: translateY(-50%); }
}
/* the row's box in its label: the label is the 16 px grid cell, centred like the bare box was */
.wl-root.e-shell .eng-row-check { display: grid; place-items: center; cursor: pointer; }

/* A sheet's page title wraps inside its cell instead of printing past it at 390 (task 67, EN-A112). */
.wl-root.e-shell .ce-page-cell { flex-wrap: wrap; }
.wl-root.e-shell .ce-page-cell .ce-cell-title { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.wl-root.e-shell .ce-page-cell .eng-row-type { flex: none; }