/* Plain mirror of clacktronics.co.uk — the ClackOS look without the desktop.
 * Loaded after assets/css/clackos.css + the active theme; these overrides
 * turn the fixed desktop shell back into an ordinary scrolling document. */
html, body.plain-mirror { height: auto; overflow: auto; }
body.plain-mirror {
  background: var(--paper);
  user-select: text;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
body.plain-mirror main { flex: 1; width: 100%; }

#plain-nav {
  background: var(--ink); color: var(--menu-text);
  font-size: 13px; font-weight: 500;
  min-height: 34px;
}
.plain-menubar {
  /* 640px column + the .plain/.page side padding, so the menu titles line up
     with the text underneath them */
  max-width: 716px; margin: 0 auto; padding: 0 8px;
  display: flex; align-items: stretch;
}
.plain-menu, .plain-submenu { position: relative; }
.plain-menu summary, .plain-submenu summary {
  list-style: none; cursor: pointer; user-select: none;
}
.plain-menu summary::-webkit-details-marker,
.plain-submenu summary::-webkit-details-marker { display: none; }
.plain-menu > summary { padding: 9px 12px 8px; }
.plain-menu[open] > summary { background: var(--leaf-deep); color: var(--accent-hover); }
.plain-menu-panel {
  position: absolute; z-index: 20; top: 100%; left: 0;
  min-width: 230px; padding: 5px 0;
  background: var(--paper); color: var(--control-text);
  border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow);
}
.plain-menu-panel a, .plain-submenu > summary {
  display: block; padding: 7px 14px; color: var(--control-text);
  text-decoration: none; white-space: nowrap;
}
.plain-menu-panel a:hover, .plain-menu-panel a:focus,
.plain-submenu[open] > summary { background: var(--ink); color: var(--menu-text); }
.plain-submenu > summary::after { content: '\203a'; float: right; margin-left: 20px; }
.plain-submenu > .plain-menu-panel { top: -6px; left: 100%; }
.plain-menu-panel hr { border: 0; border-top: 1px solid var(--paper-line); margin: 5px 0; }

@media (max-width: 640px) {
  /* the panels span the bar rather than sitting under their own title, so they
     hang off the bar itself — #plain-nav has to be the containing block, or
     `top: 100%` measures against the whole page and drops them off-screen */
  #plain-nav { position: relative; }
  .plain-menu { position: static; }
  .plain-menu > .plain-menu-panel {
    left: 8px; right: 8px; min-width: 0; max-height: calc(100vh - 48px); overflow: auto;
  }
  .plain-submenu > .plain-menu-panel {
    position: static; border-width: 1px 0; box-shadow: none; margin: 0 8px 5px;
  }
  .plain-menu-panel a, .plain-submenu > summary { white-space: normal; }
}

#plain-site-footer {
  border-top: 1px solid var(--paper-line);
  padding: 14px 16px 28px; text-align: center;
  font-size: 11px; color: var(--sage);
}
#plain-site-footer a { color: var(--sage); }
#plain-site-footer a:hover { color: var(--leaf); }

.build-stamp { font-size: 11px; opacity: 0.6; }