/* ==========================================================================
   apps/submit.css — "Submit PoC" app
   A File Explorer window body: address bar, command bar, content pane with
   drop zone + details pane, footer action, status bar. In-app ContentDialog
   (confirm) and copy-progress dialog (proof of work with the official
   solver's command and paste box / upload).
   Root: <div class="app app--submit"> (flex column, container "app").
   ========================================================================== */

.spoc {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  color: var(--c-text);
  font: var(--type-body);
}

/* ---- Address bar ----------------------------------------------------------- */
.spoc__address {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  height: var(--control-h);
  margin: var(--s-2) var(--s-3) 0;
  padding: 0 var(--s-3);
  overflow: hidden;
  border: 1px solid var(--c-stroke-control);
  border-radius: var(--r-sm);
  background: var(--c-control);
  color: var(--c-text-2);
  white-space: nowrap;
}
.spoc__address-img {
  flex: none;
  width: 16px;
  height: 16px;
}
.spoc__crumb { flex: none; }
.spoc__crumb--file {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--c-text);
  text-overflow: ellipsis;
}
.spoc__chev {
  width: 12px;
  height: 12px;
  color: var(--c-text-tertiary);
}
.spoc__chev[hidden] { display: none; }

/* ---- Command bar ----------------------------------------------------------- */
.spoc__cmdbar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-stroke);
}
.spoc__cmd { padding-inline: var(--s-2) var(--s-3); }
.spoc__cmd > .icon,
.spoc__cmd > .spoc__cmd-img {
  width: 16px;
  height: 16px;
}
.spoc__sep {
  flex: none;
  width: 1px;
  height: 20px;
  margin-inline: var(--s-1);
  background: var(--c-stroke-strong);
}
.spoc__spacer {
  flex: 1 1 auto;
  min-width: var(--s-2);
}

/* Runs left: battery-style pips. */
.spoc__runs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-inline: var(--s-2);
  color: var(--c-text-2);
  font: var(--type-caption);
  white-space: nowrap;
}
.spoc__pips {
  display: inline-flex;
  gap: 3px;
}
.spoc__pip {
  width: 6px;
  height: 14px;
  border-radius: 2px;
  background: var(--c-stroke-strong);
}
.spoc__pip.is-left {
  background: var(--c-accent);
  box-shadow: 0 0 6px var(--c-accent-subtle-stroke);
}
.spoc__runs.is-low .spoc__pip.is-left {
  background: var(--c-warning);
  box-shadow: none;
}
.spoc__runs.is-empty .spoc__runs-text { color: var(--c-error); }

/* ---- Content pane ---------------------------------------------------------- */
.spoc__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 0;
  padding: var(--s-4);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--c-surface-3);
}
.spoc__slot {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.spoc__slot:empty { display: none; }
.spoc__bar-detail {
  color: var(--c-text-2);
  font: var(--type-caption);
}
.spoc__rules { margin-top: auto; }
/* Fluent HyperlinkButton: aligned with the message text */
.spoc__rules .infobar__actions > .btn {
  margin-inline-start: calc(-1 * var(--s-3));
  color: var(--c-accent-link);
}

/* ---- Drop zone ------------------------------------------------------------- */
.spoc__drop {
  position: relative;
  display: grid;
  flex: none;
  align-content: center;
  justify-items: center;
  gap: var(--s-3);
  min-height: 220px;
  padding: var(--s-6) var(--s-4);
  border: 1.5px dashed var(--c-stroke-strong);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--c-accent-subtle), transparent 70%),
    var(--c-card);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) linear,
    background-color var(--dur-fast) linear,
    box-shadow var(--dur-fast) linear;
}
.spoc__drop:hover { border-color: var(--c-accent-subtle-stroke); }
.spoc.is-dragging .spoc__drop {
  border-style: solid;
  border-color: var(--c-accent);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--c-accent-subtle-stroke), transparent 75%),
    var(--c-accent-subtle);
  box-shadow: 0 0 0 3px var(--c-accent-subtle);
}
.spoc__drop.is-disabled {
  cursor: default;
  opacity: 0.6;
}

