/* HOW TO PLAY -- the page made ours.

   WHAT IT WAS. The styles lived in a <style> block inside howToPlay-1.jsp, so
   no stylesheet pass ever saw them: every corner sweep walks *.css, and this
   page is a .jsp. That is why it still had a 20px corner in a square theme
   while everything around it had gone sharp -- the token never reached it
   because nothing ever read the file.

   It also pulled main/howToPlay/nioicon.css -- 54 KB of CSS and an icon font in
   four formats -- to draw a plus and a minus. Nothing else in the tree uses it.
   Both marks are drawn here in two pseudo-elements instead, so the page loses a
   stylesheet and a font download and gains a mark that follows the theme.

   WHAT IT IS NOW. One card per question. Closed, the title IS the card. Open,
   the title and the answer are one surface with a single seam: same background,
   same edge, corners only on the outside. Every value comes from the surface
   tokens, so a square theme squares it and a paper theme flattens it, with no
   further work here.

   The class names and the markup are untouched, so jquery-petty-accordion.js
   keeps working exactly as it did -- it toggles .open on the item and swaps
   ni-plus / ni-minus on the mark, and both are styled below. */

.p_htp_1_m{
    color: var(--color-7);
    max-width: 680px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}

/* A SECTION HEADING, not a shout. The page has three of them and they are
   signposts between groups of questions, so they sit quietly above the cards. */
.p_htp_1_m h2{
    font-family: aller, tahoma, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-6);
    margin: 34px 0 12px;
    padding: 0 2px;
}
.p_htp_1_m h2:first-child{ margin-top: 12px; }

.p_htp_1_m .accordion-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.p_htp_1_m .accordion-list-item{
    margin: 0 0 8px;
}

/* THE QUESTION. This is the whole control, so it carries the corner, the edge
   and the pointer. When the item is open it gives up its bottom corners to the
   answer below it, and the two read as one card. */
.p_htp_1_m .accordion-title{
    font-family: aller, tahoma, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-9);
    background: var(--surface-bg-raised, var(--color-3));
    background-image: var(--surface-sheen-panel);
    border: var(--surface-border-w, 1px) solid var(--surface-border, var(--color-4));
    border-radius: var(--surface-radius, 10px);
    margin: 0;
    padding: 15px 46px 15px 16px;
    position: relative;
    cursor: pointer;
    text-align: left;
    transition: background-color .2s ease, color .2s ease;
}
.p_htp_1_m .accordion-title:hover{ color: var(--mainColor); }

/* Keyboard reaches this too -- see the script, which makes each title a real
   button. Without a visible ring that is worse than no keyboard support. */
.p_htp_1_m .accordion-title:focus-visible{
    outline: 2px solid var(--mainColor);
    outline-offset: 2px;
}

.p_htp_1_m .accordion-list-item.open > .accordion-title{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    color: var(--mainColor);
}

/* THE MARK. Two bars: the horizontal one always shows, the vertical one turns
   a quarter and fades, so a plus becomes a minus in one movement rather than
   being swapped for a different glyph. The script still toggles ni-plus and
   ni-minus; both are answered here. */
.p_htp_1_m .accordion-title .ni{
    position: absolute;
    top: 50%;
    right: 15px;
    width: 13px;
    height: 13px;
    margin-top: -6px;
    display: block;
}
.p_htp_1_m .accordion-title .ni::before,
.p_htp_1_m .accordion-title .ni::after{
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: var(--surface-radius-xs, 2px);
    transition: transform .25s ease, opacity .25s ease;
}
.p_htp_1_m .accordion-title .ni::before{          /* the horizontal bar */
    left: 0;
    right: 0;
    top: 6px;
    height: 1.5px;
}
.p_htp_1_m .accordion-title .ni::after{           /* the one that turns away */
    top: 0;
    bottom: 0;
    left: 6px;
    width: 1.5px;
}
.p_htp_1_m .accordion-title .ni-minus::after,
.p_htp_1_m .accordion-list-item.open .ni::after{
    transform: rotate(90deg);
    opacity: 0;
}

/* THE ANSWER. Same surface as the question, joined to it: no top corners, no
   top edge, so the seam between them is the only thing that is not drawn.
   display is left to the script -- it slides these open and closed and writes
   display inline while it does, so a display rule here would be overridden. */
.p_htp_1_m .accordion-desc{
    display: none;
}
.p_htp_1_m .accordion-desc p{
    font-family: aller, tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-7);
    background: var(--surface-bg-raised, var(--color-3));
    background-image: var(--surface-sheen-panel);
    border: var(--surface-border-w, 1px) solid var(--surface-border, var(--color-4));
    border-top: 0;
    border-radius: 0 0 var(--surface-radius, 10px) var(--surface-radius, 10px);
    margin: 0;
    padding: 2px 16px 16px;
}
.p_htp_1_m .accordion-desc p + p{
    border-top: 0;
    border-radius: 0 0 var(--surface-radius, 10px) var(--surface-radius, 10px);
    padding-top: 0;
}

.p_htp_1_m .accordion-desc a{
    color: var(--mainColor);
    text-decoration: none;
}
.p_htp_1_m .accordion-desc a:hover{ text-decoration: underline; }
.p_htp_1_m strong{ color: var(--color-9); font-weight: 400; }

/* THE VIDEO ABOVE THE QUESTIONS. It was loose in the page with no width of its
   own, so it took whatever the viewport gave it. */
.noCase{
    max-width: 680px;
    margin: 16px auto 4px;
    padding: 0 12px;
    box-sizing: border-box;
}
.noCase video{
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--surface-radius, 10px);
}

/* Site rule: things ease, they never snap -- and nothing moves for a reader who
   has asked for that. */
@media (prefers-reduced-motion: reduce){
    .p_htp_1_m .accordion-title,
    .p_htp_1_m .accordion-title .ni::before,
    .p_htp_1_m .accordion-title .ni::after{
        transition: none;
    }
}