/* Sastu Insights — console post header.
   Fully scoped: every rule is under .sh-header or .sh-card. Touches no theme styles. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

.sh-header,
.sh-card {
  --sh-amber: #F0A03C;
  --sh-bg: #0C0D0F;
  --sh-chrome-bg: #15171A;
  --sh-line: #23262A;
  --sh-fg: #F4F2EE;
  --sh-dim: #9A9DA2;
  --sh-faint: #5C5F64;
  --sh-accent: oklch(0.76 0.13 var(--sh-hue, 70));
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--sh-bg);
  color: var(--sh-fg);
  box-sizing: border-box;
}

.sh-header *,
.sh-card * { box-sizing: border-box; }

/* ---------- hero ---------- */

/* The root is a <header>, and the theme styles that element directly
   (padding: 2rem 0 4rem; align-items: flex-start; justify-content:
   space-between; gap: 1rem). Those leak in and shrink-wrap the chrome bar,
   so every one of them is reset here rather than in the theme. */
.sh-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-height: 420px;
  padding: 0;
  margin: 0 0 2.5rem;
  overflow: hidden;
  isolation: isolate;
}

/* These featured images are finished header designs - they carry their own
   title, part chip and subtitle. A light blur turns that typography back into
   texture so it stops competing with the panel's own type. scale() hides the
   soft rim the blur leaves at the edges. Saturation is only partly pulled:
   the images' orange is close enough to the brand amber to be worth keeping. */
.sh-header .sh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(4px) saturate(0.55) brightness(0.85) contrast(1.05);
  transform: scale(1.09);
}

/* The gradient runs dark-to-light left-to-right and these images set their own
   type on the left, so the heaviest part of the scrim lands exactly where the
   duplicate title is. Near-solid under the panel's type, opening up on the
   right where the artwork can still read. */
.sh-header .sh-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(12,13,15,0.99) 0%, rgba(12,13,15,0.96) 42%, rgba(12,13,15,0.78) 100%),
    radial-gradient(120% 90% at 12% 100%, rgba(12,13,15,0.55) 0%, transparent 70%);
}

.sh-header > .sh-chrome,
.sh-header > .sh-body { position: relative; z-index: 2; }

.sh-header .sh-chrome > *,
.sh-card .sh-chrome > * { min-width: 0; }

.sh-header .sh-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  height: 46px;
  padding: 0 1.75rem;
  background: color-mix(in srgb, var(--sh-chrome-bg) 95%, transparent);
  border-bottom: 1px solid var(--sh-line);
  backdrop-filter: blur(3px);
}

.sh-header .sh-cat,
.sh-card .sh-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-accent);
}

.sh-header .sh-dot,
.sh-card .sh-dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--sh-accent);
}

.sh-header .sh-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.375rem;
  padding: 2.375rem 2.75rem;
}

/* Slugs here are the full post title, so the real path runs 60-110 characters.
   Clip it to a single line rather than let it wrap into a grey paragraph. */
.sh-header .sh-prompt,
.sh-card .sh-prompt {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--sh-dim);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-header .sh-ps,
.sh-card .sh-ps {
  color: var(--sh-amber);
  margin-right: 0.625rem;
}

.sh-header .sh-title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(1.75rem, 4.2vw, 2.875rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sh-fg);
  max-width: 22ch;
  text-wrap: balance;
}

.sh-header .sh-cont {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--sh-dim);
  max-width: 60ch;
}

.sh-header .sh-hash,
.sh-card .sh-hash {
  color: #4E5157;
  margin-right: 0.625rem;
}

.sh-header .sh-read,
.sh-card .sh-read { white-space: nowrap; }

/* the right side of the panel stays open, so lift the dim type that crosses it */
.sh-header.sh-has-image .sh-prompt,
.sh-header.sh-has-image .sh-cont { color: #B6B9BE; }

.sh-header.sh-has-image .sh-hash { color: #6E7278; }

/* ---------- caret ---------- */

.sh-header .sh-caret,
.sh-card .sh-caret,
.sh-masthead .sh-caret {
  color: var(--sh-amber);
  margin-left: 0.15em;
  animation: sh-blink 1.24s steps(1, end) infinite;
}

@keyframes sh-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sh-header .sh-caret,
  .sh-card .sh-caret,
  .sh-masthead .sh-caret { animation: none; }
}

/* ---------- list card ---------- */

.sh-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 200px;
  text-decoration: none;
  border: 1px solid var(--sh-line);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.sh-card:hover,
.sh-card:focus-visible {
  border-color: color-mix(in srgb, var(--sh-accent) 55%, var(--sh-line));
  transform: translateY(-2px);
}

.sh-card .sh-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: none;
  height: 34px;
  padding: 0 1.125rem;
  background: var(--sh-chrome-bg);
  border-bottom: 1px solid var(--sh-line);
}

.sh-header .sh-meta,
.sh-card .sh-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  overflow: hidden;
  color: #6B6D71;
}

