/* FILE: ticketbook/ui/tickets.css
 *
 * The Tickets view: the register read as a ruled table, with the search's
 * filters as a row of chips above it. Only the shell's tokens (CONTRACT.md §7)
 * — no radius, no shadow, no new colour. A row is a line of the book on the
 * 28px pitch; an active chip is marked the way the rest of the desk marks
 * "live": the live wash and full ink, never colour alone.
 */

.tix {
  min-height: 100%;
  display: grid;
  align-content: start;
  background: var(--ink-1);
  /* The register is narrower with an entry open beside it than without, and a
     viewport query cannot see that; the table sizes itself to this view. */
  container-type: inline-size;
  container-name: tix;
}

/* Head --------------------------------------------------------------------- */

.tix__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-2);
  border-bottom: var(--w-rule) solid var(--rule-2);
}

.tix__title {
  margin: 0;
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.tix__count {
  margin: 0;
  color: var(--bone-3);
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* The views strip: the four built-in groups, then the actor's own saved
   presets, then Save view — one horizontal strip, not a second nav. A view
   reads exactly like a chip that holds a selection (same live wash, same
   border) because choosing one IS choosing a filter state, just a named one. */

.tix__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-bottom: var(--w-rule) solid var(--rule-2);
}

.tix__view {
  display: inline-block;
  font-size: var(--t-small);
  color: var(--bone-2);
  text-decoration: none;
  background: transparent;
  border: var(--w-rule) solid var(--rule-2);
  padding: 3px var(--s-2);
  white-space: nowrap;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.tix__view:hover {
  color: var(--bone-1);
  border-color: var(--rule-3);
  background: var(--ink-3);
}

.tix__view[aria-current="page"] {
  color: var(--bone-1);
  background: var(--live-wash);
  border-color: var(--live);
}

.tix__presets {
  display: contents;
}

/* `display: contents` above wins over the UA stylesheet's `[hidden] { display:
   none }` — an author rule always beats one from the UA sheet, whatever the
   specificity — so hiding it while unsupported (§404) needs saying again
   here. */
.tix__presets[hidden] {
  display: none;
}

.tix__preset {
  display: inline-flex;
  align-items: stretch;
}

.tix__preset .tix__view {
  max-width: 12rem;
}

.tix__presetEdit,
.tix__presetDelete {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  font: inherit;
  font-size: var(--t-small);
  line-height: 1.3;
  color: var(--bone-3);
  background: transparent;
  border: var(--w-rule) solid var(--rule-2);
  border-left: 0;
  padding: 3px var(--s-1);
  cursor: pointer;
}

.tix__presetEdit:hover,
.tix__presetDelete:hover {
  color: var(--bone-1);
  background: var(--ink-3);
}

.tix__presetDelete:hover,
.tix__presetDelete:focus-visible {
  color: var(--rubric-ink);
}

.tix__presetEdit .glyph,
.tix__presetDelete .glyph {
  width: 12px;
  height: 12px;
}

.tix__presetsNote {
  color: var(--bone-3);
  font-size: var(--t-small);
}

.tix__presetsNote:empty {
  display: none;
}

.tix__saveTrigger {
  font-size: var(--t-small);
}

/* The inline Save/Rename form, ruled under the strip the same way the chip
   panel is ruled under the chip row — nothing on this desk floats. */
.tix__saveForm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--w-rule) solid var(--rule-2);
  background: var(--ink-2);
}

.tix__saveForm[hidden] {
  display: none;
}

.tix__saveLegend {
  color: var(--bone-2);
  font-size: var(--t-small);
  font-weight: 600;
}

.tix__saveForm .tix__label {
  margin-right: calc(-1 * var(--s-2));
}

.tix__saveForm .tix__input {
  min-width: 16rem;
}

.tix__presetMsg {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border-bottom: var(--w-rule) solid var(--rule-2);
  color: var(--rubric-ink);
  font-size: var(--t-small);
  line-height: 1.5;
}

.tix__presetMsg:empty {
  display: none;
}

/* Chips -------------------------------------------------------------------- */

.tix__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-bottom: var(--w-band) solid var(--rule-3);
}

.chip {
  font: inherit;
  font-size: var(--t-small);
  color: var(--bone-2);
  background: transparent;
  border: var(--w-rule) solid var(--rule-2);
  padding: 3px var(--s-2);
  cursor: pointer;
  max-width: 28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.chip:hover {
  color: var(--bone-1);
  border-color: var(--rule-3);
  background: var(--ink-3);
}

/* A chip holding a selection says so twice: its words, and the live band. */
.chip[data-active="true"] {
  color: var(--bone-1);
  background: var(--live-wash);
  border-color: var(--live);
}

.chip[aria-expanded="true"] {
  border-bottom-color: var(--live-ink);
}

.tix__clear[hidden] {
  display: none;
}

/* The open chip's choices, ruled under the chip row rather than floating over
   the table: nothing on this desk hovers above the book. */
.tix__panel {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--w-rule) solid var(--rule-2);
  background: var(--ink-2);
}

.tix__panel[hidden] {
  display: none;
}

.tix__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin: 0;
  padding: 0;
  border: 0;
}

.tix__check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--m-row);
  color: var(--bone-1);
  font-size: var(--t-small);
  cursor: pointer;
}

.tix__check input {
  accent-color: var(--live);
  margin: 0;
}

