/* ========================================================================
   My Models
   ======================================================================== */

.my-models { display: block; }

/* ----- Toolbar: segmented control + new model button ----- */
.mm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}
.mm-toolbar-right { display: flex; gap: 10px; }

/* ----- Segmented pill ----- */
.seg-pill {
  display: inline-flex;
  background: var(--brand-blue-50);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.seg-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-700);
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.seg-pill-item:hover { color: var(--ink-900); }
.seg-pill-item .seg-icon {
  width: 22px; height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: var(--ink-500);
  letter-spacing: -.02em;
}
.seg-pill-item.tint-red   .seg-icon { background: #b82a2a; }
.seg-pill-item.tint-green .seg-icon { background: #3f9c3f; }
.seg-pill-item.tint-blue  .seg-icon { background: #2f88b8; }
.seg-pill-item .seg-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  /* --ink-500: there is no 600 stop, so this declaration was dropped and the
     count inherited the item's colour - on an active tinted tab that painted the
     count red/green/blue over the constant grey fill. 500 is the stop below the
     item's own --ink-700 label, which is the subordinate reading a count badge
     wants, and it holds 4.72 on the composited fill. */
  color: var(--ink-500);
  min-width: 18px;
  text-align: center;
}
.seg-pill-item.is-active {
  background: #fff;
  color: var(--ink-900);
  box-shadow: 0 2px 8px rgba(28, 72, 108, .12), 0 0 0 1px var(--border-soft);
}
.seg-pill-item.is-active.tint-red   { color: #b82a2a; }
.seg-pill-item.is-active.tint-green { color: #2e7a2e; }
.seg-pill-item.is-active.tint-blue  { color: #1f6b92; }
[data-theme="dark"] .seg-pill { background: rgba(255,255,255,.04); }
[data-theme="dark"] .seg-pill-item.is-active { background: #1a3546; }

/* ----- View toggle (radio pair) ----- */
.mm-view-toggle {
  display: flex;
  gap: 8px;
  margin: 18px 0 14px;
  flex-wrap: wrap;
}
.vt-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  transition: all .15s;
}
.vt-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vt-opt .vt-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink-400);
  background: #fff;
  position: relative;
  transition: all .15s;
  flex: none;
}
.vt-opt.is-on .vt-dot { border-color: var(--brand-blue-500); }
.vt-opt.is-on .vt-dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--brand-blue-500);
}
.vt-opt.is-on {
  border-color: var(--brand-blue-400);
  background: var(--brand-blue-50);
  color: var(--ink-900);
}
.vt-opt:hover { border-color: var(--brand-blue-300); }
.vt-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  color: var(--ink-500);
  min-width: 20px;
  text-align: center;
}
.vt-opt.is-on .vt-count { background: rgba(47, 136, 184, .15); color: var(--brand-blue-700); }
[data-theme="dark"] .vt-opt { background: rgba(255,255,255,.03); }
[data-theme="dark"] .vt-opt.is-on { background: rgba(74, 159, 201, .15); }

/* ----- List / row table style (Single & Team participating) ----- */
.mm-list {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: #fff;
}
[data-theme="dark"] .mm-list { background: rgba(255,255,255,.02); }
.mm-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, .9fr) 160px 120px 150px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
.mm-row.team-part {
  grid-template-columns: minmax(160px, 1.2fr) 120px minmax(140px, 1fr) 160px 90px 150px;
}
.mm-row:last-child { border-bottom: none; }
.mm-row-head {
  background: linear-gradient(180deg, var(--brand-blue-100), var(--brand-blue-50));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-blue-700);
}
[data-theme="dark"] .mm-row-head {
  background: rgba(74, 159, 201, .1);
  color: var(--brand-blue-300);
}
.mm-row-body:hover { background: rgba(212, 236, 247, .25); }
[data-theme="dark"] .mm-row-body:hover { background: rgba(74, 159, 201, .07); }
.mm-row-title {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--brand-red-500);
  font-weight: 600;
  text-align: left;
  font-size: 14px;
}
.mm-row-title:hover { text-decoration: underline; }
.mm-row-date {
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
  font-size: 13px;
}
.mm-row-date .time {
  color: var(--ink-500);
  font-size: 12px;
  display: block;
}
.mm-row-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-row-actions { justify-self: end; }

