/* ------------------------------------------------------------------
   Teacher Dashboard — homework review queue  [lh_teacher_homework]

   Loaded only on pages containing an lh_teacher_* shortcode.
   Colours are Avada globals throughout — no private hex values — so a
   palette change in Global Options carries through here untouched.
   ------------------------------------------------------------------ */

.lh-td
{
    --lh-td-line: rgba( 1, 47, 70, .12 );
    --lh-td-soft: rgba( 1, 47, 70, .04 );
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* --- filter bar ------------------------------------------------- */

.lh-td-bar
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var( --lh-td-line );
}

.lh-td-tabs
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lh-td-tab
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 50px;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;
    color: var( --awb-custom_color_12 );
    background: transparent;
    transition: background .18s ease, color .18s ease;
}

.lh-td-tab:hover
{
    color: var( --awb-custom_color_1 );
    background: var( --lh-td-soft );
}

.lh-td-tab.is-on
{
    color: var( --awb-color1 );
    background: var( --awb-custom_color_1 );
}

.lh-td-pill
{
    min-width: 22px;
    padding: 3px 7px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var( --awb-custom_color_1 );
    background: var( --awb-color4 );
}

.lh-td-tab.is-on .lh-td-pill
{
    color: var( --awb-custom_color_1 );
    background: var( --awb-color5 );
}

.lh-td-classes
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lh-td-chip
{
    padding: 7px 14px;
    border: 1px solid var( --lh-td-line );
    border-radius: 50px;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    color: var( --awb-custom_color_12 );
    transition: border-color .18s ease, color .18s ease;
}

.lh-td-chip:hover,
.lh-td-chip.is-on
{
    color: var( --awb-custom_color_1 );
    border-color: var( --awb-color5 );
}

/* --- the queue -------------------------------------------------- */

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

.lh-td-item
{
    display: grid;
    grid-template-columns: 104px minmax( 0, 1fr ) minmax( 0, 320px );
    gap: 22px;
    align-items: start;
    margin: 0;
    padding: 20px;
    border: 1px solid var( --lh-td-line );
    border-radius: 14px;
    background: var( --awb-color1 );
}

.lh-td-item.is-marked
{
    background: var( --lh-td-soft );
    border-color: transparent;
}

/* file preview */

.lh-td-file
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 10px;
    background: var( --lh-td-soft );
    text-decoration: none;
}

.lh-td-file--img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lh-td-ext
{
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var( --awb-custom_color_12 );
}

/* text side */

.lh-td-who
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 4px;
}

.lh-td-name
{
    font-size: 15px;
    font-weight: 600;
    color: var( --awb-custom_color_1 );
}

.lh-td-cls
{
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var( --awb-custom_color_12 );
}

.lh-td-lesson
{
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.3;
    color: var( --awb-custom_color_1 );
}

.lh-td-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-td-ok
{
    font-weight: 600;
    color: var( --awb-color5 );
}

.lh-td-notes
{
    margin-top: 12px;
    padding-left: 14px;
    border-left: 3px solid var( --awb-color5 );
}

.lh-td-note
{
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.55;
    color: var( --awb-custom_color_1 );
}

.lh-td-note:last-child
{
    margin-bottom: 0;
}

/* --- the review form -------------------------------------------- */

.lh-td-form
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lh-td-lbl
{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var( --awb-custom_color_12 );
}

.lh-td-ta
{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var( --lh-td-line );
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    background: var( --awb-color1 );
    color: var( --awb-custom_color_1 );
}

.lh-td-ta:focus
{
    outline: 2px solid var( --awb-color5 );
    outline-offset: 1px;
    border-color: transparent;
}

.lh-td-row
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.lh-td-pts
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var( --awb-custom_color_12 );
}

.lh-td-pts input
{
    width: 68px;
    padding: 9px 10px;
    border: 1px solid var( --lh-td-line );
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    text-align: center;
    color: var( --awb-custom_color_1 );
}

