/* Compact cards, based on the restored Club UI. Load after experience.css.
   Scoped card presentation and original-image viewer; form dialogs retain their existing layout. */

/* Preserve the restored font sizes exactly; reduce only navigation spacing. */
@media (min-width:981px) {
  .layout { grid-template-columns:230px minmax(0,1fr); }
  .sidebar { padding:14px 12px 12px; }
  .sidebar .side-title { margin:0 4px 10px; letter-spacing:.04em; }
  .sidebar .nav-list { gap:3px; }
  .sidebar .nav-btn,
  body.client-mode .sidebar .nav-btn {
    min-height:36px; margin:0; padding:7px 9px; gap:9px;
  border-radius:9px;
  }
  .sidebar .nav-label { overflow-wrap:normal; }
  .sidebar .nav-btn svg { width:18px; height:18px; flex:0 0 18px; }
  .sidebar .nav-count {  line-height:18px; }
  .sidebar .sidebar-footer { margin-top:12px; padding:8px 4px; line-height:1.4; }
  html[data-nav=compact] .layout { grid-template-columns:70px minmax(0,1fr); }
  html[data-nav=compact] .sidebar .nav-btn { min-height:36px; padding:7px 8px; }
}

/* Three-column MyCraft cover cards: crop the artwork into the card edge. */
.exercise-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px; align-items:stretch; }
.exercise-library-card.card {
  display:flex; flex-direction:column; padding:0; margin:0; gap:0; min-width:0;
  border-radius:14px; overflow:hidden; background:var(--panel,#fffdf7);
  border:1px solid var(--line,#dfded4); box-shadow:0 2px 8px #193a4905;
}
.exercise-library-card[hidden] { display:none; }
.exercise-library-card > .lesson-art,
.exercise-library-card > .exercise-art {
  position:relative; display:block; flex:none; width:100%; height:112px;
  min-height:0; max-height:112px; aspect-ratio:auto; margin:0; padding:0;
  border:0; border-radius:0; overflow:hidden; background:var(--panel3,#f5f0e5);
}
.exercise-library-card > .lesson-art img {
  display:block; width:100%; height:100%; max-height:none;
  object-fit:cover; object-position:50% 45%;
}
.card-cover-icon {
  position:absolute; top:10px; left:10px; width:36px; height:36px;
  display:grid; place-items:center; border-radius:10px; color:var(--panel,#fffdf7);
  background:var(--text,#193a49); box-shadow:0 2px 5px #0002; pointer-events:none;
}
.card-cover-icon svg { width:21px; height:21px; }
.exercise-card-content { display:flex; flex-direction:column; flex:1; align-items:flex-start; padding:16px; gap:10px; min-width:0; font-size:16px; }
.exercise-card-content > .toolbar { width:100%; margin:0; gap:6px; }
.exercise-card-content .toolbar > [data-exercise-edit] { margin-left:auto; padding:5px 8px; min-height:30px; font-size:13px; }
.exercise-card-content h3 { font-size:18px; line-height:1.3; margin:0; }
.exercise-card-content > p { font-size:16px; line-height:1.45; margin:0; }
.exercise-card-content > .exercise-prescription { font-size:14px; }
.exercise-card-content .pill { font-size:12px; line-height:18px; padding:3px 8px; }
.exercise-card-content .exercise-match { font-size:13px; line-height:1.4; }
.exercise-card-content > details { width:100%; margin-top:auto; padding:8px 0 0; }
.exercise-card-content summary { font-size:14px; cursor:pointer; padding:5px 0; }
.exercise-card-content > .btn { width:100%; min-height:40px; padding:9px 11px; font-size:14px; text-align:center; }
.exercise-card-content details .lesson-art,
.training-task .task-body .lesson-art {
  width:120px; height:120px; min-height:0; max-height:120px;
  margin:12px 0; padding:4px; border:1px solid var(--line,#dfded4);
  border-radius:10px; background:var(--panel3,#f5f0e5);
}
.exercise-card-content details .lesson-art img,
.training-task .task-body .lesson-art img {
  display:block; width:100%; height:100%; max-height:112px; object-fit:contain;
}
.exercise-card-content details .card-cover-icon,.task-body .card-cover-icon { display:none; }
.exercise-card-content .exercise-step-map { gap:8px; line-height:1.5; }
.exercise-card-content .exercise-step-map li { grid-template-columns:28px minmax(0,1fr); gap:8px; padding:9px; }
.exercise-card-content .exercise-step-number { width:26px; height:26px; }

/* Programme rows: integrated tall left-hand crop; the viewer opens the whole original. */
.training-task.task-card { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:stretch; gap:0; padding:0; border-radius:14px; overflow:hidden; }
.training-task.task-card:not(:has(> .lesson-art)):not(:has(> .exercise-art)) { display:block; }
.training-task > .lesson-art,.training-task > .exercise-art {
  position:relative; display:flex; align-items:center; justify-content:center; width:100%;
  height:100%; min-height:250px; max-height:none; padding:0; margin:0; aspect-ratio:auto; overflow:hidden;
  border:0; border-right:1px solid var(--line); border-radius:0; background:var(--panel3);
}
.training-task > .lesson-art img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center; }
.training-task .task-content { min-width:0; padding:18px; }
.training-task .task-top { gap:10px; grid-template-columns:54px minmax(0,1fr); }
.training-task .task-top h3 { line-height:1.3; margin:3px 0 7px; }
.training-task .task-top p { margin:8px 0 0; line-height:1.5; }
.training-task .task-top .eyebrow { letter-spacing:.035em; }
.training-task .date-box { min-width:0; padding:6px; }
.training-task .task-body { margin-top:10px; white-space:normal; }
.training-task .task-body > details { padding:8px 0; margin:10px 0; }
.training-task summary { padding:5px 0; cursor:pointer; }
.training-task .toolbar { margin:8px 0; gap:7px; }
.training-task .btn { min-height:36px; padding:7px 11px; }
.training-task .training-metrics { margin:12px 0; gap:12px; }
.training-task .pill { padding:3px 8px; }

/* Restore the previous compact library density and full thumbnail proportions. */
.learning-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:20px; align-items:stretch; }
.learning-card { display:flex; flex-direction:column; overflow:hidden; border-radius:12px; background:var(--panel); }
.learning-card[hidden] { display:none; }
.learning-card .learning-card-preview { position:relative; display:block; width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:4/3; flex:none; padding:0; overflow:hidden; background:var(--panel3); border:0; }
.learning-card-preview img,.learning-card-preview video { display:block; width:100%; height:100%; max-height:none; object-fit:contain; }
.learning-card-preview object { height:100%; }
.learning-card-preview .preview-play { left:50%; top:50%; transform:translate(-50%,-50%); padding:10px 15px; }
.learning-card-preview .preview-document { gap:12px; }
.learning-card-body { display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:18px; font-size:16px; }
.learning-card-body .toolbar { margin:0 0 8px; gap:6px; }
.learning-card-body .pill { font-size:12px; line-height:18px; padding:3px 8px; }
.learning-card-body h3 { font-size:18px; line-height:1.4; margin:0 0 18px; overflow-wrap:anywhere; }
.learning-card-body > .btn { width:auto; margin-top:auto; min-height:40px; padding:9px 11px; font-size:14px; }
.library-filters { display:block; }
.library-filters .field { width:min(100%,440px); }
.library-categories,.library-types { margin:10px 0; }
.library-categories [aria-pressed=true],.library-types [aria-pressed=true] { border-color:var(--accent); color:var(--accent); }
.sidebar .sidebar-footer { display:none; }
@media (min-width:761px) and (max-width:1200px) {
  .exercise-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px) {
  .mobile-nav { gap:5px; padding:5px 10px; }
  .mobile-nav .nav-btn, body.client-mode .mobile-nav .nav-btn {
    min-height:44px; padding:9px 12px; margin:0; gap:8px;
  }
  .exercise-card-content .btn, .exercise-card-content summary,
  .training-task .btn, .training-task summary, .learning-card-body > .btn {
    min-height:44px; padding-top:11px; padding-bottom:11px; box-sizing:border-box;
  }
}
@media (max-width:760px) {
  .exercise-library-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:700px) {
  .training-task.task-card { display:flex; flex-direction:column; }
  .training-task > .lesson-art,.training-task > .exercise-art { width:100%; height:190px; min-height:190px; padding:0; border-right:0; border-bottom:1px solid var(--line); }
  .training-task > .lesson-art img { width:100%; max-width:none; height:100%; object-fit:cover; }
  .training-task .task-content { padding:16px; }
}
@media (prefers-reduced-motion:no-preference) {
  .exercise-library-card, .learning-card { transition:border-color .16s ease,box-shadow .16s ease; }
  .exercise-library-card:hover, .learning-card:hover { border-color:var(--accent,#c85200); box-shadow:0 4px 14px #193a490a; }
}

/* Preserve the uploaded brand mark without clipping its irregular outer edge. */
.topbar .brand-logo,.club-brand img{object-fit:contain;border:0;border-radius:0;background:transparent;opacity:1;filter:none;flex-shrink:0;width:54px;height:54px}
@media(max-width:650px){.topbar .brand-logo,.club-brand img{width:44px;height:44px}}

/* Service preview state must win over existing flex display. */
#shop-product .shop-visual[hidden],#shop-product [data-service-image-remove][hidden]{display:none!important}

/* Card copy gets one reading-size step; navigation and page headings stay intact. */
.main :is(.card,.tool-card,.learning-card,.shop-product,.nutrition-card) { font-size:16px; }
.main .tool-card p,.main .task-body p,.main .report-folder .report-body { font-size:15px; }
#nutrition-view .nutrition-card p { font-size:15px; }
#nutrition-view .nutrition-card-lead { font-size:16px!important; }
#nutrition-view .nutrition-card summary,.main .task-card summary { font-size:14px; }
.main .shop-order details p { font-size:15px; }

/* Keep the main card action distinct from Edit and the detail disclosure. */
.exercise-card-content > [data-exercise-choice]:not([aria-pressed=true]) { background:var(--button-accent,var(--accent)); border-color:var(--button-accent,var(--accent)); color:var(--button-ink,#fff); }
body[data-theme=dark] .exercise-card-content > [data-exercise-choice]:not([aria-pressed=true]) { color:var(--bg); }

/* Original image gets the screen, not the standard 650px form dialog. */
#club-image-viewer { box-sizing:border-box; width:calc(100vw - 20px); max-width:none; height:calc(100vh - 20px); height:calc(100dvh - 20px); max-height:none; margin:auto; padding:12px; border-radius:12px; overflow:hidden; }
#club-image-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
.image-viewer-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.image-viewer-head>strong { font-size:16px; }
.image-viewer-controls { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.image-viewer-controls .btn { min-height:40px; padding:7px 12px; }
.image-viewer-controls output { min-width:48px; }
.image-viewer-stage { min-width:0; min-height:0; overflow:auto; background:var(--panel3); touch-action:pan-x pan-y pinch-zoom; }
#club-image-viewer .image-viewer-stage img { display:block; max-width:none; max-height:none; object-fit:contain; margin:auto; cursor:zoom-in; }
.image-viewer-footer .toolbar { margin:0; }
@media(max-width:650px){#club-image-viewer{width:100vw;height:100dvh;padding:8px;border-radius:0}.image-viewer-controls .btn{min-height:44px}}