@axiapps/axi-design 1.6.0

package/src/primitives.css

@@ -0,0 +1,301 @@
+/* axi design language - primitives.
+   The pieces that recur in every property. Two rules govern the whole file:
+   a raised thing is outlined in --axi-ink-line and carries a hard offset
+   block, never a blur; and a filled chip asserts a value while an outlined
+   one annotates. */
+
+/* ---------- panel ---------- */
+/* The surface every larger component is built on. Kept as its own class so a
+   consumer can raise an arbitrary block into the language without waiting for
+   us to ship a component for it. */
+.axi-panel {
+  background: var(--axi-surface);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  /* A panel owns its padding so every consumer doesn't have to invent one;
+     override per instance with --axi-panel-pad where a tighter or looser
+     fit is genuinely called for. */
+  padding: var(--axi-panel-pad, 26px);
+}
+
+/* ---------- button ---------- */
+.axi-btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 20px;
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: 8px;
+  background: var(--axi-ground);
+  color: var(--axi-text-dim);
+  font: var(--axi-t-label);
+  letter-spacing: var(--axi-ls-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform .1s, box-shadow .1s;
+}
+/* Hover lifts. Nothing in this language fades or glows: the block deepens and
+   the element moves against it, which reads instantly even in peripheral
+   vision and costs no colour. */
+.axi-btn:hover {
+  color: var(--axi-text);
+  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  transform: translate(-2px, -2px);
+}
+.axi-btn--primary {
+  background: var(--axi-accent);
+  color: var(--axi-accent-ink);
+  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+}
+/* The one button that rests with a block already under it, so the generic
+   hover's translate alone would move element and block together and leave the
+   lower-right edge where it started - the "grows rather than lifts" failure
+   rule 4 warns about. It lifts the way a panel does: the block deepens too. */
+.axi-btn--primary:hover {
+  color: var(--axi-accent-ink);
+  box-shadow: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
+}
+.axi-btn--ghost { background: transparent; }
+.axi-btn--dashed { background: transparent; border-style: dashed; }
+
+/* ---------- pill ---------- */
+/* A filter toggle. Its pressed state fills with whatever colour the consumer
+   has put on it, so the control reads as the thing it filters to rather than
+   as a generic "selected". Consumers set that colour with --axi-pill-fill,
+   on the pill or on any ancestor - it is read through a fallback and never
+   declared on the component, which is what keeps both placements working. */
+.axi-pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 10px 9px;
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: 8px;
+  background: var(--axi-ground);
+  color: var(--axi-text-dim);
+  font: var(--axi-t-label);
+  letter-spacing: var(--axi-ls-label);
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: transform .1s, box-shadow .1s;
+}
+.axi-pill:hover {
+  color: var(--axi-text);
+  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  transform: translate(-2px, -2px);
+}
+.axi-pill[aria-pressed="true"] {
+  background: var(--axi-pill-fill, var(--axi-accent));
+  color: var(--axi-accent-ink);
+  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+}
+/* Spelled out rather than left to source order: `.axi-pill:hover` and
+   `.axi-pill[aria-pressed="true"]` have identical specificity, so without this
+   rule a pressed pill under the cursor kept its pressed block while still
+   taking the hover's translate - a slide, not a lift, decided by which rule
+   happened to come last in the file. A pressed pill keeps its fill and lifts. */
+.axi-pill[aria-pressed="true"]:hover {
+  background: var(--axi-pill-fill, var(--axi-accent));
+  color: var(--axi-accent-ink);
+  box-shadow: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
+  transform: translate(-2px, -2px);
+}
+
+/* ---------- switch ---------- */
+/* On/off for a setting, where a pill's "pressed" is not enough: a pill says
+   which of several filters you chose, a switch says what state one thing is
+   in when nothing else is on screen to compare it against. Rule 5 is what
+   makes it legible - the filled track asserts the setting's status, and the
+   status is the only thing that changes between the two states.
+
+   It is a slot with something sitting in it, so it takes no block: the block
+   belongs to things you press. The track carries a full ink edge at the
+   control weight and the raised surface, because an off switch inside a panel
+   is a surface on a surface - without the edge the track vanishes and all you
+   see is a slug floating in the card.
+
+   The slug is ink in both states. That is deliberate: on and off differ in
+   what colour is in the slot, never in how bright the part that moves is. */
+.axi-switch {
+  position: relative;
+  flex: none;
+  display: inline-block;
+  width: var(--axi-switch-w, 46px);
+  height: var(--axi-switch-h, 26px);
+  padding: 0;
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+  background: var(--axi-surface-raised);
+  cursor: pointer;
+}
+/* Read through a fallback and never declared on the component, so a consumer
+   can set the on-colour on the switch or on any ancestor - the same contract
+   as --axi-pill-fill. A switch that turns something dangerous on can fill in
+   --axi-danger and say so. */
+.axi-switch[aria-checked="true"] { background: var(--axi-switch-fill, var(--axi-accent)); }
+/* Pinned to the track's insets rather than given a height and centred, so the
+   slug stays correct if the track is resized. Only its travel is a transform,
+   which is the one thing rule 11 lets move. */
+.axi-switch__knob {
+  position: absolute;
+  top: 2px; bottom: 2px; left: 2px;
+  width: var(--axi-switch-knob, 16px);
+  border-radius: 2px;
+  background: var(--axi-ink-line);
+  transition: transform .1s;
+}
+/* The travel is the track's inner width less the slug and its two insets.
+   Spelled as a calc over the same tokens the track is built from so it stays
+   right at any size, and - the part that matters - at any border weight: a
+   hard-coded travel measured against one weight puts the slug through the
+   right-hand edge the moment rule 3's numbers change. */
+.axi-switch[aria-checked="true"] .axi-switch__knob {
+  transform: translateX(calc(
+    var(--axi-switch-w, 46px) - 2 * var(--axi-border-control)
+    - var(--axi-switch-knob, 16px) - 4px));
+}
+
+/* ---------- chip ---------- */
+/* Filled asserts, outlined annotates. The unmodified chip is a neutral fact;
+   the status modifiers assert a value; --meta is the only outlined variant and
+   is drawn in the reserved cool ink, so a reader can tell commentary from
+   data without reading either. */
+.axi-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 9px;
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+  background: var(--axi-surface-raised);
+  color: var(--axi-text-dim);
+  font: var(--axi-t-micro);
+  letter-spacing: var(--axi-ls-micro);
+  text-transform: uppercase;
+}
+.axi-chip--ok { background: var(--axi-ok); color: var(--axi-ink-line); }
+.axi-chip--warn { background: var(--axi-warn); color: var(--axi-ink-line); }
+.axi-chip--danger { background: var(--axi-danger); color: var(--axi-ink-line); }
+.axi-chip--accent { background: var(--axi-accent); color: var(--axi-accent-ink); }
+.axi-chip--meta {
+  background: transparent;
+  border-color: var(--axi-meta);
+  color: var(--axi-meta);
+}
+
+/* ---------- count badge ---------- */
+.axi-badge-count {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 99px;
+  background: var(--axi-accent);
+  color: var(--axi-accent-ink);
+  font: var(--axi-t-micro);
+}
+
+/* ---------- diamond ---------- */
+/* The family motif: a rotated outlined square. Used as a bullet, a status dot
+   and, scaled up behind a glyph, the brand sigil. */
+.axi-diamond {
+  display: inline-block;
+  width: 9px; height: 9px; flex: none;
+  transform: rotate(45deg);
+  background: var(--axi-meta);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+}
+.axi-diamond--accent { background: var(--axi-accent); }
+.axi-diamond--ok { background: var(--axi-ok); }
+.axi-diamond--warn { background: var(--axi-warn); }
+.axi-diamond--danger { background: var(--axi-danger); }
+/* A legend key, where the diamond stands for a series rather than a state.
+   Opt-in rather than a default on .axi-diamond: --axi-series is read from
+   whatever ancestor sets it, and a chart panel that sets one would otherwise
+   silently recolour every bullet inside it. */
+.axi-diamond--series { background: var(--axi-series, var(--axi-accent)); }
+
+/* ---------- input ---------- */
+.axi-input {
+  width: 100%;
+  padding: 11px 12px;
+  background: var(--axi-ground);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: 8px;
+  color: var(--axi-text);
+  font: var(--axi-t-label);
+  font-size: 14px;
+}
+.axi-input::placeholder { color: var(--axi-text-faint); font-weight: 500; }
+
+/* A search input with the magnifier drawn inside it. The glyph is the
+   consumer's; this only reserves the room and positions it. */
+.axi-search { position: relative; }
+.axi-search .axi-input { padding-left: 38px; }
+.axi-search__icon {
+  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
+  color: var(--axi-accent); font-weight: 900; pointer-events: none;
+}
+
+/* ---------- select ---------- */
+/* The closed box is ours everywhere: strip the native control and draw the
+   caret, so a select sits alongside the other controls as just another
+   outlined chip instead of announcing the OS. */
+.axi-select {
+  appearance: none;
+  padding: 10px 30px 10px 9px;
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: 8px;
+  background-color: var(--axi-ground);
+  color: var(--axi-text-dim);
+  font: var(--axi-t-label);
+  font-size: 12.5px;
+  letter-spacing: var(--axi-ls-label);
+  text-transform: uppercase;
+  cursor: pointer;
+  /* Two triangles meeting: a caret with no image and no icon font. */
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--axi-accent) 50%),
+    linear-gradient(135deg, var(--axi-accent) 50%, transparent 50%);
+  background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  transition: transform .1s, box-shadow .1s;
+}
+.axi-select:hover {
+  color: var(--axi-text);
+  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  transform: translate(-2px, -2px);
+}
+
+/* The popup stays OS chrome until a browser lets us style it. Where one does
+   (Chromium's base-select), the list is drawn with the same outline and offset
+   block as our own popovers, so both dropdown kinds read as one family; where
+   it does not, the closed box above is still ours and the list is native. */
+@supports (appearance: base-select) {
+  /* base-select draws its own ::picker-icon, so the hand-drawn caret above
+     would be a second arrow. */
+  .axi-select, .axi-select::picker(select) { appearance: base-select; }
+  .axi-select { background-image: none; padding-right: 9px; }
+  .axi-select::picker-icon { color: var(--axi-accent); transition: none; }
+  .axi-select::picker(select) {
+    margin-top: 9px; padding: 6px;
+    border: var(--axi-border-panel) solid var(--axi-ink-line);
+    border-radius: 9px;
+    background: var(--axi-surface-raised);
+    box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  }
+  .axi-select option {
+    display: flex; align-items: center; gap: 9px;
+    padding: 8px 9px;
+    border-radius: var(--axi-radius-sm);
+    background: transparent;
+    color: var(--axi-text-dim);
+    font: var(--axi-t-label);
+    font-size: 12.5px;
+    letter-spacing: var(--axi-ls-label);
+    text-transform: uppercase;
+  }
+  .axi-select option:hover, .axi-select option:focus {
+    background: var(--axi-ground); color: var(--axi-text);
+  }
+  /* The page-wide focus ring sits 2px outside its element; inside a picker
+     that is 2px into the neighbouring row, so pull it back in. */
+  .axi-select option:focus-visible { outline-offset: -3px; }
+  .axi-select option:checked { color: var(--axi-text); }
+  .axi-select option::checkmark { content: "\2713"; color: var(--axi-accent); font-weight: 900; }
+}

