/* ==========================================================================
   Crypto news — the /cryptonews/ hub, its dated archives and a single item
   ==========================================================================

   Plain CSS on purpose. `style.css` is a webpack + Tailwind artifact and the
   theme cannot be rebuilt here (no node_modules), so a new utility class in the
   markup would silently do nothing. Everything this section needs is below.

   Two things shape the rules:

   1. **Direction.** The blog is RTL, but the same markup has to survive an LTR
      context, so every edge that has a side is a logical property
      (`margin-inline-start`, `border-block-end`, …). The only physical values
      left are the ones that are symmetric anyway — centring a 1px line with
      `left: 50%` and a translate is the same in both directions.

   2. **Two themes from one set of rules.** The colours are read from local
      custom properties declared once on `.arz-cn, .arz-cn-single`; the dark
      block at the bottom re-points those at the palette in `theme-mode.css`
      instead of repeating every rule. Adding a colour here means adding it in
      both places, and nowhere else.
   ========================================================================== */

.arz-cn,
.arz-cn-single {
    /* Light theme — the values are the compiled theme's own ramp. */
    --cn-surface: #ffffff;
    --cn-surface-sunken: rgb(242 244 250);      /* gray-50  */
    --cn-hairline: rgb(211 214 227);            /* gray-100 */
    --cn-border: rgb(182 185 204);              /* gray-200 */
    --cn-title: rgb(55 59 79);                  /* gray-700 */
    --cn-text: rgb(78 83 107);                  /* gray-600 */
    --cn-muted: rgb(104 109 135);               /* gray-500 */
    --cn-faint: rgb(128 133 158);               /* gray-400 */
    --cn-primary: rgb(0 203 140);               /* primary-600 */
    --cn-primary-strong: rgb(0 158 109);        /* primary-700 */
    --cn-primary-wash: rgb(230 252 245);        /* primary-50  */
    --cn-danger: rgb(181 18 42);                /* danger-700  */
    --cn-danger-mark: rgb(255 25 59);           /* danger-500  */
    --cn-danger-wash: rgb(255 236 239);
    --cn-shadow: 0px 3px 15px 0px rgba(55, 59, 79, 0.06);
}


/* ==========================================================================
   Day navigation
   ========================================================================== */

.arz-cn {
    display: block;
    margin-block-start: 1.5rem;
}

@media (min-width: 1024px) {
    .arz-cn {
        margin-block-start: 2.5rem;
    }
}

.arz-cn-days {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--cn-surface);
    box-shadow: var(--cn-shadow);
}

.arz-cn-days__strip {
    display: flex;
    flex: 1 1 auto;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* The strip scrolls; its scrollbar should not add a visible gutter on desktop. */
.arz-cn-days__strip::-webkit-scrollbar {
    height: 4px;
}

.arz-cn-days__strip::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--cn-hairline);
}

.arz-cn-days__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--cn-hairline);
    border-radius: 999px;
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--cn-muted);
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.arz-cn-days__chip:hover {
    border-color: var(--cn-primary);
    color: var(--cn-primary-strong);
}

.arz-cn-days__chip--current {
    background-color: var(--cn-primary-wash);
    border-color: var(--cn-primary);
    color: var(--cn-primary-strong);
    font-weight: 700;
}

.arz-cn-days__chip-count {
    font-size: 0.8125rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.arz-cn-days__arrow {
    display: none;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: var(--cn-muted);
    white-space: nowrap;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Under 768px the strip alone is the navigation — two arrows plus a scrolling
   strip in one row leaves the strip about forty pixels wide. */
@media (min-width: 768px) {
    .arz-cn-days__arrow {
        display: inline-flex;
    }
}

.arz-cn-days__arrow:hover {
    background-color: var(--cn-surface-sunken);
    color: var(--cn-primary-strong);
}

/* The unavailable end of the run keeps its chrome and only loses its colour —
   the same decision the story row arrows landed on. A button that fades out
   reads as a rendering fault; one that is simply quiet reads as spent. */
.arz-cn-days__arrow--off {
    color: var(--cn-faint);
    cursor: default;
}

.arz-cn-days__arrow--off:hover {
    background-color: transparent;
    color: var(--cn-faint);
}

.arz-cn-days__arrow-glyph {
    font-size: 1.25rem;
    line-height: 1;
}


/* ==========================================================================
   Summary line and notices
   ========================================================================== */

.arz-cn-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding-inline: 0.25rem;
    font-size: 0.9375rem;
    color: var(--cn-muted);
}

.arz-cn-summary__day {
    font-weight: 700;
    color: var(--cn-title);
}

.arz-cn-summary__sep {
    color: var(--cn-faint);
}

.arz-cn-notice {
    margin-block-start: 1rem;
    margin-block-end: 0;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--cn-hairline);
    border-radius: 0.5rem;
    background-color: var(--cn-surface-sunken);
    font-size: 0.9375rem;
    color: var(--cn-muted);
}


