/* HCMOS™ website layer: the sign-in page and the public pages. 23 Oct 2026, doorway 24 Oct 2026.
 * Loaded through web_include_css AFTER the Website Theme, so it supersedes the theme's login rules
 * without touching the theme record. "html" prefixes keep these rules ahead of the theme's selectors
 * whatever order a page loads them in.
 *
 * Two kinds of page:
 *   1. Public pages (the Help guides and the like): the product type and colour, as before.
 *   2. Doorway pages (sign-in, document verification, not found, errors): the client's PUBLIC identity
 *      from the --hc-door-* tokens, so leaving the client's home page for sign-in feels like one place.
 *      Built only from hc_tokens.css; no raw colours below except shades of the photo overlay.
 */

/* ---------- 1. public pages: the product type and colour ---------- */
html body { font-family: var(--hc-font-ui); color: var(--hc-basalt-800); -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3 { font-family: var(--hc-font-display); font-weight: 600; color: var(--hc-text-1); letter-spacing: -0.005em; text-transform: none; }
html body a { color: var(--hc-brand-action); }
html body .btn { border-radius: var(--hc-radius-control); font-weight: 600; text-transform: none; letter-spacing: 0; }
html body .btn-primary { background: var(--hc-brand-action); border-color: var(--hc-brand-action); color: var(--hc-white); }
html body .btn-primary:hover, html body .btn-primary:focus { background: var(--hc-brand-action-hover); border-color: var(--hc-brand-action-hover); }
html body .form-control { border-radius: var(--hc-radius-control); }
html body .navbar { box-shadow: 0 1px 0 #E8ECF0; }

/* ---------- 2. doorway pages: shared frame ----------
 * sign-in (data-path="login"), document verification ("v"), not found ("404") and any error page. */
html body:is([data-path="login"], [data-path="update-password"], [data-path="v"], [data-path="404"], :has(.error-page)) {
  background: var(--hc-door-paper); color: var(--hc-door-ink); font-family: var(--hc-font-door-text);
}
html body:is([data-path="login"], [data-path="update-password"], [data-path="v"], [data-path="404"], :has(.error-page)) a { color: var(--hc-door-link); }
html body:is([data-path="login"], [data-path="update-password"], [data-path="v"], [data-path="404"], :has(.error-page)) :focus-visible {
  outline: 2px solid var(--hc-door-focus); outline-offset: 3px;
}
/* bar and footer on the verification and error pages (the sign-in page has neither) */
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) .navbar {
  background: var(--hc-door-paper) !important; box-shadow: 0 1px 0 var(--hc-door-line); border: 0;
}
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) .navbar::before { /* the flag hairline, once per screen */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hc-stripe);
}
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) .navbar .nav-link {
  font-family: var(--hc-font-door-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-door-ink) !important;
}
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) .web-footer,
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) footer {
  background: var(--hc-door-paper) !important; border-top: 1px solid var(--hc-door-line);
  font-family: var(--hc-font-door-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hc-door-muted);
}
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) footer a { color: var(--hc-door-ink); }
/* the theme greys footer text to #7c7c7c (3.7:1); the doorway's muted ink is 5.4:1 */
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) footer :is(div, span, p) { color: var(--hc-door-muted) !important; }
/* the top bar's own "Login" item repeats Frappe's sign-in link beside it: keep one */
html body .navbar .nav-item:has(> .nav-link[href="/login#login"]):has(~ .nav-item > .btn-login-area) { display: none; }

/* one button and one field, as on the home page */
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--hc-door-accent); color: var(--hc-door-on-accent) !important;
  font: 600 13px/1 var(--hc-font-door-mono); letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(18, 19, 22, 0.08);
}
html body:is([data-path="v"], [data-path="404"], :has(.error-page)) .btn-primary:hover { background: var(--hc-door-accent-hover); }

/* ---------- 3. sign-in: page frame ---------- */
html body[data-path="login"] #page-login .page_content {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: 100vh;
}
/* the theme's text-in-a-pseudo-element panel and footer give way to the real panel below */
html body[data-path="login"] #page-login .page_content::before,
html body[data-path="login"] #page-login .page_content > div::after { content: none !important; display: none !important; }

