/* The People section, on the owner's own tab.
 *
 * **SHORT ON PURPOSE, AND THAT IS THE TEST THIS FILE HAS TO PASS.** Everything
 * generic here already has a home: the buttons come from `button.css` (D142),
 * the table from `table.css`, the form from `form.css`. What is left is the one
 * thing no other screen has -- a list of tabs with tick boxes beside them.
 *
 * If this file ever grows a button, a height or a font size, that is the drift
 * D142 was built to stop and it belongs in the shared file instead.
 */

.k-people {
  margin: 32px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
}

.k-people__title {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
}

.k-people__intro {
  margin: 0 0 8px;
  max-width: 70ch;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* **THE ONE SENTENCE ON THIS SCREEN THAT IS A WARNING**, and it is drawn as
 * one. An owner who reads this as ordinary explanation may believe hiding a tab
 * locks the books, which is wrong in the expensive direction. */
.k-people__caveat {
  margin: 0 0 16px;
  max-width: 70ch;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-raised);
  border-left: 3px solid var(--warning, var(--border-strong));
  border-radius: var(--radius);
}

.k-people__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.k-people__form:not(:empty),
.k-people__role {
  margin: 0 0 16px;
}

.k-people__extras-title,
.k-people__role-title {
  margin: 16px 0 4px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
}

.k-people__extras-note,
.k-people__role-note {
  margin: 0 0 10px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* **THE TABS, IN COLUMNS THAT FIT WHATEVER THE SCREEN IS.** Eighteen of them
 * down one side is a lot of scrolling on a desk; three across is unreadable on
 * a phone. The browser decides how many fit rather than a breakpoint guessing. */
.k-people__ticks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
  margin: 0 0 12px;
}

.k-people__tick-line {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The whole line is the target, not the 13px box. */
  min-height: 32px;
  padding: 0 6px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
}

.k-people__tick-line:hover {
  background: var(--surface-raised);
}

/* A tab that comes from the role cannot be unticked here, and looks it. */
.k-people__tick:disabled {
  cursor: default;
}

.k-people__tick:disabled + .k-people__tick-label {
  color: var(--text-muted);
}

.k-people__tick-label {
  flex: 1 1 auto;
  min-width: 0;
}

.k-people__tick-note,
.k-people__tick-money {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-muted);
}

/* **MONEY IS MARKED.** His whole rule turns on which tabs are the books, and an
 * owner ticking down a list of eighteen words should not have to remember. */
.k-people__tick-money {
  padding: 1px 6px;
  color: var(--brand);
  background: var(--surface-raised);
  border-radius: var(--radius);
}

/* ---------------------------------- businesses shared with you (D146)

 * The other half of the same idea, and it borrows the People section's shape
 * rather than inventing one -- two lists on one tab that looked different would
 * read as two unrelated features. Only what differs is written. */

.k-shared {
  margin: 32px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
}

.k-shared__title {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
}

.k-shared__intro {
  margin: 0 0 8px;
  max-width: 70ch;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* **THE SENTENCE THAT STOPS SOMEBODY MISREADING WHAT ADDING ONE DOES.** Adding
 * a business here is half of it; the other half happens in their Kartaan. Drawn
 * as a warning, like the People section's, because believing otherwise means
 * waiting for access that is never coming. */
.k-shared__caveat {
  margin: 0 0 16px;
  max-width: 70ch;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-raised);
  border-left: 3px solid var(--warning, var(--border-strong));
  border-radius: var(--radius);
}

.k-shared__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.k-shared__form:not(:empty) {
  margin: 0 0 16px;
}