/* Exact layout corrections: a calm, flat window-side desk. */

/* Four equal window panes.  The cross is geometrically centered. */
.window{left:8%;width:84%;height:300px;border:11px solid #faf7f1;border-radius:7px;background:#dce8ea;box-shadow:0 8px 22px #bba99318}
.window-cross:before{left:50%;right:auto;top:0;bottom:0;width:10px;transform:translateX(-50%)}
.window-cross:after{left:0;right:0;top:50%;bottom:auto;height:10px;transform:translateY(-50%)}

/* A single horizontal desk plane, with only a restrained illustrated grain. */
.desk{top:550px;left:0;width:100%;height:220px;transform:none;border-radius:0;background:repeating-linear-gradient(0deg,transparent 0 27px,#b78a6920 28px 29px),linear-gradient(90deg,#dcb088 0%,#e8c39e 50%,#dcae85 100%);box-shadow:inset 0 2px 0 #efd0ae}
.floor,.desk-edge{display:none}

/* Jar: left, beneath the copy; paper: separate on the right. */
.jar-zone{left:4%;right:auto;top:452px;width:200px;height:260px}
.jar{width:148px;height:198px}
.jar-neck{top:16px;left:35px;width:78px;height:27px;border:0;border-radius:13px 13px 5px 5px;background:#ffffff5c}
.jar-body{top:34px;left:5px;width:138px;height:164px;border:0;border-radius:27px 27px 40px 40px;background:#e6f0eb78;box-shadow:inset 10px 7px 10px #ffffff62,0 7px 13px #69726724}
.jar-body:before{height:15px;background:#fff8}.jar-body:after{top:20px;bottom:22px;left:15px;width:8px;background:#fff7}
.jar-label,.jar-hint,.jar-lid{display:none!important}
.orb{background:var(--orb);opacity:.66;box-shadow:none}

.paper-note{top:510px;left:auto;right:6%;width:146px;height:116px;padding:20px;background:#fffdf8;border-radius:2px;transform:rotate(5deg) skewY(-1deg);box-shadow:2px 7px 13px #76584422}
.paper-note:hover{transform:rotate(4deg) skewY(-1deg) translateY(-4px)}
.pencil{top:643px;left:auto;right:23%;height:86px;width:7px;background:#d9b36f;box-shadow:none;transform:rotate(64deg)}

/* One even row of emotion choices. */
.emotion-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:23px 0 47px}
.emotion{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;line-height:1.3}
.emotion i{flex:0 0 38px;width:38px;height:38px;margin:0 0 10px}.emotion span{display:block;width:100%;text-align:center}

/* The writing area uses identical horizontal rules and a clear placeholder zone. */
.record-paper{margin:12px 17px 22px;min-height:calc(100vh - 112px);border-radius:6px;box-shadow:0 9px 22px #6c584518}
.record-paper:after{height:5px;opacity:.3;background:linear-gradient(90deg,transparent,#e8ded1,transparent)}
.text-label{margin:0 0 20px}
textarea{height:150px;margin:0;padding:0;border:0;line-height:32px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,#e7ddd0 39px,#e7ddd0 40px);background-position:0 10px;background-size:100% 40px}
textarea::placeholder{color:#aaa59b;opacity:1}

/* Low-saturation memory wash and a light card; color is set per record in refined-ui.js. */
.modal-view{background:var(--memory-bg,#e5ece5)}
.modal-backdrop{background:#fff3}.memory-card{box-shadow:0 16px 36px #5e58411c;border-radius:5px}.memory-orb{box-shadow:none}

@media(max-width:380px){.window{left:5%;width:90%}.jar-zone{left:1%;transform:scale(.9);transform-origin:left bottom}.paper-note{right:3%;transform:rotate(5deg) scale(.9);transform-origin:right bottom}.pencil{right:17%}.emotion-grid{gap:4px}.emotion i{width:33px;height:33px;flex-basis:33px}.emotion{font-size:11px}}

/* Long memories stay inside the card and can be read by scrolling there. */
.memory-card{max-height:calc(100% - 42px);display:flex;flex-direction:column;overflow:hidden}
.memory-text{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-wrap:anywhere;word-break:break-word}
.memory-orb{flex:0 0 68px;aspect-ratio:1}