/* General styles for routine items */
.routine-skill {
    cursor: grab;
    margin-bottom: 0.75rem;
    transition: transform 0.1s ease;
    position: relative; /* Needed for pseudo-elements like drag indicator */
    transition: all 0.3s ease; /* Smooth transitions */
    pointer-events: auto; /* Ensure the item itself is interactive */
}

/* Hover effect for routine items */
.routine-skill:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Style for validation messages within routine items */
.transition-status {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Style for indicating an item is being edited */
.routine-skill.editing {
    box-shadow: 0 0 0 2px #485fc7;
}

/* Minimum height for the routine builder container */
.routine-skills {
    min-height: 100px;
    transition: background-color 0.2s;
}

/* General column padding within a routine skill */
.routine-skill .columns {
    padding: 0.25rem;
}

/* Styling for individual columns within a routine skill */
.routine-skill .column {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; /* Use flex for alignment within columns */
    align-items: center; /* Vertically center content in columns */
}

/* --- Start Routine Button Fixes --- */

/* Button column: Push right, don't shrink, give slightly more width on tablet+ */

/* --- End Routine Button Fixes --- */

/* Toast notification styling (placed by .is-fixed-bottom-right) */
.notification.is-fixed-bottom-right {
    animation: slideIn 0.3s ease-out;
}

/* Slide-in animation for toast */
@keyframes slideIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Consistent height for form fields */
.field .control, .field .checkbox {
    min-height: 1.25rem;
    display: flex;
    align-items: center;
}
.field .checkbox {
    margin-top: 0.5rem;
}

/* Label margin */
.field .label {
    margin-bottom: 0.5rem;
}

/* Consistent input/select height */
.input, .select select {
    height: 2.25em;
}

/* Checkbox margin */
.checkbox {
    margin-right: 1.5rem;
}
/* A checkbox with a sentence: a space after the box, and a long label wraps
   in line with its first word, not under the box. */
.checkbox.comp-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5em;
}
.checkbox.comp-check input { flex: none; margin-top: 0.3em; }
.field .checkbox.comp-check { display: flex; }

/* Styling for validation message area */
.validation-messages {
    border-top: 1px solid #eee;
    padding-top: 0.75rem;
    margin-top: 1rem;
}

