/* ==========================================================================
   the patient audit — stylesheet
   Design: quiet, light, line-driven. Pale grey-white ground, a single thin
   periwinkle accent, content sections that read as equal in weight. Mobile
   layout is enforced on every viewport (including desktop) — a fixed-width
   column, centered.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Color tokens — pale grey-white ground, soft periwinkle accent */
  --ink: #2b2d33;
  --ink-dim: #4a4d56;
  --ink-faint: #9498a3;
  --paper: #fbfbfa;
  --paper-raised: #f4f4f6;
  --paper-line: #e3e3e8;
  --accent: #6b6fd6;
  --accent-soft: #8d90e0;

  /* Type */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --col-width: 440px;
  --gutter: 20px;
}

* { box-sizing: border-box; }

html {
  background: #e9e9ed;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: #e9e9ed;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}

/* Force a single mobile-width column on every viewport, including desktop. */
.viewport {
  width: 100%;
  max-width: var(--col-width);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  position: relative;
  /* Guards against horizontal overflow from long unbroken runs of Latin
     letters/numbers/punctuation with no spaces (e.g. lab report codes like
     "CK7(-),CK20(+),Ki67(80%+)..."). CJK text already wraps freely between
     any two characters by default, but Western-script "words" only break
     at whitespace unless told otherwise — without this, a single long
     token like that can silently push the whole column wider than the
     viewport. Inherited by all descendants, so this one rule covers every
     text container on the page rather than needing it repeated per class. */
  overflow-wrap: break-word;
  word-break: break-word;
  /* Clear the phone's own status bar (signal / wifi / battery icons) when
     the site is opened full-screen or added to the home screen. Falls back
     to a small fixed gap on devices/browsers that don't report a safe area. */
  padding-top: max(16px, env(safe-area-inset-top, 16px));
}

@media (min-width: 540px) {
  body {
    padding: 32px 16px;
  }
  .viewport {
    min-height: calc(100vh - 64px);
    border: 1px solid var(--paper-line);
    /* On desktop the viewport is a centered card, not a real phone screen —
       no status bar to clear, so drop back to the design's normal spacing. */
    padding-top: 0;
  }
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

::selection { background: var(--accent-soft); color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Header / masthead — homepage only
   -------------------------------------------------------------------------- */

.masthead {
  padding: 26px var(--gutter) 16px;
  border-bottom: 1px solid var(--paper-line);
}

.masthead__brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
}

.masthead__brand:hover .masthead__name {
  color: var(--accent);
}

.masthead__mark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.masthead__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  text-transform: lowercase;
}

.masthead__tagline {
  margin: 5px 0 0;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Back navigation — case & detail pages
   -------------------------------------------------------------------------- */

.case-page__back,
.detail-page__back {
  display: block;
  margin: 22px var(--gutter) 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.case-page__back:hover,
.detail-page__back:hover { color: var(--accent); }

/* Back-link + share button share one row on case/detail pages. */
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px var(--gutter) 0;
}

.page-nav .case-page__back,
.page-nav .detail-page__back {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Share button + popover
   -------------------------------------------------------------------------- */

.share-menu {
  position: relative;
  flex-shrink: 0;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-faint);
  cursor: pointer;
}

.share-btn svg {
  width: 13px;
  height: 13px;
  stroke: var(--ink-faint);
  flex-shrink: 0;
}

.share-btn:hover {
  color: var(--accent);
  border-color: var(--accent-soft);
}

.share-btn:hover svg { stroke: var(--accent); }

.share-menu__popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  min-width: 152px;
  z-index: 20;
  overflow: hidden;
}

.share-menu__popover[hidden] { display: none; }

.share-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-dim);
  background: none;
  border: none;
  border-bottom: 1px solid var(--paper-line);
  cursor: pointer;
}

.share-menu__item:last-child { border-bottom: none; }

.share-menu__item:hover {
  background: var(--paper-raised);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.search {
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--paper-line);
}

.search__field {
  position: relative;
}

.search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  stroke: var(--ink-faint);
  pointer-events: none;
}

.search input[type="text"] {
  width: 100%;
  padding: 10px 34px 10px 34px;
  background: transparent;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
}

.search input[type="text"]::placeholder {
  color: var(--ink-faint);
}

.search input[type="text"]:focus {
  border-color: var(--accent-soft);
}

.search__clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

.search__clear[hidden] {
  display: none;
}

.search__clear svg {
  width: 13px;
  height: 13px;
  stroke: var(--ink-faint);
}

.search__clear:hover {
  background: var(--paper-raised);
}

.search__clear:hover svg {
  stroke: var(--ink);
}

#search-results { margin-top: 10px; }

.search-empty {
  font-size: 13px;
  color: var(--ink-faint);
  padding: 8px 0;
}

.search-result {
  display: block;
  padding: 12px 0;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--paper-line);
}

.search-result:first-child {
  padding-top: 4px;
}

