/* The design system's shared stylesheet — every door page (admin., tenant., app.) loads it before control.css. Here, once: the tokens (both colour sets and the meanings bound to them), the base text rendering, text links, the controls, the panel, the tables, the pills, the hints and action rows, the ? mark, the sheets and dialogs, the fixed header and the pop-up menus. control.css may place and space these and never restyles them (house rule 21). The guide is DESIGN.md in this repository. Its home is here since 2026-09-11; before that a copy of emictech-web's protected/admin-shared.css. Never copy a rule from here into a page: duplication is how the pages drifted apart three times. */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} [hidden]{display:none!important} /* The doors' colour sets (DESIGN.md, Tokens). Dark is the doors today; light is the day set of 2026-09-12. A set is scoped by attribute as well as by root, so one panel can wear the other set (the Palette page) and, once a switch exists, wears a person's choice. Every text token and every meaning reads at 4.5:1 or better on both grounds of its own set — tests/test_palette.py holds it. Pages use meanings, never hues; a tint is color-mix(in srgb, var(--x) 35%, transparent). The dark hues are VS Code Dark+; the light ones keep the meanings, darkened to read on white. */ :root,[data-theme=dark]{ color-scheme:dark; --bg:#0a0a0a;--bg2:#141414;--bg3:#262626; /* bg3: the third ground — an inset: inline code, a bar, a box; the hairline's tone */ --border:#262626;--border2:#3a3a3a; --text:#f5f5f5;--text3:#cfcfcf;--text4:#808080; /* text4 7a→80 on 2026-09-12: the muted grey now passes 4.5:1 on a card */ --scrollbar:#4d4d4d; /* the scrollbar's thumb, on no track */ --c-azure:#4daafc;--c-blue:#3794ff;--c-sky:#9cdcfe;--c-teal:#4ec9b0;--c-green:#89d185;--c-olive:#6a9955;--c-yellow:#cca700; --c-sand:#dcdcaa;--c-orange:#ce9178;--c-amber:#d18616;--c-red:#f14c4c;--c-purple:#c586c0;--c-violet:#b180d7; --nav-bg:rgba(10,10,10,0.85); } [data-theme=light]{ color-scheme:light; --bg:#f4f4f4;--bg2:#ffffff;--bg3:#e2e2e2; /* raised surfaces are white on a light grey ground — the reverse of dark; the inset in the hairline's tone, as in the dark set */ --border:#e3e3e3;--border2:#c9c9c9; --text:#111111;--text3:#3d3d3d;--text4:#6e6e6e; --scrollbar:#aaaaaa; --c-azure:#0b64c0;--c-blue:#1a5fd6;--c-sky:#0a7391;--c-teal:#0f766e;--c-green:#1f7a3a;--c-olive:#5a7a1e;--c-yellow:#8a6100; --c-sand:#7a6b2a;--c-orange:#aa4f1c;--c-amber:#a05a00;--c-red:#c8202c;--c-purple:#8b3f9e;--c-violet:#6d3fc9; --nav-bg:rgba(244,244,244,0.85); } /* meanings bound to hues — one hue, one meaning — resolved on the same element as the set they read, so a panel of the other set gets the other hues */ :root,[data-theme]{ --accent:var(--text3); /* the primary button's fill: not white (Qing, 2026-09-10: "too bright") */ --link:var(--c-azure); /* clickable text — VS Code Dark Modern textLink.foreground */ --ok:var(--c-green); /* live, done, active */ --warn:var(--c-yellow); /* pending, attention, in progress */ --danger:var(--c-red); /* error, blocked, destructive */ --chat:var(--c-sky);--voice:var(--c-teal);--phone:var(--c-orange);--sms:var(--c-violet); /* the channels */ --series-1:var(--c-blue);--series-2:var(--c-teal);--series-3:var(--c-orange);--series-4:var(--c-purple); --series-5:var(--c-green);--series-6:var(--c-yellow); /* chart series, in order */ --f:'Helvetica Neue',Helvetica,Arial,sans-serif; --scrim:rgba(0,0,0,.65); /* the ground behind a sheet or a dialog — black at an opacity in both sets */ --shadow:0 8px 24px rgba(0,0,0,.18); /* a pop-up's shadow: the menus, the mark's bubble — one shadow, black in both sets */ } /* color-scheme makes the browser render its own widgets (select popups, scrollbars, pickers) dark. Dialogs like confirm()/alert() are browser chrome and can never be themed — use askConfirm()/askNotice() from admin-shared.js instead. */ html{background:var(--bg);color:var(--text);font-family:var(--f);-webkit-font-smoothing:antialiased;letter-spacing:-0.01em} /* color-scheme comes with the set */ input,select,textarea,button{letter-spacing:inherit} /* browsers reset letter-spacing on form controls; they take the root rule like everything else (William, 2026-09-08) */ body{background:var(--bg);color:var(--text);min-height:100vh} /* ── A panel: one box, one name. Every panel of the doors — a stat card, a chart, a documentation panel — is this box with this name, defined here once (house rule 21; Qing, 2026-09-15: "the design, font, color, layout should be always global definition"). control.css may space them (a chart's margin, a card's tighter name) and never restyle them. What a panel holds, in order, is DESIGN.md "A panel's anatomy". ── */ .card,.chart,.doc .panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px} .card .k,.chart .k{font-size:12px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.08em} /* Text links — one look on every admin page: the link colour, never an underline; on hover only the colour changes, lighter, derived from the link hue. Navigation, tabs, buttons, menus and row links are components with their own rules, never plain links (DESIGN.md, "Text links"). */ a{color:var(--link);text-decoration:none} a:hover{color:color-mix(in srgb, var(--link) 65%, var(--text))} /* Controls — one size for every button, field and select on the admin pages (DESIGN.md, "Controls"): 36 px tall, 13 px type, 9 px radius, the same border. One declared variant only: a touch action on a sheet (.sheet .acts .pbtn) is 44px. A row action in a table is the same 36px button (Qing, 2026-09-12: a smaller Restore beside a full-size Save read as an error, twice). */ .pbtn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:36px;min-width:92px;padding:0 16px;font:600 13px var(--f);border-radius:9px;cursor:pointer;border:1px solid var(--border2);background:none;color:var(--text3);text-decoration:none;white-space:nowrap} /* one width floor, so a column of Save · Copy · Remove · Add lines up on both edges (Qing, 2026-09-12); a longer label widens its button */ .pbtn:hover{color:var(--text)} .pbtn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)} .pbtn.primary:hover{opacity:.85;color:var(--bg)} .pbtn.danger{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent)} .pbtn.danger:hover{border-color:var(--danger)} /* every button answers a hover with one change: the ghost its text, the primary its shade, the destructive its border (Qing, 2026-09-17) */ .sheet .acts .pbtn{height:44px;padding:0 20px;font-size:14px} input:where(:not([type]),[type=text],[type=number],[type=url],[type=email],[type=tel],[type=password],[type=search],[type=time],[type=date]),select,textarea{box-sizing:border-box;font:400 13px var(--f);color:var(--text);background:var(--bg);border:1px solid var(--border2);border-radius:9px} input:where(:not([type]),[type=text],[type=number],[type=url],[type=email],[type=tel],[type=password],[type=search],[type=time],[type=date]),select{height:36px;padding:0 12px} select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23888888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center} select{width:150px} /* one width for every select on a page, in a table and in a row alike (Qing, 2026-09-16): the longest option on the doors measures 107px of text ("The website's font"; the widest audit action name 97px), plus 12px padding and 28px for the arrow = 147. An option longer than that is cut, so options stay short. */ textarea{padding:8px 12px;line-height:1.5;min-height:72px;resize:none} /* no grip (Qing, 2026-09-12); a long text scrolls inside, with a visible bar */ input[type=color]{box-sizing:border-box;width:48px;height:36px;padding:3px;border:1px solid var(--border2);border-radius:9px;background:var(--bg)} input[type=file]{box-sizing:border-box;height:36px;padding:6px 12px;font:400 13px var(--f);color:var(--text3);background:var(--bg);border:1px solid var(--border2);border-radius:9px} :where(input,select,textarea):focus{outline:none;border-color:var(--text4)} :where(input,select,textarea):disabled{color:var(--text4);border-style:dashed;cursor:not-allowed} /* Scrollbars are visible wherever something scrolls, in both sets (Qing, 2026-09-12: the bar could not be seen on the light ground, and earlier attempts removed bars instead of showing them): thin, the set's --scrollbar on no track, drawn as long as there is overflow — the standard properties where the browser has them, the WebKit pseudo-elements elsewhere. The rail is the one exception and hides its own (control.css). Never hide a bar to solve its visibility. */ *{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent} /* on every element: scrollbar-width does not inherit */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:5px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-track{background:transparent} .sheet .acts select{height:44px;font-size:14px} /* body > nav only: pages may contain nested