/* Pocket brand and mobile layout; larger screens retain the fitted ledger. */
.pocket-row-meta,.pocket-log-add,.pocket-picker,.pocket-pad-open,.pocket-entry-types{display:none}
#pocketSheet{box-sizing:border-box;width:min(560px,100%);max-width:100%;max-height:85dvh;margin:auto auto 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));border:1px solid var(--line);border-radius:24px 24px 0 0;background:var(--p,#fff);color:var(--ink,#29183f);overflow:auto;overscroll-behavior:contain}
#pocketSheet::backdrop{background:#190b2c75}
#pocketSheet header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#pocketSheet h2{font-size:20px;margin:0}#pocketSheet button{min-height:44px;font:inherit;cursor:pointer}
#pocketSheet input{box-sizing:border-box;width:100%;font-size:16px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px}
.pocket-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
#pocketSheet .pocket-choice{display:grid;gap:8px;text-align:left;min-width:0;padding:18px 12px;border:1px solid var(--line);border-radius:16px;background:var(--p);color:var(--ink);overflow-wrap:anywhere}
#pocketSheet .pocket-choice small{color:var(--muted)}
#pocketSheet .pocket-choice[aria-pressed=true]{border:2px solid var(--b);background:color-mix(in srgb,var(--b) 12%,var(--p))}
#pocketSheet .pocket-pad-value{font-size:34px;font-weight:750;font-variant-numeric:tabular-nums}
.pocket-pad-note{font-size:13px;color:var(--muted)}.pocket-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#pocketSheet .pocket-keypad button{border:0;border-radius:13px;background:color-mix(in srgb,var(--b) 9%,var(--p));color:var(--ink);min-height:54px;font-size:24px;font-weight:650}
#pocketSheet .pocket-pad-done{width:100%;margin-top:12px;background:var(--b);color:#fff}
@media(max-width:680px){
 body #transactions .panel .tablewrap{border:0;overflow:visible}
 body #transactions .panel .tablewrap>table{display:block;min-width:0!important;width:100%;table-layout:auto}
 body #transactions .panel .tablewrap>table thead{display:none}
 body #transactions .panel .tablewrap>table tbody{display:block}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction{display:grid!important;position:relative;grid-template-columns:46px minmax(0,1fr) minmax(90px,36%) 32px;column-gap:7px;padding:16px 0;margin:0;border-bottom:1px solid var(--line);background:transparent;touch-action:pan-y}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction td:nth-child(n){display:none;position:static;padding:0;border:0;width:auto;font-size:12px;min-width:0}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction td:nth-child(2){display:block;grid-column:1;grid-row:1;color:var(--b);font-size:12px;font-weight:750;text-align:center;background:color-mix(in srgb,var(--b) 10%,var(--p));border-radius:10px;padding:8px 3px;align-self:start}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction td:nth-child(3){display:block;grid-column:2;grid-row:1;font-size:14px;font-weight:650;overflow-wrap:anywhere}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction td:nth-child(8){display:block;grid-column:3;grid-row:1;text-align:right;font-size:13px;font-weight:700;overflow-wrap:anywhere}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction td:nth-child(9){display:block;grid-column:4;grid-row:1;align-self:start}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction .pocket-row-meta{display:block;font-weight:400;font-size:11px;line-height:1.5;color:var(--muted);margin-top:5px}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction .amount-original{font-weight:400;font-size:10px}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction .transaction-more{width:32px;min-width:32px;border:0;background:transparent}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction .transaction-edit{display:none!important}
 body #transactions.mobile-selecting .panel .tablewrap>table tbody tr.pocket-transaction td:first-child{display:block;position:absolute;left:0;top:4px;z-index:2}
 body #transactions.mobile-selecting .panel .tablewrap>table tbody tr.pocket-transaction td:nth-child(2){margin-top:25px}
 body #transactions .panel .tablewrap>table tbody tr.selected-row{background:color-mix(in srgb,var(--b) 10%,var(--p))}
 body #transactions .transaction-table-hint{display:block;font-size:11px}
 .pocket-log-add{display:block;width:100%;margin-top:14px;min-height:48px}
 body #modal.on{padding:0;align-items:stretch;background:var(--p)}
 body #modal #form{width:100%;max-width:100%;height:var(--mobile-visible-height,100dvh);max-height:var(--mobile-visible-height,100dvh);border:0;border-radius:0;background:var(--bg);margin:0;display:flex;flex-direction:column}
 body #modal #modalTitle{padding:18px 20px 10px;margin:0;font-size:21px}
 body #modal .dialog-content{flex:1;min-height:0;overflow:auto;padding:14px 18px;overscroll-behavior:contain}
 body #modal #form .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 body #modal #form label{min-width:0;font-size:12px}
 body #modal #form input,body #modal #form select{font-size:16px;min-height:46px}
 body #modal #form label:has(>#type){display:none}
 body #modal #form .pocket-native-select{display:none!important}
 body #modal .pocket-picker{display:block;text-align:left;width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--p);color:var(--ink);font:inherit;overflow-wrap:anywhere}
 body #modal .pocket-amount-field{position:relative}
 body #modal .pocket-amount-field input{font-size:27px!important;font-weight:750;padding-right:42px;width:100%;box-sizing:border-box}
 body #modal .pocket-pad-open{display:block;position:absolute;right:3px;bottom:3px;height:40px;width:38px;border:0;border-radius:8px;background:var(--p);color:var(--b);font-size:21px}
 body #modal .pocket-entry-types{display:flex;gap:6px;padding:0 18px 8px}
 body #modal .pocket-entry-types button{flex:1;min-height:42px;border:1px solid var(--line);border-radius:12px;background:var(--p);color:var(--ink);font-weight:650}
 body #modal .pocket-entry-types button[aria-pressed=true]{background:var(--b);color:white!important;border-color:var(--b)}
 body #modal #form>.actions{padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--p);border-top:1px solid var(--line);display:flex;gap:10px;flex-shrink:0}
 body #modal #submitTransaction{flex:1;min-height:48px;background:var(--b);color:#fff!important}
}

