/* ============================================================================
   content.css — стили статичных разделов: карточки правил (Правила/Банворды),
   таблица команд (О боте), примеры чата (Примеры банов).
   Сверено построчно с liquid_glass_demo_v3.html (см. /areas/slyrix-redesign.md) —
   карточки .frosted (класс проставлен в index.html), больше никакой полоски
   слева и старой terminal-эстетики (Space Mono/зебра/жёсткие border).
   ============================================================================ */

  /* rule cards — .frosted задаёт стекло, здесь только форма/паддинг/текст */
  .rule-card{
    border-radius:var(--radius-md);
    padding:22px 24px;
    margin-bottom:14px;
  }
  .rule-head{margin-bottom:12px;}
  .tag{
    font-family:var(--font-body);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.04em;
    padding:4px 12px;
    border-radius:var(--radius-pill);
  }
  .tag.mute{background:var(--mute-dim); color:var(--mute-c);}
  .tag.ban{background:var(--ban-dim); color:var(--ban-c);}
  .tag.del{background:var(--del-dim); color:var(--del-c);}
  .rule-desc{font-size:14px; color:var(--muted); line-height:1.55; margin-bottom:14px;}
  .chip-row{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{
    font-family:var(--font-body);
    font-size:12.5px;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-pill);
    padding:6px 13px;
    color:var(--text);
    cursor:default;
    transition:transform 0.15s cubic-bezier(0.4,0,0.2,1), border-color 0.2s ease, background 0.2s ease;
  }
  .chip:hover{
    transform:translateY(-1px);
    border-color:var(--accent);
    background:var(--accent-dim);
  }

  /* banwords note */
  .note{
    background:var(--glass);
    border:1px dashed var(--glass-border);
    border-radius:var(--radius-md);
    padding:16px 18px;
    font-size:13.5px;
    color:var(--muted);
    margin-bottom:24px;
  }
  .note strong{color:var(--text);}

  /* commands table — .frosted на .cmd-table задаёт стекло всей таблицы,
     строки разделены border-top, без зебры/жёстких границ demo-стиля */
  .cmd-table{
    border-radius:var(--radius-md);
    overflow:hidden;
  }
  .cmd-row{
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    gap:14px;
    padding:14px 20px;
    align-items:center;
    font-size:13.5px;
  }
  .cmd-row + .cmd-row{border-top:1px solid var(--glass-border);}
  .cmd-row.head{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--muted-2);
    text-transform:uppercase;
    letter-spacing:0.05em;
    padding:12px 20px;
  }
  .cmd-name{
    font-family:var(--font-mono);
    font-weight:600;
    color:var(--accent);
    white-space:nowrap;
  }
  .cmd-name .alt{
    display:block;
    font-size:11px;
    color:var(--muted-2);
    font-weight:400;
    margin-top:3px;
  }
  .cmd-desc{font-size:13.5px; color:var(--muted); word-break:break-word;}
  .cmd-desc a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-dim);}
  .cmd-desc a:hover{border-bottom-color:var(--accent);}
  .cmd-desc code{
    font-family:var(--font-mono);
    font-size:12px;
    background:rgba(255,255,255,0.06);
    padding:1px 5px;
    border-radius:4px;
  }
  .perm{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    padding:3px 10px;
    border-radius:var(--radius-pill);
    display:inline-block;
    white-space:nowrap;
  }
  .perm.everyone{background:var(--ok-dim); color:var(--ok-c);}
  .perm.mod{background:var(--ban-dim); color:var(--ban-c);}
  .cmd-timer{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--muted-2);
    white-space:nowrap;
  }

  /* chat examples — каждая .chat-example свой frosted-блок (класс проставлен
     в index.html), .chat-panel остался только как обёртка-layout без визуала */
  .chat-panel{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:28px;
  }
  .chat-example{
    padding:16px 20px;
    border-radius:var(--radius-md);
  }
  .chat-line{
    margin-bottom:8px;
    font-size:14px;
    line-height:1.5;
    display:flex;
    align-items:flex-start;
    gap:8px;
  }
  .chat-user{
    font-weight:700;
    white-space:nowrap;
    flex-shrink:0;
  }
  .chat-user::after{content:":";}
  .chat-msg{color:var(--text); word-break:break-word;}
  .chat-msg.struck{
    color:var(--muted);
  }
  .chat-verdict-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .verdict-reason{font-size:12.5px; color:var(--muted-2); flex:1;}
  .verdict{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.03em;
    padding:4px 12px;
    border-radius:var(--radius-pill);
    flex-shrink:0;
  }
  .verdict.mute{background:var(--mute-dim); color:var(--mute-c);}
  .verdict.ban{background:var(--ban-dim); color:var(--ban-c);}
  .verdict.del{background:var(--del-dim); color:var(--del-c);}
  .verdict.ok{background:var(--ok-dim); color:var(--ok-c);}

  @media (max-width: 820px){
    .cmd-row{
      grid-template-columns:1fr;
      gap:4px;
    }
    .cmd-row.head{display:none;}
    .cmd-row > *{min-width:0;}
    .cmd-name{white-space:normal; word-break:break-word;}
    .cmd-timer{white-space:normal;}
  }

  /* Version info in About section - mobile only */
  .about-version{
    display:none;
    text-align:center;
    font-size:12px;
    color:var(--muted-2);
    margin-top:24px;
    padding:8px 0;
  }
  @media (max-width: 820px){
    .about-version{
      display:block;
    }
  }