/* ui.techdynamix.com overview page only. */
@media (min-width: 901px) { html.sidebar-collapsed .sidebar-foot .theme-switch { display: none; } }
@media (max-width: 600px) { .pagehead-actions .badge { display: none; } }

/* Brand page. Swatches and logo tiles show fixed brand colors on purpose, whatever the theme. */
.jump { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); padding-top: var(--s2); padding-bottom: var(--s2); }
.jump a { font-weight: 500; text-decoration: none; }
.jump a:hover { text-decoration: underline; }
section.card[id] { scroll-margin-top: calc(var(--pagehead-h) + var(--s2)); }
section.card h3 { margin-top: var(--s3); }

.logo-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: var(--s3); }
.logo-tile { margin: 0; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.logo-tile img { display: block; height: 56px; width: auto; max-width: 85%; margin: 40px auto; object-fit: contain; }
.logo-tile img.logo-stacked { height: 96px; margin: 24px auto; }
.logo-tile img.logo-icon { height: 64px; margin: 36px auto; }
.logo-tile.on-light { background: #FFFFFF; }   /* kit-check: allow: logo tile shows the light background */
.logo-tile.on-dark { background: #17191C; }    /* kit-check: allow: logo tile shows the dark background */
.logo-tile figcaption { display: flex; justify-content: space-between; gap: var(--s1); padding: 10px var(--s2); font-size: 13px; background: var(--panel); border-top: 1px solid var(--border); color: var(--text-2); }

.swatches { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.swatch { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 0 var(--s2); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.swatch:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.swatch > span:not(.chip) { padding: 0 var(--s2); }
.swatch .chip { display: block; width: 100%; height: 72px; margin-bottom: var(--s1); border-bottom: 1px solid var(--border); }
.swatch .sw-name { font-weight: 600; }
.swatch .small { margin-top: 6px; color: var(--text-2); }
/* kit-check: allow: brand swatches are the reference values */
.sw-orange { background: #E87722; } .sw-violet { background: #7566A0; } .sw-teal { background: #1E7A8C; }
.sw-red { background: #E5484D; } .sw-outerspace { background: #4A4947; } .sw-peach { background: #FBEBDD; }
.sw-ink { background: #1E2024; } .sw-charcoal { background: #17191C; } .sw-slate { background: #5E6670; }
.sw-mist { background: #D9DCE1; } .sw-cloud { background: #F6F7F8; }

.type-specimens { display: flex; flex-direction: column; }
.type-row { display: grid; grid-template-columns: 260px 1fr; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--border); }
.type-row:first-child { border-top: 0; }
.type-meta { display: flex; flex-direction: column; gap: 2px; }
.type-meta .mono { font-size: 12px; }
.spec { margin: 0; }
.spec-head { font: 600 32px/1.15 var(--font-head); }
.spec-body { font: 400 15px/1.5 var(--font-body); max-width: 60ch; }
.spec-num { font: 600 28px/1.2 var(--font-num); font-variant-numeric: tabular-nums; }
.spec-mark { font-size: 34px; }
@media (max-width: 700px) { .type-row { grid-template-columns: 1fr; gap: var(--s1); } .spec-head { font-size: 26px; } }

.sample-box { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--sunken); }
.words td.not { color: var(--text-2); text-decoration: line-through; }
.words td { vertical-align: top; }

.icon-sizes { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; margin-bottom: var(--s2); }
.icon-sizes > span { display: inline-flex; align-items: center; gap: var(--s1); }
.icon-xl { width: 32px; height: 32px; }
.meanings { display: grid; gap: var(--s1); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.meaning { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.meaning:hover { border-color: var(--orange); background: var(--nav-active); }
.meaning .icon { width: 24px; height: 24px; flex: none; }
.meaning span { display: flex; flex-direction: column; min-width: 0; }
.meaning code { font: 12px var(--font-mono); color: var(--text-2); }

.mark-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.mark-row > span { display: inline-flex; align-items: center; gap: var(--s1); }
.demo-row { display: flex; flex-wrap: wrap; gap: var(--s1) 12px; align-items: center; }

.space-scale { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s3); }
.space-scale > div { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.space-scale .bar { display: block; height: 12px; border-radius: 3px; background: var(--orange); flex: none; }
.space-scale .s1 { width: 8px; } .space-scale .s2 { width: 16px; } .space-scale .s3 { width: 24px; }
.space-scale .s4 { width: 32px; } .space-scale .s5 { width: 40px; } .space-scale .s6 { width: 48px; }
.mark-inline { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 500; margin-right: var(--s1); }

/* Overview: examples grouped by kind of page, searchable. */
.example-group { margin-top: var(--s3); }
.example-group h3 { display: flex; align-items: center; gap: var(--s1); font-size: 15px; margin: 0 0 12px; }
.example-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.example-card {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; text-decoration: none; color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel);
}
.example-card:hover { border-color: var(--orange); background: var(--nav-active); }
.example-card[hidden], .example-group[hidden] { display: none; }
.example-title { display: flex; align-items: center; gap: var(--s1); font-weight: 600; }
.example-title .icon { color: var(--text-2); }
.example-card:hover .example-title .icon { color: var(--orange); }
.example-uses { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.example-uses .badge { font-size: 11px; padding: 2px 6px; }
.site-search { margin-bottom: var(--s1); }
.search-more { margin-top: var(--s2); padding: 12px var(--s2); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--sunken); }
.search-more h3 { font-size: 14px; margin: 0 0 6px; }
.search-more-list { margin: 0; padding-left: 18px; }
.search-more-list li { margin: 2px 0; }
section.card[id] { scroll-margin-top: calc(var(--pagehead-h) + var(--s2)); }

/* Sidebar search: goes to the overview's search. Hidden in the collapsed rail. */
.nav-search { position: relative; margin: 12px 12px 0; }
.nav-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.nav-search input { padding: 6px 30px 6px 32px; font-size: 14px; }
.nav-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--font-mono); color: var(--text-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; }
@media (min-width: 901px) { html.sidebar-collapsed .nav-search { display: none; } }