/* Pakratt, round 2: the iOS app, drawn in HTML.
   Sizes are in iOS points through --pt. In the component gallery 1pt = 1px;
   inside a phone frame --pt shrinks so a 393pt screen fits the frame.
   Colours come only from theme.css tokens, so data-theme="dark" on any
   ancestor gives the dark version. */

.ios { --pt: 1px; font-family: var(--pk-font-app); color: var(--pk-text); -webkit-font-smoothing: antialiased; letter-spacing: -.01em; line-height: 1.25; }
.ios :where(*, *::before, *::after) { box-sizing: border-box; }
.ios :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; letter-spacing: inherit; }
.ios :where(svg) { display: block; flex: none; }
.ios .serif { font-family: var(--pk-font-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }

/* ---------- Phone ---------- */
.phone { --ph-w: 300px; --pt: calc((var(--ph-w) - 20px) / 393); position: relative; flex: none; width: var(--ph-w); height: calc((var(--ph-w) - 20px) * 2.168 + 20px); padding: 10px; border-radius: calc(var(--ph-w) * .18); background: #141110; box-shadow: inset 0 0 0 1.5px #3d3936, inset 0 0 0 3.5px #0b0908, var(--ph-shadow, 0 40px 70px -34px rgba(46, 33, 24, .55), 0 2px 6px rgba(46, 33, 24, .12)); }
.phone::before { content: ''; position: absolute; left: -2px; top: 19%; width: 3px; height: 8%; border-radius: 2px 0 0 2px; background: #2b2724; box-shadow: 0 calc(var(--ph-w) * .2) 0 #2b2724; }
.phone::after { content: ''; position: absolute; right: -2px; top: 25%; width: 3px; height: 13%; border-radius: 0 2px 2px 0; background: #2b2724; }
.phone > .scr { position: relative; width: 100%; height: 100%; border-radius: calc(var(--ph-w) * .155); overflow: hidden; background: var(--pk-bg); color: var(--pk-text); isolation: isolate; }
.phone.sm { --ph-w: 260px; }
.phone.lg { --ph-w: 330px; }
.phone.crop { height: calc(var(--crop, 420px)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }
.phone.crop > .scr { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.phone.crop::after { display: none; }
.scr-fade { position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(80 * var(--pt)); background: linear-gradient(transparent, var(--fade-to, var(--pk-bg))); pointer-events: none; }

.i-island { position: absolute; z-index: 60; top: calc(11 * var(--pt)); left: 50%; width: calc(124 * var(--pt)); height: calc(36 * var(--pt)); transform: translateX(-50%); border-radius: 99px; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(10 * var(--pt)); color: #fff; overflow: hidden; transition: width .5s var(--pk-ease-set-down), height .5s var(--pk-ease-set-down); }
.i-island > * { opacity: 0; transition: opacity .2s; }
.i-island.live { width: calc(200 * var(--pt)); }
.i-island.live > * { opacity: 1; transition-delay: .25s; }
.i-island .ii-n { font-weight: 600; font-size: calc(15 * var(--pt)); color: #f6c27a; font-variant-numeric: tabular-nums; }
.scr::before { content: ''; position: absolute; z-index: 49; inset: 0 0 auto; height: calc(58 * var(--pt)); background: linear-gradient(var(--pk-bg) 62%, color-mix(in srgb, var(--pk-bg) 0%, transparent)); pointer-events: none; }
.lock .scr::before { display: none; }
.i-sb { position: absolute; z-index: 50; inset: 0 0 auto; height: calc(54 * var(--pt)); display: flex; align-items: center; justify-content: space-between; padding: calc(4 * var(--pt)) calc(34 * var(--pt)) 0 calc(42 * var(--pt)); font-weight: 600; font-size: calc(16.5 * var(--pt)); letter-spacing: -.02em; color: var(--sb-fg, var(--pk-text)); pointer-events: none; }
.i-sb .ic { display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.i-sb .ic svg { height: calc(12 * var(--pt)); width: auto; }
.i-home { position: absolute; z-index: 70; bottom: calc(8 * var(--pt)); left: 50%; width: calc(136 * var(--pt)); height: calc(5 * var(--pt)); transform: translateX(-50%); border-radius: 9px; background: var(--home-fg, var(--pk-text)); pointer-events: none; }
.i-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: calc(54 * var(--pt)) 0 calc(150 * var(--pt)); scrollbar-width: none; overscroll-behavior: contain; }
/* On a touch screen the demos scroll themselves (by script); a finger on
   one must scroll the page, never get caught in the mock. */
@media (pointer: coarse) {
  .i-scroll { overflow-y: hidden; overscroll-behavior: auto; touch-action: pan-y; }
  .i-row { touch-action: pan-y; }
}
.i-scroll::-webkit-scrollbar { display: none; }

/* ---------- Top of a screen ---------- */
.i-top { display: flex; align-items: center; gap: calc(8 * var(--pt)); padding: calc(6 * var(--pt)) calc(16 * var(--pt)) 0; }
.i-pill { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); height: calc(32 * var(--pt)); padding: 0 calc(12 * var(--pt)) 0 calc(5 * var(--pt)); border-radius: 99px; background: var(--pk-bg-2); font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); white-space: nowrap; }
.i-avs { display: flex; }
.i-av { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; display: grid; place-items: center; font-size: calc(11 * var(--pt)); font-weight: 700; color: #fff8ee; box-shadow: 0 0 0 calc(2 * var(--pt)) var(--pk-bg-2); }
.i-av + .i-av { margin-left: calc(-7 * var(--pt)); }
.i-av.a { background: #8a664b; } .i-av.b { background: #4f7f80; }
.i-sync { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); }
.i-sync i { width: calc(7 * var(--pt)); height: calc(7 * var(--pt)); border-radius: 50%; background: var(--pk-packed); }
.i-sync.off i { background: transparent; box-shadow: inset 0 0 0 calc(1.6 * var(--pt)) var(--pk-control); }
.i-round { margin-left: auto; width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: 50%; background: var(--pk-bg-2); display: grid; place-items: center; color: var(--pk-text); }
.i-round svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }

/* ---------- Trip header ---------- */
.i-trip { padding: calc(14 * var(--pt)) calc(20 * var(--pt)) calc(14 * var(--pt)); }
.i-kick { font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; }
.i-title { font-family: var(--pk-font-serif); font-style: italic; font-weight: 400; font-size: calc(38 * var(--pt)); line-height: 1; letter-spacing: -.01em; margin-top: calc(4 * var(--pt)); color: var(--pk-text); }
.i-meta { margin-top: calc(6 * var(--pt)); font-size: calc(15 * var(--pt)); color: var(--pk-text-2); font-variant-numeric: tabular-nums; }
.i-meta b { color: var(--pk-text); font-weight: 600; }
.i-prog { margin-top: calc(12 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 9px; background: var(--pk-bg-2); overflow: hidden; }
.i-prog i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--pk-packed); transition: width .45s var(--pk-ease-settle); }

/* ---------- Heading card ---------- */
.i-card { margin: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); padding: 0 calc(16 * var(--pt)) calc(4 * var(--pt)); border-radius: calc(20 * var(--pt)); background: var(--pk-card); box-shadow: var(--pk-shadow-card); }
[data-theme="dark"] .i-card, .i-card[data-theme="dark"] { box-shadow: 0 0 0 1px var(--pk-line); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .i-card { box-shadow: 0 0 0 1px var(--pk-line); } }
.i-hrow { display: flex; align-items: center; gap: calc(8 * var(--pt)); min-height: calc(50 * var(--pt)); width: 100%; font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.02em; }
.i-hrow .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i-hrow .c { 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; }
.i-hrow .chev { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: var(--pk-text-2); transition: transform .25s var(--pk-ease-settle); }
.i-hrow .allin { display: none; align-items: center; gap: calc(4 * var(--pt)); margin-left: auto; font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-packed); padding: calc(4 * var(--pt)) calc(9 * var(--pt)); border-radius: 99px; background: var(--pk-packed-tint); letter-spacing: 0; }
.i-hrow .allin svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); }
.i-card.full .allin { display: inline-flex; }
.i-card.full .i-hrow .c { display: none; }
.i-card.shut .chev { transform: rotate(-90deg); }
.i-card.shut .i-body { display: none; }
.i-card.shut { padding-bottom: 0; }
.i-hrow .h-ic { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); color: var(--pk-text-2); }

