/* GENERATED by `npm run design:build` from styles/ (scripts/design.ts, design/css.ts). Do not edit: change styles/. */

@layer components {

/* ── styles/components/ds.css ── */
/* components/ds.css: Shared design-system components (lozenge, status icon, avatar, icon, empty state). Shipped in components.css to every surface. */

/* Lozenge: a status label. Bold, uppercase, small square corners. */
.ds-lozenge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-050);
  height: 18px;
  padding: 0 5px;
  border-radius: var(--ds-radius-small);
  font: var(--ds-font-weight-bold) 11px/18px var(--ds-font-ui);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--tone-subtle, var(--ds-tone-neutral-subtle));
  color: var(--tone-text, var(--ds-tone-neutral-text));
}
/* The bold removed lozenge (Atlassian appearance "removed", isBold): the hardest states only. */
.ds-lozenge.ds-lozenge-bold { background: var(--ds-danger-bold); color: var(--ds-text-inverse); }
/* Status icon: a plain coloured glyph, no box behind it. */
.ds-status-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
  color: var(--tone, var(--ds-tone-neutral));
}
/* Avatar: initials on a solid tone fill. People are round; places, teams and
workspaces are square. */
.ds-avatar {
  --size: 24px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  font: 600 calc(var(--size) * 0.42)/1 var(--ds-font-ui);
  letter-spacing: 0;
  background: var(--tone, var(--ds-tone-neutral));
  color: var(--ds-text-inverse);
  box-shadow: 0 0 0 2px var(--ds-surface-raised);
}
.ds-avatar--square { border-radius: var(--ds-radius-small); }
.ds-avatar--md { --size: 32px; }
.ds-avatar--lg { --size: 40px; }
.ds-avatar--sm { --size: 20px; }
/* Icon from the sprite (UI.icon / static <use href="/icons/sprite.svg#ds-…">). */
.ds-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
  vertical-align: -0.2em;
}
.sort-ico { width: 12px; height: 12px; opacity: 0.55; vertical-align: -0.1em; }
/* An icon that starts a button or link label keeps a fixed gap from the text, in flex
buttons (which drop the space) and inline ones alike. */
:is(button, a) > .ds-icon:first-child { margin-right: 6px; }
/* Icon-only buttons (close, clear) have no label to space from. */
:is(.modal-close, .doc-search-clear, .ds-icon-only) > .ds-icon:first-child { margin-right: 0; }
.refresh-ico { display: inline-grid; place-items: center; margin-right: 6px; }
/* Empty state: one treatment for a table, card or grid with nothing in it. */
.ds-empty.ds-empty-center { padding: 32px 16px; text-align: center; }
.ds-empty-title { margin-bottom: 4px; font-weight: 600; color: var(--ds-text); }
/* Empty state with a heading, a line of help and one action (UI.emptyState). */
.ds-empty.ds-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 16px;
  text-align: center;
}
.ds-empty-state .ds-empty-title { margin: 0; font: 600 16px/20px var(--ds-font-ui); color: var(--ds-text); }
.ds-empty-state .ds-empty-text {
  max-width: 420px;
  font: 400 14px/20px var(--ds-font-ui);
  color: var(--ds-text-subtle);
}
.ds-empty-state > button { margin-top: 8px; }
/* Visually hidden, still read by screen readers (an empty Actions header, for instance). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── styles/components/ds-button.css ── */
/* components/ds-button.css: The button for the server-rendered pages (onboarding, equipment, labels, message pages).
   Same look as the app's .btn-secondary / .btn-primary / .btn-danger: concept D's filled neutral control, no border. */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-control);
  background: var(--ds-button-default);
  color: var(--ds-text);
  font: 500 14px/20px var(--ds-font-ui);
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-out);
}
.ds-btn:hover:not(:disabled) { background: var(--ds-button-default-hovered); }
.ds-btn > .ds-icon:first-child { margin: 0; }
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-btn-primary { background: var(--ds-brand); color: var(--ds-text-on-brand); }
.ds-btn-primary:hover:not(:disabled) { background: var(--ds-brand-hovered); }
.ds-btn-danger { color: var(--ds-tone-danger-text); }
.ds-btn-danger:hover:not(:disabled) { background: var(--ds-tone-danger-subtle); }
/* A quiet button (Back): no fill until hover. */
.ds-btn-subtle { background: transparent; color: var(--ds-text-subtle); padding: 0 10px; }
.ds-btn-subtle:hover:not(:disabled) { background: var(--ds-surface-hovered); color: var(--ds-text); }

