/* =====================================================================
   Demo styles - EA Document Checker (prefix ead-)
   CDE chrome + submission pack table + review panel.
   Builds on tokens in main.css. Accent: EA slate-blue.
   ===================================================================== */

.ead-app { display: flex; flex-direction: column; min-height: 100%; }

.ead-cde {
  --ead-accent: #275D8C;
  --ead-accent-2: #1C4568;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  background: var(--bg, #fff);
  box-shadow: var(--sh-1);
}

/* ---- CDE chrome ---------------------------------------------------- */
.ead-top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--ead-accent), var(--ead-accent-2));
  color: #fff;
}
.ead-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ead-logo { display: flex; align-items: center; }
.ead-brandtx { font-size: 14px; letter-spacing: .01em; }
.ead-topsearch {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.14);
  border-radius: 8px; padding: 6px 12px; min-width: 180px;
}
.ead-proj { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.9); margin-left: auto; }
.ead-proj span { color: rgba(255,255,255,.65); }
.ead-tools { display: flex; align-items: center; gap: 10px; }
.ead-ic { display: flex; opacity: .8; }
.ead-ava {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
}
.ead-tabs {
  display: flex; gap: 2px; padding: 0 12px;
  background: var(--bg-sunken); border-bottom: 1px solid var(--line);
}
.ead-tab {
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  padding: 10px 14px; border-bottom: 2px solid transparent; cursor: default;
}
.ead-tab.active { color: var(--ead-accent); border-bottom-color: var(--ead-accent); }

.ead-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

/* ---- submission pack ------------------------------------------------ */
.ead-pack { border: 1px solid var(--line); border-radius: var(--r-md, 10px); overflow: hidden; }
.ead-pack-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
  flex-wrap: wrap;
}
.ead-pack-title h3 { margin: 0; font-size: 15px; }
.ead-pack-sub { font-size: 12px; color: var(--text-2); }
.ead-check-sp { display: flex; }

.ead-tablewrap { overflow-x: auto; }
.ead-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ead-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  background: var(--bg-sunken); white-space: nowrap;
}
.ead-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ead-table tr:last-child td { border-bottom: none; }
.ead-c-ic { width: 26px; color: var(--text-3); }
.ead-c-num { white-space: nowrap; }
.ead-c-rev { white-space: nowrap; }
.ead-c-dim { color: var(--text-2); }
.ead-c-verd { white-space: nowrap; }

