/*
Theme Name: Export Compliance Desk
Theme URI: https://humanintel.eu
Author: Human Intel
Author URI: https://humanintel.eu
Description: A single-purpose WordPress theme: the whole site is the Export Compliance Desk — a customer-facing case desk for Rules & Regulations, Classification, Compliance, Conformity, Transport and Customs records on EU-to-Central-Asia-and-Caucasus shipments (Human Intel export guide). Staff log in and manage every case; each customer logs in and sees only their own case, can tick off checklist items and upload supporting documents as proof, plus a note box. Colors and type match exportguide.eu. Every page on the site (home, any URL) shows this app — there are no separate pages to build.
Version: 2.1.2
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: export-corridor-desk
*/

html, body {
  margin: 0;
  padding: 0;
  background: #F7F1E8;
  min-height: 100%;
}

/* Export Compliance Desk — scoped styles, matching the exportguide.eu brand
   system (colors, fonts, and its signature two-corner-rounded / flat-offset-
   shadow card shape) as closely as a functional app reasonably can. */

#ecd-root{
  /* ---- core palette, taken directly from the exportguide.eu brand kit ---- */
  --forest:#163D3A; --teal-dark:#245B54; --teal-mid:#2F7569;
  --coral:#E76F51; --coral-soft:#F0B49E; --coral-tint:#FBE3D8;
  --gold:#E9B949; --gold-light:#F9D98C; --gold-pale:#FFD782;
  --orange:#EF8A2E; --orange-dark:#D8721A;
  --mint:#D8F3DC;
  --cream:#F7F1E8; --ivory:#FFF8EB; --pale-cream:#FFFAF2;
  --charcoal:#26352F; --muted-green:#43534D; --grey-green:#6E7B76;
  --beige-border:#EADFD2; --beige-border-light:#E4D5C5; --beige-shadow:#DECDB9;

  --bg:var(--cream); --surface:var(--ivory); --surface-2:var(--pale-cream);
  --border:var(--beige-border); --border-soft:var(--beige-border-light);
  --text:var(--charcoal); --text-muted:var(--muted-green); --text-faint:var(--grey-green);
  --brand:var(--teal-dark); --brand-strong:var(--forest); --brand-tint:#E3EEEC; --on-brand:#FFFFFF;
  --header-grad:linear-gradient(115deg, var(--forest) 0%, var(--teal-dark) 64%, var(--teal-mid) 100%);
  --header-fg:#FFFFFF;
  --good:var(--teal-dark); --good-tint:var(--mint);
  --critical:#A83A34; --critical-tint:#FBE7E5;
  --hold:#5B4E9E; --hold-tint:#ECE8F7;
  --shadow-flat:6px 6px 0 0 var(--beige-shadow);
  --shadow-flat-coral:6px 6px 0 0 var(--coral);
  --shadow-flat-gold:6px 6px 0 0 var(--gold);
  --shadow-sm:0 1px 2px rgba(22,61,58,.08);
  --shadow-md:0 6px 20px rgba(22,61,58,.10);
  --radius:8px 32px; --radius-lg:10px 48px; --radius-sm:4px;
  --font-display:'Hanken Grotesk',Arial,sans-serif;
  --font-body:'IBM Plex Sans',Calibri,Arial,sans-serif;
  --font-mono:var(--font-body);

  background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.5;
  font-size:16px; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
@media (prefers-color-scheme: dark){
  #ecd-root.ecd-auto-theme{
    --bg:#0A1615; --surface:#0F201E; --surface-2:#143330;
    --border:#254B46; --border-soft:#1D3E3A;
    --text:#E7F3F0; --text-muted:#A6BDB7; --text-faint:#6E8983;
    --brand:#4FD3B8; --brand-strong:#7DE4CE; --brand-tint:#153B36; --on-brand:#02201D;
    --header-fg:#EAFBF6;
    --gold:#E2B662; --gold-light:#F0C878;
    --good:#6FCB9C; --good-tint:#0F3323;
    --critical:#E58E86; --critical-tint:#3A1815;
    --hold:#B4A6F2; --hold-tint:#241E3E;
    --beige-shadow:#1D3E3A;
  }
}

