@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('./geist-mono-latin-300-normal.woff2') format('woff2');
}
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  font-family: "Geist Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
:root {
  --b0: #F5F5F5;
  --b1: #FFFFFF;
  --c0: #000000;
  --c1: #D0D0D0;
  --f0: #FF6565;
}

html {font-size: 16px;}
a, i, button, svg {
  font-size: 1rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
i {display: inline-flex;}
svg {
  display: block;
  min-width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: currentColor;
  fill: none;
}
a:hover, i:hover, svg:hover {color: var(--f0)}
button {
  padding: 0.25rem 1.5rem;
  border: 1px solid var(--c1);
  background-color: inherit;
}
button:hover {background-color: var(--c1)}

fieldset, hr, label, input, textarea, select {
  display: block;
  width: 100%;
  font-size: 1rem;
  outline: none;
}
fieldset, hr {
  border: none;
  border-bottom: 1px solid var(--c1);
}
fieldset {
  display: none;
  margin: 0;
  padding: 0;
  background-color: var(--b1);
}
fieldset > label, fieldset > input, fieldset > textarea {
  width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
}
fieldset > header {margin-bottom: 1rem}
hr {margin: 0.5rem 0}
input, textarea, select {
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid var(--c1);
  background-color: inherit;
  color: inherit;
}
textarea {
  min-height: 15rem;
  resize: vertical;
}
input:focus, textarea:focus, select:focus {border-color: var(--c0)}
input:last-child, textarea:last-child, select:last-child {margin: 0}


body, aside, section {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}
body, aside, section, header, nav, footer {display: flex}
aside, section {flex-direction: column}
body, header, nav, footer {flex-direction: row}
header, nav, footer {gap: 1rem}
nav > i::before {content: '#';}
body {background-color: var(--b0)}

aside {
  flex: 0 0 min-content;
  gap: 2rem;
  padding: 0.5rem 0.5rem 1rem 0.5rem;
  background-color: var(--b0);
  color: var(--c0);
}
aside span, aside i {writing-mode: sideways-lr;}
aside svg {stroke-width: 2;}

section {
  flex: 0 0 min-content;
  width: 20%;
  min-width: 20rem;
  border-left: 1px solid var(--c1);
  background-color: var(--b0);
}
header, footer {padding: 1rem}
header {border-bottom: 1px solid var(--c1)}
footer {border-top: 1px solid var(--c1)}
header > span {cursor: pointer}
header > span:hover {color: var(--f0)}

article {
  padding: 1rem;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
article::-webkit-scrollbar {display: none;}
section > article {height: calc(100vh - 2.5rem - 1px)}
section.focus {
  flex: 1 1 auto;
  background-color: var(--b1);
}
section.focus > header > i[data-btn="clss"], section > header > i[data-btn="crt"] {display: none}
section.focus > header > i[data-btn="crt"], section > header > i[data-btn="clss"] {display: block}
aside > *, header > *, nav > *, footer > * {margin: auto 0}
aside > p, header > p, nav > p, footer > p {flex: 1 1 auto}

el-dot, el-sqr {
  display: block;
  min-width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--c1);
}
el-dot {
  border-radius: 1.5rem;
  background-color: var(--c1);
}
el-sqr {cursor: pointer}
el-sqr:hover {background-color: var(--c1)}
el-sqr[data-sts="finished"] {background-color: var(--c1);}
el-logs, el-note, el-task {
  display: block;
  cursor: pointer;
}

el-logs > nav {gap: 0.5rem;}
el-logs > div {
  margin: 0 0 0 0.75rem;
  padding: 1rem;
  border-left: 1px solid var(--c1);
  overflow-wrap: break-word;
}
el-logs > div > p {
  margin: 0 0 1rem 0;
  padding: 0;
}

el-task, el-note {
  margin: 0 0 1rem 0;
  padding: 1rem;
  border: 1px solid var(--c1);
}

el-task > p, el-note > p {margin: 0.5rem 0}
el-task i::before, el-note i::before {content: '#'}
el-task:hover, el-note:hover {border-color: var(--c0)}
el-logs:hover el-dot {background-color: var(--c0)}


.hide {display: none;}
section.focus fieldset {display: block;}
section.focus fieldset.hide {display: none;}
section.focus > header > i[data-btn="crt"].hide {display: none;}
el-logs.focus div, el-logs.focus el-dot {border-color: var(--c0)}
el-logs.focus el-dot {background-color: var(--c0)}
el-logs.remove div, el-logs.remove el-dot {border-color: var(--f0)}
el-logs.remove el-dot { background-color: var(--f0)}
el-task.focus, el-note.focus {border-color: var(--c0)}
el-task.remove, el-note.remove {border-color: var(--f0)}
i.hide {
  display: block;
  color: var(--c1);
}