@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scrollbar-gutter: stable;
  }

  a {
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.17em;
  }
}

@layer components {
  .notes-feed-sentinel {
    height: 1px;
  }

  .notes-feed-fallback[hidden] {
    display: none;
  }

  .post-code-block pre {
    color: var(--personal-ink);
    font-size: 0.8125rem;
    line-height: 1.6;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--personal-rule) transparent;
    tab-size: 2;
  }

  .post-code-block pre code,
  .post-code-block .hljs {
    background: transparent;
    color: inherit;
    overflow-x: visible;
  }

  .post-code-block .hljs .hljs-comment,
  .post-code-block .hljs .hljs-quote {
    color: var(--syntax-comment);
  }

  .post-code-block .hljs .hljs-keyword,
  .post-code-block .hljs .hljs-selector-tag,
  .post-code-block .hljs .hljs-literal,
  .post-code-block .hljs .hljs-section,
  .post-code-block .hljs .hljs-meta,
  .post-code-block .hljs .hljs-bullet {
    color: var(--syntax-keyword);
  }

  .post-code-block .hljs .hljs-string,
  .post-code-block .hljs .hljs-attr,
  .post-code-block .hljs .hljs-attribute,
  .post-code-block .hljs .hljs-symbol,
  .post-code-block .hljs .hljs-link {
    color: var(--syntax-string);
  }

  .post-code-block .hljs .hljs-title,
  .post-code-block .hljs .hljs-name,
  .post-code-block .hljs .hljs-type,
  .post-code-block .hljs .hljs-built_in,
  .post-code-block .hljs .hljs-builtin-name {
    color: var(--syntax-title);
  }

  .post-code-block .hljs .hljs-number,
  .post-code-block .hljs .hljs-variable,
  .post-code-block .hljs .hljs-template-variable,
  .post-code-block .hljs .hljs-params {
    color: var(--personal-slate);
  }

  .post-code-expand-btn:hover {
    color: var(--personal-ink);
  }

  .code-block-wrapper.is-collapsed {
    max-height: 28rem;
    overflow: hidden;
  }

  .code-expand-btn {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }

  /* Signal Flare: calm structure with a bright, high-energy palette. */
  .personal-home,
  .post-page,
  .personal-inner {
    --personal-canvas: #fffefc;
    --personal-ink: #000000;
    --personal-biography: #353531;
    --personal-muted: #4f4e49;
    --personal-slate: #016fb9;
    --personal-coral: #b73a13;
    --personal-underline: #ec4e20;
    --personal-sun: #ff9505;
    --personal-raised: #f1f8fc;
    --personal-rule: #b9d6ea;
    --personal-note-rule: #ec4e20;
    --syntax-keyword: #b73a13;
    --syntax-string: #016fb9;
    --syntax-title: #353531;
    --syntax-comment: #6c6a63;

    background-color: var(--personal-canvas);
    border-top: 0.375rem solid var(--personal-sun);
    color: var(--personal-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .personal-home::selection,
  .post-page::selection,
  .personal-inner::selection {
    background: var(--personal-sun);
    color: var(--personal-ink);
  }

  .personal-home .homepage-main {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
  }

  .homepage-intro {
    margin-bottom: 1.75rem;
  }

  .homepage-intro h1 {
    color: var(--personal-ink);
    font-size: clamp(1.9rem, 7vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .homepage-intro > p {
    max-width: 40rem;
    margin-top: 0.65rem;
    color: var(--personal-biography);
    font-family: "Source Serif 4", "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .homepage-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    margin-top: 0.75rem;
    color: var(--personal-slate);
  }

  .homepage-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--personal-slate);
    text-decoration: none;
  }

  .homepage-social-link svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .post-home-link,
  .post-inline-link,
  .post-reply-link,
  .inner-home-link,
  .photos-page a {
    color: var(--personal-slate);
    text-decoration-color: var(--personal-underline);
    text-decoration-line: underline;
  }

  .homepage-social-link:hover,
  .post-home-link:hover,
  .post-inline-link:hover,
  .post-reply-link:hover,
  .inner-home-link:hover,
  .photos-page a:hover {
    color: var(--personal-coral);
    text-decoration-color: var(--personal-slate);
  }

  .personal-home a:focus-visible,
  .post-page a:focus-visible,
  .personal-inner a:focus-visible,
  .post-code-expand-btn:focus-visible {
    border-radius: 1px;
    outline: 2px solid var(--personal-slate);
    outline-offset: 3px;
  }

  .homepage-divider {
    margin-bottom: 0.5rem;
    border-color: var(--personal-rule);
  }

  .homepage-notes-switch {
    justify-content: flex-start;
    margin-bottom: 1.25rem;
  }

  .notes-view-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
  }

  .notes-view-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.25rem;
    color: var(--personal-muted);
    text-decoration: none;
  }

  .notes-view-link:hover {
    color: var(--personal-slate);
  }

  .notes-view-link[aria-current="page"] {
    color: var(--personal-ink);
    font-weight: 600;
    text-decoration-color: var(--personal-rule);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.25em;
  }

  .homepage-title-list {
    border-top: 1px solid var(--personal-rule);
  }

  .homepage-title-item {
    border-bottom: 1px solid var(--personal-rule);
  }

  .homepage-title-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding-block: 0.75rem;
    text-decoration: none;
  }

  .homepage-title-text {
    color: var(--personal-slate);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    text-wrap: pretty;
  }

  .homepage-title-metadata {
    color: var(--personal-muted);
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
    white-space: nowrap;
  }

  .homepage-title-link:hover .homepage-title-text {
    color: var(--personal-coral);
  }

  .homepage-title-link:hover .homepage-title-metadata {
    color: var(--personal-slate);
  }

  .homepage-note {
    padding-bottom: 3rem;
  }

  .homepage-note + .homepage-note {
    padding-top: 2rem;
    border-top: 1px solid var(--personal-note-rule);
  }

  .homepage-note-header {
    margin-bottom: 1.35rem;
  }

  .homepage-note-title {
    max-width: none;
    font-size: clamp(1.55rem, 5.5vw, 2rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .homepage-note-link {
    color: var(--personal-slate);
    text-decoration: none;
  }

  .homepage-note-link:hover {
    color: var(--personal-coral);
  }

  .homepage-note-metadata {
    gap: 0.45rem;
    margin-top: 0.55rem;
    color: var(--personal-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
  }

  .homepage-note-permalink {
    color: inherit;
    text-decoration-line: underline;
  }

  .homepage-note-permalink:hover {
    color: var(--personal-slate);
  }

  .homepage-note-body,
  .post-prose {
    max-width: 70ch;
    font-size: 1.0625rem;
    line-height: 1.68;
  }

  .homepage-note-body > :last-child,
  .post-prose > :last-child {
    margin-bottom: 0;
  }

  .notes-feed-controls {
    text-align: left;
  }

  .notes-feed-fallback,
  .notes-feed-status {
    display: inline-block;
    padding-block: 1.25rem 0;
    color: var(--personal-muted);
    font-size: 0.75rem;
  }

  .notes-feed-fallback {
    color: var(--personal-slate);
  }

  .post-site-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--personal-rule);
  }

  .post-site-header nav {
    display: flex;
    gap: 1rem;
    color: var(--personal-slate);
    font-family: "Source Serif 4", "Iowan Old Style", Baskerville, Georgia, serif;
    font-size: 0.9375rem;
  }

  .post-site-name {
    color: var(--personal-ink);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .post-site-name:hover {
    color: var(--personal-coral);
  }

  .post-page .post-main {
    padding-top: 2.75rem;
    padding-bottom: 5rem;
  }

  .post-article-header {
    margin-bottom: 2rem;
  }

  .post-title {
    max-width: 28ch;
    color: var(--personal-slate);
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .post-metadata {
    margin-top: 0.75rem;
    color: var(--personal-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
  }

  .post-prose-heading {
    color: var(--personal-ink);
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .post-prose-list li::marker {
    color: var(--personal-underline);
  }

  .post-blockquote {
    border-color: var(--personal-underline);
    color: var(--personal-muted);
  }

  .post-inline-code {
    background-color: var(--personal-raised);
    color: var(--personal-ink);
  }

  .post-prose-rule,
  .post-footer-rule,
  .post-code-block pre {
    border-color: var(--personal-rule);
  }

  .post-footer-rule {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
  }

  .post-reply-footer {
    padding-bottom: 0;
    text-align: left;
  }

  .post-code-block pre {
    background-color: var(--personal-raised);
  }

  .post-code-expand-btn {
    background-color: var(--personal-raised);
    border-color: var(--personal-rule);
    color: var(--personal-slate);
    min-width: 7rem;
    min-height: 2.75rem;
    padding-inline: 1rem;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
  }

  @media (max-width: 639px) {
    .homepage-note-body,
    .post-prose {
      line-height: 1.62;
    }

    .code-block-wrapper.is-collapsed {
      max-height: 22rem;
    }

    .post-code-block pre {
      overflow-x: visible;
      padding: 0.875rem;
    }

    .post-code-block pre code,
    .post-code-block .hljs {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .personal-home .homepage-main,
    .post-page .post-main {
      padding-top: 2rem;
      padding-bottom: 3.5rem;
    }

    .homepage-intro {
      margin-bottom: 1.5rem;
    }

    .homepage-divider {
      margin-bottom: 0.375rem;
    }

    .homepage-notes-switch {
      margin-bottom: 1rem;
    }

    .homepage-title-link {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.125rem;
      padding-block: 0.75rem;
    }

    .homepage-note {
      padding-bottom: 2.5rem;
    }

    .homepage-note + .homepage-note {
      padding-top: 1.5rem;
    }

    .post-site-header {
      padding-top: 1.75rem;
      padding-bottom: 1rem;
    }

    .post-page .post-main {
      padding-top: 2.25rem;
    }
  }

  .cv-page {
    color: var(--personal-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .cv-page a {
    color: var(--personal-slate);
    text-decoration: underline;
    text-decoration-color: var(--personal-underline);
    text-underline-offset: 0.15em;
  }

  .cv-header {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--personal-note-rule);
  }

  .cv-header h1 {
    color: var(--personal-slate);
    font-size: 1.85rem;
    line-height: 1;
    font-weight: 750;
    letter-spacing: 0;
  }

  .cv-role {
    margin-top: 0.3rem;
    color: var(--personal-biography);
    font-size: 1rem;
  }

  .cv-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--personal-muted);
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: right;
  }

  .cv-contact li {
    white-space: nowrap;
  }

  .cv-contact a {
    font-weight: 500;
  }

  .cv-section {
    padding-top: 0.85rem;
  }

  .cv-section h2 {
    margin-bottom: 0.5rem;
    color: var(--personal-coral);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
  }

  .cv-subsection-heading {
    margin-top: 0.85rem;
  }

  .cv-summary p,
  .cv-skills p,
  .cv-item p,
  .cv-item li,
  .cv-compact-list li {
    line-height: 1.42;
  }

  .cv-training {
    margin-top: 0.35rem;
  }

  .cv-item + .cv-item {
    margin-top: 0.78rem;
  }

  .cv-item-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.28rem;
  }

  .cv-item-heading h3 {
    color: var(--personal-ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.12;
  }

  .cv-item-heading p,
  .cv-date {
    color: var(--personal-muted);
    font-size: 0.78rem;
  }

  .cv-date {
    white-space: nowrap;
  }

  .cv-item ul,
  .cv-compact-list {
    list-style: none;
    padding-left: 0;
  }

  .cv-item li,
  .cv-compact-list li {
    position: relative;
    padding-left: 1rem;
  }

  .cv-item li + li,
  .cv-compact-list li + li {
    margin-top: 0.08rem;
  }

  .cv-item li::before,
  .cv-compact-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--personal-slate);
  }

  .cv-grid-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .cv-footer {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--personal-rule);
  }

  .inner-home-nav {
    padding-top: 1.25rem;
  }

  .inner-home-link {
    font-weight: 600;
  }

  .photos-title {
    color: var(--personal-slate);
  }

  .photo-caption,
  .photos-empty {
    color: var(--personal-muted);
  }

  @media (max-width: 640px) {
    .cv-header,
    .cv-item-heading {
      display: grid;
    }

    .cv-contact {
      text-align: left;
    }

    .cv-contact li {
      white-space: normal;
    }

    .cv-grid-section {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  }

  @media print {
    @page {
      size: A4;
      margin: 10mm;
    }

    body {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      color: #000000;
      font-size: 10pt;
    }

    .personal-inner {
      --personal-canvas: #fffefc;
      --personal-ink: #000000;
      --personal-biography: #353531;
      --personal-muted: #4f4e49;
      --personal-slate: #016fb9;
      --personal-coral: #b73a13;
      --personal-underline: #ec4e20;
      --personal-sun: #ff9505;
      --personal-raised: #f1f8fc;
      --personal-rule: #b9d6ea;
      --personal-note-rule: #ec4e20;
      border-top: 0;
    }

    body > div,
    body > header,
    .no-print {
      display: none !important;
    }

    main {
      max-width: none !important;
      padding: 0 !important;
    }

    .cv-page a {
      color: var(--personal-slate);
      text-decoration: underline;
      text-decoration-color: var(--personal-underline);
      text-underline-offset: 0.15em;
    }

    .cv-header {
      padding-bottom: 0.55rem;
    }

    .cv-section {
      padding-top: 0.58rem;
    }

    .cv-item,
    .cv-section h2 {
      break-inside: avoid;
    }

    .cv-subsection-heading {
      break-before: page;
      margin-top: 0;
    }
  }
}