/*
  The look of the catalog browser.

  No tokens are defined here, on purpose.  This file assumes the host has already loaded
  a token file — `@scrim/components/tokens.css`, or the AlgoX2 design system's, which
  defines the same names — and every colour below is a `var()` on one of them:

    --background --foreground --card --card-foreground --popover --popover-foreground
    --primary --primary-foreground --secondary --secondary-foreground --muted
    --muted-foreground --accent --accent-foreground --border --input --ring --destructive
    --radius --brand

  There is not one literal colour in this file.  That is the whole mechanism: swapping in
  a design system is loading a different tokens.css, and nothing here is touched.

  The --state-* and --tree-* properties are component-internal aliases, not tokens.  They
  exist so a variant changes one line instead of five, and they only ever hold a var() on
  a real token.
*/

/* --------------------------------------------------------------------------- */
/* Tree                                                                         */
/* --------------------------------------------------------------------------- */

.scrim-tree {
  --tree-indent: 1.125rem;

  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Depth is padding, computed from aria-level, so there are no spacer elements between
   the row and its text.  The inline start padding is what a nested list would have given
   us, without the markup a screen reader would then have to walk. */
.scrim-tree__row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.5rem;
  padding-inline-start: calc(0.25rem + (var(--scrim-tree-level, 1) - 1) * var(--tree-indent));
  border-radius: calc(var(--radius) / 2);
  color: var(--card-foreground);
  cursor: pointer;
  user-select: none;
}

.scrim-tree__row:hover {
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
}

/* The one tab stop's focus ring.  Inside the row rather than around it, so a focused row
   at the edge of a scrolling tree is not half a ring. */
.scrim-tree__row:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.scrim-tree__row[aria-current='page'] {
  background: color-mix(in oklch, var(--primary) 12%, var(--card));
  color: var(--foreground);
  font-weight: 600;
}

.scrim-tree__row--folder {
  font-weight: 500;
}

.scrim-tree__lead {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
}

.scrim-tree__twisty {
  width: 1rem;
  height: 1rem;
  transition: transform 120ms ease;
}

.scrim-tree__row[aria-expanded='true'] .scrim-tree__twisty {
  transform: rotate(90deg);
}

/* A document keeps the twisty's width so titles line up in a column whether or not their
   neighbours have children. */
.scrim-tree__twisty-placeholder {
  width: 1rem;
  height: 1rem;
}

.scrim-tree__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scrim-tree__raw {
  margin-left: 0.5rem;
  padding: 0 0.35rem;
  font:
    500 10px ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.scrim-tree__raw,
.scrim-tree__state {
  flex: none;
}

.scrim-tree__empty,
.scrim-doclist__empty,
.scrim-labels__empty {
  margin: 0;
  padding: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.scrim-tree--empty,
.scrim-doclist--empty {
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

/* --------------------------------------------------------------------------- */
/* Labels                                                                       */
/* --------------------------------------------------------------------------- */

.scrim-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.scrim-labels__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.3;
  cursor: pointer;
}

.scrim-labels__label:hover:not(:disabled) {
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--foreground) 25%, var(--border));
}

/* Pressed is a filled pill, not a tinted one: at this size a tint is easy to miss, and
   the selected labels are the sentence the reader is currently reading. */
.scrim-labels__label[aria-pressed='true'] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.scrim-labels__label:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.scrim-labels__label:focus-visible,
.scrim-labels__clear:focus-visible,
.scrim-doclist__open:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.scrim-labels__name {
  font-weight: 500;
}

.scrim-labels__count {
  padding: 0 0.3125rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--foreground) 10%, transparent);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}

.scrim-labels__label[aria-pressed='true'] .scrim-labels__count {
  background: color-mix(in oklch, var(--primary-foreground) 22%, transparent);
}

.scrim-labels__clear {
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.scrim-labels__clear:hover {
  color: var(--foreground);
}

/* --------------------------------------------------------------------------- */
/* Document list                                                                */
/* --------------------------------------------------------------------------- */

.scrim-doclist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scrim-doclist__item {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
}

.scrim-doclist__item:hover {
  border-color: color-mix(in oklch, var(--foreground) 22%, var(--border));
}

/* The whole title row is the control.  A card with one small link in it is a card people
   click on and nothing happens. */
.scrim-doclist__open {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.scrim-doclist__title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}

.scrim-doclist__open[aria-current='page'] .scrim-doclist__title {
  color: var(--primary);
}

.scrim-doclist__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.375rem 0 0;
}

.scrim-doclist__label {
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------- */
/* State badge                                                                  */
/* --------------------------------------------------------------------------- */

/*
  Three signals, and colour is only one of them.

  The word is always there.  The shape is always there — a ring that fills as the
  document advances, ticked or crossed at the two ends.  And the border style differs:
  dashed while the document is still being thought about, solid once it is real, dashed
  again once it is abandoned.  Print this page in black and white and every state is
  still told apart.  That is the test; the colour is the shortcut for readers who can
  take it.
*/
.scrim-state {
  --state-ink: var(--muted-foreground);
  --state-edge: solid;

  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.0625rem 0.4375rem 0.0625rem 0.3125rem;
  border: 1px var(--state-edge) color-mix(in oklch, var(--state-ink) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in oklch, var(--state-ink) 10%, var(--card));
  color: var(--state-ink);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.scrim-state__mark {
  flex: none;
  width: 0.875em;
  height: 0.875em;
}

.scrim-state--prediscussion {
  --state-ink: var(--muted-foreground);
  --state-edge: dashed;
}

.scrim-state--ideation {
  --state-ink: var(--secondary-foreground);
  --state-edge: dotted;
}

.scrim-state--discussion {
  --state-ink: var(--primary);
}

.scrim-state--published {
  --state-ink: var(--accent-foreground);

  background: var(--accent);
}

.scrim-state--committed {
  --state-ink: var(--brand);
}

.scrim-state--abandoned {
  --state-ink: var(--destructive);
  --state-edge: dashed;
}

/* A state the vocabulary does not know still renders, in its own words and neutrally —
   the value came from a document, so it can be anything at all. */
.scrim-state--unknown {
  --state-ink: var(--muted-foreground);
}