/* ---------- sign-in: brand panel (left), the business at work ---------- */
.hc-login-brand {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--hc-space-14) var(--hc-space-14) var(--hc-space-10);
  background:
    linear-gradient(180deg, rgba(11, 12, 14, 0.42) 0%, rgba(11, 12, 14, 0.28) 34%, var(--hc-door-shade) 78%),
    var(--hc-door-photo-work) center 60% / cover no-repeat,
    var(--hc-door-ink);
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}
.hc-login-brand::before { /* the flag hairline, once per screen */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hc-stripe);
}
.hc-login-brand .hc-lb-logo {
  align-self: flex-start;
  background: var(--hc-white);
  border-radius: 4px;
  padding: 10px 14px;
  line-height: 0;
}
.hc-login-brand .hc-lb-logo img { height: 34px; width: auto; }
.hc-login-brand .hc-lb-copy { margin-top: auto; max-width: 34rem; }
.hc-login-brand .hc-lb-kicker {
  display: flex; align-items: center; gap: 12px;
  font: 400 12px/1 var(--hc-font-door-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92); margin: 0 0 var(--hc-space-5);
}
.hc-login-brand .hc-lb-kicker::before { content: ""; width: 9px; height: 9px; background: var(--hc-door-accent); flex: none; }
html body .hc-login-brand .hc-lb-title {
  font-family: var(--hc-font-door-display); font-weight: 400; text-transform: var(--hc-door-display-case);
  font-size: clamp(48px, 4.8vw, 88px); line-height: 0.9; letter-spacing: 0.005em;
  color: var(--hc-white); margin: 0 0 var(--hc-space-5); text-wrap: balance;
}
html body .hc-login-brand .hc-lb-title em { font-style: normal; color: var(--hc-door-accent); }
.hc-login-brand .hc-lb-lede { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); margin: 0; max-width: 28rem; }
.hc-login-brand .hc-lb-facts {
  display: flex; flex-wrap: wrap; gap: var(--hc-space-2) var(--hc-space-5);
  margin: var(--hc-space-8) 0 0; padding: var(--hc-space-4) 0 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font: 400 11px/1.4 var(--hc-font-door-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
}

/* ---------- sign-in: form column (right) ---------- */
html body[data-path="login"] #page-login .page_content > div:not(.hc-login-brand) {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--hc-space-14) var(--hc-space-8);
  border: 0 !important; border-image: none !important;
  background: var(--hc-door-paper);
}
/* top of the form column: home link and the SW | EN switch */
.hc-login-top {
  position: absolute; top: var(--hc-space-5); left: var(--hc-space-8); right: var(--hc-space-8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--hc-space-4);
}
.hc-login-home {
  font: 400 12px/1.3 var(--hc-font-door-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hc-door-ink) !important; text-decoration: none !important; padding: 10px 0;
}
/* SW | EN: the bubble switch shared with the public site and ESS (Kira, 24 Oct 2026) */
.hc-lang { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none; padding: 3px; border-radius: 999px; background: var(--hc-door-card); box-shadow: inset 0 0 0 1px var(--hc-door-line); }
.hc-lang button {
  position: relative; z-index: 1; min-width: 44px; height: 36px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 12px/1 var(--hc-font-door-mono); letter-spacing: 0.08em; color: var(--hc-door-muted); transition: color .3s var(--hc-ease-out);
}
.hc-lang button[aria-pressed="true"] { color: var(--hc-door-on-accent); }
.hc-lang-bub { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--hc-door-accent); box-shadow: 0 1px 2px rgba(18, 19, 22, 0.2); transition: transform .46s cubic-bezier(.34, 1.45, .64, 1); }
.hc-lang[data-cur="en"] .hc-lang-bub { transform: translateX(100%); }
.hc-lang.go .hc-lang-bub { animation: hc-lang-stretch .46s cubic-bezier(.34, 1.2, .64, 1); }
@keyframes hc-lang-stretch { 0% { scale: 1 1; } 35% { scale: 1.28 .86; } 70% { scale: .96 1.04; } 100% { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .hc-lang-bub { transition: none; } .hc-lang.go .hc-lang-bub { animation: none; } }
html body[data-path="login"] .hc-forgot-hint { margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--hc-door-muted) !important; }
.hc-login-home:hover { text-decoration: underline !important; text-underline-offset: 4px; }
html body[data-path="login"] section[class^="for-"] { width: 400px; max-width: 100%; }
html body[data-path="login"] .page-card-head { text-align: left; margin-bottom: var(--hc-space-8); padding: 0; }
html body[data-path="login"] .page-card-head .app-logo,
html body[data-path="login"] .page-card-head h4 { display: none; }   /* replaced by the real heading below */
html body[data-path="login"] .hc-login-title {
  font-family: var(--hc-font-door-display); font-weight: 400; text-transform: var(--hc-door-display-case);
  font-size: 56px; line-height: 0.92; letter-spacing: 0.005em; color: var(--hc-door-ink); margin: 0;
}
html body[data-path="login"] .hc-login-sub { margin: var(--hc-space-3) 0 0; font-size: 16px; line-height: 1.5; color: var(--hc-door-muted); }

