/*
 * toolkit.css — the Free Sports Admin Toolkit builder.
 *
 * Loaded only on /tools pages. Everything here sits on top of styles.css and
 * reuses its tokens (--primary-navy, --primary-green, --font-display, the gray
 * ramp) rather than introducing a second palette.
 *
 * The editing surface is styled to read as a sheet of paper, because the whole
 * pitch is "see your own letterhead on your own wording before you download".
 * Keep the sheet's proportions close to US Letter so what people see here is
 * close to what pdfmake produces.
 */

.tk-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* ------------------------------------------------------------------ sidebar */

.tk-side {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tk-panel {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.tk-panel h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    margin: 0 0 4px;
    color: var(--primary-navy);
}

.tk-panel__hint {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin: 0 0 16px;
    line-height: 1.45;
}

.tk-field-group { margin-bottom: 12px; }

.tk-field-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.tk-field-group input[type="text"],
.tk-field-group input[type="email"],
.tk-field-group input[type="tel"],
.tk-field-group select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: var(--gray-900);
    background: var(--white);
}

.tk-field-group input:focus,
.tk-field-group select:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 1px;
    border-color: var(--primary-green);
}

.tk-field-row {
    display: grid;
    grid-template-columns: 1fr 72px 96px;
    gap: 8px;
}

/* Logo picker ------------------------------------------------------------- */

.tk-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tk-logo-preview {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: var(--gray-400);
    text-align: center;
    padding: 4px;
    background: var(--gray-50);
    overflow: hidden;
}

.tk-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tk-logo-actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.tk-filebtn {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--white);
    color: var(--primary-navy);
    text-align: center;
}

.tk-filebtn:hover { border-color: var(--primary-green); color: var(--primary-green-dark); }
.tk-filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.tk-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.75rem;
    color: var(--gray-600);
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

.tk-linkbtn:hover { color: var(--primary-navy); }

.tk-privacy {
    display: flex;
    gap: 8px;
    font-size: 0.73rem;
    line-height: 1.45;
    color: var(--gray-600);
    background: var(--primary-green-light);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-top: 4px;
}

.tk-privacy strong { color: var(--primary-navy); }

/* Download panel ---------------------------------------------------------- */

.tk-downloads { display: flex; flex-direction: column; gap: 8px; }
.tk-downloads .btn { width: 100%; justify-content: center; }

.tk-status {
    font-size: 0.73rem;
    color: var(--gray-600);
    min-height: 1.1em;
    margin-top: 10px;
    text-align: center;
}

/* The secondary way into the builder, under the Build button: type a team
   list, or open a backup you already have. Quiet, because building is the
   path almost everyone takes. */
.trn-openfile {
    margin: 10px 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--gray-600);
}

.trn-openfile .tk-linkbtn {
    display: inline;
    margin-left: 2px;
}

/* --------------------------------------------------------------- the sheet */

.tk-sheet-wrap { min-width: 0; }

.tk-sheet {
    --tk-accent: var(--primary-navy);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
    padding: 54px 60px 40px;
    max-width: 816px;      /* 8.5in at 96dpi */
    margin: 0 auto;
    color: var(--gray-900);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Scoresheets and rosters print landscape, so the on-screen sheet widens to
   match. It still shrinks to the column, so this only takes effect where
   there is room for it. */
.tk-sheet--landscape { max-width: 1056px; }   /* 11in at 96dpi */

.tk-letterhead-wrap { margin-bottom: 22px; }

.tk-letterhead {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.tk-letterhead-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex: 0 0 64px;
}

.tk-letterhead-identity { min-width: 0; }

.tk-letterhead-name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tk-accent);
    line-height: 1.15;
}

.tk-letterhead-meta {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin-top: 2px;
}

.tk-letterhead-rule { height: 3px; margin: 12px 0 0; border-radius: 2px; }

.tk-doc-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    margin: 16px 0 0;
    color: var(--gray-900);
    line-height: 1.15;
}

.tk-doc-subtitle {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 3px;
}

