/* Basira components: the canonical design-system look for shared UI pieces.
   Values come only from tokens.css. Legacy class names are kept so views and JS
   keep working; site.css no longer sets colour, radius or shadow for these. */

/* ---------------------------------------------------------------- base */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--text);
}

[lang="en"],
.is-latin-title {
  font-family: var(--font-latin);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ui-icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

[data-theme="dark"] .theme-icon-dark,
[data-theme="light"] .theme-icon-light {
  display: none;
}

/* ------------------------------------------------------- page container */
.app-main {
  max-width: 1600px;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .app-main {
    padding-inline: var(--space-5);
  }
}

/* ------------------------------------------------------- panels / cards */
.panel,
.section-panel,
.detail-rail-card,
.status-page {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: none;
}

.article-card,
.home-latest-card,
.home-general-iraq-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: none;
  transition: background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.article-card:hover,
.home-latest-card:hover,
.home-general-iraq-card:hover {
  background: var(--surface-2);
  box-shadow: var(--shadow-hover);
  transform: none;
}

/* ------------------------------------------------------ section headers */
.panel-eyebrow,
.general-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.home-panel-header h2,
.section-heading h2 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

/* --------------------------------------------------------------- buttons */
.btn-primary,
.btn-neo {
  min-height: 44px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: none;
}

.btn-primary:hover,
.btn-neo:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-hover);
  transform: none;
}

.btn-soft,
.btn-outline-secondary,
.btn-outline-light,
.gov-mode-off {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
}

/* ---------------------------------------------------------------- inputs */
.form-control,
.form-select,
.glass-control {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
.form-select:focus,
.glass-control:focus {
  border-color: var(--focus);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--focus);
}

/* -------------------------------------------------------- tags / badges */
.category-badge,
.card-image-category,
.img-category-badge,
.general-news-badge,
.keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.category-badge.category-ai::before,
.category-badge.category-technology::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ai);
}

.category-badge.category-technology::before {
  background: var(--tech);
}

.home-breaking-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--breaking);
  color: var(--on-breaking);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

/* Sentiment: text in its sentiment colour, always with glyph and word. */
.sentiment-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.sentiment-badge.sentiment-positive {
  color: var(--sentiment-pos);
}

.sentiment-badge.sentiment-positive::before {
  content: "▲";
}

.sentiment-badge.sentiment-neutral,
.sentiment-badge.sentiment-pending {
  color: var(--sentiment-neu);
}

.sentiment-badge.sentiment-neutral::before {
  content: "●";
}

.sentiment-badge.sentiment-negative {
  color: var(--sentiment-neg);
}

.sentiment-badge.sentiment-negative::before {
  content: "▼";
}

/* AI label: model output is always marked and visually distinct. */
.analysis-badge,
.ai-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--ai-tint);
  color: var(--ai-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.analysis-badge-pending {
  background: var(--surface-2);
  color: var(--text-muted);
}

/* ---------------------------------------------------------- chips / tabs */
.home-category-pill,
.category-strip-link,
.general-tab,
.gov-mode-toggle {
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text);
}

.home-category-pill strong,
.category-strip-count {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.home-category-pill:hover,
.category-strip-link:hover,
.general-tab:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.home-category-pill.is-active,
.category-strip-link.is-active,
.general-tab.is-active,
.gov-mode-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--text);
}

/* ---------------------------------------------------------------- dialog */
.command-backdrop {
  background: var(--bg);
  opacity: 0.8;
}

.command-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-float);
}

/* ----------------------------------------------------------------- drawer */
@media (max-width: 1199px) {
  .topnav.is-open {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    box-shadow: var(--shadow-float);
  }
}

/* -------------------------------------------------------------- skeletons */
.skeleton-line,
.skeleton-card,
.skeleton-block {
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skeleton-card,
  .skeleton-block {
    animation: none;
  }
}

/* ----------------------------------------------------------- empty states */
.home-empty-state,
.empty-state {
  padding: var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
}

