/* Pastemin app previews used on the home and product pages: the clipboard
   window, options menu, and source icons. Shared styles live in landing.css. */

/* The Pastemin panel: search field in the title row, history on the left,
   the selected item on the right. */
.pm {
  display: flex;
  flex-direction: column;
  height: 30em;
}

.pm-bar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex: none;
  height: 3.6em;
  padding: 0 1.4em;
  border-bottom: 1px solid var(--win-line);
}

.pm-bar .clip {
  width: 1.6em;
  height: 1.6em;
  stroke-width: 1.6;
}

.pm-bar .vr {
  width: 1px;
  height: 1.8em;
  background: var(--win-line);
}

/* The script replaces the placeholder with animated search text. */
.pm-bar .search {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 1.55em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.pm-bar .search .ph {
  color: var(--win-muted);
}

.pm-bar .search.filled .ph {
  display: none;
}

.pm-bar .search .caret {
  height: 1em;
  vertical-align: -0.12em;
}

.pm-bar .spacer {
  flex: 1;
}

.pm-bar .more {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--win-muted);
}

/* Split the preview between clipped history rows and selected-item details. */
.pm-body {
  display: grid;
  grid-template-columns: 40% 1fr;
  flex: 1;
  min-height: 0;
}

.pm-list {
  padding: 0.7em;
  overflow: hidden;
  border-right: 1px solid var(--win-line);
}

/* Keep rows compact and use the accent fill for the selected example. */
.pm-list .row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 0.75em;
  border-radius: 0.6em;
  transition: background 0.25s var(--ease), opacity 0.25s var(--ease);
}

.pm-list .row.on {
  background: var(--win-accent);
  color: #fff;
}

.pm-list .row[hidden] {
  display: none;
}

/* Truncate long titles while preserving their source labels. */
.pm-list .row .t {
  min-width: 0;
}

