/* =============================================================================
   الجمعية المغربية لكفالة اليتيم — نظام إدارة الموارد — نظام تصميم
   لوحة ألوان مؤسسية هادئة (أخضر مزرق للثقة + عنبري دافئ للإنسانية)، مبنية
   لأداة عمل يومية لأخصائيين اجتماعيين (وضوح وسرعة القراءة أولوية على الزخرفة).
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&family=Tajawal:wght@400;500;700;900&display=swap');
/* Readex Pro هو الخط الأساسي (Light/300 هو الوزن الافتراضي المطلوب)؛ Tajawal
   يبقى احتياطيًا (fallback) فقط لأنه يدعم وزن 900 الذي لا يوفره Readex Pro،
   ولضمان استمرار العرض الصحيح فورًا لو تعطّل تحميل الخط الأول لأي سبب. */

:root {
  --ink: #16262a;
  --ink-soft: #46595d;
  --paper: #f3f6f5;
  --surface: #ffffff;
  --line: #dbe4e2;
  --line-strong: #b9c7c4;

  --primary: #1f5c56;
  --primary-dark: #123b37;
  --primary-tint: #e5efed;

  --accent: #b8801f;
  --accent-tint: #f7ecd8;

  --success: #2f7d4f;
  --success-tint: #e6f2ea;
  --warning: #b8801f;
  --warning-tint: #f7ecd8;
  --danger: #b23a3a;
  --danger-tint: #fbe9e9;
  --info: #2c5f8a;
  --info-tint: #e8eff5;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(22, 38, 42, 0.06), 0 6px 20px rgba(22, 38, 42, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Readex Pro', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 300; /* Readex Pro Light */
  font-size: 12pt;
  line-height: 1.6;
}

body { direction: rtl; }

h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 700; color: var(--ink); }
h1 { font-size: 1.7rem; font-weight: 900; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; color: var(--ink-soft); }

a { color: var(--primary); }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- تخطيط عام ---------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--primary-dark);
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; }
.topbar .brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; font-size: 1.1rem;
}
.topbar .brand-text { font-weight: 700; font-size: 1.05rem; }
.topbar .brand-sub { font-size: .78rem; opacity: .75; }
.topbar .user-box { display: flex; align-items: center; gap: 14px; font-size: .9rem; }
.topbar .user-box .who { opacity: .9; }
.topbar button.link-btn { background: none; border: none; color: #fff; opacity: .85; cursor: pointer; text-decoration: underline; }

.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 28px 0; background: var(--surface);
  border-bottom: 1px solid var(--line); /* يلتف الشريط على سطرين بدل أن تخرج التبويبات الأخيرة عن الشاشة */
}
.tab-btn {
  white-space: nowrap; flex: 0 0 auto;
  border: none; background: none; padding: 12px 18px; cursor: pointer;
  font-weight: 700; color: var(--ink-soft); border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
}
.tab-btn.active { color: var(--primary-dark); border-bottom-color: var(--accent); background: var(--primary-tint); }

main.content { flex: 1; padding: 24px 28px 60px; max-width: 1180px; width: 100%; margin: 0 auto; }

.view { display: none; }
.view.active { display: block; }

/* ---------- بطاقات ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.card > h3 { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .search-box { flex: 1; min-width: 220px; }
.toolbar.dashboard-actions { margin-bottom: 18px; }

/* ---------- فلاتر مرنة (لوحة الملفات) ----------
   بطاقة مستقلة بعرض كامل (بدل مشاركة السطر مع أزرار الإجراءات) — تفاديًا
   لأي التباس ناتج عن تعشيش flex (nested flex) بين صفَّين مختلفي الارتفاع؛
   كل حقل بعرض ثابت تقريبي (وليس flex:1 ينكمش لمحتواه)، فتصطف الحقول أفقيًا
   بعدة أعمدة في السطر الواحد وتلتف (wrap) تلقائيًا فقط عند ضيق الشاشة فعلاً. */
.filters-card { padding: 16px 20px; margin-bottom: 16px; }
.filters-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; width: 100%; }
.filters-row .field { flex: 1 1 190px; min-width: 150px; max-width: 260px; gap: 3px; }
.filters-row .field.narrow { flex: 1 1 140px; min-width: 120px; max-width: 180px; }
.filters-row label { font-size: .72rem; font-weight: 500; color: var(--ink-soft); }
.filters-row #clearFamilyFilters { flex: 0 0 auto; margin-inline-start: auto; }

