/* 海外案件ページ専用。色と余白の基準は dash.css の変数をそのまま使う。 */

.lead {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 14px;
}

.lead.is-open { border-color: var(--navy); }

.lead > .lead-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
}

.lead > .lead-head:hover { background: var(--surface-2); }

.lead .fit {
  flex: 0 0 46px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--navy);
}

.lead .fit u { display: block; font-size: 9px; font-weight: 400; color: var(--ink-3); text-decoration: none; letter-spacing: .1em; }
.lead .fit.is-low { color: var(--ink-3); }

.lead .lead-main { flex: 1 1 auto; min-width: 0; }

.lead h3 {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.45;
}

.lead .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

.lead .facts b { color: var(--ink); font-weight: 700; }
.lead .facts .warn { color: var(--warn); }
.lead .facts .crit { color: var(--crit); }

.lead .lead-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }

.lead .body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.lead .body[hidden] { display: none; }

.req {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px 18px;
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 3px;
  font-size: 13px;
}

.req div { display: flex; gap: 8px; }
.req dt { flex: 0 0 84px; color: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding-top: 4px; }
.req dd { margin: 0; flex: 1 1 auto; }

.why { margin: 10px 0; font-size: 13px; color: var(--ink-2); }
.why b { color: var(--ok); }
.why .flag { color: var(--warn); }

.desc {
  max-height: 210px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 13px;
  white-space: pre-wrap;
  color: var(--ink-2);
}

.apply { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-hard); }
.apply h4 { margin: 0 0 4px; font-size: 13px; }
.apply p.hint { margin: 0 0 10px; font-size: 12px; color: var(--ink-3); }

.apply textarea {
  width: 100%;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid var(--line-hard);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--jp);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}

.apply .row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.apply .ai-note { font-size: 12px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }

.preview {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--navy-soft);
  border-radius: 3px;
  font-size: 12.5px;
  white-space: pre-wrap;
  line-height: 1.65;
}

button.primary {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  border-radius: 3px;
  padding: 7px 16px;
  font-family: var(--jp);
  font-size: 13px;
  cursor: pointer;
}

button.ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-hard);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

button.ghost:hover { color: var(--crit); border-color: var(--crit); }
button.primary:disabled, button.ghost:disabled { opacity: .5; cursor: default; }

.state {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

.state.queued { background: var(--navy-soft); color: var(--navy); }
.state.sent { background: #e3f2ea; color: var(--ok); }
.state.failed { background: #fdeceb; color: var(--crit); }

@media (prefers-color-scheme: dark) {
  .state.sent { background: #16301f; }
  .state.failed { background: #33191a; }
}

.src-line { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 3px 0; }
.src-line .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.src-line .dot.ok { background: var(--ok); }
.src-line .dot.ng { background: var(--crit); }
.src-line small { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }