/* Reading-handout styles for CSCI 601.471/671.
   Layered on top of the course's bootstrap + style.css. Palette matches the
   main site: #002d72 (JHU navy), #68ACE5 (accent). */

:root {
    --navy: #002d72;
    --accent: #68ACE5;
    --ink: #23282d;
    --muted: #6b7480;
    --rule: #e2e6ec;
    --def-bg: #eaf2ff;
    --warn-bg: #fff6e0;
    --try-bg: #f2fbef;
    --aside-bg: #f6f7f9;
}

body.handout {
    font-family: 'roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.65;
    font-size: 16.5px;
    background: #fff;
    padding-top: 0;
}

/* ---------- masthead ---------- */
.hd-mast {
    background: var(--navy);
    color: #fff;
    padding: 26px 0 22px;
    border-bottom: 5px solid var(--accent);
}
.hd-mast a { color: #cfe4f7; }
.hd-mast .hd-course {
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.hd-mast h1 {
    font-size: 31px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #fff;
    line-height: 1.25;
}
.hd-mast .hd-sub { color: #c8d8ea; font-size: 15px; margin: 0; }

/* ---------- layout ---------- */
.hd-wrap {
    display: flex;
    gap: 42px;
    align-items: flex-start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}
.hd-body { flex: 1 1 auto; min-width: 0; max-width: 780px; padding: 8px 0 90px; }

/* ---------- sidebar TOC ---------- */
.hd-toc {
    flex: 0 0 232px;
    position: sticky;
    top: 22px;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    font-size: 13.5px;
    padding: 26px 0 40px;
    border-left: 1px solid var(--rule);
    padding-left: 18px;
    order: 2;
}
.hd-toc-title {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    font-weight: 700;
}
.hd-toc ol { list-style: none; padding: 0; margin: 0; }
.hd-toc li { margin: 0 0 3px; }
.hd-toc a {
    display: block;
    padding: 3px 8px 3px 10px;
    color: #4a5560;
    border-left: 2px solid transparent;
    text-decoration: none;
    border-radius: 0 3px 3px 0;
}
.hd-toc a:hover { color: var(--navy); background: #f4f7fb; }
.hd-toc a.active {
    color: var(--navy);
    font-weight: 600;
    border-left-color: var(--accent);
    background: #f4f7fb;
}
.hd-toc ol ol a { padding-left: 22px; font-size: 12.8px; }

/* ---------- at-a-glance ---------- */
.hd-glance {
    background: var(--aside-bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 18px 22px 4px;
    margin: 26px 0 34px;
}
.hd-glance dl { margin: 0; }
.hd-glance dt {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin-top: 2px;
}
.hd-glance dd { margin: 0 0 14px; }

/* ---------- headings ---------- */
.hd-body h2 {
    font-size: 25px;
    color: var(--navy);
    font-weight: 700;
    margin: 52px 0 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rule);
    scroll-margin-top: 20px;
}
.hd-body h3 {
    font-size: 19.5px;
    color: var(--navy);
    font-weight: 600;
    margin: 34px 0 10px;
    scroll-margin-top: 20px;
}
.hd-body h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 8px;
    color: #333a42;
}
.hd-secnum { color: var(--accent); font-weight: 700; margin-right: 10px; }

/* ---------- callouts ---------- */
.callout {
    border-radius: 6px;
    padding: 15px 20px;
    margin: 22px 0;
    border-left: 4px solid var(--accent);
    background: var(--def-bg);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-label {
    display: block;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
}
.callout.warn { background: var(--warn-bg); border-left-color: #e0a83c; }
.callout.warn .callout-label { color: #92620a; }
.callout.try { background: var(--try-bg); border-left-color: #5aae61; }
.callout.try .callout-label { color: #2f6b36; }
.callout.aside { background: var(--aside-bg); border-left-color: #b8c0ca; }
.callout.aside .callout-label { color: var(--muted); }

/* ---------- exercises ---------- */
.ex {
    border: 1px solid var(--rule);
    border-radius: 6px;
    margin: 20px 0;
    overflow: hidden;
}
.ex-head {
    background: #f8f9fb;
    border-bottom: 1px solid var(--rule);
    padding: 9px 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ex-src { font-weight: 400; font-size: 12px; color: var(--muted); }
.ex-body { padding: 16px 18px 4px; }
.ex-body > :last-child { margin-bottom: 12px; }

details.ans {
    margin: 12px 0;
    border-top: 1px dashed var(--rule);
    padding-top: 10px;
}
details.ans > summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    user-select: none;
}
details.ans > summary::-webkit-details-marker { display: none; }
details.ans > summary::before {
    content: "▸";
    font-size: 11px;
    transition: transform .12s ease;
    display: inline-block;
}
details.ans[open] > summary::before { transform: rotate(90deg); }
details.ans > summary:hover { color: #0050c8; }
.ans-body {
    margin-top: 12px;
    padding: 12px 16px;
    background: #f8fafd;
    border-radius: 5px;
    font-size: 15.5px;
}
.ans-body > :first-child { margin-top: 0; }
.ans-body > :last-child { margin-bottom: 0; }

/* per-question sub-answers inside one exercise */
ol.qlist > li, ul.qlist > li { margin-bottom: 9px; }
.inline-ans {
    color: #1a6b2f;
    font-weight: 600;
}

/* ---------- "I'm comfortable" checkbox ---------- */
.hd-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 6px;
    font-size: 13.5px;
    color: var(--muted);
    background: #f8f9fb;
    border: 1px dashed var(--rule);
    border-radius: 5px;
    padding: 9px 14px;
    cursor: pointer;
}
.hd-check input { margin: 0; width: 15px; height: 15px; cursor: pointer; }

/* --- long display equations scroll instead of widening the page --------- */
.hd-body .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
}

/* --- source attribution line above a real-code excerpt ------------------ */
.hd-srcline {
    margin: 18px 0 -10px;
    font-size: 12.5px;
    color: var(--muted);
    letter-spacing: .01em;
}
.hd-srcline code {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12.5px;
    color: var(--navy);
}
.hd-check.done { color: #2f6b36; background: var(--try-bg); border-color: #b7ddb9; }

/* ---------- code ---------- */
.hd-body pre {
    background: #f7f8fa;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    overflow-x: auto;
}
.hd-body pre code { background: none; padding: 0; font-size: inherit; }
.hd-body :not(pre) > code {
    background: #f0f2f5;
    color: #b02a55;
    overflow-wrap: anywhere;   /* long file paths must not widen the page */
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .89em;
}

/* ---------- tables ---------- */
.hd-body table.tbl {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 15px;
}
.hd-body table.tbl th {
    background: #f4f7fb;
    color: var(--navy);
    text-align: left;
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 9px 12px;
    border-bottom: 2px solid var(--rule);
}
.hd-body table.tbl td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.tbl-scroll { overflow-x: auto; }

/* ---------- widgets ---------- */
.widget {
    border: 1px solid var(--rule);
    border-radius: 6px;
    margin: 26px 0;
    background: #fdfdfe;
}
.widget-head {
    background: var(--navy);
    color: #fff;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
}
.widget-head .widget-hint {
    display: block;
    font-weight: 400;
    font-size: 12.5px;
    color: #b9d2ea;
    margin-top: 2px;
}
.widget-body { padding: 18px; }
.widget label { font-size: 13px; color: var(--muted); font-weight: 600; display: block; margin-bottom: 5px; }
.widget input[type=text], .widget textarea {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    padding: 8px 11px;
    border: 1px solid #c8ced6;
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
}
.widget input[type=text]:focus, .widget textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(104, 172, 229, .22);
}
.w-btn {
    font-size: 13px;
    padding: 6px 13px;
    border: 1px solid #c8ced6;
    background: #fff;
    color: #3d4550;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.w-btn:hover { border-color: var(--accent); color: var(--navy); }
.w-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.w-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* bar chart */
.w-bars { margin-top: 6px; }
.w-bar-row {
    display: grid;
    grid-template-columns: 108px 1fr 74px;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
    font-size: 13.5px;
}
.w-bar-tok {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: right;
    color: #333a42;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w-bar-track { background: #eef1f5; border-radius: 3px; height: 19px; overflow: hidden; }
.w-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--navy), var(--accent));
    border-radius: 3px;
    transition: width .18s ease;
}
.w-bar-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--muted);
    text-align: right;
}
.w-bar-row.picked .w-bar-tok { color: var(--navy); font-weight: 700; }

.w-stats {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    padding: 12px 0 2px;
    margin-top: 14px;
    border-top: 1px solid var(--rule);
}
.w-stat-label {
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}
.w-stat-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 19px;
    color: var(--navy);
    font-weight: 600;
}
.w-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

/* token / pair display for the objective widget */
.w-pairs { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.w-pair {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid #f0f2f5;
    flex-wrap: wrap;
}
.w-pair-idx { color: #aab2bd; width: 26px; flex: 0 0 26px; font-size: 12px; }
.tok {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: #eef1f5;
    color: #3d4550;
    margin: 1px 2px 1px 0;
}
.tok.ctx { background: #e6eefb; color: #1c3f75; }
.tok.tgt { background: #d7f0d9; color: #1f5c2a; font-weight: 700; }
.tok.msk { background: #fde6ea; color: #8f2340; font-weight: 700; }
.tok.pad { background: #f6f7f9; color: #b6bdc6; }
.w-arrow { color: #aab2bd; padding: 0 2px; }

/* ---------- misc ---------- */
.hd-body figure { margin: 28px 0; }
.hd-body figcaption { font-size: 13px; color: var(--muted); margin-top: 9px; text-align: center; }
.hd-footer {
    border-top: 1px solid var(--rule);
    margin-top: 60px;
    padding-top: 18px;
    font-size: 13.5px;
    color: var(--muted);
}
.hd-body a { color: #0050c8; }
.hd-body a:hover { color: var(--navy); }
.lead { font-size: 18px; color: #3d4550; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .hd-wrap { display: block; padding: 0 18px; }
    .hd-toc {
        position: static;
        max-height: none;
        border-left: none;
        border-bottom: 1px solid var(--rule);
        padding: 16px 0;
        margin-bottom: 10px;
        flex: none;
    }
    .hd-toc ol { column-count: 2; column-gap: 18px; }
    .hd-body { max-width: none; }
    .w-bar-row { grid-template-columns: 82px 1fr 62px; font-size: 12.5px; }
    .hd-mast h1 { font-size: 25px; }
}

/* ---------- print ---------- */
@media print {
    .hd-toc, .widget, .hd-check { display: none !important; }
    .hd-mast { background: none; color: #000; border-bottom: 2px solid #000; }
    .hd-mast h1, .hd-mast .hd-sub, .hd-mast .hd-course { color: #000; }
    body.handout { font-size: 11pt; }
    details.ans > summary { display: none; }
    .hd-body h2, .hd-body h3 { page-break-after: avoid; }
    .ex { page-break-inside: avoid; }
}