/* ==========================================================================
   Ameen — app page content rendered inside the base_app.html shell
   (ameen-app.css owns the shell: layout, status bar, bottom nav).
   - Home 04.01 / 04.02 (templates/app/home.html)
   - Child summary 04.03 (templates/app/child_summary.html)
   - Agreement 06.03 – 06.06 layout tweaks (templates/agreement/)
   Entrance animations use .ameen-anim (--i = stagger index) from ameen-theme.css.
   ========================================================================== */

/* ── Tokens used below that ameen-theme.css doesn't define yet ─────────────
   (everything else references the theme's --ameen-* variables). */
:root {
  --ameen-alert-urgent: #DB3338;
  --ameen-surface-danger-tint: #FDEDEE;
  --ameen-state-purple: #754DC7;
  --ameen-surface-purple-tint: #F2EDFC;
  --ameen-cta-glow: rgba(26, 102, 219, 0.28);
  --ameen-banner-hover: rgba(255, 255, 255, 0.08);
  /* Flow 12 alert levels */
  --ameen-level-urgent-bg: #FFF0F0;
  --ameen-surface-sky-tint: #E8F2FF;
  --ameen-sos-pulse: rgba(255, 255, 255, 0.35);
}

/* ── Shell integration ──────────────────────────────────────────────────── */
.ameen-app-main--flush {
  padding: 0;
}

.ameen-app-main--flush > .ameen-agr-form,
.ameen-app-main--flush > .ameen-agr-body {
  flex: 1;
}

.ameen-app-shell--dark-top {
  background: var(--ameen-dashboard-alt-bg);
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ameen-app-head {
  margin: 12px 0 22px;
}

.ameen-app-greeting {
  font-size: 25px;
  line-height: 40px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
  margin: 0 0 8px;
}

.ameen-app-subtitle {
  font-size: 13px;
  line-height: 21px;
  color: var(--ameen-body-slate);
  margin: 0;
}

/* ── Shared cards & press feedback ──────────────────────────────────────── */
.ameen-app-card,
.ameen-app-hero,
.ameen-app-metric,
.ameen-app-request,
.ameen-app-item,
.ameen-app-btn {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--ameen-ease-out), box-shadow 0.18s var(--ameen-ease-out);
}

.ameen-app-card:hover,
.ameen-app-hero:hover,
.ameen-app-metric:hover,
.ameen-app-request:hover,
.ameen-app-item:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--ameen-shadow);
}

.ameen-app-card:active,
.ameen-app-hero:active,
.ameen-app-metric:active,
.ameen-app-request:active,
.ameen-app-item:active,
.ameen-app-btn:active {
  transform: scale(0.98);
  box-shadow: none;
}

.ameen-app-card {
  background: var(--ameen-surface-white);
  border: 1px solid var(--ameen-field-border);
}

/* ── 04.01 Hero ─────────────────────────────────────────────────────────── */
.ameen-app-hero {
  background: var(--ameen-surface-safe-tint);
  border-radius: 23px;
  padding: 18px 20px 20px;
  margin-bottom: 14px;
}

.ameen-app-hero__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.ameen-app-hero__pin {
  color: var(--ameen-zone-green);
  display: inline-flex;
  animation: ameen-app-bob 2.6s ease-in-out 0.8s infinite;
}

.ameen-app-hero__name {
  font-size: 18px;
  line-height: 29px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
}

.ameen-app-hero__sub {
  display: block;
  font-size: 12px;
  line-height: 19px;
  color: var(--ameen-body-slate);
}

.ameen-app-hero__sub--outside,
.ameen-app-child__zone--outside {
  color: var(--ameen-red);
}

.ameen-app-child__zone--unknown {
  color: var(--ameen-body-slate);
}

/* ── 04.01 Metrics ──────────────────────────────────────────────────────── */
.ameen-app-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 26px;
}

.ameen-app-metric {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  border-radius: 17px;
  padding: 15px;
}

.ameen-app-metric--warm { background: var(--ameen-surface-warm-tint); }
.ameen-app-metric--blue { background: var(--ameen-surface-blue-tint); }

.ameen-app-metric__icon {
  align-self: flex-end;
  color: var(--ameen-royal);
  display: inline-flex;
}

.ameen-app-metric__value {
  margin-top: auto;
  font-size: 22px;
  line-height: 35px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
  animation: ameen-setup-digit-in 0.5s var(--ameen-ease-out) both;
  animation-delay: 0.35s;
}

.ameen-app-metric__value--blue { color: var(--ameen-royal); }

