/* توقيع «أثر ممتد» — الصفحة الخارجية لموظفي الجامعة.
   الفكرة: الخطّ الذي رسم البرج هو الخطّ الذي كتب الأربعين (PHILOSOPHY.md). أزرق الهوية أرضًا، والأبيض حبرًا،
   وشبكة الرسم المعماري الخافتة في الترويسة، ومربّعات الهوية فاصلًا. لا ألوان سوى ذلك، وذهبيّ الرمز لمسةً للتفاعل. */
:root {
  --blue: #1f4ac2;
  --blue-deep: #17388f;
  --blue-ink: #10275f;
  --ink: #211f1f;
  --muted: #5d6680;
  --paper: #f3f5fa;
  --card: #ffffff;
  --line: #dde3ef;
  --gold: #d2a42a;
  --radius: 14px;
  --font: effra-cc-variable, "Effra", Tahoma, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ───────── الترويسة: لوحة المعماري ───────── */
.hero { position: relative; color: #fff; background-color: var(--blue); overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 8px; }
.topbar .lockup { height: 53px; width: auto; display: block; margin: -4px 0; }   /* الملفّ الرسميّ 02 يحمل مسافة الحماية داخله */
.topbar .dept { font-size: 13px; color: rgba(255,255,255,.82); text-align: left; line-height: 1.4; }
.topbar .dept b { display: block; color: #fff; font-weight: 600; }
.stage-wrap { position: relative; margin: 18px auto 0; width: min(960px, 100%); aspect-ratio: 3 / 1; }
.stage-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy { text-align: center; padding: 30px 0 36px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.85); }
.eyebrow::before, .eyebrow::after { content: ""; width: 28px; height: 1px; background: rgba(255,255,255,.55); }
.hero h1 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.15; margin: 12px 0 10px; font-weight: 700; }
.hero p.lead { font-size: clamp(16px, 1.7vw, 19px); color: rgba(255,255,255,.88); max-width: 640px; margin: 0 auto; }
.cta-row { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 16px; border-radius: 999px;
  padding: 13px 26px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-light { background: #fff; color: var(--blue); box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); }
.btn-light:hover { box-shadow: 0 14px 34px -12px rgba(0,0,0,.55); }
.btn-ghost-light { color: #fff; background: transparent; padding-inline: 6px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.45); }
.privacy { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: rgba(255,255,255,.82); }
.privacy svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* مربّعات الهوية: ثلاثة صفوف بيضاء تختم الترويسة كما تختم التوقيع */
/* مربّعات الهويّة: ثلاثة صفوف من مربّعاتٍ زرقاء 6px، بينها وبين الترويسة مسافة مربّع، وبين كلّ مربّعٍ وآخر مسافة مربّع */
.fringe { --sq: 6px; height: calc(var(--sq) * 5); margin-top: var(--sq);
  background: conic-gradient(from 90deg at var(--sq) var(--sq), transparent 75%, var(--blue) 0) right top / calc(var(--sq) * 2) calc(var(--sq) * 2); }
.fringe-foot { margin-top: 56px; }
.hero p.hashtag { margin: 14px 0 0; font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; letter-spacing: .02em; color: #fff; }
footer .tag { color: #fff; font-weight: 600; }

/* ───────── خطوات ثلاث ───────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: -1px auto 0; padding: 34px 0 6px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step .n { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; font-size: 17px; }
.step h3 { margin: 2px 0 2px; font-size: 16.5px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* ───────── المولّد ───────── */
.section-title { display: flex; align-items: baseline; gap: 14px; margin: 44px 0 18px; }
.section-title h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.section-title .rule { flex: 1; height: 1px; background: var(--line); }
.builder { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 26px; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16,39,95,.04), 0 18px 40px -26px rgba(16,39,95,.35); }
.form { padding: 22px 22px 8px; }
.group { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--line); }
.group:last-child { border: 0; margin-bottom: 0; }
.group > .label { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; margin-bottom: 12px; }
.group > .label::before { content: ""; width: 9px; height: 9px; background: var(--blue); transform: rotate(45deg); }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind { appearance: none; text-align: right; cursor: pointer; font: inherit; border: 1.5px solid var(--line); background: #fbfcfe; border-radius: 12px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.kind b { display: block; font-size: 15px; color: var(--ink); }
.kind span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kind[aria-pressed="true"] { border-color: var(--blue); background: #f2f5fd; box-shadow: 0 0 0 3px rgba(31,74,194,.12); }
.types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.type { appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: #fbfcfe; color: var(--muted); border-radius: 999px; padding: 7px 13px; display: inline-flex; align-items: center; gap: 8px; }
.type i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.type[aria-pressed="true"] { color: #fff; border-color: transparent; }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field label small { font-weight: 400; color: var(--muted); }
.field input, .field select { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fbfcfe; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s, background .2s; }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(31,74,194,.14); }
.field input[aria-invalid="true"] { border-color: #d0452f; box-shadow: 0 0 0 3px rgba(208,69,47,.12); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.affix { display: flex; direction: ltr; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.affix:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,74,194,.14); background: #fff; }
.affix span { display: flex; align-items: center; padding: 0 12px; color: var(--muted); font-size: 14px; background: #eef1f8; white-space: nowrap; }
.affix input { border: 0; border-radius: 0; background: transparent; box-shadow: none !important; }
.affix.bad { border-color: #d0452f; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.preview { position: sticky; top: 18px; overflow: hidden; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.preview-head h3 { margin: 0; font-size: 15px; }
.seg { display: inline-flex; background: #eef1f8; border-radius: 999px; padding: 3px; }
.seg button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 999px; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(16,39,95,.15); }
.desk { padding: 22px; background:
  linear-gradient(rgba(31,74,194,.045) 1px, transparent 1px) 0 0 / 22px 22px,
  linear-gradient(90deg, rgba(31,74,194,.045) 1px, transparent 1px) 0 0 / 22px 22px, #f7f9fd; }
.mail { background: #fff; border-radius: 12px; box-shadow: 0 12px 34px -18px rgba(16,39,95,.45); margin: 0 auto; max-width: 660px; transition: max-width .35s ease; overflow: hidden; }
.mail.phone { max-width: 360px; }
.mail-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1f3f8; border-bottom: 1px solid #e6eaf3; font-size: 12.5px; color: var(--muted); }
.mail-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #cfd6e6; display: inline-block; }
.mail-chrome span { margin-inline-start: 8px; }
.mail-fields { padding: 10px 16px 0; font-size: 13px; color: var(--muted); }
.mail-fields div { padding: 6px 0; border-bottom: 1px solid #f0f2f7; }
.mail-body { padding: 16px 16px 18px; }
.mail-body p { margin: 0 0 14px; font-size: 14px; color: #3a4256; }
.mail.phone .mail-body { padding: 14px 10px 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px 18px; border-top: 1px solid var(--line); background: #fff; }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 12px 26px -14px rgba(31,74,194,.85); border-radius: 12px; }
.btn-blue:hover { background: var(--blue-deep); }
.btn-soft { background: #eef1f8; color: var(--ink); border-radius: 12px; }
.btn-soft:hover { background: #e3e8f4; }
.btn svg { width: 18px; height: 18px; }

/* ───────── الضبط في Gmail ───────── */
.install { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; margin: 0; padding: 0; }
.install li { list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: relative; }
.install li::before { counter-increment: s; content: counter(s, arabic-indic); display: grid; place-items: center; width: 34px; height: 34px; background: var(--blue); color: #fff; font-weight: 700; margin-bottom: 12px; }
.install b { color: var(--blue-ink); }
.install kbd { font-family: inherit; font-size: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }
.note { margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: 12px; padding: 14px 16px; font-size: 14.5px; }
.note svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gold); margin-top: 2px; }

.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 15px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--blue); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; color: #444b60; }

/* ───────── التذييل ───────── */
footer { margin-top: 6px; background: var(--blue); color: rgba(255,255,255,.86); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 26px 0 30px; font-size: 13.5px; }
footer img { height: 46px; width: auto; display: block; margin: -4px 0; }

.toast { position: fixed; inset-inline-start: 50%; bottom: 26px; transform: translate(50%, 20px); background: var(--blue-ink); color: #fff; padding: 13px 20px; border-radius: 12px; font-weight: 600; font-size: 14.5px; display: flex; gap: 10px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 18px 40px -14px rgba(0,0,0,.5); z-index: 20; }
.toast.show { opacity: 1; transform: translate(50%, 0); }
.toast svg { width: 18px; height: 18px; color: #7fe0a8; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 960px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
  .install { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .topbar .dept { display: none; }
  .topbar .lockup { height: 46px; }
  .stage-wrap { aspect-ratio: 3 / 1.25; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .two, .kinds { grid-template-columns: 1fr; }
  .install { grid-template-columns: 1fr; }
  .desk { padding: 12px 8px; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }