/* Mission MOUs: proposal gate in the mission form, country chips, and the MOU signing desk. */

/* Countries added one at a time */
.mission-countries { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.mission-countries:empty { display:none; }
.mission-country-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 10px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface-card-2); font-size:12px; color:var(--ink); }
.mission-country-chip.primary { border-color:color-mix(in srgb, var(--cyan) 55%, transparent); }
.mission-country-chip small { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.mission-country-chip button { width:20px; height:20px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--surface-hover); color:var(--ink); cursor:pointer; font-size:13px; line-height:1; }
.mission-country-add { display:flex; gap:6px; }
.mission-country-add select { flex:1; min-width:0; }

/* Gate */
.mou-gate { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 14px; padding:11px 12px; border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius:10px; background:color-mix(in srgb, var(--gold) 7%, transparent); }
.mou-gate[hidden] { display:none; }
.mou-gate-text { flex:1 1 220px; display:grid; gap:2px; font-size:12px; color:var(--muted); line-height:1.45; }
.mou-gate-text strong { color:var(--ink-strong); font-size:13px; }
.mou-gate-meter { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.mou-pips { display:flex; gap:3px; }
.mou-pips i { width:10px; height:10px; border-radius:3px; border:1px solid var(--line-strong); }
.mou-pips i.on { background:var(--green); border-color:var(--green); }
.mou-super { padding:2px 7px; border-radius:999px; border:1px solid var(--line-strong); }
.mou-super.on { color:var(--bg); background:var(--gold); border-color:var(--gold); font-weight:700; }

/* Desk */
.mou-desk-backdrop { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:14px; background:rgba(1,8,13,.82); backdrop-filter:blur(8px); }
.mou-desk { width:min(1280px,100%); height:min(860px,calc(100vh - 28px)); display:flex; flex-direction:column; background:var(--modal-bg); border:1px solid var(--line-strong); border-radius:20px; box-shadow:0 30px 100px rgba(0,0,0,.55); overflow:hidden; }
.mou-desk-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.mou-desk-head h2 { margin:2px 0 0; font-size:20px; }
.mou-desk-body { flex:1; min-height:0; display:grid; grid-template-columns:250px minmax(0,1fr) 290px; }
.mou-desk-error { margin:0; padding:0 20px; color:var(--danger); font-size:12px; min-height:0; }
.mou-desk-error:not(:empty) { padding:10px 20px; border-top:1px solid var(--line); }
.mou-side, .mou-tray { overflow:auto; padding:14px; }
.mou-side { border-right:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.mou-tray { border-left:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.mou-list { display:grid; gap:6px; }
.mou-item { display:grid; gap:4px; text-align:left; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-card); color:var(--ink); cursor:pointer; font:inherit; }
.mou-item:hover { background:var(--surface-hover); }
.mou-item.active { border-color:var(--cyan); background:color-mix(in srgb, var(--cyan) 9%, transparent); }
.mou-item strong { font-size:13px; }
.mou-item small { color:var(--dim); font-size:10px; font-family:var(--font-mono); }
.mou-item-top { display:flex; justify-content:space-between; gap:6px; }
.mou-kind, .mou-status { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.mou-kind { color:var(--cyan); }
.mou-kind.super { color:var(--gold); }
.mou-status.s-none { color:var(--muted); }
.mou-status.s-half { color:var(--coral); }
.mou-status.s-done { color:var(--green); }
.mou-empty { color:var(--muted); font-size:13px; padding:20px; }
.mou-generate { border:1px dashed var(--line-strong); border-radius:10px; }
.mou-generate summary { padding:10px; cursor:pointer; font-size:13px; font-weight:700; }
.mou-generate-body { display:grid; gap:10px; padding:0 10px 12px; }
.mou-gen-note { margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.mou-gen-error { margin:0; color:var(--danger); font-size:12px; }
.mou-gen-error:empty { display:none; }
.mou-tabs { display:flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:9px; background:var(--surface-input); }
.mou-tabs button { flex:1; padding:6px 8px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-weight:600; font-size:12px; font-family:inherit; cursor:pointer; }
.mou-tabs button.active { background:var(--surface-hover); color:var(--ink-strong); }
.mou-field { display:grid; gap:5px; font-size:12px; color:var(--muted); }
.mou-field input { width:100%; padding:9px 10px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-input); color:var(--ink); font:inherit; font-size:13px; }

/* Signature creator */
.mou-tray-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.mou-tray-head .mou-tabs { flex:0 0 auto; }
.mou-pad-wrap { position:relative; height:150px; border-radius:10px; background:#fbfaf6; border:1px solid var(--line-strong); overflow:hidden; }
.mou-pad-wrap::after { content:""; position:absolute; left:14px; right:14px; bottom:34px; border-bottom:1.5px solid #c9c3b3; pointer-events:none; }
.mou-pad { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; z-index:1; }
.mou-pad-hint { position:absolute; left:14px; bottom:12px; font-size:10px; color:#9b9584; text-transform:uppercase; letter-spacing:.08em; }
.mou-type-preview { position:absolute; left:14px; right:14px; bottom:34px; font:600 38px/1.2 "Dancing Script", "Brush Script MT", cursive; color:#16233f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mou-tray-actions { display:flex; justify-content:space-between; gap:8px; }
.mou-sig-shelf { display:grid; gap:8px; }
.mou-sig-shelf p { margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.mou-sig-card { position:relative; display:grid; gap:2px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:10px; background:#fbfaf6; cursor:grab; touch-action:none; user-select:none; box-shadow:0 2px 0 rgba(0,0,0,.15); transition:transform .12s; }
.mou-sig-card:hover { transform:translateY(-1px); }
.mou-sig-card img { height:54px; max-width:100%; object-fit:contain; object-position:left center; pointer-events:none; }
.mou-sig-card span { font-size:11px; color:#5b5647; }
.mou-sig-card.dragging { opacity:.35; }
.mou-sig-card-x { position:absolute; top:4px; right:4px; width:20px; height:20px; border:0; border-radius:50%; background:rgba(0,0,0,.08); color:#5b5647; cursor:pointer; }
.mou-ghost { position:fixed; z-index:200; margin:0; pointer-events:none; cursor:grabbing; transform:rotate(-2deg) scale(1.03); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.mou-ghost .mou-sig-card-x { display:none; }

/* The document */
.mou-doc-scroll { overflow:auto; padding:22px; background:color-mix(in srgb, var(--bg-deep) 60%, transparent); }
.mou-paper { position:relative; max-width:760px; margin:0 auto; padding:54px 60px 36px; background:#fdfcf8; color:#24262b; border-radius:4px; box-shadow:0 12px 40px rgba(0,0,0,.35); font:15px/1.65 "Source Serif 4", Georgia, serif; overflow:hidden; }
.mou-paper.is-super { border-top:6px solid #b8913a; }
.mou-watermark { position:absolute; top:38%; left:50%; transform:translate(-50%,-50%) rotate(-28deg); font:800 120px/1 var(--font-display); letter-spacing:.08em; color:rgba(30,40,60,.045); pointer-events:none; white-space:nowrap; }
.mou-paper-head { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid #ddd8ca; }
.mou-paper-head img { width:36px; height:36px; object-fit:contain; }
.mou-paper-head div { flex:1; display:flex; justify-content:space-between; gap:12px; font:600 11px var(--font-mono); color:#6b6758; text-transform:uppercase; letter-spacing:.06em; }
.mou-paper h3 { margin:28px 0 4px; text-align:center; font:600 24px/1.2 "Source Serif 4", Georgia, serif; letter-spacing:.06em; text-transform:uppercase; color:#1a1d24; }
.mou-subtitle { margin:0; text-align:center; font-style:italic; color:#6b6758; }
.mou-parties { margin:22px 0 10px; text-align:center; }
.mou-party-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.mou-party-grid div { display:grid; gap:1px; padding:12px 14px; border:1px solid #e3decf; border-radius:4px; background:#f8f5ec; }
.mou-party-grid small { font:700 10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:#8a8473; }
.mou-party-grid span { font-size:13px; color:#6b6758; }
.mou-paper section h4 { margin:20px 0 6px; font:700 13px var(--font-display); letter-spacing:.04em; text-transform:uppercase; color:#1a1d24; }
.mou-paper p { margin:0 0 8px; }
.mou-paper ol { margin:0 0 8px; padding-left:24px; }
.mou-paper li { margin-bottom:4px; }
.mou-sign-section { margin-top:28px; padding-top:6px; border-top:1px solid #ddd8ca; }
.mou-sig-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:16px; }
.mou-sig-block { display:grid; gap:6px; padding:10px; border:2px dashed transparent; border-radius:8px; transition:border-color .15s, background .15s; }
.mou-desk.is-dragging .mou-sig-block[data-sig-drop], .is-dragging .mou-sig-block[data-sig-drop] { border-color:#9fc9cf; background:rgba(43,189,197,.06); }
.mou-sig-block.over { border-color:#2bbdc5 !important; background:rgba(43,189,197,.14) !important; }
.mou-sig-block.placing { border-color:#d9a441; border-style:solid; background:rgba(217,164,65,.08); }
.mou-sig-line { height:72px; display:flex; align-items:flex-end; border-bottom:1.5px solid #3a3d44; }
.mou-sig-line img { max-height:68px; max-width:100%; object-fit:contain; object-position:left bottom; }
.mou-sig-line span { width:100%; padding-bottom:8px; text-align:center; font:600 11px var(--font-mono); color:#9a9483; text-transform:uppercase; letter-spacing:.08em; }
.mou-sig-meta { display:grid; font-size:12px; line-height:1.5; color:#5b5647; }
.mou-sig-meta strong { font-size:14px; color:#1a1d24; }
.mou-sig-block.signed .mou-sig-meta strong::after { content:" ✓"; color:#2f8f57; }
.mou-place-actions { display:flex; gap:6px; justify-content:flex-end; }
.mou-place-note { margin:0 !important; font-size:11px; color:#8a6a2a; text-align:right; }
.mou-paper-foot { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:30px; padding-top:12px; border-top:1px solid #ddd8ca; font:500 10px var(--font-mono); color:#8a8473; text-transform:uppercase; letter-spacing:.05em; }

@media (max-width:1020px) {
  .mou-desk-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; overflow:auto; }
  .mou-side { border-right:0; border-bottom:1px solid var(--line); flex-direction:column; }
  .mou-list { grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); overflow-x:auto; }
  .mou-tray { border-left:0; border-top:1px solid var(--line); }
  .mou-doc-scroll { overflow:visible; }
}
@media (max-width:640px) {
  .mou-paper { padding:32px 22px 24px; font-size:14px; }
  .mou-sig-grid, .mou-party-grid { grid-template-columns:1fr; }
  .mou-watermark { font-size:70px; }
}