package/src/prose.css

@@ -0,0 +1,93 @@
+/* axi design language - prose.
+   A single class wrapping rendered markdown, so a content pipeline can emit
+   plain HTML with no classes at all and still land inside the language.
+
+   This layer has no ancestor in the source site, which was all cards and
+   controls. The restraint it needs is different: long-form reading wants
+   generous leading and quiet rules, and the offset blocks that make a card
+   feel physical would make a paragraph feel shouted. So nothing in here is
+   blocked except the code block and the table, which are genuinely objects
+   dropped into the text rather than part of its flow. */
+.axi-prose { color: var(--axi-text-dim); font: var(--axi-t-body); }
+
+.axi-prose > :first-child { margin-top: 0; }
+.axi-prose > :last-child { margin-bottom: 0; }
+
+.axi-prose h1 { margin: 0 0 18px; font: var(--axi-t-h1); letter-spacing: var(--axi-ls-h1); color: var(--axi-text); }
+.axi-prose h2 {
+  margin: 38px 0 14px; padding-top: 22px;
+  border-top: var(--axi-border-control) solid var(--axi-rule);
+  font: var(--axi-t-h2); letter-spacing: var(--axi-ls-h2); color: var(--axi-text);
+}
+.axi-prose h3 { margin: 28px 0 10px; font: var(--axi-t-h3); letter-spacing: var(--axi-ls-h3); color: var(--axi-text); }
+.axi-prose h4 {
+  margin: 22px 0 8px;
+  font: var(--axi-t-eyebrow); letter-spacing: var(--axi-ls-eyebrow);
+  text-transform: uppercase; color: var(--axi-text-faint);
+}
+
+.axi-prose p { margin: 0 0 16px; }
+.axi-prose strong { color: var(--axi-text); font-weight: 800; }
+/* Prose is the one place a link should announce itself: a reader scanning an
+   article is looking for them, and inheriting the body ink would hide them. */
+.axi-prose a { color: var(--axi-accent); font-weight: 600; text-underline-offset: 2px; }
+.axi-prose a:hover { color: var(--axi-text); }
+
+.axi-prose ul, .axi-prose ol { margin: 0 0 16px; padding-left: 22px; }
+.axi-prose li { margin: 0 0 7px; }
+/* The family motif as a bullet. Drawn with ::marker's replacement rather than
+   a background image so it inherits the list's own indentation. */
+.axi-prose ul { list-style: none; padding-left: 20px; }
+.axi-prose ul > li { position: relative; }
+.axi-prose ul > li::before {
+  content: ""; position: absolute; left: -20px; top: .55em;
+  width: 7px; height: 7px; transform: rotate(45deg);
+  background: var(--axi-accent);
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+}
+
+.axi-prose code {
+  font-family: var(--axi-mono); font-size: .88em;
+  background: var(--axi-ground); color: var(--axi-text);
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+  border-radius: 4px; padding: 1px 5px;
+}
+.axi-prose pre {
+  margin: 0 0 18px; padding: 14px 16px; overflow-x: auto;
+  background: var(--axi-ground);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+}
+.axi-prose pre code { background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.6; }
+
+.axi-prose blockquote {
+  margin: 0 0 18px;
+  padding: 11px 13px;
+  border-left: var(--axi-border-panel) solid var(--axi-accent);
+  background: var(--axi-ground);
+  border-radius: 0 var(--axi-radius-sm) var(--axi-radius-sm) 0;
+}
+.axi-prose blockquote p { margin: 0; font-style: italic; }
+
+.axi-prose table {
+  width: 100%; margin: 0 0 18px;
+  border-collapse: collapse;
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+  overflow: hidden;
+  font-size: 13.5px;
+}
+.axi-prose th {
+  text-align: left; padding: 10px 12px;
+  background: var(--axi-surface-raised); color: var(--axi-text);
+  font: var(--axi-t-micro); letter-spacing: var(--axi-ls-micro); text-transform: uppercase;
+}
+.axi-prose td { padding: 10px 12px; border-top: var(--axi-border-hairline) solid var(--axi-rule); }
+
+.axi-prose hr {
+  margin: 30px 0; height: 0;
+  border: 0; border-top: var(--axi-border-control) solid var(--axi-rule);
+}
+
+.axi-prose img { max-width: 100%; height: auto; border-radius: var(--axi-radius-sm); }

package/src/shells.css

@@ -0,0 +1,303 @@
+/* axi design language - shells.
+   Assembled components. Each is built from the primitives rather than
+   redefining them, so a change to .axi-panel moves the notice, the toolbar,
+   the popover and the card together. */
+
+/* The small uppercase heading that labels a panel's contents. */
+.axi-eyebrow {
+  margin: 0 0 14px;
+  font: var(--axi-t-eyebrow);
+  letter-spacing: var(--axi-ls-eyebrow);
+  text-transform: uppercase;
+  color: var(--axi-text-faint);
+}
+
+/* ---------- masthead ---------- */
+.axi-mast {
+  position: sticky; top: 0; z-index: 40;
+  background: var(--axi-ground);
+  border-bottom: var(--axi-border-panel) solid var(--axi-ink-line);
+}
+.axi-mast__in {
+  max-width: var(--axi-page); margin-inline: auto;
+  padding-inline: var(--axi-gutter);
+  display: flex; align-items: center; gap: 22px; min-height: 66px; flex-wrap: wrap;
+}
+.axi-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
+/* The sigil is the diamond motif scaled up with a glyph on top. The diamond is
+   a rotated pseudo-element behind the text rather than a rotated box, so the
+   glyph stays upright. isolation keeps the negative z-index inside the sigil
+   instead of dropping it behind the masthead. */
+.axi-sigil {
+  position: relative; isolation: isolate;
+  width: 34px; height: 34px; flex: none;
+  display: grid; place-items: center;
+  color: var(--axi-accent-ink); font-weight: 900; font-size: 13px;
+}
+.axi-sigil::before {
+  content: ""; position: absolute; inset: 0; z-index: -1;
+  transform: rotate(45deg);
+  border-radius: 5px;
+  background: var(--axi-accent);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+}
+.axi-brand__name { font: 800 17px/1.15 var(--axi-sans); letter-spacing: -.02em; }
+.axi-brand__name small {
+  display: block;
+  font: 700 10.5px/1.4 var(--axi-sans);
+  color: var(--axi-text-faint);
+  letter-spacing: .09em; text-transform: uppercase;
+}
+.axi-tabs { display: flex; gap: 8px; margin-left: auto; }
+.axi-tabs a {
+  padding: 8px 16px;
+  font: 800 13.5px/1 var(--axi-sans);
+  color: var(--axi-text-dim); text-decoration: none;
+  border: var(--axi-border-control) solid transparent;
+  border-radius: 8px;
+}
+.axi-tabs a:hover { color: var(--axi-text); border-color: var(--axi-rule); }
+/* The current tab is filled and blocked - the same treatment a pressed pill
+   gets, because it is the same idea: this one is on. */
+.axi-tabs a[aria-current="page"] {
+  background: var(--axi-accent);
+  color: var(--axi-accent-ink);
+  border-color: var(--axi-ink-line);
+  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+}
+
+/* ---------- notice ---------- */
+.axi-notice {
+  display: flex; gap: 14px; padding: 15px 18px;
+  background: var(--axi-surface);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+}
+.axi-notice__icon {
+  flex: none; width: 26px; height: 26px;
+  display: grid; place-items: center;
+  border-radius: var(--axi-radius-sm);
+  background: var(--axi-accent); color: var(--axi-accent-ink);
+  font-size: 14px; font-weight: 900;
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+}
+.axi-notice p { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
+.axi-notice b { color: var(--axi-accent); font-weight: 800; }
+
+/* ---------- toolbar ---------- */
+.axi-toolbar {
+  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
+  padding: 14px;
+  background: var(--axi-surface);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+}
+
+/* ---------- menu popover ---------- */
+/* A disclosure, not a permanent row of controls. The trigger is an .axi-btn
+   with aria-expanded; this styles the panel it opens. */
+.axi-menu { position: relative; }
+.axi-menu__pop {
+  /* Above .axi-mast's z-index: 40. Both sit in the root stacking context, so
+     a toolbar scrolled under the sticky masthead would otherwise open its
+     menu behind it. */
+  position: absolute; top: calc(100% + 9px); left: 0; z-index: 41;
+  width: var(--axi-menu-width, 310px);
+  max-height: 340px; overflow-y: auto; padding: 8px;
+  background: var(--axi-surface-raised);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: 9px;
+  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+}
+.axi-menu__pop[hidden] { display: none; }
+.axi-menu__pop label {
+  display: flex; gap: 9px; align-items: flex-start;
+  padding: 7px 8px; border-radius: var(--axi-radius-sm);
+  font-size: 13px; font-weight: 600; color: var(--axi-text-dim); cursor: pointer;
+}
+.axi-menu__pop label:hover { background: var(--axi-ground); color: var(--axi-text); }
+.axi-menu__pop input { margin: 3px 0 0; accent-color: var(--axi-accent); }
+
+/* ---------- card ---------- */
+.axi-card {
+  position: relative; overflow: hidden;
+  width: 100%; text-align: left;
+  display: flex; flex-direction: column; gap: 11px;
+  padding: 22px 16px 14px;
+  background: var(--axi-surface);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  font: inherit; color: inherit; text-decoration: none; cursor: pointer;
+  transition: transform .1s, box-shadow .1s;
+}
+.axi-card:hover {
+  transform: translate(-3px, -3px);
+  box-shadow: var(--axi-offset-panel-hover) var(--axi-offset-panel-hover) 0 var(--axi-ink-line);
+}
+/* The top strip is drawn from the card itself so a renderer does not have to
+   emit an extra element for it. It is opt-in: a card only gets a strip when
+   the consumer has a real value to encode in it, because a coloured strip that
+   means nothing is decoration impersonating data. */
+.axi-card--strip::before {
+  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px;
+  background: var(--axi-card-strip, var(--axi-accent));
+  border-bottom: var(--axi-border-panel) solid var(--axi-ink-line);
+}
+.axi-card__head { display: flex; gap: 12px; align-items: flex-start; }
+.axi-card__glyph {
+  flex: none; width: 40px; height: 40px;
+  display: grid; place-items: center;
+  border-radius: 8px;
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  background: var(--axi-surface-raised);
+  color: var(--axi-text);
+  font: 900 15px/1 var(--axi-sans);
+}
+.axi-card__title { flex: 1; min-width: 0; }
+.axi-card__title .axi-card__name {
+  display: block;
+  font: var(--axi-t-h3); letter-spacing: var(--axi-ls-h3);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.axi-card__title .axi-card__kind {
+  display: block; margin-top: 3px;
+  font: 700 11px/1.3 var(--axi-sans);
+  color: var(--axi-text-faint);
+  letter-spacing: .08em; text-transform: uppercase;
+}
+.axi-card p { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
+/* Pushed to the bottom so that in an equalised grid row every card's meta
+   strip lands on the same line and the rules read as continuous across the
+   grid. The cost is empty space on cards with less content. */
+.axi-card__meta {
+  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
+  margin-top: auto; padding-top: 12px;
+  border-top: var(--axi-border-control) solid var(--axi-rule);
+  font: 700 12px/1 var(--axi-sans);
+  color: var(--axi-text-faint);
+}
+.axi-card__go { margin-left: auto; color: var(--axi-accent); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
+.axi-card:hover .axi-card__go { color: var(--axi-text); }
+
+/* ---------- drawer ---------- */
+.axi-scrim { position: fixed; inset: 0; z-index: 50; background: var(--axi-scrim); border: 0; }
+.axi-drawer {
+  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
+  width: min(var(--axi-drawer-width, 560px), 100vw);
+  display: flex; flex-direction: column;
+  background: var(--axi-surface);
+  border-left: var(--axi-border-panel) solid var(--axi-ink-line);
+}
+.axi-drawer[hidden], .axi-scrim[hidden] { display: none; }
+.axi-drawer__head {
+  position: relative;
+  padding: 20px 24px 18px;
+  border-bottom: var(--axi-border-panel) solid var(--axi-ink-line);
+}
+.axi-drawer__head h2 {
+  margin: 2px 0 0; padding-right: 44px;
+  font: var(--axi-t-h2); letter-spacing: var(--axi-ls-h2);
+}
+.axi-drawer__close {
+  position: absolute; top: 16px; right: 18px;
+  width: 32px; height: 32px;
+  display: grid; place-items: center;
+  border-radius: 8px;
+  background: var(--axi-ground);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  color: var(--axi-text-dim);
+  font-size: 15px; font-weight: 900; cursor: pointer;
+  transition: transform .1s, box-shadow .1s;
+}
+.axi-drawer__close:hover {
+  background: var(--axi-accent); color: var(--axi-accent-ink);
+  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  transform: translate(-2px, -2px);
+}
+.axi-drawer__body { overflow-y: auto; padding: 18px 24px 30px; }
+
+/* ---------- pull-quote ---------- */
+/* A cited quotation. The accent rule down the left is the only place in the
+   language where colour marks a block rather than filling a chip - a quote is
+   someone else's words and wants to look borrowed. */
+.axi-quote {
+  margin: 0;
+  padding: 11px 13px;
+  border-left: var(--axi-border-panel) solid var(--axi-accent);
+  background: var(--axi-ground);
+  border-radius: 0 var(--axi-radius-sm) var(--axi-radius-sm) 0;
+}
+.axi-quote p { margin: 0; font-size: 13px; font-style: italic; color: var(--axi-text-dim); line-height: 1.5; }
+.axi-quote cite {
+  display: block; margin-top: 7px;
+  font-style: normal; font-size: 11.5px; font-weight: 700;
+  color: var(--axi-accent);
+}
+
+/* ---------- window ---------- */
+/* Chrome for a frameless desktop app, where the app is not a page inside a
+   browser but the outermost thing on the screen. Rule 3 says a raised
+   element is outlined; a window is the most raised element there is, so it
+   takes the panel outline. It carries no block, because a block is an
+   element's shadow on the surface behind it and there is nothing behind a
+   window that this language is entitled to draw on.
+   The titlebar is filled with the ink line rather than a surface: it is the
+   outline widened into a strip, which is why the app's content reads as
+   sitting inside the outline instead of under a second toolbar. */
+.axi-window {
+  height: 100vh;
+  display: flex; flex-direction: column; overflow: hidden;
+  background: var(--axi-ground);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+}
+.axi-titlebar {
+  flex: none;
+  display: flex; align-items: center; gap: 12px;
+  height: 38px; padding-left: 14px;
+  background: var(--axi-ink-line);
+  border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
+  font: var(--axi-t-micro);
+  letter-spacing: var(--axi-ls-micro);
+  text-transform: uppercase;
+  color: var(--axi-text-faint);
+  /* The strip is the drag handle; the buttons opt back out in Electron. */
+  -webkit-app-region: drag;
+}
+.axi-titlebar__btns { margin-left: auto; display: flex; height: 100%; -webkit-app-region: no-drag; }
+.axi-titlebar__btns button {
+  width: 44px;
+  border: 0;
+  background: transparent;
+  color: var(--axi-text-faint);
+  font: var(--axi-t-label);
+  cursor: pointer;
+}
+/* No lift here. A window button is chrome, not content: it has nothing to
+   lift off, and 44px of movement in the corner of every screen is exactly
+   the scattered motion rule 4 rations. It answers on the neutral ramp. */
+.axi-titlebar__btns button:hover { background: var(--axi-surface); color: var(--axi-text); }
+/* Close is the one destructive control in the chrome, and the one place a
+   status ink belongs in a titlebar. */
+.axi-titlebar__btns button:last-child:hover { background: var(--axi-danger); color: var(--axi-ink-line); }
+/* The scrolling region under the chrome. */
+.axi-window__body { flex: 1; overflow-y: auto; }
+
+@media (max-width: 640px) {
+  .axi-mast__in { min-height: 0; padding: 10px 16px; gap: 12px; }
+  .axi-tabs { margin-left: 0; width: 100%; overflow-x: auto; }
+  /* The offset blocks eat horizontal room a phone does not have, so the panel
+     step drops to the control step here rather than to an invented number.
+     The card's hover has to come down with it - left alone it kept deepening
+     to the panel hover block, so a card on a hover-emulating touch device
+     jumped further than it does on the desktop it was tuned for. */
+  .axi-notice, .axi-toolbar, .axi-card {
+    box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  }
+  .axi-card:hover {
+    box-shadow: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
+  }
+}