/* Fluent 2 page styles — lessons module. Uses only tokens from fluent-tokens.css (no hex, no raw px for
   spacing/type). Loaded after styles.css. Owned by the lessons pages; keep selectors scoped to them. */

/* Pages: #lessons (admin sessions), #admin-book, #my-lessons (teacher), #my-bookings (parent),
   #request-lesson (teacher booking / parent request) + the notes, reschedule and busy-slot dialogs.
   Every class here starts with `les-` so nothing leaks into other modules. */

/* ===================== Page title: subtitle under the title ===================== */
.les-head{display:flex;flex-direction:column;gap:var(--spacingVerticalXS);min-width:0}
.les-subtitle{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground3)}
.les-msgbar{margin-bottom:var(--spacingVerticalM)}

/* ===================== Booking form (one white card) ===================== */
.les-form .form-group{margin-bottom:var(--spacingVerticalL)}
.les-form .form-group > label,.les-dlg .form-group > label{margin-bottom:var(--spacingVerticalXS)}

/* A row of short fields side by side; each group is as wide as what it holds. */
.les-row{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:var(--spacingHorizontalM)}
.les-row > .form-group{flex:0 1 var(--field-w-m);min-width:0}
.les-row > .les-w-xs{flex-basis:var(--field-w-xs)}
.les-row > .les-w-s{flex-basis:var(--field-w-s)}
.les-row > .les-w-m{flex-basis:var(--field-w-m)}
.les-row > .form-group .form-control{max-width:none}

/* Student picker: a search field + the dropdown on one line. */
.les-pick{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS)}
.les-pick > .les-search{flex:0 1 var(--field-w-s);min-width:0}
.les-pick > select.form-control{flex:0 1 var(--field-w-m);min-width:0;max-width:none}

/* Search field with a leading magnifier (form fields and the canvas search above the tables). */
.les-search{position:relative}
.les-search > .les-search-ic{position:absolute;top:50%;inset-inline-start:var(--spacingHorizontalMNudge);transform:translateY(-50%);font-size:var(--fontSizeBase300);line-height:1;color:var(--colorNeutralForeground3);pointer-events:none;z-index:1}
.les-search > input{padding-inline-start:var(--spacingHorizontalXXXL)}
.les-search > input.form-control{max-width:none}
.search-box.les-search{flex-direction:row}
.search-box.les-search > input{max-width:var(--field-w-l)}
.pg-tools > .les-search{flex:1 1 var(--field-w-m);max-width:var(--field-w-l)}
.pg-tools > .les-search > input{width:100%}

/* Small link-style actions under a field (busy times of the chosen teacher). */
.les-links{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalXS);margin-top:var(--spacingVerticalXS)}
.btn.les-linkbtn{background:transparent;border-color:transparent;color:var(--colorBrandForegroundLink);font-weight:var(--fontWeightRegular);padding-inline:var(--spacingHorizontalXS)}
.btn.les-linkbtn:hover{background:var(--colorSubtleBackgroundHover);border-color:transparent;color:var(--colorBrandForegroundLinkHover)}
.btn.les-linkbtn:active{background:var(--colorSubtleBackgroundPressed)}

/* Booking-mode selector: Fluent segmented toggle group, selected segment in brand colour. */
.les-mode{display:inline-flex;flex-wrap:nowrap;max-width:100%}
.les-mode-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacingHorizontalSNudge);min-height:var(--controlHeightMedium);margin:0;padding:var(--spacingVerticalXS) var(--spacingHorizontalL);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:0;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold);white-space:nowrap;cursor:pointer;transition:background-color var(--durationFaster) var(--curveEasyEase),border-color var(--durationFaster) var(--curveEasyEase),color var(--durationFaster) var(--curveEasyEase)}
.les-mode-btn + .les-mode-btn{margin-inline-start:calc(-1 * var(--strokeWidthThin))}
.les-mode-btn:first-child{border-start-start-radius:var(--borderRadiusMedium);border-end-start-radius:var(--borderRadiusMedium)}
.les-mode-btn:last-child{border-start-end-radius:var(--borderRadiusMedium);border-end-end-radius:var(--borderRadiusMedium)}
.les-mode-btn i{color:var(--colorNeutralForeground2)}
.les-mode-btn:hover{background:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);position:relative}
.les-mode-btn:active{background:var(--colorNeutralBackground1Pressed)}
.les-mode-btn.active{background:var(--colorBrandBackground);border-color:var(--colorBrandBackground);color:var(--colorNeutralForegroundOnBrand);position:relative;z-index:1}
.les-mode-btn.active i{color:var(--colorNeutralForegroundOnBrand)}
.les-mode-btn.active:hover{background:var(--colorBrandBackgroundHover);border-color:var(--colorBrandBackgroundHover)}
.les-mode-btn:focus-visible{position:relative;z-index:2}

