/* ==========================================================================
   Parent Dashboard: the child cards (inc/parent-overview.php)
   Ben chose mockup A2, 2026-10-24 (docs/mockups/pd-a2.html). The card's own box is the shared one in
   family.css (".lh-fam-form, .lh-fam-kid"). Amber only where something waits on someone.
   ========================================================================== */

.lh-po-grid
{
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: 24px;
    margin: 0 0 48px;
}

.lh-po-grid.is-one
{
    grid-template-columns: minmax( 0, 1fr );
}

.lh-po
{
    gap: 16px;
}

.lh-po-head
{
    display: flex;
    align-items: center;
    gap: 14px;
    --lh-av-size: 56px;
}

.lh-po-name
{
    margin: 0;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    color: var( --awb-custom_color_1 );
}

.lh-po-ko
{
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: var( --awb-custom_color_4 );
}

.lh-po-sub
{
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

.lh-po-box
{
    padding: 18px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 12px;
    background: var( --awb-color1 );
}

.lh-po-eyebrow
{
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var( --awb-custom_color_12 );
}

.lh-po-when
{
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    color: var( --awb-custom_color_1 );
}

.lh-po-small
{
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

.lh-po-h
{
    margin: 0 0 12px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    color: var( --awb-custom_color_1 );
}

/* --- four numbers --- */

.lh-po-tiles
{
    display: grid;
    grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
    gap: 10px;
}

.lh-po-tile
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 12px;
    background: var( --awb-color1 );
}

.lh-po-tile b
{
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: var( --awb-custom_color_1 );
}

.lh-po-tile span
{
    font-size: 13px;
    line-height: 1.35;
    color: var( --awb-custom_color_4 );
}

.lh-po-tile.is-wait
{
    background: var( --awb-custom_color_11 );
    border-color: var( --awb-custom_color_2 );
}

/* --- books (rings) and quizzes (bars), from mockup B --- */

.lh-po-pair
{
    display: grid;
    grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr );
    gap: 12px;
}

.lh-po-books
{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lh-po-book
{
    display: flex;
    align-items: center;
    gap: 14px;
}

.lh-po-book b
{
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    color: var( --awb-custom_color_1 );
}

.lh-po-ring
{
    --p: 0;
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient( var( --awb-color5 ) calc( var( --p ) * 1% ), rgba( 1, 47, 70, .08 ) 0 );
}

.lh-po-ring span
{
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var( --awb-color1 );
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    color: var( --awb-custom_color_1 );
}

.lh-po-bars
{
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-height: 120px;
    overflow-x: auto;
}

.lh-po-bar
{
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: var( --awb-custom_color_4 );
}

.lh-po-bar b
{
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    color: var( --awb-custom_color_1 );
}

.lh-po-bar i
{
    display: block;
    width: 34px;
    border-radius: 8px 8px 4px 4px;
    background: var( --awb-color5 );
}

.lh-po-bar i.is-low
{
    background: var( --awb-color4 );
}

/* --- the teacher's words: a paragraph, not a <blockquote>, which the theme draws with a left bar --- */

.lh-po-quote
{
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var( --awb-custom_color_1 );
}

/* --- the class-video answer: amber only while it is unanswered --- */

.lh-po-consent
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    font-size: 15px;
    line-height: 1.45;
}

.lh-po-consent.is-needs,
.lh-po-needs
{
    padding: 12px 14px;
    border: 1px solid var( --awb-custom_color_2 );
    border-radius: 12px;
    background: var( --awb-custom_color_11 );
}

