:root{
  --ink:#1a1420;
  --muted:#6b6472;
  --line:#e7e2ea;
  --bg:#f8f6f9;
  --card:#ffffff;
  /* taken from the Infini Advisors mark */
  --accent:#7b1b89;
  --accent-deep:#48024f;
  --accent-mid:#5f0d69;
  --accent-soft:#f5ebf7;
  --warn-bg:#fff8e6;
  --warn-line:#e8d9a8;
  --warn-ink:#6b5410;
  --radius:12px;
  --topbar-h:60px;
}

*{box-sizing:border-box}
/* the screens are switched with the hidden attribute; without this the
   display rules below would outrank it and every screen would stack up */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

body{display:flex;flex-direction:column}

/* --------------------------------------------------------------- top bar */

.topbar{
  flex:0 0 auto;height:var(--topbar-h);display:flex;align-items:center;gap:14px;
  padding:0 22px;background:var(--card);border-bottom:1px solid var(--line);
}
.brand{
  display:flex;align-items:center;padding:4px;border:none;background:none;
  cursor:pointer;border-radius:6px;
}
.brand img{height:26px;width:auto;display:block}
.brand:hover{background:var(--accent-soft)}
.topbar-rule{width:1px;height:22px;background:var(--line)}
.topbar-name{font-size:14px;font-weight:600;color:var(--accent-deep);letter-spacing:.01em}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.who{font-size:12.5px;color:var(--muted)}
.btn.small{padding:5px 11px;font-size:12.5px}
.btn.ghost.danger{color:#8c2b23;border-color:#f3c3bf}
.btn.ghost.danger:hover{background:#fdeceb}
.btn.wide{width:100%;margin-top:6px}

/* ------------------------------------------------------- forms and tables */

/* the sign-in and password panels read as a card, clear of the page edges */
.intro.narrow{
  max-width:400px;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px;box-shadow:0 1px 3px rgba(16,24,40,.06);
}
.intro.narrow h1{font-size:22px;margin-bottom:8px}
.intro.narrow .lede{margin-bottom:0;font-size:13.5px}
.form{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.form.row{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.form.row label{flex:1 1 150px}
.form input,.form select{
  font-family:inherit;font-size:14px;padding:9px 11px;color:var(--ink);
  border:1px solid #d3d8df;border-radius:8px;background:#fff;
}
.form input:focus,.form select:focus{outline:none;border-color:var(--accent)}

.tabs{display:flex;gap:6px;margin:0 0 16px}
.tab{
  font-family:inherit;font-size:13px;padding:6px 14px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:20px;color:var(--muted);
}
.tab.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}

.files-table td{vertical-align:middle}
.row-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* the team list: the buttons wrap onto a second line rather than push the table wide */
/* adding to the master list */
.cl-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.cl-title h2{margin:0}
.cl-title .btn{margin-left:auto}
.ml-form{margin:18px 0 12px}
.ml-row{display:flex;flex-wrap:wrap;gap:12px}
.ml-row label{flex:1 1 200px}
.ml-form textarea{font-family:inherit;font-size:14px;padding:9px 11px;color:var(--ink);
  border:1px solid #d3d8df;border-radius:8px;background:#fff;resize:vertical;min-height:70px}
.ml-form textarea:focus{outline:none;border-color:var(--accent)}
.ml-form .opt{font-size:11.5px;color:var(--muted)}
.ml-actions{display:flex;justify-content:flex-end}
.settings.ml-table{table-layout:fixed}
.settings.ml-table th:nth-child(1){width:24%}
.settings.ml-table th:nth-child(3),.settings.ml-table td:nth-child(3){width:12%}
.settings.ml-table th:nth-child(4){width:17%}
.settings.ml-table th:nth-child(5){width:96px}
.settings.ml-table td{overflow-wrap:break-word;vertical-align:top}
.added-tag{display:inline-block;font-size:10.5px;line-height:1;padding:2px 6px;border-radius:9px;
  background:var(--accent-soft);color:var(--accent);vertical-align:1px}

/* the activity log */
.act-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:14px 0 16px}
.act-filters label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.act-filters select{font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid #d3d8df;
  border-radius:8px;background:#fff;color:var(--ink);min-width:170px}
.act-filters .btn{margin-left:auto}
.settings.act-table{table-layout:fixed}
.settings.act-table th:nth-child(1){width:17%}
.settings.act-table th:nth-child(2),.settings.act-table td:nth-child(2){width:24%}
.settings.act-table th:nth-child(3){width:22%}
.settings.act-table td{overflow-wrap:break-word;vertical-align:top}
.act-detail{font-size:13px}
.act-table tr.act-warn td{background:#fff8f7}
.settings.team-table{table-layout:fixed}
.settings.team-table th:nth-child(1){width:15%}
.settings.team-table th:nth-child(2){width:24%}
.settings.team-table th:nth-child(3),.settings.team-table td:nth-child(3){width:12%}
.settings.team-table th:nth-child(4){width:6%}
.settings.team-table th:nth-child(5){width:12%}
.settings.team-table td{overflow-wrap:break-word}
.nowrap{white-space:nowrap;font-size:12.5px;color:var(--muted)}
h3.sub{font-size:14px;margin:28px 0 0;color:var(--accent-deep)}

.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

/* ---------------------------------------------------------------- landing */

#start,#working,#signin,#newpass,#clDone{
  align-items:center;justify-content:center;padding:32px;overflow-y:auto;
}

.intro{width:100%;max-width:620px;text-align:center}
h1{font-size:30px;line-height:1.2;margin:0 0 12px;letter-spacing:-.02em}
.lede{color:var(--muted);font-size:15px;line-height:1.6;margin:0 auto 30px;max-width:520px}

.drop{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:52px 28px;
  background:var(--card);
  border:2px dashed #c8cdd5;
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.drop:hover{border-color:var(--accent);background:#fbfcfe}
.drop.over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01)}
.drop svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.drop .big{font-size:17px;font-weight:600}
.drop .small{font-size:13px;color:var(--muted)}
.drop u{text-decoration-color:#b9c2cd;text-underline-offset:3px}

.privacy{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.55}

/* ---------------------------------------------------------------- home */

.intro.wide{max-width:820px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:24px 22px;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.tile:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(16,24,40,.08)}
.tile svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.t-name{font-size:15.5px;font-weight:650}
.t-note{font-size:13px;color:var(--muted);line-height:1.55}

.linkish{
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:13px;color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:#b9c2cd;
}
.linkish:hover{text-decoration-color:var(--accent)}
.linkish.tiny{font-size:12px;margin-left:auto}

.tick{
  width:46px;height:46px;margin:0 auto 16px;border-radius:50%;
  background:#e7f3ea;color:#1f7a3d;font-size:24px;
  display:flex;align-items:center;justify-content:center;
}

/* ------------------------------------------------------ requirement list */

.cl-client{display:flex;gap:14px;margin:0 0 20px;flex-wrap:wrap}
.cl-client label{
  flex:1 1 240px;display:flex;flex-direction:column;gap:5px;
  font-size:12.5px;color:var(--muted);
}
.cl-client input,.cl-client select{
  font-family:inherit;font-size:14px;padding:8px 11px;color:var(--ink);
  border:1px solid #d3d8df;border-radius:8px;background:#fff;
}
.cl-client input:focus,.cl-client select:focus{outline:none;border-color:var(--accent)}
.cl-client .cl-jur{flex:0 0 160px}
.cl-client .cl-jur select{font-weight:600;color:var(--accent-deep);cursor:pointer}

.cl-groups{display:flex;flex-direction:column;gap:16px}
.cl-group{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.cl-group header{
  display:flex;align-items:center;gap:9px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:#fbfcfd;
}
.swatch{width:12px;height:12px;border-radius:3px;background:var(--swatch);
  border:1px solid rgba(0,0,0,.12);flex:0 0 auto}
.cl-app{font-size:13.5px;font-weight:650}
.cl-sub{font-size:12px;color:var(--muted)}

.cl-area{display:flex;align-items:center;gap:10px;padding:6px 16px}
.cl-area:hover{background:#fafbfc}
.cl-name{flex:1 1 auto;font-size:13.5px;cursor:pointer;line-height:1.45}
.cl-peek{
  flex:0 0 auto;font-family:inherit;font-size:11.5px;cursor:pointer;
  color:var(--muted);background:#f2f4f7;border:1px solid var(--line);
  border-radius:20px;padding:2px 10px;
}
.cl-peek:hover,.cl-peek.open{background:var(--accent-soft);color:var(--accent);
  border-color:var(--accent)}
.cl-reqs{
  margin:0 16px 8px 44px;padding:8px 0 8px 18px;font-size:12.5px;
  color:var(--muted);line-height:1.6;border-left:2px solid var(--accent-soft);
}
.cl-reqs li{margin-bottom:3px}

.cl-count{margin-left:auto;margin-right:4px;font-size:13px;color:var(--muted)}
.error{
  margin-top:18px;padding:12px 14px;border-radius:9px;font-size:14px;
  background:#fdeceb;border:1px solid #f3c3bf;color:#8c2b23;text-align:left;
}

/* ------------------------------------------------------------ setup table */

.setup{align-items:center;justify-content:flex-start;padding:40px 24px 60px;overflow-y:auto}
.setup-inner{width:100%;max-width:860px}
.setup h2{font-size:21px;margin:0 0 8px;letter-spacing:-.01em}
.setup-lede{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 6px}
.setup-hint{color:var(--muted);font-size:12.5px;line-height:1.55;margin:0 0 22px}

.settings{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.settings th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);padding:11px 14px;background:#f4f6f8;
  border-bottom:1px solid var(--line);font-weight:700;
}
.settings td{padding:9px 14px;border-bottom:1px solid #eef0f3;vertical-align:middle}
.settings tr:last-child td{border-bottom:none}
.settings th.inc-h,.settings td.inc{width:44px;padding-right:0;text-align:center}
.settings th.ord-h,.settings td.ord{width:78px;padding-right:6px}
.settings th:nth-child(3),.settings td:nth-child(3){width:30%}

.check{display:inline-flex;align-items:center;cursor:pointer;padding:4px}
.check input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);margin:0}

.settings tr.excluded .sec-name{text-decoration:line-through;color:var(--muted)}
.settings tr.excluded .sec-note{color:#9aa2ad}
.settings tr.excluded select{opacity:.45}
.settings tr.excluded .pos.out{background:#f0f2f5;color:#9aa2ad;font-size:12px}

.nothing-in{
  margin-left:auto;margin-right:4px;font-size:13px;color:#8c2b23;
  background:#fdeceb;border:1px solid #f3c3bf;border-radius:7px;padding:6px 11px;
}
.btn.primary:disabled{background:#b7c2cd;cursor:default}

.ord{display:flex;align-items:center;gap:7px}
.pos{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);font-size:11px;font-weight:700;flex:0 0 auto;
}
.arrows{display:flex;flex-direction:column;gap:2px}
.arrow{
  width:20px;height:13px;padding:0;line-height:1;font-size:8px;cursor:pointer;
  color:var(--muted);background:#fff;border:1px solid #d3d8df;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.arrow:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.arrow:disabled{opacity:.3;cursor:default}
.pinned{font-size:10.5px;color:var(--muted);letter-spacing:.02em}

@keyframes moved{from{background:var(--accent-soft)}to{background:transparent}}
.settings tr.moved td{animation:moved 1s ease-out}

.sec-name{display:block;font-size:14px;font-weight:600;line-height:1.3}
.sec-note{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}

.settings select{
  width:100%;padding:7px 9px;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:#fff;border:1px solid #d3d8df;border-radius:7px;cursor:pointer;
}
.settings select:hover{border-color:#aab3bd}
.settings select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}

.setup-notes{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.setup-notes .note{font-size:12.5px}
.setup-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}

/* ---------------------------------------------------------------- working */

.spinner{
  width:34px;height:34px;margin:0 auto 18px;border-radius:50%;
  border:3px solid #dfe3e9;border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.status{font-size:16px;font-weight:600;margin:0 0 6px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ---------------------------------------------------------------- result */

.result{overflow:hidden}

.bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 22px;background:var(--card);border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.doc-title{font-size:15px;font-weight:650;line-height:1.3}
.doc-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.bar-right{display:flex;gap:10px;align-items:center;flex:0 0 auto}

.btn{
  display:inline-block;padding:9px 16px;border-radius:8px;font-size:14px;
  font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;
  font-family:inherit;
}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-deep)}
.btn.ghost{background:#fff;color:var(--ink);border-color:#d3d8df}
.btn.ghost:hover{background:#f2f4f7}

.body{display:flex;flex:1 1 auto;min-height:0}

.rail{
  width:270px;flex:0 0 270px;padding:20px 18px;overflow-y:auto;
  background:var(--card);border-right:1px solid var(--line);
}
.rail h2{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin:0 0 12px;font-weight:700}
.sections{list-style:none;margin:0;padding:0;counter-reset:s}
.sections li{
  font-size:13.5px;line-height:1.45;padding:7px 0 7px 26px;position:relative;
  border-bottom:1px solid #f0f2f5;
}
.sections li:last-child{border-bottom:none}
.sections li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.notes{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.note{
  font-size:12.5px;line-height:1.5;padding:10px 12px;border-radius:9px;
  background:#f2f4f7;border:1px solid var(--line);color:var(--muted);
}
.note.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.note.ok{background:var(--accent-soft);border-color:#e3cde8;color:var(--accent-deep);margin:0 0 14px}
.note.ok code{font-family:Consolas,"Courier New",monospace;font-size:14px;font-weight:600;
  background:#fff;border:1px solid #e3cde8;border-radius:5px;padding:1px 6px;user-select:all}

/* the password rules tick themselves off as the new password is typed */
.pw-rules{list-style:none;margin:-4px 0 2px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
.pw-rules li{font-size:12px;color:var(--muted);padding-left:18px;position:relative}
.pw-rules li::before{content:"○";position:absolute;left:2px;top:0}
.pw-rules li.met{color:#2d6a3e}
.pw-rules li.met::before{content:"✓";font-weight:700}
.pw-field{display:flex;gap:6px;align-items:stretch}
.pw-field input{flex:1 1 auto;min-width:0}
.note b{display:block;margin-bottom:3px;color:inherit;font-size:12px}
.note ul{margin:4px 0 0;padding-left:16px}

.pages{flex:1 1 auto;overflow-y:auto;padding:26px 0 60px;background:var(--bg)}

/* ------------------------------------------------- the document preview */

.sheet{
  width:21cm;min-height:29.7cm;margin:0 auto 22px;
  /* the footer sits inside the page's bottom margin, as it does in Word,
     so the padding below it is the margin less the footer's own height */
  padding:1.27cm 2.03cm 1.13cm 2.54cm;
  background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.10),0 8px 24px rgba(16,24,40,.07);
  font-family:"Times New Roman",Times,serif;font-size:10pt;color:#000;line-height:1.2;
  display:flex;flex-direction:column;
}
.sheet.landscape{width:29.7cm;min-height:21cm}
.sheet .content{flex:1 1 auto;min-height:0}
.sheet.paged{height:29.7cm;min-height:0}
.sheet.paged.landscape{height:21cm}
.sheet.paged .content{overflow:hidden}

.sheet p{margin:0 0 6pt;text-align:justify}
.sheet p.tblock{text-align:left;margin:0 0 2pt}
.sheet p.tblock.centre{text-align:center}
.sheet p.tblock.last,.sheet p.tblock.keep{margin-bottom:10pt}
.sheet .keep{margin-top:6pt}
.sheet .keep.newnote{margin-top:18pt}
.sheet .keep.newnote-sp{margin-top:12pt}
.sheet .sp{height:6pt}

.runhdr{
  display:flex;flex-direction:column;margin-bottom:3pt;flex:0 0 auto;
}
/* the rule sits under the entity block, with 4pt of clear space below it */
.runhdr .co{font-size:14pt;border-bottom:1px solid #000;padding-bottom:1px;margin-bottom:4pt}
.runhdr.with-addr .co{border-bottom:none;padding-bottom:0;margin-bottom:0}
.runhdr .addr{font-size:10pt;border-bottom:1px solid #000;padding-bottom:1px;margin-bottom:4pt}
.runhdr .ttl{font-size:13pt}
.runhdr .per{font-size:10pt}

.runftr{
  flex:0 0 auto;margin-top:8pt;padding-top:3px;border-top:1px solid #000;
  font-size:9pt;
}

.sheet .numbered{padding-left:.9cm;text-indent:-.9cm}
.sheet .bullet{padding-left:1.25cm;text-indent:-.85cm}
.sheet .pfx{display:inline-block;min-width:.9cm;font-weight:inherit;text-indent:0}
/* text-indent:0 - the box would otherwise inherit the hanging indent and pull the number off the page */
.sheet .bullet .pfx{min-width:.85cm}

.sheet table{width:100%;border-collapse:collapse;margin:0;table-layout:fixed}
.sheet td{padding:0 2pt;vertical-align:bottom;word-wrap:break-word;line-height:1.22}
.sheet td:first-child{padding-left:0}
.sheet td:last-child{padding-right:0}
.sheet tr.gap td{height:.4em;font-size:5pt;line-height:1}
.sheet td.gutter{padding:0;border:none}

/* equal side margins on the cover, as in the Word file, so it centres on the paper */
.sheet.cover{justify-content:center;align-items:center;text-align:center;
  padding-left:2.54cm;padding-right:2.54cm}
.cover .cov-name{font-size:20pt;font-weight:700;margin-bottom:10pt}
.cover .cov-kind{font-size:14pt;font-weight:700;margin-bottom:8pt}
.cover .cov-per{font-size:11pt;font-weight:700}

.toc-h{font-size:13pt;font-weight:700;margin-bottom:14pt}
.toc{list-style:none;margin:0;padding:0;font-size:11pt}
.toc li{display:flex;align-items:baseline;gap:6px;margin-bottom:8pt}
.toc .dots{flex:1 1 auto;border-bottom:1px dotted #555;transform:translateY(-3px)}
.hint{font-size:8pt;font-style:italic;color:#666b72;margin-top:16pt}

@media (max-width:1150px){
  .rail{display:none}
  .sheet{width:100%;min-height:0;padding:1.2cm}
  .sheet.landscape{width:100%}
}