/* ============================================================
   klien/klien.css — Halaman Klien.

   What this surface answers (../PLAN-V2.md): "apa yang dilihat building
   manager tentang gedungnya sendiri." Chrome (top bar, nav, page head,
   footer, .card/.pill) lives in ../app/shell.css and ../style.css — this
   file holds only what is specific to this one page: the site picker, the
   banner, the two shift blocks (calm rows + exception cards), and the
   contract panel.

   THIS SURFACE IS DIFFERENT IN KIND FROM THE OTHER SIX. It belongs to the
   agency's customer, not the agency. Three things that follow, and bind
   the CSS too, not only the markup in index.html:
     - Read-only. Nothing in this file styles a control that writes
       anything — no confirm button, no paste box, no manual-entry form.
       The one <select> here only changes which building's rows the script
       filters to; see index.html's own comment on `mySiteRows`.
     - No Rupiah anywhere. "What this client is billed may appear" per the
       brief, but the etalase-wide rule (../../CLAUDE.md rule 3, "no price
       anywhere in a resident") and this surface's own gate ("no price of
       OUR services anywhere") both bind harder than that allowance, so the
       billing panel states the SLA as prose — "pos kosong tidak ditagih" —
       and never as a figure. No .kln-* class below formats currency.
     - Every colour / space / radius / font is a var(--token). No hex.
       Ember (--sev-kosong via .pill--kosong, reused unchanged from
       style.css) means an unfilled post in THIS client's own building and
       nothing else on the page. --sev-tunggu is the one step below it.
       Nothing else here is warm. No coloured left rules, no state dots,
       no gradients, no icon sets, no avatars.
   ============================================================ */

.kln-wrap {
  max-width: var(--container);
  margin-inline: auto;
}

.kln-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

/* ---- the one control on the page: which building ---- */

.kln-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 320px;
  margin-bottom: var(--space-4);
}

.kln-picker__label {
  font-size: 12px;
  color: var(--muted);
}

.kln-picker__select {
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
}

.kln-picker__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- banner: the only warm thing above the fold, and only when true ---- */

.kln-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  min-height: 28px;
}

.kln-banner__ok {
  font-size: var(--text-small);
  color: var(--muted);
}

/* ---- section blocks: "Sekarang", "Berikutnya", "Kontrak & jaminan" ---- */

.kln-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 960px) {
  .kln-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }
  /* Kontrak & jaminan reads as the summary underneath both shift blocks,
     not a third column squeezed beside them. */
  .kln-sections > :nth-child(3) { grid-column: 1 / -1; }
}

.kln-block__h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  color: var(--ink);
  margin-bottom: 2px;
}

.kln-block__sub {
  font-size: var(--text-small);
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.kln-empty {
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--text-small);
  color: var(--faint);
}

/* ---- calm rows: who is on post, plain ink, never green ---- */

.kln-list {
  padding-inline: var(--space-4);
}

.kln-row {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.kln-row:last-child { border-bottom: none; }

.kln-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.kln-row__post {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink);
}

.kln-row__who {
  margin-top: 2px;
  font-size: var(--text-small);
  color: var(--ink-2);
}

.kln-row__meta {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--muted);
}

.kln-row__note {
  color: var(--sev-tunggu-text);
}

/* ---- exception cards: Kosong and Menunggu, the two warm steps ---- */

.kln-exceptions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.kln-exception {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  padding: var(--space-3) var(--space-4);
}

/* No coloured left rule: the tinted ground and the named state already say
   it twice. A third encoding (a rule, a dot) is the one thing every gate on
   this shelf forbids. */
.kln-exception--kosong { background: var(--sev-kosong-soft); }
.kln-exception--tunggu { background: var(--sev-tunggu-soft); }

/* On a tinted card the pill's own fill is the same colour as the card, so
   the chip becomes an invisible box. Plain label in its severity colour. */
.kln-exception .pill { background: none; padding-inline: 0; }

.kln-exception__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.kln-exception__post {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}

.kln-exception__line {
  margin-top: var(--space-1);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

.kln-exception__since {
  color: var(--muted);
}

.kln-exception__quote {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---- kontrak & jaminan: prose only, never a Rupiah figure ---- */

.kln-contract {
  padding: var(--space-4);
}

.kln-contract__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-1);
  font-size: var(--text-small);
}

.kln-contract__label {
  color: var(--muted);
}

.kln-contract__sla {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-small);
  color: var(--ink-2);
  max-width: var(--measure-lead);
}

/* The demo-only note beside the building selector. Quieter than its label,
   because it is a caveat, not a feature. */
.kln-picker__why {
  display: block;
  font-weight: 400;
  color: var(--faint);
}