/* Unified "My status" widget — desktop card + mobile popover.
   Themed via edition_page.css (--ed-*) + site theme tokens; no hardcoded theme colors. */

.my-status { margin-top: .75rem; }

.ms-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted, #888);
  margin-bottom: .35rem;
}

/* desktop card */
.my-status-card {
  border: 1px solid var(--ed-line);
  border-radius: 12px;
  padding: .85rem;
  background: var(--ed-panel);
}

/* segmented status control */
.ms-seg {
  display: flex;
  border: 1px solid var(--ed-line);
  border-radius: 8px;
  overflow: hidden;
}

.ms-seg-btn {
  flex: 1;
  min-height: 38px;
  padding: .4rem .5rem;
  font-size: .8rem;
  border: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.ms-seg-btn + .ms-seg-btn { border-left: 1px solid var(--ed-line); }

.ms-seg-btn:hover { background: color-mix(in srgb, var(--ed-accent) 14%, var(--surface)); }

.ms-seg-btn.is-on {
  background: var(--ed-accent);
  color: #fff;
  font-weight: 600;
}

/* progress / rating / ownership rows */
.ms-progress,
.ms-rating,
.ms-own-row { margin-top: .75rem; }

.ms-progress input[type="range"] {
  width: 100%;
  accent-color: var(--ed-accent);
}

.ms-own-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.ms-own-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem;
}

.ms-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.ms-card-tools {
  display: flex;
  gap: .5rem;
}

.ms-share { position: relative; }
.my-status .rail-share-feedback {
  position: absolute;
  top: 100%;
  right: 0;
  width: max-content;
  font-size: .76rem;
}

.ms-shelf-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .75rem;
}

.ms-log-wrap {
  position: relative;
  flex: 0 0 auto;
}

.ms-log-state-slot {
  min-height: 1.2rem;
  display: flex;
  align-items: center;
}