/* ---------- Item rows ---------- */
.i-list { margin: 0; padding: 0; list-style: none; }
.i-it { position: relative; overflow: hidden; }
.i-it + .i-it::before, .i-tail::before { content: ''; position: absolute; z-index: 3; left: calc(38 * var(--pt)); right: 0; top: 0; border-top: 1px dashed var(--pk-line-strong); pointer-events: none; }
.i-row { position: relative; z-index: 2; display: flex; align-items: center; gap: calc(14 * var(--pt)); width: 100%; min-height: calc(46 * var(--pt)); padding: calc(10 * var(--pt)) 0; background: var(--pk-card); font-size: calc(17 * var(--pt)); transition: transform .35s var(--pk-ease-settle); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.i-row .n { min-width: 0; flex: 1; transition: color .2s; }
.i-row .m { font-size: calc(13 * var(--pt)); color: var(--pk-text-2); white-space: nowrap; letter-spacing: 0; }
.i-cb { position: relative; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.6 * var(--pt)) var(--pk-control); display: grid; place-items: center; flex: none; transition: background .2s, box-shadow .2s; }
.i-cb svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: var(--pk-on-packed); opacity: 0; transform: scale(.3); transition: opacity .12s, transform .4s var(--pk-ease-settle); }
.i-it.on .i-cb { background: var(--pk-packed); box-shadow: inset 0 0 0 calc(12 * var(--pt)) var(--pk-packed); }
.i-it.on .i-cb svg { opacity: 1; transform: none; }
.i-it.on .n { color: var(--pk-text-2); }
.i-it.pop .i-cb { animation: i-settle .45s var(--pk-ease-settle); }
@keyframes i-settle { 0% { transform: scale(.82); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
.i-it.ig .i-cb { box-shadow: none; background: none; border: calc(1.6 * var(--pt)) dashed var(--pk-faint); }
.i-it.ig .n { color: var(--pk-text-2); text-decoration: line-through; text-decoration-color: var(--pk-control); }
.i-it.ig .m { font-weight: 600; }
.i-it.pressed .i-row { background: color-mix(in srgb, var(--pk-text) 5%, var(--pk-card)); }
.i-it.locked .i-row { cursor: default; }
.i-it.arrive { animation: i-arrive .45s var(--pk-ease-settle) both; }
@keyframes i-arrive { from { opacity: 0; transform: translateY(calc(8 * var(--pt))); } }
.i-it.hl .i-row { animation: i-hl 1.2s ease-out; }
@keyframes i-hl { 0%, 30% { background: var(--pk-accent-tint); } }

/* Swipe actions sit behind the row. */
.i-acts { position: absolute; z-index: 1; inset: calc(3 * var(--pt)) 0 calc(3 * var(--pt)) auto; display: flex; gap: calc(6 * var(--pt)); }
.i-act { width: calc(72 * var(--pt)); border-radius: calc(12 * 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; letter-spacing: 0; }
.i-act svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.i-act.ignore { background: var(--pk-text-2); color: var(--pk-bg); }
.i-act.delete { background: var(--pk-danger); color: var(--pk-on-danger); }
.i-it.swiped .i-row { transform: translateX(calc(-156 * var(--pt))); }
.i-it.swiped1 .i-row { transform: translateX(calc(-80 * var(--pt))); }
.i-it.dragging .i-row { transition: none; }

/* The long tail: the things that usually stay home. */
.i-tail { position: relative; }
.i-tailbtn { display: flex; align-items: center; gap: calc(14 * var(--pt)); width: 100%; min-height: calc(44 * var(--pt)); font-size: calc(15 * var(--pt)); color: var(--pk-text-2); }
.i-tailbtn .pl { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: var(--pk-bg-2); color: var(--pk-text-2); }
.i-tailbtn .pl svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); transition: transform .3s var(--pk-ease-settle); }
.i-tail.open .i-tailbtn .pl svg { transform: rotate(45deg); }
.i-tailbtn .chev { margin-left: auto; width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); transition: transform .25s; }
.i-tail.open .i-tailbtn .chev { transform: rotate(90deg); }
.i-taillist { display: none; margin: 0 calc(-8 * var(--pt)) calc(8 * var(--pt)); padding: calc(2 * var(--pt)) calc(8 * var(--pt)); border-radius: calc(14 * var(--pt)); background: var(--pk-bg-2); list-style: none; }
.i-tail.open .i-taillist { display: block; }
.i-tli { display: flex; align-items: center; gap: calc(12 * var(--pt)); min-height: calc(44 * var(--pt)); font-size: calc(16 * var(--pt)); color: var(--pk-text); }
.i-tli + .i-tli { border-top: 1px dashed var(--pk-line-strong); }
.i-tli .n { flex: 1; min-width: 0; }
.i-tli .m { font-size: calc(13 * var(--pt)); color: var(--pk-text-2); letter-spacing: 0; }
.i-bring { height: calc(30 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: 99px; background: var(--pk-card); color: var(--pk-accent); font-size: calc(14 * var(--pt)); font-weight: 600; box-shadow: 0 0 0 1px var(--pk-line); letter-spacing: 0; white-space: nowrap; }

/* ---------- Plan rows ---------- */
.i-plan .i-row { gap: calc(10 * var(--pt)); }
.i-dot { width: calc(6 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 50%; background: var(--pk-control); flex: none; margin: 0 calc(9 * var(--pt)); }
.i-plan .i-it + .i-it::before { left: calc(24 * var(--pt)); }
.i-addrow { display: flex; align-items: center; gap: calc(10 * var(--pt)); min-height: calc(44 * var(--pt)); font-size: calc(17 * var(--pt)); color: var(--pk-text-2); }
.i-addrow svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); margin: 0 calc(5 * var(--pt)); color: var(--pk-accent); }
.i-newhead { display: flex; align-items: center; gap: calc(10 * var(--pt)); margin: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); padding: 0 calc(16 * var(--pt)); min-height: calc(52 * var(--pt)); border-radius: calc(20 * var(--pt)); border: calc(1.5 * var(--pt)) dashed var(--pk-line-strong); font-size: calc(17 * var(--pt)); font-weight: 600; color: var(--pk-text-2); width: calc(100% - 24 * var(--pt)); }
.i-newhead svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: var(--pk-accent); }
.i-learned { display: inline-flex; align-items: center; gap: calc(4 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 600; color: var(--pk-packed); letter-spacing: 0; }
.i-learned svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); }

