/* The type chip on an Organize rail card: which pile this proposed document
   belongs in. It takes a row of its own under the document name (the rail is
   narrow and the name is the headline), and it borrows the rail's own chip
   shape so it reads as part of the card rather than as a badge stuck on it. */

/* The rail card's controls have always been one flex line, and the type row is
   the first thing that needs a second one. Loaded after organize.css so this
   wins; nothing about the first line changes, because the controls on it still
   fit exactly as they did. */
.organize-split-chip { flex-wrap: wrap; row-gap: 4px; }
/* Line breaking happens BEFORE shrinking, and it measures each item at its
   flex-basis. On `auto` that is the document's whole name laid out on one line,
   which is wider than the rail, so the save and menu buttons were pushed onto
   lines of their own. A zero basis makes the name button take what is left of
   the row instead of asking for what it wants; the name already clamps to two
   lines, so it loses nothing. */
.organize-split-chipgo { flex-basis: 0; min-width: 0; }

.organize-pile-row {
  /* Takes the whole of the second line. Without the wrap above, a 100% basis
     would squeeze the name and the buttons on line one to nothing. */
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: 22px;   /* clears the grip + document dot, so it lines up with the name */
}

.organize-pile-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  flex: 0 1 auto;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-soft);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s, background-color 0.15s;
  animation: resultPop 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.organize-pile-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.organize-pile-chip svg { flex: none; opacity: 0.8; }
.organize-pile-chip:hover {
  color: var(--text);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.organize-pile-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Unsure, or read off a page with no words on it. The reader is honest about
   this, so the chip is too: quieter than a pile it stands behind, and the
   evidence it did read sits in the title. */
.organize-pile-chip.is-soft {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  background: none;
  color: var(--text-mute);
  font-weight: 500;
}
.organize-pile-chip.is-soft:hover { color: var(--text-soft); border-style: solid; }

/* The picker. A native control so the keyboard and the phone sheet come free,
   dressed to the rail so it does not read as a form field dropped on a card. */
.organize-pile-select {
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  animation: resultPop 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.organize-pile-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The index under the pile: vendor, date, amount, reference. A third row, and
   the last one the card gets, so it is quieter than the chip above it: no
   border, no background, muted text. It is a caption, not a control. */
.organize-index-row {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  margin-left: 22px;   /* the same clearance the pile row takes, so the two line up */
  color: var(--text-mute);
  font-size: 10px;
  line-height: 1.5;
  animation: resultPop 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.organize-index-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
}
.organize-index-item svg { flex: none; opacity: 0.7; }
/* The vendor is the one field that can run long, and it is the one worth
   truncating: a date, a sum and a filing number are short or they are wrong. */
.organize-index-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The icon carries the meaning for a sighted reader and nothing for a screen
   reader, so the word is in the row and off the screen. */
.organize-index-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  /* The global collapse already flattens the durations; these carry a scale in
     their keyframes, so the animation is dropped outright rather than run in a
     hundredth of a second. */
  .organize-pile-chip,
  .organize-index-row,
  .organize-pile-select { animation: none; }
  .organize-pile-chip:hover { box-shadow: none; }
}