.workout {
    max-width: 80ch;
}

details.set input,
details.set div {
    margin: 0;
}

details.set input[name="weight"] {
    display: inline;
}

details.set input[name="reps"] {
    display: inline;
}

set-details,
workout-card {
    display: block;
}

.setButtons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-block: var(--space-4);
    gap: var(--space-4);
}

.setButtons button.outline {
    grid-column: span 2;
}

.workout input,
.workout button {
    padding: var(--space-4);
}

.normalHeight {
    padding-block: var(--space-2) !important;
}

.workout header {
    display: flex;
    align-items: center;
    margin-block-end: var(--space-4);
}

.workout header *:first-child {
    flex: 1;
    margin: 0;
}

set-details + set-details {
    border-top: 1px solid var(--border);
}
button[role="tab"] {
    position: relative;
}

button[role="tab"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: var(--danger);
    border-radius: 50%;
    display: none;
}

button[role="tab"][data-has-notification="true"]::before {
    display: block;
}

.workouts-list * + * {
    margin-block-start: var(--space-2);
}

.workout-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 120px; /* Estimated default height */
    background-color: var(--faint);
}

.workout-card h2 {
    font-size: var(--text-5);
    margin-block-end: var(--space-2);
}

/* 1. Make the dialog take up the full screen */
dialog#editWorkoutDialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: none;
}

/* 2. Create a structural flex layout for the inner form */
dialog#editWorkoutDialog form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3. Give the container permission to scroll */
.workout-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem; /* Adjust padding as needed */
}

/* 4. Keep header and footer pinned */
dialog#editWorkoutDialog header,
dialog#editWorkoutDialog footer {
    flex-shrink: 0;
    padding: 1rem;
}


/* Maybe there are cleaner ways, but eh */
p.workout-card, .workout-card p {
    white-space: pre-line;
}