html body[data-path="login"] .page-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; width: 100%; }
html body[data-path="login"] .page-card-body { padding: 0; }
html body[data-path="login"] .form-signin { max-width: none; margin: 0; }
html body[data-path="login"] .form-group { margin: 0 0 var(--hc-space-5) !important; }
/* the theme's CSS-drawn field names give way to real labels (hc_web.js) */
html body[data-path="login"] .form-group::before { content: none !important; display: none !important; }
html body[data-path="login"] .hc-field-label {
  display: block; margin-bottom: 8px;
  font: 600 11px/1 var(--hc-font-door-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-door-ink);
}

html body[data-path="login"] .form-control {
  height: 50px; padding: 0 16px !important; margin: 0 !important;
  background: var(--hc-door-card) !important; border: 1px solid rgba(18, 19, 22, 0.24) !important; border-radius: 4px !important;
  font-family: var(--hc-font-door-text); font-size: 16px; color: var(--hc-door-ink);
  transition: border-color var(--hc-dur-quick) var(--hc-ease-out), box-shadow var(--hc-dur-quick) var(--hc-ease-out);
}
html body[data-path="login"] .form-control::placeholder { color: #767A82; }   /* 4.6:1 on white */
html body[data-path="login"] .form-control:focus {
  border-color: var(--hc-door-focus) !important; box-shadow: 0 0 0 3px rgba(0, 118, 209, 0.2); outline: none;
}
html body[data-path="login"] .email-field .form-control { border-left-width: 1px; }
html body[data-path="login"] .field-icon { display: none; }
html body[data-path="login"] .password-field { position: relative; }
html body[data-path="login"] .password-field .form-control { padding-right: 72px !important; }
html body[data-path="login"] .toggle-password {
  position: absolute; right: 14px !important; top: 50% !important; transform: translateY(-50%); line-height: 1;
  font: 600 11px/1 var(--hc-font-door-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hc-door-link) !important; cursor: pointer; padding: 8px 0;
}
html body[data-path="login"] .forgot-password-message { text-align: right; margin: -6px 0 0 !important; font-size: 14px; }
html body[data-path="login"] .forgot-password-message a { color: var(--hc-door-link) !important; font-weight: 700; }

html body[data-path="login"] .page-card-actions { margin-top: var(--hc-space-6); padding: 0; }
html body[data-path="login"] .btn-login,
html body[data-path="login"] .btn-forgot,
html body[data-path="login"] .btn-login-with-email-link-submit {
  height: 52px; border: 0; border-radius: 999px;
  background: var(--hc-door-accent); color: var(--hc-door-on-accent) !important;
  font: 600 13px/1 var(--hc-font-door-mono); letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(18, 19, 22, 0.08);
  transition: background-color var(--hc-dur-quick) var(--hc-ease-out), transform var(--hc-dur-press) var(--hc-ease-out);
}
html body[data-path="login"] .btn-login:hover, html body[data-path="login"] .btn-login:focus,
html body[data-path="login"] .btn-forgot:hover, html body[data-path="login"] .btn-forgot:focus,
html body[data-path="login"] .btn-login-with-email-link-submit:hover { background: var(--hc-door-accent-hover); }
html body[data-path="login"] .btn-login:focus-visible { box-shadow: 0 0 0 2px var(--hc-door-paper), 0 0 0 4px var(--hc-door-focus); }
html body[data-path="login"] .btn-login:active { transform: scale(0.99); }

html body[data-path="login"] .login-divider { color: var(--hc-door-muted); font-size: 13px; }
html body[data-path="login"] .btn-login-option {
  height: 48px; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--hc-door-ink);
  color: var(--hc-door-ink); font: 600 12px/1 var(--hc-font-door-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
html body[data-path="login"] .btn-login-option:hover { background: var(--hc-door-ink); color: var(--hc-white); }
html body[data-path="login"] .sign-up-message, html body[data-path="login"] .text-muted { color: var(--hc-door-muted) !important; }

/* employees have their own door: the phone app with mobile number and PIN */
.hc-login-ess {
  display: flex; align-items: center; gap: var(--hc-space-3);
  margin-top: var(--hc-space-8); padding: var(--hc-space-4) var(--hc-space-4);
  border-radius: 4px; background: var(--hc-door-card); box-shadow: inset 4px 0 0 var(--hc-door-accent), 0 1px 2px rgba(18, 19, 22, 0.06);
  color: var(--hc-door-ink) !important; text-decoration: none !important;
  transition: box-shadow var(--hc-dur-quick) var(--hc-ease-out), transform var(--hc-dur-quick) var(--hc-ease-out);
}
.hc-login-ess:hover { box-shadow: inset 4px 0 0 var(--hc-door-accent), 0 8px 20px -10px rgba(18, 19, 22, 0.35); transform: translateY(-1px); }
.hc-login-ess svg { flex: none; width: 22px; height: 22px; color: var(--hc-door-ink); }
.hc-login-ess span { display: block; font-size: 14px; line-height: 1.4; color: var(--hc-door-muted); }
.hc-login-ess strong { display: block; font-size: 15px; font-weight: 700; color: var(--hc-door-ink); }
.hc-login-ess .hc-arrow { margin-left: auto; color: var(--hc-door-ink); font-weight: 700; }
html body[data-path="login"] section:not(.for-login) .hc-login-ess { display: none; }

/* ---------- 4. document verification (/v): the Web Page keeps its words and its checks;
 *      its inline Arial-and-grey styling gives way to the doorway ---------- */
html body[data-path="v"] .page-content-wrapper, html body[data-path="v"] main { background: var(--hc-door-paper); }
html body[data-path="v"] #document-verification > div {
  max-width: 620px !important; padding: clamp(40px, 8vh, 88px) 20px clamp(48px, 10vh, 120px) !important;
  font-family: var(--hc-font-door-text) !important;
}
html body[data-path="v"] #document-verification > div > img,
html body[data-path="v"] #document-verification > div > table { display: none !important; }   /* the bar above carries logo and flag */
html body[data-path="v"] #document-verification h2 {
  font-family: var(--hc-font-door-display) !important; font-weight: 400 !important; text-transform: var(--hc-door-display-case);
  font-size: clamp(44px, 7vw, 72px) !important; line-height: 0.92 !important; letter-spacing: 0.005em; color: var(--hc-door-ink) !important;
  margin: 0 0 16px !important;
}
html body[data-path="v"] #document-verification h2::before {
  content: "Taifa HCMOS\2122"; display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font: 400 12px/1 var(--hc-font-door-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hc-door-ink);
  border-left: 9px solid var(--hc-door-accent); padding-left: 10px;
}
html body[data-path="v"] #document-verification p { color: var(--hc-door-muted) !important; font-size: 17px !important; line-height: 1.6 !important; margin: 0 0 28px !important; }
html body[data-path="v"] #tvf { gap: 10px !important; flex-wrap: wrap; }
html body[data-path="v"] #tvc {
  flex: 1 1 240px !important; height: 52px; padding: 0 16px !important;
  background: var(--hc-door-card); border: 1px solid rgba(18, 19, 22, 0.24) !important; border-radius: 4px !important;
  font: 600 17px/1 var(--hc-font-door-mono) !important; letter-spacing: 0.14em !important; color: var(--hc-door-ink);
}
html body[data-path="v"] #tvc:focus { border-color: var(--hc-door-focus) !important; box-shadow: 0 0 0 3px rgba(0, 118, 209, 0.2); outline: none; }
html body[data-path="v"] #tvf button {
  height: 52px; padding: 0 28px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--hc-door-accent) !important; color: var(--hc-door-on-accent) !important;
  font: 600 13px/1 var(--hc-font-door-mono) !important; letter-spacing: 0.08em; text-transform: uppercase;
}
html body[data-path="v"] #tvf button:hover { background: var(--hc-door-accent-hover) !important; }
html body[data-path="v"] #tvr > div { background: var(--hc-door-card); border-radius: 4px !important; padding: 22px 24px !important; }
html body[data-path="v"] #tvr > div > div:first-child { font-family: var(--hc-font-door-display); font-size: 30px !important; font-weight: 400 !important; text-transform: var(--hc-door-display-case); letter-spacing: 0.01em; }
html body[data-path="v"] #tvr > div > div:nth-child(2) { color: var(--hc-door-muted) !important; font-size: 15px !important; }
html body[data-path="v"] #tvr td { font-size: 15px !important; }
html body[data-path="v"] #tvr td:first-child { color: var(--hc-door-muted) !important; font: 400 11px/1.4 var(--hc-font-door-mono) !important; letter-spacing: 0.08em; text-transform: uppercase; }
html body[data-path="v"] .hc-v-label {
  display: block; width: 100%; margin-bottom: 2px;
  font: 600 11px/1 var(--hc-font-door-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-door-ink);
}

