/* STL Cloud Capture - portal styles
   -------------------------------------------------------------------------
   Lifted out of the page block so the markup is workable in PageFly's editor,
   and so the browser caches it between visits.

   Everything is scoped under #tt-capture, with two deliberate exceptions: the
   .tt-dlg dialogs and the #tt-toasts layer are appended to document.body and
   would be unstyled if they were scoped.

   Versioning
   ----------
   The page points at one exact URL for each of these, so a change goes up
   under a new filename and the page's tags change to match, in the same
   sitting. Overwriting means Cloudflare serves a cached copy of the old file
   and you spend an afternoon debugging code you already fixed.

   Numbered 1.0.0 from the public release onward. Before that they ran as plain
   incrementing integers across three files that were never in step with each
   other - the stylesheet reached 7 while the script reached 13 - which made it
   impossible to say which combination anybody was running. All three now move
   together: bump the patch for a fix, the minor for a feature, and change all
   three at once even when only one of them changed, so a version number
   identifies a whole page rather than a third of one.

   History
   -------
   Every version of these three files, and the reasoning behind each
   change, is in CHANGELOG.md in this repo. It used to live here, in all
   three of them - the same 2,945 lines copied three times, 40% of
   everything a visitor downloads.

   This file is stl-cloud-capture-0.7.109.css.
*/

@font-face {
        font-family: 'SF Pro';
        src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/blinkmacsystemfont-regular.woff2?v=1776780716') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: 'SF Pro';
        src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/BlinkMacSystemFont-Semibold.woff2?v=1779123415') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: 'SF Pro';
        src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/blinkmacsystemfont-bold.woff2?v=1776780464') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap
    }

    #tt-capture {
        --tt-bg: #000;
        --tt-card: #0e0e0e;
        --tt-card2: #1a1a1a;
        --tt-line: rgba(255, 255, 255, .06);
        --tt-line2: rgba(255, 255, 255, .1);
        --tt-ink: #fff;
        --tt-muted: rgba(255, 255, 255, .6);
        --tt-faint: rgba(255, 255, 255, .35);
        --tt-green: #30d223;
        --tt-amber: #ffc200;
        --tt-amber2: #ff9500;
        --tt-red: #ff4d4f;
        --tt-font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        max-width: 1540px;
        margin: 0 auto;
        padding: 156px 40px 100px;
        background: var(--tt-bg);
        color: var(--tt-ink);
        font-family: var(--tt-font);
        font-size: 17px;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        text-align: left
    }

    #tt-capture * {
        box-sizing: border-box
    }

    #tt-gate {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 40px;
        background: var(--tt-card2);
        color: #fff;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        text-align: center
    }

    #tt-gate p {
        color: rgba(255, 255, 255, .6);
        margin: 0 0 28px;
        font-size: 17px;
        line-height: 1.5
    }

    #tt-gate .tt-loginform {
        text-align: left;
        margin-top: 4px
    }

    #tt-gate .tt-lgdot {
        margin: 0 8px
    }

    #tt-capture .tt-topbar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: -60px 0 28px
    }

    #tt-capture .tt-user {
        position: relative
    }

    /* The chip while it is finding out who this is.
       
       A bar the width a name usually is, breathing slowly. It replaces showing
       the Shopify name and then correcting it, which read as a mistake being
       fixed rather than as loading. Only ever seen on a first visit - after
       that the name is remembered and the chip is right immediately. */
    #tt-capture .tt-nmwait {
        display: inline-block;
        width: 76px;
        height: 11px;
        border-radius: 6px;
        background: rgba(255, 255, 255, .14);
        animation: tt-nmpulse 1.4s ease-in-out infinite
    }

    @keyframes tt-nmpulse {
        0%, 100% {
            opacity: .45
        }

        50% {
            opacity: .9
        }
    }

    /* Somebody who would rather things did not move gets the bar without the
       breathing, which still reads as waiting. */
    @media (prefers-reduced-motion: reduce) {
        #tt-capture .tt-nmwait {
            animation: none
        }
    }

    #tt-capture .tt-user-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid var(--tt-line2);
        border-radius: 999px;
        padding: 5px 14px 5px 5px;
        cursor: pointer;
        font-family: var(--tt-font);
        color: rgba(255, 255, 255, .75);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em;
        transition: background .15s, color .15s, border-color .15s
    }

    #tt-capture .tt-user-btn:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        border-color: rgba(255, 255, 255, .16);
        color: rgba(255, 255, 255, .75)
    }

    #tt-capture .tt-user-av {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
        background: var(--tt-card2);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
        display: flex;
        align-items: center;
        justify-content: center
    }

    #tt-capture .tt-user-av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-user-av.tt-user-av-txt {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.02em
    }

    #tt-capture .tt-user-av-lg {
        width: 44px;
        height: 44px
    }

    #tt-capture .tt-user-av-lg.tt-user-av-txt {
        font-size: 19px
    }

    #tt-capture .tt-user-cv {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: .6;
        transition: transform .15s
    }

    #tt-capture .tt-user-open .tt-user-cv {
        transform: rotate(180deg)
    }

    #tt-capture .tt-user-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 240px;
        background: var(--tt-card);
        border: 1px solid var(--tt-line2);
        border-radius: 14px;
        padding: 6px;
        z-index: 40;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity .15s, transform .15s, visibility .15s
    }

    #tt-capture .tt-user-open .tt-user-menu {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    #tt-capture .tt-user-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px 14px;
        border-bottom: 1px solid var(--tt-line);
        margin-bottom: 6px
    }

    #tt-capture .tt-user-card-t {
        min-width: 0
    }

    #tt-capture .tt-user-card-nm {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-user-card-em {
        font-size: 13px;
        color: var(--tt-faint);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-user-mi {
        display: block;
        padding: 9px 12px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 500;
        color: var(--tt-muted);
        text-decoration: none;
        transition: background .12s, color .12s
    }

    #tt-capture .tt-user-mi:hover {
        background: var(--tt-card2);
        color: rgba(255, 255, 255, .85)
    }

    #tt-capture button.tt-user-mi-btn {
        width: 100%;
        text-align: left;
        border: none;
        background: none;
        font-family: var(--tt-font);
        cursor: pointer
    }

    #tt-capture button.tt-user-mi-btn:hover {
        background: var(--tt-card2);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-user-mi-out {
        color: var(--tt-faint)
    }

    /* Sign in, in the account chip's place, for somebody who is not signed in.
       The same pill as the chip - it inherits .tt-user-btn - with a person
       the page's account icon where the photo goes - the one any capture or
       pack without an image shows - so the top of the page looks the same
       signed in or not and the way to sign in is where the account will be. */
    /* Black behind the icon, as the capture and pack thumbnails that show the
       same icon have it - rather than the grey the account chip's avatar uses
       behind a photo. */
    #tt-capture .tt-signin-av {
        background: #000;
        color: #fff
    }

    /* The page's account icon (accountGlyph) at its usual 50% of the circle,
       in full white on the black circle - at the chip's 75% it read dark
       against it - rather than the thumbnails' dimmer grey, since here it is
       part of a button. */
    #tt-capture .tt-signin-av .tt-glyph {
        fill: currentColor
    }

    #tt-capture .tt-signin-chip:hover .tt-signin-av,
    #tt-capture .tt-signin-chip:hover .tt-signin-nm {
        color: #fff
    }

    @media (max-width:640px) {
        #tt-capture .tt-topbar {
            margin: -44px 0 18px
        }

        #tt-capture .tt-user-btn {
            padding: 5px 12px 5px 5px;
            gap: 8px
        }

        #tt-capture .tt-user-menu {
            min-width: 220px
        }
    }

    #tt-capture .tt-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0 0 10px
    }

    #tt-capture h1 {
        font-size: 34px;
        font-weight: 700;
        letter-spacing: -.02em;
        margin: 0;
        color: #fff;
        text-transform: none
    }

    #tt-capture .tt-lede {
        color: var(--tt-muted);
        margin: 0 0 10px;
        max-width: 92ch;
        font-size: 17px
    }

    #tt-capture .tt-lede-how {
        color: rgba(255, 255, 255, .75);
        margin: 0 0 34px
    }

    #tt-capture .tt-link {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, .35);
        transition: color .15s, border-color .15s;
        letter-spacing: -.02em
    }

    #tt-capture .tt-link:hover {
        color: #fff;
        border-bottom-color: #fff
    }

    #tt-capture .tt-link:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px
    }

    #tt-capture .tt-cardhead .tt-instructions-line {
        margin: 0;
        flex: none
    }

    @media (max-width:640px) {
        #tt-capture #tt-recordcard .tt-cardhead {
            flex-wrap: wrap;
            gap: 8px
        }

        #tt-capture #tt-recordcard .tt-cardhead h2 {
            flex: 1 0 100%
        }
    }

    #tt-capture .tt-instructions-line {
        margin: 0 0 22px
    }

    #tt-capture .tt-instructions-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--tt-muted);
        font-size: 15px;
        font-weight: 400;
        text-decoration: none;
        border-bottom: none;
        transition: color .15s
    }

    #tt-capture .tt-instructions-link:hover {
        color: #fff
    }

    #tt-capture .tt-instructions-link svg {
        width: 17px;
        height: 17px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round
    }

    #tt-capture .tt-instructions-link svg .tt-dot-fill {
        fill: currentColor;
        stroke: none
    }

    #tt-capture .tt-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px
    }

    #tt-capture .tt-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .75)
    }

    #tt-capture .tt-modal-panel {
        position: relative;
        background: var(--tt-card);
        border: 1px solid var(--tt-line2);
        border-radius: 20px;
        max-width: 720px;
        width: 100%;
        max-height: 86vh;
        display: flex;
        flex-direction: column;
        overflow: hidden
    }

    #tt-capture .tt-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 26px;
        border-bottom: 1px solid var(--tt-line)
    }

    #tt-capture .tt-modal-title {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.02em;
        margin: 0;
        color: #fff;
        text-transform: none
    }

    /* The close button both this page and ControlHub use: a drawn circle with
       a white cross in it, 46px, the circle #3a3a3a and lightening on hover.
       The drawing carries no colours of its own so the stylesheet can set
       them. */
    #tt-capture button.tt-modal-close {
        width: 46px;
        height: 46px;
        flex: none;
        padding: 0;
        background: transparent;
        background-image: none;
        border: none;
        border-radius: 50%;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #tt-capture .tt-modal-close svg {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none
    }

    #tt-capture .tt-modal-close circle {
        fill: #3a3a3a;
        transition: fill .15s ease
    }

    #tt-capture .tt-modal-close g {
        stroke: #fff
    }

    #tt-capture button.tt-modal-close:hover:not(:disabled) {
        background: transparent
    }

    #tt-capture .tt-modal-close:hover circle {
        fill: #4a4a4a
    }

    #tt-capture .tt-modal-body {
        padding: 22px 26px 28px;
        overflow-y: auto
    }

    /* First thing in the body now that the intro paragraph is gone, so it
       carries the top margin the paragraph used to. */
    #tt-capture .tt-modal-tabs {
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        background: var(--tt-card2);
        border-radius: 999px;
        margin-bottom: 20px
    }

    #tt-capture .tt-mtab {
        background: transparent;
        color: var(--tt-muted);
        border-radius: 999px;
        padding: 7px 16px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em
    }

    #tt-capture .tt-mtab.tt-mtab-on {
        background: #fff;
        background-image: none;
        color: #000
    }

    #tt-capture .tt-mtab:hover:not(.tt-mtab-on) {
        background: rgba(255, 255, 255, .06);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-modal-note {
        color: var(--tt-muted);
        font-size: 15px;
        margin: 0 0 22px
    }

    #tt-capture .tt-step {
        display: flex;
        gap: 16px;
        margin-bottom: 20px
    }

    #tt-capture .tt-step-n {
        flex: none;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: -.02em
    }

    #tt-capture .tt-step-b h4 {
        margin: 2px 0 5px;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        text-transform: none
    }

    #tt-capture .tt-step-b p {
        margin: 0;
        font-size: 15px;
        color: var(--tt-muted);
        line-height: 1.55
    }

    @media (max-width:640px) {
        #tt-capture .tt-modal-panel {
            max-height: 92vh
        }

        #tt-capture .tt-modal-head,
        #tt-capture .tt-modal-body {
            padding-left: 18px;
            padding-right: 18px
        }
    }

    #tt-capture .tt-card {
        background: var(--tt-card);
        border: 1px solid var(--tt-line);
        border-radius: 20px;
        padding: 24px;
        margin: 0 0 16px
    }

    #tt-capture .tt-card h2 {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
        text-transform: none;
        color: #fff;
        margin: 0 0 18px
    }

    #tt-capture .tt-modes {
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        background: var(--tt-card2);
        border-radius: 999px;
        margin-bottom: 12px
    }

    #tt-capture .tt-mode {
        background: transparent;
        color: var(--tt-muted);
        border-radius: 999px;
        padding: 8px 18px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em
    }

    #tt-capture .tt-mode.tt-mode-on {
        background: var(--tt-green);
        color: #000
    }

    #tt-capture .tt-mode:hover:not(.tt-mode-on) {
        background: rgba(255, 255, 255, .06);
        color: #fff
    }

    /* How somebody chooses a method, and what they do once they have.

       Three cards across, then one panel of numbered steps for whichever card
       is on. The rules above for .tt-modes and .tt-mode are the tabs these
       replaced; they stay until the page's markup is republished, since a page
       still serving the tabs with this stylesheet would otherwise lose them.

       The cards borrow the capture type cards' vocabulary - the same line,
       the same radius, the green edge and wash when chosen - because they are
       the same kind of control two steps apart and should read that way.

       The chosen card has a solid 2px edge of the brand green, and no wash
       behind it - the card keeps the same surface as the other two and the
       edge alone says which is chosen, with the green icon tile. Matched to
       a reference screenshot: 4px of green at 2x.

       Two pixels against the other cards' one, so the chosen card gives a
       pixel of padding back on every side and nothing inside it moves. The
       phone padding below does the same. One border rather than a border
       and an inset ring, which is what left a seam at the corners before. */
    /* Half-white: 5.3:1 on the card. The page's faintest grey, which it
       was, measures 3.2:1 - under the 4.5:1 that small text needs to be
       comfortable to read - and it is still a step below the cards'
       descriptions (7.3:1), so it stays a label rather than a heading. */
    /* The line under the details heading when one form covers several files.
       The heading's own margin is taken up so the two read as one block. */
    #tt-capture .tt-settings-note {
        margin: -10px 0 20px;
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .5)
    }

    #tt-capture .tt-modeask {
        margin: 0 0 16px;
        font-size: 14px;
        color: rgba(255, 255, 255, .5)
    }

    #tt-capture .tt-mcards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 0 0 14px
    }

    /* The icon tile on the left, centred top to bottom, and the name with
       its one line underneath in a column beside it, centred on the tile.
       Matched to a reference screenshot at 3x: a 58px tile with a 30px icon,
       19px to the words, and the two lines centred on the tile's middle.

       No radio dot. The 2px green edge, the green tile and the green icon say
       which card is chosen, and each card is still a radio to a screen
       reader - role="radio" with aria-checked, which setMode keeps current. */
    #tt-capture button.tt-mcard {
        display: flex;
        align-items: center;
        gap: 19px;
        width: auto;
        margin: 0;
        padding: 23px 18px;
        text-align: left;
        border: 1px solid var(--tt-line2);
        border-radius: 17px;
        background: rgba(255, 255, 255, .025);
        background-image: none;
        color: var(--tt-ink);
        font-weight: 400;
        line-height: 1.45;
        box-shadow: none;
        transition: border-color .15s, background .15s
    }

    #tt-capture button.tt-mcard:hover:not(.tt-mode-on) {
        border-color: rgba(255, 255, 255, .18);
        background: rgba(255, 255, 255, .05)
    }

    #tt-capture button.tt-mcard.tt-mode-on {
        border: 2px solid var(--tt-green);
        padding: 22px 17px
    }

    #tt-capture .tt-mcard-icon {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .07);
        color: #fff;
        transition: background .15s, color .15s
    }

    #tt-capture .tt-mcard-icon svg {
        width: 30px;
        height: 30px
    }

    #tt-capture .tt-mode-on .tt-mcard-icon {
        background: rgba(48, 210, 35, .14);
        color: var(--tt-green)
    }

    /* The description is written to fit one line at desktop widths; where
       the column is narrower it wraps rather than being cut off, and the
       tile stays centred on however many lines there are. */
    #tt-capture .tt-mcard-text {
        display: flex;
        flex-direction: column;
        min-width: 0
    }

    #tt-capture .tt-mcard-name {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.3;
        color: #fff
    }

    #tt-capture .tt-mcard-desc {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.45;
        color: var(--tt-muted)
    }

    #tt-capture .tt-howpanel {
        border: 1px solid var(--tt-line);
        border-radius: 16px;
        background: rgba(255, 255, 255, .015);
        padding: 0 22px
    }

    /* A step is its number, what to do, and - when the page can do it for
       you - a button on the right. Whatever the step needs underneath (a drop
       zone, the pair zones, the file list) runs the full width of the panel,
       under the number as well as the words. It used to start under the
       words, which left Tracer Tone's drop zone narrower than Dry + Wet
       Pair's, whose step has no number - and the two read as different sizes
       for no reason when you switch between them. */
    #tt-capture .tt-hstep {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) auto;
        column-gap: 14px;
        align-items: center;
        padding: 20px 0
    }

    #tt-capture .tt-hstep + .tt-hstep {
        border-top: 1px solid var(--tt-line)
    }

    #tt-capture .tt-hstep-n {
        grid-column: 1;
        grid-row: 1;
        width: 26px;
        height: 26px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
        color: var(--tt-muted);
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #tt-capture .tt-hstep-t {
        grid-column: 2;
        grid-row: 1;
        min-width: 0
    }

    #tt-capture .tt-hstep-t h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.35;
        color: #fff
    }

    #tt-capture .tt-hstep-t p {
        margin: 3px 0 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--tt-muted)
    }

    #tt-capture .tt-hstep-body {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 16px;
        min-width: 0
    }

    /* The same outline as Browse files beneath it: an action that belongs to
       the step, not the page's main button. */
    #tt-capture button.tt-hstep-act {
        grid-column: 3;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        padding: 10px 18px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 10px;
        background: transparent;
        background-image: none;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        transition: border-color .15s, background .15s
    }

    #tt-capture button.tt-hstep-act:hover {
        border-color: rgba(255, 255, 255, .45);
        background: rgba(255, 255, 255, .06)
    }

    #tt-capture button.tt-hstep-act[aria-busy="true"] {
        cursor: progress
    }

    #tt-capture button.tt-hstep-act svg {
        width: 17px;
        height: 17px;
        flex: none
    }

    /* Live's Get started takes the same place the Download button has in
       Tracer Tone's first step. It stays the page's white button rather than
       the outline, because here it is the way into everything that follows,
       not a side errand. */
    #tt-capture .tt-hstep #tt-livebegin {
        grid-column: 3;
        grid-row: 1;
        margin: 0
    }

    /* A step on its own is not numbered - a list of one is not a list. The
       number's column goes with it, so the words start at the panel edge. */
    /* Two classes, so this outranks the phone rule that sets the numbered
       columns further down the file. */
    #tt-capture .tt-hstep.tt-hstep-solo {
        grid-template-columns: minmax(0, 1fr)
    }

    #tt-capture .tt-hstep-solo .tt-hstep-t {
        grid-column: 1
    }

    /* Files are in: the card is about them.

       The script sets tt-staged on the record card while the flow is on its
       first step with files added. The method cards and their prompt go, and
       so do Tracer Tone's step headings - they say how to get here, and
       somebody reading this has. Home clears it, which is the way back to the
       cards.

       The drop zone stays, as a strip: dragging more files in still works,
       and a full-size "Drop your WAVs here" above a finished upload read as
       though the upload had not happened. Dry + Wet Pair keeps its heading
       and zones as they are, since there the zones are the files. */
    #tt-capture .tt-staged .tt-modeask,
    #tt-capture .tt-staged .tt-mcards {
        display: none
    }

    #tt-capture .tt-staged #tt-single > .tt-hstep:first-child,
    #tt-capture .tt-staged #tt-single .tt-hstep-n,
    #tt-capture .tt-staged #tt-single .tt-hstep-t {
        display: none
    }

    #tt-capture .tt-staged #tt-single .tt-hstep {
        border-top: 0
    }

    #tt-capture .tt-staged #tt-single .tt-hstep-body {
        margin-top: 0
    }

    #tt-capture .tt-staged #tt-drop {
        padding: 16px 20px
    }

    #tt-capture .tt-staged #tt-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 14px;
        row-gap: 8px
    }

    #tt-capture .tt-staged #tt-drop .tt-dropicon {
        display: none
    }

    #tt-capture .tt-staged #tt-drop .tt-big {
        font-size: 15px;
        margin: 0
    }

    #tt-capture .tt-staged #tt-drop .tt-specline {
        margin: 0;
        font-size: 13px
    }

    #tt-capture .tt-staged #tt-drop .tt-dropbtn {
        margin: 0;
        padding: 8px 18px;
        font-size: 14px
    }

    /* One card per row below 900px.

       It was 760px, and between about 760 and 820 three cards across left
       "Dry + Wet Pair" too little room and it broke onto two lines. Stacking
       from 900 leaves a clear margin over the widest width it wrapped at, and
       matches the 900px point where the steps below change too.

       Stacked, the cards keep their tile-and-words shape with less padding.
       On a phone the tile comes down to 50px, which gives the words the
       room back. The chosen card still gives a pixel back for its thicker
       edge, so nothing inside moves. */
    @media (max-width:900px) {
        #tt-capture .tt-mcards {
            grid-template-columns: 1fr;
            gap: 10px
        }

        #tt-capture button.tt-mcard {
            padding: 16px 16px
        }

        #tt-capture button.tt-mcard.tt-mode-on {
            padding: 15px 15px
        }
    }

    @media (max-width:640px) {
        #tt-capture button.tt-mcard {
            gap: 16px
        }

        #tt-capture .tt-mcard-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px
        }

        #tt-capture .tt-mcard-icon svg {
            width: 26px;
            height: 26px
        }
    }

    /* Where a description can wrap, the number sits beside the heading
       rather than halfway down the paragraph. Only steps that have one - a
       step that is just a heading and a button stays centred on the button,
       and a browser without :has() keeps everything centred, which is how it
       looked before this rule existed. Centred is right when the words
       are two short lines, which on a wide screen they are; at three lines the
       number stops belonging to anything. -2px lines its middle up with the
       heading's, which is a shorter line than the circle is tall. */
    @media (max-width:900px) {
        #tt-capture .tt-hstep:has(.tt-hstep-t p) {
            align-items: start
        }

        #tt-capture .tt-hstep:has(.tt-hstep-t p) .tt-hstep-n {
            margin-top: -2px
        }

        #tt-capture button.tt-hstep-act,
        #tt-capture .tt-hstep #tt-livebegin {
            align-self: center
        }
    }

    /* And the step's button drops under its words, with whatever the step
       holds taking the panel's full width - half an inch of indent is worth
       more as drop zone on a phone. */
    @media (max-width:640px) {
        #tt-capture .tt-howpanel {
            padding: 0 16px
        }

        #tt-capture .tt-hstep {
            grid-template-columns: 26px minmax(0, 1fr)
        }

        #tt-capture button.tt-hstep-act,
        #tt-capture .tt-hstep #tt-livebegin {
            grid-column: 2;
            grid-row: 2;
            justify-self: start;
            margin-top: 12px
        }

        #tt-capture .tt-hstep-body {
            grid-row: 3
        }
    }


    #tt-capture .tt-capnote {
        margin: 0 0 18px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--tt-faint);
        max-width: 78ch
    }

    @media (min-width:1100px) {
        #tt-capture .tt-capnote {
            max-width: none;
            white-space: nowrap
        }
    }

    #tt-capture .tt-modenote {
        margin: 0 0 12px;
        font-size: 14px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-pairgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    #tt-capture .tt-zonelabel {
        font-size: 13px;
        font-weight: 600;
        color: var(--tt-faint);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 8px
    }

    #tt-capture .tt-filelist {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    /* A step that cannot be completed because the recording is unusable.
       
       Dimmed and inert rather than hidden - somebody part-way through filling
       this in should still see where they were, and the red problem line above
       says why it has stopped. */
    #tt-capture .tt-card.tt-stalled {
        opacity: .4;
        pointer-events: none
    }

    #tt-capture .tt-card.tt-stalled h2 {
        opacity: 1
    }

    /* A file with something wrong enough to stop it training. The whole card
       dims so it is plainly out of the running, and the problem lines keep
       their colour because they are the part worth reading. */
    #tt-capture .tt-fileitem[data-unusable="1"] {
        opacity: .55
    }

    #tt-capture .tt-fileitem[data-unusable="1"] .tt-filestat,
    #tt-capture .tt-fileitem[data-unusable="1"] .tt-filename-input {
        opacity: 1
    }

    #tt-capture .tt-details-btn:disabled {
        opacity: .5;
        cursor: default
    }

    /* A field that has been filled in.

       On the label rather than in the input: the gear fields draw chips inside
       themselves, and a tick in there would sit on top of them.

       Drawn from two borders rather than an SVG mask. A mask needs both the
       prefixed and unprefixed property and fails to nothing when either is
       missing, which for a confirmation mark means it simply never appears -
       and nobody reports a tick that was never there. */
    #tt-capture .tt-lbl::after {
        content: "";
        width: 5px;
        height: 9px;
        border-style: solid;
        border-color: #fff;
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg) scale(.5);
        transform-origin: center;
        /* Space is held whether or not it is showing, so a label does not
           shift sideways the moment its field is filled in. */
        opacity: 0;
        margin-bottom: 3px;
        transition: opacity .16s ease, transform .16s ease
    }

    #tt-capture .tt-lbl.tt-lbl-done::after {
        opacity: 1;
        transform: rotate(45deg) scale(1)
    }

    /* --- selecting captures in a batch ---------------------------------- */

    #tt-capture .tt-batchsel {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 10px
    }

    #tt-capture .tt-batchsel-count {
        flex: 1;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff
    }

    #tt-capture .tt-batchsel-edit,
    #tt-capture .tt-batchsel-clear {
        border: 0;
        border-radius: 999px;
        font-family: var(--tt-font);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.02em;
        padding: 7px 15px;
        cursor: pointer;
        flex: none
    }

    #tt-capture .tt-batchsel-edit {
        background: #fff;
        color: #000
    }

    #tt-capture .tt-batchsel-clear {
        background: rgba(255, 255, 255, .09);
        color: rgba(255, 255, 255, .75)
    }

    /* The tick itself. Round, because it selects rather than toggles a
       setting - a square would read as a checkbox for an option. */
    /* A faint fill rather than nothing behind the ring.
       
       Transparent, the circle was a hairline over whatever the row happened to
       put behind it - a waveform, a card edge - and on the busier rows there
       was nothing to aim at. The fill is dark enough not to read as a state. */
    #tt-capture button.tt-tick {
        width: 22px;
        height: 22px;
        min-width: 0;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, .35);
        background: rgba(255, 255, 255, .06);
        background-image: none;
        padding: 0;
        flex: none;
        position: relative;
        cursor: pointer;
        align-self: center;
        transition: border-color .15s, background .15s, box-shadow .15s
    }

    /* The ring brightens; the middle stays where it was.
       
       Hovering used to fill the circle almost white. Not from here - this rule
       has always said transparent - but from the page's own
       #tt-capture button:hover, which paints every button #dcdcdc and carries
       an id and seventeen :not()s, so it outranked this by a distance. A
       selected circle went pale green through the same rule. The circle is
       exempt from it now, like the other buttons that are not pills. */
    #tt-capture button.tt-tick:hover {
        border-color: rgba(255, 255, 255, .75);
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture button.tt-tick.tt-tick-on {
        background: var(--tt-green);
        border-color: var(--tt-green)
    }

    /* A halo rather than a change of fill, so a selected circle answers the
       pointer without losing the colour that says it is selected. */
    #tt-capture button.tt-tick.tt-tick-on:hover {
        background: var(--tt-green);
        border-color: var(--tt-green);
        box-shadow: 0 0 0 3px rgba(48, 210, 35, .22)
    }

    /* Two borders, not a mask. A mask needs two properties supported and fails
       to nothing when either is missing, which for a confirmation mark means it
       simply never appears - which is why it was drawn this way in 2.2.1.
       
       Kept black on the green. The green is a bright lime and a white mark on
       it is the one pairing here that is genuinely hard to read.
       
       The ends are rounded and the stroke is thinner, which is most of what
       separates a drawn checkmark from two borders meeting at a corner. */
    #tt-capture button.tt-tick.tt-tick-on::after {
        content: "";
        position: absolute;
        left: 6.5px;
        top: 3px;
        width: 5px;
        height: 9.5px;
        border: solid #000;
        border-width: 0 1.75px 1.75px 0;
        border-radius: 0 0 1.5px 0;
        transform: rotate(45deg)
    }

    /* The capture type, on the row. Sized to sit beside the buttons rather
       than to fill the width the way a form field does. */
    /* The capture type, on the row.
       
       align-self: center rather than the flex default, because the name and
       its second line make the middle of the row taller than this - stretched
       it sat low against everything beside it. */
    /* The name field and its controls on one line. */
    #tt-capture .tt-namerow {
        display: flex;
        align-items: center;
        gap: 10px
    }

    #tt-capture .tt-namerow .tt-filename-input {
        flex: 1;
        min-width: 0;
        margin: 0
    }

    /* The capture type. Left to look like every other dropdown on the page -
       it was styled as a pill to match the buttons beside it, which made the
       one control that holds a value look like the two that perform an
       action. Only its width is changed, so it sits beside them rather than
       filling the row. */
    #tt-capture select.tt-rowtype {
        flex: none;
        width: auto;
        min-width: 140px;
        margin: 0
    }

    /* Nothing to say when no type has been chosen - the note under the list
       says what is missing, and this used to shout in amber, which is this
       page's colour for something wrong. */
    #tt-capture select.tt-rowtype.tt-rowtype-unset {
        color: #fff
    }

    #tt-capture .tt-fileitem {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 12px;
        padding: 14px 16px
    }

    #tt-capture .tt-filehead {
        display: flex;
        align-items: center;
        gap: 14px
    }

    #tt-capture .tt-fileitem.tt-fileitem-bad {
        border-color: rgba(255, 77, 79, .4)
    }

    #tt-capture .tt-fileitem canvas {
        width: 120px;
        height: 40px;
        flex: none;
        border-radius: 6px;
        background: #000
    }

    #tt-capture .tt-fileinfo {
        flex: 1;
        min-width: 0
    }

    #tt-capture .tt-filestat {
        font-size: 13px;
        color: var(--tt-faint);
        margin-top: 3px
    }

    #tt-capture .tt-filestat.tt-bad {
        color: var(--tt-red)
    }

    /* A warning under a dropped file, in the same amber and with the same
       mark as the checks in the drop zone - so it is recognisable as one
       rather than as more grey text about the file. */
    #tt-capture .tt-filewarn {
        display: flex;
        gap: 6px;
        align-items: flex-start;
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--tt-amber)
    }

    /* As wide as the mark, not the 12px box the drop zone checks use.
       That width is set for the tick and the cross; an exclamation mark is
       half of it, so it sat at the left of a box with a hole after it and
       the gap read as an indent. */
    #tt-capture .tt-filewarn .tt-mark {
        width: auto;
        flex: 0 0 auto;
        font-weight: 700;
        line-height: 1.45
    }

    #tt-capture .tt-upline {
        font-size: 12px;
        margin-top: 8px;
        letter-spacing: -.01em
    }

    #tt-capture .tt-upline[data-state="busy"] {
        color: rgba(255, 255, 255, .55)
    }

    #tt-capture .tt-upline[data-state="done"] {
        color: var(--tt-green)
    }

    /* Uploaded, but the recording cannot be trained on. Deliberately quiet:
       the red problem line above it is the thing to read, and a second
       coloured line competing with it helps nobody. */
    #tt-capture .tt-upline[data-state="idle"] {
        color: var(--tt-faint)
    }

    #tt-capture .tt-upline[data-state="bad"] {
        color: var(--tt-amber)
    }

    #tt-capture .tt-fileitem .tt-filedrop {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: var(--tt-muted);
        padding: 5px 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.02em;
        border-radius: 999px;
        flex: none
    }

    #tt-capture .tt-fileitem .tt-filedrop:hover:not(:disabled) {
        background: rgba(255, 77, 79, .12);
        background-image: none;
        border-color: rgba(255, 77, 79, .5);
        color: var(--tt-red)
    }

    #tt-capture .tt-fileinfo .tt-lbl {
        display: block;
        margin-bottom: 5px
    }

    #tt-capture .tt-filename-input {
        background: #000;
        border: 1px solid var(--tt-line2);
        color: #fff;
        border-radius: 6px;
        padding: 7px 10px;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.02em;
        width: 100%;
        margin-bottom: 4px
    }

    #tt-capture .tt-filename-input:focus {
        outline: none;
        border-color: rgba(255, 255, 255, .55)
    }

    #tt-capture .tt-details-btn {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: var(--tt-muted);
        padding: 5px 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.02em;
        border-radius: 999px;
        flex: none
    }

    #tt-capture .tt-details-btn:hover:not(:disabled) {
        background: rgba(255, 255, 255, .06);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-details-btn.tt-details-need {
        border-color: var(--tt-amber);
        color: var(--tt-amber)
    }

    #tt-capture .tt-details-btn.tt-details-set {
        border-color: rgba(255, 255, 255, .45);
        color: #fff
    }

    #tt-capture .tt-details {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--tt-line);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
    }


    /* Nothing here. These fields used to be shrunk - smaller text, tighter
       padding, a black background - on the reasoning that a per-file panel is
       secondary to the main form. It only made them look like a different,
       cheaper control for entering exactly the same things, and it is the same
       work whichever way somebody arrives at it. They now inherit the shared
       input style, so the two are identical. */

    /* A field that wants the whole row of the details grid. Only the genre chips
   so far, which are twelve buttons and would otherwise stack four deep in a
   third of the panel's width. */
