/* Menu tile: the landing grid of slab tiles. */

/* Landing-page tiles */
.menu-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Tiles are links now that each tile is its own page, so the anchor has to be
   told to look like the slab it used to be as a button. */
.menu-tile {
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
    border: 1px solid #555;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    cursor: pointer;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #333;
}

/* Status ring: an inner colored border floated inside the tile, with a gap
   between it and the tile's real border. Driven by .status-green/.status-red,
   set in JS from today's data (mantra read / review entered). */
.menu-tile.status-green::before,
.menu-tile.status-red::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 3px solid transparent;
    border-radius: 7px;
    pointer-events: none;
}

.menu-tile.status-green::before {
    border-color: #42c971;
}

.menu-tile.status-red::before {
    border-color: #f4584e;
}

.menu-tile:hover {
    background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

.menu-tile svg {
    width: 64px;
    height: 64px;
}

.menu-tile-label {
    font-size: 18px;
    font-weight: bold;
}

/* --- activity strip ------------------------------------------------------
 *
 * A slim bar pinned to the bottom of the page: seven dots, one per day of the
 * last week, green where that day has survey data and grey where it does not.
 * The grid scrolls under it on a short screen, so it is always in view.
 */

/* The strip has to reach the container's edges, so it cancels the padding
   .content puts around the page — which differs on mobile, hence the variable. */
.content.menu-content {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    --pad: 20px;
}

@media (max-width: 768px) {
    .content.menu-content {
        --pad: 15px;
    }
}

.day-strip {
    /* `auto` top margin sits it at the foot of a short page; sticky keeps it in
       view on a long one, with the grid scrolling underneath. */
    margin: auto calc(var(--pad) * -1) 0;
    /* The inset keeps the dots clear of the home indicator in the PWA. */
    padding: 11px var(--pad) calc(11px + env(safe-area-inset-bottom, 0px));
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, #fbfbfb 0%, #f2f2f2 100%);
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.06);
}

/* The dots sit in the middle third of the bar, evenly spread across it. */
.day-strip-days {
    width: 33.333%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
}

.day-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dcdcdc;
    border: 1px solid #cbcbcb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.day-dot.entered {
    background: linear-gradient(to bottom, #5fe092 0%, #2fae5f 100%);
    border-color: #249a53;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 5px rgba(47, 174, 95, 0.35);
}

/* Today is still open, so an empty dot is pending rather than missed. */
.day-dot.today:not(.entered) {
    background: #f6f6f6;
    border-style: dashed;
    border-color: #999;
}

.day-dot:hover {
    transform: scale(1.25);
}