/* ORELYS Perso on the phone (perphone.js): the black of the PC's Perso, one column, everything within reach of the thumb */
.pp-screen { position: fixed; inset: 0; z-index: 40; }
.pp { --pg: #080909; --sl: #161817; --sl2: #1d201f; --pi: #eef1ef; --pi2: #b3bab6; --pm: #7d8582; --pl: #262a29; height: 100%; display: flex; flex-direction: column; background: var(--pg); color: var(--pi); font-size: 14.5px; line-height: 1.4; padding-top: env(safe-area-inset-top, 0px); }
.pp svg { width: 18px; height: 18px; display: block; }
.pp button { font: inherit; color: inherit; }
.pp-top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex: none; }
.pp-top b { font-weight: 600; font-size: 12px; letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-top span { flex: 1; }
.pp-ib { width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: var(--sl); color: var(--pi2) !important; display: grid; place-items: center; }
.pp-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.pp-h { font-size: 23px; font-weight: 600; letter-spacing: -.01em; margin: 0; } .pp-h span { color: var(--pm); font-weight: 400; font-size: 16px; }
.pp-sub { margin: 0; color: var(--pm); font-size: 13px; text-transform: capitalize; }
.pp-empty { color: var(--pm); text-align: center; padding: 22px 12px; margin: 0; font-size: 14px; }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pp-blk { grid-column: 1 / -1; position: relative; min-width: 0; border-radius: 15px; background: var(--sl); padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; }
.pp-blk.half { grid-column: auto; }
.pp-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pm); min-height: 18px; }
.pp-r { display: flex; justify-content: space-between; gap: 10px; } .pp-r span:last-child { color: var(--pi2); font-size: 12.5px; white-space: nowrap; }
.pp-num { font-size: 25px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .pp-num small { font-size: 12px; color: var(--pm); margin-left: 5px; letter-spacing: 0; }
.pp-mini { display: block; height: 4px; border-radius: 9px; background: var(--pl); overflow: hidden; margin-top: 4px; } .pp-mini i { display: block; height: 100%; background: var(--c, #d9dedb); } .pp-mini.big { height: 8px; }
.pp-pl { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--sl2); color: var(--pi) !important; display: grid; place-items: center; } .pp-pl svg { width: 14px; height: 14px; }
.pp-move { display: flex; gap: 6px; justify-content: flex-end; } .pp-move button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--sl2); display: grid; place-items: center; } .pp-move svg { width: 15px; height: 15px; }
/* the bottom bar and Orelys */
.pp-ask { flex: none; display: flex; align-items: center; gap: 7px; margin: 0 12px 8px; background: var(--sl2); border-radius: 14px; padding: 5px 6px 5px 12px; }
.pp-ask input { flex: 1; min-width: 0; border: 0; background: none; color: var(--pi); font: inherit; font-size: 16px; outline: none; }
.pp-ask button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #e8ecea; color: #0b0c0c !important; display: grid; place-items: center; } .pp-ask svg { width: 15px; height: 15px; }
.pp-nav { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pl); background: var(--pg); }
.pp-nav button { border: 0; background: none; color: var(--pm) !important; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; min-width: 0; padding: 2px 0; }
.pp-nav button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pp-nav .on { color: var(--pi) !important; }
/* tiles */
.pp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-tile { border: 0; border-radius: 13px; background: var(--sl); padding: 10px 11px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; text-align: left; min-width: 0; }
.pp-tile svg { color: var(--c); margin-bottom: 3px; } .pp-tile b { font-weight: 500; font-size: 13.5px; } .pp-tile small { color: var(--pm); font-size: 11.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-tile.sel { outline: 1.5px solid var(--c); }
.pp-link { border: 0; background: none; color: var(--pi2) !important; text-decoration: underline; font-size: 13px !important; padding: 4px; }
/* tabs and rows */
.pp-tabs { display: flex; gap: 6px; overflow-x: auto; flex: none; scrollbar-width: none; } .pp-tabs::-webkit-scrollbar { display: none; } .pp-tabs.wrap { flex-wrap: wrap; }
.pp-tabs button { flex: none; border: 0; padding: 7px 13px; border-radius: 99px; background: var(--sl); color: var(--pi2) !important; font-size: 13.5px; }
.pp-tabs button.on { background: var(--pi); color: #0b0c0c !important; font-weight: 500; } .pp-tabs.small button { padding: 6px 11px; text-transform: capitalize; }
.pp-pane { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.pp-list { display: flex; flex-direction: column; gap: 6px; }
.pp-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 12px; background: var(--sl); padding: 10px 12px; text-align: left; min-width: 0; min-height: 46px; }
.pp-item.off { opacity: .55; } .pp-item.off b { text-decoration: line-through; }
.pp-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; text-align: left; }
.pp-it { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pp-it b { font-weight: 500; overflow-wrap: anywhere; } .pp-it small { color: var(--pm); font-size: 12.5px; }
.pp-end { flex: none; color: var(--pi2); font-size: 12.5px; font-variant-numeric: tabular-nums; } .pp-end.big { flex: 0 1 62%; text-align: right; font-size: 14px; color: var(--pi); }
.pp-th { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; }
.pp-tick { flex: none; border: 1px solid var(--pl); background: none; border-radius: 99px; padding: 6px 12px; font-size: 12.5px; } .pp-tick.on { background: var(--c); border-color: var(--c); color: #0b0c0c !important; }
.pp-box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1.5px solid var(--pm); background: none; } .pp-box.on { background: var(--c); border-color: var(--c); }
.pp-x { border: 0; background: none; color: var(--pm) !important; padding: 4px; } .pp-x svg { width: 15px; height: 15px; }
.pp-add { display: flex; align-items: center; justify-content: center; gap: 7px; flex: none; width: 100%; border: 1px dashed var(--pl); border-radius: 12px; background: none; color: var(--pi2) !important; padding: 11px; font-size: 14px; } .pp-add svg { width: 15px; height: 15px; }
.pp-days { display: flex; gap: 6px; overflow-x: auto; flex: none; scrollbar-width: none; } .pp-days::-webkit-scrollbar { display: none; }
.pp-days button { flex: none; width: 46px; border: 0; border-radius: 12px; background: var(--sl); padding: 6px 0; display: flex; flex-direction: column; align-items: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.pp-days small { font-size: 10.5px; color: var(--pm); text-transform: capitalize; } .pp-days .on { background: var(--pi); color: #0b0c0c !important; } .pp-days .on small { color: #4a504d; }
.pp-ev { display: grid; grid-template-columns: 44px 1fr; gap: 9px; width: 100%; border: 0; border-radius: 11px; background: var(--sl); box-shadow: inset 2px 0 0 var(--c); padding: 9px 11px; text-align: left; }
.pp-ev time { font-size: 12px; color: var(--pm); padding-top: 2px; font-variant-numeric: tabular-nums; }
.pp-water { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px; } .pp-water button { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--pl); background: var(--sl); font-size: 24px; }
.pp-water div { text-align: center; } .pp-water b { display: block; font-size: 42px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; } .pp-water small { color: var(--pm); }
.pp-write { width: 100%; flex: none; height: 26vh; border: 0; border-radius: 12px; background: var(--sl); color: var(--pi); font: inherit; font-size: 16px; padding: 11px 12px; resize: none; outline: none; }
.pp-quick { display: flex; gap: 8px; flex: none; } .pp-quick input { flex: 1; min-width: 0; border: 0; border-radius: 12px; background: var(--sl); color: var(--pi); font: inherit; font-size: 16px; padding: 11px 12px; outline: none; }
.pp-quick button { width: 44px; border: 0; border-radius: 12px; background: var(--pi); color: #0b0c0c !important; display: grid; place-items: center; }
/* the form */
.pp-veil { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.pp-sheet { --pg: #080909; --sl: #161817; --sl2: #1d201f; --pi: #eef1ef; --pi2: #b3bab6; --pm: #7d8582; --pl: #2c302e; width: 100%; max-height: 86%; overflow-y: auto; background: var(--sl); color: var(--pi); border-radius: 20px 20px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.pp-sheet h3 { margin: 0; font-size: 17px; font-weight: 600; }
.pp-f { display: flex; flex-direction: column; gap: 3px; } .pp-f > span { font-size: 12.5px; color: var(--pm); }
.pp-f input:not([type=range]):not([type=file]), .pp-f select, .pp-f textarea { width: 100%; border: 1px solid var(--pl); border-radius: 10px; background: var(--sl2); color: var(--pi); font: inherit; font-size: 16px; padding: 9px 11px; outline: none; }
.pp-f input[type=range] { width: 100%; accent-color: #e8ecea; } .pp-f input[type=file] { color: var(--pm); font-size: 13px; } .pp-prev { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; margin-top: 4px; }
.pp-row { display: flex; gap: 8px; margin-top: 2px; } .pp-row button { flex: 1; border: 0; border-radius: 11px; padding: 11px 6px; font: inherit; font-size: 14px; }
.pp-ok { background: #e8ecea; color: #0b0c0c !important; font-weight: 500; border: 0; border-radius: 11px; padding: 11px; } .pp-ok.wide { width: 100%; flex: none; } .pp-no { background: var(--sl2); color: var(--pi) !important; } .pp-del { background: none; color: #e0766c !important; }