.icon-button,
.text-button {
  border: 1px solid var(--line);
  background: var(--paper-1);
  min-height: 2.75rem;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.icon-button {
  inline-size: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.icon-button:hover,
.text-button:hover {
  border-color: var(--ink-0);
  transform: translateY(-2px);
}

.icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding-inline: .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-1);
  font-size: var(--text-xs);
  font-weight: 700;
}

.tag--signal {
  border-color: transparent;
  background: var(--brand-signal);
  color:var(--ds-text-on-signal);
}

.section-heading {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-4);
  align-items: center;
  margin-block-end: var(--space-5);
}

.section-heading h2 {
  margin: 0;
  font-size: var(--text-xl);
  letter-spacing: -.02em;
}

.section-heading__line {
  height: 1px;
  background: var(--line);
}

.section-index {
  color: var(--brand-oxide);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .08em;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 800;
}

.link-arrow .icon {
  transition: transform var(--motion-fast) var(--ease-out);
}

.link-arrow:hover .icon {
  transform: translateX(-4px);
}

/* Global interaction layer */
.reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  block-size: 4px;
  pointer-events: none;
}
.reading-progress > span {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--brand-oxide);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
[dir="rtl"] .reading-progress > span { transform-origin: right center; }

.back-to-top {
  position: fixed;
  right:max(1.5rem,env(safe-area-inset-right));
  bottom:max(1.5rem,env(safe-area-inset-bottom));
  left:auto;
  z-index:90;
  inline-size:3rem;
  block-size:3rem;
  display:grid;
  place-items:center;
  border:1px solid var(--quality-surface-border);
  border-radius:var(--ds-radius-pill);
  background:var(--quality-surface-bg);
  color:var(--ds-text-link);
  box-shadow:var(--quality-surface-shadow);
  backdrop-filter:blur(14px);
  font-size:1.35rem;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(.75rem);
  transition:
    opacity var(--motion-normal) var(--ease-out),
    transform var(--motion-normal) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{
  color:var(--ds-text-link-hover);
  border-color:var(--ds-border-active);
  box-shadow:var(--ds-shadow-float);
  transform:translateY(-2px);
}
.back-to-top:active{transform:translateY(1px) scale(.96)}
@media(max-width:560px){
  .back-to-top{
    right:max(1rem,env(safe-area-inset-right));
    bottom:max(1rem,env(safe-area-inset-bottom));
  }
}

a, button {
  transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
button:active, .primary-action:active, .lead__cta:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .back-to-top, a, button { transition: none !important; }
  html:focus-within { scroll-behavior: auto; }
}

/* EGYTAG responsive brand artwork */
.brand-logo,
.masthead__brand-logo,
.footer__brand-logo,
.public-brand__logo,
.public-footer__logo {
  display: inline-grid;
  align-items: center;
}
.brand-logo img,
.masthead__brand-logo img,
.footer__brand-logo img,
.public-brand__logo img,
.public-footer__logo img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
}
.brand-logo__dark { display: none !important; }
html[data-theme="dark"] .brand-logo__light { display: none !important; }
html[data-theme="dark"] .brand-logo__dark { display: block !important; }

/* Universal branded article media fallback — Design System V4. */
.article-media-fallback {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 100%;
  display: grid;
  place-items: center;
  background:var(--ds-surface-muted);
  color:var(--ds-text-link);
}
.article-media-fallback svg {
  inline-size: clamp(2.6rem, 20%, 5rem);
  block-size: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}
.article-media-fallback--small svg {
  inline-size: 1.35rem;
}
.article-media-fallback::after {
  content: "EGYTAG";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 10%;
  transform: translateX(-50%);
  color:var(--ds-text-link);
  font-size: clamp(.56rem, 3%, .78rem);
  font-weight: 950;
  letter-spacing: .16em;
  opacity: .48;
}

