@charset "UTF-8";
body {
    max-width: 940px;
    margin: 0 auto;
    padding: 1em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: whitesmoke;
    color: black;
}

a {
    font-weight: bold;
}

/*
    The two common display options for responsive layouts are flex and grid.
        flex (aka Flexbox) aligns items either horizontally or vertically.
        grid can align items in two dimensions.
        grid also allows more precise positioning of elements, so I'm using that.
*/
.home-container {
    display: grid;
}

/* 
    Responsive layout - adjusts from 1 to 2 columns based on screen width
        min-width makes the mobile (stacked) view the default
        600px covers most mobile devices in portrait mode
        Once the width exceeds that (e.g. desktops), it will convert to horizontal alignment
*/
@media (min-width: 600px) {
    .home-container {
        grid-template-columns: 1fr 2fr;
        grid-gap: 2em;
    }
}

.profile-row {
    display: flex;
    width: 100%;
    gap: 0.5em;
}

.tick-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5em;
}

.tick-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    padding: 0.5em;
    font-family: inherit;
    font-size: 1em;
}

.tick-form button {
    align-self: flex-end;
}

.mood-bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
}

.admin-bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding-top: 1em;
    gap: 0.5em;
}

.admin-right {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.admin-bar a,
.admin-bar span {
    white-space: nowrap;
}

.tick {
    margin-bottom: 1em;
}

.tick-time {
    color: gray; font-size: 0.8em;
}

.tick-text {
    color: black;
    font-size: 1.0em;
}

.pagination a { margin: 0 5px; text-decoration: none; }

.emoji-tabs {
    display: flex;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

.emoji-tab-button {
    text-decoration: none;
    font-size: 1.2em;
    padding: 0.2em 0.5em;
    background: #eee;
    border-radius: 0.3em;
}

.emoji-tab-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2em, 1fr));
    gap: 0.3em;
    margin-bottom: 1em;
}

.emoji-option {
    text-align: center;
    display: block;
    cursor: pointer;
}

.emoji-option input {
    display: none;
}

.emoji-option span {
    font-size: 1.4em;
    display: inline-block;
    padding: 0.2em;
    border-radius: 0.3em;
}

.emoji-option input:checked + span {
    background-color: #ddeeff;
    outline: 2px solid #339;
}

#timezones {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 1em;
}

.timezone-option {
    display: block;
    margin-bottom: 0.5em;
}