@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

:root {
    --minute-height: 2px;
    --title-font-family: serif;
    --body-font-family: sans-serif;
    --monospace-font-family: FixWebkitSizing, monospace;
    --accent-color: #1a818e;
}
* {
    box-sizing: border-box;
}
.print {
    display: none;
}
@media print {
    .print {
        display: block;
    }
    .no-print {
        display: none;
    }
}
body {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: clamp( 8px, 2vw, 16px );
    font-size: 16px;
    font-family: var( --body-font-family );
}
body.has-tasks {
    gap: 1.6rem;
}
header {
    display: flex;
    flex-direction: row;
    gap: .8rem;
}
footer {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    color: #888;
}
label span {
    white-space: nowrap;
}
input {
    border-radius: 1px;
    border: 1px solid #000;
    padding-inline: .4rem;
    padding-block: .2rem;
}
input:focus {
    outline-width: 2px;
    outline-color: #000;
}
button {
    white-space: nowrap;
    padding: .4rem .8rem;
}
h1 {
    margin: 0;
}
a {
    color: var( --accent-color );
}
.hide {
    display: none;
}
#entry-clear {
    display: none;
}
body.has-tasks #entry-clear {
    display: block;
}
/* #entry-clear button {
    border: none;
    background: transparent;
    color: #22aabb;
    cursor: pointer;
}
#entry-clear button:hover {
    text-decoration: underline;
} */
main {
    display: none;
}
body.has-tasks main {
    display: block;
}
#times {
    display: grid;
    grid-template-columns: 1em min-content min-content max-content;
    grid-template-rows: minmax( 1rem, auto );
    grid-auto-rows: minmax( 1rem, auto );
    gap: 0;
    align-items: stretch;
}
.row {
    display: contents;
}


.row > :nth-child(1) {
    display: flex;
    align-items: center;
    /* cursor: ns-resize; */
}
.row > :nth-child(3) {
    /*border-right: 1px solid #000;*/
    display: flex;
    align-items: center;
    grid-column: span 2;
}
.row > :nth-child(3):before {
    content: " ";
    height: 1px;
    width: 100%;
    display: block;
    background: #000;
}
.row > :nth-child(4) {
    grid-column: span 2;
    color: var( --color, #ddd );
    /* background:
            repeating-linear-gradient(
                    45deg,
                    transparent 0,
                    transparent 9px,
                    currentColor 9px,
                    currentColor 10px
            ),
            repeating-linear-gradient(
                    -45deg,
                    transparent 0,
                    transparent 9px,
                    currentColor 9px,
                    currentColor 10px
            ); */
}

.row > :nth-child(2) {
    padding-inline: .5rem;
}
.row > :nth-child(2),
.row > :nth-child(5),
.row > :nth-child(6) {
    display: flex;
    align-items: center;
}
.row > :nth-child(2),
.row > :nth-child(5) {
    justify-content: end;
}
.row > :nth-child(5),
.row > :nth-child(6) {
    padding-inline: 1rem;
}

.row > :nth-child(5) {
    height: calc( var( --minute-height ) * var( --minutes, 0 ) + 1.5rem );
    min-height: 1.5rem;
}

.row > :nth-child(4) {
    /* background-color: var( --color, oklch( 1 0 0 ) ); */
    background: linear-gradient(
            to right,
            oklch( from var( --color ) 91% calc( c * .1 ) h ),
            #ffffff
    );
}
.row > :nth-child(5),
.row > :nth-child(6){
    /* background-color: oklch( from var( --color ) 99% calc( c * .25 ) h ); */
}
.row .duration {
    font-family: var( --monospace-font-family );
    font-size-adjust: .548;
}

#add-task-container {
    display: flex;
    gap: .4rem .8rem;
    align-items: center;
    flex-wrap: wrap;
}
#add-task-container label {
    display: flex;
    gap: .8rem;
    align-items: center;
    flex-wrap: wrap;
}
#add-task-container input {
    padding: .4rem .8rem;
    width: 40ch;
    flex-grow: 1;
}
#add-task-container button {
    padding: .35rem .8rem;
}

.time {
    border: 1px solid #000;
    font-family: var( --monospace-font-family );
    width: 100%;
    height: 1.6rem;
    padding-inline: .4rem;
}
.time[type="text"] {
    text-align: center;
}
.time:disabled {
    color: #000;
    text-align: center;
    background: #f5f5f5;
}
.row > :nth-child(1):before {
    content: " ";
    height: 3px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 100%;
    display: block;
}
.row:first-child > :nth-child( 1 ) {
    cursor: pointer;
}
.row:first-child > :nth-child( 1 ):before {
    display: none;
}
.row > :nth-child( 1 ) button {
    display: none;
    width: 100%;
    height: 1rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    background-image: url( "clock-running.svg" );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 1rem;
}
.row > :nth-child( 1 ) button.stopped {
    background-image: url( "clock.svg" );
}
/*.row > :nth-child( 1 ) a:focus-visible {*/
/*    outline-offset: 0;*/
/*}*/
.row:first-child > :nth-child( 1 ) button {
    display: block;
}
.row:first-child > :nth-child( 2 ) {
    /*grid-column: span 2;*/
    /*padding-inline-start: 0;*/
    /*justify-content: start;*/
    /*padding-inline-end: 2.2rem;*/
    /*background-image: url( "running-clock.svg" );*/
    /*background-repeat: no-repeat;*/
    /*background-position: right .5rem center;*/
    /*background-size: auto 80%;*/
}
/*
.row:first-child .time {
    animation: border-fade 1s linear infinite alternate;
}
@keyframes border-fade {

    from {
        border-color: #000;
    }

    to {
        border-color: #eee;
    }

}
*/
.task {
    border: none;
    padding: 0;
    min-width: max( 10ch, 100% );
    font-size: 1rem;
    /*font-family: var( --body-font-family );*/
    padding-inline: .2rem;
    font: inherit;
    outline-offset: .2rem;
    outline-width: 2px;
    outline-color: var( --accent-color );
}
.task:hover {
    cursor: pointer;
    outline-style: solid;
    outline-width: 1px;
}
.task:focus {
    cursor: text;
    outline-width: 2px;
}
.task:focus-visible {
    
}
.task-length {
    position: absolute;
    visibility: hidden;
    white-space: pre;
    font: inherit;
    /* Space for datalist drop-down */
    padding-right: 2rem;
}

#time.error {
    outline: 2px solid red;
}