/* ===========================================================================
   AppSec Rating RU — longform sheet
   Guides and the editorial pages: reading column with a sticky index,
   plus the callouts, definition rows and checklists that break up the prose.
   =========================================================================== */

/* ------------------------------------------------------------ breadcrumb */
.ar-trail { padding-block: 1rem .25rem; }
.ar-trail ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-family: var(--ar-face-data); font-size: .72rem;
  color: var(--ar-ink-mute);
}
.ar-trail li + li::before { content: '/'; margin-right: .45rem; color: var(--ar-rule-firm); }
.ar-trail a { text-decoration: none; }
.ar-trail a:hover { color: var(--ar-ink); text-decoration: underline; }
.ar-trail [aria-current] { color: var(--ar-ink-soft); }

/* ---------------------------------------------------------------- opener */
.ar-brow { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem); }
.ar-brow h1 { max-width: 26ch; }
.ar-brow .ar-lede { margin-top: 1.15rem; }
.ar-brow-meta {
  list-style: none; margin: 1.6rem 0 0; padding: 1.05rem 0 0;
  border-top: 1px solid var(--ar-rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-family: var(--ar-face-data); font-size: .72rem;
  letter-spacing: .04em; color: var(--ar-ink-mute);
}

/* ------------------------------------------------------------ reading bed */
.ar-bed { display: grid; gap: 2.5rem; padding-bottom: clamp(3rem, 6vw, 5rem); }

.ar-read { min-width: 0; max-width: 44rem; }
.ar-read h2 {
  font-size: clamp(1.42rem, 3vw, 1.9rem);
  margin-top: 2.6rem; margin-bottom: .9rem;
  scroll-margin-top: 90px;
}
.ar-read > h2:first-child { margin-top: 0; }
.ar-read h3 {
  font-size: clamp(1.06rem, 2vw, 1.2rem);
  margin-top: 1.9rem; margin-bottom: .6rem;
  scroll-margin-top: 90px;
}
.ar-read p { color: var(--ar-ink-soft); }
.ar-read strong { color: var(--ar-ink); font-weight: 600; }
.ar-read > ul, .ar-read > ol { margin: 0 0 1.1em; padding-left: 1.3rem; color: var(--ar-ink-soft); }
.ar-read > ul li, .ar-read > ol li { margin-bottom: .5rem; }
.ar-read > ul li::marker { color: var(--ar-lime-deep); }
.ar-read > ol li::marker { font-family: var(--ar-face-data); font-size: .88em; color: var(--ar-ink-mute); }

/* ------------------------------------------------------------ side index */
.ar-index { align-self: start; }
.ar-index nav {
  border: 1px solid var(--ar-rule);
  border-radius: var(--ar-r-lg);
  background: var(--ar-sheet);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--ar-lift-1);
}
.ar-index h2 {
  font-family: var(--ar-face-data);
  font-size: .68rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ar-ink-mute); margin-bottom: .8rem;
}
.ar-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: idx; }
.ar-index a {
  display: block; padding: .34rem 0;
  font-size: .87rem; line-height: 1.45; text-decoration: none;
  color: var(--ar-ink-mute);
  transition: color var(--ar-quick), padding-left var(--ar-quick);
}
.ar-index a:hover { color: var(--ar-ink); padding-left: .25rem; }

/* ------------------------------------------------------------- callouts */
.ar-note {
  margin: 1.6rem 0;
  border-left: 3px solid var(--ar-lime-deep);
  background: var(--ar-lime-wash);
  border-radius: 0 var(--ar-r-md) var(--ar-r-md) 0;
  padding: 1.05rem 1.2rem;
  font-size: .94rem; line-height: 1.65;
}
.ar-note p { color: var(--ar-ink-soft); }
.ar-note-flag {
  background: var(--ar-paper-2);
  border-left-color: var(--ar-ink-mute);
}
.ar-note-head {
  display: block; margin-bottom: .4rem;
  font-family: var(--ar-face-data);
  font-size: .67rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ar-ink-mute);
}

/* .ar-defs lives in core.css — it is shared with the ranking page. */

/* ------------------------------------------------------------- checklist */
.ar-checks { list-style: none; margin: 1.5rem 0; padding: 0; counter-reset: chk; display: grid; gap: .1rem; }
.ar-checks li {
  counter-increment: chk;
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--ar-rule);
  font-size: .94rem; line-height: 1.62; color: var(--ar-ink-soft);
}
.ar-checks li:first-child { border-top: 1px solid var(--ar-rule); }
.ar-checks li::before {
  content: counter(chk, decimal-leading-zero);
  font-family: var(--ar-face-data); font-size: .76rem; font-weight: 500;
  color: var(--ar-lime-deep); padding-top: .22rem;
}

