/* Practice Toolbox — session list, lane recorder and frame strip.
   Shared by the website and the mobile app, so everything here is sized in rem/% and
   the lane scales with its container rather than a fixed pixel width. */

.practice-toolbox {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── New session form ── */

.practice-new {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 14px;
    padding: 18px;
}

.practice-new-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #10131a;
}

.practice-new-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.practice-new-wide {
    grid-column: 1 / -1;
}

.practice-new label,
.practice-detail-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    color: #5b6377;
}

.practice-new input,
.practice-detail-grid input {
    border: 1px solid #d8dce6;
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 15px;
    color: #10131a;
    background: #fff;
    width: 100%;
}

.practice-new input:focus,
.practice-detail-grid input:focus {
    outline: none;
    border-color: #2f6bff;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .15);
}

/* ── Buttons ── */

.practice-btn {
    border: 1px solid #d8dce6;
    background: #fff;
    color: #10131a;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.practice-btn:disabled {
    opacity: .55;
    cursor: default;
}

.practice-btn-primary {
    background: #2f6bff;
    border-color: #2f6bff;
    color: #fff;
}

/* ── Session list ── */

.practice-session-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.practice-session-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 14px;
    overflow: hidden;
}

.practice-session-card.is-complete {
    border-left: 4px solid #2fa36b;
}

.practice-session-open {
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    padding: 14px 16px;
    cursor: pointer;
}

.practice-session-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.practice-session-title {
    font-size: 16px;
    font-weight: 700;
    color: #10131a;
}

.practice-session-date {
    font-size: 13px;
    color: #7b8497;
    white-space: nowrap;
}

.practice-session-meta {
    font-size: 13px;
    color: #7b8497;
    margin-top: 3px;
}

.practice-session-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 9px;
    font-size: 13px;
    color: #5b6377;
}

.practice-session-stats strong {
    color: #10131a;
}

.practice-session-action {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 1px solid #eef0f4;
    background: none;
    color: #b6bdca;
    width: 46px;
    cursor: pointer;
    text-decoration: none;
}

.practice-session-action:hover {
    color: #2f6bff;
    background: #f5f8ff;
}

.practice-session-delete:hover {
    color: #c02a2a;
    background: #fdf4f4;
}

.practice-session-action:disabled {
    opacity: .45;
    cursor: default;
}

/* The card actions are icon-only, so a fetch in progress is shown on the icon itself. */
.practice-session-action.is-busy {
    color: #2f6bff;
    opacity: 1;
}

.practice-session-action.is-busy svg {
    animation: practice-export-pulse 1s ease-in-out infinite;
}

@keyframes practice-export-pulse {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

.practice-session-action svg {
    width: 18px;
    height: 18px;
}

/* ── Recorder page shell ── */

/* Wide enough for three lanes side by side on a desktop, and to stop the recorder feeling
   boxed in. The slider clips itself to the viewport on narrower screens. */
.practice-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

.practice-page .practice-editor {
    gap: 20px;
}

/* ── Editor shell ── */

/* The two rails either side of the lane graphic. Stated once here so anything that needs to
   line up with the lane, rather than with the card, can do the arithmetic from these. */
.practice-editor {
    --lane-rail-left: 81px;
    --lane-rail-right: 34px;
    --lane-width: 300px;
    --lane-card-width: 440px;
    --lane-body-gap: 10px;

    /* Height of the frame caption above the lane graphic. The rails clear it by this much so
       they start level with the lane itself, not with the caption. */
    --lane-caption-offset: 23px;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Header ──
   Navigation gets its own row so the title is never squeezed between two buttons. */

.practice-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e6e8ee;
}

.practice-header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
}

.practice-header-eyebrow {
    flex: 1;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9aa2b1;
}

.practice-header-main {
    min-width: 0;
}

.practice-header-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: #10131a;
}

.practice-header-subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    color: #7b8497;
}

.practice-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.practice-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8dce6;
    background: #fff;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 600;
    color: #5b6377;
    cursor: pointer;
    white-space: nowrap;
}

.practice-export:hover:not(:disabled) {
    background: #f2f6ff;
    border-color: #c3cee6;
    color: #2f6bff;
}

.practice-export:disabled {
    opacity: .6;
    cursor: default;
}

.practice-export svg {
    width: 15px;
    height: 15px;
}

/* On a phone the header row has no width to spare, so the export button keeps only its icon. */
@media (max-width: 560px) {
    .practice-export span {
        display: none;
    }

    .practice-export {
        padding: 7px 10px;
    }
}

.practice-complete-toggle {
    border: 1px solid #d8dce6;
    background: #fff;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.practice-complete-toggle.is-complete {
    background: #eaf7f0;
    border-color: #bfe4d1;
    color: #1e7a52;
}

