/* ==========================================================================
   daniyal.md — daily log
   A document page, not a blog. Prose is Inter; anything structurally "code"
   (dates, labels, file names, frontmatter) stays JetBrains Mono, which is the
   system's primary way of separating content from metadata.
   Depends on base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Document column
   -------------------------------------------------------------------------- */

.doc {
  display: flex;
  justify-content: center;
  padding: var(--space-9) var(--space-8) var(--space-11);
}

.doc__inner {
  width: 100%;
  max-width: var(--content-width);   /* 760px reading column */
}

/* Staggered entrance. Pure CSS — this page has no boot sequence to drive. */
.rise {
  animation: rise var(--duration-slow) var(--ease-out) both;
}

.rise:nth-child(1) { animation-delay:  40ms; }
.rise:nth-child(2) { animation-delay: 110ms; }
.rise:nth-child(3) { animation-delay: 180ms; }
.rise:nth-child(4) { animation-delay: 250ms; }
.rise:nth-child(5) { animation-delay: 320ms; }
.rise:nth-child(6) { animation-delay: 390ms; }

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   2. Document header
   -------------------------------------------------------------------------- */

.doc__header { margin-bottom: var(--space-8); }

.doc__title {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 5vw, 2.25rem);   /* 28px → 36px */
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ink-900);
}

.doc__subtitle {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink-500);
}

/* Progress toward day 30, drawn with the same 2px hairline the landing page
   uses for its build sweep. */
.progress { margin-top: var(--space-6); }

.progress__track {
  position: relative;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--border-hairline);
  overflow: hidden;
}

.progress__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-green);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  animation: progress-fill var(--duration-slow) var(--ease-standard) 520ms both;
}

@keyframes progress-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(var(--progress, 0)); }
}

.progress__label {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-300);
}

/* --------------------------------------------------------------------------
   3. Frontmatter card
   Straight from the design system's FrontmatterCard: paper-sunken rule lines
   carrying literal `---` delimiters, mono key/value grid between them.
   -------------------------------------------------------------------------- */

.frontmatter {
  margin-bottom: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  overflow: hidden;
}

.frontmatter__rule {
  padding: 14px 18px;
  background: var(--paper-sunken);
  border-bottom: 1px dashed var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-500);
}

.frontmatter__rule--close {
  padding: 2px 18px 14px;
  background: none;
  border-bottom: none;
}

.frontmatter__fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: var(--space-2);
  column-gap: 14px;
  padding: var(--space-4) 18px var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.frontmatter__key   { color: var(--ink-300); }
.frontmatter__value { color: var(--ink-900); }

/* --------------------------------------------------------------------------
   3b. Series block — the video companion to this log
   -------------------------------------------------------------------------- */

.series { margin-bottom: var(--space-8); }

.series__blurb {
  max-width: 60ch;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--ink-700);
}

.series__name {
  font-weight: var(--weight-medium);
  color: var(--ink-900);
}

.series__action { margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   4. Section heading — markdown-header style, lowercase
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.section-head__hash {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  color: var(--ink-150);
}

/* --------------------------------------------------------------------------
   5. Entries
   -------------------------------------------------------------------------- */

.entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* 1px border, 8px radius, no shadow at rest, paper-raised. Hover only changes
   the border colour — the system's card rule, exactly. */
.entry {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.entry:hover { border-color: var(--border-strong); }

.entry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 18px;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1;
}

.entry__day {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-900);
}

.entry__date { color: var(--ink-300); }

/* Date and reel link ride together on the right of the head, so the day number
   keeps the left edge to itself. */
.entry__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Deliberately not a button. This is metadata in the head strip, at the same
   size and weight as the date beside it, so it reads as part of the entry's
   chrome rather than a call to action. */
