html{--background-color: #222;--panel-color: #444;--header-color: #227;--table-color: #555;--row-alternate: #333;--affirm-color: #227;--negative-color: #722;--text-color-primary: #ddd;--icon-halo: #fff;--active-text: #55f;--disabled-color: #444;min-height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background-color);color:var(--text-color-primary);height:100%}#root,main{min-height:100%;>header{z-index:10}}header{display:flex;background:var(--header-color);align-items:center;flex-wrap:wrap;padding:1em;position:sticky;top:0;gap:1em;h1{flex:1;margin:0;white-space:nowrap}span{display:flex;gap:1em;div.year-month-picker{flex:1;white-space:nowrap;button[disabled]{visibility:hidden}}}}table{width:100%;border-collapse:collapse;margin-top:.5em;thead,tfoot{background:var(--header-color)}tbody{tr{background:var(--table-color);&:hover{filter:brightness(1.3)}&:nth-child(odd){background:var(--row-alternate)}}}th,td{padding:.5em;&:first-child,&:last-child{text-align:center;cursor:pointer;&:hover{filter:brightness(1.5);text-shadow:0 0 2px var(--icon-halo)}}&:nth-child(n+7):nth-child(-n+9){text-align:right}}+*{margin-top:.5em}}dialog{padding:0;background:var(--background-color);border:0;border-radius:5px;color:var(--text-color-primary);header{font-size:1.1em;font-weight:700;text-align:center}p{display:flex;margin:1em;label{flex:1;padding-right:1em;text-align:right}}footer{display:flex;justify-content:space-between;padding:1em}&::backdrop{backdrop-filter:blur(5px)}}section{margin:.5em;padding:1em;background:var(--panel-color);border-radius:1em;&[title=Accounts]{tbody tr{cursor:pointer}tbody tr.selected{font-weight:700;color:var(--active-text)}}>header{background:none;padding:0;display:flex;justify-content:space-between;cursor:pointer;h2{margin:0}span{padding:.4em;border-radius:5px;background:var(--affirm-color)}}}.paginator{display:flex;justify-content:space-between;span{display:flex;gap:.5em;align-items:center}}@media screen{#root .print-only{display:none}}input[type=submit],button{border:1px solid #477;color:var(--text-color-primary);background:var(--affirm-color);cursor:pointer;border-radius:5px;padding:.4em;&[title=Cancel]{background:var(--negative-color)}&:hover{filter:brightness(1.3)}&[disabled]{cursor:not-allowed;background:var(--disabled-color);filter:none}}@media screen and (max-width:900px){main{>header{padding:0 .25em}}section{padding:.25em;border-radius:.25em}}@media screen and (max-width:500px){main{>header{span{display:block}}}table{display:block;thead,tbody,tfoot{display:block}}[title=Accounts]{tr{display:grid;grid-template-columns:1fr 4fr 1fr;grid-template-areas:"delete name edit" "delete address edit" "delete phone edit" "delete email edit";justify-content:stretch;th,td{text-align:left;padding:.25em;align-self:center;&:first-child{grid-area:delete;font-size:1.6em;align-self:center}&:nth-child(2){grid-area:name}&:nth-child(3){grid-area:address}&:nth-child(4){grid-area:phone}&:nth-child(5){grid-area:email}&:last-child{grid-area:edit;font-size:1.6em;align-self:center;text-align:right}}th{&:nth-child(2),&:nth-child(n+4):nth-child(-n+5){display:none}&:nth-child(3){visibility:hidden;display:block}&:nth-child(3):before{content:"Account";visibility:visible}}}}[title=Transactions]{tr{display:grid;grid-template-columns:1fr 3fr 2fr 1fr;grid-template-areas:"delete account date edit" "delete what change edit" "delete note balance edit";justify-content:stretch;th,td{text-align:left;padding:.25em;&:first-child{grid-area:delete;font-size:1.6em;align-self:center}&:nth-child(2){grid-area:date;text-align:right}&:nth-child(3){grid-area:ref;display:none}&:nth-child(4){grid-area:account}&:nth-child(5){grid-area:what}&:nth-child(6){grid-area:note}&:nth-child(7){grid-area:change;color:#0f0}&:nth-child(8){grid-area:change;color:red}&:nth-child(9){grid-area:balance}&:last-child{grid-area:edit;font-size:1.6em;align-self:center;text-align:right}&[title="0.00"]{display:none}}th{&:nth-child(7),&:nth-child(8){visibility:hidden}&:nth-child(7):after{content:"Change";visibility:visible;color:var(--text-color-primary)}}}}.paginator{span{&:first-child,&:nth-child(2){display:none}}}}@media print{html{--background-color: initial;--panel-color: initial;--header-color: initial;--table-color: initial;--row-alternate: #ddd;--text-color-primary: #222;width:8in;font-size:10pt}main>header,[title=Accounts],th:first-child,td:first-child,th:last-child,td:last-child,.paginator{display:none}tfoot{tr{display:none;&.print-only{display:table-row;:nth-child(2){text-align:right}}}}main>header.print-only{display:flex;position:initial;justify-content:space-between;align-items:flex-start;hgroup{flex:1;&:last-child{text-align:right}h3{margin:0}time{display:block}}}}