.lh-po-needs
{
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.lh-po-chip
{
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
}

.lh-po-chip--wait
{
    background: var( --awb-custom_color_11 );
    color: var( --awb-custom_color_1 );
}

/* --- the details at the foot --- */

.lh-po-facts
{
    display: grid;
    grid-template-columns: max-content minmax( 0, 1fr );
    gap: 6px 14px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.lh-po-facts dt
{
    color: var( --awb-custom_color_4 );
}

.lh-po-facts dd
{
    margin: 0;
    color: var( --awb-custom_color_1 );
}

/* --- phones: the row of children to jump to (two or more only) --- */

.lh-po-jump
{
    display: none;
}

@media only screen and (max-width: 1024px)
{
    .lh-po-grid
    {
        grid-template-columns: minmax( 0, 1fr );
    }
}

@media only screen and (max-width: 640px)
{
    .lh-po-jump
    {
        display: flex;
        gap: 10px;
        margin: 0 0 18px;
        overflow-x: auto;
        --lh-av-size: 30px;
    }

    .lh-po-jump a
    {
        display: flex;
        flex: none;
        align-items: center;
        gap: 8px;
        padding: 6px 14px 6px 6px;
        border: 1px solid var( --lh-fam-line );
        border-radius: 999px;
        background: var( --awb-color1 );
        font-weight: 500;
        font-size: 15px;
        line-height: 1.4;
        color: var( --awb-custom_color_1 );
        text-decoration: none;
    }

    .lh-po
    {
        padding: 16px;
    }

    .lh-po-tiles
    {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    }

    .lh-po-pair
    {
        grid-template-columns: minmax( 0, 1fr );
    }
}

/* ==========================================================================
   PD Home: "the week, then the journey" (lh_pe_home(), Ben chose mockup E, 2026-10-25)
   One page per child; the family's rows switch between them (js/lh-views.js). Every box is the soft
   card: white or the navy tint, 1px of the family line all round. Amber only where the parent is
   needed (the class-video answer); navy for the week; jade for progress.
   ========================================================================== */

.lh-pe
{
    --lh-pe-r: 14px;
    color: var( --awb-custom_color_1 );
}

/* --- the family: one small card per child, side by side at equal widths (three across for three children);
   one child, no cards (v3, Ben 2026-11-08) --- */

.lh-pe-family
{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
    gap: 12px;
    margin: 0 0 32px;
    --lh-av-size: 44px;
}

.lh-pe-row
{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 12px;
    background: var( --lh-fam-soft );
    color: var( --awb-custom_color_1 );
    text-decoration: none;
}

/* Grey on the white page, like every box on it. The chosen child is ringed in navy; the one under the pointer
   gets a navy edge. (Not white: a white row would sit on the white page.) */
.lh-pe-row:hover,
.lh-pe-row.is-on
{
    border-color: var( --awb-custom_color_1 );
    color: var( --awb-custom_color_1 );
}

.lh-pe-row.is-on
{
    box-shadow: 0 0 0 1px var( --awb-custom_color_1 );
}

.lh-pe-row-who
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lh-pe-row-who > b
{
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
}

.lh-pe-meta b
{
    font-weight: 500;
}

.lh-pe-meta
{
    font-size: 13px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

/* --- chips: jade is "fine", amber is "needs you", the plain one is neither --- */

.lh-pe-chip
{
    display: inline-block;
    justify-self: end;
    padding: 4px 12px;
    border-radius: 999px;
    background: var( --awb-color1 );
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    color: var( --awb-custom_color_1 );
}

.lh-pe-chip b
{
    font-weight: 600;
}

.lh-pe-chip.is-ok
{
    background: var( --awb-custom_color_10 );
}

.lh-pe-chip.is-attn
{
    background: var( --awb-custom_color_11 );
}

/* --- the chosen child --- */

.lh-pe-who
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 20px;
}

/* "Open Emma's dashboard" (inc/view-as.php, Ben 2026-11-02): the family's own button, at the right of the
   child's name; a full row of its own on phones. */
.lh-pe .lh-pe-open
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: auto;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

/* "Emma's homework": under the child's name, jade with navy words (about 8:1), so a parent cannot miss it
   (Ben, 2026-11-08). Navy with white words under the pointer. */
.lh-pe .lh-pe-hw
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 12px 0 0;
    padding: 0 20px;
    border: 2px solid var( --awb-color5 );
    border-radius: 999px;
    background: var( --awb-color5 );
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    color: var( --awb-custom_color_1 );
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.lh-pe .lh-pe-hw:hover,
.lh-pe .lh-pe-hw:focus-visible
{
    border-color: var( --awb-custom_color_1 );
    background: var( --awb-custom_color_1 );
    color: var( --awb-color1 );
}

.lh-pe .lh-pe-hw .lh-pe-i
{
    flex: none;
    width: 18px;
    height: 18px;
}

.lh-pe .lh-pe-name
{
    margin: 0;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    color: var( --awb-custom_color_1 );
}

.lh-pe-name .lh-pe-ko
{
    margin-left: 10px;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    color: var( --awb-custom_color_4 );
}

.lh-pe-sub
{
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: var( --awb-custom_color_4 );
}

.lh-pe-needs
{
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid var( --awb-custom_color_2 );
    border-radius: 10px;
    background: var( --awb-custom_color_11 );
    font-size: 15px;
    line-height: 1.45;
}

/* One column: the week, Latest updates, Coming up, the teachers, the journey, Details, each the full width
   (v3, Ben 2026-11-08). */
.lh-pe-kid > .lh-pe-card,
.lh-pe-upd
{
    margin: 0 0 20px;
}

.lh-pe-upd
{
    margin-top: 32px;
}

/* Grounds alternate, so no box sits on its own colour (Ben, 2026-10-25): cards and weeks grey on the white page,
   what sits inside them white, the icons inside those grey again. */
.lh-pe-card
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border: 1px solid var( --lh-fam-line );
    border-radius: var( --lh-pe-r );
    background: var( --lh-fam-soft );
}

.lh-pe .lh-pe-h
{
    margin: 0 0 4px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    color: var( --awb-custom_color_1 );
}

.lh-pe .lh-pe-h--out
{
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.3;
}

.lh-pe-small
{
    font-size: 13px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

/* No word left alone on a last line (measured at 400, 768 and 1440). */
.lh-pe-small,
.lh-pe-quote,
.lh-pe-note,
.lh-pe-e-d,
.lh-pe-sub,
.lh-pe-todo li > span
{
    text-wrap: pretty;
}

/* --- the week: the one navy card, four figures and the level --- */

.lh-pe-week
{
    gap: 0;
    border-color: var( --awb-custom_color_1 );
    background: var( --awb-custom_color_1 );
    color: var( --awb-color1 );
}

.lh-pe-eyebrow
{
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var( --awb-color5 );
}

/* Each figure is a link to what it counts (js/parent-dashboard.js). */
.lh-pe-stats
{
    display: grid;
    grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
    gap: 10px;
    margin: 0 0 20px;
}

.lh-pe .lh-pe-stat
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid rgba( 255, 255, 255, .14 );
    border-radius: 10px;
    background: rgba( 255, 255, 255, .08 );
    color: var( --awb-color1 );
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.lh-pe .lh-pe-stat:hover,
.lh-pe .lh-pe-stat:focus-visible
{
    border-color: var( --awb-color5 );
    background: rgba( 255, 255, 255, .12 );
    color: var( --awb-color1 );
}

.lh-pe-stat b
{
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
}

.lh-pe-stat > span
{
    font-size: 13px;
    line-height: 1.4;
    color: rgba( 255, 255, 255, .78 );
}

.lh-pe-lv
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.4;
}

.lh-pe-lv b
{
    font-weight: 500;
}

.lh-pe-lv > span
{
    color: rgba( 255, 255, 255, .78 );
}

.lh-pe-lv > span b
{
    color: var( --awb-color1 );
}

/* What a jump lands on is marked for a moment. */
.lh-pe-e.is-flash,
.lh-pe-card.is-flash,
.lh-pe-wk.is-flash
{
    box-shadow: 0 0 0 2px var( --awb-color5 );
    transition: box-shadow .2s;
}

.lh-pe-e.is-flash
{
    background: var( --awb-custom_color_10 );
}

/* --- coming up, the teachers' words, the details --- */

/* Coming up: the next class and the homework side by side; the class-video answer, when owed, under both. */
.lh-pe-soon .lh-pe-todo
{
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: 10px;
}

.lh-pe-soon .lh-pe-todo li.is-attn
{
    grid-column: 1 / -1;
}

.lh-pe-quotes
{
    display: grid;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    gap: 12px;
}

.lh-pe-todo
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lh-pe-todo li,
.lh-pe-note
{
    border: 1px solid var( --lh-fam-line );
    border-radius: 10px;
    background: var( --awb-color1 );
}

.lh-pe-todo li
{
    display: grid;
    grid-template-columns: 36px minmax( 0, 1fr );
    gap: 2px 12px;
    align-items: center;
    margin: 0;
    padding: 10px 12px;
}

.lh-pe-todo li.is-attn
{
    border-color: var( --awb-custom_color_2 );
    background: var( --awb-custom_color_11 );
}

.lh-pe-todo li > b
{
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
}

.lh-pe-todo li > span:not( .lh-pe-ico )
{
    font-size: 13px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

.lh-pe-todo .lh-pe-ico
{
    grid-row: span 2;
}

.lh-pe-ico
{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var( --lh-fam-soft );
    color: var( --awb-custom_color_1 );
}

.lh-pe-i
{
    width: 18px;
    height: 18px;
}

.lh-pe-vc
{
    grid-row: span 2;
    font-size: 14px;
    line-height: 1.45;
}

.lh-pe-vc .lh-vc-card,
.lh-pe-vc .lh-vc-withdraw
{
    display: block;
}

.lh-pe-note
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
}

.lh-pe-quote
{
    font-size: 15px;
    line-height: 1.5;
}

/* A report read in place sits in a white note, so its own white card takes the grey. */
.lh-pe-note .lh-rep-card
{
    background: var( --lh-fam-soft );
}

.lh-pe-rep summary
{
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}

/* --- every week, folded; the focus week open --- */

.lh-pe-weeks
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Grounds alternate, so no box sits on its own colour (Ben, 2026-10-25: "we never have white on white or gray on
   gray"): the weeks are the soft grey on the white page, the updates inside them white, their icons grey again. */
.lh-pe-wk
{
    border: 1px solid var( --lh-fam-line );
    border-radius: 12px;
    background: var( --lh-fam-soft );
}

.lh-pe-wk summary
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr ) auto auto auto;
    gap: 4px 12px;
    align-items: center;
    padding: 14px 18px;
    list-style: none;
    cursor: pointer;
}

