/* ==========================================================================
   Terapi Afasia - Papan keluarga (M7)

   The read-only dashboard family open on a phone. Same tokens as the tablet
   app, so the colours match, but its own layout: one narrow column, generous
   type, no controls that write anything.

   Activity and accuracy only, per 6.6. Nothing here predicts, and no panel
   compares him to anyone but his own earlier self.
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--c-bg);
}

.kwrap {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-4);
}

.klogin {
  max-width: 400px;
  margin: 0 auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.khead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
}

.kcard {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}

.kcard h2 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-instruction);
}

.kcaption {
  color: var(--c-ink-2);
  font-size: var(--t-body);
  margin: 0;
}

.kband {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
}

.kbar {
  height: var(--s-4);
  background: var(--c-primary);
  border-radius: var(--r-2);
}

.kbar--dim { background: var(--c-line); }

.krow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-line);
}

.krow:last-child { border-bottom: none; }

.field {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--s-3);
  font-size: var(--t-body);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 2px solid var(--c-line-2);
  border-radius: var(--r-3);
}

.field:focus { border-color: var(--c-primary); outline: none; }

.btn {
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-body);
  font-family: inherit;
  border-radius: var(--r-3);
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--c-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line-2);
}

.knotice {
  background: var(--c-primary-soft);
  color: var(--c-ink);
  padding: var(--s-3);
  border-radius: var(--r-3);
  font-size: var(--t-body);
}

.knotice--warn {
  background: #FDF1E7;
  color: var(--c-ink);
}

.kbars {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  height: 96px;
  padding: var(--s-2) 0;
}

.kbars > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}

.kbars .bar {
  width: 100%;
  max-width: 40px;
  background: var(--c-primary);
  border-radius: var(--r-2) var(--r-2) 0 0;
}

.kbars .bar--met { background: var(--c-benar); }

.kbars .tick { font-size: var(--t-caption); color: var(--c-ink-2); }

audio { width: 100%; }