.ameen-app-metric__label {
  font-size: 11px;
  line-height: 18px;
  color: var(--ameen-body-slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.ameen-app-section-title {
  font-size: 17px;
  line-height: 27px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
  margin: 4px 0 14px;
}

.ameen-app-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 14px;
}

.ameen-app-section-head .ameen-app-section-title {
  margin: 0;
}

.ameen-app-see-all {
  font-size: 12px;
  font-weight: 700;
  color: var(--ameen-royal);
  text-decoration: none;
}

/* ── Quick action card ──────────────────────────────────────────────────── */
.ameen-app-action {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 81px;
  border-radius: 18px;
  padding: 16px 17px;
}

.ameen-app-action__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--ameen-surface-safe-tint);
  color: var(--ameen-royal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ameen-app-action__copy,
.ameen-app-request__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ameen-app-action__title,
.ameen-app-request__title {
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
}

.ameen-app-action__sub,
.ameen-app-request__sub {
  font-size: 12px;
  line-height: 19px;
  color: var(--ameen-body-slate);
}

.ameen-app-action__chev {
  color: var(--ameen-body-slate);
  display: inline-flex;
  transition: transform 0.18s var(--ameen-ease-out);
}

.ameen-app-action:hover .ameen-app-action__chev { transform: translateX(-3px); }
[dir="ltr"] .ameen-app-action:hover .ameen-app-action__chev { transform: translateX(3px); }

/* ── Request cards ──────────────────────────────────────────────────────── */
.ameen-app-request {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  border-radius: 18px;
  padding: 16px 22px;
  margin-bottom: 14px;
}

.ameen-app-request--install { background: var(--ameen-surface-warm-tint); }
.ameen-app-request--unlock { background: var(--ameen-surface-blue-tint); }

.ameen-app-request__icon {
  flex: none;
  color: var(--ameen-royal);
  display: inline-flex;
}

.ameen-app-note {
  font-size: 13px;
  color: var(--ameen-body-slate);
  background: var(--ameen-surface-white);
  border: 1px dashed var(--ameen-field-border);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  margin-bottom: 14px;
}

/* ── 04.02 Child cards ──────────────────────────────────────────────────── */
.ameen-app-child {
  border-radius: 22px;
  padding: 22px 26px;
  margin-bottom: 14px;
}

.ameen-app-child__name {
  font-size: 19px;
  line-height: 30px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
  margin: 0 0 12px;
}

.ameen-app-child__zone {
  display: block;
  font-size: 12px;
  line-height: 19px;
  color: var(--ameen-alert-info);
  margin-bottom: 12px;
}

.ameen-app-child__meta {
  font-size: 12px;
  line-height: 19px;
  color: var(--ameen-body-slate);
  margin: 0;
}

.ameen-app-child__dot {
  margin: 0 8px;
  font-size: 9px;
  vertical-align: middle;
}

/* ── Links & buttons ────────────────────────────────────────────────────── */
.ameen-app-link {
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 19px;
  font-weight: 700;
  color: var(--ameen-royal);
  text-decoration: none;
  padding: 10px 0;
}

.ameen-app-link--lg { font-size: 13px; }
.ameen-app-link:hover { text-decoration: underline; }

.ameen-app-btn {
  height: 56px;
  border-radius: 16px;
  background: var(--ameen-alert-warning);
  color: var(--ameen-surface-white);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.ameen-app-btn:hover {
  color: var(--ameen-surface-white);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px var(--ameen-cta-glow);
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.ameen-app-empty {
  text-align: center;
  padding: 40px 12px;
  color: var(--ameen-body-slate);
}

.ameen-app-empty__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ameen-surface-blue-tint);
  color: var(--ameen-royal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* ── Bottom nav additions (base styles live in ameen-app.css) ───────────── */
.ameen-app-bottom-nav {
  animation: ameen-app-slide-up 0.45s var(--ameen-ease-out) both;
}

.ameen-app-bottom-nav__item--shield {
  color: var(--ameen-gold);
}

.ameen-app-bottom-nav__item--shield .ameen-app-bottom-nav__icon-wrap {
  background: var(--ameen-surface-warm-tint);
}

.ameen-app-bottom-nav__item--shield .ameen-app-bottom-nav__label {
  font-weight: 700;
  color: var(--ameen-gold);
}

/* On Protection pages the shield tab takes the normal active (blue) look (Figma 08.01 / 08.02). */
.ameen-app-bottom-nav__item--shield.ameen-app-bottom-nav__item--active,
.ameen-app-bottom-nav__item--shield.ameen-app-bottom-nav__item--active .ameen-app-bottom-nav__label {
  color: var(--ameen-royal);
}

.ameen-app-bottom-nav__item--shield.ameen-app-bottom-nav__item--active .ameen-app-bottom-nav__icon-wrap {
  background: var(--ameen-surface-blue-tint);
}

.ameen-app-bottom-nav__item:active .ameen-app-bottom-nav__icon-wrap {
  transform: scale(0.9);
}

.ameen-app-bottom-nav__badge {
  animation: ameen-setup-pop-in 0.45s var(--ameen-ease-out) 0.5s both;
}

/* ── 04.03 Dark banner (also used by the agreement header) ──────────────── */
.ameen-app-banner {
  background: var(--ameen-banner-dark-navy);
  min-height: 108px;
  padding: 24px 24px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: ameen-app-fade 0.4s ease both;
}

.ameen-app-banner > div { flex: 1; }

.ameen-app-banner__back {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ameen-banner-subtle-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.ameen-app-banner__back:hover {
  background: var(--ameen-banner-hover);
  color: var(--ameen-surface-white);
}

.ameen-app-banner__guardian,
.ameen-app-banner__title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  margin: 0;
}

.ameen-app-banner__guardian {
  color: var(--ameen-banner-subtle-text);
  margin-bottom: 14px;
}

.ameen-app-banner__title { color: var(--ameen-alert-decision); }

/* ── 04.03 Child summary ────────────────────────────────────────────────── */
.ameen-app-summary-name {
  font-size: 23px;
  line-height: 46px;
  font-weight: 700;
  color: var(--ameen-state-title);
  margin: 6px 0 12px;
}

.ameen-app-screen--summary .ameen-app-subtitle {
  color: var(--ameen-alert-details);
  margin-bottom: 30px;
}

.ameen-app-status {
  background: var(--ameen-surface-mint);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;
}

.ameen-app-status__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--ameen-alert-info);
  margin: 0 0 12px;
}

.ameen-app-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: ameen-setup-dot-pulse 1.8s ease-in-out infinite;
}

.ameen-app-status__details {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ameen-state-title);
  margin: 0;
}

.ameen-app-status--offline { background: var(--ameen-surface-danger-tint); }
.ameen-app-status--offline .ameen-app-status__title { color: var(--ameen-alert-urgent); }
.ameen-app-status--offline .ameen-app-status__dot { animation: none; }

.ameen-app-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.ameen-app-item {
  border-radius: 16px;
  background: var(--ameen-surface-white);
  padding: 14px 18px;
  min-height: 68px;
}

.ameen-app-item--cream { background: var(--ameen-surface-cream); }

