/*
 * The row menu — one quiet button holding a row's own business.
 * Design 2.0, 2026-09-03, from the canvas "One Grammar for Rows".
 *
 * ⭐ **EVERY OPEN ROW ON MEMORY AND OPEN QUESTIONS READS THE SAME WAY**: the
 * two doors to new material — *Ask about it* into Explore, *Write about it*
 * into the composer — in the open, then everything that changes the row itself
 * behind this. A memory row showed three controls and no doors; a thread four;
 * a prompt five. Three grammars for one gesture.
 *
 * ⛔ **THE MENU NEVER HOLDS ASK OR WRITE.** That is the whole rule. What goes
 * in: correcting, setting aside, forgetting, settling, muting, and the row's
 * own page. What stays out: anything that leads somewhere new.
 *
 * ⚠️ **NO NEW JAVASCRIPT.** It is a `<details data-close-on-outside-click>` —
 * the attribute `static/js/ui-handlers.js` already honours for the composer's
 * menu (outside click and Escape, bound once on the document). Nesting a
 * `<details>` inside the row's own `<details>` is legal and already shipped
 * here (`.memory-edit` inside `.memory-row`).
 *
 * 📐 `.composer__menu` in `entry-form.css` is the same pattern at a different
 * name and was left alone deliberately: three browser tests pin its class
 * names. Folding the two together is in `docs/admin/design-notes.md`.
 */

.row-menu {
    position: relative;
}

/* The button itself is `.btn.btn-sm.btn-quiet` from components/buttons.css —
   44 px and the row's own quiet tone. This only squares it off and kills the
   marker, since a summary is not a button element. */
.row-menu__summary {
    list-style: none;
    cursor: pointer;
    width: 44px;
    padding-left: 0;
    padding-right: 0;
}

.row-menu__summary::-webkit-details-marker,
.row-menu__summary::marker {
    content: "";
    display: none;
}

/*
 * ⚠️ **IT OPENS DOWNWARD, AND ABOVE THE TAB BAR.** The composer's menu opens
 * upward because it sits in the last bar on the page; a row sits mid-page with
 * the rows below it, so down is where the eye already is. The z-index is above
 * `.mobile-bottom-nav` (100), which a menu at the house value of 40 would have
 * opened underneath on a phone.
 */
.row-menu__body {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    left: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    max-width: calc(100vw - var(--space-lg));
    padding: var(--space-2xs);
    background: var(--card-background);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);   /* a token, so dark.css can remap it */
}

/* ⚠️ **A ROW'S MENU SITS AT THE END OF ITS STRIP**, which on a phone is most
   of the way across the screen — left-aligned it ran 91 px off a 390 px
   viewport (caught by the browser layer, 2026-09-03). Every row menu uses this
   modifier; the `max-width` above is the belt to its braces. */
.row-menu--end .row-menu__body {
    left: auto;
    right: 0;
}

.row-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-sm);
    font-family: inherit;
    font-size: var(--text-base-sm);
    text-align: left;
    text-decoration: none;
    color: var(--text-color);
    background: none;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
}

.row-menu__item:hover,
.row-menu__item:focus-visible {
    background: var(--background-hover);
}

/* Each item's own feature mark, the same 16 px glyphs the chips carried. */
.row-menu__item .icon {
    flex: none;
    color: var(--text-secondary);
}

/* Last, and the only one that costs anything. */
.row-menu__item--danger {
    color: var(--semantic-error, var(--danger));
}

.row-menu__item--danger .icon {
    color: inherit;
}

/* Forms inside the menu are plumbing, not layout. */
.row-menu__body form {
    display: contents;
}

/*
 * ⭐ **THE TWO DOORS, IN THE OPEN.** `.row-doors` is the strip the menu sits at
 * the end of: Ask, Write, then the button. Real flex, not `display: contents`,
 * because the menu needs a positioning context — and on a phone the three still
 * fit one line at 390 px.
 */
.row-doors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
}

.row-doors form {
    display: inline-flex;
    margin: 0;
}

/* On a phone the strip is Ask, Write and ··· — three targets that fit one line
   at 390 px — and the menu they open is narrower than the desktop's. */
@media (max-width: 480px) {
    .row-menu__body {
        min-width: 12rem;
    }
}