body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #f9fafb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#a3-page-container {
    width: 100%;
    display: flex;
    justify-content: center;
}
#a3-page {
    background-color: #000000;
    width: 1191px; /* A3 width at 96 DPI */
    height: 1684px; /* A3 height at 96 DPI */
    padding: 1rem; /* Reduced padding */
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}
.grid-cell {
    border: 1px dashed #4b5563; /* Smaller border */
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    background-color: #1f2937;
    position: relative;
    overflow: hidden;
    padding: 0.125rem; /* Reduced padding */
    transition: all 0.2s ease-in-out;
}
.grid-cell.has-item {
     border-color: transparent;
}
.grid-cell .cell-image-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
    background-color: #4b5563;
}
.grid-cell .cell-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.grid-cell .cell-text {
    /* Use clamp for fluid font size: min, preferred, max */
    font-size: clamp(0.4rem, 1.2vw, 0.5rem);
    line-height: 1.3;
    text-align: center;
    width: 100%;
    color: #d1d5db;
    /* 2-line clamp */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word; /* Prevents overflow from long words */
    min-height: 1.1rem; /* Adjust to match new min font size */
}
.empty-cell-inner {
    min-height: 100px; /* Give empty cells a default height */
}
.grid-cell .cell-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
}
.grid-cell:hover .cell-actions { opacity: 1; }
.cell-action-btn {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 9999px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    cursor: pointer;
}
.skeleton-loader {
    background-color: #4b5563;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse { 50% { opacity: .5; } }

.life-stage-label-wrapper, .subcategory-label-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.life-stage-label-text {
    font-size: 0.75rem; /* text-xs */
    font-weight: 700;
    color: #d1d5db;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.life-stage-label-years {
     font-size: 0.75rem; /* text-xs */
     font-weight: 600;
     color: #9ca3af;
}
.subcategory-label {
    font-size: 0.55rem;
    font-weight: 600;
    color: #9ca3af;
    padding: 0.5rem 0.25rem;
    border-radius: 0.25rem;
    background-color: rgba(75, 85, 99, 0.4); /* #4b5563 with 40% opacity */
}
#pdf-header {
    display: none;
}
.modal-backdrop {
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background-color: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    padding: 1.5rem;
    max-height: 90vh;
    overflow-y: auto;
}
.pdf-capture-mode .vertical-text {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    padding: 0.5rem;
}
.pdf-capture-mode .life-stage-label-wrapper {
     flex-direction: column;
}
 .pdf-capture-mode .subcategory-label-wrapper {
    width: 30px;
}
.pdf-capture-mode .empty-cell {
    visibility: hidden;
}
@page {
    size: A3;
    margin: 0;
}
@media print {
    body, #a3-page { background-color: #000000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #controls, .no-print, header { display: none; }
    #pdf-header { display: block !important; text-align: center; margin-bottom: 2rem; }
    .empty-cell { visibility: hidden; }
    #app-container, #a3-page-container {
        padding: 0;
        margin: 0;
    }
    #a3-page {
        width: 100%;
        height: 100vh; /* Use viewport height to fill the page */
        box-shadow: none;
        border: none;
        margin: 0;
    }
}