/* The library home and a crane's workspace, drawn with design system 0.3.1
   (design-tokens.css, design-system.css) and the shared parts in
   site-shell.css. No colour is written here: every one is a --cq-* token.
   Every control is at least --cq-touch (44px); no text is under 13px; hover
   styles only where a pointer can hover; nothing moves.

   The OEM page beside a crane is shown as it is printed, dark on white: a
   scan turned into light lines on a dark board is harder to read in sun and
   no longer looks like the page it came from. */
.library-page main{width:min(100%,var(--cq-content-max));margin-inline:auto;padding:0 1.5rem}
:where(.library-page) :where(h1,h2,h3){margin:0;line-height:var(--cq-line-heading);overflow-wrap:break-word}
:where(.library-page) :where(p){margin:0}
.eyebrow{margin:0 0 .5rem;color:var(--cq-text-muted);font-size:.8125rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.boundary{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--cq-border);color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.6}
.library-page .cq-button .cq-icon:last-child:not(:first-child){margin-left:auto}
.library-page :is(input[type=search],input[type=number]){width:100%;min-height:3rem;padding:.625rem .75rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);font:inherit;font-size:1rem;font-weight:400}
.library-page label{display:block;margin:1rem 0 .5rem;font-weight:650}
/* A link that leaves for its own page: words, then a drawn icon. */
.out-link{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--cq-touch);color:var(--cq-accent);font-weight:700}

/* ---------- progress ---------- */
.progress{display:flex;align-items:center;gap:.75rem;margin:.875rem 0;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.progress-track{flex:1;height:.5rem;overflow:hidden;border-radius:var(--cq-radius-pill);background:var(--cq-border)}
.progress-track i{display:block;height:100%;background:var(--cq-success)}
.progress-history{color:var(--cq-text-muted);font-size:var(--cq-type-sm)}

/* ---------- the OEM page beside a crane ---------- */
.blueprint{display:flex;flex-direction:column;gap:.5rem;min-width:0;margin:0;padding:.875rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.blueprint-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 .75rem;color:var(--cq-text-muted);font-size:.8125rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.blueprint>svg{display:block;width:100%;height:20rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-md);background:var(--cq-white)}
.blueprint figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 .75rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}

/* ---------- home: welcome ---------- */
.welcome{display:flex;justify-content:space-between;align-items:end;gap:1rem 2.5rem;padding:2rem 0 1.5rem}
.welcome h1{font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.03em}
.welcome h1 span{color:var(--cq-accent)}
.welcome-copy{max-width:24rem;color:var(--cq-text-muted);line-height:1.6}
.welcome-copy strong{color:var(--cq-text)}

/* ---------- home: the cranes ---------- */
.fleet{scroll-margin-top:5rem}
.fleet>h2{margin-bottom:.75rem;font-size:var(--cq-type-lg)}
.fleet-selector{margin-bottom:1rem}
.fleet-selector.cq-crane-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.selected-crane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.5rem;padding:1.5rem;border:1px solid var(--cq-border);border-top:4px solid var(--cq-accent);border-radius:var(--cq-radius-lg);background:var(--cq-surface);box-shadow:var(--cq-shadow-sm)}
.selected-crane.is-empty{display:block;border-top-width:1px;border-style:dashed}
.selected-crane.is-empty p:not(.eyebrow){font-size:var(--cq-type-lg)}
.machine-intro{display:flex;flex-direction:column;gap:.75rem;min-width:0;max-width:30rem}
.machine-intro h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em}
.machine-intro .eyebrow{margin:0}
.machine-intro>p:not(.eyebrow){color:var(--cq-text-muted);line-height:1.6}
.machine-intro>p.next-lesson{color:var(--cq-text);font-weight:650}
.machine-intro>.cq-button{justify-content:flex-start;width:100%;min-height:3.25rem;font-size:1.0625rem}
.workspace-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.workspace-shortcuts .cq-button{justify-content:flex-start}
.workspace-shortcuts a:last-child:nth-child(odd){grid-column:1/-1}
.machine-intro .progress{margin:0}
.workspace-stats{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.workspace-stats strong{margin-right:.25rem;color:var(--cq-text);font-size:var(--cq-type-lg)}
.workspace-link{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--cq-touch);color:var(--cq-accent);font-weight:700}

