/* E · 折叠屏。卡、标签、按钮、回执、行、详情、操作单、概要卡沿用 d.css（宿主同时挂 .variant-d）；这里只加折叠屏的版式。
   屏幕装在一台 iPhone Duo 里：抛光的金属边、内屏的炭灰边框与外屏的黑玻璃边、侧键、铰链（照 Apple 的正面渲染量的，
   duo-motion.md 3.7），全是 CSS 盒子，不用位图。开合是翻页：承载外屏的那半台连边框带厚度绕折痕朝你翻开（CSS 3D），
   自由边那条厚边随角度转、高光随角度变。平放时折痕处只有纸色留白，唯一的分界线是份额带上那一笔。尺寸以 pt 写，
   整台按比例缩进视口。 */
.variant-duo [hidden] { display: none !important; }
.variant-duo { --u-shade: #121214; --u-left: #fbfaf6; --u-ground: #ecebe6; }
.u-stage { display: flex; align-items: flex-start; gap: 40px; padding: 28px 24px 48px; }
.u-siderail { width: 290px; }
.u-area { position: relative; flex: 1; min-width: 0; }
.u-device { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--k, 1)); font-size: 14px; }

/* the screens: paper, their corners concentric with the body's (duo-motion.mjs BODY.corners: the body's corner less the border,
   an ellipse where the side and top borders differ; the variables are set on the device at mount); the body round them is .u-body */
.u-screen { position: absolute; top: 0; background: var(--paper); overflow: hidden; border-radius: var(--r-in); }
.u-inner { left: 0; z-index: 1; }
.u-inner:not(.is-on) { visibility: hidden; }
.u-outer { z-index: 2; border-radius: var(--r-out); }
.u-outer.is-off { visibility: hidden; }
.u-pagecut { position: absolute; display: block; z-index: 3; overflow: hidden; pointer-events: none; opacity: 0; will-change: opacity; }
.u-pagecut.is-on { opacity: 1; }
.u-pagecut > i { position: absolute; display: block; }
.u-table { left: 0; z-index: 1; border-radius: var(--r-table); }
/* unfolding: the inner screen's right page under the panel, lit (paper) once it takes over, dark glass before */
.u-lit, .u-unlit { position: absolute; top: 0; border-radius: var(--r-rpage); pointer-events: none; opacity: 0; z-index: 0; }
.u-lit.is-on, .u-unlit.is-on { opacity: 1; }
.u-lit { background: var(--paper); }
.u-unlit { background: var(--u-shade); }
.u-lit.is-whole { left: 0 !important; width: 100% !important; border-radius: var(--r-in); }

/* the body (duo-motion.mjs BODY): what does not move is a layer under the screens; which shell shows is [data-body] —
   open (lying flat), right (the half in your hand while the other turns on the panel), closed, table. Each shell is its
   own layer, rastered once, and the shown one has opacity 1: when the panel rises or lands the swap is the compositor's,
   nothing is painted again */