/* ── styles/components/command-bar.css ── */
/* components/command-bar.css: Command bar (Ctrl+K). Shipped in components.css. */

/* Command bar (⌘K): public/js/command-bar.js */
.ds-cmd { position: fixed; inset: 0; z-index: 2000; }
.ds-cmd[hidden] { display: none; }
.ds-cmd-q {
  display: flex;
  align-items: center;
  gap: var(--ds-space-150);
  padding: var(--ds-space-150) var(--ds-space-200);
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text-subtle);
}
.ds-cmd-q input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 4px 0;
  font: 400 16px var(--ds-font-ui);
  color: var(--ds-text);
}
.ds-cmd-list { list-style: none; margin: 0; padding: var(--ds-space-100); overflow: auto; }
.ds-cmd-it {
  display: flex;
  align-items: center;
  gap: var(--ds-space-150);
  height: 40px;
  padding: 0 var(--ds-space-150);
  border-radius: var(--ds-radius-control);
  color: var(--ds-text);
  cursor: pointer;
}
.ds-cmd-it .ds-icon { color: var(--ds-text-subtle); }
.ds-cmd-it.on { background: var(--ds-surface-selected); color: var(--ds-link); }
.ds-cmd-it.on .ds-icon { color: var(--ds-link); }
.ds-cmd-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-cmd-empty { padding: var(--ds-space-200); color: var(--ds-text-subtle); }
.ds-cmd-bar {
  display: flex;
  gap: var(--ds-space-200);
  padding: var(--ds-space-100) var(--ds-space-200);
  border-top: 1px solid var(--ds-border);
  font-size: 12px;
  color: var(--ds-text-subtlest);
}
.ds-cmd-end { margin-left: auto; }
.ds-cmd kbd, .ds-kbd {
  font: 500 11px var(--ds-font-code);
  padding: 1px 6px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-small);
  color: var(--ds-text-subtle);
  background: var(--ds-surface-raised);
}
.ds-cmd-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px 0 12px;
  min-width: 0;
  border-radius: var(--ds-radius-control);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-sunken);
  color: var(--ds-text-subtlest);
  font: 400 14px/20px var(--ds-font-ui);
  text-align: left;
  cursor: pointer;
}
.ds-cmd-field span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-cmd-field:hover { border-color: var(--ds-border-bold); }
.ds-cmd-field:focus-visible { outline: 2px solid var(--ds-border-focused); outline-offset: 1px; }
.ds-cmd-it:focus-visible { outline-offset: -2px; }
/* ── Command bar (Ctrl+K): bare query line, dim blanket, grouped results ── */
.ds-cmd .ds-cmd-q input, .ds-cmd .ds-cmd-q input:focus {
  background: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  height: 28px;
  padding: 0;
}
.ds-cmd-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ds-ink) 50%, transparent);
  top: 56px;
}
.ds-cmd-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--ds-surface-overlay);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-overlay);
  overflow: hidden;
  font-family: var(--ds-font-ui);
  top: 120px;
  border-radius: var(--ds-radius-card);
}
.ds-cmd-group {
  padding: 6px 12px 4px;
  font: 600 11px var(--ds-font-ui);
  color: var(--ds-text-subtle);
  list-style: none;
}
.ds-cmd-it:not(.on):hover { background: var(--ds-item-hovered); }
/* On a phone the field keeps its room for the label: no ⌘K hint (there is no keyboard to press it on). */
@media (max-width: 640px) {
  .ds-cmd-field .ds-kbd { display: none; }
}

