:root{
  --accent: #0066cc;
  --muted: #666;
  --bg-footer: #f0f0f0;
  --content-max: 1200px;
  /* Dynamic footer height (set via script), fallback ensures space if script fails */
  --footer-height: 8rem;
}

/* Reset and base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:Arial, Helvetica, sans-serif;color:#222}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent)}

/* Layout */
header{background:white;border-bottom:1px solid #eee;padding:1rem 0;position:sticky;top:0;z-index:10}
.site-container{max-width:var(--content-max);margin:0 auto;padding:0 1.25rem}
.brand{font-weight:700;color:var(--accent);text-decoration:none}
nav.site-nav{display:block}
.nav-spacer{display:none}

main{flex:1;padding:2rem;padding-bottom:calc(var(--footer-height) + 12px)}

/* Content widths */
.content{padding:0 10%}
.content--narrow{max-width:900px;margin:0 auto;padding:0 2rem}
.content--wide{max-width:1200px;margin:0 auto;padding:0 2rem}
.content--terms{max-width:850px;margin:0 auto;padding:0 2rem;background-color:white}

.breadcrumb{font-size:0.9rem;color:var(--muted);margin-bottom:1rem}
.breadcrumb a{color:var(--accent);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* Tables */
table{width:100%;border-collapse:collapse}
th, td{padding:0.75rem;border:1px solid #ddd}
th{background:#f8f9fa}

h1{color:#2c3e50}
h2,h3{color:#2c3e50}

/* Footer */
footer{position:fixed;bottom:0;left:0;width:100%;background:var(--bg-footer);padding:1rem;text-align:center;box-shadow:0 -1px 5px rgba(0,0,0,0.05);font-size:0.9rem;color:var(--muted);z-index:50}

/* Media wrappers */
.media-wrapper{max-width:100%;margin:1rem 0}
.media-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.media-responsive iframe,.media-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.media-img{display:block;max-width:100%;height:auto;border-radius:6px}
figure.media{margin:0}
figcaption.media-caption{font-size:0.9rem;color:var(--muted);margin-top:0.4rem}

/* Content lists for group pages */
.content-list{list-style:none;padding:0;margin:2rem 0}
.content-list li{margin-bottom:1.5rem;padding:1rem;border-left:3px solid var(--accent);background:#f8f9fa}
.content-list a{text-decoration:none;color:var(--accent);font-size:1.1rem}
.content-list a:hover{text-decoration:underline}
.content-description{margin:0.5rem 0 0 0;color:var(--muted);font-size:0.95rem}
.section-description{font-size:1.1rem;color:var(--muted);margin-bottom:2rem}
.content-group-toc{margin-top:3rem}
.document-header{margin-bottom:2rem}
.document-meta{display:flex;gap:2rem;margin-top:0.5rem;font-size:0.9rem;color:var(--muted)}

/* Utility */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header inner layout */
.header-inner{display:flex;align-items:center;gap:1rem}

/* Search and results */
.search-box{position:relative;margin-bottom:2rem}
.search-input{width:100%;padding:1rem;font-size:1.1rem;border:2px solid #ddd;border-radius:8px}
.search-input:focus{outline:none;border-color:var(--accent)}
.quick-results{display:none;position:absolute;top:100%;left:0;right:0;background:white;border:2px solid var(--accent);border-radius:8px;margin-top:0.5rem;max-height:400px;overflow-y:auto;box-shadow:0 4px 8px rgba(0,0,0,0.1);z-index:100}
.quick-result-item{display:block;padding:1rem;border-bottom:1px solid #eee;text-decoration:none;color:inherit}
.quick-result-item:hover{background:#f8f9fa}
.quick-result-item:last-child{border-bottom:none}
.quick-result-item strong{display:block;color:var(--accent);margin-bottom:0.25rem}
.result-category{display:inline-block;background:#e9ecef;padding:0.2rem 0.5rem;border-radius:4px;font-size:0.8rem;color:var(--muted);margin-top:0.25rem}
.full-results-container{margin-bottom:1rem}
.search-button{padding:0.75rem 2rem;background-color:var(--accent);color:white;border:none;border-radius:8px;cursor:pointer;font-size:1rem}
.search-button:hover{background-color:#0052a3}
.search-hint{color:var(--muted);font-style:italic}
.result-count{color:var(--muted);margin-bottom:1.5rem}
.result-item{background:#f8f9fa;padding:1.5rem;margin-bottom:1rem;border-left:4px solid var(--accent)}
.result-item h3{margin:0 0 0.5rem 0}
.result-item a{text-decoration:none;color:var(--accent)}
.result-item a:hover{text-decoration:underline}
.result-description{margin:0.5rem 0;color:#444}
.no-results{color:var(--muted);font-style:italic;padding:2rem;text-align:center}

/* Dictionary styles */
.dictionary-search-box{margin:2rem 0}
.dictionary-search-input{width:100%;padding:1rem;font-size:1.1rem;border:2px solid #ddd;border-radius:8px}
.dictionary-search-input:focus{outline:none;border-color:var(--accent)}
.dictionary-results{margin-bottom:2rem;min-height:2rem}
.dictionary-results h3{color:var(--accent);margin-bottom:1rem}
.dictionary-search-results{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:1rem;margin-bottom:2rem}
.dictionary-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:1rem}
.dictionary-card{background:white;border:2px solid #e9ecef;border-radius:8px;padding:1.5rem;cursor:pointer;transition:all 0.2s ease}
.dictionary-card:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(0, 102, 204, 0.1);transform:translateY(-2px)}
.dictionary-card-term{margin:0 0 0.75rem 0;font-size:1.25rem;color:var(--accent)}
.dictionary-card-abbr{font-size:0.85rem;color:var(--muted);font-weight:normal;margin-left:0.5rem}
.dictionary-card-preview{color:#444;line-height:1.5;font-size:0.95rem}
.dictionary-multiple-defs{display:inline-block;margin-top:0.75rem;font-size:0.85rem;color:var(--muted);font-style:italic}

/* Dictionary modal */
.dictionary-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center}
.dictionary-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1}
.dictionary-modal-content{position:relative;background:white;border-radius:8px;max-width:700px;width:90%;max-height:80vh;overflow-y:auto;z-index:2;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.dictionary-modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:2rem;cursor:pointer;color:#666;line-height:1;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center}
.dictionary-modal-close:hover{color:#000}
.dictionary-modal-body{padding:2rem;padding-right:3rem}
.dictionary-modal-body h2{margin-top:0;color:var(--accent);font-size:1.75rem}
.dictionary-abbreviation{font-size:0.95rem;color:#666;margin-bottom:1.5rem;font-style:italic}
.dictionary-definitions{margin-bottom:1.5rem}
.dictionary-definition-item{margin-bottom:1.5rem;padding:1rem;background:#f8f9fa;border-left:4px solid var(--accent);border-radius:4px}
.dictionary-definition-text{margin-bottom:0.5rem;line-height:1.6}
.dictionary-definition-context{font-size:0.85rem;color:#666;font-style:italic}
.dictionary-related{padding-top:1rem;border-top:1px solid #ddd}
.dictionary-related h3{font-size:1rem;color:#666;margin-bottom:0.5rem}
.dictionary-related-list{display:flex;flex-wrap:wrap;gap:0.5rem;list-style:none;padding:0;margin:0}
.dictionary-related-list li{background:#e9ecef;padding:0.25rem 0.75rem;border-radius:12px;font-size:0.85rem}
.dictionary-related-term{cursor:pointer;transition:background 0.2s ease,color 0.2s ease}
.dictionary-related-term:hover{background:var(--accent);color:white}

/* Section link styles */
.section-link{color:#007bff;text-decoration:none;border-bottom:1px dotted #007bff;transition:color 0.2s ease,border-bottom-style 0.2s ease}
.section-link:hover{color:#0056b3;border-bottom-style:solid}
.section-link-todo{color:#dc3545;font-style:italic;border-bottom:1px dotted #dc3545}

/* Keyword term reference styles (dictionary inline terms) */
.keyword-term-ref{font-weight:700;color:inherit;text-decoration:none;cursor:pointer}
.keyword-term-ref:hover{text-decoration:underline}
.keyword-term-ref strong{font-weight:700}

/* Text selection context menu for comments */
.text-selection-menu{position:absolute;z-index:1001;background:white;border:1px solid #d1d5da;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:0.25rem}
.text-selection-menu button{display:block;width:100%;padding:0.5rem 1rem;background:none;border:none;cursor:pointer;text-align:left;font-size:0.875rem;color:#24292e;border-radius:4px}
.text-selection-menu button:hover{background:#f6f8fa}

/* Comment card styles (additional to component styles) */
.comment-card .comment-avatar{border-radius:50%;border:2px solid #e1e4e8}
.comment-reply .comment-avatar{border-radius:50%;border:2px solid #e1e4e8}