/* ==========================================================================
   CITIZENS — the customer file
   --------------------------------------------------------------------------
   Prefix .cit-. Tokens and logical properties only: no hex colours, no
   left/right, so both themes, the high-contrast fallback and right-to-left
   come for free. Loaded after apple.css (see docs/CUSTOMER-FILE.md).

   Contents
     1  The page sections switcher
     2  Names: the English name beside the Arabic one
     3  The national-ID lookup banner
     4  The timeline: filter, entries, "show more"
   ========================================================================== */

/* ==========================================================================
   1 · SECTIONS — File | Timeline
   ========================================================================== */

.cit-tabs {
  max-inline-size: 100%;
}

/* ==========================================================================
   2 · NAMES
   An English name is Latin script inside an Arabic page: set apart so its
   punctuation and spacing do not borrow the direction of what is around it.
   ========================================================================== */

.cit-name-en {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

[dir='rtl'] .cit-name-en {
  /* A left-to-right line inside a right-to-left cell still starts at the reading edge. */
  text-align: end;
}

.cit-ident {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

/* A value that must read left to right (a mobile number, an e-mail, a Latin name) sits in a right-to-left
   page in its own left-to-right box, and the box's own start edge is the left one: so it would be set against
   the wrong edge, away from its label. In an Arabic page it is set against the reading edge instead. */
[dir='rtl'] .cit-ltr {
  text-align: end;
}

/* The four parts of a name, in a row when there is room for them (the form grid is three across). */
@media (min-width: 900px) {
  .cit-name-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   3 · THE ID LOOKUP
   One card for both answers — found, or not found — in the citizens list and in
   the new-application screen. It is a plain card first (legible with this file or
   without it); the tint is the only thing this adds, laid over the card's own
   opaque surface so the content stays opaque.
   ========================================================================== */

.cit-lookup {
  --cit-fg: var(--color-neutral-fg);
  --cit-soft: var(--color-neutral-soft);
  --cit-border: var(--color-neutral-border);

  background-image: linear-gradient(var(--cit-soft), var(--cit-soft));
  border-color: var(--cit-border);
}

.cit-lookup--found {
  --cit-fg: var(--color-success-fg);
  --cit-soft: var(--color-success-soft);
  --cit-border: var(--color-success-border);
}

.cit-lookup--missing {
  --cit-fg: var(--color-info-fg);
  --cit-soft: var(--color-info-soft);
  --cit-border: var(--color-info-border);
}

.cit-lookup__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cit-lookup__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cit-lookup__icon {
  flex: 0 0 auto;
  color: var(--cit-fg);
}

.cit-lookup__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--cit-fg);
}

.cit-lookup__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.cit-lookup__name {
  font-weight: var(--font-weight-semibold);
}

.cit-lookup__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

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

/* ==========================================================================
   4 · THE TIMELINE
   ========================================================================== */

.cit-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The chosen kind: a filled chip, and aria-pressed says it to everyone else. */
.cit-filter__chip[aria-pressed='true'] {
  color: var(--color-link);
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
}

/* While another kind is being fetched the old list stays, quietly, instead of jumping. */
.cit-pages--busy {
  opacity: 0.55;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.cit-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cit-entry {
  /* Each tone sets these three; the marker and the badge-less entry read them. */
  --cit-fg: var(--color-neutral-fg);
  --cit-soft: var(--color-neutral-soft);
  --cit-border: var(--color-neutral-border);

  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-block-end: var(--space-5);
}

.cit-entry--success { --cit-fg: var(--color-success-fg); --cit-soft: var(--color-success-soft); --cit-border: var(--color-success-border); }
.cit-entry--warning { --cit-fg: var(--color-warning-fg); --cit-soft: var(--color-warning-soft); --cit-border: var(--color-warning-border); }
.cit-entry--danger  { --cit-fg: var(--color-danger-fg);  --cit-soft: var(--color-danger-soft);  --cit-border: var(--color-danger-border); }
.cit-entry--info    { --cit-fg: var(--color-info-fg);    --cit-soft: var(--color-info-soft);    --cit-border: var(--color-info-border); }

.cit-entry:last-child {
  padding-block-end: 0;
}

/* The line that joins each entry to the next. It carries on through the last entry of a page
   that has another page beneath it, so the list reads as one. */
.cit-entry::before {
  content: '';
  position: absolute;
  inset-block: 2rem 0;
  inset-inline-start: calc(1rem - 1px);
  border-inline-start: 2px solid var(--color-border);
}

.cit-entry:last-child::before {
  display: none;
}

.cit-timeline--continues .cit-entry:last-child {
  padding-block-end: var(--space-5);
}

.cit-timeline--continues .cit-entry:last-child::before {
  display: block;
}

.cit-entry__marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--cit-fg);
  background: var(--cit-soft);
  border: 1px solid var(--cit-border);
  border-radius: var(--radius-circle);
}

.cit-entry__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  padding-block-start: 0.2rem;
}

.cit-entry__text {
  margin: 0;
  overflow-wrap: anywhere;
}

.cit-entry__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}

/* A note, a reason, the fields that changed: what the sentence is about, set off from it. */
.cit-entry__detail {
  margin: 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--cit-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.cit-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cit-entry__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--tap-target-min);
  color: var(--color-link);
}

/* On a pointer a link in a line of text need not be 44 tall; on touch it must. */
@media (pointer: fine) {
  .cit-entry__link {
    min-block-size: 0;
  }
}

.cit-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
}

/* ==========================================================================
   Small screens: the list is already one column; only the spacing tightens.
   ========================================================================== */

@media (max-width: 599px) {
  .cit-entry {
    gap: var(--space-2);
    padding-block-end: var(--space-4);
  }
}

@media (forced-colors: active) {
  .cit-entry__marker {
    border: 1px solid CanvasText;
  }

  .cit-filter__chip[aria-pressed='true'] {
    outline: 2px solid Highlight;
  }
}