/* The development site's settings (8 October 2026): the … button at the top right, its panel,
   and every look the panel can switch on. Loaded only on the development site
   (development.cianssite.com, and npm run dev), never on the live site. The
   panel sets attributes on <html> (data-dev-*) and colours as variables; these rules follow them.
   Experimental: once Cian has chosen, the chosen looks move into visual-style.css. */

/* -------------------------------------------------------------- the … button */
.dev-more {
  position: fixed;
  z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: var(--glass-edge);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.dev-more:active { transform: scale(0.94); }
.dev-more svg { width: 20px; height: 20px; }
.dev-more[data-unsaved]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff9f0a;
}
@media screen and (prefers-color-scheme: dark) {
  .kind-pictures .dev-more { background: var(--glass-dark); box-shadow: var(--glass-dark-edge); color: #ffffff; }
}

/* -------------------------------------------------------------- the panel */
.dev-panel {
  position: fixed;
  z-index: 61;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 80px);
  border-radius: 18px;
  background: var(--tile);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
}
.dev-panel[hidden] { display: none; }
/* On phones it sits along the bottom, so the name, the pills and the card above stay in view
   while their colours change. */
@media (max-width: 734px) {
  .dev-panel, body:has(.localnav) .dev-panel {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    max-height: min(56dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 80px));
  }
}
.dev-panel-head { padding: 14px 16px 10px; border-bottom: 0.5px solid var(--rule); }
.dev-panel-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.dev-panel-head p { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; }
.dev-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.dev-panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 0.5px solid var(--rule);
}
.dev-status { flex: 1 1 auto; color: var(--ink-soft); font-size: 13px; }
.dev-status[data-state="unsaved"] { color: #c93400; }
.dev-status[data-state="error"] { color: #d70015; }
.dev-button {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--control);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dev-button.is-primary { background: var(--accent, #0071e3); color: #ffffff; }
.dev-button:disabled { opacity: 0.4; cursor: default; }

/* One setting per row; a row opens to show its choices, one row at a time. */
.dev-row { border-bottom: 0.5px solid var(--rule); }
.dev-row:last-child { border-bottom: 0; }
.dev-row > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}
.dev-row > summary::-webkit-details-marker { display: none; }
.dev-row > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.6px solid var(--ink-soft);
  border-bottom: 1.6px solid var(--ink-soft);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.2s ease;
}
.dev-row[open] > summary::after { rotate: 225deg; translate: 0 1px; }
.dev-row-name { flex: 1 1 auto; font-weight: 600; }
.dev-row-value { color: var(--ink-soft); text-align: right; }
.dev-row-body { padding: 0 16px 14px; }
.dev-row-body > * + * { margin-top: 12px; }
.dev-note { margin: 0; color: var(--ink-soft); font-size: 13px; }
.dev-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* Choices as a row of buttons, the chosen one filled. */
.dev-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-choice {
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--control);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.dev-choice[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.dev-swatch { display: inline-flex; align-items: center; gap: 7px; }
.dev-swatch i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }

/* Sliders, with their value. */
.dev-slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.dev-slider label { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.dev-slider input { width: 100%; margin: 0; accent-color: var(--ink); }
.dev-slider output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 13px; }

/* A colour: a sample that opens its hue, saturation and brightness sliders, and its code. */
.dev-colour { display: grid; grid-template-columns: 1fr auto 6.6em; align-items: center; gap: 8px; }
.dev-colour span { font-weight: 500; }
.dev-sample { width: 34px; height: 28px; padding: 0; border: 0; border-radius: 7px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); cursor: pointer; }
.dev-sample[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--page), 0 0 0 3.5px var(--ink); }
/* Hue, saturation and brightness: sliders on tracks of the colours they lead to. */
.dev-hsb { grid-column: 1 / -1; display: grid; gap: 10px; padding: 6px 0 8px; }
.dev-hsb[hidden] { display: none; }
.dev-hsb label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.dev-hsb input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.dev-hsb input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dev-hsb input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dev-hex {
  width: 100%;
  padding: 5px 8px;
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  background: var(--page);
  color: var(--ink);
  font: 14px ui-monospace, "SF Mono", monospace;
  text-transform: uppercase;
}
.dev-colour + .dev-colour { margin-top: 8px; }
.dev-preview { display: flex; gap: 8px; align-items: stretch; }
.dev-preview span { flex: 1; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }

/* A card given its own colour here takes the glass as a coloured card does (visual-style.css). */
.card[data-dev-colour] > .card-body { --body-shade: 0.2; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); }
.card[data-dev-colour]::before { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; }

