* {
    box-sizing: border-box;
}

html {
    --hue: #00ffbf;
    --canvas: color-mix(in lab, var(--gray) 13%, var(--bg));
    --toolbar: color-mix(in lab, var(--gray) 22%, var(--bg));
    --button-face: color-mix(in lab, var(--gray) 30%, var(--bg));
    --inactive-selected: color-mix(in lab, var(--gray) 60%, var(--bg));
    --field: color-mix(in lab, var(--green) 6%, var(--bg));
    --alt-field: color-mix(in lab, var(--green) 20%, var(--canvas));
    --sidebar: color-mix(in lab, var(--green) 30%, var(--canvas));
}

@media (prefers-color-scheme: light) {
    html {
        --bg: white;
        --fg: black;
        --gray: color-mix(in lab, var(--fg) 35%, var(--bg));
        --line: var(--gray);
        --green: color-mix(in lab, var(--hue) 40%, var(--canvas));
    }
}

@media (prefers-color-scheme: dark) {
    html {
        --bg: black;
        --fg: white;
        --gray: color-mix(in lab, var(--fg) 80%, var(--bg));
        --line: color-mix(in lab, var(--fg) 50%, var(--bg));
        --green: var(--hue);
    }
}

html {
    color-scheme: light dark;
    background-color: var(--canvas);
    --line-height: 21px;
    --td-hpad: calc(var(--line-height) * 0.25);
    font-size: 14px;
    line-height: var(--line-height);
    /* TODO: Lucida Grande is a nice font, what can we use on windows/linux? */
    font-family: Arial, 'Liberation Sans', Arimo, sans-serif;
}

body {
    margin: 0 auto;
    height: 100dvh;
    overflow: hidden;
}

.login {
    display: grid;
    grid: auto-flow / max-content min-content;
    width: min-content;
}

#datas {
    display: none;
}

.all {
    display: grid;
    grid: minmax(0, max-content) 1fr / minmax(0, max-content) 1fr minmax(0, min-content);
}

#overview {
    max-width: 360px;
    grid-area: 1 / 1 / 3 / 1;
    display: grid;
    grid: calc(3*var(--line-height)) 1fr / 1fr;
}

#account,
#transaction {
    display: contents;
}

.controls {
    padding: var(--line-height);
    padding-bottom: calc(var(--line-height) - 1px);
    border-bottom: 1px solid var(--line);
    background-color: var(--toolbar);
}

#account .controls {
    grid-area: 1 / 2 / 1 / 2;
}

#transaction>.controls {
    grid-area: 1 / 3 / 1 / 3;
}

.transactions {
    grid-area: 2 / 2 / 2 / 2;
    container-type: size;
    height: 100%;
    background-color: var(--field);
}

.controls {
    display: flex;
    gap: var(--line-height);

}

.spacer {
    margin: calc(0px - var(--line-height));
    flex-grow: 1;
}

.edit {
    grid-area: 2 / 3 / 2 / 3;
    border-left: 1px solid var(--line);
}

#pagestate {
    display: none;
}

#account:empty,
#transaction:empty {
    display: none;
}

.backbutton {
    display: none;
}

@media (max-width: 1200px) {
    .has_transaction~#overview {
        display: none;
    }

    #transaction .backbutton {
        display: initial;
    }
}

@media (max-width: 800px) {
    #overview {
        max-width: unset;
        grid-area: 1 / 2 / 2 / 2;
    }

    .has_transaction~#account {
        display: none;
    }

    .has_account~#overview,
    .has_transaction~#overview {
        display: none;
    }

    #account .backbutton {
        display: initial;
    }

    #transaction>.controls {
        grid-area: 1 / 2 / 1 / 2;
    }

    .edit {
        grid-area: 2 / 2 / 2 / 2;
        border: none;
    }
}

.scroll {
    overflow-y: auto;
}

form {
    display: contents;
}

