/* rg-asm index.html — page-specific layout (extends ../rg-tools.css) */
:root {
  --page-w: 72rem; /* wide enough for hero copy + ~97-col listing panel */
}

.page {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 4rem;
}
  .hero {
    display: grid;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
  }
  @media (min-width: 960px) {
    .hero {
      /* Left copy stays compact; terminal gets the remaining width for the listing box */
      grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
      align-items: start;
    }
  }
  .hero__left,
  .hero__right {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
  }
  h1 {
    font: 700 2.35rem/1.1 var(--mono);
    margin: 0 0 .35rem;
    letter-spacing: -0.03em;
    color: var(--amber);
  }
  .dl {
    border: 1px solid var(--line);
    background: var(--panel);
    padding: 1.15rem 1.15rem 1.2rem;
  }
  .dl__primary {
    display: inline-block;
    font: 700 1rem/1 var(--mono);
    padding: .75rem 1.35rem;
    background: var(--amber);
    color: #120c04;
    text-decoration: none;
    border: 1px solid var(--amber-dim);
  }
  .dl__primary:hover { filter: brightness(1.06); }
  .dl__sub {
    margin-top: .65rem;
    font: .82rem/1.45 var(--mono);
    color: var(--dim);
  }
  .dl__alts {
    margin-top: .85rem;
    font: .82rem/1.6 var(--mono);
    color: var(--dim);
  }
  .dl__alts a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line); }
  .dl__alts a:hover { color: var(--amber); border-color: var(--amber); }
  .dl__sha {
    margin-top: .75rem;
    font: .72rem/1.45 var(--mono);
    color: var(--dim);
    word-break: break-all;
  }
  .dl__notes {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--line);
    font-size: .9rem;
    color: var(--dim);
  }
  .dl__notes-more {
    margin-top: .55rem;
  }
  .dl__notes-more a {
    color: var(--cyan);
    font-size: .85rem;
  }
  .dl__err { color: #e07070; font: .9rem/1.5 var(--mono); }

  /* ---- terminal showcase ---- */
  .demo-wrap {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0; /* let the grid shrink; body scrolls if needed */
  }
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .tab {
    appearance: none;
    cursor: pointer;
    font: 700 .72rem/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dim);
    background: transparent;
    border: 1px solid var(--line);
    padding: .45rem .65rem;
  }
  .tab[aria-selected="true"] {
    color: #120c04;
    background: var(--amber);
    border-color: var(--amber-dim);
  }
  .term {
    border: 1px solid var(--line);
    background: var(--term);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 34rem; /* fit cycles listing with no scrollbar */
  }
  .term__bar {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .75rem;
    background: var(--term-bar);
    border-bottom: 1px solid var(--line);
    font: .72rem/1 var(--mono);
    color: var(--dim);
  }
  .term__dots { display: flex; gap: .35rem; }
  .term__dots span {
    width: .55rem; height: .55rem; border-radius: 50%;
    background: #3a4050;
  }
  .term__dots span:nth-child(1) { background: #e06c75; }
  .term__dots span:nth-child(2) { background: #e5c07b; }
  .term__dots span:nth-child(3) { background: #98c379; }
  .term__title { margin-left: .25rem; }
  .term__stage {
    position: relative;
    flex: 1;
    min-height: 0;
  }
  .term__body {
    position: relative;
    margin: 0;
    padding: .85rem .9rem 1rem;
    font: .74rem/1.35 var(--mono);
    color: var(--ink);
    /* lines are display:block; do NOT also preserve HTML newlines (that doubles spacing) */
    white-space: normal;
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
  }
  /* Boxed listing is ~97 cols; keep readable once the page is wide enough */
  .term__body--listing {
    font-size: .68rem;
    line-height: 1.32;
  }
  .term__body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      180deg,
      transparent 0 2px,
      rgba(0, 0, 0, 0.08) 2px 3px
    );
    opacity: .35;
  }
  .term__panel {
    position: absolute;
    inset: 0;
  }
  .term__panel[hidden] {
    display: block; /* keep geometry; hide visually */
    visibility: hidden;
    pointer-events: none;
  }
  /* Match RUST/rg-asm/src/render/palette.rs ANSI semantics */
  .c-prompt { color: var(--green); font-weight: 700; }
  .c-cmd { color: var(--ink); }
  .c-dim { color: var(--dim); opacity: .85; }
  .c-amber { color: var(--amber); font-weight: 700; }
  .c-cyan { color: var(--cyan); font-weight: 700; }
  .c-magenta { color: var(--magenta); font-weight: 700; }
  .c-ok { color: var(--green); font-weight: 700; }
  .c-head { color: var(--cyan); font-weight: 700; }
  .c-hot { color: #e07070; font-weight: 700; } /* listing: ≥100-cycle insn */
  .cursor {
    display: inline-block;
    width: .55ch;
    height: 1.05em;
    margin-left: .1ch;
    vertical-align: text-bottom;
    background: var(--amber);
    animation: blink 1s step-end infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .line {
    display: block;
    margin: 0;
    padding: 0;
    white-space: pre; /* keep spaces inside each line */
    opacity: 0;
    transform: translateY(.15rem);
    animation: reveal .35s ease forwards;
  }
  .term__panel.is-active .line {
    animation-name: reveal;
  }
  @keyframes reveal {
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .line { opacity: 1; transform: none; animation: none !important; }
    .cursor { animation: none; opacity: .7; }
  }

  section { margin-bottom: 2.25rem; }
  h2 {
    font: 700 .78rem/1 var(--mono);
    margin: 0 0 .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amber-dim);
  }
  /* Quick-start + verify sit under the terminal in the right stack */
  .below__side {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
  }
  .hero section { margin-bottom: 0; }
  .spec {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .93rem;
    columns: 1;
  }
  .spec li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--dim);
  }
  .spec strong { color: var(--ink); font-weight: 600; }

  pre.static {
    margin: 0;
    padding: .85rem 1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    font: .78rem/1.45 var(--mono);
    overflow-x: auto;
    color: var(--ink);
  }
  p.hint { margin: .65rem 0 0; font-size: .88rem; color: var(--dim); }
  p.hint a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted var(--line); }
  p.hint a:hover { border-color: var(--amber); }
  .navlinks {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  .navlinks li { border-bottom: 1px solid var(--line); }
  .navlinks li:last-child { border-bottom: 0; }
  .navlinks a {
    display: block;
    padding: .85rem 1rem;
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border: 0;
    transition: background .15s ease, color .15s ease;
  }
  .navlinks a:hover {
    background: rgba(232, 160, 48, 0.08);
    color: var(--amber);
  }
  .navlinks__desc {
    display: block;
    margin-top: .2rem;
    font-size: .82rem;
    font-weight: 400;
    color: var(--dim);
  }
  .navlinks a:hover .navlinks__desc { color: var(--ink); opacity: .85; }
  code { font-family: var(--mono); font-size: .92em; }