/* Shared interaction controls — consolidated Design System V4. */
.ui-icon,
.egytag-icon {
  inline-size:1.1em;
  block-size:1.1em;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.theme-menu {
  position:fixed;
  z-index:12000;
  inline-size:auto;
  min-inline-size:0;
  padding:.48rem;
  display:grid;
  grid-template-columns:repeat(5,2.7rem);
  gap:.35rem;
  border:1px solid var(--quality-surface-border);
  border-radius:var(--ds-radius-pill);
  background:color-mix(in srgb,var(--quality-surface-bg) 96%,transparent);
  box-shadow:var(--quality-surface-shadow-hover);
  backdrop-filter:blur(18px);
  transform-origin:top center;
  animation:theme-menu-enter var(--motion-normal) var(--ease-enter) both;
}
.theme-menu[hidden]{display:none!important}
.theme-menu > eg-button{
  display:block;
  inline-size:2.7rem;
  block-size:2.7rem;
}
.theme-menu__option,
button.theme-menu__option,
eg-theme-option.theme-menu__option{
  position:relative;
  inline-size:2.7rem;
  block-size:2.7rem;
  min-height:2.7rem;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  color:var(--text-primary);
  font:inherit;
  cursor:pointer;
}
button.theme-menu__option:hover,
button.theme-menu__option:focus-visible,
button.theme-menu__option[aria-checked="true"],
eg-theme-option.theme-menu__option:hover,
eg-theme-option.theme-menu__option:focus-visible,
eg-theme-option.theme-menu__option[aria-checked="true"]{
  background:transparent;
  color:var(--text-primary);
  border-color:var(--border-strong);
}
.theme-menu__swatch{
  inline-size:1.85rem;
  block-size:1.85rem;
  border:1px solid var(--theme-swatch-border);
  border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--theme-swatch-inner-ring),0 0 0 1px var(--theme-swatch-outer-ring);
}
.theme-menu__option[data-theme-option="blue"] .theme-menu__swatch{background:var(--theme-swatch-blue)}
.theme-menu__option[data-theme-option="light"] .theme-menu__swatch{background:var(--theme-swatch-light)}
.theme-menu__option[data-theme-option="dark"] .theme-menu__swatch{background:var(--theme-swatch-dark)}
.theme-menu__option[data-theme-option="green"] .theme-menu__swatch{background:var(--theme-swatch-green)}
.theme-menu__option[data-theme-option="red"] .theme-menu__swatch{background:var(--theme-swatch-red)}
.theme-menu__check{
  position:absolute;
  inline-size:.85rem;
  block-size:.85rem;
  inset-inline-end:.18rem;
  inset-block-end:.18rem;
  padding:.08rem;
  border-radius:50%;
  background:var(--surface-raised);
  color:var(--text-primary);
  box-shadow:0 0 0 1px var(--border-subtle);
  opacity:0;
}
.theme-menu__option[aria-checked="true"] .theme-menu__check{opacity:1}

.icon-button {
  border-radius:var(--ds-radius-control);
  transition:
    color var(--motion-fast) var(--ease-productive),
    background-color var(--motion-fast) var(--ease-productive),
    border-color var(--motion-fast) var(--ease-productive),
    box-shadow var(--motion-fast) var(--ease-productive),
    transform var(--motion-fast) var(--ease-productive);
}
.icon-button:hover {
  background:var(--ds-surface-interactive-hover);
  color:var(--ds-text-link);
  box-shadow:var(--ds-shadow-control);
}
.icon-button:active{transform:scale(.96)}

