/* Kiuas public pages: features, about, guide, privacy, terms, status and 404.
   Loaded after kiuas-site.css, which supplies the tokens, header, footer and buttons.
   The build renames the pages' hero/content/section/steps classes to pub-* and doc-steps
   so they don't pick up the homepage rules of the same name. */

.k-public main a { color: var(--copper-text); }
.k-public main a:hover { color: var(--copper-hover); }
.k-public main strong { color: var(--ink); }
.k-public .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.eyebrow, .chapter { margin: 0 0 12px; color: var(--copper-text); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Features and About */
.pub-hero { max-width: 960px; margin: 0 auto; padding: 88px 28px 48px; }
.pub-hero h1 { max-width: 18em; margin: 0; font-size: clamp(38px, 5.6vw, 60px); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; }
.pub-hero .lead { max-width: 40em; margin: 22px 0 0; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.pub-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.k-public .action { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; transition: background var(--dur-fast), border-color var(--dur-fast); }
.k-public .action:hover { background: var(--hover); border-color: var(--line-strong); color: var(--ink); }
.k-public .action.primary { background: var(--copper); border-color: var(--copper); color: var(--on-copper); }
.k-public .action.primary:hover { background: var(--copper-hover); border-color: var(--copper-hover); color: var(--on-copper); }

.pub-content { max-width: 960px; margin: 0 auto; padding: 8px 28px 96px; }
.pub-section { padding: 48px 0; border-top: 1px solid var(--line); }
.pub-section h2 { margin: 0 0 14px; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
.pub-section h3 { margin: 28px 0 8px; font-size: 18px; }
.pub-section p, .pub-section li { color: var(--ink-2); font-size: 16px; line-height: 1.7; }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 48px; }
.feature-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-1); transition: border-color var(--dur-fast); }
.feature-card:hover { border-color: var(--line-strong); }
.feature-card h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.01em; font-weight: 600; }
.feature-card p { flex: 1; margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.feature-card a { font-weight: 600; text-decoration: none; }

.identity { display: grid; grid-template-columns: 160px 1fr; gap: 36px; align-items: center; }
.identity > img { width: 160px; height: 160px; object-fit: contain; }
.fact-list { margin: 16px 0 0; padding: 0; list-style: none; }
.fact-list li { padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* Privacy and Terms */
.k-legal main { max-width: 820px; margin: 0 auto; padding: 72px 28px 104px; }
.legal-heading { margin-bottom: 44px; }
.legal-heading h1 { margin: 0; font-size: clamp(36px, 5vw, 48px); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.legal-heading p { max-width: 38em; margin: 14px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.effective { margin: 0 0 40px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--copper-text); font-size: 13px; font-weight: 700; }
.legal-body h2 { margin: 44px 0 12px; font-size: 20px; letter-spacing: -.01em; font-weight: 600; }
.legal-body p, .legal-body li { color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.legal-body ul { padding-left: 22px; }
.legal-body li + li { margin-top: 6px; }
.legal-body code { font-size: 13px; }

/* User guide. docs.css keeps the layout; these map its colors onto the Kiuas tokens. */
.k-docs {
  --bg: var(--page); --text: var(--ink); --muted: var(--ink-2); --accent: var(--copper-text);
  --accent-soft: var(--copper-soft); --sidebar: var(--surface); --shadow: var(--shadow-2);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
}
.k-docs .site-header { border-bottom-color: var(--line); background: var(--page); }
.k-docs .docs-search-wrap { top: 69px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--page) 94%, transparent); border-bottom-color: var(--line); }
.k-docs .docs-search { flex: 1; border-color: var(--line-strong); border-radius: var(--radius-m); background: var(--surface); }
.k-docs .docs-search:focus-within { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-soft); }
.k-docs .docs-search input, .k-docs .docs-search kbd, .k-docs .toc-toggle { font-family: inherit; }
.k-docs .search-results { top: 72px; }
.k-docs .sidebar-scroll { top: 148px; height: calc(100vh - 164px); }
.k-docs .toc-group { color: var(--ink-3); }
.k-docs .doc-topic p, .k-docs .steps-note { color: var(--ink-2); }
.k-docs .doc-topic h1, .k-docs .doc-topic h2 { font-weight: 600; }
.k-docs .doc-topic code { border-color: var(--line); background: var(--sunken); color: var(--copper-text); font-weight: 500; }
.k-docs .intro-links a { color: var(--ink); border-radius: var(--radius-m); }
.k-docs .intro-links a:hover { border-color: var(--line-strong); background: var(--hover); }
.k-docs .doc-steps { counter-reset: item; padding: 0; margin: 24px 0; list-style: none; }
.k-docs .doc-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; }
.k-docs .doc-steps li::before { counter-increment: item; content: counter(item); grid-row: 1 / span 2; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--copper-text); font-size: 12px; font-weight: 700; }
.k-docs .doc-steps strong, .k-docs .doc-steps span { display: block; grid-column: 2; }
.k-docs .doc-steps span { margin-top: 2px; color: var(--ink-2); font-size: 14px; }
.k-docs .toc-toggle { display: none; margin-left: 0; height: 44px; padding: 0 14px; border-color: var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); }
.k-docs .toc-backdrop { background: rgb(0 0 0 / .45); }
@media (max-width: 860px) {
  .k-docs .docs-search-wrap { top: 69px; }
  .k-docs .toc-toggle { display: block; }
  .k-docs .search-results { top: 64px; }
}

