body {
    --blue: #4898D4;
    --gray: #A6A7A8;
    font-family: 'InclusiveSans', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
h1, h2, h3 {
    color: var(--blue);
    font-variation-settings: 'wght' 500;
}
hr {
    margin: 2rem 0 2rem 0;
    border: 1px #E1E1E9 solid;
}
p {
    line-height: 1.4rem;
}
li {
    line-height: 1.4rem;
    margin-bottom: 0.5rem;
}

/* Fonts */
@font-face {
    font-family: 'InclusiveSans';
    src: url('/common/fonts/InclusiveSans-VariableFont_wght.ttf') format('truetype');
    /* The available weight range for this variable font */
    font-weight: 300 700;
}

/* Colors */
.blue-color {
    color: var(--blue);
}
.gray-color {
    color: var(--gray);
}

/* IDs */
#container {
    width: 610px;
    max-width: 100%;
    margin: auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Classes */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    font-size: 0.8rem;
    color: var(--gray);
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 6px;
    color: var(--gray);
}
.breadcrumb-item a {
    color: var(--gray);
}
.breadcrumb-item a:hover {
    color: var(--blue);
}
.footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 3rem;
}
.image {
    max-inline-size: 100%;
    block-size: auto;
}
.post-time {
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
}
.post-divider {
    
}
.post-permalink {
    margin-left: 1rem;
}
.post-title a {
    color: var(--blue);
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
}
.svg-icon {
    display: inline-block;
    vertical-align: -.125rem;
}
.text-center {
    text-align: center;
}

/* Status Messages */
.status-msg {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.status-msg.success {
    background: #e6f4ea;
    color: #1e7e34;
}
.status-msg.error {
    background: #fce8e6;
    color: #c5221f;
}
.status-msg p {
    margin: 0;
    line-height: 1.5;
}
.status-msg p + p {
    margin-top: 0.5rem;
}
.status-msg a {
    color: inherit;
    font-weight: 500;
}

/* Forms */
.form-create-account {
    width: 100%;
    box-sizing: border-box;
    max-width: 400px;
    padding: 1rem;
    border: 1px solid var(--gray);
    border-radius: 0.5rem;
    margin: 0 auto;
}
.form-error {
    color: red;
    margin-bottom: 1.5rem;
    text-align: center;
}
.form-input, .form-label {
    width: 100%;
    display: block;
}
.form-input {
    border-radius: 0.5rem;
    border: 1px solid var(--gray);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}
.form-label {
    margin-bottom: 0.5rem;
}
.form-submit {
    --button-primary: #0d6efd;
    --button-hover: #0b5ed7;
    background-color: var(--button-primary);
    border: 1px solid var(--button-primary);
    border-color: var(--button-primary);
    border-radius: 0.25rem;
    color: #fff;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out,border-color .15s;
}
.form-submit:hover {
    background-color: var(--button-hover);
    border: 1px solid var(--button-hover);
    border-color: var(--button-hover);
}

/* Post Description */
.post-description {
    line-height: 1.5rem;
    margin-bottom: 1rem;
}

/* Post Edit */
.post-edit-details {
    margin-top: 1rem;
}
.post-edit-details summary {
    cursor: pointer;
    color: var(--blue);
    margin-bottom: 1rem;
}
.post-edit-field {
    margin-bottom: 1rem;
}
.post-edit-form {
    margin-top: 1rem;
}
.post-delete-btn {
    --button-primary: #dc3545;
    --button-hover: #bb2d3b;
    background-color: var(--button-primary);
    border-color: var(--button-primary);
}
.post-delete-btn:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
}
.edit-success {
    color: green;
}

/* Workout Text Display */
.workout-text {
    margin: 1.5rem 0;
    border: 1px solid #E1E1E9;
    border-radius: 0.5rem;
    padding: 1rem;
}
.workout-text__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.workout-text__header h3 {
    margin: 0;
}
.workout-text__body {
    font-family: inherit;
    white-space: pre-wrap;
    margin: 0;
    line-height: 1.5;
}

/* Approval Badges */
.approval-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-weight: 500;
}
.approval-badge--draft {
    background-color: #E1E1E9;
    color: #555;
}
.approval-badge--review {
    background-color: #FFF3CD;
    color: #856404;
}
.approval-badge--approved {
    background-color: #D4EDDA;
    color: #155724;
}
.approval-count {
    font-size: 0.8rem;
    color: var(--gray);
}

/* OCR Button */
.workout-ocr-section {
    margin: 1.5rem 0;
}
.ocr-button {
    background-color: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 0.25rem;
    color: #fff;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: opacity .15s ease-in-out;
}
.ocr-button:hover {
    opacity: 0.85;
}
.ocr-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ocr-status {
    font-size: 0.9rem;
    color: var(--gray);
    margin-top: 0.5rem;
}

/* Workout Editor */
.workout-editor {
    margin: 1.5rem 0;
}
.workout-editor summary {
    cursor: pointer;
    color: var(--blue);
    margin-bottom: 1rem;
}
.workout-editor__form {
    margin-top: 1rem;
}
.workout-editor__field {
    margin-bottom: 1rem;
}
.workout-editor__unit-row label {
    margin-right: 1rem;
}
.workout-editor__set {
    border: 1px solid #E1E1E9;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.workout-editor__set-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.workout-editor__set-header .form-input {
    margin-bottom: 0;
    flex: 1;
}
.workout-editor__item {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.workout-editor__item .form-input {
    margin-bottom: 0;
    min-width: 0;
}
.workout-editor__item .item-reps {
    width: 60px;
    flex: 0 0 60px;
}
.workout-editor__item .item-distance {
    width: 70px;
    flex: 0 0 70px;
}
.workout-editor__item .item-stroke {
    flex: 1;
}
.workout-editor__item .item-description {
    flex: 1.5;
}
.workout-editor__item .item-interval {
    width: 80px;
    flex: 0 0 80px;
}
.workout-editor__remove-btn {
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
}
.workout-editor__remove-item-btn {
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    cursor: pointer;
    font-size: 0.8rem;
    flex: 0 0 auto;
}
.workout-editor__add-item-btn {
    background: none;
    border: none;
    color: var(--blue);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0;
}
.workout-editor__actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.workout-editor__approve-btn {
    --button-primary: #198754;
    --button-hover: #157347;
    background-color: var(--button-primary);
    border-color: var(--button-primary);
}
.workout-editor__approve-btn:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
}
.workout-editor__status {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.workout-editor__status--error {
    color: red;
}
.workout-editor__status--success {
    color: green;
}

/* Workout Preview in List Views */
.workout-preview {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

/* Edit History */
.edit-history {
    margin: 1rem 0;
}
.edit-history summary {
    cursor: pointer;
    color: var(--gray);
    font-size: 0.9rem;
}
.edit-history ul {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
}