/* The Glam Room — Private Post. Sign-in pages on mail.theglamroom.qa (webmail and panel).
   "The palace lights up for the evening post": the masthead palace draws itself in gold on night
   green, its windows light one by one, then Jassim's seal is pressed on the seam of the letter.
   Fonts are the site's own files served from this host (the CSP allows fonts from 'self' only). */
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url(fonts/playfair-display-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/playfair-display-latin-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url(fonts/jost-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url(fonts/jost-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-display: swap; src: url(fonts/source-serif-4-latin-opsz-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200F; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200F; }

:root {
  --green: #0e3b2c; --green-deep: #0a2f23; --night: #061f17; --paper: #ffffff; --tint: #edf2ef;
  --muted: #3f5a4f; --soft: #5d7469; --line: #d3dfd8; --edge: #7d9389;
  --gold: #d9b45f; --gold-hi: #f3d27a; --gold-deep: #a9832f; --alert: #9b2c1f;
  --display: "Playfair Display", "IBM Plex Sans Arabic", Didot, "Bodoni 72", Georgia, serif;
  --body: "Source Serif 4", "IBM Plex Sans Arabic", Georgia, serif;
  --label: "Jost", "IBM Plex Sans Arabic", Futura, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --ar: "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--green); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--green); color: var(--paper); }
a { color: inherit; }

/* ───────── Stage: the palace at night | the letter ───────── */
.stage { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(440px, 1fr); }

.scene { position: relative; isolation: isolate; z-index: 2; color: #edf2ef; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 22px;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px) clamp(30px, 4vw, 56px);
  background: radial-gradient(70% 50% at 50% 66%, rgba(217,180,95,.16), transparent 70%), linear-gradient(180deg, var(--night), var(--green-deep) 58%, #041a12); }
/* A fine engraving line around the scene, like the frame of a print. */
.scene::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(217,180,95,.22); pointer-events: none; z-index: -1; }
.scene::after { content: ""; position: absolute; inset: 19px; border: 1px solid rgba(217,180,95,.10); pointer-events: none; z-index: -1; }

.mast { text-align: center; }
.mast__word { direction: ltr; display: flex; justify-content: center; font: 700 clamp(22px, 3.2vw, 40px)/1 var(--display); letter-spacing: .24em; margin-inline-start: .24em; color: #fff; }
.mast__word i { font-style: normal; opacity: 0; transform: translateY(.4em); animation: rise .8s var(--ease) forwards; }
.mast__word .sp { width: .45em; }
.mast__by { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font: italic 500 clamp(14px, 1.4vw, 17px)/1 var(--display); color: var(--gold); opacity: 0; animation: fade 1s ease 1.1s forwards; }
.mast__by span { width: clamp(28px, 4vw, 56px); border-top: 1px solid currentColor; }

.pal-clip { width: min(100%, 760px); overflow: hidden; padding: 24px 0 0; }
.pal { display: block; width: 100%; height: auto; overflow: visible; }
.pal use { display: none; }
.pal .ln { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: draw 1.4s var(--ease) forwards; }
/* Foundations first, then upward: the engraving is ordered roughly top-down in the file, so later
   strokes start a little later and the building rises as one gesture (~2.6 s). */
/* The dormer windows and the gate diamonds light up one by one once the walls are drawn. */
.pal .win { fill: var(--gold-hi); fill-opacity: 0; animation: draw 1.4s var(--ease) forwards, lamp 1.6s ease forwards; }
.pal { filter: drop-shadow(0 0 0 rgba(217,180,95,0)); animation: glow 1.6s ease 3.2s forwards; }

.tag { text-align: center; max-width: 34ch; }
.tag__h { margin: 0; font: italic 500 clamp(22px, 2.4vw, 32px)/1.2 var(--display); color: #fff; text-wrap: balance; opacity: 0; animation: rise .9s var(--ease) 3.3s forwards; }
.tag__p { margin: 10px 0 0; font: 400 11px/1.6 var(--label); letter-spacing: .26em; text-transform: uppercase; color: rgba(237,242,239,.72); opacity: 0; animation: fade 1s ease 3.6s forwards; }

/* ───────── The seal, pressed on the seam between the night and the letter ───────── */
.seal { position: absolute; z-index: 5; inset-block-start: 50%; inset-inline-end: -46px; width: 92px; height: 92px; margin-top: -46px; display: grid; place-items: center;
  border-radius: 47% 53% 50% 50% / 52% 48% 53% 47%; background: radial-gradient(circle at 34% 30%, #1d5a44, var(--green) 45%, #072519 100%);
  box-shadow: 0 10px 24px -8px rgba(4,26,18,.65), inset 0 2px 3px rgba(255,255,255,.18), inset 0 -4px 8px rgba(0,0,0,.35);
  opacity: 0; transform: scale(1.7) rotate(-14deg); animation: stamp .55s cubic-bezier(.3,1.5,.5,1) 4s forwards; }
.seal::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px solid var(--gold); box-shadow: inset 0 0 0 3px rgba(217,180,95,.25); }
.seal b { font: 700 38px/1 var(--display); color: var(--gold); text-shadow: 0 1px 0 rgba(0,0,0,.35); transform: translateY(-1px); }
.seal::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: ripple 1.1s ease-out 4.35s; }

/* ───────── The letter ───────── */
.panel { position: relative; display: flex; flex-direction: column; min-height: 100%; background: var(--paper); padding: 0 clamp(36px, 5vw, 76px); }
.panel__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; border-bottom: 4px double var(--green); }
.panel__mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 13px/1 var(--display); letter-spacing: .24em; }
.panel__mark img { width: 30px; height: 30px; border-radius: 7px; }
.lang { display: flex; gap: 4px; }
.lang a { font: 500 12px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--soft); padding: 12px 8px; border-bottom: 2px solid transparent; }
.lang a[lang="ar"] { font-family: var(--ar); letter-spacing: 0; text-transform: none; font-size: 14px; }
.lang a[aria-current="true"] { color: var(--green); border-bottom-color: var(--green); }
.lang a:hover { color: var(--green); }
.panel__body { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 420px; margin: 0 auto; padding: clamp(40px, 7vh, 80px) 0; }

.kicker { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 11px/1 var(--label); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.kicker::before { content: ""; width: 28px; border-top: 1px solid var(--gold-deep); }
.greet { margin: 18px 0 0; font: 700 clamp(32px, 3.4vw, 44px)/1.08 var(--display); color: var(--green); }
.lede { margin: 12px 0 0; color: var(--muted); font-size: 17px; }
.in { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) forwards; animation-delay: var(--d, 0ms); }

.btn-glam { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; border: 1px solid var(--green); border-radius: 0;
  background: var(--green); color: #fff; font: 500 13px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; overflow: hidden; transition: background .25s, transform .25s var(--ease); }
.btn-glam::after { content: ""; width: 18px; height: 1px; background: var(--gold); transition: width .3s var(--ease); }
.btn-glam:hover { background: var(--green-deep); }
.btn-glam:hover::after { width: 30px; }
.btn-glam:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.btn-glam.is-busy { pointer-events: none; }
.btn-glam.is-busy::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(243,210,122,.35), transparent); animation: sweep 1.1s linear infinite; }
.btn-ghost { background: var(--paper); color: var(--green); }
.btn-ghost:hover { background: var(--tint); }

.field-label { display: block; margin-bottom: 8px; font: 500 11px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.field-input { display: block; width: 100%; height: 54px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--edge); border-radius: 0; background: transparent; color: var(--green);
  font: 400 19px/1 var(--body); outline: none; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.field-input:hover { border-bottom-color: var(--green); }
.field-input:focus { border-bottom-color: var(--green); box-shadow: 0 1px 0 0 var(--green); }
.field-input:-webkit-autofill { -webkit-text-fill-color: var(--green); box-shadow: 0 0 0 40px #fff inset, 0 1px 0 0 var(--green); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 18px 0 22px; border-top: 1px solid var(--line); font: 400 12px/1.5 var(--label); color: var(--soft); }
.foot__secure { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.foot p { margin: 0; }
.notice { margin: 22px 0 0; padding: 12px 14px; border-inline-start: 3px solid var(--alert); background: #fbf1ef; color: var(--alert); font: 400 15px/1.45 var(--body); }
.notice.ok { border-color: var(--green); background: var(--tint); color: var(--green); }

/* Arabic: no letter-spacing, Plex for every line (Playfair has no Arabic). */
[lang="ar"] .kicker, [lang="ar"] .field-label, [lang="ar"] .btn-glam, [lang="ar"] .tag__p, [lang="ar"] .foot { letter-spacing: 0; text-transform: none; font-family: var(--ar); }
[lang="ar"] .kicker, [lang="ar"] .field-label { font-size: 13px; font-weight: 600; }
[lang="ar"] .btn-glam { font-size: 16px; font-weight: 600; }
[lang="ar"] .greet, [lang="ar"] .tag__h { font-family: var(--ar); font-style: normal; font-weight: 600; line-height: 1.35; }
[lang="ar"] .tag__p { font-size: 14px; }
[lang="ar"] .mast__by { font: 400 15px/1.2 var(--ar); }
[lang="ar"] .lede { font-family: var(--ar); font-size: 16px; }
[dir="rtl"] .field-input { direction: ltr; text-align: right; }
[dir="rtl"] .btn-glam::after { order: -1; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes lamp { 0% { fill-opacity: 0; } 30% { fill-opacity: .9; } 45% { fill-opacity: .35; } 100% { fill-opacity: .85; } }
@keyframes glow { to { filter: drop-shadow(0 0 18px rgba(217,180,95,.35)); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-14deg); } 70% { opacity: 1; transform: scale(.9) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(-4deg); } }
@keyframes ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ───────── Phone: the palace becomes a band above the letter; the seal sits on its edge ───────── */
@media (max-width: 880px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .scene { padding: 26px 20px 50px; gap: 14px; }
  .scene::before { inset: 8px; } .scene::after { inset: 12px; }
  .pal-clip { width: min(100%, 520px); }
  .pal { max-height: 30vh; }
  .tag { display: none; }
  .seal { inset-block-start: auto; inset-block-end: -38px; inset-inline-end: calc(50% - 38px); width: 76px; height: 76px; margin: 0; }
  .seal b { font-size: 31px; }
  .panel { padding: 30px 20px 0; }
  .panel__top { min-height: 56px; }
  .panel__body { padding: 52px 0 36px; justify-content: flex-start; }
  .greet { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition: none !important; }
}
@media (forced-colors: active) { .btn-glam { border: 1px solid ButtonText; } }

/* ───────── Panel form pieces ───────── */
.auth { margin-top: 30px; }
.field + .field { margin-top: 24px; }
.field:focus-within .field-label { color: var(--green); }
.field__wrap { position: relative; }
.field-input--pass { padding-inline-end: 48px; letter-spacing: .16em; }
[dir="rtl"] .field-input--pass { padding-inline-end: 2px; padding-inline-start: 48px; }
.reveal { position: absolute; inset-block: 0; inset-inline-end: 0; width: 46px; display: grid; place-items: center; border: 0; background: none; color: var(--soft); cursor: pointer; }
[dir="rtl"] .reveal { inset-inline-end: auto; inset-inline-start: 0; }
.reveal:hover, .reveal[aria-pressed="true"] { color: var(--green); }
.reveal:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.reveal .i-hide, .reveal[aria-pressed="true"] .i-show { display: none; }
.reveal[aria-pressed="true"] .i-hide { display: block; }
.field__aside { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 22px; margin: 10px 0 0; font: 400 14px/1.4 var(--body); }
.caps { color: var(--alert); }
.link { margin-inline-start: auto; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.link:hover { color: var(--green); text-decoration-color: var(--green); }
#adm-submit { margin-top: 30px; }
.or { display: flex; align-items: center; gap: 14px; margin: 18px 0; font: italic 400 14px/1 var(--body); color: var(--soft); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
#passkey-msg { min-height: 1.4em; margin: 12px 0 0; font: 400 14px/1.4 var(--body); color: var(--soft); }
#passkey-msg.ok { color: var(--green); } #passkey-msg.err { color: var(--alert); }
.btn-glam:disabled { opacity: .5; cursor: not-allowed; }
[lang="ar"] .link, [lang="ar"] .field__aside, [lang="ar"] #passkey-msg, [lang="ar"] .or { font-family: var(--ar); font-style: normal; }