.tk-sheet-footer {
    margin-top: 30px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    font-size: 0.7rem;
    color: var(--gray-400);
    text-align: center;
}

/* ------------------------------------------------------------------ blocks */

.tk-block {
    position: relative;
    padding: 4px 0;
    border-radius: var(--radius-sm);
}

.tk-block:hover { background: rgba(112, 175, 67, 0.045); }
.tk-block:hover .tk-block-tools { opacity: 1; }

.tk-block-tools {
    position: absolute;
    top: 2px;
    right: -46px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.tk-iconbtn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tk-iconbtn:hover { border-color: var(--primary-green); color: var(--primary-green-dark); }
.tk-iconbtn--danger:hover { border-color: #dc2626; color: #dc2626; }

.tk-iconbtn--inline {
    position: static;
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
    border: 0;
    background: none;
    opacity: 0;
    flex: 0 0 20px;
}

.tk-list-item:hover .tk-iconbtn--inline,
.tk-field:hover .tk-iconbtn--inline,
.tk-th:hover .tk-iconbtn--inline,
.tk-sig:hover .tk-iconbtn--inline { opacity: 1; }

/* Editable text ----------------------------------------------------------- */

.tk-edit {
    outline: none;
    border-radius: 3px;
    min-height: 1.4em;
    min-width: 40px;
}

.tk-edit:focus {
    box-shadow: 0 0 0 2px rgba(112, 175, 67, 0.35);
    background: var(--white);
}

.tk-edit:empty::before {
    content: attr(data-placeholder);
    color: var(--gray-400);
    pointer-events: none;
}

.tk-h {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--tk-accent);
    margin-top: 14px;
}

.tk-edit--rich p { margin: 0 0 0.6em; }
.tk-edit--rich p:last-child { margin-bottom: 0; }

.tk-note {
    font-size: 0.76rem;
    font-style: italic;
    color: var(--gray-600);
    line-height: 1.45;
}

.tk-inline-toolbar {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.tk-block:hover .tk-inline-toolbar,
.tk-block:focus-within .tk-inline-toolbar { opacity: 1; }

.tk-fmt {
    width: 22px;
    height: 22px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--gray-700);
    padding: 0;
}

.tk-fmt:hover { border-color: var(--primary-green); }
.tk-fmt--bold { font-weight: 800; }
.tk-fmt--italic { font-style: italic; }
.tk-fmt--underline { text-decoration: underline; }

/* Lists ------------------------------------------------------------------- */

.tk-list { margin: 0 0 6px; padding-left: 22px; }

.tk-list-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 3px;
}

.tk-list-item .tk-edit { flex: 1 1 auto; }

/* Fill-in lines ----------------------------------------------------------- */

.tk-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.tk-field-label {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--gray-700);
    white-space: nowrap;
}

.tk-field-rule {
    flex: 1 1 auto;
    border-bottom: 1px solid var(--gray-300);
    height: 1.15em;
}

/* Tables ------------------------------------------------------------------ */

.tk-table-scroll { overflow-x: auto; margin-bottom: 10px; }

/* table-layout: fixed so the <colgroup> renderTable() emits is authoritative.
   With auto layout the browser sizes columns by their content, and on a blank
   scoresheet the only content is the header text, so "Player" lost every
   argument with "Game awareness & decisions" and came out about 65px wide on
   the sheet it exists to hold names on. The proportions come from
   T.columnSpans() in model.js, the same weights the three exporters use.
   renderTable() also sets an inline min-width; below that this wrapper's
   overflow-x takes over rather than crushing ten columns into the sheet. */
.tk-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.82rem;
}

/* Fixed layout will not widen a cell to fit a long word, so headers have to be
   allowed to break. Without this "Communication & teamwork" spills its column
   instead of wrapping inside it. */
.tk-table th,
.tk-table td {
    overflow-wrap: break-word;
    word-break: break-word;
}