#tt-capture .tt-details .tt-field-full {
    grid-column: 1 / -1
}

#tt-capture .tt-details-note {
        grid-column: 1 / -1;
        font-size: 13px;
        color: var(--tt-faint)
    }

    @media (max-width:700px) {
        #tt-capture .tt-details {
            grid-template-columns: 1fr
        }
    }

    #tt-capture .tt-batchbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 14px
    }

    #tt-capture .tt-batchcount {
        flex: 1;
        font-size: 14px;
        color: var(--tt-faint)
    }

    @media (max-width:640px) {
        #tt-capture .tt-fileitem canvas {
            display: none
        }
    }

    /* The empty zones are about 10% shorter than they were, for vertical
       room: less padding, and slightly tighter gaps between icon, words and
       button, rather than padding alone - so they are shorter without looking
       squeezed. Filled zones (.tt-has) keep their own padding. */
    #tt-capture .tt-drop-sm {
        padding: 18px 16px
    }

    #tt-capture .tt-drop-sm.tt-has {
        padding: 14px
    }

    #tt-capture .tt-drop-sm canvas {
        height: 64px
    }

    #tt-capture .tt-drop-sm .tt-big {
        font-size: 15px
    }

    #tt-capture #tt-paircheck {
        margin-top: 16px
    }

    @media (max-width:640px) {
        #tt-capture .tt-pairgrid {
            grid-template-columns: 1fr
        }
    }

    #tt-capture .tt-drop {
        border: 1px dashed var(--tt-line2);
        border-radius: 16px;
        padding: 30px 20px;
        text-align: center;
        cursor: pointer;
        background: var(--tt-card2);
        transition: border-color .15s, background .15s
    }

    #tt-capture .tt-drop:hover,
    #tt-capture .tt-drop.tt-over {
        border-color: rgba(255, 255, 255, .35);
        background: #141414
    }

    #tt-capture .tt-drop:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px
    }

    #tt-capture .tt-drop.tt-has {
        padding: 18px;
        text-align: left;
        cursor: default
    }

    #tt-capture .tt-big {
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -.02em;
        margin-bottom: 6px
    }

    /* The three drop zones read the same way: what it takes, what it wants, and
       where to press. Shared, because somebody who has used one has used all
       three - the only difference between them is how much room they have. */
    /* #8f63c3 is the same purple a dropped file's waveform is drawn in, so the
       icon on the empty zone and the thing that appears once you have used it
       are the same colour rather than two different ideas about what audio
       looks like here.
       
       Written out rather than taken from a variable because there is no
       variable - the palette lives in the script, where the canvases are
       drawn. If it ever moves into CSS this is one of the places to update. */
    #tt-capture .tt-dropicon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin: 0 auto 11px;
        border-radius: 12px;
        background: rgba(143, 99, 195, .14);
        color: #8f63c3
    }

    #tt-capture .tt-dropicon svg {
        width: 22px;
        height: 22px
    }

    /* One line of plain text rather than pills. A pill gives a fact the weight
       of a control and none of these is one - they are the conditions a file
       has to meet, read once and then ignored. */
    #tt-capture .tt-specline {
        font-size: 14px;
        color: var(--tt-faint);
        letter-spacing: -.01em;
        margin-top: 6px
    }

    /* An outline rather than a fill. The zone itself is the target, and a solid
       white button here would pull the eye to a small rectangle inside a box
       that is entirely clickable. */
    #tt-capture .tt-dropbtn {
        display: inline-block;
        margin-top: 15px;
        padding: 11px 24px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 10px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.02em;
        transition: border-color .15s, background .15s
    }

    #tt-capture .tt-drop:hover .tt-dropbtn,
    #tt-capture .tt-drop.tt-over .tt-dropbtn {
        border-color: rgba(255, 255, 255, .45);
        background: rgba(255, 255, 255, .06)
    }

    /* The pair zones are half the width and there are two of them, so the same
       parts come down a size rather than being left out. */
    #tt-capture .tt-drop-sm .tt-dropicon {
        width: 38px;
        height: 38px;
        margin-bottom: 8px;
        border-radius: 10px
    }

    #tt-capture .tt-drop-sm .tt-dropbtn {
        margin-top: 13px
    }

    #tt-capture .tt-drop-sm .tt-dropicon svg {
        width: 18px;
        height: 18px
    }

    #tt-capture .tt-drop-sm .tt-specline {
        font-size: 13px
    }

    #tt-capture .tt-drop-sm .tt-dropbtn {
        margin-top: 14px;
        padding: 9px 18px;
        font-size: 14px
    }

    #tt-capture .tt-specs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 14px
    }

    #tt-capture .tt-spec {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.02em;
        color: var(--tt-muted);
        background: rgba(255, 255, 255, .07);
        border: 0;
        border-radius: 999px;
        padding: 5px 13px;
        white-space: nowrap
    }

    #tt-capture .tt-drop-sm .tt-specs {
        gap: 6px;
        margin-top: 12px
    }

    #tt-capture .tt-drop-sm .tt-spec {
        font-size: 12px;
        padding: 3px 10px
    }

    #tt-capture canvas {
        display: block;
        width: 100%;
        height: 84px;
        border-radius: 12px;
        background: #000
    }

    #tt-capture .tt-replace {
        margin-top: 14px
    }

    #tt-capture .tt-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 24px;
        margin-top: 14px;
        font-size: 14px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-meta b {
        color: #fff;
        font-weight: 600;
        letter-spacing: -.02em
    }

    #tt-capture .tt-checks {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    #tt-capture .tt-chk {
        font-size: 14px;
        display: flex;
        gap: 9px;
        align-items: flex-start;
        color: var(--tt-muted)
    }

    #tt-capture .tt-chk.ok .tt-mark {
        color: var(--tt-green)
    }

    #tt-capture .tt-chk.warn {
        color: var(--tt-amber)
    }

    #tt-capture .tt-chk.bad {
        color: var(--tt-red)
    }

    #tt-capture .tt-mark {
        width: 12px;
        flex: none;
        font-weight: 700;
        letter-spacing: -.02em
    }

    /* --- the stepped panel ---------------------------------------------- */

    /* Header, card, footer, close together so they read as one thing. The
       header used to sit below the card it described, because it was put where
       the old step bar was rather than above the first card. */
    #tt-capture .tt-flowhead {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 0 6px 10px;
        margin-top: 26px
    }

    /* The footer lives inside the card now, so the cards keep their own bottom
       margin and the gap before My Captures comes back on its own. */

    /* The step's name is not shown. "Details" or "What did you capture?" sat
       above a card whose own heading already said the same thing, so the page
       asked the question twice.
       
       Clipped rather than removed, so it is still the first thing a screen
       reader meets on a new step - "Step 2 of 3" on its own does not say what
       the step is. The step count takes the width the title used to hold, so
       the count and the bars stay where they were on the right. */
    #tt-capture .tt-flowtitle {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0
    }

    #tt-capture .tt-flowstep {
        margin-left: auto
    }

    #tt-capture .tt-flowstep {
        font-size: 13px;
        color: var(--tt-faint);
        flex: none
    }

    /* Three small bars rather than numbered circles. It says the same thing
       and fits on the title's line. */
    #tt-capture .tt-flowbars {
        display: flex;
        gap: 5px;
        width: 108px;
        flex: none
    }

    #tt-capture .tt-flowbars i {
        height: 3px;
        flex: 1;
        border-radius: 2px;
        background: rgba(255, 255, 255, .14);
        transition: background .2s ease
    }

    /* White rather than green. The bar says how far along the flow is, which
       is not a success or a state worth colouring - and green is the accent
       this page spends on things that actually happened. A completed step and
       the current one are the same white, so the three bars read as one strip
       filling up rather than as three separate lights. */
    #tt-capture .tt-flowbars i.tt-bar-done {
        background: #fff
    }

    #tt-capture .tt-flowbars i.tt-bar-now {
        background: #fff
    }

    /* Continue, and Start training beside it. Both live in the footer so the
       way onward is always in the same place. */
    #tt-capture button.tt-flownext {
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: #000;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.02em;
        padding: 11px 26px;
        cursor: pointer;
        flex: none;
        margin: 0
    }

    #tt-capture button.tt-flownext:disabled {
        background: var(--tt-card2);
        color: var(--tt-faint);
        cursor: default
    }

    /* The footer. Back on the left, the note in the middle, the way onward on
       the right - so whichever step you are on, the next thing to press is in
       the same place. */
    /* Inside the card, at its foot, with a rule above it so it reads as the
       bottom of the panel rather than something floating under it.

       The negative side margins pull it out to the card's edges, so the rule
       spans the full width the way a divider should, while the padding keeps
       the buttons in line with the content above. */
    #tt-capture .tt-stepbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 22px -24px 0;
        padding: 18px 24px 0;
        /* Longhand. The shorthand with a custom property in it is parsed
           inconsistently, and a border width that comes out as anything but
           1px is a rule across the whole card. */
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: var(--tt-line)
    }

    #tt-capture .tt-stepbar .tt-stepnote {
        flex: 1
    }

    /* Start training moves in here beside Continue, so it no longer sits at
       the bottom of the settings card looking like part of the training-mode
       dropdown next to it. */
    #tt-capture .tt-stepbar #tt-go {
        flex: none;
        width: auto;
        margin: 0
    }

    #tt-capture .tt-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid transparent;
        color: rgba(255, 255, 255, .8);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        padding: 6px 14px 6px 10px;
        border-radius: 999px;
        cursor: pointer;
        letter-spacing: -.02em;
        transition: background .15s, color .15s;
        white-space: nowrap;
        flex-shrink: 0;
        width: auto
    }

    #tt-capture .tt-back-btn:hover {
        background: rgba(255, 255, 255, .12);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-back-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0
    }

    /* Home, in the flow header.
       
       The same pill as Back rather than a shape of its own, because the two are
       the only ways out of the flow and sit one card apart. Written out instead
       of sharing Back's selector so the padding can be even - Back's is lopsided
       to sit its chevron closer to the edge, and a house is not a chevron. */
    #tt-capture .tt-homebtn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid transparent;
        color: rgba(255, 255, 255, .8);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        padding: 6px 14px 6px 11px;
        border-radius: 999px;
        cursor: pointer;
        letter-spacing: -.02em;
        flex: none;
        transition: background .15s, color .15s
    }

    #tt-capture .tt-homebtn:hover {
        background: rgba(255, 255, 255, .12);
        background-image: none;
        color: #fff
    }

    /* currentColor on the path, so the icon warms with the label on hover
       rather than staying at the resting grey. */
    #tt-capture .tt-homebtn svg {
        width: 17px;
        height: 17px;
        flex-shrink: 0
    }

    #tt-capture .tt-stepnote {
        font-size: 14px;
        color: var(--tt-faint);
        letter-spacing: -.01em
    }
    #tt-capture .tt-types {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px
    }

    #tt-capture .tt-type {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 16px;
        padding: 22px 12px 24px;
        min-height: 210px;
        justify-content: center;
        cursor: pointer;
        transition: border-color .15s, background .15s;
        font-family: var(--tt-font);
        color: var(--tt-ink);
        width: auto
    }

    #tt-capture .tt-type,
    #tt-capture .tt-type:hover,
    #tt-capture .tt-type:focus,
    #tt-capture .tt-type:active {
        background-image: none !important;
        color: var(--tt-ink) !important;
        box-shadow: none !important
    }

    #tt-capture .tt-type:hover:not(.tt-type-on) {
        border-color: rgba(255, 255, 255, .18) !important;
        background: #212121 !important;
        background-color: #212121 !important
    }

    #tt-capture .tt-type.tt-type-on,
    #tt-capture .tt-type.tt-type-on:hover,
    #tt-capture .tt-type.tt-type-on:focus,
    #tt-capture .tt-type.tt-type-on:active {
        border-color: var(--tt-green);
        background: rgba(48, 210, 35, .06) !important;
        background-color: rgba(48, 210, 35, .06) !important
    }

    #tt-capture .tt-type:focus-visible {
        outline: 1px solid rgba(255, 255, 255, .4);
        outline-offset: 2px
    }

    #tt-capture .tt-type svg {
        width: 124px;
        height: 124px;
        color: #fff;
        display: block;
        margin: -10px 0 -6px
    }

    #tt-capture .tt-type.tt-type-on svg {
        color: var(--tt-green)
    }

    #tt-capture .tt-type-name {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.02em
    }

    #tt-capture .tt-type-desc {
        font-size: 13px;
        color: var(--tt-faint);
        line-height: 1.4;
        font-weight: 400
    }

    @media (max-width:820px) {
        #tt-capture .tt-types {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    /* The name row is on the same three columns as the fields under it.
       
       It was a flex row, so its edges fell wherever its contents put them and
       met nothing below - the name field was as wide as whatever was left
       after the training mode select. On the grid it spans the first two
       columns and training mode takes the third, so every edge in the card
       lines up with one of four lines instead of a dozen. */
    #tt-capture .tt-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        align-items: end
    }

    /* The whole row, however many tracks it has. This was span 2 back when
       Training Mode sat in the third one; that field is hidden now, so the
       name stopped two thirds of the way across with an empty track after it
       and did not line up with the three fields below. */
    #tt-capture .tt-row #tt-namefield {
        grid-column: 1 / -1
    }

    #tt-capture .tt-field {
        display: flex;
        flex-direction: column;
        gap: 7px
    }

    #tt-capture .tt-lbl {
        font-size: 13px;
        font-weight: 600;
        /* Not --tt-faint. At 35% these are the name of the thing you are being
           asked for, and they were reading as disabled text rather than as a
           question. --tt-faint stays what it is for genuinely secondary text
           like the step count. */
        color: rgba(255, 255, 255, .75);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin: 0;
        /* Was display: block. Flex so the completed tick can sit beside the
           text - as a block the tick was a full-width empty box on its own
           line, which is to say invisible.
           
           inline-flex rather than flex so the label still sits inside its own
           line box the way a block-level label did, and nothing else in the
           form moves. */
        display: inline-flex;
        align-items: center;
        gap: 7px
    }

    /* Dark native controls, everywhere.
     *
     * The select box itself was styled and its popup was not - that list is
     * drawn by the browser, not by this stylesheet, and without being told
     * otherwise the browser assumes a light page and draws a white menu on a
     * black form. Reported on Edge, Opera and Chrome, which is every Chromium
     * browser rather than one person's setup.
     *
     * color-scheme is the only thing that reaches a native popup. It also
     * fixes the scrollbars, the date and colour pickers, and the spin buttons
     * on a number input, all of which had the same problem and nobody had
     * mentioned yet. */
    #tt-capture {
        color-scheme: dark
    }

    #tt-capture option,
    #tt-capture optgroup {
        background: #1a1a1a;
        color: #fff
    }

    #tt-capture input[type=text],
    #tt-capture input[type=number],
    #tt-capture select {
        color-scheme: dark;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        color: #fff;
        border-radius: 6px;
        padding: 10px 12px;
        font-family: var(--tt-font);
        font-size: 15px;
        /* One height, stated, the same as the dialog's.
           
           Left to work itself out these came to three different sizes - a text
           input at 39, a select at 41 and a gear field at 44, because a select
           and an input do not resolve the same intrinsic height from the same
           padding and a gear field is a div with its own floor. Within a row
           they stretched to whichever was tallest and looked fine; a row with
           no select in it was visibly shorter than the row above. */
        height: 44px;
        min-height: 44px;
        box-sizing: border-box;
        margin: 0;
        width: 100%;
        box-shadow: none
    }

    #tt-capture input[type=number] {
        width: 96px
    }

    /* The border turns amber rather than transparent.
       
       It used to disappear and leave the outline to show focus, which worked
       on the main form and not in a batch's details panel - the field there
       simply lost its edge and gained nothing. Rather than work out which
       ancestor was eating the outline, the focused state now draws something
       that cannot be clipped or suppressed. The outline stays on top of it, so
       the main form looks as it did. */
    /* A brighter version of the border the field already has, rather than an
       outline or a colour.

       The border used to go transparent and leave an outline to show focus.
       That worked on the main form and showed nothing at all in a batch's
       details panel, where the field simply lost its edge - so focus now draws
       something that cannot be clipped or suppressed. */
    /* --- multi-entry gear fields ---------------------------------------
       
       Not scoped to #tt-capture, and with literal colours rather than the
       page's variables.
       
       These fields appear in the Edit Details dialog as well as on the page,
       and a dialog is appended to document.body - outside #tt-capture, where
       neither the scoped rules nor the variables declared on it apply. Scoped,
       the chips rendered as bare text and the hidden input was not hidden.
       
       The class names are specific enough to this widget that leaving them
       unscoped is safe. */
    /* Both selectors, and the scoped one is not optional.
       
       The page styles its fields with #tt-capture input[type=text], which is
       an id plus an attribute and outranks any single class. Unscoped alone,
       this input kept width:100% while absolutely positioned, and stretched
       the page sideways. */
    .tt-gchip-hidden,
    #tt-capture .tt-gchip-hidden,
    #tt-capture input[type=text].tt-gchip-hidden,
    .tt-editform input[type=text].tt-gchip-hidden,
    .tt-dlg input[type=text].tt-gchip-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        min-width: 0;
        min-height: 0;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0
    }

    /* Clickable anywhere, not just on the entry itself.
       
       The box looks like a field, so people click the empty part of it - and
       with the entry being a transparent sliver at the end, that mostly meant
       clicking nothing. */
    .tt-gchips,
    #tt-capture .tt-gchips {
        cursor: text;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 6px;
        padding: 6px 8px;
        min-height: 44px;
        width: 100%;
        box-sizing: border-box
    }

    .tt-gchips:focus-within {
        border-color: rgba(255, 255, 255, .55)
    }

    .tt-gchip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, .09);
        border-radius: 999px;
        padding: 4px 6px 4px 11px;
        font-size: 14px;
        line-height: 1.3;
        color: #fff;
        max-width: 100%
    }

    .tt-gchip-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    /* Scoped as well, for the same reason as the entry above: #tt-capture
       button makes every button on the page a white pill with 12px by 26px of
       padding, and that beats a single class. Unscoped alone, the remove
       button rendered as a large white lozenge sitting across the chip. */
    .tt-gchip-x,
    #tt-capture .tt-gchip-x,
    #tt-capture button.tt-gchip-x {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: rgba(255, 255, 255, .12);
        color: rgba(255, 255, 255, .75);
        border-radius: 999px;
        width: 17px;
        height: 17px;
        min-width: 0;
        line-height: 1;
        font-size: 13px;
        font-weight: 400;
        font-family: inherit;
        padding: 0;
        margin: 0;
        cursor: pointer;
        flex: none
    }

    .tt-gchip-x:hover,
    #tt-capture button.tt-gchip-x:hover {
        background: rgba(255, 255, 255, .28);
        color: #fff
    }

    .tt-gchip-x:focus-visible,
    #tt-capture button.tt-gchip-x:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .55);
        outline-offset: 1px
    }

    /* Grows to fill whatever is left on the line, and drops to its own line
       when the chips have taken the width. */
    /* Every context this appears in, because each one styles its inputs with
       something that outranks a bare class: the page uses
       #tt-capture input[type=text], and the edit dialog uses
       .tt-editform input[type=text]. Missing either leaves the entry with a
       black background and width:100%, which draws an empty box inside the
       chip box and pushes it onto its own line. */
    .tt-gchip-entry,
    #tt-capture .tt-gchip-entry,
    #tt-capture input[type=text].tt-gchip-entry,
    .tt-editform input[type=text].tt-gchip-entry,
    .tt-dlg input[type=text].tt-gchip-entry {
        flex: 1 1 90px;
        min-width: 60px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: #fff;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 15px;
        padding: 4px 2px;
        margin: 0;
        width: auto;
        height: auto;
        /* min-height as well as height, or the entry keeps the 44px floor the
           edit dialog puts on every text input - and a 44px entry inside a box
           with 5px of padding and a border makes a 56px gear field sitting in
           a row of 44px ones. height: auto alone does not undo a min-height. */
        min-height: 0
    }

    .tt-gchip-entry:focus,
    #tt-capture .tt-gchip-entry:focus,
    #tt-capture input[type=text].tt-gchip-entry:focus,
    .tt-editform input[type=text].tt-gchip-entry:focus,
    .tt-dlg input[type=text].tt-gchip-entry:focus {
        outline: none;
        border: 0;
        box-shadow: none
    }

    /* --- a required field inside a confirm dialog ----------------------- */

    .tt-dlg-field {
        text-align: left;
        margin: 4px 0 2px
    }

    .tt-dlg-flabel {
        display: block;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: rgba(255, 255, 255, .35);
        margin-bottom: 6px
    }

    .tt-dlg-input {
        width: 100%;
        box-sizing: border-box;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 8px;
        color: #fff;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 15px;
        padding: 10px 12px;
        resize: vertical
    }

    .tt-dlg-input:focus {
        outline: none;
        border-color: rgba(255, 255, 255, .55)
    }

    .tt-dlg-input::placeholder {
        color: rgba(255, 255, 255, .28);
        opacity: 1
    }

    /* The button spinner. Sized to the text beside it and inheriting its
       colour, so it works on the white Save button and would work on a dark
       one without changing. */
    .tt-spin {
        display: inline-block;
        width: 15px;
        height: 15px;
        flex: none;
        vertical-align: -2px
    }

    .tt-spin svg {
        width: 100%;
        height: 100%;
        display: block
    }

    .tt-spin rect {
        fill: currentColor;
        animation: tt-spin-fade 1s linear infinite
    }

    /* Centres the spinner against the label, and holds the button at the
       width it had - a button that shrinks as its text changes draws the eye
       to the wrong thing. */
    .tt-dlg-go-busy {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px
    }

    /* Not a faded white button - a grey one.
       
       Fading white to 45% over a near-black card still reads as white, just
       dimmer, so the primary action went on looking like the thing to press
       while refusing to be pressed. It now carries the same fill as the button
       beside it and takes the white when it is actually available, which is
       the only moment the eye should be drawn to it.
       
       Not while saving. A button that is disabled because it is busy already
       says so with a spinner, and greying it there would read as the save
       having failed rather than as being under way. */
    .tt-dlg-go:disabled:not(.tt-dlg-go-busy),
    .tt-dlg-go:disabled:not(.tt-dlg-go-busy):hover {
        background: rgba(255, 255, 255, .09);
        background-image: none;
        color: rgba(255, 255, 255, .4);
        cursor: default
    }

    /* An empty field should not look like a filled one.
       
       The metadata inputs had no placeholder colour at all, so the browser
       default sat close enough to white that "e.g. Shure SM57" read as an
       entered value - people were publishing captures believing they had
       filled in gear they had only been shown an example of. */
    #tt-capture input::placeholder,
    #tt-capture textarea::placeholder {
        color: rgba(255, 255, 255, .28);
        opacity: 1
    }

    #tt-capture input:focus,
    #tt-capture select:focus {
        outline: none;
        border-color: rgba(255, 255, 255, .55)
    }

    #tt-capture .tt-grow {
        flex: 1;
        min-width: 190px
    }

    #tt-capture .tt-metagrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 18px
    }

    /* No cap. Notes and Inspired by were held to 900px while the grid above
       them ran the full width of the card, so they stopped short of it and
       their columns lined up with nothing. They span the card now, and the
       three Inspired by fields sit on the same three columns as the gear. */

    /* Genre tags.
       
       In a box that matches the text inputs beside it - same background,
       border, radius and padding - because the row is a form and a bare row of
       floating chips reads as something else entirely. The chips live inside
       it the way typed text lives inside an input.
       
       Wrapping rather than scrolling so all twelve are visible at once: the
       choice is quicker when the whole set is in view. */
    /* Set off from the row above it the way the grid is from the card, so the
       label has room to read as a heading rather than as part of the gear row
       it was sitting under. */
    #tt-capture .tt-tagsfield {
        margin-top: 18px
    }

    #tt-capture .tt-tagpick {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 6px;
        padding: 10px 12px
    }

    /* Filled rather than outlined.
       
       An outline on a dark field reads as an empty slot waiting to be filled,
       which is the opposite of what a chip is: it is a thing you press. A
       solid one sits on the field the way a key sits on a keyboard. */
    #tt-capture .tt-tag {
        border: 1px solid transparent;
        background: rgba(255, 255, 255, .09);
        color: rgba(255, 255, 255, .82);
        font-family: var(--tt-font);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -.01em;
        padding: 7px 13px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .12s, border-color .12s, color .12s
    }

    #tt-capture .tt-tag:hover {
        background: rgba(255, 255, 255, .16);
        color: #fff
    }

    /* White, not green.
       
       Green is what this page uses for a finished capture and a passing check -
       an outcome, arrived at. A tag is a choice somebody is making, and
       borrowing the outcome colour for it made a half-filled form look like a
       set of results. */
    #tt-capture .tt-tag-on {
        background: #fff;
        border-color: #fff;
        color: #000;
        font-weight: 600
    }

    #tt-capture .tt-tag-on:hover {
        background: #fff;
        border-color: #fff;
        color: #000
    }

    /* The rest, once three are chosen. Dimmed rather than removed: a chip that
       disappears while somebody is deciding is confusing, and the count beside
       the label already says why it will not take a fourth. */
    #tt-capture .tt-tag-full {
        opacity: .34;
        cursor: default
    }

    #tt-capture .tt-tag-full:hover {
        background: rgba(255, 255, 255, .09);
        color: rgba(255, 255, 255, .82)
    }

    #tt-capture .tt-tag:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 2px
    }


    /* The optional photo, on the details form.
       
       A thumbnail beside its own buttons rather than a drop zone: the page
       already has one of those at the top for the recording, and two on one
       screen would be a good way to drop a WAV onto the artwork. */
    /* The same step down from the field above as its neighbours take.
       
       tt-tagsfield and tt-inspired each carry margin-top: 18px and this one
       carried none, so the Photo label sat hard against the tag chips while
       every other field in the form had room. */
    #tt-capture .tt-artfield {
        margin-top: 18px
    }

    #tt-capture .tt-artrow {
        display: flex;
        align-items: center;
        gap: 14px
    }

    #tt-capture .tt-artthumb {
        width: 72px;
        height: 72px;
        border-radius: 12px;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        overflow: hidden;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #tt-capture .tt-artthumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-artthumb-empty .tt-glyph {
        width: 42%;
        height: 42%
    }

    #tt-capture .tt-artacts {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap
    }

    #tt-capture .tt-arthint {
        flex-basis: 100%;
        font-size: 13px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-notesfield {
        margin-top: 14px
    }

    #tt-capture .tt-optional {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
        /* Lifted with the label it sits beside, but kept clearly below it so
           "optional" still reads as an aside rather than as part of the name. */
        color: rgba(255, 255, 255, .45);
        margin-left: 6px
    }

    #tt-capture .tt-reqnote {
        margin: 14px 0 0;
        font-size: 14px;
        color: var(--tt-amber);
        min-height: 1px
    }

    #tt-capture .tt-inspired {
        margin-top: 18px
    }

    #tt-capture .tt-inspiredgrid {
        margin-top: 7px
    }

    #tt-capture textarea {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        color: var(--tt-ink);
        border-radius: 6px;
        padding: 10px 12px;
        font-family: var(--tt-font);
        font-size: 15px;
        width: 100%;
        resize: vertical;
        line-height: 1.5
    }

    /* Notes sits in the details panel too, so it needs the same treatment as
       the inputs beside it. */
    #tt-capture textarea:focus {
        outline: none;
        border-color: rgba(255, 255, 255, .55)
    }

    @media (max-width:700px) {
        #tt-capture .tt-metagrid,
        #tt-capture .tt-row {
            grid-template-columns: 1fr
        }

        /* Nothing to span when there is one column. */
        #tt-capture .tt-row #tt-namefield {
            grid-column: auto
        }
    }

    #tt-capture button {
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.02em;
        border: none;
        border-radius: 999px;
        padding: 12px 26px;
        cursor: pointer;
        background: #fff;
        color: #000;
        transition: background .15s;
        width: auto;
        text-transform: none;
        line-height: 1.5
    }

    #tt-capture button:hover:not(:disabled):not(.tt-ghost):not(.tt-cancel):not(.tt-rowcancel):not(.tt-filedrop):not(.tt-mode):not(.tt-mcard):not(.tt-hstep-act):not(.tt-mtab):not(.tt-details-btn):not(.tt-user-btn):not(.tt-back-btn):not(.tt-homebtn):not(.tt-tick):not(.tt-edit):not(.tt-act):not(.tt-more):not(.tt-mi):not(.tt-type):not(.tt-mine-img):not(.tt-user-mi-btn):not(.tt-dl-icon):not(.tt-morebtn) {
        background: #dcdcdc;
        background-image: none;
        color: #000
    }

    #tt-capture button:disabled {
        background: var(--tt-card2);
        color: var(--tt-faint);
        cursor: not-allowed
    }

    #tt-capture button:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px
    }

    #tt-capture .tt-ghost {
        background: transparent;
        border: 1px solid var(--tt-line2);
        color: #fff;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em
    }

    #tt-capture .tt-ghost:hover:not(:disabled) {
        background: var(--tt-card2);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-uploadnote {
        font-size: 15px;
        color: var(--tt-muted);
        margin: -6px 0 12px
    }

    #tt-capture .tt-bar {
        height: 3px;
        background: var(--tt-card2);
        border-radius: 999px;
        overflow: hidden;
        margin-top: 16px
    }

    #tt-capture .tt-bar i {
        display: block;
        height: 100%;
        background: var(--tt-green);
        width: 0;
        transition: width .25s
    }

    #tt-capture .tt-live {
        margin-top: 18px;
        padding: 24px 26px;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 16px
    }

    #tt-capture .tt-live-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 18px
    }

    #tt-capture .tt-live-heading {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0
    }

    #tt-capture .tt-live-label {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff
    }

    #tt-capture .tt-live-name {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: -.01em;
        color: #fff
    }

    #tt-capture .tt-live-namelbl {
        font-weight: 700;
        letter-spacing: -.02em
    }

    #tt-capture .tt-live-right {
        display: flex;
        align-items: center;
        gap: 12px
    }

    #tt-capture .tt-cancel {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: var(--tt-muted);
        padding: 5px 13px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 999px;
        letter-spacing: -.02em
    }

    #tt-capture .tt-cancel:hover:not(:disabled) {
        background: rgba(255, 77, 79, .12);
        border-color: rgba(255, 77, 79, .5);
        color: var(--tt-red)
    }

    #tt-capture .tt-cancel:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    #tt-capture .tt-rowcancel {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: var(--tt-muted);
        padding: 6px 16px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 999px;
        letter-spacing: -.02em;
        min-width: 108px;
        text-align: center;
        white-space: nowrap
    }

    #tt-capture .tt-rowcancel:hover:not(:disabled) {
        background: rgba(255, 77, 79, .12);
        border-color: rgba(255, 77, 79, .5);
        color: var(--tt-red)
    }

    #tt-capture .tt-rowcancel:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    #tt-capture .tt-track {
        height: 4px;
        background: rgba(255, 255, 255, .08);
        border-radius: 999px;
        overflow: hidden;
        position: relative
    }

    #tt-capture .tt-track i {
        display: block;
        height: 100%;
        background: var(--tt-green);
        border-radius: 999px;
        width: 0;
        position: absolute;
        left: 0;
        transition: width .9s linear
    }

    #tt-capture .tt-live-note {
        margin-top: 11px;
        font-size: 13px;
        color: var(--tt-faint);
        line-height: 1.45
    }

    #tt-capture .tt-err {
        color: var(--tt-red);
        font-size: 14px;
        margin-top: 14px;
        background: rgba(255, 77, 79, .08);
        border: 1px solid rgba(255, 77, 79, .25);
        border-radius: 8px;
        padding: 10px 13px
    }

    #tt-capture .tt-cardhead {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 10px
    }

    #tt-capture .tt-cardhead h2 {
        margin: 0
    }

    #tt-capture .tt-edit {
        background: rgba(255, 255, 255, .07);
        border: none;
        padding: 7px 16px;
        margin: 0;
        border-radius: 999px;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        color: var(--tt-muted);
        cursor: pointer;
        letter-spacing: -.02em;
        width: auto;
        transition: background .15s, color .15s
    }

    #tt-capture .tt-edit:hover {
        background: rgba(255, 255, 255, .13);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-edit.tt-edit-on {
        background: #fff;
        color: #000
    }

    #tt-capture .tt-checkcol {
        width: 0;
        padding: 0;
        overflow: hidden
    }

    #tt-capture .tt-checkcol * {
        display: none
    }

    #tt-capture .tt-selmode .tt-checkcol {
        width: 38px;
        padding-right: 12px;
        overflow: visible
    }

    #tt-capture .tt-selmode .tt-checkcol * {
        display: inline-block
    }

    #tt-capture .tt-selmode .tt-checkcol input[type=checkbox] {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        margin: 0;
        border-radius: 999px;
        border: 1.5px solid rgba(255, 255, 255, .3);
        background: transparent;
        cursor: pointer;
        position: relative;
        transition: background .12s, border-color .12s
    }

    #tt-capture .tt-selmode .tt-checkcol input[type=checkbox]:hover {
        border-color: rgba(255, 255, 255, .55)
    }

    #tt-capture .tt-selmode .tt-checkcol input[type=checkbox]:checked {
        background: #fff;
        border-color: #fff
    }

    #tt-capture .tt-selmode .tt-checkcol input[type=checkbox]:checked::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg)
    }

    #tt-capture .tt-lrow.tt-picked::before {
        background: rgba(255, 255, 255, .06)
    }

    #tt-capture input[type=checkbox] {
        -webkit-appearance: none;
        appearance: none;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, .3);
        background: transparent;
        cursor: pointer;
        margin: 0;
        padding: 0;
        position: relative;
        flex-shrink: 0;
        vertical-align: middle;
        transition: background .15s, border-color .15s
    }

    #tt-capture input[type=checkbox]:hover {
        border-color: rgba(255, 255, 255, .55)
    }

    #tt-capture input[type=checkbox]:checked {
        background: #fff;
        border-color: #fff
    }

    #tt-capture input[type=checkbox]:checked::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 3.5px;
        width: 5px;
        height: 10px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg)
    }

    #tt-capture input[type=checkbox]:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .6);
        outline-offset: 2px
    }

    /* Sits next to the capture count, and only appears when the allowance is
       nearly gone - so it reads as a heads-up rather than a permanent scold. */
    /* The suggestion dropdown. Appended to the body and positioned against the
       field, not nested inside it - a list inside the form would be clipped by
       the card's overflow and cut off after two rows.

       Which is also why this is not scoped under #tt-capture. */
    /* Dark scrollbars.
       
       Nothing here had styled them, so every scrolling panel on a black card
       got the browser's light default - most visible on the suggestion list,
       but the edit dialog's form scrolls too, and so does the publish list.

       Every scrolling panel on the page belongs in this selector list. A new
       one that is not added here does not fail, it just quietly gets a white
       scrollbar on a black card, which is exactly how the publish list arrived.

       Both syntaxes: scrollbar-color is the standard and covers Firefox and
       current Chrome, ::-webkit-scrollbar covers Safari and older Chrome,
       which ignore the standard one. */
    .tt-suggest,
    .tt-editform,
    .tt-publist,
    .tt-pubscroll,
    .tt-modal-body {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .22) transparent
    }

    .tt-suggest::-webkit-scrollbar,
    .tt-editform::-webkit-scrollbar,
    .tt-publist::-webkit-scrollbar,
    .tt-pubscroll::-webkit-scrollbar,
    .tt-modal-body::-webkit-scrollbar {
        width: 10px;
        height: 10px
    }

    .tt-suggest::-webkit-scrollbar-track,
    .tt-editform::-webkit-scrollbar-track,
    .tt-publist::-webkit-scrollbar-track,
    .tt-pubscroll::-webkit-scrollbar-track,
    .tt-modal-body::-webkit-scrollbar-track {
        background: transparent
    }

    .tt-suggest::-webkit-scrollbar-thumb,
    .tt-editform::-webkit-scrollbar-thumb,
    .tt-publist::-webkit-scrollbar-thumb,
    .tt-pubscroll::-webkit-scrollbar-thumb,
    .tt-modal-body::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .22);
        border-radius: 999px;
        /* Inset from the edge, so the thumb reads as floating in the panel
           rather than as a bar stuck to its side. */
        border: 2px solid transparent;
        background-clip: content-box
    }

    .tt-suggest::-webkit-scrollbar-thumb:hover,
    .tt-editform::-webkit-scrollbar-thumb:hover,
    .tt-publist::-webkit-scrollbar-thumb:hover,
    .tt-pubscroll::-webkit-scrollbar-thumb:hover,
    .tt-modal-body::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, .35);
        background-clip: content-box
    }

    .tt-suggest {
        position: absolute;
        /* Above the dialog overlay, which is 10000.
        
           At 9999 the list rendered behind it, so the gear suggestions in Edit
           Details appeared to be missing entirely - they were being drawn, just
           underneath. Both are appended to document.body, so nothing but this
           number decides which is on top. */
        z-index: 10001;
        max-height: 300px;
        overflow-y: auto;
        background: #0e0e0e;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 10px;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
        padding: 5px;
        font-family: inherit
    }

    /* One line each, and no ellipsis. The box grows to fit the longest name
       rather than the rows being cut to fit the box - a truncated gear name is
       exactly the thing somebody is trying to read. */
    .tt-suggest-row {
        padding: 9px 11px;
        border-radius: 7px;
        font-size: 14px;
        color: rgba(255, 255, 255, .85);
        cursor: pointer;
        white-space: nowrap
    }

    .tt-suggest-row.is-on {
        background: rgba(255, 255, 255, .1);
        color: #fff
    }

    #tt-capture .tt-allowance {
        font-size: 13px;
        color: var(--tt-amber);
        margin-left: 12px;
        white-space: nowrap
    }

    /* Maintenance mode. #tt-capture is emptied and given .tt-maint-mode, so
       these are the only rules that apply while the flag is on. */
    #tt-capture.tt-maint-mode {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 62vh;
        padding: 90px 20px
    }

    /* Wide enough for the heading to stay on one line.
       
       520px broke "Cloud Capture is temporarily unavailable." across two lines
       at 30px, and a notice that is already bad news reads worse when the
       first thing it does is wrap. The body gets its own narrower measure
       below, so the extra width goes to the heading rather than stretching
       the paragraph out to something tiring to read. */
    #tt-capture .tt-maint {
        max-width: 760px;
        text-align: center
    }

    #tt-capture .tt-maint-icon {
        width: 46px;
        height: 46px;
        fill: none;
        stroke: var(--tt-amber);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        margin-bottom: 22px
    }

    #tt-capture .tt-maint-title {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        margin: 0 0 14px;
        text-transform: none;
        /* On a narrow screen it has to wrap, and this splits it evenly rather
           than leaving one word on the second line. Ignored by anything that
           does not know it, which is the right way round. */
        text-wrap: balance
    }

    #tt-capture .tt-maint-body {
        font-size: 16px;
        line-height: 1.6;
        color: var(--tt-muted);
        margin: 0 auto;
        /* Its own measure. The card is wide for the heading's sake; a
           paragraph run to the full 760px would be a long way for the eye to
           travel back. */
        max-width: 560px
    }

    /* A notice can run to several paragraphs now, so they need a gap between
       them. Only between - the first still sits on the title's own margin and
       the last still ends the card, so a one-paragraph notice is unchanged. */
    #tt-capture .tt-maint-body + .tt-maint-body {
        margin-top: 18px
    }

    @media (max-width:640px) {
        #tt-capture.tt-maint-mode {
            min-height: 50vh;
            padding: 60px 20px
        }

        #tt-capture .tt-maint-title {
            font-size: 24px
        }

        #tt-capture .tt-maint-body {
            font-size: 15px
        }
    }

    #tt-capture .tt-count {
        color: var(--tt-faint);
        font-weight: 400;
        font-size: 14px;
        margin-left: 6px
    }

    #tt-capture .tt-headtools {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none
    }

    @media (max-width:720px) {
        #tt-capture .tt-cardhead {
            flex-wrap: wrap
        }

        #tt-capture .tt-headtools {
            flex-wrap: wrap;
            width: 100%;
            gap: 8px
        }

        #tt-capture .tt-searchrow {
            order: 3;
            width: 100%;
            margin-top: 2px
        }

        #tt-capture .tt-searchrow input,
        #tt-capture .tt-searchrow input:focus {
            width: 100%;
            flex: 1 1 auto
        }

        #tt-capture .tt-sortwrap {
            margin-left: auto
        }
    }

    #tt-capture .tt-tool-on {
        background: rgba(255, 255, 255, .12);
        color: #fff
    }

    #tt-capture .tt-picker {
        position: relative;
        display: inline-flex;
        align-items: center
    }

    #tt-capture .tt-pickbtn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(255, 255, 255, .07);
        background-image: none;
        border: 0;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.02em;
        padding: 7px 12px 7px 14px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, color .15s
    }

    #tt-capture .tt-pickbtn:hover {
        background: rgba(255, 255, 255, .12);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-pickchev {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none
    }

    #tt-capture .tt-menu-pick {
        min-width: 172px;
        left: auto;
        right: 0
    }

    #tt-capture .tt-mi-current {
        background: rgba(255, 255, 255, .08)
    }

    #tt-capture .tt-pickbtn-on {
        background: rgba(255, 255, 255, .14);
        color: #fff
    }

    #tt-capture .tt-mi-current span {
        color: #fff
    }

    #tt-capture .tt-searchrow {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0
    }

    /* One height for the row: search, sort and Select.
       
       They had three - 44px, 47px and 37px - because each was sized by its own
       padding and font, and the search box had picked up the 44px floor that
       2.2.8 put under every text input for the Capture Info form. Stated here
       rather than tuned three ways, so the row cannot drift apart again.
       
       Scoped to .tt-headtools, which exists once. The sort button and Select
       are used in other rows at their own sizes and should stay there. */
    #tt-capture .tt-headtools .tt-searchrow input,
    #tt-capture .tt-headtools .tt-pickbtn,
    #tt-capture .tt-headtools .tt-edit {
        height: 40px;
        min-height: 40px;
        box-sizing: border-box;
        padding-top: 0;
        padding-bottom: 0
    }

    /* Buttons centre their own label, an input does not once its vertical
       padding is gone. */
    #tt-capture .tt-headtools .tt-edit {
        display: inline-flex;
        align-items: center
    }

    #tt-capture .tt-searchrow input {
        width: 190px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, .07);
        border: 0 !important;
        outline: 0 !important;
        -webkit-appearance: none;
        appearance: none;
        color: #fff;
        font-family: var(--tt-font);
        font-size: 14px;
        padding: 8px 34px 8px 15px;
        border-radius: 999px;
        transition: background .15s, width .18s
    }

    #tt-capture .tt-searchrow input:hover {
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture .tt-searchrow input:focus {
        background: rgba(255, 255, 255, .12);
        width: 240px
    }

    #tt-capture .tt-searchrow input::placeholder {
        color: var(--tt-faint)
    }

    #tt-capture .tt-searchrow input:-webkit-autofill,
    #tt-capture .tt-searchrow input:-webkit-autofill:hover,
    #tt-capture .tt-searchrow input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #1c1c1e inset !important;
        box-shadow: 0 0 0 1000px #1c1c1e inset !important;
        -webkit-text-fill-color: #fff !important;
        caret-color: #fff;
        transition: background-color 9999s ease-in-out 0s
    }

    #tt-capture .tt-searchrow input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none
    }

    #tt-capture .tt-searchicon {
        position: absolute;
        right: 13px;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        color: var(--tt-faint);
        pointer-events: none
    }

    #tt-capture .tt-searchrow input:focus~.tt-searchicon {
        color: var(--tt-muted)
    }

    #tt-capture .tt-selleft {
        display: flex;
        align-items: baseline;
        gap: 12px
    }

    #tt-capture .tt-selall {
        border: 0;
        background: transparent;
        background-image: none;
        color: #fff;
        font-family: var(--tt-font);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em;
        cursor: pointer;
        padding: 6px 12px;
        margin: -6px -12px;
        border-radius: 999px;
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: background .12s
    }

    #tt-capture .tt-selall:hover {
        background: rgba(255, 255, 255, .1);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-act {
        display: inline-flex;
        align-items: center;
        gap: 8px
    }

    #tt-capture .tt-act svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none
    }

    #tt-capture .tt-actionbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin: 0 0 16px;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .04)
    }

    #tt-capture .tt-selcount {
        font-size: 14px;
        font-weight: 600;
        color: var(--tt-muted);
        letter-spacing: -.02em
    }

    #tt-capture .tt-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap
    }

    #tt-capture .tt-act {
        height: 38px;
        padding: 0 18px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em;
        font-family: var(--tt-font);
        border: 1px solid var(--tt-line2);
        border-radius: 999px;
        background: transparent;
        color: rgba(255, 255, 255, .8);
        cursor: pointer;
        width: auto;
        transition: background .15s, color .15s
    }

    #tt-capture .tt-act:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-act-danger {
        color: #ff453a;
        border-color: rgba(255, 69, 58, .35)
    }

    #tt-capture .tt-act-danger:hover {
        background: rgba(255, 69, 58, .14);
        background-image: none;
        border-color: rgba(255, 69, 58, .6);
        color: #ff453a
    }

    #tt-capture .tt-act-danger:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    #tt-capture .tt-act-primary {
        background: #fff;
        border-color: #fff;
        color: #000;
        font-weight: 700;
        letter-spacing: -.02em
    }

    #tt-capture .tt-act-primary:hover {
        background: #e4e4e4;
        background-image: none;
        color: #000
    }

    #tt-capture .tt-actions select {
        height: 38px;
        padding: 0 14px;
        font-size: 14px;
        width: auto;
        border-radius: 999px
    }

    #tt-capture .tt-packs {
        margin: 30px 0 0
    }

    #tt-capture .tt-packstitle {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
        text-transform: none;
        color: #fff;
        margin: 0 0 14px
    }

    #tt-capture .tt-packcard {
        margin: 0 0 10px
    }

    #tt-capture .tt-packhead {
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 14px;
        padding: 12px 16px;
        min-height: 92px;
        cursor: pointer;
        transition: background .15s, border-color .15s
    }

    #tt-capture .tt-packhead:hover {
        background: #212121;
        border-color: rgba(255, 255, 255, .16)
    }

    #tt-capture .tt-packname,
    #tt-capture .tt-packacts,
    #tt-capture .tt-packhead input[type=checkbox] {
        position: relative;
        z-index: 1
    }

    #tt-capture .tt-packchev {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        stroke: var(--tt-faint);
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        cursor: pointer;
        transition: transform .18s, stroke .15s
    }

    #tt-capture .tt-packcard:hover .tt-packchev {
        stroke: #fff
    }

    #tt-capture .tt-packchev-open {
        transform: rotate(90deg)
    }

    #tt-capture .tt-packthumb {
        width: 68px;
        height: 68px;
        border-radius: 12px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--tt-card)
    }

    #tt-capture .tt-packthumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-packthumb-empty {
        background: #000;
        border: 1px solid var(--tt-line);
        display: flex;
        align-items: center;
        justify-content: center
    }

    #tt-capture .tt-packthumb-empty .tt-glyph {
        width: 45%;
        height: 45%
    }

    #tt-capture .tt-packinfo {
        flex: 1;
        min-width: 0
    }

    #tt-capture .tt-packnameline {
        display: flex;
        align-items: center;
        gap: 8px
    }

    #tt-capture .tt-packname {
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
        line-height: 1.25;
        /* Not cursor: text, and no hover box. Renaming is a menu action now,
           and a name that lights up under the pointer promises an edit that
           will not happen - on a card where a click opens the pack. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture input.tt-packname-edit {
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 8px;
        padding: 3px 9px;
        font-family: var(--tt-font);
        width: 300px;
        max-width: 100%;
        height: auto;
        outline: none
    }

    #tt-capture input.tt-packname-edit:focus {
        border-color: rgba(255, 255, 255, .6);
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture .tt-packsub {
        font-size: 14px;
        color: rgba(255, 255, 255, .45);
        margin-top: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-packacts {
        margin-left: auto;
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        position: relative
    }

    #tt-capture .tt-rowacts {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        position: relative
    }

    #tt-capture .tt-rowacts .tt-menu {
        top: calc(100% + 6px)
    }

    #tt-capture .tt-more {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: rgba(255, 255, 255, .07);
        color: rgba(255, 255, 255, .75);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--tt-font);
        transition: background .15s, color .15s
    }

    #tt-capture .tt-more:hover,
    #tt-capture .tt-more-on {
        background: rgba(255, 255, 255, .16);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-more svg {
        width: 16px;
        height: 16px;
        fill: currentColor
    }

    #tt-capture .tt-abovefold {
        position: relative;
        z-index: 40
    }

    #tt-capture .tt-compare {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid rgba(255, 255, 255, .18);
        background: transparent;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.02em;
        padding: 6px 14px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, color .15s, border-color .15s
    }

    #tt-capture .tt-compare svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-compare:hover {
        background: rgba(255, 255, 255, .07);
        background-image: none;
        color: #fff;
        border-color: rgba(255, 255, 255, .32)
    }

    #tt-capture .tt-compare-on {
        background: #fff;
        background-image: none;
        border-color: #fff;
        color: #000
    }

    #tt-capture .tt-cmp {
        grid-column: 1 / -1;
        padding: 4px 0 18px
    }

    #tt-capture .tt-cmp-card {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 18px;
        padding: 18px
    }

    #tt-capture .tt-cmp-top {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px
    }

    #tt-capture .tt-seg {
        display: inline-flex;
        background: rgba(255, 255, 255, .06);
        border-radius: 999px;
        padding: 4px;
        gap: 4px
    }

    #tt-capture .tt-segbtn {
        border: 0;
        background: transparent;
        background-image: none;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.02em;
        padding: 7px 22px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .12s, color .12s
    }

    #tt-capture .tt-segbtn-on {
        background: #fff;
        color: #000
    }

    #tt-capture .tt-cmp-close {
        margin-left: auto;
        border: 0;
        background: transparent;
        background-image: none;
        color: var(--tt-faint);
        cursor: pointer;
        padding: 6px;
        border-radius: 999px;
        display: inline-flex;
        transition: color .12s, background .12s
    }

    #tt-capture .tt-cmp-close svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-cmp-close:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        color: #fff
    }


    /* The waveform is a control, so it says so. Section names are printed
       under it and the chips do the same job, which made it look clickable
       long before it was. */
    #tt-capture .tt-wave {
        cursor: pointer
    }

    #tt-capture .tt-wave {
        position: relative;
        height: 96px;
        cursor: pointer
    }

    #tt-capture .tt-wave-canvas {
        display: block;
        width: 100%;
        height: 100%
    }

    #tt-capture .tt-wave-skeleton {
        background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
        border-radius: 10px;
        animation: tt-shimmer 1.4s linear infinite;
        background-size: 200% 100%
    }

    @keyframes tt-shimmer {
        0% {
            background-position: 100% 0
        }

        100% {
            background-position: -100% 0
        }
    }

    #tt-capture .tt-wave-head {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #fff;
        pointer-events: none;
        transition: left .06s linear
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-capture .tt-wave-head {
            transition: none
        }

        #tt-capture .tt-wave-skeleton {
            animation: none
        }
    }

    #tt-capture .tt-wave-marks {
        position: relative;
        height: 20px;
        margin-top: 6px
    }

    #tt-capture .tt-wave-mark {
        position: absolute;
        transform: translateX(-50%);
        font-size: 13px;
        color: var(--tt-faint);
        white-space: nowrap
    }

    #tt-capture .tt-cmp-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 14px 0 16px
    }

    #tt-capture .tt-play {
        height: 44px;
        padding: 0 20px;
        gap: 8px;
        border-radius: 999px;
        border: 0;
        background: #fff;
        background-image: none;
        color: #000;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.02em;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none
    }

    #tt-capture .tt-play-word {
        pointer-events: none;
        min-width: 34px;
        text-align: left
    }

    #tt-capture .tt-play svg {
        pointer-events: none;
        width: 17px;
        height: 17px;
        flex: none;
        fill: currentColor;
        stroke: none
    }

    #tt-capture .tt-play:disabled {
        opacity: .4;
        cursor: not-allowed
    }

    #tt-capture .tt-cmp-clock {
        font-variant-numeric: tabular-nums;
        font-size: 14px;
        color: var(--tt-muted);
        letter-spacing: .02em
    }

    #tt-capture .tt-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 9px
    }

    #tt-capture .tt-chip {
        border: 0;
        background: rgba(255, 255, 255, .07);
        background-image: none;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em;
        padding: 8px 16px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .12s, color .12s
    }

    #tt-capture .tt-chip:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff
    }

    #tt-capture .tt-chip-on {
        background: #fff;
        color: #000
    }

    #tt-capture .tt-cmp-foot {
        display: flex;
        align-items: center;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--tt-line)
    }

    #tt-capture .tt-cmp-hint {
        font-size: 14px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-cmp-hint kbd {
        font-family: var(--tt-font);
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--tt-muted);
        background: rgba(255, 255, 255, .08);
        border-radius: 5px;
        padding: 1px 6px;
        font-size: 13px
    }

    #tt-capture .tt-cmp-waiting {
        text-align: center;
        padding: 30px 18px 34px
    }

    #tt-capture .tt-cmp-spin {
        width: 28px;
        height: 28px;
        display: block;
        margin: 22px auto 0
    }

    #tt-capture .tt-cmp-spin rect {
        fill: #fff;
        animation: tt-spin-fade 1s linear infinite
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-capture .tt-cmp-spin rect {
            animation: none;
            opacity: .45
        }
    }

    #tt-capture .tt-cmp-prep {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.02em;
        color: #fff;
        margin-bottom: 6px
    }

    #tt-capture .tt-cmp-status {
        margin-top: 12px;
        font-size: 14px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-cmp-status-bad {
        color: var(--tt-amber)
    }

    #tt-capture .tt-cmp-retry {
        border: 0;
        background: transparent;
        background-image: none;
        color: #fff;
        text-decoration: underline;
        cursor: pointer;
        font-family: var(--tt-font);
        font-size: 14px;
        padding: 0
    }

    @media (max-width:640px) {
        #tt-capture .tt-cmp-top {
            flex-wrap: nowrap;
            gap: 10px;
            margin-bottom: 14px
        }

        #tt-capture .tt-menu-pick {
            left: 0;
            right: auto;
            min-width: 160px
        }

        #tt-capture .tt-segbtn {
            padding: 7px 16px;
            font-size: 14px
        }

        #tt-capture .tt-wave-marks {
            display: none
        }

        #tt-capture .tt-cmp-bar {
            gap: 12px;
            margin: 12px 0 14px
        }

        #tt-capture .tt-chips {
            gap: 7px
        }

        #tt-capture .tt-chip {
            font-size: 13px;
            padding: 7px 13px
        }

        #tt-capture .tt-wave {
            height: 76px
        }

        #tt-capture .tt-cmp-foot {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px
        }

        #tt-capture .tt-cmp-card {
            padding: 14px
        }
    }

    #tt-capture .tt-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 268px;
        background: #1c1c1e;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 13px;
        padding: 5px;
        z-index: 60;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .65);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px) scale(.97);
        transform-origin: top right;
        transition: opacity .13s, transform .13s, visibility .13s
    }

    #tt-capture .tt-menu-open {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    #tt-capture .tt-mi {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        border: none;
        background: none;
        padding: 10px 12px;
        border-radius: 9px;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        text-align: left;
        cursor: pointer;
        letter-spacing: -.01em;
        transition: background .12s
    }

    #tt-capture .tt-mi:hover {
        background: rgba(255, 255, 255, .1);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-mi span {
        white-space: nowrap
    }

    #tt-capture .tt-mi svg.tt-mi-solid {
        fill: currentColor;
        stroke: none
    }

    #tt-capture .tt-mi svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
        opacity: .75
    }

    #tt-capture .tt-mi-danger {
        color: #ff453a
    }

    #tt-capture .tt-mi-danger:hover {
        background: rgba(255, 69, 58, .14);
        color: #ff453a
    }

    #tt-capture .tt-mi-pane-off {
        display: none
    }

    #tt-capture .tt-mi-back span {
        color: var(--tt-muted)
    }

    #tt-capture .tt-mi-back svg {
        order: -1;
        margin-right: -4px
    }

    #tt-capture .tt-mi-back {
        justify-content: flex-start;
        gap: 10px
    }

    #tt-capture .tt-mi-sep {
        height: 1px;
        background: rgba(255, 255, 255, .1);
        margin: 5px 7px
    }

    #tt-capture .tt-packbody {
        display: none;
        padding: 2px 0 6px
    }

    #tt-capture .tt-packs,
    #tt-capture .tt-packcard,
    #tt-capture .tt-packbody {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0
    }

    #tt-capture .tt-packbody-open {
        display: block
    }


    /* The status cell stacks, and the two share a centre line.
       
       width:max-content is what keeps the pill where it was: the cell hugs its
       widest child rather than filling the column, so centring the two on each
       other does not drag the pill into the middle of an empty cell. */
    #tt-capture .tt-statuscol {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: max-content
    }

    /* The countdown under a training row's status.
       
       Quiet and small: it is a forecast sitting under a fact, and it should not
       compete with the pill above it. */
    #tt-capture .tt-eta {
        margin-top: 5px;
        font-size: 12px;
        letter-spacing: -.01em;
        color: rgba(255, 255, 255, .42);
        white-space: nowrap
    }

    #tt-capture .tt-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 13px;
        font-weight: 600;
        /* Taller and narrower than it was - a 104px floor that Complete never
           came close to filling left most rows carrying a badge with air
           either side of the word.
           
           Narrower, but all the same width. Training and Complete are
           different lengths, so without a floor the badges in a column came
           out ragged and the eye reads that as two different kinds of thing.
           97px is what the longest of them needs. */
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--tt-card2);
        color: var(--tt-muted);
        white-space: nowrap;
        letter-spacing: -.02em;
        min-width: 97px;
        box-sizing: border-box
    }

    #tt-capture .tt-badgespin,
    #tt-capture .tt-badgetick {
        width: 11px;
        height: 11px;
        flex: none;
        display: block
    }

    #tt-capture .tt-badgetick path {
        fill: none;
        stroke: currentColor;
        stroke-width: 13;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-badgespin rect {
        fill: currentColor;
        animation: tt-spin-fade 1s linear infinite
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-capture .tt-badgespin rect {
            animation: none;
            opacity: .5
        }
    }

    #tt-capture .tt-status.run {
        color: var(--tt-amber);
        background: rgba(255, 194, 0, .1)
    }

    #tt-capture .tt-status.ok {
        color: var(--tt-green);
        background: rgba(48, 210, 35, .1)
    }

    #tt-capture .tt-status.bad {
        color: var(--tt-red);
        background: rgba(255, 77, 79, .1)
    }

    #tt-capture .tt-scorewrap {
        position: relative;
        display: inline-block;
        cursor: default
    }

    #tt-capture .tt-status~.tt-tip,
    #tt-capture .tt-scorewrap .tt-status+.tt-tip {
        white-space: normal;
        width: 260px;
        text-align: left;
        line-height: 1.45
    }

    #tt-capture .tt-tip {
        position: absolute;
        bottom: calc(100% + 9px);
        left: 50%;
        transform: translateX(-50%) translateY(3px);
        background: rgba(38, 38, 40, .96);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -.01em;
        line-height: 1.35;
        padding: 7px 11px;
        border-radius: 8px;
        white-space: nowrap;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
        border: 1px solid rgba(255, 255, 255, .09);
        opacity: 0;
        visibility: hidden;
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
        pointer-events: none;
        z-index: 50
    }

    #tt-capture .tt-tip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: rgba(38, 38, 40, .96)
    }

    #tt-capture .tt-scorewrap:hover .tt-tip,
    #tt-capture .tt-scorewrap:focus-visible .tt-tip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0)
    }

    #tt-capture .tt-scorewrap:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px;
        border-radius: 4px
    }

    /* Tooltips, once the list is a card rather than a table.
       
       The score sits hard against the right edge in that layout, and its
       tooltip is centred on it - so a 180px tooltip hangs 90px off the side of
       the page and the whole document scrolls sideways. Nothing shows it: the
       tooltip is hidden until hover, so the scrollbar appears with no visible
       cause, which is what made this hard to find.
       
       Anchored to their own right edge instead of centred, and the arrow moves
       with them. */
    @media (max-width:779px) {
        #tt-capture .tt-tip {
            white-space: normal;
            width: 180px
        }

        #tt-capture .tt-scorewrap .tt-tip {
            left: auto;
            right: 0;
            transform: translateY(3px)
        }

        #tt-capture .tt-scorewrap:hover .tt-tip,
        #tt-capture .tt-scorewrap:focus-visible .tt-tip {
            transform: translateY(0)
        }

        #tt-capture .tt-scorewrap .tt-tip::after {
            left: auto;
            right: 18px;
            transform: none
        }
    }

    #tt-capture .tt-qlty {
        font-weight: 700;
        letter-spacing: -.02em
    }

    #tt-capture .tt-qlty-live {
        color: var(--tt-muted);
        font-weight: 600;
        letter-spacing: -.02em
    }

    #tt-capture .tt-livemark {
        font-size: 12px;
        color: var(--tt-faint);
        margin-left: 6px;
        letter-spacing: -.01em
    }

    #tt-capture .tt-sub.tt-sub-warn {
        color: var(--tt-amber)
    }

    #tt-capture .tt-lrow>.tt-draghint {
        position: absolute;
        left: 44px;
        top: -6px;
        z-index: 20;
        background: rgba(38, 38, 40, .96);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: -.01em;
        padding: 5px 11px;
        border-radius: 8px;
        white-space: nowrap;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transform: translateY(3px);
        transition: opacity .16s ease, transform .16s ease
    }

    #tt-capture .tt-lrow>.tt-draghint-on {
        opacity: 1;
        transform: none
    }

    #tt-capture .tt-sub {
        font-size: 13px;
        color: var(--tt-faint);
        display: block;
        margin-top: 1px;
        /* Sits inside the name, which is now bold. A failure message in bold
           reads as shouting about something the person cannot act on. */
        font-weight: 400
    }


    /* The row that offers the rest of the list.
       
       A row rather than something under the table, so it sits inside the same
       border and reads as the end of the list rather than as a control beside
       it. It spans every column - a button in the name column with eight empty
       cells after it looks like a capture called "Show all". */
    /* The cell spans the grid rather than the row being taken out of it.
       
       .tt-lrow is a grid and is declared later in this file, so overriding it
       to block here loses on source order and the button ends up sitting in
       the name column with eight empty cells after it - which looks like a
       capture called "Show all". Spanning every column works with the grid
       instead of against it, and survives the column template changing. */
    /* Centred with the grid, not with text-align.
       
       .tt-lrow>*:last-child right-aligns the actions column and this cell is
       the row's only child, so it inherits that. Matching the selector does
       not help: it has the same weight and is declared later in this file, so
       it wins on order either way. justify-items centres the button inside
       the cell regardless of how the text is aligned, and does not care where
       either rule sits. */
    #tt-capture .tt-lrow>.tt-morecell {
        grid-column: 1 / -1;
        display: grid;
        justify-items: center;
        /* No horizontal padding at all, because the last-child rule zeroes the
           right side only and leaving the left at 12 put the button 6px off
           centre - visible against a row of centred columns above it. */
        padding: 12px 0
    }

    /* A button rather than a line of green text.
       
       It read as a link in a page whose links are buttons, and sat under a
       list whose every other action - Compare, the menus - is a pill. So it
       is one too: the cards' own grey and white words, with no edge - the
       grey is enough on its own against the black behind it.
       
       It shrinks to fit rather than filling the row. As a full-width block the
       cursor changed and the background lit a foot away from anything
       readable; the padding that gave the row its height sits on the cell
       around it, so the spacing either side is unchanged. */
    #tt-capture button.tt-morebtn {
        display: inline-block;
        width: auto;
        border: 0;
        border-radius: 999px;
        background: var(--tt-card2);
        background-image: none;
        padding: 10px 21px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em;
        color: #fff;
        cursor: pointer;
        transition: background .15s
    }

    /* Added to the :not() chain on the shared button hover as well.
       
       That rule paints every button #dcdcdc on hover and carries an id, an
       element and twenty :not()s, so it outranks anything written here by a
       distance - the whole row went pale on hover and the green text turned
       black. Excluding this button there is how every other exception in that
       chain is handled. */
    #tt-capture button.tt-morebtn:hover {
        background: #242424
    }

    #tt-capture .tt-empty {
        color: var(--tt-faint);
        font-size: 15px;
        padding: 26px 0;
        text-align: center
    }

    #tt-capture .tt-dl {
        display: inline-block;
        border: none;
        cursor: pointer;
        font-family: var(--tt-font);
        background: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.02em;
        text-decoration: none;
        padding: 7px 16px;
        border-radius: 999px;
        white-space: nowrap;
        min-width: 108px;
        text-align: center;
        transition: background .15s
    }

    #tt-capture .tt-dl:hover {
        background: #dcdcdc;
        background-image: none;
        color: #000
    }

    /* The row download, as an icon rather than a word.
       
       The same round shape as the more-actions button beside it, because they
       are the same kind of thing - one press, no label needed, sitting at the
       end of a row. The white pill it replaced was the loudest thing in the
       list, which put the emphasis on downloading rather than on the capture.
       
       Stated after the pill rules above so it can undo them. */
    #tt-capture .tt-dl.tt-dl-icon {
        width: 34px;
        height: 34px;
        min-width: 0;
        padding: 0;
        border-radius: 50%;
        background: #fff;
        color: #000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background .15s, color .15s
    }

    /* A shade darker under the pointer - the same #dcdcdc every other white
       button on this page moves to, so pressing it feels like pressing them. */
    #tt-capture .tt-dl.tt-dl-icon:hover {
        background: #dcdcdc;
        background-image: none;
        color: #000
    }

    #tt-capture .tt-dl.tt-dl-icon svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    /* Working. There is no word to change, so it says so by going quiet -
       greyed rather than dimmed now that it rests white. */
    #tt-capture .tt-dl.tt-dl-icon.tt-dl-busy {
        background: rgba(255, 255, 255, .22);
        color: rgba(0, 0, 0, .45)
    }


    #tt-capture .tt-live-note .tt-dl {
        margin-left: 2px
    }

    @media (max-width:779px) {
        #tt-capture {
            padding: 110px 20px 72px
        }

        #tt-capture h1 {
            font-size: 27px
        }

        #tt-capture .tt-card {
            padding: 18px;
            border-radius: 16px
        }

        /* Matched to the card's padding at this width, or the divider hangs
           over the edges. */
        #tt-capture .tt-stepbar {
            margin: 18px -18px 0;
            padding: 14px 18px 0
        }

        #tt-capture .tt-lrow>*:nth-child(4),
        #tt-capture .tt-lrow>*:nth-child(5),
        #tt-capture .tt-lrow>*:nth-child(6),
        #tt-capture .tt-lrow>*:nth-child(8) {
            display: none
        }

        /* The column headings go with the columns.
           
           This lived in the phone block below and only applied under 640, so
           when the card layout came up to 779 the headings stayed behind and
           sat above a list that no longer had columns - Name and Accuracy on
           one line, Status and Training Time on the next, labelling nothing. */
        #tt-capture .tt-lhead,
        #tt-capture .tt-lrow.tt-lhead {
            display: none !important
        }
    }

    #tt-capture .tt-mine-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch
    }

    #tt-capture .tt-mine-grid>* {
        min-width: 0
    }

    #tt-capture .tt-mine-cell {
        display: flex;
        flex-direction: column
    }

    #tt-capture .tt-mine-cell-open {
        grid-column: 1 / -1
    }

    #tt-capture .tt-mine-cell>.tt-mine-row {
        flex: 1 1 auto
    }

    #tt-capture .tt-mine-row {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 14px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        min-height: 96px;
        cursor: pointer;
        transition: background .2s
    }

    #tt-capture .tt-mine-row:hover {
        background: #212121
    }

    #tt-capture .tt-mine-row-static {
        cursor: default
    }

    #tt-capture .tt-mine-row-static:hover {
        background: var(--tt-card)
    }

    #tt-capture .tt-mine-chev {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        transition: transform .2s
    }

    #tt-capture .tt-mine-chev-open {
        transform: rotate(90deg)
    }

    #tt-capture .tt-mine-thumb {
        width: 68px;
        height: 68px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--tt-card2)
    }

    #tt-capture .tt-mine-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-mine-thumb-empty {
        background: #000;
        border: 1px solid var(--tt-line)
    }

    #tt-capture .tt-mine-info {
        flex: 1;
        min-width: 0
    }

    #tt-capture .tt-mine-name {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-mine-editable {
        cursor: text;
        padding: 2px 7px;
        margin: -2px -7px;
        border-radius: 7px;
        border: 1px solid transparent;
        transition: background .12s, border-color .12s
    }

    #tt-capture .tt-mine-editable:hover {
        border-color: var(--tt-line2);
        background: rgba(255, 255, 255, .05)
    }

    #tt-capture .tt-mine-kid-name.tt-mine-editable {
        padding: 1px 6px;
        margin: -1px -6px
    }

    #tt-capture input.tt-mine-name-edit {
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 8px;
        padding: 3px 9px;
        font-family: var(--tt-font);
        width: 100%;
        max-width: 100%;
        height: auto;
        outline: none
    }

    #tt-capture input.tt-mine-name-edit:focus {
        border-color: rgba(255, 255, 255, .6);
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture input.tt-mine-name-edit-sm {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.02em
    }

    #tt-capture .tt-mine-sub {
        font-size: 14px;
        color: rgba(255, 255, 255, .4);
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-mine-count {
        font-size: 13px;
        color: #EDF11E;
        margin-top: 3px
    }

    #tt-capture .tt-mine-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        position: relative
    }

    #tt-capture .tt-mine-actions .tt-menu {
        top: calc(100% + 6px);
        min-width: 220px
    }

    #tt-capture .tt-mine-img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: rgba(255, 255, 255, .08);
        color: rgba(255, 255, 255, .75);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity .15s, background .15s, color .15s
    }

    #tt-capture .tt-mine-row:hover .tt-mine-img,
    #tt-capture .tt-mine-img:focus-visible {
        opacity: 1
    }

    #tt-capture .tt-mine-img:hover {
        background: rgba(255, 255, 255, .16);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-mine-img svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    /* White under the pointer. The icon draws in currentColor, so the count
       beside it warms at the same time rather than one brightening alone. */
    #tt-capture .tt-mine-dls {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em;
        color: rgba(255, 255, 255, .45);
        min-width: 40px;
        justify-content: flex-end;
        transition: color .15s
    }

    #tt-capture .tt-mine-dls:hover {
        color: #fff
    }

    #tt-capture .tt-mine-dlicon {
        width: 14px;
        height: 14px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-mine-kids {
        display: none;
        flex-direction: column;
        gap: 4px;
        margin: 4px 0
    }

    #tt-capture .tt-mine-kids-open {
        display: flex
    }

    #tt-capture .tt-mine-kid {
        background: var(--tt-card);
        border: 1px solid var(--tt-line);
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        min-height: 56px;
        cursor: default
    }

    #tt-capture .tt-mine-kid .tt-mine-thumb {
        width: 38px;
        height: 38px;
        border-radius: 8px
    }

    #tt-capture .tt-mine-kid-name {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.02em;
        color: #ccc;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-mine-kid-sub {
        font-size: 14px;
        color: rgba(255, 255, 255, .3);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-mine-empty {
        color: var(--tt-faint);
        font-size: 15px;
        padding: 26px 0;
        text-align: center
    }

    #tt-capture .tt-mine-empty-sub {
        font-size: 14px;
        margin-top: 6px;
        color: rgba(255, 255, 255, .25)
    }

    @media (max-width:1000px) {
        #tt-capture .tt-mine-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media (max-width:640px) {
        #tt-capture .tt-mine-grid {
            grid-template-columns: minmax(0, 1fr)
        }

        #tt-capture .tt-mine-row {
            min-height: 84px;
            padding: 12px
        }

        #tt-capture .tt-mine-thumb {
            width: 56px;
            height: 56px
        }

        #tt-capture .tt-mine-name {
            font-size: 17px
        }
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-capture * {
            transition: none !important
        }
    }

    /* The last column is the actions. It was 264px when Download was a white
       pill 108px wide; the icon button is 34, so the same three controls now
       measure about 194 and the column can give 56px back to everything else.
       The columns end nearer the buttons as a result, rather than stopping
       short of a gap nothing was using.
       
       Every column carries a minimum in pixels as well as a share of what is
       left over. Pure fractions let the actions column collapse under its own
       buttons on a smaller laptop - the buttons do not shrink, so the row
       overflowed instead. The minimums are what the content actually measures;
       the fractions only decide who gets the slack. */
    #tt-capture .tt-table {
        --tt-cols: 0px minmax(190px, 23fr) minmax(116px, 11fr) minmax(104px, 10fr) minmax(86px, 9fr) minmax(130px, 10fr) minmax(112px, 12fr) minmax(78px, 7fr) 208px;
        display: block;
        width: 100%;
        font-size: 15px
    }

    #tt-capture .tt-table.tt-selmode {
        --tt-cols: 38px minmax(190px, 23fr) minmax(116px, 11fr) minmax(104px, 10fr) minmax(86px, 9fr) minmax(130px, 10fr) minmax(112px, 12fr) minmax(78px, 7fr) 208px
    }

    /* Below about 1150px the seven columns and their minimums no longer fit,
       and something has to give. The date is dropped rather than everything
       being squeezed - it is the least load-bearing of them, and the sort
       control still orders by it. This mirrors what already happens on a phone,
       where accuracy and training mode go too. */
    @media (max-width:1200px) {
        #tt-capture .tt-table {
            --tt-cols: 0px minmax(200px, 30fr) minmax(116px, 14fr) minmax(86px, 12fr) minmax(104px, 14fr) 208px
        }

        #tt-capture .tt-table.tt-selmode {
            --tt-cols: 38px minmax(200px, 30fr) minmax(116px, 14fr) minmax(86px, 12fr) minmax(104px, 14fr) 208px
        }

        /* Both go together below this width. The type is the easier of the two
           to lose - most people name a capture after the gear anyway - and the
           templates above assume exactly one of the columns is gone. */



        #tt-capture .tt-datecol,
        #tt-capture .tt-typecol,
        #tt-capture .tt-gaincol {
            display: none
        }
    }

    #tt-capture .tt-datecol,
    #tt-capture .tt-typecol {
        white-space: nowrap
    }

    /* The type, as a badge.
       
       Quieter than the status pill beside it, which is the point: status is an
       outcome worth noticing and the type is a fact worth finding. Same
       radius and padding as the gain and status pills so the row reads as one
       family rather than three. */
    #tt-capture .tt-typetag {
        display: inline-block;
        padding: 5px 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .07);
        color: rgba(255, 255, 255, .68);
        font-size: 13.5px;
        font-weight: 500;
        letter-spacing: -.01em;
        white-space: nowrap
    }




    #tt-capture .tt-datesub {
        display: block;
        font-size: 13px;
        color: rgba(255, 255, 255, .35);
        margin-top: 1px
    }

    #tt-capture .tt-lrow {
        display: grid;
        grid-template-columns: var(--tt-cols);
        align-items: center;
        border-top: 1px solid var(--tt-line);
        position: relative
    }

    /* The right padding is the gap between one column and the next, since the
       grid itself has none.
       
       16px rather than 12. Not more: at 18 the Training Mode header starts
       wrapping on a 1500px screen, which is a common enough width that a
       two-line header there is worse than a tighter row. The gap between the
       columns is the only thing this controls - the columns themselves are
       fractions and were already filling the width. */
    #tt-capture .tt-lrow>* {
        padding: 13px 16px 13px 0;
        min-width: 0;
        overflow-wrap: anywhere
    }

    /* Except the actions, which sit hard against the right edge - padding
       there would push the buttons off the end of the column they were
       measured to fit. */
    #tt-capture .tt-lrow>*:last-child {
        padding-right: 0
    }

    #tt-capture .tt-lhead {
        border-top: none;
        border-bottom: 1px solid var(--tt-line)
    }

    #tt-capture .tt-lhead>* {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .05em;
        /* White.
        
           These started at 35%, then five of them were accidentally getting
           60% from the row rule below, then 80% deliberately. None was bright
           enough: small uppercase letters carry far less ink than the text
           under them, so the same grey reads much fainter here than it does in
           a row, and 80% of white on black still reads as grey at this size. */
        color: #fff;
        font-weight: 600;
        padding-bottom: 10px
    }


    /* A heading you can sort by.
       
       Both arrows appear on hover: one says what a click does now, the other
       what a second click would do. On the column actually being sorted the
       arrow in force stays lit without hovering, because otherwise the only
       way to know how the list is ordered is to have watched it happen. */
    #tt-capture .tt-lhead>[data-sort] {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        /* One line. Two headings are long enough to wrap once something sits
           beside them, and a heading row of uneven height reads as a mistake. */
        white-space: nowrap
    }

    /* No width until it is wanted.
       
       These are in the markup all the time so they can fade rather than pop,
       and at 11px wide plus a gap they took 16px off every heading whether or
       not anybody was pointing at one - enough to wrap "Training Time" onto a
       second line on a 1400px screen. Zero-width while hidden, so the idle
       heading row is exactly what it was. */
    #tt-capture .tt-sortarrows {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        width: 0;
        margin-left: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity .12s ease
    }

    #tt-capture .tt-lhead>[data-sort]:hover .tt-sortarrows,
    #tt-capture .tt-lhead>[data-sort]:focus-visible .tt-sortarrows,
    #tt-capture .tt-sorted-asc .tt-sortarrows,
    #tt-capture .tt-sorted-desc .tt-sortarrows {
        width: 11px;
        margin-left: 5px;
        opacity: 1
    }

    #tt-capture .tt-sortup,
    #tt-capture .tt-sortdown {
        width: 11px;
        height: 7px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 3.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        color: rgba(255, 255, 255, .35)
    }

    /* The direction in force, on the column in force. */
    #tt-capture .tt-sorted-asc .tt-sortup,
    #tt-capture .tt-sorted-desc .tt-sortdown {
        color: #fff
    }

    #tt-capture .tt-lhead>[data-sort]:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px;
        border-radius: 4px
    }

    #tt-capture .tt-lrow>*:last-child {
        padding-right: 0;
        text-align: right
    }

    /* The globe on a capture that is on Discover.
       
       In the corner of the artwork rather than beside the name: it costs the
       row no width, and it sits on the thing it describes.
       
       position: relative goes on the published variant only, so an unpublished
       thumb is left exactly as it was. The box already clips its contents,
       which is why the badge sits inside the corner rather than overhanging
       it - an overhang would simply be cut off. */
    #tt-capture .tt-capthumb-pub {
        position: relative
    }

    /* Everything in My Public Captures is on ToneHub, so the globe is not
       telling anyone which ones are - it is the same mark meaning the same
       thing in both lists, so the two read as one idea rather than two. */
    #tt-capture .tt-mine-thumb {
        position: relative
    }

    #tt-capture .tt-mine-thumb .tt-pubmark {
        top: 3px;
        right: 3px;
        width: 15px;
        height: 15px
    }

    #tt-capture .tt-pubmark {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 13px;
        height: 13px;
        border-radius: 999px;
        color: var(--tt-green);
        /* A dark disc behind it, so the globe stays legible on a pale image. */
        background: rgba(0, 0, 0, .72);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5px;
        box-sizing: border-box
    }

    #tt-capture .tt-pubmark svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor
    }

    /* Hierarchy in the captures list.
       
       Every cell used to be the same white at the same weight, so nine columns
       all shouted equally and the name competed with the training time. The
       name is what anybody scans for, so it is the only thing at full
       strength; the rest drop to the grey the date's second line already used.

       Targeted by position rather than by class because most of these cells
       carry no class of their own. The numbers move if a column is added -
       the same as the mobile rules below, which count the same way.

       The header row carries tt-lrow too, so it has to be excluded. Without
       that, five of its labels took this grey while Name and Status kept the
       header's fainter one, and the two looked wrong beside the rest. */
    #tt-capture .tt-lrow:not(.tt-lhead)>*:nth-child(4),
    #tt-capture .tt-lrow:not(.tt-lhead)>*:nth-child(5),
    #tt-capture .tt-lrow:not(.tt-lhead)>*:nth-child(6),
    #tt-capture .tt-lrow:not(.tt-lhead)>*:nth-child(7),
    #tt-capture .tt-lrow:not(.tt-lhead)>*:nth-child(8) {
        color: var(--tt-muted)
    }

    /* The name, at full weight and full white. */
    #tt-capture .tt-capnametext {
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff
    }

    /* White, like the name.
       
       The accuracy is the number people scan this list for - the one that says
       whether the take worked - and it read at the same strength as the
       training mode beside it. The relative date gets the same, because "3
       hours ago" is the part anybody actually reads; the exact date under it
       keeps its own dimmer colour.
       
       Written to match the muting rule above rather than to sit inside it:
       that one is #tt-capture .tt-lrow:not(.tt-lhead)>*:nth-child(n), which
       carries an id, two classes and a pseudo-class, and a plainer selector
       loses to it however obviously it is meant to win.
       
       Descendant, not child. The score is three levels down - the row, its
       cell, a wrapper span, then the number - and a child selector counted one
       of those, matched nothing, and left the number inheriting the grey it
       was supposed to be escaping. */
    #tt-capture .tt-lrow:not(.tt-lhead) .tt-qlty,
    #tt-capture .tt-lrow:not(.tt-lhead) .tt-datecol {
        color: #fff
    }

    /* The live reading during training stays muted - it is a progress number,
       not a result, and saying so in colour is the point of it. */
    #tt-capture .tt-lrow:not(.tt-lhead) .tt-qlty.tt-qlty-live {
        color: var(--tt-muted)
    }

    #tt-capture .tt-capnamewrap {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0
    }

    #tt-capture .tt-capthumb {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--tt-card2)
    }

    #tt-capture .tt-capthumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-capthumb-empty {
        background: #000;
        border: 1px solid var(--tt-line);
        display: flex;
        align-items: center;
        justify-content: center
    }

    /* The account icon. A filled outline, not a stroked shape.
       
       Smaller than the glyph it replaces, 50% against 58%, because this one
       fills more of its own viewBox: the shoulders run to the bottom edge
       where the old one stopped short, so the same percentage read noticeably
       bigger inside the same circle. */
    #tt-capture .tt-glyph {
        width: 50%;
        height: 50%;
        fill: rgba(255, 255, 255, .45);
        stroke: none;
        display: block
    }

    #tt-capture .tt-capnametext {
        min-width: 0;
        overflow-wrap: anywhere
    }

    #tt-capture input.tt-capname-edit {
        width: 100%;
        font-size: 15px;
        font-family: var(--tt-font);
        color: #fff;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 8px;
        padding: 4px 9px;
        margin: -4px 0;
        height: auto;
        outline: none
    }

    #tt-capture input.tt-capname-edit:focus {
        border-color: rgba(255, 255, 255, .6);
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture .tt-lrow::before {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 0;
        left: -12px;
        right: -12px;
        border-radius: 14px;
        background: transparent;
        transition: background .12s ease;
        pointer-events: none;
        z-index: 0
    }

    #tt-capture .tt-lrow>* {
        position: relative;
        z-index: 1
    }

    @media (hover:hover) {

        /* Not the row that offers the rest of the list.
   
   Every row lights on hover, and that row is a .tt-lrow like any other - so
   pointing at the words lit a band the full width of the table behind them.
   The button has its own hover; the row underneath it should stay still. */
#tt-capture .tt-rows-drag .tt-lrow:not(.tt-morerow):hover::before,
#tt-capture .tt-packbody .tt-lrow:not(.tt-morerow):hover::before {
    background: rgba(255, 255, 255, .035)
}

        #tt-capture .tt-lrow.tt-picked:hover::before {
            background: rgba(255, 255, 255, .07)
        }
    }

    #tt-capture .tt-rows-drag .tt-lrow,
    #tt-capture .tt-packbody .tt-lrow {
        touch-action: pan-y
    }

    #tt-capture .tt-lrow.tt-dragrow {
        border-top-color: transparent;
        z-index: 5;
        cursor: grabbing;
        scale: 1.012;
        transition: scale .16s ease
    }

    #tt-capture .tt-lrow.tt-dragrow::before {
        background: #1c1c1e;
        box-shadow: 0 16px 34px rgba(0, 0, 0, .6)
    }

    #tt-capture .tt-capnamewrap {
        cursor: grab
    }

    body.tt-dragging,
    body.tt-dragging * {
        -webkit-user-select: none;
        user-select: none;
        cursor: grabbing !important
    }

    #tt-capture .tt-lrow.tt-picked::before {
        background: rgba(255, 255, 255, .045)
    }

    /* The empty message spans the whole grid, which also makes it the last
       child - and the last child of a row is the actions column, which is
       right-aligned. So "No captures yet" was being pushed to the right edge
       under the buttons that were not there, while the same message in My
       Public Captures sat centred, because that list is not a grid.
       
       :last-child on this selector too, so it carries the weight to say so
       rather than losing to a rule about a column it is not in. */
    #tt-capture .tt-lrow>.tt-empty,
    #tt-capture .tt-lrow>.tt-empty:last-child {
        grid-column: 1 / -1;
        text-align: center;
        padding-right: 0
    }

    #tt-capture .tt-packbody .tt-lrow>*:nth-child(2) {
        padding-left: 22px
    }

    #tt-gate {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(0, 0, 0, .72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-family: var(--tt-font);
        color: var(--tt-ink)
    }

    #tt-gate .tt-gate-card {
        position: relative;
        width: 100%;
        max-width: 440px;
        background: #141414;
        border: 1px solid #141414;
        border-radius: 40px;
        padding: 40px 28px 40px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px)
    }

    #tt-gate h2 {
        font-size: 34px;
        line-height: 1.18;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        margin: 0 0 14px;
        text-transform: none
    }

    #tt-gate .tt-gate-sub {
        font-size: 14px;
        color: #bfbebf;
        margin: 0 0 20px;
        line-height: 1.5
    }

    /* The same drawn close button as the instructions window and ControlHub.
       46px against the card's 15px inset, as ControlHub has it; the circle is
       the drawing's, so the button itself carries no background. */
    #tt-gate .tt-gate-x {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: transparent;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--tt-font)
    }

    #tt-gate .tt-gate-x svg {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none
    }

    #tt-gate .tt-gate-x circle {
        fill: #3a3a3a;
        transition: fill .15s ease
    }

    #tt-gate .tt-gate-x g {
        stroke: #fff
    }

    #tt-gate .tt-gate-x:hover circle {
        fill: #4a4a4a
    }

    #tt-gate .tt-gate-x:hover {
        background: rgba(255, 255, 255, .14);
        background-image: none;
        color: #fff
    }

    #tt-gate .tt-gate-cta {
        display: block;
        text-align: center;
        background: #fff;
        color: #000;
        font-weight: 700;
        font-size: 15px;
        padding: 14px 20px;
        border-radius: 999px;
        text-decoration: none;
        letter-spacing: -.02em
    }

    #tt-gate .tt-gate-cta:hover {
        background: #e4e4e4
    }

    #tt-gate button.tt-gate-cta-btn {
        border: 0;
        width: 100%;
        cursor: pointer;
        font-family: inherit
    }

    /* Which account the panel is talking about, under its opening line. */
    #tt-gate .tt-whoami {
        margin: -14px 0 22px;
        font-size: 13px;
        color: var(--tt-faint)
    }

    #tt-gate .tt-whoami b {
        color: rgba(255, 255, 255, .75);
        font-weight: 600
    }

    /* The line under the button - where to look next when the steps above
       were not the answer. */
    #tt-gate .tt-gate-foot {
        margin: 16px 0 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--tt-faint)
    }

    /* The heading clears the close button rather than wrapping under it.
       The button is 46px at 15px in, so it reaches 61px down the card; the
       card's own padding is 40px, and this covers the rest. "No ToneHub
       profile on this account" is long enough to need it. */
    #tt-gate #tt-gate-profile h2 {
        margin-top: 26px
    }

    #tt-gate .tt-setup {
        text-align: left;
        margin: 0 0 26px
    }

    #tt-gate .tt-setup-step {
        display: flex;
        gap: 14px;
        margin-bottom: 16px
    }

    #tt-gate .tt-setup-n {
        flex: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .12);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: -.02em
    }

    #tt-gate .tt-setup-t {
        font-size: 14px;
        color: rgba(255, 255, 255, .75);
        line-height: 1.5
    }

    #tt-gate .tt-setup-t b {
        color: #fff;
        font-weight: 600;
        letter-spacing: -.02em
    }

    @media (max-width:480px) {
        #tt-gate .tt-gate-card {
            padding: 26px 20px 20px
        }
    }

    #tt-gate .tt-spinner {
        display: block;
        width: 32px;
        height: 32px;
        margin: 34px auto 8px
    }

    #tt-gate .tt-spinner svg {
        width: 100%;
        height: 100%;
        display: block
    }

    #tt-gate .tt-spinner rect {
        fill: #fff;
        animation: tt-spin-fade 1s linear infinite
    }

    @keyframes tt-spin-fade {
        0% {
            opacity: 1
        }

        100% {
            opacity: .15
        }
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-gate .tt-spinner rect {
            animation: none;
            opacity: .45
        }
    }

    #tt-gate .tt-lgfield {
        margin-bottom: 15px
    }

    #tt-gate .tt-lglbl {
        display: none
    }

    #tt-gate input {
        width: 100%;
        padding: 18px 22px;
        font-size: 16px;
        font-family: var(--tt-font);
        border: 0 !important;
        outline: 0 !important;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 12px;
        background-color: #272727 !important;
        background-clip: padding-box;
        color: #fff;
        box-sizing: border-box;
        transition: background-color .2s ease
    }

    #tt-gate input::placeholder {
        color: rgba(255, 255, 255, .45);
        -webkit-text-fill-color: rgba(255, 255, 255, .45);
        opacity: 1
    }

    #tt-gate input:placeholder-shown {
        background-color: #272727 !important;
        color: rgba(255, 255, 255, .45) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, .45) !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important
    }

    #tt-gate input:not(:placeholder-shown) {
        background-color: #272727 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important
    }

    #tt-gate input:focus {
        border: 0 !important;
        outline: 0 !important;
        background-color: #303030 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important
    }

    #tt-gate input:-webkit-autofill,
    #tt-gate input:-webkit-autofill:hover,
    #tt-gate input:-webkit-autofill:focus,
    #tt-gate input:-webkit-autofill:active {
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-box-shadow: 0 0 0 1000px #272727 inset !important;
        box-shadow: 0 0 0 1000px #272727 inset !important;
        -webkit-text-fill-color: #fff !important;
        caret-color: #fff;
        transition: background-color 9999s ease-in-out 0s
    }

    #tt-gate input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #303030 inset !important;
        box-shadow: 0 0 0 1000px #303030 inset !important
    }

    #tt-gate input:autofill,
    #tt-gate input:autofill:hover,
    #tt-gate input:autofill:focus {
        background-color: transparent !important;
        border: 0 !important;
        -webkit-box-shadow: 0 0 0 1000px #272727 inset !important;
        box-shadow: 0 0 0 1000px #272727 inset !important;
        -webkit-text-fill-color: #fff !important
    }

    #tt-gate .tt-signin-btn {
        width: 100%;
        background: #fff;
        color: #000;
        border: none;
        padding: 16px;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.02em;
        font-family: var(--tt-font);
        border-radius: 50px;
        cursor: pointer;
        margin-top: 8px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px
    }

    #tt-gate .tt-signin-btn:hover:not(:disabled) {
        background: #efefef;
        background-image: none;
        color: #000
    }

    #tt-gate .tt-signin-btn:disabled {
        background: rgba(255, 255, 255, .15);
        color: rgba(255, 255, 255, .4);
        cursor: not-allowed
    }

    #tt-gate .tt-lgerr {
        color: #e42c2c;
        background-color: rgba(0, 0, 0, .5);
        border: 1px solid #ffdddd;
        padding: 10px;
        border-radius: 10px;
        margin-top: 14px;
        text-align: left;
        font-size: 14px;
        box-sizing: border-box
    }

    /* Centred, because each of these rows now holds one link.
       
       space-between was right when the sign-in row carried Create an account
       against Forgot your password. With Create an account gone, and with the
       two gate panels only ever having had Use a different account, every one
       of them was a single item pushed to the left edge of the card. */
    #tt-gate .tt-lgalt {
        display: flex;
        justify-content: center;
        margin: 20px 0 0;
        font-size: 14px;
        color: #bfbebf
    }

    #tt-gate .tt-lgalt a {
        color: #bfbebf;
        text-decoration: none;
        border: none;
        transition: color .3s ease-in-out
    }

    #tt-gate .tt-lgalt a:hover {
        color: #fff
    }

    #tt-gate .tt-lgdot {
        display: none
    }

    /* Create an account, and the way back to signing in. A line of its own
       under Forgot your password, with the action in white so it reads as the
       thing to press. */
    #tt-gate .tt-lgalt + .tt-lgnew {
        margin-top: 10px
    }

    #tt-gate .tt-lgnew a {
        color: #fff;
        font-weight: 600
    }

    #tt-gate .tt-lgnew a:hover {
        text-decoration: underline
    }

    /* First and last name side by side, as one row of the form. */
    #tt-gate .tt-lgrow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    @media (max-width:400px) {
        #tt-gate .tt-lgrow {
            grid-template-columns: 1fr;
            gap: 0
        }
    }

    /* The way in for somebody who has no account yet.
       
       Below the form's own link rather than beside it, because they are not
       the same kind of thing - one recovers an account, the other buys one -
       and the sentence is long enough that the pair would not sit on a line
       together at this width. */
    #tt-gate .tt-lgjoin {
        margin: 16px 0 0;
        padding: 16px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .09);
        font-size: 14px;
        text-align: center;
        color: #bfbebf
    }

    #tt-gate .tt-lgjoin a {
        color: #bfbebf;
        text-decoration: none;
        border: none;
        transition: color .3s ease-in-out
    }

    #tt-gate .tt-lgjoin a:hover {
        color: #fff
    }

    @media (max-width:640px) {

        #tt-capture .tt-lhead,
        #tt-capture .tt-lrow.tt-lhead {
            display: none !important
        }

        #tt-capture .tt-lrow {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center;
            row-gap: 9px;
            column-gap: 10px;
            padding: 14px 0;
            grid-template-columns: none !important
        }

        /* grid-area is not reset here any more. The row is a grid on a phone
           and every visible cell is placed explicitly further down; this
           blanket rule was overriding those placements and had to be
           out-weighted rather than obeyed, which is a fragile way to win. */
        #tt-capture .tt-lrow>* {
            padding: 0;
            min-width: 0
        }

        #tt-capture .tt-lrow>*:nth-child(1) {
            flex: 0 0 auto;
            order: 1
        }

        #tt-capture .tt-lrow>*:nth-child(2) {
            flex: 1 1 auto;
            order: 2;
            min-width: 0
        }

        #tt-capture .tt-lrow>*:nth-child(3) {
            flex: 0 0 auto;
            order: 3
        }

        #tt-capture .tt-lrow>*:nth-child(6) {
            flex: 0 0 auto;
            order: 4;
            color: var(--tt-faint)
        }

        /* The actions, by class rather than by position. The comment that used
           to sit here said positions have to move with the table, which was
           true and did not happen: a column was added and this went on
           pointing at the cell before them. */
        #tt-capture .tt-lrow>.tt-actcol {
            flex: 1 0 100%;
            order: 5
        }

        #tt-capture .tt-rowacts {
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
            gap: 8px;
            min-width: 0
        }

        #tt-capture .tt-lrow>*:nth-child(2) {
            flex-basis: calc(100% - 46px)
        }

        #tt-capture .tt-lrow .tt-status,
        #tt-capture .tt-lrow .tt-dl {
            max-width: 100%
        }

        #tt-capture .tt-lrow>.tt-cmp {
            flex: 1 0 100%;
            order: 6
        }

        #tt-capture .tt-packbody .tt-lrow>*:nth-child(2) {
            padding-left: 0
        }

        #tt-capture .tt-table {
            font-size: 14px
        }

        #tt-capture .tt-capnamewrap {
            gap: 9px
        }

        #tt-capture .tt-capthumb {
            width: 30px;
            height: 30px;
            border-radius: 7px
        }

        /* Smaller to match. At the full size the badge would take half the
           artwork and there would be little picture left to see. */
        #tt-capture .tt-pubmark {
            width: 11px;
            height: 11px;
            top: 1px;
            right: 1px;
            padding: 1px
        }

        #tt-capture .tt-empty {
            padding: 18px 0
        }
    }
    /* ============================================================
       Dialogs and toasts
       ------------------
       Everything that used to be a browser alert or confirm is drawn
       here instead, so a question about deleting something looks like
       it came from this page rather than from Chrome.

       Both layers sit on document.body rather than inside #tt-capture:
       a fixed overlay inside a transformed PageFly wrapper positions
       itself against that wrapper instead of the window, which is how a
       centred dialog ends up half off the screen. So these rules are
       deliberately unscoped and repeat the font stack rather than
       inheriting it, and they overrule the theme's own button styling
       the same way the rest of this block does.
       ============================================================ */

    #tt-toasts {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 28px;
        z-index: 10050;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        pointer-events: none;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif
    }

    .tt-toast {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        gap: 11px;
        max-width: 440px;
        background: rgba(38, 38, 40, .94);
        backdrop-filter: saturate(180%) blur(22px);
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 999px;
        padding: 12px 22px 12px 16px;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 1.35;
        text-align: left;
        box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
        cursor: default;
        opacity: 0;
        transform: translateY(12px) scale(.96);
        transition: opacity .22s ease, transform .22s cubic-bezier(.2, .9, .3, 1)
    }

    .tt-toast-in {
        opacity: 1;
        transform: none
    }

    .tt-toast-out {
        opacity: 0;
        transform: translateY(6px) scale(.97)
    }

    .tt-toast-ic {
        width: 20px;
        height: 20px;
        flex: none;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .tt-toast-ok .tt-toast-ic {
        color: #30d223
    }

    .tt-toast-error .tt-toast-ic {
        color: #ff453a
    }

    .tt-toast-info .tt-toast-ic {
        color: rgba(255, 255, 255, .6)
    }

    .tt-toast-busy .tt-toast-ic {
        color: rgba(255, 255, 255, .85);
        stroke: none
    }

    .tt-toast-busy .tt-toast-ic rect {
        fill: currentColor;
        animation: tt-spin-fade 1s linear infinite
    }

    .tt-toast-msg {
        min-width: 0
    }

    .tt-toast-long {
        align-items: flex-start;
        border-radius: 18px;
        max-width: 480px;
        font-weight: 500;
        line-height: 1.45
    }

    .tt-toast-long .tt-toast-ic {
        margin-top: 1px
    }

    @media (max-width:640px) {
        #tt-toasts {
            bottom: 16px
        }

        .tt-toast {
            font-size: 14px;
            padding: 11px 18px 11px 14px
        }
    }

    .tt-dlg-wrap {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif
    }

    .tt-dlg-back {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .68);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        transition: opacity .2s ease
    }

    .tt-dlg-wrap-in .tt-dlg-back {
        opacity: 1
    }

    .tt-dlg {
        position: relative;
        width: 100%;
        max-width: 430px;
        background: #141414;
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 28px;
        padding: 32px 28px 24px;
        text-align: center;
        color: #fff;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
        opacity: 0;
        transform: translateY(10px) scale(.95);
        transition: opacity .2s ease, transform .2s cubic-bezier(.2, .9, .3, 1)
    }

    .tt-dlg-wrap-in .tt-dlg {
        opacity: 1;
        transform: none
    }

    .tt-dlg-icon {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        margin: 0 auto 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .07)
    }

    .tt-dlg-icon svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: #fff;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .tt-dlg-danger .tt-dlg-icon {
        background: rgba(255, 69, 58, .14)
    }

    .tt-dlg-danger .tt-dlg-icon svg {
        stroke: #ff453a
    }

    .tt-dlg-title {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.25;
        margin: 0 0 10px;
        text-transform: none;
        color: #fff
    }

    .tt-dlg-body {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        color: rgba(255, 255, 255, .6);
        margin: 0 0 9px
    }

    .tt-dlg-body:last-child {
        margin-bottom: 0
    }

    .tt-dlg-acts {
        display: flex;
        gap: 10px;
        margin-top: 24px
    }

    .tt-dlg-btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 999px;
        padding: 14px 18px;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.2;
        text-transform: none;
        background-image: none;
        box-shadow: none;
        cursor: pointer;
        transition: background .15s, color .15s
    }

    .tt-dlg-cancel {
        background: rgba(255, 255, 255, .09);
        color: #fff
    }

    .tt-dlg-cancel:hover {
        background: rgba(255, 255, 255, .15);
        background-image: none;
        color: #fff
    }

    .tt-dlg-go {
        background: #fff;
        color: #000
    }

    .tt-dlg-go:hover {
        background: #e4e4e4;
        background-image: none;
        color: #000
    }

    .tt-dlg-go-danger {
        background: #ff453a;
        color: #fff
    }

    .tt-dlg-go-danger:hover {
        background: #ff5f55;
        background-image: none;
        color: #fff
    }

    .tt-dlg-btn:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .65);
        outline-offset: 3px
    }

    /* The profile editor is the one sheet with a form in it, so it is wider
       and reads left to right rather than being centred like a question. */
    /* Both dialogs that use this hold a form. 520px left the edit fields in
       a single narrow column with a scrollbar; 640 fits two columns and
       still sits comfortably on a laptop. */
    .tt-dlg-wide {
        max-width: 640px;
        text-align: left
    }

    .tt-dlg-wide .tt-dlg-title {
        margin-bottom: 7px
    }

    .tt-dlg-wide .tt-dlg-body {
        margin-bottom: 24px
    }

    .tt-prof-head {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px
    }

    .tt-prof-av {
        width: 64px;
        height: 64px;
        flex: none;
        border-radius: 50%;
        overflow: hidden;
        background: #1a1a1a;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff
    }

    .tt-prof-av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .tt-prof-who {
        min-width: 0
    }

    .tt-prof-nm {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .tt-prof-em {
        font-size: 13px;
        color: rgba(255, 255, 255, .35);
        margin-bottom: 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    /* Change and Remove, side by side under the name.
       
       Remove is quieter than Change: one is the thing people came here to do,
       the other is a way out of it. */
    .tt-prof-photos {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 8px;
        flex-wrap: wrap
    }

    .tt-prof-drop {
        border: 0;
        background: transparent;
        padding: 0;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, .42);
        cursor: pointer
    }

    .tt-prof-drop:hover {
        color: #ff4d4f
    }

    .tt-prof-photo {
        border: 1px solid rgba(255, 255, 255, .18);
        background: transparent;
        background-image: none;
        color: rgba(255, 255, 255, .8);
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.02em;
        text-transform: none;
        padding: 6px 14px;
        margin: 0;
        width: auto;
        height: auto;
        border-radius: 999px;
        box-shadow: none;
        cursor: pointer
    }

    .tt-prof-photo:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        color: #fff
    }

    .tt-prof-lbl {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, .35);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin: 0 0 8px
    }

    .tt-prof-input {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 10px;
        color: #fff;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 15px;
        line-height: 1.5;
        padding: 12px 14px;
        resize: vertical
    }

    .tt-prof-input::placeholder {
        color: rgba(255, 255, 255, .3)
    }

    .tt-prof-input:focus {
        outline: 2px solid rgba(235, 235, 235, .55);
        outline-offset: 1px;
        border-color: rgba(235, 235, 235, .55)
    }

    .tt-how {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin: 4px 0 4px
    }

    .tt-how-step {
        display: flex;
        gap: 14px;
        align-items: flex-start
    }

    .tt-how-n {
        flex: none;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .1);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.02em;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .tt-how-b {
        min-width: 0
    }

    .tt-how-h {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        margin-bottom: 3px
    }

    .tt-how-p {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .55)
    }

