/* ==========================================================================
   Radar pages — regulatory updates and GST case laws.

   Loaded only by frontend/radar/*.blade.php, through partials.page-css, so the
   ?v= is this file's own content hash and editing it busts the cache by itself.

   ── THE SITE'S OWN SYSTEM, NOT A SECOND ONE ─────────────────────────────────
   Every colour, radius and shadow below is a var() from css/site.css. An
   earlier version of this file hard-coded #0f2747 and #f26b21 — near-misses of
   the real #1B365D and #E8712C — which is how a page ends up looking almost
   like the site it is on. The fallbacks exist because these pages can render
   before site.css does; they are the same values, not different ones.

   Type is DM Sans for headings and Barlow for body: the two families the
   layout already loads, used on their contrast axis rather than adding a third.
   ========================================================================== */

:root {
    --rdp-navy:   var(--blue, #1B365D);
    --rdp-navy-2: var(--blue-light, #2A4A7A);
    --rdp-wash:   var(--blue-lighter, #F4F7FB);
    --rdp-accent: var(--orange, #E8712C);
    --rdp-accent-dark: var(--orange-dark, #D4621F);
    --rdp-accent-wash: var(--orange-light, #FEF4EE);
    --rdp-ink:    var(--text-primary, #1F2937);
    --rdp-body:   var(--text-secondary, #4B5563);
    --rdp-muted:  var(--text-muted, #6B7280);
    --rdp-line:   var(--gray-200, #E5E7EB);
    --rdp-hair:   var(--gray-100, #F3F4F6);

    /* Cleared height for the sticky header. BOTH ARE FALLBACKS — the page
       measures the header on load and writes the real numbers over them, because
       the height depends on the logo, the webfont once it lands, and zoom. */
    --rdp-top: 124px;
    --rdp-anchor: 136px;

    --rdp-display: 'DM Sans', 'Barlow', system-ui, sans-serif;
    --rdp-text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/*
 * The shared header is left exactly as it is on these pages except for one
 * thing: it is not allowed to move. Three screenshots at the SAME scroll
 * position showed the breadcrumb and the search strip in three different
 * states, so the two were flipping between them on their own. Two attempts at
 * re-timing the animation both made it worse; a loop is not a timing problem.
 * With the header pinned to a constant height, nothing under it moves and
 * there is no state left to oscillate between.
 */
html.pa-hh .pa-h,
.pa-h.pa-h-hide { transform: none !important; }

.pa-h .pa-h-strip,
.pa-h.pa-strip-down .pa-h-strip {
    max-height: 60px !important;
    opacity: 1 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HERO
   The page opens with the answer, not with furniture. Regulator, plain-English
   title, one sentence that settles it, and the document's identity — all of
   which used to be a grey line of metadata under the title and a bare table
   four screens down.
   ══════════════════════════════════════════════════════════════════════════ */

.rdp-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    padding: clamp(30px, 4vw, 52px) 0 clamp(28px, 3.5vw, 44px);
    background:
        radial-gradient(120% 140% at 88% -10%, rgba(232,113,44,.34) 0%, rgba(232,113,44,0) 58%),
        linear-gradient(168deg, var(--rdp-navy-2) 0%, var(--rdp-navy) 62%);
}
/* A ruled sheet, drawn rather than fetched: this is a page about a document, and a flat
   colour field behind the title is the thing that makes a text page feel unfinished.
   Two gradients, no request, no image to 404. */
.rdp-hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background-image:
        repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(to right, rgba(255,255,255,.035) 0 1px, transparent 1px 34px);
    mask-image: linear-gradient(to bottom right, #000 0%, transparent 62%);
    -webkit-mask-image: linear-gradient(to bottom right, #000 0%, transparent 62%);
}
/* The orange the rest of the page uses, stated once at the seam. */
.rdp-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(to right, var(--rdp-accent) 0%, var(--rdp-accent) 18%, rgba(232,113,44,0) 68%);
}
.rdp-hero__in {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
    font-family: var(--rdp-text);
}

.rdp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.rdp-tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.rdp-tag--live { background: var(--rdp-accent); color: #fff; }

.rdp-hero h1 {
    font-family: var(--rdp-display);
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.14;
    letter-spacing: -0.022em;
    font-weight: 700;
    color: #fff;
    margin: 0;
    max-width: 20ch;
    text-wrap: balance;
}

/* The whole page in one sentence, for the reader who reads nothing else. */
.rdp-standfirst {
    font-size: clamp(16px, 1.35vw, 19px);
    /* Light type on dark reads lighter than it is and needs the extra leading. */
    line-height: 1.62;
    color: rgba(255, 255, 255, .84);
    margin: 16px 0 0;
    max-width: 62ch;
    text-wrap: pretty;
}

/* The document's identity, consolidated. Was a grey row under the title AND a
   table at the foot of the page; a reader had to hold half of it in their head
   to read the other half. */
.rdp-ident {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px;
    margin: clamp(22px, 3vw, 32px) 0 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
}
.rdp-ident > div { background: var(--rdp-navy); padding: 13px 16px; }
.rdp-ident dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin: 0 0 4px;
}
.rdp-ident dd {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}
.rdp-ident dd.is-due { color: #FFD9A8; }

/* ══════════════════════════════════════════════════════════════════════════
   THE BODY
   ══════════════════════════════════════════════════════════════════════════ */

.rdp-wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: clamp(24px, 3vw, 38px) clamp(16px, 3vw, 32px) 16px;
    font-family: var(--rdp-text);
}

.rdp-cols {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) 268px;
    gap: clamp(28px, 3vw, 46px);
    align-items: start;
}
/* The extra width goes to the RAILS, not the prose: a line much past ~75
   characters loses the reader on the return sweep, while the two lists are
   scanned rather than read. */
.rdp-main { min-width: 0; max-width: 74ch; }

.rdp-rail, .rdp-toc {
    position: sticky;
    top: var(--rdp-top);
    max-height: calc(100vh - var(--rdp-top) - 24px);
    overflow-y: auto;
    /* No scrollbar gutter jump when the list is short. */
    scrollbar-width: thin;
}
.rdp-rail { border-right: 1px solid var(--rdp-line); padding-right: 20px; }
.rdp-toc  { border-left: 1px solid var(--rdp-line); padding-left: 20px; }

.rdp-rail__h, .rdp-toc__h {
    font-family: var(--rdp-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rdp-muted);
    margin: 0 0 12px;
}

.rdp-rail__list { list-style: none; margin: 0; padding: 0; }
.rdp-rail__list li { padding: 10px 0; border-bottom: 1px solid var(--rdp-hair); }
.rdp-rail__t {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--rdp-ink);
    text-decoration: none;
}
a.rdp-rail__t:hover { color: var(--rdp-accent); }
.rdp-rail__d { display: block; font-size: 11px; color: var(--rdp-muted); margin-top: 4px; }
.rdp-rail__list li.is-current .rdp-rail__t { color: var(--rdp-accent-dark); font-weight: 700; }
.rdp-rail__all {
    display: inline-block; margin-top: 14px;
    font-size: 12px; font-weight: 700; color: var(--rdp-navy); text-decoration: none;
}
.rdp-rail__all:hover { color: var(--rdp-accent); }

.rdp-toc ul { list-style: none; margin: 0; padding: 0; }
.rdp-toc li { padding: 6px 0; }
.rdp-toc a { font-size: 13px; line-height: 1.45; color: var(--rdp-body); text-decoration: none; }
.rdp-toc a:hover { color: var(--rdp-navy); }
.rdp-toc li.is-sub { padding: 4px 0 4px 14px; }
.rdp-toc li.is-sub a { font-size: 12px; color: var(--rdp-muted); }
.rdp-toc li.is-active > a { color: var(--rdp-accent-dark); font-weight: 700; }

/* The FAQ partial gives its items no anchor offset, so a jump to a question
   would land it under the sticky header. Scoped here; only these pages load it. */
.faq-expanded__item, #faq-section { scroll-margin-top: var(--rdp-anchor); }

/* ── Prose ─────────────────────────────────────────────────────────────── */

.rdp-h2 {
    font-family: var(--rdp-display);
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--rdp-navy);
    margin: 44px 0 12px;
    scroll-margin-top: var(--rdp-anchor);
    text-wrap: balance;
}
.rdp-main > .rdp-h2:first-child { margin-top: 0; }
.rdp-p {
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--rdp-body);
    margin: 0 0 14px;
    text-wrap: pretty;
}

/* ── What the reader takes away in ten seconds ─────────────────────────── */

.rdp-points {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--rdp-line);
    border: 1px solid var(--rdp-line);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
}
.rdp-points li {
    background: #fff;
    padding: 14px 18px 14px 46px;
    position: relative;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--rdp-ink);
}
/* A rule, not a bullet glyph: the marker carries the count, which is the one
   thing a scanner wants from a list of facts. */
.rdp-points li::before {
    content: counter(rdp-pt);
    counter-increment: rdp-pt;
    position: absolute;
    left: 16px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rdp-accent-wash);
    color: var(--rdp-accent-dark);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.rdp-points { counter-reset: rdp-pt; }

/* ── Before / after, as a comparison rather than two identical paragraphs ── */

.rdp-vs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--rdp-line);
    border: 1px solid var(--rdp-line);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    margin: 0 0 8px;
}
.rdp-vs section { background: #fff; padding: 20px 22px; }
.rdp-vs section.is-now { background: var(--rdp-accent-wash); }
.rdp-vs h3 {
    font-family: var(--rdp-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rdp-muted);
    margin: 0 0 8px;
}
.rdp-vs section.is-now h3 { color: var(--rdp-accent-dark); }
.rdp-vs p { font-size: 15.5px; line-height: 1.68; color: var(--rdp-body); margin: 0; }

/* ── What to do ────────────────────────────────────────────────────────── */

.rdp-do {
    border: 1px solid var(--rdp-line);
    border-radius: var(--radius-md, 12px);
    padding: 22px 24px;
    background: var(--rdp-wash);
}
.rdp-do p { font-size: 16px; line-height: 1.7; color: var(--rdp-ink); margin: 0; }
.rdp-do .rdp-due {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rdp-accent-dark);
    background: #fff;
    border: 1px solid var(--orange-light, #FEF4EE);
    border-radius: 999px;
    padding: 6px 14px;
}

/* ── The AI notice ─────────────────────────────────────────────────────── */

/*
 * It opens the article, and it looks like a notice rather than like a caption.
 *
 * The redesign had shrunk this to grey small print below the body, which is where a reader meets
 * it having already believed the page. It is the first thing in the column now, on its own tint,
 * with the same weight as a real disclosure — because that is what it is.
 */
.rdp-ai {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--rdp-body);
    background: var(--gray-50, #F9FAFB);
    border: 1px solid var(--rdp-line);
    border-radius: var(--radius-sm, 8px);
    padding: 13px 16px;
    margin: 0 0 30px;
    max-width: 68ch;
}

/* ── The source ────────────────────────────────────────────────────────── */

.rdp-source {
    border: 1px solid var(--rdp-line);
    border-radius: var(--radius-md, 12px);
    padding: 22px 24px;
    margin: 8px 0 0;
}
.rdp-facts { width: 100%; border-collapse: collapse; font-size: 15px; }
.rdp-facts th {
    width: 150px; text-align: left; font-weight: 600; color: var(--rdp-muted);
    padding: 9px 16px 9px 0; vertical-align: top; border-bottom: 1px solid var(--rdp-hair);
}
.rdp-facts td { padding: 9px 0; color: var(--rdp-ink); border-bottom: 1px solid var(--rdp-hair); }
.rdp-facts tr:last-child th, .rdp-facts tr:last-child td { border-bottom: 0; }

.rdp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rdp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; padding: 11px 20px;
    border-radius: var(--radius-sm, 8px); text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rdp-btn--primary { background: var(--rdp-accent); color: #fff; }
.rdp-btn--primary:hover { background: var(--rdp-accent-dark); color: #fff; }
.rdp-btn--ghost { border: 1px solid var(--rdp-line); color: var(--rdp-navy); background: #fff; }
.rdp-btn--ghost:hover { border-color: var(--rdp-navy); color: var(--rdp-navy); }

/* The practitioner's summary, below the plain one. Same wording as the PDF. */
.rdp-detail { border-top: 1px solid var(--rdp-hair); padding-top: 6px; }
.rdp-detail h1 { font-family: var(--rdp-display); font-size: 19px; font-weight: 700; color: var(--rdp-navy); margin: 14px 0 2px; }
.rdp-detail h2 { font-family: var(--rdp-display); font-size: 16px; font-weight: 600; color: var(--rdp-body); margin: 0 0 14px; }
.rdp-detail h3 {
    font-family: var(--rdp-display); font-size: 15.5px; font-weight: 700; color: var(--rdp-navy);
    margin: 26px 0 8px; scroll-margin-top: var(--rdp-anchor);
}
.rdp-detail p  { font-size: 15.5px; line-height: 1.72; color: var(--rdp-body); margin: 0 0 11px; }
.rdp-detail ul { margin: 0 0 14px; padding-left: 20px; font-size: 15.5px; line-height: 1.72; color: var(--rdp-body); }
.rdp-detail li { margin-bottom: 5px; }

/* ── About Patron, in the firm's orange ────────────────────────────────── */

.pa-about-patron {
    background: var(--rdp-accent-wash);
    border-radius: var(--radius-lg, 16px);
    padding: clamp(22px, 3vw, 32px);
    margin-top: 48px;
}
.pa-about-patron h2 {
    font-family: var(--rdp-display);
    font-size: 21px; font-weight: 700; color: var(--rdp-accent-dark);
    margin: 0 0 12px; scroll-margin-top: var(--rdp-anchor);
}
.pa-about-patron p  { font-size: 15.5px; line-height: 1.72; color: var(--rdp-ink); margin: 0 0 13px; }
.pa-about-patron ul { margin: 0 0 13px; padding-left: 20px; font-size: 15px; line-height: 1.8; color: var(--rdp-ink); }
.pa-about-patron a  { color: var(--rdp-accent-dark); font-weight: 600; }
.pa-about-patron p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   THE HUBS
   ══════════════════════════════════════════════════════════════════════════ */

.rdp-hub__lead {
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.62;
    color: rgba(255, 255, 255, .84);
    margin: 14px 0 0;
    max-width: 62ch;
}
.rdp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.rdp-tabs a {
    font-size: 13.5px; font-weight: 600; color: var(--rdp-body);
    background: #fff; border: 1px solid var(--rdp-line); border-radius: 999px;
    padding: 8px 17px; text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.rdp-tabs a:hover { border-color: var(--rdp-navy); color: var(--rdp-navy); }
.rdp-tabs a.is-on { background: var(--rdp-navy); border-color: var(--rdp-navy); color: #fff; }

.rdp-list { max-width: 88ch; }
.rdp-card { border-bottom: 1px solid var(--rdp-hair); padding: 22px 0; }
.rdp-card__t {
    font-family: var(--rdp-display);
    display: block; font-size: 19px; font-weight: 700; line-height: 1.34;
    color: var(--rdp-navy); text-decoration: none; text-wrap: balance;
}
.rdp-card__t:hover { color: var(--rdp-accent-dark); }
.rdp-card__m { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--rdp-muted); margin: 7px 0 0; }
.rdp-card__d { font-size: 15px; line-height: 1.65; color: var(--rdp-body); margin: 9px 0 0; max-width: 72ch; }
.rdp-empty { font-size: 15px; color: var(--rdp-muted); padding: 40px 0; }
.rdp-pager { margin: 26px 0 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   NARROW
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .rdp-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* The rails become sections rather than vanishing: on a phone the contents
       list is the fastest way down a long page, and the other documents are
       still the reason somebody came. Both unstick — nothing sits beside them. */
    .rdp-rail, .rdp-toc {
        position: static; max-height: none; overflow: visible; border: 0; padding: 0;
    }
    .rdp-toc {
        order: -1; margin-bottom: 26px; padding: 16px 18px;
        background: var(--gray-50, #F9FAFB); border-radius: var(--radius-md, 12px);
    }
    .rdp-rail { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rdp-line); }
    .rdp-main { max-width: none; }
}

@media (max-width: 560px) {
    .rdp-ident { grid-template-columns: 1fr 1fr; }
    .rdp-points li { padding-left: 42px; }
}

/* Nothing here animates layout, and the only transitions are colour on hover.
   Kept that way deliberately: every attempt at motion on this page has fought
   the shared header. This is the reduced-motion state and the normal one both. */
@media (prefers-reduced-motion: reduce) {
    .rdp-tabs a, .rdp-btn { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION

   Differentiated, not uniform. One identical entrance applied to every section
   is the tell; each reveal here fits what it reveals — the hero is a single
   orchestrated arrival, the key points stagger because they are a list, the
   comparison halves meet in the middle because that is what a comparison does,
   and the prose sections get nothing at all.

   EVERYTHING IS VISIBLE WITHOUT JAVASCRIPT. The hidden state is only applied
   under html.rdp-anim, a class the script adds before paint. A transition
   never fires on a background tab or in a headless renderer, and a page whose
   content is gated on one ships blank.
   ══════════════════════════════════════════════════════════════════════════ */

.rdp-anim .rdp-rise {
    opacity: 0;
    transform: translateY(14px);
}
.rdp-anim .rdp-rise.is-in {
    opacity: 1;
    transform: none;
    /* ease-out-expo: arrives fast, settles without bouncing. */
    transition: opacity .62s cubic-bezier(.16, 1, .3, 1) var(--rdp-delay, 0ms),
                transform .62s cubic-bezier(.16, 1, .3, 1) var(--rdp-delay, 0ms);
}

/* The comparison halves come from their own sides — the movement says
   "these two are being set against each other" rather than "here is a box". */
.rdp-anim .rdp-vs section { opacity: 0; transform: translateX(-10px); }
.rdp-anim .rdp-vs section.is-now { transform: translateX(10px); }
.rdp-anim .rdp-vs.is-in section {
    opacity: 1;
    transform: none;
    transition: opacity .55s cubic-bezier(.16, 1, .3, 1),
                transform .55s cubic-bezier(.16, 1, .3, 1);
}

/* Hover feedback, which is the motion people actually use. */
.rdp-btn:hover { transform: translateY(-1px); }
.rdp-btn { transition: background-color .16s ease, color .16s ease,
                       border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.rdp-btn--primary:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.06)); }

.rdp-card { transition: border-color .18s ease; }
.rdp-card__t, .rdp-rail__t, .rdp-toc a { transition: color .16s ease; }

.rdp-tabs a { transition: border-color .16s ease, color .16s ease, background-color .16s ease; }

/*
 * Reduced motion is not "less of the same": everything arrives at its final
 * state immediately, with no transform anywhere. A page that still slides,
 * slower, has not honoured the request.
 */
@media (prefers-reduced-motion: reduce) {
    .rdp-anim .rdp-rise,
    .rdp-anim .rdp-rise.is-in,
    .rdp-anim .rdp-vs section,
    .rdp-anim .rdp-vs.is-in section {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .rdp-btn:hover { transform: none; }
    .rdp-btn, .rdp-card, .rdp-card__t, .rdp-rail__t, .rdp-toc a, .rdp-tabs a { transition: none; }
}

/* ── A worked example ──────────────────────────────────────────────────────
   Set apart from the prose because it is a different KIND of thing: the rest
   of the page states the rule, this one walks a business through it. A reader
   skimming for "is this me" stops here, which is the point. */
.rdp-eg {
    background: var(--rdp-wash);
    border-radius: var(--radius-md, 12px);
    padding: 20px 22px;
}
.rdp-eg p { font-size: 16px; line-height: 1.72; color: var(--rdp-ink); margin: 0; }

/* ── The terms ─────────────────────────────────────────────────────────────
   A definition list, not a table: these are term-and-meaning pairs and the
   markup should say so — to a screen reader and to a search engine both. */
.rdp-terms { margin: 0; display: grid; gap: 1px; background: var(--rdp-line);
             border: 1px solid var(--rdp-line); border-radius: var(--radius-md, 12px); overflow: hidden; }
.rdp-terms > div { background: #fff; padding: 15px 18px; }
.rdp-terms dt { font-family: var(--rdp-display); font-size: 15px; font-weight: 700;
                color: var(--rdp-navy); margin: 0 0 4px; }
.rdp-terms dd { font-size: 15px; line-height: 1.65; color: var(--rdp-body); margin: 0; }