@import url("/page-manager.css");
/* CONFIGURABLE: design tokens. Blueprint Design's own (blueprintdesign.se): light, calm, petrol as the one accent. */
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; }
:root {
  color-scheme: light;
  --color-bg: #f7f9f9;
  --color-surface: #ffffff;
  --color-surface-2: #eef3f4;
  --color-ink: #172126;
  --color-muted: #50616a;
  --color-line: #e3e8ea;
  --color-accent: #0e7490;
  --color-accent-soft: #e7f3f6;
  --color-deep: #0b3a47;
  --color-ok: #1f7a4d;
  --color-ok-soft: #e5f4ec;
  --color-wait: #8a5a00;
  --color-wait-soft: #fbf1dc;
  --color-stop: #b42318;
  --color-stop-soft: #fdecea;
  --color-info: #0e7490;
  --color-info-soft: #e7f3f6;
  --site-primary: #0e7490;
  --font-ui: "DM Sans", -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "DM Sans", -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 16px;
  --radius-small: 12px;
  --shadow: 0 8px 30px rgba(18, 38, 45, 0.06);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gap: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-bg, #f3f0ea);
  color: var(--color-ink, #1c1a17);
  font: 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent, #a8481f); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty { color: var(--color-muted, #625c54); }
.eyebrow { margin: 0 0 12px; font: 500 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); }
.eyebrow b { font-weight: 500; color: var(--color-accent); }
/* Each view opens like a section on blueprintdesign.se: a small label, a two-tone heading, a short lead. */
.view-head { display: grid; gap: 10px; margin: 18px 0 26px; max-width: 760px; }
.view-head h1 { margin: 0; font: 600 clamp(30px, 3.6vw, 42px)/1.04 var(--font-display); letter-spacing: -0.05em; text-wrap: balance; color: var(--color-ink); }
.view-head h1 em { font-style: normal; color: var(--color-accent); }
.view-head p { margin: 0; max-width: 62ch; color: var(--color-muted); font-size: 16px; line-height: 1.6; }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 18px;
  min-height: 68px; padding: 12px var(--gap);
  background: rgba(247, 249, 249, 0.9); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-ink); text-decoration: none; }
.brand-mark { display: block; width: 22px; height: auto; }
.brand-name { font: 600 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.site-name { color: var(--color-muted); font-size: 14px; padding-left: 14px; border-left: 1px solid var(--color-line); }
.user { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-muted); }
.user strong { color: var(--color-ink, #1c1a17); font-weight: 600; }

/* ---- workspace: the page is the product, the side panel supports it ---- */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 0 var(--gap); min-height: calc(100vh - 68px); }
.canvas { padding: 8px 0 140px; outline: none; min-width: 0; }
.side { padding: 8px 0 140px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; min-width: 0; }
.side > section, .side > details { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 18px; }

.page-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; }
.page-tab {
  padding: 8px 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--color-muted); max-width: 100%; white-space: normal; text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.page-tab:hover { color: var(--color-ink); background: var(--color-surface-2); }
.page-tab[aria-current="page"] { color: var(--color-ink); background: var(--color-surface); border-color: var(--color-line); }
.hint { margin: 0 0 12px; font-size: 13.5px; color: var(--color-muted); }

/* The browser frame: the customer recognises their own site, not a form. */
/* The site in a frame, like "Urval av arbeten" on the start page: a quiet bar with the address. */
.browser { border-radius: var(--radius); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow); border: 1px solid var(--color-line); }
.browser-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.dots { display: none; }
.address { font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the page, in its own typography ---- */
.page { padding: 0 0 24px; color: #1c1a17; background: #ffffff; }
.p-section { position: relative; padding: 36px clamp(20px, 5vw, 56px); border-bottom: 1px solid #efebe4; }
.p-section:last-child { border-bottom: 0; }
.p-section.is-hero { padding-top: 56px; padding-bottom: 56px; background: #faf8f4; }
.p-section.is-nav { display: flex; gap: 18px; padding-top: 14px; padding-bottom: 14px; font-size: 14px; }
.section-tag {
  position: absolute; top: 8px; right: 12px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #625c54; background: #f1ede6;
  opacity: 0; transition: opacity 120ms ease;
}
.p-section:hover .section-tag, .p-section:focus-within .section-tag { opacity: 1; }

/* A text on the page is the edit control: same look until you click it. */
.edit {
  display: block; width: 100%; margin: 0; padding: 4px 8px; border: 0; border-radius: 8px;
  background: transparent; text-align: left; cursor: text; color: inherit;
  white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 120ms ease, background-color 120ms ease;
}
.edit:hover { box-shadow: inset 0 0 0 1px #d8d1c6; background: #fbf9f6; }
.edit.is-empty { color: #8a8379; font-style: italic; }
textarea.edit { resize: none; overflow: hidden; cursor: text; box-shadow: inset 0 0 0 2px var(--site-primary, #a8481f); background: #ffffff; }
.r-h1 { font: 600 clamp(30px, 4.2vw, 46px)/1.1 var(--font-display); letter-spacing: -0.015em; }
.r-h2 { font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--font-display); letter-spacing: -0.01em; }
.r-lead { font-size: 19px; line-height: 1.55; color: #4a453f; max-width: 60ch; }
.r-body { font-size: 16px; line-height: 1.65; color: #3a3631; max-width: 65ch; }
.r-button { display: inline-block; width: auto; max-width: 100%; margin-top: 10px; padding: 12px 22px; border-radius: 10px; background: var(--site-primary, #a8481f); color: #ffffff; font-weight: 650; }
.r-button:hover { background: var(--site-primary, #a8481f); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 2px var(--site-primary, #a8481f); }
textarea.r-button { color: #ffffff; background: var(--site-primary, #a8481f); }
.field { position: relative; margin: 2px -8px; }

/* Field states: changed (not sent), sent (being checked), needs fixing (stopped by the checks). */
.badge {
  position: absolute; top: -9px; right: 8px; z-index: 1; padding: 1px 8px; border-radius: 999px;
  font: 600 11px/1.6 var(--font-ui); letter-spacing: 0.02em; pointer-events: none;
}
.field.is-changed .edit { background: #fbeee6; }
.field.is-changed .badge { color: #ffffff; background: #a8481f; }
.field.is-sent .edit { background: #e6eff4; }
.field.is-sent .badge { color: #ffffff; background: #1f4f6b; }
.field.is-fix .edit { background: #f9e4e2; box-shadow: inset 0 0 0 1px #a12d27; }
.field.is-fix .badge { color: #ffffff; background: #a12d27; }
.field.is-changed .r-button, .field.is-sent .r-button, .field.is-fix .r-button { background: var(--site-primary, #a8481f); outline: 3px solid #f2c9b4; }

.locked-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; padding: 0; list-style: none; color: #4a453f; }
.locked-list li { display: inline-flex; align-items: center; gap: 6px; }
.p-section.is-nav .locked-list { margin: 0; }
/* Images on the page: the picture itself, with the tools under it. */
.image-field { margin: 16px -8px 4px; padding: 8px; border-radius: 10px; }
.image-preview { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 8px; background: var(--color-line, #e2dcd2); }
.image-empty { display: grid; place-items: center; min-height: 140px; border: 1px dashed #c9c1b4; border-radius: 8px; color: #8a8379; font-size: 14px; }
.image-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 10px; }
.image-alt-label { display: grid; gap: 4px; flex: 1 1 260px; font: 600 13px/1.3 var(--font-ui, system-ui, sans-serif); color: #1c1a17; }
.image-alt-label small { font-weight: 400; color: #625c54; }
.image-alt { font: 400 15px/1.4 var(--font-ui, system-ui, sans-serif); padding: 8px 10px; border: 1px solid #c9c1b4; border-radius: 8px; background: #ffffff; color: #1c1a17; }
.image-alt:focus-visible { outline: 2px solid var(--site-primary, #a8481f); outline-offset: 1px; }
.field.image-field.is-changed { background: #fbeee6; }
.field.image-field.is-sent { background: #e6eff4; }
.field.image-field.is-fix { background: #f9e4e2; box-shadow: inset 0 0 0 1px #a12d27; }

.locked-note { margin: 10px 0 0; font-size: 12px; color: #8a8379; }

/* ---- side panel ---- */
.change-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.change { min-width: 0; overflow-wrap: anywhere; padding: 14px 16px; border: 1px solid var(--color-line, #e2dcd2); border-radius: var(--radius); background: var(--color-bg, #f3f0ea); }
.change.is-current { background: var(--color-surface, #fff); box-shadow: var(--shadow); }
.change-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.change-time { font-size: 12px; color: var(--color-muted, #625c54); }
.change p { margin: 8px 0 0; }
.change ul.problems { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.change-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.change a { color: var(--color-info, #1f4f6b); }
.older summary { cursor: pointer; font-size: 13px; color: var(--color-muted, #625c54); }

.checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; animation: rise 260ms ease both; }
.check::before { content: ""; display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.check.pass::before { content: "✓"; color: #ffffff; background: var(--color-ok, #2d6a3a); }
.check.fail::before { content: "!"; color: #ffffff; background: var(--color-stop, #a12d27); }
.check.not-run { color: var(--color-muted, #625c54); }
.check.not-run::before { content: "–"; color: var(--color-muted, #625c54); border: 1px solid var(--color-line, #e2dcd2); }
.running { margin-top: 12px; height: 4px; border-radius: 999px; background: var(--color-line, #e2dcd2); overflow: hidden; }
.running::after { content: ""; display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--color-wait, #7a5200); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 30px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.checking, .pill.publishing { color: var(--color-wait, #7a5200); background: var(--color-wait-soft, #f6ecd6); }
.pill.checking::before, .pill.publishing::before { animation: pulse 1.2s ease-in-out infinite; }
.pill.awaiting-approval { color: var(--color-info, #1f4f6b); background: var(--color-info-soft, #e1ecf2); }
.pill.published { color: var(--color-ok, #2d6a3a); background: var(--color-ok-soft, #e3efe4); }
.pill.withdrawn { color: var(--color-muted, #50616a); background: var(--color-fog, #eef1f2); }
.pill.quality-failed, .pill.blocked, .pill.failed { color: var(--color-stop, #a12d27); background: var(--color-stop-soft, #f7e2e0); }
@keyframes pulse { 50% { opacity: 0.25; } }

/* Google preview */
.seo { border-top: 1px solid var(--color-line, #e2dcd2); padding-top: 20px; }
.seo summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.seo summary::-webkit-details-marker { display: none; }
.seo summary::after { content: "+"; font-size: 18px; color: var(--color-muted, #625c54); }
.seo[open] summary::after { content: "–"; }
.serp { margin: 4px 0 16px; padding: 14px 16px; border-radius: 10px; background: #ffffff; border: 1px solid #e6e2db; font-family: Arial, sans-serif; }
.serp p { margin: 0; overflow-wrap: anywhere; }
.serp-url { font-size: 12px; color: #4d5156; }
.serp-title { margin-top: 4px !important; font-size: 18px; line-height: 1.3; color: #1a0dab; }
.serp-desc { margin-top: 4px !important; font-size: 13px; line-height: 1.55; color: #4d5156; }
.seo-field { margin-top: 12px; }
.seo-field label { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-muted, #625c54); margin-bottom: 4px; }
.seo-field .edit { box-shadow: inset 0 0 0 1px var(--color-line, #e2dcd2); background: var(--color-bg, #f3f0ea); color: var(--color-ink, #1c1a17); }
.seo-field textarea.edit { box-shadow: inset 0 0 0 2px var(--color-accent, #a8481f); background: var(--color-surface, #fff); }
.seo-field.is-changed .edit, .seo-field.is-sent .edit, .seo-field.is-fix .edit { background: var(--color-accent-soft, #f7e7dd); }
.counter { font-variant-numeric: tabular-nums; }
.counter.over { color: var(--color-stop, #a12d27); font-weight: 650; }

/* ---- buttons, action bar, toast ---- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-small); border: 1px solid transparent; cursor: pointer; font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .15s var(--ease), transform .15s var(--ease); }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--color-deep); color: #ffffff; }
.button.primary:hover { background: var(--color-accent); }
.button.ghost { background: var(--color-surface); border-color: var(--color-line); color: var(--color-ink); }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }
.button.small { min-height: 30px; padding: 0 12px; font-size: 13px; }
.kbd { padding: 1px 6px; border-radius: 5px; font: 600 11px/1.5 var(--font-mono); background: rgba(255, 255, 255, 0.16); }

.actionbar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 20px; border-radius: 16px;
  background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e2dcd2);
  box-shadow: 0 14px 44px rgba(18, 38, 45, 0.16);
  animation: rise 180ms ease both;
}
.actionbar[hidden] { display: none; }
/* On wide screens the bar sits under the page, not under the whole window. */
@media (min-width: 1081px) { .actionbar { left: calc((100vw - 384px) / 2); } }
.actionbar-count { margin: 0 6px 0 0; font-weight: 650; white-space: nowrap; }

.toast { pointer-events: none; position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 20; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--radius-small); background: var(--color-deep); color: #ffffff; box-shadow: var(--shadow); }
.toast ul { margin: 6px 0 0; padding-left: 18px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- smaller screens: the page first, the panel below ---- */
@media (max-width: 1080px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .side { padding-top: 0; }
}
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; padding: 10px 16px; gap: 4px 14px; }
  .site-name { order: 3; flex-basis: 100%; font-size: 13px; }
  .canvas { padding: 14px 10px 140px; }
  .p-section { padding: 24px 16px; }
  .p-section.is-hero { padding-top: 32px; padding-bottom: 32px; }
  .actionbar { width: calc(100vw - 20px); bottom: 10px; padding-left: 14px; }
  .actionbar .kbd { display: none; }
}
/* ---- sign-in ---- */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login-card {
  width: min(420px, 100%); padding: 32px 28px;
  background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e3ddd3); border-radius: 16px; box-shadow: var(--shadow);
}
.login-card .brand { margin-bottom: 28px; }
.login-card h1 { margin: 0 0 8px; font: 600 28px/1.2 var(--font-display); letter-spacing: -0.01em; }
.login-card .lead { margin: 0 0 22px; color: var(--color-muted, #615b53); }
.login-card .hint { margin: 0 0 22px; font-size: 13px; color: var(--color-muted, #615b53); }
.login-card label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.login-card input {
  display: block; width: 100%; min-height: 46px; padding: 0 14px; margin-bottom: 14px;
  border: 1px solid var(--color-line, #e3ddd3); border-radius: 10px; background: var(--color-bg, #f6f3ee);
}
.login-card input[aria-invalid="true"] { border-color: var(--color-stop, #a12d27); }
.form-error { margin: -6px 0 14px; color: var(--color-stop, #a12d27); font-size: 14px; }
.button.wide { width: 100%; min-height: 46px; }
.logout { margin-left: 12px; padding: 4px 10px; min-height: 0; font-size: 13px; font-weight: 600; }

/* ---- Chat AI (Taskade/Start-stil) ---- */
.chat-fab { position: fixed; bottom: 32px; right: 32px; width: 56px; height: 56px; border-radius: 50%; background: #ffffff; border: 1px solid var(--color-line); box-shadow: 0 8px 24px rgba(18,38,45,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9998; transition: transform .2s var(--ease), box-shadow .2s; }
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(18,38,45,0.15); }
.chat-panel { position: fixed; bottom: 100px; right: 32px; width: min(400px, calc(100vw - 64px)); max-height: calc(100vh - 140px); background: #ffffff; border: 1px solid var(--color-line); border-radius: 24px; display: flex; flex-direction: column; box-shadow: 0 18px 44px -22px rgba(24,46,52,.22); z-index: 9999; overflow: hidden; transform-origin: bottom right; transition: opacity 0.2s, transform 0.2s; opacity: 0; transform: scale(0.95); pointer-events: none; }
.chat-panel.open { opacity: 1; transform: scale(1); pointer-events: auto; }
.chat-header { padding: 18px 24px; border-bottom: 1px solid var(--color-line); display: flex; justify-content: space-between; align-items: center; background: #fdfdfd; }
.chat-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); display: flex; align-items: center; gap: 8px; }
.chat-minimize { border: none; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; color: var(--color-muted); cursor: pointer; transition: background .15s; }
.chat-minimize:hover { background: var(--color-bg); color: var(--color-ink); }
.chat-log { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; background: #ffffff; }
.chat-msg { padding: 14px 18px; border-radius: 20px; font-size: 15px; line-height: 1.5; max-width: 90%; }
.chat-input { flex: 1; min-height: 24px; max-height: 120px; padding: 6px 0; border: 0; outline: 0; resize: none; background: transparent; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--color-ink); }
.chat-input::placeholder { color: #8aa0a6; }
.chat-attach { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--color-muted); cursor: pointer; transition: background .15s, color .15s; margin-left: -8px; }
.chat-attach:hover { background: var(--color-bg); color: var(--color-ink); }
.chat-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 20px 12px; }
.chat-attachments:empty { display: none; }
.chat-attachments .pill { background: var(--color-bg); border: 1px solid var(--color-line); font-size: 11px; padding: 4px 8px; }
.chat-send { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-accent); color: #fff; cursor: pointer; transition: transform .15s, opacity .15s; }
.chat-input-area { padding: 16px 20px 20px; background: #ffffff; border-top: 1px solid transparent; }
.chat-composer { display: flex; align-items: flex-end; gap: 12px; background: #ffffff; border: 1px solid var(--color-line); border-radius: 24px; padding: 10px 10px 10px 18px; box-shadow: 0 1px 2px rgba(24,46,52,.04); transition: border-color .15s, box-shadow .15s; }
.chat-composer:focus-within { border-color: #8fb7bf; box-shadow: 0 1px 2px rgba(24,46,52,.04), 0 12px 24px -12px rgba(40,108,123,.15); }
.chat-input { flex: 1; min-height: 24px; max-height: 120px; padding: 6px 0; border: 0; outline: 0; resize: none; background: transparent; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--color-ink); }
.chat-input::placeholder { color: #8aa0a6; }
.chat-send { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-accent); color: #fff; cursor: pointer; transition: transform .15s, opacity .15s; }
.chat-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1); }
.chat-send:disabled { opacity: 0.4; cursor: default; }

.site-pick { font: inherit; color: var(--color-ink, #1c1a17); background: transparent; border: 1px solid var(--color-line, #e3ded6); border-radius: 8px; padding: 6px 10px; min-height: 36px; }

/* Förbättra: the agents' proposals in plain words */
.improve { border-bottom: 1px solid var(--color-line, #e2dcd2); padding-bottom: 20px; margin-bottom: 20px; }
.improve-intro { margin: 6px 0 14px; color: var(--color-muted, #625c54); font-size: 14px; line-height: 1.5; }
.improve-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.improve-card { min-width: 0; overflow-wrap: anywhere; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 10px; }
.improve-card.is-pagar { border-color: var(--color-wait, #7a5200); }
.improve-card.is-klar { border-color: var(--color-ok, #2d6a3a); }
.improve-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.improve-size { font-size: 12px; color: var(--color-muted, #625c54); }
.improve-headline { margin: 0; font: 650 16px/1.35 var(--font-ui); }
.improve-why, .improve-suggestion, .improve-ask, .improve-status, .improve-note { margin: 0; font-size: 14px; line-height: 1.5; }
.improve-why strong, .improve-suggestion strong { font-weight: 650; }
.improve-ask { color: var(--color-info, #1f4f6b); background: var(--color-info-soft, #e1ecf2); padding: 8px 10px; border-radius: 8px; }
.improve-status { color: var(--color-wait, #7a5200); }
.improve-status.done { color: var(--color-ok, #2d6a3a); }
.improve-note { color: var(--color-muted, #625c54); }
.proposal-freshness { display: grid; grid-column: 1 / -1; gap: 12px; padding: 20px; margin: 0 0 28px; border: 1px solid var(--color-border, #ded8cf); border-radius: 12px; background: var(--color-surface, #fff); }
.proposal-freshness[hidden] { display: none; }
.proposal-freshness.needs-review { border-color: var(--color-wait, #7a5200); }
.freshness-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.proposal-freshness summary { cursor: pointer; font-size: 14px; }
.proposal-freshness ul { padding-left: 20px; font-size: 13px; line-height: 1.6; }
.freshness-flag { margin: 0; padding: 10px 12px; color: var(--color-wait, #7a5200); background: var(--color-wait-soft, #f6ecd6); border-radius: 6px; font-size: 13px; line-height: 1.5; }
.improve-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.linkish { background: none; border: 0; padding: 6px 4px; color: var(--color-muted, #625c54); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.pill.tone-stop { color: var(--color-stop, #a12d27); background: var(--color-stop-soft, #f7e2e0); }
.pill.tone-wait { color: var(--color-wait, #7a5200); background: var(--color-wait-soft, #f6ecd6); }
.pill.tone-info { color: var(--color-info, #1f4f6b); background: var(--color-info-soft, #e1ecf2); }
.improve-card.is-forhandsvisning { border-color: var(--color-info, #1f4f6b); }
.improve-card.is-publicerad { opacity: 0.8; }
.steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--color-line, #e2dcd2); padding-top: 8px; }
.step details > summary { list-style: none; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.step details > summary::-webkit-details-marker { display: none; }
.step details > summary:hover { background: var(--color-bg, #f3f0ea); }
.step details > summary:focus-visible { outline: 2px solid var(--color-accent, #a8481f); outline-offset: 1px; }
.step-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-line, #e2dcd2); }
.step-dot.klar { background: var(--color-ok, #2d6a3a); border-color: var(--color-ok, #2d6a3a); }
.step-dot.pagar { border-color: var(--color-wait, #7a5200); animation: pulse 1.2s ease-in-out infinite; }
.step-dot.stopp { background: var(--color-stop, #a12d27); border-color: var(--color-stop, #a12d27); }
.step-label { font-weight: 600; }
.step-state { font-size: 12px; color: var(--color-muted, #625c54); }
.step.is-vantar .step-label { color: var(--color-muted, #625c54); font-weight: 500; }
.step-body { padding: 2px 6px 8px 24px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--color-ink, #1c1a17); }
.step-body p { margin: 0; }
.step-body a { color: var(--color-info, #1f4f6b); font-weight: 600; }

/* Frågor till dig och kunskapsbanken */
.ask { border-bottom: 1px solid var(--color-line, #e2dcd2); padding-bottom: 20px; }
.ask-card { border-color: var(--color-info, #1f4f6b); }
.ask-topic { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: 0.02em; color: var(--color-info, #1f4f6b); }
.ask-input { width: 100%; box-sizing: border-box; min-height: 72px; padding: 10px 12px; border: 1px solid var(--color-line, #e2dcd2); border-radius: 10px; background: var(--color-bg, #f3f0ea); color: inherit; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.ask-input:focus-visible { outline: 2px solid var(--color-accent, #a8481f); outline-offset: 1px; }
.facts { margin-top: 14px; }
.facts summary { list-style: none; cursor: pointer; }
.facts summary::-webkit-details-marker { display: none; }
.facts-list { margin: 10px 0 0; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; }
.facts-list dt { font-weight: 650; margin-top: 8px; }
.facts-list dd { margin: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.facts-list small { color: var(--color-muted, #625c54); }
/* What came of an answer: one line under it. Status is in the words; the colour only supports it. */
.fact-followup { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: var(--color-muted, #625c54); }
.fact-followup.is-forslag, .fact-followup.is-fraga { color: inherit; font-weight: 600; }
.fact-followup.is-unsent { color: var(--color-stop); }
.facts-follow { display: grid; gap: 8px; justify-items: start; padding: 10px 12px; margin: 4px 0 6px; border-radius: 10px; background: var(--color-surface-2); }
.facts-follow .improve-note { margin: 0; }

/* Be om: samtalet med guiden */
.thread { display: grid; gap: 8px; }
.msg { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; font-size: 14px; line-height: 1.5; max-width: 92%; }
.msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-who { font-size: 11px; font-weight: 650; letter-spacing: 0.02em; color: var(--color-muted, #625c54); }
.msg.from-du { justify-self: end; background: var(--color-accent-soft, #f7e7dd); }
.msg.from-guiden { justify-self: start; background: var(--color-info-soft, #e1ecf2); }
.request.is-vantar { border-color: var(--color-wait, #7a5200); }
.pill.mine { margin-left: 6px; }
.pill.mine::before { display: none; }

/* Inställningar */
.settings { max-width: 920px; margin: 0 auto; padding: 0 var(--gap) 120px; display: grid; gap: 18px; }
.settings > .view-head { margin-bottom: 8px; }
.settings-title { margin: 0; font: 600 clamp(30px, 3.6vw, 42px)/1.04 var(--font-display); letter-spacing: -0.05em; }
.settings-title em { font-style: normal; color: var(--color-accent); }
.settings-intro { margin: 0; color: var(--color-muted, #625c54); line-height: 1.5; }
.settings-nav { display: flex; flex-wrap: wrap; gap: 4px; position: sticky; top: 68px; z-index: 2; padding: 8px 0; background: var(--color-bg); }
.settings-nav a { text-decoration: none; }
.card-like { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 22px 24px; scroll-margin-top: 84px; }
.settings-section h2 { margin: 0 0 4px; font: 600 20px/1.3 var(--font-ui); letter-spacing: -0.03em; }
.settings-section-intro { margin: 0 0 12px; color: var(--color-muted, #625c54); font-size: 14px; line-height: 1.5; }
.settings-rows { display: grid; grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 14px; }
.settings-rows dt { font-weight: 650; padding-top: 2px; }
.settings-rows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; overflow-wrap: anywhere; }
.settings-rows dd small { flex-basis: 100%; color: var(--color-muted, #625c54); line-height: 1.4; }
.settings-rows dd a { color: var(--color-info, #1f4f6b); font-weight: 600; }
.facts-edit dd { display: grid; }
.pill.tone-ok { color: var(--color-ok, #2d6a3a); background: var(--color-ok-soft, #e3efe4); }
.timer.is-paused { opacity: 0.75; }
.timer-edit { display: grid; gap: 8px; }
.timer-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.timer-fields select, .user-add input, .user-add select, .user-list select { min-height: 38px; padding: 0 10px; border: 1px solid var(--color-line, #e2dcd2); border-radius: 8px; background: var(--color-bg, #f3f0ea); color: inherit; font: inherit; font-size: 14px; }
.user-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.user-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--color-line, #e2dcd2); border-radius: 10px; }
.user-list li > div:first-child { display: grid; min-width: 0; overflow-wrap: anywhere; }
.user-list small { color: var(--color-muted, #625c54); }
.user-add { display: flex; flex-wrap: wrap; gap: 6px; }
.user-add input[type="email"] { flex: 1 1 200px; }
.user-add input[type="text"] { flex: 1 1 140px; }
@media (max-width: 720px) { .settings-rows { grid-template-columns: minmax(0, 1fr); } .settings-rows dt { padding-top: 8px; } }
a.button { text-decoration: none; color: var(--color-ink, #1c1a17); }
a.button.primary { color: var(--color-surface, #fff); }
.settings-sub { margin: 18px 0 2px; font: 650 15px/1.3 var(--font-ui); }
.customer-profile details { margin-top: 12px; overflow-wrap: anywhere; }
.customer-profile summary { cursor: pointer; }
.module.is-av { border-style: dashed; }
.module-settings { display: grid; gap: 8px; }
.module-settings summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.module-setting { display: grid; gap: 4px; font-size: 14px; }
.module-setting input[type="text"], .module-setting select { min-height: 38px; padding: 0 10px; border: 1px solid var(--color-line, #e2dcd2); border-radius: 8px; background: var(--color-bg, #f3f0ea); color: inherit; font: inherit; }
label.module-setting:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }

/* Texter: direct changes on overlay sites */
.texts { display: grid; gap: 14px; align-content: start; }
.texts-tabs { margin: 0; justify-content: flex-start; max-width: none; }
.texts-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.texts-tools input[type="search"] { flex: 1 1 240px; min-height: 40px; padding: 0 12px; border: 1px solid var(--color-line, #e2dcd2); border-radius: 10px; background: var(--color-surface, #fff); color: inherit; font: inherit; }
.texts-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 860px; }
.text-field.is-changed { border-color: var(--color-wait, #7a5200); }
.text-field textarea[readonly] { opacity: 0.8; }
/* Two ways to edit, as a quiet switch. */
.texts-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--color-surface-2); justify-self: start; }
.texts-modes .page-tab { border: 0; }
.texts-modes .page-tab[aria-current="page"] { background: var(--color-surface); box-shadow: 0 1px 3px rgba(18, 38, 45, 0.1); }
.page-view { position: relative; display: grid; gap: 10px; }
.texts-frame { width: 100%; height: min(78vh, 900px); border: 1px solid var(--color-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
[hidden] { display: none !important; }
.site-frame { display: block; width: 100%; height: min(76vh, 900px); border: 0; background: #fff; }
.page-editor { position: sticky; bottom: 12px; z-index: 3; margin-top: -140px; justify-self: center; width: min(640px, calc(100% - 24px)); display: grid; gap: 8px; padding: 14px 16px; background: var(--color-surface, #fff); border: 1px solid var(--color-accent, #a8481f); border-radius: var(--radius, 12px); box-shadow: var(--shadow); }
/* Under Studions åtgärdsfält, som ligger fast längst ner när det finns ändringar. */
.site-editor { bottom: 92px; margin: 12px auto 0; }
.site-editor .image-field { margin: 0; }
.canvas > .texts-modes { margin: 0 0 12px; }
.site-editor .image-preview, .site-editor .image-empty { display: none; }

/* The Studio's views: Redigera, Förbättringar, Inställningar. */
/* The site's own navigation: a floating pill, the current view filled. */
.views { display: flex; gap: 4px; margin-left: auto; padding: 5px; border-radius: 16px; background: rgba(247, 249, 249, 0.94); border: 1px solid rgba(23, 33, 38, 0.1); box-shadow: 0 8px 30px rgba(18, 38, 45, 0.07); }
.view-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 12px; font-size: 13.5px; font-weight: 500; color: var(--color-ink); text-decoration: none; transition: background .15s var(--ease); }
.view-tab:hover { background: var(--color-surface-2); }
.view-tab[aria-current="page"] { color: #ffffff; background: var(--color-deep); }
/* Inside a project the menu is the project's (project-nav.js): back to all projects, the name, its modes. */
.project-nav .project-nav-back { color: var(--color-muted, #5b6b70); }
.project-nav-name { align-self: center; max-width: 220px; padding: 0 10px 0 4px; overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid rgba(23, 33, 38, 0.12); margin-right: 4px; }
.view-tab .count { min-width: 20px; padding: 3px 7px; border-radius: 20px; font: 500 11px/1 var(--font-mono); text-align: center; color: var(--color-deep); background: #a5e3ee; }
.board { max-width: 1400px; margin: 0 auto; padding: 0 var(--gap) 140px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.board > .view-head { grid-column: 1 / -1; }
.board > section { display: grid; gap: 12px; min-width: 0; }
.board .improve .improve-list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1080px) { .board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .views { order: 3; width: 100%; margin: 6px 0 0; overflow-x: auto; }
}

/* Förbättringar as a plan: the situation, the steps in order, what to keep and what not to do. */
.reviews { display: grid; gap: 12px; }
.review-card { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius, 12px); background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e2dcd2); }
.review-card p { margin: 0; }
.review-missing summary, .review-notes-block summary { cursor: pointer; font-weight: 600; }
.review-missing ul, .review-list { margin: 8px 0; padding-left: 18px; display: grid; gap: 6px; }
.review-notes { display: grid; gap: 10px; margin-top: 8px; }
.review-notes-block { padding: 12px 16px; border-radius: var(--radius, 12px); border: 1px solid var(--color-line, #e2dcd2); }
.plan-heading { margin: 8px 0 0; font-size: 15px; }
.step-number { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--color-surface, #fff); background: var(--color-ink, #1c1a17); }
.improve-card.is-blocked { opacity: 0.75; }
.improve-waits { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-accent, #a8481f); }

/* Mätning: the steps to connect Google. */
.google-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.copyable { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copyable code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; padding: 2px 6px; border-radius: 6px; background: var(--color-bg, #f3f0ea); overflow-wrap: anywhere; }

/* Minimal cards: three lines of why, the rest on a click; the steps folded into one line. */
.improve-why.clamp, .improve-suggestion.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.improve-suggestion { color: var(--color-ink); }
.steps-fold > summary { cursor: pointer; font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.steps-fold[open] > summary { margin-bottom: 8px; }
.improve-card .improve-headline { font-size: 18px; letter-spacing: -0.02em; }
.review-card { background: var(--color-surface-2); border: 0; }
.board .improve #improve-intro { display: none; }
.board .view-head #improve-intro { display: block; margin: 12px 0 0; font-size: 15px; max-width: 60ch; }
.view-head .eyebrow { margin: 0; font-size: 11px; line-height: 1.3; color: var(--color-muted); }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; }
  .topbar .site-name { display: none; }
  .topbar .user { margin-left: auto; }
  .views { order: 3; width: 100%; margin: 0; justify-content: space-between; overflow-x: auto; }
  .workspace, .board, .settings { padding-left: 16px; padding-right: 16px; }
}
/* Inside a card, a list is lines, not more cards. */
.side .change { border: 0; border-top: 1px solid var(--color-line); border-radius: 0; background: transparent; padding: 14px 0; }
.side .change:first-child { border-top: 0; padding-top: 4px; }
.side .change-list { gap: 0; }

/* ---- help: words with their meaning one click away, and the welcome tour ---- */
.term { cursor: help; text-decoration: underline dotted rgba(14, 116, 144, 0.55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; border-radius: 3px; }
.term:hover, .term[aria-expanded="true"] { color: var(--color-accent); }
.term:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.term-pop {
  position: absolute; z-index: 40; display: grid; gap: 4px; width: min(300px, calc(100vw - 24px));
  padding: 12px 14px; border-radius: var(--radius-small); background: var(--color-deep); color: #e6f4f7;
  font: 400 13.5px/1.5 var(--font-ui); box-shadow: 0 14px 40px rgba(18, 38, 45, 0.22); animation: rise 150ms var(--ease) both;
}
.term-pop strong { color: #ffffff; font-weight: 600; }
.help-button { min-height: 34px; padding: 0 12px; font-size: 13px; }

.tour-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(23, 33, 38, 0.12); animation: rise 200ms var(--ease) both; }
.tour {
  position: fixed; z-index: 31; top: 96px; right: max(24px, calc((100vw - 1400px) / 2 + 24px)); width: min(400px, calc(100vw - 32px));
  display: grid; gap: 12px; padding: 22px 24px; border-radius: var(--radius); background: var(--color-surface);
  border: 1px solid var(--color-line); box-shadow: 0 24px 60px rgba(18, 38, 45, 0.18); animation: rise 220ms var(--ease) both;
}
.tour .eyebrow { margin: 0; }
.tour h2 { margin: 0; font: 600 24px/1.15 var(--font-display); letter-spacing: -0.04em; }
.tour-text { margin: 0; color: var(--color-muted); line-height: 1.6; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots span { width: 18px; height: 4px; border-radius: 4px; background: var(--color-line); transition: background .2s var(--ease); }
.tour-dots span.on { background: var(--color-accent); }
.tour-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* The tab the tour is about stands out above the dimmed page. */
.view-tab.tour-focus { position: relative; z-index: 32; outline: 2px solid var(--color-accent); outline-offset: 3px; }
.views:has(.tour-focus) { position: relative; z-index: 32; }
@media (max-width: 720px) { .tour { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } }
body:has(.tour) .topbar { z-index: 32; }

/* ---- the edit toolbar: the page in a dropdown, how you edit, and how you look at it ---- */
.edit-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.edit-toolbar .texts-modes { margin: 0; }
/* Five ways to edit do not fit one row on a phone: they wrap instead of widening the page. */
.texts-modes { flex-wrap: wrap; max-width: 100%; }
.page-pick { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.page-pick select {
  min-height: 40px; max-width: min(340px, 70vw); padding: 0 36px 0 14px; border: 1px solid var(--color-line); border-radius: var(--radius-small);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2350616a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none; font: 500 14px/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--color-ink); cursor: pointer;
}
.page-pick select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.preview-slot { margin-left: auto; }
.preview-controls { display: flex; align-items: center; gap: 8px; }
.texts-modes .page-tab[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 3px rgba(18, 38, 45, 0.1); }

/* Mobil: the site at a phone's width, centred on a quiet ground. */
.browser.is-mobile .site-frame, .page-view.is-mobile .texts-frame { width: 390px; max-width: 100%; margin: 0 auto; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }
.browser.is-mobile, .page-view.is-mobile { background: var(--color-surface-2); }
.page-view.is-mobile .texts-frame { border-radius: 0; box-shadow: none; }

/* Hela sidan: the frame fills the window; the editor and the way back stay on top. */
.browser.is-full, .page-view.is-full { position: fixed; inset: 12px; z-index: 45; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--color-surface); box-shadow: 0 30px 80px rgba(18, 38, 45, 0.25); }
.browser.is-full .site-frame { flex: 1; height: auto; }
.page-view.is-full .texts-frame { flex: 1; height: auto; border: 0; box-shadow: none; }
.page-view.is-full.is-mobile, .browser.is-full.is-mobile { background: var(--color-surface-2); }
body.has-full { overflow: hidden; }
body.has-full .site-editor { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 46; margin: 0; }
body.has-full .actionbar { z-index: 47; }
.full-close { position: fixed; top: 22px; right: 26px; z-index: 48; box-shadow: var(--shadow); }
@media (max-width: 720px) { .preview-slot { margin-left: 0; } .page-pick select { max-width: 100%; } }
.page-view.is-full .page-editor { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; }
/* The way back sits in its own strip at the top, never over the site's own buttons. */
.full-close { top: 18px; right: 22px; min-height: 32px; padding: 0 12px; font-size: 13px; }
.page-view.is-full { padding-top: 46px; }

/* ---- icons: what each part is, at a glance ---- */
.icon { flex: none; display: inline-block; vertical-align: -0.15em; }
[data-icon-done] { display: inline-flex; align-items: center; gap: 7px; }
.eyebrow[data-icon-done] .icon { color: var(--color-accent); }
.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.settings-section h2.with-icon { display: flex; gap: 10px; }
.section-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent); flex: none; }
.improve-headline.with-icon { display: flex; gap: 10px; }
.settings-rows dt.with-icon { display: flex; align-items: center; gap: 8px; }
.settings-rows dt .icon { color: var(--color-muted); }
.settings-nav .page-tab.with-icon .icon { color: var(--color-muted); }
.view-tab .icon { opacity: 0.85; }
.review-card strong.with-icon .icon { color: var(--color-accent); }

/* An image to change: the picture itself, then what you can do. */
.image-card { display: grid; gap: 10px; }
.image-thumb { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--radius-small); background: var(--color-surface-2); border: 1px solid var(--color-line); }
.page-editor .image-thumb { max-height: 160px; }

/* ---- Historik: save points and versions, newest first ---- */
.history-save { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.history-save input { flex: 1 1 160px; min-height: 40px; padding: 0 12px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-bg); font: inherit; color: inherit; }
.history-save input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.history-pending { display: grid; gap: 8px; }
.history-wait { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius-small); background: var(--color-wait-soft); }
.history-list { list-style: none; margin: 0; padding: 0; display: grid; }
.history-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--color-line); }
.history-item:first-child { border-top: 0; }
.history-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--color-surface-2); color: var(--color-muted); }
.history-item.is-sparpunkt .history-icon { background: var(--color-accent-soft); color: var(--color-accent); }
.history-body { display: grid; gap: 2px; min-width: 0; }
.history-body strong { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.history-body small { color: var(--color-muted); font-size: 12.5px; }

/* ---- Inställningar: a menu on the left, one part at a time on the right ---- */
.settings { max-width: 1180px; grid-template-columns: 250px minmax(0, 1fr); column-gap: 28px; align-items: start; }
.settings > .view-head { grid-column: 1 / -1; }
.settings-nav { position: sticky; top: 84px; z-index: 2; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 8px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.settings-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-small); color: var(--color-ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s var(--ease); }
.settings-link .section-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--color-surface-2); color: var(--color-muted); }
.settings-link:hover { background: var(--color-surface-2); }
.settings-link[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-deep); }
.settings-link[aria-current="page"] .section-icon { background: var(--color-surface); color: var(--color-accent); }
#settings-body { min-width: 0; }
@media (max-width: 860px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .settings-link { flex: none; }
}
@media (max-width: 480px) { .view-tab { padding: 8px 10px; gap: 6px; font-size: 13px; } .views { justify-content: flex-start; } }

/* ---- The public demo ("Prova Studio") ---------------------------------------------------------------------- */
.demo-strip {
  display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 7px 16px; background: var(--color-deep); color: #e8f1f3; font-size: 13px; text-align: center;
}
.demo-strip strong {
  font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .14);
}
.login-page .demo-strip { position: fixed; top: 0; left: 0; right: 0; }
.demo-people { display: grid; gap: 10px; }
.demo-person {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px 16px; text-align: left;
  border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-ink);
  font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.demo-person:hover, .demo-person:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.demo-person:disabled { opacity: .6; cursor: progress; }
.demo-name { font-weight: 600; font-size: 16px; }
.demo-role { color: var(--color-muted); font-size: 14px; }

/* ---- Paket och tillägg (Inställningar → Moduler) ------------------------------------------------------------ */
.package-bar {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px;
  border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface-2);
}
.package-bar p { margin: 0; color: var(--color-muted); }
.package-bar strong { color: var(--color-ink); }
.improve-card.module.is-addon { border-style: dashed; background: var(--color-surface); }
.module-remove { margin: 8px 0 0; }
.image-field.is-drop { outline: 2px dashed var(--color-accent); outline-offset: 4px; background: var(--color-accent-soft); }
.image-drop-hint { margin: 6px 0 0; font-size: 12px; color: var(--color-muted); }

/* ---- Ordna sidan ---------------------------------------------------------------------------------------------- */
.arrange { padding: 20px; background: var(--color-surface); }
.arrange-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.arrange-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface);
  transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.arrange-row.is-fixed { background: var(--color-surface-2); color: var(--color-muted); }
.arrange-row.is-copy { border-style: dashed; }
.arrange-row.is-dragging { opacity: .45; }
.arrange-row.is-over { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.arrange-grip { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--color-muted); cursor: grab; }
.arrange-row.is-fixed .arrange-grip { cursor: default; }
.arrange-grip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.arrange-what { display: flex; flex-direction: column; min-width: 0; }
.arrange-what small { color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrange-look { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted); }
.arrange-look select { font: inherit; color: var(--color-ink); padding: 6px 8px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); }
.arrange-tools { display: flex; gap: 4px; }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); color: var(--color-ink); cursor: pointer; }
.icon-button:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.icon-button:disabled { opacity: .35; cursor: default; }
.icon-button.danger:hover:not(:disabled) { border-color: var(--color-stop); color: var(--color-stop); }
.arrange-removed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; color: var(--color-muted); font-size: 13px; }
.arrange-removed p { margin: 0; }
.arrange-removed .chip { font: inherit; padding: 4px 10px; border: 1px solid var(--color-line); border-radius: 99px; background: var(--color-surface-2); cursor: pointer; }
.arrange-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.arrange-actions .improve-note { flex-basis: 100%; margin: 0; }
@media (max-width: 760px) {
  .arrange-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .arrange-look { grid-column: 2 / -1; }
}

/* ---- Sidor och meny ------------------------------------------------------------------------------------------- */
.structure { display: grid; gap: 28px; }
.structure-part { display: grid; gap: 10px; }
.structure-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.structure-head h2 { margin: 0; }
.structure-blocked { padding: 10px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface-2); }
.menu-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
.menu-row.is-child { margin-left: 36px; }
.menu-row.is-focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.menu-what { gap: 2px; }
.menu-label { font: inherit; font-weight: 600; color: var(--color-ink); padding: 4px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 6px; background: transparent; min-width: 0; }
.menu-label:hover { border-color: var(--color-line); }
.menu-label:focus { outline: none; border-color: var(--color-accent); background: var(--color-surface); }
.menu-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.menu-add select, .np-field select, .np-field input[type="text"] {
  font: inherit; color: var(--color-ink); padding: 8px 10px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface);
}
.menu-add .improve-note { margin: 0; }
.menu-clicked { display: grid; gap: 8px; padding: 12px 14px; border-left: 3px solid var(--color-accent); border-radius: var(--radius-small); background: var(--color-accent-soft); }
.menu-clicked p { margin: 0; font-size: 14px; }
.page-row { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.button.danger:hover:not(:disabled) { border-color: var(--color-stop); color: var(--color-stop); }
.np-field { display: grid; gap: 6px; max-width: 520px; }
.np-field label { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; }
.np-field small { color: var(--color-muted); font-size: 12.5px; }
.np-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
@media (max-width: 760px) {
  .menu-row.is-child { margin-left: 18px; }
  .page-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .page-row .arrange-tools { grid-column: 2 / -1; }
}

/* ---- Be om: bifogade bilder ------------------------------------------------------------------------------------ */
.ask-attach { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-attach:empty { display: none; }
.ask-thumb { position: relative; margin: 0; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-line); background: var(--color-surface-2); }
.ask-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ask-thumb-wait { display: grid; place-items: center; height: 100%; color: var(--color-muted); }
.ask-thumb-remove { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(23, 33, 38, .75); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.ask-attach-hint { margin: 6px 0 0; font-size: 12px; color: var(--color-muted); }
.ask-for-form.is-drop { outline: 2px dashed var(--color-accent); outline-offset: 6px; border-radius: var(--radius-small); }
#ask-for-attach { cursor: pointer; }
.msg-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-images img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-line); }

/* ---- Varumärke: one step at a time, with the site beside it as the preview ------------------------------------ */
.brand-panel { display: grid; gap: 18px; align-content: start; }
.brand-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.brand-step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-muted);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.brand-step:hover { color: var(--color-ink); background: var(--color-surface-2); }
.brand-step.is-current { color: var(--color-ink); border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); font-weight: 600; }
.brand-step-n { font: 500 11px/1 var(--font-mono); color: var(--color-muted); }
.brand-step-changed { font-size: 11px; font-weight: 600; color: var(--color-accent); }
.brand-part { display: grid; gap: 14px; }
.brand-part .eyebrow { margin: 0; }
.brand-part-title { margin: 0; font: 600 22px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.brand-part-title:focus { outline: none; }
.brand-part-title:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.brand-intro { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.brand-help { color: var(--color-muted); font-size: 12.5px; line-height: 1.45; }
.brand-nav, .brand-actions-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-nav { justify-content: space-between; padding-top: 4px; }
.brand-nav .button:only-child { margin-left: auto; }
.brand-foot { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--color-line); }

.brand-field { display: grid; gap: 6px; }
.brand-field label, .brand-field > span { font-size: 13.5px; font-weight: 500; color: var(--color-ink); }
.brand-field small { color: var(--color-muted); font-size: 12.5px; }
.brand-input { font: inherit; color: var(--color-ink); padding: 8px 10px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); min-width: 0; }
.brand-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.brand-input[aria-invalid="true"] { border-color: var(--color-stop); }

.brand-image { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); }
.brand-image.is-changed { border-color: var(--color-accent); background: var(--color-accent-soft); }
.brand-image-head { display: grid; gap: 2px; }
.brand-image-head small { color: var(--color-muted); font-size: 12.5px; }
.brand-image-show { display: grid; place-items: center; min-height: 88px; padding: 12px; border-radius: 8px; background: var(--color-surface-2); }
.brand-image-preview { display: block; max-width: 100%; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.brand-image-empty { margin: 0; color: var(--color-muted); font-size: 13.5px; text-align: center; }
.brand-image-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-image .improve-note { margin: 0; }
.brand-more { display: grid; gap: 10px; }
.brand-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--color-ink); padding: 6px 0; }
.brand-more > .improve-note { margin: 0 0 4px; }
.brand-more > .brand-image + .brand-image { margin-top: 10px; }

.brand-color { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-small); }
.brand-color.is-changed { border-color: var(--color-accent); }
.brand-color-head { display: grid; gap: 2px; }
.brand-color-head small { color: var(--color-muted); font-size: 12.5px; }
.brand-color-pick { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.brand-swatch { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); cursor: pointer; }
.brand-swatch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.brand-code-field { gap: 4px; }
.brand-code { width: calc(8ch + 24px);font-family: var(--font-mono); text-transform: lowercase; }
.brand-say { margin: 0; font-size: 13.5px; color: var(--color-ok); }
.brand-say:empty { display: none; }
.brand-say.is-hard { color: var(--color-stop); font-weight: 500; }

.brand-choices { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.brand-radio { margin: 4px 0 0; accent-color: var(--color-accent); }
.brand-font, .brand-corner {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-small);
  background: var(--color-surface); cursor: pointer;
}
.brand-font.is-only { flex-direction: column; gap: 6px; cursor: default; }
.brand-font:hover, .brand-corner:hover, .brand-font:focus-within, .brand-corner:focus-within { border-color: var(--color-accent); }
.brand-font.is-only:hover { border-color: var(--color-line); }
.brand-font.is-chosen, .brand-corner.is-chosen { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.brand-font-text { display: grid; gap: 4px; min-width: 0; }
.brand-font small { color: var(--color-muted); font-size: 12.5px; }
.brand-font-why { font-style: italic; }
.brand-font-sample { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--color-surface-2); color: var(--color-ink); }
.brand-font-heading { font-size: 20px; font-weight: 600; line-height: 1.2; }
.brand-font-body { font-size: 14px; line-height: 1.5; }
.brand-corners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand-corner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; font-size: 14px; font-weight: 500; }
.brand-corner .brand-radio { margin: 0; }
.brand-corner-shape { grid-column: 1 / -1; display: block; width: 72px; height: 44px; border: 2px solid var(--color-deep); background: var(--color-accent-soft); }
.brand-corner small { grid-column: 1 / -1; color: var(--color-muted); font-size: 12px; font-weight: 400; }

/* Wide screens: the panel beside the site. Narrower: one column, the panel first and the site under it. */
@media (min-width: 1200px) {
  .browser.is-brand { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
  .browser.is-brand > .browser-bar { grid-column: 1 / -1; }
  .browser.is-brand > .brand-panel { border-right: 1px solid var(--color-line); max-height: min(76vh, 900px); overflow-y: auto; }
}
@media (max-width: 1199px) {
  .browser.is-brand > .site-frame { border-top: 1px solid var(--color-line); height: min(70vh, 720px); }
}
@media (max-width: 720px) {
  .brand-panel { padding: 16px; }
  .brand-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-corners { grid-template-columns: minmax(0, 1fr); }
}
.profile-material { white-space: pre-wrap; margin: 4px 0 12px; }

/* Butik: betalsätt, läge och order i modulen Webshop */
.shop-panel { display: grid; gap: 10px; margin-top: 6px; }
.shop-payments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-payment { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--color-line, #e2dcd2); border-radius: 10px; }
.shop-payment-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shop-payment-reason { grid-column: 1; color: var(--color-ink-soft, #5c564d); }
.shop-switch { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; }
.shop-orders-scroll { overflow-x: auto; max-width: 100%; }
.shop-orders { border-collapse: collapse; width: 100%; font-size: 14px; }
.shop-orders th, .shop-orders td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--color-line, #e2dcd2); white-space: nowrap; font-weight: 400; }
.shop-orders thead th { font-weight: 650; }
.shop-orders tbody th { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .shop-payment { grid-template-columns: minmax(0, 1fr); }
  .shop-switch { grid-column: 1; grid-row: auto; width: 100%; }
}

/* Förfrågningar: siffror och källor i modulen Förfrågningar och offert */
.crm-figures dt { font-weight: 650; }
.crm-alert { color: var(--color-stop, #a12d27); font-weight: 650; }

/* One visible conversation for direct edits, requests and the guide's replies. */
.chat-fab { width: auto; min-width: 120px; padding: 0 18px; border-radius: 24px; font: inherit; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.chat-scroll .chat-log { overflow: visible; }
#chat-requests { display: grid; gap: 12px; padding: 0 18px 18px; }
#chat-context { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 13px; }
#chat-context[hidden] { display: none; }
#chat-context span { flex: 1; overflow-wrap: anywhere; max-height: 70px; overflow-y: auto; }
.chat-hint { font-size: 12px; color: var(--color-muted); margin: 10px 0 0; }
.chat-attach { border: 0; background: transparent; }
.chat-attach:focus-visible, .chat-minimize:focus-visible, .chat-fab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.chat-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.user { align-self: flex-end; background: var(--color-accent-soft); }
.chat-msg.ai { background: var(--color-surface-2); }
.chat-panel { height: min(620px, calc(100dvh - 200px)); max-height: calc(100dvh - 200px); }
@media (max-width: 720px) {
  .chat-panel { width: calc(100vw - 24px); right: 12px; bottom: 12px; height: min(520px, 65dvh); max-height: calc(100dvh - 24px); }
  .chat-fab { right: 12px; bottom: 12px; }
  .chat-input-area { padding: 12px; }
  .chat-input { min-width: 0; }
}

/* Overlay drafts: the page remains central, controls follow the selected element. */
.page-view:has(.page-editor:not([hidden])) { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.page-view .page-editor { position: sticky; top: 16px; bottom: auto; margin: 0; width: 100%; box-sizing: border-box; }
.logo-control { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; }
.logo-control input, .logo-control select { grid-column: 1 / -1; width: 100%; }
.draft-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.draft-review { flex-basis: 100%; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.draft-review article { border-bottom: 1px solid var(--color-line); padding: 10px 0; overflow-wrap: anywhere; }
@media (max-width: 850px) { .page-view:has(.page-editor:not([hidden])) { grid-template-columns: 1fr; } .page-view .page-editor { position: static; } }

/* One panel owns both selected-element controls and the conversation. */
#chat-inspector:empty { display: none; }
#chat-inspector .page-editor { position: static; margin: 0; width: 100%; border: 0; border-bottom: 1px solid var(--color-line); border-radius: 0; box-shadow: none; padding: 18px; }
#chat-inspector .text-edit-fallback { margin-top: 10px; }
#chat-inspector .text-edit-fallback summary { cursor: pointer; font-size: 13px; color: var(--color-muted); }
#chat-inspector .text-edit-fallback textarea { margin-top: 10px; }
body.overlay-editor .page-view { grid-template-columns: 1fr; }
/* Utrymme för chatten bara när den är öppen: den öppnas på begäran. */
body.overlay-editor:has(#studio-chat.open) .workspace { margin-right: 380px; }
body.overlay-editor .chat-panel { width: 360px; top: 88px; bottom: 20px; right: 16px; height: auto; max-height: calc(100dvh - 108px); border-radius: 18px; }
body.overlay-editor .chat-fab { z-index: 40; }
@media (max-width: 950px) {
  body.overlay-editor:has(#studio-chat.open) .workspace { margin-right: 0; }
  body.overlay-editor .chat-panel { width: min(360px, calc(100vw - 24px)); top: auto; bottom: 12px; right: 12px; height: min(65dvh, 640px); max-height: calc(100dvh - 24px); }
}
/* The welcome guide must remain usable above the shared inspector. */
body.overlay-editor:has(.tour) .chat-panel,
body.overlay-editor:has(.tour) .chat-fab { visibility: hidden; }

/* Overlay projects expose only controls their content adapter can actually publish. */
.overlay-brand-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 0 18px; align-items: start; }
.overlay-brand-view > .view-head, .overlay-brand-view > .edit-toolbar, .overlay-brand-view > .texts-tools { grid-column: 1 / -1; }
.overlay-brand-view > .page-view { grid-column: 1; min-width: 0; }
.overlay-brand-view > .texts-fields { grid-column: 2; min-width: 0; display: grid; gap: 14px; max-height: calc(100vh - 240px); overflow-y: auto; padding-right: 3px; }
.overlay-brand-section { padding: 20px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-surface); display: grid; gap: 18px; }
.overlay-brand-section h2 { margin: 0; font-size: 16px; }
.brand-control select { min-height: 40px; padding: 8px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); color: var(--color-ink); }
.brand-control input[type="color"] { min-height: 38px; border: 1px solid var(--color-line); border-radius: 8px; padding: 3px; background: var(--color-surface); cursor: pointer; }
@media (max-width: 850px) {
  .overlay-brand-view { grid-template-columns: minmax(0, 1fr); }
  .overlay-brand-view > .page-view, .overlay-brand-view > .texts-fields { grid-column: 1; }
  .overlay-brand-view > .texts-fields { margin-top: 16px; max-height: none; overflow: visible; padding-right: 0; }
}
.overlay-navigation-link { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--color-line); }
.overlay-navigation-link h3 { margin: 0; font-size: 15px; }
.navigation-visible { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.navigation-visible input { width: 18px; height: 18px; }
.overlay-navigation-link input[type="number"] { max-width: 120px; min-height: 38px; padding: 8px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); color: var(--color-ink); }
/* Give design and navigation the canvas width; recent edits remain in the text/page views. */
body.overlay-editor:has(.overlay-brand-view) .workspace { grid-template-columns: minmax(0, 1fr); }
body.overlay-editor:has(.overlay-brand-view) .workspace > .side { display: none; }
@media (max-width: 1080px) {
  .topbar { flex-wrap: wrap; }
  .topbar .user { flex-wrap: wrap; min-width: 0; max-width: 100%; }
}

.improve-provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-muted); font-size: 13px; }
.improve-provenance p { margin: 0; }
.improve-completion { font-size: 13px; color: var(--color-muted); margin: 0; }
.improve-value { font-size: 14px; line-height: 1.6; color: var(--color-muted); border-left: 3px solid var(--color-line); padding-left: 12px; }

.improve-next { padding: 12px 14px; border-radius: 8px; background: var(--color-bg); font-size: 14px; line-height: 1.5; }
.improve-next strong { display: block; margin-bottom: 3px; }
.improve-next p { margin: 0; color: var(--color-muted); }
.improve-result { font-size: 14px; min-width: 0; }
.improve-result summary { cursor: pointer; padding: 4px 0; }
.improve-result p { margin-top: 8px; white-space: pre-wrap; }
@media (max-width: 600px) {
  .improve-card { padding: 16px; }
  .improve-actions .button { min-height: 44px; }
  .improve-next { padding: 10px 12px; }
  .improve-meta { align-items: flex-start; }
  .improve-meta > span:first-child { display: flex; flex-wrap: wrap; gap: 5px; }
}

/* Recovery coverage remains readable in both the imported-site and Git histories. */
.recovery-panel { padding: 1rem; margin: 1rem 0; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-surface); }
.recovery-panel .improve-actions { flex-wrap: wrap; }
.recovery-panel .button { min-height: 44px; white-space: normal; }

/* ---- Förbättringar: one clear next step, then rows (the reference "Kundens nästa steg") ---------------- */
.improve-modes { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 18px; border-bottom: 1px solid var(--color-line); }
.improve-modes .mode { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 0; font: 500 14px/1.2 var(--font-display); color: var(--color-muted); cursor: pointer; }
.improve-modes .mode.is-active { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.improve-modes .mode:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.mode-count { color: var(--color-muted); }

.improve-hero { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); display: grid; gap: 12px; box-shadow: var(--shadow); }
.improve-hero .eyebrow { margin: 0; }
.hero-headline { margin: 0; font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); text-wrap: balance; }
.hero-change { margin: 0; color: var(--color-ink); max-width: 62ch; }
.hero-doer { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-muted); }
.hero-doer strong { color: var(--color-ink); }
.improve-hero .improve-actions { margin: 4px 0 0; }

/* Assistants: a quiet three-dot mark with a readable label beside it; people: initials. Never animated: waiting is not working. */
.doer-mark { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-2); color: var(--color-deep); font: 600 11px/1 var(--font-mono); letter-spacing: 0.04em; }

.rows-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 4px; }
.rows-head h3 { margin: 0; font: 600 15px/1.3 var(--font-display); color: var(--color-ink); }
.rows-head .improve-note { margin: 0; }
.improve-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--color-line); }
.improve-row:first-of-type { border-top: 1px solid var(--color-line); }
.row-main { min-width: 0; display: grid; gap: 4px; }
.row-headline { margin: 0; font: 600 15px/1.35 var(--font-display); color: var(--color-ink); overflow-wrap: anywhere; }
.row-status { margin: 0; font-size: 13px; color: var(--color-muted); }
.improve-row.is-granskar .row-status > span:first-child, .improve-row.is-valjer .row-status > span:first-child { color: var(--color-ink); }
.improve-row.needs-help .row-status > span:first-child { color: var(--color-wait); font-weight: 600; }
.row-action { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.row-details > summary { cursor: pointer; font-size: 13px; color: var(--color-accent); list-style: none; padding: 2px 0; }
.row-details > summary::-webkit-details-marker { display: none; }
.row-details > summary::before { content: "▸ "; }
.row-details[open] > summary::before { content: "▾ "; }
.row-details[open] { display: grid; gap: 10px; padding-bottom: 4px; }
.inline-ask { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--radius-small); background: var(--color-wait-soft); }
.inline-ask p { margin: 0; }
.inline-ask .button { justify-self: start; }
.review-fold { margin-top: 24px; }
.review-fold > summary { cursor: pointer; font: 500 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); }
.review-fold[open] { display: grid; gap: 12px; }
.improve-foot { margin-top: 24px; }

@media (max-width: 640px) {
  .improve-row { grid-template-columns: auto minmax(0, 1fr); }
  .row-action { grid-column: 2; justify-content: flex-start; }
  .rows-head { flex-wrap: wrap; }
}

/* ---- Inställningar: Ditt abonnemang -------------------------------------------------------------------- */
.subscription { display: grid; gap: 10px; }
.subscription-name { margin: 0; font: 600 clamp(20px, 2.4vw, 24px)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.subscription-meter p { margin: 0 0 6px; }
.subscription-meter .meter { height: 8px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; max-width: 360px; }
.subscription-meter .meter > span { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }
.subscription-runs { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.subscription-promise { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--radius-small); background: var(--color-ok-soft); }
.subscription.is-none .subscription-name { color: var(--color-muted); }
.subscription-included { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--color-ink); font-size: 14px; }
.subscription-included span { display: inline-flex; align-items: center; gap: 5px; }
.subscription-included .icon { color: var(--color-ok, #1f7a4d); }
.subscription-done .settings-sub { margin-top: 4px; }
.subscription-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.subscription-stat { display: grid; }
.subscription-stat strong { font: 600 26px/1.1 var(--font-display); color: var(--color-ink); }
.subscription-stat span { font-size: 13px; color: var(--color-muted); }
.subscription-headlines { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.subscription-ai { padding: 12px 14px; border-radius: var(--radius-small); border: 1px solid var(--color-line); background: var(--color-surface); display: grid; gap: 6px; }
.subscription-ai.is-uppgradera { border-color: var(--color-accent); }
.subscription-ai-number { margin: 0; }
.subscription-ai-number strong { font: 600 22px/1.1 var(--font-display); color: var(--color-ink); margin-right: 4px; }
.subscription-more summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.subscription-more[open] summary { margin-bottom: 6px; }
.goals { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius-small); border: 1px solid var(--color-line); background: var(--color-surface); margin-bottom: 14px; }
.goals .settings-sub { margin: 0; }
.goals-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; font: 600 16px/1.35 var(--font-display); color: var(--color-ink); }
.goals-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.goals-chips .chip { font: inherit; font-size: 14px; padding: 4px 10px; border: 1px solid var(--color-line); border-radius: 99px; background: var(--color-surface-2); cursor: pointer; }
.goals-inputs { display: grid; gap: 6px; }
.goals-inputs input { width: 100%; box-sizing: border-box; }
.report-goals { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 4px; }
.subscription-billing .is-error { color: var(--color-danger, #b42318); }
.fact-outcome { margin: 2px 0 0; font-size: 13px; color: var(--color-muted); }
.fact-outcome.is-forslag, .fact-outcome.is-fraga { color: var(--color-ink); font-weight: 600; }
.fact-outcome.is-unsent { color: var(--color-stop); }

/* ---- Nya editorn (?ny=1): sajten i mitten, sidor och sektioner till vänster, kontrollerna till höger ---- */
.ny-try { font-size: 13px; }
body.layout-ny .workspace { grid-template-columns: 220px minmax(0, 1fr) 340px; gap: 0; max-width: none; padding: 0; min-height: calc(100vh - 68px); }
body.layout-ny .canvas { padding: 0 20px 72px; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); background: var(--color-surface-2, #f1f4f5); }
body.layout-ny .view-head, body.layout-ny .browser-bar, body.layout-ny #page-tabs-label, body.layout-ny #actionbar { display: none; }
body.layout-ny .edit-toolbar { margin: 0 0 12px; }
body.layout-ny .site-frame { height: calc(100vh - 68px - 52px - 64px - 56px); min-height: 420px; }
body.layout-ny .browser { position: relative; }
.ny-rail { position: sticky; top: 68px; align-self: start; max-height: calc(100vh - 68px); overflow: auto; padding: 16px 12px 80px; }
.ny-head { margin: 14px 8px 6px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.ny-head:first-child { margin-top: 0; }
.ny-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ny-item { text-decoration: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--color-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ny-item:hover { background: var(--color-surface-2, #f1f4f5); } }
.ny-item.is-on { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); font-weight: 600; }
.ny-bar { position: sticky; top: 68px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 0; background: var(--color-surface-2, #f1f4f5); }
.ny-bar .button { display: inline-flex; align-items: center; gap: 6px; }
.ny-redo svg { transform: scaleX(-1); }
.ny-saved { margin-left: 8px; font-size: 13px; color: var(--color-muted); }
.ny-spacer { flex: 1; }
.ny-switch { font-size: 13px; margin-right: 6px; }
.ny-selbar { position: absolute; z-index: 3; display: flex; gap: 2px; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(18, 38, 45, 0.16); }
.ny-selbar[hidden] { display: none; }
.ny-tool { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--color-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ny-tool:focus-visible { background: var(--color-surface-2, #f1f4f5); }
@media (hover: hover) and (pointer: fine) { .ny-tool:hover { background: var(--color-surface-2, #f1f4f5); } }
body.layout-ny .side { padding: 16px 16px 80px; position: sticky; top: 68px; align-self: start; max-height: calc(100vh - 68px); overflow: auto; }
body.layout-ny .side > section, body.layout-ny .side > details { display: none; }
body.layout-ny .side > .ny-hint, body.layout-ny .side > #seo { display: block; }
body.layout-ny .side > .ny-hint[hidden] { display: none; }
body.layout-ny.ny-history .side > section, body.layout-ny.ny-history .side > details { display: block; }
body.layout-ny #edit-modes, body.layout-ny .ny-try { display: none; }
.ny-hint h2 { margin: 0 0 6px; font-size: 16px; }
.ny-hint p { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.5; }
body.layout-ny .side #history[hidden] { display: none; }
body.layout-ny .side > .page-editor { position: static; margin: 0; width: auto; justify-self: stretch; border-color: var(--color-line); box-shadow: none; }
body.layout-ny .side > .page-editor[hidden] { display: none; }
.ny-checks { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--color-line); }
.ny-checks h3 { margin: 0 0 8px; font-size: 15px; }
.ny-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ny-check { display: grid; gap: 2px; padding: 8px 10px 8px 12px; border-left: 3px solid var(--color-line); border-radius: 6px; background: var(--color-surface-2, #f1f4f5); font-size: 13px; }
.ny-check strong { font-size: 13.5px; }
.ny-check.is-warn { border-left-color: #c58a12; }
.ny-check.is-bad { border-left-color: #b42318; }
.ny-check.is-info { border-left-color: var(--color-accent); }
.ny-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 10px var(--gap); background: var(--color-surface); border-top: 1px solid var(--color-line); font-size: 13px; color: var(--color-muted); }
body:not(.layout-ny) .ny-foot { display: none; }
@media (max-width: 1100px) {
  body.layout-ny .workspace { grid-template-columns: 180px minmax(0, 1fr) 300px; }
}
@media (max-width: 760px) {
  body.layout-ny .workspace { grid-template-columns: minmax(0, 1fr); }
  body.layout-ny .side { position: static; max-height: none; }
  body.layout-ny .ny-switch, body.layout-ny .ny-saved { display: none; }
}
.pill.awaiting-review { color: #7a4a00; background: #fbefd5; }
.ny-check.is-ok { border-left-color: #2f7d4a; }
.review-note { margin: 8px 0 0; font-size: 13.5px; }
.review-note.is-ok { color: #2f5d3e; }
.review-note.is-flag { padding: 10px 12px; border-left: 3px solid #c58a12; border-radius: 6px; background: #fdf6e7; }
.review-note.is-flag ul { margin: 6px 0 0; padding-left: 18px; }

/* Tryck: små knappar ger efter (0.97, 160 ms ease-out). Ingen grå blixt vid tryck på mobilen. */
body.layout-ny { -webkit-tap-highlight-color: transparent; }
body.layout-ny button, body.layout-ny a, .ny-tab { touch-action: manipulation; }
.ny-tool, .ny-item, .ny-tab, body.layout-ny .ny-bar .button { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; }
.ny-tool:active, .ny-item:active, .ny-tab:active, body.layout-ny .ny-bar .button:active { transform: scale(0.97); }

/* Mobilens meny och blad (finns i dokumentet men syns bara på smal skärm). */
.ny-tabs, .ny-backdrop, .ny-more, .ny-handle, .ny-mbar { display: none; }
@media (max-width: 760px) {
  body.layout-ny .ny-foot, body.layout-ny .chat-fab, body.layout-ny .ny-switch, body.layout-ny #preview-slot { display: none !important; }
  body.layout-ny .topbar { min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
  body.layout-ny .canvas { padding: 0 10px calc(88px + env(safe-area-inset-bottom, 0px)); border: 0; }
  body.layout-ny .site-frame { height: calc(100dvh - 68px - 56px - 72px - env(safe-area-inset-bottom, 0px)); min-height: 360px; }
  body.layout-ny input, body.layout-ny textarea, body.layout-ny select { font-size: 16px; }
  .ny-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 rgba(18, 38, 45, 0.08), 0 -8px 24px rgba(18, 38, 45, 0.06); }
  .ny-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; padding: 6px 0; border: 0; border-radius: 12px;
    background: transparent; color: var(--color-muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
  .ny-tab[aria-pressed="true"] { color: var(--color-accent); }
  .ny-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
  .ny-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(18, 38, 45, 0.28); opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
  body.layout-ny[data-sheet]:not([data-sheet="element"]) .ny-backdrop { opacity: 1; pointer-events: auto; }
  /* Bladen: glider upp med lådans kurva (Emil Kowalski, cubic-bezier(0.32, 0.72, 0, 1)), stängs fortare än de öppnas. */
  body.layout-ny .ny-rail, body.layout-ny .side, .ny-more {
    display: block; position: fixed; left: 0; right: 0; top: auto; z-index: 30; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    max-height: 72dvh; overflow: auto; overscroll-behavior: contain; padding: 0 16px 20px; margin: 0;
    background: var(--color-surface); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(18, 38, 45, 0.16);
    transform: translateY(calc(100% + 80px)); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1); }
  body.layout-ny[data-sheet="sidor"] .ny-rail, body.layout-ny[data-sheet="element"] .side, body.layout-ny[data-sheet="andringar"] .side, body.layout-ny[data-sheet="mer"] .ny-more {
    transform: translateY(0); transition-duration: 320ms; }
  body.layout-ny[data-sheet="element"] .side { max-height: 44dvh; }
  body.layout-ny[data-sheet="google"] .side { transform: translateY(0); transition-duration: 320ms; }
  body.layout-ny[data-sheet="google"] .side > :not(#seo):not(.ny-handle) { display: none !important; }
  /* Samma högerspalt är två blad på mobilen: det markerade, eller ändringarna. */
  body.layout-ny[data-sheet="element"] .side > :not(.page-editor):not(.ny-handle) { display: none !important; }
  body.layout-ny[data-sheet="andringar"] .side > .page-editor, body.layout-ny[data-sheet="andringar"] .side > .ny-hint, body.layout-ny[data-sheet="andringar"] .side > #seo { display: none !important; }
  body.layout-ny .side > .page-editor { border: 0; padding: 4px 0; }
  .ny-handle { display: block; position: sticky; top: 0; z-index: 1; height: 26px; margin: 0 -16px 4px; background: var(--color-surface); touch-action: none; cursor: grab; }
  .ny-handle::before { content: ""; position: absolute; left: 50%; top: 10px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgba(18, 38, 45, 0.18); }
  .ny-more .ny-item { font-size: 16px; padding: 12px 10px; }
  body.layout-ny .ny-rail .ny-item { font-size: 16px; padding: 11px 10px; }
  .ny-selbar { display: none !important; }
  /* Fråga AI om sidan finns under Mer; i raden överst får ångra, kvaliteten och Publicera plats på en rad. */
  body.layout-ny .ny-bar .ny-ai { display: none; }
  /* Det markerade: en rad ovanför menyn längst ner, med stora mål för tummen. */
  .ny-mbar { display: flex; gap: 6px; position: fixed; left: 8px; right: 8px; z-index: 35; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    padding: 6px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; box-shadow: 0 10px 30px rgba(18, 38, 45, 0.18);
    animation: ny-mbar 200ms cubic-bezier(0.32, 0.72, 0, 1); }
  .ny-mbar[hidden] { display: none; }
  .ny-mtool { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px;
    border: 0; border-radius: 12px; background: transparent; color: var(--color-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .ny-mtool.is-primary { flex: 1.6 1 0; flex-direction: row; gap: 8px; font-size: 15px; background: var(--color-accent); color: #fff; }
  .ny-mtool:active { transform: scale(0.97); }
  @keyframes ny-mbar { from { transform: translateY(12px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  body.layout-ny .ny-rail, body.layout-ny .side, .ny-more { transition: none !important; }
  .ny-tool:active, .ny-item:active, .ny-tab:active, body.layout-ny .ny-bar .button:active { transform: none; }
}

/* ---- AI i nya editorn, i samma form som /start: ett fält, en rund knapp, förslag som piller. ---- */
body.layout-ny .chat-fab { display: none !important; }
.ny-ask { position: absolute; z-index: 4; display: grid; gap: 10px; padding: 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(24, 46, 52, 0.04), 0 18px 44px -18px rgba(24, 46, 52, 0.28); transform-origin: top left; animation: ny-pop 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.ny-ask[hidden] { display: none; }
@keyframes ny-pop { from { opacity: 0; transform: scale(0.96); } }
.ny-ask-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.ny-ask-head .linkish, .ny-ask-close { font-size: 22px; line-height: 1; text-decoration: none; }
.ny-ask-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--color-line); border-radius: 18px; background: #fff; transition: border-color 150ms ease, box-shadow 150ms ease; }
.ny-ask-form:focus-within { border-color: #9ec0c7; box-shadow: 0 0 0 3px rgba(40, 108, 123, 0.12); }
.ny-ask-form.is-page { flex-wrap: wrap; padding: 14px 14px 10px; border-radius: 22px; }
.ny-ask-input { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 15px; line-height: 1.45; color: var(--color-ink); }
.ny-ask-form.is-page .ny-ask-input { flex-basis: 100%; }
.ny-ask-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ny-round { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #286c7b; color: #fff; cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease; }
.ny-round:disabled { opacity: 0.35; cursor: default; }
.ny-round:not(:disabled):active, .ny-chip:active, .ny-plus:active { transform: scale(0.97); }
.ny-plus { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted); font: inherit; font-size: 14px; cursor: pointer; }
.ny-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ny-chip { padding: 7px 13px; border: 1px solid var(--color-line); border-radius: 999px; background: rgba(255, 255, 255, 0.8); font: inherit; font-size: 13.5px; color: var(--color-ink); cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease, border-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .ny-chip:hover { background: #fff; border-color: #9ec0c7; } .ny-plus:hover { color: var(--color-ink); } }
.ny-ask-reply { margin: 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }
.ny-ask-wait { margin: 0; color: var(--color-muted); font-size: 14px; }
.ny-ask-note { color: var(--color-muted); }
.ny-ask-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ny-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.ny-thumbs img, .ny-thumb-wait { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; display: grid; place-items: center; background: var(--color-surface-2, #f1f4f5); }
.ny-thumbs:empty { display: none; }
.ny-ai { margin-left: 6px; }

/* Fråga AI om sidan: en lugn ruta mitt på skärmen på webben, ett blad på mobilen. */
.ny-ask-page { display: none; }
body.layout-ny[data-sheet="ai"] .ny-ask-page { display: grid; gap: 14px; position: fixed; z-index: 31; left: 50%; top: 12vh; width: min(640px, calc(100vw - 32px)); max-height: 76dvh; overflow: auto;
  padding: 28px 28px 22px; background: var(--color-surface); border-radius: 24px; box-shadow: 0 30px 80px rgba(18, 38, 45, 0.25); transform: translateX(-50%); animation: ny-rise 220ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes ny-rise { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.98); } }
.ny-ask-page h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; text-align: center; }
.ny-ask-lede { margin: -6px 0 4px; color: var(--color-muted); text-align: center; font-size: 15px; }
.ny-ask-page .ny-chips { justify-content: center; }
.ny-ask-close { position: absolute; top: 14px; right: 18px; }
.ny-ask-all { justify-self: center; font-size: 13.5px; }
.ny-ask-page .ny-handle { display: none; }
body.layout-ny[data-sheet="ai"] .ny-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(18, 38, 45, 0.28); opacity: 1; pointer-events: auto; }
@media (max-width: 760px) {
  body.layout-ny[data-sheet="ai"] .ny-ask-page { left: 0; right: 0; top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 80dvh; padding: 0 18px 20px;
    border-radius: 18px 18px 0 0; transform: none; animation: ny-sheet 320ms cubic-bezier(0.32, 0.72, 0, 1); }
  @keyframes ny-sheet { from { transform: translateY(100%); } }
  .ny-ask-page .ny-handle { display: block; }
  .ny-ask-page h2 { font-size: 22px; }
  .ny-ask { position: fixed; z-index: 32; left: 8px !important; right: 8px; top: auto !important; width: auto !important; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px; box-shadow: 0 -8px 40px rgba(18, 38, 45, 0.22); transform-origin: bottom center; }
}
@media (prefers-reduced-motion: reduce) { .ny-ask, body.layout-ny[data-sheet="ai"] .ny-ask-page { animation: none; } }

/* Sektionerna i vänsterspalten: dra dem, eller använd pilarna. */
.ny-section { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.ny-section .ny-item { flex: 1; min-width: 0; }
.ny-section[draggable="true"] .ny-item { cursor: grab; }
.ny-section.is-dragging { opacity: 0.45; }
.ny-section.is-over { box-shadow: inset 0 2px 0 var(--color-accent); }
.ny-section.is-fixed .ny-item { color: var(--color-muted); }
.ny-move { display: flex; gap: 2px; opacity: 0; transition: opacity 150ms ease; }
.ny-section:focus-within .ny-move { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .ny-section:hover .ny-move { opacity: 1; } }
@media (hover: none), (max-width: 760px) { .ny-move { opacity: 1; } }
.ny-move .icon-button { width: 28px; height: 28px; }

/* Toppmenyn på mobil och surfplatta: en hamburgermeny (topbar.js). */
.menu-toggle { display: none; }
@media (max-width: 1100px) {
  .topbar { position: sticky; flex-wrap: nowrap; }
  .topbar .views, .topbar .user { display: none; }
  .menu-toggle { display: inline-grid; place-content: center; gap: 4px; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-line); border-radius: 12px;
    background: var(--color-surface); cursor: pointer; touch-action: manipulation; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
  .menu-toggle:active { transform: scale(0.97); }
  .menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--color-ink); transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease; }
  .topbar.is-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .topbar.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .topbar.is-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .topbar.is-open { flex-wrap: wrap; }
  .topbar.is-open .views, .topbar.is-open .user { display: flex; flex-basis: 100%; order: 3; }
  .topbar.is-open .views { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 0 4px; animation: menu-in 200ms cubic-bezier(0.23, 1, 0.32, 1); }
  .topbar.is-open .views .view-tab { justify-content: flex-start; padding: 12px 14px; font-size: 16px; }
  .topbar.is-open .user { flex-wrap: wrap; padding: 8px 0 12px; border-top: 1px solid var(--color-line); order: 4; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
}
@media (prefers-reduced-motion: reduce) { .topbar.is-open .views { animation: none; } .menu-toggle span { transition: none; } }

/* Översta raden i nya editorn: aldrig radbrutna knappar; Publicera alltid längst till höger. */
.ny-bar { flex-wrap: wrap; row-gap: 6px; }
.ny-bar .button, .ny-saved, .ny-bar .preview-slot { white-space: nowrap; }
.ny-bar .preview-slot { display: flex; gap: 4px; margin: 0; }
.ny-bar #ny-publish { margin-left: auto; }
body.layout-ny .edit-toolbar { display: none; }
.ny-rail .ny-switch { display: inline-block; margin: 18px 10px 0; }
body.layout-ny .page-editor .improve-meta { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1280px) {
  .ny-saved { display: none; }
  #ny-undo .ny-label, #ny-redo .ny-label { display: none; }
  #ny-undo, #ny-redo { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1100px) {
  .ny-bar .preview-slot .button span, .ny-bar .preview-slot button > span:not(:first-child) { display: none; }
}
.ny-order { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 12px; background: color-mix(in srgb, var(--color-accent) 10%, transparent); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
/* Hela sidan: helskärm kant i kant, sidan som den ska se ut, utan Studions verktyg. */
body.layout-ny .browser.is-full { position: fixed; display: flex; flex-direction: column; inset: 0; border-radius: 0; border: 0; z-index: 60; }
body.layout-ny .browser.is-full .site-frame { flex: 1; height: auto; min-height: 0; }
body.layout-ny .browser.is-full .ny-selbar, body.layout-ny .browser.is-full .ny-ask { display: none !important; }
body.layout-ny .full-close { z-index: 61; opacity: 0.92; }

/* TotaWeb och prototyperna i samma editor: deras egen rubrik och verktygsrad ersätts av skalet. */
body.layout-ny .texts > .view-head, body.layout-ny .texts > .edit-toolbar { display: none; }
body.layout-ny .page-view { position: relative; }
body.layout-ny .texts-frame { width: 100%; height: calc(100vh - 68px - 52px - 64px - 56px); min-height: 420px; }
body.layout-ny .page-view.is-full { position: fixed; display: flex; flex-direction: column; inset: 0; border-radius: 0; border: 0; z-index: 60; }
body.layout-ny .page-view.is-full .texts-frame { flex: 1; height: auto; min-height: 0; }
body.layout-ny .page-view.is-full .ny-selbar, body.layout-ny .page-view.is-full .ny-ask { display: none !important; }
/* Granskningen före publicering ligger i högerspalten; Ångra och Publicera finns i raden överst. */
body.layout-ny .side > .draft-actions { display: grid; gap: 8px; }
body.layout-ny .side > .draft-actions > button:nth-child(-n + 2) { display: none; }
body.layout-ny .side > .draft-actions:not(:has(.draft-review)):not(:has(button:nth-child(3))) { display: none; }
@media (max-width: 760px) {
  body.layout-ny .texts-frame { height: calc(100dvh - 68px - 56px - 72px - env(safe-area-inset-bottom, 0px)); min-height: 360px; }
}
/* Den stora chatten ligger över sidan, aldrig över högerspalten med kontrollerna. */
@media (min-width: 761px) {
  body.layout-ny .chat-panel { right: calc(340px + 16px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  body.layout-ny .chat-panel { right: calc(300px + 12px); }
}
@media (max-width: 1500px) { .ny-saved { display: none; } }
@media (max-width: 1440px) {
  body.layout-ny .ny-bar .preview-slot .button, body.layout-ny .ny-bar .preview-slot button { font-size: 0; gap: 0; padding-left: 10px; padding-right: 10px; }
  body.layout-ny .ny-bar .preview-slot svg { width: 16px; height: 16px; }
}
/* Förbättringar: statusraden efter ett val, och byråns tekniska beskrivning. */
.improve-status-line { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--color-accent) 10%, transparent); font-size: 14px; font-weight: 600; }
.row-technical pre { white-space: pre-wrap; font-size: 12.5px; background: var(--color-surface-2, #f1f4f5); padding: 10px; border-radius: 8px; }
/* Mobilen: meddelanden högst upp under sidhuvudet, aldrig över menyn längst ner. */
@media (max-width: 760px) {
  .toast { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; }
}

/* ---- Inställningar, Översikt: the chain from the site to the proposals ---- */
.flow { display: grid; gap: 20px; margin-top: 14px; }
.flow-chain { display: flex; align-items: stretch; gap: 0; }
.flow-node {
  --tone: var(--color-muted); --tone-soft: var(--color-surface-2, #eef2f3);
  flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: 6px; padding: 14px 14px 12px;
  border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface);
  color: var(--color-ink); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.flow-node:hover { border-color: var(--tone); box-shadow: var(--shadow); transform: translateY(-1px); }
.flow-node:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.flow-node.tone-ok { --tone: var(--color-ok); --tone-soft: var(--color-ok-soft); }
.flow-node.tone-wait { --tone: var(--color-wait); --tone-soft: var(--color-wait-soft); }
.flow-node.tone-stop { --tone: var(--color-stop); --tone-soft: var(--color-stop-soft); border-color: color-mix(in srgb, var(--color-stop) 35%, var(--color-line)); }
.flow-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tone-soft); color: var(--tone); }
.flow-title { font-weight: 600; font-size: 15px; }
.flow-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tone); }
.flow-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.flow-node.tone-none .flow-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.flow-detail { font-size: 12.5px; color: var(--color-muted); overflow-wrap: anywhere; }
.flow-parts { display: grid; gap: 3px; font-size: 12.5px; color: var(--color-muted); }
.flow-parts > span { display: inline-flex; align-items: center; gap: 6px; }
.flow-parts .flow-dot { color: var(--color-line); background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-muted); }
.flow-parts .is-ok { color: var(--color-ink); }
.flow-parts .is-ok .flow-dot { background: var(--color-ok); box-shadow: none; }
.flow-link { flex: 0 0 22px; align-self: center; height: 0; border-top: 2px solid var(--color-ok); }
.flow-link.tone-broken { border-top: 2px dashed var(--color-line); }
.flow-todo ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.flow-todo li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-small); background: var(--color-surface-2, #f3f6f7); font-size: 14px; }
.flow-todo li > span:nth-child(2) { flex: 1; }
.flow-todo .flow-dot.tone-stop { color: var(--color-stop); }
.flow-todo .flow-dot.tone-wait { color: var(--color-wait); }
.flow-todo .flow-dot.tone-none { color: var(--color-muted); background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.flow-allgood { margin: 0; padding: 12px 14px; border-radius: var(--radius-small); background: var(--color-ok-soft); color: var(--color-ok); font-size: 14px; }
.module-schedule summary { cursor: pointer; font-size: 14px; color: var(--color-accent); padding: 4px 0; }
.module-schedule[open] summary { margin-bottom: 8px; }
@media (max-width: 900px) {
  .flow-chain { flex-direction: column; }
  .flow-node { grid-template-columns: 34px 1fr auto; align-items: center; column-gap: 12px; }
  .flow-node .flow-icon { grid-row: span 2; }
  .flow-node .flow-state { grid-column: 3; grid-row: 1; }
  .flow-node .flow-detail, .flow-node .flow-parts { grid-column: 2 / 4; }
  .flow-parts { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
  .flow-parts > span { white-space: nowrap; }
  .flow-link { flex: 0 0 14px; align-self: auto; margin-left: 30px; height: auto; width: 0; border-top: 0; border-left: 2px solid var(--color-ok); }
  .flow-link.tone-broken { border-top: 0; border-left: 2px dashed var(--color-line); }
}
@media (prefers-reduced-motion: reduce) { .flow-node { transition: none; } .flow-node:hover { transform: none; } }

/* ---- Förbättringar, kundens vy: det som behöver dig, och det som är gjort ---- */
.done-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.done-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--color-line); }
.done-row:last-child { border-bottom: 0; }
.done-headline { flex: 1; min-width: 0; }
.done-row small { color: var(--color-muted); white-space: nowrap; }
.lane-tag { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-muted); }
.lane-tag.lane-syns { background: var(--color-accent-soft); color: var(--color-deep); }
.lane-tag.lane-du { background: var(--color-wait-soft); color: var(--color-wait); }
.background-line { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-small); background: var(--color-surface-2); }
.mode-preview { margin-left: auto; }
@media (max-width: 600px) { .done-row { flex-wrap: wrap; } .done-row small { width: 100%; padding-left: 0; } }
/* Kundens vy utan spalt: listan får en läsbar bredd, centrerad. */
.board:has(> .ask[hidden]) { grid-template-columns: minmax(0, 860px); justify-content: center; }

/* ---- Översikt: det som är kvar att koppla, med knappen på raden och kortet öppnat på plats ---- */
.flow-todo li.flow-connect { display: grid; gap: 10px; padding: 10px 12px; }
.flow-connect-row { display: flex; align-items: center; gap: 10px; }
.flow-connect-text { flex: 1; min-width: 0; }
.flow-connect-actions { display: inline-flex; gap: 6px; flex: none; }
.flow-connect.is-open { background: var(--color-surface); border: 1px solid var(--color-line); }
.flow-connect-panel > .improve-card, .flow-connect-panel > dl { margin: 0; box-shadow: none; }
@media (max-width: 600px) {
  .flow-connect-row { flex-wrap: wrap; }
  .flow-connect-actions { width: 100%; padding-left: 18px; }
}

/* ---- Ditt abonnemang: månadsrapporten som kvitto ---- */
.report { display: grid; gap: 14px; }
.report-summary { margin: 0; font-size: 15px; line-height: 1.55; }
.report-modules { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.report-module { padding: 14px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); }
.report-module h4 { margin: 0 0 6px; font-size: 14px; }
.report-module ul { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; }
.report-line { margin: 4px 0 0; font-size: 13.5px; color: var(--color-muted); }
.report-line strong { color: var(--color-ink); }
.receipt-line { margin: 2px 0 0; font-size: 13.5px; color: var(--color-muted); }
.receipt-line strong { color: var(--color-ink); font-weight: 600; }

/* ---- Byrån: allt över alla sajter för byråns administratör ---- */
.agency { max-width: 1180px; margin: 0 auto; padding: 0 var(--gap) 120px; display: grid; gap: 20px; }
.agency .view-head { margin-bottom: 0; }
.agency h2 { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.agency-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agency-need, .agency-issues li, .agency-agents li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-small); background: var(--color-surface-2); }
.agency-need-text { flex: 1; min-width: 0; font-size: 14px; }
.agency-need-actions { display: inline-flex; gap: 6px; flex: none; }
.agency-need.agency-agent { display: grid; gap: 8px; align-items: start; justify-items: stretch; }
.agency-agent .agency-need-actions[hidden] { display: none; }
.agency-agent-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agency-agent-head small { color: var(--color-muted); font-size: 12.5px; }
.agency-agent-title { font-size: 15px; line-height: 1.35; }
.agency-agent-detail { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.agency-agent-detail summary { cursor: pointer; color: var(--color-accent); font-size: 13.5px; }
.agency-agent-detail p { margin: 8px 0 0; }
.agency-agent-reason { display: grid; gap: 4px; }
.agency-agent-line { margin: 0; font-size: 14.5px; line-height: 1.45; }
.agency-agent-unclear { margin: 0; font-size: 14px; line-height: 1.45; color: var(--color-wait); }
.agency-group { display: grid; gap: 8px; }
.agency-group + .agency-group { margin-top: 10px; }
.agency-group-name { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 16px; }
.agency-group-name small { font-weight: 400; font-size: 13px; color: var(--color-muted); }
.agency-agent .agency-need-actions { flex-wrap: wrap; }
.agency-reply { display: grid; gap: 8px; }
.agency-reply[hidden] { display: none; }
.agency-reply-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); color: inherit; resize: vertical; }
.agency-agent .button.danger { color: var(--color-stop); }
.agency-issues small, .agency-agents small { color: var(--color-muted); white-space: nowrap; font-size: 12.5px; }
.agency-site-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.agency-site { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); }
.agency-site header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.agency-site h3 { margin: 0; font-size: 16px; }
.agency-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.agency-stat { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--color-surface-2); }
.agency-stat strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.agency-stat span { font-size: 12px; color: var(--color-muted); }
.agency-stat.tone-ok strong { color: var(--color-ok); }
.agency-stat.tone-wait strong { color: var(--color-wait); }
.agency-stat.tone-stop strong { color: var(--color-stop); }
.agency-site-foot { margin: 0; font-size: 13px; color: var(--color-muted); }
.agency-links { display: flex; flex-wrap: wrap; gap: 6px; }
.agency-proc { display: grid; gap: 12px; }
.agency-agents summary { cursor: pointer; font-size: 14px; color: var(--color-accent); }
@media (max-width: 600px) {
  .agency-need { display: grid; gap: 8px; justify-items: start; }
  .agency-need-actions { width: 100%; flex-wrap: wrap; }
  .agency-site-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Det här vet vi om er: grundens fem kort ---- */
.grund-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-bottom: 18px; }
.grund-card { display: grid; align-content: start; gap: 8px; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); }
.grund-card h4 { margin: 0; font-size: 14px; }
.grund-card ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; }
.grund-from { margin: 0; font-size: 12.5px; color: var(--color-muted); }
.grund-fix { display: grid; gap: 8px; }

/* OpenSEO-kortet: valrutan håller sig inom kortet på en mobil. */
.openseo-admin .improve-actions { flex-wrap: wrap; }
.openseo-admin select { max-width: 100%; min-width: 0; flex: 1 1 220px; }

/* ---- Guide i en att-göra-rad (företagsprofilen) ---- */
.guide { display: grid; gap: 16px; font-size: 14.5px; line-height: 1.55; }
.guide-part h4 { margin: 0 0 6px; font-size: 15px; }
.guide-part p { margin: 0 0 8px; }
.guide-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---- En sajt utan Website State: ändras genom önskemål ---- */
.requests-site { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); }
.requests-site h3 { margin: 0; font-size: 18px; }
.requests-site p { margin: 0; line-height: 1.55; color: var(--color-muted); }
.requests-site-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Ett önskemål som väntar: stegen ---- */
.req-timeline { display: grid; gap: 8px; }
.req-timeline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.req-step { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.req-step strong { display: block; font-weight: 600; }
.req-step small { display: block; color: var(--color-muted); font-size: 13px; }
.req-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; border: 2px solid var(--color-line); }
.req-step.is-done .req-dot { background: var(--color-ok); border-color: var(--color-ok); }
.req-step.is-now .req-dot { border-color: var(--color-accent); background: var(--color-accent); animation: req-pulse 1.6s ease-in-out infinite; }
.req-step.is-stop .req-dot { background: var(--color-stop); border-color: var(--color-stop); }
.req-step.is-next { color: var(--color-muted); }
@keyframes req-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .req-step.is-now .req-dot { animation: none; } }

/* ---- Kostnaden före valet, och det som pågår ---- */
.improve-cost { margin: 0; padding: 10px 12px; border-radius: var(--radius-small); background: var(--color-surface-2); font-size: 14px; line-height: 1.45; }
.going-card { display: grid; gap: 10px; }
.going-headline { margin: 0; font-size: 16px; }
.req-timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ---- Utkastet är klart: bilder, att tänka på, publicera ---- */
.draft-hero { display: grid; gap: 12px; }
.draft-shots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 10px; align-items: start; }
.draft-shot { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.draft-shot img { width: 100%; max-height: 420px; object-fit: cover; object-position: top; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface-2); }
.draft-shot small { color: var(--color-muted); font-size: 12.5px; }
.draft-notes { padding: 10px 12px; border-radius: var(--radius-small); background: var(--color-surface-2); font-size: 14px; }
.draft-notes ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 600px) { .draft-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.ny-note { display: grid; gap: 8px; padding: 4px 4px 12px; font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.ny-note p { margin: 0; }

/* ---- Kvalitet i realtid i editorn ---- */
.ny-quality-wrap { position: relative; }
.ny-quality { display: inline-flex; align-items: center; gap: 6px; }
.ny-quality-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); }
.ny-quality.has-issues .ny-quality-dot { background: var(--color-wait); }
.ny-quality-list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(380px, 86vw); max-height: 60vh; overflow: auto; padding: 12px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: var(--color-surface); box-shadow: 0 12px 32px rgba(0,0,0,.12); display: grid; gap: 8px; }
.ny-quality-list[hidden] { display: none; }
.ny-quality-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ny-quality-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ny-quality-list li { display: grid; gap: 4px; justify-items: start; font-size: 13.5px; line-height: 1.45; }
.ny-quality-item { text-align: left; font-size: 13.5px; }
.ny-quality-foot { margin: 0; font-size: 12px; color: var(--color-muted); }
.history-changes { margin: 4px 0 0; padding-left: 16px; display: grid; gap: 2px; font-size: 13px; color: var(--color-muted); }

/* Designläge: the project's menu above, FigCraft filling the rest of the window. */
.design-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; }
.design-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.design-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.design-state { margin: 40px auto; max-width: 520px; text-align: center; color: var(--color-muted, #5b6b70); }
/* On a phone the tour (opened from Mer) is a sheet above the menu, never over the page's middle or the bar below. */
@media (max-width: 760px) { .tour { top: auto; right: 8px; left: 8px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: auto; } }

/* ---- Golden standard-redigeringen (docs/wayfinder/GOLDEN-EDITOR.md): lägen, etikett på det markerade, kommentar. ---- */
.ny-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--color-ink) 7%, transparent); }
.ny-mode { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--color-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ny-mode[aria-selected="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 3px rgba(18, 38, 45, 0.12); }
body.ny-viewing .ny-rail .ny-sections, body.ny-viewing #ny-show { opacity: 0.5; }
body.ny-viewing .browser { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.ny-selbar { align-items: center; }
.ny-sel-label { display: inline-flex; align-items: center; gap: 2px; padding: 0 10px 0 8px; margin-right: 2px; border-right: 1px solid var(--color-line); color: var(--color-muted); font-size: 13px; white-space: nowrap; }
.ny-sel-label strong { color: var(--color-ink); font-weight: 700; }
.ny-sel-section { font-size: 13px; }
.ny-ask-about { margin: -4px 0 0; color: var(--color-muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 1100px) { .ny-mode span, #ny-show .ny-label { display: none; } .ny-mode { padding: 6px 9px; } }
@media (max-width: 760px) {
  /* Mobilen: lägena står kvar överst, bredvid Ångra och Publicera; raden för det markerade rullar i sidled om den blir trång. */
  .ny-mbar { overflow-x: auto; scrollbar-width: none; }
  .ny-mbar::-webkit-scrollbar { display: none; }
  .ny-mtool { flex: 1 0 auto; min-width: 64px; }
  .ny-mlabel { flex: none; align-self: center; padding: 4px 7px; border-radius: 6px; background: var(--color-ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
  body.layout-ny .ny-bar #ny-show { display: none; }
}

/* Mobilen, TotaWebs motor: Varumärke och Navigation är en panel bredvid sidan på datorn. På telefonen låg den under
   ramen (nästan hela skärmen) och såg ut att saknas. Nu står panelen överst och ramen är en lägre förhandsvisning under. */
@media (max-width: 760px) {
  body.layout-ny .overlay-brand-view { display: flex; flex-direction: column; gap: 12px; }
  body.layout-ny .overlay-brand-view > .texts-fields { order: -1; max-height: none; overflow: visible; padding-right: 0; }
  body.layout-ny .overlay-brand-view > .page-view { order: 1; }
  body.layout-ny .overlay-brand-view .texts-frame { height: 46dvh; min-height: 260px; }
}

/* Utkastet syns alltid, också på telefonen: en liten pill i raden överst ("Utkast · 2", "Förhandsgranskning"). */
@media (max-width: 760px) {
  body.layout-ny .ny-saved { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 8%, transparent); color: var(--color-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
  .ny-saved.has-draft { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-ink); }
  body.ny-viewing .ny-saved { background: color-mix(in srgb, var(--color-accent) 30%, transparent); color: var(--color-ink); }
}

/* Designläget: förklaringen ovanför ramen, hopfällbar. */
/* Hopfälld som förval: en länk i raden; öppen tar den en smal ruta under raden, inte halva skärmen. */
.design-help { position: relative; margin: 0; font-size: 13px; }
.design-help summary { cursor: pointer; font-weight: 600; color: var(--color-muted); list-style: none; }
.design-help summary::-webkit-details-marker { display: none; }
.design-help summary::after { content: " ▾"; }
.design-help[open] summary { color: var(--color-ink); }
.design-help[open] > ul { position: absolute; z-index: 5; left: 0; top: 26px; width: min(560px, 90vw); margin: 0; padding: 12px 14px 12px 30px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-surface); box-shadow: 0 12px 32px rgba(18, 38, 45, 0.16); }
.design-help ul { margin: 8px 0 2px; padding-left: 18px; display: grid; gap: 4px; color: var(--color-muted); line-height: 1.45; }
.design-help code { font-size: 12.5px; }
.design-help-use { margin: 10px 0 2px; color: var(--color-ink); line-height: 1.5; }

/* Designläget: raden med Gör en bild (och senare Importera/Exportera) ovanför ramen. */
.design-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 16px 0; }
.design-tools[hidden] { display: none; }
.design-quota { color: var(--color-muted); font-size: 13px; }
.design-make-form { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-surface); }
.design-make-form[hidden] { display: none; }
.design-make-form label { display: grid; gap: 4px; font-size: 13px; color: var(--color-muted); }
.design-make-form textarea, .design-make-form select, .design-make-form input { font: inherit; padding: 8px 10px; border: 1px solid var(--color-line); border-radius: 8px; background: #fff; }
.design-make-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--color-muted); }
@media (max-width: 760px) { .design-make-form { grid-template-columns: 1fr; } }

/* Customer feedback shares the Studio canvas; tools and comments stay beside what is being reviewed. */
body.customer-proposal .topbar .views, body.customer-proposal .topbar .menu-toggle { display: none; }
body.customer-proposal .topbar .user { display: flex; margin-left: auto; }
body.customer-proposal .topbar .kund-avatar { min-width: 44px; min-height: 44px; }
body.layout-ny.customer-proposal .workspace { grid-template-columns: 170px minmax(0, 1fr); }
body.layout-ny.customer-proposal .side, body.layout-ny.customer-proposal .ny-ai, body.layout-ny.customer-proposal #ny-quality,
body.layout-ny.customer-proposal #ny-show, body.layout-ny.customer-proposal .ny-foot, body.layout-ny.customer-proposal #ny-mbar,
body.layout-ny.customer-proposal #studio-chat, body.layout-ny.customer-proposal .chat-launcher { display: none !important; }
body.layout-ny.customer-proposal .ny-bar { position: sticky; top: 68px; height: auto; flex-wrap: wrap; padding: 10px; gap: 8px; }
body.layout-ny.customer-proposal .ny-bar button { min-height: 40px; }
body.layout-ny.customer-proposal .ny-bar .ny-label, body.layout-ny.customer-proposal .ny-bar .preview-slot button { font-size: 13px; }
body.layout-ny.customer-proposal .page-view { overflow: hidden; display: block; max-width: 100%; margin-inline: auto; }
body.layout-ny.customer-proposal .page-view.is-mobile { width: 390px; max-width: 100%; }
body.layout-ny.customer-proposal .page-view.is-full { width: 100%; height: 100dvh !important; min-height: 100dvh !important; overflow: hidden; display: block; }
body.layout-ny.customer-proposal .texts-frame { display: block; border: 0; min-height: 0 !important; margin: 0; flex: none; }
body.layout-ny.customer-proposal .proposal-tools { position: fixed; z-index: 28; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 6px; width: min(400px, calc(100% - 24px)); background: var(--color-surface, #fff); border: 1px solid var(--color-border, #dce4e7); border-radius: 18px; box-shadow: 0 8px 32px #132c3829; }
body.layout-ny.customer-proposal .proposal-tools .button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; min-width: 0; padding: 5px 2px; border: 0; border-radius: 12px; font-size: 11px; }
body.layout-ny.customer-proposal .proposal-tools svg { width: 24px; height: 24px; }
body.layout-ny.customer-proposal .proposal-tools .ny-label { font-size: 11px; }
body.layout-ny.customer-proposal .proposal-tools .ny-redo svg { transform: scaleX(-1); }
body.layout-ny.customer-proposal .proposal-tools [aria-pressed="true"] { background: var(--color-primary, #0b3c49); color: white; }
body.layout-ny.customer-proposal:has(.page-view.is-full) .proposal-tools { display: none; }
.proposal-more { position: relative; }
.proposal-more summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--color-border, #dce4e7); border-radius: 10px; background: var(--color-surface, #fff); cursor: pointer; }
.proposal-more summary::-webkit-details-marker { display: none; }
.proposal-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; max-height: 65dvh; overflow: auto; display: grid; gap: 6px; padding: 10px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #dce4e7); border-radius: 12px; box-shadow: 0 12px 35px #132c3829; }
.proposal-menu .button { justify-content: flex-start; }
#proposal-summary { margin: 0 0 12px; padding: 12px; max-height: 200px; overflow: auto; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #dce4e7); border-radius: 12px; font-size: 13px; }
#proposal-summary[hidden] { display: none; }
.proposal-note { margin-top: 10px; overflow-wrap: anywhere; }
.proposal-note strong { color: var(--color-muted); font-size: 12px; }
.proposal-note p { margin: 3px 0 0; white-space: pre-wrap; }
.project-review-panel { position: fixed; z-index: 55; top: 76px; right: 12px; bottom: 12px; width: min(620px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #dce4e7); border-radius: 14px; box-shadow: 0 12px 45px #132c3829; }
.project-review-panel[hidden] { display: none; }
.project-review-panel > button { align-self: flex-end; }
.project-review-panel iframe { flex: 1; width: 100%; min-height: 0; border: 0; }
.project-image-form { display: grid; gap: 12px; }
.project-image-form blockquote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--color-primary, #0b3c49); background: var(--color-surface-2, #f1f4f5); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow: auto; font-size: 13px; }
.project-image-form textarea { width: 100%; min-height: 80px; padding: 10px; font: inherit; }
.project-image-form label { display: grid; gap: 4px; font-size: 13px; }
.project-image-form select { min-height: 42px; font: inherit; }
.project-image-form [role="status"] { font-size: 13px; line-height: 1.5; margin: 0; }
.project-image-result { display: grid; gap: 10px; }
.project-image-result img { max-width: 100%; max-height: 250px; object-fit: contain; }
.design-image-panel { position: fixed; z-index: 50; top: 130px; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); overflow: auto; padding: 16px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #dce4e7); border-radius: 14px; box-shadow: 0 12px 45px #132c3829; }
.design-image-panel[hidden] { display: none; }
.design-image-panel .improve-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
#proposal-status { font-size: 14px; padding: 0 12px; margin: 8px 0 12px; color: var(--color-muted); }
.proposal-composer { position: absolute; z-index: 45; padding: 16px; display: grid; gap: 12px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #dce4e7); border-radius: 12px; box-shadow: 0 12px 45px #132c3829; max-height: min(720px, 80dvh); overflow: auto; }
.proposal-composer textarea { width: 100%; min-height: 80px; border: 1px solid var(--color-border, #dce4e7); border-radius: 8px; padding: 10px; resize: vertical; font: inherit; }
.proposal-composer .improve-meta { align-items: flex-start; gap: 8px; }
.proposal-composer details > * { margin-top: 8px; }
.proposal-filter { display: grid; grid-template-columns: 1fr auto; gap: 4px; font-size: 13px; }
.proposal-filter input { grid-column: 1 / -1; width: 100%; }
.proposal-image-preview { max-width: 100%; max-height: 180px; margin: 0 auto; object-fit: contain; }
.proposal-drawer { position: fixed; z-index: 55; right: 16px; top: 90px; bottom: 20px; width: min(420px, calc(100vw - 32px)); padding: 20px; overflow: auto; background: white; border: 1px solid #dce4e7; border-radius: 14px; box-shadow: 0 16px 60px #132c3830; }
.proposal-drawer[hidden] { display: none; }
.proposal-item { border-bottom: 1px solid #dce4e7; padding: 15px 0; overflow-wrap: anywhere; }
.proposal-item .button { margin-right: 5px; }
@media (min-width: 760px) and (max-width: 1100px) {
  body.layout-ny.customer-proposal .ny-bar { flex-wrap: nowrap; }
  body.layout-ny.customer-proposal .ny-bar .preview-slot button { font-size: 0; width: 38px; padding: 8px; }
  body.layout-ny.customer-proposal .ny-bar .preview-slot svg { width: 22px; height: 22px; }
}
@media (max-width: 759px) {
  body.layout-ny.customer-proposal .workspace { display: block; }
  body.layout-ny.customer-proposal .canvas { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  body.layout-ny.customer-proposal .ny-bar { padding: 6px 0; gap: 4px; flex-wrap: nowrap; }
  body.layout-ny.customer-proposal .ny-bar .preview-slot { gap: 2px; }
  body.layout-ny.customer-proposal .ny-bar .preview-slot button { font-size: 0; width: 38px; min-height: 44px; padding: 8px; }
  body.layout-ny.customer-proposal .ny-bar .preview-slot svg { width: 22px; height: 22px; }
  body.layout-ny.customer-proposal .ny-bar #ny-publish { margin-left: auto; padding: 10px; font-size: 12px; min-height: 44px; }
  body.layout-ny.customer-proposal .ny-bar > .ny-spacer, body.layout-ny.customer-proposal #proposal-list-button, .proposal-more summary span { display: none; }
  body.layout-ny.customer-proposal .proposal-tools { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.layout-ny.customer-proposal .proposal-composer { position: fixed; left: 8px !important; top: auto !important; bottom: calc(146px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 16px) !important; max-height: calc(100dvh - 220px); }
  body.layout-ny.customer-proposal #proposal-status { font-size: 12px; padding: 0 2px; }
  body.layout-ny.customer-proposal #proposal-summary { max-height: 160px; }
}
body.layout-ny.customer-proposal.ny-viewing .proposal-composer, body.layout-ny.customer-proposal .page-view.is-full .proposal-composer { display: none; }
body.layout-ny.customer-proposal #ny-tab-mer { display: none; }
body.layout-ny.customer-proposal .texts { min-width: 0; grid-template-columns: minmax(0, 1fr); }
body.layout-ny.customer-proposal .page-view.is-mobile { width: min(390px, 100%); min-width: 0; }
body.layout-ny.customer-proposal #ny-more, body.layout-ny.customer-proposal .ny-modes { display: none !important; }
body.layout-ny.customer-proposal .ny-rail .ny-item span { min-width: 0; overflow-wrap: anywhere; }