/* Saved works — the sheet that holds the reader's own short list.

   Black on white, after the layers Mercedes-Benz India raises over its pages
   on a telephone: a white sheet with rounded top corners rising from the foot
   of the window, a small grey handle, a large condensed-serif title, and each
   saved plate as a white spec card — the picture on a light-grey tile, the
   plate's number in the serif, its medium, size and kind in plain sans, a
   plain link back to the wheel, and one outlined pill beneath. At the foot,
   always in view while there is a list, one black pill sends the list to the
   studio: the only solid button in the sheet. On a wide screen the same
   sheet stands as a panel at the right-hand side of the window.

   Every token is read with a fallback, so the sheet looks the same whether or
   not the shell's stylesheet has defined it; the shell's values win wherever
   they exist. The pills are the shell's own (.pill, .pill--ghost-dark,
   .pill--block), sized here for the cards. */

.ssheet {
  --ss-ink: var(--ink, #000);
  --ss-paper: var(--paper, #fff);
  --ss-g100: var(--g100, #f4f4f4);
  --ss-g150: var(--g150, #ececec);
  --ss-g200: var(--g200, #e0e0e0);
  --ss-g300: var(--g300, #c8c8c8);
  --ss-g500: var(--g500, #767676);
  --ss-g600: var(--g600, #5c5c5c);
  --ss-g700: var(--g700, #3c3c3c);
  --ss-g800: var(--g800, #262626);
  --ss-sans: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --ss-serif: var(--f-serif, "Instrument Serif", "Iowan Old Style", Georgia, serif);
  --ss-card: var(--r-card, 12px);
  --ss-tile: var(--r-tile, 8px);
  --ss-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

/* The dialog itself is the whole window, clear: the dimmed page is drawn by
   the scrim inside it, so the dim and the sheet can move together. */
dialog.ssheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--ss-ink);
  font-family: var(--ss-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

dialog.ssheet[open] { display: block; }
dialog.ssheet::backdrop { background: transparent; }
.ssheet [hidden] { display: none !important; }

/* Everything in the sheet stands on white, so every focus ring is black —
   the shell's ring takes the text colour, which is white on a black pill. */
.ssheet :focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 3px; }

.ssheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.56);
  opacity: 0;
  transition: opacity 0.32s ease;
  cursor: pointer;
}

.ssheet.is-in .ssheet__scrim { opacity: 1; }

/* ---------- the sheet ---------- */

.ssheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--ss-paper);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.38s var(--ss-ease);
  will-change: transform;
}

.ssheet.is-in .ssheet__panel { transform: translate3d(0, 0, 0); }

.ssheet.is-dragging .ssheet__panel,
.ssheet.is-dragging .ssheet__scrim { transition: none; }

/* The handle is drawn small but held large: the whole strip across the top
   of the sheet answers a thumb, which tends to land a little above the bar
   it is aiming for. */
.ssheet__grab {
  flex: none;
  position: relative;
  height: 22px;
  touch-action: none;
  cursor: grab;
}

.ssheet__grab::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--ss-g300);
}

/* The heading doubles as the handle on a telephone: a finger drawn down it
   takes the sheet with it. */
.ssheet__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px max(14px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.ssheet.is-scrolled .ssheet__head { border-bottom-color: var(--ss-g150); }

.ssheet__hd { flex: 1 1 auto; min-width: 0; padding-top: 4px; }

.ssheet .ssheet__title {
  margin: 0;
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ss-ink);
}

.ssheet .ssheet__title:focus { outline: none; }

.ssheet .ssheet__sub {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ss-g600);
}

/* Read to a screen reader as the sheet's description, but not shown twice
   over the empty state that says the same. */
.ssheet .ssheet__sub.is-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ssheet__x {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-g100);
  color: var(--ss-ink);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.ssheet__x svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.ssheet__x:hover { background: var(--ss-g200); }

.ssheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    2px
    max(20px, env(safe-area-inset-right, 0px))
    calc(28px + env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
}

.ssheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- a saved plate: a white spec card ---------- */

.ssheet .scard {
  margin: 0 0 12px;
  padding: 12px;
  background: var(--ss-paper);
  border: 1px solid var(--ss-g150);
  border-radius: var(--ss-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 22px rgba(0, 0, 0, 0.06);
}

.scard__top {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* The picture hangs on a light-grey tile, whole and uncropped, with the
   faint shadow of a canvas on a wall. */
.scard__pic {
  position: relative;
  width: 108px;
  aspect-ratio: 4 / 5;
  background: var(--ss-g100);
  border-radius: var(--ss-tile);
  overflow: hidden;
  cursor: pointer;
}

/* Held inside the tile's margin whatever its shape, tall or wide. */
.scard__pic img {
  position: absolute;
  left: 10px;
  top: 10px;
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
  transition: transform 0.4s var(--ss-ease);
}

.scard__pic:hover img { transform: scale(1.03); }

.scard__pic img.is-missing { visibility: hidden; }

.scard__txt { min-width: 0; padding-top: 4px; }

.scard__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ssheet .scard__t {
  margin: 0;
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ss-ink);
}

.ssheet .scard__m {
  margin: 10px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ss-ink);
}

/* saved.js keeps a size on one line; one too long for the card is broken
   rather than let run out of it. */
.ssheet .scard__s {
  margin: 2px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ss-g700);
  overflow-wrap: anywhere;
}

.ssheet .scard__n {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ss-g500);
}

.scard__rm {
  flex: none;
  min-height: 44px;
  min-width: 44px;
  margin: -12px -6px 0 0;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ss-g600);
  font-family: var(--ss-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ss-g300);
  text-underline-offset: 4px;
  cursor: pointer;
}