.home-empty-state strong,
.empty-state strong,
.empty-state h3 {
  color: var(--text);
}

/* ----------------------------------------------------------------- alerts */
.status-banner,
.gov-mode-banner,
.alert {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
}

.analysis-error {
  color: var(--danger);
}

/* ---------------------------------------------------------- metadata row */
.card-meta,
.latest-card-meta,
.home-feed-meta,
.detail-meta,
.home-hero-footer small,
.home-compact-item small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
}

time,
.card-score,
.home-stat-tile strong,
.impact-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------- source attribution */
.source-name {
  color: var(--text-muted);
  font-weight: 600;
}

/* --------------------------------------------- homepage hero (photo card) */
.home-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--surface-2);
}

/* Breaking toast pushed over SignalR. */
.breaking-toast {
  position: fixed;
  inset-block-start: var(--space-8);
  inset-inline: var(--space-4);
  z-index: 1080;
  max-width: 500px;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  border-block-start: 2px solid var(--breaking);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text);
  box-shadow: var(--shadow-float);
}

.breaking-toast .breaking-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--breaking);
}

/* ======================================================== Phase 3 + 4 */

/* -------------------------------------------------- homepage layout */
.home-category-bar {
  margin-block: var(--space-4) var(--space-3);
}

.home-category-track {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block-end: var(--space-1);
}

.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-block: var(--space-4) var(--space-7);
}

@media (min-width: 1200px) {
  .home-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    column-gap: var(--space-6);
    align-items: start;
  }

  .home-layout > .home-section {
    grid-column: 1;
  }

  /* The rail spans the rows of the main column. On smaller screens it falls between
     top stories and the feed: Breaking, Iraq Now, Top stories, Trending, Feed. */
  .home-rail {
    grid-column: 2;
    grid-row: 1 / span 6;
    position: sticky;
    inset-block-start: var(--space-8);
  }
}

.home-rail {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.home-section {
  min-width: 0;
}

.home-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--border);
}

.home-section-header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.home-section-header a,
.home-section-header small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
}

.home-section-header a {
  color: var(--accent);
}

/* Iraq Now is marked with the brand accent. "Latest 6 hours" is a neutral block: red is
   reserved for the "عاجل" tag on items whose title says so. */
.home-iraq .home-section-header {
  border-block-end: 2px solid var(--accent);
}

.tag-breaking {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--breaking);
  color: var(--on-breaking);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
}

.home-empty-state a {
  color: var(--accent);
}

/* ------------------------------------------------------ compact tier */
.story-list {
  display: grid;
}

@media (min-width: 768px) {
  .story-list-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

.story-row {
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--border);
}

.story-row:last-child {
  border-block-end: 0;
}

.story-row-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
}

.story-row-title a[lang="en"],
.story-card-title a[lang="en"],
.story-lead-title a[lang="en"] {
  font-family: var(--font-latin);
  font-weight: 600;
}

.story-row-title a,
.story-card-title a,
.story-lead-title a {
  display: block;
  color: var(--text);
  text-align: start;
}

.story-row-title a:hover,
.story-card-title a:hover,
.story-lead-title a:hover {
  color: var(--accent);
}

.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
}

.story-score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

/* ----------------------------------------------------- standard tier */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

@media (min-width: 768px) {
  .story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.story-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  transition: background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.story-card:hover {
  background: var(--surface-2);
  box-shadow: var(--shadow-hover);
}

.story-card.has-image {
  grid-template-columns: minmax(0, 1fr) 96px;
}

.story-card-media {
  grid-column: 2;
  grid-row: 1;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.story-card-media img,
.story-lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-card-body {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.story-card-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.story-card-deck {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 26px;
}

/* --------------------------------------------------------- lead tier */
.story-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

@media (min-width: 768px) {
  .story-lead.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: start;
  }

  .story-lead-media {
    grid-column: 2;
    grid-row: 1;
  }

  .story-lead-body {
    grid-column: 1;
    grid-row: 1;
  }
}

.story-lead-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.story-lead-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
}

.story-lead-deck {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: 17px;
  line-height: 30px;
}

/* ------------------------------------------------- rank lists (rail) */
.rank-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 44px;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--border);
}

