/* ============================================================================
   ELEMENTS COMPONENTS — Tokenized Component Styling (DROP-IN CLEAN)
   Notes:
   - No hardcoded colors. Tokens only.
   - Class names preserved to avoid breaking pages.
   - Dark/Light + Brand parity flows from tokens.
   ========================================================================== */

/* ---------------------------- */
/* SECTION HEADERS              */
/* ---------------------------- */

.section-header {
    font-size: var(--font-size-value-lg);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-header), sans-serif;
    color: var(--section-header-color, var(--color-primary));
    margin-bottom: var(--spacing-md);
}

.full-height { height: 100%; }

/* ---------------------------- */
/* APP CONTAINER / PAGE WRAPPER */
/* ---------------------------- */

.app-container {
    background: var(--color-bg);
    color: var(--color-text-body);
    min-height: 100vh;
}

/* ---------------------------- */
/* DIVIDER                      */
/* ---------------------------- */

.divider {
    height: 1px;
    background: var(--divider-color-default, var(--color-border-light));
    margin: var(--spacing-md) 0;
}

/* ---------------------------- */
/* IDENTITY (avatar + name)     */
/* ---------------------------- */

.identity-line{
    display: grid;
    grid-template-columns: auto 1fr auto; /* avatar | text | optional right */
    align-items: center;
    column-gap: var(--gap-sm);
    min-width: 0;
}
.identity-text{
    display: grid;
    row-gap: 2px;
    min-width: 0;
}
.identity-name{
    font-family: var(--font-family-header), sans-serif;
    font-size: var(--font-size-lg);
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
}
.identity-name:hover{ color: var(--color-primary-dark); }
.identity--card .identity-name{ font-size: var(--font-size-header); }
.identity--card{ padding-block: 2px; }

.identity-meta{
    display: inline-flex;
    align-items: baseline;
    gap: var(--gap-sm);
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: normal;
}
.identity-meta .meta-code{ font-weight: var(--font-weight-bold); letter-spacing: .01em; color: var(--color-label); }
.identity-meta .meta-label{ color: var(--color-text-muted); }
.identity-meta .meta-sep::before{
    content: "—";
    color: var(--color-text-muted);
    margin: 0 var(--spacing-xxs);
}
.identity-right{ margin-left: auto; }

.avatar-xs{
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; flex: 0 0 28px;
    box-shadow: inset 0 0 0 1px var(--color-border-light);
}

/* ---------------------------- */
/* DATETIME LINE                */
/* ---------------------------- */

.datetime-line{
    display: grid;
    grid-template-columns: auto 1fr auto; /* icon | text | right */
    align-items: center;
    column-gap: var(--gap-sm);
    min-width: 0;
}
.datetime--card{ padding-block: 2px; }
.datetime--card .datetime-name{ font-size: var(--font-size-header); }

.dt-icon{
    width: 28px; height: 28px;
    display: grid; place-items: center;
    font-size: 14px; line-height: 1;
    color: var(--color-primary);
}

.datetime-text{
    display: grid;
    row-gap: 2px;
    min-width: 0;
}
.datetime-name{
    font-family: var(--font-family-header), sans-serif;
    font-size: var(--font-size-md);
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    text-decoration: none;
}
.datetime-name:hover{ text-decoration: underline; text-underline-offset: 2px; }

.datetime-meta{
    display: inline-flex; align-items: baseline; gap: var(--gap-sm);
    min-width: 0; font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.datetime-meta .meta-code{ font-weight: var(--font-weight-bold); letter-spacing: .01em; color: var(--color-label); }
.datetime-meta .meta-label{ color: var(--color-text-muted); }
.datetime-meta .meta-sep::before{
    content: "—"; color: var(--color-text-muted); margin: 0 var(--spacing-xxs);
}

.datetime-right{
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
}
.dt-time{
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.datetime-line.is-hoverable{
    border: 1px solid transparent;
    border-radius: var(--radius-card);
    padding: .35rem .5rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.datetime-line.is-hoverable:hover{
    box-shadow: var(--card-hover-shadow, var(--shadow-md));
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
}
.datetime-line.is-hoverable:focus-within{
    outline: none; box-shadow: var(--focus-ring);
}

.dtbar{ display:flex; align-items:center; gap: var(--gap-sm); margin-bottom: .25rem; }
.dtbar .dt-mini.info-panel,
.dt-mini.info-panel{ width:max-content; flex:0 0 auto; }
.card .dtbar{ margin: .15rem 0 .25rem; }
.dtbar{ justify-content:flex-start; }
.dtbar .pill{ margin-left:auto; }
.dt-mini.info-panel{
    padding:.45rem .7rem; border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--stat-tile-bg);
}
.dt-mini time{
    font-feature-settings: "tnum" 1; letter-spacing:.01em; font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm); color: var(--color-primary);
}
.pill-compact{ font-size: var(--font-size-xs); padding:.15rem .5rem; }

/* ---------------------------- */
/* BUTTONS                      */
/* ---------------------------- */

.btn{
    font-family: var(--font-family-body), sans-serif;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--radius-button);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-fast);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    line-height: 1.1;
}

/* Primary (solid) */
.btn.btn-primary{
    background: var(--color-primary);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus{
    background: var(--color-primary-dark);
    border-color: var(--color-primary);
    color: var(--color-text-light);
}
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn-check:checked + .btn.btn-primary,
:not(.btn-check) + .btn.btn-primary:active{
    background: var(--color-primary-dark);
    border-color: var(--color-primary);
    color: var(--color-text-light);
}
.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
fieldset:disabled .btn.btn-primary{
    background: var(--color-bg);
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    opacity: var(--opacity-disabled, .6);
    pointer-events: none;
}

/* Secondary (brand wash) */
.btn.btn-secondary{
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-light);
}
.btn.btn-secondary:active,
.btn.btn-secondary.active,
.btn.btn-secondary.show,
.btn-check:checked + .btn.btn-secondary,
:not(.btn-check) + .btn.btn-secondary:active{
    background: var(--color-primary-dark);
    border-color: var(--color-primary);
    color: var(--color-text-light);
}
.btn.btn-secondary:disabled,
.btn.btn-secondary.disabled,
fieldset:disabled .btn.btn-secondary{
    opacity: var(--opacity-disabled, .6);
    pointer-events: none;
}

/* Outline */
.btn.btn-outline{
    background: var(--color-bg);
    border-color: var(--color-border-default);
    color: var(--color-primary);
}
.btn.btn-outline:hover,
.btn.btn-outline:focus{
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn.btn-outline:active,
.btn.btn-outline.active,
.btn.btn-outline.show,
.btn-check:checked + .btn.btn-outline,
:not(.btn-check) + .btn.btn-outline:active{
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.btn.btn-outline:disabled,
.btn.btn-outline.disabled,
fieldset:disabled .btn.btn-outline{
    background: var(--color-bg);
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    opacity: var(--opacity-disabled, .6);
    pointer-events: none;
}

/* Icon button */
.btn.btn-icon{
    background: var(--color-bg);
    border-color: var(--color-border-default);
    color: var(--color-primary);
    padding: var(--padding-xs) var(--padding-sm);
}

/* Size */
.btn.btn-sm{
    padding: var(--padding-sm);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-pill);
    line-height: 1.1;
    font-weight: var(--font-weight-medium);
}

/* Button shims */
.btn-check{ position:absolute; clip:rect(0,0,0,0); pointer-events:none; }
a.btn, a.btn:focus, a.btn:active, a.btn:visited{ text-decoration:none !important; }

/* Generic disabled fallback */
.btn:disabled, .btn[disabled]{
    opacity: var(--opacity-disabled, .6);
    cursor: not-allowed;
    filter: none;
    pointer-events: none;
}

/* ---------------------------- */
/* LABELS & TEXT HELPERS        */
/* ---------------------------- */

.label{ font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--label-text-default); }
.label-sm{
    font-size: var(--font-size-xs);
    color: var(--label-color-default, var(--color-label));
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
}
.label-muted   { color: var(--label-text-muted); }
.label-danger  { color: var(--label-text-danger); }
.label-success { color: var(--label-text-success); }
.label-warning { color: var(--label-text-warning); }
.summary-sub   { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.label-xs{
    font-size: var(--font-size-xxs, 0.72rem);
    color: var(--label-color-default, var(--color-label));
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    letter-spacing: .03em;
}

/* ---------------------------- */
/* CHIPS                        */
/* ---------------------------- */

.chip, .chip-primary{
    --chip-bg:            var(--color-primary-light);
    --chip-text:          var(--color-primary);
    --chip-border:        var(--color-primary);
    --chip-bg-active:     var(--color-primary);
    --chip-text-active:   var(--color-text-light);
    --chip-border-active: var(--color-primary-dark);
    --chip-bg-hover:      var(--color-primary);
    --chip-text-hover:    var(--color-text-light);
    --chip-border-hover:  var(--color-primary-dark);

    display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    padding: var(--padding-sm);
    min-height: 2rem;
    border:1px solid var(--chip-border);
    border-radius: var(--radius-md);
    background: var(--chip-bg);
    color: var(--chip-text);
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-medium);
    text-transform: capitalize;
    line-height: 1; white-space: nowrap; text-decoration: none;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .05s;
    user-select:none; cursor:pointer;
}
.chip:hover{ background: var(--chip-bg-hover); border-color: var(--chip-border-hover); color: var(--chip-text-hover); }
.chip:active, .chip.is-active, .chip.chip-filled{
    background: var(--chip-bg-active);
    border-color: var(--chip-border-active);
    color: var(--chip-text-active);
    border-width: 1px;
}

