/* Graticula's console stylesheet: one token layer, then components built out of it. Redesigned 2026-08-17 to an owner-supplied visual target — a navy sidebar, a bright workspace, teal as the working accent and one blue used only for *public*. The brief was explicit that this is not a repaint: *"Do NOT make every element use the same font weight, color, border treatment, or visual importance."* So the file is ordered tokens → shell → components, and a component that needs a new colour takes one from the token block rather than inventing a hex. What it replaced, and why the replacement is structural. The old sheet was one flat list of selectors that had grown a section at a time; it had four places setting a panel's padding and two palettes' worth of greens. Both of today's UI defects (D-46 instances 8 and 10) were shapes rebuilt because finding the existing one was harder than writing another. Tokens plus a short component list is the cheapest defence against the next one. What is deliberately not here. No gradient as a surface, no shadow above 8 px of blur, no rounded corner above 8 px, and no badge for anything that is not a state. Those are the four things that turn an operations console into a template, and the brief named them. */ /* ---------------------------------------------------------------------- tokens */ :root { /* Two families of surface, because there are two environments. The sidebar is navy and everything it holds is light-on-dark; the workspace is near-white and everything in it is dark-on-light. Keeping them as separate token sets is what stops a component drifting into the wrong one — a "muted text" that works on both would be washed out on one of them. */ /* The base is the owner's own number. 2026-08-17: *"soldaki menünün renkleri daha şık. oradaki ana renk #171b49, bizdeki #111d34."* They are right about why, and the reason is the hue rather than the lightness — the two are within a few points of each other for brightness, but ours sat at 210° (a blue-grey slate) and theirs at 234° (an indigo). Slate reads as *chrome*; indigo reads as *a product decided on a colour*. The derived tokens moved with it rather than being kept. A line and a hover surface mixed from slate against an indigo base is what makes a palette look almost-right — so `--nav-line`, `--nav-on` and the two greys are re-derived at the new hue. */ --nav-base: #171b49; --nav-deep: #101336; --nav-line: #272c66; --nav-ink: #eceefb; --nav-muted: #9ea4d2; /* Lightened 2026-08-19: 3.73:1 on `--nav-base`, which is the dark twin of the `--faint` bug above. When `--faint` was fixed for the light surfaces the parallel token on the rail was never re-measured. It carries the item count beside a sidebar row — a second fact, but a fact. #868dbe is 5.09:1 on #171b49 and stays a step below `--nav-muted` (#9ea4d2, 6.74:1). */ --nav-faint: #868dbe; --nav-on: #1e2359; /* 2026-10-16, the owner's reference screens. White cards on a pale grey page and a white header, with blue as the one accent. An hour earlier the grounds were dimmed because the console was "aşırı beyaz"; the owner then supplied the target and said *"bu renkler olsun"*, which is these. The dark theme (header button) is the answer to glare. */ --paper: #f4f6f9; --surface: #ffffff; --surface-2: #f1f4f8; --surface-3: #e7ecf3; --ink: #101826; --muted: #566275; /* Darkened 2026-08-18 from #8b96a7, which was 2.99:1 on white and below AA. A design review caught it on two *new* uses that carry information — a tab's item count and the *by whom* under a date — and then it turned out to be twenty uses, nearly all of them text: rail counts, meter labels, menu notes, the crossing-surface hint under a layer page. So it was never a decoration token; it was a second muted grey that happened to be too light to read. #6b7787 is 4.55:1 and the same hue. Nothing structural moves — it stays a step lighter than `--muted` (#566275, 5.89:1), which is what it is for: a second fact inside a cell whose first fact is already muted. A token that cannot be read is not a lighter shade of a token that can. Darkened again 2026-08-19, because 4.55:1 was measured against one ground and used on four. Three design reviews the same night measured the same failure independently, and so did an arithmetic check afterwards: | ground | #6b7787 | #616b7a | | --- | --- | --- | | `--surface` #ffffff | 4.55 | 5.40 | | `--paper` #f6f8fa | **4.28** | 4.71 → 5.07 | | `--surface-2` #f1f4f8 | **4.13** | 4.89 | | `--surface-3` #e7ecf3 | **3.83** | 4.54 | The three failures are not edge cases: `--paper` is the page's own background, and `h4, div.label` sits directly on it for every section label on Operations and Sources, as does `.tabstrip .count` for the scope counts on Studio's content screen and the group tabs. The 2026-08-18 fix was right about the token and checked it in one place. #616b7a clears AA on the worst ground it is used on, which is the number that matters. It is the lightest value that does — 4.54:1 on `--surface-3` — so the hierarchy above survives: still a step lighter than `--muted`, and 5.07:1 against 5.80:1 on the page's own ground. */ --faint: #616b7a; --rule: #e3e8ef; --rule-strong: #cfd7e3; /* The edge of a control, which is not the same thing as a line between two blocks. WCAG 2.1 SC 1.4.11 asks 3:1 of the visual information that identifies a component, and a text box here has no fill of its own -- its border is the whole of what says *this is a box you type in*. Measured 2026-09-05 by computing the ratios rather than judging them: edge on #ffffff on #f1f4f8 on #e7ecf3 --rule #e3e8ef 1.23 1.12 1.04 --rule-strong #cfd7e3 1.45 1.31 1.22 --control-edge #7e889a 3.57 3.24 3.01 A new token rather than a darker `--rule-strong`. That one is used seventeen times and most of them are decoration -- a hover state, a separator dot, a dashed drop zone -- which the standard does not ask anything of and which a darker grey would make heavier for nothing. This one is used only where a boundary is the control. #7e889a is the lightest colour on this palette's own hue that clears 3.0 everywhere, found by walking the ramp rather than by picking a grey that looked about right: the least ink that satisfies the rule, so the form does not turn into a grid of boxes. */ --control-edge: #7e889a; /* One working accent and one that means something. Teal is *the product doing something* — primary buttons, the active section, focus. Blue appears in exactly one place, the `public` sharing state, because that is the one fact on these screens worth a second hue. Violet is the third and rarest: it marks the Studio side of the switch, so the two environments are told apart by hue and not only by which one is filled in. */ --accent: #1565d8; --accent-hot: #1d74ef; --accent-soft: #e8f0fe; /* Accent text on the soft accent ground: `--accent` is 4.72:1 there; this is 5.78:1 on it and 6.94:1 on white (re-measured for blue, 2026-10-16). */ --accent-ink: #1257c2; /* Text in the accent hue. --accent is a fill; on navy it is 3.4:1 as text, so text never uses it. */ --link: var(--accent-ink); --accent-line: #bcd2fa; --blue: #2f56c8; --blue-soft: #eaefff; --blue-line: #c3cff5; --violet: #6a4bc0; --violet-soft: #f0ebfb; --violet-line: #d9cdf3; /* Cyan is the sidebar's accent and teal is the workspace's, and they are not the same colour. Owner refinement pass 2026-08-17: *"use a brighter cyan/teal accent for the selected navigation item"*, and separately that the page had gone monochrome. A single teal doing both jobs is what made it so — on navy it reads as grey-green, so the selected section had no presence. Cyan is bright enough to hold its own against a dark surface and would be garish on white, which is exactly why there are two. */ --cyan: #4c8fff; --cyan-deep: #1d74ef; /* The primary action's first stop, and it is not `--cyan-deep` — D-233. White on `--cyan-deep` is 2.57:1 and the button's label is ordinary text by WCAG's measure, so the gradient did not reach 4.5:1 until 53% of its own width. This is the least ink on the same hue and saturation that clears it: the ramp walked at 1% steps, where 29% lightness gives 4.49 and 28% gives 4.79. `--cyan-deep` keeps its own uses, which are decoration and a logotype rather than a ground for text. */ --primary-from: #0b7f84; --indigo: #2a3f7a; --indigo-glow: #3b52a8; /* Status: hue *and* lightness differ, so a state is never carried by colour alone. Two greens, for the reason there are two teals. Owner 2026-08-17: *"service health'taki donut'ın renkleri, alttaki lejant renkleri güzel"* — theirs are brighter than ours were, and the reason ours were dark is that the same token was doing two jobs: text on a pale badge, where it must be dark enough to read, and a dot or an arc, where dark reads as muddy. So `--ok` stays the text colour and `--ok-dot` is the indicator, and the same for the other two. */ --ok-dot: #21b56a; --warn-dot: #e0a020; --alert-dot: #e0503f; --ok: #1c7d4d; --ok-soft: #e6f4ec; --ok-line: #b6ddc6; --warn: #8a5a08; --warn-soft: #fdf2e0; --warn-line: #e8d3a8; --alert: #a5342a; --alert-soft: #fceceb; --alert-line: #edc4c0; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Five sizes and three weights, and that is the hierarchy. The brief asked for strong typographic hierarchy and warned against identical typography for every information level. A service name is 15/600; its type and counts are 12.5/400 muted; a section label is 11/600 uppercase and faint. Nothing else is allowed a size. */ /* Raised about a tenth on 2026-08-17, in the tokens rather than per component. Owner polish pass: *"increase the overall UI scale slightly (~10%). The reference feels more confident and less compressed."* Every size on these screens is one of these five, so the whole interface moves together and the ratios between the levels — which are the hierarchy — are unchanged. Editing twenty components by hand is how a type scale stops being one. */ --t-page: 26px; --t-head: 17px; --t-body: 15px; --t-small: 13.5px; --t-label: 11.5px; --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 22px; --gap-6: 32px; --round: 5px; --round-lg: 8px; /* Two shadows, both nearly invisible. Depth here comes from the border and the surface, not from a glow; the brief's list of things to avoid has "excessive shadows" on it and this is what the restraint looks like as a number. */ --lift: 0 1px 2px rgba(16, 24, 38, .05); --lift-2: 0 4px 12px -6px rgba(16, 24, 38, .18); accent-color: var(--accent); } * { box-sizing: border-box; } /* `hidden` has to win, and it did not. The browser's rule for the attribute is `[hidden] { display: none }` at user-agent weight, which any author rule with a `display` beats — so `#surfaces { display: flex }` kept the Server/Studio switch on screen for a reader allowed only one surface, although the router had set `hidden` on it. Found 2026-08-17 the first time a publisher account existed to look with; it had been false the whole time. Written as a class rather than `#surfaces[hidden]` because the next element given both would fail the same way and nobody would connect the two (D-46 instance 9). */ [hidden] { display: none !important; } body { margin: 0; background: var(--paper); color: var(--ink); font: var(--t-body)/1.55 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* A visible focus ring, on one rule rather than per control. Keyboard reachability is not a feature to remember per element. */ /* `--accent`, not `--accent-hot`: the lighter teal was 2.98:1 on the paper, under the 3:1 a focus ring needs. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ----------------------------------------------------------------------- shell */ /* One column, and the sections are a bar in the header — ADR-187. The rail that held them is gone: ArcGIS Portal and Server Manager both navigate from the top, and a page with folders or filters used to have two left columns, the app's and its own. The left column now belongs to the page (`.view.withside` below), and a page that needs none has the full width. */ #shell { display: block; min-height: 100vh; } /* The mark, the name and which surface this is, at the head of the bar. */ #brand { display: flex; align-items: center; gap: 10px; flex: none; color: var(--ink); text-decoration: none; } #brand:hover { text-decoration: none; } #brand .mark { width: 28px; height: 28px; flex: none; border-radius: var(--round); background: var(--accent); border-radius: 50%; display: grid; place-items: center; } #brand .mark svg { width: 16px; height: 16px; display: block; } #brand .name { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* Teal for Server and violet for Studio, the two halves of the switch beside it. */ #brand .badge { font-size: var(--t-label); font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: var(--round); background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); } /* The sections: words with an underline, the way Portal draws its bar. The links stretch to the header's full height so the underline sits on the header's own bottom rule, and the selected one is teal and heavier — two signals, neither of them only colour. */ #tabs { display: flex; align-self: stretch; gap: 2px; margin-left: var(--gap-3); flex: none; } /* The bar never shrinks; what gives way is named, in order. The first build let `#tabs` shrink, and the design review found Studio's last tab painted under the Server|Studio switch at 1,440 pixels and focus landing on it there. Now the health line goes first (its dot keeps the sentence as a label), then the product's name, and below 1,100 pixels the bar takes a row of its own. */ #brand, #surfaces, header .right, #signout { flex: none; } #who, #signout { white-space: nowrap; } #tabs a:focus-visible { outline-offset: -4px; } /* Studio's five words need the room sooner than Server's four (design review re-measure, 2026-10-16). */ @media (max-width: 1480px) { :root[data-surface="studio"] #healthLine { display: none; } } @media (max-width: 1260px) { #healthLine { display: none; } } /* The name used to give way to the section bar below 1,240 pixels; the reader's controls left the bar, so it stays above a phone. */ @media (max-width: 480px) { #brand .name { display: none; } } #tabs a[data-tab], #tabs a[data-link] { display: flex; align-items: center; padding: 0 12px; color: var(--muted); font-size: var(--t-body); font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } #tabs a[data-tab]:hover, #tabs a[data-link]:hover { color: var(--ink); text-decoration: none; } #tabs a[data-tab][aria-current="page"] { color: var(--link); border-bottom-color: var(--accent); font-weight: 600; } /* A page's own left column — what Server Manager draws as the grey list beside a page. `drawSubpages` puts the siblings of a page there (Site's Data sources, Status and General; Security's Members, Roles, Sign-in and Apps) and adds `withside`; every other child of the page stays in the second column, in its own order. */ .view.withside.on { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--gap-6); align-items: start; } .view.withside > * { grid-column: 2; min-width: 0; } .view.withside > nav.subpages { grid-column: 1; grid-row: 1 / span 60; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; margin: 0; padding: 0; border: 0; background: none; } .view.withside > nav.subpages a { padding: 8px 12px; border-radius: 0 var(--round) var(--round) 0; border: 0; border-left: 3px solid transparent; margin: 0; color: var(--muted); font-size: var(--t-body); text-decoration: none; } .view.withside > nav.subpages a:hover { background: var(--surface-2); color: var(--ink); } .view.withside > nav.subpages a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; } /* An ambient tint under the workspace, and the panels stay white. Owner polish pass: *"the main workspace is currently too uniformly gray. Introduce an extremely subtle ambient cyan/violet tint or gradient in the page background, especially around the upper content area."* Two washes, both under 4%, and neither is a surface. Cyan enters from the left where the content starts and violet from the right where the primary action sits, so the tint agrees with where the eye already goes. `background-attachment: fixed` keeps it a property of the window rather than of the scroll position — a gradient that slides under a long table reads as a rendering fault. */ #main { min-width: 0; display: flex; flex-direction: column; background: var(--paper); background-attachment: fixed; } /* --------------------------------------------------------------------- top bar */ header { display: flex; align-items: center; gap: var(--gap-4); padding: 0 clamp(var(--gap-5), 3vw, 44px); height: 58px; background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 900; } header .right { margin-left: auto; display: flex; align-items: center; gap: var(--gap-3); } /* The environment switch, and its two halves are told apart by hue. ADR-034: an administrator moves between Server and Studio constantly, and the switch is only in the document for somebody who may be in both. Filled is where you are; teal is Server and violet is Studio, so the answer to *which one am I in* does not depend on noticing which button is darker. */ #surfaces { display: flex; gap: 3px; padding: 3px; background: var(--surface-2); border-radius: var(--round); border: 1px solid var(--rule); } #surfaces a { padding: 5px 14px; border-radius: 3px; font-size: var(--t-small); font-weight: 500; color: var(--muted); text-decoration: none; } #surfaces a:hover { color: var(--ink); text-decoration: none; } #surfaces a[data-surface="server"][aria-current] { background: var(--accent); color: #fff; } #surfaces a[data-surface="studio"][aria-current] { background: var(--accent); color: #fff; } /* `#healthDot` is a `.dot` and takes its states from there. Its own id rules, removed 2026-09-25, out-weighed `.dot.ok` and painted every state `--faint`, while refreshHealth() set a class (`bad`) that no rule named — so a healthy server showed a grey dot. */ /* It gives way to the section bar: one line, cut with an ellipsis, and the full text in its title. */ #healthLine { font-size: var(--t-small); color: var(--muted); min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #who { font-size: var(--t-small); color: var(--muted); text-align: right; line-height: 1.35; } #who b { display: block; color: var(--ink); font-size: var(--t-body); font-weight: 600; } /* --------------------------------------------------------------------- content */ /* The workspace uses the width it has. Owner refinement pass: *"the current content area feels slightly compressed toward the top-left… use the available desktop width more confidently."* The padding grows with the viewport instead of being one number, and the ceiling is high enough that a wide screen is filled and low enough that a line of prose never runs to 200 characters. */ .wrap { padding: var(--gap-6) clamp(var(--gap-5), 3vw, 44px); max-width: 1720px; } /* A page says what it is. The brief asked for a strong heading and a secondary line, and the pair is worth more than it looks: this console has eight screens that were previously distinguishable only by which table was on them. */ .pagehead { display: flex; align-items: flex-start; gap: var(--gap-4); margin-bottom: var(--gap-6); } /* A stronger title, and the strongest thing on the page. 30 pixels at 650 against a service name's 15.5 at 650: the difference is size and nothing else, which is what makes them read as the same voice at two levels rather than as two decisions. */ .pagehead h2 { /* 26/600 from 33/650, 2026-09-25, and through `--t-page` at last. Owner: *"a professional look and feel"*, chosen as the calmer enterprise direction. The title was the loudest thing on every screen and the token that named its size was declared and never read. */ margin: 0; font-size: var(--t-page); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; } .pagehead p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; } .pagehead .right { margin-left: auto; display: flex; align-items: center; gap: var(--gap-2); /* `flex: none`, because the default let a verb break in half. The title block beside it is `flex: 0 1 auto` too, so a long subtitle shrank this slot below its buttons' natural width and a group's page printed *Add / member* and *Share a / service* on two lines each at 1366px. The title is the thing with a good line break in it; a button label is not. */ flex: none; } .lede { color: var(--muted); max-width: 88ch; margin: 0 0 var(--gap-4); } .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--round-lg); box-shadow: var(--lift); margin-bottom: var(--gap-4); } .panel > table { margin: 0; } .pad { padding: var(--gap-4) var(--gap-5); } /* A section label: the smallest, faintest thing on the page, and the reason a panel does not need a heavier heading to be legible. */ /* `.label` is a section label and nothing else, and naming it that was a mistake for one build. The sidebar's rows carry a `.label` span for their text, so this rule shouted every section name — SERVICES, DATA SOURCES, COLLAPSE — in 11-pixel uppercase. A class named after a generic English word will collide; the fix is the scope, because renaming one of the two would leave the next `.label` to collide again. */ h4, div.label, .widget > .label, .rail-head { margin: 0 0 var(--gap-3); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); } .page h4 { padding-bottom: var(--gap-2); border-bottom: 1px solid var(--rule); } .page h4 + h4, .page > * + h4 { margin-top: var(--gap-6); } .hint { font-size: var(--t-small); color: var(--muted); margin: 0 0 var(--gap-3); max-width: 78ch; } .hint:last-child { margin-bottom: 0; } .page .hint { max-width: 100%; } /* `text-transform: none` because a value is never a label, and one screen proved it. `label.field` uppercases — it is a two-word caption over a control — and `.val` is used *inside* one to put a sentence or a fact under the input. So the geodatabase publish screen, which echoes the service name into the URL it is about to create, rendered `/REST/SERVICES/HOSTED/PROJECT_INFORMATION/FEATURESERVER` in capitals: an operator could not tell whether they had typed `Project_Information`, `project_information` or `PROJECT_INFORMATION`, which is the one thing that echo exists to show. Design review 2026-08-19. Reset here rather than at the call site, because it is wrong everywhere the pattern is used and elsewhere it was only shouting. */ .val { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: var(--t-small); color: var(--muted); text-transform: none; letter-spacing: normal; } .name { font-weight: 600; } .num { text-align: right; font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); } code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; color: var(--muted); } .bad-inline { color: var(--alert); font-size: var(--t-small); } /* A fact worth noticing that is not a failure -- the geodatabase report's flattened elevation (D-107). `.bad-inline` would read as *this layer went wrong* and it did not: it published, and something about it was lost on the way in. */ .warn-inline { color: var(--warn); font-size: var(--t-small); } .row { display: flex; gap: var(--gap-2); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--gap-3); } /* ---------------------------------------------------------------------- tables */ table { width: 100%; border-collapse: collapse; font-size: var(--t-body); } /* The header is a label row, not a band. Owner refinement pass: the table *"still feels too much like the old interface"*. A filled grey header with a heavy rule under it is the shape of a 2008 grid; this is uppercase 11-pixel labels on a barely-tinted surface with one hairline, so the first strong thing on the screen is a service name rather than the word SERVICE. */ th { text-align: left; padding: 14px var(--gap-4) 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--rule); white-space: nowrap; } th:first-child { border-top-left-radius: var(--round-lg); } th:last-child { border-top-right-radius: var(--round-lg); } /* Taller rows and a lighter separator. The brief asked for row height, vertical alignment and subtle row separators in one breath, and they are one thing: at 12 pixels of padding a full-weight rule is needed to tell rows apart, and at 18 the eye does it from the spacing, so the rule can drop to a tint. Density is unchanged in the sense that matters — the same nine services fit a screen. */ /* Vertical padding is the row's presence and horizontal padding is the table's budget. The 10% scale-up pushed the actions column off a 1440-pixel viewport, and the fix is not narrower rows — it is 16 pixels of gutter instead of 22, six columns' worth of which is 72 pixels back. Row height, which is what the eye reads as generous, is untouched. */ td { padding: 15px var(--gap-4); border-bottom: 1px solid #eef1f6; vertical-align: middle; } tr:last-child td { border-bottom: 0; } /* The preview and the name are one unit, so the gutter between them is small. At the row's own padding they read as two columns that happen to be adjacent; at 14 the picture belongs to the name beside it, which is what the brief meant by the preview being integrated into the row. */ #services td:first-child { padding-right: 14px; } /* The name column takes the width, and its caption does not wrap. `look_EarlyAlert · 3 layers, 1 group` was breaking across two lines and making one row taller than the rest — a ragged table reads as a bug. Giving the column 42% and the caption `nowrap` fixes both, and the states beside it need only what their badges are wide. */ /* The name column takes what is left rather than a fixed share. A 42% width was holding the caption on one line and, after the scale-up, shoving the actions off the screen — `auto` plus a non-wrapping caption does the first job without the second. The states beside it need only what their badges are wide, which is what `width: 1%` on a nowrap cell asks for. */ #services .rowmeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #services td:nth-child(n+3):not(.svcbody) { width: 1%; white-space: nowrap; } /* The row is clickable and says so once, on hover. Not a cursor change plus a colour plus an arrow: one signal. The click itself asks *what was clicked* rather than carrying a list of exceptions, which is how a Stop button once opened a service page (D-46). */ tr.pick { cursor: pointer; } tr.pick td { transition: background .1s; } /* Hover tints the row and leaves a teal edge on it. One signal was a background change, which on a near-white surface is almost nothing; the edge is what makes *this row is the one under the pointer* readable at a glance without darkening the row enough to fight the previews for attention. */ tr.pick:hover td { background: var(--surface-2); } tr.pick:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent-hot); } /* `nowrap` was what made two tables wider than the window. Measured 2026-08-19, after the closed menu sheets were fixed and the overflow did not go away: the actions cell held two or three buttons and a row menu on one unbreakable line, so Server's services list came to 1100 pixels and Studio's content list to 1107 against a 1024 viewport — and the page scrolled sideways, carrying the navigation column out with it. Wrapping rather than a scroll container, because these tables carry row menus. A `widetable` would clip an open dropdown — a scroll box clips absolutely positioned descendants — so the fix has to make the row narrower rather than hide it. Two buttons over two lines in a cell nobody reads as prose is a fair trade for a page that fits. And `display: flex` on the `` was the wrong way to do it — that replaces `table-cell`, so the browser wraps the cell in an anonymous one and the content escapes the column instead of wrapping inside it. Measured: the buttons still stuck out, now at right=1091 with no ancestor growing to match, which is the signature of content leaving its cell. Removing `nowrap` is the whole fix: the buttons are inline-blocks with whitespace between them and wrap on their own. */ td.acts { text-align: right; } td.acts > * + * { margin-left: var(--gap-1); } .empty { color: var(--muted); font-size: var(--t-small); padding: var(--gap-5) var(--gap-4); } /* --------------------------------------------------------------------- buttons */ button, .btn { font: 500 var(--t-small) var(--sans); padding: 7px 14px; border: 1px solid var(--control-edge); border-radius: var(--round); background: var(--surface); color: var(--ink); cursor: pointer; } button:hover { background: var(--surface-2); } button:disabled { opacity: .45; cursor: default; } button:disabled:hover { background: var(--surface); } /* Superseded 2026-09-25 by the rule below; kept as the record of D-233. Until then the primary action carried the product's gradient, the only one in the workspace. Owner refinement pass: *"visually give it the stronger cyan → blue/violet treatment from the approved design."* One element having it is what makes it read as *the* action; two would make it a theme, which is on the list of things to avoid. Its first stop is `--primary-from` and not `--cyan-deep` — [D-233](../../../docs/architecture-debt.md). White on `--cyan-deep` is **2.57:1**, and the label is 15px at weight 600, which is ordinary text by WCAG's measure and not large. The gradient only reached 4.5:1 at **53% of its own width**, so *Sign in*, *Add a connection…*, *Go* and *Resume* all failed 1.4.3 across their leading half on every screen. `--primary-from` is the least ink on this same hue and saturation that clears it — the ramp walked at 1% steps, 29% lightness gives 4.49 and 28% gives 4.79 — which is how `--control-edge` was chosen for [D-215](../../../docs/architecture-debt.md) and for the same reason: a colour picked by eye is a colour that drifts back. A darker stop rather than a text shadow, which is what the web usually reaches for and is the worst of the three options the row named: it trades a ratio anybody can compute for one nobody can. */ /* Solid teal, 2026-09-25. The teal-blue-violet gradient and its coloured glow were the one decorative surface on a working screen; the calmer enterprise direction makes the primary the accent and nothing else. White on `--accent` is 5.0:1, and 4.8:1 under the hover filter. It keeps its weight and loses its size: the same height as the buttons beside it. */ button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; padding: 7px 16px; box-shadow: var(--lift); transition: filter .12s; } button.primary:hover { background: var(--accent); /* Hover darkens rather than brightens — D-233's second half, which nothing had named. `brightness(1.06)` lightened the ground and left the text at white, because white is already clipped: the middle stop went 4.88 → 4.41 and the whole button failed AA *on hover* even before its first stop was corrected. So the state that says *you are about to press this* was the least readable one. Darkening filters the label too — white becomes #f0f0f0 — and the worst stop still measures 4.67:1. A filled button that deepens under the pointer is also the ordinary affordance; brightening one was never more than a habit. */ filter: brightness(.9); } button.primary .plus { font-weight: 400; margin-right: 7px; opacity: .9; } button.tiny { padding: 5px 10px; font-size: 12px; } button.ghost { border-color: transparent; background: none; color: var(--muted); } button.ghost:hover { background: var(--surface-2); color: var(--ink); } /* Destructive actions do not compete. The brief: *"Delete should NOT compete visually with normal actions."* So `danger` is not a red button — it is an ordinary one whose text turns red on hover, and it lives in the overflow menu where the row is concerned. */ button.danger { color: var(--alert); } button.danger:hover { background: var(--alert-soft); border-color: var(--alert-line); } /* The overflow menu: `
` rather than a script-driven popover, because the element already keeps the open/close state. It does not close on Escape or on a press outside; console.js does both for every menu (sweep 2026-10-19). */ .menu { position: relative; display: inline-block; } .menu > summary { list-style: none; cursor: pointer; padding: 5px 9px; border: 1px solid transparent; border-radius: var(--round); color: var(--muted); font-size: 15px; line-height: 1; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary:hover { background: var(--surface-2); color: var(--ink); } .menu[open] > summary { background: var(--surface-2); border-color: var(--rule); } /* A closed menu takes no space, and it was taking 450 pixels. Measured 2026-08-19 while chasing a horizontal overflow the design reviews found on four screens: a closed `
` still gave its `.sheet` a layout box — `display: block`, `offsetParent` non-null, 450px wide, its right edge at x=1083 in a 1024 viewport — so ten row menus were what pushed `document.body.scrollWidth` to 1100 on Server's services list and 1107 on Studio's content list. The tables themselves fit: 820 pixels inside an 820-pixel panel. Which is why neither of those tables is wrapped in `widetable`. Wrapping them would have hidden the symptom and clipped every open menu, since a scroll container clips absolutely positioned descendants. Members and the group's Content tab *are* wrapped, because those tables are genuinely wider than their panels and carry no row menu. */ .menu:not([open]) .sheet { display: none; } .menu .sheet { position: absolute; right: 0; top: calc(100% + 4px); z-index: 800; min-width: 210px; padding: var(--gap-1); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--round); box-shadow: var(--lift-2); text-align: left; } .menu .sheet button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 3px; font-weight: 400; } .menu .sheet button:hover { background: var(--surface-2); } /* A link in a menu is one of its items, not a link in a sentence: the buttons' block, padding and ink. It was blue, larger and flush left above 760 pixels (UX sweep 2026-10-19). */ .menu .sheet a { display: block; padding: 8px 10px; border-radius: 3px; color: var(--ink); font: 400 var(--t-small) var(--sans); text-decoration: none; } .menu .sheet a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .menu .sheet a.danger { color: var(--alert); } .menu .sheet a.danger:hover { background: var(--alert-soft); color: var(--alert); } .menu .sheet .note { padding: 6px 10px 8px; color: var(--faint); font-size: 11.5px; } /* -------------------------------------------------------------------- controls */ input, select, textarea { font: var(--t-small) var(--sans); padding: 7px 10px; border: 1px solid var(--control-edge); border-radius: var(--round); background: var(--surface); color: var(--ink); } input:focus, select:focus, textarea:focus { border-color: var(--accent); } textarea { font-family: var(--mono); width: 100%; line-height: 1.45; } select { padding-right: 6px; } label.field { display: flex; flex-direction: column; gap: 3px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 600; } /* A number reads as a sentence, with the unit outside the box. */ /* Sign-in providers — ADR-088: a provider's way in on the sign-in panel, and a checkbox label in a form. */ #signinProviders { margin: 4px 0 14px; } /* A secondary button, drawn as one: the form's own Sign in is the page's one primary action. */ #signinProviders a.provider { display: block; text-align: center; margin-bottom: 8px; text-decoration: none; padding: 10px 16px; border: 1px solid var(--control-edge); border-radius: var(--round); background: var(--surface); color: var(--ink); font-weight: 600; } #signinProviders a.provider:hover { background: var(--surface-2); } #idpForm .check { display: flex; gap: 8px; align-items: center; margin-top: 10px; } #idpForm .row input[readonly] { flex: 1; font-family: var(--mono, monospace); } #idpForm input[type=text], #idpForm input[type=url], #idpForm input[type=password] { width: 100%; max-width: 520px; } #idpForm h5 { margin: 18px 0 4px; } #idpForm .hint { margin: 2px 0 8px; } .idpissuer code { overflow-wrap: anywhere; } .idpissuer .hint { display: block; margin: 0; } #idpGroups .valuesgrid input[type=text] { width: 100%; min-width: 14ch; } #idpGroups .valuesgrid select { min-width: 16ch; } #idpGroups .tablewrap { overflow-x: auto; max-width: 100%; } #idpGroups .picker { min-width: 0; max-width: 100%; } #idpGroups .row.left, #idpForm .row.left { justify-content: flex-start; } #idpForm #idpIssuer, #idpForm #idpClient, #idpForm #idpUserBase, #idpForm #idpUserFilter { font-family: var(--mono, monospace); } #view-signin .tablewrap { overflow-x: auto; max-width: 100%; } /* Any control the page marks invalid, since 2026-09-25. This was scoped to `#idpForm`, so the three other places console.js sets `aria-invalid` (a field map, a schedule's minutes, a refused value) announced the error and drew nothing. */ input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alert); } @media (max-width: 480px) { /* The reply URL and redirect URI were cut to their host at 390 px: the box takes the line, Copy the next. */ .idpform .row { flex-wrap: wrap; } .idpform .row input[readonly] { flex: 1 1 100%; } } /* The .sr-only header of the provider list escaped the card at 390 px: its absolute box needs a positioned card. */ #view-signin .panel { position: relative; } /* An empty list is a sentence, not column headings over one (sweep 2026-10-19). */ #view-signin table:has(td.empty) thead { display: none; } #view-signin td.empty { padding: var(--gap-5); } #appRows button.danger { border-color: var(--alert-line); } @media (max-width: 719px) { #view-signin .panel table.rowblocks { min-width: 0; } #idpRows td.idpacts { grid-column: 1 / -1; grid-row: auto; text-align: left; } #view-signin table.rowblocks code { overflow-wrap: anywhere; } } /* At a phone's width the list scrolls inside its card, as the Domains screen's does. */ @media (max-width: 760px) { #view-signin .panel { overflow-x: auto; } #view-signin .panel table { min-width: 560px; } #view-signin .panel table:has(td.empty) { min-width: 0; } #view-signin .panel table:has(td.empty) thead { display: none; } } /* Where a shared domain is used — ADR-087. A short list under its count, one field a line. */ .domainuses { margin: 4px 0 0; padding-left: 1.1em; font-size: var(--t-small); } .domainuses li { padding: 2px 0; } #valuesShared { max-width: 100%; } /* At a phone's width the table scrolls inside its card rather than the page sideways — design review 2026-09-24 measured 539 px of page in a 390 px window — and an empty one does not size itself by its head. */ @media (max-width: 760px) { .domainstable { overflow-x: auto; } .domainstable table { min-width: 460px; } .domainstable table:has(td.empty) { min-width: 0; } .domainstable table:has(td.empty) thead { display: none; } .valuesedit { overflow-x: auto; } } /* The map ground — ADR-086. The available services never move; the stack is the drawing order, top first. */ .groundpick { border: 0; padding: 0; margin: var(--gap-3) 0 0; max-width: 620px; } .groundpick legend { padding: 0; margin-bottom: var(--gap-2); font-size: var(--t-body); } .groundopt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--gap-2); align-items: center; min-height: 44px; } .groundopt input { width: 18px; height: 18px; margin: 0; } .groundopt label { overflow-wrap: anywhere; } .groundopt .warn-inline { grid-column: 2; } .pill.groundpill { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .pill.groundpill::before { display: none; } .groundcount { font-weight: 400; color: var(--muted); margin-left: var(--gap-2); font-size: var(--t-small); } .groundstack { margin: var(--gap-2) 0 0; padding: 0; list-style: none; max-width: 620px; } .groundstack li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--gap-2); min-height: 44px; border-bottom: 1px solid var(--rule); } .groundstack .groundname { font-weight: 600; } .groundstack .warn-inline { flex-basis: 100%; order: 3; padding-bottom: 6px; } .groundmove { margin-left: auto; display: inline-flex; gap: 4px; } .groundmove button { min-width: 44px; min-height: 44px; } @media (max-width: 600px) { #view-settings .row .tiny { min-height: 44px; } } .setting { display: flex; align-items: center; gap: var(--gap-3); padding: 7px 0; max-width: 620px; } .setting .q { flex: 1; font-size: var(--t-body); } /* 116px suits a number with a unit beside it, which is what every other setting on this page is. A checkbox is not one: measured 2026-08-19, the delete lock came out 116 pixels wide with its own Locked label pushed to the far side of the box, so the row read as two unrelated things. */ .setting input:not([type=checkbox]), .setting select { width: 116px; text-align: right; font-family: var(--mono); } .setting .u { width: 68px; color: var(--muted); font-size: var(--t-small); } /* Under a limit's box: whether it is set here or inherited, and what is in force (UX sweep 2026-10-19, finding 6). */ .hint.inherit { margin: 0 0 var(--gap-3); max-width: 620px; } .inheritstate { display: block; color: var(--ink); } .inheritstate .tag { display: inline-block; margin-right: 8px; padding: 0 6px; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 18px; vertical-align: 1px; } .inheritstate .tag.set { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); } .inheritstate:empty { display: none; } /* Links in running text are underlined, not told apart by colour alone (UX sweep 2026-10-19, finding 15). */ :root[data-surface="server"] #view-service p a:not(.btn), :root[data-surface="server"] #view-service dd a:not(.btn), #view-operations p a:not(.btn), #view-sources p a:not(.btn), #view-settings p a:not(.btn), #view-logs p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--gap-5); max-width: 580px; } .grid2 label { display: flex; align-items: center; gap: var(--gap-2); padding: 5px 0; font-size: var(--t-body); } .grid2 label.off { color: var(--faint); } /* One option a line, with its note under it rather than squeezed into a grid cell (UX sweep 2026-10-19, finding 20). */ .checklist { display: grid; gap: 2px; max-width: 580px; } .checklist label { display: flex; align-items: center; gap: var(--gap-2); padding: 5px 0; font-size: var(--t-body); } .checklist .hint { margin: -4px 0 4px 26px; } .toolbar { display: flex; align-items: center; gap: var(--gap-3); padding: var(--gap-3) var(--gap-4); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--round-lg); margin-bottom: var(--gap-4); box-shadow: var(--lift); } .toolbar input[type=search], .toolbar input[type=text] { flex: 0 1 360px; } /* Wrapping, because one of these is a sentence. `nowrap` was right for the short values it was written for and made the page scroll sideways at 1024px on the Anonymous view, whose toolbar carries *"Three requests per layer: the service document, the layer document, and a count query."* Measured 2026-08-19: `body.scrollWidth` 1054 against a 1024 viewport, and no other toolbar overflowed — so the rule was one long value away from being wrong rather than wrong in general. A toolbar is a row of facts, and a fact that needs two lines takes two. */ .toolbar .val { min-width: 0; } /* Ten rows a page on Server's listings — owner 2026-08-18. Sits under the panel it pages, right-aligned, because that is where a reader's eye finishes a table. Nothing but the two arrows and which rows are on screen: a pager that offers page numbers on a list of a thousand offers a hundred links nobody clicks. */ .pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-3); margin: calc(-1 * var(--gap-2)) 0 var(--gap-4); padding: 0 var(--gap-2); } .pager .val { white-space: nowrap; } .pager button { min-width: 2.2em; } dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--gap-4); margin: 0; font-size: var(--t-small); } dl.facts dt { color: var(--muted); } /* `overflow-wrap: anywhere`, not `word-break: break-all`. `break-all` breaks every word at the edge whether it needs to or not, so a facts list 900 pixels wide split `JPEG` into `JPE` and `G`. `anywhere` breaks only a word that cannot fit — which is what these values need, because a path or a format list has no spaces to break at and a wkid has nothing to gain from being split at all. */ dl.facts dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; } dl.facts dd .mono { font-weight: 600; color: var(--ink); } dl.facts dd .why { font-family: var(--sans); font-weight: 400; word-break: normal; color: var(--muted); } .group { border-top: 1px solid var(--rule); padding-top: var(--gap-4); margin-top: var(--gap-4); } .group:first-child { border-top: 0; padding-top: 0; margin-top: 0; } /* ---------------------------------------------------------------------- states */ /* A badge is for a state, and for nothing else. The brief: *"Do not turn every piece of metadata into a badge."* Two things on these screens are states — whether a service answers, and who may read it — so two families of badge exist and a count or a name never gets one. The dot carries the same information as the colour, so a state is not colour alone. */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px 3px 8px; border-radius: 4px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--muted); white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; opacity: .8; } /* A sharing scope gets a glyph instead of a dot. Owner 2026-08-17: *"sharing'deki icon mantığı güzel."* It is — *public* and *private* are the two facts on this screen somebody scans for, and a globe and a padlock are read before a word is. The dot is suppressed where an icon replaces it, so a badge never carries both; and the icon inherits `currentColor`, so the three scopes keep the hue that already told them apart. */ .pill.withicon::before { display: none; } .pill svg { width: 12px; height: 12px; flex: none; } .pill svg * { vector-effect: non-scaling-stroke; } /* The same treatment on a button: a verb reads faster with its shape beside it. */ button .ico { font-size: 9px; margin-right: 7px; opacity: .75; vertical-align: 1px; } button:hover .ico { opacity: 1; } .pill.p-started, .pill.p-ok, .pill.p-usable, .pill.p-active { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .pill.p-stopped, .pill.p-degraded, .pill.p-disabled { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .pill.p-unusable, .pill.p-delete { background: var(--alert-soft); border-color: var(--alert-line); color: var(--alert); } /* Started and failing: requests reach it and get a server error (UX sweep 2026-10-19, finding 1). */ .pill.p-failing { background: var(--alert-soft); border-color: var(--alert-line); color: var(--alert); } /* Running and refusing, which is a state and not a status — D-232. It sits *beside* the started pill rather than replacing it, so it is deliberately the quieter of the two: amber like `stopped`, because the consequence is the same to a client, and not red, because nothing has failed and the end is already scheduled. `--warn` carries the tone; the row that draws it says why in its title. */ .pill.p-refusing { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); margin-left: 6px; } .pill.p-public { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); } .pill.p-organization { background: var(--violet-soft); border-color: var(--violet-line); color: var(--violet); } .pill.p-private { background: var(--surface-3); border-color: var(--rule-strong); color: var(--muted); } /* Not a state: hosted/registered is a fact about where the data lives, so no dot and no colour. */ .pill.p-hosted, .pill.p-registered { background: var(--surface-2); color: var(--muted); } .pill.p-hosted::before, .pill.p-registered::before { display: none; } /* Kept warm (ADR-218) is a state, and a calm one: nothing is wrong with a pinned service, so it wears the neutral ground and no colour — the head card's started/stopped pill stays the one that is read first. */ .pill.p-pinned { background: var(--surface-2); color: var(--muted); } #heroPin:empty { display: none; } #servicePinSays:empty { margin: 0; } /* The Parameters page's Kept warm section: the state, then its one button beside it rather than across the page. */ .pinrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2) var(--gap-4); margin: var(--gap-3) 0; } .pinstate { margin: 0; flex: 0 1 auto; color: var(--ink); } .pinlist { margin: 0 0 var(--gap-3); padding-left: var(--gap-5); font-size: var(--t-small); columns: 2 220px; } .pinlist li { margin-bottom: var(--gap-1); break-inside: avoid; } /* The page's own lead-in about the boxes starts a new group after this section, not a fourth line of it. */ #servicePinBox:not([hidden]) + .hint { margin-top: var(--gap-6); } .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 0; border: 1px solid rgba(0, 0, 0, .3); } /* ------------------------------------------------------- Server's own furniture */ /* Folders, operational widgets, and the service list, in two columns. The left column is *where am I and how is it* and the right is *what is here*. The brief asked for clear separation between navigation, operational information and service data, and this is that separation as a grid rather than as more borders. */ #serverGrid { display: grid; grid-template-columns: 282px minmax(0, 1fr); gap: var(--gap-5); align-items: start; } /* `minmax(0, 1fr)` and not `1fr`, which is the whole of why this page scrolled sideways. A bare `1fr` is `minmax(auto, 1fr)`, and `auto` as a minimum means **min-content** — so the column could never be narrower than the widest thing in it, whatever that thing's own `overflow` said. The desktop rule above already had it right; the narrow one, which is the case that needs it, did not. Measured 2026-08-19 by hiding subtrees until `document.body.scrollWidth` fell: services list 1100 against a 1024 window, and the last thing standing was the table's own header row setting a min-content the grid then honoured. Wrapping the table in `widetable` did nothing until this changed, because the panel was being sized to its content rather than sizing its content. */ @media (max-width: 1080px) { #serverGrid { grid-template-columns: minmax(0, 1fr); } } #folderRail { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--round-lg); overflow: hidden; box-shadow: var(--lift); margin-bottom: var(--gap-4); } .rail-head { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-3) var(--gap-3) var(--gap-3) var(--gap-4); border-bottom: 1px solid var(--rule); margin: 0; } .rail-item { display: flex; align-items: center; gap: 11px; padding: 11px var(--gap-4); border-left: 3px solid transparent; color: var(--ink); font-size: var(--t-body); text-decoration: none; } .rail-item:hover { background: var(--surface-2); text-decoration: none; } .rail-item { transition: background .1s; } .rail-item.on { background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; } /* The rail's icons, and the root is not a folder. Owner 2026-08-17: *"folders ekranının simgeleri güzel."* The reference draws a house for the site root and a folder for the rest, which is a real distinction rather than decoration: the root is *where a service lives when nobody put it anywhere*, and giving it the same icon as `turkiye` would say it is one folder among four. */ .rail-item svg { width: 15px; height: 15px; flex: none; color: var(--faint); } .rail-item.on svg { color: var(--link); } .rail-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-count { margin-left: auto; font: var(--t-small)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); } .rail-item.on .rail-count { color: var(--accent-ink); } /* An operational widget, and it reports what the server actually measures. The brief asked for Service health and Server resources. Health is real — the listing carries every service's status. Resources are real too, but not as the reference's CPU/Memory/Disk percentages: this server reports process CPU time, managed heap bytes and tile-cache size, and there is no disk quota to be a percentage of. So the widget shows the figures it has with their units, and there are no sparklines, because a sparkline claims a history nothing here keeps. */ .widget { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--round-lg); box-shadow: var(--lift); padding: var(--gap-4); margin-bottom: var(--gap-4); } .widget > .label { margin-bottom: var(--gap-3); display: flex; align-items: center; gap: var(--gap-2); } /* Site › Status leads with a verdict (UX sweep 2026-10-19, finding 10): one sentence, the counts behind it, and the services that need attention. It replaced a donut and its legend, which could not show a failing service. */ .verdict { margin-bottom: var(--gap-5); } .verdict h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 var(--gap-4); font-size: 22px; font-weight: 650; color: var(--ink); text-transform: none; letter-spacing: 0; } .verdict h3 .big { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .verdict.bad h3 .big { color: var(--alert); } .verdictcounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--gap-3); margin: 0; } .verdictcounts > div { border: 1px solid var(--rule); border-radius: var(--round-lg); padding: var(--gap-3); background: var(--surface-2); min-width: 0; } .verdictcounts dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--t-small); } .verdictcounts dt svg { width: 13px; height: 13px; flex: none; } .verdictcounts dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } .verdictcounts .bad { background: var(--alert-soft); border-color: var(--alert-line); } .verdictcounts .bad dt, .verdictcounts .bad dd { color: var(--alert); } .verdictcounts .warn { background: var(--warn-soft); border-color: var(--warn-line); } .verdictcounts .warn dt { color: var(--warn); } .verdictissues { list-style: none; margin: var(--gap-4) 0 0; padding: 0; border-top: 1px solid var(--rule); } .verdictissues[hidden] { display: none; } .verdictissues li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2) var(--gap-4); padding: var(--gap-3) 0; border-bottom: 1px solid var(--rule); } .verdictissues li p { flex: 1 1 220px; min-width: 0; margin: 0; overflow-wrap: anywhere; } .verdictissues a:not(.btn) { text-decoration: underline; } .widget #rwWhy { margin: var(--gap-3) 0 0; } /* Every route, behind a disclosure: a summary line that opens a table that scrolls inside itself. */ .routelist { margin: 0 0 var(--gap-5); } .routelist > summary { cursor: pointer; padding: var(--gap-2) 0; font-weight: 600; color: var(--ink); } .routelist > summary .val { margin-left: 4px; font-weight: 400; } .routelist .routetable { max-height: 70vh; overflow: auto; margin-top: var(--gap-3); } .routelist .routetable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* A resource row: name, sparkline, value. The brief asked for the reference's sparklines and, in the same breath, for the real metrics to be preserved rather than replaced by invented percentages. Both are possible: the line is drawn from samples this page has actually taken since it opened, so it is a real history of a real measurement rather than a shape. */ /* The value is the thing, and it now looks like it. Owner polish pass: *"make the values and charts more visually prominent."* The number goes to 15 in the monospace face at 600, the chart to 28 pixels tall, and the metric's name drops to the label size — so the row reads value first, shape second, name last, which is the order somebody scanning an operations widget wants. */ .meter { display: grid; grid-template-columns: 52px 1fr 82px; align-items: center; gap: var(--gap-3); padding: 10px 0; font-size: var(--t-small); border-top: 1px solid var(--rule); } .meter:first-child { border-top: 0; } .meter .k { color: var(--faint); font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .meter .t { font: 600 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .meter svg { display: block; width: 100%; height: 28px; overflow: visible; } .meter svg path.line { fill: none; stroke: var(--violet); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; } .meter svg path.area { fill: rgba(106, 75, 192, .12); stroke: none; } .meter.warm svg path.line { stroke: var(--cyan-deep); } .meter.warm svg path.area { fill: rgba(15, 179, 186, .12); } .meter .waiting { font-size: 11px; color: var(--faint); } /* The picture box. It holds a map this server rendered — `/admin/thumbnail`, D-58 — drawn from every feature of the cover layer and its own symbology, cached, and shown at two sizes from one render. It was a canvas the browser filled from a sample of up to 800 features until 2026-09-02, which for a dense layer drew a fraction of it and read as *nearly empty*. The border is the lightest one available, because the picture is the thing and its frame is not. */ /* The preview sits on the row rather than in a box on it. Owner refinement pass: it *"should feel integrated into the row rather than placed inside a generic gray rectangle."* So the grey fill is gone — the canvas is white like the row, held by a hairline and a shadow small enough to read as a lift rather than a frame. The geometry keeps its own colours, which is the point: cyan, yellow and pink coming out of the data are most of this screen's personality (ADR-033 §5b). */ /* Measured against the reference rather than chosen. The polish pass asked for a 10% scale-up *and* for the populated table to be compared with the approved screenshot — and those pull opposite ways here, because the reference's own rows are tighter than what a proportional increase produces. Its preview is about 82×50 in a 77-pixel row; a straight +10% on my previous 112×78 gave 122×84 in a 121-pixel row, which is half again as tall as the thing it was being compared to. So the type keeps the increase and the picture does not. 104×70 in a ~101-pixel row: the names, labels and folder panel are a tenth larger as asked, and the row is much closer to the reference's density. The two instructions cannot both be satisfied exactly, and this is the split — said out loud because the alternative is silently picking one. */ /* `object-fit: cover` because the picture is one size and the slots are two — D-58. The server renders 336x224 so a high-density screen has pixels to use and one cached picture serves both the 104x70 list slot and the 168x112 one on a service's own page. Without this an `` would be stretched to whichever box it landed in; the ratios are close enough that `cover` crops nothing anybody can see and guarantees no distortion when a future slot is shaped differently. */ .thumb { display: block; width: 104px; height: 70px; border-radius: 7px; object-fit: cover; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(16, 24, 38, .05); } tr.pick:hover .thumb { box-shadow: 0 0 0 1px var(--rule-strong), 0 2px 6px -2px rgba(16, 24, 38, .12); } /* While the picture is being fetched, the slot says so — D-58, from the design review. A thumbnail that has not arrived is a flat box, and a flat box is exactly what a genuinely sparse layer's picture looks like: on a cold cache an operator reads a table of them as *there is nothing in any of these*. The sweep clears `data-thumb` as it fills each one, so this selector is true only while the picture is outstanding and needs no second attribute to be maintained. A slow shimmer rather than a spinner. Forty spinners in a table is a fairground; what is needed is only that *waiting* and *empty* stop looking the same. `prefers-reduced-motion` gets the flat tint without the movement, which still separates the two. */ img.thumb[data-thumb]:not([src]) { background: linear-gradient(100deg, var(--surface) 30%, var(--rule) 50%, var(--surface) 70%) var(--surface); background-size: 300% 100%; animation: thumb-waiting 1.4s ease-in-out infinite; } @keyframes thumb-waiting { from { background-position: 150% 0; } to { background-position: -50% 0; } } @media (prefers-reduced-motion: reduce) { img.thumb[data-thumb]:not([src]) { animation: none; background: var(--rule); } } .thumb.empty { position: relative; background: repeating-linear-gradient( 135deg, #f7f9fb 0 6px, #f1f4f8 6px 12px); } .thumb.empty::after { content: "—"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 12px; } /* The reason in the box, when it is short enough to be read there — D-58. The canvas this replaced wrote *stopped* where the picture would be; the hatch's em dash means *nothing to draw*, which is a different fact and must keep its own mark. D-58's own text calls hover text "a weak place to carry a correction", so a correction that fits goes in the box. */ .thumb.empty[data-note]::after { content: attr(data-note); font-size: 10.5px; letter-spacing: .02em; } /* The name is the row, and its metadata is a caption. Four differences at once, which is what the brief meant by *not just font sizes*: 15.5 against 12.5, 650 against 400, ink against muted, and the counts in the monospace face because they are quantities. The separator is a hairline dot at rule strength — visible enough to group, too faint to read as punctuation. */ td .name { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.012em; color: var(--ink); line-height: 1.25; } .rowmeta { display: block; font-size: var(--t-small); color: var(--muted); font-weight: 400; margin-top: 3px; } .rowmeta .sep { color: var(--faint); margin: 0 7px; } .rowmeta .count { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- the map */ #mapPanel { display: none; margin-bottom: var(--gap-4); } #mapPanel.on { display: block; } #view { height: 460px; background: var(--surface-2); border-radius: var(--round-lg); overflow: hidden; } #view:empty::after { content: "the map loads when a layer is shown"; display: grid; place-items: center; height: 100%; color: var(--faint); font-size: var(--t-small); } #legend { display: flex; flex-wrap: wrap; gap: var(--gap-3); padding: var(--gap-3) 0 0; font-size: var(--t-small); color: var(--muted); } #basemapBar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2) var(--gap-3); padding: var(--gap-3) var(--gap-4); border-bottom: 1px solid var(--rule); } #basemapBar .lbl { font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; } #basemapBar .val { color: var(--muted); min-width: 0; overflow-wrap: anywhere; } #basemapBar .basemapown { margin-left: auto; } #basemapBar .basemapown > summary { cursor: pointer; color: var(--link); font-size: var(--t-small); } #basemapBar .basemapown[open] { flex: 1 1 100%; margin-left: 0; } #basemapBar .basemapform { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin-top: var(--gap-2); } #basemapBar .basemapform input { flex: 1 1 260px; min-width: 0; } /* The layer's drawing range, when the map is outside it: neutral, across the map's top edge. */ .visrangenote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2) var(--gap-3); padding: var(--gap-2) var(--gap-4); background: var(--surface-2); border-bottom: 1px solid var(--rule); color: var(--ink); font-size: var(--t-small); } .visrangenote[hidden] { display: none; } #mapPanel #legend { padding: var(--gap-3) var(--gap-4); } /* ------------------------------------------------------------- the layer editor */ #editHead { display: flex; align-items: center; gap: var(--gap-4); margin-bottom: var(--gap-4); } #editHead .crumbs, #mapCrumb { font-size: var(--t-body); color: var(--muted); } #editHead .crumbs a, #mapCrumb a { color: var(--muted); } #editHead .crumbs a:hover, #mapCrumb a:hover { color: var(--link); text-decoration: underline; } #editHead .crumbs b, #mapCrumb b { color: var(--ink); font-weight: 600; } /* The web map's crumb is the layer item's: muted, the place in ink, so it is not told apart by colour (round 2). */ #mapCrumb { margin-bottom: var(--gap-4); } #editHead .right { margin-left: auto; display: flex; align-items: center; gap: var(--gap-3); } #editDirty { font-size: 11.5px; font-weight: 600; color: var(--warn); border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: 3px; padding: 2px 8px; } #editCancel { font-size: var(--t-small); color: var(--muted); } /* A floor under the frame, so moving between a long page and a short one does not resize the panel and shift the left column out from under the pointer. */ #edit { display: grid; grid-template-columns: 196px 1fr; align-items: stretch; min-height: 440px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--round-lg); box-shadow: var(--lift); overflow: hidden; } #editNav { border-right: 1px solid var(--rule); background: var(--surface-2); padding: var(--gap-2) 0; } #editNav a { display: block; padding: 9px var(--gap-4); border-left: 3px solid transparent; color: var(--ink); font-size: var(--t-body); } #editNav a:hover { background: var(--surface-3); text-decoration: none; } #editNav a[aria-current] { background: var(--surface); border-left-color: var(--accent); font-weight: 500; } /* The way to the other surface's pages for the same layer. ADR-034 §5c promises that each surface links to the other's, so the split never means a dead end — a publisher hunting for Sharing in Server would otherwise find four pages and no clue. Set apart above a rule, because it leaves this environment and a link that does that should not look like a sibling. */ #editNav a.crossing { margin-top: 10px; padding-top: var(--gap-3); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--t-small); } #editNav a.crossing:hover { color: var(--ink); } #editNav a.crossing .in { display: block; font-size: 11px; color: var(--faint); } /* Two pages, one rule. A service with no layers has a settings page too, and giving it its own padding is how two screens that should look identical start not to. */ #editPages, #servicePages, #servicePagesBody { padding: var(--gap-5); min-width: 0; } /* A service's settings wear the layer editor's frame. D-61 moved them here; giving them their own grid and nav styling would be D-46 again in the same file, so `#serviceEdit` is `#edit` and `#serviceNav` is `#editNav` by selector rather than by copy. */ #serviceEdit { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: stretch; overflow: hidden; } #serviceNav { border-right: 1px solid var(--rule); background: var(--surface-2); padding: var(--gap-2) 0; } #serviceNav a { display: block; padding: 9px var(--gap-4); border-left: 3px solid transparent; color: var(--ink); font-size: var(--t-body); } #serviceNav a:hover { background: var(--surface-3); text-decoration: none; } #serviceNav a[aria-current] { background: var(--surface); border-left-color: var(--accent); font-weight: 500; } /* One column, because a settings page is a column. The layer editor's pages are not bounded — they hold an endpoint list and a wall of field pills that want the width — but this page is four numbers and three sentences, and letting those run the full width put the prose in one part of the panel and the boxes in another. */ #servicePages { max-width: 780px; } /* One screen at a time, and both of these were missing for one build of the redesign. All eight views are in the document and the router moves a class; dropping `.view` while rewriting the stylesheet stacked every screen into one page — the same symptom D-44 produced when a Content-Security-Policy blocked the whole sheet, and the same misreading: it looks like a layout bug rather than a missing rule. */ .view { display: none; } .view.on { display: block; } .page { display: none; } .page.on { display: block; } /* The summary of what is in force, as a footer to the page rather than a fourth row of the list above it: everything in it can be changed by the boxes, which is the opposite of the fixed facts. */ #limNote { margin-top: var(--gap-4); padding-top: var(--gap-3); border-top: 1px solid var(--rule); } /* The note under the service list is a tinted strip, which is what the reference does with it. It was a paragraph of grey text at the bottom of a page, i.e. the shape of something nobody reads. A tint, a teal edge and an ⓘ make it a place rather than a leftover — and the tint is 4% of the accent, because a full-strength callout for a sentence about previews would be shouting. */ #serviceNote { display: flex; gap: var(--gap-3); align-items: flex-start; margin: var(--gap-4) 0 0; padding: var(--gap-3) var(--gap-4); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--round); color: var(--muted); max-width: none; } #serviceNote::before { content: "ⓘ"; color: var(--link); font-size: 14px; line-height: 1.3; flex: none; } #serviceNote:empty { display: none; } /* -------------------------------------------------------------- dialog & drawer */ /* One dialog, for a value that exists once. The drawer below is for a form you fill and dismiss; this is for a secret you read and lose. `::backdrop` is the element's own, so there is no scrim div to keep in sync with anything. */ #issued { border: 1px solid var(--rule); border-radius: var(--round-lg); padding: var(--gap-5); max-width: 560px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px -30px rgba(16, 24, 38, .5); } #issued::backdrop { background: rgba(16, 24, 38, .42); } /* Not a section label, which is what the global `h4` rule had made it. `h4, div.label, …` sets 11.5px uppercase in `--faint`, so the one fact this dialog exists to get right — *who* the secret is for — rendered as chrome while the value nobody should mix up between people was 15px and bordered. Measured 2026-08-19. It is a heading here and is sized like one. */ #issued h4 { padding-bottom: var(--gap-2); border-bottom: 1px solid var(--rule); font-size: var(--t-head); text-transform: none; letter-spacing: 0; color: var(--ink); } #issuedValue { width: 22ch; font-family: var(--mono); font-size: 15px; letter-spacing: .04em; text-align: center; } /* ------------------------------------------------------------------ new item */ /* The New item dialog. Chrome first — a header, a scrolling body, a footer — because both of the owner's screenshots have exactly that and the body is the only part that scrolls: their *Create a feature layer* keeps Back and Next planted at the bottom with five options above them. */ #addItem { border: 1px solid var(--rule); border-radius: var(--round-lg); padding: 0; width: 680px; max-width: 94vw; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px -30px rgba(16, 24, 38, .5); } #addItem::backdrop { background: rgba(16, 24, 38, .42); } /* Only the screen that holds a table, and it goes back to 680px on the way out. */ #addItem.wide { width: 980px; } /* The table scrolls inside its own box, and the page never does. A geodatabase's feature-class names run to forty characters and there are five columns; on a narrow window that is wider than the dialog, and a body that scrolls sideways takes the footer with it. */ .widetable { overflow-x: auto; } .widetable table { min-width: 640px; } /* A panel that scrolls keeps its own padding rather than losing it to the scroll box. */ .panel.widetable { padding-bottom: 0; } /* Below 720 pixels a row is a block, not a strip you scroll sideways. The UX sweep of 2026-10-19 measured every Studio table at 390: Groups hid Members and Services, Members hid User type, Role and the ⋯, and nothing said the columns were there. A `table.rowblocks` row becomes its name first, the ⋯ beside it, and each other cell as a labelled line underneath — the label is the cell's `data-l`, so the heading it lost is said again. The name cell is `td.name` or `td.lead`, the actions cell `td.act`, a selection box `td.tick`. */ @media (max-width: 719px) { table.rowblocks, .widetable table.rowblocks, #view-roles .panel table.rowblocks, #view-groups .panel table.rowblocks { min-width: 0; } .widetable:has(> table.rowblocks), .panel:has(> table.rowblocks) { overflow-x: visible; } table.rowblocks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } table.rowblocks tbody { display: block; } table.rowblocks tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px var(--gap-3); padding: var(--gap-3) var(--gap-4); border-bottom: 1px solid var(--rule); } table.rowblocks tr:last-child { border-bottom: 0; } table.rowblocks td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; } table.rowblocks td:is(.name, .lead) { grid-column: 1 / -2; grid-row: 1; } table.rowblocks td:is(.tick, .thumbcell) { grid-column: 1; grid-row: 1; width: auto; } table.rowblocks td:is(.tick, .thumbcell) + td:is(.name, .lead) { grid-column: 2 / -2; } /* An unbroken login, an e-mail address from a provider, wraps inside its block rather than pushing the page wide. */ table.rowblocks td:is(.name, .lead), table.rowblocks td:is(.name, .lead) * { overflow-wrap: anywhere; } table.rowblocks .whorow > span { min-width: 0; } table.rowblocks td.tick input { width: 24px; height: 24px; margin: 0; } table.rowblocks td.thumbcell .thumb { width: 72px; height: 48px; } table.rowblocks td[data-l] { grid-column: 1 / -1; display: flex; gap: var(--gap-2); align-items: baseline; font-size: var(--t-small); } table.rowblocks td[data-l]::before { content: attr(data-l); flex: 0 0 96px; color: var(--muted); } table.rowblocks td[data-l] > * { min-width: 0; } table.rowblocks td.empty, table.rowblocks tr.groupband > td { grid-column: 1 / -1; } /* The ⋯ or the row's button keeps the top right, and is not the sticky pinned column the wide rule makes. */ table.rowblocks td.act, .widetable table.rowblocks td.act:last-child { grid-column: -2 / -1; grid-row: 1; align-self: start; position: static; box-shadow: none; background: transparent; text-align: right; } :root[data-theme="dark"] .widetable table.rowblocks td.act:last-child { background: transparent; } table.rowblocks td:empty { display: none; } } /* The route table's two problems: a pattern that cannot wrap because it has no spaces, and a last column starved by the first taking everything. Breaking at the slashes gives the pattern somewhere to fold, and holding the governance clause on one line stops a 67-row table becoming 9,700px. */ /* Overview's two columns: the layer list, and the details beside it. `minmax(0, 1fr)` on the first for the reason the services grid needed it — a bare `1fr` cannot shrink below its content's min-content and a table's min-content is wide. Stacks below 1100px, where a 300px aside beside a five-column table is two things squeezed rather than two things side by side. */ .itemgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap-5); align-items: start; } @media (max-width: 1100px) { .itemgrid { grid-template-columns: minmax(0, 1fr); } } /* The left column stacks: what the item is, then what is in it. */ .itemmain { display: flex; flex-direction: column; gap: var(--gap-5); min-width: 0; } /* The address, readable and copyable in one row. The field is wide and the button does not shrink. */ .urlrow { display: flex; gap: var(--gap-2); align-items: center; } .urlrow input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: var(--t-small); background: var(--surface-2); } /* A group layer's glyph, and the indent that says a layer sits under it. `parentLayerId` is in the service document and the table was ignoring it, so a nested layer read as a sibling. */ .rowicon { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--muted); } .rowicon svg { width: 16px; height: 16px; } td.name.nested { padding-left: 36px; } /* The item's own header: the preview the content list already generates, beside what the item is. */ .itemhead { display: flex; gap: var(--gap-4); align-items: flex-start; } .itemhead > div { min-width: 0; } .itemhead b { font-size: var(--t-head); } .itemhead .hint { margin: var(--gap-2) 0 0; } /* Three tiers, where there were two of the same. The name is `--t-head`, the subtitle `--t-small` in `--muted`, and the dates were also `--t-small` in `--muted` — so the second and third lines read as one grey block. `--faint`'s own note says what it is for: *a second fact inside a cell whose first fact is already muted*. One size down and one step of grey, both from the scale. */ .footnote { margin-top: var(--gap-1); font-size: var(--t-label); color: var(--faint); } /* Bigger only here. 104×70 is right beside a table row and reads as a mistake beside three lines of text with nothing else in the panel. 168×112 is the same ratio and the height of the text block it sits next to. Scoped, because the base rule also draws every thumbnail on the content list. */ #itemThumb .thumb { width: 168px; height: 112px; } /* The section heading above the layer panel, where a header row used to be. Same treatment as the aside's own headings, so the page names a section one way. */ .itemmain > h4 { margin: 0; } .urlrow button { flex: 0 0 auto; } /* A pill that is a button, and looks like the pill it replaced. ADR-034 §5l makes the sharing scope on a content row the control that changes it — the reader was going to press it anyway. So the button carries no chrome of its own and the pill inside keeps its hue, its glyph and its border; what it gains is a cursor, a focus ring, and a real keyboard path, which a `span` had none of. */ .pillbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; } .pillbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; } /* The groups an item is shared with, as removable chips. Small, because the list is usually short and a table of two rows is a table for the sake of one. */ .chips { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin: var(--gap-2) 0 var(--gap-3); } .chip { display: inline-flex; align-items: center; gap: var(--gap-1); padding: 3px 4px 3px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface-2); font-size: var(--t-small); } .chip button { line-height: 1; padding: 2px 5px; } /* The geodatabase screens, and both rules are borrowed from tables above rather than invented. `.gdbpick` is the selection table: five short, controlled-vocabulary columns beside one column of feature-class names fifty characters long. The short ones do not wrap, for the reason `#services` gives — `MultiPolygon Z` was breaking in two while `MultiPolygon` did not, and measured row heights came out 77.5, 77.5, 54.25, 77.5, 54.25 down the same table. A ragged table reads as a bug. `.gdbreport` is the per-layer outcome, where a refusal arrives as whatever the datastore said. A provider message can carry a sixty-character identifier with no space in it, which sets a hard minimum on its column and pushes the table past the dialog — measured at 1440×900, not only on a small screen. `overflow-wrap: anywhere` is what `.routetable` already does with a long path. */ .gdbpick td:not(:nth-child(2)), .gdbpick th:not(:nth-child(2)) { white-space: nowrap; } .gdbreport td:last-child { overflow-wrap: anywhere; } .gdbreport td:nth-child(2) { white-space: nowrap; } .routetable td:first-child { overflow-wrap: anywhere; } .routetable td:last-child { white-space: nowrap; } .routetable table { min-width: 780px; } /* A row's primary cell carries the real control. A clickable `` is a mouse affordance and nothing else: the roles table had no keyboard path to its own function at all — tabbing from *New role* skipped all five rows and landed in the editor below. So the name is a button where the row opens something on this page, and a link where the row is an address. It is styled as the text it replaced, because it is the row's name and not a second control beside it. */ .rowname { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; font-weight: inherit; text-align: left; cursor: pointer; } .rowname:hover { text-decoration: underline; } .rowname:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Only where the whole row is clickable. This was written for `tr.pick`, where a coloured link would compete with the row's own affordance — and applied to every `td.name a`, including the service page's Overview, whose rows are *not* clickable. Measured 2026-08-19: the link `look_EarlyAlert_sites` and the plain label `Reports` rendered identically, `--ink` at weight 600 with no underline, so the only signal that one was a link and the other was not was an absence elsewhere in the row. */ tr.pick td.name a { color: inherit; text-decoration: none; } tr.pick td.name a:hover { text-decoration: underline; } /* And everywhere else a link in a name cell looks like one. */ td.name a { color: var(--link); text-decoration: none; } td.name a:hover { text-decoration: underline; } .dialoghead { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-4); padding: var(--gap-4) var(--gap-5); border-bottom: 1px solid var(--rule); } .dialoghead h3 { font-size: var(--t-head); margin: 0; min-width: 0; } /* A long title wraps beside the close x, never pushing it to a line of its own (verification round, 2026-10-19). */ .dialoghead { flex-wrap: nowrap; height: auto; } .dialoghead > button { flex: none; } /* The close control is one drawn x in the muted ink, on every step: it was a dingbat, blue on one step of New item and rust on the next (UX sweep 2026-10-19). */ .dialoghead > button[aria-label="Close"] { color: var(--muted); } .dialoghead > button[aria-label="Close"]:hover { color: var(--ink); } .dialoghead > button:has(> .closex) { padding: 5px; line-height: 0; } .dialoghead .closex { width: 16px; height: 16px; display: block; } /* Capped rather than tall: the dialog must not grow past the viewport on a laptop, and their screen 2 is already 900 pixels of options. */ .dialogbody { padding: var(--gap-5); max-height: min(68vh, 620px); overflow-y: auto; } #serviceFacts, #resourceWidget { min-width: 0; overflow-wrap: anywhere; } /* The body is what gives way when the foot grows: a consequence sentence in the foot pushed Cancel and the button below the dialog's edge (sweep 2026-10-19, round 3). The dialog keeps the browser's own height cap. */ dialog[open]:has(> .dialogbody) { display: flex; flex-direction: column; } dialog > .dialogbody { flex: 0 1 auto; min-height: 0; } dialog > .dialoghead, dialog > .dialogfoot { flex: none; } .dialogfoot { display: flex; align-items: center; gap: var(--gap-2); padding: var(--gap-4) var(--gap-5); border-top: 1px solid var(--rule); background: var(--surface-2); border-radius: 0 0 var(--round-lg) var(--round-lg); } .dialogfoot .fill { flex: 1; } /* A footer that says what its button does: the sentence takes the first line, the buttons the next. */ .dialogfoot.withsays { flex-wrap: wrap; } .dialogfoot.withsays > .consequence, .dialogfoot.withsays > .bad-inline { flex: 1 1 100%; margin: 0 0 var(--gap-2); } .dialogfoot.withsays > .bad-inline[hidden] { display: none; } /* Empty on the first screen, where the only way out is the close button — theirs is the same. */ .dialogfoot:empty { display: none; } /* The drop zone. Dashed, because a dashed edge is the one border convention that reads as *put something here* rather than *this is a box*, and it is the one their screen uses. */ .dropzone { border: 1px dashed var(--control-edge); border-radius: var(--round-lg); background: var(--surface-2); padding: var(--gap-6) var(--gap-5); text-align: center; display: grid; justify-items: center; gap: var(--gap-3); } .dropzone p { margin: 0; font-size: var(--t-body); } .dropzone .val { font-size: var(--t-small); color: var(--faint); } .dropzone svg { width: 30px; height: 30px; color: var(--faint); } /* Only while a file is over it: the affordance has to answer, or a drag ends in a guess. */ .dropzone.over { border-color: var(--accent); background: var(--accent-soft); } .dropzone.over svg { color: var(--link); } /* Two columns, as theirs, collapsing rather than squeezing — a 48px icon beside two lines of prose has no room to give at 520px. */ .newtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-4); margin-top: var(--gap-5); } @media (max-width: 620px) { .newtiles { grid-template-columns: minmax(0, 1fr); } } /* One tile spans, and the rule retires itself. The design review's answer to *does a single tile in a two-column grid read as room to grow* was no — it reads as a layout that half-rendered, because an equal-width void beside it carries no signal of intent. `:only-child` spans it today and stops applying the moment there is a second tile, so the two-column mechanism stays for when ADR-034 §5j's grid has something to put in it. */ .newtiles > .newtile:only-child { grid-column: 1 / -1; } /* The *or* between the drop zone and the tiles. A rule with a word sitting in it, because the two halves of screen one are alternatives and nothing in the layout said so. */ .orbar { display: flex; align-items: center; gap: var(--gap-3); margin: var(--gap-5) 0 0; font-size: var(--t-small); color: var(--faint); } .orbar::before, .orbar::after { content: ""; flex: 1; height: 1px; background: var(--rule); } /* The heading takes focus on every screen change, so it must not draw a ring as though it were a control. The screen reader hears it; the eye should not be told to click it. */ #addItemTitle:focus { outline: none; } #addItemTitle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .newtile { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--gap-3); align-items: start; text-align: left; padding: var(--gap-3); cursor: pointer; border: 1px solid transparent; border-radius: var(--round); background: none; font: inherit; color: inherit; width: 100%; } .newtile:hover { border-color: var(--rule-strong); background: var(--surface-2); } .newtile .glyph { display: grid; place-items: center; width: 46px; height: 46px; background: var(--surface-3); border-radius: var(--round); color: var(--muted); } .newtile .glyph svg { width: 22px; height: 22px; } .newtile b { display: block; font-weight: 600; } .newtile span { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--muted); } /* The radio list. One accent, and it is the one this console already uses for a chosen thing — the selected option gets the accent edge and a tinted ground, which is how the rest of the page marks a current row. */ .pickrow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--gap-3); padding: var(--gap-4); border: 1px solid var(--rule); border-radius: var(--round); margin-top: var(--gap-2); cursor: pointer; } .pickrow:first-of-type { margin-top: 0; } .pickrow:hover { border-color: var(--rule-strong); } .pickrow.on, .pickrow:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .pickrow input { margin: 3px 0 0; accent-color: var(--accent); } .pickrow input[type="radio"] { width: 18px; height: 18px; } .pickrow:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .pickrow b { display: block; font-weight: 600; } /* 16 pixels, because without this they were 573. `icon()` returns a bare `svg` with no dimensions — every other caller sizes it (`.pill svg`, `.rail-item svg`, `.dropzone svg`, `.newtile .glyph svg`) and the Share dialog's scope rows did not, so a single padlock filled the dialog and pushed the rest of the screen out of view. Measured by the design review 2026-08-19: 573.47 × 573.47, three times. This is what the owner was looking at when they asked whether a designer had done it. */ .pickrow svg { width: 16px; height: 16px; flex: none; vertical-align: -2px; } /* The description has its own class, because a bare descendant selector matched both spans. `.pickrow span` also hit the wrapper around the `b`, so the scope's label and the sentence explaining it rendered at the same 13.5px in the same muted grey — no hierarchy between *what you are choosing* and *what it means*. The same markup is New item's route picker, so both were affected. */ .pickrow .lede { display: block; margin: 3px 0 0; font-size: var(--t-small); color: var(--muted); } /* The global `.lede` gives a paragraph 16 pixels under it, which left every card bottom-heavy; and in a dialog the cards are a step tighter so the choices fit above the fold (verification round, 2026-10-19). */ dialog .pickrow { padding: var(--gap-3) var(--gap-4); } /* Dialog text is `--ink`, not the browser's default black. Nothing was overriding the UA rule, so every dialog's base colour was a coincidence rather than the token. */ dialog { color: var(--ink); } /* Named as a question, because their heading is one: *Select an option to create an empty feature layer.* A list of five nouns with no question above it is a list of five nouns. */ .picklede { margin: 0 0 var(--gap-4); font-size: var(--t-body); } #drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 620px; max-width: 96vw; background: var(--surface); border-left: 1px solid var(--rule); z-index: 1500; transform: translateX(100%); transition: transform .16s ease-out; display: flex; flex-direction: column; box-shadow: -18px 0 44px -30px rgba(16, 24, 38, .45); } #drawer.on { transform: none; } /* Closed, the drawer is only moved off-screen, so its shadow bled into every page's right edge — visible once the sign-in page had nothing else on it. Hidden after the slide, not before it. */ #drawer:not(.on) { box-shadow: none; visibility: hidden; transition: transform .16s ease-out, visibility 0s .16s; } #drawer header { height: auto; padding: var(--gap-4) var(--gap-5); align-items: flex-start; gap: var(--gap-3); position: static; } #drawer header h2 { margin: 0; font-size: var(--t-head); font-weight: 600; } #drawerBody { overflow-y: auto; padding: var(--gap-5); flex: 1; } /* ---------------------------------------------------------------------- toast */ #toast { position: fixed; right: var(--gap-5); bottom: var(--gap-5); max-width: 480px; z-index: 2000; background: var(--ink); color: #fff; font-size: var(--t-small); padding: 11px var(--gap-4); border-radius: var(--round); box-shadow: 0 18px 40px -22px rgba(16, 24, 38, .6); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .14s, transform .14s; } #toast.on { opacity: 1; transform: none; } #toast.bad { background: var(--alert); } #toast.good { background: var(--ok); } /* ═══════════════════════════════════════════════════════════════════════ a phone, D-273 Below 760 pixels the sidebar is the rail, whatever the reader chose. Measured 2026-09-16 at 390 px: the 232-pixel navigation column stayed, which left 158 pixels of work, and a page heading's sentence broke after every word. The collapsed state already exists and is drawn — the toggle has chosen it since the console was written — so this is that state made the only one where a wider one does not fit, rather than a second narrow design nobody reviews. The toggle goes with it. A control whose two states look identical is a control that teaches a reader it does nothing; the rail is the only width here, so there is nothing to toggle. Everything else is the same screens. The panes that give up a column already do so at 1,100 and 1,180; what is added here is the frame around them — the heading stacks, the toolbars wrap, the toast spans the width instead of sitting under the thumb's corner, and the work's side padding drops to the gutter these pages use everywhere else. */ @media (max-width: 760px) { /* A sticky header of three rows is a quarter of a phone's height on every page; it scrolls away. */ header { position: static; } .wrap { padding: var(--gap-4) var(--gap-3); } /* The heading and its controls are a column: side by side, the sentence broke after every word. */ .pagehead { flex-direction: column; gap: var(--gap-3); } .pagehead .right { align-self: stretch; } .pagehead .segmented { align-self: flex-start; } /* A pair of fields is one field; `.grid2` is the form idiom these screens share. */ .grid2 { grid-template-columns: minmax(0, 1fr); max-width: none; } /* The layer and service editors put their navigation above their page rather than beside it. */ /* Both editors, as the comment says. Only the layer's selectors were here until the design review of 2026-09-24 found the service's navigation still a column at 390 pixels, its page 200 wide and the page size box cut off at the edge. `#serviceEdit` is `#edit` by selector everywhere else in this file. */ #edit, #serviceEdit { grid-template-columns: minmax(0, 1fr); } #editNav, #serviceNav { border-right: 0; border-bottom: 1px solid var(--rule); display: flex; overflow-x: auto; } #editNav a, #serviceNav a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; } #editNav a[aria-current], #serviceNav a[aria-current] { border-left-color: transparent; border-bottom-color: var(--accent); } #editPages, #servicePages, #servicePagesBody { padding: var(--gap-4) var(--gap-3); } /* Full width, because 480 pixels of toast beside a 16-pixel margin is the width of the screen. */ #toast { left: var(--gap-3); right: var(--gap-3); bottom: var(--gap-3); max-width: none; } /* The top bar wraps, and Sign out comes back on screen. Both phone reviews found it first and measured the same thing: `header` is a 58-pixel row that does not wrap, its content is 432 pixels wide in a 334-pixel column, so `#who` and Sign out sat off the right edge — and the page scrolled 98 pixels sideways to reach them, which drags the rail off with it. The health line takes its own row and truncates rather than wrapping to five lines over the breadcrumb. */ header:not(.dialoghead) { height: auto; min-height: 52px; flex-wrap: wrap; row-gap: 4px; padding: var(--gap-2) var(--gap-3); gap: var(--gap-3); } #healthLine { flex: 1 1 100%; order: 3; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #who { max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #who b { display: inline; margin-right: 6px; } /* A toolbar is a row of filters; at this width it is a column of them, and the search box takes the line it needs. On Groups the New button drew over the row count — `no gro⟨button⟩`. */ .toolbar { flex-wrap: wrap; } .toolbar input[type=search], .toolbar input[type=text] { flex: 1 1 100%; min-width: 0; } /* A tab strip scrolls rather than losing its last tab. `.segmented` is `flex: none` and `nowrap`, so `#serviceTabs` at 405 pixels in a 302-pixel column cut Settings off entirely, and `#visModes` cut Tiles — the tile preview could not be chosen at all. */ .segmented { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .pagehead .segmented { align-self: stretch; } /* Two tables are not in `.widetable`, so they pushed their own card open instead of scrolling in it. */ #view-roles .panel, #view-sources .panel { overflow-x: auto; } #view-roles .panel table, #view-sources .panel table { min-width: 460px; } /* The basemap bar: Use and None were off the edge, so a basemap could be neither set nor cleared. */ #basemapBar .val { flex: 1 1 100%; } #basemapBar .basemapown { margin-left: 0; } #basemapInput { flex: 1 1 100%; min-width: 0; } #basemapSet, #basemapClear { flex: 1 1 auto; } /* Forty pixels for anything a finger presses. Every row control was 20 to 28 pixels tall. This is the touch target only — the type size and the spacing between rows are unchanged. */ .tiny, .pillbtn, .menu > summary, #surfaces a, .segmented a, .segmented button, #editNav a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } #editNav a { justify-content: flex-start; flex: 0 0 auto; } /* The symbology strip keeps the page's gutter, and its state sentence is read rather than cut. */ .symstrip { padding: 0 var(--gap-3); } .symstrip .symstate { white-space: normal; } /* A row menu is a sheet at the bottom. It was absolutely positioned and 450 pixels wide inside a 310-pixel scroller: opening it looked like nothing happening, with the sheet at x 461 and Delete past the edge — the clipping `.menu .sheet`'s own comment predicted. The script stops positioning it below this width, so these rules are the whole of it: across the bottom, where a thumb is, and scrolling inside itself when it is tall. */ .menu[open] .sheet { position: fixed; left: var(--gap-3); right: var(--gap-3); top: auto; bottom: var(--gap-3); width: auto; min-width: 0; max-height: 60vh; overflow-y: auto; } .menu .sheet button, .menu .sheet a { min-height: 40px; display: flex; align-items: center; } /* The note under a destructive item is a sentence; held on one line it read *…never remove‸*. */ .menu .sheet .note { white-space: normal; } /* The actions stay where the thumb is. Reaching the row menu on the services table cost a 550-pixel sideways swipe, and the column it is in is the one every row is opened from. The shadow is the edge that says the other columns pass under this one rather than ending there. */ .widetable table td:last-child, .widetable table th:last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -10px 0 10px -10px rgba(16, 24, 38, .25); } /* The open menu's own cell comes forward. A sticky cell makes a stacking context, so the fixed sheet is trapped inside the cell it is in and every later row's pinned cell paints over it — measured with `elementFromPoint`: a *Map* button of the row below sat on top of *The layer document*. Raising the sheet does nothing; raising its cell is what works. */ .widetable table td:last-child:has(.menu[open]) { z-index: 3; } /* The row under the pointer keeps its highlight in the pinned column too, rather than showing a white patch where the later rule wins. */ tr.pick:hover td:last-child { background: var(--surface-2); } /* Not on the logs, where the last column is the resource and pinning it is a column of dashes. There is no row menu there, so there is nothing to keep in reach. */ #view-logs .widetable table td:last-child, #view-logs .widetable table th:last-child { position: static; box-shadow: none; } /* Two more scope strips that are not `.segmented`, and two more tables that are not in `.widetable`. */ .tabstrip { overflow-x: auto; scrollbar-width: none; } .tabstrip a { flex: 0 0 auto; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; } /* A flex row drops the space before the count, which read "Content1" (sweep 2026-10-19); the gap puts it back. */ #view-groups .panel { overflow-x: auto; } #view-groups .panel table { min-width: 460px; } /* An empty state is a sentence, not a table. Dropping the minimum width was not enough: the global `th { white-space: nowrap }` still sized the table from a header with nothing under it, so the sentence was clipped at 504 pixels in a 308-pixel panel. With no rows to label, the header is not a header. */ #view-groups .panel table:has(td.empty) { min-width: 0; } #view-groups .panel table:has(td.empty) thead { display: none; } /* The controls the first pass missed, measured at 20 to 34 pixels. */ /* `td a:has(.pill)` is the visibility link, which is a pill inside a link and was 20 pixels tall; the first version of this rule named a class the markup does not have. */ .rowname, #signout, #logMore, td a:has(.pill) { min-height: 40px; display: inline-flex; align-items: center; } } /* ------------------------------------------------------------- the two card forms */ /* Two panels, one set of rules. The forced password change is the same shape as signing in — a narrow centred card of labelled fields — and its first version got none of this because the selectors named `#signin`. It rendered as labels and boxes side by side, spilling out of the card (D-46 again, in the same file as instance 8). */ #signin, #mustchange { max-width: 380px; margin: 72px auto; } #signin .panel, #mustchange .panel { padding: var(--gap-5); } #signin h2, #mustchange h2 { margin: 0 0 var(--gap-2); font-size: 19px; font-weight: 600; } #signin label, #mustchange label { display: block; font-size: var(--t-small); color: var(--muted); margin: var(--gap-3) 0 var(--gap-1); } #signin input, #signin button.primary, #mustchange input, #mustchange button { width: 100%; } #signin button.primary, #mustchange button { margin-top: var(--gap-4); } /* The sign-in card stands alone, the way the portal's does. Owner, 2026-09-25, with the two screenshots side by side. Until there is a session the rail and the top bar are hidden: every link in them needs one, and the health line could only ever say *sign in to read the server's state*. The attribute is the same one the head script sets before first paint, so the card is alone from the first frame rather than after the script decides. */ html[data-session="none"] #main > header { display: none; } #signin { width: 100%; max-width: 420px; margin: clamp(32px, 12vh, 120px) auto 48px; padding: 0 var(--gap-4); } #signin .panel { padding: 0; overflow: hidden; } #signin .signin-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); padding: var(--gap-4) var(--gap-5); border-bottom: 1px solid var(--rule); } #signin .signin-head h2 { margin: 0; font-size: 20px; } #signin .signin-where { margin: 2px 0 0; font-size: var(--t-small); color: var(--muted); overflow-wrap: anywhere; } /* The header's mark, the same blue circle: it was the old navy square (UX sweep 2026-10-19). */ #signin .signin-head .mark { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; } #signin .signin-head .mark svg { width: 18px; height: 18px; display: block; } #signin .signin-body { padding: var(--gap-2) var(--gap-5) var(--gap-5); } #signin .signin-for { margin: var(--gap-3) 0 0; font-size: var(--t-small); color: var(--ink); overflow-wrap: break-word; } #signin .signin-stranger a { text-decoration: underline; text-underline-offset: 2px; } #signin .signin-stranger { margin: 0; padding: var(--gap-3) var(--gap-5); border-top: 1px solid var(--rule); background: var(--surface-2); font-size: var(--t-small); color: var(--muted); text-align: center; } #signin #u, #signin #p { font-size: 15px; min-height: 42px; padding: 8px 10px; } /* ADR-204 §5e item 16: the field's own note, so it sits tight under the field and the next label keeps its gap. */ #signin .signin-other { margin: var(--gap-1) 0 0; } #signin .signin-other code { white-space: nowrap; } #signin #p { padding-right: 68px; } #signin .signin-refused { margin: var(--gap-3) 0 0; padding: 10px 12px; font-size: var(--t-small); background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); border-radius: 7px; } /* Show sits inside the field, at its end, and says what it will do rather than what it is. */ #signin .reveal { position: relative; } #signin .reveal-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: auto; margin: 0; padding: 6px 10px; min-height: 32px; background: none; border: 0; color: var(--link); font-weight: 600; font-size: var(--t-small); } #signin .reveal-toggle:hover { text-decoration: underline; } #signin label.keep { display: inline-flex; align-items: center; gap: 8px; margin: var(--gap-3) 0 0; color: var(--ink); font-size: var(--t-body); cursor: pointer; } #signin label.keep input { width: 18px; height: 18px; margin: 0; flex: none; } #signin .forgot { display: block; width: auto; margin: var(--gap-3) auto 0; padding: 6px 4px; min-height: 32px; background: none; border: 0; color: var(--link); font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; } #signin #forgotHint { margin: var(--gap-2) 0 0; text-align: center; } /* The conversion's losses, and a derived document beside them. ADR-033 accepted a lossy projection onto the ArcGIS face and the mitigation is that it says what it lost — so this reads as a list of statements, not as an error state. Amber rather than red: none of it is broken, and a page that cried wolf about a dashed line would train its reader to stop looking at the one that matters. */ .losses { margin: 6px 0 0; padding: 0 0 0 18px; color: var(--ink); font: var(--t-small)/1.55 var(--sans); } .losses li { margin: 4px 0; } .losses li::marker { color: var(--warn-dot); } #symLoss { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--warn-dot); border-radius: var(--round); background: var(--surface); } #symLoss h4 { margin: 0; } /* The colours an ArcGIS client will use, D-99. Above the document rather than beside it: the colour is the answer and the JSON is the evidence, and a reader who wants the quad has it on the chip's title. */ .swatches { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin: 8px 0 0; } .swatches .swatch { /* Stated, because a rule elsewhere states it. `.swatch` at the top of this file is a 9x9 status dot and it is the only rule that declares a width — so without these two lines it wins the cascade here and every legend chip collapses to nine pixels while its patch and its label spill out over the next one. Measured on `ci_many`'s three-class legend. */ width: auto; height: auto; display: inline-flex; align-items: center; gap: var(--gap-2); padding: 4px 10px 4px 4px; border: 1px solid var(--rule); border-radius: var(--round); background: var(--surface); color: var(--ink); font: var(--t-small)/1.4 var(--sans); } /* A checkerboard behind the patch, so a half-transparent fill reads as half transparent rather than as a paler colour. Drawn in the panel's own tones, so it is a texture rather than a second palette. */ .swatches .patch { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 3px; border: 2px solid transparent; background-color: var(--surface); background-image: linear-gradient(45deg, var(--rule) 25%, transparent 25%, transparent 75%, var(--rule) 75%), linear-gradient(45deg, var(--rule) 25%, transparent 25%, transparent 75%, var(--rule) 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; box-shadow: inset 0 0 0 1px var(--rule); position: relative; overflow: hidden; } .swatches .patch .fill { position: absolute; inset: 0; } /* D-99: the shape a client will see. A line is a band across the chip rather than a filled square, and a point is a dot in the middle of one — both drawn from the same colour, so a reader compares colours across shapes without having to discount the shape. */ .swatches .patch.stroke .fill { inset: 6px 0; border-radius: 1px; } .swatches .patch.mark .fill { inset: 4px; border-radius: 50%; } /* A document this server derived, shown as output because that is what it is. */ pre.doc { margin: 8px 0 0; padding: 12px 14px; overflow: auto; max-height: 320px; border: 1px solid var(--rule); border-radius: var(--round); background: var(--surface); color: var(--ink); font: 12px/1.5 var(--mono); white-space: pre; } /* The roles editor — ADR-035 §4f, two sections of grouped ticks. Dense on purpose: eighteen privileges today and more later, and an operator comparing two roles reads them as a list. */ .rolesection { margin-top: var(--gap-4); } .rolesection h4 { display: flex; align-items: center; gap: var(--gap-3); margin-bottom: var(--gap-2); } .rolesection h4 .val { font-weight: 400; } .rolesection h4 button { margin-left: auto; } .rolegroup { border: 1px solid var(--rule); border-radius: var(--round-lg); padding: var(--gap-3); margin-bottom: var(--gap-3); background: var(--surface); } .rolegrouphead { display: flex; align-items: center; gap: var(--gap-3); font-weight: 600; font-size: var(--t-small); margin-bottom: 6px; } /* One privilege, one row (UX sweep 2026-10-19): an 18-pixel box, its name in words, the identifier small, the user-type pill, and the sentence underneath. The whole row is the label, so the target is the row. */ .roleprivilege { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--gap-3); align-items: start; padding: var(--gap-2) var(--gap-2); border-radius: var(--round); cursor: pointer; } .roleprivilege:hover { background: var(--surface-2); } .roleprivilege input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); } .roleprivilege .privilegename { font-weight: 600; } .roleprivilege code.mono { font: 12px/1.3 var(--mono); color: var(--faint); background: none; padding: 0; } .roleprivilege .tierpill::before { display: none; } .roleprivilege .tierpill.cappednote { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .roleprivilege input[disabled] + .privilegetext .privilegename { color: var(--muted); } /* Capped by a user type: muted, not disabled. The 1c handoff asks for these greyed with a note, and the prototype greys the *text* and leaves the control — which is the honest reading. The role does carry the privilege and it does work, for a member whose type has no ceiling in the way; ADR-018 §1's intersection is what the note names. A disabled box would say *you cannot grant this*, and that is a different and false sentence. */ .roleprivilege.capped .privilegename { color: var(--muted); } /* Amber rather than the neutral chip colour, because this one is a caution and the two beside it — `needs` and `includes` — are facts about the privilege rather than about who it reaches. */ .cappednote { color: var(--warn); } /* The name and its notes on one line, the sentence under them. D-100: what a privilege does is a sentence, and a sentence in a row of chips is a chip nobody reads. The wrapper exists so the checkbox stays aligned with the name rather than with the middle of a two-line block. */ .privilegetext { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--gap-2); min-width: 0; } .privilegewhat { flex-basis: 100%; color: var(--muted); font-size: var(--t-small); max-width: 70ch; } /* The Member roles page: the list is 300 pixels and keeps its place while the editor, which takes the rest, scrolls; the editor has room inside its edge, and its Save bar is the `.savebar` the group Settings use. */ .pickpair.rolepair { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } .rolepair .rolelistcol { position: sticky; top: 96px; } .rolepair #roleEditor { padding: var(--gap-5) var(--gap-5) 0; } .rolepair #roleEditor .editorhead { align-items: flex-start; flex-wrap: wrap; } .rolepair #roleEditor .editorhead h3 { font-size: var(--t-head); } .rolepair #roleEditor .editorhead .hint { margin: 2px 0 0; max-width: 60ch; } .rolepair #roleEditor .savebar { margin: var(--gap-4) calc(-1 * var(--gap-5)) 0; } .rolepair .rowmeta { display: block; font-size: var(--t-small); color: var(--muted); font-weight: 400; } #roleRows button.rowname { font-weight: 600; } @media (max-width: 900px) { /* One column on a phone: this rule's two-class selector outweighed the shared one-column rule (0,2,0 over 0,1,0), so at 390 the editor kept 50 pixels (verification round, 2026-10-19). */ .pickpair.rolepair { grid-template-columns: minmax(0, 1fr); } .rolepair .rolelistcol { position: static; } .rolepair #roleEditor { padding: var(--gap-4) var(--gap-4) 0; } .rolepair #roleEditor .savebar { margin: var(--gap-4) calc(-1 * var(--gap-4)) 0; } } .roleprivilege code.mono, .roleprivilege .privilegename { overflow-wrap: anywhere; } /* ---------------------------------------------------------------- the selected row Written 2026-08-18 after a design review, and it repairs two screens. `loadGroups` and `loadRoles` both write `class="pick on"` onto the row they have open and there was no rule for it — so clicking a row changed nothing visible, and the panel it opens is below the fold on a 1366-wide window. The pair mirrors the hover rules above: a soft fill for the row, and a bar on the leading edge, which is the one mark that survives a colour-blind reader and a printout. */ tr.pick.on td { background: var(--accent-soft); } tr.pick.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* ---------------------------------------------------------------- an editor's own head The markup on the Groups and Roles editors was written expecting a flex row with its last child pushed right — two sibling divs, actions and an exit — and used `class="head"`, which does not exist. So the buttons stacked on two left-aligned lines. Named `editorhead` rather than `head` because `pagehead` already owns the top of a screen and two classes one letter apart is how the next person picks the wrong one. */ .editorhead { display: flex; align-items: center; gap: var(--gap-3); margin-bottom: var(--gap-3); } .editorhead > :last-child { margin-left: auto; } .editorhead h3 { margin: 0; } /* ---------------------------------------------------------------- a group's page The `#groupEditor` rules that were here are gone with the panel. They existed to give a panel's non-table children the 16px gutter that `th`/`td` carry themselves — a problem a page does not have, because a page's children are already inside the workspace padding. Two small additions, both needed by the tabs and both general: `.faint` for a second fact inside a cell that already carries one — *by whom* under a date, where `.val` is already spent on the date itself. `tr.after` for the line between the members who can manage a group and the members who cannot. It is the reference's *Group role* filter drawn as a boundary, which is what nine rows want instead of a filter. */ /* The second fact in a cell whose first fact is already `.val` — *by whom* under a date. `--faint` rather than `--muted` so the two are distinguishable, which is only defensible now that `--faint` can be read. */ .faint { color: var(--faint); font-size: var(--t-small); } /* A labelled band where a hairline was. `tr.after` drew `border-top: 1px solid var(--rule)` directly against the bottom rule every `td` already carries — two near-identical hairlines stacked, which is invisible. And it depended on a sort that put the managers last, so it landed on the first row of page two and nowhere near the boundary. A row that says what it separates survives a page break, which a rule does not. */ tr.groupband > td { padding: 10px var(--gap-4) 5px; border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--t-small); background: var(--surface-2); } /* Members beside services: the relation is the subject, so the two halves are read together. Collapses to one column where there is not room for two three-column tables. */ /* ═══════════════════ a list to choose from and a panel to work in, 2026-09-05 ═══════════════════ The 1c handoff asks two screens for the same shape and they are the same class. Roles is *list left (click selects), privilege editor right*; Data sources is *table left, register form right with the test result inline*. Measured off the prototype: `minmax(0,1fr) 380px` for the sources and `minmax(0,1fr) minmax(360px,440px)` for the roles, gap 22 — which is `--gap-5` exactly, so the token was already the design's. One class rather than two, because the difference between 380 and 360–440 is not a decision. Writing both would be two numbers to keep in step and nothing to keep them there — D-46's subject. `align-items: start`, or the short side stretches. A grid item fills its row by default, so a 200-pixel form beside a twenty-row table grows a 600-pixel white box under itself. */ /* The connection test's answer, in the form that asked it. The 1c handoff: *table left, register form right with the test result inline (green/amber/red box)*. It was a pill and a sentence in a row, which reads as a status line rather than as the answer to the button above it — and the three tones are already in the palette, so the design's colours and this page's are the same colours rather than two sets that look alike. Three tones for four outcomes, and the grouping is the honest one. `Usable` is green; `CannotConnect` is red, because nothing about the data is known and the next move is a network or a password; `InsufficientPrivilege` and `UnusableGeometry` are amber, because the connection worked and what was found is the problem. Red for *cannot reach* and amber for *reached and it is wrong* is the distinction an administrator acts on. */ .testresult { margin-top: var(--gap-4); padding: 11px 13px; border-radius: 5px; border: 1px solid var(--rule); background: var(--surface-2); font-size: 13.5px; line-height: 1.5; color: var(--ink); } .testresult > b { display: block; margin-bottom: 2px; } .testresult.ok { background: var(--ok-soft); border-color: var(--ok-line); } .testresult.ok > b { color: var(--ok); } .testresult.warn { background: var(--warn-soft); border-color: var(--warn-line); } .testresult.warn > b { color: var(--warn); } .testresult.alert { background: var(--alert-soft); border-color: var(--alert-line); } .testresult.alert > b { color: var(--alert); } .pickpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: var(--gap-5); align-items: start; } .pickpair > .panel { margin-bottom: 0; } /* Same trap as `.grouppair`, and the same fix before it is measured: `1fr` cannot shrink below min-content, and the left side of both of these holds a table. */ @media (max-width: 1180px) { .pickpair { grid-template-columns: minmax(0, 1fr); } } .grouppair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-5); margin-top: var(--gap-4); } /* Same trap, same fix, before it is measured rather than after: `1fr` cannot shrink below min-content, and this pair holds a table. */ @media (max-width: 1100px) { .grouppair { grid-template-columns: minmax(0, 1fr); } } /* The facts, which were two paragraphs of grey hint carrying one word each. A label/value pair is the reference's Details block reduced to what we have: the standing and what the group confers. */ /* `minmax(0, 1fr)` and `min-width: 0`, because an address field in a value set the column's width and the web map's item scrolled sideways at 320 (UX sweep 2026-10-19). Baseline, so a label stays on its value's line when the value carries a button, as Owner's Change owner… does. */ .facts2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--gap-4); align-items: baseline; font-size: var(--t-small); margin: var(--gap-3) 0; } .facts2 dt { color: var(--muted); } .facts2 dd { margin: 0; font-weight: 600; min-width: 0; } .facts2 dd .val { font-weight: 400; } /* ---------------------------------------------------------------- the tab strip The one new component a group's page needed, and the budget was one. Everything else on that page has an owner already: `.crumbs` and `.pagehead` for the frame, `.facts2` for Overview, `.setting` for Settings, `.picker` for both pickers, `pagerFor` for paging. Not the surface strip and not the editor's left column. `#surfaces` fills its current pill because filled means *environment*, and these four are not four environments. `#editNav` was the near miss: free CSS and consistent with both editors, but it spends 196px of the left edge on the tab that most needs width, and that left edge is exactly where Content's filter rail goes when maps arrive. Two nested left rails is the shape to avoid. An underline rather than a box, because the strip sits under a title and a boxed tab would compete with the panel below it for the same edge. */ .tabstrip { display: flex; gap: var(--gap-5); align-items: stretch; border-bottom: 1px solid var(--rule); margin-bottom: var(--gap-5); } .tabstrip a { padding: 8px 1px 9px; color: var(--muted); text-decoration: none; font-size: var(--t-body); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabstrip a:hover { color: var(--ink); } .tabstrip a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .tabstrip .count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--t-small); } /* A link inside a sentence is underlined, so it is not told apart by colour alone (axe link-in-text-block, sweep 2026-10-19). */ #groupCrumb a, #groupSummary a, #groupAbout a, #groupRecent a, #groupSettings p a { text-decoration: underline; text-underline-offset: 2px; } .tabstrip a[aria-current="page"] .count { color: var(--muted); } /* Overview's reachability sentence: a comparison of two numbers, so prose with the numbers set strongly — not a donut, which is the Services screen's idiom for a distribution of states. Named `.reach`, because `.tally` is already taken and taking it broke the sentence. The Server overview's big-number stat is `.tally`, and its rule at line 986 is `.tally b { display: block; font-size: 33px }`. Wearing that class turned every strong number *and the word* `group` into a 33-pixel block on its own line: six lines of poster where a sentence was written. Found in the design review of 2026-08-18, which is also the first time anybody read the sentence. */ .reach { margin: 0 0 var(--gap-5); font-size: 15.5px; max-width: 88ch; } .reach b { font-weight: 650; } .reach .off { color: var(--warn); } /* A sentence does not fit a 116px right-aligned number field. 258px did not fit either, and the house rule depended on it. This console puts the consequence in the option's own text, so a box that clips its options defeats the rule that justifies them: measured, half the labels — including two of the three defaults — rendered as `By invitation — an owner or m▾`. Fixed on both sides. The box is wider, and the labels are shorter with the consequence moved into the row's hint where it can wrap. */ .setting.wide { max-width: 760px; } /* A checkbox is not a text box: the 300px meant for a field left about 150 pixels of dead space between the delete lock and its own Locked/Not locked label, so the row read as two unrelated things rather than one control and its state. Measured 2026-08-19. */ /* `max-width` beside the `width`, because a fixed width in a flexible row is a clip waiting for a narrow container. [D-216](../../../docs/architecture-debt.md) was raised when a design review measured this rule overflowing a 359-pixel panel by 51 px on the symbology page, hidden with no scrollbar. That instance is gone: ADR-053 rebuilt that screen and its *Change:* row is no longer a `.setting.wide`. Checked 2026-09-05 rather than assumed — the only `.setting.wide` rows left are the ten in `#groupSettings`, which sits in a full-width view under this rule's own `max-width: 760px`, so nothing overflows today. The declaration goes in anyway and the row is closed as prevention, not repair. A control that cannot give up width is one narrow column away from being clipped again, and the next person to put a wide row in a rail will not know that. `min-width: 0` is what lets it actually shrink inside a flex row, which `max-width` alone does not. */ .setting.wide select, .setting.wide input:not([type=checkbox]) { width: 300px; max-width: 100%; min-width: 0; text-align: left; } .setting.wide label { display: inline-flex; align-items: center; gap: var(--gap-2); } .setting.wide .u { width: auto; flex: 0 0 auto; } .setting.wide .q { max-width: 400px; } /* A name or a sentence is prose, not a number: `.setting`'s monospace was set for figures with units, and a wide row inherited it — "Planning Group" in Consolas (UX sweep 2026-10-19). */ .setting.wide select, .setting.wide input:not([type=checkbox]) { font-family: inherit; font-size: var(--t-body); } /* ---------------------------------------------------------------- a group's Settings tab, 2026-10-19 Three sections with headings larger than the labels under them, one column of full-width fields, radio rows for each either/or, a Save bar that stays at the bottom of the window while the form scrolls, and deletion in its own card after the form, bordered all round in the alert hue. */ .gsform { max-width: 720px; border: 1px solid var(--rule); border-radius: var(--round-lg); background: var(--surface); } .gsec { padding: var(--gap-5); } .gsec + .gsec { border-top: 1px solid var(--rule); } .gsec h3 { font-size: var(--t-head); margin: 0 0 var(--gap-1); } .gsec > .hint { margin: 0 0 var(--gap-4); } .gfield { display: grid; gap: 6px; margin-bottom: var(--gap-4); } .gfield:last-child { margin-bottom: 0; } .gfield label { font-weight: 600; } .gfield input, .gfield textarea { width: 100%; font-family: inherit; font-size: var(--t-body); } .gfield .hint { margin: 0; } .gsec fieldset.pickset { margin-bottom: var(--gap-5); } .gsec fieldset.pickset:last-child { margin-bottom: 0; } .gsec .pickrow { padding: var(--gap-3) var(--gap-4); } .gsec .pickrow:has(input:disabled) { cursor: not-allowed; color: var(--muted); } .gfixed { margin: 0; padding: var(--gap-3) var(--gap-4); border: 1px solid var(--rule); border-radius: var(--round); background: var(--surface-2); } .gfixed .hint { display: block; margin: 2px 0 0; } .savebar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--gap-2); padding: var(--gap-3) var(--gap-5); border-top: 1px solid var(--rule); background: var(--surface); border-radius: 0 0 var(--round-lg) var(--round-lg); } .savebar > .val { margin-right: auto; } /* Pinned only while there is something to save; with nothing changed it sits where it is and takes no screen. On a phone it is always one line (verification round, 2026-10-19). */ .savebar:not(.dirty) { position: static; } @media (max-width: 600px) { .savebar { flex-wrap: nowrap; padding: var(--gap-2) var(--gap-3); } .savebar > .val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .savebar > button { flex: none; } } .dangercard { max-width: 720px; margin-top: var(--gap-5); border: 1px solid var(--alert-line); border-radius: var(--round-lg); background: var(--surface); } .dangercard h3 { font-size: var(--t-head); margin: 0; padding: var(--gap-4) var(--gap-5) 0; color: var(--alert); } .dangerrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-3) var(--gap-5); padding: var(--gap-4) var(--gap-5); } .dangerrow + .dangerrow { border-top: 1px solid var(--rule); } .dangerrow > div { flex: 1 1 280px; min-width: 0; } .dangerrow .hint { margin: 2px 0 0; } .dangerrow button.danger { border-color: var(--alert-line); } .dangerswitch { display: inline-flex; align-items: center; gap: var(--gap-2); font-weight: 600; } .dangerswitch input { width: 18px; height: 18px; accent-color: var(--accent); } /* ---------------------------------------------------------------- the add page The rail slot the group Content tab reserved, spent on the one thing we have data for. `#serverGrid`'s shape, and the same media query: below 1100px the rail stacks above the table rather than squeezing the rows that carry a 104px picture. */ .addgrid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--gap-5); } @media (max-width: 1100px) { .addgrid { grid-template-columns: minmax(0, 1fr); } } /* The Publish screen's contents tree — ADR-057, and the shape is ArcGIS Pro's contents pane because that is the reference the owner named for this screen. A tree rather than a list, since 2026-09-06. It was a flat row per layer, and the design study it was built from had a root, disclosure triangles, a tick and a symbol under each layer. The owner put the two side by side and asked whether they were the same screen; they were not. */ .pubroot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--rule); font-weight: 600; } .pubroot .pubglyph { color: var(--link); } /* The map's reference, and it is a label rather than a second name. The per-layer badge is styled as `.pubrow .pubsr`, and `.pubroot` is a different ancestor — so the root's badge matched no rule at all and inherited the row's own 600 weight, arriving at the same visual weight as the word *Map* beside it. A found review, 2026-09-07: the badge exists to be read at a glance as secondary, and unstyled it read as a second heading. */ .pubroot .pubsr { margin-left: auto; flex: 0 0 auto; font: var(--t-tiny)/1 var(--mono); font-weight: 400; color: var(--faint); } .pubmapname { flex: 1; } .pubmenu { border: 0; background: none; cursor: pointer; color: var(--faint); padding: 2px 6px; border-radius: var(--round); font-size: 15px; line-height: 1; } .pubmenu:hover { background: var(--surface-2); color: var(--ink); } /* The triangle is a button, so it is reachable without a mouse and announces its own state. */ .pubtwist { border: 0; background: none; cursor: pointer; color: var(--faint); padding: 0; width: 14px; font-size: 10px; line-height: 1; flex: none; text-align: left; } .pubtwist:hover { color: var(--ink); } .pubtick { margin: 0; flex: none; } .pubglyph { color: var(--faint); flex: none; } /* The reprojection mark, and only where there is one. An arrow beside every layer is decoration; beside the three whose tables are stored in something else it is the answer to *what is this service doing to my data*. */ .pubwarp { color: var(--link); font-size: 13px; flex: none; cursor: help; } /* The symbol, under the layer it belongs to — the row the disclosure triangle reveals. */ .pubsym { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: 3px 10px 5px 44px; color: var(--muted); font-size: var(--t-small); } .pubsym:hover { background: var(--surface-2); color: var(--ink); } .pubnode.grouped .pubsym { padding-left: 62px; } .pubswatch { flex: none; width: 22px; height: 14px; } .pubswatch.fill { background: var(--sw-fill); border: 1.5px solid var(--sw-line); border-radius: 2px; } .pubswatch.line { height: 0; border-top: 2.5px solid var(--sw-line); } .pubswatch.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sw-fill); border: 1.5px solid var(--sw-line); } /* The picture, and it is the server's. `POST /admin/publish/preview` draws the composition out of the databases with the renderer the served faces use, so this is the service before the service exists. The chequerboard is what says the ground is transparent rather than white — a preview on white would promise a background the service does not serve. */ /* The chequerboard went with the empty state it explained. There is a map under the drawing now, so transparency is not a thing to signal — it is how the composition gets to sit on a ground. */ .pubcanvas { position: relative; min-height: 300px; flex: 1 1 auto; overflow: hidden; padding: 0; background: var(--surface-2); } #pubMap { position: absolute; inset: 0; } #pubMap .ol-viewport { border-radius: 0; } /* Over the map and out of the way of it. The picture must not swallow the drag, the scroll or the pointer — panning the ground under it is the whole reason the map is here. */ .pubcanvas > img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .pubmapsays { position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: 60%; padding: 6px 10px; border-radius: var(--round); background: rgba(255, 255, 255, .92); border: 1px solid var(--rule); font-size: var(--t-small); color: var(--muted); box-shadow: var(--lift); } /* Where a table dropped on the map will land. */ .pubcanvas.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; } /* The layer's number, where the layer is. `FeatureServer/2` is how a client addresses it, and a group and its children interleave — so counting rows is not reading the index. It was a list under the preview repeating every name until 2026-09-06, which is one fact in two places and the owner said so. Muted and monospaced: it is an address, not a heading, and it must not compete with the name beside it. */ .pubindex { flex: none; width: 15px; text-align: right; font: var(--t-tiny)/1 var(--mono); color: var(--faint); } /* The reference is set on the map's properties, so its box is a dialog field like any other — monospaced, because what goes in it is a code or a definition and both are read character by character. It was a rule for a toolbar control until 2026-09-07; ADR-057 §5n moved it. */ #mapprops #pubSrid { font-family: var(--mono); } /* What the server says about the code that was typed: its name, or that it does not know it. The width cap was for the toolbar, where it sat between two buttons; in the dialog the sentence has the width of the dialog and capping it would wrap a name for no reason. */ .pbsridsays { font-size: var(--t-small); color: var(--muted); } .pbsridsays.bad { color: var(--alert); } /* A value the dialog reports rather than asks for. */ /* And a refusal reads as one here too. `.pbsridsays.bad` colours the same sentence on the map's properties; without this rule the Publish dialog showed *this server cannot project to…* in unalarmed black, at the one moment it matters most. The same fact in two places, styled in one — which is the shape of the defect this pair of controls was built to end. */ .pbreadonly.bad { color: var(--alert); } .pbreadonly { display: block; padding: 7px 0 0; font: 500 var(--t-body)/1 var(--mono); color: var(--ink); } /* The contents tree's context menu. */ #pubmenu { position: fixed; z-index: 60; min-width: 178px; padding: 4px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--round); box-shadow: var(--lift-2); } #pubmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 3px; cursor: pointer; font-size: var(--t-small); color: var(--ink); } /* Hover and focus are the same state here, because the menu takes focus now: the arrow keys move through it and a highlight nobody can see is the same as no highlight. */ #pubmenu button:hover, #pubmenu button:focus-visible { background: var(--surface-2); outline: none; } #pubmenu button:disabled { color: var(--faint); cursor: default; background: none; } #pubmenu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 2px; } /* The Publish dialog's *What it can do* block — ADR-057 §5g. A fieldset because it is one question with several answers, and a legend because a screen reader announcing "checkbox, Create" without it has told the reader nothing about what is being created. `.tick` next door is a table-cell width and is deliberately not reused: 34px on a label would crush the sentence beside the box. */ .pbcaps { border: 1px solid var(--rule); border-radius: var(--round); padding: 10px 12px 4px; margin: 4px 0 0; } .pbcaps legend { padding: 0 6px; font: 600 var(--t-label)/1 var(--sans); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; } .pbcaps .row { gap: var(--gap-3); } .pbcaps .hint { margin: 6px 0 8px; } .pbtick { display: flex; align-items: baseline; gap: 8px; flex: 0 1 auto; cursor: pointer; } .pbtick input { margin: 0; flex: 0 0 auto; } .pbtick input:disabled { cursor: default; } /* A disabled box that is ticked on purpose reads as *settled*, not as broken — the same problem `tr.already` below solves in a table. */ .pbtick input:disabled + span { color: var(--muted); cursor: default; } .tick { width: 34px; } .thumbcell { width: 120px; padding-right: 0; } /* Already in the group: ticked, disabled, and legible as *not an option* rather than as broken. */ tr.already { color: var(--muted); } tr.already .name { font-weight: 500; } /* The select-all, whose label carries its own count — the whole point of not being a bare tick. */ .pickall { display: flex; align-items: center; gap: var(--gap-2); font-size: var(--t-small); color: var(--muted); white-space: nowrap; } /* Stuck to the bottom, because the count of what you picked was below the fold. Measured 2026-08-19 on the screen the owner asked for by name: with the picker open, `Add N items` sat at y=1481 in a 900-pixel viewport and y=1663 in a 720-pixel one. Everything above the fold said how many items *exist*; nothing said how many were *chosen*, and the select-all's only feedback was a native indeterminate dash. A confirmation you have to scroll to find is a confirmation that does not confirm. */ .addfoot { position: sticky; bottom: 0; z-index: 2; margin-top: var(--gap-5); gap: var(--gap-3); align-items: baseline; flex-wrap: wrap; padding: var(--gap-3) 0; background: var(--surface); border-top: 1px solid var(--rule); } .addfoot .hint { flex: 1 1 340px; min-width: 240px; } /* ---------------------------------------------------------------- the inline picker Its own rules, because it was wearing `.setting`. That class is a 620px flex row built for a number and a unit: a 116px right-aligned monospace field. A listbox of `folder/service` paths inherited the width and the right-alignment, where the meaning is on the left and so is the truncation, and the checkbox inherited 116px as well. This is D-46's failure in reverse — not a shape rebuilt because the old one was hard to find, but an old shape borrowed for a job it was not built for. */ .picker { border: 1px solid var(--rule); border-radius: var(--round-lg); padding: var(--gap-3) var(--gap-4); background: var(--surface-2); margin: var(--gap-3) 0; max-width: 620px; } .picker label { display: block; font-size: var(--t-small); color: var(--muted); margin-bottom: 4px; } .picker input[type=search] { width: 100%; margin-bottom: var(--gap-2); } .picker select { width: 100%; text-align: left; font-family: var(--mono); font-size: var(--t-small); } .picker .row { display: flex; align-items: center; gap: var(--gap-3); margin-top: var(--gap-3); } .picker .row label { display: flex; align-items: center; gap: 6px; margin: 0; } .picker .row input[type=checkbox] { width: auto; } .picker .row > :last-child { margin-left: auto; } /* ADR-204 §5e item 16: somebody from another organization, typed. A full-width field, because a qualified name is an organization key and an e-mail address end to end; the browser's default of about 20 characters cut it in two. */ .picker .pickother { margin-top: var(--gap-3); } .picker .pickother input { width: 100%; font-family: var(--mono); font-size: var(--t-small); } .picker .pickother .hint { margin: var(--gap-1) 0 0; } .picker .hint code, .memberfrom { overflow-wrap: anywhere; } .picker #groupPickSays { margin: var(--gap-2) 0 0; } .memberfrom { font-weight: 400; } /* The Logs screen. ADR-045. Three rules, and no new concepts: the rows are the table every other screen uses, the states are this file's own pills, and the only things missing were a column that must not wrap and the detail row behind a click. */ .nowrap { white-space: nowrap; } /* A log row is clickable, and it has to look it — a row that reveals something on click and looks identical to one that does not is a control nobody finds. */ tr.logrow { cursor: pointer; } tr.logrow:hover td { background: var(--surface-2); } /* The detail is monospace and scrolls in its own box rather than widening the table, which is the same reasoning `widetable` carries: a long value must not push the page sideways. */ tr.logdetail td { background: var(--surface-2); padding: 0; } tr.logdetail pre { margin: 0; padding: var(--gap-3) var(--gap-4); font: 12px/1.5 var(--mono); color: var(--muted); max-height: 22rem; overflow: auto; } /* The Logs screen's toolbars wrap, and the reason is that there are six controls in one. A `.toolbar` is `display: flex` with no `flex-wrap`, which is right for the two or three controls every other screen puts in one — at 1024px this screen's filter row pushed *Only failures* off the edge and dragged the whole page, sidebar included, sideways. Scoped to this screen rather than changed globally: the other toolbars were measured and fit. */ #view-logs .toolbar { flex-wrap: wrap; row-gap: var(--gap-2); } #view-logs .toolbar input[type=search], #view-logs .toolbar input[type=text] { flex: 1 1 12rem; } /* A label beside its control, so the pair wraps as one thing rather than splitting. */ #view-logs #logOwn { display: inline-flex; align-items: center; gap: var(--gap-2); } #view-logs #logOwn label { color: var(--muted); font-size: var(--t-small); } #view-logs .toolbar label { white-space: nowrap; } /* The table scrolls in its box below the width its columns need. `widetable` already does this; what it lacked was a minimum for these five columns, so the cells squeezed until Resource clipped instead of the box scrolling. */ #view-logs .widetable table { min-width: 60rem; } /* Which screen a cold load paints, before `console.js` has run. `session.js` — loaded from the head without `defer`, in its own file because the console's CSP allows no inline script — sets `data-session` from `sessionStorage`, and these two rules are what make that decision visible on the first paint instead of after 454 KB of JavaScript. Measured with `console.js` delayed 800 ms and a valid token in storage: the sign-in panel was never visible, in any of about 1,380 samples per run across three runs. Before this, the same test kept it on screen for the whole delay. `!important` on exactly these two, and it is load-bearing rather than lazy. `console.js` sets `style.display` inline on both elements once it knows the real answer, and an inline style beats a class — so without this the first paint would ignore the attribute. These rules are the *initial* state only: `start()` replaces the attribute the moment `whoami` has answered. It has to change the attribute, not the inline style — an inline `none` does not beat `!important`, which is how the issued-password form came to have the Services screen painted under it. A member who must replace their password gets `data-session="mustchange"`. */ html[data-session="held"] #signin { display: none !important; } html[data-session="held"] #app { display: block !important; } /* The symbology editor: the picture beside the controls. Owner request 2026-09-03 — the page had a JSON box, a derived document and swatches, which is an editor for somebody who already knows MapLibre. What was missing is controls that name what they do and a picture of the result, and the picture is the half that decides: a swatch says what colour, not what the map looks like at the size anybody sees it. Rebuilt to the owner's handoff, direction 1c, 2026-09-04. The 2026-09-03 answer put the picture beside a single column of controls and left the rest of the page — the document, the ArcGIS projection, the losses — stacked underneath, so the screen was still a scroll. The complaint it was answering was *çok karmaşık*, and a shorter scroll is not an answer to that. Three columns, and each one is a question. *What kind of drawing is this* on the left, *what does it look like* in the middle, *what is in it* on the right. Nothing was removed: the document, the losses and the derived `drawingInfo` are tabs of the third column rather than three more sections below the fold, and the preview stops being a 336-pixel thumbnail beside a form and becomes the thing the page is mostly made of. */ /* The editor takes the window, so the shell's page padding is not its padding. Every other screen is a document in a 44-pixel margin; this one is an instrument panel, and a column of controls that stops 44 pixels short of the edge reads as a panel that failed to load. `#app` keeps its padding for every other view. */ #app.symfull { padding: 0; max-width: none; } #app.symfull #editHead { display: none; } #app.symfull #edit { display: block; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } #app.symfull #editNav { display: none; } #app.symfull #editPages { padding: 0; } /* Full height minus the top bar, so the three columns end where the window does. The preview is the middle column and it fills what is left; without a height on the page it would be as tall as whichever column had the most in it. The 1,180 is the three columns' floor, not the screen's. Below it the columns stack rather than being cut off by `#edit`'s rounded corners — see *below the editor's floor*, D-221, further down, which lifts this minimum. */ #app.symfull #page-symbology.on { display: flex; flex-direction: column; height: calc(100vh - var(--header-h, 58px)); min-width: 1180px; } /* ------------------------------------------------------------------ the title strip One line that says where you are, what you are looking at and what you can do with it. The three used to be three rows — a breadcrumb, a tab strip, a row of buttons at the bottom of the form — and Store was the one below the fold. */ .symstrip { display: flex; align-items: center; gap: var(--gap-2); padding: 0 var(--gap-5); min-height: 44px; flex: none; background: var(--surface); border-bottom: 1px solid var(--rule); font-size: var(--t-small); color: var(--muted); position: sticky; top: 0; z-index: 5; } .symstrip .crumbs { white-space: nowrap; } .symstrip .crumbs a { color: var(--muted); } .symstrip .crumbs a:hover { color: var(--link); } .symstrip .crumbs b { color: var(--ink); font-weight: 600; } .symstrip .symdo { margin-left: auto; display: flex; align-items: center; gap: var(--gap-2); } /* The state line is the caption the preview used to carry, and it belongs beside Store. *Edited — this is what Store would keep* is a sentence about the button next to it. */ .symstate { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .symstate.symstate-edited { color: var(--warn); font-weight: 600; } /* A segmented control, and this file had three hand-rolled ones before it had this. The layer switcher, the item tabs and the inspector's own tabs are the same shape: a row of links in a hairline box where the current one is a raised chip. Written once (D-46). */ .segmented { display: inline-flex; gap: 2px; padding: 3px; flex: none; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); } .segmented a { padding: 3px 10px; border-radius: 3px; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-decoration: none; } .segmented a:hover { color: var(--ink); text-decoration: none; } .segmented a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--lift); } /* The item page's own tabs, which are a level up from the layer switcher beside them: they move between subjects, so they are the taller of the two. */ .segmented.tabs { background: var(--surface); margin-left: auto; } .segmented.tabs a { padding: 5px 12px; font-size: var(--t-small); } /* ------------------------------------------------------------------------ the banner The server's own refusal, said where the thing it refused was typed. Nothing else on the page changes: a document that was not stored is still the document on the screen. */ .symbanner { display: flex; gap: var(--gap-3); align-items: flex-start; flex: none; padding: 10px var(--gap-5); background: var(--alert-soft); border-bottom: 1px solid var(--alert-line); color: var(--alert); font-size: var(--t-small); line-height: 1.45; } .symbanner .mono { font-family: var(--mono); } .symbanner button { margin-left: auto; flex: none; } /* --------------------------------------------------------------------- the empty state A generated appearance is an answer, so it is stated as one. §5b: no document is stored, the colour is deterministic, and both faces report version 0. That used to be a sentence above a form already full of controls for a document nobody had written. */ .symempty { flex: 1; display: grid; place-items: center; padding: 40px; } .symempty > div { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--gap-3); } .symempty b { font-size: 19px; letter-spacing: -.01em; } .symempty p { margin: 0; color: var(--muted); } .symempty .row { margin: 0; } .symempty .sw { width: 120px; height: 80px; border-radius: 6px; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--rule); background: repeating-linear-gradient(135deg, #eef2f6 0 6px, #e6ebf1 6px 12px); } /* ------------------------------------------------------------------- the three columns */ .symcols { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr) 336px; } /* Renderer. A column of sections, each one a question with a heading over it. */ .symrail { background: var(--surface); border-right: 1px solid var(--rule); padding: var(--gap-4) var(--gap-3); overflow: auto; display: flex; flex-direction: column; gap: var(--gap-4); } .symrail h5, .syminsp h5 { margin: 0 0 var(--gap-2); font: 600 11.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } /* The rail is 264px wide with 24px of padding, so a label at one edge and a control at the other is not an arrangement it can afford. Label over control. */ .symrail .setting { display: block; padding: 0 0 var(--gap-2); max-width: none; } .symrail .setting .q { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--muted); } .symrail .setting select, .symrail .setting input:not([type=checkbox]):not([type=color]) { width: 100%; } .symrail .hint { margin: 2px 0 var(--gap-2); font-size: 12px; } /* ------------------------------------------------------- the renderer, as three cards A `