/* Control surfaces (modernAIseL, 2026-10-13): Settings, Data, Deliver and
 * Continuous improvement places — views/cs-common.js and the views that use it.
 * Tokens only (app.css maps them for light and dark). */

/* Cards: one record each — title, state chips, a terse meta line, actions. */
.mai-cs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.mai-cs-card {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  background: var(--mai-surface); border: 1px solid var(--mai-line); border-radius: var(--mai-radius-lg);
  padding: var(--space-4); box-shadow: var(--mai-shadow);
  transition: border-color var(--mai-t), box-shadow var(--mai-t), transform var(--mai-t);
}
.mai-cs-card.is-action { cursor: pointer; }
.mai-cs-card.is-action:hover { border-color: var(--mai-line-2); box-shadow: var(--mai-shadow-lg); }
.mai-cs-card.is-action:focus-visible { outline: none; box-shadow: var(--mai-focus); }
.mai-cs-card.is-muted { background: var(--mai-surface-2); box-shadow: none; }
.mai-cs-card.is-good { border-left: 3px solid var(--mai-good); }
.mai-cs-card.is-warn { border-left: 3px solid var(--mai-warn); }
.mai-cs-card.is-crit { border-left: 3px solid var(--mai-crit); }
.mai-cs-card.is-info { border-left: 3px solid var(--mai-info); }
.mai-cs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.mai-cs-card-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--mai-ink); overflow-wrap: anywhere; }
.mai-cs-card-eyebrow { font-family: var(--mai-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mai-ink-3); }
.mai-cs-card-big { font-family: var(--mai-mono); font-size: var(--fs-xl, 24px); font-weight: 600; color: var(--mai-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.mai-cs-card-meta { font-size: var(--fs-xs); color: var(--mai-ink-2); display: flex; flex-wrap: wrap; gap: 2px var(--space-2); }
.mai-cs-card-meta > span + span::before { content: "·"; margin-right: var(--space-2); color: var(--mai-ink-3); }
.mai-cs-card-body { font-size: var(--fs-sm); color: var(--mai-ink-2); overflow-wrap: anywhere; }
.mai-cs-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mai-cs-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }

/* A strip of label + value facts inside a panel. */
.mai-cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.mai-cs-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mai-cs-fact dt { font-family: var(--mai-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mai-ink-3); }
.mai-cs-fact dd { margin: 0; font-size: var(--fs-sm); color: var(--mai-ink); overflow-wrap: anywhere; }

/* A vertical thread (goal thread, re-check history). */
.mai-cs-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mai-cs-thread-item { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); padding-bottom: var(--space-4); }
.mai-cs-thread-item::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 1px; background: var(--mai-line); }
.mai-cs-thread-item:last-child::before { display: none; }
.mai-cs-thread-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--mai-surface-2); border: 1px solid var(--mai-line-2); color: var(--mai-ink-3); }
.mai-cs-thread-item.is-good .mai-cs-thread-dot { background: var(--mai-good-soft); border-color: var(--mai-good); color: var(--mai-good-ink); }
.mai-cs-thread-item.is-warn .mai-cs-thread-dot { background: var(--mai-warn-soft); border-color: var(--mai-warn); color: var(--mai-warn-ink); }
.mai-cs-thread-item.is-crit .mai-cs-thread-dot { background: var(--mai-crit-soft); border-color: var(--mai-crit); color: var(--mai-crit-ink); }
.mai-cs-thread-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mai-cs-thread-title { font-size: var(--fs-sm); font-weight: 600; color: var(--mai-ink); }
.mai-cs-thread-meta { font-size: var(--fs-xs); color: var(--mai-ink-2); }

/* Toolbar over a list: filters left, primary action right. */
.mai-cs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mai-cs-toolbar > .mai-cs-grow { flex: 1; }
.mai-cs-toolbar .mai-select, .mai-cs-toolbar .mai-input { width: auto; min-width: 160px; min-height: 40px; }

/* Bars: one share per row (catalogue fields, pillar scores). */
.mai-cs-bar { display: grid; grid-template-columns: minmax(96px, 30%) 1fr auto; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.mai-cs-bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--mai-surface-2); overflow: hidden; }
.mai-cs-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--mai-accent); }
.mai-cs-bar-fill.is-good { background: var(--mai-good); }
.mai-cs-bar-fill.is-warn { background: var(--mai-warn); }
.mai-cs-bar-fill.is-crit { background: var(--mai-crit); }
.mai-cs-bar-val { font-family: var(--mai-mono); font-size: var(--fs-xs); color: var(--mai-ink-2); font-variant-numeric: tabular-nums; }
.mai-cs-bars { display: grid; gap: var(--space-2); }

/* Settings: a two-column setting row — label left, value + control right. */
.mai-cs-rows { display: grid; gap: 0; }
.mai-cs-row { display: grid; grid-template-columns: minmax(160px, 34%) 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--mai-line); }
.mai-cs-row:first-child { border-top: 0; }
.mai-cs-row-label { font-size: var(--fs-sm); color: var(--mai-ink-2); }
.mai-cs-row-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--mai-ink); min-width: 0; overflow-wrap: anywhere; }
.mai-cs-mono { font-family: var(--mai-mono); font-size: var(--fs-xs); }
.mai-cs-swatch { width: 20px; height: 20px; border-radius: var(--radius-sm); border: 1px solid var(--mai-line-2); flex: none; }

/* The one irreversible action on a page (erase). */
.mai-cs-danger { border: 1px solid var(--mai-crit); background: var(--mai-crit-soft); border-radius: var(--mai-radius); padding: var(--space-3) var(--space-4); }

@media (max-width: 719px) {
  .mai-cs-cards { grid-template-columns: 1fr; }
  .mai-cs-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .mai-cs-toolbar .mai-select, .mai-cs-toolbar .mai-input { flex: 1 1 100%; }
  .mai-cs-bar { grid-template-columns: 1fr auto; }
  .mai-cs-bar-track { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .mai-cs-card { transition: none; } }
/* Many tabs (Settings has 13): one scrolling row on a phone, never four wrapped rows. */
@media (max-width: 719px) {
  .mai-sections.mai-cs-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mai-sections.mai-cs-tabs::-webkit-scrollbar { display: none; }
  .mai-sections.mai-cs-tabs > .mai-section { flex: none; }
}
.mai-cs-head { min-width: 0; max-width: 100%; }
.mai-sections.mai-cs-tabs { max-width: 100%; min-width: 0; }