/* Command Center marketing site, PN&CPS TECH LTD.
   Account, company and legal pages only (login, signup, reset-password, contact, about, terms, privacy,
   cookies, dpa, 404). Linked after site.css; uses its tokens and adds no new colors.
   Sections: utilities, auth, mini app panels, contact, about, legal, not found, responsive. */

/* ------------------------------------------------------------------ */
/* 1. Utilities                                                        */
/* ------------------------------------------------------------------ */
/* Author display rules (.field { display: grid }) beat the UA [hidden] rule; mode switching needs this. */
[hidden] { display: none !important; }
.text-btn { font: inherit; font-size: var(--fs-0); font-weight: 600; color: var(--primary); background: none; border: 0; padding: 4px 2px; cursor: pointer; border-radius: 4px; }
.text-btn:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* ------------------------------------------------------------------ */
/* 2. Auth pages                                                       */
/* ------------------------------------------------------------------ */
.auth-header .container { gap: var(--s-4); }
.auth-header .site-actions { gap: var(--s-1); margin-left: auto; }
.auth-header .site-actions .back-link { display: inline-flex; }
.auth-header .back-link::before { content: "\2190"; margin-right: 6px; }

.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-page main { flex: 1; display: flex; }
.auth-split { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: start; padding-block: clamp(40px, 6vw, 88px); }
.auth-split .auth-card { width: 100%; }
.auth-solo { display: grid; place-items: center; padding-block: clamp(40px, 8vw, 112px); }
.auth-solo .auth-card { width: min(100%, 440px); }

.auth-card { box-shadow: var(--shadow-3); }
.auth-card > header { display: grid; gap: var(--s-2); }
.auth-card h1 { font-size: var(--fs-4); line-height: 1.15; }
.auth-sub { color: var(--muted); font-size: var(--fs-1); }
.auth-alt { display: grid; gap: var(--s-2); }
.auth-alt .btn { justify-content: center; gap: 10px; }
.auth-alt .badge { font-size: 11px; padding: 3px 7px; }
.auth-switch { display: flex; justify-content: center; }
.auth-card:has(.form.is-done) .auth-alt,
.auth-card:has(.form.is-done) .divider,
.auth-card:has(.form.is-done) .auth-switch { display: none; }
.auth-terms { font-size: var(--fs-0); color: var(--muted); text-align: center; text-wrap: pretty; }
.auth-terms a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.auth-terms a:hover { color: var(--ink); }
.auth-other { text-align: center; font-size: var(--fs-1); color: var(--muted); }
.auth-other a { font-weight: 600; }

.field .check { font-size: var(--fs-1); font-weight: 400; color: var(--ink-2); }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.label-row a { font-size: var(--fs-0); font-weight: 600; }
.label-row .opt { font-size: var(--fs-0); color: var(--muted); font-weight: 400; }

/* Password with show / hide */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-width: 56px; height: 32px; padding: 0 10px; font: inherit; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-1); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); border-color: var(--muted); }

.form-success p { color: var(--ink-2); font-size: var(--fs-1); }
.form-success p + p { margin-top: 6px; }
.form-success .after { margin-top: var(--s-3); font-size: var(--fs-0); color: var(--muted); }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* The API key note on signup */
.key-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--canvas); font-size: var(--fs-0); color: var(--ink-2); line-height: 1.55; }
.key-note svg { width: 20px; height: 20px; color: var(--primary); margin-top: 1px; }
.key-note b { color: var(--ink); font-weight: 600; }

/* The right column on login and signup */
.auth-aside { display: grid; gap: var(--s-5); align-content: start; }
.auth-aside > h2 { font-size: var(--fs-5); max-width: 18ch; }
.auth-aside > p { color: var(--ink-2); max-width: 52ch; }
.next-steps { display: grid; gap: 0; counter-reset: nstep; border-top: 1px solid var(--line); }
.next-steps li { list-style: none; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.next-steps li::before { counter-increment: nstep; content: "Step " counter(nstep); font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted); padding-top: 2px; }
.next-steps b { display: block; font-weight: 600; color: var(--ink); }
.next-steps span { display: block; color: var(--ink-2); font-size: var(--fs-1); margin-top: 2px; }

