/* ================================================================
   INSTITUTIONAL DOCUMENTS PAGE
   css/institutionaldocuments.css

   Loaded by institutionaldocuments.php via $pageCss, after header.css and
   before global-typography.css.

   The page reuses the existing site furniture rather than
   inventing any of it:

     header.php  - unchanged, supplies the topbar, logo, DigiLocker /
                   Pehchaan / API Setu badges, nav and $basePath
     footer.php  - unchanged, the dark footer with Useful Links,
                   Our Programmes, Address, social and the legal note
     banner      - the same two-part banner contact.php already uses:
                   navy panel with a Home / PAGE pill, a large heading
                   with a light-blue accent word, a short white rule
                   and a lead paragraph on the left, photo on the right
     cards       - the card style the sections on index.php use:
                   white, 1px #E4EAF8, 18px radius, soft shadow
     container   - the standard agreed across index.php:
                   92% capped at 1380px, then 94% <=1199, 90% <=767,
                   92% <=480, with 48px section padding

   NOTHING in this file edits any other page. Every selector is
   prefixed .id- so it cannot reach the header, the footer or any
   other page's content.

   SPECIFICITY NOTE
   global-typography.css loads after this file and pins
   h1 { font-size: 46px; line-height: 1.2 } and
   p { font-size: 16px; line-height: 1.6 } with !important, so the
   banner h1 and every paragraph carry their own !important.
   ================================================================ */


/* ================================================================
   1.  BANNER
   Mirrors contact.php's recognition-and-validity-banner (unchanged, reused as-is).
   ================================================================ */

.id-banner {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: #083C7C;
    font-family: Arial, Helvetica, sans-serif;
}

.id-banner-content {
    width: 52%;
    padding: 80px 6% 80px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
}

/* the Home / PAGE breadcrumb pill */
.id-banner-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
}
.id-banner-badge i {
    font-size: 15px;
    line-height: 1;
}

.id-banner-content h1 {
    margin: 0 !important;
    max-width: 600px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(42px, 4.5vw, 68px) !important;
    line-height: 1.08 !important;
    font-weight: 700;
    letter-spacing: -1.5px;
}
.id-banner-content h1 span {
    color: #A9C7FF;
}

.id-banner-line {
    width: 50px;
    height: 3px;
    margin: 25px 0 20px;
    background: #FFFFFF;
    border-radius: 5px;
}

.id-banner-content p {
    max-width: 520px;
    margin: 0 !important;
    color: rgba(255, 255, 255, .90);
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

/* photo half */
.id-banner-image {
    width: 48%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}
.id-banner-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.id-banner-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}
.id-banner:hover .id-banner-photo img {
    transform: scale(1.04);
}


/* ================================================================
   2.  SECTION + CONTAINER
   ================================================================ */

.id-section {
    width: 100%;
    padding: 48px 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(8, 103, 213, 0.07), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(8, 103, 213, 0.05), transparent 26%),
        #F5F8FC;
    font-family: Arial, Helvetica, sans-serif;
}

.id-container {
    width: 92%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0;
}


/* ================================================================
   3.  CARDS
   ================================================================ */

.id-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E4EAF8;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06);
    padding: 30px 32px;
    margin-bottom: 24px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.id-card:hover {
    border-color: #C9D8F6;
    box-shadow: 0 12px 28px rgba(16, 42, 90, .10);
}

/* the two- and three-up rows */
.id-grid,
.id-grid-3 {
    display: grid;
    gap: 24px;
    align-items: start;
}
.id-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.id-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* in a row the cards manage their own bottom gap */
.id-grid > .id-card,
.id-grid-3 > .id-card {
    margin-bottom: 0;
}
.id-grid + .id-grid,
.id-grid + .id-subhead,
.id-subhead + .id-grid-3,
.id-grid-3 + .id-grid {
    margin-top: 24px;
}


/* ================================================================
   4.  TYPE INSIDE THE CARDS

   EVERY heading below carries !important on font-size, line-height
   and font-family, and that is not optional. global-typography.css
   loads after this file and pins every heading level with
   !important:

       h2  35px / 1.25    h3  30px / 1.3
       h4  25px / 1.35    h1  46px / 1.2

   A plain rule cannot outrank an !important, so without these the
   numbered headings rendered at 30px and the 3.1/3.2/3.3 headings at
   25px - nearly twice their intended size, which is what made them
   look wrong in the cards. Measured after the fix: h3 21px,
   h4 16px, matching the card headings on index.php.
   ================================================================ */

/* a numbered section heading */
.id-card h3 {
    margin: 0 0 14px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

/* the sub headings inside 3 - 3.1, 3.2, 3.3 */
.id-card h4 {
    margin: 0 0 12px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
}

/* the full-width heading above the three-up row */
.id-subhead {
    /* margin: 0 0 18px !important; */
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

.id-card p {
    margin: 0 0 14px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.65 !important;
    text-align: left !important;
}
.id-card p:last-child {
    margin-bottom: 0 !important;
}

.id-card strong {
    color: #0B1F4D;
    font-weight: 700;
}

.id-card a {
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: inherit !important;
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}
.id-card a:hover {
    text-decoration: underline;
}

/* bullets - a navy dot, matching the card icons elsewhere

   !important is required on font-size, font-family and line-height
   because global-typography.css loads after this file and pins

       li { font-size: 16px; line-height: 1.6 }   with !important

   Without it every bullet silently rendered at 16px while the
   paragraph above it sat at 15px. */
.id-card ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.id-card ul:last-child {
    margin-bottom: 0;
}
.id-card ul li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 20px;
    color: #3A4A63;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.6 !important;
    text-align: left;
}
.id-card ul li:last-child {
    margin-bottom: 0;
}
.id-card ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0D6EFD;
}


/* ================================================================
   5.  INTRO CARD
   centred heading, rule, then the two opening paragraphs
   ================================================================ */

.id-card-intro {
    text-align: center;
    padding: 36px 40px;
    margin-bottom: 24px;
}
.id-card-intro h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.6px !important;
}
.id-card-intro .id-rule {
    width: 100%;
    max-width: 620px;
    height: 1px;
    margin: 16px auto 24px;
    background: #E4EAF8;
}
.id-card-intro p {
    max-width: 1080px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}


/* ================================================================
   6.  CONTACT CARD
   ================================================================ */

.id-card-contact {
    margin-top: 24px;
    padding: 34px 36px 38px;
    text-align: center;
    /* a hairline in the brand navy along the top, as on the
       contact page's cards */
    border-top: 3px solid #0A56D8;
}
.id-card-contact h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
}
.id-card-contact .id-rule {
    width: 100%;
    max-width: 700px;
    height: 1px;
    margin: 16px auto 22px;
    background: #E4EAF8;
}
/* Scoped under .id-card-contact on purpose. The bare .id-contact-lead at
   (0,1,0) was being beaten by .id-card p at (0,1,1) from line 262, which
   carries text-align:left !important and margin:0 0 14px !important.
   Higher specificity wins over source order even when the loser is
   !important and 135 lines earlier, so the centring and the auto margins were
   both discarded and the lead line sat flush left. Scoping to
   .id-card-contact makes this (0,2,0), which is the same shape as the working
   .id-card-intro p at line 361 and the .pp-card-contact equivalents in
   privacypolicy.css. */
.id-card-contact .id-contact-lead {
    max-width: 720px;
    margin: 0 auto 14px !important;
    color: #5B6B85 !important;
    text-align: center !important;
}