/* Under the username box: what it is for, and what the service said when it
   refused. The note is always there; the error only when there is one. */
.tt-prof-note {
    margin-top: 8px;
    /* Clear of whatever comes next. Without it the note sat against the Bio
       label below and the two read as one run-on line. */
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .42);
    font-size: 13px;
    line-height: 1.5
}

.tt-prof-err {
    margin-top: 8px;
    color: #ff6b6b;
    font-size: 13px;
    line-height: 1.5
}


    .tt-prof-count {
        font-size: 12px;
        color: rgba(255, 255, 255, .3);
        text-align: right;
        margin-top: 7px;
        font-variant-numeric: tabular-nums
    }


    @media (max-width:480px) {
        .tt-dlg {
            border-radius: 24px;
            padding: 26px 20px 20px
        }

        /* The action being confirmed goes on top on a narrow screen, the way
           an iOS alert stacks it - reversed so the markup order stays
           cancel-then-confirm for anything reading it in order. */
        .tt-dlg-acts {
            flex-direction: column-reverse
        }
    }

    @media (prefers-reduced-motion:reduce) {

        .tt-toast,
        .tt-dlg,
        .tt-dlg-back {
            transition: none
        }
    }

/* ---------------------------------------------------------------------------
   The edit dialog.

   Global rather than scoped under #tt-capture for the same reason as the rest
   of .tt-dlg - the dialog is appended to document.body, outside the portal.

   The width comes from .tt-dlg-wide, which already existed for the profile
   editor. Widened there rather than overridden here, so there is one number
   for "a dialog with a form in it" instead of two competing ones.
   --------------------------------------------------------------------------- */