.rank-list li > a,
.rank-list li > .source-name {
  color: var(--text);
  font-weight: 600;
}

.rank-count {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rank-change {
  font-family: var(--font-mono);
  font-size: 13px;
}

.rank-change.is-up {
  color: var(--accent);
}

.rank-change.is-flat,
.rank-change.is-down {
  color: var(--text-muted);
}

.rank-note {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
}

/* ------------------------------------------- government-mode toggle */
.topbar-actions .gov-mode-toggle {
  min-height: 44px;
  padding-inline: var(--space-3);
  white-space: nowrap;
}

/* ------------------------------------------------------- AI summary */
.ai-summary {
  padding: var(--space-4);
  border-inline-start: 2px solid var(--ai);
  border-radius: var(--radius-md);
  background: var(--ai-tint);
}

.ai-summary-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.ai-summary-label {
  margin: 0;
  color: var(--ai-text);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.ai-summary-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
}

.ai-summary h3 {
  margin-block: var(--space-4) var(--space-2);
  font-size: 16px;
  line-height: 26px;
}

.ai-summary-score {
  margin-block: var(--space-3) var(--space-1);
  font-family: var(--font-mono);
}

.ai-summary-method summary {
  min-height: 44px;
  color: var(--ai-text);
  cursor: pointer;
}

.ai-summary-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.ai-summary-footer {
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
}

/* ---------------------------------------------------------- details */
.detail-article {
  max-width: 1100px;
  margin-block: var(--space-5);
}

.detail-heading {
  margin-block: var(--space-2) var(--space-3);
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
}

.detail-heading[lang="en"] {
  font-family: var(--font-latin);
}

.detail-media {
  max-width: 800px;
  margin-block: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
}

.detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-block-start: var(--space-4);
}

@media (min-width: 1200px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }
}

.detail-deck {
  color: var(--text);
  font-size: 19px;
  line-height: 32px;
}

.detail-body {
  color: var(--text);
  font-size: 17px;
  line-height: 30px;
}

.detail-body p {
  text-align: start;
}

.detail-source-link {
  margin-block-start: var(--space-4);
}

.detail-related {
  margin-block: var(--space-7);
}

