/* Interface styles — Ad Blocker Premium documentation
   Conventions: single type family, regular-weight headings, sentence case,
   hairline borders, flat brand-coloured actions, 4px/8px radii, elevation shadows. */

:root{
  --brand:#0E7BC0;
  --brand-dark:#0A5C90;
  --ink:#202124;
  --ink-2:#3c4043;
  --muted:#5f6368;
  --hairline:#dadce0;
  --hairline-soft:#f1f3f4;
  --surface:#f8f9fa;
  --surface-2:#f1f3f4;
  --tint-blue:#e8f0fe;
  --tint-blue-ink:#174ea6;
  --e1:0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --e2:0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  font:400 16px/1.6 Roboto, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-dark); text-decoration:underline}
.mark{display:block; flex:none}
.muted{color:var(--muted)}
.small{font-size:14px}
.note{margin:16px 0 0}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--hairline)}
.header-inner{max-width:1220px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:10px; flex:none; color:var(--ink)}
.brand:hover{text-decoration:none; color:var(--ink)}
.brand-name{font-size:17px}
.accent{color:var(--brand)}
.brand-suffix{font-size:13px; color:var(--muted); border-left:1px solid var(--hairline); padding-left:10px}
.search{flex:1; max-width:420px; margin-right:auto}
.header-end{margin-left:auto}
.field{
  width:100%; font:400 14px/1.4 inherit; font-family:inherit; color:var(--ink);
  padding:9px 14px; border:1px solid var(--hairline); border-radius:4px; background:#fff;
}
.field:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}

