/* Model pages (/<model>, /models). Builds on styles.css tokens and parts. */

.mp { --accent: var(--g-hi); --accent-2: var(--g); --accent-rgb: 42, 255, 198; }
.mp.is-leak { --accent: var(--amber); --accent-2: #e0a92a; --accent-rgb: 244, 199, 69; }

.mp-nav a[aria-current="page"] { color: var(--text); background: rgba(78, 236, 170, .08); }
.mp-main { max-width: 1200px; }
.mp .ext { color: var(--dim); font-weight: 400; }
.mp code { font: 500 .92em var(--mono); color: var(--g-soft); background: rgba(78, 236, 170, .07); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; font: 500 12px var(--mono); color: var(--dim); animation: rise .6s var(--ease) both; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--g-soft); }
.crumbs [aria-current] { color: var(--text); overflow-wrap: anywhere; }

/* ---------- hero ---------- */
.mp-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center;
  padding: clamp(18px, 4vh, 40px) 0 clamp(18px, 3vh, 28px);
}
.mp-copy { min-width: 0; animation: rise .7s .05s var(--ease) both; }
.mp .kicker { color: var(--accent-2); }
.mp.is-leak .live-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.mp.is-leak .live-dot::after { border-color: var(--amber); }
.kicker .rel { color: var(--muted); letter-spacing: .08em; }

.mp-name { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); margin: 4px 0 12px; min-width: 0; }
.mp-name h1 {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font-size: clamp(34px, 6.2vw, 78px); line-height: .98; letter-spacing: -.05em;
  background: linear-gradient(100deg, #f2fff8 10%, rgb(var(--accent-rgb)) 70%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(var(--accent-rgb), .18);
}
.mp-logo {
  flex: none; width: clamp(48px, 6vw, 68px); height: auto; aspect-ratio: 1; border-radius: 50%; background: #000; padding: 9px; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 5px rgba(var(--accent-rgb), .08), 0 0 34px rgba(var(--accent-rgb), .3);
}
.mono-logo { display: grid; place-items: center; font: 600 15px var(--mono); color: var(--accent); background: radial-gradient(circle at 35% 30%, #0b3a24, #020906 70%); }
.ev-logo.mono-logo { font-size: 11px; padding: 0; }
.mp-by { margin: 0; color: var(--muted); font-size: 16px; }
.mp-by b { color: var(--text); font-weight: 600; }
.mp-by .dot { margin: 0 6px; color: var(--dim); }
.mp-src { color: var(--g-soft); text-decoration: none; }
.mp-src:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 20px; }

.mp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-actions .solid-btn, .ghost-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
  text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer;
}
.mp-actions .solid-btn { color: #01140b; }
.mp-actions .solid-btn svg, .ghost-btn svg { width: 15px; height: 15px; flex: none; }
.mp-actions .solid-btn svg { fill: currentColor; }
.ghost-btn { border: 1px solid var(--line-2); background: rgba(4, 18, 12, .6); color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.ghost-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ghost-btn:hover { color: var(--text); border-color: rgba(78, 236, 170, .5); background: rgba(78, 236, 170, .06); }

.mp-scope { margin: 0; display: grid; justify-items: center; gap: 12px; animation: rise .8s .15s var(--ease) both; }
.mp-radar { position: relative; width: clamp(200px, 23vw, 290px); aspect-ratio: 1; border-radius: 50%; }
.mp-radar::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .16), transparent 65%); z-index: -1; }
.mp-radar canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.mp-hud { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 300px; }
.mp-hud span { font: 500 11px var(--mono); color: var(--muted); padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(2, 9, 6, .7); white-space: nowrap; }
.mp-hud i { font-style: normal; color: var(--dim); margin-right: 3px; }
.mp-hud b { color: var(--accent); font-weight: 600; }