/* ==========================================================================
   The feed
   ========================================================================== */

.arz-cn-feed {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    border-radius: 0.5rem;
    background-color: var(--cn-surface);
    box-shadow: var(--cn-shadow);
    overflow: hidden;
}

.arz-cn-item {
    display: flex;
    gap: 0.875rem;
    padding: 1.25rem 1rem;
    border-block-end: 1px solid var(--cn-hairline);
}

@media (min-width: 768px) {
    .arz-cn-item {
        gap: 1.25rem;
        padding: 1.5rem;
    }
}

.arz-cn-item:last-child {
    border-block-end: 0;
}

/* -- the rail: time, dot, and the line that joins one item to the next ---- */

.arz-cn-item__rail {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 2.75rem;
    padding-block-start: 0.25rem;
}

@media (min-width: 768px) {
    .arz-cn-item__rail {
        width: 3.25rem;
    }
}

/* Centred with left/transform rather than an inline property: the line sits in
   the middle of the rail, which is the same place in either direction. */
.arz-cn-item__rail::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    inset-block-start: 2.25rem;
    inset-block-end: -2.5rem;
    width: 1px;
    background-color: var(--cn-hairline);
}

.arz-cn-item:last-child .arz-cn-item__rail::after {
    display: none;
}

.arz-cn-item__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--cn-primary);
    box-shadow: 0 0 0 4px var(--cn-primary-wash);
}

.arz-cn-item--breaking .arz-cn-item__dot {
    background-color: var(--cn-danger-mark);
    box-shadow: 0 0 0 4px var(--cn-danger-wash);
}

.arz-cn-item__time {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cn-muted);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* -- the body ------------------------------------------------------------ */

.arz-cn-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

.arz-cn-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.5rem;
}

.arz-cn-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--cn-hairline);
    border-radius: 0.375rem;
    background-color: var(--cn-surface-sunken);
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--cn-muted);
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

a.arz-cn-tag:hover {
    border-color: var(--cn-primary);
    color: var(--cn-primary-strong);
}

.arz-cn-tag--breaking {
    border-color: transparent;
    background-color: var(--cn-danger-wash);
    color: var(--cn-danger);
    font-weight: 700;
}

.arz-cn-item__title {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.9;
    color: var(--cn-title);
}

@media (min-width: 768px) {
    .arz-cn-item__title {
        font-size: 1.375rem;
    }
}

.arz-cn-item__title a {
    color: inherit;
    transition: color 0.3s ease-in-out;
}

.arz-cn-item__title a:hover {
    color: var(--cn-primary-strong);
}

.arz-cn-item__caption {
    margin: 0.5rem 0 0;
    font-size: 1.0625rem;
    line-height: 2;
    color: var(--cn-text);
}

.arz-cn-item__source {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    color: var(--cn-faint);
}

.arz-cn-item__source-label {
    margin-inline-end: 0.25rem;
}

.arz-cn-item__source a {
    color: var(--cn-primary-strong);
}

/* The compact variant is the "more from this day" list under a single item:
   headline only, so the rows read as a list rather than a second feed. */
.arz-cn-feed--compact .arz-cn-item {
    padding-block: 0.875rem;
}

.arz-cn-feed--compact .arz-cn-item__title {
    font-size: 1.0625rem;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .arz-cn-feed--compact .arz-cn-item__title {
        font-size: 1.125rem;
    }
}

.arz-cn-feed--compact .arz-cn-item__rail::after {
    display: none;
}


/* ==========================================================================
   Empty state and pagination
   ========================================================================== */

.arz-cn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 0.75rem;
    padding: 3rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--cn-surface);
    box-shadow: var(--cn-shadow);
    text-align: center;
}

.arz-cn-empty__title {
    margin: 0;
    font-size: 1.125rem;
    color: var(--cn-muted);
}

.arz-cn-empty__link,
.arz-cn-single__back,
.arz-cn-single__today {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--cn-border);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: var(--cn-title);
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.arz-cn-empty__link:hover,
.arz-cn-single__back:hover,
.arz-cn-single__today:hover {
    border-color: var(--cn-primary);
    color: var(--cn-primary-strong);
}

.arz-cn-pagination {
    display: flex;
    justify-content: center;
    margin-block-start: 1.5rem;
}


/* ==========================================================================
   Scroll loading
   ========================================================================== */

/* A day boundary inside the loaded feed. It is an <li> because it lives in the
   same <ol> as the rows, and it links to the day's own permanent URL so the
   loaded copy never becomes the only route to it. */