.auth-foot-line { border-top: 1px solid var(--line); padding: var(--s-5) 0; font-size: var(--fs-0); color: var(--muted); }
.auth-foot-line .container { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; justify-content: space-between; }
.auth-foot-line nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.auth-foot-line a { color: var(--muted); }
.auth-foot-line a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ */
/* 3. Mini app panels (figures on account pages, app tokens only)      */
/* ------------------------------------------------------------------ */
.mini-app { background: var(--app-canvas); color: var(--app-ink); font-size: 13px; line-height: 1.4; font-stretch: 100%; letter-spacing: 0; padding: clamp(16px, 3vw, 32px); display: grid; place-items: center; }
.mini-app * { min-width: 0; }
.mini-app .app-modal { max-width: 440px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8); }
.mini-app .app-modal h4 { font-size: 14px; }
.mini-head { display: flex; align-items: center; gap: 8px; color: var(--app-mute); font-size: 11.5px; }
.mini-head b { color: var(--app-ink-2); font-weight: 600; }
.mini-head .app-fill { flex: 1; }
.dev { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--app-line); }
.dev:last-of-type { border-bottom: 0; }
.dev b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev small { grid-column: 2 / 4; color: var(--app-mute); font-size: 11.5px; }
.dev .m { color: var(--app-mute); font-size: 11px; font-family: var(--font-mono); white-space: nowrap; }
.plan-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--app-surface-2); }
.plan-row b { font-weight: 700; }
.plan-row .app-fill { flex: 1; }
.plan-row small { color: var(--app-mute); font-size: 11.5px; }
.key-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--app-primary); border-radius: 8px; background: var(--app-surface-2); padding: 7px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--app-ink); }
.key-field .app-fill { flex: 1; }
.key-field span:last-child { color: var(--app-mute); font-family: var(--font-sans); font-size: 11.5px; }
.mini-label { font-size: 11.5px; font-weight: 600; color: var(--app-ink-2); }
.mini-lock { display: flex; align-items: center; gap: 6px; color: var(--app-mute); font-size: 11.5px; }
.mini-lock .ok { color: var(--app-ok); }

/* ------------------------------------------------------------------ */
/* 4. Contact                                                          */
/* ------------------------------------------------------------------ */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.path { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.path h2 { font-size: var(--fs-4); }
.path > p { color: var(--ink-2); font-size: var(--fs-1); max-width: 48ch; }
.path .plan-list { margin-top: 0; }
.path-meta { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; }
.path-meta dl { margin: 0; display: grid; gap: 2px; font-size: var(--fs-0); }
.path-meta dt { color: var(--muted); }
.path-meta dd { margin: 0; font-family: var(--font-mono); color: var(--ink); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-grid .section-head { margin-bottom: var(--s-5); grid-template-columns: 1fr; }
.contact-side { display: grid; gap: var(--s-5); }
.contact-side .strip-list { display: grid; gap: var(--s-4); }
.contact-side .strip-list li { list-style: none; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.contact-side .strip-list b { display: block; font-weight: 600; }
.contact-side .strip-list p { color: var(--ink-2); font-size: var(--fs-1); margin-top: 4px; }
.form-card { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-4); background: var(--surface); }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-fine { font-size: var(--fs-0); color: var(--muted); }

.directory { border-top: 1px solid var(--line); }
.dir-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 150px); gap: var(--s-2) var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dir-row a { font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 500; color: var(--ink); }
.dir-row a:hover { color: var(--primary); }
.dir-row p { color: var(--ink-2); font-size: var(--fs-1); }
.dir-row .sla { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted); }
.dir-row.dir-head { padding-block: var(--s-3); font-size: var(--fs-0); color: var(--muted); font-weight: 600; }
.dir-note { margin-top: var(--s-4); font-size: var(--fs-0); color: var(--muted); }

/* Company facts (contact and about) */
.kv { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.kv dt, .kv dd { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-1); }
.kv dt { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-0); padding-top: calc(var(--s-3) + 2px); }
.kv dd { color: var(--ink); }
.kv dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.kv dd a:hover { color: var(--primary); }

/* ------------------------------------------------------------------ */
/* 5. About                                                            */
/* ------------------------------------------------------------------ */
/* Company head: the logo file at 2x its 28 px drawing (whole pixels stay whole), then the statement */
.company-head .company-lockup { display: block; width: auto; height: 56px; max-width: 100%; }
.company-head h1 { margin-top: clamp(32px, 4vw, 48px); }