.ameen-app-item__label {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ameen-alert-details);
  margin-bottom: 10px;
}

.ameen-app-item__value {
  display: block;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--ameen-state-title);
}

.ameen-app-categories {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ameen-alert-details);
  text-align: center;
  margin: 14px 0 48px;
}

.ameen-app-categories a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.ameen-app-categories a:hover { color: var(--ameen-royal); }

/* ── Agreement 06.03 – 06.06 ────────────────────────────────────────────── */
.ameen-agr-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 06.03 — daily label beside the stepper ("ساعتان يوميًا  + [٢ ساعة] −") */
.ameen-agr-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.ameen-agr-rule-row .ameen-agr-card__desc {
  flex: 1;
  margin: 0;
}

.ameen-agr-rule-row .ameen-agr-stepper {
  margin-top: 0;
  gap: 8px;
}

.ameen-agr-rule-row .ameen-agr-stepper__pill {
  min-width: 92px;
}

.ameen-agr-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ameen-agr-bedtime {
  position: relative;
  display: block;
  margin-top: 10px;
  color: var(--ameen-alert-details);
}

.ameen-agr-bedtime__select {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 0;
  padding-inline-end: 24px;
  font: inherit;
  font-size: 13px;
  color: var(--ameen-alert-details);
  cursor: pointer;
}

.ameen-agr-bedtime__select:focus-visible {
  outline: 2px solid var(--ameen-alert-warning);
  outline-offset: 4px;
  border-radius: 6px;
}

.ameen-agr-bedtime .ameen-icon {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  pointer-events: none;
}

.ameen-agr-pills--schedule {
  margin-top: -4px;
  flex-wrap: wrap;
}

.ameen-agr-pills--schedule .ameen-agr-pill-btn {
  flex: 1;
  min-width: 120px;
}

/* 06.04 — single-line rule cards with a glyph icon */
.ameen-agr-review-item {
  align-items: center;
}

.ameen-agr-review-item__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--ameen-alert-warning);
  background: var(--ameen-surface-blue-tint);
}

.ameen-agr-review-item__icon--sleep { color: var(--ameen-state-purple); background: var(--ameen-surface-purple-tint); }
.ameen-agr-review-item__icon--family { color: var(--ameen-alert-decision); background: var(--ameen-surface-cream); }
.ameen-agr-review-item__icon--exceptions { color: var(--ameen-alert-info); background: var(--ameen-surface-mint); }

.ameen-agr-review-item__text {
  margin: 0;
}

.ameen-agr-review-item:hover .ameen-agr-review-item__icon .ameen-icon {
  animation: ameen-setup-pop-soft 0.35s var(--ameen-ease-out);
}

/* 06.01 hero glyph */
.ameen-agr-hero__glyph {
  color: var(--ameen-alert-warning);
  line-height: 1;
}

/* ── Flow 08 — location, safe zones, alerts, website rules ─────────────── */
.ameen-app-pagehead {
  margin: 4px 0 18px;
}

.ameen-app-pagehead__back {
  width: 44px;
  height: 44px;
  margin-inline-start: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ameen-royal);
  transition: background-color 0.2s ease, transform 0.2s var(--ameen-ease-out);
}

.ameen-app-pagehead__back:hover {
  background: var(--ameen-surface-blue-tint);
  color: var(--ameen-royal);
  transform: translateX(3px);
}

[dir="ltr"] .ameen-app-pagehead__back:hover { transform: translateX(-3px); }

.ameen-app-pagehead__child {
  font-size: 12px;
  line-height: 19px;
  font-weight: 700;
  color: var(--ameen-royal);
  margin: 4px 0 14px;
}

.ameen-app-pagehead__title {
  font-size: 24px;
  line-height: 38px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
  margin: 0 0 12px;
}

.ameen-app-pagehead__subtitle {
  font-size: 13px;
  line-height: 21px;
  color: var(--ameen-body-slate);
  margin: 0;
}

.ameen-app-text-safe { color: var(--ameen-green); font-weight: 700; }
.ameen-app-text-danger { color: var(--ameen-red); font-weight: 700; }

/* Map card */
.ameen-app-map {
  position: relative;
  z-index: 0;
  border-radius: 23px;
  overflow: hidden;
  background: var(--ameen-surface-blue-tint);
  margin-bottom: 14px;
}

.ameen-app-map--lg { height: 360px; }
.ameen-app-map--md { height: 252px; }
.ameen-app-map--sm { height: 220px; }

.ameen-app-map .leaflet-control-attribution {
  font-size: 9px;
  background: var(--ameen-banner-hover);
}

.ameen-app-map .leaflet-tooltip {
  font-family: inherit;
  font-weight: 700;
  color: var(--ameen-heading-navy);
}

.ameen-app-map__dot {
  border-radius: 50%;
  background: var(--ameen-royal);
  border: 4px solid var(--ameen-surface-white);
  box-shadow: 0 4px 12px var(--ameen-shadow);
  animation: ameen-app-dot-pulse 2.2s ease-out infinite;
}

/* Editable maps: the pin stays in the middle while the map moves under it. */
.ameen-app-map__pin {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  z-index: 500;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--ameen-royal);
  border: 4px solid var(--ameen-surface-white);
  box-shadow: 0 4px 12px var(--ameen-shadow);
  pointer-events: none;
}

[dir="rtl"] .ameen-app-map__pin { margin: -13px -13px 0 0; }

.ameen-app-map--editable { cursor: grab; }

