/* /yours/ page css (spec 0132). Kept in its own file, not inlined, because the
   kebab/menu/pin recipes below run past 60 lines (brief: apps/web/notifs.js's page css
   idiom is a <style> block; this page is the one allowed exception). Every recipe here
   is lifted verbatim from the approved mockup (mockup-your-sagas.html) or from the home
   shelf tile (apps/web/index.html) - the design is approved and is not reinterpreted.

   .hm-shelf/.hm-tile/.hm-thumb/.hm-ttl/.hm-by/.t1-.t6 are NOT in shell.css - they live
   only inside index.html's own <style> (spec 0119 era), so this page brings its own copy
   under the same class names rather than forking new ones, exactly as the brief asks. */

/* spec 0120's own token, applied here the same way every other pill-shaped control in
   the shell does (shell.css :root declares --pill-k/--pill-shape once, globally). */
.pill-ctl { border-radius: calc(var(--h) / var(--pill-k, 6)); corner-shape: var(--pill-shape, round); }

/* ---- toolbar: filters, search, new saga -------------------------------------------- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.filters { display: flex; align-items: center; gap: 10px; }
/* filter chips: the .hm-nw nav-pill geometry (shell.css:55-61) at rest/hover/selected -
   not .hm-nw itself, which is always-on .16; a filter is off until pressed. */
.filter { --h: 38px; display: inline-flex; align-items: center; height: var(--h);
  padding: 0 .95rem; font-family: inherit; font-weight: 600; font-size: 14px;
  color: rgba(255,255,255,.7); background: none; border: 0; cursor: pointer;
  transition: background .15s ease, color .15s ease; white-space: nowrap; }
.filter:hover { background: rgba(255,255,255,.28); }
.filter[aria-pressed="true"] { background: rgba(255,255,255,.16); color: #fff; }
.spacer { flex: 1 1 auto; }
/* "new saga": the .hm-nw recipe itself, reused directly rather than forked (the white
   .84 fill Saaim removed 2026-09-20, shell.css, must not come back here). */
.btn-new { --h: 38px; display: inline-flex; align-items: center; height: var(--h);
  padding: 0 .95rem; background: rgba(255,255,255,.16); color: #fff; font-weight: 600;
  font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, transform .12s ease; }
.btn-new:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }
.ghost { --h: 38px; display: inline-flex; align-items: center; height: var(--h);
  padding: 0 .7rem; font-size: 13px; color: rgba(255,255,255,.35); cursor: default;
  white-space: nowrap; }