.spoc__drop-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border: 1px solid var(--c-stroke);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  /* second sheet peeking out behind the card: fill over outline, then depth */
  box-shadow:
    7px 7px 0 -1px var(--c-surface-2),
    7px 7px 0 0 var(--c-stroke-strong),
    var(--shadow-card);
  transition: transform var(--dur) var(--ease);
}
.spoc__drop-file {
  width: 48px;
  height: 48px;
}
.spoc__drop-badge {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--c-surface-3);
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-text);
}
.spoc.is-dragging .spoc__drop-art { transform: translateY(-6px) scale(1.04); }

.spoc__drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.spoc__drop-title { font: var(--fw-strong) var(--fs-body-large) / var(--lh-body-large) var(--font-display); }
.spoc__drop-hint {
  color: var(--c-text-tertiary);
  font: var(--type-caption);
}

/* Compact strip once a file is selected. */
.spoc__drop.is-compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-items: start;
  align-items: center;
  gap: var(--s-4);
  min-height: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--c-card);
  text-align: left;
}
.spoc__drop.is-compact .spoc__drop-art {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.spoc__drop.is-compact .spoc__drop-file {
  width: 24px;
  height: 24px;
}
.spoc__drop.is-compact .spoc__drop-badge {
  right: -6px;
  bottom: -6px;
  width: 22px;
  height: 22px;
}
.spoc__drop.is-compact .spoc__drop-badge > .icon {
  width: 12px;
  height: 12px;
}
.spoc__drop.is-compact .spoc__drop-title { font: var(--type-body-strong); }

/* ---- Details pane ---------------------------------------------------------- */
.spoc__details {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-stroke);
  border-radius: var(--r-md);
  background: var(--c-card);
}
.spoc__details[hidden] { display: none; }

.spoc__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.spoc__head-img {
  flex: none;
  width: 40px;
  height: 40px;
}
.spoc__head-meta { min-width: 0; }
.spoc__head-name {
  margin: 0;
  overflow: hidden;
  font: var(--type-subtitle);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spoc__head-sub {
  margin: 0;
  color: var(--c-text-2);
  font: var(--type-caption);
}

.spoc__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.spoc__h {
  margin: 0 0 var(--s-2);
  color: var(--c-text-2);
  font: var(--fw-strong) var(--fs-caption) / var(--lh-caption) var(--font-ui);
  letter-spacing: 0.02em;
}
.spoc__props { font-variant-numeric: tabular-nums; }
.spoc__hash {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-1);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-stroke);
}
.spoc__hash > dt { font: var(--fw-strong) var(--fs-caption) / var(--lh-caption) var(--font-ui); }
.spoc__sha {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.spoc__sha-text {
  min-width: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.spoc__copy { margin-block: -6px; }

/* Checks list */
.spoc__checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spoc__check {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
  padding: 6px var(--s-2);
  border-radius: var(--r-sm);
}
.spoc__check[data-state="bad"] { background: var(--c-error-subtle); }
.spoc__check[data-state="skip"] { color: var(--c-text-3); }
.spoc__check-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.spoc__check[data-state="pending"] .spoc__check-icon { animation: spoc-pulse 1.2s ease-in-out infinite; }
.spoc__check-icon--skip {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin: 4px 2px 0;
  border: 1.5px solid var(--c-text-3);
  border-radius: 50%;
}
.spoc__check-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.spoc__check-reason {
  color: var(--c-error);
  font: var(--type-caption);
  overflow-wrap: anywhere;
}
.spoc__check-state {
  padding-top: 2px;
  color: var(--c-text-tertiary);
  font: var(--type-caption);
}
.spoc__check[data-state="ok"] .spoc__check-state { color: var(--c-success); }
.spoc__check[data-state="bad"] .spoc__check-state { color: var(--c-error); }

/* ---- Footer + status bar --------------------------------------------------- */
.spoc__footer {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-stroke);
}
.spoc__reason {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--c-text-2);
  font: var(--type-caption);
}
.spoc__reason[data-tone="ok"]::before,
.spoc__reason[data-tone="info"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 var(--s-2) 1px 0;
  border-radius: 50%;
  background: var(--c-success);
  vertical-align: middle;
}
.spoc__reason[data-tone="info"]::before { background: var(--c-accent); }
.spoc__go {
  flex: none;
  min-width: 148px;
}

