/* The two navigation columns share the same gray ground. */
[data-study="quiet-cards"].quiet-detail-open { --qd-list-width:276px; --qd-header-height:64px; }
[data-study="quiet-cards"].quiet-detail-open .main-scroll { overflow:hidden; }
[data-study="quiet-cards"].quiet-detail-open .content-wrap { height:100%; max-width:none; padding:0; }
[data-study="quiet-cards"].quiet-detail-open #page-bar,
[data-study="quiet-cards"].quiet-detail-open .content-footer { display:none; }
[data-study="quiet-cards"].quiet-detail-open #page-content { height:100%; min-height:0; animation:none; }
.qd-shell { display:grid; grid-template-columns:var(--qd-list-width) minmax(0,1fr); height:100%; min-height:0; }
.qd-directory { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg); border:0; }
.qd-directory-head { display:flex; flex:none; align-items:center; justify-content:space-between; min-height:var(--qd-header-height); padding:0 20px; border-bottom:0; }
/* A quiet circular close control returns to the originating list. */
.qd-back { position:relative; display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; color:color-mix(in srgb,var(--muted) 75%,var(--bg)); }
.qd-back::before { content:''; position:absolute; inset:4px; border-radius:50%; background:color-mix(in srgb,var(--ink) 5%,var(--bg)); }
.qd-back svg { position:relative; width:16px; height:16px; }
.qd-back:hover { color:var(--ink); }
.qd-back:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.qd-directory-toggle { display:none; }
.qd-list { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:0 0 24px; }
.qd-list::-webkit-scrollbar { display:none; width:0; height:0; }
.qd-list[hidden] { display:none; }
.qd-item { display:flex; align-items:center; gap:12px; min-height:76px; padding:16px 20px; border-bottom:1px solid var(--line); color:var(--muted); background:transparent; font:14px/1.65 var(--mono); }
.qd-list > .qd-item:last-child { border-bottom:0; }
.qd-item:hover .qd-item-title { color:var(--ink); }
.qd-item[aria-current] { color:var(--ink); background:transparent; }
.qd-item-copy { min-width:0; flex:1; }
.qd-item-title { display:block; overflow-wrap:anywhere; font-weight:400; }
.qd-item-meta { display:block; margin-top:5px; font-size:10px; line-height:1.5; color:var(--muted); opacity:.8; }
.qd-item-dot { flex:none; width:5px; height:5px; border-radius:50%; background:transparent; }
.qd-item[aria-current] .qd-item-dot { background:var(--ink); }
/* Recent-inspired two-line directory; logo size refined to 30px by the user. */
.qd-item--icon { gap:10px; }
.qd-item--icon .qd-item-title { font-size:14px; line-height:20px; }
.qd-item--icon .qd-item-meta { margin-top:0; font-size:12px; line-height:18px; }
.qd-item--icon :is(.qd-item-title,.qd-item-meta) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qd-item-icon { width:30px; height:30px; display:grid; place-items:center; flex:none; border-radius:4px; background:var(--resource-logo-bg,#fff); font-size:14px; line-height:1; color:var(--resource-logo-fg,#171717); overflow:hidden; }
.qd-item-icon img { display:block; width:30px; height:30px; object-fit:contain; border-radius:4px; }
.qd-item:focus-visible { outline:2px solid var(--ink); outline-offset:-3px; }
.qd-detail { position:relative; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; background:var(--surface); scrollbar-gutter:stable; }
.qd-detail-toolbar { position:sticky; top:0; z-index:2; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 28px; border-bottom:0; background:var(--surface); color:var(--muted); font-size:11px; }
.qd-detail-controls { display:flex; align-items:center; gap:3px; }
.qd-icon-button { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--muted); background:transparent; }
.qd-icon-button svg { width:17px; height:17px; }
.qd-icon-button:hover { color:var(--ink); background:var(--bg); }
.qd-icon-button:disabled { opacity:.25; cursor:default; }
.qd-content { width:100%; max-width:1100px; padding:44px clamp(28px,4vw,72px) 72px; margin:0 auto; overflow-wrap:anywhere; }
.qd-eyebrow { color:var(--muted); font:11px/1.6 var(--mono); margin:0 0 14px; }
.qd-content h1 { font:500 clamp(25px,2.3vw,38px)/1.4 var(--mono); letter-spacing:-.7px; margin:0 0 18px; text-wrap:pretty; }
.qd-content h1:focus { outline:none; }
.qd-lead { font:14px/1.9 var(--mono); color:var(--muted); max-width:62ch; margin:0 0 30px; }
.qd-course-cover { display:block; width:100%; height:auto; border-radius:5px; margin:0 0 32px; }
.qd-content h2 { font:500 18px/1.6 var(--mono); margin:0 0 14px; }
.qd-course-intro { margin-bottom:26px; }
.qd-course-intro p { font-size:14px; line-height:1.9; color:var(--muted); }
.qd-course-body .detail-facts { max-width:680px; }
.qd-content .primary-button { width:fit-content; display:inline-flex; align-items:center; gap:26px; min-height:42px; padding:10px 16px; font-size:12px; border-radius:5px; background:var(--ink); color:var(--surface); }
.qd-content .primary-button svg { width:17px; height:17px; }
.qd-content .detail-cover { height:auto; }
.qd-content--project .detail-cover { aspect-ratio:auto; }
.qd-content--resource { padding-top:42px; }
.qd-resource-brand { display:flex; align-items:center; gap:18px; margin-bottom:24px; color:var(--ink); }
.qd-resource-brand h1 { flex:1; min-width:0; margin:0; }
.qd-resource-logo { width:58px; height:58px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--resource-logo-bg,#fff); color:var(--resource-logo-fg,#171717); font-size:17px; overflow:hidden; }
.qd-resource-logo img { width:42px; height:42px; object-fit:contain; }
.qd-resource-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:24px 0 0; }

.qd-resource-actions>span { color:var(--muted); font-size:11px; }
[data-study="quiet-cards"] .qd-resource-preview { margin:36px 0 0; }
.qd-resource-info { border-top:1px solid var(--line); margin-top:42px; padding-top:25px; }
.qd-resource-info>p { font-size:13px; line-height:1.9; color:var(--muted); margin-bottom:12px; }
.qd-resource-info .qd-note { font-size:11px; }
.qd-resource-info dd a { display:inline-flex; gap:8px; align-items:center; }
.qd-resource-info dd svg { width:14px; height:14px; }
.qd-font-specimen .fp-detail-specimen { min-height:350px; padding:38px; }
.qd-font-specimen .fp-detail-specimen h3 { font-size:clamp(30px,3vw,48px); }
.qd-copy-status { position:sticky; bottom:18px; margin:0 auto; width:fit-content; background:var(--ink); color:var(--surface); padding:0; font-size:12px; border-radius:5px; }
.qd-copy-status:not(:empty) { padding:10px 16px; }
@media (min-width:760px) {
  [data-study="quiet-cards"].quiet-detail-open :is(.sidebar-identity,.quiet-brand) { height:var(--qd-header-height); min-height:var(--qd-header-height); }
  .qd-back { left:-8px; top:0; }
  /* Keep a consistent top inset for the first directory entry. */
  .qd-shell:has(.qd-detail--tool) .qd-item:first-child { align-items:flex-start; padding-block:16px; }
}
@media (max-width:1279px) and (min-width:760px) {
  [data-study="quiet-cards"].quiet-detail-open { --qd-list-width:232px; }
  .qd-directory-head { padding-inline:16px; }
  .qd-item { padding:15px 16px; font-size:13px; gap:9px; }
  .qd-item--icon { gap:10px; }
  .qd-content { padding:32px 26px 56px; }
  .qd-detail-toolbar { padding-inline:20px; }
}
@media (max-width:999px) and (min-width:760px) {
  [data-study="quiet-cards"].quiet-detail-open { --qd-list-width:190px; }
  .qd-item { padding-inline:13px; }
  .qd-item-meta { font-size:10px; }
  .qd-content { padding:26px 20px 48px; }
  .qd-detail-toolbar { padding-inline:16px; }
  .qd-detail-toolbar>span { max-width:90px; line-height:1.6; }
  .qd-icon-button { width:30px; }
  .qd-font-specimen .fp-detail-specimen { padding:22px; min-height:260px; }
}
@media (max-width:759px) {
  .qd-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .qd-directory { border-left:0; border-right:0; border-bottom:0; }
  .qd-directory-head { min-height:50px; padding:0 16px; border-bottom:0; }
  .qd-directory-toggle { display:flex; align-items:center; gap:7px; min-height:44px; font:12px/1.5 var(--mono); color:var(--muted); }
  .qd-directory-toggle svg { width:15px; height:15px; }
  .qd-directory-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
  .qd-list { flex:auto; max-height:42dvh; padding-bottom:8px; border-top:0; }
  .qd-item { min-height:64px; padding:12px 18px; font-size:13px; }
  .qd-detail-toolbar { min-height:52px; padding:6px 16px; font-size:10px; }
  .qd-icon-button { width:36px; height:36px; }
  .qd-content { padding:26px 20px 48px; }
  .qd-content h1 { font-size:25px; letter-spacing:-.5px; }
  .qd-lead { font-size:13px; margin-bottom:24px; }
  .qd-course-cover { margin-bottom:26px; }
  .qd-content .detail-facts { grid-template-columns:60px minmax(0,1fr); gap:12px; font-size:12px; }
  .qd-font-specimen .fp-detail-specimen { padding:22px; min-height:270px; }
  .qd-font-specimen .fp-detail-specimen h3 { font-size:29px; }
  .qd-font-specimen .fp-detail-english { font-size:18px; }
  .qd-resource-brand { margin-bottom:24px; }
  .qd-resource-info { margin-top:30px; }
}

/* Resource and tutorial-pack details share the same page measure and type scale. */
.qd-detail--tool,.qd-detail--pack {
  --qd-tool-inset:28px;
  --qd-detail-title-size:clamp(40px,3.6vw,60px);
  --qd-detail-title-tracking:-1.4px;
  --qd-detail-heading-gap:48px;
  --qd-detail-body-size:18px;
  --qd-detail-body-leading:1.75;
  --qd-detail-actions-gap:20px;
  --qd-detail-media-gap:32px;
}
.qd-content.qd-content--tool,.qd-content.qd-content--pack { max-width:none; margin:0; padding:24px var(--qd-tool-inset) 64px; }
.qd-content.qd-content--tool:has(> .qd-resource-preview) { padding-bottom:var(--qd-tool-inset); }
.qd-content--tool .qd-resource-brand { gap:18px; margin:0 0 var(--qd-detail-heading-gap); }
.qd-content--tool .qd-resource-brand h1,.qd-content--pack h1 { font-size:var(--qd-detail-title-size); font-weight:450; line-height:1.12; letter-spacing:var(--qd-detail-title-tracking); }
.qd-content--tool .qd-resource-logo { width:60px; height:60px; border-radius:10px; }
.qd-content--tool .qd-resource-logo img { width:44px; height:44px; }
.qd-content--tool .qd-lead,.qd-content--pack .cp-lead { max-width:72ch; margin:0; font-size:var(--qd-detail-body-size); line-height:var(--qd-detail-body-leading); color:var(--ink); text-wrap:pretty; }
.qd-content--tool .qd-resource-actions { margin-top:var(--qd-detail-actions-gap); }
.qd-content--tool .qd-font-specimen { margin-top:32px; }
[data-study="quiet-cards"] .qd-content--tool .qd-resource-preview { position:relative; width:100%; max-width:100%; margin:var(--qd-detail-media-gap) 0 0; aspect-ratio:var(--resource-cover-ratio,3 / 2); overflow:hidden; border-radius:12px; border-color:var(--line); }
[data-study="quiet-cards"] .qd-content--tool .qd-resource-preview img { position:absolute; top:0; left:0; display:block; width:100%; max-width:100%; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; }
@media (max-width:1279px) and (min-width:760px) {
  .qd-detail--tool,.qd-detail--pack { --qd-tool-inset:24px; --qd-detail-title-size:38px; --qd-detail-title-tracking:-1px; --qd-detail-heading-gap:36px; --qd-detail-body-size:16px; }
  .qd-content--tool .qd-resource-brand { gap:14px; }
  .qd-content--tool .qd-resource-logo { width:50px; height:50px; }
  .qd-content--tool .qd-resource-logo img { width:36px; height:36px; }
}
@media (max-width:999px) {
  .qd-detail--tool,.qd-detail--pack { --qd-tool-inset:20px; --qd-detail-title-size:32px; --qd-detail-title-tracking:-.8px; --qd-detail-heading-gap:28px; --qd-detail-body-size:15px; --qd-detail-body-leading:1.8; --qd-detail-actions-gap:18px; --qd-detail-media-gap:28px; }
  .qd-content--tool .qd-resource-brand { gap:12px; }
  .qd-content--tool .qd-resource-logo { width:44px; height:44px; border-radius:8px; }
  .qd-content--tool .qd-resource-logo img { width:32px; height:32px; }
  .qd-content--tool .qd-font-specimen { margin-top:28px; }
}
@media (max-width:759px) {
  .qd-content.qd-content--tool,.qd-content.qd-content--pack { padding-top:20px; }
}

/* Lightbox: click a website screenshot in resource details to enlarge it. */
[data-study="quiet-cards"] .qd-content--tool .qd-resource-preview .qd-lightbox-open { position:absolute; inset:0; display:block; width:100%; padding:0; cursor:zoom-in; border-radius:inherit; text-align:left; }
[data-study="quiet-cards"] .qd-resource-preview .qd-lightbox-hint { position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; background:var(--surface); color:var(--ink); font-size:12px; line-height:1; box-shadow:0 2px 10px #0000001f; opacity:0; transform:translateY(4px); transition:opacity 200ms ease, transform 200ms var(--ease); pointer-events:none; }
[data-study="quiet-cards"] .qd-resource-preview .qd-lightbox-hint svg { width:15px; height:15px; }
[data-study="quiet-cards"] .qd-lightbox-open:hover .qd-lightbox-hint,
[data-study="quiet-cards"] .qd-lightbox-open:focus-visible .qd-lightbox-hint { opacity:1; transform:none; }
@media (hover:none) {
  [data-study="quiet-cards"] .qd-resource-preview .qd-lightbox-hint { opacity:1; transform:none; }
}
.qd-lightbox { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; overflow:hidden; }
.qd-lightbox[open] { display:flex; align-items:center; justify-content:center; animation:qd-lightbox-in 220ms var(--ease) both; }
.qd-lightbox.is-closing[open] { animation:qd-lightbox-out 160ms ease both; }
.qd-lightbox::backdrop { background:#fff; animation:qd-lightbox-fade 220ms ease both; }
.qd-lightbox.is-closing::backdrop { animation:qd-lightbox-fade-out 160ms ease both; }
.qd-lightbox-figure { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:92vw; margin:0; }
.qd-lightbox-image { display:block; max-width:92vw; max-height:82vh; width:auto; height:auto; border-radius:12px; box-shadow:0 0 0 1px #171a1d14; }
.qd-lightbox-caption { color:#171a1d99; font-size:12px; line-height:1.5; }
.qd-lightbox-close { position:fixed; top:18px; right:18px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#171a1d0a; color:#171a1d; }
.qd-lightbox-close:hover { background:#171a1d17; }
.qd-lightbox-close svg { width:20px; height:20px; }
@keyframes qd-lightbox-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
@keyframes qd-lightbox-out { from { opacity:1; } to { opacity:0; transform:scale(.98); } }
@keyframes qd-lightbox-fade { from { opacity:0; } to { opacity:1; } }
@keyframes qd-lightbox-fade-out { from { opacity:1; } to { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .qd-lightbox[open],.qd-lightbox.is-closing[open],.qd-lightbox::backdrop,.qd-lightbox.is-closing::backdrop { animation:none; }
  [data-study="quiet-cards"] .qd-resource-preview .qd-lightbox-hint { transition:none; }
}