.arz-cn-daybreak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--cn-hairline);
    background-color: var(--cn-surface-sunken);
    font-size: 0.9375rem;
}

@media (min-width: 768px) {
    .arz-cn-daybreak {
        padding-inline: 1.5rem;
    }
}

.arz-cn-daybreak__label {
    font-weight: 700;
    color: var(--cn-title);
}

.arz-cn-daybreak__link {
    color: var(--cn-primary-strong);
    transition: opacity 0.3s ease-in-out;
}

.arz-cn-daybreak__link:hover {
    opacity: 0.7;
}

.arz-cn-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1.5rem;
}

/* Every element this feature toggles with the `hidden` attribute also has an
   author `display` rule, and an author rule beats the user-agent
   `[hidden] { display: none }` — so `hidden` alone does nothing to them. These
   have to be restated, together, or the pagination stays on screen next to the
   loader that replaced it and the "load more" button survives the end of the
   archive. */
.arz-cn-more[hidden],
.arz-cn-more__button[hidden],
.arz-cn-pagination[hidden] {
    display: none;
}

.arz-cn-more__button {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.5rem;
    border: 1px solid var(--cn-border);
    border-radius: 0.5rem;
    background-color: var(--cn-surface);
    font-size: 1rem;
    font-family: inherit;
    color: var(--cn-title);
    cursor: pointer;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}

.arz-cn-more__button:hover {
    border-color: var(--cn-primary);
    color: var(--cn-primary-strong);
}

.arz-cn-more__button:focus-visible {
    outline: 2px solid var(--cn-primary);
    outline-offset: 2px;
}

/* While a batch is in flight the button stays put and stops responding, rather
   than being swapped for a spinner — a control that disappears under the
   pointer is how you get someone pressing whatever lands in its place. */
.arz-cn-more--loading .arz-cn-more__button {
    opacity: 0.6;
    pointer-events: none;
}

.arz-cn-more__status {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--cn-muted);
    text-align: center;
    min-height: 1.5rem;
}


/* ==========================================================================
   A single item
   ========================================================================== */

.arz-cn-single {
    margin-block-start: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--cn-surface);
    box-shadow: var(--cn-shadow);
}

@media (min-width: 768px) {
    .arz-cn-single {
        padding: 1.5rem 2rem;
    }
}

.arz-cn-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--cn-hairline);
    font-size: 0.9375rem;
    color: var(--cn-muted);
}

.arz-cn-single__day {
    color: var(--cn-muted);
    transition: color 0.3s ease-in-out;
}

.arz-cn-single__day:hover {
    color: var(--cn-primary-strong);
}

.arz-cn-single__sep {
    color: var(--cn-faint);
}

.arz-cn-single__time {
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* The body carries `entry-content` as well, so the article typography applies
   to whatever the editor produced. Only the frame is stated here. */
.arz-cn-single__body.entry-content {
    padding-block: 1.25rem;
    font-size: 1.125rem;
    line-height: 2.2;
    color: var(--cn-text);
}

.arz-cn-single__body.entry-content > *:first-child {
    margin-block-start: 0;
}

.arz-cn-single__source {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    color: var(--cn-faint);
}

.arz-cn-single__source a {
    color: var(--cn-primary-strong);
}

.arz-cn-single__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--cn-hairline);
}

.arz-cn--related {
    margin-block-start: 1.5rem;
}

.arz-cn-related__title {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cn-title);
}


/* ==========================================================================
   Dark theme
   ==========================================================================
   Only the custom properties are re-pointed. The values are the same tokens
   `theme-mode.css` uses, so this section stays in step with the rest of the
   blog — and with arzinja.info, which is where those tokens come from.
   ========================================================================== */

html.dark-mode .arz-cn,
html.dark-mode .arz-cn-single {
    --cn-surface: rgb(var(--arz-c-block));
    --cn-surface-sunken: rgb(var(--arz-c-over));
    --cn-hairline: rgb(var(--arz-c-border));
    --cn-border: rgb(var(--arz-c-border-strong));
    --cn-title: rgb(var(--arz-c-title));
    --cn-text: rgb(var(--arz-c-text));
    --cn-muted: rgb(var(--arz-c-muted));
    --cn-faint: rgb(var(--arz-c-caption));
    --cn-primary: rgb(var(--arz-c-primary));
    --cn-primary-strong: rgb(var(--arz-c-primary-strong));
    --cn-primary-wash: rgb(var(--arz-c-primary-tint));
    --cn-danger: rgb(255 138 152);
    --cn-danger-mark: rgb(255 101 124);
    --cn-danger-wash: rgb(var(--arz-c-danger-tint));
    --cn-shadow: 0 0 0 1px rgb(var(--arz-c-border));
}