/* Chip sizes */
.chip-sm{
    padding: calc(var(--padding-sm) * .75) var(--padding-sm);
    min-height: 1.65rem; border-radius: var(--radius-md);
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.chip-lg{
    padding: var(--padding-md) var(--padding-md);
    min-height: 2.25rem; font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

/* Chip icon slot */
.chip .icon{
    display:inline-grid; place-items:center;
    width:1em; height:1em; line-height:1; flex:0 0 auto;
}

/* Chip groups */
.chip-group{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* Segmented */
.chip-segmented .chip{ border-radius:0; }
.chip-segmented .chip:first-child{ border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
.chip-segmented .chip:last-child { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }

/* Ghost */
.chip-ghost{ border-color: transparent; }
.chip-ghost:hover{ background: var(--chip-bg-hover); border-color: var(--chip-border-hover); color: var(--chip-text-hover); }
.chip-ghost:active, .chip-ghost.is-active, .chip-ghost.chip-filled{
    background: var(--chip-bg-active); border-color: var(--chip-border-active); color: var(--chip-text-active);
}

/* Semantic presets map to token text colors */
.chip--low,
.chip[data-level="Low"],
.chip[data-intensity="Beginner"]{
    --chip-bg-active:     var(--color-success);
    --chip-border-active: var(--color-success);
    --chip-text-active:   var(--color-text-light);
}
.chip--medium,
.chip[data-level="Medium"],
.chip[data-intensity="Moderate"]{
    --chip-bg-active:     var(--color-warning);
    --chip-border-active: var(--color-warning);
    --chip-text-active:   var(--color-text-light);
}
.chip--high,
.chip[data-level="High"],
.chip[data-intensity="Advanced"]{
    --chip-bg-active:     var(--color-danger);
    --chip-border-active: var(--color-danger);
    --chip-text-active:   var(--color-text-light);
}

/* Input-driven */
.chip-check{ position:absolute !important; opacity:0; width:1px; height:1px; overflow:hidden; }
.chip-check:focus + .chip{ box-shadow: var(--focus-ring); }
.chip-check:checked + .chip{
    background: var(--chip-bg-active); border-color: var(--chip-border-active); color: var(--chip-text-active);
}

/* ---------------------------- */
/* PILLS                        */
/* ---------------------------- */

.pill{
    display:inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-pill);
    padding: var(--padding-xs) var(--padding-sm);
    line-height: 1; white-space: nowrap; text-align:center;
}
.pill-default{
    border:1px solid var(--color-border-light);
    background: var(--color-surface);
    color: var(--color-text-strong);
    padding: var(--padding-xs) var(--padding-xs);
}
.pill-success{ background: var(--pill-bg-success); color: var(--pill-text-success); }
.pill-danger{  background: var(--pill-bg-danger);  color: var(--pill-text-danger); }
.pill-warning{ background: var(--pill-bg-warning); color: var(--pill-text-warning); }

.pill-sm{ font-size: var(--font-size-xs); padding: var(--padding-xs) var(--padding-xs); }
.pill-lg{ font-size: var(--font-size-md); padding: var(--padding-md) var(--padding-md); }

.pill-icon{ display:flex; align-items:center; justify-content:center; padding: var(--padding-xs); border-radius: var(--radius-circle); }
.pill-icon .icon{ font-size: var(--font-size-md); }

.pill-status-green{  background: var(--pill-status-green-bg);  color: var(--pill-status-green-text); }
.pill-status-yellow{ background: var(--pill-status-yellow-bg); color: var(--pill-status-yellow-text); }
.pill-status-red{    background: var(--pill-status-red-bg);    color: var(--pill-status-red-text); }

.pill-zone-z1 { background: var(--pill-zone-z1-bg); color: var(--pill-zone-z1-text); }
.pill-zone-z2 { background: var(--pill-zone-z2-bg); color: var(--pill-zone-z2-text); }
.pill-zone-z3 { background: var(--pill-zone-z3-bg); color: var(--pill-zone-z3-text); }
.pill-zone-z4 { background: var(--pill-zone-z4-bg); color: var(--pill-zone-z4-text); }

.metric-grid .value-strong > .pill{
    display:inline-flex; align-items:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pill-primary{ background: var(--color-primary); color: var(--color-text-light); padding: var(--padding-sm); }
.pill-outline{
    border:1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-primary);
    padding: var(--padding-sm);
    font-weight: var(--font-weight-bold);
}
.pill, .pill-default, .pill-outline{ white-space:nowrap; }

/* ---------------------------- */
/* CARDS — Base & Variants      */
/* ---------------------------- */

.card{
    background: var(--card-default-bg);
    color: var(--card-default-text);
    border-radius: var(--card-radius);
    border: var(--card-border-width) solid var(--card-default-border);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    display:flex; flex-direction:column; gap: var(--gap-sm);
    height: 100%;
}
.card-panel{
    background: var(--card-default-bg);
    color: var(--card-default-text);
    border-radius: var(--card-radius);
    border: var(--card-border-width) solid var(--card-default-border);
    box-shadow: var(--shadow-sm);
    padding: var(--card-padding);
}

/* Kill Bootstrap caps if present */
:root{ --bs-card-cap-bg: transparent; --bs-card-cap-border-color: transparent; }
.card-header, .card-footer{ background: transparent !important; border:0 !important; padding:0 !important; margin:0 !important; }

/* Actions */
.card-actions{
    margin-top:auto; display:flex; justify-content:flex-end; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.card.has-separator .card-actions{
    border-top:1px solid var(--card-default-border); padding-top: var(--padding-sm);
}
@media (max-width:767.98px){
    .card-actions{ justify-content:stretch; }
    .card-actions .btn{ flex: 1 1 calc(50% - .25rem); }
}

/* States */
.card-outline{ background: transparent; border: var(--card-border-width) solid var(--card-default-border); box-shadow:none; }
.card-hover:hover{ box-shadow: var(--card-hover-shadow); transform: translateY(-1px); transition: var(--transition-fast); }

/* Variants */
.card-success{ background: var(--card-success-bg); color: var(--card-success-text); }
.card-warning{ background: var(--card-warning-bg); color: var(--card-warning-text); }
.card-danger { background: var(--card-danger-bg);  color: var(--card-danger-text);  }
.card-info   { background: var(--card-info-bg);    color: var(--card-info-text);    }
.card-muted  { background: var(--card-muted-bg);   color: var(--card-muted-text);   }

/* Link-like cards */
.action-card, .stat-card-link{
    display:flex; flex-direction:column; gap: var(--gap-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    border-radius: var(--card-radius);
    border: var(--card-border-width) solid var(--card-default-border);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    text-decoration:none;
    transition: var(--transition-fast);
    height: 100%;
}
.action-card:hover, .stat-card-link:hover{ text-decoration:none; box-shadow: var(--card-hover-shadow); }
.action-card .card-title, .stat-card-link .card-title{
    font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: 0;
}
.action-card:hover .card-title, .stat-card-link:hover .card-title{ color: var(--color-primary-dark); }
.action-card .card-description{ font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ---------------------------- */
/* ALERTS                       */
/* ---------------------------- */

.alert{
    border-radius: var(--radius-card);
    padding: var(--padding-md) var(--padding-lg);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md);
}
.alert-success{ background: var(--alert-bg-success); color: var(--alert-text-success); }
.alert-warning{ background: var(--alert-bg-warning); color: var(--alert-text-warning); }
.alert-danger { background: var(--alert-bg-danger);  color: var(--alert-text-danger);  }
.alert-info   { background: var(--alert-bg-info);    color: var(--alert-text-info);    }
.alert-muted  { background: var(--alert-bg-muted);   color: var(--alert-text-muted);   }
.alert-outline{ background: transparent; color: var(--label-text-default); }

.alert-has-close{ position:relative; }
.alert-has-close .alert-close{
    all: unset;
    position:absolute; top: var(--spacing-sm); right: var(--spacing-sm);
    line-height:1; font-size:1.25rem; color: var(--color-text-muted);
    padding:.25rem; border-radius: var(--radius-sm); cursor:pointer;
}
.alert-has-close .alert-close:hover{ color: var(--color-text-strong); }
.alert-has-close .alert-close:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }

/* Notification bar */
.notification-bar{ gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.notification{ background: var(--color-surface); box-shadow: var(--shadow-card); }
.notification.alert-success{ background: var(--color-success-light); color: var(--color-success); }
.notification.alert-warning{ background: var(--color-warning-light); color: var(--color-text-body); }
.notification.alert-danger { background: var(--color-danger-light);  color: var(--color-text-body); }
.notification.alert-info   { background: var(--color-info-light);    color: var(--color-text-body); }
.notification.alert-outline{ background: var(--color-surface); color: var(--color-text-body); }

/* ---------------------------- */
/* STAT TILES                   */
/* ---------------------------- */

.stat-tile{
    background: var(--stat-tile-bg);
    padding: var(--padding-md);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.stat-title{
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--stat-tile-title-color);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom:.25rem; text-align:center;
}
.stat-value{
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--stat-tile-value-color, var(--color-primary));
    text-align:center;
}
.stat-description{ font-size: var(--font-size-sm); color: var(--stat-tile-description-color, var(--color-text-muted)); text-align:center; }
.stat-tile-hover:hover{ box-shadow: var(--shadow-elevated); transition: var(--transition-fast); }
.stat-success .stat-value{ color: var(--color-success); }
.stat-warning .stat-value{ color: var(--color-warning); }
.stat-danger  .stat-value{ color: var(--color-danger); }

/* ---------------------------- */
/* TABLES (desktop + mobile)    */
/* ---------------------------- */

/* Base */
.table-base{
    width:100%; border-collapse:collapse; font-size:var(--font-size-sm);
    color:var(--color-text-body); background: var(--color-surface);
}
.table-base th{
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: var(--font-weight-bold);
    padding: var(--padding-sm);
    text-align: left;
    border-bottom: 1px solid var(--table-row-border);
}
.table-base td{
    padding: var(--padding-sm);
    border-bottom: 1px solid var(--table-row-border);
}
.table-striped tbody tr:nth-child(odd){ background: var(--table-row-stripe-bg); }
.table-hover   tbody tr:hover        { background: var(--table-row-hover-bg); }

/* Small/boxed chrome */
.table-sm{
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow:hidden;
    font-size: var(--font-size-sm);
    background: var(--color-surface);
}
.table-sm thead{ color: var(--color-text-strong); font-weight: var(--font-weight-medium); }
.table-sm th, .table-sm td{
    border: 1px solid var(--table-row-border);
    padding: var(--padding-sm);
    vertical-align: middle;
}

.table-value{ font-weight: var(--font-weight-bold); color: var(--color-label); }

/* Desktop min width; disabled on stacked */
.table-responsive-sm table{ min-width:680px; }

/* Helpers */
.cell-muted  { color: var(--color-text-muted); }
.cell-success{ color: var(--color-success); }
.cell-warning{ color: var(--color-warning); }
.cell-danger { color: var(--color-danger); }
.cell-label  { font-weight: var(--font-weight-medium); color: var(--color-label); }

/* Hide trailing Status (when head pill present) */
.table-hide-status thead th:last-child,
.table-hide-status tbody td:last-child{ display:none; }

/* Numeric right align affordance */
.table-sm td[data-align="end"] .kv-val{ font-weight: var(--font-weight-bold); color: var(--color-primary); }
.table-sm .kv-quiet{ font-weight: var(--font-weight-bold); }

/* Stacked “card” mode (mobile) */
@media (max-width:768px){
    .table-responsive-sm table{ min-width:0; }
    .table-sm.table-stacked thead{
        position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
    }
    .table-sm.table-stacked, .table-sm.table-stacked tbody{ background: transparent !important; box-shadow:none; border:0; }
    .table-sm.table-stacked, .table-sm.table-stacked tbody, .table-sm.table-stacked tr{ display:block; width:100%; }

    .table-sm.table-stacked tr{
        background: var(--stat-tile-bg);
        border:1px solid var(--table-row-border);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-xs);
        padding: var(--padding-md);
        margin-bottom: var(--spacing-sm);
    }

    .table-sm.table-stacked td:first-child{
        display:block; padding-bottom: var(--padding-sm); margin-bottom: var(--spacing-sm); border:0;
    }
    .table-sm.table-stacked td:first-child::before{ content:none; }

    .table-sm.table-stacked td{
        display:grid; grid-template-columns: 42% 1fr; gap: var(--gap-sm);
        align-items:center; border:0; padding: var(--padding-xs) 0; min-height:40px;
    }
    .table-sm.table-stacked td::before{
        content: attr(data-label);
        font-size: var(--font-size-xs);
        color: var(--table-header-text);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase; letter-spacing:.03em; white-space:nowrap;
    }
    .table-sm.table-stacked td + td{ border-top:1px solid var(--table-row-border); }

    .table-sm.table-stacked td[data-align="end"] > *, .table-sm.table-stacked .kv-val{ justify-self:end; }
    .table-sm.table-stacked .kv-val{ font-weight: var(--font-weight-bold); }
    .table-sm.table-stacked td .pill{ justify-self:end; align-self:start; white-space:nowrap; }
    .table-sm.table-stacked td[data-label="Status"]{ display:none; }

    .table-sm.table-stacked .identity-name{ font-size: var(--font-size-header); }
    .table-sm.table-stacked .identity-meta{ font-size: var(--font-size-sm); }
    .table-sm.table-stacked .avatar-xs{ box-shadow: inset 0 0 0 1px var(--color-border-light); }

    .table-sm.table-stacked td a{
        color: var(--color-primary); text-decoration:none; display:inline-flex; align-items:center; gap: var(--gap-sm);
    }
    .table-sm.table-stacked td a:hover{ text-underline-offset:2px; }
}

/* Sticky first column (desktop) */
@media (min-width:769px){
    .table-sm.table-sticky-first th:first-child,
    .table-sm.table-sticky-first td:first-child{
        position:sticky; left:0; z-index:1;
        background: var(--color-surface);
        box-shadow: 1px 0 0 var(--table-row-border);
    }
}

/* Keep pill padding in cells */
.table-sm td .pill, .table-sm th .pill{
    display:inline-flex; align-items:center; padding:.25rem .5rem; line-height:1; white-space:nowrap;
}
.table-sm td .pill-sm, .table-sm th .pill-sm{ padding:.1875rem .375rem; }
.table-sm td .pill-lg, .table-sm th .pill-lg{ padding:.5rem .75rem; }

/* ---------------------------- */
/* LIST TABLE (rows-in-card)    */
/* ---------------------------- */

.list-table{
    --row-pad-block: .9rem;
    --row-pad-inline: 1rem;
    width:100%;
    /* changed */
    background: var(--stat-tile-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow:hidden;
    font-size: var(--font-size-sm);
}
/* changed */
.list-table.is-hoverable .list-row:hover{ background: var(--color-surface-hover); }
.list-table .list-row{
    display:flex; align-items:center; gap: var(--gap-md);
    padding: var(--row-pad-block) var(--row-pad-inline);
    border-top:1px solid var(--color-border-light);
    /* ensure container wash shows through */
    background: transparent;
}
.list-table .list-row:first-child{ border-top:0; }
.list-table .row-content{ flex:1 1 auto; min-width:0; }
.list-table .row-title{
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    line-height: 1.2;
}
.list-table .row-sub{
    margin-top: .15rem;
    color: var(--color-text-muted);
}
.list-table .row-actions{
    margin-left: auto;
    display: inline-flex;
    gap: .5rem;
}

/* date/time links */
.date-link{ color: var(--color-primary); text-decoration: none; }
.date-link:hover{ color: var(--color-primary-dark); text-decoration: none; }

/* Phone polish for list-table */
@media (max-width:575.98px){
    .list-table.is-hoverable{ gap:.5rem; display:grid; }
    .list-table.is-hoverable .list-row{
        border:1px solid var(--color-border-light);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-xs);
        background: var(--stat-tile-bg);
        padding:.35rem .45rem;
    }
}

/* ---------------------------- */
/* METRIC TILES (mini cards)    */
/* ---------------------------- */

.metric-tiles{ display:flex; flex-wrap:wrap; gap: var(--gap-sm); }
.metric-tile{
    display:inline-grid; grid-auto-flow:row; gap:.25rem;
    min-width:160px; max-width:260px;
    padding:.6rem .75rem;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    border: 2px solid var(--color-primary-light);
    box-shadow: var(--shadow-card);
    cursor:pointer;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}
.metric-tile:focus-visible{ box-shadow: var(--focus-ring); outline:none; }
.metric-tile .tile-label{ color: var(--color-text-strong); font-weight: var(--font-weight-bold); }
.metric-tile .tile-value{ color: var(--color-primary); font-weight: var(--font-weight-bold); }
.metric-tile .tile-hint{ color: var(--color-text-muted); font-size: var(--font-size-xxs); }

@media (max-width:991.98px){
    .metric-tiles{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-sm);
    }
    .metric-tiles .metric-tile{ width:100%; max-width:none; }
}

/* ---------------------------- */
/* MODALS (container friendly)  */
/* ---------------------------- */

.lp-modal .modal-dialog{ margin: 24px auto; }
@media (max-width:576px){ .lp-modal .modal-dialog{ margin:12px auto; } }

.lp-modal .modal-content{
    display:flex; flex-direction:column;
    max-height: calc(100dvh - 48px);
}
.lp-modal .modal-header,
.lp-modal .modal-footer{ flex:0 0 auto; }
.lp-modal .modal-body{ flex:1 1 auto; overflow:auto; }

.lp-modal .modal-dialog.modal-xl{ max-width: min(1100px, 98vw); }
.lp-modal .modal-dialog.modal-lg{ max-width: min(900px, 98vw); }

/* Base modal tokens (works with your ModalContainer) */
.modal-base{
    background: var(--modal-bg-default);
    border: 1px solid var(--modal-border-default);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-elevated);
    padding: var(--padding-lg);
    max-width: 600px;
    margin:auto;
}
.modal-header{
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-strong);
}
.modal-footer{
    display:flex; justify-content:flex-end; gap: var(--gap-md);
    margin-top: var(--spacing-lg);
}

