/*
 * Myriad — the TTT rules page.
 *
 * Loaded after main.css and additive to it: every colour here is one of main.css's
 * own tokens, so this file introduces no new ink and inherits the colour rule at
 * the head of that file rather than restating it. Vanilla CSS, no framework, no
 * remote font, no build step.
 *
 * WHAT THIS PAGE IS. 207 rules across 18 sections, and the person reading it is
 * usually a moderator deciding whether to slay somebody. So it is styled as a long
 * document to be searched and scanned, not as a landing page: one column, real
 * heading hierarchy, generous line height, and nothing that moves.
 *
 * NONE OF HIS PRESENTATION CAME ACROSS, and three of those omissions were forced:
 *   - his .main-bullets are #9a01c0 bold on a dark page. Purple as text is 2.51:1
 *     on this site's panel and fails AA at every size, which is the one colour
 *     rule main.css keeps. Depth is carried by weight, indent and marker instead.
 *   - his .rainbow-text is a gradient behind color:transparent. There is no
 *     contrast ratio to compute for transparent text, and where background-clip
 *     is unsupported the text is invisible. It becomes real ink with size and
 *     weight doing the emphasis.
 *   - his .italic note is opacity:0.5 over the page. Halving the alpha of #f5f0ff
 *     over this background lands it around 5:1 at best and lower over the lighter
 *     end of the gradient; the note keeps its italics and drops the fade.
 *
 * ---------------------------------------------------------------------------
 * CONTRAST, COMPUTED AND NOT EYEBALLED
 * ---------------------------------------------------------------------------
 * Every figure below is composited against the pair's REAL background. The body is
 * a gradient from --bg-panel (#2e0073) at the top to --bg-page (#1a0033) below, so
 * each stack is scored at both ends and the worse end is the one quoted. The
 * arithmetic was validated first by reproducing the figures main.css already
 * records for its own pairs — 17.21 against its 17.2, 10.06 against its 10.1, and
 * 6.90 against the 6.90 recorded on .btn--primary.
 *
 *   TEXT (AA needs 4.5 normal, 3.0 large)
 *     #f5f0ff on the body gradient                13.78  worst end
 *     #f5f0ff on a section (no fill, body behind) 13.78  worst end
 *     #f5f0ff on the contents panel  (0.72 alpha) 13.78  worst end
 *     #f5f0ff on the shout panel     (0.55 alpha) 13.78  worst end
 *     #f5f0ff on a HOVERED <summary> (0.28 purple) 11.21  the lightest thing a
 *                                                        section heading sits on
 *     #c9aeff on the contents panel                8.05  worst end
 *     #c9aeff on the body gradient                 8.05  worst end
 *     #ffffff on .btn--primary (#6900ff fill)      6.90
 *   Every one passes AA for normal text, so nothing here depends on being large.
 *
 *   NOT TEXT (3.0 for anything you must see to use)
 *     the #00ff00 focus ring, against every surface here    5.03 worst
 *     the <summary> chevron, #c9aeff, resting               8.05
 *     the <summary> chevron, #c9aeff, hovered               6.55
 *   THE CHEVRON IS HELD TO THE 3.0 BAR ON PURPOSE. It is the one mark on this page
 *   a reader must see to know a section opens at all, so it takes --text-muted
 *   rather than a dimmer edge colour, and both of its states are computed.
 *
 *   The section rules and the panel edges are rgba(--purple-rgb, 0.35-0.4), which
 *   measures 1.39 against the surface they sit on. That is DELIBERATE and it is
 *   not a failure: they are decorative separators on a static document, no control
 *   is identified or operated by seeing them, and .section--panel in main.css
 *   draws its edge with the same value. Nothing on this page is bounded by colour
 *   alone — every section is announced by its heading, and the nine collapsible
 *   ones by a chevron that is held to the bar above.
 *
 * ---------------------------------------------------------------------------
 * 360px IS THE WIDTH THAT MATTERS
 * ---------------------------------------------------------------------------
 * body carries overflow-x: hidden in main.css, which HIDES a sideways overflow
 * rather than preventing one, so nothing here may create one. The two things on
 * this page that could are both handled: his fallback paragraph contains a bare
 * URL and takes overflow-wrap: anywhere, and the deepest list is three levels of
 * indent, which is why the indent is a padding in ch units rather than a fixed
 * margin per level.
 */