.search-result__title {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.search-result:hover .search-result__title {
  color: var(--accent);
}

.search-result__title mark {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

.search-result__excerpt {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  /* Clamp long excerpts to two lines so results stay scannable and don't
     visually run into one another. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result__excerpt mark {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Case directory (home page)
   -------------------------------------------------------------------------- */

.directory {
  padding: 0 0 24px;
}

.case-row {
  display: block;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--paper-line);
}

.case-row__title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.case-row__arrow {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-faint);
}

.case-row:hover .case-row__title { color: var(--accent); }

.directory__empty {
  padding: 40px var(--gutter);
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Case page (level 2) & Detail page (level 3) — shared content rhythm
   -------------------------------------------------------------------------- */

.case-page__title,
.detail-page__title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  margin: 18px var(--gutter) 0;
  color: var(--ink);
}

/* Reading-time line, shown under the title on both case and detail pages. */
.case-page__meta {
  margin: 6px var(--gutter) 0;
  font-size: 12px;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Related cases
   -------------------------------------------------------------------------- */

.section--related .related-list {
  display: flex;
  flex-direction: column;
}

.related-item {
  display: block;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--paper-line);
}

.related-item:last-child { border-bottom: none; }

.related-item:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Previous / next case pager
   -------------------------------------------------------------------------- */

.case-pager {
  display: flex;
  border-bottom: 1px solid var(--paper-line);
}

.case-pager__link {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-pager__link--prev {
  border-right: 1px solid var(--paper-line);
}

.case-pager__link--next {
  text-align: right;
  align-items: flex-end;
}

.case-pager__label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.case-pager__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  /* Clamp to two lines so a long title on one side doesn't stretch the row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case-pager__link:hover .case-pager__title { color: var(--accent); }

/* --------------------------------------------------------------------------
   View counter (GoatCounter) — quiet, easy to ignore if you don't care
   -------------------------------------------------------------------------- */

.view-count {
  margin: 4px var(--gutter) 0;
  font-size: 11px;
  color: var(--ink-faint);
}

.detail-page__eyebrow {
  margin: 22px var(--gutter) 0;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.detail-page__title { margin-top: 6px; }

.section {
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--paper-line);
}

.section__heading {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
  font-weight: 500;
}

.section__body {
  font-size: 14.5px;
  color: var(--ink-dim);
  white-space: pre-line;
}

.section__body p { margin: 0 0 12px; }
.section__body p:last-child { margin-bottom: 0; }

/* Outcome of treatment reads as plain text, same weight as every other
   section — no pill, no badge. */
.outcome-text {
  font-size: 14.5px;
  color: var(--ink-dim);
}

/* The one interactive link inside a case page: plain text plus a trailing
   arrow, no card, no border, no background — just enough to signal that
   it leads somewhere. */
.detail-link {
  display: block;
  font-size: 14.5px;
  color: var(--ink-dim);
}

.detail-link:hover { color: var(--accent); }

.detail-link__arrow {
  color: var(--ink-faint);
  margin-left: 4px;
}

.detail-link:hover .detail-link__arrow { color: var(--accent); }

/* --------------------------------------------------------------------------
   Detail page body (level 3)
   -------------------------------------------------------------------------- */

.detail-page__body {
  padding: 20px var(--gutter) 32px;
  font-size: 14.5px;
  color: var(--ink-dim);
}

.detail-page__body p {
  margin: 0 0 14px;
  white-space: pre-line;
}

.detail-page__divider {
  margin: 16px 0;
  border: none;
  border-top: 1px solid var(--paper-line);
}

.detail-page__footer-back {
  margin: 8px var(--gutter) 28px;
}

/* Preemptive Disclaimer section — slightly recessed background and smaller
   text to signal "this is a standing legal notice, not case content" while
   still being fully readable. */
.section--disclaimer {
  background: #f0f0f0;
}

.section--disclaimer .section__heading {
  color: var(--ink-faint);
}

.section--disclaimer .section__body {
  font-size: 13px;
  line-height: 1.65;
  white-space: normal;
}

.section--disclaimer .section__body p {
  margin: 0;
}

.disclaimer__bang {
  margin-left: 6px;
  color: #c0392b;
  font-size: 11px;
  letter-spacing: 0;
  font-style: normal;
  animation: bang-pulse 2.8s ease-in-out infinite;
}

@keyframes bang-pulse {
  0%, 100% {
    color: #c0392b;
    text-shadow: 0 0 4px rgba(192, 57, 43, 0.3);
  }
  50% {
    color: #e74c3c;
    text-shadow: 0 0 7px rgba(231, 76, 60, 0.55), 0 0 2px rgba(255,120,100,0.3);
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 22px var(--gutter) 28px;
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  border-top: 1px solid var(--paper-line);
}

.site-footer__home {
  display: block;
}

.site-footer__home:hover {
  color: var(--accent);
}

.site-footer__email {
  display: block;
  margin-top: 6px;
  color: var(--ink-faint);
}

.site-footer__email:hover {
  color: var(--accent);
}