/* app.css — the interface wears the same clothes as the documents it makes.
   Navy, gold, Arial, hard corners. An adviser should never wonder whether the
   thing on screen and the thing that prints came from the same firm. */

:root{
  --navy:#1F4E79; --navy-dark:#16365C; --navy-deep:#102844;
  --gold:#C8920E; --gold-soft:#F0E2BE;
  --sub:#DCE6F1; --zebra:#F4F7FB; --flag:#C0392B; --flag-fill:#FBEAE7;
  --ok:#1E7A४4; --ok:#1E7A44; --ok-fill:#E6F4EC;
  --grey:#595959; --line:#D6DCE4; --ink:#222; --paper:#fff; --bg:#EEF2F7;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:14px/1.5 Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);
}
a{color:var(--navy)}
h1,h2,h3{margin:0}
button{font:inherit;cursor:pointer;border:0}
input,select,textarea{font:inherit;color:var(--ink)}
.hide{display:none!important}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:232px 1fr;height:100vh}
aside{background:var(--navy-deep);color:#fff;display:flex;flex-direction:column;overflow:auto}
.brand{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.14)}
.brand .mark{font-size:11px;letter-spacing:1.4px;color:var(--gold);font-weight:bold}
.brand .name{font-size:17px;font-weight:bold;margin-top:2px}
.brand .fsp{font-size:11px;color:#9DB4CC;margin-top:2px}

nav{padding:12px 0;flex:1}
nav .grp{font-size:10px;letter-spacing:1.2px;color:#7D97B3;padding:14px 18px 6px}
nav button{
  display:flex;width:100%;align-items:center;gap:9px;background:none;color:#D6E2EE;
  padding:9px 18px;text-align:left;font-size:13px;border-left:3px solid transparent;
}
nav button:hover{background:rgba(255,255,255,.06);color:#fff}
nav button[aria-current="true"]{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--gold);font-weight:bold}
nav button[disabled]{color:#5C7691;cursor:default}
nav button[disabled]:hover{background:none;color:#5C7691}
nav .soon{margin-left:auto;font-size:9px;letter-spacing:.6px;color:#5C7691;border:1px solid #365B80;padding:1px 5px}

.who{padding:14px 18px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#9DB4CC}
.who b{display:block;color:#fff;font-size:13px}
.who button{background:none;color:#9DB4CC;padding:0;margin-top:7px;text-decoration:underline;font-size:12px}

main{overflow:auto;padding:26px 30px 60px}
.wrap{max-width:1000px;margin:0 auto}
.wrap.wide{max-width:1500px}

.pagehead{border-bottom:2px solid var(--gold);padding-bottom:9px;margin-bottom:20px}
.pagehead h1{font-size:21px;color:var(--navy)}
.pagehead p{margin:5px 0 0;color:var(--grey);font-size:13px}

/* ---------- cards ---------- */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px}
.tool{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--navy);
  padding:18px;text-align:left;display:flex;flex-direction:column;gap:8px;transition:.12s}
.tool:hover{border-top-color:var(--gold);box-shadow:0 3px 14px rgba(16,40,68,.13);transform:translateY(-2px)}
.tool h3{font-size:15px;color:var(--navy)}
.tool p{margin:0;font-size:13px;color:var(--grey);flex:1}
.tool .go{font-size:12px;font-weight:bold;color:var(--gold)}

.panel{background:var(--paper);border:1px solid var(--line);padding:22px;margin-bottom:18px}
.panel h2{font-size:15px;color:var(--navy-dark);margin-bottom:4px}
.panel .sub{color:var(--grey);font-size:12.5px;margin:0 0 16px}

/* ---------- forms ---------- */
label{display:block;font-size:12px;font-weight:bold;color:var(--navy-dark);margin:0 0 5px}
label .opt{font-weight:normal;color:var(--grey)}
.field{margin-bottom:15px}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);background:#fff;border-radius:0}
textarea{min-height:74px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:-2px;border-color:var(--navy)}
.help{font-size:11.5px;color:var(--grey);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.drop{border:2px dashed var(--line);background:var(--zebra);padding:22px;text-align:center;cursor:pointer;transition:.12s}
.drop:hover,.drop.over{border-color:var(--gold);background:var(--gold-soft)}
.drop b{color:var(--navy)}
.drop span{display:block;font-size:12px;color:var(--grey);margin-top:4px}
.drop.has{border-style:solid;border-color:var(--navy);background:var(--sub);text-align:left}
.filelist{margin-top:9px;font-size:12.5px}
.filelist div{padding:5px 8px;background:#fff;border:1px solid var(--line);margin-top:5px;display:flex;gap:8px}
.filelist b{color:var(--navy-dark)}

.btn{background:var(--navy);color:#fff;padding:11px 22px;font-weight:bold;font-size:13.5px}
.btn:hover{background:var(--navy-dark)}
.btn:disabled{background:#93A6BA;cursor:not-allowed}
.btn.gold{background:var(--gold)}.btn.gold:hover{background:#A87A0B}
.btn.ghost{background:none;color:var(--navy);border:1px solid var(--navy)}
.btn.ghost:hover{background:var(--sub)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn.danger{background:none;color:var(--flag);border:1px solid var(--flag)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}

.msg{padding:11px 14px;margin-bottom:16px;font-size:13px;border-left:4px solid}
.msg.err{background:var(--flag-fill);border-color:var(--flag);color:#8C2A1F}
.msg.ok{background:var(--ok-fill);border-color:var(--ok);color:#155C33}
.msg.info{background:var(--sub);border-color:var(--navy);color:var(--navy-dark)}

/* ---------- job list ---------- */
table.list{width:100%;border-collapse:collapse;background:var(--paper);font-size:13px}
table.list th{background:var(--navy);color:#fff;text-align:left;padding:9px 12px;font-size:12px}
table.list td{padding:9px 12px;border-bottom:1px solid var(--line)}
table.list tr:nth-child(even) td{background:var(--zebra)}
table.list tr:hover td{background:var(--sub)}

.pill{display:inline-block;padding:2px 9px;font-size:11px;font-weight:bold;letter-spacing:.3px}
.pill.ready{background:var(--ok-fill);color:#155C33}
.pill.failed{background:var(--flag-fill);color:#8C2A1F}
.pill.busy{background:var(--gold-soft);color:#7A5B08}

.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--gold);
  border-top-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- review ---------- */
.review{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.review .col{background:var(--paper);border:1px solid var(--line)}
.colhead{background:var(--navy);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:bold;position:sticky;top:0;z-index:2}
.colhead .right{margin-left:auto;display:flex;gap:8px}
.colhead .btn.sm{background:rgba(255,255,255,.16)}
.colhead .btn.sm:hover{background:rgba(255,255,255,.28)}
iframe.pdf{width:100%;height:calc(100vh - 210px);border:0;display:block;background:#525659}

.blocks{max-height:calc(100vh - 210px);overflow:auto;padding:14px}
.blk{border:1px solid var(--line);border-left:3px solid var(--sub);padding:10px 12px;margin-bottom:10px;background:#fff}
.blk:hover{border-left-color:var(--gold)}
.blk .bh{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.blk .tag{font-size:10px;letter-spacing:.8px;font-weight:bold;color:#fff;background:var(--navy);padding:2px 7px}
.blk .tag.warn{background:var(--flag)}
.blk .tag.h{background:var(--gold)}
.blk .bh .right{margin-left:auto;display:flex;gap:4px}
.blk .bh button{background:var(--zebra);color:var(--navy);padding:3px 8px;font-size:11px;border:1px solid var(--line)}
.blk .bh button:hover{background:var(--sub)}
.blk textarea{min-height:52px;font-size:13px}
.blk input[type=text]{padding:6px 9px;font-size:12.5px}
.grid{overflow-x:auto}
.grid table{border-collapse:collapse;width:100%;font-size:12px}
.grid th,.grid td{border:1px solid var(--line);padding:0}
.grid th{background:var(--sub)}
.grid input{border:0;padding:5px 7px;width:100%;min-width:96px;background:none}
.grid input:focus{outline:2px solid var(--gold);outline-offset:-2px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;background:var(--navy-deep);padding:20px}
.login .card{background:#fff;width:100%;max-width:392px;border-top:4px solid var(--gold)}
.login .top{background:var(--navy);color:#fff;padding:24px 28px}
.login .top .mark{font-size:11px;letter-spacing:1.6px;color:var(--gold);font-weight:bold}
.login .top h1{font-size:22px;margin-top:4px}
.login .top p{margin:5px 0 0;font-size:12.5px;color:var(--sub)}
.login form{padding:26px 28px 28px}
.login .btn{width:100%;margin-top:6px}
.login .foot{padding:0 28px 24px;font-size:11.5px;color:var(--grey)}

@media(max-width:1080px){.review{grid-template-columns:1fr}iframe.pdf{height:70vh}}
@media(max-width:760px){.shell{grid-template-columns:1fr}aside{display:none}main{padding:18px}.two{grid-template-columns:1fr}}