/*
 * PureCar Driving Tests — Mobile Overflow / Responsive Hardening v18
 * Loaded after the existing Phase 15 + Phase 17 styles.
 * Scope: /car-tools/driving-tests/* only.
 * Visual reference remains /sell-my-car-northern-ireland.
 */

/* 1) Hard containment: nothing in the learner platform may widen the viewport. */
html:has(.dt-page),
body:has(.dt-page){
  width:100%;
  max-width:100%;
  overflow-x:clip!important;
}

.dt-page{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:clip!important;
}

.dt-page *,
.dt-page *::before,
.dt-page *::after{
  box-sizing:border-box!important;
}

.dt-page .dt-wrap,
.dt-page .dt-card,
.dt-page .dt-hero,
.dt-page .dt-section,
.dt-page .tt-shell,
.dt-page .tt-main,
.dt-page .tt-side,
.dt-page .hp-app,
.dt-page .hp-stage-wrap,
.dt-page .pcbook-tool,
.dt-page .pcbook-card,
.dt-page .pc14-result,
.dt-page .pc15-hero,
.dt-page .pc15-sourcebar,
.dt-page .pc16-related,
.dt-page .pc16-related__inner{
  min-width:0!important;
  max-width:100%!important;
}

/* Grid/flex children are a common cause of horizontal overflow. */
.dt-page [class*="grid"] > *,
.dt-page [class*="Grid"] > *,
.dt-page [style*="display:grid"] > *,
.dt-page .dt-section-head > *,
.dt-page .dt-btns > *,
.dt-page .tt-top > *,
.dt-page .tt-controls > *,
.dt-page .hp-topbar > *,
.dt-page .hp-controls > *,
.dt-page .pcbook-actions > *,
.dt-page .pc-centre-card-top > *,
.dt-page .pc15-hero__actions > *{
  min-width:0!important;
  max-width:100%!important;
}

/* Media and long text must shrink inside their card. */
.dt-page img,
.dt-page svg,
.dt-page video,
.dt-page canvas,
.dt-page iframe{
  max-width:100%!important;
}

.dt-page img,
.dt-page video,
.dt-page canvas{
  height:auto;
}

.dt-page h1,
.dt-page h2,
.dt-page h3,
.dt-page h4,
.dt-page p,
.dt-page li,
.dt-page label,
.dt-page strong,
.dt-page b,
.dt-page span,
.dt-page a,
.dt-page button,
.dt-page td,
.dt-page th{
  overflow-wrap:anywhere;
  word-break:normal;
}

