/* Marked Offers (issue 00127) — the mark controls, note editor, put-away
   overlay, «Отмеченные» chip and gone-card placeholder, shared by the feed,
   the offer detail page and /marked (each links this after theme.css).
   Pure-CSS theming only: every color is a token or works in both schemes
   (CONTEXT.md live-theme rule — nothing here snapshots theme values). */

/* The controls row. Born hidden (SSR) and unhidden by marks.js — the
   attribute must keep winning over the display below. */
.marks[hidden] { display: none; }
.marks { display: flex; gap: 2px; }

/* On a feed card the li is the positioning context and the controls float
   over the top-right of the Ф3 photo strip, OUTSIDE the wrapper anchor — a
   mark tap is never a navigation. The pill's scrim is a fixed dark wash
   (not a theme token): it sits on photographs, and white glyphs on
   rgba-black read on any photo in either scheme (Ф3 prototype, locked
   2026-07-27). The strip is 160px+ tall on every viewport, so the one
   floating pill serves all widths — the pre-Ф3 narrow-screen vertical
   rail (and the card min-heights that reserved room for it) is gone.
   On the detail page they sit in normal flow. */
li.offer { position: relative; }
li.offer > .marks {
  position: absolute; top: 6px; right: 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px; padding: 2px;
}
.offer-detail .marks { margin: 10px 0 2px; }

.marks .mk {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  font: inherit; color: var(--ink-faint);
  background: none; border: none; border-radius: 999px; cursor: pointer;
}
.marks .mk:hover { color: var(--ink); background: var(--chip); }
/* Active states: the heart fills red, the cross and the dashed square go
   clearly orange (user directions 2026-07-26), the pencil fills when a
   Renter Note exists. Hues are theme-safe midtones, not tokens — both
   schemes read them. */
