/* AI deployment architecture evaluator widget.
   Hand-written, scoped under #ai-mirage-widget. Reuses the color/type
   tokens already declared on :root by styles.css (loaded alongside this file)
   rather than redefining them -- no build step, no Tailwind. */

#ai-mirage-widget{margin:clamp(2.25rem,4vw,3.4rem) 0;padding:clamp(1.25rem,3vw,2rem);
  background:#fff;border:1px solid var(--line);border-radius:14px;}

#ai-mirage-widget .amw-head{display:flex;flex-direction:column;gap:1rem;
  padding-bottom:1.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line);}
/* flex-basis is only applied in the row layout: in the stacked column layout a
   basis of 260px would size the block's HEIGHT, leaving a tall gap above the
   persona toggle. */
#ai-mirage-widget .amw-head-copy{min-width:0;}
@media (min-width:640px){#ai-mirage-widget .amw-head{flex-direction:row;flex-wrap:wrap;
  align-items:center;justify-content:space-between;}
  #ai-mirage-widget .amw-head-copy{flex:1 1 260px;}}

#ai-mirage-widget .amw-eyebrow{display:block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;}
#ai-mirage-widget .amw-title{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.35rem,1.15rem + 1vw,1.7rem);line-height:1.15;margin:0 0 .3rem;}
#ai-mirage-widget .amw-sub{font-size:.85rem;color:var(--muted);margin:0;}

#ai-mirage-widget .amw-persona{display:inline-flex;flex-shrink:0;flex-grow:0;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;align-self:flex-start;}
#ai-mirage-widget .amw-persona-btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;padding:.55rem .9rem;background:none;border:none;color:var(--muted);cursor:pointer;}
#ai-mirage-widget .amw-persona-btn[data-active="true"]{background:var(--ink);color:var(--bg);}

#ai-mirage-widget .amw-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;margin-bottom:1.5rem;}
@media (max-width:640px){#ai-mirage-widget .amw-tabs{grid-template-columns:1fr;}}
#ai-mirage-widget .amw-tab{text-align:left;font-family:var(--sans);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:.85rem;cursor:pointer;opacity:.65;}
#ai-mirage-widget .amw-tab:hover{opacity:1;}
/* Selection state is deliberately uniform across all three tabs: the border says
   "this one is active", nothing else. Semantic warn/danger/good colour stays on
   the tag pill and the Model label, where meaning belongs. Weight comes from an
   inset ring rather than a wider border so the box size -- and therefore the grid
   -- does not shift when the active tab changes. */
#ai-mirage-widget .amw-tab[data-active="true"]{background:var(--bg);opacity:1;
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
#ai-mirage-widget .amw-tab-row{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.35rem;}
#ai-mirage-widget .amw-tab-label{font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;}
#ai-mirage-widget .amw-tab-warn .amw-tab-label{color:#9C6A24;}
#ai-mirage-widget .amw-tab-danger .amw-tab-label{color:var(--accent);}
#ai-mirage-widget .amw-tab-good .amw-tab-label{color:var(--plum);}
#ai-mirage-widget .amw-tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.04em;
  padding:.12rem .45rem;border-radius:4px;}
#ai-mirage-widget .amw-tag-warn{background:#F3E6D2;color:#8A5A1E;}
#ai-mirage-widget .amw-tag-danger{background:#F3DDD3;color:#9C4527;}
#ai-mirage-widget .amw-tag-good{background:#EADDE3;color:var(--plum);}
#ai-mirage-widget .amw-tab-name{font-size:.87rem;font-weight:600;line-height:1.3;
  color:var(--ink);min-height:calc(1.3em * 2);display:flex;align-items:flex-start;}

#ai-mirage-widget .amw-pipeline-wrap{background:var(--bg);border-radius:10px;
  padding:1.15rem;margin-bottom:1.5rem;}
#ai-mirage-widget .amw-pipeline-label{display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem;}
#ai-mirage-widget .amw-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}
#ai-mirage-widget .amw-pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;}
@media (max-width:640px){#ai-mirage-widget .amw-pipeline{grid-template-columns:1fr 1fr;}}
#ai-mirage-widget .amw-pstep{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.75rem;}
#ai-mirage-widget .amw-pstep-num{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  color:var(--faint);margin-bottom:.3rem;}
#ai-mirage-widget .amw-pstep-title{font-size:.78rem;font-weight:600;color:var(--ink);
  line-height:1.3;margin-bottom:.2rem;}
#ai-mirage-widget .amw-pstep-sub{font-size:.7rem;color:var(--muted);line-height:1.35;}
#ai-mirage-widget .amw-pstep-status{display:block;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.05em;text-transform:uppercase;margin-top:.65rem;}
#ai-mirage-widget .amw-s-input{color:var(--muted);}
#ai-mirage-widget .amw-s-warn{color:#9C6A24;}
#ai-mirage-widget .amw-s-danger{color:var(--accent);}
#ai-mirage-widget .amw-s-good{color:var(--plum);}

#ai-mirage-widget .amw-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;}
@media (max-width:640px){#ai-mirage-widget .amw-metrics{grid-template-columns:1fr;}}
#ai-mirage-widget .amw-metric{background:var(--bg);border-radius:8px;padding:.9rem;}
#ai-mirage-widget .amw-metric-label{font-size:.74rem;color:var(--muted);margin-bottom:.3rem;}
#ai-mirage-widget .amw-metric-value{font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:.25rem;}
#ai-mirage-widget .amw-metric-detail{font-size:.72rem;color:var(--faint);line-height:1.4;}