/* ---------- Buttons ---------- */
.i-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--pt)); height: calc(50 * var(--pt)); padding: 0 calc(22 * var(--pt)); border-radius: 99px; font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; transition: background var(--pk-dur-quick) var(--pk-ease-quick), transform .2s var(--pk-ease-settle), opacity .2s; }
.i-btn svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.i-btn.sm { height: calc(34 * var(--pt)); padding: 0 calc(14 * var(--pt)); font-size: calc(15 * var(--pt)); }
.i-btn.wide { width: 100%; }
.i-btn:active, .i-btn.is-pressed { transform: scale(.97); }
.i-btn.primary { background: var(--pk-accent); color: var(--pk-on-accent); }
.i-btn.primary:active, .i-btn.primary.is-pressed { background: var(--pk-accent-pressed); }
.i-btn.secondary { background: var(--pk-accent-tint); color: var(--pk-accent); }
.i-btn.secondary:active, .i-btn.secondary.is-pressed { background: color-mix(in srgb, var(--pk-accent) 20%, var(--pk-accent-tint)); }
.i-btn.quiet { background: none; color: var(--pk-accent); padding: 0 calc(10 * var(--pt)); }
.i-btn.quiet:active, .i-btn.quiet.is-pressed { background: var(--pk-bg-2); }
.i-btn.destructive { background: var(--pk-danger); color: var(--pk-on-danger); }
.i-btn.destructive.soft { background: var(--pk-bg-2); color: var(--pk-danger); }
.i-btn.destructive:active, .i-btn.destructive.is-pressed { filter: brightness(.9); }
.i-btn[disabled], .i-btn.is-disabled { background: var(--pk-bg-2); color: var(--pk-text-2); opacity: .7; transform: none; cursor: default; }
.i-btn.quiet[disabled], .i-btn.quiet.is-disabled { background: none; }
.i-btn.busy .spin { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: 50%; border: calc(2 * var(--pt)) solid currentColor; border-right-color: transparent; animation: i-spin .8s linear infinite; }
@keyframes i-spin { to { transform: rotate(360deg); } }
.i-btn:focus-visible, .i-field input:focus-visible, .i-seg button:focus-visible, .i-vd button:focus-visible { outline: 3px solid color-mix(in srgb, var(--pk-accent) 45%, transparent); outline-offset: 2px; }

