/* ============================================================ NEO UI — black & white only. No header, no footer. Splash: black bg, yellow Bugonia logo (Kabisat), every load. ============================================================ */ @font-face{ font-family:'Kabisat'; src:url('/fonts/kabisat-demo.italic-tall.ttf') format('truetype'); font-weight:normal;font-style:normal;font-display:swap; } :root{ --bg:#0a0a0a; --fg:#e7e7e7; --p1:#0f0f0f; --p2:#141414; --p3:#1a1a1a; --line:#181818; --line2:#333; --dim:#4e4e4e; --muted:#8f8f8f; --hover:#101010; --yellow:#e7e7e7; --up:#e7e7e7; /* tile transparency: fixed 25% background paint over the wallpaper */ --tile-op:25; /* detail cards: 78% opaque + darker than the theme bg — solid enough to read over any wallpaper, dark enough to sit apart from console tiles. color-mix var(--bg) 78% + black 22%; light theme mixes toward black instead so cards still read darker than its white bg. */ --card:color-mix(in srgb,var(--bg) 78%,#000 22%); /* family accents: value color + label color + tinted box background */ --c-teal:#4fa89b; --c-teal-dim:#5c5c5c; --c-amber:#b39455; --c-amber-dim:#8a6d2b; --c-magenta:#b06f8e; --c-magenta-dim:#8a5c6d; --c-blue:#7290c9; --c-blue-dim:#5c6d8a; --c-green:#5fae7d; --c-red:#c9776e; --c-red-dim:#8a5c5c; /* Category colors: Jobs (blue-green), People (warm), System (cool), Settings (neutral) */ --gA:#0c0c0c; /* Job counters - teal tint */ --gB:#0e0e0e; /* Scanning/monitoring - amber tint */ --gC:#0c0c0c; /* People & data - magenta tint */ --gD:#0e0e0e; /* System - blue tint */ --gE:#0a0a0a; /* Settings splits - neutral */ /* Motion: one scale, one vocabulary for the whole app. Durations sit on the ~150ms responsiveness baseline and grow one step per distance travelled. Every curve decelerates — no bounce, no elastic, they read as toys. Movement is transform/opacity only, never layout. */ --t1:.12s; /* press, tactile feedback */ --t2:.2s; /* hover, focus, small state */ --t3:.34s; /* tab panes, cards, menus */ --t4:.5s; /* page content, coverflow travel */ --t5:.62s; /* splash beat */ --ease:cubic-bezier(.22,1,.36,1); /* house curve: quick out, long settle */ --ease-soft:cubic-bezier(.4,0,.2,1); /* symmetric, for state swaps */ --mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace; } html[data-theme="light"]{ --bg:#fff; --fg:#000; --p1:#f5f5f5; --p2:#ececec; --p3:#e2e2e2; --line:#e4e4e4; --line2:#bdbdbd; --dim:#8a8a8a; --muted:#5f5f5f; --hover:#f2f2f2; --card:#f7f7f7; --c-teal:#5a8a84; --c-teal-dim:#5c8a85; --c-amber:#997443; --c-amber-dim:#8a6d2b; --c-magenta:#9c5f7a; --c-magenta-dim:#8a5c6d; --c-blue:#5f7ab8; --c-blue-dim:#5c6d8a; --c-green:#4f8a63; --c-red:#b05c52; --c-red-dim:#8a5c5c; --gA:#f4f7f7; /* Job counters - teal tint */ --gB:#f7f5f0; /* Scanning/monitoring - amber tint */ --gC:#f7f4f7; /* People & data - magenta tint */ --gD:#f3f5f8; /* System - blue tint */ --gE:#f6f6f6; /* Settings splits - neutral */ } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--bg); color:var(--fg); font:12px/1.45 var(--mono); overflow:hidden; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input,textarea,select{ font:12px var(--mono);color:var(--fg);background:var(--p1); border:1px solid var(--line);border-radius:0;padding:6px 8px;outline:none; } input:focus,textarea:focus,select:focus{border-color:var(--line2)} textarea{resize:vertical} ::placeholder{color:var(--dim)} h2{font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase} h3{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} /* ---------- splash: every refresh, on the page's own background ---------- Was hardcoded #000, which meant a white or sepia theme flashed a black screen. It now takes the theme's --bg and --fg, so the loading screen is the same surface the page will be. */ #splash{ position:fixed;inset:0;z-index:1000;background:var(--bg); display:grid;place-items:center; overflow:hidden; transition:opacity var(--t4) var(--ease-soft),transform var(--t4) var(--ease-soft); } #splash.off{opacity:0;pointer-events:none;transform:scale(1.02)} #splash .mark{ color:var(--fg); font-size:clamp(30px,6vw,84px); line-height:1.6; padding:.1em .64em .25em .25em; } /* the wordmark settles in: fade plus a short rise. Never a pop from scale(0) — the mark starts close to its own size and eases home. */ @media (prefers-reduced-motion:no-preference){ #splash .mark{animation:mark-in var(--t5) var(--ease) both} } @keyframes mark-in{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}} /* ---------- console: simbio view ---------- Centered column (max 760px): back link, small-caps tab row, one hero number, one ledger table, quiet footer. Perfect symmetry: every element centered, single hairline language, no tints, no pictures. */ #home{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden} #home[hidden]{display:none} /* console = lobby backdrop: solid var(--bg), no image, no glass */ .console-shell,.console-foot{position:relative;z-index:1} .console-inner{background:none} .console-score,.console-upd,table.console-table td{text-shadow:none} /* corner logo: home's top-right wordmark, mirrored top-LEFT on every other page — same Kabisat, same size, same vertical line — and it links home. Hidden while the lobby (home) is the active view. Vertically centered on the dock: the anchor stretches the dock's full height (top:14px + its own height) so the wordmark's midpoint always matches the dock's. */ :root{--dock-h:37px} .corner-home{display:none;position:fixed;left:16px;top:14px;z-index:60;height:var(--dock-h); align-items:center;text-decoration:none;color:inherit;cursor:pointer} #lobby[hidden]~.corner-home{display:inline-flex} .corner-home .lobby-logout-logo{line-height:var(--dock-h)} .corner-home:focus-visible{outline:1px solid var(--fg);outline-offset:2px} .console-foot{background:transparent} .console-shell{flex:1;min-height:0;overflow-y:auto;width:100%; display:flex;flex-direction:column;align-items:safe center; justify-content:safe start} .console-inner{width:100%;max-width:1200px;padding:26px 28px 24px;font-size:12px;font-variant-numeric:tabular-nums} /* console carousel: one card per destination, sized exactly like the scanner wheel (base .tw-card). A card is a headline number over the section name and nothing more — the breakdown belongs to the page it opens. Motion uses a snappy expo-out curve with brightness-only dimming (no blur) so the wheel glides instead of stepping. */ #home .tw-wrap{max-width:1120px;min-height:0;margin-top:0} /* Nothing home-specific about the card any more. It sizes from the base .tw-card/.tw-track — so it IS a scanner card — and now takes the base centring and type too, because a console card is just a headline number over the section name: a doorway to one of those pages. Only the pointer differs, because this one opens. */ #home .tw-card.is-center{cursor:pointer} .co-wrap{grid-column:1/-1} .console-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 30px;align-items:start;margin-top:8px} @media (max-width:820px){.console-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.console-grid{grid-template-columns:1fr}} .cnav{max-width:none;width:100%;display:flex;flex-direction:column} .console-foot{flex:none;display:flex;justify-content:center;color:var(--dim); font-size:7px;letter-spacing:.2em;text-transform:uppercase; text-align:center;padding:14px 0 10px} /* hero number; color = meaning: ▲ green = matches increased since last load, ▼ red = fell, plain = unchanged. (The Kabisat logo font has no digit glyphs — demo cut — so digits stay mono.) */ .console-hero{display:block;text-align:center;width:100%} .console-index{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;user-select:none} .console-index:first-child{justify-self:start} .console-index:last-child{justify-self:end} .console-score{justify-self:center;font-size:62px;font-weight:200;color:var(--fg);text-align:center;margin-top:0; line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .console-score.up{color:var(--c-green)} .console-score.down{color:var(--c-red)} .console-delta{font-size:18px;font-weight:400;vertical-align:super; margin-right:.3em;letter-spacing:.02em} .console-delta .tri-up,.console-delta .tri-dn{display:inline-block;width:0;height:0; border-left:4px solid transparent;border-right:4px solid transparent;margin-right:2px} .console-delta .tri-up{border-bottom:6px solid currentColor} .console-delta .tri-dn{border-top:6px solid currentColor} .console-upd{text-align:center;color:var(--dim);font-size:8px;letter-spacing:.1em; text-transform:uppercase;margin:4px 0 40px} /* one global footer everywhere (homepage line); per-page duplicates off */ #site-foot{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--bg); text-align:center;color:var(--dim);font-size:7px;letter-spacing:.2em;text-transform:uppercase; padding:7px 0;pointer-events:none} .page-scroll::after,.jobs-page::after,#lobby::after{display:none} /* settings: coverflow picker on /settings, page-specific detail on ?tab= */ #page-body>.sec.set-page,#page-body>.sec.prof-edit.set-page{max-width:720px;padding-top:104px} .set-page .det-mod{margin-bottom:10px} .set-page .st-cathint{margin:2px 0 16px} /* detail pages read like the stats page: hero title, compact quiet rows, centered small action bar — minimal hairlines */ .set-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 10px} .set-hero .console-score{font-size:min(9vw,46px)} .set-hero .ca-tagline{color:var(--dim);font-size:11px;letter-spacing:.06em;margin-top:2px;text-align:center} .set-page .det-mod-g{border-top:none} .set-page .det-mod-g>*:last-child{border-bottom:none} .set-page .det-mod-g .mini{padding:12px 8px;gap:12px} .set-page .det-mod-g .mini .mini-v{font-size:15px;white-space:normal} .set-page .det-mod-g .mini .mini-v b{font-size:15px} .set-page .det-mod-g .prof-field{padding:11px 8px} .set-page .det-mod-g .prof-field input{font-size:15px} .set-page .prof-actions{grid-column:1/-1;justify-content:center;gap:12px;padding:16px 0 4px;border:none} .set-page .det-status{grid-column:1/-1;justify-content:center;text-align:center} /* logs: double width, bounded height so the pane never slides under the dock */ #page-body>.sec.prof-edit.logs-page{max-width:min(1280px,96vw);padding-top:96px} /* console home: zoom the body only (bigger hero, rows, labels) — #home scope. Same top margin as every other page: the other pages pad 104px above their hero (set-page padding-top); the fixed dock is 37px tall at top 14px, so the hero's top edge lands at the same 104px line. Air below the hero before the wheel, so the number never touches the cards. */ #home .console-inner{max-width:1320px;font-size:14px;padding-top:104px} #home .console-hero{margin-top:0} #home .console-score{font-size:76px} #home .console-upd{font-size:10px;margin-bottom:30px} /* ---------- top dock: the section links, in the body's own language -------- Flat and monochrome on the page background with a hairline edge. It used to be frosted glass over a 24s multi-hue gradient wash, which made the one control on screen the only tinted, layered thing in an otherwise flat black-and-white page. The dock is part of the page, not a widget floating above it. Only the indicator's transform animates, so switching sections never triggers layout. */ .neo-dock{ position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:55; height:var(--dock-h);display:flex;gap:0;align-items:center;padding:0 6px; max-width:calc(100vw - 140px);box-sizing:border-box;overflow-x:auto; border:1px solid var(--line);border-radius:999px;background:var(--bg); box-shadow:none;scrollbar-width:none; } .neo-dock::-webkit-scrollbar{display:none} .neo-dock a{ position:relative;z-index:1;font:10px/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--dim);text-decoration:none; white-space:nowrap;padding:10px 13px;border-radius:999px;background:none; transition:color var(--t2) var(--ease-soft),transform var(--t2) var(--ease); } .neo-dock a:hover{color:var(--fg)} .neo-dock a.on{color:var(--fg);background:none} .neo-dock a:active{transform:scale(.94)} .neo-dock a:focus-visible{outline:1px solid var(--fg);outline-offset:2px} .neo-dock .dock-ind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px; background:var(--p2);opacity:0;pointer-events:none;z-index:0; transition:transform var(--t4) var(--ease),opacity var(--t2) var(--ease-soft)} .console-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:6px 0 10px;padding:0 12px} .console-nav-a{font:7px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim); text-decoration:none;white-space:nowrap} .console-nav-a:hover,.console-nav-a:focus{color:var(--fg);text-decoration:underline} /* ---------- lobby: the new homepage — your wallpaper, four ways in ---------- Personal background (or the frozen login wallpaper by default) with a dim shade so the wordmark and rows always read. The Console row is the fixed door to the blocks grid; the other three earn their place by answering "what needs me?" at a glance. */ #lobby{position:fixed;inset:0;overflow:hidden;background:var(--bg)} #lobby[hidden]{display:none} #lobby-logout{position:absolute;top:14px;right:16px;z-index:2;padding:8px 10px;border:none;background:none;cursor:pointer;opacity:.55} #lobby-logout:hover{opacity:1} #lobby-logout:focus-visible{outline:1px solid var(--fg);outline-offset:2px} .lobby-logout-logo{font-family:'Kabisat',serif;font-style:italic;font-weight:400;font-size:22px;line-height:1;color:var(--fg);display:inline-block;padding:.1em .5em .2em .2em} .lobby-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 16px} .lobby-logo-wrap{display:grid;place-items:center;width:100%} .lobby-logo{color:var(--fg); font-size:clamp(34px,7vw,64px);line-height:1.6; text-shadow:none;font-weight:400; padding:.15em .84em .3em .45em} .lobby-sub{font-size:10px;color:var(--muted);letter-spacing:.02em;text-shadow:none;width:100%;max-width:640px;text-align:center;line-height:1.6;white-space:pre-line;min-height:calc(2 * 1.6em)} .lobby-nav{width:100%;max-width:400px;display:flex;flex-direction:column;border-top:1px solid var(--line);background:none} /* value | label | index on a strict 3-col grid: the label and index columns land on the same x in every row, in every cell */ .lobby-row{display:grid;grid-template-columns:1fr auto 36px;align-items:baseline;gap:10px;padding:6px 10px;cursor:pointer;border:none;border-bottom:1px solid var(--line)} .lobby-row-l{font-size:10px;color:var(--dim);white-space:nowrap;justify-self:end;text-align:right} .lobby-row .lobby-row-n{font-size:10px;color:var(--dim);text-align:right} /* state colors for console values */ .st-ok{color:var(--c-green)!important} .st-err{color:var(--c-red)!important} .st-warn{color:var(--c-amber)!important} .st-dim{color:var(--dim)!important} .lobby-row:hover{background:var(--hover)} .lobby-row:focus-visible{outline:1px solid var(--fg);outline-offset:-1px} .lobby-row-v{font-size:12px;font-weight:400;color:var(--fg)} .lobby-row:hover .lobby-row-v{color:var(--fg)} .lobby-row.lobby-go{border-bottom:1px solid var(--line)} .lobby-row.lobby-go .lobby-row-v{color:var(--fg)} /* per-user profile checkboxes on the admin Users page */ .uprofs{display:flex;flex-wrap:wrap;gap:4px 16px;align-self:stretch;text-align:left} .tile{ background:var(--bg);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.4em; padding:.5em .4em;cursor:pointer;min-width:0;min-height:0;overflow:hidden; border:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line); transition:background .12s ease; } .tile.gA{background:var(--gA)} .tile.gB{background:var(--gB)} .tile.gC{background:var(--gC)} .tile.gD{background:var(--gD)} .tile.gE{background:var(--gE)} .tile.stale{opacity:.38} .tile.stale>.tile-v,.tile.stale>.tile-l{color:var(--dim)!important} .tile:hover{background:var(--hover)} .tile:active{background:var(--p2)} .tile.gA>.tile-v,.tile.gB>.tile-v,.tile.gC>.tile-v,.tile.gD>.tile-v{color:var(--fg)} .tile.gA>.tile-l,.tile.gB>.tile-l,.tile.gC>.tile-l,.tile.gD>.tile-l{color:var(--dim)} .tile-v{ /* single source of truth for cap: --tile-vmax clamps every tile at once, so one number (42px desktop) keeps value sizes consistent grid-wide */ --tile-vmax:42px; /* scales with the row height (--rows is set by JS) so all tiles fit */ font-size:min(3.2vw, calc(100vh / var(--rows, 9) * .30), var(--tile-vmax)); font-weight:500;letter-spacing:-.02em; text-align:center;line-height:1.15;max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding:0 .1em; } .tile-v.sm{font-size:min(2.2vw, calc(100vh / var(--rows, 9) * .21), 26px)} .tile-v.xs{font-size:min(1.6vw, calc(100vh / var(--rows, 9) * .16), 18px);white-space:normal;line-height:1.3} .tile-v.up{color:var(--up)} .tile-v .arrow{font-size:.6em;vertical-align:.35em;margin-left:.15em} /* persistent increase badge: small ↑N beside the settled value */ .tile-v .delta{font-size:.45em;font-weight:400;vertical-align:.5em;margin-left:.55em;color:var(--up);opacity:.9;white-space:nowrap} .tile-v .delta b{font-weight:600;margin-left:.45em;letter-spacing:.02em} .tile-v.up .delta{color:var(--up)} .tile-l{font-size:min(9px, calc(100vh / var(--rows, 9) * .09));letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center} /* wide tiles: span 2 grid cells, paint a live picture under the value. Same transparent tile paint — the picture is strokes/bars only. */ .tile.wide{grid-column:span 2} .tile-pic{display:flex;align-items:center;justify-content:center;gap:3px;height:min(34px, calc(100vh / var(--rows, 9) * .22));padding:0 14%;align-self:stretch;pointer-events:none;user-select:none} .tile-pic i{flex:1;background:var(--muted);opacity:.55;min-width:3px;min-height:8%} .tile-pic b{display:block;height:6px;border-radius:2px;opacity:.85} .tile-pic .ptxt{font-size:min(10px, calc(100vh / var(--rows, 9) * .10));letter-spacing:.08em;color:var(--dim);white-space:nowrap} .tile-pic .pdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim);opacity:.6} .tile-pic .pdot.on{background:var(--fg);opacity:1;box-shadow:none} .tile-pic .pulse-line{display:block;width:100%;height:2px;background:var(--muted);opacity:.7;flex:none} .tile-pic .pbars{display:flex;align-items:flex-end;gap:2px;height:100%;flex:1;max-width:45%} .tile-pic .pbars i{flex:1;background:var(--muted);opacity:.55;min-width:2px} .tile[data-key="pulse"] .pbars i{background:var(--fg);opacity:.8} .tile-pic .qbar{display:block;height:6px;background:var(--p2);border-radius:3px;overflow:hidden;width:70%} .tile-pic .qbar i{display:block;height:100%;background:var(--muted);opacity:.7} /* live ASCII art line: inherits the tile's transparent paint (no background of its own), dim family color, tiny mono — decoration only */ .tile-art{display:block;font-size:min(11px, calc(100vh / var(--rows, 9) * .11));line-height:1.2;letter-spacing:.1em;color:var(--dim);opacity:.75;white-space:pre;pointer-events:none;user-select:none} .tile.gA>.tile-art,.tile.gB>.tile-art,.tile.gC>.tile-art,.tile.gD>.tile-art,.tile.gE>.tile-art{color:var(--dim);opacity:.5} .tile.stale>.tile-art{display:none} /* ---------- sub pages: full-viewport, centered, no chrome ---------- (no outer hairlines: the grid cells draw their own borders, so the page edges stay clean — this was the white frame around detail pages) BUGFIX: #view is animated (.pg-enter) on every navigation; an animated ancestor becomes the containing block for fixed descendants, so inset:0 resolved against the animating #view (height 0) and the whole page collapsed to 0px — "nothing loads". Height is now viewport-driven (100dvh) so the page never depends on its parent's geometry. */ .page{position:fixed;top:0;left:0;width:100vw;height:100dvh;background:var(--bg);display:flex;flex-direction:column;overflow:hidden} .page[hidden]{display:none} .page-scroll{position:relative;z-index:1;flex:1;overflow:auto;padding:0} .page-scroll>*{margin-left:auto;margin-right:auto} #page-body{ min-height:100%; display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); grid-auto-rows:minmax(140px,1fr); gap:0;align-items:stretch;width:100%; } /* wide sections span the full matrix; metric boxes take one cell; a lone box becomes one centered full-page cell */ #page-body>.sec{grid-column:1/-1} #page-body>.dbox:only-child{grid-column:1/-1} #page-body>.dbox{grid-column:span 1} #page-body>.dbox.span2{grid-column:span 2} #page-body>.dbox.span3{grid-column:span 3} #page-body>.dbox.span-all{grid-column:1/-1} #page-body>.dbox-row,#page-body>.stats-grid{grid-column:1/-1} /* box style: like homepage tiles — grid of bordered sections */ .page-scroll>.page-grid,.page-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 auto} /* sections tile like homepage boxes; anything else (tables, logs) spans full width */ #page-body>.sec{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0;min-height:0;overflow:hidden; align-items:center;text-align:center; } #page-body>*:not(.sec):not(.dbox):not(.dbox-row):not(.stats-grid){grid-column:1/-1} #page-body>.sec>.actions,#page-body>.sec>form,#page-body>.sec>table, #page-body>.sec>div[style*="overflow"],#page-body>.sec>.talent-table-scroll, #page-body>.sec>label.f,#page-body>.sec>.row2,#page-body>.sec>.row3, #page-body>.sec>.check,#page-body>.sec>.chips,#page-body>.sec>p.hint, #page-body>.sec>.kr,#page-body>.sec>.kr-add,#page-body>.sec>.scan-modes, #page-body>.sec>.scan-fields,#page-body>.sec>.theme-opts,#page-body>.sec>.emprof, #page-body>.sec>.progress-box,#page-body>.sec>.cat-row,#page-body>.sec>select, #page-body>.sec>input,#page-body>.sec>textarea{align-self:stretch;text-align:left} .sec{ background:var(--bg);display:flex;flex-direction:column;gap:.4em; padding:16px 14px;min-width:0;min-height:0;overflow:hidden; } .sec-t{ font:10px var(--mono);font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);text-align:center; } .hint{font-size:10px;color:var(--dim);line-height:1.5;margin:4px 0 8px} p.hint, .hint{scrollbar-gutter:stable} .hint.loading{animation:pulse 1.2s ease-in-out infinite} .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px} label.f{display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--muted);margin-bottom:10px} label.f input,label.f textarea,label.f select{width:100%} .check{display:flex;align-items:center;gap:8px;font-size:11px;margin:8px 0;cursor:pointer} .check input{width:14px;height:14px;accent-color:var(--fg)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; border:1px solid var(--line2);border-radius:0;background:var(--p2);color:var(--fg); padding:7px 14px;font-size:11px;cursor:pointer;transition:background .12s ease; } .btn:hover{background:var(--p3)} .btn:active{transform:translateY(1px)} .btn:focus-visible,.tile:focus-visible{outline:1px solid var(--fg);outline-offset:-1px} .btn:disabled{opacity:.45;cursor:default} .btn-acc{background:var(--fg);color:var(--bg);border-color:var(--fg)} .btn-acc:hover{background:var(--muted)} .btn-primary{border-color:var(--line2);color:var(--fg);font-weight:500} .btn-primary:hover{background:var(--p2)} .btn-danger{border-color:#555;color:var(--c-red)} .btn,.btn-sm{border-radius:0} .btn-sm{padding:4px 10px;font-size:10px} .actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap} .spacer{flex:1} .status{font-size:10px;color:var(--dim)} /* ---------- jobs page: full viewport with scroll ---------- */ /* same 0-height bug as .page: #view is animated on navigation, so fixed children must size from the viewport, not inset:0 against #view */ .jobs-page{position:fixed;top:0;left:0;width:100vw;height:100dvh;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;padding-top:56px} .jobs-page-header{ display:flex;align-items:center;gap:16px;padding:64px 20px 22px 170px; border-bottom:1px solid var(--line);flex-shrink:0;max-width:1100px;margin:0 auto;width:100%; flex-wrap:wrap;row-gap:8px;min-width:0;box-sizing:border-box; } .jobs-page-title{font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;max-width:100%} .jobs-count{margin-left:auto;font-size:10px;color:var(--c-teal);font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} @media (max-width:900px){.jobs-page-header{padding-left:150px}} @media (max-width:640px){.jobs-page-header{padding:60px 16px 16px}} #jobswrap{flex:1;min-height:0;position:relative;overflow:auto;background:var(--bg)} #jobswrap .jobs-scroll-wrap{overflow:visible} #jobs-table tbody tr{cursor:pointer} #jobs-table tbody tr:hover td{background:var(--hover)} /* separate (not collapse): with collapse, Chrome paints scrolled row backgrounds/box-shadows OVER the sticky thead — labels get sliced and row edge-markers bleed through the top row. */ #jobs-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed} #jobs-table th,#jobs-table td{ border:none;padding:6px 12px;font-size:10px;line-height:1.5; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left; } #jobs-table thead th{ position:sticky;top:0;background:var(--bg);color:var(--muted);z-index:2; font-weight:400;font-size:9px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase; cursor:pointer;user-select:none;border-bottom:1px solid var(--line); padding:16px 12px 8px;vertical-align:middle; } #jobs-table thead th[data-sort]:hover{color:var(--fg)} #jobs-table tbody tr{cursor:pointer} #jobs-table tbody tr:hover{background:var(--hover)} /* rows tint + color by score band; status tints the left edge marker. Highest band (gold) reads instantly; status stays visible as a marker. */ #jobs-table tbody tr{position:relative} #jobs-table tbody tr td:first-child{box-shadow:inset 2px 0 0 transparent} #jobs-table tbody tr.sc-top{background:rgba(231,231,231,.07)} #jobs-table tbody tr.sc-top td:first-child{box-shadow:inset 2px 0 0 var(--fg)} #jobs-table tbody tr.sc-top .score-cell{color:var(--fg);font-weight:500} #jobs-table tbody tr.sc-high{background:rgba(231,231,231,.04)} #jobs-table tbody tr.sc-high td:first-child{box-shadow:inset 2px 0 0 var(--muted)} #jobs-table tbody tr.sc-high .score-cell{color:var(--fg);font-weight:400} #jobs-table tbody tr.sc-mid{background:transparent} #jobs-table tbody tr.sc-mid td:first-child{box-shadow:inset 2px 0 0 var(--dim)} #jobs-table tbody tr.sc-mid .score-cell{color:var(--muted)} #jobs-table tbody tr.sc-low .score-cell{color:var(--dim)} #jobs-table tbody tr.st-saved td:first-child{box-shadow:inset 2px 0 0 var(--muted)} #jobs-table tbody tr.st-dismissed{opacity:.55} #jobs-table tbody tr.st-dismissed td:first-child{box-shadow:inset 2px 0 0 var(--dim)} #jobs-table tbody tr.st-read{opacity:.55} #jobs-table tbody tr.st-new td:first-child{box-shadow:inset 2px 0 0 var(--fg)} #jobs-table tbody tr:nth-child(even):not(.sc-top):not(.sc-high):not(.sc-mid){background:var(--p1)} #jobs-table .num{text-align:right;font-variant-numeric:tabular-nums} .jobs-loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);animation:pulse 1.2s ease-in-out infinite;z-index:10} @keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}} p.hint, .hint{scrollbar-gutter:stable} .hint.loading{animation:pulse 1.2s ease-in-out infinite} /* ---------- scan page: identical language to the homepage ---------- */ /* viewport-sized like .page/.jobs-page (animated #view ancestor bug) */ .scan-page{position:fixed;top:0;left:0;width:100vw;height:100dvh;background:var(--bg);overflow:hidden} .scan-grid{ position:fixed;top:0;left:0;width:100vw;height:100dvh;display:grid; grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr); background:var(--bg); } .scan-tile{ background:var(--bg);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.4em; padding:.5em .4em;cursor:pointer;min-width:0;min-height:0;overflow:hidden; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .12s ease; } .scan-tile:hover{background:var(--hover)} .scan-tile:active{background:var(--p2)} .scan-tile-mode.active{box-shadow:inset 0 0 0 1px var(--fg)} /* mode tiles carry a family tint; the Start tile stays the yellow accent */ .scan-tile[data-mode="age"],.scan-tile[data-mode="pages"],.scan-tile[data-mode="count"],.scan-tile[data-mode="auto"]{background:var(--bg)} .scan-tile[data-mode="age"]>.scan-tile-v,.scan-tile[data-mode="pages"]>.scan-tile-v,.scan-tile[data-mode="count"]>.scan-tile-v,.scan-tile[data-mode="auto"]>.scan-tile-v{color:var(--fg)} .scan-tile-wide{background:var(--bg)!important} .scan-tile-v{ font-size:min(2.6vw, 30px);font-weight:500;letter-spacing:-.02em; text-align:center;line-height:1.15;max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .scan-tile-v-acc{color:var(--fg)} .scan-tile.busy .scan-tile-v{color:var(--dim)} .scan-tile-label{ font-size:min(9px, 11px);letter-spacing:.14em;text-transform:uppercase; color:var(--dim);text-align:center; } .scan-tile-input{display:flex;flex-direction:column;gap:2px;width:60%;margin-top:.2em} .scan-tile-input-2{flex-direction:row;width:80%;gap:8px} .scan-tile-input label{display:flex;flex-direction:column;gap:2px;font-size:9px;text-align:center;flex:1;color:var(--dim)} .scan-tile-input input{ width:100%;text-align:center;font-size:14px;font-weight:500;padding:4px 6px; background:var(--p1);border:1px solid var(--line);border-radius:0;color:var(--fg); } .prof-field.dimmed{opacity:.42} .scan-tile-wide{grid-column:span 2} .scan-tile-progress{ grid-column:1/-1;cursor:default; } .scan-tile-progress:hover{background:var(--bg)} .scan-progress{ overflow:auto;padding:6px 10px;display:flex;flex-direction:column;gap:2px; min-height:0;flex:1;align-self:stretch;width:100%; font-family:var(--mono);font-size:9px;color:var(--muted); } .scan-progress:empty::after{content:"waiting…";color:var(--dim)} .scan-progress span{white-space:pre-wrap;word-break:break-all} /* ---------- box language shared by every detail page ---------- A box = large value + small uppercase label, hairline borders, no radius, no shadows. Merging = span2 / span3 / span-all. Family tint rotation: every untinted dbox cycles teal→amber→magenta→blue via :nth-of-type, so ALL detail pages get home-page-like color for free — explicit tb-* classes always win. */ #page-body>.dbox:nth-of-type(4n+1),#page-body>.dbox:nth-of-type(4n+2),#page-body>.dbox:nth-of-type(4n+3),#page-body>.dbox:nth-of-type(4n){background:var(--bg)} #page-body>.dbox:nth-of-type(4n+1)>.dbox-v,#page-body>.dbox:nth-of-type(4n+2)>.dbox-v,#page-body>.dbox:nth-of-type(4n+3)>.dbox-v,#page-body>.dbox:nth-of-type(4n)>.dbox-v{color:var(--fg)} #page-body>.dbox:nth-of-type(4n+1)>.dbox-l,#page-body>.dbox:nth-of-type(4n+2)>.dbox-l,#page-body>.dbox:nth-of-type(4n+3)>.dbox-l,#page-body>.dbox:nth-of-type(4n)>.dbox-l{color:var(--dim)} #page-body>.dbox.tb-teal,#page-body>.dbox.tb-amber, #page-body>.dbox.tb-magenta,#page-body>.dbox.tb-blue{background:var(--bg)} .dbox{ background:var(--bg);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.4em; padding:.5em .4em;min-width:0;min-height:0;overflow:hidden; border-right:1px solid var(--line);border-bottom:1px solid var(--line); text-align:center;transition:background .12s ease; } /* console Home tile: the way back to the lobby — loud yellow, can't miss it. Same hairlines as every tile (top/left never draw: cells only paint right/bottom, so the grid edge stays clean on all four sides). */ .tile-back{background:transparent!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important} .tile-back:hover{background:var(--hover)!important} .tile-back:focus-visible{outline:1px solid var(--fg);outline-offset:-2px} .tile-back>.tile-v{color:var(--muted)} .tile-back>.tile-l{color:var(--dim)!important} /* clickable affordance: normal 1px border everywhere; only the primary action per page (Generate/Upload/Save/Console rows) gets the thicker 2px action edge + yellow value. Everything else reads quiet. */ .dbox.click,a.dbox,button.dbox{border-bottom:1px solid var(--line);cursor:pointer} .dbox.click:hover,a.dbox:hover,button.dbox:hover{background:var(--hover)} button.dbox .dbox-v,.dbox.click>.dbox-v{color:var(--fg);font-weight:400} .dbox.click.primary,button.dbox.primary{border-bottom:2px solid var(--line2)} .dbox.click.primary>.dbox-v,button.dbox.primary .dbox-v{color:var(--fg);font-weight:500} /* Save is a full-width box like every other action box — big "Save" value, yellow via .primary, same behavior everywhere. No nested button-in-a-box. */ #page-body button#page-save{border-bottom:2px solid var(--line2)} #page-body button#page-save .dbox-v{color:var(--fg);font-weight:500;font-size:min(4vw,44px)} .dbox.click:active,a.dbox:active,button.dbox:active{background:var(--p2)} .dbox:focus-visible{outline:1px solid var(--fg);outline-offset:-1px} .dbox-v{ font-size:min(2.6vw,30px);font-weight:500;letter-spacing:-.02em; line-height:1.15;max-width:100%;overflow:hidden; text-overflow:ellipsis;white-space:nowrap; } .dbox-v.wrap{white-space:normal;line-height:1.3} .dbox-l{ font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--dim);text-align:center; } .dbox-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .dbox-row>*{border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .dbox-row>*:last-child{border-right:1px solid var(--line)} .dbox-pre{ align-self:stretch;width:100%;flex:1;overflow:auto;text-align:left; font-family:var(--mono);font-size:9px;color:var(--muted); padding:8px 10px;display:flex;flex-direction:column;gap:2px; } .dbox-pre:empty::after{content:"waiting…";color:var(--dim)} .dbox-pre span{white-space:pre-wrap;word-break:break-all} .dbox.form{gap:1.1em;padding:1.2em 16%} /* slim: short read-only boxes (settings cells, debug status tiles). Compacts the tall default padding per-box — never touches #page-body or .dbox, so no other page is affected. */ .dbox.slim{padding:.55em .4em;gap:.25em} .dbox.form.slim{gap:.55em;padding:.7em 8%} .dbox.form input{ width:110px;text-align:center;font-size:14px;font-weight:500; background:var(--p1);border:1px solid var(--line);color:var(--fg);padding:5px 6px; } .dbox.form input[type=checkbox]{width:16px;height:16px;accent-color:var(--fg)} .dbox.text{align-items:flex-start;justify-content:center;text-align:left;padding:1.4em 12%} .dbox.text .hint{margin:0;text-align:left;line-height:1.8} .mini-grid{ grid-column:1/-1;display:grid;align-content:stretch; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); grid-auto-rows:minmax(80px,1fr);gap:0; border-right:1px solid var(--line);border-bottom:1px solid var(--line); } .mini{ background:var(--bg);display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;padding:8px 6px;min-width:0;overflow:hidden; border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center; } /* detail-page compact chips: inherit the mini look but shrink to ~1/3 height in a 6-across row (like the Stats Counts strip). Wide enough that 6 fit one row at any width; content clamps, never reflows. */ .mini-grid.chips.det-6{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(26px,auto)} .mini-grid.chips.det-6 .mini{padding:3px 4px;gap:1px} .mini-grid.chips.det-6 .mini .mini-v{font-size:13px;font-weight:500;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit} .mini-grid.chips.det-6 .mini .mini-v .c-teal{color:var(--c-teal)} .mini-grid.chips.det-6 .mini .mini-v .c-amber{color:var(--c-amber)} .mini-grid.chips.det-6 .mini .mini-v .c-magenta{color:var(--c-magenta)} .mini-grid.chips.det-6 .mini .mini-v .c-blue{color:var(--c-blue)} .mini-grid.chips.det-6 .mini span:last-child{font-size:7px} /* detail readout chips outside the 6-strip (health state, upkeep, scan scope…) use the same compact language: 3-across, ~1/3 height. */ /* detail readouts use the homepage row: value left, small-caps label right */ .det-mod-g .mini{padding:9px 12px;gap:12px;background:var(--bg);border:none;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:baseline;text-align:left;border-radius:0} .det-mod-g .mini .mini-v{font-size:12px;font-weight:400;line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)} .det-mod-g .mini .mini-v b{font-size:12px;font-weight:400;line-height:1.5;display:block;white-space:normal} .det-mod-g .mini span{justify-self:end;text-align:right} /* form controls are NOT chips: full-width field rows under the chip strip */ .det-mod-g .prof-field{grid-column:1/-1} .det-mod-g .mini{grid-column:1/-1} .det-mod-g .prof-check{grid-column:1/-1} .mini b{font-size:18px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mini span{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mini .cat-bar{width:70%;height:5px;background:var(--p2);display:block;overflow:hidden} .mini .cat-bar i{display:block;height:100%;background:currentColor;opacity:.7} .uptime{display:flex;gap:3px;align-self:stretch;padding:8px 10%;min-height:30px;align-items:stretch} .uptime i{flex:1;background:var(--p2);min-width:4px} .uptime i.up{background:var(--fg)} /* stacked uptime strips: hour / day / month in one box, decreasing heights */ .uptime-stack{display:flex;flex-direction:column;gap:5px;align-self:stretch;padding:8px 10% 4px} .uptime-stack .uptime{padding:0;min-height:0} .uptime-stack .uptime i{min-height:26px} .uptime-stack .uptime + .uptime i{min-height:16px} .uptime-stack .uptime.months i{min-height:9px} /* ---------- matched: one column per profile, wraps past 4 ---------- */ .mcells{grid-column:1/-1;display:grid;grid-auto-rows:1fr;min-height:40vh} .mcell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:18px 12px;cursor:pointer;border-right:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--gA)} .mcell:nth-child(4n+2){background:var(--gB)} .mcell:nth-child(4n+3){background:var(--gC)} .mcell:nth-child(4n){background:var(--gD)} .mcell:hover{background:var(--hover)} .mcell:focus-visible{outline:1px solid var(--fg);outline-offset:-1px} .mcell-name{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:center} .mcell-n{font-size:min(5vw,44px);font-weight:500;font-variant-numeric:tabular-nums} .mcell.top .mcell-n{color:var(--fg)} .theme-half .dbox-v{font-size:min(4vw,44px)} .theme-half{overflow:hidden} /* themes page: fixed 5 cols x 2 rows — all 10 swatches, one screen */ #page-body>.theme-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);min-height:60vh} #page-body>.theme-grid>.theme-half{min-height:0} /* themes coverflow: centre swatch focused, sides peek. True 3D wheel — no strokes/rings anywhere (no edge lines), focus reads from depth + scale + light. Edges fade so clipped cards dissolve, never cut. */ .tw-wrap{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:1120px;margin:0 auto;min-height:72vh} /* The arrow is a glyph, not a button: hovering brightens the chevron and draws nothing else — no box, no fill, no outline. Its hit area is deliberately larger than the glyph (the ::before bleeds past the 34x64 box), because a stage this wide with only two targets should answer a click NEAR the arrow, not only one dead on it. Keyboard focus still draws its ring, so the control stays reachable without a mouse. */ .tw-arrow{ position:relative;flex:none;align-self:center;width:34px;height:64px; font-size:22px;line-height:1;color:var(--dim);border:none;background:none; cursor:pointer;user-select:none; } .tw-arrow::before{content:"";position:absolute;top:-30px;bottom:-30px;left:-16px;right:-16px} .tw-arrow:hover{color:var(--fg)} .tw-arrow:focus-visible{outline:1px solid var(--fg);outline-offset:6px} .tw-viewport{flex:1 1 auto;min-width:0;max-width:980px;margin:0 auto;overflow:hidden;perspective:1400px;touch-action:pan-y;cursor:grab;outline:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%)} .tw-viewport:active{cursor:grabbing} .tw-track{position:relative;height:490px;transform-style:preserve-3d} .tw-card{position:absolute;left:50%;top:30px;width:min(320px,74vw);height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;border-radius:18px;overflow:hidden;transition:transform var(--t4) var(--ease),opacity var(--t3) var(--ease-soft),filter var(--t3) var(--ease-soft);will-change:transform,opacity;box-sizing:border-box;cursor:pointer} /* card text must resolve vars at text level so each swatch uses its OWN theme colors (inherited app color is invisible on contrasting cards) */ .tw-track .tw-card .dbox-v{color:var(--fg)} .tw-track .tw-card .dbox-l{color:var(--dim)} .tw-track .tw-card{border:none} .tw-card.is-center{opacity:1;filter:brightness(1) saturate(1) blur(0px);z-index:30;cursor:default} .tw-card.is-side{opacity:1;filter:brightness(.94) saturate(.94) blur(0px);z-index:20;cursor:pointer} .tw-card.is-peek{opacity:.9;filter:brightness(.84) saturate(.9) blur(.3px);z-index:10;cursor:pointer} .tw-card.is-far{opacity:0;filter:brightness(.7) saturate(.85) blur(6px);pointer-events:none;z-index:0} /* kill the grid's inset selected-ring inside the wheel — selection is the dot only, so no ring fragments ever draw at the corners */ .tw-track .tw-card.theme-half.active{box-shadow:0 18px 50px rgba(0,0,0,.45)} .tw-track .tw-card.theme-half.active.is-side{box-shadow:0 10px 28px rgba(0,0,0,.4)} .tw-track .tw-card.theme-half.active.is-peek{box-shadow:0 6px 18px rgba(0,0,0,.35)} .tw-card .dbox-v,.tw-card .dbox-l,.tw-card .ca-stat{position:relative;z-index:1} /* per-card wash: distinct hue + distinct gradient shape per card, built from the active theme (var(--bg) + family color) so every theme reads differently yet stays quiet in both dark and light */ .tw-card[data-g="0"]{background:linear-gradient(145deg,color-mix(in srgb,var(--c-teal) 20%,var(--bg)),var(--bg) 70%)} .tw-card[data-g="1"]{background:linear-gradient(35deg,color-mix(in srgb,var(--c-blue) 20%,var(--bg)),var(--bg) 70%)} .tw-card[data-g="2"]{background:radial-gradient(120% 100% at 15% 0%,color-mix(in srgb,var(--c-magenta) 22%,var(--bg)),var(--bg) 70%)} .tw-card[data-g="3"]{background:radial-gradient(120% 100% at 85% 100%,color-mix(in srgb,var(--c-amber) 22%,var(--bg)),var(--bg) 70%)} .tw-card[data-g="4"]{background:linear-gradient(115deg,color-mix(in srgb,var(--c-green) 20%,var(--bg)),var(--bg) 70%)} .tw-card[data-g="5"]{background:radial-gradient(120% 100% at 85% 0%,color-mix(in srgb,var(--c-red) 20%,var(--bg)),var(--bg) 70%)} /* No dot indicators anywhere. A wheel of five or six cards already says where it is by which card is centred; the dots were a second, smaller statement of the same thing, under a carousel that fills the screen. */ /* competition picker: stat strip under the role line — same hairline language as the rest of the app (JSS / rate / earned when known) */ .tw-card .ca-stats{display:flex;justify-content:center;gap:26px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .tw-card .ca-stat{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .tw-card .ca-stat b{font-size:15px;font-weight:500;letter-spacing:0;color:var(--fg);font-variant-numeric:tabular-nums} .tw-card .dbox-v,.tw-card .dbox-l,.tw-card .ca-stat{position:relative;z-index:1} /* ---------- competition: the rankings table + one entry ---------- These were inline