/* ── shell.css — the layout of the navigator's regions; the components style themselves ──
   No colour is written here: everything is a token from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    background:  var(--rv-bg);
    color:       var(--rv-text);
    font-family: var(--rv-font);
    font-size:   var(--rv-fs);
    height:      100%;
    margin:      0;
}
body {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}
a { color: var(--rv-accent); }

.top {
    align-items:   center;
    border-bottom: 1px solid var(--rv-border);
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--rv-sp-3);
    padding:       var(--rv-sp-2) var(--rv-sp-4);
}
.top .brand          { color: var(--rv-text-heading); font-weight: 700; text-decoration: none; }
.top .brand span     { color: var(--rv-accent); }
.top .title          { color: var(--rv-text-muted); font-family: var(--rv-mono); }
.top .set {
    background:    var(--rv-accent-subtle);
    border-radius: var(--rv-radius-pill);
    color:         var(--rv-accent);
    font-size:     var(--rv-fs-xs);
    padding:       2px var(--rv-sp-3);
}
.top .crumb          { flex: 1; min-width: 12rem; }
.top .version {
    border:          1px solid var(--rv-border);
    border-radius:   var(--rv-radius-pill);
    font-family:     var(--rv-mono);
    font-size:       var(--rv-fs-xs);
    padding:         2px var(--rv-sp-3);
    text-decoration: none;
}
.top .back           { color: var(--rv-text-muted); font-size: var(--rv-fs-small); }

.layout {
    display:               grid;
    flex:                  1;
    gap:                   0;
    grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr);
    min-height:            0;
}
.centre, .right {
    min-height: 0;
    overflow:   auto;
    padding:    var(--rv-sp-4);
}
.right { border-left: 1px solid var(--rv-border); }

.bottom {
    border-top: 1px solid var(--rv-border);
    color:      var(--rv-text-muted);
    font-size:  var(--rv-fs-small);
    padding:    var(--rv-sp-2) var(--rv-sp-4);
}
.bottom p { margin: 0; }

@media (max-width: 860px) {
    .layout { grid-template-columns: 1fr; }
    .right  { border-left: 0; border-top: 1px solid var(--rv-border); }
}