.ead-doclink {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-weight: 600; color: var(--ead-accent, #275D8C);
  background: none; border: none; padding: 0; cursor: pointer;
}
.ead-doclink:hover { text-decoration: underline; }

.ead-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.ead-badge.ok   { color: var(--ok, #1F9D6B); background: rgba(31,157,107,.12); }
.ead-badge.info { color: #275D8C; background: rgba(39,93,140,.12); }
.ead-badge.bad  { color: var(--err, #C2495F); background: rgba(194,73,95,.12); }

.ead-verd { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; }
.ead-verd.ok  { color: var(--ok, #1F9D6B); }
.ead-verd.fix { color: var(--warn, #C98A14); }
.ead-verd.idle { color: var(--text-3); }

/* ---- review panel --------------------------------------------------- */
.ead-panel { border: 1px solid var(--line); border-radius: var(--r-md, 10px); overflow: hidden; box-shadow: var(--sh-1); }
.ead-pn-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}
.ead-pn-orb {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #275D8C, #1C4568);
}
.ead-pn-id { min-width: 0; }
.ead-pn-name { font-size: 13.5px; font-weight: 700; }
.ead-pn-sub { font-size: 11.5px; color: var(--text-2); }
.ead-pn-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-2); background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.ead-pn-tag.live { color: #1F9D6B; border-color: rgba(31,157,107,.4); background: rgba(31,157,107,.08); }
.ead-pn-x {
  display: flex; border: none; background: none; color: var(--text-3);
  cursor: pointer; padding: 4px; border-radius: 6px;
}
.ead-pn-tag + .ead-pn-x { margin-left: 4px; }
.ead-pn-x:hover { background: var(--bg-sunken); color: var(--text); }
.ead-pn-body { padding: 16px; }

/* uploaded-file chips (real reviews list every filename) */
.ead-files {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg, #fff);
}
.ead-file-chip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; background: var(--bg-sunken);
}
.ead-file-chip svg { flex: none; color: #275D8C; }
.ead-file-chip > span { overflow-wrap: anywhere; }
button.ead-file-chip.more {
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  color: #275D8C; background: rgba(39,93,140,.07); border-color: rgba(39,93,140,.35);
}
button.ead-file-chip.more:hover { background: rgba(39,93,140,.12); }

/* loader */
.ead-reading-t { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.ead-cklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ead-ck { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-3); }
.ead-ck.active { color: var(--text); font-weight: 600; }
.ead-ck.done { color: var(--text-2); }
.ead-ck-mark.ok { display: flex; color: var(--ok, #1F9D6B); }
.ead-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; margin: 0 3px; }
.ead-spin {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: #275D8C;
  animation: ead-spin .7s linear infinite;
}
@keyframes ead-spin { to { transform: rotate(360deg); } }

/* report */
.ead-tally { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ead-tally-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 12px;
}
.ead-tally-chip.ok   { color: #12704A; background: rgba(31,157,107,.12); }
.ead-tally-chip.warn { color: #8A5E0B; background: rgba(201,138,20,.14); }
.ead-tally-n { font-size: 12px; color: var(--text-2); }
.ead-tally-n b { color: var(--text); }
.ead-summary { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0 0 14px; }

.ead-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ead-doc { border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 11px 12px; background: var(--bg, #fff); }
.ead-doc.fix { border-color: rgba(201,138,20,.45); background: rgba(201,138,20,.04); }
.ead-doc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.ead-doc-verd { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ead-doc-verd.ok   { color: var(--ok, #1F9D6B); }
.ead-doc-verd.warn { color: var(--warn, #C98A14); }
.ead-doc-title { font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.ead-issues { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ead-issues li { display: flex; gap: 7px; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.ead-issues li svg { flex: none; margin-top: 2px; color: var(--warn, #C98A14); }

.ead-missing {
  border: 1px solid rgba(194,73,95,.4); border-radius: var(--r-sm, 8px);
  background: rgba(194,73,95,.05); padding: 11px 12px; margin-bottom: 14px;
}
.ead-missing-t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--err, #C2495F); margin-bottom: 6px; }
.ead-missing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ead-missing li { display: flex; gap: 8px; align-items: baseline; font-size: 12px; flex-wrap: wrap; }
.ead-missing li span { color: var(--text-2); }

.ead-note { display: flex; gap: 7px; font-size: 11.5px; color: var(--text-3); margin: 0 0 14px; }
.ead-note svg { flex: none; margin-top: 1px; }

.ead-pn-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Buttons declare their own accent tokens so they resolve wherever they
   mount (incl. modal footers rendered on <body>, outside .ead-cde). */
.ead-btn {
  --ead-accent: #275D8C;
  --ead-accent-2: #1C4568;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  border-radius: 9px; padding: 9px 15px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg, #fff); color: var(--text);
  transition: background .12s ease, box-shadow .12s ease;
}
.ead-btn.primary {
  color: #fff; border: none;
  background: linear-gradient(135deg, var(--ead-accent), var(--ead-accent-2));
  box-shadow: 0 6px 16px -6px rgba(39,93,140,.55);
}
.ead-btn.primary:hover { filter: brightness(1.06); }
.ead-btn.ghost:hover { background: var(--bg-sunken); }

/* ---- upload chooser (modal on <body>, outside .ead-cde) ------------- */
.ead-drop {
  position: relative; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 12px;
  padding: 26px 16px 20px; background: var(--bg-sunken);
  transition: border-color .12s ease, background .12s ease;
}
.ead-drop:hover, .ead-drop.drag { border-color: #275D8C; background: rgba(39,93,140,.05); }
.ead-file-input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ead-drop-cloud { color: #275D8C; margin-bottom: 6px; display: flex; justify-content: center; }
.ead-drop-t { font-size: 14px; font-weight: 700; }
.ead-drop-s { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.ead-drop-link { color: #275D8C; font-weight: 600; text-decoration: underline; }
.ead-drop-types { font-size: 11px; color: var(--text-3); margin-top: 8px; }
.ead-or {
  display: flex; align-items: center; gap: 10px; margin: 12px 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
}
.ead-or::before, .ead-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ead-sample-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg, #fff); padding: 11px 13px;
  transition: border-color .12s ease, background .12s ease;
}
.ead-sample-btn:hover { border-color: #275D8C; background: rgba(39,93,140,.04); }
.ead-sample-ic {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #275D8C, #1C4568);
}
.ead-sample-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ead-sample-tx b { font-size: 13px; }
.ead-sample-tx span { font-size: 11.5px; color: var(--text-2); }
.ead-sample-go { margin-left: auto; color: var(--text-3); display: flex; }
.ead-drop-hint { display: flex; gap: 7px; font-size: 11.5px; color: var(--text-3); margin: 12px 0 0; }
.ead-drop-hint svg { flex: none; margin-top: 1px; }

/* ---- honest failure state ------------------------------------------- */
.ead-fail { text-align: center; padding: 8px 4px 2px; }
.ead-fail-ic {
  width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--warn, #C98A14); background: rgba(201,138,20,.12);
}
.ead-fail-t { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ead-fail-s { font-size: 12.5px; color: var(--text-2); max-width: 420px; margin: 0 auto 14px; line-height: 1.55; }
.ead-fail .ead-pn-actions { justify-content: center; }

.ead-doc-id { font-size: 12px; font-weight: 700; word-break: break-all; }

/* ---- metadata review & accept --------------------------------------- */
.ead-meta-cta { margin-top: 8px; }
.ead-btn.sm { font-size: 12px; padding: 6px 11px; border-radius: 8px; gap: 5px; }
.ead-meta {
  margin-top: 9px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  background: var(--bg-sunken);
  display: flex; flex-direction: column; gap: 7px;
}
.ead-meta-t {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #275D8C;
}
.ead-meta-f { display: flex; flex-direction: column; gap: 3px; }
.ead-meta-f > span { font-size: 11px; font-weight: 700; color: var(--text-2); }
.ead-meta-f > span em {
  font-style: normal; font-weight: 700; color: var(--warn, #C98A14);
}
.ead-meta-f input {
  font: inherit; font-size: 12.5px; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 6px 9px; background: var(--bg, #fff); width: 100%;
}
.ead-meta-f input:focus-visible { outline: 2px solid #275D8C; outline-offset: 1px; }
.ead-meta-f.bad input { border-color: rgba(201,138,20,.7); background: rgba(201,138,20,.06); }
.ead-meta-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 2px; }
.ead-meta.done { gap: 4px; }
.ead-meta-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.ead-meta-line span { color: var(--text-3); flex: none; }
.ead-meta-line b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ead-meta.done .ead-btn { align-self: flex-end; margin-top: 4px; }
.ead-acc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #12704A; background: rgba(31,157,107,.12);
  border-radius: 999px; padding: 2px 8px;
}
.ead-doc.accepted { border-color: rgba(31,157,107,.45); }

/* ---- mobile --------------------------------------------------------- */
/* ---- pack-head actions (sample check + own upload) ------------------ */
.ead-pack-actions { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.ead-upload-btn { border: 1px solid var(--line-strong); }

/* ---- upload modal ---------------------------------------------------- */
.ead-drop {
  border: 2px dashed var(--line-strong); border-radius: 12px;
  padding: 28px 20px 24px; text-align: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ead-drop:hover, .ead-drop:focus-visible { background: rgba(39,93,140,.06); border-color: #275D8C; outline: none; }
.ead-drop.drag { background: rgba(39,93,140,.06); border-color: #275D8C; }
.ead-file-input { display: none; }
.ead-drop-cloud { color: #275D8C; margin-bottom: 10px; line-height: 0; }
.ead-drop-cloud svg { display: inline-block; }
.ead-drop-t { font-size: 17px; font-weight: 700; color: var(--text); }
.ead-drop-s { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.ead-drop-link { color: #1C4568; font-weight: 600; text-decoration: underline; }
.ead-drop-types { font-size: 11.5px; color: var(--text-3); margin-top: 10px; letter-spacing: .02em; }
.ead-drop-hint {
  display: flex; align-items: flex-start; gap: 7px; margin: 16px 0 0;
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
}
.ead-drop-hint .ico { color: #275D8C; flex: none; margin-top: 1px; }
.ead-drop-hint b { color: var(--text-2); }

/* ---- real-upload extras ---------------------------------------------- */
.ead-samplenote {
  display: flex; align-items: center; gap: 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md, 10px);
  padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-3);
}
.ead-samplenote .ico { color: #275D8C; flex: none; }
.ead-samplenote span { flex: 1; min-width: 0; }
.ead-samplenote b { color: var(--text-2); overflow-wrap: anywhere; }
.ead-samplenote .ead-btn { flex: none; border: 1px solid var(--line-strong); }

.ead-doc-id {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 600;
  color: var(--text-2); overflow-wrap: anywhere;
}
.ead-fail { text-align: center; padding: 26px 18px 18px; }
.ead-fail-ic { color: var(--warn, #B45309); margin-bottom: 8px; line-height: 0; }
.ead-fail-ic svg { display: inline-block; }
.ead-fail-t { font-size: 16px; font-weight: 700; color: var(--text); }
.ead-fail p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 8px auto 14px; max-width: 420px; }
.ead-fail .ead-pn-actions { justify-content: center; }

@media (max-width: 720px) {
  .ead-topsearch { display: none; }
  .ead-proj span { display: none; }
  .ead-pack-head { flex-direction: column; align-items: stretch; }
  .ead-pack-actions { flex-direction: column; align-items: stretch; }
  .ead-check-btn, .ead-upload-btn { justify-content: center; }
  .ead-docs { grid-template-columns: 1fr; }
}

/* ---- embedded file properties (the hidden File > Properties layer) ---- */
.ead-propissues li svg { color: var(--brand, #C2495F); }
.ead-propissues li b { font-weight: 800; }
.ead-props {
  margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line, #E3E7EE);
  border-radius: 10px; background: var(--bg-2, #F7F8FB);
  display: flex; flex-direction: column; gap: 10px;
}
.ead-props-t {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; font-weight: 800; color: var(--text-1);
}
.ead-props-sub { font-weight: 500; color: var(--text-3); }
.ead-prop-row { display: flex; flex-direction: column; gap: 5px; }
.ead-prop-file {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
}
.ead-prop-file svg { flex: none; color: var(--text-3); }
.ead-prop-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.ead-prop-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px; border: 1px solid var(--line, #E3E7EE); border-radius: 999px;
  background: var(--bg-1, #fff); font-size: 11px; line-height: 1.4;
}
.ead-prop-chip span { color: var(--text-3); }
.ead-prop-chip b { color: var(--text-1); font-weight: 700; }
.ead-prop-none { font-size: 11px; color: var(--text-3); font-style: italic; }