/* Group / recurring panels: subtle grey sections inside the card (no border, no card-in-card). */
.les-panel{background:var(--surface-2);border-radius:var(--borderRadiusLarge);padding:var(--spacingVerticalL) var(--spacingHorizontalL);margin-bottom:var(--spacingVerticalL)}
.les-panel-head{display:flex;align-items:flex-start;gap:var(--spacingHorizontalS);margin-bottom:var(--spacingVerticalM)}
.les-panel-head > i{flex-shrink:0;font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase300);color:var(--colorBrandForeground1)}
.les-panel-title{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
.les-panel-desc{margin-top:var(--spacingVerticalXXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.les-panel .les-row > .form-group:last-child,.les-panel > .form-group:last-child{margin-bottom:0}
.les-panel .les-row{margin-bottom:0}
.les-panel .les-row > .form-group{margin-bottom:0}
.les-panel .les-search{max-width:var(--field-w-m)}

/* Group session: selectable student chips (clickable, so they keep a hairline border). */
.les-glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--spacingVerticalXS) var(--spacingHorizontalS);max-height:236px;overflow-y:auto;margin-top:var(--spacingVerticalS);padding:var(--spacingVerticalXXS)}
.les-form .les-gstudent{display:flex;align-items:center;gap:var(--spacingHorizontalS);min-height:var(--controlHeightMedium);margin:0;padding:var(--spacingVerticalXS) var(--spacingHorizontalS);background:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);cursor:pointer;transition:background-color var(--durationFaster) var(--curveEasyEase),border-color var(--durationFaster) var(--curveEasyEase)}
.les-form .les-gstudent:hover{border-color:var(--colorNeutralStroke1Hover)}
.les-form .les-gstudent:has(input:checked){background:var(--colorBrandBackground2);border-color:var(--colorBrandStroke1)}
.les-form .les-gstudent input{flex-shrink:0;margin:0}
.les-gname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.les-ggrade{flex-shrink:0;margin-inline-start:auto;font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3)}
.les-gempty{font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground3)}
.les-pct{margin-top:var(--spacingVerticalL)}
.les-form .les-panel .les-pct{margin-bottom:0}
.les-hint{margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.les-gnote{margin-top:var(--spacingVerticalM);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase400);color:var(--colorNeutralForeground2)}
.les-gnote i{color:var(--colorBrandForeground1);margin-inline-end:var(--spacingHorizontalXS)}

/* Recurring booking: weekday toggle chips. */
.les-days{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS)}
.les-form .les-day{display:inline-flex;align-items:center;gap:var(--spacingHorizontalSNudge);min-height:var(--controlHeightMedium);margin:0;padding:var(--spacingVerticalXS) var(--spacingHorizontalM);background:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);cursor:pointer;transition:background-color var(--durationFaster) var(--curveEasyEase),border-color var(--durationFaster) var(--curveEasyEase)}
.les-form .les-day:hover{border-color:var(--colorNeutralStroke1Hover)}
.les-form .les-day:has(input:checked){background:var(--colorBrandBackground2);border-color:var(--colorBrandStroke1);color:var(--colorBrandForeground2);font-weight:var(--fontWeightSemibold)}
.les-form .les-day input{margin:0}

