/* Shared screen rhythm. Report typography and print geometry stay independent. */
@media screen {
  :root { --control-height:46px; --control-radius:10px; --panel-radius:16px; }
  #app, #app :is(.panel,.card,.grid,.insight-grid,.title)>*, dialog .formgrid>* { min-width:0; }
  #app .title { margin-bottom:24px; gap:16px; }
  #app .title .eyebrow { display:none; }
  #app h1, dialog:not(.report-dialog) h1 { line-height:1.45; letter-spacing:-.025em; }
  #app :is(.panel,.card) { border-radius:var(--panel-radius); }
  #app :is(.panelhead,.record-row), dialog:not(.report-dialog) .panelhead { gap:16px; }
  #app .panelhead>h2, dialog:not(.report-dialog) .panelhead>h2 { margin:0; }
  :is(#app,dialog:not(.report-dialog)) :is(.primary,.secondary) { min-height:var(--control-height); border-radius:var(--control-radius); line-height:1.5; font-weight:600; }
  :is(#app,dialog:not(.report-dialog)) button.link { min-height:36px; padding:6px 2px; line-height:1.5; }
  :is(#app,dialog) button:disabled { cursor:default; }
  :is(#app,dialog,aside,#mobileNav) :is(button,summary) svg { display:block; flex-shrink:0; }
  :is(#app,dialog:not(.report-dialog)) .formgrid { gap:20px; align-items:start; }
  :is(#app,dialog:not(.report-dialog)) .stackform { gap:20px; }
  :is(#app,dialog:not(.report-dialog)) :is(input,select,textarea) { border-radius:var(--control-radius); }
  :is(#app,dialog) :is(.formerror,.notice,.prewrap,.detailgrid) { overflow-wrap:anywhere; }
  :is(#app,dialog) .formerror:empty { display:none; }
  :is(#app,dialog) .actions { gap:12px; }
  :is(#app,dialog) :is(.soft-tabs,.studio-tabs,.dossier-tabs,.segmented) button { font-family:inherit; font-weight:600; line-height:1.5; }
  #app .card .value { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  #app .tablewrap { overscroll-behavior-x:contain; }
  #app .tablewrap :is(td,th) { line-height:1.6; }
  #app .tablewrap .empty { padding:28px 16px; }
  main>header { margin-bottom:8px; }
  main>.demo { padding:0; margin:0 0 4px; line-height:1.6; }
  #vaultStatus { gap:8px 16px; min-height:44px; padding:4px 0 10px; margin-bottom:24px; align-items:center; }
  #vaultStatus>button { min-height:36px; padding:6px 4px; }
  #app .vault-panel { margin-bottom:24px; }
  #app .period { gap:16px; padding:18px; }
  #app .sales-filter select { width:100%; }
  #app .customer-filters .plan-select-button { min-height:48px; padding:10px 32px 10px 12px; font-size:14px; line-height:26px; }
  #app .customer-filters .plan-select-button:after { right:13px; }
  #app .customer-filters .filters { align-items:start; }
  #app .customer-filters .filters:nth-child(2) { align-items:center; }
  .dossier-dialog>.panelhead>div:first-child { flex:1; min-width:0; }
  .dossier-dialog>.panelhead>[data-close] { flex:0 0 auto; }
  dialog .dialog-heading { align-items:center; margin-bottom:24px; }
  dialog .dialog-heading>:is(h1,h2) { margin:0; flex:1; min-width:0; }
  dialog .dialog-heading>[data-close] { flex-shrink:0; }
  .group-heading>div:first-child { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; }
  .group-heading .exercise-number { margin:0; }
  .group-heading .method-badge { line-height:28px; overflow-wrap:anywhere; }
  .group-heading p { grid-column:1/-1; margin:0; }
  :is(#app,dialog) .remove-group { white-space:nowrap; gap:7px; flex-shrink:0; }
  :is(#app,dialog) .remove-group:hover { color:#84252d; border-color:#c6a09d; background:#fbf3f1; }
  :is(#app,dialog) .exercise-order button { min-width:44px; padding:8px; }
  :is(#app,dialog) .cycle-heading .link { flex-shrink:0; }
  :is(#app,dialog) .library-row>div { min-width:0; }
  :is(#app,dialog) .library-row :is(b,strong) { overflow-wrap:anywhere; }
  :is(#app,dialog) .routine-card { border-color:var(--ui-line); background:#fff; }
  #trainingReport { color:#30322f; }
  #trainingReport .report-goal { background:#f7f5f0; border-color:#e1ddd5; }
  #trainingReport .report-goal.celebration { background:#faf4df; }
  #trainingReport .report-goal-values b { color:#30322f; }
  #trainingReport :is(.goal-report-caption,.report-goal-values span,.report-goal small) { color:#6b6b63; }
  #trainingReport .report-progress { background:#e5ded2; }
  #trainingReport .report-progress span { background:#8a7058; }
  #trainingReport .report-comment { background:#f7f5f0; border-left:3px solid #84252d; border-radius:0 10px 10px 0; }
  #trainingReport .report-comment p { color:#30322f; }
  #trainingReport th { background:#f7f5f0; color:#65655d; }
  #trainingReport .workout-report-table td { border-color:#e9e5de; }
  @media(max-width:1100px),(any-pointer:coarse) {
    aside:not(.menu-open) { min-height:88px; padding:12px 16px; }
    aside .brand { padding:0; }
    aside .brand-crop { width:78px; height:auto; }
    main>header { height:32px; margin-bottom:6px; }
    :is(#app,dialog:not(.report-dialog)) button.link { min-height:44px; }
    :is(#app,dialog:not(.report-dialog)) :is(input,select,textarea):not([type=checkbox]):not([type=radio]) { font-size:16px; }
    :is(#app,dialog) .exercise-order button { min-height:44px; }
  }
  @media(max-width:650px) {
    #app .tablewrap td[data-label], dialog:not(.report-dialog) .tablewrap table:not(#bodyCompareTable) td[data-label] { padding:12px 0 12px 39%; min-height:44px; }
    #app .tablewrap td[data-label]::before, dialog:not(.report-dialog) .tablewrap table:not(#bodyCompareTable) td[data-label]::before { top:12px; line-height:1.6; }
    #app .tablewrap td[colspan], dialog:not(.report-dialog) .tablewrap td[colspan] { padding:20px 8px; }
    main { padding-top:12px; }
    main>.demo { font-size:11px; margin-bottom:0; }
    #vaultStatus { font-size:11px; margin-bottom:20px; padding-bottom:8px; }
    #vaultStatus>button { font-size:11px; }
    #app .title { gap:14px; margin-bottom:20px; }
    #app .topactions { margin:0; width:100%; }
    #app .topactions button { padding:10px 12px; font-size:13px; }
    #app .card { padding:18px; }
    #app .card:first-child { padding-top:16px; }
    #app .card .value { font-size:clamp(20px,5.7vw,28px); }
    #app .card label { line-height:1.6; }
    #app .period { padding:16px; gap:14px; }
    #app .period .period-mode { grid-column:1/-1; }
    #app .period .segmented { box-sizing:border-box; }
    #app .sales-filter { margin:20px 0!important; gap:14px; }
    #app .sales-filter label { min-width:0; }
    #app .customer-filters .filters:first-child { gap:12px; }
    #app .customer-filters .plan-select-button { font-size:14px; }
    :is(#app,dialog:not(.report-dialog)) .formgrid { gap:18px; }
    dialog:not(.report-dialog) .form-section { gap:18px; }
    :is(#app,dialog) .group-heading { gap:12px; margin-bottom:20px; }
    :is(#app,dialog) .group-heading>div:first-child { flex-basis:100%; }
    :is(#app,dialog) .group-heading>.remove-group { width:auto; min-height:44px; padding:10px 14px; }
    .dossier-dialog>.panelhead { align-items:center; gap:12px; }
    .dossier-dialog>.panelhead [data-close] { padding:10px 14px; }
    .report-actions { flex-wrap:wrap; }
    .report-actions button { min-height:44px; }
    #app .insight-filters { gap:14px 12px; }
    #app .insight-filters>button { grid-column:1/-1; justify-self:start; }
  }
  @media(min-width:380px) and (max-width:650px) {
    #app .period { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #app .period :is(input,select) { padding-left:10px; }
  }
  @media(max-width:379px) {
    #app .customer-filters .filters:first-child { grid-template-columns:minmax(0,1fr); }
    #app .topactions { flex-direction:column; }
    #app .topactions>button { width:100%; flex:auto; }
    #app .insight-filters { grid-template-columns:minmax(0,1fr); }
  }
}

/* On small screens the compact status stays above the work, not over the next set. */
@media screen and (max-width:1100px), screen and (any-pointer:coarse) {
  #app .studio-bottom[hidden] { display:none; }
  #app>.studio-status { position:sticky; top:0; z-index:40; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; min-height:64px; padding:8px 10px; margin:0 -4px 18px; border:1px solid #ded7ca; border-radius:12px; background:#fffefa; box-shadow:0 3px 10px #30322f0a; }
  #app>.studio-status .studio-progress { display:grid; gap:2px; }
  #app>.studio-status .studio-volume { display:flex; flex-wrap:wrap; gap:2px 5px; white-space:normal; }
  #app>.studio-status .studio-volume small { font-size:10px; }
  #app>.studio-status .studio-volume strong { font-size:17px; }
  #app>.studio-status #workoutCount { display:flex; flex-wrap:wrap; gap:0 7px; font-size:10px; line-height:1.4; }
  #app>.studio-status .rest-timer { display:grid; justify-items:center; gap:0; padding:3px 5px; font-size:13px; }
  #app>.studio-status .rest-timer output { min-width:0; }
  #app>.studio-status #studioStop { min-height:44px; min-width:44px; font-size:12px; }
  #app>.studio-status #studioStop:disabled { display:none; }
  #app>.studio-status .rest-timer.is-running { display:flex; gap:4px; }
  .studio-tools { position:static; }
  .studio-tools>summary { list-style:none; display:flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; min-width:48px; min-height:44px; font-size:12px; font-weight:600; color:#6b6b63; border:1px solid #e1ddd5; border-radius:8px; }
  .studio-tools>summary::-webkit-details-marker { display:none; }
  .studio-tools[open]>summary { color:#84252d; background:#fbefed; border-color:#dfbdbb; }
  #app .studio-tools .studio-actions { position:absolute; top:calc(100% + 6px); right:0; left:0; padding:12px; display:grid; grid-template-columns:1fr; gap:10px; background:#fff; border:1px solid #ded7ca; border-radius:12px; box-shadow:0 8px 24px #30322f20; }
  #app .studio-tools .studio-actions #studioPDF { width:100%; }
  #app .studio-tools .session-end-actions { width:100%; display:flex; gap:10px; }
  #app .studio-tools .studio-actions button { font-size:13px; min-height:46px; flex:1; }
  html:has(.studio-status) { scroll-padding-top:100px; scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  #studioWorkout :is(input,textarea,button) { scroll-margin-top:100px; scroll-margin-bottom:calc(90px + env(safe-area-inset-bottom)); }
}
@media screen and (max-width:359px) {
  #app>.studio-status { gap:4px; padding:6px; }
  #app>.studio-status .studio-volume small { display:none; }
  #app>.studio-status .studio-volume strong { font-size:16px; }
  #app>.studio-status .rest-timer { font-size:12px; padding:2px; }
}
@media print { #app>.studio-status { display:none!important; } }
@media screen and (max-width:500px) {
  :is(#app,dialog) :is(.set-entry.workout-set,.drop-stages .workout-set,.cycle-member-set>.workout-set) { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px 8px; padding:12px; }
  :is(#app,dialog) .set-entry>.set-index { grid-column:1/-1; justify-self:start; line-height:18px; }
  :is(#app,dialog) .set-entry.workout-set>label { grid-column:span 2; font-size:11px; }
  :is(#app,dialog) .set-entry.workout-set:is([data-field-count="2"],[data-field-count="4"])>label { grid-column:span 3; }
  :is(#app,dialog) .set-entry.workout-set[data-field-count="1"]>label { grid-column:1/-1; }
  :is(#app,dialog) .set-entry.workout-set .set-checks { grid-column:1/4; display:flex; gap:12px; justify-self:start; align-self:center; }
  :is(#app,dialog) .set-entry.workout-set .set-checks label { display:flex!important; flex-direction:row; gap:6px; align-items:center; font-size:11px; }
  :is(#app,dialog) .set-entry.workout-set .set-check-control { height:44px; }
  :is(#app,dialog) .set-entry.workout-set>.set-timer { grid-column:4/6; justify-self:center; width:44px; min-height:44px; }
  :is(#app,dialog) .set-entry.workout-set>.remove-set { grid-column:6; justify-self:end; width:44px; min-height:44px; }
  #studioWorkout .set-entry.workout-set>label>input { min-height:46px; font-size:16px; padding:10px 7px; }
}
/* Optional definitions stay available without competing with the work area. */
.context-help{margin:14px 0;color:#6b6b63;font-size:13px}
.context-help>summary{width:fit-content;min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:600;line-height:1.5}
.context-help>p,.context-help>.notice{margin:4px 0 12px;line-height:1.7}
.context-help>summary:focus-visible{outline:2px solid #84252d;outline-offset:3px;border-radius:4px}
#restAlarm{width:max-content;max-width:calc(100vw - 32px);min-width:0;padding:10px 12px 10px 16px;gap:20px;justify-content:center;border-radius:16px;background:#fffdf9;color:#30322f;border:1px solid #e4ded4;box-shadow:0 12px 40px #30322f1f}
#restAlarm>div{display:flex;align-items:center;gap:10px}
#restAlarm .alarm-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#f4e9e8;color:#84252d}
#restAlarm strong{font-size:15px;font-weight:600;letter-spacing:.03em;white-space:nowrap}
#restAlarm button{min-width:60px;min-height:44px;padding:10px 12px;background:transparent;color:#84252d;border:0;border-radius:8px;box-shadow:none;font-weight:600}
#restAlarm button:hover{background:#f3f0eb}
#restAlarm::backdrop{background:#30322f14;backdrop-filter:none}

/* Icon controls use geometry, not the font baseline, for consistent centering. */
:is(#app,dialog) :is(.set-timer,.remove-set,button:has(>.control-icon)) {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:8px; line-height:1;
  vertical-align:middle;
}
:is(#app,dialog) :is(.set-timer,.remove-set,button:has(>.control-icon))[hidden] { display:none; }
.control-icon { display:block; flex:0 0 20px; width:20px; height:20px; }
.favorite-toggle[aria-pressed=true] .control-icon { fill:currentColor; }
#restAlarm .alarm-icon svg { display:block; }
#restAlarm button { position:relative; }
#restAlarm button::before { content:""; position:absolute; left:-10px; top:10px; bottom:10px; width:1px; background:#e8e2d9; pointer-events:none; }
#restAlarm button:focus-visible { outline:none!important; background:#f7f2ec; }
#restAlarm button:focus-visible::after {
  content:""; position:absolute; inset:4px;
  border:1.5px solid #84252d; border-radius:6px; pointer-events:none;
}

:is(#app,dialog) .time-trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; }
.time-chevron { display:block; flex:0 0 16px; }

#dateCalendar .calendar-controls>button { flex:0 0 44px; width:44px; padding:8px; }

/* Center both the timer readout and its action; make hover/press feedback explicit. */
#app .studio-status .rest-timer { justify-content:center; }
#app .studio-status .rest-timer output { text-align:center; }
:is(#app,dialog) .rest-timer button {
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center; border-radius:8px;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
:is(#app,dialog) .rest-timer button:not(:disabled):is(:hover,:focus-visible) { background:#ead3d0; color:#6d1b25; }
:is(#app,dialog) .rest-timer button:not(:disabled):active { background:#84252d; color:#fff; box-shadow:inset 0 1px 2px #00000020; }
@media screen and (max-width:1100px), screen and (any-pointer:coarse) {
  #app>.studio-status .rest-timer { padding-inline:7px; }
  #app>.studio-status .rest-timer output { padding-inline:3px; }
}

/* Independent records, with an even five-tab rhythm on small screens. */
.dossier-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.dossier-tabs button{min-width:0;padding-inline:8px}
@media(max-width:500px){dialog:not(.report-dialog) .dossier-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:4px}.dossier-tabs button{padding:10px 1px!important;font-size:11px!important;white-space:nowrap;line-height:1.4}}
.note-card .note-links:empty,.note-card .attachments:empty{display:none}
.note-card .panelhead{margin-bottom:10px}
.note-card>.prewrap{margin:14px 0 18px}
@media(max-width:360px){dialog:not(.report-dialog) .dossier-tabs{grid-template-columns:repeat(5,max-content);overflow-x:auto}.dossier-tabs button{padding-inline:10px!important}}