.tix__field {
  display: grid;
  gap: var(--s-1);
  max-width: 24rem;
}

.tix__field--dates {
  grid-template-columns: auto auto auto auto;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  max-width: none;
  justify-content: start;
}

.tix__label {
  color: var(--bone-2);
  font-size: var(--t-small);
}

.tix__input {
  font: inherit;
  font-size: var(--t-small);
  color: var(--bone-1);
  caret-color: var(--live-ink);
  background: transparent;
  border: 0;
  border-bottom: var(--w-band) solid var(--rule-3);
  padding: var(--s-1) 0;
  color-scheme: inherit;
}

.tix__input:focus {
  border-bottom-color: var(--live);
}

/* Lines under the chips ---------------------------------------------------- */

.tix__msg {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--w-rule) solid var(--rule-2);
  color: var(--rubric-ink);
  line-height: 1.55;
}

.tix__msg:empty {
  display: none;
}

/* The empty state is a written note against the fold, the same idiom as the
   empty register and the knowledge page. It names what was asked for. */
.tix__empty {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin: var(--s-4) var(--s-4) 0;
  padding-left: var(--s-4);
  border-left: var(--w-band) solid var(--rule-3);
}

.tix__empty[hidden] {
  display: none;
}

.tix__emptyline {
  margin: 0;
  color: var(--bone-2);
  max-width: 64ch;
  line-height: 1.6;
}

.tix__more {
  margin: 0;
  padding: var(--s-2) var(--s-4) var(--s-4);
  color: var(--bone-3);
  font-size: var(--t-small);
}

.tix__more:empty {
  display: none;
}

/* The table ---------------------------------------------------------------- */

.tix__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--t-small);
}

.tix__table[hidden] {
  display: none;
}

.tix__th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--m-row);
  padding: 0 var(--s-3);
  text-align: left;
  color: var(--bone-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--ink-1);
  border-bottom: var(--w-band) solid var(--rule-3);
}

.tix__sort {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.tix__sort:hover,
.tix__th[aria-sort="ascending"] .tix__sort,
.tix__th[aria-sort="descending"] .tix__sort {
  color: var(--bone-1);
}

.tix__th[aria-sort="ascending"] .tix__sort::after {
  content: " ↑";
}

.tix__th[aria-sort="descending"] .tix__sort::after {
  content: " ↓";
}

.tix__row {
  height: var(--m-row);
  cursor: pointer;
}

.tix__row:hover {
  background: var(--ink-3);
}

.tix__row[aria-current="true"] {
  background: var(--live-wash);
}

.tix__td {
  padding: var(--s-1) var(--s-3);
  border-bottom: var(--w-rule) solid var(--rule-1);
  color: var(--bone-2);
  white-space: nowrap;
  vertical-align: baseline;
}

.tix__td--title {
  color: var(--bone-1);
  white-space: normal;
  min-width: 16rem;
}

.tix__td--status {
  text-transform: none;
}

.tix__mark {
  display: inline-block;
  vertical-align: -2px;
  margin-right: var(--s-1);
  line-height: 0;
}

.tix__mark svg {
  width: 12px;
  height: 12px;
}

.tix__td--raised,
.tix__td--updated {
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  color: var(--bone-3);
}

/* A filed row reads one step quieter, as a filed slip did on the board. */
.tix__row[data-status="resolved"] .tix__td--title,
.tix__row[data-status="archived"] .tix__td--title {
  color: var(--bone-2);
}

/* Columns give up their place in order of how rarely a search is answered by
   them: Updated, then Requester, then Queue. Reference, title, status, holder
   and when it was raised always stay. */
@container tix (max-width: 1000px) {
  .tix__td--updated,
  .tix__th--updated {
    display: none;
  }

  .tix__td--title {
    min-width: 12rem;
  }
}

@container tix (max-width: 820px) {
  .tix__td--requester,
  .tix__th--requester {
    display: none;
  }
}

@container tix (max-width: 640px) {
  /* Ref, title and status are the useful narrow scan. Holder and dates
     remain in detail; otherwise the table also pushes filters off-screen. */
  .tix__td--queue,
  .tix__th--queue,
  .tix__td--held,
  .tix__th--held,
  .tix__td--raised,
  .tix__th--raised {
    display: none;
  }
}

/* A 12rem title floor can still squeeze status at narrow widths even after
   the less useful columns are gone. Let the title wrap within the remainder. */
@container tix (max-width: 640px) {
  .tix__td,
  .tix__th {
    padding: var(--s-1) var(--s-2);
  }

  .tix__td--title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* An icon plus the longest status word must survive title wrapping. */
  .tix__th--status,
  .tix__td--status {
    min-width: 6rem;
  }
}

@media print {
  .tix__strip,
  .tix__saveForm,
  .tix__presetMsg,
  .tix__chips,
  .tix__panel,
  .tix__clear {
    display: none !important;
  }
}

/* The supervisor mark, in the margin before a title. Never colour alone: the
 * glyph is a not-equals and says everything the tint repeats. */
.tix__flag {
  display: inline-flex;
  vertical-align: text-bottom;
  margin-inline-end: var(--s-1);
  color: var(--rubric-ink);
}

/* Bot couldn't answer: work worth doing well, not a fault, so ink not rubric. */
.tix__flag--gap {
  color: var(--bone-2);
}