/* Week strip of the public home ("Uma semana de posts, para cada perfil."): the week filling up. See src/flicko-week-strip.js. */
[data-flicko-week] { --fws-ink: rgb(var(--ink-rgb, 22 48 79)); --fws-muted: rgb(var(--ink-rgb, 22 48 79) / 0.65); --fws-gold: #e9b638; }
.fws-bar { position: relative; }
.fws-list { position: relative; overflow: hidden; border-radius: 14px; padding-block: 2px; }
.fws-day { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.fws-label { font: 500 0.6875rem/1 var(--font-sans, Inter, system-ui, sans-serif); color: var(--fws-muted); transition: color 0.3s ease-out; } /* fix r2: 0.5 alpha was 3.5:1, 0.65 = 5.7:1 (AA) */
.fws-day.is-filled .fws-label { color: var(--fws-ink); }

/* The slot: dashed empty ring → post thumbnail. Fits 7 columns down to 360 px (min 34 px). */
.fws-slot { position: relative; display: block; width: clamp(34px, calc(100% - 8px), 44px); aspect-ratio: 1; }
.fws-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgb(var(--ink-rgb, 22 48 79) / 0.3); background: rgb(var(--ink-rgb, 22 48 79) / 0.04); transition: opacity 0.25s ease-out, transform 0.3s ease-out; }
.fws-day.is-filled .fws-ring { opacity: 0; transform: scale(1.15); }
.fws-media { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; opacity: 0; transform: scale(0.6); box-shadow: 0 0 0 2px rgba(255, 253, 249, 0.92), 0 6px 14px -8px rgba(22, 48, 79, 0.6); }
.dark .fws-media { box-shadow: 0 0 0 2px rgba(30, 38, 58, 0.95), 0 6px 14px -8px rgba(0, 0, 0, 0.8); }
.fws-day.is-filled .fws-media { opacity: 1; transform: none; animation: fws-pop 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.fws-thumb { position: absolute; inset: 0; display: block; transition: opacity 0.6s ease-in-out; }
.fws-day:not(.is-filled) .fws-thumb { opacity: 0; }
.fws-day.is-filled .fws-thumb { animation: fws-fade 0.3s ease-out 0.06s both; }
.fws-thumb.is-swap { animation: none !important; }
.fws-thumb.is-entering { opacity: 0; }
.fws-thumb svg { display: block; width: 100%; height: 100%; }
.fws-badge { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: var(--fws-ink); background: rgba(255, 253, 249, 0.97); box-shadow: rgba(22, 48, 79, 0.55) 0 3px 8px -4px; opacity: 0; transform: scale(0.3); transition: opacity 0.2s ease-out, transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dark .fws-badge { background: rgba(30, 38, 58, 0.97); box-shadow: rgba(0, 0, 0, 0.8) 0 3px 8px -4px; }
.dark .fws-badge:not([style]) { color: #f3efe6; }
.fws-badge svg { width: 9px; height: 9px; }
.fws-day.is-badge .fws-badge { opacity: 1; transform: none; }
.fws-time { display: inline-flex; align-items: center; gap: 2px; font: 600 0.625rem/1 var(--font-sans, Inter, system-ui, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: rgb(var(--ink-rgb, 22 48 79) / 0.62); white-space: nowrap; opacity: 0; transform: translateY(-3px); transition: opacity 0.25s ease-out, transform 0.3s ease-out; }
.fws-time svg { width: 8px; height: 8px; color: #b8860b; flex: none; }
.dark .fws-time svg { color: var(--fws-gold); }
.fws-day.is-time .fws-time { opacity: 1; transform: none; }

/* Flicko mark + the tiny card he drops. */
.fws-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.fws-mark svg { display: block; }
.fws-mark.is-drop { animation: fws-hop 0.34s cubic-bezier(0.3, 0.7, 0.4, 1); }
.fws-dot { transform-box: fill-box; transform-origin: center; }
.fws-dot.is-drop { animation: fws-dot 0.34s cubic-bezier(0.3, 0.7, 0.4, 1); }
.fws-fly { position: absolute; z-index: 2; width: 10px; height: 12px; border-radius: 3px; background: linear-gradient(160deg, #fff 0 38%, #f4c95d 38% 100%); box-shadow: 0 0 0 1px rgba(22, 48, 79, 0.18), 0 4px 8px -3px rgba(22, 48, 79, 0.5); pointer-events: none; }

/* All filled: shimmer across the row, the caption lights up. */
.fws-shimmer { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%); transform: translateX(-110%); opacity: 0; }
.dark .fws-shimmer { background: linear-gradient(100deg, transparent 30%, rgba(200, 215, 245, 0.22) 50%, transparent 70%); }
.fws-done:not(.fws-static) .fws-shimmer { animation: fws-shimmer 1.15s ease-in-out both; }
.fws-caption-mark { background: linear-gradient(transparent 60%, rgba(233, 182, 56, 0.38) 60%, rgba(233, 182, 56, 0.38) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, color 0.4s ease-out; padding-inline: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fws-done .fws-caption-mark { background-size: 100% 100%; color: var(--fws-ink); }
.dark .fws-caption-mark { background-image: linear-gradient(transparent 60%, rgba(233, 182, 56, 0.3) 60%, rgba(233, 182, 56, 0.3) 92%, transparent 92%); }

@keyframes fws-pop { 0% { transform: scale(0.6); opacity: 0; } 55% { transform: scale(1.09); opacity: 1; } 80% { transform: scale(0.97); } 100% { transform: scale(1); opacity: 1; } }
@keyframes fws-fade { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
@keyframes fws-hop { 0% { transform: none; } 40% { transform: translateY(-4px) rotate(-8deg); } 100% { transform: none; } }
@keyframes fws-dot { 0% { transform: none; } 35% { transform: scale(1.4); } 70% { transform: scale(0.92); } 100% { transform: none; } }
@keyframes fws-shimmer { 0% { transform: translateX(-110%); opacity: 1; } 100% { transform: translateX(110%); opacity: 1; } }

@media (min-width: 640px) { .fws-label { font-size: 0.75rem; } }
/* Phones: 7 columns stay on one row (no page overflow); the slots shrink to the 34 px floor. */
@media (max-width: 480px) {
  .fws-day { gap: 4px; }
  .fws-label { font-size: 0.625rem; }
  .fws-time { font-size: 0.5625rem; gap: 1px; }
  .fws-time svg { display: none; }
  .fws-badge { width: 15px; height: 15px; right: -3px; bottom: -2px; }
  .fws-badge svg { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fws-ring, .fws-media, .fws-thumb, .fws-badge, .fws-time, .fws-label, .fws-caption-mark { transition: none !important; animation: none !important; }
  .fws-shimmer, .fws-fly { display: none; }
  .fws-mark.is-drop, .fws-dot.is-drop { animation: none; }
}
.fws-static .fws-media, .fws-static .fws-thumb { animation: none !important; }