/* Yell-o Wall — public site (SPEC v1.7). Plain CSS, values from the UI mockups. */

/* --- Fonts (self-hosted, SIL OFL / Apache 2.0; licences beside the files) ---------- */
@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/nunito-latin-600-normal.b770df7528a1.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/nunito-latin-700-normal.28a2cf182b19.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/nunito-latin-800-normal.a28521c77f4a.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/nunito-latin-ext-600-normal.b8128051a312.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/nunito-latin-ext-700-normal.762995b2bad6.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/nunito-latin-ext-800-normal.211c43d44d95.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/nunito-vietnamese-600-normal.94f233f0fa85.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/nunito-vietnamese-700-normal.175dddbfbf03.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/nunito-vietnamese-800-normal.feb15af6203d.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/fredoka-latin-600-normal.f56ba4069e24.woff2") format("woff2")}
@font-face{font-family:Chewy;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/chewy-latin-400-normal.754c4def845e.woff2") format("woff2")}
/* Coiny has a 600-unit line gap that Windows and Linux/macOS place differently, so the title sat
   at different heights per system; fixed metrics make it the same everywhere. */
@font-face{font-family:Coiny;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/coiny-latin-400-normal.67fd78da0a10.woff2") format("woff2");ascent-override:75%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:Mali;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/mali-thai-500-normal.0c724327efd5.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Mali;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/mali-vietnamese-500-normal.752ac91531e0.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Mali;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/mali-latin-ext-500-normal.d0d62f58427e.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Mali;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/mali-latin-500-normal.3a66c9c195bb.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Mali;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/mali-thai-600-normal.158b356c57f1.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Mali;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/mali-vietnamese-600-normal.3ed7c96aecff.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Mali;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/mali-latin-ext-600-normal.21b0821254a2.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Mali;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/mali-latin-600-normal.de79e72d6194.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Mali;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/mali-thai-700-normal.18e1be7d974c.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Mali;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/mali-vietnamese-700-normal.8dfcd7989319.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Mali;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/mali-latin-ext-700-normal.bb8cd5f53413.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Mali;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/mali-latin-700-normal.ba2e7fc7e847.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Tokens -------------------------------------------------------------------------- */
:root{
  --ink:#231F3D; --ink-soft:#5A5870; --muted:#6E675F;
  --paper:#FFFEF7; --paper-info:#F8F6F1; --scrim:rgba(109,106,134,.92);
  --field:#EDE8E4; --field-line:#C9BFB4; --pill:#F8F7F5; --pill-ink:#3A322B; --rule:#E2E0DC;
  --error:#B3261E; --disabled:#80848F;
  --banner-warn-bg:#FFF1BF; --banner-warn-line:#F1D78F; --banner-warn-ink:#5A4A10;
  --banner-err-bg:#FDECEA; --banner-err-line:#F2B8B5; --banner-err-ink:#8C1D18;
  --filter-bg:#E8F1F8; --page-current:#5B9BFF; --fab-new:#E3ECFB; --fab-new-ink:#1B3A7A;
  --sans:Nunito,system-ui,"Noto Sans Thai","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --display:Fredoka,var(--sans); --hand:Chewy,var(--sans); --cute:Mali,var(--sans);
  --gutter:48px; --gap:20px; --card-h:207px; --card-text:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:600 16px/1.4 var(--sans)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
[hidden]{display:none !important}
:focus-visible{outline:3px solid #5B9BFF;outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Page frame ------------------------------------------------------------------------ */
.page{padding:24px var(--gutter) 140px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{margin:0;font:400 44px/1.2 Coiny,var(--display);color:var(--ink);white-space:nowrap}
.logo{display:flex;align-items:center;gap:14px}
.logo-img{flex:none;width:64px;height:64px;border-radius:22%}
/* Coiny sits low in its line box; lift the words so they are centred on the logo image */
.logo-link{display:flex;align-items:center;gap:inherit;color:inherit;text-decoration:none;border-radius:16px}  /* the logo goes back to the wall */
.logo-link:focus-visible{outline:3px solid #8CCBF3;outline-offset:4px}
.logo-link>span{transform:translateY(.09em)}  /* centre the capitals (0–0.685em) in the line box */
.logo-img{transform:translateY(-.09em)}  /* words level with the List/Wall button; the logo sits slightly higher (site owner) */
.logo-heart{width:.78em;height:.78em;vertical-align:-.04em;fill:#E5372F}
/* heart→"Wall" gap equals "-"→heart gap (Coiny metrics: the space is .27em, the heart path
   leaves .13em each side, "-" right bearing .035em, "W" left bearing .052em) */
.logo-heart{margin-right:-.287em}
.switch{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:6px 24px 6px 8px;border-radius:999px;background:#fff;border:3px solid #D3E9F9;box-shadow:0 4px 0 #CFE3F5;color:#2E5D8A;font:700 18px var(--cute);text-decoration:none;transition:transform .18s,box-shadow .18s}
.switch:hover{transform:translateY(-2px);box-shadow:0 6px 0 #CFE3F5}
.switch-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#E1F0FC}
.switch svg{width:20px;height:20px}

/* Banners: one at a time. Yellow = maintenance; red = posting paused / send failed. */
.banner-slot{margin-top:17px}
.banner-slot:empty{margin-top:0}
.banner{border:2px solid;border-radius:14px;padding:14px 20px;font:700 16px/1.4 var(--sans);white-space:pre-line;overflow-wrap:anywhere}
.banner-maintenance{background:var(--banner-warn-bg);border-color:var(--banner-warn-line);color:var(--banner-warn-ink)}
.banner-error{background:var(--banner-err-bg);border-color:var(--banner-err-line);color:var(--banner-err-ink);transition:opacity .3s}
.banner-out{opacity:0}

/* --- Wall ------------------------------------------------------------------------------ */
.wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);margin-top:40px}
.banner-slot:not(:empty)+.wall{margin-top:32px}
.card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:6px;height:var(--card-h);padding:18px 18px 14px;text-align:left;
  background:var(--bg);border:3px solid var(--bd);border-radius:28px;color:var(--fg);
  transform:rotate(var(--tilt)) translateY(var(--shift));
  box-shadow:0 10px 22px -16px var(--bd),0 4px 0 color-mix(in srgb,var(--bd) 55%,transparent);
  transition:transform .2s,box-shadow .2s}
.card:hover{transform:rotate(0deg) translateY(calc(var(--shift) - 3px)) scale(1.03);box-shadow:0 18px 30px -16px var(--bd),0 6px 0 var(--bd);z-index:2}
.card-spark{position:absolute;top:12px;right:14px;width:20px;height:27px;color:#F6D46A;overflow:visible}
.card-to{position:relative;isolation:isolate;align-self:flex-start;display:flex;align-items:center;gap:6px;min-height:28px;max-width:calc(100% - 26px);font:700 19px/1.25 var(--cute)}
.card-to:not(:empty)::before{content:"";position:absolute;inset:22% -9px 0 -7px;z-index:-1;background:var(--hl);border-radius:14px 18px 12px 20px;transform:rotate(-2deg)}
.card-to-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heart{flex:none;width:20px;height:20px}
/* recipient hearts get a soft outline so a very pale colour (Any #FEFED2) stays visible on light cards */
.heart{stroke:rgba(150,120,30,.45);stroke-width:1.4px;paint-order:stroke}
.card-to .heart{width:16px;height:16px}
.card-body{font:600 var(--card-text)/1.35 var(--cute);white-space:pre-line;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card-blob{position:absolute;right:-14px;bottom:-18px;width:90px;height:60px;border-radius:50%;background:var(--hl);opacity:.8;z-index:-1}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;font:800 13.5px var(--sans)}
.card-date{flex:none;white-space:nowrap;background:rgba(255,255,255,.75);border-radius:999px;padding:3px 10px;opacity:.85}
.card-from{display:flex;align-items:center;gap:4px;min-width:0;font:700 15px var(--cute)}
.card-from-heart{flex:none;width:12px;height:12px;fill:var(--bd)}
.card-name{min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.is-new{animation:pop .9s ease-out}
@keyframes pop{0%{transform:rotate(var(--tilt)) scale(.6);opacity:0}45%{transform:rotate(var(--tilt)) scale(1.08);opacity:1;box-shadow:0 0 0 8px rgba(247,201,72,.45),0 4px 0 var(--bd)}100%{transform:rotate(var(--tilt)) translateY(var(--shift)) scale(1)}}
@media (prefers-reduced-motion:reduce){.card,.card.is-new{transition:none;animation:none}}

.empty{margin:80px 0;text-align:center;font:800 20px var(--sans);color:var(--ink-soft)}

/* Floating buttons */
/* Floating buttons — sizes and places from the reference HTML */
.fab{position:fixed;z-index:40;display:grid;place-items:center;border:0;border-radius:999px;transition:transform .18s,box-shadow .18s,opacity .25s,visibility .25s}
.fab-info{left:22px;bottom:22px;width:60px;height:60px;background:#fff;border:3px solid #A9D5F5;color:#2E5D8A;box-shadow:0 4px 0 #A9D5F5;font:700 1.6rem/1 var(--cute)}
.fab-info:hover{transform:translateY(-3px) rotate(-8deg);box-shadow:0 7px 0 #A9D5F5}
.fab-info .fab-spark{position:absolute;top:-12px;left:-14px;width:22px;height:24px;color:#F7C948}
.fab-new{right:22px;bottom:22px;width:72px;height:72px;color:#2E5D8A;background:rgba(140,203,243,.28);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  border:2px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px -12px rgba(94,168,220,.55)}
.fab-new .plus{width:28px;height:28px;transition:transform .25s}
.fab-new:not(:disabled):hover{transform:translateY(-3px);background:rgba(140,203,243,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 28px -12px rgba(94,168,220,.6)}
.fab-new:not(:disabled):hover .plus{transform:rotate(90deg)}
.fab-new:not(:disabled):active{transform:translateY(2px);background:rgba(140,203,243,.5)}
.fab-new .fab-heart{position:absolute;top:-6px;left:-4px;width:20px;height:20px;fill:#F59BB0;animation:yoFloat 2.6s ease-in-out infinite}
.fab-tip{position:absolute;right:84px;white-space:nowrap;background:#fff;border:2.5px solid #A9D5F5;color:#2E5D8A;border-radius:999px;padding:6px 14px;
  font:700 .95rem var(--cute);opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.fab-new:not(:disabled):hover .fab-tip{opacity:1;transform:none}
.fab-new:disabled{background:#D9D9D9;color:#8A8A8A;border-color:#D9D9D9;box-shadow:none}
.fab-new:disabled .fab-heart{display:none}
/* Back to top: above ＋ on the wall, bottom-right on the list; shown once the page is scrolled. */
.fab-top{right:32px;bottom:110px;width:52px;height:56px;align-content:center;gap:0;background:#fff;border:3px solid #A9D5F5;color:#2E5D8A;box-shadow:0 4px 0 #A9D5F5;text-decoration:none;font:700 .68rem/1 var(--cute)}
.fab-top svg{width:18px;height:14px}
.fab-top:hover{transform:translateY(-4px)}
.fab-top:hover svg{animation:yoUp .6s ease infinite}
.list-page .fab-top{right:22px;bottom:22px}
.js-top .fab-top:not(.show){opacity:0;visibility:hidden;transform:translateY(12px)}
@keyframes yoFloat{50%{transform:translateY(-6px) rotate(6deg)}}
@keyframes yoUp{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.fab,.fab-new .plus,.fab-tip{transition:none}.fab-new .fab-heart,.fab-top:hover svg{animation:none}}

/* --- Breakpoints (OQ-17): ≥1024 six columns, 600–1023 three, <600 two ------------------ */
@media (max-width:1023px){
  :root{--gutter:32px;--gap:18px;--card-h:184px;--card-text:17px}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logo{font-size:38px}.logo-img{width:54px;height:54px}
}
@media (max-width:599px){
  :root{--gutter:20px;--gap:14px;--card-h:160px;--card-text:16px}
  .page{padding-top:16px;padding-bottom:110px}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}
  .logo{font-size:28px;gap:10px}.logo-img{width:42px;height:42px}
  .top{flex-wrap:wrap;row-gap:12px}.logo{flex-basis:100%}.switch{margin-left:auto}  /* phone: Wall/List button on its own line */
  .switch{min-height:46px;padding:4px 18px 4px 6px;gap:8px;font-size:16px}.switch-ico{width:32px;height:32px}
  .banner-slot{margin-top:20px}
  .banner{padding:12px 16px;font-size:14px}
  .banner-slot:not(:empty)+.wall{margin-top:20px}
  .fab-info{width:52px;height:52px;left:14px;bottom:14px}
  .fab-new{width:62px;height:62px;right:14px;bottom:14px}
  .fab-top{right:20px;bottom:92px}
  .list-page .fab-top{right:14px;bottom:14px}
  .fab-tip{display:none}
}

/* --- List ------------------------------------------------------------------------------ */
/* List background (Karis 2026-10-25): the left and right strips of her reference image, fixed
   behind the content and starting under the header so nothing sits behind the logo or the
   Wall button. The right strip has extra cloud at the bottom so the mascot sits above
   the TOP button. Cards, filter and pager are unchanged. */
body.list-page{background:#FEFDF7}
.list-deco{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.list-deco .deco{position:absolute;bottom:0;width:auto;height:calc(100% - 108px);max-width:none;user-select:none}
.deco-l{left:0}
.deco-r{right:0}
@media (max-width:1023px){.list-deco{opacity:.7}}
@media (max-width:599px){.list-deco .deco{height:calc(100% - 140px)}.list-deco{opacity:.5}}
.top-deco{display:none}  /* phone only: small pictures beside the Wall button (Karis 2026-10-25) */
@media (max-width:599px){.top-deco{display:block;flex:1;min-width:0}.top-deco img{display:block;width:auto;height:46px;max-width:100%;object-fit:contain;object-position:left center}}
/* Header hearts from the site name to the Wall/List button, wall and list (Karis 2026-10-25):
   same height as the logo. ::before = start piece by the name + as many whole heart groups as
   fit (background-repeat: round), stopping short of the words and fading out; ::after = "Let your
   words become sunshine" by the button, so nothing is ever drawn beside the words. */
.wall-page .top,.list-page .top{position:relative;isolation:isolate}
.wall-page .top::before,.list-page .top::before,.wall-page .top::after,.list-page .top::after{content:"";position:absolute;top:50%;height:64px;margin-top:-35px;z-index:-1;pointer-events:none}
.wall-page .top::before,.list-page .top::before{left:378px;right:348px;padding-left:260px;
  background:url("img/top-hearts.72fd3c6bc159.webp?v=8") left center/auto 100% no-repeat,url("img/top-hearts-fill.8871daae0642.webp?v=8") center/auto 100% round;
  background-origin:border-box,content-box;background-clip:border-box,content-box;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.wall-page .top::after,.list-page .top::after{right:184px;width:158px;background:url("img/top-hearts-end.32df68fb4e29.webp?v=8") right center/auto 100% no-repeat}
/* Wall and list (Karis 2026-10-25): the words were taken out of the header (on the list they moved into the left background), so the hearts run up to the Wall/List button */
.wall-page .top::after,.list-page .top::after{display:none}
.wall-page .top::before,.list-page .top::before{right:184px}
@media (max-width:1199px){.wall-page .top::before,.list-page .top::before{padding-left:0;background-size:auto 100%,0 0}}  /* too narrow for a whole heart group */
@media (max-width:1023px){
  .wall-page .top::before,.list-page .top::before,.wall-page .top::after,.list-page .top::after{height:54px;margin-top:-30px}
  .wall-page .top::before,.list-page .top::before{left:316px;right:307px}
  .wall-page .top::before,.list-page .top::before{right:168px}
  .wall-page .top::after,.list-page .top::after{right:168px;width:133px}
}
@media (max-width:699px){.wall-page .top::before,.list-page .top::before,.wall-page .top::after,.list-page .top::after{display:none}}
.list{max-width:904px;margin:24px auto 0}
.filter{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;background:#F1F8FE;border:3px solid #A9D5F5;border-radius:999px;padding:10px 14px 10px 26px;box-shadow:0 12px 30px -18px rgba(70,130,190,.4)}
.filter-cloud{position:absolute;right:-6px;top:-4px;width:110px;height:65px;z-index:-1;fill:#DCEDFA;pointer-events:none}
.filter-cloud .deep{fill:#CFE5F8}
.filter-label{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;margin-right:10px;font:700 18px var(--cute);color:#4A332D}
.filter-label::before{content:"";position:absolute;inset:18% -10px 2% -8px;z-index:-1;background:#FCE9B0;border-radius:16px 22px 18px 24px;transform:rotate(-2deg)}
.filter-label svg{width:18px;height:18px;flex:none}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 22px;border-radius:999px;background:#fff;border:2.5px solid #D3E9F9;color:#2E5D8A;font:700 17px var(--cute);text-decoration:none;transition:transform .18s,border-color .18s}
.chip:hover{transform:translateY(-2px);border-color:#A9D5F5}
/* selected chip: same colours as the recipient pills in the compose dialog; All is blue */
.chip[aria-current]{background:var(--pill-on,#FFF6D8);border-color:var(--pill-on-line,#F7C948);color:#4A332D;box-shadow:0 4px 0 var(--pill-on-line,#F7C948)}
.chip-spark{width:16px;height:18px;color:#F7C948;flex:none}
.total{margin:12px 4px;text-align:right;font:600 15px var(--sans);color:var(--ink-soft)}
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
/* List rows take the colours of the same note's wall card (SPEC v1.11 §9; set per row by list.html) */
.row{--r-ink:var(--fg,#2C5B8C);--r-soft:var(--fg,#8A9BB0);--r-line:var(--bd,#B5DAF5);--r-cloud:var(--hl,#D7E9F9);--r-yellow:#F6D46A;--r-wash:#FBEBB5;
  position:relative;overflow:hidden;isolation:isolate;display:flex;justify-content:space-between;align-items:stretch;gap:24px;min-height:150px;
  padding:22px 34px 22px 48px;background:var(--bg,#F0F7FE);border:3px solid var(--r-line);border-radius:32px;color:var(--r-ink)}
.row-cloud{position:absolute;z-index:-1;fill:var(--r-cloud);opacity:.75;pointer-events:none}
.row-cloud-tr{top:0;right:0;width:150px;height:110px}
.row-cloud-bl{bottom:0;left:0;width:170px;height:76px}
.spark{color:var(--r-yellow,#F6D46A);overflow:visible}
.row-main{min-width:0;flex:1}
.row-to-wrap{position:relative;width:fit-content;max-width:100%;margin-left:28px}
.row-to-none{height:48px}
.row-spark-to{position:absolute;left:-44px;top:-12px;width:30px;height:52px}
.row-to{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;padding:6px 0 8px;color:#3B2A24;font:600 26px/1.2 var(--display)}
.row-to .heart{width:26px;height:26px;flex:none}
.row-text{padding-left:28px;max-width:100%}
.row-body{position:relative;width:fit-content;max-width:100%;margin:12px 0 0;font:800 22px/1.35 var(--sans);white-space:pre-line;overflow-wrap:anywhere}
.row-body-text{display:block;padding-bottom:8px}
.row-body-text::after{content:"";display:block;height:5px;margin:6px -2px 0;border-radius:4px;background:var(--r-line);opacity:.85}
.row-thai{margin:10px 0 0;min-height:28px;font:700 19px/1.35 var(--sans);white-space:pre-line;overflow-wrap:anywhere}
.row-side{flex:none;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:12px}
.row-star{position:relative;width:76px;height:64px;margin-right:-6px}
.row-star-icon{position:absolute;right:8px;top:0;width:52px;height:52px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}
.row-star-heart{position:absolute;right:-6px;top:40px;width:20px;height:20px;fill:var(--r-line)}
.row-spark-star{position:absolute;left:-18px;top:14px;width:18px;height:30px}
.row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.row-from{position:relative;display:inline-flex;align-items:center;gap:8px;margin-right:22px;min-width:0;font:400 22px/1.2 var(--hand);color:#3B2A24}
.row-from-heart{width:20px;height:20px;flex:none;fill:var(--r-line);transform:rotate(-12deg)}
.row-from-spark{position:absolute;right:-26px;top:-18px;width:22px;height:30px;fill:none;stroke:var(--r-yellow);stroke-width:5;stroke-linecap:round;overflow:visible}
.row-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:2px}
.row-date-pill{display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 12px;border-radius:999px;background:var(--r-cloud);color:var(--r-ink);font:800 14px var(--sans);white-space:nowrap}
.row-date-pill svg{width:22px;height:22px;flex:none;color:var(--r-line)}
.pager{display:flex;justify-content:center;align-items:center;gap:8px;width:max-content;max-width:100%;margin:32px auto 0;background:#fff;border:3px solid #D3E9F9;border-radius:999px;padding:8px 10px;box-shadow:0 4px 0 #E1EEF9}
.pg,.pg-arrow,.pg-gap{position:relative;display:grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:999px;font:700 18px var(--cute);color:#8EA7C2;text-decoration:none}
.pg:hover{color:#2E5D8A}
.pg[aria-current]{background:#8CCBF3;color:#fff;box-shadow:0 4px 0 #5EA8DC}
.pg-heart{position:absolute;top:-6px;right:-4px;width:16px;height:16px;fill:#F59BB0}
.pg-arrow{width:42px;padding:0;border:2.5px solid #D3E9F9;color:#2E5D8A;background:#fff}
.pg-arrow svg{width:18px;height:18px}
a.pg-arrow:hover{border-color:#A9D5F5}
span.pg-arrow{opacity:.4}

@media (max-width:599px){
  .list{margin-top:20px}
  .filter{border-radius:28px;padding:14px;gap:10px 8px}
  .filter-label{width:100%;margin:0 0 2px 8px}
  .filter-label::before{right:auto;width:84px}
  .chip{min-height:44px;padding:0 16px;font-size:15px}
  .row{flex-direction:column;align-items:stretch;gap:6px;padding:18px 18px 14px 40px;min-height:0;border-radius:26px}
  .row-to-wrap{margin-left:18px}
  .row-to{font-size:20px;padding:4px 0 6px}.row-to .heart{width:20px;height:20px}
  .row-spark-to{left:-28px;top:-10px;width:22px;height:40px}
  .row-text{padding-left:18px}
  .row-body{font-size:18px}
  .row-thai{font-size:16px}
  .row-side{position:static;flex-direction:row;align-items:flex-end;justify-content:flex-end}
  .row-star{position:absolute;top:8px;right:10px;transform:scale(.75);transform-origin:right top}
  .row-meta{flex-direction:row-reverse;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;width:100%}
  .row-from{font-size:19px;margin-right:20px}.row-from-heart{width:16px;height:16px}
  .row-from-spark{right:-22px;top:-14px;width:18px;height:24px}
  .row-date-pill{font-size:13px;padding:5px 12px 5px 9px;gap:6px}.row-date-pill svg{width:18px;height:18px}
  .row-name{max-width:180px}
  .pager{gap:2px;padding:6px 8px}
  .pg,.pg-arrow,.pg-gap{min-width:36px;height:36px;font-size:16px}.pg-arrow{width:36px}
}

/* --- Note page /n/<code> (SPEC v1.11 §17.1, canvas ⑨ ⑩) ------------------------------- */
.note-page{background-image:radial-gradient(#EFE9D8 1.6px,transparent 1.6px);background-size:18px 18px}
.note-page .page{padding-top:48px}
.note-page .top{justify-content:center}
.note-page .logo{justify-content:center}  /* phones give the logo its own full-width line */
.note{max-width:560px;margin:28px auto 0;display:flex;flex-direction:column;align-items:center;gap:22px}
.note-lead{margin:0;font:800 16px var(--sans);color:var(--ink-soft);text-align:center}
.note-card{position:relative;align-self:stretch;padding:28px 28px 22px;display:flex;flex-direction:column;gap:22px;background:var(--bg);border:4px solid var(--bd);border-radius:30px;color:var(--fg);transform:rotate(-1.5deg);box-shadow:0 8px 0 var(--bd)}
.note-to{align-self:flex-start;display:flex;align-items:center;gap:8px;margin:0;padding:0 14px 4px 10px;background:var(--hl);border-radius:14px 20px 12px 22px;font:400 36px/1.15 var(--hand);color:#3B2A24}
.note-to .heart{width:30px;height:30px}
.note-body{margin:0;font:800 23px/1.35 var(--sans);white-space:pre-line;overflow-wrap:anywhere}
.note-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.note-date{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 8px;border-radius:999px;background:var(--hl);font:800 14px var(--sans);white-space:nowrap}
.note-date svg{width:20px;height:20px;flex:none;color:var(--bd)}
.note-from{display:inline-flex;align-items:center;gap:8px;min-width:0;margin-left:auto;font:400 26px/1.2 var(--hand);color:#3B2A24;overflow-wrap:anywhere}
.note-from-heart{flex:none;width:18px;height:18px;fill:var(--bd)}
.note-actions{align-self:stretch;display:flex;flex-direction:column;gap:14px;margin-top:8px}
.note-btn{display:flex;justify-content:center;align-items:center;gap:10px;min-height:56px;border-radius:999px;font:800 18px var(--sans);text-decoration:none;transition:transform .15s,box-shadow .15s}
.note-btn svg{width:20px;height:20px}
.note-btn:hover{transform:translateY(-2px)}
.note-btn-write{background:#F7C948;border:3px solid #F7C948;box-shadow:0 5px 0 #D9A425;color:#4A332D}
.note-btn-wall{background:#fff;border:3px solid #A9D5F5;box-shadow:0 5px 0 #A9D5F5;color:#2E5D8A}
.note-gone{align-self:stretch;margin-top:72px;min-height:240px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:#F7F4EC;border:4px dashed #D6D1C4;border-radius:30px}
.note-gone svg{width:56px;height:56px;fill:none;stroke:#B9B3A3;stroke-width:1.8}
.note-gone p{margin:0;font:800 22px/1.3 var(--sans);color:#3D3955}
@media (max-width:599px){
  .note-page .page{padding-top:32px}
  .note-card{padding:22px 20px 18px;gap:18px}
  .note-to{font-size:30px}.note-to .heart{width:26px;height:26px}
  .note-body{font-size:20px}
  .note-from{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.note-btn{transition:none}}

/* --- Dialogs --------------------------------------------------------------------------- */
html.dialog-open{overflow:hidden}
.dlg{border:0;padding:0;color:var(--ink);background:var(--paper);border-radius:36px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.dlg:modal{position:fixed;inset:0;margin:auto}
.dlg::backdrop{background:rgba(255,254,247,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dlg{box-shadow:0 24px 60px rgba(35,31,61,.18),0 2px 8px rgba(35,31,61,.08)}
.icon-btn,.dlg-close{display:grid;place-items:center;min-width:44px;min-height:44px;border:0;background:none;color:var(--ink);border-radius:50%}
.icon-btn svg,.dlg-close svg{width:20px;height:20px}
.dlg-close{position:absolute;top:14px;right:18px}
.heart{fill:currentColor}

/* Detail */
/* Detail: cream note with yellow accents (fixed palette, not the card colour) */
/* Detail takes the colours of the card that was opened (--c-bg/--c-bd/--c-fg/--c-hl set by app.js) */
.dlg-detail{--d-ink:#3B2A24;--d-soft:var(--c-fg,#9A887C);--d-yellow:#F6D46A;--d-wash:var(--c-hl,#FBEBB5);--d-line:var(--c-bd,#F6D46A);
  width:780px;padding:64px 64px 40px 72px;background:var(--c-bg,#FCF8EF);color:var(--d-ink);border-radius:44px;overflow:hidden auto}
.dlg-detail .dlg-close{top:22px;right:24px;z-index:2}
.detail-blob{position:absolute;bottom:0;fill:var(--d-wash);pointer-events:none}
.detail-blob-l{left:0;width:180px;height:70px}
.detail-blob-r{right:0;width:250px;height:120px;opacity:.85}
.detail-to-wrap{position:relative;width:fit-content;max-width:calc(100% - 60px)}
.detail-spark{position:absolute;fill:none;stroke:var(--d-yellow);stroke-width:8;stroke-linecap:round;overflow:visible}
.detail-spark-to{left:-50px;top:-14px;width:40px;height:70px}
.detail-to{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;padding:10px 28px 12px 16px;font:400 36px/1.15 var(--hand)}
.detail-to .heart{width:30px;height:30px;flex:none}
.dlg-detail.no-to .detail-to-wrap{display:none}
.detail-body{position:relative;width:fit-content;max-width:100%;margin:30px 0 40px 22px;padding-bottom:14px;font:800 24px/1.35 var(--sans);color:var(--c-fg,var(--d-ink));white-space:pre-line;overflow-wrap:anywhere}
.dlg-detail.no-to .detail-body{margin-top:40px}  /* clear of the share / close buttons */
.detail-swoosh{position:absolute;left:4%;bottom:-6px;width:88%;height:14px;fill:none;stroke:var(--d-line);stroke-width:4;stroke-linecap:round;opacity:.9}
.detail-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px}
.detail-date-pill{display:inline-flex;align-items:center;gap:12px;padding:8px 22px 8px 14px;border-radius:999px;background:color-mix(in srgb,var(--d-wash) 70%,transparent);color:var(--d-soft);font:800 17px var(--sans);white-space:nowrap}
.detail-date-pill svg{width:28px;height:28px;color:var(--d-line);flex:none}
.detail-from{position:relative;display:inline-flex;align-items:center;gap:10px;margin-right:26px;font:400 26px/1.2 var(--hand);min-width:0}
.detail-from-heart{width:30px;height:30px;fill:var(--d-line);flex:none;transform:rotate(-12deg)}
.detail-name{overflow-wrap:anywhere}
.detail-spark-name{right:-34px;top:-26px;width:30px;height:40px;stroke-width:6}

/* Compose — fixed layout: the "To" row and the status row keep their height, so the
   message box, name field and Post never move (SPEC v1.7 §3.5). */
.dlg-compose{width:880px}
.dlg-compose form{padding:36px 50px 40px}
.compose-close{position:absolute;top:22px;right:24px}
.pills{display:grid;grid-template-columns:repeat(4,minmax(0,140px));justify-content:start;gap:12px}
.pill{min-height:44px;padding:0 10px;border-radius:999px;border:3px solid var(--field-line);background:var(--pill);font:800 17px var(--sans);color:var(--pill-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill[aria-pressed="true"]{background:var(--pill-on);border-color:var(--pill-on-line)}
/* the gap above the message box (pills → box) and below it (box → name) are both 90px */
.to-row{display:flex;align-items:center;height:52px;margin:19px 0}
.to-line{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;min-width:0;font:700 30px/1.35 var(--cute);color:#4A332D;visibility:hidden}
/* yellow highlighter behind "To … ♥" and sparks to its left (reference style); the text itself stays put */
.to-line::before{content:"";position:absolute;inset:14% -16px 4% -16px;z-index:-1;background:radial-gradient(ellipse at center,#FFF2C6 30%,#FCE3A0 100%);
  border-radius:26px 34px 28px 36px / 34px 26px 36px 28px;transform:rotate(-1.2deg)}
.to-spark{position:absolute;left:-44px;top:-4px;width:24px;height:28px;color:#F7C948;flex:none}
.to-line.on{visibility:visible}
.to-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:.08em}
.to-line .heart{flex:none;width:28px;height:28px}
.to-line.no-heart .heart{display:none}
.c-body{display:block;width:100%;height:170px;resize:none;border:3px solid var(--field-line);border-radius:22px;background:var(--field);padding:20px 24px;font:600 20px/1.4 var(--sans)}
.c-body::placeholder,.c-name::placeholder{color:var(--muted);opacity:1}
/* Typing fields show only the text cursor when focused, no blue frame (round 15); red stays for errors. */
.c-body:focus,.c-body:focus-visible,.c-name:focus,.c-name:focus-visible{outline:none}
.c-body.invalid,.c-name.invalid{border-color:var(--error)}
.status-row{display:flex;align-items:center;gap:8px;height:44px;margin:23px 0}
.c-status{flex:1;margin:0;max-height:44px;overflow:hidden;color:var(--error);font:800 15px/22px var(--sans);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.c-count{font:800 16px var(--sans);color:var(--ink-soft);white-space:nowrap;margin-left:8px}
.c-count.over{color:var(--error)}
.status-row .icon-btn svg{width:24px;height:24px}
.name-row{display:flex;gap:18px}
.c-name{flex:1;min-width:0;height:58px;border:3px solid var(--field-line);border-radius:18px;background:var(--field);padding:0 24px;font:600 20px var(--sans)}
.post{flex:none;width:156px;height:58px;border-radius:999px;border:3px solid var(--post-line,#231F3D);background:var(--post-bg,#231F3D);color:var(--post-ink,#fff);font:800 20px var(--sans)}
.post:disabled{background:var(--disabled);border-color:var(--disabled);color:#fff}
.post.busy{opacity:.7;cursor:progress}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 16px;margin-top:14px}
.privacy{flex:1 1 320px;margin:0 4px;font:600 13px/1.5 var(--sans);color:var(--ink-soft)}
.ts-slot{flex:none;margin-left:auto}
.ts-slot:empty{display:none}
/* When it no longer fits beside the privacy note it gets its own line, centred. */
@media (max-width:911px){.ts-slot{flex-basis:100%;display:flex;justify-content:center;margin-left:0}}

/* Rules */
.dlg-rules{width:420px;background:var(--paper-info);padding:52px 36px 22px}
.rules-title{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:400 32px/1.15 var(--hand)}
.rules-title svg{width:20px;height:20px;flex:none}
.rules{list-style:none;margin:0;padding:0}
.rules li{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--rule);padding:14px 0;font:800 18px var(--sans)}
.rules svg{width:22px;height:22px;flex:none}
.rules .no{color:#D3001B}
.rules .yes{color:#1E8E3E}

/* Info: Announcements / About */
/* Same size as the compose dialog (round 16); long content scrolls inside the panel. */
.dlg-info{width:880px;height:614px;background:var(--paper-info);padding:28px 50px 40px;flex-direction:column}
.dlg-info[open]{display:flex}
.dlg-info .info-panel{flex:1;min-height:0;overflow-y:auto}
.info-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.tabs{flex:1;display:flex;gap:6px;background:var(--filter-bg);border-radius:14px;padding:6px}
.tabs [role=tab]{flex:1;min-height:44px;padding:0 8px;border:0;border-radius:10px;background:transparent;font:800 15px var(--sans)}
.tabs [aria-selected=true]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}

@media (max-width:599px){
  .dlg{border-radius:28px}
  .dlg-detail{padding:72px 24px 28px 44px;border-radius:32px}
  .dlg-detail .dlg-close{top:14px;right:14px}
  .detail-spark-to{left:-34px;top:-10px;width:24px;height:42px}
  .detail-to{font-size:26px;gap:10px;padding:8px 20px 10px 12px}.detail-to .heart{width:26px;height:26px}
  .detail-body{font-size:19px;margin:26px 0 34px 10px}
  .detail-foot{flex-wrap:wrap}
  .detail-date-pill{font-size:15px;gap:8px;padding:6px 14px 6px 10px}.detail-date-pill svg{width:22px;height:22px}
  .detail-from{font-size:21px;margin-left:auto}.detail-from-heart{width:24px;height:24px}
  .detail-blob-l{width:120px;height:56px}.detail-blob-r{width:150px;height:96px}
  .dlg-compose form{padding:80px 20px 24px}
  .compose-close{top:14px;right:14px}
  .pills{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .pill{min-height:38px;font-size:14px;padding:0 6px}
  .to-line{font-size:24px}.to-line .heart{width:22px;height:22px}
  .to-line::before{left:-8px;right:-12px}
  .to-spark{display:none}
  .c-body{height:140px;padding:16px 18px;font-size:18px}
  .name-row{gap:10px}
  .c-name{height:52px;padding:0 16px;font-size:18px}
  .post{width:96px;height:52px;font-size:18px}
  .dlg-rules{padding:50px 24px 18px}
  .rules-title{font-size:28px}
  .rules li{font-size:17px;padding:13px 0}
  .dlg-info{height:605px;padding:20px 20px 24px}
}

/* --- Dialog look (reference style: blue info, yellow compose). Colours, borders and
   decorations only; sizes and positions stay as above. ------------------------------ */
.dlg-deco{position:absolute;z-index:0;pointer-events:none}
.dlg-compose form,.dlg-info>.info-head,.dlg-info>.info-panel{position:relative;z-index:1}

/* Compose — yellow */
.dlg-compose{--c-ink:#4A332D;--c-soft:#8A7468;--sun:#F7C948;
  background:#FFFBEF;color:var(--c-ink);border-radius:40px;overflow:hidden auto;
  box-shadow:0 24px 60px -20px rgba(120,90,40,.35),0 0 0 1px rgba(247,200,67,.15)}
.compose-blob-l{left:-10px;bottom:-10px;width:170px;height:110px;fill:#FDE7A6}
.compose-blob-r{right:-10px;bottom:-10px;width:230px;height:150px;fill:#FDE7A6}
.compose-blob-r .deep{fill:#FBDA80;opacity:.55}
/* Yellow close button — the same in compose and detail */
.dlg-compose .compose-close .icon-btn,.dlg-detail .dlg-close{width:50px;height:50px;background:#FFF7DE;border:3px solid #FCE9B0;color:#4A332D;transition:transform .15s,background .15s}
.dlg-compose .compose-close .icon-btn svg,.dlg-detail .dlg-close svg{width:20px;height:20px}
.dlg-compose .compose-close .icon-btn:hover,.dlg-detail .dlg-close:hover{transform:rotate(90deg);background:#FCE9B0}
.dlg-detail .dlg-close{background:var(--c-bg,#FFF7DE);border-color:var(--d-wash)}
.dlg-detail .dlg-close:hover{background:var(--d-wash)}
.dlg-compose .pill{background:#fff;border-color:#F3E6C4;color:var(--c-ink);transition:transform .18s,box-shadow .18s}
.dlg-compose .pill:hover{transform:translateY(-2px)}
.dlg-compose .pill[aria-pressed="true"]{background:var(--pill-on,#FFF6D8);border-color:var(--pill-on-line,var(--sun));box-shadow:0 4px 0 var(--pill-on-line,var(--sun))}
.dlg-compose .c-body,.dlg-compose .c-name{background:#FFF6DC;border:3px dashed #F1D98E;color:var(--c-ink);transition:border-color .18s,background .18s}
.dlg-compose .c-body{border-radius:28px}
.dlg-compose .c-name{border-radius:22px}
.dlg-compose .c-body::placeholder,.dlg-compose .c-name::placeholder{color:#B9A58F}
.dlg-compose .c-body:focus,.dlg-compose .c-name:focus{border-style:solid;background:#FFFBEF}
.dlg-compose .c-body.invalid,.dlg-compose .c-name.invalid{border-color:var(--error);border-style:solid}
.dlg-compose .c-count,.dlg-compose .privacy{color:var(--c-soft)}
.dlg-compose .c-count.over{color:var(--error)}
.dlg-compose #open-rules{color:var(--c-ink)}
.dlg-compose .post{--post-shadow:#D9A425;border-color:var(--post-line,var(--sun));background:var(--post-bg,var(--sun));color:var(--c-ink);
  box-shadow:0 5px 0 var(--post-line,var(--post-shadow));transition:transform .15s,box-shadow .15s}
.dlg-compose .post:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--post-line,var(--post-shadow))}
.dlg-compose .post:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 var(--post-line,var(--post-shadow))}
.dlg-compose .post:disabled{background:#EFE4CB;border-color:#EFE4CB;color:#B9A58F;box-shadow:0 5px 0 #E0D3B5;cursor:not-allowed}

/* Info and rules — blue */
.dlg-info,.dlg-rules{--b-ink:#2E5D8A;--b-soft:#8EA7C2;--b-line:#A9D5F5;
  background:#F1F8FE;color:var(--b-ink);border:3px solid var(--b-line);border-radius:40px;overflow:hidden;
  box-shadow:0 22px 50px -24px rgba(70,130,190,.35)}
.cloud-tr{top:-6px;right:-6px;width:220px;height:130px;fill:#DCEDFA}
.cloud-tr .deep{fill:#CFE5F8}
.cloud-bl{bottom:-6px;left:-6px;width:200px;height:120px;fill:#DCEDFA}
.dlg-info .info-head .icon-btn,.dlg-rules .dlg-close{background:#fff;border:3px solid var(--b-line);color:var(--b-ink);transition:transform .15s,background .15s}
.dlg-info .info-head .icon-btn:hover,.dlg-rules .dlg-close:hover{transform:rotate(90deg);background:#E6F3FD}
.dlg-info .tabs{background:#E1F0FC;border-radius:999px}
.dlg-info .tabs [role=tab]{min-height:52px;border-radius:999px;color:var(--b-soft);font:700 18px var(--cute);transition:background .2s,color .2s}
.dlg-info .info-head{gap:16px}
.dlg-info .info-head .icon-btn{width:56px;height:56px}
.dlg-info .info-head .icon-btn svg{width:22px;height:22px}
.dlg-info .info-panel{margin-top:6px;padding:0 4px 8px}
.info-title-wrap{position:relative;width:fit-content;max-width:calc(100% - 56px);margin:30px 0 0 52px}
.info-spark{position:absolute;left:-48px;top:-6px;width:36px;height:40px;color:#F7C948}
.info-title{position:relative;isolation:isolate;margin:0;font:700 32px/1.3 var(--cute);color:#4A332D}
.info-title::before{content:"";position:absolute;inset:18% -16px 4% -16px;z-index:-1;background:radial-gradient(ellipse at center,#FFF2C6 30%,#FCE3A0 100%);
  border-radius:26px 34px 28px 36px / 34px 26px 36px 28px;transform:rotate(-1.2deg)}
.info-lead{margin:30px 0 0;font:700 22px/1.4 var(--cute);color:var(--b-ink)}
.info-under{display:block;width:100%;max-width:380px;height:12px;fill:none;stroke:#B9DDF7;stroke-width:6;stroke-linecap:round}
.info-empty{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:44px}
.info-star{position:relative;width:96px;height:96px}
.info-star-icon{width:96px;height:96px;animation:yoFloat 3.2s ease-in-out infinite}
.info-star-heart{position:absolute;right:-16px;bottom:4px;width:24px;height:24px;fill:#8CCBF3}
.info-empty .info-lead{margin-top:14px;font-size:26px}
.info-under-c{max-width:260px;margin-top:2px}
.info-note{margin:10px 0 0;font:600 16px var(--sans);color:var(--b-soft)}
.anns{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.ann{background:rgba(255,255,255,.8);border:2px solid var(--b-line);border-radius:24px;padding:20px 24px}
.ann-text{font:700 17px/1.6 var(--sans);color:var(--b-ink);overflow-wrap:anywhere}
.ann-date{display:block;margin-top:10px;text-align:right;font:600 14px var(--sans);color:var(--b-soft)}
.about-text{width:100%;max-width:42rem;margin-top:14px;font:600 17px/1.7 var(--sans);color:var(--b-soft);overflow-wrap:anywhere;text-align:left}  /* admin-written, inside the welcome block */
/* Admin rich text (Quill classes; keep in step with wall/rich_text.py and admin/rich_editor.css) */
.rich p{margin:0}
.rich ul,.rich ol{margin:4px 0;padding-left:1.5em;text-align:left}
.rich hr{width:100%;height:0;margin:24px auto;border:0;border-top:3px dashed #B9DDF7}
.rich .ql-align-center{text-align:center}
.rich .ql-size-small{font-size:.82em}.rich .ql-size-large{font-size:1.3em}.rich .ql-size-huge{font-size:1.7em}
.rich .ql-color-brown{color:#4A332D}.rich .ql-color-blue{color:#2F6FB3}.rich .ql-color-red{color:#E5372F}.rich .ql-color-orange{color:#D97F00}.rich .ql-color-gray{color:#8A9BB0}
/* About: star in the top-right corner, fixed welcome heading on top, admin text below */
.about-welcome{margin-top:34px}
.line-add{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:28px;padding:0 26px;border-radius:999px;background:#06C755;color:#fff;font:800 17px var(--sans);text-decoration:none;transition:transform .18s}
.line-add:hover{transform:translateY(-2px)}
.about-welcome .about-text,.about-welcome .info-note{margin-top:34px}  /* more room between the heading and the text */
.about-welcome .info-star{position:absolute;top:36px;right:34px}
.about-welcome .info-lead{margin-top:0}
/* Announcements: the same star in the top-right corner (the empty state has its own centred star) */
.ann-star{position:absolute;top:10px;right:34px;width:84px;height:84px}
.ann-star .info-star-icon{width:84px;height:84px}
.ann-star~.anns{margin-top:40px}
.dlg-info .info-panel a{color:#2F6FB3}
.dlg-info .info-panel a.line-add{color:#fff;text-decoration:none}
.dlg-info .tabs [aria-selected=true]{background:#fff;color:var(--b-ink);box-shadow:0 3px 0 var(--b-line)}
.dlg-rules .rules li{border-top-color:#D3E9F9}

@media (max-width:599px){
  .dlg-info .tabs [role=tab]{font-size:15px;min-height:46px}
  .dlg-info .info-head{gap:10px}.dlg-info .info-head .icon-btn{width:48px;height:48px}
  .info-title-wrap{margin:24px 0 0 38px}.info-spark{left:-36px;width:28px;height:32px}
  .info-title{font-size:25px}
  .info-lead{font-size:19px;margin-top:24px}.info-empty .info-lead{font-size:21px}
  .info-empty{margin-top:30px}.info-star,.info-star-icon{width:80px;height:80px}
  .about-text{font-size:16px}
  .ann-star{position:relative;top:auto;right:auto;display:block;margin:20px auto 0}.ann-star,.ann-star .info-star-icon{width:64px;height:64px}.ann-star~.anns{margin-top:18px}  /* phone: centred above the cards, like About */
  .about-welcome{margin-top:12px}.about-welcome .info-star{position:relative;top:auto;right:auto;margin-bottom:10px}  /* phone: no room beside the title, so the star sits above the heading */
  .about-welcome .info-star,.about-welcome .info-star-icon{width:64px;height:64px}
}
@media (max-width:380px){  /* small phones (320–380px): keep tabs, close button and headings from squeezing */
  .dlg-info .tabs{gap:2px;padding:4px}
  .dlg-info{padding-left:14px;padding-right:14px}
  .dlg-info .tabs [role=tab]{flex:1 1 auto;min-width:0;padding:0 8px;font-size:13px;min-height:42px}
  .dlg-info .info-head{gap:8px}.dlg-info .info-head .icon-btn{flex:none;width:42px;height:42px}
  .info-title-wrap{margin-left:30px}.info-spark{left:-30px;width:22px;height:26px}
  .info-title{font-size:21px}
  .info-empty .info-lead{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .info-star-icon{animation:none}
  .dlg-compose .pill,.dlg-compose .post,.dlg-compose .compose-close .icon-btn,.dlg-detail .dlg-close,.dlg-info .info-head .icon-btn,.dlg-rules .dlg-close{transition:none}
}

/* Buttons that lift on hover keep their click area: without this, a click on the bottom edge
   (or on the drop shadow under it) lands on nothing once the button has moved up, so the
   button sometimes "does nothing". The invisible ::after covers the lift and the shadow. */
.switch,.chip,.dlg-compose .pill,.dlg-compose .post{position:relative}
.switch::after,.chip::after,.fab::after,.dlg-compose .pill::after,.dlg-compose .post::after{content:"";position:absolute;inset:-4px -4px -8px;border-radius:inherit}

/* --- Share (SPEC v1.11 §17.2–§17.3, canvas ④ ⑤ ⑦ ⑧ ⑨) --------------------------------- */
html:not(.js-sp) .sp-trigger{display:none}  /* share.js reveals them; nothing to do without it */
.sp-trigger[aria-busy]{cursor:progress;opacity:.7}
/* Detail: round share button left of the close button */
.detail-sp{position:absolute;top:22px;right:86px;z-index:2;display:grid;place-items:center;width:50px;height:50px;padding:0;border-radius:50%;
  background:var(--c-bg,#FFF7DE);border:3px solid var(--d-line);color:#4A332D;transition:transform .15s,background .15s}
.detail-sp svg{width:22px;height:22px}
.detail-sp:hover{transform:translateY(-2px);background:var(--d-wash)}
.detail-to-wrap{max-width:calc(100% - 84px)}
/* List: 44px share button in each row's top-right corner; the star moves left to make room */
.row-sp{position:absolute;top:14px;right:14px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
  background:#fff;border:2px solid var(--r-line);box-shadow:0 2px 6px rgba(35,31,61,.08);color:var(--r-ink);transition:transform .15s}
.row-sp svg{width:18px;height:18px}
.row-sp:hover{transform:translateY(-2px)}
.row-star{margin-right:78px}  /* canvas ⑤: star well left of the share button */
/* Note page: quiet text button under the two big ones */
.note-sp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:#2E5D8A;font:800 16px var(--sans)}
.note-sp svg{width:18px;height:18px}
.note-sp:hover{text-decoration:underline;text-underline-offset:4px}

/* Share panel: blue, centred on every screen (phones included, Karis 2026-10-24) */
.dlg-sp{--s-ink:#2E5D8A;--s-line:#A9D5F5;width:620px;padding:36px 44px 40px;background:#F1F8FE;color:var(--s-ink);border:3px solid var(--s-line);border-radius:40px;
  overflow:visible;box-shadow:0 22px 50px -24px rgba(70,130,190,.35)}  /* visible: the preview grows out of the tapped card */
/* Plain block layout (no flex on the dialog): iPhone Safari collapsed the buttons of the flex version.
   Every height is explicit, so the panel always fits: preview height = screen height − the rest. */
.dlg-sp[open]{display:block;max-height:none}
.sp-deco{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.sp-cloud{position:absolute;top:-6px;right:-6px;width:220px;height:130px;fill:#DCEDFA}
.sp-head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.sp-title{margin:0;font:700 26px/1.2 var(--cute)}
.sp-close{width:48px;height:48px;background:#fff;border:3px solid var(--s-line);color:var(--s-ink);transition:transform .15s,background .15s}
.sp-close:hover{transform:rotate(90deg);background:#E6F3FD}
.sp-preview{position:relative;z-index:1;display:block;margin:0 auto;width:288px;height:360px;
  width:calc(max(160px,min(360px,100vh - 360px)) * .8);height:max(160px,min(360px,100vh - 360px));
  width:calc(max(160px,min(360px,100dvh - 360px)) * .8);height:max(160px,min(360px,100dvh - 360px));
  object-fit:cover;border-radius:18px;background:#FFFEF7;box-shadow:0 10px 24px -12px rgba(46,93,138,.45)}
.sp-actions{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:24px}
.sp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sp-btn{--sh:var(--s-line);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 16px;border-radius:999px;
  border:3px solid var(--s-line);background:#fff;color:var(--s-ink);box-shadow:0 5px 0 var(--sh);font:800 18px var(--sans);white-space:nowrap;transition:transform .15s,box-shadow .15s}
.sp-btn svg{width:22px;height:22px;flex:none}
.sp-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--sh)}
.sp-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sh)}
/* the first button is yellow: Share when the browser can share files, otherwise Save image */
.sp-btn-main,.sp-btn-main[hidden]+.sp-row .sp-btn-save{--sh:#D9A425;border-color:#F7C948;background:#F7C948;color:#4A332D}
.sp-btn-copy .sp-ico-check{display:none}
.sp-btn-copy.copied{--sh:#8CCBF3;border-color:#8CCBF3;background:#E1F0FC}
.sp-btn-copy.copied .sp-ico-check{display:block}
.sp-btn-copy.copied .sp-ico-link{display:none}
.sp-copy-temp{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}

@media (max-width:599px){
  .detail-sp{top:14px;right:74px}
  .row-sp{top:10px;right:10px}
  .row-star{right:64px;margin-right:0}
  .dlg-sp{width:calc(100vw - 32px);padding:20px 20px 24px;border-radius:32px}
  .sp-head{margin-bottom:16px}
  .sp-actions{margin-top:16px}
  .sp-title{font-size:21px}
  .sp-close{width:44px;height:44px}
  .sp-preview{width:236px;height:295px;
    width:calc(max(160px,min(295px,100vh - 330px)) * .8);height:max(160px,min(295px,100vh - 330px));
    width:calc(max(160px,min(295px,100dvh - 330px)) * .8);height:max(160px,min(295px,100dvh - 330px))}
  .sp-btn-main{min-height:56px}
  .sp-row .sp-btn{min-height:50px;font-size:15px;gap:8px}
  .sp-row .sp-btn svg{width:18px;height:18px}
}
@media (max-width:360px){.sp-row .sp-btn{padding:0 8px;font-size:14px;gap:6px}.sp-title{font-size:19px}}
.sp-hint{margin:16px 4px 0;text-align:center;font:600 12.5px/1.45 var(--sans);color:#6A86A6}
.sp-has-hint .sp-preview{width:calc(max(140px,min(295px,100vh - 370px)) * .8);height:max(140px,min(295px,100vh - 370px));
  width:calc(max(140px,min(295px,100dvh - 370px)) * .8);height:max(140px,min(295px,100dvh - 370px))}
/* "Share to" picker (computers): opens on top of the share panel */
.dlg-pick{width:440px;padding:28px 30px 30px;background:#fff;color:#2E5D8A;border:3px solid #A9D5F5;border-radius:32px;box-shadow:0 24px 50px -20px rgba(46,93,138,.5)}
.dlg-pick::backdrop{background:rgba(241,248,254,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pick-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.pick-title{margin:0;font:700 24px/1.2 var(--cute)}
.pick-close{width:44px;height:44px;background:#fff;border:3px solid #A9D5F5;color:#2E5D8A;transition:transform .15s,background .15s}
.pick-close:hover{transform:rotate(90deg);background:#E6F3FD}
.pick-list{display:flex;flex-direction:column;gap:12px}
.pick-item{display:flex;align-items:center;gap:16px;width:100%;min-height:72px;padding:12px 18px;border:3px solid #D3E9F9;border-radius:22px;background:#F7FBFF;
  box-shadow:0 4px 0 #D3E9F9;color:#2E5D8A;text-align:left;text-decoration:none;font:inherit;transition:transform .15s,border-color .15s}
.pick-item:hover{transform:translateY(-2px);border-color:#A9D5F5}
.pick-item::after{content:"\203A";margin-left:auto;font:800 22px var(--sans);color:#8EA7C2}
.pick-badge{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:#fff;font:800 18px var(--sans)}
.pick-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick-text b{font:800 19px var(--sans)}
.pick-text span{font:600 13.5px/1.35 var(--sans);color:#6A86A6}
.pick-note{margin:18px 4px 0;text-align:center;font:600 13px/1.4 var(--sans);color:#6A86A6}
@media (prefers-reduced-motion:reduce){.pick-item,.pick-close{transition:none}}
.dlg-sp:focus{outline:none}  /* share.js focuses the dialog itself so the close button has no ring on open */
@media (max-height:500px){.dlg-sp[open]{max-height:calc(100dvh - 16px);overflow:auto}}  /* tiny screens: scroll rather than cut the buttons off */
@media (prefers-reduced-motion:reduce){.detail-sp,.row-sp,.sp-close,.sp-btn{transition:none}}

/* --- Campaigns (SPEC v1.11 §18, canvas ⑪ ⑯ ⑰ ⑱) ----------------------------------------- */
/* Wall cards let the cake tag stick out of the top-right corner: no overflow clipping, and the
   pale corner blob becomes part of the card background instead of a clipped element. */
.card{overflow:visible;background:radial-gradient(45px 30px at calc(100% - 31px) calc(100% - 12px),color-mix(in srgb,var(--hl) 80%,var(--bg)) 97%,transparent 100%) no-repeat,var(--bg)}
.card-blob{display:none}
.cake{display:grid;place-items:center;flex:none;border-radius:50%;background:#FFE89A;box-shadow:0 0 0 3px #F4C24D,0 3px 0 3px rgba(35,31,61,.10);transform:rotate(8deg)}  /* lemon yellow, warm gold ring */
.cake img{display:block;width:74%;height:74%}
.cake-card{position:absolute;top:-14px;right:-14px;z-index:3;width:52px;height:52px}
.detail-to-wrap{display:flex;align-items:center}
.detail-cake{width:54px;height:54px;margin:-12px 0 0 -12px}
.row-cake{width:38px;height:38px;margin-left:-2px}
.note-to-row{display:flex;align-items:center;gap:10px}
.note-cake{width:46px;height:46px;margin-top:-10px}
/* Campaign card on the wall: under the banner, colours from the recipient */
.camp{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:20px 32px;margin-top:28px;padding:20px 30px;
  background:var(--k-bg);border:3px solid var(--k-bd);border-radius:30px;box-shadow:0 6px 0 var(--k-bd);color:var(--k-fg)}
.banner-slot:empty+.camp{margin-top:32px}
.camp+.wall{margin-top:36px}
.camp-spark{position:absolute;right:16px;top:10px;width:22px;height:30px;color:#F6D46A}
.camp-main{min-width:0}
.camp-title{display:flex;align-items:center;gap:10px;margin:0;font:400 32px/1.1 var(--hand);overflow-wrap:anywhere}
.camp-title .heart{width:28px;height:28px}
.camp-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:10px 0 0}
.camp-days{font:800 48px/1 var(--sans)}
.camp-to-go{font:800 16px var(--sans)}
.camp-today{font:800 30px/1.1 var(--sans)}
.camp-goal{font:800 22px/1.3 var(--sans);overflow-wrap:anywhere}
.camp-side{flex:none;display:flex;align-items:center;gap:16px;margin-right:24px}
.camp-notes{padding:5px 14px;border-radius:999px;background:#fff;font:800 15px var(--sans);white-space:nowrap}
.camp-write{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;
  background:#fff;border:3px solid var(--k-btn);box-shadow:0 4px 0 var(--k-btn);color:var(--k-fg);font:800 17px var(--sans);white-space:nowrap;transition:transform .15s,box-shadow .15s}
.camp-write svg{width:18px;height:18px}
.camp-write:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--k-btn)}
.camp-write:disabled{background:#EEE;border-color:#D4D4D4;box-shadow:0 4px 0 #D4D4D4;color:#8A8A8A}
@media (max-width:767px){  /* canvas ⑪: title / countdown + notes / full-width button */
  .camp{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title title" "count notes" "write write";gap:0 12px;padding:18px 18px 16px;border-radius:28px}
  .camp-main,.camp-side{display:contents}
  .camp-title{grid-area:title;font-size:26px;padding-right:20px}.camp-title .heart{width:24px;height:24px}
  .camp-count{grid-area:count;margin-top:12px}
  .camp-notes{grid-area:notes;align-self:end;margin-bottom:4px}
  .camp-write{grid-area:write;margin-top:14px;min-height:48px;font-size:16px}
}
@media (max-width:599px){
  .camp{margin-top:20px}.camp+.wall{margin-top:24px}
  .camp-days{font-size:44px}
  .cake-card{top:-12px;right:-12px;width:42px;height:42px}
  .detail-cake{width:44px;height:44px;margin-top:-8px}
  .row-cake{width:32px;height:32px}
  .note-cake{width:40px;height:40px;margin-top:0}
}
@media (prefers-reduced-motion:reduce){.camp-write{transition:none}}


/* Detail: Original / Thai toggle (only present when the note has a saved Thai text).
   In the top row, left of the share button (the phone's top row is empty on its left, so it fits there too).
   Either way it floats, so it takes no width or height from the message. */
.detail-lang{position:absolute;top:22px;right:150px;z-index:2;box-sizing:border-box;height:50px;display:inline-flex;align-items:stretch;gap:2px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--d-wash) 70%,transparent)}
.detail-lang[hidden]{display:none}
.detail-lang-btn{min-width:76px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--d-soft);font:800 15px var(--sans);cursor:pointer;transition:background .15s,color .15s}
.detail-lang-btn[aria-pressed="true"]{background:var(--c-bg,#FFF7DE);color:var(--c-fg,var(--d-ink));box-shadow:0 0 0 2px var(--d-line)}
.detail-lang-btn:focus-visible{outline:3px solid var(--d-line);outline-offset:2px}
.dlg-detail.has-lang .detail-to-wrap{max-width:calc(100% - 260px)}
.dlg-detail.is-thai .detail-body-text{font-family:"Mali",var(--sans)}
@media (max-width:599px){.detail-lang{top:19px;right:134px;height:40px}.detail-lang-btn{min-width:62px;padding:0 12px;font-size:14px}.dlg-detail.has-lang .detail-to-wrap{max-width:calc(100% - 84px)}}
@media (prefers-reduced-motion:reduce){.detail-lang-btn{transition:none}}