/* ---------- We're off ---------- */
.i-cta { position: absolute; z-index: 45; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(104 * var(--pt)); }
.i-off { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--pt)); width: 100%; height: calc(56 * var(--pt)); border-radius: 99px; background: var(--pk-accent); color: var(--pk-on-accent); font-size: calc(18 * var(--pt)); font-weight: 600; letter-spacing: -.02em; box-shadow: var(--pk-shadow-button); transition: background .3s, transform .2s var(--pk-ease-settle), box-shadow .3s; overflow: hidden; }
.i-off:active { transform: scale(.97); background: var(--pk-accent-pressed); }
.i-off .left { font-size: calc(13 * var(--pt)); font-weight: 600; padding: calc(4 * var(--pt)) calc(9 * var(--pt)); border-radius: 99px; background: color-mix(in srgb, var(--pk-on-accent) 18%, transparent); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.i-off.allin { background: var(--pk-packed); color: var(--pk-on-packed); box-shadow: 0 8px 18px -10px rgba(60, 80, 30, .8); }
.i-off.allin .left { display: none; }
.i-off.gone { background: var(--pk-bg-2); color: var(--pk-text); box-shadow: 0 0 0 1px var(--pk-line); }
.i-off.gone .left { display: none; }
.i-off .shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-100%); }
.i-off.flash .shine { animation: i-shine .8s ease-out; }
@keyframes i-shine { to { transform: translateX(100%); } }

/* ---------- Text field and autocomplete ---------- */
.i-field { position: relative; }
.i-field label { display: block; font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); margin: 0 0 calc(6 * var(--pt)) calc(4 * var(--pt)); }
.i-field .box { display: flex; align-items: center; gap: calc(8 * var(--pt)); height: calc(46 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: calc(14 * var(--pt)); background: var(--pk-bg-2); box-shadow: inset 0 0 0 1px var(--pk-line); transition: box-shadow .2s; }
.i-field .box svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); color: var(--pk-accent); }
.i-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: calc(17 * var(--pt)); color: var(--pk-text); outline: none; letter-spacing: -.01em; }
.i-field input::placeholder { color: var(--pk-text-2); opacity: 1; }
.i-field.focus .box, .i-field .box:focus-within { 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) 16%, transparent); background: var(--pk-card); }
.i-field .caret { width: 2px; height: calc(22 * var(--pt)); background: var(--pk-accent); border-radius: 2px; animation: i-caret 1s steps(1) infinite; margin-left: -6px; }
@keyframes i-caret { 50% { opacity: 0; } }
.i-menu { position: relative; margin-top: calc(6 * var(--pt)); padding: calc(4 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--pk-raised); box-shadow: var(--pk-shadow-raised); list-style: none; }
.i-menu li { display: flex; align-items: center; gap: calc(10 * var(--pt)); min-height: calc(44 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: calc(12 * var(--pt)); font-size: calc(17 * var(--pt)); cursor: pointer; }
.i-menu li .n { flex: 1; min-width: 0; }
.i-menu li .n b { font-weight: 600; }
.i-menu li .m { font-size: calc(13 * var(--pt)); color: var(--pk-text-2); letter-spacing: 0; white-space: nowrap; }
.i-menu li.sel { background: var(--pk-bg-2); }
.i-menu li.new { color: var(--pk-accent); font-weight: 600; }
.i-menu li.new svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.i-menu .hd { min-height: calc(30 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 600; color: var(--pk-text-2); cursor: default; letter-spacing: 0; }

/* ---------- Verdict control ---------- */
.i-vd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(4 * var(--pt)); padding: calc(3 * var(--pt)); border-radius: 99px; background: var(--pk-bg-2); }
.i-vd button { display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 99px; font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); white-space: nowrap; letter-spacing: -.01em; transition: background .2s, color .2s, transform .25s var(--pk-ease-settle), box-shadow .2s; min-width: 0; padding: 0 calc(4 * var(--pt)); }
.i-vd button svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.i-vd button:active { transform: scale(.95); }
.i-vd button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(46, 33, 24, .12); }
.i-vd [data-v="forgot"][aria-pressed="true"] { background: var(--pk-forgot-tint); color: var(--pk-forgot); }
.i-vd [data-v="never"][aria-pressed="true"] { background: var(--pk-never-tint); color: var(--pk-never); }
.i-vd [data-v="glad"][aria-pressed="true"] { background: var(--pk-glad); color: var(--pk-on-glad); }
.i-vrow { padding: calc(12 * var(--pt)) 0; display: grid; gap: calc(8 * var(--pt)); }
.i-vrow + .i-vrow { border-top: 1px dashed var(--pk-line-strong); }
.i-vrow .t { display: flex; align-items: baseline; gap: calc(8 * var(--pt)); font-size: calc(17 * var(--pt)); }
.i-vrow .t .m { margin-left: auto; font-size: calc(13 * var(--pt)); color: var(--pk-text-2); letter-spacing: 0; white-space: nowrap; }
.i-vrow.pop .i-vd { animation: i-settle .45s var(--pk-ease-settle); }

/* Verdict chips (read-only) */
.i-chip { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); height: calc(26 * var(--pt)); padding: 0 calc(10 * var(--pt)); border-radius: 99px; font-size: calc(13 * var(--pt)); font-weight: 600; white-space: nowrap; letter-spacing: 0; }
.i-chip svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.i-chip.forgot { background: var(--pk-forgot-tint); color: var(--pk-forgot); }
.i-chip.never { background: var(--pk-never-tint); color: var(--pk-never); }
.i-chip.glad { background: var(--pk-glad-tint); color: var(--pk-glad-ink); }
.i-chip.packed { background: var(--pk-packed-tint); color: var(--pk-packed); }