.marks .mk-like[aria-pressed="true"] { color: #d64560; }
/* The filled heart keeps a white silhouette around the red (user direction
   2026-07-27) — the idle white outline survives the fill, so the glyph
   stays legible on any photo under the pill's scrim. Fixed white, not a
   token: it pairs with the fill hue, not the theme. */
/* The active heart also swells a touch (user direction 2026-07-27) —
   a scale on the SVG, so the 30px button and the rail layout hold. */
.marks .mk-like[aria-pressed="true"] svg {
  fill: currentColor; stroke: #fff; transform: scale(1.2);
}
/* Active dislike reads reversed: an orange filled square drawn on the
   SVG, not the 30px button — full-button fill read too big (user,
   2026-07-26). Glyph lines in var(--bg), like the pencil: white on the
   light theme, black on the dark (user direction 2026-07-26). */
.marks .mk-dislike[aria-pressed="true"] { color: var(--bg); }
.marks .mk-dislike[aria-pressed="true"]:hover { color: var(--bg); }
.marks .mk-dislike[aria-pressed="true"] svg {
  background: #cc7722; border-radius: 6px; padding: 2px;
}
/* Active put-away joins the same fill+outline language (user direction
   2026-07-26) in ORANGE (user direction 2026-07-27: the earlier gray was
   near-invisible against the pill's scrim — pressed read as unpressed).
   Only the BUTTON goes orange: the note tint and the card dimming keep
   their gray shrug. */
.marks .mk-away[aria-pressed="true"] { color: var(--bg); }
.marks .mk-away[aria-pressed="true"]:hover { color: var(--bg); }
.marks .mk-away[aria-pressed="true"] svg {
  background: #cc7722; border-radius: 6px; padding: 2px;
}
/* Glyphs on a filled square draw thicker than their bare outline —
   lines that read right on the naked rail thin out against a solid fill
   (user direction 2026-07-26). Overrides the SVGs' stroke-width
   presentation attribute. The frame glyph runs its own scale (idle 2.5
   baked in the markup, active 2.8 — workbench-tuned, user 2026-07-26). */
.marks .mk-dislike[aria-pressed="true"] svg,
.marks .mk-note[aria-pressed="true"] svg { stroke-width: 2.4; }
.marks .mk-away[aria-pressed="true"] svg { stroke-width: 2.8; }
/* Active pencil mirrors the dislike treatment (user direction 2026-07-26):
   an accent-filled rounded square drawn on the SVG. The glyph draws in
   var(--bg) — white lines on the light theme's deep-green square, BLACK
   lines on the dark theme's bright-green one (user direction 2026-07-26:
   white washed out against the bright accent). */
.marks .mk-note[aria-pressed="true"] { color: var(--bg); }
.marks .mk-note[aria-pressed="true"]:hover { color: var(--bg); }
.marks .mk-note[aria-pressed="true"] svg {
  background: var(--accent); border-radius: 6px; padding: 2px;
}
/* The pencil's square follows the card's state (user directions
   2026-07-26, put-away joined orange 2026-07-27) — one hue for the whole
   card's mood; put-away and disliked share the orange now that the away
   button itself is orange. Lines stay var(--bg) throughout. */
.mk-away .marks .mk-note[aria-pressed="true"] svg,
.mk-disliked .marks .mk-note[aria-pressed="true"] svg { background: #cc7722; }

/* On the card pill's dark scrim the idle glyphs go white (the token grays
   vanish on photos) — but the ACTIVE treatments above must keep their
   colors, so each pressed state is restated here at the same (higher)
   specificity as the white override, hover included. */
li.offer > .marks .mk { color: #fff; }
li.offer > .marks .mk:hover { color: #fff; background: rgba(255, 255, 255, 0.25); }
li.offer > .marks .mk-like[aria-pressed="true"],
li.offer > .marks .mk-like[aria-pressed="true"]:hover { color: #d64560; }
li.offer > .marks .mk-dislike[aria-pressed="true"],
li.offer > .marks .mk-dislike[aria-pressed="true"]:hover,
li.offer > .marks .mk-away[aria-pressed="true"],
li.offer > .marks .mk-away[aria-pressed="true"]:hover,
li.offer > .marks .mk-note[aria-pressed="true"],
li.offer > .marks .mk-note[aria-pressed="true"]:hover { color: var(--bg); }

/* Marked cards in the feed tail (PROVISIONAL ordering, issue 00127):
   put-away and disliked dim; liked keep full presence. */
li.offer.mk-away > a, li.offer.mk-disliked > a { opacity: 0.55; }

/* The note editor IS the note box (user direction 2026-07-27): one
   permanently-editable face wearing the accent chrome the read-only view
   used to wear — no mode switch, no «Готово» bar. The textarea inside is
   chromeless (marks.js grows it to its text), so the box is
   indistinguishable from the old view until you click into it. */
.mk-editor {
  position: relative; margin-top: 6px; padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid var(--accent); border-radius: 12px;
}
.mk-editor textarea {
  display: block; width: 100%; resize: none; overflow: hidden;
  font: inherit; font-size: 14px; color: var(--ink);
  background: none; border: none; border-radius: 0; padding: 0;
}
/* Focus keeps the border as the indicator — a second inner outline drew a
   box-in-a-box. The thickening is a shadow so the layout never shifts. */
.mk-editor:focus-within {
  box-shadow: 0 0 0 1px var(--accent);
}
.mk-editor textarea:focus { outline: none; }
/* A note-carrying card: the li takes over the card chrome (same move as
   /marked's note-wearing cards) — the box reads as part of the card,
   below the photo and facts (user direction 2026-07-26). Margins keep it
   clear of the mobile rail's column. */
li.offer.mk-editing {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px;
}
li.offer.mk-editing:hover { border-color: var(--accent); }
li.offer.mk-editing > a { background: none; border: none; }
li.offer.mk-editing > .mk-editor { margin: 0 40px 10px 10px; }
/* The dashed gone-card chrome must survive the note box. */
li.offer.mk-gone.mk-editing { border-style: dashed; }
#marked-list li.offer.mk-gone > .mk-editor { margin: 6px 0 0; }
/* The box wears its card's state like the old view did: put-away gray
   first so disliked+put-away keeps the stronger orange. */
li.offer.mk-away > .mk-editor {
  border-color: var(--ink-faint);
  background: color-mix(in srgb, var(--ink-faint) 8%, var(--card));
}
li.offer.mk-disliked > .mk-editor {
  border-color: #cc7722;
  background: color-mix(in srgb, #cc7722 8%, var(--card));
}

/* Detail page: the note box (the same always-open editor since
   2026-07-27) sits under the controls at the page's 14px block rhythm.
   The caret on the top edge points at the ✎ control the text comes from —
   its `left` is tied to the controls row geometry: 4th 30px button with
   2px gaps (the filled pencil square re-centered the target; nudged to
   the user's eye 2026-07-26). */
.offer-detail .mk-editor { margin: 8px 0 14px; }
.offer-detail .mk-editor::before {
  content: ""; position: absolute; top: -6px; left: 104px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border-left: 1px solid var(--accent); border-top: 1px solid var(--accent);
}

/* The detail note wears the offer's state like the card notes do
   (user-caught 2026-07-26: a disliked offer's box stayed green):
   put-away gray first so disliked+put-away keeps the stronger orange.
   The ::before caret is cut from the same cloth both times. */
.offer-detail.mk-away .mk-editor,
.offer-detail.mk-away .mk-editor::before {
  border-color: var(--ink-faint);
  background: color-mix(in srgb, var(--ink-faint) 8%, var(--card));
}
.offer-detail.mk-disliked .mk-editor,
.offer-detail.mk-disliked .mk-editor::before {
  border-color: #cc7722;
  background: color-mix(in srgb, #cc7722 8%, var(--card));
}

/* Detail page Put Away: no overlay — a standing orange notice instead
   (user direction 2026-07-26). */
.mk-awaynote { margin: 6px 0 14px; font-size: 13.5px; color: #cc7722; }

/* The put-away overlay: in place, over the card, with the immediate undo —
   discovery must not be painful (user direction 2026-07-26). */
.mk-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-radius: 14px;
  font-size: 14px; color: var(--ink-soft);
}
.mk-overlay .mk-undo {
  font: inherit; font-size: 13.5px; font-weight: 600; color: #cc7722;
  background: none; border: 1px solid #cc7722; border-radius: 999px;
  padding: 4px 13px; cursor: pointer;
}
.mk-overlay .mk-undo:hover { background: var(--chip); }

/* The removal confirmation rides the same overlay chrome, replacing the
   browser confirm() dialog (user direction 2026-07-26). Near-opaque so the
   question reads over any card content; wraps on narrow cards. */
.mk-confirm {
  flex-direction: column; flex-wrap: wrap; padding: 12px;
  gap: 10px; text-align: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.mk-confirm-buttons { display: flex; gap: 10px; }
.mk-overlay .mk-danger { color: #b3403f; border-color: #b3403f; }
/* «оставить» is the safe way out — accent green, not the undo orange
   (user direction 2026-07-26). */
.mk-confirm .mk-undo:not(.mk-danger) { color: var(--accent); border-color: var(--accent); }

/* «← Назад» on /marked: back to wherever the Renter came from (marks.js
   turns it into history.back(); the href is the deep-link fallback).
   The 10px padding is the tap target (user direction 2026-08-04). The
   -10px top margin cancels the padding above the label, so the label
   does not drop down the page. */
.mk-back {
  display: inline-block; margin: -10px 0 8px; padding: 10px;
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
}
.mk-back:hover { color: var(--ink); }

/* «Отмеченные · N» — the v1 entry point (full nav is a later issue):
   a fixed pill, bottom-center on phones, left edge on wide screens. */
.marked-chip {
  position: fixed; z-index: 20; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  font-size: 13.5px; font-weight: 600; color: var(--bg);
  background: var(--accent); border-radius: 999px;
  padding: 8px 16px; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.marked-chip:hover { filter: brightness(1.08); }
@media (min-width: 1100px) {
  .marked-chip {
    left: 24px; bottom: 24px; transform: none;
  }
}

/* /marked toolbar: filter chips + the notes toggle, under the header. */
.mk-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.mk-tools:empty { display: none; }
.mk-tools .mk-chip {
  font: inherit; font-size: 13.5px; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.mk-tools .mk-chip:hover { border-color: var(--accent); }
.mk-tools .mk-chip[aria-pressed="true"] {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
  font-weight: 600;
}

/* The read-only note box: since 2026-07-27 live cards always show the
   editor instead — this chrome survives only for /marked/history's
   frozen snapshots (and the editor deliberately wears the same look). */
.mk-cardnote {
  position: relative; margin-top: 6px; padding: 8px 10px;
  font-size: 14px; color: var(--ink); white-space: pre-wrap;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid var(--accent); border-radius: 12px;
}
#marked-list li.offer.mk-hasmeta {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px;
}
#marked-list li.offer.mk-hasmeta:hover { border-color: var(--accent); }
#marked-list li.offer.mk-hasmeta > a { background: none; border: none; }
/* The last-change stamp at the card's bottom edge (/marked only). */
#marked-list .mk-updated {
  margin: 4px 40px 8px 10px;
  font-size: 12px; color: var(--ink-faint);
}
#marked-list li.offer.mk-gone > .mk-updated { margin: 6px 0 0; }
#marked-list li.offer.mk-gone.mk-hasmeta { border-style: dashed; }
/* The notes-toggle hides the always-open editors (and any history-style
   read boxes) wholesale. */
#marked-list.mk-notes-hidden .mk-cardnote,
#marked-list.mk-notes-hidden .mk-editor { display: none; }

/* The gone-card placeholder on /marked: card chrome, no photos, no fetched
   data — the snapshot facts, the Renter's own note, both dates. Its rail
   holds only ✎ (note stays editable) and the trash (permanent removal) —
   reactions are meaningless on a delisted Offer. */
li.offer.mk-gone {
  background: var(--card); border: 1px dashed var(--line);
  border-radius: 14px; padding: 10px 44px 10px 14px;
}
#marked-list li.offer.mk-gone > .mk-cardnote { margin: 6px 0 0; }
.mk-forget:hover { color: #b3403f; }

/* /marked ↔ /marked/history plumbing: the entry link under the list and
   the restore bar on a history card. */
.mk-history {
  display: inline-block; margin: 14px 0 0;
  font-size: 13.5px; color: var(--ink-soft); text-decoration: none;
}
.mk-history:hover { color: var(--ink); }
.mk-history-bar { margin-top: 8px; }
li.offer.mk-gone .txt { display: flex; flex-direction: column; gap: 2px; }
li.offer.mk-gone .mk-gone-head { font-size: 13px; color: var(--ink-faint); }
li.offer.mk-gone .mk-gone-facts { font-size: 15px; font-weight: 600; }
li.offer.mk-gone .mk-gone-dates { font-size: 12px; color: var(--ink-faint); }