/* ==========================================================================
   REVIEW BAR — shared prototype review/navigation layer
   --------------------------------------------------------------------------
   This is NOT part of any Ink & Stamp design concept. It is the scaffolding
   that wraps each concept for review: the placeholder disclaimer, a quiet
   link back to the concept chooser, and the concept's identifier.

   Every concept page links this file and uses the same markup, so future
   concepts inherit the pattern automatically:

     <div class="review-bar" role="note">
       <a class="review-bar__back" href="../index.html"> … </a>
       <p class="review-bar__note"> … </p>
       <span class="review-bar__label">Option 0X</span>
     </div>

   Self-contained on purpose — it must not depend on a concept's tokens.
   ========================================================================== */

.review-bar {
  /* Sticky so it stays available while scrolling, and in flow so it can
     never overlap the concept's own header. */
  position: sticky;
  top: 0;
  z-index: 500;

  display: grid;
  /* Equal outer tracks keep the disclaimer optically centred in the bar
     regardless of how wide the back link and label happen to be. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;

  padding: 8px 20px;
  background: #241A12;                      /* Espresso */
  border-bottom: 1px solid rgba(189, 149, 119, 0.42);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  line-height: 1.35;
}

/* --- The disclaimer stays the most prominent thing in the bar ----------- */
.review-bar__note {
  margin: 0;
  grid-column: 2;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #F4EDE9;                            /* Blush Cream — 14.7:1 */
}
.review-bar__note strong {
  color: #BD9577;                            /* Copper — 6.9:1 */
  font-weight: 600;
}

/* --- Quiet utility link, deliberately secondary ------------------------- */
.review-bar__back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;

  /* Warm beige held back to ~70% — reads muted but still clears AA (6.1:1) */
  color: rgba(227, 210, 202, 0.70);
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.review-bar__back:hover,
.review-bar__back:focus-visible {
  color: #F4EDE9;
  border-bottom-color: rgba(244, 237, 233, 0.45);
}
.review-bar__back:focus-visible {
  outline: 2px solid #BD9577;
  outline-offset: 3px;
  border-radius: 2px;
}

.review-bar__arrow {
  display: inline-block;
  transition: transform .16s ease;
}
.review-bar__back:hover .review-bar__arrow,
.review-bar__back:focus-visible .review-bar__arrow {
  transform: translateX(-2px);
}

/* Long label on desktop, short label on small screens */
.review-bar__back-short { display: none; }

/* --- Concept identifier, equally understated --------------------------- */
.review-bar__label {
  grid-column: 3;
  justify-self: end;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(227, 210, 202, 0.62);
}

/* --------------------------------------------------------------------------
   Mobile: two compact rows — controls above, disclaimer across the full width.
   Keeps the 44px tap target without squeezing the disclaimer to three lines.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .review-bar {
    grid-template-columns: auto auto;
    grid-template-areas:
      "back  label"
      "note  note";
    gap: 0 12px;
    padding: 0 16px 7px;
    justify-content: space-between;
  }

  .review-bar__back  { grid-area: back;  min-height: 44px; }   /* tap target */
  .review-bar__label { grid-area: label; align-self: center; min-height: 44px;
                       display: inline-flex; align-items: center; }
  .review-bar__note  { grid-area: note; grid-column: 1 / -1; font-size: 12px; }

  .review-bar__back-full  { display: none; }
  .review-bar__back-short { display: inline; }
}

@media (max-width: 380px) {
  .review-bar { padding-inline: 12px; }
  /* Tuned so the disclaimer holds one line at 375px, keeping the bar compact.
     If a fallback font runs wider it simply wraps — still no overlap. */
  .review-bar__note { font-size: 11px; letter-spacing: 0; }
}

/* --------------------------------------------------------------------------
   Motion / print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .review-bar__back,
  .review-bar__arrow { transition: none; }
  .review-bar__back:hover .review-bar__arrow { transform: none; }
}

@media print {
  .review-bar { position: static; }
  .review-bar__back, .review-bar__label { display: none; }
}