/* ---------- 5. not found and error pages ---------- */
html body:is([data-path="404"], :has(.error-page)) .error-page {
  display: block; text-align: left; max-width: 720px; margin: 0 auto;
  padding: clamp(48px, 12vh, 140px) 20px clamp(56px, 14vh, 160px);
}
html body:is([data-path="404"], :has(.error-page)) .error-page .img-404,
html body:is([data-path="404"], :has(.error-page)) .error-page img { display: none; }
html body:is([data-path="404"], :has(.error-page)) .error-page h2 {
  font-family: var(--hc-font-door-display); font-weight: 400; text-transform: var(--hc-door-display-case);
  font-size: clamp(56px, 10vw, 120px); line-height: 0.88; letter-spacing: 0.005em; color: var(--hc-door-ink); margin: 0 !important;
}
html body:is([data-path="404"], :has(.error-page)) .error-page h2::before {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font: 400 12px/1 var(--hc-font-door-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hc-door-ink);
  border-left: 9px solid var(--hc-door-accent); padding-left: 10px;
}
/* the kicker is written by hc_web.js in the page's language */
html body:is([data-path="404"], :has(.error-page)) .error-page h2[data-kicker]::before { content: attr(data-kicker); }
html body:is([data-path="404"], :has(.error-page)) .error-page .error-text {
  margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--hc-door-muted) !important; max-width: 34rem;
}
html body:is([data-path="404"], :has(.error-page)) .error-page .back-to-home { margin-top: 32px !important; }

