/* =====================================================================
   note.css — dynamic note reading layouts for the carrington.cool theme.
   Five layouts (classic, rail, decision, changelog, immersive) driven by
   real post data. Uses SEMANTIC theme tokens so light/dark/cool all work.
   EXCEPTION: the four note-type hues are fixed brand colors (type identity
   must stay stable across modes) and live in the [data-note-type] map below.
   All classes are prefixed .note-*.
   ===================================================================== */

/* ---- note-type color map (fixed brand hues — do NOT tokenize) ---------
   Shared contract with the product-page agent. Sets --tc for descendants. */
[data-note-type]{--tc:#4d5e6b;}                 /* fallback slate */
[data-note-type="origin"]{--tc:#c8552c;}
[data-note-type="build-log"]{--tc:#3f6f9c;}
[data-note-type="product-note"]{--tc:#c98a2b;}
[data-note-type="changelog"]{--tc:#4f8f3c;}

/* ---- shared chip (reused by the product page) ------------------------ */
/* MARKER treatment: a highlighter swipe in the type hue under the label.
   The label reads in the ground's text colour so it stays legible on
   porcelain and slate alike; dark grounds lift --tc + flip the label to
   paper (see the dark-ground block below). No dot — the swipe is the colour. */
.note-chip{
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.13em;
    text-transform:uppercase;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    /* Never stretch: in a flex-column parent (related cards, side minis, the
       feature card) align-items:stretch would blow the swipe to full width.
       A definite width overrides stretch; row contexts are unaffected. */
    width:fit-content;
    white-space:nowrap;
    line-height:1.1;
    color:var(--color-ink);
    background:linear-gradient(
        to bottom,
        transparent 56%,
        color-mix(in srgb, var(--tc) 42%, transparent) 56%
    );
    padding:0.05em 0.22em 0.12em;
}
.note-chip__dot{display:none;}

/* Dark grounds (immersive hero, feature card): paper label + lifted swipe hue
   so mid-tone types (build-log, changelog) don't go muddy on slate. */
.note-imm__hero .note-chip,
.pnotes-feature .note-chip{color:var(--color-accent-contrast);}
.note-imm__hero [data-note-type],
.pnotes-feature [data-note-type]{--tc:#9fb0bf;}
.note-imm__hero [data-note-type="origin"],
.pnotes-feature [data-note-type="origin"]{--tc:#e79b74;}
.note-imm__hero [data-note-type="build-log"],
.pnotes-feature [data-note-type="build-log"]{--tc:#86b0d6;}
.note-imm__hero [data-note-type="product-note"],
.pnotes-feature [data-note-type="product-note"]{--tc:#e2ba6a;}
.note-imm__hero [data-note-type="changelog"],
.pnotes-feature [data-note-type="changelog"]{--tc:#93cd93;}

/* ---- shared measure column ------------------------------------------- */
.note-col{max-width:40rem;margin-inline:auto;}

/* ---- title / lead ---------------------------------------------------- */
.note-title{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.05;
    letter-spacing:-0.01em;
    color:var(--color-ink);
    text-wrap:balance;
    margin:1rem 0;
}
.note-lead{
    font-size:1.25rem;
    line-height:1.5;
    color:var(--color-muted);
    margin-bottom:1.4rem;
}

/* ---- breadcrumb + meta ---------------------------------------------- */
.note-crumb{
    display:inline-flex;
    align-items:center;
    gap:0.6em;
    flex-wrap:wrap;
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--color-muted);
    margin:0;
}
.note-crumb a{color:inherit;text-decoration:none;transition:color 0.15s ease;}
.note-crumb a:hover{color:var(--color-ink);}
.note-crumb__sep{opacity:0.5;}
.note-crumb__arw{color:var(--color-highlight);}

.note-metarow{
    display:flex;
    gap:1.2rem;
    align-items:center;
    flex-wrap:wrap;
    margin-top:0.9rem;
}
.note-date{
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.04em;
    color:var(--color-muted);
    font-variant-numeric:tabular-nums;
}

/* ---- shared note body prose tweaks ---------------------------------- */
.note-body{color:var(--color-ink);}
.note-body blockquote{
    border-left:3px solid var(--color-highlight);
    font-family:var(--font-display);
    font-style:italic;
}
.note-body code{
    font-family:var(--font-mono);
    background:var(--color-accent-soft);
}

/* =====================================================================
   D1 — CLASSIC
   ===================================================================== */
.note-classic{padding-block:clamp(2.5rem,5vw,4rem);}
.note-classic .note-title{font-size:clamp(2.2rem,5vw,3.4rem);}
.note-classic .note-meta{
    padding-bottom:1.4rem;
    border-bottom:1px solid var(--color-border);
    margin-bottom:2rem;
}

/* =====================================================================
   D2 — MARGIN RAIL (build-log default)
   ===================================================================== */
.note-rail{padding-block:clamp(2rem,4vw,3.5rem);}
.note-rail__grid{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:clamp(2rem,4vw,3.5rem);
    align-items:start;
}
.note-rail__main{max-width:40rem;}
.note-rail__main .note-title{font-size:clamp(2rem,4vw,3rem);margin:1rem 0 0.8rem;}
.note-rail__main .note-lead{font-size:1.2rem;margin-bottom:1.6rem;}

.note-rail__aside{
    display:flex;
    flex-direction:column;
    gap:1rem;
    position:sticky;
    top:80px;
}
@media (max-width:900px){
    .note-rail__grid{grid-template-columns:1fr;}
    .note-rail__aside{position:static;}
}

.note-rbox{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:1.1rem 1.2rem;
    box-shadow:var(--shadow-sm);
}
.note-rbox__label{
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--color-muted);
    margin-bottom:0.6rem;
}
.note-rbox__dl{margin:0;display:grid;gap:0.6rem;}
.note-rbox__dl dt{
    font-family:var(--font-mono);
    font-size:0.58rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--color-muted);
}
.note-rbox__dl dd{margin:0.1rem 0 0;font-size:0.88rem;color:var(--color-ink);}

.note-relmini a{
    display:block;
    font-family:var(--font-display);
    font-size:0.92rem;
    color:var(--color-ink);
    text-decoration:none;
    padding:0.5rem 0;
    border-bottom:1px solid var(--color-border);
    transition:color 0.15s ease;
}
.note-relmini a:last-child{border-bottom:0;}
.note-relmini a:hover{color:var(--color-highlight);}

/* product mini-card — deliberately dark, compact, and high contrast */
.note-prodmini{
    display:block;
    background:var(--color-accent);
    color:var(--color-accent-contrast);
    border-radius:var(--radius-lg);
    padding:1.2rem;
    box-shadow:var(--shadow-sm);
    text-decoration:none;
}
.note-prodmini__k{
    font-family:var(--font-mono);
    font-size:0.58rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    opacity:0.65;
}
.note-prodmini h4{
    font-family:var(--font-display);
    font-size:1.2rem;
    margin:0.4rem 0 0.2rem;
    color:inherit;
}
.note-prodmini p{font-size:0.82rem;opacity:0.78;margin:0 0 0.9rem;}
.note-prodmini__cta{
    font-family:var(--font-mono);
    font-size:0.72rem;
    color:var(--color-highlight);
    display:inline-flex;
    gap:0.4em;
}

/* =====================================================================
   D3 — DECISION RECORD (ADR)
   ===================================================================== */
.note-adr{padding-block:clamp(2rem,4vw,3.5rem);font-feature-settings:"tnum";}
.note-adr .note-col{max-width:46rem;}
.note-adr .note-meta{margin-bottom:1.4rem;}

.note-adr__card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    margin-bottom:2rem;
}
.note-adr__top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:0.5rem;
    padding:0.9rem 1.3rem;
    border-bottom:1px solid var(--color-border);
    background:var(--color-accent-soft);
    font-family:var(--font-mono);
    font-size:0.64rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--color-muted);
}
.note-adr__main{padding:1.4rem;}
.note-adr__main .note-title{
    font-size:clamp(1.8rem,3.6vw,2.6rem);
    line-height:1.08;
    margin:0.6rem 0 0;
}
.note-adr__main .note-lead{font-size:1.05rem;margin:0.8rem 0 0;}

/* Author writes Context / Options / Decision / Consequences as h2 —
   style them as § section headers. */
.note-adr__card + .note-body h2,
.note-adr .note-body h2{
    position:relative;
    font-size:1.3rem;
    padding-left:1.2rem;
    margin-top:1.8rem;
}
.note-adr .note-body h2::before{
    content:"\00a7";
    position:absolute;
    left:0;
    color:var(--color-highlight);
    font-family:var(--font-mono);
    font-weight:400;
}

/* =====================================================================
   D4 — CHANGELOG / RELEASE
   ===================================================================== */
.note-log{padding-block:clamp(2rem,4vw,3.5rem);}
.note-log .note-col{max-width:44rem;}
.note-log .note-meta{margin-bottom:1.4rem;}

.note-log__hero{
    display:flex;
    align-items:flex-end;
    gap:1.4rem;
    flex-wrap:wrap;
    border-bottom:2px solid var(--tc);
    padding-bottom:1.2rem;
    margin-bottom:0.4rem;
}
.note-log__ver{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(2.4rem,7vw,4.5rem);
    line-height:0.95;
    color:var(--color-ink);
    margin:0;
    text-wrap:balance;
}
.note-log__vmeta{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    padding-bottom:0.4rem;
}
.note-log__summ{
    font-size:1.2rem;
    color:var(--color-muted);
    line-height:1.5;
    margin:1.4rem 0 2rem;
    max-width:44ch;
}

/* Author writes Added / Improved / Fixed as h3 + lists — style the h3
   as a labeled group header with a square marker. */
.note-log__body h3{
    display:inline-flex;
    align-items:center;
    gap:0.55em;
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--color-muted);
    margin:1.6rem 0 0.7rem;
}
.note-log__body h3::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:2px;
    background:currentColor;
    flex:none;
}

/* =====================================================================
   D5 — IMMERSIVE STATEMENT (featured)
   ===================================================================== */
.note-imm__hero{
    position:relative;
    overflow:hidden;
    background:var(--color-accent);
    color:var(--color-accent-contrast);
    padding-block:clamp(3rem,7vw,5.5rem);
}
.note-imm__hero .note-col{position:relative;z-index:1;max-width:46rem;}
.note-imm__hero .note-title{
    color:var(--color-accent-contrast);
    font-size:clamp(2.4rem,6vw,4.2rem);
    line-height:1.02;
    max-width:20ch;
    margin:1.2rem 0;
}
.note-imm__hero .note-lead{
    color:var(--color-accent-contrast);
    opacity:0.85;
    font-size:1.3rem;
    max-width:52ch;
}
/* breadcrumb + chip legibility on the dark hero */
.note-imm__hero .note-crumb,
.note-imm__hero .note-date{color:var(--color-accent-contrast);opacity:0.7;}
.note-imm__hero .note-crumb a:hover{color:var(--color-accent-contrast);opacity:1;}
/* immersive hero chip colour + dark-lift handled in the marker block above */

.note-imm__glow{
    position:absolute;
    right:-6%;
    top:-30%;
    width:50%;
    height:160%;
    background:radial-gradient(circle,var(--color-accent-soft),transparent 62%);
    pointer-events:none;
}
.note-imm__body{padding-block:clamp(2.5rem,5vw,4rem);}
.note-imm__body .note-col{max-width:40rem;}
.note-imm__prose{font-size:1.15rem;}
.note-imm__prose > p:first-of-type::first-letter{
    font-family:var(--font-display);
    font-size:3.4rem;
    float:left;
    line-height:0.8;
    padding:0.1em 0.12em 0 0;
    color:var(--color-highlight);
}
.note-imm__prose blockquote{
    background:var(--color-accent-soft);
    border-radius:var(--radius-md);
    padding:1.2rem 1.4rem;
    border-left:0;
    font-family:var(--font-display);
    font-style:normal;
    font-size:1.2rem;
    line-height:1.4;
    color:var(--color-ink);
    margin:1.8rem 0;
}

/* =====================================================================
   RELATED FOOTER (all layouts)
   ===================================================================== */
.note-related{margin-top:2.5rem;}
.note-relgrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0.8rem;
}
@media (max-width:720px){.note-relgrid{grid-template-columns:1fr;}}
.note-relcard{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-left:3px solid var(--tc);
    border-radius:var(--radius-md);
    padding:1rem 1.1rem;
    box-shadow:var(--shadow-sm);
    text-decoration:none;
    transition:box-shadow 0.15s ease,transform 0.15s ease;
}
.note-relcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.note-relcard h4{
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:600;
    line-height:1.25;
    color:var(--color-ink);
    margin:0;
}

/* =====================================================================
   Motion
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
    .note-relcard,
    .note-crumb a,
    .note-relmini a{transition:none;}
    .note-relcard:hover{transform:none;}
}