.lh-pe-wk summary::-webkit-details-marker
{
    display: none;
}

.lh-pe-wk summary::after
{
    content: "";
    width: 8px;
    height: 8px;
    margin: 0 4px 4px 0;
    border: solid var( --awb-custom_color_1 );
    border-width: 0 2px 2px 0;
    transform: rotate( 45deg );
}

.lh-pe-wk[open] summary::after
{
    margin: 4px 4px 0 0;
    transform: rotate( -135deg );
}

.lh-pe-wk-t
{
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
}

.lh-pe-wk-c
{
    font-size: 13px;
    line-height: 1.45;
    text-align: right;
    color: var( --awb-custom_color_4 );
}

.lh-pe-wk summary .lh-pe-chip
{
    grid-column: 3;
    grid-row: 1;
}

.lh-pe-wk summary::after
{
    grid-column: 4;
}

.lh-pe-ev
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0 18px 16px;
    list-style: none;
}

.lh-pe-e
{
    display: grid;
    grid-template-columns: 36px minmax( 0, 1fr ) auto;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 10px;
    background: var( --awb-color1 );
}

.lh-pe-e .lh-pe-ico
{
    background: var( --lh-fam-soft );
}

.lh-pe-e--lesson .lh-pe-ico,
.lh-pe-e--topic .lh-pe-ico,
.lh-pe-e--course .lh-pe-ico,
.lh-pe-e--marked .lh-pe-ico
{
    background: var( --awb-custom_color_10 );
}

