/* littoral.css — defaults for Littoral pages and tools. */
:root {
  --lt-fg: #1d2330; --lt-bg: #ffffff; --lt-muted: #586071;
  --lt-accent: #0e7490; --lt-border: #d6dbe3; --lt-panel: #f4f6f9;
  --lt-error: #b42318; --lt-star: #a15c00;
  --lt-series-1: #b45309; --lt-series-2: #7c3aed; --lt-series-3: #047857;
  --lt-series-4: #be185d; --lt-series-5: #4b5563;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lt-fg: #e6e9ef; --lt-bg: #14171d; --lt-muted: #9aa3b2;
    --lt-accent: #38bdf8; --lt-border: #333a46; --lt-panel: #1d222b;
    --lt-error: #f97066; --lt-star: #fbbf24;
    --lt-series-1: #fbbf24; --lt-series-2: #a78bfa; --lt-series-3: #34d399;
    --lt-series-4: #f472b6; --lt-series-5: #cbd5e1;
  }
}
body { font-family: system-ui, sans-serif; color: var(--lt-fg); background: var(--lt-bg);
       margin: 0 auto; padding: 1rem 1rem 4rem; max-width: 60rem; line-height: 1.45;
       overflow-wrap: break-word; }
/* Nothing wider than a phone's screen: wide tables and code scroll in place. */
img, video, input, select, textarea { max-width: 100%; }
pre { overflow-x: auto; }
a { color: var(--lt-accent); }
input, select, textarea, button { font: inherit; }
label { margin-right: 1em; }
.lt-table { border-collapse: collapse; margin: .5rem 0; display: block; max-width: 100%; overflow-x: auto; }
.lt-table th, .lt-table td { border-bottom: 1px solid var(--lt-border); padding: .3rem .6rem;
                             text-align: left; vertical-align: top; }
.lt-buttons { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.lt-dialog { padding: 1rem; border: 1px solid var(--lt-border); border-radius: 6px;
             background: var(--lt-panel); margin: .5rem 0; }
.lt-message { font-weight: 600; }
.lt-validation-error, .lt-error { color: var(--lt-error); font-weight: 600; }
.lt-toolbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem;
              padding: .4rem 1rem; font-size: .85rem; background: var(--lt-panel);
              border-top: 1px solid var(--lt-border); }
.lt-toolbar-time { margin-left: auto; color: var(--lt-muted); }
.lt-halo { border: 1px dashed var(--lt-accent); margin: .3rem 0; }
.lt-halo-bar { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .75rem; padding: .1rem .4rem;
               background: var(--lt-panel); border-bottom: 1px dashed var(--lt-accent); }
.lt-halo-class { font-weight: 600; }
.lt-halo-body { padding: .3rem; }
.lt-source { white-space: pre-wrap; font-size: .8rem; overflow-x: auto; }
.lt-batch { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; align-items: baseline; }
.lt-batch .lt-disabled { color: var(--lt-muted); }
.lt-report th a { text-decoration: none; }
.lt-report td.number, .lt-report th.number { text-align: right; font-variant-numeric: tabular-nums; }
.lt-code { margin: .3rem 0; }
.lt-code-title { font-size: .8rem; margin-bottom: .2rem; }
.lt-profile { margin: 1rem 0 3rem; font-size: .85rem; }
.lt-profile td.number { text-align: right; font-variant-numeric: tabular-nums; }
.lt-editor .lt-field { margin: .6rem 0; }
.lt-editor label { display: block; font-weight: 600; margin-bottom: .15rem; }
.lt-editor input[type=text], .lt-editor input[type=email], .lt-editor input[type=password],
.lt-editor textarea { width: min(100%, 28rem); }
.lt-required { color: var(--lt-error); }
.lt-field-invalid input, .lt-field-invalid textarea, .lt-field-invalid select { outline: 1px solid var(--lt-error); }
.lt-help { font-size: .8rem; color: var(--lt-muted); }
.lt-viewer th { width: 10rem; }
.lt-tabs { display: flex; flex-wrap: wrap; gap: .2rem; list-style: none; padding: 0; margin: 0;
           border-bottom: 1px solid var(--lt-border); }
