/* Dry Creek , Hunter Portal concept mockups, rendered in the Light & Bright system.
   Loaded only on portal.html, on top of styles.css (tokens/nav/footer/buttons). */

.portal-note{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:var(--brick);background:rgba(168,57,43,.07);
  border:1px solid rgba(168,57,43,.22);padding:7px 15px;border-radius:40px;margin-top:20px}
.portal-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brick)}

.mock{padding:clamp(40px,6vh,76px) var(--gutter);border-bottom:1px solid var(--hairline)}
.mock-head{margin-bottom:clamp(22px,3vh,34px)}
.mock-head .num{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--brick);text-transform:uppercase}
.mock-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,36px);color:var(--ink);margin:10px 0 8px}
.mock-head p{color:var(--bark);font-size:16px;line-height:1.6;max-width:60ch}

/* browser frame */
.mock-frame{background:var(--white);border-radius:12px;overflow:hidden;border:1px solid var(--hairline);
  box-shadow:0 36px 80px -38px rgba(40,36,28,.5);max-width:1080px}
.mock-bar{display:flex;align-items:center;gap:16px;padding:13px 18px;background:var(--bone-deep);
  border-bottom:1px solid var(--hairline)}
.mock-dots{display:flex;gap:7px}
.mock-dots i{width:11px;height:11px;border-radius:50%;background:var(--hairline-strong);display:block}
.mock-url{font-family:var(--mono);font-size:12px;color:var(--bark);background:var(--white);
  border:1px solid var(--hairline);border-radius:20px;padding:6px 16px}
.mock-screen{background:var(--bone);padding:clamp(22px,3.2vw,42px)}

/* UI atoms */
.ui-card{background:var(--white);border:1px solid var(--hairline);border-radius:10px;padding:22px 24px}
.ui-label{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);display:block}
.dash-nav,.hunt-row .k,.wv-meta .k,.adm-chip,.adm-table th{font-weight:500}
.portal-note,.mock-head .num,.mock-url{font-weight:400}
.ui-h{font-family:var(--serif);font-weight:600;color:var(--ink)}
.ui-input{display:block;background:var(--bone);border:1px solid var(--hairline-strong);border-radius:4px;
  padding:12px 14px;font-size:14px;color:var(--bark);font-family:var(--sans)}
.ui-btn{display:inline-block;background:var(--brick);color:#fff;font-family:var(--label);font-weight:600;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:13px 22px;border-radius:3px;text-align:center}
.ui-badge{font-family:var(--label);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 11px;border-radius:30px;font-weight:600;white-space:nowrap}
.badge-lead{background:rgba(110,100,82,.16);color:var(--bark)}
.badge-contact{background:rgba(60,90,64,.16);color:var(--forest)}
.badge-customer{background:rgba(168,57,43,.12);color:var(--brick)}
.badge-paid{background:rgba(60,90,64,.16);color:var(--forest)}
.badge-due{background:rgba(168,57,43,.12);color:var(--brick)}

/* 1. Login */
.mock-login{max-width:360px;margin:clamp(16px,4vh,46px) auto;text-align:center}
.mock-login img{height:32px;width:auto;margin:0 auto 8px}
.mock-login .sub{color:var(--bark);font-size:14px;margin-bottom:22px}
.mock-login form{display:flex;flex-direction:column;gap:12px;text-align:left}
.mock-login .ui-btn{margin-top:6px}
.mock-login .forgot{font-size:13px;color:var(--brick);margin-top:16px}

/* 2. Dashboard */
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:14px}
.dash-nav{display:flex;gap:22px;font-family:var(--label);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bark)}
.dash-nav .on{color:var(--brick)}
.dash-avatar{width:34px;height:34px;border-radius:50%;background:var(--brick);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--label);font-size:13px;font-weight:600}
.dash-welcome{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,28px);color:var(--ink);margin-bottom:18px}
.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.hunt-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:14px;color:var(--ink)}
.hunt-row:last-child{border-bottom:0}
.hunt-row .k{color:var(--taupe);font-family:var(--label);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.wv-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--hairline);font-size:14px;color:var(--ink)}
.wv-item:last-child{border-bottom:0}

/* 3. Waiver */
.wv-doc{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.wv-paper p{font-size:13px;line-height:1.75;color:var(--bark);margin-bottom:10px}
.wv-sign{border-top:1px solid var(--hairline);margin-top:18px;padding-top:18px}
.wv-sig{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--ink);
  border-bottom:1px solid var(--hairline-strong);display:inline-block;padding:2px 36px}
.wv-meta li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--hairline);font-size:13px;color:var(--ink);list-style:none}
.wv-meta .k{color:var(--taupe);font-family:var(--label);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* 4. Admin */
.adm-filters{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.adm-chip{font-family:var(--label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 15px;border-radius:30px;border:1px solid var(--hairline-strong);color:var(--bark)}
.adm-chip.on{background:var(--brick);border-color:var(--brick);color:#fff}
.adm-wrap{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.adm-table th{text-align:left;font-family:var(--label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--taupe);padding:11px 12px;border-bottom:1px solid var(--hairline-strong)}
.adm-table td{padding:14px 12px;border-bottom:1px solid var(--hairline);color:var(--ink)}
.adm-table tr:last-child td{border-bottom:0}

@media(max-width:760px){
  .dash-grid,.wv-doc{grid-template-columns:1fr}
  .mock-screen{padding:18px}
  .dash-nav{display:none}
}