.reel-link {
  /* Grows the 12px hit area past the 24px WCAG 2.5.8 floor without moving the
     layout, same trick as the footer address. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: var(--space-2);
  margin-block: calc(var(--space-2) * -1);

  color: var(--ink-500);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition:
    color var(--duration-base) var(--ease-standard),
    text-decoration-color var(--duration-base) var(--ease-standard);
}

.reel-link:hover {
  color: var(--accent-green);
  text-decoration-color: var(--accent-green);
}

.reel-link__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ink-300);
  transition: color var(--duration-base) var(--ease-standard);
}

.reel-link:hover .reel-link__icon { color: var(--accent-green); }

.entry__body { padding: var(--space-6) 18px; }

.entry__summary {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--ink-900);
}

.entry__section { margin-top: var(--space-6); }

/* Uppercase mono micro-label, the same treatment the system gives
   `status: shipped`. */
.entry__label {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-300);
}

.entry__prose {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
}

/* Notes can run to more than one thread in a day. Splitting them into
   paragraphs keeps the block scannable instead of one dense run. */
.entry__prose + .entry__prose { margin-top: var(--space-4); }

.entry__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* A resource is a prose title plus its origin. The title is content, so it is
   Inter; the domain is metadata, so it stays mono — the system's split. This
   is what lets the name carry the link instead of a raw URL. */
/* The source always sits on its own line rather than trailing the title. Left
   inline it only wraps when the title is long, so short titles kept their
   domain alongside and long ones pushed it below, giving the list two
   different shapes. Stacking reads as a citation list and holds at any width. */
.entry__resource {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.entry__source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-300);
  white-space: nowrap;
}

.entry__link {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--accent-green-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color var(--duration-base) var(--ease-standard),
    text-decoration-color var(--duration-base) var(--ease-standard);
}

.entry__link:hover {
  color: var(--link-hover);
  text-decoration-color: var(--accent-green);
}

/* A resource with no URL. Same type as a linked title but in prose ink and
   without an underline, so it never pretends to be clickable. */
.entry__resource-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink-700);
}

/* An ordered sequence of topics. The separator is the same `▸` the system uses
   for disclosure in the file tree, which it treats as a typographic character
   rather than an icon. The breadcrumb's `/` was the other candidate and it read
   well, but "heap / priority queue" carries its own slash, so the separator and
   the content collided. `▸` also keeps the sense of progression. */
.path-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: var(--space-4) 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
}

.path-list__step { display: inline-flex; align-items: baseline; }

.path-list__step:not(:last-child)::after {
  content: '\25B8';
  margin: 0 var(--space-3);
  font-size: 10px;
  color: var(--ink-150);
}

/* File names get the chip treatment — 3px radius, the system's smallest. */
.entry__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.file-chip {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--paper-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-700);
}

/* The one emphasised block in an entry. Green-soft is the system's positive
   tone; the 2px rule marks it as a callout rather than another section. */
.entry__takeaway {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--accent-green);
  border-radius: var(--radius-xs);
  background: var(--accent-green-soft);
}

.entry__takeaway .entry__label { color: var(--accent-green-strong); }

.entry__takeaway p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   6. Pending slot — shows the log is ongoing and marks where day 02 goes
   -------------------------------------------------------------------------- */

.entry--pending {
  padding: var(--space-6) 18px;
  border: 1px dashed var(--border-strong);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-300);
  text-align: center;
}

.entry--pending:hover { border-color: var(--border-strong); }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .doc { padding: var(--space-8) var(--space-6) var(--space-10); }
}

@media (max-width: 600px) {
  .doc { padding: var(--space-7) var(--space-5) var(--space-9); }

  .entry__body,
  .entry--pending { padding-inline: var(--space-4); }

  .entry__head { padding-inline: var(--space-4); }

  .frontmatter__rule,
  .frontmatter__fields { padding-inline: var(--space-4); }

  .frontmatter__rule--close { padding-inline: var(--space-4); }

  /* Day and date stop competing for one row on narrow screens. */
  .entry__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rise {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .progress__fill {
    animation: none;
    transform: scaleX(var(--progress, 0));
  }

  .entry,
  .entry__link,
  .reel-link,
  .reel-link__icon { transition: none; }
}