/* ---------------------------- */
/* HERO / HEADER LAYOUT         */
/* ---------------------------- */

.hero-title{
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-header), sans-serif;
    color: var(--color-primary);
    line-height: 1.15;
}

.hero-grid{
    display:grid; gap: var(--gap-md);
    grid-template-columns: 1fr 360px 360px;
    align-items:start;
}
@media (min-width:1400px){ .hero-grid{ grid-template-columns: 1fr 380px 380px; } }
@media (min-width:1700px){ .hero-grid{ grid-template-columns: 1fr 400px 400px; } }
@media (max-width:1199.98px){ .hero-grid{ grid-template-columns: 1fr 380px; } }
@media (max-width:991.98px){  .hero-grid{ grid-template-columns: 1fr; } }

.subcard{
    background: var(--color-surface);
    border:1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: var(--padding-md);
    box-shadow: var(--shadow-xs);
}
.hero-grid .stack-sm .form-control{ min-width:0; }
.hero-grid .btn-sm{ min-width:88px; }
@media (max-width:575.98px){
    .subcard{ padding: var(--padding-sm); }
    .subcard .stack-sm{ display:grid; grid-template-columns: 1fr 120px; gap:.5rem; }
    .subcard .btn{ width:100%; }
}

/* ---------------------------- */
/* PANEL CHROME / SECTION HEADS */
/* ---------------------------- */