.tk-th,
.tk-td {
    border: 1px solid var(--gray-300);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

/* Header labels wrap. They used to be nowrap, which is what made the table
   1176px wide on a 10-column scoresheet and pushed it out of an 800px sheet:
   "Game awareness & decisions" claimed a full line of width for a column
   holding one digit. With table-layout: fixed the column is sized by the
   colgroup instead, so a long label becomes two or three short lines inside
   its own cell. */
.tk-th {
    background: var(--gray-100);
    font-weight: 700;
    font-size: 0.78rem;
    white-space: normal;
}

.tk-th { display: table-cell; }
/* min-width was 60px, for a comfortable click target when a header could be
   as wide as it liked. Under table-layout: fixed a skill column is 56px, so
   60px plus the remove button pushed the label out of its own cell. The cell
   is the target now. */
.tk-th .tk-edit { display: block; min-width: 0; }

.tk-th--num,
.tk-td--num {
    width: 28px;
    text-align: center;
    color: var(--gray-400);
    background: var(--gray-50);
}

.tk-td { height: 26px; }

/* Signatures -------------------------------------------------------------- */

.tk-sig { margin: 18px 0 10px; }

.tk-sig-row { display: flex; gap: 22px; align-items: flex-end; }
.tk-sig-col { flex: 1 1 auto; }
.tk-sig-col--date { flex: 0 0 150px; }

.tk-sig-rule {
    display: block;
    border-bottom: 1px solid var(--gray-400);
    height: 1.6em;
}

.tk-sig-label {
    display: block;
    font-size: 0.7rem;
    color: var(--gray-600);
    margin-top: 3px;
}

/* Page break -------------------------------------------------------------- */

.tk-pagebreak {
    border-top: 2px dashed var(--gray-300);
    text-align: center;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    margin: 16px 0;
    padding-top: 6px;
}

/* Per-block controls ------------------------------------------------------ */

.tk-block-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 6px 0 10px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.tk-block:hover .tk-block-controls,
.tk-block:focus-within .tk-block-controls { opacity: 1; }

.tk-smallbtn {
    border: 1px solid var(--gray-200);
    background: var(--white);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 0.72rem;
    color: var(--gray-700);
    cursor: pointer;
    font-family: var(--font-sans);
}

.tk-smallbtn:hover { border-color: var(--primary-green); color: var(--primary-green-dark); }

.tk-rowcount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--gray-600);
}

.tk-rowcount-input {
    width: 52px;
    padding: 2px 6px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-family: var(--font-sans);
}

/* Add-section ------------------------------------------------------------- */

.tk-addrow { position: relative; text-align: center; height: 14px; }

.tk-addrow:hover { height: auto; }

.tk-addbtn {
    border: 1px dashed var(--gray-300);
    background: var(--white);
    color: var(--gray-600);
    border-radius: var(--radius-pill);
    padding: 2px 12px;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
    font-family: var(--font-sans);
}

.tk-addrow:hover .tk-addbtn,
.tk-addbtn[aria-expanded="true"] { opacity: 1; }
.tk-addbtn:hover { border-color: var(--primary-green); color: var(--primary-green-dark); }

/* A class selector beats the UA stylesheet's [hidden] rule, so any toolkit
   element given `display:` in this file would ignore its own hidden attribute
   -- .tk-addmenu would sit permanently open, a hidden button would still
   render.

   Written as one blanket rule rather than a list of IDs. The list version
   broke the moment the download buttons gained a second copy in the pinned
   action bar: #tk-dl-xlsx was covered, #tk-dl-xlsx-top was not, and Excel
   stayed visible on documents with no table. Same shape as the
   .mobile-menu__toggle bug, so stop enumerating instances. */
[hidden] { display: none !important; }

.tk-addmenu {
    position: absolute;
    z-index: 20;
    left: 50%;
    transform: translateX(-50%);
    top: 26px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 2px;
    text-align: left;
}

.tk-addmenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--gray-700);
    font-family: var(--font-sans);
    text-align: left;
}

.tk-addmenu-item:hover { background: var(--gray-100); color: var(--primary-navy); }