/* Available-slots disclosure: a link-style toggle with a chevron, chips below. */
.les-slots{margin:calc(-1 * var(--spacingVerticalXS)) 0 var(--spacingVerticalL)}
.les-slots > summary{display:inline-flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);margin-inline-start:calc(-1 * var(--spacingHorizontalXS));border-radius:var(--borderRadiusMedium);list-style:none;cursor:pointer;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold);color:var(--colorBrandForegroundLink)}
.les-slots > summary::-webkit-details-marker{display:none}
.les-slots > summary::marker{content:""}
.les-slots > summary:hover{color:var(--colorBrandForegroundLinkHover);background:var(--colorSubtleBackgroundHover)}
.les-chev{font-size:var(--fontSizeBase200);transition:transform var(--durationFast) var(--curveEasyEase)}
.les-slots[open] .les-chev{transform:rotate(-90deg)}
.les-slotbox.available-slots{flex-direction:row;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalS);padding:0}
.les-slotbox .slot-item{display:inline-flex;align-items:center;min-height:var(--controlHeightSmall);padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);font-weight:var(--fontWeightSemibold);font-variant-numeric:tabular-nums}
.les-slotbox .no-slots{display:inline-flex;align-items:center;gap:var(--spacingHorizontalS);font-size:var(--fontSizeBase300);color:var(--tint-danger-fg)}
/* Each free time is a button that picks it (#6); the picked one is filled. While a new list loads, the old one stays
   dimmed and can't be picked (#7). */
.les-slotbox .slot-item{border:0;cursor:pointer;font-family:inherit}
.les-slotbox .slot-item[aria-pressed="true"]{background:var(--colorBrandBackground);color:var(--colorNeutralForegroundOnBrand)}
.les-slotbox .slot-item:disabled{cursor:default}
.les-slotbox.is-loading{opacity:.45;transition:opacity var(--durationNormal)}
@media (pointer:coarse){.les-slotbox .slot-item{min-height:var(--touchTarget);padding-inline:var(--spacingHorizontalM)}}
@media (forced-colors:active){.les-slotbox .slot-item[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}}
.les-muted{font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground3)}

/* Teacher booking: the selected student's balance, as wide as its text. */
.les-balance{margin:calc(-1 * var(--spacingVerticalS)) 0 var(--spacingVerticalL);font-size:var(--fontSizeBase300)}
.les-balance:empty{display:none}
/* Group mode hides the single-student row (inline display:none from onGroupToggle); its balance goes with it. */
#tlsStudentRow[style*="none"] + .les-balance{display:none}
.les-balance > div{width:fit-content;max-width:100%}

/* Parent request: the session price as a small summary figure. */
.les-price{display:flex;align-items:center;gap:var(--spacingHorizontalS);width:fit-content;max-width:100%;margin-bottom:var(--spacingVerticalL);padding:var(--spacingVerticalS) var(--spacingHorizontalM);background:var(--surface-2);border-radius:var(--borderRadiusLarge);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground2)}
.les-price-ic{color:var(--colorBrandForeground1)}
.les-price-val{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums}
.les-price-empty{color:var(--colorNeutralForeground3)}

/* Form footer: primary action at the end of the form, not full width on desktop. */
.les-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalXS)}
.les-foot .btn-primary{min-width:120px}

/* ===================== Session lists (tabs + search on the canvas, table in a card) ===================== */
.les-table th{padding-inline:var(--spacingHorizontalS)}
.les-table td{padding-inline:var(--spacingHorizontalS);vertical-align:middle}
.les-table th:first-child,.les-table td:first-child{padding-inline-start:var(--spacingHorizontalM)}
.les-table th:last-child,.les-table td:last-child{padding-inline-end:var(--spacingHorizontalM)}
.les-table .badge-status{white-space:nowrap}
.les-nowrap{white-space:nowrap}
.les-strong{font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
.les-dash{color:var(--colorNeutralForeground4)}
.les-table tr.sess-empty:hover{background:transparent}
.les-table tr.sess-empty td{border-bottom:0;height:auto}

/* Money / processing flags (fill-only tint badges). */
.les-flags{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacingVerticalXS)}
.les-flag{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS);min-height:20px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);border-radius:var(--borderRadiusCircular);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);font-weight:var(--fontWeightSemibold);white-space:nowrap}
.les-flag.ok{background:var(--tint-success-bg);color:var(--tint-success-fg)}
.les-flag.wait{background:var(--tint-neutral-bg);color:var(--tint-neutral-fg)}
.les-tag-group{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS);margin-inline-start:var(--spacingHorizontalXS);padding:0 var(--spacingHorizontalS);border-radius:var(--borderRadiusCircular);background:var(--tint-purple-bg);color:var(--tint-purple-fg);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);font-weight:var(--fontWeightSemibold);white-space:nowrap}