/* ------------------------------ Pills in colour (the chosen view's own colour) */
/* The chosen pill and the site's name at the top in the view's colour (decided 8 October 2026;
   the colours per view, --pill-* and --title-*, and the rules naming each view come from
   dev-tools.js, until Cian has chosen them). The other pills stay as they are. */
:is(.site-chips, .site-nav-menu) a[aria-current="page"]::before { background: var(--pc) !important; }
:is(.site-chips, .site-nav-menu:not(.is-closed)) a[aria-current="page"] { color: var(--pi) !important; }
.site-title { color: var(--dev-title, var(--ink)) !important; transition: color 0.25s ease; }

/* The … button at the Mac's size, as Back (visual-style.css). */
@media (hover: hover) and (pointer: fine) {
  .dev-more { width: 38px; height: 38px; top: calc(env(safe-area-inset-top, 0px) + 17px); right: calc(env(safe-area-inset-right, 0px) + 17px); }
  .dev-more svg { width: 18px; height: 18px; }
}

/* ------------------------------------------------ A post's own colours */
/* The card: one colour in light and dark mode alike (--dev-card-bg and -ink, from the panel). */
.card[data-dev-colour] { --card-bg: var(--dev-card-bg) !important; --card-ink: var(--dev-card-ink) !important; }
body.post-page[data-dev-colour] :is(.card.is-large, .listen-sheet) { --card-bg: var(--dev-card-bg) !important; --card-ink: var(--dev-card-ink) !important; }
/* Everything on the page follows the card's colour chosen here: its hue (--tint-h) and how
   colourful it is (--own-c, and --tint-c on 0 to 1 for the pages that use that), so a card
   made grey makes the page, its date, its title and its words grey too. */
body.post-page[data-dev-colour] { --tint-h: var(--dev-h) !important; --own-c: var(--dev-c) !important; --tint-c: min(1, calc(var(--dev-c) / 0.11)) !important; }
/* The page's own setting (when changed): light or dark with the device, in the card's hue, as
   colourful as a share of the card (--dev-bg-k), and lighter or darker (--dev-bg-shift). */
body.post-page[data-dev-bg] {
  --post-bg: oklch(calc(var(--post-page-l) + var(--dev-bg-shift, 0) * 100%) min(calc(var(--dev-c) * var(--dev-bg-k, 0.25)), 0.08) var(--dev-h)) !important;
}

/* On the hand-made pages (the recipes) the … button sits below their section bar, clear of it. */
body:has(.localnav) .dev-more { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 66px); }
body:has(.localnav) .dev-panel { top: calc(env(safe-area-inset-top, 0px) + 118px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 132px); }

/* ------------------------------------------------------------ Edit (8 October 2026) */
/* On the feeds: a × on each card's top right corner and a pin on its top left, standing out over
   the corners as the iPhone's delete badges do over an app's icon, in the buttons' grey glass
   (9 October 2026; on the card, in dark glass, with the cards wobbling, until then). A bar along
   the bottom holds Order, Cancel and Done. */
html[data-dev-editing] .feed .card-link { cursor: default; }
/* Just before the card, as tall as nothing, so the buttons sit on the card's corners. */
.dev-card-controls { position: relative; z-index: 8; display: block; width: 100%; height: 0; justify-self: stretch; pointer-events: none; }
.dev-card-x, .dev-card-pin, .dev-photo-x {
  position: absolute;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: var(--glass-edge);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease;
}
.dev-card-x:active, .dev-card-pin:active, .dev-photo-x:active { transform: scale(0.92); }
.dev-card-x svg, .dev-card-pin svg, .dev-photo-x svg { width: 16px; height: 16px; }
.dev-card-x { top: -10px; right: -10px; }
.dev-card-pin { top: -10px; left: -10px; }
.dev-card-pin[hidden] { display: none; }
/* Pinned: the pin in the site's orange for text (darker in light mode, lighter in dark, so it
   stands out on the glass in both). */
