/* Developers Gate public and portal pages (dg_portal). Mobile first, logical properties only (the same sheet serves right-to-left Arabic, the
   default, and left-to-right English), no external font, image or script: the pages make no request to a third party (T-I18N-FONT).

   Colour tokens are the provisional brand tokens v0.1 (docs/brand/DG_BRAND_TOKENS.md, dg_brand.css); the derived values are re-measured:
   ink #122543 on paper #FCFCFC is 15.6:1, navy #02204A with white text is 16:1, steel #2A5D8B on white is 6.9:1, gold-ink #8A6420 on cream is 5.1:1,
   the error colour #9B1C1C on white is 8.2:1. Gold is used for rules and ornaments, never for small text (WCAG 2.2 AA, 1.4.3 / 1.4.11).

   FONT HOOK (WP-I18N): fonts are self-hosted later. Put the woff2 files under static/src/fonts/ and add, for each face, a block of the form
       @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/dg_portal/static/src/fonts/<file>.woff2") format("woff2"); font-display: swap; }
   The stacks below already name the approved faces first and fall back to system fonts, so nothing else changes. */
:root {
  --dg-navy: #02204A;
  --dg-ink: #122543;
  --dg-steel: #2A5D8B;
  --dg-steel-soft: #45556B;
  --dg-gold-700: #A7783D;
  --dg-gold-600: #CB963F;
  --dg-gold-ink: #8A6420;
  --dg-tan: #CAAD7E;
  --dg-cream: #F9F6EE;
  --dg-paper: #FCFCFC;
  --dg-brown-text: #62533D;
  --dg-error: #9B1C1C;
  --dg-error-bg: #FDF1F1;
  --dg-ok: #14532D;
  --dg-ok-bg: #EFF8F1;
  --dg-line: #D7D2C4;
  --dg-focus: #02204A;
  --dg-font-ar: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --dg-font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dg-radius: 8px;
  --dg-gap: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html[dir="rtl"] { font-family: var(--dg-font-ar); }
html[dir="ltr"] { font-family: var(--dg-font-latin); }
body { margin: 0; background: var(--dg-cream); color: var(--dg-ink); font-size: 1rem; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--dg-steel); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--dg-navy); }
:focus-visible { outline: 3px solid var(--dg-focus); outline-offset: 3px; border-radius: 2px; }
.dg-skip { position: absolute; inset-inline-start: 8px; top: -100px; background: var(--dg-navy); color: #fff; padding: 12px 16px; z-index: 100; border-radius: var(--dg-radius); }
.dg-skip:focus { top: 8px; }
.dg-hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dg-header { background: var(--dg-navy); color: #fff; border-block-end: 4px solid var(--dg-gold-600); }
.dg-header a { color: #fff; }
.dg-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; max-inline-size: 1100px; margin-inline: auto; }
.dg-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
/* LOGO SLOT: the originals of the logo are not available (DG_BRAND_TOKENS.md, Owner request 1). Replace this box by the supplied artwork. */
.dg-logo-slot { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: 2px solid var(--dg-gold-600); border-radius: 10px; color: var(--dg-gold-600); font-weight: 800; letter-spacing: 1px; }
.dg-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.dg-nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 8px; }
.dg-nav a[aria-current="page"] { border-block-end: 3px solid var(--dg-gold-600); }
.dg-main { flex: 1 0 auto; inline-size: 100%; max-inline-size: 1100px; margin-inline: auto; padding: 24px 16px 48px; }
.dg-main:focus { outline: none; }
.dg-footer { background: var(--dg-paper); border-block-start: 1px solid var(--dg-line); padding: 16px; color: var(--dg-brown-text); font-size: 0.9rem; }
.dg-footer-inner { max-inline-size: 1100px; margin-inline: auto; }
h1 { color: var(--dg-navy); font-size: 1.6rem; line-height: 1.3; margin: 0 0 8px; border-block-end: 2px solid var(--dg-gold-600); padding-block-end: 8px; }
h2 { color: var(--dg-ink); font-size: 1.25rem; margin: 24px 0 8px; }
h3 { font-size: 1.05rem; margin: 16px 0 4px; }
.dg-lead { color: var(--dg-brown-text); margin: 0 0 16px; }
.dg-card { background: var(--dg-paper); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 16px; margin-block: 16px; }
.dg-grid { display: grid; gap: var(--dg-gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .dg-grid.cols-2 { grid-template-columns: 1fr 1fr; } .dg-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.dg-tile { display: block; text-decoration: none; color: var(--dg-ink); background: var(--dg-paper); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 16px; min-block-size: 44px; }
.dg-tile:hover { border-color: var(--dg-gold-700); }
.dg-tile strong { display: block; font-size: 1.8rem; color: var(--dg-navy); }
.dg-form { display: grid; gap: var(--dg-gap); }
.dg-field { display: grid; gap: 4px; }
.dg-field label, .dg-field legend { font-weight: 600; }
.dg-hint { color: var(--dg-steel-soft); font-size: 0.9rem; margin: 0; }
.dg-req { color: var(--dg-error); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="file"], input[type="number"], select, textarea {
  inline-size: 100%; min-block-size: 44px; padding: 8px 12px; border: 1px solid var(--dg-steel-soft); border-radius: var(--dg-radius); background: #fff; color: var(--dg-ink); font: inherit;
}
textarea { min-block-size: 140px; resize: vertical; }
input[type="checkbox"] { inline-size: 24px; block-size: 24px; margin-inline-end: 8px; vertical-align: middle; }
.dg-check { display: flex; align-items: flex-start; gap: 8px; }
.dg-field[data-invalid] input, .dg-field[data-invalid] select, .dg-field[data-invalid] textarea { border-color: var(--dg-error); border-width: 2px; }
.dg-error { color: var(--dg-error); font-weight: 600; margin: 0; }
.dg-alert { border-radius: var(--dg-radius); padding: 12px 16px; margin-block: 16px; border: 1px solid; }
.dg-alert.error { background: var(--dg-error-bg); border-color: var(--dg-error); color: var(--dg-error); }
.dg-alert.ok { background: var(--dg-ok-bg); border-color: var(--dg-ok); color: var(--dg-ok); }
.dg-alert.note { background: #fff; border-color: var(--dg-gold-700); color: var(--dg-brown-text); }
.dg-btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding: 8px 20px; border-radius: var(--dg-radius); border: 2px solid var(--dg-navy); background: var(--dg-navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.dg-btn:hover { background: var(--dg-ink); color: #fff; }
.dg-btn.secondary { background: #fff; color: var(--dg-navy); }
.dg-btn.secondary:hover { background: var(--dg-cream); color: var(--dg-navy); }
.dg-btn.danger { background: #fff; color: var(--dg-error); border-color: var(--dg-error); }
.dg-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.dg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 8px; }
.dg-table-wrap { overflow-x: auto; }
table.dg-table { inline-size: 100%; border-collapse: collapse; background: var(--dg-paper); }
.dg-table th, .dg-table td { text-align: start; padding: 10px 12px; border-block-end: 1px solid var(--dg-line); vertical-align: top; }
.dg-table th { background: #fff; color: var(--dg-navy); }
.dg-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--dg-steel-soft); font-size: 0.85rem; color: var(--dg-ink); background: #fff; }
.dg-badge.ok { border-color: var(--dg-ok); color: var(--dg-ok); }
.dg-badge.warn { border-color: var(--dg-gold-ink); color: var(--dg-gold-ink); }
.dg-badge.bad { border-color: var(--dg-error); color: var(--dg-error); }
.dg-dl { display: grid; grid-template-columns: 1fr; gap: 4px 16px; margin: 0; }
@media (min-width: 640px) { .dg-dl { grid-template-columns: minmax(140px, 220px) 1fr; } }
.dg-dl dt { font-weight: 600; color: var(--dg-steel-soft); }
.dg-dl dd { margin: 0; overflow-wrap: anywhere; }
.dg-timeline { list-style: none; margin: 0; padding: 0; border-inline-start: 3px solid var(--dg-gold-600); }
.dg-timeline li { padding: 4px 16px 12px; position: relative; }
.dg-terms { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 16px; max-block-size: 480px; overflow: auto; }
.dg-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.dg-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.dg-sig { border: 2px dashed var(--dg-steel-soft); border-radius: var(--dg-radius); background: #fff; inline-size: 100%; max-inline-size: 480px; block-size: 160px; touch-action: none; display: block; }
.dg-pager { display: flex; gap: 12px; align-items: center; margin-block: 16px; }
.dg-placeholder { background: #fff8e6; border: 1px dashed var(--dg-gold-700); padding: 8px 12px; border-radius: var(--dg-radius); }
.dg-lang { color: #fff; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .dg-btn, .dg-badge, .dg-card { border: 2px solid ButtonText; } }
@media print { .dg-header, .dg-footer, .dg-actions, .dg-skip { display: none; } body { background: #fff; } }