/* Location facts (08.01) */
.ameen-app-facts {
  background: var(--ameen-surface-white);
  border: 1px solid var(--ameen-field-border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 18px;
}

.ameen-app-facts__status {
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 6px;
}

.ameen-app-facts__distance {
  font-size: 12px;
  line-height: 19px;
  color: var(--ameen-heading-navy);
  margin: 0 0 6px;
}

.ameen-app-facts__meta {
  font-size: 11px;
  line-height: 18px;
  color: var(--ameen-body-slate);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Buttons */
.ameen-app-btn--royal { background: var(--ameen-royal); }

.ameen-app-btn--outline {
  background: var(--ameen-surface-white);
  border: 1px solid var(--ameen-field-border);
  color: var(--ameen-heading-navy);
}

.ameen-app-btn--outline:hover {
  color: var(--ameen-heading-navy);
  border-color: var(--ameen-royal);
  box-shadow: 0 8px 22px var(--ameen-shadow);
  filter: none;
}

button.ameen-app-btn {
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.ameen-app-footer-cta { margin-top: 28px; }

.ameen-app-footer-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.ameen-app-flash {
  background: var(--ameen-surface-mint);
  color: var(--ameen-alert-info);
  font-size: 13px;
  font-weight: 700;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

/* Static info cards keep the request-card look without the hover lift. */
.ameen-app-info:hover { transform: none; box-shadow: none; }

.ameen-app-zone-card { margin-bottom: 14px; }

.ameen-app-action__icon--blue { background: var(--ameen-surface-blue-tint); }

/* Setting rows (radius / alerts / duration) that expand into choices */
.ameen-app-setting {
  width: 100%;
  min-height: 73px;
  border-radius: 17px;
  padding: 15px;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.ameen-app-setting__icon {
  flex: none;
  color: var(--ameen-royal);
  display: inline-flex;
}

.ameen-app-setting__title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
}

.ameen-app-setting__value {
  font-size: 11px;
  line-height: 18px;
  color: var(--ameen-body-slate);
}

.ameen-app-setting__chev { transition: transform 0.25s var(--ameen-ease-out); }
.ameen-app-setting[aria-expanded="true"] .ameen-app-setting__chev { transform: rotate(-90deg); }

.ameen-app-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 4px 4px;
  animation: ameen-setup-fade-up 0.3s var(--ameen-ease-out);
}

.ameen-app-option {
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid var(--ameen-field-border);
  background: var(--ameen-surface-white);
  color: var(--ameen-heading-navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.ameen-app-option:active { transform: scale(0.95); }

.ameen-app-option[aria-pressed="true"] {
  background: var(--ameen-royal);
  border-color: var(--ameen-royal);
  color: var(--ameen-surface-white);
}

/* Form fields */
.ameen-app-form { display: flex; flex-direction: column; }

.ameen-app-field { margin-bottom: 14px; }

.ameen-app-field__label {
  display: block;
  font-size: 13px;
  line-height: 21px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
  margin-bottom: 7px;
}

.ameen-app-input {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--ameen-field-border);
  background: var(--ameen-surface-white);
  padding: 0 15px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ameen-heading-navy);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ameen-app-input::placeholder { color: var(--ameen-body-slate); }

.ameen-app-input:focus {
  outline: none;
  border-color: var(--ameen-royal);
  box-shadow: 0 0 0 3px var(--ameen-surface-blue-tint);
}

.ameen-app-input--ltr { text-align: right; }
[dir="ltr"] .ameen-app-input--ltr { text-align: left; }
.ameen-app-input--error { border-color: var(--ameen-red); }

.ameen-app-error {
  font-size: 12px;
  color: var(--ameen-red);
  margin: 6px 0 0;
}

.ameen-app-hint {
  font-size: 11px;
  line-height: 18px;
  color: var(--ameen-body-slate);
  margin: 0 0 14px;
}

/* Decision choices (08.06) */
.ameen-app-choices {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.ameen-app-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 73px;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid var(--ameen-field-border);
  background: var(--ameen-surface-white);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ameen-app-choice:active { transform: scale(0.99); }

.ameen-app-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ameen-app-choice__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ameen-app-choice__title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
}

.ameen-app-choice__sub {
  font-size: 11px;
  line-height: 18px;
  color: var(--ameen-body-slate);
}

.ameen-app-choice__dot {
  order: 2;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ameen-field-border);
  background: var(--ameen-surface-white);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ameen-ease-out);
}

.ameen-app-choice:has(input:checked) {
  background: var(--ameen-surface-blue-tint);
  border-color: var(--ameen-royal);
}

.ameen-app-choice:has(input:checked) .ameen-app-choice__dot {
  background: var(--ameen-royal);
  border-color: var(--ameen-royal);
  animation: ameen-setup-pop-soft 0.3s var(--ameen-ease-out);
}

.ameen-app-choice:has(input:focus-visible) {
  outline: 2px solid var(--ameen-royal);
  outline-offset: 2px;
}

/* Exit alert card (08.05) */
.ameen-app-alert-card {
  background: var(--ameen-surface-warm-tint);
  border-radius: 21px;
  padding: 17px;
  margin-bottom: 14px;
}

.ameen-app-alert-card__title {
  font-size: 18px;
  line-height: 29px;
  font-weight: 700;
  color: var(--ameen-red);
  margin: 0 0 8px;
}

.ameen-app-alert-card__body {
  font-size: 12px;
  line-height: 19px;
  color: var(--ameen-heading-navy);
  margin: 0;
}

.ameen-app-link--danger {
  width: 100%;
  border: 0;
  background: none;
  color: var(--ameen-red);
  font-family: inherit;
  cursor: pointer;
}

@keyframes ameen-app-dot-pulse {
  0% { box-shadow: 0 0 0 0 var(--ameen-cta-glow); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .ameen-app-map__dot,
  .ameen-app-options,
  .ameen-app-choice:has(input:checked) .ameen-app-choice__dot { animation: none; }
}

/* ── Flow 09 — screen time ─────────────────────────────────────────────── */
.ameen-app-time-summary {
  background: var(--ameen-royal-darker);
  border-radius: 21px;
  padding: 19px;
  margin-bottom: 14px;
}

.ameen-app-time-summary__value {
  font-size: 33px;
  line-height: 53px;
  font-weight: 700;
  color: var(--ameen-surface-white);
  margin: 0;
  animation: ameen-setup-digit-in 0.5s var(--ameen-ease-out) 0.25s both;
}

.ameen-app-time-summary__label {
  font-size: 13px;
  line-height: 21px;
  color: var(--ameen-surface-white);
  margin: 4px 0 0;
}

.ameen-app-progress {
  background: var(--ameen-surface-white);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
}

.ameen-app-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.ameen-app-progress__title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
}

.ameen-app-progress__used {
  font-size: 12px;
  line-height: 19px;
  color: var(--ameen-body-slate);
}

.ameen-app-progress__track {
  display: flex; /* the fill starts at the reading start (right in Arabic) */
  height: 8px;
  border-radius: 4px;
  background: var(--ameen-surface-blue-tint);
  overflow: hidden;
}

.ameen-app-progress__fill {
  display: block;
  height: 100%;
  width: var(--p);
  min-width: 8px;
  border-radius: 4px;
  background: var(--ameen-royal);
  animation: ameen-app-grow 0.9s var(--ameen-ease-out) 0.3s both;
}

.ameen-app-progress__fill--full { background: var(--ameen-red); }

.ameen-app-link--button {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.ameen-app-select {
  appearance: none;
  cursor: pointer;
  color: var(--ameen-body-slate);
}

.ameen-app-rest {
  padding: 12px 4px 0;
  animation: ameen-setup-fade-up 0.3s var(--ameen-ease-out);
}

.ameen-app-rest .ameen-app-options { padding-top: 0; margin-bottom: 10px; }

.ameen-app-form > .ameen-app-choice { margin: 14px 0 0; }

@keyframes ameen-app-grow {
  from { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ameen-app-time-summary__value,
  .ameen-app-progress__fill,
  .ameen-app-rest { animation: none; }
}

/* ── Flow 10 — website protection, lists, apps, pause ──────────────────── */
.ameen-app-hero--off { background: var(--ameen-surface-warm-tint); }
.ameen-app-hero--off .ameen-app-hero__pin { color: var(--ameen-warning); animation: none; }

form.ameen-app-hero { display: block; }

.ameen-app-hero__action {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ameen-royal);
  cursor: pointer;
}

.ameen-app-hero__action:hover { text-decoration: underline; }

.ameen-app-action__icon--safe { background: var(--ameen-surface-safe-tint); }
.ameen-app-action__icon--warm { background: var(--ameen-surface-warm-tint); }

/* Setting rows that live in their own <form> (10.01 / 10.05) keep the card gap. */
form > .ameen-app-setting,
.ameen-app-setting.ameen-app-info { margin-bottom: 14px; }

form > .ameen-app-setting + .ameen-app-options { margin-top: -10px; margin-bottom: 14px; }

/* Allowed / blocked tabs (10.02) */
.ameen-app-segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 17px;
  background: var(--ameen-surface-blue-tint);
  margin-bottom: 14px;
}

.ameen-app-segment {
  text-align: center;
  font-size: 13px;
  line-height: 22px;
  color: var(--ameen-body-slate);
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ameen-app-segment:hover { color: var(--ameen-heading-navy); }

.ameen-app-segment--active {
  font-weight: 700;
  color: var(--ameen-royal);
  background: var(--ameen-surface-white);
  box-shadow: 0 2px 8px var(--ameen-shadow);
}

/* Pending install request with inline decision (10.03) */
.ameen-app-decision { align-items: flex-start; }

.ameen-app-decision__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.ameen-app-option--approve {
  background: var(--ameen-alert-info);
  border-color: var(--ameen-alert-info);
  color: var(--ameen-surface-white);
}

/* Choice card as a toggle button (10.03 install rule) */
.ameen-app-choice--button {
  width: 100%;
  font-family: inherit;
  text-align: start;
}

.ameen-app-choice--on {
  background: var(--ameen-surface-blue-tint);
  border-color: var(--ameen-royal);
}

.ameen-app-choice--on .ameen-app-choice__dot {
  background: var(--ameen-royal);
  border-color: var(--ameen-royal);
}

.ameen-app-btn--warm { background: var(--ameen-gold); }

.ameen-app-btn--warm:hover { box-shadow: 0 10px 24px var(--ameen-shadow); }

/* Pause scope / active pause (10.04 / 10.05) */
.ameen-app-pause-card {
  background: var(--ameen-surface-warm-tint);
  border-radius: 21px;
  padding: 18px;
  margin-bottom: 14px;
}

.ameen-app-pause-card__icon {
  display: flex;
  justify-content: flex-end; /* far side of the card, as in Figma 10.04 / 10.05 */
  color: var(--ameen-warning);
  margin-bottom: 10px;
}

.ameen-app-pause-card__icon--live { animation: ameen-app-breathe 2.4s ease-in-out infinite; }

.ameen-app-pause-card__title {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: var(--ameen-heading-navy);
  margin: 0 0 8px;
}

.ameen-app-pause-card__title--lg { font-size: 18px; line-height: 29px; }

.ameen-app-pause-card__body {
  font-size: 12px;
  line-height: 19px;
  color: var(--ameen-heading-navy);
  margin: 0;
}

.ameen-app-pause-card__body--muted { color: var(--ameen-body-slate); }

@keyframes ameen-app-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .ameen-app-pause-card__icon--live { animation: none; }
}

/* ── Flow 11 — answering the child's requests ──────────────────────────── */
.ameen-app-hero--warm { background: var(--ameen-surface-warm-tint); }
.ameen-app-hero--warm .ameen-app-hero__pin { color: var(--ameen-green); animation: none; }

.ameen-app-quote {
  margin: 0 0 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--ameen-field-border);
  background: var(--ameen-surface-white);
  font-size: 15px;
  line-height: 24px;
  color: var(--ameen-heading-navy);
}

/* Dark-header decision screens (11.02 – 11.05) */
.ameen-app-decision-title {
  font-size: 23px;
  line-height: 30px;
  font-weight: 700;
  color: var(--ameen-state-title);
  margin: 8px 0 12px;
}

.ameen-app-decision-sub {
  font-size: 13px;
  line-height: 20px;
  color: var(--ameen-alert-details);
  margin: 0 0 22px;
}

.ameen-app-btn--cta { background: var(--ameen-alert-warning); }
.ameen-app-btn--dark { background: var(--ameen-banner-dark-navy); }

/* 11.03 — white sheet with the grant options */
.ameen-app-sheet {
  margin: 0 -24px -28px;
  padding: 38px 24px 28px;
  border-radius: 26px 26px 0 0;
  background: var(--ameen-surface-white);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ameen-app-grants {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ameen-app-grant,
.ameen-app-reason {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  color: var(--ameen-state-title);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.ameen-app-grant input,
.ameen-app-reason input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ameen-app-grant {
  min-height: 54px;
  border-radius: 14px;
  background: var(--ameen-dashboard-alt-bg);
  font-size: 14px;
}

.ameen-app-grant:active,
.ameen-app-reason:active { transform: scale(0.98); }

.ameen-app-grant--decline {
  background: var(--ameen-surface-danger-tint);
  color: var(--ameen-alert-urgent);
}

.ameen-app-grant:has(input:checked),
.ameen-app-reason:has(input:checked) {
  background: var(--ameen-alert-warning);
  color: var(--ameen-surface-white);
  animation: ameen-setup-pop-soft 0.3s var(--ameen-ease-out);
}

.ameen-app-grant--decline:has(input:checked) { background: var(--ameen-alert-urgent); }

.ameen-app-grant:has(input:focus-visible),
.ameen-app-reason:has(input:focus-visible) {
  outline: 2px solid var(--ameen-alert-warning);
  outline-offset: 2px;
}

.ameen-app-hint--center { text-align: center; margin: 30px 0; }

.ameen-app-sheet .ameen-app-btn { margin-top: auto; }

/* 11.04 — granted time range */
.ameen-app-grant-card {
  border-radius: 24px;
  background: var(--ameen-surface-mint);
  padding: 28px 28px 34px;
  text-align: center;
}

.ameen-app-grant-card__range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 23px;
  line-height: 30px;
  font-weight: 700;
  color: var(--ameen-alert-info);
  margin: 0 0 26px;
  animation: ameen-setup-digit-in 0.5s var(--ameen-ease-out) 0.3s both;
}

.ameen-app-grant-card__arrow { display: inline-flex; }

.ameen-app-grant-card__note {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ameen-state-title);
  margin: 0;
}

/* 11.05 — reason chips + own message */
.ameen-app-reasons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}

.ameen-app-reason {
  min-height: 40px;
  border-radius: 20px;
  background: var(--ameen-surface-white);
  font-size: 12px;
}

.ameen-app-message { display: block; cursor: text; }

.ameen-app-message__input {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ameen-state-title);
}

.ameen-app-message__input::placeholder { color: var(--ameen-alert-details); font-weight: 400; }
.ameen-app-message__input:focus { outline: none; }
.ameen-app-message:focus-within { box-shadow: 0 0 0 2px var(--ameen-alert-warning); }

/* 11.06 */
.ameen-app-pause-card--blue { background: var(--ameen-surface-blue-tint); }
.ameen-app-pause-card--blue .ameen-app-pause-card__icon { color: var(--ameen-royal); }
.ameen-app-request--safe { background: var(--ameen-surface-mint); }
.ameen-app-request--safe .ameen-app-request__icon { color: var(--ameen-alert-info); }
.ameen-app-request__icon--wave { animation: ameen-app-breathe 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ameen-app-grant:has(input:checked),
  .ameen-app-reason:has(input:checked),
  .ameen-app-grant-card__range,
  .ameen-app-request__icon--wave { animation: none; }
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes ameen-app-slide-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes ameen-app-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ameen-app-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .ameen-app-bottom-nav,
  .ameen-app-bottom-nav__badge,
  .ameen-app-banner,
  .ameen-app-hero__pin,
  .ameen-app-metric__value,
  .ameen-app-status__dot,
  .ameen-agr-review-item:hover .ameen-agr-review-item__icon .ameen-icon { animation: none; }
  .ameen-app-card,
  .ameen-app-hero,
  .ameen-app-metric,
  .ameen-app-request,
  .ameen-app-item,
  .ameen-app-btn,
  .ameen-app-action__chev { transition: none; }
}