/* --------------------------------------------------------------- tables */
.ar-scroll {
  overflow-x: auto;
  margin: 1.6rem 0;
  border: 1px solid var(--ar-rule);
  border-radius: var(--ar-r-lg);
  background: var(--ar-sheet);
  -webkit-overflow-scrolling: touch;
}
.ar-grid-tab { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 620px; }
.ar-grid-tab th, .ar-grid-tab td {
  padding: .78rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--ar-rule);
}
.ar-grid-tab thead th {
  background: var(--ar-paper-2);
  font-family: var(--ar-face-data);
  font-size: .67rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ar-ink-soft);
  border-bottom: 1px solid var(--ar-rule-firm);
}
.ar-grid-tab tbody th { font-weight: 600; }
.ar-grid-tab tbody tr:last-child th, .ar-grid-tab tbody tr:last-child td { border-bottom: 0; }
.ar-grid-tab code { font-family: var(--ar-face-data); font-size: .8rem; white-space: nowrap; }

/* --------------------------------------------------------------- inset */
.ar-inset {
  margin: 1.75rem 0;
  border: 1px solid var(--ar-rule);
  border-radius: var(--ar-r-lg);
  background: var(--ar-sheet);
  padding: 1.3rem;
  box-shadow: var(--ar-lift-1);
}
.ar-inset h3 { margin-top: 0; }
.ar-inset-figs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.ar-inset-figs dt {
  font-family: var(--ar-face-display);
  font-size: 1.9rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1;
}
.ar-inset-figs dd { margin: .4rem 0 0; font-size: .87rem; line-height: 1.5; color: var(--ar-ink-mute); }

/* the shared verification token, so guides speak the ranking's language */
.ar-tok { display: inline-flex; align-items: center; gap: .45rem; }
.ar-tok::before {
  content: ''; flex: none; width: 22px; height: 6px; border-radius: 3px;
  background: var(--ar-lime-deep);
}
.ar-tok-open::before { background: none; border: 1.6px dashed #9AA0A4; height: 8px; }

/* ------------------------------------------------------------------ FAQ */
.ar-asks { margin-top: 1.6rem; border-top: 1px solid var(--ar-rule); }
.ar-ask { border-bottom: 1px solid var(--ar-rule); }
.ar-ask summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.05rem .2rem; cursor: pointer; list-style: none;
}
.ar-ask summary::-webkit-details-marker { display: none; }
.ar-ask summary h3 { flex: 1; margin: 0; font-size: 1rem; letter-spacing: -0.015em; }
.ar-ask summary::after {
  content: ''; flex: none; width: 12px; height: 12px; margin-top: .34rem;
  border-right: 2px solid var(--ar-ink-mute);
  border-bottom: 2px solid var(--ar-ink-mute);
  transform: rotate(45deg);
  transition: transform var(--ar-easy);
}
.ar-ask[open] summary::after { transform: rotate(-135deg); }
.ar-ask-say { padding: 0 2.2rem 1.25rem .2rem; font-size: .94rem; line-height: 1.7; color: var(--ar-ink-soft); }

/* ------------------------------------------------------------- the form */
.ar-form { display: grid; gap: 1rem; margin: 1.6rem 0; }
.ar-field { display: grid; gap: .35rem; }
.ar-field label {
  font-family: var(--ar-face-data);
  font-size: .69rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ar-ink-mute);
}
.ar-field input, .ar-field textarea {
  font-family: var(--ar-face-text); font-size: .95rem; color: var(--ar-ink);
  background: var(--ar-sheet);
  border: 1px solid var(--ar-rule-firm);
  border-radius: var(--ar-r-md);
  padding: .7rem .85rem;
  transition: border-color var(--ar-quick), box-shadow var(--ar-quick);
}
.ar-field textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.ar-field input:hover, .ar-field textarea:hover { border-color: var(--ar-ink-mute); }
.ar-field input:focus, .ar-field textarea:focus {
  outline: none;
  border-color: var(--ar-lime-deep);
  box-shadow: 0 0 0 3px rgba(148,175,62,.18);
}
.ar-field-hint { font-size: .8rem; color: var(--ar-ink-mute); }
.ar-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

/* ------------------------------------------------------- author portrait */
.ar-portrait { display: grid; gap: 1.4rem; margin-bottom: 2rem; }
.ar-portrait figure { margin: 0; }
.ar-portrait img {
  width: 100%; max-width: 260px; height: auto;
  border-radius: var(--ar-r-lg);
  box-shadow: var(--ar-lift-2);
  display: block;
}
.ar-portrait figcaption {
  margin-top: .7rem;
  font-family: var(--ar-face-data); font-size: .72rem;
  letter-spacing: .08em; color: var(--ar-ink-mute);
}

/* ------------------------------------------------------------ 768+ */
@media (min-width: 768px) {
  .ar-bed {
    grid-template-columns: minmax(0, 44rem) minmax(210px, 258px);
    justify-content: space-between;
    gap: 3rem;
  }
  .ar-index { position: sticky; top: 92px; }
  .ar-inset { padding: 1.6rem; }
  .ar-inset-figs { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .ar-portrait { grid-template-columns: 260px 1fr; gap: 2.25rem; align-items: start; }
  .ar-form { grid-template-columns: 1fr 1fr; }
  .ar-field-wide { grid-column: 1 / -1; }
  .ar-form-foot { grid-column: 1 / -1; }
}