/* S-02 SMM: a phone feed drawn as a technical drawing, next to the weekly content plan.
   Two size systems: the stage is a container (cqi = 1% of the stage) for the sheet layout,
   the phone is a container of its own (cqi = 1% of the phone) so its screen scales as a unit. */

.sm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sm {
  container-type: inline-size;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--paper);
}
.sm__sheet {
  position: relative;
  display: grid;
  grid-template-columns: 42cqi minmax(0, 1fr);
  column-gap: 6cqi;
  align-items: stretch;
  padding: 11cqi 3.4cqi 6.4cqi 10.4cqi;
  background:
    linear-gradient(rgba(31, 53, 99, .055) 1px, transparent 1px) 0 0 / 5cqi 5cqi,
    linear-gradient(90deg, rgba(31, 53, 99, .055) 1px, transparent 1px) 0 0 / 5cqi 5cqi;
}

/* ------------------------------------------------------------- device */
.sm-device { position: relative; align-self: start; aspect-ratio: 41 / 84; }

/* dimension lines: extension lines, a hairline, 45 degree ticks and a mono value */
.sm-dim {
  position: absolute; z-index: 1;
  color: var(--ink-3);
  font: 500 max(9.5px, 1.5cqi)/1 var(--mono); letter-spacing: .06em; white-space: nowrap;
  pointer-events: none;
}
.sm-dim::before, .sm-dim::after { content: ""; position: absolute; }
.sm-dim i {
  position: absolute; width: 1.8cqi; height: 1px; background: var(--ink-2);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.sm-dim span { position: absolute; padding: 0 1.2cqi; background: var(--paper); }
.sm-dim--w { left: 0; right: 0; top: -5.4cqi; height: 0; }
.sm-dim--w::before { left: 0; right: 0; top: 0; height: 1px; background: currentColor; }
.sm-dim--w::after {
  left: 0; right: 0; top: -1.2cqi; height: 5.7cqi; opacity: .7;
  background:
    linear-gradient(currentColor, currentColor) left / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 1px 100% no-repeat;
}
.sm-dim--w i:nth-of-type(1) { left: 0; top: 0; }
.sm-dim--w i:nth-of-type(2) { left: 100%; top: 0; }
.sm-dim--w span { left: 50%; top: 0; transform: translate(-50%, -50%); }
.sm-dim--h { top: 0; bottom: 0; left: -5.4cqi; width: 0; }
.sm-dim--h::before { top: 0; bottom: 0; left: 0; width: 1px; background: currentColor; }
.sm-dim--h::after {
  top: 0; bottom: 0; left: -1.2cqi; width: 5.7cqi; opacity: .7;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 1px no-repeat;
}
.sm-dim--h i:nth-of-type(1) { left: 0; top: 0; }
.sm-dim--h i:nth-of-type(2) { left: 0; top: 100%; }
.sm-dim--h span { left: 0; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }

/* ------------------------------------------------------------- phone */
.sm-phone {
  --tx: 1;
  --t: calc(1cqi * var(--tx));
  --sm-bg: #FFFBF3;
  --sm-ink: #2A1B14;
  --sm-mute: #8C7B6B;
  --sm-hair: rgba(42, 27, 20, .1);
  --sm-heart: #E0392B;
  position: absolute; inset: 0;
  container-type: inline-size;
  isolation: isolate;
  color: var(--sm-ink);
  font-family: var(--font);
}
/* hatched "volume" offset behind the outline, like a section drawing */
.sm-phone::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translate(2.6cqi, 2.6cqi);
  border-radius: 12cqi;
  background: repeating-linear-gradient(-45deg, rgba(31, 53, 99, .38) 0 1px, transparent 1px 4px);
}
.sm-body {
  position: absolute; inset: 0;
  padding: 2.6cqi;
  border: 1.5px solid var(--ink);
  border-radius: 12cqi;
  background: var(--sheet);
}
.sm-btn {
  position: absolute; width: 1.8cqi;
  background: var(--sheet); border: 1.5px solid var(--ink);
}
.sm-btn--mute, .sm-btn--up, .sm-btn--down { left: -1.4cqi; border-right: 0; border-radius: 1cqi 0 0 1cqi; }
.sm-btn--mute { top: 25cqi; height: 6cqi; }
.sm-btn--up { top: 38cqi; height: 11cqi; }
.sm-btn--down { top: 52cqi; height: 11cqi; }
.sm-btn--power { right: -1.4cqi; top: 44cqi; height: 17cqi; border-left: 0; border-radius: 0 1cqi 1cqi 0; }