/* Forgot card */
.i-card.forgotc { background: var(--pk-forgot-tint); box-shadow: none; }
.i-card.forgotc .i-hrow { color: var(--pk-forgot); }
.i-card.forgotc .i-hrow .c { color: var(--pk-forgot); }
.i-frow { padding: calc(10 * var(--pt)) 0; font-size: calc(17 * var(--pt)); }
.i-frow + .i-frow { border-top: 1px dashed color-mix(in srgb, var(--pk-forgot) 25%, transparent); }
.i-frow small { display: block; margin-top: calc(2 * var(--pt)); font-size: calc(13 * var(--pt)); color: var(--pk-text-2); letter-spacing: 0; }
.i-card.forgotc .i-addrow { color: var(--pk-forgot); }
.i-card.forgotc .i-addrow svg { color: var(--pk-forgot); }
.i-prompt { padding: calc(10 * var(--pt)) calc(22 * var(--pt)) calc(10 * var(--pt)); font-family: var(--pk-font-serif); font-style: italic; font-size: calc(24 * var(--pt)); line-height: 1.1; letter-spacing: -.005em; }

/* ---------- Tab bar (iOS 26, floating) ---------- */
.i-tabs { position: absolute; z-index: 46; left: calc(22 * var(--pt)); right: calc(22 * var(--pt)); bottom: calc(26 * var(--pt)); height: calc(64 * var(--pt)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: calc(5 * var(--pt)); border-radius: 99px; background: color-mix(in srgb, var(--pk-card) 78%, transparent); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 0 0 .5px var(--pk-line-strong), 0 10px 30px -12px rgba(28, 20, 16, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
[data-theme="dark"] .i-tabs { background: color-mix(in srgb, var(--pk-raised) 82%, transparent); box-shadow: 0 0 0 .5px var(--pk-line-strong), 0 10px 30px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .i-tabs { background: color-mix(in srgb, var(--pk-raised) 82%, transparent); box-shadow: 0 0 0 .5px var(--pk-line-strong), 0 10px 30px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); } }
.i-tabs.static { position: relative; left: auto; right: auto; bottom: auto; }
.i-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--pt)); border-radius: 99px; font-size: calc(11 * var(--pt)); font-weight: 600; color: var(--pk-text); letter-spacing: 0; transition: background .25s, color .25s; position: relative; }
.i-tabs button svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.i-tabs button.on { color: var(--pk-accent); background: color-mix(in srgb, var(--pk-accent) 11%, transparent); }
.i-tabs .badge { position: absolute; top: calc(4 * var(--pt)); left: calc(50% + 6 * var(--pt)); min-width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); padding: 0 calc(5 * var(--pt)); border-radius: 99px; background: var(--pk-accent); color: var(--pk-on-accent); font-size: calc(11 * var(--pt)); display: grid; place-items: center; font-variant-numeric: tabular-nums; }

/* ---------- Segmented control ---------- */
.i-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(34 * var(--pt)); padding: calc(2 * var(--pt)); border-radius: 99px; background: var(--pk-bg-2); box-shadow: inset 0 0 0 1px var(--pk-line); }
.i-seg .thumb { position: absolute; z-index: 0; top: calc(2 * var(--pt)); bottom: calc(2 * var(--pt)); left: calc(2 * var(--pt)); border-radius: 99px; background: var(--pk-raised); box-shadow: 0 1px 3px rgba(28, 20, 16, .16), 0 0 0 .5px var(--pk-line); transition: transform .4s var(--pk-ease-settle), width .4s var(--pk-ease-settle); }
.i-seg button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); border-radius: 99px; transition: color .2s; white-space: nowrap; letter-spacing: 0; }
.i-seg button[aria-pressed="true"] { color: var(--pk-text); }
.i-seg button .ct { font-weight: 500; color: var(--pk-text-2); font-variant-numeric: tabular-nums; }

/* ---------- Banner nudge ---------- */
.i-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(10 * var(--pt)); align-items: center; padding: calc(12 * var(--pt)) calc(12 * var(--pt)) calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--pk-glad-tint); color: var(--pk-text); font-size: calc(15 * var(--pt)); line-height: 1.3; }
.i-banner b { font-weight: 600; }
.i-banner .acts { display: flex; gap: calc(6 * var(--pt)); align-items: center; }
.i-banner .x { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: 50%; display: grid; place-items: center; color: var(--pk-text-2); }
.i-banner .x svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.i-banner.offline { background: var(--pk-bg-2); color: var(--pk-text-2); grid-template-columns: auto minmax(0, 1fr); }
.i-banner.offline svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.i-banner.gone { display: none; }
.i-card .i-banner { margin: 0 0 calc(10 * var(--pt)); }

/* ---------- Toast ---------- */
.i-toast { display: inline-flex; align-items: center; gap: calc(12 * var(--pt)); height: calc(46 * var(--pt)); padding: 0 calc(8 * var(--pt)) 0 calc(18 * var(--pt)); border-radius: 99px; background: var(--pk-text); color: var(--pk-bg); font-size: calc(15 * var(--pt)); font-weight: 600; box-shadow: var(--pk-shadow-raised); white-space: nowrap; letter-spacing: -.01em; max-width: 100%; }
.i-toast .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.i-toast svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.i-toast .act { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); height: calc(32 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: 99px; background: color-mix(in srgb, var(--pk-bg) 16%, transparent); color: var(--pk-bg); font-weight: 600; }
.i-toast.solo { padding-right: calc(18 * var(--pt)); }
.i-toastw { position: absolute; z-index: 48; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(172 * var(--pt)); display: flex; justify-content: center; pointer-events: none; transform: translateY(calc(16 * var(--pt))); opacity: 0; transition: transform .45s var(--pk-ease-settle), opacity .2s; }
.i-toastw.on { transform: none; opacity: 1; pointer-events: auto; }
.i-toast .ring { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); transform: rotate(-90deg); }
.i-toast .ring circle { fill: none; stroke-width: 3; }
.i-toast .ring .tr { stroke: color-mix(in srgb, var(--pk-bg) 25%, transparent); }
.i-toast .ring .rn { stroke: var(--pk-bg); stroke-dasharray: 100; stroke-dashoffset: 0; }
.i-toastw.on .ring .rn { animation: i-ring var(--pk-undo-window, 6s) linear forwards; }
@keyframes i-ring { to { stroke-dashoffset: 100; } }