/* Our products: one product card, one in-development slot */
.products { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--s-5); align-items: stretch; }
.product-card { display: grid; gap: var(--s-5); align-content: start; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.product-card-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; }
.product-card-head img { width: 48px; height: 48px; }
.product-card h3 { font-size: var(--fs-4); line-height: 1.15; }
.product-card-meta { margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted); }
.product-card > p { color: var(--ink-2); max-width: 60ch; }
.product-card-links { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.product-card-links li { list-style: none; }
.product-card-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink); font-size: var(--fs-1); font-weight: 500; }
.product-card-links a:hover { border-color: var(--muted); background: var(--raised); text-decoration: none; }
.product-card-next { background: transparent; border: 1px dashed var(--line-strong); align-content: center; justify-items: start; gap: var(--s-3); }
.product-card-next h3 { font-size: var(--fs-3); color: var(--ink-2); }
.product-card-next p { color: var(--muted); font-size: var(--fs-1); max-width: 34ch; }
.product-card-slot { width: 48px; height: 48px; border: 1px dashed var(--line-strong); border-radius: 12px; margin-bottom: var(--s-2); }
.product-card-wide { grid-column: 1 / -1; }
.story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.story h2 { font-size: var(--fs-5); max-width: 16ch; }
.story-side { display: grid; gap: var(--s-6); position: sticky; top: 104px; }
.story .story-body p { color: var(--ink-2); max-width: 62ch; }
.story .story-body p:first-child { font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-7); border-top: 1px solid var(--line); }
.belief { padding: var(--s-5) 0 var(--s-6); border-bottom: 1px solid var(--line); display: grid; gap: var(--s-2); }
.belief h3 { font-size: var(--fs-3); }
.belief p { color: var(--ink-2); font-size: var(--fs-1); max-width: 54ch; }
.belief .in-app { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted); margin-top: var(--s-2); }
.work-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.work-list li { list-style: none; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.work-list b { font-weight: 600; }
.work-list p { color: var(--ink-2); font-size: var(--fs-1); }
.side-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.side-note { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); display: grid; gap: var(--s-2); align-content: start; }
.side-note h3 { font-size: var(--fs-2); letter-spacing: -0.01em; }
.side-note p { color: var(--ink-2); font-size: var(--fs-1); }

/* ------------------------------------------------------------------ */
/* 6. Legal                                                            */
/* ------------------------------------------------------------------ */
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.legal-nav a { font-size: var(--fs-0); font-weight: 600; color: var(--ink-2); padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.legal-nav a:hover { color: var(--ink); border-color: var(--muted); text-decoration: none; }
.legal-nav a[aria-current="page"] { color: var(--canvas); background: var(--ink); border-color: var(--ink); }
.legal-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted); }
.legal-meta b { color: var(--ink-2); font-weight: 500; }

.legal { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; padding-bottom: var(--section); }
.toc { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow: auto; padding-right: var(--s-2); }
.toc h2 { font-size: var(--fs-0); font-weight: 600; color: var(--ink); letter-spacing: 0; margin-bottom: var(--s-3); font-stretch: 100%; }
.toc ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc li { list-style: none; }
.toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px; padding: 5px 0 5px 12px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); font-size: var(--fs-0); line-height: 1.45; }
.toc a span { font-family: var(--font-mono); }
.toc a:hover { color: var(--ink); text-decoration: none; border-left-color: var(--muted); }
.toc a.is-current { color: var(--ink); border-left-color: var(--primary); }

.legal .prose { max-width: 70ch; }
.legal .prose > h2:first-of-type { margin-top: var(--s-6); }
.legal .prose h2 { scroll-margin-top: 88px; display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: baseline; }
.legal .prose h2 .n { font-family: var(--font-mono); font-size: 0.62em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.legal .prose h3 { font-size: var(--fs-2); letter-spacing: -0.01em; }
.legal .prose p + p, .legal .prose p + ul, .legal .prose ul + p, .legal .prose p + ol, .legal .prose ol + p { margin-top: var(--s-3); }
.legal .prose .table-wrap + p { margin-top: var(--s-4); }
.legal .prose li::marker { color: var(--muted); }
.legal .prose a { text-decoration: underline; text-decoration-color: rgba(157, 184, 236, 0.4); text-underline-offset: 0.2em; }
.legal .prose strong { color: var(--ink); }
.legal .prose .table-wrap { margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); }
.legal .prose .table-wrap table { margin-top: 0; }
.legal .prose thead th { background: var(--surface); font-size: var(--fs-0); }
.legal .prose td code { color: var(--ink); }
.legal .prose tr:last-child td { border-bottom: 0; }
.short-version { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.legal .prose .short-version h2 { font-size: var(--fs-2); margin: 0 0 var(--s-2); display: block; letter-spacing: -0.01em; }
.short-version ul { margin-top: var(--s-2); }
.legal .prose .short-version p { margin-top: var(--s-3); font-size: var(--fs-0); color: var(--muted); }
.legal-end { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-0); color: var(--muted); display: grid; gap: 6px; }