/* -------------------------------------------------------------------------
 * The page
 * ---------------------------------------------------------------------- */

.rules-page {
    padding-block: clamp(2rem, 6vw, 3.5rem);
    /* Prose measure. The wrap is 1100px for a landing page; 207 rules read far
     * better at something closer to 70 characters a line. */
    max-width: 56rem;
}

/*
 * S21: an explicit, opt-in extra inset for GMod's in-game MOTD panel only, where
 * the page renders flush against the panel's own edge — see the ?embed=gmod
 * handling in rules/ttt/index.php and partials/ttt-rules.php. A margin-left here
 * would over-constrain .wrap's own margin-inline: auto (CSS 2.1 10.3.3), which
 * resolves by forcing margin-right negative and pushes the right edge past the
 * container instead — invisible only because body clips overflow-x. padding-left
 * has no such interaction: as a later longhand of the same specificity it simply
 * wins over padding-inline's left component, leaving the right side untouched.
 * 1.25rem (from .wrap's padding-inline) + this 1rem is the 2.25rem below.
 * A real visitor never carries this class and this page is otherwise unchanged.
 */
.rules-page--ingame {
    padding-left: 2.25rem;
}

.rules-page__title {
    font-size: clamp(1.5rem, 4.5vw, 2.125rem);
}

.rules-page__cta {
    margin-block: 1.5rem;
}

.rules-page__fallback {
    color: var(--text-muted);
    font-size: 0.9375rem;
    /* A bare URL is one unbreakable word. Without this it is a sideways scroll at
     * 360px, and main.css's overflow-x: hidden would silently clip it instead. */
    overflow-wrap: anywhere;
}

/*
 * His "Don't Click Off Yet!" paragraph. It is the one piece of his page whose job
 * is to be noticed, so it keeps a job to do — a panel and a size step, where he
 * used an animated gradient.
 */
.rules-page__shout {
    margin-block: 1.5rem 2.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--purple-rgb), 0.4);
    border-left: 4px solid var(--purple-brand);
    border-radius: var(--radius);
    background: rgba(46, 0, 115, 0.55);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Contents — navigation, and the answer to an 18-section page
 * ---------------------------------------------------------------------- */

.rules-contents {
    margin-block: 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(var(--purple-rgb), 0.4);
    border-radius: var(--radius);
    background: rgba(46, 0, 115, 0.72);
}

