/* 天光 · app/life/objects.css — the things content lives on, lying in the scene (docs/LIFE.md §3.4, §6.6, §9). Paper stays paper
   in every look (cream stock, dark ink, a warm shadow); inside, the host's tokens take paper values. Tilt ≤ 2°, never on a field.
   .obj-note · .obj-stamp · .obj-ticket (+ .obj-stub) · .obj-receipt · .obj-letter · .obj-notice · .obj-calendar · .obj-form
   (.is-notes: a notepad) · .obj-polaroid · .obj-voice. Notches and holes are cut out: the world shows through. Also type.js's
   spoken word (::highlight(lf-word)) and its gloss note (.lt-gloss). */
.obj-ticket,.obj-receipt,.obj-letter,.obj-notice,.obj-calendar,.obj-form,.obj-polaroid,.lt-gloss{
--ink:#27223C;--ink-2:#4A4463;--ink-3:#625C7C;--line:rgba(39,34,60,.14);--rule:rgba(39,34,60,.28);--fill:rgba(39,34,60,.05);--fill-2:rgba(39,34,60,.09);
--ctl:rgba(39,34,60,.42);--field:rgba(255,255,255,.7);--raised:#fff;--on-ink:#fff;--ok:#8A5200;--ok-soft:rgba(242,169,59,.2);--red:#B8372E;--red-soft:rgba(184,55,46,.08);
--lamp:#E7A23A;--lamp-ink:#8A5200;--moon:#C9514A;--moon-ink:#A93D36;--blueprint:#4C41C4;--link:#4C41C4;--link-line:rgba(76,65,196,.35);--focus:#4B3FD0;--focus-ring:rgba(75,63,208,.18);
--c-l:#2D67B0;--c-r:#177E5B;--c-w:#8A48BE;--c-s:#A85D0C;--hi-now:rgba(245,181,68,.24);--tip:rgba(242,169,59,.16);--pen:#2E3A92;
--t-ok:var(--lamp-ink);--t-no:var(--red);--t-pl:var(--blueprint);--t-nw:var(--moon-ink);
--sheet:var(--pp);position:relative;color:var(--ink);text-shadow:none}
:root{--pp:#FBF7EE;--pp-2:#F2EBDA;--pp-sh:0 1px 1px rgba(40,24,0,.08),0 3px 8px -4px rgba(20,10,40,.28),0 24px 40px -24px rgba(12,6,34,.75)}
:root[data-theme="light"],:root[data-theme="sakura"],:root[data-theme="auto"][data-lf-scheme="light"]{--pp:#FBF5E8;--pp-2:#F1E8D4;--pp-sh:0 0 0 1px rgba(60,40,10,.06),0 2px 6px -3px rgba(60,40,10,.2),0 22px 36px -24px rgba(50,36,110,.42)}

/* a note (a sticky note with washi tape) and a round postmark (from life.css §13) */
.obj-note{--ink:var(--note-ink);--ink-2:var(--note-ink-2);--ink-3:#6A5F7E;--line:rgba(43,35,64,.14);--rule:rgba(43,35,64,.22);--fill:rgba(43,35,64,.06);--fill-2:rgba(43,35,64,.1);
--link:#4B3FC0;--link-line:rgba(75,63,192,.4);--red:#B8372E;--focus:#4B3FD0;
position:relative;display:block;max-width:34em;margin:22px 0 18px;padding:24px 22px 18px;color:var(--ink);border-radius:3px 3px 16px 3px;text-shadow:none;
background:radial-gradient(130% 90% at 0 0,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,0) 70%,rgba(120,80,0,.06)),var(--note);
box-shadow:0 1px 1px rgba(40,24,0,.08),0 2px 4px -2px rgba(40,24,0,.12),0 18px 30px -16px rgba(30,16,0,.5);transform:rotate(var(--tilt,-1.2deg))}
.obj-note:nth-of-type(2n){--tilt:.9deg}
.obj-note::before{content:"";position:absolute;top:-11px;left:calc(50% - 46px);width:92px;height:24px;background:var(--tape-bg);opacity:.92;transform:rotate(-3deg);
clip-path:polygon(0 8%,4% 0,9% 10%,14% 1%,20% 8%,26% 0,100% 0,100% 0,96% 12%,100% 24%,96% 38%,100% 52%,96% 66%,100% 80%,96% 92%,100% 100%,0 100%,4% 86%,0 72%,4% 58%,0 44%,4% 30%,0 16%);
box-shadow:0 1px 2px rgba(0,0,0,.08)}
.obj-note:has(input,textarea,select){transform:none}
.obj-note .obj-sign{display:block;margin-top:10px;text-align:right;font:italic 400 15px/1.3 var(--f-display);color:var(--ink-2)}
.obj-stamp{--stamp:var(--moon-ink);position:relative;display:inline-grid;place-items:center;align-content:center;gap:3px;width:96px;height:96px;padding:0 16px;border-radius:50%;flex:none;
color:var(--stamp);border:2px solid currentColor;box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5.5px currentColor;opacity:.9;transform:rotate(var(--stamp-rot,-12deg));
font:700 9px/1.1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;text-align:center;
-webkit-mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.72) 70%,#000 86%);mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.72) 70%,#000 86%)}
.obj-stamp b{display:block;font:italic 600 18px/1 var(--f-display);letter-spacing:0;text-transform:none}
.obj-stamp.lamp{--stamp:var(--lamp-ink)}

/* a ticket: the main part, a perforation with two notches (cut out: the world shows through), the stub */
.obj-ticket{display:grid;border-radius:18px;filter:drop-shadow(0 1px 1px rgba(40,24,0,.1)) drop-shadow(0 16px 18px rgba(12,6,34,.4))}
.obj-ticket>:first-child{border-radius:18px 18px 0 0;background:radial-gradient(120% 80% at 0 0,rgba(255,255,255,.6),rgba(255,255,255,0) 60%),var(--pp);
-webkit-mask:var(--notch-b);mask:var(--notch-b)}
.obj-stub{position:relative;padding:12px 22px 14px;border-top:2px dashed var(--rule);border-radius:0 0 18px 18px;background:var(--pp-2);-webkit-mask:var(--notch-t);mask:var(--notch-t)}
.obj-ticket{--notch-b:radial-gradient(circle 11px at 0 100%,#0000 10.5px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% 100%,#0000 10.5px,#000 11px) 100% 0/51% 100% no-repeat;
--notch-t:radial-gradient(circle 11px at 0 0,#0000 10.5px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% 0,#0000 10.5px,#000 11px) 100% 0/51% 100% no-repeat}

/* a receipt: till paper, monospaced figures, bitten edges top and bottom */
.obj-receipt{--bite:radial-gradient(circle at 50% 0,transparent 4.2px,var(--pp) 4.8px) 0 0/11px 7px repeat-x;padding:22px 18px 18px;background:var(--pp);
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:14.5px;filter:drop-shadow(0 12px 14px rgba(12,6,34,.3))}
.obj-receipt::before,.obj-receipt::after{content:"";position:absolute;left:0;right:0;height:7px;background:var(--bite)}
.obj-receipt::before{top:-7px;transform:scaleY(-1)}.obj-receipt::after{bottom:-7px}

/* a letter, an email (a blue top edge), a card (a stamp's shadow, a fold), an article */
.obj-letter{padding:22px clamp(18px,4vw,26px) 20px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 120px),var(--pp);box-shadow:var(--pp-sh)}
.obj-letter.is-mail{border-top:4px solid var(--blueprint)}
.obj-letter.is-card{background:radial-gradient(circle at 92% 12%,rgba(224,100,90,.2) 0 18px,transparent 19px),linear-gradient(90deg,rgba(39,34,60,.06),transparent 18px),var(--pp);font-family:var(--f-display);font-size:17px}
.obj-letter.is-article{font-family:var(--f-display);font-size:17px;line-height:1.6}
.obj-letter.is-article figcaption{font:500 22px/1.2 var(--f-display);letter-spacing:0}

/* a notice pinned up: a little red pin, a hair of tilt */
.obj-notice{padding:28px 20px 18px;border-radius:3px;background:linear-gradient(170deg,#fff,var(--pp) 70%);box-shadow:var(--pp-sh);transform:rotate(var(--tilt,-.5deg))}
.obj-notice::before{content:"";position:absolute;top:9px;left:calc(50% - 7px);width:14px;height:14px;border-radius:50%;
background:radial-gradient(circle at 35% 32%,#FFB2A6,#D4574C 55%,#8E2E28);box-shadow:0 3px 4px -1px rgba(0,0,0,.35)}
/* a menu board (chalk on green, a wooden frame); a timetable lies flat */
.obj-notice.is-menu{--ink:#F6F1E4;--ink-2:#DCD6C4;--ink-3:#B7B09C;background:radial-gradient(90% 80% at 30% 20%,#34443C,#1E2A25);font-family:var(--f-display);font-size:17px;border:6px solid #7A5A36}
.obj-notice.is-menu::before{top:-10px}
.obj-notice.is-table{transform:none}

/* a calendar page: a coloured band, two rings */
.obj-calendar{padding:34px 14px 14px;border-radius:12px;background:linear-gradient(var(--moon-ink),var(--moon-ink)) 0 0/100% 20px no-repeat,var(--pp);box-shadow:var(--pp-sh)}
.obj-calendar::before,.obj-calendar::after{content:"";position:absolute;top:-7px;width:8px;height:22px;border-radius:4px;background:linear-gradient(90deg,#6E6C84,#B9B7C9 50%,#6E6C84);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.obj-calendar::before{left:22%}.obj-calendar::after{right:22%}

/* a form on a clipboard; a notepad page (a red margin, holes along the top) */
.obj-form{padding:32px 18px 14px;border-radius:6px;background:var(--pp);box-shadow:var(--pp-sh)}
.obj-form::before{content:"";position:absolute;top:-9px;left:calc(50% - 46px);width:92px;height:22px;border-radius:6px 6px 11px 11px;background:linear-gradient(#9C9AB0,#5C5A72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.3)}
.obj-form.is-notes{padding:26px 16px 12px 34px;border-radius:4px;background:linear-gradient(90deg,transparent 22px,rgba(214,69,58,.4) 22px 23.5px,transparent 23.5px),var(--pp);
-webkit-mask:radial-gradient(circle 3.4px,#0000 3px,#000 3.6px) 9px 8px/18px 8px repeat-x,linear-gradient(#000 8px,#0000 0 16px,#000 0);mask:radial-gradient(circle 3.4px,#0000 3px,#000 3.6px) 9px 8px/18px 8px repeat-x,linear-gradient(#000 8px,#0000 0 16px,#000 0)}
.obj-form.is-notes::before{display:none}

/* a photo with its caption */
.obj-polaroid{display:inline-block;margin:0;padding:10px 10px 40px;background:#FFFEFA;box-shadow:var(--pp-sh);transform:rotate(var(--tilt,1.2deg))}
.obj-polaroid figcaption{position:absolute;left:10px;right:10px;bottom:10px;text-align:center;font:italic 400 16px/1.2 var(--f-display);color:var(--ink-2)}

/* a voice message: who, a waveform, the play control (the theme's colours: it is a phone thing, not paper) */
.obj-voice{display:grid;gap:12px;padding:14px 14px 12px;border-radius:24px;background:var(--raised);box-shadow:var(--shadow-1);text-shadow:none}
.ov-top{display:flex;align-items:center;gap:10px;min-width:0}
.ov-avs{display:flex;flex:none}
.ov-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 15px/1 var(--f-display);color:#fff;
background:linear-gradient(140deg,#7C6CF0,#E0645A);box-shadow:0 0 0 2px var(--raised);transition:box-shadow .2s}
.ov-av+.ov-av{margin-left:-9px;background:linear-gradient(140deg,#2F9E8A,#5B8BE0)}
.ov-av.on{box-shadow:0 0 0 2px var(--raised),0 0 0 4.5px var(--now),0 0 16px var(--now-glow)}
.ov-who{flex:0 0 auto;max-width:55%;margin:0;display:grid;min-width:0;line-height:1.3}
.ov-who b{font:600 16px/1.3 var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-who small{font-size:12px;color:var(--ink-3)}
.ov-wave{flex:0 8 200px;min-width:48px;height:26px;overflow:visible}
.ov-wave path{fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.55;transition:stroke .3s,opacity .3s}
.obj-voice:has(.on) .ov-wave path{stroke:var(--now);opacity:1}

/* living type (life/type.js): the word being said, softly marked; the spoken line keeps its layout */
::highlight(lf-word){background-color:color-mix(in srgb,var(--now) 34%,transparent);color:inherit;text-decoration:underline 2px var(--now);text-underline-offset:.2em}
.lf-say,[data-lt]{-webkit-touch-callout:none}
/* the gloss: a small note by the word (long-press, or right-click) */
.lt-gloss{position:fixed;z-index:80;left:0;top:0;width:max-content;max-width:min(300px,calc(100vw - 24px));padding:12px 14px 12px;border-radius:14px;
background:var(--note,#FFF1BA);box-shadow:0 1px 1px rgba(40,24,0,.08),0 18px 34px -14px rgba(20,10,0,.55);font:400 14px/1.5 var(--f-sans);pointer-events:auto}
.lt-gloss[hidden]{display:none}
.lt-gloss::after{content:"";position:absolute;left:var(--ax,50%);width:12px;height:12px;margin-left:-6px;background:inherit;transform:rotate(45deg);bottom:-5px;border-radius:0 0 3px 0}
.lt-gloss.is-below::after{bottom:auto;top:-5px;border-radius:3px 0 0 0}
.lt-gloss .lt-h{display:flex;align-items:center;gap:8px;margin:0}
.lt-gloss .lt-en{font:500 21px/1.2 var(--f-display);color:var(--ink)}
.lt-gloss .lt-ipa{font-family:var(--f-ipa,inherit);font-size:13.5px;color:var(--ink-3)}
.lt-gloss .lt-zh{margin:4px 0 0;font-size:15px;color:var(--ink)}
.lt-gloss .lt-more{margin:2px 0 0;font-size:12px;color:var(--ink-3)}
.lt-gloss .lt-say{flex:none;margin-left:auto;width:36px;height:36px;border:0;border-radius:50%;background:var(--fill-2);color:var(--ink);font-size:13px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.ov-av,.ov-wave path{transition:none}}