/*
 * NATIONAL DISCOVERY · DEVELOPMENT RIGHTS · ND-AHMAD-ALATTAR-2026-PROPRIETARY
 * Developed by Ahmad Alattar, Founder of the National Discovery Community, with his authorized ND Crew.
 * Original ND platform architecture and first-party source code are proprietary to Ahmad Alattar.
 * All rights reserved. No use or transfer is permitted without prior written authorization.
 * Third-party components remain governed by their respective licences. See DEVELOPMENT_RIGHTS.md.
 */
.account-area {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  inline-size: min(100% - 2rem, 74rem);
  margin: clamp(1.5rem, 4vw, 3.5rem) auto;
  overflow: clip;
}

.account-area *, .account-area *::before, .account-area *::after { box-sizing: border-box; }
.account-area-nav { align-self: start; min-inline-size: 0; }
.account-area-links { display: grid; gap: .35rem; padding: .45rem; border: 1px solid var(--line, rgba(255,255,255,.18)); background: var(--panel, rgba(255,255,255,.04)); }
.account-area-links a, .account-area-page-select-label select { min-block-size: 44px; }
.account-area-links a { display: flex; align-items: center; padding-inline: .85rem; color: var(--white, #fff); font-weight: 700; text-decoration: none; }
.account-area-links a[aria-current="page"] { border-inline-start: 3px solid var(--gold, #fac80f); background: color-mix(in srgb, var(--gold, #fac80f) 13%, transparent); color: var(--gold, #fac80f); }
.account-area-command-separator { margin: .45rem .4rem; border-block-start: 1px solid var(--line, rgba(255,255,255,.18)); }
.account-area-owner-separator { margin: .45rem .4rem; border-block-start: 1px solid var(--line, rgba(255,255,255,.18)); }
.account-area-links [data-account-command-center] { color: var(--gold, #fac80f); }
.account-area-links a:focus-visible, .account-area-page-select-label select:focus-visible { outline: 3px solid var(--gold, #fac80f); outline-offset: 3px; }
.account-area-page-select-label { display: none; min-inline-size: 0; color: var(--muted, #c9c8bf); font-weight: 700; }
.account-area-page-select-label span { display: block; margin-block-end: .4rem; }
.account-area-page-select-label select { inline-size: 100%; padding-inline: .75rem; border: 1px solid var(--line, rgba(255,255,255,.22)); border-radius: 0; background: var(--panel, #1c211d); color: inherit; font: inherit; }
.account-area-mobile-command { display: none; min-block-size: 44px; align-items: center; margin-block-start: .65rem; padding-inline: .85rem; border: 1px solid var(--gold, #fac80f); color: inherit; font-weight: 700; text-decoration: none; }
.account-area-mobile-privileged { display: none; gap: .5rem; }
.account-area-mobile-workspace { min-block-size: 44px; align-items: center; padding-inline: .85rem; border: 1px solid var(--line, rgba(255,255,255,.18)); color: inherit; font-weight: 700; text-decoration: none; }
.account-area-content { min-inline-size: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line, rgba(255,255,255,.18)); background: var(--panel, rgba(255,255,255,.04)); }
.account-area-intro > :first-child { margin-block-start: 0; }
.account-area h1, .account-area h2, .account-area h3 { overflow-wrap: anywhere; }
.account-area h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.18; }
.account-area-intro > p:last-child { max-inline-size: 62ch; color: var(--muted, #c9c8bf); line-height: 1.65; }
html[dir="rtl"] .account-area h1, html[dir="rtl"] .account-area h2, html[dir="rtl"] .account-area h3 { line-height: 1.18; }
html[data-theme="day"] .account-area-links, html[data-theme="day"] .account-area-content { background: var(--day-surface, #fff); }
html[data-theme="day"] .account-area-links a { color: var(--day-ink, #172019); }
html[data-theme="day"] .account-area-page-select-label select { background: var(--day-surface, #fff); color: var(--day-ink, #172019); border-color: rgba(23,32,25,.3); }

.account-security-route { display: grid; gap: 1rem; }
.account-security-route .account-security-modal {
  position: static;
  z-index: auto;
  display: block;
  padding: 0;
}
.account-security-route .account-security-panel {
  inline-size: 100%;
  max-block-size: none;
  box-shadow: none;
}
.account-security-route .account-security-panel > header .auth-close,
.account-security-route .account-security-backdrop,
.account-security-route [data-account-security-close] { display: none; }
.account-sessions-section, .account-mobile-verification { padding: clamp(1rem, 2.5vw, 1.4rem); border: 1px solid var(--line, rgba(255,255,255,.18)); }
.account-session-list { display: grid; gap: .75rem; }
.account-session-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem; border: 1px solid var(--line, rgba(255,255,255,.18)); }
.account-session-card h3, .account-session-card p { margin: 0; }
.account-session-card small { display: block; margin-block-start: .35rem; color: var(--muted, #c9c8bf); overflow-wrap: anywhere; }
.account-session-card button, .account-mobile-verification button { min-block-size: 44px; padding-inline: .9rem; }
.account-mobile-verification strong { unicode-bidi: plaintext; }
.account-mobile-verification button:disabled { cursor: not-allowed; opacity: .72; }

.account-request-filters, .account-activity-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-block: 1.25rem; min-inline-size: 0; }
.account-request-filters button, .account-activity-filters button, .account-notification-tools > button { min-block-size: 44px; padding: .65rem .9rem; border: 1px solid var(--line, rgba(255,255,255,.18)); background: transparent; color: inherit; font: inherit; font-weight: 700; }
.account-request-filters button[aria-selected="true"], .account-activity-filters button[aria-selected="true"] { border-color: var(--gold, #fac80f); color: var(--gold, #fac80f); }
.account-request-filters button:focus-visible, .account-activity-filters button:focus-visible, .account-notification-tools > button:focus-visible, .account-request-card a:focus-visible, .account-request-card button:focus-visible, .account-notification-card a:focus-visible, .account-notification-card button:focus-visible { outline: 3px solid var(--gold, #fac80f); outline-offset: 3px; }
.account-request-groups, .account-request-list, .account-notification-list { display: grid; gap: 1rem; min-inline-size: 0; }
.account-request-groups > section { min-inline-size: 0; }
.account-request-groups > section[hidden] { display: none; }
[data-account-notification-panel][hidden] { display: none; }
.account-request-groups > section > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-request-card, .account-notification-card { min-inline-size: 0; padding: clamp(1rem, 2.5vw, 1.35rem); border: 1px solid var(--line, rgba(255,255,255,.18)); overflow-wrap: anywhere; }
.account-request-card-head, .account-notification-meta, .account-notification-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; }
.account-request-card h3, .account-notification-card h2 { margin-block: .75rem .45rem; }
.account-request-card blockquote { display: grid; gap: .3rem; margin: .85rem 0; padding-inline-start: .85rem; border-inline-start: 3px solid var(--gold, #fac80f); }
.account-request-action, .account-notification-card footer { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-block-start: 1rem; }
.account-request-action :is(a, button) { min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .8rem; font-size: .9rem; color: #111; }
.account-notification-card footer a, .account-notification-card footer button { min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; }
.account-payment-controls { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(9rem, 1fr) auto; gap: .55rem; inline-size: 100%; }
.account-payment-controls select, .account-payment-controls input { min-block-size: 44px; min-inline-size: 0; }
.account-notification-tools { margin-block: 1rem; }
.account-notification-meta { color: var(--muted, #c9c8bf); font-size: .9rem; }
.account-notification-card.is-unread { border-inline-start: 4px solid var(--gold, #fac80f); }
.account-notification-rich-copy > :first-child { margin-block-start: 0; }
.account-notification-rich-copy > :last-child { margin-block-end: 0; }
.account-request-empty { padding: 1rem; border: 1px dashed var(--line, rgba(255,255,255,.18)); color: var(--muted, #c9c8bf); }
.account-saved-journeys { display: grid; gap: 1rem; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line, rgba(255,255,255,.18)); }
.account-saved-journey-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.account-saved-journey-card { display: grid; gap: .6rem; min-inline-size: 0; padding: 1rem; border: 1px solid var(--line, rgba(255,255,255,.18)); overflow-wrap: anywhere; }
.account-saved-journey-card h3 { margin: 0; }
.account-saved-journey-card :is(a, button) { min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .8rem; font-size: .9rem; color: #111; }
.account-itinerary-requests { display: grid; gap: 1rem; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line, rgba(255,255,255,.18)); }
.account-itinerary-list { display: grid; gap: 1rem; }
.account-itinerary-card { display: grid; gap: .85rem; padding: clamp(1rem, 2.5vw, 1.35rem); border: 1px solid var(--line, rgba(255,255,255,.18)); overflow-wrap: anywhere; }
.account-itinerary-card > header, .account-itinerary-quote > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; }
.account-itinerary-card > header span { color: var(--gold, #fac80f); font-weight: 800; }
.account-itinerary-card h3, .account-itinerary-card h4, .account-itinerary-card p { margin: 0; }
.account-itinerary-card dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; margin: 0; }
.account-itinerary-card dl div { padding: .75rem; background: color-mix(in srgb, currentColor 5%, transparent); }
.account-itinerary-card dt { color: var(--muted, #c9c8bf); font-size: .8rem; font-weight: 700; }
.account-itinerary-card dd { margin: .25rem 0 0; }
.account-itinerary-messages ol { display: grid; gap: .65rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.account-itinerary-messages li { padding-inline-start: .8rem; border-inline-start: 3px solid var(--gold, #fac80f); }
.account-itinerary-messages li span, .account-itinerary-messages li time { color: var(--muted, #c9c8bf); font-size: .8rem; }
.account-itinerary-quote { display: grid; gap: .65rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--gold, #fac80f) 55%, transparent); }
.account-itinerary-quote-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
.account-itinerary-response label { display: grid; gap: .4rem; }
.account-itinerary-response textarea { inline-size: 100%; min-block-size: 6rem; padding: .7rem; border: 1px solid var(--line, rgba(255,255,255,.25)); background: transparent; color: inherit; font: inherit; }
.account-itinerary-response button, .account-itinerary-quote button, .account-itinerary-actions button { min-block-size: 44px; margin-block-start: .65rem; padding-inline: .9rem; }
.account-itinerary-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.account-role-gateway { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line, rgba(255,255,255,.18)); }
.account-role-gateway h3, .account-role-gateway p { margin: .25rem 0 0; }
.account-role-gateway > a, .account-role-card > a, .account-role-workspaces > a { min-block-size: 44px; display: inline-flex; align-items: center; padding-inline: .9rem; border: 1px solid var(--gold, #fac80f); color: inherit; font-weight: 700; text-decoration: none; }
.account-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-block-start: 1rem; }
.account-role-card { min-inline-size: 0; padding: 1rem; border: 1px solid var(--line, rgba(255,255,255,.18)); }
.account-role-card h3 { margin-block: .4rem; }
.account-role-workspaces { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1rem; }

@media (max-width: 767px) {
  .account-area { grid-template-columns: minmax(0, 1fr); inline-size: min(100% - 1.25rem, 46rem); gap: 1rem; }
  .account-area-links { display: none; }
  .account-area-page-select-label { display: block; }
  .account-area-mobile-privileged { display: grid; }
  .account-area-mobile-command, .account-area-mobile-workspace { display: flex; }
  .account-session-card { align-items: stretch; flex-direction: column; }
  .account-payment-controls { grid-template-columns: minmax(0, 1fr); }
  .account-notification-tools { align-items: stretch; flex-direction: column; }
  .account-notification-tools > button { inline-size: 100%; }
  .account-role-gateway { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { .account-area * { scroll-behavior: auto !important; transition: none !important; } }
/* END ND-AHMAD-ALATTAR-2026-PROPRIETARY */