/* ==========================================================================
   Forsa — components.
   The signature is the TIME RIBBON on every card plus the pressed "ختم"
   stamp on closed opportunities: the product is a countdown, so the design
   makes time the thing you see first.
   ========================================================================== */

@layer components {
  /* ------------------------------------------------------------- buttons */
  .btn {
    --btn-bg: var(--brand);
    --btn-fg: var(--on-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    min-height: 2.6rem;
    border-radius: var(--r-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-out),
                color var(--dur-fast);
    box-shadow: var(--shadow-xs);
  }

  .btn:hover { background: var(--brand-hover); box-shadow: var(--shadow-sm); }
  .btn:active { transform: translateY(1px) scale(0.99); }

  /* Sheen sweep on hover — one small delight, not a light show.
     Parked just outside the inline-start edge and swept across; --flip keeps it
     travelling *over* the button in RTL instead of away from it. */
  .btn::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    inline-size: 45%;
    background: linear-gradient(100deg, transparent, oklch(100% 0 0 / 0.22), transparent);
    transform: translateX(0);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: -1;
  }

  .btn:hover::after { transform: translateX(calc(320% * var(--flip))); }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    border-color: var(--border-strong);
    box-shadow: none;
  }
  .btn--ghost:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); }

  .btn--soft {
    --btn-bg: var(--brand-soft);
    --btn-fg: var(--brand);
    box-shadow: none;
  }
  .btn--soft:hover { background: color-mix(in oklab, var(--brand-soft) 78%, var(--brand)); }

  .btn--sm { padding: 0.38rem 0.75rem; min-height: 2.15rem; font-size: var(--text-xs); border-radius: var(--r-xs); }
  .btn--lg { padding: 0.8rem 1.4rem; min-height: 3rem; font-size: var(--text-md); border-radius: var(--r-md); }
  .btn--block { inline-size: 100%; }

  .btn--danger { --btn-bg: var(--expired); --btn-fg: oklch(99% 0 0); }
  .btn--danger:hover { background: color-mix(in oklab, var(--expired) 85%, black); }

  .btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
    cursor: not-allowed;
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
    box-shadow: none;
    transform: none;
  }
  .btn[disabled]::after, .btn.is-disabled::after { display: none; }

  /* Draws a non-technical visitor's eye to the single action that matters. */
  .btn--attention { animation: nudge 2.6s var(--ease-out) 700ms 2; }

  @keyframes nudge {
    0%, 88%, 100% { box-shadow: var(--shadow-sm); }
    92% { box-shadow: 0 0 0 6px var(--brand-ring); }
  }

  /* --------------------------------------------------------------- chips */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: var(--text-2xs);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
  }

  .chip .ico { inline-size: 0.85em; block-size: 0.85em; opacity: 0.8; flex: none; }

  .chip--link { transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
  .chip--link:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

  /* Category filter pills: horizontally scrollable on phones. */
  .chips-scroll {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 0.15rem;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .chips-scroll::-webkit-scrollbar { display: none; }

  .chips-scroll > * { scroll-snap-align: start; flex: none; }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.8rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-soft);
    transition: all var(--dur-fast) var(--ease-out);
  }

  .pill:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }

  .pill.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-xs);
  }

  .pill__count {
    font-family: var(--font-num);
    font-size: var(--text-2xs);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
  }

  /* -------------------------------------------------------------- badges */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--r-xs);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
    font-family: var(--font-body);
  }

  .badge .ico { inline-size: 0.8em; block-size: 0.8em; flex: none; }

  .badge--open { background: var(--open-soft); color: var(--open); }
  .badge--closing { background: var(--closing-soft); color: var(--closing); }
  .badge--expired { background: var(--expired-soft); color: var(--expired); }
  .badge--info { background: var(--info-soft); color: var(--info); }
  .badge--new { background: var(--brand-soft); color: var(--brand); }
  .badge--featured {
    background: linear-gradient(120deg, color-mix(in oklab, var(--gold) 22%, transparent), var(--brand-soft));
    color: var(--brand);
    border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent);
  }

  .badge--closing .ico { animation: tick 1.6s steps(2) infinite; }

  @keyframes tick {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.35; }
  }

  /* ---------------------------------------------------------------- card */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--card-pad);
    padding-block-start: calc(var(--card-pad) + 0.15rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--dur-mid) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out);
    container-type: inline-size;
  }

  @media (hover: hover) {
    .card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
    }
    .card:hover .card__title a { color: var(--brand); }
  }

  .card:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
  }

  /* ---- SIGNATURE: the time ribbon ---- */
  .card__ribbon {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--border);
    overflow: hidden;
  }

  .card__ribbon::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--progress, 100%);
    background: linear-gradient(90deg,
      color-mix(in oklab, var(--ribbon-color, var(--open)) 65%, transparent),
      var(--ribbon-color, var(--open)));
    border-start-end-radius: var(--r-pill);
    border-end-end-radius: var(--r-pill);
    transform-origin: right center;
    animation: ribbon-fill var(--dur-slow) var(--ease-out) both;
  }

  @keyframes ribbon-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .card[data-status="closing"] { --ribbon-color: var(--closing); }
  .card[data-status="expired"] { --ribbon-color: var(--text-muted); }
  .card[data-status="open_ended"] { --ribbon-color: var(--info); }

  .card__top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .card__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--cat-color, var(--brand));
    background: color-mix(in oklab, var(--cat-color, var(--brand)) 12%, transparent);
    padding: 0.18rem 0.48rem;
    border-radius: var(--r-xs);
    transition: background var(--dur-fast);
  }

  .card__cat:hover { background: color-mix(in oklab, var(--cat-color, var(--brand)) 22%, transparent); }

  .card__title {
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
  }

  .card__title a { transition: color var(--dur-fast); }

  /* Whole-card click target without nesting interactive elements. */
  .card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .card__summary {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    margin: 0;
  }

  .card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    list-style: none;
    padding: 0;
    margin: 0.1rem 0 0;
    max-height: 3.6rem;
    overflow: hidden;
  }

  .card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-start: auto;
    padding-block-start: 0.55rem;
    border-block-start: 1px dashed var(--border);
    font-size: var(--text-2xs);
    color: var(--text-muted);
  }

  .card__foot .btn { position: relative; z-index: 2; }

  .card__deadline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
  }

  .card--expired { opacity: 0.82; }
  .card--expired .card__title a { color: var(--text-soft); }
  .card--expired:hover { opacity: 1; }

  .card--featured {
    border-color: color-mix(in oklab, var(--gold) 45%, var(--border));
    background: linear-gradient(180deg, color-mix(in oklab, var(--gold) 5%, var(--surface)), var(--surface) 40%);
  }

  .card--pinned::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 2.2rem;
    block-size: 2.2rem;
    background: linear-gradient(225deg, var(--brand) 50%, transparent 50%);
    opacity: 0.14;
  }

  /* Compact "most visited" row list — denser than a card grid. */
  .rank-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }

  .rank-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
  }

  /* Nudges toward the start edge — right in Arabic, left in English. */
  .rank-item:hover { border-color: var(--brand); transform: translateX(calc(-2px * var(--flip))); }

  .rank-item__num {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--brand);
    opacity: 0.5;
    min-inline-size: 1.35rem;
    text-align: center;
    flex: none;
  }

  .rank-item__body { min-inline-size: 0; flex: 1 1 auto; }

  .rank-item__title {
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
  }

  .rank-item__title a::after { content: ""; position: absolute; inset: 0; }

  .rank-item__meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    display: flex;
    gap: 0.5rem;
    margin-block-start: 0.1rem;
    flex-wrap: wrap;
  }

  .rank-item__views {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-num);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    flex: none;
  }

  /* -------------------------------------------------------- category card */
  .cat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid), border-color var(--dur-mid);
  }

  .cat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklab, var(--cat-color, var(--brand)) 45%, var(--border));
  }

  .cat-card__icon {
    inline-size: 2.3rem;
    block-size: 2.3rem;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--cat-color, var(--brand)) 14%, transparent);
    color: var(--cat-color, var(--brand));
    flex: none;
    transition: transform var(--dur-mid) var(--ease-spring);
  }

  .cat-card:hover .cat-card__icon { transform: scale(1.08) rotate(-4deg); }

  .cat-card__name {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
  }

  .cat-card__count { font-size: var(--text-2xs); color: var(--text-muted); }

  .cat-card__name a::after { content: ""; position: absolute; inset: 0; }

  /* -------------------------------------------------------------- search */
  .searchbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem 0.35rem 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  }

  .searchbar:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring);
  }

  .searchbar__icon { color: var(--text-muted); flex: none; margin-inline-start: 0.4rem; }

  .searchbar input {
    flex: 1 1 auto;
    min-inline-size: 0;
    border: 0;
    background: none;
    padding: 0.45rem 0.15rem;
    font-size: var(--text-base);
  }

  .searchbar input:focus { outline: none; }
  .searchbar input::placeholder { color: var(--text-muted); }

  /* ------------------------------------------------------------- filters */
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
  }

  .select {
    appearance: none;
    padding: 0.45rem 0.7rem;
    padding-inline-end: 1.75rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat left 0.5rem center / 0.85rem;
    font-size: var(--text-xs);
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color var(--dur-fast);
  }

  .select:hover { border-color: var(--brand); }

  /* --------------------------------------------------------- detail page */
  .detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(1rem, 0.8rem + 1.2vw, 1.85rem);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
  }

  .detail__head { position: relative; }

  .detail__title {
    font-size: var(--text-2xl);
    margin-block: 0.5rem 0.4rem;
    line-height: 1.25;
  }

  .detail__org {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-sm);
    color: var(--text-soft);
    font-weight: 500;
  }

  .detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-block: var(--space-3);
  }

  .detail__body {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--text-soft);
  }

  .detail__body p + p { margin-block-start: 0.85em; }
  .detail__body h3 { color: var(--text); margin-block: 1.3em 0.5em; font-size: var(--text-md); }
  .detail__body ul, .detail__body ol { margin-block: 0.6em; display: grid; gap: 0.3em; }
  .detail__body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

  /* Facts table: only rows the operator actually filled in ever render. */
  .facts {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-block: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }

  .fact {
    background: var(--surface-2);
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .fact__label {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
  }

  .fact__value {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
  }

  /* ---- apply panel ---- */
  .apply {
    margin-block-start: var(--space-5);
    padding: clamp(0.9rem, 0.75rem + 0.8vw, 1.35rem);
    border-radius: var(--r-md);
    background: linear-gradient(160deg, var(--brand-soft), var(--surface-2));
    border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--border));
  }

  .apply__title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    margin-block-end: 0.35rem;
  }

  .apply__note {
    font-size: var(--text-sm);
    color: var(--text-soft);
    margin-block-end: var(--space-3);
  }

  .apply__target {
    font-family: var(--font-num);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-block-start: 0.5rem;
    word-break: break-all;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .apply.is-closed {
    background: var(--surface-2);
    border-color: var(--border);
  }

  /* ---- SIGNATURE: the "ختم" (stamp) for closed opportunities ---- */
  .expired-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    background: var(--expired-soft);
    border: 1px solid color-mix(in oklab, var(--expired) 30%, transparent);
    color: var(--expired);
    margin-block-end: var(--space-4);
  }

  .expired-notice__icon { flex: none; margin-block-start: 0.1rem; }

  .expired-notice__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    margin-block-end: 0.15rem;
  }

  .expired-notice__text { font-size: var(--text-xs); color: color-mix(in oklab, var(--expired) 80%, var(--text)); }

  .stamp {
    position: absolute;
    inset-block-start: clamp(0.5rem, 2vw, 1.5rem);
    /* Stays positive: .detail clips its overflow, so a negative inset would
       shear the rotated corner of the stamp clean off. */
    inset-inline-end: clamp(0.35rem, 1.5vw, 1rem);
    z-index: 2;
    padding: 0.35rem 0.9rem;
    border: 2.5px solid var(--expired);
    border-radius: var(--r-xs);
    color: var(--expired);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    opacity: 0.7;
    rotate: -9deg;
    pointer-events: none;
    background: color-mix(in oklab, var(--expired) 6%, transparent);
    animation: stamp-press var(--dur-slow) var(--ease-spring) 320ms both;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--expired) 30%, transparent);
  }

  @keyframes stamp-press {
    0% { opacity: 0; scale: 2.1; rotate: -22deg; }
    70% { opacity: 0.85; scale: 0.96; rotate: -7deg; }
    100% { opacity: 0.7; scale: 1; rotate: -9deg; }
  }

  @media (prefers-reduced-motion: reduce) {
    .stamp { animation: none; opacity: 0.7; scale: 1; }
    .btn--attention { animation: none; }
    .badge--closing .ico { animation: none; }
    .card__ribbon::before { animation: none; }
  }

  /* Sticky mobile apply bar: the action is always within thumb reach. */
  .apply-dock {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-header);
    padding: 0.55rem var(--container-pad) calc(0.55rem + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transform: translateY(110%);
    transition: transform var(--dur-mid) var(--ease-out);
  }

  .apply-dock.is-visible { transform: translateY(0); }

  .apply-dock__info { flex: 1 1 auto; min-inline-size: 0; }
  .apply-dock__label { font-size: var(--text-2xs); color: var(--text-muted); }
  .apply-dock__value { font-size: var(--text-xs); font-weight: 600; }

  @media (min-width: 48rem) { .apply-dock { display: none; } }

  /* ------------------------------------------------------- countdown ring */
  .countdown {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
  }

  .countdown__dial {
    --size: 3rem;
    inline-size: var(--size);
    block-size: var(--size);
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    background: conic-gradient(
      var(--ribbon-color, var(--open)) calc(var(--progress, 100%) * 3.6),
      var(--border) 0
    );
    position: relative;
  }

  .countdown__dial::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--surface);
  }

  .countdown__num {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    color: var(--ribbon-color, var(--open));
  }

  .countdown__label { font-size: var(--text-2xs); color: var(--text-muted); }
  .countdown__value { font-size: var(--text-sm); font-weight: 600; }

  /* ---------------------------------------------------------- ad slots */
  .ad-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* The room on the END side is for the close button, which sits there. */
    padding-block: 0.3rem;
    padding-inline: 0.6rem 2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
  }

  .ad-slot__tag {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 6px;
    font-size: 0.56rem;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.03em;
    pointer-events: none;
  }

  .ad-slot__body {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    overflow: hidden;
  }

  /* Height cap is the whole point: an ad can never dominate a phone screen. */
  .ad-slot--top { margin-block: 0.4rem 0; }
  .ad-slot--top .ad-slot__body { max-block-size: var(--ad-max-h, 72px); }
  .ad-slot--top img { max-block-size: var(--ad-max-h, 72px); width: auto; object-fit: contain; }

  @media (min-width: 48rem) {
    .ad-slot--top .ad-slot__body { max-block-size: calc(var(--ad-max-h, 72px) * 1.5); }
    .ad-slot--top img { max-block-size: calc(var(--ad-max-h, 72px) * 1.5); }
  }

  .ad-slot--inline { margin-block: 0.25rem; }
  .ad-slot--inline .ad-slot__body { max-block-size: 130px; }
  .ad-slot--inline img { max-block-size: 130px; width: auto; object-fit: contain; }

  .ad-slot--footer .ad-slot__body { max-block-size: 110px; }
  .ad-slot--footer img { max-block-size: 110px; width: auto; object-fit: contain; }

  .ad-slot__close {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.35rem;
    translate: 0 -50%;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }

  .ad-slot__close:hover { color: var(--expired); border-color: var(--expired); }

  /* ------------------------------------------------- google ad containers */
  /* Deliberately plainer than .ad-slot: Google's own creative supplies the
     frame, and a second border around it looks like a mistake. */
  .gad {
    display: block;
    margin-block: var(--space-4);
    text-align: center;
  }

  .gad__tag {
    display: block;
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.75;
    margin-block-end: 0.2rem;
  }

  .gad__body { min-inline-size: 250px; }
  .gad__body ins { display: block; }

  /* An unfilled AdSense unit collapses to nothing — take the label with it,
     otherwise the page carries a floating "إعلان" over empty space. */
  .gad:has(ins[data-ad-status="unfilled"]) { display: none; }

  /* Ad Manager's collapseEmptyDiv only hides the div GPT owns, so the wrapper
     and its label survived it. slotRenderEnded sets this class instead; the
     specificity has to beat .gad's own display:block. */
  .gad.is-empty { display: none; }

  /* The slot holds its reserved height until a creative lands, then releases
     it — space is kept during load so nothing jumps, and not kept after. */
  .gad--rendered .gad__body { min-block-size: 0; }
  .gad__body > div[id^="gpt-"] { margin-inline: auto; }

  .gad--article_mid, .gad--before_apply { margin-block: var(--space-5); }
  .gad--feed { margin-block: 0.25rem; }

  /* ------------------------------------------------------------- notices */
  .notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--r-md);
    background: var(--info-soft);
    border: 1px solid color-mix(in oklab, var(--info) 25%, transparent);
    color: var(--text);
    font-size: var(--text-sm);
  }

  .notice .ico { color: var(--info); flex: none; margin-block-start: 0.15rem; }
  .notice--warn { background: var(--closing-soft); border-color: color-mix(in oklab, var(--closing) 30%, transparent); }
  .notice--warn .ico { color: var(--closing); }

  /* --------------------------------------------------------- empty state */
  .empty {
    text-align: center;
    padding: clamp(1.75rem, 1.4rem + 2vw, 3.25rem) var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface-2);
  }

  .empty__icon {
    inline-size: 3rem;
    block-size: 3rem;
    margin: 0 auto var(--space-3);
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
  }

  .empty__title { font-size: var(--text-md); margin-block-end: 0.35rem; }
  .empty__text { color: var(--text-muted); font-size: var(--text-sm); max-width: 42ch; margin-inline: auto; }
  .empty__actions { margin-block-start: var(--space-4); display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

  /* ---------------------------------------------------------- pagination */
  .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-block-start: var(--space-5);
    flex-wrap: wrap;
  }

  .pager__link {
    min-inline-size: 2.35rem;
    min-block-size: 2.35rem;
    padding-inline: 0.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    font-family: var(--font-num);
    font-size: var(--text-xs);
    color: var(--text-soft);
    transition: all var(--dur-fast) var(--ease-out);
  }

  .pager__link:hover { border-color: var(--brand); color: var(--brand); }
  .pager__link[aria-current="page"] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    font-weight: 600;
  }
  .pager__link.is-disabled { opacity: 0.4; pointer-events: none; }

  /* ------------------------------------------------------------ breadcrumb */
  .crumbs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-block-end: var(--space-3);
    flex-wrap: wrap;
  }

  .crumbs a { transition: color var(--dur-fast); }
  .crumbs a:hover { color: var(--brand); }
  .crumbs__sep { opacity: 0.5; }

  /* -------------------------------------------------------------- toasts */
  .toasts {
    position: fixed;
    inset-block-end: calc(1rem + env(safe-area-inset-bottom));
    inset-inline: var(--container-pad);
    z-index: var(--z-toast);
    display: grid;
    gap: 0.5rem;
    pointer-events: none;
    justify-items: center;
  }

  @media (min-width: 48rem) {
    .toasts { inset-inline: auto var(--space-5); justify-items: end; max-inline-size: 22rem; }
  }

  .toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--r-md);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    max-inline-size: min(100%, 26rem);
    animation: toast-in var(--dur-mid) var(--ease-spring) both;
  }

  .toast.is-leaving { animation: toast-out var(--dur-fast) var(--ease-out) both; }

  .toast__icon { flex: none; display: grid; place-items: center; inline-size: 1.35rem; block-size: 1.35rem; border-radius: 50%; }
  .toast--success .toast__icon { background: var(--open-soft); color: var(--open); }
  .toast--error .toast__icon { background: var(--expired-soft); color: var(--expired); }
  .toast--info .toast__icon { background: var(--info-soft); color: var(--info); }
  .toast--warning .toast__icon { background: var(--closing-soft); color: var(--closing); }

  .toast__close { color: var(--text-muted); flex: none; padding: 0.15rem; }

  @keyframes toast-in {
    from { opacity: 0; transform: translateY(1rem) scale(0.96); }
    to { opacity: 1; transform: none; }
  }

  @keyframes toast-out {
    to { opacity: 0; transform: translateY(0.5rem) scale(0.97); }
  }

  /* ------------------------------------------------------- push soft-ask */
  /* This has one job: be noticed. It sits above the thumb on a phone, carries
     the brand colour rather than blending into the page, and states the offer
     plainly. It still never triggers the browser's own permission dialog —
     that only ever fires from the visitor tapping the button inside it. */
  .push-prompt {
    position: fixed;
    inset-block-end: calc(0.85rem + env(safe-area-inset-bottom));
    inset-inline: var(--container-pad);
    z-index: calc(var(--z-toast) - 1);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.85rem;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: var(--r-lg);
    background:
      radial-gradient(22rem 10rem at 100% 0%, var(--brand-soft), transparent 70%),
      var(--surface-raised);
    border: 1px solid color-mix(in oklab, var(--brand) 28%, var(--border));
    box-shadow: var(--shadow-lg), 0 0 0 1px oklch(100% 0 0 / 0.04) inset;
    translate: 0 140%;
    opacity: 0;
    transition: translate var(--dur-slow) var(--ease-spring),
                opacity var(--dur-mid) var(--ease-out);
    overflow: hidden;
  }

  /* Brand rule across the top: reads as a notification, not a cookie banner. */
  .push-prompt::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: linear-gradient(90deg, var(--brand), var(--gold));
  }

  @media (min-width: 48rem) {
    .push-prompt {
      inset-inline: auto var(--space-5);
      max-inline-size: 26rem;
    }
  }

  .push-prompt.is-visible { translate: 0 0; opacity: 1; }

  .push-prompt__icon {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--brand), color-mix(in oklab, var(--brand) 60%, var(--gold)));
    color: var(--on-brand);
    flex: none;
    box-shadow: 0 6px 16px -6px var(--brand-ring);
    align-self: start;
  }

  .push-prompt__icon .ico {
    animation: bell-swing 3.4s var(--ease-in-out) 900ms 3;
    transform-origin: top center;
  }

  @keyframes bell-swing {
    0%, 70%, 100% { rotate: 0deg; }
    76% { rotate: 12deg; }
    82% { rotate: -10deg; }
    88% { rotate: 6deg; }
    94% { rotate: -3deg; }
  }

  .push-prompt__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-md);
    line-height: 1.35;
    /* Clears the close button: 1.9rem button + 0.5rem inset + breathing room.
       Measured too tight at 1.75rem — the button sat on the last word. */
    padding-inline-end: 2.75rem;
  }

  .push-prompt__text {
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: var(--leading-snug);
    margin-block: 0.25rem 0;
  }

  .push-prompt__text--sub {
    margin-block-start: 0.7rem;
    font-size: var(--text-xs);
  }

  /* Interest chips. Picking one is what turns "every opportunity" into "the
     ones I asked for", so they read as an invitation, not a form. */
  .push-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-block-start: 0.4rem;
    /* Roughly three rows on a phone; a long category list scrolls rather than
       pushing the buttons off the bottom of the panel. */
    max-block-size: 6.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .push-topic { display: inline-flex; }
  .push-topic input { position: absolute; opacity: 0; pointer-events: none; }

  .push-topic span {
    display: inline-block;
    padding: 0.28rem 0.6rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-soft);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  .push-topic input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
  }

  .push-topic input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  .push-prompt__actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
    margin-block-start: 0.9rem;
  }

  /* The primary action fills the row on a phone: an easy, obvious target. */
  .push-prompt__actions .btn { flex: 1 1 auto; }
  .push-prompt__actions .btn--ghost { flex: 0 1 auto; }

  .push-prompt__close {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: var(--r-xs);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    transition: background var(--dur-fast), color var(--dur-fast);
  }

  .push-prompt__close:hover { background: var(--surface-2); color: var(--text); }

  @media (prefers-reduced-motion: reduce) {
    .push-prompt__icon .ico { animation: none; }
  }

  /* --------------------------------------------------------- contact tiles */
  .contact-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }

  .contact-tile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast);
  }

  .contact-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--tile-color, var(--brand)) 50%, var(--border));
    box-shadow: var(--shadow-sm);
  }

  .contact-tile__icon {
    inline-size: 2.3rem;
    block-size: 2.3rem;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--tile-color, var(--brand)) 14%, transparent);
    color: var(--tile-color, var(--brand));
    flex: none;
  }

  .contact-tile__label { font-size: var(--text-2xs); color: var(--text-muted); }
  .contact-tile__value { font-size: var(--text-sm); font-weight: 500; }

  .social-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }

  .social-btn {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    transition: all var(--dur-fast) var(--ease-out);
  }

  .social-btn:hover {
    color: var(--on-brand);
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-2px) rotate(-4deg);
  }

  /* ------------------------------------------------ floating contact button
     A quiet pill in the bottom corner that fans open into the contact
     channels. It yields to whatever legitimately owns the bottom of the
     screen — the apply dock lifts it, the push prompt and the nav drawer
     hide it — so it never competes with the page's own calls to action.
     Without JS the main button is a plain link to /contact. */
  .contact-fab {
    position: fixed;
    inset-block-end: calc(0.9rem + env(safe-area-inset-bottom));
    inset-inline-end: var(--container-pad);
    z-index: calc(var(--z-sheet) - 10);
    display: grid;
    justify-items: end;
    gap: 0.5rem;
    transition: opacity var(--dur-mid) var(--ease-out), translate var(--dur-mid) var(--ease-out);
  }

  /* The apply dock owns the bottom edge while it is visible: stand on top of
     it rather than covering its button. */
  body:has(.apply-dock.is-visible) .contact-fab {
    inset-block-end: calc(4.4rem + env(safe-area-inset-bottom));
  }

  /* When something full-width claims the thumb zone (push prompt, nav
     drawer), stepping aside beats fighting it for attention. */
  body:has(.push-prompt.is-visible) .contact-fab,
  body.is-locked .contact-fab {
    opacity: 0;
    pointer-events: none;
    translate: 0 1rem;
  }

  .contact-fab__main {
    position: relative;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: var(--r-pill);
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--brand), color-mix(in oklab, var(--brand) 62%, var(--gold)));
    color: var(--on-brand);
    box-shadow: var(--shadow-md), 0 10px 24px -10px var(--brand-ring);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
  }

  .contact-fab__main:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 14px 30px -12px var(--brand-ring);
  }

  .contact-fab__main:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
  }

  /* Chat glyph crossfades into a close mark while the menu is open. */
  .contact-fab__icon {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition: opacity var(--dur-fast) var(--ease-out),
                rotate var(--dur-mid) var(--ease-spring),
                scale var(--dur-fast) var(--ease-out);
  }

  .contact-fab__icon--close { opacity: 0; rotate: -90deg; scale: 0.5; }

  .contact-fab.is-open .contact-fab__icon--chat { opacity: 0; rotate: 90deg; scale: 0.5; }
  .contact-fab.is-open .contact-fab__icon--close { opacity: 1; rotate: 0deg; scale: 1; }

  .contact-fab__menu {
    min-inline-size: min(16rem, calc(100vw - 2 * var(--container-pad)));
    max-block-size: min(22rem, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem;
    border-radius: var(--r-lg);
    background: color-mix(in oklab, var(--surface-raised) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    translate: 0 0.6rem;
    scale: 0.97;
    transform-origin: bottom center;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out),
                translate var(--dur-fast) var(--ease-spring),
                scale var(--dur-fast) var(--ease-spring);
  }

  .contact-fab.is-open .contact-fab__menu {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    pointer-events: auto;
  }

  /* Items trail in one after another — quick enough to feel snappy,
     slow enough to read as one motion. */
  .contact-fab__menu > * {
    opacity: 0;
    translate: 0 0.3rem;
    transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
  }

  .contact-fab.is-open .contact-fab__menu > * { opacity: 1; translate: 0 0; }

  .contact-fab.is-open .contact-fab__menu > :nth-child(2) { transition-delay: 30ms; }
  .contact-fab.is-open .contact-fab__menu > :nth-child(3) { transition-delay: 60ms; }
  .contact-fab.is-open .contact-fab__menu > :nth-child(4) { transition-delay: 90ms; }
  .contact-fab.is-open .contact-fab__menu > :nth-child(5) { transition-delay: 120ms; }
  .contact-fab.is-open .contact-fab__menu > :nth-child(n+6) { transition-delay: 150ms; }

  .contact-fab__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-sm);
    color: var(--text-soft);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .contact-fab__item:hover {
    background: color-mix(in oklab, var(--tile-color, var(--brand)) 11%, transparent);
    color: var(--text);
  }

  .contact-fab__item:focus-visible {
    outline: 2px solid var(--tile-color, var(--brand));
    outline-offset: -2px;
  }

  .contact-fab__item-icon {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: var(--r-xs);
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--tile-color, var(--brand)) 14%, transparent);
    color: var(--tile-color, var(--brand));
    flex: none;
  }

  .contact-fab__item-label { font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }

  .contact-fab__item-value {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    min-inline-size: 0;
    direction: ltr;
  }

  .contact-fab__divider {
    block-size: 1px;
    margin-block: 0.3rem;
    background: var(--border);
  }

  .contact-fab__heading {
    padding: 0.2rem 0.6rem 0;
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .contact-fab,
    .contact-fab__main,
    .contact-fab__icon,
    .contact-fab__menu,
    .contact-fab__menu > * {
      transition: none;
      translate: 0 0;
      scale: 1;
      rotate: 0deg;
    }
  }

  /* ---------------------------------------------------------------- forms */
  .field { display: grid; gap: 0.3rem; }

  .field__label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .field__hint { font-size: var(--text-2xs); color: var(--text-muted); }
  .field__error { font-size: var(--text-2xs); color: var(--expired); font-weight: 500; }

  .input, .textarea {
    inline-size: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  }

  .input:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
  }

  .input[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--expired);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--expired) 20%, transparent);
  }

  .textarea { min-block-size: 7rem; resize: vertical; line-height: var(--leading-normal); }

  .honeypot { position: absolute; inset-inline-start: -9999px; opacity: 0; pointer-events: none; }

  /* ---------------------------------------------------------- theme swap */
  /* Show the icon for the theme you would switch TO, not the current one. */
  .theme-icon { display: none; line-height: 0; }
  .theme-icon--moon { display: block; }

  :root[data-theme="dark"] .theme-icon--moon { display: none; }
  :root[data-theme="dark"] .theme-icon--sun { display: block; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon--moon { display: none; }
    :root:not([data-theme="light"]) .theme-icon--sun { display: block; }
  }
  :root[data-theme="light"] .theme-icon--sun { display: none; }
  :root[data-theme="light"] .theme-icon--moon { display: block; }

  /* --------------------------------------------------------- skeletons */
  .skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
    background-size: 250% 100%;
    animation: shimmer 1.35s linear infinite;
    border-radius: var(--r-xs);
    color: transparent;
  }

  @keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -50% 0; }
  }
}

@layer components {
  /* Scroll-driven reveal for card grids, where supported. Cards are visible
     by default so a missing feature never hides content. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .grid-cards > .card,
      .rank-list > .rank-item {
        animation: card-enter var(--dur-slow) var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry 0% entry 42%;
      }
    }
  }

  @keyframes card-enter {
    from { opacity: 0; transform: translateY(1.1rem) scale(0.985); }
    to { opacity: 1; transform: none; }
  }
}