/* ==========================================================================
   CATALOGUE — the platform's services, their forms, documents and fees
   --------------------------------------------------------------------------
   Owned by the catalogue workstream. Prefix: .cat-
   Rules for this file: design TOKENS only (no hex, no pixel colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Contents
     1  Catalogue navigation   the pages of the catalogue, and a service's sections
     2  Services list          a table that becomes one card per service when narrow
     3  Service page           summary, form groups, danger zone
     4  Lists                  fields, documents, fee rules, types, categories
     5  Editors                the panel a form opens in, options, fieldsets
     6  Confirmation           the inline panel every removal passes through
     7  Preview and quote      the live form, and what the price list adds up to
   ========================================================================== */

/* ==========================================================================
   1 · NAVIGATION
   The sidebar has one entry for the whole catalogue; these are the pages inside it, and
   the sections of a service. They wrap rather than scroll: with six of them a strip that
   scrolls hides the current one after a reload, and nothing without a script of our own
   can bring it into view.
   ========================================================================== */

.cat-subnav,
.cat-tabs {
  flex-wrap: wrap;
  overflow: visible;
}

/* Three pages fit on one line of a phone if the pills are a little snugger; otherwise the third
   sits alone on a second line. */
@media (max-width: 30rem) {
  .cat-subnav .tabs__tab,
  .cat-tabs .tabs__tab {
    padding-inline: var(--space-3);
  }
}

/* ==========================================================================
   2 · SERVICES LIST
   Six columns while the list has room. When it has less than 58rem — the room the LIST has,
   not the screen: the sidebar takes a quarter of a laptop's width, so the screen is the wrong
   thing to ask — the table is re-flowed as one card per service: the cells stack, each
   carrying its column's name (data-label) in front, and the header row is kept for screen
   readers only. Reading order is the DOM order, so nothing moves for assistive technology; the
   explicit table roles in the markup keep the table semantics that `display: block` would
   otherwise take away. `.cat-flow` is what is measured (a container cannot restyle itself,
   so it is not the table's wrapper that carries the query).
   ========================================================================== */

.cat-flow {
  container: cat-flow / inline-size;
}

.cat-table td:first-child {
  min-inline-size: 13rem;
}

.cat-name {
  font-size: var(--font-size-md);
}

.cat-strong {
  display: block;
  font-weight: var(--font-weight-medium);
}

.cat-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.cat-code {
  padding-inline: var(--space-1);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  color: var(--color-text);
  font-size: var(--font-size-xs);
}

/* A line of small muted text that is a sentence, not a row of parts: `.cat-sub` is a flex row, which would
   put a gap on either side of anything set apart inside the sentence (a date, say). */
.cat-note {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.cat-subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

/* A figure and its word stay together: "3 documents" split over two lines reads as two things. */
.cat-figures li {
  white-space: nowrap;
}

.cat-figure {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.cat-figure__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* A switched-off service recedes; its chip still says so in words. */
.cat-row--off td {
  color: var(--color-text-muted);
}

/* Edit with its word, then switch and delete as icons: a table row is short, and three words
   stacked made every row three buttons tall. The words are still there — to a screen reader, in
   the title, and in the card below, where there is room for them. */
.cat-actions__group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.btn.cat-act--icon {
  inline-size: var(--control-height-sm);
  min-inline-size: var(--control-height-sm);
  padding-inline: 0;
}

.cat-act--icon .btn__text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Where a service is filed, under its name: the column that said so was the widest to spare.
   The icon stays beside the first line of the text however long the text is. */
.cat-filed {
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-block-start: var(--space-1);
}

.cat-filed > .icon {
  flex: 0 0 auto;
  margin-block-start: 0.125rem;
}

.cat-filed > span:last-child {
  min-inline-size: 0;
}

/* A row-level Delete is quiet: a solid red button on every row makes a list look like an
   alarm. The loud, solid one is the confirmation's, which is where the harm would be done. */
.btn.cat-btn-danger {
  color: var(--color-danger-fg);
  background: transparent;
  border-color: var(--color-danger-border);
}

.btn.cat-btn-danger:hover {
  background: var(--color-danger-soft);
}

.cat-review-row > td {
  padding: var(--space-3);
  white-space: normal;
}

.cat-review-row,
.cat-review-row:hover,
.table--zebra .cat-review-row:nth-child(even) {
  background: var(--color-surface);
}

@container cat-flow (max-width: 58rem) {
  .cat-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .cat-table,
  .cat-table tbody,
  .cat-table tr,
  .cat-table td {
    display: block;
  }

  /* Visually hidden, still announced: the cells carry their own labels below. */
  .cat-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .cat-table tbody tr {
    margin-block-end: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .cat-table.table--zebra tbody tr:nth-child(even) {
    background: var(--color-surface);
  }

  .cat-table td,
  .cat-table.table--zebra td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
    border: 0;
    white-space: normal;
  }

  .cat-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 8rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
  }

  /* The name leads the card; it needs no label of its own. */
  .cat-table td:first-child {
    display: block;
    padding-block-start: 0;
  }

  .cat-table td:first-child::before {
    content: none;
  }

  .cat-table .table__actions {
    inline-size: auto;
    padding-block-end: 0;
  }

  .cat-actions__group {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2);
  }

  /* Room for words again. */
  .btn.cat-act--icon {
    inline-size: auto;
    min-inline-size: 0;
    padding-inline: var(--space-3);
  }

  .cat-act--icon .btn__text {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }

  .cat-table .cat-review-row {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .cat-table .cat-review-row > td {
    display: block;
    padding: 0;
  }
}

/* ==========================================================================
   3 · SERVICE PAGE
   ========================================================================== */

.cat-summary__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-end: var(--space-3);
}