.panel-card{ padding: var(--spacing-lg); }
.panel-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: var(--spacing-md);
}
.panel-sub{ color: var(--color-text-muted); font-size: var(--font-size-sm); }
.panel-grid{
    display:grid; gap: var(--gap-md);
    grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width:767.98px){ .panel-grid{ grid-template-columns: 1fr; } }
@media (max-width:575.98px){
    .panel-card{ padding: var(--spacing-md); }
    .panel-head{ margin-bottom: var(--spacing-sm); flex-direction:column; gap:.5rem; align-items:flex-start; }
}

/* ---------------------------- */
/* STAT-WIDE (linkable)         */
/* ---------------------------- */

.stat-wide{
    display:grid; grid-template-columns: 1fr auto;
    gap: var(--gap-md); align-items:center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    text-decoration:none;
    background: var(--color-surface);
}
.stat-wide.tile-link{ transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.sw-left{ min-width:0; }
.sw-title{
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: clamp(1rem,.95rem + .25vw,1.1rem);
    margin-bottom:.15rem;
}
.sw-desc{ color: var(--color-text-muted); opacity:.9; font-size: var(--font-size-sm); }
.sw-right{
    display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
    gap:.25rem; min-width:110px; text-align:right;
}
.sw-value{
    font-size: clamp(1.35rem,1rem + 1vw,1.8rem);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    line-height:1.05;
}
.sw-cta{ font-size: var(--font-size-sm); color: var(--color-primary); margin-top:.2rem; align-self:flex-end; }
@media (max-width:575.98px){
    .stat-wide{ grid-template-columns: 1fr; gap:.4rem; padding: var(--spacing-sm) var(--spacing-md); }
    .sw-right{ align-items:flex-start; text-align:left; min-width:0; }
    .sw-value{ font-size:1.2rem; }
}

/* ---------------------------- */
/* ORG / ACCOUNT IDENTITY CARD  */
/* ---------------------------- */

.org-identity{
    background: var(--color-surface);
    border:1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-xs);
}
.org-row{ display:grid; grid-template-columns:auto 1fr; gap: var(--gap-md); align-items:center; }
.org-logo{
    width:64px; height:64px; border-radius:14px; object-fit:cover;
    border:1px solid var(--color-border-light); background: var(--color-surface);
}
.org-meta{ min-width:0; }
.org-name{
    font-family: var(--font-family-header), sans-serif;
    font-size: clamp(1.25rem, 1rem + 0.75vw, 1.6rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height:1.1;
}
.org-sub{ color: var(--color-text-muted); }
.org-stats{
    display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
    gap: var(--gap-sm); margin-top: var(--spacing-md);
}
@media (max-width:991.98px){ .org-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* KPI chips inside org card */
.kpi-chip{
    display:flex; flex-direction:column; gap:.15rem;
    padding:.6rem .75rem;
    border:1px solid var(--color-border-light);
    background: var(--stat-tile-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}
.kpi-chip .lbl{ font-weight: var(--font-weight-bold); }
.kpi-chip .val{ color: var(--color-primary); font-weight: var(--font-weight-bold); }
.kv-dot{ margin: 0 .4rem; color: var(--color-border-dark); }

/* ---------------------------- */
/* CAPACITY COMPONENT           */
/* ---------------------------- */

.capacity-list{ display:grid; gap:.5rem; }
.cap-row{
    display:grid; align-items:center; gap:.75rem;
    grid-template-columns: minmax(150px,1fr) 110px 1fr 70px auto;
    padding:.55rem .65rem;
    border:1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    /* changed */
    background: var(--stat-tile-bg);
    box-shadow: var(--shadow-xs);
}
.cap-name{ font-weight: var(--font-weight-bold); color: var(--color-text-strong); }
.cap-stats{ color: var(--color-text-muted); }
.cap-stats .sep{ margin: 0 .25rem; color: var(--color-border-dark); }
/* changed: make track lighter than row wash */
.cap-bar{
    position:relative; height:10px; border-radius:999px;
    background: var(--color-bg);
    border:1px solid var(--color-border-light);
    overflow:hidden;
}
.cap-fill{ position:absolute; inset:0; width: calc(var(--pct, 0) * 100%); height:100%; }
.cap-fill.cap-success{ background: color-mix(in srgb, var(--color-success) 25%, var(--color-success-light)); }
.cap-fill.cap-warning{ background: color-mix(in srgb, var(--color-warning) 28%, var(--color-warning-light)); }
.cap-fill.cap-danger { background: color-mix(in srgb, var(--color-danger) 30%, var(--color-danger-light)); }
.cap-pill, .cap-actions{ text-align:right; }

@media (max-width:575.98px){
    .cap-row{
        grid-template-columns: 1fr auto;
        grid-template-areas:
      "name action"
      "stats stats"
      "bar   bar";
        padding:.6rem .7rem;
    }
    .cap-name{ grid-area:name; font-size:1.05rem; }
    .cap-actions{ grid-area:action; }
    .cap-stats{ grid-area:stats; display:flex; align-items:center; gap:.35rem; color: var(--color-text-muted); }
    .cap-bar{ grid-area:bar; height:8px; }
    .cap-pill{ display:none; }
}

/* ---------------------------- */
/* MISC / UTILITIES             */
/* ---------------------------- */

/* pill-like trigger that isn't a button */
.pill-trigger-reset{
    border:0; box-shadow:none; appearance:none; -webkit-appearance:none; background:none;
}
.pill-trigger-reset:focus{ outline:none; }
.pill-trigger-reset:focus-visible{
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ensure pills render compact inside cards/tables */
.card .pill, .table-base .pill{
    display:inline-flex; align-items:center; justify-content:center;
    line-height:1; vertical-align:middle;
}

/* Focus rings for interactive elements not already covered */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:none;
    box-shadow: var(--focus-ring);
    border-color: var(--color-primary);
}

/* ---------------------------- */
/* GRAPHS                       */
/* ---------------------------- */

.graph-preview-sm,
.graph-preview{
    width: 100%;
    height: 120px;
}

/* zone pills inside graph panels use global .pill-zone-z* already */


/* ---------------------------- */
/* GRIDS & PANELS (metric tiles) */
/* ---------------------------- */

.metric-grid{
    display: grid;
    grid-template-columns: repeat(
    auto-fit,
    minmax(var(--metric-tile-min, 180px), 1fr)
  );
    gap: var(--gap-sm);
    align-items: stretch;
}
.metric-grid > *{ min-width: 0; }

/* Tiles */
.grid-tiles{
    display:grid;
    gap: var(--gap-sm);
    grid-template-columns: repeat(4, minmax(0,1fr));
    margin-bottom: var(--spacing-md);
}
@media (max-width: 1199.98px){ .grid-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575.98px){ .grid-tiles{ grid-template-columns: 1fr; } }

.tile{
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    padding: .75rem 1rem;
}
.tile.stat .stat-line{ display:flex; align-items:baseline; gap:.4rem; }
.tile .stat-val{ font-size: 1.25rem; font-weight: var(--font-weight-bold); color: var(--color-primary); }
.tile .stat-sub{ color: var(--color-text-muted); }
.tile .hint{ color: var(--color-text-muted); font-size: var(--font-size-sm); margin-top:.2rem; }

.tile-title{
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-header), sans-serif;
    line-height: 1.15;
}

/* equal-height helpers */
:root { --tile-min-h: 64px; }
.metric-grid .info-panel,
.metric-grid .graph-stat-panel{
    height: 100%;
    min-height: var(--tile-min-h);
}

/* shared chrome */
.info-panel,
.graph-stat-panel{
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem;
    padding: var(--padding-sm) var(--padding-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    background: var(--stat-tile-bg);
    box-shadow: var(--shadow-sm);
    line-height: 1.2;
    min-height: var(--tile-min-h);
    width: 100%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
}

/* stacked variant */
.info-panel--stack{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .35rem;
}
.info-panel--stack .tile-title{ color: var(--color-text-body); }
.info-panel--stack .tile-main { color: var(--color-primary); font-weight: var(--font-weight-bold); }
.info-panel--stack .tile-sub  { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.info-panel--stack .tile-main .badge,
.info-panel--stack .tile-main .pill { vertical-align: middle; }
.info-panel--stack .tile-title { margin-bottom: .15rem; }
.info-panel--stack .tile-sub   { margin-top: .15rem; }

/* left label / right value alignment */
.info-panel .tile-title,
.graph-stat-panel .tile-title{
    font-weight: var(--font-weight-bold, 700);
    min-width: 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.info-panel .tile-value,
.graph-stat-panel .tile-value,
.info-panel strong,
.info-panel .value-strong,
.graph-stat-panel strong,
.graph-stat-panel .value-strong{
    color: var(--color-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold, 700);
    white-space: nowrap;
}

/* right side hugs the edge + truncates safely */
.metric-grid .info-panel .value-strong,
.metric-grid .graph-stat-panel .value-strong{
    margin-left: auto;
    display:flex; align-items:center; justify-content:flex-end;
    gap:.5rem; min-width:0; text-align:right;
}
.metric-grid .info-panel .value-strong > .pill,
.metric-grid .graph-stat-panel .value-strong > .pill{
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* make links tile-wide when desired */
.tile-link{
    color: var(--color-text-body);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
    background: var(--stat-tile-bg);
    border-color: var(--color-border-light);
}
.tile-link:hover{
    color: var(--color-text-strong);
    box-shadow: var(--shadow-elevated);
}
.tile-link:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(0,90,170,.25)), var(--shadow-md);
}

/* muted sub-lines inside tiles */
.info-panel .tile-sub,
.graph-stat-panel .tile-sub{ color: var(--color-text-muted); }

/* optional general hover */
.is-hoverable{
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.is-hoverable:hover{
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-border-default);
}
.is-hoverable:active{
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}
.is-hoverable:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(0,90,170,.25)), var(--shadow-md);
}

/* responsive fallbacks */
@media (max-width:768px){
    .metric-grid{ grid-template-columns: 1fr; }
}
@media (max-width:575.98px){
    :root { --tile-min-h: 64px; }
}

/* ---------------------------- */
/* PROGRESS BAR                 */
/* ---------------------------- */

.progress-bar{
    display:flex; flex-direction:column; justify-content:center;
    overflow:hidden; text-align:center; white-space:nowrap;
    color: var(--color-text-light);
    background-color: var(--color-primary);
    transition: var(--transition-default);
}
.progress.meter-bar{ background: var(--color-border-light); }
.progress.meter-bar .progress-bar{ background: var(--color-primary); }

/* ---------------------------- */
/* “TODAY’S SESSIONS” (mobile)  */
/* ---------------------------- */

@media (max-width:575.98px){
    /* make the row a 3-col grid: [icon | name | right-rail] */
    .list-table .datetime-line{
        display:grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "icon name right";
        align-items:start;
        gap:.5rem;
        width:100%;
    }
    .list-table .dt-icon{ grid-area: icon; }
    .list-table .datetime-text{
        grid-area: name; align-self:center; justify-self:start; min-width:0;
    }
    .list-table .datetime-right{
        grid-area: right;
        display:grid; row-gap:.35rem; justify-items:end; align-self:start;
    }
    .list-table .identity-name{ font-size: 1.05rem; }
    .list-table .dt-time{ font-size: var(--font-size-sm); }
}

/* activity variant: icon | text | time */
@media (max-width:575.98px){
    .list-table.activity .list-row{
        display:grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "icon text time";
        align-items:start;
        column-gap:.75rem; row-gap:.25rem;
    }
    .list-table.activity .identity-line{ display: contents; }
    .list-table.activity .dt-icon{ grid-area: icon; }
    .list-table.activity .identity-text{ grid-area: text; min-width:0; }
    .list-table.activity .row-actions{ grid-area: time; justify-self:end; align-self:start; }
    .list-table.activity .row-title{ font-size: var(--font-size-md); }
    .list-table.activity .row-sub{ font-size: var(--font-size-sm); }
    .list-table.activity .row-actions .kv-mono{ font-size: var(--font-size-sm); }
}