/* The print corner (2026-09-10): the machine shelf, the paper ladders,
   the steps and the hero, on the shared tokens. One file for both the
   account page's print desk and the Floor web app's print sheet; the
   phone draws the same objects in Swift (PrintCorner.swift). */
.pc-hero {
  border-radius: var(--radius-m, 20px);
  margin: 0 0 18px;
  overflow: hidden;
  position: relative;
}
.pc-hero img {
  aspect-ratio: 16 / 7;
  display: block;
  object-fit: cover;
  object-position: center 55%;
  width: 100%;
}
.pc-hero__w {
  background: linear-gradient(to top, rgba(16, 24, 22, 0.78), rgba(16, 24, 22, 0.55) 45%, rgba(16, 24, 22, 0) 78%);
  bottom: 0;
  color: var(--cream, #f4f0e7);
  left: 0;
  padding: 60px 24px 20px;
  position: absolute;
  right: 0;
}
.pc-hero__w h2 {
  color: inherit;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}
.pc-hero__w p { color: rgba(244, 240, 231, 0.86); font-size: 14.5px; margin: 6px 0 0; }

.pc-ink { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pc-chip {
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e4e2da);
  border-radius: 999px;
  color: var(--ink, #171716);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  min-height: 40px;
  padding: 0 16px;
  transition: background var(--ease, 180ms ease), color var(--ease, 180ms ease);
}
.pc-chip.on { background: var(--ink, #171716); border-color: var(--ink, #171716); color: var(--cream, #f4f0e7); font-weight: 600; }
.pc-chip:focus-visible, .pc-sheet:focus-visible, .pc-auto:focus-visible { outline: 2px solid var(--accent, #ffc838); outline-offset: 2px; }

.pc-shelf { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-card {
  background: var(--paper, #fff);
  border-radius: var(--radius-m, 20px);
  box-shadow: 0 6px 14px rgba(23, 23, 22, 0.06);
  color: var(--ink, #171716);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pc-card--night { background: var(--night, #101816); box-shadow: 0 8px 18px rgba(16, 24, 22, 0.28); color: var(--cream, #f4f0e7); }
.pc-card__photo { aspect-ratio: 16 / 10; overflow: hidden; }
.pc-card__photo img { display: block; height: 100%; object-fit: cover; width: 100%; }
.pc-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px; }
.pc-kicker {
  color: var(--muted, #6e6d68);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}
.pc-card--night .pc-kicker { color: #8e9894; }
.pc-name {
  color: inherit;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
.pc-blurb { color: var(--ink-2, #343431); font-size: 14.5px; line-height: 1.5; margin: 0 0 6px; }
.pc-card--night .pc-blurb { color: rgba(244, 240, 231, 0.82); }
.pc-foot { color: var(--muted, #6e6d68); font-size: 13px; line-height: 1.5; margin: 4px 0 0; }
.pc-card--night .pc-foot { color: #8e9894; }

/* the well the paper lies in, and the ladder */
.pc-well {
  align-items: flex-end;
  background: var(--ground, #f7f6f2);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: 14px;
}
.pc-card--night .pc-well { background: #182320; }
.pc-ladder { position: relative; }
.pc-ladder--port { aspect-ratio: var(--w) / var(--h); height: 200px; }
.pc-ladder--land { aspect-ratio: var(--w) / var(--h); max-width: 300px; width: 100%; }
.pc-sheet {
  animation: pc-settle 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  background: var(--paper, #fff);
  border: 0;
  border-radius: 2px;
  bottom: 0;
  /* one shadow, and a hairline ring so white paper still reads on the
     light ground under it */
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(23, 23, 22, 0.05);
  color: var(--ink, #171716);
  cursor: pointer;
  /* a button centres its content; the label has to sit at the top,
     in the strip the next sheet leaves uncovered */
  align-items: flex-start;
  display: flex;
  gap: 5px;
  font: inherit;
  left: 0;
  margin: 0;
  padding: 6px 7px 0;
  position: absolute;
  text-align: left;
}
.pc-card--night .pc-sheet { background: var(--cream, #f4f0e7); box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.45); }
.pc-sheet.on { outline: 2px solid var(--accent, #ffc838); outline-offset: -2px; }
.pc-sheet.off { cursor: default; }
.pc-sheet__l, .pc-sheet__p { font-size: 12px; line-height: 1.2; white-space: nowrap; }
.pc-sheet__l { font-weight: 650; }
.pc-sheet__p { color: var(--muted, #6e6d68); font-variant-numeric: tabular-nums; }
.pc-sheet.off .pc-sheet__l { color: var(--muted, #6e6d68); }
@keyframes pc-settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-sheet { animation: none; }
}

.pc-paper {
  align-items: baseline;
  color: var(--muted, #6e6d68);
  display: flex;
  font-size: 13px;
  gap: 12px;
  justify-content: space-between;
  line-height: 1.5;
  margin: 12px 0 0;
}
.pc-auto {
  background: none;
  border: 0;
  color: var(--ink, #171716);
  cursor: pointer;
  flex: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pc-steps {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc-steps li { align-items: baseline; display: flex; gap: 12px; }
.pc-steps__n {
  color: var(--ink, #171716);
  flex: none;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 28px;
  line-height: 1;
  min-width: 22px;
}
.pc-steps b { color: var(--ink, #171716); display: block; font-size: 14.5px; font-weight: 600; }
.pc-steps small { color: var(--muted, #6e6d68); display: block; font-size: 13px; line-height: 1.45; margin-top: 2px; }

/* A row that scrolls: on any phone, and inside the Floor's sheet at any
   width (it is a phone-shaped column on a desk too). */
.pc-shelf--row {
  display: flex;
  margin: 0 -18px;
  overflow-x: auto;
  padding: 4px 18px 8px;
  scroll-padding: 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pc-shelf--row::-webkit-scrollbar { display: none; }
.pc-shelf--row .pc-card { flex: 0 0 min(86%, 340px); scroll-snap-align: start; }
@media (max-width: 720px) {
  /* No edge bleed here: the account pane's own margins are not ours to
     spend, and a shelf wider than its column is a sideways-scrolling page. */
  .pc-shelf {
    display: flex;
    overflow-x: auto;
    padding: 4px 0 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pc-shelf::-webkit-scrollbar { display: none; }
  .pc-card { flex: 0 0 min(86%, 340px); scroll-snap-align: start; }
  .pc-steps { grid-template-columns: 1fr; }
  .pc-hero img { aspect-ratio: 16 / 10; }
  .pc-hero__w { padding: 48px 18px 16px; }
}