/* Two columns, so a rig capture's eight rows fit without the form becoming a
   scroller. Collapses to one column on a phone, where two would be unreadable
   rather than merely tight. */
/* The crop dialog.

   Not scoped under #tt-capture, like the rest of the dialog rules, because a
   dialog is appended to the body rather than inside the capture element. */
/* Centred. The dialog is one column - a heading, a photo, a slider, two
   buttons - all of it on the same axis, and text ranged left against a centred
   photograph reads as two designs in one box. */
.tt-cropdlg .tt-dlg-title,
.tt-cropdlg .tt-dlg-body {
    text-align: center
}

.tt-cropdlg .tt-dlg-body {
    margin-bottom: 18px;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto
}

/* Live mode. Scoped under #tt-capture like the rest of the page, since none
   of this is in a dialog. */
/* The home panel for Live mode, where the other modes have a drop zone. */
#tt-capture .tt-livehome-inner {
    border: 1px solid var(--tt-line);
    border-radius: 16px;
    padding: 26px;
    margin-top: 18px
}

#tt-capture .tt-livehome-inner h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: #fff
}

#tt-capture .tt-livehome-lede {
    color: var(--tt-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 26px;
    max-width: 620px
}

/* Three across on a wide card, stacking when there is not room. The box was
   half empty with the words all down the left. */
