/* The portfolio's dock for the sites you browse: the top bar's links and the theme toggle on a strip of
   paper at the bottom of the screen, taped down.
   Shared by shelf, workoutparse and teardowns; keep the copies identical (tests/sites.test.ts checks). */
:root {
    --washi: #d9b56a;
    --washi-dot: #e6c98f;
}

:root[data-theme='dark'] {
    --washi: #9c8150;
    --washi-dot: #ad9363;
}

/* room for the dock under the last thing on the page */
body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.dock {
    align-items: center;
    background-color: rgb(var(--sheet));
    background-image: linear-gradient(rgba(var(--sheet), 0.78), rgba(var(--sheet), 0.78)), var(--texture);
    background-size: 100% 100%, 520px auto;
    border: 1px solid var(--rule);
    border-radius: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    box-shadow: 0 16px 34px -14px rgba(var(--shadow), 0.4), 0 2px 5px rgba(var(--shadow), 0.08);
    display: flex;
    gap: 2px;
    left: 50%;
    max-width: calc(100% - 20px);
    padding: 4px 6px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1030;
}

:root[data-theme='dark'] .dock {
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.75), 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* a strip of washi tape holding the paper in place */
.dock::before {
    background:
        radial-gradient(circle at 22% 38%, var(--washi-dot) 0 4px, transparent 4.5px),
        radial-gradient(circle at 58% 70%, var(--washi-dot) 0 6px, transparent 6.5px),
        radial-gradient(circle at 84% 28%, var(--washi-dot) 0 3.5px, transparent 4px),
        radial-gradient(circle at 40% 18%, var(--washi-dot) 0 2.5px, transparent 3px),
        radial-gradient(circle at 74% 92%, var(--washi-dot) 0 3px, transparent 3.5px),
        var(--washi);
    background-size: 64px 100%;
    clip-path: polygon(0 0, 100% 0, 96% 16%, 100% 33%, 96% 50%, 100% 67%, 96% 84%, 100% 100%, 0 100%, 4% 84%, 0 67%, 4% 50%, 0 33%, 4% 16%);
    content: '';
    height: 16px;
    left: 50%;
    opacity: 0.85;
    position: absolute;
    top: -8px;
    transform: translateX(-50%) rotate(-2deg);
    width: 62px;
}

.dock-link {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    min-height: 44px;
    padding: 0 0.7rem;
    position: relative;
    text-decoration: none;
    text-transform: lowercase;
    white-space: nowrap;
}

/* a link is underlined in ink as you point at it */
.dock-link::after {
    background: currentColor;
    border-radius: 2px;
    bottom: 9px;
    content: '';
    height: 2px;
    left: 0.7rem;
    position: absolute;
    right: 0.7rem;
    transform: scaleX(0) rotate(-1deg);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.dock-link:hover {
    color: var(--ink);
}

.dock-link:hover::after {
    transform: scaleX(1) rotate(-1deg);
}

.dock-link:focus-visible {
    border-radius: 8px;
    outline: 2px solid var(--primary);
    outline-offset: -4px;
}

.dock-rule {
    align-self: stretch;
    background: var(--rule);
    margin: 10px 4px;
    width: 1px;
}

.dock .theme-toggle {
    margin-left: 2px;
}

@media (max-width: 767.98px) {
    /* spacing and type shrink with the screen so the toggle stays on the strip down to 320px */
    .dock {
        gap: 0;
        padding: 4px;
    }

    .dock-link {
        font-size: clamp(0.7rem, 3.5vw, 0.8rem);
        padding: 0 clamp(0.25rem, 1.8vw, 0.55rem);
    }

    .dock-link::after {
        left: clamp(0.25rem, 1.8vw, 0.55rem);
        right: clamp(0.25rem, 1.8vw, 0.55rem);
    }

    .dock-rule {
        margin: 10px 2px;
    }
}

@media print {
    .dock {
        display: none;
    }
}