.dev-card-pin[aria-pressed="true"], .dev-order-pin[aria-pressed="true"] { color: var(--orange-ink, #b34300); }
/* Round buttons stay round, and pill buttons pills, when focused from the keyboard (the site's
   focus ring otherwise gives them small rounded corners). */
.dev-more:focus-visible, .dev-card-x:focus-visible, .dev-card-pin:focus-visible, .dev-photo-x:focus-visible, .dev-order-pin:focus-visible { border-radius: 50%; }
.dev-button:focus-visible, .dev-choice:focus-visible { border-radius: 999px; }
/* While editing, the cards don't grow under the pointer or press in: they don't open, and the
   buttons stay on their corners. */
html[data-dev-editing] .feed > li > .card { transform: none !important; }
/* A card to be removed stays in place while editing, faint, with ↺ to keep it. */
html[data-dev-editing] .feed > li[data-dev-removing] > .card { opacity: 0.28; }
/* A newly pinned post in Recents goes without its date, as the pinned ones do. */
.feed > li[data-pin] > .feed-date { display: none; }

.dev-edit-bar {
  position: fixed;
  z-index: 62;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--tile);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  font-size: 15px;
}
.dev-edit-note { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .dev-edit-note { display: none; } .dev-edit-bar { padding-left: 8px; } }

/* Order: one numbered list. Each post: its number (tap to type a new one), its name, its pin and
   its handle. The line between "Pinned" and "Not pinned" moves with the posts. */
.dev-order { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); max-height: min(62dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 160px)); }
@media (min-width: 735px) { .dev-order { right: calc(50% - 180px); } }
.dev-order .dev-panel-body { position: relative; }
.dev-order-list { position: relative; margin: 0; padding: 0 8px 8px; list-style: none; }
.dev-order-list > li { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.dev-order-label, .dev-order-line { padding: 10px 8px 6px; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.dev-order-line { margin-top: 6px; border-top: 0.5px solid var(--rule); }
.dev-order-row { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 0 0 4px; border-radius: 10px; background: var(--tile); }
.dev-order-number {
  flex: none;
  width: 2.6em;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.dev-order-number:hover { background: var(--control); }
.dev-order-number:focus { outline: none; background: var(--control); color: var(--ink); box-shadow: 0 0 0 2px var(--accent, #0071e3); }
.dev-order-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-order-pin { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--control); color: var(--ink-soft); cursor: pointer; }
.dev-order-pin svg { width: 15px; height: 15px; }
.dev-order-handle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); cursor: grab; touch-action: none; }
.dev-order-handle svg { width: 20px; height: 20px; }
/* The row being dragged: above the others, lifted, following the finger without easing. */
.dev-order-list > li.is-dragging { z-index: 2; transition: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 0.5px var(--rule); }
.dev-order-row.is-dragging .dev-order-handle { cursor: grabbing; }
.dev-order-list.is-sorting { user-select: none; -webkit-user-select: none; }
.dev-order-empty { padding: 8px 12px; color: var(--ink-soft); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .dev-order-list > li { transition: none; } }

/* On a post's page: its name, and the buttons below the colours. */
.dev-text { width: 100%; padding: 8px 10px; border: 0.5px solid var(--rule); border-radius: 9px; background: var(--page); color: var(--ink); font: inherit; }
.dev-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-buttons > * + * { margin-top: 0; }
.dev-button.is-danger { color: #d70015; }
.dev-banner {
  position: fixed;
  z-index: 59;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 10px 10px 10px 16px;
  border-radius: 16px;
  background: #d70015;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
/* An album's photos while choosing which to remove: a × in grey glass on each, a photo to remove
   faint. */
.collection-grid figure.photo { position: relative; }
.dev-photo-x { top: 6px; right: 6px; z-index: 3; width: 30px; height: 30px; }
.dev-photo-x:disabled { opacity: 0.35; cursor: default; }
/* The lead image: a ☆ on each photo's top left while choosing, ★ and a ring on the chosen one. */
.dev-photo-lead { position: absolute; top: 6px; left: 6px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--nav-glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: var(--glass-edge); color: var(--ink); cursor: pointer; }
.dev-photo-lead svg { width: 16px; height: 16px; }
.dev-photo-lead[aria-pressed="true"] { color: var(--orange-ink, #b34300); }
.dev-photo-lead:focus-visible { border-radius: 50%; }
html[data-dev-lead] .collection-grid figure.photo[data-dev-lead] > a { box-shadow: 0 0 0 3px var(--orange-ink, #b34300); }
html:is([data-dev-lead]) .dev-more { display: none; }
/* Publish Website, under the panel's heading. */
.dev-publish { display: grid; gap: 6px; margin-top: 10px; }
.dev-publish .dev-button { justify-self: start; }
html[data-dev-photos] .collection-grid figure.photo[data-dev-removing] > a { opacity: 0.28; }
/* While editing, the … button is out of the way of the bar (Done and Cancel end editing). */
html:is([data-dev-editing], [data-dev-photos]) .dev-more { display: none; }
/* Red and orange readable on the dark panel. */
@media screen and (prefers-color-scheme: dark) {
  .dev-button.is-danger { color: #ff6961; }
  .dev-status[data-state="unsaved"] { color: #ffb340; }
  .dev-status[data-state="error"] { color: #ff6961; }
}