.rules-contents__title {
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/*
 * auto-fill rather than a breakpoint: the list is 19 entries of very different
 * lengths, and this gives it as many columns as 14rem fits and exactly one at
 * 360px without a media query to keep in step with anything.
 */
.rules-contents__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.125rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rules-contents__list a {
    display: block;
    padding-block: 0.375rem;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.rules-contents__list a:hover,
.rules-contents__list a:focus-visible {
    border-bottom-color: var(--green-accent);
}

/* The entry for his second <h1>. It breaks the column flow on purpose: it is the
 * one entry in this list that is a part rather than a section. */
.rules-contents__divider {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--purple-rgb), 0.35);
    font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Sections
 * ---------------------------------------------------------------------- */

/*
 * A rule per section rather than a panel per section. Sixteen filled boxes down a
 * page reads as sixteen unrelated things; a line and a heading reads as one
 * document with sixteen parts, which is what it is.
 */
.rules-section {
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid rgba(var(--purple-rgb), 0.35);
}

.rules-section__title {
    font-size: clamp(1.125rem, 3vw, 1.375rem);
    color: var(--text-primary);
}

.rules-section__note {
    margin-top: 1.25rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
 * The nine collapsible sections
 * ---------------------------------------------------------------------- */

/*
 * NATIVE <details>, and every rule here only styles it — none of it makes the
 * disclosure work, so a missing stylesheet costs the arrow and the padding and
 * leaves a working control. The browser's own marker is removed and replaced by
 * the ::after chevron, because the default triangle sits beside an <h3> and reads
 * as a bullet rather than as a control.
 *
 * The <h3> lives inside the <summary>, so the two need un-picking from each
 * other: display:inline on the heading keeps it on the summary's line instead of
 * breaking under the chevron, and the summary carries the padding and the hit area.
 */

.rules-details__summary {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    /* 44px of target: 0.5rem of padding either side of a 1.375rem line box. */
    padding: 0.5rem 0.25rem;
    cursor: pointer;
    list-style: none;
    border-radius: 6px;
}

.rules-details__summary::-webkit-details-marker {
    display: none;
}

.rules-details__summary::marker {
    content: '';
}

/* The chevron is FIRST in the flex row and comes before the heading, so it reads
 * as the control's own affordance rather than as decoration after the title. */
.rules-details__summary::before {
    content: '';
    flex: none;
    width: 0.45em;
    height: 0.45em;
    /* Nudged down to sit on the heading's baseline rather than its cap height. */
    transform: translateY(-0.15em) rotate(45deg);
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
}

.rules-details[open] > .rules-details__summary::before {
    transform: translateY(0.1em) rotate(-135deg);
}

.rules-details__summary:hover,
.rules-details__summary:focus-visible {
    background: rgba(var(--purple-rgb), 0.28);
}

/* The heading keeps its size and weight; it is still a real <h3> in the outline. */
.rules-details__summary .rules-section__title {
    display: inline;
    margin: 0;
}

.rules-details__body {
    padding-left: 0.25rem;
}

/*
 * A collapsible section needs no rule above it: the summary row is already a
 * distinct band, and 9 of them each under their own line reads as 18 dividers.
 */
.rules-section--collapsible {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
}

/* His second <h1>, as this page's part heading. */
.rules-part {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--purple-brand);
}

.rules-part__title {
    font-size: clamp(1.375rem, 4vw, 1.75rem);
}

/* The first section inside the part does not need a second rule under the part's. */
.rules-part > .rules-section:first-of-type {
    margin-top: 1rem;
    padding-top: 0;
    border-top: 0;
}

/* -------------------------------------------------------------------------
 * The rules themselves — three depths, and the depth is content
 * ---------------------------------------------------------------------- */

/*
 * Indent in ch, so it scales with the text rather than fighting it, and so three
 * levels still fit at 360px. Markers follow his disc -> circle progression and
 * take --text-muted: the marker is a small mark beside text that carries the
 * meaning on its own, and the green in this palette is reserved for the focus ring.
 */
.rules-list {
    margin: 0.75rem 0 0;
    padding-left: 2.25ch;
}

.rules-list li {
    margin-block: 0.4rem;
}

.rules-list li::marker {
    color: var(--text-muted);
}

/* Depth 1 — the label a group of rules sits under. Bold and full size: his
 * .main-bullets did this job in purple, which cannot be text here. */
.rules-list--1 {
    list-style-type: disc;
    padding-left: 1.5ch;
}

.rules-list--1 > li > .rules-list__text {
    font-weight: 700;
    font-size: 1.0625rem;
}

.rules-list--2 {
    list-style-type: circle;
}

.rules-list--3 {
    list-style-type: square;
    font-size: 0.9375rem;
}

/*
 * A block, so a wrapped rule's second line aligns under its first rather than
 * under the marker.
 *
 * break-word because of ONE rule. The longest unbreakable run of characters on
 * this page is "following/bodyblocking/doorblocking" — 35 of them, in a depth-2
 * item, which at 1rem needs about 280px against roughly 272px of room inside
 * three levels of indent at a 360px viewport. It costs nothing when there is
 * space and it is the difference between a wrapped word and a sideways overflow
 * that main.css's overflow-x: hidden would have CLIPPED rather than shown.
 */
.rules-list__text {
    display: block;
    overflow-wrap: break-word;
}

/* "Hacking/Exploiting/Macros" is 25 characters at up to 1.375rem, and the same
 * argument applies with less margin than the list has. */
.rules-section__title,
.rules-part__title,
.rules-page__title {
    overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * The structural check's own output
 * ---------------------------------------------------------------------- */

/*
 * Shown INSTEAD of the rules when the transcription fails its own check. Styled
 * enough to be legible and no further: it is a page nobody should ever see, and
 * if it is seen the words are the point.
 */
.rules-faults {
    padding-block: clamp(2rem, 6vw, 3.5rem);
    max-width: 48rem;
}

.rules-faults li {
    margin-block: 0.5rem;
    color: var(--text-muted);
}