/* ============================================================
   HEALTHCARE.CSS
   Page-specific styles for the Healthcare Staffing case study.
   Requires: tokens.css, base.css, case-study.css
   ============================================================ */

/* ── GATE (password screen) ── */

#gate{
  position:fixed;inset:0;z-index:500;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.gate-card{
  width:100%;max-width:400px;
  border:1px solid var(--rule);
  padding:48px 40px;
  background:var(--white);
}
.gate-eyebrow{
  font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--d30);margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.gate-eyebrow::before{content:'';width:24px;height:1px;background:var(--d30)}
.gate-title{
  font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-0.02em;
  color:var(--black);line-height:1.15;margin-bottom:10px;
}
.gate-sub{
  font-family:var(--sans);font-size:13px;font-weight:300;color:var(--d50);
  line-height:1.65;margin-bottom:36px;
}
.gate-field-label{
  font-family:var(--mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--d30);margin-bottom:8px;
}
.gate-input{
  width:100%;padding:12px 14px;
  font-family:var(--sans);font-size:16px;font-weight:400;
  border:1px solid var(--rule);background:var(--surface);
  color:var(--black);outline:none;cursor:none;
  transition:border-color 0.2s;margin-bottom:12px;
}
.gate-input:focus{border-color:var(--black)}
.gate-input::placeholder{color:var(--d30)}
.gate-btn{
  width:100%;padding:13px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white);background:var(--black);border:none;cursor:none;
  transition:opacity 0.2s;
}
.gate-btn:hover{opacity:0.8}
.gate-error{
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.06em;
  color:var(--red);margin-top:10px;display:none;
}
.gate-error.visible{display:block}
.gate-request{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:12px;font-weight:300;color:var(--d50);line-height:1.65;
}
.gate-request a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color 0.2s;cursor:none}
.gate-request a:hover{border-color:var(--black)}


/* ── CONTENT (hidden until unlocked) ── */

#content{display:none;width:100%;overflow-x:hidden}


/* ── CONFIDENTIALITY NOTICE ── */

.confidentiality-bar{
  background:var(--panel-bg);border-bottom:1px solid var(--panel-border);backdrop-filter:blur(14px);
  padding:14px 48px;display:flex;align-items:center;gap:14px;
}
.conf-dot{width:6px;height:6px;border-radius:50%;background:var(--alert);flex-shrink:0;box-shadow:0 0 6px var(--alert)}
.conf-text{font-family:var(--mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-low);transition:color var(--trans)}


/* ── UNIT STAFFING LAYOUT ── */

.unit-staffing-layout{display:grid;grid-template-columns:58% 1fr;gap:12px;margin:24px 0;align-items:start}
.unit-staffing-main{}
.unit-staffing-side{display:flex;flex-direction:column;gap:12px}


/* ── FLEXWISE MONITOR PAIR — sizing ── */

.frame-pair--monitors .device-monitor-wrap { width: 360px; max-width: 100%; }
@media(max-width:860px) {
  .frame-pair--monitors .frame-entry { max-width: 650px; width: 100%; }
  .frame-pair--monitors .device-monitor-wrap { width: 100%; max-width: 650px; }
}