/* Raadish: the app at true size, for the phone in the hero and the live
   details. Every screen is drawn at 402 x 874 CSS px, an iPhone 17 Pro in
   points, with iOS's own sizes, and scaled to fit with one transform: 1 px
   here is 1 pt there. Chrome is the system's: SF Pro, standard bars and
   lists, system radii. The brand is the tint, the leaf line under a name and
   the radish. Colours are --a-* and --k-*, written by raadish.js from its
   token table. Carried from the brand sprint (round 5). */

/* ---------- The phone, and its scale ---------- */
.pbox { position: relative; flex: none; width: calc(426px * var(--s)); height: calc(898px * var(--s)); }
.phone { position: absolute; left: 0; top: 0; width: 426px; height: 898px; transform: scale(var(--s)); transform-origin: 0 0; border-radius: 74px; background: #1A1A1C; padding: 12px; box-shadow: inset 0 0 0 1.5px #4A4A4E, inset 0 0 0 4px #121214, 0 1px 0 1px rgba(255, 255, 255, .05), var(--ph-shadow, 0 40px 80px -30px rgba(10, 20, 6, .45)); }
.phone::before { content: ''; position: absolute; left: -3px; top: 168px; width: 4px; height: 34px; border-radius: 2px 0 0 2px; background: #2C2C2F; box-shadow: 0 58px 0 #2C2C2F, 0 0 0 0 transparent; }
.phone::after { content: ''; position: absolute; right: -3px; top: 232px; width: 4px; height: 96px; border-radius: 0 2px 2px 0; background: #2C2C2F; }

/* ---------- The screen ---------- */
.app { position: relative; width: 402px; height: 874px; border-radius: 60px; overflow: hidden; isolation: isolate; background: var(--a-bg); color: var(--a-ink);
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, sans-serif;
  font-family: var(--sf); font-size: 17px; line-height: 22px; letter-spacing: -.43px; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-align: left; }
.app * { box-sizing: border-box; }
.app button { font: inherit; letter-spacing: inherit; color: inherit; }
.app svg { display: block; max-width: none; }
.a-scroll { position: absolute; inset: 0; overflow: hidden; padding: 54px 0 120px; }
.a-scroll > .a-inner { will-change: auto; }
.app.grouped, .app.grouped .a-scroll { background: var(--a-group); }

/* Status bar, 54 pt, and the Dynamic Island */
.a-sb { position: absolute; z-index: 30; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 0; pointer-events: none; color: var(--a-ink); }
.a-sb .t { width: 138px; text-align: center; padding-left: 16px; font: 590 17px/22px var(--sf); letter-spacing: -.43px; padding-top: 2px; }
.a-sb .r { width: 138px; display: flex; align-items: center; justify-content: center; gap: 6px; padding-right: 12px; padding-top: 2px; }
.a-island { position: absolute; z-index: 31; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 19px; background: #000; }
.a-home { position: absolute; z-index: 32; bottom: 8px; left: 50%; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: var(--a-ink); pointer-events: none; }

/* Navigation bar: a 44 pt row of bar buttons, then the 52 pt large title */
.a-nav { height: 44px; display: flex; align-items: center; padding: 0 16px; color: var(--a-acc); font-size: 17px; line-height: 22px; letter-spacing: -.43px; gap: 20px; }
.a-nav .r { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.a-nav .ic { width: 24px; height: 24px; }
.a-lt { height: 52px; padding: 3px 16px 0; font: 700 34px/41px var(--sf); letter-spacing: .37px; color: var(--a-ink); }

/* Icons: SF Symbols, drawn to match at the sizes iOS uses them */
.ic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Day header (section header of the journal) */
.a-dh { display: flex; align-items: baseline; gap: 8px; padding: 18px 16px 6px; }
.a-dh b { font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -.43px; }
.a-dh span { font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: var(--a-mute); }
.a-dh .wx { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-sec { padding: 26px 16px 8px; font: 600 20px/25px var(--sf); letter-spacing: -.45px; color: var(--a-ink); }
.a-sec.sm { padding-top: 22px; }

/* An entry: signifier, the writing, a line of meta, photos. Plain list, hairlines. */
.a-list { position: relative; }
.a-ent { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); padding: 10px 16px 12px 16px; }
.a-ent + .a-ent::before { content: ''; position: absolute; left: 40px; right: 0; top: 0; height: 1px; background: var(--a-sep); }
.a-ent .sig { grid-row: 1; height: 22px; display: flex; align-items: center; color: var(--kc); }
.a-ent .sig svg { width: 15px; height: 15px; overflow: visible; }
.a-ent .tx { grid-column: 2; font-size: 17px; line-height: 22px; letter-spacing: -.43px; overflow-wrap: anywhere; }
.a-ent .meta { grid-column: 2; margin-top: 3px; font-size: 13px; line-height: 18px; letter-spacing: -.08px; color: var(--a-mute); display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.a-ent .meta .kw { color: var(--kc-ink, var(--kc)); font-weight: 600; }
.a-ent .pics { grid-column: 2; margin-top: 10px; }
.a-ent[data-k="note"] { --kc: var(--k-note); } .a-ent[data-k="planted"] { --kc: var(--k-planted); --kc-ink: var(--k-planted-ink); } .a-ent[data-k="finished"] { --kc: var(--k-finished); --kc-ink: var(--k-finished-ink); } .a-ent[data-k="later"] { --kc: var(--k-later); --kc-ink: var(--k-later-ink); }
.a-ent.dim .tx, .a-ent.dim .pics { opacity: .45; }

/* ---------- A name in a line ----------
   A place or a variety named in the writing is the link to its page. It
   wears a leaf line: 1.5 pt, its top 2.5 pt under the baseline, broken round
   descenders by a halo of the surface's own colour. The words stay ink. The
   line is the name's own background, placed off the font's measured
   baseline (--m-base) and x-height (--m-x), so it can draw in left to right
   (--m-w) as a name is finished. */
@property --m-c { syntax: '<color>'; inherits: true; initial-value: transparent; }
:root { --m-base: .9412em; --m-x: .5257em; }
.app { --m-halo: var(--a-bg); }
.app.grouped { --m-halo: var(--a-group); }
.a-ly, .app .h-writing { --m-halo: var(--a-fill2); }
.app .m { --m-c: var(--a-name-line); --m-y: calc(var(--m-base) + .147em); --m-h: .088em;
  background-image: linear-gradient(var(--m-c), var(--m-c)); background-repeat: no-repeat; background-size: var(--m-w, 100%) var(--m-h); background-position: 0 var(--m-y);
  text-shadow: 1.6px 0 var(--m-halo), -1.6px 0 var(--m-halo), 1px .7px var(--m-halo), -1px .7px var(--m-halo), 0 1.2px var(--m-halo);
  border-radius: 1px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-size var(--spr-quick-d, .28s) var(--spr-quick, ease), background-position var(--spr-quick-d, .28s) var(--spr-quick, ease), --m-c .18s ease-out; }
/* drawing in, left to right, as a name is finished */
.app .m.g { --m-w: 0%; transition: background-size var(--spr-grab-d, .5s) var(--spr-grab, ease), background-position var(--spr-quick-d, .28s) var(--spr-quick, ease), --m-c .18s ease-out; }
.app .m.g.on { --m-w: 100%; }
.h-back .m { transition: none; }

/* Photos: gradients standing in for real ones */
.pics { display: grid; gap: 3px; border-radius: 10px; overflow: hidden; }
.pics .pic { border-radius: 0; }
.pics.n1 { grid-template-columns: minmax(0, 1fr); } .pics.n1 .pic { aspect-ratio: 4 / 3; }
.pics.n2 { grid-template-columns: 1fr 1fr; } .pics.n2 .pic { aspect-ratio: 1; }
.pic { position: relative; background-color: #7a8c5a; background-size: cover; overflow: hidden; }
.pic.up { background: var(--a-fill) !important; }
.pic.up::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.pic .ring { position: absolute; inset: 0; display: grid; place-items: center; color: var(--a-mute); }
.pic .ring svg { width: 24px; height: 24px; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* This week last year: a card under today's date */
.a-ly { margin: 2px 16px 6px; border-radius: 12px; background: var(--a-fill2); overflow: hidden; }
.a-ly-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; text-align: left; color: var(--a-ink); cursor: pointer; }
.a-ly-pics { display: flex; flex: none; }
.a-ly-pics .pic { width: 44px; height: 44px; border-radius: 8px; box-shadow: 0 0 0 2px var(--a-fill2); }
.a-ly-pics .pic + .pic { margin-left: -16px; transform: rotate(6deg); }
.a-ly-t { flex: 1; min-width: 0; }
.a-ly-t b { display: block; font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: -.23px; }
.a-ly-t small { display: block; font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: var(--a-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-ly .chev { color: var(--a-tert); transition: transform .35s var(--spr-sheet, ease); }
.a-ly.open .chev { transform: rotate(90deg); }
.a-ly-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--spr-sheet, cubic-bezier(.2, .9, .3, 1)); }
.a-ly.open .a-ly-body { grid-template-rows: 1fr; }
.a-ly-in { overflow: hidden; min-height: 0; }
.a-ly-in .a-dh { padding: 8px 14px 2px; } .a-ly-in .a-ent { padding-left: 14px; padding-right: 14px; } .a-ly-in .a-ent + .a-ent::before { left: 38px; }
.a-ly.open .a-ly-h { box-shadow: inset 0 -1px 0 var(--a-sep); }

/* Inset grouped lists: system rows, 44 pt and up, radius 10 */
.a-grp { margin: 0 16px; border-radius: 10px; background: var(--a-card); overflow: hidden; }
.a-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; background: var(--a-card); font-size: 17px; line-height: 22px; letter-spacing: -.43px; }
.a-row + .a-row::before, .sw + .a-row::before, .a-row + .sw::before, .sw + .sw::before { content: ''; position: absolute; z-index: 2; left: var(--sep-l, 16px); right: 0; top: 0; height: 1px; background: var(--a-sep); }
.a-row .t { flex: 1; min-width: 0; }
.a-row .t small { display: block; font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: var(--a-mute); margin-top: 1px; }
.a-row .v { color: var(--a-mute); white-space: nowrap; }
.a-row .chev { color: var(--a-tert); }
.a-row.sub { padding-left: 46px; }
.a-row .dot { width: 18px; display: flex; justify-content: center; }
.a-row .dot svg { width: 15px; height: 15px; overflow: visible; }
.a-row.tint { color: var(--a-acc); }
.chev { width: 8px; height: 14px; flex: none; }
.a-row.lbl .l { width: 88px; flex: none; color: var(--a-ink); }
.a-row.lbl .v { flex: 1; color: var(--a-ink); text-align: right; overflow: hidden; text-overflow: ellipsis; }

/* Swipe to finish: a standard trailing action */
.sw { position: relative; overflow: hidden; background: var(--a-card); }
.sw .sw-act { position: absolute; inset: 0 0 0 auto; width: 92px; padding-left: 18px; background: var(--k-finished-act); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: -.08px; cursor: pointer; }
.sw .sw-act svg { width: 22px; height: 22px; }
.sw .a-row { transition: transform var(--spr-sheet-d, .45s) var(--spr-sheet, cubic-bezier(.2, .9, .3, 1)); touch-action: pan-y; cursor: grab; }
.sw.open .a-row { transform: translateX(-74px); }

/* The add button: the one control that is not in a bar, for a thumb */
.a-add { position: absolute; z-index: 26; right: 16px; bottom: 101px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--a-acc); color: var(--a-on-acc); box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .12); transition: opacity .2s, transform .3s; }
.a-add svg { width: 24px; height: 24px; }

/* Tab bar: 49 pt with 10 pt labels, over the 34 pt home indicator */
.a-tabs { position: absolute; z-index: 25; left: 0; right: 0; bottom: 0; height: 83px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 8px 34px; background: var(--a-barbg); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); box-shadow: inset 0 1px 0 var(--a-sep); }
.a-tabs span { height: 49px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7px; gap: 3px; color: var(--a-tabmute); }
.a-tabs span svg { width: 28px; height: 26px; }
.a-tabs span b { font: 500 10px/12px var(--sf); letter-spacing: .1px; }
.a-tabs span.on { color: var(--a-acc); }

/* The sheet: drawn in every phone, closed */
.a-scrim { position: absolute; z-index: 39; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .3s; }
.a-sheet { position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; top: var(--sheet-top, 300px); border-radius: 12px 12px 0 0; background: var(--a-sheet); transform: translateY(105%); transition: transform var(--spr-sheet-d, .45s) var(--spr-sheet, cubic-bezier(.2, .9, .3, 1)); overflow: hidden; box-shadow: 0 -1px 0 rgba(0, 0, 0, .04); }

/* Writing: the text view, the caret, the photos */
.a-ta { padding: 6px 16px 10px; font-size: 17px; line-height: 22px; letter-spacing: -.43px; min-height: 52px; color: var(--a-ink); overflow-wrap: anywhere; }
.a-ta.ph { color: var(--a-tert); }
.caret { display: inline-block; width: 2px; height: 21px; margin: 0 -1px 0 1px; border-radius: 1px; background: var(--a-caret); vertical-align: -4px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.a-photos { display: flex; gap: 8px; padding: 2px 16px 14px; }
.a-photos .pic { width: 72px; height: 72px; border-radius: 10px; flex: none; }
.a-photos .add { width: 72px; height: 72px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--a-fill); color: var(--a-acc); }
.a-photos .add svg { width: 26px; height: 26px; }

/* Segmented control: the system's, 32 pt */
.a-seg { position: relative; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; height: 32px; padding: 2px; border-radius: 9px; background: var(--a-segbg); }
.a-seg button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 13px; line-height: 18px; letter-spacing: -.08px; font-weight: 500; color: var(--a-ink); cursor: pointer; transition: background .2s, box-shadow .2s; white-space: nowrap; }
.a-seg button.on { background: var(--a-segon); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
.a-seg button + button::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: var(--a-segsep); }
.a-seg button.on::before, .a-seg button.on + button::before { opacity: 0; }

/* The fields a kind brings */
.a-fld-anim .a-row { animation: fld-in .4s var(--spr-bounce, cubic-bezier(.2, .9, .3, 1)) both; }
.a-fld-anim .a-row:nth-child(2) { animation-delay: .04s; } .a-fld-anim .a-row:nth-child(3) { animation-delay: .08s; }
@keyframes fld-in { from { opacity: 0; transform: translateY(6px); } }

/* The radish, in a slot */
.ms { display: block; }
.ms svg { width: 100%; height: 100%; overflow: visible; }

/* Kind signifiers (SF-sized) */
.sigk { width: 15px; height: 15px; }

/* On dark the radish gets the pea-shoot cut line, as everywhere on dark */
.on-dark .ms-svg .fig { filter: drop-shadow(2.4px 0 0 #C9F14C) drop-shadow(-2.4px 0 0 #C9F14C) drop-shadow(0 2.4px 0 #C9F14C) drop-shadow(0 -2.4px 0 #C9F14C); }

/* Photos: CSS gradients standing in for real ones, one for each place and variety a line can name */
.p-sungold { background-image: radial-gradient(circle at 28% 42%, #ffcb52 0 7%, #f0a52c 7.5% 11%, transparent 12%), radial-gradient(circle at 44% 58%, #ffd466 0 5%, #e8972a 5.5% 9%, transparent 10%), radial-gradient(circle at 62% 36%, #ffc64a 0 6%, #ec9f2a 6.5% 9.5%, transparent 10.5%), radial-gradient(circle at 74% 62%, #ffcf5c 0 5%, #e9982a 5.5% 8%, transparent 9%), radial-gradient(circle at 20% 72%, #d7c35a 0 4%, transparent 5%), radial-gradient(ellipse at 80% 15%, #c9d98a 0 20%, transparent 50%), linear-gradient(165deg, #6f8f3a, #3d6428 60%, #2d4d1f); }
.p-greenhouse { background-image: linear-gradient(transparent 60%, rgba(60, 90, 40, .55) 72%, #3f6a2b 100%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 26px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .35) 0 1.5px, transparent 1.5px 30px), linear-gradient(180deg, #e8eef0, #c9d6d8 55%, #9fb79c); }
.p-garlic { background-image: radial-gradient(ellipse at 36% 54%, #f3ead8 0 11%, #d9c9ad 12% 14%, transparent 15%), radial-gradient(ellipse at 62% 46%, #f6efdf 0 12%, #d6c4a6 13% 15%, transparent 16%), radial-gradient(ellipse at 50% 70%, #ede1c7 0 9%, transparent 11%), radial-gradient(circle at 36% 48%, #b89a6e 0 1.5%, transparent 2%), linear-gradient(170deg, #8b6b47, #5e4630 70%, #40301f); }
.p-pepper { background-image: radial-gradient(ellipse at 32% 55%, #2f7a2c 0 8%, #1f5a1f 9% 13%, transparent 14%), radial-gradient(ellipse at 56% 40%, #3a8f33 0 7%, #23651f 8% 12%, transparent 13%), radial-gradient(ellipse at 70% 66%, #c5342c 0 6%, #8f2420 7% 10%, transparent 11%), radial-gradient(ellipse at 20% 30%, #a3c56a 0 10%, transparent 30%), linear-gradient(160deg, #8fb25a, #4f7a33 55%, #2e4f21); }
.p-roses { background-image: radial-gradient(circle at 30% 40%, #ffd6df 0 5%, #f29ab0 5.5% 10%, #d86a86 10.5% 13%, transparent 14%), radial-gradient(circle at 62% 30%, #ffd9e2 0 4%, #f3a4b8 4.5% 8%, #dc7390 8.5% 11%, transparent 12%), radial-gradient(circle at 70% 68%, #ffe0e7 0 5%, #f1a0b4 5.5% 10%, #d7708b 10.5% 13%, transparent 14%), radial-gradient(circle at 24% 76%, #f7b7c7 0 3%, transparent 5%), linear-gradient(150deg, #7a9a4c, #3f6a2e 60%, #2b4b22); }
.p-frost { background-image: radial-gradient(ellipse at 50% 100%, rgba(80, 100, 70, .5), transparent 55%), repeating-linear-gradient(100deg, rgba(255, 255, 255, .5) 0 3px, transparent 3px 18px), linear-gradient(180deg, #e8f0f6, #c3d3de 50%, #9bb0a0); }
.p-orchard { background-image: radial-gradient(circle at 30% 48%, #d8352e 0 2.5%, transparent 3.2%), radial-gradient(circle at 44% 40%, #e04a3a 0 2.3%, transparent 3%), radial-gradient(circle at 62% 52%, #d33a30 0 2.5%, transparent 3.2%), radial-gradient(circle at 74% 44%, #e55340 0 2%, transparent 2.8%), radial-gradient(ellipse at 50% 55%, #4f7a2f 0 30%, transparent 48%), linear-gradient(180deg, #bcd8ec 0 40%, #7ea25a 41%, #567d38); }
.p-bed { background-image: repeating-linear-gradient(0deg, transparent 0 18px, rgba(120, 180, 70, .75) 18px 24px), linear-gradient(180deg, #6f5238, #4e3826); }
.p-apples { background-image: radial-gradient(circle at 34% 50%, #f9e2b6 0 3%, #d8302a 3.5% 12%, #9d1f1a 12.5% 14%, transparent 15%), radial-gradient(circle at 60% 44%, #fbe8c2 0 3%, #e0413a 3.5% 11%, #a3231c 11.5% 13%, transparent 14%), radial-gradient(circle at 70% 70%, #fbe2b0 0 2.5%, #cf2f2a 3% 10%, #961e19 10.5% 12%, transparent 13%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 22px), linear-gradient(180deg, #b58b5c, #8b6540); }
.p-basil { background-image: radial-gradient(ellipse at 30% 40%, #68b544 0 10%, #3f8c2c 11% 13%, transparent 14%), radial-gradient(ellipse at 60% 30%, #72c04b 0 9%, #3f8c2c 10% 12%, transparent 13%), radial-gradient(ellipse at 50% 68%, #5fae3f 0 11%, #357a27 12% 14%, transparent 15%), radial-gradient(ellipse at 78% 60%, #7cc654 0 8%, transparent 10%), linear-gradient(160deg, #2f5e23, #1f4418); }
.p-shishito { background-image: radial-gradient(ellipse at 32% 48%, #6fb648 0 5%, #3f8b2c 5.5% 8%, transparent 9%), radial-gradient(ellipse at 52% 42%, #75bb4c 0 5%, #3e882b 5.5% 8%, transparent 9%), radial-gradient(ellipse at 66% 58%, #68b245 0 5%, #3b8229 5.5% 8%, transparent 9%), radial-gradient(circle at 50% 52%, #f4f0e6 0 36%, #d9d2c4 37% 39%, transparent 40%), linear-gradient(170deg, #c9b7a2, #a08b74); }
.p-peas { background-image: radial-gradient(circle at 40% 36%, #b9e38f 0 3%, transparent 4%), radial-gradient(circle at 56% 50%, #b9e38f 0 3%, transparent 4%), radial-gradient(circle at 48% 64%, #b9e38f 0 3%, transparent 4%), radial-gradient(ellipse at 50% 50%, #5faa49 0 20%, transparent 30%), linear-gradient(160deg, #8dc26a, #3f7a35); }
.p-zucchini { background-image: radial-gradient(ellipse at 50% 55%, #2f6a2c 0 18%, #1f4a1d 19% 21%, transparent 22%), radial-gradient(ellipse at 30% 28%, #f3d145 0 5%, transparent 6%), linear-gradient(150deg, #8aae57, #4c7b35); }
/* The selected tab's glyph cuts its inner line out of the bar's own colour */
.app[data-mode="light"] { --a-barbg-solid: #F9FAF7; }

/* The action is only there while a row is open or being dragged, so a closed row has no coloured edge */
.sw .sw-act { visibility: hidden; transition: visibility 0s linear .5s; }
.sw.open .sw-act, .sw.drag .sw-act { visibility: visible; transition-delay: 0s; }