.dt-page pre,
.dt-page code{
  max-width:100%!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* Forms must never carry desktop intrinsic widths onto phones. */
.dt-page input:not([type="checkbox"]):not([type="radio"]),
.dt-page select,
.dt-page textarea,
.dt-page button{
  min-width:0!important;
  max-width:100%!important;
}

.dt-page input:not([type="checkbox"]):not([type="radio"]),
.dt-page select,
.dt-page textarea{
  width:100%!important;
}

/* Tables scroll inside the card, not the whole page. */
.dt-page .table-responsive,
.dt-page [class*="table-wrap"],
.dt-page [class*="table-scroll"]{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* Kill desktop-only nowrap rules that force cards past the viewport. */
.dt-page .dt-text-link,
.dt-page .dt-topic b,
.dt-page .dt-related span,
.dt-page .dt-centre-link strong,
.dt-page .dt-count,
.dt-page .dt-badge,
.dt-page .dt-info-chip,
.dt-page .dt-chip-row span,
.dt-page .ftip-links a,
.dt-page .pc-centre-tags span,
.dt-page .pc-compare-chipwrap span,
.dt-page .pc15-tool__tag{
  white-space:normal!important;
  max-width:100%!important;
}

/* Shared Driving Tests navigation stays inside the viewport and scrolls itself. */
.pc-dt-localnav{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.pc-dt-localnav__inner{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.pc-dt-localnav__brand,
.pc-dt-localnav__link,
.pc-dt-localnav__progress{
  flex:0 0 auto!important;
}

@media(max-width:760px){
  /* Give the page a real mobile gutter rather than a desktop width squeezed down. */
  .dt-page{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .dt-page .dt-wrap{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .dt-page .dt-card{
    width:100%!important;
    max-width:100%!important;
  }
  .dt-page .dt-hero{
    padding:23px 16px 21px!important;
  }
  .dt-page .dt-section{
    padding:18px 14px!important;
  }

  /* Main headings should scale without pushing long NI titles off-screen. */
  .dt-page h1{
    font-size:clamp(28px,9vw,39px)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
  }
  .dt-page h2{
    font-size:clamp(22px,7vw,29px)!important;
  }

  /* All generic content grids become one column on a phone. */
  .dt-page .dt-grid,
  .dt-page .dt-grid.four,
  .dt-page .dt-topic-grid,
  .dt-page .dt-resource-grid,
  .dt-page .dt-resource-grid.four-small,
  .dt-page .dt-content-grid,
  .dt-page .dt-related-grid,
  .dt-page .dt-centre-list,
  .dt-page .dt-form-grid,
  .dt-page .dt-check-groups,
  .dt-page .dt-module-grid,
  .dt-page .dt-topic-list,
  .dt-page .dt-visual-grid,
  .dt-page .dfc-grid,
  .dt-page .dtr-rule-grid,
  .dt-page .dtra-form,
  .dt-page .ftip-grid,
  .dt-page .hp-stat-grid,
  .dt-page .hp-example,
  .dt-page .pc-centre-quickfacts,
  .dt-page .pc-centre-priority-grid,
  .dt-page .pc-road-env-grid,
  .dt-page .pc-pass-context-grid,
  .dt-page .pc-centre-filterbar,
  .dt-page .pc-centre-card-grid,
  .dt-page .pc-compare-selects,
  .dt-page .pc-compare-grid,
  .dt-page .pc-choice-grid,
  .dt-page .pc-centre-mini-grid,
  .dt-page .pcbook-grid,
  .dt-page .pcbook-form,
  .dt-page .pc14-type-grid,
  .dt-page .pc14-facts,
  .dt-page .pc14-choice-grid,
  .dt-page .pc15-hubnav,
  .dt-page .pc15-tool-grid,
  .dt-page .pc15-journey,
  .dt-page .pc16-related__links,
  .dt-page .pc16-directory-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Desktop auto-columns caused several cards to push sideways. */
  .dt-page .dt-check-progress,
  .dt-page .dt-progress-summary{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .dt-page .dt-module-card{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:11px!important;
  }
  .dt-page .dt-module-card > b{
    grid-column:2!important;
    justify-self:start!important;
  }

  .dt-page .dt-logbook-title{
    grid-template-columns:38px minmax(0,1fr)!important;
  }
  .dt-page .dt-logbook-title > a{
    grid-column:2!important;
    justify-self:start!important;
  }

  .dt-page .dtr-list > a{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:9px!important;
  }
  .dt-page .dtr-list > a > em{
    grid-column:2!important;
    justify-self:start!important;
  }

  .dt-page .ftip-plan article,
  .dt-page .dt-step-list > div{
    grid-template-columns:34px minmax(0,1fr)!important;
  }

  .dt-page .pc-pass-rate-callout{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Theory test: 10 tiny columns was too wide on small phones. */
  .dt-page .tt-shell{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dt-page .tt-side{
    position:static!important;
  }
  .dt-page .tt-top{
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }
  .dt-page .tt-numbers{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .dt-page .tt-number{
    width:100%!important;
    min-width:0!important;
    font-size:11px!important;
  }
  .dt-page .tt-answer{
    width:100%!important;
    min-width:0!important;
  }
  .dt-page .tt-answer > *:not(.tt-letter){
    min-width:0!important;
  }
  .dt-page .tt-controls{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dt-page .tt-controls .dt-btn,
  .dt-page .dt-btns .dt-btn{
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    text-align:center!important;
  }

  /* Hazard simulator containment. */
  .dt-page .hp-stage-wrap,
  .dt-page .hp-stage,
  .dt-page .hp-stage svg{
    width:100%!important;
    max-width:100%!important;
  }
  .dt-page .hp-topbar,
  .dt-page .hp-clicks{
    flex-wrap:wrap!important;
  }
  .dt-page .hp-scorebox{
    text-align:left!important;
  }
  .dt-page .hp-flash{
    max-width:calc(100% - 20px)!important;
    width:max-content;
    white-space:normal!important;
    text-align:center;
  }
  .dt-page .hp-feedback article h3{
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  /* Booking fee/deadline tables stay usable without widening the page. */
  .dt-page .pcbook-table,
  .dt-page table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .dt-page table th,
  .dt-page table td{
    min-width:105px;
    white-space:normal!important;
  }

  /* Cards with arrows/actions wrap vertically rather than force a wide row. */
  .dt-page .dt-centre-link,
  .dt-page .dt-related,
  .dt-page .pc-centre-card-top,
  .dt-page .pcbook-actions,
  .dt-page .pc15-sourcebar{
    min-width:0!important;
  }
  .dt-page .dt-centre-link,
  .dt-page .dt-related{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .dt-page .dt-section-head{
    display:block!important;
  }
  .dt-page .dt-section-head > a,
  .dt-page .dt-section-head .dt-text-link{
    display:inline-flex!important;
    margin-top:10px!important;
    white-space:normal!important;
  }

  /* Phase 15 home UI. */
  .dt-page .pc15-hero{
    display:block!important;
  }
  .dt-page .pc15-hero__main,
  .dt-page .pc15-hero__panel{
    width:100%!important;
    max-width:100%!important;
  }
  .dt-page .pc15-hero__main{
    padding:25px 16px 22px!important;
  }
  .dt-page .pc15-hero__panel{
    padding:20px 16px!important;
  }
  .dt-page .pc15-hero__actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dt-page .pc15-cta{
    width:100%!important;
    max-width:100%!important;
    padding-left:14px!important;
    padding-right:14px!important;
    white-space:normal!important;
    text-align:center!important;
  }
  .dt-page .pc15-stats{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
  .dt-page .pc15-sourcebar{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Local nav: keep it horizontally scrollable, never page-wide. */
  .pc-dt-localnav__inner{
    padding:7px 8px!important;
  }
}

@media(max-width:430px){
  .dt-page{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .dt-page .dt-hero{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .dt-page .dt-section,
  .dt-page .tt-main,
  .dt-page .tt-side,
  .dt-page .pcbook-tool,
  .dt-page .pcbook-card{
    padding-left:13px!important;
    padding-right:13px!important;
  }
  .dt-page .pc15-stats{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dt-page .tt-numbers{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .dt-page .dt-pills,
  .dt-page .dt-chip-list,
  .dt-page .dt-chip-row,
  .dt-page .pc-centre-tags,
  .dt-page .ftip-links{
    gap:6px!important;
  }
}

/* =========================================================
   PURECAR DRIVING TESTS NAV UX V22
   Correct shared desktop + tablet + mobile navigation
   ========================================================= */

/* Shared bar */
.pc-dt-localnav{
    width:100% !important;
    max-width:100% !important;
    background:#fff !important;
    border-top:1px solid #f1f2f4 !important;
    border-bottom:1px solid #e2e5e9 !important;
    box-shadow:0 4px 16px rgba(18,22,28,.045) !important;
}

/* =========================================================
   LARGE DESKTOP
   Align with the main PureCar header instead of viewport edges
   ========================================================= */

@media(min-width:1250px){

    .pc-dt-localnav__inner{
        width:min(1360px,calc(100% - 48px)) !important;
        max-width:1360px !important;
        min-height:64px !important;
        margin:0 auto !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;

        gap:5px !important;

        overflow:visible !important;
    }

    .pc-dt-localnav__brand{
        flex:0 0 auto !important;
        display:flex !important;
        align-items:center !important;
        gap:9px !important;

        margin:0 13px 0 0 !important;

        font-size:15px !important;
        font-weight:900 !important;
        line-height:1 !important;
        color:#17191c !important;

        white-space:nowrap !important;
    }

    .pc-dt-localnav__dot{
        width:9px !important;
        height:9px !important;
        flex:0 0 9px !important;

        background:#d7192a !important;
        box-shadow:0 0 0 5px #fff0f2 !important;
    }

    .pc-dt-localnav a.pc-dt-localnav__link{
        flex:0 0 auto !important;

        min-height:40px !important;
        padding:0 11px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:10px !important;
        border:1px solid transparent !important;

        color:#505b68 !important;

        font-size:13px !important;
        font-weight:800 !important;
        line-height:1 !important;

        white-space:nowrap !important;

        transition:
            background .15s ease,
            color .15s ease,
            border-color .15s ease !important;
    }

    .pc-dt-localnav a.pc-dt-localnav__link:hover{
        color:#17191c !important;
        background:#f5f6f7 !important;
        border-color:#eceef1 !important;
    }

    .pc-dt-localnav a.pc-dt-localnav__link.is-active{
        color:#d7192a !important;
        background:#fff2f3 !important;
        border-color:#efc9cd !important;
    }

    .pc-dt-localnav__progress{
        margin-left:auto !important;

        min-height:42px !important;
        padding:0 16px !important;

        background:#17191c !important;
        border-color:#17191c !important;
        color:#fff !important;

        border-radius:11px !important;

        font-size:13px !important;
        font-weight:850 !important;
    }

    .pc-dt-localnav__progress:hover{
        background:#2a2e33 !important;
        border-color:#2a2e33 !important;
        color:#fff !important;
    }
}


/* =========================================================
   SMALL DESKTOP / TABLET
   Keep alignment but allow the nav itself to scroll
   ========================================================= */

@media(min-width:761px) and (max-width:1249px){

    .pc-dt-localnav__inner{
        width:calc(100% - 24px) !important;
        max-width:100% !important;
        min-height:62px !important;

        margin:0 auto !important;
        padding:0 2px !important;

        display:flex !important;
        align-items:center !important;

        gap:6px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        scrollbar-width:none;
    }

    .pc-dt-localnav__inner::-webkit-scrollbar{
        display:none;
    }

    .pc-dt-localnav__brand{
        flex:0 0 auto !important;
        margin-right:8px !important;

        font-size:14px !important;
        font-weight:900 !important;

        white-space:nowrap !important;
    }

    .pc-dt-localnav a.pc-dt-localnav__link{
        flex:0 0 auto !important;

        min-height:39px !important;
        padding:0 11px !important;

        font-size:13px !important;
        font-weight:800 !important;

        white-space:nowrap !important;
    }

    .pc-dt-localnav__progress{
        margin-left:6px !important;
    }
}


/* =========================================================
   MOBILE
   A deliberate horizontal tool navigation, not squeezed buttons
   ========================================================= */

@media(max-width:760px){

    .pc-dt-localnav{
        overflow:hidden !important;
    }

    .pc-dt-localnav__inner{
        width:100% !important;
        max-width:100% !important;
        min-height:58px !important;

        margin:0 !important;
        padding:8px 10px !important;

        display:flex !important;
        align-items:center !important;

        gap:7px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .pc-dt-localnav__inner::-webkit-scrollbar{
        display:none;
    }

    .pc-dt-localnav__brand{
        flex:0 0 auto !important;

        margin:0 7px 0 3px !important;

        font-size:14px !important;
        font-weight:900 !important;

        white-space:nowrap !important;
    }

    .pc-dt-localnav__dot{
        width:8px !important;
        height:8px !important;
        flex:0 0 8px !important;

        box-shadow:0 0 0 4px #fff0f2 !important;
    }

    .pc-dt-localnav a.pc-dt-localnav__link{
        flex:0 0 auto !important;

        min-height:39px !important;
        padding:0 12px !important;

        border-radius:9px !important;

        font-size:12.5px !important;
        font-weight:800 !important;

        white-space:nowrap !important;
    }

    .pc-dt-localnav__progress{
        margin-left:0 !important;
        margin-right:3px !important;

        padding-left:14px !important;
        padding-right:14px !important;
    }
}


/* =========================================================
   PURECAR FULL MOBILE UX V24
   True final mobile override
   ========================================================= */

@media(max-width:760px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    body:has(.dt-page){
        overflow-x:hidden !important;
    }

    .dt-page,
    .dt-page *{
        box-sizing:border-box !important;
    }

    .dt-page{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    .dt-page .dt-wrap{
        width:calc(100% - 16px) !important;
        max-width:calc(100% - 16px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    /*
       BREADCRUMBS
       The previous version sat almost directly against
       the Driving Tests navigation.
    */
    .dt-page .dt-breadcrumb,
    .dt-page .dt-breadcrumbs{
        width:100% !important;
        max-width:100% !important;

        margin-top:20px !important;
        margin-bottom:16px !important;

        padding:0 3px !important;

        display:flex !important;
        align-items:center !important;

        gap:8px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        white-space:nowrap !important;

        scrollbar-width:none;

        font-size:13px !important;
        line-height:1.4 !important;
    }

    .dt-page .dt-breadcrumb::-webkit-scrollbar,
    .dt-page .dt-breadcrumbs::-webkit-scrollbar{
        display:none;
    }

    .dt-page .dt-breadcrumb a,
    .dt-page .dt-breadcrumbs a{
        flex:0 0 auto !important;
        font-size:13px !important;
        font-weight:800 !important;
    }

    .dt-page .dt-breadcrumb > span,
    .dt-page .dt-breadcrumbs > span{
        flex:0 0 auto !important;
    }

    /*
       DRIVING TESTS NAV
    */
    .pc-dt-localnav{
        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
    }

    .pc-dt-localnav__inner{
        width:100% !important;
        max-width:100% !important;

        min-height:58px !important;

        margin:0 !important;
        padding:8px 11px !important;

        display:flex !important;
        align-items:center !important;

        gap:7px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .pc-dt-localnav__inner::-webkit-scrollbar{
        display:none;
    }

    .pc-dt-localnav__brand{
        flex:0 0 auto !important;

        margin:0 7px 0 3px !important;

        font-size:15px !important;
        line-height:1 !important;
        font-weight:900 !important;

        white-space:nowrap !important;
    }

    .pc-dt-localnav__dot{
        width:8px !important;
        height:8px !important;
        flex:0 0 8px !important;
    }

    .pc-dt-localnav a.pc-dt-localnav__link{
        flex:0 0 auto !important;

        min-height:40px !important;

        padding:0 12px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        font-size:13px !important;
        line-height:1 !important;
        font-weight:800 !important;

        white-space:nowrap !important;
    }

    .pc-dt-localnav a.pc-dt-localnav__progress,
    .pc-dt-localnav a.pc-dt-localnav__progress:link,
    .pc-dt-localnav a.pc-dt-localnav__progress:visited{
        margin-left:0 !important;

        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
    }

    /*
       HERO
    */
    .dt-page .dt-hero,
    .dt-page .pc15-hero{
        width:100% !important;
        max-width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;

        padding:24px 18px !important;

        border-radius:16px !important;
    }

    .dt-page h1{
        max-width:100% !important;

        font-size:clamp(31px,9.2vw,42px) !important;
        line-height:1.04 !important;
        letter-spacing:-.045em !important;

        overflow-wrap:normal !important;
        word-break:normal !important;
    }

    .dt-page h2{
        font-size:25px !important;
        line-height:1.12 !important;
    }

    .dt-page h3{
        font-size:19px !important;
        line-height:1.25 !important;
    }

    .dt-page p,
    .dt-page li{
        font-size:15px !important;
        line-height:1.66 !important;
    }

    /*
       SECTIONS
    */
    .dt-page .dt-card{
        width:100% !important;
        max-width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;

        border-radius:15px !important;
    }

    .dt-page .dt-section{
        width:100% !important;
        max-width:100% !important;

        padding:21px 16px !important;
        margin-top:13px !important;
    }

    .dt-page .dt-section-head{
        display:block !important;
        width:100% !important;
        margin-bottom:18px !important;
    }

    .dt-page .dt-section-head > * + *{
        margin-top:8px !important;
    }

    /*
       ALL MULTI-COLUMN LAYOUTS
    */
    .dt-page .dt-grid,
    .dt-page .dt-grid.four,
    .dt-page .dt-resource-grid,
    .dt-page .dt-resource-grid.four-small,
    .dt-page .dt-topic-grid,
    .dt-page .dt-related-grid,
    .dt-page .dt-sign-grid,
    .dt-page .dt-stat-grid,
    .dt-page .dt-topic-authority-grid,
    .dt-page .dt-module-grid,
    .dt-page .dt-visual-grid,
    .dt-page .dt-form-grid,
    .dt-page .dt-content-grid,
    .dt-page .tt-start-grid,
    .dt-page .tt-shell,
    .dt-page .hp-stat-grid,
    .dt-page .hp-example,
    .dt-page .mp-grid,
    .dt-page .pc15-tool-grid,
    .dt-page .pc15-journey,
    .dt-page .pc-centre-card-grid,
    .dt-page .pc-centre-mini-grid,
    .dt-page .pc-centre-priority-grid,
    .dt-page .pc-choice-grid,
    .dt-page .pc-compare-grid,
    .dt-page .pc-compare-selects,
    .dt-page .pc-pass-context-grid,
    .dt-page .pc-road-env-grid,
    .dt-page .pc14-type-grid,
    .dt-page .pc14-facts,
    .dt-page .pc14-choice-grid,
    .dt-page .pcbook-grid,
    .dt-page .pcbook-form,
    .dt-page .psc-grid,
    .dt-page .ps-grid,
    .dt-page .ps-warning-grid,
    .dt-page .st-grid,
    .dt-page .dfc-grid{
        grid-template-columns:minmax(0,1fr) !important;
        gap:12px !important;
    }

    .dt-page .dt-grid > *,
    .dt-page .dt-resource-grid > *,
    .dt-page .dt-topic-grid > *,
    .dt-page .dt-related-grid > *,
    .dt-page .dt-module-grid > *,
    .dt-page .dt-form-grid > *,
    .dt-page .pc15-tool-grid > *,
    .dt-page .pc15-journey > *,
    .dt-page .pc-centre-card-grid > *,
    .dt-page .pcbook-grid > *,
    .dt-page .pc14-type-grid > *{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    /*
       BUTTONS
    */
    .dt-page .dt-btns,
    .dt-page .tt-controls,
    .dt-page .hp-controls,
    .dt-page .pcbook-actions,
    .dt-page .psc-actions,
    .dt-page .mp-footer-actions{
        display:grid !important;
        grid-template-columns:1fr !important;

        width:100% !important;

        gap:10px !important;
    }

    .dt-page .tt-controls > div{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
        width:100% !important;
    }

    .dt-page .dt-btns > *,
    .dt-page .tt-controls button,
    .dt-page .tt-controls .dt-btn,
    .dt-page .hp-controls > *,
    .dt-page .pcbook-actions > *,
    .dt-page .psc-actions > *,
    .dt-page .mp-footer-actions > *{
        width:100% !important;
        max-width:100% !important;

        min-height:48px !important;

        margin:0 !important;
    }

    /*
       THEORY QUESTION UI
    */
    .dt-page .tt-main{
        width:100% !important;
        max-width:100% !important;

        padding:18px 15px !important;
    }

    .dt-page .tt-question{
        font-size:21px !important;
        line-height:1.32 !important;
    }

    .dt-page .tt-answer{
        width:100% !important;

        padding:15px !important;

        font-size:15px !important;
        line-height:1.55 !important;
    }

    .dt-page .tt-number-grid{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:6px !important;
    }

    /*
       RESULTS
    */
    .dt-page .tt-results.show{
        display:grid !important;
        grid-template-columns:1fr !important;

        width:100% !important;
        max-width:100% !important;

        padding:18px 15px !important;

        gap:12px !important;
    }

    .dt-page .tt-results > h2,
    .dt-page .tt-score,
    .dt-page #ttResultTitle,
    .dt-page #ttResultCopy,
    .dt-page .tt-breakdown,
    .dt-page .tt-wrong-wrap,
    .dt-page .tt-results > .dt-btns{
        grid-column:1 !important;
        grid-row:auto !important;

        width:100% !important;
        max-width:100% !important;
    }

    .dt-page .tt-breakdown{
        grid-template-columns:1fr !important;
    }

    /*
       FORMS
    */
    .dt-page input:not([type="checkbox"]):not([type="radio"]),
    .dt-page select,
    .dt-page textarea{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        font-size:16px !important;
    }

    /*
       TABLES
    */
    .dt-page table,
    .dt-page .pcbook-table{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        overflow-x:auto !important;

        -webkit-overflow-scrolling:touch;
    }

    /*
       IMAGES / SVG
    */
    .dt-page img,
    .dt-page svg,
    .dt-page video,
    .dt-page canvas,
    .dt-page iframe{
        max-width:100% !important;
    }

    /*
       MODULES / LOGBOOK
    */
    .dt-page .dt-module-card{
        grid-template-columns:42px minmax(0,1fr) !important;
    }

    .dt-page .dt-module-card > b{
        grid-column:2 !important;
    }

    .dt-page .dt-logbook-title{
        grid-template-columns:40px minmax(0,1fr) !important;
    }

    .dt-page .dt-logbook-title > a{
        grid-column:2 !important;
    }

    /*
       SOURCES / LONG URLS
    */
    .dt-page .dt-source,
    .dt-page .dt-source a{
        max-width:100% !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }
}

@media(max-width:390px){

    .dt-page .dt-wrap{
        width:calc(100% - 12px) !important;
        max-width:calc(100% - 12px) !important;
    }

    .dt-page .tt-number-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}


/* =========================================================
   SEO CONTENT V24
   Useful content, not keyword stuffing
   ========================================================= */

.pc24-seo-content{
    width:min(1180px,calc(100% - 48px));

    margin:22px auto 0;

    background:
        linear-gradient(
            135deg,
            #fbf6ee 0%,
            #fffaf5 55%,
            #fff2f3 100%
        );

    border:1px solid #eadfd3;
    border-radius:20px;

    box-shadow:0 9px 26px rgba(23,24,26,.045);
}

.pc24-seo-content__inner{
    padding:30px 34px;

    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);

    gap:34px;
}

.pc24-seo-content small{
    display:block;

    margin-bottom:8px;

    color:#d7192a;

    font-size:11px;
    line-height:1;
    font-weight:950;

    letter-spacing:.08em;
    text-transform:uppercase;
}

.pc24-seo-content h2{
    margin:0 0 13px;

    color:#17191c;

    font-size:clamp(25px,2.2vw,33px);
    line-height:1.12;
    letter-spacing:-.035em;
}

.pc24-seo-content p{
    max-width:74ch;

    margin:0 0 13px;

    color:#565e67;

    font-size:16px;
    line-height:1.75;
}

.pc24-seo-content__points{
    padding:20px;

    background:rgba(255,255,255,.74);

    border:1px solid rgba(219,207,194,.8);
    border-radius:15px;
}

.pc24-seo-content__points strong{
    display:block;

    margin-bottom:11px;

    color:#17191c;

    font-size:14px;
}

.pc24-seo-content__points ul{
    margin:0;
    padding-left:20px;
}

.pc24-seo-content__points li{
    margin:7px 0;

    color:#555c64;

    font-size:14px;
    line-height:1.55;
}

@media(max-width:760px){

    .pc24-seo-content{
        width:calc(100% - 16px);

        margin-top:14px;

        border-radius:15px;
    }

    .pc24-seo-content__inner{
        padding:21px 16px;

        grid-template-columns:1fr;

        gap:17px;
    }

    .pc24-seo-content h2{
        font-size:24px;
    }

    .pc24-seo-content p{
        font-size:15px;
        line-height:1.66;
    }

    .pc24-seo-content__points{
        padding:16px;
    }
}