/* /techniques/ hub + technique pages. Builds on the site tokens in /index1.css (dark theme). */

.tq-page { background: var(--bg-primary); color: var(--text-primary); }
.tq-wrap { max-width: 1040px; margin: 0 auto; padding: 1.25rem 16px 4rem; }
.tq-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tq-crumbs { font-size: .85rem; color: var(--text-tertiary); margin: .5rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.tq-crumbs a { color: var(--text-secondary); text-decoration: none; }
.tq-crumbs a:hover { color: var(--accent-primary); text-decoration: underline; }

.tq-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--accent-primary); margin: 0 0 .5rem; }
.tq-hero h1, .tq-head h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; line-height: 1.15; color: var(--text-headings); margin: 0 0 1rem; }
.tq-lead { font-size: 1.12rem; color: var(--text-secondary); max-width: 760px; margin: 0; }
.tq-hero { margin-bottom: 2.25rem; }

/* Definition: the two sentences an assistant should quote */
.tq-def {
    font-size: 1.15rem; line-height: 1.65; color: var(--text-primary);
    border-left: 3px solid var(--primary-color); background: var(--surface-glass);
    padding: 1rem 1.25rem; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: 0 0 1.25rem; max-width: 820px;
}
.tq-facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0 0 1.75rem; }
.tq-facts div { min-width: 0; }
.tq-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-weight: 600; }
.tq-facts dd { margin: .15rem 0 0; color: var(--text-headings); font-weight: 500; }