/* ── Flow 12 — Alerts centre ────────────────────────────────────────────── */
/* 12.01 tab header: shortcut to 12.02 and the 12.04 settings */
.ameen-app-alerts-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.ameen-app-alerts-tool {
  font-size: 12px;
  font-weight: 700;
  color: var(--ameen-royal);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--ameen-surface-blue-tint);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.ameen-app-alerts-tool:hover { color: var(--ameen-royal); box-shadow: 0 6px 16px var(--ameen-shadow); }
.ameen-app-alerts-tool:active { transform: scale(0.96); }
.ameen-app-alerts-tool--icon { display: inline-flex; padding: 8px; border-radius: 50%; }

.ameen-app-pagehead__title--tab { font-size: 26px; line-height: 42px; margin-top: 6px; }

/* Filter chips: all · needs action · location */
.ameen-app-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.ameen-app-filter {
  height: 34px;
  padding: 0 16px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.ameen-app-filter:active { transform: scale(0.95); }
.ameen-app-filter--all { background: var(--ameen-surface-blue-tint); color: var(--ameen-royal); }
.ameen-app-filter--action { background: var(--ameen-surface-warm-tint); color: var(--ameen-warning); }
.ameen-app-filter--location { background: var(--ameen-surface-safe-tint); color: var(--ameen-green); }
.ameen-app-filter:hover { color: inherit; filter: brightness(0.98); }
.ameen-app-filter--all:hover { color: var(--ameen-royal); }
.ameen-app-filter--action:hover { color: var(--ameen-warning); }
.ameen-app-filter--location:hover { color: var(--ameen-green); }
.ameen-app-filter[aria-current="true"] { border-color: currentColor; }

/* Needs-action alert: tinted card with the icon at the reading end */
.ameen-app-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px;
  border-radius: 18px;
  margin-bottom: 14px;
  text-decoration: none;
  transition: transform 0.18s var(--ameen-ease-out), box-shadow 0.2s ease;
}

