/* The control room's own pages; forms, tables, sentences and pills come from /ui.css. */

.causes {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.table tr.causes-row td {
  padding-top: 0;
  height: auto;
  white-space: normal;
}

.form .field-row select,
.form .field-row input {
  width: 100%;
}

.table td.wrap {
  white-space: normal;
}

/* the page-sentence's own margin is for panels; inside a form the form's padding is enough */
.form .page-sentence { margin: 0; }
.field-row { align-items: flex-start; }

.state-under { display: none; }

/* a phone: no Kind column, the state under the name, so nothing scrolls sideways */
@media (max-width: 48rem) {
  .table th.kind, .table td.kind, .table th.state, .table td.state { display: none; }
  .state-under { display: block; margin-top: 4px; }
  .table td.name { white-space: normal; }
  .table tr.causes-row td[colspan] { padding-left: 16px; }
  .table .num { white-space: nowrap; }
  .table th, .table td { padding-left: 8px; padding-right: 8px; }
  .table th:first-child, .table td:first-child { padding-left: 16px; }
}

/* the inputs behind a figure, opened under its row */
.table .open { text-align: right; width: 1%; }
.table tr.inputs-row > td { padding-top: 4px; padding-bottom: 14px; white-space: normal; }
.table.inputs { margin-bottom: 8px; }
.inputs-row .worker-link { font-size: var(--text-sm); }

@media (max-width: 48rem) {
  .table th.open, .table td.open { display: none; }
  .state-under .btn { margin-left: 6px; padding: 2px 10px; min-height: 0; }
  /* the inputs stack as a list: each on its own lines */
  .table.inputs thead { display: none; }
  .table.inputs, .table.inputs tbody, .table.inputs tr, .table.inputs td { display: block; width: 100%; }
  .table.inputs tr { padding: 6px 0; }
  .table.inputs td { padding: 0; height: auto; white-space: normal; border: 0; }
  .table.inputs td.what { font-weight: 600; }
  .table.inputs td.from, .table.inputs td.age { color: var(--text-muted); font-size: var(--text-sm); }
  .table.inputs td.age::before { content: "Age: "; }
  /* the changes on record stack the same way: when and by under the change */
  .table.changes thead { display: none; }
  .table.changes, .table.changes tbody, .table.changes tr, .table.changes td { display: block; width: 100%; }
  .table.changes tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .table.changes td { padding: 0 16px; height: auto; white-space: normal; border: 0; }
  .table.changes td:first-child, .table.changes td:last-child { color: var(--text-muted); font-size: var(--text-sm); }
  .table.changes td:last-child::before { content: "By "; }
  .table.changes td { overflow-wrap: anywhere; }
}

/* the news alerts page: headlines wrap, with the outlet and date under them */
.table.news td.headline, .table.news td.concern, .table.news td.name { white-space: normal; }
.table.news td.headline { min-width: 16rem; }
.table.news .muted-line { display: block; color: var(--text-muted); font-size: var(--text-sm); }
.table.news tr.alert-row { cursor: pointer; }
.table.news .evidence { margin: 0 0 8px; }
.table.news td.report { white-space: nowrap; font-size: var(--text-sm); }

@media (max-width: 48rem) {
  .table.news th.raised, .table.news td.raised { display: none; }
  .table.news td.headline { min-width: 0; }
  .table.news td, .table.news td.report, .table.watch td { white-space: normal; }
}
.table.news .open-btn { display: block; margin-top: 4px; padding: 2px 10px; min-height: 0; }
.table.news tr.inputs-row > td, .table.news .inputs td { white-space: normal; overflow-wrap: anywhere; }
.table.news td { white-space: normal; }
#aside-details > summary { padding: 8px 16px; }
#names-person { padding: 0 16px 12px; margin: 8px 0 0; }
@media (max-width: 48rem) {
  .table.news td { overflow-wrap: anywhere; }
  .table.news th, .table.news td { padding-left: 8px; padding-right: 8px; }
}