/* Dexor Document Studio — navy + gold on neutrals. Hairlines, not shadows. */
:root{
  --navy:#051c3c; --navy-2:#0b2b56; --gold:#c9a961; --jaffa:#f17043;
  --ink:#1a2230; --muted:#5d627a; --line:#e4e6ea; --bg:#f6f7f9; --card:#fff;
  --ok:#1f7a4d; --bad:#b02a37; --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
  font-feature-settings:'tnum','cv05'; -webkit-font-smoothing:antialiased;
}
a{color:var(--navy); text-decoration:none}
a:hover{text-decoration:underline}

/* ── shell ─────────────────────────────────────────────────────────── */
.top{background:var(--navy); color:#fff; padding:0 24px; position:sticky; top:0; z-index:20}
.top-in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:26px; height:58px}
.brand{font-family:'Playfair Display',Georgia,serif; font-size:19px; letter-spacing:4px; font-weight:700}
.brand small{display:block; font-size:8.5px; letter-spacing:2.6px; color:var(--gold); font-weight:400;
  font-family:'Inter',sans-serif; margin-top:-2px}
.nav{display:flex; gap:20px; margin-left:auto; font-size:13.5px}
.nav a{color:#c7cddb}
.nav a.on,.nav a:hover{color:#fff; text-decoration:none}
main{max-width:1120px; margin:0 auto; padding:30px 24px 70px}

/* ── type ──────────────────────────────────────────────────────────── */
h1{font-family:'Playfair Display',Georgia,serif; font-size:31px; color:var(--navy); font-weight:700;
  letter-spacing:-.3px; margin-bottom:8px}
h2{font-size:15px; color:var(--navy); font-weight:600; margin-bottom:2px}
.sub{color:var(--muted); font-size:14px; margin-bottom:26px; max-width:70ch}
.eyebrow{font-size:10px; letter-spacing:2.6px; text-transform:uppercase; color:var(--gold);
  font-weight:600; margin-bottom:8px}

/* ── cards / sections ──────────────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;
  margin-bottom:18px}
.card > .hd{display:flex; align-items:baseline; gap:10px; border-bottom:1px solid var(--line);
  padding-bottom:12px; margin-bottom:18px}
.card > .hd .n{width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff;
  font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:600; flex:0 0 auto}
.card > .hd .t{font-size:15px; font-weight:600; color:var(--navy)}
.card > .hd .h{font-size:12.5px; color:var(--muted); margin-left:auto}

.tiles{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 22px;
  display:block; transition:border-color .15s ease}
.tile:hover{border-color:var(--navy); text-decoration:none}
.tile .ti{font-family:'Playfair Display',Georgia,serif; font-size:22px; color:var(--navy); font-weight:700;
  margin:10px 0 6px}
.tile .td{font-size:13.5px; color:var(--muted); line-height:1.65}
.tile .go{margin-top:16px; font-size:12.5px; font-weight:600; color:var(--navy)}
.tile .go::after{content:' →'}

/* ── forms ─────────────────────────────────────────────────────────── */
.grid{display:grid; gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.g4{grid-template-columns:repeat(4,1fr)}
label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.2px;
  margin-bottom:5px}
label .opt{font-weight:400; color:#9aa0b0; letter-spacing:0}
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%; border:1px solid var(--line); border-radius:7px; padding:9px 11px; font-size:13.5px;
  font-family:inherit; color:var(--ink); background:#fff; font-feature-settings:'tnum';
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(5,28,60,.07)}
textarea{min-height:86px; resize:vertical; line-height:1.6}
input[dir=rtl],textarea[dir=rtl]{font-family:'IBM Plex Sans Arabic','Inter',sans-serif}
.hint{font-size:11.5px; color:var(--muted); margin-top:6px}

/* choice chips */
.chips{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:block; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font-size:12.5px; cursor:pointer; background:#fff; line-height:1.35; transition:all .12s ease}
.chip span b{display:block; font-weight:600; color:var(--ink); font-size:12.8px}
.chip span i{display:block; font-style:normal; color:var(--muted); font-size:11.2px; margin-top:2px}
.chip input:checked + span{border-color:var(--navy); background:#f4f6fa;
  box-shadow:inset 3px 0 0 var(--gold)}
.chip span:hover{border-color:#c3c8d2}

/* segmented control */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff}
.seg label{margin:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{display:block; padding:9px 18px; font-size:13px; cursor:pointer; color:var(--muted);
  border-right:1px solid var(--line); font-weight:500}
.seg label:last-child span{border-right:none}
.seg input:checked + span{background:var(--navy); color:#fff}

/* switches */
.check{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink); cursor:pointer;
  margin-bottom:2px}
.check input{margin-top:3px; accent-color:var(--navy); width:15px; height:15px}
.check .d{color:var(--muted); font-size:11.8px; display:block}

/* repeatable rows */
.rows .row{display:grid; grid-template-columns:1fr 110px 34px; gap:10px; margin-bottom:9px;
  align-items:center}
.rows .row.three{grid-template-columns:1fr 1fr 110px 34px}
.rows .row.clause{grid-template-columns:1fr; gap:12px; border:1px solid var(--line); border-radius:8px;
  padding:14px; background:#fbfbfc; margin-bottom:12px}
.x{border:1px solid var(--line); background:#fff; border-radius:7px; height:36px; cursor:pointer;
  color:var(--muted); font-size:16px; line-height:1}
.x:hover{border-color:var(--bad); color:var(--bad)}
.addbtn{border:1px dashed #c3c8d2; background:#fff; border-radius:8px; padding:9px 14px; font-size:12.5px;
  cursor:pointer; color:var(--navy); font-weight:600; font-family:inherit}
.addbtn:hover{border-color:var(--navy)}

/* actions */
.actions{position:sticky; bottom:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; display:flex; align-items:center; gap:14px; margin-top:6px;
  box-shadow:0 -2px 12px rgba(10,20,40,.06)}
.btn{background:var(--navy); color:#fff; border:none; border-radius:8px; padding:13px 30px; font-size:14px;
  font-weight:600; cursor:pointer; font-family:inherit}
.btn:hover{background:var(--navy-2)}
.btn[disabled]{opacity:.55; cursor:progress}
.btn-2{background:#fff; color:var(--navy); border:1px solid var(--line)}
.note{background:#fffdf7; border:1px solid #efe3c8; border-left:4px solid var(--gold); border-radius:8px;
  padding:12px 15px; font-size:12.6px; color:#4a4433; line-height:1.65; margin-bottom:18px}
.total-pill{margin-left:auto; font-size:13px; color:var(--muted)}
.total-pill b{color:var(--navy); font-size:15px}

/* ── result ────────────────────────────────────────────────────────── */
.verdict{border-radius:var(--radius); padding:20px 24px; margin-bottom:20px; border:1px solid var(--line);
  background:#fff}
.verdict.pass{border-left:5px solid var(--ok)}
.verdict.fail{border-left:5px solid var(--bad)}
.verdict .st{font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700}
.verdict.pass .st{color:var(--ok)} .verdict.fail .st{color:var(--bad)}
.verdict h2{font-family:'Playfair Display',Georgia,serif; font-size:23px; margin:6px 0 4px}
.gates{display:flex; gap:22px; margin-top:14px; flex-wrap:wrap}
.gate{font-size:12.5px; color:var(--muted)}
.gate b{color:var(--ink)}
.links{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.dl{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff;
  border-radius:8px; padding:11px 18px; font-size:13.5px; font-weight:600; color:var(--navy)}
.dl:hover{border-color:var(--navy); text-decoration:none}
.dl.primary{background:var(--navy); color:#fff; border-color:var(--navy)}
.url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--muted);
  word-break:break-all; background:#f3f4f6; border-radius:6px; padding:9px 12px; margin-top:12px}
pre.log{background:#0f1620; color:#cfd6e4; border-radius:8px; padding:14px 16px; font-size:11.5px;
  overflow:auto; max-height:340px; line-height:1.6}
.preview{width:100%; border:1px solid var(--line); border-radius:8px; display:block}

/* ── table ─────────────────────────────────────────────────────────── */
table.list{width:100%; border-collapse:collapse; font-size:13px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
table.list th{background:#f8f9fb; text-align:left; font-size:11px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line)}
table.list td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.list tr:last-child td{border-bottom:none}
.tag{display:inline-block; font-size:10.5px; letter-spacing:.6px; padding:3px 9px; border-radius:20px;
  border:1px solid var(--line); color:var(--muted); background:#fafbfc}
.tag.ok{color:var(--ok); border-color:#bfe0cd; background:#f2f9f5}
.tag.no{color:var(--bad); border-color:#eccbce; background:#fdf4f5}
.empty{color:var(--muted); font-size:13.5px; padding:26px; text-align:center; background:#fff;
  border:1px dashed var(--line); border-radius:var(--radius)}

/* ── busy overlay ──────────────────────────────────────────────────── */
.busy{position:fixed; inset:0; background:rgba(246,247,249,.94); display:none; align-items:center;
  justify-content:center; z-index:50}
.busy.on{display:flex}
.busy .b{text-align:center; max-width:380px}
.busy .ring{width:34px; height:34px; border:3px solid #dfe3ea; border-top-color:var(--navy);
  border-radius:50%; margin:0 auto 16px; animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.busy .t{font-weight:600; color:var(--navy); margin-bottom:5px}
.busy .d{font-size:12.8px; color:var(--muted); line-height:1.6}

@media (max-width:860px){
  .tiles,.g2,.g3,.g4{grid-template-columns:1fr}
  .chips{grid-template-columns:1fr 1fr}
  .rows .row,.rows .row.three{grid-template-columns:1fr}
  main{padding:22px 16px 60px}
}