/* Buttons */
.btn{
  display:inline-block; border:none; border-radius:4px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:.25px;
  padding:9px 18px; color:#fff;
}
.btn-primary{background:var(--brand); box-shadow:var(--e1)}
.btn-primary:hover{background:var(--brand-dark); box-shadow:var(--e2); color:#fff; text-decoration:none}

/* Shell */
.shell{
  max-width:1220px; width:100%; margin:0 auto; padding:0 24px; flex:1;
  display:grid; grid-template-columns:236px 1fr; gap:48px; align-items:start;
}
.sidebar{position:sticky; top:73px; padding:28px 0 40px; display:flex; flex-direction:column; gap:22px}
.nav-group{display:flex; flex-direction:column; gap:2px}
.nav-label{font-size:12px; font-weight:500; color:var(--muted); padding:0 12px 6px}
.nav-item{font-size:14px; color:var(--ink-2); padding:8px 12px; border-radius:4px; line-height:1.35}
.nav-item:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.nav-item.is-active{background:var(--tint-blue); color:var(--tint-blue-ink); font-weight:500}
.content{padding:32px 0 72px; min-width:0; max-width:760px}

/* Type */
h1{font-weight:400; font-size:clamp(28px,3.4vw,38px); letter-spacing:-.25px; line-height:1.2; margin:0 0 8px}
h2{font-size:20px; font-weight:500; margin:36px 0 12px}
h2:first-of-type{margin-top:32px}
.meta{font-size:14px; color:var(--muted); margin:0 0 28px}
.lede{font-size:16px; line-height:1.7; color:var(--ink-2); margin:0 0 16px}
kbd{font-family:'Roboto Mono', monospace; font-size:13px; background:var(--surface-2); border-radius:4px; padding:3px 7px}
code{font-family:'Roboto Mono', monospace; font-size:13px}

/* Tables */
table{width:100%; border-collapse:collapse; margin:0 0 12px}
th{text-align:left; font-size:13px; font-weight:500; color:var(--muted); padding:0 16px 10px 0; border-bottom:1px solid var(--hairline)}
td{font-size:15px; line-height:1.6; color:var(--ink-2); padding:14px 16px 14px 0; border-bottom:1px solid var(--hairline-soft); vertical-align:top}
th:last-child, td:last-child{padding-right:0}
.spec th[scope=row]{
  width:200px; font-size:15px; font-weight:400; color:var(--muted);
  padding:14px 16px 14px 0; border-bottom:1px solid var(--hairline-soft);
}
.col-format{width:190px} .col-mech{width:180px} .col-list{width:250px}
.col-refresh{width:150px} .col-control{width:210px} .col-symptom{width:280px}

/* Panels */
.panel{background:var(--surface); border:1px solid var(--hairline); border-radius:8px; padding:16px 18px}
.panel p{margin:0; line-height:1.6; color:var(--ink-2)}
.panel-split{
  background:#fff; padding:20px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.panel-split p{flex:1; min-width:220px; font-size:15px}

/* Lists */
.link-list{list-style:none; margin:0; padding:0}
.link-list li{padding:14px 0; border-bottom:1px solid var(--hairline-soft); display:flex; flex-direction:column; gap:4px}
.link-list a{font-size:16px}
.link-list span{font-size:14px; color:var(--muted)}

/* Search results */
.results{display:flex; flex-direction:column}
.result{padding:16px 0; border-bottom:1px solid var(--hairline-soft); display:flex; flex-direction:column; gap:4px}
.result-section{font-size:12px; color:var(--muted)}
.result-title{font-size:16px}
.result-body{font-size:14px; line-height:1.6; color:var(--muted)}

/* Prose (legal) */
.prose{font-size:15px; line-height:1.7; color:var(--ink-2)}
.prose h2{font-size:18px; font-weight:500; color:var(--ink); margin:26px 0 6px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px}

/* Landing page (site root).
   Warmer than the documentation views — more air, a larger mark, one clear
   action — but the same tokens: one type family, regular-weight headings,
   sentence case, hairlines, flat brand actions. No gradients, no tinted
   feature panels, no uppercase eyebrows. */
.welcome{max-width:1120px; width:100%; margin:0 auto; padding:0 24px; flex:1}
.greet{
  display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:56px;
  align-items:center; padding:72px 0 64px;
}
.greet h1{font-size:clamp(30px,4vw,44px); line-height:1.15; margin:0 0 16px; max-width:22ch}
.greet p{font-size:17px; line-height:1.7; color:var(--ink-2); margin:0 0 26px; max-width:56ch}
.greet .btn{font-size:15px; padding:12px 24px}
.greet-note{font-size:14px; color:var(--muted); margin:14px 0 0}
.greet-art{display:flex; justify-content:center}
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  padding:36px 0; border-top:1px solid var(--hairline);
}
.card{display:flex; flex-direction:column; gap:8px}
.card h2{font-size:17px; font-weight:500; margin:0}
.card p{font-size:15px; line-height:1.6; color:var(--ink-2); margin:0}
.closing{
  border-top:1px solid var(--hairline); padding:44px 0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.closing h2{font-size:clamp(21px,2.4vw,26px); font-weight:400; margin:0 0 6px}
.closing p{font-size:15px; color:var(--muted); margin:0}
.pointer{padding:0 0 64px; font-size:15px; color:var(--muted)}

/* Status and feedback pages (install success, uninstall feedback).
   The handoff covers the documentation views only; these two are required by the
   backend, so they are built from the same tokens — hairlines, 4px/8px radii,
   flat brand actions, sentence case. No new colours are introduced. */
.standalone{max-width:720px; margin:0 auto; padding:40px 24px 72px; width:100%}
.status{
  display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:8px; padding:12px 16px;
  font-size:14px; font-weight:500; color:var(--ink); margin:0 0 16px;
}
.status::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); flex:none}
.block{background:#fff; border:1px solid var(--hairline); border-radius:8px; padding:22px; margin:0 0 16px}
.block h1{margin:0 0 10px}
.block h2{font-size:18px; font-weight:500; margin:0 0 8px}
.block > p{margin:0 0 14px}
.block > p:last-child{margin-bottom:0}
.callout{background:var(--surface); border:1px solid var(--hairline); border-radius:8px; padding:14px 16px; font-size:14px; line-height:1.6}
.pairs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pairs li{border:1px solid var(--hairline-soft); border-radius:8px; padding:14px}
.pairs b{display:block; font-size:15px; font-weight:500; color:var(--ink); margin-bottom:4px}
.pairs span{font-size:14px; color:var(--muted); line-height:1.55}
.choices{border:0; margin:0 0 16px; padding:0; min-width:0; display:flex; flex-direction:column}
.choices label{display:flex; align-items:center; gap:10px; padding:8px 0; cursor:pointer; font-size:15px; color:var(--ink-2)}
.choices input[type=radio]{accent-color:var(--brand); width:16px; height:16px; flex:none; margin:0}
textarea.field{resize:vertical; line-height:1.6; margin-bottom:16px}
.done{font-size:16px; font-weight:500; color:var(--brand); margin:0}
.support{text-align:center; font-size:14px; color:var(--muted); padding-top:4px}
.support b{display:block; color:var(--ink); font-weight:500; margin-bottom:4px}

/* Footer */
.site-footer{background:var(--surface); border-top:1px solid var(--hairline)}
.footer-inner{
  max-width:1220px; margin:0 auto; padding:24px; display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.footer-legal{font-size:13px; color:var(--muted)}
.footer-links{display:flex; gap:20px}
.footer-links a{font-size:13px; color:var(--muted)}

@media (max-width:900px){
  .greet{grid-template-columns:1fr; gap:32px; padding:48px 0 32px}
  .greet-art{display:none}
  .cards{grid-template-columns:1fr; gap:22px}
  .welcome{padding-left:18px; padding-right:18px}
}
@media (max-width:560px){
  .pairs{grid-template-columns:1fr}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr; gap:0}
  .sidebar{position:static; padding:20px 0 0; flex-direction:row; flex-wrap:wrap; gap:16px}
  .content{padding-top:24px}
  .header-inner{flex-wrap:wrap}
  .search{order:3; max-width:none; flex-basis:100%}
}