/* Circle -> Division -> Range tree (pages/view/Circle).
   Rendered by templates/element/circle_tree.php, driven by webroot/js/circle-tree.js.

   Presentation only -- the panels, their ids and the aria-expanded /
   aria-pressed state circle-tree.js drives are never touched from here. */

/* Every pill, caption and panel carries data-unit, so the Territorial /
   Functional split is legible from the element itself and not only from the
   caption above the row. The properties below are what the two unit rules
   swap out; hover, open and selected states all derive from them. */
.ctree.ctree {
    --ctree-territorial: #1f7a33;
    --ctree-territorial-dark: #0f4d20;
    --ctree-territorial-soft: #e9f5ea;
    --ctree-territorial-line: #b7ddbe;

    --ctree-functional: #0f6b86;
    --ctree-functional-dark: #083f52;
    --ctree-functional-soft: #e4f1f6;
    --ctree-functional-line: #add4e2;

    /* Masthead pair, kept deeper than the button greens. A full-bleed band
       at the saturation of a 40px capsule turns into a slab of colour, so
       the band takes the darker end of the ramp and leaves the saturated
       tone to the small elements that need to be found. */
    --ctree-territorial-deep: #093014;
    --ctree-territorial-rich: #185c29;

    --ctree-functional-deep: #052834;
    --ctree-functional-rich: #0d5268;

    /* One antique-gold accent carries the highlight at every level. It is
       warmer and far lower in chroma than a signal yellow, which is most of
       what separates a considered accent from a highlighter pen. */
    --ctree-gold: #c2a14e;
    --ctree-gold-deep: #9c7f33;
    --ctree-gold-soft: #fbf7ec;

    --ctree-ink: #15241b;
    --ctree-hair: #e8ece9;

    padding: 10px 0 30px;
    line-height: 1.5;
}

/* Scoped to .ctree -- a bare [data-unit] selector would reach into any other
   page that happens to use the same attribute name. */
.ctree [data-unit="territorial"] {
    --pill: var(--ctree-territorial);
    --pill-dark: var(--ctree-territorial-dark);
    --pill-soft: var(--ctree-territorial-soft);
    --pill-line: var(--ctree-territorial-line);
    --pill-deep: var(--ctree-territorial-deep);
    --pill-rich: var(--ctree-territorial-rich);
}

.ctree [data-unit="functional"] {
    --pill: var(--ctree-functional);
    --pill-dark: var(--ctree-functional-dark);
    --pill-soft: var(--ctree-functional-soft);
    --pill-line: var(--ctree-functional-line);
    --pill-deep: var(--ctree-functional-deep);
    --pill-rich: var(--ctree-functional-rich);
}

/* ===== Selector ==========================================================
   The two circle rows at the top of the page. */
.ctree .ctree-unit {
    margin-bottom: 30px;
}

.ctree .ctree-unit-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 9px 24px;
    border: 2px solid var(--pill);
    border-radius: 999px;
    background: var(--pill-soft);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--pill-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* How many circles / divisions / ranges sit under this caption. */
.ctree .ctree-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--pill);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.ctree .ctree-pills {
    display: flex;
    line-height: 1.4;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ctree .ctree-pill {
    padding: 10px 22px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--pill);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
        transform 0.2s ease, box-shadow 0.2s ease;
}