.lh-pe-e--report .lh-pe-ico
{
    background: var( --awb-custom_color_1 );
    color: var( --awb-color1 );
}

/* A badge a teacher gave: its own picture in the icon's place. */
.lh-pe-ico--badge img
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.lh-pe-e-body
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lh-pe-e-t
{
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
}

.lh-pe-e-d
{
    font-size: 14px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

.lh-pe-e-d a
{
    color: var( --awb-custom_color_4 );
}

.lh-pe-e-r
{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    color: var( --awb-custom_color_4 );
}

.lh-pe-score
{
    padding: 2px 10px;
    border-radius: 999px;
    background: var( --awb-custom_color_10 );
    font-size: 13px;
    line-height: 1.5;
    color: var( --awb-custom_color_1 );
}

.lh-pe-score b
{
    font-weight: 600;
}

.lh-pe-score.is-low
{
    background: var( --awb-custom_color_11 );
}

/* --- Latest updates, by type or by week (lh_pu_section(); Ben 2026-11-08, docs/mockups/pd-home/updates.html) ---
   One colour per kind, used by the chips, the chart, the counts and the headings alike. */

.lh-pu
{
    --lh-pu-homework: var( --awb-custom_color_1 );
    --lh-pu-lessons: var( --awb-color5 );
    --lh-pu-quizzes: rgb( 87, 182, 222 );   /* the palette's sky (--awb-custom_color_5 is it at 17%) */
    --lh-pu-badges: var( --awb-custom_color_2 );
    --lh-pu-reports: var( --awb-custom_color_12 );
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lh-pu--homework
{
    --lh-pu-c: var( --lh-pu-homework );
}

.lh-pu--lessons
{
    --lh-pu-c: var( --lh-pu-lessons );
}

.lh-pu--quizzes
{
    --lh-pu-c: var( --lh-pu-quizzes );
}

.lh-pu--badges
{
    --lh-pu-c: var( --lh-pu-badges );
}

.lh-pu--reports
{
    --lh-pu-c: var( --lh-pu-reports );
}

.lh-pu-top
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lh-pu-seg
{
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 999px;
    background: var( --lh-fam-soft );
}

.lh-pu-seg a
{
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    color: var( --awb-custom_color_1 );
    text-decoration: none;
}

.lh-pu-seg a.is-on
{
    background: var( --awb-custom_color_1 );
    color: var( --awb-color1 );
    font-weight: 500;
}

.lh-pu-sel
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 12px;
    background: var( --awb-color1 );
}

.lh-pu-sel span
{
    color: var( --awb-custom_color_4 );
    font-size: 11px;
    line-height: 1.4;
}

.lh-pu-sel select
{
    min-width: 130px;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var( --awb-custom_color_1 );
    cursor: pointer;
}

.lh-pu-chips
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lh-pu-chip
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 999px;
    background: var( --awb-color1 );
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    color: var( --awb-custom_color_1 );
    text-decoration: none;
}