.spoc__statusbar {
  display: flex;
  flex: none;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 24px;
  padding: 3px var(--s-4) 5px;
  border-top: 1px solid var(--c-stroke);
  color: var(--c-text-tertiary);
  font: var(--type-caption);
}
.spoc__status-item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- In-app modal layer ---------------------------------------------------- */
.spoc__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: var(--s-4);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--c-overlay);
  animation: spoc-fade var(--dur) linear;
}
.spoc__overlay[hidden] { display: none; }

/* Fluent ContentDialog */
.spoc__dialog {
  width: min(100%, 460px);
  margin: auto;
  overflow: hidden;
  border: 1px solid var(--c-stroke-surface);
  border-radius: var(--r-md);
  background: var(--c-surface-1);
  box-shadow: var(--shadow-window);
  animation: spoc-pop var(--dur-slow) var(--ease);
}
.spoc__dialog:focus { outline: none; }
.spoc__dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
}
.spoc__dialog-title {
  margin: 0 0 var(--s-1);
  font: var(--type-subtitle);
  overflow-wrap: anywhere;
}
.spoc__dialog-text { margin: 0; }
.spoc__dialog-footer {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--s-2);
  padding: var(--s-6);
  border-top: 1px solid var(--c-stroke);
  background: var(--c-surface-3);
}

.spoc__charge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-accent-subtle);
}
.spoc__charge-title { font: var(--type-body-strong); }
.spoc__charge-text { color: var(--c-text-2); }
.spoc__confirm-kv { margin-top: var(--s-1); }
.spoc__confirm-name { overflow-wrap: anywhere; }

/* Copy-progress dialog */
.spoc__dialog--copy { width: min(100%, 500px); }
.spoc__dialog--copy .spoc__dialog-body { gap: var(--s-2); }
.spoc__dialog--copy .spoc__dialog-footer {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
}
.spoc__dialog--copy .spoc__dialog-footer > .btn { min-width: 112px; }
.spoc__copy-note {
  color: var(--c-text-tertiary);
  font: var(--type-caption);
}

.spoc__copy-steps {
  gap: var(--s-3);
  justify-content: flex-start;
  margin-bottom: var(--s-1);
}
.spoc__copy-steps .stepper__step {
  --dot: 20px;
  flex: 0 0 auto;
  flex-direction: row;
  gap: var(--s-2);
  padding: 0;
  font: var(--type-caption);
}
.spoc__copy-steps .stepper__step::after {
  position: static;
  flex: none;
  align-self: center;
  width: 28px;
  margin-left: var(--s-1);
}
.spoc__copy-steps .stepper__dot { font-size: 11px; }

.spoc__copy-sub {
  margin: 0;
  color: var(--c-text-2);
  font: var(--type-caption);
  overflow-wrap: anywhere;
}
.spoc__copy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  min-height: var(--lh-title);
  margin: var(--s-1) 0 0;
}
.spoc__copy-num {
  font: var(--type-title);
  font-variant-numeric: tabular-nums;
}
.spoc__copy-num:empty { display: none; }
.spoc__copy-what { color: var(--c-text-2); }
.spoc__copy-bar { margin-block: var(--s-1) var(--s-2); }

