/* online-documents.pro · main.css · дизайн-токены + компоненты */

/* tokens */
:root { --ds-bg: #f7f9fc; --ds-surface: #fff; --ds-text: #172944; --ds-muted: #607089; --ds-primary: #285fe9; --ds-on-primary: #fff; --ds-border: #dfe5ee; --ds-tint: #eaf0ff }

/* reset */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; font: 16px/1.6 Arial,sans-serif; color: var(--ds-text); background: var(--ds-bg) }
a { color: inherit; text-decoration: none }
[hidden] { display: none!important }

/* layout */
.container { max-width: 1180px; margin: auto; padding: 0 30px }
header { border-bottom: 1px solid var(--ds-border) }
header .container { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 25px }
.brand { font-size: 25px; font-weight: 900; letter-spacing: -1px }
nav { display: flex; gap: 26px; font-size: 14px }
nav a:hover { text-decoration: underline }
.block { padding: 35px 0 50px }
.block-title { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px }
.block-title h2 { margin: 0 }
footer { border-top: 1px solid var(--ds-border); padding: 35px 0; font-size: 13px; color: var(--ds-muted) }
footer .container { display: flex; justify-content: space-between; gap: 25px }

/* components */
button,input,select,textarea { font: inherit }
button,a,input,select,textarea { outline-offset: 5px }
button,.btn { cursor: pointer; border: 0; display: inline-flex; justify-content: center; align-items: center; padding: 13px 22px; border-radius: 8px; background: var(--ds-primary); color: var(--ds-on-primary); font-weight: 700 }
button: hover,.btn:hover { filter: brightness(.92) }
.tpl-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px }
.tpl { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px; overflow: hidden }
.tpl-body { padding: 25px }
.tpl img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 28px }
.tabs button { background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); padding: 9px 17px; font-size: 13px }
.tabs button[aria-pressed=true] { background: var(--ds-primary); color: var(--ds-on-primary) }
input,select,textarea { width: 100%; padding: 12px; border: 1px solid var(--ds-border); border-radius: 7px; background: var(--ds-surface); color: var(--ds-text) }
label { display: block; margin: 15px 0 5px; font-size: 14px }
.callout { padding: 36px; background: var(--ds-tint); border-radius: 12px; margin: 20px 0 60px }
.callout p { margin: 10px 0 0 }
.editor-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 35px }
.output { white-space: pre-wrap; padding: 30px; border: 1px solid var(--ds-border); background: var(--ds-surface); min-height: 300px }
.tpl-mark { font-size: 32px; color: var(--ds-primary); margin-bottom: 25px }
.tpl-body { padding: 30px }

/* typography */
.overline { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: bold; color: var(--ds-primary) }
h1,h2,h3,p { margin-top: 0 }
h1 { font-size: clamp(38px,5.5vw,72px); line-height: 1.07; letter-spacing: -3px; margin-bottom: 25px }
h2 { font-size: 30px; line-height: 1.2; letter-spacing: -1px }
h3 { line-height: 1.3; font-size: 21px }
p { color: var(--ds-muted) }
.info { font-size: 12px; color: var(--ds-muted); margin-bottom: 12px }
.page { max-width: 780px; margin: 65px auto 90px }
.page h1 { font-size: 48px }
.page h2 { margin-top: 36px }
.page p,.page li { font-size: 18px; line-height: 1.85 }
.page img { width: 100%; border-radius: 12px; margin: 20px 0 }
.hint { font-size: 13px!important }

/* Прочее */
.intro { padding: 65px 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: 55px; align-items: center }
.intro p { font-size: 18px; max-width: 500px }
.intro img { width: 100%; border-radius: 14px }
.tag { display: inline-block; padding: 4px 10px; background: var(--ds-tint); border-radius: 5px; font-size: 12px }
.finder { max-width: 350px }
.backlink { display: inline-block; color: var(--ds-primary); margin-bottom: 25px }
.none { padding: 35px; border: 1px dashed var(--ds-border) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0) }
@media(max-width:720px) {
  .container { padding: 0 20px }
  header .container { padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap; gap: 15px }
  nav { gap: 18px; flex-wrap: wrap }
  .intro,.editor-cols { grid-template-columns: 1fr; gap: 28px }
  .intro { padding: 38px 0 }
  .tpl-grid { grid-template-columns: 1fr }
  .block-title { align-items: flex-start; flex-direction: column }
  h1 { letter-spacing: -1.5px }
  .intro img { max-height: 350px }
  .page { margin-top: 35px }
  .page h1 { font-size: 36px }
  footer .container { flex-direction: column }
  .finder { max-width: none }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto }
}
@media print {
  header,footer,.screen-only { display: none }
  .editor-cols { display: block }
  .output { border: 0; color: #000; background: #fff }
  .container { max-width: none }
}
.intro h1 { font-size: clamp(38px,4.8vw,62px) }