/* HELPERS TYPOGRAPHY SIZES */
.tt-font-step-5{
    font-size:var(--step-5)
}
.tt-font-step-4{
    font-size:var(--step-4)
}
.tt-font-step-3{
    font-size:var(--step-3)
}
.tt-font-step-2{
    font-size:var(--step-2)
}
.tt-font-step-1{
    font-size:var(--step-1)
}
.tt-font-step-0{
    font-size:var(--step-0)
}
.tt-font-step-negative-1{
    font-size:var(--step--1)
}
.tt-font-step-negative-2{
    font-size:var(--step--2)
}

/* TEXT */
.tt-paragraph {
    color:var(--paragraph-color);
    line-height: 1.4;
    max-width: 60ch;
}

.tt-paragraph sup {
    top: -0.1rem;
}

/* FOOTNOTE MARKER — the raised reference in body copy, and the matching marker
   opening the note it points to. Two steps down the type scale from whatever
   text it sits in: one division by --type-ratio per step, off 1em rather than a
   --step-* token, so it stays proportional in a step-0 paragraph and in a
   step--2 note alike. Browsers size sup at `smaller` (~0.83em), which reads as
   running text rather than a reference. line-height: 0 keeps the raised marker
   from opening up the line it interrupts.

   One class covers both the marker in the copy and the one opening the note, so
   the pair is always the same size. In the copy, write it as an <a> pointing at
   the note's id and do not nest a <sup> inside: the class raises the marker
   itself, and a nested <sup> would shrink it a second time. The href alone jumps
   to the note on click, which is the whole feature on touch, where there is no
   hover; the footnote Stimulus controller adds the hover/focus pairing on top. */
.tt-footnote-ref {
    font-size: calc(1em / (var(--type-ratio) * var(--type-ratio)));
    line-height: 0;
    vertical-align: super;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

a.tt-footnote-ref {
    text-decoration: none;
    cursor: pointer;
}

a.tt-footnote-ref:hover,
.tt-footnote-ref--active {
    color: var(--primary-color);
}

/* THE NOTE — carries the border and padding at rest, in transparent, so
   highlighting it only ever changes colour. Adding the border on activation
   instead would nudge the text sideways every time the pointer crosses a
   marker. scroll-margin keeps the note clear of the viewport edge when the
   marker is followed as a link. */
.tt-footnote {
    border-inline-start: var(--border-md) solid transparent;
    padding-inline-start: var(--space-2xs);
    padding-block: var(--space-3xs);
    scroll-margin-block-start: var(--space-m);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Both selectors are deliberately two classes deep: a note is normally written
   with .tt-text-muted, which sits later in this file and would otherwise win the
   colour on equal specificity, leaving the note's text grey while everything
   around it lit up. (.tt-footnote:target already counts as two.) */
.tt-footnote.tt-footnote--active,
.tt-footnote:target {
    color: var(--paragraph-color);
    background-color: var(--bg-muted);
    border-inline-start-color: var(--primary-color);
}

@media (prefers-reduced-motion: reduce) {
    .tt-footnote-ref,
    .tt-footnote {
        transition: none;
    }
}

.tt-heading {
    color:var(--heading-color);
    line-height:1.1;
}
.tt-heading {
    font-family: "PP Valve Plain", sans-serif;
    font-weight: var(--font-weight-semibold);
}
.tt-font-accent {
    font-family: "PP Valve Stencil", sans-serif;
}

.tt-highlight, .tt-accent {
    font-family: "PP Valve Stencil", sans-serif;
    color: var(--primary-color)
}
.tt-italic {
    font-style: italic;
}
.tt-bold {
    font-weight: var(--font-weight-semibold);
}

/* TEXT COLOR */
.tt-text {
    color: var(--paragraph-color);
}

.tt-text-accent {
    color: var(--accent-color);
}

.tt-text-primary {
    color: var(--primary-color);
}

.tt-text-danger {
    color: var(--danger-color);
}

.tt-text-warning {
    color: var(--warning-color);
}

.tt-text-info {
    color: var(--info-color);
}

.tt-text-success {
    color: var(--success-color);
}
.tt-text-muted {
    color: var(--text-muted);
}
.tt-text-heading {
    color: var(--heading-color);
}
.tt-text-inverted {
    color: var(--bg-light);
}

/* LINKS */
.tt-link-highlight, .tt-link.tt-link-highlight {
    font-family: "PP Valve Stencil", sans-serif;
}

.tt-link-accent, .tt-link.tt-link-accent{
    color: var(--accent-color);
}

.tt-link-primary, .tt-link.tt-link-primary {
    color: var(--primary-color);
}

.tt-link {
    color: var(--link-color);
    display:flex;
    text-decoration: none;
    gap: var(--space-xs);
    cursor: pointer;
}

.tt-link-body {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tt-link-hover {
    text-decoration: none;
}

.tt-link-hover:hover,
.tt-link:hover,
.tt-link-body:hover {
    color: var(--link-hover-color);
}

.tt-link-inline {
    display:inline;
}

/* ICONS */
.tt-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: text-bottom;
    display: inline-block;
    fill: currentColor;
    margin: 0 0.25em;
}

.tt-icon-wrapper {
    width: 1.25em;
    height: 1.25em;
    vertical-align: text-bottom;
    position: relative;
    display: inline-block;
    margin: 0 0.25em;
}

.tt-icon-wrapper .tt-icon-fade,
.tt-theme-toggle .tt-icon-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tt-icon-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute; /* prevent layout shift */
}

/* override for theme-toggle in app. */
[data-headerbg] .header-right .nav-item .tt-icon-wrapper svg.tt-no-stroke path {
    stroke:none;
}

/*LIST STYLES */
.tt-list {
    margin: 1rem;
    padding-left: var(--space-s);
    line-height: 1.6;
    color: var(--paragraph-color);
}

.tt-disc-list {
    list-style-type: disc;
}

.tt-numbered-list {
    list-style-type: decimal;
}

.tt-circled-list {
    list-style-type: circle;
}

.tt-list li {
    margin-bottom: var(--space-2xs);
}

.tt-list--compact {
    margin: 0;
    padding-left: var(--space-2xs);
}

.tt-list--compact li {
    margin-bottom: 0;
}

/* PRODUCTION INFORMATION */
.tt-production-information p {
    color:var(--paragraph-color);
    line-height: 1.4;
}

.tt-production-information a {
    color: var(--link-color);
    display: inline;
    text-decoration: none;
    cursor: pointer;
}
.tt-production-information a:hover {
    color: var(--link-hover-color);
}