/* clouderra — публичный сайт
 * app.css · собирается из src/styles, правки только в репозитории
 */

@layer reset, base, layout, blocks, utils;

@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, textarea { font: inherit; color: inherit; }
}

@layer base {
  :root {
    --c-bg: #fbfbfa;
    --c-surface: #ffffff;
    --c-border: #e4e2dd;
    --c-border-strong: #cfccc4;
    --c-text: #23211e;
    --c-muted: #6f6a62;
    --c-accent: #2f5d50;
    --c-accent-soft: #eaf1ee;
    --c-danger: #8c2f26;
    --c-warn: #8a6413;

    --sp: 8px;
    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(35, 33, 30, .06);
    --shadow-md: 0 4px 18px rgba(35, 33, 30, .07);

    --font-text: Georgia, "Times New Roman", "Liberation Serif", serif;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-code: "Cascadia Code", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;
  }

  html { -webkit-text-size-adjust: 100%; }

  body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
  }

  a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { text-decoration-style: dotted; }

  code { font-family: var(--font-code); font-size: .875em; }

  h1, h2, h3 { font-family: var(--font-text); font-weight: 600; letter-spacing: -.01em; }
  h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.18; }
  h2 { font-size: clamp(21px, 2.6vw, 26px); line-height: 1.3; margin-block: calc(var(--sp) * 6) calc(var(--sp) * 2); }
  h3 { font-size: 17px; margin-block: calc(var(--sp) * 3) var(--sp); }

  p + p { margin-top: calc(var(--sp) * 1.5); }
}

@layer layout {
  .shell { width: min(100% - 40px, 1080px); margin-inline: auto; }
  .shell--narrow { width: min(100% - 40px, 760px); }

  .site-head {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .site-head__bar {
    display: flex;
    align-items: center;
    gap: calc(var(--sp) * 3);
    padding-block: calc(var(--sp) * 1.75);
  }

  .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-text); font-size: 19px; font-weight: 600; text-decoration: none; color: var(--c-text); }
  .brand svg { width: 24px; height: 24px; }

  .site-nav { display: flex; gap: calc(var(--sp) * 3); margin-left: auto; font-size: 15px; }
  .site-nav a { color: var(--c-muted); text-decoration: none; }
  .site-nav a:hover { color: var(--c-text); }
  .site-nav a.is-active { color: var(--c-text); font-weight: 500; }

  .site-foot {
    margin-top: calc(var(--sp) * 12);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    font-size: 14px;
    color: var(--c-muted);
  }
  .site-foot__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: calc(var(--sp) * 4);
    padding-block: calc(var(--sp) * 5) calc(var(--sp) * 6);
  }
  .site-foot h3 { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); margin-block: 0 var(--sp); }
  .site-foot a { color: var(--c-muted); text-decoration: none; display: block; padding-block: 3px; }
  .site-foot a:hover { color: var(--c-text); text-decoration: underline; }
  .site-foot__legal { border-top: 1px solid var(--c-border); padding-block: calc(var(--sp) * 2.5) calc(var(--sp) * 4); font-size: 13px; }

  section { padding-block: calc(var(--sp) * 2); }

  .hero { padding-block: calc(var(--sp) * 9) calc(var(--sp) * 5); }
  .hero p.sub { font-size: 18px; color: var(--c-muted); max-width: 56ch; margin-top: calc(var(--sp) * 2); }
  .hero .cta { display: flex; gap: calc(var(--sp) * 1.5); flex-wrap: wrap; margin-top: calc(var(--sp) * 4); }

  .prose { max-width: 68ch; }
  .prose p, .prose ul, .prose ol { margin-block: 0 calc(var(--sp) * 2); }
  .prose ul, .prose ol { padding-left: 22px; }
  .prose li { margin-bottom: 6px; }
}

@layer blocks {
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
  }
  .btn--solid { background: var(--c-accent); color: #fff; }
  .btn--solid:hover { background: #26493f; }
  .btn--ghost { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
  .btn--ghost:hover { background: #f3f2ef; }
  .btn--wide { width: 100%; justify-content: center; }
  .btn:disabled { opacity: .6; cursor: progress; }

  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: calc(var(--sp) * 2); }
  .tile {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: calc(var(--sp) * 3);
    box-shadow: var(--shadow-sm);
  }
  .tile h3 { margin-top: 0; }
  .tile p { font-size: 15px; color: var(--c-muted); }

  .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(var(--sp) * 2); align-items: start; }
  .plan { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: calc(var(--sp) * 3); }
  .plan--featured { border-color: var(--c-accent); box-shadow: var(--shadow-md); }
  .plan__name { font-family: var(--font-text); font-size: 19px; font-weight: 600; }
  .plan__price { font-family: var(--font-text); font-size: 30px; margin-block: var(--sp); }
  .plan__price small { font-family: var(--font-ui); font-size: 14px; color: var(--c-muted); font-weight: 400; }
  .plan ul { margin-block: calc(var(--sp) * 2); font-size: 15px; }
  .plan li { padding-left: 20px; position: relative; margin-bottom: 7px; }
  .plan li::before { content: "·"; position: absolute; left: 6px; color: var(--c-accent); font-weight: 700; }

  .panel {
    background: var(--c-accent-soft);
    border: 1px solid #d5e2dd;
    border-radius: var(--radius);
    padding: calc(var(--sp) * 2.5) calc(var(--sp) * 3);
    font-size: 15px;
  }

  .board { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
  .board th, .board td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--c-border); }
  .board th { font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); background: #f7f6f4; }
  .board tr:last-child td { border-bottom: 0; }
  .board td.mono { font-family: var(--font-code); font-size: 13px; }

  .badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
  .badge--ok { background: #e6f0e9; color: #275c3d; }
  .badge--warn { background: #f8efd9; color: var(--c-warn); }
  .badge--off { background: #f1efec; color: var(--c-muted); }

  /* авторизация */
  .auth { display: grid; place-items: center; min-height: calc(100vh - 190px); padding-block: calc(var(--sp) * 6); }
  .auth__card { width: min(100%, 396px); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: calc(var(--sp) * 4); box-shadow: var(--shadow-md); }
  .auth__card h1 { font-size: 23px; margin-bottom: calc(var(--sp) * 3); }
  .auth__row { margin-bottom: calc(var(--sp) * 2); }
  .auth__row label { display: block; font-size: 14px; color: var(--c-muted); margin-bottom: 5px; }
  .auth__row input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-bg);
  }
  .auth__row input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
  .auth__aside { font-size: 14px; color: var(--c-muted); margin-top: calc(var(--sp) * 2.5); text-align: center; }

  .alert {
    display: none;
    border-radius: var(--radius);
    padding: 10px 13px;
    font-size: 14px;
    margin-bottom: calc(var(--sp) * 2);
    border: 1px solid;
  }
  .alert[data-open="1"] { display: block; }
  .alert--err { background: #fbeeec; border-color: #e8cdc9; color: var(--c-danger); }
  .alert--wait { background: #f8efd9; border-color: #ecdcb4; color: var(--c-warn); }
}

@layer utils {
  .t-muted { color: var(--c-muted); }
  .t-small { font-size: 14px; }
  .t-center { text-align: center; }
  .mt-0 { margin-top: 0; }

  @media (max-width: 700px) {
    .site-nav { display: none; }
    .site-head__bar { padding-block: calc(var(--sp) * 1.5); }
    .hero { padding-block: calc(var(--sp) * 5) calc(var(--sp) * 3); }
  }
}