/* =========================================================
   PATCH 2026-08-25 07:10 | SAMPLE DESIGN GRID CONTAINMENT

   Defines an explicitly shrinkable Stage 5 grid track.
   Prevents post-inference ZAR content from expanding the implicit
   auto grid column beyond the available MARSS drawer width.
========================================================= */

.module-emc .emc-sample-design {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}

.module-emc .emc-sample-design > * {
  min-width: 0;
}
.module-emc .emc-sample-design [hidden] { display: none !important; }
.module-emc .emc-sample-design-intro,
.module-emc .emc-sample-design-heading,
.module-emc .emc-sample-design-activity { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.module-emc .emc-sample-design-intro,
.module-emc .emc-sample-design-card,
.module-emc .emc-sample-design-preview { padding: 1rem; border: 1px solid var(--emc-border, #dbe5f3); border-radius: 14px; background: #fff; }
.module-emc .emc-sample-design-activity { padding: .9rem 1rem; border-radius: 12px; color: #dce8f7; background: #102033; }
.module-emc .emc-sample-design-activity div { display: grid; flex: 1; }
.module-emc .emc-sample-design-activity small { color: #9fb1ca; }
.module-emc .emc-sample-design-signal { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; background: #59c2a5; }
/* =========================================================
   PATCH 2026-08-25 00:49 | SAMPLE-DESIGN LIVE ACTIVITY

   Gives the active analysis signal a restrained heartbeat and
   scans a soft highlight across status copy only while work is active.
========================================================= */

.module-emc
.emc-sample-design-activity[data-state="working"]
.emc-sample-design-signal{
  animation:
    emc-sample-design-heartbeat 1.35s ease-in-out infinite;
}


/* Working title scanner. */
.module-emc
.emc-sample-design-activity[data-state="working"]
[data-emc-design-activity-title]{
  background:
    linear-gradient(
      105deg,
      #dce8f7 0%,
      #dce8f7 38%,
      #f7fffc 48%,
      #9ff3dc 51%,
      #dce8f7 61%,
      #dce8f7 100%
    );

  background-size:260% 100%;
  background-position:120% 0;

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;

  animation:
    emc-sample-design-text-scan 2.6s linear infinite;
}


/* Working detail scanner — softer than the title. */
.module-emc
.emc-sample-design-activity[data-state="working"]
[data-emc-design-activity-detail]{
  background:
    linear-gradient(
      105deg,
      #9fb1ca 0%,
      #9fb1ca 40%,
      #d9fff4 50%,
      #9fb1ca 60%,
      #9fb1ca 100%
    );

  background-size:260% 100%;
  background-position:120% 0;

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;

  animation:
    emc-sample-design-text-scan 2.9s linear infinite;
}


/* Signal heartbeat: visible but intentionally restrained. */
@keyframes emc-sample-design-heartbeat{

  0%,
  100%{
    transform:scale(1);
    opacity:1;
    box-shadow:
      0 0 0 0 rgba(89,194,165,0);
  }

  18%{
    transform:scale(1.16);
    opacity:1;
    box-shadow:
      0 0 0 5px rgba(89,194,165,.10);
  }

  32%{
    transform:scale(1);
    box-shadow:
      0 0 0 8px rgba(89,194,165,0);
  }

  44%{
    transform:scale(1.09);
  }

  58%{
    transform:scale(1);
  }
}


/* Slow light sweep travelling across the actual text. */
@keyframes emc-sample-design-text-scan{

  from{
    background-position:120% 0;
  }

  to{
    background-position:-120% 0;
  }
}


/* Finished activity is deliberately static. */
.module-emc
.emc-sample-design-activity[data-state="ready"]
.emc-sample-design-signal{
  transform:none;
  box-shadow:none;
}


/* Failed activity must never continue looking busy. */
.module-emc
.emc-sample-design-activity[data-state="error"]
.emc-sample-design-signal{
  animation:none;
  transform:none;
  box-shadow:none;
}


/* Respect reduced-motion preferences. */
@media(prefers-reduced-motion:reduce){

  .module-emc
  .emc-sample-design-activity[data-state="working"]
  .emc-sample-design-signal,

  .module-emc
  .emc-sample-design-activity[data-state="working"]
  [data-emc-design-activity-title],

  .module-emc
  .emc-sample-design-activity[data-state="working"]
  [data-emc-design-activity-detail]{
    animation:none;
  }

  .module-emc
  .emc-sample-design-activity[data-state="working"]
  [data-emc-design-activity-title],

  .module-emc
  .emc-sample-design-activity[data-state="working"]
  [data-emc-design-activity-detail]{
    background:none;
    color:inherit;
    -webkit-text-fill-color:currentColor;
  }
}
.module-emc .emc-sample-design-source-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.module-emc .emc-sample-design-zar-comparison { display: grid; gap: .65rem; padding: 1rem; border: 1px solid #b9ddcf; border-radius: 14px; background: #f2faf7; }
.module-emc .emc-sample-design-zar-section { display: grid; gap: .65rem; padding: 1rem; border: 1px solid #dbe5f3; border-radius: 12px; background: #fff; }
/* =========================================================
   PATCH 2026-08-25 08:04 | DOWNSTREAM ANALYSIS LABEL GUIDE

   EMC-owned educational component for analysis-safe sample metadata.
   Uses File Reader only as a visual idea; no cross-module classes,
   markup ownership or CSS dependencies are introduced.
========================================================= */

.module-emc
.emc-sample-design-label-guide{
  min-width:0;
  margin:.15rem 0 .35rem;

  border:1px solid #dbe5f3;
  border-radius:12px;

  background:#f7faff;

  overflow:hidden;
}


.module-emc
.emc-sample-design-label-guide
> summary{
  padding:.8rem .9rem;

  cursor:pointer;

  color:#304a75;
  font-weight:800;

  background:#f1f6fc;
}


.module-emc
.emc-sample-design-label-guide
> summary:hover{
  background:#edf4fb;
}


.module-emc
.emc-sample-design-label-guide
> summary:focus-visible{
  outline:2px solid #287d6a;
  outline-offset:-2px;
}


.module-emc
.emc-sample-design-label-guide-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);

  gap:.85rem;

  min-width:0;

  padding:.9rem;
}


.module-emc
.emc-sample-design-label-guide-body
> .marss-emc-copy{
  margin:0;
}


.module-emc
.emc-sample-design-label-guide-table-wrap{
  width:100%;
  min-width:0;

  overflow-x:auto;

  border:1px solid #e1e8f2;
  border-radius:10px;

  background:#fff;
}


.module-emc
.emc-sample-design-label-guide-table{
  width:100%;

  border-collapse:collapse;
}


.module-emc
.emc-sample-design-label-guide-table
th,
.module-emc
.emc-sample-design-label-guide-table
td{
  padding:.6rem .7rem;

  border-bottom:
    1px solid #e8edf5;

  text-align:left;
  vertical-align:middle;
}


.module-emc
.emc-sample-design-label-guide-table
th{
  color:#304a75;
  background:#eaf1fb;

  font-size:.82rem;
  font-weight:800;
}


.module-emc
.emc-sample-design-label-guide-table
tr:last-child
td{
  border-bottom:0;
}


.module-emc
.emc-sample-design-label-guide-table
code{
  white-space:nowrap;

  color:#263d61;
  font-weight:700;
}


.module-emc
.emc-sample-design-label-model{
  display:grid;
  grid-template-columns:minmax(0,1fr);

  gap:.65rem;

  padding:.8rem;

  border:1px solid #cbe5dc;
  border-radius:10px;

  background:#f1faf7;
}


.module-emc
.emc-sample-design-label-model
> strong{
  color:#285f53;
}


.module-emc
.emc-sample-design-label-components{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:.55rem;
}


.module-emc
.emc-sample-design-label-components
> div{
  display:grid;
  gap:.2rem;

  min-width:0;

  padding:.55rem .65rem;

  border:1px solid #dbe5f3;
  border-radius:9px;

  background:#fff;
}


.module-emc
.emc-sample-design-label-components
span{
  color:#7183a1;

  font-size:.75rem;
  font-weight:750;
}


.module-emc
.emc-sample-design-label-components
code{
  min-width:0;

  color:#263d61;

  font-size:.9rem;
  font-weight:800;

  overflow-wrap:anywhere;
}


.module-emc
.emc-sample-design-label-assembled{
  display:flex;
  align-items:center;

  gap:.65rem;

  min-width:0;
}


.module-emc
.emc-sample-design-label-assembled
> span{
  color:#4b6992;
  font-weight:800;
}


.module-emc
.emc-sample-design-label-assembled
code{
  padding:.45rem .65rem;

  border-radius:8px;

  color:#285f53;
  background:#fff;

  font-weight:800;

  overflow-wrap:anywhere;
}


.module-emc
.emc-sample-design-label-note{
  margin:0;

  color:#7183a1;

  font-size:.8rem;
  line-height:1.45;
}


/* Invalid downstream metadata must remain visibly unresolved. */
.module-emc
.emc-sample-design-rule[
  data-validation="invalid"
]{
  border:
    1px solid #e8c8a6;

  background:#fff9f3;
}


.module-emc
.emc-sample-design-rule[
  data-validation="invalid"
]
.emc-sample-design-rule-status{
  color:#875929;
  background:#fff0de;
}


.module-emc
.emc-sample-design-rule[
  data-validation="invalid"
]
input{
  border-color:#d7a66d;
}
.module-emc .emc-sample-design-name-bulk { margin-left: auto; }
.module-emc .emc-sample-design-name-table-wrap { max-height: 20rem; margin-top: 0; border: 1px solid #e1e8f2; border-radius: 10px; }
.module-emc .emc-sample-design-name-actions { display: flex; gap: .45rem; }
.module-emc .emc-sample-design-name-table tr[data-decision="zar"] { background: #eef8f5; }
.module-emc .emc-sample-design-name-table tr[data-decision="current"] { background: #f7f9fc; }
.module-emc .emc-sample-design-zar-difference { display: grid; grid-template-columns: minmax(8rem,.7fr) 1fr 1fr auto; gap: .65rem; align-items: center; padding: .65rem; border-radius: 10px; background: #fff; }
.module-emc .emc-sample-design-zar-difference code { overflow-wrap: anywhere; }
/* Sample-design action tooltips open above and inward. */
.module-emc
.emc-sample-design-source-actions
[data-tooltip]::after {
  left: auto;
  right: 0;
  bottom: calc(100% + 10px);
  max-width: 22rem;
}

.module-emc
.emc-sample-design-source-actions
[data-tooltip]::before {
  left: auto;
  right: 14px;
  bottom: calc(100% + 5px);
}
.module-emc .emc-sample-design-origin,
.module-emc .emc-sample-design-rule-status { padding: .35rem .65rem; border-radius: 999px; color: #526987; background: #edf3fb; font-size: .8rem; font-weight: 700; }
.module-emc .emc-sample-design-rules { display: grid; gap: .55rem; margin-top: 1rem; }
.module-emc .emc-sample-design-rule { display: grid; grid-template-columns: minmax(8rem, .8fr) auto minmax(12rem, 1fr) auto auto auto auto; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 10px; background: #eef8f5; }
.module-emc .emc-sample-design-rule input { width: 100%; min-width: 0; }
.module-emc .emc-sample-design-action { cursor: pointer; box-shadow: none !important; transform: none !important; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.module-emc .emc-sample-design-action:hover:not(:disabled) { border-color: #5ab69d; background: #effaf6; transform: none !important; }
.module-emc .emc-sample-design-action:focus-visible { outline: 2px solid #287d6a; outline-offset: 2px; }
.module-emc .emc-sample-design-action:disabled { cursor: default; opacity: .62; }
/* =========================================================
   PATCH 2026-08-25 00:23 | ZAR SAMPLE-DESIGN ACTION MARK

   Uses the canonical animated ZAR AI SVG inside the guidance action.
   Adds only subtle border/background hover feedback with stable geometry.
========================================================= */

.module-emc #emcAskZarSampleDesignBtn.emc-zar-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  cursor:pointer;

  border-color:#c4d3e9;
  background:#fff;
  color:#405272;

  box-shadow:none!important;
  transform:none!important;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.module-emc
#emcAskZarSampleDesignBtn.emc-zar-action:hover:not(:disabled){
  border-color:#92afd5;
  background:#f4f8fe;
  color:#304b74;

  box-shadow:none!important;
  transform:none!important;
}

.module-emc
#emcAskZarSampleDesignBtn.emc-zar-action:active:not(:disabled){
  border-color:#7f9fc9;
  background:#eef4fc;

  box-shadow:none!important;
  transform:none!important;
}

.module-emc #emcAskZarSampleDesignBtn.emc-zar-action:disabled{
  cursor:default;
}


/* Canonical ZAR mark asset. */
.module-emc .emc-zar-action-mark{
  display:block;

  width:25px;
  height:25px;
  flex:0 0 25px;

  object-fit:contain;
}


/* ZAR AI · Ask for guidance */
.module-emc .emc-zar-action-label{
  display:inline-flex;
  align-items:baseline;
  gap:.3rem;

  min-width:0;

  line-height:1;
  white-space:nowrap;
}

.module-emc .emc-zar-action-label strong{
  color:#334c75;
  font-weight:850;
}

.module-emc .emc-zar-action-divider{
  opacity:.5;
}
.module-emc .emc-sample-design-rule [data-tooltip]::after { right: calc(100% + 10px); left: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.module-emc .emc-sample-design-rule [data-tooltip]::before { right: calc(100% + 5px); left: auto; top: calc(50% - 5px); bottom: auto; transform: rotate(-45deg); }

/* =========================================================
   PATCH 2026-08-25 09:27 | REJECTED INTERPRETATION STATE

   Makes explicit researcher rejection visually distinct while
   preserving Edit as the recovery path.
========================================================= */

.module-emc
.emc-sample-design-rule[data-state="rejected"]{
  border:1px solid #e8c9b9;
  background:#fff7f3;
}

.module-emc
.emc-sample-design-rule[data-state="rejected"]
.emc-sample-design-rule-status{
  color:#87513f;
  background:#f9e8e1;
}

.module-emc
.emc-sample-design-rule[data-state="rejected"]
.emc-sample-design-action-reject:disabled{
  border-color:#d8b7aa;
  color:#87513f;
  background:#f6e5de;
  opacity:1;
}

.module-emc .emc-sample-design-preview summary { cursor: pointer; font-weight: 750; color: #304a75; }
.module-emc .emc-sample-design-table-wrap { max-height: 22rem; margin-top: .75rem; overflow: auto; }
.module-emc .emc-sample-design-table { width: 100%; border-collapse: collapse; }
.module-emc .emc-sample-design-table th { position: sticky; top: 0; z-index: 1; background: #eaf1fb; }
.module-emc .emc-sample-design-table th,
.module-emc .emc-sample-design-table td { padding: .65rem .75rem; border-bottom: 1px solid #e1e8f2; text-align: left; white-space: nowrap; }
@media (max-width: 900px) {
  .module-emc .emc-sample-design-intro,
  .module-emc .emc-sample-design-heading { align-items: stretch; flex-direction: column; }
  .module-emc .emc-sample-design-rule { grid-template-columns: 1fr auto; }
  .module-emc .emc-sample-design-rule input,
  .module-emc .emc-sample-design-rule-status { grid-column: 1 / -1; }
  .module-emc .emc-sample-design-zar-difference { grid-template-columns: 1fr; }
  .module-emc .emc-sample-design-source-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: .65rem;
  }

  .module-emc .emc-sample-design-source-actions .emc-sample-design-action {
    width: 100%;
    min-width: 0;
  }

  .module-emc
  .emc-sample-design-source-actions
  [data-tooltip]::after {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  .module-emc
  .emc-sample-design-source-actions
  [data-tooltip]::before {
    left: auto;
    right: 14px;
  }  
  /* =========================================================
    PATCH 2026-08-25 00:39 | RESPONSIVE ZAR ACTION BUTTON

    Allows the branded ZAR action label to reflow inside narrow EMC cards.
    Preserves the SVG mark, stable geometry and existing hover behaviour.
  ========================================================= */

  .module-emc #emcAskZarSampleDesignBtn.emc-zar-action{
    width:100%;
    min-width:0;
    padding:.65rem .75rem;
    gap:.5rem;
  }

  .module-emc .emc-zar-action-mark{
    width:24px;
    height:24px;
    flex:0 0 24px;
  }

  .module-emc .emc-zar-action-label{
    flex:1 1 auto;
    min-width:0;

    justify-content:center;
    flex-wrap:wrap;

    white-space:normal;
    text-align:center;
    line-height:1.15;

    column-gap:.3rem;
    row-gap:.12rem;
  }  
  .module-emc .emc-sample-design-activity {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .65rem;
  }

  .module-emc .emc-sample-design-activity div {
    min-width: 0;
    flex: 1 1 12rem;
  }
  /* =========================================================
    PATCH 2026-08-25 06:52 | ZAR RESULT MOBILE CONTAINMENT

    Constrains the dynamically injected ZAR interpretation hierarchy
    to the EMC stage width after Python/Mistral inference completes.
  ========================================================= */

  .module-emc .emc-sample-design-zar-comparison,
  .module-emc .emc-sample-design-zar-section,
  .module-emc .emc-sample-design-rules,
  .module-emc .emc-sample-design-activity {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .module-emc .emc-sample-design-zar-comparison > strong,
  .module-emc .emc-sample-design-zar-section > h4,
  .module-emc .emc-sample-design-zar-section > .marss-emc-copy,
  .module-emc .emc-sample-design-activity strong,
  .module-emc .emc-sample-design-activity small {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .module-emc .emc-sample-design-name-table-wrap,
  .module-emc .emc-sample-design-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
  }  
  /* =========================================================
    PATCH 2026-08-25 07:03 | ZAR NAME REVIEW RESPONSIVE TABLE

    Makes the post-inference sample-name review table responsive.
    Long scientific identifiers may wrap, and row decision actions stack
    instead of establishing a desktop minimum width inside the MARSS dock.
  ========================================================= */

  .module-emc .emc-sample-design-name-table{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .module-emc .emc-sample-design-name-table th,
  .module-emc .emc-sample-design-name-table td{
    min-width:0;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
    vertical-align:top;
  }

  .module-emc .emc-sample-design-name-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:.35rem;

    width:100%;
    max-width:100%;
    min-width:0;

    box-sizing:border-box;
  }

  .module-emc
  .emc-sample-design-name-actions
  .emc-sample-design-action{
    width:100%;
    max-width:100%;
    min-width:0;

    box-sizing:border-box;

    white-space:normal;
  }
  /* -----------------------------------------
    ZAR sample-name decision tooltips
  ----------------------------------------- */

  .module-emc
  .emc-sample-design-name-actions
  [data-tooltip]::after{
    left:0;
    right:0;

    top:auto;
    bottom:calc(100% + 8px);

    width:auto;
    max-width:100%;

    box-sizing:border-box;

    white-space:normal;
    overflow-wrap:break-word;

    transform:none;
  }

  .module-emc
  .emc-sample-design-name-actions
  [data-tooltip]::before{
    display:none;
  }
   .module-emc
  .emc-sample-design-name-actions
  .emc-sample-design-action{
    width:100%;
    max-width:100%;
    min-width:0;

    box-sizing:border-box;

    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  } 
  .module-emc
  .emc-sample-design-name-actions
  .emc-sample-design-action-keep{
    min-width:5.8rem;
  }  
}
/* =========================================================
   PATCH 2026-08-25 00:39 | COMPACT ZAR ACTION LABEL

   Converts the branded action copy to a compact two-line layout
   at phone widths without resizing or moving the button itself.
========================================================= */

@media (max-width:560px){

  .module-emc #emcAskZarSampleDesignBtn.emc-zar-action{
    justify-content:flex-start;
    padding:.65rem .8rem;
  }

  .module-emc .emc-zar-action-mark{
    width:27px;
    height:27px;
    flex-basis:27px;
  }

  .module-emc .emc-zar-action-label{
    display:grid;
    grid-template-columns:1fr;

    justify-items:start;
    gap:.12rem;

    text-align:left;
  }

  .module-emc .emc-zar-action-divider{
    display:none;
  }

  .module-emc .emc-zar-action-label > span:last-child{
    font-size:.78rem;
    font-weight:700;
    opacity:.8;
  }
  /* -----------------------------------------
    ZAR interpretation rows
  ----------------------------------------- */

  .module-emc .emc-sample-design-rule {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .5rem;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
    padding: .65rem;
  }

  .module-emc .emc-sample-design-rule > code {
    grid-column: 1 / -1;

    min-width: 0;
    max-width: 100%;

    overflow-wrap: anywhere;
  }

  /*
  * The desktop arrow is unnecessary once the interpretation
  * becomes a vertical mobile flow.
  */
  .module-emc
  .emc-sample-design-rule
  > span:not(.emc-sample-design-rule-status) {
    display: none;
  }

  .module-emc .emc-sample-design-rule > input,
  .module-emc .emc-sample-design-rule-status,
  .module-emc .emc-sample-design-rule > .emc-sample-design-action {
    grid-column: 1 / -1;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
  }

  .module-emc
  .emc-sample-design-rule
  > .emc-sample-design-action {
    justify-content: center;
  }  
  /* -----------------------------------------
    Mobile interpretation tooltips
  ----------------------------------------- */

  .module-emc
  .emc-sample-design-rule
  [data-tooltip]::after {
    left: 0;
    right: 0;

    top: auto;
    bottom: calc(100% + 8px);

    width: auto;
    max-width: 100%;

    box-sizing: border-box;

    transform: none;

    white-space: normal;
    overflow-wrap: anywhere;
  }

  .module-emc
  .emc-sample-design-rule
  [data-tooltip]::before {
    display: none;
  } 
  /* -----------------------------------------
    Downstream analysis-label guide
  ----------------------------------------- */

  .module-emc
  .emc-sample-design-label-guide,
  .module-emc
  .emc-sample-design-label-guide-body,
  .module-emc
  .emc-sample-design-label-model{
    width:100%;
    max-width:100%;
    min-width:0;

    box-sizing:border-box;
  }


  .module-emc
  .emc-sample-design-label-components{
    grid-template-columns:
      minmax(0,1fr);
  }


  .module-emc
  .emc-sample-design-label-guide-table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;

    overflow-x:auto;
  }


  .module-emc
  .emc-sample-design-label-guide-table{
    min-width:31rem;
  }


  .module-emc
  .emc-sample-design-label-assembled{
    align-items:flex-start;
    flex-direction:column;
  }  
}