/* ============================================================================ RCS Care — portal design system ---------------------------------------------------------------------------- Subject: pest control for food manufacturing and corporate estates. The buyer is a QA head or facility manager who has to survive an FSSAI / AIB / BRC audit. So the product is not "spraying" — it is the evidence trail: which chemical, what quantity, which technician, confirmed by whom, when. COLOUR IS NOT DECIDED HERE. assets/PALETTE.md is the contract; site.css (marketing) and this file (portals) both implement it verbatim so that a client who clicks "Sign in" does not land in what looks like a different company's product. Do not invent a token or change a value below without changing PALETTE.md first — the two files desynchronise instantly. Palette v2, "colour as light": a gradient mesh of blue → violet → cyan over a deep ground, with glass-style surfaces. --moss therefore still holds a BLUE; the name is kept because site.css re-points the same token and renaming it here would fork the two files. Semantics that survive the recolour, because they are meaning and not decoration: --moss accent / confirmed / done (brand blue) --signal inspection tag, live, awaiting (gold) --alert live sighting, overdue, destructive(red) --info neutral informational (cyan — deliberately NOT the brand blue, since the two sit side by side on metric tiles) WHERE THE MESH IS ALLOWED. A marketing page is looked at; a portal is operated. Mesh and glow are chrome only — the sign-in ground, the page header band, the rail's edge, the field app's top bar, the console strip, the client hero, metric tiles, modal scrims, focus rings. They never sit behind data. There is no mesh under a table, a job list, the operator queue, the chat log or any list that scrolls in bulk: it is a legibility problem first and a frame-rate problem second, on a 2 vCPU ARM box serving mid-range Android phones. WHERE backdrop-filter IS ALLOWED. Three surfaces in the whole portal set, each static and each with an opaque fallback: .card-in the sign-in card (login.html) .modal-scrim the onboarding/job wizard (admin.html) .scrim the site drawer (customer.html) Nothing that scrolls, and nothing with a list under it. The field app's tab bar used to be a blurred surface pinned over a scrolling queue, which is the single worst case for a compositor on a phone; it is opaque now. ========================================================================= */ /* Faces are linked per page — fonts-app.css for the portals, fonts-site.css for the public site. Both now request the same three families; the split is kept so a page can be moved between them without editing its . */ :root { /* ── the mesh: three stops, constant across both themes ─────────────── Grounds change; the light does not. Everything gradient-led is derived from these, which is what keeps the portal and the marketing site the same product under two different ground colours. */ --mesh-1: #1B3BFF; /* blue — the brand's centre of gravity */ --mesh-2: #7C3AED; /* violet — the shift */ --mesh-3: #06B6D4; /* cyan — the lift */ /* dark is the default ground — control rooms and field phones at dusk */ --ink: #05071A; --surface: #0B0F2A; --surface-2: #131A3D; --surface-3: #1C2550; --line: #2A3468; --line-soft: #1A2148; --moss: #3B6BFF; --moss-lift: #7FA5FF; --moss-dim: #1B3BFF; --navy-flat: #1B3BFF; /* section rule — also the theme-color */ --signal: #FFC53D; /* inspection tag / licence mark — the loud thing */ --alert: #FF6B85; /* live sighting / overdue only */ --info: #22D3EE; /* informational — cyan, must not read as brand */ --text: #EEF1FF; --muted: #A9B1DC; --faint: #7A83B8; --glass: rgba(255, 255, 255, .055); --glass-line: rgba(255, 255, 255, .11); --glass-blur: 14px; /* ── derivations, not palette ───────────────────────────────────────── These three are portal-local recipes off contract tokens rather than new colours: the console needs a soft border tint and a legible type colour on a gold fill, and the marketing site does not. They are written as color-mix so they re-derive themselves when the theme flips, and so they can never drift from --signal / --alert. */ --signal-dim: color-mix(in srgb, var(--signal) 42%, var(--ink)); --alert-dim: color-mix(in srgb, var(--alert) 42%, var(--ink)); --signal-ink: var(--ink); /* type ON a --signal fill: 12.6:1 on #FFC53D */ /* Strength of a mesh wash, per theme. Dark grounds swallow a gradient, so they take a lot; a near-white ground shows 13% of a saturated blue very clearly, and anything stronger drops the gold .eyebrow that sits over the page header band below 4.5:1. Measured, not guessed — see PALETTE.md §1. */ --mesh-o: .55; /* Fill percentage for a status pill or badge tint. Lower in the light theme: --alert type on a 16% --alert tint over white is 4.36:1, which is a fail; 11% is 4.78:1. The token is the recipe, not the palette. */ --tint: 16%; /* The primary action is the mesh itself. Both stops carry white at ≥5.7:1, in BOTH themes, because the mesh stops are theme-constant — so one declaration serves light and dark. */ --fill-brand: linear-gradient(135deg, var(--mesh-1), var(--mesh-2)); /* The wash. Declared once, painted by .topbar / .ph-top / .cbar / the sign-in ground / the client hero. Never by anything that holds a list. */ --mesh-wash: radial-gradient(78% 130% at 6% -20%, color-mix(in srgb, var(--mesh-1) 82%, transparent) 0%, transparent 62%), radial-gradient(62% 115% at 88% -8%, color-mix(in srgb, var(--mesh-2) 68%, transparent) 0%, transparent 60%), radial-gradient(64% 130% at 56% 118%, color-mix(in srgb, var(--mesh-3) 50%, transparent) 0%, transparent 64%); --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px -12px rgba(0, 0, 0, .7); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 70px -24px rgba(0, 0, 0, .8); --display: 'Newsreader', Georgia, 'Times New Roman', serif; --body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ease: cubic-bezier(.22, .9, .28, 1); --ease-in: cubic-bezier(.5, 0, .75, 0); } /* Light grounds, PALETTE.md §Light, implemented verbatim. --signal-ink flips to paper because the light --signal (#8A5A06) is a dark gold that carries white at 5.9:1 and would swallow near-black type. */ @media (prefers-color-scheme: light) { :root { --ink: #F4F6FF; --surface: #FFFFFF; --surface-2: #EDF1FF; --surface-3: #E0E7FF; --line: #CFD8F5; --line-soft: #E4E9FB; --moss: #2647D8; --moss-lift: #1B3BFF; --moss-dim: #C9D6FF; --signal: #8A5A06; --alert: #C0304C; --info: #0E7490; --text: #0A1030; --muted: #454E80; --faint: #5C6598; --navy-flat: #2647D8; --glass: rgba(255, 255, 255, .72); --glass-line: rgba(16, 24, 64, .10); --signal-ink: #FFFFFF; --mesh-o: .13; --tint: 11%; --shadow: 0 1px 2px rgba(10, 16, 48, .06), 0 8px 24px -14px rgba(10, 16, 48, .22); --shadow-lg: 0 2px 6px rgba(10, 16, 48, .07), 0 28px 60px -28px rgba(10, 16, 48, .3); } } /* The viewer's explicit toggle must beat the OS preference in both directions, so both are restated at token level. */ :root[data-theme="dark"] { --ink: #05071A; --surface: #0B0F2A; --surface-2: #131A3D; --surface-3: #1C2550; --line: #2A3468; --line-soft: #1A2148; --moss: #3B6BFF; --moss-lift: #7FA5FF; --moss-dim: #1B3BFF; --navy-flat: #1B3BFF; --signal: #FFC53D; --alert: #FF6B85; --info: #22D3EE; --text: #EEF1FF; --muted: #A9B1DC; --faint: #7A83B8; --glass: rgba(255, 255, 255, .055); --glass-line: rgba(255, 255, 255, .11); --signal-ink: var(--ink); --mesh-o: .55; --tint: 16%; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px -12px rgba(0, 0, 0, .7); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 70px -24px rgba(0, 0, 0, .8); } :root[data-theme="light"] { --ink: #F4F6FF; --surface: #FFFFFF; --surface-2: #EDF1FF; --surface-3: #E0E7FF; --line: #CFD8F5; --line-soft: #E4E9FB; --moss: #2647D8; --moss-lift: #1B3BFF; --moss-dim: #C9D6FF; --navy-flat: #2647D8; --signal: #8A5A06; --alert: #C0304C; --info: #0E7490; --text: #0A1030; --muted: #454E80; --faint: #5C6598; --glass: rgba(255, 255, 255, .72); --glass-line: rgba(16, 24, 64, .10); --signal-ink: #FFFFFF; --mesh-o: .13; --tint: 11%; --shadow: 0 1px 2px rgba(10, 16, 48, .06), 0 8px 24px -14px rgba(10, 16, 48, .22); --shadow-lg: 0 2px 6px rgba(10, 16, 48, .07), 0 28px 60px -28px rgba(10, 16, 48, .3); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Newsreader is a transitional serif, not the grotesque this system was first scaled for. It wants looser tracking and more leading, and its variable range tops out at 700 — asking for 800 buys nothing but a clamp. Same treatment site.css gives the public pages, so a heading is the same object on both sides of the sign-in. */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; margin: 0; text-wrap: balance; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } /* The focus ring carries the brand light rather than the licence gold: gold is semantic (inspection tag) and was doing double duty here. --moss-lift is the accent-as-type value in both themes, so the ring is 8.9:1 on the dark ground and 6.7:1 on the light one, with a mesh halo behind it. */ :focus-visible { outline: 2px solid var(--moss-lift); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--mesh-1) 26%, transparent); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .eyebrow { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--signal); font-weight: 500; } .muted { color: var(--muted); } .wrap { width: min(1240px, 100% - 3rem); margin-inline: auto; } /* ── the mesh, and the one rule about it ─────────────────────────────────── .mesh paints --mesh-wash on a pseudo-element behind its host's content. It is opt-in: no element gets it by inheritance, and in particular `body` never carries it, because receipt.html and audit.html load this stylesheet and are sheets of paper. The drift animates `transform` only — a composited property, so the layer is rasterised once and moved, rather than repainting three radial gradients every frame. Static under prefers-reduced-motion. */ .mesh { position: relative; isolation: isolate; overflow: hidden; } .mesh::before { content: ''; position: absolute; inset: -45% -25%; z-index: -1; pointer-events: none; background-image: var(--mesh-wash); opacity: var(--mesh-o); animation: mesh-drift 34s var(--ease) infinite alternate; } @keyframes mesh-drift { from { transform: translate3d(-2%, -3%, 0) scale(1); } to { transform: translate3d(3%, 4%, 0) scale(1.12); } } /* Glass is a treatment, not a default. Three hosts use it; every one of them states an opaque fallback so a browser without backdrop-filter — or a compositor that has given up — still gets a readable card. */ @supports not (backdrop-filter: blur(1px)) { .glass { backdrop-filter: none !important; background: var(--surface) !important; } } /* ── buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .72rem 1.25rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: .875rem; cursor: pointer; transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s, filter .18s; background: transparent; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* White on a flat --moss is 4.44:1 in the dark theme — a fail at this size. The mesh gradient carries it at 6.7:1 (blue stop) and 5.7:1 (violet stop), and is the same object in both themes because the stops are constant. */ .btn-primary { background: var(--fill-brand); color: #fff; box-shadow: 0 6px 20px -10px var(--mesh-1); } .btn-primary:hover { filter: brightness(1.12); box-shadow: 0 8px 26px -10px var(--mesh-2); } .btn-signal { background: var(--signal); color: var(--signal-ink); } .btn-signal:hover { filter: brightness(1.08); } .btn-ghost { border-color: var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 10%, transparent); } .btn-sm { padding: .45rem .85rem; font-size: .8rem; } /* The theme toggle. admin/customer/operator all carry .icon-btn but only site.css defined it, and the portals do not load site.css — so the control that switches light and dark was itself an unstyled UA button: a white rectangle on a navy topbar. Defined here so the portals have it; site.css loads after app.css on the public pages and keeps its own copy. */ .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); transition: all .18s; } .icon-btn:hover { color: var(--text); border-color: var(--moss); } /* ── surfaces ──────────────────────────────────────────────────────────── */ /* Opaque, deliberately. A card is where the work is, and the work needs a ground that does not move under it. */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .pad { padding: 1.25rem; } /* ── status pills: state must read as shape + colour, not colour alone ─── */ .pill { display: inline-flex; align-items: center; gap: .38rem; padding: .2rem .6rem .22rem; border-radius: 999px; font-family: var(--mono); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } /* The tint mixes into --surface rather than into transparent. A pill is a status badge that has to be readable wherever it lands, and the field app puts one in the mesh-lit top bar: over the light theme's wash, gold on a transparent tint fell to 4.1:1. Backing it with the card ground makes the pill's contrast a property of the pill instead of a property of whatever happens to be behind it. */ .pill::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: currentColor; } .pill-done { color: var(--moss-lift); background: color-mix(in srgb, var(--moss) var(--tint), var(--surface)); } .pill-live { color: var(--signal); background: color-mix(in srgb, var(--signal) var(--tint), var(--surface)); } .pill-live::before { border-radius: 999px; animation: blip 1.6s infinite; } .pill-wait { color: var(--muted); background: color-mix(in srgb, var(--muted) var(--tint), var(--surface)); } .pill-alert { color: var(--alert); background: color-mix(in srgb, var(--alert) var(--tint), var(--surface)); } .pill-alert::before { border-radius: 999px; } @keyframes blip { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } /* ── scroll reveal ─────────────────────────────────────────────────────── */ /* Scroll-reveal hides content until JS unhides it, so it is gated on JS being alive. Ungated, a script error or a blocked file leaves a marketing page blank rather than merely unanimated — the visitor sees nothing at all. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* ── shared app chrome (portals) ───────────────────────────────────────── */ .app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; } /* The rail is dense navigation that is on screen the whole time, and its labels are --faint. No wash goes behind it: --faint over a mesh is 3.9:1. It gets the mesh as a 1.5px lit edge instead — painted, not composited, and the one place the identity can appear here for free. */ .rail { background-color: var(--surface); background-image: linear-gradient(180deg, var(--mesh-1), var(--mesh-2) 52%, var(--mesh-3)); background-repeat: no-repeat; background-size: 1.5px 100%; background-position: right top; border-right: 0; padding: 1.4rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .rail-nav { display: flex; flex-direction: column; gap: .15rem; } .rail-nav a { display: flex; align-items: center; gap: .7rem; padding: .58rem .7rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .875rem; font-weight: 500; transition: background .16s, color .16s; } .rail-nav a:hover { background: var(--surface-2); color: var(--text); } .rail-nav a.on { background: color-mix(in srgb, var(--moss) 18%, transparent); color: var(--text); font-weight: 600; } .rail-nav a.on .ic { color: var(--moss-lift); } /* Nav icons are inline SVG, sized in one place so a stroke tweak does not need eleven edits. currentColor lets the .on state recolour them. */ .ic { width: 18px; height: 18px; color: var(--faint); flex: none; } .rail-label { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--faint); padding: 0 .7rem; margin-bottom: .4rem; } .main { padding: 1.6rem 2rem 4rem; min-width: 0; } /* The page header band. This is the portal's hero: it holds an eyebrow, an h1, and the page's controls, and nothing else — no list, no table, no faint type. Self-contained rather than a wash pinned to the top of .main, so it cannot creep under whatever the next section happens to be. */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; padding: 1.15rem 1.3rem; border: 1px solid var(--glass-line); border-radius: var(--radius-lg); background: var(--surface); position: relative; isolation: isolate; overflow: hidden; } .topbar::before { content: ''; position: absolute; inset: -45% -25%; z-index: -1; pointer-events: none; background-image: var(--mesh-wash); opacity: var(--mesh-o); animation: mesh-drift 34s var(--ease) infinite alternate; } /* The wash cannot go stronger than --mesh-o in the light theme: the gold .eyebrow that sits in this band needs the ground to stay above L .748, and .13 already puts it at 4.66:1. So the light theme gets its identity from a lit edge instead of a deeper tint — the same device as the rail's edge and the console tab underline, and it costs one paint. */ .topbar::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--mesh-1), var(--mesh-2) 55%, var(--mesh-3)); } /* ── brand mark ────────────────────────────────────────────────────────── */ .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; letter-spacing: -.015em; font-size: 1.1rem; } /* The mark is the mesh, so it is the same object in both themes and cannot repeat the old failure where the light theme's --moss-dim was a pale tint and white "RCS" vanished into the bottom-right corner. */ .brand-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; background: var(--fill-brand); display: grid; place-items: center; color: #fff; font-size: .78rem; font-family: var(--mono); font-weight: 600; letter-spacing: -.04em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 14px -6px var(--mesh-1); } /* The console header carries the real wordmark. Theme swap copied from site.css verbatim — element+class on both sides, so the two variants can never tie on specificity and render at once. */ .brand img { height: 34px; width: auto; } /* The rail stretches the anchor to its full width; without this the wordmark hugs the left edge instead of sitting centred over the nav column. */ .rail .brand { justify-content: center; } img.logo-dark { display: none; } @media (prefers-color-scheme: dark) { img.logo-light { display: none; } img.logo-dark { display: block; } } [data-theme="dark"] img.logo-light { display: none; } [data-theme="dark"] img.logo-dark { display: block; } [data-theme="light"] img.logo-light { display: block; } [data-theme="light"] img.logo-dark { display: none; } /* ── data table ────────────────────────────────────────────────────────── */ /* Flat and opaque, on purpose. 97 rows over a gradient is a legibility problem and a repaint-per-scroll problem at the same time. */ .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 640px; } th { text-align: left; padding: .7rem .9rem; font-family: var(--mono); font-weight: 500; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: .78rem .9rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background .14s; } tbody tr:hover { background: var(--surface-2); } td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ── metric tiles ──────────────────────────────────────────────────────── */ /* Opaque card, with the tile's own semantic accent bled into the bottom-right corner as light. The glow is kept out of the top-left, where .k sits in --faint; --muted and the display numeral are the only things it reaches. */ .metrics { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; position: relative; overflow: hidden; isolation: isolate; } .metric::before { content: ''; position: absolute; inset: auto -10% -30% auto; z-index: -1; width: 190px; height: 130px; pointer-events: none; background: radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--accent-bar, var(--moss)) 18%, transparent), transparent 72%); } .metric::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--accent-bar, var(--moss)), color-mix(in srgb, var(--accent-bar, var(--moss)) 55%, transparent)); } .metric .k { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .13em; color: var(--faint); } .metric .v { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin-top: .3rem; font-variant-numeric: tabular-nums; } .metric .d { font-size: .76rem; color: var(--muted); margin-top: .15rem; } /* ── forms ─────────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: .35rem; } .field label { font-size: .78rem; font-weight: 600; color: var(--muted); } .input, select.input, textarea.input { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: .6rem .75rem; font-size: .875rem; transition: border-color .16s, background .16s, box-shadow .16s; width: 100%; } .input:focus { border-color: var(--moss); background: var(--surface); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mesh-1) 22%, transparent); } .input::placeholder { color: var(--faint); } /* ── service code (OTP) ────────────────────────────────────────────────── */ .otp { display: flex; gap: .5rem; } .otp input { width: 46px; height: 56px; text-align: center; font-family: var(--mono); font-size: 1.35rem; font-weight: 600; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--text); transition: border-color .18s, transform .18s var(--ease), background .18s; } .otp input:focus { outline: none; border-color: var(--signal); background: var(--surface); } .otp input.filled { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 12%, var(--surface-2)); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .mesh::before, .topbar::before, .ph-top::before, .cbar::before, .hero-strip::before, .sign-ground::before, .sign-glow { animation: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── modal ────────────────────────────────────────────────────────────────── These lived only in admin.html's inline