.sh-header .sh-meta { font-size: 0.875rem; }
.sh-card .sh-meta,
.sh-card .sh-cat { font-size: 0.75rem; }

.sh-header .sh-date,
.sh-card .sh-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sh-card .sh-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.25rem 1.375rem;
}

.sh-card .sh-prompt { font-size: 0.8125rem; color: #6B6D71; }

.sh-card .sh-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--sh-fg);
  max-width: 34ch;
}

/* ---------- narrow screens ---------- */

@media (max-width: 640px) {
  .sh-header { min-height: 320px; }
  .sh-header .sh-chrome { justify-content: flex-end; padding: 0 1.125rem; }
  .sh-header .sh-body { padding: 1.5rem 1.25rem; gap: 1rem; }
  .sh-header .sh-prompt,
  .sh-header .sh-cont { font-size: 0.9375rem; }
  .sh-header .sh-title { max-width: none; }
  .sh-header .sh-read { display: none; }
  .sh-header .sh-meta { font-size: 0.75rem; }
  .sh-header .sh-cat,
  .sh-card .sh-cat { font-size: 0.6875rem; letter-spacing: 0.1em; gap: 0.5rem; }
  .sh-card .sh-read { display: none; }
}

/* ---------- card grid ---------- */
/* Own wrapper class, prefixed like the rest. Sets only the track sizing so the
   theme's own list styles stay untouched. */

.sh-card-grid {
  /* minmax(0, 1fr), not 1fr: the prompt line is nowrap, so its min-content
     width is the whole path. A plain 1fr track plus a grid item's default
     min-width: auto lets that push the card past the column and give the page
     a horizontal scrollbar. The min-width: 0 chain below carries it down. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

/* ---------- masthead + bio ---------- */
/* Unlike the panels, these sit on the page background and have to follow the
   theme into light mode, so they take their text colour from the theme's own
   variables. Only the amber is ours, and it darkens in light mode - #F0A03C
   on a #f5f5f5 ground is about 2.4:1, nowhere near legible. */

.sh-masthead,
.sh-bio {
  --sh-amber-ink: #F0A03C;
  --sh-hash-ink: #4E5157;
  --sh-rule: var(--gray-3);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  .sh-masthead,
  .sh-bio {
    --sh-amber-ink: #A8651A;
    --sh-hash-ink: #9DA0A5;
  }
}

[data-theme="light"] .sh-masthead,
[data-theme="light"] .sh-bio {
  --sh-amber-ink: #A8651A;
  --sh-hash-ink: #9DA0A5;
}

[data-theme="dark"] .sh-masthead,
[data-theme="dark"] .sh-bio {
  --sh-amber-ink: #F0A03C;
  --sh-hash-ink: #4E5157;
}

.sh-masthead .sh-masthead-id {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.sh-masthead .sh-mast-prompt {
  font-size: 0.9375rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--white-2);
}

.sh-masthead .sh-mast-ps {
  color: var(--sh-amber-ink);
  margin-right: 0.5rem;
}

.sh-masthead .sh-caret { color: var(--sh-amber-ink); }

.sh-masthead .sh-sitetitle { display: inline-block; }

/* the bio reads as a comment block: one # per paragraph, one rule down the side */
.sh-bio {
  display: block;
  margin-bottom: 3.5rem;
}

.sh-bio .sh-bio-text {
  border-left: 2px solid var(--sh-rule);
  padding-left: 1.125rem;
  max-width: 62ch;
  line-height: 1.7;
  font-weight: 400;
}

.sh-bio .sh-bio-text p::before {
  content: "# ";
  color: var(--sh-hash-ink);
}

.sh-bio .sh-bio-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-left: 1.125rem;
}

.sh-bio .sh-bio-dp {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
}

.sh-bio #social-wrapper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0;
}

.sh-bio #social-wrapper img { margin: 0; }

@media (max-width: 640px) {
  .sh-bio .sh-bio-text { max-width: none; }
}

/* The theme stacks the masthead into a column under 750px and pushes the theme
   toggle to its own row with a 3rem gap. That was tolerable under a one-line
   title; under a prompt plus a wrapped title it strands the toggle. Keep the
   row, and let the toggle sit against the top of the block. */
@media screen and (max-width: 750px) {
  .sh-masthead {
    flex-direction: row;
    gap: 1rem;
  }
  .sh-masthead #dark-mode-toggle {
    align-self: flex-start;
  }
}

/* ---------- featured image ---------- */
/* The panel is the header now, so the featured image comes back below it as a
   figure. These are explanatory diagrams and blurred texture behind the panel
   is not where anyone reads them. The border follows the theme: a white
   illustration needs an edge on a light page and none on a dark one. */

.sh-figure {
  margin: 0 0 2.5rem;
  border: 1px solid var(--gray-3);
}

.sh-figure img {
  display: block;
  width: 100%;
}