.search-shell{max-width:840px}
/* The reader view needs more room than search results do, to fit a sidebar
   beside the 680px reading column - search.js toggles this class exactly
   when the reader is shown, rather than widening the whole search page. */
.search-shell.is-reading{max-width:1060px}
.search-hero{padding-top:8px}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 17px;border:1px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);text-decoration:none;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.button-primary{background:var(--ink);color:var(--white)!important}
.button-primary:hover{background:var(--emerald);border-color:var(--emerald)}
.search-bar{display:flex;gap:10px;margin-top:34px}
.search-bar input{flex:1;min-height:52px;border:1px solid #adb2aa;background:var(--white);padding:0 16px;border-radius:3px;font-size:16px}
.search-bar .button{min-height:52px;padding:0 22px}
.search-bar input:focus{outline:2px solid var(--emerald);outline-offset:1px}
.type-filter{display:flex;gap:6px;margin-top:16px}
.type-option{border:1px solid var(--rule);background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:650;padding:7px 14px;border-radius:20px;cursor:pointer}
.type-option:hover{color:var(--ink);border-color:#adb2aa}
.type-option.is-active{background:var(--ink);border-color:var(--ink);color:var(--white)}
.usage-line{margin:10px 2px 0;color:var(--muted);font-size:13px}
.search-status{margin-top:28px;color:var(--muted);font-size:15px}
.search-status.is-error{color:#8a2f22}

.result-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--rule)}
.result-row{padding:26px 0;border-bottom:1px solid var(--rule)}
.result-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 6px}
.result-heading h3{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:21px;letter-spacing:-.02em;margin:0}
.result-citation{color:var(--emerald);font-size:13px;font-weight:650}
.result-meta{color:var(--muted);font-size:13px;margin:0 0 10px}
.result-snippet{margin:0 0 14px;color:#3d443e;max-width:680px}
.result-snippet mark{background:#d9ecc9;color:inherit;padding:0 1px}
.result-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.result-actions button{border:0;background:transparent;padding:0;font:inherit;font-weight:700;color:var(--emerald);cursor:pointer}
.result-actions button:hover{color:var(--ink)}
.result-actions a{font-size:14px;color:var(--muted);text-decoration:none}
.result-actions a:hover{color:var(--ink)}

.limit-banner{margin-top:20px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.limit-banner p{margin:0 0 14px;color:#3d443e}
.limit-actions{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.limit-actions a.quiet{display:inline-flex;align-items:center;text-decoration:none;font-weight:700;color:var(--emerald)}

.reader-view{padding-top:8px;animation:reader-in .18s ease-out}
@keyframes reader-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.reader-view{animation:none}}
.reader-back{border:0;background:transparent;padding:0;font:inherit;font-size:14px;font-weight:650;color:var(--muted);cursor:pointer;margin-bottom:22px}
.reader-back:hover{color:var(--ink)}
.reader-status{color:var(--muted)}
.reader-article h1{font-size:clamp(32px,5vw,44px);max-width:100%}
.reader-meta{color:var(--muted);font-size:14px;margin:14px 0 0}
.reader-actions{margin-top:16px;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.reader-actions .inline-link{color:var(--emerald);font-weight:700;text-decoration:none;border:0;background:transparent;padding:0;font-size:inherit;cursor:pointer}
.reader-actions .inline-link:hover{color:var(--ink)}
.signed-in-note{margin:10px 2px 0;color:var(--muted);font-size:13px}
.signed-in-note a{color:var(--emerald);text-decoration:none}
.reader-main{min-width:0}
.reader-outline{margin-top:24px;max-width:680px}
.reader-outline summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink);padding:12px 0;border-top:1px solid var(--rule);list-style:none;display:flex;align-items:center;gap:6px}
.reader-outline summary::-webkit-details-marker{display:none}
.reader-outline summary::after{content:"▸";font-size:11px;color:var(--muted)}
.reader-outline[open] summary::after{content:"▾"}
.reader-outline-list{max-height:340px;overflow-y:auto;padding:4px 0 6px;border-bottom:1px solid var(--rule)}
.reader-outline-list button{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--muted);padding:6px 0 6px 0;cursor:pointer}
.reader-outline-list button:hover{color:var(--emerald)}
.reader-outline-list .level-0{font-weight:700;color:var(--ink);margin-top:8px}
.reader-outline-list .level-1{padding-left:16px}

/* On wide viewports the outline becomes a persistent right-hand sidebar that
   stays in view (and scrolls independently) as the reader scrolls through a
   long statute, instead of a collapsible block that scrolls away with the
   text above the body. Narrower viewports keep today's inline collapsible -
   there isn't room for a fixed side column there. */
@media (min-width: 900px){
  .reader-article{display:flex;align-items:flex-start;gap:56px}
  .reader-main{flex:1 1 680px}
  .reader-outline{flex:0 0 260px;margin-top:0;max-width:260px;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;padding-right:2px}
  .reader-outline summary{border-top:0}
  .reader-outline-list{max-height:none;overflow-y:visible;border-bottom:0}
}
.reader-body{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.75;color:#20261f;max-width:680px;scroll-behavior:smooth}
.reader-body [id]{scroll-margin-top:16px}
.reader-body p{margin:0 0 20px}
/* Kenya Law's AKN markup wraps every paragraph of substantive text in
   <span class="akn-p"> rather than a <p> (a subsection/paragraph marker like
   "(1)" or "(a)" is a preceding sibling <span class="akn-num">), so left at
   their default inline display these ran together as one continuous block -
   most visibly in Interpretation/definitions sections, where a dozen defined
   terms would otherwise read as a single run-on sentence. */
.reader-body .akn-p{display:block;margin:0 0 10px}
.reader-body .akn-num{margin-right:.4em}
/* akn-paragraph ("(a)"/"(b)") nests inside akn-subsection ("(1)"/"(2)"), and
   akn-subparagraph (roman numerals) nests inside that again - without an
   indent step per level every one of those sat flush left, so "(a)" read as
   a sibling of "(1)" instead of a child of it. Margins on nested block
   elements compound through the DOM, so the same flat indent on both
   classes still produces the right progressive depth. */
.reader-body .akn-paragraph,
.reader-body .akn-subparagraph,
.reader-body .akn-hcontainer{margin-left:26px}
.reader-footnote{color:var(--muted);font-size:13px}
.reader-footnote .inline-link{color:var(--emerald);text-decoration:none}

@media(max-width:640px){
  .search-bar{flex-direction:column}
  .search-bar button{min-height:48px}
}