/* Googlenium User Guide — styles */
:root{
  --g-yellow:#f1c843;
  --g-amber:#f7b561;
  --g-ink:#2b2b2b;
  --g-ink2:#555;
  --g-bg:#faf8f4;
  --g-card:#ffffff;
  --g-line:#e7e1d5;
  --g-green:#2e7d32;
  --g-red:#c62828;
  --g-blue:#1565c0;
  --g-side:#26241f;
  --g-side-txt:#d8d2c4;
  --g-side-hover:#3a372f;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--g-bg);color:var(--g-ink);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:16px;line-height:1.65;
}
a{color:var(--g-blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Top bar */
.topbar{position:sticky;top:0;z-index:50;background:var(--g-side);color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:58px}
.topbar .logo{color:var(--g-yellow);font-weight:800;font-size:20px;letter-spacing:.5px;white-space:nowrap}
.topbar .logo b{color:#fff}
.topbar .logo img{height:38px;width:auto;display:block}
.topbar .tag{color:var(--g-side-txt);font-size:13px}
.topbar .spacer{flex:1}
.topbar a.tlink{color:#fff;font-size:14px;opacity:.9}
.topbar a.tlink:hover{opacity:1;text-decoration:underline}

/* Layout: sidebar + content */
.layout{display:flex;gap:0;align-items:flex-start}
aside.toc{
  width:290px;flex:0 0 290px;position:sticky;top:58px;height:calc(100vh - 58px);
  overflow:auto;padding:22px 14px 60px;background:#fff;border-right:1px solid var(--g-line);
}
aside.toc .toc-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--g-ink2);margin:6px 8px}
aside.toc a{display:block;color:var(--g-ink);padding:7px 10px;border-radius:8px;font-size:14.5px}
aside.toc a:hover{background:#faF1d8;text-decoration:none}
aside.toc a.grp{font-weight:700;color:var(--g-ink);margin-top:10px}
aside.toc a.sub{padding-left:24px;font-size:13.5px;color:var(--g-ink2)}
aside.toc a.active{background:var(--g-yellow);color:#222;font-weight:600}
aside.toc a.videolink{display:flex;align-items:center;gap:9px;margin-top:26px;padding:11px 14px;
  background:var(--g-side);color:#fff;font-weight:600;font-size:15px;text-align:left;
  border:none;cursor:pointer;transition:background .15s}
aside.toc a.videolink:hover{background:var(--g-side-hover);text-decoration:none}
aside.toc a.videolink .vico{font-size:3em;line-height:1}

main{flex:1;min-width:0;padding:30px 34px 120px}
main > section{margin-bottom:64px}
h1.page{font-size:34px;margin:0 0 8px;color:var(--g-ink);letter-spacing:.3px}
h2{font-size:26px;color:var(--g-ink);margin:0 0 14px;padding-bottom:8px;border-bottom:3px solid var(--g-yellow)}
h3{font-size:20px;color:var(--g-ink);margin:26px 0 10px}
h4{font-size:17px;color:var(--g-ink);margin:20px 0 8px}
.lede{font-size:17px;color:var(--g-ink2);margin-top:0}
p{margin:10px 0}
ul,ol{margin:10px 0;padding-left:24px}
li{margin:6px 0}
code{background:#f1ede3;border:1px solid var(--g-line);padding:1px 6px;border-radius:5px;font-size:14px;
  font-family:Consolas,"SFMono-Regular",Menlo,monospace;color:#8a3ffc;word-break:break-word}
.small{font-size:13.5px;color:var(--g-ink2)}

/* Cards / boxes */
.card{background:var(--g-card);border:1px solid var(--g-line);border-radius:12px;padding:20px 22px;margin:16px 0;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tile{background:var(--g-card);border:1px solid var(--g-line);border-radius:12px;padding:18px 20px;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tile h4{margin-top:0}
.tile .ico{font-size:26px;line-height:1}
.tile .ico svg{width:30px;height:30px;vertical-align:middle}
.tile p{margin:8px 0 0;color:var(--g-ink2);font-size:14.5px}

.callout{border-left:5px solid var(--g-yellow);background:#fffdf5;border-radius:0 10px 10px 0;padding:14px 18px;margin:16px 0}
.callout .h{font-weight:700;display:flex;gap:8px;align-items:center;margin-bottom:4px}
.tip{border-left-color:var(--g-green);background:#f3faf3}
.warn{border-left-color:var(--g-red);background:#fdf3f3}
.info{border-left-color:var(--g-blue);background:#f2f7fd}
.tip .h{color:var(--g-green)} .warn .h{color:var(--g-red)} .info .h{color:var(--g-blue)}
.yell .h{color:#a37b00}

/* Page block (one admin page) */
.pageblock{background:var(--g-card);border:1px solid var(--g-line);border-radius:14px;padding:24px 26px;margin:22px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.05);page-break-inside:avoid}
.pageblock > h3{display:flex;align-items:baseline;gap:10px;margin-top:0}
.pageblock > h3 .pg{font-weight:800;color:var(--g-ink)}
.pageblock > h3 .url{font-size:13px;color:var(--g-ink2);font-weight:400;font-family:Consolas,monospace}
.badge{display:inline-block;background:#efe9da;color:#6b5d3a;border:1px solid var(--g-line);border-radius:999px;
  padding:1px 10px;font-size:12.5px;font-weight:600;margin-right:6px}
.badge.act{background:var(--g-yellow);color:#3a2f00;border-color:#e4c03d}
.purpose{color:var(--g-ink2);margin:2px 0 14px;font-size:15px}

/* Field table */
table.f{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
table.f th{text-align:left;background:#f6f2e8;color:var(--g-ink);padding:9px 12px;border:1px solid var(--g-line);
  font-size:13px;text-transform:uppercase;letter-spacing:.6px}
table.f td{padding:9px 12px;border:1px solid var(--g-line);vertical-align:top}
table.f tr:nth-child(even) td{background:#fcfaf5}
label.f{font-weight:600;white-space:nowrap}

/* Steps */
ol.steps{counter-reset:step;list-style:none;padding-left:0}
ol.steps>li{counter-increment:step;position:relative;padding:8px 0 8px 46px;margin:0}
ol.steps>li::before{content:counter(step);position:absolute;left:0;top:6px;width:30px;height:30px;border-radius:50%;
  background:var(--g-yellow);color:#3a2f00;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
ol.steps>li b{color:var(--g-ink)}
.kbd{display:inline-block;border:1px solid #cfc7b4;border-bottom-width:2px;border-radius:6px;background:#fff;
  padding:1px 8px;font-size:13px;font-family:Consolas,monospace;color:var(--g-ink)}
.arrow{color:var(--g-amber);font-weight:700;padding:0 4px}

/* Feature intro cards */
.feature{border:1px solid var(--g-line);background:var(--g-card);border-radius:14px;padding:20px 22px;margin:14px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.05)}
.feature .ft{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.feature .ft .ico{font-size:30px}
.feature .ft h3{margin:0;font-size:20px}

/* TOC anchor offset for sticky header */
[id]{scroll-margin-top:76px}

/* Print */
@media print{
  .topbar,aside.toc{display:none}
  main{padding:0}
  .pageblock{break-inside:avoid}
  body{background:#fff}
}
/* Responsive */
@media (max-width:900px){
  .topbar .tag,.topbar a.tlink{display:none}
  .topbar .wrap{gap:14px}
  .layout{flex-direction:column}
  aside.toc{width:100%;flex:none;position:static;height:auto;border-right:none;border-bottom:1px solid var(--g-line)}
  main{padding:22px 18px 80px}
}