/* KTMY v5 public documents and install guidance. */

@layer routes {
  .public-page {
    --document-bg: var(--canvas, #edf1f4);
    --document-surface: var(--surface, #fff);
    --document-ink: var(--text, #18232e);
    --document-muted: var(--text-muted, #5d6b77);
    --document-line: var(--line, #cbd4dc);
    --document-blue: var(--action, #0d5ecf);
    --document-rail: #10283e;

    min-height: 100%;
    margin: 0;
    background: var(--document-bg);
    color: var(--document-ink);
  }

  html[data-theme="dark"] .public-page {
    --document-bg: var(--canvas, #101923);
    --document-surface: var(--surface, #172532);
    --document-ink: var(--text, #eef4f7);
    --document-muted: var(--text-muted, #a4b3be);
    --document-line: var(--line, #344856);
    --document-blue: var(--action, #66a7f4);
    --document-rail: #0b1a29;
  }

  .public-page,
  .public-page * { box-sizing: border-box; }
  .public-page a { color: inherit; }
  .public-page .ui-icon { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.16em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .public-page [data-icon] { width: 1.05em; height: 1.05em; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; vertical-align: -.16em; }
  .public-page [data-icon] .ui-icon { width: 100%; height: 100%; }
  .public-page .skip-link { position: fixed; z-index: 100; top: 0; left: 1rem; transform: translateY(-140%); padding: .65rem .9rem; background: var(--document-blue); color: #fff; font-weight: 700; text-decoration: none; transition: transform 180ms ease; }
  .public-page .skip-link:focus { transform: translateY(.5rem); }

  .public-header { background: var(--document-rail); color: #f5f8fb; border-bottom: 1px solid rgb(255 255 255 / .16); }
  .public-header-inner { width: min(1160px, calc(100% - 2.5rem)); min-height: 70px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .public-brand { display: inline-flex; align-items: center; gap: .6rem; color: #f5f8fb; font-weight: 760; text-decoration: none; }
  .public-brand img { width: 30px; height: 30px; display: block; }
  .public-brand-name { font-size: .97rem; letter-spacing: .02em; }
  .public-brand-section { padding-left: .6rem; border-left: 1px solid rgb(255 255 255 / .28); color: #b5c5d2; font-size: .73rem; }
  .public-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
  .public-nav a { display: inline-flex; align-items: center; gap: .38rem; padding: .52rem .65rem; border: 1px solid transparent; border-radius: 3px; color: #b5c5d2; font-size: .76rem; font-weight: 650; text-decoration: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
  .public-nav a:hover,
  .public-nav a:focus-visible,
  .public-nav a[aria-current="page"] { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .08); color: #fff; }
  .public-nav .theme-toggle { min-height: 2.25rem; padding: .48rem .65rem; border-color: rgb(255 255 255 / .2); border-radius: 3px; background: transparent; color: #d5e0e8; font-size: .76rem; }
  .public-nav .theme-toggle:hover { border-color: rgb(255 255 255 / .34); background: rgb(255 255 255 / .08); color: #fff; }

  .public-main { width: min(1160px, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(3rem, 8vw, 6.8rem) 0 6rem; }
  .public-document { display: grid; grid-template-columns: minmax(180px, .24fr) minmax(0, .76fr); gap: clamp(2rem, 8vw, 7rem); align-items: start; }
  .public-document-aside { position: sticky; top: 95px; }
  .public-aside-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--document-blue); border-radius: 50%; color: var(--document-blue); }
  .public-aside-mark .ui-icon { width: 1.25rem; height: 1.25rem; }
  .public-aside-title { margin: 1rem 0 0; color: var(--document-ink); font-size: 1.15rem; letter-spacing: -.03em; }
  .public-aside-copy { margin: .55rem 0 0; color: var(--document-muted); font-size: .78rem; line-height: 1.5; }
  .public-aside-links { display: grid; gap: .35rem; margin: 1.7rem 0 0; padding-top: 1rem; border-top: 1px solid var(--document-line); }
  .public-aside-links a { color: var(--document-muted); font-size: .76rem; text-decoration: none; }
  .public-aside-links a:hover,
  .public-aside-links a:focus-visible { color: var(--document-blue); }

  .public-document-body { min-width: 0; }
  .public-document-header { padding-bottom: 2rem; border-bottom: 2px solid var(--document-ink); }
  .public-eyebrow { margin: 0 0 .75rem; color: var(--document-blue); font-size: .7rem; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
  .public-document-header h1 { max-width: 14ch; margin: 0; color: var(--document-ink); font-size: clamp(2.7rem, 6vw, 5.2rem); letter-spacing: -.07em; line-height: .94; text-wrap: balance; }
  .public-document-date { margin: 1.2rem 0 0; color: var(--document-muted); font-size: .75rem; }
  .public-prose { max-width: 72ch; padding-top: 2rem; color: var(--document-ink); font-size: 1rem; line-height: 1.76; }
  .public-prose h2 { margin: 2.8rem 0 .8rem; padding-top: .8rem; border-top: 1px solid var(--document-line); color: var(--document-ink); font-size: 1.35rem; letter-spacing: -.035em; line-height: 1.15; }
  .public-prose h2:first-child { margin-top: 0; }
  .public-prose p { margin: 0 0 1.1rem; }
  .public-prose ul { margin: 0 0 1.25rem; padding-left: 1.35rem; }
  .public-prose li { margin: .35rem 0; padding-left: .2rem; }
  .public-prose a { color: var(--document-blue); text-decoration-thickness: .08em; text-underline-offset: .18em; }
  .public-prose strong { font-weight: 750; }
  .public-prose .document-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--document-line); color: var(--document-muted); font-size: .76rem; }

  .about-lede { max-width: 60ch; margin: 0; color: var(--document-muted); font-size: 1.08rem; line-height: 1.6; }
  .about-lede strong { color: var(--document-ink); }
  .about-sections { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
  .about-section { padding-top: 1.4rem; border-top: 1px solid var(--document-line); }
  .about-section h2 { margin: 0 0 .55rem; color: var(--document-ink); font-size: 1.35rem; letter-spacing: -.035em; }
  .about-section p { max-width: 68ch; margin: 0; color: var(--document-muted); line-height: 1.65; }
  .about-repositories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
  .about-repository { padding: 1rem 0; border-top: 2px solid var(--document-blue); }
  .about-repository h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .45rem; color: var(--document-ink); font-size: .96rem; }
  .about-repository h3 .ui-icon { color: var(--document-blue); }
  .about-repository p { color: var(--document-muted); font-size: .86rem; line-height: 1.55; }
  .about-sources { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--document-muted); font-size: .86rem; line-height: 1.7; }
  .about-independence { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--document-line); color: var(--document-muted); font-size: .77rem; }

  .install-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .44fr); gap: 3rem; align-items: end; padding-bottom: 2rem; border-bottom: 2px solid var(--document-ink); }
  .install-hero h1 { max-width: 12ch; margin: 0; color: var(--document-ink); font-size: clamp(2.7rem, 6vw, 5.2rem); letter-spacing: -.07em; line-height: .94; }
  .install-hero p:not(.public-eyebrow) { max-width: 45ch; margin: 1.3rem 0 0; color: var(--document-muted); line-height: 1.6; }
  .install-qr { justify-self: end; width: min(100%, 220px); padding: 1rem; border: 1px solid var(--document-line); background: var(--document-surface); }
  .install-qr img { width: 100%; height: auto; display: block; }
  .install-qr figcaption { margin-top: .65rem; color: var(--document-muted); font-size: .72rem; line-height: 1.4; }
  .install-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
  .install-preview { display: grid; grid-template-columns: minmax(15rem, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin: 3rem 0 0; padding: clamp(1.25rem, 4vw, 3.5rem); border: 1px solid var(--document-line); background: var(--document-surface); }
  .install-preview picture { display: block; max-height: 36rem; overflow: hidden; background: var(--document-rail); }
  .install-preview img { width: 100%; height: 100%; max-height: 36rem; object-fit: cover; object-position: center 28%; }
  .install-preview figcaption { max-width: 36rem; }
  .install-preview h2 { max-width: 14ch; margin: 0; color: var(--document-ink); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.06em; line-height: 1; }
  .install-preview figcaption > p:last-child { margin: 1rem 0 0; color: var(--document-muted); line-height: 1.65; }
  .public-page .document-button { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .6rem .85rem; border: 1px solid var(--document-blue); border-radius: 3px; background: var(--document-blue); color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; }
  html[data-theme="dark"] .public-page .document-button { color: #07101f; }
  .document-button:hover { background: color-mix(in srgb, var(--document-blue) 84%, #000); }
  .public-page .document-button-quiet, html[data-theme="dark"] .public-page .document-button-quiet { background: transparent; color: var(--document-blue); }
  .document-button-quiet .ui-icon { transform: rotate(180deg); }
  .install-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
  .install-guide { padding-top: 1rem; border-top: 2px solid var(--document-line); }
  .install-guide h2 { margin: 0 0 .65rem; color: var(--document-ink); font-size: 1.1rem; }
  .install-guide ol { margin: 0; padding-left: 1.2rem; color: var(--document-muted); font-size: .84rem; line-height: 1.6; }
  .install-guide li { margin: .45rem 0; padding-left: .2rem; }
  .install-note { margin-top: 2.5rem; padding: 1rem; border-left: 3px solid var(--document-blue); background: var(--document-surface); color: var(--document-muted); font-size: .8rem; line-height: 1.5; }

  .public-footer { background: var(--document-rail); color: #b5c5d2; }
  .public-footer-inner { width: min(1160px, calc(100% - 2.5rem)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .public-footer p { margin: 0; font-size: .76rem; }
  .public-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
  .public-footer-links a { color: #d5e0e8; font-size: .75rem; text-decoration: none; }
  .public-footer-links a:hover,
  .public-footer-links a:focus-visible { color: #fff; text-decoration: underline; }
  .public-page :focus-visible { outline: 3px solid color-mix(in srgb, var(--document-blue) 72%, #fff); outline-offset: 3px; }

  @media (max-width: 820px) {
    .public-header-inner { width: min(100% - 1.4rem, 1160px); align-items: flex-start; flex-direction: column; gap: .7rem; padding: .8rem 0; }
    .public-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; }
    .public-nav a { white-space: nowrap; }
    .public-main { width: min(100% - 1.4rem, 1160px); padding-top: 3rem; }
    .public-document { grid-template-columns: 1fr; gap: 2rem; }
    .public-document-aside { position: static; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; }
    .public-aside-title { margin: 0; }
    .public-aside-copy { grid-column: 2; margin: .2rem 0 0; }
    .public-aside-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
    .install-hero { grid-template-columns: 1fr; gap: 2rem; }
    .install-qr { justify-self: start; width: 170px; }
    .install-preview { grid-template-columns: 1fr; gap: 1.5rem; }
    .install-preview picture { max-height: 26rem; }
    .install-guides { grid-template-columns: 1fr; gap: 1.6rem; }
    .about-repositories { grid-template-columns: 1fr; }
    .public-footer-inner { width: min(100% - 1.4rem, 1160px); align-items: flex-start; flex-direction: column; padding: 1.3rem 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .public-page *,
    .public-page *::before,
    .public-page *::after { animation-duration: .01ms; transition-duration: .01ms; scroll-behavior: auto; }
  }
}

.public-page .public-nav .theme-toggle,
.public-page .document-button {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.public-page .public-nav .theme-toggle:active,
.public-page .document-button:active { transform: translateY(1px); }