.tk-addmenu-icon {
    width: 20px;
    text-align: center;
    color: var(--primary-green-dark);
    font-size: 0.85rem;
}

/* --------------------------------------------- sidebar fields, one per row */

/* One field per row, which is also the browser default, so there is nothing
 * here forcing it. This comment is the record of why the two-column version
 * was removed rather than an accident.
 *
 * b89ede7 paired the short fields two to a row alongside folding step 1 away.
 * Together they took the sidebar from 2047-2546px down to 1078-1600px, but
 * the split was lopsided: the fold was worth about 700px and the pairing only
 * about 200. For that 200px the pairing cost real legibility. Two grid items
 * in a row are only as short as the taller one, and Participants carries a
 * hint underneath it ("Youth: a parent or guardian signs alongside the
 * athlete") while Season beside it does not, so the pair sat visibly
 * unbalanced. Every pair with help text on one side only had the same
 * problem, and there is no rule that fixes it without either inventing hint
 * text for the other side or hiding the hint.
 *
 * So the sidebar is a single column again and the fold keeps the height win.
 * If pairing is ever revisited, the thing to solve first is the uneven
 * heights, not the column rule.
 */

/* ---------------------------------------------------- the step 1 fold */

/* Built by js/toolkit/sidebar-fold.js. With that file missing none of this
   matches and step 1 renders as it always did. */

.tk-fold > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--gray-700);
}

/* Safari still draws the triangle from the shadow tree. */
.tk-fold > summary::-webkit-details-marker {
    display: none;
}

.tk-fold > summary:hover {
    border-color: var(--primary-green);
}

.tk-fold > summary:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

