/* KhianMe / writing, with a point of view.
 * Shared identity, loaded after the route's structural stylesheet.
 * White remains the ground. Colour identifies a purpose, never a claim.
 * See BRAND.md for the palette, typography and motion rules. */
:root {
  --brand-blue: #eef4fc;
  --brand-blue-ink: #365c8a;
  --brand-blue-line: #c5d7ec;
  --brand-lilac: #f2eef8;
  --brand-lilac-ink: #655180;
  --brand-lilac-line: #d6c9e7;
  --brand-warm: #faf2e8;
  --brand-warm-ink: #805a31;
  --brand-warm-line: #e8d4b9;
  --brand-ease: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-blue: #192737;
    --brand-blue-ink: #adc9ed;
    --brand-blue-line: #344c67;
    --brand-lilac: #2a2335;
    --brand-lilac-ink: #d1bce8;
    --brand-lilac-line: #514160;
    --brand-warm: #30281e;
    --brand-warm-ink: #e0bd8e;
    --brand-warm-line: #5d4930;
  }
}
:root[data-theme="dark"] {
  --brand-blue: #192737;
  --brand-blue-ink: #adc9ed;
  --brand-blue-line: #344c67;
  --brand-lilac: #2a2335;
  --brand-lilac-ink: #d1bce8;
  --brand-lilac-line: #514160;
  --brand-warm: #30281e;
  --brand-warm-ink: #e0bd8e;
  --brand-warm-line: #5d4930;
}
::selection { background: var(--brand-lilac-line); color: var(--ink); }
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
:where(h1, h2, h3, p, li, dd) { overflow-wrap: break-word; }
:where(main section[id], main details[id]) { scroll-margin-top: 6.5rem; }
.brand { gap: .5rem; letter-spacing: -.035em; }
.brand .brand-mark { width: 30px; height: 30px; }
.brand .brand-mark rect { fill: var(--accent-soft); }
.brand .brand-mark path { stroke: var(--accent-ink); }
.brand .brand-mark circle { fill: var(--brand-lilac-ink); }
.brand > span { margin-left: -.42rem; font-weight: 300; }
.nav-wrap { background: color-mix(in srgb, var(--surface) 94%, transparent); }
.nav-links a[aria-current="page"] { color: var(--accent-ink); }
.site-head nav .small-cta { background: var(--accent); color: var(--ground); }
.eyebrow { letter-spacing: .1em; }
:where(.price-intro, .docs-intro, .legal-main, .login-auth-inner) > .eyebrow {
  display: flex; align-items: center; gap: .7rem; color: var(--muted);
}
:where(.price-intro, .docs-intro, .legal-main, .login-auth-inner) > .eyebrow::before {
  content: ''; width: 1.3rem; height: .35rem; flex: none;
  border-radius: 4px; background: var(--accent);
  box-shadow: .3rem -.2rem 0 var(--brand-lilac-line);
}
.button { border-radius: .8rem; }
.small-cta { border-radius: .7rem; }
.button:not(.button--ghost):not(.button--quiet):not(.button--danger):not(.google-button) {
  background: var(--accent); color: var(--ground);
}
footer { background: var(--raise); border-top: 1px solid var(--line-soft); }

/* The same source / result colours connect the landing demo to the editor. */
.home-page .window-symbol i:nth-child(1) { background: var(--accent); opacity: .65; }
.home-page .window-symbol i:nth-child(2) { background: var(--brand-lilac-ink); opacity: .6; }
.home-page .window-symbol i:nth-child(3) { background: var(--brand-blue-ink); opacity: .6; }
.home-page .example-source { background: var(--brand-blue); }
.home-page .example-source .demo-label { color: var(--brand-blue-ink); }
.home-page .example-source mark { background-image: linear-gradient(var(--brand-blue-line), var(--brand-blue-line)); }
.home-page .brand-notebook { background: var(--surface); border-color: var(--brand-lilac-line); box-shadow: 8px 8px 0 var(--brand-lilac); }
.home-page .notebook-head { background: var(--brand-lilac); border-color: var(--brand-lilac-line); }
.home-page .notebook-icon { border-color: var(--brand-lilac-ink); }
.home-page .voice-row > b { color: var(--brand-lilac-ink); }
.home-page .word-tokens:not(.word-tokens--avoid) > span { background: var(--brand-lilac); color: var(--brand-lilac-ink); }
.home-page .workflow-number { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }
.home-page .workflow-steps li:nth-child(2) .workflow-number { color: var(--brand-blue-ink); background: var(--brand-blue); }
.home-page .workflow-steps li:nth-child(3) .workflow-number { color: var(--brand-lilac-ink); background: var(--brand-lilac); }
.home-page .privacy-facts article { border-color: var(--line); }