input,
textarea {
    background-color: var(--field);
    border: 1px solid var(--line);
    border-radius: 2px;
}

input:disabled,
textarea:disabled {
    background-color: var(--button-face);
}

select,
button,
input:not([type=checkbox]) {
    /* Precisely fit controls into a line of text or table */
    height: var(--line-height);
    width: max-content;
    vertical-align: bottom;
    margin: 0;
}

button,
input:not([type=date]) {
    font-size: inherit;
    font-family: inherit;
}

[type=checkbox] {
    margin: 0;
}

button,
[type="submit"] {
    line-height: 0;
}

/* This is the real trick
button::before,
[type="submit"]::before {
    content: '';
    display: block;
    margin-bottom: -0.5px;
}
*/

hr {
    width: 100%;
    margin: 0;
    border-style: solid solid none none;
    align-self: stretch;
}

table {
    border-spacing: 0;
}

.t4 {
    --cell-width: calc(4 * var(--line-height));
}

.t5 {
    --cell-width: calc(5 * var(--line-height));
}

.t6 {
    --cell-width: calc(6 * var(--line-height));
}

.t8 {
    --cell-width: calc(8 * var(--line-height));
}

.t9 {
    --cell-width: calc(9 * var(--line-height));
}

.th,
th {
    user-select: none;
    /* TODO: reconsider */
    font-weight: 700;
    color: color-mix(in hsl, CanvasText 65%, transparent);
    text-align: left;
}

.listhead {
    /* TODO: This looks a little wonky */
    outline: 1px solid var(--line);
    background-color: var(--canvas);
    z-index: 1;
    position: relative;
}

tr.a,
:not(tr).a>* {
    background-color: var(--field);
}

tr.b,
:not(tr).b>* {
    background-color: var(--alt-field);
}

.td,
.th,
td,
th {
    /* Make each table row take exactly one line */
    min-width: var(--cell-width);
    width: var(--cell-width);
    padding: 0 var(--td-hpad);
}

