/* Pakratt, rounds 3 and 4: app pieces added on top of round 2's ios.css.
   Source file: pt(N) becomes calc(N * var(--pt)) when built. */

/* ---------- Plan: the sectioned list ---------- */
.p-grp { position: relative; margin: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); padding: 0 calc(14 * var(--pt)) calc(2 * var(--pt)); border-radius: calc(20 * var(--pt)); background: var(--pk-card); box-shadow: var(--pk-shadow-card); }
.p-grp.headless { padding-top: calc(2 * var(--pt)); }
.p-grp.dim { opacity: .45; }
.p-grp.focus { box-shadow: 0 0 0 calc(1.6 * var(--pt)) color-mix(in srgb, var(--pk-accent) 55%, transparent), var(--pk-shadow-card); }
.p-hd { display: flex; align-items: center; gap: calc(8 * var(--pt)); min-height: calc(50 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.02em; }
.p-hd .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-ct { margin-left: auto; font-size: calc(15 * var(--pt)); font-weight: 400; color: var(--pk-text-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.p-more { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); margin-right: calc(-6 * var(--pt)); border-radius: 50%; display: grid; place-items: center; color: var(--pk-text-2); flex: none; }
.p-more svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.p-more.on { background: var(--pk-bg-2); color: var(--pk-text); }
.p-av { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff8ee; font-size: calc(12 * var(--pt)); font-weight: 700; letter-spacing: 0; }
.p-av svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.p-av.sm { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); font-size: calc(10.5 * var(--pt)); }
.p-av.sm svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.p-chip { display: inline-flex; align-items: center; gap: calc(4 * var(--pt)); height: calc(22 * var(--pt)); padding: 0 calc(8 * var(--pt)); border-radius: 99px; background: var(--pk-bg-2); color: var(--pk-text-2); font-size: calc(12 * var(--pt)); font-weight: 600; letter-spacing: 0; white-space: nowrap; flex: none; }
.p-chip svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.p-list { list-style: none; margin: 0; padding: 0; }
.p-list > li, .p-kids > li { position: relative; }
.p-list > li + li::before, .p-kids > li + li::before { content: ''; position: absolute; z-index: 3; left: calc(24 * var(--pt)); right: 0; top: 0; border-top: 1px dashed var(--pk-line-strong); }
.p-row { position: relative; z-index: 2; display: flex; align-items: center; gap: calc(10 * var(--pt)); min-height: calc(44 * var(--pt)); padding: calc(9 * var(--pt)) 0; background: var(--pk-card); font-size: calc(17 * var(--pt)); }
.p-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-row .m { font-size: calc(13 * var(--pt)); color: var(--pk-text-2); white-space: nowrap; letter-spacing: 0; }
.p-row > svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); margin: 0 calc(1 * var(--pt)); color: var(--pk-text-2); }
.p-it.new .p-row { animation: p-new 2.4s ease-out both; }
@keyframes p-new { 0% { background: color-mix(in srgb, var(--pk-glad) 26%, var(--pk-card)); } 100% { background: var(--pk-card); } }
.p-it.usual .i-dot { background: var(--pk-packed); }
.p-it.hl .p-row { background: color-mix(in srgb, var(--pk-accent) 8%, var(--pk-card)); }
.p-it.ghost .p-row { color: var(--pk-text-2); }
/* Nested group: one folded row with a count. */
.p-sub > .p-row { font-weight: 600; letter-spacing: -.015em; }
.p-sub > .p-row svg { color: var(--pk-text); }
.p-sub .p-ct { margin-left: 0; font-weight: 500; font-size: calc(13 * var(--pt)); min-width: calc(24 * var(--pt)); height: calc(22 * var(--pt)); padding: 0 calc(7 * var(--pt)); border-radius: 99px; background: var(--pk-bg-2); display: inline-grid; place-items: center; color: var(--pk-text-2); }
.p-chev { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: var(--pk-text-2); display: grid; place-items: center; transition: transform .25s var(--pk-ease-settle); }
.p-chev svg { width: calc(8 * var(--pt)); height: calc(12 * var(--pt)); }
.p-sub.open > .p-row .p-chev, .p-sug.open > .p-row .p-chev { transform: rotate(90deg); }
.p-kids { list-style: none; margin: 0 0 calc(6 * var(--pt)) calc(11 * var(--pt)); padding: 0 0 0 calc(10 * var(--pt)); border-left: calc(2 * var(--pt)) solid var(--pk-line-strong); }
.p-kids .p-row { min-height: calc(38 * var(--pt)); padding: calc(6 * var(--pt)) 0; font-size: calc(16 * var(--pt)); }
.p-kids > li + li::before { left: calc(24 * var(--pt)); }
.p-sub.tap > .p-row, .p-sug.tap > .p-row { background: color-mix(in srgb, var(--pk-text) 6%, var(--pk-card)); border-radius: calc(10 * var(--pt)); }
/* Suggestions: after your own entries, one line until opened. */
.p-sug > .p-row { color: var(--pk-text-2); font-size: calc(15 * var(--pt)); font-weight: 600; }
.p-sug > .p-row svg { color: var(--pk-accent); width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); margin: 0 calc(2 * var(--pt)); }
.p-sug .p-ct { margin-left: 0; font-weight: 600; font-size: calc(13 * var(--pt)); color: var(--pk-accent); }
.p-sug.arrive { animation: i-arrive .45s var(--pk-ease-settle) both; }
.p-suglist { list-style: none; margin: 0 0 calc(8 * var(--pt)); padding: calc(4 * var(--pt)); border-radius: calc(14 * var(--pt)); background: var(--pk-bg-2); }
.p-suglist li { display: flex; align-items: center; gap: calc(8 * var(--pt)); min-height: calc(40 * var(--pt)); padding: 0 calc(4 * var(--pt)) 0 calc(10 * var(--pt)); font-size: calc(16 * var(--pt)); border-radius: calc(10 * var(--pt)); }
.p-suglist li + li { box-shadow: 0 -1px 0 var(--pk-line); }
.p-suglist li .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-suglist li .m { font-size: calc(12 * var(--pt)); color: var(--pk-text-2); white-space: nowrap; letter-spacing: 0; }
.p-suglist li > svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); color: var(--pk-text); }
.p-suglist li.grp .n { font-weight: 600; }
.p-plus { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); display: grid; place-items: center; color: var(--pk-accent); flex: none; }
.p-plus svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.p-x { width: calc(26 * var(--pt)); height: calc(28 * var(--pt)); display: grid; place-items: center; color: var(--pk-text-2); flex: none; opacity: .7; }
.p-x svg { width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); }
.p-suglist li.took { background: var(--pk-packed-tint); }
.p-suglist li.took .p-plus { color: var(--pk-packed); }
.p-suglist li.took .p-plus svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.p-suglist li.took .p-x { visibility: hidden; }
/* Adding: the quiet row, and the live field. */
.p-add .p-row { color: var(--pk-text-2); font-size: calc(16 * var(--pt)); }
.p-add .p-row svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); margin: 0 calc(5 * var(--pt)); color: var(--pk-accent); }
.p-addf { padding: calc(6 * var(--pt)) 0 calc(8 * var(--pt)); }
.p-field { display: flex; align-items: center; gap: calc(8 * var(--pt)); height: calc(44 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: calc(13 * var(--pt)); background: var(--pk-card); box-shadow: inset 0 0 0 calc(1.6 * var(--pt)) var(--pk-accent), 0 0 0 calc(4 * var(--pt)) color-mix(in srgb, var(--pk-accent) 14%, transparent); font-size: calc(17 * var(--pt)); }
.p-field > svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: var(--pk-accent); }
.p-field .ph { color: var(--pk-text-2); margin-left: calc(-4 * var(--pt)); }
.p-caret { display: inline-block; width: 2px; height: calc(21 * var(--pt)); margin-left: calc(1 * var(--pt)); background: var(--pk-accent); border-radius: 2px; animation: i-caret 1s steps(1) infinite; vertical-align: middle; }
.i-title .p-caret { height: calc(32 * var(--pt)); }
/* Autocomplete, attached to the field. Groups are offered whole. */
.p-ac { list-style: none; margin: calc(6 * var(--pt)) 0 0; padding: calc(4 * var(--pt)); border-radius: calc(14 * var(--pt)); background: var(--pk-raised); box-shadow: var(--pk-shadow-raised); position: relative; z-index: 8; }
.p-ac li { display: flex; align-items: center; gap: calc(9 * var(--pt)); min-height: calc(40 * var(--pt)); padding: 0 calc(10 * var(--pt)); border-radius: calc(10 * var(--pt)); font-size: calc(16 * var(--pt)); }
.p-ac li .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-ac li .n b { font-weight: 700; }
.p-ac li .m { font-size: calc(12 * var(--pt)); color: var(--pk-text-2); white-space: nowrap; letter-spacing: 0; }
.p-ac li.sel { background: var(--pk-bg-2); }
.p-ac li > svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); color: var(--pk-text); margin: 0 calc(-1 * var(--pt)); }
.p-ac li .i-dot { margin: 0 calc(6 * var(--pt)); }
.p-ac li.grp .n { font-weight: 600; }
.p-ac li.new { color: var(--pk-accent); font-weight: 600; }
.p-ac li.new svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); margin: 0 calc(3 * var(--pt)); color: var(--pk-accent); }
/* Swipe */
.p-it.swiped .p-row { transform: translateX(calc(-228 * var(--pt))); }
.p-acts { position: absolute; inset: 0; display: flex; justify-content: flex-end; z-index: 1; }
.p-acts .a { width: calc(72 * var(--pt)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 600; color: #fff; }
.p-acts .a svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.p-acts .a { text-align: center; line-height: 1.05; padding: 0 calc(4 * var(--pt)); }
.p-acts .move { background: #4f7f80; }
.p-acts .det { background: #8a7461; }
.p-acts .off { background: #5e4c3e; width: calc(84 * var(--pt)); }
.p-acts .tap { filter: brightness(.9); }
/* The group's action menu (an iOS context menu). */
.p-menu { position: absolute; z-index: 30; right: calc(4 * var(--pt)); top: calc(44 * var(--pt)); width: calc(236 * var(--pt)); padding: calc(5 * var(--pt)) 0; border-radius: calc(14 * var(--pt)); background: color-mix(in srgb, var(--pk-raised) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 0 0 .5px var(--pk-line-strong), 0 calc(18 * var(--pt)) calc(40 * var(--pt)) calc(-12 * var(--pt)) rgba(28, 20, 16, .45); font-size: calc(16 * var(--pt)); }
.p-menu .mi { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--pt)); min-height: calc(42 * var(--pt)); padding: 0 calc(14 * var(--pt)) 0 calc(16 * var(--pt)); }
.p-menu .mi + .mi { box-shadow: 0 -.5px 0 var(--pk-line-strong); }
.p-menu .mi svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); color: var(--pk-text); }
.p-menu .mi.hl { background: color-mix(in srgb, var(--pk-text) 8%, transparent); }
.p-menu .mi.red, .p-menu .mi.red svg { color: var(--pk-danger); }
.p-menu .mi.on svg { color: var(--pk-accent); }
.p-menu .mi.check::after { content: ''; }
.p-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(28, 20, 16, .12); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.p-lift { position: relative; z-index: 25; }
/* Floating add-group button over the tab bar. */
.p-fab { position: absolute; z-index: 47; right: calc(22 * var(--pt)); bottom: calc(102 * var(--pt)); width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: var(--pk-accent); color: var(--pk-on-accent); box-shadow: var(--pk-shadow-button); }
.p-fab svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.p-fab.tap { transform: scale(.92); background: var(--pk-accent-pressed); }
/* Zoomed into one group. */
.p-zoom { padding: calc(4 * var(--pt)) calc(16 * var(--pt)) 0; }
.p-zoom .bk { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); color: var(--pk-accent); font-size: calc(16 * var(--pt)); font-weight: 500; }
.p-zoom .bk svg { width: calc(9 * var(--pt)); height: calc(15 * var(--pt)); }
.p-zoom h3 { margin: calc(10 * var(--pt)) 0 calc(6 * var(--pt)); font: 700 calc(30 * var(--pt))/1.05 var(--pk-font-app); letter-spacing: -.03em; display: flex; align-items: center; gap: calc(8 * var(--pt)); }
.p-zoom h3 .p-ct { margin-left: 0; font-size: calc(17 * var(--pt)); font-weight: 400; }
.p-zoom + .p-grp { margin-top: calc(4 * var(--pt)); }

/* ---------- Keyboard and the group switcher above it ---------- */
.kb { position: absolute; z-index: 52; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, #cfc6b8 82%, var(--pk-bg)); padding-bottom: calc(36 * var(--pt)); font-family: var(--pk-font-app); }
.kb-sw { display: flex; gap: calc(6 * var(--pt)); padding: calc(7 * var(--pt)) calc(8 * var(--pt)); overflow: hidden; background: color-mix(in srgb, var(--pk-bg) 75%, #cfc6b8); border-bottom: .5px solid rgba(46, 33, 24, .12); }
.kb-sw span { flex: none; height: calc(32 * var(--pt)); padding: 0 calc(13 * var(--pt)); border-radius: 99px; display: inline-flex; align-items: center; background: var(--pk-card); font-size: calc(14 * var(--pt)); font-weight: 600; color: var(--pk-text); box-shadow: 0 0 0 .5px var(--pk-line-strong); white-space: nowrap; }
.kb-sw span.on { background: var(--pk-text); color: var(--pk-bg); box-shadow: none; }
.kb-sw span.tap { background: var(--pk-accent); color: var(--pk-on-accent); box-shadow: 0 0 0 calc(4 * var(--pt)) color-mix(in srgb, var(--pk-accent) 25%, transparent); }
.kb-keys { padding: calc(8 * var(--pt)) calc(3 * var(--pt)) 0; display: grid; gap: calc(11 * var(--pt)); }
.kr { display: flex; justify-content: center; gap: calc(6 * var(--pt)); padding: 0 calc(3 * var(--pt)); }
.kr.r2 { padding: 0 calc(22 * var(--pt)); }
.kk { flex: 1; height: calc(43 * var(--pt)); border-radius: calc(5 * var(--pt)); background: #fffdf8; box-shadow: 0 1px 0 rgba(46, 33, 24, .35); display: grid; place-items: center; font-size: calc(22 * var(--pt)); color: #1d1610; font-weight: 400; }
.kk.fn { flex: 1.4; background: #b8ae9f; font-size: calc(15 * var(--pt)); }
.kk.fn svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.kk.w { flex: 1.1; }
.kk.sp { flex: 5; font-size: calc(15 * var(--pt)); }
.kk.ret { flex: 2.3; background: var(--pk-accent); color: #fff8ee; font-size: calc(15 * var(--pt)); font-weight: 600; }
.kk.down { background: #b8ae9f; transform: scale(1.05); }
.kb + .i-home, .kb ~ .i-home { background: #1d1610; }

/* ---------- Pack ---------- */
.pk-hd { gap: calc(8 * var(--pt)); }
.pk-n { margin-left: auto; font-size: calc(14 * var(--pt)); color: var(--pk-text-2); font-variant-numeric: tabular-nums; letter-spacing: 0; font-weight: 500; }
.pk-ring { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); transform: rotate(-90deg); flex: none; }
.pk-ring circle { fill: none; stroke-width: 3; }
.pk-ring .tr { stroke: var(--pk-bg-2); }
.pk-ring .rn { stroke: var(--pk-packed); stroke-dasharray: 100; stroke-linecap: round; }
.pk-all { height: calc(26 * var(--pt)); padding: 0 calc(10 * var(--pt)); border-radius: 99px; background: var(--pk-bg-2); font-size: calc(12.5 * var(--pt)); font-weight: 600; color: var(--pk-text); display: inline-flex; align-items: center; letter-spacing: 0; white-space: nowrap; }
.pk-all.tap { background: var(--pk-packed); color: var(--pk-on-packed); box-shadow: 0 0 0 calc(4 * var(--pt)) color-mix(in srgb, var(--pk-packed) 22%, transparent); }
.pk-grp .i-row { min-height: calc(42 * var(--pt)); padding: calc(8 * var(--pt)) 0; font-size: calc(16 * var(--pt)); gap: calc(12 * var(--pt)); }
.pk-grp .i-it .p-av { margin-left: calc(4 * var(--pt)); }
.pk-grp.full .i-hrow .allin { margin-left: auto; }
.pk-seg { padding: 0 calc(16 * var(--pt)) calc(12 * var(--pt)); }
.pk-seg .i-seg .thumb { width: calc(50% - calc(2 * var(--pt))); }
.pk-seg.right .i-seg .thumb { transform: translateX(100%); }
.i-it.just .i-cb { animation: i-settle .45s var(--pk-ease-settle); }
.i-it.just .i-row { background: color-mix(in srgb, var(--pk-packed) 10%, var(--pk-card)); }
.i-it.ping .i-row { background: color-mix(in srgb, #4f7f80 14%, var(--pk-card)); }
.i-it.queued .i-cb::after { content: ''; position: absolute; right: calc(-3 * var(--pt)); top: calc(-3 * var(--pt)); width: calc(9 * var(--pt)); height: calc(9 * var(--pt)); border-radius: 50%; background: var(--pk-glad); box-shadow: 0 0 0 calc(2 * var(--pt)) var(--pk-card); }
.frozen .i-cb { opacity: .8; }
/* The Departed stamp. */
.i-trip { position: relative; }
.stamp { position: absolute; right: calc(18 * var(--pt)); top: calc(10 * var(--pt)); transform: rotate(-9deg); padding: calc(5 * var(--pt)) calc(10 * var(--pt)) calc(4 * var(--pt)); border: calc(2.5 * var(--pt)) solid var(--pk-accent); border-radius: calc(8 * var(--pt)); color: var(--pk-accent); text-align: center; line-height: 1; box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--pk-bg), inset 0 0 0 calc(3.2 * var(--pt)) var(--pk-accent); mix-blend-mode: multiply; opacity: .92; }
.stamp b { display: block; font: 800 calc(15 * var(--pt))/1 var(--pk-font-app); letter-spacing: .14em; text-transform: uppercase; }
.stamp span { display: block; margin-top: calc(3 * var(--pt)); font: 600 calc(10.5 * var(--pt))/1 var(--pk-font-mono); letter-spacing: .04em; }
.stamp.land { animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stamp { 0% { transform: rotate(-9deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-9deg) scale(1); } }

/* ---------- Reflect ---------- */
.capt { padding: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); }
.cap-f { display: flex; align-items: center; gap: calc(9 * var(--pt)); height: calc(48 * var(--pt)); padding: 0 calc(8 * var(--pt)) 0 calc(14 * var(--pt)); border-radius: 99px; background: var(--pk-card); box-shadow: var(--pk-shadow-card); font-size: calc(16 * var(--pt)); }
.capt.focus .cap-f { box-shadow: inset 0 0 0 calc(1.6 * var(--pt)) var(--pk-forgot), 0 0 0 calc(4 * var(--pt)) color-mix(in srgb, var(--pk-forgot) 14%, transparent); }
.cap-f > svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); color: var(--pk-forgot); }
.cap-f .t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cap-f .ph { color: var(--pk-text-2); }
.cap-mic { margin-left: auto; width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: var(--pk-bg-2); color: var(--pk-text); flex: none; }
.cap-mic svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.parse { margin: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(18 * var(--pt)); background: var(--pk-card); box-shadow: var(--pk-shadow-raised); }
.parse .lbl { font-size: calc(12 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; }
.parse .row { display: flex; align-items: center; gap: calc(8 * var(--pt)); flex-wrap: wrap; margin-top: calc(8 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 600; }
.parse .acts { display: flex; gap: calc(8 * var(--pt)); margin-top: calc(12 * var(--pt)); }
.parse .acts .i-btn { flex: 1; }
.obs-l { list-style: none; margin: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: calc(20 * var(--pt)); background: var(--pk-card); box-shadow: var(--pk-shadow-card); }
.obs { padding: calc(10 * var(--pt)) 0; }
.obs + .obs { border-top: 1px dashed var(--pk-line-strong); }
.obs-t { display: flex; align-items: baseline; gap: calc(8 * var(--pt)); font-size: calc(16 * var(--pt)); }
.obs-t .n { flex: 1; min-width: 0; font-weight: 600; letter-spacing: -.015em; }
.obs-t .m { font-size: calc(12 * var(--pt)); color: var(--pk-text-2); letter-spacing: 0; white-space: nowrap; }
.obs-c { display: flex; gap: calc(6 * var(--pt)); margin-top: calc(6 * var(--pt)); flex-wrap: wrap; }
.obs-c .i-chip { height: calc(24 * var(--pt)); font-size: calc(12 * var(--pt)); }
.cond { display: inline-flex; align-items: center; gap: calc(3 * var(--pt)); height: calc(24 * var(--pt)); padding: 0 calc(9 * var(--pt)) 0 calc(6 * var(--pt)); border-radius: 99px; background: #e3edf0; color: #2f5d66; font-size: calc(12 * var(--pt)); font-weight: 600; letter-spacing: 0; }
.cond svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
[data-theme="dark"] .cond { background: #1d3036; color: #9fc9d2; }
@media (prefers-color-scheme: dark) { [data-theme="system"] .cond { background: #1d3036; color: #9fc9d2; } }
.obs.new { animation: p-new 2.4s ease-out both; border-radius: calc(10 * var(--pt)); }
.r-hd { display: flex; align-items: baseline; justify-content: space-between; padding: calc(6 * var(--pt)) calc(26 * var(--pt)) calc(6 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; }
.r-sum { margin: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: calc(20 * var(--pt)); background: var(--pk-bg-2); }
.r-sum .p-row { background: transparent; font-size: calc(15 * var(--pt)); color: var(--pk-text-2); }
.r-sum .p-row svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); color: var(--pk-packed); }
.r-cta { position: absolute; z-index: 45; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(104 * var(--pt)); }
.r-cta .i-btn { width: 100%; height: calc(54 * var(--pt)); font-size: calc(17 * var(--pt)); }
.fr .i-card .i-vrow { padding: calc(10 * var(--pt)) 0; }

/* ---------- Siri and the Live Activity on the road ---------- */
.siri { position: absolute; z-index: 8; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); top: calc(330 * var(--pt)); display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(12 * var(--pt)) calc(16 * var(--pt)) calc(12 * var(--pt)) calc(12 * var(--pt)); border-radius: calc(24 * var(--pt)); background: rgba(20, 16, 14, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; font-size: calc(16 * var(--pt)); font-weight: 600; letter-spacing: -.01em; }
.siri .orb { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 50%; flex: none; background: conic-gradient(from 30deg, #f0b54e, #e8845a, #b03a52, #6f9fa0, #9cc072, #f0b54e); filter: blur(.4px) saturate(1.1); box-shadow: 0 0 calc(18 * var(--pt)) rgba(232, 132, 90, .7); animation: orb 2.4s linear infinite; }
@keyframes orb { to { transform: rotate(360deg); } }
.siri .tx { line-height: 1.25; }
.la-road .la-count { color: #ee8098; }
.la-last { margin-top: calc(12 * var(--pt)); display: flex; align-items: center; gap: calc(8 * var(--pt)); font-size: calc(15 * var(--pt)); padding: calc(9 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(14 * var(--pt)); background: rgba(255, 255, 255, .1); }
.la-last b { font-weight: 600; }
.la-last span:last-child { margin-left: auto; font-size: calc(12 * var(--pt)); opacity: .7; }
.la-last .i-chip { height: calc(22 * var(--pt)); font-size: calc(11.5 * var(--pt)); background: rgba(238, 128, 152, .2); color: #ffb3c3; }
.la-road.flash { animation: la-flash 1.2s ease-out; }
@keyframes la-flash { 0% { box-shadow: 0 0 0 0 rgba(238, 128, 152, .7); } 100% { box-shadow: 0 0 0 calc(16 * var(--pt)) rgba(238, 128, 152, 0); } }
.lock .ls-live { bottom: calc(118 * var(--pt)); }

/* ---------- Status and sync ---------- */
.p-flag { color: var(--pk-forgot); background: var(--pk-forgot-tint) !important; }
.p-flag svg { width: calc(16 * var(--pt)) !important; height: calc(16 * var(--pt)) !important; }
.i-round.tight { margin-left: calc(6 * var(--pt)); }
.p-flag + .i-round { margin-left: calc(6 * var(--pt)); }
.i-top .p-flag { margin-left: auto; }
.i-sync.wait i { background: var(--pk-glad); }
.netb { margin: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); display: flex; align-items: center; gap: calc(10 * var(--pt)); padding: calc(10 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(14 * var(--pt)); background: var(--pk-bg-2); font-size: calc(14 * var(--pt)); color: var(--pk-text-2); }
.netb svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); flex: none; }
.netb b { color: var(--pk-text); font-weight: 600; }
.netb.ok { background: var(--pk-packed-tint); color: var(--pk-packed); }
.netb.ok b { color: var(--pk-packed); }

/* A tap marker drawn over frames, so a static screen shows what was touched. */
.tapdot { position: absolute; z-index: 90; width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); margin: calc(-20 * var(--pt)) 0 0 calc(-20 * var(--pt)); border-radius: 50%; background: color-mix(in srgb, var(--pk-accent) 28%, transparent); box-shadow: 0 0 0 calc(2 * var(--pt)) color-mix(in srgb, var(--pk-accent) 60%, transparent); pointer-events: none; animation: tapdot 2.2s ease-out infinite; }
@keyframes tapdot { 0%, 100% { transform: scale(.85); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tapdot, .siri .orb { animation: none; } }

/* ---------- Bits used by the flows ---------- */
.pk-kick { font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; }
.pk-kick::after { content: '›'; margin: 0 calc(1 * var(--pt)) 0 calc(4 * var(--pt)); }
.i-trip.long .i-title { font-size: calc(30 * var(--pt)); }
.i-empty.first { padding-top: calc(70 * var(--pt)); }
.i-empty.first .rat { width: calc(190 * var(--pt)); }
.p-field.nm { margin-top: calc(20 * var(--pt)); width: 100%; text-align: left; }
.sh-l { text-align: left; font-size: calc(26 * var(--pt)) !important; margin: calc(4 * var(--pt)) calc(4 * var(--pt)) calc(10 * var(--pt)) !important; }
.pick { list-style: none; margin: 0; padding: 0; text-align: left; }
.pick li { display: flex; align-items: center; min-height: calc(46 * var(--pt)); padding: 0 calc(8 * var(--pt)); font-size: calc(17 * var(--pt)); border-radius: calc(12 * var(--pt)); }
.pick li + li { box-shadow: 0 -1px 0 var(--pk-line); }
.pick li .n { flex: 1; }
.pick li svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); color: var(--pk-accent); }
.pick li.on { font-weight: 600; }
.pick li.tap { background: var(--pk-accent-tint); box-shadow: none; }
.parse .row.sm { margin-top: calc(6 * var(--pt)); }
.parse .row .p-chip { height: calc(24 * var(--pt)); font-size: calc(12.5 * var(--pt)); }
.ping-av { position: absolute; z-index: 60; left: calc(50% - calc(14 * var(--pt))); top: calc(312 * var(--pt)); animation: ping-av 2.4s ease-out infinite; }
.ping-av .p-av { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); font-size: calc(13 * var(--pt)); box-shadow: 0 0 0 calc(3 * var(--pt)) var(--pk-bg), 0 calc(6 * var(--pt)) calc(14 * var(--pt)) rgba(28, 20, 16, .3); }
@keyframes ping-av { 0% { opacity: 0; transform: translateY(calc(6 * var(--pt))) scale(.7); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.vlist { padding-bottom: 0; }
.vlist .i-vrow .t .m { font-size: calc(12 * var(--pt)); }

.pk-grp.headless { padding-top: calc(4 * var(--pt)); }


/* ================= Round 4 ================= */
/* Quantity, parsed off the name: "Socks 6" becomes Socks ×6. */
.p-qty { font-size: calc(14 * var(--pt)); font-weight: 600; color: var(--pk-text-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Pack rows swipe the same three ways. */
.i-it.swiped3 .i-row { transform: translateX(calc(-228 * var(--pt))); }
.i-it > .p-acts { z-index: 1; }
/* Counters: the check grows into a ring with the count inside. */
.pk-cnt { position: relative; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); flex: none; display: grid; place-items: center; border-radius: 50%; }
.pk-cnt svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pk-cnt circle { fill: none; }
.pk-cnt .tr { stroke: var(--pk-control); stroke-width: 1.6; }
.pk-cnt.part .tr { stroke: color-mix(in srgb, var(--pk-packed) 22%, var(--pk-bg-2)); stroke-width: 2.8; }
.pk-cnt .rn { stroke: var(--pk-packed); stroke-width: 2.8; stroke-linecap: round; }
.pk-cnt b { position: relative; font-size: calc(11.5 * var(--pt)); font-weight: 700; color: var(--pk-packed); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; }
.pk-cnt.full { background: var(--pk-packed); }
.pk-cnt.full svg { display: none; }
.pk-cnt.full b { display: grid; place-items: center; }
.pk-cnt.full b svg { display: block; position: static; width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); transform: none; color: var(--pk-on-packed); }
.i-it.just .pk-cnt { animation: i-settle .45s var(--pk-ease-settle); }
.pk-q { margin-left: auto; font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.i-it.cnt:not(.on) .pk-q { color: var(--pk-packed); }
.pk-x { font-weight: 600; color: var(--pk-text-2); font-variant-numeric: tabular-nums; }
.pk-dot { color: var(--pk-text-2); }
.i-row .p-chev { margin-left: calc(-4 * var(--pt)); }
.p-chev.open { transform: rotate(90deg); }
/* Each, opened: one line per traveller. */
.pk-kids { list-style: none; margin: 0 0 calc(6 * var(--pt)) calc(11 * var(--pt)); padding: 0 0 0 calc(14 * var(--pt)); border-left: calc(2 * var(--pt)) solid var(--pk-line-strong); }
.pk-kids .i-row { min-height: calc(38 * var(--pt)); padding: calc(6 * var(--pt)) 0; font-size: calc(15.5 * var(--pt)); gap: calc(10 * var(--pt)); }
.pk-kids .i-cb { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); }
.pk-kids .i-it + .i-it::before { left: calc(31 * var(--pt)); }
.pk-kids .p-av { margin-left: auto; }
/* A nested group inside Pack: one row, its own progress. */
.pk-sub .i-row { font-weight: 600; letter-spacing: -.015em; gap: calc(10 * var(--pt)); }
.pk-sub .i-row > svg:first-child { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); margin: 0 calc(1 * var(--pt)); color: var(--pk-text); }
.pk-sub .pk-n { margin-left: auto; }
/* Suggestions and the add field, at the foot of a Pack group. */
.i-list > .pk-foot { position: relative; }
.i-list > .pk-foot::before { content: ''; position: absolute; z-index: 3; left: calc(38 * var(--pt)); right: 0; top: 0; border-top: 1px dashed var(--pk-line-strong); }
.pk-foot .p-list > li::before { display: none; }
.pk-foot .p-row { gap: calc(14 * var(--pt)); }
.pk-foot .p-add .p-row svg { margin: 0 calc(5 * var(--pt)); }
.pk-view .pk-foot .p-sug > .p-row { min-height: calc(38 * var(--pt)); font-size: calc(14 * var(--pt)); }
.pk-view .pk-foot .p-add .p-row { min-height: calc(38 * var(--pt)); font-size: calc(15 * var(--pt)); }
.pk-foot .p-addf { padding-top: calc(8 * var(--pt)); }
.pk-foot .p-suglist { margin-top: calc(2 * var(--pt)); }
.pk-grp.focus { box-shadow: 0 0 0 calc(1.6 * var(--pt)) color-mix(in srgb, var(--pk-accent) 55%, transparent), var(--pk-shadow-card); }
/* Bought on the way: forgot, and fixed from the road. */
.i-chip.bought { height: calc(22 * var(--pt)); padding: 0 calc(8 * var(--pt)); font-size: calc(11.5 * var(--pt)); margin-left: auto; gap: calc(4 * var(--pt)); }
.i-chip.bought svg, .i-chip.bought-c svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.i-chip.bought-c { background: var(--pk-bg-2); color: var(--pk-text-2); }
.i-chip.note { background: #e3edf0; color: #2f5d66; }
[data-theme="dark"] .i-chip.note { background: #1d3036; color: #9fc9d2; }
@media (prefers-color-scheme: dark) { [data-theme="system"] .i-chip.note { background: #1d3036; color: #9fc9d2; } }
.i-chip.note svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.pk-grp.road .i-it.new .i-row { animation: p-new 2.4s ease-out both; }
/* Observations. */
.obs-q { display: block; margin-top: calc(4 * var(--pt)); font: italic 400 calc(18 * var(--pt))/1.2 var(--pk-font-serif); color: var(--pk-text); quotes: '\201C' '\201D'; letter-spacing: 0; }
.via { display: inline-flex; align-items: center; height: calc(24 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; }
.via::before { content: 'via '; font-weight: 400; margin-right: .3em; }
.r-hd span + span { font-weight: 500; }
/* Reflect before departure. */
.notyet { margin: calc(6 * var(--pt)) calc(12 * var(--pt)) calc(14 * var(--pt)); padding: calc(26 * var(--pt)) calc(16 * var(--pt)) calc(22 * var(--pt)); border-radius: calc(20 * var(--pt)); border: 1.5px dashed var(--pk-line-strong); display: grid; justify-items: center; gap: calc(8 * var(--pt)); text-align: center; }
.notyet .ny-ic { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: var(--pk-bg-2); color: var(--pk-text-2); }
.notyet .ny-ic svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.notyet b { font: italic 400 calc(30 * var(--pt))/1 var(--pk-font-serif); letter-spacing: -.01em; }
/* Reflect once home: Finish leads. */
.fin-card { margin: 0 calc(12 * var(--pt)) calc(12 * var(--pt)); padding: calc(16 * var(--pt)) calc(16 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(22 * var(--pt)); background: var(--pk-card); box-shadow: 0 0 0 calc(1.5 * var(--pt)) color-mix(in srgb, var(--pk-accent) 40%, transparent), var(--pk-shadow-raised); display: grid; gap: calc(12 * var(--pt)); }
.fc-t { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--pt)); }
.fc-t b { font: italic 400 calc(30 * var(--pt))/1 var(--pk-font-serif); letter-spacing: -.01em; }
.fc-t span { font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; }
.fin-card.tap .i-btn { background: var(--pk-accent-pressed); transform: scale(.98); }
/* The Finish sheet. */
.fin-h { text-align: left; padding: 0 calc(4 * var(--pt)); }
.fin-h .st { font-size: calc(12 * var(--pt)); font-weight: 700; color: var(--pk-accent); letter-spacing: .02em; }
.fin-h .sh-l { margin-top: calc(2 * var(--pt)) !important; }
.asks { list-style: none; margin: 0; padding: 0; text-align: left; }
.ask { padding: calc(10 * var(--pt)) calc(4 * var(--pt)); display: grid; gap: calc(8 * var(--pt)); }
.ask + .ask { border-top: 1px dashed var(--pk-line-strong); }
.ask .t { display: flex; align-items: baseline; gap: calc(8 * var(--pt)); }
.ask .n { font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.015em; }
.ask .m { margin-left: auto; font-size: calc(12.5 * var(--pt)); color: var(--pk-text-2); white-space: nowrap; letter-spacing: 0; }
.ask-o { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--pt)); padding: calc(3 * var(--pt)); border-radius: 99px; background: var(--pk-bg-2); }
.ao { height: calc(32 * var(--pt)); border-radius: 99px; display: grid; place-items: center; font-size: calc(13.5 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; }
.ao.used.on { background: var(--pk-packed-tint); color: var(--pk-packed); box-shadow: 0 1px 2px rgba(46, 33, 24, .12); }
.ao.never.on { background: var(--pk-never-tint); color: var(--pk-never); box-shadow: 0 1px 2px rgba(46, 33, 24, .12); }
.fin-rest { display: flex; align-items: center; gap: calc(6 * var(--pt)); margin-top: calc(6 * var(--pt)); padding: calc(10 * var(--pt)) calc(4 * var(--pt)) 0; border-top: 1px solid var(--pk-line); font-size: calc(13.5 * var(--pt)); color: var(--pk-text-2); text-align: left; }
.fin-rest svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: var(--pk-packed); flex: none; }
.keep { display: grid; justify-items: center; gap: calc(4 * var(--pt)); padding: calc(14 * var(--pt)) 0 calc(6 * var(--pt)); }
.keep b { font-size: calc(22 * var(--pt)); font-weight: 600; letter-spacing: -.02em; }
.keep span { font-size: calc(14.5 * var(--pt)); color: var(--pk-text-2); }
.keep h4 { margin-top: calc(14 * var(--pt)) !important; }
.keep-o { display: grid; gap: calc(8 * var(--pt)); margin-top: calc(16 * var(--pt)); }
.ko { height: calc(50 * var(--pt)); border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 600; background: var(--pk-bg-2); color: var(--pk-text); }
.ko svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.ko.glad.on { background: var(--pk-glad); color: var(--pk-on-glad); box-shadow: 0 calc(8 * var(--pt)) calc(18 * var(--pt)) calc(-10 * var(--pt)) rgba(133, 90, 18, .8); }
/* Trip details and row details: a sheet of optional rows. */
.det { list-style: none; margin: 0; padding: 0; text-align: left; }
.det li { display: flex; align-items: center; gap: calc(10 * var(--pt)); min-height: calc(48 * var(--pt)); padding: 0 calc(6 * var(--pt)); font-size: calc(16 * var(--pt)); border-radius: calc(12 * var(--pt)); }
.det li + li { box-shadow: 0 -1px 0 var(--pk-line); }
.det .k { flex: none; font-weight: 600; letter-spacing: -.01em; }
.det .v { margin-left: auto; display: flex; align-items: center; gap: calc(10 * var(--pt)); color: var(--pk-text); text-align: right; min-width: 0; }
.det li.empty .v { color: var(--pk-accent); font-weight: 600; font-size: calc(15 * var(--pt)); }
.det .pp { display: inline-flex; }
.det .pp .p-av + .p-av { margin-left: calc(-5 * var(--pt)); box-shadow: 0 0 0 calc(2 * var(--pt)) var(--pk-raised); }
.det li:first-child .pp { margin-left: auto; }
.det li.tap { background: var(--pk-accent-tint); box-shadow: none; }
.det li.tap + li { box-shadow: none; }
.det .p-chip { height: calc(26 * var(--pt)); font-size: calc(13 * var(--pt)); }
.i-title.tap { position: relative; }
.i-title.tap::after { content: ''; position: absolute; inset: calc(-4 * var(--pt)) calc(-8 * var(--pt)); border-radius: calc(10 * var(--pt)); background: color-mix(in srgb, var(--pk-text) 7%, transparent); }
.p-flag.tap { box-shadow: 0 0 0 calc(4 * var(--pt)) color-mix(in srgb, var(--pk-forgot) 24%, transparent); }
.tapdot.long { width: calc(54 * var(--pt)); height: calc(54 * var(--pt)); margin: calc(-27 * var(--pt)) 0 0 calc(-27 * var(--pt)); background: color-mix(in srgb, var(--pk-packed) 20%, transparent); box-shadow: 0 0 0 calc(3 * var(--pt)) color-mix(in srgb, var(--pk-packed) 70%, transparent); }