/* 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;
}

/* MEASURE OPT-OUT — .tt-paragraph caps at 60ch because on the landing page the
   paragraph is the only thing setting the line length, and nothing around it
   bounds the column. Inside a card it is one block among several — an alert, an
   input group, a list — that all run to the card's edge, and the cap is then
   what makes the block look ragged: a gap down the right of the prose while
   everything beside it spans the card. The container is the measure there.

   The counterpart to .tt-w-prose (layout.css), which opts a mixed block into the
   same cap, and the same escape .tt-prose takes for its own paragraphs. Opt-in
   rather than a blanket rule for cards, because the app content column has no
   width cap of its own: on a wide screen an unbounded paragraph runs well past
   a comfortable line, so dropping the measure is a judgement per block. */
.tt-paragraph--full {
    max-width: none;
}

.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;
}

/* A control that acts on the page but reads as a link. Everything a browser puts
   on a button of its own accord is taken off here rather than left to the reset,
   which only reaches inside section/header/main/footer/nav - a modal is built on
   the body and would keep its border. */
.tt-link-button {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: inherit;
}

/* 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);
}