/* ------------------------------------------------------------------ */
/* 7. Not found                                                        */
/* ------------------------------------------------------------------ */
.nf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(40px, 7vw, 112px); align-items: center; padding-block: clamp(56px, 9vw, 128px); }
.nf .label { display: block; margin-bottom: var(--s-4); }
.nf h1 { font-size: var(--fs-6); max-width: 14ch; }
.nf .lead { margin-top: var(--s-4); max-width: 46ch; }
.nf-links { margin-top: var(--s-6); border-top: 1px solid var(--line); max-width: 520px; }
.nf-links li { list-style: none; border-bottom: 1px solid var(--line); }
.nf-links a { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding: var(--s-3) var(--s-2); margin-inline: calc(var(--s-2) * -1); border-radius: var(--r-1); color: var(--ink); }
.nf-links a:hover { background: var(--surface); text-decoration: none; }
.nf-links a b { font-weight: 600; }
.nf-links a span { color: var(--muted); font-size: var(--fs-1); }
.nf-links a i { font-style: normal; color: var(--muted); }
.nf-links a:hover i { color: var(--ink); }
.nf-cell { width: 100%; max-width: 420px; }
.nf-cell .cell-b { gap: 10px; }
.nf-cell .app-find { margin-bottom: 0; }
.nf-empty { padding: 18px 10px; text-align: center; color: var(--app-mute); border: 1px dashed var(--app-line); border-radius: 10px; font-size: 12.5px; }
.nf-empty b { display: block; color: var(--app-ink-2); font-weight: 600; margin-bottom: 2px; }

/* ------------------------------------------------------------------ */
/* 8. Responsive                                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .legal { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .dir-row { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .dir-row .sla { grid-column: 2; text-align: left; }
  .dir-row.dir-head span:last-child { display: none; }
}
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; justify-items: center; }
  .auth-split .auth-card { max-width: 480px; }
  .auth-aside { max-width: 480px; width: 100%; }
  .auth-aside .fig { display: none; }
  .auth-aside-hide-sm { display: none; }
  .paths, .contact-grid, .story, .beliefs, .side-notes, .nf, .products { grid-template-columns: 1fr; }
  .legal { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
  .toc ol { border-left: 0; }
  .toc a { padding-left: 0; border-left: 0; margin-left: 0; }
  .work-list li { grid-template-columns: 1fr; }
  .story-side { display: contents; }
  .story-side .fig { order: 3; }
  .nf-figure { order: 2; }
}
@media (max-width: 600px) {
  .auth-header .site-actions .btn-ghost { display: none; }
  .auth-card { padding: var(--s-5); }
  .product-card { padding: var(--s-5); }
  .product-card-head { grid-template-columns: 40px minmax(0, 1fr); }
  .product-card-head img { width: 40px; height: 40px; }
  .product-card-state { grid-column: 2; justify-self: start; }
  .auth-split, .auth-solo { padding-block: var(--s-6) var(--s-7); }
  .form-2 { grid-template-columns: 1fr; }
  .form-card, .path { padding: var(--s-5); }
  .dir-row { grid-template-columns: 1fr; gap: 4px; }
  .dir-row .sla { grid-column: 1; }
  .dir-row.dir-head { display: none; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { border-bottom: 0; padding-bottom: 0; }
  .kv dd { padding-top: 2px; }
  .nf-links a { grid-template-columns: minmax(0, 1fr) auto; }
  .nf-links a span { grid-column: 1; grid-row: 2; }
  .nf-links a i { grid-row: 1 / 3; grid-column: 2; align-self: center; }
  .auth-foot-line .container { flex-direction: column; align-items: flex-start; }
  .legal .prose h2 { grid-template-columns: 2em minmax(0, 1fr); }
}