/* Round 1, rule 5: sidebar and top bar shell.
   A 230px navy sidebar with light grey links, one amber mark, small uppercase
   section headings. A thin white top bar holds context and the current user.
   The content area fills the rest.

   The site already has two navigations that do this job: the console toolbar
   and the admin sidebar. Rather than new markup, both are reshaped here, so
   the change is a stylesheet and nothing on any page moves. */

/* ---- The top bar: white, thin, one line ---- */
.site-header { background: var(--panel); border-bottom: 1px solid var(--border); }
.site-nav { max-width: none; padding: 0 var(--gap); min-height: 2.6rem; gap: .8rem; }
.brandmark, .site-nav .wordmark { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.nav-links { font-size: .78rem; gap: .3rem .7rem; }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--text); }
/* The same control on both sides of the site. It is a form button on the
   people side and a link on the business side, and those two boxes are not the
   same size by default: a button does not inherit the page's line height and a
   link does, so the identical padding produced 23px against 27.8px. Everything
   that decides the box is stated here, so the element it is made of stops
   mattering (owner, 2026-09-23). */
.nav-links .nav-signin-btn,
.nav-signin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  line-height: 1.2;
  min-height: 1.7rem;
  font-family: inherit; font-weight: 600; letter-spacing: 0;
  font-size: .78rem; padding: .22rem .7rem; border-radius: .25rem;
  background: var(--accent);
  /* On the business side this is a link, not a form button, so it needs the
     colour said out loud: as a link it took the link blue on the blue fill and
     could barely be read. */
  color: #fff; text-decoration: none; font-weight: 600; border: 1px solid var(--accent);
  display: inline-block;
}
.nav-links .nav-signin-btn:hover,
.nav-signin-btn:hover { background: var(--accent-deep); color: #fff; }

/* Section tabs read as small uppercase items, not as a second brand bar. */
.biz-tabs { gap: 0; }
.biz-tabs a {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .5rem .6rem;
  border-bottom: 2px solid transparent;
}
.biz-tabs a.current { color: var(--text); border-bottom-color: var(--mark); background: transparent; }

/* The red test banner is a thin strip, not a shout. */
.banner { background: var(--nav); color: #e5e7eb; font-size: var(--fs-label);
          text-transform: uppercase; letter-spacing: .06em; padding: .25rem 1rem; }
.banner strong { color: var(--mark); }

/* ---- The console toolbar becomes the navy sidebar ---- */
@media (min-width: 900px) {
  body:has(.console-shell) main { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0; padding: 0; }
  .console-shell {
    margin: 0;
    grid-row: 1 / span 99;
    background: linear-gradient(180deg, var(--nav), var(--nav-2));
    min-height: calc(100vh - 2.6rem);
    padding: .7rem 0;
  }
  body:has(.console-shell) main > *:not(.console-shell) { grid-column: 2; padding-inline: var(--gap); }
  body:has(.console-shell) main > h1 { padding-top: var(--gap); }

  /* The real class names: the section list is .console-tabs, and a site's own
     sections are plain links inside .console-subbar. The first pass styled
     .console-sub-tabs, which does not exist, so the site's sections kept their
     dark-on-white colour and vanished into the navy (owner, 2026-09-23). */
  .console-shell .console-bar-inner { display: block; padding: 0 .6rem; }
  .console-toolbar, .console-subbar { background: transparent; border: 0; }
  .console-tabs { flex-direction: column; align-items: stretch; gap: 1px; overflow: visible; }
  .console-tabs a,
  .console-subbar a {
    min-height: 0; padding: .3rem .5rem; border-radius: .25rem; border: 0;
    color: #c3c9d1; font-size: var(--fs-body); display: block; font-weight: 500;
  }
  .console-tabs a:hover, .console-subbar a:hover { background: rgba(255,255,255,.07); color: #fff; }
  .console-tabs a.current, .console-subbar a.current {
    background: rgba(255,255,255,.12); color: #fff; font-weight: 600; border-bottom: 0;
  }

  /* A site's sections are a second level, indented under the section they
     belong to and introduced by their own label. */
  .console-subbar {
    margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.12);
  }
  .console-subbar a { padding-left: .8rem; font-size: var(--fs-body); }

  /* The context switcher sits at the top of the sidebar with the amber mark. */
  .ctx-switch > summary, .console-shell .ctx-switch > summary { color: #fff; padding: .4rem .5rem; border-radius: .25rem; }
  .ctx-kind { color: var(--mark); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; }
  .ctx-name { color: #fff; font-size: var(--fs-body); }
  .console-shell .account-menu summary { color: #c3c9d1; font-size: var(--fs-body); }
  .console-shell .console-role { color: #8f9aa7; font-size: var(--fs-label); }
}

/* The one solid button on a console screen is the action the screen is for. */
.console-head .btn,
.console-head > .btn:first-of-type {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.console-head .btn:hover { background: var(--accent-deep); color: #fff; }

/* A value that is copied is a field, not a banner: it stops at a readable
   width instead of running the whole monitor. */
.kv .field, .kv input[type="text"], .copy-row .field, .copy-row input[type="text"] { max-width: 42rem; }

/* ---- The admin sidebar takes the same navy ---- */
body.admin-page main { padding: 0; }
.admin-shell { grid-template-columns: 230px minmax(0, 1fr); gap: 0; padding: 0; }
.admin-nav {
  background: linear-gradient(180deg, var(--nav), var(--nav-2));
  border-right: 0;
  padding: .7rem .6rem;
  min-height: calc(100vh - 2.6rem);
}
.admin-nav-head { color: var(--mark); font-size: var(--fs-label); text-transform: uppercase;
                  letter-spacing: .06em; font-weight: 700; margin: .6rem .3rem .2rem; }
.admin-nav a { color: #c3c9d1; padding: .28rem .45rem; border-radius: .25rem; font-size: var(--fs-body); }
.admin-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav a.current { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
/* The danger link keeps its warning colour, but #b00020 on navy is a shape you
   can barely see. It goes light and reads as red on this background. */
.admin-nav a.admin-nav-danger { color: #f3a8a8; }
.admin-nav a.admin-nav-danger:hover { background: rgba(176,0,32,.35); color: #fff; }
.admin-body { padding: var(--gap); }

@media (max-width: 899px) {
  .console-shell { margin: 0 0 var(--gap); }
}