.ctree-pill:hover {
    background: var(--pill-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.ctree-pill:focus-visible {
    outline: 2px solid var(--ctree-gold);
    outline-offset: 3px;
}

/* The open circle/division and the picked range all share one highlight, so
   "what did I click" reads the same way at every level: dark fill, gold edge. */
.ctree-pill[aria-expanded="true"],
.ctree-pill[aria-pressed="true"] {
    background: var(--pill-dark);
    color: #fff;
    border-color: var(--ctree-gold);
    box-shadow: 0 0 0 3px rgba(194, 161, 78, 0.38);
}

/* ===== Panel box ========================================================
   The listing is treated as a printed index rather than a stack of UI
   widgets: a deep masthead ruled in gold, section headings whose tally is
   reached by a dotted leader, and entries set as ruled rows with a serif
   display face on the names. The restraint is the point -- one accent, one
   rule weight, and space, rather than another colour per element.

   Presentation only: the panels, their ids and the aria-expanded /
   aria-pressed state circle-tree.js drives are untouched. */
.ctree .ctree-panel {
    position: relative;
    margin: 26px 0 32px;
    padding: 0;
    border: 1px solid #e6e9e5;
    border-radius: 18px;
    background: #fff;
    /* Three layers: a hairline of gold just inside the edge, a tight contact
       shadow, then a wide soft cast. The inner line is what stops a white
       card on a white page from reading as a plain box. */
    box-shadow: inset 0 0 0 1px rgba(194, 161, 78, 0.16),
        0 1px 2px rgba(21, 36, 27, 0.05),
        0 22px 48px -18px rgba(21, 36, 27, 0.22);
    overflow: hidden;
    animation: ctree-open 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ctree-open {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ---- Masthead -----------------------------------------------------------
   Level as a gold eyebrow, the parent it belongs to set large underneath,
   closed by a gold hairline. */
.ctree .ctree-heading {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 13px 74px 13px 24px;
    border: 0;
    border-bottom: 2px solid var(--ctree-gold);
    border-radius: 0;
    /* Three stacked layers: a raking highlight from the top-left, a fine
       diagonal weave, then the base gradient. The weave is at 3.5% white --
       below the threshold where you read it as stripes, above the one where
       the panel reads as flat ink. */
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 48%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.026) 0 2px,
            rgba(255, 255, 255, 0) 2px 7px),
        linear-gradient(118deg, var(--pill-deep) 0%, var(--pill-rich) 100%);
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.9px;
    text-transform: uppercase;
    color: var(--ctree-gold);
}

/* No lozenge ahead of the level name -- the gold rule under the masthead and
   the stile between the level and its subject already mark the band. */
.ctree-heading::before {
    content: none;
}

/* The lower half of a double rule: the 2px gold border closes the masthead,
   this sits a hair above it. Two weights of the same line is a bookbinding
   device, and it costs nothing. */
.ctree-heading::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 1px;
    background: rgba(194, 161, 78, 0.42);
}

.ctree .ctree-heading-sub {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
    text-transform: none;
    color: #fff;
}

/* Gold stile parting the eyebrow from the name it labels, now that the two
   sit on one line. */
.ctree-heading-sub::before {
    content: "";
    flex: none;
    width: 2px;
    height: 15px;
    margin: 0 14px;
    background: var(--ctree-gold);
    opacity: 0.85;
}

.ctree-heading .ctree-count {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    height: 25px;
    min-width: 30px;
    padding: 0 10px;
    border: 1px solid rgba(194, 161, 78, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ctree-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ---- Section heading ----------------------------------------------------
   The unit name, a dotted leader, then the tally hard against the right
   margin -- the index typography this listing is modelled on. */
.ctree-panel .ctree-unit {
    margin: 0;
    padding: 0 26px;
}

.ctree-panel .ctree-unit-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 26px 0 11px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    /* The darker end of the ramp: at this size and tracking the saturated
       tone goes thin and hard to read against white. */
    color: var(--pill-dark);
}

/* Small gold lozenge opening the section, echoing the masthead's. */
.ctree-panel .ctree-unit-label::before {
    content: "";
    order: -1;
    flex: none;
    width: 5px;
    height: 5px;
    margin-right: 10px;
    background: var(--ctree-gold);
    transform: rotate(45deg);
}

/* Sits between the label and its tally: ::after is the last child, so the
   tally is given a later order to let the leader through. */
.ctree-panel .ctree-unit-label::after {
    content: "";
    order: 0;
    flex: 1;
    min-width: 24px;
    margin: 0 14px;
    transform: translateY(2px);
    border-bottom: 1px dotted #ccd4ce;
}

.ctree-panel .ctree-unit-label .ctree-count {
    order: 1;
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    color: #7e887f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ---- Entry rows ---------------------------------------------------------
   Ruled rows, roomy enough to read as a listing. */
.ctree-panel .ctree-pills {
    display: block;
    padding: 0;
    /* Restarts per section, so Territorial and Functional each number from
       one rather than continuing a single run across the card. */
    counter-reset: ctree-row;
}

.ctree-panel .ctree-pill {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 14px 15px 16px;
    border: 0;
    border-top: 1px solid #eef1ee;
    border-radius: 7px;
    background: none;
    color: var(--ctree-ink);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.1px;
    text-transform: none;
    text-align: left;
    box-shadow: none;
    transition: background 0.22s ease, color 0.22s ease,
        box-shadow 0.22s ease, padding-left 0.22s ease;
}

.ctree-panel .ctree-pill:focus-visible {
    outline: 2px solid var(--ctree-gold);
    outline-offset: -3px;
}

/* An italic old-style numeral per entry. Numbering is what turns a stack of
   rows into an index, and it costs no markup -- the counter is CSS's. */
.ctree-panel .ctree-pill::before {
    counter-increment: ctree-row;
    content: counter(ctree-row, decimal-leading-zero);
    flex: none;
    width: 26px;
    margin-right: 15px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.6px;
    color: #a9b2ab;
    transition: color 0.22s ease;
}

/* A drawn arrow, not a chevron glyph -- it can be set at a hairline weight
   that matches the rules, which a font chevron cannot. */
.ctree-panel .ctree-pill::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-left: auto;
    margin-right: 4px;
    border-top: 1.5px solid #b4bdb6;
    border-right: 1.5px solid #b4bdb6;
    transform: rotate(45deg);
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.22s ease;
}

.ctree-panel .ctree-pill:hover {
    padding-left: 22px;
    background: #f7f9f7;
    color: var(--pill-dark);
    transform: none;
    box-shadow: inset 3px 0 0 var(--pill-line);
}

.ctree-panel .ctree-pill:hover::after {
    border-color: var(--pill);
    transform: rotate(45deg) translate(2px, -2px);
}

.ctree-panel .ctree-pill:hover::before,
.ctree-panel .ctree-pill[aria-expanded="true"]::before {
    color: var(--ctree-gold-deep);
}

/* Open: the gold edge and a warm ground, with the arrow turned down. */
.ctree-panel .ctree-pill[aria-expanded="true"] {
    padding-left: 22px;
    /* Warm ground that fades out to the right, so the gold edge is read as
       the source of the tint rather than as a stripe stuck on a flat block. */
    background: linear-gradient(90deg, #f8f1dd 0%, var(--ctree-gold-soft) 46%, #fdfbf5 100%);
    color: var(--pill-dark);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ctree-gold);
}

.ctree-panel .ctree-pill[aria-expanded="true"]::after {
    border-color: var(--ctree-gold-deep);
    transform: rotate(135deg) translate(-1px, -1px);
}

/* ---- Range band ---------------------------------------------------------
   Ranges are leaves: no arrow, and set in columns, since nineteen of them
   down one column would be a page of scrolling. The warm ground marks the
   band as the end of the chain. */
.ctree .ctree-panel-range {
    margin: 26px 0 0;
    padding: 0 26px 22px;
    border: 0;
    border-top: 1px solid #eef1ee;
    border-radius: 0;
    background: #fcfcfa;
    box-shadow: none;
}

.ctree-panel-range .ctree-heading {
    margin: 0 -26px;
    padding: 12px 74px 12px 26px;
}

.ctree-panel-range .ctree-heading-sub {
    font-size: 17px;
}

.ctree-panel-range .ctree-pills {
    column-count: 3;
    column-gap: 34px;
    padding: 8px 0 0;
}

.ctree-panel-range .ctree-pill {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px 8px 10px 13px;
    break-inside: avoid;
    border-top: 0;
    border-bottom: 1px solid #f0f2ef;
    /* The stack resolves to two faces only -- Regular and Bold -- so there is
       no medium to reach for here: 500 renders as Regular and 600 as Bold
       (measured). The weight stays 400 and the presence comes from size and
       ink instead, which is the honest version of the same adjustment. */
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ctree-ink);
}

.ctree-panel-range .ctree-pill::after {
    content: none;
}

/* No leading marker: the row hairlines already separate the names, and a tick
   in front of every one of forty read as a bullet list. The counter the
   division rows carry is suppressed here too, so no numeral appears either. */
.ctree-panel-range .ctree-pill::before {
    content: none;
    counter-increment: none;
}

.ctree-panel-range .ctree-pill:hover {
    padding-left: 17px;
    background: #f6f8f6;
}

.ctree-panel-range .ctree-pill[aria-pressed="true"] {
    padding-left: 17px;
    background: var(--ctree-gold-soft);
    color: var(--pill-dark);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ctree-gold);
}

.ctree-panel .ctree-empty {
    margin: 0;
    padding: 22px 26px;
    text-align: left;
}