/* ── styles/components/select-enhance.css ── */
/* components/select-enhance.css: The one dropdown, public/js/select-enhance.js: the listbox it draws for a native <select> (app, onboarding and equipment pages), and its filter variant (.cs button + .ie-sel-filter listbox) for select.select-ctrl. Shipped in components.css. */

.ie-sel-pop {
  position: fixed;
  z-index: 100000;
  overflow: auto;
  background: var(--ds-surface-overlay);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-overlay);
  padding: 4px;
  font: 400 14px/20px var(--ds-font-ui);
  color: var(--ds-text);
}
.ie-sel-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border-radius: var(--ds-radius-control);
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ds-text);
}
/* Filter rows: plain text, 12px each side, no tick (before the hover/selected rules, which win). */
.ie-sel-filter .ie-sel-opt {
  gap: normal;
  padding: 0 12px;
  font: 400 14px/20px var(--ds-font-ui);
  overflow: visible;
  text-overflow: clip;
  transition: background .1s, color .1s;
}
.ie-sel-filter .ie-sel-opt:focus-visible { outline-offset: -2px; }
.ie-sel-opt > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ie-sel-opt:hover, .ie-sel-opt.ie-active { background: var(--ds-item-hovered); }
.ie-sel-opt.ie-on, .ie-sel-opt.ie-on:hover, .ie-sel-opt.ie-on.ie-active {
  background: var(--ds-surface-selected);
  color: var(--ds-link);
  font-weight: 500;
}
.ie-sel-opt .ie-tick {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  visibility: hidden;
  color: var(--ds-link);
}
.ie-sel-opt .ie-tick svg { width: 16px; height: 16px; fill: currentColor; }
.ie-sel-opt.ie-on .ie-tick { visibility: visible; }
.ie-sel-opt.ie-dis { color: var(--ds-text-subtlest); cursor: not-allowed; }
.ie-sel-grp {
  padding: 10px 8px 4px;
  font: 600 12px var(--ds-font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-text-subtlest);
}
.ie-sel-open { border-color: var(--ds-border-focused); box-shadow: 0 0 0 1px var(--ds-border-focused); }

/* ── Filter variant (.cs, select.select-ctrl): a quiet filter button, overlay menu,
neutral hover, blue selection; a filter moved off "All …" shows the set state ── */
.cs { position: relative; display: inline-block; vertical-align: middle; }
.cs .cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 140px;
  height: 32px;
  padding: 0 8px 0 12px;
  background: transparent;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-control);
  box-shadow: none;
  font: 500 14px/20px var(--ds-font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-text);
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.cs-btn .cs-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-btn:hover {
  background: var(--ds-surface-hovered);
  border-color: var(--ds-border);
  color: var(--ds-text);
}
.cs.cs-open .cs-btn {
  border-color: var(--ds-border-focused);
  box-shadow: 0 0 0 1px var(--ds-border-focused);
  color: var(--ds-text);
}
.cs.cs-set .cs-btn { background: var(--ds-surface-selected); border-color: transparent; color: var(--ds-link); }
.cs.cs-set.cs-open .cs-btn { border-color: var(--ds-border-focused); }
.cs-chev {
  flex-shrink: 0;
  transition: color .15s;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: none;
  color: var(--ds-text-subtle);
}
.cs.cs-set .cs-chev { color: var(--ds-link); }
/* Its listbox sits inside .cs, under the button: borderless, at least the button's width,
   the surrounding font. */
.ie-sel-pop.ie-sel-filter {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1500;
  min-width: 100%;
  max-height: 320px;
  border: none;
  font: inherit;
  color: inherit;
}

} /* @layer components */

@layer utilities {

/* ── styles/utilities/visibility.css ── */
/* utilities/visibility.css: [hidden] and .hidden always win (over inline styles too). Shipped in components.css. */

/* HTML's hidden attribute must always win over any display rule */
[hidden] { display: none !important; }
.hidden { display: none !important; }

} /* @layer utilities */