/* What every library page shares, drawn with design system 0.3.1: the header
   (logo, the way back to the learner's crane, Menu), the crane picker
   site-shell.js renders, icons and the footer. Load it after
   design-tokens.css and design-system.css. Every control is at least
   --cq-touch (44px) on its short side; text is never under 12px; hover styles
   apply only where a pointer can hover, so a tap on a phone never leaves one
   stuck; nothing moves. */
[hidden]{display:none!important}
.cq-icon{width:1.25rem;height:1.25rem;flex:none}
.cq-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{min-height:var(--cq-touch);border-radius:var(--cq-radius-md);color:var(--cq-accent);font-weight:700}

/* ---------- header ---------- */
.cq-site-header{position:sticky;top:0;z-index:40;background:var(--cq-surface);border-bottom:1px solid var(--cq-border)}
/* What a link or the keyboard brings into view lands below the header, not
   under it: a yard task opened from the lift envelope shows its title, and a
   control reached with Shift+Tab is never hidden behind the logo. */
html{scroll-padding-top:5rem}
.cq-site-header__inner{display:flex;align-items:center;gap:.5rem;width:min(100%,var(--cq-content-max));min-height:4rem;margin-inline:auto;padding:.625rem 1.5rem}
.cq-site-brand{display:inline-flex;flex:none;align-items:center;min-height:var(--cq-touch);margin-right:auto;border-radius:var(--cq-radius-sm)}
.cq-site-brand img{display:block;width:auto;height:2.75rem}
.cq-site-back{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--cq-touch);padding:0 .625rem;border-radius:var(--cq-radius-md);color:var(--cq-accent);font-weight:700;text-decoration:none;white-space:nowrap}
.cq-site-menu{position:relative}
.cq-site-menu>summary{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--cq-touch);padding:.5rem .875rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);font-weight:700;list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.cq-site-menu>summary::-webkit-details-marker{display:none}
.cq-site-menu[open]>summary{border-color:var(--cq-accent);color:var(--cq-accent)}
.cq-site-menu__panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:50;display:grid;gap:.125rem;min-width:16rem;padding:.5rem;background:var(--cq-surface-raised);border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);box-shadow:var(--cq-shadow-md);max-height:calc(100vh - 5rem);max-height:calc(100dvh - 5rem);overflow:auto}
.cq-site-menu__panel a{display:flex;align-items:center;gap:.5rem;min-height:var(--cq-touch);padding:.5rem .75rem;border-radius:var(--cq-radius-md);color:var(--cq-text);font-weight:600;text-decoration:none}
.cq-site-menu__panel a[aria-current="page"]{background:color-mix(in srgb,var(--cq-accent) 10%,var(--cq-surface));box-shadow:inset 3px 0 0 var(--cq-accent);font-weight:750}
/* Three quiet breaks: this crane's learning, asking, the tools at the machine,
   then the way to another crane. */
.cq-site-menu__panel :is(#navAsk,#navPractice,#navCranes){position:relative;margin-top:.5rem}
.cq-site-menu__panel :is(#navAsk,#navPractice,#navCranes)::before{content:"";position:absolute;left:.75rem;right:.75rem;top:-.3125rem;border-top:1px solid var(--cq-border)}

/* ---------- crane picker ---------- */
.cq-crane-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.5rem}
.cq-crane-card{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;min-width:0;min-height:4.5rem;padding:.75rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);font:inherit;text-align:left;cursor:pointer}
.cq-crane-card__text{display:grid;gap:.125rem;min-width:0}
.cq-crane-card small{color:var(--cq-text-muted);font-size:.8125rem;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
.cq-crane-card strong{font-size:1.125rem;line-height:1.25;overflow-wrap:anywhere}
.cq-crane-card__text>span{color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.35;overflow-wrap:anywhere}
.cq-crane-card__mark{display:inline-flex;color:var(--cq-border-control)}
.cq-crane-card[aria-checked="true"]{background:color-mix(in srgb,var(--cq-accent) 10%,var(--cq-surface));border-color:var(--cq-accent);box-shadow:inset 0 -3px 0 var(--cq-accent)}
.cq-crane-card[aria-checked="true"] .cq-crane-card__mark{color:var(--cq-accent)}
.cq-crane-card[aria-checked="true"] .cq-crane-card__mark circle{fill:var(--cq-accent)}
.cq-crane-card[aria-checked="true"] .cq-crane-card__mark path{stroke:var(--cq-accent-text)}

/* ---------- footer ---------- */
.cq-site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;width:min(100%,var(--cq-content-max));margin:2rem auto 0;padding:1.25rem 1.5rem 2rem;border-top:1px solid var(--cq-border);color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.cq-site-footer a{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--cq-touch);color:var(--cq-accent);font-weight:650}

@media(hover:hover){
  .cq-site-back:hover,.cq-site-footer a:hover{text-decoration:underline}
  .cq-site-menu>summary:hover,.cq-crane-card:hover{border-color:var(--cq-accent)}
  .cq-site-menu__panel a:hover{background:color-mix(in srgb,var(--cq-accent) 8%,var(--cq-surface))}
}

/* A phone: the logo, the way back and Menu still share one row. The way back
   reads its last word, "Workspace" or "Library"; the crane's name (or
   "Crane") stays in its accessible name, and the page below names the crane.
   The Menu opens across the screen. */
@media(max-width:61.25rem){
  .cq-site-header__inner{padding-inline:1rem}
  .cq-site-footer{padding-inline:1rem}
}
@media(max-width:40rem){
  .cq-crane-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cq-crane-card{padding:.625rem}
  .cq-crane-card strong{font-size:1rem}
}
@media(max-width:30rem){
  .cq-site-header__inner{gap:.25rem;padding:.5rem 1rem}
  .cq-site-brand img{height:2rem}
  .cq-site-back{gap:.25rem;padding:0 .375rem;text-transform:capitalize}
  .cq-site-menu>summary{gap:.375rem;padding:.5rem .625rem}
  .cq-site-back__crane{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cq-site-menu{position:static}
  /* The sticky header is the panel's containing block: it opens just under it, whatever sits above. */
  .cq-site-menu__panel{top:calc(100% + .25rem);left:1rem;right:1rem;min-width:0}
}
/* Narrower than any supported phone held upright (a page zoomed in, a split
   screen): the Menu's first item is the way back, and anything that still
   does not fit wraps rather than running off the screen. */
@media(max-width:22.4375rem){
  .cq-crane-picker{grid-template-columns:minmax(0,1fr)}
  .cq-site-header__inner{flex-wrap:wrap}
  .cq-site-back{display:none}
}
/* A short screen (a phone on its side, or a page zoomed to 200%): the header
   scrolls away with the page. Held at the top it would take a sixth to a
   quarter of the screen from the drawing and the form; the Menu is at the top
   of the page. It stays the Menu's containing block. */
@media(max-height:28rem){
  .cq-site-header{position:relative}
  html{scroll-padding-top:.5rem}
}
@media(forced-colors:active){
  .cq-crane-card[aria-checked="true"]{border:3px solid Highlight}
  .cq-site-menu__panel a[aria-current="page"]{border-left:3px solid Highlight}
}
@media print{.cq-site-header,.cq-site-footer,.skip-link{display:none}}