/* ------------------------------------------- analytics: empty state */
.insufficient-data {
  max-width: 40rem;
  margin-block: var(--space-5);
  padding: var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.insufficient-data h2 {
  margin: 0 0 var(--space-2);
  font-size: 18px;
  line-height: 28px;
}

.insufficient-data p {
  color: var(--text-muted);
}

/* Header fit: the brand never shrinks; below the wide breakpoint the "last updated" pill
   (repeated in the homepage feed header) yields its space to the navigation. */
.brandmark,
.brandmark-copy,
.brandmark-title {
  flex-shrink: 0;
}

/* The header row lives in .container-xxl, capped at 1320px, so a wider screen never adds
   room. With the full nav, the government toggle and the signed-in admin controls there is
   no space for the status pill at any width; "آخر تحديث" is shown in the homepage feed
   header and on the analytics pages instead. */
.topnav-status {
  display: none;
}

/* Icon buttons: fixed icon box and a 44px touch target. */
.ui-icon {
  width: 18px;
  height: 18px;
  max-width: none;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

/* ======================================================== Phase 3 polish */

/* "عاجل" tag sits inline before the headline. */
.story-row-title .tag-breaking {
  margin-inline-end: var(--space-2);
  vertical-align: 2px;
}

.story-row.is-breaking .story-row-title a {
  display: inline;
}

.story-more-sources {
  color: var(--text-muted);
}

/* Trending: column labels so the delta reads as "compared with yesterday". */
.rank-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 4.5rem;
  gap: var(--space-2);
  padding-block-end: var(--space-1);
  border-block-end: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 16px;
}

.rank-list li {
  grid-template-columns: minmax(0, 1fr) 6.5rem 4.5rem;
}

.rank-columns span:not(:first-child),
.rank-list .rank-count,
.rank-list .rank-change {
  text-align: end;
}

.home-sources .rank-list li {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Government mode: the state is part of the visible label. */
.gov-mode-state {
  font-weight: 600;
}

.gov-mode-toggle[aria-pressed="true"] .gov-mode-state {
  color: var(--accent);
}

/* Search is a 44px icon button (tooltip "بحث (Ctrl+K)") that opens the command search.
   The 1320px header cap leaves no room for the labelled box next to the full nav. */
.topbar-actions .command-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

.topbar-actions .command-button span,
.topbar-actions .command-button kbd {
  display: none;
}


/* Story dates are Arabic words ("قبل 3 ساعات", "4 تشرين الأول"), not figures: body font,
   not the mono figure font. */
time[data-relative-time],
.story-meta time,
.ai-summary-footer time {
  font-family: inherit;
}

/* The login link in the drawer appears only where the header has no room for it. */
.topnav-login-link {
  display: none;
}

@media (max-width: 575px) {
  .topbar-actions .topbar-login-link {
    display: none;
  }

  .topnav .topnav-login-link {
    display: flex;
  }

}

/* The government toggle shows the short "حكومي: متوقف" at every width so the desktop nav
   stays on one line; "وضع" stays in the accessible name. */
.gov-mode-word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Desktop nav is one line: no wrapping, links never break. */
@media (min-width: 1200px) {
  .topnav {
    flex-wrap: nowrap;
  }

  .topnav-link {
    white-space: nowrap;
  }
}

/* 1200-1439px: slightly tighter links keep a clear gap between the nav and the actions. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .topnav .topnav-link {
    padding-inline: var(--space-2);
  }
}

/* Counts now carry Arabic nouns ("11 خبراً"): body font with tabular figures. */
.rank-count {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

/* Mobile lead: the excerpt stops at four lines; the full text is one tap away. */
@media (max-width: 767px) {
  .story-lead-deck {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
}

/* Signed-in header: the account chip shows only its avatar (the chip keeps its
   "حساب المستخدم" label), so the admin menu fits on the nav line. */
.account-chip .account-chip-name,
.account-chip .account-chip-role,
.account-chip .account-chevron {
  display: none;
}


/* Signed-in, 1200-1439px: the admin menu, account chip and logout leave no room for the
   brand text, so the brand shows its logo only (the link keeps its full aria-label).
   Signed-out visitors keep the full brand at every desktop width. */
@media (min-width: 1200px) and (max-width: 1439px) {
  body[data-authenticated="true"] .brandmark-copy {
    display: none;
  }
}

/* ======================================================== Admin (Phase B) */

/* Shared admin bits */
.admin-muted {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
}

.admin-empty {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.admin-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.admin-nowrap {
  white-space: nowrap;
}

/* Tables scroll inside their own box instead of widening the page (768px and below). */
.admin-table-scroll,
.user-table-shell {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.admin-table-scroll:focus-visible,
.user-table-shell:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.admin-table th,
.admin-table td {
  vertical-align: top;
}

/* Long technical text: one clipped line, full text behind "التفاصيل". */
.admin-message-cell {
  min-width: 16rem;
  max-width: 36rem;
}

.admin-message-preview {
  display: block;
  overflow-wrap: anywhere;
}

.admin-details {
  margin-block-start: var(--space-1);
}

.admin-details summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
}

.admin-details-body {
  max-height: 16rem;
  margin-block-start: var(--space-1);
  padding: var(--space-2) var(--space-3);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Filters (logs) */
.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.admin-field {
  display: grid;
  gap: var(--space-1);
  min-width: 11rem;
}

.admin-field label {
  color: var(--text-muted);
  font-size: 13px;
}

.admin-field .form-select,
.admin-field .form-control,
.admin-filter-actions .btn {
  min-height: 44px;
}

.admin-filter-actions {
  display: flex;
  gap: var(--space-2);
}

.admin-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.admin-pagination a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* Users: role badge with readable text and an icon. */
.admin-role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px;
  padding-inline: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.admin-role-badge.is-admin {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.user-email {
  font-family: var(--font-latin);
}

/* Admin home: pipeline today */
.admin-pipeline-today {
  margin-block: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.admin-pipeline-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.admin-pipeline-counts div {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.admin-pipeline-counts dt {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.admin-pipeline-counts dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.admin-pipeline-counts .is-failed dd {
  color: var(--danger);
}

.admin-subheading {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  line-height: 26px;
}

.admin-subheading small {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

.admin-reason-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.admin-reason-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.admin-reason-text {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-latin);
  font-size: 13px;
  text-align: start;
}

.admin-reason-count {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.ops-log-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
}

/* Stat tiles: the label clears the absolutely positioned icon. */
.ops-stat-label {
  display: block;
  min-height: 2.1rem;
  margin-inline-start: 2.75rem;
  line-height: 2.1rem;
  text-transform: none;
}

/* Arabic text never in the mono figure font (log rows, source names). */
.ops-log-terminal,
.rss-source-top h3 {
  font-family: var(--font-body);
}

.ops-log-row time,
.ops-log-counters bdi {
  font-variant-numeric: tabular-nums;
}

/* Sources: the list grows with the page instead of a short inner scroll box. */
.rss-list-panel {
  max-height: none;
}

.rss-source-list {
  overflow: visible;
}

/* Touch targets ≥44px */
.rss-menu-button,
.rss-category-tabs button,
.rss-action-menu a,
.rss-action-menu button,
.user-action-button,
.security-text-action,
.secret-field-toggle {
  min-width: 44px;
  min-height: 44px;
}

.rss-source-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Secret field (provider API key) */
.secret-field {
  display: flex;
  gap: var(--space-2);
}

.secret-field .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.secret-field-toggle {
  padding-inline: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}

/* Security: start step */
.security-start-copy {
  margin-block: var(--space-3) var(--space-4);
  color: var(--text-muted);
  line-height: 26px;
}

/* Experimental intelligence pages */
.intel-experimental-banner {
  display: grid;
  gap: var(--space-1);
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-inline-start: 4px solid var(--text-muted);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.intel-experimental-banner strong {
  font-size: 16px;
}

.intel-experimental-banner span {
  color: var(--text-muted);
  font-size: 13px;
}

/* Dates are Arabic words ("5 تشرين الأول 2026 · 14:00"): body font with tabular figures,
   never the mono figure font. Overrides the global time rule above. */
time {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.admin-duration {
  font-variant-numeric: tabular-nums;
}

/* Touch targets ≥44px on admin, intelligence, pending-news and security pages. */
body[data-page^="Admin-"] main .btn,
body[data-page^="Admin-"] main button:not(.rss-menu-button),
body[data-page^="Admin-"] main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body[data-page^="Intelligence-"] main .btn,
body[data-page^="Intelligence-"] main button,
body[data-page="News-Pending"] main .btn,
body[data-page="News-Pending"] main button,
body[data-page="News-Pending"] main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body[data-page="Security-Index"] main button {
  min-height: 44px;
}

.ops-log-all-link,
.rss-admin-ghost,
.user-admin-ghost,
.ai-admin-back,
.official-print-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.rss-priority-control button,
.rss-priority-number {
  min-width: 44px;
  min-height: 44px;
}

/* Breadcrumb and small header links on admin pages: full 44px hit area. */
.admin-breadcrumb a,
.list-breadcrumb a,
.ai-sidebar-heading > a,
.rss-secondary-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}