/* 7.21.1: the unban appeal page only (/appeal) – kept out of pages.css, which every page loads */
/* ------------------------------------------------------------------ 7.21.1: /appeal – how it works left, the form in the middle, an example case file right */
.ag-page { max-width: 1320px; }
.ag-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 320px); gap: 22px; align-items: start; }
.ag-center { min-width: 0; }
.ag-side { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: calc(var(--header-h) + 16px); }
.ag-side-head { padding: 0 2px 4px; }
.ag-side-head h2 { font-size: 1.15rem; }
.ag-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ag-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--radius); background: var(--bg-2); box-shadow: var(--outline); }
.ag-tip .offer-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; }
.ag-tip .offer-icon .icon { width: 18px; height: 18px; }
.ag-tip > div { display: flex; flex-direction: column; gap: 2px; }
.ag-tip b { font-size: 0.92rem; }
.ag-tip.t-grass { --tile: var(--grass); --tile-2: var(--grass-2); }
.ag-tip.t-gold { --tile: var(--gold); --tile-2: var(--t-gold-2); }
.ag-tip.t-pink { --tile: var(--t-pink); --tile-2: var(--t-gold-2); }
.ag-example { padding: 16px; }
.ag-example .case-top { gap: 12px; }
.ag-example .case-top .kind { width: 44px; height: 44px; }
.ag-example .case-code { font-size: 18px; }
.ag-example .reason-box { margin: 12px 0; padding: 10px 12px; font-size: 0.9rem; }
.ag-example .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; font-size: 0.86rem; }
.ag-example .kv > div > span { font-size: 0.66rem; }
.ag-example-tag { position: absolute; top: 12px; right: 12px; }
.ag-example-appeal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.ag-faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ag-faq details { border-radius: var(--radius-s); background: var(--bg-2); box-shadow: var(--outline); padding: 0 14px; }
.ag-faq summary { cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 0.92rem; }
.ag-faq details[open] { padding-bottom: 12px; }
.ag-mailnote { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-3); box-shadow: var(--outline), inset 3px 0 0 var(--grass-2); }
.ag-mailnote > .icon { flex: none; margin-top: 2px; color: var(--grass-2); }
@media (max-width: 1180px) {
  /* tablet: the form first, the two columns side by side below it */
  .ag-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-center { grid-column: 1 / -1; order: -1; max-width: 760px; width: 100%; justify-self: center; }
  .ag-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ag-layout { grid-template-columns: minmax(0, 1fr); }
  .ag-tips { grid-template-columns: minmax(0, 1fr); }
  .ag-faq { grid-template-columns: minmax(0, 1fr); }
  .ag-example .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 7.22.0: the steps of an appeal */
.ag-tl { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ag-tl li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-s); background: var(--bg-3); }
.ag-tl li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-tl-dot { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--bg-4, var(--bg-2)); box-shadow: inset 0 0 0 2px var(--line-2); color: #fff; }
.ag-tl-dot .icon { width: 14px; height: 14px; }
.ag-tl li.done .ag-tl-dot { background: var(--grass-2); box-shadow: none; }
.ag-tl li.now { box-shadow: inset 0 0 0 1px var(--gold); }
.ag-tl li.now .ag-tl-dot { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); animation: ag-pulse 2s ease-in-out infinite; }
.ag-tl li.bad .ag-tl-dot { background: var(--redstone); box-shadow: none; }
.ag-tl li.todo { opacity: 0.6; }
@keyframes ag-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ag-tl li.now .ag-tl-dot { animation: none; } }
@media (max-width: 680px) { .ag-tl { grid-template-columns: minmax(0, 1fr); } }