/* ---------- Sheet ---------- */
.i-sheet { position: relative; padding: calc(8 * var(--pt)) calc(20 * var(--pt)) calc(20 * var(--pt)); border-radius: calc(34 * var(--pt)); background: var(--pk-raised); box-shadow: var(--pk-shadow-sheet), 0 0 0 .5px var(--pk-line); text-align: center; }
.i-sheet .grab { width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 9px; background: var(--pk-line-strong); margin: 0 auto calc(10 * var(--pt)); }
.i-sheet h4 { margin: calc(2 * var(--pt)) 0 0; font-family: var(--pk-font-serif); font-style: italic; font-weight: 400; font-size: calc(32 * var(--pt)); line-height: 1; letter-spacing: -.01em; }
.i-sheet p { margin: calc(8 * var(--pt)) auto 0; font-size: calc(15 * var(--pt)); color: var(--pk-text-2); line-height: 1.35; max-width: calc(280 * var(--pt)); }
.i-sheet .rat { width: calc(130 * var(--pt)); margin: 0 auto; }
.i-sheet .acts { display: grid; gap: calc(8 * var(--pt)); margin-top: calc(18 * var(--pt)); }
.i-sheet .stats { display: flex; justify-content: center; gap: calc(6 * var(--pt)); margin-top: calc(12 * var(--pt)); flex-wrap: wrap; }
.i-sheetw { position: absolute; z-index: 55; left: calc(8 * var(--pt)); right: calc(8 * var(--pt)); bottom: calc(8 * var(--pt)); transform: translateY(110%); transition: transform .55s var(--pk-ease-set-down); }
.i-sheetw.on { transform: none; }
.i-scrim { position: absolute; z-index: 54; inset: 0; background: var(--pk-scrim); opacity: 0; pointer-events: none; transition: opacity .35s; }
.i-scrim.on { opacity: 1; pointer-events: auto; }

/* ---------- Empty states ---------- */
.i-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(10 * var(--pt)) calc(26 * var(--pt)) calc(20 * var(--pt)); }
.i-empty .rat { width: calc(170 * var(--pt)); }
.i-empty h5 { margin: calc(4 * var(--pt)) 0 0; font-family: var(--pk-font-serif); font-style: italic; font-weight: 400; font-size: calc(28 * var(--pt)); line-height: 1.05; letter-spacing: -.01em; }
.i-empty p { margin: calc(8 * var(--pt)) 0 0; font-size: calc(15 * var(--pt)); color: var(--pk-text-2); line-height: 1.35; max-width: calc(270 * var(--pt)); }
.i-empty .i-btn, .i-empty .i-field { margin-top: calc(18 * var(--pt)); }
.i-empty .i-field { width: 100%; text-align: left; }
.i-empty.plain { padding-top: calc(40 * var(--pt)); }
.i-empty.plain .ico { width: calc(54 * var(--pt)); height: calc(54 * var(--pt)); border-radius: 50%; background: var(--pk-bg-2); display: grid; place-items: center; color: var(--pk-text-2); }
.i-empty.plain .ico svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.i-empty.plain h5 { font-family: var(--pk-font-app); font-style: normal; font-weight: 600; font-size: calc(20 * var(--pt)); letter-spacing: -.02em; margin-top: calc(12 * var(--pt)); }