/* Status */
.k-status main { max-width: 960px; margin: 0 auto; padding: 72px 28px 104px; }
.status-hero { display: flex; align-items: center; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-1); }
.status-hero h1 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.status-hero p { margin: 6px 0 0; color: var(--ink-2); }
.status-light { position: relative; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--line-strong); }
.status-light[data-state="ok"] { background: var(--ok); }
.status-light[data-state="warn"] { background: var(--warn); }
.status-light[data-state="down"] { background: var(--danger); }
.status-light[data-state="ok"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; animation: status-ping 2.4s var(--ease-out) infinite; }
@keyframes status-ping { 0% { opacity: .6; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.4); } }
.status-section { margin-top: 40px; }
.status-section h2 { margin: 0 0 14px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.status-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.status-list li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.status-list li + li { border-top: 1px solid var(--line); }
.status-list .name { font-weight: 600; }
.status-list .why { display: block; margin-top: 2px; color: var(--ink-3); font-size: 14px; font-weight: 400; }
.status-list .state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.status-list .state .status-light { width: 10px; height: 10px; }
.status-list .state .status-light::after { display: none; }
.status-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.status-facts div { padding: 20px; min-width: 0; }
.status-facts div + div { border-left: 1px solid var(--line); }
.status-facts dt { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.status-facts dd { margin: 6px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.status-note { margin: 18px 0 0; color: var(--ink-3); font-size: 14px; }

/* 404 */
.k-404 main { max-width: 640px; margin: 0 auto; padding: 120px 28px 140px; text-align: center; }
.k-404 main img { width: 96px; height: 96px; margin: 0 auto; }
.k-404 h1 { margin: 20px 0 10px; font-size: clamp(32px, 5vw, 44px); font-weight: 600; letter-spacing: -.03em; }
.k-404 p { color: var(--ink-2); }
.k-404 .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

@media (max-width: 760px) {
  .pub-hero { padding: 56px 20px 36px; }
  .pub-content, .k-legal main, .k-status main { padding-left: 20px; padding-right: 20px; }
  .k-legal main, .k-status main { padding-top: 48px; }
  .feature-grid, .identity { grid-template-columns: 1fr; }
  .identity > img { width: 120px; height: 120px; }
  .status-hero { padding: 22px; }
  .status-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-facts div:nth-child(3) { border-left: 0; }
  .status-facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .status-list li { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .status-light[data-state="ok"]::after { animation: none; }
}

/* Dev builds stamp <body> with .dev-env. Same watermark as the homepage. */
.dev-env::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='90'%3E%3Ctext x='8' y='33' transform='rotate(-18 8 33)' fill='%23888888' font-family='Arial' font-size='15' font-weight='700'%3Edev%3C/text%3E%3C/svg%3E"); }
:root[data-hide-watermark="1"] .dev-env::after, :root[data-production-preview] .dev-env::after { display: none; }