.cat-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.cat-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}

.cat-fact dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cat-fact dd {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.cat-fact__of {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.cat-choices {
  display: grid;
  gap: var(--space-1);
}

.cat-choices--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.cat-danger {
  border-color: var(--color-danger-border);
}

.cat-errors {
  margin: 0;
  padding-inline-start: var(--space-4);
  list-style: disc;
}

/* ==========================================================================
   4 · LISTS
   One pattern for fields, documents, fee rules, document types and categories: an item with
   what it is on one side and what can be done to it on the other, and room under it for the
   confirmation that a removal opens. An item that is switched off — or a rule that has ended —
   is muted, and says so in words.
   ========================================================================== */

.cat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'main actions'
    'review review';
  align-items: start;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* A list with an order — the form's fields, a service's documents — leads with the position. */
.cat-item:has(> .cat-order) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'order main actions'
    'review review review';
}

.cat-item--off {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.cat-item--off .cat-item__title {
  font-weight: var(--font-weight-regular);
}

.cat-order {
  grid-area: order;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-circle);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.cat-item__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.cat-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cat-item__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.cat-item__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.cat-item__review {
  grid-area: review;
}

.cat-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* The condition is what makes a field behave differently from its neighbours: it is set apart. */
.cat-term--condition {
  padding-inline: var(--space-2);
  background: var(--color-info-soft);
  border-radius: var(--radius-sm);
  color: var(--color-info-fg);
}

.cat-term--scope {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cat-amount {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 40rem) {
  .cat-item,
  .cat-item:has(> .cat-order) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'order main'
      'actions actions'
      'review review';
  }

  /* Items without a position: the main column takes the whole width. */
  .cat-item:not(:has(> .cat-order)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'main'
      'actions'
      'review';
  }

  .cat-item__actions {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   5 · EDITORS
   A form opens inside the card it belongs to, above the list, and only one is open at a time.
   Sunken and bordered, so it reads as a drawer of the card and not as another item of the list.
   ========================================================================== */

/* The Arabic and English versions of a field sit side by side: two equal columns, one on a phone. */
.cat-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 40rem) {
  .cat-pairs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cat-editor {
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cat-editor__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.cat-fieldset {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.cat-fieldset > legend {
  padding-inline: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* A fact shown but not editable: dashed, so it does not look like a field that failed to load. */
.cat-readonly {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height-md);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}

.cat-options {
  display: grid;
  gap: var(--space-3);
}

/* Value, Arabic label, English label and the button that removes the row: across on a wide
   screen, wrapping to as many lines as they need on a phone, where each input takes the full
   width. (A grid with an `auto` track after an auto-fitting repeat is not valid, so this is flex.) */
.cat-option {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px dashed var(--color-border);
}

.cat-option > .field {
  flex: 1 1 10rem;
  min-inline-size: 0;
}

.cat-option:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

/* The shared theme gives every small button horizontal padding, which an icon-only button has no
   room for: its glyph is squeezed to a dot. */
.btn.cat-option__remove {
  padding-inline: 0;
}

/* On a phone every input takes the line, and the button that removes the row gets a line of its own at
   the end: squeezed beside the last input it made that input narrower than the two above it. */
@media (max-width: 40rem) {
  .cat-option > .field {
    flex-basis: 100%;
  }

  .btn.cat-option__remove {
    margin-inline-start: auto;
  }
}

.cat-help {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.cat-help > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--tap-target-min);
  font-weight: var(--font-weight-medium);
  list-style: none;
  cursor: pointer;
}

.cat-help > summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a minus: direction-neutral, and still there with no script. */
.cat-help > summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.cat-help[open] > summary::after {
  content: '\2212';
}

.cat-help__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
  padding-block-end: var(--space-2);
  color: var(--color-text-muted);
}

/* ==========================================================================
   6 · CONFIRMATION
   The panel a removal must pass through. A danger edge: it destroys something, and the title
   says what in words.
   ========================================================================== */

.cat-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-danger-border);
  border-inline-start: 4px solid var(--color-danger);
  border-radius: var(--radius-md);
}

.cat-review__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.cat-review__text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   7 · PREVIEW AND QUOTE
   The form preview is dashed: a place to try the form, not the form itself. The quote is a
   plain table with its total set apart.
   ========================================================================== */

.cat-preview {
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.cat-preview__fields {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 40rem;
}

.cat-preview__group {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cat-preview-controls {
  align-items: start;
}

.cat-quote tfoot th,
.cat-quote tfoot td {
  background: var(--color-surface-sunken);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  border-block-start: 1px solid var(--color-border-strong);
}