/* Row actions: compact Fluent icon buttons (subtle), tinted only for approve / reject. */
.les-acts{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXS)}
.les-acts .btn{min-height:var(--controlHeightMedium);white-space:nowrap}
.btn.les-ib{position:relative;width:var(--controlHeightMedium);min-width:var(--controlHeightMedium);padding:0;background:transparent;border-color:transparent;color:var(--colorNeutralForeground2);font-size:var(--fontSizeBase300)}
.btn.les-ib:hover{background:var(--colorSubtleBackgroundHover);border-color:transparent;color:var(--colorNeutralForeground2Hover)}
.btn.les-ib:active{background:var(--colorSubtleBackgroundPressed)}
.btn.les-ib.ok,.btn.les-att.ok{background:var(--tint-success-bg);color:var(--tint-success-fg)}
.btn.les-ib.no,.btn.les-att.no{background:var(--tint-danger-bg);color:var(--tint-danger-fg)}
.btn.les-ib.ok:hover,.btn.les-att.ok:hover{background:var(--colorStatusSuccessBackground2);color:var(--tint-success-fg);border-color:transparent}
.btn.les-ib.no:hover,.btn.les-att.no:hover{background:var(--colorStatusDangerBackground2);color:var(--tint-danger-fg);border-color:transparent}
.btn.les-ib.del:hover{background:var(--tint-danger-bg);color:var(--tint-danger-fg)}
.btn.les-att{border-color:transparent;padding-inline:var(--spacingHorizontalS)}
.les-ib-dot{position:absolute;top:var(--spacingVerticalXS);inset-inline-end:var(--spacingHorizontalXS);width:6px;height:6px;border-radius:var(--borderRadiusCircular);background:var(--colorBrandForeground1)}
.les-acts .badge-status{white-space:nowrap}

/* Empty / loading state. */
.les-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalS);padding:var(--spacingVerticalXXXL) var(--spacingHorizontalL);text-align:center;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3)}
.les-empty > i{font-size:var(--fontSizeHero800);line-height:var(--lineHeightHero800);color:var(--colorNeutralForeground4)}
.page > .card > .les-empty{background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4)}

/* ===================== Dialogs (notes, reschedule, busy slots) ===================== */
.les-dlg .form-group{margin-bottom:var(--spacingVerticalL)}
.les-dlg .les-row > .form-group{margin-bottom:var(--spacingVerticalL)}
.les-dlg-info{display:flex;align-items:center;gap:var(--spacingHorizontalS);margin-bottom:var(--spacingVerticalL);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3)}
.les-dlg-info strong{color:var(--colorNeutralForeground1);font-weight:var(--fontWeightSemibold)}
.les-dlg-actions{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalXS)}
.les-dlg textarea.form-control{max-width:none}
.les-dlg .les-table td{height:auto}

/* ===================== Phones: each table row becomes a stacked list item =====================
   Tables with .les-stack carry data-label on every cell; below 640px the header row hides, the
   first cell (the student) becomes the item title and every other cell a "label … value" line.
   Rows still use display:'' / 'none' from applySessionView, so search and paging keep working. */
