/* Page-specific styles of the knowledge base and the admin screens. Tokens, header, buttons, forms and tables are in brand.css. */
.qr svg{width:12rem;height:12rem}

/* Pages (canvas: Pages, Page, Search, Workbench) */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.row.spread{justify-content:space-between}
.row h1{margin:0}
.stack{display:grid;gap:12px}
.stack>h1,.stack>p{margin:0}
.cardgrid{display:grid;gap:12px;align-content:start;max-width:none}
.cardgrid h2,.cardgrid h3,.cardgrid p{margin:0}
.grid2,.grid3,.cols{display:grid;gap:24px;align-items:start}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:768px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:768px){.grid3,.grid2{grid-template-columns:minmax(0,1fr)}}
ul.list.plain{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.list.plain li{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0}
.cap{color:var(--muted);font-size:14px;line-height:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:var(--ctl-touch);padding:0 16px;border:2px solid var(--line);border-radius:var(--radius-pill);background:var(--white);color:var(--ink);text-decoration:none;font:500 16px/24px var(--font)}
.chip:hover{background:var(--surface)}
.chip[aria-current]{background:var(--violet-tint);border-color:var(--violet);font-weight:700}
/* pills: tint plus an edge; brand fills only where ink text passes (lime) */
.pill{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border:2px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:700 14px/20px var(--font);white-space:nowrap}
.pill.l{background:var(--lime-tint);border-color:var(--lime)}
.pill.o{background:var(--orange-tint);border-color:var(--orange)}
.pill.v{background:var(--violet-tint);border-color:var(--violet)}
.pill.d{background:var(--danger-tint);border-color:var(--danger)}
.page-body{background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:32px;margin:0;overflow-x:auto}
.page-body{display:grid;gap:16px;align-content:start}
.page-body>*{margin:0}
.page-body h2{margin-top:12px}
.page-body ul,.page-body ol{padding-left:1.4em;display:grid;gap:8px}
.page-body table{width:auto}
.page-body th,.page-body td{border:1px solid var(--line)}
.page-body img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.decision{max-width:none}
.searchbar{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:16px;align-items:end}
@media (max-width:768px){.searchbar{grid-template-columns:minmax(0,1fr)}}
.results{border:2px solid var(--line);border-radius:var(--radius-lg);background:var(--white);overflow:hidden}
.result{display:grid;gap:4px;padding:16px 20px;border-bottom:2px solid var(--line);color:inherit;text-decoration:none}
.result:last-child{border-bottom:0}
a.result:hover{background:var(--surface)}
.rmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:14px;line-height:20px}
.rtitle{font:500 20px/28px var(--font);color:var(--link)}
.rtext{color:var(--ink)}
.kbd{display:inline-block;padding:0 8px;border-radius:8px;background:var(--surface);color:var(--muted);font:500 14px/22px var(--font)}
.rowform{grid-template-columns:auto auto auto;justify-content:start;align-items:end;max-width:none}
@media (max-width:768px){.rowform{grid-template-columns:minmax(0,1fr)}}
.wideform{max-width:none}
mark{background:var(--lime);color:var(--ink);padding:0 .15em;border-radius:4px}
.diff{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:1rem;white-space:pre-wrap}
.diff-added{background:var(--lime-tint);display:block}
.diff-removed{background:var(--danger-tint);display:block;text-decoration:line-through}
.diff-same{display:block}

/* Small helpers for forms */
input.narrow,main input.narrow{width:6rem}
form.filter{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.5rem 0 1rem}
form.filter select{width:auto;min-width:14rem}

/* Rights and settings screens (slice 5) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tablewrap{overflow-x:auto;margin:.5rem 0 1rem}
table.matrix{border-collapse:collapse;width:100%}
table.matrix th,table.matrix td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left;vertical-align:middle}
table.matrix thead th{background:var(--line)}
table.matrix td input[type=checkbox]{width:1.25rem;height:1.25rem}
table.matrix td:has(input[type=checkbox]){text-align:center}
ul.list{list-style:none;padding:0;display:grid;gap:.5rem}
.card ul{list-style:none;padding:0;margin:.3rem 0}
.card .errorlist{color:var(--bad)}

/* Home (canvas: Main) */
.card.hi{border-color:var(--lime);background:var(--lime-tint)}
.hm-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px}
.hm-more{display:inline-flex;align-items:center;min-width:40px;min-height:40px;color:var(--link);font-weight:500}
.hm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hm-stats .cap{overflow-wrap:anywhere}
.cardgrid,.homecols>*{min-width:0}
.hm-stats>div{display:grid;gap:2px;padding:12px 16px;background:var(--surface);border-radius:var(--radius-md)}
.hm-stats b{font:700 32px/40px var(--font)}
.homecols{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:768px){.homecols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.hm-stats{gap:8px}.hm-stats>div{padding:8px 12px}.hm-stats b{font-size:24px;line-height:32px}}

main>.stack:not(:has(*)){display:none}
.cardgrid .pill{justify-self:start}

.top12{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:end}
@media (max-width:768px){.top12{grid-template-columns:minmax(0,1fr)}}

.row.tight{gap:12px}
.empty{margin:0;padding:12px 20px;border:2px dashed var(--field-edge);border-radius:var(--radius-lg);color:var(--muted)}