.lt-tabs li a, .lt-tabs li span { display: block; padding: .35rem .8rem; text-decoration: none;
                                  border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.lt-tabs li.lt-active span { border-color: var(--lt-border); background: var(--lt-bg); margin-bottom: -1px;
                             font-weight: 600; }
.lt-tab-body { padding: .8rem 0; }
.lt-navigation { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 40rem) { .lt-navigation { grid-template-columns: minmax(0, 1fr); } }
.lt-menu { list-style: none; padding: 0; margin: 0; }
.lt-menu li a, .lt-menu li span { display: block; padding: .3rem .6rem; text-decoration: none; border-radius: 4px; }
.lt-menu li.lt-active span { background: var(--lt-panel); font-weight: 600; }
.lt-tree { list-style: none; padding-left: 1.1rem; margin: .1rem 0; }
.lt-tree-toggle, .lt-tree-leaf { display: inline-block; width: 1rem; text-decoration: none; color: var(--lt-muted); }
.lt-tree a.lt-selected { font-weight: 600; text-decoration: none; }
.lt-autocomplete { position: relative; display: inline-block; }
.lt-suggestions { position: absolute; z-index: 10; left: 0; right: 0; list-style: none; margin: .1rem 0;
                  padding: .2rem 0; background: var(--lt-bg); border: 1px solid var(--lt-border); border-radius: 4px; }
.lt-suggestion { display: block; width: 100%; text-align: left; border: none; background: none;
                 padding: .25rem .6rem; cursor: pointer; color: inherit; }
.lt-suggestion:hover, .lt-suggestion:focus { background: var(--lt-panel); }
.lt-sortable { padding-left: 1.6rem; }
.lt-sortable li { display: flex; gap: .5rem; align-items: center; padding: .3rem .4rem; margin: .2rem 0;
                  border: 1px solid var(--lt-border); border-radius: 4px; background: var(--lt-bg); cursor: grab; }
.lt-sortable li.lt-dragging { opacity: .5; }
.lt-handle { color: var(--lt-muted); }
.lt-sortable-item { flex: 1; }
.lt-sortable-buttons a { text-decoration: none; padding: 0 .2rem; }
.lt-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 2px; }
.lt-behind-modal { filter: blur(1px); opacity: .5; }
dialog.lt-modal { position: fixed; top: 12vh; margin: 0 auto; max-width: min(36rem, calc(100vw - 2rem));
                  max-height: 76vh; overflow: auto; border: 1px solid var(--lt-border); border-radius: 8px;
                  padding: 1.2rem 1.4rem; background: var(--lt-bg); color: var(--lt-fg);
                  box-shadow: 0 10px 40px rgba(0,0,0,.25); z-index: 100; }
.lt-modal-close { position: absolute; top: .4rem; right: .7rem; font-size: 1.4rem; text-decoration: none; }
.lt-toasts { position: fixed; right: 1rem; bottom: 3rem; display: flex; flex-direction: column; gap: .5rem;
             z-index: 200; max-width: min(24rem, calc(100vw - 2rem)); }
.lt-toast { padding: .6rem .9rem; border-radius: 6px; background: var(--lt-panel); color: var(--lt-fg);
            border-left: 4px solid var(--lt-accent); box-shadow: 0 4px 16px rgba(0,0,0,.15);
            transition: opacity .5s; }
.lt-toast-success { border-left-color: #2e7d32; }
.lt-toast-error { border-left-color: var(--lt-error); }
.lt-toast-leaving { opacity: 0; }

/* Breadcrumbs: the separators are drawn, so screen readers don't read them */
.lt-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; list-style: none; padding: 0; margin: 0 0 .8rem; }
.lt-breadcrumbs li + li::before { content: ""; display: inline-block; width: .35em; height: .35em; margin: 0 .6em .1em .4em;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .6; }
.lt-breadcrumbs [aria-current] { font-weight: 600; }