/* ---------- home: how learning works ---------- */
.method-strip{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:1.5rem 2.5rem;padding:3rem 0 0}
.method-strip h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em}
.method-strip ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.5rem;margin:0;padding:0;list-style:none}
.method-strip li{padding-top:.875rem;border-top:1px solid var(--cq-border-control)}
.method-strip li>span{color:var(--cq-text-muted);font-size:.8125rem;font-weight:750;letter-spacing:.08em}
.method-strip h3{margin:.5rem 0 .375rem;font-size:1.0625rem}
.method-strip p{color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.6}

/* ---------- a crane's workspace: heading ---------- */
.crane-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;padding:1.5rem 0 1rem}
.dashboard-intro{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.dashboard-intro .eyebrow{margin:0}
.crane-heading h1{font-size:clamp(2.25rem,4.5vw,3.5rem);letter-spacing:-.03em}
.crane-heading .lead{max-width:32rem;color:var(--cq-text-muted);font-size:1.0625rem;line-height:1.6}
.crane-heading>p{color:var(--cq-text-muted)}
.continue-card{display:flex;flex-direction:column;gap:.5rem;max-width:32rem;padding:1.25rem;border:1px solid var(--cq-border);border-top:4px solid var(--cq-accent);border-radius:var(--cq-radius-lg);background:var(--cq-surface);box-shadow:var(--cq-shadow-sm)}
.continue-card .eyebrow{margin:0}
.continue-card h2{font-size:var(--cq-type-lg)}
.continue-card p:not(.eyebrow){color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.continue-card .progress{margin:.25rem 0}
.continue-card>.cq-button{justify-content:flex-start;min-height:3.25rem;font-size:1.0625rem}

/* ---------- a crane's workspace: the action tiles ---------- */
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.75rem;margin:0 0 1.5rem}
.quick-action{display:flex;align-items:center;gap:.75rem;min-height:4.5rem;padding:.75rem 1rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-lg);background:var(--cq-surface);color:var(--cq-text);text-decoration:none}
.quick-action__icon{display:grid;flex:none;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--cq-radius-md);background:color-mix(in srgb,var(--cq-accent) 10%,var(--cq-surface));color:var(--cq-accent)}
.quick-action>span:not(.quick-action__icon){min-width:0;overflow-wrap:anywhere}
.quick-action strong,.quick-action small{display:block}
.quick-action strong{font-size:1rem;line-height:1.3}
.quick-action small{margin-top:.125rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.35}
.quick-action>.cq-icon{margin-left:auto;color:var(--cq-accent)}

/* ---------- a crane's workspace: tabs ---------- */
/* The tab bar holds under the header; html's scroll-padding counts both. */
.dashboard-page{--tab-bar:3.25rem}
html:has(.dashboard-page){scroll-padding-top:calc(5rem + var(--tab-bar))}
.tabs{position:sticky;top:4rem;z-index:30;display:flex;gap:.25rem;overflow-x:auto;margin-top:.5rem;border-bottom:1px solid var(--cq-border);background:var(--cq-canvas);scrollbar-width:none}
.tabs button{flex:none;min-height:var(--tab-bar);padding:.5rem 1rem;border:0;border-bottom:3px solid transparent;background:none;color:var(--cq-text-muted);font:inherit;font-weight:700;cursor:pointer}
.tabs button[aria-selected=true]{border-bottom-color:var(--cq-accent);color:var(--cq-accent)}
.tabs button:focus-visible{outline-offset:-3px}
.panel{padding:1.5rem 0;scroll-margin-top:calc(5rem + var(--tab-bar))}
.panel>h2,.panel .section-title h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:.75rem 2rem;margin-bottom:1rem}
.section-title>p{max-width:22rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}

