/* WorkFree enhancements: side-by-side comparison block + site search */

/* ---- Comparison "versus" table ---- */
.vs{margin:1.6rem 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(23,36,30,.06)}
.vs .vs-scroll{overflow-x:auto}
.vs table{width:100%;border-collapse:collapse;font-size:.96rem;margin:0;border:0}
.vs caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding:.8rem .95rem .45rem;background:var(--card)}
.vs th,.vs td{padding:.72rem .95rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;border-right:0;border-left:0}
.vs thead th{font-family:var(--font-display);font-size:1.05rem;font-weight:600;line-height:1.2;color:#fff;text-transform:none;letter-spacing:0;border-bottom:0}
.vs thead th.vs-label{background:var(--card);color:var(--slate);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;vertical-align:bottom}
.vs thead th.vs-a{background:var(--viridian)}
.vs thead th.vs-b{background:var(--ink)}
.vs thead th.vs-c{background:var(--signal)}
.vs.vs-3 tbody td{width:26%}
.vs.vs-3 tbody td:first-child{width:22%}
.vs tbody td{width:35%}
.vs tbody td:first-child{font-weight:600;color:var(--ink);width:30%;background:var(--paper);font-size:.9rem}
.vs tbody tr:last-child td{border-bottom:0}
.vs tbody tr:last-child{background:var(--tint)}
.vs tbody tr:last-child td:first-child{background:var(--tint)}
@media(max-width:560px){.vs thead th{font-size:.95rem}.vs th,.vs td{padding:.55rem .65rem;font-size:.86rem}.vs tbody td:first-child{font-size:.82rem}}

/* ---- Header search with autocomplete ---- */
.site-search{position:relative;margin-left:.4rem;flex:0 0 auto}
.site-search input{width:180px;max-width:42vw;padding:.42rem .85rem;border:1px solid var(--line);border-radius:20px;background:var(--card);font:inherit;font-size:.9rem;color:var(--ink);transition:width .15s ease,border-color .15s ease,box-shadow .15s ease}
.site-search input::placeholder{color:var(--slate)}
.site-search input:focus{outline:none;border-color:var(--viridian);box-shadow:0 0 0 2px var(--tint);width:230px}
.search-drop{position:absolute;top:calc(100% + 6px);right:0;width:360px;max-width:80vw;max-height:64vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(23,36,30,.18);z-index:200;padding:.3rem}
.search-drop[hidden]{display:none}
.search-drop a{display:block;padding:.5rem .6rem;border-radius:7px;text-decoration:none;color:var(--ink)}
.search-drop a .sr-t{font-weight:600;font-size:.92rem;display:block;line-height:1.25}
.search-drop a .sr-u{font-size:.71rem;color:var(--slate);font-family:var(--font-mono)}
.search-drop a:hover,.search-drop a.active{background:var(--tint)}
.search-drop .sr-empty{padding:.6rem;color:var(--slate);font-size:.88rem}
@media(max-width:820px){.site-search{order:3;width:100%;margin:.5rem 0 0}.site-search input,.site-search input:focus{width:100%;max-width:none}.search-drop{width:100%;max-width:none}}