.tq-level { display: inline-block; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid currentColor; line-height: 1.4; white-space: nowrap; }
.tq-level--beginner { color: #34d399; }
.tq-level--intermediate { color: #fbbf24; }
.tq-level--advanced { color: #f87171; }

.tq-toc { border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: .9rem 1.1rem; margin: 0 0 2rem; background: var(--card-bg); }
.tq-toc__title { font-weight: 700; font-size: .85rem; margin: 0 0 .4rem; color: var(--text-secondary); }
.tq-toc ol { margin: 0; padding-left: 1.2rem; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.tq-toc li { font-size: .92rem; }
.tq-toc a, .tq-article a, .tq-table a, .tq-back a { color: var(--accent-primary); }
.tq-toc a:hover { color: #c4b5fd; }

.tq-section { margin: 0 0 2.75rem; scroll-margin-top: 90px; }
.tq-section h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 800; color: var(--text-headings); margin: 0 0 .9rem; }
.tq-section h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; color: var(--text-headings); }
.tq-section p, .tq-section li { color: #d1d5db; font-size: 1.02rem; line-height: 1.7; }
.tq-article { max-width: 860px; }
.tq-sub { color: var(--text-secondary); margin-top: -.4rem; }
.tq-section code { color: #e9d5ff; background: rgba(167, 139, 250, .12); padding: .05rem .35rem; border-radius: .3rem; font-size: .92em; }

.tq-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .tq-split { grid-template-columns: 1fr; } }
.tq-panel { border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; background: var(--card-bg); }
.tq-panel ul { margin: 0; padding-left: 1.1rem; }
.tq-panel li { margin-bottom: .45rem; font-size: .97rem; }
.tq-panel--yes { border-top: 3px solid var(--success-color); }
.tq-panel--no { border-top: 3px solid var(--danger-color); }

/* Code / template blocks: wrap rather than scroll sideways on phones */
.tq-code { border: 1px solid var(--border-glass); border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 .9rem; background: #0a0918; }
.tq-code__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .55rem .8rem; border-bottom: 1px solid var(--border-glass); background: var(--surface-glass); }
.tq-code__title { font-size: .85rem; font-weight: 700; color: var(--text-secondary); }
.tq-code__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.tq-code pre {
    margin: 0; padding: 1rem 1.1rem; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.6; color: #e5e7eb;
}
.tq-code pre:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.tq-code--output pre { color: #c7d2fe; }
.tq-note { font-size: .92rem !important; color: var(--text-secondary) !important; margin: .4rem 0 0; }
.tq-why { background: rgba(16, 185, 129, .08); border: 1px solid rgba(16, 185, 129, .25); border-radius: var(--radius-lg); padding: .8rem 1rem; }

.tq-btn {
    display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border-glass-hover); background: var(--surface-glass);
    color: var(--text-primary); border-radius: var(--radius-md); padding: .55rem 1rem; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
}
.tq-btn:hover { background: var(--surface-glass-hover); color: #fff; border-color: var(--accent-primary); }
.tq-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.tq-btn--sm { padding: .3rem .7rem; font-size: .82rem; }
.tq-btn--ghost { background: transparent; }
.tq-btn--primary { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-color: transparent; color: #fff !important; }
.tq-btn.is-done { border-color: var(--success-color); color: #6ee7b7; }
.tq-btn[hidden] { display: none; }

.tq-deep { margin: 1.25rem 0 0; padding: 1.25rem 1.4rem; border-radius: var(--radius-xl); border: 1px solid rgba(124, 58, 237, .45); background: linear-gradient(135deg, rgba(79, 70, 229, .16), rgba(124, 58, 237, .1)); }
.tq-deep__kicker { font-size: .78rem !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--accent-primary) !important; margin: 0 0 .3rem; }
.tq-deep__text { margin: 0 0 .9rem; }

.tq-mistakes { padding-left: 1.3rem; }
.tq-mistakes li { margin-bottom: .7rem; }
.tq-mistakes strong { color: var(--text-headings); }
.tq-sources { padding-left: 1.1rem; }
.tq-sources li { font-size: .95rem; margin-bottom: .35rem; word-break: break-word; }

.tq-faq { border: 1px solid var(--border-glass); border-radius: var(--radius-lg); background: var(--card-bg); margin-bottom: .6rem; }
.tq-faq summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; color: var(--text-headings); list-style-position: inside; }
.tq-faq summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; border-radius: var(--radius-lg); }
.tq-faq p { margin: 0; padding: 0 1.1rem 1rem; }

/* Cards (hub + related) */
.tq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 920px) { .tq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tq-grid { grid-template-columns: 1fr; } }
.tq-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .tq-grid--compact { grid-template-columns: 1fr; } }
.tq-card {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.25rem; border-radius: var(--radius-xl);
    background: var(--card-bg); border: 1px solid var(--border-glass); text-decoration: none; color: inherit; transition: var(--transition);
}
.tq-card:hover { border-color: var(--primary-color); background: var(--card-bg-hover); transform: translateY(-2px); color: inherit; }
.tq-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.tq-card__top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tq-card__cat { font-size: .75rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.tq-card__name { font-size: 1.15rem; font-weight: 800; color: var(--text-headings); line-height: 1.3; }
.tq-card__def { color: var(--text-secondary); font-size: .95rem; line-height: 1.55; }
.tq-card__best { color: #d1d5db; font-size: .88rem; margin-top: auto; padding-top: .3rem; border-top: 1px solid var(--border-glass); }
.tq-card__best strong { color: var(--text-headings); }

.tq-table-wrap { overflow-x: auto; border: 1px solid var(--border-glass); border-radius: var(--radius-lg); }
.tq-table { width: 100%; border-collapse: collapse; color: #d1d5db; }
.tq-table th, .tq-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--border-glass); text-align: left; vertical-align: top; }
.tq-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); background: var(--surface-glass); }
.tq-table tr:last-child td { border-bottom: 0; }
.tq-table td:last-child { white-space: nowrap; font-weight: 600; }
@media (max-width: 560px) { .tq-table td:last-child { white-space: normal; } }

.tq-tools__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.tq-tool { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid var(--border-glass); background: var(--card-bg); text-decoration: none; color: inherit; }
.tq-tool:hover { border-color: var(--accent-primary); color: inherit; }
.tq-tool__name { font-weight: 700; color: var(--accent-primary); }
.tq-tool__text { color: var(--text-secondary); font-size: .92rem; }
.tq-back { margin-top: 1rem; }
.tq-code__hint { font-size: .75rem; color: var(--text-tertiary); flex: 1 1 auto; text-align: right; }