/* Content flags: the quiet "Report" action on recipes, cook reports and
   comments, the slip it opens, the line that replaces it once a report is
   sent, and the full-page fallback form (/flags/new). Form controls and
   buttons are the foundation's (styles.css); colours come only from the
   tokens.

   A report is a slip you fill in. Open in place, it is a small slip of
   card stock (no title of its own: the label "What's wrong?" heads it).
   As a page it is laid out like the cook report (recipe.css, .cook-sheet):
   the page title on open paper on its red line, then one index card, the
   sheet, filed behind the recipe's category (.striped: its stripe along
   the top), headed by the thing being reported, its words pinned under
   the head as a clipping (a cook report's scores as the testers' figures),
   then a field per ruled line, the button on the last. */

.flag-widget {
    display: inline-block;
    vertical-align: middle;
}

/* "Report": underlined words and a small glyph, quieter than the actions
   around it. */
.flag-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding-inline: 2px;
    color: var(--ink-2);
    font-size: var(--t-s);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--rule-2);
    text-underline-offset: 0.25em;
    list-style: none;
    cursor: pointer;
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.flag-summary::-webkit-details-marker {
    display: none;
}

.flag-summary:hover {
    color: var(--ink);
    text-decoration-color: currentColor;
}

.flag-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.flag-summary .icon {
    width: 16px;
    height: 16px;
}

.flag-disclosure:not([open]) .flag-open,
.flag-disclosure[open] .flag-closed {
    display: none;
}

/* The recipe's action row is made of 44px buttons. */
.recipe-actions .flag-summary {
    min-height: 44px;
    padding-inline: var(--s-2);
}

/* Open, the widget takes a line of its own (in flex rows such as the
   recipe actions) and the form sits on a slip of card stock, with
   "Cancel" at its top end. A slip, not an index card: a 1px card edge, no
   red line (it has no title; the first label heads it). Inside, the
   ground is card stock, for anything that reads it. */
.flag-widget:has(details[open]) {
    display: block;
    flex-basis: 100%;
    margin-top: var(--s-2);
}

.flag-disclosure[open] {
    --ground: var(--card);
    position: relative;
    max-width: 32rem;
    padding: var(--s-4);
    border: 1px solid var(--card-edge);
    border-radius: var(--corner);
    background: var(--card);
    text-align: start;
}

.flag-disclosure[open] > .flag-summary {
    position: absolute;
    top: var(--s-2);
    inset-inline-end: var(--s-3);
}

.flag-form {
    display: grid;
    gap: var(--s-4);
}

/* "Send report" and the line beside it: a row that wraps, with room
   between them, on the slip's ruled bottom line, which runs edge to edge
   like every card line (it pulls out through the slip's padding). */
.flag-form .flag-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    margin-inline: calc(-1 * var(--s-4));
    padding: var(--s-3) var(--s-4) 0;
    border-top: 1px solid var(--rule);
}

/* Keep the first label clear of "Cancel". */
.flag-form > .field:first-of-type > label {
    padding-inline-end: 7rem;
}

.flag-form .textarea {
    min-height: 104px;
}

/* After sending: one line in ink where "Report" was; a refusal (your own
   content, too many reports) carries the warning glyph in ochre. */
.flag-done {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    padding-block: 8px;
    color: var(--ink);
    font-size: var(--t-s);
    font-weight: 600;
    line-height: 1.35;
}

.flag-done .icon {
    margin-top: 0.1em;
}

.flag-done.is-refused .icon {
    color: var(--ochre);
}

.flag-done:focus {
    outline: none;
}

.flag-done:focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: 2px;
}

/* The full-page form (/flags/new): the back link, the page title on its
   red line, then the sheet, one index card as wide as a form needs
   (40rem), start-aligned like every page title. */
.flag-page .container > * {
    max-width: 40rem;
}

.flag-page .page-title + .flag-sheet {
    margin-top: clamp(24px, 3vw, 32px);
}

/* The sheet's head is the thing being reported, as the cook sheet's is
   the recipe: the recipe's title (in its own language), or whose comment
   or cook report it is, on which recipe; the byline or the day at its end
   (index-card-head's meta). */
.flag-item-head {
    min-width: 0;
    overflow-wrap: anywhere;
}

.flag-item-meta {
    font-size: var(--t-xs);
    color: var(--ink-2);
    overflow-wrap: anywhere;
}

/* The reported words, pinned under the head as a clipping: the box's warm
   sunk ground, closed by a cut edge in the card's own edge colour. Shown
   plainly, as they appear on the site. */
.flag-item {
    display: grid;
    gap: var(--s-2);
    margin-inline: calc(-1 * var(--card-pad));
    padding: var(--s-4) var(--card-pad);
    border-bottom: 1px solid var(--card-edge);
    background: var(--paper-3);
}

.flag-item-meta strong {
    color: var(--ink);
}

/* The words keep their own language's leading (an English description
   on an Arabic page takes the latin 1.55, not the page's 1.8). */
.flag-item-text {
    max-width: var(--measure);
    line-height: var(--leading);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* A cook report's notes are a tester's words: in their pen, upright, as
   the recipe page shows them. */
.flag-item-note {
    color: var(--pen);
}

/* The form: a field per ruled line, edge to edge, then the button and
   "Only the moderators see reports." on the card's last line. */
.flag-page-form {
    display: grid;
    margin-inline: calc(-1 * var(--card-pad));
    margin-bottom: calc(-1 * var(--card-pad));
}

.flag-page-form > .field {
    padding: var(--s-4) var(--card-pad) 18px;
    border-bottom: 1px solid var(--rule);
}

.flag-page-form > .flag-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-5) var(--card-pad) var(--card-pad);
}

@media (pointer: coarse) {
    .flag-summary {
        min-height: 44px;
    }
}

@media print {
    .flag-widget {
        display: none !important;
    }
}