.pm-list .row b {
  display: block;
  font-size: 1.12em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-list .row span {
  display: block;
  font-size: 0.9em;
  color: var(--win-muted);
}

.pm-list .row.on span {
  color: rgba(255, 255, 255, 0.78);
}

.pm-list .empty {
  padding: 2em 1em;
  text-align: center;
  color: var(--win-muted);
}

/* Source-app icons, drawn in CSS so they follow the mock's scale. */
.src {
  position: relative;
  flex: none;
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.6em;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.src::before,
.src::after {
  content: "";
  position: absolute;
}

/* Build the Notes icon from a yellow header and short ruled lines. */
.src.notes::before {
  inset: 0 0 auto;
  height: 32%;
  background: #ffd60a;
}

.src.notes::after {
  left: 22%;
  right: 22%;
  top: 48%;
  height: 0.16em;
  background: #c9c9ce;
  box-shadow: 0 0.42em 0 #c9c9ce, 0 0.84em 0 #c9c9ce;
}

/* Build the Mail icon from an envelope over a blue gradient. */
.src.mail {
  background: linear-gradient(180deg, #5ab2ff, #0a7aff);
}

.src.mail::before {
  left: 20%;
  right: 20%;
  top: 30%;
  bottom: 30%;
  border-radius: 0.2em;
  background: #fff;
}

.src.mail::after {
  left: 20%;
  right: 20%;
  top: 30%;
  height: 40%;
  background: linear-gradient(135deg, transparent 47%, #d6e8ff 47%, #d6e8ff 53%, transparent 53%), linear-gradient(225deg, transparent 47%, #d6e8ff 47%, #d6e8ff 53%, transparent 53%);
  background-size: 50% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}

/* Safari and Finder are drawn as inline SVG backgrounds: a compass on
   white, and the two-tone face. */
.src.safari,
.src.finder {
  background-color: transparent;
  background-size: 100% 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.src.safari::before,
.src.safari::after,
.src.finder::before,
.src.finder::after {
  content: none;
}

.src.safari {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Crect width=%2264%22 height=%2264%22 rx=%2214%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%2224%22 fill=%22%231f8fff%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%2220.5%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.6%22 stroke-dasharray=%221.2 3.2%22/%3E%3Cg transform=%22rotate(45 32 32)%22%3E%3Cpath d=%22M32 11l5.5 21h-11z%22 fill=%22%23ff3b30%22/%3E%3Cpath d=%22M32 53l5.5-21h-11z%22 fill=%22%23fff%22/%3E%3C/g%3E%3C/svg%3E");
}

.src.finder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cdefs%3E%3CclipPath id=%22l%22%3E%3Crect width=%2232%22 height=%2264%22/%3E%3C/clipPath%3E%3CclipPath id=%22r%22%3E%3Crect x=%2232%22 width=%2232%22 height=%2264%22/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width=%2264%22 height=%2264%22 rx=%2214%22 fill=%22%231e7cf4%22/%3E%3Crect width=%2264%22 height=%2264%22 rx=%2214%22 fill=%22%239fd3ff%22 clip-path=%22url(%23l)%22/%3E%3Crect x=%2218%22 y=%2219%22 width=%225.5%22 height=%2212%22 rx=%222.75%22 fill=%22%231a1a1e%22/%3E%3Crect x=%2240.5%22 y=%2219%22 width=%225.5%22 height=%2212%22 rx=%222.75%22 fill=%22%23fff%22/%3E%3Cpath d=%22M13 38c6 10 32 10 38 0%22 fill=%22none%22 stroke=%22%231a1a1e%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 clip-path=%22url(%23l)%22/%3E%3Cpath d=%22M13 38c6 10 32 10 38 0%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 clip-path=%22url(%23r)%22/%3E%3C/svg%3E");
}

/* Use a small landscape to identify image clipboard entries. */
.src.image {
  background: linear-gradient(160deg, #3b7fe6, #7a4dff);
}

.src.image::before {
  left: 20%;
  top: 22%;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #ffe7a0;
}

.src.image::after {
  left: 12%;
  right: 12%;
  bottom: 18%;
  height: 34%;
  background: linear-gradient(135deg, transparent 50%, #fff 50%) left / 50% 100% no-repeat, linear-gradient(225deg, transparent 50%, #fff 50%) right / 50% 100% no-repeat;
  opacity: 0.85;
}

/* Let the selected item fill the detail pane between its header and
   metadata. */
.pm-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--pane);
}

.pm-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.4em;
  border-bottom: 1px solid var(--win-line);
}

.pm-head .ic {
  width: 1.3em;
  height: 1.3em;
}

.pm-head b {
  font-size: 1.1em;
}

.pm-head .spacer {
  flex: 1;
}

.pm-head .trash {
  color: var(--win-muted);
}

/* Clip long example text to the available preview height. */
.pm-text {
  flex: 1;
  min-height: 0;
  padding: 1.2em 1.5em;
  overflow: hidden;
  font-size: 1.1em;
  line-height: 1.5;
}

.pm-text h4 {
  margin: 0 0 0.5em;
  font-size: 1.25em;
  letter-spacing: -0.01em;
}

.pm-text p {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* The image example uses the same landscape colors as its row icon. */
.pm-text .pic {
  width: 100%;
  height: 8.6em;
  border-radius: 0.6em;
  background:
    radial-gradient(40% 50% at 30% 30%, rgba(255, 231, 160, 0.9), transparent 60%),
    linear-gradient(160deg, #3b7fe6, #7a4dff);
}

/* Keep metadata on one line and truncate its trailing source label. */
.pm-foot {
  display: flex;
  gap: 1em;
  padding: 0.8em 1.5em;
  border-top: 1px solid var(--win-line);
  font-size: 0.92em;
  color: var(--win-muted);
  white-space: nowrap;
}

.pm-foot .spacer {
  flex: 1;
}

.pm-foot span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stack history above details on narrow screens. */
@media (max-width: 720px) {
  .pm {
    height: auto;
  }

  .pm-body {
    grid-template-columns: 1fr;
  }

  .pm-list {
    border-right: 0;
    border-bottom: 1px solid var(--win-line);
  }

  .pm-detail {
    height: 17em;
  }
}

/* The options menu, floating over the panel in the "your rules" section. */
.pm-scene {
  position: relative;
  aspect-ratio: 16 / 12;
  container-type: inline-size;
  font-size: clamp(7.5px, 1.75cqw, 14px);
  color: var(--win-fg);
  border-radius: 1.4em;
  overflow: hidden;
  background: var(--desk-bg);
  box-shadow: var(--win-shadow);
}

/* Position a smaller clipboard window behind the floating options menu. */
.pm-scene .pm {
  position: absolute;
  left: 5%;
  top: 8%;
  width: 78%;
  height: 84%;
  font-size: 0.9em;
  border: 1px solid var(--win-line);
  border-radius: 1em;
  background: var(--win);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.pm-scene .menu {
  right: 4%;
  top: 14%;
  bottom: auto;
  width: 46%;
}

.pm-scene .menu .row .sub {
  margin-left: auto;
  color: var(--win-muted);
  font-weight: 400;
}

/* Draw static toggle switches that scale with the options-menu preview. */
.pm-scene .menu .row .sw {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 2.3em;
  height: 1.35em;
  border-radius: 1em;
  background: var(--win-fill-2);
}

.pm-scene .menu .row .sw.on {
  background: var(--win-accent);
}

.pm-scene .menu .row .sw i {
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.pm-scene .menu .row .sw.on i {
  left: auto;
  right: 0.15em;
}

.pm-scene .menu .note {
  padding: 0.5em 0.9em 0.6em;
  font-size: 0.85em;
  color: var(--win-muted);
}

.pm-scene .menu .note b {
  display: block;
  color: var(--win-fg);
  font-weight: 600;
}

/* Place the history-limit submenu above the main preview. */
.pm-scene .submenu {
  position: absolute;
  right: 2%;
  bottom: 6%;
  width: 34%;
  z-index: 3;
  padding: 0.4em;
  border-radius: 0.9em;
  background: var(--win-overlay);
  border: 1px solid var(--win-border);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85);
}

.pm-scene .submenu .row {
  display: flex;
  align-items: center;
  padding: 0.45em 0.9em;
  border-radius: 0.55em;
  font-size: 1.05em;
  font-weight: 500;
}

.pm-scene .submenu .row.on {
  background: rgba(10, 132, 255, 0.3);
}

.pm-scene .submenu .row .ok {
  margin-left: auto;
  width: 1em;
  height: 1em;
  stroke-width: 2.4;
}

/* Hide details in the narrow options scene to leave room for both menus. */
@media (max-width: 720px) {
  .pm-scene .pm {
    height: auto;
    bottom: 8%;
  }

  .pm-scene .pm .pm-body {
    grid-template-columns: 1fr;
  }

  .pm-scene .pm .pm-detail {
    display: none;
  }
}

/* Show the toast during the simulated restore, or keep it visible in the
   static preview when motion is disabled. */
.stage .sat.toast {
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.stage.restored .sat.toast,
html:not(.motion) .stage .sat.toast {
  opacity: 1;
}