.lh-pu-chip i,
.lh-pu-ct i,
.lh-pu-sub i
{
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var( --lh-pu-c );
}

.lh-pu-n
{
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var( --awb-custom_color_6 );
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
}

.lh-pu-chip.is-on
{
    border-color: var( --awb-custom_color_1 );
    background: var( --awb-custom_color_1 );
    color: var( --awb-color1 );
}

.lh-pu-chip.is-on .lh-pu-n
{
    background: rgba( 255, 255, 255, .2 );
}

.lh-pu-chip.is-on i
{
    box-shadow: 0 0 0 1.5px var( --awb-color1 );
}

@media ( hover: hover ) and ( pointer: fine )
{
    .lh-pu-chip:not( .is-on ):hover,
    .lh-pu-seg a:not( .is-on ):hover
    {
        background: var( --awb-color1 );
        box-shadow: inset 0 0 0 1px var( --awb-custom_color_1 );
        color: var( --awb-custom_color_1 );
    }
}

/* On PD Home the kind chips are the chart's key, beside it, so each count shows once (v3, Ben 2026-11-08). */
@media only screen and (min-width: 801px)
{
    .lh-pe-upd .lh-pu
    {
        display: grid;
        grid-template-columns: minmax( 0, 1fr ) 220px;
        gap: 8px 16px;
    }

    .lh-pe-upd .lh-pu > *
    {
        grid-column: 1 / -1;
    }

    .lh-pe-upd .lh-pu > .lh-pu-chart
    {
        grid-column: 1;
        grid-row: 2;
    }

    .lh-pe-upd .lh-pu > .lh-pu-chips
    {
        grid-column: 2;
        grid-row: 2;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .lh-pe-upd .lh-pu-chip .lh-pu-n
    {
        margin-left: auto;
    }
}

/* the chart */

.lh-pu-chart
{
    padding: 16px 18px 12px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 12px;
    background: var( --lh-fam-soft );
}

.lh-pu-chart-h
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0 0 10px;
}

.lh-pu-chart-h b
{
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
}

.lh-pu-chart-h span
{
    color: var( --awb-custom_color_4 );
    font-size: 13px;
    line-height: 1.4;
}

.lh-pu-bars,
.lh-pu-x
{
    display: grid;
    grid-template-columns: repeat( var( --n ), minmax( 0, 1fr ) );
    gap: 6px;
}

.lh-pu-bars
{
    align-items: end;
    height: 150px;
    background: linear-gradient( var( --lh-fam-line ), var( --lh-fam-line ) ) bottom / 100% 1px no-repeat;
}

.lh-pu-bar
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 4px 0 0;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: none;
    cursor: pointer;
}

.lh-pu-bar.is-on
{
    background: var( --lh-fam-line );
}

@media ( hover: hover ) and ( pointer: fine )
{
    .lh-pu-bar:not( .is-on ):hover
    {
        background: var( --lh-fam-soft );
    }
}

.lh-pu-bn
{
    margin: 0 0 3px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: var( --awb-custom_color_1 );
}

.lh-pu-stack
{
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    margin: 0 18%;
    border-radius: 5px 5px 0 0;
}

.lh-pu-stack i
{
    display: block;
    flex: none;
    background: var( --lh-pu-c );
}

.lh-pu-stack i + i
{
    box-shadow: inset 0 -1px 0 rgba( 255, 255, 255, .7 );
}

.lh-pu-x
{
    margin: 6px 0 0;
}

