/* 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%; }
html body.task-login { 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; } }

/* ───────── Roundcube's own login form (markup from the loginform object), restyled ───────── */
body.task-login #layout { display: block !important; height: auto !important; min-height: 100vh; overflow: visible !important; background: var(--paper) !important; }
#layout-content.glam-login { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 100vh; overflow: visible !important; background: none !important; border: 0 !important; padding: 0 !important; }
.voice { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#login-form { margin: 30px 0 0 !important; padding: 0 !important; background: none !important; max-width: none !important; }
#login-form table, #login-form table.table { width: 100%; margin: 0; border-collapse: collapse; background: none; }
#login-form tbody, #login-form tr, #login-form tr.form-group.row { display: block !important; margin: 0; padding: 0; border: 0; }
#login-form tr + tr { margin-top: 24px !important; }
#login-form td, #login-form table.table td { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; width: auto !important; }
#login-form td.title { padding-bottom: 8px !important; text-align: start; }
#login-form td.title label { display: block; font: 500 11px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
#login-form tr:focus-within td.title label { color: var(--green); }
#login-form td.input.input-group { display: block !important; }
#login-form .input-group-prepend, #login-form .input-group-append, #login-form .input-group-text { display: none !important; }
#login-form input.form-control { display: block; width: 100% !important; height: 54px; padding: 0 2px !important; border: 0 !important; border-bottom: 1px solid var(--edge) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--green) !important; font: 400 19px/1 var(--body) !important; box-shadow: none !important; outline: none; transition: border-color .2s, box-shadow .2s; }
#login-form input.form-control:hover { border-bottom-color: var(--green) !important; }
#login-form input.form-control:focus { border-bottom-color: var(--green) !important; box-shadow: 0 1px 0 0 var(--green) !important; }
#login-form input.form-control::placeholder { color: #8aa096; opacity: 1; }
#login-form input[type="password"].form-control { letter-spacing: .16em; }
#login-form input.form-control:-webkit-autofill { -webkit-text-fill-color: var(--green); box-shadow: 0 0 0 40px #fff inset, 0 1px 0 0 var(--green) !important; }
[dir="rtl"] #login-form input.form-control { direction: ltr; text-align: right; }
#login-form p.formbuttons { margin: 34px 0 0 !important; padding: 0; text-align: start; }
#rcmloginsubmit, #rcmloginsubmit.btn, #rcmloginsubmit.btn-primary, #rcmloginsubmit.btn-lg { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; margin: 0;
  border: 1px solid var(--green) !important; border-radius: 0 !important; background: var(--green) !important; color: #fff !important; box-shadow: none !important;
  font: 500 13px/1 var(--label) !important; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; overflow: hidden; transition: background .25s; }
#rcmloginsubmit::after { content: ""; width: 18px; height: 1px; background: var(--gold); transition: width .3s var(--ease); }
#rcmloginsubmit:hover { background: var(--green-deep) !important; }
#rcmloginsubmit:hover::after { width: 30px; }
#rcmloginsubmit:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
#rcmloginsubmit.is-busy { pointer-events: none; }
#rcmloginsubmit.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; }
[dir="rtl"] #rcmloginsubmit::after { order: -1; }
[lang="ar"] #login-form td.title label { letter-spacing: 0; text-transform: none; font: 600 13px/1.2 var(--ar); }
[lang="ar"] #rcmloginsubmit { letter-spacing: 0 !important; text-transform: none; font: 600 16px/1 var(--ar) !important; }
.one-login { margin: 16px 0 0; font: italic 400 15px/1.5 var(--body); color: var(--soft); }
[lang="ar"] .one-login { font: 400 14px/1.6 var(--ar); }
/* Roundcube's message bar (wrong password, session expired) as a note on the letter. */
#messagestack { position: fixed; inset-block-start: 16px; inset-inline-end: 16px; z-index: 50; max-width: 420px; }
#messagestack > div { border-radius: 0 !important; border: 0 !important; border-inline-start: 3px solid var(--alert) !important; background: #fff !important; color: var(--alert) !important;
  box-shadow: 0 12px 30px -12px rgba(10,47,35,.35) !important; font: 400 15px/1.45 var(--body) !important; padding: 14px 16px !important; }
#messagestack > div.confirmation { border-inline-start-color: var(--green) !important; color: var(--green) !important; }
.noscriptwarning { margin: 0; padding: 16px; text-align: center; background: var(--tint); }
@media (max-width: 880px) { #login-form { margin-top: 24px !important; } }

/* Elastic's own login rules that fight this layout (seen live 31 Oct): the form is pushed 180px down,
   the page is locked to the screen height with hidden overflow, and text is centred. */
html, html body.task-login { height: auto !important; min-height: 100% !important; overflow: visible !important; overflow-x: hidden !important; }
#login-form { position: static !important; top: auto !important; inset: auto !important; transform: none !important; }
#layout-content.glam-login, #layout-content.glam-login * { text-align: start; }
#layout-content.glam-login .mast, #layout-content.glam-login .tag, #layout-content.glam-login .mast *, #layout-content.glam-login .tag * { text-align: center; }
#layout-content.glam-login #rcmloginsubmit { text-align: center; }
/* The Turnstile check sits between the password and the button, full width like the fields. */
#login-form .turnstile2a { margin: 24px 0 0 !important; padding: 0 !important; display: block; width: 100%; }
#login-form .turnstile2a iframe { max-width: 100%; }

/* ───────── One entrance: the gate reads where you are going ───────── */
.seal__g { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .25s ease; }
.seal__mail, .seal__key { opacity: 0; color: var(--gold); }
.seal__mail svg, .seal__key svg { width: 34px; height: 34px; }
.to-mail .seal__j, .to-admin .seal__j { opacity: 0; }
.to-mail .seal__mail, .to-admin .seal__key { opacity: 1; }
.seal.turn { animation: sealturn .5s cubic-bezier(.3,1.4,.5,1) both !important; opacity: 1; }
@keyframes sealturn { 0% { transform: rotate(-4deg) scale(1); } 45% { transform: rotateY(90deg) scale(.92); } 100% { transform: rotate(-4deg) scale(1); } }
/* Mailbox: every window glows; administration: the central tower alone, the wings dim. */
.to-mail .pal .win { animation: none !important; fill-opacity: .95 !important; transition: fill-opacity .4s; }
.to-admin .pal .win { animation: none !important; fill-opacity: .18 !important; transition: fill-opacity .4s; }
.to-admin .pal .win.mid { fill-opacity: 1 !important; filter: drop-shadow(0 0 6px rgba(243,210,122,.9)); }
.route { min-height: 1.4em; margin: 12px 0 0; font: italic 400 15px/1.4 var(--body); color: var(--gold-deep); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s var(--ease); }
.route.on { opacity: 1; transform: none; }
.route.err { color: var(--alert); font-style: normal; }
.route::before { content: "→ "; }
[dir="rtl"] .route::before { content: "← "; }
[lang="ar"] .route { font: 400 14px/1.5 var(--ar); }
.to-admin #login-form .turnstile2a { display: none !important; }
.door-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font: 400 14px/1.4 var(--body); }
.door-links a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.door-links a:hover { color: var(--green); text-decoration-color: var(--green); }
[lang="ar"] .door-links { font-family: var(--ar); }

/* Roundcube's message stack is an empty full-height box when idle; it must never catch clicks
   (31 Oct: it covered the sign-in button on desktop). Only the messages themselves are clickable. */
#messagestack { height: auto !important; max-height: 60vh; bottom: auto !important; pointer-events: none !important; }
#messagestack > div { pointer-events: auto !important; }