#ecd-root *,#ecd-root *::before,#ecd-root *::after{box-sizing:border-box}
#ecd-root h1,#ecd-root h2,#ecd-root h3,#ecd-root h4{font-family:var(--font-display);font-weight:650;color:var(--text);margin:0}
#ecd-root p{margin:0}
#ecd-root button,#ecd-root input,#ecd-root select,#ecd-root textarea{font-family:inherit;color:inherit;font-size:1rem}
#ecd-root a{color:var(--brand-strong)}
#ecd-root .mono{font-family:var(--font-mono)}
#ecd-root .wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
@media (max-width:520px){#ecd-root .wrap{padding-inline:16px}}

#ecd-root header.topbar{background:var(--header-grad);color:var(--header-fg);box-shadow:var(--shadow-sm);border-radius:8px 32px 0 0}
#ecd-root .topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;flex-wrap:wrap}
#ecd-root .brandmark{display:flex;align-items:center;gap:10px}
#ecd-root .brandmark .mark{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14);color:var(--header-fg);display:flex;align-items:center;justify-content:center;flex:none}
#ecd-root .brandmark .mark svg{width:19px;height:19px}
#ecd-root .brandmark h1{font-size:1.05rem;color:var(--header-fg);letter-spacing:.01em}
#ecd-root .brandmark .sub{font-size:.72rem;color:var(--gold-pale);letter-spacing:.04em;text-transform:uppercase;margin-top:1px;font-weight:600}

/* Viewer badge (role + sign out) — no plain-text account name printed here;
   it used to show the WordPress user's raw display name (e.g. literally
   "admin" on a stock install), which this theme has no control over and
   which looked inconsistent for different accounts. The role tag carries
   the name as a hover tooltip instead, so the header looks identical for
   every account. Built as two matching pill-shaped buttons: Sign out gets
   the coral brand accent (the site's one CTA color, used nowhere else in
   the header) so it's immediately readable as the one clickable action,
   while the role tag stays a neutral/informational pill. Wraps onto its
   own row under the brandmark on narrow screens instead of squeezing
   everything into one line. */
#ecd-root .viewer-badge{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.9);flex-wrap:wrap;justify-content:flex-end}
#ecd-root .viewer-badge .role-tag{display:inline-flex;align-items:center;font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(255,255,255,.16);color:var(--header-fg);padding:5px 11px;border-radius:999px;cursor:default}
#ecd-root .viewer-badge .signout-btn{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:var(--coral);padding:6px 13px;border-radius:999px;text-decoration:none;transition:background .15s ease;flex:none}
#ecd-root .viewer-badge .signout-btn:hover,#ecd-root .viewer-badge .signout-btn:focus-visible{background:#d65d40}
#ecd-root .viewer-badge .signout-btn svg{width:13px;height:13px;flex:none}
/* Staff-only, so deliberately quieter than Sign out (outline, not filled) —
   it's a secondary "also useful" link, not the primary action in this
   cluster. See the comment above dashboardBtn in ecd-app.js for why it
   exists at all. Also reused, unchanged, by the Contact button (a <button>
   rather than an <a>, hence the appearance/cursor/font resets below) since
   both are secondary header actions that should look identical. */
#ecd-root .viewer-badge .dashboard-btn{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.5);padding:5px 12px;border-radius:999px;text-decoration:none;transition:background .15s ease,border-color .15s ease;flex:none;appearance:none;cursor:pointer;font-family:inherit}
#ecd-root .viewer-badge .dashboard-btn:hover,#ecd-root .viewer-badge .dashboard-btn:focus-visible{background:rgba(255,255,255,.12);border-color:#fff}
#ecd-root .viewer-badge .dashboard-btn svg{width:13px;height:13px;flex:none}
/* The manual link — filled solid orange (unlike the outlined Dashboard/
   Contact/Help buttons) so it stands out as the one button in this cluster
   that opens something outside the app itself, right where it's first
   noticed: next to the Staff/Client tag, before Help. */
#ecd-root .viewer-badge .manual-btn{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:var(--orange);padding:6px 13px;border-radius:999px;text-decoration:none;transition:background .15s ease;flex:none}
#ecd-root .viewer-badge .manual-btn:hover,#ecd-root .viewer-badge .manual-btn:focus-visible{background:var(--orange-dark)}
#ecd-root .viewer-badge .manual-btn svg{width:13px;height:13px;flex:none}
@media (max-width:600px){
  #ecd-root .topbar-inner{justify-content:center;text-align:center}
  #ecd-root .viewer-badge{width:100%;justify-content:center;padding-top:2px}
}

#ecd-root nav.tabs{background:var(--bg);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
#ecd-root nav.tabs::-webkit-scrollbar{display:none}
#ecd-root .tabs-inner{display:flex;gap:6px;padding-inline:20px;padding-block:10px;min-width:max-content}
#ecd-root .tab-btn{appearance:none;border:none;background:none;padding:9px 14px;font-size:.86rem;font-weight:650;font-family:var(--font-display);color:var(--text-muted);cursor:pointer;white-space:nowrap;border-radius:var(--radius-sm)}
#ecd-root .tab-btn:hover{color:var(--text);background:var(--surface-2)}
#ecd-root .tab-btn.active{color:#fff;background:var(--coral)}
#ecd-root .tab-btn .tab-num{font-family:var(--font-body);font-size:.72rem;color:var(--text-faint);margin-right:6px}
#ecd-root .tab-btn.active .tab-num{color:rgba(255,255,255,.8)}

#ecd-root main{padding-block:26px 60px;background:var(--bg);border-radius:0 0 var(--radius-sm) var(--radius-sm)}
#ecd-root .app-shell{border:1px solid var(--border);border-radius:8px 32px;overflow:hidden;box-shadow:var(--shadow-sm)}

/* Small-print legal disclaimer — deliberately quiet (small, muted, no
   background) since it's boilerplate on every screen, not something that
   should compete for attention with the actual case content above it. */
#ecd-root footer.ecd-disclaimer{padding-block:16px 28px}
#ecd-root footer.ecd-disclaimer p{font-size:.72rem;line-height:1.5;color:var(--text-faint);max-width:760px}

#ecd-root .case-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:22px}
#ecd-root .case-bar select{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;padding:7px 10px;font-size:.86rem;font-weight:600;max-width:280px}
#ecd-root .case-bar .meta{font-size:.78rem;color:var(--text-muted)}
#ecd-root .case-bar .spacer{flex:1}
#ecd-root .icon-btn{appearance:none;border:1px solid var(--border);background:var(--surface);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted)}
#ecd-root .icon-btn:hover{color:var(--critical);border-color:var(--critical)}
#ecd-root .icon-btn svg{width:15px;height:15px}
/* Edit is a plain, reversible action, not a delete — the default red hover
   above is right for the trash icon next to it, but would wrongly suggest
   this one is destructive too. */
#ecd-root .icon-btn-edit:hover{color:var(--brand);border-color:var(--brand)}
#ecd-root .link-btn{appearance:none;border:none;background:none;color:var(--brand-strong);font-weight:650;font-size:.85rem;cursor:pointer;padding:6px 4px}
#ecd-root .link-btn:hover{text-decoration:underline}

#ecd-root .pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
#ecd-root .pill.status-pending{background:var(--surface-2);color:var(--text-muted)}
#ecd-root .pill.status-approve{background:var(--good-tint);color:var(--forest)}
#ecd-root .pill.status-conditions{background:var(--gold-light);color:var(--forest)}
#ecd-root .pill.status-hold{background:var(--hold-tint);color:var(--hold)}
#ecd-root .pill.status-decline{background:var(--critical-tint);color:var(--critical)}
#ecd-root select.status-select{border:1px solid var(--border);border-radius:999px;padding:5px 26px 5px 10px;font-size:.74rem;font-weight:700;background-color:var(--surface)}

#ecd-root .page-head{margin-bottom:20px}
#ecd-root .page-head .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
#ecd-root .page-head h2{font-size:1.7rem}
#ecd-root .page-head .desc{color:var(--text-muted);max-width:62ch;margin-top:8px;font-size:.95rem}

#ecd-root .case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
#ecd-root .case-card{background:var(--surface);border:1px solid var(--border);border-radius:8px 28px;padding:16px;cursor:pointer;box-shadow:var(--shadow-flat);transition:transform .15s;display:flex;flex-direction:column;gap:12px}
#ecd-root .case-card:hover{transform:translate(-2px,-2px)}
#ecd-root .case-card .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
#ecd-root .case-card h3{font-size:1.02rem;font-weight:650}
#ecd-root .case-card .product{font-size:.82rem;color:var(--text-muted);margin-top:2px}
#ecd-root .case-card .dest{font-size:.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em}
#ecd-root .stage-track{display:flex;gap:4px}
#ecd-root .stage-seg{flex:1;height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden;position:relative}
#ecd-root .stage-seg i{position:absolute;inset:0;width:var(--p,0%);background:var(--seg-color,var(--good));border-radius:4px}
#ecd-root .stage-labels{display:flex;justify-content:space-between;font-size:.62rem;color:var(--text-faint);font-weight:600;letter-spacing:.02em}
#ecd-root .case-card .foot{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--text-muted)}
#ecd-root .overall-pct{font-weight:650;color:var(--text)}

#ecd-root .new-case-card{border:1.5px dashed var(--border);border-radius:8px 28px;padding:16px;background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--brand-strong);font-weight:650;min-height:96px}
#ecd-root .new-case-card:hover{background:var(--coral-tint)}

#ecd-root .form-card{background:var(--surface);border:1px solid var(--border);border-radius:8px 28px;padding:20px;box-shadow:var(--shadow-flat);margin-bottom:18px}
#ecd-root .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px;align-items:start}
#ecd-root .form-grid .field{display:flex;flex-direction:column}
#ecd-root .field label{display:block;font-size:.74rem;font-weight:700;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em}
/* Field labels vary a lot in length (e.g. "Exporter / EORI" next to
   "Conformity documents and register checks" on the Broker Instruction
   Sheet) — a short one-line label and a wrapped two-line label used to
   leave their boxes starting at different heights in the same row, so the
   grid looked unaligned. Reserving space for two lines on every label,
   whether it needs it or not, means every box in a row now starts level
   with its neighbours. */
#ecd-root .form-grid .field label{min-height:3em}
#ecd-root .field input,#ecd-root .field select,#ecd-root .field textarea{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;padding:9px 10px;font-size:.88rem;box-sizing:border-box}
#ecd-root .field textarea{resize:vertical;min-height:64px;font-family:var(--font-body)}
#ecd-root .field textarea:disabled,#ecd-root .field input:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed}
#ecd-root .btn{appearance:none;border:none;border-radius:var(--radius-sm);padding:10px 16px;font-weight:650;font-family:var(--font-display);font-size:.86rem;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#ecd-root .btn-primary{background:var(--coral);color:#fff}
#ecd-root .btn-primary:hover{background:#D65D40}
#ecd-root .btn-ghost{background:var(--surface-2);color:var(--text)}
#ecd-root .btn-ghost:hover{background:var(--border-soft)}
#ecd-root .btn[disabled]{opacity:.5;cursor:not-allowed}
#ecd-root .btn-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* Without this, the Workflow tab's text hugged the left edge of the much
   wider .wrap (1180px) — the paragraph/lede max-widths (in ch) kept the
   copy narrow, but nothing balanced that narrow column within the page, so
   the whole right side sat empty. Centering a slightly-narrower column here
   balances that space evenly on both sides instead. */
#ecd-root .workflow-col{max-width:860px;margin-inline:auto}
#ecd-root .lede{font-size:1.05rem;color:var(--text-muted);max-width:66ch;margin-bottom:28px}
#ecd-root .lede strong{color:var(--text)}
#ecd-root .flow{display:flex;flex-direction:column;gap:0}
#ecd-root .flow-step{display:grid;grid-template-columns:56px 1fr;gap:16px}
#ecd-root .flow-step .rail{display:flex;flex-direction:column;align-items:center}
#ecd-root .flow-step .num{width:40px;height:40px;border-radius:50%;background:var(--coral);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.92rem;display:flex;align-items:center;justify-content:center;flex:none}
#ecd-root .flow-step:nth-child(2n) .num{background:var(--gold);color:var(--forest)}
#ecd-root .flow-step .line{flex:1;width:2px;background:var(--border);margin-block:6px;min-height:24px}
#ecd-root .flow-step:last-child .line{display:none}
#ecd-root .flow-body{padding-bottom:34px}
#ecd-root .flow-body h3{font-size:1.18rem;margin-bottom:4px}
#ecd-root .flow-body .q{color:var(--brand-strong);font-weight:650;font-size:.92rem;margin-bottom:8px}
#ecd-root .flow-body p{color:var(--text-muted);font-size:.92rem;max-width:70ch}
#ecd-root .flow-body .next{margin-top:10px;font-size:.82rem;color:var(--text-faint);font-style:italic}
#ecd-root .closing{background:var(--brand-tint);border-radius:8px 28px;padding:20px 22px;margin-top:8px;color:var(--brand-strong);font-size:.95rem;max-width:74ch}

#ecd-root .stage-head{margin-bottom:18px}
#ecd-root .stage-head .q{font-size:1.1rem;color:var(--brand-strong);font-weight:650;font-family:var(--font-display);margin-top:6px}
#ecd-root .stage-head .body{color:var(--text-muted);margin-top:10px;max-width:72ch;font-size:.93rem}
#ecd-root .stage-head .next{margin-top:10px;font-size:.8rem;color:var(--text-faint);font-style:italic}

#ecd-root .card{background:var(--surface);border:1px solid var(--border);border-radius:8px 28px;box-shadow:var(--shadow-flat);padding:18px 20px;margin-bottom:16px}
#ecd-root .card h4{font-size:.95rem;margin-bottom:4px}
#ecd-root .card .card-sub{font-size:.78rem;color:var(--text-muted);margin-bottom:14px}
#ecd-root .progress-line{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#ecd-root .progress-line .bar{flex:1;height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
#ecd-root .progress-line .bar i{display:block;height:100%;background:var(--coral);border-radius:5px}
#ecd-root .progress-line .count{font-size:.78rem;color:var(--text-muted);white-space:nowrap}

#ecd-root .check-item{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--border-soft)}
#ecd-root .check-item:last-child{border-bottom:none}
#ecd-root .check-item input[type=checkbox]{width:19px;height:19px;margin-top:1px;accent-color:var(--coral);flex:none;cursor:pointer}
#ecd-root .check-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.65}
#ecd-root .check-item label{font-size:.88rem;cursor:pointer;line-height:1.45}
#ecd-root .check-item.done label{color:var(--text-muted);text-decoration:line-through;text-decoration-color:var(--border)}

/* Supporting documents — one card per stage, same "card" shell as the
   checklist and record form above it. A plain <ul> list (not a table,
   there's no fixed column set worth aligning) plus a hidden file input
   styled to look like any other ghost button, since a real <input
   type=file> can't be restyled directly. */
#ecd-root .doc-list{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
#ecd-root .doc-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 12px;background:var(--surface-2);border-radius:6px;font-size:.85rem}
#ecd-root .doc-item a{font-weight:650;text-decoration:none;color:var(--brand-strong);word-break:break-word}
#ecd-root .doc-item a:hover{text-decoration:underline}
#ecd-root .doc-item .doc-meta{color:var(--text-faint);font-size:.74rem;white-space:nowrap}
#ecd-root .doc-item .icon-btn{margin-left:auto;flex:none}
#ecd-root .doc-upload-btn{cursor:pointer}

#ecd-root .notes-block textarea{width:100%;border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:10px 11px;font-size:.87rem;min-height:70px;resize:vertical}
#ecd-root .notes-block label{display:block;font-size:.74rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}

/* "Suggest with AI" — a gold-accented card so it reads as a distinct,
   optional assist rather than another ordinary form field, and its own
   small badge repeats that everything inside is a draft, not saved data.
   See renderAiPanel() in ecd-app.js. */
#ecd-root .ai-card{border-color:var(--gold)}
#ecd-root .ai-card h4{display:flex;align-items:center;gap:8px}
#ecd-root .ai-card h4 svg{width:16px;height:16px;flex:none;color:var(--gold)}
#ecd-root .ai-badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-strong);background:var(--brand-tint);border-radius:999px;padding:2px 8px}
#ecd-root .ai-prompt-text{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:9px 11px;font-size:.86rem;min-height:50px;resize:vertical;margin-bottom:2px}
#ecd-root .ai-doc-toggle{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:var(--text-muted);margin-top:10px;cursor:pointer;line-height:1.4}
#ecd-root .ai-doc-toggle input{margin-top:2px;flex:none;cursor:pointer}
#ecd-root .ai-doc-summary{font-size:.78rem;color:var(--text-faint);margin-top:10px}
#ecd-root .ai-error{color:var(--critical);font-size:.83rem;margin-top:10px}
#ecd-root .ai-suggestions{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:8px}
#ecd-root .ai-suggestion-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--surface-2);border-radius:6px;padding:10px 12px}
#ecd-root .ai-suggestion-label{font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
#ecd-root .ai-suggestion-text{font-size:.85rem;line-height:1.45}
#ecd-root .ai-suggestion-row .btn-sm{flex:none}
#ecd-root .btn-sm{padding:6px 12px;font-size:.78rem}

#ecd-root .ref-list{display:flex;flex-direction:column;gap:8px}
#ecd-root .ref-list a{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--surface-2);border-radius:6px;font-size:.84rem;text-decoration:none;color:var(--text)}
#ecd-root .ref-list a:hover{background:var(--border-soft)}
#ecd-root .ref-list a span.src{color:var(--text-faint);font-size:.74rem;white-space:nowrap}

#ecd-root .empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
#ecd-root .empty-state h3{color:var(--text);margin-bottom:8px}
#ecd-root .empty-state .btn{margin-top:16px}

#ecd-root .report-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:20px}
#ecd-root .report-actions{display:flex;gap:8px;flex-wrap:wrap}
#ecd-root .report-doc{background:var(--surface);border:1px solid var(--border);border-radius:10px 40px;padding:26px;max-width:820px;box-shadow:var(--shadow-flat)}
#ecd-root .report-doc h2{font-size:1.5rem;margin-bottom:4px}
#ecd-root .report-doc .sub{color:var(--text-muted);font-size:.9rem;margin-bottom:20px}
#ecd-root .report-doc .dl{display:grid;grid-template-columns:180px 1fr;gap:6px 14px;font-size:.86rem;margin-bottom:6px}
#ecd-root .report-doc .dl dt{color:var(--text-muted);font-weight:600}
#ecd-root .report-doc .dl dd{margin:0}
#ecd-root .report-section{margin-top:26px;padding-top:20px;border-top:1px solid var(--border-soft)}
#ecd-root .report-section h3{font-size:1.05rem;display:flex;align-items:center;gap:10px}
#ecd-root .report-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
#ecd-root .report-list li{display:flex;gap:8px;font-size:.87rem;align-items:flex-start}
#ecd-root .report-list .mark{flex:none;width:16px;color:var(--good);font-weight:700}
#ecd-root .report-list li.unchecked .mark{color:var(--text-faint)}
#ecd-root .report-list li.unchecked span{color:var(--text-muted)}
#ecd-root .report-notes{margin-top:10px;font-size:.85rem;color:var(--text-muted);background:var(--surface-2);border-radius:8px;padding:10px 12px}

/* Supporting documents inside the printable/downloadable report: an image
   (a photo, a scanned certificate) is shown inline as actual proof rather
   than just a filename, since that's the whole point of "Save as PDF"
   carrying it; anything else (PDF, Office file) is a link — most browsers
   keep links live in a saved PDF, and the filename alone is still useful
   in plain print. */
#ecd-root .report-docs{margin-top:14px}
#ecd-root .report-docs h4{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
#ecd-root .report-doc-img{display:inline-block;width:200px;max-width:100%;margin:0 10px 10px 0;vertical-align:top}
#ecd-root .report-doc-img img{width:100%;height:140px;object-fit:cover;border:1px solid var(--border);border-radius:6px;display:block;background:var(--surface-2)}
#ecd-root .report-doc-img figcaption{font-size:.72rem;color:var(--text-muted);margin-top:4px;word-break:break-word}
#ecd-root .report-doc-link{margin-top:6px;font-size:.85rem}
#ecd-root .report-doc-link a{display:inline-flex;align-items:center;gap:6px;color:var(--teal-mid);text-decoration:underline}
#ecd-root .report-doc-link a svg{width:14px;height:14px;flex:none}

#ecd-root .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--forest);color:#fff;padding:10px 18px;border-radius:999px;font-size:.85rem;font-weight:650;box-shadow:var(--shadow-md);z-index:9999}

#ecd-root .ecd-gate{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:60px 20px;background:var(--header-grad)}
#ecd-root .ecd-gate-card{max-width:420px;text-align:center;background:var(--ivory);border:1px solid var(--border);border-radius:10px 48px;padding:40px 32px;box-shadow:var(--shadow-flat)}
#ecd-root .ecd-gate-card h2{margin:0 0 10px;font-size:1.5rem;color:var(--forest)}
#ecd-root .ecd-gate-card p{color:var(--text-muted);margin:0 0 22px}
#ecd-root .ecd-gate-btn{display:inline-block;width:100%;background:var(--coral);color:#fff;text-decoration:none;padding:11px 24px;border:none;border-radius:var(--radius-sm);font-weight:650;font-family:var(--font-display);font-size:1rem;cursor:pointer}
#ecd-root .ecd-gate-btn:hover{background:#D65D40}
#ecd-root .ecd-gate-disclaimer{max-width:420px;margin:18px 0 0;font-size:.72rem;line-height:1.5;color:rgba(255,255,255,.75);text-align:center}

/* Landing page (guest, signed-out view) — a small "Log in" link in the
   corner rather than the sign-in form being the whole page, since most
   first-time visitors don't have an account yet (see the class docblock
   in class-ecd-auth.php for why there's no self-service sign-up). The
   page's actual job is explaining that access comes from staff and
   collecting a request for it. */
/* Fixed to exactly one viewport tall (not min-height) with overflow
   hidden, so this page never scrolls on a normal desktop window — the
   header, centered hero and bottom small print always share exactly
   100vh between them, flexed via .landing-hero{flex:1} below, instead of
   min-height letting extra padding push the page taller than the screen
   (which is what caused the bottom-right link to fall below the fold).
   Reverted to a normal scrollable min-height on narrow/mobile screens
   (see the max-width:760px block) where the stacked layout is naturally
   taller than one screen and scrolling there is expected. */
#ecd-root .ecd-landing{height:100vh;overflow:hidden;background:var(--header-grad);display:flex;flex-direction:column;align-items:center;position:relative;padding-bottom:56px}
#ecd-root .landing-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;width:100%;max-width:1100px;padding:22px 28px 0}
#ecd-root .landing-header .brandmark{display:flex;align-items:center;gap:10px}
#ecd-root .landing-header .mark{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
#ecd-root .landing-header .mark svg{width:19px;height:19px}
#ecd-root .landing-header h1{font-size:1.05rem;color:#fff;letter-spacing:.01em;margin:0}
#ecd-root .landing-header .sub{font-size:.72rem;color:var(--gold-pale);letter-spacing:.04em;text-transform:uppercase;margin-top:1px;font-weight:600}
#ecd-root .landing-login-btn{display:inline-flex;align-items:center;font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.5);padding:8px 20px;border-radius:999px;text-decoration:none;transition:background .15s ease,border-color .15s ease;flex:none}
#ecd-root .landing-login-btn:hover,#ecd-root .landing-login-btn:focus-visible{background:rgba(255,255,255,.12);border-color:#fff}

/* background/border-radius reset: #ecd-root main{...} elsewhere sets a
   cream background + rounded corners for the app's own <main>, and since
   this landing page reuses the <main> tag for its hero section too, that
   rule would otherwise wash out the dark gradient (and the white copy
   text on it) behind a cream box here. */
#ecd-root .landing-hero{flex:1;display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;padding:40px 28px;max-width:1100px;margin-inline:auto;width:100%;background:none;border-radius:0}
#ecd-root .landing-copy{flex:1 1 360px;max-width:460px;color:#fff}
#ecd-root .landing-copy .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:12px}
#ecd-root .landing-copy h2{font-size:2rem;color:#fff;margin:0 0 14px;line-height:1.15}
#ecd-root .landing-copy p{color:rgba(255,255,255,.85);margin:0 0 14px;line-height:1.6}
/* Matches the "Central Asia · Export Compliance Desk" eyebrow above it — same
   size and gold color — instead of the plain translucent-white text it
   used to be. */
#ecd-root .landing-copy-note{font-size:.72rem;font-weight:600;color:var(--gold-pale) !important}

/* "www.humanintel.eu" pinned to the bottom-right corner of the landing
   page, in the same gold as the eyebrow/note above. Un-pinned to a
   centered line on narrow screens (see the max-width:760px block below)
   so it never overlaps the stacked content there. */
#ecd-root .landing-sitelink{position:absolute;right:28px;bottom:20px;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--gold-pale);text-decoration:none}
#ecd-root .landing-sitelink:hover,#ecd-root .landing-sitelink:focus-visible{color:var(--gold-light);text-decoration:underline}

#ecd-root .landing-form-card{flex:1 1 360px;max-width:420px;text-align:left;background:var(--ivory);border:1px solid var(--border);border-radius:10px 48px;padding:32px 30px;box-shadow:var(--shadow-flat)}
#ecd-root .landing-form-card h3{margin:0 0 16px;font-size:1.2rem;color:var(--forest)}
#ecd-root .landing-form-card > p{color:var(--text-muted);line-height:1.6;margin:0}

#ecd-root .ecd-gate-error{background:var(--critical-tint);color:var(--critical);border-radius:var(--radius-sm);padding:9px 12px;font-size:.86rem;margin:0 0 16px;text-align:left}
#ecd-root .ecd-gate-form{text-align:left;display:flex;flex-direction:column;gap:14px;margin:0}
#ecd-root .ecd-gate-field{display:flex;flex-direction:column;gap:5px;font-size:.82rem;font-weight:650;color:var(--text-muted)}
#ecd-root .ecd-gate-field input,#ecd-root .ecd-gate-field textarea{font-size:.95rem;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text);font-weight:400;font-family:inherit;resize:vertical}
#ecd-root .ecd-gate-field input:focus,#ecd-root .ecd-gate-field textarea:focus{outline:none;border-color:var(--teal-mid);box-shadow:0 0 0 1px var(--teal-mid)}
/* Honeypot field — off-screen for real visitors, still present in the DOM
   (and tabindex="-1" so keyboard users skip it) for a bot to fill in. */
#ecd-root .ecd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Small nav row under the disclaimer (Privacy Policy / Cookie Policy) on
   the sign-in landing and forbidden screens. Either link silently omits
   itself (see render_gate_disclaimer()) if that page hasn't been set up
   yet, so this never shows a link that goes nowhere. */
#ecd-root .ecd-gate-links{margin:8px 0 0;text-align:center;font-size:.72rem}
#ecd-root .ecd-gate-links a{color:rgba(255,255,255,.85);text-decoration:underline;margin:0 8px}
#ecd-root .ecd-disclaimer .ecd-gate-links a{color:var(--text-faint)}

/* An actual WordPress Page's real content (Privacy Policy, Cookie Policy —
   see ECDT_App::render_legal_page()) rendered in the same brand frame as
   the rest of the site, sized for reading prose rather than a short
   sign-in card. */
#ecd-root .ecd-legal{min-height:100vh;background:var(--header-grad);display:flex;flex-direction:column;align-items:center}
#ecd-root .ecd-legal .brand-title{font-size:1.05rem;color:#fff;letter-spacing:.01em;margin:0;font-weight:700;font-family:var(--font-display)}
#ecd-root .ecd-legal-card{width:100%;max-width:760px;margin:32px 20px 60px;background:var(--ivory);border:1px solid var(--border);border-radius:10px 48px;padding:44px 40px;box-shadow:var(--shadow-flat);box-sizing:border-box}
#ecd-root .ecd-legal-content h1{margin:0 0 20px;font-size:1.7rem;color:var(--forest);font-family:var(--font-display)}
#ecd-root .ecd-legal-content h2{margin:28px 0 10px;font-size:1.2rem;color:var(--forest);font-family:var(--font-display)}
#ecd-root .ecd-legal-content h3{margin:20px 0 8px;font-size:1rem;color:var(--forest)}
#ecd-root .ecd-legal-content p{margin:0 0 14px;color:var(--text);line-height:1.65}
#ecd-root .ecd-legal-content ul,#ecd-root .ecd-legal-content ol{margin:0 0 14px;padding-left:22px;color:var(--text);line-height:1.65}
#ecd-root .ecd-legal-content li{margin:0 0 6px}
#ecd-root .ecd-legal-content a{color:var(--teal-mid);text-decoration:underline}
#ecd-root .ecd-legal-content strong{color:var(--forest)}
#ecd-root .ecd-legal-back{margin-top:24px;font-size:.86rem}
#ecd-root .ecd-legal-back a{color:var(--teal-mid);text-decoration:none;font-weight:650}
#ecd-root .ecd-legal-back a:hover{text-decoration:underline}

@media (max-width:760px){
  #ecd-root .landing-hero{flex-direction:column;padding-top:12px;text-align:center}
  #ecd-root .landing-copy{text-align:center}
  #ecd-root .landing-form-card{width:100%}
  #ecd-root .ecd-legal-card{padding:32px 22px}
  #ecd-root .landing-sitelink{position:static;display:block;text-align:center;margin:16px 0 0}
  /* The fixed one-screen height above is a desktop-only trick — this
     stacked mobile layout is legitimately taller than one screen, so
     restore normal scrolling here instead of clipping content. */
  #ecd-root .ecd-landing{height:auto;min-height:100vh;overflow:visible;padding-bottom:32px}
  #ecd-root .workflow-col{max-width:none;margin-left:0;margin-right:0}
}

@media print{
  body *{visibility:hidden}
  #ecd-root, #ecd-root *{visibility:visible}
  #ecd-root{position:absolute;left:0;top:0;width:100%}
  #ecd-root header.topbar,#ecd-root nav.tabs,#ecd-root .case-bar,#ecd-root .report-actions,#ecd-root .no-print{display:none!important}
}

/* Contact modal (ecd-app.js) — deliberately lives outside #ecd-root
   (appended straight to <body> so it survives the app's own re-renders),
   which is why every color here is a literal hex value rather than one of
   #ecd-root's custom properties: those aren't inherited outside that
   subtree. Same brand palette as the rest of the site, just spelled out. */
.ecd-modal-backdrop{position:fixed;inset:0;background:rgba(22,61,58,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10000}
.ecd-modal-backdrop[hidden]{display:none}
.ecd-modal{position:relative;width:100%;max-width:420px;background:#FFF8EB;border:1px solid #EADFD2;border-radius:10px 48px;padding:34px 30px;box-shadow:0 20px 50px rgba(0,0,0,.25);font-family:'IBM Plex Sans',Calibri,Arial,sans-serif;color:#26352F;box-sizing:border-box}
.ecd-modal h3{margin:0 0 12px;font-family:'Hanken Grotesk',Arial,sans-serif;color:#163D3A;font-size:1.25rem;font-weight:650}
.ecd-modal p{margin:0 0 18px;line-height:1.6;color:#43534D}
.ecd-modal p a{color:#2F7569;font-weight:650;text-decoration:underline}
.ecd-modal-dl{margin:0 0 20px}
.ecd-modal-dl dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#6E7B76;margin:0 0 4px}
.ecd-modal-dl dd{margin:0;color:#26352F;line-height:1.55}
.ecd-modal-links{display:flex;gap:10px;flex-wrap:wrap}
.ecd-modal-links a{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid #EADFD2;color:#163D3A;text-decoration:none;font-weight:650;font-size:.85rem;transition:background .15s ease}
.ecd-modal-links a:hover{background:#FFFAF2}
.ecd-modal-close{position:absolute;top:12px;right:12px;background:transparent;border:none;cursor:pointer;color:#6E7B76;padding:6px;line-height:0;appearance:none}
.ecd-modal-close:hover{color:#26352F}
.ecd-modal-close svg{width:18px;height:18px;display:block}
@media (max-width:480px){.ecd-modal{padding:28px 22px}}

/* Help modal — a wider variant of the same card for the FAQ accordion.
   <details>/<summary> are native, so this is just enough styling to make
   them look intentional rather than like a browser default. */
.ecd-modal-wide{max-width:560px;max-height:82vh;overflow-y:auto}
.ecd-faq{margin:0 0 8px}
.ecd-faq details{border-bottom:1px solid #EADFD2;padding:12px 0}
.ecd-faq details:first-child{padding-top:0}
.ecd-faq details:last-child{border-bottom:none}
.ecd-faq summary{cursor:pointer;font-weight:650;color:#163D3A;list-style:none}
.ecd-faq summary::-webkit-details-marker{display:none}
.ecd-faq summary::before{content:"+";display:inline-block;width:16px;color:#E76F51;font-weight:700}
.ecd-faq details[open] summary::before{content:"\2212"}
.ecd-faq details p{margin:10px 0 0 16px;color:#43534D;line-height:1.55}
.ecd-modal-footnote{margin:16px 0 0;font-size:.82rem;color:#6E7B76}
.ecd-modal-footnote strong{color:#163D3A}


/* Export Guide closing block + global footer */
#ecd-root .ecd-site-closing{background:#163d3a;border-radius:28px;margin:44px 24px 24px;padding:44px 52px;color:#fff;text-align:center}
#ecd-root .ecd-site-closing .eyebrow{margin:0 0 12px;color:#ffd782;font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
#ecd-root .ecd-site-closing .eyebrow a{color:#ffd782;text-decoration:none}
#ecd-root .ecd-site-closing .eyebrow a:hover{text-decoration:underline}
#ecd-root .ecd-site-closing h2{border:0;color:#fff;font-family:var(--font-display);font-size:26px;line-height:1.25;font-weight:650;letter-spacing:1px;margin:0 auto 8px;max-width:640px}
#ecd-root .ecd-site-closing p{color:#cfe9dd;font-size:17px;line-height:1.55;max-width:650px;margin:6px auto 0}
#ecd-root .ecd-site-closing .cta{display:inline-block;margin-top:22px;background:#d8f3dc;color:#163d3a;font-family:var(--font-display);font-weight:650;font-size:16px;line-height:1.2;padding:14px 28px;border-radius:12px;text-decoration:none}
#ecd-root .ecd-site-closing .cta:hover,#ecd-root .ecd-site-closing .cta:focus-visible{background:#ffd782;outline:none}
#ecd-root .ecd-global-footer{background:#163d3a;color:#fff3df;padding:30px 34px 38px;text-align:center;margin-top:0}
#ecd-root .ecd-global-footer .footer-locations{font-size:12px;line-height:1.75;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
#ecd-root .ecd-global-footer .footer-actions{margin-top:14px;display:flex;justify-content:center;align-items:center;gap:14px}
#ecd-root .ecd-global-footer .linkedin-icon{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid rgba(255,243,223,.55);border-radius:9px;background:#245b54;color:#fff3df;text-decoration:none;transition:transform .15s ease,background .15s ease}
#ecd-root .ecd-global-footer .linkedin-icon:hover,#ecd-root .ecd-global-footer .linkedin-icon:focus-visible{background:#2f7569;color:#fff3df;transform:translateY(-1px);outline:none}
#ecd-root .ecd-global-footer svg{width:19px;height:19px;fill:currentColor}
#ecd-root .ecd-global-footer .footer-contact-button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 14px;border:1px solid rgba(255,243,223,.55);border-radius:9px;background:#245b54;color:#fff3df;font-family:inherit;font-size:12px;line-height:1.75;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:transform .15s ease,background .15s ease}
#ecd-root .ecd-global-footer .footer-contact-button:hover,#ecd-root .ecd-global-footer .footer-contact-button:focus-visible{background:#2f7569;transform:translateY(-1px);outline:none}
#ecd-root .ecd-global-footer .ecd-footer-disclaimer{max-width:760px;margin:18px auto 0;font-size:.72rem;line-height:1.55;color:#cfe9dd}
#ecd-root .ecd-global-footer .ecd-gate-links{justify-content:center;margin-top:10px}
#ecd-root .ecd-global-footer .ecd-gate-links a{color:#fff3df}

/* Case document vault */
#ecd-root .document-vault{margin-bottom:22px}
#ecd-root .doc-stage-tag{display:inline-flex;align-items:center;border-radius:999px;background:var(--brand-tint);color:var(--brand-strong);font-size:.66rem;font-weight:700;padding:3px 8px;white-space:nowrap}
#ecd-root .document-vault-empty{color:var(--text-muted);font-size:.88rem;margin-bottom:12px}
#ecd-root .vault-upload-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
#ecd-root .vault-upload-row select{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;padding:9px 10px;font-size:.84rem}

/* AI Assistant modal */
.ecd-ai-chat-modal{max-width:680px}
.ecd-ai-chat-label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6E7B76;margin:12px 0 5px}
.ecd-ai-chat-select,.ecd-ai-chat-question{width:100%;box-sizing:border-box;border:1px solid #EADFD2;background:#FFFAF2;color:#26352F;border-radius:8px;padding:9px 10px;font:inherit}
.ecd-ai-chat-question{resize:vertical;min-height:96px}
.ecd-ai-chat-docs{display:flex;align-items:flex-start;gap:8px;margin:10px 0;color:#43534D;font-size:.82rem}
.ecd-ai-chat-actions{display:flex;justify-content:flex-end;margin-top:12px}
.ecd-ai-chat-result{margin-top:14px}
.ecd-ai-chat-answer{background:#E3EEEC;border-radius:8px 24px;padding:14px 16px;line-height:1.55;color:#26352F}
.ecd-ai-chat-loading{color:#6E7B76;font-size:.85rem}
.ecd-ai-chat-error{background:#FBE7E5;color:#A83A34;border-radius:8px;padding:10px 12px;font-size:.85rem}

@media(max-width:700px){#ecd-root .ecd-site-closing{margin:32px 12px 12px;padding:36px 22px;border-radius:22px}#ecd-root .ecd-site-closing h2{font-size:23px}#ecd-root .ecd-site-closing p{font-size:15px}}

/* Classification intake sections: mirrors Appendix A without turning the form into one long undifferentiated grid. */
#ecd-root .record-section{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-soft)}
#ecd-root .record-section:first-of-type{margin-top:16px}
#ecd-root .record-section h5{margin:0 0 12px;color:var(--forest);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}