.lh-pu-x span
{
    color: var( --awb-custom_color_4 );
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

/* the folds: the live week folds' box, with coloured counts */

.lh-pu-list
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lh-pu-fold > summary
{
    grid-template-columns: minmax( 0, 1fr ) auto auto;
}

.lh-pu-t
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    min-width: 0;
}

.lh-pu-t > b
{
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
}

.lh-pu-ico
{
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: -4px;
    border-radius: 8px;
    background: var( --lh-pu-c );
    color: var( --awb-color1 );
}

.lh-pu-ico.lh-pu--badges
{
    color: var( --awb-custom_color_1 );
}

.lh-pu-ico .lh-pe-i
{
    width: 16px;
    height: 16px;
}

.lh-pu-cts
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
}

.lh-pu-ct
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
    color: var( --awb-custom_color_4 );
}

.lh-pu-ct b
{
    color: var( --awb-custom_color_1 );
}

.lh-pu-mini
{
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 26px;
}

.lh-pu-mini i
{
    width: 7px;
    border-radius: 2px 2px 0 0;
    background: var( --lh-pu-quizzes );
}

.lh-pu-mini i.is-low
{
    opacity: .45;
}

/* An open week's counts are said again by its headings, so they go. */
.lh-pu-week[open] > summary .lh-pu-cts
{
    display: none;
}

/* A week with nothing of the chosen kind leaves the list. */
.lh-pu-week:has( .lh-pe-e ):not( :has( .lh-pe-e:not( [hidden] ) ) ),
.lh-pu-week:not( :has( .lh-pe-e ) ):has( .lh-pe-chip[hidden] )
{
    display: none;
}

.lh-pu-body
{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px 18px;
}

.lh-pu-body .lh-pe-ev
{
    padding: 0;
}

.lh-pe .lh-pu-sub,
.lh-pu-sub
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    color: var( --awb-custom_color_1 );
}

.lh-pu-sub span
{
    font-weight: 400;
    color: var( --awb-custom_color_4 );
}

.lh-pu .lh-pe-e-t a
{
    color: var( --awb-custom_color_1 );
}

/* Text links on PD Home look like links (Ben, 2026-11-08: "there's not even just a basic underline for the text
   links on hover"): a faint underline at rest, a full navy one on hover and keyboard focus. Buttons, chips and the
   week figures are not text links and keep their own look. */
.lh-pe .lh-pe-e-t a,
.lh-pe a:not( [ class ] )
{
    color: var( --awb-custom_color_1 );
    text-decoration: underline;
    text-decoration-color: rgba( 1, 47, 70, .3 );
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease;
}

.lh-pe .lh-pe-e-t a:hover,
.lh-pe .lh-pe-e-t a:focus-visible,
.lh-pe a:not( [ class ] ):hover,
.lh-pe a:not( [ class ] ):focus-visible
{
    text-decoration-color: var( --awb-custom_color_1 );
    text-decoration-thickness: 2px;
}

.lh-pu-times
{
    font-size: 13px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

.lh-pu .lh-pe-e--handed-in .lh-pe-ico,
.lh-pu .lh-pe-e--marked .lh-pe-ico
{
    background: var( --awb-custom_color_6 );
}

.lh-pu .lh-pe-e--quiz .lh-pe-ico
{
    background: var( --awb-custom_color_5 );
}

.lh-pu .lh-pe-e--report .lh-pe-ico
{
    background: rgba( 91, 116, 128, .16 );
    color: var( --awb-custom_color_1 );
}

.lh-pu-score.is-low
{
    background: var( --awb-custom_color_6 );
}

.lh-pu-quiet
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 12px;
    padding: 14px 18px;
    border: 1px dashed var( --lh-fam-line );
    border-radius: 12px;
    background: var( --awb-color1 );
}

.lh-pu-quiet b
{
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
}