.practice-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 13px;
    color: #5b6377;
}

.practice-tally strong {
    color: #10131a;
    font-size: 15px;
    margin-right: 3px;
}

/* ── Frame slider ──
   Three lanes on a grid: the frame being recorded is the middle column at every width. */

.practice-slider {
    /* Deliberately not a scroll container. Centring a scrolling track depends on its scroll
       position, and an overflowing centred flex row puts its left edge out of reach — both of
       which left the recorded lane off to one side. A grid centres it at every width instead,
       and swiping is a gesture (practice-slider.js) rather than a scroll. */
    padding: 4px 0 8px;
    overflow: hidden;
}

.practice-slider-track {
    display: grid;
    /* Equal flexible columns either side of the recorded lane: it is the middle one, always. */
    grid-template-columns: 1fr minmax(0, var(--lane-card-width)) 1fr;
    align-items: start;
    justify-items: center;
    gap: 18px;
}

.practice-slide {
    min-width: 0;
    width: 100%;
    max-width: var(--lane-card-width);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* The slides are replaced on every frame change (see _sliderTick), so these run each time —
   the same settle the slider used to show only when it ran out of frames at either end. */
.practice-slide.is-current {
    animation: practice-slide-enter .24s cubic-bezier(.2, .7, .3, 1);
}

.practice-slide.is-neighbour {
    /* The side columns are flexible, so a neighbour simply shrinks with the viewport. */
    max-width: 280px;
    opacity: .5;
    cursor: pointer;
    animation: practice-neighbour-enter .24s cubic-bezier(.2, .7, .3, 1);
    transition: opacity .18s ease;
}

.practice-slide.is-neighbour:hover {
    opacity: .7;
}

/* Holds the place of a neighbour that does not exist, keeping the recorded lane centred. */
.practice-slide-spacer {
    max-width: 280px;
    visibility: hidden;
    pointer-events: none;
}

@keyframes practice-slide-enter {
    from {
        opacity: 0;
        transform: scale(.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes practice-neighbour-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: .5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .practice-slide.is-current,
    .practice-slide.is-neighbour {
        animation: none;
    }
}

.practice-slide-label {
    text-align: left;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7b8497;
}

.practice-slide.is-current .practice-slide-label {
    color: #2f6bff;
}

/* ── Frame strip ── */

.frame-strip {
    display: flex;
    align-items: center;
    gap: 8px;
}

.frame-strip-nav {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid #d8dce6;
    border-radius: 8px;
    background: #fff;
    color: #5b6377;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.frame-strip-nav:disabled {
    opacity: .4;
    cursor: default;
}

.frame-strip-nav svg {
    width: 16px;
    height: 16px;
}

.frame-strip-rail {
    flex: 1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
}

.frame-chip {
    flex: 0 0 auto;
    width: 48px;
    border: 1px solid #d8dce6;
    border-radius: 10px;
    background: #fff;
    padding: 6px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.frame-chip.is-active {
    border-color: #2f6bff;
    box-shadow: 0 0 0 2px rgba(47, 107, 255, .18);
}

.frame-chip-number {
    font-size: 12px;
    color: #7b8497;
}

.frame-chip-result {
    font-size: 15px;
    font-weight: 700;
    color: #10131a;
}

.frame-chip.is-strike .frame-chip-result {
    color: #1e7a52;
}

.frame-chip.is-spare .frame-chip-result {
    color: #2f6bff;
}

.frame-chip.is-open .frame-chip-result {
    color: #a2560f;
}

.frame-chip-new {
    border-style: dashed;
}

/* ── Frame header ── */

.practice-frame-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.practice-frame-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #10131a;
}

.practice-frame-state {
    font-size: 12px;
    font-weight: 600;
    color: #7b8497;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: 6px;
}

.practice-throw-tabs {
    display: flex;
    gap: 6px;
}

.practice-throw-tab {
    border: 1px solid #d8dce6;
    background: #fff;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    color: #5b6377;
    cursor: pointer;
}

.practice-throw-tab.is-active {
    border-color: #2f6bff;
    color: #2f6bff;
    background: #f2f6ff;
}

.practice-throw-tab-pins {
    display: inline-block;
    margin-left: 6px;
    font-weight: 700;
    color: #10131a;
}

.practice-throw-add {
    border: 1px dashed #b6bdca;
    background: none;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    color: #5b6377;
    cursor: pointer;
}

/* ── The lane ── */

.practice-lane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.practice-lane-svg {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    touch-action: manipulation;
}

.lane-deck {
    fill: #10131a;
}

.lane-surface {
    fill: #c98b3f;
}

/* The approach outside the lane's left edge — only drawn for a shot whose foot was recorded
   past board 39, so it reads as ground the ball never touches. */
.lane-approach {
    fill: #3a2b1c;
}

/* The lane's own left edge, once there is something drawn beyond it. */
.lane-edge {
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 1.5;
}

.lane-board {
    stroke: rgba(0, 0, 0, .16);
    stroke-width: .6;
}

.lane-board.is-major {
    stroke: rgba(0, 0, 0, .38);
    stroke-width: 1.1;
}

.lane-arrow {
    fill: #6b3f13;
}

.lane-foul-line {
    stroke: #7d4a17;
    stroke-width: 3;
}

.lane-caption {
    fill: rgba(255, 255, 255, .55);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lane-pin-group {
    cursor: pointer;
}

.lane-pin-group.is-unavailable {
    cursor: default;
}

.lane-pin {
    fill: #f6f7f9;
    stroke: #d8dce6;
    stroke-width: 1.5;
}

.lane-pin-group.is-down .lane-pin {
    fill: #2a2f3a;
    stroke: #3d434f;
}

.lane-pin-group.is-unavailable .lane-pin {
    fill: #1a1d24;
    stroke: #262a33;
}

.lane-pin-label {
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    fill: #7b8497;
    pointer-events: none;
}

.lane-pin-group.is-standing .lane-pin-label {
    fill: #10131a;
}

.lane-path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-dasharray: 7 5;
    stroke-linecap: round;
    opacity: .85;
    pointer-events: none;
}

.lane-hit {
    fill: transparent;
    cursor: pointer;
}

.lane-hit:hover {
    fill: rgba(255, 255, 255, .22);
}

.lane-marker circle {
    stroke: #fff;
    stroke-width: 2;
}

.lane-marker text {
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    fill: #fff;
}

.lane-marker,
.lane-marker circle,
.lane-marker text {
    pointer-events: none;
}

.lane-marker-start circle { fill: #2f6bff; }
.lane-marker-release circle { fill: #a02fbf; }
.lane-marker-launch circle { fill: #d43f8d; }
.lane-marker-arrow circle { fill: #e0662a; }
.lane-marker-breakpoint circle { fill: #1e7a52; }

/* ── Lane legend ── */

.practice-lane-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.lane-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    background: #fff;
    padding: 5px 11px;
    font-size: 12px;
    color: #5b6377;
    cursor: pointer;
}

.lane-legend-item.is-set {
    border-color: #c9cfdb;
}

.lane-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c9cfdb;
}

.lane-legend-start .lane-legend-dot { background: #2f6bff; }
.lane-legend-release .lane-legend-dot { background: #a02fbf; }
.lane-legend-launch .lane-legend-dot { background: #d43f8d; }
.lane-legend-arrow .lane-legend-dot { background: #e0662a; }
.lane-legend-breakpoint .lane-legend-dot { background: #1e7a52; }

.lane-legend-value {
    font-weight: 700;
    color: #10131a;
}

/* ── Quick actions and details ── */

.practice-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.practice-quick {
    border: 1px solid #d8dce6;
    background: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    color: #5b6377;
    cursor: pointer;
}

.practice-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.practice-detail-wide {
    grid-column: 1 / -1;
}

/* ── States ── */

.practice-loading,
.practice-empty {
    text-align: center;
    padding: 26px 16px;
    color: #7b8497;
    font-size: 14px;
}

.practice-empty h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: #10131a;
}

.practice-empty p {
    margin: 0 auto;
    max-width: 420px;
    line-height: 1.5;
}

.practice-error {
    background: #fdf4f4;
    border: 1px solid #f0c9c9;
    color: #a32323;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 14px;
}

/* ── Quick numeric entry ──
   A column of four boards beside the lane, so a shot can be typed as fast as it can be tapped. */

.practice-lane-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    /* Flush left, so the frame label above it lines up with the board boxes by construction
       rather than by the widths happening to add up. */
    justify-content: flex-start;
}

.lane-inputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: var(--lane-caption-offset);
    flex: 0 0 auto;
}

.lane-input {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lane-input-tag {
    width: 30px;
    text-align: right;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #7b8497;
}

.lane-input-start .lane-input-tag { color: #2f6bff; }
.lane-input-release .lane-input-tag { color: #a02fbf; }
.lane-input-launch .lane-input-tag { color: #d43f8d; }
.lane-input-arrow .lane-input-tag { color: #e0662a; }
.lane-input-breakpoint .lane-input-tag { color: #1e7a52; }

.lane-input-field {
    box-sizing: border-box;
    width: 46px;
    border: 1px solid #d8dce6;
    border-radius: 7px;
    padding: 5px 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #10131a;
    background: #fff;
    -moz-appearance: textfield;
}

.lane-input-field::-webkit-outer-spin-button,
.lane-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lane-input-field:focus {
    outline: none;
    border-color: #2f6bff;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .15);
}

.lane-input-field:disabled {
    background: #f6f7f9;
    color: #9aa2b1;
}

/* Below this the neighbouring lanes are too small to read anything from, and squeezing three in
   would shrink the recorded one past usefulness. It gets the full width instead; the frame strip,
   the arrows and swiping all still move between frames. */
/* ── Lane action rail ──
   Opposite the board boxes: saving is the other half of recording a shot, so it belongs beside
   the lane rather than at the far bottom of the page. */

.lane-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: var(--lane-caption-offset);
    flex: 0 0 auto;
}

.lane-action {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dce6;
    border-radius: 9px;
    background: #fff;
    color: #5b6377;
    cursor: pointer;
}

.lane-action:hover:not(:disabled) {
    border-color: #2f6bff;
    color: #2f6bff;
    background: #f5f8ff;
}

.lane-action:disabled {
    opacity: .45;
    cursor: default;
}

.lane-action svg {
    width: 17px;
    height: 17px;
}

.lane-action-primary {
    background: #2f6bff;
    border-color: #2f6bff;
    color: #fff;
}

.lane-action-primary:hover:not(:disabled) {
    background: #2559d8;
    border-color: #2559d8;
    color: #fff;
}

/* Delete sits apart from the save cluster — the gap is the point, not decoration. */
.lane-action-danger {
    margin-top: 6px;
    color: #c02a2a;
    border-color: #f0c9c9;
}

.lane-action-danger:hover:not(:disabled) {
    background: #fdf4f4;
    border-color: #e3a9a9;
    color: #a32323;
}

/* A locked frame is a state, not a disabled control — it stays legible and clickable. */
.lane-action.is-locked {
    background: #fff6e8;
    border-color: #f0d9b5;
    color: #a2560f;
}

.practice-frame-state.is-locked {
    color: #a2560f;
}

/* The lane graphic and its caption, as one column between the rails. */
.lane-stage {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    align-items: stretch;
}

/* The recorder's one help trigger, beside the header eyebrow. */
/* Pushed to the far right of the tally row, which puts it just above the header rule — the same
   place UiSectionTitle puts a section's info button. margin-left rather than space-between on the
   row: the tally wraps on a phone, and space-between would spread the stats apart as it did. */
.practice-tally-help {
    margin-left: auto;
    /* The tally row does not set align-items, so a <details> flex item would stretch to the row. */
    align-self: center;
    text-transform: none;
    letter-spacing: normal;
}

/* ── Anything that has to line up with the lane graphic ──
   Matched to the lane card, then inset by each rail so the content box lands exactly over the
   lane between them. Insets rather than a transform: a translated full-width box hangs off the
   right of the page on a phone, where the card is the whole screen. */

.practice-quick-actions,
.practice-detail-grid {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--lane-card-width);
    margin-inline: auto;
    padding-left: calc(var(--lane-rail-left) + var(--lane-body-gap));
    padding-right: calc(var(--lane-rail-right) + var(--lane-body-gap));
}

/* Phone overrides live last: they have the same specificity as the base rules, so anything
   declared after them would silently win — which is exactly how the action rail stayed
   vertical on a phone. */
@media (max-width: 760px) {
    /* The rail is horizontal here, so the gap that sets delete apart has to be too. */
    .lane-action-danger {
        margin-top: 0;
        margin-left: 6px;
    }

    /* ── Phone layout ──
       Side rails would take about 135px of a ~320px screen, leaving the lane too narrow to tap
       accurately. Below this width the rails unstack: the lane gets the full card, with the board
       boxes and the actions laid out as rows underneath it, where a thumb reaches them easily. */

    .practice-page {
        padding: 16px 12px 40px;
    }

    .practice-lane-body {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Lane first, then the numbers, then the buttons. */
    .lane-stage {
        order: 1;
    }

    .lane-inputs {
        order: 2;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        /* Nothing above them to clear once they are no longer beside the caption. */
        padding-top: 0;
    }

    .lane-actions {
        order: 3;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding-top: 0;
    }

    /* Tag over field, five across, sharing the width evenly. */
    .lane-input {
        flex: 1 1 0;
        min-width: 0;
        max-width: 68px;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

    .lane-input-tag {
        width: auto;
        text-align: center;
    }

    .lane-input-field {
        width: 100%;
        min-width: 0;
        padding: 8px 4px;
    }

    .lane-action {
        width: 40px;
        height: 40px;
    }

    .practice-lane-svg {
        max-width: none;
    }

    /* The rails no longer flank the lane, so nothing has to be inset past them. */
    .practice-quick-actions,
    .practice-detail-grid {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .practice-slider-track {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .practice-slide.is-neighbour,
    .practice-slide-spacer {
        display: none;
    }

    .practice-slide {
        max-width: none;
    }
}