/* TD Industry — Admin ▸ Access. * * The roster is a table that never became a : rows are grids sharing one column * track list, so Role and Module access line up down the page and the eye can compare * them without reading every row. That alignment is the whole point of the layout, so the * track definition lives in one place (--acc-cols) and the header strip and the rows both * take it from there. * * Everything else in this file is subordinate to one rule: prose breathes, controls stay * dense. Explanatory copy gets the line-height and the room; the things you click do not. */ .acc{display:flex;flex-direction:column;gap:18px} .acc-h{margin-top:8px} .acc-dim{color:var(--slate-dim)} /* admin.css sets the shared prose rhythm on #adminView .lead; the id beats a class, so matching it is the only way to close the gap before the counters. */ #adminView .acc .lead{margin-bottom:0} #adminView .acc-pre-body .lead{margin-bottom:0} /* A closing note is an aside, not part of the flow above it — it gets a rule and a drop rather than yet another paragraph gap. */ .acc-foot{text-align:left;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft); font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--slate-dim);max-width:88ch} /* ---- masthead ---- * Title, the one paragraph that explains the model, the counters, and the sub-nav, in * that order: what this is, how it works, where things stand, where to go. */ .acc-top{padding-bottom:0} /* ---- counters, which are also the filters ---- * These were two rows before — numbers to read, then chips carrying the same numbers to * click. One row that reports AND filters is less to scan and one fewer control to * learn. The pressed state is the current filter. */ .acc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px;margin:18px 0 0} .acc-stat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left; padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:var(--void2); transition:border-color .16s,background .16s,transform .16s} .acc-stat:hover{border-color:var(--blueprint-dim);background:var(--midnight)} .acc-stat:active{transform:translateY(1px)} .acc-stat-n{font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1;color:var(--parchment)} .acc-stat-l{font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)} .acc-stat.gold .acc-stat-n{color:var(--gold)} .acc-stat.blue .acc-stat-n{color:var(--blueprint)} .acc-stat.crit .acc-stat-n{color:var(--crit)} .acc-stat.on{border-color:var(--blueprint-dim);background:rgba(79,184,212,.10)} .acc-stat.on .acc-stat-l{color:var(--blueprint)} /* ---- sub-nav ---- * Two views, not three. Sits flush with the bottom of the masthead card so it reads as * a tab strip belonging to it rather than a second row of buttons floating below. */ .acc-nav{display:flex;gap:4px;margin:18px -24px 0;padding:0 24px;border-top:1px solid var(--line-soft)} .acc-nav button{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--slate); background:transparent;border:0;border-bottom:2px solid transparent;padding:13px 14px;margin-bottom:-1px; transition:color .16s,border-color .16s} .acc-nav button:hover{color:var(--parchment)} .acc-nav button.on{color:var(--blueprint);border-bottom-color:var(--blueprint)} /* ---- inline result line ---- * Replaces alert(). A failed toggle says so beside the thing that failed, and a * successful one confirms without stealing the pointer. Collapses to nothing when * empty so it never leaves a gap in the stack. */ .acc-flash{max-height:0;opacity:0;overflow:hidden;margin:-18px 0 -18px; font-family:var(--mono);font-size:.74rem;border-radius:7px;border:1px solid transparent; transition:max-height .2s,opacity .2s,margin .2s,padding .2s} .acc-flash.show{max-height:120px;opacity:1;margin:0;padding:11px 14px} .acc-flash.ok{color:var(--emerald);border-color:#2f5e43;background:rgba(78,163,107,.08)} .acc-flash.err{color:var(--crit);border-color:var(--oxblood);background:rgba(94,22,34,.16)} /* ---- roster toolbar ---- * Search, module lens and sort are one control group. Sticky, because a long roster is * scrolled and the thing you narrow it with should not scroll away. */ .acc-tools{position:sticky;top:66px;z-index:5;display:flex;gap:9px;align-items:center;flex-wrap:wrap; margin:0 -24px 4px;padding:14px 24px;background:linear-gradient(180deg,var(--panel) 82%,transparent); backdrop-filter:blur(6px)} .acc-search{position:relative;flex:1 1 240px;min-width:0;display:flex;align-items:center} .acc-search svg{position:absolute;left:12px;width:14px;height:14px;stroke:var(--slate-dim);fill:none;stroke-width:2; stroke-linecap:round;pointer-events:none} .acc-search .input{padding-left:34px;padding-right:32px} .acc-x{position:absolute;right:6px;width:24px;height:24px;border:0;border-radius:4px;background:transparent; color:var(--slate-dim);font-size:1.05rem;line-height:1} .acc-x:hover{color:var(--parchment);background:rgba(255,255,255,.05)} /* The module lens: the old "Modules" tab, reduced to a filter. Pressing one narrows the roster to its holders, which answers "who can see the raid rota?" in the list you were already looking at. */ .acc-lens{display:flex;gap:6px;flex-wrap:wrap} .acc-lensb{font-family:var(--mono);font-size:.68rem;color:var(--slate);background:var(--void2); border:1px solid var(--line);border-radius:999px;padding:9px 14px;transition:color .16s,border-color .16s,background .16s} .acc-lensb:hover{color:var(--parchment);border-color:var(--blueprint-dim)} .acc-lensb.on{color:var(--blueprint);border-color:var(--blueprint-dim);background:rgba(79,184,212,.11)} .acc-sort{flex:0 0 auto} .acc-reset{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--slate); background:transparent;border:1px solid var(--line);border-radius:5px;padding:9px 12px} .acc-reset:hover{color:var(--crit);border-color:var(--oxblood)} /* ---- the roster proper ---- * The header strip and every row are SEPARATE grid containers, so content-sized (auto) * tracks would resolve differently in each one and the columns would not line up — the * one thing this layout exists to do. The track list is therefore deterministic: the * role column is wide enough for the longest ladder in any of the three languages, and * the identity and module columns take the slack. One definition, inherited by both. */ .acc-roster{padding-top:16px;--acc-cols:minmax(180px,1.9fr) 250px minmax(150px,1.3fr) 60px} .acc-thead{display:grid;grid-template-columns:var(--acc-cols);gap:10px 20px;align-items:end; padding:4px 16px 8px;border-bottom:1px solid var(--line-soft)} .acc-thead span{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-dim)} .acc-rows{display:flex;flex-direction:column} .arow{display:grid;grid-template-columns:var(--acc-cols);gap:10px 20px;align-items:center; padding:12px 16px;border-bottom:1px solid var(--line-soft); transition:background .16s,opacity .16s} .arow:hover{background:rgba(255,255,255,.018)} /* Somebody who can no longer sign in is the one state worth seeing from across the row, so it gets an edge marker rather than a badge you have to find. */ .arow.out{box-shadow:inset 3px 0 0 var(--oxblood);background:rgba(94,22,34,.05)} .arow.out:hover{background:rgba(94,22,34,.09)} /* A write in flight dims the row instead of replacing it — the roster never blinks. */ .arow.busy{opacity:.55;pointer-events:none} .arow-id{display:flex;align-items:center;gap:11px;min-width:0} .arow-idt{min-width:0} .arow-nm{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.94rem;font-weight:500;color:var(--parchment)} .arow-sub{font-family:var(--mono);font-size:.64rem;color:var(--slate);margin-top:3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Its own element so that "3 characters" is a text node on its own and can be translated — spliced into the line beside the ticker it never could be. */ .acc-n{white-space:nowrap} .arow-cell{min-width:0} .arow-end{display:flex;justify-content:flex-end} .cm-badge.you{color:var(--blueprint);border-color:var(--blueprint-dim)} /* Role ladder as a segmented control: the whole scale is visible, and moving somebody is one click on the rung you want rather than opening a menu and hunting for it. */ .rseg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--void2)} .rseg button{font-family:var(--mono);font-size:.68rem;color:var(--slate);background:transparent;border:0; border-right:1px solid var(--line);padding:8px 13px;line-height:1.2;white-space:nowrap; transition:color .16s,background .16s} .rseg button:last-child{border-right:0} .rseg button:hover:not(.on){color:var(--parchment);background:rgba(255,255,255,.035)} .rseg button:focus-visible{outline:2px solid var(--blueprint);outline-offset:-2px} .rseg button.on{color:var(--void);background:var(--slate);font-weight:600} .rseg button.on.industrialist{background:var(--blueprint)} .rseg button.on.admin{background:var(--gold)} .rseg button:disabled{opacity:.55} /* Module access reads as a set of doors you open, so the chip carries its own state marker: + to add, ✓ once held. Without it an unpressed chip and a pressed one differ only by colour, which is the wrong amount of signal for something this consequential. */ .gchips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;min-height:34px} .gchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.68rem; color:var(--slate);background:var(--void2);border:1px solid var(--line);border-radius:999px; padding:8px 13px;line-height:1.2;white-space:nowrap;transition:color .16s,border-color .16s,background .16s} .gchip-t{font-size:.72rem;color:var(--slate-dim);width:9px;text-align:center} .gchip:hover{color:var(--parchment);border-color:var(--blueprint-dim)} .gchip:focus-visible{outline:2px solid var(--blueprint);outline-offset:2px} .gchip.on{color:var(--blueprint);border-color:var(--blueprint-dim);background:rgba(79,184,212,.12)} .gchip.on .gchip-t{color:var(--blueprint)} .gchip:disabled{opacity:.55} /* The character count is the affordance — it says what opening the row will show. */ .acc-exp{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.7rem; color:var(--slate);background:transparent;border:1px solid var(--line);border-radius:6px;padding:7px 10px; transition:color .16s,border-color .16s} .acc-exp:hover{color:var(--parchment);border-color:var(--blueprint-dim)} .acc-exp svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s} .acc-exp svg.up{transform:rotate(180deg)} /* Expanded characters span the full width — they belong to the row, not to a column. */ .acc-chars{grid-column:1/-1;display:flex;flex-direction:column;gap:5px; margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-soft)} .acc-ch{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:7px 10px; border:1px solid var(--line-soft);border-radius:6px;background:var(--void2);font-size:.84rem} .acc-ch .pimg{--pimg-sz:26px;border-radius:4px} .acc-ch-nm{font-weight:500} .acc-ch-tk{font-family:var(--mono);font-size:.66rem;color:var(--slate)} .acc-ch .doc-rm{margin-left:auto} .acc-tally{font-family:var(--mono);font-size:.66rem;color:var(--slate-dim);padding:12px 16px 0} /* ---- pre-authorise ---- * A rare task, so it is folded away by default and says how many names are waiting on * its own header. Both kinds of pre-authorisation — a role and a module — live here * now, in one list and one form, instead of one in each of two tabs. */ .acc-pre{padding:0;overflow:hidden} .acc-pre-head{display:flex;align-items:center;gap:14px;width:100%;text-align:left; background:transparent;border:0;padding:18px 24px;color:inherit} .acc-pre-head:hover{background:rgba(255,255,255,.02)} .acc-pre-t{flex:1;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--parchment)} .acc-pre-n{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase; color:var(--gold);border:1px solid var(--gold-dim);border-radius:3px;padding:3px 8px} .acc-pre-head svg{width:14px;height:14px;stroke:var(--slate);fill:none;stroke-width:2;transition:transform .2s} .acc-pre-head svg.up{transform:rotate(180deg)} .acc-pre-body{padding:0 24px 22px;border-top:1px solid var(--line-soft);padding-top:18px} .acc-pre-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 8px} .acc-pre-form .input{flex:1 1 200px;min-width:0} .acc-pre-form .add-btn{height:42px} .acc-pre-mod{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem; color:var(--slate);border:1px solid var(--line);border-radius:6px;padding:0 13px;height:42px; background:var(--void2);cursor:pointer;white-space:nowrap} .acc-pre-mod:hover{color:var(--parchment);border-color:var(--blueprint-dim)} .acc-pre-mod input{accent-color:var(--blueprint);width:14px;height:14px;cursor:pointer} .acc-pend-list{margin-top:16px;border:1px solid var(--line-soft);border-radius:7px;overflow:hidden} .acc-pend{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 13px; border-top:1px solid var(--line-soft);background:var(--void2)} .acc-pend:first-child{border-top:0} .acc-pend-nm{flex:1;min-width:120px;font-family:var(--mono);font-size:.8rem;color:var(--parchment)} .acc-pend-tags{display:flex;gap:6px;flex-wrap:wrap} .acc-pend-rm{display:flex;gap:2px} /* ---- sign-in gate ---- */ /* Nobody being able to sign in is not an empty state, it is an outage. It reads like one. */ .acc-alarm{margin:16px 0 0;padding:13px 15px;border:1px solid var(--oxblood);border-radius:7px; background:rgba(94,22,34,.16);font-family:var(--mono);font-size:.76rem;color:var(--crit)} .acc-orgform{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 8px} .acc-orgform .input{flex:1 1 200px;min-width:0} .acc-orgform .acc-narrow{flex:0 0 110px} .acc-orgform .add-btn{height:42px} .acc-orgs{margin-top:16px;border:1px solid var(--line-soft);border-radius:7px;overflow:hidden} .acc-org{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px; border-top:1px solid var(--line-soft);background:var(--void2)} .acc-org:first-child{border-top:0} .acc-org .pimg{--pimg-sz:26px;border-radius:4px} .acc-org-nm{flex:1;min-width:130px;font-size:.88rem;color:var(--parchment)} .acc-org-id{font-family:var(--mono);font-size:.66rem;color:var(--slate)} /* Tag colours by kind, so alliance and corp are told apart before the word is read. */ .doc-tag.gold{color:var(--gold);border-color:var(--gold-dim)} .doc-tag.blue{color:var(--blueprint);border-color:var(--blueprint-dim)} /* ---- narrow ---- * Below the breakpoint the grid stops being a table and each row becomes a small stack: * identity, then the two control groups under their own labels. The column headers go * away with it, so the labels come back per row via ::before. */ @media(max-width:1080px){ .acc-thead{display:none} .arow{position:relative;grid-template-columns:1fr;gap:0;padding:15px 14px} .arow-end{position:absolute;right:14px;top:15px} .arow-cell:not(.arow-end){margin-top:12px} .arow-cell:not(.arow-end)::before{display:block;margin-bottom:6px; font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-dim)} .arow .arow-cell:nth-of-type(2)::before{content:"Role"} .arow .arow-cell:nth-of-type(3)::before{content:"Module access"} } @media(max-width:720px){ .acc-tools{position:static;backdrop-filter:none;background:transparent;margin:0 0 6px;padding:0 0 12px} .acc-nav{margin:16px -20px 0;padding:0 20px} .acc-stats{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))} .acc-stat-n{font-size:1.15rem} .rseg button{padding:8px 10px;font-size:.64rem} .acc-pre-head,.acc-pre-body{padding-left:20px;padding-right:20px} }