.ms-log-state {
  color: var(--text-muted, #888);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.2rem;
}

.ms-log-state span {
  color: var(--text);
}

/* Shared shimmer, still used by .ms-own-btn--loading. The reading-log slot no
   longer has a skeleton: it advertised a row most editions do not have, and
   tearing it down collapsed .ms-log-state-slot's reserved line. */
@keyframes ms-log-skeleton-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.ms-log-menu {
  position: absolute;
  right: 0;
  z-index: 20;
  margin-top: .4rem;
  width: 18rem;
  max-width: calc(100vw - 2rem);
  padding: .75rem;
  border: 1px solid var(--ed-line);
  border-radius: 12px;
  background: var(--ed-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  display: grid;
  gap: .6rem;
}

.ms-own-btn {
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--ed-line);
  background: var(--surface);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

.ms-own-btn.is-own,
.ms-own-btn.is-read {
  background: var(--accent-canonical);
  color: #fff;
  border-color: transparent;
}

.ms-own-btn--loading,
.ms-own-btn--loading:disabled {
  color: transparent;
  border-color: transparent;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ed-line) 76%, transparent),
    color-mix(in srgb, var(--text-muted, #888) 22%, transparent),
    color-mix(in srgb, var(--ed-line) 76%, transparent)
  );
  background-size: 200% 100%;
  animation: ms-log-skeleton-pulse 1.1s ease-in-out infinite;
}

/* Shared star-rating INPUT.

   Markup: `star_rating_input` in _entity_star_rating.html. Behaviour:
   static/js/star_rating.js. Three surfaces render it -- the edition/issue
   ribbon, the reviews compose form, and the shelf control below.

   Deliberately carries NO size or colour. `.ms-star` here, `.review-star` in
   reviews.css and `.star-rate--ribbon` in edition_page.css each keep their own,
   which is what lets the two governed tap-target rules that pin them go on
   applying unchanged. Only the affordances that were missing from all three
   -- a visible focus ring and a disabled state -- live here.

   This file rather than a new stylesheet: it already accompanies the tracking
   macros on every surface that renders them AND loads on both the edition and
   issue pages, where the ribbon control sits. A new shared file would be
   render-blocking on every page for the sake of three.

   Scoped to `.star-rate button` rather than a `star-rate-btn` class: these
   rules need no name of their own, and a new `*-btn` selector would add a
   local primitive to the lower-only ratchet in
   tests/test_tta79_frontend_gate_closeout.py. */
.star-rate { display: inline-flex; align-items: center; }
.star-rate button { cursor: pointer; }
.star-rate button:disabled { cursor: progress; opacity: .65; }
.star-rate button:focus-visible {
  outline: 2px solid var(--ed-accent, #f2c14e);
  outline-offset: 1px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .star-rate button { transition: color .1s ease-out; }
}

/* star rating */
.ms-star {
  background: none;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ed-line);
  cursor: pointer;
  padding: 0 .1rem;
}

.ms-star.is-on { color: #f2c14e; }

/* compact popover (mobile) */
.my-status-compact { position: relative; }

.ms-summary {
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--ed-line);
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.ms-pop {
  position: absolute;
  z-index: 20;
  margin-top: .4rem;
  width: 16rem;
  max-width: calc(100vw - 2rem);
  padding: .75rem;
  border: 1px solid var(--ed-line);
  border-radius: 12px;
  background: var(--ed-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  display: grid;
  gap: .6rem;
}

.ms-pop input[type="range"] {
  width: 100%;
  accent-color: var(--ed-accent);
}

/* Edition page uses the card on roomy containers and the compact controls on
   narrow containers. */
.edition-view .ms-desktop { display: block; }
.edition-view .ms-mobile { display: none; }

.ms-mobile-actions {
  display: flex;
  gap: 0.5rem;
}
.ms-mobile-actions > .ms-own-btn,
.ms-mobile-actions > .ms-summary {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding-left: .55rem;
  padding-right: .55rem;
}

.ms-mobile-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  margin-top: .5rem;
}

.ms-mobile-tools .ms-log-toggle { margin-top: 0; }
.ms-share--compact .ms-share-btn { min-height: 44px; }

.edition-view .ms-mobile-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edition-view .ms-mobile-actions > .ms-own-btn,
.edition-view .ms-mobile-actions > .ms-summary {
  flex: initial;
}

.ms-own-btn.is-want {
  background: var(--accent-canonical);
  color: #fff;
  border-color: transparent;
}

/* full-width log expander trigger (edition mobile status) */
.ms-log-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  min-height: 44px;
  margin-top: .5rem;
  padding: .45rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--ed-line);
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.ms-log-toggle.is-open {
  background: color-mix(in srgb, var(--ed-accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--ed-accent) 40%, var(--ed-line));
}
.ms-log-caret {
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.ms-log-toggle.is-open .ms-log-caret { transform: rotate(-135deg); }

/* inline log panel — in normal flow, no absolute positioning, never clips */
.ms-log-inline {
  margin-top: .5rem;
  padding: .75rem;
  border: 1px solid var(--ed-line);
  border-radius: 12px;
  background: var(--ed-panel);
  display: grid;
  gap: .6rem;
}
.ms-log-inline input[type="range"] {
  width: 100%;
  accent-color: var(--ed-accent);
}

@media (prefers-reduced-motion: reduce) {
  .ms-log-caret { transition: none; }
  .ms-own-btn--loading { animation: none; }
}

@container edition (max-width: 640px) {
  .edition-view .ms-desktop { display: none; }
  .edition-view .ms-mobile { display: block; }
}

@media (max-width: 640px) {
  .ms-seg-btn { min-height: 44px; }

  .ms-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .edition-stickybar .esb-btn.is-read {
    border-color: color-mix(in srgb, var(--accent-canonical) 55%, transparent);
    color: var(--ed-accent);
  }

  .edition-stickybar .esb-log {
    flex: 1;
    padding: 0;
  }
}

.edition-actions-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
  align-items: center;
}

.edition-buy-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-canonical);
  color: #161009;
  font-weight: 800;
  text-decoration: none;
}

.edition-buy-btn:hover { filter: brightness(1.06); color: #161009; }

.edition-buy-btn__shipping {
  color: #5b544a;
  font-size: 0.78em;
  font-weight: 650;
}

.edition-signin-track {
  color: var(--text-muted);
  font-weight: 700;
  text-decoration: none;
}

.edition-signin-track:hover { color: var(--ed-accent); }

.edition-offer-detail {
  flex-basis: 100%;
  max-width: 42rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.edition-buy-btn {
  flex-wrap: wrap;
  white-space: normal;
  max-width: 100%;
  padding-block: 0.6rem;
}