/*
 * tarjousui/static/laajennukset/kuvanakyma.css — the photo view (#10003), see kuvanakyma.js.
 *
 * The source colours are on :root, so anything that explains them (a legend, a printed
 * cheat sheet) reads the same four values. The class names are lahde-<photos.lahdeluokka>.
 *
 * A source frame is a coloured ring with a dark gap inside it, never a single line: the
 * work boxes drawn on a photo are single lines in hues close to these (köysityö red,
 * alatyö green), and a box at the photo's edge must not merge into the frame. The frame is
 * drawn INSIDE a tile, over the picture's edge, and not as an outer shadow: a list card's
 * strip has no padding, so anything outside the tile would be clipped. The tile's own 2px
 * border stays the core's (.active, .picked, .archived); the badges in a tile's corners
 * sit 3px in, on the ring.
 */

:root {
  --lahde-generoitu: #dc2626; /* made by the pipeline: facades, orthos, obliques, doors */
  --lahde-ilmoitus: #22c55e; /* a sales listing: Oikotie, Etuovi */
  --lahde-oma: #0ea5e9; /* SKT's own photo */
  --lahde-kartta: #a855f7; /* the property map and the overview */
  --lahde-rako: rgb(0 0 0 / 0.6); /* the dark gap inside the ring */
}

@media (prefers-color-scheme: dark) {
  :root {
    --lahde-generoitu: #f87171;
    --lahde-ilmoitus: #4ade80;
    --lahde-oma: #38bdf8;
    --lahde-kartta: #c084fc;
  }
}

.lahde-generoitu { --lahde-vari: var(--lahde-generoitu); }
.lahde-ilmoitus { --lahde-vari: var(--lahde-ilmoitus); }
.lahde-oma { --lahde-vari: var(--lahde-oma); }
.lahde-kartta { --lahde-vari: var(--lahde-kartta); }

.thumb:is(.lahde-generoitu, .lahde-ilmoitus, .lahde-oma, .lahde-kartta)::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--lahde-vari), inset 0 0 0 5px var(--lahde-rako);
  pointer-events: none;
}
/* An archived photo is already greyed out: its frame steps back with it. */
.thumb.archived::after { opacity: .45; }
/* The tile on the stage: a border in the text colour, which no source colour is (the
   accent is blue, and so are own photos). */
.thumb.active:is(.lahde-generoitu, .lahde-ilmoitus, .lahde-oma, .lahde-kartta) { border-color: var(--text); }

/* The big photo: the same ring round the stage, over the picture and under nothing that
   can be pressed (the tools sit 8px in). */
#stage:is(.lahde-generoitu, .lahde-ilmoitus, .lahde-oma, .lahde-kartta)::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 4px var(--lahde-vari), inset 0 0 0 7px var(--lahde-rako);
  pointer-events: none;
}
#stage.empty::after { display: none; }

/* The hero (the list's enlarged photo) has no event of its own: its strip's active tile
   carries the class of the photo shown, and the stage takes the ring from it. */
.hero:has(#hero-strip .thumb.active.lahde-generoitu) .hero-stage { --lahde-vari: var(--lahde-generoitu); }
.hero:has(#hero-strip .thumb.active.lahde-ilmoitus) .hero-stage { --lahde-vari: var(--lahde-ilmoitus); }
.hero:has(#hero-strip .thumb.active.lahde-oma) .hero-stage { --lahde-vari: var(--lahde-oma); }
.hero:has(#hero-strip .thumb.active.lahde-kartta) .hero-stage { --lahde-vari: var(--lahde-kartta); }
.hero:has(#hero-strip .thumb.active:is(.lahde-generoitu, .lahde-ilmoitus, .lahde-oma, .lahde-kartta)) .hero-stage::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 4px var(--lahde-vari), inset 0 0 0 7px var(--lahde-rako);
  pointer-events: none;
}

/* The property id over the map: a layer of #stage, so it stays put when the photo is
   zoomed, and text, so it is never burnt into the picture. */
.kuvanakyma-tunnus {
  position: absolute; left: 10px; top: 10px;
  max-width: calc(100% - 20px); margin: 0; padding: 6px 10px;
  border-radius: 8px; background: #000b; color: #fff;
  font-size: 13px; line-height: 1.35; overflow-wrap: anywhere;
  pointer-events: none;
}
.kuvanakyma-tunnus span { display: block; }
.kuvanakyma-tunnus span:first-child { font-weight: 700; }
/* Out of the way while the drawing hint shows: the label follows #draw-hint in #stage. */
.kuvanakyma-tunnus[hidden],
#stage.empty .kuvanakyma-tunnus,
#draw-hint:not([hidden]) ~ .kuvanakyma-tunnus { display: none; }

/* Under the photo strip: the toggles, then the legend of the frames, both wrapping on a
   phone like the page's other chips. */
.kuvanakyma-tyokalut {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px; padding: 6px 12px;
}
.kuvanakyma-tyokalut[hidden] { display: none; }
.kuvanakyma-kytkimet { display: flex; flex-wrap: wrap; gap: 6px; }
.kuvanakyma-selite {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 0; padding: 0; list-style: none;
  font-size: 12px; line-height: 1.3; color: var(--muted);
}
.kuvanakyma-selite li { display: flex; align-items: center; gap: 6px; }
.kuvanakyma-nayte {
  flex: 0 0 auto; width: 20px; height: 14px; border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--lahde-vari), inset 0 0 0 5px var(--lahde-rako);
}