/* ============================ Team Home (shared board) ============================ ONE bulletin board, rendered identically inside both the manager (bento) and crew (field) apps. Every class is `th-`-prefixed and every colour is scoped to `.th-root` so it renders the same regardless of the host app's own CSS. 2026-09-05 (Apple-style restyle, the contract Mario approved from the boards): the board's own warm palette is gone. Every --th-* name below is an ALIAS of a --sys-* token from system.css, which both shells load first — nothing in this file types a colour, a shadow or a font family of its own any more. The --th-* names survive because ~60 rules read them; the values live in one place. · cards: white, NO border, --sys-r-card, lifted by --sys-shadow-card · inputs: --sys-fill ground, no border, 16px (see the two long notes below) · the one accent is --sys-accent: the compose button, the Post button, the ticked checkbox, selected chips, links. Green is a STATUS colour only (Got it / acked) and never a button. · chips: 11px / 600, pill, 4px 9px, no letter-spacing, sentence case (the strings team-home.js writes are sentence case too; only the section eyebrows .th-lbl / .th-tag uppercase, and they do it in CSS). · type: the phone's own font (--sys-font); weights on the 400/500/600/700 scale; numbers tabular. Layout — every size, padding, margin and position — is byte-for-byte what it was, apart from the borders the contract removes. */ .th-root{ --th-ink:var(--sys-ink);--th-gray:var(--sys-muted);--th-hair:var(--sys-line);--th-bg:var(--sys-page);--th-card:var(--sys-panel); --th-green:var(--sys-green);--th-green-bg:var(--sys-green-soft);--th-amber:var(--sys-orange);--th-amber-bg:var(--sys-orange-soft); --th-blue:var(--sys-accent);--th-blue-bg:var(--sys-accent-soft);--th-purple:var(--sys-purple);--th-purple-bg:var(--sys-purple-soft); --th-red:var(--sys-red-ink);--th-gold:var(--sys-orange);--th-ease:var(--sys-ease); color:var(--th-ink); font-family:var(--sys-font); font-variant-numeric:tabular-nums; } .th-root *{box-sizing:border-box} /* header row inside the board (title + compose) */ .th-head{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 12px} .th-head h2{font-size:18px;font-weight:var(--sys-w-bold);letter-spacing:-.02em} .th-head .th-sub{font-size:10.5px;color:var(--th-gray);margin-top:1px} /* 44, not 36. This is the New-post button on the Team board, which loads in BOTH shells, so a 36px target was the one sub-44 control left on a live crew screen after wave 2 — found by measuring the rendered app, not by a suite. Radius on the scale (12, not 13) and the button shadow rather than the nav's pill shadow, which is built for a 64px bar and reads as a smudge under a small square. 2026-09-06 wave 2. */ .th-compose{width:var(--sys-tap);height:var(--sys-tap);border-radius:var(--sys-r-control);background:var(--sys-accent);color:#fff; display:grid;place-items:center;font-family:inherit;font-size:21px;cursor:pointer;border:none; box-shadow:var(--sys-shadow-btn);transition:transform .15s var(--th-ease)} .th-compose:active{transform:scale(.92)} /* manager filter strip: the same segmented control as the Houses filters and the crew's Jobs filters (contract section 2) — grey track, white active segment, 44px segments because a segment is a tap target. Scrolls sideways when the filters outgrow the phone, like the other two. */ .th-filters{display:flex;gap:2px;margin:0 0 12px;padding:2px;overflow-x:auto;scrollbar-width:none;background:var(--sys-seg-track);border-radius:var(--sys-r-segment-outer)} .th-filters::-webkit-scrollbar{display:none} /* min-width too (2026-09-17, Apple review W23): "All" measured 40 wide in the manager, 42 in the crew app. */ .th-fc{flex:1 0 auto;min-height:var(--sys-tap);min-width:var(--sys-tap);font-family:inherit;font-weight:var(--sys-w-medium);font-size:var(--sys-t-body);color:var(--th-ink);background:none; border:0;border-radius:var(--sys-r-segment);padding:8px 12px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent} .th-fc.on{background:var(--th-card);color:var(--th-ink);font-weight:var(--sys-w-semibold);box-shadow:var(--sys-shadow-segment)} /* pinned */ .th-pinned{background:var(--th-card);border:0;box-shadow:var(--sys-shadow-card); border-radius:var(--sys-r-card);padding:13px 14px;margin-bottom:10px;position:relative} /* The ⋯ in the top-right corner, where every other post has it (UI-035). The pinned card has no head row, so the button sat in the flow at the top-left, alone on a line above the tag. Still the positioning box of its own ::after reach; the words keep clear of it. */ .th-pinned > .th-dots{position:absolute;top:8px;right:10px;margin:0} .th-pinned > .th-dots ~ .th-tag,.th-pinned > .th-dots ~ h3{padding-right:30px} /* Section eyebrows stay uppercase — in CSS, so the strings team-home.js writes are sentence case (chips must never be shouted; a label may be). */ .th-pinned .th-tag{font-size:9px;font-weight:var(--sys-w-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--th-gold)} .th-pinned h3{font-size:13px;font-weight:var(--sys-w-semibold);margin-top:5px} .th-pinned p{font-size:11.5px;color:var(--th-gray);line-height:1.5;margin-top:3px;white-space:pre-wrap} /* upcoming strip */ .th-lbl{font-size:10px;font-weight:var(--sys-w-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--th-gray);margin:14px 4px 8px} .th-up{background:var(--th-card);border:0;box-shadow:var(--sys-shadow-card);border-radius:var(--sys-r-card);overflow:hidden;margin-bottom:4px} /* `border:0` FIRST, then the hairline: the old rule wrote the shorthand after the separator and silently erased it, so the strip's rows had no divider at all. */ .th-uprow{display:flex;align-items:center;gap:9px;padding:10.5px 13px;border:0;border-bottom:1px solid var(--th-hair); cursor:pointer;font-family:inherit;font-size:12px;font-weight:var(--sys-w-medium);width:100%;background:none;text-align:left;color:inherit} .th-uprow:last-child{border-bottom:none} .th-uprow .th-d{font-size:10px;font-weight:var(--sys-w-bold);color:var(--th-gray);width:42px;flex:none} .th-uprow .th-t{font-size:var(--sys-t-caption);font-weight:var(--sys-w-semibold);letter-spacing:0;text-transform:none;border-radius:var(--sys-r-pill);padding:4px 9px;flex:none} .th-uprow .th-t.s{color:var(--th-blue);background:var(--th-blue-bg)} .th-uprow .th-t.p{color:var(--th-amber);background:var(--th-amber-bg)} .th-uprow .th-addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Tap-to-copy, so it is an action and wears the accent — green is for status. */ .th-uprow .th-lock{flex:none;font-size:10px;font-weight:var(--sys-w-bold);color:var(--th-blue);background:var(--th-blue-bg);border-radius:var(--sys-r-pill);padding:3px 8px;white-space:nowrap} .th-uprow .th-lock:active{opacity:.55} .th-uprow .th-go{margin-left:auto;color:var(--sys-faint);flex:none} /* feed cards */ .th-post{background:var(--th-card);border:0;box-shadow:var(--sys-shadow-card);border-radius:var(--sys-r-card);padding:13px 14px;margin-bottom:10px;position:relative} .th-phead{display:flex;align-items:center;gap:8px;margin-bottom:8px} .th-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:var(--sys-w-bold);color:#fff;flex:none} .th-pwho{font-size:12px;font-weight:var(--sys-w-semibold)} .th-pwhen{font-size:10px;color:var(--th-gray)} /* The post's ⋯ keeps the right edge the kind tag used to push it to (the tag went on 2026-10-04, Mario's text pass). */ .th-phead > .th-dots{margin-left:auto} .th-post h3{font-size:13.5px;font-weight:var(--sys-w-semibold);letter-spacing:-.01em} .th-post > p{font-size:12px;color:var(--th-ink);line-height:1.55;margin-top:4px;white-space:pre-wrap;word-break:break-word} /* got it / acks */ .th-ack{display:flex;align-items:center;gap:8px;margin-top:11px} /* "Got it" is a secondary button (white, the accent, the button shadow — the same object as the crew's .secondary-btn and bento's .btn-s); once tapped it is a STATUS and wears the green pair. */ /* 44 tall (2026-09-17, Apple review W23): it measured 62x27, and this is the button the whole crew taps on the morning announcement, gloved or in the truck. The manager's ack chip below is the same row in the other app, so it grows with it. */ .th-gotit{font-family:inherit;font-weight:var(--sys-w-semibold);font-size:var(--sys-t-caption);border:0;background:var(--th-card);box-shadow:var(--sys-shadow-btn);border-radius:var(--sys-r-pill); padding:7px 13px;min-height:var(--sys-tap);cursor:pointer;transition:all .2s var(--th-ease);color:var(--sys-accent)} .th-gotit.on{background:var(--th-green-bg);box-shadow:none;color:var(--th-green)} .th-acks{display:flex;align-items:center;margin-left:auto} /* The count only (UI-034, crew half): the faces in this row are spans too, and this rule beat .th-av's white initials and pushed each face 12px off the next — gray initials on a coloured disc, the manager chip's bug in the crew's "Got it?" row. */ .th-acks span:not(.th-av){font-size:10px;color:var(--th-gray);font-weight:var(--sys-w-semibold);margin-left:12px} /* manager ack chip (tap to see who) */ .th-ackchip{display:flex;align-items:center;min-height:var(--sys-tap);background:var(--sys-fill-2);border-radius:var(--sys-r-pill);padding:5px 12px 5px 6px;cursor:pointer;border:none;margin-left:auto;font-family:inherit;text-align:left} /* The words only (UI-034): the avatars in the chip are spans too, and this rule beat .th-av's white initials, so a face was ink on its own ink-coloured disc. */ .th-ackchip span:not(.th-av){font-size:10.5px;color:var(--th-ink);font-weight:var(--sys-w-semibold);margin-left:12px} /* Who acknowledged, by first name, where the faces were (2026-10-07). After the two rules above on purpose: the same weight of selector, so these win by order. In ink at 12px, the size the board writes a name (.th-pwho); a long list wraps inside the chip instead of running off the card. The chip's 6px left edge was for a round face — a word wants the 12px its right edge has. On a 320 phone the names and the count both wrap, and a button centres wrapped lines: the chip is left-aligned so "tap to see" does not float in the middle of its line. */ .th-acks span.th-ackwho,.th-ackchip span.th-ackwho{font-size:var(--sys-t-small);color:var(--th-ink);font-weight:var(--sys-w-semibold);margin-left:0;min-width:0;overflow-wrap:anywhere;text-align:left} .th-ackchip span.th-ackwho{margin-left:6px} /* task */ .th-titem{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:12.5px;font-weight:var(--sys-w-medium)} /* The tick: the pull sheet's 24px circle (system.css .sys-tick) — faint ring at rest, the accent with a white CSS check when done. The ✓ glyph team-home.js writes is for screen readers and is never painted (font-size 0). */ .th-chk{width:24px;height:24px;box-sizing:border-box;border-radius:var(--sys-r-pill);border:1.5px solid var(--sys-faint);flex:none;position:relative; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;font-size:0;line-height:1;color:#fff;transition:background .12s ease,border-color .12s ease;background:transparent} /* The tick paints 24 and takes a thumb at 44 (2026-09-17, Apple review W23): ::before, because ::after is the check mark. -12, not -10: the inset is measured from inside the 1.5px ring, and -10 came out 42 wide when measured. */ .th-chk::before{content:"";position:absolute;inset:-12px} /* The reach ends 10.5px past the circle and the row pads 8, so it pokes 2.5px out of the row's bottom (2026-09-17, W23 repair). On a task with no message and no due date the next thing is "Comment", whose 44 starts right there: a touch on its top edge ticked the task done for the whole team instead of opening comments. 4px of air keeps the reach out of Comment's box. Only that pairing needs it — with a message or a due date the untappable .th-tmeta line sits in between. */ .th-titem + .th-cline{margin-top:4px} .th-chk.on{background:var(--sys-accent);border-color:var(--sys-accent)} .th-chk.on::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .th-titem.done{color:var(--th-gray);text-decoration:line-through} .th-tmeta{font-size:10px;color:var(--th-gray);margin-top:6px} /* link preview */ .th-lprev{display:flex;gap:10px;border:1px solid var(--th-hair);border-radius:13px;overflow:hidden;margin-top:9px;cursor:pointer;text-decoration:none;color:inherit;align-items:stretch} .th-lprev .th-li{padding:9px 10px;min-width:0} .th-lprev .th-lt{font-size:11.5px;font-weight:var(--sys-w-semibold);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .th-lprev .th-lu{font-size:9.5px;color:var(--th-gray);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* photo grid */ .th-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:9px;border-radius:13px;overflow:hidden} .th-pgrid.one{grid-template-columns:1fr} .th-pgrid img{width:100%;height:110px;object-fit:cover;display:block;cursor:pointer;background:var(--sys-fill-2)} .th-pgrid .th-more{position:relative} .th-pgrid .th-more::after{content:attr(data-more);position:absolute;inset:0;background:var(--sys-scrim); color:#fff;display:grid;place-items:center;font-size:16px;font-weight:var(--sys-w-bold)} .th-pgrid [data-th-photo]{cursor:pointer} /* The photo viewer (UI-023): every photo of the post at full width, in the board's sheet. The scroll margin keeps the one tapped from starting under the sticky head. */ .th-vimg{display:block;width:100%;height:auto;border-radius:var(--sys-r-control);margin-top:8px;background:var(--sys-fill-2);scroll-margin-top:64px} /* comments */ /* "Comment" and its × were 53x13 and 11x13 (2026-09-17, Apple review W23). The line takes the 10px gap it used to sit below into its own 44, so the words move about as far as the target grows; padding stays 0, because padding alone only reached 38. The × deletes somebody's words and now asks first (team-home.js). */ .th-cline{font-family:inherit;font-size:var(--sys-t-caption);color:var(--th-gray);font-weight:var(--sys-w-semibold);margin-top:0;min-height:var(--sys-tap);cursor:pointer;background:none;border:none;padding:0} .th-comments{margin-top:8px;border-top:1px solid var(--th-hair);padding-top:9px;display:none} .th-comments.open{display:block} .th-cmt{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start} .th-cmt .th-av{width:20px;height:20px;font-size:8.5px} .th-cmt .th-cb{background:var(--sys-fill);border-radius:4px 12px 12px 12px;padding:6px 10px;position:relative;min-width:0} .th-cmt .th-cw{font-size:10.5px;font-weight:var(--sys-w-semibold)} .th-cmt .th-ct{font-size:11.5px;color:var(--th-ink);line-height:1.45;white-space:pre-wrap;word-break:break-word} .th-cmt .th-cdel{margin-left:auto;min-width:var(--sys-tap);min-height:var(--sys-tap);font-family:inherit;font-size:var(--sys-t-caption);color:var(--sys-faint);background:none;border:none;cursor:pointer;padding:0 2px;align-self:center} .th-cinput{display:flex;gap:7px;margin-top:4px} /* 16px, and it is not a style choice — this row grew by about 4px because of it. In Safari and the home-screen PWA a field under 16px zooms the page in when it takes focus and does NOT zoom back out; at 11.5px, adding a comment to a post there left the board zoomed in. 2026-09-17: this used to say no shell pins the zoom. The App Store app does, on purpose: native-enhance.js (0a) rewrites the viewport to maximum-scale=1, user-scalable=no, so nobody pinches there. The 16px floor stays because the same board runs in Safari and the PWA (system.css section 4). The existing guard could not see this: it looks for `font-size:` and this rule used to write the weight/size/family `font:` shorthand, which is also why the same trap was sitting in .th-fld below. A field has one size and it is this one. Longhands now, so the guard can read it and the family can be inherited. */ .th-cinput input{flex:1;min-height:var(--sys-tap);box-sizing:border-box;border:0;border-radius:var(--sys-r-pill);padding:8px 13px;font-family:inherit;font-weight:var(--sys-w-regular);font-size:var(--sys-t-field);outline:none;background:var(--sys-fill);color:var(--th-ink)} .th-cinput input::placeholder{color:var(--sys-placeholder)} .th-cinput input:focus{box-shadow:0 0 0 2px var(--sys-accent)} .th-cinput button{border:none;background:var(--sys-accent);color:#fff;border-radius:var(--sys-r-pill);padding:0 14px;font-family:inherit;font-weight:var(--sys-w-semibold);font-size:var(--sys-t-caption);cursor:pointer} /* manager per-post ⋯ menu */ /* ⋯ paints 26 and takes a thumb at 44 (2026-09-17, Apple review W23). An expander and not a 44px box on purpose: a 44 box makes every card head 18px taller in both apps AND puts the bottom of the button under the menu it opens (top:42px), so a second tap to close it lands on the first item — for a crew member's own post with nothing to edit, that item is Delete. The 9px it reaches out stays inside the card's 13/14px padding and short of the type chip 12px to its left. */ .th-dots{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:var(--th-gray);cursor:pointer;font-family:inherit;font-weight:var(--sys-w-bold);letter-spacing:1px;background:none;border:none;margin-left:4px;position:relative} .th-dots::after{content:"";position:absolute;inset:-9px} /* top 50, not 42 (2026-09-17, Apple review W23): the ⋯ reaches 9px below its painted 26 (13 + 26 + 9 = 48), and at 42 the open menu sat over that reach, so a tap meant to close it landed on the first item — Delete, on a post with nothing to edit. */ .th-menu{position:absolute;right:12px;top:50px;background:var(--th-card);border:0; border-radius:14px;box-shadow:var(--sys-shadow-sheet);z-index:5;display:none;min-width:160px;overflow:hidden} .th-menu.open{display:block} .th-menu button{display:block;width:100%;min-height:var(--sys-tap);text-align:left;border:none;background:none;font-family:inherit;font-weight:var(--sys-w-medium);font-size:var(--sys-t-small);padding:11px 15px;cursor:pointer;color:var(--th-ink)} .th-menu button:active{background:var(--sys-fill-2)} .th-menu button.danger{color:var(--th-red)} .th-menu .th-sep{height:1px;background:var(--th-hair)} /* empty state */ .th-empty{text-align:center;color:var(--th-gray);padding:34px 20px;background:var(--th-card);border:0;box-shadow:var(--sys-shadow-card);border-radius:var(--sys-r-card)} /* THE EMPTY BOARD, SLIM: one row that opens the composer (compactEmpty, both homes). Its rule used to live in employee-field-app.css, so when the manager's home went slim on 2026-09-29 the same button arrived there with no style at all — a grey browser button with a border, on the first screen he opens. Drawn once, here, for both. A block, not a flex row: the words are one sentence and wrap as one; as flex children "Post to the team" and the rest wrapped in two columns. */ .th-slim{display:block;width:100%;margin-top:14px;padding:13px 17px;min-height:var(--sys-tap);border:0;border-radius:var(--sys-r-pill); background:var(--th-card);box-shadow:var(--sys-shadow-card);color:var(--th-gray);font:inherit;font-size:var(--sys-t-lead);font-weight:var(--sys-w-medium); line-height:1.3;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent} .th-slim b{color:var(--th-ink);font-weight:var(--sys-w-semibold)} .th-empty .th-e{font-size:26px} .th-empty .th-et{font-size:13px;font-weight:var(--sys-w-semibold);color:var(--th-ink);margin-top:8px} .th-empty .th-ed{font-size:11.5px;margin-top:3px;line-height:1.5} /* ---------- sheets (composer + ack detail) ---------- */ .th-scrim{position:fixed;inset:0;background:var(--sys-scrim);z-index:1200;opacity:0;pointer-events:none;transition:opacity .25s} .th-scrim.on{opacity:1;pointer-events:auto} /* On the system's tokens, and nothing moves at rest: --sys-dock-bottom is 0px, --sys-kb-view-h is 100dvh and --sys-safe-b is the same env() this rule spelled out by hand. What changes is what happens when the keyboard opens. This is the composer — the longest thing anybody types on this board — and it is docked to the bottom edge, so the keyboard used to cover the Post button and the bottom of the textarea with it. system.css redefines all three names in ONE block, so the sheet now rises AND is squeezed to fit, with no listener of its own. Two manager modules used to do this in JavaScript, each with its own visualViewport listener and its own iPad bail-out; this is the rule that replaced them. The env() fallbacks are not decoration: this stylesheet is loaded by two shells and it must render identically in a third that has not adopted system.css yet. dvh, never vh or svh, for the reason written below. */ .th-sheet{position:fixed;bottom:var(--sys-dock-bottom, 0px);left:50%;transform:translate(-50%,105%);width:min(460px,100vw);background:var(--th-card); border-radius:var(--sys-r-sheet) var(--sys-r-sheet) 0 0;box-shadow:var(--sys-shadow-sheet);z-index:1210;padding:10px 18px calc(20px + var(--sys-safe-b, env(safe-area-inset-bottom))); transition:transform .35s var(--th-ease);max-height:min(88dvh, var(--sys-kb-view-h, 100dvh));overflow-y:auto} /* dvh, never vh or svh, on anything that rises from the bottom edge. vh is the LARGE viewport: on iOS Safari it is the height with the browser chrome collapsed, so a sheet sized in vh is taller than the glass whenever the chrome is showing, and whatever sits at the bottom of it — here, the Post button — goes off the screen. svh is worse in the other direction: inside this app's WKWebView (ios.contentInset "always") svh reports the FULL webview height while the visible viewport is up to 96px shorter. dvh is the only one that tracked the real viewport in every state measured on the device. Same change the crew shell and the manager drawer already made; this sheet was missed because 88 is under the 90% threshold the old scan used. */ .th-sheet.on{transform:translate(-50%,0)} /* The other half of the sheet's bottom padding (2026-09-17): the base rule pays the home indicator; while the shell has already lifted the page above it (html.ni-bottom, public/native-inset.js) the inset is dropped, so it is paid once, not twice. The composer's own padding-bottom:0 (#th-composer, below) still wins over this. */ html.ni-bottom .th-sheet{padding-bottom:20px} .th-grab{width:38px;height:4px;border-radius:3px;background:var(--sys-track);margin:4px auto 14px} .th-sheet h2{font-size:15px;font-weight:var(--sys-w-bold);letter-spacing:-.02em;margin-bottom:12px} /* The sheet's head carries its close control, and it is sticky for the same reason the manager's Settings header is: the sheet is its own scroller, and with the keyboard up it is squeezed to the visible glass, so a control anywhere else ends up scrolled away or under the keyboard. The negative margins cancel the sheet's own padding so the head's ground covers the fields sliding under it. */ .th-shead{position:sticky;top:-10px;z-index:var(--sys-z-raised);margin:-10px -18px 6px;padding:10px 18px 0;background:var(--th-card)} .th-shead .th-grab{margin-bottom:6px} .th-shrow{display:flex;align-items:center;gap:8px} .th-shrow h2{flex:1;min-width:0;margin:0} .th-dismiss{flex:none;margin-right:-8px} .th-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px} .th-type{border:1.5px solid var(--th-hair);border-radius:15px;padding:13px;cursor:pointer;transition:all .15s var(--th-ease);text-align:left;background:var(--th-card);font-family:inherit;color:inherit} .th-type.on{border-color:var(--sys-accent);background:var(--sys-accent-soft)} .th-type .th-tn{font-size:12px;font-weight:var(--sys-w-semibold);margin-top:5px} .th-fld{margin-bottom:10px} .th-fld label{display:block;font-size:10px;font-weight:var(--sys-w-semibold);letter-spacing:.08em;color:var(--th-gray);margin-bottom:5px} /* 16px, same reason as .th-cinput input above: this is the composer, the longest thing anybody types on this board, and at 13px it zoomed the whole app in on the first keystroke and stayed there. */ .th-fld input,.th-fld textarea{width:100%;min-height:var(--sys-tap);box-sizing:border-box;border:0;border-radius:var(--sys-r-control);padding:11px 13px;font-family:inherit;font-weight:var(--sys-w-regular);font-size:var(--sys-t-field);outline:none;background:var(--sys-fill);color:var(--th-ink)} .th-fld input::placeholder,.th-fld textarea::placeholder{color:var(--sys-placeholder)} .th-fld input:focus,.th-fld textarea:focus{box-shadow:0 0 0 2px var(--sys-accent)} .th-fld textarea{min-height:74px;resize:vertical} /* Rows 20 apart, columns still 7 (2026-09-17, W23 repair): a picked photo's × reaches 18px above its thumbnail (below). At a 7px row gap, once the thumbnails wrapped (4 photos at 375 wide, 5 at 390) the × under the ＋ tile covered the tile's bottom-right corner: a touch meant to add a photo silently removed one, and no picker opened. 20 > 18 keeps both targets whole. One row of photos looks exactly as before. */ .th-photorow{display:flex;gap:20px 7px;flex-wrap:wrap} .th-addph{width:64px;height:64px;border:1.5px dashed var(--sys-faint);border-radius:13px;display:grid;place-items:center;color:var(--th-gray);font-family:inherit;font-size:20px;cursor:pointer;flex:none;background:none} /* The ＋ tile is a