/* ===================================================================== Trilite — application styles. Bootstrap 5.3 supplies the grid and components; this file carries the traffic-light semantics and the shell chrome. THREE THEMES, ONE SHEET. Every colour in the interface is a token. The default theme (Riverside Teal) is declared on :root; the alternates re-declare only what differs, under [data-theme="indigo"] and [data-theme="maroon"] on . Nothing else in the sheet, and nothing in any Blade view, names a colour — so a fourth theme is a dozen lines here and no change anywhere else. CHROME IS DARK, CONTENT IS LIGHT. The rail, the fly-outs and the top bar are the theme; the working area stays near-white in all three. That is what lets Green, Amber and Red be the only hues on a page of results. THE BANDS ARE NOT THEMED. Green, Amber and Red carry meaning, not style. They are declared once and never overridden, so a Red on one theme is the same Red on the other and a printed leaderboard is comparable across a theme change (FR-12.8). ===================================================================== */ /* ---- vendored typeface ------------------------------------------------ Self-hosted rather than loaded from Google Fonts: this app is deployed to cPanel behind client networks that may not reach a CDN, and a leaderboard that silently loses its typeface on an intranet is a support call. Plus Jakarta Sans, SIL Open Font License 1.1 — see fonts/LICENSE.txt. */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')} /* ---- theme 1: Riverside Teal (default) ------------------------------ */ :root{ /* chrome — the rail, the fly-outs and the top bar */ --tl-rail:#0B4A44; /* icon rail */ --tl-fly:#10635B; /* fly-out panel, one step lighter than the rail */ --tl-bar:#0F5D56; /* top bar */ --tl-chrome-ink:#EAF4F2; /* text and icons on chrome */ --tl-chrome-dim:#9CC4BE; /* secondary text and resting icons on chrome */ /* content */ --tl-bg:#F2F6F5; /* page ground */ --tl-card:#FFFFFF; /* every panel */ --tl-ink:#14231F; /* body text */ --tl-ink2:#5C6B67; /* secondary text, labels */ --tl-line:#E2EAE8; /* every border */ --tl-track:#EAF0EE; /* inset well: progress tracks, avatars, hover */ /* the accent. Amber as a FILL is the call to action; the theme's own hue is the accent as READABLE TEXT, which is what carries the theme into the content area without putting a fourth colour next to the bands. */ --tl-acc:#E8A33D; --tl-acc-ink:#2A1C06; --tl-acc-text:#0F5D56; --tl-soft:#E3EFEC; --tl-soft-ink:#0F5D56; --tl-nav-act:#E8A33D; /* active pill, wherever one is not on chrome */ --tl-nav-act-ink:#2A1C06; --tl-nav-act-soft:rgba(0,0,0,.13); --tl-focus:rgba(15,93,86,.24); /* ---- semantic bands. NEVER themed. -------------------------------- */ --tl-g:#3E7C4F; --tl-a:#B07818; --tl-r:#B0382F; --tl-g-bg:#E4F0E6; --tl-a-bg:#FAF0DC; --tl-r-bg:#F7E4E2; --tl-g-ink:#2F6340;--tl-a-ink:#7D5410;--tl-r-ink:#8D2B23; --tl-radius:20px; /* cards */ --tl-radius-sm:12px; /* chips, inputs, buttons */ --tl-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ---- theme 2: Regal Indigo ------------------------------------------ */ :root[data-theme="indigo"]{ --tl-rail:#2C2B72; --tl-fly:#3A3893; --tl-bar:#3F3D9E; --tl-chrome-ink:#EDEDF8; --tl-chrome-dim:#AEADDD; --tl-bg:#F3F4FA; --tl-card:#FFFFFF; --tl-ink:#1A1A2E; --tl-ink2:#5E6076; --tl-line:#E4E5F1; --tl-track:#ECEDF6; --tl-acc-text:#3F3D9E; --tl-soft:#E7E8F7; --tl-soft-ink:#3F3D9E; --tl-focus:rgba(63,61,158,.24); } /* ---- theme 3: Heritage Maroon ---------------------------------------- */ :root[data-theme="maroon"]{ --tl-rail:#5C1521; --tl-fly:#7A1E2C; --tl-bar:#7C1F2E; --tl-chrome-ink:#F7EBEC; --tl-chrome-dim:#D3A3A9; --tl-bg:#F8F4F3; --tl-card:#FFFFFF; --tl-ink:#241618; --tl-ink2:#6E5F60; --tl-line:#EDE3E2; --tl-track:#F1E9E8; --tl-acc-text:#7C1F2E; --tl-soft:#F5E7E5; --tl-soft-ink:#7C1F2E; --tl-focus:rgba(124,31,46,.24); } /* ---- base ------------------------------------------------------------ */ body{ background:var(--tl-bg); color:var(--tl-ink); font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; font-size:.9rem; -webkit-font-smoothing:antialiased; } a{color:var(--tl-acc-text)} a:hover{color:var(--tl-ink)} h1,h2,h3,h4,h5{letter-spacing:-.02em;font-weight:700} .text-muted,.form-text{color:var(--tl-ink2)!important} hr{border-color:var(--tl-line);opacity:1} /* ---- shell: icon rail with fly-outs ----------------------------------- 64px of icons; a module's screens appear on hover, and on keyboard focus, which is the part a hover-only menu usually forgets. The rail is dark in all three themes because it is chrome: keeping it out of the content's colour space is what lets the band tints be the only hues on a page of results. Pinning the rail open is held in the browser, not the database. It is a per-person, per-device habit, unlike the theme, which is one setting for the whole installation. */ .tl-shell{display:flex;min-height:100vh} .tl-rail{width:64px;flex-shrink:0;background:var(--tl-rail);display:flex;flex-direction:column; align-items:center;padding:0 0 14px;position:relative;z-index:1040;transition:width .16s ease} .tl-rail .tl-brand{height:58px;width:64px;flex-shrink:0;display:flex;align-items:center; justify-content:center;gap:10px;color:var(--tl-chrome-ink);text-decoration:none;font-weight:800; font-size:15.5px;letter-spacing:-.02em;overflow:hidden;white-space:nowrap;transition:width .16s ease} .tl-rail .tl-brand i{width:32px;height:32px;border-radius:9px;background:var(--tl-acc); color:var(--tl-acc-ink);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0} .tl-rail .tl-brand span{display:none} .tl-groups{display:flex;flex-direction:column;gap:2px;width:100%;align-items:center;padding-top:6px} .tl-grp{position:relative;width:100%;display:flex;flex-direction:column;align-items:center} .tl-grp>a{width:44px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center; gap:11px;text-decoration:none;color:var(--tl-chrome-dim);overflow:hidden;transition:background .12s,color .12s} .tl-grp>a>i{font-size:18px;line-height:1;flex-shrink:0} .tl-grp>a>span{display:none;font-size:13px;font-weight:600;white-space:nowrap} .tl-grp>a:hover,.tl-grp>a:focus-visible{background:rgba(255,255,255,.12);color:var(--tl-chrome-ink)} .tl-grp>a.active{background:var(--tl-acc);color:var(--tl-acc-ink)} /* the fly-out. ::before bridges the 6px gap so the pointer can cross it. */ .tl-fly{position:absolute;left:100%;top:-6px;margin-left:6px;width:230px;background:var(--tl-fly); border-radius:13px;padding:11px 9px 9px;box-shadow:0 18px 42px rgba(0,0,0,.34); opacity:0;visibility:hidden;transform:translateX(-7px);z-index:1060; transition:opacity .13s ease,transform .13s ease,visibility .13s} .tl-fly::before{content:'';position:absolute;left:-12px;top:0;width:14px;height:100%} .tl-grp:hover>.tl-fly,.tl-grp:focus-within>.tl-fly{opacity:1;visibility:visible;transform:none} .tl-fly-h{padding:2px 10px 9px;display:flex;flex-direction:column;gap:2px; font-size:12.5px;font-weight:700;color:var(--tl-chrome-ink)} .tl-fly-h em{font-size:11px;font-weight:500;font-style:normal;color:var(--tl-chrome-dim)} .tl-fly a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px; text-decoration:none;font-size:12.5px;color:var(--tl-chrome-dim);transition:background .1s,color .1s} .tl-fly a>i{font-size:14px;opacity:.85;flex-shrink:0} .tl-fly a:hover,.tl-fly a:focus-visible{background:rgba(255,255,255,.13);color:var(--tl-chrome-ink)} .tl-fly a.active{background:var(--tl-acc);color:var(--tl-acc-ink);font-weight:700} .tl-fly a.active:hover{background:var(--tl-acc);color:var(--tl-acc-ink)} .tl-fly a.is-soon{opacity:.45;cursor:not-allowed} .tl-fly a.is-soon:hover{background:transparent;color:var(--tl-chrome-dim)} .tl-fly .tl-soon{margin-left:auto;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700} /* pinned open. Set on by a head script before first paint, so the rail never flashes narrow then widens on every navigation. */ html.tl-pinned .tl-rail{width:216px;align-items:stretch;padding:0 10px 14px} html.tl-pinned .tl-rail .tl-brand{width:auto;justify-content:flex-start;padding-left:4px} html.tl-pinned .tl-rail .tl-brand span{display:inline} html.tl-pinned .tl-groups{align-items:stretch} html.tl-pinned .tl-grp{align-items:stretch} html.tl-pinned .tl-grp>a{width:100%;justify-content:flex-start;padding-left:11px} html.tl-pinned .tl-grp>a>span{display:block} /* ---- top bar ---------------------------------------------------------- */ .tl-main{flex:1;min-width:0;background:var(--tl-bg);display:flex;flex-direction:column;min-height:100vh} .tl-topbar{height:58px;flex-shrink:0;display:flex;align-items:center;gap:13px;padding:0 20px; background:var(--tl-bar);border-bottom:3px solid var(--tl-acc);color:var(--tl-chrome-ink)} .tl-burger{width:36px;height:36px;flex-shrink:0;border:0;border-radius:10px;background:transparent; color:var(--tl-chrome-ink);display:flex;align-items:center;justify-content:center; font-size:18px;cursor:pointer} .tl-burger:hover{background:rgba(255,255,255,.14)} html.tl-pinned .tl-burger{background:rgba(255,255,255,.17)} .tl-crumb{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:500; letter-spacing:0;text-transform:none;color:var(--tl-chrome-dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tl-crumb b,.tl-crumb strong{color:var(--tl-chrome-ink);font-weight:700} .tl-crumb a{color:var(--tl-chrome-dim);text-decoration:none} .tl-crumb a:hover{color:var(--tl-chrome-ink)} .tl-userchip{display:flex;align-items:center;gap:9px;height:40px;padding:0 10px 0 5px;border-radius:11px; background:rgba(255,255,255,.12);color:var(--tl-chrome-ink);text-decoration:none} .tl-userchip:hover,.tl-userchip:focus{background:rgba(255,255,255,.19);color:var(--tl-chrome-ink)} .tl-userchip .tl-avatar{width:30px;height:30px;border-radius:9px;background:var(--tl-acc); color:var(--tl-acc-ink);font-size:11.5px} .tl-userchip .u-w{display:flex;flex-direction:column;line-height:1.22;text-align:left} .tl-userchip .u-n{font-size:12.5px;font-weight:700} .tl-userchip .u-r{font-size:10.5px;color:var(--tl-chrome-dim)} .tl-userchip::after{border-top-color:var(--tl-chrome-dim)} .tl-content{padding:22px;flex-grow:1} /* the offcanvas is the rail, unrolled — same colours, same order, so the phone and the desktop are recognisably one product */ #tlNav{background:var(--tl-rail);color:var(--tl-chrome-ink);width:280px} #tlNav .offcanvas-title{font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:9px} #tlNav .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.13)} #tlNav .btn-close{filter:invert(1) grayscale(1) brightness(2.2)} #tlNav .offcanvas-body{padding:10px 12px!important} #tlNav a{display:flex;gap:10px;align-items:center;padding:9px 12px;margin-bottom:2px;font-size:13.5px; color:var(--tl-chrome-dim);text-decoration:none;border-radius:10px;font-weight:500;min-height:44px} #tlNav a:hover{background:rgba(255,255,255,.12);color:var(--tl-chrome-ink)} #tlNav a.active{background:var(--tl-acc);color:var(--tl-acc-ink);font-weight:700} #tlNav .tl-sec{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tl-chrome-dim); font-weight:700;padding:14px 12px 6px;opacity:.85} @media (max-width:767.98px){ .tl-rail{display:none} .tl-content{padding:14px} .tl-topbar{padding:0 12px;gap:9px} .tl-userchip .u-w{display:none} } /* ---- traffic-light semantics ----------------------------------------- */ .tl-band{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600; border:0;border-radius:12px;padding:3px 10px;white-space:nowrap} .tl-band .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .tl-band-G{background:var(--tl-g-bg);color:var(--tl-g-ink)} .tl-band-G .dot{background:var(--tl-g)} .tl-band-A{background:var(--tl-a-bg);color:var(--tl-a-ink)} .tl-band-A .dot{background:var(--tl-a)} .tl-band-R{background:var(--tl-r-bg);color:var(--tl-r-ink)} .tl-band-R .dot{background:var(--tl-r)} /* colour is never the only carrier: the letter travels with it, so the cell survives monochrome print and colour-blind readers (FR-12.8) */ .tl-cell-G{background:var(--tl-g-bg)!important;color:var(--tl-g-ink)!important} .tl-cell-A{background:var(--tl-a-bg)!important;color:var(--tl-a-ink)!important} .tl-cell-R{background:var(--tl-r-bg)!important;color:var(--tl-r-ink)!important} /* ---- cards, tables, forms -------------------------------------------- */ .tl-card{background:var(--tl-card);border:1px solid var(--tl-line);border-radius:var(--tl-radius)} .tl-card-h{padding:14px 20px;border-bottom:1px solid var(--tl-line);background:transparent; font-size:13px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--tl-ink); display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tl-card-b{padding:20px} .tl-table{width:100%;border-collapse:collapse;font-size:.85rem} .tl-table th{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tl-ink2); text-align:left;border-bottom:1px solid var(--tl-line);padding:9px 10px;white-space:nowrap;background:transparent} .tl-table td{border-bottom:1px solid var(--tl-line);padding:10px;vertical-align:middle} .tl-table tbody tr:nth-child(even) td{background:transparent} .tl-table tbody tr:hover td{background:var(--tl-track)} .tl-table td.num{text-align:center;font-weight:600;font-variant-numeric:tabular-nums} .tl-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tl-ink2); margin-bottom:5px;display:block} .tl-note{font-size:10.5px;color:var(--tl-ink2);text-transform:uppercase;letter-spacing:.07em;font-weight:500} .tl-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600; border:1px solid var(--tl-line);border-radius:12px;padding:3px 10px;color:var(--tl-ink2);background:var(--tl-card)} .tl-chip-acc{color:var(--tl-soft-ink);border-color:transparent;background:var(--tl-soft)} .tl-avatar{width:32px;height:32px;border-radius:50%;background:var(--tl-track);display:inline-flex; align-items:center;justify-content:center;color:var(--tl-ink2);flex-shrink:0;font-size:11px;font-weight:700} /* ---- Bootstrap, re-pointed at the tokens ------------------------------ Restyled here rather than in the views, so every Phase 1–6 screen picks up both themes without being edited. */ .btn{border-radius:var(--tl-radius-sm);font-size:.85rem;font-weight:600;padding:.44rem .95rem} .btn-sm{padding:.3rem .7rem;font-size:.78rem;border-radius:10px} .btn-lg{padding:.6rem 1.3rem;font-size:.95rem} .btn-tl,.btn-primary{background:var(--tl-acc);border-color:var(--tl-acc);color:var(--tl-acc-ink)} .btn-tl:hover,.btn-tl:focus,.btn-primary:hover,.btn-primary:focus{ background:var(--tl-acc);border-color:var(--tl-acc);color:var(--tl-acc-ink);filter:brightness(.94)} .btn-outline-secondary,.btn-outline-primary,.btn-outline-dark{ background:var(--tl-card);border-color:var(--tl-line);color:var(--tl-ink)} .btn-outline-secondary:hover,.btn-outline-primary:hover,.btn-outline-dark:hover{ background:var(--tl-track);border-color:var(--tl-line);color:var(--tl-ink)} .btn-secondary{background:var(--tl-soft);border-color:transparent;color:var(--tl-soft-ink)} .btn-secondary:hover{background:var(--tl-soft);border-color:transparent;color:var(--tl-soft-ink);filter:brightness(.96)} .btn-link{color:var(--tl-acc-text)} .btn-danger{background:var(--tl-r);border-color:var(--tl-r);color:#fff} .btn-danger:hover{background:var(--tl-r-ink);border-color:var(--tl-r-ink);color:#fff} .btn-success{background:var(--tl-g);border-color:var(--tl-g);color:#fff} .btn-success:hover{background:var(--tl-g-ink);border-color:var(--tl-g-ink);color:#fff} .btn:disabled,.btn.disabled{opacity:.5} .form-control,.form-select{border-radius:var(--tl-radius-sm);border-color:var(--tl-line); background:var(--tl-card);color:var(--tl-ink);font-size:.875rem;padding:.42rem .7rem} .form-control::placeholder{color:var(--tl-ink2);opacity:.75} .form-control:focus,.form-select:focus{border-color:var(--tl-acc-text);box-shadow:0 0 0 .2rem var(--tl-focus)} .form-control:disabled,.form-control[readonly]{background:var(--tl-track)} .form-check-input:checked{background-color:var(--tl-acc-text);border-color:var(--tl-acc-text)} .form-check-input:focus{border-color:var(--tl-acc-text);box-shadow:0 0 0 .2rem var(--tl-focus)} .input-group-text{background:var(--tl-track);border-color:var(--tl-line);color:var(--tl-ink2); border-radius:var(--tl-radius-sm);font-size:.82rem} .card{background:var(--tl-card);border-color:var(--tl-line);border-radius:var(--tl-radius)} .card-header{background:transparent;border-color:var(--tl-line);font-weight:700} .table{--bs-table-bg:transparent;--bs-table-color:var(--tl-ink);border-color:var(--tl-line)} .table>:not(caption)>*>*{border-color:var(--tl-line)} .dropdown-menu{border-color:var(--tl-line);border-radius:var(--tl-radius-sm); box-shadow:0 8px 28px rgba(0,0,0,.09);padding:6px;background:var(--tl-card)} .dropdown-item{border-radius:9px;font-size:.85rem;padding:.42rem .7rem;color:var(--tl-ink)} .dropdown-item:hover,.dropdown-item:focus{background:var(--tl-track);color:var(--tl-ink)} .nav-tabs{border-color:var(--tl-line)} .nav-tabs .nav-link{color:var(--tl-ink2);border:0;border-radius:var(--tl-radius-sm);font-weight:600;font-size:.85rem} .nav-tabs .nav-link.active{background:var(--tl-soft);color:var(--tl-soft-ink);border:0} .badge{border-radius:10px;font-weight:600} .alert{border-radius:var(--tl-radius-sm);border:1px solid var(--tl-line);font-size:.86rem} .alert-success{background:var(--tl-g-bg);color:var(--tl-g-ink);border-color:transparent} .alert-warning{background:var(--tl-a-bg);color:var(--tl-a-ink);border-color:transparent} .alert-danger{background:var(--tl-r-bg);color:var(--tl-r-ink);border-color:transparent} .alert-info,.alert-secondary{background:var(--tl-soft);color:var(--tl-soft-ink);border-color:transparent} .progress{background:var(--tl-track);border-radius:99px} .progress-bar{background:var(--tl-acc)} .modal-content{border-radius:var(--tl-radius);border-color:var(--tl-line);background:var(--tl-card)} .modal-header,.modal-footer{border-color:var(--tl-line)} .pagination .page-link{color:var(--tl-ink);border-color:var(--tl-line);background:var(--tl-card);font-size:.83rem} .pagination .active .page-link{background:var(--tl-nav-act);border-color:var(--tl-nav-act);color:var(--tl-nav-act-ink)} .list-group-item{background:var(--tl-card);border-color:var(--tl-line);color:var(--tl-ink)} .bg-light{background:var(--tl-track)!important} .bg-white{background:var(--tl-card)!important} .border{border-color:var(--tl-line)!important} .border-top,.border-bottom,.border-start,.border-end{border-color:var(--tl-line)!important} .text-body{color:var(--tl-ink)!important} .text-secondary{color:var(--tl-ink2)!important} /* text-primary is the accent used as INK, so it takes the readable form of the accent rather than the fill: on the Sand theme the fill is a yellow that cannot carry text at all. */ .text-primary{color:var(--tl-acc-text)!important} .text-dark{color:var(--tl-ink)!important} .text-muted{color:var(--tl-ink2)!important} .bg-secondary{background:var(--tl-soft)!important;color:var(--tl-soft-ink)!important} .bg-primary{background:var(--tl-acc)!important;color:var(--tl-acc-ink)!important} .bg-dark,.text-bg-dark{background:var(--tl-nav-act)!important;color:var(--tl-nav-act-ink)!important} .text-success{color:var(--tl-g-ink)!important} .text-warning{color:var(--tl-a-ink)!important} .text-danger{color:var(--tl-r-ink)!important} .form-switch .form-check-input:checked{background-color:var(--tl-acc-text);border-color:var(--tl-acc-text)} /* ---- auth -------------------------------------------------------------- */ .tl-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--tl-bg)} .tl-auth-card{max-width:880px;width:100%;background:var(--tl-card);border:1px solid var(--tl-line); border-radius:var(--tl-radius);overflow:hidden;display:flex} .tl-auth-brand{flex:1.05;background:var(--tl-rail);color:var(--tl-chrome-ink);padding:38px; display:flex;flex-direction:column;justify-content:center;gap:12px} .tl-auth-form{flex:1;padding:34px 38px} @media (max-width:767.98px){ .tl-auth-card{flex-direction:column} .tl-auth-brand{padding:26px} .tl-auth-form{padding:26px} } /* ---- what-if distribution bar (S19) ------------------------------------ */ .tl-band-bar{display:flex;height:1.6rem;border-radius:99px;overflow:hidden;border:1px solid var(--tl-line)} .tl-band-seg{transition:flex-grow .15s ease;min-width:0} .tl-seg-G{background:var(--tl-g)} .tl-seg-A{background:var(--tl-a)} .tl-seg-R{background:var(--tl-r)} .tl-method-panel[hidden]{display:none} .tl-scope-banner{border-left:4px solid var(--tl-acc-text);background:var(--tl-soft); color:var(--tl-soft-ink);border-radius:var(--tl-radius-sm)} /* ---- data capture (Phase 4) -------------------------------------------- */ .tl-drop{border:2px dashed var(--tl-line);border-radius:var(--tl-radius-sm);background:var(--tl-track); transition:border-color .15s,background .15s} .tl-drop.is-over{border-color:var(--tl-acc-text);background:var(--tl-soft)} .tl-grid .tl-gcell{padding:.25rem .3rem} .tl-grid .tl-cell{min-width:4.2rem;max-width:6rem} .tl-cell.is-dirty{border-color:var(--tl-a);background:var(--tl-a-bg)} .tl-cell.is-saved{border-color:var(--tl-g);background:var(--tl-g-bg)} .tl-cell.is-error{border-color:var(--tl-r);background:var(--tl-r-bg)} .tl-cell:focus{outline:2px solid var(--tl-acc-text);outline-offset:-1px} .tl-rowstate{white-space:nowrap} .tl-grid .tl-stick{position:sticky;left:0;z-index:2;background:var(--tl-card);min-width:12rem; box-shadow:1px 0 0 var(--tl-line)} .tl-grid thead .tl-stick{background:var(--tl-bg)} .tl-grid .tl-sub{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto} .tl-otp{width:46px;text-align:center;font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums} .tl-slab-no{width:2rem} .tl-slab-del{width:2.4rem} /* ===================================================================== Phase 7 — Leaderboard & Analytics (S04 → S07) ===================================================================== */ /* ---- the leaderboard table (S04) --------------------------------------- Rank and participant stay put while the component columns scroll, so a coloured cell twelve columns across still belongs to a visible person (FR-9.4). Two sticky columns, so the left offset of the second is the measured width of the first. */ .tl-lb-wrap{overflow:auto;border-radius:var(--tl-radius);background:var(--tl-card); border:1px solid var(--tl-line);max-height:calc(100vh - 250px)} .tl-lb{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem} .tl-lb th,.tl-lb td{padding:9px 10px;white-space:nowrap;border-bottom:1px solid var(--tl-line); background:var(--tl-card)} .tl-lb thead th{position:sticky;top:0;z-index:3;font-size:9.5px;font-weight:600;text-transform:uppercase; letter-spacing:.08em;color:var(--tl-ink2);background:var(--tl-bg);border-bottom:1px solid var(--tl-line)} .tl-lb thead th a{color:var(--tl-ink2);text-decoration:none;display:inline-flex;align-items:center;gap:4px} .tl-lb thead th a:hover{color:var(--tl-ink)} .tl-lb thead th.is-sorted a{color:var(--tl-acc-text);font-weight:700} .tl-lb .c-rank{position:sticky;left:0;z-index:2;width:52px;text-align:center;font-weight:700; font-variant-numeric:tabular-nums} .tl-lb .c-who{position:sticky;left:52px;z-index:2;min-width:230px; box-shadow:1px 0 0 var(--tl-line)} .tl-lb thead .c-rank,.tl-lb thead .c-who{z-index:4;background:var(--tl-bg)} .tl-lb tbody tr:hover td{background:var(--tl-track)} .tl-lb tbody tr:hover .c-rank,.tl-lb tbody tr:hover .c-who{background:var(--tl-track)} .tl-lb tbody tr.is-me td,.tl-lb tbody tr.is-me .c-rank,.tl-lb tbody tr.is-me .c-who{background:var(--tl-soft)} .tl-lb td.comp{text-align:center;font-variant-numeric:tabular-nums;font-weight:600; border-radius:8px;padding:7px 10px} .tl-lb td.total{text-align:right;font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums} .tl-lb .who-name{font-size:13.5px;font-weight:600;display:block;line-height:1.25} .tl-lb .who-sub{font-size:11px;color:var(--tl-ink2);display:block} .tl-lb tr.is-unranked td{opacity:.85} .tl-lb tr.is-unranked .c-rank{color:var(--tl-ink2);font-weight:500} /* movement. Up is Green, down is Red — the only place outside a band where those two colours appear, and they mean the same thing there. */ .tl-mv{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .tl-mv-up{color:var(--tl-g-ink)} .tl-mv-dn{color:var(--tl-r-ink)} .tl-mv-lv{color:var(--tl-ink2)} /* ---- the stat strip ----------------------------------------------------- */ .tl-stats{display:flex;gap:34px;align-items:flex-end;flex-wrap:wrap} .tl-stat-n{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .tl-stat-l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tl-ink2); margin-top:6px;font-weight:600} .tl-h1{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0} .tl-sub{font-size:13px;color:var(--tl-ink2);margin-top:6px} /* the capsule stat from the approved boards */ .tl-pill{display:inline-flex;align-items:center;gap:9px} .tl-pill-l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tl-ink2);font-weight:600} .tl-pill-t{width:132px;height:30px;border-radius:15px;background:var(--tl-track);display:flex;align-items:center} .tl-pill-f{height:30px;border-radius:15px;display:flex;align-items:center;justify-content:flex-end; padding-right:11px;box-sizing:border-box;min-width:48px;font-size:12px;font-weight:700; font-variant-numeric:tabular-nums} /* ---- distribution (S05) -------------------------------------------------- */ .tl-dist{display:flex;height:44px;border-radius:14px;overflow:hidden} .tl-dist span{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:700; min-width:0;overflow:hidden;white-space:nowrap} .tl-dist .d-G{background:var(--tl-g-bg);color:var(--tl-g-ink)} .tl-dist .d-A{background:var(--tl-a-bg);color:var(--tl-a-ink)} .tl-dist .d-R{background:var(--tl-r-bg);color:var(--tl-r-ink)} /* the small in-row version, on the group table */ .tl-dist-mini{display:flex;height:9px;border-radius:5px;overflow:hidden;min-width:90px;background:var(--tl-track)} .tl-dist-mini .d-G{background:var(--tl-g)} .tl-dist-mini .d-A{background:var(--tl-a)} .tl-dist-mini .d-R{background:var(--tl-r)} /* the score spread: one bar per ranked person, coloured by its own band */ .tl-spread{display:flex;align-items:flex-end;gap:5px;height:150px} .tl-spread .b{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0} .tl-spread .b i{display:block;width:100%;border-radius:4px 4px 0 0} .tl-spread .b em{font-size:10px;font-weight:700;font-style:normal;color:var(--tl-ink2); font-variant-numeric:tabular-nums} .tl-spread .bar-G{background:var(--tl-g)} .tl-spread .bar-A{background:var(--tl-a)} .tl-spread .bar-R{background:var(--tl-r)} /* cycle-over-cycle: one stacked column per published cycle */ .tl-cycles{display:flex;gap:16px;align-items:flex-end;height:180px} .tl-cycles .col{flex:1 1 0;display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0} .tl-cycles .stack{display:flex;flex-direction:column-reverse;border-radius:8px;overflow:hidden} .tl-cycles .stack i{display:block} .tl-cycles .lab{font-size:10px;text-align:center;color:var(--tl-ink2);font-weight:600; letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- watchlists (S06) ---------------------------------------------------- */ .tl-wl-tabs{display:flex;gap:6px;flex-wrap:wrap} .tl-wl-tabs a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:19px; font-size:13px;font-weight:600;text-decoration:none;color:var(--tl-ink2);background:var(--tl-card); border:1px solid var(--tl-line)} .tl-wl-tabs a:hover{background:var(--tl-track);color:var(--tl-ink)} .tl-wl-tabs a.active{background:var(--tl-nav-act);color:var(--tl-nav-act-ink);border-color:transparent} .tl-wl-tabs .n{font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px; background:var(--tl-track);color:var(--tl-ink2)} .tl-wl-tabs a.active .n{background:var(--tl-nav-act-soft);color:var(--tl-nav-act-ink)} /* the sparkline: one bar per published cycle, coloured by that cycle's band */ .tl-spark{display:inline-flex;align-items:flex-end;gap:3px;height:28px} .tl-spark i{display:block;width:8px;border-radius:2px} .tl-spark .s-G{background:var(--tl-g)} .tl-spark .s-A{background:var(--tl-a)} .tl-spark .s-R{background:var(--tl-r)} .tl-gap{font-size:11.5px;font-weight:600;color:var(--tl-acc-text)} .tl-empty{padding:40px 20px;text-align:center;color:var(--tl-ink2);font-size:13px} .tl-empty i{font-size:26px;display:block;margin-bottom:10px;opacity:.5} /* ---- archive (S07) -------------------------------------------------------- */ .tl-archive-banner{border-radius:var(--tl-radius);background:var(--tl-soft);color:var(--tl-soft-ink); padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px} .tl-archive-banner strong{font-weight:700} .tl-status{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:9px} .tl-status-current{background:var(--tl-g-bg);color:var(--tl-g-ink)} .tl-status-revised{background:var(--tl-a-bg);color:var(--tl-a-ink)} .tl-status-archived{background:var(--tl-track);color:var(--tl-ink2)} .tl-status-superseded{background:var(--tl-track);color:var(--tl-ink2);text-decoration:line-through} .tl-status-failed{background:var(--tl-r-bg);color:var(--tl-r-ink)} /* ---- print ---------------------------------------------------------------- A leaderboard is circulated on paper. The band tints must survive the printer's default "no background graphics", so they are forced. */ @media print{ .tl-rail,.tl-topbar,.tl-wl-tabs,.tl-filters,.no-print{display:none!important} body{background:#fff} .tl-lb-wrap{max-height:none;overflow:visible;border:0} .tl-lb .c-rank,.tl-lb .c-who,.tl-lb thead th{position:static} .tl-card{break-inside:avoid} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* ===================================================================== Phase 9 — overrides (S26, S27) ===================================================================== */ /* The indicator. Deliberately not tinted in a band colour: it is a statement ABOUT two bands, and painting it as one of them would make the page argue with itself. It takes the accent tint, like every other piece of chrome that is neither Green, Amber nor Red. */ .tl-override{display:flex;gap:14px;align-items:flex-start;padding:15px 20px;margin-bottom:14px; border-radius:var(--tl-radius);background:var(--tl-soft);color:var(--tl-soft-ink); border-left:4px solid var(--tl-acc-text)} .tl-override>i{font-size:19px;line-height:1.2;flex-shrink:0} /* A person's name in small caps reads as a label rather than a name, and the whole point of this line is that a human being signed for the change. */ .tl-override .tl-note{color:var(--tl-soft-ink);opacity:.85; text-transform:none;letter-spacing:0;font-size:11.5px} .tl-override-pending{align-items:center} /* On a table row there is no space for any of that, so the mark is a glyph with a title, and the band pill beside it carries the published band. The computed one is in the title text, because a row is scanned rather than read — the person who wants the detail clicks through to the scorecard. */ .tl-ov-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; border-radius:9px;background:var(--tl-acc);color:var(--tl-acc-ink);font-size:10px; margin-left:6px;flex-shrink:0;cursor:help}