/* Pricing: one reading order, four equally factual packages. */
.price-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 5rem); row-gap: 0; }
.price-intro > :is(.eyebrow, h1, .lede) { grid-column: 1; }
.price-intro h1 { font-size: clamp(2.5rem, 4.3vw, 3.9rem); line-height: 1.22; }
.price-intro .lede { font-size: 1rem; line-height: 1.85; margin-top: 1.5rem; }
.price-intro .size-table { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: 0; background: var(--brand-blue); border-radius: 1.2rem; padding: 1.2rem; border-collapse: separate; border-spacing: 0; }
.size-table caption { background: var(--brand-blue); border-radius: 1.2rem 1.2rem 0 0; padding: 1.2rem 1.7rem .1rem; color: var(--brand-blue-ink); }
.price-intro .size-table { border-radius: 0 0 1.2rem 1.2rem; }
.price-intro .size-table th { width: 58%; line-height: 1.8; font-size: .88rem; }
.price-intro .size-table td { font-size: .8rem; }
.price-intro .size-table td:last-child { color: var(--brand-blue-ink); }
.price-intro .size-table tr:first-child > * { border-top: 0; }
.price-intro .price-note { grid-column: 2; font-size: .82rem; line-height: 1.75; margin-top: .8rem; }
.price-table { gap: 1rem; }
.tier { position: relative; border-radius: 1.1rem; overflow: hidden; padding: 2rem 1.4rem 1.6rem; background: var(--surface); }
.tier::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--accent-soft); }
.tier:nth-child(2)::before { background: var(--brand-blue-line); }
.tier:nth-child(3)::before { background: var(--brand-lilac-line); }
.tier:nth-child(4)::before { background: var(--brand-warm-line); }
.tier--lead { border-color: var(--line); }
.tier-head h2 { font-weight: 600; font-size: 1.2rem; }
.tier-price { margin-top: 1.7rem; flex-wrap: wrap; }
.tier-price span, .tier-price b { white-space: nowrap; }
.tier-price b { font-size: clamp(2.4rem, 3.3vw, 2.8rem); }
.tier-tag { color: var(--brand-lilac-ink); background: var(--brand-lilac); }
.tier-unit { border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; }
.tier-list { margin-top: .7rem; }
.price-compare thead { background: var(--brand-blue); }
.price-compare thead th { color: var(--brand-blue-ink); }
.price-compare tbody tr:hover { background: var(--raise); }
.price-faq { display: grid; grid-template-columns: 1fr 1.65fr; gap: 2rem; align-items: start; }
.price-faq .faq-list { width: 100%; }
.price-cta { padding-top: 3rem; }

/* Documentation: an ink-blue index and generous, quiet reading cards. */
.docs-intro h1 { line-height: 1.22; }
.docs-intro .sketch { color: var(--accent); }
.docs .agent-card { background: var(--brand-blue); border-left: 0; border-top: 3px solid var(--brand-blue-line); }
.docs .agent-card .eyebrow { color: var(--brand-blue-ink); }
.docs .agent-card h2 { font-size: 1.65rem; }
.docs .agent-card p:last-child { font-size: .94rem; line-height: 1.85; color: var(--ink-soft); }
.docs .toc { border-top: 0; gap: .2rem; }
.docs .toc a { padding: .65rem .85rem; border: 0; border-radius: .7rem; line-height: 1.65; }
.docs .toc a:hover, .docs .toc a[aria-current="location"] { color: var(--brand-blue-ink); background: var(--brand-blue); }
.docs section { border-top: 1px solid var(--line-soft); padding-top: 2rem; scroll-margin-top: 5rem; }
.docs section > .eyebrow { color: var(--brand-blue-ink); }
.docs pre { background: var(--raise); border-radius: 1rem; border-left: 3px solid var(--brand-blue-line); }
.docs .tool-card { border-radius: 1rem; box-shadow: 0 3px 0 var(--raise); }
.docs .tool-card h3 { color: var(--accent-ink); }
.docs .limit-list li { border-left: 3px solid var(--brand-lilac-line); background: var(--brand-lilac); box-shadow: none; }
.docs .scope-grid article { background: var(--raise); }

