.search-form-container .search-form{
 display: flex;
 gap: var(--space-sm);
 margin-top: var(--space-lg);
}
.search-form-container .search-field{
 flex-grow: 1;
 padding: 0.75rem;
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius-sm);
 background: var(--bg-primary);
 color: var(--text-primary);
 font-size: var(--text-md);
}
.search-form-container .search-submit{
 display: inline-block;
 padding: 0.75rem;
 font-size: var(--text-base);
 font-weight: var(--text-medium);
 line-height: 1;
 text-align: center;
 text-decoration: none;
 vertical-align: middle;
 cursor: pointer;
 user-select: none;
 border: 1px solid transparent;
 border-radius: var(--border-radius-sm);
 transition: var(--transition-all);
 background-color: transparent;
 color: var(--button-text);
 border-color: var(--button-border);
 width: auto;
}
.search-form-container .search-submit:hover{
 background-color: var(--button-bg-hover);
 border-color: var(--button-border-hover);
 box-shadow: 0 4px 8px var(--button-shadow-hover);
 transform: var(--lift-md);
 color: var(--white);
}
.search-form-container .search-submit:focus{
 outline: none;
 box-shadow: var(--shadow-focus);
}
.search-form-container .search-submit:active{
 transform: var(--lift-reset);
}
#secondary #table-of-contents{
 /* Constrain height relative to viewport minus sticky offset
 so it never overlaps widgets below;enable internal scroll */
 max-height: calc(100vh - var(--header-height, 0px) - var(--sticky-gap, 2rem) - 2rem);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 scrollbar-color: var(--primary-color) transparent;
}
@media (max-width: 768px){
 #secondary #table-of-contents{
 position: static;
 max-height: none;
 overflow-y: visible;
}
}
.toc-header{
 display: flex;
 justify-content: space-between;
 align-items: center;
}
#toc-toggle{
 background: var(--bg-secondary);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius-sm);
 cursor: pointer;
 padding: var(--space-xs);
}
#toc-toggle .icon{
 width: var(--icon-size-md);
 height: var(--icon-size-md);
 display: block;
}
#toc-toggle:focus{
 outline: 2px solid var(--primary-color);
 outline-offset: 2px;
}
.toc-list{
 margin: 0;
}
.site-main .toc-list{
 border-top: 1px solid var(--border-color);
 margin-top: 1rem;
 padding-top: 1rem;
}
.toc-list ol{
 list-style-type: lower-alpha;
 padding-left: var(--space-md);
 margin: 0;
}
.toc-list a{
 color: var(--text-muted);
 padding: var(--space-xs) 0;
 display: inline-block;
}
.toc-list a:hover{
 color: var(--primary-color);
}
#secondary .toc-list a.active{
 color: var(--primary-color);
 font-weight: var(--text-semibold);
 position: relative;
}
#scroll-progress-bar{
 height: var(--progress-bar-height);
 background-color: var(--primary-color);
 width: 0%;
 transition: width 0.1s ease-out;
 position: absolute;
 top: 100%;
}
#back-to-top{
 position: fixed;
 bottom: var(--space-xl);
 right: var(--space-xl);
 width: 2rem;
 height: 2rem;
 padding: 0;
 background-color: var(--bg-card);
 border: none;
 border-radius: 50%;
 cursor: pointer;
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 1000;
 box-shadow: var(--shadow-md);
 transition: var(--transition-all);
}
#back-to-top:hover{
 background-color: var(--primary-dark);
 transform: var(--lift-md);
 box-shadow: var(--shadow-md);
}
.breadcrumbs{
 margin-bottom: var(--space-md);
 font-size: var(--text-base);
 color: var(--text-secondary);
}
.breadcrumbs ol{
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}
.breadcrumbs li{
 display: flex;
 align-items: center;
}
.breadcrumbs li:not(:last-child)::after{
 content: '/';
 margin: 0 var(--space-xs);
 color: var(--text-secondary);
}
.breadcrumbs a,
.byline a{
 color: var(--text-secondary);
}
.card .read-more{
 display: inline-block;
}
.card .read-more:hover{
 color: var(--primary-hover);
 text-decoration: underline;
}
.text-muted{
 color: var(--text-secondary);
}
.text-primary{
 color: var(--primary-color);
}
.bg-light{
 background: var(--bg-card);
}
.border{
 border: 1px solid var(--border-color);
}
.rounded{
 border-radius: var(--border-radius);
}
.shadow{
 box-shadow: var(--shadow-sm);
}
.transition{
 transition: var(--transition-all);
}
.hover-lift:hover{
 transform: var(--lift-md);
 box-shadow: var(--shadow-md);
}
@media (max-width: 768px){
 .hide-mobile{
 display: none;
}
}
@media (min-width: 769px){
 .hide-desktop{
 display: none;
}
}
.focus-visible:focus{
 outline: 2px solid var(--primary-color);
 outline-offset: 2px;
}
@media print{
 .no-print{
 display: none;
}
 .print-only{
 display: block;
}
}