/* The practice workspace, the visual learning lab and the crane intake: what
   they add to library.css, drawn with design system 0.3.1. No colour is
   written here. Every control is at least --cq-touch (44px); no text is under
   13px; hover only where a pointer can hover; nothing moves. */

/* ---------- intro ---------- */
.practice-page .intro{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;max-width:56rem;padding:1.5rem 0 1rem}
.practice-page .intro h1{font-size:clamp(2rem,4.2vw,3rem);letter-spacing:-.03em}
.practice-page .intro .eyebrow{margin:0}
.lead{max-width:44rem;color:var(--cq-text-muted);font-size:1.0625rem;line-height:1.6}
.practice-cranes,.crane-switch{margin:0 0 1.25rem}

/* ---------- views: one row of buttons that says which is open ---------- */
.workspace-tabs{display:flex;flex-wrap:wrap;gap:.375rem;margin:.5rem 0 0;padding-bottom:.75rem;border-bottom:1px solid var(--cq-border)}
.workspace-tabs button,.view-controls button,.choice-grid button,.control-choice,#caseNav button,.answer{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;text-align:left;cursor:pointer}
.workspace-tabs button[aria-pressed=true],.view-controls button[aria-pressed=true],.choice-grid button[aria-pressed=true],.control-choice[aria-pressed=true],#caseNav button[aria-pressed=true]{border-color:var(--cq-accent);background:color-mix(in srgb,var(--cq-accent) 12%,var(--cq-surface));box-shadow:inset 0 -3px 0 var(--cq-accent);color:var(--cq-text)}
.panel>p,.visual-card>p{max-width:50rem;margin-bottom:.75rem;color:var(--cq-text-muted)}
.panel>h2{margin-bottom:.5rem}

/* ---------- forms ---------- */
.practice-page :is(select,textarea,input[type=text],input[type=url],input[type=date],input:not([type])){display:block;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}
.practice-page textarea{resize:vertical}
.practice-page input[type=file]{max-width:100%;min-height:var(--cq-touch);font:inherit}
.practice-page label small,.config-row small,.form-grid small{display:block;margin-top:.25rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm);font-weight:400}
.practice-page main details{margin-top:1rem}
.practice-page main summary{display:flex;align-items:center;min-height:var(--cq-touch);font-weight:700;cursor:pointer}
.panel form .cq-button{margin-top:1rem}
.stack{display:grid;gap:.75rem;margin-bottom:1.5rem}

/* ---------- practice: the operator station ---------- */
.atlas{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(16rem,1fr);gap:1.5rem}
.diagram{position:relative;border:1px solid var(--cq-border);background:var(--cq-white)}
.diagram>img{display:block;width:100%;height:auto}
.marker{position:absolute;display:grid;place-items:center;width:var(--cq-touch);height:var(--cq-touch);padding:0;transform:translate(-50%,-50%);border:3px solid var(--cq-white);border-radius:50%;background:var(--cq-accent);color:var(--cq-accent-text);font:inherit;font-weight:800;box-shadow:var(--cq-shadow-md);cursor:pointer}
.marker[aria-pressed=true]{background:var(--cq-text);color:var(--cq-surface)}
.control-choice{width:100%}
#photoPreview{display:block;width:100%;max-width:45rem;margin-top:1rem}
.note-body,.source-snippet,.task a{overflow-wrap:anywhere}
.video-note{margin-top:.5rem}

/* ---------- practice: decisions ---------- */
#caseNav{margin:1rem 0}
.answer{display:block;width:100%;margin:.625rem 0}
.answer:disabled{opacity:.7;cursor:default}
.feedback{margin:1rem 0;padding:1rem;border-left:4px solid var(--cq-accent);border-radius:0 var(--cq-radius-md) var(--cq-radius-md) 0;background:color-mix(in srgb,var(--cq-accent) 7%,var(--cq-surface))}
.feedback.correct{border-color:var(--cq-success);background:color-mix(in srgb,var(--cq-success) 8%,var(--cq-surface))}
.feedback p{margin-top:.375rem}

/* ---------- practice: configuration and the field notebook ---------- */
.config-row{display:grid;grid-template-columns:1fr 1fr;gap:.625rem 1.5rem}
.config-row h3{grid-column:1/-1}
.config-row label{margin:0}
.field-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;margin:1rem 0}
#printCard{display:none}

