/* Page-scoped styles; extends global style.css */
:root{
    --surface-ink:#fff;
}
header, footer { text-align:center; margin-bottom: var(--gap); }
header h1 { font-size: 2.25rem; color: var(--accent); }
header p { font-size: 1.05rem; opacity: .9; }

.toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; margin:1rem 0; }
.toolbar .controls { display:flex; gap:.5rem; flex-wrap:wrap; }
.toolbar input[type="search"], .toolbar input[type="url"] {
    padding:.55rem .7rem; border:1px solid rgba(0,0,0,.12); border-radius:.5rem; min-width:24ch; background:var(--bg); color:var(--fg);
}
.btn { background:var(--surface); border:1px solid rgba(0,0,0,.06); border-radius:.5rem; padding:.45rem .7rem; color:var(--accent); cursor:pointer; }
.btn.primary { background:var(--button-bg); color:var(--button-fg); border:none; }
.btn.chip.active { outline:2px solid var(--accent); }

.grid { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(24ch,1fr)); }
.card { background:var(--surface); padding:var(--gap); border-radius:var(--radius); box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column; }
.card h3 { color:var(--accent); margin-bottom:.4rem; font-size:1.15rem; }
.card .mini { opacity:.75; font-size:.9rem; }
pre { background:var(--surface-ink); border-radius:.5rem; padding:.8rem; font-size:.88rem; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.badge { display:inline-block; background:rgba(25,69,99,.12); color:var(--accent); padding:.1rem .45rem; border-radius:.4rem; font-size:.8rem; margin-left:.25rem; }
.card:target { outline: 2px solid var(--accent); scroll-margin-top: 6rem; }

/* Page-specific polish for media.html */
#toolbar .chip.active{background:var(--button-bg);color:var(--button-fg);border-color:transparent}
#toolbar .controls[aria-label="External loading"]{margin-left:auto}
@media (max-width:700px){
    #toolbar{flex-direction:column;align-items:stretch}
    #toolbar .controls{justify-content:flex-start}
}

@media (max-width:600px){
    header h1{ font-size:2rem; }
}