:root{
    --font-size:12px;
    --line-height:16px; 
    --gap:2px;
    --height:calc(var(--line-height) + var(--gap) * 2);
    --height:auto;
    --width-number:2em;
    --background:#FEFEFE;
    --link:purple;
    --text:black;
    --selection:lightyellow
}
@font-face {
    font-family: Junicode;
    src: url("Junicode-CondLight.otf") format("opentype");
}
@font-face {
    font-family: Junicode;
    src: url("Junicode-CondLightItalic.otf") format("opentype");
    font-style:italic;
}
* {
    font-family: Junicode, serif;
    font-variant-numeric: lining-nums;
}

textarea {width:100%;padding:0;margin:0;
    border:1px dotted black;
    height:var(--height)
}

.PIN date, .PIN .tags, .PIN .id {display:none}

tr a{color:var(--text); text-decoration:none}
tr a::after{
    margin-left:5px; content:attr(href); color:var(--link);
    text-decoration:underline}

li:hover a::after{display:block}

tbody tr:hover {background:var(--selection)}

td {line-height:var(--line-height); 
    height:var(--height);
    border-bottom: 1px solid black;
    padding: var(--gap) 5px;
    word-break:break-word;
}

table {
    border-collapse:collapse; 
    border: 1px dotted black;
}

hr{ border:none;
    border-bottom: 1px solid black;
}

button::after {
    content:" "attr(count);
    position:absolute;
    transform:translate(1px, -5px)
}

button{background:transparent;border:none}

p{margin:0;display:inline}
.desc {opacity:.5}

td:last-of-type {text-align:center;min-width:8ch}
td:first-of-type {text-align:center;width:4ch}
td:nth-of-type(3) {text-align:center}

.hidden{display:none}
tr,table {min-width:100%}