.ameen-app-alert:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--ameen-shadow); }
.ameen-app-alert:active { transform: scale(0.99); }
.ameen-app-alert--urgent { background: var(--ameen-level-urgent-bg); }
.ameen-app-alert--decision { background: var(--ameen-surface-blue-tint); }
.ameen-app-alert--warning { background: var(--ameen-surface-warm-tint); }
.ameen-app-alert--info { background: var(--ameen-surface-white); }

.ameen-app-alert__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ameen-app-alert__title { font-size: 15px; line-height: 24px; font-weight: 700; color: var(--ameen-heading-navy); }
.ameen-app-alert__sub { font-size: 12px; line-height: 19px; color: var(--ameen-body-slate); }
.ameen-app-alert__icon { order: 2; flex: none; display: inline-flex; }
.ameen-app-alert--urgent .ameen-app-alert__icon { color: var(--ameen-alert-urgent); animation: ameen-alert-wiggle 1.6s ease-in-out infinite; }
.ameen-app-alert--decision .ameen-app-alert__icon { color: var(--ameen-royal); }
.ameen-app-alert--warning .ameen-app-alert__icon { color: var(--ameen-warning); }

.ameen-app-alert-row { margin-bottom: 14px; text-decoration: none; }

@keyframes ameen-alert-wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(-8deg); }
  90% { transform: rotate(8deg); }
  95% { transform: rotate(-4deg); }
}

/* 12.02 — one row per level: kind · title · small action */
.ameen-app-level {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 16px;
  border-radius: 16px;
  margin-bottom: 12px;
  text-decoration: none;
  transition: transform 0.18s var(--ameen-ease-out), box-shadow 0.2s ease;
}

.ameen-app-level:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--ameen-shadow); }
.ameen-app-level--urgent { background: var(--ameen-level-urgent-bg); }
.ameen-app-level--decision { background: var(--ameen-surface-cream); }
.ameen-app-level--warning { background: var(--ameen-surface-sky-tint); }
.ameen-app-level--info { background: var(--ameen-surface-white); }

.ameen-app-level__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ameen-app-level__kind { font-size: 12px; line-height: 20px; color: var(--ameen-text-mid); }
.ameen-app-level__title { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--ameen-state-title); }
.ameen-app-level--urgent .ameen-app-level__kind { color: var(--ameen-alert-urgent); font-weight: 700; }

.ameen-app-level__btn {
  order: 2;
  flex: none;
  min-width: 64px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--ameen-surface-sky-tint);
  color: var(--ameen-app-primary-dark);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ameen-app-level--warning .ameen-app-level__btn { background: var(--ameen-surface-white); }

.ameen-app-routine {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 102px;
  padding: 18px;
  border-radius: 18px;
  margin-top: 4px;
  text-decoration: none;
}

.ameen-app-routine__title { font-size: 14px; line-height: 24px; font-weight: 700; color: var(--ameen-state-title); }
.ameen-app-routine__sub { font-size: 12px; line-height: 19px; color: var(--ameen-text-mid); }

.ameen-app-btn--blue { background: var(--ameen-app-primary-dark); }
.ameen-app-btn--blue:hover { box-shadow: 0 10px 24px var(--ameen-cta-glow); }

/* 12.03 — the red "needs help" card with a soft pulse */
.ameen-app-sos {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  border-radius: 22px;
  padding: 26px 22px;
  background: var(--ameen-alert-urgent);
  color: var(--ameen-surface-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}

.ameen-app-sos__title { font-size: 24px; line-height: 38px; font-weight: 700; margin: 0; position: relative; }
.ameen-app-sos__sub { font-size: 13px; line-height: 21px; margin: 0; position: relative; }

.ameen-app-sos__pulse {
  position: absolute;
  inset-inline-end: 26px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ameen-surface-white);
  box-shadow: 0 0 0 0 var(--ameen-sos-pulse);
  animation: ameen-sos-pulse 1.6s ease-out infinite;
}

@keyframes ameen-sos-pulse {
  0% { box-shadow: 0 0 0 0 var(--ameen-sos-pulse); }
  100% { box-shadow: 0 0 0 26px transparent; }
}

.ameen-app-sos--seen { background: var(--ameen-surface-safe-tint); color: var(--ameen-heading-navy); }
.ameen-app-sos-note { margin: 22px 0; color: var(--ameen-text-mid); }
.ameen-app-sos-note a { color: var(--ameen-alert-urgent); font-weight: 700; white-space: nowrap; }

/* 12.04 — lock-screen privacy card (a checkbox styled as the Figma info card) */
.ameen-app-privacy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--ameen-field-border);
  background: var(--ameen-surface-white);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ameen-app-privacy input { position: absolute; opacity: 0; pointer-events: none; }
