/* site.css - dhan.com's own rules for the new pages (30 Oct 2026), loaded after dhan-look.css, public-base.css and
   public-d.css by each page (resources/views/public/d/pages/parts/meta). Not shared with smsfaudits.com: the shared look
   stays in the shared files. Everything here uses the look's own tokens; no new colours, no purple, nothing fetched.
   30 Oct 2026: the rules both sites need (the white page head, the trail's 44px links, the sticky box's height, the
   footer's logo, the facts strip on the narrowest phones, "On this page", "Reviewed by", the quiet quote, reading text,
   the Contact door) are in public-d.css now, so the two sites look the same; what is left here is dhan.com's own. */

/* ---------- touch targets: standalone links and buttons in the page at least 44px (inline links in sentences are exempt) ---------- */
.pub main a.link-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pub main a.link-button .icon { width: 16px; height: 16px; }
.pub main .btn { min-height: 44px; }
.pub main .btn-sm { padding-top: 8px; padding-bottom: 8px; }

/* a link inside a sentence is underlined, so it is never known by colour alone (WCAG 1.4.1) */
.pub main p a:not([class]), .pub main li a:not([class]), .pub main dd a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; }

/* ---------- reading ---------- */
.readable.is-lead { font-size: var(--fs-read); line-height: 1.65; }
.readable.is-lead p + p { margin-top: 14px; }
.sub-title { font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.35; }
.svc-section { padding-top: 56px; }
.svc-main .intro { color: var(--text); }
.list-table tbody th { width: 38%; font-weight: 600; }

/* the questions and the steps in a reading column */
.steps.is-vertical { grid-template-columns: 1fr; gap: 20px; }
.steps.is-vertical li { padding-left: 48px; }
.steps.is-vertical li::before { position: absolute; left: 0; top: 0; }
.steps.is-vertical li:not(:last-child)::after { top: 40px; bottom: -14px; left: 15px; right: auto; width: 2px; height: auto; }
.steps.is-vertical h3 { margin-top: 3px; }
.points.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* "On this page" (parts/toc) under the "At a glance" card */
.toc-nav .toc-title { margin-top: 22px; }
.glance.is-toc-only .toc-nav .toc-title { margin-top: 0; }

/* ---------- people ---------- */
/* no photos yet: a card shows the initials beside the words (a real photo, once each person agrees, takes the same place) */
.person { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.person .photo { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--border); }
.person .photo-initials { width: 72px; height: 72px; font-size: 24px; }
.check-grid { display: grid; gap: 18px; }
.photo { position: relative; }
.photo-initials { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--initials);
    color: var(--initials-text); font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.person-line { margin-bottom: 8px; color: var(--muted); }
.team-group + .team-group { margin-top: 32px; }
.team-group-title { margin-bottom: 12px; font-size: var(--fs-h3-public); font-weight: 600; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; list-style: none; }
.member { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; }
.member .initials { width: 44px; height: 44px; font-size: 14px; }
.member b { display: block; font-weight: 600; line-height: 1.3; }
.member b + span { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }

/* chips that jump to a part of the page (or a topic) - each 44px tall */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chips .chip { height: auto; min-height: 44px; padding: 0 16px; color: var(--text); font-weight: 600; }
.chips .chip:hover { text-decoration: none; }
.chips .chip[aria-current="page"] { background: var(--look-top); border-color: var(--look-top); color: #fff; }

/* a profile */
.profile-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 8px; }
.profile-photo .photo { border: 1px solid var(--look-line); border-radius: var(--radius); }
.profile-role { margin-top: 6px; color: var(--muted); font-size: 17px; font-weight: 600; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.profile-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.profile-links .btn { white-space: normal; text-align: left; }

/* ---------- parts of the pages ---------- */
/* 30 Oct 2026 (the owner's answers): the home hero's tax agent number links to the TPB register - in the facts' own
   colour, underlined, a 44px target (no offices or time zones any more: their rules are gone) */
.hero-facts a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: inherit; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero-facts a:hover { color: #fff; }

/* rows that go somewhere (Read next, public guides) */
.link-rows { display: grid; gap: 0; list-style: none; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.link-rows li + li { border-top: 1px solid var(--border); }
.link-rows a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 72px; padding: 14px 20px; color: var(--text); }
.link-rows a:hover { background: var(--look-soft); color: var(--text); text-decoration: none; }
.link-rows b { display: block; font-weight: 600; }
.link-rows b + span { display: block; color: var(--muted); font-size: 14px; }
.link-rows .go { color: var(--muted); }

/* the samples' rows: what each is, then type, size and date */
.dl-row .dl-about, .dl-row .dl-meta { display: block; }
.dl-row .dl-about { color: var(--text); font-size: 14.5px; }
.samples-note { margin-bottom: 18px; }

/* the door's "what happens next" */
.door-next-title { margin-bottom: 4px; color: var(--door-names); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.p-close-brand .next { margin-top: 12px; }

/* SMSF audit: the separate firm's card */
.audit-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; }
.audit-legal { margin-top: 12px; color: var(--muted); font-size: 13.5px; }

/* For trustees: three short cards */
.trustee-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trustee-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.trustee-card h3 { font-size: var(--fs-h3-public); font-weight: 600; }
.trustee-card > p { color: var(--muted); }

/* Insights */
.empty-card .card-body { display: grid; gap: 14px; justify-items: start; padding: 28px; }
.empty-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.article-main { min-width: 0; }
.article-note { display: flex; gap: 10px; align-items: flex-start; max-width: var(--measure); margin-top: 32px; padding: 14px 16px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--surface-2); color: var(--muted); font-size: 14.5px; }
.article-note .icon { margin-top: 2px; color: var(--look-text); }
.author-card h2 { font-size: 16px; font-weight: 700; }
.author-line { display: flex; align-items: center; gap: 12px; }
.author-line .initials { width: 44px; height: 44px; font-size: 14px; }
.author-line b, .author-line .u-muted { display: block; }

/* Thank you and not found: the door's white panel */
.msg-page { min-height: min(52vh, 560px); }
.msg { max-width: 680px; margin: 0 auto; padding: 44px 40px 40px; }
.msg-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 13px;
    background: var(--initials); color: var(--initials-text); }
.msg-icon .icon { width: 26px; height: 26px; }
.msg h1 { font-family: var(--serif); font-size: var(--fs-door); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.msg-lead { margin-top: 14px; color: var(--muted); font-size: var(--fs-lead); }
.msg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- widths ---------- */
@media (max-width: 1000px) {
    .trustee-cards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .glance.is-toc-only { display: none; }
    .profile-grid { grid-template-columns: 160px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
    .points.is-two { grid-template-columns: 1fr; }
    .points.is-two { gap: 0; }
    .points.is-two .point { padding: 20px 0; }
    .points.is-two .point + .point { border-top: 1px solid var(--border); }
    .profile-grid { grid-template-columns: 1fr; gap: 20px; }
    .profile-photo { max-width: 200px; }
    .link-rows a { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; }
    .link-rows a > .go { display: none; }
    .audit-card { padding: 24px 20px; }
    .audit-card .btn { width: 100%; white-space: normal; }
    .msg { padding: 32px 20px 28px; }
    .msg-actions .btn { flex: 1 1 100%; white-space: normal; }
    .register-row .btn, .dl-row .btn { white-space: normal; text-align: left; }
}
@media (max-width: 600px) {
    .phead h1, .msg h1 { font-size: 32px; }
    .svc-section { padding-top: 40px; }
    .photo-initials { width: 72px; height: 72px; font-size: 24px; }
    .chips .chip { padding: 0 14px; }
}
@media (max-width: 380px) {
    .phead h1, .msg h1 { font-size: 28px; }
    .team-grid { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
    .photo-initials, .msg-icon, .member .initials { border: 1px solid CanvasText; }
}