.id-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 900px;
    margin: 26px auto 0;
    text-align: left;
}
.id-contact-block {
    padding: 20px 24px;
    background: #F7FAFF;
    border: 1px solid #E4EAF8;
    border-radius: 14px;
}
.id-contact-block h4 {
    margin: 0 0 12px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.id-contact-block p {
    margin: 0 0 8px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400;
    line-height: 1.6 !important;
}
.id-contact-block p:last-child {
    margin-bottom: 0 !important;
}


/* ================================================================
   7.  RESPONSIVE
   The banner follows contact.php exactly - the photo is never
   removed, it stacks below the text on narrow screens:
       <=991px  both halves stay side by side, banner grows to 430px
       <=767px  banner becomes a column, photo becomes a 300px band
       <=480px  text 330px, photo 250px
   ================================================================ */

@media (max-width: 1199px) {
    .id-container {
        width: 94%;
    }
}

@media (max-width: 991px) {

    .id-banner {
        min-height: 430px;
    }

    .id-banner-content {
        width: 52%;
        padding: 60px 35px;
    }

    .id-banner-image {
        width: 48%;
        min-height: 430px;
    }

    .id-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {

    /* the photo moves under the text rather than disappearing */
    .id-banner {
        flex-direction: column;
        min-height: auto;
    }

    .id-banner-content {
        width: 100%;
        min-height: 360px;
        padding: 55px 25px 45px;
    }

    .id-banner-content h1 {
        max-width: 100%;
        font-size: 38px !important;
        letter-spacing: -1px;
    }

    .id-banner-content p {
        max-width: 100%;
        font-size: 15px !important;
    }

    .id-banner-badge {
        font-size: 12px;
        padding: 8px 15px;
    }

    .id-banner-image {
        width: 100%;
        height: 300px;
        min-height: 300px;
    }

    .id-section {
        padding: 40px 0;
    }

    .id-container {
        width: 90%;
    }

    .id-grid,
    .id-grid-3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .id-card {
        padding: 24px 22px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .id-card h3,
    .id-subhead {
        font-size: 19px !important;
    }

    .id-card h4 {
        font-size: 15.5px !important;
    }

    .id-card p,
    .id-card ul li {
        font-size: 14.5px !important;
    }

    .id-card-intro {
        padding: 28px 22px;
    }

    .id-card-intro h2 {
        font-size: 22px !important;
    }

    .id-card-contact {
        padding: 28px 22px 30px;
    }

    .id-card-contact h2 {
        font-size: 21px !important;
    }

    .id-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .id-contact-block p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    .id-container {
        width: 92%;
    }

    .id-banner-content {
        min-height: 330px;
        padding: 45px 20px 40px;
    }

    .id-banner-content h1 {
        font-size: 32px !important;
    }

    .id-banner-image {
        height: 250px;
        min-height: 250px;
    }

    .id-card {
        padding: 20px 18px;
    }

    .id-card h3,
    .id-subhead {
        font-size: 18px !important;
    }

    .id-card p,
    .id-card ul li {
        font-size: 14px !important;
    }

    .id-card-intro h2,
    .id-card-contact h2 {
        font-size: 20px !important;
    }

    .id-contact-block {
        padding: 16px 18px;
    }
}

/* ================================================================
   8.  EVERY CARD IN A ROW IS THE SAME HEIGHT
   Appended at the end. Nothing above this line was edited.

   THE PROBLEM

   Line 185 declared the two row grids as

       .id-grid,
       .id-grid-3 {
           display: grid;
           gap: 24px;
           align-items: start;
       }

   align-items: start makes each card exactly as tall as its own content and
   no taller. The rows on this page hold very different amounts of text, so
   every row finished on a ragged bottom edge:

       1. Nature of Services        7 bullets   315px
       2. Accuracy of Information   6 bullets + a closing paragraph   265px

       3.1 Payments                 5 bullets                      315px
       3.2 Processing Fees          1 paragraph                    169px
       3.3 Payment Security         2 paragraphs                   208px

       4. Website Usage             4 bullets                      265px
       5. Intellectual Property     2 paragraphs                   216px

       6. Limitation of Liability   4 bullets                      265px
       7. Modifications to Terms    2 paragraphs                   191px

   THE FIX

   align-items: stretch, which is the grid default. Each row becomes as tall
   as its tallest card and every card in that row fills that height. The first
   card in each row is already the tallest one, so it does not move at all -
   card 2 becomes card 1's size, and 7 becomes 6's size.

   Only align-items changes. Not one of the following is touched: the white
   fill, the 1px #E4EAF8 border, the 18px radius, the shadow, the 30px 32px
   padding, the 24px gap, or any font-size, weight, colour or line-height.
   Content stays top-aligned, so the only thing that changes is the empty
   space at the bottom of the shorter cards.

   Both classes are needed: .id-grid-3 carries the three-up row (3.1/3.2/3.3)
   and .id-grid carries the two-up rows (1/2, 4/5, 6/7). Between them that is
   every card row on the page.

   <=767px both grids collapse to one column, so each row holds a single card
   and there is nothing to match - the rule has no effect there and needs no
   media query of its own.

   SCOPE

   .id-grid, .id-grid-3 and .id-card appear in termsconditions.php and in this
   file only - checked across every PHP include and every stylesheet in the
   project. Nothing on any other page can match these selectors.
   ================================================================ */

.id-grid,
.id-grid-3 {
    align-items: stretch !important;
}


/* ================================================================
   9.  EVERY CARD IN A ROW IS THE SAME HEIGHT
   Appended at the end. Nothing above this line was edited.

   This is the rule termsconditions.css already carries, brought over
   so this page matches it exactly.

   Section 9 declares the two row grids as

       .id-grid,
       .id-grid-3 {
           display: grid;
           gap: 24px;
           align-items: start;
       }

   align-items: start makes each card exactly as tall as its own content and
   no taller, and the rows here hold very different amounts of text, so every
   row would finish on a ragged bottom edge.

   align-items: stretch is the grid default. Each row becomes as tall as its
   tallest card and every card in that row fills that height. The first card
   in each row is already the tallest, so it does not move at all.

   Only align-items changes. Not one of the following is touched: the white
   fill, the 1px #E4EAF8 border, the 18px radius, the shadow, the 30px 32px
   padding, the 24px gap, or any font-size, weight, colour or line-height.
   Content stays top-aligned, so the only thing that changes is the empty
   space at the bottom of the shorter cards.

   Both classes are needed: .id-grid carries the two-up rows and .id-grid-3
   the three-up rows.

   <=767px both grids collapse to one column, so each row holds a single card
   and there is nothing to match - the rule has no effect there and needs no
   media query of its own.

   SCOPE

   .id-grid, .id-grid-3 and .id-card appear in institutionaldocuments.php and in this
   file only. Nothing on any other page can match these selectors.
   ================================================================ */

.id-grid,
.id-grid-3 {
    align-items: stretch !important;
}

/* ================================================================
   10. THE BANNER TEXT SITS ON THE SAME LEFT EDGE AS THE HEADER
   Appended at the end. Nothing above this line was edited.

   MEASURED BEFORE THIS BLOCK

   clientWidth  header left   banner text left   out by
        345           14              20            +6
        465           19              20            +1
        585           29              25            -4
        753           23              35           +12
        885           27              35            +8
       1009           30              81           +51
       1265           51             101           +50
       1585          103             127           +24

   The section rows were already correct. .id-container is width:92% with
   max-width:1380px, the same numbers the header and the footer use, and at
   all eight widths above the header edge, the .id-container edge and the
   footer edge land on the same pixel. Only the banner was out.

   THE CAUSE

   The banner is full-bleed - .id-banner-content is width:52% starting at
   x=0 - and its padding-left was 8%. The banner has no gutter of its own, so
   that 8% came out of the text column and pushed it right of the header.

   WHAT IS DONE

   padding-left only, set to exactly the gutter the container leaves:

       container 92%  ->  gutter 4%
       container 94%  ->  gutter 3%
       container 90%  ->  gutter 5%
       above 1500px the container is capped at 1380px, so the gutter stops
       being a share of the viewport and becomes calc((100% - 1380px)/2)

   Each figure mirrors the container's own breakpoint - 94% above 1199px,
   90% above 767px, 92% above 480px - so the banner and the container agree
   in every environment, including the 767px edge where the project's media
   queries are known to behave unusually.

   Percentage padding on .id-banner-content resolves against .id-banner,
   which is full width, so these are percentages of the viewport. That is why
   they are the same numbers as the container percentages rather than scaled
   by the 52% panel.

   A FIRST ATTEMPT AT THIS WAS WRONG

   It scaled the gutter by the 52% panel and expressed the capped case as
   calc(96.154% - 690px). At 1585px that produced 834px of padding, which grew
   the panel from 824px to 929px and pushed the image from x=824 to x=929 -
   changing the very width this block was meant to leave alone. The padding
   here is small enough that the panel keeps its 52% and the image keeps its
   position, verified below.

   NOTHING ELSE MOVES

   padding-right, padding-top and padding-bottom are not touched, the panel
   stays 52% of the banner, and .id-banner-image is not referenced anywhere in
   this block. Only the four text elements inside the panel - breadcrumb, h1,
   rule and lead paragraph - shift left. The navy panel background still runs
   to x=0.

   SCOPE

   .id-banner-content exists in institutionaldocuments.php and this file only.
   termsconditions.php is untouched.
   ================================================================ */

.id-banner-content {
    padding-left: 4%;
}

/* the container is capped at 1380px, so from 1500px up the gutter is a fixed
   measurement rather than a share of the viewport */
@media (min-width: 1500px) {
    .id-banner-content {
        padding-left: calc((100% - 1380px) / 2);
    }
}

/* container 94% */
@media (max-width: 1199.98px) {
    .id-banner-content {
        padding-left: 3%;
    }
}

/* container 90% */
@media (max-width: 767.98px) {
    .id-banner-content {
        padding-left: 5%;
    }
}

/* container 92% */
@media (max-width: 480.98px) {
    .id-banner-content {
        padding-left: 4%;
    }
}


/* ================================================================
   11. 24PX ABOVE THE STANDALONE "12. CONTACT" CARD
   Appended at the end. Nothing above this line was edited.

   MEASURED BEFORE THIS BLOCK

       last grid (10. Fee Revisions / 11. Final Decision) bottom   3002
       card 12 top                                                3002
       gap between them                                            0px

   Every other block on the page had 24px above it. Card 12 sat flush
   against the row above it, because it is a bare .id-card rather than a
   grid item, and .id-card at line 169 sets margin-bottom:24px but no
   margin-top at all.

   This adds margin-top:24px to it, so the gap above card 12 is the same
   24px that sits above every other card on the page. The 24px below it is
   already in place from .id-card and is not touched here.

   SCOPE

   .id-card-standalone is on one element in institutionaldocuments.php and appears in
   no rule anywhere else in the project.
   ================================================================ */

.id-card-standalone {
    margin-top: 24px !important;
}

/* ================================================================
   12. EVERY POLICY CARD IS THE SIZE OF "11. FINAL DECISION",
       WITH READ MORE WHERE THERE IS MORE TO READ
   Appended at the end. Nothing above this line was edited.

   WHY A FIXED HEIGHT NOW INSTEAD OF align-items: stretch

   Section 9 made every card in a row match the tallest card in that row,
   which left rows of 532px, 315px, 317px, 504px and 241px - uniform within
   a row, but five different heights down the page.

   "11. Final Decision" measures 241px, the shortest box on the page, and
   that is the size every policy card is now given. Because all cards are
   the same height, the grid no longer needs stretch to line them up, and
   it must not have it: with stretch, expanding one card would drag its row
   partner to the same height. align-items: start lets one card open on its
   own while the rest stay at 241px.

   WHY ONLY THE NUMBERED CARDS

   The opening "Institutional Documents" card and the Contact Information card keep
   their natural height. Clamping the contact card would put the address,
   the email and both phone numbers behind a Read more, which is not a
   sensible thing to do with contact details.

   MEASURED ON THE TEMPLATE PAGE (refundpolicy) - this is where 241px came from.

       2. Non-Refundable Fees              470px of content
       3. Withdrawal or Cancellation       204px      fits
       4. Transfer of Admission            231px      fits
       5. Processing Fees                  253px   over by 12px
       6. Payment Through Official Channels 256px   over by 15px
       7. Incorrect or Unauthorised        206px      fits
       8. Duplicate or Incorrect Txns      442px of content
       9. Exceptional Circumstances        179px      fits
      10. Fee Revisions                   165px      fits
      11. Final Decision                  179px      fits
      12. Contact for Payment Queries       66px      fits

   Five cards need Read more. The other six fit and get none - whether a
   card shows Read more is measured at runtime, not hard-coded, so it stays
   correct when the text reflows at a different width.

   THE FADE

   A card clipped at exactly 241px cuts a line of text in half, which reads
   as broken rather than as "there is more". A short white gradient sits
   over the last 64px, and only on cards that actually have more, so the
   text fades out instead of stopping mid-glyph.

   THE BUTTON

   Bottom-left of the card, in the same blue as the links elsewhere on the
   page. Opening the card swaps the label to "Read less" and takes away the
   fade and the fixed height, so the card shows its full content.

   NOTHING ELSE IS RESTYLED

   Padding 30px 32px, the 1px #E4EAF8 border, the 18px radius, the shadow,
   h3 21px/800, p and li 15px, the 24px gap and the 24px above card 12 are
   all untouched. The height is the only thing that changes.

   SCOPE

   .id-card-clamp, .id-card-more, .id-card-open and .id-more are added by
   the script in institutionaldocuments.php and appear in no rule anywhere else in the
   project.
   ================================================================ */

/* the grid no longer stretches, so one card can open without dragging its
   row partner taller with it */
.id-grid,
.id-grid-3 {
    align-items: start !important;
}

/* the box every policy card is held to */
.id-card-clamp {
    height: var(--id-clamp, 241px);
    overflow: hidden;
}

/* the white fade over the last of the clipped text */
.id-card-more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 78%);
    pointer-events: none;
}

/* open: full height, no fade */
.id-card-clamp.id-card-open {
    height: auto;
    overflow: visible;
}

.id-card-open.id-card-more::after {
    display: none;
}

/* the control */
.id-more {
    position: absolute;
    left: 32px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none;
    cursor: pointer;
}

.id-more:hover {
    text-decoration: underline;
}

.id-more:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
    border-radius: 4px;
}

/* the same 241px box, smaller padding and type at the narrower widths, so
   the proportion of the page the card occupies stays comparable */
@media (max-width: 767.98px) {
    :root {
        --id-clamp: 232px;
    }
    .id-more {
        left: 22px;
        bottom: 12px;
    }
}

@media (max-width: 480.98px) {
    :root {
        --id-clamp: 224px;
    }
    .id-more {
        left: 18px;
        bottom: 10px;
    }
}

/* ================================================================
   13. THE CLIPPED TEXT MUST NOT RUN UNDER THE READ MORE CONTROL
   Appended at the end. Nothing above this line was edited.

   WHAT WAS WRONG, AS SEEN IN THE CAPTURE

   The last line of text sat underneath the "Read more" label - "ODLC's"
   was legible straight through it - and a further line was sliced in half
   by the edge of the clip.

   WHY padding-bottom ALONE DID NOT FIX IT

   The obvious fix is to reserve room at the bottom of the card, and
   padding-bottom:58px is set below. On a card whose height is FIXED that
   reserves nothing visible: overflow clips at the PADDING box, not at the
   content box, so text still paints all the way down to 241px and the
   control still lands on top of it. The padding only matters once the card
   is open and its height is auto again, which is what section 3 of this
   block does with it.

   SO THE FADE HAS TO DO THE WORK, AND ITS DIRECTION MATTERS

   .id-card-more::after is a 104px band pinned to the bottom of the card.
   linear-gradient(to bottom, ...) starts at the TOP of that band and ends
   at its bottom, so 0% is 104px above the card floor and 100% is 0px above
   it. Getting that backwards is what made a first attempt fail: reaching
   solid white at 68% put the opaque part in the bottom 33px, while the
   control occupies 16px to 46px above the floor - so the top 13px of every
   control was still sitting on a 96%-white wash with text behind it.

   Measured on the live page, all ten controls:

       control band, measured up from the card floor   16px .. 46px

   So the gradient has to be fully opaque from 50px above the floor and
   upwards, which is 54px from the top of a 104px band, or 52%.

   THE GRADIENT

       0%   transparent   104px above the floor
      22%   55% white      81px above the floor
      38%   88% white      64px above the floor
      52%   solid white    50px above the floor, and solid from here down

   The ramp is spread over three stops rather than two so the text dims
   gradually across roughly two lines instead of disappearing at a single
   edge. The last fully readable line sits above the transparent end, so
   nothing that is meant to be read is dimmed.

   THE CONTROL

   bottom:15px, 13px type to match the links elsewhere on the page, and a
   chevron that turns over when the card is open so the control reads as a
   toggle rather than a link. Its band is 16px to 46px above the floor, all
   of it inside the solid white.
   ================================================================ */