/* Speed graph: columns fill left to right, then scroll. */
.spoc__graph {
  --graph: var(--c-accent);
  --graph-fill: var(--c-accent-subtle-stroke);
  position: relative;
  height: 84px;
  overflow: hidden;
  border: 1px solid var(--c-stroke-strong);
  border-radius: var(--r-sm);
  background:
    linear-gradient(var(--c-stroke) 1px, transparent 1px) 0 0 / 100% 25%,
    var(--c-surface-3);
}
.spoc__graph-cols {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.spoc__graph-col {
  flex: 1 1 0;
  height: calc(var(--h, 0) * 100%);
  border-top: min(1px, calc(var(--h, 0) * 10000px)) solid var(--graph);
  background: var(--graph-fill);
  transition: height var(--dur) linear;
}
.spoc__graph-line {
  position: absolute;
  right: 0;
  bottom: calc(var(--y, 0) * 100%);
  left: 0;
  border-top: 1px solid var(--c-text-2);
  transition: bottom var(--dur) linear;
}
.spoc__graph-line[hidden] { display: none; }
.spoc__graph-label {
  position: absolute;
  right: var(--s-2);
  bottom: 2px;
  padding: 0 var(--s-1);
  border-radius: 2px;
  background: var(--c-surface-3);
  color: var(--c-text);
  font: var(--type-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Upload phase uses the green of the Windows copy dialog. */
.spoc__dialog[data-phase="upload"] .spoc__graph {
  --graph: var(--c-success);
  --graph-fill: var(--c-success-subtle);
}
.spoc__dialog[data-phase="upload"] .spoc__copy-bar { --bar: var(--c-success); }
.spoc__copy-kv {
  margin-top: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.spoc__copy-notice { margin-block: var(--s-1); }
/* The browser solver failed: only the official solver remains. */
.spoc__dialog.is-solver-failed .spoc__copy-bar,
.spoc__dialog.is-solver-failed .spoc__graph { display: none; }

/* Official solver: command to copy + box for the line it prints. */
.spoc__ext {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-stroke);
}
.spoc__ext-title {
  margin: 0;
  font: var(--type-body-strong);
}
.spoc__ext-text {
  margin: 0;
  color: var(--c-text-2);
  font: var(--type-caption);
}
.spoc__ext-cmd {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border: 1px solid var(--c-stroke);
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
}
.spoc__ext-cmd-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: 5px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.spoc__ext-paste {
  display: flex;
  gap: var(--s-2);
}
.spoc__ext-input {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}
.spoc__ext-use { flex: none; }
.spoc__ext-error {
  margin: 0;
  color: var(--c-error);
  font: var(--type-caption);
}
.spoc__ext-error:empty { display: none; }

/* ---- Responsive ------------------------------------------------------------ */
@container app (min-width: 560px) {
  .spoc__cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

@container app (max-width: 519px) {
  .spoc__cmd-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .spoc__cmd { padding-inline: var(--s-2); }
  .spoc__body { padding: var(--s-3); }
  .spoc__drop.is-compact { grid-template-columns: auto minmax(0, 1fr); }
  .spoc__drop.is-compact .spoc__drop-btn { grid-column: 1 / -1; justify-self: stretch; }
  .spoc__footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }
  .spoc__go { width: 100%; }
}

@container app (max-width: 419px) {
  .spoc__statusbar { display: none; }
  .spoc__address { margin-inline: var(--s-2); }
  .spoc__overlay { padding: var(--s-2); }
  .spoc__dialog-body,
  .spoc__dialog-footer { padding: var(--s-4); }
  .spoc__dialog--copy .spoc__dialog-footer { grid-template-columns: minmax(0, 1fr); }
  .spoc__ext-paste { flex-direction: column; }
  .spoc__copy-note { text-align: center; }
  .spoc__drop { min-height: 180px; }
}

/* Tablet mode: large touch targets everywhere in the app. */
@media (max-width: 899px), (pointer: coarse) {
  .spoc__cmd,
  .spoc__go,
  .spoc__drop-btn,
  .spoc__dialog-footer .btn,
  .spoc .infobar__actions .btn,
  .spoc__ext-use,
  .spoc__ext-copy,
  .spoc__ext-input { min-height: var(--touch-target); }
  .spoc__cmd { min-width: var(--touch-target); }
  .spoc__copy {
    min-width: var(--touch-target);
    height: var(--touch-target);
    margin-block: -10px;
  }
  .spoc .infobar__close {
    width: var(--touch-target);
    height: var(--touch-target);
  }
  .spoc__cmdbar { min-height: 60px; }
}

/* ---- Motion ---------------------------------------------------------------- */
@keyframes spoc-fade {
  from { opacity: 0; }
}
@keyframes spoc-pop {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes spoc-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .spoc__overlay,
  .spoc__dialog,
  .spoc__check[data-state="pending"] .spoc__check-icon { animation: none; }
  .spoc__drop-art,
  .spoc__graph-col,
  .spoc__graph-line { transition: none; }
  .spoc.is-dragging .spoc__drop-art { transform: none; }
}