#tt-capture .tt-livesteps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding-bottom: 4px
}

@media (max-width:860px) {
    #tt-capture .tt-livesteps { grid-template-columns: 1fr; gap: 16px }
}

#tt-capture .tt-livestep {
    display: flex;
    gap: 13px;
    align-items: flex-start
}

#tt-capture .tt-livestep b {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--tt-muted);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center
}

#tt-capture .tt-livestep strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 4px
}

#tt-capture .tt-livestep span {
    color: var(--tt-muted);
    font-size: 14px;
    line-height: 1.55
}

#tt-capture .tt-livehome-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--tt-line)
}

#tt-capture .tt-livehome-need {
    color: var(--tt-faint);
    font-size: 13px;
    line-height: 1.55;
    max-width: 380px
}

#tt-capture #tt-livebegin {
    margin-top: 8px
}


/* The dialog shown when a single capture finishes. It carries a comparison
   player, which is wider than anything else in a dialog and has to be allowed
   to be - and the whole thing has to stay inside the screen on a laptop. */
.tt-donedlg {
    max-height: 88vh;
    display: flex;
    flex-direction: column
}

.tt-donecmp {
    margin: 18px 0 4px;
    overflow-y: auto;
    min-height: 0
}

/* While the two files are being fetched. Given a floor so the dialog does not
   grow by a hundred pixels the moment the player arrives. */
