/* ─────────────────────────────────────────────────────────────────────────
   Resources page styles — extracted from the inline <style> on resources.html.
   Covers the page's headings/definition-lists, the copyable code blocks, the
   portable Book Stamp demo CSS, and the demo-folder layout. Loaded after
   components.css (which supplies the shared .folder chrome + .folder--tabbed
   toggle these demos reuse). Only resources.html needs this sheet.
   ───────────────────────────────────────────────────────────────────────── */

h3 {
    font-family: 'Bitcount', monospace;
    margin: 0;
    color: var(--dark-purple);
}

h3 + p {
    margin: 0 0 0.5rem 0;
}

dl {
    background-color: rgba(var(--purple-accent-rgb), 0.12);
    padding: 1rem;
    border: 1px dashed var(--dark-purple);
}

dl > div {
    display: inline-flex;
    padding: 0.2rem 0;
    width: 100%;
}

dl > div > dt {
    font-family: 'Bitcount', monospace;
    font-weight: 300;
    display: inline-block;
    flex-shrink: 0;
    width: 30%;
}

dl > div > dd {
    margin: 0;
    font-size: 0.9rem;
}

li.note {
    text-align: start;
    padding: 0 0 0.5rem 0.5rem;
}

li.note::marker {
    content: "✦";
}

button.copy-btn {
    width: 30%;
    justify-content: center;
}

.category {
    font-family: 'Shorelines Script', cursive;
    text-align: start;
    text-transform: lowercase;
    color: var(--dark-purple);
    border-bottom: 1px dashed var(--dark-purple);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 300;
}

.category > p {
    margin-bottom: 0;
}

/* Copyable code blocks. The snippets live in <pre><code> — <pre> is whitespace-
   sensitive, so the IDE's HTML formatter leaves the indentation alone (a plain
   <code> was getting reindented on every save). pre-wrap keeps the authored line
   breaks while wrapping long lines; min-width:0 lets the box shrink not blow out.
   The copy button reads the <code>'s textContent, so real newlines are preserved. */
.code-snippet {
    min-width: 0;
}

.code-snippet pre {
    margin: 0.5rem 0;
    padding: 1rem;
    background: white;
    border: 1px dashed var(--dark-purple);
    line-height: 1.5;
    max-height: 200px;
    overflow: auto;
    position: relative;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: left;
    min-width: 0;
}

/* Demo folder — a .folder.folder--tabbed (chrome + toggle live in components.css)
   with the live example pinned above the html/css code panels, so it stays put
   as the tabs swap the code beneath it. */
.folder__example {
    /* Pinned to its own content width so switching tabs (which changes the
       visible panel's intrinsic width) can't resize the example beside it. */
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding-right: 1.25rem;
    margin-right: 1.25rem;
    border-right: 1px dashed var(--purple-300);
}

.folder__panels {
    /* Absorb the remaining width from a zero basis (not content width), so the
       panel never pushes on the example; long lines wrap inside via pre-wrap. */
    flex: 1 1 0;
    min-width: 0;
}

.folder__body {
    display: flex;
    flex-direction: row;
    background-color: var(--purple-100);
    border: 1px solid var(--dark-purple);
    /*border-top: none;*/
}

.folder__tab {
    background-color: var(--purple-200);
    border: 1px solid var(--dark-purple);
    border-bottom: none;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    /*padding: 0.5rem 1rem;*/
    cursor: pointer;
    font-family: 'Caviar Dreams', sans-serif;
    font-size: 0.8rem;
    color: var(--dark-purple);
    transition: background-color 0.2s ease;
}

.folder--tabbed .folder__radio:nth-of-type(1):checked ~ .folder__tabs .folder__tab:nth-of-type(1),
.folder--tabbed .folder__radio:nth-of-type(2):checked ~ .folder__tabs .folder__tab:nth-of-type(2),
.folder--tabbed .folder__radio:nth-of-type(3):checked ~ .folder__tabs .folder__tab:nth-of-type(3) {
    background-color: var(--purple-100);
}

.folder__tabs {
    justify-content: flex-end;
    padding-right: 2rem;
}

/* ── Book stamp demo — portable rules (hex colours, no site vars/fonts) so the
   snippet the visitor copies renders anywhere. Mirrors the CSS shown in the
   Book Stamp "css" tab. ─────────────────────────────────────────────────── */
.date-stamp {
    position: relative;
    z-index: 2;
    flex: none;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid #56507f;
    border-radius: 50%;
    color: #56507f;
    --stamp-tilt: -7deg;
    transform: rotate(var(--stamp-tilt));
    transform-origin: center;
}

.date-stamp::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1.5px dashed #ababf2;
    border-radius: 50%;
    pointer-events: none;
}

.date-stamp svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.date-stamp svg text {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    fill: #8a83bd;
}

.date-stamp-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.date-stamp-label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.62rem;
}

.date-stamp-divider {
    display: block;
    width: 50%;
    border-top: 1px solid #cdc6ec;
    margin-top: 0.25rem;
}

.date-stamp-day {
    font-family: monospace;
    font-size: 2.2rem;
    line-height: 1;
}

.date-stamp-my {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.date-stamp .star-rating {
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-top: 2px;
}

/* Stars: five ★ glyphs live in the HTML; the fill layer sits on top and is
   clipped to --pct (rating ÷ 5 × 100). */
.star-rating {
    position: relative;
    display: inline-block;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
    color: #c4bce6;
}

.star-rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pct, 0%);
    overflow: hidden;
    color: #56507f;
}

.polaroid {
    margin: 0 0 0.5rem 0;
}