@media (max-width:640px){
    .les-stack,.les-stack tbody{display:block;width:100%}
    .les-stack thead{display:none}
    .les-stack tr{display:block;padding:var(--spacingVerticalM) var(--spacingHorizontalS);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
    .les-stack tr:last-child{border-bottom:0}
    .les-stack tr:hover{background:transparent}
    .les-stack td{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM);min-height:28px;height:auto;padding:var(--spacingVerticalXXS) 0;border:0;font-size:var(--fontSizeBase300);text-align:end}
    .les-stack td[data-label]::before{content:attr(data-label);flex-shrink:0;font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3);text-align:start}
    .les-stack td:first-child,.les-stack td:last-child{padding-inline:0}
    .les-stack td:first-child{display:block;padding-bottom:var(--spacingVerticalS);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400);text-align:start}
    .les-stack td:first-child::before{content:none}
    .les-stack td.les-td-acts{display:block;padding-top:var(--spacingVerticalS)}
    .les-stack td.les-td-acts::before{content:none}
    .les-stack .les-acts{flex-wrap:wrap;gap:var(--spacingHorizontalS)}
    /* no hover tooltips on touch: icon buttons show their name as a visible label */
    .les-stack .btn.les-ib{width:auto;padding-inline:var(--spacingHorizontalS);gap:var(--spacingHorizontalSNudge);border-color:var(--colorNeutralStroke1)}
    .les-stack .btn.les-ib.ok,.les-stack .btn.les-ib.no{border-color:transparent}
    .les-stack .btn.les-ib::after{content:attr(aria-label);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);font-weight:var(--fontWeightSemibold)}
    .les-stack .les-ib-dot{position:static;order:-1}
    /* session TabList: text only; the shared phone rule (styles.css) fits the three tabs in equal columns */
    .les-tabs .session-tab::after{inset-inline:var(--spacingHorizontalXS)}
    .les-tabs .session-tab > i{display:none}
    .les-stack .parent-balance-cell{min-width:0}
    .les-stack .les-flags{align-items:flex-end}
    .les-stack tr.sess-empty{padding:0;border:0}
    .les-stack tr.sess-empty td{display:block}
    .page .session-panel > .table-container,.page .les-section .table-container{padding-inline:var(--spacingHorizontalXS)}
}

/* ===================== Responsive ===================== */
@media (max-width:768px){
    .les-row > .form-group{flex:1 1 calc(50% - var(--spacingHorizontalM))}
    .card-header > .les-links{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacingHorizontalS);margin-top:0}
    .les-pick > .les-search,.les-pick > select.form-control{flex:1 1 100%}
}
@media (max-width:480px){
    .les-row > .form-group{flex-basis:100%}
    /* short pairs (time + duration, from + to) stay side by side on phones */
    .les-row > .les-w-xs,.les-row > .les-pair{flex-basis:calc(50% - var(--spacingHorizontalM))}
    .les-panel{padding:var(--spacingVerticalM) var(--spacingHorizontalM)}
    .les-glist{grid-template-columns:1fr}
    .les-mode{display:flex;width:100%}
    .les-mode-btn{flex:1 1 0;min-width:0;flex-direction:column;gap:var(--spacingVerticalXXS);padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);white-space:normal;text-align:center;font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200)}
    .les-foot .btn{flex:1 1 100%}
    .les-dlg-actions .btn{flex:1 1 auto}
    .les-slotbox.available-slots{flex-direction:row}
}
@media (pointer:coarse){
    .les-mode-btn{min-height:var(--controlHeightLarge)}
    .les-form .les-day,.les-form .les-gstudent{min-height:var(--controlHeightLarge)}
}
@media (forced-colors:active){
    .les-mode-btn.active{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
    .les-form .les-day:has(input:checked),.les-form .les-gstudent:has(input:checked){outline:2px solid Highlight}
}
/* Rule note under a lesson-list page title (12-hour reschedule rule). */
.les-page-note{margin:0 0 var(--spacingVerticalM)}

/* Touch screens: the booking-mode buttons get a full tap area (UX_PLAN 5). */
@media (pointer:coarse){.les-mode-btn{min-height:var(--touchTarget)}}

/* A confirmed lesson with no online meeting link yet says so (app.js#noMeetLinkNote). */
.les-nolink{display:inline-flex;align-items:flex-start;gap:var(--spacingHorizontalXS);max-width:var(--field-w-m);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--tint-warning-fg)}
.les-nolink i{margin-top:var(--spacingVerticalXXS)}