.tt-donewait {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 6px
}


/* The spinner beside "Loading audio". Small, and sitting on the text baseline
   rather than above it - the status line is one line and should stay one. */
#tt-capture .tt-cmp-status {
    display: flex;
    align-items: center;
    gap: 8px
}

/* The waiting card centres everything in it, and that worked until the rule
   above turned this line into a flex row so a spinner could sit on its
   baseline in the player. A flex row starts at the left whatever text-align
   says, so the heading stayed centred and the sentence under it did not.
   
   Scoped to the waiting card rather than undone, because the other place this
   class is used is a status line in the player that should stay left. */
#tt-capture .tt-cmp-waiting .tt-cmp-status {
    justify-content: center
}

#tt-capture .tt-cmp-loadspin {
    width: 14px;
    height: 14px;
    flex: none
}

/* The same animation the big spinner uses, defined once further up. */
#tt-capture .tt-cmp-loadspin rect {
    fill: currentColor;
    animation: tt-spin-fade 1s linear infinite
}

@media (prefers-reduced-motion:reduce) {
    #tt-capture .tt-cmp-loadspin rect {
        animation: none;
        opacity: .45
    }
}


/* The clipping warning. Red, above the clock, and it does not go away once it
   has appeared. */
#tt-capture .tt-liveclip {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 77, 79, .09);
    border: 1px solid rgba(255, 77, 79, .35);
    font-size: 14px;
    line-height: 1.55
}

#tt-capture .tt-liveclip b {
    display: block;
    color: #ff6b6b;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 3px
}

#tt-capture .tt-liveclip span {
    color: var(--tt-muted)
}


/* The verdict, under the number in the accuracy column. Quiet by default -
   the percentage is what is being read, and this says what it means. */
#tt-capture .tt-verdict {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--tt-muted)
}

/* Only the bands worth acting on are coloured. Making every row green turns
   the colour into decoration, and then the one row that is not green has
   nothing to stand out against. */
#tt-capture .tt-verdict-bad { color: #ff8f8f }


#tt-capture .tt-livegrid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    margin-top: 18px
}

@media (max-width:700px) {
    #tt-capture .tt-livegrid {
        grid-template-columns: 1fr
    }
}

#tt-capture .tt-livechecks {
    margin-top: 16px
}

#tt-capture .tt-livecheck {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px
}

#tt-capture .tt-livecheck b {
    flex: none;
    width: 14px
}

#tt-capture .tt-livecheck-ok b { color: var(--tt-green) }
#tt-capture .tt-livecheck-bad b { color: var(--tt-red) }
#tt-capture .tt-livecheck-warn b { color: var(--tt-amber) }

/* The meters. A scale, two channels, and a line of explanation beside them. */
/* Only as wide as the meters need. There was a line of explanation beside
   them; with that gone a full width box would be mostly empty. */
#tt-capture .tt-livemeters {
    display: inline-flex;
    gap: 24px;
    align-items: flex-start;
    padding: 22px 24px 16px;
    border: 1px solid var(--tt-line);
    border-radius: 16px;
    margin: 20px 0 4px;
    background: rgba(255, 255, 255, .015)
}

/* Built like a meter column so it lines up with one: the same gap for the
   clip lamp, then a track exactly the height of the space inside a tube.
   The row aligns from the top, so a channel name that wraps under a meter
   cannot push the tubes out of line with it. Each label is centred on its
   level, so the number sits across the line it names. */
#tt-capture .tt-mscale {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    font-size: 10px;
    line-height: 1;
    color: var(--tt-faint);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 22px
}

#tt-capture .tt-mscale-lamp {
    display: block;
    height: 9px
}

#tt-capture .tt-mscale-track {
    position: relative;
    height: 208px;
    margin: 1px 0
}

#tt-capture .tt-mscale-track span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap
}

#tt-capture .tt-mchan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

/* Latches when anything hits full scale, and clears when tapped - so a clip
   two minutes ago is still visible rather than having flashed past. */
/* Matched to the tube it sits on. At 14px a 30px lamp reads as a cap on top
   of the meter rather than a light belonging to it. */
#tt-capture .tt-mclip {
    width: 14px;
    height: 9px;
    padding: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer
}

#tt-capture .tt-mclip-on {
    background: #ff2d2d;
    border-color: #ff5b5b;
    box-shadow: 0 0 9px rgba(255, 45, 45, .55)
}

/* 14px, down from 30. The wide bar was closer to a progress bar than a meter,
   and a desk meter is a narrow column. */
#tt-capture .tt-mtube {
    width: 14px;
    height: 210px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    overflow: hidden
}

/* The space inside the tube's border, exactly. It was drawn 210px tall in
   208px of room, so the bottom two pixels were cut off and the scale was
   stretched by one percent against its labels. */
#tt-capture .tt-mtube canvas {
    display: block;
    width: 100%;
    height: 100%
}

#tt-capture .tt-mname {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em
}

#tt-capture .tt-mval {
    font-size: 11px;
    color: var(--tt-faint);
    font-variant-numeric: tabular-nums
}

/* Tighter on a phone, so two columns and a scale still sit comfortably. */
@media (max-width:640px) {
    #tt-capture .tt-livemeters {
        gap: 18px;
        padding: 18px 16px 14px
    }
}

#tt-capture .tt-liveclock {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    margin: 0
}

#tt-capture .tt-livetrack {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden
}

#tt-capture .tt-livetrack i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tt-green);
    transition: width .2s linear
}

/* What to play, while playing it. Green because it is guidance rather than a
   problem - the red and amber in this card mean something is wrong. */
#tt-capture .tt-liveprompt {
    background: rgba(48, 210, 35, .07);
    border: 1px solid rgba(48, 210, 35, .25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 18px
}

#tt-capture .tt-liveprompt-what {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.02em;
    margin-bottom: 3px
}

#tt-capture .tt-liveprompt-why {
    color: var(--tt-muted);
    font-size: 13px;
    line-height: 1.5
}

.tt-cropstage {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none
}

.tt-cropstage:active {
    cursor: grabbing
}

.tt-cropcanvas {
    display: block;
    width: 300px;
    height: 300px;
    pointer-events: none
}

/* Nothing drawn over a square crop.
   
   There was a white outline traced around the inside of the stage, which read
   as a border on the photo rather than as a frame around it - and it is
   telling somebody something they can already see, since the stage has the
   crop's own shape and everything outside it is dialog. */
.tt-cropmask {
    position: absolute;
    inset: 0;
    pointer-events: none
}

/* A round avatar is the one case that needs saying, because the corners of
   the stage will be thrown away and nothing else shows that. Dimmed outside
   the circle, with a hairline on it - enough to read as a frame without
   competing with the photograph. */
.tt-cropstage-round .tt-cropmask {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55),
                0 0 0 300px rgba(0, 0, 0, .6)
}

/* Said, not warned. The image is fine, it is just not as good as it could be,
   so this reads as a note rather than a problem. */
.tt-cropnote {
    max-width: 300px;
    margin: 0 auto 14px;
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
    line-height: 1.5;
    text-align: center
}

.tt-cropzoom {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 300px;
    margin: 16px auto 4px
}

.tt-cropzoomend {
    color: rgba(255, 255, 255, .5);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    width: 12px;
    text-align: center;
    flex: none
}

.tt-cropslider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    outline: none
}

.tt-cropslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 0
}

.tt-cropslider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 0
}

.tt-cropslider:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35)
}

@media (max-width:420px) {
    .tt-cropstage,
    .tt-cropcanvas,
    .tt-cropzoom {
        width: 240px
    }

    .tt-cropstage,
    .tt-cropcanvas {
        height: 240px
    }
}

.tt-editform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin: 20px 0 4px;
    text-align: left;
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px
}

.tt-editform .tt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

/* The name and the notes read as the whole capture rather than one attribute
   of it, so they run the full width. */
.tt-editform .tt-field-full {
    grid-column: 1 / -1
}

/* The dialogs are appended to document.body, so nothing scoped to
   #tt-capture reaches them - the completed tick had no styling here at all.
   Same mark, same rules, stated again for this side of the page. */