/* ---------- phones and narrow windows ---------- */
@media (max-width: 900px) {
  html body[data-path="login"] #page-login .page_content { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  html body[data-path="login"] section[class^="for-"] { width: 100%; }
  html body[data-path="login"] #page-login .page_content > div:not(.hc-login-brand) { align-items: stretch; }
  .hc-login-brand { min-height: 248px; padding: var(--hc-space-6) var(--hc-space-6) var(--hc-space-6); }
  .hc-login-brand .hc-lb-copy { margin-top: auto; padding-top: var(--hc-space-8); }
  html body .hc-login-brand .hc-lb-title { font-size: 44px; margin-bottom: 0; }
  .hc-login-brand .hc-lb-kicker { margin-bottom: var(--hc-space-3); }
  .hc-login-brand .hc-lb-lede, .hc-login-brand .hc-lb-facts { display: none; }
  html body[data-path="login"] #page-login .page_content > div:not(.hc-login-brand) { padding: var(--hc-space-8) var(--hc-space-6) var(--hc-space-10); justify-content: flex-start; }
  .hc-login-top { position: static; margin: -8px 0 var(--hc-space-4); align-self: stretch; }
  html body[data-path="login"] .hc-login-title { font-size: 48px; }
}
/* short, wide windows (a laptop with a small screen, a tablet on its side): keep the form in view */
@media (min-width: 901px) and (max-height: 760px) {
  .hc-login-brand { padding-top: var(--hc-space-8); padding-bottom: var(--hc-space-8); }
  html body .hc-login-brand .hc-lb-title { font-size: clamp(44px, 4.2vw, 72px); }
  html body[data-path="login"] .page-card-head { margin-bottom: var(--hc-space-6); }
  html body[data-path="login"] .hc-login-title { font-size: 48px; }
  .hc-login-ess { margin-top: var(--hc-space-6); }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-path="login"] .form-control, html body[data-path="login"] .btn-login, .hc-login-ess { transition: none; }
  .hc-login-ess:hover { transform: none; }
}