/* ---------- Settings ---------- */
.i-large { padding: calc(8 * var(--pt)) calc(20 * var(--pt)) calc(10 * var(--pt)); font-size: calc(34 * var(--pt)); font-weight: 700; letter-spacing: -.03em; }
.i-gtitle { padding: calc(14 * var(--pt)) calc(32 * var(--pt)) calc(6 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; }
.i-group { margin: 0 calc(16 * var(--pt)); border-radius: calc(20 * var(--pt)); background: var(--pk-card); box-shadow: var(--pk-shadow-card); overflow: hidden; list-style: none; padding: 0; }
[data-theme="dark"] .i-group { box-shadow: 0 0 0 1px var(--pk-line); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .i-group { box-shadow: 0 0 0 1px var(--pk-line); } }
.i-group li { position: relative; display: flex; align-items: center; gap: calc(12 * var(--pt)); min-height: calc(50 * var(--pt)); padding: calc(6 * var(--pt)) calc(16 * var(--pt)); font-size: calc(17 * var(--pt)); }
.i-group li + li::before { content: ''; position: absolute; top: 0; right: 0; left: calc(56 * var(--pt)); border-top: .5px solid var(--pk-line-strong); }
.i-group li.noic + li::before, .i-group.noic li + li::before { left: calc(16 * var(--pt)); }
.i-group .gi { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: calc(8 * var(--pt)); display: grid; place-items: center; color: #fff; flex: none; }
.i-group .gi svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.i-group .n { flex: 1; min-width: 0; }
.i-group .n small { display: block; font-size: calc(13 * var(--pt)); color: var(--pk-text-2); letter-spacing: 0; margin-top: calc(1 * var(--pt)); }
.i-group .v { color: var(--pk-text-2); font-size: calc(17 * var(--pt)); white-space: nowrap; }
.i-group .chev { width: calc(8 * var(--pt)); height: calc(13 * var(--pt)); color: var(--pk-control); }
.i-group li.danger { color: var(--pk-danger); }
.i-switch { position: relative; width: calc(51 * var(--pt)); height: calc(31 * var(--pt)); border-radius: 99px; background: var(--pk-line-strong); flex: none; transition: background .25s; }
.i-switch::after { content: ''; position: absolute; left: calc(2 * var(--pt)); top: calc(2 * var(--pt)); width: calc(27 * var(--pt)); height: calc(27 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .3s var(--pk-ease-settle); }
.i-switch[aria-checked="true"] { background: var(--pk-packed); }
.i-switch[aria-checked="true"]::after { transform: translateX(calc(20 * var(--pt))); }
.i-iconpick { display: flex; gap: calc(10 * var(--pt)); }
.i-iconpick span { width: calc(46 * var(--pt)); height: calc(46 * var(--pt)); border-radius: calc(11 * var(--pt)); overflow: hidden; box-shadow: 0 0 0 1px var(--pk-line); }
.i-iconpick span.on { box-shadow: 0 0 0 calc(2 * var(--pt)) var(--pk-bg), 0 0 0 calc(4 * var(--pt)) var(--pk-accent); }
.i-iconpick svg { width: 100%; height: 100%; }
.i-foot { padding: calc(20 * var(--pt)) calc(32 * var(--pt)); font-size: calc(13 * var(--pt)); color: var(--pk-text-2); text-align: center; letter-spacing: 0; }
.i-foot .rat { width: calc(64 * var(--pt)); margin: 0 auto calc(6 * var(--pt)); }

/* ---------- Lock screen, widgets, Live Activity ---------- */
.lock { --sb-fg: #fff; --home-fg: #fff; }
.lock .scr { background: #2d2622; }
.ls-wall { position: absolute; inset: 0; }
.ls-wall svg { width: 100%; height: 100%; }
.ls-top { position: absolute; z-index: 5; top: calc(64 * var(--pt)); left: 0; right: 0; text-align: center; color: #fff; }
.ls-date { font-weight: 600; font-size: calc(18 * var(--pt)); opacity: .92; letter-spacing: -.01em; }
.ls-time { font-family: var(--pk-font-serif); font-size: calc(104 * var(--pt)); line-height: .95; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, .15); }
.ls-widgets { display: flex; justify-content: center; gap: calc(10 * var(--pt)); margin-top: calc(6 * var(--pt)); }
.lw { color: #fff; background: rgba(255, 255, 255, .17); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--pk-font-app); }
.lw-circ { position: relative; width: calc(72 * var(--pt)); height: calc(72 * var(--pt)); border-radius: 50%; display: grid; place-items: center; }
.lw-circ svg { position: absolute; inset: calc(5 * var(--pt)); width: calc(62 * var(--pt)); height: calc(62 * var(--pt)); transform: rotate(-90deg); }
.lw-circ .tr { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 3.6; }
.lw-circ .rn, .ring-rn { fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 33; transition: stroke-dashoffset .5s var(--pk-ease-settle); }
.lw-circ span { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.lw-circ b { font-size: calc(24 * var(--pt)); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lw-circ small { font-size: calc(10 * var(--pt)); font-weight: 600; opacity: .8; margin-top: calc(1 * var(--pt)); letter-spacing: 0; }
.lw-rect { width: calc(170 * var(--pt)); height: calc(72 * var(--pt)); border-radius: calc(20 * var(--pt)); padding: calc(9 * var(--pt)) calc(13 * var(--pt)); text-align: left; display: flex; flex-direction: column; justify-content: center; }
.lw-rect .t { display: flex; align-items: center; gap: calc(5 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; opacity: .85; white-space: nowrap; letter-spacing: 0; }
.lw-rect .t svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.lw-rect .big { font-size: calc(21 * var(--pt)); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lw-rect .sub { font-size: calc(13 * var(--pt)); opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.lw-inline { font-size: calc(17 * var(--pt)); font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); margin-bottom: calc(2 * var(--pt)); opacity: .9; }
.lw-inline svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.ls-live { position: absolute; z-index: 5; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); bottom: calc(108 * var(--pt)); }
.la { border-radius: calc(26 * var(--pt)); padding: calc(14 * var(--pt)) calc(16 * var(--pt)); color: #fff; background: rgba(28, 20, 16, .62); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); font-family: var(--pk-font-app); }
.la.solid { background: #1c1410; }
.la-top { display: flex; align-items: center; gap: calc(10 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 600; letter-spacing: -.01em; }
.la-top .ttl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-top .ttl small { display: block; font-size: calc(13 * var(--pt)); font-weight: 500; opacity: .7; letter-spacing: 0; }
.la-ic { width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: calc(9 * var(--pt)); background: #fcf1dc; display: grid; place-items: center; overflow: hidden; flex: none; }
.la-ic .rat { width: calc(28 * var(--pt)); margin-top: calc(2 * var(--pt)); }
.la-count { margin-left: auto; font-size: calc(26 * var(--pt)); font-weight: 600; color: #f6c27a; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.la-count small { font-size: calc(13 * var(--pt)); color: #fff; opacity: .7; font-weight: 500; letter-spacing: 0; }
.la-bar { margin-top: calc(12 * var(--pt)); height: calc(7 * var(--pt)); border-radius: 9px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.la-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #8fb466, #b9d38c); transition: width .5s var(--pk-ease-settle); width: 0; }
.la-bot { margin-top: calc(12 * var(--pt)); display: flex; align-items: center; gap: calc(10 * var(--pt)); }
.la-next { flex: 1; min-width: 0; font-size: calc(13 * var(--pt)); opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.la-btn { height: calc(32 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: 99px; background: #e8845a; color: #1c1410; font-size: calc(14 * var(--pt)); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; letter-spacing: 0; }
.pk-gone .la-btn { background: rgba(255, 255, 255, .2); color: #fff; }

.isl { background: #000; color: #fff; font-family: var(--pk-font-app); }
.isl-g { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); border-radius: 50%; background: #fcf1dc; display: grid; place-items: center; flex: none; overflow: hidden; }
.isl-g .rat { width: calc(23 * var(--pt)); margin-top: calc(3 * var(--pt)); }
.isl-compact { width: calc(250 * var(--pt)); height: calc(37 * var(--pt)); border-radius: 99px; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(12 * var(--pt)) 0 calc(6 * var(--pt)); }
.isl-compact .ii-n { font-weight: 600; font-size: calc(16 * var(--pt)); color: #f6c27a; font-variant-numeric: tabular-nums; }
.isl-min { width: calc(37 * var(--pt)); height: calc(37 * var(--pt)); border-radius: 50%; display: grid; place-items: center; }
.isl-ring { position: relative; width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); display: grid; place-items: center; }
.isl-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.isl-ring .tr { fill: none; stroke: rgba(246, 194, 122, .3); stroke-width: 4; }
.isl-ring .ring-rn { stroke: #f6c27a; stroke-width: 4; }
.isl-ring b { font-size: calc(11 * var(--pt)); color: #f6c27a; font-weight: 700; font-variant-numeric: tabular-nums; }
.isl-exp { width: calc(370 * var(--pt)); max-width: 100%; border-radius: calc(44 * var(--pt)); padding: calc(18 * var(--pt)) calc(20 * var(--pt)); }
.isl-exp .la-bot { margin-top: calc(14 * var(--pt)); }

/* Home-screen widgets */
.hw { border-radius: calc(22 * var(--pt)); background: var(--pk-card); color: var(--pk-text); padding: calc(14 * var(--pt)) calc(15 * var(--pt)); font-family: var(--pk-font-app); box-shadow: 0 0 0 .5px var(--pk-line), 0 6px 16px -10px rgba(28, 20, 16, .5); overflow: hidden; position: relative; }
.hw-s { width: calc(170 * var(--pt)); height: calc(170 * var(--pt)); display: flex; flex-direction: column; }
.hw-m { width: calc(364 * var(--pt)); max-width: 100%; height: calc(170 * var(--pt)); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: calc(14 * var(--pt)); }
.hw .k { font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; display: flex; align-items: center; gap: calc(5 * var(--pt)); }
.hw .k .rat { width: calc(18 * var(--pt)); }
.hw .ttl { font-family: var(--pk-font-serif); font-style: italic; font-size: calc(24 * var(--pt)); line-height: 1; margin-top: calc(4 * var(--pt)); letter-spacing: -.01em; }
.hw .num { margin-top: auto; font-size: calc(44 * var(--pt)); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hw .num small { font-size: calc(15 * var(--pt)); font-weight: 500; color: var(--pk-text-2); letter-spacing: 0; }
.hw .bar { margin-top: calc(8 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 9px; background: var(--pk-bg-2); overflow: hidden; }
.hw .bar i { display: block; height: 100%; background: var(--pk-packed); border-radius: 9px; transition: width .5s var(--pk-ease-settle); }
.hw ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(2 * var(--pt)); align-content: start; }
.hw li { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-size: calc(14 * var(--pt)); min-height: calc(26 * var(--pt)); border-bottom: 1px dashed var(--pk-line-strong); letter-spacing: -.01em; }
.hw li:last-child { border: 0; }
.hw li i { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.4 * var(--pt)) var(--pk-control); flex: none; }
.hw li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw .hd { font-size: calc(12 * var(--pt)); font-weight: 600; color: var(--pk-text-2); letter-spacing: 0; margin-bottom: calc(2 * var(--pt)); }

/* Watch */
.wt { position: relative; flex: none; --wt-w: 184px; --wpt: calc(var(--wt-w) / 205); width: var(--wt-w); }
.wt-case { width: var(--wt-w); height: calc(var(--wt-w) * 1.2); border-radius: calc(var(--wt-w) * .29); padding: calc(var(--wt-w) * .055); background: #1a1716; box-shadow: inset 0 0 0 1.5px #3b3735, 0 26px 44px -22px rgba(0, 0, 0, .55); }
.wt-screen { width: 100%; height: 100%; border-radius: calc(var(--wt-w) * .24); background: #000; color: #fff; overflow: hidden; padding: calc(16 * var(--wpt)) calc(12 * var(--wpt)) calc(10 * var(--wpt)); font-family: var(--pk-font-app); }
.wt-top { display: flex; align-items: center; gap: calc(6 * var(--wpt)); font-size: calc(15 * var(--wpt)); font-weight: 600; color: #f6c27a; padding: 0 calc(8 * var(--wpt)) calc(8 * var(--wpt)); letter-spacing: -.01em; }
.wt-top .tm { margin-left: auto; color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.wt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(5 * var(--wpt)); }
.wt li button { width: 100%; display: flex; align-items: center; gap: calc(10 * var(--wpt)); height: calc(38 * var(--wpt)); padding: 0 calc(10 * var(--wpt)); border-radius: calc(14 * var(--wpt)); background: #232120; font-size: calc(15 * var(--wpt)); font-weight: 500; color: #fff; transition: background .2s, color .2s; letter-spacing: -.01em; }
.wt-cb { width: calc(20 * var(--wpt)); height: calc(20 * var(--wpt)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.8 * var(--wpt)) #77706b; display: grid; place-items: center; flex: none; transition: background .2s, box-shadow .2s; }
.wt-cb svg { width: calc(12 * var(--wpt)); height: calc(12 * var(--wpt)); opacity: 0; color: #1c1410; transition: opacity .15s; }
.wt li.on .wt-cb { background: #9cc072; box-shadow: none; } .wt li.on .wt-cb svg { opacity: 1; }
.wt li.on button { color: #9a928c; }
.wt-crown { position: absolute; right: calc(var(--wt-w) * -.035); top: 22%; width: calc(var(--wt-w) * .05); height: calc(var(--wt-w) * .17); border-radius: 3px; background: linear-gradient(90deg, #2c2a29, #4a4644); }
.wt-btn { position: absolute; right: calc(var(--wt-w) * -.02); top: 45%; width: calc(var(--wt-w) * .03); height: calc(var(--wt-w) * .2); border-radius: 2px; background: #2c2a29; }