.sm-screen {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 9.6cqi;
  background: var(--sm-bg);
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .sm-screen { cursor: grab; }
  .sm-screen.is-dragging { cursor: grabbing; }
  .sm-screen button, .sm-day { cursor: pointer; }
}
.sm-notch {
  position: absolute; z-index: 5; top: 2.6cqi; left: 50%;
  width: 24cqi; height: 6.4cqi; margin-left: -12cqi;
  border-radius: 3.2cqi; background: var(--sm-ink);
}
.sm-notch i {
  position: absolute; right: 2.2cqi; top: 50%;
  width: 2.6cqi; height: 2.6cqi; margin-top: -1.3cqi;
  border-radius: 50%; background: #3A2A22; box-shadow: inset 0 0 0 .5cqi #1B110C;
}
.sm-status {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 10cqi; padding: 1.6cqi 7.4cqi 0 8.2cqi;
  font-weight: 700; font-size: calc(var(--t) * 3.3); line-height: 1;
}
.sm-status__i { display: inline-flex; align-items: center; gap: 1.2cqi; }
.sm-status__i svg { height: 2.8cqi; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.sm-status__i svg:first-child { width: 4.2cqi; stroke-width: 2; }
.sm-status__i svg:last-child { width: 6.2cqi; }
.sm-appbar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 10cqi; padding: 0 4cqi;
  border-bottom: 1px solid var(--sm-hair);
}
.sm-appbar__who { display: inline-flex; align-items: center; gap: 1.4cqi; font-weight: 700; font-size: calc(var(--t) * 4.2); line-height: 1; letter-spacing: -.01em; }
.sm-appbar__who svg { width: 2.2cqi; height: 1.4cqi; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sm-appbar__ic { display: inline-flex; gap: 3.4cqi; }
.sm-appbar__ic svg { width: 5.8cqi; height: 5.8cqi; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------- feed */
.sm-feed {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
  touch-action: pan-y;
  outline: none;
}
.sm-feed::-webkit-scrollbar { display: none; }
.sm-feed.is-free { scroll-snap-type: none; }
.sm-feed:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.sm-screen button:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.sm-sp {
  position: absolute; z-index: 4; right: .8cqi; top: 22cqi; bottom: 15cqi; width: 1cqi;
  pointer-events: none;
}
.sm-sp::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 13cqi;
  top: calc(var(--sp, 0) * (100% - 13cqi));
  border-radius: 1cqi; background: rgba(31, 53, 99, .42);
}

.sm-stories {
  position: relative; scroll-snap-align: start;
  display: flex; justify-content: space-between;
  padding: 3.4cqi 2.6cqi 3cqi;
  border-bottom: 1px solid var(--sm-hair);
}
.sm-story {
  flex: none; width: 17.4cqi;
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqi;
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sm-ring { width: 15cqi; height: 15cqi; overflow: visible; transition: transform .25s var(--ease); }
.sm-story:active .sm-ring { transform: scale(.9); }
.sm-ring__dash, .sm-ring__ink { fill: none; }
.sm-ring__dash { stroke: #9A9088; stroke-width: 2.4; stroke-dasharray: 2.4 2.6; }
.sm-ring__ink {
  stroke: var(--ink); stroke-width: 3.6;
  stroke-dasharray: 100 100; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: 32px 32px;
  transition: stroke-dashoffset .75s var(--ease-io);
}
.sm-ring__av { transition: opacity .5s .2s; }
.sm-story.is-seen .sm-ring__ink { stroke-dashoffset: 100; }
.sm-story.is-seen .sm-ring__av { opacity: .72; }
.sm-story__l {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; font-size: calc(var(--t) * 2.9); line-height: 1.1;
  transition: color .4s;
}
.sm-story.is-seen .sm-story__l { color: var(--sm-mute); }
@keyframes sm-nudge { 0% { transform: none; } 38% { transform: translateY(-1.4cqi); } 100% { transform: none; } }
.sm-stories.is-on .sm-story { animation: sm-nudge .55s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }

.sm-post {
  position: relative; scroll-snap-align: start;
  padding-bottom: 3cqi;
  border-bottom: 1px solid var(--sm-hair);
}
.sm-post__head { display: flex; align-items: center; gap: 2.4cqi; height: 12cqi; padding: 0 3.4cqi; }
.sm-post__av { flex: none; width: 7.4cqi; height: 7.4cqi; }
.sm-post__who { flex: 1; font-weight: 700; font-size: calc(var(--t) * 3.5); line-height: 1; }
.sm-post__more { flex: none; width: 4.2cqi; fill: var(--sm-ink); transition: opacity .3s; }
.sm-post.is-on .sm-post__more { opacity: 0; }
.sm-post__img { position: relative; aspect-ratio: 1; overflow: hidden; background: #EBDDC7; }
.sm-post--reel .sm-post__img { aspect-ratio: 5 / 6; }
.sm-art { display: block; width: 100%; height: 100%; }
.sm-burst {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 28cqi; height: 28cqi; margin: -14cqi 0 0 -14cqi;
  fill: var(--sm-heart); stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; paint-order: stroke;
  filter: drop-shadow(0 .8cqi 1.6cqi rgba(42, 27, 20, .3));
  opacity: 0; pointer-events: none;
}
.sm-play {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 13cqi; height: 13cqi; margin: -6.5cqi 0 0 -6.5cqi;
  border: 1.5px solid #fff; border-radius: 50%;
  background: rgba(42, 27, 20, .36);
  pointer-events: none;
}
.sm-play svg { width: 5.6cqi; height: 5.6cqi; margin-left: .6cqi; fill: #fff; }
.sm-reel-tag {
  position: absolute; top: 2.4cqi; right: 2.4cqi;
  display: inline-flex; align-items: center; gap: 1cqi;
  padding: 1cqi 1.8cqi 1cqi 1.3cqi; border-radius: 9cqi;
  background: rgba(42, 27, 20, .58); color: #fff;
  font: 600 calc(var(--t) * 2.6)/1 var(--mono);
  pointer-events: none;
}
.sm-reel-tag svg { width: 3.6cqi; height: 3.6cqi; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sm-post__act { display: flex; align-items: center; gap: 3.8cqi; height: 12.5cqi; padding: 0 3.4cqi; }
.sm-ico { flex: none; width: 5.8cqi; height: 5.8cqi; fill: none; stroke: var(--sm-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sm-ico--save { margin-left: auto; }
.sm-like {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 1.5cqi;
  padding: 0; border: 0; background: none; color: var(--sm-ink);
  font-weight: 700; font-size: calc(var(--t) * 3.5); line-height: 1; font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.sm-like::before { content: ""; position: absolute; inset: -1.5cqi -3.5cqi -2.5cqi -2cqi; }
.sm-like__ico {
  width: 6.4cqi; height: 6.4cqi;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
  transition: fill .2s, stroke .2s;
}
.sm-like.is-liked .sm-like__ico { fill: var(--sm-heart); stroke: var(--sm-heart); }
.sm-like__fx {
  position: absolute; left: -2.8cqi; top: 50%; width: 12cqi; height: 12cqi; margin-top: -6cqi;
  fill: none; stroke: var(--sm-heart); stroke-width: 2; stroke-linecap: round;
  opacity: 0; pointer-events: none;
}
.sm-like__n { min-width: 2.6ch; }

.sm-post__cap { padding: 0 3.4cqi; font-size: calc(var(--t) * 3.5); line-height: 1.42; text-wrap: pretty; }
.sm-post__cap b { font-weight: 700; }

/* the plan's current day outlines its post (or the story row) with an ink frame and a sheet number */
.sm-post::after, .sm-stories::after {
  content: ""; position: absolute; z-index: 3; inset: 1.2cqi;
  border: 1.5px solid var(--ink); border-radius: 1.4cqi;
  opacity: 0; transform: scale(1.015);
  transition: opacity .3s, transform .45s var(--ease);
  pointer-events: none;
}
.sm-post::before, .sm-stories::before {
  content: attr(data-n); position: absolute; z-index: 4; top: 1.2cqi; right: 1.2cqi;
  padding: .9cqi 1.5cqi; border-radius: 0 1.2cqi 0 .6cqi;
  background: var(--ink); color: var(--paper);
  font: 500 calc(var(--t) * 2.6)/1 var(--mono); letter-spacing: .06em;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.sm-post.is-on::after, .sm-stories.is-on::after { opacity: 1; transform: none; }
.sm-post.is-on::before, .sm-stories.is-on::before { opacity: 1; }
.sm-stories::before { content: "00"; }

.sm-end {
  min-height: 12cqi;
  background: repeating-linear-gradient(-45deg, rgba(42, 27, 20, .1) 0 1px, transparent 1px 5px);
}
.sm-tabs {
  position: relative; flex: none;
  display: flex; justify-content: space-around; align-items: flex-start;
  height: 14cqi; padding: 2.6cqi 2cqi 0;
  border-top: 1px solid var(--sm-hair); background: var(--sm-bg);
}
.sm-tabs::after {
  content: ""; position: absolute; left: 50%; bottom: 1.6cqi;
  width: 30cqi; height: 1cqi; margin-left: -15cqi; border-radius: 1cqi; background: var(--sm-ink);
}
.sm-tabs svg { width: 6cqi; height: 6cqi; fill: none; stroke: var(--sm-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sm-tabs svg.is-on { fill: var(--sm-ink); }

/* reduced motion: state changes jump instead of easing */
@media (prefers-reduced-motion: reduce) {
  .sm-ring__ink, .sm-ring__av, .sm-story__l, .sm-ring, .sm-like__ico { transition: none; }
  .sm-stories.is-on .sm-story { animation: none; }
}

/* ---------------------------------------------------------- week plan */
.sm-plan {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--ink);
  background: var(--sheet);
}
.sm-plan__head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 5.8cqi; padding: 0 2.2cqi;
  background: var(--ink); color: var(--paper);
  font: 500 max(10px, 1.5cqi)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.sm-ruler { display: inline-flex; align-items: flex-end; gap: .8cqi; height: 2.2cqi; }
.sm-ruler i { display: block; width: 1px; height: 1cqi; background: currentColor; opacity: .55; transition: height .25s var(--ease), opacity .25s; }
.sm-ruler i.is-on { height: 2.2cqi; opacity: 1; width: 2px; }
.sm-days { flex: 1 1 auto; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); min-height: 0; }
.sm-day {
  position: relative;
  display: grid; grid-template-columns: 6.6cqi minmax(0, 1fr) auto; align-items: center; column-gap: 1.2cqi;
  width: 100%; padding: 0 2.2cqi 0 2.8cqi;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); text-align: left; font-family: var(--font);
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.sm-day:last-child { border-bottom: 0; }
.sm-day::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px;
  background: var(--red); transform: scaleY(0); transition: transform .3s var(--ease);
}
.sm-day:hover, .sm-day.is-on { background: rgba(31, 53, 99, .07); }
.sm-day.is-on::before { transform: scaleY(1); }
.sm-day:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.sm-day__d { font-weight: 700; font-size: max(15px, 2.5cqi); line-height: 1; }
.sm-day__h { font: 500 max(11px, 1.9cqi)/1 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: color .2s; }
.sm-day.is-on .sm-day__h { color: var(--red); }

.sm-chip {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .9cqi;
  padding: .9cqi 1.5cqi; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--sheet); color: var(--ink);
  font: 500 max(9.5px, 1.45cqi)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.sm-chip svg { flex: none; width: max(11px, 1.9cqi); height: max(11px, 1.9cqi); fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.sm-chip--story { border-style: dashed; }
.sm-chip--reel { background: var(--ink); color: var(--paper); }
.sm-legend { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sm-day, .sm-day::before, .sm-day__h, .sm-ruler i, .sm-post::after, .sm-stories::after, .sm-post::before, .sm-stories::before { transition: none; }
}

/* -------------------------------------------------------------- phones */
@media (max-width: 600px) {
  .sm { max-width: none; }
  .sm__sheet {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8cqi;
    padding: 11cqi 10.5cqi 4cqi;
  }
  .sm-device { width: 100%; }
  .sm-phone { --tx: 1.2; }
  .sm-plan { margin-inline: -7cqi; }
  .sm-plan__head { height: max(30px, 9cqi); padding: 0 3.4cqi; font-size: max(10px, 2.9cqi); }
  .sm-ruler { height: 3.4cqi; gap: 1.4cqi; }
  .sm-ruler i.is-on { height: 3.4cqi; }
  .sm-ruler i { height: 1.6cqi; }
  .sm-days { grid-template-rows: none; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sm-day {
    grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; row-gap: 2cqi;
    min-height: 19cqi; padding: 2.6cqi 0 2.4cqi;
    border-bottom: 0; border-right: 1px solid var(--line);
  }
  .sm-day:last-child { border-right: 0; }
  .sm-day::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; transform: scaleX(0); }
  .sm-day.is-on::before { transform: scaleX(1); }
  .sm-day__d { font-size: max(14px, 4.2cqi); }
  .sm-day__h { font-size: max(9.5px, 2.8cqi); letter-spacing: -.01em; }
  .sm-day .sm-chip { justify-self: center; padding: 1.5cqi; }
  .sm-day .sm-chip svg { width: max(15px, 4.4cqi); height: max(15px, 4.4cqi); }
  .sm-day .sm-chip__t {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .sm-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqi 3.4cqi;
    padding: 3cqi 2cqi; border-top: 1px solid var(--line);
  }
  .sm-legend .sm-chip { padding: 1.3cqi 2cqi; gap: 1.4cqi; }
}

/* narrow stage on a wide viewport (two-column sheet at 1024-1200): enlarge the phone's text */
@container (max-width: 560px) {
  .sm-phone { --tx: 1.2; }
}