/* ---------- facts ---------- */
.mp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; animation: rise .7s .2s var(--ease) both; }
.mp-facts > div { min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.mp-facts[data-count="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-facts > div.wide { grid-column: span 2; }
.mp-facts dt { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mp-facts dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.mp-facts dd a { color: var(--text); text-decoration: none; }
.mp-facts dd a:hover { color: var(--g-soft); }
.mp-facts dd small { display: block; margin-top: 3px; font: 400 12.5px var(--mono); color: var(--dim); }
.mp-facts dd small code { font-size: 11.5px; margin-right: 4px; }
.mp-facts dd.ok { color: var(--g-soft); }
.mp-facts dd.warn { color: var(--amber); }

/* ---------- columns ---------- */
.mp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.mp-stack { display: grid; gap: 14px; min-width: 0; }
.mp-side { position: sticky; top: calc(76px + env(safe-area-inset-top)); display: grid; gap: 14px; }
.mp .card { animation: rise .7s .25s var(--ease) both; }
.mp .card-head { margin-bottom: 4px; }
.mp-tag { font: 500 11.5px var(--mono); color: var(--dim); text-decoration: none; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
a.mp-tag:hover { color: var(--g-soft); }

/* X post */
.mp-post { padding: 18px 20px; border-color: rgba(var(--accent-rgb), .22); background: linear-gradient(160deg, rgba(var(--accent-rgb), .07), var(--panel) 50%); }
.post-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.post-head img { width: 40px; height: 40px; border-radius: 50%; }
.post-head b { display: block; font-size: 15px; }
.post-head small { display: block; color: var(--dim); font-size: 13px; }
.post-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); transition: color .2s, background .2s; }
.post-x:hover { color: var(--text); background: rgba(78, 236, 170, .08); }
.post-x svg { width: 16px; height: 16px; fill: currentColor; }
.post-text { margin: 14px 0 0; font-size: 17px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.post-link { margin: 10px 0 0; font: 500 13px var(--mono); }
.post-link a { color: var(--g-soft); text-decoration: none; }

/* evidence */
.mp-diff {
  margin: 12px 0 0; max-height: 320px; overflow: auto; padding: 12px 14px; border-radius: 12px;
  background: #010604; border: 1px solid var(--line); font: 400 12.5px/1.65 var(--mono); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
}
.mp-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 14px 0 0; align-items: baseline; }
.mp-details > div { display: contents; }
.mp-details dt { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mp-details dd { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 14px; }
.mp-details .chip { font-size: 12px; padding: 2px 8px; color: var(--g-soft); }

/* timeline */
.tl { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; }
.tl-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 10px; top: 18px; bottom: -2px; width: 1px; background: linear-gradient(var(--line-2), var(--line)); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 11px; height: 11px; margin: 6px 0 0 5px; border-radius: 50%; background: var(--g-hi); box-shadow: 0 0 0 4px rgba(42, 255, 198, .1), 0 0 12px rgba(42, 255, 198, .6); }
.tl-item.leak .tl-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(244, 199, 69, .1), 0 0 12px rgba(244, 199, 69, .6); }
.tl-body { min-width: 0; }
.tl-body p { margin: 0; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 12.5px var(--mono); color: var(--muted); }
.tl-src { margin-top: 4px !important; font-size: 14px; color: var(--muted); }
.tl-src a { color: var(--text); text-decoration: none; }
.tl-src a:hover { color: var(--g-soft); }
.tl-text { margin-top: 2px !important; font-size: 14px; color: var(--dim); overflow-wrap: anywhere; }
.tl-post { display: inline-block; margin-top: 4px; font: 500 12px var(--mono); color: var(--g); text-decoration: none; }
.tl-post:hover { color: var(--g-soft); }

/* side */
.mp-alerts h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.mp-alerts .card-sub { display: block; }
.mp-push { width: 100%; justify-content: center; height: 40px; font-size: 14px; }
.mp-push svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp-follow { display: grid; gap: 2px; margin: 10px -8px -8px; }
.follow-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 16px var(--mono); color: var(--g-hi); background: #03130c; box-shadow: inset 0 0 0 1px var(--line-2); }

.mp-related ul { list-style: none; margin: 8px -8px -8px; padding: 0; display: grid; gap: 2px; }
.mp-related a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; transition: background .2s; }
.mp-related a:hover { background: rgba(78, 236, 170, .07); }
.mp-related b { font: 500 13.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-related time { font: 500 11.5px var(--mono); color: var(--dim); white-space: nowrap; }

/* ---------- /models ---------- */
.mp-index-hero { padding: clamp(26px, 5vh, 48px) 0 18px; animation: rise .7s var(--ease) both; }
.mp-index-hero h1 { font-size: clamp(36px, 5vw, 64px); }
.mp-vitals { grid-template-columns: repeat(4, minmax(0, max-content)); }
.mp-vitals dd.warn { color: var(--amber); }
.mp-filter {
  position: sticky; top: calc(57px + env(safe-area-inset-top)); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0; margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(2, 9, 6, .94) 75%, rgba(2, 9, 6, 0));
}
.mp-search { margin-left: auto; }
.mp-search input {
  width: min(260px, 60vw); height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(1, 8, 5, .8); color: var(--text); font: 500 14px var(--display); outline: 0;
}
.mp-search input:focus { border-color: rgba(78, 236, 170, .55); box-shadow: 0 0 0 3px rgba(34, 212, 127, .12); }
.mp-search input::placeholder { color: var(--dim); }
.mp-months { display: grid; gap: 10px; }
.mp-month[hidden], .mp-list li[hidden] { display: none; }
.mp-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mp-row {
  --accent: var(--g); position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 112px; gap: 14px; align-items: center;
  padding: 11px 16px 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.mp-row.leak { --accent: var(--amber); }
.mp-row::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--accent); opacity: .7; }
.mp-row:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateX(3px); }
.mp-row-main { min-width: 0; }
.mp-row-main b { display: block; font: 600 15px var(--mono); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-row-main small { display: block; color: var(--dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-row-date { font: 500 12px var(--mono); color: var(--dim); text-align: right; }
.mp-months .empty[hidden] { display: none; }

/* ---------- not found ---------- */
.mp-missing h1 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.04em; margin: 0 0 12px; }
.mp-slug { font-size: .8em !important; color: var(--amber) !important; background: rgba(244, 199, 69, .08) !important; border-color: rgba(244, 199, 69, .25) !important; padding: 0 10px !important; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .mp-cols { grid-template-columns: minmax(0, 1fr); }
  .mp-side { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .mp-nav a { display: inline-block; padding: 6px 8px; font-size: 13.5px; }
  .mp-hero { grid-template-columns: minmax(0, 1fr); position: relative; padding-top: 18px; }
  .mp-scope { position: absolute; top: 14px; right: 0; }
  .mp-radar { width: 88px; }
  .mp-hud { display: none; }
  .mp-hero .kicker { padding-right: 98px; min-height: 30px; }
  .mp-name { padding-right: 98px; }
  .mp-missing .mp-copy h1 { padding-right: 96px; }
  .mp-name h1 { font-size: clamp(30px, 9vw, 44px); }
  .mp-logo { width: 44px; padding: 7px; }
  .mp-by { font-size: 14.5px; }
  .mp-facts, .mp-facts[data-count] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-facts > div.wide { grid-column: 1 / -1; }
  .mp-side { grid-template-columns: minmax(0, 1fr); }
  .mp-actions .solid-btn, .ghost-btn { flex: 1 1 auto; justify-content: center; }
  .mp-details { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mp-details dd { margin-bottom: 8px; }
  .mp-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px 10px 10px; }
  .mp-row .ev-logo { width: 30px; height: 30px; }
  .mp-row-date { display: none; }
  .mp-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-search { margin-left: 0; flex: 1 1 100%; }
  .mp-search input { width: 100%; }
  .mp-filter { top: calc(53px + env(safe-area-inset-top)); }
  .post-text { font-size: 16px; }
}
@media (max-width: 380px) {
  .mp-facts, .mp-facts[data-count] { grid-template-columns: minmax(0, 1fr); }
}