/* ============================================================
   PREFERENCES — Figma 87:17503
   ------------------------------------------------------------
   The only navigable page in the prototype so far, and the one
   that drives the two things the whole product hangs on: the
   theme and the background photograph.

   Everything here is DS components — the theme switch is the
   segmented control at size L, the watch list is the card, the
   chips and checkboxes are themselves. This file holds only the
   composition and the background picker, which has no component
   of its own because a crop of a photograph is not a DS object.
   ============================================================ */

/* No topbar on this page — there is nothing to search and the
   account block is pinned to the corner, so the column starts at
   the top of the gutter. Figma has it at 40 from the viewport;
   the shell already gives 24. */
.ice-prefs {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  inline-size: 100%;
  max-inline-size: var(--w-600);
  margin-inline: auto;
  padding-block-start: var(--space-16);
}

.ice-prefs__title {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block-end: var(--space-8);

  font-size: var(--type-h3-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-track);
  color: var(--fg-high);
}
.ice-prefs__title > .ice-icon { opacity: .8; }

.ice-prefs__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.ice-prefs__label {
  font-size: var(--type-h5-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h5-leading);
  letter-spacing: var(--type-h5-track);
  color: var(--fg-high);
}

/* --- Who the workspace is ------------------------------------
   Elevation 2, padding and gap at 20, the logo at 50. */
.ice-identity {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-20);
  border-radius: var(--radius-16);
}
.ice-identity__logo {
  inline-size: var(--height-l);
  block-size:  var(--height-l);
  border-radius: var(--radius-9);
  object-fit: cover;
  flex-shrink: 0;
}
.ice-identity__main {
  flex: 1 0 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ice-identity__name {
  font-size: var(--type-h6-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);
  color: var(--fg-high);
}
.ice-identity__desc {
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
  color: var(--fg-medium);
}
.ice-identity__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

/* --- The background picker -----------------------------------
   A swatch is a crop of the real photograph, so what you pick is
   what you get. Unpicked ones sit right back at 20%; the chosen
   one takes the accent ring, and hovering one lights it with the
   Highlight shadow — the same promise as a selected card. */
.ice-bg-picker {
  display: flex;
  gap: var(--space-12);
}
.ice-bg-swatch {
  flex: 1 0 0;
  min-inline-size: 0;
  block-size: var(--w-100);
  border: 0;
  padding: 0;
  border-radius: var(--radius-16);
  outline: var(--select-ring-width) solid transparent;
  outline-offset: 0;
  cursor: pointer;
  opacity: .2;

  background-size: cover;
  background-position: center;
  transition: opacity var(--dur-fast) var(--ease-out),
              outline-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ice-bg-swatch:hover {
  opacity: 1;
  box-shadow: var(--shadow-highlight);
  backdrop-filter: blur(var(--shadow-highlight-blur));
  -webkit-backdrop-filter: blur(var(--shadow-highlight-blur));
}
.ice-bg-swatch[data-active] {
  opacity: 1;
  outline-color: var(--select-ring-color);
}

.ice-bg-swatch[data-bg-set="1"] { background-image: url("../../img/desktop__bgd-1.jpg"); }
.ice-bg-swatch[data-bg-set="2"] { background-image: url("../../img/desktop__bgd-2.jpg"); }
.ice-bg-swatch[data-bg-set="3"] { background-image: url("../../img/desktop__bgd-3.jpg"); }
.ice-bg-swatch[data-bg-set="4"] { background-image: url("../../img/desktop__bgd-4.jpg"); }
.ice-bg-swatch[data-bg-set="5"] { background-image: url("../../img/desktop__bgd-5.jpg"); }
.ice-bg-swatch[data-bg-set="6"] { background-image: url("../../img/desktop__bgd-6.jpg"); }