/* Policies keep their complete legal text. Only the reading surface changes. */
.legal-main { max-width: 57rem; }
.legal-main h1 { max-width: 100%; line-height: 1.25; }
.legal-main h2 { border-top: 1px solid var(--line-soft); padding-top: 1.5rem; margin-top: 2.5rem; }
.legal-main p, .legal-main li { max-width: 100%; }
.legal-main > p + p { margin-top: .85rem; }
.legal-main a { text-underline-offset: .23em; text-decoration-thickness: 1px; }
.legal-alert { background: var(--brand-warm); border-left-color: var(--brand-warm-line); }
.legal-index { --public-shell: 70rem; }
.legal-index .legal-main { max-width: var(--public-shell); }
.legal-index .legal-main > p { max-width: 43rem; }
.legal-index .legal-alert { max-width: 43rem; }
.legal-index .legal-documents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; }
.legal-documents li { position: relative; border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; font-size: .88rem; background: var(--surface); }
.legal-documents li::before { content: ''; display: block; width: 2rem; height: 2.5rem; border: 1px solid var(--brand-blue-line); border-radius: .3rem .75rem .3rem .3rem; background: var(--brand-blue); margin-bottom: 1.5rem; box-shadow: inset 0 -.55rem 0 var(--surface); }
.legal-documents li:nth-child(2)::before { background: var(--accent-soft); border-color: var(--accent); }
.legal-documents li:nth-child(3)::before { background: var(--brand-lilac); border-color: var(--brand-lilac-line); }
.legal-documents a { display: block; color: var(--ink); font: 600 1.1rem/1.6 var(--display); text-decoration: none; margin-bottom: .75rem; }
.legal-documents a::after { content: ''; position: absolute; inset: 0; border-radius: 1rem; }
.legal-documents li:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Workspace: white editing surfaces, colour only in the headers and tools.
   The brown app-section rule remains the app's structural landmark. */