.manage {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

[draggable=true] {
    cursor: grab;
}

.dragging {
    cursor: grabbing;
}

tr.droppable,
tbody.droppable>:last-child,
tr.droppable>.tdinput>*,
tbody.droppable>:last-child>.tdinput>* {
    /* work around chrome bug */
    box-shadow: inset 0 -2px 0 LinkText;
    box-shadow: inset 0 -2px 0 AccentColor;
}

.droppable+tr,
.droppable+tbody>:first-child,
.droppable+td>.tdinput>*,
.droppable+tbody>:first-child>.tdinput>* {
    box-shadow: inset 0 2px 0 LinkText;
    box-shadow: inset 0 2px 0 AccentColor;
}

.groupname {
    color: inherit;
}

.dragging button {
    cursor: grabbing;
}

a.td {
    color: inherit;
    cursor: default;
    text-decoration: inherit;
}

entry-list .checked>.td {
    background-color: var(--inactive-selected);
    border-radius: var(--td-hpad);
}

entry-list .checked>.td:first-child {
    margin-right: calc(-2 * var(--td-hpad));
}

entry-list:focus .checked>.td {
    background-color: SelectedItem;
    color: SelectedItemText;
}

entry-list .checked:has(+ .checked)>.td {
    margin-bottom: calc(-2 * var(--td-hpad));
    padding-bottom: calc(2 * var(--td-hpad));
}

entry-list .is_future>* {
    color: GrayText;
    font-style: italic;
}

entry-list {
    /* We already have focus styling. Is that enough? */
    outline: none;
}

.grid {
    max-height: 100%;
    overflow-y: auto;
    display: grid;
}

.gapgrid {
    --gg-hpad: calc(var(--line-height) - var(--td-hpad));
}

.gapgrid .listhead:first-child,
.gapgrid .listhead:last-child {
    grid-column: span 2;
}

.gapgrid .td:not(.tdinput) {
    border-radius: var(--td-hpad);
    margin-left: calc(0px - var(--td-hpad));
    margin-right: calc(0px - var(--td-hpad));
    padding-left: calc(2 * var(--td-hpad));
    padding-right: calc(2 * var(--td-hpad));
}

.gapgrid .listhead:first-child {
    padding-left: var(--line-height);
}

.gapgrid .td:first-child {
    grid-column-start: 2;
    margin-left: 0;
    padding-left: var(--td-hpad);
}

.gapgrid .td:last-child {
    margin-right: 0;
    padding-right: var(--td-hpad);
}

.grid.c5 {
    grid: auto-flow / var(--gg-hpad) 1fr max-content max-content max-content max-content var(--gg-hpad);
}

.grid.c4 {
    grid: auto-flow / var(--gg-hpad) 1fr max-content max-content max-content var(--gg-hpad);
}

.grid.c2 {
    grid: auto-flow / 1fr max-content;
}

.c5 .disclosure+label {
    grid-column: span 2;
}

.grid>*,
.grid>*>* {
    display: contents;
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.th1 {
    position: sticky;
    top: 0;
    z-index: 10;
}

.th2 {
    position: sticky;
    margin-top: var(--line-height);
    top: var(--line-height);
    z-index: 10;
}

.th3 {
    position: sticky;
    top: calc(2 * var(--line-height));
    z-index: 10;
}

@container (max-width: 500px) {
    .grid .td:nth-child(2) {
        grid-column-start: 2;
    }

    .grid .td:nth-child(1):not(.tdinput) {
        margin-right: 0;
        padding-right: var(--td-hpad);
        margin-bottom: calc(0px - 2 * var(--td-hpad));
        padding-bottom: calc(2 * var(--td-hpad));
    }

    .grid .td:nth-child(2):not(.tdinput) {
        margin-left: 0;
        padding-left: var(--td-hpad);
    }

    .grid .th:nth-child(2) {
        grid-column: 1 / 3;
        padding-left: var(--line-height);
    }

    .grid .th:not(:first-child) {
        top: var(--line-height);
    }

    .grid.c4 {
        grid: auto-flow / var(--gg-hpad) 1fr max-content 1fr var(--gg-hpad);
    }

    .grid.c4 .td:nth-child(1) {
        grid-column: 2 / 5;
    }

    .grid.c4 .th:nth-child(1) {
        grid-column: 1 / 6;
    }

    .grid.c5 {
        grid: auto-flow / var(--gg-hpad) 1fr max-content max-content 1fr var(--gg-hpad);
    }

    .grid.c5 .td:nth-child(1) {
        grid-column: 2 / 6;
    }

    .grid.c5 .th:nth-child(1) {
        grid-column: 1 / 7;
    }
}

.disclosure {
    position: absolute;
    left: -1000px;
}

.disclosure:focus-visible+label {
    box-shadow: inset 0 0 0px 2px LinkText;
    box-shadow: inset 0 0 0px 2px AccentColor;
    border-radius: 2px;
}

.disclosure+label::before {
    content: '►';
    display: inline-block;
    width: 1em;
}

.disclosure:checked+label::before {
    content: '▼';
    display: inline-block;
    width: 1em;
}

.disclosure+label+* {
    display: none;
}

.disclosure:checked+label+* {
    display: initial;
}

.tdinput {
    padding: 0;
    position: relative;
}

/* The default focus ring is on the same z-index as the input. */

.tdinput :focus-visible {
    box-shadow: inset 0 0 0px 2px LinkText;
    box-shadow: inset 0 0 0px 2px AccentColor;
    outline: none;
}

.tdinput input {
    border: none;
    margin: 0;
    width: 100%;
    background-color: transparent;
    padding: 0 var(--td-hpad);
}

.tdinput :disabled,
.tdinput [readonly] {
    /* ??? */
    background-color: var(--canvas);
    color: GrayText;
}

currency-input :disabled::placeholder {
    color: transparent;
}

:invalid:not(:focus) {
    outline: 2px solid red;
}

/* editor */

.editor {
    padding: var(--line-height);
}

.editor,
edit-part {
    display: flex;
    flex-direction: column;
    gap: var(--line-height);
}

edit-part {
    width: min-content;
}

edit-part>div:empty {
    display: none;
}

.date-table {
    display: grid;
    gap: var(--line-height);
    grid-auto-columns: calc(3*var(--line-height)) 1fr 1fr;
    width: calc(20 * var(--line-height));
}

.date-table label {
    grid-column-start: 1;
    font-weight: 700;
    color: color-mix(in hsl, CanvasText 65%, transparent);
    text-align: right;
}

.date-table>label+:not(label) {
    grid-column-start: 2;
}

.date-table>label+:not(label)+:not(label) {
    grid-column-start: 3;
}

[name="tx-repeat"] {
    width: 100%;
}

.repeat>* {
    display: none;
}

[data-value=R]~.repeat>.R {
    display: initial;
}

[data-value=C]~.repeat>.C {
    display: initial;
}

.suggested {
    color: GrayText;
    font-style: italic;
}

.overview .number,
.number {
    text-align: right;
}

short-currency,
long-currency {
    white-space: nowrap;
}

.edit-table {
    position: relative;
    outline: 1px solid var(--line);
    background-color: var(--field);
}

.tdinput .sigil {
    position: absolute;
    padding-left: var(--td-hpad);
    z-index: 2;
    background-color: transparent;
    /* ??? */
    width: max-content;
}

.tdinput .sigil+input {
    padding-left: calc(var(--td-hpad) + 2ch);
}

.date-table textarea {
    height: calc(2 * var(--line-height) - 1px);
    width: 100%;
    margin: 0;
}

/* sidebar */

#overview>.controls {
    grid-area: 1 / 1 / 1 / 1;
    border-bottom: 1px solid var(--line);
    z-index: 2;
}

.overview {
    grid-area: 1 / 1 / 3 / 1;
}

.overview>.grid {
    padding: 0 calc(var(--line-height) - var(--td-hpad));
}

.overview,
#overview>.controls {
    background-color: var(--sidebar);
    box-shadow: inset -5px 0 10px -10px var(--line);
    border-right: 1px solid var(--line);
}