.pocket-auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:#392070;font-size:19px}.pocket-auth-brand img{display:block}
.pocket-timeline-head{display:none}.pocket-transaction time{display:none}
@media(max-width:680px){
 .pocket-timeline-head{display:block;margin-bottom:16px;padding:14px;border:1px solid var(--line);background:var(--p);border-radius:20px}
 .pocket-view-switch{display:flex;gap:6px}.pocket-view-switch #pocketPrivacy{margin-left:auto}
 .pocket-view-switch [aria-pressed=true][data-pocket-view]{background:var(--b);color:#fff!important}
 .pocket-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:16px}
 .pocket-totals small,.pocket-totals b{display:block;overflow-wrap:anywhere}.pocket-totals small{color:var(--muted);font-size:11px;margin-bottom:6px}.pocket-totals b{font-size:14px;font-variant-numeric:tabular-nums}
 .pocket-calendar{margin-top:18px}.pocket-calendar[hidden]{display:none}.pocket-calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
 .pocket-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:12px 0}.pocket-days span{text-align:center;color:var(--muted);font-size:12px;padding:8px 0}
 .pocket-days button{position:relative;min-height:40px;border:1px solid transparent;border-radius:10px;background:var(--p);color:var(--ink)}.pocket-days button[data-has-transactions=true]::after{content:'';position:absolute;bottom:4px;left:calc(50% - 2px);width:4px;height:4px;background:var(--b);border-radius:50%}.pocket-days button[aria-pressed=true]{background:var(--b);color:#fff}.pocket-days button[aria-pressed=true]::after{background:white}
 body #transactions .pocket-transaction time{display:block}.pocket-desktop-date{display:none}.pocket-date-scope{font-size:12px;color:var(--muted)}
}
@media(max-width:680px){
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction[data-same-day=true] td:nth-child(2){visibility:hidden}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction::before{content:'';position:absolute;width:2px;background:var(--line);left:22px;top:52px;bottom:0}
 body #transactions .panel .tablewrap>table tbody tr.pocket-transaction[data-same-day=true]::before{top:0}
 body #transactions.mobile-selecting .panel .tablewrap>table tbody tr.pocket-transaction::before{display:none}
 body #modal #form .form>label:has(#date){order:-4}
 body #modal #form .dual-currency-card{order:-3}
 body #modal #form .form>label:has(#amount){order:-3;grid-column:1/-1}
 body #modal #form .form>label:has(#txCurrency){order:-2}
 body #modal #form .form>label:has(#acc),body #modal #form .form>label:has(#cat){order:-1}
}

/* Image-aware account/category choices also replace native desktop dropdowns. */
body select.pocket-icon-native{display:none!important}
body button.pocket-icon-picker{display:flex!important;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--p,#fff);color:var(--ink);font:inherit;text-align:left}
.pocket-choice-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;font-size:24px}
.pocket-choice-icon img{width:28px;height:28px;object-fit:contain;border-radius:6px}
.pocket-choice-label{min-width:0;flex:1;overflow-wrap:anywhere}
#pocketSheet .pocket-choice strong{display:flex;align-items:center;gap:10px}
@media(min-width:681px){#pocketSheet{margin:auto;border-radius:22px}}