/* room below the text once the card is open and its height is auto again */
.id-card-clamp.id-card-open {
    padding-bottom: 30px;
}

/* solid white from 50px above the floor up to the control, then a ramp */
.id-card-more::after {
    height: 104px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 22%,
        rgba(255, 255, 255, .88) 38%,
        #FFFFFF 52%
    );
}

/* the control, sitting on solid white */
.id-more {
    bottom: 15px;
    font-size: 13px !important;
    gap: 7px;
}

.id-more i {
    font-size: 11px;
    line-height: 1;
    transition: transform .18s ease;
}

.id-card-open .id-more i {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {
    .id-more {
        left: 22px;
        bottom: 13px;
    }
}

@media (max-width: 480.98px) {
    .id-more {
        left: 18px;
        bottom: 11px;
    }
}

/* ================================================================
   14. THE READ MORE CONTROL MATCHES THE LINKS BESIDE IT
   Appended at the end. Nothing above this line was edited.

   WHAT WAS WRONG

   Section 13 set the control at 13px/700 and its comment claimed it
   matched the links elsewhere on the page. It did not. Measured on the
   live page:

       the control        13px  weight 700  rgb(13, 110, 253)
       a link in the card 15px  weight 600  rgb(13, 110, 253)

   Same colour, two different sizes and weights, sitting in the same card -
   which is a large part of why it read as clumsy rather than as part of
   the page.

   THE FIX

   The control now uses the same 15px and weight 600 as the links, so it
   reads as one of them. bottom moves from 15px to 13px because the taller
   control would otherwise push its top to 47px above the card floor, and
   the solid white band starts at 50px; at 13px the top sits at 44px, still
   comfortably inside it with nothing to overlap.

   Re-measured after: control 15px/600/700 depending on hover, colour
   unchanged, and its band still entirely on solid white.
   ================================================================ */

.id-more {
    bottom: 13px;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.id-more i {
    font-size: 12px;
}

/* ================================================================
   15. THE POLICY CARD TEXT IS JUSTIFIED SO THE RIGHT EDGE IS EVEN
   Appended at the end. Nothing above this line was edited.

   WHAT WAS WRONG

   The card body was flush left, so the right-hand edge of every paragraph
   fell away at a different point on each line. Measured on the live page,
   the spread between the longest and the shortest line across the policy
   cards was 56px to 99px on a phone. That is the ragged edge in the
   capture, where "ODLC's published fee policy specifically states that"
   ends well short of the margin the line above it reaches.

   .id-card p at line 262 carries text-align: left !important, which is
   what does it.

   JUSTIFYING WITHOUT OPENING THE GAPS

   Plain justify stretches only the spaces between words, which in a column
   this narrow produces a few very loose lines. Both justification methods
   were measured on the live page, on the same paragraphs, at four phone
   widths, worst single word gap and the right-edge spread:

       width   flush left          justify inter-word    justify inter-character
       305     65px spread          36px / 26px gap       34px /  6px gap
       345     99px spread          43px / 19px gap       41px /  6px gap
       399     92px spread          37px / 28px gap       35px /  6px gap
       465     56px spread           0px / 24px gap        0px /  5px gap

   inter-word is the wrong tool here: it buys a slightly straighter edge at
   the cost of a 19px to 28px hole in the worst line, which is exactly the
   "more spaces" that was not wanted.

   inter-character is what is used instead. It shares the stretch between
   the spaces and the letter spacing instead of putting all of it into the
   spaces, so the worst gap stays at 5px to 6px - barely above the 4px a
   normal space is worth - while the edge still straightens by roughly 60px
   of the 99px it was off by at 345px.

   This is the same conclusion footer.css reached when it chose
   inter-character for the footer columns, and for the same reason.

   WHY HYPHENATION IS NOT USED

   hyphens:auto is the usual answer for justified narrow columns and it was
   tried first. It does nothing in this browser: the declaration is
   honoured, the page does declare lang="en", and no word is ever broken -
   three test lines with hyphens:auto broke exactly as they do with
   hyphens:manual. footer.css:7864-7871 records the same measurement.
   Soft hyphens were tried there too and rejected as uneven, worst gap
   34.6px at 390px.

   WHICH TEXT

   The numbered policy cards only - the grid children and card 12. The
   opening Institutional Documents card and the Contact Information card are centred
   by design and are not matched by these selectors. Bullets are left out
   on purpose: each <li> is its own block, so every line in it is a last
   line and never stretches, while a bullet that does wrap to two lines
   would have its first line justified and its second not.

   Size, colour, leading, the fixed card height, the fade and the Read more
   control are all untouched - only the alignment of the body text changes.
   ================================================================ */

.id-grid > .id-card p,
.id-grid-3 > .id-card p,
.id-card-standalone p {
    text-align: justify !important;
    text-justify: inter-character !important;
}

/* ================================================================
   16. THE TITLE IS JUST A HEADING - NO CARD AROUND IT
   Appended at the end. Nothing above this line was edited.

   The page title sat inside a white card - a fill, a hairline border, an
   18px radius, a soft shadow and 36px 40px of padding. Section 1 is now a
   numbered card of its own, so what is left inside the title block is a
   heading and nothing else, and the box around it is the thing drawing
   the eye.

   So the surface goes and the heading stays, sitting directly on the
   section's own background. The rule under it went with the surface: a
   hairline separating a heading from nothing is not a divider between two
   things.

   The heading is untouched - still 26px, weight 800, still centred, still
   #0B1F4D from the existing intro h2 rule. That is why the card class is
   left on the element rather than removed from the markup: the class is
   what still supplies the heading's own styling.

   margin-bottom:24px is kept deliberately. The rule that spaces the rows
   apart does not match between a card and a grid, so this is what holds
   the first card 24px below the heading.

   No other card on this page is matched - the intro class appears once, on
   that one element, and the numbered cards do not carry it.
   ================================================================ */

.id-card-intro {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.id-card-intro .id-rule {
    display: none !important;
}

/* ================================================================
   19  DOCUMENT PANELS - ORDERS, MoUs, AGREEMENTS

   Three full-width panels hold the actual documents. No document has
   been supplied yet, so each panel carries an EMPTY STATE and nothing
   else. Nothing is invented here - no order number, no date, no
   department, no reference, no PDF link. The action buttons are
   rendered disabled on purpose, so the panel shows the intended layout
   without offering a link that goes nowhere.

   WHEN A REAL PDF ARRIVES
   Replace the .id-doc-empty block inside that panel with a document
   row, and change .id-btn from <button disabled> to <a href="...">.
   No rule in this file needs to change.
   ================================================================ */

.id-doc-panel {
    margin-top: 24px;
    padding: 34px 32px 30px;
    text-align: center;
}

.id-doc-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 6px;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.4px;
}

.id-doc-head i {
    color: #0D6EFD;
    font-size: 24px;
    flex: 0 0 auto;
}

.id-doc-lead {
    max-width: 760px;
    margin: 0 auto 22px !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    text-align: center !important;
}

/* what this panel will eventually list, stated as a promise not a record */
.id-doc-kinds {
    list-style: none;
    margin: 0 auto 22px;
    padding: 0;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.id-doc-kinds li {
    margin: 0;
    padding: 7px 16px;
    background: #F1F5FC;
    border: 1px solid #E4EAF8;
    border-radius: 999px;
    color: #33415C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

.id-doc-empty {
    max-width: 900px;
    margin: 0 auto;
    padding: 26px 28px;
    background: #F8FAFD;
    border: 2px dashed #D5DFF0;
    border-radius: 14px;
}

.id-doc-empty-title {
    margin: 0 0 10px;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

.id-doc-empty p {
    max-width: 720px;
    margin: 0 auto 16px;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    text-align: center;
}

.id-doc-empty p:last-of-type {
    margin-bottom: 0;
}

.id-doc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

/* action button - the disabled state is what ships today */
.id-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: not-allowed;
    background: #EDF1F8;
    border: 1px solid #DCE3EF;
    color: #97A3B6;
}

.id-btn i {
    font-size: 14px;
}

.id-doc-badge {
    display: inline-block;
    margin: 18px auto 0;
    padding: 8px 18px;
    background: #0B1F4D;
    border-radius: 999px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .id-doc-panel {
        padding: 26px 20px 24px;
    }

    .id-doc-head {
        font-size: 18px;
        gap: 9px;
    }

    .id-doc-head i {
        font-size: 20px;
    }

    .id-doc-empty {
        padding: 20px 16px;
    }

    .id-doc-empty-title {
        font-size: 15px;
    }

    .id-doc-actions {
        gap: 10px;
    }

    .id-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 11px 14px;
        font-size: 12px;
    }
}


/* ================================================================
   20  KEY-VALUE ROW

   Section 7 lists the fields a published document will carry. Rendered
   as a definition-style row so the page shows the shape of the record
   without inventing one.
   ================================================================ */

.id-kv {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #E4EAF8;
    border: 1px solid #E4EAF8;
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
}

.id-kv li {
    margin: 0;
    padding: 10px 14px;
    background: #FFFFFF;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

@media (max-width: 767px) {
    .id-kv {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================================================================
   21  THE TWO DOCUMENT HUBS

   Two large cards side by side, each a doorway to one class of
   document. They are equal height because the grid stretches them, and
   the call to action is pushed to the bottom with margin-top:auto so
   the two buttons sit on the same line even when the titles differ in
   length.

   Appended only.
   ================================================================ */

.id-intro-lead {
    max-width: 780px;
    margin: 12px auto 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    text-align: center !important;
}

.id-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.id-hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
    padding: 38px 32px 34px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.id-hub-card:hover {
    border-color: #C9DCF7;
    box-shadow: 0 14px 30px rgba(16, 42, 90, .10);
    transform: translateY(-2px);
}

.id-hub-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    background: #EAF2FD;
    border-radius: 16px;
    color: #0D6EFD;
    font-size: 30px;
    flex: 0 0 auto;
}

.id-hub-title {
    margin: 0 0 8px !important;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.4px;
}

.id-hub-sub {
    margin: 0;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
}

/* margin-top:auto is what pins the button to the floor of the card, so
   both cards in the row line up however the titles wrap */
.id-hub-cta {
    margin-top: auto;
    padding-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap .2s ease, color .2s ease;
}

.id-hub-cta:hover,
.id-hub-cta:focus-visible {
    color: #0A4FB0;
    gap: 13px;
}

.id-hub-cta:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 4px;
    border-radius: 4px;
}

.id-hub-cta i {
    font-size: 15px;
}


/* ================================================================
   22  DOCUMENT ACCESS TABLE

   Document / Type / Date / Action. The action is a span rather than a
   button or a link, so it cannot be clicked into nothing while no PDF
   exists. Once a document is published, swap the span for an <a>.
   ================================================================ */

.id-doc-access {
    padding: 34px 32px 30px;
}

.id-doc-access-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 0 0 8px !important;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.4px;
}

.id-doc-access-title i {
    color: #0D6EFD;
    font-size: 23px;
    flex: 0 0 auto;
}

.id-doc-access-lead {
    max-width: 720px;
    margin: 0 auto 24px !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    text-align: center !important;
}

/* the wrapper scrolls sideways rather than letting a wide table push
   the whole page into horizontal scroll on a phone */
.id-table-wrap {
    max-width: 940px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #E4EAF8;
    border-radius: 12px;
    background: #FFFFFF;
}

.id-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14.5px;
}

.id-table th,
.id-table td {
    padding: 15px 20px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #E9EEF8;
}

/* the head row */
.id-table thead th {
    background: #0B1F4D;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.id-table thead th:first-child {
    border-top-left-radius: 12px;
}

.id-table thead th:last-child {
    border-top-right-radius: 12px;
}

/* the document name reads as the row's own label, not as a header */
.id-table tbody th {
    color: #0B1F4D;
    font-weight: 700;
    white-space: nowrap;
}

.id-table tbody td {
    color: #33415C;
}

.id-table tbody tr:last-child th,
.id-table tbody tr:last-child td {
    border-bottom: 0;
}

.id-table tbody tr:nth-child(even) {
    background: #F8FAFD;
}

.id-td-date {
    color: #97A3B6 !important;
    text-align: center !important;
    white-space: nowrap;
}

/* the action column lines up regardless of how wide the labels above are */
.id-table tbody td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* the not-yet-available action, sitting in the same place a real link
   will later sit */
.id-btn-off {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #EDF1F8;
    border: 1px solid #DCE3EF;
    border-radius: 8px;
    color: #97A3B6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: not-allowed;
}

.id-doc-access-note {
    max-width: 720px;
    margin: 18px auto 0 !important;
    color: #97A3B6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    text-align: center !important;
}


/* ================================================================
   23  COMING SOON NOTICE

   The state the page is actually in today: the document classes are
   named, and the absence of the documents is stated plainly rather
   than hidden behind a plausible-looking sample.
   ================================================================ */

.id-coming {
    margin-top: 24px;
    padding: 36px 32px 32px;
    text-align: center;
    background: #F8FAFD;
    border-color: #DCE3EF;
}

.id-coming-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    background: #FFFFFF;
    border: 1px solid #E4EAF8;
    border-radius: 50%;
    color: #0D6EFD;
    font-size: 25px;
}

.id-coming-title {
    margin: 0 0 12px !important;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.4px;
}

.id-coming-text {
    max-width: 760px;
    margin: 0 auto 10px;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
}

.id-coming-text:last-of-type {
    margin-bottom: 0;
}


/* ================================================================
   24  RESPONSIVE

   The hub grid drops to one column and the table stops trying to fit
   four columns on a phone.
   ================================================================ */

@media (max-width: 767px) {

    .id-hub-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .id-hub-card {
        padding: 28px 20px 26px;
    }

    .id-hub-title {
        font-size: 18px;
    }

    .id-hub-sub {
        font-size: 14px;
    }

    .id-doc-access {
        padding: 26px 18px 24px;
    }

    .id-doc-access-title {
        font-size: 18px;
        gap: 9px;
    }

    .id-doc-access-title i {
        font-size: 19px;
    }

    /* keep every cell on one line so the table scrolls as a unit instead
       of wrapping into an unreadable stack */
    .id-table {
        min-width: 520px;
    }

    .id-table th,
    .id-table td {
        padding: 12px 14px;
        font-size: 13.5px;
    }

    .id-coming {
        padding: 28px 20px 26px;
    }

    .id-coming-title {
        font-size: 18px;
    }

    .id-coming-text {
        font-size: 14px;
    }
}

/* ================================================================
   25  CENTRE EVERYTHING

   This page is a document index, not policy prose. There is no
   paragraph of running text anywhere on it, so the justify-and-leftover
   rules that govern the other policy pages do not apply here and every
   block reads better centred.

   Nothing above is edited. Each rule below either overrides an
   alignment already declared, or supplies one that was never set.

   The one exception is the document table. Centring a table cell would
   make the Document column ragged and much harder to scan down, so it
   stays left and only its own caption row is centred - a table that
   centres its data stops being a table you can read.
   ================================================================ */

/* ---------- the two hub cards ---------- */

.id-hub-card,
.id-hub-title,
.id-hub-sub {
    text-align: center !important;
}

.id-hub-sub {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- document access ---------- */

.id-doc-access-title,
.id-doc-access-lead,
.id-doc-access-note {
    text-align: center !important;
}

/* the title is a flex row so the icon can sit beside the words; the
   flex line itself has to be centred or the pair drifts left */
.id-doc-access-title {
    justify-content: center;
}

/* ---------- coming soon ---------- */

.id-coming-title,
.id-coming-text {
    text-align: center !important;
}

/* ---------- contact ---------- */

.id-card-contact .id-contact-block h4,
.id-card-contact .id-contact-block p {
    text-align: center !important;
}

/* the address, phone and email stack in the middle of each half rather
   than hanging off its left edge */
.id-card-contact .id-contact-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.id-card-contact .id-contact-block > * {
    margin-left: auto;
    margin-right: auto;
}

.id-card-contact .id-contact-block h4 {
    margin-top: 4px;
}

/* ---------- the table's own header row ---------- */

/* the column headings centre over their columns so the row reads as one
   band; the data cells underneath deliberately stay left-aligned */
.id-table thead th {
    text-align: center;
}

.id-table thead th:first-child,
.id-table thead th:last-child {
    text-align: center;
}

.id-table tbody td:last-child,
.id-table tbody th:last-child {
    text-align: center;
}

.id-td-date {
    text-align: center !important;
}


/* ================================================================
   26  NARROW SCREENS

   Centring plus a four-column table does not fit a phone. The table
   keeps its own sideways scroll and is given a little breathing room so
   the columns are not jammed against the wrapper edge.
   ================================================================ */

@media (max-width: 767px) {

    .id-table-wrap {
        border-radius: 10px;
    }

    .id-table thead th,
    .id-table tbody th,
    .id-table tbody td {
        text-align: center;
    }

    .id-hub-sub {
        max-width: none;
    }
}

/* ================================================================
   27  CENTRING - SPECIFICITY CORRECTION

   Section 25 did not take on four of these blocks, and the reason is
   worth writing down because it will bite again.

   WHY THEY STAYED LEFT
   The inherited template carries, at line 269:

       .id-card p { ... text-align: left !important; }

   That is two selectors wide - one class plus one element - so it
   carries specificity (0,1,1). Section 25 declared its own rules at
   one class wide, (0,1,0):

       .id-hub-sub        { text-align: center !important; }

   Both carry !important, so the browser goes to specificity, and
   (0,1,1) beats (0,1,0). The inherited rule won. That is why the hub
   subtitle, the document-access lead, the access note and the coming
   soon text all still read left while the block headings had already
   been centred by an earlier, wider rule.

   THE FIX
   Scope each one under its own card, which lifts them to (0,2,1) and
   puts them safely above the inherited (0,1,1). Section 25's heading
   rules are left alone - those already resolved correctly and
   rewriting them would change nothing.

   Confirmed in the live page before this block was written: computed
   text-align was still "left" on all four.
   ================================================================ */

.id-hub-card .id-hub-sub,
.id-card .id-doc-access-lead,
.id-doc-access .id-doc-access-note,
.id-coming .id-coming-text {
    text-align: center !important;
}

/* the hub subtitle is width-limited so a short line does not stretch
   edge to edge, and the margins centre the box it sits in */
.id-hub-card .id-hub-sub {
    max-width: 380px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ================================================================
   28  REAL VIEW / DOWNLOAD ACTIONS

   The table rows are no longer hand-written, so the actions are two
   links per row instead of one inert span. View opens the PDF in a new
   tab; Download goes through the PHP handler so the browser saves the
   file under its own name.

   They are <a> elements, not <button>, because they navigate. Keyboard
   and middle-click behave correctly for free that way.
   ================================================================ */

.id-td-action {
    text-align: center !important;
    white-space: nowrap;
}

.id-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.id-act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.id-act i {
    font-size: 13px;
    line-height: 1;
}

/* view - outlined, the quieter of the two */
.id-act-view {
    background: #FFFFFF;
    border: 1px solid #C9DCF7;
    color: #0D6EFD;
}

.id-act-view:hover,
.id-act-view:focus-visible {
    background: #EAF2FD;
    border-color: #0D6EFD;
}

/* download - filled, the primary action in the cell */
.id-act-dl {
    background: #0D6EFD;
    border: 1px solid #0D6EFD;
    color: #FFFFFF;
}

.id-act-dl:hover,
.id-act-dl:focus-visible {
    background: #0A4FB0;
    border-color: #0A4FB0;
}

.id-act:focus-visible {
    outline: 2px solid #0B1F4D;
    outline-offset: 2px;
}

/* the small SAMPLE marker beside a document name */
.id-tag {
    display: inline-block;
    margin-left: 9px;
    padding: 3px 9px;
    background: #FFF4E5;
    border: 1px solid #F5D9AE;
    border-radius: 999px;
    color: #8A5A08;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.id-row-sample th {
    color: #0B1F4D;
}


/* ================================================================
   29  THE CAPTION THAT WAS SHOWING

   The <caption> element was written as screen-reader-only text, but
   .id-sr was never defined in this stylesheet - the class came from
   another page's CSS. With no rule behind it, the caption rendered as
   ordinary visible text under the table, which is what it was doing in
   the capture.

   Defined here rather than removed, because the caption is useful: it
   is what a screen reader announces when the table is reached.
   ================================================================ */

.id-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ================================================================
   30  NARROW SCREENS FOR THE ACTIONS

   Two buttons side by side do not fit a phone, so the labels shorten
   to icons only below 767px. aria-label carries the full wording so the
   link is still announced correctly. The row height does not change.
   ================================================================ */

@media (max-width: 767px) {

    .id-actions {
        gap: 6px;
    }

    .id-act {
        padding: 8px 11px;
    }

    .id-act-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .id-tag {
        margin-left: 0;
        margin-top: 4px;
        display: block;
        width: fit-content;
    }
}

/* ================================================================
   31  THE TABLE, CLEANED UP

   Three defects fixed here. None of the rules above are edited.

   DEFECT 1 - THE DOWNLOAD LABEL WAS INVISIBLE
   Section 28 set .id-act-dl to color:#FFFFFF so white words sat on the
   blue button. The inherited template carries, earlier in this file:

       .id-card a { color: #0D6EFD; }

   That is one class plus one element, so (0,1,1). My .id-act-dl was one
   class, so (0,1,0). The template won and the label was painted
   #0D6EFD on a #0D6EFD background - blue on blue, unreadable, while
   measuring as present and visible in the DOM.

   Fix: scope the action rules under .id-td-action, which lifts them to
   (0,2,0) and puts them safely above (0,1,1).

   DEFECT 2 - THE TYPE COLUMN WRAPPED TO TWO LINES
   "Institutional Agreements and MoUs" broke across lines in an earlier
   capture because the table auto-sized its columns. Fixed below
   with table-layout:fixed and declared column widths, so each column
   gets a deliberate share and the rows stay one line each.

   DEFECT 3 - ROWS READ LOOSELY
   The rows had no consistent vertical rhythm and the action pair was
   ragged, because "View PDF" and "Download" are different lengths.
   Both buttons are now given the same width so they form one tidy
   column, and the cell padding is uniform.
   ================================================================ */

/* ---------- fix 1: the action colours, at a specificity that holds ---------- */

.id-td-action .id-act,
.id-td-action .id-act i,
.id-td-action .id-act .id-act-label {
    color: #FFFFFF;
}

.id-td-action .id-act-view,
.id-td-action .id-act-view i,
.id-td-action .id-act-view .id-act-label {
    color: #0D6EFD;
}

.id-td-action .id-act-view:hover,
.id-td-action .id-act-view:focus-visible,
.id-td-action .id-act-view:hover i,
.id-td-action .id-act-view:hover .id-act-label,
.id-td-action .id-act-view:focus-visible i,
.id-td-action .id-act-view:focus-visible .id-act-label {
    color: #0A4FB0;
}

.id-td-action .id-act-dl:hover,
.id-td-action .id-act-dl:focus-visible,
.id-td-action .id-act-dl:hover i,
.id-td-action .id-act-dl:hover .id-act-label,
.id-td-action .id-act-dl:focus-visible i,
.id-td-action .id-act-dl:focus-visible .id-act-label {
    color: #FFFFFF;
}


/* ---------- fix 2: declared column widths ---------- */

.id-doc-access .id-table {
    table-layout: fixed;
}

.id-doc-access .id-table th,
.id-doc-access .id-table td {
    padding: 17px 18px;
    vertical-align: middle;
}

.id-doc-access .id-table th:nth-child(1),
.id-doc-access .id-table td:nth-child(1) {
    width: 39%;
}

.id-doc-access .id-table th:nth-child(2),
.id-doc-access .id-table td:nth-child(2) {
    width: 19%;
}

.id-doc-access .id-table th:nth-child(3),
.id-doc-access .id-table td:nth-child(3) {
    width: 11%;
}

.id-doc-access .id-table th:nth-child(4),
.id-doc-access .id-table td:nth-child(4) {
    width: 31%;
}


/* ---------- fix 3: one line per row, one tidy action column ---------- */

/* every cell is centred, so nothing hangs off a left edge and the four
   columns read as four even blocks */
.id-doc-access .id-table tbody th,
.id-doc-access .id-table tbody td {
    text-align: center;
}

/* the action pair is the one thing that still sets its own width, and it
   sets it to the same width for every row so the buttons form a column
   rather than a ragged edge */
.id-td-action .id-act {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

.id-td-action .id-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}


/* ---------- clean-up: quieter rows, clear separation ---------- */

.id-doc-access .id-table tbody tr {
    border-bottom: 1px solid #EDF1F8;
}

.id-doc-access .id-table tbody tr:last-child {
    border-bottom: 0;
}

.id-doc-access .id-table tbody tr:nth-child(even) {
    background: #FAFCFE;
}

/* a row reads as one thing when hovered, which also tells a visitor
   which row the two buttons belong to */
.id-doc-access .id-table tbody tr:hover {
    background: #F2F7FE;
}

.id-doc-access .id-table tbody th {
    font-weight: 700;
    letter-spacing: -.1px;
}

/* the document name may carry a Sample chip beside it, so it is the one
   cell allowed to wrap rather than overflow */
.id-doc-access .id-table tbody th:first-child {
    white-space: normal;
    padding-left: 18px;
    padding-right: 12px;
}


/* ---------- the heading block above the table ---------- */

.id-doc-access-lead {
    max-width: 620px;
}

.id-doc-access-note {
    max-width: 660px;
}


/* ================================================================
   32  SAMPLE CHIP, TIDIED

   It sat hard against the document name with a wide gap. Tightened, and
   it now sits inside the cell's own text flow so centring handles both
   parts together.
   ================================================================ */

.id-doc-access .id-tag {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 9.5px;
    letter-spacing: .7px;
    vertical-align: 2px;
}


/* ================================================================
   33  NARROW SCREENS

   Fixed widths are meaningless once the table is forced wider than the
   phone, so the percentages are dropped and the table goes back to
   sizing on content while still scrolling as one unit.
   ================================================================ */

@media (max-width: 767px) {

    .id-doc-access .id-table {
        table-layout: auto;
        min-width: 560px;
    }

    .id-doc-access .id-table th,
    .id-doc-access .id-table td {
        padding: 13px 12px;
    }

    .id-doc-access .id-table th:nth-child(1),
    .id-doc-access .id-table td:nth-child(1),
    .id-doc-access .id-table th:nth-child(2),
    .id-doc-access .id-table td:nth-child(2),
    .id-doc-access .id-table th:nth-child(3),
    .id-doc-access .id-table td:nth-child(3),
    .id-doc-access .id-table th:nth-child(4),
    .id-doc-access .id-table td:nth-child(4) {
        width: auto;
    }

    .id-td-action .id-actions {
        max-width: none;
        gap: 8px;
    }

    .id-doc-access .id-tag {
        margin-left: 0;
        margin-top: 5px;
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ================================================================
   34  EQUAL ROW HEIGHTS

   After section 31 the four rows measured 86 / 78 / 86 / 78 instead of
   one shared height, and oddly the rows with the SHORTER document names
   were the taller ones. That inversion is the clue.

   WHAT WAS HAPPENING
   The Sample chip is display:inline-block. Its own box is 21px tall
   (14px line-height + 2px padding each side + 1px border each side).
   With vertical-align:2px its bottom edge sits 2px above the text
   baseline, so its top edge lands at:

       baseline - 2 - 21  =  baseline - 23

   The document name runs at line-height 25.6px on a 16px font, whose
   ascender reaches roughly baseline - 14.7. So the chip's top edge is
   about 8px ABOVE the tallest thing the line would otherwise contain,
   and the line box grows by that 8px. That is exactly the 86 - 78 = 8
   discrepancy, and it is why the cause was not the name length at all.

   THE FIX
   Stop letting the chip dictate the line box. Two changes together:

     1. the document-name cell gets line-height 30px, so its own strut is
        comfortably taller than the chip;
     2. the chip gets vertical-align:middle, so it is centred on the
        line rather than raised above it, and its box is trimmed to 20px.

   Chip 20px now sits inside a 30px line box, so no row can be stretched
   by it and every row resolves to the same height - the one the action
   cell needs, 43px of button plus 17px of padding above and below.
   ================================================================ */

.id-doc-access .id-table tbody th:first-child {
    line-height: 30px;
}

.id-doc-access .id-tag {
    display: inline-block;
    vertical-align: middle;
    line-height: 14px;
    padding: 2px 8px;
    border-width: 1px;
    height: 20px;
}

/* the chip is only ever present on a sample row, so a real document row
   must not be left with a taller line-height than it needs - the two
   are balanced by the 30px above, but this keeps the type row identical
   to the others rather than relying on the chip to set it */
.id-doc-access .id-table tbody th:not(:has(.id-tag)) {
    line-height: 30px;
}


/* ================================================================
   35  ROW HEIGHT, DECLARED

   Belt and braces. The action cell is the tallest thing in every row by
   design - a 43px button inside 17px of padding top and bottom - so the
   row height is stated outright. If a future document name is longer
   than the column allows, the row grows rather than clipping, because
   min-height is a floor and not a ceiling.
   ================================================================ */

.id-doc-access .id-table tbody tr {
    min-height: 77px;
}

/* ================================================================
   36  TABLE TYPOGRAPHY, ACTUALLY IN FORCE

   Section 34's line-height had no effect and the reason is in
   global-typography.css, which this page loads second:

       th, td {
           font-family: Arial, Helvetica, sans-serif !important;
           font-size:  16px !important;
           line-height: 1.6 !important;
       }

   The !important on a bare element selector beats any non-important
   declaration no matter how specific the selector is. So every cell in
   this table was pinned at 16px with a computed line-height of 25.6px,
   and section 34's 30px was discarded without complaint - the rule
   matched, it simply lost.

   Overriding an !important requires an !important of our own. These
   carry higher specificity as well, so they win outright.

   16px is also too large for a table cell; 15px is the right size and
   is what makes the columns fit below.
   ================================================================ */

.id-doc-access .id-table thead th,
.id-doc-access .id-table tbody th,
.id-doc-access .id-table tbody td {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    line-height: 26px !important;
}

/* the column headings keep their own smaller, letter-spaced size */
.id-doc-access .id-table thead th {
    font-size: 12px !important;
    line-height: 20px !important;
    letter-spacing: 1px;
}


/* ================================================================
   37  COLUMN WIDTHS THAT FIT

   Measured at a 912px viewport, where the table is 764px wide and the
   longest document name plus its Sample chip needed 308px while the
   Document column only had 273px to give. That is why "Memorandum of
   Understanding" wrapped to a second line.

   At 15px the name needs 224px and the chip 52px, so 276px is the real
   requirement. The widths below are sized from those measurements, not
   guessed: 40% of 764 is 306, less 28px of padding, leaves 278.

   The Sample chip is trimmed at the same time - 9px type, 7px of side
   padding - because it is a secondary label and should not be competing
   for the width the document name needs.
   ================================================================ */

.id-doc-access .id-table th:nth-child(1),
.id-doc-access .id-table td:nth-child(1) {
    width: 40%;
}

.id-doc-access .id-table th:nth-child(2),
.id-doc-access .id-table td:nth-child(2) {
    width: 21%;
}

.id-doc-access .id-table th:nth-child(3),
.id-doc-access .id-table td:nth-child(3) {
    width: 11%;
}

.id-doc-access .id-table th:nth-child(4),
.id-doc-access .id-table td:nth-child(4) {
    width: 28%;
}

.id-doc-access .id-table th,
.id-doc-access .id-table td {
    padding: 16px 14px;
}

.id-doc-access .id-table tbody th:first-child {
    padding-left: 16px;
    padding-right: 10px;
    line-height: 26px !important;
}

.id-doc-access .id-tag {
    font-size: 9px !important;
    line-height: 13px !important;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-width: 1px;
    height: 19px;
    margin-left: 7px;
    vertical-align: middle;
}


/* ================================================================
   38  ACTION COLUMN, AND WHAT TO DO WHEN THE FOUR COLUMNS WILL NOT FIT

   Two full labels ("View PDF", "Download") side by side need about
   230px of Action column. Below a 1200px viewport the table cannot carry
   that plus three readable columns, so the labels are dropped and the
   icons carry the meaning.

   The labels are not deleted - they stay in the markup and are hidden
   from view only, so a screen reader still announces "View PDF" and the
   title attribute gives the same wording on hover. The buttons become
   equal squares, which is also tidier than two rectangles of different
   widths.
   ================================================================ */

.id-td-action .id-actions {
    max-width: 240px;
    gap: 8px;
}

.id-td-action .id-act {
    padding: 10px 14px;
    font-size: 11px !important;
    line-height: 20px !important;
    border-radius: 9px;
}

@media (max-width: 1199px) {

    /* the label goes to screen readers only */
    .id-td-action .id-act-label {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .id-td-action .id-actions {
        max-width: 116px;
        gap: 10px;
    }

    .id-td-action .id-act {
        padding: 0;
        height: 40px;
        justify-content: center;
    }

    .id-td-action .id-act i {
        font-size: 15px;
    }

    /* the space the labels gave back goes to the columns that need it */
    .id-doc-access .id-table th:nth-child(1),
    .id-doc-access .id-table td:nth-child(1) {
        width: 46%;
    }

    .id-doc-access .id-table th:nth-child(2),
    .id-doc-access .id-table td:nth-child(2) {
        width: 23%;
    }

    .id-doc-access .id-table th:nth-child(3),
    .id-doc-access .id-table td:nth-child(3) {
        width: 11%;
    }

    .id-doc-access .id-table th:nth-child(4),
    .id-doc-access .id-table td:nth-child(4) {
        width: 20%;
    }
}

@media (max-width: 767px) {

    .id-doc-access .id-table {
        table-layout: auto;
        min-width: 520px;
    }

    .id-doc-access .id-table th:nth-child(1),
    .id-doc-access .id-table td:nth-child(1),
    .id-doc-access .id-table th:nth-child(2),
    .id-doc-access .id-table td:nth-child(2),
    .id-doc-access .id-table th:nth-child(3),
    .id-doc-access .id-table td:nth-child(3),
    .id-doc-access .id-table th:nth-child(4),
    .id-doc-access .id-table td:nth-child(4) {
        width: auto;
    }

    .id-doc-access .id-table thead th,
    .id-doc-access .id-table tbody th,
    .id-doc-access .id-table tbody td {
        font-size: 13.5px !important;
        line-height: 22px !important;
        padding: 12px 10px;
    }

    .id-td-action .id-actions {
        max-width: none;
    }
}

/* ================================================================
   39  THE WHOLE PAGE, TOP TO BOTTOM, CENTRED

   Sections 25 to 27 centred the blocks one at a time. This is the
   single pass that covers the entire page in document order, including
   the banner, which those sections deliberately left alone because the
   banner is left-aligned on every other page of the site.

   THAT EXCEPTION IS REVERSED HERE, on this page only. If the banner
   should stay left-aligned to match the other seven pages, delete this
   block and nothing else changes.

   The table's data cells are already centred by section 31 and are not
   repeated here.

   WHY !important IS NEEDED AGAIN
   global-typography.css loads second and pins th, td at font-size 16px
   and line-height 1.6 with !important. Any declaration that has to
   win against it must carry !important as well, whatever its
   specificity. Every rule below does.

   The banner needed the same treatment: the template sets
   .id-banner-content p to text-align:left !important at (0,1,1).
   ================================================================ */

/* ---------- the banner ---------- */

.id-banner-content,
.id-banner-content p,
.id-banner-content h1,
.id-banner-content h1 span,
.id-banner-badge,
.id-banner-badge i {
    text-align: center !important;
}

/* the badge is an inline-flex row; centring the text means centring the
   whole chip, not the words inside it */
.id-banner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* the heading is a two-part flex row - the plain word and the accented
   word - and they are centred as one unit rather than drifting apart */
.id-banner-content h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
}

.id-banner-content h1 span {
    display: block;
    text-align: center !important;
}

.id-banner-line {
    margin-left: auto;
    margin-right: auto;
}


/* ---------- the title block ---------- */

.id-card-intro,
.id-card-intro h2,
.id-card-intro .id-subhead,
.id-card-intro .id-intro-lead {
    text-align: center !important;
}


/* ---------- the two hub cards ---------- */

.id-hub-card,
.id-hub-card h3,
.id-hub-card .id-hub-sub {
    text-align: center !important;
}

.id-hub-card .id-hub-sub {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------- document access ---------- */

.id-doc-access,
.id-doc-access-title,
.id-doc-access-lead,
.id-doc-access-note {
    text-align: center !important;
}

.id-doc-access-title {
    justify-content: center;
}


/* ---------- coming soon ---------- */

.id-coming,
.id-coming-title,
.id-coming-text {
    text-align: center !important;
}


/* ---------- contact ---------- */

.id-card-contact,
.id-card-contact h2,
.id-card-contact .id-contact-lead,
.id-card-contact .id-contact-block,
.id-card-contact .id-contact-block h4,
.id-card-contact .id-contact-block p {
    text-align: center !important;
}

.id-card-contact .id-contact-block {
    align-items: center;
}


/* ---------- the table, all three cell types ---------- */

.id-doc-access .id-table thead th,
.id-doc-access .id-table tbody th,
.id-doc-access .id-table tbody td {
    text-align: center !important;
}


/* ================================================================
   40  ROW HEIGHT, EQUAL AND DECLARED

   With seven documents the rows measured 72 / 73 / 73 / 72 - a 1px
   difference. It comes from the Sample chip: at vertical-align:middle
   its baseline is resolved against the strut and can land a fraction
   either side, so a row whose name is a pixel taller ends up 1px taller
   itself.

   A table row height treats the value as a floor, not a ceiling, so
   declaring 74px makes every row exactly 74px while still allowing a
   longer document name in future to grow the row rather than clip it.
   ================================================================ */

.id-doc-access .id-table tbody tr {
    height: 74px;
}


/* ================================================================
   41  THE DATE COLUMN, NOW THAT IT HAS CONTENT

   With a real date in every row the column has to hold
   "12 Mar 2026" rather than a dash. At 15px that is about 72px, and the
   column is 11% of the table, so it needs a hair more room. 13% takes
   it from the Action column, which has spare space now that the
   buttons are icon-sized below 1200px.
   ================================================================ */

.id-doc-access .id-table th:nth-child(3),
.id-doc-access .id-table td:nth-child(3) {
    width: 13%;
    white-space: nowrap;
}

.id-doc-access .id-table th:nth-child(1),
.id-doc-access .id-table td:nth-child(1) {
    width: 39%;
}

.id-doc-access .id-table th:nth-child(4),
.id-doc-access .id-table td:nth-child(4) {
    width: 27%;
}

/* ================================================================
   42  THE SAMPLE CHIP ON ITS OWN LINE

   With seven documents the three longest names - "Memorandum of
   Understanding", "Learning Centre Authorisation" and "Affiliation &
   Accreditation Record" - pushed their rows to 85px while the short
   ones stayed at 74px.

   The cause is width, and no amount of tuning fixes it permanently. The
   chip needs about 52px, and at a 912px viewport the Document column
   has 271px to share between the two. Every combination of font size
   and chip padding that fits a short document name fails one of the long
   ones at some width, and the row that wraps is the row that grows.

   The fix is structural rather than numeric: the chip drops to its own
   line under the name, centred, in every row.

   That gives three guarantees at once:
     - the name always has the full column width, so it never wraps;
     - the chip is always in the same place, so the column reads evenly;
     - every row is the same height whether or not it carries a chip,
       because the chip is present on all of them.

   The row height is stated as 82px, which is 26 for the name, 24 for
   the chip and 32 of padding. A row is a floor, so a longer name in
   future grows the row rather than being clipped.
   ================================================================ */

.id-doc-access .id-table tbody th:first-child {
    line-height: 26px !important;
}

.id-doc-access .id-table tbody th:first-child .id-tag {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 5px auto 0;
    vertical-align: baseline;
}

.id-doc-access .id-table tbody tr {
    height: 82px;
}


/* ================================================================
   43  AND ON A PHONE

   The chip is centred on its own line here as well rather than being
   allowed to fall wherever the wrap puts it.
   ================================================================ */

@media (max-width: 767px) {

    .id-doc-access .id-table tbody th:first-child .id-tag {
        margin: 5px auto 0;
        width: fit-content;
    }

    .id-doc-access .id-table tbody tr {
        height: 76px;
    }
}

/* ================================================================
   44  ROWS EVEN AT EVERY WIDTH

   Measured, not estimated. At the rendered 15px bold, the seven names
   are:

       Memorandum of Association              207px   <- measured on the template page
       Rules & Regulations                    143px
       Institutional Policies                 152px
       Memorandum of Understanding             227px
       Institutional Agreement                167px
       Learning Centre Authorisation           216px
       Affiliation & Accreditation Record      239px   <- widest

   The Document column is 39% of the table and carries 26px of padding,
   so column 1 must be at least (239 + 26) / 0.39 = 680px before the
   longest name can never wrap.

   WHY THE WIDTHS FOUGHT EACH OTHER
   Section 38 gave column 1 46% below 1200px, because the action column
   was tight while the buttons were icon-sized. Section 41 then gave it
   39% for the date column. A media query carries no extra specificity,
   so section 41 won everywhere - including at 768px, where the table is
   only 628px wide. 39% of 628 is 245px, less 26px of padding is 219px
   available, and the 239px name wrapped. That is why rows 4 and 7 were
   109px tall at tablet width while the rest were 83px.

   THE FIX
   Below 900px the table gets a 620px floor and drops to 13.5px, where
   the widest name is 215px. 39% of 620 is 242px, less padding is 216px
   available, which clears 215px. The name therefore cannot wrap at any
   width, and the 620px floor means the wrapper scrolls rather than
   squeezing a column that has already run out of room.
   ================================================================ */

@media (max-width: 899px) {

    .id-doc-access .id-table {
        min-width: 620px;
    }

    .id-doc-access .id-table thead th,
    .id-doc-access .id-table tbody th,
    .id-doc-access .id-table tbody td {
        font-size: 13.5px !important;
        line-height: 22px !important;
    }

    .id-doc-access .id-table tbody tr {
        height: 76px;
    }
}

/* ================================================================
   45  THE SAMPLE CHIP REMOVED

   The chip has been taken out of the markup, so the document name is
   the only thing in its cell again. Two rules that existed purely to
   hold the chip on a second line are undone here.

   WHY THE ROW HEIGHT CHANGES
   Section 42 gave the chip its own line under the name and set the row
   to 82px, because a 26px name line plus a 24px chip plus 32px of
   padding does not fit in 74px. With no chip there is nothing on the
   second line, so 82px would leave 24px of empty space under every
   document name. The row goes back to 74px, which is what the action
   button needs: 40px of button and 17px of padding above and below.

   The .id-tag rules above are left in place rather than deleted. They
   match nothing now, cost nothing, and keeping them means the chip can
   be switched back on by restoring the markup alone.
   ================================================================ */

.id-doc-access .id-table tbody tr {
    height: 74px;
}

.id-doc-access .id-table tbody th:first-child {
    line-height: 26px !important;
    padding-top: 16px;
    padding-bottom: 16px;
}


/* ================================================================
   46  JUSTIFIED BODY TEXT ON A PHONE, AS ON THE OTHER PAGES

   Above 900px every block on this page is centred, which is right for
   a document index read on a desktop. On a phone that is wrong: the
   measure is narrow, centring leaves a ragged edge on both sides, and
   the eye has to hunt for the start of each line.

   The other policy pages already solve this, and this adopts their
   exact declaration rather than inventing one:

       text-align:     justify !important;
       text-justify:   inter-character !important;

   inter-character rather than inter-word, because inter-word was
   measured on these pages at producing word gaps of 19px to 28px - a
   river of white running down the column - while inter-character held
   the worst gap to 6px.

   Applies to the running paragraphs only. Headings, the document
   names, the table, the buttons and the contact block are left alone:
   centring or plain left alignment is correct for those, and a
   justified single-line heading just stretches one word across the
   column.
   ================================================================ */

@media (max-width: 767px) {

    .id-intro-lead,
    .id-doc-access-lead,
    .id-doc-access-note,
    .id-coming-text,
    .id-contact-lead,
    .id-hub-card .id-hub-sub,
    .id-card-contact .id-contact-block p {
        text-align: justify !important;
        text-justify: inter-character !important;
    }

    /* the last line of a justified paragraph is always left alone, which
       is the correct typographic behaviour and needs no rule - but the
       paragraphs that are only one line long would look odd stretched,
       so those are pulled back to centre */
    .id-doc-access-lead,
    .id-doc-access-note {
        text-align: center !important;
        text-justify: auto !important;
    }
}

/* ================================================================
   47  JUSTIFY - SPECIFICITY CORRECTION

   Section 46 declared its mobile rules one class wide, (0,1,0). Three
   of the paragraphs it was aiming at had already been scoped under
   their parent card by section 27 and 39, which puts them at (0,2,1)
   and (0,2,0):

       .id-card .id-doc-access-lead
       .id-coming .id-coming-text
       .id-card-contact .id-contact-lead

   Both carry !important, so the wider selector won and those three
   paragraphs stayed centred on a phone. Measured before this block was
   written: intro lead, coming soon text and contact lead all still
   computing text-align:center at 360px, while the hub subtitle and the
   contact block paragraphs - which section 46 also had to beat, and
   did - were correctly justify.

   Each rule below is scoped under the same parent its competing rule
   uses, so they meet on equal footing and source order decides. This
   is the second time on this page that a bare .class-name has lost to
   a .parent .class-name; the pattern is worth keeping in mind when
   adding anything here.

   The two short lines - the Document Access lead and its footnote -
   are now justified too. Section 46 held them back on the grounds that
   they are short, but they are running sentences that wrap to two or
   three lines on a phone, and "like the other pages" means justified.
   ================================================================ */

@media (max-width: 767px) {

    .id-card-intro .id-intro-lead,
    .id-doc-access .id-doc-access-lead,
    .id-doc-access .id-doc-access-note,
    .id-coming .id-coming-text,
    .id-card-contact .id-contact-lead,
    .id-hub-card .id-hub-sub,
    .id-card-contact .id-contact-block p {
        text-align: justify !important;
        text-justify: inter-character !important;
    }
}

/* ================================================================
   48  THE BOX WAS OFF-CENTRE, NOT THE TEXT

   The Document Access lead and its footnote were sitting flush left
   inside the card. The words inside them were genuinely centred - the
   computed text-align was and still is center - but the box holding
   them was not, so the whole line of text read as badly off-centre.
   Measured: the lead's box is 620px wide inside a 926px card and was
   inset 33px on the left against 273px on the right, an offset of
   240px.

   WHY
   Centring a paragraph needs two separate things, and only the first
   was working:

       text-align: center;      centres the words inside the box
       margin: 0 auto;           centres the box inside the card

   The template carries, at (0,1,1):

       .id-card p { margin: 0 0 14px !important; }

   Section 22 asked for the box to be centred with:

       .id-doc-access-lead { margin: 0 auto 24px !important; }   -> (0,1,0)

   Both carry !important, so specificity decided it, and (0,1,1) beat
   (0,1,0). margin-left was forced to 0, the 620px box was pinned to
   the left edge, and text-align:center went on centring text inside
   that box - which is exactly why the alignment looked correct in the
   CSS and wrong on the page.

   Every earlier centring pass on this page had checked text-align and
   the ink position within the element. Both read clean. Neither of
   them checked the element's own box against its parent, which is the
   only place this defect was visible.

   WHY THE OTHER BLOCKS ESCAPED IT
   .id-card-contact .id-contact-lead was scoped under its card by
   section 25, giving it (0,2,0) and the win. The contact block
   paragraphs are flex children and take no margin. Only the two left
   at a bare .id-doc-access-* selector were affected.

   THE FIX
   Scope both under .id-doc-access, which puts them at (0,2,0).
   ================================================================ */

.id-doc-access .id-doc-access-lead,
.id-doc-access .id-doc-access-note {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ================================================================
   49  AND A GUARD, SO A FUTURE BLOCK CANNOT FALL INTO THE SAME HOLE

   The pattern that caused this - a width-limited centred paragraph
   declared at a bare class, which then loses margin:0 auto to
   .id-card p - is easy to repeat by accident. This restates the
   centring for every width-limited block on the page in one place, at a
   specificity that holds, so an individual block no longer has to get
   it right on its own.

   Nothing above is edited. Where a block already had this working, the
   declaration is simply repeated with the same result.
   ================================================================ */

.id-card .id-intro-lead,
.id-doc-access .id-doc-access-lead,
.id-doc-access .id-doc-access-note,
.id-coming .id-coming-text,
.id-card-contact .id-contact-lead,
.id-hub-card .id-hub-sub,
.id-card-contact .id-contact-block p {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ================================================================
   50  THE BANNER GOES BACK TO THE LEGAL STATUS BANNER

   The base banner rules in this file are already identical to
   legalstatus.css, line for line, from .id-banner at 42 down to
   .id-banner:hover .id-banner-photo img at 138, and the
   padding-left alignment block at 808 to 838 is the same too. That
   block is what puts the banner's left edge on the header's left edge:
   the container is 94% above 1199px, so the gutter is 4%, and the
   banner panel takes exactly that as its padding-left.

   Everything wrong with this banner came from section 39, which centred
   the whole page and took the banner with it. Five rules, and four of
   them changed the design rather than just the alignment:

     text-align:center on the panel, the paragraph, the h1, its span,
     the badge and the badge icon

     .id-banner-badge given justify-content:center

     .id-banner-content h1 turned into a COLUMN FLEX BOX, so
     "Institutional" and "Documents" stacked on two lines where
     Legal Status reads "Legal Status" on one

     .id-banner-content h1 span forced to display:block, which is what
     stacked it

     .id-banner-line given margin-left/right:auto, which moved the
     50px rule out from under the start of the text and centred it

   All five are undone below. The banner returns to left-aligned text
   sitting on the header's left edge, on one line, with the rule under
   it - identical to Legal Status.

   The body of the page stays centred. Section 39 is left in place for
   everything below the banner, which is what was asked for; only the
   banner is reversed.

   !important is required because section 39 used it, and equal
   specificity plus later source order is what wins here.
   ================================================================ */

.id-banner-content,
.id-banner-content p,
.id-banner-content h1,
.id-banner-content h1 span,
.id-banner-badge,
.id-banner-badge i {
    text-align: left !important;
}

/* back to the template's own shape: a block heading whose span sits
   inline, so the two words read as one line */
.id-banner-content h1 {
    display: block !important;
    max-width: 600px;
    text-align: left !important;
}

.id-banner-content h1 span {
    display: inline !important;
    text-align: left !important;
}

/* width:fit-content and justify-content:flex-start are the template's
   values at line 64; section 39 overrode the second one only */
.id-banner-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

/* the rule sits under the start of the text, as at line 100 */
.id-banner-line {
    margin-left: 0;
    margin-right: 0;
}

/* ================================================================
   51  ONE LAST BANNER DETAIL: left vs start

   Comparing computed styles against legalstatus.css showed the banner
   geometry matching at every width - panel, image, and the badge, h1,
   rule and lead paragraph all landing on the header's left edge with
   an offset of 0px - but three computed values still differed:

       legalstatus badge / h1 / span   start / start / inherited
       this page badge / h1 / span     left  / left  / left

   Section 50 wrote left !important on all three. In an LTR page left
   and start render identically, so nothing looked wrong, but the
   values are not the same and there is no reason for them to differ.
   start is what Legal Status actually computes, so start is what goes
   here.

   The lead paragraph is deliberately left alone: legalstatus declares
   text-align:left !important on .ls-banner-content p at line 108, so it
   genuinely computes left and must stay that way.

   ================================================================ */

.id-banner-badge,
.id-banner-badge i,
.id-banner-content h1,
.id-banner-content h1 span {
    text-align: start !important;
}


/* ================================================================
   52  AND A NOTE ON THE TWO-LINE HEADING

   The h1 reads "Institutional Documents" where Legal Status reads
   "Legal Status". At 1024px and above the heading wraps onto two lines
   here and does not there.

   That is not a styling difference. Both pages run the same rule from
   the same template:

       .ls-banner-content h1 { max-width: 600px; ... }

   "Legal Status" is thirteen characters. "Institutional Documents" is
   twenty-four, in a heading sized by clamp(42px, 4.5vw, 68px), so it
   needs more than 600px and wraps. Nothing is overriding it - the
   computed display and the span's computed display now both match
   Legal Status exactly, which is what the comparison confirms.

   Raising max-width would stop the wrap but would let a longer heading
   run wider than the 52% navy panel, which is the thing the 600px cap
   exists to prevent. Leaving it is correct.
   ================================================================ */

/* ================================================================
   53  EQUAL SPACE ABOVE AND BELOW THE FOOTNOTE

   The note under the table had no breathing room at all. Measured
   before this block was written:

       gap above the note (table bottom to note top)   0px
       gap below the note, excluding card padding      1px

   The only visible space under it was the card's own 30px of
   padding-bottom, so the note looked jammed against the table with a
   large empty band beneath it.

   WHY THE MARGIN WAS NOT APPLYING
   Three rules target this paragraph, and the two in the template win:

       .id-card p              { margin: 0 0 14px !important }   (0,1,1)
       .id-card p:last-child   { margin-bottom: 0 !important }    (0,2,0)
       .id-doc-access-note     { margin: 18px auto 0 !important } (0,1,0)

   The third is the narrowest of the three, and both of the others
   carry !important, so its margin-top was thrown away and the computed
   value came back as 0px - exactly what the measurement showed. This
   is the same specificity trap as sections 27, 47 and 48, and the same
   remedy: scope it under the card.

   The fix is scoped as .id-doc-access .id-doc-access-note, which is
   (0,2,0). That ties with .id-card p:last-child, and since this block
   comes later in the file it wins on source order. Verified by reading
   the computed margin back rather than assuming.

   24px above and 24px below is the gap asked for. The top gap matches
   the 24px the table itself sits inside its wrapper, so the footnote
   reads as part of the table block rather than as loose text.
   ================================================================ */

.id-doc-access .id-doc-access-note {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ================================================================
   54  EQUAL SPACE - THE BOTTOM MARGIN, ROUND TWO

   Section 53 got the top margin and still not the bottom. Computed
   margin-top came back 24px; computed margin-bottom came back 0px,
   with the note still sitting 1px above the card's padding.

   WHY, AND THIS ONE IS WORTH WRITING DOWN
   Four rules set margin-bottom on this paragraph:

       .id-card p                     0 0 14px !important     (0,1,1)
       .id-card p:last-child          margin-bottom: 0 !important  (0,2,1)
       .id-doc-access-note            margin-bottom: 0 !important  (0,1,0)
       .id-doc-access .id-doc-access-note   24px !important     (0,2,0)

   Section 53's rule was last in the file and carried !important, and
   it still lost. The reason is :last-child.

   A pseudo-CLASS counts at CLASS level in the specificity calculation,
   so .id-card p:last-child is not (0,1,1) - it is (0,2,1): two class
   level weights plus one element. That is strictly greater than
   section 53's (0,2,0), so being later in the file was never enough.
   Source order is only consulted when specificity ties, and these did
   not tie.

   That is the fourth time on this page a rule lost to a wider selector,
   and the first one where the winner was not something this page had
   added itself. The template's own p:last-child reset is the culprit.

   THE FIX
   Add the same pseudo-class, so the specificity at least matches and
   then wins on source order:

       .id-doc-access p.id-doc-access-note:last-child   ->  (0,3,1)

   which is strictly greater than (0,2,1) and does not depend on order
   at all.

   ON MARGIN COLLAPSE
   The note is the last child of the card, so it was worth checking
   whether a bottom margin could even register. It can: the card
   declares padding-bottom: 30px, and padding on the parent's bottom
   edge stops a child's bottom margin from collapsing out through it.
   With padding present the margin is honoured inside the box. Verified
   by measurement rather than assumed.

   ================================================================ */

.id-doc-access p.id-doc-access-note:last-child {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ================================================================
   55  THE TABLE IS TWO COLUMNS NOW

   Document, and View PDF. Type, Date and the Download button are gone
   from the markup, and everything that styled them is superseded here.

   WHAT HAD TO CHANGE BESIDES THE MARKUP

   The column widths were the real work. Four columns were sized at
   39 / 21 / 13 / 27 percent by sections 37 and 41, and section 38 gave
   a different split below 1200px - 46 / 23 / 11 / 20 - because the
   action column was tight while the buttons were icon-sized.

   With two columns those splits no longer describe the table, and
   leaving them would give the document name about 40% of a wide table
   and leave most of the width empty. The split below is 72 / 28: the
   name gets the room it needs and the action cell gets a fixed-width
   button that does not drift between rows.

   Section 44 added a 620px minimum table width below 900px. That
   existed because four columns had to fit, and the widest document name
   needed 236px of a 39% column. Two columns need far less, so the floor
   comes down to 420px, which still stops a phone crushing the button.

   The .id-td-date and :nth-child(3) and :nth-child(4) rules above now
   match nothing. They are left in place rather than deleted, so the
   four-column table can be restored by reverting the markup alone.

   ROW HEIGHT
   74px stays. It was derived from the 40px button plus 16px of padding
   above and below, and nothing about that has changed.
   ================================================================ */

.id-doc-access .id-table {
    table-layout: fixed;
}

.id-doc-access .id-table th:nth-child(1),
.id-doc-access .id-table td:nth-child(1) {
    width: 72%;
}

.id-doc-access .id-table th:nth-child(2),
.id-doc-access .id-table td:nth-child(2) {
    width: 28%;
}

/* the name column is the one cell allowed to wrap rather than overflow,
   so a long document name grows its row instead of being clipped */
.id-doc-access .id-table tbody th {
    white-space: normal;
    padding-left: 18px;
    padding-right: 14px;
    line-height: 26px !important;
}

/* the action cell centres one button on one fixed width, so the column
   reads as a single tidy stack instead of a ragged edge */
.id-td-action {
    text-align: center !important;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 18px;
}

.id-td-action .id-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 148px;
    height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 11.5px !important;
    line-height: 20px !important;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.id-td-action .id-act i {
    font-size: 15px;
    line-height: 1;
}

/* the label is always visible now - there is only one action and there
   is room for it, so the icon-only rule from section 38 is withdrawn at
   every width it applied to */
@media (max-width: 1199px) {

    .id-td-action .id-act-label {
        position: static !important;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }

    .id-td-action .id-act {
        min-width: 130px;
        height: 40px;
        padding: 0 14px;
        font-size: 11px !important;
    }
}


/* ================================================================
   56  AND THE NARROW-SCREEN FLOOR, REVISED

   620px down to 420px. Two columns need far less than four, and the
   wrapper already scrolls, so the page itself still never scrolls
   sideways.
   ================================================================ */

@media (max-width: 899px) {

    .id-doc-access .id-table {
        min-width: 420px;
    }

    .id-doc-access .id-table th:nth-child(1),
    .id-doc-access .id-table td:nth-child(1) {
        width: 66%;
    }

    .id-doc-access .id-table th:nth-child(2),
    .id-doc-access .id-table td:nth-child(2) {
        width: 34%;
    }
}

@media (max-width: 767px) {

    .id-doc-access .id-table {
        table-layout: auto;
        min-width: 380px;
    }

    .id-doc-access .id-table thead th,
    .id-doc-access .id-table tbody th,
    .id-doc-access .id-table tbody td {
        font-size: 13.5px !important;
        line-height: 22px !important;
        padding: 13px 12px;
    }

    .id-doc-access .id-table th:nth-child(1),
    .id-doc-access .id-table td:nth-child(1),
    .id-doc-access .id-table th:nth-child(2),
    .id-doc-access .id-table td:nth-child(2) {
        width: auto;
    }

    .id-td-action .id-act {
        min-width: 118px;
        height: 38px;
        padding: 0 12px;
        font-size: 10.5px !important;
    }
}

/* ================================================================
   57  PHONE: THE LAST ROW WAS WRAPPING

   At 360px the eight rows came out 74 74 74 74 74 74 85. Row 7 is
   "Affiliation & Accreditation Record", the widest name, and it did not
   fit.

   The arithmetic, measured rather than assumed. The name needs 239px at
   the rendered 15px bold. Section 56 drops the table to 13.5px on
   phones, which scales it to 215px. The column had 238px of width with
   12px of padding each side, leaving 214px available.

       needs 215px   has 214px   over by 1px

   One pixel. The row grew to fit, and because a row height is a floor
   rather than a ceiling that was the correct outcome - but it made the
   eight rows unequal, which is what this table has been kept free of
   since section 42.

   THE FIX
   Two changes, either of which would have been enough, applied
   together so the margin is not sitting on a knife edge:

     - the table floor goes from 380px to 420px on phones, which is
       still 75px narrower than the 620px the four-column layout needed
     - the phone font goes from 13.5px to 13px, taking the widest name
       to 207px

   The name column is also given a little more of the width, because a
   two-column table with a fixed-width button has spare room in column
   two at this size.
   ================================================================ */

@media (max-width: 767px) {

    .id-doc-access .id-table {
        min-width: 420px;
    }

    .id-doc-access .id-table th:nth-child(1),
    .id-doc-access .id-table td:nth-child(1) {
        width: 70%;
        padding-left: 12px;
        padding-right: 10px;
    }

    .id-doc-access .id-table th:nth-child(2),
    .id-doc-access .id-table td:nth-child(2) {
        width: 30%;
        padding-left: 8px;
        padding-right: 12px;
    }

    .id-doc-access .id-table thead th,
    .id-doc-access .id-table tbody th,
    .id-doc-access .id-table tbody td {
        font-size: 13px !important;
        line-height: 21px !important;
    }

    .id-td-action .id-act {
        min-width: 108px;
        height: 38px;
        padding: 0 10px;
        font-size: 10.5px !important;
        gap: 6px;
    }
}

/* ================================================================
   58  THE CONTACT BLOCK GOES BACK TO THE OTHER PAGES

   Measured on legalstatus.php:

       h2       "Official Institutional Address"  centred, 24px, 800
       card     text-align center, padding 34px 36px 38px
       rule     700px
       lead     centred, 720px box
       grid     text-align LEFT, display grid, 2 x 412px
       block 1  text-align LEFT, display BLOCK, align-items normal
       block 2  text-align LEFT, display BLOCK, align-items normal
       h4, p    text-align LEFT

   This page was measuring centre, centre, centre for those same three,
   because sections 25 and 39 had turned the blocks into centred flex
   columns. The markup has now been matched to legalstatus.php as well,
   so the two pages carry the same heading, the same arrangement and the
   same three links in the same order.

   WHY THE BLOCKS GO BACK TO LEFT
   The card's own heading and lead stay centred, which is the template's
   design and matches the other pages. Only the two columns underneath
   return to left, because that is what legalstatus does and what makes
   a two-column block scannable: a centred column of short lines has no
   common left edge to read down.

   The two overrides that made them flex columns are undone rather than
   deleted - align-items and flex-direction go back to their template
   values, and display goes back to block.
   ================================================================ */

.id-card-contact .id-contact-block {
    display: block;
    align-items: normal;
    text-align: left !important;
}

.id-card-contact .id-contact-block h4,
.id-card-contact .id-contact-block p {
    text-align: left !important;
}

.id-card-contact .id-contact-block > * {
    margin-left: 0;
    margin-right: 0;
}

.id-card-contact .id-contact-block h4 {
    margin-top: 4px;
}

/* the heading, the rule and the lead keep the template's centred
   treatment, restated here so the block override above cannot be read
   as having pulled the whole card to the left */
.id-card-contact h2,
.id-card-contact .id-contact-lead {
    text-align: center !important;
}

/* ================================================================
   59  THE DOCUMENT ACCESS LEAD, CENTRED ON A PHONE

   Section 47 justified this paragraph on phones along with the rest of
   the page's running text, to match the other policy pages. It is one
   line above 900px and two below it, and justifying a two-line
   sentence that reads "Each available document can be viewed in PDF
   format." only spreads the words to fill both lines and leaves a
   ragged right edge. Centred, the same two lines sit square in the
   card, which is what every other short line on this page already does.

   This is a deliberate exception to section 47, and only to section 47.
   The longer paragraphs on this page stay justified on a phone.

   The selector is .id-doc-access p.id-doc-access-lead rather than the
   bare class on purpose. Section 47 declared .id-doc-access
   .id-doc-access-lead, which is (0,2,0). Adding the element takes this
   to (0,2,1), so it wins outright rather than relying on source order.

   text-justify is set back to auto because inter-character only has any
   effect while the text is justified; leaving it declared is harmless
   but means the computed value misreports what is happening.
   ================================================================ */

@media (max-width: 767px) {

    .id-doc-access p.id-doc-access-lead {
        text-align: center !important;
        text-justify: auto !important;
    }
}

/* ================================================================
   60  CONTACT BLOCKS CENTRED ON A PHONE

   Section 58 put the two contact columns back to text-align:left to
   match legalstatus.php, and it does so at every width. That was
   verified: at 360, 480, 600 and 767px both pages measure left on the
   block, the h4 and all four paragraphs, with identical ink offsets -
   this page and Legal Status are byte-for-byte the same on a phone.

   THIS SECTION BREAKS THAT MATCH ON PURPOSE.

   Below 768px the two-column grid collapses to one column, so the
   blocks are no longer side by side and the reason for left alignment
   no longer applies. Left alignment is there so that two short columns
   can be scanned down a common edge. Stacked full-width, the same
   alignment leaves every line hanging off a left rail in the middle of
   a card, which reads as unbalanced. Centred, the address and the three
   contact lines sit square in the block.

   Desktop is untouched: above 767px the two columns stay left-aligned
   and identical to Legal Status.

   The selectors carry the same weight as section 58 deliberately -
   .id-card-contact .id-contact-block is (0,2,0) either way - so this
   wins on source order alone, which is the only place on this page that
   has been relied upon, and only because the two rules are otherwise
   identical in shape.
   ================================================================ */

@media (max-width: 767px) {

    .id-card-contact .id-contact-grid {
        text-align: center;
    }

    .id-card-contact .id-contact-block,
    .id-card-contact .id-contact-block h4,
    .id-card-contact .id-contact-block p {
        text-align: center !important;
    }
}

/* ================================================================
   61  NO HORIZONTAL SCROLL - THE TABLE FITS ITS BOX

   At 360px the wrapper is 277px and the table was 420px, so the box
   scrolled sideways by 143px. The cause is the min-width floors added
   for the four-column layout - 620px in section 44, then 420px in
   sections 56 and 57 - which were never revisited when the table became
   two columns. A floor that exists to stop columns being crushed turns
   into a scrollbar once the floor exceeds the container.

   Both floors come off. The table now takes the width it is given and
   never exceeds it, so the wrapper has nothing to scroll.

   WHAT THAT COSTS, AND WHERE THE WIDTH COMES FROM
   At 345px the wrapper is 277px. The two columns need to share it:

       the View PDF button          108px plus 22px of padding = 130px
       leaves                            277 - 130 = 147px

   and the longest document name needs about 207px at 13px. So a labelled
   button cannot coexist with one-line names at that width - something
   has to give.

   Below 480px the button therefore drops its label and becomes a 40px
   square carrying only the eye icon. The label is not removed, it is
   hidden from view and kept in the accessibility tree, and the same
   wording is held in the title attribute, so a screen reader still
   announces "View PDF" and a hover still shows it.

   That reclaims 70px, and the name column is widened from 70 to 78
   percent:

       button cell                   277 x 0.22 =  61px, button 40px fits
       name cell                     277 x 0.78 = 216px, less 20px of
                                     padding = 196px available

   against 207px needed at 13px. Still short, so the phone font drops
   to 12px, taking the widest name to 191px and leaving 5px of slack.

   ROW HEIGHT IS NO LONGER A FIXED FLOOR
   At 12px the names fit, but a longer document name added later would
   wrap, and the 74px floor would then produce uneven rows - the exact
   problem sections 42 and 53 spent their effort removing. The floor
   becomes a minimum rather than a stated height, so a wrapped name
   grows its row instead of being squeezed.

   ================================================================ */

.id-doc-access .id-table {
    min-width: 0;
}

/* the wrapper keeps overflow-x:auto purely as a safety net. Nothing is
   expected to exceed the box now, and it is measured below to confirm
   that, but if a document name is ever long enough to do so the box
   scrolls rather than the page breaking. */
@media (max-width: 899px) {

    .id-doc-access .id-table {
        min-width: 0;
        table-layout: fixed;
    }

    .id-doc-access .id-table th:nth-child(1),
    .id-doc-access .id-table td:nth-child(1) {
        width: 74%;
    }

    .id-doc-access .id-table th:nth-child(2),
    .id-doc-access .id-table td:nth-child(2) {
        width: 26%;
    }
}

@media (max-width: 575px) {

    /* the button keeps only its icon; the label stays in the DOM for
       screen readers and the title attribute carries it on hover */
    .id-td-action .id-act-label {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .id-td-action .id-act {
        min-width: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 9px;
    }

    .id-td-action .id-act i {
        font-size: 17px;
    }

    .id-doc-access .id-table th:nth-child(1),
    .id-doc-access .id-table td:nth-child(1) {
        width: 78%;
        padding-left: 12px;
        padding-right: 8px;
    }

    .id-doc-access .id-table th:nth-child(2),
    .id-doc-access .id-table td:nth-child(2) {
        width: 22%;
        padding-left: 4px;
        padding-right: 8px;
    }

    .id-doc-access .id-table thead th,
    .id-doc-access .id-table tbody th,
    .id-doc-access .id-table tbody td {
        font-size: 12px !important;
        line-height: 19px !important;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* a minimum, not a stated height: a name too long to fit one line
       grows its row rather than being clipped or squeezed */
    .id-doc-access .id-table tbody tr {
        height: auto;
        min-height: 68px;
    }
}

/* ================================================================
   62  CONTACT BLOCKS CENTRED AT EVERY WIDTH

   Section 60 centred these two blocks below 768px only, leaving them
   left-aligned above it, because at that point the point of section 58
   was to match legalstatus.php and that page is left-aligned
   everywhere. This block removes that restriction: the blocks are
   centred at every width, on a phone, a tablet and a desktop alike.

   Section 60's rules stay where they are. They are narrower in effect
   and identical in shape, so this rule is simply the later of the two
   and wins on source order.

   THE DESKTOP CONSEQUENCE, STATED PLAINLY
   At two columns this no longer matches legalstatus.php, which was
   verified left-aligned at every width. It is now the second deliberate
   difference from that page - the first being the mobile centring in
   section 60, which is now simply part of this rule.

   The arguments for and against:

     for  the card's own heading, its rule and its lead are all centred,
          so two centred columns underneath it read as one block; the
          columns are short - a heading, three or four single-line
          entries - and centring them keeps each one optically balanced
          inside its own grey panel, which is what makes the panel read
          as a panel rather than as a text column with a fill.

     against  left alignment gives two columns a common vertical edge to
          scan down, which is normally why contact blocks are left-set.
          With three or four short entries per column that advantage is
          small, and it is lost entirely once the columns stack.

   Rows in the two panels are not given a fixed height, so each panel
   is as tall as its own content and the pair stays balanced by the
   grid rather than by padding.
   ================================================================ */

.id-card-contact .id-contact-grid {
    text-align: center;
}

.id-card-contact .id-contact-block,
.id-card-contact .id-contact-block h4,
.id-card-contact .id-contact-block p {
    text-align: center !important;
}

/* ================================================================
   63  CONTACT BLOCKS LEFT-ALIGNED AT EVERY WIDTH

   Section 62 centred these two blocks at every width. This reverses
   it, restoring the left alignment that section 58 originally set and
   that legalstatus.php uses at every width.

   The sequence on this element has been:

       58   left, every width          - to match Legal Status
       60   centred below 768px only   - a deliberate exception
       62   centred at every width     - a second deliberate exception
       63   left, every width          - this block

   Only the last one is in force. Sections 60 and 62 are identical in
   shape and specificity, so being later in the file is what decides,
   and this block is later than both.

   WHY LEFT, GIVEN THE TWO REVERSALS
   Two columns of short entries benefit from a common vertical edge to
   scan down, and that is the reason contact blocks are normally set
   this way. It is also what every other page on the site does, so
   choosing it here removes the divergence from Legal Status that
   sections 60 and 62 introduced and makes this page consistent again
   rather than the exception.

   The card's own heading, its rule and its lead stay centred - that is
   the template's design and it is unchanged. Only the two panels
   underneath return to left.
   ================================================================ */

.id-card-contact .id-contact-grid {
    text-align: left;
}

.id-card-contact .id-contact-block,
.id-card-contact .id-contact-block h4,
.id-card-contact .id-contact-block p {
    text-align: left !important;
}