.overview .th,
.gapgrid .innerh {
    padding-top: calc(2 * var(--td-hpad));
}

.overview .th1,
.overview .th2 {
    margin-bottom: calc(2 * var(--td-hpad));
    padding-top: 0;
    background-color: var(--sidebar);
    box-shadow: 0px 0px 3px 3px var(--sidebar);
}

.overview .td:first-child,
.gapgrid .td.inneritem {
    padding-left: calc(3 * var(--td-hpad));
}

.overview .th:last-child,
.overview .td:last-child {
    text-align: right;
}

/* budgeting */

.budgeting.grid {
    background-color: var(--field);
    grid: auto-flow / var(--gg-hpad) minmax(calc(6*var(--line-height)), 1fr) max-content max-content max-content max-content var(--gg-hpad)
}

date-picker {
    width: max-content;
    border: 1px solid var(--line);
    align-self: center;
}

.months,
.years {
    display: flex;
    gap: 0;
}

.years>input {
    position: absolute;
    left: -100px;
}

.years {
    gap: 1px;
    background-color: var(--line);
}

.years>label,
.months {
    background-color: var(--canvas);
}

.years>:not(:checked)+label {
    border-bottom: 1px solid var(--line);
    background-color: var(--toolbar);
}

.years>:focus-visible+label {
    outline: 3px solid LinkText;
    outline: 3px solid AccentColor;
    border-radius: 2px;
    position: relative;
    z-index: 1;
}

.years>label,
.months>a {
    flex-grow: 1;
    padding: 0 var(--td-hpad);
    text-align: center;
}

.months>.current {
    font-weight: bold;
    text-decoration: inherit;
    color: inherit;
}