/* Clinical Notes.
   Layers on top of style.css - colours, fonts and the header/footer come from
   there, so everything here is specific to the notes pages. */

/* The gutter matches the header's horizontal padding in style.css, so the
   breadcrumb and the article start on the same line as the logo instead of
   sitting nearer the window edge than the header does. */
.notes-page {
    width: min(1100px, calc(100% - 112px));
    margin: 24px auto 48px;
    text-align: left;
}

/* Article pages read better narrow; the sidebar sits outside this measure. */
.note-article-page {
    width: min(1180px, calc(100% - 112px));
}

/* ---------- breadcrumb ---------- */

.note-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 0.92rem;
}

.note-breadcrumb a {
    color: var(--brand-link);
    font-weight: 700;
    text-decoration: none;
}

.note-breadcrumb a:hover {
    text-decoration: underline;
}

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

.notes-hero {
    margin-bottom: 30px;
}

.notes-hero h1 {
    margin-bottom: 12px;
    color: #17282b;
    /* style.css sets a 100px h1 for the home page; override it here. */
    font-size: clamp(2rem, 5vw, 2.9rem);
    line-height: 1.15;
}

.notes-hero p {
    max-width: 720px;
    color: var(--text);
    line-height: 1.6;
}

.notes-hero-meta {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.95rem;
}

/* ---------- search ---------- */

.notes-search {
    max-width: 620px;
    margin-top: 20px;
}

.notes-search label,
.notes-filter label {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.notes-search-row {
    display: flex;
    gap: 8px;
}

.notes-search input,
.notes-filter input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 1rem;
}

.notes-search input:focus,
.notes-filter input:focus {
    border-color: var(--brand);
    outline-offset: 0;
}

.notes-search button {
    min-height: 44px;
    padding: 0 20px;
    background: var(--brand-cta);
    border: 0;
    border-radius: var(--radius);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.notes-search button:hover {
    background: var(--brand-cta-hover);
}

.notes-results-count {
    margin-bottom: 16px;
    color: var(--muted);
}

.search-results .article-meta {
    color: var(--brand-link);
    font-weight: 700;
}

.search-results .is-planned .article-meta {
    color: var(--muted);
    font-weight: 400;
}

/* Matched terms. Colour alone would not be enough, but this sits inside a
   result the reader has already been told matched, so it is decoration
   rather than the only signal. */
.note-article mark,
.search-results mark,
.article-list mark {
    padding: 0 2px;
    background: #fff3bf;
    border-radius: 3px;
    color: inherit;
}

/* Live results, appended to the form by notes.js. Positioned so it overlays
   the page rather than pushing the content down on every keystroke. */
.notes-search {
    position: relative;
}

.notes-live {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: min(60vh, 460px);
    margin-top: 6px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(38, 57, 61, 0.18);
}

.notes-live-status {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.88rem;
}

.notes-live-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notes-live-item a,
.notes-live-item > span {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid #eef6f8;
    color: var(--text);
    text-decoration: none;
}

.notes-live-item a:hover,
.notes-live-item a:focus {
    background: var(--panel);
}

.notes-live-item.is-planned > span {
    color: var(--muted);
}

.notes-live-title {
    display: block;
    color: var(--brand-dark);
    font-weight: 700;
}

.notes-live-item.is-planned .notes-live-title {
    color: var(--muted);
    font-weight: 400;
}

.notes-live-meta {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.85rem;
}

.notes-section-heading {
    margin-bottom: 16px;
    color: var(--brand-dark);
    font-size: 1.3rem;
}

/* ---------- topic grid ---------- */

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
}

.topic-card a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 20px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.topic-card a:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: 0 10px 26px rgba(0, 176, 203, 0.18);
}

.topic-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.topic-name {
    color: var(--brand-dark);
    font-size: 1.15rem;
    font-weight: 700;
}

.topic-blurb {
    flex: 1;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.topic-count {
    margin-top: 4px;
    color: var(--brand-link);
    font-size: 0.85rem;
    font-weight: 700;
}

.topic-card.is-empty .topic-count {
    color: var(--muted);
    font-weight: 400;
}

/* ---------- article list ---------- */

.article-list {
    display: grid;
    gap: 12px;
    list-style: none;
}

.article-item a,
.article-item.is-planned {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.article-item a:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-soft);
}

/* Planned articles are listed so the scope of the section is visible, but
   they are not links - there is nothing to open yet. The dashed border and
   the "Coming soon" label carry that without relying on colour alone. */
.article-item.is-planned {
    background: #f6fafb;
    border-style: dashed;
    color: var(--muted);
}

.article-title {
    color: var(--brand-dark);
    font-size: 1.08rem;
    font-weight: 700;
}

.article-item.is-planned .article-title {
    color: var(--muted);
    font-weight: 400;
}

.article-summary {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.article-meta {
    color: var(--muted);
    font-size: 0.85rem;
}

.notes-empty {
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--panel);
    border-radius: var(--radius);
    color: var(--text);
    line-height: 1.55;
}

/* ---------- article layout ---------- */

