/* =========================================================
   cursor effects. the bookmark in the top left corner and the list behind it.

   the colours are written out here and taken from no theme on purpose: the
   thing is stuck ONTO the page, not part of it. that way it looks the same on
   the start page, in the feed under all five themes and on the cv, and there
   is no rule anywhere that has to be kept in step with it.
   ========================================================= */

.cursor {
    position: fixed;
    top: 0;
    /* not flush in the corner: a bookmark sticks out of the page a little way
       in, and the corner itself stays free for whatever a page puts there */
    left: 28px;
    /* the effects draw onto a canvas that the library appends to the body
       without a z-index. anything positioned lies over it, so any value at all
       is enough - 60 keeps a distance from the theme picker at 5 */
    z-index: 60;

    font-family: monospace;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #2b1f16;
}

/* every button in here gets stripped down to nothing.
   the theme picker in the feed does the opposite on purpose - it wants the
   real xp/98/7 button. this thing does not: it is supposed to look the same
   under every theme, and the frameworks style bare `button` unguarded, down to
   a min-width of 75px. a class beats an element selector, so no !important is
   needed - but it does have to be spelled out here. */
.cursor-tab,
.cursor-head button,
.cursor-list button {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ---------- the bookmark ---------- */
/* the notch at the bottom is cut out of the button, so the shadow has to
   follow the cut shape - drop-shadow does that, box-shadow would draw the
   rectangle around it */
.cursor-tab {
    display: block;
    padding: 7px 7px 15px;
    background-color: #f3efc2;

    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.45));
    transition: padding 0.12s ease-out;
}

/* pulls out a little further, like a bookmark you pinch */
.cursor-tab:hover,
.cursor-tab:focus-visible,
.cursor-tab[aria-expanded="true"] {
    padding-bottom: 21px;
}

.cursor-arrow {
    display: block;
}

/* ---------- the list ---------- */
.cursor-panel {
    box-sizing: border-box;
    margin-top: 6px;
    padding: 10px;
    width: 168px;
    background-color: #f3efc2;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45);
}

/* [hidden] alone would lose against the display below */
.cursor-panel[hidden] {
    display: none;
}

/* ---------- the header row ---------- */
/* the two that are not effects, side by side on a dark bar - the panel's own
   little title bar. the negative margin takes it out to the panel edge, past
   the padding, so it really reads as a bar and not as two buttons.

   the ground is inverted in here, so the selected state is inverted with it:
   in the list below selected means dark on cream, up here cream on dark.
   same rule, mirrored - otherwise a selected `off` would disappear into the
   bar it is sitting on. */
.cursor-head {
    display: flex;
    margin: -10px -10px 8px;
    background-color: #2b1f16;
    color: #f3efc2;
}

.cursor-head button {
    flex: 1;
    padding: 5px 6px;
    text-align: center;
}

.cursor-head button + button {
    border-left: 1px solid rgba(243, 239, 194, 0.3);
}

.cursor-head button:hover,
.cursor-head button:focus-visible {
    background-color: rgba(243, 239, 194, 0.18);
}

.cursor-head button.selected {
    background-color: #f3efc2;
    color: #2b1f16;
}

/* ---------- the effects ---------- */
.cursor-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

/* rows, not buttons with a frame: thirteen framed boxes would be a wall. the
   backing only appears where the mouse is */
.cursor-list button {
    display: block;
    width: 100%;
    padding: 3px 6px;
    text-align: left;
}

.cursor-list button:hover,
.cursor-list button:focus-visible {
    background-color: rgba(43, 31, 22, 0.12);
}

.cursor-list button.selected {
    background-color: #2b1f16;
    color: #f3efc2;
}

/* ---------- where it comes from ---------- */
.cursor-source {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(43, 31, 22, 0.25);
    font-size: 0.6rem;
    line-height: 1.4;
    opacity: 0.85;
}

.cursor-source a {
    color: inherit;
}

/* the library does nothing when reduced motion is on. then the list would
   promise something that cannot happen, so the whole thing goes */
@media (prefers-reduced-motion: reduce) {
    .cursor {
        display: none;
    }
}