.tk-fold > summary strong {
    color: var(--primary-navy);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-fold__cue {
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* A block button in the sidebar carries a sentence, not a word: "Load
   all-purpose scoring criteria" is 265px of uppercase 1.12rem text in a 278px
   pill, so with the global .btn white-space: nowrap it ran 20px out through
   the rounded ends at both sides. Let it wrap and size it as the utility
   control it is. Scoped to .tk-side so the Send Message and pricing CTA
   buttons, the only other .btn--block on the site, are untouched. */
.tk-side .btn--block {
    white-space: normal;
    font-size: 0.92rem;
    line-height: 1.35;
    padding: 12px 18px;
    text-align: center;
}

.tk-fold__inner {
    padding-top: 6px;
}

/* One column again before the fields get too narrow to read. The layout itself
   goes single-column at 900px; this is deliberately earlier, because at that
   point the sidebar is still a 280px rail and half of it is 134px. */
@media (max-width: 1080px) {
    .tk-step,
    .tk-fold__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
    .tk-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
    .tk-sheet { padding: 40px 42px 32px; }
    .tk-block-tools { right: -34px; }
}

@media (max-width: 900px) {
    .tk-layout { grid-template-columns: 1fr; }
    .tk-side { position: static; }
    .tk-sheet { padding: 32px 26px 26px; }

    /* No hover on touch, so the per-block controls have to be permanent. */
    .tk-block-tools,
    .tk-block-controls,
    .tk-inline-toolbar,
    .tk-addbtn,
    .tk-iconbtn--inline { opacity: 1; }

    .tk-block-tools {
        position: static;
        flex-direction: row;
        justify-content: flex-end;
        margin-bottom: 4px;
    }

    .tk-addrow { height: auto; margin: 8px 0; }
    .tk-addmenu { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .tk-sheet { padding: 22px 16px 20px; font-size: 0.9rem; }
    .tk-field-row { grid-template-columns: 1fr; }
    .tk-sig-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .tk-sig-col--date { flex: 1 1 auto; }
}


/* Accent colour: a native swatch beside the hex box, two views of one value.
   The browsers draw type=color as a padded well with its own border, which
   looks nothing like the text inputs next to it, so the well is stripped and
   the control is given the same border and radius as its sibling. */
.tk-color-field {
    display: flex;
    align-items: center;
    gap: 9px;
}

.tk-color-field__swatch {
    flex: 0 0 auto;
    width: 44px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
}

.tk-color-field__swatch::-webkit-color-swatch-wrapper { padding: 4px; }
.tk-color-field__swatch::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}
.tk-color-field__swatch::-moz-color-swatch {
    border: none;
    border-radius: 4px;
}

.tk-color-field__swatch:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 1px;
}

/* min-width:0 so the hex box can shrink inside the flex row rather than
   pushing the swatch out of the panel on a narrow screen. */
.tk-field-group .tk-color-field__hex {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}


/* The legal note above the download buttons. Amber rather than red: it is a
   caution to read, not an error, and a red block on a free tool reads as
   something having gone wrong. */
.tk-legal-note {
    margin: 0 0 14px;
    padding: 13px 16px;
    border: 1px solid #e6cf9c;
    border-left: 4px solid #d9a441;
    border-radius: var(--radius-sm);
    background: #fdf8ec;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--gray-800, #33415c);
}

.tk-legal-note__label {
    display: block;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a6212;
    margin-bottom: 4px;
}


/* An eyebrow inside the guidance prose. `.tk-content p` sets the body colour
   and beats a bare `.eyebrow` on specificity, so the label came out grey
   instead of the green used everywhere else on the site. */
.tk-content .eyebrow {
    color: var(--primary-green-dark);
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------- print */

/* The paste tip under a table. .tk-block-controls is flex, so this takes the
   rest of the row after the row-count spinner and the numbering toggle. */
.tk-paste-hint {
    flex: 1 1 260px;
    min-width: 200px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--gray-500);
}

/* Printing the page is the fallback when a Blob download is awkward (mobile
   Safari). Strip every control so the sheet prints as the document. */
@media print {
    .site-header, .site-footer, .tk-side, .tk-block-tools, .tk-block-controls,
    .tk-inline-toolbar, .tk-addrow, .tk-iconbtn, .page-hero, .tk-toolintro,
    .cta-band, .breadcrumb, .tk-content { display: none !important; }

    .tk-layout { display: block; }
    .tk-sheet {
        box-shadow: none;
        border: 0;
        max-width: none;
        padding: 0;
    }
    .tk-pagebreak { page-break-after: always; border: 0; color: transparent; }
    .tk-block { break-inside: avoid; }
    .tk-sig { break-inside: avoid; }
}

/* ------------------------------------------------ numbered setup steps */

.tk-step h3 {
    display: flex;
    align-items: center;
    gap: 9px;
}

.tk-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background: var(--primary-green);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.tk-audience-hint {
    margin: 6px 0 0;
    font-size: 0.73rem;
    color: var(--gray-600);
}

.tk-privacy__icon { flex: 0 0 auto; }

/* ------------------------------------------------- pinned action bar */

/* The sidebar's download buttons sit below a long document on a phone, so
   these ride above the sheet and stay put. Both sets are bound from one
   table in editor.js -- see EXPORTS. */
.tk-actionbar {
    position: sticky;
    top: calc(var(--header-height) + 8px);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 auto 14px;
    max-width: 816px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* The bar sits before the sheet in the DOM, so it cannot select a landscape
   sibling. editor.js marks the wrapper instead. */
.tk-sheet-wrap--landscape .tk-actionbar { max-width: 1056px; }

.tk-actionbar__hint {
    margin: 0;
    font-size: 0.76rem;
    color: var(--gray-600);
}

.tk-actionbar__buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tk-actionbar__buttons .btn {
    padding: 7px 13px;
    font-size: 0.8rem;
}

/* The organization's own contact line, above our attribution. */
.tk-sheet-contact {
    margin-top: 26px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    font-size: 0.74rem;
    color: var(--gray-600);
    text-align: center;
}

.tk-sheet-contact + .tk-sheet-footer {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 900px) {
    /* Sticky under a header that is already sticky gets crowded on a phone,
       and the sheet is the thing worth the screen space. */
    .tk-actionbar {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }
    .tk-actionbar__buttons .btn { flex: 1 1 auto; justify-content: center; }
}

@media print {
    .tk-actionbar { display: none !important; }
}

/* The floor disclaimer every tool page carries. Quieter than a page's own
   tailored callout so the specific warning still reads as the louder one. */
.callout--muted {
    background: var(--gray-50);
    border-left-color: var(--gray-300);
    color: var(--gray-600);
    font-size: 0.84rem;
}

/* Optional sport-specific rule checkboxes (step 2). */

.tk-rules { border-top: 1px solid var(--gray-200); padding-top: 14px; margin-top: 16px; }

/* Scoped as .tk-field-group .tk-check, not bare .tk-check: these are <label>
   elements inside a .tk-field-group, and `.tk-field-group label` (0,1,1) beats
   a lone class (0,1,0). Without the extra class the uppercase and letter
   spacing meant for field captions land on the rule names, so a readable
   "Dugout behavior" renders as a shouty "DUGOUT BEHAVIOR" -- seven of them in
   a column. */
.tk-field-group .tk-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--gray-700);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    margin-bottom: 0;
}