/* ---------- visual learning lab ---------- */
.visual-card{margin-bottom:1.5rem;padding:1.5rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.visual-card h2{margin:.25rem 0 .75rem;font-size:clamp(1.375rem,2.4vw,1.75rem)}
.visual-card h3{margin:.75rem 0 .5rem;font-size:1.125rem}
.visual-card .eyebrow{margin:0}
.visual-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.5rem}
.visual-layout>*{min-width:0}
.visual-layout figure{margin:0}
.render{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:var(--cq-radius-md);background:var(--cq-canvas)}
.visual-card figcaption{padding:.625rem 0;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.6}
.source-view{display:block;width:100%;height:20rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-md);background:var(--cq-white)}
.view-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.choice-grid{display:grid;gap:.625rem;max-width:53rem}
#transfer{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--cq-border)}
#shots li{margin-bottom:.75rem}
#viewCaption{min-height:3em}
.visual-page #photoPreview{max-height:25rem;object-fit:contain;background:var(--cq-canvas)}

/* ---------- crane intake ---------- */
.workspace-bar{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem;margin-bottom:1rem}
.workspace-bar>label:first-child{flex:1;min-width:min(100%,15rem);margin:0}
.workspace-bar select{margin-top:.5rem}
.file-button{position:relative;margin:0}
.file-input{position:absolute;width:1px;height:1px;opacity:0}
.file-button:focus-within{outline:3px solid var(--cq-focus);outline-offset:3px}
#notice{min-height:2.5rem;padding:.75rem 0}
#draftTitle{margin-top:1.75rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.5rem;margin:1.5rem 0}
.form-grid label,.task-binding label{margin:0}
.wide{grid-column:1/-1}
.source-meta{font-size:var(--cq-type-sm);overflow-wrap:anywhere}
.source-meta code{white-space:normal;word-break:break-all}
.task-binding{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.task-binding .wide{grid-column:1/-1}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.readiness-item{border-left:4px solid var(--cq-warning)}
.readiness-item.ready{border-left-color:var(--cq-success)}
.intake-table{width:100%;margin:1.25rem 0;border-collapse:collapse}
.intake-table th,.intake-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--cq-border)}
.export-note{color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
#readinessPrint{display:none}
.practice-page button:disabled{opacity:.55;cursor:not-allowed}

@media(hover:hover){
  :is(.workspace-tabs button,.view-controls button,.choice-grid button,.control-choice,#caseNav button,.answer):hover{border-color:var(--cq-accent)}
}
@media(max-width:50rem){
  .atlas,.config-row,.visual-layout{grid-template-columns:minmax(0,1fr)}
  .visual-card{padding:1rem}
  .source-view{height:18rem}
}
@media(max-width:40.625rem){
  .form-grid,.task-binding,.status-grid{grid-template-columns:minmax(0,1fr)}
  .workspace-bar .cq-button{flex:1}
  .intake-table td,.intake-table th{padding:.5rem}
  /* The six views and five steps: two even columns of full-width buttons. */
  .workspace-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-tabs button{text-align:center}
}
/* Narrower than any phone held upright (a page zoomed to 200%): the lab's card
   gives its width to the view buttons, so "Crane superstructure" stays on the
   screen, and a word longer than the screen wraps rather than pushing it wider. */
@media(max-width:22.4375rem){
  .workspace-tabs{grid-template-columns:minmax(0,1fr)}
  .visual-card{padding:.75rem .5rem}
  .view-controls button{max-width:100%;padding-inline:.5rem;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
}
@media(forced-colors:active){
  :is(.workspace-tabs button,.view-controls button,.choice-grid button,.control-choice,#caseNav button,.marker)[aria-pressed=true]{border:3px solid Highlight}
}
@media print{
  .cq-site-header,.cq-site-footer,.skip-link{display:none!important}
  .activities-page :is(.intro,.workspace-tabs,.boundary,.panel:not(#field),#field>p,#field>label,#fieldTask,.field-links,#fieldForm,#saveStatus,.resource-links,#noteList){display:none!important}
  .activities-page #field{display:block!important}
  #printCard{display:block}
  #qrImage{width:11.25rem}
  #qrURL{overflow-wrap:anywhere}
  body{background:var(--cq-white)}
  .library-page main{padding:0}
  .visual-page :is(.crane-switch,.view-controls,button,input){display:none!important}
  .visual-card{break-inside:avoid;padding:.75rem;border:0}
  .intake-page :is(.intro,.workspace-bar,#start,#notice,#draftTitle,.workspace-tabs,.panel,#readinessSummary,.resource-links){display:none!important}
  .intake-page :is(#workspace,#readiness,#readinessPrint){display:block!important}
}