@webship.co/workspace 0.0.0-stage → 1.0.0-beta1

package/public/css/components/grid-and-list.css

@@ -0,0 +1,203 @@
+/* ---------- Grid or list, on the home page and inside a workspace ----------
+ *
+ * Two different questions wearing one control. The home page is a grid of small cards and the sensible
+ * choices are how many across; a workspace is a list of project rows, each carrying a dozen buttons,
+ * and the sensible default there is one to a row with the whole width to lay them out in.
+ *
+ * The state is on <html> — data-home-view and data-rows-view, written by the pre-paint script from the
+ * shared cookie — so a layout is never drawn one way and then rearranged.
+ */
+
+.cards-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+/* The list is its own section, and on a workspace that builds projects it follows the Build form —
+   which ended flush against it: the form's last control and "Projects · how to lay them out" touched at
+   zero pixels, so one question ran straight into the next. A rule as well as the space, because they
+   are two different things to do rather than one thing with a gap in it. */
+.build-form + #webship-workspace-projects,
+.build-form + [id="webship-workspace-projects"] {
+  margin-top: 1.75rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--line);
+}
+
+/* The three controls sit together: how many across, and how wide the page is, are one question. */
+.layout-controls { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+
+/* The switcher: one segmented control, so the options read as one question with several answers. */
+.view-switcher {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 62.4375rem;
+  padding: 0.125rem;
+  background: var(--surface-card);
+}
+
+.view-pick,
+.page-width-pick {
+  min-width: 2.125rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  min-width: 2rem;
+  height: 1.75rem;
+  padding: 0 0.5rem;
+  border: 0;
+  border-radius: 62.4375rem;
+  background: transparent;
+  color: var(--text-subtle);
+  cursor: pointer;
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+.view-pick:hover,
+.page-width-pick:hover { color: var(--link); }
+.view-pick.is-current,
+.page-width-pick.is-current { background: var(--subtle-brand); color: var(--link); }
+/* Drawn to Tabler's rules, so they sit with the sprite icons rather than beside them: the stroke is
+   stated once here, as .tabler-icon does for the 4,736 in the sprite. */
+.view-mark { display: block; width: 1.125rem; height: 1.125rem; }
+.view-pick .view-mark { opacity: .85; }
+.view-pick.is-current .view-mark,
+.page-width-pick.is-current .view-mark { opacity: 1; }
+
+/* ---------- the home page's workspace cards ---------- */
+
+/* UIKit's uk-child-width-* classes are what the grid ships with, so they are overridden rather than
+   removed: the markup keeps working with no JavaScript, and these take over when a choice is made.
+   !important is not needed — the attribute selector out-specifies the class. */
+html[data-home-view="grid-1"] #workspace-cards > * { width: 100%; }
+
+/* One across is a column of CARDS, not one card stretched across the window: a 1300px-wide card with
+   its name centred in the middle of it is a banner, and it would be the same shape as the list view
+   with none of its density. Capped and centred, so it still reads as the card it is. */
+html[data-home-view="grid-1"] .workspace-card { max-width: 32rem; margin-inline: auto; }
+html[data-home-view="grid-2"] #workspace-cards > * { width: 50%; }
+html[data-home-view="grid-3"] #workspace-cards > * { width: 33.333%; }
+html[data-home-view="grid-4"] #workspace-cards > * { width: 25%; }
+html[data-home-view="grid-5"] #workspace-cards > * { width: 20%; }
+html[data-home-view="grid-6"] #workspace-cards > * { width: 16.666%; }
+
+/* Past four across the card is narrower than its own status label, so the label wraps instead of
+   dragging the card wider — the bug that put a horizontal scrollbar on this page once before. */
+html[data-home-view="grid-5"] .workspace-card .uk-label,
+html[data-home-view="grid-6"] .workspace-card .uk-label { white-space: normal; }
+
+/* What uk-text-center and uk-display-block used to do, said here so the list view can undo it. */
+.workspace-card { display: block; text-align: center; }
+
+/* List: the card unfolds onto one line — icon, name, what it is, how many — so thirty workspaces can
+   be read down a column instead of scanned across a wall of tiles. */
+html[data-home-view="list"] #workspace-cards > * { width: 100%; }
+html[data-home-view="list"] .workspace-card {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  text-align: left;
+  padding: 0.5rem 0.875rem;
+}
+html[data-home-view="list"] .workspace-card .icon { margin: 0; flex: none; }
+html[data-home-view="list"] .workspace-card .uk-card-title { flex: none; width: 12rem; }
+html[data-home-view="list"] .workspace-card .uk-text-meta { flex: 1; margin: 0; }
+html[data-home-view="list"] .workspace-card .ws-card-handle { position: static; flex: none; }
+html[data-home-view="list"] .workspace-card .uk-label { margin: 0; flex: none; }
+
+/* ---------- a workspace's project rows ---------- */
+
+/* List is the default and is what the rows already are, so only the grids need saying. A row in a grid
+   keeps everything it has — the buttons wrap instead of sitting on one line. */
+html[data-rows-view^="grid"] #webship-workspace-projects .project-row { margin: 0; }
+html[data-rows-view="grid-1"] #webship-workspace-projects,
+html[data-rows-view="grid-2"] #webship-workspace-projects,
+html[data-rows-view="grid-3"] #webship-workspace-projects {
+  display: grid;
+  gap: 0.75rem;
+  align-items: start;
+}
+/* Same for a workspace: one across is a column of cards down the middle of the page, which is what
+   makes it a different answer from the list rather than a second name for it. */
+html[data-rows-view="grid-1"] #webship-workspace-projects { grid-template-columns: 1fr; }
+html[data-rows-view="grid-1"] #webship-workspace-projects .project-row { max-width: 46rem; margin-inline: auto; width: 100%; }
+html[data-rows-view="grid-2"] #webship-workspace-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+html[data-rows-view="grid-3"] #webship-workspace-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+/* The controls above the rows are not rows: they span the grid rather than becoming a cell in it. */
+html[data-rows-view^="grid"] #webship-workspace-projects > :is(h3, p, .list-controls, .list-pager, .cards-head, .uk-alert) {
+  grid-column: 1 / -1;
+}
+
+/* Below the breakpoint where a workspace page stacks anyway, a multi-column grid of rows is a column
+   of slivers — so the grids collapse and the list is what is left. */
+@media (max-width: 63.99em) {
+  html[data-rows-view="grid-2"] #webship-workspace-projects,
+  html[data-rows-view="grid-3"] #webship-workspace-projects { grid-template-columns: 1fr; }
+  html[data-home-view="grid-3"] #workspace-cards > *,
+  html[data-home-view="grid-4"] #workspace-cards > *,
+  html[data-home-view="grid-5"] #workspace-cards > *,
+  html[data-home-view="grid-6"] #workspace-cards > * { width: 50%; }
+}
+
+/* On a page with no list, the width control sits at the end of the heading row rather than in the
+   middle of it — the heading is what names the page, and this is a preference beside it. */
+.page-heading .width-switcher { order: 9; margin-left: auto; }
+
+/* The help page is a document, so its control goes at the top right on its own rather than beside a
+   heading it does not have. */
+.help-head { justify-content: flex-end; margin-bottom: 0; }
+
+/* The Screens page, in one, two or three columns.
+ *
+ * Both children SPAN the container first, and that is not decoration: #webship-workspace-projects is
+ * itself a grid — the same one the project rows are laid out in — so a single wrapper dropped into it
+ * becomes one cell. Without the span, the toolbar took the first column and the whole list the second,
+ * and half the page was empty. The list owns its own columns inside the width it is given. One is the default — see ui.js — and the grid is
+   `minmax(0, 1fr)` rather than plain `1fr` so a long session name cannot push a column wider than its
+   share: `dev--amd-website_starter-1-0-x-site-template--build` is one unbroken token, and a grid track sized
+   to its content is how a list of them ends up scrolling sideways. */
+.screens-toolbar { grid-column: 1 / -1; }
+.screens-list { grid-column: 1 / -1; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
+.screens-list[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
+.screens-list[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
+
+/* Below a laptop there is room for one, whatever was chosen on a wider screen. */
+@media (max-width: 63.9375em) {
+  .screens-list[data-cols="2"],
+  .screens-list[data-cols="3"] { grid-template-columns: minmax(0, 1fr); }
+}
+
+.screens-cols { display: inline-flex; gap: .15rem; margin-right: .35rem; }
+
+/* The Screens modal is as wide as what it is showing.
+ *
+ * It was a flat 1100px whatever was in it, so three columns of session cards came out at 338px each —
+ * narrower than the row of buttons inside them — while 463px of a 1563px window went unused. The width
+ * follows the column count now, and `min(…, 94vw)` is what keeps it inside the window: a fixed 1900px
+ * dialog on a 1440px laptop is a modal with its right-hand column off the screen.
+ *
+ * The numbers are what each card ends up with, measured rather than picked from a scale: 1146px at one
+ * column, 715 at two, 479 at three on a 1634px window — and the cap is what decides the last of those,
+ * not the 1900. A card narrower than that is what the page's own three-column view already renders at
+ * 412px, so this is the same trade, made where there is more room to give. */
+#editor-modal[data-screens-cols] .uk-modal-dialog { width: min(94vw, 1200px); }
+#editor-modal[data-screens-cols="2"] .uk-modal-dialog { width: min(94vw, 1500px); }
+#editor-modal[data-screens-cols="3"] .uk-modal-dialog { width: min(94vw, 1900px); }
+
+/* A session's glyph is a picture of the terminal it opens, scaled with the room the row has. It
+   dims when the session has ended and draws the eye, once, when one waits for an answer. */
+.term-glyph { flex: none; width: clamp(3.5rem, 5vw, 5.5rem); height: auto; }
+.screens-list[data-cols="3"] .term-glyph { width: 3.5rem; }
+.screen-tile.is-dead .term-glyph { filter: grayscale(1); opacity: 0.5; }
+.screen-tile.is-waiting .term-glyph-cursor { animation: term-glyph-blink 1.1s steps(2, start) infinite; }
+@keyframes term-glyph-blink { to { visibility: hidden; } }
+@media (prefers-reduced-motion: reduce) {
+  .screen-tile.is-waiting .term-glyph-cursor { animation: none; }
+}

package/public/css/components/help-page.css

@@ -0,0 +1,36 @@
+/* The guide: contents and search on the left, the text on the right. */
+.help-layout { display: grid; grid-template-columns: 15rem minmax(0, 48rem); gap: 2rem; align-items: start; justify-content: center; }
+.help-toc { position: sticky; top: 5rem; max-height: calc(100dvh - 6rem); overflow-y: auto; scrollbar-width: thin; font-size: 0.875rem; }
+.help-find.uk-input { height: 2.25rem; border-radius: 0.5rem; margin-bottom: 0.75rem; }
+.help-toc-label { margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
+.help-toc ul { list-style: none; margin: 0; padding: 0; }
+.help-toc ul ul { padding-left: 0.75rem; font-size: 0.8125rem; }
+.help-toc li[hidden] { display: none; }
+.help-toc a { display: block; padding: 0.25rem 0.5rem; border-radius: 0.375rem; color: var(--text-default); text-decoration: none; }
+.help-toc a:hover { background: var(--subtle-brand); color: var(--link); }
+.help-toc a.is-current { background: var(--subtle-brand); color: var(--link); font-weight: 600; }
+.help-toc a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
+.help-section[hidden] { display: none; }
+.help-section h2 { scroll-margin-top: 5rem; }
+mark.help-hit { background: var(--subtle-brand); color: inherit; border-radius: 0.125rem; padding: 0 0.0625rem; }
+@media (max-width: 59.9375em) {
+  .help-layout { grid-template-columns: 1fr; }
+  .help-toc { position: static; max-height: none; }
+}
+/* base.css underlines a link in a list item; contents are navigation, not prose. */
+.help-toc li a:not(.uk-button):not(.uk-link-reset) { text-decoration: none; }
+/* "?" beside a page's heading opens the part of the guide about that page. */
+.page-help {
+  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
+  margin-left: 0.75rem; border: 1px solid var(--line); border-radius: 50%; color: var(--text-subtle);
+  font-weight: 700; font-size: 0.875rem; text-decoration: none;
+}
+.page-help:hover { border-color: var(--brand-primary); color: var(--link); background: var(--subtle-brand); text-decoration: none; }
+.page-help:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
+/* A code block's Copy button. */
+.help-body pre.has-copy { position: relative; padding-right: 4.5rem; }
+.help-copy {
+  position: absolute; top: 0.375rem; right: 0.375rem; padding: 0.125rem 0.5rem; border: 1px solid var(--line);
+  border-radius: 0.375rem; background: var(--surface-card); color: var(--text-default); font: inherit; font-size: 0.75rem; cursor: pointer;
+}
+.help-copy:hover { border-color: var(--brand-primary); color: var(--link); }

package/public/css/components/hero.css

@@ -0,0 +1,16 @@
+/* ---------- Hero ---------- */
+
+.logo {
+  width:5.25rem;
+  height:5.25rem;
+  margin: 0 auto;
+  border-radius: 50%;
+  background: linear-gradient(150deg, var(--brand-primary), var(--brand-secondary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size:2.5rem;
+  box-shadow: 0 10px 24px rgba(30, 135, 240, .35);
+}
+
+.logo-sm { width:4.125rem; height:4.125rem; font-size:1.875rem; }

package/public/css/components/images.css

@@ -0,0 +1,70 @@
+/* The images gallery uses the shared file list (.file-list, .fx-row) the docs and videos lists draw;
+   these are only what a picture needs on top of it. */
+html[data-files-view^="grid"] .img-row .fx-thumb { cursor: zoom-in; }
+html[data-files-view^="grid"] .img-row .fx-thumb.is-vector img { object-fit: contain; padding: 1.25rem; box-sizing: border-box; }
+.fx-source { display: block; font-size: 0.72rem; font-weight: 400; color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* The viewer, in the editor modal. */
+.img-viewer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
+.img-viewer-head h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.img-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-height: 65vh;
+  overflow: auto;
+  border-radius: 0.6rem;
+  background: var(--surface-muted);
+}
+.img-stage.is-fit { overflow: hidden; }
+.img-stage.is-fit img { max-width: 100%; max-height: 65vh; width: auto; height: auto; object-fit: contain; }
+.img-stage:not(.is-fit) { justify-content: flex-start; align-items: flex-start; }
+.img-stage:not(.is-fit) img { max-width: none; max-height: none; }
+.img-nav { display: flex; justify-content: center; gap: 0.5rem; margin: 0.6rem 0; }
+.img-info { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0.5rem 0; }
+.img-info dt { color: var(--text-subtle); font-weight: 400; }
+.img-info dd { margin: 0; overflow-wrap: anywhere; }
+.img-made { border-top: 1px solid var(--line); padding-top: 0.5rem; }
+.img-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
+.img-rename-row { gap: 0.5rem; }
+.img-rename-row .uk-input { max-width: 24rem; }
+
+/* Upload: a drop zone that is also the file picker. */
+.img-drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 2rem 1rem;
+  border: 2px dashed var(--line-strong);
+  border-radius: 0.6rem;
+  text-align: center;
+  cursor: pointer;
+  color: var(--text-default);
+}
+.img-drop.is-over, .img-drop:hover { border-color: var(--brand-primary); background: var(--subtle-brand); }
+.img-drop-text { font-weight: 600; }
+.img-upload-log { margin-top: 0.75rem; max-height: 14rem; overflow: auto; }
+.img-upload-log .msg { margin: 0; }
+.img-edit { margin-top: 0.5rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
+.img-edit > summary { cursor: pointer; font-weight: 600; }
+
+/* What a generation made, before it is opened. */
+.img-made-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
+.img-made-thumb {
+  display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: zoom-in;
+  border: 1px solid var(--line); border-radius: 0.6rem; background: var(--surface-muted);
+}
+.img-made-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
+
+/* An AI prompt is a few lines: its editor leaves room for the provider's fields below it. */
+#editor-modal .img-ai .ace-host:not(.ace-host-single),
+#editor-modal .img-ai-edit .ace-host:not(.ace-host-single) { height: clamp(7rem, 20vh, 12rem) !important; }
+
+/* Generate SVG: the palette as colour swatches, and its chips in the plan. */
+.svg-palette { border: 0; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
+.svg-palette legend { width: 100%; }
+.svg-swatch { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
+.svg-swatch input[type="color"] { width: 2rem; height: 1.6rem; padding: 0; border: 1px solid var(--line); border-radius: 0.3rem; background: none; cursor: pointer; }
+.svg-chip { display: inline-block; width: 1rem; height: 1rem; border-radius: 0.2rem; border: 1px solid var(--line); vertical-align: middle; margin-right: 0.15rem; }
+.img-stage picture { display: contents; }

package/public/css/components/layout-rhythm-and-spacing-polish.css

@@ -0,0 +1,139 @@
+/* ---------- Layout rhythm & spacing polish ---------- */
+
+.page-body {
+  padding-top:1.75rem;
+  padding-bottom:3rem;
+}
+
+/* Toolbar breathing room */
+.toolbar .uk-navbar-item { padding:0 0.75rem 0 0; min-height:4rem; }
+
+/* Workspace cards: even inner padding + consistent vertical spacing */
+.workspace-card { padding:1.5rem 1rem 1.25rem; height: 100%; }
+.workspace-card .icon { margin-bottom:0.75rem; }
+.workspace-card .uk-card-title { margin-top:0.125rem; font-size:1.0625rem; }
+.workspace-card .uk-text-meta { margin-top:0.125rem; min-height: 2.6em; display: block; }
+.workspace-card .uk-label { margin-top:0.625rem; }
+
+/* Equal-height card cells */
+.workspace-grid > div, .uk-grid > .uk-position-relative { display: flex; }
+.uk-grid > .uk-position-relative > .workspace-card { flex: 1; }
+
+/* Workspaces panel: balanced padding */
+.workspaces-card, .uk-card-body { border-radius:0.75rem; }
+
+/* Section headings inside cards */
+.webship-workspace-page .uk-card-body h3 { margin-top:1.5rem; }
+.webship-workspace-page .uk-card-body h3:first-child { margin-top: 0; }
+
+/* Project rows: consistent inner spacing */
+.project-row { padding:0.875rem 1.125rem; margin-bottom:0.625rem; }
+
+/* Footer: tighter */
+footer.uk-section { padding-top:1.25rem; padding-bottom:1.625rem; }
+
+/* Very large screens: cap content width, keep it centered comfortably */
+@media (min-width: 112.5em) {
+  .uk-container-xlarge { max-width:97.5rem; }
+}
+
+/* Tablets: assistant stacks above with sane spacing */
+@media (max-width: 59.9375em) {
+  .page-body { padding-top:1.125rem; }
+  .assistant-panel { margin-bottom:0.25rem; }
+}
+
+/* Phones: tighter cards, full-width floating assistant */
+@media (max-width: 40em) {
+  .workspace-card { padding:1.125rem 0.75rem 1rem; }
+  .workspace-card .uk-text-meta { min-height: 0; }
+  .project-row { padding:0.75rem 0.875rem; }
+  .project-row .uk-flex { gap:0.5rem; }
+  .assistant-float {
+    right:0.625rem;
+    left:0.625rem;
+    width: auto;
+    bottom:5.375rem;
+  }
+  .assistant-launcher { left:0.875rem; bottom:0.875rem; }
+  .toolbar-logo span { font-size:1.0625rem; }
+}
+
+/* The user guide at /help. Rendered from markdown, so it is the one page whose content is
+ * long-form prose rather than controls: it needs a measure that can be read, and tables that
+ * do not force the page sideways. */
+.help-page { max-width: 52rem; }
+.help-page h1 { margin-top: 0; }
+.help-page h2 { margin-top: 2.25rem; }
+.help-page h3 { margin-top: 1.5rem; }
+.help-page p, .help-page li { line-height: 1.65; }
+.help-page table { width: 100%; display: block; overflow-x: auto; }
+.help-page td, .help-page th { padding: .35rem .6rem; vertical-align: top; }
+/* The guide is mostly command lines, and they are longer than a phone is wide:
+ * `bash ~/workspace/core/scripts/trust-https.sh` measured 383px in a 345px viewport and
+ * pushed the whole document sideways. Two different fixes, because they are two cases:
+ *   - a BLOCK of code scrolls inside itself, and must be told it cannot exceed its column;
+ *   - INLINE code in a sentence has to wrap, and `overflow-wrap: anywhere` is what breaks a
+ *     path with no spaces in it. (`word-break: break-word` is non-standard and did not.) */
+/* Inline code in the guide is mostly file paths and commands, and the site's own `code`
+ * styling sets white-space: nowrap — which BEATS overflow-wrap entirely, so a 425px path sat
+ * in a 345px viewport and pushed the document sideways. Both properties are needed, and the
+ * nowrap has to be undone first; overflow-wrap alone did nothing, which is what made this
+ * look like the rule was not applying.
+ * Blocks keep `pre` semantics and scroll inside themselves instead. */
+.help-page :not(pre) > code {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+/* Pandoc wraps a fenced block as div.sourceCode > pre > code, and it is the DIV that has to
+ * be constrained: constraining only the pre left the div sizing itself to an 784px line in a
+ * 345px viewport, which is what actually pushed the page. */
+.help-page pre,
+.help-page div.sourceCode { max-width: 100%; overflow-x: auto; }
+.help-page pre code { overflow-wrap: normal; white-space: pre; }
+.help-page hr { margin: 2rem 0 1rem; }
+
+/* ---- keyboard access ------------------------------------------------------------------
+ * Measured by walking Tab through /dev: the page's own content — the build form, the project
+ * list — was tab stop EIGHTEEN, after the toolbar, the whole assistant panel and eleven rail
+ * controls. That is the cost of a rich chrome, and a skip link is the standard answer.
+ *
+ * Invisible until focused, then a real target at the top-left. It must never be
+ * `display: none` or `visibility: hidden`: both remove it from the tab order, which is the
+ * usual way a skip link ends up not working. */
+.skip-link {
+  position: absolute;
+  left: .5rem;
+  top: -3rem;
+  z-index: 1100;
+  padding: .5rem .85rem;
+  background: var(--brand-primary);
+  color: var(--text-inverse);
+  border-radius: 0 0 8px 8px;
+  font-size: .8125rem;
+  text-decoration: none;
+  transition: top .12s ease-out;
+}
+
+.skip-link:focus,
+.skip-link:focus-visible {
+  top: 0;
+  outline: 2px solid var(--text-default);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skip-link { transition: none; }
+}
+
+/* The target takes focus programmatically, so it must not draw a ring of its own when the
+ * skip link sends the caret there. */
+#main-content:focus { outline: none; }
+
+/* UIKit's checkbox draws no focus ring at all, so it was the one control on the page a
+ * keyboard user could land on without seeing where they were. */
+.uk-checkbox:focus-visible,
+.uk-radio:focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+}