/* Single-model row. Title + date + status sit in one block on the left, the
   criteria/alternatives names (shared with the public browse via _StructNames)
   take the middle, actions the right. Replaces the old five-column table whose
   "Size" column only ever held two count chips. */
.mm-prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.mm-prow:last-child { border-bottom: none; }
.mm-prow:hover { background: rgba(212, 236, 247, .25); }
[data-theme="dark"] .mm-prow:hover { background: rgba(74, 159, 201, .07); }
.mm-prow-main { min-width: 0; }
.mm-prow-title {
  color: var(--brand-red-500);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.mm-prow-title:hover { text-decoration: underline; }
.mm-prow-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.mm-prow-actions { justify-self: end; }

@media (max-width: 700px) {
  .mm-prow { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  /* site.css stacks the public row with grid-template-areas at this width and
     pins .pc-struct to a named "struct" area. This row borrows .pc-struct but
     declares no such area, so the reference resolves against implicit named
     lines and spawns phantom tracks that collapse the title column. Put the
     block back into normal flow. */
  .mm-prow .pc-struct { grid-area: auto; }
  .mm-prow-actions { justify-self: start; }
}
.mm-inline-alts { display: flex; gap: 4px; flex-wrap: wrap; }
.alt-chip {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  /* Themed, not #fff: the literal kept the chip white on a dark page while its
     --ink-700 text followed the theme, leaving light-grey on white at 1.44 - the
     category suggestion was effectively invisible in dark mode. */
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--ink-700);
  font-weight: 500;
}

.col-date { }
.col-flags { }
.col-actions { justify-self: end; }

/* ----- Flags (small status chips) ----- */
.mm-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: .02em;
}
.mm-flag svg { width: 12px; height: 12px; }
.mm-flag.tone-pos  { background: rgba(63, 156, 63, .12); color: #2e7a2e; border: 1px solid rgba(63,156,63,.3); }
.mm-flag.tone-neu  { background: var(--brand-blue-50);   color: var(--brand-blue-700); border: 1px solid var(--border-soft); }
.mm-flag.tone-warn { background: rgba(232, 152, 40, .12); color: #a0671e; border: 1px solid rgba(232,152,40,.3); }
[data-theme="dark"] .mm-flag.tone-pos { color: #7cc97c; background: rgba(124, 201, 124, .12); }
/* 400, not 300: the dark block redefines the 50..300 stops to dark navies, so
   --brand-blue-300 (#2e7699) on the tone's own --brand-blue-50 fill (#0f2836)
   measured 3.03 - under AA. 400 and up are not redefined, so they stay light and
   land at 6.56. */
[data-theme="dark"] .mm-flag.tone-neu { color: var(--brand-blue-400); }
[data-theme="dark"] .mm-flag.tone-warn { color: #e8a84a; }

/* ----- Row actions (open, edit, kebab) ----- */
.row-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.ra-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  /* --ink-500: no 600 stop, so these icons fell back to the inherited --ink-900
     and read as loud as the row title. 500 is the muted stop that keeps Edit and
     the kebab behind the blue .ra-primary eye, and at 5.52 on the card it clears
     the 3:1 an icon needs with room to spare. */
  color: var(--ink-500);
  transition: all .15s;
}
.ra-btn:hover { background: var(--brand-blue-50); color: var(--brand-blue-700); border-color: var(--border-soft); }
.ra-btn.ra-primary { color: var(--brand-blue-600); }
.ra-btn.ra-primary:hover { background: var(--brand-blue-100); color: var(--brand-blue-700); }
.ra-kebab.is-on { background: var(--brand-blue-100); color: var(--brand-blue-700); border-color: var(--border-soft); }

.ra-menu-wrap { position: relative; }
.ra-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(28,72,108,.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
[data-theme="dark"] .ra-menu { background: #1a3546; }
.ra-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-900);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.ra-menu button:hover { background: var(--brand-blue-50); }
[data-theme="dark"] .ra-menu button:hover { background: rgba(74,159,201,.15); }
.ra-menu button svg { width: 14px; height: 14px; }
.ra-menu .ra-danger { color: var(--brand-red-500); }
.ra-menu .ra-danger:hover { background: rgba(184,42,42,.08); }
.ra-menu-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }

/* ----- Card style (Team leading, Group) ----- */
.mm-cards { display: flex; flex-direction: column; gap: 14px; }
.mm-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.mm-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand-blue-500);
}
.mm-card.accent-green::before { background: #3f9c3f; }
.mm-card.accent-blue::before  { background: #2f88b8; }
.mm-card.accent-red::before   { background: #b82a2a; }
[data-theme="dark"] .mm-card { background: rgba(255,255,255,.02); }

.mm-card-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
}
.mm-card-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mm-card-title-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand-red-500);
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.mm-card-title-btn:hover { text-decoration: underline; }
.mm-card-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mm-meta-date { white-space: nowrap; }

.mm-card-body { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-soft); }
.mm-card-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mm-card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
  display: flex;
  justify-content: flex-end;
}
.mm-card-foot .btn-sm { padding: 6px 12px; font-size: 13px; }
.mm-col { min-width: 0; }
.mm-col-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-blue-700);
  margin-bottom: 6px;
}
.mm-col-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-900);
}
.mm-col-list li {
  position: relative;
  padding-left: 14px;
}
.mm-col-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--brand-blue-500);
  font-size: 10px;
}
.mm-col-list.people li { padding-left: 0; }
.mm-col-list.people li::before { content: none; }
.mm-col-list.people li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.avatar {
  width: 22px; height: 22px;
  background: var(--brand-blue-500);
  color: #fff;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  flex: none;
}
.people-at {
  margin-left: auto;
  color: var(--ink-500);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.mm-col-list .muted { color: var(--ink-500); font-style: italic; padding-left: 0; }
.mm-col-list .muted::before { content: none; }

/* ----- Group participating: candidate model picker ----- */
/* Team leading card: criterion row with status chip on the right */
.tc-status-li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tc-status { display: inline-flex; align-items: center; gap: 4px; }
.tc-status .mm-flag { font-size: 10px; }

.mm-submit {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft);
}
.mm-submit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mm-submit-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--brand-blue-50);
  border: 1px solid var(--border-soft);
}
.mm-submit-list li.is-picked {
  background: rgba(63,156,63,.08);
  border-color: rgba(63,156,63,.3);
}
[data-theme="dark"] .mm-submit-list li { background: rgba(74,159,201,.08); }
.mm-submit-check { position: relative; display: inline-grid; place-items: center; cursor: pointer; }
.mm-submit-check input { position: absolute; opacity: 0; }
.mm-submit-check .radio-dot {
  width: 18px; height: 18px;
  border: 2px solid var(--ink-400);
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.mm-submit-check input:checked + .radio-dot { border-color: #2e7a2e; }
.mm-submit-check input:checked + .radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #2e7a2e;
}
/* The picked state is rendered server-side on the row, not via a checked
   input - fill the dot for the picked row as well. */
.mm-submit-list li.is-picked .radio-dot { border-color: #2e7a2e; }
.mm-submit-list li.is-picked .radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #2e7a2e;
}
[data-theme="dark"] .mm-submit-list li.is-picked {
  background: rgba(63,156,63,.14);
  border-color: rgba(63,156,63,.4);
}
.mm-submit-title {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand-red-500);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.mm-submit-title:hover { text-decoration: underline; }
.mm-submit-date {
  color: var(--ink-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mm-submit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ----- Empty state ----- */
.mm-empty {
  text-align: center;
  padding: 48px 32px;
  background: #fff;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
[data-theme="dark"] .mm-empty { background: rgba(255,255,255,.02); }
.mm-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--brand-blue-100);
  color: var(--brand-blue-600);
  display: grid;
  place-items: center;
}
.mm-empty-icon svg { width: 28px; height: 28px; }
.mm-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.mm-empty-body {
  color: var(--ink-500);
  margin-bottom: 18px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .mm-card-cols { grid-template-columns: 1fr; gap: 10px; }
  .mm-row, .mm-row.team-part {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 16px;
  }
  .mm-row-head { display: none; }
  .mm-row-body { position: relative; }
  .mm-row-actions { position: absolute; top: 10px; right: 10px; }
  .mm-card-head { grid-template-columns: 1fr auto; }
  .mm-card-meta { grid-column: 1 / -1; }
  .mm-submit-list li { grid-template-columns: 32px 1fr; gap: 6px; }
  .mm-submit-list li > :nth-child(n+3) { grid-column: 2 / -1; }
  .seg-pill { width: 100%; overflow-x: auto; }
}


/* ----- Row-actions dropdown visibility (Razor uses class toggle, not React conditional render) ----- */
.ra-menu { display: none; }
.ra-menu.is-open { display: flex; flex-direction: column; }