/* ---------- learning path ---------- */
.module-row{display:grid;grid-template-columns:2.75rem minmax(0,1fr) auto;align-items:center;gap:1rem;margin:.625rem 0;padding:1rem 1.25rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.module-number{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:color-mix(in srgb,var(--cq-accent) 10%,var(--cq-surface));color:var(--cq-accent);font-weight:750;font-variant-numeric:tabular-nums}
.module-row h3{margin-bottom:.25rem;font-size:1.0625rem}
.module-row p{color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.row-status{display:inline-flex;align-items:center;gap:.25rem;margin-top:.25rem;color:var(--cq-success);font-size:var(--cq-type-sm);font-weight:650}

/* ---------- find a task ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.chips button{min-height:var(--cq-touch);padding:.5rem 1rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-pill);background:var(--cq-surface);color:var(--cq-text);font:inherit;font-weight:650;cursor:pointer}
.chips button[aria-pressed=true]{border-color:var(--cq-accent);background:var(--cq-accent);color:var(--cq-accent-text)}
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:.75rem}
.task{display:flex;flex-direction:column;gap:.5rem;padding:1.125rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.task .unit{color:var(--cq-text-muted);font-size:.8125rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.task h3{font-size:1.0625rem}
.task p{color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.task p.hold{color:var(--cq-warning);font-weight:650}
.task-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:auto}
.task-actions a{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--cq-touch);color:var(--cq-accent);font-weight:700}
.save{display:inline-flex;align-items:center;gap:.375rem;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:inherit;font-weight:650;cursor:pointer}
.save[aria-pressed=true]{border-color:var(--cq-success);color:var(--cq-success)}
.empty{grid-column:1/-1;padding:1.5rem;border:1px dashed var(--cq-border-control);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.empty h3{margin-bottom:.25rem}

/* ---------- source library ---------- */
.resource-note{max-width:50rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.resource-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.manual-study-details summary{display:flex;align-items:center;min-height:var(--cq-touch);color:var(--cq-accent);font-weight:700;cursor:pointer}
.manual-browser{margin:1.5rem 0 2rem;padding:1.25rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.manual-summary{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem}
.manual-summary h3{margin-bottom:.25rem;font-size:var(--cq-type-lg)}
.manual-summary p:not(.eyebrow){color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.manual-tools{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:0 1.5rem}
.page-jump{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.page-jump a[aria-disabled=true]{opacity:.55;pointer-events:none}
#manualPageError{color:var(--cq-danger);font-size:var(--cq-type-sm);font-weight:650}
.manual-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:.875rem 0}
.manual-page{display:block;min-width:0;padding:1rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);text-decoration:none;overflow-wrap:anywhere}
.manual-page>span{display:block;margin-bottom:.375rem;color:var(--cq-text-muted);font-size:.8125rem;font-weight:750;letter-spacing:.08em}
.manual-page strong{display:inline-flex;align-items:center;gap:.375rem;color:var(--cq-accent)}
.manual-page p{margin-top:.5rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.5}
.featured-pages{padding-top:1rem;border-top:1px solid var(--cq-border)}
.featured-pages h3{margin-bottom:.5rem;font-size:var(--cq-type-lg)}
.source-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:.75rem;margin-top:1rem}
.source{display:flex;flex-direction:column;padding:0;overflow:hidden;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}
.source img{display:block;width:100%;height:11rem;object-fit:cover;object-position:top;background:var(--cq-canvas)}
.source span{display:block;padding:.75rem;font-size:var(--cq-type-sm);line-height:1.4}
.source strong{display:block;margin-bottom:.25rem}

/* A link straight to "Open manual" opens the compact reader: the crane's name
   above the tabs and the page index under them. A tab tap restores the page. */
body[data-entry=manual][data-library-view=resources] .crane-heading{display:block;padding:1rem 0 .5rem}
body[data-entry=manual][data-library-view=resources] .crane-heading h1{font-size:clamp(1.75rem,4vw,2.375rem)}
body[data-entry=manual][data-library-view=resources] :is(.crane-heading .lead,.crane-heading .continue-card,.crane-heading .blueprint,.quick-actions){display:none}
body[data-entry=manual][data-library-view=resources] .panel{padding-top:1rem}
body[data-entry=manual][data-library-view=resources] .manual-browser{margin-top:.75rem}

/* ---------- the source page ---------- */
#sourceDialog{width:min(62.5rem,96vw);max-width:none;max-height:92vh;max-height:92dvh;padding:0;border:0;border-radius:var(--cq-radius-lg);background:var(--cq-surface);color:var(--cq-text);box-shadow:var(--cq-shadow-lg)}
#sourceDialog::backdrop{background:color-mix(in srgb,var(--cq-text) 70%,transparent)}
.dialog-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1rem;border-bottom:1px solid var(--cq-border);background:var(--cq-surface)}
.dialog-bar button{display:inline-grid;flex:none;place-items:center;min-width:var(--cq-touch);min-height:var(--cq-touch);border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);cursor:pointer}
.dialog-body{padding:.875rem 1rem}
.dialog-body p{margin-bottom:.5rem;font-size:var(--cq-type-sm)}
.dialog-body .out-link{margin:0 1.25rem .5rem 0}
.dialog-body img{display:block;width:100%;height:auto;border:1px solid var(--cq-border)}

@media(hover:hover){
  .quick-action:hover,.source:hover,.manual-page:hover,.chips button:hover,.save:hover{border-color:var(--cq-accent)}
  .workspace-link:hover,.task-actions a:hover,.out-link:hover{text-decoration:underline}
  .tabs button:not([aria-selected=true]):hover{color:var(--cq-text)}
}

@media(max-width:61.25rem){
  .library-page main{padding:0 1rem}
  .fleet-selector.cq-crane-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .selected-crane,.crane-heading,.method-strip{grid-template-columns:minmax(0,1fr)}
  .manual-results{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:40rem){
  .welcome{display:block;padding:1.5rem 0 1rem}
  .welcome h1{font-size:2.5rem}
  .welcome-copy{margin-top:.75rem}
  .selected-crane{padding:1rem}
  .blueprint>svg{height:15rem}
  .method-strip ol{grid-template-columns:minmax(0,1fr)}
  .section-title{display:block}
  .module-row{grid-template-columns:2.75rem minmax(0,1fr);padding:.875rem}
  .module-row>.cq-button{grid-column:1/-1}
  .manual-summary{display:block}
  .manual-summary .cq-button{margin-top:.75rem}
  .manual-tools,.manual-results{grid-template-columns:minmax(0,1fr)}
  .source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The three tabs share the width, so none is off the edge of a phone. */
  .tabs{gap:0}
  .tabs button{flex:1 1 0;min-width:0;padding:.5rem .25rem;font-size:.9375rem;line-height:1.25}
  /* One shortcut per row: a full-width target for a thumb, its words on one line. */
  .workspace-shortcuts{grid-template-columns:minmax(0,1fr)}
  .workspace-shortcuts a:last-child:nth-child(odd){grid-column:auto}
}
/* Narrower than any phone held upright (a page zoomed in): one column. */
@media(max-width:22.4375rem){
  .fleet-selector.cq-crane-picker,.workspace-shortcuts,.source-grid{grid-template-columns:minmax(0,1fr)}
  .workspace-shortcuts a:last-child:nth-child(odd){grid-column:auto}
  .page-jump{grid-template-columns:minmax(0,1fr)}
}
/* A short screen: the header scrolls away (site-shell.css), so the tabs hold at the top. */
@media(max-height:28rem){
  .tabs{top:0}
  html:has(.dashboard-page){scroll-padding-top:calc(.5rem + var(--tab-bar))}
}
@media(forced-colors:active){
  .tabs button[aria-selected=true]{border-bottom-color:Highlight}
  .chips button[aria-pressed=true],.save[aria-pressed=true]{border:3px solid Highlight}
}
@media print{.tabs,.quick-actions,.chips{display:none}}