.ctree .ctree-empty {
    margin: 26px 0 18px;
    text-align: center;
    color: #6b7280;
    font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {

    .ctree-panel {
        animation: none;
    }

    .ctree-pill,
    .ctree-panel .ctree-pill::after {
        transition: none;
    }

    .ctree-pill:hover {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .ctree-panel-range .ctree-pills {
        column-count: 2;
        column-gap: 26px;
    }
}

@media (max-width: 575.98px) {
    .ctree-pills {
        gap: 9px;
    }

    .ctree-pill {
        padding: 9px 16px;
        font-size: 13px;
    }

    .ctree-heading {
        padding: 11px 60px 11px 18px;
    }

    .ctree-heading-sub {
        font-size: 16px;
    }

    .ctree-heading-sub::before {
        margin: 0 10px;
    }

    .ctree-panel .ctree-unit {
        padding: 0 18px;
    }

    .ctree-panel-range {
        padding: 0 18px 18px;
    }

    .ctree-panel-range .ctree-heading {
        margin: 0 -18px;
        padding: 11px 60px 11px 18px;
    }

    .ctree-panel-range .ctree-heading-sub {
        font-size: 15px;
    }

    .ctree-panel-range .ctree-pills {
        column-count: 1;
    }

    .ctree-panel .ctree-pill {
        font-size: 14.5px;
    }
}
/* ===== Master-detail layout =============================================
   The listing used to be an accordion: opening a division pushed its ranges
   in underneath, so a circle with eleven divisions and a division with forty
   ranges turned the page into a column of scrolling. Here the card is split
   instead -- divisions down a fixed left column, the open division's ranges
   filling the right -- and each list scrolls inside its own pane. The card
   is then the same height whether a division holds three ranges or forty,
   and nothing below it ever moves.

   Still presentation only: the panels, their ids and the aria-expanded /
   aria-pressed state circle-tree.js drives are untouched. */
/* The detail pane carries .ctree-panel too, so every rule here excludes it --
   left in, it became a grid of its own and `align-content: stretch` pulled
   its header open to fill the pane. */
.ctree .ctree-panel:not(.ctree-panel-range) {
    display: grid;
    grid-template-columns: minmax(240px, 318px) minmax(0, 1fr);
    align-items: stretch;
    align-content: start;
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading {
    grid-column: 1 / -1;
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-unit {
    grid-column: 1;
}

/* Spanning to a line past the last row lets the pane stretch down the whole
   left column however many unit sections that column happens to hold --
   empty implicit rows collapse to nothing, so the overshoot costs nothing. */
.ctree .ctree-panel>.ctree-panel-range {
    grid-column: 2;
    grid-row: 2 / 99;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--ctree-hair);
    background: #fcfcfa;
}

/* Until a division is picked there is no detail pane to show, so the card
   drops back to one column rather than reserving an empty half. */
.ctree .ctree-panel:not(.ctree-panel-range):not(:has(> .ctree-panel-range:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
}

/* ---- Panes --------------------------------------------------------------
   Each list scrolls in place. The cap is set in rows rather than pixels so
   it stays a whole number of rows at any of our font sizes. */
.ctree .ctree-panel .ctree-pills {
    max-height: calc(4.5 * 52px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ctree .ctree-panel-range .ctree-heading {
    margin: 0;
    padding: 13px 66px 13px 22px;
    /* The division masthead at the top of the card is the full-strength one;
       this is the same band at lower contrast so the two do not compete. */
    background: var(--pill-soft);
    color: var(--pill-dark);
    border-bottom: 1px solid var(--pill-line);
}

.ctree .ctree-panel-range .ctree-heading::after {
    display: none;
}

.ctree .ctree-panel-range .ctree-heading-sub {
    font-size: 16px;
    color: var(--ctree-ink);
}

.ctree .ctree-panel-range .ctree-heading-sub::before {
    background: var(--pill-line);
}

.ctree .ctree-panel-range .ctree-heading .ctree-count {
    right: 20px;
    border-color: var(--pill-line);
    background: #fff;
    color: var(--pill-dark);
}

.ctree .ctree-panel-range .ctree-pills {
    column-count: 2;
    column-gap: 26px;
    max-height: calc(6 * 40px);
    padding: 12px 20px 14px;
}

/* ---- Scrollbars ---------------------------------------------------------
   Left at the platform default a pane looks like a text area; these read as
   part of the card. */
.ctree .ctree-panel .ctree-pills {
    scrollbar-width: thin;
    scrollbar-color: #cdd5cf transparent;
}

.ctree .ctree-panel .ctree-pills::-webkit-scrollbar {
    width: 8px;
}

.ctree .ctree-panel .ctree-pills::-webkit-scrollbar-track {
    background: transparent;
}

.ctree .ctree-panel .ctree-pills::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 99px;
    background: #cdd5cf;
    background-clip: content-box;
}

.ctree .ctree-panel .ctree-pills:hover::-webkit-scrollbar-thumb {
    background: var(--pill-line);
    background-clip: content-box;
}

/* The arrow pointed down to an accordion opening underneath; it now points
   across at the pane beside it. */
.ctree .ctree-panel .ctree-pill[aria-expanded="true"]::after {
    transform: rotate(45deg) translate(2px, -2px);
}

/* Below this the two panes are too narrow to sit side by side, so the detail
   pane returns underneath the list it belongs to. */
@media (max-width: 991.98px) {
    .ctree .ctree-panel:not(.ctree-panel-range) {
        grid-template-columns: minmax(0, 1fr);
    }

    .ctree .ctree-panel>.ctree-heading,
    .ctree .ctree-panel>.ctree-unit,
    .ctree .ctree-panel>.ctree-panel-range {
        grid-column: 1;
        grid-row: auto;
    }

    .ctree .ctree-panel>.ctree-panel-range {
        border-left: 0;
        border-top: 1px solid var(--ctree-hair);
    }

    .ctree .ctree-panel-range .ctree-pills {
        column-count: 2;
    }
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel-range .ctree-pills {
        column-count: 1;
        padding: 12px 16px 14px;
    }

    .ctree .ctree-panel-range .ctree-heading {
        padding: 11px 58px 11px 16px;
    }
}
/* ===== Selected row =====================================================
   In a master-detail card the selected row is not "open", it is the row the
   pane beside it is showing. So it is treated as lifted out of the list
   rather than filled in: the list sits on a tint, and the selected row is
   the one piece of white in it, carrying the unit's colour as a spine and a
   shadow that reads as raised toward the pane. The gold is left to the
   masthead, where it is the accent rather than a third state colour. */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-unit {
    background: #f6f8f7;
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-panel-range {
    background: #fff;
}

.ctree .ctree-panel .ctree-pill {
    border-top-color: #e5eae6;
}

.ctree .ctree-panel .ctree-pill:hover {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 3px 0 0 var(--pill-line);
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"] {
    padding-left: 22px;
    border-top-color: transparent;
    border-radius: 9px;
    background: #fff;
    color: var(--pill-dark);
    font-weight: 700;
    box-shadow:
        inset 4px 0 0 var(--pill),
        0 1px 2px rgba(21, 36, 27, 0.10),
        0 8px 18px -10px rgba(21, 36, 27, 0.4);
}

/* The hairline above the next row would otherwise cut across the lifted
   card's bottom edge. */
.ctree .ctree-panel .ctree-pill[aria-expanded="true"]+.ctree-pill {
    border-top-color: transparent;
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"]::before {
    color: var(--pill);
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"]::after {
    border-color: var(--pill);
    transform: rotate(45deg) translate(2px, -2px);
}

/* The detail pane is white now, so its picked range takes the tint the row
   above gave up -- the same move, mirrored. */
.ctree .ctree-panel-range .ctree-pill[aria-pressed="true"] {
    padding-left: 17px;
    border-radius: 7px;
    border-bottom-color: transparent;
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--pill);
}

/* ===== Selected row, take 2 =============================================
   The lifted white card was doing its work with shadow alone, which on a
   near-white list is the weakest signal available. The selected row is now
   filled in the unit's own colour and run full width, the way a sidebar
   marks the page you are on: unmistakable at a glance, and it carries the
   colour of the pane it is driving straight across to it. */
.ctree .ctree-panel .ctree-pill[aria-expanded="true"] {
    padding-left: 16px;
    border-top-color: transparent;
    border-radius: 0;
    background: linear-gradient(90deg, var(--pill-dark) 0%, var(--pill) 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"]+.ctree-pill {
    border-top-color: transparent;
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"]::before {
    color: rgba(255, 255, 255, 0.62);
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"]::after {
    border-color: #fff;
    transform: rotate(45deg) translate(2px, -2px);
}

/* The picked range takes the same fill, so "selected" means one thing in
   both panes. */
.ctree .ctree-panel-range .ctree-pill[aria-pressed="true"] {
    padding-left: 13px;
    border-radius: 6px;
    border-bottom-color: transparent;
    background: linear-gradient(90deg, var(--pill-dark) 0%, var(--pill) 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

/* currentColor rather than a fixed accent: the ring then reads on a white
   row and on a filled one without a second rule, and it no longer looks
   like a stray gold border sitting around the selected item. */
.ctree .ctree-panel .ctree-pill:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -5px;
}
/* ===== Selected row: connected tab ======================================
   The selected row is the one the detail pane is showing, so it is given the
   pane's own ground and run the full width of the list column. Where every
   other row sits on the list's tint, the selected one is white and meets the
   white pane with nothing between them -- it reads as a tab joined to the
   panel it drives.

   The separating line between the panes is dropped rather than broken at the
   selected row: the row cannot paint over it, because the list scrolls and a
   scroll container clips horizontally as well. The tint-against-white edge
   does the separating instead, and then the join happens for free. */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-panel-range {
    border-left: 0;
}

/* Rows go edge to edge so the selected one can reach the pane; the gutter
   that used to live on the section moves onto the rows and the caption. */
.ctree .ctree-panel .ctree-unit {
    padding: 0;
}

.ctree .ctree-panel .ctree-unit-label {
    padding: 26px 24px 11px;
}

.ctree .ctree-panel .ctree-pill {
    padding: 15px 18px 15px 24px;
}

.ctree .ctree-panel .ctree-pill:hover {
    padding-left: 28px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: inset 3px 0 0 var(--pill-line);
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"] {
    padding-left: 28px;
    border-top-color: transparent;
    border-radius: 0;
    background: #fff;
    color: var(--pill-dark);
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--pill);
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"]+.ctree-pill {
    border-top-color: transparent;
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"]::before {
    color: var(--pill);
}

.ctree .ctree-panel .ctree-pill[aria-expanded="true"]::after {
    border-color: var(--pill);
    transform: rotate(45deg) translate(2px, -2px);
}

/* Mirrored in the pane: its list is white, so the picked range takes the
   tint the row on the left gave up. */
.ctree .ctree-panel-range .ctree-pill[aria-pressed="true"] {
    padding-left: 16px;
    border-radius: 6px;
    border-bottom-color: transparent;
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--pill);
}

/* Stacked, there is no pane alongside to join -- the tint edge is all that
   is left to carry the selection, so the row keeps its rule. */
@media (max-width: 991.98px) {
    .ctree .ctree-panel:not(.ctree-panel-range)>.ctree-panel-range {
        border-top: 1px solid var(--ctree-hair);
    }
}
/* ===== Hover ============================================================
   Hover was a washed-out version of the selected row -- both went paler and
   both grew a left bar, so a hovered row looked like a half-selected one.
   They now move in opposite directions: selection lifts a row to white and
   gives it the bar, hover sinks it into a deeper tint and gives it none.
   The text shifts to the unit's colour either way, so the row still answers
   to the pointer without borrowing the selected row's signal. */
.ctree .ctree-panel .ctree-pill:hover {
    padding-left: 24px;
    background: #ebf0ec;
    color: var(--pill-dark);
    box-shadow: none;
}

.ctree .ctree-panel .ctree-pill:hover::before {
    color: var(--pill);
}

.ctree .ctree-panel .ctree-pill:hover::after {
    border-color: var(--pill);
    transform: rotate(45deg) translate(3px, -3px);
}

/* The selected row is already where hover would take it, so it stays put --
   nothing should move when the pointer crosses the row you are reading. */
.ctree .ctree-panel .ctree-pill[aria-expanded="true"]:hover {
    padding-left: 28px;
    background: #fff;
    color: var(--pill-dark);
    box-shadow: inset 4px 0 0 var(--pill);
}

/* The pane's list is white, so its hover sinks from white into the tint --
   the same move, one step lighter because the ground is lighter. */
.ctree .ctree-panel-range .ctree-pill:hover {
    padding-left: 13px;
    background: #f1f5f2;
    color: var(--pill-dark);
}

.ctree .ctree-panel-range .ctree-pill[aria-pressed="true"]:hover {
    padding-left: 16px;
    background: var(--pill-soft);
    box-shadow: inset 3px 0 0 var(--pill);
}
/* ===== Selector, inverted ===============================================
   The caption and its row swap grounds: the caption carries the solid unit
   colour and the circles sit on the tint, outlined. A row of thirteen solid
   capsules was the heaviest thing on the page while the caption naming them
   was the lightest -- this puts the weight on the one element that labels
   the row, and lets the open circle be the only filled capsule in it.

   Scoped by .ctree-circle and by the direct-child path, so the rows inside
   the panels keep their own treatment. */
.ctree>.ctree-unit>.ctree-unit-label {
    border-color: var(--pill);
    background: var(--pill);
    color: #fff;
}

.ctree>.ctree-unit>.ctree-unit-label .ctree-count {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ctree .ctree-circle {
    border-color: var(--pill-line);
    background: var(--pill-soft);
    color: var(--pill-dark);
    box-shadow: 0 1px 3px rgba(21, 36, 27, 0.07);
}

.ctree .ctree-circle:hover {
    border-color: var(--pill);
    background: var(--pill);
    color: #fff;
    box-shadow: 0 6px 16px rgba(21, 36, 27, 0.2);
}

/* The open circle stays the one filled capsule, now at the dark end of the
   ramp so it still reads as picked against outlined neighbours. */
.ctree .ctree-circle[aria-expanded="true"] {
    border-color: var(--ctree-gold);
    background: var(--pill-dark);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(194, 161, 78, 0.38);
}
/* ===== Ranges below, not beside ========================================
   The detail pane moves back under the division list and runs the full width
   of the card.

   It also fixes a real defect in the side-by-side version: that pane set its
   ranges with `column-count` AND capped its height. CSS columns flow sideways
   when the height is constrained, so a division with fifteen ranges laid six
   into view and pushed the other nine off to the right behind a horizontal
   scrollbar. Grid rows flow downward instead, so the cap now does what a cap
   is supposed to do -- scroll vertically, with every range reachable. */
.ctree .ctree-panel:not(.ctree-panel-range) {
    display: block;
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-panel-range {
    border-top: 1px solid var(--ctree-hair);
    border-left: 0;
    background: #fff;
}

.ctree .ctree-panel-range .ctree-heading {
    padding: 13px 70px 13px 24px;
}

/* Grid, not columns: reading order goes across the row rather than down each
   column, and a capped height scrolls instead of spilling sideways. */
.ctree .ctree-panel-range .ctree-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 30px;
    column-count: auto;
    max-height: calc(6 * 42px);
    padding: 12px 24px 16px;
}

@media (max-width: 991.98px) {
    .ctree .ctree-panel-range .ctree-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 22px;
    }
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel-range .ctree-pills {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 16px 14px;
    }
}

/* ===== Range opens under its own row ====================================
   The Range panel now sits inside the division list, immediately after the
   row it belongs to, so it opens under the division that was clicked.

   That means the list can no longer be a capped scroll box -- an expanded
   panel inside a 234px window would be a scroll area inside a scroll area.
   The cap moves to the range grid alone, which is the part that can run to
   forty entries; the division list is at most eleven and sets its own height. */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-unit>.ctree-pills {
    max-height: none;
    overflow: visible;
}

/* Full width of the card, and ruled top and bottom so it reads as belonging
   to the row above rather than floating between two of them. */
.ctree .ctree-panel .ctree-panel-range {
    margin: 0;
    border-top: 1px solid var(--ctree-hair);
    border-bottom: 1px solid var(--ctree-hair);
    background: #fff;
}

/* The open row is white and the panel under it is white, so the two join --
   the hairline between them would only cut the join. */
.ctree .ctree-panel .ctree-pill[aria-expanded="true"]+.ctree-panel-range {
    border-top-color: transparent;
}

/* ===== Ranges are not interactive =======================================
   Clicking a range does nothing, so it carries none of the cues that say it
   would: no pointer, no hover shift, no selected state, no focus ring. They
   are now <span>s rather than buttons, which also keeps 577 dead tab stops
   out of the page. */
.ctree .ctree-range {
    cursor: default;
}

.ctree .ctree-panel-range .ctree-pill:hover,
.ctree .ctree-panel-range .ctree-pill[aria-pressed="true"] {
    padding-left: 13px;
    border-radius: 0;
    border-bottom-color: #f0f2ef;
    background: none;
    color: var(--ctree-ink);
    font-weight: 400;
    box-shadow: none;
}

/* ===== Range list as chips =============================================
   Ranges are leaves and read as a set of names, not a list of rows, so they
   are set as chips that flow rather than as cells in a grid. The names run
   from "Vandalur" to "Forestry Extension Range, Chengalpattu"; a fixed
   three-column grid had to size every cell for the longest of them, leaving
   most of the band empty. Flowing them packs the same forty names into a
   fraction of the height and stops them reading as clickable rows. */
.ctree .ctree-panel-range .ctree-pills {
    display: flex;
    flex-wrap: wrap;
    /* The selector's rows are centred; a list of names is not -- it lines up
       with the division rows above it. */
    justify-content: flex-start;
    align-content: flex-start;
    gap: 8px;
    grid-template-columns: none;
    column-gap: 8px;
    column-count: auto;
    max-height: calc(7 * 38px);
    padding: 16px 24px 18px;
}

.ctree .ctree-panel-range .ctree-pill {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 7px 14px;
    border: 1px solid var(--pill-line);
    border-bottom: 1px solid var(--pill-line);
    border-radius: 6px;
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    break-inside: auto;
}

/* Nothing happens on click, so nothing happens on hover either. */
.ctree .ctree-panel-range .ctree-pill:hover {
    padding: 7px 14px;
    border-radius: 6px;
    border-color: var(--pill-line);
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-weight: 400;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel-range .ctree-pills {
        padding: 14px 16px 16px;
    }
}

/* ===== Range caption ====================================================
   The full-width tinted band was the heaviest thing in the card for the
   least content -- two words and a number across 900px. It becomes the same
   caption the unit sections already use: label, dotted leader, tally. One
   heading pattern for the whole card instead of two. */
.ctree .ctree-panel-range .ctree-heading {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 18px 24px 6px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--pill-dark);
}

/* Was the gold under-rule of the old band; now the leader running out to
   the tally. Ordered ahead of the count, which ::after would otherwise
   follow. */
.ctree .ctree-panel-range .ctree-heading::after {
    content: "";
    /* The side-by-side layout had switched this off; it is the leader now,
       so it has to come back on or the tally collides with the name. */
    display: block;
    position: static;
    order: 0;
    flex: 1;
    min-width: 24px;
    height: 0;
    margin: 0 14px;
    transform: translateY(2px);
    border-bottom: 1px dotted #ccd4ce;
    background: none;
}

.ctree .ctree-panel-range .ctree-heading-sub {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: none;
    color: var(--ctree-ink);
}

/* The gold stile belonged to the dark masthead; against the card it reads
   as a quiet separator instead. */
.ctree .ctree-panel-range .ctree-heading-sub::before {
    width: 1px;
    height: 11px;
    margin: 0 11px;
    background: #c6cfc8;
    opacity: 1;
}

.ctree .ctree-panel-range .ctree-heading .ctree-count {
    order: 1;
    position: static;
    transform: none;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #7e887f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.ctree .ctree-panel-range .ctree-pills {
    padding: 10px 24px 18px;
}

@media (max-width: 575.98px) {

    .ctree .ctree-panel-range .ctree-heading {
        padding: 16px 16px 6px;
    }

    .ctree .ctree-panel-range .ctree-pills {
        padding: 10px 16px 16px;
    }
}

/* ===== Section headings ================================================
   The leader ran nearly the full width of the card to deliver a single
   digit, which is what a leader is for in an index entry and not what it
   was doing here. The count moves next to the thing it counts, the rule
   shortens to sit under the label alone, and the lozenge goes -- leaving a
   heading that is read in one glance instead of tracked across. */
.ctree .ctree-panel .ctree-unit-label,
.ctree .ctree-panel-range .ctree-heading {
    width: max-content;
    max-width: calc(100% - 48px);
    margin: 24px 24px 12px;
    padding: 0 0 7px;
    border-bottom: 2px solid var(--pill);
    font-size: 11.5px;
    letter-spacing: 1.2px;
}

.ctree .ctree-panel .ctree-unit-label::before,
.ctree .ctree-panel .ctree-unit-label::after,
.ctree .ctree-panel-range .ctree-heading::after {
    content: none;
}

.ctree .ctree-panel .ctree-unit-label .ctree-count,
.ctree .ctree-panel-range .ctree-heading .ctree-count {
    order: 0;
    margin: 0 0 0 11px;
    padding: 1px 7px;
    min-width: 0;
    height: auto;
    border: 1px solid var(--pill-line);
    border-radius: 4px;
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-size: 11px;
    letter-spacing: 0.3px;
}

.ctree .ctree-panel-range .ctree-pills {
    padding: 0 24px 18px;
}

@media (max-width: 575.98px) {

    .ctree .ctree-panel .ctree-unit-label,
    .ctree .ctree-panel-range .ctree-heading {
        max-width: calc(100% - 32px);
        margin: 20px 16px 10px;
    }

    .ctree .ctree-panel-range .ctree-pills {
        padding: 0 16px 16px;
    }
}

/* ===== Section headings as pills =======================================
   The selector at the top of the page labels its two rows with a solid
   capsule in the unit's colour. The card's sections label the same two
   things, so they take the same form at a smaller size -- one heading
   shape for the whole page rather than a capsule above and an underlined
   caption below. The tally rides inside the capsule. */
.ctree .ctree-panel .ctree-unit-label,
.ctree .ctree-panel-range .ctree-heading {
    width: max-content;
    max-width: calc(100% - 48px);
    margin: 24px 24px 14px;
    padding: 6px 15px;
    border: 0;
    border-radius: 999px;
    background: var(--pill);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.ctree .ctree-panel .ctree-unit-label .ctree-count,
.ctree .ctree-panel-range .ctree-heading .ctree-count {
    margin: 0 0 0 11px;
    padding: 1px 7px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 10.5px;
    letter-spacing: 0.3px;
}

@media (max-width: 575.98px) {

    .ctree .ctree-panel .ctree-unit-label,
    .ctree .ctree-panel-range .ctree-heading {
        max-width: calc(100% - 32px);
        margin: 20px 16px 12px;
    }
}

/* ===== Unit headings back to the underlined caption ====================
   Only the Range heading keeps the solid capsule. The two unit headings go
   back to the ruled caption: they head the division rows, which are the
   substance of the card, and three filled capsules stacked down it was more
   weight than the rows they label. */
.ctree .ctree-panel .ctree-unit-label {
    margin: 24px 24px 12px;
    padding: 0 0 7px;
    border: 0;
    border-bottom: 2px solid var(--pill);
    border-radius: 0;
    background: none;
    color: var(--pill-dark);
    font-size: 11.5px;
    letter-spacing: 1.2px;
}

.ctree .ctree-panel .ctree-unit-label .ctree-count {
    margin: 0 0 0 11px;
    padding: 1px 7px;
    border: 1px solid var(--pill-line);
    border-radius: 4px;
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-size: 11px;
    letter-spacing: 0.3px;
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel .ctree-unit-label {
        margin: 20px 16px 10px;
    }
}

/* ===== Heading styles swapped ==========================================
   The two forms trade places: the unit headings take the solid capsule and
   the Range heading takes the ruled caption. The capsules now sit at the
   two points where the card changes subject, and the lighter caption marks
   the list nested inside a single row. */
.ctree .ctree-panel .ctree-unit-label {
    margin: 24px 24px 14px;
    padding: 6px 15px;
    border: 0;
    border-radius: 999px;
    background: var(--pill);
    color: #fff;
    font-size: 10.5px;
    letter-spacing: 1.3px;
}

.ctree .ctree-panel .ctree-unit-label .ctree-count {
    margin: 0 0 0 11px;
    padding: 1px 7px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 10.5px;
    letter-spacing: 0.3px;
}

.ctree .ctree-panel-range .ctree-heading {
    margin: 24px 24px 12px;
    padding: 0 0 7px;
    border: 0;
    border-bottom: 2px solid var(--pill);
    border-radius: 0;
    background: none;
    color: var(--pill-dark);
    font-size: 11.5px;
    letter-spacing: 1.2px;
}

.ctree .ctree-panel-range .ctree-heading .ctree-count {
    margin: 0 0 0 11px;
    padding: 1px 7px;
    border: 1px solid var(--pill-line);
    border-radius: 4px;
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-size: 11px;
    letter-spacing: 0.3px;
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel .ctree-unit-label {
        margin: 20px 16px 12px;
    }

    .ctree .ctree-panel-range .ctree-heading {
        margin: 20px 16px 10px;
    }
}

/* ===== Margin collapse under the masthead ==============================
   The heading's top margin was collapsing out through .ctree-unit, which
   carries no padding or border of its own to contain it. The margin ended
   up between the masthead and the tinted section rather than inside it, so
   a 24px strip of card showed through under the gold rule (measured: a 24px
   gap from the masthead's bottom to the section's top, and 0 from the
   section's top to the heading). Holding the space as the section's padding
   keeps it inside the tint.

   The second unit was unaffected -- its border-top already blocked the
   collapse -- so this also makes the two sections space identically. */
.ctree .ctree-panel .ctree-unit {
    padding-top: 22px;
}

.ctree .ctree-panel .ctree-unit-label {
    margin-top: 0;
}

/* The range panel opens right under its own row, so it does not need the
   separation a free-standing block would -- tightening the lead-in and the
   tail keeps the list reading as part of the row above it. */
.ctree .ctree-panel-range .ctree-heading {
    margin: 11px 24px 10px;
}

.ctree .ctree-panel-range .ctree-pills {
    padding: 0 24px 13px;
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel-range .ctree-heading {
        margin: 10px 16px 9px;
    }

    .ctree .ctree-panel-range .ctree-pills {
        padding: 0 16px 12px;
    }
}

/* The panel kept a 26px side / 22px bottom padding from when it was the
   detail pane of a two-column card. Its heading and chip list now carry
   their own gutters, so that padding was stacking on top of theirs: the
   range content sat 50px in while the division rows above it sat at 24px,
   and the list had 22px of dead space under it. Only a small nesting
   indent is kept. */
.ctree .ctree-panel .ctree-panel-range {
    padding: 0 0 0 12px;
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel .ctree-panel-range {
        padding-left: 6px;
    }
}

/* ===== Masthead without the weave ======================================
   The diagonal texture was doing nothing the gradient does not, and it
   competed with the name sitting on top of it. Only the raking highlight
   and the base gradient remain. */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading {
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(118deg, var(--pill-deep) 0%, var(--pill-rich) 100%);
}

/* ===== Names carry the weight =========================================
   The eyebrows ("DIVISION", "RANGE") were set as heavily as the names they
   label. The labels drop back to a quiet caption and the names -- the one
   piece of information on each line -- take the size and the weight. */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading .ctree-heading-sub {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
}

/* Division rows: the name is what the row is for, so it reads at full
   strength rather than as body text with a numeral in front of it. */
.ctree .ctree-panel .ctree-pill {
    font-size: 16px;
    font-weight: 700;
    color: var(--ctree-ink);
}

/* The numeral is an index, not content -- it stays out of the way. */
.ctree .ctree-panel .ctree-pill::before {
    font-weight: 400;
    color: #9aa49c;
}

/* Range names: bold too, in the unit's ink, so a chip reads as a name and
   not as a tag on something else. */
.ctree .ctree-panel-range .ctree-pill {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pill-dark);
}

/* ===== Both headings pushed further ===================================
   More separation between the label and the name in each: the labels drop
   another step in size and contrast, the names take another step up, so
   the eye lands on the name first in both places. */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading {
    padding: 17px 74px 17px 24px;
    font-size: 10px;
    letter-spacing: 2.2px;
    color: rgba(255, 255, 255, 0.52);
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading .ctree-heading-sub {
    font-size: 25px;
    letter-spacing: 0.1px;
    /* A touch of depth against the gradient -- at this size the name was
       sitting flat on the band. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading .ctree-heading-sub::before {
    width: 2px;
    height: 20px;
    margin: 0 16px;
    opacity: 1;
}

/* The Range caption gains a heavier rule and a filled tally, which is the
   most presence it can take without becoming a second masthead. */
.ctree .ctree-panel-range .ctree-heading {
    padding: 0 0 8px;
    border-bottom-width: 3px;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--pill-dark);
}

.ctree .ctree-panel-range .ctree-heading .ctree-count {
    padding: 2px 9px;
    border-color: var(--pill);
    background: var(--pill);
    color: #fff;
    font-size: 11.5px;
}

/* ===== Both headings, larger again ==================================== */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading {
    padding: 22px 74px 22px 26px;
    font-size: 11px;
    letter-spacing: 2.4px;
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading .ctree-heading-sub {
    font-size: 30px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.32);
}

.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading .ctree-heading-sub::before {
    height: 26px;
    margin: 0 18px;
}

.ctree .ctree-panel-range .ctree-heading {
    padding: 0 0 10px;
    border-bottom-width: 4px;
    font-size: 15px;
    letter-spacing: 1.6px;
}

.ctree .ctree-panel-range .ctree-heading .ctree-count {
    margin-left: 13px;
    padding: 3px 11px;
    border-radius: 5px;
    font-size: 13px;
}

/* The level label had been dimmed to let the name lead, which left it too
   faint to read as a label at all. It takes the gold of the stile beside
   it instead -- bright enough to be read, and still clearly subordinate to
   the name because it stays small and tracked. */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.6px;
    color: var(--ctree-gold);
}

/* ===== Headings centred ===============================================
   The three headings -- the masthead, the unit capsules and the Range
   caption -- are now centred over the lists they label. Only the headings
   move: the division rows and the range chips stay left-aligned, so the
   names still start on one vertical line and stay scannable.

   Each heading is already a max-content box, so centring is margin-inline
   auto rather than text-align; the masthead is a full-width flex band, so
   it centres its own content instead and gives back the 74px of right
   padding it was carrying from an earlier layout. */
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading {
    justify-content: center;
    padding-right: 26px;
    text-align: center;
}

.ctree .ctree-panel .ctree-unit-label,
.ctree .ctree-panel-range .ctree-heading {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

/* The Range caption goes back to the left: it labels the chip list directly
   under it, and the chips start at the left edge, so a centred caption sat
   away from the thing it names. The masthead and the unit capsules stay
   centred -- those head whole sections rather than one list. */
.ctree .ctree-panel-range .ctree-heading {
    margin-left: 24px;
    margin-right: auto;
    justify-content: flex-start;
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel-range .ctree-heading {
        margin-left: 16px;
    }
}

/* ===== Circle masthead ================================================
   The top-level caption. It takes the Division masthead's form so the
   three levels read as one family -- gold label, centred, on the dark
   band -- and the territorial colours explicitly, since it sits above
   both unit rows and so inherits no data-unit of its own. */
.ctree .ctree-heading-top {
    --pill-deep: var(--ctree-territorial-deep);
    --pill-rich: var(--ctree-territorial-rich);
    justify-content: center;
    margin: 0 0 26px;
    padding: 22px 26px;
    border-radius: 14px 14px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-align: center;
}

/* ===== Unit badge -> ruled divider ====================================
   The filled capsule was reading as a control -- the same shape as the
   circle and division pills beside it, so it looked clickable -- and three
   of them stacked down the card carried more weight than the names they
   label. It becomes a section rule instead: the label sits in a gap in a
   hairline that runs the width of the list, which is unmistakably a
   divider and leaves all the colour to the items themselves. */
.ctree .ctree-unit-label,
.ctree .ctree-panel .ctree-unit-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--pill-dark);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ctree>.ctree-unit>.ctree-unit-label {
    margin: 0 0 16px;
}

.ctree .ctree-panel .ctree-unit-label {
    margin: 0 24px 14px;
}

/* The two halves of the rule. flex: 1 lets them share whatever the label
   does not take, so the label stays centred however long its text is. */
.ctree .ctree-unit-label::before,
.ctree .ctree-unit-label::after,
.ctree .ctree-panel .ctree-unit-label::before,
.ctree .ctree-panel .ctree-unit-label::after {
    content: "";
    flex: 1 1 0;
    min-width: 16px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--pill-line);
    opacity: 1;
}

/* The tally loses its chip with the capsule and rides as a figure after a
   middot -- enough to be read, not enough to be a second object. */
.ctree .ctree-unit-label .ctree-count,
.ctree .ctree-panel .ctree-unit-label .ctree-count {
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.ctree .ctree-unit-label .ctree-count::before,
.ctree .ctree-panel .ctree-unit-label .ctree-count::before {
    content: "\00b7";
    margin-right: 8px;
    color: var(--pill-line);
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel .ctree-unit-label {
        margin: 0 16px 12px;
    }
}

/* The top-level caption was still being painted by the earlier inversion
   rule, which reaches it through a longer path than the divider rules
   above. The divider is restated at that path so both levels match. */
.ctree>.ctree-unit>.ctree-unit-label {
    border: 0;
    background: none;
    color: var(--pill-dark);
}

.ctree>.ctree-unit>.ctree-unit-label .ctree-count {
    border: 0;
    background: none;
    color: var(--pill);
}

/* ===== Unit badge -> tinted section strip =============================
   A third form. The capsule read as a control and the hairline rule read
   as almost nothing, so this goes the other way: a full-width band in the
   unit's palest tint, closed top and bottom by a hairline and anchored by
   a short spine at the left edge. Square corners and full bleed are what
   separate it from the rounded, inset pills -- a band across the whole
   column is plainly furniture, not something to press. */
.ctree .ctree-unit-label,
.ctree .ctree-panel .ctree-unit-label,
.ctree>.ctree-unit>.ctree-unit-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    max-width: none;
    padding: 9px 18px;
    border: 0;
    border-top: 1px solid var(--pill-line);
    border-bottom: 1px solid var(--pill-line);
    border-radius: 0;
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ctree>.ctree-unit>.ctree-unit-label {
    margin: 0 0 18px;
}

.ctree .ctree-panel .ctree-unit-label {
    margin: 0 0 14px;
}

/* The spine. It sits at the left edge of the band rather than beside the
   label so it marks where the section starts, which is the one thing the
   centred label cannot show. */
.ctree .ctree-unit-label::before,
.ctree .ctree-panel .ctree-unit-label::before,
.ctree>.ctree-unit>.ctree-unit-label::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    flex: none;
    width: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    background: var(--pill);
    opacity: 1;
}

.ctree .ctree-unit-label::after,
.ctree .ctree-panel .ctree-unit-label::after,
.ctree>.ctree-unit>.ctree-unit-label::after {
    content: none;
}

/* The tally comes back as a small solid lozenge -- against a tint this
   pale it is the one thing that needs to carry the unit colour at full
   strength to be read at a glance. */
.ctree .ctree-unit-label .ctree-count,
.ctree .ctree-panel .ctree-unit-label .ctree-count,
.ctree>.ctree-unit>.ctree-unit-label .ctree-count {
    height: auto;
    min-width: 22px;
    margin: 0;
    padding: 2px 8px;
    border: 0;
    border-radius: 4px;
    background: var(--pill);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-align: center;
}

.ctree .ctree-unit-label .ctree-count::before,
.ctree .ctree-panel .ctree-unit-label .ctree-count::before,
.ctree>.ctree-unit>.ctree-unit-label .ctree-count::before {
    content: none;
}

@media (max-width: 575.98px) {
    .ctree .ctree-panel .ctree-unit-label {
        margin: 0 0 12px;
        padding: 8px 14px;
    }
}

/* ===== Headings take the page title's voice ===========================
   The banner above the card sets "Circles / Divisions / Range" in the site
   stack at weight 800, sentence case, no tracking. Every caption in the
   tree was the opposite -- small, letter-spaced, all caps -- so the card
   read as a different document from the page it sits on. They all take the
   banner's treatment now, scaled down by level. Nothing here changes what
   the captions say, only how they are set.

   The strips also lose the spine at their left edge. */
.ctree .ctree-heading-top,
.ctree .ctree-panel:not(.ctree-panel-range)>.ctree-heading {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
}

.ctree .ctree-unit-label,
.ctree .ctree-panel .ctree-unit-label,
.ctree>.ctree-unit>.ctree-unit-label {
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
}

.ctree .ctree-unit-label::before,
.ctree .ctree-panel .ctree-unit-label::before,
.ctree>.ctree-unit>.ctree-unit-label::before {
    content: none;
}

.ctree .ctree-panel-range .ctree-heading {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
}

/* The tallies grow with the captions they sit beside. */
.ctree .ctree-unit-label .ctree-count,
.ctree .ctree-panel .ctree-unit-label .ctree-count,
.ctree>.ctree-unit>.ctree-unit-label .ctree-count {
    padding: 2px 9px;
    font-size: 12.5px;
    letter-spacing: normal;
}

.ctree .ctree-panel-range .ctree-heading .ctree-count {
    font-size: 13px;
    letter-spacing: normal;
}

.ctree .ctree-heading-top .ctree-count {
    font-size: 13px;
    letter-spacing: normal;
}

/* The division name is the row -- it carries the whole list -- so it steps
   up to sit between the Range caption above it and the body text around
   it, rather than matching them. */
.ctree .ctree-panel .ctree-pill {
    font-size: 19px;
}

/* ===== Range chips sit still ==========================================
   Hovering a range made the whole list jump. Two leftovers caused it: the
   generic pill hover lifts by 2px, and an older range-hover rule dropped
   the weight back to 400 -- thinner text makes a narrower chip, and the
   chips wrap, so one hover reflowed every row after it.

   A range is a leaf and nothing happens when you click it, so the hover
   state is now identical to the resting state in every property that
   affects size or position. */
.ctree .ctree-panel-range .ctree-pill,
.ctree .ctree-panel-range .ctree-pill:hover,
.ctree .ctree-panel-range .ctree-pill:focus,
.ctree .ctree-panel-range .ctree-pill:active {
    padding: 7px 14px;
    border: 1px solid var(--pill-line);
    border-radius: 6px;
    background: var(--pill-soft);
    color: var(--pill-dark);
    font-size: 14.5px;
    font-weight: 700;
    transform: none;
    box-shadow: none;
    cursor: default;
}

/* Dragging across them was also selecting the text, which is another way
   the block looked like it was moving. */
.ctree .ctree-panel-range .ctree-pill {
    -webkit-user-select: none;
    user-select: none;
}

/* Division rows, one step larger again. Targeted by .ctree-division rather
   than .ctree-pill so it cannot reach the range chips, which sit inside a
   panel of their own and were being swept up by the broader selector. */
.ctree .ctree-panel .ctree-division {
    font-size: 21px;
}