.lh-pu-quiet > span
{
    font-size: 13px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

@media ( max-width: 640px )
{
    .lh-pu-seg
    {
        display: flex;
        width: 100%;
    }

    .lh-pu-seg a
    {
        flex: 1 1 0;
        justify-content: center;
    }

    .lh-pu-sel
    {
        width: 100%;
    }

    .lh-pu-sel select
    {
        width: 100%;
    }

    .lh-pu-chart
    {
        padding: 14px 12px 10px;
    }

    .lh-pu-bars,
    .lh-pu-x
    {
        gap: 3px;
    }

    .lh-pu-stack
    {
        margin: 0 10%;
    }

    .lh-pu-x span
    {
        font-size: 11px;
        line-height: 1.3;
    }

    .lh-pu-fold > summary
    {
        align-items: start;
    }

    .lh-pu-body
    {
        padding: 0 12px 14px;
    }

    .lh-pu-quiet
    {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 14px;
    }
}

/* Details comes last on every screen (Ben, 2026-11-08): a full-width card under the journey. Its rows stay one under
   another: they lay themselves out by the width of .lh-fam-facts (family.css), so columns of rows crush them. */
.lh-pe .lh-pe-details
{
    display: block;
    margin: 40px 0 0;
}

.lh-pe-details > summary
{
    display: grid;
    grid-template-columns: auto minmax( 0, 1fr ) auto;
    align-items: baseline;
    gap: 4px 14px;
    list-style: none;
    cursor: pointer;
}

.lh-pe-details > summary::-webkit-details-marker
{
    display: none;
}

.lh-pe-details > summary::after
{
    content: "+";
    grid-column: 3;
    grid-row: 1;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
}

.lh-pe-details[open] > summary::after
{
    content: "\2212";
}

.lh-pe-details > summary b
{
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
}

.lh-pe-details > summary span
{
    font-size: 14px;
    line-height: 1.4;
    color: var( --awb-custom_color_4 );
}

.lh-pe-details[open] > summary
{
    margin: 0 0 12px;
}

/* "See all 19 badges": the rest of the shelf, folded under the five newest. */
.lh-pe-more > summary
{
    margin: 12px 0 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.lh-pe-more[open] > summary
{
    margin-bottom: 14px;
}

/* --- the journey --- */

.lh-pe-jgrid
{
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: 16px;
}

.lh-pe-wide
{
    grid-column: 1 / -1;
}

.lh-pe-book
{
    display: grid;
    grid-template-columns: 64px minmax( 0, 1fr );
    gap: 14px;
    align-items: center;
}

.lh-pe-book + .lh-pe-book
{
    margin-top: 8px;
}

.lh-pe-book b
{
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
}

/* The ring's percentage sits in the exact middle (Ben, 2026-10-25): the label fills the ring and centres
   its line both ways, with a line-height of 1 so no leading pushes the digits off centre. */
.lh-pe-ring
{
    --p: 0;
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient( var( --awb-color5 ) calc( var( --p ) * 1% ), rgba( 1, 47, 70, .08 ) 0 );
}

.lh-pe-ring::before
{
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var( --awb-color1 );
}

.lh-pe-ring-n
{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var( --awb-custom_color_1 );
}

/* Quiz scores: bars on a 0-100 scale, the dashed line where a score needs a look. */
.lh-pe-qchart
{
    display: grid;
    grid-template-columns: 40px minmax( 0, 1fr );
    grid-template-rows: 150px auto;
    column-gap: 8px;
    row-gap: 6px;
}

.lh-pe-qaxis
{
    position: relative;
}

.lh-pe-qaxis span
{
    position: absolute;
    right: 0;
    font-size: 12px;
    line-height: 1;
    transform: translateY( 50% );
    color: var( --awb-custom_color_4 );
}

.lh-pe-qplot
{
    position: relative;
    display: grid;
    grid-template-columns: repeat( var( --n ), minmax( 0, 1fr ) );
    gap: 6px;
    align-items: end;
    background: linear-gradient( var( --lh-fam-line ), var( --lh-fam-line ) ) top / 100% 1px no-repeat,
        linear-gradient( var( --lh-fam-line ), var( --lh-fam-line ) ) bottom / 100% 1px no-repeat;
}

.lh-pe-qcol
{
    position: relative;
    height: 100%;
}

.lh-pe-qcol i
{
    position: absolute;
    right: 15%;
    bottom: 0;
    left: 15%;
    border-radius: 5px 5px 0 0;
    background: var( --awb-color5 );
}

.lh-pe-qcol i.is-low
{
    background: var( --awb-color4 );
}

.lh-pe-qline
{
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    height: 2px;
    background: repeating-linear-gradient( to right, var( --awb-color4 ) 0 6px, transparent 6px 10px );
    transform: translateY( 50% );
    pointer-events: none;
}

.lh-pe-qdays
{
    grid-column: 2;
    display: grid;
    white-space: nowrap;
    grid-template-columns: repeat( var( --n ), minmax( 0, 1fr ) );
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: var( --awb-custom_color_4 );
}

.lh-pe-foot
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var( --awb-custom_color_4 );
}

.lh-pe-foot b
{
    font-weight: 500;
    color: var( --awb-custom_color_1 );
}

/* Level: the five ranks, the current one navy. */
.lh-pe-ladder
{
    display: grid;
    grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lh-pe-ladder li
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 10px;
    background: var( --awb-color1 );
    font-size: 13px;
    line-height: 1.35;
    color: var( --awb-custom_color_4 );
}

.lh-pe-ladder li b
{
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    text-wrap: balance;
    color: var( --awb-custom_color_1 );
}

.lh-pe-ladder li.is-done
{
    background: var( --awb-custom_color_10 );
}

.lh-pe-ladder li.is-cur
{
    border-color: var( --awb-custom_color_1 );
    background: var( --awb-custom_color_1 );
    color: var( --awb-color5 );
}

.lh-pe-ladder li.is-cur b
{
    color: var( --awb-color1 );
}

.lh-pe-ladder-foot
{
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
}

.lh-pe-ladder-foot b
{
    font-weight: 500;
}

.lh-pe-bar
{
    height: 8px;
    border-radius: 999px;
    background: rgba( 1, 47, 70, .08 );
    overflow: hidden;
}

.lh-pe-bar i
{
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var( --awb-color5 );
}

.lh-pe-week .lh-pe-bar
{
    height: 10px;
    background: rgba( 255, 255, 255, .16 );
}

/* Badges: won ones first, in the order won, with the date; the rest faded. */
.lh-pe-shelf
{
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 88px, 1fr ) );
    gap: 14px 10px;
}

