/* Catto Learning v0.5.8 core platform CSS.
   Generated by: Claude Code CLI. Date time: 2026/08/31 19:05 SAST.
   Functional visibility and interaction rules belong to the LMS, never to a theme.
   The file is minified and validate-ui-contracts.php asserts literal byte substrings inside its
   lines, so a new control is appended as its own block rather than edited into an existing one.
   Changelog:
2026/08/31 19:05 SAST
- Round: shared search button moved into noscript, server-search marker on every results region, Course Library rebuilt as paginated accordions, Reports paginated and searched, company requests as a table, company dashboard Courses figure.

   2026/08/25 14:29 SAST

   - Stage D: appended the company-context control block as its own commented section.
     2026/08/23 04:19 SAST - Added the genuine-administrator data-universe control.
     2026/08/21 11:04 SAST - Added the shared pagination control and bounded entity lookups. */
.cl-options{margin-left:0!important;display:grid;gap:.65rem}.cl-option{display:grid!important;grid-template-columns:1.25rem minmax(0,1fr);align-items:start!important;justify-content:start!important;gap:.7rem;width:100%;text-align:left!important}.cl-option input[type="radio"]{width:1rem!important;height:1rem!important;min-width:1rem;max-width:1rem;margin:.28rem 0 0!important;padding:0!important;justify-self:start}.cl-option>span{display:block;min-width:0;text-align:left!important}
.tab-panel{display:none}.tab-panel.active{display:block}.cl-admin-workspace{display:grid;gap:1rem}.cl-admin-section{display:block;border:1px solid var(--cl-border,#dfe4ea);border-radius:12px;background:var(--cl-page-surface,#fff);overflow:clip}.cl-admin-section-summary{display:grid;grid-template-columns:minmax(10rem,.8fr) minmax(12rem,1.4fr) auto;align-items:center;gap:1rem;padding:1rem 1.1rem;cursor:pointer;list-style:none}.cl-admin-section-summary::-webkit-details-marker{display:none}.cl-admin-section-title{font-weight:800}.cl-admin-section-description{font-size:.875rem;opacity:.72}.cl-admin-section-toggle{justify-self:end}.cl-admin-section-actions{display:flex;justify-content:flex-end;margin-bottom:.75rem}.cl-admin-section-link{white-space:nowrap}.cl-admin-section-content{padding:1rem 1.1rem 1.25rem;border-top:1px solid var(--cl-border,#dfe4ea)}@media(max-width:760px){.cl-admin-section-summary{grid-template-columns:1fr;gap:.35rem}.cl-admin-section-link{justify-self:start}}.modal-backdrop,.modal-backdrop[hidden],.modal-backdrop[aria-hidden="true"]{display:none!important}.modal-backdrop.open:not([hidden]){display:flex!important;overflow:auto;overscroll-behavior:contain}.modal-card{max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain}body.modal-open{overflow:hidden}
.account-menu,.rl-account-menu{position:relative}.account-menu>summary,.rl-account-menu>summary{list-style:none;cursor:pointer}.account-menu>summary::-webkit-details-marker,.rl-account-menu>summary::-webkit-details-marker{display:none}.account-menu-panel,.rl-account-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:1040;min-width:190px;padding:7px;background:#fff;border:1px solid var(--cl-border,var(--line,#dfe4ea));border-radius:10px;box-shadow:0 14px 38px rgba(23,33,43,.16);display:grid}.account-menu-panel a,.rl-account-panel a{padding:9px 11px;border-radius:7px;color:var(--ink,#18212b);font-weight:700;white-space:nowrap}.account-menu-panel a:hover,.rl-account-panel a:hover{background:color-mix(in srgb,var(--cl-accent,#274b63) 10%,white);color:var(--cl-darkest,var(--primary,#274b63))}
.cl-password-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.cl-password-control input{min-width:0}.cl-password-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-height:42px}.cl-password-toggle svg{width:18px;height:18px;fill:currentColor;display:block}.cl-password-toggle:disabled{opacity:.55;cursor:wait}
.cl-palette-switcher{position:fixed;right:18px;bottom:18px;z-index:1100;width:min(310px,calc(100vw - 36px));padding:12px;border:1px solid var(--cl-border,#dfe4ea);border-radius:14px;background:#fff;color:#18212b;box-shadow:0 18px 48px rgba(15,23,42,.20)}.cl-palette-switcher[hidden]{display:none!important}.cl-palette-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.cl-palette-head strong{font-size:.84rem}.cl-palette-hide,.cl-palette-show{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:8px;padding:6px 9px;font:inherit;font-weight:700}.cl-palette-show{position:fixed;right:18px;bottom:18px;z-index:1100;box-shadow:0 8px 24px rgba(15,23,42,.14)}.cl-palette-show[hidden]{display:none!important}.cl-palette-options{display:grid;gap:6px;max-height:min(52vh,430px);overflow:auto;padding-right:2px}.cl-palette-option{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;border:1px solid #dbe2ea;border-radius:9px;padding:8px 9px;background:#fff;color:#18212b;text-align:left;font:inherit}.cl-palette-option.active{border-color:var(--cl-accent,#64748b);box-shadow:inset 3px 0 var(--cl-accent,#64748b)}.cl-palette-name{font-size:.78rem;font-weight:800}.cl-palette-swatches{display:flex}.cl-palette-swatch{width:17px;height:17px;border:1px solid rgba(0,0,0,.13)}.cl-palette-swatch:first-child{border-radius:5px 0 0 5px}.cl-palette-swatch:last-child{border-radius:0 5px 5px 0}

/* v0.5.7.5.1 scalable administration/account workspace layout primitives. */
.activity-filters{width:100%;max-width:none!important}.activity-filters .form-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));width:100%}.pagination-row{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}.acl-groups{display:grid;gap:.75rem}.acl-group{min-width:0;border:1px solid var(--cl-border,#dfe4ea);border-radius:10px;background:var(--cl-page-surface,#fff);overflow:hidden}.acl-group-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;cursor:pointer;list-style:none;font-weight:800}.acl-group-summary::-webkit-details-marker{display:none}.acl-group-summary::after{content:"⌄";font-size:1rem;line-height:1;transition:transform .15s ease}.acl-group[open]>.acl-group-summary::after{transform:rotate(180deg)}.acl-group-content{padding:0 1rem 1rem;border-top:1px solid var(--cl-border,#dfe4ea)}.acl-table-wrap{margin-top:1rem}.acl-permission-table{width:100%;min-width:760px}.acl-permission-table th,.acl-permission-table td{vertical-align:top}.acl-permission-table .acl-permission-check{width:5rem;text-align:center}.acl-permission-table input[type="checkbox"]{width:1rem;height:1rem;margin:.15rem 0 0}.acl-permission-table code{white-space:nowrap}.cl-account-workspace,.cl-company-workspace{display:grid;gap:1rem}.table-wrap{overflow-x:auto}.table-wrap table{min-width:720px}


/* Contact anti-bot honeypot is core-owned functional markup. It must remain
   available to automated form fillers while being invisible/non-interactive
   to human visitors regardless of the active theme. */
.cl-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
/* v0.5.7.6 pagination controls and bounded entity lookups.
   Functional layout only: themes supply colour and typography through the ordinary
   platform button/form classes, so neither control needs theme-specific CSS. */
.pagination-row{margin-top:1rem;justify-content:space-between}.pagination-summary{display:flex;flex-direction:column;gap:.15rem;font-size:.9rem}.pagination-pages{opacity:.75}.pagination-controls{display:flex;align-items:center;gap:.5rem}.pagination-page-size{display:flex;align-items:center;gap:.5rem;margin:0}.pagination-page-size label{margin:0;font-size:.9rem;white-space:nowrap}.pagination-page-size select{width:auto;min-width:5rem}.pagination-row .is-disabled{opacity:.45;pointer-events:none}
.entity-lookup{position:relative}.lookup-search{width:100%}.lookup-selected{margin:.25rem 0 .5rem}.lookup-results-panel{margin-top:.35rem}.lookup-results{list-style:none;margin:0;padding:0;max-height:16rem;overflow-y:auto;border:1px solid var(--cl-border,#dfe4ea);border-radius:8px}.lookup-results:empty{border:0}.lookup-results li+li{border-top:1px solid var(--cl-border,#dfe4ea)}.lookup-result{display:flex;flex-direction:column;gap:.1rem;width:100%;padding:.5rem .75rem;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit}.lookup-result:hover,.lookup-result:focus-visible{background:rgba(127,127,127,.14)}.lookup-result-detail{font-size:.85rem;opacity:.7}.lookup-hint{margin:.25rem 0 0;font-size:.85rem}
@media (max-width:640px){.pagination-row{flex-direction:column;align-items:stretch}.pagination-controls,.pagination-page-size{justify-content:space-between}}

/* v0.5.8 genuine-administrator data-universe control.
   Core-owned functional markup: the selector must remain usable and legible under every
   compliant theme, including one that has never heard of it, so the active state is drawn
   here rather than left to a theme to supply. No JavaScript: these are ordinary links. */
.universe-switch{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin:0 0 1rem;padding:.6rem .85rem;border:1px solid var(--cl-border,#dfe4ea);border-radius:10px;background:var(--cl-page-surface,#fff)}.universe-switch-summary{margin:0;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-size:.9rem}.universe-switch-noun{font-weight:600}.universe-switch-split{opacity:.75}.universe-switch-links{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.universe-switch-legend{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin-right:.15rem}.universe-switch-link{display:inline-block;padding:.3rem .7rem;border:1px solid var(--cl-border,#dfe4ea);border-radius:999px;font-size:.85rem;line-height:1.4;text-decoration:none;color:inherit;background:transparent}.universe-switch-link:hover{border-color:currentColor}.universe-switch-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}.universe-switch-link.active{font-weight:700;border-color:currentColor;background:var(--cl-page-muted,rgba(0,0,0,.07))}
@media (max-width:640px){.universe-switch{flex-direction:column;align-items:stretch}.universe-switch-links{justify-content:space-between}}
/* Company context switcher (v0.5.8.3 Stage D). Core-owned, complete on its own: Gilded Noir has no .company-context rules, so this must not depend on a theme. */
.company-context{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;padding:.85rem 1rem;margin:0 0 1rem;border:1px solid var(--cl-border,#dfe4ea);border-radius:10px;background:var(--cl-page-muted,rgba(0,0,0,.03))}
.company-context-current{display:flex;flex-direction:column;gap:.15rem;min-width:14rem;flex:1 1 14rem}
.company-context-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.company-context-name{font-size:1.02rem;line-height:1.3}
.company-context-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;flex:2 1 22rem;margin:0}
.company-context-form .entity-lookup{flex:1 1 16rem;margin:0}
.company-context-reset{margin:0}
@media (max-width:640px){.company-context{flex-direction:column;align-items:stretch}.company-context-form{flex-direction:column;align-items:stretch}}
/* Company context banner actions, the Switch Company picker and the shared dataset search bar.
   Appended as its own block: this file is minified and validate-ui-contracts.php matches literal
   byte substrings inside lines, so an existing line must not be re-wrapped to add a rule. */
.company-context-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-left:auto}
.company-context-current{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.modal-card-wide{max-width:60rem;width:100%}
.company-picker-results{margin-top:.75rem}
.company-picker-results .table-wrap{max-height:26rem;overflow-y:auto}
.company-picker-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0}
.company-picker-search label{display:block;width:100%}
.company-picker-search input[type=search]{flex:1 1 18rem;min-width:0}
.dataset-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem}
.dataset-search .field{flex:1 1 20rem;min-width:0;margin:0}
.dataset-search input[type=search]{width:100%}
.dataset-search-actions{display:flex;gap:.5rem;align-items:center}
.dataset-search .help{flex:1 1 100%;margin:.25rem 0 0}
@media (max-width:640px){.dataset-search,.company-picker-search{flex-direction:column;align-items:stretch}.company-context-actions{margin-left:0}}
/* Live dataset search: the status text is the loading indicator. htmx toggles the request class
   on the form, so the message is hidden except while a search is actually in flight. Appended as
   its own block because this file is minified and the UI validator matches literal substrings. */
.dataset-search-status{opacity:0;transition:opacity .15s ease;font-size:.85rem;white-space:nowrap}
.dataset-search.htmx-request .dataset-search-status{opacity:1}
.dataset-search .field{position:relative}
[id$="-region"]{position:relative}
[id$="-region"].htmx-swapping{opacity:.55;transition:opacity .1s ease}
/* Consolidated workspace sections load their table when first opened, so each one arrives fully
   paginated and searchable instead of as a preview that could not be paged. */
.cl-admin-section-loading{opacity:.7}
.cl-admin-section-lazy.htmx-request .cl-admin-section-loading{opacity:1}
/* Navigation icons come from the platform sprite, so core supplies a baseline size. An inline SVG
   with no dimensions renders at 300x150; every theme's own icon class still overrides these. */
.nav-icon{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.15em}
.nav-icon use{pointer-events:none}
/* Metric strip. Core owns the layout because the number of figures on a dashboard changes with
   the LMS, not with the theme: the Company dashboard went from four figures to five and no theme
   defines a five-column grid, so a fixed grid-N class would have broken every skin. Auto-fit lets
   any count lay out sensibly. Card styling stays the theme's. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}