/* AIOS "How to use" pages (D259).
   .
   THIS IS THE SECOND SHEET, NOT A REPLACEMENT. Every page here also loads
   ../notebook/notebook.css, which already solves the one problem a generated
   content page on this site has: the navbar is `position: fixed` and <header>
   computes to ZERO height, so page content starts underneath it and the logo
   overflows the bar to 103px on a desktop and 111px on a phone. That number was
   measured once; copying it here would be a second answer to one question, and
   the one that goes stale. What is in this file is only what a guide has and an
   article does not.
   .
   IT IS HAND-EDITED AND THE PAGES ARE NOT. `scripts/build_aios_guide.py`
   rewrites every .html in this directory on every run; this stylesheet and the
   screenshots under img/ are the parts that are safe to change by hand. Same
   split the notebook already makes with notebook.css. */

/* -------------------------------------------------------------- THE BOX */
/* THE OUTER BOX IS WIDER THAN AN ARTICLE AND THE ARTICLE INSIDE IT IS NOT.
   ../notebook/notebook.css names `.guide-wrap` in its own selector list, so the
   navbar clearance and the centring are shared and the 7rem measurement lives in
   one place. What is different here is the MEASURE: a notebook article is 44rem
   of prose, and these pages carry a card grid, a screenshot gallery and
   three-column tables, none of which reads well at that width.
   .
   The article inside gives its own padding back, or the page would open with the
   navbar clearance applied twice -- the same correction notebook.css already
   makes for `.notebook-ad + .notebook-article`. */
.guide-wrap { max-width: 58rem; }
.guide-wrap .notebook-article {
    max-width: 100%; margin: 0; padding: 0 0 1rem;
}

/* ---------------------------------------------------------------- HERO */
.guide-hero { margin: 0 0 32px; }
.guide-lede {
    max-width: 62ch; font-size: 1.15rem; line-height: 1.65; opacity: 0.9;
}
.guide-crumb { font-size: 0.85rem; opacity: 0.7; margin: 0 0 8px; }

/* A LINK STYLED AS A BUTTON, NOT A <button>. These go somewhere, so they are
   anchors: middle-clickable, copyable, and openable in a window of the reader's
   own -- the same argument the dashboard's CLAUDE CODE control settled. */
.guide-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.guide-btn {
    display: inline-block; padding: 11px 20px; border-radius: 999px;
    background: #2ee6d6; color: #05201f; font-weight: 700; text-decoration: none;
    border: 2px solid #2ee6d6; line-height: 1.2;
}
.guide-btn:hover { background: #56f0e2; border-color: #56f0e2; color: #05201f; }
.guide-btn-ghost { background: transparent; color: #2ee6d6; }
.guide-btn-ghost:hover { background: rgba(46, 230, 214, 0.12); color: #2ee6d6; }

/* ------------------------------------------------------------- THE LIST */
.guide-list-h { margin-top: 44px; }
/* AUTO-FIT WITH A minmax FLOOR, so one column on a phone and as many as fit on a
   desktop, with no breakpoint to keep in step with anything. `min(100%, 20rem)`
   as the floor rather than a bare 20rem: a bare one makes the track wider than
   the screen below 320px, which is the overflow this project has measured in
   four other places. */
.guide-cards {
    list-style: none; padding: 0; margin: 20px 0 0;
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.guide-card {
    border: 1px solid rgba(46, 230, 214, 0.28); border-radius: 12px;
    padding: 16px 18px; background: rgba(255, 255, 255, 0.02);
}
.guide-card a { font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.guide-card a:hover { text-decoration: underline; }
.guide-card p { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.55; opacity: 0.82; }

/* ------------------------------------------------------- THE SCREENSHOTS */
/* SAME auto-fit GRID, floored at the width a phone screenshot is actually
   readable at.
   .
   THE SHAPE IS THE FILE'S OWN, NOT A NUMBER IN HERE. The generator reads each
   PNG's width and height out of its header and writes them onto the <img>, and
   a browser derives the box's aspect ratio from exactly those two attributes --
   so the space is reserved before a `loading="lazy"` picture arrives without
   this stylesheet knowing anything about what shape the captures are. The first
   cut DID state one (375/812, from the phone the app was measured on) and the
   captures came back 500x1178, so `object-fit: cover` silently cropped the
   bottom off every one of them. Lesson 45: a shape stated where it could be
   measured. */
.guide-shots {
    display: grid; gap: 18px; margin: 26px 0 34px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.guide-shot { margin: 0; }
.guide-shot img {
    display: block; width: 100%; height: auto;
    border-radius: 14px;
    border: 1px solid rgba(var(--aios-accent-rgb, 46,230,214), 0.3);
    background: #050505;
}
.guide-shot figcaption {
    margin-top: 8px; font-size: 0.85rem; opacity: 0.75; line-height: 1.4;
}

/* ------------------------------------------------------------- TABLES */
/* THE ONE ELEMENT ON THESE PAGES ALLOWED TO SCROLL SIDEWAYS. A troubleshooting
   table is three columns of prose and there is no width at which it fits a
   phone, so the choice is a table that scrolls inside its own box or a page
   that scrolls as a whole -- and the second is a defect this project has
   measured more than once. engine/guide.py emits the wrapper.
   .
   BOTH AXES ARE STATED. Setting one axis to something other than `visible`
   computes the OTHER from `visible` to `auto`, so `overflow-x: auto` alone
   quietly buys a vertical scrollbar as well; that is failure shape 13. */
.md-table-wrap {
    overflow-x: auto; overflow-y: hidden; margin: 22px 0;
    border: 1px solid rgba(46, 230, 214, 0.22); border-radius: 10px;
}
.md-table-wrap table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.md-table-wrap th, .md-table-wrap td {
    text-align: left; vertical-align: top; padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.93rem; line-height: 1.5;
}
.md-table-wrap th {
    font-weight: 700; color: #2ee6d6; white-space: nowrap;
    border-bottom-color: rgba(46, 230, 214, 0.4);
}
.md-table-wrap tbody tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------- READING */
.guide-wrap blockquote {
    margin: 20px 0; padding: 12px 18px;
    border-left: 3px solid #2ee6d6; background: rgba(46, 230, 214, 0.06);
    border-radius: 0 8px 8px 0;
}
.guide-wrap blockquote p { margin: 0; }
.guide-wrap code {
    background: rgba(255, 255, 255, 0.07); padding: 1px 5px; border-radius: 4px;
    font-size: 0.92em;
}
.guide-wrap pre {
    background: rgba(255, 255, 255, 0.05); padding: 14px 16px; border-radius: 10px;
    overflow-x: auto; overflow-y: hidden;
}
.guide-wrap pre code { background: none; padding: 0; }