/* Asset portal — shares the client document design system. */

:root{
  --ink:#1d2024;
  --muted:#4d5257;
  --light:#82878c;
  --red:#c8102e;
  --rule:#e2e2e0;
  --tint:#fdf5f5;
  --sans:"Segoe UI",-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#f2f2f0; color:var(--ink);
  font-family:var(--sans); font-size:10pt; line-height:1.48;
}
.page{padding:22px 16px 60px;}

.sheet{
  max-width:210mm; margin:0 auto 18px; padding:12mm 13mm;
  background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.09);
}
h1,h2{font-weight:700; margin:0; line-height:1.18;}
h1{font-size:19pt; letter-spacing:-.015em;}
h2{
  font-size:12.5pt; margin:0 0 8px; padding-bottom:4px;
  border-bottom:2px solid var(--red);
}
p{margin:0 0 7px; max-width:74ch;}
.muted{color:var(--muted)} .small{font-size:9pt} .light{color:var(--light)}
.err{color:var(--red); font-weight:600;}

.top{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:12px; flex-wrap:wrap;}
.eyebrow{font-size:8.5pt; letter-spacing:.18em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:6px;}
.meta{text-align:right; font-size:9pt; color:var(--muted); line-height:1.7;}
.meta b{color:var(--ink)}
.marklogo{width:120px; display:block; margin:0 0 8px auto;}

.lede{
  border-left:3px solid var(--red); background:var(--tint);
  padding:9px 13px; margin:9px 0 14px; font-size:9.6pt; max-width:none;
}
.secintro{margin-bottom:8px;}

/* ── checklist ── */
ul.chk{list-style:none; margin:2px 0 8px; padding:0;}
ul.chk li{
  position:relative; padding:10px 0 12px 30px; margin:0;
  font-size:9.4pt; border-bottom:1px solid var(--rule);
}
ul.chk li:last-child{border-bottom:0;}
ul.chk li::before{
  content:""; position:absolute; left:2px; top:13px;
  width:13px; height:13px; border:1.4px solid #8f8f8b; border-radius:2px;
  background:#fff;
}
ul.chk li.done::before{background:var(--red); border-color:var(--red);}
ul.chk li.done::after{
  content:""; position:absolute; left:7px; top:15.5px;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg);
}
ul.chk b{color:var(--ink);}
ul.chk .why{color:var(--muted);}
ul.chk li.drag{background:var(--tint); outline:1.5px dashed var(--red); outline-offset:-4px;}

.tag{
  display:inline-block; font-size:7.2pt; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:1px 6px; border-radius:2px; margin-left:6px; vertical-align:1px;
  white-space:nowrap;
}
.tag.m{background:var(--red); color:#fff;}
.tag.p{background:#efefec; color:var(--muted); border:1px solid #d8d8d4;}

.note{
  background:#fcfcfa; border:1px solid var(--rule); border-left:3px solid var(--red);
  padding:8px 12px; margin:9px 0; font-size:9.2pt; max-width:none;
}
.note b{color:var(--ink)}

.foot{
  max-width:210mm; margin:0 auto; padding-top:7px;
  border-top:1px solid var(--rule); font-size:8.5pt; color:var(--light);
}

/* ── controls injected per item ── */
.controls{margin-top:8px;}
.ctlrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.btn{
  font:inherit; font-size:9.2pt; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid #b9b9b5; border-radius:3px;
  padding:9px 16px; cursor:pointer; min-height:38px;
}
.btn:hover{border-color:var(--red); color:var(--red);}
.linky{
  font:inherit; font-size:8.8pt; color:var(--light); background:none; border:0;
  padding:4px 0; cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.linky:hover{color:var(--red);}
input[type=text],input[type=email],input[type=url],textarea{
  font:inherit; font-size:9.4pt; color:var(--ink);
  width:100%; max-width:560px;
  border:1px solid #c9c9c5; border-radius:3px; background:#fff;
  padding:9px 11px; margin-top:6px;
}
input:focus,textarea:focus{outline:none; border-color:var(--red);}
textarea{resize:vertical;}
.linkinput{display:block;}
.reason{display:block;}

.files{margin:2px 0 4px;}
.filerow{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:5px 8px; margin:3px 0; background:#fafaf8; border:1px solid var(--rule);
  border-radius:3px; font-size:9pt;
}
.filerow.err{border-color:var(--red); background:var(--tint);}
.fname{font-weight:600; word-break:break-all;}
.fsize{color:var(--light); white-space:nowrap;}
.fbar{flex:1 1 90px; height:2px; background:var(--rule); min-width:70px;}
.fbar i{display:block; height:100%; width:0%; background:var(--red); transition:width .15s;}
.fmsg{color:var(--red); font-size:8.8pt;}
.fdel{
  font:inherit; font-size:11pt; line-height:1; color:var(--light);
  background:none; border:0; cursor:pointer; padding:4px 8px; margin-left:auto;
}
.fdel:hover{color:var(--red);}

.choice label{display:block; margin:5px 0; cursor:pointer;}
.choice input[type=radio]{accent-color:var(--red); margin-right:7px;}

/* ── progress strip ── */
#progresswrap{
  position:sticky; top:0; z-index:20;
  background:#fff; border-bottom:1px solid var(--rule);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.progress-inner{
  max-width:210mm; margin:0 auto; padding:9px 16px;
  display:flex; align-items:center; gap:14px;
}
#progresstext{font-size:8.8pt; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
.pbar{flex:1; height:3px; background:var(--rule);}
.pbar i{display:block; height:100%; width:0%; background:var(--red); transition:width .25s;}

/* ── submit / confirmation ── */
.frow{display:flex; gap:14px; flex-wrap:wrap; margin:6px 0 2px;}
.frow label{flex:1 1 220px; font-size:9pt; font-weight:600; color:var(--muted);}
.hp{position:absolute; left:-6000px; top:-6000px; height:1px; width:1px; opacity:0;}
.primary{
  font:inherit; font-size:10pt; font-weight:700; color:#fff;
  background:var(--red); border:0; border-radius:3px;
  padding:12px 24px; margin-top:8px; cursor:pointer; min-height:44px;
}
.primary:hover{background:#a90d26;}
.primary:disabled{opacity:.55; cursor:default;}
.ghost{
  font:inherit; font-size:9.4pt; font-weight:600; color:var(--red);
  background:#fff; border:1px solid var(--red); border-radius:3px;
  padding:10px 18px; cursor:pointer; min-height:40px;
}
.refcode{
  font-size:20pt; font-weight:700; letter-spacing:.08em; color:var(--red);
  margin:6px 0 10px;
}

/* ── gate ── */
.gate{text-align:center; padding-top:18mm; padding-bottom:18mm;}
.gatelogo{width:170px; max-width:70%; margin-bottom:14px;}
.gate-h{border-bottom:0; font-size:14pt;}
.gate p{margin-left:auto; margin-right:auto;}

/* ── small screens ── */
@media (max-width:560px){
  .page{padding:14px 8px 40px;}
  .sheet{padding:20px 16px;}
  .meta{text-align:left;}
  .marklogo{margin:0 0 8px 0;}
  .progress-inner{padding:9px 12px;}
  ul.chk li{padding-left:26px;}
}