.search-field { --h: 38px; display: inline-flex; align-items: center; height: var(--h);
  width: 220px; font: inherit; font-size: 14px; color: #fff; padding: 0 .95rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.search-field::placeholder { color: rgba(255,255,255,.38); }
/* `hidden` loses to an author `display` rule of equal specificity - same fix shell.css
   pays for on .hm-nav [hidden]. */
.search-field[hidden] { display: none; }

/* ---- shelf tile: the home page's own recipe (index.html:402-461), same class names -- */
.hm-shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.hm-tile { display: block; text-align: left; background: none; border: 0; padding: 0;
  cursor: pointer; color: #fff; font-family: inherit; min-width: 0; text-decoration: none; }
.hm-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9;
  border-radius: 10px; position: relative; overflow: hidden; background: #1c1917; padding: 9px; }
.hm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.hm-ttl { display: block; font-weight: 700; font-size: 13px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-by { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5);
  margin-top: 8px; }
.hm-tilewrap.archived .hm-tile { opacity: .55; }
.shelf-empty { margin: 48px 0 0; text-align: center; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.5); }
@media (max-width: 560px) { .hm-shelf { grid-template-columns: repeat(2, 1fr); } }

/* placeholder art - the closed palette only, index.html:461-469 verbatim */
.t1 { background: radial-gradient(46% 50% at 36% 30%, rgba(245,159,148,.46), transparent 66%),
      radial-gradient(30% 32% at 74% 20%, rgba(235,62,40,.42), transparent 62%),
      linear-gradient(104deg, #241512, #3a1f1b 46%, #181110); }
.t2 { background: radial-gradient(60% 56% at 74% 26%, rgba(235,62,40,.5), transparent 60%), #201310; }
.t3 { background: radial-gradient(58% 64% at 26% 32%, rgba(251,214,208,.34), transparent 60%),
      radial-gradient(54% 54% at 82% 74%, rgba(235,62,40,.48), transparent 60%), #221614; }
.t4 { background: radial-gradient(78% 62% at 50% 10%, rgba(241,120,105,.46), transparent 62%), #211311; }
.t5 { background: radial-gradient(54% 54% at 34% 74%, rgba(235,62,40,.46), transparent 60%), #1d1210; }
.t6 { background: radial-gradient(50% 60% at 68% 34%, rgba(245,159,148,.36), transparent 60%), #211514; }

/* ---- kebab / pin / menu: lifted verbatim from the mockup (search-field :89-95,
   hm-tilewrap/pin :101-128, kebab :129-138, menu :140-160) ---------------------------- */
.hm-tilewrap { position: relative; min-width: 0; }
.pin-badge { position: absolute; left: 6px; bottom: 6px; width: 16px; height: 16px;
  color: rgba(255,255,255,.7); pointer-events: none; z-index: 1; }
.pin-badge svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.kebab { --h: 30px; position: absolute; top: 6px; right: 6px; z-index: 2; width: var(--h); height: var(--h);
  font-family: inherit; border: .75px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; opacity: 0; transform: scale(.9);
  transition: opacity .14s ease, transform .14s ease, background .14s ease; }
.hm-tilewrap:hover .kebab, .hm-tilewrap.menu-open .kebab, .hm-tilewrap.always-kebab .kebab { opacity: 1; transform: none; }
@media (hover: none) { .kebab { opacity: 1; transform: none; } }
.kebab:hover { background: rgba(0,0,0,.72); }

.menu { position: absolute; top: 40px; right: 6px; z-index: 5; width: 190px;
  background: #17140f; border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
  box-shadow: 0 18px 46px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
  padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.menu.menu-left { left: 0; right: auto; }
.menu button { all: unset; box-sizing: border-box; display: flex; align-items: center;
  gap: 10px; width: 100%; height: 36px; padding: 0 10px;
  font: 600 14px 'Nunito', -apple-system, sans-serif;
  color: rgba(255,255,255,.8); border-radius: 8px; cursor: pointer; }
.menu button:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu .mi-ic { width: 16px; height: 16px; flex: none; fill: currentColor; }
.menu button.danger { color: rgba(235,62,40,.82); }
.menu button.danger:hover { background: rgba(255,255,255,.06); color: #eb3e28; }
.menu-hr { height: 1px; background: rgba(255,255,255,.08); margin: 4px; flex: none; }

/* ---- inline failure notice (judge round 1, PR #1979): a verb or delete that failed
   used to say nothing at all. One line, the page's own voice, cleared on the next
   success - not a redesign, just the type scale .hm-by already uses for a status line. */
.hm-notice { margin: -8px 0 14px; font-size: 12px; font-weight: 600; color: rgba(235,62,40,.82); }

/* ---- empty state: the product's .mk-empty idiom (tabbar.css:766-771), un-hidden here
   at every width - tabbar.css's own copy is display:none outside the docked-bar media
   query because every other page that carries it is phone-only there; /yours/ is the
   one page whose empty state must show at 1200 too (mockup frame 4), so this page names
   its own class rather than fighting that page-scoped display:none. Properties below are
   the same declarations, not a redesign. */
.mk-empty2 { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 70px 21px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.mk-empty-ico { opacity: .35; color: #fff; fill: currentColor; }
.mk-empty-h { margin: 4px 0 0; font: 700 16px/1.3 'Nunito', -apple-system, sans-serif;
  color: #fff; text-transform: lowercase; }
.mk-empty-sub { margin: 0; font: 400 13.5px/1.5 'Nunito', -apple-system, sans-serif;
  color: rgba(255,255,255,.75); }
.sg-btn.mk-empty-go { margin-top: 4px; }

/* ---- phone 390: filters row, no ghost, no search (mockup frame 5) ------------------- */
@media (max-width: 560px) {
  .toolbar { flex-wrap: wrap; }
  .filters { overflow-x: auto; }
  .search-field, .ghost { display: none; }
}

/* no making sagas on a phone for now: the toolbar's "new saga" is not drawn at the site's
   phone width (tabbar.css's 900px). yours.js leaves the empty state's out at that width. */
@media (max-width: 900px) {
  .btn-new { display: none; }
}

/* ---- a saga still being made (spec 0202 D-m): alive like the sprites, never a bar, a percent or a time ----
   The picture breathes red in steps (the site's pixel rhythm, not a smooth fade), and one small Saga sprite per
   thing being done, one to three, hops about on it. What is being done shows on hover or focus. Reduced motion
   holds all of it still. */
.hm-tilewrap.making .hm-thumb { box-shadow: inset 0 0 0 1px rgba(235,62,40,.34); }
.hm-tilewrap.making .hm-thumb::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(60% 70% at 50% 62%, rgba(235,62,40,.34), rgba(235,62,40,0) 70%); animation: making-breathe 2.4s steps(6, end) infinite; }
.making-sprites { position: absolute; left: 0; right: 0; bottom: 14%; display: flex; justify-content: center; gap: 14px; z-index: 2; pointer-events: none; }
.making-one { display: block; animation: making-hop 1.2s steps(6, end) infinite; animation-delay: calc(var(--i, 0) * -.4s); }
.making-sprite { display: block; width: 22px; height: 22px; image-rendering: pixelated; }
.hm-doing { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 22px 9px 7px;
  font: 700 11.5px/1.3 'Nunito', -apple-system, sans-serif; color: #fff; text-align: left; pointer-events: none;
  background: linear-gradient(to top, rgba(12,12,14,.92), rgba(12,12,14,0)); opacity: 0; transition: opacity .15s ease; }
.hm-doing span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tilewrap.making:hover .hm-doing, .hm-tilewrap.making:focus-within .hm-doing { opacity: 1; }
.hm-tilewrap.making .hm-by { color: #eb3e28; }
@keyframes making-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes making-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .hm-tilewrap.making .hm-thumb::before, .making-one { animation: none; }
  .hm-tilewrap.making .hm-thumb::before { opacity: .8; }
}