.app-page .pg { max-width: 120rem; margin-inline: auto; }
.app-section-tab, .app-section-link { background: var(--raise); }
.app-section-tab[aria-selected="true"] { background: var(--brand-warm); }
.app-section-tab .app-section-kicker, .app-section-link .app-section-kicker { order: 1; font-size: .57rem; letter-spacing: .09em; margin-top: .18rem; }
.pg-pane, .pg-rail { border-radius: 1rem; }
[data-workspace-panel="draft"] > .pg-pane-head { background: var(--brand-blue); border-bottom-color: var(--brand-blue-line); }
[data-workspace-panel="draft"] .pg-pane-label { color: var(--brand-blue-ink); }
[data-workspace-panel="result"] > .pg-pane-head { background: var(--accent-soft); }
[data-workspace-panel="result"] .pg-pane-label { color: var(--accent-ink); }
.pg-rail .rail-tabs { background: var(--brand-lilac); }
.pg-rail .rail-tab[aria-selected="true"] { color: var(--brand-lilac-ink); }
.pg-pane-label { letter-spacing: .025em; font-size: .83rem; }
.writing-modes { background: var(--raise); border-radius: .8rem; }
.writing-mode { border-radius: .55rem; padding: .55rem .8rem; }
.writing-mode[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.pg-pane-foot { background: var(--raise); }
.pg-rail .rail-note { background: var(--raise); border: 1px solid var(--line); }
.pg-rail .rail-note--open { border-style: dashed; }
.metric-row { border-radius: 1rem; overflow: hidden; }
.metric-row article:nth-child(1) { background: var(--brand-blue); }
.metric-row article:nth-child(2) { background: var(--accent-soft); }
.metric-row article:nth-child(3) { background: var(--brand-lilac); }
.dashboard-card-head { background: var(--raise); }
.dashboard-empty > span { border-radius: .8rem; background: var(--brand-blue); color: var(--brand-blue-ink); }
.credit-hero { background: var(--brand-blue); }
.credit-hero strong { color: var(--brand-blue-ink); }
.package-card { border-top: 3px solid var(--brand-blue-line); }
.package-card:nth-child(2) { border-top-color: var(--brand-lilac-line); }
.package-card:nth-child(3) { border-top-color: var(--brand-warm-line); }
.package-card--focus { border-color: var(--line); border-top-color: var(--brand-lilac-line); box-shadow: none; }
.account-aside { background: var(--brand-lilac); border-color: var(--brand-lilac-line); }
.pg-actions { background: color-mix(in srgb, var(--surface) 96%, transparent); }

/* A vector notebook replaces the dark bitmap on the sign-in page. */
.login-shell { width: min(calc(100% - 2rem), 82rem); min-height: min(50rem, calc(100svh - 7rem)); grid-template-columns: 1fr 1fr; margin-block: 1rem 3rem; }
.login-auth { padding: clamp(2rem, 5vw, 4.5rem); }
.login-auth h1 { max-width: none; line-height: 1.25; font-size: clamp(2.4rem, 4vw, 3.7rem); }
.login-visual { background: var(--brand-lilac); color: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 2.5rem; }
.login-visual::before { display: none; }
.login-visual-copy { position: static; order: 1; text-align: center; max-width: none; }
.login-visual-copy .eyebrow { color: var(--brand-lilac-ink); font-size: .66rem; }
.login-visual-copy h2 { color: var(--ink); font-size: clamp(2rem, 3vw, 3rem); line-height: 1.22; }
.login-visual-copy p:last-child { color: var(--muted); margin: 1rem auto 0; font-size: .9rem; max-width: 22rem; }
.login-art { display: block; flex: none; width: 100%; max-height: 24rem; margin: 0 auto 1.5rem; overflow: visible; }
.login-proof { position: static; order: 2; align-self: center; margin-top: 1.5rem; background: transparent; border-color: var(--brand-lilac-line); backdrop-filter: none; }
.login-proof span { color: var(--brand-lilac-ink); }
.login-proof strong { background: var(--accent-soft); color: var(--accent-ink); }
.access-code-details summary { min-height: 2rem; }
.login-card input { border-radius: .75rem; background: var(--raise); }

@media (prefers-reduced-motion: no-preference) {
  .brand .brand-mark { transition: transform .35s var(--brand-ease); }
  .brand:hover .brand-mark { transform: rotate(-7deg); }
  .legal-documents li { transition: transform .35s var(--brand-ease), border-color .2s; }
  .legal-documents li:hover { transform: translateY(-4px); border-color: var(--accent); }
  .login-art .art-ink { stroke-dasharray: 240; stroke-dashoffset: 0; animation: brand-ink 2.4s var(--brand-ease) both; }
  @keyframes brand-ink { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
}
@media (max-width: 64rem) {
  .price-intro { display: block; }
  .price-intro .size-table { margin-top: 2.5rem; }
  .price-intro .price-note { max-width: none; }
  .price-faq { grid-template-columns: 1fr; gap: 0; }
  .login-shell { grid-template-columns: 1fr 1fr; }
  .login-visual { grid-row: auto; min-height: 0; padding: 2rem 1rem; }
  .login-visual-copy p:last-child { display: block; }
}
@media (max-width: 46rem) {
  .brand .brand-mark { width: 26px; height: 26px; }
  .home-page .brand-notebook { box-shadow: 4px 4px 0 var(--brand-lilac); }
  .price-intro h1 { font-size: clamp(2.4rem, 10vw, 3.5rem); }
  .price-intro .size-table th { width: 100%; }
  .price-intro .size-table { padding: .7rem; }
  .size-table caption { padding-inline: 1.2rem; }
  .docs .toc a { padding: .5rem .75rem; background: var(--raise); }
  .legal-index .legal-documents { grid-template-columns: 1fr; }
  .legal-main h1 { font-size: clamp(2.35rem, 10vw, 3.4rem); }
  .legal-documents li { padding: 1.35rem; }
  .legal-documents li::before { margin-bottom: 1rem; }
  .login-shell { width: calc(100% - 1.5rem); grid-template-columns: 1fr; margin-block: .5rem 1rem; }
  .login-auth { padding: 2.5rem 1.4rem; }
  .login-visual { padding: 2rem 1.25rem; }
  .login-art { width: min(100%, 20rem); margin-bottom: .5rem; }
  .login-visual-copy .eyebrow { font-size: .6rem; }
  .login-visual-copy h2 { font-size: 2rem; }
  .login-proof { display: flex; }
  .writing-mode { padding-inline: .6rem; }
}
/* Absolute stop, including hover/focus transitions and future route effects. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Deliberate line breaks belong to a genre's rhythm, including while typing. */
.home-page .demo-output, .home-page .typing-layer { white-space: pre-line; }
.home-page .demo-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; padding: 1rem 1.5rem; }
.home-page .demo-nav button { padding: .6rem .35rem; }
@media (max-width: 46rem) {
  .home-page .demo-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .7rem; gap: .2rem; }
  .home-page .demo-nav button { font-size: .82rem; padding: .5rem .2rem; }
}
@media (max-width: 46rem) {
  .nav-wrap { position: relative; }
  .mobile-nav { position: static; }
  .mobile-nav summary { display: flex; align-items: center; min-height: 2.75rem; }
  .mobile-nav-menu { top: calc(100% + .5rem); right: .5rem; width: min(20rem, calc(100% - 1rem)); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-page { --app-line: #d99c84; }
}

@media (min-width: 64.01rem) {
  .docs .toc { grid-row: 1 / span 20; margin-top: 0; }
}