/* Brighter macaron colors on a sunny cream-yellow base. */
:root{background:#fff1b5;--green:#9b597c;--muted:#86705e;--line:#e9d494;color:#635044}
body{background:linear-gradient(#fff0adb8,#fff2bcc7),url('./garden-background.png') center bottom/cover fixed no-repeat;background-color:#fff1b5}
header{background:#fff2c6ed;border-color:#e9d594}.brand{color:#886242}.brand-mark{background:#ffd56b;color:#866039}nav .active{background:#ffdc7e;color:#865d38}nav button{color:#8b7454}.local-label{color:#8b795b}
.memory-cover h1{color:#775333}.cover-person{color:#826949}.together-days{color:#957450}.together-days b{color:#c77440}.cover-heart{color:#e38ba1}
.timeline-panel{background:#fff9e7cf;border-color:#e4c87e;box-shadow:4px 5px 0 #eac66736}.timeline-toolbar>button{background:#ffe49a;color:#82603b;border-color:#e5c678}.season-label{color:#758743}.timeline-scroll{background:linear-gradient(115deg,#fff0d49c,#fff9e852,#f2efce67)}
.timeline-panel .memory-preview{background:#ffd3e1f5;border-color:#dd9ab5}.timeline-panel .memory-preview:before{background:repeating-linear-gradient(90deg,#f1acd2c9 0 7px,#f8c9e5c9 7px 14px)}
.timeline-panel .botanical-milestone,.timeline-panel .botanical-reflection{background:#e3cff7f5;border-color:#bca0d4}.timeline-panel .botanical-gratitude,.timeline-panel .botanical-resolution{background:#d8edb8f5;border-color:#adc987}.timeline-panel .botanical-conflict{background:#cde8faf5;border-color:#9dc7e3}.timeline-panel .botanical-anniversary{background:#ffe099f5;border-color:#d9b65e}.timeline-panel .botanical-deep_talk{background:#ffd6b7f5;border-color:#dfb18c}
.timeline-panel .branch.bottom .memory-preview{background:#d7e4fbf5;border-color:#afc0de}.timeline-panel .memory-preview:hover{background:#fff3db;border-color:#bba164}.timeline-panel .memory-preview strong{color:#66505f}.timeline-panel .memory-preview .category{color:#8c6589}
.axis time{background:#fff4cce6;color:#967343}.timeline-bottom .icon-button{background:#ffe39d;color:#926d39;border-color:#e3c478}.timeline-bottom{color:#92815d}.more{background:#fff0c9;border-color:#e1c684;color:#957340}
.record-dock{background:linear-gradient(100deg,#f5a9c8,#d5b4ee);border-color:#bb83ac;color:#774667;box-shadow:0 3px 0 #d4a1c5,0 0 0 6px #fff1b5e8}.record-dock:hover{background:linear-gradient(100deg,#f499be,#cfa5ee);box-shadow:0 3px 0 #cc97bd,0 0 0 6px #fff1b5e8}
.upcoming h2{color:#987148}.upcoming-items>div{background:#ffe4a7ed;border-color:#e8cb86}.upcoming-items>div:nth-child(2){background:#d9eafbed;border-color:#b9d2e8}.upcoming-items>div:nth-child(3){background:#e0efc7ed;border-color:#c1d697}.upcoming-items strong{color:#7e685b}.days-away{color:#977447}
.browse-options{background:#fff8e2}.filters select{background:#fffdf5;border-color:#cdbd91;color:#856c53}.toolbar-actions button:last-child{background:#ead5f6}.privacy-note{background:#ffebba}.privacy-note p{color:#826c52}.metrics button{background:#ffd8e6;border-color:#e5b3c6}.metrics button:nth-child(2n){background:#d8e9fc}.metrics button:nth-child(3n){background:#dfedc2}.metrics button:nth-child(4n){background:#ffe4ae}
.avatar.person-pink,.memory-preview .avatar.person-pink,.bubble .avatar.person-pink{background:#f6b2d0;color:#87365f}.avatar.person-blue,.memory-preview .avatar.person-blue,.bubble .avatar.person-blue{background:#afdafa;color:#2b5d81}.bubble.person-pink,.editor-person.person-pink{background:#fad0e3;color:#813b60;border-color:#e7a2c0}.bubble.person-blue,.editor-person.person-blue{background:#cce7fc;color:#315f80;border-color:#9fc9e9}
dialog{background:#fffbef}input,textarea,select{background:#fffef8}footer{color:#92795c;border-color:#e6d29c}
@media(max-width:767px){header{background:#fff2c6ed}}

/* One stable macaron color per memory category, in both local and shared views. */
.metrics button[data-category="milestone"],.metrics button[data-metric="milestone"]{background:#ffd3e2;border-color:#dfa3bc}
.metrics button[data-category="anniversary"],.metrics button[data-metric="anniversary"]{background:#cfe5ff;border-color:#9fbedf}
.metrics button[data-category="happy_memory"],.metrics button[data-metric="happy_memory"]{background:#deedb9;border-color:#b3c887}
.metrics button[data-category="conflict"],.metrics button[data-metric="conflict"]{background:#ffe4a3;border-color:#d7ba71}
.metrics button[data-category="resolution"],.metrics button[data-metric="resolution"]{background:#bfeadd;border-color:#8cc5b4}
.metrics button[data-category="reflection"],.metrics button[data-metric="reflection"]{background:#e0cff6;border-color:#b7a0d4}
.metrics button[data-category="gratitude"],.metrics button[data-metric="gratitude"]{background:#ffd0b1;border-color:#dba781}
.metrics button[data-category="deep_talk"],.metrics button[data-metric="deep_talk"]{background:#bfeaf2;border-color:#8ebfc9}

/* Airy, staggered garden labels leave the illustrated vine visible. */
.timeline-panel .timeline-track{min-height:510px;padding:0}
.timeline-panel .day-column{width:292px;height:510px;min-height:510px}
.timeline-panel .tree-art.vine-art{width:292px;height:510px;top:0;left:0}
.timeline-panel .branch.top,.timeline-panel .branch.bottom{position:absolute;width:166px;height:auto;min-height:0;margin:0;padding:0;left:24px;top:32px;transform:rotate(-2deg)}
.timeline-panel .branch.bottom{left:102px;top:338px;transform:rotate(2deg)}
.timeline-panel .day-column:nth-child(3n+2) .branch.top{left:97px;top:18px;transform:rotate(2deg)}
.timeline-panel .day-column:nth-child(3n+2) .branch.bottom{left:22px;top:322px;transform:rotate(-2deg)}
.timeline-panel .day-column:nth-child(3n) .branch.top{left:42px;top:50px;transform:rotate(-1deg)}
.timeline-panel .day-column:nth-child(3n) .branch.bottom{left:90px;top:350px;transform:rotate(1deg)}
.timeline-panel .branch::before,.timeline-panel .branch::after{display:none}
.timeline-panel .memory-preview,.timeline-panel .branch.bottom .memory-preview{min-height:0;padding:10px 12px;gap:5px;border-radius:12px 16px 13px 15px;box-shadow:1px 3px 0 #d9ba7b25}
.timeline-panel .memory-preview strong{font-size:.83rem;line-height:1.5;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.timeline-panel .memory-preview .category{font-size:.65rem}.timeline-panel .memory-preview .category svg{width:13px;height:13px}
.timeline-panel .memory-preview .person{font-size:.65rem;gap:4px}.timeline-panel .memory-preview .avatar{width:20px;height:20px;font-size:.6rem}
.timeline-panel .memory-preview .people-line{gap:5px;flex-wrap:wrap;margin:0}.timeline-panel .memory-preview .privacy-badge{font-size:.6rem}
.timeline-panel .branch-tags{gap:4px;flex-wrap:nowrap;overflow:hidden}.timeline-panel .branch-tags>span{font-size:.6rem;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline-panel .axis{position:absolute;top:245px;width:100%;height:0;border:0}
.timeline-panel .axis time{left:100px;top:39px;font-size:.72rem;padding:3px 9px}
.timeline-panel .axis .gap{right:8px;top:60px;font-size:.62rem}
.timeline-panel .more{font-size:.7rem;min-height:32px;margin-top:4px;padding:3px 9px}
.timeline-panel .memory-preview:hover{box-shadow:0 4px 9px #b3926330}
.timeline-panel .memory-preview:focus-visible{outline:3px solid #668aaf;outline-offset:4px}

/* Storybook silhouettes, with the first memory alternating above/below the vine. */
.timeline-panel .timeline-track{min-height:650px}
.timeline-panel .day-column{height:650px;min-height:650px}
.timeline-panel .tree-art.vine-art{top:45px}
.timeline-panel .axis{top:290px}
.timeline-panel .day-column .branch.top{left:35px;top:25px;transform:none;width:210px}
.timeline-panel .day-column .branch.bottom{left:35px;top:420px;transform:none;width:210px}
.timeline-panel .day-column:nth-child(2n) .branch.top{top:382px}
.timeline-panel .day-column:nth-child(2n) .branch.bottom{top:62px}
.timeline-panel .day-column:nth-child(3n) .branch.top{top:96px}
.timeline-panel .day-column:nth-child(3n) .branch.bottom{top:429px}
.timeline-panel .day-column:nth-child(6n) .branch.top{top:418px}
.timeline-panel .day-column:nth-child(6n) .branch.bottom{top:21px}
.timeline-panel .day-column .branch .memory-preview{position:relative;isolation:isolate;box-sizing:border-box;min-height:188px;width:210px;padding:40px 30px 30px;gap:4px;border:0;border-radius:44%;background:transparent;box-shadow:none;align-items:stretch;justify-content:center}
.timeline-panel .day-column .branch .memory-preview::before{content:'';position:absolute;inset:0;width:100%;height:100%;left:0;top:0;border:0;border-radius:0;transform:none;background:var(--label-shape) center/100% 100% no-repeat;z-index:-1;filter:drop-shadow(1px 3px 1px #b3935e20);pointer-events:none}
.timeline-panel .day-column .branch .memory-preview:hover{background:transparent;box-shadow:none;transform:translateY(-3px)}
.timeline-panel .day-column .branch .memory-preview:hover::before{filter:drop-shadow(1px 5px 2px #b3935e40)}
.timeline-panel .day-column .branch .memory-preview:focus-visible{outline:3px solid #6587a3;outline-offset:3px}
.timeline-panel .day-column .branch .memory-preview strong{font-size:.8rem;line-height:1.5}
.timeline-panel .day-column .branch .memory-preview .branch-tags{max-height:20px}
.timeline-panel .day-column .branch .memory-preview .privacy-badge{font-size:.6rem}
.timeline-panel .branch .more{display:block;margin:0 auto;max-width:180px}

/* Four soft frames with a shared, safely inset text area. */
.timeline-panel .day-column .branch .memory-preview{height:204px;min-height:204px;padding:48px 38px 42px;gap:3px;justify-content:center;overflow:visible}
.timeline-panel .day-column .branch .memory-preview>*{min-width:0;max-width:100%;flex-shrink:0;box-sizing:border-box}
.timeline-panel .day-column .branch .memory-preview strong{font-size:12px;line-height:17px;max-height:34px;overflow:hidden;overflow-wrap:anywhere}
.timeline-panel .day-column .branch .memory-preview .category{font-size:10px;line-height:14px;height:14px;white-space:nowrap;overflow:hidden}
.timeline-panel .day-column .branch .memory-preview .branch-tags{height:16px;max-height:16px;margin:0;overflow:hidden;line-height:14px}
.timeline-panel .day-column .branch .memory-preview .branch-tags>span{font-size:9px;line-height:12px;padding:0 4px;min-width:0}
.timeline-panel .day-column .branch .memory-preview .people-line{height:18px;max-height:18px;flex-wrap:nowrap;gap:4px;overflow:hidden;margin:0}
.timeline-panel .day-column .branch .memory-preview .person{min-width:0;max-width:100%;flex-shrink:1;font-size:10px;line-height:16px;overflow:hidden}
.timeline-panel .day-column .branch .memory-preview .person>span:not(.avatar){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.timeline-panel .day-column .branch .memory-preview .avatar{width:17px;height:17px;flex-shrink:0}
.timeline-panel .day-column .branch .memory-preview .privacy-badge{margin:0;line-height:12px;height:12px;font-size:9px;white-space:nowrap;overflow:hidden}
.timeline-panel .day-column:nth-child(4n+1) .branch.top{--label-shape:url('./label-cloud.svg')}
.timeline-panel .day-column:nth-child(4n+1) .branch.bottom{--label-shape:url('./label-square.svg')}
.timeline-panel .day-column:nth-child(4n+2) .branch.top{--label-shape:url('./label-oval.svg')}
.timeline-panel .day-column:nth-child(4n+2) .branch.bottom{--label-shape:url('./label-bubble.svg')}
.timeline-panel .day-column:nth-child(4n+3) .branch.top{--label-shape:url('./label-square.svg')}
.timeline-panel .day-column:nth-child(4n+3) .branch.bottom{--label-shape:url('./label-cloud.svg')}
.timeline-panel .day-column:nth-child(4n+4) .branch.top{--label-shape:url('./label-bubble.svg')}
.timeline-panel .day-column:nth-child(4n+4) .branch.bottom{--label-shape:url('./label-oval.svg')}

/* All memory labels sit above the vine; busy dates get a wider lane. */
.timeline-panel .timeline-track{min-height:480px}
.timeline-panel .timeline-track .day-column{height:480px;min-height:480px;overflow:clip}
.timeline-panel .timeline-track .day-column:has(.branch.bottom .memory-preview){width:484px}
.timeline-panel .timeline-track .day-column .tree-art.vine-art{top:105px;width:100%;height:510px}
.timeline-panel .timeline-track .day-column .axis{top:350px}
.timeline-panel .timeline-track .day-column:nth-child(n) .branch.top{top:24px;left:24px;transform:none}
.timeline-panel .timeline-track .day-column:nth-child(2n) .branch.top{top:65px}
.timeline-panel .timeline-track .day-column:nth-child(n) .branch.bottom{top:100px;left:250px;transform:none}
.timeline-panel .timeline-track .day-column .axis time{left:95px;top:39px}