/* Only the hero bar's '■ ■ ■' still renders in this family (typography.css overrides the rest), so the file is a subset with just the space and ■. Re-subset the full font to use more characters. */ @font-face { font-family: 'Ark Pixel 12px'; src: url('assets/ark-pixel-squares.woff2') format('woff2'); font-display: swap; unicode-range: U+0020, U+25A0; } html, body { margin: 0; background: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); color-scheme: light; } body { padding: 0; min-height: 100vh; } #couple-corner { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); border: 0; box-shadow: none; } #couple-corner .cc-grid { padding-bottom: 14px; } #couple-corner button { cursor: pointer; } #couple-corner button:disabled { cursor: default; } /* All subpages keep their add action in the same top-right slot. */ #couple-corner .cc-page-toolbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; min-height: 34px; margin: 2px 0 14px; } #couple-corner .cc-page-toolbar .cc-small { flex: 1 1 auto; min-width: 0; } #couple-corner .cc-page-toolbar > :last-child { flex: 0 0 auto; margin-left: auto; } #couple-corner .cc-page-toolbar .cc-file-btn { display: inline-flex; align-items: center; } /* Page numbers for the longer private lists. */ #couple-corner .cc-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 4px; padding: 10px 8px 2px; border-top: 1px dashed var(--cc-line); } #couple-corner .cc-page-range { color: var(--cc-ink); font: 12px/1.4 var(--cc-pixel); white-space: nowrap; } #couple-corner .cc-page-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } #couple-corner .cc-page-buttons .cc-button { min-width: 30px; min-height: 30px; padding: 3px 7px; text-align: center; } #couple-corner .cc-page-buttons .cc-button[aria-current="page"] { background: var(--cc-ink); border-color: var(--cc-ink); color: var(--cc-paper); box-shadow: inset 1px 1px 0 rgb(0 0 0 / .2); } #couple-corner .cc-page-buttons .cc-button:disabled { opacity: .42; } #couple-corner .cc-page-gap { padding: 0 3px; line-height: 30px; } /* top bar + sync chip */ #couple-corner .cc-sync { font: 11px/1.3 var(--cc-pixel); letter-spacing: 1px; padding: 3px 7px; background: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk)) / 0.20); border: 1px solid hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk)) / 0.40); } #couple-corner .cc-sync[data-state=local] { background: hsl(calc(26deg + var(--a-dh)) calc(84% * var(--a-s)) calc(var(--lo) + 82.4% * var(--lk))); color: hsl(calc(23deg + var(--a-dh)) calc(47% * var(--a-s)) calc(var(--lo) + 32.5% * var(--lk))); border-color: hsl(calc(34deg + var(--a-dh)) calc(100% * var(--a-s)) calc(var(--lo) + 95.1% * var(--lk))); } #couple-corner .cc-sync[data-state=offline], #couple-corner .cc-sync[data-state=error], #couple-corner .cc-sync[data-state=ratelimited] { background: hsl(calc(25deg + var(--a-dh)) calc(74% * var(--a-s)) calc(var(--lo) + 83.1% * var(--lk))); color: hsl(calc(17deg + var(--a-dh)) calc(61% * var(--a-s)) calc(var(--lo) + 33.9% * var(--lk))); } /* browser strip buttons */ #couple-corner .cc-nav-buttons { display: flex; gap: 4px; } #couple-corner .cc-strip-btn { background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); border: 1px solid hsl(calc(86deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 78.2% * var(--lk))); min-width: 28px; min-height: 26px; padding: 0 6px; font: 13px/1 'Courier New', monospace; color: hsl(calc(98deg + var(--g-dh)) calc(14% * var(--g-s)) calc(var(--lo) + 40.8% * var(--lk))); } #couple-corner .cc-strip-btn:hover { background: hsl(calc(38deg + var(--a-dh)) calc(72% * var(--a-s)) calc(var(--lo) + 87.5% * var(--lk))); } @media (max-width: 600px) { #couple-corner .cc-browser-strip > .cc-nav-buttons { display: flex; } #couple-corner .cc-strip-stars { display: none; } } /* window minimize button */ #couple-corner .cc-min { width: 22px; height: 20px; padding: 0; line-height: 1; border: 1px solid hsl(calc(78deg + var(--g-dh)) calc(12% * var(--g-s)) calc(var(--lo) + 58.0% * var(--lk))); background: hsl(calc(56deg + var(--a-dh)) calc(53% * var(--a-s)) calc(var(--lo) + 94.1% * var(--lk))); box-shadow: inset 1px 1px hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); color: hsl(calc(91deg + var(--g-dh)) calc(12% * var(--g-s)) calc(var(--lo) + 39.4% * var(--lk))); font: 12px/1 monospace; flex-shrink: 0; } #couple-corner .cc-min:hover { background: hsl(calc(25deg + var(--a-dh)) calc(74% * var(--a-s)) calc(var(--lo) + 83.1% * var(--lk))); } #couple-corner .cc-collapsed > .cc-body { display: none; } #couple-corner .cc-collapsed { box-shadow: 2px 2px 0 hsl(calc(95deg + var(--g-dh)) calc(18% * var(--g-s)) calc(var(--lo) + 68.0% * var(--lk)) / 0.33); } /* player card */ #couple-corner .cc-avatar { gap: 6px; align-items: flex-start; } #couple-corner .cc-avatar-btn, #couple-corner .cc-avatar-static { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 3px; font: 11px/1.2 var(--cc-zh), monospace; color: hsl(calc(37deg + var(--a-dh)) calc(25% * var(--a-s)) calc(var(--lo) + 35.5% * var(--lk))); } #couple-corner .cc-avatar-btn[aria-pressed=true] .cc-badge, #couple-corner .cc-avatar-static.me .cc-badge { outline: 2px dashed hsl(calc(18deg + var(--a-dh)) calc(51% * var(--a-s)) calc(var(--lo) + 54.9% * var(--lk))); outline-offset: 2px; } #couple-corner .cc-avatar-btn:hover .cc-badge { transform: translateY(-2px); } #couple-corner .cc-badge { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; font: 22px/1 var(--cc-zh), monospace; color: hsl(calc(55deg + var(--a-dh)) calc(100% * var(--a-s)) calc(var(--lo) + 97.5% * var(--lk))); border: 2px solid hsl(calc(97deg + var(--g-dh)) calc(16% * var(--g-s)) calc(var(--lo) + 45.1% * var(--lk))); background: hsl(calc(96deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 62.7% * var(--lk))); box-shadow: 2px 2px hsl(calc(83deg + var(--g-dh)) calc(25% * var(--g-s)) calc(var(--lo) + 83.3% * var(--lk))); transform: rotate(-4deg); } #couple-corner .cc-badge.zhenzhen { background: hsl(calc(23deg + var(--a-dh)) calc(72% * var(--a-s)) calc(var(--lo) + 69.6% * var(--lk))); border-color: hsl(calc(24deg + var(--a-dh)) calc(41% * var(--a-s)) calc(var(--lo) + 52.0% * var(--lk))); transform: rotate(4deg); } #couple-corner .cc-avatar-heart { margin-top: 12px; } #couple-corner .cc-player-label { margin-top: 4px; } /* pocket console */ #couple-corner .cc-console-screen { min-height: 92px; } #couple-corner .cc-console-screen small { font-size: 10px; letter-spacing: .5px; } #couple-corner .cc-console-screen[data-playing=true] > span { display: inline-block; animation: cc-bob .6s steps(2) infinite; } @keyframes cc-bob { 50% { transform: translateY(-3px); } } #couple-corner .cc-dpad-grid { display: grid; grid-template-columns: repeat(3, 17px); grid-template-rows: repeat(3, 17px); } #couple-corner .cc-dpad-btn { padding: 0; border: 1px solid hsl(calc(263deg + var(--l-dh)) calc(9% * var(--l-s)) calc(var(--lo) + 55.5% * var(--lk))); background: hsl(calc(263deg + var(--l-dh)) calc(16% * var(--l-s)) calc(var(--lo) + 71.6% * var(--lk))); color: hsl(calc(270deg + var(--p-dh)) calc(33% * var(--p-s)) calc(var(--lo) + 95.3% * var(--lk))); font: 8px/1 monospace; } #couple-corner .cc-dpad-btn:hover { background: hsl(calc(264deg + var(--l-dh)) calc(13% * var(--l-s)) calc(var(--lo) + 62.2% * var(--lk))); } #couple-corner .cc-dpad-btn.up { grid-area: 1 / 2; border-radius: 3px 3px 0 0; } #couple-corner .cc-dpad-btn.left { grid-area: 2 / 1; border-radius: 3px 0 0 3px; } #couple-corner .cc-dpad-center { grid-area: 2 / 2; background: hsl(calc(263deg + var(--l-dh)) calc(16% * var(--l-s)) calc(var(--lo) + 71.6% * var(--lk))); border-top: 1px solid hsl(calc(263deg + var(--l-dh)) calc(16% * var(--l-s)) calc(var(--lo) + 71.6% * var(--lk))); } #couple-corner .cc-dpad-btn.right { grid-area: 2 / 3; border-radius: 0 3px 3px 0; } #couple-corner .cc-dpad-btn.down { grid-area: 3 / 2; border-radius: 0 0 3px 3px; } #couple-corner .cc-ab button { font: 11px/19px var(--cc-pixel); background: hsl(calc(25deg + var(--a-dh)) calc(71% * var(--a-s)) calc(var(--lo) + 70.0% * var(--lk))); border: 1px solid hsl(calc(26deg + var(--a-dh)) calc(41% * var(--a-s)) calc(var(--lo) + 54.5% * var(--lk))); border-radius: 50%; width: 24px; height: 24px; padding: 0; text-align: center; color: hsl(calc(22deg + var(--a-dh)) calc(45% * var(--a-s)) calc(var(--lo) + 35.9% * var(--lk))); box-shadow: 1px 2px hsl(calc(23deg + var(--a-dh)) calc(31% * var(--a-s)) calc(var(--lo) + 58.2% * var(--lk))); } #couple-corner .cc-ab button:active { transform: translate(1px, 1px); box-shadow: none; } #couple-corner .cc-console-foot button { background: none; border: 0; padding: 2px 3px; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; } /* hero */ #couple-corner .cc-intro-tags button { font: 11px/1.4 var(--cc-pixel); letter-spacing: .5px; border: 1px solid hsl(calc(42deg + var(--a-dh)) calc(29% * var(--a-s)) calc(var(--lo) + 64.1% * var(--lk))); padding: 4px 7px; background: hsl(calc(42deg + var(--a-dh)) calc(100% * var(--a-s)) calc(var(--lo) + 92.2% * var(--lk))); color: hsl(calc(33deg + var(--a-dh)) calc(27% * var(--a-s)) calc(var(--lo) + 43.1% * var(--lk))); box-shadow: 1px 1px hsl(calc(42deg + var(--a-dh)) calc(40% * var(--a-s)) calc(var(--lo) + 74.7% * var(--lk))); } #couple-corner .cc-intro-tags button:hover { background: hsl(calc(35deg + var(--a-dh)) calc(80% * var(--a-s)) calc(var(--lo) + 88.2% * var(--lk))); } #couple-corner .cc-game-scene::before { content: none; } /* tabs (text icons replace the icon font) */ #couple-corner .cc-tab-ico { font-size: 15px; } @media (max-width: 600px) { #couple-corner .cc-tab-ico { display: none; } } /* buttons that read as links */ #couple-corner .cc-link { border: 0; background: none; padding: 0; color: hsl(calc(30deg + var(--a-dh)) calc(32% * var(--a-s)) calc(var(--lo) + 47.3% * var(--lk))); text-decoration: underline; text-underline-offset: 3px; font: inherit; } #couple-corner .cc-side-action { margin-top: 10px; } #couple-corner .cc-danger { background: hsl(calc(25deg + var(--a-dh)) calc(74% * var(--a-s)) calc(var(--lo) + 83.1% * var(--lk))) !important; color: hsl(calc(17deg + var(--a-dh)) calc(61% * var(--a-s)) calc(var(--lo) + 33.9% * var(--lk))) !important; } #couple-corner .cc-preview-message { position: sticky; top: 6px; z-index: 5; justify-content: space-between; } /* calendar kinds */ #couple-corner { --k-plan: hsl(calc(97deg + var(--g-dh)) calc(19% * var(--g-s)) calc(var(--lo) + 50.8% * var(--lk))); --k-trip: hsl(calc(26deg + var(--a-dh)) calc(70% * var(--a-s)) calc(var(--lo) + 63.7% * var(--lk))); --k-task: hsl(calc(267deg + var(--l-dh)) calc(28% * var(--l-s)) calc(var(--lo) + 65.7% * var(--lk))); --k-date: hsl(calc(348deg + var(--a-dh)) calc(56% * var(--a-s)) calc(var(--lo) + 65.9% * var(--lk))); } #couple-corner .cc-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; vertical-align: 1px; background: var(--k-plan); } #couple-corner .k-trip.cc-dot, #couple-corner .cc-dot.k-trip { background: var(--k-trip); } #couple-corner .cc-dot.k-task { background: var(--k-task); } #couple-corner .cc-dot.k-birthday, #couple-corner .cc-dot.k-holiday, #couple-corner .cc-dot.k-anniversary { background: var(--k-date); } #couple-corner .cc-day-dots { display: flex; justify-content: center; gap: 3px; min-height: 12px; padding-top: 3px; } #couple-corner .cc-day-dots i { width: 5px; height: 5px; background: var(--k-plan); } #couple-corner .cc-day-dots i.k-trip { background: var(--k-trip); } #couple-corner .cc-day-dots i.k-task { background: var(--k-task); } #couple-corner .cc-day-dots i.k-birthday, #couple-corner .cc-day-dots i.k-holiday, #couple-corner .cc-day-dots i.k-anniversary { background: var(--k-date); } #couple-corner .cc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: hsl(calc(79deg + var(--g-dh)) calc(10% * var(--g-s)) calc(var(--lo) + 43.1% * var(--lk))); margin: 8px 0 0; } #couple-corner .cc-view-switch { margin: -2px 0 10px; } #couple-corner .cc-view-switch .cc-button { min-width: 64px; } /* week view */ #couple-corner .cc-week { display: flex; flex-direction: column; gap: 4px; } #couple-corner .cc-week-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; background: hsl(calc(72deg + var(--p-dh)) calc(45% * var(--p-s)) calc(var(--lo) + 95.7% * var(--lk))); border: 1px solid hsl(calc(82deg + var(--g-dh)) calc(27% * var(--g-s)) calc(var(--lo) + 82.7% * var(--lk))); padding: 4px; } #couple-corner .cc-week-row[data-selected=true] { background: hsl(calc(35deg + var(--a-dh)) calc(89% * var(--a-s)) calc(var(--lo) + 93.1% * var(--lk))); border-color: hsl(calc(27deg + var(--a-dh)) calc(49% * var(--a-s)) calc(var(--lo) + 66.7% * var(--lk))); } #couple-corner .cc-week-day { display: flex; flex-direction: column; align-items: center; justify-content: center; background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); border: 1px solid hsl(calc(82deg + var(--g-dh)) calc(27% * var(--g-s)) calc(var(--lo) + 82.7% * var(--lk))); padding: 3px 0; font: 11px/1.2 var(--cc-pixel); color: hsl(calc(88deg + var(--g-dh)) calc(12% * var(--g-s)) calc(var(--lo) + 48.6% * var(--lk))); min-height: 44px; } #couple-corner .cc-week-day b { font: 18px/1.1 var(--cc-pixel); color: hsl(calc(89deg + var(--g-dh)) calc(14% * var(--g-s)) calc(var(--lo) + 41.4% * var(--lk))); } #couple-corner .cc-week-row[data-today=true] .cc-week-day { background: hsl(calc(31deg + var(--a-dh)) calc(87% * var(--a-s)) calc(var(--lo) + 81.6% * var(--lk))); border-color: hsl(calc(30deg + var(--a-dh)) calc(42% * var(--a-s)) calc(var(--lo) + 52.4% * var(--lk))); } #couple-corner .cc-week-row[data-today=true] .cc-week-day b { color: hsl(calc(25deg + var(--a-dh)) calc(45% * var(--a-s)) calc(var(--lo) + 36.5% * var(--lk))); } #couple-corner .cc-week-items { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; } #couple-corner .cc-chip { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; text-align: left; background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); border: 1px solid hsl(calc(82deg + var(--g-dh)) calc(24% * var(--g-s)) calc(var(--lo) + 80.0% * var(--lk))); border-left: 4px solid var(--k-plan); padding: 3px 7px; font-size: 11px; line-height: 1.4; color: hsl(calc(124deg + var(--g-dh)) calc(9% * var(--g-s)) calc(var(--lo) + 34.1% * var(--lk))); } #couple-corner .cc-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } #couple-corner .cc-chip small { font-size: 10px; color: hsl(calc(73deg + var(--g-dh)) calc(8% * var(--g-s)) calc(var(--lo) + 47.3% * var(--lk))); } #couple-corner .cc-chip.k-trip { border-left-color: var(--k-trip); } #couple-corner .cc-chip.k-task { border-left-color: var(--k-task); } #couple-corner .cc-chip.k-birthday, #couple-corner .cc-chip.k-holiday, #couple-corner .cc-chip.k-anniversary { border-left-color: var(--k-date); } #couple-corner .cc-chip:hover { background: hsl(calc(38deg + var(--a-dh)) calc(72% * var(--a-s)) calc(var(--lo) + 87.5% * var(--lk))); } #couple-corner .cc-chip-add { border: 1px dashed hsl(calc(82deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 69.8% * var(--lk))); background: none; color: hsl(calc(98deg + var(--g-dh)) calc(12% * var(--g-s)) calc(var(--lo) + 55.5% * var(--lk))); width: 28px; height: 28px; padding: 0; font: 15px/1 var(--cc-pixel); } #couple-corner .cc-chip-add:hover { background: hsl(calc(77deg + var(--g-dh)) calc(35% * var(--g-s)) calc(var(--lo) + 92.2% * var(--lk))); color: hsl(calc(100deg + var(--g-dh)) calc(20% * var(--g-s)) calc(var(--lo) + 38.8% * var(--lk))); } /* year view */ #couple-corner .cc-year { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #couple-corner .cc-mini { background: hsl(calc(72deg + var(--p-dh)) calc(45% * var(--p-s)) calc(var(--lo) + 95.7% * var(--lk))); border: 1px solid hsl(calc(82deg + var(--g-dh)) calc(27% * var(--g-s)) calc(var(--lo) + 82.7% * var(--lk))); padding: 5px; min-width: 0; } #couple-corner .cc-mini-title { display: flex; justify-content: space-between; align-items: baseline; width: 100%; background: none; border: 0; border-bottom: 1px dashed hsl(calc(79deg + var(--g-dh)) calc(23% * var(--g-s)) calc(var(--lo) + 78.6% * var(--lk))); padding: 1px 2px 4px; margin-bottom: 4px; font: 13px/1.2 var(--cc-pixel); color: hsl(calc(96deg + var(--g-dh)) calc(19% * var(--g-s)) calc(var(--lo) + 42.4% * var(--lk))); } #couple-corner .cc-mini-title small { font-size: 10px; color: hsl(calc(32deg + var(--a-dh)) calc(22% * var(--a-s)) calc(var(--lo) + 52.2% * var(--lk))); } #couple-corner .cc-mini-title:hover { color: hsl(calc(28deg + var(--a-dh)) calc(48% * var(--a-s)) calc(var(--lo) + 43.1% * var(--lk))); } #couple-corner .cc-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; } #couple-corner .cc-mini-day { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; background: transparent; font: 9px/1 var(--cc-pixel); color: hsl(calc(90deg + var(--g-dh)) calc(9% * var(--g-s)) calc(var(--lo) + 54.1% * var(--lk))); } #couple-corner .cc-mini-day:hover { background: hsl(calc(78deg + var(--g-dh)) calc(43% * var(--g-s)) calc(var(--lo) + 89.6% * var(--lk))); } #couple-corner .cc-mini-day.has { background: hsl(calc(89deg + var(--g-dh)) calc(36% * var(--g-s)) calc(var(--lo) + 81.0% * var(--lk))); color: hsl(calc(101deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 26.7% * var(--lk))); } #couple-corner .cc-mini-day.has.k-trip { background: hsl(calc(28deg + var(--a-dh)) calc(80% * var(--a-s)) calc(var(--lo) + 82.0% * var(--lk))); color: hsl(calc(24deg + var(--a-dh)) calc(56% * var(--a-s)) calc(var(--lo) + 27.6% * var(--lk))); } #couple-corner .cc-mini-day.has.k-task { background: hsl(calc(268deg + var(--l-dh)) calc(36% * var(--l-s)) calc(var(--lo) + 87.1% * var(--lk))); color: hsl(calc(265deg + var(--l-dh)) calc(23% * var(--l-s)) calc(var(--lo) + 31.0% * var(--lk))); } #couple-corner .cc-mini-day.has.k-birthday, #couple-corner .cc-mini-day.has.k-holiday, #couple-corner .cc-mini-day.has.k-anniversary { background: hsl(calc(350deg + var(--a-dh)) calc(64% * var(--a-s)) calc(var(--lo) + 85.9% * var(--lk))); color: hsl(calc(349deg + var(--a-dh)) calc(42% * var(--a-s)) calc(var(--lo) + 30.0% * var(--lk))); } #couple-corner .cc-mini-day[data-today=true] { outline: 1px solid hsl(calc(30deg + var(--a-dh)) calc(42% * var(--a-s)) calc(var(--lo) + 52.4% * var(--lk))); } #couple-corner .cc-mini-day[aria-pressed=true] { background: hsl(calc(31deg + var(--a-dh)) calc(87% * var(--a-s)) calc(var(--lo) + 81.6% * var(--lk))); color: hsl(calc(25deg + var(--a-dh)) calc(45% * var(--a-s)) calc(var(--lo) + 36.5% * var(--lk))); outline: 1px solid hsl(calc(25deg + var(--a-dh)) calc(45% * var(--a-s)) calc(var(--lo) + 36.5% * var(--lk))); } @media (max-width: 600px) { #couple-corner .cc-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } #couple-corner .cc-mini-day { font-size: 10px; } } #couple-corner .cc-editing { display: block; border-bottom: 0; } #couple-corner .cc-editing .cc-plan-form { margin: 4px 0; } /* memory */ #couple-corner .cc-memory-photo { display: block; border: 0; padding: 4px 4px 10px; background: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); box-shadow: 2px 2px hsl(calc(274deg + var(--l-dh)) calc(18% * var(--l-s)) calc(var(--lo) + 84.3% * var(--lk))); transform: rotate(-2deg); margin: 12px auto 4px; width: 70%; } #couple-corner .cc-memory-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; } /* diary */ #couple-corner .cc-file-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } #couple-corner .cc-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; } #couple-corner .cc-pending-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } #couple-corner .cc-pending { position: relative; width: 64px; height: 64px; border: 1px solid hsl(calc(77deg + var(--g-dh)) calc(22% * var(--g-s)) calc(var(--lo) + 77.5% * var(--lk))); background: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); padding: 2px; } #couple-corner .cc-pending img { width: 100%; height: 100%; object-fit: cover; display: block; } #couple-corner .cc-pending .cc-img-wait { display: grid; height: 100%; place-items: center; } #couple-corner .cc-pending button, #couple-corner .cc-x { border: 1px solid hsl(calc(24deg + var(--a-dh)) calc(41% * var(--a-s)) calc(var(--lo) + 52.0% * var(--lk))); background: hsl(calc(25deg + var(--a-dh)) calc(74% * var(--a-s)) calc(var(--lo) + 83.1% * var(--lk))); color: hsl(calc(19deg + var(--a-dh)) calc(63% * var(--a-s)) calc(var(--lo) + 29.4% * var(--lk))); width: 20px; height: 20px; padding: 0; line-height: 1; } #couple-corner .cc-pending button { position: absolute; top: -7px; right: -7px; } #couple-corner .cc-x { width: 18px; height: 18px; font-size: 11px; margin-left: 4px; } #couple-corner .cc-feed-text { white-space: pre-line; font-size: 13px; line-height: 1.8; } #couple-corner .cc-feed-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; max-width: 420px; } #couple-corner .cc-feed-photos.n1 { grid-template-columns: minmax(0, 260px); } #couple-corner .cc-feed-photos.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; } #couple-corner .cc-thumb { padding: 0; border: 1px solid hsl(calc(63deg + var(--g-dh)) calc(19% * var(--g-s)) calc(var(--lo) + 79.6% * var(--lk))); background: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); aspect-ratio: 1; overflow: hidden; } #couple-corner .cc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #couple-corner .cc-thumb:hover { outline: 2px solid hsl(calc(25deg + var(--a-dh)) calc(71% * var(--a-s)) calc(var(--lo) + 70.0% * var(--lk))); } #couple-corner .cc-comment-form { display: flex; gap: 6px; margin-top: 10px; } #couple-corner .cc-comment-form input { flex: 1; min-width: 0; font: 12px/1.5 Verdana, var(--cc-zh), sans-serif; color: hsl(calc(99deg + var(--g-dh)) calc(15% * var(--g-s)) calc(var(--lo) + 33.3% * var(--lk))); background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); border: 1px inset hsl(calc(81deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 73.3% * var(--lk))); padding: 5px 7px; min-height: 30px; } #couple-corner .cc-highlight { background: hsl(calc(42deg + var(--a-dh)) calc(100% * var(--a-s)) calc(var(--lo) + 92.2% * var(--lk))); outline: 2px dashed hsl(calc(25deg + var(--a-dh)) calc(71% * var(--a-s)) calc(var(--lo) + 70.0% * var(--lk))); } #couple-corner .cc-meta .cc-plan-actions .cc-button { font-size: 11px; min-height: 24px; padding: 2px 7px; } /* album */ #couple-corner .cc-album-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; max-width: 100%; } #couple-corner .cc-album-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; margin: 8px 0 18px; } #couple-corner .cc-album-folder { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 7px; text-align: left; border: 2px solid var(--cc-line); background: var(--cc-paper); box-shadow: 2px 2px 0 var(--cc-line); } #couple-corner .cc-album-folder::before { content: ''; position: absolute; top: -6px; left: 8px; width: 40px; height: 5px; border: 1px solid var(--cc-line); border-bottom: 0; background: var(--cc-mint); } #couple-corner .cc-album-folder[aria-pressed="true"] { border-color: var(--cc-accent); box-shadow: 3px 3px 0 var(--cc-accent); background: var(--cc-mint); } #couple-corner .cc-album-folder:hover { transform: translateY(-2px); } #couple-corner .cc-album-cover { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--cc-line); background: var(--cc-mint); font: 32px/1 var(--cc-pixel); } #couple-corner .cc-album-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } #couple-corner .cc-album-label { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } #couple-corner .cc-album-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 14px/1.35 var(--cc-pixel); } #couple-corner .cc-album-label small { font-size: 11px; } #couple-corner .cc-album-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 4px 2px 9px; border-bottom: 1px dashed var(--cc-line); } #couple-corner .cc-album-heading h3 { font: 19px/1.35 var(--cc-pixel); overflow-wrap: anywhere; } #couple-corner .cc-album-heading .cc-plan-actions { justify-content: flex-end; } #couple-corner .cc-album-form { margin-top: 0; } #couple-corner .cc-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } #couple-corner button.cc-photo { font: 13px/1.4 var(--cc-pixel); color: hsl(calc(42deg + var(--a-dh)) calc(17% * var(--a-s)) calc(var(--lo) + 47.5% * var(--lk))); display: flex; flex-direction: column; gap: 8px; } #couple-corner button.cc-photo:hover { transform: rotate(0) scale(1.02); z-index: 2; } #couple-corner .cc-photo-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: hsl(calc(82deg + var(--g-dh)) calc(40% * var(--g-s)) calc(var(--lo) + 87.6% * var(--lk))); } #couple-corner .cc-photo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #couple-corner .cc-photo-album { display: inline-flex; align-items: center; gap: 5px; font: 12px/1.4 var(--cc-pixel); } #couple-corner .cc-photo-album select { max-width: 160px; min-height: 28px; padding: 3px 5px; border: 1px solid var(--cc-line); background: var(--cc-paper); color: var(--cc-ink); font: inherit; } /* Each scrapbook note uses its own measured crop in the transparent source sheet. */ #couple-corner .cc-wishlist-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 175px), 210px)); justify-content: center; gap: 18px 14px; } #couple-corner .cc-wishlist-grid .cc-wish-note.cc-plan-card, #couple-corner .cc-wishlist-grid .cc-wish-note.cc-plan-card:nth-child(even) { display: flex; flex-direction: column; aspect-ratio: var(--note-ratio); min-height: 0; padding: var(--note-top) 13% 11%; overflow: hidden; border: 0; box-shadow: none; background-color: transparent; background-image: url('assets/wishlist-notes-sprite.webp'); background-size: var(--note-size) auto; background-position: var(--note-x) var(--note-y); background-repeat: no-repeat; --note-font: var(--cc-font-readable); color: #244659; font-family: var(--note-font); } #couple-corner .cc-wishlist-grid .cc-wish-note.cc-plan-card::before { content: none; } #couple-corner .cc-wish-note-0 { --note-size: 185.2%; --note-x: 0%; --note-y: 0%; --note-ratio: 1.35; --note-top: 15%; } #couple-corner .cc-wish-note-1 { --note-size: 217.4%; --note-x: 100%; --note-y: 0%; --note-ratio: 1.12; --note-top: 15%; } #couple-corner .cc-wish-note-2 { --note-size: 185.2%; --note-x: 0%; --note-y: 29%; --note-ratio: 1.25; --note-top: 20%; } #couple-corner .cc-wish-note-3 { --note-size: 217.4%; --note-x: 100%; --note-y: 29.4%; --note-ratio: 1.09; --note-top: 18%; } #couple-corner .cc-wish-note-4 { --note-size: 185.2%; --note-x: 0%; --note-y: 63%; --note-ratio: 1.12; --note-top: 19%; } #couple-corner .cc-wish-note-5 { --note-size: 217.4%; --note-x: 100%; --note-y: 63%; --note-ratio: .96; --note-top: 18%; } #couple-corner .cc-wish-note-6 { --note-size: 185.2%; --note-x: 0%; --note-y: 99%; --note-ratio: 1.14; --note-top: 17%; } #couple-corner .cc-wish-note-7 { --note-size: 217.4%; --note-x: 100%; --note-y: 100%; --note-ratio: .93; --note-top: 17%; } #couple-corner .cc-wish-note .cc-plan-tag, #couple-corner .cc-wish-note .cc-wish-name, #couple-corner .cc-wish-note .cc-card-meta { color: #244659; } #couple-corner .cc-wish-note .cc-plan-tag { font-family: var(--note-font); font-weight: 600; letter-spacing: 0; } #couple-corner .cc-wish-note .cc-wish-name { max-height: 2.8em; overflow: auto; font: 600 15px/1.4 var(--note-font); } #couple-corner .cc-wish-note p { flex: 1 1 auto; min-height: 0; overflow: auto; color: #294b5f; font: 12px/1.4 var(--note-font); } #couple-corner .cc-wish-note .cc-card-meta { margin-top: auto; min-width: 0; gap: 5px; flex-wrap: nowrap; font-family: var(--note-font); } #couple-corner .cc-wish-note .cc-inline-check { font-family: var(--note-font); } #couple-corner .cc-wish-note .cc-button { min-height: 24px; padding: 2px 5px; font: 11px/1.4 var(--note-font); background: rgb(255 255 255 / .78); border-color: #7a9ab0; color: #244659; } #couple-corner .cc-wish-note .cc-button:hover { background: #fff; } /* lightbox */ #couple-corner .cc-lightbox { border: 2px solid var(--cc-line); background: var(--cc-paper); padding: 3px; width: min(92vw, 900px); max-height: 92vh; box-shadow: 5px 5px 0 hsl(calc(95deg + var(--g-dh)) calc(18% * var(--g-s)) calc(var(--lo) + 68.0% * var(--lk)) / 0.53); color: var(--cc-ink); } #couple-corner .cc-lightbox::backdrop { background: hsl(calc(124deg + var(--g-dh)) calc(9% * var(--g-s)) calc(var(--lo) + 34.1% * var(--lk)) / 0.67); } #couple-corner .cc-lightbox-body { padding: 10px; } #couple-corner .cc-lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; height: min(64vh, 680px); min-height: 220px; overflow: hidden; background: #edf2e9; border: 1px solid var(--cc-line); touch-action: pan-y; cursor: zoom-in; } #couple-corner .cc-lightbox-stage.is-zoomed { touch-action: none; cursor: grab; } #couple-corner .cc-lightbox-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; will-change: transform; } #couple-corner .cc-lightbox-arrow { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 38px; height: 48px; border: 1px solid var(--cc-line); background: rgb(255 255 250 / .86); color: var(--cc-ink); font: 30px/1 var(--cc-font-ui); box-shadow: 2px 2px rgb(75 100 76 / .2); } #couple-corner .cc-lightbox-arrow.previous { left: 8px; } #couple-corner .cc-lightbox-arrow.next { right: 8px; } #couple-corner .cc-lightbox-arrow:disabled { display: none; } #couple-corner .cc-zoom-label { min-width: 42px; text-align: center; font: 12px/1.4 var(--cc-font-ui); } #couple-corner .cc-lightbox-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 12px; } #couple-corner .cc-reply-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 3px; } #couple-corner .cc-reply-head b { font-size: 12px; } #couple-corner .cc-reply-time { color: #657b67; font-size: 11px; white-space: nowrap; } #couple-corner .cc-reply-head .cc-x { margin-left: auto; align-self: center; } #couple-corner .cc-reply-body { line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } #couple-corner .cc-reply-child { margin-left: min(calc(var(--reply-depth) * 18px), 36px); border-left: 2px solid #adc3aa; } #couple-corner .cc-reply-actions { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; } #couple-corner .cc-reply-actions .cc-x { margin-left: 0; } #couple-corner .cc-reply-link, #couple-corner .cc-reply-cancel { border: 0; padding: 0; background: none; color: #536d5d; font: 11px/1.3 var(--cc-type, 'Courier New', monospace); text-decoration: underline; cursor: pointer; } #couple-corner .cc-reply-link:hover, #couple-corner .cc-reply-cancel:hover { color: #9b633e; } #couple-corner .cc-reply-to { margin-bottom: 2px; color: #657b67; font-size: 11px; } #couple-corner .cc-reply-context { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 5px 8px; border-left: 2px solid #adc3aa; background: #edf3e7; color: #4b634f; font-size: 11px; overflow-wrap: anywhere; } #couple-corner .cc-reply-context + .cc-comment-form { margin-top: 4px; } #couple-corner .cc-reply-context .cc-reply-cancel { flex: none; } #couple-corner .cc-meta-who { flex-wrap: wrap; min-width: 0; } @media (max-width: 600px) { #couple-corner .cc-lightbox { width: 96vw; } #couple-corner .cc-lightbox-stage { height: min(60vh, 540px); } #couple-corner .cc-lightbox-arrow { width: 30px; height: 42px; } } /* login */ #couple-corner .cc-login { display: flex; justify-content: center; padding: 60px 16px; } #couple-corner .cc-login[hidden] { display: none !important; } #couple-corner .cc-login-window { width: min(380px, 100%); } #couple-corner .cc-login form { display: flex; flex-direction: column; gap: 12px; } #couple-corner .cc-login-go { background: hsl(calc(32deg + var(--a-dh)) calc(85% * var(--a-s)) calc(var(--lo) + 83.9% * var(--lk))); font: 15px/1.3 var(--cc-pixel); min-height: 38px; } #couple-corner [data-app][hidden] { display: none !important; } @media (pointer: coarse) { #couple-corner .cc-strip-btn, #couple-corner .cc-min { min-width: 34px; min-height: 30px; } #couple-corner .cc-dpad-grid { grid-template-columns: repeat(3, 24px); grid-template-rows: repeat(3, 24px); } #couple-corner .cc-ab button { width: 30px; height: 30px; } #couple-corner .cc-chip { min-height: 36px; justify-content: center; } #couple-corner .cc-chip-add { width: 36px; height: 36px; } } #couple-corner .cc-memory-photo { width: auto; max-width: 70%; } #couple-corner .cc-memory-photo img { width: auto; max-width: 100%; max-height: 150px; aspect-ratio: auto; } #couple-corner .cc-avatar-btn small, #couple-corner .cc-avatar-static small { font-size: 11px; } #couple-corner .cc-img-wait { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 60px; background: hsl(calc(82deg + var(--g-dh)) calc(40% * var(--g-s)) calc(var(--lo) + 87.6% * var(--lk))); color: hsl(calc(90deg + var(--g-dh)) calc(17% * var(--g-s)) calc(var(--lo) + 66.3% * var(--lk))); font: 24px var(--cc-pixel); } #couple-corner .cc-who { border: 1px dashed hsl(calc(82deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 69.8% * var(--lk))); padding: 8px 10px 10px; margin: 0; display: flex; gap: 14px; } #couple-corner .cc-who legend { font-size: 12px; padding: 0 4px; } #couple-corner .cc-who label { display: flex; align-items: center; gap: 6px; font: 13px var(--cc-zh), monospace; cursor: pointer; } #couple-corner .cc-who .cc-badge { width: 30px; height: 30px; font-size: 16px; } #couple-corner .cc-who input:checked + .cc-badge { outline: 2px dashed hsl(calc(18deg + var(--a-dh)) calc(51% * var(--a-s)) calc(var(--lo) + 54.9% * var(--lk))); outline-offset: 2px; } /* ===== v2: kinds, skins, avatars, tags ===== */ #couple-corner { --k-plan: #6fa35a; --k-trip: #f08a4b; --k-task: #9a7ad8; --k-birthday: #e0506a; --k-holiday: #e8b33c; --k-anniversary: #d85fb0; } #couple-corner .k-plan { --kc: var(--k-plan); } #couple-corner .k-trip { --kc: var(--k-trip); } #couple-corner .k-task { --kc: var(--k-task); } #couple-corner .k-birthday { --kc: var(--k-birthday); } #couple-corner .k-holiday { --kc: var(--k-holiday); } #couple-corner .k-anniversary { --kc: var(--k-anniversary); } #couple-corner .cc-dot, #couple-corner .cc-dot[class*=k-] { background: var(--kc, var(--k-plan)); } #couple-corner .cc-day-dots i, #couple-corner .cc-day-dots i[class*=k-] { width: 6px; height: 6px; background: var(--kc, var(--k-plan)); } #couple-corner .cc-chip, #couple-corner .cc-chip[class*=k-] { border-left-color: var(--kc, var(--k-plan)); } #couple-corner .cc-mini-day.has, #couple-corner .cc-mini-day.has[class*=k-] { background: color-mix(in srgb, var(--kc, var(--k-plan)) 45%, var(--cc-white)); color: color-mix(in srgb, var(--kc, var(--k-plan)) 50%, var(--cc-black)); } #couple-corner .cc-mini-day.has[aria-pressed=true] { background: var(--kc); color: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); } #couple-corner .cc-kind-card { border-top: 4px solid var(--kc); } #couple-corner .cc-legend { align-items: center; } #couple-corner .cc-legend-btn { display: inline-flex; align-items: center; background: none; border: 1px dashed transparent; padding: 3px 6px; font: inherit; font-size: 11px; color: inherit; } #couple-corner .cc-legend-btn:hover, #couple-corner .cc-legend-btn[aria-expanded=true] { border-color: currentColor; background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); } #couple-corner .cc-legend-btn .cc-dot { width: 10px; height: 10px; } #couple-corner .cc-swatches { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 8px; margin-top: 6px; border: 1px dashed currentColor; background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); } #couple-corner .cc-swatches .cc-small { width: 100%; } #couple-corner .cc-swatch { width: 24px; height: 24px; padding: 0; border: 2px solid hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); box-shadow: 1px 1px 0 #0004; } #couple-corner .cc-swatch[aria-pressed=true] { outline: 2px solid hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 20.0% * var(--lk))); outline-offset: 1px; } /* skins */ #couple-corner .cc-skins { display: grid; grid-template-columns: 1fr; gap: 5px; } #couple-corner .cc-skin { display: flex; align-items: center; gap: 7px; padding: 4px 6px; background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); border: 1px solid #0002; font: 12px/1.3 var(--cc-zh), monospace; color: hsl(calc(124deg + var(--g-dh)) calc(9% * var(--g-s)) calc(var(--lo) + 34.1% * var(--lk))); text-align: left; } #couple-corner .cc-skin[aria-pressed=true] { outline: 2px dashed #333a; outline-offset: 1px; background: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); } #couple-corner .cc-skin-dots { display: flex; } #couple-corner .cc-skin-dots i { width: 12px; height: 16px; display: block; border: 1px solid #0003; } #couple-corner .cc-skin-dots i + i { margin-left: -1px; } #couple-corner .cc-skin .s1 { background: hsl(calc(97deg + var(--g-dh)) calc(15% * var(--g-s)) calc(var(--lo) + 53% * var(--lk))); } #couple-corner .cc-skin .s2 { background: hsl(calc(25deg + var(--a-dh)) calc(72% * var(--a-s)) calc(var(--lo) + 70% * var(--lk))); } #couple-corner .cc-skin .s3 { background: hsl(calc(267deg + var(--l-dh)) calc(21% * var(--l-s)) calc(var(--lo) + 82% * var(--lk))); } @media (max-width: 820px) { #couple-corner .cc-skin-window { grid-column: 1 / -1; } #couple-corner .cc-skins { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } } /* avatars */ #couple-corner .cc-badge { overflow: hidden; } #couple-corner .cc-badge img, #couple-corner .cc-mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; } #couple-corner .cc-avatar-tools { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; } #couple-corner .cc-avatar-tools .cc-button { font-size: 11px; padding: 3px 6px; min-height: 26px; } #couple-corner .cc-avatar-tools .cc-link { font-size: 11px; } #couple-corner .cc-mini-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; vertical-align: -5px; overflow: hidden; font: 12px/1 var(--cc-zh), monospace; color: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); background: hsl(calc(97deg + var(--g-dh)) calc(22% * var(--g-s)) calc(var(--lo) + 58% * var(--lk))); border: 1px solid #0003; } #couple-corner .cc-mini-avatar.zhenzhen { background: hsl(calc(22deg + var(--a-dh)) calc(70% * var(--a-s)) calc(var(--lo) + 69% * var(--lk))); } #couple-corner .cc-meta-who { display: inline-flex; align-items: center; } /* diary search + tags */ #couple-corner .cc-diary-search { display: flex; gap: 6px; margin: 16px 0 8px; } #couple-corner .cc-diary-search input { flex: 1; min-width: 0; font: 13px/1.5 Verdana, var(--cc-zh), sans-serif; color: inherit; background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); border: 1px inset #0003; padding: 6px 8px; min-height: 32px; } #couple-corner .cc-tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; } #couple-corner .cc-tag { font: 11px/1.4 var(--cc-zh), 'Courier New', monospace; padding: 2px 7px; background: hsl(calc(25deg + var(--a-dh)) calc(80% * var(--a-s)) calc(var(--lo) + 92% * var(--lk))); border: 1px solid hsl(calc(25deg + var(--a-dh)) calc(45% * var(--a-s)) calc(var(--lo) + 70% * var(--lk))); color: hsl(calc(22deg + var(--a-dh)) calc(45% * var(--a-s)) calc(var(--lo) + 35% * var(--lk))); } #couple-corner .cc-tag small { opacity: .7; } #couple-corner .cc-tag[aria-pressed=true] { background: hsl(calc(25deg + var(--a-dh)) calc(70% * var(--a-s)) calc(var(--lo) + 70% * var(--lk))); color: hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))); } #couple-corner .cc-result-count { margin: 4px 0 0; } @media (max-width: 600px) { #couple-corner .cc-diary-search input { font-size: 16px; } } /* touch screens: the small diary controls look the same but get a bigger, invisible area to tap */ @media (pointer: coarse) { #couple-corner .cc-x, #couple-corner .cc-meta .cc-plan-actions .cc-button, #couple-corner .cc-tag { position: relative; } #couple-corner .cc-x::after, #couple-corner .cc-meta .cc-plan-actions .cc-button::after, #couple-corner .cc-tag::after { content: ''; position: absolute; } /* insets count from inside the border */ #couple-corner .cc-meta .cc-plan-actions .cc-button::after { inset: -12px -4px; } /* Edit / Delete: 24px tall, taps 44 */ #couple-corner .cc-x::after { inset: -12px; } /* reply ×: 18px, taps 40 */ #couple-corner .cc-tag::after { inset: -7px -3px; } /* tags: 21px tall, taps 33 */ /* iPod volume (about 15x12) and the picture caption (16px tall); volume only grows away from the play button */ #couple-corner .cc-caption-text { position: relative; } #couple-corner .cc-ipod-btn.up::after, #couple-corner .cc-ipod-btn.down::after, #couple-corner .cc-caption-text::after { content: ''; position: absolute; } #couple-corner .cc-ipod-btn.up::after { inset: -12px -10px 0; } #couple-corner .cc-ipod-btn.down::after { inset: 0 -10px -12px; } #couple-corner .cc-caption-text::after { inset: -12px -4px; } } /* iPhones zoom into any text field under 16px, so the small ones grow to 16px on phones */ @media (max-width: 600px) { #couple-corner .cc-comment-form input, #couple-corner .cc-photo-album select, #couple-corner select.cc-plan-status { font-size: 16px; } } /* ===== v3: tear-off calendar, skins grid, modal, hero tools ===== */ #couple-corner .cc-home-side .cc-memory-window > .cc-bar { background: hsl(calc(267deg + var(--l-dh)) calc(27% * var(--l-s)) calc(var(--lo) + 89.6% * var(--lk))); border-color: hsl(calc(266deg + var(--l-dh)) calc(21% * var(--l-s)) calc(var(--lo) + 72.2% * var(--lk))); color: hsl(calc(271deg + var(--l-dh)) calc(12% * var(--l-s)) calc(var(--lo) + 46.1% * var(--lk))); } #couple-corner .cc-special-side > .cc-bar { background: hsl(calc(29deg + var(--a-dh)) calc(83% * var(--a-s)) calc(var(--lo) + 84.1% * var(--lk))); border-color: hsl(calc(30deg + var(--a-dh)) calc(38% * var(--a-s)) calc(var(--lo) + 71.2% * var(--lk))); color: hsl(calc(25deg + var(--a-dh)) calc(29% * var(--a-s)) calc(var(--lo) + 41.6% * var(--lk))); font-size: 13px; } #couple-corner .cc-special-side .cc-body { padding: 8px; } #couple-corner .cc-special-side .cc-upcoming-entry strong { font-size: 12px; } #couple-corner .cc-special-side .cc-upcoming-bottom { font-size: 10px; } #couple-corner .cc-special-side .cc-countdown { font-size: 10px; padding: 2px 4px; } #couple-corner .cc-special-side .cc-side-action { width: 100%; margin-top: 8px; } /* tear-off calendar */ #couple-corner .cc-tearpad { position: relative; margin: 4px 0 18px; padding-top: 8px; } #couple-corner .cc-tear-rings { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 0 16px; z-index: 3; } #couple-corner .cc-tear-rings i { width: 8px; height: 16px; border: 2px solid var(--cc-black); border-radius: 4px; background: var(--cc-white); } #couple-corner .cc-tear-stack { display: none; } #couple-corner .cc-tear-sheet { box-shadow: 4px 4px 0 -1px var(--cc-white), 4px 4px 0 1px hsl(calc(97deg + var(--g-dh)) calc(12% * var(--g-s)) calc(var(--lo) + 52% * var(--lk))), 8px 8px 0 -1px var(--cc-white), 8px 8px 0 1px hsl(calc(97deg + var(--g-dh)) calc(12% * var(--g-s)) calc(var(--lo) + 60% * var(--lk))); } #couple-corner .cc-tearing { box-shadow: none; } #couple-corner .cc-tear-sheet { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 0 10px; background: var(--cc-white); border: 2px solid hsl(calc(97deg + var(--g-dh)) calc(12% * var(--g-s)) calc(var(--lo) + 45% * var(--lk))); color: var(--cc-black); cursor: pointer; } #couple-corner .cc-tear-sheet:hover { transform: rotate(-1deg); } #couple-corner .cc-tear-head { align-self: stretch; padding: 12px 4px 4px; background: hsl(calc(8deg + var(--a-dh)) calc(70% * var(--a-s)) calc(var(--lo) + 58% * var(--lk))); color: var(--cc-white); font: 12px/1.2 var(--cc-pixel); letter-spacing: 2px; } #couple-corner .cc-tear-num { font: 44px/1.15 var(--cc-pixel); margin-top: 6px; color: hsl(calc(8deg + var(--a-dh)) calc(65% * var(--a-s)) calc(var(--lo) + 48% * var(--lk))); text-shadow: 2px 2px 0 hsl(calc(29deg + var(--a-dh)) calc(83% * var(--a-s)) calc(var(--lo) + 86% * var(--lk))); } #couple-corner .cc-tear-unit { font: 12px/1.4 var(--cc-zh), monospace; } #couple-corner .cc-tear-unit { max-width: 100%; padding: 0 4px; text-align: center; overflow-wrap: anywhere; } #couple-corner .cc-tear-foot { font: 10px/1.4 var(--cc-pixel); opacity: .75; margin-top: 3px; min-height: 14px; } #couple-corner .cc-tear-perf { position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: radial-gradient(circle at 4px 0, transparent 3px, var(--cc-white) 3.5px) 0 0 / 8px 6px repeat-x; } #couple-corner .cc-tear-hint { text-align: center; font: 10px/1.4 var(--cc-pixel); opacity: .7; margin: 14px 0 0 !important; } #couple-corner .cc-tear-set { width: 100%; margin-top: 16px; font-size: 11px; } #couple-corner .cc-tearing { position: absolute; left: 0; right: 0; top: 8px; z-index: 4; pointer-events: none; animation: cc-tear .65s steps(7) forwards; transform-origin: 90% 0; } @keyframes cc-tear { 0% { transform: none; } 30% { transform: rotate(var(--tilt)); } 100% { transform: translate(20px, 120px) rotate(calc(var(--tilt) * 3)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #couple-corner .cc-tearing { animation-duration: .01s; } } /* skins */ #couple-corner .cc-skin-window .cc-body { padding: 8px; } #couple-corner .cc-skin-current { font: 12px/1.4 var(--cc-zh), monospace; text-align: center; margin: 0 0 4px !important; } #couple-corner .cc-skin-group { font: 9px/1.3 var(--cc-pixel); letter-spacing: .5px; opacity: .7; margin: 6px 0 3px !important; } #couple-corner .cc-skin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } #couple-corner .cc-skin { display: flex; align-items: stretch; padding: 2px; height: 26px; gap: 0; } #couple-corner .cc-skin i { flex: 1; display: block; border: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; } #couple-corner .cc-skin .s1 { background: hsl(calc(97deg + var(--g-dh)) calc(15% * var(--g-s)) calc(var(--lo) + 53% * var(--lk))); } #couple-corner .cc-skin .s2 { background: hsl(calc(25deg + var(--a-dh)) calc(72% * var(--a-s)) calc(var(--lo) + 70% * var(--lk))); } #couple-corner .cc-skin .s3 { background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 97% * var(--lk))); } #couple-corner .cc-skin[aria-pressed=true] { outline: 2px solid var(--cc-black); outline-offset: 1px; } #couple-corner .cc-skins { display: block; } @media (max-width: 820px) { #couple-corner .cc-skin-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } } /* modal */ #couple-corner .cc-modal { border: 0; padding: 0; background: transparent; width: min(920px, 94vw); max-height: 90vh; overflow: auto; color: inherit; } #couple-corner .cc-modal::backdrop { background: rgb(40 40 40 / .55); } #couple-corner .cc-modal > .cc-window { margin: 0; } #couple-corner .cc-modal .cc-bar { position: sticky; top: 0; z-index: 2; } #couple-corner .cc-confirm-modal { width: min(390px, 94vw); } #couple-corner .cc-confirm-modal .cc-body { padding: 16px; } #couple-corner .cc-confirm-modal p { margin: 0 0 18px; line-height: 1.5; } #couple-corner .cc-confirm-modal .cc-plan-actions { justify-content: flex-end; } /* hero caption tools */ #couple-corner .cc-game-caption { flex-wrap: wrap; } #couple-corner .cc-caption-text { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; border-bottom: 1px dashed transparent; } #couple-corner .cc-caption-text:hover { border-bottom-color: currentColor; } #couple-corner .cc-hero-tools { display: flex; gap: 4px; } #couple-corner .cc-hero-tools .cc-button { font-size: 11px; min-height: 24px; padding: 2px 7px; } #couple-corner .cc-caption-form { display: flex; gap: 4px; width: 100%; } #couple-corner .cc-caption-form input { flex: 1; min-width: 0; font: 13px var(--cc-pixel); padding: 3px 6px; border: 1px inset hsl(0 0% 50% / .4); background: var(--cc-white); color: inherit; } #couple-corner .cc-caption-form .cc-button { font-size: 11px; min-height: 26px; padding: 2px 6px; } @media (max-width: 600px) { #couple-corner .cc-caption-form input { font-size: 16px; } } /* no zoom-in on iPhones, see .cc-comment-form */ /* ===== v4: wider sidebar, memory strip, iPod, simpler skins ===== */ #couple-corner .cc-grid { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; } @media (max-width: 1000px) { #couple-corner .cc-grid { grid-template-columns: 155px minmax(0, 1fr); gap: 12px; } } @media (max-width: 820px) { #couple-corner .cc-grid { grid-template-columns: minmax(0, 1fr); } } #couple-corner .cc-profile .cc-body { padding: 12px 10px; } #couple-corner .cc-badge { width: 54px; height: 54px; } #couple-corner .cc-avatar { gap: 10px; } #couple-corner .cc-tear-num { font-size: 56px; } #couple-corner .cc-special-side .cc-body { padding: 10px 12px; } /* memory strip above the calendar */ #couple-corner .cc-memory-strip { margin-bottom: 14px; } #couple-corner .cc-memory-strip > .cc-bar { background: hsl(calc(267deg + var(--l-dh)) calc(27% * var(--l-s)) calc(var(--lo) + 89.6% * var(--lk))); border-color: hsl(calc(266deg + var(--l-dh)) calc(21% * var(--l-s)) calc(var(--lo) + 72.2% * var(--lk))); color: hsl(calc(271deg + var(--l-dh)) calc(12% * var(--l-s)) calc(var(--lo) + 46.1% * var(--lk))); } #couple-corner .cc-memory-strip .cc-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 10px 12px; background: none; } #couple-corner .cc-memory-strip .cc-memory-label { grid-column: 2; } #couple-corner .cc-memory-strip .cc-memory { grid-column: 2; min-height: 0; margin: 2px 0 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #couple-corner .cc-memory-strip .cc-memory-photo { grid-column: 1; grid-row: 1 / 3; margin: 0; width: 64px; max-width: none; padding: 3px 3px 7px; } #couple-corner .cc-memory-strip .cc-memory-photo img { width: 58px; height: 46px; max-height: none; object-fit: cover; } #couple-corner .cc-memory-strip .cc-plan-actions, #couple-corner .cc-memory-strip .cc-body > .cc-button { grid-column: 3; grid-row: 1 / 3; } @media (max-width: 600px) { #couple-corner .cc-memory-strip .cc-body { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; } #couple-corner .cc-memory-strip .cc-plan-actions, #couple-corner .cc-memory-strip .cc-body > .cc-button { grid-column: 1 / -1; grid-row: auto; } } /* iPod shuffle player */ #couple-corner .cc-ipod { position: relative; padding-top: 58px; margin: 6px 0 18px; display: flex; flex-direction: column; align-items: center; } #couple-corner .cc-ipod-body { position: relative; width: 180px; } #couple-corner .cc-ipod-img { display: block; width: 180px; height: auto; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 hsl(calc(97deg + var(--g-dh)) calc(15% * var(--g-s)) calc(var(--lo) + 70% * var(--lk)))); } #couple-corner .cc-ipod-btn { position: absolute; padding: 0; border: 0; background: transparent; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; } #couple-corner .cc-ipod-btn:hover { background: rgb(255 255 255 / .25); } #couple-corner .cc-ipod-btn:active { background: rgb(0 0 0 / .14); } #couple-corner .cc-ipod-btn:focus-visible { outline: 2px dashed #333; } #couple-corner .cc-ipod-btn.up { left: 49%; top: 21%; width: 22%; height: 18%; } #couple-corner .cc-ipod-btn.down { left: 50%; top: 85%; width: 22%; height: 18%; } #couple-corner .cc-ipod-btn.prev { left: 18%; top: 53%; width: 20%; height: 24%; } #couple-corner .cc-ipod-btn.next { left: 81%; top: 53%; width: 20%; height: 24%; } #couple-corner .cc-ipod-btn.play { left: 50%; top: 53%; width: 44%; height: 46%; } #couple-corner .cc-ipod-bubble { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 100%; white-space: nowrap; padding: 6px 10px; background: var(--cc-white); color: var(--cc-black); border: 2px solid var(--cc-black); box-shadow: 3px 3px 0 hsl(calc(97deg + var(--g-dh)) calc(15% * var(--g-s)) calc(var(--lo) + 70% * var(--lk))); font: 12px/1.3 var(--cc-pixel); } #couple-corner .cc-ipod-bubble::after { content: ''; position: absolute; left: calc(50% - 6px); bottom: -8px; width: 8px; height: 8px; background: var(--cc-white); border-right: 2px solid var(--cc-black); border-bottom: 2px solid var(--cc-black); transform: rotate(45deg); } #couple-corner .cc-ipod-bubble[data-playing=true] { animation: cc-float 1.6s steps(4) infinite; } @keyframes cc-float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } } #couple-corner .cc-bubble-vol { display: none; letter-spacing: -1px; } #couple-corner .cc-ipod-bubble[data-vol=true] .cc-bubble-vol { display: inline; } #couple-corner .cc-ipod-bubble[data-vol=true] .cc-bubble-song { display: none; } @media (prefers-reduced-motion: reduce) { #couple-corner .cc-ipod-bubble { animation: none !important; } } @media (max-width: 820px) { #couple-corner .cc-ipod { grid-column: auto; } } /* skins: named rows */ #couple-corner .cc-skin-list { display: flex; flex-direction: column; gap: 5px; } #couple-corner .cc-skin-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; background: var(--cc-white); border: 1px solid hsl(0 0% 50% / .35); color: var(--cc-black); font: 12px/1.3 var(--cc-zh), monospace; text-align: left; } #couple-corner .cc-skin-row[aria-pressed=true] { outline: 2px dashed var(--cc-black); outline-offset: 1px; } #couple-corner .cc-skin-row .cc-skin-dots { display: flex; } #couple-corner .cc-skin-row .cc-skin-dots i { width: 12px; height: 18px; display: block; border: 1px solid hsl(0 0% 0% / .2); } #couple-corner .cc-skin-row .s1 { background: hsl(calc(97deg + var(--g-dh)) calc(15% * var(--g-s)) calc(var(--lo) + 53% * var(--lk))); } #couple-corner .cc-skin-row .s2 { background: hsl(calc(25deg + var(--a-dh)) calc(72% * var(--a-s)) calc(var(--lo) + 70% * var(--lk))); } #couple-corner .cc-skin-row .s3 { background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 97% * var(--lk))); } @media (max-width: 820px) { #couple-corner .cc-skin-list { flex-direction: row; flex-wrap: wrap; } } #couple-corner .cc-ipod-body { width: min(180px, 100%); } #couple-corner .cc-ipod-img { width: 100%; } @media (max-width: 820px) { #couple-corner .cc-left { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ===== v5: iPod dock + drag, mobile sidebar on top ===== */ #couple-corner .cc-dock { position: relative; width: 100%; max-width: 180px; height: calc(190px * var(--dock-scale, 1)); margin: 4px auto 14px; } #couple-corner .cc-cable { position: absolute; left: 0; top: 0; overflow: visible; z-index: 1; } #couple-corner .cc-cable-edge { stroke: hsl(0 0% 45%); stroke-width: 6; } #couple-corner .cc-cable-line { stroke: hsl(0 0% 97%); stroke-width: 3; } #couple-corner .cc-plug { fill: var(--cc-white); stroke: hsl(0 0% 55%); stroke-width: 1; } #couple-corner .cc-plug-ring { fill: hsl(0 0% 78%); } #couple-corner .cc-plug-tip { fill: hsl(0 0% 72%); stroke: hsl(0 0% 50%); stroke-width: 1; } #couple-corner .cc-dock-led { position: absolute; left: 44px; top: 20px; width: 6px; height: 6px; background: hsl(120 60% 45%); box-shadow: 0 0 0 1px hsl(0 0% 20% / .4); } #couple-corner .cc-dock[data-docked=false] .cc-dock-led { background: hsl(35 90% 55%); animation: cc-blink 1s steps(2) infinite; } @keyframes cc-blink { 50% { opacity: .2; } } #couple-corner .cc-dock .cc-dock-frame::after { content: ''; position: absolute; left: 20px; top: 44px; width: 124px; height: 118px; border: 2px dashed transparent; pointer-events: none; } #couple-corner .cc-dock[data-docked=false] .cc-dock-frame::after { border-color: hsl(0 0% 50% / .45); } #couple-corner .cc-dock.cc-dock-near .cc-dock-frame::after { border-color: hsl(120 60% 40%); background: hsl(120 60% 45% / .12); } #couple-corner .cc-dock.cc-dock-click { animation: cc-click .35s steps(3); } @keyframes cc-click { 50% { transform: translateY(2px); } } #couple-corner .cc-dock .cc-ipod-body { position: absolute; left: 20px; top: 44px; width: 124px; z-index: 2; } #couple-corner .cc-ipod-body { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; } #couple-corner .cc-ipod-body.cc-floating { position: fixed; z-index: 60; } #couple-corner .cc-ipod-body.cc-dragging { cursor: grabbing; filter: drop-shadow(4px 6px 0 hsl(0 0% 0% / .25)); } #couple-corner .cc-ipod-body.cc-snapping { transition: left .18s steps(4), top .18s steps(4); } #couple-corner .cc-dock .cc-ipod-img { width: 124px; } #couple-corner .cc-dock .cc-ipod-bubble { top: auto; bottom: calc(100% + 9px); left: 36%; transform: none; } #couple-corner .cc-dock .cc-ipod-bubble::after { left: 12px; } #couple-corner .cc-dock .cc-ipod-bubble[data-playing=true] { animation-name: cc-float2; } @keyframes cc-float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } #couple-corner .cc-dock-hint { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 10px/1.3 var(--cc-pixel); opacity: .7; margin: 0 !important; } /* phones: sidebar first, two aligned columns */ @media (max-width: 820px) { #couple-corner .cc-grid { display: flex; flex-direction: column; gap: 12px; } #couple-corner .cc-left { order: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; align-items: stretch; } #couple-corner .cc-center { order: 1 !important; } #couple-corner .cc-left > * { margin: 0 !important; min-width: 0; } #couple-corner .cc-left .cc-profile, #couple-corner .cc-left .cc-special-side { display: flex; flex-direction: column; } #couple-corner .cc-left .cc-profile .cc-body, #couple-corner .cc-left .cc-special-side .cc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; } #couple-corner .cc-left .cc-tearpad { align-self: stretch; display: flex; flex-direction: column; } #couple-corner .cc-left .cc-tear-sheet { flex: 1; justify-content: center; } #couple-corner .cc-left .cc-dock { justify-self: center; } #couple-corner .cc-left .cc-skin-window { grid-column: 1 / -1; } #couple-corner .cc-badge { width: 44px; height: 44px; } #couple-corner .cc-tear-num { font-size: 44px; } } @media (max-width: 380px) { #couple-corner .cc-left { gap: 8px; } #couple-corner .cc-dock { transform: scale(.9); transform-origin: top center; } } /* ===== v6: messages + compact calendar ===== */ #couple-corner .cc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: hsl(355 80% 55%); color: #fff; font: 11px/1 var(--cc-pixel); box-shadow: 1px 1px 0 hsl(355 60% 35%); } #couple-corner .cc-count[hidden] { display: none; } #couple-corner .cc-tab { position: relative; } #couple-corner .cc-tab-count { position: absolute; top: -7px; right: -5px; } #couple-corner .cc-bell { position: relative; background: hsl(0 0% 100% / .2); border: 1px solid hsl(0 0% 100% / .5); color: inherit; min-width: 30px; height: 26px; padding: 0 6px; font: 15px/1 monospace; } #couple-corner .cc-bell:hover { background: hsl(0 0% 100% / .35); } #couple-corner .cc-bell .cc-count { position: absolute; top: -7px; right: -8px; } #couple-corner .cc-inbox-pill-row { display: flex; justify-content: center; } #couple-corner .cc-inbox-pill-row:empty { display: none; } #couple-corner .cc-inbox-pill { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 5px 12px 5px 5px; background: hsl(0 0% 22%); color: #fff; border: 0; font: 13px/1.2 var(--cc-pixel); box-shadow: 2px 2px 0 hsl(0 0% 0% / .25); } #couple-corner .cc-inbox-pill .cc-mini-avatar { margin: 0; } #couple-corner .cc-inbox-pill:hover { background: hsl(0 0% 30%); } #couple-corner .cc-inbox { width: min(520px, 94vw); } #couple-corner .cc-inbox-list { display: flex; flex-direction: column; } #couple-corner .cc-inbox-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 10px 6px; background: none; border: 0; border-bottom: 1px dashed hsl(0 0% 50% / .35); color: inherit; font: 13px/1.5 Verdana, var(--cc-zh), sans-serif; } #couple-corner .cc-inbox-item:hover { background: hsl(0 0% 50% / .08); } #couple-corner .cc-inbox-item.cc-fresh { background: hsl(355 80% 60% / .1); } #couple-corner .cc-inbox-item.cc-fresh::before { content: ''; position: absolute; } #couple-corner .cc-inbox-item .cc-mini-avatar { width: 32px; height: 32px; margin: 0; font-size: 15px; } #couple-corner .cc-inbox-text small { display: block; font-size: 11px; opacity: .65; margin-top: 2px; } #couple-corner .cc-inbox-item img { width: 40px; height: 40px; object-fit: cover; border: 1px solid hsl(0 0% 50% / .3); } #couple-corner .cc-inbox-arrow { opacity: .5; font-size: 16px; } /* compact calendar: grid on the left, the day's plans on the right */ #couple-corner .cc-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } #couple-corner .cc-export-row { display: flex; flex-wrap: wrap; align-items: end; gap: 7px; margin-top: 9px; } #couple-corner .cc-export-row .cc-field { flex: 1 1 135px; margin: 0; } #couple-corner .cc-export-row .cc-button { min-height: 33px; } #couple-corner .cc-export-row .cc-inline-check { flex-basis: 100%; } @media (min-width: 900px) { #couple-corner .cc-cal-wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } #couple-corner .cc-cal-side .cc-agenda { margin-top: 0; } #couple-corner .cc-cal-side .cc-home-grid .cc-fields, #couple-corner .cc-cal-side .cc-fields { grid-template-columns: 1fr; } } #couple-corner .cc-calendar-grid { gap: 3px; } #couple-corner .cc-day, #couple-corner .cc-day-blank { min-height: 34px; font-size: 13px; padding-top: 3px; } #couple-corner .cc-day-dots { min-height: 8px; padding-top: 2px; } #couple-corner .cc-weekday { font-size: 11px; padding: 2px 0; } #couple-corner .cc-planner-toolbar h3 { font-size: 19px; } #couple-corner .cc-week-row { grid-template-columns: 48px minmax(0, 1fr); padding: 3px; } #couple-corner .cc-week-day { min-height: 36px; } #couple-corner .cc-week-day b { font-size: 15px; } #couple-corner .cc-year { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #couple-corner .cc-mini { padding: 3px; } #couple-corner .cc-mini-title { font-size: 11px; } #couple-corner .cc-mini-day { font-size: 8px; } #couple-corner .cc-legend { font-size: 10px; } @media (pointer: coarse) { #couple-corner .cc-day { min-height: 40px; } } #couple-corner .cc-bell { margin-right: 8px; } /* ===== v7: user popover, mode switches, scrollable special days, mobile order ===== */ #couple-corner .cc-user { position: relative; } #couple-corner .cc-user-btn { width: 30px; height: 30px; padding: 0; border: 2px solid hsl(0 0% 100% / .7); background: none; display: flex; } #couple-corner .cc-user-icon { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; font: 15px/1 var(--cc-zh), monospace; color: #fff; background: hsl(calc(97deg + var(--g-dh)) calc(22% * var(--g-s)) calc(var(--lo) + 58% * var(--lk))); } #couple-corner .cc-user-icon.zhenzhen { background: hsl(calc(22deg + var(--a-dh)) calc(70% * var(--a-s)) calc(var(--lo) + 69% * var(--lk))); } #couple-corner .cc-user-icon img { width: 100%; height: 100%; object-fit: cover; } #couple-corner .cc-user-pop { position: absolute; right: -4px; top: calc(100% + 8px); width: 210px; z-index: 70; margin: 0; display: none; color: initial; font: 12px/1.8 Verdana, var(--cc-zh), sans-serif; letter-spacing: 0; } #couple-corner .cc-user-pop::before { content: ''; position: absolute; right: 12px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--cc-line); } #couple-corner .cc-user:hover .cc-user-pop, #couple-corner .cc-user:focus-within .cc-user-pop, #couple-corner .cc-user.cc-open .cc-user-pop { display: block; } #couple-corner .cc-user::after { content: ''; position: absolute; left: -10px; right: -10px; top: 100%; height: 10px; } /* hover bridge */ #couple-corner .cc-user-pop .cc-body { text-align: center; } #couple-corner .cc-user-pop .cc-avatar { padding-top: 23px; } #couple-corner .cc-player-avatar { position: relative; display: inline-flex; } #couple-corner .cc-baby-bubble { --bubble-bg: var(--cc-mint); --bubble-stroke: var(--cc-line); position: absolute; z-index: 1; top: -18px; left: 50%; transform: translateX(-50%) rotate(-5deg); padding: 2px 5px; border: 1px solid var(--bubble-stroke); border-radius: 7px 7px 7px 2px; background: var(--bubble-bg); box-shadow: 1px 1px 0 hsl(0 0% 0% / .15); color: var(--cc-ink); font: 10px/1.3 var(--cc-zh), monospace; white-space: nowrap; pointer-events: none; } #couple-corner .cc-baby-bubble::after { content: ''; position: absolute; bottom: -4px; left: calc(50% - 3px); width: 5px; height: 5px; transform: rotate(45deg); border-right: 1px solid var(--bubble-stroke); border-bottom: 1px solid var(--bubble-stroke); background: var(--bubble-bg); } #couple-corner .cc-player-avatar.zhenzhen .cc-baby-bubble { --bubble-bg: var(--cc-pink); --bubble-stroke: var(--cc-accent); transform: translateX(-50%) rotate(5deg); } #couple-corner .cc-user-pop .cc-avatar-btn small, #couple-corner .cc-user-pop .cc-avatar-static small { font: 12px/1.2 var(--cc-pixel); } #couple-corner .cc-logout { width: 100%; margin-top: 8px; } #couple-corner .cc-switches { display: flex; gap: 6px; flex-shrink: 0; } #couple-corner .cc-switch { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 3px; min-height: 26px; background: var(--cc-white); border: 1px solid hsl(0 0% 50% / .45); box-shadow: 1px 1px 0 hsl(0 0% 0% / .2); font: 11px/1 var(--cc-pixel); color: inherit; } #couple-corner .cc-switch:hover { background: hsl(calc(32deg + var(--a-dh)) calc(85% * var(--a-s)) calc(var(--lo) + 88% * var(--lk))); } #couple-corner .cc-stick .st-base { fill: hsl(0 0% 18%); } #couple-corner .cc-stick .st-base-top { fill: hsl(0 0% 32%); } #couple-corner .cc-stick .st-rod { fill: hsl(0 0% 62%); } #couple-corner .cc-stick.dark .st-ball { fill: hsl(355 75% 55%); } #couple-corner .cc-stick.high .st-ball { fill: hsl(45 90% 55%); } #couple-corner .cc-stick .st-shine { fill: hsl(0 0% 100% / .8); } #couple-corner .cc-stick .st-lever { transform-origin: 12px 17px; transform: rotate(-22deg); transition: transform .15s steps(3); } #couple-corner .cc-switch[aria-pressed=true] .st-lever { transform: rotate(22deg); } #couple-corner .cc-switch span { min-width: 44px; text-align: left; } /* special days: scrollable little window */ #couple-corner .cc-special-side { display: flex; flex-direction: column; } #couple-corner .cc-special-side .cc-body { display: flex; flex-direction: column; min-height: 0; } #couple-corner .cc-special-side [data-upcoming-days] { max-height: 190px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; } #couple-corner .cc-special-side .cc-side-action { flex-shrink: 0; } #couple-corner .cc-left > .cc-dock { margin-top: 0; } @media (max-width: 820px) { #couple-corner .cc-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; } #couple-corner .cc-left, #couple-corner .cc-center { display: contents; } #couple-corner .cc-center > * { grid-column: 1 / -1; min-width: 0; } #couple-corner .cc-hero { order: 1; margin-bottom: 0; } #couple-corner .cc-tearpad { order: 2; } #couple-corner .cc-dock { order: 3; } #couple-corner .cc-special-side { order: 4; } #couple-corner .cc-tabs { order: 5; margin: 4px 0 6px; } #couple-corner .cc-inbox-pill-row { order: 6; } #couple-corner .cc-preview-message { order: 7; } #couple-corner .cc-center > [data-panel] { order: 8; } #couple-corner .cc-left > * { margin: 0 !important; min-width: 0; } /* row 2: three equal-height tiles */ #couple-corner .cc-tearpad { display: flex; flex-direction: column; padding-top: 7px; } #couple-corner .cc-tear-sheet { flex: 1; justify-content: center; padding-bottom: 6px; } #couple-corner .cc-tear-rings { padding: 0 8px; } #couple-corner .cc-tear-head { padding: 9px 2px 3px; font-size: 9px; letter-spacing: 1px; } #couple-corner .cc-tear-num { font-size: 32px; margin-top: 2px; } #couple-corner .cc-tear-unit, #couple-corner .cc-tear-foot { font-size: 9px; } #couple-corner .cc-tear-hint { display: none; } #couple-corner .cc-tear-set { font-size: 9px; padding: 2px; margin-top: 10px; min-height: 26px; } #couple-corner .cc-dock { width: 100%; height: calc(190px * var(--dock-scale, 1)); align-self: center; } #couple-corner .cc-special-side .cc-bar { font-size: 11px; padding: 3px 5px; min-height: 24px; } #couple-corner .cc-special-side .cc-bar .cc-min { display: none; } #couple-corner .cc-special-side .cc-body { flex: 1 1 0; contain: size; padding: 6px; } #couple-corner .cc-special-side [data-upcoming-days] { max-height: none; flex: 1; min-height: 0; } #couple-corner .cc-special-side .cc-upcoming-entry { padding: 5px 0; } #couple-corner .cc-special-side .cc-upcoming-entry strong { font-size: 11px; margin: 2px 0; } #couple-corner .cc-special-side .cc-plan-tag { font-size: 9px; } #couple-corner .cc-special-side .cc-side-action { margin-top: 4px; min-height: 28px; font-size: 10px; padding: 2px; } #couple-corner .cc-switch span { display: none; } #couple-corner .cc-switch { padding: 1px 3px; } #couple-corner .cc-browser-strip { gap: 6px; } } #couple-corner .cc-dock-frame { position: absolute; left: 0; top: 0; width: 180px; height: 190px; transform: scale(var(--dock-scale, 1)); transform-origin: top left; } #couple-corner .cc-ipod-body.cc-floating .cc-ipod-img { width: 124px; } #couple-corner .cc-ipod-body.cc-floating { width: 124px; } #couple-corner .cc-ipod-body.cc-floating .cc-ipod-bubble { top: auto; bottom: calc(100% + 9px); left: 36%; transform: none; } #couple-corner .cc-ipod-body.cc-floating .cc-ipod-bubble::after { left: 12px; } #couple-corner .cc-ipod-body.cc-floating .cc-ipod-bubble[data-playing=true] { animation-name: cc-float2; } /* daily question: today's card on home, the past questions / ask dialog */ #couple-corner .cc-q-head { margin-bottom: 4px; } #couple-corner .cc-q-new { padding: 1px 6px; letter-spacing: 1px; background: hsl(calc(29deg + var(--a-dh)) calc(83% * var(--a-s)) calc(var(--lo) + 84.1% * var(--lk))); border: 1px solid hsl(calc(30deg + var(--a-dh)) calc(38% * var(--a-s)) calc(var(--lo) + 71.2% * var(--lk))); color: hsl(calc(25deg + var(--a-dh)) calc(29% * var(--a-s)) calc(var(--lo) + 41.6% * var(--lk))); } #couple-corner .cc-q-text { margin: 6px 0 0; font-size: 15px; line-height: 1.6; font-weight: 600; } #couple-corner .cc-q-zh { margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: hsl(calc(79deg + var(--g-dh)) calc(10% * var(--g-s)) calc(var(--lo) + 43.1% * var(--lk))); } #couple-corner .cc-q-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; align-items: start; } #couple-corner .cc-q-answer { padding: 8px 10px; font-size: 12px; background: hsl(calc(77deg + var(--g-dh)) calc(35% * var(--g-s)) calc(var(--lo) + 92.2% * var(--lk))); border-left: 3px solid hsl(calc(97deg + var(--g-dh)) calc(22% * var(--g-s)) calc(var(--lo) + 58% * var(--lk))); } #couple-corner .cc-q-answer.zhenzhen { border-left-color: hsl(calc(22deg + var(--a-dh)) calc(70% * var(--a-s)) calc(var(--lo) + 69% * var(--lk))); } #couple-corner .cc-q-answer p { margin: 6px 0 0; } #couple-corner .cc-q-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #couple-corner .cc-q-who b { font-weight: 600; } #couple-corner .cc-q-row .cc-link { font-size: 11px; } #couple-corner .cc-q-locked, #couple-corner .cc-q-waiting { background: none; border: 1px dashed hsl(calc(81deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 73.3% * var(--lk))); border-left-width: 3px; } #couple-corner .cc-q-locked p { color: hsl(calc(79deg + var(--g-dh)) calc(10% * var(--g-s)) calc(var(--lo) + 43.1% * var(--lk))); } #couple-corner .cc-q-form textarea { display: block; width: 100%; min-height: 64px; margin-top: 6px; padding: 6px; resize: vertical; font-size: 13px; line-height: 1.5; color: hsl(calc(99deg + var(--g-dh)) calc(15% * var(--g-s)) calc(var(--lo) + 33.3% * var(--lk))); background: hsl(calc(53deg + var(--p-dh)) calc(100% * var(--p-s)) calc(var(--lo) + 98.4% * var(--lk))); border: 1px inset hsl(calc(81deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 73.3% * var(--lk))); border-radius: 0; } #couple-corner .cc-q-form .cc-form-footer { margin-top: 8px; } #couple-corner .cc-question-modal { width: min(640px, 94vw); } #couple-corner .cc-q-sub { margin: 18px 0 6px; font-size: 13px; font-weight: 600; } #couple-corner .cc-q-sched { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12px; border-bottom: 1px dashed hsl(0 0% 50% / .35); } #couple-corner .cc-q-sched b { margin-right: 6px; font-weight: 600; } #couple-corner .cc-q-sched > span { min-width: 0; overflow-wrap: anywhere; } #couple-corner .cc-q-sched .cc-button { flex: none; } #couple-corner .cc-q-day { padding: 10px 8px; border-top: 1px dashed hsl(0 0% 50% / .35); } #couple-corner .cc-q-day .cc-q-answers { margin-bottom: 4px; } @media (max-width: 600px) { #couple-corner .cc-q-answers { grid-template-columns: minmax(0, 1fr); } #couple-corner .cc-q-form textarea { font-size: 16px; } } /* achievements shelf */ #couple-corner .cc-ach-modal { width: min(660px, 94vw); } #couple-corner .cc-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } #couple-corner .cc-ach { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: hsl(calc(77deg + var(--g-dh)) calc(35% * var(--g-s)) calc(var(--lo) + 92.2% * var(--lk))); border: 2px solid hsl(calc(81deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 73.3% * var(--lk))); box-shadow: 2px 2px 0 hsl(calc(97deg + var(--g-dh)) calc(22% * var(--g-s)) calc(var(--lo) + 58% * var(--lk))); } #couple-corner .cc-ach-glyph { flex: 0 0 34px; height: 34px; display: grid; place-items: center; font-size: 18px; line-height: 1; background: hsl(calc(29deg + var(--a-dh)) calc(83% * var(--a-s)) calc(var(--lo) + 84.1% * var(--lk))); border: 1px solid hsl(calc(30deg + var(--a-dh)) calc(38% * var(--a-s)) calc(var(--lo) + 71.2% * var(--lk))); color: hsl(calc(25deg + var(--a-dh)) calc(29% * var(--a-s)) calc(var(--lo) + 41.6% * var(--lk))); } #couple-corner .cc-ach-text { min-width: 0; font-size: 12px; line-height: 1.5; } #couple-corner .cc-ach-text b { font-weight: 600; } #couple-corner .cc-ach-text small { display: block; margin-top: 2px; font-size: 11px; color: hsl(calc(79deg + var(--g-dh)) calc(10% * var(--g-s)) calc(var(--lo) + 43.1% * var(--lk))); } #couple-corner .cc-ach-when .cc-link { font-size: 11px; } #couple-corner .cc-ach-locked { background: none; border-style: dashed; box-shadow: none; } #couple-corner .cc-ach-locked .cc-ach-glyph { background: none; border-style: dashed; color: hsl(calc(79deg + var(--g-dh)) calc(10% * var(--g-s)) calc(var(--lo) + 43.1% * var(--lk))); } #couple-corner .cc-ach-bar { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .5px; color: hsl(calc(25deg + var(--a-dh)) calc(29% * var(--a-s)) calc(var(--lo) + 41.6% * var(--lk))); } #couple-corner .cc-ach-hidden { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } #couple-corner .cc-ach-hidden .cc-ach { align-items: center; } #couple-corner .cc-ach-spark { display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: 1px; background: hsl(calc(25deg + var(--a-dh)) calc(71% * var(--a-s)) calc(var(--lo) + 60% * var(--lk))); transform: rotate(45deg); } @media (prefers-reduced-motion: no-preference) { #couple-corner .cc-ach-spark { animation: cc-ach-twinkle 1.6s ease-in-out infinite; } @keyframes cc-ach-twinkle { 50% { opacity: .35; transform: rotate(45deg) scale(.7); } } } @media (max-width: 600px) { #couple-corner .cc-ach-grid { grid-template-columns: minmax(0, 1fr); } #couple-corner .cc-ach-hidden { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* status (like WeChat 状态): a slide-out tab on the right edge; the panel slides in with it */ #couple-corner .cc-status { --status-w: min(320px, 86vw); position: fixed; z-index: 65; top: 0; bottom: 0; right: env(safe-area-inset-right, 0px); width: var(--status-w); display: flex; flex-direction: column; justify-content: center; padding: 12px 0; transform: translateX(100%); transition: transform .24s cubic-bezier(.2, .8, .3, 1); pointer-events: none; } #couple-corner .cc-status.cc-open { transform: none; } /* the pull-tab is a piece of the window frame (same border, paper, inset highlight, 2px hard shadow) */ #couple-corner .cc-status-tab { position: absolute; right: 100%; top: 40%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 42px; padding: 7px 3px 6px 5px; pointer-events: auto; touch-action: pan-y; cursor: pointer; color: hsl(calc(89deg + var(--g-dh)) calc(13% * var(--g-s)) calc(var(--lo) + 39.4% * var(--lk))); background: var(--cc-paper); border: 1px solid hsl(calc(140deg + var(--g-dh)) calc(4% * var(--g-s)) calc(var(--lo) + 52% * var(--lk))); border-right: 0; border-radius: 8px 0 0 8px; box-shadow: inset 1px 1px 0 hsl(calc(0deg + var(--p-dh)) calc(0% * var(--p-s)) calc(var(--lo) + 100.0% * var(--lk))), 2px 2px 0 hsl(calc(110deg + var(--g-dh)) calc(5% * var(--g-s)) calc(var(--lo) + 74% * var(--lk))); } #couple-corner[data-dark=true] .cc-status-tab { box-shadow: inset 1px 1px 0 hsl(calc(120deg + var(--g-dh)) calc(5% * var(--g-s)) calc(var(--lo) + 30% * var(--lk))), 2px 2px 0 hsl(calc(110deg + var(--g-dh)) calc(5% * var(--g-s)) calc(var(--lo) + 74% * var(--lk))); } #couple-corner .cc-status-tab:hover { background: hsl(calc(38deg + var(--a-dh)) calc(72% * var(--a-s)) calc(var(--lo) + 87.5% * var(--lk))); } #couple-corner .cc-status-tab:active { transform: translate(1px, calc(-50% + 1px)); } #couple-corner .cc-status-tab .cc-mini-avatar { width: 26px; height: 26px; margin: 0; font-size: 13px; } #couple-corner .cc-status-tab-emoji { font-size: 18px; line-height: 1; } #couple-corner .cc-status-chev { font-size: 12px; font-weight: 700; line-height: 1; } #couple-corner .cc-status-dot { position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border: 1px solid var(--cc-paper); background: hsl(calc(355deg + var(--a-dh)) calc(62% * var(--a-s)) calc(var(--lo) + 56% * var(--lk))); box-shadow: 1px 1px 0 hsl(calc(355deg + var(--a-dh)) calc(45% * var(--a-s)) calc(var(--lo) + 38% * var(--lk))); } #couple-corner .cc-status > .cc-status-panel.cc-window { position: relative; flex: 0 1 auto; min-height: 0; width: 100%; margin: 0; display: flex; flex-direction: column; pointer-events: auto; touch-action: pan-y; visibility: hidden; transition: visibility 0s linear .24s; } #couple-corner .cc-status.cc-open > .cc-status-panel.cc-window { visibility: visible; transition: none; } #couple-corner .cc-status-panel > .cc-bar { flex: none; } #couple-corner .cc-status-panel > .cc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 10px 12px 12px; scrollbar-width: thin; } #couple-corner .cc-status-card { padding: 8px 10px 10px; background: hsl(calc(77deg + var(--g-dh)) calc(35% * var(--g-s)) calc(var(--lo) + 92.2% * var(--lk))); border-left: 3px solid hsl(calc(97deg + var(--g-dh)) calc(22% * var(--g-s)) calc(var(--lo) + 58% * var(--lk))); } #couple-corner .cc-status-card.zhenzhen { border-left-color: hsl(calc(22deg + var(--a-dh)) calc(70% * var(--a-s)) calc(var(--lo) + 69% * var(--lk))); } #couple-corner .cc-status-none { background: none; border: 1px dashed hsl(calc(81deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 73.3% * var(--lk))); border-left-width: 3px; } #couple-corner .cc-status-who { display: flex; align-items: center; gap: 2px; font-size: 12px; } #couple-corner .cc-status-who b { font-weight: 600; } #couple-corner .cc-status-who .cc-plan-tag { margin-left: auto; padding-left: 8px; white-space: nowrap; } #couple-corner .cc-status-now { display: flex; align-items: center; gap: 10px; margin-top: 8px; } #couple-corner .cc-status-emoji { flex: none; font-size: 34px; line-height: 1.1; } #couple-corner .cc-status-text { min-width: 0; font-size: 15px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; } #couple-corner .cc-status-none .cc-status-text { margin-top: 6px; font-size: 12px; font-weight: 400; } #couple-corner .cc-status-card.cc-status-stale .cc-status-now, #couple-corner .cc-status-mine.cc-status-stale > span, #couple-corner .cc-status-tab-emoji.cc-status-stale { opacity: .5; filter: grayscale(.8); } #couple-corner .cc-status-card.cc-status-stale .cc-status-who .cc-plan-tag { font-style: italic; } #couple-corner .cc-status-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 600; } #couple-corner .cc-status-mine { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 8px; border: 1px dashed hsl(calc(81deg + var(--g-dh)) calc(21% * var(--g-s)) calc(var(--lo) + 73.3% * var(--lk))); } #couple-corner .cc-status-emoji-sm { flex: none; font-size: 20px; line-height: 1; } #couple-corner .cc-status-mine-text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; } #couple-corner .cc-status-mine-text .cc-plan-tag { display: block; font-size: 10px; } #couple-corner .cc-status-mine .cc-button { flex: none; min-height: 26px; padding: 2px 8px; font-size: 11px; } #couple-corner .cc-status-mine-empty { margin: 0; } #couple-corner .cc-status-groups { margin-top: 10px; } #couple-corner .cc-status-group + .cc-status-group { margin-top: 12px; } #couple-corner .cc-status-group-title { margin: 0 0 5px; padding: 3px 6px; border-left: 3px solid #9bad8c; background: #edf2df; color: #57684f; font-size: 10px; font-weight: 700; letter-spacing: .03em; } #couple-corner .cc-status-group:nth-child(2) .cc-status-group-title { border-left-color: #dca2af; background: #f8eced; color: #825e68; } #couple-corner .cc-status-group:nth-child(3) .cc-status-group-title { border-left-color: #a5bcd5; background: #edf2f7; color: #526b80; } #couple-corner .cc-status-group:nth-child(4) .cc-status-group-title { border-left-color: #d8bba0; background: #f8f0e6; color: #7b6653; } #couple-corner .cc-status-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 14px 0 6px; } #couple-corner .cc-status-heading .cc-status-sub { margin: 0; } #couple-corner .cc-status-history-open.cc-button { flex: none; min-height: 27px; padding: 3px 6px; font-size: 10px; } #couple-corner .cc-status-history { width: min(520px, 94vw); } #couple-corner .cc-status-history-list { display: flex; flex-direction: column; margin-top: 8px; } #couple-corner .cc-status-history-item { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px dashed hsl(0 0% 50% / .35); } #couple-corner .cc-status-history-item .cc-status-face { width: 42px; height: 42px; } #couple-corner .cc-status-history-item > div { display: flex; flex-direction: column; min-width: 0; gap: 2px; } #couple-corner .cc-status-history-item b { font-size: 12px; } #couple-corner .cc-status-history-item span { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; } #couple-corner .cc-status-history-item small { font-size: 11px; opacity: .65; } #couple-corner .cc-status-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #couple-corner .cc-status-face { display: inline-block; width: 32px; height: 32px; flex: none; vertical-align: middle; } #couple-corner .cc-status-emoji .cc-status-face { width: 48px; height: 48px; } #couple-corner .cc-status-emoji-sm .cc-status-face { width: 32px; height: 32px; } #couple-corner .cc-status-tab-emoji .cc-status-face { width: 23px; height: 23px; } #couple-corner .cc-status-bubble .cc-status-face { width: 16px; height: 16px; } #couple-corner .cc-status-preset.cc-button { min-width: 0; min-height: 76px; padding: 5px 2px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.05; text-align: center; white-space: normal; background: var(--cc-paper); } #couple-corner .cc-status-preset-icon { display: block; line-height: 0; } #couple-corner .cc-status-preset .cc-status-face { width: 40px; height: 40px; } #couple-corner .cc-status-preset-label { display: block; max-width: 100%; font-size: 10px; line-height: 1.15; overflow-wrap: anywhere; } #couple-corner .cc-status-preset.cc-button[aria-pressed=true] { background: hsl(calc(77deg + var(--g-dh)) calc(35% * var(--g-s)) calc(var(--lo) + 92.2% * var(--lk))); outline: 2px solid hsl(calc(97deg + var(--g-dh)) calc(22% * var(--g-s)) calc(var(--lo) + 58% * var(--lk))); outline-offset: -3px; } #couple-corner .cc-status-form .cc-status-face { width: 20px; height: 20px; margin-right: 3px; } #couple-corner .cc-status-form { margin-top: 10px; } #couple-corner .cc-status-form .cc-form-footer { margin-top: 8px; justify-content: flex-end; } #couple-corner .cc-status-form .cc-form-footer .cc-button { min-width: 76px; } #couple-corner .cc-baby-bubble.cc-status-stale { opacity: .6; } @media (max-width: 600px) { #couple-corner .cc-status-tab { width: 40px; min-height: 50px; justify-content: center; padding: 6px 2px 5px 4px; } #couple-corner .cc-status-tab-emoji + .cc-status-chev { display: none; } /* shorter tab on phones */ #couple-corner .cc-status-tab .cc-mini-avatar { width: 24px; height: 24px; } #couple-corner .cc-status-tab-emoji { font-size: 16px; } #couple-corner .cc-status-panel > .cc-body { padding: 8px 10px 10px; } #couple-corner .cc-status-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { #couple-corner .cc-status, #couple-corner .cc-status > .cc-status-panel.cc-window { transition: none; } } /* weekly check-in: this week's card at the top of the daily question window, past weeks in Past questions */ #couple-corner .cc-checkin { margin: 0 0 14px; padding: 8px 10px 2px; background: hsl(calc(273deg + var(--p-dh)) calc(28% * var(--p-s)) calc(var(--lo) + 92.4% * var(--lk))); border: 2px solid hsl(calc(266deg + var(--l-dh)) calc(21% * var(--l-s)) calc(var(--lo) + 72.2% * var(--lk))); box-shadow: 2px 2px 0 hsl(calc(276deg + var(--l-dh)) calc(13% * var(--l-s)) calc(var(--lo) + 58.6% * var(--lk))); } #couple-corner .cc-checkin:empty { display: none; } #couple-corner .cc-ck-answers { margin: 10px 0 8px; } #couple-corner .cc-ck-form .cc-q-row .cc-small { font-size: 11px; } #couple-corner .cc-ck-moods { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } #couple-corner .cc-button.cc-ck-mood { flex: 1 1 0; min-width: 54px; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px 3px; border-radius: 0; font-size: 9px; line-height: 1.15; letter-spacing: 0; white-space: nowrap; } #couple-corner .cc-button.cc-ck-mood[aria-pressed=true] { background: hsl(calc(32deg + var(--a-dh)) calc(80% * var(--a-s)) calc(var(--lo) + 83.9% * var(--lk))); border-style: inset; box-shadow: inset 1px 1px hsl(calc(27deg + var(--a-dh)) calc(49% * var(--a-s)) calc(var(--lo) + 66.7% * var(--lk))); color: hsl(calc(27deg + var(--a-dh)) calc(40% * var(--a-s)) calc(var(--lo) + 40.2% * var(--lk))); } #couple-corner .cc-ck-glyph { display: inline-grid; place-items: center; font-size: 18px; line-height: 1; } #couple-corner .cc-ck-mood-line { display: flex; align-items: center; gap: 6px; font-size: 12px; } #couple-corner .cc-ck-mood-line .cc-ck-glyph { font-size: 20px; } #couple-corner .cc-ck-form textarea { min-height: 48px; } @media (max-width: 600px) { #couple-corner .cc-checkin { padding: 8px 8px 2px; } #couple-corner .cc-ck-moods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; } #couple-corner .cc-button.cc-ck-mood { min-width: 0; min-height: 52px; } #couple-corner .cc-button.cc-ck-mood { white-space: normal; text-align: center; } #couple-corner .cc-ck-form textarea { font-size: 16px; } } /* pixel emoji (pixel-emoji.js): whole-pixel sizes so every pixel stays square; unknown emoji fall back to normal text */ #couple-corner .cc-px { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; flex: none; image-rendering: pixelated; } #couple-corner :is(.cc-status-emoji, .cc-status-preset, .cc-ck-mood) .cc-px { width: 32px; height: 32px; vertical-align: middle; } #couple-corner .cc-ach-glyph .cc-px { width: 32px; height: 32px; vertical-align: 0; } /* phones: the closed status tab is a slim sliver on the edge (the partner's picture and emoji, plus the new-status dot) */ @media (max-width: 600px) { #couple-corner .cc-status:not(.cc-open) .cc-status-tab { width: 18px; min-height: 44px; padding: 6px 0; gap: 4px; overflow: visible; } #couple-corner .cc-status:not(.cc-open) .cc-status-chev { display: none; } #couple-corner .cc-status:not(.cc-open) .cc-status-tab > .cc-mini-avatar { width: 16px; height: 16px; margin: 0 0 0 1px; font-size: 9px; } #couple-corner .cc-status:not(.cc-open) .cc-status-tab-emoji { width: 16px; overflow: hidden; display: flex; justify-content: flex-start; } #couple-corner .cc-status:not(.cc-open) .cc-status-tab-emoji .cc-px { margin-left: 1px; } #couple-corner .cc-status:not(.cc-open) .cc-status-tab::before { content: ''; position: absolute; top: -6px; bottom: -6px; left: -10px; right: 0; } /* a slightly wider invisible tap area */ } /* small phones: the Special Days tile was too short to show a day. Its row grows a little, and the category shows as the coloured dot beside the name (the label stays readable to screen readers), so the first day's name and countdown fit */ @media (max-width: 560px) { #couple-corner .cc-special-side .cc-upcoming-entry { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; } #couple-corner .cc-special-side .cc-upcoming-entry > .cc-plan-tag { font-size: 0; line-height: 0; } #couple-corner .cc-special-side .cc-upcoming-entry > strong { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #couple-corner .cc-special-side .cc-upcoming-entry > .cc-upcoming-bottom { grid-column: 1 / -1; margin-top: 2px; } #couple-corner .cc-special-side { min-height: 146px; } /* the row of three tiles is a little taller, so the first day fits whole */ } /* ===== Calendar colour legend: label on its own line, then two rows of three ===== */ #couple-corner .cc-legend { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; gap: 2px 10px; } #couple-corner .cc-legend .cc-legend-label { grid-column: 1 / -1; } @media (max-width: 380px) { #couple-corner .cc-legend { grid-template-columns: repeat(2, max-content); } } /* ===== Export: one button; options open in a small box ===== */ #couple-corner .cc-calendar-actions .cc-button { flex: 0 0 auto; } #couple-corner .cc-export-row.cc-import { margin-top: 10px; } #couple-corner .cc-export-row.cc-import .cc-inline-check { flex-basis: auto; flex: 1 1 100%; } /* ===== Phones: the iPod stays docked, and the three tiles of row two share one frame style and height ===== */ @media (max-width: 820px) { #couple-corner .cc-dock[data-fixed=true] .cc-ipod-body { touch-action: auto; cursor: default; } #couple-corner .cc-dock[data-fixed=true] .cc-dock-hint { display: none; } #couple-corner .cc-left > .cc-tearpad, #couple-corner .cc-left > .cc-dock { border: 1px solid #7f8983; background: var(--cc-paper); box-shadow: inset 1px 1px #fff, 2px 2px 0 #bbc2b9; padding: 12px 6px 6px; align-self: stretch; } #couple-corner[data-dark=true] .cc-left > .cc-tearpad, #couple-corner[data-dark=true] .cc-left > .cc-dock { border-color: #69776f; box-shadow: inset 1px 1px #abb7ab, 2px 2px 0 #35453c; } #couple-corner .cc-left > .cc-special-side { align-self: stretch; } #couple-corner .cc-left > .cc-tearpad .cc-tear-rings { top: 4px; } #couple-corner .cc-left > .cc-tearpad .cc-tear-set { margin-top: auto; } #couple-corner .cc-left > .cc-tearpad .cc-tear-sheet { margin-bottom: 8px; } #couple-corner .cc-left > .cc-dock { height: auto; min-height: calc(160px * var(--dock-scale, 1) + 18px); max-width: none; display: flex; align-items: center; justify-content: center; } #couple-corner .cc-left > .cc-dock .cc-dock-frame { left: 6px; top: calc(50% - 85px * var(--dock-scale, 1)); } } @media (max-width: 380px) { #couple-corner .cc-left > .cc-dock { transform: none; } }