.tt-editform .tt-lbl {
    font-size: 12px;
    font-weight: 600;
    /* Same weight of grey as the main form's labels, for the same reason. */
    color: rgba(255, 255, 255, .75);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.tt-editform .tt-lbl::after {
    content: "";
    width: 5px;
    height: 9px;
    border-style: solid;
    border-color: #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) scale(.5);
    transform-origin: center;
    opacity: 0;
    margin-bottom: 3px;
    transition: opacity .16s ease, transform .16s ease
}

.tt-editform .tt-lbl.tt-lbl-done::after {
    opacity: 1;
    transform: rotate(45deg) scale(1)
}

/* A gear field in a dialog looks like the fields beside it.
   
   The chip box carries its own background, radius and border for the main
   form, where the surrounding card is darker. In a dialog that made it a grey
   box in a row of black ones, and a couple of pixels off in height and corner
   radius - which is what reads as a form that was not laid out together.
   
   Height is matched by making the box the same size a text input resolves to:
   15px text at 1.47 line height, 10px of padding each side, 1px of border. */
.tt-editform .tt-gchips,
.tt-dlg .tt-gchips {
    margin: 0;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 5px 8px;
    min-height: 44px
}

.tt-editform .tt-gchips:focus-within,
.tt-dlg .tt-gchips:focus-within {
    border-color: rgba(255, 255, 255, .55)
}

/* An empty field should not look like a filled one - the same fix the main
   form got, which never reached here.
   
   That rule is written #tt-capture input::placeholder, and a dialog is
   appended to the body rather than inside #tt-capture, so every placeholder in
   here fell back to the browser default. On black that sits close enough to
   white that "Anything worth remembering" and "Optional" read as text somebody
   had typed. */
.tt-editform ::placeholder {
    color: rgba(255, 255, 255, .28);
    opacity: 1
}

/* And the selects, which have no placeholder to colour - "Choose..." is a real
   option with an empty value, so it is the select's own text and comes out as
   white as a chosen answer. Dimmed only while that option is the one showing,
   so an actual choice reads full strength. */
.tt-editform select:has(option[value=""]:checked) {
    color: rgba(255, 255, 255, .38)
}

.tt-editform input[type=text],
.tt-editform select,
.tt-editform textarea {
    background: #000;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    /* The main form's equivalent rule has always set this; this one never did,
       and that is the whole difference between the two. A browser that gives a
       native input or select any margin of its own leaves it sitting below the
       gear field beside it - same height, a few pixels lower - because a gear
       field is a div and inherits no such margin. Stated here so the position
       does not depend on which browser is asking. */
    margin: 0
}

/* One height for every control, stated rather than left to work itself out.
   
   A native select and a text input do not resolve the same intrinsic height
   from the same padding and font - the browser has its own metrics for a
   control with a menu behind it - so Stomp sat a few pixels above Gain type
   beside it. Fixing the height makes them identical by construction. */
.tt-editform input[type=text],
/* The dialogs are appended to document.body, so the rule above does not reach
   them and their popups were white for the same reason. */
.tt-dlg,
.tt-editform {
    color-scheme: dark
}

.tt-editform option,
.tt-dlg option {
    background: #1a1a1a;
    color: #fff
}

.tt-editform select {
    height: 44px;
    min-height: 44px
}

/* The chip box starts at the same height but is free to grow - three amps
   wrap onto a second row, and a fixed height would cut them off. */
.tt-dlg .tt-gchips,
.tt-editform .tt-gchips {
    height: auto;
    min-height: 44px
}

/* Not the notes box, which is meant to grow. */
.tt-editform textarea {
    height: auto;
    min-height: 88px
}

/* And every field sits at the top of its row, so a taller neighbour cannot
   push it down the cell. */
.tt-editform .tt-field {
    align-self: start
}

/* The tag chips, written out again for the dialog.
   
   Everything above is scoped to #tt-capture and the dialog is not inside it -
   which is the same trap this file warns about a few rules up, and the one I
   walked into: the chips came out as unstyled text run together in a line,
   because the rules simply did not reach them. Same values as the ones under
   #tt-capture; if one changes, so does the other. */
/* The same chips inside the publish dialog.
   
   .tt-dlg, not .tt-dlg-card. The card ttSheet builds carries tt-dlg and every
   other class in that family is a child of it - tt-dlg-title, tt-dlg-body,
   tt-dlg-acts - so tt-dlg-card reads like the right name and matches nothing.
   These rules did nothing at all until the class was corrected, and the chips
   rendered as a run of unstyled words.
   
   Written as a second selector on every rule rather than as a shared class,
   because these live in .tt-dlg and the ones above live in .tt-editform, and
   both sit outside #tt-capture where the portal's own chip rules cannot reach
   either of them. */
.tt-dlg .tt-tagpick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--tt-card2, #1a1a1a);
    border: 1px solid var(--tt-line2, rgba(255, 255, 255, .1));
    border-radius: 6px;
    padding: 10px 12px
}

.tt-dlg .tt-tag {
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .82);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    padding: 7px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s
}

.tt-dlg .tt-tag:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff
}

.tt-dlg .tt-tag-on,
.tt-dlg .tt-tag-on:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
    font-weight: 600
}

/* The small outline button, inside the dialogs.
   
   .tt-ghost is scoped under #tt-capture and these sheets are appended to
   document.body, so the class alone left the button with the browser's default
   grey. Same shape as the portal's, restated where it can be seen. */
.tt-editform button.tt-ghost,
.tt-dlg button.tt-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.02em;
    cursor: pointer
}

.tt-editform button.tt-ghost:hover,
.tt-dlg button.tt-ghost:hover {
    background: rgba(255, 255, 255, .08)
}

/* The photo row inside the dialogs. The portal's own rules are scoped under
   #tt-capture and these sheets are appended to document.body, so they need
   saying again here. */
.tt-editform .tt-artrow,
.tt-dlg .tt-artrow {
    display: flex;
    align-items: center;
    gap: 14px
}

.tt-editform .tt-artthumb,
.tt-dlg .tt-artthumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: var(--tt-card2, #1a1a1a);
    border: 1px solid var(--tt-line2, rgba(255, 255, 255, .1));
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.tt-editform .tt-artthumb img,
.tt-dlg .tt-artthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.tt-editform .tt-artthumb-empty .tt-glyph,
.tt-dlg .tt-artthumb-empty .tt-glyph {
    width: 42%;
    height: 42%;
    fill: rgba(255, 255, 255, .45);
    stroke: none
}

.tt-editform .tt-artacts,
.tt-dlg .tt-artacts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.tt-editform .tt-arthint,
.tt-dlg .tt-arthint {
    flex-basis: 100%;
    font-size: 13px;
    color: rgba(255, 255, 255, .4)
}

.tt-editform .tt-tagpick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--tt-card2, #1a1a1a);
    border: 1px solid var(--tt-line2, rgba(255, 255, 255, .1));
    border-radius: 6px;
    padding: 10px 12px
}

.tt-editform .tt-tag {
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .82);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    padding: 7px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s
}

.tt-editform .tt-tag:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff
}

.tt-editform .tt-tag-on {
    background: #fff;
    border-color: #fff;
    color: #000;
    font-weight: 600
}

.tt-editform .tt-tag-on:hover {
    background: #fff;
    color: #000
}

.tt-editform .tt-tag-full {
    opacity: .34;
    cursor: default
}

.tt-editform .tt-tag-full:hover {
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .82)
}

/* A plain light border rather than the amber used elsewhere on the page. In a
   dialog this size the ring is most of what you see, and amber reads as a
   warning about the field rather than as focus. */
.tt-editform input[type=text]:focus,
.tt-editform select:focus,
.tt-editform textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .55);
    background: #0a0a0a
}

/* Guidance, not a fault - the disabled Save button is what says you cannot
   continue yet. A save that actually failed gets the red below. */
/* The publish offer.
   
   Built from the dialog's own parts rather than new furniture: the same card,
   the same field styling, the same two-button footer. The only thing here that
   did not exist is a row that names a capture and offers to add it. */
/* Written out, not inherited. .tt-field and .tt-lbl are declared under
   #tt-capture and a dialog is appended to the body, so nothing in here would
   have reached these two. Same shape as the edit dialog's fields. */
.tt-packfields {
    margin: 4px 0 20px
}

.tt-packfields .tt-lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 6px
}

.tt-packfields input[type=text] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    padding: 10px 12px;
    margin: 0
}

.tt-packfields input[type=text]:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .3)
}

.tt-packfields ::placeholder {
    color: rgba(255, 255, 255, .3)
}

.tt-publbl {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin: 0 0 6px
}

.tt-publbl-gap {
    margin-top: 18px
}

/* The publish dialog is bounded, and one region inside it gives.
   
   The lists used to cap themselves at 280px each. That bounded the lists and
   not the card: with a name field, a heading and two buttons around them the
   card still grew past the bottom of the screen and took Publish with it - and
   two scrolling panels stacked on each other is an awkward thing to use even
   when it fits. The card takes a ceiling instead, the middle scrolls, and the
   heading and the button stay where they are however many captures go in. */
.tt-dlg.tt-pubdlg {
    display: flex;
    flex-direction: column;
    max-height: 86vh
}

.tt-pubscroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room for the scrollbar so it does not sit on top of the Add buttons. */
    padding-right: 4px;
    margin-right: -4px
}

.tt-publist {
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 2px 14px
}

.tt-pubrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0
}

.tt-pubrow + .tt-pubrow {
    border-top: 1px solid rgba(255, 255, 255, .05)
}

/* A tick, drawn the way the file cards draw theirs - two borders, no mask. */
/* The colour, written out. A dialog is appended to the body, not inside
   #tt-capture, so the --tt- variables declared there do not reach it - which
   is why every other dialog rule states its colours literally too. */
.tt-pubtick {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: #30d223;
    position: relative
}

.tt-pubtick::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 2.5px;
    width: 4px;
    height: 8px;
    border: solid #000;
    border-width: 0 1.6px 1.6px 0;
    border-radius: 0 0 1.5px 0;
    transform: rotate(45deg)
}

.tt-pubtext {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left
}

.tt-pubtext b {
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.tt-pubmeta {
    color: rgba(255, 255, 255, .4);
    font-size: 12.5px
}

/* The offered ones sit back, so what is going up and what is merely on offer
   are told apart before anything is read. */
.tt-publist-dim .tt-pubtext b {
    color: rgba(255, 255, 255, .78);
    font-weight: 500
}

.tt-pubadd {
    flex: none;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 7px 15px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    cursor: pointer
}

.tt-pubadd:hover {
    background: rgba(255, 255, 255, .18)
}

/* Takes one back out of the pack. Quiet until it is wanted - it sits on every
   added row, and a row of red crosses would read as a list of problems. */
.tt-pubdrop {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(255, 255, 255, .4);
    font-family: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s
}

.tt-pubdrop:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff
}

.tt-pubaddall {
    display: block;
    width: 100%;
    margin-top: 12px
}

.tt-editwarn {
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
    text-align: left;
    margin: 12px 0 0;
    min-height: 1px
}

.tt-editwarn-bad {
    color: #ff4d4f
}

@media (max-width:640px) {
    .tt-editform {
        grid-template-columns: 1fr
    }

    .tt-editform .tt-field-full {
        grid-column: auto
    }
}

/* The comparison player, again, for inside a dialog.
 *
 * Every rule for it is written under #tt-capture, and a dialog is appended to
 * body - so none of them reach it there. The player rendered as a column of
 * unstyled text: two buttons reading "OriginalCapture", the passage chips run
 * together, no waveform.
 *
 * These are the same rules with the scope changed, generated from the ones
 * above rather than written again, plus the variables they refer to - which
 * are declared on #tt-capture too and do not reach a dialog either.
 *
 * A rule inside a media query keeps its condition. Lifting one out cost the
 * loading spinner its animation: the reduced-motion override, which sets
 * animation to none, ended up applying to everybody.
 *
 * The honest fix is for dialogs to live inside #tt-capture, which would make
 * this block unnecessary and several others besides. That is a bigger change
 * than one feature should carry.
 */
.tt-donecmp {
        --tt-bg: #000;
        --tt-card: #0e0e0e;
        --tt-card2: #1a1a1a;
        --tt-line: rgba(255, 255, 255, .06);
        --tt-line2: rgba(255, 255, 255, .1);
        --tt-ink: #fff;
        --tt-muted: rgba(255, 255, 255, .6);
        --tt-faint: rgba(255, 255, 255, .35);
        --tt-green: #30d223;
        --tt-amber: #ffc200;
        --tt-amber2: #ff9500;
        --tt-red: #ff4d4f;
        --tt-font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        background: var(--tt-bg);
        color: var(--tt-ink);
        font-family: var(--tt-font);
}

.tt-donecmp .tt-cmp {
        grid-column: 1 / -1;
        padding: 4px 0 18px
    }

.tt-donecmp .tt-cmp-card {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 18px;
        padding: 18px
    }

.tt-donecmp .tt-cmp-top {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px
    }

.tt-donecmp .tt-seg {
        display: inline-flex;
        background: rgba(255, 255, 255, .06);
        border-radius: 999px;
        padding: 4px;
        gap: 4px
    }

.tt-donecmp .tt-segbtn {
        border: 0;
        background: transparent;
        background-image: none;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.02em;
        padding: 7px 22px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .12s, color .12s
    }

.tt-donecmp .tt-segbtn-on {
        background: #fff;
        color: #000
    }

.tt-donecmp .tt-cmp-close {
        margin-left: auto;
        border: 0;
        background: transparent;
        background-image: none;
        color: var(--tt-faint);
        cursor: pointer;
        padding: 6px;
        border-radius: 999px;
        display: inline-flex;
        transition: color .12s, background .12s
    }

.tt-donecmp .tt-cmp-close svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.tt-donecmp .tt-cmp-close:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        color: #fff
    }

.tt-donecmp .tt-wave {
        position: relative;
        height: 96px;
        cursor: pointer
    }

.tt-donecmp .tt-wave-canvas {
        display: block;
        width: 100%;
        height: 100%
    }

.tt-donecmp .tt-wave-skeleton {
        background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
        border-radius: 10px;
        animation: tt-shimmer 1.4s linear infinite;
        background-size: 200% 100%
    }

.tt-donecmp .tt-wave-head {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #fff;
        pointer-events: none;
        transition: left .06s linear
    }

.tt-donecmp .tt-wave-marks {
        position: relative;
        height: 20px;
        margin-top: 6px
    }

.tt-donecmp .tt-wave-mark {
        position: absolute;
        transform: translateX(-50%);
        font-size: 13px;
        color: var(--tt-faint);
        white-space: nowrap
    }

.tt-donecmp .tt-cmp-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 14px 0 16px
    }

.tt-donecmp .tt-play {
        height: 44px;
        padding: 0 20px;
        gap: 8px;
        border-radius: 999px;
        border: 0;
        background: #fff;
        background-image: none;
        color: #000;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.02em;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none
    }

.tt-donecmp .tt-play-word {
        pointer-events: none;
        min-width: 34px;
        text-align: left
    }

.tt-donecmp .tt-play svg {
        pointer-events: none;
        width: 17px;
        height: 17px;
        flex: none;
        fill: currentColor;
        stroke: none
    }

.tt-donecmp .tt-play:disabled {
        opacity: .4;
        cursor: not-allowed
    }

.tt-donecmp .tt-cmp-clock {
        font-variant-numeric: tabular-nums;
        font-size: 14px;
        color: var(--tt-muted);
        letter-spacing: .02em
    }

.tt-donecmp .tt-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 9px
    }

.tt-donecmp .tt-chip {
        border: 0;
        background: rgba(255, 255, 255, .07);
        background-image: none;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.02em;
        padding: 8px 16px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .12s, color .12s
    }

.tt-donecmp .tt-chip:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff
    }

.tt-donecmp .tt-chip-on {
        background: #fff;
        color: #000
    }

.tt-donecmp .tt-cmp-foot {
        display: flex;
        align-items: center;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--tt-line)
    }

.tt-donecmp .tt-cmp-hint {
        font-size: 14px;
        color: var(--tt-faint)
    }

.tt-donecmp .tt-cmp-hint kbd {
        font-family: var(--tt-font);
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--tt-muted);
        background: rgba(255, 255, 255, .08);
        border-radius: 5px;
        padding: 1px 6px;
        font-size: 13px
    }

.tt-donecmp .tt-cmp-waiting {
        text-align: center;
        padding: 30px 18px 34px
    }

.tt-donecmp .tt-cmp-spin {
        width: 28px;
        height: 28px;
        display: block;
        margin: 22px auto 0
    }

.tt-donecmp .tt-cmp-spin rect {
        fill: #fff;
        animation: tt-spin-fade 1s linear infinite
    }

.tt-donecmp .tt-cmp-prep {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.02em;
        color: #fff;
        margin-bottom: 6px
    }

.tt-donecmp .tt-cmp-status {
        margin-top: 12px;
        font-size: 14px;
        color: var(--tt-faint)
    }

.tt-donecmp .tt-cmp-status-bad {
        color: var(--tt-amber)
    }

.tt-donecmp .tt-cmp-retry {
        border: 0;
        background: transparent;
        background-image: none;
        color: #fff;
        text-decoration: underline;
        cursor: pointer;
        font-family: var(--tt-font);
        font-size: 14px;
        padding: 0
    }

.tt-donecmp .tt-cmp-status {
    display: flex;
    align-items: center;
    gap: 8px
}

.tt-donecmp .tt-cmp-loadspin {
    width: 14px;
    height: 14px;
    flex: none
}

.tt-donecmp .tt-cmp-loadspin rect {
    fill: currentColor;
    animation: tt-spin-fade 1s linear infinite
}

@media (prefers-reduced-motion:reduce) {
.tt-donecmp .tt-wave-head {
            transition: none
        }

.tt-donecmp .tt-wave-skeleton {
            animation: none
        }

.tt-donecmp .tt-cmp-spin rect {
            animation: none;
            opacity: .45
        }

.tt-donecmp .tt-cmp-loadspin rect {
        animation: none;
        opacity: .45
    }
}

@media (max-width:640px) {
.tt-donecmp .tt-cmp-top {
            flex-wrap: nowrap;
            gap: 10px;
            margin-bottom: 14px
        }

.tt-donecmp .tt-segbtn {
            padding: 7px 16px;
            font-size: 14px
        }

.tt-donecmp .tt-wave-marks {
            display: none
        }

.tt-donecmp .tt-cmp-bar {
            gap: 12px;
            margin: 12px 0 14px
        }

.tt-donecmp .tt-chips {
            gap: 7px
        }

.tt-donecmp .tt-chip {
            font-size: 13px;
            padding: 7px 13px
        }

.tt-donecmp .tt-wave {
            height: 76px
        }

.tt-donecmp .tt-cmp-foot {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px
        }

.tt-donecmp .tt-cmp-card {
            padding: 14px
        }

.tt-donecmp .tt-lrow>.tt-cmp {
            flex: 1 0 100%;
            order: 6
        }
}

/* Last, so they win.
 *
 * The block above is generated from the row's own rules and carries the row's
 * assumptions with it: a card sitting on the page background, and a chevron
 * to fold itself away with. In a dialog there is already a card around it and
 * nothing to fold back into, so the second border, the second radius and the
 * chevron all go. */
/* The wrap itself. It carries the player's variables, and --tt-bg among them
   resolves against something that paints black here; the dialog has its own
   card colour and this should sit on it, not on a panel of its own. */
.tt-donecmp {
    background: transparent
}

.tt-donecmp .tt-cmp {
    margin: 0;
    background: transparent;
    border: 0;
    padding: 0
}

.tt-donecmp .tt-cmp-card {
    border: 0;
    padding: 0;
    background: transparent
}

.tt-donecmp .tt-cmp-close {
    display: none
}

/* Help with routing. In a dialog, so it gets no variables from #tt-capture and
   the colours are written out. */
/* Roomier than a normal dialog. It carries a diagram somebody is meant to read
   the labels on, and at the shared width the rig was drawn small enough that
   Input 1 and Input 2 were work to tell apart. */
.tt-rigdlg {
    max-height: 92vh;
    overflow-y: auto;
    max-width: 1020px;
    width: calc(100vw - 48px);
    padding: 34px 38px 30px
}

/* Centred, with room under it. It sat hard against the rig chooser, which
   made the two read as one block. */
.tt-rigdlg .tt-dlg-title {
    text-align: center;
    margin-bottom: 26px
}

.tt-rigpick {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0 0 28px;
    flex-wrap: wrap
}

.tt-rigchip {
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .58);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer
}

.tt-rigchip-on { background: #fff; color: #000 }

.tt-rigsay {
    text-align: center;
    font-size: 24px;
    letter-spacing: -.02em;
    line-height: 1.35;
    margin: 0 auto 8px;
    max-width: 640px;
    color: #fff
}

.tt-righot { color: #30d223; font-weight: 700 }

.tt-rigsub {
    text-align: center;
    color: rgba(255, 255, 255, .58);
    font-size: 15px;
    margin: 0 auto 20px
}

.tt-rigwrap { margin: 4px 0 10px }
.tt-rigwrap svg { width: 100%; height: auto; display: block }

.tt-rigwarn {
    max-width: 460px;
    margin: 6px auto 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 176, 32, .08);
    border: 1px solid rgba(255, 176, 32, .3);
    font-size: 13px;
    line-height: 1.6;
    text-align: center
}

.tt-rigwarn b { color: #ffb020; margin-right: 4px }
.tt-rigwarn span { color: rgba(255, 255, 255, .58) }

/* The valve-amp warning is the one that can damage something, so it carries
   a label and is louder than the dialog's other notes. The tag is there for
   every warning and shown only on that one. */
.tt-rigwarn .tt-rigwarn-tag { display: none }

.tt-rigwarn.tt-rigwarn-danger {
    background: rgba(255, 176, 32, .13);
    border-color: rgba(255, 176, 32, .65)
}

.tt-rigwarn.tt-rigwarn-danger .tt-rigwarn-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 8px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: #ffb020;
    color: #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: 1px
}

.tt-rigwarn .tt-rigwarn-tag span { color: inherit }

.tt-rigwarn .tt-rigwarn-tag svg {
    width: 12px;
    height: 12px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.tt-rigwarn.tt-rigwarn-danger #tt-rigwarnt { color: rgba(255, 255, 255, .82) }

.tt-rigdots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 24px 0 18px
}

.tt-rigdots i {
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16)
}

.tt-rigdots i.on { background: #fff }

.tt-rignav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px
}

.tt-rignav .tt-riglink:first-child { justify-self: start }
.tt-rignav .tt-riglink:last-child { justify-self: end }

.tt-riglink {
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .58);
    font-family: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    padding: 6px 0
}

.tt-riglink:hover { color: #fff }

/* The buttons on this card sit at their own width.
   
   They were in a .tt-row, which is a three column grid meant for form fields,
   so two short labels were stretched to a third of the card each - very wide
   and not very tall, which is the shape of a button nobody drew on purpose. */
#tt-capture .tt-liveactions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px
}

#tt-capture .tt-liveactions .tt-btn {
    flex: none;
    min-width: 150px
}

/* The clock, with what it is counting beside it. */
#tt-capture .tt-liveclockrow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 24px 0 12px
}

#tt-capture .tt-liveclocklbl {
    color: var(--tt-faint);
    font-size: 14px
}

/* The way in, beside the device pickers. A white button like every other one
   on the page - it was an underlined link, which had a hover of its own and
   looked like nothing else here. */
#tt-capture .tt-btn-sm {
    padding: 8px 18px;
    font-size: 13px
}

/* ------------------------------------------------------------------ mobile
   The row, laid out rather than wrapped.

   Under 640px it became a flex line that wrapped wherever it ran out of room:
   name on one line, a status pill and a duration on the next, the buttons on
   a third, everything hard against the left edge, and the score hidden
   entirely. Three lines of left-aligned fragments with the one number
   somebody opened the page for missing from them.

   A small grid instead. Name and score on the first line, status and time
   under them, the buttons across the bottom - which is the shape of every
   list row on a phone, and it puts the score where the eye goes.

   Type, training mode and date stay out of it. They are reference rather than
   result and they are all in the capture when it is opened; on a strip this
   narrow, showing everything shows nothing.

   Everything is inside the 640px query the rest of the mobile layout uses, so
   nothing above that width moves.
   ------------------------------------------------------------------------ */
@media (max-width:779px) {

    #tt-capture .tt-lrow {
        display: grid !important;
        /* Zero, not auto.
           
           The buttons across the bottom span all three columns, and a spanning
           item hands its minimum width to every intrinsic track it covers - so
           the Compare button was sizing the select column by a third of
           itself, and the name started 32px in from the card edge against an
           empty checkbox. Naming the width takes the guesswork out: this
           column has nothing in it unless the list is in select mode, and then
           it has exactly one checkbox. */
        /* !important because the earlier mobile block sets
           grid-template-columns: none !important on this row, which was
           quietly beating this declaration - so the three columns everything
           here is placed into were never the ones named, they were implicit
           auto tracks that took their width from whatever landed in them. */
        grid-template-columns: 0 minmax(0, 1fr) auto !important;
        column-gap: 12px;
        row-gap: 6px;
        align-items: center;
        padding: 16px 0
    }

    /* Where the checkbox is real. Matches the 38px the wide layout gives it. */
    #tt-capture .tt-selmode .tt-lrow {
        grid-template-columns: 38px minmax(0, 1fr) auto !important
    }

    /* The select box, which is 0 wide unless the list is in select mode. */
    /* grid-area with !important, because the earlier mobile block sets
       grid-area: auto !important on every cell and would otherwise win. */
    #tt-capture .tt-lrow>*:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2 !important;
        padding: 0
    }

    #tt-capture .tt-lrow>*:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3 !important;
        min-width: 0;
        padding: 0
    }

    /* The score, on the first line and right aligned - the one thing worth
       reading at a glance, opposite the name. */
    #tt-capture .tt-lrow>*:nth-child(5) {
        display: block !important;
        grid-area: 1 / 3 / 2 / 4 !important;
        text-align: right;
        padding: 0
    }

    #tt-capture .tt-lrow>*:nth-child(3) {
        grid-area: 2 / 2 / 3 / 3 !important;
        padding: 0
    }

    #tt-capture .tt-lrow>*:nth-child(7) {
        grid-area: 2 / 3 / 3 / 4 !important;
        text-align: right;
        color: var(--tt-faint);
        padding: 0
    }

    /* Across the bottom, with a little air above them.
       
       By class. This was nth-child(9), which was right until the Gain Level
       column made the actions the tenth cell - after which this rule placed a
       hidden empty cell across the bottom and the buttons, having no placement
       of their own, auto-flowed into whatever the grid had spare. A class
       cannot be counted wrong the next time a column is added. */
    #tt-capture .tt-lrow>.tt-actcol {
        /* From the second column, so the buttons line up under the name
           rather than 12px to its left across the gap the empty select
           column leaves. It also keeps them out of that column entirely,
           which is where their width was leaking. */
        grid-area: 3 / 2 / 4 / 4 !important;
        margin-top: 6px;
        padding: 0;
        /* Spanning all three columns, this hands its minimum width to them -
           so the buttons were sizing the select column the name sits next to,
           and the name started 32px in from the card edge against an empty
           checkbox. The buttons wrap on their own, so they do not need a
           minimum of their own. */
        min-width: 0
    }

    /* Reference rather than result. All of it is there when the capture is
       opened. Gain goes with them: it is a bar with no label, and on a strip
       this narrow it would read as decoration. It is hidden by .tt-gaincol
       below 1200 already - named here too so the set is visible in one
       place rather than inferred from two. */
    #tt-capture .tt-lrow>*:nth-child(4),
    #tt-capture .tt-lrow>*:nth-child(6),
    #tt-capture .tt-lrow>*:nth-child(8),
    #tt-capture .tt-lrow>.tt-gaincol {
        display: none !important
    }


    /* Complete beside the buttons rather than on a line of its own.
       
       Only where the two fit. Compare, download and the menu come to about
       200px and the status pill to about 100, so below roughly 375 they
       collide. Measured: they touch at exactly 376 and have 17px of air at
       393, so the line is drawn at 390 rather than at the width where it
       merely stops overlapping. Under that, the status keeps its own line and
       only the buttons move right - the same arrangement, one row further
       down. */
    @media (min-width:390px) {
        #tt-capture .tt-lrow>.tt-statuscol {
            grid-area: 3 / 2 / 4 / 3 !important;
            justify-self: start
        }

        #tt-capture .tt-lrow>.tt-actcol {
            grid-area: 3 / 2 / 4 / 4 !important;
            justify-self: end
        }
    }

    /* The verdict goes back under the number here, where the column is right
       aligned and has its own line. */
    #tt-capture .tt-lrow>*:nth-child(5) .tt-scorewrap {
        display: inline-block;
        text-align: right
    }

    #tt-capture .tt-lrow>*:nth-child(5) .tt-verdict {
        display: block;
        margin-top: 1px;
        font-size: 11px
    }

    /* Hard against the right edge, under the score and the time that are
       already right aligned there. */
    #tt-capture .tt-rowacts {
        justify-content: flex-end !important;
        flex-wrap: wrap !important
    }
}