/* ---------- شريط الصفحات ---------- */
.pager-bar { margin-bottom: 10px; }
.pager-bar label { font-size: .82rem; color: var(--ink-soft); }
#familiesPageInfo { font-size: .85rem; color: var(--ink-soft); }
#familiesLoadStatus { font-size: .85rem; color: var(--ink-soft); min-height: 1.2em; margin-bottom: 6px; }

.mini-stat.highlight { background: var(--primary-tint); border-color: var(--primary); }

/* ---------- نماذج ---------- */
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; }
/* شبكة ثابتة 3 أعمدة (رقم البطاقة/اسم الأرملة/اسم الأسرة، ثم المنطقة/نوع الملف/تاريخ الكفالة) */
.field-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
@media (max-width: 720px) { .field-grid-3col { grid-template-columns: 1fr; } }
/* بطاقات القوائم الديناميكية (اليتامى/الرضع/التمدرس) */
.dynamic-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.dynamic-row { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--surface-2, #fafafa); }
.dynamic-row .field { flex: 1 1 160px; min-width: 140px; }
.dynamic-row .remove-row-btn { flex: 0 0 auto; }
.dynamic-list-empty { font-size: .82rem; color: var(--ink-soft); opacity: .8; padding: 6px 2px; }
.add-row-btn { margin-top: 10px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.field .hint { font-size: .72rem; color: var(--ink-soft); opacity: .8; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
input[readonly] {
  background: var(--bg-soft, #f2f3f5);
  color: var(--ink-soft);
  cursor: not-allowed;
  font-weight: 700;
}
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }

fieldset { border: none; padding: 0; margin: 0 0 18px; }
legend { font-weight: 700; color: var(--primary-dark); margin-bottom: 10px; font-size: .95rem; }

/* ---------- أزرار ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: var(--surface); color: var(--primary-dark); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--primary-tint); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #8f2c2c; }
.btn.ghost { background: none; color: var(--ink-soft); border: none; }
.btn.ghost:hover { color: var(--ink); text-decoration: underline; }
.btn.sm { padding: 6px 10px; font-size: .82rem; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- جدول ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .9rem; }
th { color: var(--ink-soft); font-weight: 700; font-size: .8rem; }
tbody tr:hover { background: var(--primary-tint); }
tbody tr { cursor: pointer; }

/* أعمدة مضغوطة: مؤشر الكفالة / وضعية الأسرة / القرار — قيم قصيرة لا تحتاج
   عرضًا كاملاً مثل أعمدة الأسماء، فتُضيَّق لإفساح مجال أكبر لبقية الجدول */
th.col-compact, td.col-compact { width: 1%; white-space: nowrap; text-align: center; padding-left: 8px; padding-right: 8px; }
td.col-compact .badge { padding: 3px 8px; font-size: .72rem; }

/* ---------- شارات الحالة ---------- */
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge.success { background: var(--success-tint); color: var(--success); }
.badge.warning { background: var(--warning-tint); color: var(--warning); }
.badge.danger { background: var(--danger-tint); color: var(--danger); }
.badge.info { background: var(--info-tint); color: var(--info); }
.badge.neutral { background: var(--line); color: var(--ink-soft); }

/* ---------- لوحة النتيجة (البطل البصري) ---------- */
.result-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.result-hero .index-value { font-size: 3.2rem; font-weight: 900; line-height: 1; }
.result-hero .index-label { font-size: .85rem; opacity: .8; margin-top: 6px; }
.result-hero .decision-box { text-align: start; }
.result-hero .decision-box .status-line { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.result-hero .decision-box .decision-line { font-size: 1.25rem; font-weight: 900; }
.result-hero .warnings { flex-basis: 100%; }
.result-hero .warnings .w-item { background: rgba(255,255,255,.12); border-radius: 8px; padding: 8px 12px; font-size: .82rem; margin-top: 8px; }

.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mini-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.mini-stat .v { font-size: 1.3rem; font-weight: 900; color: var(--primary-dark); }
.mini-stat .l { font-size: .78rem; color: var(--ink-soft); }

/* ---------- تنبيهات ---------- */
.alert { border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; font-size: .88rem; }
.alert.danger { background: var(--danger-tint); color: var(--danger); border: 1px solid #e8bcbc; }
.alert.info { background: var(--info-tint); color: var(--info); border: 1px solid #c3d7e6; }
.alert.success { background: var(--success-tint); color: var(--success); border: 1px solid #bfe0cc; }

/* ---------- حالة فارغة ---------- */
.empty-state { text-align: center; padding: 50px 20px; color: var(--ink-soft); }

/* ---------- تسجيل الدخول ---------- */
.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, var(--primary-tint), var(--paper) 60%);
  padding: 20px;
}
.login-card {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 36px 32px; width: 100%; max-width: 380px; border: 1px solid var(--line);
}
.login-card .brand-mark { width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: #fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.3rem; margin-bottom: 14px; }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.section-note { font-size: .82rem; color: var(--ink-soft); background: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; }

@media (max-width: 720px) {
  .topbar, .tabs, main.content { padding-left: 14px; padding-right: 14px; }
  .result-hero { flex-direction: column; align-items: flex-start; }
}

/* قوائم متعددة الاختيار */
.multi-select details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.multi-select summary { cursor: pointer; padding: 10px 12px; list-style: none; font-weight: 600; color: var(--ink); }
.multi-select summary::-webkit-details-marker { display: none; }
.multi-select summary::after { content: '▾'; float: left; color: var(--ink-soft); }
.multi-select details[open] summary { border-bottom: 1px solid var(--line); }
.multi-options { padding: 6px 4px; display: flex; flex-direction: column; }
.multi-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border-radius: 6px; font-weight: 500; }
.multi-option:hover { background: var(--bg-soft, #f2f3f5); }
.multi-option input { width: auto; margin: 0; }

/* تطور المؤشر */
.trend-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.trend-cell { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); text-align: center; }
.trend-cell.current { border-color: var(--primary); background: var(--primary-tint); }
.trend-label { font-size: .78rem; color: var(--ink-soft); margin-bottom: 4px; }
.trend-value { font-size: 1.5rem; font-weight: 900; color: var(--primary-dark); }
.trend-date { font-size: .78rem; color: var(--ink-soft); direction: ltr; }
.trend-delta { margin-top: 6px; font-size: .82rem; font-weight: 700; }
.trend-delta.up { color: #1b7f4b; }
.trend-delta.down { color: #b3261e; }
.trend-delta.flat { color: var(--ink-soft); }
.trend-row + .hint { margin-top: 12px; }

/* إسناد المناطق: المساعدات يمينًا ثم المناطق (checkbox) */
.regions-split { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.regions-users input { width: 100%; margin-bottom: 8px; }
#regionsUsers { max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ru-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 10px 12px; border: 1px solid var(--border, #d7e0e0); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; }
.ru-item:hover { background: #f1f7f7; }
.ru-item.active { background: #0e5a5e; color: #fff; border-color: #0e5a5e; }
.ru-item .badge { flex: none; }
.regions-pane-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.regions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.rg-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border, #d7e0e0); border-radius: 10px; background: #fff; cursor: pointer; }
.rg-item.on { border-color: #0e5a5e; background: #e6f2f1; }
.rg-item.locked { opacity: .6; cursor: not-allowed; background: #f6f6f6; }
.rg-item label { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: inherit; }
.rg-meta { font-size: 12px; color: #5b6770; }
.rg-chip { display: inline-block; font-size: 11px; padding: 1px 7px; margin: 2px 0 0 4px; border-radius: 10px; background: #fcebdd; color: #7a4a0b; }
@media (max-width: 800px) { .regions-split { grid-template-columns: 1fr; } }

/* ---------- بوابة التحليلات ---------- */
.an-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.an-h { margin: 22px 0 10px; color: var(--primary-dark); border-inline-start: 5px solid #d98e1f; padding-inline-start: 10px; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.an-grid h4 { margin: 0 0 8px; }
.an-grid canvas { max-height: 300px; }
.an-sim { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.an-sim input[type=range] { flex: 1; }

/* عرض/تصحيح تحيين سابق */
.trend-cell.clickable { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.trend-cell.clickable:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.trend-open { margin-top: 8px; font-size: .78rem; color: var(--primary-dark); font-weight: 700; }
.snapshot-banner { border: 2px solid #c58a00; background: #fff8e1; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.snapshot-banner h4 { margin: 0 0 6px; }
.snapshot-banner.correcting { border-color: var(--primary); background: var(--primary-tint); }
.snapshot-log { margin: 8px 0 0; padding-inline-start: 18px; font-size: .88rem; }
#editorView.snapshot-mode #saveBtn, #editorView.snapshot-mode #deleteBtn, #editorView.snapshot-mode #restoreBtn,
#editorView.snapshot-mode #permanentDeleteBtn, #editorView.snapshot-mode #resetBtn, #editorView.snapshot-mode #shareBtn,
#editorView.snapshot-mode #exportPdfBtn, #editorView.snapshot-mode #exportWordBtn { display: none !important; }

/* ===== وحدة المحسنين والكفالات ===== */
.sp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sp-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.sp-stat .v { font-size: 1.25rem; font-weight: 800; color: var(--primary-dark); }
.sp-stat .l { font-size: .8rem; color: var(--ink-soft); }
.sp-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sp-subtabs .btn.active { background: var(--primary); color: #fff; }
.sp-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.sp-split { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sp-split td { padding: 4px 8px; border-bottom: 1px dashed var(--line); }
.sp-pick { border: 1px solid var(--line); border-radius: 8px; max-height: 170px; overflow: auto; margin-top: 4px; }
.sp-pick div { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: .88rem; }
.sp-pick div:hover { background: var(--primary-tint); }
.sp-note { font-size: .82rem; color: var(--ink-soft); margin: 6px 0; }
.sp-bar-meter { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; min-width: 80px; }
.sp-bar-meter > span { display: block; height: 100%; background: var(--accent, #2e7d6b); }

/* المدير التنفيذي: اطلاع فقط على الكفالات والقسم المحاسباتي (التحقق الفعلي على الخادم) */
.role-readonly #sponsorsView [data-act]:not([data-act="open-family"]):not([data-act="b-open"]):not([data-act="s-search"]):not([data-act="w-refresh"]):not([data-act="b-account"]):not([data-act="f-account"]),
.role-readonly #acctFinance [data-act]:not([data-act="ac-filter"]):not([data-act="mv-att"]),
.role-readonly #acctFinance [data-ops],
.role-readonly #acctFinance #opsForm,
.role-readonly #spModalBody .btn { display: none !important; }

/* المراقب والمدير التنفيذي: لا إنشاء ولا استيراد (التحقق الفعلي على الخادم) */
.role-readonly #newFamilyBtn, .role-readonly #importBtn { display: none !important; }
/* المراقب: يرى المستخدمين والمناطق دون تعديل ولا نسخ احتياطي */
.role-observer #newUserBtn, .role-observer #downloadBackupBtn, .role-observer #downloadSqlBackupBtn,
.role-observer #backupCard, .role-observer .edit-user-btn,
.role-observer #regionsAllBtn, .role-observer #regionsNoneBtn, .role-observer #legacyCard { display: none !important; }
.role-observer #regionsGrid { pointer-events: none; opacity: .85; }

/* أزرار كشف الحساب/النسخ تبقى متاحة للاطلاع */
.role-readonly #spModalBody .btn.keep { display: inline-flex !important; }

/* التموين الشهري: للمراقب والتنفيذي اطلاع فقط */
.role-readonly #logisticsView [data-lg] { display: none !important; }

input.invalid { border-color: #b91c1c !important; background: #fef2f2; }

/* ---------- v54: البوابات الرئيسية والفرعية (SubMenu) ---------- */
.tab-btn.group-btn { cursor: pointer; }
.subnav {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 28px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.subnav-2, .subnav-3 { background: var(--primary-tint); padding-top: 6px; padding-bottom: 6px; }
.subgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.subnav .tab-btn {
  padding: 7px 14px; border-bottom: none; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-size: .95em;
}
.subnav .tab-btn.active, .subnav .tab-btn.sel { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }
.tab-btn.sel { color: var(--primary-dark); border-bottom-color: var(--accent); background: var(--primary-tint); }
.report-list { display: grid; gap: 10px; margin-top: 12px; }
.report-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface);
}
@media (max-width: 720px) {
  .subnav { padding: 8px 14px; }
}