/*
    THE FEEDBACK OVERLAY'S OWN STYLESHEET.

    The button that says "this page is wrong", the surface somebody drags an area on, and the dialog
    they fill in. Its consumers are Components/Shared/FeedbackLauncher.razor, FeedbackDialog.razor and
    js/feedback/screen-capture.js, and the launcher is mounted by MainLayout on every shell, so this
    is the document's stylesheet.

    THE SELECTION SURFACE IS BUILT BY JAVASCRIPT and styled from here, because there is nowhere else
    a colour is allowed to be. It sits above everything the product draws - Leaflet's panes and
    MudBlazor's dialogs included - since the whole point is to select over the top of them.

    THE LAUNCHER IS A BARE 34px SQUARE in the bottom-right corner, and that is a decision rather than
    a default: a wider fixture there covers a page's primary action and takes the click aimed at it.
    Everything else that wants that corner clears its height instead - the toast dock stacks above it
    and the well below adds 44px of bottom padding.

    CHROME THAT FLOATS OVER THE APPLICATION MUST NEVER REACH PAPER, which is the print block.

    NO GRADIENTS, one accent, depth by border. Same rules as everywhere.
*/

.sv-fb-launcher {
  position: fixed;
  right: var(--sv-space-2);
  bottom: var(--sv-space-2);
  z-index: 1150;                 /* under #blazor-error-ui (1200), over the app */
}

.sv-fb-launcher__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--sv-bg-raised);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-control);
  box-shadow: var(--sv-shadow-panel);
  color: var(--sv-text-secondary);
  cursor: pointer;

  /* Fades back until it is wanted. It is a permanent fixture on every page and
     an always-full-contrast square in the corner reads as an unread badge. */
  opacity: 0.65;
  transition: opacity 120ms ease, border-color 120ms ease, color 120ms ease;
}

.sv-fb-launcher__button:hover,
.sv-fb-launcher__button:focus-visible {
  opacity: 1;
  border-color: var(--sv-accent);
  color: var(--sv-accent);
}

/* The word is still in the DOM for a screen reader; only the sighted layout
   drops it. Removing it outright would leave an icon-only control with no
   accessible name. */
.sv-fb-launcher__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The launcher is mounted by the layout, so it reaches every branch of it -
   including the bare one the A4 report sheet renders on. Chrome must never reach
   paper, and a print rule is the right instrument for that: a route test in the
   layout would have to name every printable page, and the next one added would
   not be on the list. */
@media print {
  .sv-fb-launcher {
    display: none;
  }
}

/* Hidden for the duration of a capture: the dialog asking for the picture sits
   on top of the thing being photographed. Visibility rather than display, so
   nothing reflows and the page is captured exactly as the reporter had it. */
.sv-fb-hidden {
  visibility: hidden !important;
}

.sv-fb-capture {
  position: fixed;
  inset: 0;
  z-index: 3000;                 /* over Leaflet, over MudBlazor, over everything */
  cursor: crosshair;
  /* THE DIM DOES NOT FOLLOW THE THEME. It is laid over whatever the reporter is
     photographing - a map, a document, a light page - so it is the unthemed ink,
     the same token the hero scrims take. */
  background: color-mix(in srgb, var(--sv-unthemed-ink) 28%, transparent);
  touch-action: none;
  user-select: none;
}

.sv-fb-capture__hint {
  position: absolute;
  top: var(--sv-space-5);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: var(--sv-bg-raised);
  border: 1px solid var(--sv-accent);
  border-radius: var(--sv-radius-control);
  color: var(--sv-text);
  font: 400 13px/1.4 var(--sv-font-sans);
  white-space: nowrap;
}

/* The rubber band. Amber as a thin stroke, and the area inside it is left clear
   so the thing being selected stays visible while it is selected. */
.sv-fb-capture__band {
  position: absolute;
  border: 1px solid var(--sv-accent-fill);
  background: color-mix(in srgb, var(--sv-accent-fill) 10%, transparent);
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--sv-unthemed-ink) 10%, transparent);
  pointer-events: none;
}

.sv-fb-capture__size {
  position: absolute;
  padding: 2px 6px;
  background: var(--sv-accent-fill);
  border-radius: 3px;
  /* Fixed, because the fill is amber in both modes and the ink on it must be
     too - --sv-on-accent moves with the theme and this surface does not. */
  color: var(--sv-unthemed-ink);
  font: 500 11px/1.4 var(--sv-font-mono);
  pointer-events: none;
}

/* ── the dialog ───────────────────────────────────────────────────────────── */

.sv-fb-context {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sv-fb-context .sv-mono {
  overflow-wrap: anywhere;       /* a project URL is long and must not widen the dialog */
}

.sv-fb-prior {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  padding: 6px 0;
  border-top: 1px solid var(--sv-border-subtle);
  min-width: 0;
}

.sv-fb-prior:first-of-type {
  border-top: 0;
}

/* The capture button and its advice sit on one row. Without this the button is a flex item that
   shrinks to its min-content and "Capture an area" wraps onto two lines. */
.sv-fb-actions {
  align-items: flex-start;
}

.sv-fb-actions > .sv-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sv-fb-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-3);
  margin-top: var(--sv-space-3);
}

.sv-fb-thumb {
  position: relative;
  width: 132px;
  padding: 4px;
  background: var(--sv-bg-overlay);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-control);
}

.sv-fb-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.sv-fb-thumb__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: var(--sv-bg-raised);
  border: 1px solid var(--sv-border-strong);
  border-radius: 50%;
  color: var(--sv-text-secondary);
  font: 500 12px/1 var(--sv-font-sans);
  cursor: pointer;
}

.sv-fb-thumb__remove:hover {
  border-color: var(--sv-accent);
  color: var(--sv-accent);
}

.sv-fb-thumb__meta {
  display: block;
  padding-top: 4px;
  color: var(--sv-text-tertiary);
  font-size: 10px;
  letter-spacing: 0.04em;
}