/* Disclosures, accordions, menus */
.lt-disclosure > summary, .lt-accordion-section > summary { cursor: pointer; padding: .3rem 0; font-weight: 600; }
.lt-accordion-section { border-bottom: 1px solid var(--lt-border); }
.lt-accordion-panel, .lt-disclosure-content { padding: .2rem 0 .6rem 1rem; }
.lt-dropdown { position: relative; display: inline-block; }
.lt-dropdown > summary { cursor: pointer; list-style: none; padding: .25rem .6rem; border: 1px solid var(--lt-border); border-radius: 6px; }
.lt-dropdown > summary::-webkit-details-marker { display: none; }
.lt-dropdown > summary::after { content: " ▾"; }
.lt-dropdown > ul { position: absolute; z-index: 20; min-width: 12rem; margin: .2rem 0 0; padding: .3rem 0; list-style: none;
  background: var(--lt-bg, Canvas); border: 1px solid var(--lt-border); border-radius: 6px; box-shadow: 0 4px 14px rgb(0 0 0 / .15); }
.lt-dropdown > ul a { display: block; padding: .3rem .8rem; text-decoration: none; }
.lt-dropdown > ul a:hover, .lt-dropdown > ul a:focus { background: var(--lt-panel); }
.lt-menu-separator { border-top: 1px solid var(--lt-border); margin: .3rem 0; }
.lt-menu-bar > ul { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; list-style: none; padding: 0; margin: 0; }

