:root {
  /* Colors */
  --bg-page: #E9DED2;
  --bg-card: #DED0C3;
  --bg-tape: #8B5A2B;
  --ink: #1F140C;
  --ink-strong: #000000;
  --ink-muted: #A88A66;
  --rule: #2B1810;
  --accent: #D2691E;
  --accent-hover: #A0521A;
  --status-pending: #C9A227;
  --inverse: #FFFFFF;

  /* Mockup-specific tokens (tuned against the real cassette photo) */
  --teal-500: #1a9fa8;
  --ink-900: #230000;
  --ink-700: #3a3a3a;
  --white: #ffffff;
  --focus-ring: var(--accent);
  --font-label: "Courier Prime", "Courier New", monospace;
  --status-pending-bg: #fef3c7;
  --status-pending-fg: #92400e;
  --status-pending-border: #fcd34d;
  --text-body: #230000;
  --text-muted: #230000;
  --text-secondary: #230000;
  --text-inverse: #ffffff;
  --link: #d2691e;
  --link-hover: #a0521a;
  --bg-card-border: #d4c4b0;
  --max-w-content: 1140px;
  --search-w-max: 560px;
  --radius-sm: 2px;
  --fs-h1: 36px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;
  --s-3: 16px;
  --lh-body: 1.5;
  --fw-bold: 700;
  --fw-medium: 500;
  --ls-caps: 0.1em;
  --shell-700: #6b5b45;
  --bg-shell: #8B5A2B;
}

/* Cassette card — used on home grid and detail page */
.cassette-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2480 / 1748;
  text-decoration: none;
  color: inherit;
  container-type: inline-size;
}

.cassette-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Tints the orange label band on the cassette photo to the chosen swatch color.
   Coordinates are measured against the actual artwork (cassette77.png). */
.label-tint {
  position: absolute;
  left: 8%;
  top: 55.5%;
  width: 85%;
  height: 14%;
  mix-blend-mode: color;
  pointer-events: none;
}

.cc-field {
  position: absolute;
  font-family: var(--font-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dedicate page only: lets song name, artist, first name, message and time
   stamp be edited directly on the cassette itself, in place. */
#preview-title:empty::before,
#preview-artist:empty::before,
#preview-name:empty::before,
#preview-message:empty::before,
#preview-timestamp:empty::before {
  content: attr(data-placeholder);
  color: #230000;
}
/* nowrap (inherited from .cc-field) still collapses whitespace, which silently
   eats the spaces around "-" as they're typed; pre keeps them, still one line. */
#preview-timestamp {
  white-space: pre;
}
#preview-title:focus,
#preview-artist:focus,
#preview-name:focus,
#preview-message:focus,
#preview-timestamp:focus {
  outline: none;
  border-bottom: 1px dashed var(--ink-muted);
}

.cc-title {
    left: 13%;
    top: 16.5%;
    font-weight: var(--fw-bold);
    font-size: 6cqw;
    line-height: 1;
    letter-spacing: -0.02em;
    word-spacing: -0.27em;
    color: var(--ink-900);
    max-width: 78%;
}

.cc-artist {
    left: 13%;
    top: 24%;
    font-size: 4cqw;
    color: var(--ink-900);
    max-width: 60%;
    letter-spacing: -0.02em;
    word-spacing: -0.27em;
}

.cc-timestamp {
    right: 8%;
    top: 25.5%;
    font-size: 2.7cqw;
    color: var(--ink-900);
    font-weight: 400;
}
.cc-id {
    left: 50%;
    top: 30.7%;
    transform: translateX(-50%);
    font-size: 3cqw;
    color: #ffffff;
}


.cc-name {
    left: 10%;
    top: 57%;
    font-weight: var(--fw-bold);
    font-size: 5.4cqw;
    line-height: 1;
    color: var(--ink-900);
    max-width: 68%;
}

.cc-message {
    left: 10%;
    top: 63.3%;
    font-size: 3.4cqw;
    color: var(--ink-900);
    max-width: 86%;
}

.cc-hashtag {
    left: 9.4%;
    top: 30.8%;
    font-size: 2.2cqw;
    color: #f9f9f9;
}

.cc-date {
    right: 9%;
    top: 58%;
    font-size: 3.4cqw;
    color: var(--ink-900);
    font-weight: 600;
}

.cc-pending {
  right: 6%;
  top: 44.5%;
  font-family: var(--font-ui, system-ui);
  font-size: 1.5cqw;
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  background: var(--status-pending-bg);
  border: 1px solid var(--status-pending-border);
  border-radius: var(--radius-sm);
  padding: 0.3cqw 0.9cqw;
}

/* Cassette form */
.cassette-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 2480 / 1748;
  container-type: inline-size;
}

.cassette-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.cf-field {
  position: absolute;
  font-family: var(--font-label);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--ink-muted);
  outline: none;
  padding: 0;
  box-sizing: border-box;
  color: var(--ink-900);
  font-size: 2.3cqw;
}

.cf-field:focus {
  border-bottom-color: var(--focus-ring);
}

.cf-field::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
}

.dform-field::placeholder,
.ts-box::placeholder {
  color: #230000;
  opacity: 1;
}

.cf-title {
  left: 12%;
  top: 13%;
  width: 80%;
  font-weight: var(--fw-bold);
  font-size: 7.1cqw;
  letter-spacing: -0.02em;
  word-spacing: -0.2em;
  color: var(--ink-900);
}

.cf-artist {
  left: 12%;
  top: 25.3%;
  width: 54%;
  font-size: 2.3cqw;
  color: var(--ink-900);
}

.cf-timestamp {
  right: 9%;
  top: 25.5%;
  width: 22%;
  text-align: right;
  font-size: 2.1cqw;
  color: var(--ink-900);
}

.cf-name {
  left: 22%;
  top: 58%;
  width: 56%;
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: 4.6cqw;
  color: var(--ink-900);
}

.cf-message {
  left: 16%;
  top: 66%;
  width: 68%;
  text-align: center;
  font-size: 2.05cqw;
  color: var(--ink-900);
  resize: none;
  border: none;
  border-bottom: 1px dashed var(--ink-muted);
}

.cf-message:focus {
  border-bottom-color: var(--focus-ring);
}

/* Signature block */
.signature-block {
  width: 100%;
  border-top: 1px solid var(--bg-card-border);
  border-bottom: 1px solid var(--bg-card-border);
  padding: var(--s-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.signature-text {
  font-family: var(--font-label);
  font-style: italic;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  margin: 0;
}

.copy-btn {
  font-family: var(--font-label);
  font-size: var(--fs-small);
  background: var(--white);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: none;
}

.copy-btn:hover {
  background: #f0f0f0;
}

.copy-btn:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}