/* Styling for individual validation messages */
.transition-status {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

/* Gradient text for multiple warnings (example) */
.has-text-danger.has-text-warning {
    background: linear-gradient(90deg, #ff3860 50%, #ffdd57 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Specific warning colors */
.has-text-danger {
    color: #cc0f35 !important; /* Red for transitions; 5.7:1 on white */
}
.has-text-landing-warning {
    color: #ff69b4 !important; /* Pink for landings */
}
.has-text-tenth-warning {
    color: #ff851b !important; /* Orange for 10th skill */
}

/* Tariff difference subtitle */
.subtitle.tariff-difference {
    font-size: 0.9rem;
    color: #666;
}

/* Icon margin for warnings */
.has-text-warning .icon {
    margin-right: 0.5rem;
}

/* Dragging indicator text */
.routine-skill::after {
    content: "Drag to reorder";
    position: absolute;
    bottom: -20px; /* Position below the item */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: #666;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevent interference */
}

/* Ensure buttons inside draggable items remain clickable */
.routine-skill .buttons * {
    pointer-events: auto !important;
}

.routine-skills .routine-skill {
    margin-bottom: 0; border-radius: 0; border-left: 4px solid #ddd;
    cursor: grab; transition: border-left-color 0.3s ease, opacity 0.2s ease;
    -webkit-user-select: none; user-select: none;
}
.routine-skill.invalid-transition { border-left-color: #ff3860 !important; }
.routine-skill.invalid-landing { border-left-color: #ff69b4 !important; }
.routine-skill.duplicate-skill { border-left-color: #ffdd57 !important; }
.routine-skill-container.editing .routine-skill { box-shadow: 0 0 0 2px #485fc7 inset; }
.is-fixed-bottom-right { position: fixed; bottom: 1rem; right: 1rem; z-index: 1000; }
[x-cloak] { display: none !important; }

.routine-skill button, .routine-skill .delete { pointer-events: auto; }
.transition-status { font-size: 0.8rem; margin-top: 0.25rem; }
.routine-skills { min-height: 100px; transition: background-color 0.2s; border: 1px solid #dbdbdb; border-radius: 4px; padding: 0.5rem; }
/* A card's header: the name and FIG notation, then the button grid. */
.card-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 4px 0; }
.card-buttons { display: grid; grid-template-columns: 40px 45px; gap: 3px; flex-shrink: 0; }
.card-buttons .button { height: 24px; }
.card-buttons .card-text-button { font-size: 0.75rem; }

/* --- Side by side: a second routine beside the current one (both editable) --- */
.compare-with { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem; }
.builder-columns.is-comparing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.builder-column { min-width: 0; }
.column-head { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; min-height: 2rem; margin-bottom: 0.25rem; }
.column-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.column-head .buttons { flex-wrap: nowrap; flex-shrink: 0; }
.column-head .buttons .button { margin-bottom: 0; padding-left: 0.6em; padding-right: 0.6em; }
/* Keep both columns' cards level: the link only the first column has is hidden. */
.is-comparing .requirement-picker .is-text { display: none; }
.is-comparing .requirement-picker .select, .is-comparing .requirement-picker .select select { width: 100%; max-width: 100%; }
.is-comparing .requirement-picker-row { flex-wrap: wrap; }
.routine-skill.differs { background-color: #fff6d9; }
.compare-difference { font-size: 0.9rem; color: #555; margin-top: -0.75rem; margin-bottom: 0.75rem; }
.compare-legend { font-size: 0.8rem; color: #777; margin-top: 0.5rem; }
.add-to { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.add-to-label { font-size: 0.85rem; font-weight: 600; }
.add-to .select, .add-to .select select { max-width: 16rem; }
.compare-tabs { display: none; }
@media screen and (max-width: 768px) {
  /* Phones show one routine at a time, chosen with the tabs, at full width. */
  .compare-tabs { display: block; margin-bottom: 0.75rem; }
  .compare-tabs a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .builder-columns.is-comparing { display: block; }
  .is-comparing.shows-b > .builder-column:first-child,
  .is-comparing:not(.shows-b) > .builder-column:last-child { display: none; }
  /* The tabs name the routines; the headings keep View (and ⇄ and ✕). */
  .is-comparing .column-head strong { display: none; }
  .is-comparing .column-head { justify-content: flex-end; }
  .is-comparing .requirement-picker .is-text { display: inline-flex; }
  /* In Levels mode a phone shows the open tab only: the level's tabs switch. */
  .is-levels .level-beside, .is-levels .compare-tabs { display: none !important; }
  .is-levels .level-tabs .tabs li.is-beside a { background: none; color: inherit; }
}

.subtitle.tariff-difference { font-size: 0.9rem; color: #666; }
.has-text-danger { color: #cc0f35 !important; }
.has-text-landing-warning { color: #ff69b4 !important; }
.has-text-tenth-warning { color: #ff851b !important; }
.validation-messages { border-top: 1px solid #eee; padding-top: 0.75rem; margin-top: 1rem; }

/* --- Layout Styles --- */
.routine-skill { padding: 0.75rem; }
/* Name Block */
.skill-name-block { margin-bottom: 0.5rem; /* Space below this block */ }
.skill-name { font-size: 1rem; font-weight: 600; line-height: 1.2; }
/* Details/Buttons Row */
.skill-details-columns { align-items: center; /* Vertical alignment */ }
.skill-details-columns .column { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.skill-details-columns p { font-size: 0.85rem; white-space: nowrap; }
.skill-details-columns .buttons { margin-bottom: 0; } /* Remove button group margin */
/* Define the margin utility for tablet and up */
@media screen and (min-width: 769px) {

    /* Ensure detail columns take up space */
    .skill-details-columns .column:not(.is-narrow) {
        flex-basis: 0; /* Allow columns to grow */
        flex-grow: 1;  /* Allow columns to grow */
        min-width: 50px; /* Adjust as needed */
    }
}

.skill-validation-row { width: 100%; border-top: 1px solid #eee; margin-top: 0.5rem; padding-top: 0.5rem; }

/* --- Drag to reorder (SortableJS) --- */
/* The placeholder showing where the dragged card will land. */
.routine-skill-container.sortable-ghost .routine-skill { opacity: 0.4; }
.routine-skill-container.sortable-chosen .routine-skill { cursor: grabbing; }

/* Page header */
.hero.is-primary { background-color: #485fc7; }

/* Skills after an interruption (CoP §15.3) still show, but don't count. */
.routine-skill.not-counted { opacity: 0.55; }

/* Saved routines: the switcher above the routine. */
.routine-switcher { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
/* The routine's name gives way so New, Share and More stay on the row. */
.routine-switcher > .select { flex: 0 1 auto; min-width: 0; }
.routine-switcher .select select { max-width: 14rem; width: 100%; text-overflow: ellipsis; }
.routine-switcher > .button, .routine-switcher > details { flex-shrink: 0; }
/* On a phone the routine (and level) choice gets its own row; the rest wrap below it. */
@media screen and (max-width: 768px) {
    .routine-switcher { flex-wrap: wrap; }
    .routine-switcher > .select:first-child { flex: 1 1 100%; }
    .routine-switcher > .select:first-child select { max-width: none; }
}
.routine-menu { position: relative; }
.routine-menu > summary { display: inline-flex; box-sizing: border-box; margin-bottom: 0; }
.routine-menu-panel {
    position: absolute; top: calc(100% + 0.3rem); right: 0; z-index: 20; display: flex; flex-direction: column; align-items: stretch;
    min-width: 10rem; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 0.3rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.routine-menu-panel .button { justify-content: flex-start; }

/* Requirements: choosing a set, and the checklist under the totals. */
.requirement-picker { margin-bottom: 1rem; }
.requirement-picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.requirement-picker .select select { max-width: 18rem; }
/* The builder's choosers (views/chooser.templ): a button showing what's chosen, with
   an arrow, opening a panel under its row with a search, your own, used lately, and
   each organisation's. */
.chooser-button { max-width: 100%; justify-content: space-between; gap: 0.5rem; }
.chooser-chosen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
.chooser-arrow { display: inline-block; width: 0.55em; height: 0.55em; background: currentColor; clip-path: polygon(0 15%, 100% 15%, 50% 100%); transition: transform 0.15s ease; }
.chooser-button[aria-expanded="true"] .chooser-arrow { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .chooser-arrow { transition: none; } }
.chooser-panel { margin: 0.5rem 0 1rem; padding: 0.6rem; border: 1px solid #dbdbdb; border-radius: 8px; background: #fafafa; max-height: 24rem; overflow-y: auto; }
.chooser-search { margin-bottom: 0.5rem; }
.chooser-section { margin-bottom: 0.5rem; }
.chooser-heading { font-size: 0.75rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.03em; margin: 0.25rem 0.25rem 0.3rem; }
.chooser-option { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.25rem; padding: 0.3rem 0.6rem; margin-bottom: 0.25rem; border: 1px solid #e3e3e3; border-radius: 6px; background: #fff; font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.chooser-option:hover { border-color: #485fc7; }
.chooser-option.is-chosen { border-color: #485fc7; background: #eef1fb; font-weight: 600; }
.chooser-note { font-size: 0.75rem; color: #555; font-weight: 400; white-space: nowrap; }
.chooser-group { margin-bottom: 0.25rem; }
.chooser-group > summary { padding: 0.35rem 0.25rem; font-size: 0.9rem; font-weight: 600; }
.chooser-count { color: #666; font-weight: 400; }
.chooser-options { padding: 0.2rem 0 0.3rem 1.1rem; }
@media screen and (min-width: 769px) {
  .chooser-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.35rem; }
}
.is-comparing .chooser-options { display: block; }
.chooser-empty { color: #555; font-size: 0.9rem; padding: 0.25rem; }
.requirements-title { font-weight: 700; margin-bottom: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.requirements-list li { display: flex; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid #f0f0f0; }
.requirement-mark { font-weight: 700; width: 1.2rem; flex-shrink: 0; }
.is-met .requirement-mark { color: #257953; }
.is-unmet .requirement-mark { color: #cc0f35; }
.requirement-detail { display: block; color: #777; font-size: 0.8rem; }
/* Routines | Levels, and the Levels mode: the level's tabs sit on its columns. */
.builder-mode { margin-bottom: 0.75rem !important; }
.levels-bar .routine-switcher { flex-wrap: wrap; }
.level-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid #dbdbdb; }
.level-tabs .tabs { flex: 1 1 auto; min-width: 0; }
.level-tabs .tabs ul { flex-wrap: wrap; border-bottom: none; }
.level-tabs .tabs a { gap: 0.3rem; font-weight: 600; }
.level-tabs .tabs li.is-active a { color: #485fc7; }
.level-tabs .tabs li.is-beside a { color: #485fc7; background: #f5f7ff; }
.level-beside { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.tab-chosen { font-size: 0.55rem; color: #485fc7; }
.level-column-head { margin-bottom: 0.6rem; }
.level-column-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.level-column-requirements { font-size: 0.8rem; color: #777; }
.level-column-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.level-column-note { font-size: 0.85rem; color: #777; }
.level-empty { padding: 1rem 0; }
.routine-skills.is-read-only .routine-skill { background: #fafafa; }
.level-check { padding: 0.5rem 0.75rem; border-left: 3px solid #485fc7; background: #f5f7ff; }
.level-check p + p { margin-top: 0.15rem; }
/* Level editor: the structure first, as cards to pick from. */
.level-structure { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem; border: none; padding: 0; margin-bottom: 1rem; }
.level-structure legend { grid-column: 1 / -1; margin-bottom: 0.25rem; }
.level-structure-choice { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid #dbdbdb; border-radius: 6px; cursor: pointer; }
.level-structure-choice.is-selected { border-color: #485fc7; background: #f5f7ff; }
.level-structure-choice input { margin-top: 0.25rem; }
.level-structure-choice span { display: flex; flex-direction: column; }
.level-option-label { font-size: 0.85rem; font-weight: 600; min-width: 4rem; }
.level-details { margin: 0.5rem 0 1rem; font-size: 0.9rem; }
.level-details > summary { color: #485fc7; margin-bottom: 0.5rem; }
/* Requirements page: making a set routine from a routine already built. */
.set-routine-from { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.set-routine-from .input { max-width: 14rem; }
.set-routine-elements { margin: 0.25rem 0 0 1.5rem; font-size: 0.9rem; }
/* An option's label, its search on a line of its own, then its list and
   Remove: wrapping on a phone rather than running off the card. */
.level-option { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-bottom: 0.5rem; }
.level-option-label { flex: 1 1 100%; }
.level-option .select-search { flex: 1 1 100%; margin-bottom: 0; }
.level-option .select { flex: 0 1 26rem; min-width: 0; }
.level-option .select select { width: 100%; max-width: 100%; }
.level-exercises { font-size: 0.85rem; color: #555; margin: 0.15rem 0; }

/* --- Add a skill (views.SkillFormView) --- */
/* The editor's own box would limit how far the sticky skill card can follow the
   page, so let its children lay out in the form instead. */
#skill-editor { display: contents; }

/* Skill picker: category tabs and big skill buttons. */
.picker { margin-bottom: 1rem; }
.picker-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: thin; }
.picker-tab { flex-shrink: 0; padding: 0.35rem 0.85rem; border: 1px solid #dbdbdb; border-radius: 999px; background: #fff; font: inherit; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.picker-tab.is-active { background: #485fc7; border-color: #485fc7; color: #fff; }
.picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
@media screen and (min-width: 769px) { .picker-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.picker-skill { display: flex; flex-direction: column; justify-content: center; border: 1px solid #dbdbdb; border-radius: 8px; background: #fafafa; overflow: hidden; }
.picker-skill:hover { border-color: #485fc7; }
/* The box's main button (the usual shape) and, under it, a button per shape. */
.picker-skill-main { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.5rem 0.75rem; width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.picker-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #e5e5e5; }
.picker-shape { border: 0; border-left: 1px solid #e5e5e5; background: #fff; padding: 0.4rem 0.1rem; font: inherit; font-size: 0.8rem; color: #444; cursor: pointer; min-height: 2.25rem; }
.picker-shape:first-child { border-left: 0; }
.picker-shape:hover { background: #eef1fb; }
.picker-shape { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.picker-shape-modifier { font-size: 0.7rem; color: #485fc7; font-weight: 700; }
.picker-shape-modifier:empty { display: none; }
.picker-shape.is-selected { background: #485fc7; color: #fff; font-weight: 600; }
.picker-shape.is-selected .picker-shape-modifier { color: #fff; }
/* A group of related skills takes a whole row, its options in a grid. */
.picker-group { grid-column: 1 / -1; border: 1px solid #dbdbdb; border-radius: 8px; background: #fafafa; padding: 0.5rem; }
.picker-group-title { font-size: 0.8rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0.25rem 0.4rem; }
.picker-group-note { color: #777; font-size: 0.85rem; margin: -0.25rem 0.25rem 0.4rem; }
.picker-group-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
@media screen and (min-width: 769px) { .picker-group-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.picker-option { display: flex; justify-content: space-between; align-items: center; gap: 0.35rem; min-height: 2.5rem; padding: 0.35rem 0.6rem; border: 1px solid #e3e3e3; border-radius: 6px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.picker-option .picker-skill-name { font-size: 0.9rem; }
.picker-option:hover { border-color: #485fc7; }
.picker-option.is-picked { border: 2px solid #485fc7; background: #eef1fb; }
.picker-skill.is-picked { border: 2px solid #485fc7; background: #eef1fb; }
.picker-skill-name { font-weight: 600; line-height: 1.2; }
.picker-skill-tariff { color: #485fc7; font-weight: 700; }
.picker-skill-name, .picker-skill-meta { display: block; }
.picker-skill-meta { color: #666; font-size: 0.8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.picker .input[type="search"] { margin-bottom: 0.6rem; }
.picker-hint { color: #777; font-size: 0.85rem; margin-top: 0.5rem; }

/* Button-style choices (shape, direction, takeoff): radios styled as a segmented control. */
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid #dbdbdb; border-radius: 6px; overflow: hidden; }
.segment { position: relative; padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.9rem; background: #fff; border-left: 1px solid #dbdbdb; user-select: none; }
.segment:first-child { border-left: 0; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment.is-selected, .segment:has(input:checked) { background: #485fc7; color: #fff; }
.segment:has(input:focus-visible) { outline: 2px solid #485fc7; outline-offset: 2px; }

/* Number with − and + buttons. */
.stepper { display: inline-flex; align-items: center; gap: 0.25rem; }
.stepper .input, .stepper .button { height: 2.25rem; }
.stepper .input { width: 3.25rem; padding: 0 0.25rem; text-align: center; }
.stepper .button { width: 2.5rem; padding: 0; font-size: 1.1rem; }

.skill-builder { border: 1px solid #eee; border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; }
.skill-builder > summary { font-weight: 600; }
.builder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.75rem; }
.builder-label { min-width: 8.5rem; font-weight: 600; font-size: 0.9rem; }
.builder-readout { color: #555; font-size: 0.9rem; }

/* The skill card: what Add will add. */
.skill-card { border: 2px solid #485fc7; border-radius: 8px; padding: 0.5rem 0.75rem; background: #fff; }
.skill-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.skill-card-name { font-size: 1.15rem; font-weight: 800; line-height: 1.2; color: #222; }
.skill-card-meta { color: #555; font-size: 0.85rem; margin-top: 0.1rem; }
.skill-card-fig { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.skill-card-tariff { font-size: 1.35rem; font-weight: 700; color: #485fc7; line-height: 1; }
.skill-card-problem { color: #cc0f35; font-size: 0.85rem; margin-top: 0.5rem; }
/* Shape buttons and Add (or Update / Cancel) share a row; Add takes what's left. */
.skill-card-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin-top: 0.5rem; }
.skill-card-actions .add-to { flex-basis: 100%; margin-bottom: 0; order: -1; } /* above the shapes, which share a row with Add */
.skill-card-actions #add-btn { flex: 1 1 6.5rem; min-width: 0; width: auto; height: auto; min-height: 2.5rem; padding: 0.3rem 0.5rem; white-space: normal; line-height: 1.15; }
.skill-card-actions .segment { padding: 0.35rem 0.6rem; }
/* On wider screens the card is laid out as it was before it went compact:
   shapes under the name, then the label, then Add to and Add (as wide as its
   words, as every button is on a laptop).
   Phones keep the compact card (shapes and Add on one row). */
@media screen and (min-width: 769px) {
    .skill-card { display: flex; flex-direction: column; padding: 0.75rem 1rem; }
    .skill-card-name { font-size: 1.4rem; }
    .skill-card-meta { font-size: 0.9rem; margin-top: 0.15rem; }
    .skill-card-tariff { font-size: 1.6rem; }
    .skill-card-actions { display: contents; }
    .skill-card .segmented { order: 1; align-self: flex-start; margin-top: 0.6rem; }
    .skill-card-actions .segment { padding: 0.4rem 0.8rem; }
    .skill-card-label { order: 2; margin: 0.6rem 0; font-size: 0.9rem; }
    .skill-card-actions .add-to { order: 3; margin-bottom: 0.5rem; }
    .skill-card-actions #add-btn { order: 4; flex: none; width: auto; max-width: 100%; align-self: flex-start; padding-inline: 1.5rem; min-height: 2.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .skill-card-buttons { order: 4; justify-content: flex-start; }
}
.skill-card-buttons { flex: 1 1 auto; justify-content: flex-end; margin-bottom: 0 !important; }
.skill-card-buttons .button { margin-bottom: 0 !important; }
/* A shape's difference from the chosen one sits under its name. */
.shape-segment { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.segment-modifier { font-size: 0.7rem; font-weight: 700; color: #485fc7; }
.skill-card-label { margin: 0.35rem 0 0; font-size: 0.85rem; }
.skill-card-label > summary { color: #485fc7; }
.skill-card-label .input { margin-top: 0.4rem; }


/* --- Compare page (views.ComparePage) --- */
.compare-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
.compare-table td { vertical-align: top; }
.compare-num { width: 2rem; color: #777; }
.compare-table tr.differs td:not(.compare-num) { background: #fff8e1; }
.compare-name, .compare-label, .compare-meta, .compare-note { display: block; }
.compare-name { font-weight: 600; }
.compare-label, .compare-note { color: #777; font-size: 0.8rem; }
.compare-meta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: #555; }
.compare-table td.not-counted .compare-name, .compare-table td.not-counted .compare-meta { color: #999; }
.compare-empty { color: #bbb; }
.compare-total { font-weight: 700; font-size: 1.2rem; color: #485fc7; }
.compare-summary { font-weight: 600; }
.compare-issues { font-size: 0.85rem; color: #8a2a00; padding-left: 1.1rem; list-style: disc; }

/* --- Requirement sets page and editor (views.RequirementsPage, views.SetEditor) --- */
.box-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
/* Keeps Save in reach while scrolling a long set. */
.editor-head { position: sticky; top: 0; z-index: 5; background: #fff; padding: 0.5rem 0; margin-top: -0.5rem; }
.set-list { margin: 0; }
.set-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0; border-top: 1px solid #f0f0f0; }
.set-name { font-weight: 600; }
.set-meta { color: #777; font-size: 0.8rem; }
.set-rules { font-size: 0.85rem; margin-top: 0.3rem; }
.set-description { font-size: 0.85rem; color: #555; }
.builtin-group { border-top: 1px solid #f0f0f0; }
.builtin-group > summary { font-weight: 600; padding: 0.6rem 0; }
.builtin-group[open] > summary { color: #485fc7; }
.set-rules summary { color: #485fc7; }
.set-rules ul { list-style: disc; padding-left: 1.2rem; margin-top: 0.3rem; }
.set-rules ol { list-style: decimal; padding-left: 1.4rem; margin-top: 0.3rem; }
.import-panel { margin-bottom: 1rem; }
.rule-card { border: 1px solid #e3e3e3; border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; background: #fcfcfc; }
.rule-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
/* A long title takes the whole row and the buttons wrap below it. */
.rule-card-title { font-weight: 600; flex: 1 1 14rem; }
.rule-card-head .buttons { flex-wrap: nowrap; flex-shrink: 0; }
.rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.rule-grid.rule-kind { grid-template-columns: minmax(0, 1fr); }
.rule-grid { align-items: end; }
.rule-grid > .field { margin-bottom: 0.5rem; }
@media screen and (min-width: 769px) {
  .rule-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rule-grid.rule-kind { grid-template-columns: 1fr 2fr; }
}
.matcher { border: 1px dashed #ddd; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.25rem 0 0.5rem; }
.matcher legend { font-size: 0.85rem; font-weight: 600; padding: 0 0.25rem; }
.option-group { border: 1px solid #dbe0f5; border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; background: #f8f9fe; }
.option-group > legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.25rem; }
/* Content inside <details> sits in a slot that resets box-sizing to content-box,
   making Bulma inputs wider than their column; restore Bulma's border-box. */
details > * { box-sizing: border-box; }
/* Every dropdown (<details>) shows the same arrow before its summary: pointing right
   when closed, down when open. It is an inline-block triangle in the text colour, sized
   in em, so it sits on the first line whatever the summary is (label, title, small text,
   <strong> inside) and block-display summaries do not lose it. The native marker is
   hidden so there is never a double arrow. Summaries that are something else (a button,
   the routine menu, the inline "move" link) opt out below. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; vertical-align: -0.02em;
    background: currentColor; clip-path: polygon(15% 0, 100% 50%, 15% 100%); transition: transform 0.15s ease;
}
details[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details > summary::before { transition: none; } }
details > summary.button::before, .routine-menu > summary::before { content: none; }
/* Fieldsets default to min-width: min-content, which lets nested grids overflow. */
.matcher, .option-group { min-width: 0; }
@media screen and (max-width: 768px) {
  .option-group, .option-group .matcher { padding-left: 0.5rem; padding-right: 0.5rem; }
}
.matcher-summary { font-weight: 400; color: #555; }
.matcher-choices { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.matcher-choices .label { flex-basis: 100%; margin: 0; }
/* Each choice is a pill big enough to tap. */
.matcher-choices .checkbox { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid #dbdbdb; border-radius: 999px; font-size: 0.85rem; background: #fff; margin: 0; }
.matcher-choices .checkbox:has(input:checked) { border-color: #485fc7; background: #eff1fa; color: #3850b7; font-weight: 600; }
.matcher-more { margin: 0.25rem 0 0.5rem; }
.matcher-more > summary { color: #485fc7; font-size: 0.85rem; padding: 0.35rem 0; }
/* "Or describe it" is a small way in, like More conditions, not a heading. */
.matcher-describe { margin: 0.25rem 0 0.5rem; }
.matcher-describe > summary { color: #485fc7; font-size: 0.85rem; padding: 0.35rem 0; cursor: pointer; }
.matcher-hint { color: #888; font-size: 0.75rem; }
.set-problems ul, .set-conflicts ul { list-style: disc; padding-left: 1.2rem; }

/* --- Phones --- */
@media screen and (max-width: 768px) {
    /* Reclaim width from the nested boxes and a shorter header. */
    .section { padding: 1.25rem 0.75rem; }
    .hero-body { padding: 1.25rem 1rem; }
    .hero .title { font-size: 1.5rem; }
    .hero .subtitle { font-size: 1rem; }
    .box { padding: 1rem; }
    .routine-skills { padding: 0.25rem; }
    .routine-skills .routine-skill { padding: 0.75rem; }

    /* Card details sit two per row (see views.skillCard). */
    .skill-details-columns .column { padding: 0.15rem 0.5rem; }
    .skill-details-columns p { white-space: normal; }

    .is-fixed-bottom-right { left: 1rem; }

    /* Keep the skill card (and its Add button) on screen while choosing and adjusting,
       but not while typing elsewhere: with the keyboard up it would cover the field. */
    .skill-card { position: sticky; bottom: 0.5rem; z-index: 5; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12); }
    /* While the builder is open, the card waits below it rather than covering it. */
    .skill-builder[open] ~ .skill-card { position: static; box-shadow: none; }
    #main-form:has(input:focus:not(#custom-name)) .skill-card { position: static; box-shadow: none; }
    .builder-label { min-width: 100%; }
}

/* --- Loading a set routine: new routine or replace --- */

/* --- Which checks apply to a routine (set routines turn some off) --- */
.routine-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; border-top: 1px solid #eee; margin-top: 0.75rem; padding-top: 0.6rem; font-size: 0.9rem; }
.routine-checks-label { font-weight: 600; color: #555; }
.routine-checks .checkbox { display: inline-flex; align-items: center; gap: 0.35rem; }
.set-scoring { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.set-scoring .matcher-hint { flex-basis: 100%; margin: 0; }
.scored-elements { display: inline-flex; align-items: center; gap: 0.35rem; }
/* Whether an element scores, when only some do; the coach can tick to choose. */
.scores-toggle { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border: 1px solid #dbdbdb; border-radius: 999px; font-size: 0.72rem; color: #666; background: #fff; cursor: pointer; vertical-align: middle; }
.scores-toggle.is-scoring { border-color: #485fc7; background: #eef1fb; color: #3850b7; font-weight: 600; }
.scores-toggle input { margin: 0; }
.scored-input { width: 4.5rem; }

/* --- Share links (static/js/share.js) --- */
.share-modal .modal-card { width: calc(100% - 2rem); max-width: 28rem; margin: 0 auto; border-radius: 10px; }
.share-modal .modal-card-body { border-radius: 10px; max-height: calc(100vh - 3rem); overflow-y: auto; }
.share-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.share-intro { font-size: 0.9rem; color: #555; margin-bottom: 0.6rem; }
.share-choices { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; max-height: 14rem; overflow-y: auto; }
.share-choice { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid #e3e3e3; border-radius: 6px; }
.share-choice:has(input:checked) { border-color: #485fc7; background: #eef1fb; }
.share-choice input { margin-top: 0.25rem; }
.share-choice-name { display: block; font-weight: 600; }
.share-choice-detail { display: block; font-size: 0.8rem; color: #666; }
.share-buttons { margin-bottom: 0.5rem !important; }
.share-link { font-size: 0.75rem; color: #555; }
.share-status { font-size: 0.8rem; color: #666; margin-top: 0.35rem; }
.share-qr { display: flex; justify-content: center; margin-top: 0.75rem; }
.share-qr svg { width: min(14rem, 70vw); height: auto; }
.share-note { text-align: center; font-size: 0.8rem; color: #777; margin-top: 0.25rem; }

/* --- How a skill is judged (views/judging.templ, static/js/judging.js) --- */
.judging-row { margin-top: 0.4rem; }
/* How it's judged, on the skill card: a small link on the name's details line. */
.judging-link { border: 0; padding: 0; background: none; font: inherit; color: #485fc7; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
.judging-link:hover { color: #3a4fb0; }
.judging-modal .modal-card { width: calc(100% - 2rem); max-width: 34rem; margin: 0 auto; max-height: calc(100vh - 2rem); border-radius: 10px; }
.judging-modal .modal-card-head { align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; }
.judging-head { flex: 1; min-width: 0; }
.judging-modal .modal-card-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.15rem; }
.judging-skill { font-size: 0.9rem; overflow-wrap: anywhere; }
.judging-skill .has-text-grey { margin-left: 0.35rem; white-space: nowrap; }
.judging-modal .modal-card-body { padding: 0.9rem 1rem 1.2rem; }
.judging-lead { font-size: 0.85rem; color: #555; margin-bottom: 0.5rem; }
.judging-group { font-size: 0.95rem; font-weight: 700; margin: 0.9rem 0 0.3rem; }
.judging-intro { font-size: 0.85rem; color: #555; margin-bottom: 0.4rem; }
.judging-items { list-style: none; margin: 0; }
.judging-items li { padding: 0.4rem 0; border-top: 1px solid #eee; }
.judging-items li.is-note .judging-fault strong { font-weight: 600; color: #555; }
.judging-fault { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin: 0; }
.judging-amount { flex: none; font-weight: 700; color: #cc0f35; white-space: nowrap; }
.judging-explain { font-size: 0.85rem; margin: 0.1rem 0 0; }
.judging-ref { display: inline-block; margin-left: 0.3rem; font-size: 0.72rem; color: #888; white-space: nowrap; }

/* --- Competition pages (views/competitions.templ) --- */
.comp-page [hidden] { display: none !important; }
.comp-deadline { display: flex; gap: 0.5rem; }
.comp-level-group { margin-bottom: 0.4rem; }
.comp-level-group summary { font-weight: 600; padding: 0.2rem 0; }
.comp-level-order { margin: 0 0 0.4rem 0.75rem; }
.comp-level-order li { display: flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0; }
.comp-level-name { flex: 1; min-width: 0; }
.comp-level-gap { width: 2.25em; flex: none; }
.comp-level { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0 0.15rem 1rem; }
.comp-counts { margin: 1rem 0; }
.comp-manage[open] summary { margin-bottom: 0.75rem; }
/* A page's settings, or a form for what it lists, opening in place from a
   small button (views/opens.templ). Settings are rows of a list: what and how
   it's set on the left, the button always in the same place on the right, a
   hairline between rows. An action's button alone has no row. The button
   says Close while open, and its chevron turns. */
.comp-opens { border-bottom: 1px solid #ededed; }
.comp-opens:not(.comp-opens-action):not(.comp-opens + .comp-opens) { border-top: 1px solid #ededed; margin-top: 0.5rem; }
.comp-opens:not(:has(+ .comp-opens)) { margin-bottom: 1.25rem; }
.comp-opens > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1rem; padding: 0.6rem 0; }
.comp-opens > summary::before { content: none; }
.comp-opens-now strong { display: block; }
.comp-opens-detail { display: block; color: #6b6b6b; font-size: 0.875rem; }
.comp-opens-button { justify-self: end; }
.comp-opens-action { border: 0; margin-bottom: 1rem; }
.comp-opens-action > summary { display: block; padding: 0; }
.comp-opens-button::after { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-left: 0.5em; background: currentColor; clip-path: polygon(0 15%, 100% 15%, 50% 100%); transition: transform 0.15s; }
.comp-opens[open] > summary .comp-opens-button::after, .comp-popup[open] > .comp-opens-button::after, .routine-menu[open] > .comp-opens-button::after,
details[open] > summary.comp-opens-button::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .comp-opens-button::after { transition: none; } }
.comp-opens[open] > summary .comp-opens-label, .comp-opens:not([open]) > summary .comp-opens-close { display: none; }
.comp-opens-form { margin: 0 0 0.9rem; padding: 0.25rem 0 0.25rem 1rem; border-left: 3px solid #dbdbdb; }
/* A small pop-up menu from a button (details[data-menu], static/js/menus.js
   closes it on a tap outside): the timetable's Print. */
.comp-popup { position: relative; display: inline-block; }
.comp-popup > summary::before { content: none; }
.comp-popup-panel { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 30; min-width: 14rem; padding: 0.3rem 0; background: #fff; border: 1px solid #dbdbdb; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.comp-popup-panel a { display: block; padding: 0.45rem 0.9rem; color: #363636; }
.comp-popup-panel a:hover, .comp-popup-panel a:focus { background: #f5f5f5; }
.comp-popup-note { max-width: 18rem; padding: 0.3rem 0.9rem 0.45rem; margin: 0; color: #4a4a4a; border-bottom: 1px solid #ededed; }
/* The entries page's concerns: the open ones a row each, a hairline between. */
.comp-concerns h2 .chip { margin-left: 0.5rem; vertical-align: middle; }
.comp-concern { padding: 0.6rem 0; border-top: 1px solid #ededed; }
.comp-concern .comp-flight-actions .input { flex: 1 1 12rem; width: auto; max-width: 28rem; }
.comp-concerns-resolved > summary { cursor: pointer; }
/* The entries page's Print and Download, in a row above the search. */
.comp-dash-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
/* A menu whose button is at the left (the entries page's Print, a person's
   Timetables and calendars) opens rightwards, so it stays on a phone's screen. */
.comp-popup-left > .comp-popup-panel { left: 0; right: auto; }
.buttons > .comp-popup { margin: 0 0.5rem 0.5rem 0; }
.buttons > .comp-popup > .button { margin: 0; }
/* A club's competition: where its entries stand, and sending them, above
   the entries (views/clubs.templ). */
.comp-send { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; padding: 0.75rem 0; margin: 1rem 0; }
.comp-send-state { flex: 1 1 18rem; }
.comp-send-state .chip { margin-right: 0.5rem; }
.comp-send-note { display: block; color: #6b6b6b; font-size: 0.875rem; margin-top: 0.25rem; }
.comp-send-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* A row's rare actions (a club's member: New link, Remove) behind its More
   button, opening beneath it at the right of the row. */
.comp-row-more { text-align: right; width: 1%; white-space: nowrap; }
.comp-row-more .comp-opens-action { margin-bottom: 0; }
.comp-row-more .comp-opens-form { margin: 0.25rem 0 0; padding: 0.1rem 0.75rem 0.1rem 0; border-left: 0; border-right: 3px solid #dbdbdb; }
@media (max-width: 768px) { .comp-row-more { text-align: left; width: auto; } .comp-row-more .comp-opens-form { padding: 0.1rem 0 0.1rem 0.75rem; border-right: 0; border-left: 3px solid #dbdbdb; } }
/* On a wide screen a row's More opens over the rows below, as a menu, so
   the table's columns don't move when it opens. */
@media (min-width: 769px) {
  .comp-row-more { position: relative; }
  .comp-row-more details[open] > .comp-opens-form { position: absolute; right: 0.5rem; top: 100%; z-index: 5; margin: 0; padding: 0.5rem 0.75rem;
    background: #fff; border: 1px solid #dbdbdb; border-radius: 4px; box-shadow: 0 4px 12px rgba(10, 10, 10, 0.12); }
}
/* The timetable's status card: published or not with its buttons, then what
   to look at in the flights and the officials, each a section of the card. */
.comp-tt-publish { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; }
.comp-tt-state { flex: 1 1 18rem; }
.comp-tt-state .chip { margin-right: 0.5rem; }
.comp-tt-note { color: #6b6b6b; font-size: 0.875rem; }
.comp-tt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.comp-tt-publish-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.comp-tt-check { border-top: 1px solid #ededed; margin-top: 1rem; padding-top: 0.9rem; }
.comp-tt-check-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; }
.comp-tt-check-head { margin-bottom: 0.4rem; }
.comp-tt-check-head .chip { margin-left: 0.5rem; }
.comp-tt-check-head .comp-tt-note { margin-left: 0.5rem; }
.comp-tt-days { font-size: 0.875rem; color: #4a4a4a; margin-bottom: 0.25rem; }
.comp-tt-days li { margin-bottom: 0.1rem; }
.comp-tt-check details { margin-top: 0.35rem; }
/* Find a name and the jumps to each day and area, right above the flights. */
.comp-tt-bar { margin: 1.5rem 0 0.5rem; }
.comp-tt-bar .comp-jump p { margin-bottom: 0.2rem; }
.comp-table td, .comp-table th { white-space: nowrap; }
.comp-table td:nth-child(6) { white-space: normal; min-width: 12rem; }
.comp-table tr.has-problems td:nth-child(6) { color: #cc0f35; }
/* A comp sec's coaches: each coach's two rows read as one block, ruled off below. */
.comp-coaches tbody tr:first-child td { border-bottom: 0; }
.comp-coaches tbody tr:last-child td { padding-top: 0; padding-bottom: 0.75rem; border-bottom-width: 2px; }
/* A comp sec's entries: the status says a lot, so it wraps rather than pushing the table wider. */
.comp-club-entries td:nth-child(4) { white-space: normal; min-width: 10rem; }
/* The entries table has a tick box first; its problems say so with a chip, not red text. */
.comp-entries td:nth-child(6) { white-space: nowrap; min-width: 0; }
.comp-entries tr.has-problems td:nth-child(6) { color: inherit; }
.comp-entries td.comp-problem-cell { white-space: normal; min-width: 12rem; }
/* A routine's table: the number, notation and difficulty as narrow as they
   need, on one line; the name takes the rest. */
.comp-skills td:first-child, .comp-skills td:nth-child(3), .comp-skills td:last-child { width: 1%; white-space: nowrap; }
.comp-skills tr.not-counted td { color: #999; text-decoration: line-through; }
/* The reason it doesn't count isn't struck through (an inline-block stops the line). */
.comp-skills tr.not-counted td > .has-text-danger { display: inline-block; text-decoration: none; }
.comp-results { list-style: none; margin: 0; font-size: 0.9rem; }
.comp-results .is-unmet { color: #cc0f35; }
.comp-option { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem 0 !important; }
.comp-link { margin-bottom: 1.5rem; }
.comp-link .input { font-family: monospace; }
.comp-video-skills { padding-left: 1.5rem; margin-bottom: 0.3rem; }
.comp-tariff { width: 4.5rem; margin: 0 0.3rem; }
.comp-video-box { border-top: 1px solid #eee; padding-top: 0.5rem; }
.comp-table tr.is-withdrawn td { color: #999; }
.comp-table tr.is-withdrawn td a { color: #6b6b6b; text-decoration: line-through; }

/* --- Timetable (views/timetable.templ) --- */
.comp-flight { padding: 0.9rem 1rem; }
.comp-order { margin: 0 0 0.5rem 1.4rem; }
/* A gymnast's running number, their place in the flight: the same on every page. */
.comp-run-no { display: inline-block; min-width: 1.6em; padding: 0 0.3em; margin-right: 0.35em; border-radius: 0.3em; background: #eef0f4; color: #333; font-weight: 700; font-size: 0.9em; text-align: center; font-variant-numeric: tabular-nums; }
.comp-order li { margin: 0.15rem 0; }
/* A flight's Move a gymnast: who, to which flight, Move, wrapping on a phone. */
.comp-move-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
/* The flight cards' buttons, dropdowns and choices are at least 40px tall, to tap. */
.comp-move-form .button, .comp-tt-actions .button, .comp-panel .button { min-height: 2.5rem; }
.comp-move-form .select:not(.is-multiple), .comp-move-form .select select, .comp-tt-actions .select:not(.is-multiple), .comp-tt-actions .select select,
.comp-panel .select:not(.is-multiple), .comp-panel .select select { height: 2.5rem; }
.comp-panel > summary { display: flex; align-items: center; gap: 0.25em; min-height: 2.5rem; }
/* A long flight or person in a dropdown stays within the card. */
.comp-move-form .select, .comp-move-form .select select, .comp-tt-actions .select, .comp-tt-actions .select select, .comp-panel .select, .comp-panel .select select { max-width: 100%; }
.comp-flight-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
/* "Jump to" a day or area (the timetable, On the day): links big enough to tap. */
.comp-jump p, p.comp-jump { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.4rem; }
.comp-jump a { display: inline-flex; align-items: center; min-height: 2.5rem; }
/* A printout's toolbar wraps on a phone, and a wide table scrolls in its own box (a
   .table-container), so the page never scrolls sideways and Print stays on screen. */
.comp-print-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; }
.comp-printed-from { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; font-size: 0.875rem; }
/* A sheet from the draft says so on every page, screen and paper. */
.comp-draft-mark { display: inline-block; margin: 0 0 0.35rem; padding: 0.05rem 0.5rem; border: 2px solid currentColor; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
th .comp-draft-mark, h2 .comp-draft-mark { margin: 0 0 0 0.75rem; font-size: 0.7rem; vertical-align: middle; }
.comp-sheet-table td, .comp-sheet-table th { font-size: 0.9rem; }
.comp-sheet-table td:last-child { min-width: 4rem; }
@media print {
    .screen-only, .comp-print-bar { display: none !important; }
    .comp-page.section { padding: 0; }
    .comp-sheet { break-after: page; }
}
/* What if an official leaves (views/leave.templ) */
.comp-leave-seat { border-top: 1px solid #eee; padding: 0.5rem 0; }
.comp-leave-seat ol { margin-left: 1.25rem; }

/* Simulation (views/simulate.templ) */
.comp-sim-grid { display: grid; gap: 0.3rem; margin-bottom: 0.5rem; }
.comp-sim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.comp-sim-row > span:first-child { flex: 1 1 12rem; }
.comp-sim-nums { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; }
.comp-sim-table th { white-space: nowrap; }
.comp-sim-table td { min-width: 11rem; vertical-align: top; }
.comp-sim-table .buttons form { display: contents; }

/* The panel timeline (views/timetable.templ): sheets side by side, each a
   grid with a row for every minute. */
.comp-timeline { --tl-min: 4px; --tl-time: 3.2rem; --tl-event: 9rem; --tl-seat: 5.5rem; }
.comp-tl-sheets { display: flex; gap: 0.75rem; overflow-x: auto; align-items: flex-start; padding-bottom: 0.5rem; }
.comp-tl-sheet { display: grid; flex: none; font-size: 0.72rem; line-height: 1.2; border: 1px solid #ddd; background: #fff; }
.comp-tl-head { background: #f5f5f5; border-bottom: 1px solid #ddd; padding: 0.15rem 0.3rem; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-tl-day { font-size: 0.85rem; }
.comp-tl-timehead { color: #666; font-weight: normal; }
.comp-tl-area { border-left: 2px solid #ccc; }
.comp-tl-off { background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 4px, #fff 4px, #fff 8px); }
.comp-tl-line { border-top: 1px solid #e3e3e3; }
.comp-tl-hour { color: #555; font-weight: 600; text-align: right; padding: 0 0.3rem; border-top: 1px solid #ccc; }
.comp-tl-cell { position: relative; z-index: 1; overflow: hidden; padding: 0.1rem 0.25rem; margin: 0 1px 1px; border-radius: 3px; }
.comp-tl-flight { background: #e3ecfb; border-left: 3px solid #6a8fd8; }
.comp-tl-block { background: #fbf0dc; border-left: 3px solid #d9a441; }
.comp-tl-seat { background: #eef3fc; word-break: break-word; }
.comp-tl-empty { background: #fde8e8; color: #b42318; text-align: center; }
.comp-tl-overlap { outline: 2px solid #d92d20; }
/* A person's or club's timeline: theirs picked out, the rest faint. */
.comp-tl-mine { background: #dcf3e2; border-left: 3px solid #2f9e57; box-shadow: 0 0 0 1px #2f9e57 inset; }
.comp-tl-faint { opacity: 0.35; }
.comp-tl-note { font-weight: 600; color: #1d6b3a; }
@page timeline { size: A3 landscape; margin: 10mm; }
@media print {
    .comp-timeline { page: timeline; --tl-min: 0.6mm; --tl-time: 9mm; --tl-event: minmax(0, 1fr); --tl-seat: minmax(0, 1fr); }
    .comp-timeline-officials { --tl-event: minmax(0, 2.2fr); --tl-min: 0.4mm; }
    .comp-tl-sheets { overflow: visible; gap: 3mm; }
    .comp-tl-sheet { flex: var(--tl-areas) 1 0; min-width: 0; font-size: 6.5pt; }
    .comp-timeline-officials .comp-tl-sheets { display: block; }
    .comp-timeline-officials .comp-tl-sheet { break-after: page; }
    .comp-tl-sheet *, .comp-tl-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Officials (views/officials.templ) --- */
/* Judging and helping: the discipline, its level and "can chair" line up
   down the rows (a grid), and stay on one line at phone width. */
.comp-offer-row { display: grid; grid-template-columns: 11.5rem auto auto; justify-content: start; align-items: center; gap: 0.4rem 0.8rem; }
.comp-offer-row > .select { justify-self: start; }
.comp-offer .checkbox input { margin-right: 0.3rem; }
@media screen and (max-width: 480px) {
  .comp-offer-row { grid-template-columns: auto auto; }
  .comp-offer-row > .checkbox:first-child { grid-column: 1 / -1; }
}
.comp-num { width: 4.5rem; }
.comp-offers td { vertical-align: middle; }
/* A coach's qualification: its name and Remove on one line, centred; the
   certificate's file input as wide as it needs. */
.comp-qualification { display: flex; align-items: center; gap: 0.5rem; }
.comp-qualification .button { height: auto; padding-top: 0; padding-bottom: 0; }
.input.comp-file { width: auto; max-width: 100%; height: auto; padding: 0.2rem; }
/* The club's Members and a coach's Gymnasts: a row's cells on one line. */
#members td, #gymnasts td { vertical-align: middle; }
.comp-table td.comp-wrap { white-space: normal; min-width: 14rem; }
.comp-setup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-bottom: 0.4rem; }
.comp-setup-row .input:not(.comp-num) { width: auto; max-width: 11rem; }
/* Blocked time (warm-up, lunch) on the timetable: a light row, not a card. */
.comp-block { padding: 0.35rem 0.75rem; background: transparent; box-shadow: none; border: 1px dashed #d5d5d5; font-size: 0.9rem; }
.comp-block > strong { font-weight: 600; }
.comp-flight-moves { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; margin-top: 0.5rem; }
.comp-flight-moves > details { margin: 0; }
.comp-flight-moves > details[open] { flex-basis: 100%; }

/* --- My competition (views/my.templ) --- */
.comp-my-flight { border-left: 3px solid #485fc7; padding-left: 0.75rem; }
.comp-mine { box-shadow: 0 0 0 2px #485fc7; }

/* Recorders' score sheets (views/timetable.templ ScorePrint): room to write. */
.comp-score-table td, .comp-score-table th { font-size: 0.8rem; padding: 0.35rem 0.3rem; vertical-align: middle; }
.comp-score-table tbody td { height: 2.2rem; }
.comp-score-mark { min-width: 2.4rem; text-align: center; }
.comp-score-total { min-width: 3.2rem; font-weight: 600; background: #f5f5f5; }
.comp-score-flight { display: none; }
@media print {
  .comp-score-total { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* The whole width of the paper, not the screen's column, and no scroll box
     to cut the last columns (Total, Place) off. */
  .comp-page .container { max-width: none !important; width: auto !important; }
  .comp-sheet .table-container { overflow: visible !important; border: 0 !important; box-shadow: none !important; }
  .comp-score-mark { min-width: 1.9rem; }
  .comp-score-total { min-width: 2.6rem; }
  .comp-score-flight { display: table-row; }
  .comp-score-heading { display: none; }
}
/* Recording a payment (views/fees.templ): amount, note and button in a row. */
.comp-pay-form { display: flex; gap: 0.3rem; align-items: center; }
.comp-pay-form .comp-num { width: 5.5rem; }
.comp-pay-form input[name="note"] { width: 9rem; }
/* On a phone the payment's fields wrap, the note a line of its own, so Record
   stays on the screen. */
@media screen and (max-width: 768px) {
  .comp-pay-form { flex-wrap: wrap; }
  .comp-pay-form input[name="note"] { flex: 1 1 100%; width: auto; }
}
/* Fees: Record a payment opens under the row's Invoice, and a payment's Remove sits on
   its line of text rather than dropping below it. An invoice's amounts never wrap. */
.comp-pay-cell .comp-opens { margin: 0.25rem 0 0; }
.comp-pay-cell .comp-opens-form { margin-bottom: 0.25rem; }
.comp-inline-button { height: auto; vertical-align: baseline; padding-left: 0.3em; padding-right: 0.3em; }
.comp-nowrap { white-space: nowrap; }
/* Check-in and scratches on the day (views/day.templ, the printed sheets). */
.comp-scratched { text-decoration: line-through; color: #6b6b6b; }
/* The day page's notice stays in view, as the page no longer jumps to the top to show it. */
.comp-day-notice { position: sticky; top: 0; z-index: 20; }
.comp-checkin-row { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; padding: 0.35rem 0; border-top: 1px solid #eee; }
.comp-checkin-row .comp-checkin-name { flex: 1 1 7rem; }
.comp-checkin-row form { display: flex; gap: 0.3rem; margin: 0; }
.comp-checkin-row .comp-panel-name { flex: 1 1 8rem; }
.comp-notify { flex: 1 1 100%; }
.comp-checkin-row .comp-notify form { flex-wrap: wrap; align-items: center; margin-top: 0.3rem; }
.comp-notify .input { width: 14rem; max-width: 100%; }
/* Everything to tap on On the day is at least 40px tall: it's tapped on a phone, in a
   hurry, between rows of names. Notify is a box of its own, set apart from the row's
   Here and Scratched so it isn't tapped by mistake. */
.comp-day-tabs a, .comp-day-links .button, #day-areas .button, #day-warnings .button, .comp-tap-link { min-height: 2.5rem; }
.comp-tap-link { display: inline-flex; align-items: center; }
#day-areas .comp-checkin > summary, #day-areas .comp-correct > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-height: 2.5rem; }
/* Correct the times: Started, Finished and Save in a row, wrapping on a phone. */
.comp-correct-times { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; }
.comp-correct-times .input { min-height: 2.5rem; width: 8rem; }
/* A tap kept on the phone until the signal is back (static/js/taps.js). */
.comp-tap-note { flex-basis: 100%; margin-top: 0; }
.comp-notify > summary { min-height: 2.5rem; margin: 0.5rem 0 0.25rem; }
.comp-notify .input { min-height: 2.5rem; }
.comp-notify .checkbox { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.5rem; }
/* The venue screen (views/screen.templ), for a TV across a hall: black on white, each
   area in its own colour (the same on every screen and day), filling the screen. Text
   scales with the screen's width, and the cards share the height left by the header. */
.screen-html { font-size: clamp(14px, 1.05vw, 40px); }
.screen-body { background: #fff; color: #111; margin: 0; }
.screen-main { box-sizing: border-box; height: 100vh; overflow: hidden; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.9rem 1.2rem; }
.screen-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1.5rem; border-bottom: 4px solid #111; padding-bottom: 0.4rem; }
.screen-title { font-size: 2rem; font-weight: 700; line-height: 1.15; }
.screen-clock { font-size: 3.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.screen-notice { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.8rem; font-weight: 700; background: #ffe08a; border: 3px solid #111; border-radius: 0.5rem; padding: 0.4rem 0.9rem; margin: 0; }
.screen-notices { display: grid; }
.screen-notices > .screen-notice { grid-area: 1 / 1; }
.screen-notice[hidden] { display: flex; visibility: hidden; }
.screen-notice-count { flex-shrink: 0; font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.screen-stale { font-size: 1.3rem; font-weight: 700; background: #111; color: #fff; border-radius: 0.4rem; padding: 0.3rem 0.8rem; margin: 0; }
.screen-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(var(--screen-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--screen-rows), minmax(0, 1fr)); gap: 0.9rem; }
.screen-card { display: flex; flex-direction: column; border: 3px solid var(--screen-band); border-radius: 0.6rem; overflow: hidden; min-height: 0; }
.screen-band { background: var(--screen-band); color: var(--screen-ink); }
.screen-card > .screen-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.8rem; padding: 0.35rem 0.9rem; }
.screen-area { font-size: 2em; font-weight: 800; line-height: 1.1; margin: 0; color: inherit; }
.screen-late { font-size: 1.1em; font-weight: 700; background: #fff; color: #111; border-radius: 0.3rem; padding: 0.05rem 0.5rem; }
.screen-late.is-behind { background: #ffe08a; }
.screen-part { padding: 0.5rem 0.9rem 0.6rem; min-height: 0; overflow: hidden; }
.screen-next { border-top: 2px solid #ddd; background: #f6f6f6; flex: 0 1 auto; }
.screen-card > .screen-part:first-of-type { flex: 1 1 auto; }
.screen-card > .screen-part { flex-basis: auto; }
.screen-label { font-size: 0.9em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #444; margin: 0 0 0.1rem; }
.screen-flight { font-size: 1.6em; font-weight: 800; line-height: 1.15; margin: 0; }
.screen-sub { font-size: 1em; color: #444; margin: 0.1rem 0 0; }
.screen-names { list-style: none; margin: 0.4rem 0 0; padding: 0; column-gap: 1.2rem; font-size: 1.15em; line-height: 1.3; }
/* A name never wraps or shortens; its club takes what room is left. */
.screen-names li { break-inside: avoid; display: flex; align-items: baseline; gap: 0.4em; white-space: nowrap; }
.screen-name { flex: 0 0 auto; }
.screen-names li[hidden] { display: none; }
.screen-no { flex: 0 0 auto; display: inline-block; min-width: 1.5em; text-align: right; font-weight: 800; color: #555; font-variant-numeric: tabular-nums; }
.screen-names .comp-scratched { color: #777; }
.screen-club { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.75em; color: #555; }
.screen-more { color: #555; }
.screen-next .screen-names { font-size: 1em; }
/* Fewer areas, bigger text: the cards' text scales together. */
.screen-size-1 .screen-card { font-size: 1.5rem; }
.screen-size-2 .screen-card { font-size: 1.2rem; }
.screen-size-3 .screen-card { font-size: 1.05rem; }
.screen-size-4 .screen-card { font-size: 0.95rem; }
.screen-size-1 .screen-names { columns: 2; }
/* In two rows the cards are wide and short: Now and Next sit side by side, each with
   the card's full height. */
.screen-rows-2 .screen-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.screen-rows-2 .screen-card > .screen-band { grid-column: 1 / -1; }
.screen-rows-2 .screen-next { border-top: 0; border-left: 2px solid #ddd; }
/* On a phone the screen is a page to scroll: one card under another, Now above Next,
   an area's name on one line, and a club under its gymnast's name rather than cut off. */
@media screen and (max-width: 600px) {
    .screen-main { height: auto; overflow: visible; }
    .screen-grid { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .screen-card, .screen-rows-2 .screen-card { display: flex; flex-direction: column; }
    .screen-rows-2 .screen-next { border-left: 0; border-top: 2px solid #ddd; }
    .screen-area { white-space: nowrap; }
    .screen-grid .screen-names { columns: 1; }
    .screen-names li { flex-wrap: wrap; white-space: normal; }
    .screen-club { flex-basis: 100%; padding-left: 1.9em; overflow: visible; }
}
.screen-strips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.screen-strip { display: flex; align-items: center; gap: 0.8rem; font-size: 1.3rem; border: 3px solid var(--screen-band); border-radius: 0.5rem; overflow: hidden; padding-right: 0.9rem; }
.screen-strip > .screen-band { padding: 0.3rem 0.8rem; align-self: stretch; display: flex; align-items: center; }
/* The areas' colours: strong enough to tell apart across a hall, each with text that
   reads on it. */
.screen-colour-0 { --screen-band: #0b5cad; --screen-ink: #fff; }
.screen-colour-1 { --screen-band: #c2410c; --screen-ink: #fff; }
.screen-colour-2 { --screen-band: #047857; --screen-ink: #fff; }
.screen-colour-3 { --screen-band: #7e22ce; --screen-ink: #fff; }
.screen-colour-4 { --screen-band: #f2b705; --screen-ink: #111; }
.screen-colour-5 { --screen-band: #be185d; --screen-ink: #fff; }
.screen-colour-6 { --screen-band: #38bdf8; --screen-ink: #111; }
.screen-colour-7 { --screen-band: #3f3f46; --screen-ink: #fff; }
.screen-empty { font-size: 2rem; text-align: center; margin-top: 3rem; }
/* Who's on now, once the marshal taps through: the biggest thing on the card, on a
   light wash of the area's colour, then the next two. Sizes are in em, so the card's
   fitting scales them with everything else. */
.screen-up { margin: 0.5rem 0 0; }
.screen-up > .screen-label:first-child { margin-bottom: 0.15rem; }
.screen-up-name { font-size: 1.9em; font-weight: 800; line-height: 1.1; margin: 0; padding: 0.15em 0.35em; border-left: 0.3em solid var(--screen-band); background: #f3f4f6; border-radius: 0.2em; }
.screen-up-detail { font-size: 1em; color: #444; margin: 0.15rem 0 0.5rem; }
.screen-up-next { font-size: 1.3em; line-height: 1.35; margin: 0; padding: 0; list-style: none; }
.screen-up-next li { display: flex; align-items: baseline; gap: 0.5em; white-space: nowrap; }
.screen-up-next .screen-up-next-name { flex: 0 0 auto; font-weight: 700; }
.screen-up-next .screen-up-detail { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.75em; margin: 0; }
/* The menu at the top of competition and club pages (views/menu.templ): the
   sections, then the current section's pages. Bulma's tabs scroll sideways
   on a narrow screen. */
.comp-menu .tabs a { white-space: nowrap; }
.comp-menu .comp-submenu { margin-top: 0.5rem; }
.comp-menu .comp-submenu ul { border-bottom: none; }
/* A section's pages scroll sideways on a phone, as the sections do, the one
   open in view and the edge with more faded (static/js/tables.js), rather
   than wrapping into ragged rows (the timetable has seven). */
.comp-menu .comp-submenu ul { justify-content: flex-start; }
/* A section's pages are a plain row: no line under them but the current one's, whatever
   their badges do to the row's height. */
.comp-menu .comp-submenu a { border-bottom-color: transparent; }
.comp-menu .comp-submenu li.is-active a { border-bottom-color: #485fc7; color: #485fc7; font-weight: 600; }
/* A member's pages (views/clubs.templ): the competitions as rows to open, and
   each discipline's entry as a one-line row that opens to its card. */
.comp-member-row { display: block; margin-bottom: 0.75rem; }
.comp-member-row:hover { box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.15), 0 0 0 1px #485fc7; }
.comp-event-row { margin-bottom: 0.75rem; }
.comp-event-row > summary { cursor: pointer; }
/* On a phone, tighter tabs so four sections fit without scrolling sideways. */
@media (max-width: 480px) {
    .comp-menu .tabs:not(.comp-submenu) a { padding: 0.5em 0.55em; font-size: 0.92rem; }
    .comp-menu .tabs:not(.comp-submenu) .comp-badge-word { display: none; }
}
/* One link, several roles (views/roles.templ): a person's roles as toggle
   tabs above the page's own menu, scrolling sideways on a narrow screen; and
   their other links on their details, each with Undo. */
.role-tabs .tabs a { white-space: nowrap; }
.comp-other-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid #ededed; padding: 0.25rem 0; }
.comp-other-link span { min-width: 0; overflow-wrap: anywhere; }
/* The Feedback button at the foot of a competition's pages (views/feedback.templ): small
   and out of the way, but a full 40px to tap. Without JavaScript the page comes back at
   #feedback-sent, which shows the thanks. */
.comp-feedback-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.comp-feedback-item.is-done { opacity: 0.6; }
/* Search and filters on lists of people (views/lists.templ): the name search, then a
   select for each filter, wrapping onto more lines on a phone, where the search takes
   the whole first line and the selects share the rest. */
.comp-list-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.comp-list-controls .comp-list-search { flex: 1 1 14rem; max-width: 22rem; }
.comp-list-controls .select, .comp-list-controls .select select { max-width: 100%; }
/* Filters under a button: a column of them in its panel, each full width. */
.comp-list-filter-panel { display: grid; gap: 0.5rem; padding: 0.6rem; min-width: 15rem; }
.comp-list-filter-panel .select, .comp-list-filter-panel .select select { width: 100%; }
.comp-list-count { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 1.9rem; }
.comp-list-clear { height: auto; padding: 0 0.25rem; }
/* The filters chosen, after the count: each a chip, its whole width taking it off. */
.comp-list-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.comp-list-chips:empty { display: none; }
.comp-list-chip { border: 0; cursor: pointer; font-family: inherit; text-decoration: none; min-height: 1.75rem; }
.comp-list-chip:hover { filter: brightness(0.95); }
@media screen and (max-width: 768px) {
  .comp-list-controls .comp-list-search { flex-basis: 100%; max-width: none; }
  .comp-list-controls .select { flex: 1 1 calc(50% - 0.25rem); }
  .comp-list-controls .select select { width: 100%; }
}

/* Contrast: Bulma's turquoise (primary) and green (success) are too light for
   white text (1.95:1 and 2.1:1). Darker shades of the same hues reach 5.3:1
   for white on them, and for them as text on white. */
.button.is-primary:not(.is-light):not(.is-outlined), .tag.is-primary:not(.is-light), .notification.is-primary:not(.is-light) { background-color: #00796b; color: #fff; }
.button.is-primary:not(.is-light):not(.is-outlined):hover, .button.is-primary:not(.is-light):not(.is-outlined).is-hovered { background-color: #006b5c; }
.button.is-primary:not(.is-light):not(.is-outlined):active, .button.is-primary:not(.is-light):not(.is-outlined).is-active { background-color: #005f52; }
.button.is-primary.is-outlined { border-color: #00796b; color: #00796b; }
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { background-color: #00796b; border-color: #00796b; color: #fff; }
.button.is-primary[disabled], fieldset[disabled] .button.is-primary { background-color: #00796b; }
.button.is-success:not(.is-light):not(.is-outlined), .tag.is-success:not(.is-light), .notification.is-success:not(.is-light) { background-color: #257953; color: #fff; }
.button.is-success:not(.is-light):not(.is-outlined):hover, .button.is-success:not(.is-light):not(.is-outlined).is-hovered { background-color: #1d6b48; }
.button.is-success:not(.is-light):not(.is-outlined):active, .button.is-success:not(.is-light):not(.is-outlined).is-active { background-color: #185c3d; }
.button.is-success[disabled], fieldset[disabled] .button.is-success { background-color: #257953; }
.has-text-primary { color: #00796b !important; }
.has-text-success { color: #257953 !important; }

/* Wide tables on a phone (class comp-stack): each row becomes a card, the first cell
   its title and each other cell a line labelled from its data-label, so problems and
   row actions don't sit off to the right. Rows the list search hides stay hidden. */
@media screen and (max-width: 768px) {
  table.comp-stack, table.comp-stack > tbody, table.comp-stack > tbody > tr, table.comp-stack > tbody > tr > td { display: block; width: 100%; }
  table.comp-stack > thead { display: none; }
  table.comp-stack > tbody > tr { border: 1px solid #dbdbdb; border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
  table.comp-stack > tbody > tr[hidden] { display: none; }
  table.comp-stack > tbody > tr > td { border: 0; padding: 0.15rem 0; white-space: normal; min-width: 0; }
  table.comp-stack > tbody > tr > td:first-child, table.comp-stack > tbody > tr > td.comp-stack-title { font-weight: 600; }
  /* A tick box first (to pick rows for an action) sits beside the title. */
  table.comp-stack > tbody > tr > td.comp-stack-tick { float: right; width: auto; padding: 0; }
  table.comp-stack > tbody > tr > td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: #555; }
  table.comp-stack > tbody > tr > td:empty { display: none; }
  table.comp-stack > tbody > tr > td[data-label] > form { display: inline-block; vertical-align: middle; }
  table.comp-stack > tbody > tr > td.has-text-right { text-align: left !important; }
  .table-container:has(> table.comp-stack) { overflow: visible; }
}

/* One palette for states and roles (views/status.templ). Each state has a text colour
   and a background, each role one colour; they're the only colours that mean a state or
   a role, on every page. static/contrast_test.go checks each reads at 4.5:1 or better. */
:root {
  --state-not-yet-ink: #4a4a4a;     --state-not-yet-bg: #eeeeee;
  --state-in-progress-ink: #1d4f91; --state-in-progress-bg: #e6effa;
  --state-done-ink: #1d6b48;        --state-done-bg: #e3f3ea;
  --state-attention-ink: #7a4a00;   --state-attention-bg: #fff1d1;
  --state-stopped-ink: #9b1c1c;     --state-stopped-bg: #fde8e8;
  --role-gymnast: #0f6b6b;
  --role-coach: #6b3fa0;
  --role-club: #5c5a1a;
  --role-organiser: #3b4a5e;
}
/* A long chip wraps inside the space it has rather than running off a phone's screen. */
/* Never smaller than 12px, even inside small text. */
.chip { display: inline-flex; align-items: baseline; gap: 0.3em; max-width: 100%; font-size: max(0.8em, 0.75rem); font-weight: 600; line-height: 1.4; padding: 0.1em 0.6em; border-radius: 0.8em; overflow-wrap: anywhere; vertical-align: baseline; }
/* A chip after a name or another chip keeps a gap from it; in a flex row, the row's gap
   does that instead. */
* + .chip { margin-left: 0.3em; }
#day-areas .comp-checkin > summary > .chip { margin-left: 0; }
.chip-state-not-yet { color: var(--state-not-yet-ink); background: var(--state-not-yet-bg); }
.chip-state-in-progress { color: var(--state-in-progress-ink); background: var(--state-in-progress-bg); }
.chip-state-done { color: var(--state-done-ink); background: var(--state-done-bg); }
.chip-state-attention { color: var(--state-attention-ink); background: var(--state-attention-bg); }
.chip-state-stopped { color: var(--state-stopped-ink); background: var(--state-stopped-bg); }
/* Role chips are outlined, so a role never looks like a state even without colour. */
.chip-who { background: #fff; border: 1.5px solid currentColor; padding: 0.05em 0.55em; }
.chip-who .chip-name { font-weight: 400; }
/* A chip that opens the person's page: the name underlined, as a link. */
a.chip-link .chip-name-text { text-decoration: underline; text-underline-offset: 0.15em; }
a.chip-link:hover { background: #f5f5ff; }
.chip-who-gymnast { color: var(--role-gymnast); }
.chip-who-coach { color: var(--role-coach); }
.chip-who-club { color: var(--role-club); }
.chip-who-organiser { color: var(--role-organiser); }
/* Skill tracking (ADR 0011): a row per skill, with the gymnast's and a
   coach's marks, each a role chip and a state chip (views/status.templ). */
.skill-mark { border-left: 4px solid #e5e5e5; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; background: #fafafa; border-radius: 4px; }
.skill-sides { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.skill-side { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; }
.skill-mark-buttons { margin-top: 0.4rem; }
.skill-mark-buttons .button { min-height: 2.5rem; }

/* On the day: each area as a card on the overview, with the one tap that
   comes next; its own page has the flight it's on in full, a section each
   for check-in and the panel, then its later and finished flights, closed. */
.comp-day-card .title a { color: inherit; }
.comp-day-card-flight { border-top: 1px solid #ededed; padding-top: 0.75rem; margin-top: 0.5rem; }
.comp-day-card .comp-day-flight-taps, .comp-day-card .comp-up .buttons { margin-bottom: 0; }
/* Cards side by side are as tall as the row, with each one's tap and Open at the
   foot, so they line up however long a flight's name is. */
#day-areas > .column { display: flex; flex-direction: column; }
#day-areas .comp-day-card { flex: 1 0 auto; display: flex; flex-direction: column; }
#day-areas .comp-day-card-flight { flex: 1 0 auto; display: flex; flex-direction: column; }
#day-areas .comp-day-card-flight > :last-child:not(:first-child) { margin-top: auto; }
.comp-day-people > summary { display: none; }
.comp-day-people[open] { margin-top: 0.75rem; border-top: 1px solid #ededed; padding-top: 0.5rem; }
.comp-day-person { display: block; padding: 0.2rem 0; }
.comp-day-now { border: 2px solid var(--state-in-progress-ink, #3e56c4); }
.comp-day-section { margin-top: 1rem; }
.comp-day-section-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.comp-day-section-title .chip { margin-left: 0.4rem; }
.comp-day-flight-taps { margin-top: 1rem; }
.comp-day-other > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.comp-day-other > summary .chip { margin-left: 0; }

/* A person's kept requirements (ADR 0013): each a row, its rules beneath its
   name, Take off at the right. */
.comp-kept { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid #ededed; }
.comp-kept-name { flex: 1 1 auto; }
.comp-kept-name ul { list-style: disc; margin-left: 1.25rem; }
/* Requirements written beside the routine (views.requirementsWriter). */
.requirements-writer { margin: 0.5rem 0 1rem; border: 1px solid #485fc7; }
.requirements-writer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.75rem; }
.rule-card-title .chip { margin-left: 0.4rem; }
/* Start from a set routine (a club's Levels): a long list, scrolling in its panel. */
.comp-level-sets { max-height: 22rem; overflow-y: auto; }
.comp-level-sets-head { font-size: 0.75rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.5rem 0.9rem 0.2rem; margin: 0; }
/* The last routine on: Finished in Next gymnast's place, Back beside it. */
.comp-up-last { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.comp-up-last .buttons, .comp-up-last .buttons .button { margin-bottom: 0; }
/* Wide tables (static/js/tables.js): a column hidden, sized or clipped as the
   viewer set it with Columns. Their edges fade where there's more to scroll
   (the shared look's scroll fade, at the end of this file). */
table [hidden] { display: none !important; }
table[data-table-view] th { position: relative; }
.comp-col-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; }
/* The last column's grip stays inside the table, which would otherwise scroll by it. */
th:last-child > .comp-col-grip { right: 0; }
.comp-col-grip::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 1px; background: #c8c8c8; }
th:hover > .comp-col-grip::after { background: #485fc7; width: 2px; }
@media screen and (max-width: 768px) { .comp-col-grip { display: none; } }
@media screen and (min-width: 769px) {
  table.is-sized-view { table-layout: fixed; max-width: none; }
  table.is-clipped-view td, table.is-clipped-view th, .comp-table.is-clipped-view td:nth-child(n) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.is-sized-view td { overflow-wrap: anywhere; }
}
.comp-table-menu { min-width: 16rem; padding: 0.5rem 0.9rem; }
.comp-table-menu-head { font-size: 0.75rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.comp-table-menu-row { display: flex; align-items: center; gap: 0.4rem; min-height: 2rem; }
.comp-table-menu-clip { margin-top: 0.4rem; border-top: 1px solid #eee; padding-top: 0.4rem; }
.comp-table-menu-help { font-size: 0.75rem; color: #555; margin: 0.3rem 0; }
.comp-table-menu [data-table-reset] { padding-left: 0; }
/* On a phone the table is cards (comp-stack): nothing to clip or drag. */
@media screen and (max-width: 768px) { .comp-table-menu-clip, .comp-table-menu-help { display: none; } }
/* A row a link opened (a coach from their chip): picked out for a moment. */
.comp-target:target, .comp-picked { animation: comp-target 2.5s ease-out; }
@keyframes comp-target { from { background: #fff3c4; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .comp-target:target, .comp-picked { animation: none; background: #fff8dd; } }
/* Clear of a notice that stays in sight above it (comp-sticky-notice). */
.comp-target { scroll-margin-top: 6rem; }
a > .chip { cursor: pointer; }
a:hover > .chip { text-decoration: underline; }
/* A club level's line, folded to its name (views.ruleCard): Change opens it. */
.rule-card-body > summary { margin-top: -0.25rem; color: #485fc7; }
.rule-card-body[open] > summary { margin-bottom: 0.5rem; }
/* A searchable list (static/js/selectsearch.js): a search box over its matches. */
.select-search { position: relative; margin-bottom: 0.35rem; max-width: 30rem; }
.select-search-list { position: absolute; left: 0; right: 0; top: calc(100% + 0.2rem); z-index: 30; max-height: 18rem; overflow-y: auto; background: #fff; border: 1px solid #dbdbdb; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); padding: 0.25rem 0; }
.select-search-option { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; width: 100%; padding: 0.4rem 0.75rem; border: 0; background: none; font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.select-search-option:hover, .select-search-option:focus { background: #eef1fb; }
.select-search-group { font-size: 0.75rem; color: #555; white-space: nowrap; }
.select-search-none { font-size: 0.85rem; color: #555; padding: 0.4rem 0.75rem; margin: 0; }
/* The requirements editor redraws itself by replacing its form (htmx). The
   browser's scroll anchoring then held the page to something below it, so
   typing in a field jumped to the bottom: no anchoring while there's one. */
html:has(.set-editor) { overflow-anchor: none; }
/* Another skill that counts too, under the first (views.matcherFields). */
.matcher-or > .matcher { border-color: #c5cdf0; }
/* Requirements written for a level's exercise, under the level editor. */
.level-writer { margin-top: 1rem; padding: 0.75rem; border: 1px solid #485fc7; border-radius: 8px; scroll-margin-top: 4rem; } /* clear of the editor's sticky head */
/* A set routine built on the requirements page (setRoutineMaker): its skills, in order. */
.set-routine-skills { margin: 0.25rem 0 0.5rem 1.25rem; }
.set-routine-skills li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.2rem 0; }
.set-routine-skills .buttons { margin-left: auto; }
/* No messages: no box, so its line doesn't sit alone above the checks. */
.validation-messages:not(:has(*)) { display: none; }
/* The requirements editor under Check against: its dropdowns fill their fields
   (Check against's own are kept narrow), and its tick boxes have a gap. */
.requirements-writer .select select, .requirements-writer .select.is-fullwidth select { max-width: none; }
.requirements-writer .select.is-fullwidth select { width: 100%; }
.set-scoring .checkbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
/* On a phone the skill picker's tabs wrap, rather than running off the side unseen. */
@media screen and (max-width: 768px) { .picker-tabs { flex-wrap: wrap; overflow-x: visible; } }

/* The entries removed and on hold (views/dashboard.templ): rows that wrap
   on a phone rather than a table squeezed into one-word columns. */
.comp-removed { margin: 0; list-style: none; }
.comp-removed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid #ededed; }
.comp-removed-who { flex: 1 1 12rem; min-width: 0; }
.comp-removed-who a { margin-right: 0.35rem; }
.comp-removed-state { flex: 2 1 16rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.comp-removed-row > form { margin-left: auto; }
.comp-nowrap { white-space: nowrap; }

/* Dates and times are short: as wide as they need, not the whole row. */
input.input[type="date"], input.input[type="time"] { width: auto; max-width: 100%; }

/* Compare, printed: the two routines, not the choosers or the way back. */
@media print {
  .compare-choices, .compare-back { display: none; }
}

/* The set routine maker (Requirements page): Add as wide as its words, not
   the whole card, so Save below isn't lost under it. */
.set-routine-maker #add-btn { width: auto; }

/* Entries ticked: a bar at the foot of the screen with Remove and Hold. */
.comp-tick-bar { position: fixed; left: 50%; transform: translateX(-50%); width: max-content; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; background: #fff; border: 1px solid #dbdbdb; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); max-width: calc(100% - 2rem); }
.comp-tick-bar .button { margin: 0; }

/* Fees: Record a payment opens as a panel under its button, so the table's
   columns don't move; on a phone, where rows are cards, in place. */
@media screen and (min-width: 769px) {
  .comp-pay-cell { position: relative; }
  .comp-pay-cell .comp-opens-form { position: absolute; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid #dbdbdb; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); padding: 0.6rem; min-width: 22rem; }
}

/* A coach's page: the gymnasts they coach, a row each. */
.comp-coached { margin: 0; }
.comp-coached li { padding: 0.35rem 0; border-bottom: 1px solid #ededed; }
.comp-coached .chip { margin-left: 0.4rem; }

/* The entries table on a wide screen: the gymnast's name (and tick)
   staying in view as the rest scrolls, and a problem's chip alone so rows
   stay one line. */
@media screen and (min-width: 769px) {
  .comp-entries .comp-problem-first { display: none; }
  .comp-entries td.comp-stack-title, .comp-entries th.comp-stack-title { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #ededed; }
  .comp-entries.has-ticks td.comp-stack-tick, .comp-entries.has-ticks th:first-child { position: sticky; left: 0; z-index: 2; background: #fff; width: 2.25rem; min-width: 2.25rem; }
  .comp-entries.has-ticks td.comp-stack-title, .comp-entries.has-ticks th.comp-stack-title { left: 2.25rem; }
  /* Narrow enough for Coach and Checked to be in sight at 1,300 px: headings
     of two words, a long club and a coach's chip and name wrap, and the
     problem's chip needs no more room than it takes. */
  .comp-entries th { white-space: normal; vertical-align: bottom; }
  .comp-entries td[data-label="Club"] { white-space: normal; min-width: 7rem; }
  .comp-entries td[data-label="Coach"] { white-space: normal; min-width: 9rem; }
  .comp-entries td.comp-problem-cell { min-width: 0; }
}

/* A notice that stays in sight while the page goes to where a change is. */
.comp-sticky-notice { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }

/* The timetable's areas on a day: one column each, side by side. */
.comp-tt-areas { display: grid; grid-template-columns: repeat(var(--areas), minmax(15rem, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.comp-tt-area { min-width: 0; }
@media screen and (max-width: 768px) { .comp-tt-areas { grid-template-columns: minmax(0, 1fr); } }
/* The fade's widths, registered so they can be animated (initial-value has
   to be in px: a rem one makes browsers drop the rule, and the fade snaps). */
@property --fade-left { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-right { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* Days: a button each above them (dayPick). On a phone they're tabs, one day
   shown; on a wider screen those chosen sit side by side, the row scrolling
   sideways (not each day) when they don't fit. A day's heading doesn't fold. */
.comp-tt-daypick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin: 1.25rem 0 0.25rem; }
.comp-tt-daybuttons, .comp-tt-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.comp-tt-scroll .button { min-width: 2.5rem; font-size: 1.1rem; line-height: 1; }
.comp-tt-daypick .button[aria-pressed="true"] { background: var(--state-in-progress-bg); border-color: var(--state-in-progress-ink); color: var(--state-in-progress-ink); font-weight: 600; }
.comp-tt-dayrow > .comp-tt-day:not([open]) { display: none; }
.comp-tt-day > summary { list-style: none; cursor: default; }
.comp-tt-day > summary::-webkit-details-marker { display: none; }
details.comp-tt-day > summary::before { content: none; }
@media screen and (min-width: 769px) {
  /* Where there's more to scroll, the row fades out at that edge; while it's
     being scrolled the fade steps aside quickly (is-scrolling), and once it
     stops eases back in, so nothing moves at the edge but the timetable.
     The fade is in the page's side margin: the row reaches into it by
     --room, padded back by as much, so at rest everything sits where it
     would and the fade covers only what has slid out of view. */
  .comp-tt-dayrow { display: flex; align-items: flex-start; gap: 2rem; overflow-x: auto; padding-bottom: 0.5rem;
    --room: 1.25rem; margin-inline: calc(-1 * var(--room)); padding-inline: var(--room);
    --fade-left: 0px; --fade-right: 0px; transition: --fade-left 0.6s ease-out, --fade-right 0.6s ease-out;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent); }
  .comp-tt-dayrow.has-more-left { --fade-left: var(--room); }
  .comp-tt-dayrow.has-more-right { --fade-right: var(--room); }
  .comp-tt-dayrow.is-scrolling { --fade-left: 0px; --fade-right: 0px; transition-duration: 0.15s; }
  @media (prefers-reduced-motion: reduce) { .comp-tt-dayrow, .comp-tt-dayrow.is-scrolling { transition: none; } }
  @media (min-width: 1024px) { .comp-tt-dayrow { --room: 2.5rem; } } /* the page's margin is 3rem here, 1.5rem below */
  .comp-tt-dayrow > .comp-tt-day { flex: 1 0 calc(var(--areas) * 15rem + (var(--areas) - 1) * 1rem); min-width: 0; }
  .comp-tt-dayrow .comp-tt-areas { overflow-x: visible; } /* the row scrolls, not each day */
  /* Room after the last day shown, so it scrolls to the left edge as the
     others do (--tail, set by dayPick when the days don't all fit). */
  .comp-tt-dayrow::after { content: ""; flex: 0 0 var(--tail, 0px); margin-left: -2rem; }
}

/* Nothing on now: "Now —" takes a line, and what's next the card's room. */
.screen-card > .screen-part.is-empty { flex: 0 0 auto; }
.screen-card:has(> .screen-part.is-empty) > .screen-next { flex: 1 1 auto; background: transparent; }

/* Notify sits beside the row's buttons, a line of its own only when open. */
.comp-notify:not([open]) { flex: 0 0 auto; }
.comp-notify:not([open]) > summary { margin: 0; }

/* Find a name on On the day: a card's people it found come first, under
   the area's name, above its flight. */
.comp-day-card { display: flex; flex-direction: column; }
.comp-day-card > h2 { order: -2; }
.comp-day-card > .comp-day-people[open] { order: -1; margin-bottom: 0.75rem; }
/* An action's button (no row naming it) keeps its name open, its arrow up,
   so two open side by side still say which is which. */
.comp-opens.comp-opens-action[open] > summary .comp-opens-label { display: inline; }
.comp-opens.comp-opens-action[open] > summary .comp-opens-close { display: none; }

/* The desk's To: each choice's controls only while it's chosen. */
form:has(input[name="to"][value="club"]:not(:checked)) .desk-to-club,
form:has(input[name="to"][value="flight"]:not(:checked)) .desk-to-flight,
form:has(input[name="to"][value="panel"]:not(:checked)) .desk-to-panel,
form:has(input[name="to"][value="people"]:not(:checked)) .desk-to-people { display: none; }
/* A stacked table's number boxes sit beside their labels. */
@media screen and (max-width: 768px) {
  table.comp-stack > tbody > tr > td > .comp-num { display: inline-block; width: 5rem; margin-left: 0.4rem; }
}
/* A seat a discipline doesn't have: a dash on a wide screen, left out on a phone. */
@media screen and (min-width: 769px) { .comp-panels td:empty::after { content: "—"; color: #999; } }

/* Simulate: its form as wide as reads well, each label by its box; a
   scenario's buttons spaced. */
.comp-sim-form { max-width: 44rem; }
.comp-sim-actions { gap: 0.4rem; }
.comp-sim-actions > form, .comp-sim-actions > .button { margin: 0 !important; }

/* A question on the builder's page (askUser), in place of the browser's own. */
.ask-card { width: calc(100% - 2rem); max-width: 28rem; }
.ask-card .modal-card-body { border-radius: 8px; }

/* A rule folded to its name (a club level's line, or one of several) is one
   compact row: its name, Change, and the move and remove buttons. */
.rule-card:has(> .rule-card-body:not([open])) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.35rem 0.6rem; margin-bottom: 0.35rem; }
.rule-card:has(> .rule-card-body:not([open])) > .rule-card-head { flex: 1 1 16rem; order: 0; margin-bottom: 0; align-items: center; }
.rule-card:has(> .rule-card-body:not([open])) > .rule-card-body { order: 1; }
.rule-card:has(> .rule-card-body:not([open])) > .rule-card-body > summary { margin-top: 0; }

/* A link ("this, then this"): its steps without boxes of their own, and one
   link without the box an option of several has. */
.option-group.is-only { border: 0; background: none; padding: 0; margin-bottom: 0.25rem; }
.option-group .matcher { border: 0; border-left: 3px solid #dbe0f5; border-radius: 0; padding: 0.25rem 0 0.25rem 0.6rem; margin: 0.25rem 0; }
.item-wording { margin-top: 0; }

/* Video proof: the skills to film are faint until "Video of some skills" is
   chosen (ticking one chooses it). */
.comp-video:has(input[name="video"][value="skills"]:not(:checked)) .comp-video-skills { opacity: 0.55; }

/* The entries page's levels: a folded level is a line, not a heading's
   worth of space; an open one keeps room above it. */
.comp-dash-level > summary.comp-dash-level-head { margin: 0.35rem 0; }
.comp-dash-level[open] > summary.comp-dash-level-head { margin: 1.25rem 0 0.75rem; }

/* On a phone, an entry's card is short: its fields run on, several to a
   line, the name and tick on the first, the problem on a line of its own;
   a field with nothing to say ("–") is left out. */
@media screen and (max-width: 768px) {
  table.comp-entries.comp-stack > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; row-gap: 0.1rem; }
  table.comp-entries.comp-stack > tbody > tr > td { width: auto; flex: 0 1 auto; font-size: 0.875rem; }
  table.comp-entries.comp-stack > tbody > tr > td.comp-stack-title { flex: 1 1 calc(100% - 2.5rem); order: -2; font-size: 1rem; }
  table.comp-entries.comp-stack > tbody > tr > td.comp-stack-tick { float: none; order: -1; }
  table.comp-entries.comp-stack > tbody > tr > td.comp-problem-cell { flex-basis: 100%; }
  table.comp-entries.comp-stack > tbody > tr > td[data-label]::before { font-weight: 500; color: #6b6b6b; }
  table.comp-entries.comp-stack > tbody > tr > td:has(> .comp-none:only-child) { display: none; }
}

/* A judge's qualifications: Add opens its form below, a dropdown of its
   own (not nested in the offer's open box, whose styles it would take). */
.comp-judging-add > summary { list-style: none; }
.comp-judging-add > summary::-webkit-details-marker { display: none; }
.comp-judging-add[open] > .comp-opens-button::after { transform: rotate(180deg); }
.comp-opens[open] .comp-judging-add:not([open]) > .comp-opens-button::after { transform: none; }
.comp-judging-add > form { margin-top: 0.5rem; }

/* --- The shared look of the competition and club pages ---
   The rules are written down in knowledge/architecture/ui.md; these are the
   pieces every page uses. */

/* Width: every page has the same column, so the menu and heading sit in the
   same place on each, whatever is under them; a wide table or the day's
   areas scroll inside it. (Bulma's own widths are more specific.) */
.section.comp-page > .container:not(.is-max-desktop):not(.is-max-widescreen) { max-width: 84rem; }

/* The page's side margin, as --room: a scroller at the page's edge reaches
   into it, padded back by as much, so at rest nothing moves and its fade
   sits in the margin. None inside a box, a column or a form that opened,
   whose edges aren't the page's. */
.comp-page { --room: 0.75rem; }
@media screen and (min-width: 769px) { .comp-page { --room: 1.5rem; } }
@media screen and (min-width: 1024px) { .comp-page { --room: 3rem; } }
.comp-page :is(.box, .card, .column, .comp-opens-form, .comp-popup-panel, .modal, td, .comp-exercise) { --room: 0px; }

/* Scroll fade: a row of tabs, a wide table or the timetable's areas, wider
   than the screen, fades out at the edge where there's more (has-more-left,
   has-more-right, set by static/js/tables.js). While it's being scrolled
   the fade steps aside quickly (is-scrolling), and eases back once it
   stops. At least 1.25rem wide, so it shows on a phone's narrow margin. No
   grey bars, no snapping. */
.comp-page :is(.table-container, .tabs, .comp-tt-areas, .comp-tl-sheets) {
  max-width: none; margin-inline: calc(-1 * var(--room)); padding-inline: var(--room);
  --fade-left: 0px; --fade-right: 0px; transition: --fade-left 0.6s ease-out, --fade-right 0.6s ease-out;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
}
.comp-page :is(.table-container, .tabs, .comp-tt-areas, .comp-tl-sheets).has-more-left { --fade-left: max(var(--room), 1.25rem); }
.comp-page :is(.table-container, .tabs, .comp-tt-areas, .comp-tl-sheets).has-more-right { --fade-right: max(var(--room), 1.25rem); }
.comp-page :is(.table-container, .tabs, .comp-tt-areas, .comp-tl-sheets).is-scrolling { --fade-left: 0px; --fade-right: 0px; transition-duration: 0.15s; }
@media (prefers-reduced-motion: reduce) { .comp-page :is(.table-container, .tabs, .comp-tt-areas, .comp-tl-sheets) { transition: none; } }
/* A day's areas inside the timetable's row of days: the row scrolls and fades, not each day. */
.comp-page .comp-tt-dayrow .comp-tt-areas { margin-inline: 0; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
@media print { .comp-page :is(.table-container, .tabs, .comp-tt-areas, .comp-tl-sheets) { -webkit-mask-image: none; mask-image: none; margin-inline: 0; padding-inline: 0; } }

/* Buttons, by role (ui.md): the main action is-primary, ordinary ones plain,
   Change a comp-opens-button, Remove and Delete red text (is-text
   has-text-danger), quiet ones is-text. Red is Bulma's darker red, which
   reads at 5.7:1, white on it and it on white. */
.button.is-danger:not(.is-light):not(.is-outlined) { background-color: #cc0f35; color: #fff; }
.button.is-danger:not(.is-light):not(.is-outlined):hover { background-color: #b00d2d; }
.button.is-danger.is-outlined { border-color: #cc0f35; color: #cc0f35; }
.button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus { background-color: #cc0f35; border-color: #cc0f35; color: #fff; }
.button.is-text.has-text-danger:hover, .button.is-text.has-text-danger:focus { background-color: #feecf0; }
/* A button that sets a state (On the day's Here, Scratched, Missing) takes
   that state's colours from the palette. */
.button.is-state-done { color: var(--state-done-ink); background-color: var(--state-done-bg); border-color: transparent; }
.button.is-state-stopped { color: var(--state-stopped-ink); background-color: var(--state-stopped-bg); border-color: transparent; }
.button.is-state-done:hover, .button.is-state-stopped:hover { border-color: currentColor; }
/* Grey small text reads at 5.3:1 (Bulma's grey is 4.3:1). */
.has-text-grey { color: #6b6b6b !important; }

/* Things that open below show one arrow: a solid triangle in the text's
   colour, as a dropdown's (details > summary::before) and a button's
   (comp-opens-button::after) are; a list to choose from has it too. */
.comp-page .select:not(.is-multiple):not(.is-loading)::after { border: 0; border-radius: 0; width: 0.6em; height: 0.5em; margin-top: -0.25em; transform: none; background: #4a4a4a; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* A notice after a change (views/notice.templ): green, with × to put it away. */
.comp-notice { padding-right: 2.5rem; }

/* The way back, above the heading: an arrow and the page it goes to. */
.comp-back { margin-bottom: 0.75rem; }
.comp-back a { display: inline-flex; align-items: center; gap: 0.3em; }

/* Nothing to show yet: one line, in grey, the same size everywhere. */
.comp-empty { color: #6b6b6b; margin-bottom: 0.75rem; }

/* An entry's problems: an amber chip and the list, as on the entries page. */
.comp-problems { margin-bottom: 1rem; }
.comp-problems ul { list-style: disc; margin: 0.35rem 0 0 1.25rem; }

/* The levels to print cards from (views.CompetitionCards): rows of the page. */
.comp-card-levels { margin-bottom: 1rem; max-width: 32rem; }
.comp-card-levels li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem; padding: 0.4rem 0; border-bottom: 1px solid #ededed; }

/* On a phone everything tapped is big enough for a finger: small buttons
   36px tall, tick boxes 20px in a row 36px tall, a menu's rows 40px. */
@media screen and (max-width: 768px) {
  .comp-page .button.is-small:not(.comp-list-clear) { min-height: 2.25rem; }
  .comp-page input[type="checkbox"], .comp-page input[type="radio"] { width: 1.25rem; height: 1.25rem; }
  .comp-page label.checkbox, .comp-page label.radio { min-height: 2.25rem; display: inline-flex; align-items: center; gap: 0.4em; }
  .comp-page .checkbox.comp-check { align-items: flex-start; padding-top: 0.4rem; }
  .comp-page .checkbox.comp-check input { margin-top: 0; }
  .comp-page td.comp-stack-tick input { width: 1.5rem; height: 1.5rem; margin: 0.25rem; }
  .comp-popup-panel a { display: flex; align-items: center; min-height: 2.5rem; }
  .comp-table-menu-row, .comp-list-filter-panel .checkbox { min-height: 2.5rem; }
  .comp-back a { min-height: 2.25rem; }
}

/* Printed, a page is what it shows: no menu, tabs, buttons, way back or
   Feedback. */
@media print {
  .comp-menu, .role-tabs, .comp-offline, .comp-back, .comp-tick-bar, .comp-list-controls,
  .comp-page .button, .comp-page .delete, .comp-page summary.button, .comp-tt-daypick { display: none !important; }
  .comp-sticky-notice, .comp-day-notice { position: static; box-shadow: none; }
  .comp-page.section { padding: 0; }
}

/* An entry's sign-off in a row (views.signoffCell): the coach's name and
   what they did, on one line; an asterisk for a coach not approved, which
   the key under the table explains. A problem's chip stays one line too. */
.comp-signoff { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4em; }
.comp-signoff > .chip { margin-left: 0; }
.comp-unapproved { text-decoration: none; cursor: help; font-weight: 700; color: var(--state-attention-ink); margin-left: 0.1em; }
.comp-key { display: block; font-size: 0.875rem; color: #6b6b6b; margin: 0.25rem 0 0.75rem; }
@media screen and (min-width: 769px) {
  .comp-entries .comp-signoff { flex-wrap: nowrap; white-space: nowrap; }
  .comp-entries td[data-label="Coach"] { white-space: nowrap; }
  .comp-entries td .chip { white-space: nowrap; overflow-wrap: normal; }
}

/* A row of tabs fades the same way, but by a white veil over its edge
   rather than a mask, with a small arrow in it: a row can end between two
   tabs at the screen's edge, leaving a mask nothing to fade. The veil sticks
   to the row's edge as it scrolls, and comes and goes as the fade does. */
.comp-page .tabs { -webkit-mask-image: none; mask-image: none; }
.comp-page .tabs::before, .comp-page .tabs::after { position: sticky; z-index: 1; flex: 0 0 1.75rem; display: flex; align-items: center;
  font-size: 1.2rem; line-height: 1; color: #4a4a4a; opacity: 0; transition: opacity 0.6s ease-out; pointer-events: none; }
.comp-page .tabs::before { content: "‹"; order: -1; left: calc(-1 * var(--room)); margin-right: -1.75rem; justify-content: flex-start; padding-left: 0.1rem;
  background: linear-gradient(to right, #fff 35%, rgba(255, 255, 255, 0)); }
.comp-page .tabs::after { content: "›"; right: calc(-1 * var(--room)); margin-left: -1.75rem; justify-content: flex-end; padding-right: 0.1rem;
  background: linear-gradient(to left, #fff 35%, rgba(255, 255, 255, 0)); }
.comp-page .tabs.has-more-left::before, .comp-page .tabs.has-more-right::after { opacity: 1; }
.comp-page .tabs.is-scrolling::before, .comp-page .tabs.is-scrolling::after { opacity: 0; transition-duration: 0.15s; }
@media (prefers-reduced-motion: reduce) { .comp-page .tabs::before, .comp-page .tabs::after { transition: none; } }

/* A discipline on a member's page: a heading, the size of the row's text. */
.comp-event-name { display: inline; font-size: 1rem; font-weight: 700; margin-right: 0.3em; }

/* Deleting a whole competition or club (comp-danger-zone): set apart by a red
   edge, its Delete button outlined red and the last one solid red, unlike the
   red-text removes of single things. */
.comp-danger-zone { border-left: 3px solid var(--state-stopped-ink); padding-left: 0.75rem; margin-top: 0.5rem; }
.comp-danger-zone .comp-opens-button { color: var(--state-stopped-ink); border-color: var(--state-stopped-ink); }
.comp-danger-zone .button.is-danger { background: var(--state-stopped-ink); border-color: var(--state-stopped-ink); color: #fff; }
.comp-type-delete-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.comp-type-delete-row .input { max-width: 12rem; }
/* An ask to remove something (views.Ask.Remove): a red edge, and the button
   outlined in the darker red, so it reads as removing, not a main action. */
.comp-ask.is-remove { border-left: 4px solid var(--state-stopped-ink); }
.comp-ask .button.is-danger.is-outlined { color: var(--state-stopped-ink); border-color: var(--state-stopped-ink); background: #fff; }
.comp-ask .button.is-danger.is-outlined:hover, .comp-ask .button.is-danger.is-outlined:focus { color: #fff; background: var(--state-stopped-ink); }

/* Tell the organiser (views/my.templ): what it's about, a list to tick,
   grouped by event for a comp sec or coach, scrolling when long; and the
   messages sent, with the organiser's replies. */
.comp-tell-about { max-height: 16rem; overflow: auto; border: 1px solid #dbdbdb; border-radius: 4px; padding: 0.4rem 0.6rem; }
.comp-tell-about .checkbox { display: flex; gap: 0.45rem; align-items: baseline; min-height: 1.9rem; padding: 0.15rem 0; }
.comp-tell-entry.is-grouped { padding-left: 1.4rem; }
.comp-tell-group + .comp-tell-group { border-top: 1px solid #f0f0f0; margin-top: 0.2rem; padding-top: 0.2rem; }
.comp-tell-sent { padding: 0.6rem 0; border-bottom: 1px solid #ededed; }
.comp-tell-sent:last-child { border-bottom: 0; }
.comp-tell-post { margin: 0.4rem 0 0 0.75rem; padding-left: 0.6rem; border-left: 3px solid #dbdbdb; }
.comp-tell-post.is-organiser { border-left-color: var(--state-in-progress-ink); }
.comp-concern-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.comp-concern-actions > details[open] { flex-basis: 100%; }