.ameen-app-privacy__copy { flex: 1; display: flex; flex-direction: column; }
.ameen-app-privacy__title { font-size: 15px; line-height: 24px; font-weight: 700; color: var(--ameen-heading-navy); }
.ameen-app-privacy__sub { font-size: 12px; line-height: 19px; color: var(--ameen-body-slate); }
.ameen-app-privacy__icon { order: 2; display: inline-flex; color: var(--ameen-body-slate); transition: color 0.2s ease, transform 0.2s var(--ameen-ease-out); }
.ameen-app-privacy:has(input:checked) { background: var(--ameen-surface-blue-tint); border-color: transparent; }
.ameen-app-privacy:has(input:checked) .ameen-app-privacy__icon { color: var(--ameen-royal); transform: scale(1.08); }
.ameen-app-privacy:has(input:focus-visible) { outline: 2px solid var(--ameen-royal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ameen-app-alert--urgent .ameen-app-alert__icon,
  .ameen-app-sos__pulse { animation: none; }
}

/* 09.01 progress fill width (0–100 %, used_percent is capped server-side) */
.ameen-p-0 { --p: 0%; }
.ameen-p-1 { --p: 1%; }
.ameen-p-2 { --p: 2%; }
.ameen-p-3 { --p: 3%; }
.ameen-p-4 { --p: 4%; }
.ameen-p-5 { --p: 5%; }
.ameen-p-6 { --p: 6%; }
.ameen-p-7 { --p: 7%; }
.ameen-p-8 { --p: 8%; }
.ameen-p-9 { --p: 9%; }
.ameen-p-10 { --p: 10%; }
.ameen-p-11 { --p: 11%; }
.ameen-p-12 { --p: 12%; }
.ameen-p-13 { --p: 13%; }
.ameen-p-14 { --p: 14%; }
.ameen-p-15 { --p: 15%; }
.ameen-p-16 { --p: 16%; }
.ameen-p-17 { --p: 17%; }
.ameen-p-18 { --p: 18%; }
.ameen-p-19 { --p: 19%; }
.ameen-p-20 { --p: 20%; }
.ameen-p-21 { --p: 21%; }
.ameen-p-22 { --p: 22%; }
.ameen-p-23 { --p: 23%; }
.ameen-p-24 { --p: 24%; }
.ameen-p-25 { --p: 25%; }
.ameen-p-26 { --p: 26%; }
.ameen-p-27 { --p: 27%; }
.ameen-p-28 { --p: 28%; }
.ameen-p-29 { --p: 29%; }
.ameen-p-30 { --p: 30%; }
.ameen-p-31 { --p: 31%; }
.ameen-p-32 { --p: 32%; }
.ameen-p-33 { --p: 33%; }
.ameen-p-34 { --p: 34%; }
.ameen-p-35 { --p: 35%; }
.ameen-p-36 { --p: 36%; }
.ameen-p-37 { --p: 37%; }
.ameen-p-38 { --p: 38%; }
.ameen-p-39 { --p: 39%; }
.ameen-p-40 { --p: 40%; }
.ameen-p-41 { --p: 41%; }
.ameen-p-42 { --p: 42%; }
.ameen-p-43 { --p: 43%; }
.ameen-p-44 { --p: 44%; }
.ameen-p-45 { --p: 45%; }
.ameen-p-46 { --p: 46%; }
.ameen-p-47 { --p: 47%; }
.ameen-p-48 { --p: 48%; }
.ameen-p-49 { --p: 49%; }
.ameen-p-50 { --p: 50%; }
.ameen-p-51 { --p: 51%; }
.ameen-p-52 { --p: 52%; }
.ameen-p-53 { --p: 53%; }
.ameen-p-54 { --p: 54%; }
.ameen-p-55 { --p: 55%; }
.ameen-p-56 { --p: 56%; }
.ameen-p-57 { --p: 57%; }
.ameen-p-58 { --p: 58%; }
.ameen-p-59 { --p: 59%; }
.ameen-p-60 { --p: 60%; }
.ameen-p-61 { --p: 61%; }
.ameen-p-62 { --p: 62%; }
.ameen-p-63 { --p: 63%; }
.ameen-p-64 { --p: 64%; }
.ameen-p-65 { --p: 65%; }
.ameen-p-66 { --p: 66%; }
.ameen-p-67 { --p: 67%; }
.ameen-p-68 { --p: 68%; }
.ameen-p-69 { --p: 69%; }
.ameen-p-70 { --p: 70%; }
.ameen-p-71 { --p: 71%; }
.ameen-p-72 { --p: 72%; }
.ameen-p-73 { --p: 73%; }
.ameen-p-74 { --p: 74%; }
.ameen-p-75 { --p: 75%; }
.ameen-p-76 { --p: 76%; }
.ameen-p-77 { --p: 77%; }
.ameen-p-78 { --p: 78%; }
.ameen-p-79 { --p: 79%; }
.ameen-p-80 { --p: 80%; }
.ameen-p-81 { --p: 81%; }
.ameen-p-82 { --p: 82%; }
.ameen-p-83 { --p: 83%; }
.ameen-p-84 { --p: 84%; }
.ameen-p-85 { --p: 85%; }
.ameen-p-86 { --p: 86%; }
.ameen-p-87 { --p: 87%; }
.ameen-p-88 { --p: 88%; }
.ameen-p-89 { --p: 89%; }
.ameen-p-90 { --p: 90%; }
.ameen-p-91 { --p: 91%; }
.ameen-p-92 { --p: 92%; }
.ameen-p-93 { --p: 93%; }
.ameen-p-94 { --p: 94%; }
.ameen-p-95 { --p: 95%; }
.ameen-p-96 { --p: 96%; }
.ameen-p-97 { --p: 97%; }
.ameen-p-98 { --p: 98%; }
.ameen-p-99 { --p: 99%; }
.ameen-p-100 { --p: 100%; }

.ameen-app-btn--danger { background: var(--ameen-alert-urgent); }

/* Device health (attention page) — was inline styles */
.ameen-dh-action-pill {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ameen-dh-cta-gap { margin-top: 24px; }