/* Layout and components for the customer UI. Values are copied from the
   design (Alex's shared artifact); tokens.css names the shared ones.
   Additions the design lacks are marked "not in the design". */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text);
  background: var(--canvas);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Not in the design: accessibility helpers. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--surface); padding: 8px 12px; border-radius: var(--radius-control);
}
.skip-link:focus { left: 8px; z-index: 70; }

/* Product header */
.product-header {
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  display: flex; align-items: center; justify-content: space-between;
  /* The design's 52 px bar plus its 1 px border (it sizes content-box). */
  height: 53px;
}
.header-left { display: flex; align-items: center; height: 100%; min-width: 0; }
.brand { display: flex; align-items: center; padding: 0 24px; flex: none; }
.brand:hover { text-decoration: none; }
/* Not in the design: the "SiteManager memory" lockup at the landing wireframe's
   header height (32 px) replaces the artifact's 22 px SiteManager logo. */
.brand-logo { display: block; height: 32px; width: auto; }
/* Not in the design: a narrow desktop window keeps the nav clear of the account
   controls with the lockup at its 26 px minimum (25 px narrower). */
@media (max-width: 760px) { .brand-logo { height: 26px; } }
.header-nav { display: flex; align-items: center; height: 100%; min-width: 0; }
.header-divider { width: 1px; height: calc(100% - 2px); background: #dee2e6; flex: none; }
.app-nav {
  display: flex; align-items: center; gap: 26px;
  font-size: 15px; color: #212529; padding: 0 20px;
}
.app-nav a { color: #5c5f66; cursor: pointer; white-space: nowrap; }
.app-nav a.is-active { color: #212529; font-weight: 500; }
.app-nav a:hover { text-decoration: none; }

/* Not in the design: presentation switch beside the verified staff account. */
.header-account { display: flex; align-items: center; gap: 12px; margin-right: 20px; flex: none; }
.view-switch { display: flex; margin: 0; padding: 2px; border: 1px solid #e7e8eb; border-radius: 4px; }
.view-option {
  padding: 4px 8px; border: 0; border-radius: 3px; cursor: pointer;
  background: transparent; color: #495057; font: inherit; font-size: 12px; line-height: 1.25;
  white-space: nowrap;
}
.view-option:hover { background: #f8f9fa; }
.view-option[aria-pressed="true"] { background: #e8f0fe; color: #1a56b8; }
/* Not in the design: the staff system status pill (the design's status-pill
   shape, sm-memory tokens), as tall as the view switch beside it (29 px:
   1 px border, 2 px padding, 23 px option, measured in Firefox). */
.ops-badge-slot { display: flex; flex: none; }
.ops-badge {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  height: 29px; padding: 0 10px; border-radius: var(--radius-chip);
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.ops-badge:hover { text-decoration: none; }
.ops-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ops-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.ops-badge.is-normal { background: var(--green-bg); color: var(--green); }
.ops-badge.is-alert { background: var(--red-bg); color: var(--red); }
.ops-badge.is-unknown { background: var(--divider); color: var(--text-4); }
/* Unknown: a ring, not a dot, so the state does not rest on colour alone. */
.ops-badge.is-unknown .ops-badge-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ops-badge.is-loading { background: var(--divider); }
.ops-badge.is-loading > * { visibility: hidden; }
.account-menu { position: relative; flex: none; }
.account-menu > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.account-menu > summary::-webkit-details-marker { display: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #e8f0fe; color: #1a56b8;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
}
.menu {
  position: absolute; top: 42px; right: 0; width: 230px;
  background: #fff; border: 1px solid #e7e8eb; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(20, 22, 26, 0.12); z-index: 60;
}
.menu-head { padding: 14px 18px; border-bottom: 1px solid #f0f0ee; }
.menu-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.menu-sub { font-size: 13px; color: #6c757d; margin-top: 2px; }
.menu-items { padding: 6px 0; }
.menu-item {
  display: block; font-size: 14px; color: #5c5f66; padding: 9px 18px; cursor: pointer;
}
.menu-item:hover { color: #5c5f66; text-decoration: none; }
/* Logout posts a form: the button must look like the other menu rows, not a browser button. */
.menu-logout { margin: 0; }
button.menu-item {
  width: 100%; margin: 0; border: 0; border-radius: 0; background: none;
  font: inherit; font-size: 14px; line-height: inherit; text-align: left; appearance: none;
}
/* Not in the design (Dutch only there): the language choice, one item row. */
.menu-languages { display: flex; gap: 12px; margin: 0; cursor: default; }
.menu-languages button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: #5c5f66;
}
.menu-languages button.is-active { color: #212529; font-weight: 500; }
/* Not in the design: workspace switch, one name per line in the language row's style. */
.menu-workspaces { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; cursor: default; border-bottom: 1px solid #f0f0ee; }
.menu-workspaces button { border: 0; padding: 0; background: none; font: inherit; color: #6c757d; cursor: pointer; text-align: left; }
.menu-workspaces button.is-active { color: #212529; font-weight: 500; }
/* Not in the design: the workspace list's caption and the current one's check. */
.menu-workspaces .menu-caption { font-size: 12px; color: #6c757d; }
.menu-workspaces button.is-active::before { content: "\2713\00a0"; }
/* Staff see every customer workspace: long lists scroll inside the menu. */
.menu-workspaces { max-height: 280px; overflow-y: auto; }
.menu-workspaces button { overflow-wrap: anywhere; }

/* Page */
.page { padding: 40px clamp(24px, 4vw, 64px); }
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.page-head h1 { margin: 0; font-size: 28px; font-weight: 500; }

.card {
  background: #fff; border: 1px solid #e7e8eb; border-radius: 8px; padding: 32px;
}
.card h2 { margin: 0 0 8px; font-size: 19px; font-weight: 500; }
.card p { margin: 0; font-size: 15px; color: #5c5f66; }

/* Memories list (design: list view) */
.list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.list-title { margin: 0; font-size: 28px; font-weight: 500; }
.list-subtitle { font-size: 15px; color: #5c5f66; margin-top: 4px; }
.button-primary {
  background: var(--accent); color: #fff; border: none; border-radius: 4px;
  padding: 11px 20px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.button-primary:hover { color: #fff; text-decoration: none; }
/* Not in the design: the read-only label in the button's place (staff observing). */
.list-read-only {
  border: 1px solid #e7e8eb; border-radius: 4px; padding: 10px 20px;
  font-size: 14px; font-weight: 500; color: #6c757d;
}

/* Not in the design: the result of an Approve or Decline, and the requester's
   approval state on a memory (manual approval on an agency embed, or
   SiteManager approving new accounts before paid work). */
.list-notice, .approval-status {
  margin: 0 0 16px; padding: 10px 14px; border: 1px solid #e7e8eb; border-radius: 4px;
  background: #fff; font-size: 14px; color: #3c4043;
}
.memory-decision { display: inline; margin: 0; }
.memory-decision button {
  background: none; border: none; padding: 0; font-family: inherit; font-size: inherit; cursor: pointer;
}

.list-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #d3d5db; border-radius: 4px;
  padding: 0 14px; height: 42px; min-width: 280px;
}
.search-box svg { width: 17px; height: 17px; flex-shrink: 0; }
.search-box input {
  border: none; outline: none; font-family: inherit; font-size: 15px;
  color: #212529; background: transparent; width: 100%; padding: 0;
}
/* Not in the design: the field's borderless input still needs visible focus. */
.search-box:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-box input::-webkit-search-cancel-button { display: none; }
/* Not in the design: the staff list of client workspaces (/workspaces), in
   the card's border, radius and type scale. */
.workspace-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e7e8eb; border-radius: 8px; font-size: 15px;
}
.workspace-table th {
  text-align: left; font-size: 13px; font-weight: 500; color: #6c757d;
  padding: 12px 20px; border-bottom: 1px solid #e7e8eb;
}
.workspace-table td { padding: 12px 20px; border-bottom: 1px solid #f0f0ee; color: #212529; }
.workspace-table tr:last-child td { border-bottom: none; }
.workspace-table .is-number { text-align: right; width: 120px; }
.workspace-action { text-align: right; width: 180px; }
.workspace-view {
  border: none; background: none; padding: 0; font: inherit; font-size: 14px;
  color: var(--accent); cursor: pointer;
}
.workspace-view:hover { text-decoration: underline; }
.workspace-current { font-size: 14px; color: #6c757d; }
/* Not in the design: the staff approval list (/approvals) in the same table. */
.approval-email { overflow-wrap: anywhere; max-width: 280px; }
.approval-websites span { display: block; overflow-wrap: anywhere; }
.approval-action { width: 200px; white-space: nowrap; }
.approval-action form { display: inline; margin-left: 16px; }
.approval-action .approval-decline { margin-left: 16px; text-decoration: none; }
.approval-confirm { max-width: 560px; }
.approval-confirm p { margin: 0 0 16px; overflow-wrap: anywhere; }
.approval-confirm .approval-email { max-width: none; font-weight: 500; }
.approval-confirm form { display: inline; margin-right: 16px; }
.approval-subtitle { font-size: 18px; font-weight: 500; margin: 32px 0 12px; }
.workspace-pages {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; font-size: 14px; color: #5c5f66;
}
.ui-request-feedback { margin: 12px 0; color: #5c5f66; font-size: 14px; }
.ui-request-feedback button {
  margin-left: 8px; padding: 0; border: 0; background: none;
  font: inherit; color: var(--accent); cursor: pointer;
}
.ui-request-feedback button:disabled { opacity: 0.5; cursor: not-allowed; }
.sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #5c5f66; }
.sort-chip {
  background: #fff; border: 1px solid #d3d5db; border-radius: 4px;
  padding: 9px 14px; font-weight: 500; color: #212529;
}
/* Not in the design: the chip is a native select, so it keeps the chip's box
   and font and adds a small caret where the browser arrow was. */
select.sort-chip {
  appearance: none; font-family: inherit; font-size: inherit; line-height: inherit;
  padding-right: 30px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c5f66' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px;
}

.memory-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.memory-card {
  background: #fff; border: 1px solid #e7e8eb; border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
}
.memory-hero {
  background: #eaf1fe; height: 126px;
  display: flex; align-items: center; justify-content: center;
}
a.memory-hero { cursor: pointer; }
.memory-hero svg { width: 54px; height: 54px; }
.memory-body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.memory-name-row { display: flex; align-items: center; gap: 8px; }
.memory-name { font-size: 17px; font-weight: 500; color: #212529; }
a.memory-name { cursor: pointer; }
a.memory-name:hover { color: #212529; text-decoration: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #1f9254; }
.dot-scanning { background: #f5a524; }
.dot-failed { background: #9a3c1d; } /* not in the design */
.dot-new { background: #9aa0a6; } /* not in the design */
.memory-meta { font-size: 13px; color: #6c757d; }
.memory-crawl { margin-top: 2px; }
/* not in the design: a newer failed scan leaves the usable Memory available. */
.memory-warning { font-size: 13px; color: #9a3c1d; }
.crawl-live-error { grid-column: 1 / -1; font-size: 14px; color: #8a5a12; margin: 0 0 12px; }
.memory-stats { display: flex; border-top: 1px solid #f0f0ee; }
.memory-stats > div { flex: 1; padding: 12px 18px; }
.memory-stats > div + div { border-left: 1px solid #f0f0ee; }
.stat-value { font-size: 17px; font-weight: 500; }
.stat-label { font-size: 12px; color: #6c757d; margin-top: 2px; }
.memory-actions {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid #f0f0ee; padding: 12px 18px; font-size: 14px;
}
/* not in the design: status plus the usable Memory link fit translated cards. */
.memory-actions > * { white-space: nowrap; }
.action-open { color: var(--accent); font-weight: 500; }
.action-scanning { color: #8a5a12; }
.action-failed { color: #9a3c1d; } /* not in the design */
.action-settings { color: #5c5f66; }
.action-settings:hover { color: #5c5f66; }

.embed-card {
  border: 1px dashed #c8cbd0; border-radius: 8px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 200px;
}
.embed-kicker {
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #6c757d;
}
.embed-title { font-size: 17px; font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.embed-body { font-size: 14px; font-weight: 300; color: #41454a; line-height: 1.6; text-wrap: pretty; }
.embed-leads { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5c5f66; }
.embed-leads .dot { width: 7px; height: 7px; }
.embed-link { font-size: 14px; font-weight: 500; color: var(--accent); margin-top: 2px; }
/* Not in the design: the pointer card of an empty own workspace, in the
   "Voor agencies" card's shape; its Open is the workspace switch's button. */
.memory-pointer { min-height: 0; }
.memory-pointer button.embed-link {
  border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; text-align: left;
}
.memory-pointer button.embed-link:hover { text-decoration: underline; }
/* Not in the design: the staff tile of the landing-page embed reuses the card
   and the settings page's code block, made compact for the card. */
/* Full grid width with the code beside the text, so the tall code block does
   not stretch the memory cards in its row. */
.house-tile.is-active {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px 32px; align-items: start; min-height: 0;
}
.house-tile.is-active .house-tile-text { display: flex; flex-direction: column; gap: 10px; }
.house-tile-line { font-size: 13px; overflow-wrap: anywhere; }
.house-tile .cfg-code { padding: 14px 16px 16px; }
.house-tile .cfg-snippet { font-size: 11.5px; padding: 12px; }
.house-tile .cfg-code-hint { margin-top: 10px; }
/* Parts of the design not built yet (sprint: shown blurred). */
.is-blurred { filter: blur(3px); pointer-events: none; user-select: none; }

/* not in the design: an empty list or a search without results */
.memory-empty {
  grid-column: 1 / -1; padding: 32px; text-align: center;
  font-size: 15px; color: #5c5f66; background: #fff;
  border: 1px solid #e7e8eb; border-radius: 8px;
}

/* Not in the design: pages not built yet (ledger L-024: every nav target is a
   real page or this state). */
.state { text-align: center; padding: 48px 32px; }
.state .label {
  display: inline-block; margin-bottom: 12px; padding: 2px 12px;
  border-radius: 12px; font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: #e8f0fe; color: #1a56b8;
}
.state-link { text-align: center; margin: 16px 0 0; font-size: 15px; }

/* Provenance chips (design: 12-14 px radius chips) */
.chip {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.chip-measured { background: #e6f7ed; color: #1f9254; }
.chip-derived { background: #fff4e0; color: #8a5a12; }
.chip-supplied { background: #eeedfe; color: #3c3489; }
.chip-expertise { background: #f0f0ee; color: #5c5f66; }

/* htmx request indicator, since htmx's own inline styles are turned off. */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Not in the design (no breakpoints there): the header at phone widths, same
   parts, tighter spacing, so all three nav items fit at 375 px. */
@media (max-width: 600px) {
  .brand { padding: 0 12px; }
  .brand-logo { height: 26px; }
  .app-nav { gap: 14px; padding: 0 10px; font-size: 14px; }
  .header-account { margin-right: 12px; }
  /* Preserve the existing compact header; the role stays in the account menu. */
  .view-option { padding: 4px; }
  .page { padding: 24px 16px; }
  .page-head h1 { font-size: 24px; }
  .card { padding: 20px; }
  .state { padding: 32px 20px; }
}

/* Not in the design: links to the draft legal pages under customer pages
   (same rule in legal.css, which the legal pages load without this file). */
.legal-footer {
  height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted);
}
.legal-footer a { color: var(--text-4); }
/* Not in the design: the billing banner (payment failed, spending limit),
   the scan banner's shape (scanBanner*) with the page column's width. */
.billing-banner {
  background: #fff; border: 1px solid #e7e8eb; border-left: 3px solid var(--accent);
  border-radius: 8px; margin: 0 auto 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 10px 16px;
  max-width: 1200px; font-size: 14px; line-height: 1.5;
}
.billing-banner.is-alert { border-left-color: #b42318; }
.billing-banner-text { min-width: 0; font-weight: 500; }
.billing-banner-button {
  background: var(--accent); color: #fff; border-radius: 4px; padding: 8px 16px;
  font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.billing-banner-button:hover { background: var(--accent-hover); color: #fff; }

/* Not in the design: the staff free-scan limits (/limits), in the card and
   table styles of /workspaces and /approvals and the embed settings' field. */
.limits-error { border-color: #b3261e; color: #b3261e; }
.limits-table th[scope="row"] {
  text-align: left; font-size: 15px; font-weight: 400; color: #212529;
  padding: 12px 20px; border-bottom: 1px solid #f0f0ee;
}
.limits-table tr:last-child th[scope="row"] { border-bottom: none; }
.limits-table .is-number { width: 160px; white-space: nowrap; }
.limits-table .is-current { font-weight: 500; }
.limits-input {
  width: 110px; box-sizing: border-box; border: 1px solid #d3d5db; border-radius: 4px;
  padding: 7px 10px; font: inherit; font-size: 15px; color: #212529; background: #fff;
  text-align: right;
}
.limits-input.is-invalid { border-color: #b42318; }
.limits-input-time { width: 220px; text-align: left; }
.limits-field-error { font-size: 13px; color: #b42318; margin-top: 4px; white-space: normal; }
.limits-note { margin: 16px 0 0; font-size: 14px; color: #5c5f66; }
.limits-note.limits-warning { color: #b3261e; }
.limits-until { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.limits-label { font-size: 14px; font-weight: 500; }
.limits-until .limits-field-error { flex-basis: 100%; margin: 0; }
.limits-confirm { max-width: 640px; }
/* Not in the design: the plain-value row's hint and the usage table. */
.limits-row-hint { font-size: 13px; font-weight: 400; color: #5c5f66; margin-top: 2px; }
.limits-usage .limits-full { color: #b3261e; font-weight: 500; }
.limits-confirm .limits-table { margin: 0 0 16px; }
.limits-confirm p { margin: 0 0 16px; }