/* Training Mode is off for now.
 *
 * Two options are left, Standard and Best, and whether they stay at all is
 * undecided - so the column is hidden rather than the code torn out. The
 * value is still on the capture and still in the job result; it is only this
 * column that has gone, and the width it used has been given back to
 * accuracy, training time and the date.
 *
 * Turning it back on means deleting this rule and putting one column back
 * into the four --tt-cols templates above.
 */
#tt-capture .tt-modecol {
    display: none
}

/* The download button while a capture is still training.
 *
 * The row used to go straight from Cancel and the menu to Compare, a download
 * and the menu, so the buttons jumped sideways the moment a capture finished
 * and a training row read as though something was missing. This holds the
 * place: same size and shape, no fill, and plainly not pressable. */
#tt-capture .tt-dl.tt-dl-waiting,
#tt-capture .tt-dl.tt-dl-waiting:hover {
    background: transparent;
    border: 1px solid var(--tt-line2);
    color: var(--tt-faint);
    cursor: default;
    opacity: 1
}

#tt-capture .tt-dl.tt-dl-waiting svg {
    opacity: .55
}

/* The two tracks, drawn while a take runs. */
#tt-capture .tt-tracks {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 20px 0 0
}

#tt-capture .tt-truler {
    position: relative;
    height: 18px;
    margin-left: 118px;
    border-bottom: 1px solid var(--tt-line)
}

#tt-capture .tt-truler span {
    position: absolute;
    top: 1px;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--tt-faint);
    font-variant-numeric: tabular-nums
}

/* tt-trk, not tt-track: that name is already the upload progress bar, four
   pixels tall, and a lane inheriting its height collapsed to nothing while the
   canvas inside carried on drawing at full size. */
#tt-capture .tt-trk { display: flex; align-items: stretch }

#tt-capture .tt-thead {
    width: 118px;
    flex: none;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px
}

#tt-capture .tt-thead b { font-size: 13px; letter-spacing: -.01em }
#tt-capture .tt-thead span { font-size: 11px; color: var(--tt-faint) }

#tt-capture .tt-lane {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--tt-line)
}

#tt-capture .tt-lane canvas { display: block; width: 100%; height: 100% }

#tt-capture .tt-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, .6);
    pointer-events: none
}

/* Over the lane, because this is the one fault somebody can still do something
   about while the take is running. */
#tt-capture .tt-lanedead {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: #ff8f8f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em
}

/* On a phone the track names go above the lanes rather than beside them -
   118px of the width is a lot to give up at 390. */
@media (max-width:640px) {
    #tt-capture .tt-truler { margin-left: 0 }
    #tt-capture .tt-trk { flex-direction: column; gap: 4px }
    #tt-capture .tt-thead {
        width: auto;
        padding: 0;
        flex-direction: row;
        align-items: baseline;
        gap: 8px
    }
    /* flex: none as well as a height. The lane carries flex: 1 so it fills the
       row on a desktop, and once this turns the track into a column that same
       rule governs height instead - the lane was being flexed down to 34px
       with the canvas inside still drawing at full size. */
    #tt-capture .tt-lane { flex: none; height: 72px }
}

/* Gain level.
 *
 * The bars are the whole cell - there is no number beside them on purpose.
 * A figure like "62% of dynamics removed" is the honest description of what
 * was measured and completely useless at a glance, which is what a table
 * column is for. The sentence is on the tooltip for anyone who wants it. */
#tt-capture .tt-gainwrap {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: default
}

/* The gain tooltip wraps, and hangs from its right edge.
 *
 * It never had a width. .tt-tip is nowrap by default, and this one holds two
 * or three sentences, so it laid out 707px wide - hanging some 400px past the
 * right of the card, out of a column that is second from the end. Hidden until
 * hover, so all it did was make the whole page scroll sideways with nothing
 * visible causing it.
 *
 * Every other long tooltip in this file states a width; the score's does. This
 * one was written without one and the default carried it. */
#tt-capture .tt-gainwrap .tt-tip {
    white-space: normal;
    width: 250px;
    text-align: left;
    line-height: 1.45;
    left: auto;
    right: 0;
    transform: translateY(3px)
}

#tt-capture .tt-gainwrap:hover .tt-tip,
#tt-capture .tt-gainwrap:focus .tt-tip,
#tt-capture .tt-gainwrap:focus-visible .tt-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

/* The arrow follows it to the right rather than pointing at nothing. */
#tt-capture .tt-gainwrap .tt-tip::after {
    left: auto;
    right: 26px;
    transform: none
}

#tt-capture .tt-gainbars {
    width: 62px;
    height: 21px;
    display: block;
    overflow: visible
}

/* Gold rather than white. The row already has white for the name, white for
   the accuracy and a white download button, so bars in --tt-ink were a fourth
   white thing and read as text rather than as a reading. */
#tt-capture .tt-gainbars .tt-gainon { fill: #aea55b }

/* Neutral, not a dimmer gold.
   
   Both were mocked up. They are indistinguishable at nine or ten bars, where
   the fill dominates either way, and they part company at the bottom of the
   scale: a gold-tinted empty puts one or two gold bars against slightly
   darker gold, and the eye has to find where the fill stops. Against neutral
   it is gold on grey and the level is the thing that reads.
   
   For the all-gold version instead: rgba(174, 165, 91, .20).
   
   Not --tt-faint either. These are the empty half of a scale, and at 35% they
   read as a second, dimmer reading rather than as the space the first one has
   not filled. */
#tt-capture .tt-gainbars .tt-gainoff { fill: rgba(255, 255, 255, .12) }

/* The column is centred on the bars rather than left aligned like the text
   columns. Ten bars of a fixed width in a column that flexes leaves a ragged
   gap on one side otherwise, and a row of these reads as a scale only when
   they all start in the same place. */
#tt-capture .tt-gaincol {
    white-space: nowrap
}


/* ══════════════════════════════════════════════════════════════════════
   Signal chain
   ══════════════════════════════════════════════════════════════════════

   Opened from the capture name, drawn under its row, in the order the signal
   travelled. Each box is a field somebody filled in on the form; hovering one
   says which field and what they wrote.

   Three stages, not five. Instrument and microphone are on the form but not
   here: five boxes plus In and Out will not cross a phone, and those two say
   least about what a capture sounds like. */
#tt-capture .tt-chain {
    padding: 0
}

/* No container at all.
 *
 * It was a bordered box, darker than everything around it, sitting between two
 * rows - which drew a rectangle around something that is not a separate
 * object. It is this capture's own detail, so it sits on the card the rows sit
 * on and the row dividers do the separating, the same as they do everywhere
 * else in the list.
 *
 * The padding is even rather than tight at the top. The old 18/22/16 crowded
 * the icons against the row above and left the captions short of room, which
 * added to the sense of something laid on top. */
#tt-capture .tt-chain-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 28px 26px 24px
}

/* The plot holds the wires behind and the nodes in front. */
#tt-capture .tt-chain-plot {
    position: relative
}

#tt-capture .tt-chain-wires {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible
}

#tt-capture .tt-chain-wire {
    fill: none;
    stroke: var(--tt-line2);
    stroke-width: 1.5
}

/* A column per stage, a row per branch. The 1fr columns give the wires room
   to curve; the end columns take only what In and Out need. */
#tt-capture .tt-chain-grid {
    position: relative;
    display: grid;
    align-items: center;
    justify-items: center;
    row-gap: 20px;
    column-gap: 12px
}

/* In and Out are not stages and do not carry a tooltip. They are there so the
   row reads as a signal path rather than three unrelated icons. */
/* Aligned to the top of its row, not centred in it. A row is the box plus the
   caption under it, so a centred end sits below the icon it is wired to. */
#tt-capture .tt-chain-end {
    align-self: start;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--tt-card);
    border: 1px solid var(--tt-line2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--tt-faint)
}

#tt-capture .tt-chain-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default
}

#tt-capture .tt-chain-box {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--tt-bg);
    border: 2px solid var(--tt-line2);
    color: var(--tt-faint);
    display: flex;
    align-items: center;
    justify-content: center
}

/* Every icon class in this file states its own stroke - there is no shared
   rule for them - so leaving it out drew three empty boxes. */
/* Size and colour only. These shapes state their own fill and stroke - some
   are filled, some are outlines at different widths - and a blanket
   fill: none here would erase half of every one of them. */
/* White, whatever colour the box around it is.
   
   The border says which stage this is; the drawing says what the stage looks
   like. Colouring both meant three coloured objects in a row where the colour
   was doing the same job twice, and the pedal and the cone lost detail
   against their own border.
   
   Size and colour only: these shapes state their own fills and stroke widths,
   and a blanket fill: none would erase half of every one of them. */
#tt-capture .tt-chain-ic {
    width: 27px;
    height: 27px;
    color: var(--tt-ink)
}

#tt-capture .tt-chain-cap {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 500;
    color: var(--tt-faint);
    white-space: nowrap
}

/* A colour per stage, so the same box is always the same colour and the strip
   is recognisable by shape rather than read every time. These are the accents
   already in use elsewhere. */
#tt-capture .tt-chain-stomp .tt-chain-box {
    border-color: #ff9500
}

#tt-capture .tt-chain-amp .tt-chain-box {
    border-color: #ff453a
}

#tt-capture .tt-chain-cab .tt-chain-box {
    border-color: #8f63c3
}

/* Nothing written down, on a capture whose type says there should be. */
#tt-capture .tt-chain-off .tt-chain-box {
    border-style: dashed;
    border-color: rgba(255, 255, 255, .3) !important
}

#tt-capture .tt-chain-off .tt-chain-ic {
    color: rgba(255, 255, 255, .42)
}

/* Nothing written down because there is nothing to write: an Amp capture has
   no cabinet in it. Fainter still, and the tooltip says which of the two this
   is rather than leaving somebody to guess. */
/* Lifted along with the panel going dark. These were set against a #1a1a1a
   card and read as smudges on #080808 - present enough to see there was a
   stage there, not enough to see which. Still clearly the quieter of the two
   states, and still dashed. */
#tt-capture .tt-chain-na .tt-chain-box {
    border-style: dashed;
    border-color: rgba(255, 255, 255, .18) !important
}

#tt-capture .tt-chain-na .tt-chain-ic {
    color: rgba(255, 255, 255, .28)
}

#tt-capture .tt-chain-off .tt-chain-cap {
    color: rgba(255, 255, 255, .38)
}

#tt-capture .tt-chain-na .tt-chain-cap {
    color: rgba(255, 255, 255, .28)
}

#tt-capture .tt-chain-notes {
    margin-top: 17px;
    padding-top: 13px;
    border-top: 1px solid var(--tt-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--tt-muted)
}

#tt-capture .tt-chain-notes b {
    color: var(--tt-ink);
    font-weight: 600
}

/* The chain's tooltips carry a gear name and can be long, so they wrap rather
   than running off the side of the card. Centred over their box like every
   other tooltip; the outer two are pulled back inside the card so a stomp or
   a cabinet name does not disappear off the edge of a phone. */
#tt-capture .tt-chain-node .tt-tip {
    white-space: normal;
    width: 200px;
    text-align: center
}

/* The microphone under the cabinet it belongs to. Quieter than the line above
   it, because the cabinet is what the box is and the microphone is how it was
   heard. */
#tt-capture .tt-tip-sub {
    display: block;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .62)
}

/* Centred over their box, like every other tooltip.
   
   The outer two used to be pushed off the edge of their node so a long gear
   name could not run past the card. That was set for the narrowest phone and
   then applied everywhere: measured, it put them 57 to 61px off centre at
   every width, including a 1180px desktop with room to spare either side.
   
   The nudge is kept where it is actually needed - see below 390px, the same
   width the action row splits at. */
@media (max-width:389px) {
    #tt-capture .tt-chain-first .tt-tip {
        left: 0;
        transform: translateX(-16px) translateY(3px)
    }

    #tt-capture .tt-chain-last .tt-tip {
        left: auto;
        right: 0;
        transform: translateX(16px) translateY(3px)
    }

    #tt-capture .tt-chain-first:hover .tt-tip,
    #tt-capture .tt-chain-first:focus .tt-tip,
    #tt-capture .tt-chain-first:focus-visible .tt-tip {
        transform: translateX(-16px) translateY(0)
    }

    #tt-capture .tt-chain-last:hover .tt-tip,
    #tt-capture .tt-chain-last:focus .tt-tip,
    #tt-capture .tt-chain-last:focus-visible .tt-tip {
        transform: translateX(16px) translateY(0)
    }
}

/* Nothing else reveals these. The tooltip's own rules only hide it; each
   place that uses one brings its own hover. */
/* :focus as well as :focus-visible. A phone has no hover, and a tap does
   not raise focus-visible - without this the tooltips are unreachable on
   the device the layout was just narrowed for. */
#tt-capture .tt-chain-node:hover .tt-tip,
#tt-capture .tt-chain-node:focus .tt-tip,
#tt-capture .tt-chain-node:focus-visible .tt-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0)
}

#tt-capture .tt-chain-node:focus-visible {
    outline: 2px solid var(--tt-amber);
    outline-offset: 3px;
    border-radius: 8px
}

/* A name that opens something looks like it does. */
#tt-capture .tt-capnamewrap[role="button"] {
    cursor: pointer
}

/* The chevron on the name, pointing down while the chain is open. */
#tt-capture .tt-chain-chev {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    margin-left: 2px;
    color: var(--tt-faint);
    transition: transform .14s ease
}

#tt-capture .tt-capnamewrap-open .tt-chain-chev {
    transform: rotate(90deg);
    color: var(--tt-ink)
}

@media (max-width:640px) {

    /* Smaller boxes and no In or Out. Three stages and two ends will not cross
       a phone; the ends are the part that carries no information. */
    #tt-capture .tt-chain-card {
        padding: 15px 14px 13px
    }

    #tt-capture .tt-chain-end {
        display: none
    }

    #tt-capture .tt-chain-box {
        width: 46px;
        height: 46px;
        border-radius: 13px
    }

    #tt-capture .tt-chain-ic {
        width: 21px;
        height: 21px
    }

    /* Allowed to wrap. "Amplifier" is wider than the 46px box under it and
       nowrap pushed it straight out of the card - 25px past the edge on a 393
       wide phone. Centred over the box, two lines where it needs them. */
    #tt-capture .tt-chain-cap {
        white-space: normal;
        text-align: center;
        max-width: 62px;
        font-size: 10px;
        line-height: 1.3
    }

    /* Never wider than the screen it is on. 200px is comfortable on a 393px
       phone and 70px too wide on a 320px one, and leaning the outer ones
       inward only buys back so much. */
    #tt-capture .tt-chain-node .tt-tip {
        width: auto;
        max-width: calc(100vw - 64px)
    }
}

/* ── Grouping published captures into a pack ────────────────────────────
   The bar sits under the heading and the tick inside the card, so nothing
   floats above the grid. */
.tt-mine-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}

.tt-mine-select,
.tt-mine-bar-cancel {
    background: none;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .72);
    font: inherit;
    font-size: 13px;
    padding: 7px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

/* Select, and the bar that replaces it, sit on the heading's line rather than
   on a row of their own under it.

   While there is a Select row, the card becomes one wrapping flex line: the
   heading, then the row, then everything else on lines of its own. The list's
   own box steps aside (display: contents) so its children can take part - the
   script only ever adds and removes those, and never measures the box.

   The heading and the row are centred on each other, whatever either
   measures. The row asks for its full width before it will sit beside the
   heading, so a bar too wide for the space goes onto the next line whole
   rather than being squeezed in next to it.

   A list with nothing to group keeps its heading exactly as it was, and so
   does a browser without :has(). */
#tt-capture #tt-minecard:has(> #tt-mine > .tt-mine-head) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 12px;
}

#tt-capture #tt-minecard:has(> #tt-mine > .tt-mine-head) > h2 {
    flex: 0 0 auto;
    margin: 0;
}

#tt-capture #tt-minecard:has(> #tt-mine > .tt-mine-head) > #tt-mine {
    display: contents;
}

#tt-capture #tt-minecard > #tt-mine > .tt-mine-head {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin: 0;
}

#tt-capture #tt-minecard > #tt-mine > :not(.tt-mine-head) {
    flex: 0 0 100%;
    min-width: 0;
}

/* Select looks like the Select at the top of My Captures: the same grey pill,
   muted until hovered, at the same 40px.

   Through #tt-minecard so it outranks the page's general button rules, which
   otherwise paint every button white and give it the light hover. */
#tt-capture #tt-minecard .tt-mine-select {
    background: rgba(255, 255, 255, .07);
    background-image: none;
    border: none;
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 16px;
    margin: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-family: var(--tt-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--tt-muted);
    cursor: pointer;
    width: auto;
    transition: background .15s, color .15s;
}

#tt-capture #tt-minecard .tt-mine-select:hover {
    background: rgba(255, 255, 255, .13);
    background-image: none;
    color: #fff;
}

/* The buttons that replace Select are the same size as it, so pressing
   Select does not make the row grow and nudge the list down. Their colours
   are left as they were. A label stays on one line, so on a phone a button
   that does not fit moves onto the next row whole rather than spilling out
   of its 40px. */
#tt-capture #tt-minecard .tt-mine-bar button {
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 16px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.tt-mine-select:hover,
.tt-mine-bar-cancel:hover {
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}

.tt-mine-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
}

.tt-mine-bar-count {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
}

.tt-mine-bar-go {
    background: #fff;
    border: 0;
    color: #000;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 17px;
    border-radius: 999px;
    cursor: pointer;
}

.tt-mine-bar-go:disabled { opacity: .4; cursor: default; }

/* The card is the target while selecting, so the small box is a marker rather
   than the thing to hit.

   The highlight goes on the row, not on the cell around it: the cell is a plain
   square with no radius, so lighting that up drew a hard-edged block behind the
   rounded card instead of picking the card out. */
.tt-mine-picking { cursor: pointer; }

.tt-mine-picking .tt-mine-row {
    transition: background .15s, box-shadow .15s;
}

.tt-mine-picking:hover .tt-mine-row,
.tt-mine-picking:hover .tt-mine-row-static {
    background: var(--tt-card2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.tt-mine-picked .tt-mine-row,
.tt-mine-picked .tt-mine-row-static {
    background: var(--tt-card2);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}

/* Out of the flow entirely, so a card is exactly as wide while selecting as
   it is the rest of the time - adding it to the row pushed the artwork over
   and the columns came out ragged. */
.tt-mine-picking { position: relative; }

.tt-mine-pick {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.tt-mine-picking .tt-mine-row { padding-left: 34px; }

.tt-mine-pick input {
    width: 16px;
    height: 16px;
    accent-color: #fff;
    cursor: pointer;
    margin: 0;
}

@media (max-width: 560px) {
    .tt-mine-head { justify-content: stretch; }
    .tt-mine-bar { width: 100%; }
    .tt-mine-bar-go { flex: 1; }
}

/* A capture inside an open pack, while selecting. The kid row is its own
   rounded block, so the highlight goes on it directly rather than on a wrapper
   the way the top-level cards need. */
/* In the flow rather than over the row: a kid row is a flex line, so the tick
   takes its own place before the artwork instead of sitting on top of it. */
.tt-mine-kid.tt-mine-picking { cursor: pointer; }

.tt-mine-kid .tt-mine-pick {
    position: static;
    flex: 0 0 auto;
    margin-right: 2px;
}

.tt-mine-kid.tt-mine-picking:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.tt-mine-kid.tt-mine-picked {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}

/* Help with routing. Tracer Tone's sits after Download on the first step,
   the two in one cell; Dry + Wet's is beside its upload step. A step on its
   own has one column, so it gets a second for the button; on a phone the
   buttons drop under the words, as they do on the numbered steps. */
#tt-capture .tt-hstep-acts {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px
}

#tt-capture .tt-hstep.tt-hstep-solo.tt-hstep-hasact {
    grid-template-columns: minmax(0, 1fr) auto
}

#tt-capture .tt-hstep-solo button.tt-hstep-act {
    grid-column: 2
}

@media (max-width:640px) {
    #tt-capture .tt-hstep-acts {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        justify-content: flex-start;
        margin-top: 12px
    }

    #tt-capture .tt-hstep-acts button.tt-hstep-act {
        margin-top: 0
    }

    #tt-capture .tt-hstep.tt-hstep-solo.tt-hstep-hasact {
        grid-template-columns: minmax(0, 1fr)
    }

    #tt-capture .tt-hstep-solo button.tt-hstep-act {
        grid-column: 1
    }
}

/* The photo's rules, said before anything is uploaded. */
#tt-capture .tt-imgrules {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: var(--tt-faint)
}

#tt-capture .tt-imgrules li {
    display: flex;
    gap: 8px
}

#tt-capture .tt-imgrules li::before {
    content: "\2022";
    color: rgba(255, 255, 255, .3)
}

#tt-capture .tt-imgrules b {
    color: rgba(255, 255, 255, .85);
    font-weight: 600
}

/* The thumbnail takes a drop, and says so while something is over it. */
#tt-capture .tt-artthumb {
    cursor: pointer
}

#tt-capture .tt-artthumb-over {
    outline: 2px dashed rgba(255, 255, 255, .6);
    outline-offset: 3px
}

/* Under the buttons, not beside them: the row the buttons sit in is a flex
   row, and the rules want a line of their own. */
#tt-capture .tt-artacts {
    flex-wrap: wrap
}

#tt-capture .tt-artacts .tt-imgrules,
#tt-capture .tt-artacts .tt-arthint {
    flex: 1 0 100%
}

/* The square lines up with the top of the button beside it, now that the
   column next to it is taller than one line. */
#tt-capture .tt-artrow {
    align-items: flex-start
}

/* The empty photo square, as somewhere to put a file: dashed edge, a picture
   and "Drop or click". Brightens under the pointer, and under a file being
   dragged over it. */
#tt-capture .tt-artthumb-drop {
    border: 1.5px dashed rgba(255, 255, 255, .22);
    background: #101010;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, .5);
    transition: border-color .15s, color .15s, background .15s
}

#tt-capture .tt-artthumb-drop:hover,
#tt-capture .tt-artthumb-drop.tt-artthumb-over {
    border-color: rgba(255, 255, 255, .55);
    background: #141414;
    color: #fff;
    outline: 0
}

#tt-capture .tt-artdrop-ico {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

#tt-capture .tt-artdrop-txt {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center
}

/* The capture photo on the form: a large square with its button under it on
   the left, the rules beside them on the right. Scoped to the form's field so
   the smaller photo rows in the dialogs keep the layout they had. */
#tt-capture #tt-artfield .tt-artlayout {
    display: flex;
    align-items: flex-start;
    gap: 20px
}

#tt-capture #tt-artfield .tt-artleft {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 0 0 104px
}

#tt-capture #tt-artfield .tt-artthumb {
    width: 104px;
    height: 104px;
    border-radius: 14px
}

#tt-capture #tt-artfield .tt-artleft button {
    margin: 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    justify-content: center;
    text-align: center
}

#tt-capture #tt-artfield .tt-artright {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px
}

#tt-capture #tt-artfield .tt-imgrules {
    margin: 0 0 12px
}

#tt-capture #tt-artfield .tt-artdrop-ico {
    width: 24px;
    height: 24px
}

#tt-capture #tt-artfield .tt-artdrop-txt {
    font-size: 12px
}

@media (max-width: 640px) {
    #tt-capture #tt-artfield .tt-artlayout {
        flex-direction: column
    }
}