.lh-td-pts em
{
    font-style: normal;
}

.lh-td-btn
{
    flex: 1;
    padding: 12px 22px;
    border: 0;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .17px;
    text-transform: capitalize;
    cursor: pointer;
    color: var( --awb-color1 );
    background: var( --awb-custom_color_1 );
    transition: background .18s ease;
}

.lh-td-btn:hover
{
    background: var( --awb-color5 );
    color: var( --awb-custom_color_1 );
}

/* --- empty state ------------------------------------------------ */

.lh-td-empty
{
    padding: 54px 30px;
    text-align: center;
    border: 1px dashed var( --lh-td-line );
    border-radius: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-td-empty-t
{
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: var( --awb-custom_color_1 );
}

.lh-td-empty p:last-child
{
    margin-bottom: 0;
}

/* --- narrow screens --------------------------------------------- */

@media ( max-width: 900px )
{
    .lh-td-item
    {
        grid-template-columns: 76px minmax( 0, 1fr );
    }

    .lh-td-file
    {
        width: 76px;
        height: 76px;
    }

    .lh-td-form
    {
        grid-column: 1 / -1;
        padding-top: 4px;
    }
}

@media ( max-width: 640px )
{
    .lh-td-bar
    {
        flex-direction: column;
        align-items: flex-start;
    }

    .lh-td-item
    {
        padding: 16px;
        gap: 16px;
    }

    .lh-td-lesson
    {
        font-size: 17px;
    }
}

/* ------------------------------------------------------------------
   Dashboard home — greeting, stat tiles, class cards
   ------------------------------------------------------------------ */

.lh-td-greet
{
    margin-bottom: 30px;
}

.lh-td-hello
{
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var( --awb-custom_color_1 );
}

.lh-td-sub
{
    margin: 0;
    font-size: 16px;
    color: var( --awb-custom_color_12 );
}

.lh-td-sub b
{
    color: var( --awb-custom_color_1 );
}

/* stat tiles */

.lh-td-stats
{
    display: grid;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    gap: 16px;
    margin-bottom: 40px;
}

.lh-td-stat
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px 26px;
    border: 1px solid rgba( 1, 47, 70, .12 );
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

a.lh-td-stat:hover
{
    border-color: var( --awb-color5 );
    transform: translateY( -2px );
}

.lh-td-stat.is-accent
{
    border-color: transparent;
    background: var( --awb-custom_color_1 );
}

.lh-td-stat-n
{
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    color: var( --awb-custom_color_1 );
}

.lh-td-stat.is-accent .lh-td-stat-n
{
    color: var( --awb-color4 );
}

.lh-td-stat-l
{
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-td-stat.is-accent .lh-td-stat-l
{
    color: var( --awb-color1 );
}

/* class cards */

.lh-td-classcards
{
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
    gap: 16px;
}

.lh-td-cc
{
    padding: 22px 24px;
    border: 1px solid rgba( 1, 47, 70, .12 );
    border-radius: 14px;
}

.lh-td-cc-name
{
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.3;
    color: var( --awb-custom_color_1 );
}

.lh-td-cc-meta
{
    margin: 0 0 12px;
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-td-cc-link
{
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var( --awb-custom_color_1 );
    border-bottom: 2px solid var( --awb-color4 );
}

.lh-td-cc-link:hover
{
    border-bottom-color: var( --awb-color5 );
}

.lh-td-cc-clear
{
    font-size: 14px;
    color: var( --awb-color5 );
}

/* see-all */

.lh-td-more
{
    margin: 18px 0 0;
}

.lh-td-more a
{
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var( --awb-custom_color_1 );
    border-bottom: 2px solid var( --awb-color4 );
}

.lh-td-more a:hover
{
    border-bottom-color: var( --awb-color5 );
}

@media ( max-width: 780px )
{
    .lh-td-stats
    {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .lh-td-stat
    {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
        padding: 18px 20px;
    }

    .lh-td-stat-n
    {
        font-size: 28px;
    }
}

/* ------------------------------------------------------------------
   Classes and rosters  [lh_teacher_roster]
   ------------------------------------------------------------------ */

.lh-td-unplaced
{
    margin-bottom: 30px;
    padding: 20px 24px;
    border: 1px solid var( --awb-color4 );
    border-left: 4px solid var( --awb-color4 );
    border-radius: 12px;
}

.lh-td-unplaced-t
{
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var( --awb-custom_color_1 );
}

.lh-td-unplaced ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.lh-td-unplaced li
{
    padding: 7px 0;
    border-bottom: 1px solid rgba( 1, 47, 70, .08 );
    font-size: 14px;
}

.lh-td-unplaced li:last-child
{
    border-bottom: 0;
}

.lh-td-why
{
    display: block;
    font-size: 13px;
    color: var( --awb-custom_color_12 );
}

.lh-td-unplaced-n
{
    margin: 12px 0 0;
    font-size: 13px;
    color: var( --awb-custom_color_12 );
}

.lh-td-class
{
    margin-bottom: 34px;
    padding: 24px 26px;
    border: 1px solid rgba( 1, 47, 70, .12 );
    border-radius: 14px;
}

.lh-td-class-head
{
    margin-bottom: 18px;
}

.lh-td-class-name
{
    margin: 0 0 6px;
    font-size: 21px;
    line-height: 1.25;
    color: var( --awb-custom_color_1 );
}

.lh-td-class-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-td-warn
{
    color: var( --awb-color4 );
    font-weight: 500;
}

.lh-td-class-next
{
    margin: 10px 0 0;
    font-size: 14px;
    color: var( --awb-custom_color_1 );
}

.lh-td-zoom
{
    font-weight: 500;
    text-decoration: none;
    color: var( --awb-custom_color_1 );
    border-bottom: 2px solid var( --awb-color5 );
}

.lh-td-noone
{
    margin: 0;
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-td-tablewrap
{
    overflow-x: auto;
}

.lh-td-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.lh-td-table th
{
    padding: 0 14px 10px 0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var( --awb-custom_color_12 );
    border-bottom: 1px solid rgba( 1, 47, 70, .12 );
    white-space: nowrap;
}

.lh-td-table td
{
    padding: 12px 14px 12px 0;
    border-bottom: 1px solid rgba( 1, 47, 70, .07 );
    color: var( --awb-custom_color_12 );
    font-variant-numeric: tabular-nums;
}

.lh-td-table tr:last-child td
{
    border-bottom: 0;
}

.lh-td-sname
{
    font-weight: 600;
    color: var( --awb-custom_color_1 );
}

.lh-td-waiting
{
    color: var( --awb-custom_color_1 );
    background: var( --awb-color4 );
    padding: 2px 9px;
    border-radius: 50px;
}

@media ( max-width: 640px )
{
    .lh-td-class
    {
        padding: 18px 16px;
    }
}

/* ------------------------------------------------------------------
   Schedule — dense. Ben, 2026-08-29: "too big per class, need a more
   compact view", and the per-row Move/Cancel buttons "feel redundant".

   So a session is ONE LINE. Its controls live inside a <details>, one
   click away, no JavaScript. The pattern form collapses the same way
   and shows its days and times in the summary, so the common case —
   glancing at the term — costs no vertical space at all.
   ------------------------------------------------------------------ */

.lh-td-pat
{
    margin: 0 0 10px;
    border: 1px solid rgba( 1, 47, 70, .12 );
    border-radius: 12px;
    background: rgba( 1, 47, 70, .025 );
}

.lh-td-pat-sum
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}

.lh-td-pat-sum::-webkit-details-marker
{
    display: none;
}

.lh-td-pat-sum::after
{
    content: "Change";
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    color: var( --awb-custom_color_1 );
    border-bottom: 2px solid var( --awb-color4 );
}

.lh-td-pat[ open ] .lh-td-pat-sum::after
{
    content: "Close";
}

.lh-td-pat-name
{
    font-size: 16px;
    font-weight: 600;
    color: var( --awb-custom_color_1 );
}

.lh-td-pat-when
{
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-td-pat-n
{
    font-size: 13px;
    color: var( --awb-custom_color_12 );
}

.lh-td-pat-form
{
    padding: 4px 18px 18px;
    border-top: 1px solid rgba( 1, 47, 70, .08 );
}

.lh-td-pat-row
{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 0 14px;
}

.lh-td-f
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
}

.lh-td-f > span
{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var( --awb-custom_color_12 );
}

.lh-td-f--sm
{
    width: 120px;
}

.lh-td-f select,
.lh-td-f input
{
    padding: 8px 10px;
    border: 1px solid rgba( 1, 47, 70, .16 );
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var( --awb-custom_color_1 );
    background: var( --awb-color1 );
}

/* seven day rows, each with its own time */

.lh-td-daygrid
{
    display: grid;
    grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
    gap: 8px;
}

.lh-td-dayrow
{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lh-td-day
{
    position: relative;
}

.lh-td-day input
{
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.lh-td-day span
{
    display: block;
    padding: 7px 0;
    border: 1px solid rgba( 1, 47, 70, .16 );
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var( --awb-custom_color_12 );
    background: var( --awb-color1 );
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.lh-td-day input:checked + span
{
    color: var( --awb-color1 );
    background: var( --awb-custom_color_1 );
    border-color: var( --awb-custom_color_1 );
}

.lh-td-day input:focus-visible + span
{
    outline: 2px solid var( --awb-color5 );
    outline-offset: 2px;
}

.lh-td-dayrow input[ type="time" ]
{
    width: 100%;
    padding: 6px 4px;
    border: 1px solid rgba( 1, 47, 70, .12 );
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    text-align: center;
    color: var( --awb-custom_color_12 );
    background: var( --awb-color1 );
    opacity: .5;
}

.lh-td-dayrow.is-on input[ type="time" ]
{
    opacity: 1;
    color: var( --awb-custom_color_1 );
}

.lh-td-pat-go
{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 0;
}

.lh-td-pat-hint
{
    font-size: 12px;
    color: var( --awb-custom_color_12 );
}

/* --- the session list ---------------------------------------------
   One line per session, laid out on a grid so the columns line up and
   the full width is used. Ben, 2026-08-29: "lots of wasted space on the
   right", "looks kinda smushed", and dates should read "September 7".

   Grouped by MONTH rather than week: twelve week headings for a twelve
   week term cost more vertical space than they earn.
   ------------------------------------------------------------------ */

.lh-td-sched
{
    margin-top: 34px;
}

.lh-td-month
{
    margin: 38px 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba( 1, 47, 70, .14 );
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var( --awb-custom_color_1 );
}

.lh-td-sched > .lh-td-month:first-child
{
    margin-top: 0;
}

.lh-td-s
{
    border-bottom: 1px solid rgba( 1, 47, 70, .07 );
}

.lh-td-s-sum
{
    display: grid;
    grid-template-columns: minmax( 150px, 1.4fr ) minmax( 130px, 1fr ) minmax( 0, 2fr ) minmax( 0, auto ) 72px;
    align-items: center;
    gap: 20px;
    padding: 15px 6px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
}

.lh-td-s-sum::-webkit-details-marker
{
    display: none;
}

.lh-td-s-date
{
    font-weight: 600;
    color: var( --awb-custom_color_1 );
}

.lh-td-s-time
{
    color: var( --awb-custom_color_12 );
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lh-td-s-to
{
    opacity: .65;
}

.lh-td-s-class
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var( --awb-custom_color_12 );
}

.lh-td-s-act
{
    text-align: right;
    font-size: 13px;
    color: var( --awb-custom_color_12 );
    opacity: 0;
    transition: opacity .15s ease;
}

.lh-td-s:hover .lh-td-s-act,
.lh-td-s[ open ] .lh-td-s-act
{
    opacity: 1;
}

.lh-td-s[ open ] .lh-td-s-act::after
{
    content: " ▾";
}

/* today, and the three deviations */

.lh-td-s.is-today .lh-td-s-date::after
{
    content: "Today";
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var( --awb-custom_color_1 );
    background: var( --awb-color4 );
}

.lh-td-s-tag
{
    display: inline-block;
    padding: 3px 11px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var( --awb-custom_color_1 );
    background: var( --awb-color5 );
}

.lh-td-s--cancelled .lh-td-s-date,
.lh-td-s--cancelled .lh-td-s-time
{
    text-decoration: line-through;
    opacity: .5;
}

.lh-td-s--cancelled .lh-td-s-tag
{
    color: var( --awb-custom_color_12 );
    background: rgba( 1, 47, 70, .09 );
}

/* the expanded controls */

.lh-td-s-form
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 4px 6px 20px;
}

.lh-td-s-fl
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

/* Avada styles every input to 100% width, which stretched these clear across
   the page. Fixed widths, and the specificity to win. */
.lh-td-s-form input[ type="date" ]
{
    width: 165px;
}

.lh-td-s-form input[ type="time" ]
{
    width: 125px;
}

.lh-td-s-form input[ type="date" ],
.lh-td-s-form input[ type="time" ]
{
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid rgba( 1, 47, 70, .18 );
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var( --awb-custom_color_1 );
    background: var( --awb-color1 );
}

.lh-td-mini
{
    padding: 8px 17px;
    border: 0;
    border-radius: 50px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var( --awb-color1 );
    background: var( --awb-custom_color_1 );
    transition: background .18s ease, color .18s ease;
}

.lh-td-mini:hover
{
    background: var( --awb-color5 );
    color: var( --awb-custom_color_1 );
}

.lh-td-mini--off
{
    color: var( --awb-custom_color_12 );
    background: transparent;
    border: 1px solid rgba( 1, 47, 70, .18 );
}

.lh-td-mini--off:hover
{
    color: var( --awb-custom_color_1 );
    background: transparent;
    border-color: var( --awb-color4 );
}

@media ( max-width: 900px )
{
    .lh-td-s-sum
    {
        grid-template-columns: minmax( 0, 1fr ) auto;
        gap: 4px 14px;
    }

    .lh-td-s-class,
    .lh-td-s-state
    {
        grid-column: 1 / -1;
    }

    .lh-td-s-act
    {
        opacity: 1;
    }
}

@media ( max-width: 780px )
{
    .lh-td-daygrid
    {
        grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
    }
}

/* ------------------------------------------------------------------
   My Profile  [lh_teacher_profile]

   Same Avada globals as everything above — no private hex values.
   The form inputs are sized explicitly because Avada styles every
   input to width:100%, which is why the schedule fields ran the full
   width of the page until they were constrained (Ben, 2026-08-29).
   ------------------------------------------------------------------ */

.lh-tp
{
    --lh-tp-line: rgba( 1, 47, 70, .12 );
    --lh-tp-soft: rgba( 1, 47, 70, .04 );
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* The form is a flex column with the SAME gap as .lh-tp, so the action row is
   spaced from the section the same way every other block on the page is. Without
   this the button touched the card: .lh-tp's gap only reaches its direct children
   (notice, form, footer), and the button sits INSIDE the form. Ben, 2026-08-31. */
.lh-tp-form
{
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.lh-tp-sec
{
    padding: 26px 28px;
    border: 1px solid var( --lh-tp-line );
    border-radius: 10px;
}

.lh-tp-sec h4
{
    margin: 0 0 4px;
    font-size: 20px;
    color: var( --awb-custom_color_1 );
}

.lh-tp-hint
{
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var( --awb-custom_color_12 );
}

.lh-tp-foot
{
    margin: 0;
}

/* --- photo ------------------------------------------------------- */

.lh-tp-photo
{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var( --lh-tp-line );
}

.lh-tp-avatar
{
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: 50%;
    background: var( --lh-tp-soft );
}

.lh-tp-avatar img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lh-tp-noavatar
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 34px;
    font-weight: 500;
    text-transform: uppercase;
    color: var( --awb-custom_color_1 );
}

.lh-tp-photofield
{
    flex: 1 1 auto;
    min-width: 0;
}

.lh-tp-photofield .lh-tp-hint
{
    margin: 6px 0 0;
}

/* --- fields ------------------------------------------------------ */

.lh-tp-field
{
    margin: 0 0 18px;
}

.lh-tp-field:last-child
{
    margin-bottom: 0;
}

.lh-tp label,
.lh-tp legend
{
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var( --awb-custom_color_1 );
}

.lh-tp input[type="text"]
{
    width: 100%;
    max-width: 340px;
}

.lh-tp input[type="file"]
{
    width: auto;
    max-width: 100%;
    font-size: 14px;
}

.lh-tp textarea
{
    width: 100%;
}

/* --- checkbox sets ----------------------------------------------- */

.lh-tp-checks
{
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.lh-tp-checks legend
{
    padding: 0;
}

.lh-tp label.lh-tp-check
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    margin: 0 8px 8px 0;
    padding: 7px 14px 7px 11px;
    border: 1px solid var( --lh-tp-line );
    border-radius: 50px;
    font-weight: 400;
    cursor: pointer;
}

.lh-tp label.lh-tp-check:hover
{
    border-color: var( --awb-color5 );
}

.lh-tp label.lh-tp-check input
{
    margin: 0;
}

.lh-tp label.lh-tp-check span
{
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

/* --- notices ----------------------------------------------------- */

.lh-tp-note
{
    margin: 0;
    padding: 14px 18px;
    border-left: 3px solid var( --awb-color5 );
    border-radius: 4px;
    background: var( --lh-tp-soft );
    font-size: 14px;
    line-height: 1.55;
    color: var( --awb-custom_color_1 );
}

.lh-tp-note.is-warn
{
    border-left-color: var( --awb-color4 );
}

.lh-tp-sec .lh-tp-note
{
    margin-bottom: 0;
}

/* --- actions ----------------------------------------------------- */

.lh-tp-actions
{
    margin: 0;
}

.lh-tp-actions .lh-td-btn
{
    flex: 0 0 auto;
    min-width: 190px;
}

@media ( max-width: 640px )
{
    .lh-tp-sec
    {
        padding: 22px 20px;
    }

    .lh-tp-photo
    {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- next class strip  [lh_teacher_next_class] ------------------- */

.lh-td-next
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid var( --lh-td-line );
    border-left: 3px solid var( --awb-color4 );
    border-radius: 10px;
}

/* Today gets the accent. Colour carries ONE fact here - whether this is happening
   now-ish - so nothing else on the strip changes with it. */
.lh-td-next.is-today
{
    border-left-color: var( --awb-color5 );
    background: var( --lh-td-soft );
}

.lh-td-next-main
{
    flex: 1 1 auto;
    min-width: 0;
}

.lh-td-next-when
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 3px;
    font-size: 17px;
    font-weight: 500;
    color: var( --awb-custom_color_1 );
}

.lh-td-next-time
{
    font-size: 15px;
    font-weight: 400;
    color: var( --awb-custom_color_12 );
    font-variant-numeric: tabular-nums;
}

.lh-td-next-class
{
    margin: 0;
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-td-next-zoom
{
    flex: 0 0 auto;
}

.lh-td-next.is-empty
{
    border-left-color: var( --lh-td-line );
}

.lh-td-next.is-empty p
{
    margin: 0;
    font-size: 15px;
    color: var( --awb-custom_color_12 );
}

@media ( max-width: 560px )
{
    .lh-td-next
    {
        align-items: flex-start;
    }

    .lh-td-next-zoom
    {
        width: 100%;
        text-align: center;
    }
}