@keyframes theme-menu-enter {
  from{opacity:0;transform:translateY(-6px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}


/* ==========================================================================
   Mixed Typography V1
   ========================================================================== */
.mixed-typography{
  display:inline;
  unicode-bidi:isolate;
}
.mixed-foreign{
  color:var(--mixed-foreign-color);
  font-family:var(--font-mixed-latin);
  font-style:normal;
  unicode-bidi:isolate;
}
.mixed-foreign[dir="rtl"]{
  font-family:var(--font-mixed-ar);
}
.mixed-number{
  color:var(--mixed-number-color);
  font-family:var(--font-mixed-number);
  font-size:.94em;
  font-style:normal;
  font-weight:800;
  letter-spacing:-.025em;
  direction:ltr;
  unicode-bidi:isolate;
}
.mixed-symbol{
  color:var(--mixed-symbol-color);
  font-family:var(--font-mixed-symbol);
  font-style:normal;
  font-weight:750;
  unicode-bidi:isolate;
}

.mixed-token{
  display:inline;
  font-style:normal;
  unicode-bidi:isolate;
}
.mixed-url,
.mixed-email{
  font-family:var(--font-mixed-latin);
  font-size:.94em;
  font-weight:700;
  overflow-wrap:anywhere;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:.08em;
  text-underline-offset:.16em;
}
.mixed-url{color:var(--mixed-url-color)}
.mixed-email{color:var(--mixed-email-color)}
.mixed-tag{
  color:var(--mixed-tag-color);
  font-weight:800;
}
.mixed-mention{
  color:var(--mixed-mention-color);
  font-weight:750;
}
.mixed-currency,
.mixed-percent{
  color:var(--mixed-data-color);
  font-family:var(--font-mixed-number);
  font-size:.94em;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.mixed-unit,
.mixed-version,
.mixed-date,
.mixed-time,
.mixed-ip,
.mixed-path,
.mixed-file{
  color:var(--mixed-technical-color);
  font-family:var(--font-mixed-latin);
  font-size:.94em;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}
.mixed-path,
.mixed-file,
.mixed-ip{
  font-family:var(--font-mixed-number);
  overflow-wrap:anywhere;
}
.mixed-identifier{
  color:inherit;
  font-family:inherit;
  font-variant-numeric:normal;
}
.mixed-sign{
  text-decoration:none;
}

/* Long-form text gets a quiet chip treatment for social tokens only. */
.mixed-typography--body .mixed-tag,
.mixed-typography--body .mixed-mention{
  padding-inline:.18em;
  border-radius:.3em;
  background:var(--mixed-token-soft-bg);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* Metadata stays subordinate even when semantic tokens are detected. */
.mixed-typography--meta .mixed-token{
  color:inherit;
  background:none;
  padding:0;
  font-size:inherit;
  font-weight:inherit;
  text-decoration:none;
}

/* Headlines can carry the strongest visual identity. */
.mixed-typography--headline .mixed-foreign{
  font-weight:750;
}
.mixed-typography--headline .mixed-number{
  font-weight:850;
}
.mixed-typography--headline .mixed-symbol{
  font-weight:800;
}
.mixed-typography--headline .mixed-url,
.mixed-typography--headline .mixed-email,
.mixed-typography--headline .mixed-tag,
.mixed-typography--headline .mixed-mention,
.mixed-typography--headline .mixed-currency,
.mixed-typography--headline .mixed-percent,
.mixed-typography--headline .mixed-unit,
.mixed-typography--headline .mixed-version,
.mixed-typography--headline .mixed-date,
.mixed-typography--headline .mixed-time,
.mixed-typography--headline .mixed-ip,
.mixed-typography--headline .mixed-path,
.mixed-typography--headline .mixed-file{
  font-weight:850;
}

/* Cards are intentionally quieter than dominant headlines. */
.mixed-typography--card .mixed-foreign,
.mixed-typography--card .mixed-symbol{
  font-weight:700;
}
.mixed-typography--card .mixed-number{
  font-weight:800;
}

/* Long-form reading keeps the distinction subtle. */
.mixed-typography--body .mixed-foreign{
  color:var(--mixed-body-foreign-color);
  font-weight:650;
}
.mixed-typography--body .mixed-number{
  color:var(--mixed-body-number-color);
  font-size:.91em;
  font-weight:750;
}
.mixed-typography--body .mixed-symbol{
  color:var(--mixed-body-symbol-color);
  font-weight:650;
}
.mixed-typography--meta .mixed-foreign,
.mixed-typography--meta .mixed-number,
.mixed-typography--meta .mixed-symbol,
.mixed-typography--meta .mixed-token{
  color:inherit;
  font-weight:inherit;
}

/* Preserve headline rhythm when a different script font is injected. */
:is(h1,h2,h3,h4) .mixed-foreign,
:is(h1,h2,h3,h4) .mixed-number,
:is(h1,h2,h3,h4) .mixed-symbol,
:is(h1,h2,h3,h4) .mixed-token{
  line-height:1;
}


.mixed-numeric-token{
  display:inline;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
}

/* Public Web Component ownership layer. Structural hosts stay layout-transparent
   so SSR semantics, SEO and existing responsive composition remain unchanged. */
eg-site-header,eg-site-footer,eg-site-nav,eg-nav-more,eg-section,eg-story-card,
eg-pagination,eg-empty-state,eg-form-status,eg-reading-progress,eg-reader-card,
eg-toolbar,eg-filter-bar,eg-result-list,eg-badge,eg-media-frame,eg-page-hero,eg-sidebar,eg-tool-workspace,eg-tool-card,eg-article-body,eg-comment-list,eg-theme-menu,eg-page,
eg-button,eg-input,eg-select,eg-textarea,eg-checkbox,eg-radio,eg-form,
eg-disclosure,eg-theme-switch,eg-copy-link,eg-back-to-top{display:contents}


/* Theme Picker V5 — five visible color dots on public chrome. */
.theme-dots{
  display:inline-flex;
  align-items:center;
  gap:.34rem;
  padding:.24rem .3rem;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface-raised) 94%,transparent);
  box-shadow:var(--shadow-1);
}
.theme-dots > eg-button{display:block}
.theme-dot{
  inline-size:1.75rem;
  block-size:1.75rem;
  min-inline-size:1.75rem;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.theme-dot__swatch{
  inline-size:1.15rem;
  block-size:1.15rem;
  border-radius:50%;
  border:1px solid var(--theme-swatch-border);
  box-shadow:inset 0 0 0 2px var(--theme-swatch-inner-ring);
  transition:transform var(--motion-fast) var(--ease-productive),box-shadow var(--motion-fast) var(--ease-productive);
}
.theme-dot__swatch--light{background:var(--theme-swatch-light);border-color:var(--theme-swatch-light-border)}
.theme-dot__swatch--blue{background:var(--theme-swatch-blue)}
.theme-dot__swatch--green{background:var(--theme-swatch-green)}
.theme-dot__swatch--red{background:var(--theme-swatch-red)}
.theme-dot__swatch--dark{background:var(--theme-swatch-dark)}
.theme-dot:hover .theme-dot__swatch,
.theme-dot:focus-visible .theme-dot__swatch{transform:scale(1.12)}
.theme-dot:focus-visible{outline:0;box-shadow:var(--editorial-focus-ring,var(--shadow-focus))}
.theme-dot[aria-checked="true"]{
  border-color:transparent;
  box-shadow:none;
}
.theme-dot[aria-checked="true"] .theme-dot__swatch{
  transform:scale(1.08);
  box-shadow:0 0 0 2px var(--surface-raised),0 0 0 3px color-mix(in srgb,var(--text-primary) 48%,transparent);
}
@media(max-width:560px){
  .theme-dots{gap:.2rem;padding:.18rem .22rem}
  .theme-dot{inline-size:1.5rem;block-size:1.5rem;min-inline-size:1.5rem}
  .theme-dot__swatch{inline-size:.95rem;block-size:.95rem}
}


/* Public Surface Quality V2 — shared controls and compact identity. */
.tag{
  min-height:2.15rem;
  padding-inline:.72rem;
  border-color:var(--quality-chip-border);
  border-radius:var(--radius-pill);
  background:var(--quality-chip-bg);
  color:color-mix(in srgb,var(--accent-secondary) 84%,var(--text-primary));
  box-shadow:var(--quality-chip-shadow);
  font-weight:850;
}
.tag:hover,
.tag:focus-visible{
  border-color:var(--accent-secondary);
  background:color-mix(in srgb,var(--accent-secondary) 13%,var(--surface-raised));
  transform:translateY(-1px);
}
.icon-button,
.text-button{
  border-color:var(--quality-surface-border);
  background:var(--quality-surface-bg);
  box-shadow:var(--shadow-1);
}
.icon-button:hover,
.text-button:hover{
  border-color:var(--quality-surface-border-strong);
  box-shadow:var(--quality-surface-shadow-hover);
}