/* AIAE Account Potential Scoring — app layer on top of the AI Digital design
   system (aidigital-design-system.css). Only service-specific pieces live
   here; tokens and generic components come from the system. */

/* -- form layout ------------------------------------------------------------*/
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.form__row--three { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 640px) {
  .form__row, .form__row--three { grid-template-columns: 1fr; }
}

.form__field { display: flex; flex-direction: column; gap: 6px; }

.form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.form__actions .ds-hint { flex: 1; min-width: 240px; }

/* selects reuse .ds-input + a custom arrow */
select.ds-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aaaaaa' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* -- visibility -------------------------------------------------------------*/
/* !important so it beats the display rules of whatever it is applied to
   (.app-auth, .ds-nav-user …) regardless of source order. */
.app-hidden { display: none !important; }

/* -- progress steps (ds-status-card rows) ------------------------------------*/
.app-step--running .ds-status-dot { background: var(--blue); box-shadow: 0 0 0 2px var(--blue-light); animation: appPulse 1s infinite; }
.app-step--running .ds-status-key { color: var(--black); font-weight: 500; }
.app-step--running .ds-status-val { color: var(--blue); }
.app-step--done .ds-status-dot { background: var(--lime); box-shadow: 0 0 0 2px rgba(174,243,63,0.3); }
.app-step--done .ds-status-val { color: var(--blue); font-weight: 500; }
.app-step--error .ds-status-dot { background: var(--red); box-shadow: 0 0 0 2px rgba(217,48,37,0.2); }
.app-step--error .ds-status-val { color: var(--red); }
.ds-status-val { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

@keyframes appPulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .app-step--running .ds-status-dot { animation: none; }
}

/* -- result -------------------------------------------------------------------*/
.app-copy { margin-left: auto; align-self: center; }

.app-summary {
  background: var(--gray-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--black);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* -- raw data panel -------------------------------------------------------------*/
.app-raw { margin-top: var(--space-5); }
.app-raw__toggle { cursor: pointer; }
.app-raw__toggle:hover { color: var(--blue); }
.app-raw__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

.app-raw h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-5) 0 var(--space-2);
}

.app-raw .ds-table { table-layout: auto; }
.app-raw .ds-table td { vertical-align: top; word-break: break-word; }
.app-raw p { font-size: 12px; color: var(--text-muted); margin: var(--space-2) 0; }
.app-raw a { overflow-wrap: anywhere; }

/* field/flag state chips */
.app-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.app-chip--ok, .app-chip--detected { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.app-chip--proxy, .app-chip--unknown { background: #fff8e1; color: #7a5c00; border: 1px solid #ffd54f; }
.app-chip--not_detected { background: #fdecea; color: #b3261e; border: 1px solid #f2b8b5; }
.app-chip--null { background: var(--gray-light); color: var(--text-muted); border: 1px solid var(--border); }

/* -- file input ---------------------------------------------------------------------*/
.app-file { padding: 9px 12px; }
.app-file::file-selector-button {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  margin-right: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.app-file::file-selector-button:hover { border-color: var(--blue); color: var(--blue); }

/* -- settings page ------------------------------------------------------------------*/
.app-cfg-input { padding: 6px 10px; font-size: 13px; max-width: 180px; }
.app-cfg-changed { border-color: var(--blue) !important; background: var(--blue-light) !important; }

/* -- auth gate ---------------------------------------------------------------------*/
.app-auth { display: grid; place-items: center; min-height: 40vh; }
.app-auth__box { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.app-auth__note { text-align: center; }

/* -- error callout -----------------------------------------------------------------*/
.app-callout-error { background: #fdecea; border: 1.5px solid #f2b8b5; color: #b3261e; }
.app-callout-error svg { color: var(--red); flex-shrink: 0; }

/* -- responsive nav/hero tweaks ------------------------------------------------------*/
@media (max-width: 640px) {
  .ds-nav { padding: 0 var(--space-5); }
  .ds-hero { padding: 44px var(--space-5) 40px; }
  .ds-hero h1 { font-size: 34px; }
  .ds-page { padding: 28px var(--space-5) 64px; }
}