/* ---------- 6. set a new password (/update-password, the page the reset email opens) ---------- */
html body[data-path="update-password"] .page-content-wrapper { background: var(--hc-door-paper); }
html body[data-path="update-password"] .page_content { max-width: 440px; margin: 0 auto; padding: clamp(24px, 6vh, 72px) 0; }
html body[data-path="update-password"] .hc-login-top { position: static; margin-bottom: var(--hc-space-8); }
html body[data-path="update-password"] .page-card-head { text-align: left; padding: 0 !important; margin: 0 0 var(--hc-space-8); }
html body[data-path="update-password"] .page-card-head h4 { display: none; }
html body[data-path="update-password"] .hc-login-title {
  font-family: var(--hc-font-door-display); font-weight: 400; text-transform: var(--hc-door-display-case);
  font-size: 52px; line-height: 0.92; letter-spacing: 0.005em; color: var(--hc-door-ink); margin: 0;
}
html body[data-path="update-password"] .hc-login-sub { margin: var(--hc-space-3) 0 0; font-size: 16px; line-height: 1.5; color: var(--hc-door-muted); }
html body[data-path="update-password"] .page-card { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; }
html body[data-path="update-password"] .hc-field-label {
  display: block; margin-bottom: 8px; font: 600 11px/1 var(--hc-font-door-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-door-ink);
}
html body[data-path="update-password"] .form-control {
  height: 50px; padding: 0 16px; margin-bottom: 0 !important; background: var(--hc-door-card) !important; border: 1px solid rgba(18, 19, 22, 0.24) !important;
  border-radius: 4px !important; font-family: var(--hc-font-door-text); font-size: 16px; color: var(--hc-door-ink);
}
html body[data-path="update-password"] .form-control:focus { border-color: var(--hc-door-focus) !important; box-shadow: 0 0 0 3px rgba(0, 118, 209, 0.2); outline: none; }
html body[data-path="update-password"] .form-group { margin-bottom: var(--hc-space-5); }
html body[data-path="update-password"] .btn-update {
  height: 52px; margin-top: var(--hc-space-4); border: 0; border-radius: 999px; background: var(--hc-door-accent) !important; color: var(--hc-door-on-accent) !important;
  font: 600 13px/1 var(--hc-font-door-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
html body[data-path="update-password"] .btn-update[disabled] { background: #E4E1D8 !important; color: #5C636E !important; }
html body[data-path="update-password"] :is(.password-strength-message, .password-mismatch-message) { color: var(--hc-door-muted) !important; font-size: 13px; }
html body[data-path="update-password"] .navbar { background: var(--hc-door-paper) !important; box-shadow: 0 1px 0 var(--hc-door-line); }
html body[data-path="update-password"] footer, html body[data-path="update-password"] .web-footer { background: var(--hc-door-paper) !important; }
html body[data-path="update-password"] footer :is(div, span, p) { color: var(--hc-door-muted) !important; }

/* ---------- 7. the maker's mark on the sign-in pages (Kira, 24 Oct 2026) ---------- */
.hc-sig {
  display: block; margin-top: var(--hc-space-8); text-align: center;
  font: 400 11px/1.4 var(--hc-font-door-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hc-door-muted) !important; text-decoration: none !important;
}
.hc-sig b { font-weight: 600; color: var(--hc-door-ink); }
.hc-sig:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 901px) {   /* desktop: pinned to the foot of the form column, clear of the form */
  html body[data-path="login"] #page-login .page_content > div:not(.hc-login-brand) { padding-bottom: 88px; }
  html body[data-path="login"] #page-login .page_content > div:not(.hc-login-brand) > .hc-sig { position: absolute; left: 0; right: 0; bottom: var(--hc-space-6); margin: 0; }
}