.scard__rm:hover { color: var(--ss-ink); text-decoration-color: currentColor; }
.ssheet .scard__rm:focus-visible,
.ssheet .scard__go:focus-visible { outline-offset: -2px; border-radius: 6px; }

/* The way back to the wheel: a link in ink under the plate's lines, drawn
   small and held large as Remove is, its extra height let into the space
   round it. */
.scard__go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 -10px -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ss-ink);
  font-family: var(--ss-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ss-g300);
  text-underline-offset: 4px;
  cursor: pointer;
}

.scard__go:hover { text-decoration-color: currentColor; }

.scard__acts { margin-top: 14px; }

.ssheet .scard__acts .pill {
  width: 100%;
  min-height: 48px;
  padding: 10px 18px;
}

/* ---------- the foot: the list sent to the studio ----------
   One black pill under a hairline, standing still while the list scrolls
   above it, and under the pill one small line saying what pressing it does
   not do: the place to say it is where the thumb is. While the foot is there
   it keeps the sheet clear of the telephone's home bar, which the list does
   otherwise. */

.ssheet__foot {
  flex: none;
  padding:
    12px
    max(20px, env(safe-area-inset-right, 0px))
    calc(14px + env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  background: var(--ss-paper);
  border-top: 1px solid var(--ss-g150);
}

/* The last card's own margin is part of the space left above the hairline. */
.ssheet.has-foot .ssheet__body { padding-bottom: 8px; }

.ssheet .ssheet__send {
  min-height: 52px;
  padding: 10px 18px;
  text-wrap: balance;
}

.ssheet .ssheet__sent {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  color: var(--ss-g600);
}

/* ---------- nothing saved yet ---------- */

.ssheet__empty {
  padding: 18px 0 4px;
  text-align: center;
}

.ssheet__emptyicon {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ss-g100);
}

.ssheet__emptyicon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ss-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.ssheet .ssheet__emptyt {
  margin: 0 0 10px;
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.05;
}

.ssheet .ssheet__empty p {
  max-width: 30ch;
  margin: 0 auto 26px;
  text-wrap: balance;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ss-g600);
}

.ssheet__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- a wide screen: a panel at the right ---------- */

@media (min-width: 720px) {
  .ssheet__panel {
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: min(480px, 100%);
    max-height: none;
    border-radius: 0;
    box-shadow: -14px 0 48px rgba(0, 0, 0, 0.2);
    transform: translate3d(100%, 0, 0);
    transition-duration: 0.42s;
  }

  .ssheet__grab { display: none; }

  /* The right-hand edge of a telephone turned on its side may hold the
     camera's notch; the panel keeps its buttons clear of it. */
  .ssheet__head {
    padding: 30px max(24px, env(safe-area-inset-right, 0px)) 22px 32px;
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
  }

  .ssheet .ssheet__title { font-size: 2.625rem; }

  .ssheet__body {
    padding:
      4px
      max(32px, env(safe-area-inset-right, 0px))
      calc(36px + env(safe-area-inset-bottom, 0px))
      32px;
  }

  .ssheet .scard { padding: 14px; }

  .scard__top { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }

  .scard__pic { width: 120px; }

  .ssheet__foot {
    padding:
      16px
      max(32px, env(safe-area-inset-right, 0px))
      calc(20px + env(safe-area-inset-bottom, 0px))
      32px;
  }

  .ssheet.has-foot .ssheet__body { padding-bottom: 12px; }

  .ssheet__empty { padding-top: 48px; }

  .ssheet .ssheet__wheel { display: inline-flex; width: auto; min-width: 240px; }
}

/* A telephone on its side: wide enough for the panel, but short, so the
   heading gives more of the height to the list. */
@media (min-width: 720px) and (max-height: 520px) {
  .ssheet__head { padding-top: 16px; padding-bottom: 14px; }
  .ssheet .ssheet__title { font-size: 2.125rem; }
  .ssheet .ssheet__sub { margin-top: 4px; }
  .ssheet__empty { padding-top: 8px; }
  .ssheet__emptyicon { width: 60px; height: 60px; margin-bottom: 12px; }
}

/* ---------- the count on the heart in the bar ----------
   A small lift when a plate is saved, so the eye finds where it went. */

[data-saved-count].is-bumped { animation: ss-bump 0.5s var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)); }

@keyframes ss-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---------- less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ssheet__panel,
  .ssheet__scrim,
  .scard__pic img { transition: none; }
  [data-saved-count].is-bumped { animation: none; }
}