/* Tags, date ranges, uploads */
.lt-tags { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: 0; }
.lt-tags li { padding: .05rem .5rem; border-radius: 999px; background: var(--lt-panel); }
.lt-tags-input { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; border: 1px solid var(--lt-border); border-radius: 6px; padding: .25rem; }
.lt-tags-entry { flex: 1; min-width: 8rem; border: 0; }
.lt-tag-remove { border: 0; background: none; padding: 0 0 0 .3rem; cursor: pointer; }
.lt-date-range { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.lt-drop { border: 2px dashed var(--lt-border); border-radius: 8px; padding: .8rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lt-drop-over { border-color: var(--lt-accent); background: var(--lt-panel); }
.lt-drop-hint { color: var(--lt-muted); }
.lt-upload-progress { display: block; width: 100%; max-width: 30rem; margin-top: .5rem; }

/* Presence */
.lt-presence-count { margin: 0 0 .3rem; font-weight: 600; }
.lt-presence ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.lt-presence li { padding: .05rem .5rem; border-radius: 999px; background: var(--lt-panel); font-size: .9rem; }
.lt-presence-activity { color: var(--lt-muted); font-style: italic; }

/* In-place editor */
.lt-in-place-editing { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.lt-in-place-editing .lt-validation-error { flex-basis: 100%; }
.lt-in-place-edit { font-size: .85em; padding: .05rem .5rem; }

/* Language chooser */
.lt-languages ul { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; padding: 0; margin: 0; }

/* Background jobs */
.lt-job-track { height: 1rem; max-width: 30rem; border: 1px solid var(--lt-border); border-radius: 999px; overflow: hidden; }
.lt-job-fill { height: 100%; background: var(--lt-accent); transition: width .15s; }
.lt-job-failed .lt-job-fill { background: var(--lt-error); }
.lt-job-status { margin: .4rem 0; }

/* Stored files */
.lt-thumbnail img { max-width: 240px; max-height: 240px; border-radius: 6px; border: 1px solid var(--lt-border); }
.lt-file-current { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .4rem; }

/* Development tools: history and the component tree */
.lt-history-changes > td { background: var(--lt-panel); }
.lt-tree-list { list-style: none; padding-left: 1.2rem; margin: .2rem 0; }
.lt-tree-list summary { cursor: pointer; }

/* Data grid */
.lt-grid-scroll { overflow-x: auto; }
.lt-grid-filters input { width: 100%; min-width: 6rem; font-size: .85rem; }
.lt-grid-actions { white-space: nowrap; }
.lt-grid-editing input, .lt-grid-editing select, .lt-grid-editing textarea { width: 100%; min-width: 6rem; }
.lt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Charts */
.lt-chart { margin: .8rem 0; max-width: 40rem; }
.lt-chart-svg { width: 100%; height: auto; }
.lt-chart figcaption { font-weight: 600; font-size: .9rem; }
.lt-chart-grid { stroke: var(--lt-border); stroke-width: 1; }
.lt-chart-axis { fill: var(--lt-muted); font-size: 11px; }
.lt-chart-bar { fill: var(--lt-accent); }
.lt-chart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.lt-series-0 { --lt-swatch: var(--lt-accent); stroke: var(--lt-accent); fill: var(--lt-accent); }
.lt-series-1 { --lt-swatch: var(--lt-series-1); stroke: var(--lt-series-1); fill: var(--lt-series-1); }
.lt-series-2 { --lt-swatch: var(--lt-series-2); stroke: var(--lt-series-2); fill: var(--lt-series-2); }
.lt-series-3 { --lt-swatch: var(--lt-series-3); stroke: var(--lt-series-3); fill: var(--lt-series-3); }
.lt-series-4 { --lt-swatch: var(--lt-series-4); stroke: var(--lt-series-4); fill: var(--lt-series-4); }
.lt-series-5 { --lt-swatch: var(--lt-series-5); stroke: var(--lt-series-5); fill: var(--lt-series-5); }
.lt-chart-svg .lt-chart-slice { stroke: var(--lt-bg); stroke-width: 2; }
.lt-chart-svg .lt-chart-segment { stroke: var(--lt-bg); stroke-width: 1; }
.lt-chart-svg .lt-chart-point { stroke: var(--lt-bg); stroke-width: .75; }
.lt-chart-pie { max-width: 15rem; display: block; }
.lt-chart-total { fill: var(--lt-fg); font-size: 24px; font-weight: 600; }
.lt-chart-key { list-style: none; padding: 0; margin: .3rem 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .85rem; }
.lt-chart-swatch { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .35em;
                   vertical-align: -.05em; background: var(--lt-swatch); }
polyline.lt-chart-line { fill: none; }
.lt-chart-legend { font-size: 11px; stroke: none; }
.lt-chart-data summary { font-size: .8rem; color: var(--lt-muted); cursor: pointer; }
.lt-sparkline polyline { fill: none; stroke: var(--lt-accent); stroke-width: 1.5; }

/* Calendar */
.lt-calendar-head { display: flex; align-items: center; gap: 1rem; }
.lt-calendar-head h3 { margin: 0; min-width: 10rem; text-align: center; }
.lt-calendar-head a { text-decoration: none; font-size: 1.3rem; }
.lt-calendar-grid { border-collapse: collapse; width: 100%; max-width: 40rem; table-layout: fixed; }
.lt-calendar-grid th { font-size: .8rem; color: var(--lt-muted); font-weight: 500; }
.lt-calendar-grid td { border: 1px solid var(--lt-border); vertical-align: top; height: 3.6rem; padding: .2rem; font-size: .85rem; }
.lt-calendar-grid td.lt-today { outline: 2px solid var(--lt-accent); outline-offset: -2px; }
.lt-calendar-grid td.lt-busy { background: var(--lt-panel); }
.lt-calendar-blank { border: none !important; }
.lt-calendar-events { list-style: none; padding: 0; margin: .1rem 0 0; font-size: .75rem; overflow-wrap: anywhere; }

/* Kanban */
.lt-kanban { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; padding-bottom: .4rem; }
.lt-kanban-column { flex: 1 1 12rem; min-width: 11rem; background: var(--lt-panel); border-radius: 8px; padding: .5rem; }
.lt-kanban-column h3 { font-size: .95rem; margin: .2rem .2rem .5rem; }
.lt-kanban-count { color: var(--lt-muted); font-weight: 400; }
.lt-kanban-cards { list-style: none; padding: 0; margin: 0; min-height: 2.5rem; }
.lt-kanban-cards li { background: var(--lt-bg); border: 1px solid var(--lt-border); border-radius: 6px; padding: .4rem .5rem;
                      margin-bottom: .4rem; cursor: grab; display: flex; justify-content: space-between; gap: .4rem; }
.lt-kanban-cards li.lt-dragging { opacity: .5; }
.lt-kanban-buttons a { text-decoration: none; padding: 0 .15rem; }

/* Markdown */
.lt-markdown > :first-child { margin-top: 0; }
.lt-markdown pre { background: var(--lt-panel); padding: .5rem; border-radius: 6px; overflow-x: auto; }

/* Wizards */
.lt-wizard-steps { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .9rem; }
.lt-wizard-steps li { color: var(--lt-muted); }
.lt-wizard-steps li.lt-current { color: var(--lt-fg); font-weight: 600; }
.lt-wizard-steps li.lt-done { color: var(--lt-accent); }
.lt-wizard-number { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
                    border: 1px solid currentColor; font-size: .8rem; }
.lt-wizard-steps li.lt-current .lt-wizard-number { background: var(--lt-accent); color: var(--lt-bg); border-color: var(--lt-accent); }
.lt-wizard-review dt { font-weight: 600; margin-top: .5rem; }
.lt-wizard-review dd { margin: 0; }

/* Security settings */
.lt-qr { display: block; margin: .6rem 0; max-width: 100%; height: auto; }
.lt-recovery-codes { columns: 2; list-style: none; padding: 0; }
.lt-passkey-button { margin: .2rem 0; }

/* Lazy panels */
.lt-lazy { min-height: 3rem; padding: .8rem; border: 1px dashed var(--lt-border); border-radius: 6px; color: var(--lt-muted); }

/* Differences */
.lt-diff-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; }
.lt-diff-summary { margin: .3rem 0; color: var(--lt-muted); }
.lt-diff-layouts { display: flex; gap: .8rem; list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.lt-diff { overflow-x: auto; }
.lt-diff-table { border-collapse: collapse; width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
.lt-diff-table th { text-align: left; font-family: system-ui, sans-serif; font-weight: 600; padding: .2rem .4rem;
                    border-bottom: 1px solid var(--lt-border); }
.lt-diff-table td { padding: .05rem .4rem; vertical-align: top; white-space: pre-wrap; }
.lt-diff-number { width: 1%; text-align: right; color: var(--lt-muted); user-select: none; white-space: nowrap; }
.lt-diff-sides .lt-diff-text { width: 49%; }
.lt-diff-removed { background: #fde8e8; }
.lt-diff-added { background: #e3f6e8; }
.lt-diff-empty { background: var(--lt-panel); }
.lt-diff-table del, .lt-diff-table ins { text-decoration: none; }
.lt-diff-word { color: inherit; border-radius: 2px; }
del .lt-diff-word { background: #f7b9b9; text-decoration: line-through; }
ins .lt-diff-word { background: #a9e2b9; }
.lt-diff-skipped td { text-align: center; color: var(--lt-muted); background: var(--lt-panel); font-family: system-ui, sans-serif; }
@media (prefers-color-scheme: dark) {
  .lt-diff-removed { background: #3a1d20; }
  .lt-diff-added { background: #17321f; }
  del .lt-diff-word { background: #6b2a2f; }
  ins .lt-diff-word { background: #22593a; }
}

/* Command palettes */
.lt-palette { position: relative; display: inline-block; }
.lt-palette > summary { cursor: pointer; list-style: none; padding: .25rem .6rem; border: 1px solid var(--lt-border); border-radius: 6px; }
.lt-palette > summary::-webkit-details-marker { display: none; }
.lt-palette-key { font-size: .8rem; color: var(--lt-muted); border: 1px solid var(--lt-border); border-radius: 4px; padding: 0 .3rem; }
.lt-palette-box { position: absolute; z-index: 30; right: 0; width: min(28rem, 90vw); margin-top: .3rem; padding: .5rem;
                  background: var(--lt-bg); border: 1px solid var(--lt-border); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.lt-palette-box input[type=search] { width: 100%; box-sizing: border-box; padding: .45rem .6rem; font-size: 1rem; }
.lt-palette-results { list-style: none; padding: 0; margin: .4rem 0 0; max-height: 22rem; overflow-y: auto; }
.lt-palette-results a { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .6rem; border-radius: 5px;
                        text-decoration: none; color: var(--lt-fg); }
.lt-palette-results a:hover, .lt-palette-results a:focus { background: var(--lt-panel); outline: 2px solid var(--lt-accent); outline-offset: -2px; }
.lt-palette-group { color: var(--lt-muted); font-size: .85rem; }
.lt-palette-none { color: var(--lt-muted); margin: .5rem .3rem; }

/* Notification bells */
.lt-bell > summary { display: inline-flex; align-items: center; gap: .25rem; border: 0; padding: .15rem .3rem; vertical-align: middle; }
.lt-bell > summary::after { content: none; }
.lt-bell-icon { display: block; }
.lt-bell-count { min-width: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: var(--lt-error); color: var(--lt-bg);
                 font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.1rem; }
.lt-dropdown-panel { position: absolute; z-index: 20; right: 0; width: min(22rem, 90vw); margin-top: .2rem; padding: .4rem 0;
                     background: var(--lt-bg); border: 1px solid var(--lt-border); border-radius: 6px; box-shadow: 0 4px 14px rgb(0 0 0 / .15); }
.lt-bell-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .2rem .8rem .4rem;
                   border-bottom: 1px solid var(--lt-border); }
.lt-bell-all { font-size: .85rem; }
.lt-bell-panel ul { list-style: none; padding: 0; margin: 0; max-height: 24rem; overflow-y: auto; }
.lt-notification > a, .lt-notification > button { display: block; width: 100%; text-align: left; padding: .45rem .8rem;
  border: 0; background: none; font: inherit; color: var(--lt-fg); text-decoration: none; cursor: pointer; }
.lt-notification > a:hover, .lt-notification > a:focus, .lt-notification > button:hover, .lt-notification > button:focus { background: var(--lt-panel); }
.lt-notification.lt-unread .lt-notification-message { font-weight: 600; }
.lt-notification.lt-unread { box-shadow: inset 3px 0 var(--lt-accent); }
.lt-notification-warning.lt-unread { box-shadow: inset 3px 0 var(--lt-error); }
.lt-notification-time { display: block; color: var(--lt-muted); font-size: .8rem; }
.lt-bell-none { color: var(--lt-muted); padding: .3rem .8rem; margin: 0; }

/* Sliders, steppers, star ratings, colours */
.lt-range { display: inline-flex; align-items: center; gap: .6rem; }
.lt-range input { width: 14rem; }
.lt-range-value { min-width: 3ch; font-weight: 600; font-variant-numeric: tabular-nums; }
.lt-stepper { display: inline-flex; align-items: stretch; gap: .2rem; }
.lt-stepper input { width: 5rem; text-align: center; }
.lt-stepper button { min-width: 2.2rem; }
.lt-rating { display: inline-flex; align-items: center; gap: .1rem; }
.lt-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lt-rating label { margin: 0; cursor: pointer; }
.lt-rating-star { font-size: 1.6rem; line-height: 1; padding: 0 .05rem; color: var(--lt-muted); }
/* The stars up to the one checked are gold; those after it, grey. */
.lt-rating:has(input:checked) .lt-rating-star { color: var(--lt-star); }
.lt-rating input:checked + label ~ .lt-rating-star { color: var(--lt-muted); }
.lt-rating.lt-rating:has(.lt-rating-star:hover) label.lt-rating-star { color: var(--lt-star); }
.lt-rating.lt-rating label.lt-rating-star:hover ~ label.lt-rating-star { color: var(--lt-muted); }
.lt-rating input:focus-visible + label { outline: 2px solid var(--lt-accent); outline-offset: 2px; border-radius: 3px; }
.lt-rating-none { order: 99; margin-left: .5rem !important; font-size: .85rem; color: var(--lt-muted); }
.lt-rating input:checked + .lt-rating-none { text-decoration: underline; }
.lt-stars { color: var(--lt-star); letter-spacing: .05em; }
.lt-stars-empty { color: var(--lt-muted); }
.lt-color { display: inline-flex; align-items: center; gap: .4rem; }
.lt-color input[type=color] { width: 2.6rem; height: 2rem; padding: 0 .1rem; }
.lt-color-code { width: 7rem; font-family: ui-monospace, monospace; }
.lt-swatch { display: inline-block; width: 1em; height: 1em; margin-right: .35em; vertical-align: -.15em;
             border: 1px solid var(--lt-border); border-radius: 3px; }

/* Multiple choices and transfer lists */
.lt-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; align-items: center; max-width: 36rem; }
.lt-transfer-list label { display: block; margin: 0 0 .2rem; font-size: .9rem; color: var(--lt-muted); }
.lt-transfer select { width: 100%; min-width: 8rem; }
.lt-transfer-buttons { display: flex; flex-direction: column; gap: .4rem; }
@media (max-width: 40rem) {
  .lt-transfer { grid-template-columns: minmax(0, 1fr); }
  .lt-transfer-buttons { flex-direction: row; }
}

/* New passwords' strength */
.lt-strength { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; font-size: .9rem; }
.lt-strength[hidden] { display: none; }
.lt-strength meter { width: 8rem; flex: none; }

/* Popovers and tooltips */
.lt-popover { padding: .7rem .9rem; border: 1px solid var(--lt-border); border-radius: 8px; background: var(--lt-bg);
              color: var(--lt-fg); box-shadow: 0 6px 20px rgb(0 0 0 / .18); max-width: min(22rem, calc(100vw - 2rem)); }
.lt-popover > :first-child { margin-top: 0; }
.lt-popover > :last-child { margin-bottom: 0; }
.lt-tooltip { position: relative; display: inline-block; }
.lt-tooltip-text { display: none; position: absolute; z-index: 25; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
                   width: max-content; max-width: min(16rem, 80vw); padding: .3rem .55rem; border-radius: 5px;
                   background: var(--lt-fg); color: var(--lt-bg); font-size: .85rem; line-height: 1.3; white-space: normal; }
/* A bridge over the gap, so the pointer can move onto the tip. */
.lt-tooltip-text::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }
.lt-tooltip:is(:hover, :focus-within):not(.lt-tooltip-dismissed) > .lt-tooltip-text { display: block; }

/* Drawers */
.lt-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(20rem, 85vw); box-sizing: border-box;
             overflow-y: auto; padding: 1rem; background: var(--lt-bg); border-right: 1px solid var(--lt-border);
             box-shadow: 0 0 1.5rem rgb(0 0 0 / .25); animation: lt-drawer-left .2s ease-out; }
.lt-drawer-right { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--lt-border); animation-name: lt-drawer-right; }
.lt-drawer-backdrop { position: fixed; inset: 0; z-index: 39; background: rgb(0 0 0 / .3); }
.lt-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.lt-drawer-head h2 { margin: 0; font-size: 1.2rem; }
.lt-drawer-close { padding: 0 .4rem; font-size: 1.5rem; line-height: 1; text-decoration: none; }
@keyframes lt-drawer-left { from { transform: translateX(-100%); } }
@keyframes lt-drawer-right { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .lt-drawer { animation: none; } }

/* Split panes */
.lt-split { display: grid; grid-template-columns: minmax(0, var(--lt-split, 40%)) .75rem minmax(0, 1fr); margin: .5rem 0; }
.lt-split-pane { min-width: 0; overflow: auto; }
.lt-split-divider { display: flex; justify-content: center; cursor: col-resize; touch-action: none; border-radius: 3px; }
.lt-split-divider::before { content: ""; width: 2px; background: var(--lt-border); border-radius: 1px; }
.lt-split-divider:hover::before, .lt-split-divider:focus-visible::before, .lt-split-dragging .lt-split-divider::before {
  width: 4px; background: var(--lt-accent); }
.lt-split-divider:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 1px; }
.lt-split-dragging { user-select: none; }
@media (max-width: 40rem) {
  .lt-split { grid-template-columns: minmax(0, 1fr); }
  .lt-split-divider { display: none; }
}

/* Load more */
.lt-load-more-items { padding-left: 1.2rem; }
.lt-load-more-items li[tabindex]:focus { outline: 2px solid var(--lt-accent); outline-offset: 2px; }
.lt-load-more-button { display: inline-block; padding: .3rem .8rem; border: 1px solid var(--lt-border); border-radius: 6px;
                       text-decoration: none; }
.lt-load-more-status { color: var(--lt-muted); font-size: .9rem; }

/* Filter builders */
.lt-filter { margin: .5rem 0; padding: .6rem; border: 1px solid var(--lt-border); border-radius: 6px; background: var(--lt-panel); }
.lt-filter-match { margin-bottom: .4rem; }
.lt-filter-conditions { margin: 0 0 .5rem; padding-left: 1.4rem; }
.lt-filter-conditions li { margin: .3rem 0; }
.lt-filter-conditions select, .lt-filter-conditions input { max-width: 100%; }

/* Virtual grids: one-line rows in a box that scrolls */
.lt-grid-virtual { --lt-grid-row: 2.4rem; overflow: auto; border: 1px solid var(--lt-border); border-radius: 6px;
                   max-height: calc(var(--lt-grid-visible) * var(--lt-grid-row) + 5rem); }
.lt-grid-virtual thead { position: sticky; top: 0; z-index: 1; }
.lt-grid-virtual thead th, .lt-grid-virtual thead td { background: var(--lt-bg); }
.lt-grid-virtual tbody tr { height: var(--lt-grid-row); }
.lt-grid-virtual tbody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.lt-grid-virtual tbody tr.lt-grid-editing { height: auto; }
.lt-grid-virtual tbody tr.lt-grid-editing td { white-space: normal; overflow: visible; }
.lt-table .lt-grid-spacer td { padding: 0; border: 0; }

/* Event calendars */
.lt-schedule { --lt-slot-h: 1.5rem; margin: .5rem 0; }
.lt-schedule-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.lt-schedule-head h3 { margin: 0; font-size: 1.05rem; }
.lt-schedule-head > a[aria-label] { text-decoration: none; font-size: 1.3rem; }
.lt-schedule-views { display: inline-flex; border: 1px solid var(--lt-border); border-radius: 6px; overflow: hidden; }
.lt-schedule-views a { padding: .15rem .6rem; text-decoration: none; }
.lt-schedule-views a[aria-current] { background: var(--lt-accent); color: var(--lt-bg); }
.lt-schedule-move { margin: .5rem 0; padding: .5rem .7rem; border: 1px solid var(--lt-accent); border-radius: 6px; background: var(--lt-panel); }
.lt-schedule-move p { margin: 0 0 .4rem; }
.lt-schedule-move .lt-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.lt-schedule-move .lt-buttons a { padding: .2rem .6rem; border: 1px solid var(--lt-border); border-radius: 6px;
                                  background: var(--lt-bg); text-decoration: none; }
.lt-schedule-scroll { overflow-x: auto; margin-top: .5rem; position: relative; }  /* contains the hidden day labels */
.lt-schedule-grid { display: grid; grid-template-columns: 3.2rem repeat(var(--lt-days), minmax(5.5rem, 1fr)); }
.lt-schedule-day-head { height: 2.2rem; margin: 0; font-size: .85rem; font-weight: 600; display: flex; align-items: center;
                        justify-content: center; border-bottom: 1px solid var(--lt-border); }
.lt-schedule-day.lt-today .lt-schedule-day-head { color: var(--lt-accent); }
.lt-schedule-slots { position: relative; height: calc(var(--lt-slots) * var(--lt-slot-h));
                     background-image: linear-gradient(to bottom, var(--lt-border) 1px, transparent 1px);
                     background-size: 100% calc(var(--lt-per-hour) * var(--lt-slot-h)); }
.lt-schedule-day .lt-schedule-slots { border-left: 1px solid var(--lt-border); }
.lt-schedule-hour { position: absolute; right: .3rem; top: calc(var(--lt-from) * var(--lt-slot-h)); font-size: .7rem; color: var(--lt-muted); }
.lt-schedule-events { list-style: none; margin: 0; padding: 0; }
.lt-schedule-event { position: absolute; top: calc(var(--lt-from) * var(--lt-slot-h)); height: calc(var(--lt-span) * var(--lt-slot-h) - 2px);
                     left: calc(100% * var(--lt-col) / var(--lt-cols) + 2px); width: calc(100% / var(--lt-cols) - 4px); }
.lt-schedule-event-link { display: block; height: 100%; overflow: hidden; box-sizing: border-box; padding: .1rem .3rem;
                          border-radius: 4px; border-left: 3px solid var(--lt-accent); background: var(--lt-panel);
                          color: var(--lt-fg); font-size: .75rem; line-height: 1.2; text-decoration: none; }
a.lt-schedule-event-link { cursor: grab; touch-action: none; user-select: none; }
.lt-schedule-time { color: var(--lt-muted); }
.lt-schedule-event.lt-selected .lt-schedule-event-link { outline: 2px solid var(--lt-accent); outline-offset: -1px; }
.lt-schedule-event.lt-dragging { opacity: .85; z-index: 2; }
.lt-schedule-event.lt-dragging .lt-schedule-event-link { cursor: grabbing; }
.lt-schedule-week .lt-schedule-grid { min-width: 44rem; }