.u-body { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.u-body-ghost { z-index: 14; }
.u-shell, .u-keys { position: absolute; opacity: 0; will-change: opacity; }
.u-keys { left: 0; top: 0; }
.u-body[data-body="open"] > [data-shell="open"], .u-body[data-body="right"] > [data-shell="right"], .u-body[data-body="closed"] > [data-shell="closed"],
.u-body[data-body="table"] > [data-shell="table"], .u-body:not([data-body="table"]) > [data-shell="book"] { opacity: 1; }
.u-rimclip { position: absolute; display: block; inset: 0; overflow: hidden; }
.u-shell > .u-rimclip { box-shadow: 0 36px 64px -36px #0007, 0 10px 22px -14px #0003; }
.u-rim, .u-ink, .u-mark, .u-cover, .u-cover > i, .u-key, .u-notch { position: absolute; display: block; }
.u-rim { top: 0; bottom: 0; }
.u-ink { background: #000; }
/* antenna breaks: the rim's highlight is cut by a pale band */
.u-mark { background: #bcbab4; box-shadow: inset 0 0 0 .5px #8f8d88; }
/* the hinge cover in the bezel at the crease, and the keys (polished, lit from above) */
.u-cover { border-radius: 2.5px; background: #27282b; box-shadow: inset 0 0 0 .6px #1b1c1e, inset 0 .8px 0 #46474b; }
.u-cover > i { left: 5.5px; right: 5.5px; top: 0; bottom: 0; border-radius: 2px; background: #2f3033; box-shadow: inset 0 0 0 .5px #212225, inset 0 -.6px 0 #3c3d41; }
.u-key { border-radius: 2px; box-shadow: inset 0 0 0 .5px #57554f; }
.u-key.is-top { background: linear-gradient(to bottom, #f5f3ee, #d2d0ca 35%, #9b9993 70%, #6c6a65); }
.u-key.is-right { background: linear-gradient(to right, #6c6a65, #a3a19b 35%, #e9e7e2 72%, #f5f3ee); }
.u-key.is-bottom { background: linear-gradient(to top, #6c6a65, #a3a19b 35%, #e9e7e2 72%, #f5f3ee); }
.u-key.is-flush { opacity: .75; }
/* a host in the screen's shape for what grows or sinks over a screen (the detail's box, the 累计 bar on its way out) */
.u-clip { position: absolute; inset: 0; z-index: 6; pointer-events: none; clip-path: inset(0 0 9px 0 round var(--r-in)); }
.u-clip[data-body="closed"] { clip-path: inset(0 0 0 485px round var(--r-out)); }
.u-clip[data-body="table"] { clip-path: inset(0 round var(--r-table)); }
/* the book while the panel is still turning: only its right page is drawn (the left page is the panel's back) */
.u-inner.is-lifted { clip-path: inset(0 0 0 50%); }
.u-turn-ghost { z-index: 15; pointer-events: none; }

/* the fold: the half that carries the outer screen turns about the crease (rotateY), toward you and to the left, as a slab
   T thick. Its face is the front cover (rim, black glass, the outer screen), its back the left half's inside (rim, bezel,
   the inner screen's left page), its free edge a strip and twelve facets round the corners; each hides when it turns away.
   Per frame only transforms and opacities change: the blurred copies sit under masks that slide while the copies slide back;
   the edge's sheen and shade and the faces' glint are opacities. */
.u-fold3d { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
/* down, the panel is transparent rather than visibility: hidden, so it stays painted: lifting it paints nothing (its
   faces, rims, edge and the screens' copies are ready). No will-change on it: at opacity 0 the compositor does not
   draw it, its blurs included. Only the lifted, resting panel takes taps (is-live may outlast the lift). */
.u-fold3d:not(.is-up) { opacity: 0; }
.u-panel { position: absolute; top: 0; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.u-face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; }
.u-face.is-back { left: 0; }
/* the screens on the panel: the outer screen fades into a window onto the page below; the left page under its veil */
.u-glass { position: absolute; overflow: hidden; }
.u-glass.is-front { border-radius: var(--r-out); will-change: opacity; }
.u-glass.is-back { border-radius: var(--r-lpage); background: var(--paper); }
.u-glass > .u-clone, .u-layer > .u-clone, .u-blur > .u-clone { margin: 0; }
.u-glass.is-front > .u-clone { top: 0; z-index: 0; box-shadow: none; border-radius: 0; }
.u-layer { position: absolute; inset: 0; overflow: hidden; contain: strict; }
.u-fold3d.is-up.is-live .u-glass.is-back > .u-layer { pointer-events: auto; }
/* a faint sweep of light over a face while it turns */
.u-glintclip { position: absolute; display: block; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
/* the glint is only its band, 226 pt wide and tilted 14°, slid across the face: a small layer to raster as the face
   turns into view */
.u-glint { position: absolute; display: block; left: 0; top: -7.5%; height: 115%; width: 226px; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(90deg, #fff0, #ffffff8c 37.5%, #ffffffe6 50%, #ffffff8c 62.5%, #fff0); }
/* the free edge, polished: dark at its two rounded edges, bright just inside them, a soft band across the flat */
.u-side, .u-facet { position: absolute; display: block; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.u-side { transform: rotateY(90deg); border-radius: 1px;
  background: linear-gradient(to bottom, #ffffff26, #fff0 28%, #0000 62%, #00000033),
    linear-gradient(to right, #4f4d48, #c9c7c1 4%, #f4f2ed 9%, #9b9994 17%, #c6c4be 30%, #eceae5 46%, #c0beb8 62%, #8e8c87 80%, #e3e1dc 91%, #57554f); }
.u-facet { background: linear-gradient(var(--lit), var(--lit)),
    linear-gradient(to right, #4f4d48, #c9c7c1 4%, #f4f2ed 9%, #9b9994 17%, #c6c4be 30%, #eceae5 46%, #c0beb8 62%, #8e8c87 80%, #e3e1dc 91%, #57554f); }
.u-side > i { position: absolute; display: block; left: 0; right: 0; }
.u-side > .u-sheen, .u-side > .u-shade { top: 0; bottom: 0; opacity: 0; will-change: opacity; }
.u-sheen { background: linear-gradient(to bottom, #fff0, #ffffffd9 26%, #ffffffa6 52%, #fff0 86%); }
.u-shade { background: #1c1b19; }
.u-smark { height: 7.5px; background: #bdbbb5cc; }
.u-mask { position: absolute; left: 0; top: 0; z-index: 1; will-change: transform; }
.u-mask.is-f { -webkit-mask-image: linear-gradient(to right, transparent calc(50% - 60px), #000 calc(50% + 60px)); mask-image: linear-gradient(to right, transparent calc(50% - 60px), #000 calc(50% + 60px)); }
.u-mask.is-b { -webkit-mask-image: linear-gradient(to right, #000 calc(50% - 44px), transparent calc(50% + 44px)); mask-image: linear-gradient(to right, #000 calc(50% - 44px), transparent calc(50% + 44px)); }
.u-shift { position: absolute; left: 0; top: 0; will-change: transform; }
.u-blur { position: absolute; left: 0; top: 0; overflow: hidden; background: var(--paper); }
.u-frost { position: absolute; inset: 0; z-index: 2; background: var(--paper); opacity: 0; will-change: opacity; }
/* dark at the free edge (left), light by the crease; it slides off the page as the page opens */
.u-veil { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; will-change: transform, opacity;
  background: linear-gradient(to right, rgb(24 22 19) 0%, rgb(24 22 19 / .94) 36%, rgb(24 22 19 / .5) 47%, rgb(24 22 19 / .16) 54%, rgb(24 22 19 / 0) 60%); }
.u-clone, .u-clone * { transition: none !important; animation: none !important; }
/* the band grows from the crease (cell 64 of its own coordinates) to both sides with the hinge */
.u-bandrow .u-band { transform-origin: calc(var(--cell, 7px) * 64) 0; }

/* system strip on the right edge of either screen (HIG: island, clock, status stand vertically there). It stands in the
   screen's safe area, clear of the round corner (as on the device, where the clock sits under the island well inside the
   corner): the inner screen and the tabletop keep an empty spot where the outer screen has its island, so the clock and
   记录 are at the same height on every screen and do not move when the spread is reported (3.6) */
.u-sysrail { position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 16px; z-index: 5; pointer-events: none; }
.u-island { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #111; margin-bottom: 4px; }
.u-island.is-spot { background: none; }
.u-clock { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.u-wifi { font-size: 15px; line-height: 1; color: var(--ink-2); margin-top: -2px; }
.u-pill { margin-top: 10px; width: 40px; padding: 8px 0; border: 0; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 4px 10px -8px #0004; font: inherit; font-size: 12px; line-height: 1.25; color: var(--ink-3); text-align: center; cursor: pointer; pointer-events: auto; }
/* 记录 opens 我的回应记录 (D's header tool, on the strip that stays put on every screen) */
.u-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.u-cam { position: absolute; top: 10px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #1a1a1a; opacity: .85; z-index: 6; }

/* every screen pins its head; under it, its list scrolls on its own (duo-motion.md 4.5). Where they meet, a paper fade and a
   hairline at 6 % ink, only while something has slid under the head; no shadow. A drag that starts on a pinned head (or the
   bar at the foot, or the resting panel) is not handed to the page: the lists are the only things that scroll */
.u-pin::after, .u-ohead::after, .u-tpin::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; z-index: 2; pointer-events: none;
  background: linear-gradient(#f6f4ef, #f6f4ef00); box-shadow: inset 0 .6px 0 #17171a0f; opacity: 0; transition: opacity .18s; }
/* the tabletop's lying half has no head: its cards slide under the crease, and the same edge shows there */
.u-table::after { content: ""; position: absolute; left: 0; right: var(--rail); top: var(--half); height: 14px; z-index: 3; pointer-events: none;
  background: linear-gradient(#f6f4ef, #f6f4ef00); box-shadow: inset 0 .6px 0 #17171a0f; opacity: 0; transition: opacity .18s; }
.u-book.is-scrolled > .u-pin::after, .u-outer.is-scrolled .u-ohead::after, .u-table.is-tscrolled .u-tpin::after, .u-table.is-bscrolled::after { opacity: 1; }
.u-pin, .u-ohead, .u-ofold, .u-tpin, .u-fold3d, .u-pill { touch-action: none; }

/* closed: D on the outer screen, its head pinned over its list (in D the head scrolls with the cards: there it is one screen
   and nothing else; here the outer screen is the book's right page, whose head is pinned) */
.u-ocol { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; }
.u-ocol > .d-head { position: relative; z-index: 2; flex: none; margin: 0 12px; }
.u-ocol .d-scroll { padding-top: 0; }
.u-outer .d-card [data-part], .u-outer .d-since { will-change: auto; }

/* the hinge handle: a short bar on the crease, there to be dragged; no wider than the folding region, so it never covers
   the edge of a half beside it */
.u-grip { position: absolute; top: 50%; z-index: 9; width: 24px; height: 88px; margin: -44px 0 0 -12px; border: 0; padding: 0; background: none; cursor: ew-resize; touch-action: none; }
.u-grip > i { position: absolute; left: 50%; top: 26px; bottom: 26px; width: 4px; margin-left: -2px; border-radius: 2px; background: #c6c1b6; transition: background-color .15s, width .15s, margin .15s; }
.u-grip:hover > i, .u-grip:focus-visible > i, .u-grip.is-dragging > i { background: var(--ink-2); width: 6px; margin-left: -3px; }
.u-grip:focus-visible { outline: none; }
.u-grip-read { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-3); opacity: 0; transition: opacity .15s; white-space: nowrap; }
.u-grip:hover .u-grip-read, .u-grip.is-dragging .u-grip-read, .u-grip:focus-visible .u-grip-read { opacity: 1; }
.u-device.is-table .u-grip { display: none; }

/* book: two pages; one stripe per waiting item crosses the crease, its halves one row, one height. The pinned head (both
   pages' heads, the band, its account) stands over the stripes; the stripes scroll under it, both pages as one */
.u-book { position: absolute; inset: 0; display: flex; flex-direction: column; }
.u-pin { position: relative; z-index: 2; flex: none; display: grid; grid-template-columns: var(--pw) var(--pw); grid-auto-rows: min-content; row-gap: 8px; padding-top: 14px; }
.u-iscroll { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; overflow-anchor: none; }
.u-iscroll::-webkit-scrollbar { display: none; }
/* the copy on the panel: its stripes are moved by a transform inside the scroll region's clip (a copy keeps no scroll) */
.u-clone .u-iscroll { overflow: hidden; }
.u-spread { position: relative; display: grid; grid-template-columns: var(--pw) var(--pw); grid-auto-rows: min-content; align-content: start; row-gap: 8px; padding: 8px 0 28px; }
:is(.u-pin, .u-spread) > .u-cl { grid-column: 1; margin: 0 calc(var(--gap) / 2) 0 var(--gut); min-width: 0; transition: margin .2s var(--ease); }
:is(.u-pin, .u-spread) > .u-cr { grid-column: 2; margin: 0 calc(var(--rail) + 4px) 0 calc(var(--gap) / 2); min-width: 0; transition: margin .2s var(--ease); }
/* half-folded: the crease region widens (ReservedRegion .division); the halves step away, nothing re-flows across */
.u-book.is-half { --gap: 48px; }
:is(.u-pin, .u-spread) > [data-key], .u-zone > [data-key], .u-tpin > [data-key], .u-tscroll > [data-key], .u-bot > [data-key] { position: relative; }
/* a ghost (a leaf on its way out, or the old face of one that changes) is placed against its whole list, not a column */
:is(.u-pin, .u-spread, .u-tscroll, .u-bot) > .d-ghost { grid-column: auto !important; grid-row: auto !important; }
.u-head { padding: 0 4px 2px; }
.u-head .d-date { font-size: 13px; }
.u-hero { margin: 2px 0 2px; font-size: 27px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.u-hero small { font-size: 27px; font-weight: 800; margin-left: 6px; letter-spacing: -.01em; }
.u-hero-2 { margin: 0 0 2px; font-size: 19px; line-height: 1.3; font-weight: 750; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.u-hero-2 small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-left: 8px; }
.u-sub { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.u-sub b { color: var(--ink); font-weight: 650; }
.u-quiet { color: var(--ink-3); }
.u-quiet b { color: var(--ink-2); font-weight: 600; }
.u-quiet small { margin-left: 6px; }
/* the left page's head: the round in numbers, and its inputs as ticks along the round's window (tall and ink: taken into
   a card on the right page; mid: the Agent's side; low and light: folded) */
.u-ledger { padding: 19px 4px 2px; box-sizing: border-box; }
.u-ledger .u-hero-2 { margin: 2px 0 0; font-size: 21px; line-height: 1.25; color: var(--ink); }
.u-ticks { display: block; margin: 7px 0 5px; overflow: visible; }
.u-ticks .is-you { fill: var(--ink); }
.u-ticks .is-agent { fill: #b3aea2; }
.u-ticks .is-fold { fill: #d8d4ca; }
/* the band's account under it, either side of the crease: what is left of it adds up with what is right of it to the budget */
.u-pin > .u-acct { grid-column: 1 / 3; display: grid; grid-template-columns: var(--pw) var(--pw); margin-top: -5px; font-size: 11.5px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; will-change: opacity; }
.u-acct > .is-l { text-align: right; padding-right: calc(var(--gap) / 2 + 5px); overflow: hidden; text-overflow: ellipsis; }
.u-acct > .is-r { padding-left: calc(var(--gap) / 2 + 5px); padding-right: calc(var(--rail) + 4px); overflow: hidden; text-overflow: ellipsis; }
.u-acct b { color: var(--ink-2); font-weight: 650; }

/* the 64-cell band, one page wide, its boundary on the crease (the one line the crease gets) */
.u-bandrow, .u-tband { position: relative; height: 14px; }
.u-pin > .u-bandrow { grid-column: 1 / 3; }
.u-band { position: absolute; top: 0; left: 0; height: 14px; display: block; }
.u-band > i { position: absolute; left: 0; top: 5px; display: block; width: var(--cell, 7px); height: 4px; border-radius: 1px; transform-origin: 0 0; background: #c3beb3; transition: opacity .15s; }
.u-band > i.is-you { background: var(--ink); }
.u-band > i.is-agent { background: #c3beb3; }
.u-band > i.is-blank { background: none; box-shadow: inset 0 0 0 1px #cfcabf; }
.u-band > i.is-hollow { background: none; box-shadow: inset 0 0 0 1.2px var(--ink); }
.u-band > i.is-lit { background: var(--red); box-shadow: none; }
.u-tick { position: absolute; top: 0; width: 1px; height: 14px; background: var(--ink); }
.u-bandrow .u-tick { left: calc(var(--pw) - .5px); }

/* the two halves of one card */
.u-half { position: relative; box-sizing: border-box; border-radius: 20px; padding: 13px 15px 10px; display: flex; flex-direction: column; min-width: 0; cursor: pointer; text-align: left; }
.u-half.is-left { background: var(--u-left); box-shadow: 0 0 0 1px var(--line); }
.u-half.is-right { background: var(--card); box-shadow: 0 1px 0 #00000008, 0 8px 20px -14px #0004; }
.u-half.is-right.is-answered { background: var(--u-left); box-shadow: 0 0 0 1px var(--line); cursor: default; }
/* answered: D's answered card (d.css .d-card.is-answered), a title line and the receipt, as low as that; the stripe (the
   tabletop's card) shrinks to it, and its group beside it folds to one line as tall (duo-motion.md 3.4) */
.u-half.is-right.is-answered { padding: 9px 12px 9px 15px; }
.u-half.is-answered .d-kicker { margin: 0; }
.u-half.is-answered .d-receipt { margin-top: 4px; }
.u-half:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink); }
.u-half h3 { margin: 6px 0 0; font-size: 17.5px; line-height: 1.38; font-weight: 750; letter-spacing: -.005em; text-wrap: pretty; }
.u-half.is-lead h3 { font-size: 19.5px; line-height: 1.34; }
.u-half > h3:first-child { margin-top: 0; }
.u-half .d-why:empty { display: none; }
.u-half .d-why:empty + h3 { margin-top: 0; }
/* a card's group of inputs on the left page. Its rows have fixed heights (duo-motion.mjs FEED: pad, head, sub, gapTop,
   pitch), so the line into the card can be drawn from where each input line is without measuring the page */
.u-half.is-feed { padding: 12px 14px 10px; }
.u-frow { display: flex; align-items: center; gap: 8px; height: 20px; }
.u-fhead { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 650; color: var(--ink); }
.u-fhead > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-frow .d-why { flex-shrink: 0; flex-wrap: nowrap; min-height: 0; height: 20px; overflow: hidden; }
.u-frow .d-tag.is-share { margin-left: 0; }
.u-fsub { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 18px; margin: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.u-fsub b { color: var(--ink); font-weight: 650; }
.u-flines { margin-top: 6px; padding-right: 24px; }
.u-fl { display: flex; align-items: baseline; gap: 6px; height: 19px; margin: 0; font-size: 11.5px; line-height: 19px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.u-fl time { flex-shrink: 0; width: 33px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.u-fl b { flex-shrink: 0; font-weight: 600; color: var(--ink); }
.u-fl-who { flex-shrink: 1; min-width: 2em; max-width: 8em; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.u-fl-n { flex-shrink: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.u-fl-t { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.u-fl.is-rest { color: var(--ink-3); }
/* answered: the group folds to one line beside your receipt, as tall as it (the row is the receipt's height), its name on
   the receipt's title line; the line into the card is gone */
.u-half.is-feed.is-folded { align-self: stretch; padding: 7px 14px 9px; background: none; }
.u-half.is-folded .u-fhead { flex: none; color: var(--ink-2); font-weight: 600; }
.u-fsum { margin: 1px 0 0; font-size: 11.5px; line-height: 16px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the line from a group into its card: a funnel from each input line's end, then one line over the crease. It grows out of
   the crease with the band (transform-origin on the crease, scaleX with the hinge) and runs on under the card */
.u-link { position: absolute; top: 0; left: calc(100% - 30px); display: block; pointer-events: none; transform-origin: calc(30px + var(--gap) / 2) 0; will-change: transform; }
.u-link svg { display: block; overflow: visible; fill: none; stroke: #8e8b84; stroke-width: 1.1; stroke-linecap: round; }
.u-link svg circle { fill: #8e8b84; stroke: none; }
.u-link svg .is-run { stroke: var(--ink); stroke-width: 1.4; }
.u-link svg .is-rest { stroke-dasharray: 2 2.6; }
.u-link.is-mini { top: 50%; height: 4px; margin-top: -2px; }
.u-link desc { display: none; }
/* where the line meets the card */
.u-socket { position: absolute; left: -4px; width: 7px; height: 7px; margin-top: -3.5px; box-sizing: border-box; border-radius: 50%; background: var(--card); border: 1.5px solid var(--ink); pointer-events: none; z-index: 2; will-change: opacity; }
.u-socket[data-at="mid"] { top: 50%; }
.u-socket[data-at="top"] { top: 0; left: 50%; margin-left: -3.5px; }
.u-tr { display: inline-flex; gap: 6px; align-items: flex-end; }
.u-trend { display: inline-flex; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.u-trend i { width: 4px; background: #d3cec3; border-radius: 1px 1px 0 0; }
.u-trend i.is-now { background: var(--ink); }
.u-trend i.is-zero { background: #e4e0d6; }
.u-trendlabel { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.u-half .d-answer { margin-top: auto; padding-top: 10px; }
.u-half .d-receipt { margin-top: 0; }
.u-half.is-mid { padding: 11px 14px 10px; }
.u-half.is-mid h3 { font-size: 15.5px; line-height: 1.4; margin-top: 5px; }
.u-half.is-mid .d-trace { margin-top: 4px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-half.is-mid .d-btn { min-height: 38px; font-size: 14px; border-radius: 11px; }
.u-half.is-mid .d-answer { padding-top: 8px; }

/* compact stripes: the asks past the first three, unfolded from "还有 N 件"; the left half is one line too */
.u-mini { position: relative; box-sizing: border-box; min-height: 50px; border-radius: 16px; padding: 6px 10px 6px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.u-mini.is-left { background: var(--u-left); box-shadow: 0 0 0 1px var(--line); }
.u-mini.is-right { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.u-mini.is-right.is-done { background: var(--u-left); }
.u-mini:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink); }
.u-mini .d-kicker { margin: 0; flex: 1; font-size: 12.5px; color: var(--ink); font-weight: 600; min-width: 0; }
.u-mini .u-share { font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-mini .u-in { flex: none; min-width: 0; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.u-mini-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.u-mini h3 { margin: 0; font-size: 14px; line-height: 1.38; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-mini .d-tag { flex-shrink: 0; }
.u-mini.is-folded .d-kicker { color: var(--ink-2); }

/* the Agent's page below the stripes; your page says there is nothing else */
.u-zone { display: flex; flex-direction: column; padding-top: 6px; }
.u-zone .d-zone-head { padding: 0 4px; }
.u-zone .d-fold-row { width: 100%; margin-top: 8px; }
.u-note { align-self: start; padding: 12px 4px 0; margin-top: 0; margin-bottom: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
/* grey lines: the inputs into the Agent's side (one per item), and what the round folded away (by disposition and source) */
.u-afeed { padding: 2px 4px 12px; }
.u-folded { padding: 6px 4px 0; display: flex; flex-direction: column; }
.u-afeed > .u-fsub, .u-folded > .u-fsub { display: block; height: auto; line-height: 18px; color: var(--ink-3); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.u-afeed > .u-fsub b, .u-folded > .u-fsub b { color: var(--ink-2); }
.u-fsub.is-gone { margin-top: 12px; }
.u-fold-line { display: flex; align-items: baseline; gap: 6px; box-sizing: border-box; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 11.5px; line-height: 27px; color: var(--ink-3); text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.u-fold-line b { flex-shrink: 0; max-width: 12em; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ink-2); }
.u-fold-line .u-fd { flex-shrink: 0; width: 2.3em; }
.u-fold-line:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.u-fold-line.is-open { color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); padding-left: 7px; }
.u-fold-line.is-gone { cursor: default; }

/* gestures: a press darkens a little at 0.15 s; while one is summarised the rest dim to 70 %; a band run outlines its stripe */
:is(.u-half, .u-mini, .u-bandrow)::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--ink); opacity: 0; transition: opacity .15s; pointer-events: none; }
:is(.u-half, .u-mini, .u-bandrow).is-pressing::before { opacity: .05; }
:is(.u-half, .u-mini, .u-bandrow, .u-ledger) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
:is(.u-pin, .u-spread, .u-zone, .u-tpin, .u-tscroll, .u-bot, .d-cards, .d-rows, .d-known) > [data-key] { transition: opacity .1s; }
.u-device.is-dim :is(.u-pin, .u-spread, .u-zone, .u-tpin, .u-tscroll, .u-bot, .d-cards, .d-rows, .d-known) > [data-key]:not(.is-peeked):not(.is-linked):not(.u-bandrow):not(.u-tband):not(.u-zone) { opacity: .7; transition: opacity .15s; }
.is-linked { outline: 2px solid var(--ink); outline-offset: 2px; }
.u-half.is-open, .u-mini.is-open { box-shadow: 0 0 0 2px var(--ink); }
.u-half.is-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--red); opacity: 0; animation: d-new 1.6s var(--ease) var(--glow-delay, .25s) 1 both; pointer-events: none; }
.u-peek { z-index: 25; }
/* the receipt on its way over the fold to its row of 在办 */
.d-receipt.u-fly { box-sizing: border-box; padding: 7px 10px; margin: 0; border-radius: 14px; background: var(--u-left); box-shadow: 0 0 0 1px var(--line), 0 12px 26px -16px #0006; }
.d-receipt.u-fly [data-rs-undo], .d-receipt.u-fly .d-undo { display: none; }

/* the detail: grows over the left page (book), the outer screen (closed), the top half (tabletop) */
.u-ldetail { position: absolute; z-index: 20; display: flex; flex-direction: column; background: var(--paper); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.u-ldetail .d-detail-bar { padding-top: 8px; }
.u-ldetail .d-detail-actions { padding-bottom: 16px; }
.u-ldetail.is-leaving { pointer-events: none; }
/* a group's originals, in full: who, where, when, the subject and the text */
.u-raws { margin-top: 14px; }
.u-raw small { display: block; }
.u-raw-s { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.u-raw.is-fold { opacity: .7; }
.u-why { min-height: 40px; margin-top: 4px; font-size: 13px; }
.u-detail-box { z-index: 19; }
/* sheets open over the half you answer on: the right page, the outer screen, the bottom half */
.u-sheethost { position: absolute; z-index: 30; overflow: hidden; border-radius: 22px; pointer-events: none; }
.u-sheethost.is-on { pointer-events: auto; }

/* tabletop: the spread turned a quarter; top half stands (look), bottom half lies flat (press); one column per stripe.
   The standing half pins its head (the numbers, the band, what the Agent has in hand); it is one height whatever it says.
   Under it the strip of columns: every column var(--col) wide (duo-motion.mjs TABLE: three fill the screen), the same
   columns for both halves, never set by what is in them; past three the strip runs on to the right and both halves
   scroll sideways together, a column at a time. Each half scrolls up and down on its own: column for column a group stays
   over its card. Groups and cards start at the tops of their halves. */
.u-tmain { position: absolute; left: 0; top: 0; right: var(--rail); bottom: 0; display: flex; flex-direction: column; }
.u-tpin { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 14px var(--tpad) 0; }
.u-tview { position: relative; flex: 1 1 0; min-height: 0; }
.u-tcols { position: absolute; inset: 0; display: grid; grid-template-columns: var(--tw); grid-template-rows: minmax(0, 1fr) var(--bot);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--tpad); }
.u-tcols::-webkit-scrollbar { display: none; }
.u-tsnaps { position: absolute; left: 0; top: 0; width: var(--tw); height: 1px; pointer-events: none; }
.u-tsnaps > i { position: absolute; top: 0; width: var(--col); height: 1px; scroll-snap-align: start; }
.u-tscroll, .u-bot { position: relative; display: grid; grid-template-columns: repeat(var(--n), var(--col)); column-gap: var(--cgap); row-gap: 8px; padding: 0 var(--tpad); box-sizing: border-box; min-height: 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: auto contain; overflow-anchor: none; }
.u-tscroll::-webkit-scrollbar, .u-bot::-webkit-scrollbar { display: none; }
/* 上看下按: the standing half shows what came in, the groups at its foot by the crease, each over its card on the flat half */
.u-tscroll { grid-row: 1; grid-template-rows: 1fr; padding-top: 8px; padding-bottom: 10px; }
.u-bot { grid-row: 2; padding-top: 12px; padding-bottom: 30px; grid-auto-rows: min-content; align-content: start; }
.u-thead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 4px; }
.u-thead-l { flex: 1 1 auto; min-width: 0; }
.u-thead .u-hero, .u-thead .u-hero small { font-size: 30px; white-space: nowrap; }
.u-thead .u-sub { margin-top: 0; }
.u-thead-r { flex: 0 1 auto; min-width: 0; max-width: 52%; text-align: right; }
.u-thead .u-hero-2 { margin-top: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-thead-r .u-hero-2 small { margin-left: 6px; }
/* one line each, never wrapping into the band: a fixed count of lines, so the pinned head keeps its height */
.u-tlines > span { display: block; height: 18.75px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-tband { margin: 4px 4px 2px; }
.u-tscroll > .u-half .u-flines { padding-right: 0; }
.u-table .u-half { padding: 11px 12px 9px; }
.u-table .u-half.is-feed { padding: 12px 12px 10px; }
/* answered, on the tabletop: the folded group at the top of its column, the receipt card at the top of the flat half,
   both their own height (the column keeps its width) */
.u-table .u-half.is-feed.is-folded { align-self: start; padding: 8px 12px 9px; }
.u-table .u-half.is-right.is-answered { align-self: start; }
/* a column is narrow: 撤回 goes up to the title's line, so the receipt's words have the card's width */
.u-table .u-half.is-answered .d-kicker { padding-right: 40px; }
.u-table .u-half.is-answered .d-undo { position: absolute; top: 0; right: 2px; min-height: 34px; }
/* a column is narrow: the item's name on its own line (two at most), the tags under it; the lines drop who sent them */
.u-table .u-frow { flex-direction: column; align-items: flex-start; height: auto; gap: 4px; }
.u-table .u-fhead { flex: none; width: 100%; align-items: flex-start; line-height: 18px; }
.u-table .u-fhead > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.u-table .u-fhead .d-dot, .u-table .u-fhead > i { margin-top: 5px; }
.u-table .u-frow .d-why { height: auto; max-width: 100%; }
.u-table .u-fsub .u-tr { display: none; }
.u-table .u-fl-who { display: none; }
.u-table .u-flines { margin-top: 4px; }
/* the tabletop's lines: from the foot of each group straight down over the crease into the top of its card. They lie in the
   strip (so they go sideways with their columns), apart from both halves' lists, and show only while both are at their
   tops; scrolled away, they and the sockets fade */
.u-tlinks { position: absolute; left: 0; top: 0; width: var(--tw); height: 100%; pointer-events: none; transition: opacity .15s; }
.u-dline { position: absolute; display: block; width: 1.6px; margin-left: -.8px; background: var(--ink); }
.u-bot .u-socket { transition: opacity .15s; }
.u-table.is-apart .u-tlinks, .u-table.is-apart .u-bot .u-socket { opacity: 0; }
/* the strip runs on past an edge of the screen: on that side a paper fade and a hairline (the pinned heads' edge, turned) */
.u-tedge { position: absolute; top: 0; bottom: 0; z-index: 3; width: 18px; pointer-events: none; opacity: 0; transition: opacity .18s; }
.u-tedge.is-r { right: 0; background: linear-gradient(to left, #f6f4ef, #f6f4ef00); box-shadow: inset -.6px 0 0 #17171a0f; }
.u-tedge.is-l { left: 0; background: linear-gradient(to right, #f6f4ef, #f6f4ef00); box-shadow: inset .6px 0 0 #17171a0f; }
.u-table.is-more-r .u-tedge.is-r, .u-table.is-more-l .u-tedge.is-l { opacity: 1; }
/* and a page dot per column at the foot of the flat half (iOS's page dots, under the thumb): ink while it is on the screen.
   Only when there are more columns than the screen holds */
.u-tdots { position: absolute; left: 0; right: 0; bottom: 9px; z-index: 3; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.u-tdots:empty { display: none; }
.u-tdots > i { width: 6px; height: 6px; border-radius: 50%; background: #cfcabf; transition: background-color .18s; }
.u-tdots > i.is-on { background: var(--ink); }
.u-table .d-actions { flex-direction: column; }
.u-table .d-btn { flex: none; width: 100%; }
.u-table .u-half h3 { font-size: 16.5px; }
.u-table .u-half.is-lead h3 { font-size: 19px; }
.u-table .u-mini { min-height: 52px; }
.u-rowsline { margin: 2px 4px 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-trail { position: absolute; right: 0; top: 0; height: var(--half); width: var(--rail); }

/* a narrow window: the rail on top, the device under it */
@media (max-width: 900px) {
  .u-stage { flex-direction: column; gap: 16px; padding: 16px 16px 32px; }
  .u-siderail { position: static; width: auto; max-height: none; }
  .u-area { width: 100%; }
}
@media (max-width: 760px) {
  .variant-duo .u-siderail .d-rail-block.u-postureblock { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .u-half.is-pulse::after { animation: none; }
  .u-spread > .u-cl, .u-spread > .u-cr { transition: none; }
}