.lh-pe-badge
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
}

.lh-pe-badge img
{
    width: 64px;
    height: 64px;
    margin: 0 0 4px;
    border-radius: 50%;
    object-fit: cover;
}

.lh-pe-badge small
{
    font-size: 11px;
    line-height: 1.3;
    color: var( --awb-custom_color_4 );
}

.lh-pe-badge.is-locked
{
    color: var( --awb-custom_color_4 );
}

.lh-pe-badge.is-locked img
{
    filter: grayscale( 1 );
    opacity: .3;
}

@media only screen and (max-width: 800px)
{
    .lh-pe-stats
    {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    }

    .lh-pe-soon .lh-pe-todo,
    .lh-pe-quotes,
    .lh-pe-jgrid
    {
        grid-template-columns: minmax( 0, 1fr );
    }
}

@media only screen and (max-width: 640px)
{
    .lh-pe-family
    {
        --lh-av-size: 40px;
    }

    .lh-pe .lh-pe-open
    {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .lh-pe .lh-pe-hw
    {
        display: flex;
        justify-content: center;
    }

    .lh-pe .lh-pe-name
    {
        font-size: 28px;
        line-height: 1.2;
    }

    .lh-pe-card
    {
        padding: 16px;
    }

    .lh-pe-stat b
    {
        font-size: 22px;
        line-height: 1.2;
    }

    .lh-pe-details > summary
    {
        grid-template-columns: minmax( 0, 1fr ) auto;
    }

    .lh-pe-details > summary span
    {
        grid-column: 1;
    }

    .lh-pe-wk summary
    {
        grid-template-columns: minmax( 0, 1fr ) auto auto;
        padding: 12px 14px;
    }

    .lh-pe-wk-c
    {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
    }

    .lh-pe-wk summary .lh-pe-chip
    {
        grid-column: 2;
    }

    .lh-pe-wk summary::after
    {
        grid-column: 3;
        grid-row: 1;
    }

    .lh-pe-ev
    {
        padding: 0 10px 12px;
    }

    .lh-pe-e
    {
        grid-template-columns: 32px minmax( 0, 1fr );
        gap: 2px 10px;
    }

    .lh-pe-e .lh-pe-ico
    {
        grid-row: 1 / span 2;
        width: 32px;
        height: 32px;
    }

    .lh-pe-e-r
    {
        grid-column: 2;
    }

    .lh-pe-jgrid
    {
        grid-template-columns: minmax( 0, 1fr );
    }

    /* Twelve dates do not fit under twelve bars on a phone: the first, every third and the last. */
    .lh-pe-qdays span:not( :first-child ):not( :last-child ):not( :nth-child( 3n + 1 ) )
    {
        visibility: hidden;
    }

    .lh-pe-ladder
    {
        grid-template-columns: minmax( 0, 1fr );
    }

    .lh-pe-ladder li
    {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
    }
}