/* The DR handbook (/handbook/): 17 letters with an SEO + GEO layer around each one (Amir, 2026-11-12).
   Loaded after site.css on /handbook/ pages only. Colours from the :root tokens; prose width as the letters. */

/* the letter page */
.hb-page .prose h1 { margin-bottom: .3em; }
.hb-page .prose .byline { margin: 0 0 14px; }
.hb-page .prose .byline a { color: var(--muted); text-decoration: none; }
.hb-page .prose .label bdi { font-family: var(--mono); font-weight: 400; letter-spacing: .02em; }

/* the definition: what an answer engine quotes */
.hb-def { margin: 1.6em 0 1.2em; padding: 18px 22px 20px; border-inline-start: 4px solid var(--acc); border-radius: 12px; background: var(--panel); }
.hb-def .hb-k { margin: 0 0 6px; color: var(--acc); font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }
.hb-def p:last-child { margin: 0; color: var(--text); font-size: 1.06em; line-height: 1.55; }
.hb-def dfn { font-style: normal; font-weight: 800; }
.hb-def dfn span { color: var(--dim); font-weight: 600; }

/* בקצרה */
.hb-tldr { margin: 0 0 2.2em; padding: 16px 22px 6px; border: 1px solid var(--line-2); border-radius: 16px; }
.prose .hb-tldr h2 { margin: 0 0 8px; color: var(--acc); font-size: 1.05rem; font-stretch: 100%; font-weight: 700; letter-spacing: .01em; }
.prose .hb-tldr ul { list-style: none; margin: 0; padding: 0; }
.hb-tldr li { position: relative; margin: 0 0 .7em; padding-inline-start: 20px; color: var(--dim); line-height: 1.5; }
.hb-tldr li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .45em; width: 2px; height: .8em; border-radius: 2px; background: var(--acc); transform: rotate(-32deg); }

/* the letter itself sits between the layer's parts */
.hb-body > :first-child { margin-top: 0; }

/* FAQ */
.hb-faq { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--line-2); }
.prose .hb-faq h2 { margin-top: 0; }
.prose .hb-faq h3 { margin: 1.3em 0 .35em; color: var(--text); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height: 1.25; }
.prose .hb-faq p { margin: 0; }

/* previous / next sit on .legend-nav from site.css */
.hb-nav b { display: block; line-height: 1.25; }

/* keep reading: the giant, the tool, DR System */
.hb-more { max-width: 720px; margin-top: 36px; }
.hb-more h2 { margin: 0 0 12px; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); }
.hb-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.hb-more a { display: grid; align-content: start; gap: 2px; height: 100%; min-height: 44px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .2s ease; }
.hb-more small { color: var(--muted); font-size: 13px; }
.hb-more b { font-size: 1.12rem; line-height: 1.2; }
.hb-more span { margin-top: 2px; color: var(--dim); font-size: 15px; line-height: 1.4; }
@media (hover: hover) { .hb-more a:hover { border-color: var(--acc); } }

/* the hub */
.hb-hub .head .sub { color: var(--dim); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.hb-hub .head .sub + .sub { margin-top: 10px; }
.hb-start { margin-top: 24px; }
.hb-gloss-h { margin: 0 0 16px; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); }
.hb-gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; margin: 0; }
.hb-gloss > div { position: relative; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); transition: border-color .2s ease; }
.hb-gloss dt { margin: 0; }
.hb-gloss dt a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--text); text-decoration: none; }
.hb-gloss dt a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card opens the letter */
.hb-gloss .n { color: var(--acc); font-family: var(--mono); font-size: 13px; }
.hb-gloss dfn { font-style: normal; font-stretch: 75%; font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
.hb-gloss .en { color: var(--muted); font-size: 14px; }
.hb-gloss dd { margin: 6px 0 0; color: var(--dim); font-size: 16px; line-height: 1.45; }
@media (hover: hover) { .hb-gloss > div:hover { border-color: var(--acc); } }
.hb-gloss > div:focus-within { border-color: var(--acc); }

/* the element's name above the letter's title: the reader who tapped it in the dictionary sees it first (Amir, 2026-11-12) */
.hb-term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 14px 0 6px; }
.hb-term-he { color: var(--acc); font-weight: 800; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem); line-height: 1.15; }
.hb-term-en { color: var(--muted); font-size: clamp(.9rem, .85rem + .2vw, 1rem); letter-spacing: .02em; }
.hb-term + h1 { margin-top: 0; }

/* "איך לצטט": the line a reader or a model can copy, with its source (Amir, 2026-11-12, GEO) */
.hb-cite { margin: 2em 0 0; padding: 14px 18px; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.hb-cite p { margin: 0; color: var(--muted); }
.hb-cite .hb-k { margin-bottom: 4px; }
.hb-cite a { color: var(--dim); overflow-wrap: anywhere; }

/* "בדקו את עצמכם": three statements at the end of each letter, the homepage's myth-or-truth quiz (assets/hb-quiz.js)
   in the letter's column (Amir, 2026-11-12). The quiz classes come from site.css; here only what the prose column changes. */
html:not(.js) .hb-quiz-wrap { display: none; } /* the box is empty without the script */
.hb-quiz-wrap { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--line-2); }
.prose .hb-quiz-wrap h2 { margin-top: 0; }
.hb-quiz { min-height: 280px; padding: clamp(22px, 3.4vw, 34px) clamp(16px, 3.4vw, 34px); }
.prose .hb-quiz h3 { margin: 0; color: var(--text); font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem); line-height: 1.22; }
.prose .hb-quiz .q-count { margin: 0 0 12px; color: var(--acc); }
.prose .hb-quiz .q-why p { margin: 0 auto 16px; font-size: 1em; }
.hb-quiz .q-ans .btn { flex: 1 1 0; min-width: 0; max-width: 190px; }
.prose .hb-quiz .q-score { margin: 0 0 8px; color: var(--acc); font-size: clamp(3rem, 2.4rem + 2.6vw, 4.5rem); }
.hb-quiz .q-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.hb-quiz .q-go .btn { white-space: normal; text-align: center; line-height: 1.3; }
.prose .hb-quiz .q-go .btn:not(.primary) { color: var(--text); }
@media (hover: hover) { .prose .hb-quiz .q-go .btn:not(.primary):hover { border-color: var(--acc); color: var(--acc); } }
@media (max-width: 560px) { .hb-quiz .q-go .btn { flex: 1 1 100%; } }

/* the ending: two doors, done for you or do it yourself (Amir, 2026-11-14) */
.hb-final h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); }
.hb-final > p { margin: 12px 0 26px; }
.hb-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.hb-door { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-2); }
.hb-door-us { border-color: rgba(116, 199, 255, .45); }
.hb-door small { color: var(--muted); font-size: 13px; }
.hb-door h3 { margin: 0; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.75rem); line-height: 1.2; }
.final .hb-door p { max-width: none; margin: 4px 0 14px; font-size: 1.02rem; line-height: 1.55; }
.hb-door-act { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.hb-wa { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--acc); font-weight: 600; }