.note-article-header {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.note-article-header h1 {
    margin-bottom: 12px;
    color: #17282b;
    font-size: clamp(1.9rem, 4.4vw, 2.6rem);
    line-height: 1.18;
}

.note-byline {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.note-byline strong {
    color: var(--text);
}

.note-updated {
    display: block;
}

/* Body first in the source so it comes first on a phone, where the sidebar
   drops below. On desktop the sidebar is pulled back to the right column. */
.note-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px;
    align-items: start;
    margin-top: 26px;
}

.note-body {
    min-width: 0;
    max-width: 72ch;
}

.note-section {
    margin-top: 30px;
}

.note-body h2 {
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--panel);
    color: var(--brand-dark);
    font-size: 1.45rem;
}

.note-body h3 {
    margin: 22px 0 8px;
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 700;
}

.note-body p {
    margin-bottom: 14px;
    line-height: 1.72;
}

.note-list {
    margin: 0 0 16px 22px;
}

.note-list li {
    margin-bottom: 7px;
    line-height: 1.65;
}

.note-body a {
    color: var(--brand-link);
    font-weight: 700;
}

/* Citation markers. Small, but the link itself still needs to be reachable,
   so the padding keeps the hit area usable without changing line height. */
.note-cite {
    font-size: 0.72em;
    line-height: 0;
}

.note-cite a {
    padding: 0 1px;
    color: var(--brand-link);
    text-decoration: none;
}

.note-cite a:hover {
    text-decoration: underline;
}

/* Anchor targets sit under the fixed header without this. */
.note-body [id],
.note-references li[id] {
    scroll-margin-top: calc(var(--header-height) + 16px);
}

/* ---------- key points ---------- */

.note-key-points {
    padding: 20px 22px;
    background: var(--panel);
    border-radius: var(--radius);
}

.note-key-points h2 {
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 1.25rem;
}

.note-key-points ul {
    margin-left: 20px;
}

.note-key-points li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* ---------- figures, tables, callouts ---------- */

.note-figure {
    margin: 22px 0;
}

.note-figure img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.note-figure figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.note-figure-credit {
    display: block;
    font-size: 0.82rem;
}

.note-table-wrap {
    /* Wide tables scroll inside this box rather than pushing the page. */
    margin: 20px 0;
    overflow-x: auto;
}

.note-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.note-table caption {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.88rem;
    text-align: left;
}

.note-table th,
.note-table td {
    padding: 10px 12px;
    border: 1px solid var(--border);
    line-height: 1.55;
    text-align: left;
    vertical-align: top;
}

.note-table thead th {
    background: var(--panel);
    color: var(--brand-dark);
}

.note-table tbody th {
    background: #f6fafb;
    font-weight: 700;
}

.note-callout {
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left: 5px solid var(--brand);
    border-radius: var(--radius);
    background: #f6fcfd;
}

.note-callout-title {
    margin-bottom: 8px;
    font-size: 1.05rem;
    font-weight: 700;
}

.note-callout .note-list {
    margin-bottom: 0;
}

.note-callout-red-flag {
    background: #fdf3f3;
    border-color: #f0c4c4;
    border-left-color: #b3261e;
}

.note-callout-red-flag .note-callout-title {
    color: #8a1f1f;
}

.note-callout-exam-tip {
    background: #f3fbf6;
    border-color: #b6e2c8;
    border-left-color: #17633a;
}

.note-callout-exam-tip .note-callout-title {
    color: #17633a;
}

/* ---------- references and reviewer ---------- */

.note-references ol {
    margin-left: 22px;
}

.note-references li {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
    /* Long reference URLs would otherwise widen the page on a phone. */
    overflow-wrap: anywhere;
}

.note-references li:target {
    background: #fff8e5;
    border-radius: 6px;
}

.note-reviewer p {
    line-height: 1.6;
}

/* ---------- contents sidebar ---------- */

.note-contents {
    position: sticky;
    top: calc(var(--header-height) + 20px);
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.note-contents-title {
    margin-bottom: 10px;
    color: var(--brand-dark);
    font-size: 0.95rem;
    font-weight: 700;
}

.note-contents ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: contents;
}

.note-contents li {
    counter-increment: contents;
}

.note-contents a {
    display: block;
    padding: 6px 0;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.4;
    text-decoration: none;
}

.note-contents a::before {
    content: counter(contents) ". ";
    color: var(--muted);
}

.note-contents a:hover {
    color: var(--brand-link);
    text-decoration: underline;
}

/* ---------- pager and footer bits ---------- */

.note-pager {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 36px;
}

.note-pager-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--brand-dark);
    font-weight: 700;
    text-decoration: none;
}

.note-pager-link:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-soft);
}

.note-pager-next {
    text-align: right;
}

.note-pager-label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 400;
}

.notes-back {
    margin-top: 26px;
}

.notes-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--brand-link);
    font-weight: 700;
    text-decoration: none;
}

.notes-back a:hover {
    text-decoration: underline;
}

.notes-disclaimer {
    margin-top: 34px;
    padding: 14px 16px;
    background: #f6fafb;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ---------- responsive ---------- */

/* Mirrors the header, which drops to 10px 20px at this width (style.css). */
@media (max-width: 1100px) {
    .notes-page,
    .note-article-page {
        width: calc(100% - 40px);
    }
}

@media (max-width: 980px) {
    .note-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Sticky is only useful beside the text. Once it sits above the body it
       would pin an index over the article the reader is trying to read. */
    .note-contents {
        position: static;
        order: -1;
    }
}

@media (max-width: 600px) {
    .notes-page {
        margin-top: 16px;
    }

    .note-key-points {
        padding: 16px;
    }

    .note-pager-next {
        text-align: left;
    }
}