.tk-field-group .tk-check:hover { color: var(--primary-navy); }

.tk-field-group .tk-check input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--primary-green);
    cursor: pointer;
}

/* ------------------------------------------------- tool guidance prose */

/* The written guidance under each tool.
 *
 * These pages use plain prose markup -- <li><strong>Label.</strong> the
 * explanation</li> -- but .bullet-list and .cross-link on the feature pages are
 * built for a specific inner structure: an .icon element plus a .bullet-body
 * wrapper holding <strong> and <span>. Reusing the classes without that
 * structure made `display: flex` treat the <strong> and the text as two
 * columns, dropped the bullet markers entirely, and split the cross-link's
 * commas off from its links.
 *
 * Restated here, scoped to .tk-content, rather than rewriting the markup on 13
 * pages or changing classes the feature pages depend on.
 */

.tk-content .bullet-list {
    display: block;
    padding-left: 24px;
    margin: 18px 0 26px;
}

.tk-content .bullet-list li {
    display: list-item;
    list-style: disc;
    gap: 0;
    margin-bottom: 12px;
    line-height: 1.62;
    color: var(--gray-700);
}

.tk-content .bullet-list li::marker { color: var(--primary-green-dark); }

.tk-content .bullet-list li strong {
    display: inline;
    color: var(--primary-navy);
    font-size: inherit;
    margin: 0;
}

.tk-content .cross-link { display: block; }

/* Measure. The container is 1200px, and prose set across the full width of it
   is genuinely hard to read -- these sections are 600-900 words each, which is
   the whole point of the page. */
.tk-content > .container > h2,
.tk-content > .container > h3,
.tk-content > .container > p,
.tk-content > .container > .bullet-list,
.tk-content > .container > .callout,
.tk-content > .container > .cross-link,
.tk-content > .container > .faq-list { max-width: 78ch; }

.tk-content > .container > h2 {
    font-size: 1.55rem;
    margin: 38px 0 10px;
    color: var(--primary-navy);
}

.tk-content > .container > h2:first-child { margin-top: 0; }

.tk-content > .container > p {
    margin-bottom: 14px;
    line-height: 1.68;
    color: var(--gray-700);
}

.tk-content > .container > .callout { margin: 24px 0; }
.tk-content > .container > .cross-link { margin-top: 28px; }

@media (max-width: 620px) {
    .tk-content > .container > h2 { font-size: 1.3rem; margin-top: 28px; }
}

/* Links in the guidance prose were rendering identically to body text -- same
   colour, no underline, same weight -- so the cross-references between tools
   were invisible. These are the internal links that carry a reader (and
   ranking signal) between the 13 pages, so they need to look like links.
   Buttons are excluded; the CTA band sits outside .tk-content anyway. */
.tk-content > .container a:not(.btn) {
    color: var(--primary-green-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.tk-content > .container a:not(.btn):hover {
    color: var(--primary-navy);
    text-decoration-thickness: 2px;
}